/* ============================================================
   LANDING — Bodega David Fernández · D.O. Lanzarote
   Sistema: papel + tinta (de las etiquetas) sobre negro volcánico.
   Tipografía: Playfair Display (titulares) · Jost (texto/uso general)
               · Pinyon Script (acentos caligráficos)
   ============================================================ */

:root {
  --papel: #F2EEE5;
  --papel-2: #E9E3D4;
  --tinta: #191712;
  --volcan: #0D0C0A;
  --humo: #6E6757;
  --humo-claro: rgba(242, 238, 229, 0.62);
  --linea: rgba(25, 23, 18, 0.16);
  --linea-clara: rgba(242, 238, 229, 0.2);
  --brote: #6C7A45;
  --brote-vivo: #5A7A2E; /* mismo verde vid que --brote, más saturado: se probó como fondo y no convenció */
  --brote-oscuro: #1E2A16; /* verde vid oscuro, misma luminosidad aprox. que --volcan: sustituto de negro para secciones oscuras */
  --gris: #6E6757; /* alias: reservas.js pinta mensajes con var(--gris) */

  --f-display: "Playfair Display", "Didot", serif;
  --f-texto: "Jost", "Futura", sans-serif;
  --f-script: "Pinyon Script", cursive;

  --ancho: 1280px;
  --pad-x: clamp(1.25rem, 4vw, 3.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--f-texto);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

::selection { background: var(--tinta); color: var(--papel); }

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

[id] { scroll-margin-top: 5rem; }

.contenedor {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ---------- Piezas tipográficas ---------- */

.eyebrow {
  display: block;
  font-family: var(--f-texto);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.script {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
}

.titulo {
  font-family: var(--f-display);
  font-weight: 470;
  line-height: 1.04;
  letter-spacing: 0.005em;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  text-wrap: balance;
}

.titulo em {
  font-style: italic;
  font-weight: 420;
}

.parrafo {
  max-width: 34em;
  margin-top: 1.6rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--humo);
}

.seccion-oscura .parrafo { color: var(--humo-claro); }

/* ---------- Botones / CTA ---------- */

.btn {
  display: inline-block;
  margin-top: 2.4rem;
  padding: 1rem 2.4rem;
  border: 1px solid currentColor;
  font-family: var(--f-texto);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.btn:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.seccion-oscura .btn:hover,
.hero .btn:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }

.enlace {
  display: inline-block;
  margin-top: 1.8rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3rem;
}

/* ---------- Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  color: var(--papel);
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.7rem var(--pad-x);
}

.header.is-scrolled,
.header.is-solido {
  background: rgba(242, 238, 229, 0.94);
  color: var(--tinta);
  box-shadow: 0 1px 0 var(--linea);
  backdrop-filter: blur(8px);
}

/* Marca centrada: isotipo encima (su propia línea, nada intercalado con el
   texto) y debajo "Bodega David Fernández" + subtítulo, todo en columna.
   .marca-movil es una segunda copia fuera de #nav, para la barra compacta
   de móvil — ver comentario de estructura en header.blade.php. */

.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.15rem;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  flex: 0 0 auto;
}

.marca-movil { display: none; }

.marca-logo {
  width: 1.5rem;
  height: auto;
  flex: 0 0 auto;
  margin-bottom: 0.1rem;
}

.marca-texto {
  display: flex;
  align-items: baseline;
  column-gap: 0.45rem;
}

.marca-bodega {
  font-family: var(--f-texto);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
}

.marca-nombre {
  font-family: var(--f-texto);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.marca-sub {
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Contenedor de navegación: agrupa marca + los dos bloques de enlaces. En
   desktop, nav-izq/nav-der reciben flex:1 para que la marca quede centrada
   de verdad sin importar el ancho de cada lado (p. ej. el botón CTA). */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  width: 100%;
}

.nav-grupo {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0; /* si no, cada grupo pide como mínimo el ancho de su propio
                   contenido antes de repartir el espacio — y como nav-der
                   tiene un enlace más + el botón CTA (más ancho que un
                   enlace de texto), acaba más ancho que nav-izq y descentra
                   la marca. Con min-width:0 el reparto 50/50 es exacto. */
  gap: clamp(0.9rem, 1.6vw, 1.7rem);
}

/* Ambos grupos se juntan pegados a la marca (no a los bordes exteriores),
   para que "Los vinos" y "La bodega" queden simétricos a cada lado del
   logo — el hueco desigual que deja el CTA (ver .nav-cta-espejo más abajo)
   se empuja así hacia los bordes, donde no rompe la simetría visual. */
.nav-izq { justify-content: flex-end; }
.nav-der { justify-content: flex-start; }

.nav a {
  font-size: clamp(0.78rem, 0.45vw + 0.65rem, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}

.nav a:hover { opacity: 1; }

.nav a.activo {
  opacity: 1;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
}

/* ---------- Nav · parra (subrayado que crece al hover/focus) ---------- */
/* Vid dibujada a mano (SVG 120×40, ver partials/parra-subrayado.blade.php),
   puerto a CSS puro de public/img/landing/menu-parra-standalone.html
   (componente VineUnderline): cada trazo es pathLength="1" +
   stroke-dasharray/dashoffset con su propio delay, escalonados para que la
   vid "crezca" en orden — tronco primero, luego zarcillo/ramita, luego hoja
   o racimo. stroke/fill = currentColor: sigue el color del <a> (papel sobre
   el hero, tinta al hacer scroll/solid) sin repintar nada aquí. Sin JS: el
   propio :hover/:focus-visible del enlace dispara la animación. */

.nav-parra-link {
  --vid-peso: 1.4;
  --vid-ease: cubic-bezier(0.3, 0.85, 0.25, 1);
  position: relative;
  padding-bottom: 2.4em; /* en em: hueco proporcional al texto, no un rem fijo */
}

.nav-parra {
  /* Tamaño fijo (en em, escala con el font-size del enlace) que respeta la
     proporción real del dibujo (viewBox 120×40 = 3:1) — nunca se estira ni
     se comprime para "encajar" en el ancho del texto. Se centra bajo el
     enlace: si el título es corto, la vid sobresale por los lados; si es
     largo (p. ej. "Preguntas frecuentes"), simplemente no lo cubre entero.
     bottom:0 (no negativo) para que quede pegada al texto, no desplazada
     hacia abajo. */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 9em;
  aspect-ratio: 3 / 1;
  pointer-events: none;
}

.nav-parra path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.nav-parra circle {
  fill: currentColor;
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  /* --- trazos: dashoffset 1→0, cada uno con su propio delay/duración --- */
  .nav-parra .p-main1 { stroke-width: calc(var(--vid-peso) * 1.75); }
  .nav-parra-link:hover .p-main1, .nav-parra-link:focus-visible .p-main1 { transition: stroke-dashoffset 0.079s var(--vid-ease) 0.0s, opacity 0s linear 0.0s; }
  .nav-parra .p-main2 { stroke-width: calc(var(--vid-peso) * 1.15); }
  .nav-parra-link:hover .p-main2, .nav-parra-link:focus-visible .p-main2 { transition: stroke-dashoffset 0.079s var(--vid-ease) 0.066s, opacity 0s linear 0.066s; }
  .nav-parra .p-main3 { stroke-width: calc(var(--vid-peso) * 0.7); }
  .nav-parra-link:hover .p-main3, .nav-parra-link:focus-visible .p-main3 { transition: stroke-dashoffset 0.079s var(--vid-ease) 0.125s, opacity 0s linear 0.125s; }
  .nav-parra .p-main4 { stroke-width: calc(var(--vid-peso) * 0.4); }
  .nav-parra-link:hover .p-main4, .nav-parra-link:focus-visible .p-main4 { transition: stroke-dashoffset 0.086s var(--vid-ease) 0.178s, opacity 0s linear 0.178s; }
  .nav-parra .p-fork { stroke-width: calc(var(--vid-peso) * 0.6); }
  .nav-parra-link:hover .p-fork, .nav-parra-link:focus-visible .p-fork { transition: stroke-dashoffset 0.092s var(--vid-ease) 0.139s, opacity 0s linear 0.139s; }
  .nav-parra .p-forkb { stroke-width: calc(var(--vid-peso) * 0.34); }
  .nav-parra-link:hover .p-forkb, .nav-parra-link:focus-visible .p-forkb { transition: stroke-dashoffset 0.092s var(--vid-ease) 0.185s, opacity 0s linear 0.185s; }
  .nav-parra .p-fork2 { stroke-width: calc(var(--vid-peso) * 0.72); }
  .nav-parra-link:hover .p-fork2, .nav-parra-link:focus-visible .p-fork2 { transition: stroke-dashoffset 0.086s var(--vid-ease) 0.205s, opacity 0s linear 0.205s; }
  .nav-parra .p-fork2b { stroke-width: calc(var(--vid-peso) * 0.44); }
  .nav-parra-link:hover .p-fork2b, .nav-parra-link:focus-visible .p-fork2b { transition: stroke-dashoffset 0.086s var(--vid-ease) 0.244s, opacity 0s linear 0.244s; }
  .nav-parra .p-fork3 { stroke-width: calc(var(--vid-peso) * 0.46); }
  .nav-parra-link:hover .p-fork3, .nav-parra-link:focus-visible .p-fork3 { transition: stroke-dashoffset 0.079s var(--vid-ease) 0.191s, opacity 0s linear 0.191s; }
  .nav-parra .p-fork3b { stroke-width: calc(var(--vid-peso) * 0.28); }
  .nav-parra-link:hover .p-fork3b, .nav-parra-link:focus-visible .p-fork3b { transition: stroke-dashoffset 0.079s var(--vid-ease) 0.224s, opacity 0s linear 0.224s; }
  .nav-parra .p-twig { stroke-width: calc(var(--vid-peso) * 0.4); }
  .nav-parra-link:hover .p-twig, .nav-parra-link:focus-visible .p-twig { transition: stroke-dashoffset 0.079s var(--vid-ease) 0.271s, opacity 0s linear 0.271s; }
  .nav-parra .p-twigb { stroke-width: calc(var(--vid-peso) * 0.28); }
  .nav-parra-link:hover .p-twigb, .nav-parra-link:focus-visible .p-twigb { transition: stroke-dashoffset 0.079s var(--vid-ease) 0.304s, opacity 0s linear 0.304s; }
  .nav-parra .p-stem { stroke-width: calc(var(--vid-peso) * 0.5); }
  .nav-parra-link:hover .p-stem, .nav-parra-link:focus-visible .p-stem { transition: stroke-dashoffset 0.099s var(--vid-ease) 0.231s, opacity 0s linear 0.231s; }
  .nav-parra .p-stem2 { stroke-width: calc(var(--vid-peso) * 0.46); }
  .nav-parra-link:hover .p-stem2, .nav-parra-link:focus-visible .p-stem2 { transition: stroke-dashoffset 0.099s var(--vid-ease) 0.284s, opacity 0s linear 0.284s; }
  .nav-parra .p-stem3 { stroke-width: calc(var(--vid-peso) * 0.46); }
  .nav-parra-link:hover .p-stem3, .nav-parra-link:focus-visible .p-stem3 { transition: stroke-dashoffset 0.099s var(--vid-ease) 0.218s, opacity 0s linear 0.218s; }
  .nav-parra .p-stem4 { stroke-width: calc(var(--vid-peso) * 0.5); }
  .nav-parra-link:hover .p-stem4, .nav-parra-link:focus-visible .p-stem4 { transition: stroke-dashoffset 0.099s var(--vid-ease) 0.33s, opacity 0s linear 0.33s; }
  .nav-parra .p-leaf { stroke-width: calc(var(--vid-peso) * 0.44); }
  .nav-parra-link:hover .p-leaf, .nav-parra-link:focus-visible .p-leaf { transition: stroke-dashoffset 0.149s var(--vid-ease) 0.257s, opacity 0s linear 0.257s; }
  .nav-parra .p-vein { stroke-width: calc(var(--vid-peso) * 0.3); }
  .nav-parra-link:hover .p-vein, .nav-parra-link:focus-visible .p-vein { transition: stroke-dashoffset 0.099s var(--vid-ease) 0.323s, opacity 0s linear 0.323s; }
  .nav-parra .p-leaf2 { stroke-width: calc(var(--vid-peso) * 0.42); }
  .nav-parra-link:hover .p-leaf2, .nav-parra-link:focus-visible .p-leaf2 { transition: stroke-dashoffset 0.132s var(--vid-ease) 0.37s, opacity 0s linear 0.37s; }
  .nav-parra .p-vein2 { stroke-width: calc(var(--vid-peso) * 0.28); }
  .nav-parra-link:hover .p-vein2, .nav-parra-link:focus-visible .p-vein2 { transition: stroke-dashoffset 0.092s var(--vid-ease) 0.429s, opacity 0s linear 0.429s; }
  .nav-parra .p-curl1 { stroke-width: calc(var(--vid-peso) * 0.4); }
  .nav-parra-link:hover .p-curl1, .nav-parra-link:focus-visible .p-curl1 { transition: stroke-dashoffset 0.198s var(--vid-ease) 0.29s, opacity 0s linear 0.29s; }
  .nav-parra .p-curl3 { stroke-width: calc(var(--vid-peso) * 0.4); }
  .nav-parra-link:hover .p-curl3, .nav-parra-link:focus-visible .p-curl3 { transition: stroke-dashoffset 0.182s var(--vid-ease) 0.165s, opacity 0s linear 0.165s; }

  /* --- racimos: aparecen con un pequeño "pop" de escala --- */
  .nav-parra-link:hover .p-berry1, .nav-parra-link:focus-visible .p-berry1 { transition: opacity 0.083s linear 0.271s, transform 0.149s cubic-bezier(.2,1.5,.4,1) 0.271s; }
  .nav-parra-link:hover .p-berry2, .nav-parra-link:focus-visible .p-berry2 { transition: opacity 0.083s linear 0.294s, transform 0.149s cubic-bezier(.2,1.5,.4,1) 0.294s; }
  .nav-parra-link:hover .p-berry3, .nav-parra-link:focus-visible .p-berry3 { transition: opacity 0.083s linear 0.317s, transform 0.149s cubic-bezier(.2,1.5,.4,1) 0.317s; }
  .nav-parra-link:hover .p-berry4, .nav-parra-link:focus-visible .p-berry4 { transition: opacity 0.083s linear 0.34s, transform 0.149s cubic-bezier(.2,1.5,.4,1) 0.34s; }
  .nav-parra-link:hover .p-berry5, .nav-parra-link:focus-visible .p-berry5 { transition: opacity 0.083s linear 0.33s, transform 0.149s cubic-bezier(.2,1.5,.4,1) 0.33s; }
  .nav-parra-link:hover .p-berry6, .nav-parra-link:focus-visible .p-berry6 { transition: opacity 0.083s linear 0.353s, transform 0.149s cubic-bezier(.2,1.5,.4,1) 0.353s; }
  .nav-parra-link:hover .p-berry7, .nav-parra-link:focus-visible .p-berry7 { transition: opacity 0.083s linear 0.376s, transform 0.149s cubic-bezier(.2,1.5,.4,1) 0.376s; }

  .nav-parra-link:hover .nav-parra path,
  .nav-parra-link:focus-visible .nav-parra path { stroke-dashoffset: 0; opacity: 1; }
  .nav-parra-link:hover .nav-parra circle,
  .nav-parra-link:focus-visible .nav-parra circle { opacity: 1; transform: scale(1); }
}

/* Motion reducido: sin trazado progresivo, la vid aparece entera y al instante */
@media (prefers-reduced-motion: reduce) {
  .nav-parra-link:hover .nav-parra path,
  .nav-parra-link:focus-visible .nav-parra path { stroke-dashoffset: 0; opacity: 1; }
  .nav-parra-link:hover .nav-parra circle,
  .nav-parra-link:focus-visible .nav-parra circle { opacity: 1; transform: scale(1); }
}

.nav .nav-cta {
  border: 1px solid currentColor;
  padding: 0.6rem 1.1rem;
  opacity: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Gemelo invisible del CTA: mismo texto, mismo padding/borde → mismo ancho,
   pegado al borde izquierdo para compensar el CTA real del borde derecho.
   Sin él, el CTA (que no tiene pareja en nav-izq) desequilibraría de nuevo
   el ancho total a cada lado de la marca, aunque nav-izq/nav-der repartan
   50/50 entre ellos. */
.nav-cta-espejo {
  visibility: hidden;
  pointer-events: none;
}

.header:not(.is-scrolled):not(.is-solido) .nav-cta:hover { background: var(--papel); color: var(--tinta); }
.header.is-scrolled .nav-cta:hover,
.header.is-solido .nav-cta:hover { background: var(--tinta); color: var(--papel); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
}

/* Breakpoint a 1023px (no 900px): el nav de escritorio (6 enlaces + marca +
   CTA + su gemelo invisible) necesita bastante ancho real incluso ya
   compactado (labels cortos, gaps ajustados) — por debajo de ~1000px las
   palabras empiezan a tocar el botón CTA. 1023px dobla como límite de
   portátiles/tablets pequeños y da el hueco de sobra necesario. */
@media (max-width: 1023px) {
  /* Sin blur en móvil: backdrop-filter (cualquier valor ≠ none) convierte
     al header en CONTAINING BLOCK de sus descendientes position:fixed — el
     panel .nav (fixed, inset:0) pasaba a medirse contra la barrita del
     header en vez del viewport, y el menú abierto quedaba reducido a esa
     franja ("se queda por detrás") en cuanto el header estaba sólido
     (scroll, o siempre en blog/reservas). El fondo papel al 94% ya es casi
     opaco, así que perder el blur aquí es imperceptible; desktop lo
     conserva porque ahí el nav nunca es un panel fixed. */
  .header.is-scrolled,
  .header.is-solido { backdrop-filter: none; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    /* flex-start (no center) + overflow-y:auto: con los 6 enlaces + CTA, cada
       uno con su padding-bottom: 2.4em para la vid subrayado (ver
       .nav-parra-link más arriba), el contenido apilado es más alto que la
       pantalla en muchos móviles. Centrado + overflow visible (el estado
       previo) desbordaba por arriba Y por abajo — el desborde de abajo
       asomaba por encima de todo con el menú "cerrado", porque el panel
       está anclado por su bottom:0 al borde superior de la pantalla
       (translateY(-100%) lo saca de vista pero el desborde interno no
       respeta esa traslación si no se recorta). Con flex-start + scroll
       propio, el contenido nunca se sale de la caja del panel. */
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-block: 4.5rem 2.5rem;
    gap: 1.35rem;
    background: var(--volcan);
    color: var(--papel);
    transform: translateY(-100%);
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }
  /* Se "desenvuelven" para que sus enlaces pasen a ser hijos directos de la
     columna del menú — así izquierda y derecha quedan en un único listado
     vertical, sin duplicar markup entre desktop y móvil. */
  .nav-grupo { display: contents; }
  .nav a { font-size: 1.2rem; }
  /* La vid subrayado es un efecto de hover: en el panel táctil no aporta
     nada y su hueco reservado (padding-bottom 2.4em por enlace) era lo que
     dejaba el listado con separaciones enormes. Fuera dibujo y hueco. */
  .nav .nav-parra-link { padding-bottom: 0; }
  .nav .nav-parra { display: none; }
  /* La marca de dentro de #nav (oculta tras el panel mientras está cerrado)
     se convierte en la cabecera del propio panel: order:-1 la sube por
     encima de los enlaces aplanados y da identidad al menú abierto. La
     barra compacta sigue usando la copia .marca-movil. */
  .nav > .marca { order: -1; margin-bottom: 0.8rem; }
  .nav > .marca .marca-logo { width: 2.4rem; }
  /* El gemelo invisible solo existe para compensar anchos en la fila
     horizontal de desktop; en el listado vertical de móvil no pinta nada
     y solo dejaría un hueco muerto. */
  .nav-cta-espejo { display: none; }
  /* En la barra compacta no hay sitio para apilar el isotipo encima del
     texto: aquí sí van en línea, logo a la izquierda del nombre. Además, en
     esta fila comparte sitio con el botón "Menú": marca-bodega ("Bodega",
     el eyebrow pequeño) se oculta y marca-nombre reduce tamaño/tracking —
     con el tamaño de desktop, "Bodega David Fernández" + el botón no caben
     en un móvil real (~320-414px) y el botón queda recortado fuera de la
     pantalla por el overflow-x:hidden del body, inutilizable. */
  .header-inner { gap: 0.6rem; }
  .marca-movil {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.4rem;
    min-width: 0;
  }
  .marca-movil .marca-logo { width: 1.2rem; margin-bottom: 0; flex: 0 0 auto; }
  .marca-movil .marca-bodega { display: none; }
  .marca-movil .marca-nombre {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  body.menu-abierto .nav { transform: translateY(0); }
  /* .marca-movil pinta después de #nav en el DOM: sin esto quedaría flotando
     encima del panel de menú a pantalla completa mientras está abierto (la
     identidad del panel la pone la .marca de dentro de #nav, ver arriba). */
  body.menu-abierto .marca-movil { display: none; }
  /* Con la marca compacta oculta, space-between dejaba al toggle como único
     hijo y lo mandaba al borde izquierdo: el botón que acababas de pulsar
     "saltaba" de lado. Anclado a la derecha no se mueve al abrir/cerrar. */
  body.menu-abierto .header-inner { justify-content: flex-end; }
  /* Sobre el panel oscuro el toggle debe ser papel siempre: con el header
     sólido heredaba color tinta y "Cerrar" quedaba casi invisible. */
  body.menu-abierto .nav-toggle { color: var(--papel); }
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 61;
    padding: 0.55rem 0.85rem;
    font-size: 0.65rem;
    flex: 0 0 auto;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--papel);
  background: var(--volcan);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  /* Colchón extra (igual que .panel-cita-fondo): el parallax de landing.js
     desplaza este bloque hacia abajo al hacer scroll; sin este margen de más
     se queda corto y asoma el fondo (--volcan) de .hero por arriba. */
  inset: -12% 0;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 12, 10, 0.82) 0%, rgba(13, 12, 10, 0.25) 45%, rgba(13, 12, 10, 0.35) 100%);
}

.hero-contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad-x) clamp(4rem, 10vh, 7rem);
  max-width: var(--ancho);
  margin-inline: auto;
}

