/* ============================================================
   Easytour — style.css
   Sistema de diseño completo · Mobile-first · 3 breakpoints
   Paleta: verde #2e7d32, oscuro #1b5e20, claro #66bb6a,
           muy claro #e8f5e9, amarillo CTA #fdd835, gris #424242
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --verde:        #2e7d32;
  --verde-oscuro: #1b5e20;
  --verde-claro:  #66bb6a;
  --verde-bg:     #e8f5e9;
  --amarillo:     #fdd835;
  --amarillo-h:   #f9a825;
  --gris-texto:   #424242;
  --gris-medio:   #757575;
  --gris-fondo:   #f5f5f5;
  --gris-borde:   #e0e0e0;
  --blanco:       #ffffff;
  --negro:        #212121;

  --fuente-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;

  --sombra-card:  0 2px 12px rgba(0,0,0,.10);
  --sombra-btn:   0 3px 8px rgba(0,0,0,.20);
  --radio:        8px;
  --radio-lg:     14px;
  --transicion:   0.22s ease;

  /* === Tipografia base (16/05/2026) === */
  /* Nivel Medio +18%: optimizado para lectura comoda (Jorge, 70 anos) */
  /* Valores ORIGINALES para reversion rapida:
     --font-size-base: 1rem;
     --font-size-small: 0.875rem;
     --font-size-help: 0.85rem;
     --font-size-input: 1rem;
     --line-height-base: 1.6; */
  --font-size-base:    1.18rem;   /* cuerpo p, divs, listas */
  --font-size-small:   1rem;      /* leyendas, captions */
  --font-size-help:    0.95rem;   /* texto de ayuda en forms */
  --font-size-input:   1.1rem;    /* inputs, selects, textareas */
  --line-height-base:  1.65;      /* legibilidad mejorada */
  /* NO TOCAR heros ni H1: conservan sus clamp() actuales */
}

/* ── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--fuente-base);
  color: var(--gris-texto);
  background: var(--blanco);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── TIPOGRAFIA GLOBAL — escala +18% (16/05/2026) ───────────── */
/* Cuerpo y formularios usan variables. Heros, CTAs grandes y
   numeros gigantes mantienen sus tamanos propios (no se tocan). */

p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

ul, ol {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="password"],
select,
textarea {
  font-size: var(--font-size-input);
}

label {
  font-size: var(--font-size-input);
}

.help,
.form-help,
.field-help {
  font-size: var(--font-size-help);
}

small,
caption,
figcaption {
  font-size: var(--font-size-small);
}

main { flex: 1; }

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-oscuro); }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--fuente-base); }

/* ── TIPOGRAFÍA ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--negro);
  line-height: 1.25;
  font-weight: 700;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.4rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1rem; }
.lead { font-size: 1.1rem; color: var(--gris-medio); }

/* ── CONTENEDOR ─────────────────────────────────────────────── */
/* .contenedor es alias de .container (compat con home y plantilla-proximamente) */
.container,
.contenedor {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── HEADER ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--verde-oscuro);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

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

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo img {
  height: 40px;
  width: auto;
}
.logo-texto {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--blanco);
  letter-spacing: -.5px;
}
.logo-texto span { color: var(--amarillo); }

/* Burger (mobile) */
.nav-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 8px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--blanco);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Nav */
.site-nav {
  display: none;
  position: absolute;
  top: 62px;
  left: 0;
  right: 0;
  background: var(--verde-oscuro);
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 8px 0 16px;
}
.site-nav.open { display: block; }

.nav-menu { display: flex; flex-direction: column; }
.nav-menu > li { position: relative; }

.nav-menu > li > a,
.nav-menu > li > button {
  display: block;
  padding: 11px 20px;
  color: var(--blanco);
  font-weight: 600;
  font-size: .95rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background var(--transicion);
}
.nav-menu > li > a:hover,
.nav-menu > li > button:hover {
  background: rgba(255,255,255,.1);
  color: var(--amarillo);
}

/* Desplegable */
.has-dropdown > button::after {
  content: ' ▾';
  font-size: .7rem;
}
.dropdown {
  display: none;
  background: var(--verde);
  padding: 4px 0;
}
.has-dropdown.open .dropdown { display: block; }
.dropdown a {
  display: block;
  padding: 12px 32px;
  color: rgba(255,255,255,.9);
  font-size: .95rem;
  min-height: 44px;
  transition: background var(--transicion);
}
.dropdown a:hover {
  background: rgba(255,255,255,.12);
  color: var(--amarillo);
}

/* CTA reservar (header) */
.btn-header-cta {
  display: none; /* visible desde tablet */
  background: var(--amarillo);
  color: var(--negro) !important;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: var(--radio);
  font-size: .9rem;
  white-space: nowrap;
  transition: background var(--transicion), transform var(--transicion);
  flex-shrink: 0;
}
.btn-header-cta:hover {
  background: var(--amarillo-h);
  transform: translateY(-1px);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--verde-oscuro);
  color: rgba(255,255,255,.85);
  margin-top: auto;
}

