/* global.css — sistema de diseño de Fureone en WordPress (traducido de la maqueta aprobada 2026-09-22).
   Los colores de :root son RESPALDO: los valores reales los escribe el Customizer (inc/customizer.php) en <head>. */
/* ------------------------------------------------------------------
   Fureone — maqueta de portada (2026-09-21 · v2 2026-09-22)
   v2 (pedido de Gabriel 2026-09-22): BLANCO por defecto + botón para
   pasar a modo oscuro (negro + plateado), y menú "Categorías" desplegable
   con las 10 familias de la taxonomía (02-CATALOGO/investigacion/02 §4).
   Estructura: referencias 02 y 03. Momentos wow: La Vitrina y El Duelo.
   Todo el color sale de estas variables (regla Hanlid: cero hardcoding).
   ------------------------------------------------------------------ */
:root{
  color-scheme:light;
  --fu-bg:#ffffff; --fu-bg-2:#f6f6f7; --fu-surface:#fafafa; --fu-surface-2:#f0f0f2;
  --fu-line:rgba(10,10,12,.08); --fu-line-2:rgba(10,10,12,.16);
  --fu-text:#0a0a0b; --fu-muted:#52525b; --fu-faint:#6b6b74;
  --fu-silver-1:#0a0a0b; --fu-silver-2:#3f3f46; --fu-silver-3:#9a9aa3;
  --fu-cta-bg:#0a0a0b; --fu-cta-text:#ffffff;
  --fu-header-bg:rgba(255,255,255,.88); --fu-scrim:rgba(10,10,12,.28); --fu-shadow:rgba(10,10,12,.10);
  --fu-photo-bg:radial-gradient(120% 90% at 50% 18%, #ffffff 0%, #f1f1f3 48%, #e4e4e8 100%);
  --fu-glow:rgba(10,10,12,.10); --fu-tint:rgba(10,10,12,.035); --fu-lines:rgba(10,10,12,.035);
  --fu-draft-bg:#0a0a0b; --fu-draft-text:#ffffff;
  --fu-radius:18px; --fu-radius-sm:12px;
  --fu-maxw:1240px; --fu-gutter:clamp(16px,4vw,40px);
  --fu-f-brand:"Michroma",system-ui,sans-serif;
  --fu-f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* modo oscuro: el look original negro + plateado (se activa con el botón de la luna) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --fu-bg:#050505; --fu-bg-2:#0b0b0c; --fu-surface:#111113; --fu-surface-2:#17171a;
  --fu-line:rgba(255,255,255,.09); --fu-line-2:rgba(255,255,255,.16);
  --fu-text:#f4f4f5; --fu-muted:#a1a1aa; --fu-faint:#8a8a93;
  --fu-silver-1:#ffffff; --fu-silver-2:#bfc1c6; --fu-silver-3:#6e7077;
  --fu-cta-bg:#ffffff; --fu-cta-text:#050505;
  --fu-header-bg:rgba(5,5,5,.86); --fu-scrim:rgba(0,0,0,.55); --fu-shadow:rgba(0,0,0,.5);
  --fu-photo-bg:radial-gradient(120% 90% at 50% 18%, #2a2b2f 0%, #121214 45%, #08080a 100%);
  --fu-glow:rgba(255,255,255,.14); --fu-tint:rgba(255,255,255,.07); --fu-lines:rgba(255,255,255,.035);
  --fu-draft-bg:#ffffff; --fu-draft-text:#050505;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fu-bg);color:var(--fu-text);font-family:var(--fu-f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:var(--fu-maxw);margin:0 auto;padding:0 var(--fu-gutter)}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* aviso de maqueta */
.draft{background:var(--fu-draft-bg);color:var(--fu-draft-text);font-size:12.5px;text-align:center;padding:7px 12px;font-weight:500}

/* barra superior */
.topbar{border-bottom:1px solid var(--fu-line);font-size:12.5px;color:var(--fu-muted)}
.topbar .wrap{display:flex;gap:24px;justify-content:center;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar span{display:inline-flex;align-items:center;gap:7px}
.topbar .ico{width:15px;height:15px}

/* cabecera */
header.site{position:sticky;top:0;z-index:20;background:var(--fu-header-bg);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--fu-line)}
header.site .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{font-family:var(--fu-f-brand);font-size:17px;letter-spacing:.42em;color:var(--fu-silver-1);white-space:nowrap}
nav.main{display:flex;gap:18px;font-size:14px;color:var(--fu-muted);flex:1;min-width:0}
/* Un enlace del menú NUNCA se parte en dos líneas: «Lo nuevo» se leía «Lo / nuevo» (2026-09-23) */
nav.main a{white-space:nowrap}
nav.main a:hover{color:var(--fu-text)}
.actions{display:flex;align-items:center;gap:6px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--fu-text)}
.icon-btn:hover{background:var(--fu-surface-2)}
.fu-search{min-width:0;display:flex;align-items:center;gap:8px;background:var(--fu-surface);border:1px solid var(--fu-line);border-radius:999px;padding:8px 14px;color:var(--fu-faint);font-size:13.5px;min-width:220px}
.fu-search .ico{width:17px;height:17px}
button.icon-btn{border:0;background:transparent;cursor:pointer;font:inherit}

/* botón de tema: la luna lleva a oscuro, el sol vuelve a claro */
.t-sun{display:none}
:root[data-theme="dark"] .t-sun{display:block}
:root[data-theme="dark"] .t-moon{display:none}

/* MENÚ DE CATEGORÍAS — desplegable (escritorio) */
nav.main{align-items:center}
.mm-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--fu-line-2);background:transparent;color:var(--fu-text);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease}
.mm-btn:hover,.mm-btn[aria-expanded="true"]{background:var(--fu-surface-2)}
.mm-btn .ico{width:17px;height:17px}
.chev{width:14px;height:14px;transition:transform .2s ease}
.mm-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--fu-bg);border-bottom:1px solid var(--fu-line);box-shadow:0 24px 48px var(--fu-shadow)}
.mega[hidden]{display:none}
header.site .mega .wrap{display:grid;grid-template-columns:330px 1fr;gap:28px;height:auto;align-items:start;padding-top:20px;padding-bottom:26px}
.fams{list-style:none;border-right:1px solid var(--fu-line);padding-right:14px}
.fam{width:100%;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;border:0;background:transparent;color:var(--fu-muted);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.fam .ico{width:20px;height:20px;color:var(--fu-faint)}
.fam .chev{margin-left:auto;transform:rotate(-90deg);opacity:0}
.fam:hover,.fam[aria-selected="true"]{background:var(--fu-surface-2);color:var(--fu-text)}
.fam[aria-selected="true"] .ico{color:var(--fu-text)}
.fam[aria-selected="true"] .chev{opacity:1}
.pane-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.pane-head h3{font-size:20px;letter-spacing:-.01em}
.pane-head a{font-size:14px;color:var(--fu-muted);white-space:nowrap}
.pane-head a:hover{color:var(--fu-text)}
.subs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sub{display:block;padding:14px 16px;border:1px solid var(--fu-line);border-radius:var(--fu-radius-sm);background:var(--fu-surface);transition:border-color .2s ease,background .2s ease}
.sub:hover{border-color:var(--fu-line-2);background:var(--fu-surface-2)}
.sub b{display:block;font-size:14.5px;font-weight:600}
.sub small{display:block;color:var(--fu-faint);font-size:12.5px;margin-top:3px}
.scrim{position:fixed;inset:0;z-index:15;background:var(--fu-scrim)}
.scrim.hi{z-index:35}
.scrim[hidden]{display:none}

/* MENÚ LATERAL (celular y tablet) */
.menu-btn{display:none!important}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(88vw,380px);z-index:40;background:var(--fu-bg);border-right:1px solid var(--fu-line);transform:translateX(-102%);transition:transform .25s ease;overflow-y:auto;padding:14px 16px 28px;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.drawer .fu-search{min-width:0;margin-bottom:8px}
.acc{border-bottom:1px solid var(--fu-line)}
.acc>button{width:100%;display:flex;align-items:center;gap:12px;padding:14px 4px;background:none;border:0;color:var(--fu-text);font:inherit;font-size:15px;cursor:pointer;text-align:left}
.acc>button .ico{width:20px;height:20px;color:var(--fu-faint)}
.acc>button .chev{margin-left:auto}
.acc>button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc ul{list-style:none;padding:0 4px 12px 36px}
.acc ul[hidden]{display:none}
.acc li a{display:block;padding:7px 0;color:var(--fu-text);font-size:14px}
.acc li small{display:block;color:var(--fu-faint);font-size:12px}
.drawer-links{display:grid;gap:4px;margin-top:14px}
.drawer-links a,.drawer-links button{display:flex;align-items:center;gap:10px;padding:10px 4px;color:var(--fu-muted);font:inherit;font-size:14.5px;background:none;border:0;cursor:pointer;text-align:left}

/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .2s ease,background .2s ease}
.btn-primary{background:var(--fu-cta-bg);color:var(--fu-cta-text)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--fu-line-2);color:var(--fu-text)}
.btn-ghost:hover{background:var(--fu-surface-2)}
.btn .ico{width:18px;height:18px}