.hero .titulo {
  font-size: clamp(3rem, 8.5vw, 7.2rem);
  max-width: 11em;
}

.hero .parrafo { color: rgba(242, 238, 229, 0.78); }

.hero-scroll {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(4rem, 10vh, 7rem);
  z-index: 2;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
  writing-mode: vertical-rl;
}

@media (max-width: 700px) { .hero-scroll { display: none; } }

/* ---------- Hero carrusel (Ken Burns) ---------- */
/* Sustituye al vídeo del hero: fotos reales con zoom lento + crossfade y
   selector lateral de puntos. .hero-media ya aporta el overlay de contraste
   (::after) y el contenedor absolute inset:0, así que el carrusel solo
   necesita llenarlo. --hero-kb-duration debe coincidir con HERO_INTERVALO
   en landing.js para que el zoom acompañe justo el tiempo que la foto está
   visible. */

.hero-carrusel-slides { position: absolute; inset: 0; }

.hero-carrusel-slide {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.6s ease;
}

.hero-carrusel-slide.active {
  opacity: 1;
  animation: hero-kb-zoom var(--hero-kb-duration, 6.5s) ease-out forwards;
}

@keyframes hero-kb-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

.hero-carrusel-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.hero-carrusel-dots {
  position: absolute; z-index: 2;
  right: var(--pad-x); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-end;
}

