/* ═══════════════════════════════════════════════════════════════════════════
   El Tucán JR · Querétaro
   CSS propio. Cero librerías de movimiento, cero JavaScript de autor.

   La dirección, en una línea: el sitio se ve como SU SALÓN DE NOCHE —verde-negro
   de selva, neón verde menta, madera— y no como su lona azul de imprenta.
   Sobre oscuro, su amarillo y su naranja pasan de chillones a luminosos.
   Fundamento medido en identidad.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · Tokens ───────────────────────────────────────────────────────────
   Colores medidos sobre SU material con paleta.cjs, no elegidos a gusto. */
:root {
  /* superficie: el salón */
  --noche:        hsl(162 32% 5%);
  --noche-2:      hsl(160 26% 8%);
  --noche-3:      hsl(158 22% 12%);
  --corteza:      hsl(24 28% 13%);   /* la madera de sus mesas */

  /* la marca, medida */
  --cobalto:      #1a4789;
  --pico:         #fb8316;            /* naranja del pico — ÚNICO color de botón */
  --pico-vivo:    hsl(29 97% 62%);
  --precio:       #ffed00;            /* amarillo — SOLO cifras */
  --selva:        #034c04;

  /* el acento vivo: sus tubos de neón */
  --neon:         hsl(158 88% 62%);
  --neon-tenue:   hsl(158 60% 38%);

  /* tinta */
  --hueso:        hsl(40 30% 95%);
  --hueso-2:      hsl(40 12% 74%);
  --hueso-3:      hsl(40 8% 56%);

  /* medidas */
  --ancho:        min(100% - 2.5rem, 72rem);
  --ancho-texto:  min(100% - 2.5rem, 40rem);
  --radio:        0.75rem;
  --curva:        cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

/* ─── 2 · Reset acotado ───────────────────────────────────────────────────
   Sin `* { margin: 0 }` universal: se resetea lo que estorba y nada más. */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class] { list-style: none; padding: 0; }
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--noche);
  color: var(--hueso);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip y NO hidden: hidden crea scroll container y mata view() */
}

/* ─── 3 · Tipografía ──────────────────────────────────────────────────── */
h1, h2, h3, .cifra, .etiqueta {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* El techo baja de 6.5 a 5.25rem: a 1440 el titular se partía en TRES líneas
   («EL / TUCÁN / JR») y empujaba el llamado fuera del primer golpe de vista. */
h1 { font-size: clamp(2.75rem, 8.5vw, 5.25rem); font-stretch: 112%; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 6vw, 3.5rem); font-stretch: 108%; text-transform: uppercase; }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; }
p  { text-wrap: pretty; }

.etiqueta {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon);
  line-height: 1.4;
}

/* El amarillo es SOLO para cifras. Si se usa en titulares se pierde el código
   que ellos mismos ya enseñaron a sus clientes en sus carteles. */
.cifra {
  color: var(--precio);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ─── 4 · Estructura ──────────────────────────────────────────────────── */
.envoltura { width: var(--ancho); margin-inline: auto; }
/* `clip` y NO `hidden`: hidden crea un scroll container y deja quietas las
   animaciones de view(). Sin esto, la hoja del borde mete scroll horizontal a
   partir de 900px — medido, salía en 3 de los 8 anchos. */
section { padding-block: clamp(4rem, 11vw, 8rem); position: relative; overflow: clip; }
.seccion--alterna { background: var(--noche-2); }

.cabecera-seccion { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabecera-seccion .etiqueta { display: block; margin-bottom: 0.875rem; }
.cabecera-seccion p { color: var(--hueso-2); margin-top: 1.125rem; font-size: 1.125rem; }

/* ─── 5 · El filete de neón ───────────────────────────────────────────────
   Es literalmente el tubo del techo de su salón, reducido a una línea. */
.neon-linea {
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: 0.55;
  box-shadow: 0 0 14px 1px hsl(158 88% 62% / 0.45);
}

/* ─── 6 · Botones ─────────────────────────────────────────────────────────
   Un solo color de llamada: el naranja de su pico. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* El área táctil se da con padding y min-height, NUNCA con flex sobre el
     texto: eso pega las palabras entre sí. */
  min-height: 3rem;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.18s var(--curva), background-color 0.18s var(--curva),
              border-color 0.18s var(--curva);
}
.boton--principal { background: var(--pico); color: hsl(24 60% 8%); }
.boton--principal:hover { background: var(--pico-vivo); transform: translateY(-2px); }
.boton--linea { border-color: hsl(40 30% 95% / 0.35); color: var(--hueso); }
.boton--linea:hover { border-color: var(--neon); color: var(--neon); transform: translateY(-2px); }
.boton:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .boton:hover { transform: none; } }

