/* Las fuentes (@font-face en base64) viven en public/css/fonts.css,
   aparte, con su propio cache-busting — así un cambio acá (que pasa
   seguido) no obliga a re-descargar los ~400KB de fuentes de nuevo,
   solo las veces que las fuentes en sí cambien de verdad. */
:root{
  --bg:#080808;--bg-elevated:#131313;--bg-elevated-2:#1C1C1C;
  --gold:#FFD900;--gold-dim:#3A3300;
  --text-primary:#F5F5F3;--text-secondary:#8E8E93;--text-muted:#848484;
  --border:rgba(255,255,255,0.08);--border-strong:rgba(255,255,255,0.16);
  --green:#3DDC84;--red:#E24B4A;
  /* Mismos tonos que .pcb-platform-amd/.pcb-platform-intel más abajo
     (ya elegidos para esas tarjetas) — se reutilizan acá como
     variables para no repetir el hex a mano en cada regla nueva. */
  --amd:#ff8c00;--amd-dim:rgba(255,140,0,.14);
  --intel:#0082dc;--intel-dim:rgba(0,130,220,.14);
  --font-display:'Space Grotesk',sans-serif;--font-body:'Inter',sans-serif;--font-mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;}
html{background:var(--bg);min-height:100%;}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px;transition:background .2s;}
*::-webkit-scrollbar-thumb:hover{background:var(--gold);}
/* !important solo acá: el editor de contenido (GrapesJS) inyecta su
   propio "body{background-color:#fff}" dentro del canvas para simular
   una hoja en blanco, con la misma prioridad que esta regla — sin
   forzarla, el canvas se ve blanco con texto casi invisible encima. */
body{background:var(--bg) !important;color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100%;}
/* Red de seguridad contra el scroll horizontal: bandas de ancho completo con 100vw (ej. Quiénes somos) se pasaban por el ancho de la barra de scroll en Windows. clip (no hidden) no crea un contenedor de scroll, así que no rompe los position:sticky. */
body{overflow-x:clip;}
/* Bandas de ancho completo de Quiénes somos (su CSS vive en el bloque HTML de la página): mismo efecto, pero descontando la barra de scroll (--scrollbar-w, medida en layouts/app.blade.php). */
.qs-page .qs-fullbleed{width:calc(100vw - var(--scrollbar-w, 0px));margin-left:calc(-50vw + var(--scrollbar-w, 0px) / 2);margin-right:calc(-50vw + var(--scrollbar-w, 0px) / 2);}
a{color:inherit;text-decoration:none;}
button,input,select{font-family:inherit;}
/* Sin flechitas nativas del navegador en los input[type=number] — van
   contra la regla de "nada de controles por default" del sitio,
   admin incluido (admin.css se carga junto con este archivo en todo
   el admin). El input sigue siendo type=number (mantiene el teclado
   numérico en celular y la validación nativa), solo se le saca el
   dibujo de las flechitas. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
:root{--wrap-max:1440px;}
/* Pantallas muy anchas (2K y más): el contenido se abre a 1600px para no
   dejar franjas vacías enormes. Desde 2040px entra igual la barra de
   categorías abierta a la izquierda (1600 + 2 × 220). */
@media (min-width:2040px){:root{--wrap-max:1600px;}}
.wrap{width:100%;max-width:var(--wrap-max);margin:0 auto;padding:0 clamp(20px,3.2vw,48px);}

/* Set de íconos propios (ver resources/views/components/icon.blade.php)
   -- reemplaza los emojis de color que había sueltos por todo el sitio.
   1em = se escala solo con el font-size del texto que lo rodea, igual
   que hacía el emoji que reemplaza; -2px de translateY centra el trazo
   respecto a la línea de base del texto (los SVG sin ajuste quedan
   corridos hacia abajo al lado de texto). */
.icon{width:1em;height:1em;flex-shrink:0;vertical-align:-0.125em;}
/* Corazón/guardado: mismo trazo vacío siempre, .is-active en el botón
   que lo contiene agrega el relleno -- así el estado "activo" se ve
   sólido en vez de solo cambiar de color plano. */
/* El path de estos dos íconos trae fill="none" como atributo de
   presentación -- hay que pisarlo en el path mismo (no alcanza con
   apuntar al <svg> contenedor, un atributo de presentación no hereda
   por más que el padre tenga otro fill). */
.is-active .icon-heart path,.is-active .icon-bookmark path{fill:currentColor;}

/* Estado de disponibilidad (antes 🟢🟡🔴) -- un punto de color plano
   no necesita ser una imagen/SVG, con CSS alcanza y sigue igual de
   nítido en cualquier pantalla. */
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.status-dot--ok{background:#3DDC84;}
.status-dot--warn{background:#ffc65c;}
.status-dot--danger{background:#ff6b6b;}

.admin-session-bar{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;background:var(--gold);color:#0A0A0B;font-family:var(--font-mono);font-size:12px;padding:7px 20px;text-align:center;}
.admin-session-bar strong{font-weight:700;}
.admin-session-bar-actions{display:flex;align-items:center;gap:14px;}

/* PROMO BAR — nivel 1 del sistema de promociones: tira delgada, nunca fixed, empuja el resto de la página (nav incluido) hacia abajo. */
.promo-bar{width:100%;overflow:hidden;}
.promo-bar-enter{transition:opacity .35s ease,transform .35s ease;}
.promo-bar-enter-start{opacity:0;transform:translateY(-100%);}
.promo-bar-enter-end{opacity:1;transform:translateY(0);}
.promo-bar-inner{display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 44px;position:relative;text-align:center;}
.promo-bar-text{font-size:13px;font-weight:500;}
.promo-bar-countdown{font-family:var(--font-mono);font-weight:700;margin-left:8px;letter-spacing:.02em;}
.promo-bar-active{background:var(--gold);color:#0A0A0B;}
.promo-bar-teaser{background:var(--bg-elevated);color:var(--text-secondary);border-bottom:1px solid var(--gold-dim);}
.promo-bar-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:18px;line-height:1;cursor:pointer;color:inherit;opacity:.6;padding:6px;transition:opacity .15s;}
.promo-bar-close:hover{opacity:1;}
.motion-reduced .promo-bar-enter{transition:opacity .12s ease;}

/* PROMO MODAL — nivel 3, reservado para 1-2 fechas grandes al año. */
.promo-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;}
.promo-modal-overlay-enter,.promo-modal-overlay-leave{transition:opacity .3s ease;}
.promo-modal-overlay-enter-start,.promo-modal-overlay-leave-end{opacity:0;}
.promo-modal-overlay-enter-end,.promo-modal-overlay-leave-start{opacity:1;}
.promo-modal{position:relative;width:100%;max-width:440px;background:var(--bg-elevated);border:1px solid var(--gold-dim);border-radius:20px;padding:44px 36px;text-align:center;}
.promo-modal-enter{transition:opacity .35s ease,transform .35s ease;}
.promo-modal-enter-start{opacity:0;transform:translateY(12px) scale(.97);}
.promo-modal-enter-end{opacity:1;transform:translateY(0) scale(1);}
.promo-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-muted);font-size:22px;line-height:1;cursor:pointer;padding:6px;transition:color .15s;}
.promo-modal-close:hover{color:var(--text-primary);}
.promo-modal-eyebrow{font-family:var(--font-mono);font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.promo-modal-title{font-family:var(--font-display);font-size:26px;line-height:1.25;margin-bottom:26px;}
.promo-modal-cta{display:inline-flex;}

/* PROMO EFFECTS — nieve/confeti/brillo/niebla mientras la promo está activa (public/js/promo-effects.js). */
.promo-effect-canvas{position:fixed;inset:0;z-index:350;pointer-events:none;}
.motion-reduced .promo-modal-overlay-enter,.motion-reduced .promo-modal-overlay-leave,.motion-reduced .promo-modal-enter{transition:opacity .12s ease;}
.admin-session-bar-actions a,.admin-session-bar-actions button{background:none;border:none;color:#0A0A0B;font-family:inherit;font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer;padding:0;transition:opacity .15s;}
.admin-session-bar-actions a:hover,.admin-session-bar-actions button:hover{opacity:.65;}

/* Switch "Solo Bs" en la barra de admin — misma técnica de siempre
   (checkbox real oculto + track dibujado a mano), pero en tonos negros
   sobre el fondo dorado de la barra en vez de dorado sobre oscuro,
   porque acá el fondo YA es dorado. */
.admin-currency-switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;}
.admin-currency-switch input{position:absolute;opacity:0;width:1px;height:1px;}
.admin-currency-switch-track{position:relative;display:inline-block;width:30px;height:17px;border-radius:100px;background:rgba(10,10,11,.18);border:1px solid rgba(10,10,11,.45);flex-shrink:0;transition:background .15s;}
.admin-currency-switch-track::before{content:'';position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;background:#0A0A0B;transition:transform .18s ease,background .15s;}
.admin-currency-switch input:checked + .admin-currency-switch-track{background:#0A0A0B;}
.admin-currency-switch input:checked + .admin-currency-switch-track::before{transform:translateX(13px);background:var(--gold);}
.admin-currency-switch input:focus-visible + .admin-currency-switch-track{outline:2px solid #0A0A0B;outline-offset:2px;}
body.has-admin-bar{padding-top:34px;transition:padding-top .32s cubic-bezier(.22,1,.36,1);}
body.has-admin-bar nav{top:34px;transition:top .32s cubic-bezier(.22,1,.36,1),background .6s ease,border-color .6s ease;}
/* Barra plegable: sube y deja solo la pestañita (ver layouts/app.blade.php). */
.admin-session-bar{transition:transform .32s cubic-bezier(.22,1,.36,1);}
body.admin-bar-collapsed{padding-top:0;}
body.admin-bar-collapsed nav{top:0;}
body.admin-bar-collapsed .admin-session-bar{transform:translateY(-100%);}
.admin-session-bar-tab{position:absolute;top:100%;right:10px;height:18px;padding:0 9px;display:flex;align-items:center;gap:4px;border:none;border-radius:0 0 9px 9px;background:var(--gold);color:#0A0A0B;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer;box-shadow:0 6px 14px -4px rgba(0,0,0,.5);transition:height .2s ease;}
.admin-session-bar-tab:hover{height:21px;}
.admin-session-bar-tab:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.admin-session-bar-tab svg{transition:transform .32s cubic-bezier(.22,1,.36,1);}
.admin-session-bar-tab-label{display:none;}
body.admin-bar-collapsed .admin-session-bar-tab svg{transform:rotate(180deg);}
body.admin-bar-collapsed .admin-session-bar-tab-label{display:inline;}
.motion-reduced .admin-session-bar,.motion-reduced.has-admin-bar,.motion-reduced.has-admin-bar nav{transition:none;}

@media (max-width:600px){
  .admin-session-bar{font-size:11px;padding:6px 12px;gap:8px;}
  .admin-session-bar-actions{gap:10px;}
}

/* .site-nav-root (partials/nav.blade.php) envuelve al <nav> solo para el x-data de Alpine -- sin display:contents el sticky quedaba atrapado dentro de ese div (del mismo alto que el nav) y el header dejaba de quedar fijo al hacer scroll. */
.site-nav-root{display:contents;}
/* Sin backdrop-filter a propósito: en un header fijo, el navegador tiene
   que volver a difuminar lo que pasa por detrás en CADA cuadro del scroll
   (tirones en equipos sin tarjeta de video). Fondo casi opaco = mismo look. */
nav{position:sticky;top:0;z-index:200;background:rgba(10,10,11,0.97);border-bottom:1px solid rgba(255,255,255,.04);transition:background .6s ease,border-color .6s ease;}
/* En una página de marca, el dorado fijo del logo/botón "Arma tu PC"
   chocaba contra el acento propio de la marca (muy notorio con el
   magenta de FIFINE, que no es ni remotamente análogo al dorado) --
   pasan a blanco/neutro durante TODA la página de marca (no solo
   sobre el hero), así nunca compiten con el acento de ninguna marca,
   sea cual sea. El logo es una imagen (no texto), así que se fuerza a
   blanco con un filtro CSS en vez de necesitar un segundo archivo:
   brightness(0) lo vuelve negro puro, invert(1) lo da vuelta a blanco
   -- funciona sin importar los colores originales de la imagen.
   Además, un filete fino del acento de esa marca abajo del header --
   visible siempre, no atado al scroll como el resto de .nav-hero-mode
   -- funciona de puente entre el header (ahora neutro) y el resto de
   la página. nav.nav-brand-accent (elemento+clase) le gana en
   especificidad a .nav-hero-mode/.nav-hero-mode--light solos, así que
   no hace falta !important para pisar sus reglas. */
nav.nav-brand-accent{border-bottom:2px solid var(--nav-accent, var(--gold));}
nav.nav-brand-accent .logo-full{filter:brightness(0) invert(1);}
nav.nav-brand-accent .btn-outline-gold{border-color:#fff;color:#fff;}
nav.nav-brand-accent .btn-outline-gold:hover{background:#fff;color:#0A0A0B;}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px;padding-block:12px;gap:28px;transition:min-height .6s ease;}
/* overflow:hidden es una red de seguridad, no la solución -- la
   solución real es el breakpoint de @media(max-width:1480px) más
   abajo, elegido para que el nav completo (logo + estos links + los
   400px del buscador + los íconos de la derecha) siempre entre sin
   pisarse. Pero el menú (Admin -> Menús, ver
   AppServiceProvider::resolveHeaderMenuItems()) es de largo libre --
   si algún día se le agregan más ítems o etiquetas más largas de las
   que había al medir ese breakpoint, esto evita que un link de más se
   dibuje encima del buscador (bug real, visto en producción con zoom
   de Chrome): en el peor caso el link de más queda cortado/oculto en
   vez de superponerse. */
.nav-left{display:flex;align-items:center;gap:28px;justify-self:start;min-width:0;overflow:hidden;}

/* Header flotante y transparente sobre el hero — solo en Home (ver
   partials/nav.blade.php). --nav-progress (0 a 1) lo actualiza
   public/js/nav-scroll.js en cada scroll: se mantiene en 0 durante el
   75% del alto del video y recién ahí empieza a subir hasta 1, así el
   cambio se siente atado al scroll real y no un salto brusco. En el
   resto del sitio el nav no tiene esta clase y se comporta como siempre. */
.nav-hero-mode{position:fixed;left:0;right:0;transition:none;background:rgba(10,10,11,calc(var(--nav-blur, var(--nav-progress, 0)) * .97));border-bottom:1px solid rgba(255,255,255,calc(var(--nav-progress, 0) * .08));}
.nav-hero-mode .nav-inner{min-height:calc(88px - (30px * var(--nav-progress, 0)));position:relative;z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.55);transition:none;}
.nav-hero-mode .logo-full{height:calc(60px - (20px * var(--nav-progress, 0)));transition:none;}

/* Degradado suave detrás del texto — para que el header se siga
   leyendo bien sin importar qué tan claro sea el fotograma del video,
   se desvanece a la par que el fondo sólido va ganando presencia. */
.nav-hero-mode::before{content:'';position:absolute;left:0;right:0;top:0;height:170px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);pointer-events:none;opacity:calc(1 - var(--nav-progress, 0));}

/* Buscador estilo "vidrio esmerilado" que se va oscureciendo hasta
   quedar sólido — negro sólido total desde el inicio sería ilegible
   sobre el video, pero el negro opaco de siempre desentona flotando. */
.nav-hero-mode .nav-search{height:calc(44px - (8px * var(--nav-progress, 0)));background:rgba(10,10,11,calc(.4 + var(--nav-progress, 0) * .52));border-color:rgba(255,255,255,calc(.15 - var(--nav-progress, 0) * .07));transition:none;}
.nav-hero-mode .nav-search input::placeholder{color:rgba(245,245,243,.75);}
.nav-hero-mode .search-icon-btn{color:rgba(245,245,243,.85);}
.logo{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-0.02em;flex-shrink:0;display:flex;align-items:center;gap:9px;}
.logo a{display:flex;align-items:center;gap:9px;}
.logo span{color:var(--gold);}
.logo-full{height:var(--nav-logo-h, var(--logo-height, 60px));width:auto;display:block;flex-shrink:0;transition:height .6s ease;}
.search-wrap{position:relative;flex:1;max-width:720px;justify-self:center;}
.nav-search{width:100%;height:44px;display:flex;align-items:stretch;border:1px solid var(--border);border-radius:100px;overflow:hidden;background:var(--bg-elevated);transition:border-color .15s ease,height .6s ease,background-color .6s ease,backdrop-filter .6s ease;}
.nav-search:focus-within{border-color:var(--gold);}
.search-icon-btn{display:flex;align-items:center;justify-content:center;padding:0 16px;background:none;border:none;color:var(--text-muted);cursor:pointer;flex-shrink:0;transition:color .15s;}
.search-icon-btn:hover{color:var(--gold);}
.nav-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text-primary);font-size:14px;padding:0 14px 0 4px;}
.nav-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;justify-self:end;}

/* Buscador del header de escritorio: siempre abierto y visible, ancho
   fijo, anclado al centro exacto de la barra (columna del medio del
   grid de arriba). La versión del drawer mobile (formClass distinto,
   ver mobile-drawer .search-wrap) no se toca. */
nav > .wrap > .search-wrap{flex:0 0 auto;max-width:none;width:400px;}
nav > .wrap > .search-wrap .nav-search:focus-within{box-shadow:0 16px 40px rgba(0,0,0,.4);}
.btn-gold{background:var(--gold);color:#0A0A0B;font-weight:600;font-size:14px;padding:10px 18px;border-radius:100px;border:none;cursor:pointer;}
.btn-outline-gold{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--gold);color:var(--gold);font-weight:600;font-size:13px;padding:9px 17px;border-radius:100px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;}
.btn-outline-gold:hover{background:var(--gold);color:#0A0A0B;}

.search-suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,0.4);z-index:250;max-height:380px;overflow-y:auto;}
/* En el header de escritorio el buscador colapsado/expandido es angosto
   (ver nav > .wrap > .search-wrap arriba) — el panel de resultados no
   tiene por qué quedarse igual de angosto, así que se estira más allá
   del propio input (queda centrado igual, ya que el buscador está
   anclado al centro del header). */
nav > .wrap > .search-wrap > .search-suggestions{left:-90px;right:-90px;}
.search-suggestion-item{display:flex;align-items:center;gap:12px;padding:9px;border-radius:10px;transition:background .15s;}
.search-suggestion-item:hover{background:var(--bg-elevated-2);}
.search-suggestion-media{width:40px;height:40px;border-radius:8px;background:var(--bg-elevated-2);overflow:hidden;flex-shrink:0;}
.search-suggestion-media img{width:100%;height:100%;object-fit:cover;}
.search-suggestion-body{flex:1;min-width:0;}
.search-suggestion-cat{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);text-transform:uppercase;}
.search-suggestion-name{font-size:13.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Nombre largo: al pasar el mouse (o enfocar con teclado) el texto se corre hacia la izquierda hasta mostrar el final, en vez de quedar cortado con "..." (animación en search-box.blade.php, sobre el <span> de adentro). */
.search-suggestion-name span{position:relative;}
.search-suggestion-name.is-sliding{text-overflow:clip;}
.search-suggestion-price{font-size:13px;color:var(--gold);flex-shrink:0;}
.search-empty{padding:14px 12px 12px;}
.search-empty-title{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--text-primary);overflow-wrap:anywhere;}
.search-empty-text{margin:0 0 12px;font-size:12.5px;color:var(--text-muted);}
.search-empty-actions{display:flex;flex-wrap:wrap;gap:8px;}
.search-empty-wa,.search-empty-all{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:100px;font-size:13px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s,background .15s;}
.search-empty-wa{background:var(--gold);color:#0A0A0B;}
.search-empty-wa:hover{background:#e6c400;}
.search-empty-wa svg{width:15px;height:15px;}
.search-empty-all{border:1px solid var(--border-strong);color:var(--text-primary);}
.search-empty-all:hover{border-color:var(--gold);color:var(--gold);}

.nav-links-wrap{position:relative;display:flex;align-items:center;gap:28px;}
.nav-home-link{position:relative;z-index:1;flex-shrink:0;font-size:14px;color:var(--text-secondary);padding:8px 2px;transition:color .2s ease;}
.nav-home-link:hover{color:var(--text-primary);}

/* Barra fina que se desliza y rebota bajo el link que estás mirando,
   en vez de un subrayado seco -- JS (nav-link-indicator.js) mide el
   ancho/posición real del link hovereado y mueve esta barra. */
.nav-link-indicator{
  position:absolute;left:0;bottom:2px;width:0;height:3px;opacity:0;
  background:var(--gold);border-radius:100px;pointer-events:none;
  transition:left .4s cubic-bezier(.34,1.56,.64,1),width .45s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;
}
.nav-links-wrap:hover .nav-link-indicator{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .nav-link-indicator{transition:none;}
}

[x-cloak]{display:none!important;}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;background:none;border:none;cursor:pointer;flex-shrink:0;}
.hamburger span{display:block;width:18px;height:1.5px;background:var(--text-primary);border-radius:1px;}

.mega-icon{display:inline-flex;color:var(--gold);width:18px;height:18px;flex-shrink:0;}
.mega-icon svg{width:100%;height:100%;}

.mobile-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:300;}
.mobile-drawer{position:fixed;top:0;bottom:0;left:0;width:min(320px,85vw);background:var(--bg-elevated);border-right:1px solid var(--border);z-index:310;transform:translateX(-100%);transition:transform .3s cubic-bezier(.65,0,.35,1);overflow-y:auto;padding:20px;}
.mobile-drawer.open{transform:translateX(0);}
.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.mobile-drawer-close{background:none;border:none;color:var(--text-secondary);font-size:24px;line-height:1;cursor:pointer;padding:4px 8px;}
.mobile-drawer .search-wrap{max-width:none;margin-bottom:20px;}
.mobile-search{width:100%;height:44px;display:flex;align-items:stretch;border:1px solid var(--border);border-radius:100px;overflow:hidden;background:var(--bg-elevated-2);}
.mobile-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text-primary);font-size:14px;padding:0 14px;}

/* .mobile-accordion es un <nav>, y el selector "nav{...}" de arriba
   (pensado solo para el header del sitio) le pegaba sin querer un
   fondo oscuro semitransparente + sticky + blur, dando el efecto de
   "recuadro negro" en cada categoría del drawer. Se resetea acá. */
.mobile-accordion{position:static;background:none;backdrop-filter:none;border-bottom:none;}
.accordion-group{border-bottom:1px solid var(--border);}
.accordion-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:none;color:var(--text-primary);font-size:14px;font-weight:500;padding:14px 4px;cursor:pointer;text-align:left;border-radius:8px;transition:background .15s,color .15s;}
.accordion-head-label{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.accordion-head-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.accordion-head:active{background:var(--bg-elevated-2);}
.accordion-head .mega-icon{color:var(--text-secondary);transition:color .15s;}
.accordion-group.is-open .accordion-head{color:var(--gold);}
.accordion-group.is-open .accordion-head .mega-icon{color:var(--gold);}
.accordion-body{display:flex;flex-direction:column;gap:2px;padding:2px 4px 14px 32px;}
.accordion-body a{font-size:13.5px;color:var(--text-secondary);padding:8px 0;transition:color .15s;}
.accordion-body a:hover,.accordion-body a:active{color:var(--gold);}
.accordion-viewall{color:var(--gold)!important;font-weight:600;border-bottom:1px solid var(--border);margin-bottom:4px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-body);font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:100px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-primary);cursor:pointer;transition:border-color .15s,background .15s,transform .15s;text-decoration:none;}
.btn:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--gold);color:#0A0A0B;border-color:var(--gold);}
.btn-primary:hover{background:#e6c400;}
.btn-danger{color:var(--red);}
.btn-danger:hover{border-color:var(--red);}
.btn-sm{padding:6px 12px;font-size:12.5px;}

footer{padding:64px 0 32px;border-top:1px solid var(--border);}

.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--border);}

.footer-brand{max-width:280px;}
.footer-logo{height:40px;width:auto;display:block;margin-bottom:14px;}
.footer-tagline{color:var(--text-secondary);font-size:13.5px;line-height:1.5;margin-bottom:18px;}
.footer-whatsapp-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;border:1px solid var(--border);color:var(--text-primary);font-size:13px;font-weight:500;white-space:nowrap;transition:border-color .15s,background .15s,color .15s,transform .15s;}
.footer-whatsapp-btn svg{color:#25D366;flex-shrink:0;}
.footer-whatsapp-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--bg-elevated);transform:translateY(-1px);}

.footer-community-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;border:1px solid rgba(37,211,102,.35);background:rgba(37,211,102,.08);color:#25D366;font-size:13px;font-weight:500;white-space:nowrap;margin-top:10px;transition:border-color .15s,background .15s,transform .15s;}
.footer-community-btn svg{color:#25D366;flex-shrink:0;}
.footer-community-btn:hover{border-color:#25D366;background:rgba(37,211,102,.15);transform:translateY(-1px);}

.footer-social{display:flex;gap:12px;margin-top:16px;}
.footer-social-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:100px;border:1px solid var(--border);color:var(--text-secondary);transition:border-color .15s,color .15s;}
.footer-social-icon svg{width:16px;height:16px;}
.footer-social-icon:hover{border-color:var(--gold);color:var(--gold);}

.footer-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:16px;font-weight:600;}
.footer-col a,.footer-col .footer-text{display:block;font-size:13.5px;color:var(--text-secondary);margin-bottom:11px;transition:color .2s;}
.footer-col a:hover{color:var(--gold);}

.footer-bottom{display:flex;justify-content:space-between;padding-top:20px;font-size:12.5px;color:var(--text-muted);flex-wrap:wrap;gap:10px;}

@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:32px;}
  .footer-brand{grid-column:1 / -1;max-width:none;}
}

@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr;row-gap:28px;}
  .footer-brand{grid-column:auto;}
}

/* PAGE HEAD */
.page-head{padding-top:48px;padding-bottom:28px;border-bottom:1px solid var(--border);}
.page-head h1{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,42px);letter-spacing:-0.02em;}
.breadcrumb{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);padding-block:22px;}
.breadcrumb a:hover{color:var(--gold);}

/* SHOP LAYOUT */
.shop-layout{padding-top:28px;padding-bottom:100px;}

.shop-sort{position:relative;}
.shop-sort-trigger{display:inline-flex;align-items:center;gap:9px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:100px;color:var(--text-primary);font-family:var(--font-body);font-size:12.5px;font-weight:600;padding:9px 16px;cursor:pointer;transition:border-color .15s ease,color .15s ease;}
.shop-sort-trigger svg:first-child{color:var(--text-muted);flex-shrink:0;transition:color .15s ease;}
.shop-sort-trigger:hover{border-color:var(--gold);}
.shop-sort-trigger:hover svg:first-child{color:var(--gold);}
.shop-sort-caret{color:var(--text-muted);flex-shrink:0;transition:transform .2s cubic-bezier(.65,0,.35,1);}
.shop-sort-caret.is-open{transform:rotate(180deg);}
.shop-sort-label-short{display:none;}
@media (max-width:640px){.shop-sort-label-full{display:none;}.shop-sort-label-short{display:inline;}}
.shop-sort-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:14px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.45);z-index:20;transform-origin:top left;}
.shop-sort-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:9px;font-size:13px;color:var(--text-secondary);text-decoration:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease;}
.shop-sort-option:hover{background:var(--bg-elevated-2);color:var(--text-primary);}
.shop-sort-option.active{color:var(--gold);font-weight:600;}
.shop-sort-option.active svg{color:var(--gold);flex-shrink:0;}
.shop-filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.shop-toolbar-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-right:2px;}
.shop-filter-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:6px 14px;border-radius:100px;background:none;border:1px solid var(--border);color:var(--text-secondary);text-decoration:none;transition:border-color .15s ease,color .15s ease,background-color .15s ease;}
.shop-filter-pill:hover{border-color:var(--border-strong);color:var(--text-primary);}
.shop-filter-pill.active{background:var(--gold);border-color:var(--gold);color:#0A0A0B;}
.shop-filter-clear{color:var(--text-muted);border-style:dashed;}

/* flex, no grid: con grid, la última fila de una página incompleta
   (ej. 2 productos donde entrarían 5) deja un hueco vacío a la derecha
   porque el ancho de columna es una propiedad del grid entero, no de
   cada fila — no hay forma de "centrar" solo la fila final. Con flex +
   wrap, justify-content:center sí actúa fila por fila: las filas
   completas quedan pegadas a los bordes igual que antes (no sobra
   espacio para centrar), y la última fila incompleta se centra sola. */
.product-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;}
.product-grid > .card{flex:1 1 220px;}

/* Sin resultados (búsqueda o categoría vacía) -- mismo lenguaje visual
   que la página 404 (eyebrow dorado + personaje al costado con
   drop-shadow, ver .error-404-mascot y .cms-hero-personaje), pero
   compacto: esto vive adentro de .product-grid, junto a la card de
   ayuda por WhatsApp, no es una página entera. */
.shop-empty{display:flex;align-items:center;justify-content:center;gap:24px;flex:1 1 100%;max-width:620px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:28px 32px;margin:4px 0;}
.shop-empty-text{min-width:0;}
.shop-empty-text p{color:var(--text-secondary);font-size:14.5px;line-height:1.6;margin:0;}
.shop-empty-mascot{width:130px;height:130px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 12px 24px rgba(0,0,0,.4));}
@media (max-width:600px){
  .shop-empty{flex-direction:column;text-align:center;padding:24px 20px;}
  .shop-empty-mascot{display:none;}
}

/* El tope de ancho (para que la última fila incompleta no crezca
   mucho más grande que las filas llenas) solo tiene sentido con
   varias columnas — en celular de una sola columna, la card debe
   seguir ocupando todo el ancho disponible como antes. */
@media (min-width:768px){
  .product-grid > .card{max-width:240px;}
}

/* Tienda en pantallas anchas: 6 columnas fijas. La tienda carga de a 12
   productos, así que cada tanda llena 2 filas justas (con 5 quedaba una
   fila de 2 suelta). Las tarjetas miden ~205px con el contenido de
   1440px y ~235px desde 2040px, donde el contenido se abre a 1600px. */
@media (min-width:1600px){
  .shop-layout .product-grid > .card,
  .shop-layout .shop-skeleton-card{flex:0 0 calc((100% - 5 * 18px) / 6);max-width:none;}
}

/* Placeholders del scroll infinito (ver shop-infinite-scroll.js) --
   mismo tamaño que .card para no saltar el layout cuando la tanda real
   los reemplaza. Pulso sutil en vez de spinner: se nota que algo está
   cargando sin llamar más la atención que el contenido real. */
.shop-skeleton-card{flex:1 1 220px;max-width:240px;border-radius:16px;overflow:hidden;background:var(--bg-elevated);border:1px solid var(--border);padding:14px;}
.shop-skeleton-media{aspect-ratio:1/1;border-radius:10px;background:var(--bg-elevated-2);margin-bottom:12px;animation:shop-skeleton-pulse 1.4s ease-in-out infinite;}
.shop-skeleton-line{height:12px;border-radius:6px;background:var(--bg-elevated-2);margin-bottom:8px;animation:shop-skeleton-pulse 1.4s ease-in-out infinite;}
.shop-skeleton-line.is-short{width:55%;margin-bottom:0;}
@keyframes shop-skeleton-pulse{0%,100%{opacity:.5;}50%{opacity:1;}}
.motion-reduced .shop-skeleton-media,.motion-reduced .shop-skeleton-line{animation:none;}

/* En celulares angostos (ej. iPhone SE, ~375px) una sola columna deja
   más espacio a cada card; en celulares anchos (ej. iPhone Pro Max,
   ~430px) el piso de 220px de arriba no alcanza a entrar 2 — se fuerzan
   2 columnas acá porque a ese ancho ya entran cómodas.
   El piso bajó de 420px a 360px: a los Android que reportan un ancho
   CSS angosto pese a ser pantallas grandes (ej. Galaxy S25 Ultra,
   ~384px) el corte en 420px los dejaba afuera y mostraban 1 sola
   columna, mientras que un iPhone Pro Max (~430px) sí entraba. */
