/* ═══════════════════════════════════════════════════════════
   BLACK VISION OPTIC'S — hoja de estilos
   Modelo de retail óptico (referencia: gmo.com.ec)
   Identidad: negro + dorado, tomada del logo del cliente.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────── */
:root {
  /* Tinta y superficies — mismo esquema claro del referente */
  --ink:          #121212;
  --ink-2:        #1E2226;
  --ink-70:       rgba(18, 18, 18, .70);
  --ink-55:       rgba(18, 18, 18, .66);  /* .66 y no .55: por debajo no pasa AA sobre blanco */
  --surface:      #FFFFFF;
  --surface-alt:  #F6F6F6;
  --surface-3:    #F1F1F1;
  --line:         #E4E4E4;
  --line-fuerte:  #D2D2D2;

  /* Acento único: el dorado del logo Black Vision */
  --oro:          #C9A227;   /* superficies y botones (7.7:1 con la tinta encima) */
  --oro-hondo:    #A8861C;   /* bordes y hover — nunca para texto sobre fondo claro */
  --oro-texto:    #7E6111;   /* el dorado legible: >5:1 sobre blanco y sobre el velo */
  --oro-claro:    #E9D8A0;
  --oro-velo:     rgba(201, 162, 39, .12);

  /* Tipografía */
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp:  "Jost", "Inter", system-ui, sans-serif;

  /* Métrica */
  --radio:      3px;      /* el referente usa esquinas casi rectas */
  --radio-md:   6px;
  --ancho:      1200px;
  --ancho-min:  760px;
  --tr:         200ms cubic-bezier(.4, 0, .2, 1);
  --sombra:     0 1px 2px rgba(18,18,18,.05), 0 8px 24px rgba(18,18,18,.06);
  --sombra-alta:0 2px 6px rgba(18,18,18,.07), 0 18px 40px rgba(18,18,18,.10);
}

/* ── 2. BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.14;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--tr); }

:focus-visible {
  /* oro-hondo y no oro: el dorado puro no llega a 3:1 sobre blanco */
  outline: 2px solid var(--oro-hondo);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff;
  padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
.contenedor--angosto { width: min(100% - 2.5rem, var(--ancho-min)); }

/* ── 3. BOTONES ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--radio);
  font-family: var(--disp);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);
  white-space: nowrap;
}
.btn .ico { width: 17px; height: 17px; flex: none; }

.btn--solido   { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--solido:hover  { background: #000; transform: translateY(-1px); }

.btn--oro      { background: var(--oro); color: var(--ink); border-color: var(--oro); }
.btn--oro:hover     { background: var(--oro-hondo); border-color: var(--oro-hondo); color: #fff; transform: translateY(-1px); }

.btn--fantasma { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--fantasma:hover { background: rgba(255,255,255,.10); border-color: #fff; }

.btn--sm     { padding: .6rem 1.05rem; font-size: .78rem; }
.btn--lg     { padding: 1.05rem 2.1rem; font-size: .92rem; }
.btn--bloque { display: flex; width: 100%; }

/* ── 4. BARRA DE ANUNCIOS ──────────────────────────────── */
.anuncios {
  background: var(--ink);
  color: #fff;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  z-index: 60;
}
.anuncios__pista { position: relative; width: 100%; height: 100%; }
.anuncio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: 1rem;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family: var(--disp);
  font-weight: 500;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 420ms ease, transform 420ms ease;
}
.anuncio.is-activo { opacity: 1; transform: none; }

/* ── 5. CABECERA ───────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--tr);
}
.cabecera.is-fija { box-shadow: 0 1px 14px rgba(18,18,18,.08); }

.cabecera__interior {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.logo { display: inline-flex; align-items: center; gap: .6rem; }
.logo__marca { width: 44px; height: auto; color: var(--oro); flex: none; }
.logo__texto { display: flex; flex-direction: column; line-height: 1; }
.logo__texto strong {
  font-family: var(--disp);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.logo__texto em {
  font-style: normal;
  font-family: var(--disp);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .42em;
  color: var(--ink-55);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 1.85rem; }
.nav a {
  font-family: var(--disp);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-70);
  position: relative;
  padding-block: .3rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--oro);
  transition: width var(--tr);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }

.cabecera__acciones { display: flex; align-items: center; gap: .75rem; }

.hamburguesa {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line-fuerte);
  border-radius: var(--radio);
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 4px;
}
.hamburguesa span {
  display: block;
  width: 18px; height: 1.6px;
  background: var(--ink);
  transition: transform var(--tr), opacity var(--tr);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* ── 6. HERO ───────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 78% 22%, rgba(201,162,39,.20), transparent 62%),
    radial-gradient(52% 70% at 12% 88%, rgba(201,162,39,.10), transparent 60%),
    linear-gradient(175deg, #191919 0%, #0D0D0D 100%);
}
/* ── Vitrina del hero: lentes en 3D real girando despacio ──
   Todo son divs en un espacio 3D con preserve-3d, no una imagen plana
   rotando. Por eso al pasar de perfil se ven delgados y las patillas se
   meten hacia atrás, como un objeto de verdad sobre una base giratoria.
   La escala se controla con un solo valor: el font-size de .gafas.        */
