/* ============================================================
   CULTURA CORTESANA — Feria de Vinos
   Hoja de estilos principal
   ============================================================
   ÍNDICE
   1. Variables (colores, tipografía, espaciado) — editá aquí
   2. Reset y base
   3. Tipografía
   4. Layout (container, secciones)
   5. Botones
   6. Header / Navegación
   7. Hero
   8. Sección Evento
   9. Sección Bodegas
   10. Sección Entradas
   11. Sección Gastronomía
   12. Sección Experiencia
   13. Sección Ubicación
   14. Sección FAQ
   15. CTA final
   16. Footer
   17. WhatsApp flotante
   18. Animaciones
   19. Responsive (mobile / tablet / desktop)
   ============================================================ */


/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
  /* Paleta principal — vinoteca premium clara, ahora con más color */
  --cream:        #FAF4E6;   /* fondo principal, un toque más cálido */
  --cream-soft:   #F3E8D0;   /* fondos alternos, más amarillo */
  --beige:        #E8DDC8;   /* bordes y divisores */
  --champagne:    #E4C684;   /* dorado suave más vibrante */
  --gold:         #C79A4A;   /* dorado para acentos */
  --gold-bright:  #E0AE48;   /* dorado luminoso para hovers */
  --gold-deep:    #8B6B2E;
  --wine:         #7A1F33;   /* bordó principal — un punto más vivo */
  --wine-bright:  #A02944;   /* vino rojo más rojo, para highlights */
  --wine-deep:    #4A0F1C;
  --terracotta:   #C75B3C;   /* acento terracota cálido */
  --olive:        #6B6E3E;   /* verde oliva natural */
  --olive-soft:   #9A9B73;
  --olive-deep:   #4F5128;
  --plum:         #58264D;   /* ciruela para sombras de color */
  --ink:          #1F1B17;   /* texto principal */
  --ink-soft:     #4A4540;
  --muted:        #8A8278;   /* texto secundario */
  --line:         #E0CFAE;   /* líneas finas más tibias */

  /* Gradientes reutilizables */
  --grad-warm:     linear-gradient(135deg, #FAF4E6 0%, #F4DFAE 60%, #E4C684 100%);
  --grad-wine:     linear-gradient(135deg, #7A1F33 0%, #4A0F1C 100%);
  --grad-sunset:   linear-gradient(135deg, #C79A4A 0%, #C75B3C 55%, #7A1F33 100%);
  --grad-vine:     linear-gradient(160deg, #4F5128 0%, #6B6E3E 60%, #C79A4A 100%);

  /* Tipografía */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala */
  --container-max: 1240px;
  --container-narrow: 880px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;

  /* Espacios */
  --section-pad-y: clamp(72px, 9vw, 140px);

  /* Sombras */
  --shadow-soft: 0 4px 24px rgba(31, 27, 23, 0.06);
  --shadow-md:   0 12px 40px rgba(31, 27, 23, 0.09);
  --shadow-lg:   0 30px 80px rgba(31, 27, 23, 0.14);

  /* Transiciones */
  --t-base: 240ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 540ms cubic-bezier(.4, 0, .2, 1);
}


/* ============================================================
   2. RESET Y BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(199, 154, 74, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(122, 31, 51, 0.05), transparent 60%),
    var(--cream);
  /* background-attachment: fixed; — quitado: roto en iOS Safari y causa jank en mobile */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-base);
}
a:hover { color: var(--wine); }

ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--wine); color: var(--cream); }


/* ============================================================
   3. TIPOGRAFÍA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.eyebrow-light { color: var(--champagne); }

.section-title {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  margin-bottom: 14px;
}
.section-title em {
  font-style: italic;
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
.section-head { position: relative; }
.section-head::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  margin: 22px auto 0;
  background: var(--grad-sunset);
  border-radius: 2px;
}
.section-sub {
  max-width: 620px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.lead {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink);
}


/* ============================================================
   4. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: var(--container-narrow); }

.section {
  padding: var(--section-pad-y) 0;
  position: relative;
}

.section-head {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}


/* ============================================================
   5. BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--t-base);
  border: 1.5px solid transparent;
  white-space: nowrap;
  text-align: center;
}

.btn-primary {
  background: var(--wine);
  color: var(--cream);
  border-color: var(--wine);
}
.btn-primary:hover {
  background: var(--wine-deep);
  border-color: var(--wine-deep);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(92, 26, 43, 0.28);
}

.btn-outline {
  background: transparent;
  color: var(--wine);
  border-color: var(--wine);
}
.btn-outline:hover {
  background: var(--wine);
  color: var(--cream);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(31, 27, 23, 0.2);
}
.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: rgba(31, 27, 23, 0.04);
}

.btn-sm { padding: 11px 22px; font-size: 12px; }
.btn-lg { padding: 19px 40px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }


/* ============================================================
   6. HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px 0;
  background: transparent;
  transition: background var(--t-base), box-shadow var(--t-base), padding var(--t-base);
}
.site-header.scrolled {
  background: rgba(250, 246, 238, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  padding: 12px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo {
  display: block;
  width: clamp(170px, 17vw, 250px);
  height: auto;
  transition: filter var(--t-base), opacity var(--t-base);
}
.site-header.scrolled .brand-logo { filter: drop-shadow(0 1px 1px rgba(31, 27, 23, 0.08)); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--champagne);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--champagne);
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.brand-dot { color: var(--gold); margin: 0 1px; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-line-1 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--cream);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  transition: color var(--t-base), text-shadow var(--t-base);
}
.brand-line-2 {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 244, 230, 0.7);
  margin-top: 2px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  transition: color var(--t-base), text-shadow var(--t-base);
}

/* Estado scrolled: header crema → texto vuelve a oscuro */
.site-header.scrolled .brand-line-1 { color: var(--ink); text-shadow: none; }
.site-header.scrolled .brand-line-2 { color: var(--muted); text-shadow: none; }