.footer-top {
  padding: 40px 0 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.footer-brand .logo-texto { font-size: 1.2rem; }
.footer-tagline {
  margin-top: 8px;
  font-size: .88rem;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
}

.footer-col h4 {
  color: var(--amarillo);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.footer-col ul li { margin-bottom: 7px; }
.footer-col ul li a {
  color: rgba(255,255,255,.8);
  font-size: .95rem;
  transition: color var(--transicion);
  display: inline-block;
  padding: 4px 0;
}
.footer-col ul li a:hover { color: var(--amarillo); }

.nap-list { display: flex; flex-direction: column; gap: 8px; }
.nap-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.5;
}
.nap-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.footer-social { display: flex; gap: 10px; margin-top: 8px; }
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radio);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  transition: all var(--transicion);
}
.social-btn:hover {
  border-color: var(--amarillo);
  color: var(--amarillo);
  background: rgba(255,255,255,.05);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.footer-bottom p { font-size: .85rem; color: rgba(255,255,255,.6); margin: 0; }
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.footer-legal a {
  font-size: .85rem;
  color: rgba(255,255,255,.6);
}
.footer-legal a:hover { color: var(--amarillo); }

/* ── BOTÓN WHATSAPP FLOTANTE ────────────────────────────────── */
.wa-flotante {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.5);
  text-decoration: none;
  transition: all var(--transicion);
}
/* Pulsación de radar COMPUESTA: un anillo detrás del botón que escala y se
   desvanece con transform/opacity (GPU), en vez de animar box-shadow (paint). */
.wa-flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25d366;
  animation: wa-pulse 2.5s ease-out infinite;
  will-change: transform, opacity;
}
.wa-flotante:hover {
  background: #1da855;
  transform: scale(1.05);
  color: var(--blanco);
}
.wa-flotante:hover::before { animation: none; }
.wa-flotante svg { width: 28px; height: 28px; flex-shrink: 0; }

@media (min-width: 768px) {
  .wa-flotante { bottom: 20px; right: 20px; }
}

@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-flotante::before { animation: none; }
}

/* ── BREADCRUMBS ────────────────────────────────────────────── */
.breadcrumb-nav {
  background: var(--gris-fondo);
  border-bottom: 1px solid var(--gris-borde);
  padding: 8px 0;
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: .9rem;
  color: var(--gris-medio);
}
.breadcrumb-list li { display: flex; align-items: center; gap: 4px; }
.breadcrumb-list li:not(:last-child)::after { content: '›'; }
.breadcrumb-list a { color: var(--verde); }
.breadcrumb-list a:hover { color: var(--verde-oscuro); }
.breadcrumb-list [aria-current="page"] { color: var(--gris-medio); }

/* ── BADGE DE CUPOS ─────────────────────────────────────────── */
.cupos-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cupos-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cupos-badge.disponible {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.cupos-badge.disponible::before {
  background: #4caf50;
  box-shadow: 0 0 0 3px rgba(76,175,80,.25);
  animation: blink-verde 1.8s ease-in-out infinite;
}
.cupos-badge.por-agotarse {
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffe082;
}
.cupos-badge.por-agotarse::before {
  background: #ffc107;
  box-shadow: 0 0 0 3px rgba(255,193,7,.25);
  animation: blink-amarillo 1.2s ease-in-out infinite;
}
.cupos-badge.agotado {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}
.cupos-badge.agotado::before {
  background: #ef5350;
}

@keyframes blink-verde {
  0%, 100% { opacity: 1; } 50% { opacity: .4; }
}
@keyframes blink-amarillo {
  0%, 100% { opacity: 1; } 50% { opacity: .5; }
}

/* ── BOTONES ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radio);
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  transition: all var(--transicion);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--amarillo);
  color: var(--negro);
  box-shadow: var(--sombra-btn);
}
.btn-primary:hover {
  background: var(--amarillo-h);
  transform: translateY(-2px);
  color: var(--negro);
}
.btn-secondary {
  background: transparent;
  color: var(--verde);
  border-color: var(--verde);
}
.btn-secondary:hover {
  background: var(--verde);
  color: var(--blanco);
}
.btn-verde {
  background: var(--verde);
  color: var(--blanco);
  box-shadow: var(--sombra-btn);
}
.btn-verde:hover {
  background: var(--verde-oscuro);
  transform: translateY(-2px);
  color: var(--blanco);
}
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn-block { width: 100%; }

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.card-img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 20px; }
.card-title { font-size: 1.1rem; margin-bottom: 8px; }
.card-text { font-size: .9rem; color: var(--gris-medio); margin-bottom: 16px; }
.card-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--gris-borde);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── PRECIO ─────────────────────────────────────────────────── */
.precio {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--verde-oscuro);
}
.precio-persona {
  font-size: .85rem;
  font-weight: 400;
  color: var(--gris-medio);
}

