/* ═══════════════════════════════════════════════════════════════════
   Bogotá Barber Shop® · Temuco
   Demo de presentación — primera de la tanda T5 (Temuco urbano) y
   plantilla base del rubro barbería.

   IDENTIDAD · «esmalte y latón»
   ──────────────────────────────────────────────────────────────────
   Una barbería con nombre de capital colombiana en el sur de Chile no
   es rústica: es urbana y de oficio. El sistema sale del rótulo
   esmaltado de barbería clásica — placa de esmalte crema, letra en
   burdeos profundo y herrajes de latón. Nada del poste rojo-azul-blanco
   como paleta: ese cliché queda reducido a lo único que le corresponde,
   la FORMA del faro de la portada, que gira en los colores de la casa.

   Se aparta a propósito de sus demos hermanas:
   · Prado Verde es verde-hueso de prado sobre claro con brasa naranja.
   · Los Reales es azul de lago profundo con dorado de muelle.
   · Adkantú es madera oscura con cobre de olla.
   · Car Service es grafito con cobre bruñido.
   Tres de las cuatro son oscuras con un metal cálido. Ésta es la única
   que vive sobre papel claro con estructura burdeos, y el burdeos no
   aparece en ninguna. El latón se distingue del cobre y del dorado
   porque tira a verde-oliva, no a naranja.

   TIPOGRAFÍA · por qué este par
   ──────────────────────────────────────────────────────────────────
   · Bodoni Moda (display): la didona es literalmente la letra del
     rótulo de barbería y de botica del siglo XIX — asta gruesa, remate
     de pelo, sin ninguna concesión. Es la que da el aire de negocio con
     historia que Bogotá se ganó con la marca registrada. Se usa sólo
     grande (28 px para arriba): abajo de eso los remates de pelo se
     rompen en pantalla, y para eso está el eje óptico variable.
   · Figtree (texto): grotesca de aperturas abiertas y altura de x alta.
     No compite con la didona —no tiene contraste de trazo— y aguanta
     párrafos largos en un celular.
   · IBM Plex Mono (dato): los precios de un tablero de barbería tienen
     que alinearse en columna. Monoespaciada de trazo humanista, no de
     terminal.
   Ninguna de las tres se repite en las demos hermanas ni en los
   proyectos anteriores de Yordy.

   CONTRASTES MEDIDOS (WCAG 2.1, calculados, no estimados)
   ──────────────────────────────────────────────────────────────────
   sobre --crema #F2ECE1     tinta 14,58:1 · tinta-suave 6,45:1
                             burdeos 9,60:1 · botella 9,43:1
                             latón #B08A4A 2,71:1  ← FALLA, nunca en texto
                             latón-texto #7D5F27 5,05:1
   sobre --papel #FAF6EE     tinta-suave 7,04:1 · burdeos 10,47:1
   sobre --crema-hondo       tinta-suave 5,68:1 · burdeos 8,46:1
                             latón-texto 4,45:1 ← sólo texto grande
   sobre --burdeos-hondo     crema 13,94:1 · latón-claro 8,23:1
                             rosa-humo 9,06:1
   sobre --burdeos           crema 9,60:1 · latón-claro 5,67:1
   El latón sólido es exactamente el caso que avisa el manual: se ve
   precioso y no pasa AA. Queda para filetes, marcos, el faro y áreas
   grandes; todo texto en metal usa --laton-texto o --laton-claro.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* superficie — la placa de esmalte */
  --crema:       #F2ECE1;   /* el fondo del sitio */
  --crema-hondo: #E7DECE;   /* secciones alternas */
  --papel:       #FAF6EE;   /* tarjetas y el tablero */

  /* tinta */
  --tinta:       #23191A;   /* negro cálido, tirado a marrón: el texto */
  --tinta-suave: #5E5150;   /* texto secundario */

  /* estructura */
  --burdeos:       #6B1F2E;   /* la letra del rótulo */
  --burdeos-hondo: #3E0E19;   /* el fondo de las secciones oscuras */
  --rosa-humo:     #D9B9BC;   /* texto secundario sobre burdeos */

  /* metal */
  --laton:       #B08A4A;   /* SÓLO gráfico: filetes, marcos, el faro */
  --laton-texto: #7D5F27;   /* el mismo latón, apto para texto en claro */
  --laton-claro: #D7B36A;   /* el mismo latón, apto para texto en oscuro */

  /* el verde de botica: marca lo que es de ejemplo y nada más.
     Se eligió fuera del sistema burdeos-latón justamente para que un
     dato de relleno no se confunda nunca con una decisión de diseño. */
  --botella:     #1F4238;

  /* tipografía */
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --cuerpo:  "Figtree", "Segoe UI", system-ui, sans-serif;
  --dato:    "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  /* medidas */
  --ancho:  1140px;
  --canal:  clamp(1.25rem, 5vw, 3rem);
  --radio:  3px;             /* casi recto: esto es una placa, no una app */
  --borde:  1px solid color-mix(in srgb, var(--tinta) 15%, transparent);

  /* movimiento — manda la salida: lo que entra frena, no arranca */
  --t-rapido: 160ms;
  --t-medio:  340ms;
  --t-lento:  760ms;
  --salida:   cubic-bezier(.16, 1, .3, 1);
}

/* ── base ────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* Declarado a mano: sin esto, cualquier regla con display le gana al
   atributo hidden. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:clamp(1rem, .96rem + .22vw, 1.08rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* El <meta> lleva viewport-fit=cover: esto devuelve el margen que se
     come la muesca del iPhone. */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:1.05;
  margin:0;
  text-wrap:balance;
  /* La didona pide un pelo de apertura entre letras cuando va grande;
     por defecto Bodoni viene muy apretada para titulares. */
  letter-spacing:.005em;
}