.nav-list {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-list a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(250, 244, 230, 0.92);
  position: relative;
  padding: 4px 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  transition: color var(--t-base), text-shadow var(--t-base);
}
.site-header.scrolled .nav-list a {
  color: var(--ink-soft);
  font-weight: 500;
  text-shadow: none;
}
.nav-list a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--champagne);
  transition: right var(--t-base);
}
.nav-list a:hover { color: var(--champagne); }
.site-header.scrolled .nav-list a::after { background: var(--wine); }
.site-header.scrolled .nav-list a:hover { color: var(--wine); }
.nav-list a:hover::after { right: 0; }

.nav-cta { display: inline-flex; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  transition: transform var(--t-base), opacity var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.site-header.scrolled .nav-toggle span {
  background: var(--ink);
  box-shadow: none;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;    /* contenido pegado arriba (antes centrado) */
  padding: 130px 0 80px;       /* PADDING-TOP DEL HERO — bajalo o subilo si querés */
  overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  /* Color oscuro de respaldo por si la foto tarda en cargar o falla:
     así el logo blanco "Cultura Cortesana" siempre se ve. */
  background-color: #1a0e08;
}
.hero-bg-image {
  position: absolute; inset: 0;
  /* Foto del lugar como fondo. Si querés cambiarla, reemplazá la URL.
     center/cover hace que llene la sección y se recorte parejo en cualquier pantalla.
     Usamos JPG (mucho más liviano que PNG → carga confiable en Safari mobile). */
  background:
    url('assets/lugar/foto-lugar-6.jpg') center center / cover no-repeat;
  background-color: #1a0e08; /* color base mientras carga */
  /* Pequeño zoom-in lento que da sensación cinematográfica */
  animation: heroSlowZoom 24s ease-out infinite alternate;
}
.hero-bg-overlay {
  position: absolute; inset: 0;
  background:
    /* Capa oscura general para legibilidad del texto */
    linear-gradient(
      180deg,
      rgba(26, 14, 8, 0.55) 0%,
      rgba(26, 14, 8, 0.35) 30%,
      rgba(26, 14, 8, 0.45) 65%,
      rgba(26, 14, 8, 0.78) 100%
    ),
    /* Tinte vino arriba a la derecha */
    radial-gradient(ellipse 60% 50% at 82% 12%, rgba(122, 31, 51, 0.40), transparent 65%),
    /* Tinte dorado abajo a la izquierda */
    radial-gradient(ellipse 55% 50% at 12% 88%, rgba(199, 154, 74, 0.32), transparent 65%),
    /* Vignette para enfocar el centro */
    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 35%, rgba(26, 14, 8, 0.35) 100%);
}

@keyframes heroSlowZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-image { animation: none; }
}
/* Pequeños halos de luz suaves sobre la foto */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.hero::before {
  background: radial-gradient(circle, rgba(199, 154, 74, 0.45), transparent 70%);
  top: -120px;
  right: -120px;
}
.hero::after {
  background: radial-gradient(circle, rgba(122, 31, 51, 0.4), transparent 70%);
  bottom: -140px;
  left: -120px;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
}

/* ============================================================
   LOGO "LOS CORTESANOS" arriba del eyebrow.
   Ajustá el width para hacerlo más grande o más chico.
   ============================================================ */
