/* ══════════════════════════════════════════════════════════════
   CIBA WORK · Sistema de diseño "CLINIC 25"
   App-shell PWA · tipografías Fontshare (Clash Display + Satoshi)
   Motion: ease-out fuerte, 120–320ms, GPU-only (transform/opacity)
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root{
  /* marca */
  --navy:#06345c; --navy-9:#04223d; --navy-7:#0a4c81; --blue:#1476ab;
  --cyan:#0ad9ff; --cyan-s:#dff8ff; --cyan-d:#00bfe6;   /* celeste eléctrico */
  --cyan-t:#00728f;                                     /* mismo celeste, legible como texto */
  --hot:#ff4d2d; --hot-s:#fff0ec;           /* ofertas / urgencia */
  --hot-b:#d93a17;                          /* relleno que lleva texto blanco legible */
  --hot-t:#c4330f;                          /* rojo para texto sobre fondo claro */
  --lime:#0fbf7f; --lime-s:#e7f9f1;         /* envío gratis / ok */
  --lime-b:#0a7f56;                         /* verde para texto sobre fondo claro */
  --amber:#f5a524;

  /* neutros */
  --ink:#08141f; --ink-2:#3d4d5c; --ink-3:#5f7080; --ink-4:#8494a1;
  --line:#e6ecf1; --line-2:#f1f5f8;
  --bg:#ffffff; --soft:#f5f8fa; --soft-2:#eef4f8;

  /* forma */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:24px; --r-xl:32px; --r-full:999px;
  --sh-1:0 1px 2px rgba(8,20,31,.05), 0 2px 6px rgba(8,20,31,.05);
  --sh-2:0 8px 20px -8px rgba(6,52,92,.18), 0 2px 8px -2px rgba(6,52,92,.07);
  --sh-3:0 24px 60px -18px rgba(6,52,92,.32), 0 6px 18px -8px rgba(6,52,92,.14);
  --sh-pop:0 30px 70px -20px rgba(4,34,61,.45);

  /* motion */
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-io:cubic-bezier(.77,0,.175,1);
  --e-drawer:cubic-bezier(.32,.72,0,1);
  --t-1:120ms; --t-2:180ms; --t-3:240ms; --t-4:320ms;

  /* tipografía */
  --f-d:'Clash Display','Fraunces',Georgia,serif;
  --f:'Satoshi','Manrope',-apple-system,'Segoe UI',sans-serif;

  /* superficies y texto (cambian con el tema) */
  --surface:#ffffff; --glass:rgba(255,255,255,.92); --glass-line:rgba(255,255,255,.7);
  --hd-bg:rgba(255,255,255,.86); --ovc:rgba(4,20,34,.5);
  --focus:#00728f;               /* anillo de foco visible sobre fondo claro */
  --head:#06345c;                /* títulos */
  --brand-txt:#06345c;           /* texto e iconos de marca sobre fondo claro */
  --hero-1:#f3f9fd; --hero-2:#e9f2f9; --hero-3:#fdfeff;

  --wrap:1320px;
  --tabh:0px;                    /* alto de la barra inferior (móvil) */
  --z-nav:60; --z-sheet:80; --z-top:100;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f);font-size:16px;line-height:1.55;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom))}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
ul{list-style:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3,h4{font-family:var(--f-d);font-weight:600;line-height:1.08;
  letter-spacing:-.02em;color:var(--head)}
.eyebrow{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue)}
.h-sec{font-size:clamp(1.6rem,3.6vw,2.7rem)}
.lead{color:var(--ink-2);font-size:1rem;max-width:62ch}

/* ── Transiciones de página (View Transitions API) ──────────── */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out 160ms var(--e-out) both}
  ::view-transition-new(root){animation:vt-in 260ms var(--e-out) both}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ── Reveal al hacer scroll ─────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity 520ms var(--e-out),transform 520ms var(--e-out)}
.rv.in{opacity:1;transform:none}
.rv-stag>*{opacity:0;transform:translateY(18px);
  transition:opacity 460ms var(--e-out),transform 460ms var(--e-out)}
.rv-stag.in>*{opacity:1;transform:none}
/* estado forzado de la red de seguridad: visible ya, sin transición de por medio */
.rv.ya,.rv-stag.ya,.rv-stag.ya>*{opacity:1!important;transform:none!important;transition:none!important}

/* ══════════════════════════════════════════════════════════════
   MOVIMIENTO LIGADO AL SCROLL
   Corre en el compositor (no en el hilo principal), así no traba
   el desplazamiento. Donde el navegador no lo soporte, todo queda
   quieto y legible — nunca invisible.
   ══════════════════════════════════════════════════════════════ */

/* barra de progreso de lectura */
.prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:calc(var(--z-top) + 1);
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--cyan),var(--blue) 60%,var(--hot-b))}