p{ margin:0 0 1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }
img,svg{ max-width:100%; display:block; }

sup{ font-size:.5em; vertical-align:super; line-height:0; }

code{
  font-family:var(--dato); font-size:.9em;
  color:var(--laton-texto);
}

::selection{ background:var(--burdeos); color:var(--crema); }

:focus-visible{
  outline:2px solid var(--burdeos);
  outline-offset:3px;
  border-radius:2px;
}

.caja{
  width:min(100% - (var(--canal) * 2), var(--ancho));
  margin-inline:auto;
}
.caja--angosta{ width:min(100% - (var(--canal) * 2), 780px); }

.solo-lectores{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* salto al contenido — sale del escondite sólo con teclado */
.saltar{
  position:absolute; left:50%; top:0;
  transform:translate(-50%,-140%);
  z-index:200;
  background:var(--burdeos); color:var(--crema);
  padding:.75rem 1.25rem; text-decoration:none;
  font-size:.9rem; font-weight:600;
  border-radius:0 0 var(--radio) var(--radio);
  transition:transform var(--t-rapido) var(--salida);
}
.saltar:focus-visible{ transform:translate(-50%,0); }

/* ── el ojo (antetítulo) ─────────────────────────────────────────── */
.ojo{
  font-family:var(--dato);
  font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--laton-texto);
  margin:0 0 1rem;
}
.ojo--centro{ text-align:center; }
.ojo--claro{ color:var(--laton-claro); }

/* ── dato de ejemplo ──────────────────────────────────────────────
   Todo lo que lleva .ej es relleno. Se ve a simple vista para poder
   decir en la reunión "esto se completa con sus datos reales", y se
   borra junto con la clase cuando el dato llega. Va en verde de
   botica: fuera del sistema burdeos-latón a propósito.            */
.ej{
  position:relative;
  outline:1px dashed color-mix(in srgb, var(--botella) 50%, transparent);
  outline-offset:8px;
  border-radius:2px;
}
.ej::after{
  content:"ejemplo";
  position:absolute; top:-8px; right:-8px;
  transform:translateY(-100%);
  font-family:var(--dato); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--botella);
  background:var(--crema);
  padding:0 .4rem;
  pointer-events:none;
}

/* ── botones ─────────────────────────────────────────────────────
   Todos con min-height 44px: es el mínimo de un dedo, y en un sitio
   cuyo único objetivo es que aprieten "reservar" no se negocia.  */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:.7rem 1.5rem;
  font-family:var(--cuerpo); font-size:.94rem; font-weight:600;
  letter-spacing:.01em;
  text-decoration:none; text-align:center;
  border:1px solid transparent; border-radius:var(--radio);
  cursor:pointer;
  transition:background var(--t-rapido) ease,
             color var(--t-rapido) ease,
             border-color var(--t-rapido) ease,
             transform var(--t-rapido) var(--salida);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--burdeos{ background:var(--burdeos); color:var(--crema); }
.btn--burdeos:hover{ background:var(--burdeos-hondo); }

.btn--laton{
  background:var(--laton); color:var(--tinta);   /* 5,37:1 — medido */
  border-color:color-mix(in srgb, var(--tinta) 25%, var(--laton));
}
.btn--laton:hover{ background:var(--laton-claro); }

.btn--linea{
  background:transparent; color:var(--burdeos);
  border-color:color-mix(in srgb, var(--burdeos) 45%, transparent);
}
.btn--linea:hover{ background:var(--burdeos); color:var(--crema); }

.btn--linea-claro{
  background:transparent; color:var(--crema);
  border-color:color-mix(in srgb, var(--crema) 40%, transparent);
}
.btn--linea-claro:hover{ background:var(--crema); color:var(--burdeos-hondo); }

.btn--mini{
  min-height:44px;
  padding:.5rem 1.1rem;
  font-size:.82rem;
  background:transparent; color:var(--burdeos);
  border-color:color-mix(in srgb, var(--burdeos) 35%, transparent);
  white-space:nowrap;
}
.btn--mini:hover{ background:var(--burdeos); color:var(--papel); }

.enlace{
  color:var(--burdeos); font-weight:600;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.enlace--claro{ color:var(--laton-claro); }

/* Un enlace suelto —un teléfono en su ficha, un @— no es un enlace
   "dentro de una frase": es un blanco que alguien va a apretar con el
   pulgar. Va con sus 44 px. Los que sí están metidos en medio de un
   párrafo no llevan esto, porque estirarlos abre huecos en el texto:
   para ésos el pie usa fichas sueltas (.pie__vias) en vez de prosa. */
.enlace--suelto{
  display:inline-flex; align-items:center;
  min-height:44px;
}

/* ── banda de propuesta ──────────────────────────────────────────── */
.propuesta{ background:var(--tinta); color:var(--crema); }
.propuesta__cinta{
  width:min(100% - (var(--canal) * 2), var(--ancho));
  margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.1rem;
  padding:.75rem 0;
  font-size:.86rem; line-height:1.5;
}
.propuesta__marca{
  font-family:var(--dato); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta); background:var(--laton);
  padding:.3rem .6rem; border-radius:2px;
  white-space:nowrap;
}
.propuesta__txt{
  margin:0; flex:1 1 24rem;
  color:color-mix(in srgb, var(--crema) 82%, transparent);
}
.propuesta__txt strong{ color:var(--crema); }
.propuesta__link{
  font-weight:600; color:var(--laton-claro);
  text-underline-offset:4px; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
}