/* marco de foto: aquí va la FOTO REAL propia de cada producto */
.photo{position:relative;border-radius:var(--fu-radius);overflow:hidden;background:var(--fu-photo-bg);border:1px solid var(--fu-line)}
.photo::after{content:attr(data-label);position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fu-faint);white-space:nowrap}
.photo .glow{position:absolute;inset:auto 18% 16% 18%;height:22%;border-radius:50%;background:radial-gradient(closest-side,var(--fu-glow),transparent);filter:blur(6px)}

/* HERO */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--fu-line)}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;background:
  radial-gradient(60% 50% at 18% 70%, var(--fu-tint), transparent 70%),
  radial-gradient(55% 45% at 85% 30%, var(--fu-tint), transparent 70%),
  repeating-radial-gradient(ellipse at 50% 120%, var(--fu-lines) 0 1px, transparent 1px 9px);
  pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(56px,8vw,110px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fu-muted);border:1px solid var(--fu-line-2);border-radius:999px;padding:6px 12px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--fu-silver-1)}
.hero h1{font-size:clamp(38px,5.6vw,72px);line-height:1.02;letter-spacing:-.025em;font-weight:700;margin:22px 0 18px;
  /* El degradado termina en silver-2, NO en silver-3: con tres líneas de título, la última caía
     en el gris claro y quedaba casi ilegible (visto el 2026-09-23). Conserva el brillo metálico
     pero ninguna línea se desvanece. */
  background:linear-gradient(180deg,var(--fu-silver-1) 45%,var(--fu-silver-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(16px,1.5vw,19px);color:var(--fu-muted);max-width:30em}
.hero .cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero .photo{aspect-ratio:4/5;max-height:560px;width:100%}
.hero .meta{display:flex;gap:28px;margin-top:40px;color:var(--fu-muted);font-size:13.5px;flex-wrap:wrap}
.hero .meta b{display:block;color:var(--fu-text);font-size:15px;font-weight:600}

/* franja de marcas (versión fija, solo texto) */
.brands{border-bottom:1px solid var(--fu-line)}
.brands .wrap{display:flex;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:26px;overflow-x:auto;scrollbar-width:none}
.brands span{font-size:15px;letter-spacing:.08em;color:var(--fu-faint);white-space:nowrap;font-weight:600}
.brands span:hover{color:var(--fu-text)}

/* cinta de marcas en movimiento (widget fu-marcas): la lista va DOS veces seguidas y se desplaza
   la mitad del ancho, así el final empalma con el inicio sin salto. Velocidad = --fu-cinta-dur. */
.brands.cinta{overflow:hidden;padding:30px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brands.cinta .pista{display:flex;width:max-content;animation:fu-cinta var(--fu-cinta-dur,60s) linear infinite}
.brands.cinta.al-reves .pista{animation-direction:reverse}
.brands.cinta.pausa:hover .pista{animation-play-state:paused}
.brands.cinta .grupo{display:flex;align-items:center;gap:var(--fu-cinta-gap,56px);padding-right:var(--fu-cinta-gap,56px)}
.brands.cinta a{display:flex;align-items:center;height:32px;flex:none}
.brands.cinta .fu-logo{height:26px;max-width:140px;opacity:.55;transition:opacity .25s}
.brands.cinta .fu-logo:not(.con-fondo):not(.sin-logo){filter:brightness(0)}   /* una sola tinta: negro en claro… */
:root[data-theme="dark"] .brands.cinta .fu-logo:not(.con-fondo):not(.sin-logo){filter:brightness(0) invert(1)}   /* …blanco en oscuro */
.brands.cinta .fu-logo.con-fondo{opacity:.8;border-radius:3px}
.brands.cinta .fu-logo.sin-logo{height:auto;font-size:15px;letter-spacing:.08em;font-weight:600;color:var(--fu-faint);opacity:1;white-space:nowrap}
.brands.cinta a:hover .fu-logo{opacity:1}
.brands.cinta a:hover .fu-logo.sin-logo{color:var(--fu-text)}
@keyframes fu-cinta{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:760px){.brands.cinta{padding:22px 0}.brands.cinta .fu-logo{height:20px;max-width:110px}.brands.cinta .grupo{gap:36px;padding-right:36px}}
@media (prefers-reduced-motion:reduce){.brands.cinta .pista{animation-duration:calc(var(--fu-cinta-dur,60s) * 3)}}

/* secciones */
section.block{padding:clamp(56px,8vw,96px) 0}
.head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}
.head h2{font-size:clamp(26px,3.2vw,40px);letter-spacing:-.02em;line-height:1.1}
.head p{color:var(--fu-muted);max-width:36em;margin-top:10px}
.head a{color:var(--fu-muted);font-size:14px;white-space:nowrap}
.head a:hover{color:var(--fu-text)}

/* categorías */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cat{background:var(--fu-surface);border:1px solid var(--fu-line);border-radius:var(--fu-radius-sm);padding:20px 18px;display:flex;flex-direction:column;gap:18px;min-height:128px;transition:border-color .2s ease,background .2s ease}
.cat:hover{border-color:var(--fu-line-2);background:var(--fu-surface-2)}
.cat .ico{width:26px;height:26px;color:var(--fu-silver-2)}
.cat b{font-weight:600;font-size:15px}
.cat small{display:block;color:var(--fu-faint);font-size:12.5px;margin-top:2px}

/* LA VITRINA — momento wow nº 1 (solo CSS; se apaga con reduced-motion) */
.vitrina{background:linear-gradient(180deg,var(--fu-bg) 0%,var(--fu-bg-2) 100%);border-top:1px solid var(--fu-line);border-bottom:1px solid var(--fu-line)}
.shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:end;perspective:1200px}
.shelf .item{text-align:center}
.shelf .photo{aspect-ratio:3/4}
.shelf .item:nth-child(3) .photo{aspect-ratio:3/4.4}
.shelf h3{font-size:15px;font-weight:600;margin-top:14px}
.shelf small{color:var(--fu-faint);font-size:12.5px}
.ledge{height:2px;margin-top:20px;background:linear-gradient(90deg,transparent,var(--fu-line-2) 20%,var(--fu-silver-2) 50%,var(--fu-line-2) 80%,transparent)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .shelf .item{animation:settle linear both;animation-timeline:view();animation-range:entry 10% cover 38%}
    .shelf .item:nth-child(1),.shelf .item:nth-child(5){--dy:70px}
    .shelf .item:nth-child(2),.shelf .item:nth-child(4){--dy:40px}
    .shelf .item:nth-child(3){--dy:16px}
  }
}
@keyframes settle{from{opacity:0;transform:translateY(var(--dy,40px)) rotateX(8deg)}to{opacity:1;transform:none}}