@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .prog{animation:progreso linear;animation-timeline:scroll(root block)}
    @keyframes progreso{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    /* paralaje: el contenido se mueve más lento que la página */
    .par{animation:par linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%;will-change:transform}
    @keyframes par{from{transform:translate3d(0,7%,0)}to{transform:translate3d(0,-7%,0)}}
    .par-lento{animation:parLento linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    @keyframes parLento{from{transform:translate3d(0,3.5%,0)}to{transform:translate3d(0,-3.5%,0)}}

    /* la foto llega ampliada y se asienta al entrar en pantalla */
    .zoom{animation:zoomEntra linear both;animation-timeline:view();
      animation-range:entry 0% cover 45%}
    @keyframes zoomEntra{from{transform:scale(1.14)}to{transform:scale(1)}}

    /* Las animaciones de scroll sólo mueven; nunca controlan la opacidad.
       Si el navegador no avanza la línea de tiempo, el contenido igual se ve. */

    /* aparecer subiendo, gobernado por el scroll */
    .sube{animation:sube linear both;animation-timeline:view();
      animation-range:entry 0% entry 85%}
    @keyframes sube{from{transform:translate3d(0,40px,0)}to{transform:none}}

    /* entradas laterales para bloques a dos columnas */
    .desde-izq{animation:desdeIzq linear both;animation-timeline:view();
      animation-range:entry 0% entry 90%}
    @keyframes desdeIzq{from{transform:translate3d(-34px,14px,0)}to{transform:none}}
    .desde-der{animation:desdeDer linear both;animation-timeline:view();
      animation-range:entry 0% entry 90%}
    @keyframes desdeDer{from{transform:translate3d(34px,14px,0)}to{transform:none}}

    /* el hero se despide: se hunde y se apaga al salir */
    .desvanece{animation:desvanece linear both;animation-timeline:view();
      animation-range:exit 0% exit 100%}
    @keyframes desvanece{from{opacity:1;transform:none}to{opacity:.15;transform:translate3d(0,-40px,0) scale(.97)}}

    /* la grilla entra escalonada: cada tarjeta con su propio rango */
    .grid.escalona>*{animation:cardEntra linear both;animation-timeline:view();
      animation-range:entry 0% entry 70%}
    @keyframes cardEntra{from{transform:translate3d(0,46px,0) scale(.96)}to{transform:none}}

    /* el encabezado de sección llega un poco después que el resto */
    .sec-hd.fija{animation:secHd linear both;animation-timeline:view();
      animation-range:entry 10% cover 40%}
    @keyframes secHd{from{transform:translate3d(0,26px,0)}to{transform:none}}
  }
}

/* ── Botones ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;border-radius:var(--r-full);font-weight:700;
  font-size:.94rem;border:1.5px solid transparent;white-space:nowrap;cursor:pointer;
  transition:background-color var(--t-2) var(--e-out),color var(--t-2) var(--e-out),
             border-color var(--t-2) var(--e-out),box-shadow var(--t-2) var(--e-out),
             transform var(--t-1) var(--e-out)}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--navy);color:#fff}
.btn-p:hover{background:var(--navy-7);box-shadow:var(--sh-2)}
.btn-c{background:var(--cyan);color:#042e44}
.btn-c:hover{background:var(--cyan-d);color:#042e44;
  box-shadow:0 10px 26px -10px rgba(10,217,255,.75)}
.btn-hot{background:var(--hot-b);color:#fff}
.btn-hot:hover{background:#c33212;box-shadow:0 10px 24px -10px rgba(217,58,23,.75)}
.btn-o{border-color:var(--line);background:var(--surface);color:var(--brand-txt)}
.btn-o:hover{border-color:var(--brand-txt);background:var(--soft)}
.btn-g{background:var(--soft);color:var(--brand-txt)}
.btn-g:hover{background:var(--soft-2)}
.btn-wa{background:#25d366;color:#06331a}
.btn-wa:hover{background:#1fbb59}
.btn-sm{min-height:40px;padding:0 16px;font-size:.85rem}
.btn-blk{width:100%}
.btn:disabled{opacity:.5;pointer-events:none}

/* ── Barra de anuncios ──────────────────────────────────────── */
/* la barra es oscura en ambos temas: colores fijos para no perder el texto blanco */
.ann{background:linear-gradient(90deg,#04223d,#1069a0 58%,#0a7bad);
  color:#fff;font-size:.78rem;font-weight:600;overflow:hidden;height:36px;position:relative}
.ann-v{display:flex;flex-direction:column;height:36px;animation:annroll 12s infinite}
.ann-v span{height:36px;display:flex;align-items:center;justify-content:center;gap:8px;flex:none}
@keyframes annroll{
  0%,28%{transform:translateY(0)} 33%,61%{transform:translateY(-36px)}
  66%,94%{transform:translateY(-72px)} 100%{transform:translateY(-108px)}
}

/* ── Header ─────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:var(--z-nav);background:var(--hd-bg);
  backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line);
  transition:transform var(--t-3) var(--e-out),box-shadow var(--t-3) var(--e-out)}
.hd.up{transform:translateY(-100%)}
.hd.scr{box-shadow:var(--sh-1)}
.hd-in{display:flex;align-items:center;gap:16px;height:70px}
/* El PNG del logo es transparente y su trazo es azul marino: sobre el header
   oscuro desaparecía. Va sobre una placa blanca redondeada —la misma forma
   del ícono de la app— para que se vea EXACTAMENTE igual en ambos temas.
   Nada de filtros ni inversiones: el logo nunca cambia de color. */
/* Marca cuadrada, la misma forma del ícono de la app. El PNG ya trae su
   fondo blanco y sus puntas redondeadas, así que se ve idéntico en tema
   claro y oscuro sin filtros ni inversiones. */
.brand img{width:44px;height:44px;display:block;border-radius:11px;
  box-shadow:0 0 0 1px rgba(6,52,92,.10)}
.nav{display:flex;gap:2px;margin-left:8px}
.nav>a,.mega>a{position:relative;display:inline-flex;align-items:center;height:40px;
  padding:0 13px;border-radius:var(--r-sm);font-weight:600;font-size:.9rem;color:var(--ink-2);
  transition:color var(--t-2) var(--e-out),background-color var(--t-2) var(--e-out)}
.nav>a:hover,.mega>a:hover{color:var(--brand-txt);background:var(--soft)}
/* Sin subrayado: la sección activa se distingue por color y fondo. */
.nav a.on{color:var(--brand-txt);background:var(--soft)}
.hd-sp{flex:1}
.hd-acts{display:flex;align-items:center;gap:4px}
.ico{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-full);
  color:var(--brand-txt);position:relative;
  transition:background-color var(--t-2) var(--e-out),transform var(--t-1) var(--e-out)}
.ico:hover{background:var(--soft)}
.ico:active{transform:scale(.94)}
.ico svg{width:21px;height:21px}
.badge{position:absolute;top:4px;right:2px;min-width:20px;height:20px;padding:0 5px;
  background:var(--hot-b);color:#fff;font-size:.68rem;font-weight:800;border-radius:var(--r-full);
  display:grid;place-items:center;line-height:1;transform:scale(0);
  transition:transform var(--t-3) cubic-bezier(.34,1.56,.64,1)}
.badge.show{transform:scale(1)}
.badge.pop{animation:badgepop 420ms var(--e-out)}
@keyframes badgepop{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.burger{display:none}

/* buscador */
.search{position:relative;flex:0 1 340px;display:flex;align-items:center}
.search>svg{position:absolute;left:14px;width:17px;height:17px;color:var(--ink-4);pointer-events:none}
.search input{width:100%;height:44px;padding:0 16px 0 40px;border:1.5px solid var(--line);
  border-radius:var(--r-full);background:var(--soft);font-size:.9rem;outline:none;
  transition:border-color var(--t-2) var(--e-out),background-color var(--t-2) var(--e-out),
             box-shadow var(--t-2) var(--e-out)}
.search input:focus{border-color:var(--cyan);background:var(--surface);box-shadow:0 0 0 4px var(--cyan-s)}
.sug{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);padding:6px;
  max-height:min(70vh,460px);overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
  transform-origin:top center;z-index:var(--z-top);
  transition:opacity var(--t-2) var(--e-out),transform var(--t-2) var(--e-out),visibility var(--t-2)}
.sug.on{opacity:1;visibility:visible;transform:none}
.sug a{display:flex;gap:11px;align-items:center;padding:8px;border-radius:var(--r-sm);
  transition:background-color var(--t-1) var(--e-out)}
.sug a:hover{background:var(--soft)}
.sug img{width:46px;height:46px;object-fit:contain;border-radius:10px;background:var(--soft)}
.sug b{display:block;font-size:.87rem;font-weight:700;color:var(--brand-txt)}
.sug i{font-style:normal;font-size:.76rem;color:var(--ink-3)}

/* mega menú */
.mega{position:relative}
.mega-p{position:absolute;top:calc(100% + 8px);left:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:18px;min-width:540px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px 22px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top left;
  transition:opacity var(--t-2) var(--e-out),transform var(--t-2) var(--e-out),visibility var(--t-2)}
.mega:hover .mega-p,.mega:focus-within .mega-p{opacity:1;visibility:visible;transform:none}
.mega-p h5{grid-column:1/-1;font-family:var(--f);font-size:.68rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);padding:8px 10px 4px}
.mega-p a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 10px;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;color:var(--ink-2);
  transition:background-color var(--t-1) var(--e-out),color var(--t-1) var(--e-out)}