.hero__escena {
  position: absolute;
  right: -3%;
  top: 50%;
  z-index: 0;
  width: min(620px, 54vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  /* El lado izquierdo se desvanece: es donde vive el texto del hero. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 19%);
          mask-image: linear-gradient(90deg, transparent 0, #000 19%);
  /* no-repeat es obligatorio: en 3D las piezas se proyectan más allá de la
     caja y con la máscara tejida reaparecerían encima del titular. */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* resplandor dorado de fondo */
.vitrina__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%,
              rgba(201,162,39,.30) 0%,
              rgba(201,162,39,.12) 38%,
              transparent 68%);
  animation: latirHalo 9s ease-in-out infinite;
}
@keyframes latirHalo {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* base de exhibición: un aro visto en perspectiva */
.vitrina__pedestal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1;
  margin-left: -31%;
  margin-top: -14%;
  border: 1px solid rgba(201,162,39,.26);
  border-radius: 50%;
  transform: perspective(700px) rotateX(76deg);
}
.vitrina__pedestal::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(201,162,39,.14);
  border-radius: 50%;
}

/* sombra en el suelo: se angosta cuando los lentes quedan de perfil */
.vitrina__sombra {
  position: absolute;
  left: 50%;
  top: 63%;
  width: 44%;
  height: 5%;
  margin-left: -22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, transparent 72%);
  animation: sombraGira 11s ease-in-out infinite;
}
@keyframes sombraGira {
  0%, 100% { transform: scaleX(1);   opacity: .8; }
  50%      { transform: scaleX(.42); opacity: .5; }
}

/* ── Foto real del armazón ───────────────────────────────
   Cuando existe img/lentes-hero.png, script.js la monta aquí y apaga la
   vitrina 3D. La máscara radial difumina los bordes: así una foto con
   fondo blanco se disuelve en el resplandor dorado en vez de aparecer
   como un recuadro blanco. Con un PNG transparente queda aún mejor.   */
.hero__escena.tiene-foto .vitrina,
.hero__escena.tiene-foto .vitrina__pedestal { display: none; }

.vitrina__foco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(255,255,255,.16) 0%,
              rgba(201,162,39,.16) 34%,
              transparent 66%);
}

.vitrina__foto {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84%;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 52%, transparent 84%);
          mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 52%, transparent 84%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  filter: drop-shadow(0 1.4rem 2.2rem rgba(0,0,0,.55));
  animation: flotarFoto 7s ease-in-out infinite;
}
/* Un PNG con transparencia no necesita difuminado ni foco de apoyo. */
.hero__escena.foto-transparente .vitrina__foto {
  -webkit-mask-image: none;
          mask-image: none;
}
.hero__escena.foto-transparente .vitrina__foco { opacity: .55; }

/* ── Modo exhibición: el recorte gira despacio ────────────
   Una foto es PLANA. Si diera la vuelta entera, al pasar de perfil se
   convertiría en una línea: exactamente el efecto de papel recortado que
   hay que evitar. El arco va de -22° a +22°, que es hasta donde una foto
   se sigue leyendo como un objeto de verdad sobre una base que gira. El
   ancho solo se encoge un 7% en los extremos, así que el ojo no lo lee
   como una imagen aplastándose, sino como unos lentes girando.          */
.hero__escena.foto-transparente { perspective: 1400px; }

.hero__escena.foto-transparente .vitrina__foto {
  transform-origin: 50% 62%;          /* pivota cerca de la base, no en el centro */
  animation: exhibirFoto 11s ease-in-out infinite;
  filter: drop-shadow(0 1.6rem 2rem rgba(0,0,0,.5));
}
@keyframes exhibirFoto {
  0%   { transform: translate(-50%, -50%) rotateX(-4deg) rotateY(-22deg); }
  50%  { transform: translate(-50%, calc(-50% - 9px)) rotateX(-4deg) rotateY(22deg); }
  100% { transform: translate(-50%, -50%) rotateX(-4deg) rotateY(-22deg); }
}