.hero-carrusel-dot-wrap {
  display: flex; align-items: center; gap: 0.7rem;
  cursor: pointer; background: none; border: none; padding: 5px 0;
  font-family: inherit;
}

.hero-carrusel-dot-label {
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--papel); opacity: 0; transform: translateX(6px);
  transition: all 0.4s ease; white-space: nowrap;
}

.hero-carrusel-dot-wrap.active .hero-carrusel-dot-label { opacity: 0.85; transform: none; }

.hero-carrusel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(242, 238, 229, 0.35); position: relative; flex-shrink: 0;
  transition: background 0.3s ease;
}

.hero-carrusel-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(242, 238, 229, 0.5); opacity: 0; transform: scale(0.6);
}

.hero-carrusel-dot-wrap.active .hero-carrusel-dot::after { opacity: 1; transform: scale(1); transition: all 0.4s ease; }
.hero-carrusel-dot-wrap.active .hero-carrusel-dot,
.hero-carrusel-dot-wrap:hover .hero-carrusel-dot { background: var(--papel); }

@media (max-width: 900px) { .hero-carrusel-dots { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-carrusel-slide { transition: none; animation: none !important; }
}

/* ---------- Franja CTA (pegada al hero) ---------- */
/* --brote es el verde oliva de la paleta, apenas usado hasta ahora (solo en
   el outline de foco): color de detalle para esta franja, sin introducir
   un tono nuevo fuera de la paleta ya definida en :root. */

.franja-cta {
  background: var(--brote-oscuro);
  color: var(--papel);
  padding-block: clamp(2.25rem, 5.5vh, 3.5rem);
}

.franja-cta-contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}

.franja-cta-texto {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  max-width: 30em;
  margin: 0;
}

.franja-cta .btn {
  margin-top: 0;
  color: var(--papel);
  flex-shrink: 0;
}

.franja-cta .btn:hover { background: var(--papel); color: var(--tinta); }

/* ---------- Franja "Vinos que hablen..." (entre Bodega y Vinos) ---------- */
/* Div independiente en el HTML, hermano de las dos secciones que separa (no
   vive dentro de #vinos) -- incluso siendo la misma --brote-oscuro que
   .franja-cta, es una pieza propia: aquí la frase (docs/textos-landing.md,
   fragmento de la línea sobre "Me presento": "...elaborando vinos que
   hablen del lugar del que proceden") va en fuente script (--f-script =
   Pinyon Script, la misma que .script) en vez de display itálica. */
.vinos-banda {
  background: var(--brote-oscuro);
  padding-block: clamp(1rem, 2.5vw, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vinos-banda-frase {
  margin: 0;
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--papel);
  text-align: center;
}

/* ---------- Me presento (foto a pantalla completa + slider) ---------- */
/* Estado base (sin JS / reduced-motion): ya se ve la disposición final,
   texto a la izquierda y slider a la derecha — el "hueco" siempre existe en
   CSS puro, nunca depende de JS para mostrar el contenido. Con GSAP activo,
   landing.js anima .presento-slider desde left:0% (cubriendo toda la
   sección, como si aún fuese una única foto grande) hasta el left final de
   aquí abajo, ligado al scroll de entrada — mismo criterio que el parallax
   del hero. */

.seccion-presento {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--papel);
}

.presento-texto {
  position: relative;
  z-index: 1;
  width: min(44%, 32rem);
  /* La sección va a sangre (sin .contenedor), así que sin este margin-left
     el texto queda pegado al borde real de pantallas anchas, muy por dentro
     de donde cae el margen izquierdo del resto del sitio (el de .contenedor,
     que a partir de --ancho crece con la ventana). Esto replica ese mismo
     cálculo para alinear el texto con el margen estándar del sitio.
     Sin padding lateral a propósito: el offset va en margin (no en
     padding-left), así que quitarlo del todo no reduce el hueco de contenido
     del width fijo (min(44%, 32rem)) -- si el offset estuviera en
     padding-left, un valor grande sobre ese width fijo partiría el texto
     letra a letra.
     padding-block: colchón mínimo garantizado entre el contenido y los
     bordes de la sección — el centrado de flex reparte el sobrante, pero en
     ventanas de altura normal el sobrante era ~0 y el botón de reserva
     quedaba pegado al borde inferior; si el contenido + colchón supera el
     100svh, la sección simplemente crece (min-height). En móvil (<901px) lo
     pisa el padding propio de esa media query. */
  margin-left: max(0px, calc((100% - var(--ancho)) / 2));
  padding-block: clamp(3rem, 8svh, 6rem);
}

.presento-slider {
  position: absolute;
  z-index: 2; /* por encima de .presento-texto: mientras cubre toda la
                 sección debe TAPAR el texto, no flotar debajo de él */
  inset: 0;
  left: 56%; /* estado asentado por defecto */
  overflow: hidden;
  background: var(--volcan);
}

.presento-slider-slides { position: absolute; inset: 0; }

.presento-slide {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.presento-slide.active { opacity: 1; }

/* Chapa circular/píldora translúcida detrás de flechas y puntos: puestas
   directas sobre la foto (sin fondo propio) se camuflan en cuanto la zona
   de debajo es clara. Con la chapa siempre hay contraste, sea cual sea la
   foto activa. */

.presento-slider-flecha {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(13, 12, 10, 0.4);
  border: none; appearance: none;
  color: var(--papel);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.presento-slider-flecha:hover,
.presento-slider-flecha:focus-visible {
  opacity: 1;
  background: rgba(13, 12, 10, 0.62);
}
.presento-slider-prev { left: clamp(0.6rem, 2vw, 1.25rem); }
.presento-slider-next { right: clamp(0.6rem, 2vw, 1.25rem); }

.presento-slider-dots {
  position: absolute; z-index: 2;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(13, 12, 10, 0.4);
}

.presento-slider-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(242, 238, 229, 0.45); border: none; padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.presento-slider-dot.active { background: var(--papel); transform: scale(1.35); }
.presento-slider-dot:hover { background: var(--papel-2); }

@media (max-width: 900px) {
  .seccion-presento {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding-block: clamp(3rem, 8vh, 5rem);
  }
  .presento-texto { width: 100%; padding: 0 var(--pad-x) 2.5rem; }
  .presento-slider { position: relative; inset: auto; left: auto; width: 100%; height: 62vh; }
}

/* ---------- Ritmo de secciones ---------- */

.seccion {
  padding-block: clamp(6rem, 14vh, 10rem);
  position: relative;
}

.seccion-oscura {
  background: var(--brote-oscuro);
  color: var(--papel);
}

/* El encuadre por apartado (solo portada) vive en landing.js, no aquí: el
   scroll-snap nativo de CSS (probado antes) actúa como un imán demasiado
   fuerte —umbral de "proximity" muy amplio y snap casi instantáneo, sin
   control de duración— así que se sustituyó por un ajuste suave en JS que
   solo interviene muy cerca del borde de una sección y desliza despacio. */

/* ---------- Pantallas de PC de altura normal ---------- */
/* El diseño de referencia es una pantalla muy grande; en un portátil HD o un
   1080p con la barra del navegador (~650-950px útiles) los tamaños máximos
   de los clamp() (pensados en ancho, no en alto) desbordan la pantalla. Esta
   media query de ALTURA rebaja un punto la escala tipográfica y el aire
   vertical para que cada sección quepa en su pantalla. Solo desktop
   (min-width 901px): la versión móvil se resuelve aparte, con sus propias
   reglas de max-width. Los titulares con font-size propio más específico
   (.hero .titulo, .ficha-nombre, etc.) no se ven afectados. */
@media (min-width: 901px) and (max-height: 849px) {
  .seccion { padding-block: clamp(3.5rem, 10vh, 6rem); }
  .titulo { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
  .script { font-size: clamp(1.4rem, 2.4vw, 2rem); }
  .parrafo { margin-top: 1.2rem; }
  .btn { margin-top: 1.8rem; }
}

/* ---------- Paisaje: estrella de fondo ---------- */
/* Motivo decorativo grande, centrado detrás del bloque texto+imagen. El
   componente trae color:var(--tinta) por defecto (pensado para fondo papel,
   que es justo el de esta sección), así que no hace falta pisar el color:
   ya lee "en negro" sin más. #paisaje hereda position:relative de .seccion
   y overflow:hidden aquí la recorta -- a este tamaño se sale de los bordes
   de la sección y no debe filtrarse a las secciones vecinas.
   mask-image (con el prefijo -webkit- para Safari) es el difuminado: un
   radial-gradient de blanco opaco en el centro a transparente en el borde
   disuelve la propia estrella en el papel, sin canto duro donde termina el
   dibujo -- el mismo problema que resolvía la viñeta de .ficha-parcela pero
   aplicado como máscara en vez de como imagen de fondo. */
#paisaje {
  overflow: hidden;
}

/* ---------- Paisaje + Bodega (una sola .seccion, un único grid 2x2) ---------- */
/* Antes eran dos <section class="seccion"> seguidas, luego dos .dos-columnas
   independientes (una por apartado): con dos grids separados, aunque
   compartieran la misma plantilla de columnas declarada, no se garantizaba
   que el límite entre columna 1/2 cayera en el MISMO píxel exacto en ambas
   filas -- cada grid resuelve sus propios tracks por su cuenta, así que las
   esquinas quedaban cerca pero no llegaban a tocarse. La solución robusta es
   un único grid: mismos tracks de columna compartidos por construcción, no
   por coincidencia.
   .paisaje-bodega-grid es ese grid 2x2 (columnas 50/50, filas automáticas)
   con los 4 hijos en orden de documento (auto-placement normal): imagen
   paisaje (fila1/col1) · texto paisaje (fila1/col2) · texto bodega
   (fila2/col1) · imagen bodega (fila2/col2). gap:0 en las dos dimensiones es
   lo que hace que la esquina inferior-derecha de la imagen de paisaje y la
   superior-izquierda de la de bodega coincidan en el mismo punto -- CUALQUIER
   gap (aunque solo fuera column-gap) separaría columna 1 de columna 2 y ya
   no se tocarían. El aire que pierde el texto por el gap:0 se compensa con
   padding-inline en .pb-texto, no con gap (eso rompería el punto de contacto
   entre las dos imágenes, que están en columnas opuestas).
   Lleva .contenedor (probamos a sangre, sin padding lateral, y no cabía
   suficientemente bien -- se volvió a la versión con .contenedor): el
   position:relative + z-index:1 de aquí abajo sigue haciendo falta igual,
   para mantener el grid por encima de .paisaje-estrella (position:absolute,
   z-index:0, ver más abajo) dentro del contexto de apilamiento de #paisaje
   -- .contenedor en sí no está posicionado, así que no lo hace por su
   cuenta.
   padding-top/bottom en vez de padding-block: se quitó el padding-block que
   traía .seccion por defecto (quedaba pegado a las secciones vecinas por
   ambos lados) y se puso solo un margen superior moderado, sin nada abajo.
   aspect-ratio 3/2 en vez del 4/5 de .marco-img: con la columna de imagen
   más ancha que en un .dos-columnas normal, 4/5 quedaba demasiado alto;
   3/2 (se probó 16/9 antes, pero recortaba de más) es el punto intermedio
   que se quedó. */
.seccion-paisaje-bodega { padding-top: clamp(4rem, 8vh, 6rem); padding-bottom: 0; }

.paisaje-bodega-grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* 50/50 a propósito (antes 6fr/5fr): con columnas iguales, y el mismo
     aspect-ratio en las dos imágenes de abajo, paisaje y bodega quedan con
     las mismas dimensiones exactas -- antes el slider de paisaje (columna
     más ancha) salía más grande que el de bodega. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.paisaje-bodega-grid .marco-img img { aspect-ratio: 3 / 2; }

.paisaje-bodega-grid .pb-texto {
  position: relative; /* ancla del eco proyectado (.pb-eco) */
  padding-inline: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 3vh, 2.5rem);
}

/* ---------- Eco proyectado tras los textos de Paisaje/Bodega ---------- */
/* Copia desenfocada del mini-slider del apartado, desfasada +1 (la mantiene
   landing.js § mini-slider): anticipa borrosa la foto que va a llegar al
   slider principal, como una proyección que luego "viene al frente" y se
   enfoca. Muy tenue y disuelta en el papel por máscara radial (misma
   técnica que .ficha-fondo) para no pelear con la legibilidad del texto. */
.pb-eco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
}

