/* =========================================================================
   ÓPTICA ERANDIO · maqueta clásica

   Dirección de arte: mezcla de las tres direcciones editoriales.
   Portada y terapia visual, centradas y a página completa · Servicios y
   generaciones, en tabla y fichas · Opiniones y contacto, con la columna
   estrecha de rótulos numerados.

   El hilo que cose las tres: la paleta, las tres tipografías y el rótulo
   numerado en monoespaciada (01…06), que se queda en todas las secciones
   aunque la columna lateral desaparezca.

   Paleta: medida de sus fotos de fachada (negocio.json → colores).
   El dorado NO es un color medido del negocio: es el acento del diseño.
   Se mantiene porque une la página, pero no se presenta como "su color".
   ---------------------------------------------------------------------
   0 · Variables y tipografías
   1 · Base y utilidades
   2 · Navegación
   3 · Portada (hero)
   4 · Franja de confianza
   5 · Rejilla editorial y cabeceras de sección
   6 · 01 Visión
   7 · 02 Servicios y galería
   8 · 03 La nueva generación
   9 · 04 Por qué esta óptica
  10 · 05 Opiniones
  11 · 06 Contacto y redes
  12 · Pie
  13 · Animaciones de entrada
  14 · Móvil
   ========================================================================= */

/* ---------- 0 · Variables y tipografías ---------------------------------- */

@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/Jost-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/Jost-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/HankenGrotesk-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/HankenGrotesk-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Tipografías — OJO: la película usa OTROS nombres de variable */
  --titulo: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --texto: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* Color — medidos de sus fotos de fachada */
  --oscuro: #101010;
  --fondo: #FCFAEE;
  --blanco: #FFFFFF;
  --tinta: #1A191F;

  /* Acento del diseño (no es un color medido del negocio) */
  --oro: #CBAE86;
  --oro-osc: #8A6A3B;

  /* El ámbar de las estrellas de valoración. Va aparte a propósito: es el
     único color de la página que no sale ni de su fachada ni del diseño,
     y está aquí para poder bajarlo a --oro-osc de un solo cambio. */
  --estrella: #E0A33C;

  /* Derivados */
  --linea: rgba(26, 25, 31, 0.14);
  --linea-fuerte: rgba(26, 25, 31, 0.3);
  --suave: rgba(26, 25, 31, 0.65);
  --suave-claro: rgba(252, 250, 238, 0.7);

  --nav-alto: 68px;
  --ancho: 1180px;

  /* La esquina de los botones y las pastillas. Un solo valor para toda la
     página: si hay que suavizarlos más o menos, se cambia aquí y ya. */
  --radio: 10px;
}

/* ---------- 1 · Base y utilidades ---------------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-alto);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--oro-osc); }

:focus-visible {
  outline: 2px solid var(--oro-osc);
  outline-offset: 3px;
}

h1, h2, h3 { font-family: var(--titulo); font-weight: 200; margin: 0; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 60px; }
.contenedor--estrecho { max-width: 820px; }

/* Etiqueta pequeña en monoespaciada: los "01 / Destacado" del diseño.
   Es el hilo que cose las tres direcciones editoriales de esta página. */
.rotulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro-osc);
  margin: 0;
}

.raya-oro { display: block; width: 40px; height: 2px; background: var(--oro); }

/* Estrellas de valoración */
.estrellas {
  color: var(--estrella);
  letter-spacing: 0.18em;
  font-size: 14px;
  line-height: 1;
}
.estrellas--grande { display: block; font-size: 18px; margin: 20px 0 0; }

/* Iconos que acompañan a un dato: el teléfono fijo y WhatsApp.
   Van en `currentColor`, es decir, EXACTAMENTE el gris de la letra que tienen
   al lado: oscuro sobre el crema de contacto y crema sobre el negro del pie.
   Nunca el verde de WhatsApp — un icono de color pegado a un número le roba
   la mirada justo al botón que paga la web, y encima la marca verde no pinta
   nada dentro de la identidad de una óptica.
   A `1em` miden lo mismo que el texto, y como el enlace es `inline-flex` con
   `align-items:center`, quedan alineados con el número aunque cambie el
   tamaño de la letra.

   Los dos van MACIZOS y no de trazo fino, y eso se decidió mirando una
   captura ampliada: el teléfono de sobremesa dibujado a línea (cuerpo, patas
   y auricular) se emborrona a 12-17 px y se lee como un sello, no como un
   teléfono. El auricular macizo se reconoce a cualquier tamaño y además hace
   pareja con el logotipo de WhatsApp, que es macizo por definición. */
