/* ============================================================
   BODEGAS PINTO CABALLERO — Componentes
   ============================================================ */

/* ---- BOTONES ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform var(--transition-fast), background var(--transition-base), box-shadow var(--transition-base);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  /* El mismo recorrido de color que la línea de tiempo y la línea del
     nav (oro → terracota → tinta) — el CTA principal pasa a formar
     parte del hilo del día en vez de ser un botón plano cualquiera.
     Se evita el tramo más claro (amanecer) del degradado para que el
     texto en crema mantenga buen contraste en todo el ancho. */
  background: linear-gradient(100deg, var(--color-gold-600) 0%, var(--color-clay-700) 55%, var(--color-clay-900) 100%);
  background-size: 160% 100%;
  background-position: 0% 0%;
  color: var(--color-cream-50);
  box-shadow: 0 8px 20px -8px rgba(122, 46, 24, 0.55);
}
.btn-primary:hover { background-position: 100% 0%; }
.btn-outline {
  background: transparent;
  color: var(--color-cream-50);
  border: 1.5px solid rgba(251, 243, 230, 0.55);
}
.btn-outline:hover { border-color: var(--color-gold-400); color: var(--color-gold-400); }
.btn-ghost {
  background: transparent;
  color: var(--color-clay-700);
  border: 1.5px solid var(--color-clay-700);
}
.btn-ghost:hover { background: var(--color-clay-700); color: var(--color-cream-50); }

/* ---- BOTÓN "CHIP" (prueba) ----
   Variante rectangular con un chip de icono en ángulo, en vez de la
   píldora ovalada — misma paleta del sitio (oro → terracota), para
   variar la forma sin introducir un lenguaje de color ajeno. */
.btn-chip {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  /* Sin esto, dentro de un contenedor de grid (como .form) el propio
     <button>/<a> se estira al 100% de la columna aunque el chip visual
     sea mucho más estrecho — dejando una zona invisible a la derecha
     que igualmente respondía al hover y al clic. */
  width: fit-content;
  text-decoration: none;
  transition: transform var(--transition-fast);
}
.btn-chip:hover { transform: translateY(-2px); }
.btn-chip-bar {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  padding: 0.85rem 1.75rem 0.85rem 2.9rem;
  /* Sin borde ni redondeo en el lado izquierdo: ahí lo tapa el chip,
     y una línea recta detrás de su punta angular se veía como una
     costura. El chip hace de "tapa" visual en ese extremo. */
  border-radius: 0 8px 8px 0;
  border: 1.5px solid rgba(251, 243, 230, 0.6);
  border-left: none;
  background: transparent;
  color: var(--color-cream-50);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
/* Relleno que barre de izquierda a derecha al pasar el ratón o el
   foco del teclado — el chip dorado se queda fijo como ancla. */
.btn-chip-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--color-clay-700) 0%, var(--color-clay-900) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
}
.btn-chip:hover .btn-chip-bar,
.btn-chip:focus-visible .btn-chip-bar {
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(51, 19, 10, 0.55);
}
.btn-chip:hover .btn-chip-bar::before,
.btn-chip:focus-visible .btn-chip-bar::before {
  transform: scaleX(1);
}
/* Variante para fondos claros (sin foto detrás): en reposo, borde y
   texto oscuros para que se vean sobre el crema; al rellenarse con el
   degradado oscuro, el texto pasa a claro para seguir siendo legible. */
.btn-chip--dark .btn-chip-bar {
  border-color: var(--color-clay-700);
  color: var(--color-clay-800);
}
.btn-chip--dark.btn-chip:hover .btn-chip-bar,
.btn-chip--dark.btn-chip:focus-visible .btn-chip-bar {
  color: var(--color-cream-50);
}
/* Variante secundaria: mismo chip en ángulo, pero en vino profundo
   con un toque dorado en la esquina (como la copa del hero) en vez
   de oro pleno — para cuando va junto a un chip principal (p. ej.
   "Nuestra historia" al lado de "Recorrer el día completo") y
   necesita notarse pero no competir con él. Sigue en la misma
   familia cálida del resto de la web, no un tono ajeno como el verde. */