.hero-brand-mark {
  /* TAMAÑO DEL LOGO LOS CORTESANOS — tocá estos valores:
     min en mobile  →  ideal según viewport  →  máx en desktop */
  width: clamp(170px, 22vw, 280px);
  height: auto;
  display: block;
  margin: 0 auto;   /* sin margen — todo pegado por defecto */
  /* El logo es negro: lo pasamos a blanco con CSS para que se vea sobre la foto */
  filter:
    brightness(0) invert(1)
    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-top: 0;     /* pegado al logo */
  margin-bottom: 28px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.hero-eyebrow .line {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--champagne);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.8rem, 12vw, 9rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.hero-title-top {
  display: block;
  color: var(--cream);
}
.hero-title-bottom {
  display: block;
  margin-top: -0.06em;
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-title-bottom em {
  font-style: italic;
  font-weight: 400;
}

/* Variante: título con logo en lugar de texto */
.hero-title-logo {
  /* Anulamos lo tipográfico del h1 cuando contiene un logo */
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-shadow: none;
  margin-bottom: 28px;
  display: flex;
  justify-content: center;
}
.hero-logo {
  /* TAMAÑO DEL LOGO CULTURA CORTESANA — tocá estos valores para hacerlo
     más grande o más chico:
     min en mobile  →  ideal según viewport  →  máx en desktop. */
  width: clamp(220px, 52vw, 560px);
  height: auto;
  display: block;
  /* El logo es negro: lo convertimos a blanco para que se vea sobre la foto.
     drop-shadow le da la misma "presencia" que tenía el text-shadow del título. */
  filter:
    brightness(0) invert(1)
    drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.hero-subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(250, 244, 230, 0.88);
  margin-bottom: 56px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.hero-subtitle span { display: inline-block; }

.hero-meta {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 36px;
  min-width: 180px;
}
.hero-meta-divider {
  width: 1px;
  background: rgba(228, 198, 132, 0.45);
  align-self: stretch;
}
.meta-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.meta-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 4px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.meta-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(250, 244, 230, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
/* Botón "Conocer la experiencia" sobre la foto: variante clara */
.hero-cta .btn-ghost {
  color: var(--cream);
  border-color: rgba(250, 244, 230, 0.45);
  background: rgba(26, 14, 8, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-cta .btn-ghost:hover {
  color: var(--wine-deep);
  border-color: var(--cream);
  background: var(--cream);
}
/* El primario sobre foto: sombra más marcada para que "salga" del fondo */
.hero-cta .btn-primary {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(250, 244, 230, 0.9);
  letter-spacing: 0.08em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
  z-index: 2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.hero-scroll svg { animation: bounce 2.4s ease-in-out infinite; }


/* ============================================================
   8. SECCIÓN EVENTO
   ============================================================ */
.section-evento {
  background:
    radial-gradient(ellipse 40% 30% at 100% 0%, rgba(199, 154, 74, 0.10), transparent 60%),
    var(--cream);
  position: relative;
}
.section-evento::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-sunset);
}

.evento-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-bottom: 80px;
}

.evento-text > * + * { margin-top: 20px; }
.evento-text strong { font-weight: 600; color: var(--wine); }

.evento-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(122, 31, 51, 0.08);
}
.evento-highlights li {
  background: linear-gradient(160deg, #FFFCF4 0%, #F9EBC9 100%);
  padding: 32px 24px;
  text-align: center;
  position: relative;
  transition: transform var(--t-base);
}
.evento-highlights li:hover { transform: translateY(-3px); }
.evento-highlights li:nth-child(2) { background: linear-gradient(160deg, #FFFCF4 0%, #F2D9BC 100%); }
.evento-highlights li:nth-child(3) { background: linear-gradient(160deg, #FFFCF4 0%, #ECC9A8 100%); }
.evento-highlights li:nth-child(4) { background: linear-gradient(160deg, #FFFCF4 0%, #E8C6A2 100%); }
.hl-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 500;
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 8px;
}
.hl-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.evento-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.evento-categories li {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: all var(--t-base);
  position: relative;
  background: var(--cream);
}
.evento-categories li:hover {
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 15, 28, 0.18);
}
/* Cada categoría con su color — más festivo */
.evento-categories li:nth-child(1) { color: var(--wine); border-color: rgba(122, 31, 51, 0.3); }
.evento-categories li:nth-child(1):hover { background: var(--wine); border-color: var(--wine); }
.evento-categories li:nth-child(2) { color: var(--olive-deep); border-color: rgba(79, 81, 40, 0.3); }
.evento-categories li:nth-child(2):hover { background: var(--olive); border-color: var(--olive); }
.evento-categories li:nth-child(3) { color: var(--terracotta); border-color: rgba(199, 91, 60, 0.35); }
.evento-categories li:nth-child(3):hover { background: var(--terracotta); border-color: var(--terracotta); }
.evento-categories li:nth-child(4) { color: var(--gold-deep); border-color: rgba(199, 154, 74, 0.4); }
.evento-categories li:nth-child(4):hover { background: var(--gold); border-color: var(--gold); }
.evento-categories li:nth-child(5) { color: var(--plum); border-color: rgba(88, 38, 77, 0.3); }
.evento-categories li:nth-child(5):hover { background: var(--plum); border-color: var(--plum); }
.evento-categories li:nth-child(6) { color: var(--wine-bright); border-color: rgba(160, 41, 68, 0.3); }
.evento-categories li:nth-child(6):hover { background: var(--wine-bright); border-color: var(--wine-bright); }
.evento-categories li:nth-child(7) { color: var(--olive); border-color: rgba(107, 110, 62, 0.3); }
.evento-categories li:nth-child(7):hover { background: var(--olive); border-color: var(--olive); }
.evento-categories li:nth-child(8) { color: var(--gold-deep); border-color: rgba(199, 154, 74, 0.4); }
.evento-categories li:nth-child(8):hover { background: var(--grad-sunset); border-color: transparent; }


/* ============================================================
   9. SECCIÓN BODEGAS
   ============================================================ */
.section-bodegas {
  background:
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(122, 31, 51, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(199, 154, 74, 0.12), transparent 60%),
    var(--cream-soft);
  position: relative;
}
.section-bodegas::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-sunset);
}

.bodegas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(74, 15, 28, 0.1);
}
.bodega-card {
  background: linear-gradient(180deg, #FFFCF4 0%, #F8EDCF 100%);
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  text-align: center;
  transition: background var(--t-base), transform var(--t-base);
  position: relative;
  overflow: hidden;
}
.bodega-card::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--grad-sunset);
  transform: translateY(100%);
  transition: transform var(--t-base);
}
.bodega-card:hover::before { transform: translateY(0); }
.bodega-card span {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.2;
  position: relative;
  transition: color var(--t-base);
}
.bodega-card span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width var(--t-base);
}
.bodega-card:hover {
  background: linear-gradient(180deg, #FFFDF6 0%, #FAE2B7 100%);
  transform: translateY(-3px);
}
.bodega-card:hover span { color: var(--wine); }
.bodega-card:hover span::after { width: 40px; }

/* Si reemplazás el <span> por <img> para logos reales, este selector los estiliza */
.bodega-card img {
  max-height: 60px;
  max-width: 80%;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) contrast(0.9);
  opacity: 0.85;
  transition: filter var(--t-base), opacity var(--t-base);
}
.bodega-card:hover img { filter: none; opacity: 1; }

.bodegas-note {
  text-align: center;
  margin-top: 40px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}


/* ============================================================
   10. SECCIÓN ENTRADAS
   ============================================================ */
.section-entradas { background: var(--cream); }

.tickets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 64px;
}

.ticket {
  position: relative;
  background: linear-gradient(160deg, #FFFCF4 0%, #FAEFD2 100%);
  border: 1px solid var(--champagne);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base);
  overflow: hidden;
}
.ticket::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-sunset);
}
.ticket:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(122, 31, 51, 0.18);
}