.icono-dato {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
}

.boton {
  display: inline-block;
  background: var(--oscuro);
  color: var(--fondo);
  padding: 16px 32px;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}
.boton:hover { background: #2A2A2A; color: var(--fondo); }

.boton-linea {
  display: inline-block;
  border: 1px solid var(--linea-fuerte);
  padding: 15px 30px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.boton-linea:hover { border-color: var(--oscuro); background: rgba(16, 16, 16, 0.04); }

/* Sobre foto oscura: el mismo botón, en claro */
.boton-linea--claro { border-color: rgba(252, 250, 238, 0.5); color: var(--fondo); }
.boton-linea--claro:hover {
  border-color: var(--fondo);
  background: rgba(252, 250, 238, 0.12);
  color: var(--fondo);
}

/* Botones y pastillas, con la esquina suavizada.
   Las SECCIONES, las fichas, las fotos y las tablas se quedan a escuadra a
   propósito: es el contraste entre los bloques rectos y los botones blandos
   lo que hace que un botón se lea como botón y no como otro recuadro más. */
.boton,
.boton-linea,
.nav__tel,
.nav__cita { border-radius: var(--radio); }

/* ---------- El rótulo del escaparate, como un OPTOTIPO -------------------
   No tienen logo en archivo: su rótulo es tipográfico, ÓP / TICA / ERANDIO en
   tres líneas. Y esas tres líneas son, sin querer, un cuadro de agudeza
   visual: pocas letras grandes arriba, muchas y pequeñas abajo. Aquí se hace
   explícito escalando cada línea por debajo de la anterior.
   Los tamaños son relativos (em), así que todo el bloque se escala cambiando
   solo el font-size del contenedor. */
/* Proporciones MEDIDAS sobre el logo oficial (logo 2.jpg), no estimadas:
   altura de letra 1 / 0,82 / 0,40, y el espaciado sale de CUADRAR LOS ANCHOS,
   no de copiar un número: en el logo oficial TICA y ERANDIO miden exactamente
   lo mismo (554 y 552 px) y ÓP la mitad (284). Eso es lo que lo hace leerse
   como un bloque, y es lo que se reproduce aquí.
   El `text-indent` repite la separación porque `letter-spacing` añade hueco
   TAMBIÉN detrás de la última letra: sin compensarlo cada línea queda
   descentrada hacia la izquierda justo esa cantidad, y con separaciones tan
   anchas como estas se ve a simple vista. */
.rotulo-marca {
  font-family: var(--titulo);
  font-weight: 200;
  line-height: 1;
  margin: 0;
}
.rotulo-marca span { display: block; }
.rotulo-marca .linea-1 { font-size: 1em;    letter-spacing: 0.49em; text-indent: 0.49em; }
.rotulo-marca .linea-2 {
  font-size: 0.82em;
  letter-spacing: 0.75em;
  text-indent: 0.75em;
  margin-top: 0.26em;
}
.rotulo-marca .linea-3 {
  font-size: 0.40em;
  letter-spacing: 0.75em;
  text-indent: 0.75em;
  font-weight: 300;
  margin-top: 0.62em;
}

/* ---------- 2 · Navegación ----------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-alto);
  z-index: 60;
  background: rgba(252, 250, 238, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Todo lo que se pulsa mide 44 px de alto como mínimo, aunque la caja no se
   vea. Por debajo de esa medida el dedo falla el toque, lo repite, y a la
   tercera se va — y aquí el que más se falla es el teléfono, que es el que
   paga la web. El `inline-flex` es solo para poder darle alto a un enlace
   que por dentro sigue siendo una línea de texto. */
.nav__marca,
.nav__tel,
.nav__cita {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav__tel { gap: 8px; }
.nav__marca {
  font-family: var(--titulo);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__enlaces { display: flex; gap: 28px; align-items: center; }
.nav__enlaces a {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--suave);
  position: relative;
  padding: 4px 0;
}
.nav__enlaces a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--oro-osc);
  transition: width 0.28s ease;
}
.nav__enlaces a:hover { color: var(--tinta); }
.nav__enlaces a:hover::after { width: 100%; }

.nav__acciones { display: flex; align-items: center; gap: 10px; }

.nav__tel {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  border: 1px solid var(--linea-fuerte);
  padding: 10px 18px;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.nav__tel:hover { background: var(--oscuro); color: var(--fondo); }

/* El botón de acción de la barra. Va relleno y el teléfono va en línea: si los
   dos pesaran igual, ninguno de los dos manda y el visitante no elige. */
.nav__cita {
  background: var(--oscuro);
  color: var(--fondo);
  padding: 11px 22px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav__cita:hover { background: #2A2A2A; color: var(--fondo); }

.nav__hamburguesa {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.nav__hamburguesa span {
  display: block;
  width: 24px; height: 1px;
  background: var(--tinta);
  margin: 6px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav.abierta .nav__hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.abierta .nav__hamburguesa span:nth-child(2) { opacity: 0; }
.nav.abierta .nav__hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* La barra sobre la foto de la portada.
   OJO al sentido: esta clase la PONE el JavaScript. Si el JS no llega a
   ejecutarse, la barra se queda en su versión crema de siempre, que sobre la
   foto se lee perfectamente. Al revés (transparente por defecto) un fallo de
   JS dejaría el menú invisible sobre la foto. */
.nav--sobre-hero {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: rgba(252, 250, 238, 0.18);
}
.nav--sobre-hero .nav__marca { color: var(--fondo); }
.nav--sobre-hero .nav__enlaces a { color: rgba(252, 250, 238, 0.82); }
.nav--sobre-hero .nav__enlaces a:hover { color: var(--fondo); }
.nav--sobre-hero .nav__enlaces a::after { background: var(--oro); }
.nav--sobre-hero .nav__tel { color: var(--fondo); border-color: rgba(252, 250, 238, 0.45); }
.nav--sobre-hero .nav__tel:hover { background: var(--fondo); color: var(--oscuro); }
/* Sobre la foto se invierte: relleno en crema, letra negra. Un botón negro
   sobre una fachada negra desaparecería. */
.nav--sobre-hero .nav__cita { background: var(--fondo); color: var(--oscuro); }
.nav--sobre-hero .nav__cita:hover { background: var(--blanco); color: var(--oscuro); }
.nav--sobre-hero .nav__hamburguesa span { background: var(--fondo); }
/* Con el menú de móvil desplegado vuelve a su fondo sólido: si no, la barra
   queda transparente encima del panel crema y se ve el corte. */
.nav--sobre-hero.abierta {
  background: rgba(252, 250, 238, 0.96);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linea);
}
.nav--sobre-hero.abierta .nav__marca { color: var(--tinta); }
.nav--sobre-hero.abierta .nav__enlaces a { color: var(--suave); }
.nav--sobre-hero.abierta .nav__tel { color: var(--tinta); border-color: var(--linea-fuerte); }
.nav--sobre-hero.abierta .nav__cita { background: var(--oscuro); color: var(--fondo); }
.nav--sobre-hero.abierta .nav__hamburguesa span { background: var(--tinta); }

/* ---------- 3 · Portada (hero) -------------------------------------------
   Su fachada a sangre, con velo, y el contenido centrado encima. */

/* La foto pasa POR DEBAJO de la barra, no por debajo del hueco que deja la
   barra. Con `margin-top` la franja de arriba era fondo crema del body, y
   sobre ella la barra transparente pintaba su texto en crema: menú invisible.
   Se vio en la primera captura y no leyendo el código. */
.hero {
  position: relative;
  padding-top: var(--nav-alto);
  /* Una pantalla completa, PERO con tope: en un monitor grande una portada de
     1.300 px de alto esconde que hay más web debajo, y el visitante no baja.
     El tope deja asomar el arranque de la franja, que es lo que invita a
     seguir bajando. */
  min-height: min(100vh, 820px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--oscuro);
  color: var(--fondo);
}
.hero__fondo { position: absolute; inset: 0; }
.hero__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Encuadrado al ESCAPARATE iluminado, no al rótulo.
     A pantalla completa la foto entra entera de ancho, así que su rótulo real
     caía justo detrás del nuestro y se leía un "ÓP" fantasma duplicado. Se vio
     en la primera captura buena. Acercando al escaparate, el rótulo tipográfico
     de la página hace de rótulo y detrás quedan sus monturas iluminadas, que
     además dicen "esto es una óptica" sin escribirlo. */
  /* La foto original mide 713 px de ancho, así que a pantalla completa hay que
     estirarla casi al doble. El desenfoque mínimo deshace el canto de los
     píxeles: sin él se ve el escalonado en los bordes del edificio.
     El `scale` NO es para encuadrar — es para que el desenfoque no deje un halo
     claro pegado a los cuatro bordes de la pantalla, que es lo que pasa al
     desenfocar algo que acaba justo en el borde. */
  filter: blur(1.6px);
  transform: scale(1.06);
  /* El rótulo real de la tienda ya NO está en el archivo: se recortó al
     convertirlo. Se intentó antes esconderlo solo con el encuadre y no aguanta,
     porque al estrechar la pantalla `cover` cambia de eje de recorte y el
     rótulo vuelve a asomar. Lo que no está en el archivo no reaparece nunca. */
  object-position: 50% 45%;
}
/* Velo. Doble capa a propósito: el radial oscurece el centro, donde va el
   texto, y el lineal remata arriba (para la barra) y abajo (para el pie).
   Medido en captura: por debajo de esto el titular deja de leerse. */
.hero__velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 72% at 50% 48%, rgba(16, 16, 16, 0.5), rgba(16, 16, 16, 0.78) 76%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.62), rgba(16, 16, 16, 0.26) 46%, rgba(16, 16, 16, 0.86));
}
.hero__centro {
  position: relative;
  z-index: 2;
  width: min(92%, 780px);
  text-align: center;
  padding: 72px 0 96px;
}
.hero__rotulo { font-size: 86px; }
.hero__raya { margin: 44px auto 0; background: var(--oro); }
/* Su lema corto, encima del titular y en pequeño: hace de entradilla y deja
   que el titular entre limpio. */
.hero__etiqueta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(252, 250, 238, 0.72);
  margin: 26px 0 0;
}
.hero__claim {
  font-family: var(--titulo);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin: 14px 0 0;
}
.hero__descripcion {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(252, 250, 238, 0.82);
  max-width: 560px;
  margin: 22px auto 0;
}
.hero__acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 38px;
}
.hero__acciones .boton { background: var(--fondo); color: var(--oscuro); }
.hero__acciones .boton:hover { background: var(--blanco); color: var(--oscuro); }
.hero__sello {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 46px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(252, 250, 238, 0.22);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(252, 250, 238, 0.78);
}
.hero__pie {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0 32px 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252, 250, 238, 0.7);
}