/* ── cabecera ────────────────────────────────────────────────────── */
/* ── cabecera platinada ──────────────────────────────────────────
   La barra es una placa de metal, no un vidrio esmerilado. El truco del
   metal son tres cosas apiladas, y ninguna es una imagen:

   1. Un degradado vertical que NO es lineal de claro a oscuro: va claro
      arriba, se oscurece al 72 % y vuelve a aclarar abajo. Ese rebote es
      lo que el ojo lee como "superficie curva que refleja".
   2. Una veta de metal cepillado: rayas verticales de 1 px a opacidad
      ridícula. Por separado no se ven; juntas le quitan el plano de color.
   3. Un filo de luz arriba y una sombra interna abajo, que le dan canto.

   Encima pasa un brillo en diagonal cada 7 s, como cuando la luz corre
   por una pieza pulida. Es lento y sutil a propósito: si se nota, molesta.

   Va OPACA y no traslúcida: el metal no deja pasar la luz, y de paso el
   texto del menú nunca queda sobre el contenido que se desliza debajo. */
.cabecera{
  position:sticky; top:0; z-index:100;
  isolation:isolate;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg,
      rgb(255 255 255 / .55) 0 1px,
      rgb(35 25 26 / .022) 1px 3px),
    linear-gradient(180deg,
      #FDFCF9 0%,
      #F4F1EA 38%,
      #E1DCD1 72%,
      #EFEBE1 100%);
  border-bottom:1px solid color-mix(in srgb, var(--laton) 45%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    inset 0 -7px 14px -12px rgb(35 25 26 / .55),
    0 12px 26px -22px rgb(35 25 26 / .7);
}
/* filete de latón al pie de la placa */
.cabecera::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  z-index:3; pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--laton) 70%, transparent) 14%,
    #E9D09A 50%,
    color-mix(in srgb, var(--laton) 70%, transparent) 86%,
    transparent 100%);
}
/* el brillo que recorre la pieza */
.cabecera::after{
  content:""; position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background:linear-gradient(104deg,
    transparent 38%,
    rgb(255 255 255 / .62) 48%,
    rgb(255 255 255 / 0) 60%);
  transform:translateX(-70%);
  animation:brillo-placa 7s ease-in-out infinite;
}
@keyframes brillo-placa{
  0%, 68%{ transform:translateX(-70%); }
  100%   { transform:translateX(170%); }
}

.cabecera__caja{
  position:relative; z-index:2;      /* por encima del brillo */
  width:min(100% - (var(--canal) * 2), var(--ancho));
  margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
  min-height:64px;
}
.marca{
  text-decoration:none;
  display:flex; align-items:center; gap:.6rem; line-height:1;
  min-height:44px;              /* es un enlace: le toca el dedo entero */
  flex:0 0 auto;
}
.marca__texto{ display:grid; gap:.25rem; }

/* ── el logo del negocio ─────────────────────────────────────────
   Llega como JPEG con fondo blanco, sin transparencia. En vez de pedir un
   PNG recortado —que el cliente no tiene—, se apaga el blanco con
   mix-blend-mode:multiply: sobre un fondo claro, multiplicar por blanco
   deja el fondo intacto y sólo sobrevive el trazo negro. Es exacto y no
   cuesta ni un byte.
   Sobre fondo oscuro multiply no sirve (pintaría todo negro): ahí se
   invierte primero el logo y se usa screen, que es la operación espejo. */
.marca__logo{
  width:38px; height:38px;
  flex:0 0 auto;
  mix-blend-mode:multiply;
}
.marca__nombre{
  font-family:var(--display); font-weight:700;
  font-size:1.3rem; color:var(--burdeos);
}
.marca__bajo{
  font-family:var(--dato); font-size:.58rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin-top:.25rem;
}

/* El menú NO se esconde tras un botón: en móvil se desliza. Un menú
   escondido es un clic más entre el visitante y el botón de reservar. */
.menu{
  flex:1 1 auto; min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  /* el degradado del borde derecho avisa que hay más menú al lado */
  mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.menu::-webkit-scrollbar{ display:none; }
.menu__lista{
  display:flex; align-items:center; gap:.25rem;
  list-style:none; margin:0; padding:0 1.5rem 0 0;
  white-space:nowrap;
}
.menu__lista a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 .7rem;
  font-size:.88rem; font-weight:500;
  color:var(--tinta-suave); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--t-rapido) ease, border-color var(--t-rapido) ease;
}
.menu__lista a:hover{ color:var(--burdeos); border-bottom-color:var(--laton); }
/* La marca de sección activa la pone main.js. Es decoración: si el
   script no corre, el menú funciona igual, sólo sin subrayado. */
.menu__lista a.activo{ color:var(--burdeos); border-bottom-color:var(--burdeos); }

.cabecera__cta{ flex:0 0 auto; padding:.55rem 1.1rem; font-size:.88rem; }

@media (max-width:860px){
  .cabecera__cta{ display:none; }   /* el CTA vive en la portada y en cada tarifa */
}

/* ══════════════ PORTADA ══════════════
   El fondo es la placa de esmalte: un halo cálido detrás del faro y un
   filete de latón abajo. Sin fotos: no las hay todavía, y una foto de
   banco de imágenes se nota. */