.ticket-vip {
  background: linear-gradient(155deg, #2a0e15 0%, #58264D 45%, #7A1F33 100%);
  border-color: var(--wine);
  color: var(--cream);
}
.ticket-vip::before { background: linear-gradient(90deg, var(--gold-bright), var(--champagne), var(--gold)); }
.ticket-vip::after {
  content: '';
  position: absolute;
  inset: -20% -20% auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(228, 198, 132, 0.18), transparent 70%);
  pointer-events: none;
}
.ticket-vip:hover { box-shadow: 0 24px 60px rgba(64, 17, 32, 0.5); }
.ticket-vip > * { position: relative; z-index: 1; }

.ticket-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--wine-deep);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 100px;
  white-space: nowrap;
}

.ticket-head { margin-bottom: 28px; }
.ticket-kicker {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: inherit;
}
.ticket-vip .ticket-kicker { color: var(--champagne); }

.ticket-stock {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticket-vip .ticket-stock { color: rgba(217, 196, 154, 0.75); }

.ticket-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.ticket-vip .ticket-price { border-bottom-color: rgba(217, 196, 154, 0.2); }
.price-currency {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--muted);
}
.ticket-vip .price-currency { color: var(--champagne); }
.price-amount {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ticket-vip .price-amount { color: var(--cream); }

.ticket-features {
  flex: 1;
  margin-bottom: 36px;
}
.ticket-features li {
  position: relative;
  padding: 12px 0 12px 28px;
  font-size: 0.97rem;
  line-height: 1.5;
  border-bottom: 1px dashed rgba(217, 207, 188, 0.5);
}
.ticket-vip .ticket-features li {
  border-bottom-color: rgba(217, 196, 154, 0.15);
  color: rgba(250, 246, 238, 0.92);
}
.ticket-features li:last-child { border-bottom: none; }
.ticket-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 19px;
  width: 14px;
  height: 1px;
  background: var(--gold);
}
.ticket-features strong { color: var(--wine); font-weight: 600; }
.ticket-vip .ticket-features strong { color: var(--champagne); }

.ticket-vip .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--wine-deep);
}
.ticket-vip .btn-primary:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--wine-deep);
}

/* Comparativa */
.compare {
  background: var(--cream-soft);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.compare-title {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 28px;
}
.compare-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.compare-row:last-child { border-bottom: none; }
.compare-row-head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
}
.compare-row > div { text-align: center; }
.compare-row > div:first-child { text-align: left; font-weight: 500; }
.check { color: var(--wine); font-weight: 700; }
.dash { color: var(--muted); }


/* ============================================================
   11. SECCIÓN GASTRONOMÍA
   ============================================================ */
.section-gastronomia {
  background:
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(199, 91, 60, 0.08), transparent 60%),
    var(--cream-soft);
  position: relative;
}
.section-gastronomia::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--olive), var(--gold), var(--terracotta));
}