/* ─── 7 · Cabecera ────────────────────────────────────────────────────────
   NO es fija: una barra fija tapa el llamado del héroe en móvil y ninguna
   medición lo canta. Ocupa su hueco y se va con el scroll. */
.cabecera {
  padding-block: 1rem;
  border-bottom: 1px solid hsl(158 30% 50% / 0.14);
}
.cabecera .envoltura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.marca { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
/* El logo se extrajo de su cartel: el azul de fondo se hizo transparente por
   color medido (#1a4789), y el clip hexagonal quita los restos de adornos que
   quedaban FUERA del hexágono, en las esquinas del recorte.
   Va con su propio texto —incluido el acento invertido de su logotipo, que es
   suyo— y por eso el nombre NO se repite al lado. */
.marca img {
  width: 4.25rem;
  height: auto;
  /* Vértices al 14/86 y no al 25/75: el hexágono de su logotipo es más alto de
     lo que sugiere un hexágono regular, y con 25/75 el clip le cortaba el
     propio texto de la marca. */
  clip-path: polygon(50% 0%, 100% 14%, 100% 86%, 50% 100%, 0% 86%, 0% 14%);
}
@media (width >= 56.25rem) { .marca img { width: 5rem; } }
.marca-texto {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
/* El ul NO lleva clase, así que el reset `ul[class]` no lo alcanza: la lista se
   limpia aquí o salen viñetas entre los enlaces. */
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav a {
  display: inline-block;          /* para que el padding cuente como área táctil */
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hueso-2);
  /* El área táctil se da con padding, NUNCA metiendo el texto en un flex:
     eso pega las palabras entre sí. 19px de texto + 2×0.75rem = 43px, y con
     el interlineado pasa de 44. */
  padding-block: 0.75rem;
  transition: color 0.18s var(--curva);
}
.nav a:hover { color: var(--neon); }
.nav a:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; border-radius: 4px; }

.cabecera { padding-block: 1rem 0; }
.nav { border-top: 1px solid hsl(158 30% 50% / 0.1); margin-top: 0.75rem; }

@media (width >= 56.25rem) {   /* 900px en rem: en px sale del orden de cascada */
  .cabecera { padding-block: 0.75rem; }
  .cabecera .envoltura { position: relative; }
  .nav { border-top: 0; margin-top: 0; }
  .nav ul { gap: 0 1.75rem; }
}

/* ─── 8 · Héroe ──────────────────────────────────────────────────────────── */
.heroe { position: relative; padding-block: clamp(3rem, 8vw, 5.5rem) clamp(4rem, 9vw, 7rem); overflow: clip; }
.heroe__rejilla { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (width >= 56.25rem) { .heroe__rejilla { grid-template-columns: 1.05fr 0.95fr; } }

.heroe h1 { margin-bottom: 1.25rem; }
.heroe h1 .acento { color: var(--pico); }
.heroe__lema {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  color: var(--neon);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
.heroe__texto { color: var(--hueso-2); font-size: 1.125rem; max-width: 34rem; margin-bottom: 2rem; }
.heroe__gancho {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radio);
  border: 1px solid hsl(158 88% 62% / 0.28);
  background: hsl(158 40% 30% / 0.1);
  width: fit-content;
  max-width: 100%;
}
.heroe__gancho .cifra { font-size: clamp(2rem, 6vw, 2.5rem); line-height: 1; }
.heroe__gancho span:last-child { font-size: 0.9375rem; color: var(--hueso-2); line-height: 1.4; }
.heroe__gancho b { color: var(--hueso); font-weight: 600; }

.heroe__acciones { display: flex; flex-wrap: wrap; gap: 0.875rem; }

.heroe__foto { position: relative; border-radius: var(--radio); overflow: hidden; }
.heroe__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.heroe__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, hsl(162 32% 5% / 0.55));
  pointer-events: none;
}

/* la píldora del precio, sobre la foto */
.pastilla-precio {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  background: hsl(162 32% 5% / 0.86);
  backdrop-filter: blur(6px);
  border: 1px solid hsl(158 88% 62% / 0.3);
  border-radius: var(--radio);
  padding: 0.75rem 1.125rem;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.pastilla-precio .cifra { font-size: 1.75rem; }
.pastilla-precio span:last-child { font-size: 0.875rem; color: var(--hueso-2); line-height: 1.35; }

/* ─── 9 · Cinta de hechos ─────────────────────────────────────────────────
   Solo datos verificados. Ninguna cifra inventada, ningún «+500 clientes». */
.cinta { background: var(--noche-3); padding-block: 1.5rem; }
.cinta ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  justify-content: center;
  align-items: center;
}
.cinta li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--hueso-2);
  font-weight: 600;
}
.cinta .estrella { color: var(--precio); }