.btn-chip--secondary .btn-chip-icon {
  background: linear-gradient(145deg, var(--color-gold-600) 0%, var(--color-clay-700) 42%, var(--color-clay-900) 100%);
  color: var(--color-cream-50);
}
.btn-chip-icon {
  position: absolute;
  z-index: 1;
  left: -2px;
  top: -6px;
  bottom: -6px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--color-gold-400), var(--color-gold-600));
  clip-path: polygon(0 0, 66% 0, 100% 50%, 66% 100%, 0 100%);
  color: var(--color-ink-900);
  box-shadow: 2px 0 8px rgba(34, 25, 18, 0.3);
}
.btn-chip-icon svg { width: 18px; height: 18px; margin-left: -8px; }

/* ---- NAVBAR ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  /* Fondo crema de siempre + una veladura tenue oro→terracota→tinta,
     el mismo recorrido de color que la línea de la línea de tiempo,
     para que el nav lleve también el hilo del día. La opacidad es
     baja a propósito: el texto del menú sigue siendo oscuro y tiene
     que seguir leyéndose igual de bien en todo el ancho. */
  background:
    linear-gradient(90deg, rgba(223, 189, 112, 0.16) 0%, rgba(190, 82, 48, 0.12) 50%, rgba(34, 25, 18, 0.14) 100%),
    rgba(251, 243, 230, 0.92);
  backdrop-filter: blur(10px);
}
.nav::after {
  /* Línea de horizonte al pie del nav: el mismo degradado día→noche
     que ya usan la línea de tiempo y los divisores entre secciones. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-dawn-400), var(--color-gold-500) 35%, var(--color-clay-700) 68%, var(--color-ink-900));
}
.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-ink-900);
}
.nav-brand img { height: 36px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-ink-700);
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--color-clay-700); border-color: var(--color-clay-700); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}
.nav-toggle:hover { background: rgba(122, 46, 24, 0.08); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: var(--nav-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-cream-50);
    border-bottom: 1px solid rgba(122, 46, 24, 0.12);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
  }
  .nav-links[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links a {
    padding: 1rem var(--space-3);
    border-bottom: 1px solid rgba(122, 46, 24, 0.08);
    border-left: 3px solid transparent;
  }
  .nav-links a:hover, .nav-links a[aria-current="page"] { border-left-color: var(--color-clay-700); }
}

/* ---- HERO ---- */
/* Amanece: el hero es el punto más luminoso del día (07:00), no el
   típico héroe oscuro con foto de fondo que usa cualquier bodega.
   El resto del sitio narra el día completo hasta la noche del footer. */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  color: var(--color-ink-900);
  background: linear-gradient(165deg, var(--color-dawn-300) 0%, var(--color-cream-50) 60%, var(--color-cream-50) 100%);
  overflow: hidden;
}
.hero::after {
  /* sol naciente asomando en el horizonte */
  content: "";
  position: absolute;
  right: 6%;
  bottom: -12%;
  width: min(48vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--color-dawn-400) 0%, var(--color-gold-500) 52%, transparent 76%);
  opacity: 0.6;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 40rem; }