.menu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.menu-section {
  background: linear-gradient(180deg, #FFFCF4 0%, #FAEFD2 100%);
  border: 1px solid var(--champagne);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.menu-section:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(122, 31, 51, 0.12);
}
.menu-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--olive);
}
.menu-section:nth-child(3)::before { background: var(--terracotta); }
.menu-section-fuegos {
  background: linear-gradient(160deg, #FFF1D7 0%, #F4C690 60%, #E69D5E 100%);
  border-color: var(--terracotta);
  color: var(--wine-deep);
}
.menu-section-fuegos::before { background: linear-gradient(90deg, var(--terracotta), var(--wine-bright)); height: 4px; }
.menu-section-fuegos .menu-section-title { color: var(--wine-deep); border-bottom-color: rgba(122, 31, 51, 0.25); }
.menu-section-fuegos .menu-list h4 { color: var(--wine-deep); }
.menu-section-fuegos .menu-list p { color: rgba(74, 15, 28, 0.82); }
.menu-section-fuegos .fire { color: var(--wine); }
.menu-section-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--wine);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fire {
  display: inline-flex;
  color: var(--gold);
}
.menu-list li + li {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
}
.menu-list h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ink);
}
.menu-list p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.menu-list p + p { margin-top: 6px; }
.menu-foot {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ============================================================
   12. SECCIÓN EXPERIENCIA
   ============================================================ */
.section-experiencia { background: var(--cream); }

.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.exp-card {
  background: var(--cream);
  padding: 44px 36px;
  transition: background var(--t-base);
  position: relative;
}
.exp-card:hover { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%); }
.exp-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--cream);
  margin-bottom: 20px;
  background: var(--grad-wine);
  box-shadow: 0 8px 20px rgba(74, 15, 28, 0.18);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.exp-icon svg { width: 60%; height: 60%; }
.exp-card:hover .exp-icon { transform: rotate(-6deg) scale(1.05); }

/* Rotación de colores para los íconos de experiencia */
.exp-card:nth-child(1) .exp-icon { background: var(--grad-wine); }
.exp-card:nth-child(2) .exp-icon { background: var(--grad-vine); box-shadow: 0 8px 20px rgba(79, 81, 40, 0.25); }
.exp-card:nth-child(3) .exp-icon { background: var(--grad-sunset); box-shadow: 0 8px 20px rgba(199, 91, 60, 0.28); }
.exp-card:nth-child(4) .exp-icon { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--wine-deep); box-shadow: 0 8px 20px rgba(199, 154, 74, 0.3); }
.exp-card:nth-child(5) .exp-icon { background: linear-gradient(135deg, var(--olive) 0%, var(--olive-deep) 100%); box-shadow: 0 8px 20px rgba(79, 81, 40, 0.25); }
.exp-card:nth-child(6) .exp-icon { background: linear-gradient(135deg, var(--plum) 0%, var(--wine-deep) 100%); box-shadow: 0 8px 20px rgba(88, 38, 77, 0.3); }
.exp-card h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: var(--ink);
}
.exp-card p {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-soft);
}


/* ============================================================
   12b. SECCIÓN GALERÍA
   ============================================================ */
.section-galeria {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(199, 154, 74, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(122, 31, 51, 0.08), transparent 60%),
    var(--cream);
  position: relative;
}
.section-galeria::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--wine), var(--gold), var(--terracotta));
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 180px;
  gap: 14px;
}
.gallery-item {
  grid-column: span 2;
  grid-row: span 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #F4DDA8 0%, #E4C684 60%, #C79A4A 100%);
  border: 1px solid rgba(199, 154, 74, 0.4);
  box-shadow: 0 10px 28px rgba(74, 15, 28, 0.08);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.gallery-item--lg {
  grid-column: span 3;
  grid-row: span 2;
  background: linear-gradient(135deg, #FAE2B7 0%, #C79A4A 50%, #7A1F33 100%);
}
.gallery-item--wide { grid-column: span 3; }
.gallery-item:nth-child(3) { background: linear-gradient(135deg, #F0CFA7 0%, #C75B3C 100%); }
.gallery-item:nth-child(4) { background: linear-gradient(135deg, #EADCB0 0%, #6B6E3E 100%); }
.gallery-item:nth-child(5) { background: linear-gradient(135deg, #F4DDA8 0%, #58264D 100%); }
.gallery-item:nth-child(6) { background: linear-gradient(135deg, #FAE2B7 0%, #C79A4A 60%, #4A0F1C 100%); }
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(74, 15, 28, 0.18);
}

.gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 252, 244, 0.92);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 252, 244, 0.18), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 252, 244, 0.06) 14px 15px);
}
.gallery-placeholder svg {
  opacity: 0.85;
}
.gallery-note {
  text-align: center;
  margin-top: 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.gallery-note em {
  color: var(--wine);
  font-style: italic;
}


/* ============================================================
   12c. BLOQUE DEL ALIAS DE PAGO
   ============================================================ */
.alias-card {
  margin: 0 0 56px;
  background: linear-gradient(135deg, #FFFCF4 0%, #FAE2B7 60%, #F0CFA7 100%);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(122, 31, 51, 0.1);
}
.alias-card::before {
  content: '';
  position: absolute;
  inset: -30% auto auto -10%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 31, 51, 0.18), transparent 70%);
  pointer-events: none;
}
.alias-card::after {
  content: '';
  position: absolute;
  inset: auto -10% -30% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 91, 60, 0.18), transparent 70%);
  pointer-events: none;
}
.alias-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .alias-card-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    align-items: center;
    gap: 36px;
  }
}
.alias-card-text { max-width: 460px; }
.alias-card-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 10px;
}
.alias-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--wine-deep);
  margin-bottom: 8px;
}
.alias-card-sub {
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.alias-card-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  min-width: 280px;
}
@media (min-width: 480px) {
  .alias-card-actions { align-items: flex-end; }
}