/* La sombra acompaña el balanceo. La de los lentes 3D se estrecha hasta el
   42% porque ahí el objeto sí da la vuelta entera; aquí solo se desplaza. */
.hero__escena.foto-transparente .vitrina__sombra {
  animation: sombraBalanceo 11s ease-in-out infinite;
}
@keyframes sombraBalanceo {
  0%, 100% { transform: scaleX(.92) translateX(7px);  opacity: .7; }
  50%      { transform: scaleX(.92) translateX(-7px); opacity: .7; }
}

/* ── Foto de ambiente en vez de un armazón recortado ──────
   Una escena 16:9 no se puede tratar como un recorte: con la elipse chica
   se le cortarían los lentes de los extremos. Se ensancha, se difumina en
   un óvalo amplio y se apaga un punto, porque una foto clara pesa mucho
   más sobre el hero negro que unos lentes dibujados.                    */
.hero__escena.foto-escena:not(.foto-transparente) .vitrina__foto {
  width: 100%;
  /* Difuminado rectangular, no elíptico: la elipse dejaba los cuatro lentes
     de los extremos a medio borrar. Así el 76% del centro queda intacto y
     solo los bordes se funden con el negro del hero. Son dos degradados
     cruzados con `intersect`; si un navegador viejo no lo soporta, la foto
     queda con borde recto — se ve peor, pero nunca desaparece. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  filter: saturate(.94) brightness(.9) drop-shadow(0 1.4rem 2.4rem rgba(0,0,0,.6));
}
/* La escena ya trae su propia luz: el foco de apoyo sobra. */
.hero__escena.foto-escena:not(.foto-transparente) .vitrina__foco { opacity: 0; }
/* Y el desvanecido del lado del texto se alarga de 19% a 32%: el titular
   vive a la izquierda y una foto clara le robaría contraste. */
.hero__escena.foto-escena:not(.foto-transparente) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%);
          mask-image: linear-gradient(90deg, transparent 0, #000 32%);
}

@keyframes flotarFoto {
  0%, 100% { transform: translate(-50%, calc(-50% - 6px)); }
  50%      { transform: translate(-50%, calc(-50% + 6px)); }
}

/* ── el objeto ───────────────────────────────────────────── */
.vitrina {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.gafas {
  position: relative;
  /* ÚNICO valor de escala: todo lo demás va en em */
  font-size: 4.1px;
  width: 74em;
  height: 33em;
  transform-style: preserve-3d;
  animation: exhibirGafas 22s linear infinite;
}
@keyframes exhibirGafas {
  from { transform: rotateX(-9deg) rotateY(0deg); }
  to   { transform: rotateX(-9deg) rotateY(360deg); }
}

/* cada lado se abre un poco, como una montura que envuelve la cara */
.lado {
  position: absolute;
  top: 0;
  width: 33em;
  height: 33em;
  transform-style: preserve-3d;
}
.lado--izq { left: 0;    transform: rotateY(-13deg); }
.lado--der { left: 41em; transform: rotateY(13deg); }

/* aro metálico: el conic-gradient da el brillo de metal dorado */
.aro {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-style: preserve-3d;
  background: conic-gradient(from 205deg,
              #7E6111 0deg,
              #F2DC9B 52deg,
              #C9A227 108deg,
              #6E540E 176deg,
              #E9D8A0 246deg,
              #A8861C 312deg,
              #7E6111 360deg);
  box-shadow:
    0 0 1.6em rgba(201,162,39,.55),
    inset 0 0 .5em rgba(0,0,0,.55);
}
/* el cristal: hueco del aro, con un velo azulado tipo blue block */
.aro__cristal {
  position: absolute;
  inset: 1.5em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.22) 0%, transparent 44%),
    radial-gradient(circle at 62% 74%, rgba(78,127,209,.24) 0%, transparent 58%),
    linear-gradient(148deg, rgba(20,26,34,.72), rgba(10,10,10,.82));
  box-shadow: inset 0 0 1.2em rgba(0,0,0,.6);
}
/* reflejo especular que recorre el cristal */
.aro__destello {
  position: absolute;
  inset: 1.5em;
  border-radius: 50%;
  overflow: hidden;
}
.aro__destello::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 42%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: rotate(18deg);
  animation: barrerDestello 6.5s ease-in-out infinite;
}
@keyframes barrerDestello {
  0%, 58%, 100% { left: -60%; opacity: 0; }
  68%           { opacity: .9; }
  84%           { left: 120%; opacity: 0; }
}