.portada{
  position:relative;
  background:
    radial-gradient(60% 70% at 78% 42%,
      color-mix(in srgb, var(--laton) 20%, transparent), transparent 70%),
    linear-gradient(180deg, var(--papel), var(--crema) 70%);
  border-bottom:1px solid color-mix(in srgb, var(--laton) 55%, transparent);
  overflow:hidden;
}
/* filete doble de rótulo, arriba y abajo del bloque */
.portada::after{
  content:""; position:absolute; left:0; right:0; bottom:4px;
  height:1px; background:color-mix(in srgb, var(--laton) 45%, transparent);
}
.portada__caja{
  width:min(100% - (var(--canal) * 2), var(--ancho));
  margin-inline:auto;
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:1fr;
  align-items:center;
  padding:clamp(3rem, 8vw, 6rem) 0 clamp(3.5rem, 8vw, 6rem);
}
@media (min-width:880px){
  .portada__caja{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}

.portada h1{
  font-size:clamp(3rem, 1.6rem + 6.4vw, 6.5rem);
  line-height:.92;
  letter-spacing:-.01em;
  margin:0 0 1.25rem;
  display:grid;
}
.portada__linea-1{ color:var(--burdeos); }
.portada__linea-2{
  font-size:.42em;
  font-weight:400;
  font-style:italic;
  color:var(--tinta);
  letter-spacing:.02em;
  margin-top:.35em;
}
.portada__bajada{
  font-size:clamp(1.05rem, 1rem + .4vw, 1.24rem);
  color:var(--tinta-suave);
  max-width:46ch;
  margin:0 0 2rem;
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; }

.credenciales{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.25rem;
  margin:2.5rem 0 0; padding-top:1.75rem;
  border-top:1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
}
.credenciales__par{ display:grid; gap:.15rem; }
.credenciales dt{
  font-family:var(--dato); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--laton-texto);
}
.credenciales dd{
  margin:0; font-size:.95rem; color:var(--tinta-suave);
}
.credenciales dd b{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  color:var(--tinta);
}

/* ── EL FARO DE BARBERO ──────────────────────────────────────────
   Escalón 1 de la escalera de profundidad: CSS puro, 0 KB. No hay
   ningún .glb en imagenes/, y aunque lo hubiera este cilindro ya
   cuenta la historia — un modelo de 800 KB no la contaría mejor.

   Cómo funciona: las franjas son un repeating-linear-gradient
   diagonal, y lo que "gira" es el background-position bajando por
   dentro de un tubo con overflow oculto. El volumen no es un truco
   de perspectiva: son sombras internas —luz a la izquierda, sombra a
   la derecha— más un brillo de vidrio encima.

   Las franjas van en burdeos, crema y latón, NO en rojo-azul-blanco:
   del poste clásico se toma la forma, que es lo que se reconoce, y no
   el cliché de color, que es lo que abarata. */
/* Las dos capas del faro van APILADAS en la misma celda: el 3D encima y el
   dibujado en CSS debajo, del mismo tamaño. Así el relevo entre uno y otro
   no mueve ni un pixel del resto de la portada. */
.portada__faro{
  display:grid;
  place-items:center;
  padding:1rem 0;
}
.portada__faro > *{ grid-area:1 / 1; }

/* ── el faro 3D ──────────────────────────────────────────────────
   Nace invisible y sin capturar el toque: mientras baja el modelo se ve el
   faro de CSS que está detrás. Cuando model-viewer avisa que cargó, main.js
   pone .listo y se hace el relevo con un fundido.

   :not(:defined) es el seguro: si el módulo nunca llega, el elemento sigue
   sin definir, se saca del layout, y detrás queda el faro de CSS girando
   como si nada hubiera pasado. */
.faro3d{
  /* Más grande que el faro de CSS a propósito: el lienzo del 3D tiene que
     dar cabida al objeto MÁS su sombra al pie, y con el alto anterior la
     base quedaba cortada contra el borde del canvas. */
  width:clamp(260px, 40vw, 460px);
  height:clamp(360px, 56vw, 620px);
  opacity:0;
  pointer-events:none;
  transition:opacity .8s ease;
  --poster-color:transparent;   /* el poster lo hace el faro CSS de atrás */
  background:transparent;
}
model-viewer.faro3d:not(:defined){ display:none; }
.faro3d.listo{ opacity:1; pointer-events:auto; }
.faro3d.listo ~ .faro{ opacity:0; pointer-events:none; }
.faro{
  --faro-ancho: clamp(58px, 13vw, 92px);
  --faro-alto:  clamp(240px, 42vw, 400px);
  position:relative;
  width:var(--faro-ancho);
  height:var(--faro-alto);
  display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(0 22px 30px rgb(35 25 26 / .28));
  transition:opacity .8s ease;
}

