/* ══════════════════════════════════════════════════════════════════════════
   IBBQ — SITIO PÚBLICO · mundo "Luz Vertical"
   Los tokens NO viven aquí. Viven en src/design.php y se inyectan en línea
   en el <head>, de modo que el panel y el sitio público leen literalmente
   el mismo bloque. Este archivo solo compone con ellos.
   ══════════════════════════════════════════════════════════════════════════ */

body {
  background: var(--cal);
  color: var(--tinta);
}

/* ── Estructura ─────────────────────────────────────────────────────────── */
.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

.franja        { padding-block: var(--e-6); }
.franja-cal    { background: var(--cal); }
.franja-hueco  { background: var(--cal-hueco); }
.franja-sombra { background: var(--sombra); color: var(--luz); }
.franja-cielo  { background: var(--cielo); color: var(--luz); }

/* Un título carga su propio peso: no hay etiqueta encima. Más aire arriba
   que abajo, siempre. */
.titulo {
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 20ch;
}
.franja > .envoltura > .titulo { margin-bottom: var(--e-4); }
.titulo-centro { margin-inline: auto; text-align: center; }

.entrada {
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.5;
  max-width: 46ch;
  color: var(--tinta-2);
}
.franja-sombra .entrada,
.franja-cielo .entrada { color: var(--luz-2); }

.parrafo { max-width: var(--medida); }

/* ══════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN
   ══════════════════════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--sombra);
  color: var(--luz);
  border-bottom: var(--canto-luz);
}
.nav-fila {
  max-width: var(--ancho); margin-inline: auto;
  padding: var(--e-2) var(--margen);
  display: flex; align-items: center; gap: var(--e-4);
}
.nav-marca { display: flex; align-items: center; gap: var(--e-2); margin-right: auto; }
.nav-marca img { width: 38px; height: 38px; object-fit: contain; }
.nav-marca-nombre {
  font-size: var(--t-base); font-weight: 800; letter-spacing: -0.01em; color: #fff;
  line-height: 1.1;
}
.nav-marca-sub {
  font-size: var(--t-xs); font-weight: 500; color: var(--luz-2);
  line-height: 1.2;
}
.nav-menu { display: flex; align-items: center; gap: var(--e-1); list-style: none; }
.nav-menu a {
  display: flex; align-items: center;
  min-height: var(--toque);
  padding-inline: var(--e-2);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--luz-2);
  border-radius: var(--r);
  transition: color var(--paso), background var(--paso);
}
.nav-menu a:hover { color: var(--luz); background: rgba(255,255,255,.07); }
/* La página actual se dice con el canto de luz, no con un subrayado que aparece */
.nav-menu a.activo { color: #fff; box-shadow: inset 0 -2px 0 var(--oro); }

.nav-accion {
  display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: var(--toque); padding-inline: var(--e-3);
  background: var(--cielo); color: #fff !important;
  border-radius: var(--r); font-size: var(--t-sm); font-weight: 700;
  transition: background var(--paso);
}
.nav-accion:hover { background: #35559f; }

.nav-boton { display: none; color: var(--luz); width: var(--toque); height: var(--toque); align-items: center; justify-content: center; border-radius: var(--r); }

@media (max-width: 900px) {
  .nav-boton { display: flex; }
  .nav-menu {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--sombra);
    border-bottom: var(--canto-luz);
    flex-direction: column; align-items: stretch;
    padding: var(--e-2) var(--margen) var(--e-3);
    gap: 2px;
  }
  .nav-menu.abierto { display: flex; }
  .nav-menu a { font-size: var(--t-base); padding-inline: var(--e-2); }
  .nav-accion { justify-content: center; margin-top: var(--e-2); }
}

/* ══════════════════════════════════════════════════════════════════════════
   AVISO EN VIVO — la brasa es el único color reservado del sistema
   ══════════════════════════════════════════════════════════════════════════ */
.envivo {
  background: var(--brasa); color: #fff;
  display: flex; align-items: center; justify-content: center;
  gap: var(--e-2); flex-wrap: wrap;
  padding: var(--e-2) var(--margen);
  font-size: var(--t-sm); font-weight: 600;
}
.envivo-punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; flex-shrink: 0;
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.envivo a {
  display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: 32px; padding-inline: var(--e-2);
  background: rgba(0,0,0,.22); border-radius: var(--r); font-weight: 700;
}
.envivo a:hover { background: rgba(0,0,0,.34); }

.anuncio {
  background: var(--sombra); color: var(--luz-2);
  text-align: center; padding: var(--e-2) var(--margen);
  font-size: var(--t-sm);
}
.anuncio a { color: var(--oro-luz); text-decoration: underline; text-underline-offset: .2em; }

/* ══════════════════════════════════════════════════════════════════════════
   PRIMER PLIEGUE — la franja de luz
   La luz del ecuador tiene canto recto. La composición es una banda iluminada
   sobre el campo en sombra, y la fotografía cruza esa costura en lugar de
   vivir dentro de una caja.
   ══════════════════════════════════════════════════════════════════════════ */
.pliegue {
  position: relative;
  background: var(--sombra);
  color: var(--luz);
  overflow: hidden;
  isolation: isolate;
}
.pliegue-foto {
  position: absolute; inset: 0;
  z-index: -2;
}
.pliegue-foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 40%;
}
/* El corte de luz: un borde recto, nunca un desvanecido suave. */
.pliegue-corte {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(102deg,
      var(--sombra) 0%,
      var(--sombra) 46%,
      color-mix(in srgb, var(--sombra) 62%, transparent) 46.001%,
      color-mix(in srgb, var(--sombra) 10%, transparent) 78%,
      transparent 100%);
}
.pliegue-cuerpo {
  max-width: var(--ancho); margin-inline: auto;
  padding: var(--e-6) var(--margen) var(--e-5);
  position: relative;
}
.pliegue-texto { max-width: 40ch; }