.hero-time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-dawn-600);
  margin-bottom: var(--space-2);
}
.hero-time svg { width: 18px; height: 18px; flex-shrink: 0; }
.hero h1 {
  font-size: var(--font-size-hero);
  margin-bottom: var(--space-3);
  color: var(--color-ink-900);
}
.hero h1 em { font-style: italic; color: var(--color-clay-700); }
.hero p {
  font-size: var(--font-size-lg);
  color: var(--color-ink-700);
  max-width: 34rem;
  margin-bottom: var(--space-4);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- HERO — variante con fotografía ----
   Sustituye el fondo claro del amanecer por og-image4.jpg con una
   veladura oscura para que el texto siga siendo legible. Se activa
   añadiendo la clase .hero--photo al .hero; quitar la clase basta
   para volver a la versión sin foto. */
.hero--photo {
  color: var(--color-cream-50);
  /* Veladura a doble borde: oscuro en los dos extremos (donde va el
     texto), claro en el centro (donde el puzle brilla en dorado). */
  background-image:
    linear-gradient(90deg, rgba(23, 14, 9, 0.85) 0%, rgba(23, 14, 9, 0.4) 24%, rgba(23, 14, 9, 0.06) 44%, rgba(23, 14, 9, 0.06) 56%, rgba(23, 14, 9, 0.4) 76%, rgba(23, 14, 9, 0.85) 100%),
    url("../img/og-image4.jpg");
  /* "cover" en las dos capas: la foto (con su difuminado en los bordes,
     pensado para esto) llena TODO el hero sin huecos, sea cual sea el
     tamaño de la ventana — igual que en móvil. Lo único que se recorta
     es el difuminado de relleno, nunca la escena nítida del centro. */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.hero--photo::after { display: none; }
.hero--photo .hero-time { color: var(--color-gold-400); }
.hero--photo h1 { color: var(--color-cream-50); }
.hero--photo h1 em { color: var(--color-gold-400); }
.hero--photo p {
  color: rgba(251, 243, 230, 0.9);
  /* Sombra fuerte para que el párrafo se siga leyendo caiga donde caiga
     sobre la foto (zonas claras incluidas), sin depender de dónde
     encuadre cada imagen que se pruebe de fondo. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Hero a tres franjas: hora centrada arriba, dos columnas de texto
   en medio (titular a la izquierda sobre el vino, texto de origen a
   la derecha sobre la tierra/sarmiento), botones centrados abajo. */
.hero--photo .hero-inner {
  max-width: none;
  width: 100%;
  /* Margen extra respecto al padding del .container: sin esto, el
     texto de cada columna quedaba pegado al borde de la pantalla. */
  padding-inline: clamp(1.5rem, 9vw, 7.5rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-4);
  justify-items: center;
}
.hero-time--center {
  text-align: center;
  background: rgba(23, 14, 9, 0.55);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  backdrop-filter: blur(3px);
}
/* Envoltorio de la franja de hora: en escritorio es un contenedor
   invisible (el badge sigue centrado sobre la foto de fondo, igual
   que antes). Solo cobra forma propia de "franja de foto" en móvil,
   ver más abajo. */
.hero-photo-strip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-columns {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.hero-left { max-width: 26rem; text-align: left; }
.hero-right { max-width: 26rem; text-align: right; justify-self: end; }
.hero-right h2 {
  /* Mismo formato que el h1 de la izquierda (tamaño, color, margen):
     los dos titulares deben pesar igual visualmente. */
  font-size: var(--font-size-hero);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-cream-50);
  margin-bottom: var(--space-3);
}
.hero-cta--center { justify-content: center; }

/* ---- HERO — secuencia de entrada ----
   Cuando la foto de fondo termina de cargar, hero-animation.js espera 1s
   y añade .is-revealed al .hero--photo. A partir de ahí toda la coreografía
   la marca este CSS con transition-delay, en orden:
   1) hora → 2) los dos botones → 3) titular izquierdo → 4) titular derecho
   → 5) los dos subtítulos, a la vez. */
.hero--photo .hero-anim {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.hero--photo.is-revealed .hero-anim--1 { opacity: 1; transform: none; transition-delay: 0s; }
.hero--photo.is-revealed .hero-anim--2 { opacity: 1; transform: none; transition-delay: 0.5s; }
.hero--photo.is-revealed .hero-anim--3 { opacity: 1; transform: none; transition-delay: 1s; }
.hero--photo.is-revealed .hero-anim--4 { opacity: 1; transform: none; transition-delay: 1.5s; }
.hero--photo.is-revealed .hero-anim--5 { opacity: 1; transform: none; transition-delay: 2s; }

@media (prefers-reduced-motion: reduce) {
  /* Quien prefiere menos movimiento ve todo el hero desde el primer
     frame, sin cascada ni transición. */
  .hero--photo .hero-anim { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 760px) {
  /* Con las 3 franjas apiladas, el contenido puede ser más alto que
     el min-height fijo del hero — eso lo empujaba por encima del
     borde superior y overflow:hidden lo recortaba bajo el nav. En
     móvil el hero simplemente crece con su contenido. */
  .hero { min-height: auto; padding-block: 0 var(--space-6); }

  /* La foto panorámica (1696×624, muy ancha) se ve mal como fondo de
     un hero alto y estrecho: con "cover" se amplía tanto para cubrir
     el alto que solo se ve una franja recortada del centro, perdiendo
     los dos extremos de la composición (el vino y la tierra). En vez
     de eso, en móvil la foto pasa a ser su propia franja con
     proporción fija —se ve completa, sin ese recorte— y el resto del
     texto baja a una zona de fondo sólido en tono atardecer, debajo. */
  .hero--photo {
    /* Zona de texto en tono atardecer — sigue el hilo del día incluso
       aquí abajo: foto de amanecer arriba, texto de atardecer debajo. */
    background-image: linear-gradient(180deg, var(--color-clay-900) 0%, var(--color-ink-900) 100%);
  }
  .hero-photo-strip {
    aspect-ratio: 1696 / 760;
    width: calc(100% + var(--space-3) * 2);
    margin-inline: calc(-1 * var(--space-3));
    margin-bottom: var(--space-4);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    background-image:
      linear-gradient(180deg, rgba(23, 14, 9, 0.15) 0%, rgba(23, 14, 9, 0.35) 100%),
      url("../img/og-image4.jpg");
    background-size: cover;
    background-position: center;
  }
  .hero--photo .hero-inner { padding-inline: 0; }
  .hero-columns { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero-left, .hero-right { max-width: none; text-align: left; }
  .hero-right { justify-self: start; }
}

/* ---- DIVISOR DE HORIZONTE ---- */
/* Marca los cambios de hora entre secciones (mediodía → atardecer → noche) */
.horizon-divider {
  display: block;
  width: 100%;
  height: 56px;
  color: var(--color-cream-100);
}
.horizon-divider svg { width: 100%; height: 100%; display: block; }
.horizon-divider--dusk { color: var(--color-clay-900); }
.horizon-divider--night { color: var(--color-ink-900); }

/* ---- FRANJA DE CONFIANZA (stats) ---- */
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  text-align: center;
}
.trust-item .num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--color-clay-700);
}
.trust-item .lbl {
  font-size: var(--font-size-sm);
  color: var(--color-ink-700);
}
@media (max-width: 720px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- TARJETAS ---- */
.card {
  background: var(--color-cream-50);
  border: 1px solid rgba(122, 46, 24, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(51, 19, 10, 0.35); }
.card h3 { font-size: var(--font-size-xl); margin-bottom: 0.5rem; color: var(--color-clay-800); }
.card p { color: var(--color-ink-700); font-size: var(--font-size-sm); }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- CATÁLOGO DE VINOS ---- */
.wine-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-4);
}
.wine-filter {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(122, 46, 24, 0.25);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-ink-700);
  transition: all var(--transition-fast);
}
.wine-filter:hover { border-color: var(--color-clay-700); }
.wine-filter[aria-pressed="true"] {
  background: var(--color-clay-700);
  border-color: var(--color-clay-700);
  color: var(--color-cream-50);
}

/* ---- LÍNEA DEL DÍA (sustituye al grid de tarjetas de producto) ----
   En vez de un catálogo tipo e-commerce, los vinos se cuentan como
   momentos de un mismo día en la bodega: de las 07:00 (Amanecer) a
   las 23:00 (el generoso de cierre de noche). Cada nodo lleva un
   icono de sol/luna propio de su hora, no una foto de botella. */
.day-timeline {
  position: relative;
  display: grid;
  gap: var(--space-6);
}
.day-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-dawn-400), var(--color-gold-500) 35%, var(--color-clay-700) 68%, var(--color-ink-900));
  transform: translateX(-50%);
}
.day-node {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: start;
  gap: var(--space-3);
}
/* Sin esto, la colocación automática de Grid manda el marcador (hora
   + icono/foto) a una segunda fila en las tarjetas de la derecha —la
   tarjeta ocupa la columna 3 (la última), así que el cursor de
   colocación salta de fila antes de llegar al marcador (columna 2).
   Fijar la fila 1 en todos los hijos evita ese salto y mantiene la
   tarjeta y su marcador siempre a la misma altura, a los dos lados. */
