/*
  ARCHIVO: style.css
  Sistema de diseño del sitio. Las variables (custom properties) de :root
  son la "paleta" central — si querés cambiar un color en todo el sitio,
  lo cambiás una sola vez aquí arriba.

  CONCEPTO VISUAL: las tarjetas (horarios, mensajes, eventos, equipo) usan
  una línea de acento plana en la parte superior — terracota sobre fondo
  claro, ámbar sobre fondo oscuro — como elemento que se repite en todo
  el sitio.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Karla:wght@400;500;700&display=swap');

:root {
  /* Color — basado en el azul real del logo (#3871C2), con un cálido
     terracota como complemento para botones y acentos "familiares" */
  --brand-blue: #3871C2;       /* azul exacto del logo, para enlaces/detalles */
  --bg-dark: #1B3B66;          /* azul profundo — héroe, pie de página */
  --bg-card-dark: #234B7D;     /* panel azul más claro, tarjetas sobre fondo oscuro */
  --bg-light: #F6F8FB;         /* blanco azulado, fondo general */
  --bg-card-light: #FFFFFF;
  --gold: #F7BA66;             /* ámbar — acentos SOLO sobre fondo oscuro */
  --gold-soft: #EAF1FB;        /* blanco azulado — títulos sobre fondo oscuro */
  --ember: #B84E1C;            /* terracota — acentos sobre fondo claro, botones */
  --ember-dark: #9B3D14;
  --sage: #7E9573;
  --ink: #1E2A3A;
  --parchment-text: #EFE6D8;   /* crema cálido — texto sobre fondo oscuro */
  --line: rgba(30, 42, 58, 0.12);
  --line-dark: rgba(247, 186, 102, 0.25);

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Karla', system-ui, sans-serif;
  --font-utility: 'Karla', system-ui, sans-serif;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  --max-width: 1100px;
}

/* ---------- Reset básico ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-light);
  color: var(--ink);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}
p { margin: 0 0 var(--space-sm); }

/* Foco visible para navegación con teclado (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
}

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

.contenedor {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.eyebrow {
  font-family: var(--font-utility);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ember);
}
/* Sobre fondo oscuro, el terracota se ve apagado y cuesta leerlo —
   usamos el ámbar, que tiene mucho mejor contraste sobre azul oscuro. */
.heroe .eyebrow,
.seccion--oscura .eyebrow {
  color: var(--gold);
}

.boton {
  display: inline-block;
  font-family: var(--font-utility);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  transition: transform 0.15s ease, background 0.15s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton-primario {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--bg-light);
}
.boton-primario:hover { background: var(--ember-dark); }
.boton-fantasma {
  color: var(--gold-soft);
  border-color: var(--line-dark);
}
.boton-fantasma:hover { background: rgba(247, 186, 102, 0.12); }

#horarios { scroll-margin-top: 90px; padding-top: 0.75rem; }

/* ---------- Encabezado / navegación ---------- */
/* Fondo claro a propósito: el logo es azul sobre transparente, así que
   necesita una base blanca para leerse bien (sobre el azul oscuro del
   héroe se perdería). El resto del sitio sigue usando el azul oscuro. */
.encabezado {
  background: var(--bg-card-light);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
}
/* Logo a la izquierda, enlaces centrados en toda la barra */
.nav--centrado {
  position: relative;
  justify-content: flex-start;
  min-height: 60px; /* evita que se aplaste cuando no hay logo */
}
.nav--centrado .nav__enlaces {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav__marca {
  display: flex;
  align-items: center;
  z-index: 1;
}
.nav__logo {
  height: 64px;
  width: auto;
}
.nav__enlaces {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__enlaces a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav__enlaces a:hover,
.nav__enlaces a[aria-current="page"] {
  border-bottom-color: var(--ember);
  color: var(--brand-blue);
}
.nav__toggle { display: none; }

@media (max-width: 720px) {
  .nav__logo { height: 48px; }

  /* Menú desplegable móvil — aplica a ambos estilos de nav */
  .nav__enlaces {
    position: fixed;         /* fixed para que siempre quede debajo del encabezado sticky */
    top: 58px;
    left: 0;
    right: 0;
    background: var(--bg-card-light);
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    display: none;
    box-shadow: 0 8px 16px rgba(30, 42, 58, 0.08);
    z-index: 9;
  }
  .nav--centrado .nav__enlaces {
    /* en nav centrado el absolute del desktop no aplica en móvil */
    position: fixed;
    left: 0;
    transform: none;
  }
  .nav__enlaces.abierto { display: flex; }
  .nav__enlaces li { border-bottom: 1px solid var(--line); }
  .nav__enlaces a { display: block; padding: var(--space-sm) 0; }

  .nav { position: relative; }
  .nav__toggle {
    display: block;
    background: none;
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 6px;
    padding: 0.4em 0.7em;
    font-size: 1.1rem;
    margin-left: auto;   /* empuja el botón a la derecha en todos los casos */
  }
}


/* ---------- Héroe (portada con logo + nombre en horizontal) ---------- */
.heroe {
  position: relative;
  background: var(--bg-dark);
  color: var(--parchment-text);
  text-align: center;
  padding: 1.75rem var(--space-md) 1.4rem;
  overflow: hidden;
}
/* Overlay oscuro que mantiene la paleta y asegura legibilidad del texto */
.heroe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(42, 54, 84, 0.82) 0%, rgba(27, 59, 102, 0.90) 60%);
  z-index: 1;
  pointer-events: none;
}
/* Carrusel de fondo */
.heroe__carrusel {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.heroe__carrusel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.heroe__carrusel img.activa {
  opacity: 1;
}
.heroe__resplandor {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(232, 178, 85, 0.35) 0%, rgba(232, 178, 85, 0) 65%);
  pointer-events: none;
  z-index: 2;
}
.heroe__contenido { position: relative; margin: 0 auto; z-index: 3; }