/* productos */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--fu-surface);border:1px solid var(--fu-line);border-radius:var(--fu-radius);padding:12px;display:flex;flex-direction:column;transition:border-color .2s ease}
.card:hover{border-color:var(--fu-line-2)}
.card .photo{aspect-ratio:1/1;border-radius:12px}
.card .brand{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fu-faint);margin:14px 4px 2px}
.card h3{font-size:16px;font-weight:600;margin:0 4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* máx. 2 renglones (auditoría 02 #9) */
.tag{align-self:flex-start;font-size:11.5px;border:1px solid var(--fu-line-2);border-radius:999px;padding:3px 9px;color:var(--fu-muted);margin:10px 4px 0}
.tag.warn{border-color:var(--fu-silver-3);color:var(--fu-text)}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto 4px 4px;padding-top:16px;flex-wrap:wrap}   /* si no cabe, el precio queda arriba y el botón abajo, sin partir el precio (auditoría 02 #7) */
.card .foot .ref{flex-basis:100%}   /* el precio siempre en su renglón y el botón debajo: todas las tarjetas iguales */
.card .foot .quote{margin-left:auto}
.card .ref{font-size:12.5px;color:var(--fu-faint);line-height:1.3}
.card .ref b{display:block;color:var(--fu-text);font-size:15px;white-space:nowrap}
/* sin precio verificado: se dice «Precio por WhatsApp» con el mismo peso que un precio real */
.card .ref.sin-ref{color:var(--fu-text);font-size:15px;font-weight:600;align-self:center;white-space:nowrap}
.quote{height:38px;padding:0 14px;border-radius:999px;background:var(--fu-cta-bg);color:var(--fu-cta-text);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.quote .ico{width:15px;height:15px}

/* EL DUELO — momento wow nº 3 */
.duelo{background:var(--fu-bg-2);border-top:1px solid var(--fu-line);border-bottom:1px solid var(--fu-line)}
.duel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.duel[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}   /* con dos equipos no queda una columna vacía */
.rival{background:var(--fu-surface);border:1px solid var(--fu-line);border-radius:var(--fu-radius);padding:16px}
.rival .photo{aspect-ratio:4/3;border-radius:12px}
.rival .brand{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fu-faint);margin-top:14px}
.rival h3{font-size:17px;font-weight:600}
.metric{margin-top:16px}
.metric .row{display:flex;justify-content:space-between;font-size:13px;color:var(--fu-muted);margin-bottom:7px}
.metric .row b{color:var(--fu-text);font-weight:600}
.bar{height:6px;border-radius:999px;background:var(--fu-surface-2);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--fu-silver-3),var(--fu-silver-1));transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.duel.on .bar i{width:var(--w)}
.verdict{margin-top:22px;border:1px dashed var(--fu-line-2);border-radius:var(--fu-radius);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.verdict p{color:var(--fu-muted);max-width:52em}
.verdict b{color:var(--fu-text)}
.note{font-size:12px;color:var(--fu-faint);margin-top:14px}

/* ecosistemas por marca */
.eco{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.eco a{background:var(--fu-surface);border:1px solid var(--fu-line);border-radius:var(--fu-radius);padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .2s ease}
.eco a:hover{border-color:var(--fu-line-2)}
.eco h3{font-size:24px;letter-spacing:-.01em}
.eco p{color:var(--fu-muted);font-size:14px;margin-top:6px}
.eco span{font-size:14px;display:inline-flex;align-items:center;gap:8px}

/* confianza */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust div{border:1px solid var(--fu-line);border-radius:var(--fu-radius-sm);padding:20px}
.trust .ico{width:24px;height:24px;color:var(--fu-silver-2);margin-bottom:14px}
.trust b{display:block;font-weight:600}
.trust small{color:var(--fu-muted);font-size:13.5px}

/* pie */
footer{border-top:1px solid var(--fu-line);padding:56px 0 32px;color:var(--fu-muted);font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
footer h4{color:var(--fu-text);font-size:14px;margin-bottom:12px;font-weight:600}
footer li{list-style:none;margin:7px 0}
footer .legal{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:22px;border-top:1px solid var(--fu-line);font-size:12.5px;color:var(--fu-faint);flex-wrap:wrap}

/* WhatsApp flotante */
.wa{position:fixed;right:18px;bottom:18px;z-index:30;height:52px;padding:0 20px;border-radius:999px;background:var(--fu-cta-bg);color:var(--fu-cta-text);display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;box-shadow:0 10px 30px var(--fu-shadow)}
/* solo el círculo, también en escritorio: la píldora «Escríbenos» tapaba el «Cotizar» de la última columna (auditoría 02 #13 / 03 #11) */
.wa{width:52px;padding:0;justify-content:center}
.wa span{display:none}

/* responsive */
@media (max-width:1060px){
  nav.main,header.site .fu-search{display:none}
  .menu-btn{display:grid!important}
  .mega{display:none!important}
  .cats{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  header.site .wrap{height:60px;gap:12px}
  .logo{font-size:14px;letter-spacing:.34em;flex:1}
  .hero .wrap{grid-template-columns:1fr;gap:32px}
  .hero .photo{aspect-ratio:1/1}
  .cats{grid-template-columns:repeat(2,1fr)}
  .shelf{grid-template-columns:repeat(5,64%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .shelf .item{scroll-snap-align:center}
  .duel{grid-template-columns:1fr}
  .eco{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .head{flex-direction:column;align-items:start}
  .topbar span:nth-child(n+2){display:none}
  .wa span{display:none}
  .wa{width:52px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}.duel .bar i{width:var(--w)}}

/* ---- componentes compartidos v2 (2026-09-22) ---- */
[data-quote-link]{position:relative}
.qcount{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--fu-cta-bg);color:var(--fu-cta-text);font-size:10.5px;font-weight:700;display:grid;place-items:center;line-height:1}
.qcount[hidden]{display:none}
.card{position:relative}
/* Una tarjeta con el atributo [hidden] DEBE desaparecer. Sin esta regla, «.card{display:flex}»
   le gana a la regla del navegador y el filtro de marca y precio no ocultaba nada (2026-09-23). */
.card[hidden],.cs-item[hidden],.grid[hidden],[hidden]{display:none!important}   /* !important: ninguna hoja de página (.empty{display:flex}) le gana (auditoría 02 #2) */
.card-link{position:absolute;inset:0;z-index:1;border-radius:var(--fu-radius)}
.card .quote{position:relative;z-index:2;border:0;cursor:pointer;font-family:inherit}
.quote.added{background:var(--fu-surface-2);color:var(--fu-text);border:1px solid var(--fu-line-2)}
nav.main a[aria-current="page"]{color:var(--fu-text);font-weight:600}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--fu-faint);padding-top:22px}
.crumbs a:hover{color:var(--fu-text)}
.crumbs span[aria-current]{color:var(--fu-text)}
/* tarjetas: pueden encogerse dentro de grillas angostas (antes desbordaban ~16-50px a 390px; hallazgo del diseñador de producto 2026-09-22) */
.grid>*,.card{min-width:0}
@media (max-width:760px){.card .foot{flex-wrap:wrap}.card .quote{width:100%;justify-content:center}}
html{overflow-x:clip}   /* clip y no hidden: con hidden en html Y body el body se volvía contenedor con scroll y el encabezado «sticky» no se quedaba fijo (hallado 2026-10-31) */

/* utilidad: fotos pequeñas sin etiqueta de maqueta (no cabe) */
.photo.sm::after{display:none}

/* ==================================================================
   MOVIMIENTO (2026-09-22, pedido de Gabriel) — reglas del benchmark 01 §5:
   solo transform/opacity/clip-path · lo primero que ves (LCP) nunca se anima ·
   "reducir movimiento" del sistema = todo quieto · nivel propio en <html>:
   .fu-motion-subtle (menos distancia) · .fu-motion-off (apagado)
   ================================================================== */
:root{--fu-dur-fast:.16s;--fu-dur-base:.34s;--fu-dur-slow:.7s;
  --fu-ease:cubic-bezier(.2,.7,.2,1);--fu-ease-in:cubic-bezier(.4,0,1,1);--fu-ease-spring:cubic-bezier(.34,1.56,.64,1);--fu-dist:14px}
.fu-motion-subtle{--fu-dist:6px;--fu-dur-slow:.45s}
.fu-motion-off *{animation:none!important;transition:none!important}
@keyframes fu-in{from{opacity:0;transform:translateY(var(--fu-dist))}}
@keyframes fu-fade{from{opacity:0}}
@keyframes fu-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* 1. transición entre páginas (View Transitions, 0 KB): el encabezado se queda, el resto se funde */
@view-transition{navigation:auto}
header.site{view-transition-name:fu-header}
::view-transition-old(root){animation:fu-fade var(--fu-dur-fast) var(--fu-ease-in) reverse both}
::view-transition-new(root){animation:fu-in var(--fu-dur-base) var(--fu-ease) both}
/* cambio de tema: círculo que se expande desde el botón (lo activa fureone.js) */
html.fu-theme-swap::view-transition-old(root){animation:none}
html.fu-theme-swap::view-transition-new(root){animation:fu-reveal .55s var(--fu-ease) both}
@keyframes fu-reveal{from{clip-path:circle(0 at var(--fu-x,90%) var(--fu-y,4%))}to{clip-path:circle(150% at var(--fu-x,90%) var(--fu-y,4%))}}

/* 2. menú de categorías, velo y menú lateral */
.mega:not([hidden]){animation:fu-in var(--fu-dur-base) var(--fu-ease) both;--fu-dist:-8px}
.scrim:not([hidden]){animation:fu-fade var(--fu-dur-base) var(--fu-ease) both}
#mega-pane .pane-head,#mega-pane .sub{animation:fu-in var(--fu-dur-base) var(--fu-ease) both;animation-delay:calc(var(--i,0) * 28ms)}
.acc ul:not([hidden]) li{animation:fu-in var(--fu-dur-base) var(--fu-ease) both;animation-delay:calc(var(--i,0) * 22ms)}
.fam{transition:background var(--fu-dur-fast) ease,color var(--fu-dur-fast) ease}
.fam .chev{transition:opacity var(--fu-dur-fast) ease,transform var(--fu-dur-base) var(--fu-ease)}

/* 3. tarjetas y botones: elevación al pasar el mouse, hundido al presionar */
@media (hover:hover){
  .card,.cat,.sub,.eco a,.vs,.rival{transition:transform var(--fu-dur-base) var(--fu-ease),border-color .2s ease,background .2s ease,box-shadow var(--fu-dur-base) var(--fu-ease)}
  .card:hover,.eco a:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px var(--fu-shadow)}
  .cat:hover,.sub:hover,.vs:hover{transform:translateY(-2px)}
  .card .photo .glow,.photo .glow{transition:transform var(--fu-dur-slow) var(--fu-ease),opacity var(--fu-dur-slow) ease}
  .card:hover .photo .glow{transform:scale(1.18);opacity:.8}
}
.btn,.quote,.mm-btn,.icon-btn,.chip{transition:transform var(--fu-dur-fast) var(--fu-ease),background .2s ease,color .2s ease}
.btn:active,.quote:active,.mm-btn:active,.icon-btn:active{transform:scale(.96)}
.btn-primary .ico,.head a .ico{transition:transform var(--fu-dur-base) var(--fu-ease)}
.btn-primary:hover .ico{transform:translateX(3px)}

/* 4. grillas: los productos entran escalonados la PRIMERA vez que se ven (lo activa fureone.js) */
.fu-stagger>*{opacity:0;transform:translateY(var(--fu-dist))}
.fu-stagger.fu-in>*{opacity:1;transform:none;transition:opacity var(--fu-dur-slow) var(--fu-ease),transform var(--fu-dur-slow) var(--fu-ease);transition-delay:calc(var(--i,0) * 55ms)}

/* 5. pestañas, contador de cotización y "vuelo" al carrito */
[role="tabpanel"]:not([hidden]){animation:fu-in var(--fu-dur-base) var(--fu-ease) both}
.qcount.pop{animation:fu-pop .5s var(--fu-ease-spring)}
.fu-fly{position:fixed;z-index:60;pointer-events:none;border-radius:14px;background:var(--fu-photo-bg);border:1px solid var(--fu-line-2);box-shadow:0 20px 50px -10px var(--fu-shadow)}
.quote.added,.btn.added{animation:fu-pop .45s var(--fu-ease-spring)}

/* frenos: "reducir movimiento" del sistema */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .fu-stagger>*{opacity:1!important;transform:none!important}
}


/* ==================================================================
   CELULAR (2026-09-22): buscador real, buscador grande y barra inferior
   ================================================================== */
.fu-search{position:relative}
.fu-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--fu-text);font:inherit;font-size:13.5px;outline:none}
.fu-search input::placeholder{color:var(--fu-faint)}
.fu-search input::-webkit-search-cancel-button{filter:grayscale(1)}
.fu-search:focus-within{border-color:var(--fu-line-2);box-shadow:0 0 0 3px var(--fu-surface-2)}
.fu-res{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:45;background:var(--fu-bg);border:1px solid var(--fu-line-2);border-radius:var(--fu-radius-sm);box-shadow:0 18px 40px -12px var(--fu-shadow);padding:6px;max-height:60vh;overflow:auto;animation:fu-in var(--fu-dur-base) var(--fu-ease) both}
.fu-res[hidden]{display:none}
.fu-res a{display:block;padding:10px 12px;border-radius:10px;color:var(--fu-text)}
.fu-res a:hover,.fu-res a:focus-visible{background:var(--fu-surface-2)}
.fu-res b{display:block;font-size:14px;font-weight:600}
.fu-res small{display:block;font-size:12px;color:var(--fu-faint);margin-top:1px}
.fu-nada{padding:12px;font-size:13.5px;color:var(--fu-muted)}
.fu-nada a{display:inline;padding:0;text-decoration:underline}
.msearch{display:none}
.bnav{display:none}
@media (max-width:760px){
  .msearch{display:block;position:sticky;top:60px;z-index:19;background:var(--fu-header-bg);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--fu-line);padding:10px 0}
  .msearch .fu-search{display:flex;min-width:0;padding:11px 16px;font-size:15px}
  .msearch .fu-search input{font-size:15px}
  header.site .actions [aria-label="Mi cuenta"]{display:none}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;height:64px;padding-bottom:env(safe-area-inset-bottom);background:var(--fu-header-bg);backdrop-filter:saturate(1.4) blur(16px);border-top:1px solid var(--fu-line)}
  .bnav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;color:var(--fu-faint);transition:color var(--fu-dur-fast) ease}
  .bnav a .ico{width:22px;height:22px}
  .bnav a[aria-current="page"]{color:var(--fu-text);font-weight:600}
  .bnav a:active{transform:scale(.94)}
  .bnav .qcount{top:6px;right:calc(50% - 22px)}
  body.con-bnav{padding-bottom:64px}
  body.con-bnav .wa,body[data-page="producto"] .wa{display:none}   /* la ficha ya tiene WhatsApp en su barra fija */
  body.con-bnav .sticky-buy{bottom:64px}
}

