/* ============================================================================
   DDM Fusion Home — CSS
   Base: docs/design/home-fusion/fusion.css.js (window.FUSION_CSS), VERBATIM.
   Documented adaptations vs. prototype:
     1. .ddm-fusion: boxed layout restored (owner directive 2026-07-06):
        max-width:1440px; margin:0 auto — WITHOUT the prototype's overflow:hidden
        (it broke the sticky header; marquees keep their own overflow:hidden).
        Gutters outside the box are painted --bg on html/body (dark, and the
        light equivalent when data-theme=light) via body-class + :has() rules
        at the end of this file — never white.
     2. Newsletter (.m-news*) block removed (section omitted per product decision).
     3. Hero product chip (.m-hero-chip/.m-chip-*) removed (owner: IP concern,
        AI-generated hero image must not be tied to a branded product).
     4. Category cards: reference image covers the left edge (.m-cat--img/.m-cat-im),
        replacing the glyph square + 5px color bar; glyph kept as fallback.
     5. Added at the end: responsive media queries, prefers-reduced-motion,
        hero <img>, and theme-toggle icon show/hide. All clearly marked.
   Everything else is identical to the prototype (tokens, classes, values).
   ========================================================================== */

html,body{margin:0;padding:0;}

.ddm-fusion{
  --bg:#120d1c; --paper:#171025; --card:#221a3a; --tile:#ffffff;
  --line:rgba(255,255,255,.09); --ink:#f3eefc; --muted:#a99cc8;
  --violet:#a06bff; --violet2:#6d28d9; --gold:#f0b94a; --goldSoft:rgba(240,185,74,.13);
  --sh:0 18px 50px rgba(0,0,0,.5); --shS:0 8px 24px rgba(0,0,0,.4);
  background:var(--bg); color:var(--ink);
  font-family:'Mulish',system-ui,sans-serif; line-height:1.55;
  position:relative;
  max-width:1440px; margin:0 auto; /* boxed layout (gutters pintados en html/body, ver final del archivo) */
}
/* NOTA (2026-07-06): el modo claro está DORMANTE — el toggle y el script
   anti-FOUC se retiraron de la plantilla y data-theme="dark" es fijo. Los
   bloques [data-theme="light"] de este archivo se conservan por si el tema
   claro vuelve como decisión de producto; hoy ningún UI los activa. */
.ddm-fusion[data-theme="light"]{
  --bg:#f6f1ff; --paper:#ffffff; --card:#ffffff; --tile:#f3eefb;
  --line:rgba(45,20,80,.10); --ink:#221638; --muted:#6a5f86;
  --violet:#6d28d9; --violet2:#8b5cf6; --gold:#b9851f; --goldSoft:rgba(185,133,31,.10);
  --sh:0 18px 44px rgba(60,30,110,.14); --shS:0 6px 20px rgba(60,30,110,.10);
}
.ddm-fusion *{box-sizing:border-box;margin:0;}
.ddm-fusion h1,.ddm-fusion h2,.ddm-fusion h3,.ddm-fusion h4{font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;line-height:1.06;letter-spacing:-.01em;}
.ddm-fusion a{color:inherit;text-decoration:none;cursor:pointer;}
.ddm-fusion button{font-family:inherit;cursor:pointer;border:none;}
.ddm-fusion img{display:block;max-width:100%;}
.ddm-fusion em{font-style:normal;}