.pb-eco .mini-slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
  filter: blur(14px) saturate(0.9);
  transform: scale(1.1); /* esconde los bordes lavados que genera el blur */
}

.pb-eco .mini-slide.active { opacity: 1; }

/* Los textos, por encima del eco: los hijos estáticos pintarían DEBAJO de
   un hermano posicionado — se les da posición y capa explícitas. */
.paisaje-bodega-grid .pb-texto > :not(.pb-eco) {
  position: relative;
  z-index: 1;
}

/* En pantallas de altura normal el grid 2x2 completo (~900px) no cabe: se ve
   siempre un apartado y medio, cortado. Aquí cada FILA del mismo grid pasa a
   ocupar una pantalla (100svh menos header y un poco de aire), con su
   contenido centrado en vertical: paisaje llena una pantalla, bodega la
   siguiente. Mismo markup, mismas columnas; solo se pierde el contacto de
   esquinas entre las dos imágenes, que era un gesto pensado para verse con
   las dos filas juntas. A partir de 1000px de alto se mantiene el diseño
   original compacto. */
@media (min-width: 901px) and (max-height: 999px) {
  .seccion-paisaje-bodega { padding-top: clamp(1.5rem, 4vh, 3rem); }
  .paisaje-bodega-grid { grid-auto-rows: minmax(calc(100svh - 8rem), auto); }
}

@media (max-width: 900px) {
  .paisaje-bodega-grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vh, 3rem);
  }
  .paisaje-bodega-grid .pb-texto {
    padding-inline: 0;
  }
  /* Apilado en orden de documento quedaba imagen → texto → TEXTO → imagen
     (los dos textos seguidos, y la foto de bodega descolgada al final).
     order recompone el ritmo con cada apartado presentando primero su
     texto y debajo su slider: texto paisaje → slider paisaje → texto
     bodega → slider bodega. (Hijos del grid en orden de documento:
     1=slider paisaje, 2=texto paisaje, 3=texto bodega, 4=slider bodega —
     el 2 conserva order:0 y encabeza.) */
  .paisaje-bodega-grid > :nth-child(1) { order: 1; } /* slider paisaje, tras su texto */
  .paisaje-bodega-grid > :nth-child(3) { order: 2; } /* texto bodega */
  .paisaje-bodega-grid > :nth-child(4) { order: 3; } /* slider bodega */
  /* El eco proyectado es un efecto del hueco libre de escritorio: apilado
     en columna no hay hueco y solo ensuciaría el texto. */
  .pb-eco { display: none; }
}

.paisaje-estrella {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  --estrella-tam: clamp(34rem, 60vw, 60rem);
  transform: translate(-50%, -50%);
  opacity: 0.15;
  pointer-events: none;
  mask-image: radial-gradient(circle, #000 0%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 30%, transparent 70%);
}

/* Bloque de dos columnas texto + imagen */

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.dos-columnas.invertido { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

@media (max-width: 900px) {
  .dos-columnas,
  .dos-columnas.invertido { grid-template-columns: 1fr; }
}

.marco-img {
  overflow: hidden;
}

.marco-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.marco-img.apaisado img { aspect-ratio: 4 / 3; }

/* ---------- Mini-slider automático (componente reutilizable) ---------- */
/* marco-img con varias fotos en vez de una sola, encadenadas en crossfade +
   zoom lento (mosaico-kb-zoom, la misma @keyframes que usa el mosaico —
   reutilizada tal cual en vez de duplicarla). 100% automático, SIN flechas
   ni puntos: es puramente decorativo (landing.js solo cambia la clase
   .active por temporizador, ver § Mini-slider automático), así que no hace
   falta ninguna superficie de interacción — genérico a propósito para poder
   usarse en varios sitios (paisaje, bodega...) sin duplicar CSS por cada
   uno. */
.mini-slider { position: relative; }

.mini-slider .mini-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}

/* La activa vuelve al flujo normal (position:relative anula los
   top/right/bottom/left heredados de inset:0 -- en relative, todos a 0 no
   desplazan nada): así es la única que "cuenta" para la altura de
   .mini-slider, igual que el .marco-img de una sola foto de siempre, cuyo
   alto lo pone su propia img (width:100% + aspect-ratio, regla de arriba).
   Las demás, absolutas y en opacity:0, quedan apiladas encima. .marco-img
   ya tiene overflow:hidden, así que el zoom no se sale del marco. */
.mini-slider .mini-slide.active {
  position: relative;
  opacity: 1;
  animation: mosaico-kb-zoom 9s ease-in-out infinite alternate;
}

/* ---------- Cita a pantalla completa (historia) ---------- */

/* ---------- Historia (línea del tiempo de tres hitos) ---------- */
/* Bloque de color plano (--brote-oscuro, el mismo verde oscuro de
   #visitas/footer/franja CTA, para que todas las secciones "oscuras" del
   sitio compartan un único acento). El relato se presenta como cronología
   horizontal —patrón de la página de historia de El Grifo, la referencia de
   dirección de arte del proyecto—: cabecera centrada y debajo tres hitos
   (foto → línea con nodo → era en caligráfica → frase), donde la era va en
   Pinyon Script como anotación manuscrita sobre la línea. La banda conserva
   exactamente las dimensiones del rediseño anterior (min-height acotado +
   mismo padding), así que las secciones vecinas no se mueven. */
.panel-historia {
  position: relative;
  background: var(--brote-oscuro);
  color: var(--papel);
  padding-block: clamp(3rem, 7vh, 5rem);
  /* centra el contenido cuando la pantalla es más alta que la sección; el
     tope en rem evita un desierto de verde en monitores muy grandes */
  min-height: min(88svh, 54rem);
  display: flex;
  align-items: center;
}

.panel-historia > .contenedor { width: 100%; }

.panel-historia-cabecera {
  text-align: center;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

/* Acordeón: las fotos van a sangre entre sí (gap 0, dominantes) y al pasar
   el cursor por un hito su columna se EXPANDE mientras las otras dos se
   contraen (flex-grow animado; con basis 0 el reparto es solo por grow:
   1.6 vs 0.78×2 ≈ 51% / 24.5% / 24.5%). La foto tiene ALTURA FIJA (no
   aspect-ratio): al variar solo la anchura, object-fit:cover revela más
   imagen sin que la fila salte en vertical. La era y el texto llevan
   padding-inline propio para respirar aunque las fotos se toquen. */
.historia-hitos {
  --hitos-gap: 0px;
  display: flex;
  column-gap: var(--hitos-gap);
  /* contenedor de container queries: los textos de los hitos fijan su ancho
     en cqw (½% de ESTA banda, que no cambia durante el acordeón) en vez de
     en % de su columna — así el hover no les recoloca los saltos de línea */
  container-type: inline-size;
}

.hito {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.65s cubic-bezier(.22, 1, .36, 1);
}

.historia-hitos:hover > .hito { flex-grow: 0.78; }

.historia-hitos > .hito:hover,
.historia-hitos > .hito:focus-within { flex-grow: 1.6; }

/* Tres capas de foto, cada una con su transform (si compartieran elemento,
   los estilos inline de GSAP pisarían los de CSS — mismo reparto que
   .mosaico-tile/.mosaico-tile-btn):
   .hito-foto  → tamaño (aspect-ratio) + reveal de entrada [data-reveal].
                 SIN overflow:hidden: la caja escalada debe poder desbordar.
   .hito-foto-caja → el hover crece la tarjeta ENTERA (scale, tamaño real,
                 desborda su hueco del grid), no un zoom recortado dentro
                 del marco. Aquí viven overflow/radius/sombra.
   .hito-foto-media → parallax GSAP (data-parallax="12" en el blade). */
.hito-foto {
  position: relative;
  /* altura FIJA, no aspect-ratio: en el acordeón solo varía la anchura */
  height: clamp(230px, 34svh, 340px);
}

.hito-foto-caja {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateZ(0); /* capa GPU fija, ver nota del mosaico */
  transition: box-shadow 0.55s ease;
}

/* Overscan vertical del 16%: colchón para el recorrido del parallax
   (yPercent ±12 sobre una capa al 132% ≈ ±15.8% del marco) — mismo criterio
   que el colchón de .hero-media. */
.hito-foto-media {
  position: absolute;
  inset: -16% 0;
}

.hito-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.55s ease;
}

/* El hover se dispara desde todo el hito (foto o texto) y también con foco
   de teclado. La expansión de la columna la hace el flex-grow del acordeón
   (ver .historia-hitos); aquí solo el realce de la foto activa. */
.hito { position: relative; }
.hito:hover { z-index: 2; }

.hito:hover .hito-foto-caja,
.hito:focus-within .hito-foto-caja {
  box-shadow: 0 24px 48px rgba(13, 12, 10, 0.45);
}

.hito:hover .hito-foto img,
.hito:focus-within .hito-foto img { filter: saturate(1.08) brightness(1.04); }

/* La línea corre continua bajo las tres fotos: cada tramo desborda medio
   gap por cada lado (margin-inline negativo) y empalma con el del hito
   vecino en mitad del hueco. En los extremos se interna en el padding del
   contenedor, que siempre es mayor que medio gap — no llega a desbordar. */
.hito-linea {
  position: relative;
  height: 1px;
  background: var(--linea-clara);
  margin-block: clamp(1.1rem, 2.5vh, 1.6rem) 0;
  margin-inline: calc(var(--hitos-gap) / -2);
}

.hito-nodo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--papel);
  background: var(--brote-oscuro);
  /* halo del color del fondo: "recorta" la línea alrededor del nodo */
  box-shadow: 0 0 0 5px var(--brote-oscuro);
}