/* ---- WordPress: fotos reales (la maqueta solo tenía marcos vacíos) ---- */
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0;z-index:1}  /* el margen ya viene en la propia foto */
.photo.has-img::after,.photo.has-img::before{display:none}
.photo.has-img{background:#fff}   /* las fotos de producto viven sobre blanco… */
:root[data-theme="dark"] .photo.has-img{background:#e6e6e9}   /* …pero en oscuro un gris claro: el blanco puro encandilaba (auditoría 02 #5) */
.card .photo{border:0}   /* la tarjeta ya tiene borde: sin doble marco */
.thumb.has-img{position:relative;overflow:hidden}
.thumb.has-img img{width:100%;height:100%;object-fit:contain}
.pd-desc p{margin:0 0 1em}

/* ---- WordPress: nota de ecosistema en la página de una marca ---- */
.marca-eco{display:flex;gap:12px;align-items:flex-start;margin:0 0 6px;padding:16px 18px;border:1px solid var(--fu-line);
  border-radius:16px;background:var(--fu-surface);color:var(--fu-muted);font-size:14.5px;max-width:78ch}
.marca-eco .ico{flex:none;width:20px;height:20px;margin-top:2px;color:var(--fu-text)}

/* ---- fondo 3D opcional del bloque principal (widget fu-hero) ---- */
.hero[data-fu-planeta]{position:relative;isolation:isolate}
.hero .fu-planeta-lienzo{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity .9s ease}
.hero.fu-planeta-on .fu-planeta-lienzo{opacity:1}
.hero[data-fu-planeta]>.wrap{position:relative;z-index:2}
.hero[data-fu-planeta]::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--fu-bg) 0%,color-mix(in srgb,var(--fu-bg) 82%,transparent) 34%,transparent 72%)}
@media (max-width:900px){ .hero[data-fu-planeta]::after{background:linear-gradient(180deg,color-mix(in srgb,var(--fu-bg) 45%,transparent) 0%,var(--fu-bg) 55%)} }