.day-node > * { grid-row: 1; }
.day-node[hidden] { display: none; }
.day-node:nth-child(odd) .day-card { grid-column: 1; }
.day-node:nth-child(even) .day-card { grid-column: 3; }
.day-node:nth-child(odd) .day-card-text { text-align: right; }
.day-node:nth-child(even) .day-card-text { text-align: left; }
.day-marker { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.day-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream-50);
  box-shadow: 0 0 0 6px var(--color-cream-50);
}
.day-icon svg { width: 22px; height: 22px; }
/* Nodo "amanecer": ilustración real en vez de icono de líneas — se ve
   como imagen (rectángulo redondeado, su proporción vertical propia),
   no recortada dentro de un círculo. Mismo halo/anillo que el resto
   de marcadores para que "interrumpa" la línea igual que ellos. */
.day-icon.day-icon--photo {
  width: auto;
  height: 112px;
  border-radius: 10px;
  overflow: hidden;
  background: none;
}
.day-icon--photo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
}
.day-time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
}
.day-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--color-cream-50);
  border: 1px solid rgba(122, 46, 24, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.day-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(51, 19, 10, 0.35); }
.day-card-text { order: 2; flex: 1; min-width: 0; }
/* Botella real (cuando existe foto de producto): pegada al borde
   exterior de la tarjeta —lejos de la línea central— para no obligar
   a la caja a crecer de alto, solo un poco de ancho. */