@media (min-width:360px) and (max-width:767px){
  .product-grid{gap:12px;}
  .product-grid > .card{flex-basis:calc(50% - 6px);max-width:calc(50% - 6px);}
}
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:border-color .2s,transform .2s;transform-style:preserve-3d;}
.card:hover{border-color:var(--border-strong);transform:translateY(-2px);}
.card.is-tilting{transition:border-color .2s,transform .05s linear;}
.card-media{aspect-ratio:1/1;background:var(--bg-elevated-2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.card-media img{width:100%;height:100%;object-fit:cover;}
/* Antes esto solo pasaba cuando la card venía de un reemplazo AJAX
   (tienda/producto) — en una carga normal de página la foto igual
   podía "aparecer de golpe" en vez de ir bajando junto con el resto.
   Ahora es incondicional: shimmer de fondo mientras la foto no
   terminó de cargar (gancho onload/onerror inline en cada <img>, ver
   shop-results.blade.php y demás), fade-in suave apenas está lista.
   Shimmer apagado por default (solo :has() lo prende cuando hay un
   <img> sin cargar todavía) — un producto SIN foto nunca tiene <img>
   real, así que sin este gate quedaría con el shimmer animando para
   siempre en vez de mostrar el fondo liso de toda la vida. Sin
   soporte de :has(), el shimmer simplemente nunca se prende (degrada
   bien: la foto igual hace fade-in por su cuenta). */
/* Franja de luz que se desliza (transform, lo mueve la GPU) en vez de
   animar background-position (repintaba cada tarjeta en cada cuadro
   mientras cargaban las fotos, justo al scrollear la tienda). */
.card-media::before{content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 50%,transparent 100%);}
.card-media:has(img):not(:has(img.is-loaded))::before{opacity:1;animation:card-img-sweep 1.4s ease-in-out infinite;}
@keyframes card-img-sweep{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.card-media img{position:relative;opacity:0;transition:opacity .35s ease;}
.card-media img.is-loaded{opacity:1;}
@keyframes card-img-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.motion-reduced .card-media::before{animation:none;}
.motion-reduced .card-media img{opacity:1;transition:none;}

/* Agotado: la foto se apaga como la pantalla al morir en GTA — blanco y
   negro con más contraste (no solo grayscale plano, que se ve lavado) y
   un viñetado oscuro en los bordes. El badge rojo de "Agotado" queda
   fuera de esto a propósito, como el HUD que sigue nítido con todo lo
   demás desaturado alrededor. */
.card-media.is-sold-out img{filter:grayscale(1) contrast(1.25) brightness(.72);}
.card-media.is-sold-out::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.6) 100%);pointer-events:none;}
@media (prefers-reduced-motion:reduce){
  .card-media::before{animation:none;}
  .card-media img{opacity:1;transition:none;}
}
/* La tarjeta entera ya hace su propio fade+subida al entrar
   (.page-nav-enter .product-grid > .card, más abajo) — si la foto
   además hace SU propio fade por separado, una imagen ya en caché
   (típico viniendo de otra página que mostraba el mismo producto)
   termina el suyo bastante antes de que la tarjeta contenedora
   termine el suyo, y se ve como que "la foto apareció de golpe". Con
   la tarjeta ya entrando, la foto simplemente se muestra. */
.page-nav-enter .card-media img{opacity:1;transition:none;}
.badge{position:absolute;top:12px;left:12px;font-family:var(--font-mono);font-size:10px;padding:4px 10px;border-radius:100px;background:var(--gold);color:#0A0A0B;font-weight:600;}
/* El círculo visible se queda en 34px (no compite visualmente con la
   miniatura del producto, sobre todo en la grilla de 2 columnas en
   mobile) -- el ::before agranda el área táctil real a 44x44 sin
   agrandar el dibujo, siguiendo la zona de tap ampliada en vez de
   agrandar el botón entero. */
.card-quick-add{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(8,8,8,.88);border:1px solid var(--border);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s,opacity .2s;z-index:3;}
.card-quick-add::before{content:'';position:absolute;inset:-5px;}
/* Ocultar/revelar solo en hover-reveal en dispositivos con mouse real —
   en touch (hover:none) esto obligaba a "doble tap" en toda la card
   (el navegador trata el primer toque como si fuera a revelar el
   :hover, y recién el segundo toque navega de verdad). En touch el
   botón queda siempre visible, sin ambigüedad de tap para el navegador. */
@media (hover: hover){
  .card-quick-add{opacity:0;pointer-events:none;}
  .card:hover .card-quick-add{opacity:1;pointer-events:auto;}
}
.card-quick-add:hover{background:var(--gold);border-color:var(--gold);color:#0A0A0B;transform:scale(1.08);}
.card-quick-add:disabled{opacity:0;pointer-events:none;}

.card-badges{position:absolute;top:12px;left:12px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.card-badge-agotado,.card-badge-promo{font-family:var(--font-mono);font-size:10px;padding:4px 10px;border-radius:100px;font-weight:600;white-space:nowrap;}
.card-badge-agotado{background:var(--red);color:#fff;}
.card-badge-promo{background:var(--gold);color:#0A0A0B;font-weight:700;}

.card-variant-picker{position:absolute;top:52px;left:10px;right:10px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:12px;padding:12px;z-index:4;box-shadow:0 12px 30px rgba(0,0,0,.5);}
.card-variant-picker-title{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
.card-variant-picker-options{display:flex;flex-wrap:wrap;gap:6px;}
.card-variant-chip{background:var(--bg-elevated-2);border:1px solid var(--border);color:var(--text-primary);border-radius:100px;padding:6px 12px;font-size:12.5px;cursor:pointer;transition:border-color .15s,color .15s;}
.card-variant-chip:hover{border-color:var(--gold);color:var(--gold);}
.card-variant-chip.out-of-stock{opacity:.4;text-decoration:line-through;cursor:not-allowed;}
.card-variant-chip.out-of-stock:hover{border-color:var(--border);color:var(--text-primary);}
.card-body{padding:14px;}
.card-cat{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-transform:uppercase;margin-bottom:5px;}
.card-name{font-size:13.5px;font-weight:500;margin-bottom:8px;line-height:1.4;min-height:38px;}
.card-price{font-family:var(--font-mono);font-size:15px;color:var(--gold);}
.card-price small{font-size:10px;color:var(--text-muted);}
.card-price-from{font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-right:4px;}
.card-price-original{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);text-decoration:line-through;margin-bottom:1px;}
/* Antes era una línea de texto gris, chica, fácil de pasar por alto —
   pedido explícito del usuario: "mucho más llamativo". Rojo (mismo
   --red que ya usa el sitio para "urgencia"/agotado, no el dorado
   reservado para precio/CTA) + pulso sutil para que se note sin
   gritar. */
.card-offer-countdown{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:#fff;background:var(--red);border-radius:6px;padding:3px 9px;margin-top:5px;letter-spacing:.02em;animation:offer-pulse 1.6s ease-in-out infinite;}
@keyframes offer-pulse{0%{transform:scale(1);opacity:.55;}70%,100%{transform:scale(1.18,1.45);opacity:0;}}
.card-offer-countdown,.offer-countdown-digits{position:relative;animation:none;}
.card-offer-countdown::after,.offer-countdown-digits::after{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(226,75,74,.8);pointer-events:none;animation:offer-pulse 1.6s ease-out infinite;will-change:transform,opacity;}
.motion-reduced .card-offer-countdown::after,.motion-reduced .offer-countdown-digits::after{animation:none;opacity:0;}
@media (prefers-reduced-motion:reduce){.card-offer-countdown::after,.offer-countdown-digits::after{animation:none;opacity:0;}}

.card-help{display:flex;flex-direction:column;text-decoration:none;border-style:dashed;}
.card-help:hover{border-color:var(--gold);}
.card-help-media{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated-2);color:var(--gold);}
.card-help-media svg{width:28px;height:28px;}
.card-help .card-name{text-align:center;min-height:0;}
.card-help-cta{font-family:var(--font-mono);font-size:12.5px;color:var(--gold);font-weight:600;text-align:center;transition:transform .15s;}
.card-help:hover .card-help-cta{transform:translateX(3px);}

.pagination-links{margin-top:32px;}
.pagination-current{background:var(--gold);border-color:var(--gold);color:#0A0A0B;cursor:default;}
.pagination-ellipsis{color:var(--text-muted);padding:0 4px;user-select:none;}

/* Orden/filtro/paginación de la tienda ahora se piden por AJAX (ver
   public/js/shop-ajax.js) — mientras llega la respuesta se atenúa todo
   el bloque de resultados. Al llegar, el bloque en sí (contador, orden,
   filtro, paginación) entra con un fade suave, pero las cards del grid
   entran una por una en cascada — mucho más notorio que un solo fade
   parejo, y hace evidente que "esto es contenido nuevo" sin ser un
   golpe brusco. El delay de cada card es fijo por posición (12 reglas,
   una por producto de la página — coincide con el paginate(12) del
   controller) en vez de calculado, porque en CSS puro no hay forma de
   indexar "posición dentro del padre × un paso" sin JS. */
/* Entrada de la tienda: UNA sola animación y los mismos tiempos en todos
   los caminos -- primera carga, desde el inicio, el buscador o un link
   externo (.shop-first-enter, viene en el HTML de shop.blade.php, así que
   también cubre la navegación sin recarga de page-nav.js), cambio de
   filtro/orden (.shop-main-enter, shop-ajax.js) y scroll infinito
   (.card-enter, shop-infinite-scroll.js). Las tarjetas suben 18px y
   crecen del 97% al 100%; la cascada es corta (0,03 s entre una y otra,
   la última arranca a los 0,33 s) para que la tienda no parezca lenta. */
@keyframes shop-card-in{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes shop-head-in{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.page-head.shop-first-enter{opacity:0;animation:shop-head-in .45s cubic-bezier(.22,1,.36,1) forwards;}
.shop-first-enter .product-grid > .card,
.shop-main-enter .product-grid > .card,
.product-grid > .card.card-enter{opacity:0;animation:shop-card-in .45s cubic-bezier(.22,1,.36,1) forwards;}
.shop-first-enter .product-grid > .card:nth-child(1),.shop-main-enter .product-grid > .card:nth-child(1){animation-delay:0.03s;}
.shop-first-enter .product-grid > .card:nth-child(2),.shop-main-enter .product-grid > .card:nth-child(2){animation-delay:0.06s;}
.shop-first-enter .product-grid > .card:nth-child(3),.shop-main-enter .product-grid > .card:nth-child(3){animation-delay:0.09s;}
.shop-first-enter .product-grid > .card:nth-child(4),.shop-main-enter .product-grid > .card:nth-child(4){animation-delay:0.12s;}
.shop-first-enter .product-grid > .card:nth-child(5),.shop-main-enter .product-grid > .card:nth-child(5){animation-delay:0.15s;}
.shop-first-enter .product-grid > .card:nth-child(6),.shop-main-enter .product-grid > .card:nth-child(6){animation-delay:0.18s;}
.shop-first-enter .product-grid > .card:nth-child(7),.shop-main-enter .product-grid > .card:nth-child(7){animation-delay:0.21s;}
.shop-first-enter .product-grid > .card:nth-child(8),.shop-main-enter .product-grid > .card:nth-child(8){animation-delay:0.24s;}
.shop-first-enter .product-grid > .card:nth-child(9),.shop-main-enter .product-grid > .card:nth-child(9){animation-delay:0.27s;}
.shop-first-enter .product-grid > .card:nth-child(10),.shop-main-enter .product-grid > .card:nth-child(10){animation-delay:0.30s;}
.shop-first-enter .product-grid > .card:nth-child(n+11),.shop-main-enter .product-grid > .card:nth-child(n+11){animation-delay:.33s;}
/* Scroll infinito: las tarjetas nuevas esperan invisibles hasta que se
   ven en pantalla y ahí entran (ver shop-infinite-scroll.js). */
.product-grid > .card.card-pending{opacity:0;}
/* "Atrás"/"adelante": la tienda vuelve al instante, sin animación. */
.page-nav-instant .page-head.shop-first-enter,
.page-nav-instant .shop-first-enter .product-grid > .card,
.page-nav-instant .product-grid > .card.card-pending,
.page-nav-instant .product-grid > .card.card-enter{opacity:1;animation:none;}
.motion-reduced .page-head.shop-first-enter,
.motion-reduced .shop-first-enter .product-grid > .card,
.motion-reduced .shop-main-enter .product-grid > .card,
.motion-reduced .product-grid > .card.card-pending,
.motion-reduced .product-grid > .card.card-enter{opacity:1;animation:none;}
@media (prefers-reduced-motion:reduce){
  .page-head.shop-first-enter,.shop-first-enter .product-grid > .card,.shop-main-enter .product-grid > .card,
  .product-grid > .card.card-pending,.product-grid > .card.card-enter{opacity:1;animation:none;}
}
.shop-main-loading{opacity:.45;pointer-events:none;transition:opacity .2s ease;}
@keyframes shop-results-in{from{opacity:0;}to{opacity:1;}}
.shop-main-enter{animation:shop-results-in .3s ease-out;}


.motion-reduced .shop-main-enter,
.motion-reduced .shop-main-enter .product-grid > .card{animation:none;opacity:1;}
@media (prefers-reduced-motion:reduce){
  .shop-main-enter,
  .shop-main-enter .product-grid > .card{animation:none;opacity:1;}
}

/* Navegación sin recarga entre tienda y producto (ver
   public/js/page-nav.js) — atenuado breve mientras llega la página.
   En vez de que el <main> nuevo entre como un solo bloque con fade
   (se sentía "trabado", como una pausa seguida de un golpe), cada
   sección entra por separado con su propio delay — breadcrumb,
   galería, y cada pieza de la info del producto (título, precio,
   botones, descripción) una atrás de la otra, como si la página se
   fuera armando. Mismo criterio para cuando el destino es la tienda
   (mega-menú/footer/"ver todo el catálogo"): encabezado primero,
   cards del grid en cascada después. */
body.page-nav-loading main{opacity:.5;pointer-events:none;transition:opacity .2s ease;}
@keyframes page-nav-section-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

.page-nav-enter .breadcrumb,.page-nav-enter .product-back{opacity:0;animation:page-nav-section-in .4s ease-out forwards;}
.page-nav-enter .gallery{opacity:0;animation:page-nav-section-in .45s ease-out forwards;animation-delay:.05s;}
/* En celular la galería es el elemento más grande y prominente de la
   pantalla -- el mismo deslizamiento de 14px que se ve sutil en el
   resto de las secciones ahí se nota mucho más ("salta"). Aparece
   directo, sin la animación de entrada. Mismo motivo para
   .product-info: en celular es una sola columna angosta debajo de la
   galería, así que el título/precio/botones entrando uno atrás de
   otro (hasta ~0.8s en productos con más elementos) se ve como que
   "todo salta a su lugar" en vez del efecto sutil que es en desktop
   con la galería al lado. */
@media (max-width:680px){
  .page-nav-enter .gallery{opacity:1;animation:none;}
}

.page-nav-enter .product-info > *{opacity:0;animation:page-nav-section-in .4s ease-out forwards;}
.page-nav-enter .product-info > *:nth-child(1){animation-delay:.10s;}
.page-nav-enter .product-info > *:nth-child(2){animation-delay:.14s;}
.page-nav-enter .product-info > *:nth-child(3){animation-delay:.18s;}
.page-nav-enter .product-info > *:nth-child(4){animation-delay:.22s;}
.page-nav-enter .product-info > *:nth-child(5){animation-delay:.26s;}
.page-nav-enter .product-info > *:nth-child(6){animation-delay:.30s;}
.page-nav-enter .product-info > *:nth-child(7){animation-delay:.34s;}
.page-nav-enter .product-info > *:nth-child(8){animation-delay:.38s;}
.page-nav-enter .product-info > *:nth-child(n+9){animation-delay:.42s;}
/* Ver comentario de arriba (junto a .gallery) -- misma corrección,
   tiene que ir DESPUÉS de la regla sin media query de arriba: como
   ambas reglas apuntan al mismo selector con la misma especificidad,
   si esta va antes en el archivo, la de abajo (sin media query) gana
   siempre y la excepción de mobile queda pisada sin ningún error
   visible -- exactamente lo que pasó la primera vez que se escribió
   este bloque. */
@media (max-width:680px){
  .page-nav-enter .product-info > *{opacity:1;animation:none;}
}

.page-nav-enter .related{opacity:0;animation:page-nav-section-in .4s ease-out forwards;animation-delay:.46s;}



/* Las cards de "también te puede interesar" (ficha de producto) arrancan
   recién después de que termina de entrar toda la info del producto. */
.page-nav-enter .related .product-grid > .card{opacity:0;animation:shop-card-in .45s cubic-bezier(.22,1,.36,1) forwards;}
.page-nav-enter .related .product-grid > .card:nth-child(1){animation-delay:.46s;}
.page-nav-enter .related .product-grid > .card:nth-child(2){animation-delay:.50s;}
.page-nav-enter .related .product-grid > .card:nth-child(3){animation-delay:.54s;}
.page-nav-enter .related .product-grid > .card:nth-child(4){animation-delay:.58s;}
.page-nav-enter .related .product-grid > .card:nth-child(5){animation-delay:.62s;}
.page-nav-enter .related .product-grid > .card:nth-child(6){animation-delay:.66s;}

.motion-reduced .page-nav-enter *{animation:none !important;opacity:1 !important;}
@media (prefers-reduced-motion:reduce){.page-nav-enter *{animation:none !important;opacity:1 !important;}}

/* PRODUCT PAGE */
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding-top:8px;padding-bottom:60px;align-items:start;}
.gallery{position:sticky;top:90px;}
/* Sin display:flex a propósito -- la imagen ya llena la caja sola
   (width:100%;height:100%;object-fit:cover inline en product.blade.php),
   no necesita centrado. Esa combinación (aspect-ratio + flex
   centrando un <img> sin width/height nativos) es justo la que tiene
   más reportes de Safari/iOS calculando mal el alto reservado hasta
   que la imagen carga -- confirmado con un usuario real en iPhone
   viendo el salto solo ahí, nunca en desktop. Los width/height="800"
   del <img> (ver product.blade.php) son el respaldo real: le dan al
   navegador una relación de aspecto NATIVA (vía el width/height HTML,
   no solo CSS) antes de que aspect-ratio o la imagen en sí terminen
   de resolverse -- son valores arbitrarios (el recorte real lo hace
   object-fit:cover), solo importa que sean 1:1 igual que aspect-ratio. */
.gallery-main{position:relative;aspect-ratio:1/1;background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;overflow:hidden;cursor:zoom-in;}
/* Misma idea que .card-media de la tienda: la foto grande del producto
   podía "aparecer de golpe" en cuanto terminaba de bajar de la red.
   Shimmer de fondo mientras carga (reusa @keyframes card-img-shimmer,
   ya definido para las cards) + fade-in por opacity vía la misma clase
   is-loaded (puesta por markCardImageLoaded, ver product.blade.php).
   El selector es .gallery-main-img (no ".gallery-main img") a
   propósito, con la MISMA especificidad que .gallery-main-img.img-fading
   de más abajo -- así, estando esa regla más abajo en el archivo, sigue
   ganando durante un cambio de variante (fade a 0 aunque la imagen ya
   esté "cargada" de antes), y esta solo gobierna la carga inicial. */
.gallery-main:has(img):not(:has(img.is-loaded))::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg-elevated-2) 25%,var(--bg-elevated) 50%,var(--bg-elevated-2) 75%);background-size:200% 100%;animation:card-img-shimmer 1.4s ease-in-out infinite;}
.gallery-main-img{opacity:0;}
.gallery-main-img.is-loaded{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .gallery-main:has(img):not(:has(img.is-loaded))::before{animation:none;}
  .gallery-main-img{opacity:1;}
}
.motion-reduced .gallery-main:has(img):not(:has(img.is-loaded))::before{animation:none;}
.motion-reduced .gallery-main-img{opacity:1;}
/* Al cambiar de variante (o de miniatura, o la imagen de una edición
   rápida del admin), la foto principal se reemplaza de golpe — sin
   esto se siente como un salto brusco. No es un crossfade real
   (sigue siendo la misma etiqueta <img>, no se puede interpolar entre
   dos src distintos con CSS solo): primero se atenúa a 0 (.img-fading,
   puesta por JS), RECIÉN AHÍ — con la imagen ya invisible — se cambia
   el src (ver x-effect en product.blade.php, con un setTimeout que
   coincide con esta misma duración), y se saca la clase para que
   vuelva a aparecer. El primer intento usaba una animación con
   remove/reflow/add para "reiniciarla" en cada cambio, pero ese
   truco deja al elemento sin animación por un instante — en ese
   instante vuelve a su opacidad normal (visible) con el src TODAVÍA
   viejo, así que se veía un parpadeo de la foto anterior antes de
   pasar a la nueva. Con una transición simple de opacidad en vez de
   una animación por keyframes, no hace falta ningún truco de reinicio
   — y como el cambio de src ocurre recién cuando ya está en 0, nunca
   hay un frame con la foto vieja a opacidad completa.
   Los dos transition van en la MISMA regla a propósito: .gallery-main
   img (elemento+clase) tiene más especificidad que un .gallery-main-img
   suelto (una sola clase) — tenerlos separados hacía que esta regla
   pisara ENTERA la de opacidad de abajo (transition es shorthand, no
   se combinan) y el fade nunca se veía, cambiaba de golpe igual. */
.gallery-main img{transition:transform .2s ease,opacity .18s ease;}
.gallery-main:hover img{transform:scale(1.8);}
.gallery-main-img.img-fading{opacity:0;}
@media (prefers-reduced-motion: reduce){
  .gallery-main img{transition:none;}
  .gallery-main:hover img{transform:none;}
}
@media (hover:none){
  .gallery-main{cursor:default;}
  .gallery-main:hover img{transform:none;}
}
.gallery-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.gallery-thumb{width:64px;height:64px;padding:0;border-radius:10px;overflow:hidden;background:var(--bg-elevated);border:2px solid var(--border);cursor:pointer;transition:border-color .15s ease;flex-shrink:0;}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-thumb:hover{border-color:var(--border-strong);}
.gallery-thumb.active{border-color:var(--gold);}
.cat-eyebrow{font-family:var(--font-mono);font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;}
/* Antes era texto plano -- se notaba como una etiqueta, no como algo
   clickeable. El borde + fondo sutil al hover son la misma señal de
   "esto es un chip, no un dato" que ya usan .brand-filter-chip y
   .btn-outline-gold en las páginas de marca -- acá con menos peso
   visual (más chico, borde apenas visible en reposo) porque es un
   link secundario en medio de la ficha, no una acción principal. */
.product-brand-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.04em;margin:-2px 0 10px;padding:7px 14px;border:1px solid var(--border);border-radius:100px;text-decoration:none;transition:color .15s,border-color .15s,background-color .15s;}
.product-brand-link:hover{color:var(--gold);border-color:var(--gold);background-color:var(--gold-dim);}
.product-brand-link-arrow{display:inline-block;transition:transform .2s ease;}
.product-brand-link:hover .product-brand-link-arrow{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){.product-brand-link:hover .product-brand-link-arrow{transform:none;}}
.motion-reduced .product-brand-link:hover .product-brand-link-arrow{transform:none;}
.product-info h1{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,36px);letter-spacing:-0.01em;line-height:1.15;margin-bottom:14px;}
.variant-options{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.variant-swatch{padding:8px 16px;border-radius:100px;border:1px solid var(--border);background:var(--bg-elevated);cursor:pointer;font-size:13px;transition:border-color .15s,background .15s,color .15s,transform .15s;}
.variant-swatch:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.variant-swatch.selected{border-color:var(--gold);background:var(--gold-dim);color:var(--gold);}
.variant-swatch.out-of-stock{opacity:.4;cursor:not-allowed;text-decoration:line-through;}
.variant-swatch.out-of-stock:hover{border-color:var(--border);transform:none;}
.price-block{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:24px;}
.currency-toggle{position:relative;display:inline-flex;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:100px;padding:3px;gap:2px;width:132px;}
.currency-toggle .toggle-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:var(--gold);border-radius:100px;z-index:0;}
.currency-toggle .toggle-thumb.at-usd{transform:translateX(0%);}
.currency-toggle .toggle-thumb.at-bob{transform:translateX(100%);}
.currency-toggle .toggle-thumb.to-bob{animation:drop-to-bob .5s cubic-bezier(.4,0,.2,1) forwards;}
.currency-toggle .toggle-thumb.to-usd{animation:drop-to-usd .5s cubic-bezier(.4,0,.2,1) forwards;}

@keyframes drop-to-bob{
  0%{transform:translateX(0%) scaleX(1);border-radius:100px;}
  45%{transform:translateX(45%) scaleX(1.35);border-radius:45% 55% 55% 45% / 60% 60% 40% 40%;}
  100%{transform:translateX(100%) scaleX(1);border-radius:100px;}
}
@keyframes drop-to-usd{
  0%{transform:translateX(100%) scaleX(1);border-radius:100px;}
  45%{transform:translateX(55%) scaleX(1.35);border-radius:55% 45% 45% 55% / 60% 60% 40% 40%;}
  100%{transform:translateX(0%) scaleX(1);border-radius:100px;}
}
.currency-toggle button{position:relative;z-index:1;flex:1;font-family:var(--font-mono);font-size:12px;font-weight:600;padding:7px 0;border-radius:100px;border:none;background:none;color:var(--text-muted);cursor:pointer;transition:color .3s;}
.currency-toggle button.active{color:#0A0A0B;}
.currency-toggle button:not(.active):hover{color:var(--text-secondary);}
.price-main{font-family:var(--font-mono);font-size:38px;font-weight:500;color:var(--gold);line-height:1;}
.price-original{font-family:var(--font-mono);font-size:17px;color:var(--text-muted);text-decoration:line-through;}

/* Contador grande de la página de producto — dígitos propios en vez de
   una sola línea de texto, con el mismo pulso rojo de urgencia que la
   versión chica de las tarjetas (ver .card-offer-countdown). */
.offer-countdown{margin-top:12px;}
.offer-countdown-label{display:block;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
/* display:inline-flex (no flex) a propósito: flex es block-level y se
   estira a todo el ancho del padre — el pulso (box-shadow) entonces
   dibujaba su brillo alrededor de esa caja invisible entera, dejando
   un hueco vacío con borde a la derecha de los dígitos reales. Con
   inline-flex el contenedor mide justo lo que ocupan los 4 dígitos. */
.offer-countdown-digits{display:inline-flex;align-items:center;gap:6px;border-radius:12px;}
.offer-countdown-seg{display:flex;flex-direction:column;align-items:center;background:rgba(226,75,74,.14);border:1px solid var(--red);border-radius:10px;padding:8px 12px;min-width:54px;}
.offer-countdown-seg span{font-family:var(--font-mono);font-size:26px;font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums;}
.offer-countdown-seg small{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-top:4px;}
.offer-countdown-colon{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--red);animation:offer-blink 1s step-start infinite;}
@keyframes offer-blink{50%{opacity:.2;}}
.motion-reduced .offer-countdown-digits,.motion-reduced .offer-countdown-colon{animation:none;}
@media (prefers-reduced-motion:reduce){.offer-countdown-digits,.offer-countdown-colon{animation:none;}}
@media (max-width:520px){
  .offer-countdown-seg{min-width:44px;padding:6px 8px;}
  .offer-countdown-seg span{font-size:20px;}
}
.price-alt{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);margin-top:8px;}
.price-main.price-flash,.price-alt.price-flash{animation:price-flash .25s ease;}
@keyframes price-flash{0%{opacity:.35;}100%{opacity:1;}}

/* Carrete al cambiar de moneda o variante (ver reelPrice() en
   product.blade.php) — solo los caracteres que realmente cambian de
   valor se arman con dos fotogramas apilados (viejo arriba, nuevo ya
   esperando debajo) adentro de una celda recortada, y un translateY
   los desliza para revelar el de abajo. Los que se repiten entre el
   valor viejo y el nuevo (un punto, un dígito igual) quedan como texto
   plano, sin animar — así se siente que cada número reacciona por su
   cuenta y no que todo el precio se mueve junto como una sola imagen. */
.price-text{display:inline-block;}
.char-cell{display:inline-block;}
.reel-cell{overflow:hidden;height:1em;line-height:1;vertical-align:top;}
.reel-track{display:flex;flex-direction:column;}
.reel-frame{height:1em;line-height:1;}
.reel-cell.is-reeling .reel-track{animation:reel-slide .46s cubic-bezier(.5,0,.25,1) forwards;}
@keyframes reel-slide{from{transform:translateY(0);}to{transform:translateY(-1em);}}
.motion-reduced .reel-cell.is-reeling .reel-track{animation:none;}
@media (prefers-reduced-motion:reduce){.reel-cell.is-reeling .reel-track{animation:none;}}
.btn-cta{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:#0A0A0B;font-weight:600;font-size:15px;padding:16px;border-radius:100px;border:1px solid var(--gold);cursor:pointer;width:100%;margin-bottom:24px;text-decoration:none;transition:background .15s,color .15s,border-color .15s;}
.btn-cta:hover{background:#e6c400;}
.btn-cta.in-cart{background:var(--bg-elevated-2);color:var(--gold);border-color:var(--border-strong);}
.btn-cta.in-cart:hover{border-color:var(--red);color:var(--red);}
.btn-cta.btn-cta-added{animation:btn-cta-added-pop .45s ease;}
@keyframes btn-cta-added-pop{
  0%{transform:scale(1);}
  35%{transform:scale(1.06);background:var(--green);border-color:var(--green);color:#0A0A0B;}
  100%{transform:scale(1);}
}
.motion-reduced .btn-cta.btn-cta-added{animation:none;}
.btn-cta:disabled{background:var(--bg-elevated-2);color:var(--text-muted);border-color:var(--border);cursor:not-allowed;}
.btn-cta:disabled:hover{background:var(--bg-elevated-2);}

/* Barra fija de compra (mobile) -- ver product-sticky-buybar.js. Aparece
   con un IntersectionObserver sobre .btn-cta-row (el botón real, más
   arriba en la página) en vez de calcular scroll a mano. Oculta con
   display:none en desktop directamente -- no tiene sentido en una
   pantalla donde el botón real casi siempre está a la vista. */
.sticky-buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:210;
  display:none;align-items:center;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background:var(--bg-elevated);border-top:1px solid var(--border);
  box-shadow:0 -8px 30px rgba(0,0,0,.35);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.sticky-buybar.is-visible{transform:translateY(0);}
.motion-reduced .sticky-buybar{transition:none;}
.sticky-buybar-info{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.sticky-buybar-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--bg-elevated-2);}
.sticky-buybar-text{display:flex;flex-direction:column;min-width:0;}
.sticky-buybar-name{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.sticky-buybar-price{font-size:15px;font-weight:700;color:var(--text-primary);}
.sticky-buybar-btn{width:auto;flex-shrink:0;margin:0;padding:14px 22px;white-space:nowrap;}
@media (max-width:768px){.sticky-buybar{display:flex;}}

/* Con la barra visible, la tarjeta de "tasa del día" se corre hacia
   arriba para no quedar tapada -- las dos conviven en el mismo rango de
   pantallas (mobile). 68px ≈ alto real de la barra + su padding. */
body.has-sticky-buybar .exchange-rate-float{bottom:calc(20px + 68px);transition:bottom .3s cubic-bezier(.22,1,.36,1);}

.stock-alert-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.stock-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:100px;}
.stock-pill.out-of-stock{background:rgba(226,75,74,.1);color:var(--red);border:1px solid rgba(226,75,74,.25);}
.stock-pill.is-hidden{display:none;}

.stock-notify{display:inline-flex;}

/* Campanita compacta -- el ícono solo (círculo de 32px) hasta que se
   pasa el mouse o se enfoca con el teclado, ahí se expande para
   revelar la etiqueta con un ease tipo "liquid" (mismo espíritu que el
   buscador líquido del header). En touch (sin hover real) queda
   expandida siempre, ver el @media más abajo -- si no, nadie en
   celular se enteraría de que el ícono hace algo. */
.stock-bell-btn{display:inline-flex;align-items:center;height:32px;padding:0;border-radius:100px;background:var(--gold-dim);border:1px solid var(--gold);color:var(--gold);cursor:pointer;text-decoration:none;overflow:hidden;transition:background .2s ease,color .2s ease,padding-right .35s cubic-bezier(.22,1,.36,1);}
.stock-bell-btn:hover,.stock-bell-btn:focus-visible{background:var(--gold);color:#0A0A0B;padding-right:14px;}
.stock-bell-btn:hover .stock-bell-label,.stock-bell-btn:focus-visible .stock-bell-label{max-width:260px;opacity:1;margin-left:2px;}
.stock-bell-btn:disabled{cursor:default;}
.stock-bell-btn.is-subscribed{background:rgba(61,220,132,.1);border-color:rgba(61,220,132,.25);color:var(--green);}
.stock-bell-btn.is-subscribed:hover,.stock-bell-btn.is-subscribed:focus-visible{background:rgba(61,220,132,.16);color:var(--green);}
.stock-bell-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;}
.stock-bell-icon svg{display:block;transform-origin:50% 25%;}
.stock-bell-btn:hover .stock-bell-icon svg,.stock-bell-btn:focus-visible .stock-bell-icon svg{animation:stock-bell-ring .5s ease;}
.motion-reduced .stock-bell-icon svg{animation:none !important;}
@keyframes stock-bell-ring{
  0%,100%{transform:rotate(0);}
  15%{transform:rotate(14deg);}
  30%{transform:rotate(-11deg);}
  45%{transform:rotate(7deg);}
  60%{transform:rotate(-5deg);}
  75%{transform:rotate(2deg);}
}
.stock-bell-label{display:inline-block;max-width:0;opacity:0;white-space:nowrap;overflow:hidden;font-size:13px;font-weight:600;margin-left:0;transition:max-width .35s cubic-bezier(.22,1,.36,1),opacity .2s ease,margin-left .35s cubic-bezier(.22,1,.36,1);}

/* Sin hover real (celular/tablet) -- el texto queda desplegado siempre,
   descubrirlo pasando el mouse no es una opción ahí. */
@media (hover:none){
  .stock-bell-btn{padding-right:14px;}
  .stock-bell-label{max-width:260px;opacity:1;margin-left:8px;}
}

.btn-cta-row{display:flex;gap:10px;margin-bottom:24px;}
.btn-cta-row .btn-cta{margin-bottom:0;flex:1;min-width:0;}
.btn-cta-whatsapp{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;background:none;border:1px solid var(--border);color:var(--text-primary);font-weight:600;font-size:15px;padding:16px;border-radius:100px;cursor:pointer;text-decoration:none;transition:border-color .15s,color .15s,background .15s,transform .15s;}
.btn-cta-whatsapp svg{color:#25D366;flex-shrink:0;}
.btn-cta-whatsapp:hover{border-color:var(--gold);color:var(--gold);background:var(--bg-elevated);transform:translateY(-1px);}

.btn-cta-favorite-wrap{position:relative;flex:0 0 54px;}
.btn-cta-favorite{display:flex;align-items:center;justify-content:center;width:54px;height:100%;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);border-radius:100px;cursor:pointer;transition:border-color .15s,color .15s,background .15s,transform .15s;}
.btn-cta-favorite:hover{border-color:var(--red);color:var(--red);background:rgba(226,75,74,.08);transform:translateY(-1px);}
.btn-cta-favorite.is-favorited{border-color:var(--red);color:var(--red);background:rgba(226,75,74,.1);}
.btn-cta-favorite.is-favorited svg{fill:var(--red);}
.btn-cta-favorite.is-popping{animation:btn-cta-favorite-pop .4s ease;}
@keyframes btn-cta-favorite-pop{
  0%{transform:scale(1);}
  30%{transform:scale(.85);}
  55%{transform:scale(1.25);}
  100%{transform:scale(1);}
}
.motion-reduced .btn-cta-favorite.is-popping{animation:none;}
@media (max-width:520px){
  .btn-cta-favorite-wrap{flex:0 0 48px;}
  .btn-cta-favorite{width:48px;}
}

/* Aviso de "hace falta cuenta" para un visitante sin sesión -- el
   primer click en el corazón ya no manda derecho a /ingresar sin decir
   nada, muestra esto primero (ver el @click del botón en product.blade.php). */
.btn-cta-favorite-hint{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:12.5px;color:var(--text-secondary);white-space:nowrap;box-shadow:0 12px 28px rgba(0,0,0,.4);z-index:5;}
.btn-cta-favorite-hint::after{content:'';position:absolute;bottom:100%;right:18px;border:6px solid transparent;border-bottom-color:var(--bg-elevated-2);}
.btn-cta-favorite-hint a{display:inline-block;margin-left:6px;color:var(--gold);font-weight:600;text-decoration:none;}
.btn-cta-favorite-hint a:hover{text-decoration:underline;}

@media (max-width:520px){
  .btn-cta-row{flex-direction:column;}
}

.product-description{color:var(--text-secondary);font-size:15px;line-height:1.7;margin-bottom:24px;}
.product-description p{margin:0 0 12px;}
.product-description ul,.product-description ol{margin:0 0 12px;padding-left:20px;}
.product-description li{margin-bottom:4px;}
.product-description h1,.product-description h2,.product-description h3,.product-description h4,.product-description h5,.product-description h6{font-family:var(--font-display);color:var(--text-primary);margin:18px 0 8px;font-size:16px;font-weight:600;}
.product-description strong{color:var(--text-primary);}
.product-description img{max-width:100%;height:auto;border-radius:8px;margin:8px 0;}
.product-description a{color:var(--gold);}
.product-description table{width:100%;border-collapse:collapse;margin:0 0 12px;}
.product-description table td,.product-description table th{padding:8px 10px;border-bottom:1px solid var(--border);font-size:13.5px;}

.admin-toggle-row{display:flex;gap:10px;flex-wrap:wrap;}
.admin-edit-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border);color:var(--text-secondary);font-family:var(--font-mono);font-size:12px;padding:7px 16px;border-radius:100px;cursor:pointer;margin-bottom:16px;transition:border-color .15s,color .15s,background .15s;}
.admin-edit-toggle:hover{border-color:var(--gold);color:var(--gold);}
.admin-edit-toggle.is-active{border-color:var(--gold);color:var(--gold);background:rgba(255,217,0,.08);}
.admin-edit-input{width:100%;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);padding:10px 12px;font-family:inherit;transition:border-color .15s;}
.admin-edit-input:focus{outline:none;border-color:var(--gold);}
.admin-edit-input-name{font-family:var(--font-display);font-size:clamp(24px,3.4vw,34px);font-weight:700;margin-bottom:16px;}
.admin-edit-price-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.admin-edit-price-row .admin-edit-input{width:140px;font-family:var(--font-mono);font-size:18px;color:var(--gold);}
.admin-edit-currency-label{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);}
.admin-edit-textarea{min-height:140px;resize:vertical;font-size:13.5px;line-height:1.6;margin-bottom:12px;}
.admin-edit-actions{display:flex;gap:10px;}
.admin-edit-save{background:var(--gold);color:#0A0A0B;border:none;font-weight:600;font-size:14px;padding:11px 22px;border-radius:100px;cursor:pointer;transition:transform .15s,opacity .15s;}
.admin-edit-save:hover:not(:disabled){transform:translateY(-1px);}
.admin-edit-save:disabled{opacity:.6;cursor:default;}
.admin-edit-cancel{background:none;border:1px solid var(--border);color:var(--text-secondary);font-size:14px;padding:11px 22px;border-radius:100px;cursor:pointer;transition:border-color .15s,color .15s;}
.admin-edit-cancel:hover:not(:disabled){border-color:var(--text-primary);color:var(--text-primary);}
.admin-edit-image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,11,.6);border-radius:20px;color:#fff;font-family:var(--font-mono);font-size:13px;cursor:pointer;opacity:0;transition:opacity .2s;}
.gallery-main:hover .admin-edit-image-overlay,.admin-edit-image-overlay:hover{opacity:1;}