.mega-p a:hover{background:var(--cyan-s);color:var(--brand-txt)}
.mega-p a i{font-style:normal;font-size:.73rem;color:var(--ink-4);font-weight:500}

/* ── Barra inferior (app móvil) ─────────────────────────────── */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);
  background:var(--hd-bg);backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar ul{display:flex}
/* El reparto va en el <li>: es el hijo directo del flex. Ponerlo en el <a>
   dejaba los cinco ítems apelotonados a la izquierda con las etiquetas
   pegadas unas a otras. */
.tabbar li{flex:1 1 0;min-width:0;display:flex}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:9px 0 8px;font-size:.66rem;font-weight:700;color:var(--ink-3);position:relative;
  transition:color var(--t-2) var(--e-out)}
.tabbar a svg{width:23px;height:23px;transition:transform var(--t-2) var(--e-out)}
.tabbar a:active svg{transform:scale(.88)}
.tabbar a.on{color:var(--navy)}
.tabbar a.on svg{transform:translateY(-2px)}
.tabbar .badge{top:2px;right:calc(50% - 20px)}

/* ── HERO ───────────────────────────────────────────────────── */
.hero{position:relative;overflow:clip;background:
  radial-gradient(90% 70% at 78% 8%,rgba(0,181,226,.20),transparent 60%),
  radial-gradient(70% 60% at 8% 90%,rgba(20,118,171,.14),transparent 62%),
  linear-gradient(160deg,var(--hero-1),var(--hero-2) 52%,var(--hero-3))}
.hero::before{content:'';position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:conic-gradient(from 210deg at 70% 30%,rgba(0,181,226,.12),transparent 38%,rgba(6,52,92,.10),transparent 72%);
  filter:blur(40px);animation:aur 22s var(--e-io) infinite alternate;pointer-events:none}
@keyframes aur{to{transform:translate3d(-4%,3%,0) rotate(8deg) scale(1.08)}}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:48px;align-items:center;padding:64px 0 72px}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);margin:14px 0 16px;font-weight:600}
.hero h1 em{font-style:normal;position:relative;color:var(--blue);white-space:nowrap}
.hero h1 em::after{content:'';position:absolute;left:-2px;right:-2px;bottom:.08em;height:.26em;
  background:var(--cyan);opacity:.3;border-radius:4px;z-index:-1;transform-origin:left;
  animation:underline 900ms var(--e-out) 300ms both}