/* El hito de las erupciones (el central) es el punto de inflexión del
   relato: su nodo va relleno. */
.hito:nth-child(2) .hito-nodo { background: var(--papel); }

.hito-era {
  margin-top: 0.9rem;
  text-align: center;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  white-space: nowrap; /* una sola línea siempre: inmune al acordeón */
}

.hito-texto {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--humo-claro);
  max-width: 26em;
  /* Ancho FIJO respecto a la banda (cqw), no a la columna: 24cqw cabe
     tanto en la columna en reposo (33.3%) como en la contraída del
     acordeón (~24.7%), así los saltos de línea no cambian nunca con el
     hover — el bloque solo se re-centra bajo su foto. Navegadores sin
     container queries ignoran la línea y conservan el max-width. */
  width: 24cqw;
  margin-inline: auto;
}

/* Escritorio de altura normal: la cronología completa (cabecera + hitos)
   debe caber en una pantalla — fotos algo más panorámicas y menos aire. */
@media (min-width: 901px) and (max-height: 849px) {
  .panel-historia { padding-block: 2.5rem; }
  .panel-historia-cabecera { margin-bottom: 2rem; }
  .hito-foto { height: clamp(190px, 30svh, 260px); }
}

/* Móvil: la cronología se recorre con el pulgar — tira horizontal con
   scroll-snap (mismo patrón que .rel-pista del blog y la colección de
   vinos), a sangre sobre el padding del contenedor y con el siguiente hito
   asomando. La línea sigue empalmando entre tarjetas gracias al
   margin-inline negativo de .hito-linea: la cronología continúa fuera de
   pantalla, reforzando el gesto de "avanzar en el tiempo". */
@media (max-width: 700px) {
  .panel-historia { min-height: 0; }
  .historia-hitos {
    --hitos-gap: 1.25rem;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
  }
  .historia-hitos::-webkit-scrollbar { display: none; }
  .hito {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
  /* En la tira vuelve el alto por proporción y el texto a ancho natural
     (el acordeón y su ancho fijo en cqw no existen aquí) */
  .hito-foto { height: auto; aspect-ratio: 4 / 3; }
  .hito-texto { width: auto; }
}

/* ---------- Mosaico interactivo (componente reutilizable) ---------- */
/* Grid de fotos con una destacada (2x2) y el resto a 1x1: grid-auto-flow:
   dense recoloca automáticamente todas las piezas alrededor de la que sea
   .mosaico-tile--grande, así que solo hay que mover esa clase de una tile a
   otra. Cada .mosaico-tile ya usa [data-reveal] (misma máscara de entrada
   que el resto del sitio) para la aparición inicial; el reflow al clicar
   una foto lo anima landing.js con la técnica FLIP (mide antes/después y
   interpola con transform), sin depender de GSAP. */

.mosaico-fotos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(160px, 19vw, 260px);
  grid-auto-flow: dense;
  gap: clamp(0.6rem, 1.5vw, 1.25rem);
  transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}

/* El grid entero "respira" un poco al entrar el cursor: es el primer aviso,
   antes incluso de que una foto concreta reaccione */
.mosaico-fotos:hover { transform: scale(1.006); }

.mosaico-tile { grid-column: span 1; grid-row: span 1; }
/* order:-1 fuerza a que la destacada sea siempre la primera para el
   algoritmo de auto-colocación, sin importar su posición real en el HTML:
   si no, cuando la destacada es de las últimas del array, dense packing
   coloca antes las 1x1 (llenando toda la fila) y la 2x2 se queda sin hueco
   y cae a filas nuevas, alargando toda la sección hacia abajo. */
.mosaico-tile--grande { grid-column: span 2; grid-row: span 2; order: -1; }

.mosaico-tile-btn {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border: none; padding: 0; margin: 0;
  appearance: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  background: var(--volcan);
  box-shadow: 0 10px 26px rgba(13, 12, 10, 0.16);
  /* translateZ(0) fuerza una capa GPU fija: sin esto, Chromium repinta el
     recorte redondeado en una capa distinta a la de la imagen animada y deja
     una costura fina en el borde durante la transición (bug conocido de
     border-radius + overflow:hidden + transform). Se mantiene en TODOS los
     estados (reposo/hover/grande) para que la capa nunca se cree/destruya
     a media animación. */
  transform: scale(1) translateZ(0);
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), box-shadow 0.5s ease;
}

/* Pop inmediato al entrar el cursor (CSS puro, sin esperar a los 120ms de
   landing.js): la tile se levanta del grid antes de que llegue el reflow
   grande, dos capas de reacción en vez de una sola */
.mosaico-tile-btn:hover,
.mosaico-tile-btn:focus-visible {
  transform: scale(1.045) translateZ(0);
  box-shadow: 0 22px 44px rgba(13, 12, 10, 0.32);
  z-index: 3;
}

.mosaico-tile-btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.94) contrast(1.02);
  transform: scale(1) translateZ(0);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}

.mosaico-tile-btn:hover img,
.mosaico-tile-btn:focus-visible img { transform: scale(1.05) translateZ(0); }

/* La destacada no hace el mismo pop (ya es la grande): en vez de eso respira
   sola con un Ken Burns lento, el mismo lenguaje del hero */
.mosaico-tile--grande .mosaico-tile-btn { cursor: default; }
.mosaico-tile--grande .mosaico-tile-btn:hover,
.mosaico-tile--grande .mosaico-tile-btn:focus-visible {
  transform: scale(1) translateZ(0);
  box-shadow: 0 26px 60px rgba(13, 12, 10, 0.3);
}
.mosaico-tile--grande .mosaico-tile-btn:hover img { transform: scale(1) translateZ(0); }
.mosaico-tile--grande .mosaico-tile-btn img {
  animation: mosaico-kb-zoom 10s ease-in-out infinite alternate;
}

@keyframes mosaico-kb-zoom {
  from { transform: scale(1) translateZ(0); }
  to   { transform: scale(1.08) translateZ(0); }
}

.mosaico-tile-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,12,10,0) 55%, rgba(13,12,10,.35) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.mosaico-tile-btn:hover::after,
.mosaico-tile-btn:focus-visible::after { opacity: 1; }

@media (max-width: 900px) {
  .mosaico-fotos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(180px, 34vw, 260px); }
}

@media (max-width: 560px) {
  .mosaico-fotos { grid-template-columns: 1fr; grid-auto-rows: 60vw; }
  .mosaico-tile--grande { grid-column: span 1; }
}

/* ---------- Estrella-brújula (componente reutilizable) ---------- */
/* SVG inline (bodega.partials.estrella-brujula, puerto de
   public/estrella-brujula.svg) usado como motivo decorativo repetible: una
   rosa de los vientos con las facetas en relleno alterno tinta/transparente
   (sombreado a lápiz) y rayos finos hacia el borde. Todo el dibujo va en
   currentColor, así que toma el color de quien lo contenga — el valor por
   defecto es --tinta (papel de fondo); para colocarla sobre una sección
   oscura basta con `color: var(--papel)` en ese selector. El tamaño se fija
   con --estrella-tam por selector según dónde se use cada instancia (no hay
   prop de tamaño en el partial). Gira sola, muy despacio — puramente
   decorativa, aria-hidden — y respeta prefers-reduced-motion como el resto
   del sitio. */

.estrella-brujula {
  display: block;
  width: var(--estrella-tam, 5rem);
  height: auto;
  color: var(--tinta);
  transform-origin: center;
}

.estrella-brujula .eb-rayos line {
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.7;
}

.estrella-brujula .eb-faceta-llena { fill: currentColor; }
.estrella-brujula .eb-faceta-vacia { fill: none; }
.estrella-brujula .eb-faceta-llena,
.estrella-brujula .eb-faceta-vacia {
  stroke: currentColor;
  stroke-width: 0.6;
}

.estrella-brujula .eb-contorno {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .estrella-brujula { animation: estrella-girar 160s linear infinite; }
}

@keyframes estrella-girar { to { transform: rotate(360deg); } }

/* ---------- Fichas de parcela (elemento firma) ---------- */
/* Un vino por pantalla, ancha, con la ilustración de parcela como fondo sutil
   y una animación escalonada (numero → eyebrow → título → detalle → botella)
   que se revela a medida que la fila entra en el viewport. */

.fichas-intro { text-align: center; }
.fichas-intro .titulo { color: var(--brote-oscuro); }