/* Switch "En oferta" del editor rápido — misma técnica que el switch
   del panel admin, pero como clase propia acá porque esta página no
   carga admin.css (es la ficha pública, el editor solo se ve si el
   que mira está logueado como admin). */
.admin-edit-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:14px;}
.admin-edit-switch input{position:absolute;opacity:0;width:1px;height:1px;}
.admin-edit-switch-track{position:relative;display:inline-block;width:40px;height:23px;border-radius:100px;background:var(--bg-elevated-2);border:1px solid var(--border);flex-shrink:0;transition:background .15s,border-color .15s;}
.admin-edit-switch-track::before{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--text-muted);transition:transform .18s ease,background .15s;}
.admin-edit-switch input:checked + .admin-edit-switch-track{background:var(--gold-dim);border-color:var(--gold);}
.admin-edit-switch input:checked + .admin-edit-switch-track::before{transform:translateX(17px);background:var(--gold);}
.admin-edit-switch-label{font-size:13.5px;color:var(--text-secondary);}
.admin-edit-offer-fields{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:-4px 0 14px;}
.admin-edit-offer-fields .admin-edit-input{width:140px;}
.admin-edit-offer-row{display:flex;gap:8px;align-items:center;}
.admin-edit-offer-fields .admin-edit-input.admin-edit-input-pct{width:90px;}
.admin-edit-bob{position:relative;display:flex;align-items:center;}
.admin-edit-bob > span{position:absolute;left:10px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);pointer-events:none;}
.admin-edit-offer-fields .admin-edit-input.admin-edit-input-bob{width:120px;padding-left:30px;}
.admin-edit-bob.is-on .admin-edit-input-bob{border-color:var(--gold);}
.admin-edit-offer-hint{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);}
.admin-edit-error{color:var(--red);font-size:12.5px;margin:-8px 0 14px;}
/* Edición rápida de un producto con variantes: precio y stock por variante */
.admin-edit-variants{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-elevated);}
.admin-edit-variants-head,.admin-edit-variant-row{display:grid;grid-template-columns:minmax(0,1fr) 130px 64px;gap:10px;align-items:center;}
.admin-edit-variants-head{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.admin-edit-variants-head span:last-child{text-align:center;}
.admin-edit-variant-name{font-size:14px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-edit-variant-row .admin-edit-input{padding:8px 10px;font-family:var(--font-mono);font-size:14px;color:var(--gold);}
.admin-edit-variant-row .admin-edit-input::placeholder{color:var(--text-muted);font-size:12px;}
.admin-edit-switch.admin-edit-switch-compact{margin:0;justify-self:center;}
.admin-edit-price-row .admin-edit-offer-hint{flex:1;min-width:160px;}
.admin-edit-offer-preview{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);}
.admin-edit-offer-preview strong{color:var(--text-secondary);font-weight:600;}
.admin-edit-offer-preview > span:first-child{flex-basis:100%;}

/* El navegador dibuja las flechitas de un input[type=number] con su
   propio estilo del sistema operativo, sin importar el tema — nada de
   controles "por defecto" en el sitio, así que se ocultan y el campo
   queda como un input de texto común. */
.admin-edit-input[type=number]{-moz-appearance:textfield;}
.admin-edit-input[type=number]::-webkit-inner-spin-button,
.admin-edit-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

.spec-table{width:100%;border-collapse:collapse;}
.spec-table tr{border-bottom:1px solid var(--border);}
.spec-table td{padding:12px 16px;font-size:14px;}
.spec-table td:first-child{font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted);width:220px;}

/* Resumen de calificación bajo el título -- link a #resenas más abajo
   en la misma página. */
.product-rating-summary{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:13.5px;text-decoration:none;margin:-4px 0 14px;}
.product-rating-summary:hover{color:var(--text-primary);}
.product-rating-stars{color:var(--gold);font-size:14px;letter-spacing:1px;}

.form-hint{color:var(--text-secondary);font-size:13.5px;line-height:1.5;}
.product-reviews{padding:40px 0 60px;border-top:1px solid var(--border);margin-top:10px;}
.product-reviews h2{font-family:var(--font-display);font-weight:600;font-size:22px;margin-bottom:20px;}
.product-reviews-count{color:var(--text-muted);font-weight:400;font-size:16px;}

/* Calificación (promedio + barras) a la izquierda, comentarios a la
   derecha -- una sola columna en mobile (el resumen arriba, las
   reseñas debajo, en ese orden por el HTML). */
.product-reviews-columns{display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:768px){
  .product-reviews-columns{grid-template-columns:minmax(240px,340px) 1fr;align-items:start;}
}

/* Resumen (promedio + barras 5★-1★) -- pensado tanto para un producto
   con 0-1 reseñas (el promedio ya se ve completo, las barras quedan en
   0% sin verse rotas) como para uno con muchas (de un vistazo se ve la
   distribución sin tener que leer la lista entera). */
.product-reviews-summary{display:flex;flex-direction:column;gap:18px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:20px 24px;}
.product-reviews-avg{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;}
.product-reviews-avg-number{font-family:var(--font-display);font-size:36px;font-weight:700;line-height:1;color:var(--text-primary);}
.product-reviews-avg-count{color:var(--text-muted);font-size:12.5px;}
.product-reviews-bars{display:flex;flex-direction:column;gap:6px;}
.product-reviews-bar-row{display:grid;grid-template-columns:26px 1fr 22px;align-items:center;gap:10px;font-size:12px;color:var(--text-secondary);}
.product-reviews-bar-track{height:7px;background:var(--bg-elevated-2);border-radius:4px;overflow:hidden;}
.product-reviews-bar-fill{display:block;height:100%;background:var(--gold);border-radius:4px;}
.product-reviews-bar-count{text-align:right;color:var(--text-muted);}

.product-reviews-list{display:flex;flex-direction:column;gap:18px;margin-bottom:16px;}
.product-review{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.product-review-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13.5px;}
.product-review-date{color:var(--text-muted);font-size:12px;margin-left:auto;}
.product-review p{color:var(--text-secondary);font-size:14.5px;line-height:1.6;margin:0;}

/* Moderación de reseñas visible solo para staff logueado (ver
   $isStaffViewer en product.blade.php) -- mismas rutas admin.reviews.*
   de siempre, esto es solo un atajo visual desde la ficha pública. */
.product-reviews-pending{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);}
.product-review-pending{border-color:var(--gold);border-style:dashed;}
.product-review-mod-actions{display:flex;gap:8px;margin-top:12px;}
.product-review-mod-actions form{margin:0;}

/* Botón "Mostrar más reseñas" -- solo aparece si de verdad hay más de
   las que ya se ven (ver x-show="visible < reviews.length" en la
   vista), así con 0 o 1 reseña ni siquiera se monta visible. */
.product-reviews-more{display:flex;margin:0 auto 24px;}

/* Formulario de reseña -- namespaced bajo .product-reviews porque
   .form-group/.error son nombres genéricos que este layout público no
   define (solo existen hoy en admin.css, que esta página no carga). */
.product-reviews .form-group{margin-bottom:16px;}
.product-reviews .form-group label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:6px;}
.product-reviews .form-group textarea{width:100%;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text-primary);font-size:14px;outline:none;resize:vertical;transition:border-color .15s;}
.product-reviews .form-group textarea:focus{border-color:var(--gold);}
.product-reviews .error{color:var(--red);font-size:12.5px;margin-top:5px;}
.product-review-star-input{display:flex;gap:4px;}
.product-review-star-input button{background:none;border:none;color:var(--gold);font-size:26px;line-height:1;cursor:pointer;padding:2px;}

/* Dashboard de "Mi cuenta" -- la card de perfil (.admin-login-card,
   de admin.css) queda fija y angosta a la izquierda; el dashboard usa
   el espacio que sobra. En una sola columna abajo de la card en mobile. */
.account-page{display:flex;gap:28px;align-items:flex-start;max-width:1080px;width:100%;padding:0 20px;flex-wrap:wrap;}
.account-page .admin-login-card{flex:0 0 380px;}
.account-dashboard{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:24px;}
.account-dashboard-section{background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;padding:24px;}
.account-dashboard-section h2{font-family:var(--font-display);font-weight:600;font-size:17px;margin:0 0 14px;}
.account-dashboard-section h2 span{color:var(--text-muted);font-weight:400;font-size:14px;}

.account-favorites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;}
.account-favorite-item a{display:block;text-decoration:none;color:inherit;}
.account-favorite-item img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--bg-elevated-2);border-radius:12px;margin-bottom:8px;}
.account-favorite-item a:not(:has(img))::before{content:'';display:block;aspect-ratio:1/1;background:var(--bg-elevated-2);border-radius:12px;margin-bottom:8px;}
.account-favorite-name{font-size:12.5px;color:var(--text-primary);line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.account-favorite-price{font-family:var(--font-mono);font-size:12.5px;color:var(--gold);font-weight:600;}
.account-favorite-remove{display:block;width:100%;margin-top:8px;background:none;color:var(--text-muted);border:1px solid var(--border);border-radius:100px;font-size:11px;padding:5px 0;cursor:pointer;}
.account-favorite-remove:hover{border-color:var(--red);color:var(--red);}

.account-list{display:flex;flex-direction:column;gap:2px;}
.account-list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border);}
.account-list-item:last-child{border-bottom:none;}
.account-list-title{font-size:14px;color:var(--text-primary);}
.account-list-meta{font-size:12px;color:var(--text-muted);margin-top:2px;}

.related{padding-bottom:100px;}
.related h2{font-family:var(--font-display);font-weight:600;font-size:22px;margin-bottom:22px;}

/* "También te puede interesar" y "Seguí viendo" traen hasta 6 productos
   (ver ShopController::show()) -- el .product-grid genérico de arriba
   (flex-wrap con piso de 220px por card) reparte columnas según cuántas
   entren en el ancho disponible, que con 6 items no siempre es un
   número parejo (ej. entran 5 en la fila y el 6to queda solo, huérfano,
   en una fila aparte). Acá se fija la cantidad de columnas en vez de
   dejarla flotar, y en las tres SOLO se usan divisores de 6 (2, 3, 6) —
   así 6 productos siempre completan filas enteras, nunca sobra uno solo. */
.related .product-grid{display:grid;grid-template-columns:repeat(2,1fr);}
.related .product-grid > .card{flex:none;max-width:none;}
@media (min-width:768px){
  .related .product-grid{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1280px){
  .related .product-grid{grid-template-columns:repeat(6,1fr);}
}

/* Aparición al scrollear (public/js/scroll-reveal.js pone .is-revealed
   vía IntersectionObserver) — [data-reveal-group] arma el stagger de
   sus hijos directos sola, ver ese script.

   El estado oculto (opacity:0) solo se activa bajo .reveal-armed, una
   clase que el propio script agrega a <html> recién cuando confirma que
   el IntersectionObserver quedó armado y va a poder revelar todo de
   vuelta. Si el script no llega a correr (falla de red, JS
   deshabilitado, un error previo en la página), .reveal-armed nunca se
   agrega y [data-reveal] queda en su opacidad normal desde el
   principio — progressive enhancement real, no "esconder y confiar en
   que JS lo arregle". */
/* Easing tipo "spring" (stiffness 200 / damping 14 / mass 1) generado
   como linear() -- sub-amortiguado a propósito (ratio ~0.5): pasa
   ~17% de largo (unos 4px de los 24px) antes de asentarse, para que
   el rebote se sienta de verdad. Con damping 40 el resorte quedaba
   sobre-amortiguado (sin rebote, indistinguible del cubic-bezier de
   antes) y con damping 20 el overshoot era de ~1px, imperceptible. La
   duración (0.8s) es la que le corresponde a estos valores -- si se
   cambian stiffness/damping hay que volver a generar los puntos Y
   actualizar el setTimeout de seguridad en scroll-reveal.js, que
   asume este total. */
.reveal-armed [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s linear(0,0.0167,0.0623,0.1305,0.2152,0.3108,0.4125,0.5158,0.6172,0.7137,0.8031,0.8836,0.9541,1.0141,1.0635,1.1024,1.1313,1.1511,1.1626,1.1669,1.1651,1.1582,1.1474,1.1337,1.118,1.1011,1.0839,1.0668,1.0505,1.0354,1.0217,1.0096,0.9993,0.9907,0.9839,0.9788,0.9752,0.9731,0.9722,0.9723,0.9733,0.975,0.9772,0.9798,0.9826,0.9855,0.9883,0.9911,0.9937,0.996,0.9981,0.9998,1.0013,1.0025,1.0034,1.0041,1.0044,1.0046,1.0046,1.0045,1),transform .8s linear(0,0.0167,0.0623,0.1305,0.2152,0.3108,0.4125,0.5158,0.6172,0.7137,0.8031,0.8836,0.9541,1.0141,1.0635,1.1024,1.1313,1.1511,1.1626,1.1669,1.1651,1.1582,1.1474,1.1337,1.118,1.1011,1.0839,1.0668,1.0505,1.0354,1.0217,1.0096,0.9993,0.9907,0.9839,0.9788,0.9752,0.9731,0.9722,0.9723,0.9733,0.975,0.9772,0.9798,0.9826,0.9855,0.9883,0.9911,0.9937,0.996,0.9981,0.9998,1.0013,1.0025,1.0034,1.0041,1.0044,1.0046,1.0046,1.0045,1);}
[data-reveal].is-revealed{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal-armed [data-reveal]{opacity:1;transform:none;transition:none;}
}
.motion-reduced [data-reveal]{opacity:1;transform:none;transition:none;}

/* Scroll con inercia (Lenis, ver public/js/smooth-scroll.js) -- estas
   clases solo existen en <html> cuando Lenis está corriendo, así que
   nada de esto aplica en celulares ni con el ajuste apagado. */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:clip;}
/* Un iframe (mapa de Google) se "come" la rueda si el cursor pasa por
   encima en pleno scroll -- mientras se scrollea, deja pasar los eventos. */
.lenis.lenis-scrolling iframe{pointer-events:none;}

@media (max-width:960px){
  .product-hero{grid-template-columns:1fr;}
  .gallery{position:static;top:auto;}
  /* Sin este tope, la galería pasa a ocupar TODO el ancho del
     contenedor al apilarse -- en celular eso ya es angosto de por sí,
     pero en tablet (768-960px) el ancho disponible es mucho mayor y la
     foto termina gigante, más grande de lo que se ve bien.
     width:100% es a propósito, no solo estético: un grid item con
     max-width + margin-inline:auto pero SIN width explícito deja de
     estirarse para llenar su columna y pasa a medirse por su propio
     contenido (shrink-to-fit) -- con aspect-ratio en la foto de
     adentro, eso significa que el ancho de la galería dependía de
     cuánto ya se hubiera resuelto esa foto, dejándola angosta/chica
     hasta que la imagen terminaba de cargar y recién ahí "saltaba" al
     ancho real. Confirmado por dos usuarios reales (iPhone/Safari Y
     Android/Chrome, nunca en desktop -- esta regla es solo de acá,
     @media max-width:960px). Con width:100% la columna se estira
     siempre hasta el tope de 480px, sin depender de la foto. */
  .gallery{width:100%;max-width:480px;margin-inline:auto;}
}

/* Subido de 860px a 1480px -- el nav completo (logo + los links de
   .nav-home-link + los 400px fijos del buscador + los íconos de la
   derecha) mide bastante más que 860px de ancho real (medido en el
   navegador: a partir de ~1400px ya no entra), así que entre 860 y
   ~1400px el "Contacto"/último link terminaba pintado ENCIMA del
   buscador en vez de respetar el layout -- se veía en cualquier laptop
   angosta o con el zoom de Chrome apenas subido, no hacía falta llegar
   a un celular. 1480px dejaba margen sobre esa medición real.
   Bajado a 1024px: una laptop de 14" con la escala de Windows al 150%
   mide 1280px de ancho real y caía en la versión tablet (sin la barra
   de categorías). Entre 1025 y 1480px el header ahora se acomoda en una
   fila flexible (ver el bloque "Laptops" de abajo) en vez de achicarse
   a hamburguesa. */
@media (max-width:1024px){
  .hamburger{display:flex;}
  nav > .wrap > .search-wrap{display:none;}
  .nav-inner{display:flex;justify-content:space-between;gap:10px;}
  .nav-left{gap:10px;}
  .cat-float{display:none;}
  .nav-home-link{display:none;}
  .nav-inner .logo-full{height:36px;}
  .nav-inner .btn-gold{display:none;}
  .nav-inner .btn-outline-gold{display:none;}
  .nav-actions{gap:10px;}
}

/* Laptops (1025–1480px de ancho real): el grid simétrico del header
   (1fr auto 1fr) reservaba a la derecha el mismo ancho que el logo + links
   de la izquierda y no entraba. En fila flexible sí: logo un poco más
   chico y buscador que se angosta lo justo. */
@media (min-width:1025px) and (max-width:1480px){
  nav{--nav-logo-h:min(var(--logo-height, 60px), 46px);}
  .nav-inner{display:flex;align-items:center;gap:20px;}
  .nav-left{gap:20px;flex:0 0 auto;}
  .nav-links-wrap{gap:20px;}
  nav > .wrap > .search-wrap{flex:1 1 360px;width:auto;min-width:200px;max-width:400px;margin-inline:auto;}
  .nav-actions{gap:12px;}
  /* La barra de categorías flotante (left:14px, 48px de ancho) quedaba
     encima del contenido: se le deja su lugar a la izquierda. */
  body:has(.cat-float:not([style*="none"])) main .wrap{padding-left:max(clamp(20px, 3.2vw, 48px), 78px);}
}

/* CART */
.cart-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:none;color:var(--text-primary);cursor:pointer;}
.cart-badge{position:absolute;top:0;right:0;background:var(--gold);color:#0A0A0B;font-family:var(--font-mono);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.cart-badge.pulse{animation:badge-pulse .35s ease;}
@keyframes badge-pulse{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}

.cart-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:300;}
.cart-drawer{position:fixed;top:0;bottom:0;right:0;width:min(360px,90vw);background:var(--bg-elevated);border-left:1px solid var(--border);z-index:310;transform:translateX(100%);transition:transform .3s cubic-bezier(.65,0,.35,1);overflow-y:auto;padding:20px;display:flex;flex-direction:column;}
.cart-drawer.open{transform:translateX(0);}
/* El panel ocupa todo el alto: la lista scrollea y el resumen (total +
   botones) queda pegado abajo, como en cualquier checkout. */
#cart-drawer-content{transition:opacity .15s;flex:1;display:flex;flex-direction:column;min-height:0;}
.cart-panel{flex:1;display:flex;flex-direction:column;}

.cart-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.cart-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);}
.cart-item:first-child{padding-top:4px;}
.cart-item-media{width:68px;height:68px;border-radius:12px;background:var(--bg-elevated-2);border:1px solid var(--border);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--text-muted);}
.cart-item-media img{width:100%;height:100%;object-fit:cover;}
.cart-item-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px;}
.cart-item-top{display:flex;align-items:flex-start;gap:8px;}
.cart-item-name{flex:1;min-width:0;font-size:13.5px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cart-item-variant{display:block;font-size:12px;font-weight:400;color:var(--text-muted);margin-top:2px;}
.cart-item-tag{display:inline-block;vertical-align:1px;margin-right:6px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);border:1px solid rgba(255,217,0,.4);border-radius:5px;padding:1px 5px;}
.cart-item-remove{flex-shrink:0;width:30px;height:30px;margin:-5px -6px 0 0;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:8px;color:var(--text-muted);cursor:pointer;transition:color .15s,background .15s;}
.cart-item-remove:hover{color:var(--red);background:rgba(226,75,74,.1);}
.cart-item-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cart-item-price{text-align:right;line-height:1.2;}
.cart-item-price .mono{font-size:14px;font-weight:600;color:var(--text-primary);}
.cart-item-unit{display:block;font-size:11px;color:var(--text-muted);margin-top:2px;}

.cart-qty{display:inline-flex;align-items:center;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:100px;padding:2px;}
.cart-qty-btn{width:28px;height:28px;border-radius:50%;border:none;background:none;color:var(--text-primary);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.cart-qty-btn:hover:not(:disabled){background:var(--bg-elevated);color:var(--gold);}
.cart-qty-btn:disabled{opacity:.3;cursor:default;}
.cart-qty-value{min-width:24px;text-align:center;font-family:var(--font-mono);font-size:13px;font-weight:600;}

.cart-summary{margin-top:auto;position:sticky;bottom:-20px;margin-bottom:-20px;padding:18px 0 20px;background:var(--bg-elevated);display:flex;flex-direction:column;gap:10px;}
.cart-summary::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px;background:linear-gradient(to top,var(--bg-elevated),transparent);pointer-events:none;}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.cart-total-label{font-size:14px;font-weight:600;}
.cart-total-label small{font-size:12px;font-weight:400;color:var(--text-muted);margin-left:4px;}
.cart-total-amount{font-size:22px;font-weight:700;color:var(--gold);letter-spacing:-.01em;}
.cart-total-note{margin:-4px 0 4px;font-size:12px;color:var(--text-muted);}

.cart-checkout{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px;border-radius:100px;background:var(--gold);color:#0A0A0B;font-weight:700;font-size:15px;text-decoration:none;transition:background .15s,transform .15s;}
.cart-checkout:hover{background:#e6c400;transform:translateY(-1px);}
.cart-checkout svg{width:19px;height:19px;color:#0A0A0B;flex-shrink:0;}

.cart-quote{margin:0;}
.cart-quote-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:100px;background:none;border:1px solid var(--border-strong);color:var(--text-secondary);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s;}
.cart-quote-toggle:hover{border-color:var(--gold);color:var(--gold);}
.cart-quote-ask{display:flex;flex-direction:column;gap:7px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--bg-elevated-2);}
.cart-quote-label{font-size:12.5px;font-weight:600;color:var(--text-primary);}
.cart-quote-label span{font-weight:400;color:var(--text-muted);}
.cart-quote-row{display:flex;gap:8px;}
.cart-quote-input{flex:1;min-width:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:100px;color:var(--text-primary);font:inherit;font-size:16px;padding:9px 14px;}
.cart-quote-input::placeholder{color:var(--text-muted);}
.cart-quote-input:focus{outline:none;border-color:var(--border-strong);}
.cart-quote-go{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 14px;border-radius:100px;border:none;background:var(--text-primary);color:#0A0A0B;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;}
.cart-quote-go:hover{background:var(--gold);}

.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:40px 12px;color:var(--text-muted);}
.cart-empty svg{margin-bottom:8px;opacity:.7;}
.cart-empty-title{margin:0;font-size:15px;font-weight:600;color:var(--text-primary);}
.cart-empty-text{margin:0 0 10px;font-size:13px;max-width:240px;}
.cart-empty-link{padding:10px 20px;border:1px solid var(--border-strong);border-radius:100px;color:var(--text-primary);font-size:13.5px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s;}
.cart-empty-link:hover{border-color:var(--gold);color:var(--gold);}

/* CMS BLOCKS */
.cms-block{padding-block:40px;}
.cms-hero{padding-block:70px;}
.cms-hero-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,48px);letter-spacing:-0.02em;line-height:1.08;max-width:800px;margin-bottom:16px;}
.cms-hero-subtitle{font-size:16px;color:var(--text-secondary);max-width:560px;margin-bottom:24px;}
.cms-hero-buttons{display:flex;gap:12px;flex-wrap:wrap;}
.cms-hero-con-personaje{display:grid;grid-template-columns:1fr minmax(240px,460px);align-items:stretch;gap:32px;}
.cms-hero-con-personaje .cms-hero-text{min-width:0;display:flex;flex-direction:column;justify-content:center;}
.cms-hero-personaje{width:100%;height:100%;min-height:320px;object-fit:contain;object-position:bottom;justify-self:end;pointer-events:none;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));}
@media (max-width:860px){
  .cms-hero-con-personaje{grid-template-columns:1fr;gap:0;}
  .cms-hero-personaje{display:none;}
}
.cms-hero-eyebrow{font-family:var(--font-mono);color:var(--gold);font-size:13px;margin-bottom:16px;}
.cms-hero-em{font-style:normal;color:var(--gold);}