/* ─── 10 · Tarjetas de carta ──────────────────────────────────────────── */
.rejilla-carta {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.plato {
  background: var(--noche-3);
  border: 1px solid hsl(158 30% 50% / 0.12);
  border-radius: var(--radio);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  transition: border-color 0.22s var(--curva), transform 0.22s var(--curva);
}
.plato:hover { border-color: hsl(158 88% 62% / 0.4); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .plato:hover { transform: none; } }
.plato h3 { color: var(--hueso); }
.plato p { color: var(--hueso-2); font-size: 0.9688rem; }
.plato__precio { margin-top: auto; padding-top: 0.5rem; }
.plato__precio .cifra { font-size: 1.5rem; }
.plato__precio small { color: var(--hueso-3); font-size: 0.8125rem; display: block; }

/* la marca del pico: un triángulo naranja que señala el precio */
.plato__precio .cifra::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  background: var(--pico);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  vertical-align: 0.12em;
}

/* Lista de platos sin precio publicado.
   Dos columnas ya desde móvil: a una sola columna la carta se estiraba a lo
   largo de varias pantallas y se leía como un listado sin fin. La carta tiene
   que caber de un vistazo, no recorrerse. */
.lista-platos {
  display: grid;
  gap: 0.375rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.lista-platos li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--hueso-2);
  font-size: 0.9688rem;
  line-height: 1.45;
  padding-block: 0.125rem;
}
.lista-platos li::before {
  content: '';
  flex: 0 0 auto;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-top: 0.6em;
  background: var(--neon);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ─── 11 · Bloque de la barra ─────────────────────────────────────────── */
.barra-rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.promo {
  border: 1px solid hsl(158 30% 50% / 0.16);
  border-radius: var(--radio);
  padding: 1.75rem 1.5rem;
  background:
    radial-gradient(120% 80% at 50% 0%, hsl(158 88% 62% / 0.07), transparent 70%),
    var(--noche-3);
}
.promo .cifra { font-size: clamp(2.25rem, 5vw, 3rem); display: block; margin-bottom: 0.25rem; }
.promo h3 { margin-bottom: 0.5rem; }
.promo p { color: var(--hueso-2); font-size: 0.9375rem; }

/* ─── 11b · La banda del 3×1 ──────────────────────────────────────────────
   Cinta duplicada y translate -50%: al llegar al final, el segundo grupo está
   exactamente donde estaba el primero y el salto no se ve. Las cuatro trampas
   de este patrón, evitadas a propósito:
     · el contenedor lleva `overflow: clip` — sin él, la cinta mete scroll;
     · los dos grupos son IDÉNTICOS, o el empalme se nota;
     · el desplazamiento es -50% exacto del ancho de la pista, no un valor a ojo;
     · `width: max-content` en la pista, o el flex la comprime y el bucle cojea. */
.banda {
  overflow: clip;
  background: var(--pico);
  color: hsl(24 60% 8%);
  padding-block: 0.875rem;
  border-block: 1px solid hsl(24 60% 8% / 0.25);
}
.banda__pista {
  display: flex;
  width: max-content;
  animation: correr 26s linear infinite;
}
.banda__grupo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-right: 1.25rem;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  white-space: nowrap;
}
.banda__grupo b { font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.banda__grupo span { font-weight: 500; }
.banda__grupo i { font-style: normal; opacity: 0.5; }
@keyframes correr { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  .banda__pista { animation: none; }
  /* sin movimiento el mensaje sigue estando: se muestra un solo grupo, quieto */
  .banda__grupo:last-child { display: none; }
}

/* ─── 11c · Fotos del local ───────────────────────────────────────────── */
.lugar__principal { margin: 0; }
.lugar__principal img {
  width: 100%;
  border-radius: var(--radio);
  border: 1px solid hsl(158 30% 50% / 0.16);
}
.lugar__principal figcaption {
  margin-top: 0.75rem;
  color: var(--hueso-3);
  font-size: 0.9063rem;
  line-height: 1.45;
}
.galeria { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  border: 1px solid hsl(158 30% 50% / 0.16);
}
.galeria img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* ─── 12 · Bloque visita ──────────────────────────────────────────────── */
.visita { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (width >= 56.25rem) { .visita { grid-template-columns: 1fr 1fr; } }
.dato { padding-block: 1rem; border-top: 1px solid hsl(158 30% 50% / 0.14); }
.dato:first-of-type { border-top: 0; }
.dato dt { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); font-weight: 700; margin-bottom: 0.375rem; }
.dato dd { margin: 0; color: var(--hueso); font-size: 1.0625rem; }
.dato dd a { text-decoration-color: hsl(158 88% 62% / 0.5); text-underline-offset: 0.25em; }
.dato dd a:hover { color: var(--neon); }
.horario-fila { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 0.3125rem; border-bottom: 1px dashed hsl(158 30% 50% / 0.14); }
.horario-fila:last-child { border-bottom: 0; }
.horario-fila span:last-child { color: var(--hueso-2); font-variant-numeric: tabular-nums; }
.horario-fila--cerrado span:last-child { color: var(--hueso-3); }

.mapa-marco { border-radius: var(--radio); overflow: hidden; border: 1px solid hsl(158 30% 50% / 0.16); min-height: 22rem; }
.mapa-marco iframe { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; filter: saturate(0.85) contrast(1.05); }

/* ─── 13 · Pie ────────────────────────────────────────────────────────── */
.pie { background: var(--noche-2); padding-block: 3rem 2.5rem; border-top: 1px solid hsl(158 30% 50% / 0.14); }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
/* Mismo criterio que el nav: el área táctil sale del padding, no de un flex
   sobre el texto. Los enlaces del pie medían 19-20 px de alto. */
.pie a { text-decoration: none; color: var(--hueso-2); }
.pie li > a, .pie__rejilla > div > ul a { display: inline-block; padding-block: 0.75rem; }
.pie a:hover { color: var(--neon); }
.pie a:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; border-radius: 4px; }
.dato dd a { display: inline-block; padding-block: 0.625rem; }
.redes { display: flex; gap: 0.75rem; margin-top: 1rem; }
.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid hsl(158 30% 50% / 0.28);
  transition: border-color 0.18s var(--curva), color 0.18s var(--curva);
}
.redes a:hover { border-color: var(--neon); color: var(--neon); }
.redes svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.pie__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid hsl(158 30% 50% / 0.12); color: var(--hueso-3); font-size: 0.875rem; }