.day-card-bottle { order: 1; flex-shrink: 0; width: 56px; }
.day-card-bottle img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(51, 19, 10, 0.28));
}
.day-node:nth-child(even) .day-card-bottle { order: 3; }

/* Carrusel de formatos (Pitarra: tinto, blanco, bag-in-box, garrafa) —
   caja de tamaño fijo; las imágenes se centran dentro con su propia
   proporción y se cruzan con un fundido, no con deslizamiento. */
.day-card-bottle--carousel { position: relative; height: 190px; }
.day-card-bottle--carousel img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.day-card-bottle--carousel img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .day-card-bottle--carousel img { transition: none; }
}

/* Vista previa ampliada de la botella: al pasar el ratón por la
   miniatura de una tarjeta, este panel fijo muestra la misma botella
   en grande (a la derecha por defecto; .is-left lo espeja cuando la
   tarjeta de origen está en la mitad derecha de la pantalla). Solo
   tiene sentido con ratón — initBottlePreview() en js/wines.js
   comprueba "hover: hover" antes de crear el panel; en móvil/tablet
   no se llega a crear. */
.bottle-preview {
  position: fixed;
  top: 50%;
  /* Por defecto (tarjeta de origen a la IZQUIERDA de la cronología):
     el panel se muestra a la derecha, con su borde interior 80px a la
     DERECHA del centro (donde está la línea/icono de la hora, siempre
     al 50% del viewport) — así deja libre esa zona. La botella se
     pega al borde exterior (flex-end). Cuando la tarjeta de origen
     está a la derecha, JS añade .is-left para hacer el espejo
     completo: panel a la izquierda, borde interior 80px a la
     IZQUIERDA del centro, botella pegada también a su borde exterior. */
  left: calc(50% + 80px);
  right: clamp(3rem, 10vw, 9rem);
  z-index: 80;
  padding: var(--space-3);
  background: rgba(251, 243, 230, 0.94);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(51, 19, 10, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  /* Efecto persiana: se "desenrolla" de arriba a abajo con clip-path
     en vez de deslizarse o hacer zoom. */
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.15s ease, clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.5s;
}
.bottle-preview.is-visible {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0% 0);
  transition: opacity 0.15s ease, clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}