/* Halo dorado que sigue al mouse en el hero (bloque hero_simple, campo
   "fondo"; ver public/js/hero-humo.js). Es el ÚNICO efecto de fondo:
   quedó solo el que responde al cursor (las manchas que se movían solas
   se sacaron a pedido). Oculto hasta que el cursor entra al hero; sin
   JS, en táctil o con "reducir movimiento" simplemente no se muestra.
   Degradado radial con opacidad baja (sin filter:blur, costoso en
   celulares de gama baja) para que el texto conserve su contraste; solo
   se anima transform. La máscara desvanece el halo contra los bordes
   del recuadro, así no se ve un corte duro donde termina el hero. */
.cms-hero-con-humo{position:relative;isolation:isolate;}
.cms-hero-humo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 55%,transparent 100%);}
.cms-hero-humo span{position:absolute;border-radius:50%;will-change:transform;}
.cms-hero-humo .cms-hero-humo-cursor{left:0;top:0;width:520px;height:520px;background:radial-gradient(closest-side,rgba(255,217,0,.40),rgba(255,170,0,.13) 55%,transparent 100%);opacity:0;transition:opacity .5s ease;transform:translate3d(-9999px,0,0);}
.cms-hero-humo .cms-hero-humo-cursor.is-on{opacity:1;}
.cms-hero-grande{min-height:70dvh;display:flex;flex-direction:column;justify-content:center;padding-block:80px;border-bottom:1px solid var(--border);}
.cms-hero-grande .cms-hero-title{font-size:clamp(36px,6vw,72px);}
.cms-hero-grande .btn{padding:14px 28px;font-size:15px;}

.cms-cat-strip{padding-block:40px;display:flex;gap:12px;overflow-x:auto;border-bottom:1px solid var(--border);}
.cms-cat-chip{flex-shrink:0;font-size:14px;padding:10px 20px;border-radius:100px;border:1px solid var(--border);color:var(--text-secondary);white-space:nowrap;}
.cms-cat-chip:hover{border-color:var(--gold);color:var(--gold);}

.cms-hero-video{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;background:#0A0A0B;border-bottom:1px solid var(--border);}
.cms-hero-video-media{position:absolute;inset:0;overflow:hidden;will-change:transform;}
/* 199.1dvh/63vw en vez de los 177.78dvh/56.25vw "justos" (16:9 exacto)
   -- ese ~12% de más es a propósito, para tapar la marca/título que
   YouTube superpone arriba del video incluso con modestbranding=1. Se
   logra agrandando el tamaño fijo del iframe, NO con un transform:
   scale() (así estaba antes, aplicado por hero-video-parallax.js) --
   un scale() sobre este iframe le mostraba a Chrome una costura fina
   horizontal (bug de compositing de video con GPU al escalar), bien
   visible al pasar el mouse. Mismo recorte final, sin la costura. */
.cms-hero-video-iframe{position:absolute;top:50%;left:50%;width:199.1dvh;height:63vw;min-width:112%;min-height:112%;transform:translate(-50%,-50%);border:0;pointer-events:none;}
.cms-hero-video-native{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cms-hero-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
/* YouTube tarda un instante en arrancar el autoplay -- mientras tanto
   muestra su propia UI nativa (como si el video estuviera pausado, con
   controles de "anterior/play/siguiente" por el truco de loop con
   playlist de un solo video). Esta cortina tapa ese destello inicial y
   se desvanece recién cuando hero-video-youtube.js confirma que el
   video ya está reproduciendo de verdad (evento onStateChange). */
.cms-hero-video-curtain{position:absolute;inset:0;background:#0A0A0B center/cover no-repeat;opacity:1;transition:opacity .5s ease;pointer-events:none;}
.cms-hero-video-curtain.is-hidden{opacity:0;}
.cms-hero-video-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8) 5%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.5) 100%);opacity:var(--hero-overlay,1);}
.cms-hero-video-content{position:relative;padding-block:64px;width:100%;}
.cms-hero-video-content.align-centro{text-align:center;margin-inline:auto;}
.cms-hero-video-content.align-centro .cms-hero-video-buttons{justify-content:center;}
.cms-hero-video-content.align-centro .cms-hero-subtitle{margin-inline:auto;}
.cms-hero-video-content.align-derecha{text-align:right;margin-left:auto;}
.cms-hero-video-content.align-derecha .cms-hero-video-buttons{justify-content:flex-end;}
.cms-hero-video-content.align-derecha .cms-hero-subtitle{margin-left:auto;}
.cms-hero-video-cta3{display:inline-block;margin-top:18px;color:#fff;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;opacity:.85;}
.cms-hero-video-cta3:hover{opacity:1;}
.cms-hero-video.altura-grande{min-height:82vh;}
.cms-hero-video-title{position:relative;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,5.5vw,56px);line-height:1.06;letter-spacing:-0.01em;color:#fff;max-width:920px;margin-bottom:28px;}

/* Efecto de "decodificación": cada letra arranca como un glifo random
   con un ligero destello RGB (glitch) y va asentándose en su lugar y su
   carácter real, una tras otra — ver public/js/hero-title-decode.js.
   width:1ch fijo (en vez de dejar que cada letra mida lo que mida):
   sin esto, un glifo random ancho como "W" reemplazando momentáneamente
   una letra angosta como "i" corría el corte de línea del título
   mientras dura el efecto — eso era justamente la causa de un salto de
   layout (CLS) real, medido con PageSpeed. */
.cms-hero-video-title .glyph{display:inline-block;width:1ch;text-align:center;transition:opacity .16s ease,transform .16s ease,text-shadow .16s ease,color .16s ease;}
.cms-hero-video-title .glyph.is-scrambled{opacity:.55;transform:translateY(-5px);color:var(--green);text-shadow:-2px 0 var(--red),2px 0 var(--gold);}
/* El ancho fijo de 1ch de arriba solo existe para que las letras no
   "tiemblen" de ancho mientras se muestran glifos al azar (ver
   hero-title-decode.js) -- una vez asentada la letra real, ese ancho
   fijo deja letras angostas (I, l, 1) centradas dentro de una caja
   más ancha que ellas, con un hueco visible a los costados. */
.cms-hero-video-title .glyph.is-settled{width:auto;opacity:1;transform:translateY(0);color:#fff;text-shadow:none;}
.cms-hero-video-buttons{display:flex;gap:14px;flex-wrap:wrap;}
.cms-hero-video-buttons .btn,.cms-hero-video-buttons .btn-outline-gold{padding:14px 26px;font-size:14.5px;}
/* Entran justo después de que el título termina de "decodificarse"
   (hero-title-decode.js) — un delay fijo en vez de esperar ese script
   (el tiempo real depende del largo del título, que el admin edita) es
   más simple y ya se siente bien para cualquier título razonable. */
.cms-hero-video-buttons a{opacity:0;transform:translateY(14px);animation:cms-hero-btn-in .5s ease forwards;animation-delay:.65s;}
.cms-hero-video-buttons a:nth-child(2){animation-delay:.8s;}
@keyframes cms-hero-btn-in{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.cms-hero-video-buttons a{animation:none;opacity:1;transform:none;}}
.motion-reduced .cms-hero-video-buttons a{animation:none;opacity:1;transform:none;}

.cms-hero-scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11.5px;color:rgba(255,255,255,.75);letter-spacing:.03em;text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none;transition:opacity .2s ease;}
.cms-hero-scroll-hint svg{animation:cms-scroll-bob 1.6s ease-in-out infinite;}
@keyframes cms-scroll-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
@media (prefers-reduced-motion: reduce){.cms-hero-scroll-hint svg{animation:none;}}
.motion-reduced .cms-hero-scroll-hint svg{animation:none;}

/* .cms-hero-video ya usa 100dvh en la regla base (no hace falta
   repetirlo acá) -- dvh, a diferencia de vh, no salta cuando
   aparece/desaparece la barra de direcciones del navegador, y con
   eso el salto se sentía también en tablet, no solo en celular. */
@media (max-width:680px){
  .cms-hero-video-has-poster .cms-hero-video-iframe,.cms-hero-video-has-poster .cms-hero-video-native{display:none;}
  .cms-hero-video-has-poster .cms-hero-video-poster-desktop{display:none;}
  .cms-hero-video-has-poster .cms-hero-video-poster-mobile{display:block;}
}

/* Separado del breakpoint móvil de arriba a propósito: acá decide qué
   imagen mostrar el ANCHO de pantalla, no si el motion está reducido —
   sin este @media, la regla de abajo (que no sabe de anchos) y la de
   arriba (que sí) terminaban compitiendo por especificidad en un
   celular con motion reducido, y se veían las dos imágenes pisadas. */
@media (min-width:681px){
  .motion-reduced .cms-hero-video-has-poster .cms-hero-video-iframe,.motion-reduced .cms-hero-video-has-poster .cms-hero-video-native{display:none;}
  .motion-reduced .cms-hero-video-has-poster .cms-hero-video-poster-desktop{display:block;}
}
.cms-rich-text{font-size:15px;line-height:1.7;color:var(--text-secondary);white-space:pre-line;max-width:720px;}
.cms-stats{display:flex;gap:48px;flex-wrap:wrap;}
.cms-stat-number{font-family:var(--font-mono);font-size:36px;color:var(--gold);line-height:1;margin-bottom:6px;}
.cms-stat-label{font-size:13px;color:var(--text-secondary);}

.cms-productos-head{text-align:center;max-width:640px;margin:0 auto 36px;}
.cms-productos-eyebrow{font-family:var(--font-mono);color:var(--gold);font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px;}
.cms-productos-head .cms-titulo{margin-bottom:12px;}
.cms-productos-subtitulo{color:var(--text-secondary);font-size:14px;line-height:1.6;}

.cms-catrot-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.cms-catrot-badge{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;background:var(--gold);color:#0A0A0B;padding:4px 11px;border-radius:100px;margin-bottom:8px;}
.cms-catrot-vermas{font-family:var(--font-mono);font-size:12.5px;color:var(--text-secondary);border:1px solid var(--border);padding:8px 16px;border-radius:100px;white-space:nowrap;transition:border-color .15s,color .15s;}
.cms-catrot-vermas:hover{border-color:var(--gold);color:var(--gold);}

.cms-titulo{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;}
.cms-titulo-grande{font-size:clamp(28px,4vw,42px);}
.cms-titulo-mediano{font-size:24px;}
.cms-titulo-chico{font-size:18px;}

.cms-imagen img{width:100%;border-radius:16px;display:block;}
.cms-imagen figcaption{margin-top:10px;font-size:13px;color:var(--text-muted);text-align:center;}

.cms-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.cms-galeria-item{aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--bg-elevated-2);}
.cms-galeria-item img{width:100%;height:100%;object-fit:cover;}

.cms-video-frame{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;background:var(--bg-elevated-2);}
.cms-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.cms-banner{position:relative;border-radius:20px;overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg-elevated-2);min-height:280px;display:flex;align-items:flex-end;}
.cms-banner-overlay{background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0));width:100%;padding:32px;}
.cms-banner-title{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,32px);margin-bottom:14px;color:#fff;}

/* De extremo a extremo (sin .wrap ni border-radius en la sección misma,
   a diferencia de .cms-banner) — el .wrap se lo queda solo el contenido
   de adentro (cms-banner-productos-inner), igual que hero-video. */
.cms-banner-productos{position:relative;overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg-elevated-2);margin-block:40px;}
.cms-banner-productos::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.6) 45%,rgba(8,8,8,.15) 75%);}
.cms-banner-productos-inner{position:relative;z-index:1;padding-block:56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.cms-banner-productos-text{max-width:480px;}
.cms-banner-productos-text .cms-hero-title{margin-bottom:16px;}
.cms-banner-productos-text .cms-hero-subtitle{margin-bottom:24px;}
.cms-banner-productos-grid{display:flex;gap:16px;flex-wrap:wrap;}
/* Tarjetas semi-transparentes con blur, para que se note la foto de
   fondo por detrás en vez de tapar todo con el fondo sólido normal
   de .card. */
.cms-banner-productos-grid .card{width:190px;flex-shrink:0;background:rgba(19,19,19,var(--banner-card-alpha,.55));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,255,255,.14);}
/* Las fotos de producto reales vienen con SU PROPIO fondo (no
   transparentes) — pegadas al borde de la tarjeta se veían como un
   bloque sólido feo contra el vidrio difuminado. Con margen y un radio
   propio, la foto queda "enmarcada" flotando adentro en vez de tapar
   la tarjeta de punta a punta. */
.cms-banner-productos-grid .card-media{margin:10px 10px 0;border-radius:10px;width:auto;}
@media (max-width:900px){
  .cms-banner-productos-inner{flex-direction:column;align-items:flex-start;padding-block:40px;}
  .cms-banner-productos::before{background:linear-gradient(180deg,rgba(8,8,8,.35) 0%,rgba(8,8,8,.94) 65%);}
  .cms-banner-productos-grid{width:100%;}
  /* Ojo: se mantienen 2 por fila hasta el celular más angosto — a
     full-width (como quedaba antes de este ajuste) una sola tarjeta ya
     ocupaba toda la pantalla y se veía enorme. */
  .cms-banner-productos-grid .card{width:calc(50% - 8px);max-width:170px;}
}

.cms-faq-item{border-bottom:1px solid var(--border);}
.cms-faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;color:var(--text-primary);font-size:15px;font-weight:500;padding:18px 4px;cursor:pointer;text-align:left;transition:color .15s;}
.cms-faq-item.is-open .cms-faq-question{color:var(--gold);}
.cms-faq-answer{padding:0 4px 18px;color:var(--text-secondary);font-size:14px;line-height:1.6;}

.cms-carrusel-track{position:relative;aspect-ratio:16/7;border-radius:16px;overflow:hidden;background:var(--bg-elevated-2);}
.cms-carrusel-slide{position:absolute;inset:0;}
.cms-carrusel-slide img{width:100%;height:100%;object-fit:cover;}
.cms-carrusel-caption{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0));color:#fff;font-size:14px;}
.cms-carrusel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px;}
.cms-carrusel-arrow{background:none;border:1px solid var(--border);color:var(--text-primary);border-radius:100px;width:36px;height:36px;cursor:pointer;transition:border-color .15s,color .15s;}
.cms-carrusel-arrow:hover{border-color:var(--gold);color:var(--gold);}
.cms-carrusel-dots{display:flex;gap:8px;}
.cms-carrusel-dot{width:8px;height:8px;border-radius:100px;background:var(--border-strong);border:none;cursor:pointer;padding:0;transition:background .15s,transform .15s;}
.cms-carrusel-dot.active{background:var(--gold);transform:scale(1.3);}

.cms-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;}
.cms-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:22px;}
.cms-card-title{font-family:var(--font-display);font-weight:600;font-size:16px;margin-bottom:10px;}
.cms-card-text{font-size:13.5px;line-height:1.6;color:var(--text-secondary);}

.cms-testimonios{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.cms-testimonio{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:24px;}
.cms-testimonio-texto{font-size:14.5px;line-height:1.7;color:var(--text-secondary);margin-bottom:14px;font-style:italic;}
.cms-testimonio-nombre{font-size:13px;color:var(--gold);font-weight:600;}

.cms-mapa iframe{width:100%;height:360px;border:0;border-radius:16px;display:block;}

/* Dirección de arte editorial (ronda 2 del rediseño): la primera pasada
   quedó limpia pero se sentía a listado administrativo (ciudad → línea
   → sucursal → asesores → botones, todo el mismo peso). Esta versión le
   suma jerarquía tipográfica y una interacción propia SIN volver a
   cajas: numeración editorial grande y tenue, nombre con más peso,
   datos secundarios discretos, y un acento CYREX (línea dorada) que se
   expande recién al pasar el mouse — el dorado sigue siendo solo un
   acento puntual, nunca el color dominante de la sección. */
.cms-sucursales-head{margin-bottom:32px;}
.cms-sucursales-sub{font-size:14.5px;color:var(--text-secondary);margin-top:8px;max-width:480px;}

/* Tarjetas de sucursal -- grilla de 3 en desktop (deliberado: son 3
   sucursales reales hoy, no una fila genérica de features), 1 columna
   en mobile. Cada tarjeta es foto + nombre/ciudad + lista de asesores
   con avatar, mismo lenguaje visual que el resto del sitio (superficie
   elevada, borde sutil, radio 16px). */
.cms-sucursales-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:56px;}
.cms-sucursal-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:border-color .25s ease;}
.cms-sucursal-card:hover{border-color:var(--border-strong);}
.cms-sucursal-card-photo{position:relative;aspect-ratio:16/10;background:var(--bg-elevated-2);}
.cms-sucursal-card-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.cms-sucursal-card-photo-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--border-strong);}
.cms-sucursal-card-photo-fallback svg{width:32px;height:32px;}
.cms-sucursal-card-body{padding:20px 22px 22px;}
.cms-sucursal-card-body h3{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;margin-bottom:6px;}
.cms-sucursal-card-ciudad{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-muted);margin-bottom:18px;}
.cms-sucursal-icon{display:inline-flex;width:13px;height:13px;flex-shrink:0;color:var(--gold);}
.cms-sucursal-icon svg{width:100%;height:100%;}

.cms-sucursal-card-asesores{display:flex;flex-direction:column;gap:14px;padding-top:16px;border-top:1px solid var(--border);}
.cms-asesor-row{display:flex;align-items:center;gap:10px;}
.cms-asesor-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--bg-elevated-2);display:flex;align-items:center;justify-content:center;}
.cms-asesor-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.cms-asesor-avatar-fallback{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--text-secondary);}
.cms-asesor-info{display:flex;flex-direction:column;flex:1;min-width:0;}
.cms-asesor-nombre{font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cms-asesor-cargo{font-size:11.5px;color:var(--text-muted);}
/* Verde real de WhatsApp a propósito (no el dorado de la marca) -- es
   un botón de acción reconocible de inmediato, mismo criterio que
   .btn-cta-whatsapp/.footer-whatsapp-btn en el resto del sitio. */
.cms-asesor-whatsapp{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(37,211,102,.3);background:rgba(37,211,102,.08);color:#25D366;flex-shrink:0;transition:border-color .2s ease,background .2s ease,transform .2s ease;}
.cms-asesor-whatsapp svg{width:15px;height:15px;}
.cms-asesor-whatsapp:hover{border-color:#25D366;background:rgba(37,211,102,.18);transform:scale(1.06);}

/* "Próximamente": deliberadamente secundario -- foto en placeholder,
   nombre más liviano, sin lista de asesores -- no debe competir
   visualmente con las sucursales reales. */
.cms-sucursal-card-proximamente{border-style:dashed;}
.cms-sucursal-card-proximamente .cms-sucursal-card-body h3{font-weight:500;color:var(--text-secondary);font-size:16px;}

.cms-sucursales-maps{margin-top:8px;}
.cms-sucursales-maps-head{margin-bottom:20px;}
.cms-sucursales-maps-head h3{margin-bottom:6px;}
.cms-sucursales-maps-head p{font-size:13.5px;color:var(--text-secondary);}

/* Selector de mapas: un solo mapa activo en vez de uno por sucursal
   apilado (ver el comentario en sucursales.blade.php). */
.cms-mapa-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.cms-mapa-tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:9px 18px;border-radius:100px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease;}
.cms-mapa-tab svg{width:12px;height:12px;flex-shrink:0;}
.cms-mapa-tab:hover{border-color:var(--border-strong);color:var(--text-primary);}
.cms-mapa-tab.is-active{border-color:var(--gold);color:var(--gold);background:var(--gold-dim);}
.cms-mapa-panel{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:stretch;}
.cms-mapa-panel-side{display:flex;flex-direction:column;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.cms-mapa-panel-photo{aspect-ratio:16/10;background:var(--bg-elevated-2);}
.cms-mapa-panel-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.cms-mapa-panel-photo .cms-sucursal-card-photo-fallback{width:100%;height:100%;}
.cms-mapa-panel-info{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1;}
.cms-mapa-panel-info h4{font-family:var(--font-display);font-weight:700;font-size:17px;}
.cms-mapa-panel-info p{display:flex;align-items:flex-start;gap:7px;font-size:13px;color:var(--text-secondary);line-height:1.5;}
.cms-mapa-panel-info p .cms-sucursal-icon{margin-top:2px;}
.cms-mapa-panel-info .btn{margin-top:auto;}
.cms-mapa-panel iframe{width:100%;height:100%;min-height:280px;border:0;border-radius:16px;display:block;}
@media (max-width:680px){
  .cms-mapa-panel{grid-template-columns:1fr;}
  .cms-mapa-panel iframe{height:230px;}
}
@media (prefers-reduced-motion:reduce){
  .cms-sucursal-card,.cms-asesor-whatsapp,.cms-mapa-tab{transition:none;}
}
.motion-reduced .cms-sucursal-card,.motion-reduced .cms-asesor-whatsapp,.motion-reduced .cms-mapa-tab{transition:none;}

/* Franja de cierre "¿Tienes alguna consulta general?" -- deliberadamente
   plana (sin card, un filete arriba) para que no compita con las
   tarjetas de sucursal de arriba, que son las protagonistas reales. */
.cms-sucursales-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;padding-top:28px;border-top:1px solid var(--border);}
.cms-sucursales-footer-label{font-size:14.5px;color:var(--text-secondary);}
.cms-sucursales-footer-links{display:flex;gap:12px;flex-wrap:wrap;}
.cms-sucursales-footer-link{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:100px;border:1px solid var(--border);text-decoration:none;color:var(--text-primary);transition:border-color .2s ease,background .2s ease;}
.cms-sucursales-footer-link:hover{border-color:var(--border-strong);background:var(--bg-elevated);}
.cms-sucursales-footer-icon{display:inline-flex;width:18px;height:18px;flex-shrink:0;color:var(--text-secondary);}
.cms-sucursales-footer-icon svg{width:100%;height:100%;}
.cms-sucursales-footer-icon.is-whatsapp{color:#25D366;}
.cms-sucursales-footer-text{display:flex;flex-direction:column;}
.cms-sucursales-footer-text-label{font-size:11px;color:var(--text-muted);}
.cms-sucursales-footer-text-value{font-size:13px;font-weight:600;}
@media (max-width:520px){
  .cms-sucursales-footer{flex-direction:column;align-items:flex-start;}
}

/* "¿En qué podemos ayudarte?" (bloque intencion_contacto, /contacto) --
   emparentado con .cms-ecosistema-* (mismo espíritu editorial, hairline
   en vez de cajas) pero con lenguaje propio: grilla con líneas
   compartidas (como una hoja de specs) en vez de columnas sueltas, y un
   acento dorado que crece en el borde izquierdo recién al hover -- en
   reposo es solo estructura, nada grita. */
.cms-intencion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border);margin-top:28px;}
.cms-intencion-item{position:relative;padding:32px 26px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;overflow:hidden;transition:background .3s ease;}
.cms-intencion-item::before{content:'';position:absolute;left:0;top:0;width:2px;height:0;background:var(--gold);transition:height .4s cubic-bezier(.22,1,.36,1);}
.cms-intencion-item:hover{background:var(--bg-elevated);}
.cms-intencion-item:hover::before{height:100%;}
.cms-intencion-icon{display:inline-flex;width:22px;height:22px;color:var(--gold);}
.cms-intencion-icon svg{width:100%;height:100%;}
.cms-intencion-titulo{font-family:var(--font-display);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.01em;}
.cms-intencion-texto{font-size:13.5px;color:var(--text-secondary);line-height:1.55;flex:1;}
.cms-intencion-cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--gold);}
.cms-intencion-cta svg{transition:transform .25s ease;}
.cms-intencion-item:hover .cms-intencion-cta svg{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){
  .cms-intencion-item,.cms-intencion-item::before,.cms-intencion-cta svg{transition:none;}
}
.motion-reduced .cms-intencion-item,.motion-reduced .cms-intencion-item::before,.motion-reduced .cms-intencion-cta svg{transition:none;}

/* Comunidad CYREX (bloque comunidad_cyrex, /contacto) -- el grupo de
   WhatsApp tiene más jerarquía a propósito (tarjeta con degradé sutil de
   --gold-dim) que las redes sociales genéricas (filas con separador,
   mismo lenguaje que .cms-sucursal-row). */
.cms-comunidad-head{margin-bottom:24px;}
.cms-comunidad-whatsapp{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border:1px solid var(--border);border-radius:16px;padding:26px 28px;background:linear-gradient(135deg,var(--gold-dim),transparent 65%);text-decoration:none;color:inherit;margin-bottom:28px;transition:border-color .25s ease;}
.cms-comunidad-whatsapp:hover{border-color:var(--gold);}
.cms-comunidad-whatsapp-icon{display:inline-flex;width:40px;height:40px;flex-shrink:0;color:var(--gold);}
.cms-comunidad-whatsapp-icon svg{width:100%;height:100%;}
.cms-comunidad-whatsapp-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px;}
.cms-comunidad-whatsapp-titulo{font-family:var(--font-display);font-weight:700;font-size:19px;}
.cms-comunidad-whatsapp-sub{font-size:13px;color:var(--text-secondary);}
.cms-comunidad-whatsapp-cta{font-size:13.5px;font-weight:600;color:var(--gold);flex-shrink:0;}
.cms-comunidad-redes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.cms-comunidad-red{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding:16px 4px;text-decoration:none;color:var(--text-primary);font-size:14px;transition:padding-left .3s ease,color .3s ease;}
.cms-comunidad-red:hover{padding-left:10px;color:var(--gold);}
.cms-comunidad-red-icon{display:inline-flex;width:18px;height:18px;flex-shrink:0;}
.cms-comunidad-red-icon svg{width:100%;height:100%;}
@media (prefers-reduced-motion:reduce){
  .cms-comunidad-whatsapp,.cms-comunidad-red{transition:none;}
}
.motion-reduced .cms-comunidad-whatsapp,.motion-reduced .cms-comunidad-red{transition:none;}

.cms-social-rotator{position:relative;}
.cms-social-page{display:none;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.cms-social-page.is-active{display:grid;animation:cms-social-fade .4s ease;}
@keyframes cms-social-fade{from{opacity:0;}to{opacity:1;}}
.cms-social-card{display:block;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:border-color .2s,transform .2s;}
.cms-social-card:hover{border-color:var(--border-strong);transform:translateY(-2px);}
.cms-social-media{position:relative;aspect-ratio:1/1;background:var(--bg-elevated-2);}
.cms-social-media img{width:100%;height:100%;object-fit:cover;display:block;}
.cms-social-badge{position:absolute;top:12px;left:12px;width:30px;height:30px;border-radius:50%;background:rgba(8,8,8,.88);display:flex;align-items:center;justify-content:center;color:#fff;}
.cms-social-badge svg{width:16px;height:16px;}
.cms-social-caption{padding:12px 14px;font-size:13px;color:var(--text-secondary);line-height:1.5;}

/* Ecosistema CYREX (ecosistema-cyrex.blade.php) -- deliberadamente sin
   cards/bordes pesados: una fila de accesos separados por un filete
   superior fino, no 3 cajas grandes. */
.cms-ecosistema-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-top:24px;}
.cms-ecosistema-item{border-top:1px solid var(--border);padding-top:18px;}
.cms-ecosistema-titulo{font-family:var(--font-display);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.01em;margin-bottom:8px;}
.cms-ecosistema-texto{font-size:14px;color:var(--text-secondary);line-height:1.55;margin-bottom:14px;}
.cms-ecosistema-cta{color:var(--gold);font-size:13.5px;font-weight:600;text-decoration:none;}
.cms-ecosistema-cta:hover{text-decoration:underline;}

/* Categorías (editorial) (categorias-editoriales.blade.php) */
.cms-categorias-editoriales-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.cms-categorias-editoriales-tile{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--bg-elevated-2);}
.cms-categorias-editoriales-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.cms-categorias-editoriales-tile:hover img{transform:scale(1.05);}
.cms-categorias-editoriales-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65) 100%);}
/* Carrusel de categorías (cms/blocks/categorias-editoriales, modo "carrusel"):
   scroll horizontal nativo con snap -- se desliza con el dedo/trackpad -- y
   flechas solo donde hay mouse. 6 a la vista en escritorio; en el celular
   se ve un pedazo de la siguiente para que se note que se puede deslizar. */
.cms-catcar{position:relative;}
.cms-catcar-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 16px) / 6);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.cms-catcar-track::-webkit-scrollbar{display:none;}
.cms-catcar-track > a{scroll-snap-align:start;}
@media (max-width:1100px){.cms-catcar-track{grid-auto-columns:calc((100% - 3 * 16px) / 4);}}
@media (max-width:760px){.cms-catcar-track{grid-auto-columns:42%;gap:12px;}}
@media (max-width:480px){.cms-catcar-track{grid-auto-columns:64%;}}
.cms-catcar-arrow{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border);background:rgba(10,10,11,.92);color:var(--text-primary);cursor:pointer;transition:border-color .15s,color .15s,opacity .2s;}
.cms-catcar-arrow:hover{border-color:var(--gold);color:var(--gold);}
.cms-catcar-arrow.is-prev{left:-14px;}
.cms-catcar-arrow.is-next{right:-14px;}
.cms-catcar-arrow.is-hidden{opacity:0;pointer-events:none;}
@media (hover:none),(max-width:760px){.cms-catcar-arrow{display:none;}}
.cms-categorias-editoriales-label{position:absolute;left:14px;bottom:12px;z-index:1;color:#fff;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.01em;}

/* Mosaico editorial de "Así se vive CYREX" (redes-sociales.blade.php,
   presentacion:mosaico) -- grilla propia, no comparte clases con
   marcas-mosaico.blade.php a propósito, aunque el criterio de "una
   tarjeta grande + el resto chicas" sea un lenguaje visual parecido. */
.cms-redes-mosaico-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px;}
.cms-redes-mosaico-tile{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--bg-elevated-2);grid-column:span 1;grid-row:span 1;}
.cms-redes-mosaico-tile--big{grid-column:span 2;grid-row:span 2;}
.cms-redes-mosaico-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.cms-redes-mosaico-tile:hover img{transform:scale(1.05);}
.cms-redes-mosaico-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72) 100%);}
.cms-redes-mosaico-tile .cms-social-badge{position:absolute;top:12px;left:12px;}
.cms-redes-mosaico-caption{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;color:#fff;font-size:13px;line-height:1.4;}
@media (max-width:768px){
  .cms-redes-mosaico-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;}
  .cms-redes-mosaico-tile--big{grid-column:span 2;grid-row:span 1;}
}

.cms-separador{border:none;border-top:1px solid var(--border);}
.cms-separador-chico{margin-block:20px;}
.cms-separador-mediano{margin-block:40px;}
.cms-separador-grande{margin-block:72px;}

.cms-formulario{max-width:480px;}
.cms-formulario-subtitulo{font-size:14px;color:var(--text-secondary);line-height:1.55;margin-bottom:20px;margin-top:-8px;}
.cms-form-field{margin-bottom:16px;}
.cms-form-field label{display:block;font-size:12.5px;color:var(--text-secondary);margin-bottom:6px;}
.cms-form-field input,.cms-form-field textarea,.cms-form-field select{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text-primary);font-size:14px;font-family:inherit;outline:none;transition:border-color .15s;appearance:none;}
.cms-form-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;}
.cms-form-field input:focus,.cms-form-field textarea:focus,.cms-form-field select:focus{border-color:var(--gold);}

.cms-cta{text-align:center;}
.cms-cta-texto{font-size:18px;color:var(--text-primary);margin-bottom:18px;max-width:600px;margin-left:auto;margin-right:auto;}

.cms-garantias{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;}
.cms-garantia{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-secondary);}
.cms-garantia-icon{display:inline-flex;width:22px;height:22px;color:var(--gold);flex-shrink:0;}
.cms-garantia-icon svg{width:100%;height:100%;}