@keyframes underline{from{transform:scaleX(0)}}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 22px}
.hero-tr{display:flex;gap:20px;flex-wrap:wrap;font-size:.84rem;font-weight:600;color:var(--ink-2)}
.hero-tr span{display:flex;align-items:center;gap:7px}
.hero-tr svg{width:17px;height:17px;color:var(--lime-b);flex:none}

/* ── Hero con nuestros modelos ──────────────────────────────────
   Fotos reales del catálogo. Como son de estudio, el fondo del panel
   toma el mismo color de fondo de cada foto (assets/js/fondos.js), así
   la imagen no se ve pegada: se funde con el panel.
   ────────────────────────────────────────────────────────────── */
/* Hero anclado: la sección es alta —ese alto ES el recorrido del scroll— y
   dentro va un contenedor sticky de una pantalla. Mientras se recorre, el
   zoom avanza en cámara lenta; al agotarse, la sección se despega y entra
   la siguiente con normalidad. */
.hero.foto{height:420vh;display:block;position:relative;
  background:var(--navy-9);border-bottom:0;
  /* ancho de la columna de texto y margen del contenedor: la foto siempre
     empieza después del texto, en cualquier ancho de pantalla */
  --txt:560px;
  --wx:max(20px,(100vw - var(--wrap))/2 + 20px);
  --corte:calc(var(--wx) + var(--txt))}
.hero.foto::before{display:none}                    /* sin aurora sobre la foto */
/* svh y no vh: en móvil la barra de direcciones cambia vh al ocultarse y el
   hero pega saltos durante el scroll. */
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;background:var(--navy-9)}
/* Foto de campaña fija, a sangre. Cubre todo el hero; el velo de la izquierda
   (::after) la funde con el azul sobre el que se apoya el texto. */
.hero-bg{position:absolute;inset:0;z-index:1}
/* El zoom lo aplica index.html sobre transform, cuadro a cuadro. Sin
   transition de CSS: el suavizado ya lo hace la persecución con easing, y
   encadenar ambos produce un arrastre elástico. */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:64% center;display:block;
  backface-visibility:hidden}
/* el velo funde el panel con el azul del texto */
/* Velo semitransparente: oscuro sobre la columna de texto para que el blanco
   se lea, y ya disuelto antes de llegar a las modelos. La foto se ve a través
   en todo el ancho — no hay ningún tramo sólido. */
/* --velo lo baja index.html a la par que se retira el texto: al final del
   recorrido la foto queda limpia. */
.hero-pin::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:var(--velo,1);
  background:linear-gradient(95deg,
    rgba(4,34,61,.92) 0%,
    rgba(4,34,61,.86) 18%,
    rgba(4,34,61,.60) 30%,
    rgba(4,34,61,.28) 40%,
    rgba(4,34,61,.08) 49%,
    rgba(4,34,61,0) 57%)}
.hero.foto .hero-in{position:relative;z-index:3;display:block;width:100%;flex:1 1 auto;
  padding:72px 20px;gap:0}
.hero.foto .hero-in>*{max-width:var(--txt)}
.hero.foto h1,.hero.foto .lead,.hero.foto .hero-tr{color:#fff}
.hero.foto .lead{opacity:.92;max-width:46ch}
.hero.foto .eyebrow{color:var(--cyan)}
.hero.foto h1 em{color:#fff}
.hero.foto h1 em::after{background:var(--cyan);opacity:.9;height:.14em;bottom:.02em}
.hero.foto .hero-tr svg{color:var(--cyan)}
.hero.foto .btn-o{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff;
  backdrop-filter:blur(6px)}
.hero.foto .btn-o:hover{background:rgba(255,255,255,.2);border-color:#fff}
/* etiqueta de la prenda que se está mostrando */

/* dato flotante sobre la foto */
.hero-dato{position:absolute;right:28px;bottom:28px;z-index:3;display:grid;gap:2px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:var(--r-lg);
  padding:16px 20px;box-shadow:var(--sh-3);text-align:right}
.hero-dato b{font-family:var(--f-d);font-size:1.7rem;color:var(--navy);line-height:1}
.hero-dato span{font-size:.76rem;font-weight:700;color:var(--ink-2)}

@media (max-width:900px){
  .hero.foto{min-height:auto}
  /* El pulgar avanza mucho menos que la rueda: recorrido más corto. */
  .hero.foto{height:300svh}
  .hero-pin{align-items:flex-end}
  /* La foto va como BANDA, no a sangre. A pantalla completa en vertical el
     cover tendría que ampliarla ~3,6x (una foto 2.36:1 llenando un alto de
     0.46:1) y se ve deshecha. Como banda de 46svh el aumento baja a ~1,2x. */
  /* La imagen de móvil ya viene recortada a las dos modelos centrales
     (negro y azul) en proporción 1000x1292 = 0.774. La banda respeta esa
     proporción para que el cover no vuelva a recortarlas. */
  .hero-bg{inset:0 0 auto 0;height:58svh}
  .hero-bg img{object-position:center}
  .hero-pin::after{background:linear-gradient(180deg,
    rgba(4,34,61,.34) 0%,rgba(4,34,61,.20) 22%,
    rgba(4,34,61,.62) 40%,var(--navy-9) 52%,var(--navy-9) 100%)}
  /* Solo el padding vertical: el lateral lo pone .wrap y anularlo dejaba el
     texto pegado al borde de la pantalla. */
  .hero.foto .hero-in{padding-top:0;padding-bottom:40px}
  .hero.foto .hero-in>*{max-width:none}
  .hero-dato{display:none}
}

/* pila de fotos del hero */
.hero-st{position:relative;aspect-ratio:1/1.02;perspective:1200px}
.hero-st figure{position:absolute;inset:0;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);box-shadow:var(--sh-3);
  transition:transform 700ms var(--e-out),opacity 420ms var(--e-out),
             background-color var(--t-4) var(--e-out)}
.hero-st img{width:100%;height:100%;object-fit:contain}
.hero-st figure:nth-child(1){transform:translate3d(0,0,0) rotate(-2.2deg) scale(.94);opacity:.55}
.hero-st figure:nth-child(2){transform:translate3d(4%,-3%,0) rotate(2deg) scale(.97);opacity:.8}
.hero-st figure:nth-child(3){transform:none;z-index:2}
.hero-chip{position:absolute;z-index:3;background:var(--glass);
  backdrop-filter:blur(10px);border:1px solid var(--glass-line);
  padding:10px 15px;border-radius:var(--r);box-shadow:var(--sh-2);
  font-size:.79rem;font-weight:700;color:var(--brand-txt);display:flex;align-items:center;gap:9px;
  animation:float 6s var(--e-io) infinite alternate}
.hero-chip b{color:var(--blue)}
.hero-chip.c1{left:-14px;bottom:64px}
.hero-chip.c2{right:-10px;top:44px;animation-delay:-3s}
@keyframes float{to{transform:translateY(-10px)}}

/* ── Franja de valores ──────────────────────────────────────── */
.vals{background:var(--surface);border-block:1px solid var(--line)}
.vals-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.val{background:var(--surface);padding:22px 20px;display:flex;gap:13px;align-items:flex-start}
.val-i{width:42px;height:42px;flex:none;border-radius:13px;background:var(--cyan-s);
  display:grid;place-items:center;color:var(--blue)}
.val-i svg{width:21px;height:21px}
.val h4{font-family:var(--f);font-size:.92rem;font-weight:800;margin-bottom:2px}
.val p{font-size:.81rem;color:var(--ink-2);line-height:1.45}

/* ── Secciones ──────────────────────────────────────────────── */
.sec{padding:72px 0}
.sec-soft{background:var(--soft)}
.sec-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-bottom:30px;flex-wrap:wrap}
.sec-hd .lead{margin-top:8px}

/* dos columnas que colapsan en móvil */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split>*{min-width:0}
.split.b2b{grid-template-columns:1.4fr 1fr;gap:34px}

/* ── Rail horizontal (estilo app) ───────────────────────────── */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(206px,1fr);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 14px;margin-inline:-20px;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}

