/* ══════════════════════════════════════════════════════════════════════════
   IBBQ — PÁGINAS INTERIORES · mundo "Luz Vertical"
   ══════════════════════════════════════════════════════════════════════════

   Este archivo era, antes, código muerto: definía .pagination, .empty-state,
   .modal, .breadcrumb, .spinner y .tag — ninguno usado en el proyecto — y
   además los pintaba con los tokens oscuros del panel sobre un sitio blanco.
   Cuarenta y dos clases estaban declaradas dos veces, aquí y en main.css, y
   ganaba el orden de carga.

   Ahora lleva lo contrario: los nombres de clase que las páginas interiores
   (nosotros, cultos, mensajes, contacto, instituto…) ya emiten, resueltos con
   los tokens nuevos, para que ninguna página se quede con el mundo anterior.
   Nada aquí se repite en main.css.
   ══════════════════════════════════════════════════════════════════════════ */

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

.section         { padding-block: var(--e-6); }
.section-sm      { padding-block: var(--e-4); }
.section-white   { background: var(--cal); }
.section-light   { background: var(--cal-hueco); }
.section-dark,
.section-navy    { background: var(--sombra); color: var(--luz); }
.section-surface { background: var(--cal-hueco); }

.section-header { max-width: 56ch; margin-bottom: var(--e-5); }
.section-header.text-center { margin-inline: auto; text-align: center; }