/* puente entre los dos aros */
.puente {
  position: absolute;
  left: 31em;
  top: 11.5em;
  width: 12em;
  height: 1.5em;
  border-radius: 1em;
  background: linear-gradient(180deg, #F2DC9B, #C9A227 45%, #7E6111);
  box-shadow: 0 0 .8em rgba(201,162,39,.45);
  transform: translateZ(.4em);
}

/* patilla: sale del borde exterior del aro y se va hacia atrás en Z */
.patilla {
  position: absolute;
  top: 12.6em;
  width: 34em;
  height: 1.4em;
  border-radius: 1em;
  background: linear-gradient(180deg, #E9D8A0, #C9A227 48%, #6E540E);
  transform-style: preserve-3d;
}
.lado--izq .patilla {
  left: -33.6em;
  transform-origin: right center;
  transform: rotateY(-80deg);
}
.lado--der .patilla {
  left: 32.6em;
  transform-origin: left center;
  transform: rotateY(80deg);
}
/* la puntita curva que va detrás de la oreja */
.patilla__punta {
  position: absolute;
  top: 0;
  width: 5.4em;
  height: 1.4em;
  border-radius: 1em;
  background: linear-gradient(180deg, #C9A227, #6E540E);
}
.lado--izq .patilla__punta { left: -4.4em; transform-origin: right center; transform: rotateZ(24deg); }
.lado--der .patilla__punta { right: -4.4em; transform-origin: left center;  transform: rotateZ(-24deg); }

.hero__interior {

  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 11vw, 7.5rem);
  /* max-width va en los hijos, no aquí: al limitar el contenedor, el
     `margin-inline: auto` de .contenedor lo centraba y el texto se metía
     debajo de la escena en vez de alinearse con el resto de la página. */
  max-width: none;
}
.hero__interior > * { max-width: 620px; }
.hero__kicker {
  font-family: var(--disp);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1.35rem;
}
.hero__titulo {
  font-size: clamp(2.5rem, 7.5vw, 4.6rem);
  letter-spacing: .01em;
  margin-bottom: 1.35rem;
}
.hero__titulo span {
  color: var(--oro);
  display: inline-block;
}
.hero__bajada {
  font-size: clamp(1rem, 2.3vw, 1.17rem);
  color: rgba(255,255,255,.80);
  max-width: 46ch;
  margin-bottom: 2.1rem;
}
.hero__bajada strong { color: #fff; font-weight: 600; }

.hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.6rem; }

.hero__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero__sellos li {
  position: relative;
  padding-left: 1.35rem;
  font-size: .84rem;
  letter-spacing: .03em;
  color: rgba(255,255,255,.72);
}
.hero__sellos li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--oro);
}

/* ── 6b. CARRUSEL ──────────────────────────────────────── */
.carrusel-seccion { background: var(--surface); padding-block: 2.5rem 0; }

.carrusel { position: relative; }

.carrusel__ventana {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--ink);
  aspect-ratio: 3 / 2;
  max-height: 520px;
}

.carrusel__pista { position: absolute; inset: 0; margin: 0; padding: 0; }

.diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.035);
  transition: opacity 620ms ease, transform 900ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 620ms;
}
.diapo.is-activa {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 620ms ease, transform 900ms cubic-bezier(.22,.61,.36,1), visibility 0s;
}

.diapo__arte { position: absolute; inset: 0; }
.diapo__arte svg { width: 100%; height: 100%; display: block; }

/* la foto real tapa el arte cuando existe */
.diapo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diapo__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.60) 46%, rgba(10,10,10,.15) 100%);
}

.diapo__texto {
  position: absolute;
  left: 0; bottom: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 34rem;
  color: #fff;
}
.diapo__kicker {
  font-family: var(--disp);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .8rem;
}
.diapo__titulo {
  font-size: clamp(1.5rem, 4.4vw, 2.6rem);
  letter-spacing: .02em;
  margin-bottom: .7rem;
}
.diapo__bajada {
  font-size: clamp(.9rem, 2.2vw, 1.02rem);
  color: rgba(255,255,255,.82);
  max-width: 40ch;
}

.carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1.5px solid rgba(255,255,255,.32);
  border-radius: 50%;
  background: rgba(10,10,10,.48);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.carrusel__flecha:hover { background: var(--oro); border-color: var(--oro); color: var(--ink); }
.carrusel__flecha svg { width: 21px; height: 21px; }
.carrusel__flecha--prev { left: 1rem; }
.carrusel__flecha--next { right: 1rem; }