/* píldoras de categoría */
.pills{display:flex;gap:9px;overflow-x:auto;padding:2px 20px 4px;margin-inline:-20px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;
  border-radius:var(--r-full);background:var(--surface);border:1.5px solid var(--line);
  font-size:.85rem;font-weight:700;color:var(--ink-2);cursor:pointer;
  transition:background-color var(--t-2) var(--e-out),color var(--t-2) var(--e-out),
             border-color var(--t-2) var(--e-out),transform var(--t-1) var(--e-out)}
.pill:active{transform:scale(.96)}
.pill.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ── Tarjeta de producto ────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t-3) var(--e-out),box-shadow var(--t-3) var(--e-out),
             border-color var(--t-3) var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:transparent}
  .card:hover .card-i img.b{opacity:1}
  .card:hover .quick{opacity:1;transform:none}
}
.card-i{position:relative;aspect-ratio:4/5;background:var(--soft);overflow:hidden;display:block;
  transition:background-color var(--t-4) var(--e-out)}
/* contain + fondo tomado de la propia foto: la prenda nunca se recorta
   y el cuadro igual se ve relleno de borde a borde */
.card-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity var(--t-4) var(--e-out),transform 600ms var(--e-out)}
.card-i img.b{opacity:0}
.tags{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:2}
.tag{font-size:.66rem;font-weight:800;letter-spacing:.04em;padding:4px 9px;border-radius:var(--r-full);
  background:var(--navy);color:#fff;text-transform:uppercase}
.tag.hot{background:var(--hot-b)}
.tag.lime{background:var(--lime);color:#042a1c}
.fav{position:absolute;top:8px;right:8px;z-index:2;width:38px;height:38px;border-radius:var(--r-full);
  background:var(--glass);backdrop-filter:blur(6px);display:grid;place-items:center;
  color:var(--ink-3);box-shadow:var(--sh-1);
  transition:color var(--t-2) var(--e-out),transform var(--t-1) var(--e-out)}
.fav:active{transform:scale(.88)}
.fav.on{color:var(--hot)}
.fav.on svg{fill:currentColor}
.fav svg{width:19px;height:19px}
.quick{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;opacity:0;
  transform:translateY(10px);
  transition:opacity var(--t-3) var(--e-out),transform var(--t-3) var(--e-out)}
.quick .btn{width:100%;min-height:42px;font-size:.85rem;box-shadow:var(--sh-2)}
.card-b{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-b h3{font-family:var(--f);font-size:.92rem;font-weight:700;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stars{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--ink-3);font-weight:600}
.stars i{color:var(--amber);font-style:normal;letter-spacing:-1px}
.price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.price b{font-family:var(--f-d);font-size:1.28rem;font-weight:600;color:var(--head)}
.price s{font-size:.8rem;color:var(--ink-4)}
.price .off{font-size:.7rem;font-weight:800;color:var(--hot-t);background:var(--hot-s);
  padding:2px 7px;border-radius:var(--r-full)}
.dots{display:flex;gap:5px;align-items:center}
.dot{width:15px;height:15px;border-radius:var(--r-full);border:1.5px solid var(--surface);
  box-shadow:0 0 0 1px var(--line)}
.dots span.more{font-size:.7rem;color:var(--ink-3);font-weight:700}
.meta{font-size:.73rem;color:var(--ink-3);display:flex;gap:6px;align-items:center}

/* skeleton */
.sk{background:linear-gradient(100deg,var(--line-2) 30%,var(--surface) 50%,var(--line-2) 70%);
  background-size:220% 100%;animation:shim 1.3s linear infinite;border-radius:var(--r-lg)}
@keyframes shim{to{background-position:-220% 0}}

/* ── Flash / countdown ─────────────────────────────────────── */
.flash{background:linear-gradient(120deg,#0b2c4a,#123a5e 60%,#0e4d6b);color:#fff;
  border-radius:var(--r-xl);padding:26px 26px 8px;overflow:hidden;position:relative}
.flash h2{color:#fff}
.flash-hd{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.clock{display:flex;gap:6px;align-items:center;font-weight:800}
.clock b{background:var(--hot-b);color:#fff;border-radius:9px;padding:5px 9px;font-size:.95rem;
  font-variant-numeric:tabular-nums;min-width:38px;text-align:center}

/* ── Categorías ─────────────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.cat{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);
  transition:transform var(--t-3) var(--e-out),box-shadow var(--t-3) var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .cat:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
  .cat:hover img{transform:scale(1.06)}
}
.cat .i{aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.cat img{width:100%;height:100%;object-fit:contain;transition:transform 600ms var(--e-out)}
.cat .b{position:absolute;inset:auto 0 0 0;padding:32px 16px 15px;color:#fff;
  background:linear-gradient(to top,rgba(4,34,61,.94),rgba(4,34,61,.55) 46%,transparent)}
.cat .b h3{color:#fff;font-size:1.08rem}
.cat .b span{font-size:.76rem;opacity:.86}

/* ── Overlay + hojas (bottom sheet / drawer) ────────────────── */
.ov{position:fixed;inset:0;background:var(--ovc);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;z-index:var(--z-sheet);
  transition:opacity var(--t-3) var(--e-out),visibility var(--t-3)}
.ov.on{opacity:1;visibility:visible}

.sheet{position:fixed;z-index:calc(var(--z-sheet) + 1);background:var(--surface);box-shadow:var(--sh-pop);
  display:flex;flex-direction:column;will-change:transform}
/* drawer derecho (desktop) */
.sheet.right{top:0;right:0;height:100dvh;width:min(430px,100%);
  transform:translate3d(100%,0,0);transition:transform var(--t-4) var(--e-drawer)}
.sheet.right.on{transform:none}
/* bottom sheet (móvil) */
.sheet.bottom{left:0;right:0;bottom:0;max-height:92dvh;border-radius:var(--r-xl) var(--r-xl) 0 0;
  transform:translate3d(0,100%,0);transition:transform var(--t-4) var(--e-drawer)}
.sheet.bottom.on{transform:none}
.sheet.drag{transition:none}
.grip{width:44px;height:5px;border-radius:99px;background:var(--line);margin:10px auto 2px;flex:none}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);flex:none}
.sheet-h h3{font-size:1.15rem}
.sheet-b{flex:1;overflow:auto;overscroll-behavior:contain;padding:16px 18px}
.sheet-f{flex:none;padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--surface);display:grid;gap:10px}

/* ── Carrito ────────────────────────────────────────────────── */
.ci{display:grid;grid-template-columns:74px 1fr auto;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line-2);animation:ciIn 320ms var(--e-out) both}
@keyframes ciIn{from{opacity:0;transform:translateY(8px)}}
.ci img{width:74px;height:88px;object-fit:contain;border-radius:var(--r-sm);background:var(--soft)}
.ci h4{font-family:var(--f);font-size:.87rem;font-weight:700;line-height:1.3}
.ci .v{font-size:.75rem;color:var(--ink-3);margin-top:2px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-full);
  height:34px;margin-top:8px;overflow:hidden}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--brand-txt);font-weight:800;
  transition:background-color var(--t-1) var(--e-out)}