/* ---- visor de producto en 3D (widget fu-modelo3d) ---- */
.fu-modelo3d model-viewer{display:block;border:1px solid var(--fu-line);border-radius:22px;background:var(--fu-photo-bg)}
.fu-modelo3d .fu-3d-ar{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;background:var(--fu-surface)}
.fu-3d-vacio{padding:18px;border:1px dashed var(--fu-line);border-radius:14px;color:var(--fu-muted)}

/* ---- logos de marca (índice de marcas, cinta y ficha de marca) ---- */
.fu-logo{display:block;max-width:100%;height:34px;width:auto;object-fit:contain;object-position:left center}
.fu-logo.grande{height:52px;margin-bottom:14px}
.fu-logo.sin-logo{font-size:17px;letter-spacing:-.01em}
:root[data-theme="dark"] .fu-logo.mono-oscuro{filter:invert(1) brightness(1.8)}   /* logo negro sobre fondo negro */
:root:not([data-theme="dark"]) .fu-logo.mono-claro{filter:invert(1) brightness(.2)}  /* logo blanco sobre fondo blanco */
/* tinta única en TODO el sitio (índice de marcas, página de marca), como en la cinta: los logos blancos
   desaparecían en claro y los negros en oscuro (auditoría 02 #4). Los que traen fondo propio quedan a color. */