.carrusel__puntos {
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding-top: 1.1rem;
}
.punto {
  width: 34px; height: 4px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--line-fuerte);
  cursor: pointer;
  transition: background var(--tr), width var(--tr);
}
.punto:hover { background: var(--oro-hondo); }
.punto[aria-selected="true"] { background: var(--oro-hondo); width: 52px; }

/* sin JS: se ven todas apiladas pero la primera manda; nunca queda en blanco */
.carrusel:not([data-listo]) .diapo:not(.is-activa) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .diapo { transition: opacity 1ms linear, visibility 0s; transform: none; }
  .diapo.is-activa { transform: none; }

  /* Los lentes dejan de girar, pero NO se quedan de frente y planos: se
     congelan en un tres cuartos, que es el ángulo en que mejor se leen.
     Quien tenga las animaciones apagadas ve una vitrina quieta y decente,
     no un fotograma raro. */
  .gafas { animation: none; transform: rotateX(-9deg) rotateY(-32deg); }
  .vitrina__halo   { animation: none; opacity: .85; }
  .vitrina__sombra { animation: none; transform: scaleX(.78); }
  .aro__destello::before { animation: none; opacity: 0; }
  /* la foto real se queda centrada, sin flotar */
  .vitrina__foto { animation: none; transform: translate(-50%, -50%); }
  /* el recorte se congela en tres cuartos, igual que los lentes 3D: es el
     ángulo en que mejor se lee. De frente parecería una calcomanía. */
  .hero__escena.foto-transparente .vitrina__foto {
    animation: none;
    transform: translate(-50%, -50%) rotateX(-4deg) rotateY(-16deg);
  }
  .hero__escena.foto-transparente .vitrina__sombra {
    animation: none; transform: scaleX(.92);
  }
}

/* ── 7. CATEGORÍAS ─────────────────────────────────────── */
.categorias { background: var(--surface); padding-block: 2.5rem; }
.categorias__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.tarjeta-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 138px;
  padding: 1.4rem 1rem;
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: var(--radio);
  text-align: center;
  transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.tarjeta-cat:hover {
  background: var(--surface);
  border-color: var(--oro);
  transform: translateY(-3px);
}
.tarjeta-cat__ico { width: 52px; color: var(--ink); }
.tarjeta-cat__ico svg { width: 100%; height: auto; }
.tarjeta-cat__nombre {
  font-family: var(--disp);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
}
.tarjeta-cat__pie { font-size: .78rem; color: var(--ink-55); }
.tarjeta-cat--promo { background: var(--ink); color: #fff; }
.tarjeta-cat--promo .tarjeta-cat__ico { color: var(--oro); }
.tarjeta-cat--promo .tarjeta-cat__pie { color: var(--oro-claro); }
.tarjeta-cat--promo:hover { background: #000; border-color: var(--oro); }

/* ── 8. SECCIONES ──────────────────────────────────────── */
.seccion { padding-block: clamp(3.5rem, 8vw, 6rem); }
.seccion--alt { background: var(--surface-alt); }

.seccion__cabeza { margin-bottom: 2.75rem; max-width: 62ch; }
.seccion__cabeza--centro { margin-inline: auto; text-align: center; }
.seccion__titulo {
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  letter-spacing: .04em;
  margin-bottom: .8rem;
  position: relative;
  padding-bottom: .85rem;
}
.seccion__titulo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 54px; height: 3px;
  background: var(--oro);
}
.seccion__cabeza--centro .seccion__titulo::after { left: 50%; transform: translateX(-50%); }
.seccion__sub { color: var(--ink-70); font-size: 1.02rem; }

/* ── 9. PRODUCTOS ──────────────────────────────────────── */
.productos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.producto {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1.25rem 1.25rem 1.4rem;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.producto:hover {
  border-color: var(--line-fuerte);
  box-shadow: var(--sombra-alta);
  transform: translateY(-4px);
}
.producto--destacado { border-color: var(--oro); }
.producto--destacado:hover { border-color: var(--oro-hondo); }

.producto__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 22px;
  margin-bottom: .75rem;
}
.etq {
  font-family: var(--disp);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .5rem;
  border-radius: 2px;
  line-height: 1;
}
.etq--oro   { background: var(--oro-velo); color: var(--oro-texto); }
.etq--negro { background: var(--ink); color: #fff; }

.producto__figura {
  background: var(--surface-alt);
  border-radius: var(--radio);
  padding: 1.4rem 1rem;
  margin-bottom: 1.1rem;
}
.producto__figura svg { width: 100%; height: auto; }

.producto__marca {
  font-family: var(--disp);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--ink-55);
  margin-bottom: .4rem;
}
.producto__nombre {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.3;
  min-height: 2.6em;
  margin-bottom: .85rem;
}
.producto__incluye {
  display: grid;
  gap: .3rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.producto__incluye li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .82rem;
  color: var(--ink-70);
  line-height: 1.45;
}
.producto__incluye li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 9px; height: 5px;
  border-left: 1.8px solid var(--oro-hondo);
  border-bottom: 1.8px solid var(--oro-hondo);
  transform: rotate(-45deg);
}
.producto__precio {
  font-family: var(--disp);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  margin-bottom: 1.1rem;
  margin-top: auto;
}
.producto__cent { font-size: 1.1rem; vertical-align: super; letter-spacing: 0; }
.producto__desde {
  display: block;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: .15rem;
}