#vinos.seccion {
  /* padding-bottom venía a 0 de cuando la sección terminaba justo en la
     fila de botellas; ahora termina en .coleccion-vinos-cta (texto + botón)
     y con 0 el botón "Ver todos los vinos" tocaba la siguiente sección --
     vuelve al padding-block normal de .seccion heredándolo (sin
     sobrescribirlo aquí). */
  /* z-index:0 abre contexto de apilamiento propio, igual que .panel-historia
     -- .vinos-fondo (de fondo, z-index:0) y los .contenedor (de contenido,
     z-index:1 más abajo) se ordenan sin z-index negativo. */
  position: relative;
  z-index: 0;
  overflow: hidden;
}

#vinos.seccion .contenedor { position: relative; z-index: 1; }

/* Mapa antiguo de Lanzarote como textura de fondo (mismo derivado que las
   ilustraciones de parcela, opt/ilustracion-maho.jpg). A diferencia de
   .panel-historia (fondo oscuro, donde mix-blend-mode:multiply apenas se
   veía y hubo que quitar el blend-mode del todo, ver ese comentario), aquí
   #vinos tiene el fondo papel claro de siempre -- justo el caso para el que
   sirve multiply: el blanco del JPEG se funde con el papel y desaparece,
   dejando solo el trazado del mapa visible (misma técnica que .ficha-fondo
   en las fichas de parcela). */
/* Cortina que se desliza a la derecha y descubre el contenido, disparo
   único al entrar en el viewport (landing.js). Por defecto en CSS ya está
   fuera de vista (translateX(100%) = desplazada su propio ancho hacia la
   derecha, y #vinos tiene overflow:hidden así que ni siquiera asoma) --
   así, sin JS/GSAP, el contenido de "Los vinos" nunca queda tapado: es
   landing.js quien la trae a xPercent:0 (tapando) al arrancar el timeline y
   la vuelve a mandar a xPercent:100 al hacer scroll, no la posición CSS de
   reposo. z-index:3, por encima de .vinos-fondo (0) y de .contenedor (1). */
.vinos-cortina {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--brote-oscuro);
  transform: translateX(100%);
  pointer-events: none;
}

.vinos-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/img/landing/opt/ilustracion-maho.jpg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Colección de vinos (vista general, todas las botellas) ---------- */
/* Resumen en home: cada botella enlaza a su ficha de detalle (.ficha-parcela)
   en /vinos, con ancla al vino concreto (id="vino-{slug}"). Las fichas viven
   en resources/views/bodega/vinos.blade.php, no en esta página.
   Sin border-top (era la "barra" que partía la sección en dos bloques) y con
   margin-top negativo: las botellas suben hasta tocar/solapar un poco el
   título de arriba, en vez de quedar en un bloque claramente aparte. Encima
   lleva data-parallax (blade) para que ese contacto varíe con el scroll —
   misma mecánica que .hero-media, reutilizada tal cual. */
.coleccion-vinos {
  margin-top: clamp(-2.5rem, -3vh, -1.5rem);
  padding-top: 0;
  padding-bottom: clamp(1.5rem, 4vh, 3.5rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.4rem, 1vw, 0.85rem);
}

.coleccion-vino {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.coleccion-vino-botella-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding-bottom: 0.6rem; /* desfase a propósito frente al bottom:0 de la sombra, ver ficha-sombra */
}

.coleccion-vino-sombra {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(60%, 110px);
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 12, 6, 0.55), transparent 75%);
  filter: blur(2px);
  pointer-events: none;
}

.coleccion-vino-botella {
  position: relative;
  z-index: 1;
  /* limitada también por la ALTURA del viewport (36svh): la sección entera
     (título + botellas + texto de cierre) debe caber en una pantalla, y con
     el tope solo en px/vw las botellas se comían el sitio del texto en
     portátiles HD. */
  height: clamp(170px, min(24vw, 36svh), 320px);
  width: auto;
  transition: transform 0.4s ease;
}

.coleccion-vino:hover .coleccion-vino-botella,
.coleccion-vino:focus-visible .coleccion-vino-botella { transform: translateY(-6px); }

.coleccion-vino-numero {
  margin-top: 1.1rem;
  font-family: var(--f-display);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--humo);
}

.coleccion-vino-nombre {
  margin-top: 0.3rem;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 470;
}

/* Texto + CTA debajo de las botellas (antes iba arriba, junto al título) */
.coleccion-vinos-cta {
  text-align: center;
  margin-top: 0;
}

.coleccion-vinos-cta .parrafo {
  max-width: 42em;
  margin-inline: auto;
  font-weight: 500;
}

/* Móvil/tablet: la rejilla partía las 5 botellas en filas (con una huérfana
   al final) y el margin-top negativo —pensado para que las botellas rocen el
   título en desktop— las montaba literalmente encima del titular. Aquí la
   colección pasa a ser una tira horizontal deslizable con scroll-snap
   (mismo patrón que .rel-pista del blog y las fotos de Historia en móvil),
   con margen positivo y la siguiente botella asomando. 900px, no 860: en
   línea con el resto de breakpoints móviles del sitio — entre 861 y 900 la
   rejilla vieja seguía solapando el título por el margen negativo. */
@media (max-width: 900px) {
  .coleccion-vinos {
    margin-top: 2rem; /* también colchón para el parallax (±8%) de data-parallax */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: clamp(1rem, 3vw, 2rem);
  }
  .coleccion-vinos::-webkit-scrollbar { display: none; }
  .coleccion-vino {
    /* celda estrecha a propósito: la botella es un PNG muy esbelto y con
       celdas anchas la tercera quedaba fuera de vista sin asomar nada */
    flex: 0 0 clamp(7rem, 30vw, 11rem);
    scroll-snap-align: center;
  }
  /* En móvil el mínimo de 170px dejaba las botellas enanas frente al titular
     y de paso hace hueco a que asome la siguiente: se fija por svh. */
  .coleccion-vino-botella { height: clamp(200px, 28svh, 260px); }
}

/* ---------- Indicador de scroll lateral de tiras (móvil) ---------- */
/* Aviso de que la tira se desplaza: "Desliza" en caligráfica (el registro
   de anotación manuscrita del sitio) con una flecha que late, y una barra
   de progreso de 2px —el mismo lenguaje de línea fina de la cronología de
   Historia— cuyo pulgar refleja posición y proporción visible, como un
   scrollbar dibujado. landing.js lo actualiza y lo oculta si la tira no
   desborda; la palabra se desvanece tras el primer gesto (.tira-usada).
   Genérico: cualquier tira con scroll puede emparejarse vía
   data-tira-target. Solo existe en móvil. */
.tira-indicador { display: none; }

@media (max-width: 900px) {
  /* Centrado: palabra + barra como grupo centrado, con la barra a ancho
     fijo (no flex:1 a todo el ancho). El hueco entre ambos va en el
     margin-right de la palabra (no en gap del contenedor) para poder
     colapsarlo junto con ella: al desvanecerse tras el primer gesto
     (.tira-usada) también cierra su max-width, y la barra desliza sola
     hasta quedar exactamente centrada. */
  .tira-indicador {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.4rem;
  }

  .tira-indicador-desliza {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    color: var(--humo);
    white-space: nowrap;
    overflow: hidden;
    max-width: 12em;
    margin-right: 1rem;
    transition: opacity 0.6s ease, max-width 0.6s ease, margin-right 0.6s ease;
  }

  .tira-indicador-desliza::after {
    content: "\2192";
    font-family: var(--f-texto);
    font-size: 0.95rem;
    animation: tira-nudge 1.7s ease-in-out infinite;
  }

  .tira-indicador.tira-usada .tira-indicador-desliza {
    opacity: 0;
    max-width: 0;
    margin-right: 0;
  }

  .tira-indicador-barra {
    position: relative;
    flex: 0 1 min(13rem, 52vw);
    height: 2px;
    border-radius: 999px;
    background: var(--linea);
  }

  .tira-indicador-progreso {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40%;
    border-radius: 999px;
    background: var(--tinta);
    transition: left 0.12s linear, width 0.2s ease;
  }

  /* Variante para secciones oscuras (Historia): mismos papeles, tinta
     invertida — palabra en humo claro, carril translúcido, pulgar papel. */
  .tira-indicador-clara .tira-indicador-desliza { color: var(--humo-claro); }
  .tira-indicador-clara .tira-indicador-barra { background: var(--linea-clara); }
  .tira-indicador-clara .tira-indicador-progreso { background: var(--papel); }
}

@keyframes tira-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* Altura normal de escritorio: el encuadre por apartado deja el título a
   ~72px del borde (offset del header), así que el presupuesto real es aún
   menor que el viewport — botellas y padding se aprietan otro punto para
   que el texto de cierre entre en la misma pantalla que el título. Va
   DESPUÉS de las reglas base de la colección: a igual especificidad, es el
   orden en el archivo lo que permite que gane. */
@media (min-width: 901px) and (max-height: 849px) {
  #vinos.seccion { padding-block: clamp(2.5rem, 6vh, 4rem); }
  .coleccion-vino-botella { height: clamp(160px, min(24vw, 30svh), 320px); }
  .coleccion-vino-numero { margin-top: 0.7rem; }
  .coleccion-vinos-cta .parrafo { max-width: 52em; }
}

.ficha-parcela {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--linea);
  overflow: hidden;
}

.ficha-fondo {
  /* centrada en la botella, desbordando lo justo para difuminarse sin corte
     duro — el límite real es .ficha-parcela (overflow:hidden en la fila
     completa), no esta columna. Tamaño reducido a propósito (antes
     -90%/-160%) para que quede como una mancha discreta detrás de la
     botella, no como un fondo que domine toda la fila.
     El desvanecido radial es lo que evita el corte: se disuelve en el papel
     antes de llegar a ningún borde duro. */
  position: absolute;
  inset: -35% -60%;
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply; /* la tinta se funde con el papel: el blanco del JPEG desaparece */
  opacity: 0.32;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 62%);
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 62%);
  pointer-events: none;
}

.ficha-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

/* Contenedor de la ficha dual de Maho: mismo ancho/padding que .ficha-grid,
   pero sin su grid de 2 columnas — dentro va la cabecera centrada y luego
   .ficha-maho-variantes con su propio grid de 3. */