/* ── SECCIONES ──────────────────────────────────────────────── */
.section { padding: 52px 0; }
.section-sm { padding: 32px 0; }
.section-lg { padding: 80px 0; }
.section-verde { background: var(--verde-bg); }
.section-oscuro { background: var(--verde-oscuro); color: var(--blanco); }
.section-oscuro h2 { color: var(--blanco); }
.section-gris { background: var(--gris-fondo); }

.section-header { text-align: center; margin-bottom: 36px; }
.section-header h2 { margin-bottom: 10px; }
.section-header p { color: var(--gris-medio); max-width: 560px; margin: 0 auto; }

/* ── GRID ───────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(145deg, var(--verde-oscuro) 0%, var(--verde) 60%, var(--verde-claro) 100%);
  color: var(--blanco);
  padding: 34px 0 34px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/patron-hero.svg') repeat center/200px;
  opacity: .04;
  pointer-events: none;
}
.hero h1 { color: var(--blanco); margin-bottom: 16px; }
.hero .lead { color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto 16px; }
.hero .lead:last-child { margin-bottom: 0; }
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* ── FORMULARIOS ────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: var(--font-size-input);
  font-weight: 600;
  color: var(--gris-texto);
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gris-borde);
  border-radius: var(--radio);
  font-size: var(--font-size-input);
  font-family: var(--fuente-base);
  color: var(--gris-texto);
  background: var(--blanco);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.form-control:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}
select.form-control { cursor: pointer; }

/* ── ALERTAS / AVISOS ───────────────────────────────────────── */
.alert {
  padding: 14px 18px;
  border-radius: var(--radio);
  font-size: .9rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.alert-verde { background: var(--verde-bg); border-left: 4px solid var(--verde); color: var(--verde-oscuro); }
.alert-amarillo { background: #fff8e1; border-left: 4px solid #ffc107; color: #5d4037; }
.alert-rojo { background: #ffebee; border-left: 4px solid #e53935; color: #b71c1c; }

/* ── UTILIDADES ─────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mt-sm { margin-top: 12px; }
.mb-sm { margin-bottom: 12px; }
.mt-md { margin-top: 24px; }
.mb-md { margin-bottom: 24px; }
.mt-lg { margin-top: 48px; }
.mb-lg { margin-bottom: 48px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.w-100 { width: 100%; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

/* ── SKIP LINK (accesibilidad) ──────────────────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--amarillo);
  color: var(--negro);
  padding: 8px 16px;
  font-weight: 700;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── SPINNER CARGA ──────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border: 3px solid rgba(255,255,255,.4);
  border-top-color: var(--blanco);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOAST / NOTIFICACIÓN ───────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: var(--verde-oscuro);
  color: var(--blanco);
  padding: 12px 20px;
  border-radius: var(--radio);
  font-size: .9rem;
  box-shadow: var(--sombra-card);
  z-index: 1100;
  opacity: 0;
  transform: translateY(10px);
  transition: all .3s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINTS
   - sm: 576px  (móvil grande / plegables)
   - md: 768px  (tablet)
   - lg: 1024px (desktop)
   ═══════════════════════════════════════════════════════════════ */

/* ── sm ≥576px ──────────────────────────────────────────────── */
@media (min-width: 576px) {
  .hero-ctas { flex-direction: row; justify-content: center; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── md ≥768px ──────────────────────────────────────────────── */
@media (min-width: 768px) {
  .container,
  .contenedor { padding: 0 24px; }

  /* Header — desktop nav */
  .nav-toggle { display: none; }
  .btn-header-cta { display: inline-flex; }

  .site-nav {
    display: flex !important;
    position: static;
    border: none;
    padding: 0;
    flex: 1;
    justify-content: center;
  }
  .nav-menu {
    flex-direction: row;
    align-items: center;
    gap: 2px;
  }
  .nav-menu > li > a,
  .nav-menu > li > button {
    padding: 8px 14px;
    border-radius: var(--radio);
    font-size: .88rem;
  }
  .has-dropdown { position: relative; }
  .dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    border-radius: var(--radio);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    padding: 6px 0;
    display: none !important;
  }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { display: block !important; }
  .dropdown a { padding: 10px 18px; }

  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 46px 0 42px; }
  .card-img { height: 220px; }
}

/* ── lg ≥1024px ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .container,
  .contenedor { padding: 0 32px; }
  .footer-top { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .section { padding: 72px 0; }
  .hero { padding: 54px 0 46px; }
}

/* ── CARTELERA DE ESPECTÁCULOS ──────────────────────────────── */
.cartelera-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--gris-texto);
  transition: all var(--transicion);
  margin-bottom: 10px;
}
.cartelera-card:hover {
  border-color: var(--verde);
  box-shadow: 0 4px 16px rgba(46,125,50,.15);
  transform: translateY(-2px);
  color: var(--gris-texto);
}
.cartelera-fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 8px;
  background: var(--verde-oscuro);
  border-radius: var(--radio);
  flex-shrink: 0;
}
.cartelera-dia {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blanco);
  line-height: 1;
}
.cartelera-mes {
  font-size: .75rem;
  font-weight: 700;
  color: var(--amarillo);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cartelera-dow {
  font-size: .72rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
}
.cartelera-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.cartelera-artista {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--negro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartelera-detalle {
  font-size: .82rem;
  color: var(--gris-medio);
}
/* ── T4.1: PRECIO PROTAGONISTA + INSIGNIA DE REGRESO ────────── */
.cartelera-precio {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.cartelera-precio strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: #2e7d32;
}
.cartelera-precio-unidad {
  font-size: .82rem;
  color: var(--gris-medio);
}
.cartelera-regreso {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
}
.cartelera-regreso--domicilio { background: #eaf3de; color: #27500a; }
.cartelera-regreso--partida   { background: #f1efe8; color: #444441; }
.cartelera-accion {
  flex-shrink: 0;
}
.cartelera-agotado {
  display: inline-block;
  background: #f3f4f6;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: .3rem .7rem;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
}
.cartelera-card.is-agotado {
  opacity: .6;
  cursor: not-allowed;
}
.cartelera-card.is-agotado:hover {
  border-color: var(--gris-borde);
  box-shadow: none;
  transform: none;
}
.cartelera-foto {
  width: 116px;
  height: 76px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radio);
  background: #eef0ee;
  display: block;
}

@media (max-width: 575px) {
  .cartelera-card { padding: 12px 14px; gap: 12px; }
  .cartelera-foto { width: 84px; height: 60px; }
  .cartelera-fecha { min-width: 48px; padding: 6px; }
  .cartelera-dia { font-size: 1.2rem; }
  .cartelera-artista { font-size: .95rem; }
  .cartelera-accion .cupos-badge { font-size: .7rem; padding: 3px 8px; }
  .cartelera-agotado { font-size: .66rem; padding: .25rem .45rem; max-width: 96px; white-space: normal; }
  /* T4.2 Punto B: en movil el bloque de texto pasa debajo de la foto/fecha,
     a ancho completo, alineado a la izquierda y sin truncar el artista. */
  .cartelera-card { flex-wrap: wrap; }
  .cartelera-info { flex-basis: 100%; min-width: 0; }
  .cartelera-artista { white-space: normal; overflow: visible; text-overflow: clip; }
  .cartelera-accion { flex-basis: 100%; }
  /* Indicador de pasos: oculto en movil (se desborda); en escritorio se mantiene */
  .reserva-steps { display: none !important; }
}

/* ── T1 (28-jun): panel desplegable "Ver detalles del show" ──────────
   Clases nuevas para el resumen por evento en /transfer-monticello/.
   El espaciado entre tarjetas se traslada de .cartelera-card al
   contenedor .cartelera-item, pero SOLO dentro del item: .cartelera-card
   usada suelta (p. ej. en reserva-de-cupos) conserva su margin-bottom.
   El panel se estiliza con el selector mas especifico .cartelera-item
   .cartelera-detalle, para no alterar ninguna otra regla existente. */
.cartelera-item {
  margin-bottom: 10px;
}
.cartelera-item .cartelera-card {
  margin-bottom: 0;
}
.cartelera-detalle-toggle {
  display: block;
  margin: 8px auto 0;
  min-height: 48px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--verde-oscuro);
  background: transparent;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: all var(--transicion);
}
.cartelera-detalle-toggle:hover,
.cartelera-detalle-toggle[aria-expanded="true"] {
  border-color: var(--verde);
  color: var(--verde);
  background: var(--verde-bg);
}
.cartelera-item .cartelera-detalle {
  margin: 8px 0 2px;
  padding: 16px 18px;
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gris-texto);
}
.cartelera-detalle-texto {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gris-texto);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.cartelera-detalle-ticket {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  font-size: 16px;
  font-weight: 600;
  color: var(--verde);
  text-decoration: underline;
}
.cartelera-detalle-ticket:hover {
  color: var(--verde-oscuro);
}

/* ── T4.2 Punto A: hero de precio de /transfer-monticello/ en movil ──
   El escritorio queda intacto (los estilos del hero son inline); estas
   reglas solo actuan en pantalla angosta: centran el bloque y dejan el
   monto en una sola linea. */
@media (max-width: 575px) {
  .hero-precio-bloque {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    text-align: center;
  }
  .hero-precio-monto {
    font-size: 1.6rem !important;
    white-space: nowrap;
  }
  .hero-precio-sub {
    font-size: .85rem !important;
  }
}

/* ── FORMULARIO DE RESERVA ──────────────────────────────────── */
.reserva-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.reserva-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--gris-medio);
}
.reserva-step.active { color: var(--verde); font-weight: 700; }
.reserva-step.completed { color: var(--verde-claro); }
.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  border: 2px solid var(--gris-borde);
  color: var(--gris-medio);
}
.reserva-step.active .step-number {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
}
.reserva-step.completed .step-number {
  background: var(--verde-claro);
  border-color: var(--verde-claro);
  color: var(--blanco);
}
.step-connector {
  width: 40px;
  height: 2px;
  background: var(--gris-borde);
  flex-shrink: 0;
}
.reserva-step.completed + .step-connector { background: var(--verde-claro); }