.bottle-preview.is-left {
  left: clamp(3rem, 10vw, 9rem);
  right: calc(50% + 80px);
}
/* Escenario interior: una sola imagen (caso normal) o, para vinos con
   varios envases (Pitarra), un mini carrusel igual que el de la
   miniatura — mismo cruce de opacidad, mismo ritmo de 3s. */
.bottle-preview-stage {
  position: relative;
  width: min(29vw, 340px);
  max-width: 100%;
}
.bottle-preview-stage img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 65vh;
  object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(51, 19, 10, 0.3));
}
.bottle-preview-stage.is-carousel {
  height: min(65vh, 420px);
}
.bottle-preview-stage.is-carousel img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.bottle-preview-stage.is-carousel img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bottle-preview-stage.is-carousel img { transition: none; }
}
@media (max-width: 991px) {
  .bottle-preview { display: none; }
}

.day-card .period-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-600);
}
.day-card h3 { font-size: var(--font-size-xl); color: var(--color-clay-800); margin: 0.2rem 0 0.1rem; }
.day-card .slogan { font-style: italic; color: var(--color-ink-700); font-size: var(--font-size-sm); margin-bottom: 0.4rem; }
.day-card-notes {
  display: grid;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--color-ink-700);
}
.day-node:nth-child(odd) .day-card-notes { justify-items: end; }
.day-card-notes dt { font-weight: 700; color: var(--color-ink-900); display: inline; }
.day-card-notes dd { display: inline; margin: 0; }
.day-card-notes div { display: flex; gap: 0.4rem; }
.day-card-foot {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(122, 46, 24, 0.2);
  font-size: 0.78rem;
  color: var(--color-ink-700);
}

/* Color e icono según el momento del día */
.day-node[data-period="amanecer"] .day-icon { background: linear-gradient(135deg, var(--color-dawn-400), var(--color-gold-500)); }
.day-node[data-period="mediodia"] .day-icon { background: linear-gradient(135deg, var(--color-gold-500), var(--color-gold-600)); }
.day-node[data-period="atardecer"] .day-icon { background: linear-gradient(135deg, var(--color-clay-600), var(--color-clay-800)); }
.day-node[data-period="noche"] .day-icon { background: linear-gradient(135deg, var(--color-ink-900), var(--color-olive-800)); }
.day-node[data-period="amanecer"] .day-time { color: var(--color-dawn-600); }
.day-node[data-period="mediodia"] .day-time { color: var(--color-gold-600); }
.day-node[data-period="atardecer"] .day-time { color: var(--color-clay-700); }
.day-node[data-period="noche"] .day-time { color: var(--color-ink-900); }

.wine-empty {
  text-align: center;
  padding: var(--space-6) var(--space-2);
  color: var(--color-ink-700);
}

@media (max-width: 760px) {
  .day-timeline::before { left: 23px; }
  .day-node { grid-template-columns: 46px 1fr; }
  .day-marker { grid-column: 1; }
  .day-node:nth-child(odd) .day-card,
  .day-node:nth-child(even) .day-card { grid-column: 2; }
  .day-node:nth-child(odd) .day-card-text,
  .day-node:nth-child(even) .day-card-text { text-align: left; }
  .day-node:nth-child(odd) .day-card-notes { justify-items: start; }
  /* En una sola columna no hay "lado exterior": la botella siempre a
     la izquierda del texto, igual en todas las tarjetas. */
  .day-node:nth-child(even) .day-card-bottle { order: 1; }
  .day-card-bottle { width: 44px; }
  .day-card-bottle--carousel { height: 150px; }
}