.trust-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:36px 0;}
.trust-badge{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:24px;}
.trust-badge-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--gold-dim);color:var(--gold);margin-bottom:14px;}
.trust-badge-icon svg{width:20px;height:20px;}
.trust-badge h4{font-family:var(--font-display);font-weight:600;font-size:15.5px;margin-bottom:8px;}
.trust-badge p{font-size:13px;line-height:1.6;color:var(--text-secondary);}

.cms-marcas-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.cms-marcas-track{display:flex;gap:56px;align-items:center;width:max-content;animation:cms-marquee var(--marca-speed,28s) linear infinite;}
/* El frenado al pasar el mouse ya NO es un animation-play-state:paused
   (eso corta en seco, sin transición posible) -- marcas-track.js
   frena/retoma de forma progresiva bajándole la velocidad real a esta
   misma animación (Animation.playbackRate) en vez de pausarla de golpe. */
.cms-marca-item{height:var(--marca-logo-size,64px);width:calc(var(--marca-logo-size,64px) * 2.35);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* width/height:100% en vez de auto+max-*: el contenedor .cms-marca-item
   ya tiene tamaño fijo, así que el navegador puede reservar el espacio
   del propio <img> desde el primer instante en vez de esperar a que
   cargue para saber su tamaño (object-fit:contain sigue ajustando la
   imagen real adentro de esa caja sin deformarla) — esto era la otra
   causa del salto de layout (CLS) que midió PageSpeed. */
.cms-marca-logo{width:100%;height:100%;object-fit:contain;opacity:.55;filter:grayscale(1);transition:opacity .2s;}
.cms-marca-item:hover .cms-marca-logo{opacity:.9;}
.cms-marca-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
@keyframes cms-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.cms-marcas-mosaico-viewport{overflow:hidden;}
.cms-marcas-mosaico-track{display:flex;transition:transform .5s cubic-bezier(.65,0,.35,1);}
.motion-reduced .cms-marcas-mosaico-track{transition:none;}
/* Columnas FIJAS (repeat(6,1fr), no auto-fill): cada tarjeta se ubica
   con una posición explícita (grid-column/grid-row inline, ver la
   vista) en vez de dejar que el navegador las acomode solo — con
   auto-fill la cantidad de columnas cambia según el ancho disponible,
   así que el mismo mosaico se veía distinto (y a veces con una
   tarjeta "huérfana" en su propia fila) en el editor vs. en la web
   real, que casi nunca miden lo mismo de ancho. */
.cms-marcas-mosaico-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:14px;}
.cms-marcas-mosaico-tile{position:relative;border-radius:16px;overflow:hidden;display:block;background:var(--bg-elevated-2);}
@media (max-width:700px){
  /* En celular, 6 columnas hacen tarjetas demasiado angostas — se
     simplifica a un mosaico de 2 columnas usando solo la FORMA
     (grande/ancha ocupan 2 columnas, el resto 1), ignorando la
     posición exacta de escritorio. */
  /* dense: sin esto, el navegador va colocando cada tarjeta en orden
     sin volver atrás a rellenar un hueco que dejó una más chica más
     adelante — con formas de tamaños mezclados eso se notaba como
     agujeros vacíos y tarjetas desacomodadas. */
  .cms-marcas-mosaico-page{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;grid-auto-flow:dense;}
  .cms-marcas-mosaico-tile{grid-column:span 1 !important;grid-row:span 1 !important;}
  .cms-marcas-mosaico-tile[data-shape="big"]{grid-column:span 2 !important;grid-row:span 2 !important;}
  .cms-marcas-mosaico-tile[data-shape="wide"]{grid-column:span 2 !important;}
}
.cms-marcas-mosaico-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.cms-marcas-mosaico-tile:hover img{transform:scale(1.05);}
.cms-marcas-mosaico-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.7) 100%);}
.cms-marcas-mosaico-tile-label{position:absolute;left:14px;bottom:14px;z-index:1;background:rgba(15,15,15,.9);color:#fff;font-weight:600;font-size:14px;padding:8px 16px;border-radius:100px;}
.cms-marcas-mosaico-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;}
.cms-marcas-mosaico-dots{display:flex;gap:7px;}
.cms-marcas-mosaico-dot{width:7px;height:7px;border-radius:50%;background:var(--border-strong);border:none;cursor:pointer;padding:0;}
.cms-marcas-mosaico-dot.is-active{background:var(--gold);width:18px;border-radius:4px;transition:width .2s,border-radius .2s;}
.cms-marcas-mosaico-arrow{width:40px;height:40px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s;}
.cms-marcas-mosaico-arrow:hover{border-color:var(--border-strong);}
@media (prefers-reduced-motion:reduce){.cms-marcas-mosaico-track{transition:none;}}

/* FLOATING EXCHANGE RATE WIDGET */
.exchange-rate-float{position:fixed;right:20px;bottom:20px;z-index:190;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:12px;padding:11px 32px 11px 15px;box-shadow:0 16px 40px rgba(0,0,0,0.4);transition:opacity .2s ease,transform .2s ease;}
/* Al cerrar con la X: se achica y desvanece en vez de desaparecer de
   golpe -- exchange-rate-float.js saca el elemento del DOM recién
   200ms después de sumar esta clase, para que la animación llegue a
   verse. */
.exchange-rate-float.is-dismissing{opacity:0;transform:translateY(8px) scale(.92);pointer-events:none;}
@media (prefers-reduced-motion:reduce){.exchange-rate-float{transition:opacity .2s ease;}.exchange-rate-float.is-dismissing{transform:none;}}
.motion-reduced .exchange-rate-float{transition:opacity .2s ease;}
.motion-reduced .exchange-rate-float.is-dismissing{transform:none;}
.exchange-rate-float-close{position:absolute;top:4px;right:4px;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px;line-height:0;transition:color .15s;}
.exchange-rate-float-close:hover{color:var(--text-primary);}
.exchange-rate-float-close svg{width:11px;height:11px;display:block;}
/* Se desvanece mientras se scrollea (exchange-rate-float.js) -- fijo
   siempre encima tapaba el título/categoría del producto que caía en
   esa esquina en la grilla de 2 columnas de mobile. */
.exchange-rate-float.is-hidden{opacity:0;pointer-events:none;}
.exchange-rate-float-label{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.exchange-rate-float-value{display:flex;align-items:baseline;gap:7px;font-family:var(--font-mono);white-space:nowrap;}
.exchange-rate-float-base{font-size:12.5px;color:var(--text-secondary);}
.exchange-rate-float-value strong{font-size:17px;font-weight:700;color:var(--gold);}
@media (max-width:600px){.exchange-rate-float{right:14px;bottom:14px;padding:9px 28px 9px 12px;}.exchange-rate-float-base{font-size:11.5px;}.exchange-rate-float-value strong{font-size:15px;}}

/* FLOATING CATEGORY MENU */
/* top:50dvh, no 50% -- position:fixed centra su top contra el alto
   "grande" del viewport en algunos navegadores, así que al esconderse
   la barra de direcciones (que reduce el alto real visible) el 50%
   quedaba corriéndose — daba el mismo salto que el hero. dvh sigue al
   alto dinámico real en todo momento. */
/* left: en pantallas más anchas que el contenido (.wrap, máx. 1440px) la
   barra se arrima al borde de los productos en vez de quedar pegada al
   borde de la pantalla, lejos de todo; en pantallas normales el cálculo
   da menos de 14px y queda como siempre. */
.cat-float{position:fixed;left:max(14px, calc((100vw - var(--wrap-max)) / 2 - 20px));top:50dvh;transform:translateY(calc(-50% + var(--cat-lift, 0px)));z-index:190;transition:left .3s ease,opacity .2s ease;}
/* Pantalla demasiado baja para que entre entre el header y el footer. */
.cat-float.is-out{opacity:0;pointer-events:none;}
@media (prefers-reduced-motion:reduce){.cat-float,.cat-float .cat-float-list{transition:none;}}
.cat-float-list{width:48px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:0 20px 50px rgba(0,0,0,0.4);transition:width .2s ease;}
.cat-float-list.expanded{width:230px;}
.cat-float-item{position:relative;}
/* 'Ver todo': separado de las categorías con una línea fina. */
.cat-float-all{padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid var(--border);}
.cat-float-link{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;font-size:13.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;transition:background .15s,color .15s;}
.cat-float-link:hover,.cat-float-link.active{background:var(--bg-elevated-2);color:var(--gold);}
.cat-float-label{opacity:0;transition:opacity .15s;}
.cat-float-list.expanded .cat-float-label{opacity:1;}

.cat-float-hint{position:absolute;left:60px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;background:var(--bg-elevated-2);border:1px solid var(--gold);color:var(--text-primary);padding:10px 12px 10px 14px;border-radius:10px;font-size:13px;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,0.45);animation:cat-hint-nudge 1.8s ease-in-out infinite;}
.cat-float-hint::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%) rotate(45deg);width:11px;height:11px;background:var(--bg-elevated-2);border-left:1px solid var(--gold);border-bottom:1px solid var(--gold);}
.cat-float-hint-arrow{color:var(--gold);font-size:15px;}
.cat-float-hint-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:15px;line-height:1;padding:0;transition:color .15s;}
.cat-float-hint-close:hover{color:var(--text-primary);}
@keyframes cat-hint-nudge{0%,100%{transform:translateY(-50%) translateX(0);}50%{transform:translateY(-50%) translateX(4px);}}
.cat-flyout{position:absolute;left:calc(100% + 12px);top:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:22px;min-width:380px;box-shadow:0 20px 50px rgba(0,0,0,0.4);}
.cat-flyout-title{margin-bottom:14px;}
.cat-flyout-title a{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--gold);}
.cat-flyout-grid{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:4px 24px;}
.cat-flyout-grid a{font-size:13.5px;color:var(--text-secondary);padding:5px 0;transition:color .15s;}
.cat-flyout-grid a:hover{color:var(--gold);}

/* ANIMACIONES REDUCIDAS (Ajustes > Diseño) — apaga solo las animaciones
   decorativas en loop/entrada, no las transiciones de hover/foco. */
.motion-reduced .cms-marcas-track,
.motion-reduced .cat-float-hint,
.motion-reduced .cart-badge.pulse,
.motion-reduced .price-main.price-flash,
.motion-reduced .price-alt.price-flash,
.motion-reduced .currency-toggle .toggle-thumb.to-bob,
.motion-reduced .currency-toggle .toggle-thumb.to-usd{animation:none!important;}

/* ARMA TU PC */
.pcb-issue-pill{font-size:13.5px;font-weight:600;padding:11px 14px;border-radius:8px;line-height:1.5;}
.pcb-issue-pill.err{background:rgba(255,92,92,.16);color:#ff8a8a;border:1px solid rgba(255,92,92,.4);}
.pcb-issue-pill.warn{background:rgba(255,176,32,.16);color:#ffc65c;border:1px solid rgba(255,176,32,.4);}
.pcb-issue-pill.ok{background:rgba(62,207,110,.14);color:#6fe497;border:1px solid rgba(62,207,110,.35);}
.pcb-issues-bar{display:flex;flex-direction:column;gap:6px;margin:20px 0;}

.pcb-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;padding-bottom:80px;}
@media (max-width:860px){.pcb-layout{grid-template-columns:1fr;}}
/* Rediseño Etapa 1: 3 zonas en desktop -- pasos (angosta) / catálogo
   (ancha) / resumen (ya existía como 320px fijos, se mantiene). Antes
   del rediseño el stepper era una barra horizontal FUERA de .pcb-layout;
   ahora es la primera columna, adentro. */
.pcb-layout-3col{grid-template-columns:200px 1fr 320px;}
@media (max-width:1100px){.pcb-layout-3col{grid-template-columns:170px 1fr 300px;}}
@media (max-width:860px){.pcb-layout-3col{grid-template-columns:1fr;}}
/* "Completa tu setup" vive DENTRO de esta columna (no como bloque
   aparte debajo de las dos) — así su posición depende solo de la
   altura del panel del wizard, no de "Tu build" (que con muchas
   piezas elegidas es bastante más alto y antes dejaba un hueco vacío
   debajo del panel corto de review). */
.pcb-left-column{display:flex;flex-direction:column;gap:24px;min-width:0;}

/* "Sorpréndeme" (ver surpriseMe() en pc-builder.blade.php) -- vive
   afuera del wizard de pasos, así se puede usar en cualquier momento.
   El panel de presupuesto es un overlay (position:absolute) en vez de
   contenido normal -- antes empujaba todo lo de abajo (el aviso de
   conflictos, el panel del asistente) cada vez que se abría, ahora
   flota encima sin mover nada. */
.pcb-surprise{margin-bottom:4px;position:relative;}
.pcb-surprise-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:60;padding:18px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.5);width:min(560px, 90vw);}

/* Etapa 2 -- fila que agrupa "Recomiéndame una PC" con el toggle de
   ayuda ("¿Primera vez armando una PC?"), mismo estilo de switch que ya
   usa "Ocultar opciones no compatibles" (.pcb-hide-incompat) para no
   sumar un componente visual nuevo. */
.pcb-top-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:4px;}
/* "Recomiéndame una PC" como acción secundaria (texto, sin pastilla con borde) para que no compita con el paso que se está eligiendo. */
.pcb-surprise>.btn{background:none;border-color:transparent;padding:6px 8px;font-size:13px;color:var(--text-secondary);}
.pcb-surprise>.btn:hover{color:var(--gold);background:none;border-color:transparent;}
.pcb-step-hint-plain{border-left:none;padding:0;margin-bottom:22px;max-width:60ch;}
.pcb-help-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);cursor:pointer;user-select:none;}

/* Pantalla de "eligiendo componentes" (ver startSurprise() en
   pc-builder.blade.php) -- overlay a pantalla completa, fotos al azar
   del catálogo a los costados (decorativas, no son las que termina
   eligiendo) y una barra de progreso puramente por puesta en escena
   -- el filtrado real es instantáneo, esto retrasa la revelación a
   propósito para que se sienta como que "está trabajando". */
.pcb-surprise-loading{position:fixed;inset:0;z-index:500;background:rgba(8,8,8,.94);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;gap:48px;padding:24px;}
.pcb-surprise-loading-img{width:160px;height:160px;object-fit:contain;border-radius:16px;background:var(--bg-elevated);border:1px solid var(--border);padding:16px;opacity:.85;transition:opacity .25s ease;}
.pcb-surprise-loading-center{text-align:center;max-width:320px;}
.pcb-surprise-loading-spinner{font-size:40px;line-height:1;margin-bottom:14px;animation:pcb-surprise-spin 1.1s linear infinite;}
@keyframes pcb-surprise-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.pcb-surprise-loading-center p{color:var(--text-secondary);font-size:14.5px;}
.pcb-surprise-loading-bar{width:100%;height:8px;border-radius:100px;background:var(--bg-elevated-2);overflow:hidden;margin-top:18px;}
.pcb-surprise-loading-bar-fill{height:100%;background:var(--gold);border-radius:100px;transition:width .1s linear;}
@media (prefers-reduced-motion:reduce){.pcb-surprise-loading-spinner{animation:none;}}
.motion-reduced .pcb-surprise-loading-spinner{animation:none;}
@media (max-width:680px){.pcb-surprise-loading{gap:16px;}.pcb-surprise-loading-img{width:84px;height:84px;padding:10px;}}

/* Cards del armado elegido al final (ver .pcb-review-cards en
   pc-builder.blade.php) -- mismo .card/.card-media/.card-body que el
   resto del sitio, en una grilla simple (sin la lógica de "recomendado"
   ni de compatibilidad de las cards del picker, acá solo se muestra lo
   que ya quedó elegido). width:100% es necesario -- .pcb-review es un
   flex column con align-items:flex-start, así que sin esto cada hijo
   (incluido este) se encoge a su contenido en vez de ocupar el ancho
   real disponible, dejando la grilla de acá abajo mucho más angosta de
   lo que debería. 4 columnas fijas (no auto-fill) porque el máximo de
   piezas posibles son 8 (component_types en config/pc_builder.php) --
   así el armado completo entra siempre en 2 filas como mucho, sea cual
   sea el ancho de pantalla, en vez de "todas las que entren". */
.pcb-review-cards{margin-top:28px;width:100%;}
.pcb-review-cards-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px;margin-top:14px;}
@media (max-width:860px){.pcb-review-cards-grid{grid-template-columns:repeat(2, 1fr);}}
/* "Cambiar componente" al pasar el mouse por una card ya armada --
   .card ya tiene overflow:hidden (recorta las esquinas redondeadas del
   overlay solo), pero no position:relative, así que sin esto el botón
   absolute se posicionaría contra el ancestro posicionado más cercano
   que encuentre (podría ser cualquier cosa más arriba en el layout),
   no contra la card en sí. */
.pcb-review-card{position:relative;}
.pcb-review-card-change{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;background:rgba(8,8,8,.86);color:var(--gold);font-family:inherit;font-size:13px;font-weight:600;border:none;cursor:pointer;opacity:0;transition:opacity .18s ease;}
.pcb-review-card:hover .pcb-review-card-change,
.pcb-review-card:focus-within .pcb-review-card-change{opacity:1;}

/* Columna de pasos (rediseño Etapa 1) -- reemplaza la barra horizontal
   .pcb-stepper de antes. 5 estados vía stepState() en el blade: done /
   active / pending / locked / issue -- ver Modelo de estados del plan. */
.pcb-steps-column{position:sticky;top:92px;display:flex;flex-direction:column;gap:20px;}
.pcb-progress-label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--text-muted);margin-bottom:8px;}
.pcb-progress-label strong{color:var(--text-primary);}
.pcb-progress-bar{height:5px;border-radius:100px;background:var(--bg-elevated-2);overflow:hidden;}
.pcb-progress-bar-fill{height:100%;background:var(--gold);border-radius:100px;transition:width .25s ease;}
.pcb-steps-list{display:flex;flex-direction:column;gap:2px;}
.pcb-step-row{display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:9px 8px;border-radius:8px;font-family:inherit;font-size:13px;text-align:left;transition:background-color .15s,color .15s;}
.pcb-step-row:hover:not(:disabled){background:var(--bg-elevated-2);}
.pcb-step-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.pcb-step-row:disabled{cursor:not-allowed;}
.pcb-step-row-icon{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;background:var(--bg-elevated-2);border:1px solid var(--border);transition:background-color .2s,border-color .2s,color .2s;}
.pcb-step-row-icon svg{width:12px;height:12px;}
.pcb-step-row-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcb-step-row.active{color:var(--text-primary);font-weight:600;background:var(--bg-elevated-2);}
.pcb-step-row.active .pcb-step-row-icon{background:var(--gold);border-color:var(--gold);color:#0A0A0B;}
.pcb-step-row.done .pcb-step-row-icon{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
.pcb-step-row.done .pcb-step-row-label{color:var(--text-secondary);}
.pcb-step-row.pending .pcb-step-row-icon{color:var(--text-muted);}
.pcb-step-row.locked{opacity:.4;}
.pcb-step-row.issue{color:#ffc65c;}
.pcb-step-row.issue .pcb-step-row-icon{background:rgba(255,176,32,.16);border-color:#ffc65c;color:#ffc65c;}
@media (max-width:860px){
  .pcb-steps-column{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px;}
  .pcb-progress{flex:1 1 100%;}
  .pcb-steps-list{flex-direction:row;flex-wrap:wrap;gap:4px;}
  .pcb-step-row{padding:6px;}
  .pcb-step-row-label{max-width:70px;font-size:11px;}
}

.pcb-wizard-panel{padding:4px 0 0;min-height:340px;display:flex;flex-direction:column;}
/* Pasada 2 de UX: se aligera -- ya no es una tarjeta con fondo/borde
   propio (eso quedó reservado para pcb-step-hint-extra, un aviso puntual
   y poco frecuente que sí conviene destacar). Menos cajas apiladas por
   paso. */
.pcb-step-hint{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text-secondary);border-left:2px solid var(--border-strong);padding:2px 0 2px 14px;margin-bottom:18px;line-height:1.55;}
.pcb-step-hint-arrow{flex-shrink:0;width:18px;height:22px;color:var(--gold);animation:pcb-hint-bounce 1.4s ease-in-out infinite;}
@keyframes pcb-hint-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
.motion-reduced .pcb-step-hint-arrow{animation:none;}
.pcb-step-hint-extra{background:var(--gold-dim);border:1px solid var(--gold);border-left:3px solid var(--gold);border-radius:10px;padding:12px 14px;color:var(--gold);}

/* Cabecera de cada paso de componente (pasada 2) -- número + nombre +
   ayuda breve, reemplaza el viejo "Elige: X" + caja de ayuda. Tiene que
   ser evidente de un vistazo qué pieza se está eligiendo. */
.pcb-step-header{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.pcb-step-header-num{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--gold);background:var(--gold-dim);border-radius:8px;width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.pcb-step-header-text h3{margin-bottom:2px;font-size:19px;display:flex;align-items:center;gap:8px;}
.pcb-step-header-sub{font-size:13px;color:var(--text-secondary);margin:0;}
.pcb-step-header-desc{font-size:13px;color:var(--text-muted);line-height:1.5;max-width:56ch;}

/* Etapa 2 -- (?) de término técnico junto al nombre del paso. Botón real
   (no solo un span con title) para que sea accesible por teclado y
   lector de pantalla -- title-only no es focuseable en la mayoría de
   navegadores. */
.pcb-info-wrap{position:relative;display:inline-flex;}
.pcb-info-btn{width:18px;height:18px;border-radius:50%;background:var(--bg-elevated-2);border:1px solid var(--border-strong);color:var(--text-secondary);font-family:var(--font-mono);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.pcb-info-btn:hover,.pcb-info-btn[aria-expanded="true"]{border-color:var(--gold);color:var(--gold);}
.pcb-info-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* Bug real (QA): con left:0 el popover se ancla al borde izquierdo del
   (?) y crece hacia la derecha -- en mobile, si el paso está a mitad de
   pantalla (ej. "Procesador"), el texto quedaba cortado contra el borde
   del viewport. Centrado sobre el botón + tope en 100vw-32px (mismo
   gutter de 16px que ya usa el resto del sitio en mobile) para que
   nunca se salga, sea cual sea la posición del botón. */
.pcb-info-popover{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:30;width:min(260px, calc(100vw - 32px));background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:12.5px;font-weight:400;color:var(--text-secondary);line-height:1.5;box-shadow:0 16px 40px rgba(0,0,0,.4);}

/* Etapa 2, solo con "¿Primera vez armando una PC?" activo -- consejo
   rápido + referencia orientativa. Texto plano, sin caja, para no
   volver a la pantalla recargada que se simplificó en la pasada 2. */
.pcb-help-extra{font-size:12.5px;color:var(--text-secondary);line-height:1.5;margin-bottom:14px;}
.pcb-help-extra p{margin:0 0 4px;}
.pcb-help-extra strong{color:var(--text-primary);}

/* Etapa 2 -- "¿Por qué me aparece esto?": <details> nativo, sin JS de
   más para abrir/cerrar y accesible de por sí. */
.pcb-why-details{font-size:12.5px;color:var(--text-secondary);margin-bottom:14px;}
.pcb-why-details summary{cursor:pointer;color:var(--text-muted);text-decoration:underline;}
.pcb-why-details summary:hover{color:var(--text-secondary);}
.pcb-why-details ul{margin:8px 0 0;padding-left:18px;line-height:1.6;}
/* Mensaje de valor del builder (pedido: "CYREX ya está haciendo el
   trabajo técnico") -- solo aparece cuando hasIncompatibleOptions lo
   demuestra con datos reales (ver blade), texto plano sin caja para no
   sumar otro recuadro más. */
.pcb-compat-note{font-size:12.5px;color:#6fe497;margin:0 0 14px;display:flex;align-items:center;gap:6px;}
/* max-height en vez de x-collapse (se quedaba pegado en altura 0 en
   este caso puntual) o grid-template-rows (su animación de fr no se
   sostenía en todos los navegadores probados) -- con un tope generoso
   de sobra sobre el contenido real (una sola fila de botones chicos)
   alcanza para un crecimiento animado prolijo sin depender de medir
   nada por JS ni de soporte de navegador más nuevo. */
.pcb-ram-qty-wrap{max-height:0;overflow:hidden;margin-bottom:0;transition:max-height .25s ease,margin-bottom .25s ease;}
.pcb-ram-qty-wrap.is-open{max-height:80px;margin-bottom:16px;}
@media (prefers-reduced-motion:reduce){.pcb-ram-qty-wrap{transition:none;}}
.motion-reduced .pcb-ram-qty-wrap{transition:none;}
.pcb-ram-qty{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary);}
.pcb-ram-qty button{background:var(--bg-elevated-2);border:1px solid var(--border);color:var(--text-primary);border-radius:100px;padding:6px 14px;font-size:12.5px;cursor:pointer;transition:border-color .15s ease;}
.pcb-ram-qty button:hover{border-color:var(--border-strong);}
.pcb-ram-qty button.active{background:var(--gold);border-color:var(--gold);color:#0A0A0B;font-weight:600;}
.pcb-reset-btn{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:0;}
.pcb-reset-btn:hover{color:var(--red,#ff5c5c);}

.pcb-platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;max-width:480px;}
.pcb-platform-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:14px;padding:28px 16px;cursor:pointer;transition:border-color .15s,transform .15s;color:var(--text-primary);font-family:inherit;}
.pcb-platform-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.pcb-platform-amd{border-color:rgba(255,140,0,.3);}
.pcb-platform-amd:hover{border-color:#ff8c00;box-shadow:0 0 0 1px #ff8c00 inset;}
.pcb-platform-amd .pcb-platform-name{color:#ff8c00;}
.pcb-platform-intel{border-color:rgba(0,130,220,.3);}
.pcb-platform-intel:hover{border-color:#0082dc;box-shadow:0 0 0 1px #0082dc inset;}
.pcb-platform-intel .pcb-platform-name{color:#0082dc;}
.pcb-platform-name{font-family:var(--font-display);font-weight:700;font-size:22px;}
.pcb-platform-sub{font-size:12px;color:var(--text-muted);}

/* Arrastrar el procesador al zócalo — solo escritorio (ver el
   @media(max-width:860px) más abajo, que hace el swap con
   .pcb-platform-grid). Pedido por el usuario tras probar un
   prototipo aparte; mismos tonos AMD/Intel que las tarjetas de arriba. */
.pcb-platform-drag{display:none;}
.pcb-drag-stage{display:grid;grid-template-columns:1fr 170px;gap:32px;align-items:center;max-width:620px;}
.pcb-chip-tray{display:flex;flex-direction:column;gap:14px;}
.pcb-chip{--c:var(--gold);--cd:var(--gold-dim);display:flex;align-items:center;gap:12px;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:14px;padding:14px 18px;cursor:grab;touch-action:none;user-select:none;font-family:inherit;color:var(--text-primary);text-align:left;transition:border-color .15s,box-shadow .2s;position:relative;}
.pcb-chip:hover{border-color:var(--c);}
.pcb-chip.is-dragging{cursor:grabbing;z-index:5;box-shadow:0 20px 40px -12px rgba(0,0,0,.6);transition:none;}
.pcb-chip-swatch{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--cd);color:var(--c);font-family:var(--font-mono);font-size:11px;font-weight:700;}
.pcb-chip-text{display:flex;flex-direction:column;gap:2px;}
.pcb-chip-name{font-family:var(--font-display);font-weight:700;font-size:14px;}
.pcb-chip-sub{font-size:11.5px;color:var(--text-muted);}
.pcb-chip-amd{--c:var(--amd);--cd:var(--amd-dim);}
.pcb-chip-intel{--c:var(--intel);--cd:var(--intel-dim);}

.pcb-socket-zone{display:flex;justify-content:center;}
.pcb-socket{width:150px;height:150px;border-radius:22px;border:2px dashed var(--border-strong);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;background:var(--bg-elevated-2);transition:border-color .2s,background .2s,box-shadow .2s;}
.pcb-socket.hover-target{border-color:var(--gold);background:var(--gold-dim);}
.pcb-socket.is-amd{border-color:var(--amd);background:var(--amd-dim);box-shadow:0 0 0 6px var(--amd-dim);}
.pcb-socket.is-intel{border-color:var(--intel);background:var(--intel-dim);box-shadow:0 0 0 6px var(--intel-dim);}
.pcb-socket-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}
.pcb-drag-hint{margin-top:18px;font-size:12.5px;color:var(--text-muted);}
.motion-reduced .pcb-chip{transition:none;}

@media (min-width:861px){
  .pcb-platform-grid{display:none;}
  .pcb-platform-drag{display:block;}
}

.pcb-mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:640px;margin:8px 0 20px;}
.pcb-mode-card{display:block;text-align:left;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:16px;padding:24px;cursor:pointer;transition:border-color .15s,transform .15s;color:var(--text-primary);font-family:inherit;text-decoration:none;}
.pcb-mode-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.pcb-mode-card-title{display:block;font-family:var(--font-display);font-weight:700;font-size:17px;margin-bottom:8px;}
.pcb-mode-card-sub{display:block;font-size:13px;color:var(--text-muted);line-height:1.5;}

.pcb-complete-setup{padding-top:20px;border-top:1px solid var(--border);}
/* auto-fill en vez de auto-fit (que sí usa .cms-social-page en el resto
   del sitio, sin tocar esa regla compartida): con auto-fit, una tanda
   de 1 o 2 productos estira esas tarjetas para llenar todo el ancho
   disponible — con pocos periféricos cargados se veía una tarjeta
   gigante. auto-fill reserva las columnas de todos modos, así cada
   tarjeta mantiene su tamaño normal aunque la tanda tenga pocas. */
.pcb-complete-setup .cms-social-page{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
/* Mismo motivo que arriba: con 1-2 combos activos nomás, auto-fit
   estiraba esa tarjeta a todo el ancho de la home (tarjeta gigantesca
   reportada por el usuario). */
.cms-combos .cms-social-page{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.pcb-complete-setup .card{max-width:240px;}

/* sticky al fondo: en pasos con muchas opciones (ej. 20+ tarjetas de
   GPU) el botón "Siguiente" quedaba pegado al final de esa grilla larga,
   obligando a scrollear toda la lista para encontrarlo — con sticky se
   queda pegado abajo de la pantalla apenas se llega a su altura, sin
   tener que llegar hasta el final del todo. */
/* Barra de Atrás / estado / Siguiente: una sola fila, sin caja gris -- el fondo es el de la página (solo tapa lo que scrollea por debajo, con un degradado arriba). */
.pcb-step-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:auto;padding:18px 0 14px;position:sticky;bottom:0;background:var(--bg);z-index:5;box-shadow:0 -18px 18px -6px var(--bg);}
.pcb-step-nav-buttons{display:contents;}
.pcb-step-nav-buttons>.btn:first-child{order:1;}
.pcb-step-nav-status{order:2;flex:1;text-align:center;}
.pcb-step-nav-buttons>.btn-primary{order:3;}
.pcb-status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:100px;}
.pcb-status-pill.err{background:rgba(255,92,92,.16);color:#ff8a8a;border:1px solid rgba(255,92,92,.4);}
.pcb-status-pill.warn{background:rgba(255,176,32,.16);color:#ffc65c;border:1px solid rgba(255,176,32,.4);}
.pcb-status-pill.ok{background:rgba(62,207,110,.14);color:#6fe497;border:1px solid rgba(62,207,110,.35);}

.pcb-review{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.pcb-review-check{width:44px;height:44px;border-radius:50%;background:rgba(62,207,110,.12);color:#6fe497;border:1px solid rgba(62,207,110,.3);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:8px;animation:pcb-check-pop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes pcb-check-pop{0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}}
.pcb-step-enter{transition:opacity .22s ease,transform .22s ease;}
.pcb-step-enter-start{opacity:0;transform:translateY(8px);}
.pcb-step-enter-end{opacity:1;transform:translateY(0);}
.pcb-summary-total .v.pcb-total-flash{animation:price-flash .3s ease;}
.motion-reduced .pcb-review-check{animation:none;}
.motion-reduced .pcb-step-enter{transition:opacity .12s ease;}
.motion-reduced .pcb-summary-total .v.pcb-total-flash{animation:none;}
.pcb-card-enter{transition:opacity .18s ease,transform .18s ease;}
.pcb-card-enter-start{opacity:0;transform:scale(.94);}
.pcb-card-enter-end{opacity:1;transform:scale(1);}
.motion-reduced .pcb-card-enter{transition:opacity .12s ease;}
.pcb-tier-badge{margin-top:10px;font-size:13px;background:var(--gold-dim);color:var(--gold);border:1px solid var(--gold);border-radius:10px;padding:10px 14px;}

.pcb-summary-panel{position:sticky;top:92px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:18px;}
.pcb-summary-panel h3{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:14px;}
/* El botón de cerrar solo existe para la hoja de mobile -- en desktop
   el panel ya está siempre visible en su columna, cerrarlo no significa
   nada ahí. */
.pcb-summary-close{display:none;background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:0;line-height:1;}
.pcb-summary-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.pcb-summary-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;}
.pcb-summary-row:last-of-type{border-bottom:none;}
.pcb-summary-row .k{color:var(--text-muted);font-size:13px;display:flex;align-items:center;gap:6px;}
.pcb-summary-row .v{color:var(--text-primary);font-weight:600;text-align:right;}
.pcb-summary-row .v.empty{color:var(--text-muted);font-weight:400;font-style:italic;}
/* Grupos "Componentes" / "Servicios" / "Compatibilidad" / "Consumo"
   (pasada 2) -- antes "Armado e instalación" era una fila más, mezclada
   con las 8 piezas; ahora es evidente que es un servicio aparte, no un
   noveno componente. */
.pcb-summary-group-label{font-size:12px;font-weight:600;color:var(--text-secondary);margin:16px 0 4px;}
.pcb-summary-group-label:first-of-type{margin-top:0;}
.pcb-summary-row-icon{color:var(--text-muted);font-size:11px;}
.pcb-summary-row-icon.is-done{color:var(--gold);}
.pcb-summary-compat{margin-bottom:2px;}
.pcb-summary-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.pcb-summary-total .v{font-family:var(--font-mono);color:var(--gold);font-size:20px;font-weight:700;}
.pcb-summary-alt{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);text-align:right;margin-top:2px;}

.pcb-hide-incompat{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);cursor:pointer;user-select:none;}

/* Pasada 2: se elimina el buscador de texto y la barra de filtros/orden
   siempre visible (catálogo actual muy chico para justificarlos) -- lo
   que queda es un botón "Filtros" que solo aparece cuando el paso tiene
   suficientes productos (showCatalogControls), con un panel chico que
   se abre con SOLO lo relevante para ese paso (campos shop_filter
   reales + orden por precio). Nada nuevo se decide acá: sigue siendo
   currentIssues/hideIncompatible quien determina compatibilidad. */
.pcb-step-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.pcb-filters{position:relative;}
.pcb-filters-toggle{background:var(--bg-elevated-2);border:1px solid var(--border);color:var(--text-secondary);border-radius:100px;padding:7px 16px;font-size:12.5px;font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s;}
.pcb-filters-toggle:hover{border-color:var(--border-strong);color:var(--text-primary);}
.pcb-filters-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.pcb-filters-toggle.is-open{border-color:var(--gold);color:var(--gold);}
.pcb-filters-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:20;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:220px;box-shadow:0 16px 40px rgba(0,0,0,.4);}
.pcb-filters-panel select{background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:100px;padding:8px 14px;color:var(--text-secondary);font-size:12.5px;font-family:inherit;cursor:pointer;}
@media (max-width:480px){.pcb-filters-panel{right:auto;left:0;min-width:200px;}}
.pcb-switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0;}
.pcb-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.pcb-switch-track{position:absolute;inset:0;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:999px;transition:background .15s,border-color .15s;}
.pcb-switch-track::before{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-muted);transition:transform .18s ease,background .15s;}
.pcb-switch input:checked + .pcb-switch-track{background:var(--gold-dim);border-color:var(--gold);}
.pcb-switch input:focus-visible + .pcb-switch-track{outline:2px solid var(--gold);outline-offset:2px;}
.pcb-switch input:checked + .pcb-switch-track::before{transform:translateX(16px);background:var(--gold);}
.motion-reduced .pcb-switch-track::before{transition:background .15s;}

.pcb-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.pcb-picker-card{display:flex;flex-direction:column;text-align:left;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;transition:border-color .15s,opacity .2s;color:var(--text-primary);font-family:inherit;}
.pcb-picker-card:hover:not(.disabled){border-color:var(--gold);}
.pcb-picker-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}
.pcb-picker-card.disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.5);}
.pcb-picker-card-media{width:100%;aspect-ratio:1/1;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:8px;display:flex;align-items:center;justify-content:center;position:relative;}
/* Shimmer detrás de la foto mientras carga (loading="lazy" hace que
   cada tarjeta pida su imagen recién al entrar en pantalla, así que
   antes aparecían de golpe apenas terminaba de bajar) — la imagen
   entra con fade in vía la clase is-loaded, y con :has() el shimmer
   deja de animar una vez que ya se ve la foto encima (si el navegador
   no soporta :has(), el shimmer simplemente nunca se prende — degrada
   bien, la foto igual hace fade-in por su cuenta). ".pcb-complete-setup
   .card-media" no necesita reglas propias: comparte la clase genérica
   .card-media (ver más arriba), que ya cubre exactamente lo mismo.
   Acá el <img> SIEMPRE existe en el DOM (Alpine x-show, no @if de
   Blade) aunque el producto no tenga foto — por eso el gate es
   [src], no solo la presencia del tag: sin foto, Alpine saca el
   atributo src entero (:src con null), así que :has(img[src]) da
   falso y el shimmer ni se prende. */
.pcb-picker-card-media::before{content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-elevated-2) 50%,var(--bg-elevated) 75%);background-size:200% 100%;}
.pcb-picker-card-media:has(img[src]):not(:has(img.is-loaded))::before{opacity:1;animation:pcb-img-shimmer 1.4s ease-in-out infinite;}
.pcb-picker-card-media img{position:relative;opacity:0;transition:opacity .35s ease;}
.pcb-picker-card-media img.is-loaded{opacity:1;}
@keyframes pcb-img-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.motion-reduced .pcb-picker-card-media::before{animation:none;}
.motion-reduced .pcb-picker-card-media img{opacity:1;transition:none;}
.pcb-picker-card-recommended{position:absolute;top:8px;left:8px;z-index:2;background:var(--gold);color:#0A0A0B;font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:100px;}
/* "Agotado"/"Seleccionado" -- top-right, para no chocar con
   "Recomendado" (top-left) cuando ambos badges aplican a la vez. */
.pcb-picker-card-badge{position:absolute;top:8px;right:8px;z-index:2;font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:100px;}
.pcb-picker-card-badge.is-soldout{background:rgba(255,107,107,.16);color:#ff8a8a;border:1px solid rgba(255,107,107,.4);}
.pcb-picker-card-badge.is-selected{background:rgba(62,207,110,.16);color:#6fe497;border:1px solid rgba(62,207,110,.4);}
.pcb-picker-card .opt-price-bob{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);margin-top:1px;}
.pcb-picker-card .opt-name{font-size:12.5px;font-weight:600;margin-bottom:3px;line-height:1.3;}
/* Antes en dorado -- con el dorado reservado para paso activo/CTA/
   selección (pasada 2), el precio pasa a texto normal; la card
   seleccionada ya se distingue sola por su borde dorado. */
.pcb-picker-card .opt-price{font-family:var(--font-mono);font-size:12px;color:var(--text-primary);font-weight:600;}
.pcb-picker-card .opt-tier{font-size:10px;color:var(--text-muted);margin-top:3px;line-height:1.3;}
.pcb-picker-card .opt-reason{font-size:11.5px;font-weight:600;color:#ff8a8a;margin-top:5px;line-height:1.4;}

@media (max-width:520px){
  .pcb-picker-grid{grid-template-columns:repeat(2,1fr);}
}

/* Etapa 2 -- barra inferior sticky + bottom sheet "Ver mi PC" en mobile.
   .pcb-summary-panel es el mismo panel de siempre (nada de markup
   duplicado): acá se lo saca del flujo normal y se lo desliza como
   hoja cuando mobileSummaryOpen es true; en desktop (fuera de este
   media query) sigue siendo el panel sticky de columna de toda la vida. */
.pcb-mobile-bar{display:none;}
.pcb-mobile-backdrop{display:none;}
@media (max-width:860px){
  .pcb-mobile-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:150;
    background:var(--bg-elevated);border-top:1px solid var(--border);
    padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .pcb-mobile-bar-total{display:flex;flex-direction:column;line-height:1.2;}
  .pcb-mobile-bar-total .k{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;color:var(--text-muted);}
  .pcb-mobile-bar-total .v{font-family:var(--font-mono);font-size:17px;font-weight:700;color:var(--gold);}
  .pcb-mobile-bar .btn-cta{width:auto;margin:0;padding:12px 22px;}

  .pcb-mobile-backdrop{display:block;position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.6);}

  .pcb-summary-close{display:block;}
  .pcb-summary-panel{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:210;
    max-height:82vh;overflow-y:auto;border-radius:16px 16px 0 0;
    box-shadow:0 -20px 50px rgba(0,0,0,.5);
    transform:translateY(100%);transition:transform .25s ease;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
  .pcb-summary-panel.is-open-mobile{transform:translateY(0);}
  .motion-reduced .pcb-summary-panel{transition:none;}
  /* Deja lugar para que la barra inferior no tape el botón "Siguiente" /
     "Agregar todo al carrito" del final del flujo. */
  .pcb-layout{padding-bottom:76px;}
}

/* PAGINA 404 */
.error-404{min-height:60dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px;}
.error-404-mascot{width:120px;height:120px;margin-bottom:20px;filter:drop-shadow(0 0 30px rgba(255,217,0,.25));animation:error-404-float 3.5s ease-in-out infinite;}
.error-404 h1{font-size:clamp(26px,4vw,40px);margin:8px 0 14px;max-width:560px;}
.error-404 p{color:var(--text-secondary);font-size:15px;max-width:460px;line-height:1.6;margin-bottom:28px;}
.error-404-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
@keyframes error-404-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.motion-reduced .error-404-mascot{animation:none;}

/* BANNER DE FONDO EN TIENDA */
/* --banner-parallax la actualiza public/js/nav-scroll.js atada al
   scroll. El corrimiento va SOLO en la posición de la foto (segunda
   capa) — el degradado (primera capa) se queda fijo en el centro, ya
   que al no tener relación de aspecto propia, background-size:cover
   lo deja del tamaño exacto del contenedor sin margen de sobra, y
   correrlo dejaría ver un borde sin degradado en un extremo. La foto
   sí desborda de sobra con cover, así que a ella no le pasa nada. Sin
   JS (o con prefers-reduced-motion) cae a 0px, queda igual que antes.
   (Antes hubo también un --banner-parallax-scale con
   background-size:calc(100% * escala) para dar zoom, pero eso
   reemplaza "cover" por un tamaño en % del contenedor que NO respeta
   el aspect ratio real de la foto — con imágenes que no calzan 1:1
   con el banner se veían estiradas/deformadas. Se sacó.) */
.page-head.has-banner{position:relative;background-image:linear-gradient(rgba(8,8,8,.55),rgba(8,8,8,.8)),var(--shop-banner-image);background-size:cover;background-position:center,center calc(50% + var(--banner-parallax, 0px));border-radius:20px;border-bottom:none;padding:64px 32px 36px;margin-top:20px;}
.page-head.has-banner .breadcrumb,.page-head.has-banner h1{text-shadow:0 1px 6px rgba(0,0,0,.5);}
/* Banner de la tienda y de cada categoría: efecto "ventana". La foto va en
   una capa aparte (::before) del alto de la pantalla que nav-scroll.js
   mantiene quieta respecto a la pantalla (--banner-shift = cuánto subió
   el banner): el banner se desliza por encima como un marco y la foto no
   se mueve. Es un transform (lo mueve la tarjeta de video, sin repintar)
   y funciona también en iPhone, donde background-attachment:fixed no.
   El degradado para leer el título va en ::after, pegado al banner.
   Arma tu PC queda afuera: su arte trae texto propio que se cortaría. */
.page-head.has-banner:not(.pcb-hero){background:none;overflow:hidden;isolation:isolate;}
.page-head.has-banner:not(.pcb-hero)::before{content:'';position:absolute;left:0;right:0;top:0;height:100%;background:var(--shop-banner-image) center/cover no-repeat;transform:translate3d(0,var(--banner-shift,0px),0);z-index:-2;pointer-events:none;will-change:transform;}
/* Modo según la forma de la foto (lo decide nav-scroll.js): pantalla
   completa = la capa cubre toda la pantalla y queda quieta; alargada =
   la capa sobra un poco arriba y baja más lento que la página. Mientras
   se detecta, la foto se ve normal, del tamaño del banner. */
.page-head.has-banner[data-banner-mode="window"]:not(.pcb-hero)::before{height:100vh;height:100lvh;}
.page-head.has-banner[data-banner-mode="parallax"]:not(.pcb-hero)::before{top:calc(-1 * var(--banner-extra, 0px));height:calc(100% + var(--banner-extra, 0px));}
.page-head.has-banner:not(.pcb-hero)::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(8,8,8,.55),rgba(8,8,8,.8));z-index:-1;pointer-events:none;}
/* Arma tu PC: banner bajo, con una sola línea de apoyo -- el arte ya trae su propio texto, así que el título va sobre una zona oscurecida (a la izquierda) y el armador queda a la vista sin hacer scroll. */
.page-head.pcb-hero.has-banner{padding:30px 32px 26px;background-image:linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.78) 42%,rgba(8,8,8,.25) 100%),var(--shop-banner-image);}
.page-head.pcb-hero h1{font-size:clamp(24px,3vw,32px);}
.pcb-hero-sub{color:var(--text-secondary);font-size:14px;max-width:560px;margin-top:8px;line-height:1.5;}
.pcb-hero-sub a{white-space:nowrap;}
.pcb-summary-empty{color:var(--text-muted);font-size:13px;line-height:1.6;margin:4px 0 0;padding:18px 0;}
@media (max-width:700px){.page-head.pcb-hero.has-banner{padding:24px 20px 20px;}}