/* ---------- 4 · Franja de confianza -------------------------------------- */

.franja {
  background: var(--oscuro);
  color: var(--suave-claro);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  border-top: 1px solid rgba(252, 250, 238, 0.12);
}
.franja ul {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 22px 60px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
}
.franja li { display: flex; align-items: center; gap: 10px; }
.franja svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: var(--oro); fill: none; stroke-width: 1.4; }

/* ---------- 5 · Rejilla editorial y cabeceras de sección ----------------- */

.seccion { padding: 100px 0; }
.seccion--blanca { background: var(--blanco); border-top: 1px solid var(--linea); }
.seccion--centrada { text-align: center; }

/* Sección de luz: arranca en el mismo negro de la franja de arriba y se abre
   hacia su crema. Así la portada oscura no termina en un corte, se disuelve.

   Tres detalles que no son gratuitos:
   · El degradado va en PÍXELES, no en porcentajes. En porcentaje, la caída
     dependería de lo alta que sea la sección, y en móvil (donde el contenido
     crece) se estiraría hasta parecer una mancha.
   · Pasa por su gama cálida (#3D352A → #8A7C63 → #D8CDB2) en vez de por un
     gris neutro. Un negro que se aclara hacia un gris se ve sucio; hacia su
     dorado se ve intencionado.
   · El resplandor dorado del centro es lo que sustituye al bloque negro como
     forma de decir "esta sección es la importante". Sin él, al pasar a claro
     la sección se confunde con las de al lado. */