/* el vástago de latón que lo sostiene, detrás de todo */
.faro__brazo{
  position:absolute; left:50%; top:-6%; bottom:-3%;
  width:calc(var(--faro-ancho) * .13);
  transform:translateX(-50%);
  border-radius:99px;
  background:linear-gradient(90deg, #8A6A32, var(--laton) 38%, #E4C888 52%, #9C7838 78%, #6F5427);
  z-index:0;
}
.faro__brazo::before{      /* la bola del remate superior */
  content:""; position:absolute; left:50%; top:calc(var(--faro-ancho) * -.18);
  width:calc(var(--faro-ancho) * .3); height:calc(var(--faro-ancho) * .3);
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #F0DCAB, var(--laton) 55%, #6F5427);
}

/* las tapas metálicas — arriba y abajo del vidrio */
.faro__remate{
  position:relative; z-index:2;
  width:calc(var(--faro-ancho) * 1.16);
  height:calc(var(--faro-ancho) * .3);
  border-radius:calc(var(--faro-ancho) * .09);
  background:
    linear-gradient(90deg, #6F5427, var(--laton) 22%, #EFDAA8 46%, #A9843E 68%, #5E4620);
  box-shadow:
    0 2px 5px rgb(35 25 26 / .35),
    inset 0 1px 0 rgb(255 255 255 / .45),
    inset 0 -2px 3px rgb(0 0 0 / .3);
}
.faro__remate--arriba{ margin-bottom:-2px; }
.faro__remate--abajo{ margin-top:-2px; }

/* el vidrio: el único que recorta. Las franjas viven adentro. */
.faro__vidrio{
  position:relative; z-index:1;
  flex:1 1 auto;
  width:100%;
  overflow:hidden;
  border-radius:calc(var(--faro-ancho) * .42) / calc(var(--faro-ancho) * .16);
  box-shadow:
    inset 13px 0 20px -10px rgb(255 255 255 / .5),
    inset -17px 0 24px -8px rgb(35 25 26 / .5),
    inset 0 7px 10px -6px rgb(35 25 26 / .35),
    inset 0 -7px 10px -6px rgb(35 25 26 / .35);
}
.faro__tubo{
  width:100%; height:100%;
  background:repeating-linear-gradient(
    -57deg,
    var(--burdeos)  0    17px,
    #F6F1E6         17px 32px,
    var(--laton)    32px 38px,
    #F6F1E6         38px 53px
  );
  background-size:100% 200%;
  /* Se desplaza exactamente una baldosa (200% del size): la franja n
     cae donde estaba la n+1, que es idéntica, así que el ciclo no
     tiene costura. Y sube, que es como gira un faro de verdad. */
  animation:faro-gira 3s linear infinite;
}
/* el reflejo del vidrio, encima de las franjas */
.faro__brillo{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgb(255 255 255 / .00) 4%,
      rgb(255 255 255 / .42) 17%,
      rgb(255 255 255 / .06) 32%,
      rgb(0 0 0 / .00) 55%,
      rgb(0 0 0 / .22) 88%,
      rgb(0 0 0 / .36) 100%);
}
/* la gota de latón del pie */
.faro__gota{
  position:relative; z-index:2;
  width:calc(var(--faro-ancho) * .34);
  height:calc(var(--faro-ancho) * .42);
  margin-top:-1px;
  border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
  background:radial-gradient(circle at 34% 26%, #F0DCAB, var(--laton) 52%, #684E24);
  box-shadow:0 3px 6px rgb(35 25 26 / .35);
}

@keyframes faro-gira{
  from{ background-position:0 0; }
  to  { background-position:0 200%; }
}

/* ══════════════ LA CINTA DE FOTO ══════════════
   A sangre y con alto acotado: la foto es cuadrada y sin recorte ocuparía
   media pantalla. El filete de latón arriba y abajo la ata al sistema y
   evita que parezca una foto pegada encima del diseño. */
.cinta{
  margin:0;
  position:relative;
  background:var(--tinta);
  border-top:1px solid color-mix(in srgb, var(--laton) 55%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--laton) 55%, transparent);
}
.cinta__foto{
  width:100%;
  height:clamp(240px, 46vw, 520px);
  object-fit:cover;
  object-position:center 58%;
  display:block;
}
.cinta__pie{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.5rem var(--canal) .9rem;
  font-family:var(--dato); font-size:.7rem;
  letter-spacing:.1em;
  color:var(--crema);
  /* El degradado no es adorno: sin él el texto cae sobre una zona clara de
     la foto y se pierde. Medido sobre el pixel más claro de la franja. */
  background:linear-gradient(180deg, transparent, rgb(20 14 15 / .82));
}

/* ══════════════ titulares de sección ══════════════ */
.titular{
  text-align:center;
  max-width:60ch;
  margin:0 auto clamp(2.5rem, 5vw, 3.75rem);
}
.titular h2{
  font-size:clamp(2rem, 1.3rem + 3vw, 3.2rem);
  color:var(--burdeos);
  margin:0 0 1rem;
}
.titular__bajada{
  color:var(--tinta-suave);
  font-size:1.02rem;
  margin:0;
}
.titular--claro h2{ color:var(--crema); }
.titular--claro .titular__bajada{ color:var(--rosa-humo); }

.letra-chica{
  max-width:64ch;
  margin:clamp(1.75rem, 4vw, 2.5rem) 0 0;
  font-size:.86rem; line-height:1.6;
  color:var(--tinta-suave);
}
.letra-chica--centro{ margin-inline:auto; text-align:center; }

section{ padding:clamp(3.5rem, 8vw, 6rem) 0; }
.portada{ padding:0; }

/* ══════════════ LA CARTA DE SERVICIOS ══════════════
   El tablero es la pieza firma. El marco exterior son dos filetes de
   latón con una separación —el doble filete del rótulo esmaltado— y el
   contenido es una <dl> de verdad, no una tabla dibujada. */
.carta{ background:var(--crema); }

.tablero-marco{
  margin-top:2rem;               /* aire para la etiqueta "ejemplo" */
  padding:clamp(.4rem, 1.2vw, .7rem);
  background:linear-gradient(150deg, #C79E58, #8A6A32 45%, #D9B879 72%, #7E6029);
  border-radius:calc(var(--radio) + 3px);
  box-shadow:0 18px 42px -22px rgb(35 25 26 / .55);
}
.tablero{
  background:
    radial-gradient(120% 90% at 50% 0%,
      var(--papel), var(--crema-hondo) 130%);
  border:1px solid color-mix(in srgb, var(--tinta) 22%, transparent);
  border-radius:var(--radio);
  padding:clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 3.5vw, 3rem);
  color:var(--tinta);
}

.tablero__cabeza{ text-align:center; margin-bottom:1.5rem; }
.emblema{
  width:clamp(92px, 19vw, 130px);
  height:auto;
  margin:0 auto .9rem;
  mix-blend-mode:multiply;       /* mata el blanco del JPEG sobre el papel */
}
.tablero__rotulo{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.35rem, 1rem + 1.8vw, 2.1rem);
  color:var(--burdeos);
  margin:0 0 .35rem;
}
.tablero__sub{
  font-family:var(--dato); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin:0;
}

.regla{
  width:100%; height:12px;
  color:color-mix(in srgb, var(--laton-texto) 70%, transparent);
  margin:0;
}

.tarifas{ margin:.75rem 0; padding:0; }

.tarifa{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.15rem 1.5rem;
  align-items:baseline;
  padding:1.15rem 0;
  border-bottom:1px dotted color-mix(in srgb, var(--tinta) 26%, transparent);
}
.tarifa:last-child{ border-bottom:0; }