.qty button:hover{background:var(--soft)}
.qty span{min-width:26px;text-align:center;font-weight:700;font-size:.85rem;
  font-variant-numeric:tabular-nums}
.ci .rm{font-size:.74rem;color:var(--ink-3);text-decoration:underline;margin-top:6px}
.bar{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden;margin:6px 0 4px}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--lime));
  transform-origin:left;transition:transform 520ms var(--e-out)}
.tot{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.tot b{font-family:var(--f-d);font-size:1.5rem;color:var(--head)}
.empty{text-align:center;padding:48px 20px;color:var(--ink-3)}
.empty svg{width:56px;height:56px;margin:0 auto 14px;color:var(--line)}

/* ── Selector de compra rápida ──────────────────────────────── */
.buy{display:grid;grid-template-columns:150px 1fr;gap:18px}
.buy-img{border-radius:var(--r);overflow:hidden;background:var(--soft);aspect-ratio:4/5;
  transition:background-color var(--t-4) var(--e-out)}
.buy-img img{width:100%;height:100%;object-fit:contain}
.opt-l{font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 8px;display:flex;justify-content:space-between}
.sw{display:flex;flex-wrap:wrap;gap:8px}
.sw button{width:38px;height:38px;border-radius:var(--r-full);position:relative;
  border:2px solid transparent;box-shadow:0 0 0 1.5px var(--line);
  transition:transform var(--t-2) var(--e-out),box-shadow var(--t-2) var(--e-out)}
.sw button:hover{transform:scale(1.08)}
.sw button.on{box-shadow:0 0 0 2px var(--navy);transform:scale(1.06)}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{min-width:52px;height:44px;padding:0 12px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--surface);font-weight:700;font-size:.87rem;color:var(--ink-2);
  transition:border-color var(--t-2) var(--e-out),background-color var(--t-2) var(--e-out),
             color var(--t-2) var(--e-out),transform var(--t-1) var(--e-out)}