.reserva-panel {
  display: none;
  animation: fadeIn .3s ease;
}
.reserva-panel.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.evento-seleccionado {
  background: var(--verde-bg);
  border: 1px solid var(--verde-claro);
  border-radius: var(--radio);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.evento-seleccionado strong {
  color: var(--verde-oscuro);
}

.pago-card {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 12px;
  transition: border-color var(--transicion);
}
.pago-card:hover { border-color: var(--verde); }
.pago-card h4 { margin-bottom: 8px; }
.datos-banco {
  background: var(--gris-fondo);
  border-radius: var(--radio);
  padding: 14px;
  font-size: .88rem;
  line-height: 1.8;
}
.datos-banco .copiar-btn {
  background: var(--verde);
  color: var(--blanco);
  border: none;
  border-radius: var(--radio);
  padding: 10px 18px;
  min-height: 40px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background var(--transicion);
}
.datos-banco .copiar-btn:hover { background: var(--verde-oscuro); }

/* ── MOBILE TWEAKS (touch + footer compacto) ────────────────── */
@media (max-width: 767px) {
  .reserva-steps { gap: 24px; }

  /* Botones más grandes para touch */
  .btn { padding: 14px 20px; font-size: .98rem; min-height: 48px; }
  .btn-sm { padding: 10px 16px; min-height: 40px; }

  /* Footer compacto en móvil (sin sacrificar legibilidad) */
  .site-footer .footer-top { padding: 28px 0 18px; gap: 24px; }
  .site-footer .footer-col h4 { margin-bottom: 10px; }
  .site-footer .footer-col ul li { margin-bottom: 6px; }
  .site-footer .footer-social { margin-top: 12px; }
  .footer-bottom { padding: 12px 0; gap: 8px; }

  /* Ocultar footer en página de reserva para dar espacio al formulario */
  body.page-reserva .site-footer .footer-top { display: none; }
  body.page-reserva .site-footer .footer-bottom p:first-child { font-size: .78rem; }
}

/* ============================================
   PLANTILLA PROXIMAMENTE
   ============================================ */
.hero-proximamente {
  padding: 60px 0;
  background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
  text-align: center;
}
.hero-proximamente-inner {
  max-width: 700px;
}
.hero-emoji {
  font-size: 4rem;
  display: block;
  margin-bottom: 15px;
}
.hero-proximamente h1 {
  color: #1b5e20;
  font-size: clamp(1.55rem, 5vw, 2.2rem);
  line-height: 1.25;
  margin: 0 0 15px 0;
}
.hero-intro {
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  color: #424242;
  line-height: 1.6;
  margin-bottom: 25px;
}
.badge-proximamente {
  display: inline-block;
  background: #fdd835;
  color: #212121;
  padding: 8px 24px;
  border-radius: 25px;
  font-weight: bold;
  margin-bottom: 30px;
  font-size: 0.95rem;
}
.cta-proximamente {
  background: #ffffff;
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  margin-bottom: 30px;
}
.cta-proximamente p {
  margin: 0 0 20px 0;
  color: #424242;
}
.cta-proximamente .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  min-height: 46px;
  margin: 5px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s;
}
.cta-proximamente .btn:hover {
  transform: translateY(-2px);
}
.btn-whatsapp {
  background: #25D366;
  color: #ffffff;
}
.btn-secundario {
  background: #2e7d32;
  color: #ffffff;
}
.info-easytour {
  text-align: left;
  background: #f5f5f5;
  padding: 25px 30px;
  border-radius: 10px;
  border-left: 4px solid #2e7d32;
}
.info-easytour h3 {
  color: #1b5e20;
  margin-top: 0;
}
.info-easytour ul {
  list-style: none;
  padding: 0;
  margin: 15px 0 0 0;
}
.info-easytour li {
  padding: 6px 0;
  color: #424242;
}
@media (max-width: 600px) {
  .hero-proximamente { padding: 40px 16px; }
  .cta-proximamente { padding: 24px 18px; }
  .cta-proximamente .btn { display: flex; width: 100%; margin: 8px 0; }
  .info-easytour { padding: 22px 20px; }
  .info-easytour li { padding: 8px 0; font-size: .95rem; }
}