.ficha-grid-maho {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.ficha-derecha .ficha-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.ficha-derecha .ficha-botella-col { order: 2; }
.ficha-derecha .ficha-texto-col { order: 1; }

.ficha-botella-col {
  /* base común: todo (sombras + botella) se alinea al mismo suelo, en vez de
     centrarse — así "bottom" significa lo mismo para todos sin necesidad de
     pseudo-elementos ni trucos de z-index. z-index:0 le da su propio
     contexto de apilamiento — contiene aquí el fondo/sombras/botella para
     que no puedan "escaparse" hacia .ficha-texto-col ni a .ficha-grid.
     Sin overflow:hidden a propósito: el fondo (.ficha-fondo) necesita poder
     desbordar esta columna para verse grande; lo contiene .ficha-parcela. */
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-block: 1rem;
}

.ficha-sombra {
  /* elementos reales (no pseudo-elementos): al no usar z-index negativo no
     hay riesgo de que "se escapen" a un contexto de apilamiento ajeno — el
     orden del DOM ya garantiza que queden detrás de la botella.
     bottom:0 a propósito — NO el mismo valor que el padding-block de la
     columna: la botella termina en bottom:1rem (por el padding), así que
     bottom:0 dejar la sombra 1rem más abajo es lo que la hace asomar en vez
     de quedar tapada entera detrás. */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.ficha-sombra-ao {
  /* oclusión ambiental: sombra de contacto, pegada al contorno de la base —
     pequeña, oscura, casi sin desenfoque */
  width: min(58%, 210px);
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(15, 12, 6, 0.72), transparent 75%);
  filter: blur(2.5px);
}

.ficha-sombra-proyectada {
  /* sombra proyectada: más ancha, difusa, la que da volumen debajo */
  width: min(88%, 320px);
  height: 46px;
  background: radial-gradient(ellipse at center, rgba(25, 23, 18, 0.5), transparent 72%);
  filter: blur(11px);
}

.ficha-botella {
  position: relative;
  z-index: 2;
  height: clamp(400px, 66svh, 680px);
  width: auto;
}

.ficha-numero {
  display: block;
  font-family: var(--f-display);
  font-size: 0.9rem;
  letter-spacing: 0.34em;
  color: var(--humo);
  margin-bottom: 1.2rem;
}

.ficha-zona {
  color: var(--humo);
  margin-bottom: 0.5rem;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.ficha-nombre {
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 7.5vw, 7rem);
  font-weight: 470;
  line-height: 0.96;
}

/* Maho: como en la contraetiqueta, el nombre va en caligráfica y en
   minúscula en vez de con la display de las demás fichas — line-height algo
   mayor para no recortar los trazos del script. */
.ficha-nombre-script {
  font-family: var(--f-script);
  font-weight: 400;
  line-height: 1.1;
  text-transform: lowercase;
}

.ficha-detalle { margin-top: 1.5rem; }

.ficha-varietal {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo);
}

.ficha-frase {
  margin-top: 0.9rem;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--humo);
  max-width: 32em;
}

.ficha-qr-bloque { margin-top: 1.1rem; }

.ficha-qr-caption {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--humo);
}

.ficha-qr {
  display: inline-block;
  width: 84px;
  height: 84px;
}

/* Maho: único vino con dos colores (blanco y tinto), así que en vez de la
   ficha estándar de dos columnas usa tres — texto tinto / botella / texto
   blanco, tal cual se leen las dos contraetiquetas — con una cabecera
   centrada arriba compartida por ambas variantes. */
.ficha-maho-cabecera {
  text-align: center;
  margin-bottom: clamp(0.5rem, 2vw, 1.5rem);
}

.ficha-maho-variantes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* max-width + text-align: right/left en vez de center — el texto "apunta"
   hacia la botella central en vez de quedar suelto en su columna; el QR
   (inline-block) hereda la misma alineación de su párrafo. */
.ficha-maho-variante { max-width: 30em; }
.ficha-maho-variante:first-child { justify-self: end; text-align: right; }
.ficha-maho-variante:last-child { justify-self: start; text-align: left; }

@media (max-width: 860px) {
  .ficha-parcela { min-height: auto; padding-block: clamp(3rem, 8vh, 4.5rem); }
  .ficha-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 2rem;
  }
  .ficha-botella-col,
  .ficha-derecha .ficha-botella-col { order: 1 !important; }
  .ficha-texto-col,
  .ficha-derecha .ficha-texto-col { order: 2 !important; }
  .ficha-botella { height: clamp(280px, 46vh, 420px); }
  .ficha-fondo { opacity: 0.32; }
  .ficha-frase { margin-inline: auto; }

  .ficha-maho-variantes { grid-template-columns: 1fr; gap: 2.5rem; }
  .ficha-maho-variante,
  .ficha-maho-variante:first-child,
  .ficha-maho-variante:last-child {
    max-width: none;
    text-align: center;
    justify-self: center;
  }
}

/* ---------- Visitas / experiencias ---------- */

.visitas-cabecera { max-width: 40em; }

.experiencias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.5rem;
  margin-top: clamp(3rem, 7vh, 5rem);
}

.experiencia {
  border: 1px solid var(--linea-clara);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  min-height: 340px;
  transition: border-color 0.3s ease;
}

.experiencia:hover { border-color: rgba(242, 238, 229, 0.55); }

.experiencia-nombre {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 470;
  line-height: 1.1;
}

.experiencia-detalle {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo-claro);
}

.experiencia-precio {
  margin-top: auto;
  padding-top: 2.5rem;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1;
}

.experiencia-precio small {
  display: block;
  font-family: var(--f-texto);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo-claro);
  margin-top: 0.5rem;
}

.experiencia .btn {
  align-self: center;
  font-family: var(--f-script);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- Cabecera centrada de sección (título + parrafo cortos) ---------- */

.seccion-cabecera { text-align: center; }
.seccion-cabecera .parrafo { margin-inline: auto; }

/* ---------- FAQ ---------- */

.faq-lista {
  max-width: 46em;
  margin: clamp(3rem, 7vh, 5rem) auto 0;
  border-top: 1px solid var(--linea);
}

.faq-item { border-bottom: 1px solid var(--linea); }

.faq-pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 470;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq-pregunta::-webkit-details-marker { display: none; }

.faq-icono {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
}

.faq-icono::before,
.faq-icono::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: opacity 0.25s ease;
}

.faq-icono::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.faq-icono::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-item[open] .faq-icono::after { opacity: 0; }

.faq-respuesta { padding: 0 2.5rem 1.6rem 0; }
.faq-respuesta .parrafo { margin: 0; }

/* ---------- Footer ---------- */

.footer {
  background: var(--brote-oscuro);
  color: var(--papel);
  padding: clamp(4rem, 9vh, 7rem) 0 2.5rem;
  border-top: 1px solid var(--linea-clara);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
}

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

.footer-firma {
  font-family: var(--f-script);
  font-size: 3.2rem;
  line-height: 1;
}

.footer-sub {
  margin-top: 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--humo-claro);
}

.footer h4 {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--humo-claro);
  margin-bottom: 1.2rem;
}

.footer p, .footer a {
  font-size: 0.92rem;
  color: rgba(242, 238, 229, 0.78);
  text-decoration: none;
  line-height: 2;
}

.footer a:hover { color: var(--papel); }

.footer-legal {
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--linea-clara);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(242, 238, 229, 0.45);
  text-align: center;
}

/* ============================================================
   BLOG — mismas piezas, registro editorial
   ============================================================ */

/* Cabecera de página interior (sin hero oscuro) */

.pagina-cabecera {
  padding: clamp(9rem, 18vh, 12rem) 0 clamp(3rem, 6vh, 4.5rem);
  border-bottom: 1px solid var(--linea);
}

/* Entrada destacada (la más reciente) */

.destacado {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vh, 5rem);
  border-bottom: 1px solid var(--linea);
}

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

.destacado-img {
  overflow: hidden;
}

.destacado-img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.destacado:hover .destacado-img img { transform: scale(1.03); }

.destacado-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 470;
  line-height: 1.08;
  margin-top: 0.6rem;
}

.destacado-titulo a { text-decoration: none; }

/* Rejilla de entradas */

.rejilla-blog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3rem, 6vh, 4.5rem) clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(3rem, 7vh, 5rem);
}

@media (max-width: 1000px) { .rejilla-blog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rejilla-blog { grid-template-columns: 1fr; } }

.entrada-img {
  overflow: hidden;
  margin-bottom: 1.4rem;
}

.entrada-img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.entrada:hover .entrada-img img { transform: scale(1.04); }

.entrada-fecha {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--humo);
}

.entrada-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 470;
  line-height: 1.15;
  margin-top: 0.6rem;
}

.entrada-titulo a { text-decoration: none; }
.entrada-titulo a:hover { font-style: italic; }

.entrada-excerpt {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: var(--humo);
  max-width: 32em;
}

.blog-vacio {
  padding-block: clamp(5rem, 12vh, 8rem);
  text-align: center;
}

/* ---------- Artículo ---------- */

.articulo-hero {
  position: relative;
  min-height: 72svh;
  display: flex;
  align-items: flex-end;
  color: var(--papel);
  background: var(--volcan);
  overflow: hidden;
}

.articulo-hero-fondo {
  position: absolute;
  inset: -10% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.articulo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 12, 10, 0.82) 0%, rgba(13, 12, 10, 0.25) 55%, rgba(13, 12, 10, 0.35) 100%);
}

.articulo-hero .contenedor {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(3rem, 7vh, 5rem);
}

.articulo-hero .titulo,
.pagina-cabecera .titulo { max-width: 16em; }

.articulo-cuerpo {
  max-width: 46em;
  margin-inline: auto;
  padding: clamp(4rem, 9vh, 6.5rem) var(--pad-x) clamp(4rem, 8vh, 6rem);
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  line-height: 1.75;
}

.articulo-intro {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.55;
  color: var(--humo);
}

.articulo-cuerpo h2 {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 470;
  line-height: 1.12;
  margin: 2.8em 0 0.9em;
  text-wrap: balance;
}

.articulo-cuerpo section:first-of-type h2 { margin-top: 1.8em; }

.articulo-cuerpo p { margin-bottom: 1.4em; }

.articulo-cuerpo figure {
  margin: 2.5rem calc(-1 * clamp(0rem, 6vw, 5rem)) 2.5rem;
}

@media (max-width: 900px) { .articulo-cuerpo figure { margin-inline: 0; } }

.articulo-cuerpo figcaption {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
  text-align: center;
}

.articulo-fuentes {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
  font-size: 0.88rem;
  color: var(--humo);
}

.articulo-fuentes h3 {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--tinta);
}