/* ---- TIMELINE (historia) ---- */
.timeline { display: grid; gap: var(--space-4); }
.timeline-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.timeline-year {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-clay-700);
  text-align: right;
}
.timeline-body h3 { font-size: var(--font-size-lg); margin-bottom: 0.3rem; }
.timeline-body p { color: var(--color-ink-700); font-size: var(--font-size-sm); }
@media (max-width: 560px) {
  .timeline-item { grid-template-columns: 1fr; }
  .timeline-year { text-align: left; }
}

/* ---- CITA / QUOTE ---- */
.quote {
  border-left: 3px solid var(--color-gold-500);
  padding-left: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--color-cream-50);
}
.quote cite { display: block; margin-top: var(--space-2); font-size: var(--font-size-sm); font-style: normal; color: var(--color-gold-400); }

/* ---- FORMULARIO DE CONTACTO ---- */
.form { display: grid; gap: var(--space-3); max-width: 34rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-ink-900); }
.field input, .field textarea {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(122, 46, 24, 0.25);
  background: var(--color-cream-50);
  color: var(--color-ink-900);
}
.field input:focus, .field textarea:focus { border-color: var(--color-clay-700); }
.field textarea { min-height: 140px; resize: vertical; }
.field-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--color-ink-700); }
.field-check input { margin-top: 0.2rem; }
.field-error { font-size: 0.8rem; color: var(--color-clay-700); min-height: 1.1em; }
.form-status {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  display: none;
}
.form-status[data-state="success"] { display: block; background: rgba(86, 90, 52, 0.15); color: var(--color-olive-800); }
.form-status[data-state="error"] { display: block; background: rgba(156, 61, 35, 0.12); color: var(--color-clay-800); }
/* honeypot */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- INFO BOX ---- */
.info-list { display: grid; gap: var(--space-3); }
.info-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-item .ico {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(122, 46, 24, 0.1);
  color: var(--color-clay-700);
  display: flex; align-items: center; justify-content: center;
}
.info-item h3 { font-size: var(--font-size-base); font-family: var(--font-sans); font-weight: 700; }
.info-item p { font-size: var(--font-size-sm); color: var(--color-ink-700); }

