/* menu.css — Base común mobile-first (entorno dev)
   Fallback tipográfico del sistema: fuentes .woff2 self-hosted pendientes.
   Reglas: texto mínimo 16 px, táctiles 48x48, :focus-visible, cero emojis. */

:root {
  /* Paleta Easytour exacta (Lote 3.8), tomada de style.css de Easytour
     solo como color, sobre el modelo claro aprobado. */
  --et-verde: #2e7d32;
  --et-verde-oscuro: #1b5e20;
  --et-verde-claro: #66bb6a;
  --et-fondo-verde: #e8f5e9;
  --et-amarillo: #fdd835;
  --et-amarillo-hover: #f9a825;

  --color-texto: #1a1a1a;
  --color-fondo: #ffffff;
  --color-acento: var(--et-verde);
  --color-acento-contraste: #ffffff;
  --color-borde: #d4d4d4;
  --espacio: 1rem;
}

::selection {
  color: #1a1a1a;
  background: var(--et-amarillo);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-texto);
  background: var(--color-fondo);
}

/* Salto al contenido (visible solo con foco) */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--color-acento);
  color: var(--color-acento-contraste);
  z-index: 100;
}
.salto-contenido:focus {
  left: 0;
}

/* Foco de teclado visible en todo lo interactivo: amarillo de marca
   con anillo oscuro exterior para contraste suficiente (AA) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--et-amarillo);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--et-verde-oscuro);
  border-radius: 2px;
}

/* ── Cabecera ─────────────────────────────────────────────── */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio);
  padding: 0.75rem var(--espacio);
  background: var(--et-verde-oscuro); /* header oscuro corporativo */
  border-bottom: 3px solid var(--et-verde); /* línea de marca Easytour */
}

/* Foco sobre header oscuro: anillo amarillo con halo claro exterior */
.cabecera a:focus-visible,
.cabecera button:focus-visible {
  outline: 3px solid var(--et-amarillo);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
}

.marca {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
}

.marca img {
  display: block;
  width: 54px;
  height: 56px;
}

/* ── Menú (fuente única) ──────────────────────────────────── */
.menu { position: relative; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 48px;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  background: var(--et-amarillo);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.menu-toggle:hover { background: var(--et-amarillo-hover); }

/* En móvil la lista es un desplegable bajo el botón: no ensancha la cabecera.
   Panel oscuro corporativo con enlaces blancos y separadores claros. */
.menu-lista {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 95;
  min-width: 14rem;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.25rem 0 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--et-verde-oscuro);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.menu-lista.abierto { display: flex; }

.menu-lista li + li { border-top: 1px solid rgba(255, 255, 255, 0.25); }

.menu-lista a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  border-radius: 6px;
}
.menu-lista a:hover {
  color: var(--et-amarillo);
  background: rgba(255, 255, 255, 0.08);
}

/* Cabecera y menú en pantallas anchas */
@media (min-width: 48rem) {
  .menu-toggle { display: none; }
  .menu-lista {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .menu-lista li + li { border-top: 0; }
  .menu-lista a { min-height: 48px; }
}

/* ── Contenido ────────────────────────────────────────────── */
main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem var(--espacio) 4rem;
}

main h1 { line-height: 1.25; }

.contenido-demo p { max-width: 62ch; }