.alias-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1.5px dashed var(--wine);
  border-radius: 100px;
  background: rgba(255, 252, 244, 0.85);
  color: var(--wine-deep);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base);
  letter-spacing: 0.02em;
  width: 100%;
}
.alias-chip:hover {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(122, 31, 51, 0.25);
}
.alias-chip.is-copied {
  background: var(--olive);
  border-color: var(--olive);
  border-style: solid;
  color: var(--cream);
}
.alias-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.alias-chip-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--wine);
  color: var(--cream);
  transition: background var(--t-base);
}
.alias-chip:hover .alias-chip-tag,
.alias-chip.is-copied .alias-chip-tag {
  background: var(--cream);
  color: var(--wine-deep);
}
.alias-copy-label {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.alias-copy-icon { flex-shrink: 0; }

/* Variante "pill" en el CTA final (sobre fondo bordó) */
.cta-alias {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cta-alias-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--champagne);
}
.cta-alias-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 1.5px dashed rgba(228, 198, 132, 0.7);
  border-radius: 100px;
  background: rgba(255, 252, 244, 0.06);
  color: var(--champagne);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base);
}
.cta-alias-pill:hover {
  background: var(--champagne);
  color: var(--wine-deep);
  border-color: var(--champagne);
  border-style: solid;
  transform: translateY(-2px);
}
.cta-alias-pill.is-copied {
  background: var(--olive);
  color: var(--cream);
  border-color: var(--olive);
  border-style: solid;
}


/* ============================================================
   13. SECCIÓN UBICACIÓN
   ============================================================ */
.section-ubicacion {
  background:
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(107, 110, 62, 0.12), transparent 60%),
    var(--cream-soft);
  position: relative;
}
.section-ubicacion::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--terracotta), var(--wine), var(--plum));
}

.ubicacion-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.map-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  min-height: 420px;
  background: var(--beige);
}
.map-wrapper {
  border: 2px solid var(--gold);
  box-shadow: 0 18px 40px rgba(122, 31, 51, 0.12);
}
.map-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(1.05) contrast(1.02);
}

.ubicacion-info {
  background: linear-gradient(160deg, #FFFCF4 0%, #F8EDCF 100%);
  border: 1px solid var(--champagne);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 18px 40px rgba(122, 31, 51, 0.08);
  position: relative;
  overflow: hidden;
}
.ubicacion-info::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-sunset);
}
.ubicacion-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.ubicacion-place {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--wine);
  margin-bottom: 6px;
  line-height: 1.1;
}
.ubicacion-town {
  font-family: var(--font-body);
  color: var(--ink-soft);
  margin-bottom: 36px;
}
.ubicacion-when {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.when-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.when-date {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
}
.when-time {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
}
.ubicacion-info .btn { align-self: flex-start; }


/* ============================================================
   14. SECCIÓN FAQ
   ============================================================ */
.section-faq { background: var(--cream); }

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
  transition: background var(--t-base);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: color var(--t-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--wine);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
.faq-item[open] summary { color: var(--wine); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--wine); }

.faq-content {
  padding: 0 0 24px;
  animation: fadeIn 320ms ease;
}
.faq-content p {
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 720px;
}


/* ============================================================
   15. CTA FINAL
   ============================================================ */
.section-cta {
  background: var(--cream);
  padding-top: 60px;
}
.cta-box {
  background: linear-gradient(165deg, #401120 0%, #5C1A2B 60%, #6B1F2E 100%);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 96px) clamp(32px, 6vw, 80px);
  text-align: center;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(217, 196, 154, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(184, 148, 86, 0.14), transparent 60%);
  pointer-events: none;
}
.cta-box > * { position: relative; z-index: 1; }
.cta-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 24px;
  color: var(--cream);
}
.cta-title em {
  font-style: italic;
  color: var(--champagne);
}
.cta-text {
  max-width: 580px;
  margin: 0 auto 20px;
  color: rgba(250, 246, 238, 0.85);
  line-height: 1.65;
}
.cta-text-small {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 40px;
}
.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-box .btn-outline {
  color: var(--cream);
  border-color: rgba(250, 246, 238, 0.4);
}
.cta-box .btn-outline:hover {
  background: var(--cream);
  color: var(--wine);
  border-color: var(--cream);
}
.cta-box .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--wine-deep);
}
.cta-box .btn-primary:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--wine-deep);
  box-shadow: 0 12px 36px rgba(217, 196, 154, 0.3);
}