.size:hover{border-color:var(--brand-txt)}
.size:active{transform:scale(.95)}
.size.on{background:var(--navy);border-color:var(--navy);color:#fff}
.size.rec::after{content:'';position:absolute}

/* ── Toast ──────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(24px + var(--tabh) + env(safe-area-inset-bottom));
  z-index:var(--z-top);display:flex;align-items:center;gap:10px;
  background:var(--navy-9);color:#fff;padding:13px 20px;border-radius:var(--r-full);
  font-size:.88rem;font-weight:600;box-shadow:var(--sh-3);pointer-events:none;
  opacity:0;transform:translate(-50%,16px) scale(.96);
  transition:opacity var(--t-3) var(--e-out),transform var(--t-3) var(--e-out)}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}
.toast svg{width:19px;height:19px;color:#5fe3ac}

/* vuelo al carrito (FLIP) */
.fly{position:fixed;z-index:var(--z-top);width:76px;height:92px;border-radius:12px;
  object-fit:cover;box-shadow:var(--sh-3);pointer-events:none;will-change:transform,opacity}

/* ── Tablas de medidas ──────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:.83rem;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th{background:var(--soft-2);font-weight:800;font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand-txt);padding:9px 10px;text-align:left;white-space:nowrap}
.tbl td{padding:9px 10px;border-top:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.tbl tr.hit{background:var(--lime-s)}
.tbl tr.hit td{font-weight:800;color:var(--lime-b)}
.tbl-w{overflow-x:auto;border-radius:var(--r)}

.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
  box-shadow:var(--sh-1)}
.calc h5{font-family:var(--f);font-size:.95rem;font-weight:800;color:var(--head)}
.calc p{font-size:.82rem;color:var(--ink-2);margin:4px 0 14px}
.calc-f{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;align-items:end}
.calc-f.n1{grid-template-columns:1fr auto}
.calc-f.n2{grid-template-columns:repeat(2,1fr) auto}
.calc-f.n3{grid-template-columns:repeat(3,1fr) auto}
.calc-f label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.calc-f input{width:100%;height:46px;padding:0 13px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--soft);outline:none;
  transition:border-color var(--t-2) var(--e-out),box-shadow var(--t-2) var(--e-out)}
.calc-f input:focus{border-color:var(--cyan);background:var(--surface);box-shadow:0 0 0 4px var(--cyan-s)}
.calc-r{margin-top:14px;padding:13px 15px;border-radius:var(--r-sm);background:var(--lime-s);
  color:var(--lime-b);font-size:.88rem;font-weight:700;display:none}
.calc-r.show{display:block;animation:ciIn 320ms var(--e-out)}

/* ── Formularios ────────────────────────────────────────────── */
.field{display:grid;gap:6px}
.field label{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:13px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--soft);outline:none;
  transition:border-color var(--t-2) var(--e-out),box-shadow var(--t-2) var(--e-out),
             background-color var(--t-2) var(--e-out)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cyan);background:var(--surface);box-shadow:0 0 0 4px var(--cyan-s)}