/* ============================================
   PAGINA INICIO - HOME
   ============================================ */

/* HERO PRINCIPAL */
.hero-principal {
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
  color: #ffffff;
  padding: 80px 20px;
  text-align: center;
}
.hero-inner {
  max-width: 900px;
}
.hero-principal h1 {
  font-size: 2.6rem;
  margin: 0 0 20px 0;
  line-height: 1.2;
  color: #ffffff;
}
.hero-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 35px;
  color: #e8f5e9;
}
.hero-acciones {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-hero-primary {
  display: inline-block;
  background: #fdd835;
  color: #212121;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.05rem;
  transition: all 0.2s;
}
.btn-hero-primary:hover {
  background: #f9a825;
  transform: translateY(-2px);
}
.btn-hero-secondary {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-hero-secondary:hover {
  background: #ffffff;
  color: #1b5e20;
}

/* TITULOS DE SECCION */
.seccion-titulo {
  text-align: center;
  color: #1b5e20;
  font-size: 2rem;
  margin: 0 0 10px 0;
}
.seccion-bajada {
  text-align: center;
  color: #757575;
  margin-bottom: 40px;
  font-size: 1.05rem;
}

/* SERVICIOS DESTACADOS */
.servicios-destacados {
  padding: 70px 20px;
  background: #ffffff;
}
.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 22px;
  margin-bottom: 30px;
}
.card-servicio {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 30px 25px;
  text-align: center;
  position: relative;
  transition: all 0.3s;
}
.card-servicio:hover {
  border-color: #2e7d32;
  box-shadow: 0 8px 25px rgba(46,125,50,0.15);
  transform: translateY(-4px);
}
.card-destacada {
  border-color: #fdd835;
  border-width: 2px;
}
.card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #fdd835;
  color: #212121;
  padding: 5px 16px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: bold;
}
.card-numero {
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: #e8f5e9;
  color: #1b5e20;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 15px;
}
.card-servicio h3 {
  color: #1b5e20;
  margin: 10px 0 15px 0;
  font-size: 1.2rem;
  line-height: 1.3;
}
.card-servicio p {
  color: #424242;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 18px;
}
.card-precio {
  color: #2e7d32;
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 20px;
  padding: 8px;
  background: #e8f5e9;
  border-radius: 6px;
}
.btn-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2e7d32;
  color: #ffffff;
  padding: 12px 22px;
  min-height: 44px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.btn-card:hover {
  background: #1b5e20;
}
.ver-todos {
  text-align: center;
  margin-top: 30px;
}
.link-ver-todos {
  color: #2e7d32;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}
.link-ver-todos:hover {
  text-decoration: underline;
}

/* CTA CARTELERA */
.cta-cartelera {
  background: #fdd835;
  padding: 60px 20px;
  text-align: center;
}
.cta-cartelera-inner {
  max-width: 700px;
}
.cta-cartelera h2 {
  color: #212121;
  margin: 0 0 15px 0;
  font-size: 1.8rem;
}
.cta-cartelera p {
  color: #424242;
  font-size: 1.05rem;
  margin-bottom: 25px;
  line-height: 1.5;
}
.btn-cartelera {
  display: inline-block;
  background: #1b5e20;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.05rem;
  transition: background 0.2s;
}
.btn-cartelera:hover {
  background: #2e7d32;
}

/* POR QUE Easytour */
.por-que-easytour {
  padding: 70px 20px;
  background: #f5f5f5;
}
.grid-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 22px;
}
.beneficio {
  background: #ffffff;
  padding: 25px;
  border-radius: 10px;
  border-left: 4px solid #2e7d32;
}
.beneficio h3 {
  color: #1b5e20;
  margin: 0 0 12px 0;
  font-size: 1.1rem;
}
.beneficio p {
  color: #424242;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* SECCION REVIEWS */
.seccion-reviews {
  padding: 70px 20px;
  background: #ffffff;
}
.reviews-placeholder {
  text-align: center;
  padding: 40px 25px;
  background: #f5f5f5;
  border-radius: 12px;
  border: 2px dashed #e0e0e0;
}
.reviews-placeholder p {
  color: #757575;
  margin-bottom: 20px;
}

/* CTA FINAL */
.cta-final {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  color: #ffffff;
  padding: 70px 20px;
  text-align: center;
}
.cta-final-inner {
  max-width: 700px;
}
.cta-final h2 {
  color: #ffffff;
  font-size: 2rem;
  margin: 0 0 15px 0;
}
.cta-final p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: #e8f5e9;
}