.tarifa__nombre{
  grid-column:1; grid-row:1;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.12rem, 1rem + .55vw, 1.4rem);
  color:var(--tinta);
  display:flex; align-items:baseline; gap:.6rem;
}
.tarifa__n{
  font-family:var(--dato); font-size:.68rem; font-weight:500;
  letter-spacing:.1em;
  color:var(--laton-texto);
  flex:0 0 auto;
}
.tarifa__desc{
  grid-column:1; grid-row:2;
  margin:.3rem 0 0;
  font-size:.92rem; line-height:1.55;
  color:var(--tinta-suave);
  max-width:52ch;
}
.tarifa__tiempo{
  grid-column:1; grid-row:3;
  margin:.55rem 0 0;
  font-family:var(--dato); font-size:.72rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.tarifa__precio{
  grid-column:2; grid-row:1;
  margin:0; justify-self:end;
  font-family:var(--dato); font-weight:600;
  font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem);
  color:var(--burdeos);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tarifa__accion{
  grid-column:2; grid-row:3;
  margin:.4rem 0 0; justify-self:end;
}

@media (max-width:640px){
  /* A 375 px la descripción y el botón no caben junto al precio: se
     bajan a línea completa y el botón queda con sus 44 px de holgura. */
  .tarifa__desc,
  .tarifa__tiempo{ grid-column:1 / -1; }
  .tarifa__accion{
    grid-column:1 / -1; grid-row:auto;
    justify-self:start; margin-top:.85rem;
  }
}

.tablero__pie{
  margin:1.25rem 0 0;
  text-align:center;
  font-size:.82rem;
  color:var(--tinta-suave);
}

/* ══════════════ LOS DOS LOCALES ══════════════
   Espejadas de verdad: en escritorio la segunda invierte la alineación,
   como las dos hojas de una placa. En móvil las dos van a la izquierda,
   porque un texto centrado a la derecha en un celular no se lee. */
.locales{ background:var(--crema-hondo); }

.rejilla-locales{
  display:grid; gap:clamp(1.25rem, 3vw, 2rem);
  grid-template-columns:1fr;
}
@media (min-width:800px){
  .rejilla-locales{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .local--b{ text-align:right; }
  .local--b .local__datos{ justify-items:end; }
  .local--b .local__fila{ text-align:right; }
}

.local{
  position:relative;
  background:var(--papel);
  border:1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  border-top:3px solid var(--laton);
  border-radius:var(--radio);
  padding:clamp(1.5rem, 4vw, 2.25rem);
  display:flex; flex-direction:column;
  overflow:hidden;              /* la foto se recorta contra el redondeo */
}
/* La foto sale del padding de la tarjeta con márgenes negativos: queda a
   sangre arriba, pegada al filete de latón, como la foto de una ficha. */
.local__foto{
  /* Sin esto la foto NO llega al borde: la regla base img{max-width:100%}
     la recorta al ancho del contenido y se come los dos padding que el
     calc de abajo le suma. Costó un rato encontrarlo porque el width
     estaba bien puesto y aun así medía 480 en vez de 552. */
  max-width:none;
  width:calc(100% + clamp(3rem, 8vw, 4.5rem));
  margin:calc(clamp(1.5rem, 4vw, 2.25rem) * -1)
         calc(clamp(1.5rem, 4vw, 2.25rem) * -1)
         clamp(1.25rem, 3vw, 1.75rem);
  height:clamp(180px, 34vw, 260px);
  object-fit:cover;
  object-position:center 42%;
}
.local__etiqueta{
  font-family:var(--dato); font-size:.64rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--laton-texto);
  margin:0 0 .5rem;
}
.local__nombre{
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  color:var(--burdeos);
  margin:0 0 1.5rem;
}
/* El hueco entre filas tiene que dar cabida a la etiqueta "ejemplo", que se
   dibuja FUERA del dd y hacia arriba. Con el 1,15rem de antes la etiqueta
   caía justo encima del rótulo DIRECCIÓN y lo tapaba a medias. */
.local__datos{ display:grid; gap:1.9rem; margin:0 0 2rem; }
.local__fila dt{
  font-family:var(--dato); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin-bottom:.55rem;
  position:relative; z-index:1;   /* por si la etiqueta roza, gana el rótulo */
}
.local__fila dd{
  margin:0;
  font-size:.98rem; line-height:1.55;
  color:var(--tinta);
}
.local__btn{ margin-top:auto; align-self:start; }
@media (min-width:800px){
  .local--b .local__btn{ align-self:end; }
}
/* La etiqueta "ejemplo" de estas fichas se recorta contra el papel de
   la tarjeta, no contra la crema del fondo. */
.local .ej::after{ background:var(--papel); }

/* En la tarjeta espejada el texto va alineado a la derecha, así que el
   rótulo (DIRECCIÓN, HORARIO) queda justo debajo de donde cae la etiqueta
   "ejemplo" y se pisan: se leía "DIRE‸JEMPLO". En esa tarjeta la etiqueta
   se manda al lado contrario, que es el que está libre. */
@media (min-width:800px){
  .local--b .ej::after{ right:auto; left:-8px; }
}

/* ══════════════ EL EQUIPO ══════════════ */
.equipo{ background:var(--crema); }

.rejilla-equipo{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.barbero{ display:grid; gap:.2rem; }

/* El hueco espera una foto real. Se dibuja como un espejo de barbería
   con su marco de latón: así el cliente ve el formato exacto que tiene
   que mandar, y en la reunión el sitio no se ve "en construcción". */
.hueco-foto{
  aspect-ratio:3 / 4;
  display:grid; place-items:center;
  margin-bottom:1rem;
  border-radius:calc(var(--radio) + 60px) calc(var(--radio) + 60px) var(--radio) var(--radio);
  border:2px solid color-mix(in srgb, var(--laton) 65%, transparent);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      color-mix(in srgb, var(--laton) 11%, transparent) 9px 10px),
    linear-gradient(170deg, var(--papel), var(--crema-hondo));
}
.hueco-foto__txt{
  font-family:var(--dato); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--laton-texto);
  text-align:center; line-height:1.8;
}
.barbero__nombre{
  font-size:1.22rem;
  color:var(--tinta);
  margin:.4rem 0 .2rem;
  justify-self:start;
}
.barbero__rol{
  margin:0;
  font-size:.86rem;
  color:var(--tinta-suave);
}