/* logo lockup */
.f-logo{display:inline-flex;align-items:center;gap:13px;}
.f-emblem{width:56px;height:56px;border-radius:15px;overflow:hidden;flex:0 0 auto;background:#fff;box-shadow:0 0 0 1.5px var(--goldSoft),var(--shS);display:grid;place-items:center;}
.f-emblem img{width:100%;height:100%;object-fit:cover;}
.f-wm{display:flex;flex-direction:column;line-height:1.08;}
.f-wm-1,.f-wm-2{font-family:'Baloo 2',sans-serif;font-weight:800;letter-spacing:-.01em;white-space:nowrap;}
.f-wm-1{font-size:19px;color:var(--ink);}
.f-wm-2{font-size:19px;color:var(--gold);}
.f-logo--foot .f-emblem{width:60px;height:60px;border-radius:16px;}
.f-logo--foot .f-wm-1,.f-logo--foot .f-wm-2{font-size:21px;}

/* ticker */
.m-ticker{background:#0c0816;color:#e8dffb;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:800;letter-spacing:.04em;}
.ddm-fusion[data-theme="light"] .m-ticker{background:var(--ink);color:#f6f1ff;}
.m-ticker-track{display:inline-flex;animation:f-scroll 38s linear infinite;}
.m-ticker-seg{padding:9px 0;}
.m-ticker-seg em{color:var(--gold);margin:0 14px;}
@keyframes f-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* header */
.m-header{display:flex;align-items:center;gap:42px;padding:16px 56px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);}
.m-nav{display:flex;gap:28px;}
.m-nav a{font-size:15px;font-weight:800;color:var(--muted);transition:color .15s;position:relative;padding:6px 0;}
.m-nav a:hover{color:var(--ink);}
.m-nav a.on{color:var(--ink);}
.m-nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px;background:var(--gold);}
.m-tools{margin-left:auto;display:flex;gap:9px;}
.m-ib{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);color:var(--ink);transition:all .15s;}
.m-ib:hover{transform:translateY(-1px);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,var(--line));}
.m-cart{position:relative;}
.m-badge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--gold);color:#241500;font-size:11px;font-weight:800;display:grid;place-items:center;}

/* hero */
.m-hero{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;padding:70px 56px 44px;align-items:center;overflow:hidden;}
.m-hero::before{content:"";position:absolute;top:-180px;right:-70px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(160,107,255,.34),transparent 62%);pointer-events:none;}
.ddm-fusion[data-theme="light"] .m-hero::before{background:radial-gradient(circle,rgba(139,92,246,.20),transparent 62%);}
.m-hero-l{position:relative;z-index:1;}
.m-kick{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--violet);padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);}
.m-kdot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--goldSoft);}
.m-h1{font-size:74px;line-height:1;letter-spacing:-.02em;margin-top:20px;font-weight:800;}
.m-h1-em{color:var(--gold);}
.m-h1-blink{color:var(--violet);}
.m-lead{font-size:18.5px;color:var(--muted);max-width:450px;margin-top:22px;line-height:1.6;}
.m-cta{display:flex;gap:13px;margin-top:30px;}
.m-btn{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:15px;padding:14px 26px;border-radius:13px;transition:transform .15s,box-shadow .15s,background .15s;font-family:'Baloo 2',sans-serif;white-space:nowrap;}
.m-btn svg{transition:transform .15s;}
.m-btn:hover svg{transform:translateX(3px);}
.m-btn--dark{background:var(--gold);color:#241500;box-shadow:0 10px 24px rgba(240,185,74,.28);}
.m-btn--dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(240,185,74,.4);}
.m-btn--line{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.m-btn--line:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px);}
.m-btn--gold{background:var(--gold);color:#241500;}
.m-btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(240,185,74,.4);}

.m-hero-r{position:relative;z-index:1;}
.m-bignum{position:absolute;top:-58px;right:-6px;font-family:'Baloo 2';font-weight:800;font-size:150px;color:var(--gold);opacity:.12;line-height:1;z-index:0;}
.m-hero-panel{position:relative;z-index:1;border-radius:24px;padding:14px;background:linear-gradient(150deg,rgba(160,107,255,.28),rgba(240,185,74,.14));box-shadow:var(--sh);}
.m-hero-ph{aspect-ratio:4/3.2;border-radius:16px;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 13px,transparent 13px 26px),
  radial-gradient(circle at 60% 38%,rgba(160,107,255,.42),transparent 62%),#191130;
  border:1px dashed rgba(255,255,255,.22);display:grid;place-items:center;overflow:hidden;}