.articulo-pie {
  margin-top: 3.5rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.articulo-pie .btn,
.articulo-pie .enlace { margin-top: 0; }

/* ---------- Seguir leyendo (slider) ---------- */

.rel {
  background: var(--papel-2);
  border-top: 1px solid var(--linea);
  padding-block: clamp(4rem, 9vh, 6.5rem);
}

.rel-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.rel-flechas { display: flex; gap: 0.6rem; }

.rel-flecha {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--tinta);
  background: none;
  color: var(--tinta);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.rel-flecha:hover { background: var(--tinta); color: var(--papel); }

.rel-pista {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}

.rel-pista::-webkit-scrollbar { display: none; }

.rel-pista .entrada {
  flex: 0 0 min(78vw, 340px);
  scroll-snap-align: start;
}

/* ============================================================
   RESERVAS — selector de experiencia y flujo de reserva
   (los nombres de clase del flujo son contratos con reservas.js)
   ============================================================ */

/* Variante clara de los CTA secundarios del flujo */

.btn-linea {
  display: inline-block;
  padding: 1rem 1.6rem;
  border: 1px solid var(--linea);
  background: none;
  color: var(--humo);
  font-family: var(--f-texto);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.btn-linea:hover { border-color: var(--tinta); color: var(--tinta); }

.acciones {
  display: flex;
  gap: 1rem;
  margin-top: 2.2rem;
}

.acciones .btn { margin-top: 0; flex: 1; text-align: center; }
.acciones .btn:disabled { opacity: 0.35; cursor: not-allowed; }
.acciones .btn:disabled:hover { background: none; color: inherit; border-color: currentColor; }

button.btn { background: none; cursor: pointer; font-family: var(--f-texto); }

/* Selector: reutiliza .experiencias/.experiencia de la sección oscura */

.selector-oscuro {
  background: var(--volcan);
  color: var(--papel);
  padding-block: clamp(4rem, 9vh, 6.5rem);
}

/* Cabecera compacta del flujo de reserva: "Cambiar de experiencia" a la
   izquierda y el título (script + h1) a la derecha, en una sola fila — en
   vez de tres líneas centradas y apiladas (.pagina-cabecera) — para que el
   flujo completo (pasos + calendario) quepa en la pantalla sin necesidad de
   scroll. Solo se usa en la página de un tipo de evento (body.pagina-reserva),
   no en el selector de experiencias ni en /confirmacion. */

.reserva-cabecera {
  padding: clamp(6rem, 13vh, 7.5rem) 0 clamp(1.2rem, 2.5vh, 1.8rem);
  border-bottom: 1px solid var(--linea);
}

.reserva-cabecera-fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.reserva-cabecera-fila .enlace { margin-top: 0; white-space: nowrap; }

.reserva-cabecera-titulo { text-align: right; }

.reserva-cabecera-titulo .script {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  margin-bottom: 0.1rem;
}

.reserva-cabecera-titulo .titulo {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.05;
}

@media (max-width: 640px) {
  .reserva-cabecera-fila { flex-direction: column; align-items: flex-start; }
  .reserva-cabecera-titulo { text-align: left; }
}

/* Flujo de reserva */

.flujo {
  padding-block: clamp(2.5rem, 6vh, 4rem) clamp(5rem, 10vh, 7rem);
}

/* Más compacto en la página de reserva (un solo tipo de evento): menos aire
   vertical entre cabecera y tarjeta para caber sin scroll. El ratio del
   flujo-grid se abre algo más a favor del contenido (paneles) porque ahora
   comparte columna con el riel vertical de pasos — ver .flujo-cuerpo. */
body.pagina-reserva .flujo { padding-block: clamp(1.2rem, 3vh, 2rem) clamp(2.5rem, 5vh, 3.5rem); }
body.pagina-reserva .flujo-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 3.5fr); }
body.pagina-reserva .tarjeta { padding: clamp(1.4rem, 3vw, 2.2rem); }
body.pagina-reserva .tarjeta-titulo { margin-bottom: 1.2rem; }

.flujo-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

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

/* Cuerpo del flujo: riel de pasos vertical + paneles, uno junto al otro
   (el riel queda a la izquierda del calendario y del resto de paneles). */

.flujo-cuerpo {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 900px) { .flujo-cuerpo { grid-template-columns: 1fr; } }

/* Barra de pasos */

.paso-barra {
  display: flex;
  gap: 0;
  border-block: 1px solid var(--linea);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.paso-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.2rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.paso-item .paso-num {
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0;
}

.paso-item.activo { color: var(--tinta); border-bottom-color: var(--tinta); }
.paso-item.completado { color: var(--tinta); opacity: 0.55; }

@media (max-width: 640px) {
  .paso-item { flex-direction: column; gap: 0.3rem; font-size: 0.6rem; }
}

/* Variante vertical: riel de pasos a la izquierda del calendario (paso 2) y
   del resto de paneles, en vez de barra horizontal encima de todo. */

.paso-barra-vertical {
  flex-direction: column;
  gap: 0.2rem;
  border-block: none;
  margin-bottom: 0;
}

.paso-barra-vertical .paso-item {
  flex: none;
  justify-content: flex-start;
  text-align: left;
  padding: 0.8rem 0 0.8rem 1rem;
  margin-bottom: 0;
  border-bottom: none;
  border-left: 2px solid var(--linea);
}

.paso-barra-vertical .paso-item.activo { border-left-color: var(--tinta); }
.paso-barra-vertical .paso-item.completado { border-left-color: var(--tinta); }

@media (max-width: 900px) {
  .paso-barra-vertical {
    flex-direction: row;
    border-block: 1px solid var(--linea);
    margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  }
  .paso-barra-vertical .paso-item {
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: 1.2rem 0.5rem;
    margin-bottom: -1px;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .paso-barra-vertical .paso-item.activo { border-bottom-color: var(--tinta); }
}

@media (max-width: 640px) {
  .paso-barra-vertical .paso-item { flex-direction: column; gap: 0.3rem; font-size: 0.6rem; }
}

/* Paneles de paso */

.panel { display: none; }
.panel.activo { display: block; }

.tarjeta {
  border: 1px solid var(--linea);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}

.tarjeta-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 470;
  line-height: 1.1;
  margin-bottom: 1.8rem;
}

/* Contador de personas */

.contador-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.contador-btn {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--tinta);
  background: none;
  color: var(--tinta);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.contador-btn:hover { background: var(--tinta); color: var(--papel); }

.contador-num {
  font-family: var(--f-display);
  font-size: 1.8rem;
  min-width: 2.2rem;
  text-align: center;
  display: inline-block;
}

.total-caja {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--linea);
  margin-top: 1.8rem;
  padding-top: 1.4rem;
}

.total-caja .cifra {
  font-family: var(--f-display);
  font-size: 1.9rem;
}

.nota {
  font-size: 0.74rem;
  color: var(--humo);
  margin-top: 0.5rem;
}

/* Fecha + hora lado a lado (paso 2): calendario a la izquierda, acotado en
   ancho para que los días no crezcan más de la cuenta, y el horario a la
   derecha aprovechando el resto del espacio — así el paso cabe en menos
   alto que con calendario y horario apilados. */

.fecha-hora-grid {
  display: grid;
  grid-template-columns: clamp(15rem, 34vw, 21rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 640px) {
  .fecha-hora-grid { grid-template-columns: 1fr; }
}

/* Calendario */

.cal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}

.cal-mes-titulo {
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.cal-nav-btn {
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--linea);
  background: none;
  color: var(--tinta);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.cal-nav-btn:hover:not(:disabled) { border-color: var(--tinta); }
.cal-nav-btn:disabled { opacity: 0.3; cursor: default; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}

.cal-header {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo);
  padding-block: 0.4rem;
}

.cal-dia {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.98rem;
  border: 1px solid transparent;
  color: var(--tinta);
}

.cal-dia.vacio { visibility: hidden; }

.cal-dia.disponible {
  border-color: var(--linea);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cal-dia.disponible:hover { border-color: var(--tinta); }

.cal-dia.seleccionado {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

.cal-dia.pasado,
.cal-dia.lleno,
.cal-dia.festivo {
  color: var(--humo);
  opacity: 0.4;
}

.cal-dia.lleno { text-decoration: line-through; }

/* Franjas horarias */

.horario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.6rem;
}

.horario-btn {
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--linea);
  background: none;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.horario-btn:hover:not(:disabled) { border-color: var(--tinta); }

.horario-btn.seleccionado {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

.horario-btn.completo {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: default;
}

/* Formulario */

.campo { margin-bottom: 1.6rem; }

.campo label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.campo label .opcional {
  color: var(--humo);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.05em;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--linea);
  background: none;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.25s ease;
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--tinta);
}

.campo input::placeholder,
.campo textarea::placeholder { color: rgba(110, 103, 87, 0.55); }

.campo input.error,
.campo textarea.error { border-color: #A03B2E; }

.error-msg {
  display: none;
  font-size: 0.78rem;
  color: #A03B2E;
  margin-top: 0.4rem;
}

.error-msg.visible { display: block; }

.campo-fila { display: flex; gap: 0.8rem; }
.campo-fila input { flex: 1; }

.campo-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.campo-check input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  accent-color: var(--tinta);
}

.campo-check label {
  font-size: 0.8rem;
  color: var(--humo);
  cursor: pointer;
}

/* Resumen (tarjeta oscura, eco de la sección de visitas) */

.resumen-box {
  background: var(--volcan);
  color: var(--papel);
  padding: clamp(1.8rem, 3vw, 2.5rem);
  position: sticky;
  top: 6rem;
}

.resumen-titulo {
  font-family: var(--f-display);
  font-size: 1.5rem;
  margin-bottom: 1.4rem;
}

.resumen-fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  padding-block: 0.45rem;
  color: var(--humo-claro);
}

.resumen-fila span:last-child { color: var(--papel); }

.resumen-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--linea-clara);
  margin-top: 1rem;
  padding-top: 1.1rem;
}

.resumen-precio {
  font-family: var(--f-display);
  font-size: 2rem;
}

.resumen-pie {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea-clara);
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--humo-claro);
}

.resumen-box .nota { color: var(--humo-claro); }

.resumen-descuento { color: #9DB87A; }
.resumen-descuento span:last-child { color: #9DB87A; }

/* Carga y avisos */

.cargando-reserva {
  text-align: center;
  padding-block: clamp(4rem, 10vh, 7rem);
  color: var(--humo);
}

.spinner-carga {
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto 1.2rem;
  border: 2px solid var(--linea);
  border-top-color: var(--tinta);
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.aviso-bloqueo {
  max-width: 34em;
  margin-inline: auto;
  text-align: center;
  border: 1px solid var(--linea);
  padding: clamp(2.5rem, 6vw, 4rem);
}

.aviso-bloqueo h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 470;
  margin-bottom: 0.8rem;
}

.aviso-bloqueo p { color: var(--humo); font-size: 0.95rem; }

/* ---------- Confirmación de reserva ---------- */

.confirmacion {
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(2rem, 5vh, 3.5rem) var(--pad-x) clamp(5rem, 10vh, 7rem);
  text-align: center;
}

.confirmacion .titulo { margin-top: 0.4rem; }

.confirmacion-check {
  width: 4.2rem;
  height: 4.2rem;
  margin: 0 auto 1.6rem;
  border: 1px solid var(--tinta);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.codigo-reserva {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: 0.12em;
  border-block: 1px solid var(--linea);
  padding-block: 1.4rem;
  margin: clamp(2rem, 5vh, 3rem) 0 0.6rem;
}

.codigo-reserva + .nota {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.66rem;
}

.confirmacion .resumen-box {
  position: static;
  text-align: left;
  margin-top: clamp(2rem, 5vh, 3rem);
}

.confirmacion-info {
  border: 1px solid var(--linea);
  padding: 1.6rem 1.8rem;
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--humo);
  margin-top: 1.5rem;
}

.confirmacion-info strong {
  color: var(--tinta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}