/* MOBILE */
@media (max-width: 768px) {
  .hero-principal { padding: 48px 16px 40px; }
  .hero-principal h1 { font-size: 1.7rem; line-height: 1.25; }
  .hero-principal h1 br { display: none; }
  .hero-lead { font-size: 1rem; margin-bottom: 28px; }
  .hero-acciones { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-acciones .btn-hero-primary,
  .hero-acciones .btn-hero-secondary {
    width: 100%;
    padding: 14px 20px;
    min-height: 48px;
    box-sizing: border-box;
  }
  .servicios-destacados,
  .por-que-easytour,
  .seccion-reviews,
  .cta-cartelera,
  .cta-final { padding: 48px 16px; }
  .seccion-titulo { font-size: 1.45rem; line-height: 1.3; }
  .seccion-bajada { font-size: .98rem; margin-bottom: 28px; }
  .cta-cartelera h2,
  .cta-final h2 { font-size: 1.45rem; line-height: 1.3; }
  .card-servicio { padding: 26px 20px; }
  .card-servicio h3 { font-size: 1.1rem; }
  .card-servicio h3 br { display: none; }
  .card-servicio p { font-size: .95rem; }
  .btn-cartelera,
  .cta-final .btn { width: 100%; max-width: 360px; box-sizing: border-box; }
  .beneficio { padding: 22px 20px; }
}

/* Salto de linea movil en boton amarillo del hero
   (Reserva de cupos - Transporte Arena Monticello)
   Corregido: ahora apunta a las clases .cta-linea-1 y .cta-linea-2
   porque el selector "+ *" no apunta a nodos de texto */
@media (max-width: 768px) {
  .btn-hero-primary .separador-cta {
    display: none;
  }
  .btn-hero-primary .cta-linea-1,
  .btn-hero-primary .cta-linea-2 {
    display: block;
  }
  .btn-hero-primary {
    text-align: center;
    line-height: 1.3;
  }
}

/* ============================================
   FAQ HOME
   ============================================ */
.seccion-faq-home {
  padding: 70px 20px;
  background: #f5f5f5;
}
.faq-lista {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.faq-item[open] {
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  border-color: #2e7d32;
}
.faq-item summary {
  padding: 18px 50px 18px 22px;
  cursor: pointer;
  font-weight: 600;
  color: #1b5e20;
  font-size: 1.02rem;
  line-height: 1.4;
  list-style: none;
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #2e7d32;
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: "−";
}
.faq-item p {
  padding: 0 22px 20px 22px;
  color: #424242;
  line-height: 1.6;
  margin: 0;
}
.faq-item a {
  color: #2e7d32;
  font-weight: 600;
}
@media (max-width: 600px) {
  .seccion-faq-home { padding: 48px 16px; }
  .faq-item summary { font-size: 0.98rem; padding: 16px 50px 16px 18px; min-height: 56px; }
  .faq-item p { padding: 0 18px 18px 18px; font-size: 0.95rem; line-height: 1.55; }
  .faq-item summary::after { right: 18px; }
}

/* === BOTÓN VOLVER ARRIBA === */
.btn-volver-arriba {
  position: fixed;
  bottom: 16px;
  left: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1b5e20;
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .15s ease;
  z-index: 999;
}
.btn-volver-arriba.visible {
  opacity: 1;
  pointer-events: auto;
}
.btn-volver-arriba:hover {
  transform: translateY(-2px);
}
.btn-volver-arriba:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.btn-volver-arriba svg { width: 26px; height: 26px; }

@media (min-width: 768px) {
  .btn-volver-arriba { bottom: 20px; left: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   FRANJA DE TÍTULO DE PÁGINA INTERIOR (.page-hero) — Tarea T1 (2026-07-16)
   Viste de marca verde a todas las páginas interiores. La portada
   conserva su .hero completo y NO usa esta franja.
   ═══════════════════════════════════════════════════════════════ */
.page-hero {
  background: linear-gradient(135deg, var(--verde-oscuro) 0%, var(--verde) 100%);
  color: var(--blanco);
  padding: 56px 0 48px;
}
.page-hero h1 {
  color: var(--blanco);
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.15;
  margin: 0;
}
.page-hero-crumbs { margin-bottom: 14px; }
.page-hero-crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: .9rem;
}
.page-hero-crumbs li { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.9); }
.page-hero-crumbs li:not(:last-child)::after { content: '\203A'; color: var(--amarillo); font-weight: 700; }
.page-hero-crumbs a { color: var(--blanco); text-decoration: none; }
.page-hero-crumbs a:hover { color: var(--amarillo); text-decoration: underline; }
.page-hero-crumbs [aria-current="page"] { color: rgba(255,255,255,.85); }

@media (max-width: 600px) {
  .page-hero { padding: 40px 0 32px; }
}

/* ============================================================
   CARTELERA DE CONCIERTOS (espejo, Etapa 3 / Sesion D)
   Listado server-side de proximos shows en la portada.
   ============================================================ */
.cartelera-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.cartelera-item {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.cartelera-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.cartelera-afiche {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--gris-fondo);
}
.cartelera-afiche--vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--verde-oscuro), var(--verde));
  color: #fff;
}
.cartelera-afiche--vacio span {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: .01em;
}
.cartelera-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
}
.cartelera-nombre {
  margin: 0;
  font-size: 1.15rem;
  color: var(--verde-oscuro);
}
.cartelera-fecha {
  margin: 0;
  font-weight: 600;
  /* T2: la franja de fecha/hora hereda el fondo verde (.cartelera-fecha, regla
     antigua línea ~817); el texto debe ir en BLANCO para ser legible. */
  color: #ffffff;
}
.cartelera-sala {
  margin: 0;
  color: var(--gris-medio);
}
.cartelera-precio {
  margin: 4px 0 12px;
  font-weight: 700;
  color: var(--verde);
}
.cartelera-info .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ============================================================
   SESIÓN F — Flujo de reservas (pasos), página de pago
   ============================================================ */