.pliegue h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: #fff;
}
/* Contraste extremo de peso, no de tamaño: es como se dice la luz dura. */
.pliegue h1 .fino { font-weight: 200; color: var(--luz-2); display: block; }
.pliegue-desc {
  margin-top: var(--e-2);
  font-size: var(--t-base); font-weight: 300;
  color: var(--luz-2); max-width: 42ch;
}

/* ── El horario como objeto tipográfico principal ────────────────────────
   La pregunta real del visitante nuevo es "¿cuándo y dónde?". Va aquí,
   en el primer pliegue, en cifras grandes — no tres scrolls abajo. */
.horario {
  margin-top: var(--e-4);
  border-top: 2px solid var(--oro);
  padding-top: var(--e-2);
}
.horario-dia {
  font-size: var(--t-sm); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--oro-luz);
}
.horario-horas {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4);
  margin-top: var(--e-2);
}
.horario-hora {
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 800; line-height: .95;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: block;
}
.horario-que {
  display: block;
  font-size: var(--t-xs); font-weight: 600;
  color: var(--luz-2); margin-top: var(--e-1);
  letter-spacing: .04em;
}
/* El culto que sigue se marca con el oro; el que está pasando, con la brasa. */
.horario-item.proximo .horario-hora { color: var(--oro-luz); }
.horario-item.ahora   .horario-hora { color: var(--brasa-luz); }