@media (max-width:768px){
  .page-head.has-banner{padding:44px 22px 28px;border-radius:16px;}
}

/* ARMADOS DE LA COMUNIDAD (galería pública de "Arma tu PC") */
/* minmax(0,1fr) en vez de 1fr solo -- un nombre de armado o de
   CPU/GPU sin espacios puede ser más ancho que la columna, y con 1fr a
   secas la pista de grid crece para darle lugar igual (min-width:auto
   implícito), generando scroll horizontal. Con minmax(0,1fr) la pista
   nunca crece más que el espacio disponible, y el texto adentro es el
   que se trunca (ver .build-card-name/.build-card-parts min-width:0). */
.build-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:960px){.build-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.build-grid{grid-template-columns:minmax(0,1fr);}}
.build-card{display:block;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:18px;text-decoration:none;color:var(--text-primary);transition:border-color .2s,transform .2s;}
.build-card-media{aspect-ratio:16/10;background:var(--bg-elevated-2);border-radius:16px 16px 0 0;overflow:hidden;margin:-18px -18px 14px;display:flex;align-items:center;justify-content:center;}
.build-card-media img{width:100%;height:100%;object-fit:contain;padding:14px;}
.build-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.build-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.build-card-name{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.build-card-platform{font-size:11px;font-family:var(--font-mono);color:var(--text-muted);border:1px solid var(--border);border-radius:100px;padding:2px 8px;flex-shrink:0;}
.build-card-parts{color:var(--text-secondary);font-size:13px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.build-card-meta{color:var(--text-secondary);font-size:13px;margin-bottom:10px;}
.build-card-price{font-family:var(--font-mono);font-size:20px;color:var(--gold);margin-bottom:8px;}
.build-card-stats{display:flex;gap:12px;font-size:12px;color:var(--text-muted);margin-bottom:8px;}
.build-card-stats .zero{opacity:.4;}
.build-card-foot{color:var(--text-muted);font-size:12px;}
.build-card-verified{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#6fe497;margin-bottom:8px;}

/* Banner superior opcional de /armados (Setting 'armados_banner_image',
   ver Admin > Ajustes). Sin banner cargado, .armados-hero no tiene la
   clase .has-banner y queda sin ningún estilo propio -- el breadcrumb y
   el .page-head de adentro se ven exactamente como antes. Con banner,
   el fondo llega de punta a punta de la pantalla (.armados-hero no usa
   'wrap') mientras el contenido de adentro sigue alineado al ancho de
   lectura normal -- mismo criterio que .page-head.has-banner (Arma tu
   PC), pero de punta a punta en vez de contenido con bordes redondeados. */
.armados-hero.has-banner{position:relative;background-image:linear-gradient(180deg,rgba(8,8,8,.35) 0%,rgba(8,8,8,.82) 88%,var(--bg) 100%),var(--armados-banner-image);background-size:cover;background-position:center;padding-top:56px;}
.armados-hero.has-banner .breadcrumb{color:rgba(255,255,255,.75);}
.armados-hero.has-banner .breadcrumb,.armados-hero.has-banner .cat-eyebrow,.armados-hero.has-banner h1{text-shadow:0 1px 8px rgba(0,0,0,.65);}
.armados-hero.has-banner .page-head{border-bottom:none;padding-top:16px;padding-bottom:40px;}
@media (max-width:640px){
  .armados-hero.has-banner{padding-top:36px;}
  .armados-hero.has-banner .page-head{padding-bottom:28px;}
}

/* Cabecera + barra de controles de /armados -- rediseño de la galería:
   buscador + botón Filtros (abre panel) + orden en una sola fila
   compacta en vez del muro de filtros siempre abiertos de antes. */
.armados-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.armados-header .btn{flex-shrink:0;}
@media (max-width:640px){.armados-header{flex-direction:column;}.armados-header .btn{width:100%;text-align:center;}}

.armados-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.armados-search{flex:1;min-width:200px;}
.armados-search input{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:100px;padding:10px 16px;color:var(--text-primary);font-size:13.5px;}
@media (max-width:640px){
  .armados-controls{gap:8px;}
  .armados-search{flex-basis:100%;}
  .armados-controls .filters-btn,
  .armados-controls .shop-sort{flex:1;}
  .armados-controls .shop-sort-trigger{width:100%;justify-content:center;}
}

.filters-btn{display:inline-flex;align-items:center;gap:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:100px;color:var(--text-primary);font-family:var(--font-body);font-size:12.5px;font-weight:600;padding:9px 16px;cursor:pointer;transition:border-color .15s;white-space:nowrap;}
.filters-btn:hover{border-color:var(--gold);}
.filters-btn .count{color:var(--gold);}

/* Mismo panel sirve de popover en desktop y de sheet full-screen en
   mobile -- solo cambia el position/tamaño por media query, no el
   marcado. Los filtros en sí siguen siendo links normales (misma
   lógica de siempre, un click = navega con ese filtro aplicado); el
   panel es pura presentación. */
.filters-panel{position:absolute;top:calc(100% + 8px);left:0;width:520px;max-width:calc(100vw - 40px);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:16px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.45);z-index:30;}
.filters-panel-header{display:none;}
.filters-panel-footer{display:flex;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.filters-panel-footer .btn{flex:1;justify-content:center;}
@media (max-width:640px){
  .filters-panel{position:fixed;inset:0;width:100%;max-width:none;border-radius:0;padding:16px;overflow-y:auto;box-shadow:none;}
  .filters-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-weight:600;}
  .filters-panel-footer{position:sticky;bottom:-16px;background:var(--bg-elevated);margin:16px -16px -16px;padding:16px;}
}

.active-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.active-filter-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:100px;padding:6px 8px 6px 14px;font-size:12.5px;color:var(--text-primary);text-decoration:none;}
.active-filter-chip:hover{border-color:var(--gold);}
.active-filter-chip .x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--bg-elevated-2);font-size:11px;}
.active-filters-clear{font-size:12.5px;color:var(--text-muted);text-decoration:underline;}

.results-count{color:var(--text-secondary);font-size:14px;margin-bottom:16px;}
.results-count b{color:var(--text-primary);}

/* Destacado de la semana -- una sola build, al final de la galería
   (antes "Tendencia esta semana" arriba de todo, competía con el
   grid). Horizontal en desktop, vertical en mobile. */
.featured-build{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;background:var(--bg-elevated);border-radius:16px;padding:20px;text-decoration:none;color:var(--text-primary);}
.featured-build:hover{border-color:var(--gold);}
.featured-build-media{aspect-ratio:4/3;background:var(--bg-elevated-2);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.featured-build-media img{width:100%;height:100%;object-fit:contain;padding:14px;}
.featured-build-info{display:flex;flex-direction:column;justify-content:center;gap:6px;}
@media (max-width:640px){.featured-build{grid-template-columns:1fr;}.featured-build-media{aspect-ratio:16/10;}}

.armados-final-cta{text-align:center;padding:48px 20px;}

/* Like/guardar de un armado (ficha individual) -- solo ícono + número,
   sin cápsula grande alrededor (varios badges grandes competían entre
   sí en la versión anterior). */
.build-social{display:flex;align-items:center;gap:18px;margin-top:14px;}
.build-social-btn{display:flex;align-items:center;gap:5px;background:none;border:none;color:var(--text-secondary);padding:4px 2px;font-size:13.5px;cursor:pointer;transition:color .15s;}
.build-social-btn.is-active{color:var(--red);}
.build-social-hint{position:absolute;top:calc(100% + 8px);left:0;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:12px;padding:9px 13px;font-size:12px;color:var(--text-secondary);white-space:nowrap;box-shadow:0 12px 28px rgba(0,0,0,.4);z-index:5;}
.build-social-hint a{color:var(--gold);}
.build-social-views{font-size:13.5px;color:var(--text-muted);}

.build-detail-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;}
.build-detail-item:last-of-type{border-bottom:none;}
.build-detail-media{width:64px;height:64px;border-radius:10px;background:var(--bg-elevated-2);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.build-detail-media img{width:100%;height:100%;object-fit:cover;}
.build-detail-name{flex:1;min-width:0;}
.build-detail-type{color:var(--text-muted);font-size:12px;display:flex;align-items:center;gap:6px;}
.build-detail-price{font-family:var(--font-mono);color:var(--text-secondary);flex-shrink:0;}
.build-stock-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#ffc65c;}

/* "Estado del armado" -- versión detallada (columna izquierda de la
   ficha individual). El panel sticky derecho repite solo una línea
   corta, no esta tarjeta. */
/* Viven adentro de .pcb-summary-panel (ver show.blade.php) -- un
   borde/radio propio se vería como "tarjeta dentro de tarjeta", así
   que solo llevan un separador simple arriba, como ya hacen
   .pcb-summary-row entre sí. */
.build-status-card{border-top:1px solid var(--border);padding-top:16px;margin-top:16px;}
.build-status-card h3{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:12px;}
.build-status-row{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-secondary);padding:5px 0;}

/* Hero visual: gabinete primero, GPU y CPU se suman solo si el trío
   queda equilibrado (ver Blade) -- si no, una sola imagen fuerte. */
.build-hero{background:var(--bg-elevated);border-radius:16px;padding:20px;margin-top:20px;}
.build-hero-trio{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;}
.build-hero-trio img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--bg-elevated-2);border-radius:12px;padding:14px;}
.build-hero-single{display:flex;gap:20px;align-items:center;}
.build-hero-single img{width:180px;height:180px;object-fit:contain;background:var(--bg-elevated-2);border-radius:12px;padding:16px;flex-shrink:0;}
.build-hero-summary{margin-top:14px;color:var(--text-secondary);font-size:13.5px;}

/* Compatibilidad -- <details> nativo, sin JS. */
.build-compat{border-top:1px solid var(--border);padding-top:16px;margin-top:16px;}
.build-compat summary{cursor:pointer;font-size:13px;color:var(--text-muted);list-style:none;}
.build-compat summary::-webkit-details-marker{display:none;}
.build-compat-list{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.build-compat-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.build-compat-row:last-child{border-bottom:none;padding-bottom:0;}
.build-compat-row .detail{color:var(--text-muted);font-size:12.5px;max-width:70ch;}

.pcb-publish-cta{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;background:linear-gradient(135deg,var(--gold-dim),var(--bg-elevated));border:1px solid var(--gold);color:var(--gold);border-radius:16px;padding:16px 18px;cursor:pointer;text-align:left;transition:transform .15s,border-color .15s;}
.pcb-publish-cta:hover{transform:translateY(-2px);}
.pcb-publish-cta svg{flex-shrink:0;}
.pcb-publish-cta span{display:flex;flex-direction:column;gap:2px;}
.pcb-publish-cta strong{font-size:14.5px;color:var(--text-primary);}
.pcb-publish-cta small{font-size:12.5px;color:var(--text-secondary);font-weight:400;}

.build-publish-form{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:20px;margin-top:16px;}
.build-publish-form input[type=text]{width:100%;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text-primary);font-size:14px;outline:none;transition:border-color .15s;margin:10px 0 14px;}
.build-publish-form input[type=text]:focus{border-color:var(--gold);}

/* ============================================================
   PÁGINAS DE MARCA (/marcas/{slug}) -- primera: Ajazz.
   Prefijo .brand- en todo; --brand-accent la define cada página
   inline según Brand.accent_color (fallback al dorado de Cyrex).
   El acento se usa con moderación (bordes, algún texto, tags) nunca
   como fondo dominante -- Cyrex sigue siendo evidente, la marca es
   lo que se está descubriendo, no el dueño de la página.
   ============================================================ */
.brand-page{background:var(--b-bg);color:var(--b-text);}

/* Tema por marca -- Ajazz usa "light" (blanco/gris, estética premium
   tipo Apple/Nothing/Logitech G); el default "dark" mantiene el look
   oscuro original para cualquier otra marca que no pida lo contrario,
   sin tener que duplicar hojas de estilo por marca. Todo el CSS de acá
   para abajo usa SOLO estas variables --b-*, nunca los tokens globales
   directamente, para que cambiar de tema sea invisible al resto del
   sitio. --brand-accent sigue definiéndose inline por página (accent_color
   de la marca) -- es el único token que no depende del tema. */
.brand-page[data-theme="light"]{
  --b-bg:#FFFFFF; --b-bg-alt:#F5F5F5; --b-surface:#EFEFEF;
  --b-text:#111111; --b-text-secondary:#55565B; --b-text-muted:#8A8A90;
  --b-border:rgba(0,0,0,.08); --b-border-strong:rgba(0,0,0,.16);
  --b-dark-bg:#090909; --b-dark-bg-alt:#111111; --b-dark-text:#F5F5F3; --b-dark-text-secondary:#9A9A9E;
  --b-on-accent:#FFFFFF;
  --b-shadow-sm:0 1px 3px rgba(0,0,0,.05); --b-shadow-md:0 16px 40px rgba(0,0,0,.08);
}
.brand-page[data-theme="dark"]{
  --b-bg:var(--bg); --b-bg-alt:var(--bg-elevated); --b-surface:var(--bg-elevated-2);
  --b-text:var(--text-primary); --b-text-secondary:var(--text-secondary); --b-text-muted:var(--text-muted);
  --b-border:var(--border); --b-border-strong:var(--border-strong);
  --b-dark-bg:var(--bg); --b-dark-bg-alt:var(--bg-elevated); --b-dark-text:var(--text-primary); --b-dark-text-secondary:var(--text-secondary);
  --b-on-accent:#0A0A0B;
  --b-shadow-sm:0 2px 8px rgba(0,0,0,.3); --b-shadow-md:0 20px 50px rgba(0,0,0,.45);
}

/* Los botones (.btn-primary/.btn-outline-gold) son clases globales del
   sitio, siempre dorado -- sin esto, CUALQUIER página de marca mostraba
   los CTA del hero y del CTA final en dorado de Cyrex sin importar el
   acento propio de esa marca (bug real, no a propósito: se notó recién
   al probar rojo Ajazz sobre tema oscuro). Acotado a .brand-page para
   no tocar el dorado en el resto del sitio. */
.brand-page .btn-primary{background:var(--brand-accent);color:var(--b-on-accent);border-color:var(--brand-accent);}
.brand-page .btn-outline-gold{border-color:var(--brand-accent);color:var(--brand-accent);}
.brand-page .btn-outline-gold:hover{background:var(--brand-accent);color:var(--b-on-accent);}

/* Patrón de fondo técnico MUY sutil (grilla fina) reusado en varias
   secciones (hero, statement oscuro) -- una sola grilla de líneas de
   1px al 100% de opacidad, pero el color base (--b-border) ya es casi
   transparente (8% en claro), así que el resultado visual real ronda
   3-4% -- exactamente el rango pedido, sin definir una opacidad rara
   sobre un color sólido. La máscara radial la deja más marcada cerca
   de donde hay contenido/foco visual y se apaga en los bordes. */
.brand-bg-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--b-border) 1px, transparent 1px),linear-gradient(90deg, var(--b-border) 1px, transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 65% 30%, black, transparent 75%);mask-image:radial-gradient(ellipse 75% 65% at 65% 30%, black, transparent 75%);}

/* Grilla del hero + brillo del acento (ver .brand-hero arriba) siguen
   el cursor -- ver brand-hero-tilt.js. La transición suaviza entre
   eventos mousemove (que no llegan todos los frames) en vez de saltar
   de golpe; el fondo se mueve más lento que la composición de
   productos (menos px por el mismo movimiento de mouse) para dar
   sensación de profundidad -- lo más lejano se mueve menos. */
/* La grilla del hero se "revela" con una linterna que sigue al cursor
   en vez de la máscara fija que usa el resto de la página (ver
   .brand-bg-grid arriba) -- --spot-x/--spot-y son coordenadas en px
   relativas al propio .brand-hero, actualizadas cada frame de mousemove
   (ver brand-hero-tilt.js), sin transición: el movimiento ya viene
   suave porque se actualiza en cada frame, agregarle una transición
   encima solo metería un delay perceptible entre el cursor y la luz. */
.brand-hero .brand-bg-grid{transition:transform .6s cubic-bezier(.22,1,.36,1);transform:translate(var(--grid-x, 0px), var(--grid-y, 0px));-webkit-mask-image:radial-gradient(circle 420px at var(--spot-x, 65%) var(--spot-y, 30%), black, transparent 75%);mask-image:radial-gradient(circle 420px at var(--spot-x, 65%) var(--spot-y, 30%), black, transparent 75%);}

/* El subnav interno (nombre de marca + links de sección) se sacó --
   quedaba pegado abajo del header principal y no convencía. Las anclas
   del "Encuentra tu {marca} ↓" del hero siguen apuntando a estas
   secciones -- sin esto, saltar al ancla deja el título tapado detrás
   del nav principal (72px sticky). Ver también brand-anchor-scroll.js,
   que hace el scroll a mano en vez de confiar en el salto nativo del
   navegador (más previsible con el header sticky de por medio). */
#para-ti, #categorias, #seleccion, #comparar, #productos{scroll-margin-top:90px;}

/* BRAND HEADER -- micrositio de marca (Brand::custom_layout), reemplaza
   al <nav> global en vez de conviverlo (ver partials/nav.blade.php).
   Arranca transparente sobre el hero (texto según data-header-theme) y
   pasa a sólido/blur al pasar los ~80px de scroll (brand-header-scroll.js
   agrega .is-stuck) -- en ese estado SIEMPRE es blanco/blur, sin
   importar el tema de la marca, para no perder contraste sobre
   cualquier sección que quede debajo. */