.nota-precios {
  margin-top: 1.75rem;
  padding: 1rem 1.15rem;
  background: var(--surface-alt);
  border-left: 3px solid var(--oro);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: .88rem;
  color: var(--ink-70);
}

/* ── 10. BANDA ─────────────────────────────────────────── */
.banda { background: var(--ink); color: #fff; }
.banda__interior {
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.banda__interior > div { max-width: 62ch; }
.banda__kicker {
  font-family: var(--disp);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--oro);
  margin-bottom: .7rem;
}
.banda__titulo { font-size: clamp(1.45rem, 3.6vw, 2.05rem); letter-spacing: .03em; margin-bottom: .8rem; }
.banda__texto { color: rgba(255,255,255,.75); font-size: .98rem; }

/* ── 11. TIPOS DE LENTE ────────────────────────────────── */
.lentes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}
.lente {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1.75rem 1.5rem;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.lente:hover { border-color: var(--oro); transform: translateY(-3px); box-shadow: var(--sombra); }
.lente__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radio);
  background: var(--oro-velo);
  color: var(--oro-texto);
  margin-bottom: 1.1rem;
}
.lente__ico svg { width: 24px; height: 24px; }
.lente h3 { font-size: 1.02rem; letter-spacing: .1em; margin-bottom: .35rem; }
.lente__para {
  font-family: var(--disp);
  font-size: .82rem;
  font-weight: 600;
  color: var(--oro-texto);
  margin-bottom: .7rem;
}
.lente p:last-child { font-size: .9rem; color: var(--ink-70); }

/* ── 11b. COMPARACIONES ────────────────────────────────── */
.comparaciones { background: var(--surface); }
.comparaciones[hidden] { display: none; }

.comparaciones__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.compara {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.compara:hover { border-color: var(--oro); box-shadow: var(--sombra-alta); transform: translateY(-3px); }

/* el marco de la imagen: fondo oscuro porque las dos fotos son nocturnas */
.compara__marco {
  position: relative;
  background: var(--ink);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.compara__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* línea dorada al medio: refuerza que son dos mitades comparadas */
.compara__marco::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(201,162,39,.75) 22%, rgba(201,162,39,.75) 78%, transparent);
  pointer-events: none;
}

.compara__pie { padding: 1.5rem 1.5rem 1.65rem; }
.compara__eti {
  font-family: var(--disp);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-texto);
  margin-bottom: .6rem;
}
.compara__pie h3 { font-size: 1.15rem; letter-spacing: .02em; margin-bottom: .7rem; }
.compara__pie p { font-size: .93rem; color: var(--ink-70); }
.compara__precio {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-fuerte);
  font-size: .92rem;
}
.compara__precio strong { font-family: var(--disp); font-weight: 700; }

/* ── 12. PASOS ─────────────────────────────────────────── */
.pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  counter-reset: paso;
}
.paso { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--line); }
.paso__num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--oro);
  font-family: var(--disp);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.paso h3 { font-size: 1.05rem; letter-spacing: .04em; margin-bottom: .5rem; }
.paso p { font-size: .9rem; color: var(--ink-70); }
.pasos__cta { margin-top: 2.75rem; text-align: center; }