/* Fila logo + separador + nombre */
.heroe__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-bottom: var(--space-sm);
}
.heroe__logo {
  height: 120px;
  width: auto;
}
.heroe__sep {
  width: 1px;
  height: 90px;
  background: rgba(247, 186, 102, 0.35);
  flex-shrink: 0;
}
.heroe__titulo {
  text-align: center;
}
.heroe__titulo h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--gold-soft);
  margin: 0 0 0.3em;
  line-height: 1.15;
}
.heroe__eslogan {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
  margin: 0;
}
.heroe__versiculo {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  border-top: 1px solid var(--line-dark);
  padding-top: 1.25rem;
  max-width: 600px;
  margin-inline: auto;
}
.heroe__versiculo cite {
  display: block;
  margin-top: 0.5em;
  font-style: normal;
  font-family: var(--font-utility);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
}

@media (max-width: 600px) {
  .heroe__marca { flex-direction: column; gap: var(--space-sm); }
  .heroe__sep { display: none; }
  .heroe__titulo { text-align: center; }
  .heroe__logo { height: 90px; }
}

/* ---------- Secciones generales ---------- */
.seccion {
  padding: var(--space-lg) 0;
}
.seccion--oscura {
  background: var(--bg-dark);
  color: var(--parchment-text);
}
.seccion__titulo {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: var(--space-xs);
}
.seccion__intro {
  max-width: 60ch;
  margin-bottom: var(--space-md);
  opacity: 0.85;
}

/* ---------- Tarjetas con línea superior (elemento de firma) ---------- */
.rejilla {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tarjeta {
  background: var(--bg-card-light);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ember);
  border-radius: 10px;
  padding: var(--space-md);
  position: relative;
}
.seccion--oscura .tarjeta {
  background: var(--bg-card-dark);
  border-color: var(--line-dark);
  border-top-color: var(--gold);
}
.tarjeta__etiqueta {
  font-family: var(--font-utility);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ember);
  display: block;
  margin-bottom: 0.4em;
}
.seccion--oscura .tarjeta__etiqueta { color: var(--gold); }
.tarjeta h3 { font-size: 1.2rem; margin-bottom: 0.3em; }
.tarjeta__meta {
  font-family: var(--font-utility);
  font-size: 0.82rem;
  opacity: 0.75;
  margin-bottom: 0.6em;
}

/* Horarios: fila tipo "boletín" */
.horario-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px dashed var(--line-dark);
}
.horario-fila:last-child { border-bottom: none; }
.horario-fila__hora {
  font-family: var(--font-utility);
  color: var(--ember);
  font-weight: 700;
  white-space: nowrap;
}
.horario-fila__nombre { flex: 1; padding: 0 var(--space-sm); }
.horario-fila__dia { opacity: 0.65; font-size: 0.9rem; }

/* ---------- Aviso de error de carga ---------- */
.aviso-error {
  background: #fff4ec;
  border: 1px solid var(--ember);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  color: var(--ember-dark);
}
.aviso-error code {
  background: rgba(194, 84, 47, 0.12);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* ---------- Formulario de contacto ---------- */
.formulario {
  display: grid;
  gap: var(--space-sm);
  max-width: 520px;
}
.formulario label {
  display: block;
  font-family: var(--font-utility);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 0.4em;
  color: var(--gold);
}
.formulario input,
.formulario textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7em 0.9em;
  border-radius: 8px;
  border: 1px solid var(--line-dark);
  background: var(--bg-card-dark);
  color: var(--parchment-text);
}

/* ---------- Pie de página ---------- */
.pie {
  background: #141b2c;
  color: var(--parchment-text);
  padding: var(--space-lg) 0 var(--space-md);
}
.pie__rejilla {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--space-md);
}
.pie h4 {
  font-family: var(--font-utility);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
}
.pie a { text-decoration: none; opacity: 0.85; }
.pie a:hover { opacity: 1; text-decoration: underline; }
.pie__base {
  border-top: 1px solid var(--line-dark);
  padding-top: var(--space-sm);
  font-size: 0.82rem;
  opacity: 0.6;
  text-align: center;
}

/* ---------- Utilidades de carga ---------- */
.cargando {
  font-family: var(--font-utility);
  font-size: 0.85rem;
  opacity: 0.6;
}