.seccion-luz {
  color: var(--tinta);
  padding-top: 300px;
  background:
    radial-gradient(ellipse 58% 34% at 50% 420px, rgba(203, 174, 134, 0.20), transparent 68%),
    linear-gradient(180deg,
      #101010 0,
      #1A1712 46px,
      #3D352A 96px,
      #8A7C63 142px,
      #D8CDB2 184px,
      #F6F1E0 226px,
      var(--fondo) 290px);
}

.rejilla {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: start;
}
/* OJO: esta regla NO puede ser `.rejilla__lateral p`.
   Así escrita alcanzaría también a `.rotulo`, `.nota-grande` y `.nota-pie`, y
   como es más específica que ellas GANARÍA en silencio: los rótulos numerados
   salían grises y a 15 px en vez de dorados a 11 px, y el "5,0" de las
   opiniones salía diminuto. CSS no avisa de esto; solo se ve en una captura. */
.rejilla__lateral .lateral-nota { font-size: 15px; line-height: 1.7; color: var(--suave); margin-top: 18px; }

/* Cabecera de sección a lo ancho: el título a la izquierda y una nota corta
   a la derecha, alineados por su línea de base. */
.cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.cabecera__titulo {
  font-weight: 300;
  font-size: 34px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 14px 0 0;
}
.cabecera__nota { font-size: 15px; color: var(--suave); margin: 0; max-width: 420px; }