/* ── 13. PRUEBA SOCIAL ─────────────────────────────────── */
.prueba {
  background: var(--surface-alt);
  padding-block: clamp(3rem, 7vw, 4.75rem);
  text-align: center;
}
.prueba__titulo {
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  letter-spacing: .05em;
  margin-bottom: 2.5rem;
}
.prueba__cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.cifra {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1.6rem 1rem;
}
.cifra__num {
  font-family: var(--disp);
  font-size: clamp(1.75rem, 4.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin-bottom: .5rem;
}
.cifra__eti { font-size: .8rem; color: var(--ink-55); letter-spacing: .02em; }
.prueba__pie { font-size: .95rem; color: var(--ink-70); }
.prueba__pie a { color: var(--oro-texto); font-weight: 600; border-bottom: 1px solid currentColor; }
.prueba__pie a:hover { color: var(--ink); }

/* ── 14. FAQ ───────────────────────────────────────────── */
.faq { display: grid; gap: .7rem; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  transition: border-color var(--tr);
}
.faq__item[open] { border-color: var(--oro); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 3.2rem 1.1rem 1.35rem;
  font-family: var(--disp);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 1.35rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--oro-hondo);
  border-bottom: 2px solid var(--oro-hondo);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--tr);
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__cuerpo { padding: 0 1.35rem 1.25rem; }
.faq__cuerpo p { font-size: .93rem; color: var(--ink-70); }

/* ── 15. CTA / FORMULARIO ──────────────────────────────── */
.cta {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
.cta__cabeza { text-align: center; margin-bottom: 2.25rem; }
.cta__titulo { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: .04em; margin-bottom: .8rem; }
.cta__titulo::after { display: none; }
.cta__sub { color: rgba(255,255,255,.72); max-width: 52ch; margin-inline: auto; }

.form { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .4rem; }
.campo label {
  font-family: var(--disp);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.campo__opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.5); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: var(--radio);
  color: #fff;
  font-family: var(--sans);
  font-size: .95rem;
  transition: border-color var(--tr), background var(--tr);
}
.campo textarea { resize: vertical; min-height: 88px; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(255,255,255,.52); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--oro);
  background: rgba(255,255,255,.09);
}
.campo select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A227' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  padding-right: 2.5rem;
}
.campo select option { background: var(--ink); color: #fff; }

.campo.is-mal input, .campo.is-mal select { border-color: #E0736A; }
.campo__error { font-size: .8rem; color: #E0736A; min-height: 0; }
.campo.is-mal .campo__error { min-height: 1.2em; }

.form__nota {
  text-align: center;
  font-size: .88rem;
  color: var(--oro-claro);
  min-height: 1.3em;
}

/* ── 16. VISÍTANOS ─────────────────────────────────────── */
.visita {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;
}
.visita__datos { display: grid; gap: 1.1rem; }
.visita__datos li {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--surface-alt);
  border-radius: var(--radio);
  border-left: 3px solid var(--oro);
}
.visita__ico {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radio);
  background: var(--surface);
  color: var(--oro-texto);
}
.visita__ico svg { width: 21px; height: 21px; }
.visita__datos h3 { font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55); margin-bottom: .3rem; }
.visita__datos p { font-size: .96rem; }
.visita__datos a { border-bottom: 1px solid var(--line-fuerte); }
.visita__datos a:hover { color: var(--oro-texto); border-color: var(--oro); }

.mapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 100%;
  padding: 3rem 1.5rem;
  background: var(--ink);
  border-radius: var(--radio);
  color: #fff;
  text-align: center;
  transition: background var(--tr);
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 38px 38px;
}
.mapa:hover { background-color: #000; }
.mapa__pin { width: 46px; color: var(--oro); }
.mapa__texto { display: grid; gap: .3rem; font-size: .88rem; color: rgba(255,255,255,.62); }
.mapa__texto strong {
  font-family: var(--disp);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: #fff;
}

/* ── 17. PIE ───────────────────────────────────────────── */
.pie { background: var(--ink); color: rgba(255,255,255,.72); }
.pie__interior {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-block: clamp(2.75rem, 6vw, 4rem);
}
.logo--pie { color: #fff; margin-bottom: 1rem; }
.logo--pie .logo__texto em { color: rgba(255,255,255,.5); }
.pie__lema { font-size: .92rem; max-width: 40ch; }
.pie h3 {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.pie__nav { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.pie__nav a, .pie__contacto a { font-size: .92rem; }
.pie__nav a:hover, .pie__contacto a:hover { color: var(--oro); }
.pie__contacto p { font-size: .92rem; margin-bottom: .5rem; }

.pie__redes { display: flex; gap: .6rem; margin-top: 1.1rem; }
.pie__redes a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radio);
  color: rgba(255,255,255,.8);
  transition: border-color var(--tr), color var(--tr), background var(--tr);
}
.pie__redes a:hover { border-color: var(--oro); color: var(--oro); background: rgba(201,162,39,.10); }
.pie__redes svg { width: 19px; height: 19px; }

.pie__legal { border-top: 1px solid rgba(255,255,255,.12); }
.pie__legal-int {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding-block: 1.25rem;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
}
.pie__credito a { color: var(--oro); }
.pie__credito a:hover { color: var(--oro-claro); }

/* ── 18. BOTÓN FLOTANTE ────────────────────────────────── */
.flotante {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.25rem;
  background: var(--oro);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--disp);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .06em;
  box-shadow: 0 10px 30px rgba(18,18,18,.28);
  transition: background var(--tr), transform var(--tr), color var(--tr);
}
.flotante:hover { background: var(--oro-hondo); color: #fff; transform: translateY(-2px); }
.flotante svg { width: 21px; height: 21px; flex: none; }

/* ── 19. ANIMACIÓN DE ENTRADA ──────────────────────────── */
.aparece {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.22,.61,.36,1);
}
.aparece.is-visible { opacity: 1; transform: none; }

/* ── 20. RESPONSIVE ────────────────────────────────────── */
/* Tramo intermedio: con la ventana entre 901 y 1200 px la escena a tamaño
   completo se metía unos 76 px por debajo del texto del hero. Se encoge y se
   corre a la derecha para que el arte sólido nunca quede detrás de las letras. */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero__escena { width: min(430px, 36vw); right: -10%; opacity: .7; }
  .gafas { font-size: 3.3px; }
}