.boton-demo,
main button {
  min-width: 48px;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  font-size: 16px;
  color: var(--color-acento-contraste);
  background: var(--color-acento);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

/* ── Botón flotante WhatsApp ──────────────────────────────── */
.whatsapp-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #ffffff;
  background: #1faa53;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 90;
}
.whatsapp-fab:hover { background: #178a42; }

/* ── Pie (28-09): el mismo de easytour.cl ─────────────────────
   Tres renglones centrados sobre verde oscuro. Reemplaza al pie
   anterior (.pie con borde, .pie-texto y .menu-legal). */
.pie {
  padding: 24px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #e8f0e9;
  text-align: center;
  background: #12391a;
}

.pie p { margin: 0 0 6px; }
.pie p:last-child { margin: 0; opacity: 0.85; }
.pie a { color: #e8f0e9; text-decoration: underline; }

/* 28-09 (pie accesible): el tercer renglón va en <nav aria-label="Legal">,
   que no agrega nada al aspecto. */
.pie nav { margin: 0; padding: 0; }

/* Zona táctil de los enlaces del pie, SIN cambiar el aspecto. El relleno
   vertical de un enlace en línea no mueve ningún renglón (no cuenta para
   el alto de la línea), pero sí recibe el toque.
   - Siempre: la zona llega al alto completo de su línea (19,8 → 22,5 px),
     sin tocar la de la línea de al lado cuando el texto se parte.
   - Desde 56rem, donde los tres renglones caben sin partirse (miden hasta
     747 px), la zona llega a 44 px: el renglón 2 crece hacia arriba (el
     renglón 1 no tiene enlaces) y el 3 hacia abajo (el relleno del pie).
     Entre los renglones 2 y 3 se agregan 8 px, lo justo para que sus
     zonas no se monten. Es lo único que cambia de tamaño. */
.pie a { padding: 1.35px 0; }

@media (min-width: 56rem) {
  .pie > p:nth-of-type(2) { margin-bottom: 14px; }
  .pie > p:nth-of-type(2) a { padding: 15.85px 0 8.35px; }
  .pie nav a { padding: 8.35px 0 15.85px; }
}

/* 28-09 (vocabulario, 3.2): hasta unos 900 px el botón flotante de
   WhatsApp tapaba el final del tercer renglón del pie al bajar hasta el
   final. Relleno inferior para que el último renglón quede sobre el
   botón (56 px + 16 del borde + 16 de holgura). El botón y el texto no
   cambian. */
@media (max-width: 60rem) {
  .pie { padding-bottom: 88px; }
}

/* ── Cartelera server-side (compartida: portada y guía) ───── */
.cartelera {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .cartelera { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .cartelera { grid-template-columns: repeat(3, 1fr); }
}

.evento {
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
}

.evento img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 570 / 350;
  background: #f0f0f0; /* espacio reservado mientras carga (anti-CLS) */
}

.evento-cuerpo { padding: 1rem 1.25rem 1.25rem; }

.evento-cuerpo h3 { margin: 0 0 0.25rem; font-size: 1.25rem; }

/* DEV-01: sin text-transform. fecha_es() ya devuelve la forma correcta, y
   capitalize ponia en mayuscula TODAS las palabras: "Viernes 25 De
   Septiembre De 2026". La mayuscula inicial la pone el PHP. */
.evento-fecha { margin: 0 0 0.5rem; font-weight: 600; color: var(--et-verde-oscuro); }

.evento-precio { font-weight: 600; }

/* Badge con espacio fijo reservado (el estado nunca deja hueco variable) */
.evento-estado { margin: 0.5rem 0; min-height: 1.75rem; }

.badge {
  display: inline-block;
  min-width: 7.5ch;
  padding: 0.2rem 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  border-radius: 999px;
}

.badge-disponible { color: var(--et-verde-oscuro); background: var(--et-fondo-verde); border: 1px solid var(--et-verde-claro); }
.badge-sin-cupos  { color: #7f1d1d; background: #fee2e2; }
/* DEV-01: aviso sobrio para "quedan pocos". Ambar sobre ambar claro,
   contraste 8,9:1 sobre su fondo, muy por encima del AA que pide el
   blueprint. Se distingue de "disponible" (verde) sin gritar. */
.badge-pocos      { color: #78350f; background: #fef3c7; border: 1px solid #f59e0b; }

/* Enlace de imagen de artista (evento disponible) */
.evento > a { display: block; }

/* Evento sin cupos: tarjeta visible pero sin enlaces activos */
.evento-sin-cupos img { filter: grayscale(70%); }

.boton-deshabilitado {
  opacity: 0.55;
  cursor: default;
}

/* ── Aviso estático sin eventos ───────────────────────────── */
.aviso-estatico {
  padding: 1.5rem;
  border: 1px dashed var(--color-borde);
  border-radius: 8px;
}

/* ── Directiva de estilo 24-07-2026 (rev. Lote 3.5) ──────────
   Títulos H1-H3 siempre centrados al medio de la página.
   Párrafos de contenido justificados (html lang="es" activa el
   guionado), en columna de medida legible centrada.
   Excepciones funcionales: menús, formularios, tablas, badges,
   botones y elementos de tarjeta conservan su alineación. */
main h1, main h2, main h3 {
  text-align: center;
}

main h2, main h3 { color: var(--et-verde-oscuro); }

main p {
  max-width: 70ch;
  margin-right: auto;
  margin-left: auto;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Enlaces de contenido en verde de marca (botones y menús ya
   definen su propio color con mayor especificidad) */
main a { color: var(--et-verde); }

main form h1, main form h2, main form h3,
main table h1, main table h2, main table h3,
.menu h1, .menu h2, .menu h3 {
  text-align: left;
}

main form p, main table p, .menu p {
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

/* ── Alineación título/párrafo/CTA (Lote 3.6) ────────────────
   Una sola columna visual por bloque: el título centrado y el
   párrafo justificado cuelgan del mismo eje (mismo centro,
   mismos bordes laterales); el CTA se centra en esa columna.
   Gana por especificidad sobre los max-width previos del hero
   (.hero h1 en hojas de página) al usar el prefijo main. */
.bloque-contenido {
  max-width: 70ch;
  margin-inline: auto;
}

main .bloque-contenido h1,
main .bloque-contenido h2,
main .bloque-contenido h3 {
  max-width: none;
  text-align: center;
}

main .bloque-contenido p {
  max-width: none; /* la columna la da el contenedor, no el párrafo */
  margin-right: 0;
  margin-left: 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.bloque-contenido .cta-grupo {
  justify-content: center;
}

/* ── Alineación fina en bloques y tarjetas (Lote 3.7) ────────
   Tarjetas de contenido informativo: título centrado y párrafo
   justificado colgando del mismo eje (el párrafo llena el ancho
   interno de la tarjeta, sin max-width propio que lo desplace).
   Gana por especificidad (prefijo main) sobre .opcion p y
   .faq-item p de las hojas de página, aunque carguen después. */
main .opcion h3, main .tarjeta h3, main .motivo h3, main .pasos h3 {
  text-align: center;
}

main .opcion p, main .tarjeta p, main .motivo p, main .pasos p {
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Cajas CTA y tarjetas de evento: centrado funcional. Queda al
   final de la cascada para ganar el empate de especificidad con
   las reglas de bloque anteriores. */
main .cta-final p, main .cta-contextual p, main .evento p {
  text-align: center;
}

/* ── Paleta Easytour: hovers y enlaces (Lote 3.8) ──────────── */
.boton-principal:hover { background: var(--et-verde-oscuro); }

.boton-secundario:hover { background: var(--et-fondo-verde); }

/* Enlaces de contenido: verde de marca, hover oscuro con subrayado
   visible. Se excluyen los botones (definen su propio color de texto). */
main a:not(.boton-principal):not(.boton-secundario):hover,
main a:not(.boton-principal):not(.boton-secundario):focus-visible {
  color: var(--et-verde-oscuro);
  text-decoration: underline;
}

/* ── Botones centrados como componente (Lote 3.10) ───────────
   El CTA se centra por sí mismo en cualquier bloque (hero,
   tarjetas de opciones, cajas CTA, cartelera) sin depender del
   text-align del contenedor y sin tocar los párrafos
   justificados ni los títulos centrados. */
main .boton-principal,
main .boton-secundario {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}