/* Bloque de encabezado centrado, para las secciones sin columna lateral */
.bloque-centrado { max-width: 660px; margin: 0 auto 56px; text-align: center; }

/* ---------- 6 · 01 Visión -------------------------------------------------
   Centrada y a página completa. El texto es el que escribió la óptica. */

.vision__titulo {
  font-size: 62px;
  letter-spacing: 0.1em;
  line-height: 1.05;
  margin: 22px 0 0;
}
.vision__entrada {
  font-size: 19px;
  line-height: 1.8;
  color: var(--suave);
  margin: 26px auto 0;
  max-width: 680px;
}
/* El énfasis es suyo: las tres palabras del segundo párrafo y las tres del
   último. En una página de pesos 200-400, un negrita normal (700) se saldría
   del tono; 600 sobre la tinta plena destaca sin romper nada. */
.vision__entrada strong { font-weight: 600; color: var(--tinta); }

/* El último párrafo cierra el ritmo de tres + tres, así que se separa y sube
   un punto de tamaño: es el remate, no un párrafo más. */
.vision__cierre {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
  max-width: 480px;
  font-size: 21px;
}

/* Una fotografía sola, centrada y sin recortar: aquí no hay marco al que
   ajustarse, así que la foto entra entera y no hay nada que encuadrar. */
.figura-suelta { margin: 56px auto 0; max-width: 440px; border-radius: 11px; overflow: hidden; }
.figura-suelta img { width: 100%; height: auto; }

/* ---------- 7 · 02 Servicios ---------------------------------------------
   Tabla a dos columnas. Cada fila es su propia rejilla, así el precio queda
   siempre pegado a la derecha de SU columna. */

.servicios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 60px;
}
.servicios__linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  border-top: 1px solid rgba(26, 25, 31, 0.16);
  padding: 22px 0;
  transition: padding-left 0.3s ease;
}
/* El borde de abajo solo en las dos últimas filas, que son las que cierran
   cada columna. Con :last-of-type solo se cerraba una de las dos. */
.servicios__linea:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(26, 25, 31, 0.16); }
.servicios__linea:hover { padding-left: 10px; }
/* Los servicios van SOLO con su nombre: la óptica no ha escrito descripciones
   y aquí no se inventa lo que hace cada una en su gabinete. Al quedarse la
   fila con un solo hijo, el `space-between` de arriba ya no reparte nada y el
   nombre se queda a la izquierda, que es lo que se quiere. */
.servicios__nombre {
  font-family: var(--titulo);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.3;
}

/* Galería de fotos reales del local.
   Celdas CUADRADAS a propósito: de las seis fotos, dos son apaisadas y cuatro
   casi cuadradas o verticales, y el cuadrado es el único marco que no
   maltrata a ninguna de las dos familias.
   Y ojo con `object-position`: solo puede mover el eje por el que la foto
   SOBRA. En una foto apaisada dentro de un cuadrado manda el horizontal; en
   una vertical, el vertical. Escribir el otro no da error: no hace nada. */
.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
/* El redondeo vive en el MARCO con `overflow: hidden`, no en la imagen:
   la foto se recorta con `object-fit`, y recortar y redondear son dos cosas
   distintas. Puesto en el marco, el redondeo manda sobre lo que quede de la
   foto, salga como salga el recorte. */