/* ---- FOOTER ---- */
.footer {
  background: var(--color-ink-900);
  color: rgba(251, 243, 230, 0.75);
  padding-block: var(--space-6) var(--space-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.footer-brand { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-cream-50); margin-bottom: 0.6rem; }
.footer h4 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gold-400); margin-bottom: 0.8rem; }
.footer ul { display: grid; gap: 0.5rem; }
.footer a:hover { color: var(--color-gold-400); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(251, 243, 230, 0.25);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.footer-social a:hover { border-color: var(--color-gold-400); background: rgba(200, 155, 60, 0.12); }
.footer-bottom {
  border-top: 1px solid rgba(251, 243, 230, 0.12);
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.8rem;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- VERIFICACIÓN DE EDAD (age-gate) ---- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: rgba(34, 25, 18, 0.94);
  backdrop-filter: blur(6px);
}
.age-gate[hidden] { display: none; }
.age-gate-box {
  max-width: 26rem;
  width: 100%;
  background: var(--color-cream-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
}
.age-gate-box h2 { font-size: var(--font-size-2xl); margin-bottom: 0.6rem; }
.age-gate-box p { color: var(--color-ink-700); font-size: var(--font-size-sm); margin-bottom: var(--space-3); }
.age-gate-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.age-gate-legal { margin-top: var(--space-3); font-size: 0.75rem; color: var(--color-ink-700); }
.age-gate-legal a { text-decoration: underline; }

/* ---- AVISO "NUEVO VINO" ---- */
/* Por encima del menú de navegación (100) para que su franja superior
   también cierre el aviso al pulsarla, y por debajo del age-gate (999)
   a propósito: nunca deberían coincidir en pantalla, pero si algo
   falla, el aviso de edad manda. */
.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: rgba(23, 14, 9, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.promo-modal[hidden] { display: none; }
.promo-modal.is-visible { opacity: 1; }
.promo-modal-box {
  position: relative;
  width: min(84vw, 380px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
  background: var(--color-cream-50);
  /* Persiana: se desenrolla de arriba a abajo, igual que el panel de
     botellas — mismo lenguaje visual en todo el sitio. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.promo-modal.is-visible .promo-modal-box { clip-path: inset(0 0 0% 0); }
.promo-modal-box img { display: block; width: 100%; height: auto; }
.promo-modal-badge {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: var(--color-gold-500);
  color: var(--color-ink-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-2xl);
  letter-spacing: 0.03em;
  white-space: nowrap;
  padding: 0.6rem 1.6rem;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 16px -6px rgba(51, 19, 10, 0.5);
}
/* "Novedad": el fondo de la insignia se queda fijo — solo parpadea el
   texto (blanco que se apaga y vuelve), los primeros 2s (lo apaga
   promo-nuevo-vino.js añadiendo .is-gone) y luego desaparece del
   todo — la insignia "Nuevo vino" de abajo se queda fija. */
@keyframes promo-novelty-blink {
  0%, 49% { color: var(--color-cream-50); }
  50%, 99% { color: transparent; }
  100% { color: var(--color-cream-50); }
}
.promo-modal-novelty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: var(--color-clay-700);
  color: var(--color-cream-50);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-2xl);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.55rem 1.6rem;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
  animation: promo-novelty-blink 0.5s linear infinite;
}
.promo-modal-novelty.is-gone { display: none; }
@media (prefers-reduced-motion: reduce) {
  .promo-modal, .promo-modal-box { transition: none; }
  .promo-modal-novelty { animation: none; }
}

/* ---- BANDA CTA ---- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-clay-900), var(--color-clay-700));
  color: var(--color-cream-50);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.cta-band::before {
  /* el sol termina de ponerse tras la banda */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;
  transform: translateX(-50%);
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-gold-400) 0%, transparent 72%);
  opacity: 0.4;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--font-size-3xl); margin-bottom: 0.6rem; }
.cta-band p { color: rgba(251,243,230,0.85); max-width: 34rem; margin-inline: auto; margin-bottom: var(--space-3); }

/* ---- PÁGINA LEGAL ---- */
.legal-content { max-width: 48rem; }
.legal-content h2 { font-size: var(--font-size-xl); margin-top: var(--space-4); margin-bottom: 0.6rem; color: var(--color-clay-800); }
.legal-content p, .legal-content li { color: var(--color-ink-700); font-size: 0.95rem; margin-bottom: 0.6rem; }
.legal-content li { margin-left: 1.2rem; list-style: disc; }
.legal-updated { font-size: 0.85rem; color: var(--color-ink-700); margin-bottom: var(--space-3); }

/* ---- 404 ---- */
.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}
.error-page .code { font-family: var(--font-display); font-size: 6rem; color: var(--color-clay-700); line-height: 1; }

/* ---- PÁGINA HEADER SECUNDARIO ---- */
.page-hero {
  background: linear-gradient(160deg, var(--color-clay-900) 0%, var(--color-ink-900) 100%);
  color: var(--color-cream-50);
  padding-block: var(--space-8) var(--space-6);
  text-align: center;
}
.page-hero .eyebrow { color: var(--color-gold-400); }
.page-hero h1 { font-size: var(--font-size-3xl); }
.page-hero p { color: rgba(251,243,230,0.82); max-width: 40rem; margin-inline: auto; margin-top: 0.6rem; }