.ddm-fusion[data-theme="light"] .m-hero-ph{background:
  repeating-linear-gradient(135deg,rgba(109,40,217,.05) 0 13px,transparent 13px 26px),
  radial-gradient(circle at 60% 38%,rgba(139,92,246,.18),transparent 62%),#efe8fb;border-color:rgba(109,40,217,.3);}
.m-ph-tag{font-family:'Mulish',monospace;font-size:12.5px;color:#cbbfe4;background:rgba(0,0,0,.4);padding:7px 13px;border-radius:8px;}
.ddm-fusion[data-theme="light"] .m-ph-tag{color:var(--muted);background:rgba(255,255,255,.7);}
/* marquee */
/* Wrapper full-width: anula el max-width:1440 de .ddm-fusion para que la
   marquesina abarque el viewport completo (mismo patrón que .ddm-sitehdr). */
.m-marquee-wrap{max-width:none;margin:0;}
.m-marquee{background:var(--violet2);color:#fff;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);}
.m-marquee-track{display:inline-flex;animation:f-scroll 30s linear infinite;}
.m-marquee-seg{display:inline-flex;align-items:center;padding:13px 0;font-family:'Baloo 2';font-weight:800;font-size:21px;}
.m-marquee-seg>span{display:inline-flex;align-items:center;}
.m-marquee-seg em{color:var(--gold);margin:0 22px;font-size:14px;}

/* sections */
.m-section{padding:66px 56px;}
.m-shead{display:flex;align-items:flex-end;gap:20px;margin-bottom:34px;}
.m-snum{font-family:'Baloo 2';font-weight:800;font-size:30px;color:var(--gold);opacity:.55;line-height:1;}
.m-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin-bottom:7px;}
.m-eyebrow--gold{color:var(--gold);}
.m-h2{font-size:42px;}
.m-see{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--gold);font-size:15px;white-space:nowrap;align-self:flex-end;}
.m-see:hover{text-decoration:underline;}

/* categories */
.m-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.m-cat{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden;}
.m-cat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--cc);}
.m-cat:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--cc);}
.m-cat-g{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:#fff;background:var(--cc);flex:0 0 auto;}
.m-cat-b{display:flex;flex-direction:column;}
.m-cat-n{font-family:'Baloo 2';font-weight:700;font-size:17px;}
.m-cat-c{font-size:12.5px;color:var(--muted);}
.m-cat-arr{margin-left:auto;color:var(--muted);opacity:0;transform:translateX(-6px);transition:all .18s;}
.m-cat:hover .m-cat-arr{opacity:1;transform:translateX(0);color:var(--gold);}

/* spotlight */
.m-spot{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start;}
.m-spot-feat{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shS);}
.m-spot-tile{background:var(--tile);border-radius:16px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;}
.m-spot-tile img{width:100%;height:100%;object-fit:cover;transform:scale(1.65);}
.m-spot-info{padding:14px 12px;display:flex;flex-direction:column;}
.m-spot-n{font-size:25px;margin:8px 0 0;line-height:1.08;}
.m-spot-d{color:var(--muted);font-size:14.5px;margin-top:12px;line-height:1.55;}
.m-spot-foot{margin-top:auto;padding-top:18px;}
.m-price{font-family:'Baloo 2';font-weight:800;font-size:19px;color:var(--gold);}
.m-price--xl{font-size:30px;display:block;margin-bottom:12px;color:var(--gold);}
.m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.m-grid--4{grid-template-columns:repeat(4,1fr);}
.m-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:13px;transition:transform .18s,box-shadow .18s,border-color .18s;}
.m-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--violet) 45%,var(--line));}
.m-tile{background:var(--tile);border-radius:13px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;}
.m-tile img{width:100%;height:100%;object-fit:cover;transform:scale(1.65);transition:transform .25s;}
.m-card:hover .m-tile img{transform:scale(1.72);}
.m-cmeta{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--violet);}
.m-spot-info .m-cmeta{margin-bottom:2px;}
.m-card .m-cmeta{margin-top:12px;}
.m-cname{font-size:14.5px;font-weight:700;margin-top:4px;min-height:38px;font-family:'Baloo 2';line-height:1.18;}
.m-crow{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.m-add{width:38px;height:38px;border-radius:11px;background:var(--violet2);color:#fff;display:grid;place-items:center;transition:all .15s;}
.m-add:hover{transform:scale(1.08);}
.m-add.on{background:#37a85f;color:#fff;font-size:16px;font-weight:800;}

/* community */
.m-comm{padding:8px 56px;}
.m-comm-in{background:linear-gradient(120deg,var(--violet2),#3b1d70);border-radius:28px;padding:56px;display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;position:relative;overflow:hidden;}
/* Ornamento de marca: logo circular girando lentamente (sustituye al ✦).
   Aprobado para uso decorativo 2026-07-06. Opacidad baja y pointer-events:none
   para no interferir jamás con la legibilidad del texto. */
.m-comm-in::after{
  content:"";
  position:absolute; right:-70px; top:-70px;
  width:340px; height:340px;
  background:url('/wp-content/uploads/ddm-fusion/brand/logo-circular.webp') center/contain no-repeat;
  opacity:.07;
  animation:ddm-spin 80s linear infinite;
  pointer-events:none;
  z-index:0;
}
.m-comm-l{position:relative;z-index:1;}
@keyframes ddm-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.m-comm-h{color:#fff;font-size:46px;margin:10px 0 0;}
.m-comm-p{color:rgba(255,255,255,.82);font-size:16.5px;line-height:1.6;margin:18px 0 26px;max-width:380px;}
.m-agenda{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;}
.m-ev{display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px 20px;transition:background .15s,transform .15s;backdrop-filter:blur(6px);}
.m-ev:hover{background:rgba(255,255,255,.16);transform:translateX(4px);}
.m-ev-d{font-family:'Baloo 2';font-weight:800;font-size:17px;color:var(--gold);width:38px;flex:0 0 auto;}
.m-ev-b{display:flex;flex-direction:column;min-width:0;}
.m-ev-t{color:#fff;font-weight:800;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-ev-s{color:rgba(255,255,255,.7);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-ev-arr{margin-left:auto;color:rgba(255,255,255,.55);}

/* about (06 · sobre nosotros) — integrado desde el snippet 21 */
.m-about{display:grid;grid-template-columns:1.45fr .55fr;gap:44px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:44px 48px;box-shadow:var(--shS);position:relative;overflow:hidden;}
.m-about::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold);opacity:.7;}
/* Ornamento de marca girando (ver .m-comm-in::after) — esquina inferior izquierda */
.m-about::after{
  content:"";
  position:absolute; left:-90px; bottom:-90px;
  width:300px; height:300px;
  background:url('/wp-content/uploads/ddm-fusion/brand/logo-circular.webp') center/contain no-repeat;
  opacity:.06;
  animation:ddm-spin 90s linear infinite;
  pointer-events:none;
  z-index:0;
}
.m-about-body,.m-about-emblem{position:relative;z-index:1;}
.m-about-p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:14px;}
.m-about-p strong{color:var(--gold);font-weight:800;}
.m-about-body .m-btn{margin-top:12px;}
.m-about-emblem{display:grid;place-items:center;color:var(--gold);opacity:.9;}
.m-about-emblem svg{width:150px;height:150px;filter:drop-shadow(0 10px 26px rgba(240,185,74,.18));}

/* footer */
.m-footer{background:var(--paper);border-top:1px solid var(--line);padding:52px 56px 28px;}
.m-foot-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:36px;border-bottom:1px solid var(--line);}
.m-foot-tag{font-family:'Baloo 2';font-weight:700;font-size:24px;text-align:right;line-height:1.12;color:var(--gold);}
.m-foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding:36px 0;}
.m-foot-h{font-family:'Baloo 2';font-weight:700;font-size:15px;margin-bottom:14px;}
.m-foot-l{display:block;color:var(--muted);font-size:14px;padding:5px 0;transition:color .15s;}
.m-foot-l:hover{color:var(--gold);}
.m-foot-soc{display:flex;gap:8px;margin-top:14px;}
.m-foot-soc a{width:34px;height:34px;border-radius:10px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:12.5px;color:var(--muted);transition:all .15s;}
.m-foot-soc a:hover{color:var(--gold);border-color:var(--gold);}
.m-foot-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:22px;color:var(--muted);font-size:13px;}
.m-foot-rate{display:flex;align-items:center;gap:7px;}
.m-stars{display:inline-flex;color:var(--gold);}

/* ============================================================================
   ADAPTATIONS (added — not in the prototype)
   ========================================================================== */

/* (reglas del icono de theme-toggle eliminadas 2026-07-06 — home solo oscuro) */

/* hero real image (renders when wp-content/uploads/ddm-fusion/hero.webp exists) */
.m-hero-ph img{width:100%;height:100%;object-fit:cover;border-radius:16px;}

/* category card with reference image (uploads/ddm-fusion/cats/{key}.webp):
   image flush against left/top/bottom edges, full card height, inherits the
   card's left radius (17px = 18px outer − 1px border). Replaces the glyph
   square and the 5px ::before color bar; hover still uses --cc. */
.m-cat--img{padding:0 20px 0 0;}
.m-cat--img::before{display:none;}
.m-cat-im{width:104px;align-self:stretch;flex:0 0 auto;overflow:hidden;border-radius:17px 0 0 17px;}
.m-cat-im img{width:100%;height:100%;object-fit:cover;}
.m-cat--img .m-cat-b{padding:20px 0;}

/* pause tickers/marquees/brand spinners for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .m-ticker-track,.m-marquee-track{animation:none;}
  .m-comm-in::after,.m-about::after{animation:none;}
}

/* responsive (minimal, per HANDOFF guidelines) */
@media (max-width:1100px){
  .m-hero{grid-template-columns:1fr;gap:28px;padding:44px 28px 32px;}
  .m-bignum{font-size:110px;top:-40px;}
  .m-h1{font-size:56px;}
  .m-section{padding:44px 28px;}
  .m-comm{padding:8px 28px;}
  .m-cats{grid-template-columns:repeat(2,1fr);}
  .m-spot{grid-template-columns:1fr;}
  .m-grid{grid-template-columns:repeat(2,1fr);}
  .m-grid--4{grid-template-columns:repeat(2,1fr);}
  .m-comm-in{grid-template-columns:1fr;gap:28px;padding:36px;}
  .m-about{grid-template-columns:1fr;gap:26px;padding:34px;text-align:center;}
  .m-about::before{display:none;}
  .m-about-emblem{order:-1;}
  .m-foot-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:960px){
  .m-nav{display:none;}
  .m-header{gap:20px;padding:14px 28px;}
  .m-ib{width:44px;height:44px;}
}
@media (max-width:700px){
  .m-hero{padding:36px 20px 28px;}
  .m-h1{font-size:44px;}
  .m-section{padding:40px 20px;}
  .m-comm{padding:8px 20px;}
  .m-comm-in{padding:28px;}
  .m-h2{font-size:32px;}
  .m-comm-h{font-size:36px;}
  .m-cats{grid-template-columns:1fr;}
  .m-grid{grid-template-columns:repeat(2,1fr);}
  .m-grid--4{grid-template-columns:repeat(2,1fr);}
  .m-spot-feat{grid-template-columns:1fr;}
  .m-footer{padding:40px 20px 24px;}
  .m-foot-top{flex-direction:column;align-items:flex-start;gap:18px;}
  .m-foot-tag{text-align:left;}
  .m-foot-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .m-foot-bottom{flex-direction:column;gap:10px;align-items:flex-start;}
  .m-shead{flex-wrap:wrap;}
  .m-see{margin-left:0;}
  .m-about{padding:26px 22px;}
  .m-about-emblem svg{width:110px;height:110px;}
}

/* ============================================================================
   BUTTON-FIX LAYER (Deliverable B) — add-to-cart en la portada
   Problema: el CSS global de Astra/WooCommerce (cargado vía wp_head) apunta a
   .add_to_cart_button y .woocommerce a.button e inyecta fondo dorado, su propio
   padding, font-size, line-height y box-shadow. Sobre la portada eso aplastaba
   el botón "+" de 38×38 hasta dejar un cuadro dorado vacío (el SVG del carrito
   seguía en el markup pero invisible) y peleaba con los CTA grandes.
   Enfoque elegido: capa de alta especificidad scopeada bajo .ddm-fusion
   (a.m-add.add_to_cart_button = 0,3,1) con !important SOLO en las propiedades
   que el tema fuerza. Se prefirió esto a un wrapper #id porque no requiere tocar
   el markup y mantiene el arreglo local y legible (ver docs/design/DDMUI26.md).
   ========================================================================== */

/* botón-icono "+" de las product cards */
.ddm-fusion a.m-add,
.ddm-fusion a.m-add.add_to_cart_button,
.ddm-fusion a.m-add.add_to_cart_button.ajax_add_to_cart{
  width:38px !important; height:38px !important;
  min-width:0 !important; min-height:0 !important; max-width:none !important;
  padding:0 !important; margin:0 !important;
  border:none !important; border-radius:11px !important;
  background:var(--violet2) !important; color:#fff !important;
  box-shadow:none !important;
  font-size:0 !important; line-height:0 !important; letter-spacing:normal !important;
  font-weight:400 !important; text-transform:none !important; text-decoration:none !important;
  display:grid !important; place-items:center !important; float:none !important;
}
.ddm-fusion a.m-add:hover{ background:var(--violet2) !important; transform:scale(1.08); }
.ddm-fusion a.m-add.on{ background:#37a85f !important; color:#fff !important; font-size:16px !important; line-height:1 !important; font-weight:800 !important; }
.ddm-fusion a.m-add svg{ display:block !important; width:18px !important; height:18px !important; stroke:currentColor; fill:none; }

/* "Ver carrito" (.added_to_cart) que WooCommerce inyecta tras el add AJAX:
   evitamos que reviente la fila de la card — link dorado pequeño. */
.ddm-fusion .m-crow .added_to_cart,
.ddm-fusion .added_to_cart{
  display:inline-flex !important; align-items:center;
  background:none !important; border:none !important; box-shadow:none !important;
  padding:0 0 0 9px !important; margin:0 !important;
  min-width:0 !important; min-height:0 !important; width:auto !important; height:auto !important;
  border-radius:0 !important;
  color:var(--gold) !important; font-family:'Mulish',system-ui,sans-serif !important;
  font-size:12.5px !important; font-weight:800 !important; line-height:1.1 !important;
  letter-spacing:normal !important; text-transform:none !important; white-space:nowrap;
}
.ddm-fusion .added_to_cart:hover{ text-decoration:underline !important; color:var(--gold) !important; }

/* CTA grandes (.m-btn) — en el spotlight "Agregar al carrito →" también lleva
   .add_to_cart_button; protegerlos contra .woocommerce a.button. */
.ddm-fusion a.m-btn,
.ddm-fusion a.m-btn.add_to_cart_button,
.ddm-fusion a.m-btn.add_to_cart_button.ajax_add_to_cart{
  width:auto !important; height:auto !important; min-width:0 !important;
  padding:14px 26px !important; margin:0 !important;
  border-radius:13px !important;
  font-family:'Baloo 2',system-ui,sans-serif !important;
  font-size:15px !important; font-weight:800 !important; line-height:1 !important;
  letter-spacing:normal !important; text-transform:none !important; text-decoration:none !important;
  display:inline-flex !important; align-items:center; gap:9px; float:none !important;
}
.ddm-fusion a.m-btn.m-btn--dark,
.ddm-fusion a.m-btn.m-btn--dark.add_to_cart_button{
  background:var(--gold) !important; color:#241500 !important; border:none !important;
  box-shadow:0 10px 24px rgba(240,185,74,.28) !important;
}
.ddm-fusion a.m-btn.m-btn--dark:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(240,185,74,.4) !important; }
.ddm-fusion a.m-btn svg{ display:inline-block !important; width:16px !important; height:16px !important; }

/* ============================================================================
   TRUST BADGES (snippet 19 · #ddm-trust-badges) — sigue activo (sirve también al
   checkout) e inyectado por wp_footer. Se reestiliza al lenguaje ddmui26 para que
   lea como franja de confianza final. Mayor especificidad (body #id …) porque el
   <style> del snippet se inserta más abajo en el documento y ganaría por orden.
   Valores literales (no var()): #ddm-trust-badges puede quedar fuera de .ddm-fusion.
   ========================================================================== */
body #ddm-trust-badges{ background:#171025; border-top:1px solid rgba(255,255,255,.09); padding:34px 20px; }
body #ddm-trust-badges .ddm-tb-title{ color:#a99cc8; font-family:'Mulish',system-ui,sans-serif; font-weight:800; letter-spacing:.14em; }
body #ddm-trust-badges .ddm-tb-icon{ background:rgba(240,185,74,.10); border:1px solid rgba(240,185,74,.28); }
body #ddm-trust-badges .ddm-tb-label{ color:#f3eefc; font-family:'Baloo 2',system-ui,sans-serif; font-weight:700; }
body #ddm-trust-badges .ddm-tb-sub{ color:#a99cc8; font-family:'Mulish',system-ui,sans-serif; }

/* Mascota oficial en Sobre nosotros (docs/design/brand/playerafrente.png) */
.m-about-mascota{max-width:230px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.35));}