.galeria__pieza { margin: 0; border-radius: 11px; overflow: hidden; }
.galeria__pieza img {
  width: 100%;
  /* `height: auto` NO es de adorno y cuesta una tarde encontrarlo.
     Cada <img> lleva `width` y `height` en el HTML para que la página no dé
     saltos mientras cargan las fotos. Ese atributo llega al CSS como una
     altura fija en píxeles, y con la altura YA fijada el navegador ignora el
     `aspect-ratio` de aquí abajo: la proporción solo decide cuando una de las
     dos medidas está en automático. Sin esta línea, las seis fotos salen con
     seis alturas distintas y la rejilla se descuadra. Y no da ningún error. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

/* ---------- 8 · 03 La nueva generación ----------------------------------- */

.generaciones__titulo { font-size: 42px; line-height: 1.2; letter-spacing: 0.06em; margin: 20px 0 0; }

/* El ojo de su logotipo, como remate entre el título y la cita */
.marca-ojo { width: 62px; height: auto; margin: 30px auto 26px; opacity: 0.75; }

.cita-propia {
  font-size: 19px;
  line-height: 1.8;
  color: var(--suave);
  margin: 0;
  border-left: 2px solid var(--oro);
  padding-left: 26px;
  text-align: left;
}

/* Banda a dos columnas: la foto vertical a un lado, el texto de la sección al
   otro. La foto es VERTICAL de origen y se queda vertical; volverla apaisada le
   cortaría los tres cuadros, que son justo el motivo de ponerla.
   La columna de la foto es la estrecha a propósito: una foto vertical ancha
   crece tantísimo de alto que empuja el texto fuera de la pantalla. */
.banda-gen {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin: 0 0 56px;
}
.banda-gen__figura { margin: 0; border-radius: 11px; overflow: hidden; }
.banda-gen__figura img {
  display: block;
  width: 100%;
  height: auto;
  /* Tope de alto para que no se desproporcione al lado del texto. Lo que sobre
     se recorta por arriba y por abajo (nunca por los lados, que ahí están los
     cuadros): con `cover` y la caja más ancha de lo que toca, el recorte cae
     siempre en el eje por el que la foto sobra, y aquí sobra de alto. */
  max-height: 560px;
  object-fit: cover;
  object-position: center;
}
.banda-gen__texto { text-align: left; }
.banda-gen__texto .marca-ojo { margin-left: 0; margin-right: 0; }

.fichas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.ficha { background: var(--blanco); padding: 34px; }
/* Su retrato, arriba a la derecha y en círculo.
   Va con `float` y no con posición absoluta a propósito: flotando, el nombre y
   las primeras líneas se colocan solas a su lado y el texto le hace hueco de
   verdad. Con posición absoluta el texto pasaría por debajo y habría que ir
   reservando el sitio a mano, que se descuadra en cuanto cambia una palabra.
   `shape-outside` redondea ese hueco para que el texto siga la curva. */
.ficha__foto {
  float: right;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 0 16px 20px;
  shape-outside: circle(50%);
}
/* El float hay que cerrarlo: si no, una ficha con poco texto deja la foto
   asomando por debajo del recuadro blanco. */
.ficha::after { content: ''; display: block; clear: both; }
.ficha__nombre { font-family: var(--titulo); font-weight: 300; font-size: 24px; margin: 4px 0 16px; }
.ficha__texto { font-size: 16px; color: var(--suave); line-height: 1.75; margin: 0 0 14px; }
.ficha__texto:last-child { margin-bottom: 0; }

/* ---------- 9 · 04 Por qué esta óptica ----------------------------------- */

.razones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.razon { background: var(--fondo); padding: 36px; position: relative; }
.razon svg { width: 26px; height: 26px; stroke: var(--oro-osc); fill: none; stroke-width: 1.3; }
/* El número del 1 al 4 va a la vista porque va así en su original. Arriba a
   la derecha, frente al icono: en una esquina no le quita sitio al título,
   que es lo que pasaba poniéndolo delante. */
.razon__numero {
  position: absolute;
  top: 30px;
  right: 34px;
  font-family: var(--titulo);
  font-weight: 200;
  font-size: 34px;
  line-height: 1;
  color: var(--oro);
}
.razon h3 { font-size: 26px; font-weight: 300; margin: 18px 0 10px; letter-spacing: 0.02em; }
.razon p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--suave); }

/* ---------- 10 · 05 Opiniones -------------------------------------------- */

.nota-grande {
  font-family: var(--titulo);
  font-size: 56px;
  font-weight: 200;
  color: var(--tinta);
  margin: 8px 0 0;
  line-height: 1;
  letter-spacing: 0.02em;
}
.nota-pie { font-size: 14px; color: var(--suave); line-height: 1.7; margin: 10px 0 0; }
.resenas { display: flex; flex-direction: column; gap: 40px; }
.resena { border-left: 2px solid var(--oro); padding-left: 28px; }
.resena__texto { font-size: 20px; line-height: 1.7; margin: 0 0 14px; }
.resena__autor {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}
.resena__fuente { color: var(--suave); }
.resena__fuente::before { content: '· '; }

/* ---------- 11 · 06 Contacto y redes ------------------------------------- */