/* ─── 14 · La hoja de monstera, del logo ──────────────────────────────────
   Silueta que asoma en el borde de las secciones. Viene de SU logo, no de un
   banco de imágenes. No flota ni se anima: hojas flotando de fondo en un sitio
   de selva es el cliché exacto del giro. */
.hoja-borde {
  position: absolute;
  pointer-events: none;
  color: var(--selva);
  opacity: 0.5;
  z-index: 0;
}
.hoja-borde--der { right: -3rem; top: 2rem; width: 13rem; rotate: 18deg; }
.hoja-borde--izq { left: -4rem; bottom: 1rem; width: 11rem; rotate: -160deg; }
@media (width < 56.25rem) { .hoja-borde { display: none; } }
section > .envoltura { position: relative; z-index: 1; }

/* ─── 15 · Entradas al hacer scroll ───────────────────────────────────────
   Sin JavaScript. El estado inicial se declara SOLO dentro del @supports, así
   que si el navegador no soporta view() el contenido está visible desde el
   primer momento — nunca se esconde algo que no se pueda volver a mostrar. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entra {
      animation: entrar linear both;
      animation-timeline: view();
      /* entry a entry, sin mezclar con cover: mezclarlos borra lo ya rebasado */
      animation-range: entry 5% entry 55%;
    }
  }
}
@keyframes entrar {
  from { opacity: 0; translate: 0 1.75rem; }
  to   { opacity: 1; translate: 0 0; }
}