/* Utilidades faltantes */
.flex-col { flex-direction: column; }
.btn-outline {
  background: transparent;
  border: 2px solid var(--verde);
  color: var(--verde-oscuro);
}
.btn-outline:hover { background: var(--verde); color: #fff; }

/* Notas y acciones del formulario */
.form-nota { font-size: .85rem; color: var(--gris-medio); margin-top: 6px; }
.form-nota a { color: var(--verde-oscuro); }
.form-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* Indicador de pasos */
.reserva-pasos {
  display: flex; gap: 8px; list-style: none; padding: 0;
  margin: 0 auto 22px; max-width: 720px;
}
.reserva-paso {
  flex: 1; display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: .9rem; font-weight: 600; color: var(--gris-medio);
  padding: 10px 8px; border-bottom: 3px solid var(--gris-borde); text-align: center;
}
.reserva-paso-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gris-borde); color: #fff; font-size: .8rem; flex-shrink: 0;
}
.reserva-paso.is-active { color: var(--verde-oscuro); border-bottom-color: var(--verde); }
.reserva-paso.is-active .reserva-paso-num { background: var(--verde); }
.reserva-paso.is-done .reserva-paso-num { background: var(--verde-oscuro); }

/* Pasos del formulario (progresivo con JS; sin JS, todo visible) */
.form-step { border: 0; padding: 0; margin: 0 0 4px; }
.form-step-titulo {
  font-size: 1.15rem; font-weight: 700; color: var(--verde-oscuro);
  padding: 0; margin-bottom: 12px;
}
.reserva-form.steps-enhanced .form-step { display: none; }
.reserva-form.steps-enhanced .form-step.is-active { display: block; }