/* ============================================================================
   BOXED LAYOUT · GUTTERS (owner directive 2026-07-06)
   .ddm-fusion queda encajonado a 1440px centrado; el espacio FUERA de la caja
   (html/body) se pinta del mismo fondo de página para que los laterales nunca
   se vean blancos.
   Robustez en dos capas:
   1. Clases de body_class() de la plantilla — page-template-ddmui26 (clave
      actual) y page-template-ddm-fusion-home (clave heredada) — funcionan en
      cualquier navegador. Pintan el set OSCURO (default del tema).
   2. :has() (baseline en todos los navegadores actuales) sigue el toggle de
      tema en vivo: si .ddm-fusion está en data-theme=light, los gutters pasan
      al fondo claro. En un navegador sin :has() el fallback es quedarse
      oscuro también en tema claro (aceptable, nunca blanco roto).
   ========================================================================== */
body.page-template-ddmui26,
body.page-template-ddmui26-php,
body.page-template-ddm-fusion-home,
body.page-template-ddm-fusion-home-php{ background:#120d1c; }
html:has(.ddm-fusion), body:has(.ddm-fusion){ background:#120d1c; }
html:has(.ddm-fusion[data-theme="light"]), body:has(.ddm-fusion[data-theme="light"]){ background:#f6f1ff; }

/* ============================================================================
   ETIQUETA DE PREVENTA (v0.7.0) — sobre la tarjeta en la sección Preventas.
   ========================================================================== */
.ddm-fusion .m-card{position:relative;}
.ddm-fusion .m-pre-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;
  background:var(--violet2);color:#fff;
  font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;
  font-size:11.5px;letter-spacing:.02em;line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}