/* ─── 16 · Salto para el teclado ──────────────────────────────────────── */
.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pico);
  color: hsl(24 60% 8%);
  padding: 0.875rem 1.25rem;
  border-radius: 0 0 var(--radio) 0;
  font-weight: 700;
  text-decoration: none;
  z-index: 99;
}
.salto:focus { left: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PULIDO · cursiva de marca · las delicias · la deriva en bucle
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 17 · La cursiva ─────────────────────────────────────────────────────
   Su propia gráfica escribe «Restaurante» a mano, en cursiva, sobre el trazo
   negro de su cartel. Así que la itálica no es un capricho: es fiel a la marca.
   Instrument Serif Italic y no una script de pincel — la script se lee barata
   en pantalla, y esta tiene el gesto sin la baratura. Es además la hermana de
   Instrument Sans, que ya sostiene el texto corrido. */
.heroe__lema,
.destacado,
.pie__lema,
.delicia figcaption h3,
.temporada {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.heroe__lema {
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  color: var(--neon);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

/* El destacado es la frase que resume la sección: va en cursiva, en hueso, y
   por encima del párrafo explicativo. Da voz sin gritar. */
.destacado {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  color: var(--hueso);
  line-height: 1.25;
  margin-top: 1rem;
}
.cabecera-seccion .destacado + p { margin-top: 0.625rem; }

.pie__lema {
  font-size: 1.25rem;
  color: var(--neon);
  margin-bottom: 0.75rem;
}

.temporada {
  font-size: 0.875rem;
  color: var(--pico);
  white-space: nowrap;
}

/* ─── 18 · La deriva ──────────────────────────────────────────────────────
   Un desplazamiento MUY lento y en bucle sobre las fotos. Es lo que separa una
   foto pegada de una foto que respira, y no cuesta un vídeo.

   Cuatro cuidados, cada uno por una cicatriz:
     · `scale` y `translate` sueltas, NUNCA el atajo `transform` — el atajo se
       lee «none» en las mediciones y da por muerta una animación viva;
     · el contenedor lleva `overflow: clip`: un scale que se sale agranda el
       scrollWidth y mete scroll horizontal que sube por los contenedores;
     · `alternate` en vez de reiniciar, o el bucle da un salto al cerrar;
     · las tres fases (a, b, c) van desfasadas con retardo negativo, para que
       una rejilla de fotos no respire toda al unísono como un pecho. */
.marco-vivo { overflow: clip; }

@media (prefers-reduced-motion: no-preference) {
  .deriva {
    animation: derivar 34s ease-in-out infinite alternate;
    will-change: scale, translate;
  }
  .deriva--b { animation-duration: 41s; animation-delay: -13s; }
  .deriva--c { animation-duration: 29s; animation-delay: -7s; }
}
@keyframes derivar {
  from { scale: 1.0;  translate: 0 0; }
  to   { scale: 1.07; translate: -1.2% -1.6%; }
}

/* ─── 19 · Nuestras delicias ─────────────────────────────────────────────── */
.delicias {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.delicia {
  margin: 0;
  position: relative;
  border-radius: var(--radio);
  border: 1px solid hsl(158 30% 50% / 0.14);
  background: var(--noche-3);
  transition: border-color 0.25s var(--curva), translate 0.25s var(--curva);
}
.delicia:hover { border-color: hsl(158 88% 62% / 0.42); translate: 0 -3px; }
@media (prefers-reduced-motion: reduce) { .delicia:hover { translate: none; } }

.delicia img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.delicia--ancha { grid-column: span 2; }
.delicia--ancha img { aspect-ratio: 16 / 9; }
@media (width < 40rem) {
  .delicia--ancha { grid-column: span 1; }
  .delicia--ancha img { aspect-ratio: 4 / 3; }
}

.delicia figcaption {
  padding: 1.125rem 1.25rem 1.375rem;
  position: relative;
}
.delicia figcaption h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--hueso);
  margin-bottom: 0.375rem;
  text-transform: none;
  letter-spacing: 0;
}
.delicia figcaption p {
  color: var(--hueso-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}
/* el filete de neón bajo el título: es el tubo de su techo, reducido a línea */
.delicia figcaption::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.25rem;
  width: 2.25rem;
  height: 2px;
  background: var(--neon);
  opacity: 0.75;
  box-shadow: 0 0 10px 0 hsl(158 88% 62% / 0.5);
}

/* Cada foto de la galería necesita SU PROPIO recorte: el `scale` de la deriva
   se salía y metía scroll horizontal en 6 de los 8 anchos. Un overflow en la
   rejilla no vale — recortaría el conjunto, no cada pieza. */
.galeria .marco-vivo {
  display: block;
  border-radius: var(--radio);
  border: 1px solid hsl(158 30% 50% / 0.16);
  overflow: clip;
}
.galeria .marco-vivo:first-child { grid-column: 1 / -1; }
.galeria .marco-vivo img { border: 0; border-radius: 0; aspect-ratio: 4 / 3; }
.galeria .marco-vivo:first-child img { aspect-ratio: 16 / 9; }

/* `.cabecera-seccion p` (0,1,1) le ganaba a `.destacado` (0,1,0) y la frase en
   cursiva salía a 18px en vez de 26. La regla se declara con la especificidad
   suficiente en vez de subirla con !important. */
.cabecera-seccion .destacado {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  color: var(--hueso);
  line-height: 1.25;
  margin-top: 1rem;
}