/* Banner de evento preseleccionado y bloque domicilio */
.reserva-banner {
  background: #eaf3de; border: 1px solid #cfe3b8; color: #27500a;
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 16px;
}
.reserva-domicilio { border-left: 3px solid var(--verde); padding-left: 14px; margin-bottom: 8px; }

/* Resumen del paso 3 */
.reserva-resumen {
  background: var(--gris-fondo); border-radius: var(--radio);
  padding: 16px 18px; margin-bottom: 8px; line-height: 1.5;
}
.reserva-resumen p { margin: 0 0 6px; }
.reserva-resumen p:last-child { margin-bottom: 0; }

/* Página de pago */
.pago-card { padding: 22px; margin: 22px 0; }
.pago-card-titulo { font-size: 1.15rem; color: var(--verde-oscuro); margin: 0 0 14px; }
.pago-datos { list-style: none; padding: 0; margin: 0 0 16px; }
.pago-datos li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--gris-borde);
}
.pago-datos li:last-child { border-bottom: 0; }
.pago-datos span { color: var(--gris-medio); }
.pago-copia-ok { margin-left: 12px; color: var(--verde-oscuro); font-weight: 600; font-size: .9rem; }
.pago-tarjetas { margin: 22px 0; }
.pago-logos { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.pago-logo {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gris-borde); border-radius: var(--radio);
  padding: 14px 18px; background: #fff;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.pago-logo:hover { box-shadow: var(--sombra-card); transform: translateY(-2px); }
.pago-logo img { display: block; width: auto; height: 44px; max-width: 200px; }
.pago-cierre { margin-top: 20px; font-weight: 600; }

/* T3: afiche de la cartelera clicable (mismo destino que el botón) */
.cartelera-afiche-link { display: block; text-decoration: none; }
.cartelera-afiche-link:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

/* ============================================================
   T4 — Formulario de reservas rediseñado (sin compuerta)
   ============================================================ */
.reserva-evento-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
  background: #eaf3de; border: 1px solid #cfe3b8; color: #27500a;
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 18px;
}
.reserva-evento-rotulo { margin: 0; }
.reserva-cambiar { flex-shrink: 0; }
.reserva-subtitulo { font-size: 1.2rem; color: var(--verde-oscuro); margin: 0 0 14px; }

/* Teléfono: código de país + número en una fila */
.reserva-tel { align-items: stretch; }
.reserva-cod { max-width: 190px; flex: 0 0 auto; }
.reserva-tel input[type="tel"] { flex: 1 1 auto; min-width: 0; }

/* Validación en cliente: mensaje de error y borde rojo */
.form-error { color: #c0392b; font-size: .9rem; margin: 6px 0 0; font-weight: 600; }
.form-control.is-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 2px rgba(192,57,43,.15);
}