.brand-header{position:fixed;top:0;left:0;right:0;z-index:60;height:72px;display:flex;align-items:center;background:transparent;border-bottom:1px solid transparent;color:#fff;transition:background .3s ease,color .3s ease,border-color .3s ease,backdrop-filter .3s ease;}
.brand-header[data-header-theme="light"]{color:#111111;}
/* Al bajar: vidrio oscuro (antes blanco), igual que el header normal del sitio. */
.brand-header.is-stuck{background:rgba(10,10,11,.96);color:#fff;border-bottom-color:rgba(255,255,255,.06);}
.brand-header-inner{display:flex;align-items:center;justify-content:space-between;width:100%;}
.brand-header-logo{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono);color:inherit;}
.brand-header-cyrex{font-size:12.5px;font-weight:600;letter-spacing:.05em;opacity:.7;}
.brand-header-x{opacity:.4;}
.brand-header-brand{color:var(--brand-accent);font-weight:800;font-size:15px;letter-spacing:.02em;}
.brand-header-nav{display:flex;gap:28px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.brand-header-nav a{color:inherit;opacity:.75;transition:opacity .2s ease;}
.brand-header-nav a:hover{opacity:1;}
.brand-header-actions{display:flex;align-items:center;gap:22px;}
.brand-header-back{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:inherit;opacity:.75;transition:opacity .2s ease;white-space:nowrap;}
.brand-header-back:hover{opacity:1;}
.brand-header .cart-icon-btn{color:inherit;}
@media (max-width:900px){.brand-header-nav{display:none;}.brand-header-back{display:none;}}
/* Hero con más aire arriba cuando hay header propio -- el header
   flotante (transparente al inicio, 72px) igual queda encima de los
   primeros px del hero por diseño (efecto overlay a propósito), pero
   sin este empujón el logo/título del hero quedaban pegados contra el
   borde de arriba. */
body.has-brand-layout .brand-hero{padding-top:104px;}

/* BRAND FOOTER -- cierre de campaña de la marca en vez del footer de 4
   columnas de Cyrex. Fondo casi negro siempre (no depende del tema de
   la marca, es la última sección, no otra más de la página). La foto
   "sangra" hacia el borde del footer (overflow:hidden en .brand-footer
   la recorta ahí, no antes) -- en mobile se aplana a un recuadro normal,
   sangrar no tiene sentido en una pantalla angosta. */
.brand-footer{background:#0B0B0B;color:#FFFFFF;overflow:hidden;position:relative;padding-top:110px;}
.brand-footer-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.brand-footer-logo{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;opacity:.55;margin-bottom:26px;}
.brand-footer-headline{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,7vw,96px);line-height:.92;letter-spacing:-0.02em;margin-bottom:26px;}
.brand-footer-text{font-size:16px;color:rgba(255,255,255,.6);max-width:420px;margin-bottom:38px;line-height:1.6;}
.brand-footer-actions{display:flex;gap:16px;flex-wrap:wrap;}
.brand-footer-cta-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:100px;background:var(--brand-accent);color:#FFFFFF;font-weight:600;font-size:14.5px;}
.brand-footer-cta-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:100px;border:1px solid rgba(255,255,255,.25);color:#FFFFFF;font-weight:600;font-size:14.5px;}
.brand-footer-media{position:relative;aspect-ratio:1/1;overflow:visible;}
.brand-footer-media img{position:absolute;top:50%;right:-18%;transform:translateY(-50%);width:150%;max-width:none;}
.brand-footer-bar{border-top:1px solid rgba(255,255,255,.12);margin-top:90px;}
.brand-footer-bar-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding-block:22px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.brand-footer-bar-inner a{color:rgba(255,255,255,.55);transition:color .2s ease;}
.brand-footer-bar-inner a:hover{color:#FFFFFF;}
.brand-footer-tag{color:#FFFFFF;font-weight:700;}
.brand-footer-sep{opacity:.7;}
.brand-footer-copyright{text-align:center;padding:18px 0 28px;font-size:10.5px;color:rgba(255,255,255,.35);font-family:var(--font-mono);letter-spacing:.05em;}
@media (max-width:860px){
  .brand-footer{padding-top:64px;}
  .brand-footer-inner{grid-template-columns:1fr;gap:0;}
  .brand-footer-media{order:-1;aspect-ratio:16/10;overflow:hidden;border-radius:16px;margin-bottom:32px;}
  .brand-footer-media img{position:static;width:100%;height:100%;object-fit:cover;transform:none;}
  .brand-footer-bar-inner{gap:14px;font-size:10px;}
}

/* 1. HERO */
.brand-hero{position:relative;min-height:92vh;display:flex;align-items:center;padding-block:64px;background:radial-gradient(ellipse 900px 600px at calc(85% + var(--glow-dx, 0%)) calc(15% + var(--glow-dy, 0%)), color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 60%), var(--b-bg);overflow:hidden;}
.brand-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.brand-hero-logo{height:clamp(48px, 5vw, 72px);width:auto;object-fit:contain;margin-bottom:26px;}
.brand-hero-title{font-family:var(--font-display);font-weight:800;font-size:clamp(52px,9vw,128px);line-height:.94;letter-spacing:-0.02em;margin-bottom:22px;color:var(--b-text);}
.brand-hero-headline{font-size:clamp(18px,2vw,23px);font-weight:500;color:var(--b-text);max-width:520px;margin-bottom:14px;line-height:1.4;}
.brand-hero-desc{font-size:15px;color:var(--b-text-secondary);max-width:460px;line-height:1.65;margin-bottom:34px;}
.brand-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.brand-hero-composition{position:relative;height:460px;}

/* Variante "dramatic" del hero (ver hero.blade.php, admin -> Marcas ->
   sección 1) -- una sola foto de producto grande de fondo en vez del
   cluster flotando. El scrim va más fuerte a la izquierda (donde vive
   el texto) y se aclara hacia la derecha, para que la foto se sienta
   presente sin comerse la legibilidad -- mismo espíritu que el hero
   con overlay de la home, pero con el acento de la marca en vez del
   dorado fijo. */
.brand-hero--dramatic .brand-bg-grid{display:none;}
.brand-hero--dramatic .brand-hero-inner{grid-template-columns:1fr;}
.brand-hero--dramatic .brand-hero-copy{max-width:640px;}
.brand-hero-dramatic-bg{position:absolute;inset:0;z-index:0;}
.brand-hero-dramatic-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, var(--b-bg) 0%, color-mix(in srgb, var(--b-bg) 78%, transparent) 32%, color-mix(in srgb, var(--b-bg) 30%, transparent) 58%, transparent 78%);}
.brand-hero-dramatic-bg img{width:100%;height:100%;object-fit:cover;object-position:78% center;}
@media (max-width:768px){
  .brand-hero-dramatic-bg::after{background:linear-gradient(180deg, color-mix(in srgb, var(--b-bg) 55%, transparent) 0%, var(--b-bg) 82%);}
  .brand-hero-dramatic-bg img{object-position:center 30%;opacity:.5;}
}
/* Capa interactiva (mouse -- ver brand-hero-tilt.js -- y scroll, cada
   producto a su propia profundidad, --sy) -- SIN transform-origin raro
   ni animation acá, para que el transform que pone JS a través de
   --mx/--my/--sy se aplique tal cual, sin pelearse con nada. */
.brand-hero-product{position:absolute;transition:transform .35s cubic-bezier(.22,1,.36,1);will-change:transform;transform:translate(var(--mx, 0px), calc(var(--my, 0px) + var(--sy, 0px)));}
.brand-hero-product-1{width:64%;height:66%;top:0;right:0;z-index:3;}
.brand-hero-product-2{width:48%;height:48%;bottom:0;left:0;z-index:2;}
.brand-hero-product-3{width:36%;height:36%;bottom:8%;right:18%;z-index:1;}
/* Capa que flota sola (el keyframe de abajo) -- separada de la capa de
   arriba a propósito: una animation sobre "transform" SIEMPRE le gana
   a cualquier otro valor de "transform" para esa propiedad (inline de
   JS incluido), así que si esta animación y el transform interactivo
   de arriba vivieran en el mismo elemento, mouse/scroll dejarían de
   notarse apenas la animación corriera (siempre). Acá adentro van el
   tamaño real, el borde/sombra/recorte redondeado. */
.brand-hero-product-float{width:100%;height:100%;border-radius:22px;overflow:hidden;background:var(--b-bg-alt);border:1px solid var(--b-border);box-shadow:var(--b-shadow-md);animation:brand-float 7s ease-in-out infinite;}
.brand-hero-product img{width:100%;height:100%;object-fit:cover;display:block;}
.brand-hero-product-2 .brand-hero-product-float{animation-delay:-2.3s;}
.brand-hero-product-3 .brand-hero-product-float{animation-delay:-4.6s;}
/* Flotación casi imperceptible, nunca un rebote -- 5-8s por ciclo,
   ease-in-out en las 2 mitades para que no tenga un punto de "freno"
   notorio. Cada capa arranca en un punto distinto del ciclo
   (animation-delay negativo) para que las 3 no floten en sincro,
   que se vería mecánico. Se apaga entera con reduced motion. */
@keyframes brand-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@media (prefers-reduced-motion:reduce){.brand-hero-product-float{animation:none;}}
.motion-reduced .brand-hero-product-float{animation:none;}
/* Entrada escalonada SOLO del hero (no depende de scroll, es lo
   primero que se ve): un data-hero-reveal por hijo directo de
   .brand-hero-copy, con animation-delay creciente puesto inline por
   Blade (100-150ms entre uno y el siguiente) -- mismo keyframe/easing
   que .page-nav-enter ya usa en el resto del sitio (fade+translateY,
   cubic-bezier(.22,1,.36,1)), no una curva nueva. */
[data-hero-reveal]{opacity:0;transform:translateY(20px);animation:brand-hero-in .55s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes brand-hero-in{to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){[data-hero-reveal]{opacity:1;transform:none;animation:none;}}
.motion-reduced [data-hero-reveal]{opacity:1;transform:none;animation:none;}
@media (max-width:900px){
  .brand-hero{min-height:auto;padding-block:48px 40px;}
  .brand-hero-inner{grid-template-columns:1fr;}
  .brand-hero-title{font-size:clamp(44px,14vw,64px);}
  .brand-hero-composition{height:300px;margin-top:36px;order:-1;}
  .brand-hero-product-float{animation:none;}
}

/* 2. STATEMENT (filosofía / "diseña tu setup" oscuro) -- un solo
   componente reusado en 2 lugares con --variant distinto: texto
   centrado, mucho espacio negativo, sin foto (a propósito -- esta
   sección es un statement tipográfico, la foto de producto ya tiene
   su propio protagonismo en la sección 5). */
.brand-statement{padding-block:130px;text-align:center;position:relative;overflow:hidden;}
.brand-statement-inner{position:relative;z-index:1;max-width:860px;margin:0 auto;}
.brand-statement-eyebrow{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-accent);margin-bottom:20px;}
.brand-statement-title{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,6vw,64px);line-height:1.08;letter-spacing:-0.01em;text-wrap:balance;}
.brand-statement-body{margin-top:22px;font-size:16px;line-height:1.7;max-width:560px;margin-inline:auto;}
.brand-statement--light{background:var(--b-bg);color:var(--b-text);}
.brand-statement--light .brand-statement-body{color:var(--b-text-secondary);}
.brand-statement--dark{background:var(--b-dark-bg);color:var(--b-dark-text);min-height:64vh;display:flex;align-items:center;justify-content:center;}
.brand-statement--dark .brand-statement-body{color:var(--b-dark-text-secondary);}
.brand-statement--dark .brand-bg-grid{opacity:.5;}
.brand-statement--dark::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at calc(30% + var(--glow-dx, 0%)) calc(35% + var(--glow-dy, 0%)), color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 60%);pointer-events:none;}
@media (max-width:640px){.brand-statement{padding-block:80px;}.brand-statement--dark{min-height:auto;padding-block:96px;}}

/* 3. EDITORIAL (foto + texto -- "AJAZZ en Cyrex") */
.brand-editorial{padding-block:120px;}
.brand-editorial-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.brand-editorial-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.15;letter-spacing:-0.01em;margin:14px 0 20px;text-wrap:balance;color:var(--b-text);}
.brand-editorial-body{font-size:16px;color:var(--b-text-secondary);line-height:1.75;max-width:440px;}
.brand-editorial-media{aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--b-bg-alt);border:1px solid var(--b-border);}
.brand-editorial-media img{width:100%;height:100%;object-fit:cover;}
@media (max-width:860px){.brand-editorial{padding-block:72px;}.brand-editorial-inner{grid-template-columns:1fr;gap:32px;}.brand-editorial-media{order:-1;aspect-ratio:16/10;}}

/* 3B. VIDRIERA DE PRODUCTO -- un solo producto insignia a gran escala,
   con sus specs clave como etiquetas flotando alrededor de la foto en
   vez de una lista/tarjetas. En mobile las etiquetas dejan de flotar
   (no hay espacio) y pasan a chips en fila debajo de la foto. */
.brand-showcase{padding-block:120px;background:var(--b-bg-alt);}
.brand-showcase-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
.brand-showcase-media{position:relative;aspect-ratio:1/1;background:var(--b-surface);box-shadow:var(--b-shadow-md);border-radius:28px;}
.brand-showcase-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:28px;}
.brand-showcase-tag{position:absolute;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--b-text);background:var(--b-bg);border:1px solid var(--b-border-strong);padding:7px 14px;border-radius:100px;box-shadow:var(--b-shadow-sm);white-space:nowrap;}
.brand-showcase-tag-1{top:9%;left:-3%;}
.brand-showcase-tag-2{top:32%;right:-4%;}
.brand-showcase-tag-3{bottom:20%;left:-2%;}
.brand-showcase-tag-4{bottom:6%;right:6%;}
.brand-showcase-eyebrow{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-accent);margin-bottom:12px;}
.brand-showcase-model{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6vw,84px);line-height:.95;letter-spacing:-.02em;margin-bottom:6px;color:var(--b-text);}
.brand-showcase-stat{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--brand-accent);margin-bottom:20px;letter-spacing:.03em;}
.brand-showcase-tagline{font-size:17px;color:var(--b-text-secondary);line-height:1.6;max-width:400px;margin-bottom:30px;}
.brand-showcase-link{display:inline-block;font-weight:600;font-size:15px;color:var(--b-text);border-bottom:2px solid var(--brand-accent);padding-bottom:2px;}
@media (max-width:900px){
  .brand-showcase{padding-block:72px;}
  .brand-showcase-inner{grid-template-columns:1fr;gap:28px;}
  .brand-showcase-media{aspect-ratio:4/3;overflow:visible;box-shadow:none;background:none;}
  .brand-showcase-media img{border-radius:20px;box-shadow:var(--b-shadow-md);}
  .brand-showcase-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
  .brand-showcase-tag{position:static;}
}

/* 4. ENCUENTRA TU [MARCA] -- tarjetas conceptuales, NO dependen de que
   existan productos (a diferencia de la versión anterior). Fondo
   claro/tarjeta con ícono, no foto de fondo -- mismo criterio que
   Apple/Nothing: producto, tipografía y espacio, no una foto grande
   detrás de cada tarjeta. Si la tarjeta SÍ tiene productos cargados,
   los chips aparecen igual que antes al abrir/hacer hover. */
.brand-finder{padding-block:110px;}
.brand-section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,42px);letter-spacing:-0.01em;text-wrap:balance;color:var(--b-text);}
.brand-section-subtitle{margin-top:14px;margin-bottom:44px;max-width:480px;color:var(--b-text-secondary);font-size:15.5px;line-height:1.6;}
.brand-section-title:only-child{margin-bottom:44px;}
.brand-finder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.brand-finder-card{position:relative;border-radius:20px;background:var(--b-bg-alt);border:1px solid var(--b-border);box-shadow:var(--b-shadow-sm);cursor:pointer;padding:30px 26px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease;}
.brand-finder-card:hover{transform:translateY(-5px);border-color:var(--brand-accent);box-shadow:var(--b-shadow-md);}
.brand-finder-card-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--b-surface);color:var(--brand-accent);font-family:var(--font-mono);font-weight:700;font-size:15px;margin-bottom:22px;transition:transform .25s ease;}
.brand-finder-card:hover .brand-finder-card-icon{transform:translate(3px,-3px);}
.brand-finder-card-body h3{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.01em;margin-bottom:10px;color:var(--b-text);transition:transform .25s ease;}
.brand-finder-card:hover .brand-finder-card-body h3{transform:translateX(2px);}
.brand-finder-card-body p{font-size:13.5px;color:var(--b-text-secondary);line-height:1.55;margin-bottom:16px;}
.brand-finder-card-media{display:none;}
.brand-finder-card-products{display:flex;flex-direction:column;gap:6px;max-height:0;overflow:hidden;transition:max-height .3s ease,margin-bottom .3s ease;margin-bottom:0;}
.brand-finder-product-chip{font-size:12.5px;color:var(--b-text-secondary);padding:8px 10px;background:var(--b-surface);border-radius:8px;transition:color .15s,background .15s;}
.brand-finder-product-chip:hover{color:var(--b-text);}
.brand-finder-cta{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--brand-accent);margin-top:auto;padding-top:14px;}
.brand-finder-cta-arrow{opacity:0;transform:translateX(-4px);transition:opacity .25s ease,transform .25s ease;}
.brand-finder-card:hover .brand-finder-cta-arrow{opacity:1;transform:translateX(0);}
/* Desktop: hover revela la lista de productos (si hay). Mobile: tap
   alterna la misma lista vía Alpine (:class is-open) -- por eso
   .is-open repite el mismo max-height que el :hover de acá abajo, así
   funciona igual sin depender del hover. */
@media (hover:hover){.brand-finder-card:hover .brand-finder-card-products{max-height:220px;margin-bottom:16px;}}
.brand-finder-card-products.is-open{max-height:220px;margin-bottom:16px;}
@media (max-width:1024px){.brand-finder-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.brand-finder-grid{grid-template-columns:1fr;}}

/* 4B. ELIGE TU ESTILO -- pósters grandes de ambiente/lifestyle (no
   producto en fondo blanco de catálogo), con zoom sutil al hover y el
   nombre/número superpuestos abajo sobre un scrim oscuro -- por eso el
   texto queda siempre en blanco acá adentro, sin importar el tema de
   la página (el fondo real es la foto, no --b-bg). */
.brand-lifestyle{padding-block:120px;}
.brand-lifestyle-head{max-width:640px;margin-bottom:52px;}
.brand-lifestyle-subtitle{margin-top:14px;color:var(--b-text-secondary);font-size:15.5px;line-height:1.6;}
.brand-lifestyle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.brand-lifestyle-item{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--b-surface);color:inherit;}
.brand-lifestyle-media{position:absolute;inset:0;}
.brand-lifestyle-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1);}
.brand-lifestyle-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.7) 100%);}
@media (hover:hover){.brand-lifestyle-item:hover .brand-lifestyle-media img{transform:scale(1.06);}}
.brand-lifestyle-label{position:absolute;left:22px;right:22px;bottom:22px;z-index:1;color:#FFFFFF;}
.brand-lifestyle-num{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;opacity:.75;margin-bottom:6px;}
.brand-lifestyle-label h3{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-0.01em;}
.brand-lifestyle-desc{margin-top:5px;font-size:12.5px;opacity:.8;line-height:1.4;}
@media (max-width:860px){.brand-lifestyle{padding-block:72px;}.brand-lifestyle-grid{grid-template-columns:1fr;gap:14px;}.brand-lifestyle-item{aspect-ratio:16/11;}}

/* 5. EXPLORA [MARCA] */
.brand-explore{padding-block:0 0;}
.brand-explore .wrap{display:flex;flex-direction:column;gap:2px;}
.brand-explore-block{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;min-height:340px;padding:48px 8px;border-top:1px solid var(--b-border);color:inherit;overflow:hidden;}
.brand-explore-block:last-child{border-bottom:1px solid var(--b-border);}
.brand-explore-media{aspect-ratio:16/11;border-radius:18px;overflow:hidden;background:var(--b-bg-alt);order:2;transition:transform .5s cubic-bezier(.22,1,.36,1);}
.brand-explore-media img{width:100%;height:100%;object-fit:cover;}
.brand-explore-block:nth-child(even) .brand-explore-media{order:0;}
@media (hover:hover){.brand-explore-block:hover .brand-explore-media{transform:scale(1.03);}}
.brand-explore-num{font-family:var(--font-mono);font-size:13px;color:var(--b-text-muted);letter-spacing:.05em;}
.brand-explore-body h3{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.4vw,38px);margin:10px 0 12px;color:var(--b-text);}
.brand-explore-body p{color:var(--b-text-secondary);font-size:15px;line-height:1.6;max-width:380px;margin-bottom:16px;}
.brand-explore-cta{font-size:13.5px;font-weight:600;color:var(--brand-accent);}
@media (max-width:860px){.brand-explore-block{grid-template-columns:1fr;gap:24px;padding-block:36px;min-height:auto;}.brand-explore-media{order:-1 !important;aspect-ratio:16/10;}}

/* 6. TECNOLOGÍA -- chips de texto libre (cada marca tiene tecnologías
   distintas, no hay una lista fija). El acento rojo/de marca aparece
   como un punto pequeño al hacer hover, no tiñe el chip entero. */
.brand-technology{padding-block:100px;}
.brand-tech-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.brand-tech-chip{position:relative;font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:13px 20px 13px 26px;border-radius:100px;border:1px solid var(--b-border);color:var(--b-text);background:var(--b-bg-alt);transition:background .2s ease,color .2s ease,border-color .2s ease;}
.brand-tech-chip::before{content:'';position:absolute;left:11px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--brand-accent);opacity:.55;transition:opacity .2s ease;}
.brand-tech-chip:hover{background:var(--b-dark-bg);color:var(--b-dark-text);border-color:var(--b-dark-bg);}
.brand-tech-chip:hover::before{opacity:1;}
.brand-tech-disclaimer{margin-top:22px;font-size:12.5px;color:var(--b-text-muted);}

/* 7. CYREX SELECTION */
.brand-selection{padding-block:120px;}
.brand-selection-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
.brand-selection-media{aspect-ratio:1/1;border-radius:24px;overflow:hidden;background:var(--b-bg-alt);border:1px solid var(--b-border);}
.brand-selection-media img{width:100%;height:100%;object-fit:cover;}
.brand-selection-copy h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.6vw,38px);margin:8px 0 18px;color:var(--b-text);}
.brand-selection-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;}
.brand-selection-tag{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:6px 12px;border-radius:100px;border:1px solid color-mix(in srgb, var(--brand-accent) 40%, var(--b-border));color:var(--brand-accent);}
.brand-selection-why-title{font-size:14px;font-weight:600;color:var(--b-text);margin-bottom:8px;}
.brand-selection-why{color:var(--b-text-secondary);font-size:15px;line-height:1.7;margin-bottom:28px;max-width:440px;}
@media (max-width:860px){.brand-selection{padding-block:64px;}.brand-selection-inner{grid-template-columns:1fr;gap:28px;}}

/* 8. COMPARADOR */
.brand-compare{padding-block:110px;}
.brand-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.brand-compare-card{background:var(--b-bg-alt);border:1px solid var(--b-border);border-radius:18px;padding:22px;}
.brand-compare-media{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--b-surface);margin-bottom:16px;}
.brand-compare-media img{width:100%;height:100%;object-fit:cover;}
.brand-compare-card h4{font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:14px;color:var(--b-text);}
.brand-compare-specs{margin-bottom:18px;}
.brand-compare-spec-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--b-border);font-size:12.5px;}
.brand-compare-spec-row dt{color:var(--b-text-muted);}
.brand-compare-spec-row dd{color:var(--b-text);text-align:right;}

/* 9. CONTENIDO CYREX */
.brand-content{padding-block:110px;}
.brand-content-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;margin-top:44px;align-items:start;}
.brand-content-embed{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--b-bg-alt);}
.brand-content-embed iframe{width:100%;height:100%;border:0;display:block;}
.brand-content-main h4{margin-top:14px;font-size:15px;font-weight:600;color:var(--b-text);}
.brand-content-list{display:flex;flex-direction:column;gap:20px;}
.brand-content-item span{display:block;margin-top:8px;font-size:13px;color:var(--b-text-secondary);}
@media (max-width:900px){.brand-content-grid{grid-template-columns:1fr;}.brand-content-list{flex-direction:row;overflow-x:auto;gap:14px;}.brand-content-item{flex:0 0 220px;}}

/* 10. COMUNIDAD */
.brand-community{padding-block:110px;}
.brand-community-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.brand-community-card{border-radius:16px;overflow:hidden;background:var(--b-bg-alt);border:1px solid var(--b-border);}
.brand-community-media{aspect-ratio:4/5;}
.brand-community-media img{width:100%;height:100%;object-fit:cover;display:block;}
.brand-community-body{padding:16px;}
.brand-community-body p{font-size:13.5px;color:var(--b-text-secondary);line-height:1.5;margin-bottom:10px;}
.brand-community-tags{display:flex;flex-wrap:wrap;gap:6px;}
.brand-community-tags span{font-size:11px;color:var(--b-text-muted);background:var(--b-surface);padding:4px 9px;border-radius:100px;}

/* 11. CATÁLOGO -- filtros + orden + grilla + "cargar más" + skeleton.
   auto-fill (no auto-fit) a propósito: con pocos productos las cards
   quedan a su tamaño natural alineadas a la izquierda, en vez de
   estirarse para llenar el ancho (punto 23 del pedido). */
.brand-catalog{padding-block:110px 90px;}
.brand-catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:32px;}
.brand-catalog-filters{display:flex;gap:8px;flex-wrap:wrap;}
.brand-filter-chip{font-size:13px;padding:9px 18px;border-radius:100px;border:1px solid var(--b-border);color:var(--b-text-secondary);transition:border-color .15s,color .15s,background .15s;}
.brand-filter-chip:hover{color:var(--b-text);border-color:var(--b-border-strong);}
.brand-filter-chip.is-active{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--b-on-accent);font-weight:600;}
.brand-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;justify-content:start;}
/* partials/product-card.blade.php es compartido por todo el sitio y
   usa los tokens globales oscuros (.card{background:var(--bg-elevated)}
   etc.) -- correcto en el resto de la tienda, pero desentona sobre un
   catálogo de marca con tema claro. Se pisan acá SOLO las propiedades
   de color, nunca la estructura/tamaño de la card, para que siga
   siendo la misma card de siempre en todos lados salvo el color. El
   precio se deja en --gold a propósito (es la misma señal visual de
   "esto es el precio" en toda la tienda). */
.brand-catalog-grid .card{background:var(--b-bg-alt);border-color:var(--b-border);}
.brand-catalog-grid .card:hover{border-color:var(--b-border-strong);}
.brand-catalog-grid .card-cat,
.brand-catalog-grid .card-price small,
.brand-catalog-grid .card-price-original,
.brand-catalog-grid .card-price-from{color:var(--b-text-muted);}
.brand-catalog-empty{color:var(--b-text-secondary);font-size:14px;}
/* Cambiar de categoría/orden ya no recarga la página (ver
   brand-catalog.js) -- mientras espera la respuesta, la grilla se
   atenúa un poco (misma señal de "cargando" liviana, sin tapar todo
   con un spinner); al llegar, las cards entran en cascada reusando el
   keyframe shop-card-in que ya usan /tienda y la navegación suave
   entre productos -- mismo lenguaje de movimiento en todo el sitio. */
.brand-catalog-grid{transition:opacity .2s ease;}
.brand-catalog-grid.is-loading{opacity:.4;pointer-events:none;}
.brand-catalog-grid.is-entering .card{opacity:0;animation:shop-card-in .5s cubic-bezier(.22,1,.36,1) forwards;}
.brand-catalog-grid.is-entering .card:nth-child(1){animation-delay:.02s;}
.brand-catalog-grid.is-entering .card:nth-child(2){animation-delay:.06s;}
.brand-catalog-grid.is-entering .card:nth-child(3){animation-delay:.10s;}
.brand-catalog-grid.is-entering .card:nth-child(4){animation-delay:.14s;}
.brand-catalog-grid.is-entering .card:nth-child(5){animation-delay:.18s;}
.brand-catalog-grid.is-entering .card:nth-child(6){animation-delay:.22s;}
.brand-catalog-grid.is-entering .card:nth-child(7){animation-delay:.26s;}
.brand-catalog-grid.is-entering .card:nth-child(8){animation-delay:.30s;}
.brand-catalog-grid.is-entering .card:nth-child(9){animation-delay:.34s;}
.brand-catalog-grid.is-entering .card:nth-child(10){animation-delay:.38s;}
.brand-catalog-grid.is-entering .card:nth-child(11){animation-delay:.42s;}
.brand-catalog-grid.is-entering .card:nth-child(n+12){animation-delay:.46s;}
@media (prefers-reduced-motion:reduce){.brand-catalog-grid.is-entering .card{opacity:1;animation:none;}}
.motion-reduced .brand-catalog-grid.is-entering .card{opacity:1;animation:none;}
.brand-load-more-row{display:flex;justify-content:center;margin-top:48px;}
.brand-load-more-row .btn[disabled]{opacity:.6;cursor:default;}
/* Skeleton -- reusa el keyframe card-img-shimmer ya definido para las
   cards de producto (no se redefine), solo cambia la caja/colores. */
.brand-skeleton-card{border-radius:16px;overflow:hidden;background:var(--b-bg-alt);border:1px solid var(--b-border);}
.brand-skeleton-media{aspect-ratio:1/1;background:linear-gradient(90deg,var(--b-surface) 25%,var(--b-bg-alt) 50%,var(--b-surface) 75%);background-size:200% 100%;animation:card-img-shimmer 1.4s ease-in-out infinite;}
.brand-skeleton-line{height:11px;border-radius:6px;background:var(--b-surface);margin:16px 16px 0;}
.brand-skeleton-line.is-short{width:55%;margin-top:10px;margin-bottom:16px;}
@media (prefers-reduced-motion:reduce){.brand-skeleton-media{animation:none;}}
.motion-reduced .brand-skeleton-media{animation:none;}

/* 12. CTA FINAL -- se queda oscuro sin importar el tema de la página
   (punto 26 pide fondo negro/rojo oscuro específicamente acá, es la
   sección de conversión, contrasta a propósito con el resto claro). */
.brand-final-cta{padding-block:130px;background:var(--b-dark-bg);color:var(--b-dark-text);}
.brand-final-cta-inner{max-width:720px;margin:0 auto;text-align:center;}
.brand-final-cta-inner h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4.5vw,46px);line-height:1.15;letter-spacing:-0.01em;margin:14px 0 20px;text-wrap:balance;color:var(--b-dark-text);}
.brand-final-cta-inner p{color:var(--b-dark-text-secondary);font-size:15.5px;line-height:1.65;max-width:520px;margin:0 auto 34px;}
.brand-final-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.brand-cta-arrow{display:inline-block;transition:transform .2s ease;}
.brand-final-cta-actions .btn:hover{transform:scale(1.02);}
.brand-final-cta-actions .btn:hover .brand-cta-arrow{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){.brand-final-cta-actions .btn:hover{transform:none;}.brand-final-cta-actions .btn:hover .brand-cta-arrow{transform:none;}}
@media (max-width:600px){.brand-final-cta{padding-block:80px;}}

/* Header transparente -> blanco con blur sobre el hero de marca (ver
   nav-scroll.js/nav.blade.php) -- misma técnica que nav-hero-mode
   (progreso 0-1 vía --nav-progress), pero terminando en blanco+blur en
   vez del scrim oscuro pensado para el hero de video de la home. */
.nav-hero-mode--light{background:rgba(255,255,255,calc(var(--nav-progress, 0) * .97));border-bottom:1px solid rgba(0,0,0,calc(var(--nav-progress, 0) * .08));}

/* ============================================================
   VELO DE TRANSICIÓN entre una página normal y una página de
   marca (ej. "AJAZZ — Conoce la marca" en /producto/{slug}).
   No reemplaza el sistema de soft-nav de page-nav.js (que a
   propósito solo cubre tienda↔producto) -- esto es una navegación
   REAL (hard nav), el velo solo tapa el hueco en blanco del
   navegador mientras carga (ver public/js/brand-transition.js).
   Reusa el color de acento de la marca de destino (--veil-color,
   seteado inline por JS desde data-brand-accent del link).

   Un mosaico de cuadros que se cierra en diagonal (cada uno con su
   propio transition-delay, ver brand-transition.js) -- se probaron
   antes un círculo creciendo desde el click (se sentía como un flash
   en pantallas grandes) y un fundido plano de opacidad (funcionaba
   pero se sentía chico para la transición hacia una marca). visibility
   arranca en hidden -- sin esto, aunque los cuadros midan scale(0),
   siguen ocupando la capa por encima de todo el sitio (z-index alto),
   y con eso alcanza para bloquear el primer click en algunos casos. */