.section-title {
  font-size: var(--t-2xl); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.025em; text-wrap: balance; color: var(--tinta);
}
.section-dark .section-title,
.section-navy .section-title { color: #fff; }

.section-desc {
  font-size: var(--t-lg); font-weight: 300; line-height: 1.5;
  color: var(--tinta-2); margin-top: var(--e-2); max-width: 46ch;
}
.section-header.text-center .section-desc { margin-inline: auto; }
.section-dark .section-desc,
.section-navy .section-desc { color: var(--luz-2); }

/* El filete decorativo bajo cada título era un adorno repetido veinte veces.
   Se convierte en el canto de luz sobre el título, que sí ordena. */
.divider { display: none; }

/* ── Encabezado de página interior ──────────────────────────────────────── */
.page-hero, .hero-interior {
  background: var(--sombra); color: var(--luz);
  padding-block: var(--e-6) var(--e-5);
  border-bottom: 3px solid var(--oro);
}
.page-hero-title, .hero-interior h1 {
  font-size: var(--t-2xl); font-weight: 800; line-height: 1.05;
  letter-spacing: -0.03em; color: #fff; text-wrap: balance; max-width: 20ch;
}
.page-hero-desc, .hero-interior p {
  font-size: var(--t-lg); font-weight: 300; color: var(--luz-2);
  margin-top: var(--e-2); max-width: 48ch;
}

/* ── Botones heredados → botones del mundo ──────────────────────────────── */
.btn-primary      { background: var(--cielo); color: #fff; }
.btn-primary:hover{ background: #35559f; }
.btn-outline      { background: transparent; color: var(--luz); border-color: rgba(255,255,255,.32); }
.btn-outline:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.6); }
.btn-outline-dark { background: transparent; color: var(--cielo); border-color: color-mix(in srgb, var(--cielo) 42%, transparent); }
.btn-outline-dark:hover { background: var(--cielo); color: #fff; border-color: var(--cielo); }
.btn-gold         { background: var(--oro); color: #2A2205; }
.btn-gold:hover   { background: #d9ba63; }
.btn-lg           { min-height: 52px; padding-inline: var(--e-4); font-size: var(--t-base); }
.btn-sm           { min-height: 38px; padding-inline: var(--e-2); font-size: var(--t-xs); }

/* "Culto en vivo" deja de ser un bloque #FF0000 que le gana en peso al azul
   institucional: pasa a secundaria con la brasa reservada como punto. */
.btn-live {
  background: rgba(255,255,255,.08); color: var(--luz);
  border-color: rgba(255,255,255,.28);
}
.btn-live:hover { background: rgba(255,255,255,.16); }
.section-white .btn-live, .section-light .btn-live {
  background: transparent; color: var(--cielo);
  border-color: color-mix(in srgb, var(--cielo) 42%, transparent);
}
.section-white .btn-live:hover, .section-light .btn-live:hover { background: var(--cielo); color: #fff; }
.btn-live svg { flex-shrink: 0; }

.hero-actions { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* ── Rejillas heredadas ─────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--e-4); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: var(--e-4); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: var(--e-3); }
.responsive-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--e-5); align-items: start; }

/* ── Tarjeta: filete superior, no caja con sombra ───────────────────────── */
.card {
  background: transparent;
  border-top: 2px solid var(--tinta);
  padding-top: var(--e-3);
}
.section-dark .card, .section-navy .card { border-top-color: var(--oro); }
.card-body { padding: 0 var(--e-3) var(--e-3) 0; }
.card-title { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; }
.card-text  { font-size: var(--t-sm); color: var(--tinta-2); margin-top: var(--e-1); max-width: 38ch; }
.card-sub   { font-size: var(--t-xs); font-weight: 700; color: var(--cielo); letter-spacing: .06em; text-transform: uppercase; }
.dark-card {
  border-top: 2px solid var(--oro);
  padding: var(--e-3) var(--e-3) var(--e-4) 0;
}

/* ── Barra de cifras ────────────────────────────────────────────────────── */
.stats-bar { background: var(--cielo); padding-block: var(--e-4); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: var(--e-3); }
.stat-divider { border-left: 1px solid rgba(255,255,255,.24); padding-left: var(--e-3); }
.stat-number {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums;
}
.stat-label { font-size: var(--t-sm); font-weight: 500; color: var(--oro-luz); margin-top: var(--e-1); }
@media (max-width: 620px) {
  .stat-divider { border-left: 0; padding-left: 0; }
}

/* ── Horarios ───────────────────────────────────────────────────────────── */
.schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 0 var(--e-4); margin-bottom: var(--e-4); }
.schedule-item {
  display: flex; align-items: baseline; gap: var(--e-2);
  padding-block: var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
}
.section-dark .schedule-item { border-top-color: rgba(255,255,255,.16); }
.schedule-time {
  font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.03em;
  color: var(--cielo); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.section-dark .schedule-time { color: var(--oro-luz); }
.schedule-name  { font-weight: 700; font-size: var(--t-base); }
.schedule-place { font-size: var(--t-sm); color: var(--tinta-2); }
.section-dark .schedule-place { color: var(--luz-2); }
/* El emoji ⛪ que hacía de icono desaparece: el horario ya se explica solo. */
.sched-icon { display: none; }

/* ── Oración ────────────────────────────────────────────────────────────── */
.prayer-highlight {
  display: grid; gap: var(--e-3);
  background: var(--sombra); color: var(--luz);
  padding: var(--e-4);
  border-radius: var(--r-lg);
  margin-block: var(--e-4);
}
.prayer-highlight-icon { display: none; }
.prayer-highlight-label { font-size: var(--t-sm); font-weight: 600; color: var(--oro-luz); }
.prayer-highlight-title { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.025em; color: #fff; margin-top: var(--e-1); }
.prayer-days { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-3); }
.prayer-day {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; padding-inline: var(--e-2);
  border: var(--canto-luz); border-radius: var(--r);
  font-size: var(--t-sm); font-weight: 600; color: var(--luz);
}
.prayer-day.virtual { border-color: color-mix(in srgb, var(--oro) 55%, transparent); color: var(--oro-luz); }
.prayer-day small { font-weight: 400; color: var(--luz-2); }
.prayer-highlight-cta { display: flex; }

.prayer-box, .oracion-box {
  background: var(--cal-hueco);
  border-top: 3px solid var(--oro);
  padding: var(--e-4);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.prayer-box-title { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.025em; }
.prayer-box-desc  { font-size: var(--t-sm); color: var(--tinta-2); margin-block: var(--e-1) var(--e-3); max-width: 40ch; }

.oracion-grid-full { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 0 var(--e-3); }
.oracion-day { padding-block: var(--e-2); border-top: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent); }
.oracion-day-name { font-weight: 700; font-size: var(--t-sm); }
.oracion-day-hour { font-size: var(--t-lg); font-weight: 800; color: var(--cielo); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.oracion-day-mode { font-size: var(--t-xs); color: var(--tinta-2); }

/* ── Actividades ────────────────────────────────────────────────────────── */
.event-list { display: flex; flex-direction: column; }
.event-card {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding-block: var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  background: transparent;
}
.event-card:last-child { border-bottom: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent); }
.section-dark .event-card { border-color: rgba(255,255,255,.16); }
.event-date-badge, .event-date-box {
  display: grid; place-items: center; flex-shrink: 0;
  width: 58px; padding-block: var(--e-1);
  background: transparent; color: inherit;
  border: 1px solid color-mix(in srgb, var(--cielo) 32%, transparent);
  border-radius: var(--r); line-height: 1;
}
.section-dark .event-date-badge { border-color: rgba(255,255,255,.3); }
.event-date-day, .event-date-num { font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.event-date-mon, .event-date-month {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinta-2); margin-top: 3px; opacity: 1;
}
.section-dark .event-date-mon { color: var(--luz-2); }
.event-info  { flex: 1; min-width: 0; }
.event-title { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; }
.event-meta  { font-size: var(--t-sm); color: var(--tinta-2); margin-top: 2px; display: flex; gap: var(--e-2); flex-wrap: wrap; }
.section-dark .event-meta { color: var(--luz-2); }

/* ── Ministerios ────────────────────────────────────────────────────────── */
.ministry-card {
  background: transparent;
  border-top: 2px solid var(--tinta);
  padding: var(--e-3) var(--e-3) var(--e-4) 0;
}
.section-dark .ministry-card { border-top-color: var(--oro); }
.ministry-card-icon, .ministry-icon { display: none; }
.ministry-card-name { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; }
.ministry-card-sub  { font-size: var(--t-xs); font-weight: 700; color: var(--cielo); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.section-dark .ministry-card-sub { color: var(--oro-luz); }
.ministry-card-desc { font-size: var(--t-sm); color: var(--tinta-2); margin-top: var(--e-1); max-width: 38ch; }
.section-dark .ministry-card-desc { color: var(--luz-2); }
.ministry-card-link {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; margin-top: var(--e-2);
  font-size: var(--t-sm); font-weight: 700; color: var(--cielo);
}
.section-dark .ministry-card-link { color: var(--oro-luz); }
.ministry-card-link:hover { color: var(--sombra); }
.section-dark .ministry-card-link:hover { color: #fff; }

/* ── Último mensaje ─────────────────────────────────────────────────────── */
.ultimo-mensaje-grid {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: var(--e-5); align-items: center;
}
@media (max-width: 900px) { .ultimo-mensaje-grid { grid-template-columns: 1fr; } }
.um-video-wrap iframe, .um-thumb-link {
  width: 100%; aspect-ratio: 16/9;
  border: 0; border-radius: var(--r-lg);
  background: var(--sombra); display: block;
}
.um-thumb-placeholder { display: grid; place-items: center; color: var(--luz-2); }
.um-titulo { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.um-desc   { font-size: var(--t-base); color: var(--tinta-2); margin-top: var(--e-2); max-width: 42ch; }
.act-oracion-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--e-5); align-items: start; }
@media (max-width: 900px) { .act-oracion-grid { grid-template-columns: 1fr; } }

/* ── Instituto ──────────────────────────────────────────────────────────── */
.instituto-section { background: var(--cielo); color: var(--luz); padding-block: var(--e-6); }
.instituto-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--e-5); align-items: center; }
@media (max-width: 900px) { .instituto-grid { grid-template-columns: 1fr; } }
.instituto-badge { display: none; }
.instituto-title { font-size: var(--t-2xl); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.instituto-title span { color: var(--oro-luz); }
.instituto-desc  { font-size: var(--t-base); color: var(--luz-2); margin-top: var(--e-3); max-width: 46ch; }
.instituto-features { list-style: none; margin-top: var(--e-3); display: flex; flex-direction: column; gap: var(--e-1); }
.instituto-features li { display: flex; align-items: baseline; gap: var(--e-2); font-size: var(--t-sm); color: var(--luz); }
.feature-check { color: var(--oro-luz); font-weight: 800; }
.instituto-cta {
  display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: var(--toque); padding-inline: var(--e-3); margin-top: var(--e-4);
  background: var(--oro); color: #2A2205;
  border-radius: var(--r); font-size: var(--t-sm); font-weight: 700;
  transition: background var(--paso);
}
.instituto-cta:hover { background: #d9ba63; }
.instituto-cards { display: grid; gap: var(--e-3); }
.instituto-card { border-top: 2px solid rgba(255,255,255,.32); padding-top: var(--e-2); }
.ic-icon  { display: none; }
.ic-title { font-weight: 700; font-size: var(--t-base); color: #fff; }
.ic-desc  { font-size: var(--t-sm); color: var(--luz-2); margin-top: 2px; }

/* ── Nosotros: línea de tiempo, misión, pastores ────────────────────────── */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--e-3);
  padding-block: var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
}
.section-dark .timeline-item { border-top-color: rgba(255,255,255,.16); }
.timeline-year  { font-size: var(--t-xl); font-weight: 800; color: var(--cielo); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.section-dark .timeline-year { color: var(--oro-luz); }
.timeline-title { font-weight: 700; font-size: var(--t-base); }
.timeline-text  { font-size: var(--t-sm); color: var(--tinta-2); margin-top: 2px; max-width: 52ch; }
.section-dark .timeline-text { color: var(--luz-2); }
@media (max-width: 620px) { .timeline-item { grid-template-columns: 1fr; gap: var(--e-1); } }

.mv-icon  { display: none; }
.mv-title { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; }
.mv-text  { font-size: var(--t-sm); color: var(--tinta-2); margin-top: var(--e-1); max-width: 44ch; }
.section-dark .mv-text { color: var(--luz-2); }

.about-stat       { padding-top: var(--e-2); border-top: 2px solid var(--oro); }
.about-stat-num   { font-size: clamp(1.75rem,3.5vw,2.5rem); font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.about-stat-label { font-size: var(--t-sm); color: var(--tinta-2); }
.section-dark .about-stat-label { color: var(--luz-2); }

.pastor-card   { border-top: 2px solid var(--tinta); padding-top: var(--e-3); }
.pastor-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; background: var(--cal-hueco);
  display: grid; place-items: center;
  font-size: var(--t-xl); font-weight: 800; color: var(--cielo);
  margin-bottom: var(--e-2);
}
.pastor-name  { font-size: var(--t-lg); font-weight: 700; }
.pastor-title { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cielo); }
.pastor-bio   { font-size: var(--t-sm); color: var(--tinta-2); margin-top: var(--e-1); max-width: 44ch; }

/* ── Llamado final ──────────────────────────────────────────────────────── */
/*
 * Texto pequeño sobre un título (hero, CTA). Mismo tratamiento que
 * .horario-dia en main.css — reutilizado en vez de reinventado — para
 * que "pequeño, mayúsculas, dorado, tracked" sea un solo criterio en
 * todo el sitio, no una decisión distinta por sección.
 */
.eyebrow {
  font-size: var(--t-sm); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--oro-luz); margin-bottom: var(--e-2);
}

.cta-section {
  background: var(--sombra); color: var(--luz);
  padding-block: var(--e-6); text-align: center;
}
.cta-section h2 {
  font-size: var(--t-2xl); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.03em; color: #fff; max-width: 20ch; margin-inline: auto;
  text-wrap: balance;
}
.cta-section p {
  font-size: var(--t-lg); font-weight: 300; color: var(--luz-2);
  max-width: 46ch; margin: var(--e-2) auto var(--e-4);
}
.cta-section .hero-actions { justify-content: center; }

/* ── Formularios y avisos heredados ─────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--e-1); margin-bottom: var(--e-3); }
.form-group label { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); }
.section-dark .form-group label { color: var(--luz-2); }

.alert {
  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;
}
.alert-success { background: color-mix(in srgb, var(--ok) 12%, var(--cal)); color: #1E4B34; border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.alert-danger  { background: color-mix(in srgb, var(--brasa) 10%, var(--cal)); color: var(--brasa-tinta); border-color: color-mix(in srgb, var(--brasa) 34%, transparent); }
.alert-warning { background: color-mix(in srgb, var(--oro) 18%, var(--cal)); color: #5A4712; border-color: color-mix(in srgb, var(--oro) 46%, transparent); }
.alert-info    { background: color-mix(in srgb, var(--cielo) 9%, var(--cal)); color: var(--sombra); border-color: color-mix(in srgb, var(--cielo) 28%, transparent); }

/* ── Utilidades heredadas ───────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-sm     { font-size: var(--t-sm); }
.text-muted  { color: var(--tinta-2); }
.section-dark .text-muted, .section-navy .text-muted { color: var(--luz-2); }
.text-dimmed { color: var(--tinta-2); }
.text-white  { color: #fff !important; }
.text-gold   { color: var(--oro-tinta); }
.section-dark .text-gold, .section-navy .text-gold { color: var(--oro-luz); }
.text-blue   { color: var(--cielo); }
.fw-bold     { font-weight: 700; }
.fw-black    { font-weight: 800; }
.mt-1 { margin-top: var(--e-1); } .mt-2 { margin-top: var(--e-2); } .mt-3 { margin-top: var(--e-3); }
.mb-1 { margin-bottom: var(--e-1); } .mb-2 { margin-bottom: var(--e-2); } .mb-3 { margin-bottom: var(--e-3); }
.gap-1 { gap: var(--e-1); } .gap-2 { gap: var(--e-2); }
.d-flex { display: flex; } .align-center { align-items: center; } .flex-wrap { flex-wrap: wrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}