.fu-logo:not(.con-fondo):not(.sin-logo){filter:brightness(0)}
:root[data-theme="dark"] .fu-logo:not(.con-fondo):not(.sin-logo){filter:brightness(0) invert(1)}
.bcard.con-logo{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bcard.con-logo .fu-logo{height:30px;margin-bottom:6px}
.bcard.con-logo b{font-size:15px}
.brands .fu-logo{height:22px;opacity:.75;transition:opacity .2s}
.brands a:hover .fu-logo{opacity:1}

/* ---- miniatura del equipo en la hoja «Comparar con…» ---- */
.cs-foto{flex:none;width:44px;height:44px;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden;border:1px solid var(--fu-line)}
.cs-foto img{width:100%;height:100%;object-fit:contain;padding:4px}

/* =====================================================================
   MOVIMIENTO DE MARCA (Gustavo 2026-09-23 · _MEMORIA/decision-vitrina-fotos-logo-2026-09-23.md)
   Prototipo aprobado: 02-CATALOGO/auditorias/fotos-opciones/mezcla.html
   ===================================================================== */
:root{
  /* brillo del logo: en claro, un gris claro sacado del texto; en oscuro, blanco */
  --fu-logo-brillo:color-mix(in srgb, var(--fu-silver-1) 30%, var(--fu-bg));
  /* tarjetas: capa oscura con luz al pasar el cursor (igual en claro y en oscuro) y franja del destello */
  --fu-hover-bg:radial-gradient(58% 58% at 50% 50%, #3a3b40 0%, #1a1a1d 42%, #070708 100%);
  --fu-hover-glow:drop-shadow(0 0 28px rgba(255,255,255,.32)) drop-shadow(0 0 2px rgba(255,255,255,.5));
  --fu-destello:rgba(255,255,255,.85);
  /* halo de la ficha y del escenario */
  --fu-halo:rgba(255,255,255,.95);
  --fu-piso:rgba(10,10,12,.18);
}
:root[data-theme="dark"]{
  --fu-logo-brillo:color-mix(in srgb, var(--fu-silver-1) 60%, #ffffff);
  --fu-destello:rgba(255,255,255,.35);
  --fu-halo:rgba(255,255,255,.16);
  --fu-piso:rgba(0,0,0,.55);
}

/* 1. Logo: metal líquido (6,4 s) + línea viva (5,6 s ida o vuelta). No cambia el tamaño: no mueve nada alrededor */
.logo .fu-wm{position:relative;display:inline-block;padding-bottom:6px;
  background:linear-gradient(100deg,var(--fu-silver-1) 0%,var(--fu-silver-1) 35%,var(--fu-silver-3) 45%,var(--fu-logo-brillo) 50%,var(--fu-silver-3) 55%,var(--fu-silver-1) 65%,var(--fu-silver-1) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fu-metal 6.4s linear infinite}
.logo .fu-wm::after{content:"";position:absolute;left:0;right:.42em;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--fu-silver-1),transparent);background-size:40% 100%;background-repeat:no-repeat;
  animation:fu-linea 5.6s ease-in-out infinite alternate;opacity:.85}
@keyframes fu-metal{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes fu-linea{from{background-position:-40% 0}to{background-position:140% 0}}

/* 2. Tarjetas: destello que se repite (8,4 s; cada tarjeta 1,4 s después que la anterior, en ciclos de 6) */
.card .photo.has-img{isolation:isolate}
.card .photo.has-img::after{display:block;content:"";position:absolute;inset:-20% -60%;left:-60%;bottom:-20%;
  background:linear-gradient(105deg,transparent 40%,var(--fu-destello) 50%,transparent 60%);
  transform:translateX(-70%);animation:fu-destello 8.4s ease-in-out infinite;animation-delay:var(--fu-d,0s);
  pointer-events:none;mix-blend-mode:soft-light;z-index:2;font-size:0;letter-spacing:0}
@keyframes fu-destello{0%{transform:translateX(-70%)}45%,100%{transform:translateX(70%)}}
.card:nth-child(6n+2) .photo{--fu-d:1.4s}.card:nth-child(6n+3) .photo{--fu-d:2.8s}.card:nth-child(6n+4) .photo{--fu-d:4.2s}
.card:nth-child(6n+5) .photo{--fu-d:5.6s}.card:nth-child(6n) .photo{--fu-d:7s}
.card .photo.has-img img{transition:transform .6s var(--fu-ease),filter .5s}
.card:hover .photo.has-img img,.card:focus-within .photo.has-img img,.card.fu-activo .photo.has-img img{transform:scale(1.05)}
/* …y solo si la foto NO trae fondo propio: fondo de la tienda en reposo y oscuro con luz al pasar el cursor.
   Con fondo propio (blanco) se queda en blanco: así nunca aparece un recuadro blanco sobre negro */
.card .photo.has-img.sin-fondo,:root[data-theme="dark"] .card .photo.has-img.sin-fondo{background:var(--fu-photo-bg)}
.card .photo.has-img.sin-fondo::before{display:block;content:"";position:absolute;inset:0;background:var(--fu-hover-bg);opacity:0;transition:opacity .5s var(--fu-ease);z-index:0}
.card:hover .photo.sin-fondo::before,.card:focus-within .photo.sin-fondo::before,.card.fu-activo .photo.sin-fondo::before{opacity:1}
.card:hover .photo.sin-fondo img,.card:focus-within .photo.sin-fondo img,.card.fu-activo .photo.sin-fondo img{filter:var(--fu-hover-glow)}
.card:hover .photo.sin-fondo::after,.card.fu-activo .photo.sin-fondo::after{--fu-destello:rgba(255,255,255,.5)}

/* 3. Ficha: la foto sin fondo flota suave sobre un halo que respira */
.gallery .photo.main.sin-fondo,:root[data-theme="dark"] .gallery .photo.main.sin-fondo{background:var(--fu-photo-bg)}
.gallery .photo.main.sin-fondo::before{display:block;content:"";position:absolute;inset:16% 20%;border-radius:50%;background:radial-gradient(closest-side,var(--fu-halo),transparent);filter:blur(8px);z-index:0;animation:fu-respira 5s ease-in-out infinite}
.gallery .photo.main.sin-fondo img{animation:fu-flota 6s ease-in-out infinite}
@keyframes fu-respira{50%{transform:scale(1.08);opacity:.75}}
@keyframes fu-flota{50%{translate:0 -10px}}

@media (prefers-reduced-motion:reduce){
  .logo .fu-wm,.logo .fu-wm::after,.card .photo.has-img::after,.gallery .photo.main.sin-fondo::before,.gallery .photo.main.sin-fondo img{animation:none}
  .card .photo.has-img::after{display:none}
}