/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer {
  background:
    radial-gradient(ellipse 40% 60% at 0% 0%, rgba(122, 31, 51, 0.35), transparent 60%),
    radial-gradient(ellipse 40% 60% at 100% 100%, rgba(199, 154, 74, 0.18), transparent 60%),
    #1a1612;
  color: rgba(250, 246, 238, 0.7);
  padding: 80px 0 40px;
  margin-top: 0;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-sunset);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250, 246, 238, 0.1);
}
.footer-brand .brand-mark {
  border-color: var(--champagne);
  color: var(--champagne);
  margin-bottom: 16px;
}
.footer-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--cream);
  margin-bottom: 6px;
}
.footer-tag {
  font-style: italic;
  font-family: var(--font-display);
  color: rgba(250, 246, 238, 0.55);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav a {
  font-size: 14px;
  color: rgba(250, 246, 238, 0.7);
}
.footer-nav a:hover { color: var(--champagne); }

.footer-event p {
  font-size: 14px;
  line-height: 1.7;
}
.footer-event p:first-child {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--cream);
  margin-bottom: 6px;
}

.footer-bottom {
  padding-top: 32px;
  text-align: center;
  font-size: 13px;
  color: rgba(250, 246, 238, 0.4);
}


/* ============================================================
   17. WHATSAPP FLOTANTE
   ============================================================ */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.4);
  z-index: 90;
  transition: transform var(--t-base), box-shadow var(--t-base);
  animation: waPulse 2.4s ease-in-out infinite;
}
.wa-float:hover {
  transform: scale(1.08);
  color: white;
  box-shadow: 0 12px 36px rgba(37, 211, 102, 0.55);
}


/* ============================================================
   18. MODAL DE RESERVA
   ============================================================ */
body.modal-open { overflow: hidden; }

.reservation-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(31, 27, 23, 0.58);
  backdrop-filter: blur(8px);
}
.reservation-modal[hidden] { display: none; }

.reservation-dialog {
  position: relative;
  width: min(100%, 480px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: linear-gradient(160deg, #FFFCF4 0%, #FAEFD2 100%);
  border: 1px solid var(--champagne);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 42px 36px 36px;
}

.reservation-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--t-base), color var(--t-base);
}
.reservation-close:hover {
  background: rgba(122, 31, 51, 0.08);
  color: var(--wine);
}

.reservation-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.reservation-title {
  font-size: clamp(2rem, 8vw, 2.7rem);
  color: var(--wine-deep);
  margin-bottom: 10px;
}
.reservation-copy {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  margin-bottom: 26px;
}

.reservation-form {
  display: grid;
  gap: 16px;
}
.reservation-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reservation-field input,
.reservation-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 252, 244, 0.82);
  color: var(--ink);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  padding: 14px 15px;
  outline: none;
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.reservation-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--wine) 50%),
    linear-gradient(135deg, var(--wine) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.reservation-field input:focus,
.reservation-field select:focus {
  border-color: var(--wine);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(122, 31, 51, 0.12);
}

.reservation-alias {
  border: 1px solid rgba(199, 154, 74, 0.85);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 80% 100% at 100% 100%, rgba(199, 91, 60, 0.18), transparent 62%),
    linear-gradient(135deg, #FFFCF4 0%, #F7E1AF 100%);
  box-shadow: 0 14px 34px rgba(122, 31, 51, 0.12);
  padding: 18px;
}
.reservation-alias[hidden] { display: none; }

.reservation-alias-kicker {
  color: var(--wine);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.reservation-alias-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1.5px dashed var(--wine);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.72);
  padding: 9px 10px 9px 9px;
}
.reservation-alias-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  background: var(--wine);
  color: var(--cream);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  padding: 0 13px;
}
.reservation-alias-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--wine-deep);
  font-size: 1rem;
  line-height: 1.2;
}
.reservation-alias-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border-radius: var(--radius-sm);
  color: var(--wine);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 8px;
  transition: background var(--t-base), color var(--t-base);
}
.reservation-alias-copy:hover,
.reservation-alias-copy.is-copied {
  background: rgba(122, 31, 51, 0.1);
  color: var(--wine-deep);
}

@media (max-width: 480px) {
  .reservation-dialog { padding: 38px 24px 28px; }
  .reservation-alias { padding: 14px; }
  .reservation-alias-row {
    grid-template-columns: auto 1fr;
    border-radius: var(--radius-md);
  }
  .reservation-alias-copy {
    grid-column: 1 / -1;
    justify-content: center;
    border-top: 1px solid rgba(122, 31, 51, 0.14);
    border-radius: 0;
    padding-top: 9px;
  }
}

.reservation-status {
  min-height: 22px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.reservation-status[data-status="error"] { color: var(--wine); }
.reservation-status[data-status="loading"] { color: var(--gold-deep); }

.reservation-form .btn:disabled {
  opacity: 0.68;
  cursor: wait;
  transform: none;
  box-shadow: none;
}


/* ============================================================
   19. ANIMACIONES
   ============================================================ */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.4); }
  50%      { box-shadow: 0 8px 28px rgba(37, 211, 102, 0.4), 0 0 0 16px rgba(37, 211, 102, 0); }
}

/* Reveal on scroll (lo activa script.js) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms cubic-bezier(.2,.6,.2,1), transform 800ms cubic-bezier(.2,.6,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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


/* ============================================================
   19. RESPONSIVE
   ============================================================ */