.contacto {
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.contacto__datos { padding: 90px 60px; }
.contacto__direccion {
  font-family: var(--titulo);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.4;
  margin: 22px 0 30px;
}
.contacto__lista { font-size: 17px; }
/* El teléfono y el correo de aquí se pulsan de verdad desde el móvil, así que
   llegan a los 44 px con relleno propio. El subrayado pasa de `border-bottom`
   a `text-decoration`: un borde se iría al fondo de la caja rellenada y
   quedaría flotando muy por debajo del texto. */
.contacto__lista a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  text-underline-offset: 5px;
}
/* El subrayado va SOLO en el texto, no en el enlace entero: si no, la raya
   cruza también por debajo del icono y se ve como un tachón. */
.contacto__lista a:hover span { text-decoration: underline; text-decoration-color: var(--oro); }
/* El correo no lleva icono y su texto cuelga directo del enlace, así que ahí
   sí se subraya el enlace entero. Y no puede llevar un <span> dentro: el
   script escribe la dirección con `textContent` y se lo llevaría por delante. */
.contacto__lista a[href^="mailto"]:hover { text-decoration: underline; text-decoration-color: var(--oro); }
.contacto__lista a:hover { color: var(--oro-osc); }

/* Los tres enlaces vivos: Instagram, correo y Facebook.
   Solo el icono, sin la palabra al lado: los tres símbolos se reconocen sin
   ayuda y así la fila queda limpia. El nombre no se pierde para quien navega
   con lector de pantalla, sigue en el aria-label de cada enlace. */
.redes {
  list-style: none;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0 0;
  padding: 0;
}
/* Sin recuadro: el símbolo y nada más. El enlace conserva 44 px de alto y
   ancho aunque no se vea la caja, que es lo que hace que se pueda pulsar
   con el dedo sin apuntar. */
.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--suave);
  transition: color 0.25s ease, transform 0.25s ease;
}
.redes svg {
  width: 25px; height: 25px; flex: 0 0 25px;
  stroke: currentColor; fill: none; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.redes svg .relleno { fill: currentColor; stroke: none; }
.redes a:hover { color: var(--oscuro); transform: translateY(-2px); }

.horario { margin-top: 44px; font-size: 17px; }
.horario__fila {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--linea);
  padding: 14px 0;
}
.horario__fila:last-of-type { border-bottom: 1px solid var(--linea); color: var(--suave); }
.contacto__mapa { min-height: 620px; border: 0; width: 100%; height: 100%; display: block; }

/* ---------- 12 · Pie ------------------------------------------------------ */

.pie {
  background: var(--oscuro);
  color: var(--suave-claro);
  padding: 34px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pie__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.pie a:hover { color: var(--oro); }
/* El teléfono del pie, también a 44 px */
.pie__interior > a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }

/* Su rótulo en crema sobre el negro del pie: es exactamente como se ve en la
   calle, blanco sobre fachada negra. */
.pie__marca { display: inline-flex; align-items: center; gap: 18px; }
.pie__logo { width: auto; height: 52px; }

.redes--pie { margin: 0; gap: 6px; }
/* 44 × 44 como el resto: por debajo de esa medida el dedo falla el toque, lo
   repite, y a la tercera se va. Estos tres medían 40 y eran los únicos de la
   página que se quedaban cortos. */
.redes--pie a { width: 44px; height: 44px; color: var(--suave-claro); }
.redes--pie svg { width: 21px; height: 21px; flex: 0 0 21px; }
.redes--pie a:hover { color: var(--fondo); transform: translateY(-2px); }

/* ---------- 13 · Animaciones de entrada ---------------------------------- */
/* El estado oculto lo pone el JS (clase .js-reveal en <html>), NUNCA el CSS.
   Si el JavaScript no llega a ejecutarse, la web se ve entera sin animación,
   que es infinitamente mejor que una página en blanco. */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
}
.js-reveal .reveal.visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ---------- 14 · Móvil ---------------------------------------------------- */

/* Por debajo de ~900 px la barra va justa con marca + enlaces + teléfono +
   botón. Se cae el botón, no el teléfono: el teléfono es el que se pulsa. */
@media (max-width: 900px) {
  .nav__cita { display: none; }
}