.field.bad input{border-color:var(--hot);box-shadow:0 0 0 4px var(--hot-s)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── Footer ─────────────────────────────────────────────────── */
.ft{background:var(--navy-9);color:#cfe0ec;padding:56px 0 26px;margin-top:20px}
.ft h5{font-family:var(--f);color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:14px}
.ft-g{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}
/* Antes se forzaba a blanco puro con brightness(0) invert(1) en claro y se
   devolvía a su color en oscuro: cambiaba de apariencia según el tema.
   Ahora es el mismo ícono cuadrado del header y de la app. */
.ft img{width:56px;height:56px;margin-bottom:14px;display:block;border-radius:13px}
.ft p{font-size:.86rem;line-height:1.6;opacity:.8;max-width:40ch}
.ft li a,.ft-c a{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.87rem;opacity:.82;
  transition:opacity var(--t-2) var(--e-out),transform var(--t-2) var(--e-out)}
.ft li a:hover,.ft-c a:hover{opacity:1;transform:translateX(3px)}
.ft-c svg{width:17px;height:17px;flex:none;color:var(--cyan)}
.socials{display:flex;gap:9px;margin-top:16px}
.socials a{width:40px;height:40px;border-radius:var(--r-full);background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;
  transition:background-color var(--t-2) var(--e-out),transform var(--t-2) var(--e-out)}
.socials a:hover{background:var(--cyan);color:var(--navy-9);transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.ft-b{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.79rem;opacity:.65}

/* ── WhatsApp flotante ──────────────────────────────────────── */
.wa{position:fixed;right:18px;bottom:calc(20px + var(--tabh) + env(safe-area-inset-bottom));
  z-index:var(--z-nav);width:56px;height:56px;border-radius:var(--r-full);background:#25d366;
  color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(37,211,102,.7);
  transition:transform var(--t-2) var(--e-out)}
.wa:hover{transform:scale(1.07)}
.wa:active{transform:scale(.94)}
.wa svg{width:29px;height:29px}

/* ── Instalar app (PWA) ─────────────────────────────────────── */
/* Colores FIJOS, no variables de tema: es un aviso puntual y debe leerse
   igual de bien en claro que en oscuro. Con var(--surface) se volvía un
   panel oscuro sobre fondo oscuro y se perdía. */
.install{position:fixed;left:14px;right:14px;bottom:calc(14px + var(--tabh) + env(safe-area-inset-bottom));
  z-index:var(--z-nav);background:#fff;border:1px solid rgba(6,52,92,.16);border-radius:var(--r-lg);
  box-shadow:0 18px 44px -12px rgba(3,20,36,.55);padding:13px 14px;display:none;
  align-items:center;gap:12px;animation:ciIn 380ms var(--e-out)}
.install img{width:52px;height:52px;flex:none;border-radius:12px;
  box-shadow:0 0 0 1px rgba(6,52,92,.12)}
/* Texto y controles con color propio: el panel es siempre claro, así que no
   pueden seguir al tema o en oscuro quedarían blancos sobre blanco. */
.install b{display:block;font-size:.88rem;color:#06345c}
.install span{font-size:.76rem;color:#5b6c7b}
.install .btn{margin-left:auto}
.install .ico{color:#5b6c7b;width:36px;height:36px;flex:none}
.install .ico:hover{background:rgba(6,52,92,.08)}

/* ══════════════════════════════════════════════════════════════
   TEMA OSCURO
   Se activa con data-theme="dark" en <html> (botón del header) o,
   si el usuario nunca eligió, siguiendo la preferencia del sistema.
   ══════════════════════════════════════════════════════════════ */
:root{color-scheme:light}

[data-theme="dark"]{
  color-scheme:dark;
  /* neutros invertidos */
  --ink:#e9f1f7; --ink-2:#b4c5d3; --ink-3:#8ba0b1; --ink-4:#71879a;
  --line:#22384a; --line-2:#192936;
  --bg:#0a141d; --soft:#101e29; --soft-2:#16293a;

  /* superficies */
  --surface:#111f2b;
  --glass:rgba(17,31,43,.88); --glass-line:rgba(255,255,255,.09);
  --hd-bg:rgba(10,20,29,.82); --ovc:rgba(2,8,14,.64);

  /* marca legible sobre fondo oscuro */
  --head:#eaf3f9; --brand-txt:#7cc6ef; --blue:#54b6e2;
  --navy:#12558a; --navy-7:#1a6ba7; --navy-9:#081521;
  --cyan-s:rgba(10,217,255,.16); --lime-s:rgba(15,191,127,.16); --hot-s:rgba(255,77,45,.16);
  --cyan-t:#5fe4ff; --focus:#5fe4ff;
  --lime-b:#5fe3ac; --hot-b:#d93a17; --hot-t:#ff8f72;

  /* fondo del hero */
  --hero-1:#0c1a26; --hero-2:#0f2433; --hero-3:#0a141d;

  /* sombras: en oscuro la luz no "cae", se hunde */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 20px -8px rgba(0,0,0,.55);
  --sh-3:0 24px 60px -18px rgba(0,0,0,.7);
  --sh-pop:0 30px 70px -20px rgba(0,0,0,.8);
}
[data-theme="dark"] .ft{background:#081521;border-top:1px solid var(--line)}
/* (el logo del pie ya no lleva filtro en ningún tema: se ve idéntico) */
[data-theme="dark"] .card-i,[data-theme="dark"] .cat .i,[data-theme="dark"] .buy-img,
[data-theme="dark"] .gal-m{background:#1b2c3a}
[data-theme="dark"] .tag{background:var(--navy-7)}
[data-theme="dark"] .btn-c{color:#03202f}
[data-theme="dark"] .sk{background:linear-gradient(100deg,#16263300 30%,rgba(255,255,255,.06) 50%,#16263300 70%)}

/* interruptor de tema */
.thm svg{transition:transform var(--t-3) var(--e-out),opacity var(--t-2) var(--e-out)}
.thm:active svg{transform:rotate(-25deg) scale(.9)}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1080px){
  .ft-g{grid-template-columns:1fr 1fr;gap:28px}
  .vals-g{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--tabh:62px}
  .nav,.search{display:none}
  /* Sin hamburguesa: en móvil y en la app la barra inferior está siempre
     visible y ya lleva Inicio, Catálogo, Buscar, Carrito y Cuenta. Tener las
     dos era navegación duplicada. */
  .burger{display:none}
  .tabbar{display:block}
  .hero-in{grid-template-columns:1fr;gap:34px;padding:36px 0 44px}
  .hero-st{max-width:420px;margin-inline:auto;width:100%}
  .sec{padding:48px 0}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .buy{grid-template-columns:110px 1fr;gap:14px}
  .split,.split.b2b{grid-template-columns:1fr;gap:26px}
  .split.b2b{padding:28px!important}
  .calc-f,.calc-f.n1,.calc-f.n2,.calc-f.n3{grid-template-columns:repeat(3,1fr)}
  .calc-f .btn{grid-column:1/-1}
  .wa{width:50px;height:50px;right:14px}
  .wa svg{width:25px;height:25px}
}
@media (max-width:560px){
  .calc-f,.calc-f.n1,.calc-f.n2,.calc-f.n3{grid-template-columns:repeat(2,1fr)}
  .ft-g{grid-template-columns:1fr}
  .card-b{padding:11px 11px 13px}
  .price b{font-size:1.12rem}
  .hero-chip.c1{left:4px} .hero-chip.c2{right:4px}
}

/* ── Accesibilidad de movimiento ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.08ms!important;scroll-behavior:auto!important}
  .rv,.rv-stag>*{opacity:1!important;transform:none!important}
}