/* Tablet ---------------------------------------------------- */
@media (max-width: 1024px) {
  .evento-grid { grid-template-columns: 1fr; }
  .ubicacion-grid { grid-template-columns: 1fr; }
  .menu { grid-template-columns: 1fr; gap: 24px; }
  .exp-grid { grid-template-columns: 1fr 1fr; }
  .tickets-grid { grid-template-columns: 1fr; gap: 36px; }
  .compare { padding: 28px 20px; }

  /* Galería: 4 columnas */
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
  }
  .gallery-item { grid-column: span 2; }
  .gallery-item--lg { grid-column: span 2; grid-row: span 2; }
  .gallery-item--wide { grid-column: span 4; }
}

/* Mobile ---------------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 16px; }

  /* Header */
  .brand { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav { position: static; }
  .nav-list {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    flex-direction: column;
    background: var(--cream);
    padding: 96px 28px 40px;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-16px);
    transition: opacity var(--t-base), transform var(--t-slow), visibility 0s linear var(--t-slow);
    box-shadow: var(--shadow-md);
    z-index: 99;
    overflow-y: auto;
  }
  .nav-list.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity var(--t-base), transform var(--t-slow), visibility 0s;
  }
  .nav-list li { width: 100%; }
  .nav-list a {
    display: block;
    padding: 16px 0;
    font-size: 1.4rem;
    font-family: var(--font-display);
    color: var(--ink);
    text-shadow: none;
    border-bottom: 1px solid var(--line);
  }
  .nav-list a:hover { color: var(--wine); }
  .nav-list a::after { display: none; }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 88px 0 60px;
  }
  /* Foto distinta para mobile (poné tu archivo en assets/lugar/foto-lugar-mobile.jpg).
     Si querés probar otra ruta o formato, cambiá la URL acá abajo.
     Usamos JPG (mucho más liviano que PNG → Safari iOS lo carga sin problema). */
  .hero-bg-image {
    background-image: url('assets/lugar/foto-lugar-mobile.jpg');
    /* En portrait conviene mostrar más arriba para no perder el cielo */
    background-position: center;
  }
  .hero-brand-mark {
    width: clamp(165px, 52vw, 215px);
    margin-top: -12px;
  }
  .hero-eyebrow { margin-bottom: 22px; }
  .hero-title-logo { margin-bottom: 22px; }
  .hero-logo { width: clamp(235px, 76vw, 360px); }
  .hero-subtitle {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 42px;
    letter-spacing: 0.28em;
    line-height: 1.45;
  }
  .hero-subtitle-separator { display: none; }
  .hero-meta {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .hero-meta-divider {
    width: 40px;
    height: 1px;
  }
  .hero-meta-item {
    padding: 0;
    min-width: 0;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta .btn { width: 100%; }
  .hero-scroll { display: none; }

  /* Sección Evento */
  .evento-highlights { grid-template-columns: 1fr 1fr; }
  .evento-categories { gap: 6px; }
  .evento-categories li { padding: 8px 14px; font-size: 11px; }

  /* Bodegas */
  .bodegas-grid { grid-template-columns: 1fr 1fr; }
  .bodega-card { min-height: 100px; padding: 22px 12px; }
  .bodega-card span { font-size: 1.1rem; }

  /* Entradas */
  .ticket { padding: 36px 28px; }
  .ticket-kicker { font-size: 1.7rem; }
  .compare-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 12px;
  }
  .compare-row > div { text-align: left; }
  .compare-row > div:not(:first-child)::before {
    content: attr(data-label) ': ';
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 8px;
  }
  .compare-row-head { display: none; }

  /* Experiencia */
  .exp-grid { grid-template-columns: 1fr; }
  .exp-card { padding: 32px 28px; }

  /* Galería: 2 columnas en mobile */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: 10px;
  }
  .gallery-item,
  .gallery-item--lg,
  .gallery-item--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
  .gallery-item--lg { grid-row: span 2; }
  .gallery-placeholder { font-size: 10px; letter-spacing: 0.24em; }

  /* Alias card */
  .alias-card { padding: 28px 22px; }
  .alias-card-actions { width: 100%; min-width: 0; align-items: stretch; }
  .alias-chip { font-size: 13px; padding: 12px 14px; gap: 8px; }
  .alias-chip-tag { padding: 3px 8px; font-size: 9px; letter-spacing: 0.18em; }

  /* Ubicación */
  .ubicacion-info { padding: 36px 28px; }
  .map-wrapper { min-height: 320px; }

  /* FAQ */
  .faq-item summary { font-size: 1.08rem; padding: 20px 0; gap: 14px; }

  /* CTA final */
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-buttons .btn { width: 100%; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 36px; text-align: left; }

  /* WhatsApp flotante un poco más chico en mobile */
  .wa-float {
    right: 18px;
    bottom: 18px;
    width: 52px;
    height: 52px;
  }
}

/* Small mobile --------------------------------------------- */
@media (max-width: 380px) {
  .container { padding: 0 20px; }
  .hero-title { font-size: 3.4rem; }
  .ticket { padding: 28px 22px; }
  .menu-section { padding: 28px 22px; }
}