@media (max-width: 1000px) {
  .contenedor, .nav__interior, .franja ul, .pie__interior { padding-left: 32px; padding-right: 32px; }
  .rejilla { grid-template-columns: 1fr; gap: 32px; }
  .hero { min-height: 0; }
  .hero__rotulo { font-size: 68px; }
  .banda-gen { grid-template-columns: 1fr; gap: 32px; }
  .banda-gen__figura img { max-height: 460px; }
  .servicios { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .servicios__linea:nth-last-child(-n + 2) { border-bottom: 0; }
  .servicios__linea:last-child { border-bottom: 1px solid rgba(26, 25, 31, 0.16); }
  .contacto { grid-template-columns: 1fr; }
  .contacto__datos { padding: 60px 32px; }
  .contacto__mapa { min-height: 380px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .seccion { padding: 64px 0; }
  .nav__enlaces {
    position: fixed;
    top: var(--nav-alto); left: 0; right: 0;
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 32px 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav.abierta .nav__enlaces { opacity: 1; transform: none; pointer-events: auto; }
  .nav__enlaces a { font-size: 16px; padding: 12px 0; width: 100%; }
  .nav__hamburguesa { display: block; }
  /* El teléfono NO se esconde en móvil: es el aparato desde el que llaman.
     Se encoge la marca y los espacios hasta que los tres caben en 375 px. */
  .nav__interior { padding: 0 18px; gap: 10px; }
  .nav__marca { font-size: 10px; letter-spacing: 0.16em; text-indent: 0.16em; }
  .nav__tel { padding: 8px 12px; font-size: 11px; letter-spacing: 0.04em; }
  .nav__hamburguesa { padding: 8px 2px; }
  .nav__enlaces { padding: 8px 18px 20px; }

  .hero__centro { padding: 56px 0 78px; }
  .hero__rotulo { font-size: 62px; }
  /* En mayúsculas ocupa bastante más: a 30 px «NOS ENFOCAMOS EN TI» se parte
     en dos renglones feos dentro de 375 px. A 26 px entra de una pieza. */
  .hero__claim { font-size: 26px; letter-spacing: 0.03em; }
  .hero__etiqueta { font-size: 10px; letter-spacing: 0.18em; }
  .hero__descripcion { font-size: 16px; }
  /* En el móvil esta línea se esconde. La dirección no se pierde: sale en la
     franja de confianza y otra vez entera en Contacto. */
  .hero__pie { display: none; }
  .hero__acciones { flex-direction: column; }
  .hero__acciones .boton, .hero__acciones .boton-linea { width: 100%; text-align: center; }
  .hero__sello { font-size: 11px; gap: 8px; }

  .franja ul { flex-direction: column; gap: 12px; padding: 20px 32px; }

  /* En móvil la caída se acorta: 290 px de degradado en una pantalla de 812
     ocupan más de un tercio del alto y la sección parecería empezar vacía. */
  .seccion-luz {
    padding-top: 210px;
    background:
      radial-gradient(ellipse 90% 26% at 50% 320px, rgba(203, 174, 134, 0.20), transparent 68%),
      linear-gradient(180deg,
        #101010 0,
        #1A1712 34px,
        #3D352A 70px,
        #8A7C63 104px,
        #D8CDB2 136px,
        #F6F1E0 166px,
        var(--fondo) 210px);
  }
  .vision__titulo { font-size: 38px; letter-spacing: 0.06em; }
  .vision__entrada { font-size: 17px; }
  .vision__cierre { font-size: 19px; }
  .figura-suelta { max-width: 100%; margin-top: 40px; }

  .cabecera { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cabecera__titulo { font-size: 28px; }
  .servicios__linea { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* Dos columnas también en el móvil: seis cuadrados a todo el ancho harían
     una tira interminable y la sección de abajo dejaría de existir. */
  .galeria { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 40px; }

  .generaciones__titulo { font-size: 26px; letter-spacing: 0.04em; }
  .marca-ojo { width: 52px; margin: 24px auto 20px; }
  .banda-gen { gap: 24px; margin-bottom: 36px; }
  .banda-gen__figura img { max-height: 420px; }
  .fichas { grid-template-columns: 1fr; }
  /* Con la foto al lado, en 375 px el nombre se quedaba con 135 px y se partía
     en tres renglones. Se encoge la foto, se recorta el margen de la ficha y
     se baja un punto el nombre: con eso entra en dos. */
  .ficha { padding: 26px; }
  .ficha__foto { width: 66px; height: 66px; margin: 0 0 12px 14px; }
  .ficha__nombre { font-size: 21px; }
  .razones { grid-template-columns: 1fr; }
  .razon__numero { top: 26px; right: 26px; font-size: 28px; }
  .resena__texto { font-size: 18px; }
  .contacto__direccion { font-size: 24px; }
  .horario__fila { flex-direction: column; gap: 2px; }

  .pie__interior { flex-direction: column; gap: 16px; text-align: center; }
}