@media (max-width: 1080px) {
  .productos { grid-template-columns: repeat(2, 1fr); }
  .lentes__grid { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .comparaciones__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hamburguesa { display: grid; }

  /* En móvil la escena se va del todo cuando es una FOTO de ambiente.
     Los lentes 3D eran oscuros y podían quedarse detrás del titular sin
     molestar; una foto clara al 38% sube el fondo a un contraste de 2,7:1
     contra el texto blanco y lo vuelve ilegible. La foto sigue estando en
     el carrusel, justo debajo. */
  .hero__escena.foto-escena:not(.foto-transparente) { display: none; }

  .nav {
    position: fixed;
    inset: 0 0 auto;
    top: 110px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(18,18,18,.12);
    padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-140%);
    transition: transform 260ms cubic-bezier(.4,0,.2,1);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  .nav.is-abierto { transform: none; }
  .nav a { padding: .95rem .25rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
  .nav a::after { display: none; }

  /* la escena es solo decoración: se aparta del texto y se atenúa */
  .hero__escena { width: min(460px, 80vw); right: -18%; opacity: .55; }
  .gafas { font-size: 3.4px; }

  .categorias__grid { grid-template-columns: repeat(2, 1fr); }
  .prueba__cifras { grid-template-columns: repeat(2, 1fr); }
  .visita { grid-template-columns: 1fr; }
  .mapa { min-height: 240px; }
  .pie__interior { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .contenedor, .cabecera__interior { width: min(100% - 1.75rem, var(--ancho)); }
  .contenedor--angosto { width: min(100% - 1.75rem, var(--ancho-min)); }

  .anuncio { font-size: .7rem; letter-spacing: .06em; }
  .logo__marca { width: 38px; }
  .logo__texto strong { font-size: .86rem; letter-spacing: .13em; }
  .logo__texto em { font-size: .52rem; letter-spacing: .34em; }

  .hero__acciones .btn { width: 100%; }
  .hero__sellos { gap: .55rem; flex-direction: column; }
  .hero__escena { width: min(340px, 84vw); right: -26%; top: 26%; opacity: .38; }
  .gafas { font-size: 2.5px; }

  .productos { grid-template-columns: 1fr; }
  .producto__nombre { min-height: 0; }
  .lentes__grid { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .prueba__cifras { grid-template-columns: 1fr 1fr; }
  .pie__interior { grid-template-columns: 1fr; }

  .banda__interior .btn { width: 100%; }

  .carrusel__ventana { aspect-ratio: 4 / 5; max-height: none; }
  .diapo__velo { background: linear-gradient(0deg, rgba(10,10,10,.90) 12%, rgba(10,10,10,.55) 52%, rgba(10,10,10,.20) 100%); }
  .carrusel__flecha { width: 38px; height: 38px; }
  .carrusel__flecha--prev { left: .55rem; }
  .carrusel__flecha--next { right: .55rem; }
  .flotante span { display: none; }
  .flotante { padding: .9rem; border-radius: 50%; }
}

/* Teléfonos muy angostos (320–380 px): el botón de WhatsApp de la cabecera no
   cabe junto al logo y desbordaba la página a lo ancho. Se quita de la
   cabecera; el botón flotante sigue ahí, así que no se pierde el CTA. */
@media (max-width: 380px) {
  .cabecera__acciones .btn { display: none; }
  .logo__marca { width: 34px; }
  .logo__texto strong { font-size: .8rem; letter-spacing: .11em; }
}