.horario-donde {
  margin-top: var(--e-3);
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); color: var(--luz-2);
}
.horario-donde strong { color: #fff; font-weight: 600; }

.pliegue-acciones {
  margin-top: var(--e-3);
  display: flex; gap: var(--e-2); flex-wrap: wrap;
}

@media (max-width: 900px) {
  .pliegue-corte {
    background: linear-gradient(178deg,
      var(--sombra) 0%,
      var(--sombra) 58%,
      color-mix(in srgb, var(--sombra) 72%, transparent) 58.001%,
      color-mix(in srgb, var(--sombra) 30%, transparent) 100%);
  }
  .pliegue-cuerpo { padding-block: var(--e-5) var(--e-5); }
  .pliegue-texto { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-1);
  min-height: var(--toque);
  padding-inline: var(--e-3);
  border-radius: var(--r);
  font-size: var(--t-sm); font-weight: 700;
  border: 1px solid transparent;
  transition: background var(--paso), color var(--paso), border-color var(--paso);
}
.btn-primario { background: var(--cielo); color: #fff; }
.btn-primario:hover { background: #35559f; }

.btn-claro { background: transparent; color: var(--luz); border-color: rgba(255,255,255,.32); }
.btn-claro:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.6); }

.btn-oscuro { background: transparent; color: var(--cielo); border-color: color-mix(in srgb, var(--cielo) 42%, transparent); }
.btn-oscuro:hover { background: var(--cielo); color: #fff; border-color: var(--cielo); }

.btn-oro { background: var(--oro); color: #2A2205; }
.btn-oro:hover { background: #d9ba63; }

/* "En vivo" es secundaria y lleva la brasa reservada como punto, no como
   bloque rojo que le gana en peso al azul institucional. */
.btn-vivo { background: rgba(255,255,255,.08); color: var(--luz); border-color: rgba(255,255,255,.28); }
.btn-vivo:hover { background: rgba(255,255,255,.16); }
.btn-vivo::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brasa-luz); flex-shrink: 0;
  animation: latido 2.4s ease-in-out infinite;
}

.btn-grande { min-height: 52px; padding-inline: var(--e-4); font-size: var(--t-base); }

/* ══════════════════════════════════════════════════════════════════════════
   LISTAS DE CONTENIDO
   Sin rejillas de tarjetas idénticas de icono+título+texto: las secciones se
   distinguen por densidad y por escala, no por repetir el mismo contenedor.
   ══════════════════════════════════════════════════════════════════════════ */
.lista { list-style: none; display: flex; flex-direction: column; }

/* Filas separadas por un filete: la retícula del telar, no la caja. */
.fila {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: var(--e-3);
  padding-block: var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
  transition: background var(--paso);
}
.fila:last-child { border-bottom: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.fila:hover { background: color-mix(in srgb, var(--cielo) 5%, transparent); }
.franja-sombra .fila { border-color: rgba(255,255,255,.14); }
.franja-sombra .fila:hover { background: rgba(255,255,255,.05); }

.fila-titulo { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; }
.fila-meta { font-size: var(--t-sm); color: var(--tinta-2); margin-top: 2px; }
.franja-sombra .fila-meta { color: var(--luz-2); }
.fila-cifra {
  font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Fecha como bloque tipográfico, no como badge de color */
.fecha {
  display: grid; place-items: center;
  width: 58px; flex-shrink: 0;
  padding: var(--e-1) 0;
  border: 1px solid color-mix(in srgb, var(--cielo) 30%, transparent);
  border-radius: var(--r);
  line-height: 1;
}
.fecha-dia { font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.fecha-mes { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); margin-top: 3px; }
.franja-sombra .fecha { border-color: rgba(255,255,255,.28); }
.franja-sombra .fecha-mes { color: var(--luz-2); }

/* Ministerios: rejilla de texto, sin icono decorativo ni caja con sombra */
.ministerios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 0; }
.ministerio {
  padding: var(--e-3) var(--e-3) var(--e-4) 0;
  border-top: 2px solid var(--tinta);
  margin-right: var(--e-3);
}
.ministerio-nombre { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; }
.ministerio-desc { font-size: var(--t-sm); color: var(--tinta-2); margin-top: var(--e-1); max-width: 38ch; }
.ministerio-enlace {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--e-2);
  min-height: 32px;
  font-size: var(--t-sm); font-weight: 700; color: var(--cielo);
}
.ministerio-enlace:hover { color: var(--sombra); }
.ministerio-enlace svg { transition: transform var(--paso); }
.ministerio-enlace:hover svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIOS
   ══════════════════════════════════════════════════════════════════════════ */
.campo { display: flex; flex-direction: column; gap: var(--e-1); margin-bottom: var(--e-3); }
.campo label { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); }
.franja-sombra .campo label, .franja-cielo .campo label { color: var(--luz-2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="password"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  min-height: var(--toque);
  padding: var(--e-2);
  background: #fff;
  color: var(--tinta);
  border: 1px solid color-mix(in srgb, var(--tinta) 26%, transparent);
  border-radius: var(--r);
  font-size: var(--t-base);
  transition: border-color var(--paso), box-shadow var(--paso);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cielo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cielo) 22%, transparent);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

/* ══════════════════════════════════════════════════════════════════════════
   AVISOS
   Sin border-left de color: el aviso se dice invirtiendo el campo.
   ══════════════════════════════════════════════════════════════════════════ */
.aviso {
  display: flex; align-items: flex-start; gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r);
  font-size: var(--t-sm);
  margin-bottom: var(--e-3);
  border: 1px solid transparent;
}
.aviso svg { flex-shrink: 0; margin-top: 1px; }
.aviso-ok    { background: color-mix(in srgb, var(--ok) 12%, var(--cal)); color: #1E4B34; border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.aviso-error { background: color-mix(in srgb, var(--brasa) 10%, var(--cal)); color: var(--brasa-tinta); border-color: color-mix(in srgb, var(--brasa) 34%, transparent); }
.aviso-info  { background: color-mix(in srgb, var(--cielo) 9%, var(--cal)); color: var(--sombra); border-color: color-mix(in srgb, var(--cielo) 28%, transparent); }

/* ══════════════════════════════════════════════════════════════════════════
   PIE
   ══════════════════════════════════════════════════════════════════════════ */
.pie { background: var(--sombra); color: var(--luz-2); padding-block: var(--e-5) var(--e-3); }
.pie-rejilla {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--e-4);
  padding-bottom: var(--e-4);
}
.pie-marca-nombre { color: #fff; font-weight: 800; font-size: var(--t-base); }
.pie-marca-desc { font-size: var(--t-sm); margin-top: var(--e-1); max-width: 34ch; }
.pie-titulo {
  font-size: var(--t-sm); font-weight: 700; color: #fff;
  margin-bottom: var(--e-2);
}
.pie-enlaces { list-style: none; display: flex; flex-direction: column; }
.pie-enlaces a {
  display: flex; align-items: center; min-height: 36px;
  font-size: var(--t-sm); transition: color var(--paso);
}
.pie-enlaces a:hover { color: var(--oro-luz); }
.pie-social { display: flex; gap: var(--e-1); margin-top: var(--e-3); }
.pie-social a {
  width: var(--toque); height: var(--toque);
  display: grid; place-items: center;
  border: var(--canto-luz); border-radius: var(--r);
  transition: background var(--paso), border-color var(--paso), color var(--paso);
}
.pie-social a:hover { background: var(--cielo); border-color: var(--cielo); color: #fff; }
.pie-base {
  border-top: var(--canto-luz); padding-top: var(--e-3);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--e-2);
  font-size: var(--t-xs);
}

@media (max-width: 800px) {
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .pie-rejilla { grid-template-columns: 1fr; gap: var(--e-3); }
}

/* ══════════════════════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
   ══════════════════════════════════════════════════════════════════════════ */
.wa {
  position: fixed; right: var(--e-3); bottom: var(--e-3); z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #1EA855; color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--sombra-2);
  transition: transform var(--paso);
}
.wa:hover { transform: scale(1.06); }

/* ── Utilidades mínimas ─────────────────────────────────────────────────── */
.centro { text-align: center; }
.apilar-2 { display: flex; flex-direction: column; gap: var(--e-2); }
.apilar-3 { display: flex; flex-direction: column; gap: var(--e-3); }
.apilar-4 { display: flex; flex-direction: column; gap: var(--e-4); }
.fila-flex { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.tenue { color: var(--tinta-2); }
.franja-sombra .tenue, .franja-cielo .tenue { color: var(--luz-2); }
.pequeno { font-size: var(--t-sm); }
[x-cloak] { display: none !important; }