.brand-transition-veil{position:fixed;inset:0;z-index:9999;pointer-events:none;visibility:hidden;display:grid;grid-template-columns:repeat(var(--veil-cols, 12), 1fr);grid-template-rows:repeat(var(--veil-rows, 7), 1fr);}
.brand-transition-tile{background:var(--veil-color,#0a0a0a);transform:scale(0);}

/* Anuncio de la tienda (partials/announcement.blade.php, Admin →
   Contenido → Anuncio): tarjeta chica abajo a la derecha, sin fondo
   oscuro ni bloqueo -- la página se sigue usando normal. A la derecha
   porque los botones del hero del inicio están abajo a la izquierda; si
   está la "Tasa del día" (también abajo a la derecha), el script la
   apila por encima. */
.site-announcement{position:fixed;right:20px;bottom:20px;z-index:180;width:300px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -12px rgba(0,0,0,.6);}
.site-announcement-close{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border-radius:50%;border:none;background:rgba(10,10,11,.72);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.site-announcement-close:hover{background:rgba(10,10,11,.9);color:var(--gold);}
.site-announcement-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.site-announcement-media{display:block;background:var(--bg-elevated-2);}
.site-announcement-media img{display:block;width:100%;height:auto;max-height:240px;object-fit:cover;}
.site-announcement-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.site-announcement-title{font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.25;padding-right:22px;}
.site-announcement-media+.site-announcement-body .site-announcement-title{padding-right:0;}
.site-announcement-text{font-size:13px;line-height:1.5;color:var(--text-secondary);margin:0;}
.site-announcement-cta{margin-top:6px;}
.site-announcement-enter,.site-announcement-leave{transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);}
.site-announcement-enter-start,.site-announcement-leave-end{opacity:0;transform:translateY(24px);}
.site-announcement-enter-end,.site-announcement-leave-start{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.site-announcement-enter,.site-announcement-leave{transition:opacity .2s ease;}.site-announcement-enter-start,.site-announcement-leave-end{transform:none;}}
.motion-reduced .site-announcement-enter,.motion-reduced .site-announcement-leave{transition:opacity .2s ease;}
/* Escritorio con mouse: al pasarle el mouse la tarjeta (y la imagen)
   se agranda, anclada a su esquina -- crece hacia arriba y a la izquierda. */
@media (hover:hover) and (pointer:fine) and (min-width:641px){
  .site-announcement{transition:width .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;}
  .site-announcement-media img{transition:max-height .35s cubic-bezier(.22,1,.36,1);}
  .site-announcement:hover{width:440px;box-shadow:0 30px 80px -12px rgba(0,0,0,.75);}
  .site-announcement:hover .site-announcement-media img{max-height:min(460px,calc(100vh - 230px));}
}
.site-announcement-backdrop{display:none;}
/* Celular: aviso centrado con fondo oscuro -- una tarjeta en la esquina
   dejaba la imagen diminuta. Se cierra con la x o tocando afuera, y la
   página de atrás no scrollea mientras está abierto. Centrado con
   inset+margin:auto (no con transform) para no pisar la animación de
   entrada. */
@media (max-width:640px){
  .site-announcement-backdrop{display:block;position:fixed;inset:0;z-index:330;background:rgba(5,5,6,.72);backdrop-filter:blur(3px);}
  .site-announcement{z-index:331;inset:0;margin:auto;width:min(420px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 48px);overflow-y:auto;border-radius:18px;}
  .site-announcement-media img{max-height:62dvh;object-fit:contain;background:#0A0A0B;}
  .site-announcement-body{padding:14px 16px 18px;}
  .site-announcement-cta{align-self:stretch;text-align:center;justify-content:center;}
  .site-announcement-close{width:32px;height:32px;font-size:19px;}
  html.announcement-open,html.announcement-open body{overflow:hidden;}
}

/* Header que se achica al scrollear en el resto del sitio (tienda,
   producto, etc.), igual que en la portada. --nav-progress lo pone
   nav-scroll.js (0 arriba, 1 tras ~120px). A diferencia de la portada
   (header fixed, fuera del flujo), aquí el header es sticky y ocupa
   lugar: lo que se achica se devuelve como margin-bottom, así el alto
   total no cambia y el contenido de abajo no salta mientras se scrollea. */
nav.nav-compact{margin-bottom:calc(12px * var(--nav-progress, 0));}
nav.nav-compact .nav-inner{min-height:calc(72px - (12px * var(--nav-progress, 0)));padding-block:calc(12px - (4px * var(--nav-progress, 0)));transition:none;}
@media (min-width:1025px){
  nav.nav-compact .logo-full{height:calc(var(--nav-logo-h, var(--logo-height, 60px)) * (1 - .3 * var(--nav-progress, 0)));transition:none;}
  nav.nav-compact .nav-search{height:calc(44px - (8px * var(--nav-progress, 0)));transition:border-color .15s ease;}
  /* Aquí el alto lo marca el logo (configurable en Ajustes) si pasa de
     72px: alto del header = max(72px, logo + padding). Lo devuelto como
     margen es la diferencia exacta entre ese alto arriba de todo y el
     alto actual, para que el contenido no se mueva ni 1px. */
  nav.nav-compact{margin-bottom:calc(max(72px, var(--nav-logo-h, var(--logo-height, 60px)) + 24px) - max(72px - (12px * var(--nav-progress, 0)), (var(--nav-logo-h, var(--logo-height, 60px)) * (1 - .3 * var(--nav-progress, 0))) + 24px - (8px * var(--nav-progress, 0))));}
}

/* Aviso chico del carrito (partials/cart-drawer.blade.php). */
.cart-toast{position:fixed;top:100px;right:20px;z-index:320;display:flex;align-items:center;gap:10px;max-width:min(380px,calc(100vw - 32px));padding:11px 12px 11px 14px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 18px 40px -10px rgba(0,0,0,.6);font-size:13.5px;line-height:1.4;}
.cart-toast.is-error{border-color:rgba(226,75,74,.45);}
.cart-toast.is-error .cart-toast-text{color:#ff8a89;}
.cart-toast-icon{width:20px;height:20px;flex-shrink:0;border-radius:50%;background:var(--gold);color:#0A0A0B;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.cart-toast-text{flex:1;min-width:0;}
.cart-toast-action{flex-shrink:0;background:none;border:1px solid var(--gold);color:var(--gold);border-radius:100px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.cart-toast-action:hover{background:var(--gold);color:#0A0A0B;}
.cart-toast-close{flex-shrink:0;background:none;border:none;color:var(--text-muted);font-size:18px;line-height:1;cursor:pointer;padding:2px 4px;}
.cart-toast-close:hover{color:var(--text-primary);}
.cart-toast-enter,.cart-toast-leave{transition:opacity .2s ease,transform .25s cubic-bezier(.22,1,.36,1);}
.cart-toast-enter-start,.cart-toast-leave-end{opacity:0;transform:translateY(-8px);}
.cart-toast-enter-end,.cart-toast-leave-start{opacity:1;transform:translateY(0);}
@media (max-width:640px){.cart-toast{top:84px;left:12px;right:12px;max-width:none;}}
.cart-drawer-spinner{width:14px;height:14px;flex-shrink:0;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--gold);animation:cart-spin .7s linear infinite;}
@keyframes cart-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.cart-drawer-spinner{animation-duration:2s;}}
.shop-campaign-countdown{margin-top:8px;color:var(--gold);font-size:14px;}
.shop-campaign-countdown .mono{font-family:var(--font-mono);}

/* Ficha de producto: botón "← Volver" junto a las migas de pan. */
.product-topbar{display:flex;align-items:center;gap:16px;padding-block:18px;min-width:0;}
.product-topbar .breadcrumb{padding-block:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-back{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:8px 14px 8px 10px;border:1px solid var(--border-strong);border-radius:100px;color:var(--text-primary);font-size:13.5px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s,background-color .15s;}
.product-back:hover{border-color:var(--gold);color:var(--gold);}
.product-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (max-width:640px){.product-topbar .breadcrumb{display:none;}}
/* Volver con "atrás" (page-nav.js, popstate): restauración instantánea,
   sin el fundido de las fotos de las tarjetas. */
.page-nav-instant .card-media img{opacity:1;transition:none;}
/* ...pero con su propia transición corta: todo el contenido junto, un
   fundido breve con un leve deslizamiento (sin la cascada de "página
   nueva", que hacía parecer que recargaba). */
main.page-nav-instant{animation:page-nav-back-in .28s cubic-bezier(.22,1,.36,1);}
@keyframes page-nav-back-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){main.page-nav-instant{animation:page-nav-fade-only .2s ease-out;}}
.motion-reduced main.page-nav-instant{animation:page-nav-fade-only .2s ease-out;}
@keyframes page-nav-fade-only{from{opacity:0;}to{opacity:1;}}
/* Paginación de la tienda principal (partials/shop-results.blade.php). */
.pagination-links-visible{display:flex;justify-content:center;margin-top:36px;}

/* Link "Ver ofertas →" de la barra de temporada (partials/promo-bar). */
.promo-bar-link{margin-left:12px;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.promo-bar-link:hover{opacity:.8;}

/* ===== Tema de temporada: Halloween =====
   Se activa solo mientras corre una Temporada (Admin → Temporadas) con
   el efecto "Niebla + murciélagos + arañas": layouts/app.blade.php le pone
   .promo-theme-spooky al <body>. Al terminar la temporada desaparece
   solo. Paleta: morado noche + naranja calabaza, sin tocar el dorado de
   los precios y botones (identidad de la marca). */
.promo-theme-spooky{--halloween-orange:#FF7A1A;--halloween-purple:#2A0F45;}
.promo-theme-spooky .promo-bar-active{background:linear-gradient(90deg,#14081F 0%,var(--halloween-purple) 50%,#14081F 100%);color:#FFD9B8;border-bottom:1px solid rgba(255,122,26,.35);box-shadow:0 0 24px -6px rgba(255,122,26,.35);}
.promo-theme-spooky .promo-bar-active .promo-bar-text::before{content:'🎃';margin-right:8px;}
.promo-theme-spooky .promo-bar-active .promo-bar-countdown{color:var(--halloween-orange);text-shadow:0 0 10px rgba(255,122,26,.45);}
.promo-theme-spooky .promo-bar-active .promo-bar-link{color:var(--halloween-orange);}
.promo-theme-spooky .logo-full{filter:drop-shadow(0 0 10px rgba(255,122,26,.35));}
.promo-theme-spooky .card:not(.card-help):hover{border-color:rgba(255,122,26,.55);box-shadow:0 14px 34px -14px rgba(255,122,26,.35);}
.promo-theme-spooky .card-offer-countdown{background:rgba(255,122,26,.16);color:var(--halloween-orange);}
.promo-theme-spooky .cat-float-promo .cat-float-label,.promo-theme-spooky .accordion-group-promo .accordion-head-text{color:var(--halloween-orange);}
.promo-theme-spooky .offer-countdown-seg{border-color:rgba(255,122,26,.5);background:rgba(255,122,26,.12);}
.promo-theme-spooky .offer-countdown-seg span{color:var(--halloween-orange);}
/* Cerrar la barra de temporada: se encoge y se desvanece (el polvo lo dibuja promo-bar.blade.php). */
.promo-bar-leave{transition:opacity .45s ease,max-height .5s ease;overflow:hidden;}
.promo-bar-leave-start{opacity:1;max-height:60px;}
.promo-bar-leave-end{opacity:0;max-height:0;}
/* Home: el header fijo se corre hacia abajo lo que mide la barra de
   temporada (nav-scroll.js pone --promo-offset), para no taparla. */
.nav-hero-mode{transform:translateY(var(--promo-offset, 0px));}

/* Indicador de carga (public/js/cyrex-loader.js): 4 esferas sueltas (sin contenedor) que rebotan
   en ola, laten, cambian de tono y se juntan/separan. Dorado de la marca;
   naranja/morado con la temporada de Halloween. */
.cyrex-loader{--dot-a:#FFD900;--dot-b:#FF9F1A;position:fixed;left:50%;top:50%;z-index:350;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.3,1.2);}
.cyrex-loader.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1);}
body.promo-theme-spooky .cyrex-loader{--dot-a:#FF7A1A;--dot-b:#B98CFF;}
.cyrex-loader-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.cyrex-loader-dots{display:flex;align-items:center;gap:6px;height:20px;animation:cyrex-dots-gather 2.2s ease-in-out infinite;}
.cyrex-loader-dots i{display:block;width:7px;height:7px;border-radius:50%;color:var(--dot-a);background:currentColor;box-shadow:0 0 8px currentColor;animation:cyrex-dot 1.1s cubic-bezier(.45,0,.55,1) infinite;}
.cyrex-loader-dots i:nth-child(2){animation-delay:.12s;}
.cyrex-loader-dots i:nth-child(3){animation-delay:.24s;}
.cyrex-loader-dots i:nth-child(4){animation-delay:.36s;}
@keyframes cyrex-dot{
  0%,100%{transform:translateY(0) scale(.7);color:var(--dot-a);opacity:.75;}
  30%{transform:translateY(-6px) scale(1.15);color:var(--dot-b);opacity:1;}
  60%{transform:translateY(1px) scale(.9);color:var(--dot-a);opacity:.9;}
}
@keyframes cyrex-dots-gather{
  0%,100%{gap:6px;}
  50%{gap:2px;}
}
@media (prefers-reduced-motion: reduce){
  .cyrex-loader-dots{animation:none;}
  .cyrex-loader-dots i{animation:cyrex-dot-calm 1.4s ease-in-out infinite;}
}
body.motion-reduced .cyrex-loader-dots{animation:none;}
body.motion-reduced .cyrex-loader-dots i{animation:cyrex-dot-calm 1.4s ease-in-out infinite;}
@keyframes cyrex-dot-calm{0%,100%{opacity:.35;}50%{opacity:1;}}

/* Anuncio abierto en grande (partials/announcement.blade.php): la tarjeta
   de la esquina "vuela" hasta aquí (animación FLIP en el x-data). */
.site-announcement{cursor:zoom-in;}
.site-announcement-close,.site-announcement-cta{cursor:pointer;}
.sal{position:fixed;inset:0;z-index:360;display:none;align-items:center;justify-content:center;padding:32px;}
.sal.is-open{display:flex;}
.sal-backdrop{position:absolute;inset:0;background:rgba(5,5,6,.8);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);}
.sal-panel{position:relative;display:flex;flex-direction:column;width:min(900px,100%);max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain;background:var(--bg-elevated);border:1px solid var(--border-strong, rgba(255,255,255,.12));border-radius:20px;box-shadow:0 50px 140px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,217,0,.06);transform-origin:center;will-change:transform;}
.sal-close{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(10,10,11,.7);color:#fff;font-size:21px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s,color .15s,transform .2s;}
.sal-close:hover{background:rgba(10,10,11,.92);color:var(--gold);transform:rotate(90deg);}
.sal-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.sal-media{display:block;background:#0A0A0B;overflow:hidden;flex-shrink:0;}
.sal-media img{display:block;width:100%;height:auto;max-height:calc(100dvh - 240px);object-fit:contain;}
.sal-panel.is-image-only .sal-media img{max-height:calc(100dvh - 66px);}
.sal-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 24px 24px;}
.sal-title{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.2;}
.sal-text{margin:0;font-size:15px;line-height:1.6;color:var(--text-secondary);max-width:68ch;}
.sal-cta{margin-top:8px;}
html.announcement-expanded,html.announcement-expanded body{overflow:hidden;}
@media (max-width:640px){.sal{display:none !important;}.site-announcement{cursor:default;}}
.admin-edit-switch.is-disabled{opacity:.5;cursor:not-allowed;}
.admin-edit-offer-nogroup{display:block;margin:-6px 0 14px;font-family:inherit;font-size:12.5px;line-height:1.5;}
.admin-edit-offer-nogroup a{color:var(--gold);text-decoration:underline;}

/* Barra fija de compra (celular): entra deslizando con un leve rebote y
   su contenido aparece escalonado, en vez de "estar" de golpe. */
.sticky-buybar{opacity:0;transition:transform .5s cubic-bezier(.2,1.25,.35,1),opacity .25s ease;}
.sticky-buybar.is-visible{opacity:1;}
.sticky-buybar .sticky-buybar-info,.sticky-buybar .sticky-buybar-btn{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .4s cubic-bezier(.2,1,.3,1);}
.sticky-buybar.is-visible .sticky-buybar-info{opacity:1;transform:none;transition-delay:.12s;}
.sticky-buybar.is-visible .sticky-buybar-btn{opacity:1;transform:none;transition-delay:.2s;}
.motion-reduced .sticky-buybar,.motion-reduced .sticky-buybar .sticky-buybar-info,.motion-reduced .sticky-buybar .sticky-buybar-btn{transition:none;}
@media (prefers-reduced-motion:reduce){.sticky-buybar,.sticky-buybar .sticky-buybar-info,.sticky-buybar .sticky-buybar-btn{transition:none;}}

/* ---- Arma tu PC en celular ---- */
/* WhatsApp bien a la vista en el panel "Tu PC". */
.pcb-wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:10px;padding:15px 18px;border-radius:100px;background:#25D366;color:#06210f;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 10px 28px -10px rgba(37,211,102,.6);transition:transform .15s ease,box-shadow .2s ease,filter .15s ease;}
.pcb-wa-btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 14px 34px -10px rgba(37,211,102,.75);}
.pcb-wa-btn svg{flex-shrink:0;}
/* Limpiar todo: abajo, separado de la ✕ y de los botones de compra. */
.pcb-reset-all{display:block;margin:22px auto 0;font-size:12.5px;}
.pcb-reset-all:hover{color:var(--red);}
/* Cada paso entra con un poco más de presencia (antes .22s, casi imperceptible). */
.pcb-step-enter{transition:opacity .3s ease,transform .4s cubic-bezier(.2,1,.3,1);}
.pcb-step-enter-start{opacity:0;transform:translateY(14px);}
@media (max-width:640px){
  /* (?) de término técnico: el globo ocupa el ancho del encabezado en vez
     de centrarse sobre el iconito (se salía de la pantalla y saltaba). */
  .pcb-step-header-text{position:relative;}
  .pcb-info-wrap{position:static;}
  .pcb-info-popover{left:0;right:0;width:auto;transform:none;top:calc(100% + 6px);}
  /* Filtros a la izquierda, junto al resto (antes quedaban solos a la derecha). */
  .pcb-step-controls{justify-content:flex-start;}
}
/* En pantallas táctiles no hay "pasar el mouse": "Cambiar componente" se
   ve siempre como un botón chico debajo de la tarjeta, en vez de ser una
   capa invisible que tapaba toda la tarjeta y saltaba de paso sin aviso. */
@media (hover:none){
  .pcb-review-card-change{position:static;inset:auto;opacity:1;display:block;width:calc(100% - 20px);margin:0 10px 10px;padding:9px 10px;border-radius:100px;background:var(--bg-elevated-2);border:1px solid var(--border);color:var(--gold);font-size:12.5px;}
}

/* ===== Quiénes somos: bloques "Historia" (resources/views/cms/blocks/historia-*.blade.php,
   config/cms_blocks.php). Aparecen con data-reveal (scroll-reveal.js). ===== */
.qs-fullbleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden;}
.qs-hero{position:relative;height:88vh;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.qs-hero-bg-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.qs-hero-bg-text span{font-family:var(--font-display);font-weight:700;font-size:min(24vw,300px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);white-space:nowrap;}
.qs-hero-content{position:relative;z-index:2;max-width:820px;padding:0 24px;}
.qs-hero-eyebrow{font-family:var(--font-mono);font-size:12px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px;opacity:0;animation:qs-rise .8s ease forwards .1s;}
.qs-hero-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,5.2vw,56px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance;opacity:0;animation:qs-rise .9s cubic-bezier(.22,1,.36,1) forwards .25s;}
.qs-hero-title strong{font-weight:inherit;color:var(--gold);}
.qs-scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;opacity:0;animation:qs-fadein 1s ease forwards 1.1s;}
.qs-scroll-cue .qs-line{width:1px;height:30px;background:linear-gradient(var(--gold),transparent);animation:qs-cue-drop 1.8s ease-in-out infinite;}
@keyframes qs-rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
@keyframes qs-fadein{to{opacity:1;}}
@keyframes qs-cue-drop{0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}
.qs-section{padding:100px 24px;max-width:1080px;margin:0 auto;}
.qs-kicker{font-family:var(--font-mono);font-size:12px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:12px;}
.qs-kicker::before{content:"";width:28px;height:1px;background:var(--gold);}
.qs-prologue{max-width:820px;margin:0 auto;padding:40px 24px 20px;text-align:center;font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3.2vw,34px);line-height:1.35;color:var(--text-secondary);text-wrap:balance;}
.qs-prologue strong{color:var(--text-primary);}
.qs-chapter{display:grid;grid-template-columns:120px minmax(0,1fr);gap:28px;max-width:900px;margin:0 auto;padding:90px 24px;}
.qs-chapter-num{font-family:var(--font-display);font-weight:700;font-size:72px;line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(255,217,0,.55);}
.qs-chapter h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.6vw,40px);line-height:1.15;letter-spacing:-.01em;margin-bottom:26px;text-wrap:balance;}
.qs-chapter p{font-size:17px;line-height:1.8;color:var(--text-secondary);margin-bottom:20px;max-width:640px;}
.qs-chapter p:last-child{margin-bottom:0;}
.qs-chapter strong{color:var(--text-primary);font-weight:600;}
.qs-chapter .qs-turn{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.3;color:var(--gold);margin-top:30px;}
.qs-chapter .qs-turn strong{color:inherit;}
@media (max-width:700px){.qs-chapter{grid-template-columns:1fr;gap:6px;padding:64px 22px;}.qs-chapter-num{font-size:54px;}}
.qs-sign{padding:120px 24px;text-align:center;background:radial-gradient(ellipse at center,rgba(255,217,0,.07) 0%,transparent 62%);}
.qs-sign .qs-kicker,.qs-name .qs-kicker,.qs-timeline-head .qs-kicker,.qs-statement-band .qs-kicker{justify-content:center;}
.qs-sign .qs-kicker::before,.qs-name .qs-kicker::before,.qs-timeline-head .qs-kicker::before,.qs-statement-band .qs-kicker::before{display:none;}

/* Letrero de neón: arranca como un tubo apagado, se enciende con varios
   parpadeos (~2.6s) y después sigue "zumbando" cada pocos segundos, como
   un cartel real, con el halo de fondo latiendo al mismo ritmo. */
.qs-sign{position:relative;}
.qs-sign::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,90vw);height:320px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,217,0,.20) 0%,rgba(255,217,0,.06) 40%,transparent 70%);opacity:0;pointer-events:none;z-index:1;}
.qs-sign.is-revealed::before{animation:qs-neon-glow-on 2.6s steps(1,end) .2s forwards,qs-neon-glow 5s ease-in-out 2.8s infinite;}
.qs-sign-word{position:relative;z-index:2;font-family:var(--font-display);font-weight:700;font-size:clamp(46px,11vw,150px);line-height:1;letter-spacing:.03em;margin:10px 0 28px;color:rgba(255,217,0,.14);text-shadow:none;}
.qs-sign.is-revealed .qs-sign-word{animation:qs-neon-on 2.6s steps(1,end) .2s forwards,qs-neon-buzz 4.5s steps(1,end) 2.8s infinite;}
@keyframes qs-neon-on{
  0%{color:rgba(255,217,0,.14);text-shadow:none;}
  6%,15%,30%,45%,100%{color:#FFE34D;text-shadow:0 0 6px rgba(255,245,190,.95),0 0 18px rgba(255,217,0,.9),0 0 44px rgba(255,217,0,.65),0 0 100px rgba(255,170,0,.45);}
  9%,18%,33%{color:rgba(255,217,0,.18);text-shadow:none;}
  38%{color:rgba(255,217,0,.55);text-shadow:0 0 10px rgba(255,217,0,.4);}
}
@keyframes qs-neon-buzz{
  0%,80%,84%,88%,100%{color:#FFE34D;text-shadow:0 0 6px rgba(255,245,190,.95),0 0 18px rgba(255,217,0,.9),0 0 44px rgba(255,217,0,.65),0 0 100px rgba(255,170,0,.45);}
  82%,90%{color:rgba(255,217,0,.2);text-shadow:none;}
  86%{color:rgba(255,217,0,.6);text-shadow:0 0 12px rgba(255,217,0,.5);}
}
@keyframes qs-neon-glow-on{0%,9%,18%,33%{opacity:0;}6%,15%,30%,45%,100%{opacity:1;}}
@keyframes qs-neon-glow{0%,100%{opacity:1;}50%{opacity:.6;}}
.qs-sign > :not(.qs-bg-photo){position:relative;z-index:2;}
/* Foto de fondo (portada y letrero), muy oscurecida y fundida con la página. */
.qs-bg-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.3;filter:grayscale(.25) brightness(.55);pointer-events:none;}
.qs-hero.has-photo::after,.qs-sign.has-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,rgba(10,10,11,.35) 30%,rgba(10,10,11,.35) 70%,var(--bg) 100%);}
.qs-hero.has-photo .qs-hero-content,.qs-hero.has-photo .qs-scroll-cue{z-index:2;}
.qs-hero.has-photo .qs-bg-photo{opacity:.24;}
/* Foto dentro de un capítulo. */
.qs-chapter-photo{margin:36px 0 0;max-width:640px;}
.qs-chapter-photo img{display:block;width:100%;max-height:440px;object-fit:cover;border-radius:16px;border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
.qs-chapter-photo figcaption{margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);letter-spacing:.04em;}
.qs-sign p{font-size:17px;line-height:1.75;color:var(--text-secondary);max-width:600px;margin:0 auto;}
.qs-sign p strong{color:var(--text-primary);}
.qs-quote{padding:110px 24px;text-align:center;}
.qs-quote blockquote{margin:0 auto;max-width:860px;font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.6vw,42px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance;}
.qs-quote blockquote strong{font-weight:inherit;color:var(--gold);}
.qs-name{position:relative;max-width:820px;margin:0 auto;padding:60px 40px;border:1px solid var(--border);border-radius:24px;background:var(--bg-elevated);text-align:center;overflow:hidden;}
.qs-name-word{position:absolute;inset:auto 0 -20px 0;font-family:var(--font-display);font-weight:700;font-size:min(26vw,200px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,217,0,.10);pointer-events:none;white-space:nowrap;}
.qs-name h2{position:relative;font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,34px);margin-bottom:20px;}
.qs-name p{position:relative;font-size:16.5px;line-height:1.75;color:var(--text-secondary);max-width:620px;margin:0 auto 14px;}
.qs-name p:last-child{margin-bottom:0;}
.qs-name strong{color:var(--text-primary);font-weight:600;}
.qs-timeline-head{text-align:center;margin-bottom:50px;}
.qs-timeline-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,36px);}
.qs-timeline{position:relative;max-width:700px;margin:0 auto;padding-left:38px;}
.qs-timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gold),rgba(255,217,0,.12));}
.qs-tl-item{position:relative;padding-bottom:26px;}
.qs-tl-item:last-child{padding-bottom:0;}
.qs-tl-item::before{content:"";position:absolute;left:-36px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);box-shadow:0 0 0 5px var(--bg);}
.qs-tl-item.is-key::before{background:var(--gold);box-shadow:0 0 0 5px var(--bg),0 0 18px rgba(255,217,0,.45);}
.qs-tl-year{font-family:var(--font-mono);font-size:12px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;}
.qs-tl-text{font-size:15.5px;line-height:1.6;color:var(--text-secondary);}
.qs-tl-text strong{color:var(--text-primary);font-weight:600;}
@media (max-width:640px){.qs-timeline{padding-left:30px;}.qs-tl-item::before{left:-28px;}.qs-name{padding:42px 22px;}}
.qs-statement-band{padding:130px 24px;text-align:center;}
.qs-statement-headline{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4.2vw,46px);line-height:1.18;letter-spacing:-.01em;max-width:860px;margin:0 auto 26px;text-wrap:balance;}
.qs-statement-body{font-size:17px;line-height:1.8;color:var(--text-secondary);max-width:660px;margin:0 auto 18px;}
.qs-statement-body:last-child{margin-bottom:0;}
.qs-statement-body strong{color:var(--text-primary);font-weight:600;}
.qs-band-vision{background:linear-gradient(180deg,var(--bg) 0%, #0f0d02 50%, var(--bg) 100%);}
.qs-band-vision .qs-statement-headline{color:var(--gold);}
.qs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:20px;overflow:hidden;}
.qs-card{background:var(--bg);padding:34px 28px;transition:background .3s ease;}
.qs-card:hover{background:var(--bg-elevated);}
.qs-card-label{font-family:var(--font-mono);font-size:11.5px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
.qs-card p{font-size:15px;line-height:1.7;color:var(--text-secondary);}
.qs-card p strong{color:var(--text-primary);font-weight:600;}
@media (max-width:860px){.qs-cards{grid-template-columns:1fr;}}
.qs-closing{text-align:center;padding:90px 24px 40px;}
.qs-closing blockquote{margin:0 auto 26px;max-width:760px;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,34px);line-height:1.3;text-wrap:balance;}
.qs-closing blockquote strong{font-weight:inherit;color:var(--gold);}
.qs-closing-tag{font-family:var(--font-mono);font-size:12.5px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin-bottom:34px;}
.qs-closing-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.qs-btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#0A0A0B;font-weight:600;font-size:14px;padding:14px 28px;border-radius:100px;text-decoration:none;}
.qs-btn-ghost{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-strong, rgba(255,255,255,.18));color:var(--text-primary);font-weight:600;font-size:14px;padding:14px 28px;border-radius:100px;text-decoration:none;transition:border-color .2s;}
.qs-btn-ghost:hover{border-color:var(--gold);}
@media (prefers-reduced-motion:reduce){.qs-hero-eyebrow,.qs-hero-title,.qs-scroll-cue{opacity:1;animation:none;}.qs-sign .qs-sign-word,.qs-sign.is-revealed .qs-sign-word{animation:none;color:#FFE34D;text-shadow:0 0 18px rgba(255,217,0,.85),0 0 42px rgba(255,217,0,.55);}.qs-sign.is-revealed::before{animation:none;}}
.motion-reduced .qs-hero-eyebrow,.motion-reduced .qs-hero-title,.motion-reduced .qs-scroll-cue{opacity:1;animation:none;}
.motion-reduced .qs-sign-word{animation:none !important;color:#FFE34D;text-shadow:0 0 18px rgba(255,217,0,.85),0 0 42px rgba(255,217,0,.55);}
.motion-reduced .qs-sign::before{animation:none !important;}
/* Contador de armados/reseñas por aprobar en la barra amarilla del staff. */
.admin-session-bar-actions a.admin-session-bar-pending{background:#0A0A0B;color:var(--gold);text-decoration:none;padding:3px 10px;border-radius:100px;font-weight:700;}

/* Pantallas anchas: la barra de categorías queda abierta (con nombres) en
   el espacio libre a la izquierda de los productos, sin taparlos. Solo
   desde donde entra completa: contenido (.wrap) de 1440px + 2 × (200px de
   barra + aire). Más angosto que eso sigue como siempre: íconos que se
   abren al pasar el mouse. Al pasar por una categoría el panel de
   subcategorías sale igual que antes. */
@media (min-width:1820px){
  .cat-float{left:calc((100vw - var(--wrap-max)) / 2 - 176px);}
  .cat-float-list,.cat-float-list.expanded{width:200px;}
  .cat-float-label{opacity:1;overflow:hidden;text-overflow:ellipsis;}
  .cat-float-hint{display:none;}
}