/* ══════════════ EL TRABAJO ══════════════
   Rejilla de fotos reales. Se arma con auto-fill sobre filas de 10px y
   cada pieza declara cuántas ocupa: da el desorden ordenado de un mural
   sin una sola medida escrita a mano y sin librería de masonry. */
.trabajo{ background:var(--crema); }

.galeria{
  list-style:none; margin:0; padding:0;
  display:grid;
  gap:clamp(.6rem, 1.6vw, 1rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.galeria__pieza{
  position:relative;
  margin:0;
  border-radius:var(--radio);
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
  background:var(--crema-hondo);
}
.galeria__pieza img{
  width:100%; height:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  display:block;
  transition:transform var(--t-lento) var(--salida);
}
.galeria__pieza:hover img{ transform:scale(1.04); }

@media (min-width:760px){
  .galeria{
    grid-template-columns:repeat(4, minmax(0,1fr));
    /* Seis piezas, una de 2×2 y otra de 2×1, no completan filas de cuatro
       y quedaba un hueco al lado del retrato. Con dense las piezas chicas
       que vienen después retroceden a tapar el agujero. */
    grid-auto-flow:dense;
  }
  .galeria__pieza--alta{ grid-column:span 2; grid-row:span 2; }
  .galeria__pieza--alta img{ aspect-ratio:auto; }
  .galeria__pieza--ancha{ grid-column:span 2; }
  .galeria__pieza--ancha img{ aspect-ratio:16 / 10; }
}

.galeria__pie{
  position:absolute; left:0; right:0; bottom:0;
  padding:2rem .8rem .7rem;
  font-family:var(--dato); font-size:.66rem;
  letter-spacing:.08em;
  color:var(--crema);
  background:linear-gradient(180deg, transparent, rgb(20 14 15 / .8));
  pointer-events:none;
}

/* ══════════════ LA CASA ══════════════ */
.casa{ background:var(--crema-hondo); }

.casa__foto{
  margin:0 0 clamp(2rem, 4vw, 2.75rem);
}
.casa__foto img{
  width:100%;
  height:clamp(220px, 40vw, 380px);
  object-fit:cover;
  object-position:center 40%;
  border-radius:var(--radio);
  border:1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
}
.casa__foto figcaption{
  margin-top:.6rem;
  font-family:var(--dato); font-size:.68rem;
  letter-spacing:.08em;
  color:var(--tinta-suave);
  text-align:center;
}
.casa__texto{
  font-size:clamp(1.03rem, 1rem + .3vw, 1.14rem);
  color:var(--tinta);
}
.casa__texto p{ margin-bottom:1.35em; }
.casa__texto strong{ color:var(--burdeos); }

.cifras{
  display:grid; gap:1px;
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin-top:clamp(2.5rem, 5vw, 3.5rem);
  background:color-mix(in srgb, var(--tinta) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  border-radius:var(--radio);
  overflow:hidden;
}
@media (min-width:720px){
  .cifras{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
.cifra{
  background:var(--papel);
  padding:1.5rem 1rem;
  display:grid; gap:.35rem; place-items:center; text-align:center;
}
.cifra__n{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  line-height:1;
  color:var(--burdeos);
}
.cifra__u{ font-size:.55em; color:var(--laton-texto); }
.cifra__txt{
  font-size:.78rem; line-height:1.4;
  color:var(--tinta-suave);
  max-width:16ch;
}

/* ══════════════ RESERVAR ══════════════
   Acá el sitio se da vuelta a burdeos hondo. Es el único salto de
   contraste de la página y está puesto donde tiene que estar: la
   sección que pide la acción se separa de todo lo que se venía
   leyendo. */
.reservar{
  background:var(--burdeos-hondo);
  color:var(--crema);
  border-top:1px solid color-mix(in srgb, var(--laton) 50%, transparent);
}
.rejilla-reserva{
  display:grid; gap:clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .rejilla-reserva{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.via{
  border:1px solid color-mix(in srgb, var(--crema) 18%, transparent);
  border-radius:var(--radio);
  padding:clamp(1.5rem, 4vw, 2.25rem);
  display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--crema) 4%, transparent);
}
.via--principal{
  border-color:color-mix(in srgb, var(--laton) 70%, transparent);
  background:color-mix(in srgb, var(--laton) 10%, transparent);
}
.via__num{
  font-family:var(--dato); font-size:.68rem; font-weight:500;
  letter-spacing:.18em;
  color:var(--laton-claro);
  margin:0 0 .75rem;
}
.via__titulo{
  font-size:1.5rem; color:var(--crema);
  margin:0 0 .75rem;
}
.via__txt{
  color:var(--rosa-humo);
  font-size:.96rem;
  margin:0 0 1.75rem;
}
.via__btn{ margin-top:auto; align-self:start; }
.reservar__nota{
  margin:clamp(1.75rem, 4vw, 2.25rem) 0 0;
  text-align:center; font-size:.92rem;
  color:var(--rosa-humo);
}

/* ══════════════ PARA EL DUEÑO ══════════════ */
.hablemos{
  background:var(--tinta);
  color:var(--crema);
}
.hablemos .ojo{ color:var(--laton-claro); }
.hablemos__titulo{
  font-size:clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
  color:var(--crema);
  margin:0 0 clamp(2rem, 4vw, 2.75rem);
  max-width:22ch;
}
.hablemos__rejilla{
  display:grid; gap:clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns:1fr;
  margin-bottom:clamp(2.25rem, 5vw, 3rem);
}
@media (min-width:700px){
  .hablemos__rejilla{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.nota h3{
  font-size:1.18rem;
  color:var(--laton-claro);
  margin:0 0 .6rem;
  padding-bottom:.6rem;
  border-bottom:1px solid color-mix(in srgb, var(--crema) 16%, transparent);
}
.nota p{
  margin:0;
  font-size:.94rem;
  color:color-mix(in srgb, var(--crema) 78%, transparent);
}
.nota code{ color:var(--laton-claro); }
.hablemos__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ══════════════ PIE ══════════════ */
.pie{
  background:var(--burdeos-hondo);
  color:var(--crema);
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  border-top:1px solid color-mix(in srgb, var(--laton) 40%, transparent);
}
.caja--pie{ display:grid; gap:.75rem; }
.pie__marca{
  font-family:var(--display); font-weight:700;
  font-size:1.3rem; margin:0;
  display:flex; align-items:center; gap:.7rem;
}
/* Sobre el burdeos hondo multiply no sirve —dejaría el logo en negro sobre
   negro—. Se invierte el JPEG (queda trazo blanco sobre fondo negro) y se
   compone con screen, que es la operación espejo de multiply: el negro
   desaparece y sobrevive el trazo. */
.pie__logo{
  width:46px; height:46px;
  flex:0 0 auto;
  filter:invert(1);
  mix-blend-mode:screen;
}
.pie__nota{
  margin:0; font-size:.86rem; line-height:1.6;
  max-width:66ch;
  color:var(--rosa-humo);
}
.pie__nota .enlace{ color:var(--laton-claro); }

.pie__vias{
  list-style:none; margin:.5rem 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.pie__vias a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:.5rem 1rem;
  font-size:.88rem; font-weight:600;
  color:var(--laton-claro);          /* 8,23:1 sobre burdeos-hondo */
  text-decoration:none;
  border:1px solid color-mix(in srgb, var(--laton) 45%, transparent);
  border-radius:var(--radio);
  transition:background var(--t-rapido) ease, color var(--t-rapido) ease;
}
.pie__vias a:hover{ background:var(--laton); color:var(--tinta); }

.pie__credito{
  margin:.25rem 0 0;
  font-family:var(--dato); font-size:.72rem;
  color:var(--rosa-humo);            /* 9,06:1 sobre burdeos-hondo */
}
/* El enlace a la licencia va dentro de un paréntesis, así que no se puede
   volver ficha suelta. Se le da la altura de toque con padding vertical
   sobre inline-block: el texto no se mueve —es un párrafo de una línea— y
   el blanco pasa de 15 px a 44. */
.pie__credito .enlace{
  font-weight:500;
  display:inline-block;
  padding-block:.9rem;
  margin-block:-.9rem;      /* devuelve el alto que el padding le sumó */
}

/* ══════════════ MOVIMIENTO ══════════════
   Dos mecanismos distintos, y la diferencia importa:

   · La PORTADA entra con @keyframes al cargar. No pasa por el observer
     ni por requestAnimationFrame: el primer pantallazo no puede quedar
     colgando de que un script dispare a tiempo.
   · Del pliegue hacia abajo manda el IntersectionObserver, y la clase
     .revelar la pone main.js — nunca el HTML. Si main.js no carga,
     no hay nada marcado como oculto y la página se ve entera.

   Todo lo oculto cuelga de .js, que pone el script del <head> y que se
   cae sola a los 4 s si main.js nunca llegó. */

.js .portada__texto > *{
  animation:sube var(--t-lento) var(--salida) both;
}
.js .portada__texto > *:nth-child(1){ animation-delay:.05s; }
.js .portada__texto > *:nth-child(2){ animation-delay:.14s; }
.js .portada__texto > *:nth-child(3){ animation-delay:.24s; }
.js .portada__texto > *:nth-child(4){ animation-delay:.34s; }
.js .portada__texto > *:nth-child(5){ animation-delay:.44s; }

.js .portada__faro{
  animation:asoma 1.1s var(--salida) both;
  animation-delay:.2s;
}

@keyframes sube{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}
@keyframes asoma{
  from{ opacity:0; transform:translateY(28px) scale(.94); }
  to  { opacity:1; transform:none; }
}

/* reveals del pliegue hacia abajo */
.js .revelar{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--t-lento) ease,
             transform var(--t-lento) var(--salida);
}
.js .revelar.visible{ opacity:1; transform:none; }
.js .revelar.retardo-1{ transition-delay:.08s; }
.js .revelar.retardo-2{ transition-delay:.16s; }
.js .revelar.retardo-3{ transition-delay:.24s; }

/* ── menos movimiento ────────────────────────────────────────────
   Se apaga lo intrusivo: el giro del faro y los desplazamientos de
   entrada. Los fundidos y los hovers se quedan — en Windows esta
   preferencia viene activada de fábrica muchas veces, y una página sin
   ningún hover ni fundido se ve muerta, no accesible. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  .faro__tubo{ animation:none; }   /* el faro queda, quieto */
  .cabecera::after{ animation:none; opacity:.35; }  /* el brillo se queda fijo */

  .js .portada__texto > *,
  .js .portada__faro{
    animation-name:aparece;
    animation-duration:.5s;
  }
  @keyframes aparece{ from{ opacity:0; } to{ opacity:1; } }

  .js .revelar{ transform:none; transition:opacity .45s ease; }
  .js .revelar.visible{ transform:none; }

  .btn:hover{ transform:none; }
}