/* =====================================================================
   IGLESIA RENACER · Hoja única del sitio

   Construida sobre el sistema visual de la web de la Escuela Renacer
   (web_escuela/assets/escuela.css y .superdesign/design-system.md), que a
   su vez hereda la escala de color de Ekklesia. Los tres sitios tienen que
   leerse como la misma casa, así que las reglas son las mismas:

     · UNA escala de azul medianoche. El color sólo aparece cuando
       comunica estado (inscripción abierta, en vivo). Dos excepciones
       deliberadas: la Escritura va en el azul institucional, y las fotos.
     · Fraunces (serif, eje óptico) sólo en titulares y versículos;
       Schibsted Grotesk para la interfaz; JetBrains Mono para fechas y
       cifras.
     · UN botón lleno por pantalla. El resto, de contorno.
     · Una tarjeta es una superficie, no un globo: borde fino, radio 10px,
       sombra discreta.

   Lo que la iglesia agrega y la Escuela no tiene: FOTOGRAFÍA. Se integra
   sin romper la paleta: en los héroes la foto va fundida en el
   medianoche (luminosidad + velo), y en el contenido va dentro de
   tarjetas con el mismo radio que todo lo demás.

   Índice
     1 · Tokens            7 · Tarjetas y cifras      13 · Campus
     2 · Base              8 · Eventos y estados      14 · Contacto
     3 · Tipografía        9 · Primeros pasos         15 · Donaciones
     4 · Armazón          10 · Reuniones y pastores   16 · Escuela
     5 · Barra            11 · Lo que creemos         17 · Pie y ventanas
     6 · Héroe            12 · Prédicas               18 · Responsivo y movimiento
   ===================================================================== */

/* ------------------------------ 1 · TOKENS ------------------------------ */
:root{
  /* Color: idéntico a escuela.css (y a ekklesia.css). Si allá cambia,
     acá cambia. */
  --renacer:#003399; --renacer-hover:#173a80;
  --acc:#0e2a63; --acc-ink:#ffffff; --acc-sf:#eef1f8; --acc-bd:#c6cee0;
  --acc-nav:#7fa6ff;

  --bg:#f5f6f8; --sf:#ffffff; --sf2:#fafafb; --sf3:#f2f3f6;
  --ln:#e4e7ec; --ln2:#edeff3;
  --ink:#14161b; --ink2:#3d424d;
  --mut:#666c78;   /* 4,88:1 sobre --bg: pasa AA (ver escuela.css) */

  /* La Escritura: único uso del azul institucional. */
  --escritura:#003399; --escritura-sf:#e7ecfb; --escritura-bd:#aec3ee;
  --escritura-nav:#b0caff;

  /* Estados: semánticos, nunca decorativos. */
  --ok:#067a55; --ok-sf:#e9f7f1; --ok-bd:#b7e2d1;
  --warn:#b45309; --warn-sf:#fdf5e7; --warn-bd:#f0d9a8;
  --vivo:#c11b45;
  --wsp:#25d366;

  /* Chrome oscuro: barra, héroe y pie. */
  --nav:#071129; --nav-ink:rgba(255,255,255,.66); --nav-on:#ffffff;
  --nav-ln:rgba(255,255,255,.10); --nav-hov:rgba(255,255,255,.07);

  /* Roboto, la familia del sitio ORIGINAL de la iglesia, para todo el
     texto: títulos (bold, sin mayúsculas forzadas), cuerpo y cifras (con
     números tabulares en vez de una monoespaciada).
     La ESCRITURA va en Fraunces cursiva, igual que en escuelasrenacer.cl
     (pedido de la iglesia): --letra-escritura es SÓLO para texto bíblico.
     Las palabras de los pastores no son Escritura: van en Roboto cursiva. */
  --titulo:'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --letra-escritura:'Fraunces', Georgia, serif;
  --sans:'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Roboto', system-ui, sans-serif;

  --t-display:clamp(2.35rem, 1.4rem + 4.1vw, 4.5rem);
  --t-h2:clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem);
  --t-h3:1.16rem;
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  --r-sm:7px; --r:10px;
  --sh:0 1px 2px rgba(16,24,40,.06);
  --sh-2:0 1px 2px rgba(16,24,40,.06), 0 10px 28px -12px rgba(16,24,40,.22);
  --sh-acc:0 1px 2px rgba(14,42,99,.10), 0 6px 16px -6px rgba(14,42,99,.28);

  --medida:1180px; --lectura:68ch;
  --sangria:clamp(1.15rem, 4vw, 2.5rem);
  --heroe-pad:clamp(3.5rem, 8vw, 6.5rem);
  --sello:clamp(260px, 34vw, 480px);
  --barra-h:74px;
  --gap:1.25rem;
  --ico:44px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:120ms; --t-med:220ms;

  --z-wsp:30; --z-barra:40; --z-velo:44; --z-menu:45;
}

/* ------------------------------- 2 · BASE ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--barra-h) + 1.5rem);
      -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink2); font-family:var(--sans);
      font-size:var(--t-body); line-height:1.65; overflow-x:clip;
      -webkit-font-smoothing:antialiased; }
img,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
button{ font:inherit; color:inherit; }
p{ margin:0 0 1rem; }
strong,b{ font-weight:600; color:var(--ink); }

:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; }
.ir-barra :focus-visible, .ir-heroe :focus-visible, .ir-pie :focus-visible,
.ir-oscura :focus-visible{ outline-color:var(--acc-nav); }

.ir-saltar{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--sf);
  color:var(--acc); padding:.7rem 1.1rem; border:1px solid var(--acc);
  border-radius:0 0 var(--r-sm) 0; font-weight:600; }
.ir-saltar:focus{ left:0; }

/* ---------------------------- 3 · TIPOGRAFÍA ---------------------------- */
/* La serif entra en dos lugares: titulares de despliegue y Escritura. */
h1,h2,h3,h4{ color:var(--ink); line-height:1.2; margin:0; font-weight:600; }
h1{ font-family:var(--titulo); font-weight:700; font-size:var(--t-display); letter-spacing:-.02em; line-height:1.06; }
h2{ font-family:var(--titulo); font-weight:700; font-size:var(--t-h2); letter-spacing:-.015em; line-height:1.15; }
h3{ font-family:var(--sans); font-size:var(--t-h3); letter-spacing:-.005em; }

.ir-rotulo{ display:flex; align-items:center; gap:.6rem; font-size:var(--t-xs); font-weight:500;
  color:var(--mut); margin:0 0 .75rem; }
.ir-rotulo::before{ content:""; width:22px; height:1px; background:var(--acc-bd); flex:none; }
.ir-rotulo.grande{ font-size:clamp(1rem, .9rem + .5vw, 1.25rem); font-weight:600;
  letter-spacing:-.01em; margin-bottom:1rem; }
.ir-rotulo.grande::before{ width:34px; }
.centro .ir-rotulo{ justify-content:center; }

/* Versículo: referencia en Roboto negrita, texto en Fraunces cursiva. */
.ir-cita{ margin:0; }
.ir-cita .ref{ display:block; font-family:var(--sans); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.03em; color:var(--escritura); margin-bottom:.5rem; font-style:normal; }
.ir-cita .txt{ display:block; font-family:var(--letra-escritura); font-style:italic; font-weight:400;
  font-variation-settings:'opsz' 24, 'SOFT' 0, 'WONK' 0; font-size:1.5rem; line-height:1.4; color:var(--escritura); }
.ir-cita.lateral{ border-left:1px solid var(--escritura-bd); padding-left:clamp(1.1rem, 2.5vw, 1.75rem); }
.ir-cita.chica .txt{ font-size:1.18rem; }

.ir-mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.ir-lead{ max-width:var(--lectura); color:var(--ink2); margin:.85rem 0 0; }
.centro .ir-lead, .ir-lead.centro{ margin-inline:auto; }
.ir-prosa{ max-width:var(--lectura); }
.ir-prosa p{ margin:0 0 1.15em; }
.ir-prosa p:last-child{ margin-bottom:0; }
.ir-nota-txt{ font-size:var(--t-sm); color:var(--mut); margin-top:1.25rem; }

/* ------------------------------ 4 · ARMAZÓN ----------------------------- */
.ir-shell{ width:100%; max-width:var(--medida); margin-inline:auto; padding-inline:var(--sangria); }
.ir-seccion{ padding-block:clamp(3rem, 7vw, 5.5rem); }
.ir-seccion.tenue{ background:var(--sf2); border-block:1px solid var(--ln); }
.ir-seccion.papel{ background:var(--sf); border-block:1px solid var(--ln); }
.ir-seccion + .ir-seccion.tenue, .ir-seccion.tenue + .ir-seccion.tenue{ border-top:0; }
.ir-sec-cab{ margin-bottom:clamp(1.75rem, 3.5vw, 2.75rem); }
.ir-sec-cab p{ max-width:var(--lectura); color:var(--ink2); margin:.85rem 0 0; }
.ir-sec-cab.centro{ text-align:center; }
.ir-sec-cab.centro p{ margin-inline:auto; }
.ir-sec-cab.con-accion{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; }
.ir-duo{ display:grid; gap:clamp(1.5rem, 4vw, 3rem); grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; }
.ir-duo.texto-manda{ grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); align-items:start; }
.centro{ text-align:center; }

/* Botones: UN lleno por pantalla. */
.ir-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:var(--t-sm); font-weight:600; line-height:1.3;
  padding:.7rem 1.2rem; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
  text-decoration:none; text-align:center; background:var(--sf); color:var(--acc); border-color:var(--acc-bd);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.ir-btn:hover{ text-decoration:none; background:var(--acc-sf); border-color:var(--acc); }
.ir-btn.lleno{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); box-shadow:var(--sh-acc); }
.ir-btn.lleno:hover{ background:var(--renacer-hover); border-color:var(--renacer-hover); }
.ir-btn.chico{ padding:.45rem .85rem; font-size:var(--t-xs); }
.ir-btn svg{ width:16px; height:16px; flex:none; }
.ir-heroe .ir-btn:not(.lleno), .ir-oscura .ir-btn:not(.lleno), .ir-pie .ir-btn:not(.lleno){
  background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.ir-heroe .ir-btn:not(.lleno):hover, .ir-oscura .ir-btn:not(.lleno):hover{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.5); }
.ir-heroe .ir-btn.lleno, .ir-oscura .ir-btn.lleno{ background:#fff; color:var(--nav); border-color:#fff; box-shadow:none; }
.ir-heroe .ir-btn.lleno:hover, .ir-oscura .ir-btn.lleno:hover{ background:var(--acc-sf); }
.ir-acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.75rem; }
.ir-acciones.centro{ justify-content:center; }
.ir-enlace{ display:inline-flex; align-items:center; gap:.35rem; font-size:var(--t-sm); font-weight:600; color:var(--acc); }
.ir-enlace svg{ width:15px; height:15px; transition:transform var(--t-fast) var(--ease); }
.ir-enlace:hover svg{ transform:translateX(3px); }

/* ------------------------------- 5 · BARRA ------------------------------ */
/* De escuela.css §5: fija, una fila, activo con tinta plena y filete. */
.ir-barra{ position:sticky; top:0; z-index:var(--z-barra); background:var(--nav);
  border-bottom:1px solid var(--nav-ln); height:var(--barra-h); display:flex; align-items:center; }
.ir-barra .ir-shell{ display:flex; align-items:center; gap:1.5rem; }
.ir-marca{ display:flex; align-items:center; margin-right:auto; min-width:0; }
.ir-marca:hover{ text-decoration:none; }
.ir-marca .logo{ height:38px; width:auto; }
.ir-nav{ display:flex; align-items:center; gap:.1rem; }
.ir-nav a{ color:var(--nav-ink); font-size:.9rem; font-weight:500; padding:.5rem .7rem;
  border-radius:var(--r-sm); white-space:nowrap;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.ir-nav a:hover{ color:var(--nav-on); background:var(--nav-hov); text-decoration:none; }
.ir-nav a[aria-current]{ color:var(--nav-on); background:var(--nav-hov); box-shadow:inset 0 -2px 0 var(--acc-nav); }
.ir-nav .aparte{ margin-left:.85rem; display:inline-flex; align-items:center; gap:.4rem; color:var(--nav-on);
  border:1px solid var(--nav-ln); border-radius:99px; padding:.42rem .95rem; }
.ir-nav .aparte svg{ width:14px; height:14px; opacity:.75; }
.ir-nav .aparte:hover{ border-color:var(--acc-nav);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc-nav) 16%, transparent); }
.ir-nav .aparte[aria-current]{ box-shadow:none; border-color:var(--acc-nav); }
.ir-menu-btn{ display:none; background:none; border:1px solid var(--nav-ln); color:var(--nav-on);
  width:42px; height:40px; border-radius:var(--r-sm); cursor:pointer; align-items:center; justify-content:center; }
.ir-menu-btn svg{ width:20px; height:20px; }
.ir-menu-btn:hover{ background:var(--nav-hov); }

/* ------------------------------- 6 · HÉROE ------------------------------ */
/* El banner de la Escuela (escuela.css §5), en capas:
     fondo      medianoche + halo frío arriba a la derecha
     .foto      la fotografía de la iglesia, fundida por luminosidad
     ::before   el emblema de la iglesia como marca de agua
     canvas     puntos de luz (assets/particulas.js)
     ::after    velo de legibilidad a todo el ancho
     contenido  rótulo · titular · bajada │ versículo · acciones */
.ir-heroe{ position:relative; overflow:hidden; isolation:isolate; color:#fff;
  padding-block:var(--heroe-pad);
  background:radial-gradient(circle at 84% -20%,
      color-mix(in srgb, var(--renacer) 48%, transparent) 0%,
      color-mix(in srgb, var(--renacer) 12%, transparent) 38%, transparent 62%), var(--nav);
  display:flex; flex-direction:column; justify-content:center; }
.ir-heroe.portada{ min-height:min(calc(100svh - var(--barra-h)), 46rem); }
.ir-heroe.compacto{ padding-block:clamp(2.5rem, 5.5vw, 3.75rem); min-height:clamp(17rem, 30vw, 27rem); }
.ir-heroe-foto{ position:absolute; inset:0; z-index:-3; overflow:hidden; }
.ir-heroe-foto img, .ir-heroe-foto video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:var(--foco, 50% 50%); mix-blend-mode:luminosity; opacity:.38; transition:opacity 1.2s ease; }
.ir-heroe-foto img:not(.act){ opacity:0; }
/* Inicio: el video se ve en color y a la vista (es la identidad del sitio
   anterior que la iglesia quiere conservar). Sin sello ni puntos de luz:
   el video ya es el movimiento del banner, y dos adornos encima lo
   ensucian. El velo es un degradado desde abajo-izquierda, donde está el
   texto; arriba a la derecha el video queda casi limpio. */
.ir-heroe.portada .ir-heroe-foto img, .ir-heroe.portada .ir-heroe-foto video{ mix-blend-mode:normal; opacity:1; }
.ir-heroe.portada::before{ display:none; }
.ir-heroe.portada::after{ background:
    linear-gradient(0deg, color-mix(in srgb, var(--nav) 88%, transparent) 0%, transparent 55%),
    linear-gradient(90deg, color-mix(in srgb, var(--nav) 78%, transparent) 0%, color-mix(in srgb, var(--nav) 30%, transparent) 60%, transparent 100%); }
/* Alto: el 80% de la pantalla con tope de 36rem (antes 100% y 44rem: la
   iglesia lo encontró grande). Deja ver la cinta de cifras sin bajar. */
.ir-heroe.portada{ justify-content:flex-end; min-height:min(calc(80svh - var(--barra-h)), 36rem); }
.ir-heroe.portada h1{ font-size:clamp(2.2rem, 1.3rem + 3.4vw, 4rem); max-width:16ch; }
.ir-heroe.portada .ir-heroe-duo.sola{ grid-template-columns:minmax(0, 44ch); }

/* La cinta de cifras, en su franja bajo el banner: se monta sobre el
   borde inferior para que banner y cifras se lean como una sola pieza. */
.ir-franja-cifras{ position:relative; z-index:2; margin-top:calc(-1 * clamp(2rem, 4vw, 3rem)); }
.ir-franja-cifras .ir-cifras{ box-shadow:var(--sh-2); }
.ir-heroe::before{ content:""; position:absolute; inset:0 1.5rem 0 auto; margin-block:auto;
  height:var(--sello); aspect-ratio:1; width:auto;
  background:url("img/logo-renacer-emblema-blanco.png") center/contain no-repeat;
  opacity:.22; z-index:-2; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side, #000 72%, rgba(0,0,0,.5) 88%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 72%, rgba(0,0,0,.5) 88%, transparent 100%);
  animation:irRespira 22s ease-in-out infinite; }
.ir-particulas{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 62%, transparent 100%); }
.ir-heroe::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, color-mix(in srgb, var(--nav) 70%, transparent) 0%,
    color-mix(in srgb, var(--nav) 38%, transparent) 46%, color-mix(in srgb, var(--nav) 66%, transparent) 100%); }
@keyframes irRespira{ 0%,100%{ transform:rotate(-4deg) scale(1); } 50%{ transform:rotate(4deg) scale(1.025); } }
.ir-heroe > .ir-shell{ position:relative; z-index:1; }
.ir-heroe .ir-rotulo{ color:rgba(255,255,255,.66); }
.ir-heroe .ir-rotulo::before{ background:var(--acc-nav); }
.ir-heroe h1{ color:#fff; max-width:22ch; font-weight:700; margin:0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size:clamp(2.1rem, 1.3rem + 3vw, 3.6rem); letter-spacing:-.025em; line-height:1.06;
  text-shadow:0 1px 14px color-mix(in srgb, var(--nav) 72%, transparent); }
.ir-heroe.compacto h1{ font-size:clamp(1.9rem, 1.25rem + 2.4vw, 2.85rem); margin-bottom:1rem; }
.ir-heroe-duo{ display:grid; gap:clamp(2rem, 5vw, 4rem); align-items:start; grid-template-columns:1fr 1fr; }
.ir-heroe-duo.sola{ grid-template-columns:minmax(0, 46ch); }
.ir-heroe .bajada{ margin:0; max-width:46ch; font-size:1.0625rem; line-height:1.6; color:rgba(255,255,255,.8);
  text-shadow:0 1px 14px color-mix(in srgb, var(--nav) 72%, transparent); }
.ir-heroe .bajada + .ir-acciones{ margin-top:1.75rem; }
.ir-heroe .ir-cita{ border-left:1px solid rgba(255,255,255,.28); padding-left:clamp(1.25rem, 3vw, 2.25rem); }
.ir-heroe .ir-cita .ref, .ir-heroe .ir-cita .txt{ color:var(--escritura-nav);
  text-shadow:0 1px 2px color-mix(in srgb, var(--nav) 92%, transparent),
              0 0 12px color-mix(in srgb, var(--nav) 88%, transparent),
              0 0 26px color-mix(in srgb, var(--nav) 70%, transparent); }
.ir-heroe .ir-cita .txt{ font-size:clamp(1.25rem, 2.1vw, 1.7rem); }
.ir-heroe-extra{ margin-top:clamp(2rem, 4vw, 3rem); }

/* Franja oscura dentro del contenido (Encuentro, llamado final). Mismo
   campo que el héroe, sin sello. */
.ir-oscura{ position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:radial-gradient(circle at 12% 120%, color-mix(in srgb, var(--renacer) 40%, transparent) 0%, transparent 55%), var(--nav); }
.ir-oscura h2, .ir-oscura h3{ color:#fff; }
.ir-oscura .ir-rotulo{ color:rgba(255,255,255,.62); }
.ir-oscura .ir-rotulo::before{ background:var(--acc-nav); }
.ir-oscura .ir-lead, .ir-oscura p{ color:rgba(255,255,255,.8); }
.ir-oscura .ir-heroe-foto img{ opacity:.22; }

/* -------------------------- 7 · TARJETAS Y CIFRAS ----------------------- */
.ir-tarjeta{ background:var(--sf); border:1px solid var(--ln); border-radius:var(--r); box-shadow:var(--sh);
  padding:clamp(1.25rem, 2.5vw, 1.6rem); }
a.ir-tarjeta{ display:block; color:inherit;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
a.ir-tarjeta:hover{ text-decoration:none; border-color:var(--acc-bd); box-shadow:var(--sh-acc); transform:translateY(-3px); }
.ir-tarjeta h3{ margin:0 0 .4rem; }
.ir-tarjeta p{ font-size:var(--t-sm); margin:0; }

/* Aro de icono: el mismo de las cifras y los compromisos de la Escuela. */
.ir-ico{ display:grid; place-items:center; flex:none; width:var(--ico); height:var(--ico); border-radius:50%;
  background:var(--acc-sf); border:1px solid var(--acc-bd); color:var(--acc); }
.ir-ico svg{ width:21px; height:21px; }

.ir-cifras{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--sf);
  border:1px solid var(--ln); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; }
.ir-cifra{ padding:1.35rem 1.4rem; min-width:0; }
.ir-cifra:not(:last-child){ border-right:1px solid var(--ln); }
.ir-cifra .ir-ico{ width:38px; height:38px; margin-bottom:.85rem; }
.ir-cifra .ir-ico svg{ width:19px; height:19px; }
.ir-cifra .fg{ font-family:var(--mono); font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); font-weight:500;
  letter-spacing:-.03em; color:var(--acc); line-height:1.1; font-variant-numeric:tabular-nums; display:block; }
.ir-cifra .fg::after{ content:""; display:block; width:2.2rem; height:2px; margin-top:.6rem; background:var(--acc);
  opacity:.3; border-radius:2px; }
.ir-cifra .lb{ font-size:var(--t-sm); color:var(--ink); display:block; margin-top:.5rem; font-weight:600; }
.ir-cifra .nt{ font-size:var(--t-xs); color:var(--mut); display:block; margin-top:.2rem; }
.ir-heroe .ir-cifras{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.15); box-shadow:none;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ir-heroe .ir-cifra:not(:last-child){ border-right-color:rgba(255,255,255,.14); }
.ir-heroe .ir-cifra .fg{ color:#fff; }
.ir-heroe .ir-cifra .fg::after{ background:var(--acc-nav); opacity:.6; }
.ir-heroe .ir-cifra .ir-ico{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:var(--acc-nav); }
.ir-heroe .ir-cifra .lb{ color:rgba(255,255,255,.85); }
.ir-heroe .ir-cifra .nt{ color:rgba(255,255,255,.55); }

/* Accesos de la portada: foto + texto, dentro de una tarjeta. */
.ir-accesos{ display:grid; gap:var(--gap); grid-template-columns:repeat(4, minmax(0, 1fr)); }
.ir-acceso{ display:flex; flex-direction:column; background:var(--sf); border:1px solid var(--ln); border-radius:var(--r);
  box-shadow:var(--sh); overflow:hidden; color:inherit;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.ir-acceso:hover{ text-decoration:none; border-color:var(--acc-bd); box-shadow:var(--sh-acc); transform:translateY(-3px); }
.ir-acceso .foto{ aspect-ratio:16/10; overflow:hidden; background:var(--nav); }
.ir-acceso .foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ir-acceso:hover .foto img{ transform:scale(1.04); }
.ir-acceso .txt{ padding:1.1rem 1.2rem 1.25rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.ir-acceso h3{ font-size:1.05rem; }
.ir-acceso p{ margin:0; font-size:var(--t-sm); color:var(--ink2); }
.ir-acceso .ir-enlace{ margin-top:auto; padding-top:.6rem; }

/* -------------------------- 8 · EVENTOS Y ESTADOS ----------------------- */
.ir-estado{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-xs); font-weight:600;
  padding:.2rem .6rem; border-radius:99px; border:1px solid var(--ln); background:var(--sf2); color:var(--mut); }
.ir-estado::before{ content:""; width:6px; height:6px; border-radius:99px; background:currentColor; flex:none; }
.ir-estado.abierto{ color:var(--ok); background:var(--ok-sf); border-color:var(--ok-bd); }
.ir-estado.pronto{ color:var(--warn); background:var(--warn-sf); border-color:var(--warn-bd); }
.ir-estado.vivo{ color:#fff; background:var(--vivo); border-color:var(--vivo); }
.ir-oscura .ir-estado.abierto{ background:rgba(6,122,85,.22); border-color:rgba(183,226,209,.45); color:#b7e2d1; }

/* Bloque de fecha (el `.cuando` de las fichas de curso de la Escuela). */
.ir-fecha{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none;
  width:64px; padding:.5rem 0 .55rem; border-radius:var(--r-sm); background:var(--acc-sf); border:1px solid var(--acc-bd); line-height:1; }
.ir-fecha b{ font-family:var(--mono); font-size:1.7rem; font-weight:500; color:var(--acc); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.ir-fecha em{ font-style:normal; font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--acc); margin-top:.25rem; }
.ir-fecha i{ font-style:normal; font-family:var(--mono); font-size:10px; color:var(--mut); margin-top:.2rem; }
.ir-oscura .ir-fecha{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); }
.ir-oscura .ir-fecha b, .ir-oscura .ir-fecha em{ color:#fff; }
.ir-oscura .ir-fecha i{ color:rgba(255,255,255,.55); }

.ir-evento{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:clamp(1.5rem, 4vw, 3.5rem); align-items:center; }
.ir-evento .cab{ display:flex; gap:1.1rem; align-items:flex-start; margin-bottom:1.25rem; }
.ir-evento .cab h2{ margin:.35rem 0 0; }
.ir-cuenta{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.15); border-radius:var(--r); overflow:hidden; }
.ir-cuenta div{ padding:1.1rem .5rem; text-align:center; }
.ir-cuenta div:not(:last-child){ border-right:1px solid rgba(255,255,255,.14); }
.ir-cuenta b{ display:block; font-family:var(--mono); font-weight:500; font-size:clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1.05; }
.ir-cuenta span{ display:block; font-size:var(--t-xs); color:rgba(255,255,255,.6); margin-top:.35rem; }
.ir-otros-eventos{ margin-top:1.25rem; font-size:var(--t-sm); }
.ir-otros-eventos a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* --------------------------- 9 · PRIMEROS PASOS ------------------------- */
/* «Soy nuevo»: pasos numerados, cada uno con su acción. Donde la acción
   depende del campus (registrarse, donar), el paso lista un enlace por
   sede. */
.ir-pasos{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap);
  grid-template-columns:repeat(4, minmax(0, 1fr)); counter-reset:paso; }
.ir-paso{ position:relative; display:flex; flex-direction:column; background:var(--sf); border:1px solid var(--ln);
  border-radius:var(--r); box-shadow:var(--sh); padding:1.35rem 1.35rem 1.4rem; counter-increment:paso; }
.ir-paso .num{ font-family:var(--mono); font-size:var(--t-xs); color:var(--mut); margin:.9rem 0 .15rem; }
.ir-paso .num::before{ content:"0" counter(paso); }
.ir-paso h3{ margin:0 0 .45rem; font-size:1.08rem; }
.ir-paso p{ margin:0 0 1rem; font-size:var(--t-sm); color:var(--ink2); }
.ir-paso .accion{ margin-top:auto; }
.ir-paso.destacado{ border-color:var(--acc); box-shadow:0 0 0 1px var(--acc), var(--sh-acc); }
.ir-sedes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.ir-sedes a{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem .75rem;
  border:1px solid var(--ln); border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:500; color:var(--ink);
  background:var(--sf2); transition:border-color var(--t-fast), background var(--t-fast); }
.ir-sedes a:hover{ text-decoration:none; border-color:var(--acc); background:var(--acc-sf); color:var(--acc); }
.ir-sedes svg{ width:15px; height:15px; color:var(--acc); flex:none; }

/* ------------------------ 10 · REUNIONES Y PASTORES --------------------- */
.ir-reuniones{ display:grid; gap:var(--gap); grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ir-reunion{ display:flex; flex-direction:column; }
.ir-reunion .ir-ico{ margin-bottom:1rem; }
.ir-reunion h3{ margin-bottom:.35rem; }
.ir-reunion .cuando{ display:flex; align-items:baseline; gap:.6rem; margin:0 0 .85rem; }
.ir-reunion .cuando b{ font-family:var(--mono); font-weight:500; font-size:1.35rem; color:var(--acc); letter-spacing:-.02em; }
.ir-reunion .cuando span{ font-size:var(--t-sm); color:var(--mut); }
.ir-reunion p{ margin:0; font-size:var(--t-sm); }

/* Horarios por campus: una tabla por sede, datos vivos de campus_cultos. */
.ir-horarios-campus{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.ir-horarios-campus h3{ display:flex; align-items:center; gap:.5rem; font-size:1rem; margin-bottom:.8rem; }
.ir-horarios-campus h3 svg{ width:17px; height:17px; color:var(--acc); }
.ir-lista-datos{ list-style:none; margin:0; padding:0; }
.ir-lista-datos li{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; font-size:var(--t-sm);
  border-bottom:1px solid var(--ln2); }
.ir-lista-datos li:last-child{ border-bottom:0; }
.ir-lista-datos .rot{ color:var(--ink2); }
.ir-lista-datos .val{ font-family:var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }

.ir-pastores{ display:grid; gap:var(--gap); grid-template-columns:repeat(4, minmax(0, 1fr)); }
.ir-pastor{ text-align:center; }
.ir-pastor img{ width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 1rem;
  box-shadow:0 0 0 4px var(--sf), 0 0 0 5px var(--acc-bd); }
.ir-pastor h3{ font-family:var(--titulo); font-size:1.08rem; font-weight:700; letter-spacing:-.012em; margin:0 0 .3rem; }
.ir-pastor p{ margin:0; font-size:var(--t-xs); color:var(--mut); font-weight:500; text-transform:uppercase; letter-spacing:.05em; }

/* --------------------------- 11 · LO QUE CREEMOS ------------------------ */
/* Siete artículos numerados, como la Declaración de Fe de la Escuela. */
.ir-fe-lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap); grid-template-columns:repeat(2, minmax(0, 1fr)); }
.ir-fe-art{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.2rem 1rem; }
.ir-fe-art .num{ grid-row:1 / 4; font-family:var(--mono); font-size:var(--t-xs); color:var(--mut); padding-top:.3rem; }
.ir-fe-art h3{ font-family:var(--titulo); font-weight:700; font-size:1.14rem; line-height:1.35; letter-spacing:-.01em; margin:0 0 .45rem; }
.ir-fe-art p{ margin:0 0 .85rem; font-size:var(--t-sm); }
.ir-fe-art .citas{ font-size:var(--t-xs); font-weight:700; letter-spacing:.03em; color:var(--escritura); }

/* ------------------------------ 12 · PRÉDICAS --------------------------- */
.ir-yt{ position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; border-radius:var(--r-sm);
  overflow:hidden; cursor:pointer; background:var(--nav); }
.ir-yt img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-med) var(--ease), opacity var(--t-med); }
.ir-yt:hover img{ transform:scale(1.035); opacity:.9; }
.ir-yt-play{ position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%;
  background:rgba(7,17,41,.78); color:#fff; display:grid; place-items:center; backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.35); transition:background var(--t-fast), transform var(--t-fast); }
.ir-yt:hover .ir-yt-play{ background:var(--acc); transform:scale(1.06); }
.ir-yt-play svg{ width:22px; height:22px; margin-left:3px; }
.ir-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ir-yt .vistas{ position:absolute; right:.5rem; bottom:.5rem; font-family:var(--mono); font-size:11px; color:#fff;
  background:rgba(7,17,41,.8); padding:.1rem .45rem; border-radius:4px; }

.ir-pred-destacada{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:clamp(1.25rem, 3.5vw, 2.75rem); align-items:center; }
.ir-pred-destacada .ir-yt{ border-radius:var(--r); box-shadow:var(--sh-2); }
.ir-pred-destacada h2{ margin:.4rem 0 .75rem; }
.ir-pred-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:var(--t-sm); color:var(--mut); margin:0 0 .25rem; }
.ir-pred-meta span{ display:inline-flex; align-items:center; gap:.35rem; }
.ir-pred-meta svg{ width:15px; height:15px; }

.ir-filtros{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.75rem; }
.ir-filtro{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.ir-filtro .rot{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-xs); color:var(--mut); margin-right:.25rem; min-width:6.5rem; }
.ir-filtro .rot svg{ width:15px; height:15px; }
.ir-filtro .op{ display:inline-flex; align-items:center; gap:.45rem; font-size:var(--t-sm); font-weight:500; color:var(--ink2);
  background:var(--sf); border:1px solid var(--ln); border-radius:99px; padding:.35rem .8rem;
  transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.ir-filtro .op:hover{ border-color:var(--acc); color:var(--acc); text-decoration:none; }
.ir-filtro .op.act{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
.ir-filtro .n{ font-family:var(--mono); font-size:11px; background:var(--sf3); color:var(--mut); border-radius:99px; padding:.05rem .4rem; }
.ir-filtro .op.act .n{ background:rgba(255,255,255,.2); color:#fff; }

.ir-buscador{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.6rem; max-width:560px; }
.ir-campo input, .ir-campo select{ font:inherit; font-size:var(--t-sm); color:var(--ink); background:var(--sf);
  border:1px solid var(--ln); border-radius:var(--r-sm); padding:0 .9rem; width:100%; height:44px; }
.ir-campo input:focus, .ir-campo select:focus{ outline:2px solid var(--acc); outline-offset:-1px; border-color:transparent; }
.ir-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.ir-pred-grilla{ display:grid; gap:1.5rem var(--gap); grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.ir-pred h3{ font-size:1rem; line-height:1.35; margin:.8rem 0 .25rem; }
.ir-pred p{ margin:0; font-size:var(--t-xs); color:var(--mut); }
.ir-pred .etq{ display:inline-block; font-size:11px; font-weight:600; color:var(--acc); background:var(--acc-sf);
  border:1px solid var(--acc-bd); border-radius:99px; padding:.05rem .5rem; margin-top:.45rem; }
.ir-pred .etq.nuevo{ color:var(--ok); background:var(--ok-sf); border-color:var(--ok-bd); }

.ir-series{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ir-serie{ display:flex; gap:1rem; align-items:center; }
.ir-serie .mini{ position:relative; width:108px; flex:none; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--nav); }
.ir-serie .mini img{ width:100%; height:100%; object-fit:cover; }
.ir-serie .mini b{ position:absolute; right:4px; bottom:4px; font-family:var(--mono); font-size:10px; color:#fff;
  background:rgba(7,17,41,.85); padding:.05rem .35rem; border-radius:4px; }
.ir-serie h3{ font-size:.98rem; margin:0 0 .15rem; }
.ir-serie p{ margin:0; font-size:var(--t-xs); color:var(--mut); }

.ir-resultado{ margin:0 0 1.25rem; font-size:var(--t-sm); color:var(--mut); }
.ir-vacio{ text-align:center; padding:3rem 1rem; color:var(--mut); }
.ir-paginas{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem 1.5rem; margin-top:2.5rem; }
.ir-paginas span{ font-family:var(--mono); font-size:var(--t-xs); color:var(--mut); }

/* Reproductor en ventana: se abre con cualquier prédica y se puede
   compartir (la URL lleva ?v=ID). */
.ir-reproductor{ width:min(980px, calc(100vw - 2rem)); padding:0; border:0; border-radius:var(--r); background:var(--nav);
  color:#fff; box-shadow:0 30px 80px rgba(0,0,0,.5); overflow:visible; }
.ir-reproductor::backdrop{ background:rgba(7,17,41,.82); backdrop-filter:blur(3px); }
.ir-reproductor .marco{ aspect-ratio:16/9; background:#000; border-radius:var(--r) var(--r) 0 0; overflow:hidden; }
.ir-reproductor .marco iframe{ width:100%; height:100%; border:0; display:block; }
.ir-reproductor .info{ padding:1.1rem 1.35rem 1.25rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1.5rem; }
.ir-reproductor h2{ color:#fff; font-size:clamp(1.15rem, 1rem + .8vw, 1.5rem); }
.ir-reproductor .ir-pred-meta{ color:rgba(255,255,255,.62); margin-top:.3rem; }
.ir-reproductor .ir-acciones{ margin:0; }
.ir-reproductor .ir-btn:not(.lleno){ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }

/* ------------------------------- 13 · CAMPUS ---------------------------- */
/* «Dónde estamos» de la Escuela (escuela.css §8o y §8l). */
.ir-campus-galeria .panel{ display:grid; gap:clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); align-items:start; }
.ir-campus-galeria .panel + .panel{ margin-top:clamp(1.25rem, 3vw, 2rem); }
html.js .ir-campus-galeria .panel:not(.act){ display:none; }
html.js .ir-campus-galeria .panel + .panel{ margin-top:0; }
html.js .ir-campus-galeria .panel.act{ animation:irEntraPanel 380ms var(--ease) both; }
@keyframes irEntraPanel{ from{ opacity:0; transform:translateY(8px); } }
.ir-mapa{ position:relative; overflow:hidden; border:1px solid var(--ln); border-radius:var(--r); box-shadow:var(--sh);
  background:var(--sf3); aspect-ratio:16 / 10; min-height:280px; }
.ir-mapa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.82) hue-rotate(-8deg); }
.ir-mapa .sin-mapa{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.5rem; padding:2rem; background:var(--acc-sf); }
.ir-mapa .sin-mapa .ir-ico{ width:52px; height:52px; background:var(--acc); border-color:var(--acc); color:#fff; margin-bottom:.35rem; }
.ir-mapa .sin-mapa b{ font-size:var(--t-sm); }
.ir-mapa .sin-mapa p{ margin:0; max-width:32ch; font-size:var(--t-xs); color:var(--ink2); }
.ir-campus-historia{ margin:1.25rem 0 0; font-size:var(--t-sm); color:var(--ink2); max-width:var(--lectura); }
.ir-mapa-datos{ display:flex; flex-direction:column; }
.ir-mapa-datos .titulo{ margin:0 0 .75rem; padding-bottom:.9rem; border-bottom:1px solid var(--ln); font-family:var(--titulo);
  font-weight:700; font-size:1.3rem; letter-spacing:-.018em; color:var(--ink); }
.ir-mapa-datos .resumen{ font-size:var(--t-sm); margin:0 0 1.25rem; }
.ir-ubicacion-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.ir-ubicacion-lista li{ display:flex; gap:.85rem; align-items:flex-start; }
.ir-ubicacion-lista .ir-ico{ width:36px; height:36px; }
.ir-ubicacion-lista .ir-ico svg{ width:18px; height:18px; }
.ir-ubicacion-lista .t{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.ir-ubicacion-lista b{ font-size:var(--t-sm); color:var(--ink); line-height:1.35; }
.ir-ubicacion-lista em{ font-style:normal; font-size:var(--t-xs); color:var(--mut); line-height:1.45; }
.ir-ubicacion-lista a{ font-weight:600; }
.ir-mapa-datos .ir-acciones{ margin-top:1.6rem; }
.ir-campus-tarjetas{ list-style:none; margin:clamp(2rem, 4vw, 2.75rem) 0 0; padding:0; display:grid;
  gap:clamp(.9rem, 2vw, 1.25rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ir-campus-tarjetas li{ display:flex; }
.ir-campus-tarjetas a{ display:block; width:100%; color:inherit; cursor:pointer; background:var(--sf); border:1px solid var(--ln);
  border-radius:var(--r); box-shadow:var(--sh); padding:1.15rem 1.25rem 1.25rem;
  transition:border-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-fast) var(--ease); }
.ir-campus-tarjetas a:hover{ border-color:var(--acc-bd); transform:translateY(-2px); text-decoration:none; }
.ir-campus-tarjetas a.act{ border-color:var(--acc); box-shadow:0 0 0 1px var(--acc), var(--sh); transform:translateY(-2px); }
.ir-campus-tarjetas a.virtual{ background:var(--acc-sf); border-style:dashed; border-color:var(--acc-bd); }
.ir-campus-tarjetas .ir-ico{ width:36px; height:36px; margin-bottom:.85rem; }
.ir-campus-tarjetas .ir-ico svg{ width:18px; height:18px; }
.ir-campus-tarjetas a.act .ir-ico, .ir-campus-tarjetas a.virtual .ir-ico{ background:var(--acc); border-color:var(--acc); color:#fff; }
.ir-campus-tarjetas h3{ margin:0 0 .25rem; font-size:1.02rem; }
.ir-campus-tarjetas p{ margin:0; font-size:var(--t-sm); line-height:1.5; color:var(--ink2); }

.ir-galeria{ list-style:none; padding:0; margin:0; display:grid; gap:var(--gap); grid-template-columns:repeat(4, minmax(0, 1fr)); }
.ir-galeria button{ display:block; width:100%; padding:0; border:1px solid var(--ln); background:var(--nav); cursor:zoom-in;
  border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--sh); }
.ir-galeria img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ir-galeria button:hover img{ transform:scale(1.05); }

/* ------------------------------ 14 · CONTACTO --------------------------- */
.ir-canales{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:clamp(1.5rem, 4vw, 3rem); align-items:center; }
.ir-canal-qr{ margin:0; text-align:center; }
.ir-canal-qr img{ width:170px; margin:auto; border-radius:var(--r-sm); }
.ir-canal-qr figcaption{ font-size:var(--t-xs); color:var(--mut); margin-top:.5rem; max-width:170px; }
.ir-cuentas{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.centro .ir-cuentas{ justify-content:center; }
.ir-cuentas a{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border:1px solid var(--ln); background:var(--sf);
  border-radius:99px; font-weight:500; font-size:var(--t-sm); color:var(--ink2); }
.ir-cuentas a:hover{ border-color:var(--acc); color:var(--acc); text-decoration:none; }
.ir-cuentas svg{ width:16px; height:16px; }
.ir-ubicacion{ display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(1.5rem, 4vw, 3rem); align-items:center; }
.ir-ubicacion iframe{ width:100%; aspect-ratio:16/10; min-height:280px; border:0; border-radius:var(--r); box-shadow:var(--sh); display:block;
  filter:saturate(.82) hue-rotate(-8deg); }

/* ----------------------------- 15 · DONACIONES -------------------------- */
.ir-datos{ list-style:none; margin:0; padding:0; background:var(--sf); border:1px solid var(--ln); border-radius:var(--r);
  box-shadow:var(--sh); overflow:hidden; }
.ir-datos li{ display:flex; gap:1rem; justify-content:space-between; align-items:center; padding:.75rem 1.1rem; font-size:var(--t-sm); }
.ir-datos li:not(:last-child){ border-bottom:1px solid var(--ln2); }
.ir-datos .rot{ color:var(--mut); flex:none; }
.ir-datos .val{ color:var(--ink); font-weight:600; text-align:right; overflow-wrap:anywhere; }
.ir-datos .val.num{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; }
.ir-copiar{ margin-left:.5rem; border:1px solid var(--ln); background:var(--sf2); border-radius:6px; font-size:11px; font-weight:600;
  color:var(--acc); padding:.15rem .45rem; cursor:pointer; vertical-align:1px; }
.ir-copiar:hover{ border-color:var(--acc); }
.ir-copiar.ok{ color:var(--ok); border-color:var(--ok-bd); background:var(--ok-sf); }
.ir-dar{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* ------------------------------- 16 · ESCUELA --------------------------- */
.ir-ruta{ list-style:none; margin:0; padding:0; position:relative; }
.ir-ruta::before{ content:""; position:absolute; left:7px; top:.8rem; bottom:1.6rem; width:1px; background:var(--acc-bd); }
.ir-etapa{ position:relative; padding-left:2.6rem; padding-bottom:2.25rem; }
.ir-etapa:last-child{ padding-bottom:0; }
.ir-etapa::before{ content:""; position:absolute; left:0; top:.55rem; width:15px; height:15px; border-radius:99px;
  background:var(--acc); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--acc-bd); }
.ir-seccion.papel .ir-etapa::before{ border-color:var(--sf); }
.ir-etapa.puerta::before{ background:var(--bg); }
.ir-etapa .paso{ font-family:var(--mono); font-size:var(--t-xs); color:var(--mut); display:block; margin-bottom:.15rem; }
.ir-etapa h3{ margin:0 0 .35rem; font-size:1.05rem; }
.ir-etapa p{ margin:0; max-width:var(--lectura); font-size:var(--t-sm); }
.ir-modos{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap); grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ir-modos li{ display:grid; grid-template-columns:auto 1fr; gap:.15rem .9rem; align-content:start; }
.ir-modos .ir-ico{ grid-row:1 / 3; }
.ir-modos b{ font-size:var(--t-sm); padding-top:.2rem; }
.ir-modos span:last-child{ font-size:var(--t-sm); color:var(--ink2); }
.ir-btn-grande{ display:inline-flex; align-items:center; gap:1.1rem; margin-top:2rem; background:#fff; color:var(--nav);
  border-radius:var(--r); padding:1.2rem 1.5rem 1.2rem 1.25rem; box-shadow:0 18px 40px -14px rgba(0,0,0,.55); text-align:left;
  max-width:100%; transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.ir-btn-grande:hover{ transform:translateY(-3px); text-decoration:none; color:var(--nav); box-shadow:0 24px 48px -14px rgba(0,0,0,.6); }
.ir-btn-grande > svg:first-child{ width:48px; height:48px; flex:none; padding:11px; border-radius:50%; background:var(--acc); color:#fff; }
.ir-btn-grande span{ display:flex; flex-direction:column; font-size:var(--t-sm); color:var(--mut); min-width:0; font-family:var(--mono); }
.ir-btn-grande b{ font-family:var(--titulo); font-weight:700; font-size:clamp(1.2rem, 1rem + .9vw, 1.55rem); color:var(--nav);
  letter-spacing:-.015em; }
.ir-btn-grande > svg:last-child{ width:24px; height:24px; flex:none; color:var(--acc); transition:transform var(--t-med) var(--ease); }
.ir-btn-grande:hover > svg:last-child{ transform:translateX(4px); }
.ir-sello-mini{ width:88px; margin:0 auto 1.25rem; }

.ir-tipeo{ margin:2.5rem auto 0; max-width:52ch; min-height:3.2em; font-family:var(--letra-escritura); font-style:italic;
  font-weight:400; font-variation-settings:'opsz' 24, 'SOFT' 0, 'WONK' 0;
  font-size:clamp(1.15rem, 1rem + .6vw, 1.4rem); color:var(--escritura); line-height:1.5; }
.ir-tipeo .cursor{ display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.12em;
  background:currentColor; animation:irCursor 1s steps(1) infinite; }
@keyframes irCursor{ 50%{ opacity:0; } }

/* --------------------------- 17 · PIE Y VENTANAS ------------------------ */
/* ── El pie ──────────────────────────────────────────────────────────
   Arriba, los campus en una franja fina y discreta (el diagrama anterior
   se veía saturado): rótulo chico, los nombres separados por puntos y
   «Ver todos». Los enlaces se subrayan con una línea que crece; las redes
   suben un poco al pasar. */
.ir-pie{ position:relative; isolation:isolate; overflow:hidden; color:rgba(255,255,255,.66); font-size:var(--t-sm);
  padding-block:clamp(1.5rem, 3.5vw, 2.1rem) 1.1rem;
  background:radial-gradient(circle at 85% -20%, color-mix(in srgb, var(--renacer) 45%, transparent), transparent 50%), var(--nav); }
.ir-pie a{ color:rgba(255,255,255,.82); text-decoration:none; }
.ir-pie a:hover{ color:#fff; }
.ir-pie-campus{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.4rem; padding-bottom:1.1rem; border-bottom:1px solid var(--nav-ln); }
.ir-pie-campus .rot{ display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--escritura-nav); }
.ir-pie-campus .rot svg{ width:15px; height:15px; }
.ir-pie-campus ul{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem 0; margin:0; }
.ir-pie-campus li{ display:flex; align-items:center; margin:0; }
.ir-pie-campus li + li::before{ content:""; width:3px; height:3px; margin:0 .75rem; border-radius:50%; background:rgba(176,202,255,.45); }
.ir-pie-campus ul a, .ir-pie-duo ul a{ position:relative; }
.ir-pie-campus ul a::after, .ir-pie-duo ul a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--acc-nav); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease); }
.ir-pie-campus ul a:hover::after, .ir-pie-duo ul a:hover::after{ transform:scaleX(1); }
.ir-pie-enlace{ margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; font-size:var(--t-xs); color:rgba(255,255,255,.6) !important; }
.ir-pie-enlace:hover{ color:#fff !important; }
.ir-pie-enlace svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.ir-pie-enlace:hover svg{ transform:translateX(3px); }

.ir-pie-duo{ display:grid; gap:1.5rem 2.5rem; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.3fr);
  align-items:start; padding-top:clamp(1.3rem, 3vw, 1.7rem); }
.ir-pie h4{ margin:0 0 .6rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--escritura-nav); }
.ir-pie ul{ list-style:none; margin:0; padding:0; }
.ir-pie li{ margin-bottom:.28rem; line-height:1.5; }
.ir-pie ul.dos{ display:grid; grid-template-columns:repeat(2, max-content); gap:0 1.5rem; }
.ir-pie .dato{ color:rgba(255,255,255,.55); }
.ir-pie .marca{ display:flex; gap:1rem; align-items:flex-start; }
.ir-pie .marca img{ width:48px; flex:none; }
.ir-pie .marca p{ max-width:36ch; margin:0 0 .75rem; font-size:var(--t-xs); line-height:1.6; }
/* El lema no es Escritura: Roboto cursiva, no Fraunces. */
.ir-pie .marca p.lema{ margin-bottom:.35rem; font-style:italic; font-weight:500; font-size:1.05rem; color:#fff; }
.ir-redes{ display:flex; gap:.45rem; }
.ir-redes li{ margin:0; }
.ir-redes a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  transition:transform .3s var(--ease), background-color .3s, border-color .3s; }
.ir-redes a:hover{ transform:translateY(-3px); background:rgba(127,166,255,.16); border-color:var(--acc-nav); }
.ir-redes svg{ width:17px; height:17px; }
.ir-pie .legal{ margin-top:clamp(1.3rem, 3vw, 1.8rem); padding-top:.9rem; border-top:1px solid var(--nav-ln); display:flex; flex-wrap:wrap;
  gap:.35rem 1.5rem; justify-content:space-between; align-items:center; font-size:var(--t-xs); color:rgba(255,255,255,.48); }
.ir-pie-arriba{ display:inline-flex; align-items:center; gap:.35rem; color:rgba(255,255,255,.7) !important; }
.ir-pie-arriba svg{ width:14px; height:14px; transform:rotate(-90deg); transition:transform .3s var(--ease); }
.ir-pie-arriba:hover svg{ transform:rotate(-90deg) translateX(3px); }
@media (max-width: 960px){
  .ir-pie-duo{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ir-pie .marca{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  .ir-pie-enlace{ margin-left:0; }
}
@media (max-width: 600px){
  /* En el teléfono: la marca arriba y cada lista a todo el ancho, en dos
     columnas. «El sitio» repite el menú, que está siempre a un toque arriba. */
  .ir-pie-duo{ grid-template-columns:minmax(0, 1fr); gap:1.1rem; }
  .ir-pie-duo > div:nth-child(3) ul{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 1rem; }
  .ir-pie .marca img{ width:44px; }
  .ir-pie-duo nav{ display:none; }
  .ir-pie .legal span:nth-child(2){ display:none; }
}

.ir-wsp{ position:fixed; right:clamp(.9rem, 2.5vw, 1.5rem); bottom:clamp(.9rem, 2.5vw, 1.5rem); z-index:var(--z-wsp);
  width:54px; height:54px; border-radius:50%; background:var(--wsp); color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.22); transition:transform var(--t-fast) var(--ease); }
.ir-wsp:hover{ transform:scale(1.07); }
.ir-wsp svg{ width:28px; height:28px; }

.ir-visor{ border:0; padding:0; background:transparent; overflow:visible; max-width:min(1100px, calc(100vw - 2rem)); }
.ir-visor::backdrop{ background:rgba(7,17,41,.85); backdrop-filter:blur(2px); }
.ir-visor img{ max-height:calc(100dvh - 4rem); width:auto; margin:auto; border-radius:var(--r-sm); }
.ir-cerrar{ position:absolute; top:-.9rem; right:-.9rem; width:42px; height:42px; border-radius:50%; border:0; background:#fff;
  color:var(--ink); cursor:pointer; display:grid; place-items:center; z-index:2; box-shadow:var(--sh-2); }
.ir-cerrar svg{ width:20px; height:20px; }
body:has(dialog[open]){ overflow:hidden; }

/* ------------------------ 18 · RESPONSIVO Y MOVIMIENTO ------------------ */
@media (max-width: 1080px){
  .ir-nav a{ padding:.5rem .5rem; font-size:.86rem; }
  .ir-nav .aparte{ margin-left:.4rem; }
  .ir-pasos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px){
  .ir-heroe-duo, .ir-duo, .ir-duo.texto-manda, .ir-evento, .ir-pred-destacada, .ir-ubicacion{ grid-template-columns:minmax(0, 1fr); }
  .ir-heroe .ir-cita{ border-left:0; border-top:1px solid rgba(255,255,255,.16); padding-left:0; padding-top:1.5rem; }
  .ir-accesos, .ir-pastores{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ir-reuniones, .ir-modos{ grid-template-columns:minmax(0, 1fr); }
  .ir-fe-lista{ grid-template-columns:minmax(0, 1fr); }
  .ir-campus-galeria .panel{ display:flex; flex-direction:column; }
  .ir-mapa-col{ display:contents; }
  .ir-mapa{ order:1; aspect-ratio:4 / 3; width:100%; }
  .ir-mapa-datos{ order:2; } .ir-campus-historia{ order:3; margin-top:0; }

  /* Menú de teléfono: el de la Escuela, con el velo como hijo de la barra
     (ver escuela.css §11 para el porqué del apilamiento). */
  .ir-menu-btn{ display:inline-flex; }
  .ir-marca .logo{ height:32px; }
  .ir-nav{ position:fixed; inset:var(--barra-h) 0 auto 0; z-index:var(--z-menu); flex-direction:column; align-items:stretch; gap:0;
    background:var(--nav); border-bottom:1px solid var(--nav-ln); padding:.5rem var(--sangria) 1.15rem;
    max-height:calc(100dvh - var(--barra-h)); overflow-y:auto;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility var(--t-med); }
  body[data-menu="abierto"] .ir-nav{ transform:none; opacity:1; visibility:visible; }
  .ir-nav a{ padding:.85rem .5rem; border-radius:0; border-bottom:1px solid var(--nav-ln); font-size:1rem; }
  .ir-nav a[aria-current]{ box-shadow:inset 3px 0 0 var(--acc-nav); }
  .ir-nav .aparte{ margin:.75rem 0 0; justify-content:center; border-radius:var(--r-sm); border:1px solid var(--nav-ln); }
  .ir-barra{ z-index:var(--z-menu); }
  .ir-barra::before{ content:""; position:fixed; inset:var(--barra-h) 0 0 0; z-index:var(--z-velo); background:rgba(7,17,41,.5);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--t-med) var(--ease), visibility var(--t-med); }
  body[data-menu="abierto"] .ir-barra::before{ opacity:1; visibility:visible; pointer-events:auto; }
  body[data-menu="abierto"]{ overflow:hidden; }
}

@media (max-width: 760px){
  .ir-cifras{ grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ir-cifra{ border-bottom:1px solid var(--ln); }
  .ir-cifra:nth-child(2n){ border-right:0; }
  .ir-cifra:last-child:nth-child(odd){ grid-column:1 / -1; border-right:0; }
  .ir-cifra:last-child, .ir-cifra:nth-last-child(2):nth-child(odd){ border-bottom:0; }
  .ir-heroe .ir-cifra{ border-bottom-color:rgba(255,255,255,.14); }
  .ir-galeria{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ir-canales{ grid-template-columns:minmax(0, 1fr); }
}

@media (max-width: 600px){
  :root{ --t-body:1rem; --barra-h:62px; --sello:clamp(220px, 62vw, 320px); }
  .ir-heroe::before{ inset:0 -28% 0 auto; opacity:.14; }
  .ir-pasos, .ir-accesos{ grid-template-columns:minmax(0, 1fr); }
  .ir-pastores{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1rem;
    margin-inline:calc(var(--sangria) * -1); padding:.25rem var(--sangria) 1rem; scrollbar-width:none; }
  .ir-pastores::-webkit-scrollbar{ display:none; }
  .ir-pastor{ flex:0 0 72%; scroll-snap-align:center; }
  .ir-filtro{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(var(--sangria) * -1); padding-inline:var(--sangria);
    scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent); }
  .ir-filtro::-webkit-scrollbar{ display:none; }
  .ir-filtro .op{ flex:none; }
  .ir-filtro .rot{ min-width:auto; flex:none; }
  .ir-acciones .ir-btn{ flex:1 1 auto; }
  .ir-datos li{ flex-direction:column; align-items:flex-start; gap:.1rem; }
  .ir-datos .val{ text-align:left; }
  .ir-cuenta b{ font-size:1.5rem; }
  .ir-btn-grande{ width:100%; padding:1rem 1.1rem; gap:.8rem; }
  .ir-btn-grande > svg:first-child{ width:42px; height:42px; }
  .ir-reproductor{ width:100vw; max-width:100vw; border-radius:0; }
  .ir-cerrar{ top:.5rem; right:.5rem; }
}

/* Revelado al entrar en pantalla: sólo se esconde si hay JavaScript para
   volver a mostrar. El fallo degrada a «todo visible». */
html.js .ir-revelar{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms); }
html.js .ir-revelar.visto{ opacity:1; transform:none; }

@supports (animation-timeline: scroll()){
  .ir-barra::after{ content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform-origin:0 50%;
    transform:scaleX(0); background:linear-gradient(90deg, var(--acc-nav), #fff); animation:irAvance linear both;
    animation-timeline:scroll(root block); }
}
@keyframes irAvance{ to{ transform:scaleX(1); } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html.js .ir-revelar{ opacity:1; transform:none; }
  .ir-barra::after{ animation:none; transform:scaleX(0); }
}

@media print{
  .ir-barra, .ir-wsp, .ir-heroe-foto, .ir-pie, .ir-particulas{ display:none; }
  .ir-heroe, .ir-oscura{ background:none; color:var(--ink); }
  .ir-heroe h1, .ir-oscura h2{ color:var(--ink); }
  body{ background:#fff; }
}

/* Tarjeta mini de evento (inscripciones abiertas de otros tipos). */
.ir-eventos-mini{ display:grid; gap:.6rem; }
.ir-evento-mini{ display:flex; align-items:center; gap:.9rem; padding:.75rem .9rem; }
.ir-evento-mini .ir-fecha{ width:52px; padding:.35rem 0 .4rem; }
.ir-evento-mini .ir-fecha b{ font-size:1.25rem; }
.ir-evento-mini .t{ display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; min-width:0; flex:1; }
.ir-evento-mini .t b{ font-size:var(--t-sm); line-height:1.3; }
.ir-evento-mini > svg{ width:18px; height:18px; color:var(--acc); flex:none; }
.ir-oscura .ir-evento-mini{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); box-shadow:none; }
.ir-oscura .ir-evento-mini .t b, .ir-oscura .ir-evento-mini > svg{ color:#fff; }
.ir-nota-txt svg{ width:15px; height:15px; vertical-align:-2px; }
.ir-oscura .ir-nota-txt{ color:rgba(255,255,255,.6); }

/* ⚠️ `a.ir-tarjeta{display:block}` tiene más especificidad que `.ir-serie`
   y dejaba la miniatura de las series a todo el ancho de la tarjeta. */
a.ir-serie{ display:flex; }
.ir-sec-cab.con-accion .ir-buscador{ flex:1 1 360px; max-width:460px; }

/* ⚠️ Las etiquetas `.ir-sr` son `position:absolute`. Dentro de una fila de
   filtros con scroll horizontal (teléfono), si la fila no es su bloque
   contenedor, la etiqueta se posiciona contra la PÁGINA en el punto donde
   quedó —a 1.300px— y ensancha todo el documento. Medido en /predicas a
   375px: 1.371px de ancho por una etiqueta invisible. */
.ir-filtro, .ir-buscador{ position:relative; }
.ir-sr{ top:0; left:0; }
a.ir-evento-mini{ display:flex; }

/* ── Párrafos justificados ──
   Pedido de la iglesia: los textos largos y explicativos van justificados
   (a diferencia de la Escuela, que los alinea a la izquierda). Para que la
   justificación no abra «ríos» de espacio en columnas angostas, va con
   división silábica (`hyphens:auto`, que usa el idioma del <html lang>).
   En los bloques centrados, la última línea queda centrada. */
.ir-prosa p, .ir-lead, .ir-sec-cab p, .ir-fe-art p, .ir-campus-historia, .ir-etapa p,
.ir-reunion p, .ir-paso p, .ir-tarjeta p, .ir-mapa-datos .resumen, .ir-acceso p,
.ir-heroe .bajada, .ir-oscura p{
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:6 3 3; }
.centro .ir-lead, .ir-sec-cab.centro p, .centro .ir-tarjeta p{ text-align-last:center; }
/* Textos de una línea o datos: nunca justificados. */
.ir-nota-txt, .ir-pred p, .ir-serie p, .ir-pastor p, .ir-lista-datos li, .ir-resultado{ text-align:left; hyphens:manual; }
.centro .ir-nota-txt{ text-align:center; }

/* ── La ventana de formularios (Ekklesia, Inscripciones) ──
   Apaisada y con el lenguaje de la web, no una columna de teléfono: a la
   izquierda un panel medianoche que dice QUÉ es y QUÉ PASA con lo que se
   envía (campus, destino de los datos o del aporte), a la derecha el
   formulario real en su marco. En el teléfono, pantalla completa con el
   panel reducido a una cabecera. */
.ir-ventana{ width:min(1080px, calc(100vw - 3rem)); height:min(760px, calc(100dvh - 3rem)); max-width:none; max-height:none;
  padding:0; border:0; border-radius:var(--r); background:var(--sf); box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:visible; }
.ir-ventana[open]{ display:grid; grid-template-columns:minmax(260px, 320px) minmax(0, 1fr); }
.ir-ventana[open]{ animation:irPasajeEntra 220ms var(--ease); }
.ir-ventana::backdrop{ background:rgba(7,17,41,.78); backdrop-filter:blur(3px); }
.ir-ventana .lado{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:.2rem;
  padding:clamp(1.5rem, 3vw, 2.25rem); color:#fff; border-radius:var(--r) 0 0 var(--r);
  background:radial-gradient(circle at 20% 110%, color-mix(in srgb, var(--renacer) 45%, transparent) 0%, transparent 60%), var(--nav); }
.ir-ventana .lado::after{ content:""; position:absolute; right:-30%; bottom:-12%; width:90%; aspect-ratio:1; z-index:-1; opacity:.08;
  background:url("img/logo-renacer-emblema-blanco.png") center/contain no-repeat; }
.ir-ventana .lado .ir-ico{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:var(--acc-nav); margin-bottom:1rem; }
.ir-ventana .lado .ir-rotulo{ color:rgba(255,255,255,.62); margin-bottom:.4rem; }
.ir-ventana .lado .ir-rotulo::before{ background:var(--acc-nav); }
.ir-ventana .lado h2{ color:#fff; font-size:clamp(1.35rem, 1.1rem + .9vw, 1.75rem); margin-bottom:.75rem; }
.ir-ventana .lado .txt{ color:rgba(255,255,255,.8); font-size:var(--t-sm); margin:0 0 1rem; text-align:left; }
.ir-ventana .lado .seguro{ margin-top:auto; display:flex; gap:.5rem; align-items:flex-start; font-size:var(--t-xs); color:rgba(255,255,255,.55); text-align:left; }
.ir-ventana .lado .seguro svg{ width:15px; height:15px; flex:none; margin-top:.1rem; }
.ir-ventana .lado .ir-btn{ align-self:flex-start; margin-top:.75rem; background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.ir-ventana .lado .ir-btn:hover{ background:rgba(255,255,255,.09); }
.ir-ventana .marco{ position:relative; background:var(--bg); border-radius:0 var(--r) var(--r) 0; overflow:hidden; }
.ir-ventana iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ir-ventana.cargando .marco{ background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='18' fill='none' stroke='%230e2a63' stroke-width='4' stroke-dasharray='80 40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/42px no-repeat; }
.ir-ventana.cargando iframe{ opacity:0; }
.ir-ventana > .ir-cerrar{ top:-.9rem; right:-.9rem; }
@media (max-width: 760px){
  .ir-ventana{ width:100vw; height:100dvh; border-radius:0; }
  .ir-ventana[open]{ grid-template-columns:1fr; grid-template-rows:auto minmax(0, 1fr); }
  .ir-ventana .lado{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:.2rem .75rem; padding:.85rem 3.5rem .85rem 1rem; border-radius:0; }
  .ir-ventana .lado .ir-ico, .ir-ventana .lado .txt, .ir-ventana .lado .seguro, .ir-ventana .lado .ir-rotulo{ display:none; }
  .ir-ventana .lado h2{ font-size:1.05rem; margin:0; flex:1; min-width:0; }
  .ir-ventana .lado .ir-btn{ margin:0; }
  .ir-ventana .lado .ir-btn span{ display:none; }
  .ir-ventana .marco{ border-radius:0; }
  .ir-ventana > .ir-cerrar{ top:.6rem; right:.6rem; background:rgba(255,255,255,.12); color:#fff; box-shadow:none; }
}

/* ── Referencias bíblicas y la ventana del pasaje ──
   De escuela.css (.ee-ref / .ee-pasaje). La cita es un enlace punteado en
   el azul de la Escritura; al pincharla se abre el pasaje en Reina-Valera
   1960, con el emblema de la iglesia como marca de agua.
   ⚠️ El diálogo es IGUAL al de la Escuela (pedido de la iglesia): el texto
   en Fraunces y los números, el tema y la posición en JetBrains Mono, que
   se cargan sólo para esto (ver includes/sitio.php). El resto del sitio
   sigue en Roboto. */
.ir-ref{ color:inherit; text-decoration:underline dotted var(--escritura-bd); text-underline-offset:3px; cursor:pointer; }
.ir-ref:hover{ text-decoration:underline solid currentColor; }
.ir-heroe .ir-ref{ text-decoration-color:rgba(176,202,255,.5); }
.ir-pasaje{ width:min(560px, calc(100vw - 2.5rem)); max-height:min(78vh, 720px); padding:clamp(1.5rem, 4vw, 2.25rem);
  border:1px solid var(--ln); border-radius:var(--r); background:var(--sf); color:var(--ink2);
  box-shadow:0 24px 60px -18px rgba(16,24,40,.4); overflow:auto;
  --pasaje-serif:'Fraunces', Georgia, serif;
  --pasaje-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.ir-pasaje::before{ content:""; position:absolute; z-index:0; pointer-events:none; right:1.5%; bottom:2.5%;
  width:min(250px, 56%); aspect-ratio:1; background:url("img/emblema-renacer.png") center/contain no-repeat; opacity:.07; }
.ir-pasaje > *{ position:relative; z-index:1; }
.ir-pasaje::backdrop{ background:rgba(7,17,41,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ir-pasaje[open]{ animation:irPasajeEntra 220ms var(--ease); }
@keyframes irPasajeEntra{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
.ir-pasaje .cerrar-form{ position:absolute; top:.85rem; right:.85rem; z-index:3; margin:0; }
.ir-pasaje .cerrar{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r-sm);
  background:none; border:1px solid transparent; color:var(--mut); cursor:pointer; }
.ir-pasaje .cerrar:hover{ background:var(--sf3); color:var(--ink); }
.ir-pasaje .cerrar svg{ width:16px; height:16px; }
.ir-pasaje .ref{ margin:0 0 1.1rem; padding-right:2.75rem; font-family:var(--sans); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.03em; color:var(--escritura); }
/* Un párrafo por versículo, justificado y con partición silábica, como
   en una Biblia impresa; `text-wrap:pretty` evita la palabra sola en la
   última línea. */
.ir-pasaje .cuerpo p{ font-family:var(--pasaje-serif); font-weight:400; font-style:normal; font-size:1.14rem; line-height:1.62;
  color:var(--ink); margin:0 0 .75rem; font-variation-settings:'opsz' 20, 'SOFT' 0, 'WONK' 0;
  text-align:justify; text-align-last:left; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:6 2 2; text-wrap:pretty; }
.ir-pasaje .cuerpo p:last-child{ margin-bottom:0; }
.ir-pasaje .cuerpo .v{ font-family:var(--pasaje-mono); font-size:.66em; font-weight:500; color:var(--escritura);
  vertical-align:.35em; margin-right:.4em; font-variant-numeric:tabular-nums; }
.ir-pasaje .cuerpo .cargando, .ir-pasaje .cuerpo .error{ font-family:var(--sans); font-size:var(--t-sm); color:var(--mut); }
.ir-pasaje .cuerpo .error{ color:#c11b45; }
.ir-pasaje .pie{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:space-between; align-items:baseline;
  margin:1.6rem 0 0; padding-top:1rem; border-top:1px solid var(--ln); font-size:var(--t-xs); }
.ir-pasaje .version{ color:var(--mut); }
.ir-pasaje .cuerpo .nota{ margin:1.1rem 0 0; font-family:var(--sans); padding-top:.85rem; border-top:1px solid var(--ln); font-size:var(--t-xs); line-height:1.5; color:var(--mut); }

/* Opciones de pago por campus (Donaciones): una fila por campus con sus
   botones, según lo que cada campus tiene habilitado en Ekklesia. */
.ir-opciones-campus{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.45rem; }
.ir-opciones-campus li{ display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap;
  padding:.55rem .6rem .55rem .85rem; border:1px solid var(--ln); border-radius:var(--r-sm); background:var(--sf2); }
.ir-opciones-campus .nom{ font-weight:600; font-size:var(--t-sm); color:var(--ink); }
.ir-opciones-campus .ops{ display:flex; gap:.4rem; flex-wrap:wrap; }

/* «Te esperamos» rotando por campus (Inicio). Las fichas se apilan en la
   misma celda de la grilla, así la tarjeta mide lo que la ficha más alta y
   no salta al cambiar. */
.ir-rota-campus .fichas{ display:grid; }
.ir-rota-campus .ficha{ grid-area:1 / 1; transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.js .ir-rota-campus .ficha:not(.act){ opacity:0; transform:translateY(6px); pointer-events:none; visibility:hidden; }
.ir-rota-campus h3{ margin:0 0 .6rem; }
.ir-rota-campus h3 a{ color:inherit; text-decoration:none; }
.ir-rota-campus h3 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ir-rota-campus .pie{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }
.ir-rota-campus .puntos{ display:flex; gap:.4rem; }
.ir-rota-campus .puntos button{ position:relative; width:9px; height:9px; padding:0; border:0; border-radius:50%; background:var(--acc-bd); cursor:pointer;
  transition:background var(--t-fast), transform var(--t-fast); }
.ir-rota-campus .puntos button::after{ content:""; position:absolute; inset:-12px -5px; }
.ir-rota-campus .puntos button[aria-selected="true"]{ background:var(--acc); transform:scale(1.25); }

/* El sello del banner, a la escala de la Escuela. En los banners
   interiores (compactos, ~27rem de alto) el tamaño del banner alto
   —hasta 480px— dejaba el emblema más grande que el propio banner. Acá
   mide lo que mide el de la Escuela en proporción: ~60% del alto. */
.ir-heroe.compacto::before{ height:clamp(190px, 22vw, 300px); inset:0 clamp(1rem, 6vw, 5rem) 0 auto; opacity:.2; }
@media (max-width: 600px){
  .ir-heroe.compacto::before{ height:clamp(160px, 46vw, 220px); inset:0 -18% 0 auto; opacity:.12; }
}

/* El sello de la Escuela, SÓLO en el banner de su página (como en
   escuelasrenacer.cl). El resto del sitio firma con el emblema de la
   iglesia. El sello de la Escuela es un aro con letras: se lee a menor
   opacidad que el emblema liso de la iglesia. */
.ir-heroe.sello-escuela::before{ background-image:url("img/emblema-escuela-blanco.png"); opacity:.26; }
@media (max-width: 600px){ .ir-heroe.sello-escuela::before{ opacity:.14; } }

/* Contacto: el video de bienvenida en la columna derecha del banner
   (ir_heroe 'lado'). Es la única imagen de la página: el banner va sin
   foto, así que el video manda sin competir. Sin rótulo encima: la
   miniatura ya trae su propio título. */
.ir-heroe-duo.con-lado{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); align-items:center; }
.ir-heroe-lado{ min-width:0; }
.ir-heroe:has(.con-lado)::before{ display:none; }   /* el sello detrás del video era una capa más */
.ir-yt.grande{ border-radius:var(--r); box-shadow:0 28px 60px -22px rgba(0,0,0,.7); outline:1px solid rgba(255,255,255,.14); }
.ir-yt.grande .ir-yt-play{ width:clamp(60px, 7vw, 80px); height:clamp(60px, 7vw, 80px); }
.ir-yt.grande .ir-yt-play svg{ width:clamp(22px, 2.6vw, 30px); height:clamp(22px, 2.6vw, 30px); margin-left:4px; }
@media (max-width: 960px){ .ir-heroe-duo.con-lado{ grid-template-columns:minmax(0, 1fr); } }

/* ── Convocatorias ──
   La tarjeta de curso de la Escuela (.ee-curso en proximamente.php),
   para todo tipo de evento: fecha grande a la izquierda, nombre y
   modalidad, resumen de tres líneas y, abajo, el estado y las acciones.
   La abierta lleva el filete verde a la izquierda: se distingue sin leer. */
.ir-filtro-conv{ margin-bottom:clamp(2rem, 4vw, 3rem); }
.ir-bloque-tipo + .ir-bloque-tipo{ margin-top:clamp(2.5rem, 5vw, 3.75rem); padding-top:clamp(2.5rem, 5vw, 3.75rem); border-top:1px solid var(--ln); }
.ir-cab-tipo{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.25rem, 2.5vw, 1.75rem); }
.ir-cab-tipo .ir-ico{ width:48px; height:48px; }
.ir-cab-tipo h2{ margin:0; }
.ir-cab-tipo p{ margin:.25rem 0 0; color:var(--mut); }
.ir-convocatorias{ display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ir-convocatoria{ position:relative; display:flex; flex-direction:column; gap:.9rem;
  padding:1.25rem 1.35rem 1.35rem; overflow:hidden; }
.ir-convocatoria.abierta::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--ok); }
.ir-convocatoria .cab{ display:flex; align-items:flex-start; gap:.9rem; }
.ir-convocatoria .ir-fecha{ width:56px; padding:.4rem 0 .45rem; }
.ir-convocatoria .titulo{ min-width:0; display:flex; flex-direction:column; gap:.25rem; }
.ir-convocatoria h3{ margin:0; font-size:1.05rem; line-height:1.3; }
.ir-convocatoria .meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem; }
.ir-convocatoria .fase{ font-size:var(--t-xs); color:var(--mut); }
.ir-convocatoria .resumen{ margin:0; font-size:var(--t-sm); color:var(--ink2); text-align:left; -webkit-hyphens:manual; hyphens:manual;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ir-convocatoria .ir-nota-txt{ margin:0; display:flex; align-items:center; gap:.4rem; font-size:var(--t-xs); }
.ir-convocatoria .ir-nota-txt svg{ width:14px; height:14px; flex:none; }
.ir-convocatoria .pie{ margin-top:auto; padding-top:.9rem; border-top:1px solid var(--ln);
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; }
.ir-convocatoria .ir-enlace{ cursor:pointer; }
@media (max-width: 600px){
  .ir-cab-tipo{ align-items:flex-start; }
  .ir-cab-tipo .ir-ico{ width:40px; height:40px; }
}

/* La lista de datos dentro de una tarjeta (Contacto, Aula Virtual): la
   tarjeta no trae relleno propio y los iconos quedaban pegados al borde. */
.ir-ubicacion-lista.ir-tarjeta{ padding:clamp(1.25rem, 2.5vw, 1.75rem); align-self:start; }
.ir-heroe-duo.con-lado h1{ margin-bottom:1rem; }
.ir-tarjeta.centro > .ir-ico{ margin:0 auto 1rem; width:48px; height:48px; }
.ir-tarjeta.centro p{ text-align:center; }
.ir-canal-qr img{ border:1px solid var(--ln); }

/* Equipo pastoral de los campus: segunda fila, tres tarjetas centradas.
   Sin foto, el retrato de reemplazo: mismo círculo, mismo aro, y el gris
   claro de fondo de estudio de las fotos de los pastores. */
.ir-pastores-sub{ text-align:center; font-size:var(--t-sm); font-weight:600; color:var(--mut); text-transform:uppercase;
  letter-spacing:.08em; margin:clamp(2.25rem, 4.5vw, 3.25rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  display:flex; align-items:center; gap:1rem; }
.ir-pastores-sub::before, .ir-pastores-sub::after{ content:""; flex:1; height:1px; background:var(--ln); }
.ir-pastores.campus{ grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:calc(75% + var(--gap) * .25); margin-inline:auto; }
.ir-pastor-sin-foto{ display:block; width:104px; height:104px; border-radius:50%; overflow:hidden; margin:0 auto 1rem;
  background:radial-gradient(circle at 50% 30%, #f4f5f7 0%, #e3e6eb 70%, #d9dde3 100%);
  box-shadow:0 0 0 4px var(--sf), 0 0 0 5px var(--acc-bd); }
.ir-pastor-sin-foto svg{ display:block; width:100%; height:100%; fill:#aeb5c1; }
.ir-pastor-sin-foto svg .d{ fill:#9aa2b0; }
@media (max-width: 960px){ .ir-pastores.campus{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:none; } }
@media (max-width: 600px){ .ir-pastores.campus{ margin-inline:calc(var(--sangria) * -1); max-width:none; } }
.ir-pastor p{ text-align:center; }   /* la regla de justificado lo dejaba a la izquierda */

/* El video del banner no se ve hasta que corre: antes está la foto, que es
   su primer cuadro (ver sitio.js §3). Así no hay dos capas iguales encima. */
.ir-heroe .ir-heroe-foto video{ transition:none; }
.ir-heroe .ir-heroe-foto video:not(.listo){ opacity:0; }

/* El titular del banner en una sola línea: sitio.js §16 mide y, si hace
   falta, achica la letra lo justo para que quepa. */
.ir-heroe h1.una-linea{ white-space:nowrap; max-width:none; }

/* =====================================================================
   MEJORA VISUAL · bloque 1 (septiembre 2026)
   Todo lo que se mueve acá se apaga con «reducir movimiento» (la regla
   general de §16 deja las transiciones en 0,01 ms) y nada esconde
   contenido si el script no corre (html.js).
   ===================================================================== */

/* G1 · Las cifras, como en la web de la Escuela: cada una con su tono (el
   icono, el número y la línea), el número cuenta desde 0 al aparecer
   (sitio.js §17) y la línea bajo el número crece después. Los tonos son
   los de la escala de la Escuela más dos de la misma familia; ninguno
   baja de 4,5:1 sobre el blanco de la tarjeta. */
.ir-cifra{ --tn-ink:#1b3a6b; --tn-sf:#e8eefb; --tn-bd:#bdcdea; }
.ir-cifra:nth-child(6n+2){ --tn-ink:#12508f; --tn-sf:#e4eefc; --tn-bd:#b3d1f0; }
.ir-cifra:nth-child(6n+3){ --tn-ink:#1d5573; --tn-sf:#e6f0f6; --tn-bd:#b6d2e2; }
.ir-cifra:nth-child(6n+4){ --tn-ink:#0a6ba8; --tn-sf:#e2f2fe; --tn-bd:#a8d8f5; }
.ir-cifra:nth-child(6n+5){ --tn-ink:#3949ab; --tn-sf:#e8eaf8; --tn-bd:#c3c8ee; }
.ir-cifra:nth-child(6n+6){ --tn-ink:#0e7490; --tn-sf:#e0f3f7; --tn-bd:#a5d8e3; }
.ir-cifra .ir-ico{ background:var(--tn-sf); border-color:var(--tn-bd); color:var(--tn-ink); }
.ir-cifra .fg{ color:var(--tn-ink); }
.ir-cifra .fg::after{ background:var(--tn-ink); opacity:.32; transition:width 620ms var(--ease) 240ms; }
html.js .ir-revelar:not(.visto) .ir-cifra .fg::after{ width:0; }
/* La cinta entra entera (no se desliza): lo que se mueve son los números. */
html.js .ir-cifras.ir-revelar{ transform:none; }

/* G2 · De una página a otra sin el pestañeo blanco: el navegador funde el
   contenido y la barra queda quieta (View Transitions entre documentos;
   donde no existe, se navega como siempre). */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.28s; animation-timing-function:var(--ease); }
  .ir-barra{ view-transition-name:barra; }
}

/* G3 · Al bajar, la barra se vuelve vidrio esmerilado y el logo se achica
   un poco. No cambia de alto: moverla empujaría la página. */
.ir-barra{ transition:background-color .3s var(--ease), box-shadow .3s var(--ease); }
.ir-marca .logo{ transition:transform .3s var(--ease); transform-origin:0 50%; }
/* Casi opaca (pedido de la iglesia): con .82 el blanco de las secciones
   se trasluce y el azul marino se volvía un azul grisáceo claro. Queda un
   leve vidrio esmerilado, pero el color es el de la barra. */
html.bajado .ir-barra{ background:rgba(7,17,41,.96); box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); }
html.bajado .ir-marca .logo{ transform:scale(.9); }

/* G4 · Las tarjetas se iluminan donde pasa el cursor (sitio.js §18 deja la
   posición en --mx/--my). Sólo con mouse: en un teléfono no hay «donde
   pasa». Es una capa de background-image: no pisa el color de fondo de
   las tarjetas oscuras. */
@media (hover: hover) and (pointer: fine){
  .ir-tarjeta{ transition:border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
  .ir-tarjeta.luz{ background-image:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(14,42,99,.07), transparent 45%);
    border-color:var(--acc-bd); }
  .ir-oscura .ir-tarjeta.luz, .ir-heroe .ir-tarjeta.luz{ background-image:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 45%); }
}

/* G5 · La cabecera de cada sección entra con su filete dibujándose. */
.ir-sec-cab .ir-rotulo::before{ transition:transform .7s var(--ease) .15s; transform-origin:0 50%; }
.ir-sec-cab.centro .ir-rotulo::before{ transform-origin:100% 50%; }
html.js .ir-sec-cab.ir-revelar:not(.visto) .ir-rotulo::before{ transform:scaleX(0); }

/* G6 · Volver arriba, con un anillo que muestra cuánto se ha leído. Va
   sobre el botón de WhatsApp y sólo aparece pasada la primera pantalla. */
.ir-arriba{ position:fixed; right:calc(clamp(.9rem, 2.5vw, 1.5rem) + 6px); bottom:calc(clamp(.9rem, 2.5vw, 1.5rem) + 70px);
  z-index:var(--z-wsp); width:44px; height:44px; border-radius:50%; border:0; padding:0; cursor:pointer;
  display:grid; place-items:center; background:var(--sf); color:var(--acc); box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
html.bajado-mucho .ir-arriba{ opacity:1; visibility:visible; transform:none; }
.ir-arriba:hover{ color:#fff; background:var(--acc); }
.ir-arriba svg.flecha{ width:18px; height:18px; transform:rotate(-90deg); }
.ir-arriba svg.anillo{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.ir-arriba svg.anillo circle{ fill:none; stroke-width:2.5; }
.ir-arriba svg.anillo .fondo{ stroke:var(--ln); }
.ir-arriba svg.anillo .avance{ stroke:var(--acc-nav, #6d8ee8); stroke-linecap:round; stroke-dasharray:125.66;
  stroke-dashoffset:calc(125.66 * (1 - var(--leido, 0))); }
@media print{ .ir-arriba{ display:none; } }
#contenido:focus{ outline:none; }

/* =====================================================================
   MEJORA VISUAL · bloque 2: Inicio
   ===================================================================== */

/* [data-dibujar] · lo que se dibuja al entrar en pantalla (líneas de
   recorridos y rutas). sitio.js §4 le pone .visto, igual que a
   .ir-revelar, pero NO lo esconde: sin script, las líneas están. */
html.js [data-dibujar]:not(.visto){ --dibujo:0; }
[data-dibujar]{ --dibujo:1; }

/* I1 · Primeros pasos como recorrido: el número de cada paso sale en una
   burbuja sobre el borde de su tarjeta, y un riel une las cuatro. */
.ir-pasos{ position:relative; padding-top:18px; }
.ir-paso{ padding-top:2.1rem; }
.ir-paso .num{ position:absolute; top:-18px; left:1.35rem; z-index:2; width:36px; height:36px; margin:0;
  display:grid; place-items:center; border-radius:50%; background:var(--sf); border:1px solid var(--acc-bd);
  color:var(--acc); font-weight:600; box-shadow:0 4px 12px -6px rgba(14,42,99,.35);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1) calc(.35s + var(--i, 0) * .22s), background-color .3s; }
.ir-paso.destacado .num{ background:var(--acc); border-color:var(--acc); color:#fff; }
html.js .ir-pasos:not(.visto) .ir-paso .num{ transform:scale(.4); }
.ir-pasos::before{ content:""; position:absolute; z-index:1; top:17px; height:2px; border-radius:2px;
  left:calc(1.35rem + 18px); right:calc((100% - 3 * var(--gap)) / 4 - 1.35rem - 18px);
  background:linear-gradient(90deg, var(--acc), var(--acc-nav)); transform-origin:0 50%;
  transform:scaleX(var(--dibujo)); transition:transform 1.3s var(--ease) .25s; }
.ir-paso .ir-ico{ transition:transform .35s var(--ease); }
.ir-paso:hover .ir-ico{ transform:translateY(-2px) rotate(-6deg); }
@media (max-width: 960px){
  .ir-pasos{ row-gap:calc(var(--gap) + 18px); }
  .ir-pasos::before{ display:none; }
}

/* I2 · Banda de fotos de Bienvenidos: tres fotos a lo ancho, a distintas
   alturas. Con scroll-driven animations, cada una se desplaza a otra
   velocidad (profundidad); sin ellas, quedan quietas. */
.ir-collage{ display:grid; grid-template-columns:1.9fr 1fr 1fr; gap:clamp(.7rem, 1.6vw, 1.1rem); align-items:center;
  margin-top:clamp(2rem, 4.5vw, 3.25rem); }
.ir-collage figure{ margin:0; overflow:hidden; border-radius:var(--r); box-shadow:var(--sh-2); background:var(--nav);
  height:clamp(190px, 24vw, 320px); }
.ir-collage img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.ir-collage figure:hover img{ transform:scale(1.045); }
.ir-collage .f2{ height:clamp(220px, 28vw, 370px); }
.ir-collage .f3{ height:clamp(170px, 21vw, 280px); }
.ir-collage .f3 img{ object-position:50% 30%; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ir-collage figure{ animation:irFlota linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    .ir-collage .f1{ --desde:18px;  --hasta:-18px; }
    .ir-collage .f2{ --desde:46px;  --hasta:-46px; }
    .ir-collage .f3{ --desde:-10px; --hasta:30px; }
    .ir-collage .f1 img{ animation:irZoom linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  }
}
@keyframes irFlota{ from{ translate:0 var(--desde, 0); } to{ translate:0 var(--hasta, 0); } }
@keyframes irZoom{ from{ scale:1.12; } to{ scale:1; } }
@media (max-width: 600px){
  .ir-collage{ grid-template-columns:1fr 1fr; }
  .ir-collage .f1{ grid-column:1 / -1; height:200px; }
  .ir-collage .f2, .ir-collage .f3{ height:190px; }
}

/* I4 · La ruta de la Escuela en miniatura (Inicio). */
.ir-mini-ruta{ list-style:none; margin:clamp(1.5rem, 3vw, 2rem) 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:.5rem; }
.ir-mini-ruta::before, .ir-mini-ruta::after{ content:""; position:absolute; top:7px; left:7px; right:calc(20% - 7px);
  height:2px; border-radius:2px; }
.ir-mini-ruta::before{ background:var(--ln); }
.ir-mini-ruta::after{ background:linear-gradient(90deg, var(--acc-nav), var(--acc)); transform-origin:0 50%;
  transform:scaleX(var(--dibujo)); transition:transform 1.6s var(--ease) .2s; }
.ir-mini-ruta li{ position:relative; z-index:1; display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.ir-mini-ruta .pt{ width:16px; height:16px; border-radius:50%; background:var(--sf); border:2px solid var(--ln);
  margin-bottom:.55rem; transition:background-color .3s, border-color .3s, box-shadow .3s;
  transition-delay:calc(.3s + var(--i) * .3s); }
.ir-mini-ruta.visto .pt, html:not(.js) .ir-mini-ruta .pt{ background:var(--acc); border-color:var(--acc); box-shadow:0 0 0 4px var(--acc-sf); }
.ir-mini-ruta li:first-child .pt{ background:var(--sf); border-color:var(--acc); }
.ir-mini-ruta b{ font-size:var(--t-xs); color:var(--mut); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.ir-mini-ruta em{ font-style:normal; font-size:var(--t-sm); color:var(--ink); font-weight:600; line-height:1.25; }
@media (max-width: 600px){
  .ir-mini-ruta{ grid-template-columns:minmax(0, 1fr); gap:.9rem; padding-left:1.8rem; }
  .ir-mini-ruta::before, .ir-mini-ruta::after{ top:7px; bottom:7px; left:7px; right:auto; width:2px; height:auto; }
  .ir-mini-ruta::after{ transform-origin:50% 0; transform:scaleY(var(--dibujo)); }
  .ir-mini-ruta li{ flex-direction:row; align-items:baseline; gap:.6rem; }
  .ir-mini-ruta .pt{ position:absolute; left:-1.8rem; top:.1rem; margin:0; }
}

/* El sello de la Escuela en «Estudia con nosotros» (Inicio), en el azul
   del sitio: el PNG blanco se usa como MÁSCARA y el color lo pone el CSS,
   así que es exactamente --acc y cambia si cambia el tono del sitio. */
.ir-escuela-lado{ display:flex; flex-direction:column; align-items:center; gap:clamp(1.25rem, 3vw, 2rem); }
.ir-sello-sitio{ position:relative; width:clamp(130px, 14vw, 176px); aspect-ratio:1; flex:none; }
.ir-sello-sitio::before{ content:""; position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(closest-side, var(--acc-sf), transparent 72%); }
.ir-sello-sitio span{ position:absolute; inset:0; background:var(--acc);
  -webkit-mask:url("img/emblema-escuela-blanco.png") center/contain no-repeat;
          mask:url("img/emblema-escuela-blanco.png") center/contain no-repeat;
  transition:transform .9s cubic-bezier(.34,1.3,.64,1), opacity .9s var(--ease); }
html.js .ir-sello-sitio.ir-revelar:not(.visto) span{ transform:scale(.85) rotate(-8deg); opacity:0; }
html.js .ir-sello-sitio.ir-revelar{ transform:none; }
.ir-escuela-lado .ir-cita.lateral{ align-self:stretch; }

/* =====================================================================
   MEJORA VISUAL · bloque 3: Nosotros, Campus, Horarios
   ===================================================================== */

/* N1 · La historia en una línea de tiempo con fotos. La línea se dibuja,
   cada punto se enciende y la foto entra «descubriéndose» de izquierda
   a derecha. */
/* Cuatro hitos: los inicios, un nuevo nombre, un nuevo campus y hoy. La
   línea va del primer punto al último (el último está al inicio de la
   cuarta columna). */
.ir-historia{ list-style:none; margin:clamp(2.5rem, 5vw, 3.5rem) 0 0; padding:0; position:relative; --hg:clamp(1rem, 2.4vw, 1.8rem);
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--hg); }
.ir-historia::before, .ir-historia::after{ content:""; position:absolute; top:7px; left:8px; right:calc((100% - 3 * var(--hg)) / 4 - 8px);
  height:2px; border-radius:2px; }
.ir-historia::before{ background:var(--ln); }
.ir-historia::after{ background:linear-gradient(90deg, var(--acc-bd), var(--acc)); transform-origin:0 50%;
  transform:scaleX(var(--dibujo)); transition:transform 1.8s var(--ease) .2s; }
.ir-historia li{ position:relative; z-index:1; padding-top:2.1rem; }
.ir-historia .pt{ position:absolute; top:0; left:0; width:16px; height:16px; border-radius:50%; background:var(--sf);
  border:2px solid var(--acc-bd); transition:background-color .4s, border-color .4s, box-shadow .4s;
  transition-delay:calc(.4s + var(--i) * .5s); }
.ir-historia.visto .pt, html:not(.js) .ir-historia .pt{ background:var(--acc); border-color:var(--acc); box-shadow:0 0 0 5px var(--acc-sf); }
.ir-historia figure{ margin:0 0 1rem; aspect-ratio:3 / 2; border-radius:var(--r); overflow:hidden; background:var(--nav); box-shadow:var(--sh-2);
  clip-path:inset(0 0 0 0 round var(--r)); transition:clip-path 1s var(--ease); transition-delay:calc(.3s + var(--i) * .5s); }
html.js .ir-historia li:not(.visto) figure{ clip-path:inset(0 100% 0 0 round var(--r)); }
.ir-historia img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.ir-historia li:hover img{ transform:scale(1.05); }

.ir-historia .cuando{ font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--acc); }
.ir-historia h3{ margin:.25rem 0 .4rem; font-size:1.12rem; }
.ir-historia p{ margin:0; font-size:var(--t-sm); color:var(--ink2); text-align:left; hyphens:manual; }
html.js .ir-historia li.ir-revelar{ transform:none; }
@media (max-width: 1080px) and (min-width: 761px){
  .ir-historia{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:2.2rem; }
  .ir-historia::before, .ir-historia::after{ display:none; }
}
@media (max-width: 760px){
  .ir-historia{ grid-template-columns:minmax(0, 1fr); padding-left:2rem; }
  .ir-historia::before, .ir-historia::after{ top:8px; bottom:8px; left:7px; right:auto; width:2px; height:auto; }
  .ir-historia::after{ transform-origin:50% 0; transform:scaleY(var(--dibujo)); }
  .ir-historia li{ padding-top:0; }
  .ir-historia .pt{ left:-2rem; top:.2rem; }
}

/* N2 · Lo que creemos: icono por afirmación y el número grande, de
   marca de agua, detrás. */
.ir-fe-art{ position:relative; grid-template-columns:auto minmax(0, 1fr); padding:1.25rem 1.25rem 1.25rem 0; }
.ir-fe-art .ir-ico{ grid-row:1 / 4; width:46px; height:46px; transition:transform .4s var(--ease), background-color .3s, color .3s; }
.ir-fe-art .ir-ico svg{ width:22px; height:22px; }
.ir-fe-art:hover .ir-ico{ background:var(--acc); color:#fff; transform:rotate(-8deg) scale(1.05); }
.ir-fe-art .num{ position:absolute; top:-.2rem; right:0; grid-row:auto; padding:0; z-index:0; pointer-events:none;
  font-family:var(--titulo); font-weight:900; font-size:clamp(3rem, 2rem + 3vw, 4.6rem); line-height:1; letter-spacing:-.04em;
  color:var(--acc-sf); }
.ir-fe-art h3, .ir-fe-art p, .ir-fe-art .citas{ position:relative; z-index:1; }
.ir-fe-art h3{ padding-right:3.2rem; }

/* C1 · «Nuestra red»: los campus sobre un riel, a escala de su distancia
   a Santiago. Un punto de luz recorre el riel; el Campus Virtual cuelga
   al final, con línea punteada (no está en el mapa, está en todas partes). */
.ir-red{ position:relative; height:230px; margin-top:.5rem; --ini:6%; --largo:70%; }
.ir-red .riel{ position:absolute; left:var(--ini); width:var(--largo); top:50%; height:3px; margin-top:-1.5px; border-radius:3px;
  background:linear-gradient(90deg, var(--acc), var(--acc-nav)); transform-origin:0 50%; transform:scaleX(var(--dibujo));
  transition:transform 1.6s var(--ease) .2s; }
/* El tramo punteado hasta el Campus Virtual: del fin del riel (76%) al
   nodo virtual (87%) = 11% del esquema = 15,7% del riel (70%). */
.ir-red .riel::after{ content:""; position:absolute; left:100%; top:.5px; width:15.7%; height:0; border-top:2px dashed var(--acc-bd); }
.ir-red .tren{ position:absolute; top:50%; left:0; width:60px; height:9px; margin-top:-4.5px; border-radius:9px;
  background:radial-gradient(closest-side, #fff, rgba(255,255,255,0)); opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .ir-red.visto .tren{ animation:irTren 5.5s var(--ease) 2s infinite; }
}
@keyframes irTren{ 0%{ left:-30px; opacity:0; } 10%{ opacity:1; } 85%{ opacity:1; } 100%{ left:calc(100% - 30px); opacity:0; } }
.ir-red ol{ list-style:none; margin:0; padding:0; }
.ir-red li, .ir-red .virtual{ position:absolute; top:50%; left:calc(var(--ini) + var(--x) * var(--largo)); width:0; }
.ir-red a{ color:inherit; text-decoration:none; }
.ir-red li a, .ir-red .virtual{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.ir-red li a{ position:absolute; left:0; transform:translateX(-50%); width:max-content; max-width:170px; }
.ir-red li.arriba a{ bottom:-9px; flex-direction:column-reverse; }
.ir-red li.abajo a{ top:-9px; }
.ir-red .pt{ width:18px; height:18px; flex:none; border-radius:50%; background:var(--sf); border:3px solid var(--acc);
  box-shadow:0 0 0 5px var(--acc-sf); transition:transform .45s cubic-bezier(.34,1.56,.64,1) calc(.5s + var(--i) * .25s), box-shadow .3s; }
html.js .ir-red:not(.visto) .pt{ transform:scale(0); }
.ir-red li.arriba .pt{ margin-top:.55rem; }
.ir-red li.abajo .pt{ margin-bottom:.55rem; }
.ir-red b{ font-family:var(--titulo); font-size:1.02rem; font-weight:700; color:var(--ink); }
.ir-red em{ font-style:normal; font-size:var(--t-xs); color:var(--mut); font-family:var(--mono); }
.ir-red a:hover b{ color:var(--acc); }
.ir-red a:hover .pt{ box-shadow:0 0 0 8px var(--acc-sf); }
.ir-red .virtual{ left:calc(var(--ini) + var(--largo) + 11%); transform:translate(-50%, -9px); width:max-content; }
.ir-red .virtual .pt{ width:32px; height:32px; border-width:0; background:var(--acc); color:#fff; display:grid; place-items:center; margin-bottom:.55rem;
  margin-top:-7px; }
.ir-red .virtual .pt svg{ width:16px; height:16px; }
@media (max-width: 760px){
  .ir-red{ height:auto; --ini:0; }
  .ir-red .riel, .ir-red .tren{ display:none; }
  .ir-red ol{ display:grid; gap:1rem; padding-left:1.9rem; position:relative; }
  .ir-red ol::before{ content:""; position:absolute; left:8px; top:8px; bottom:8px; width:3px; border-radius:3px;
    background:linear-gradient(var(--acc), var(--acc-nav)); transform-origin:50% 0; transform:scaleY(var(--dibujo)); transition:transform 1.4s var(--ease); }
  .ir-red li, .ir-red .virtual{ position:relative; top:auto; left:auto; width:auto; }
  .ir-red li a, .ir-red li.arriba a, .ir-red li.abajo a{ position:static; transform:none; flex-direction:row; align-items:baseline; gap:.6rem;
    text-align:left; max-width:none; }
  .ir-red .pt, .ir-red li.arriba .pt{ position:absolute; left:-1.9rem; top:.15rem; margin:0; }
  .ir-red .virtual{ transform:none; flex-direction:row; align-items:center; gap:.7rem; margin:1.2rem 0 0; padding-top:1rem;
    border-top:1px dashed var(--acc-bd); }
  .ir-red .virtual .pt{ position:static; margin:0; }
}

/* H1 · La semana, compacta: una tira de siete días (un punto por reunión,
   «hoy» destacado) y debajo sólo los días con reuniones, una fila cada
   uno. La próxima reunión se rellena de azul; las de hoy que ya pasaron
   quedan apagadas. */
.ir-semana{ border:1px solid var(--ln); border-radius:var(--r); background:var(--sf); box-shadow:var(--sh); overflow:hidden; }
.ir-semana .tira{ list-style:none; margin:0; padding:.5rem; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:.35rem;
  background:var(--sf2); border-bottom:1px solid var(--ln); }
.ir-semana .tira li{ display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.45rem 0 .5rem; border-radius:var(--r-sm);
  font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--mut);
  transition:background-color .3s, color .3s; }
.ir-semana .tira li.con{ color:var(--ink); }
.ir-semana .tira i{ display:flex; gap:3px; height:6px; }
.ir-semana .tira em{ width:6px; height:6px; border-radius:50%; background:var(--acc); }
.ir-semana .tira li.hoy{ background:var(--acc); color:#fff; }
.ir-semana .tira li.hoy em{ background:#fff; }
.ir-semana .tira li.hoy span::after{ content:" · hoy"; text-transform:none; font-weight:500; letter-spacing:0; }
.ir-semana .agenda{ list-style:none; margin:0; padding:0; }
.ir-semana .agenda > li{ display:grid; grid-template-columns:8.5rem minmax(0, 1fr); align-items:center; gap:.5rem 1rem; padding:.75rem 1.1rem; }
.ir-semana .agenda > li + li{ border-top:1px solid var(--ln); }
.ir-semana .agenda > li.hoy{ background:linear-gradient(90deg, var(--acc-sf), transparent 60%); }
.ir-semana .nombre{ margin:0; font-size:var(--t-sm); font-weight:700; color:var(--ink); }
.ir-semana .agenda > li.hoy .nombre::after{ content:"Hoy"; margin-left:.45rem; padding:.05rem .45rem; border-radius:99px; background:var(--acc);
  color:#fff; font-size:10px; font-weight:700; letter-spacing:.04em; vertical-align:2px; }
.ir-semana .citas{ display:flex; flex-wrap:wrap; gap:.45rem; }
.ir-semana .cita{ display:inline-flex; align-items:baseline; gap:.45rem; padding:.4rem .75rem; border-radius:99px;
  background:var(--acc-sf); border:1px solid var(--acc-bd); font-size:var(--t-sm); line-height:1.3;
  transition:transform .25s var(--ease), box-shadow .25s, background-color .3s; }
.ir-semana .cita:hover{ transform:translateY(-1px); box-shadow:var(--sh); }
.ir-semana .cita b{ font-family:var(--mono); font-weight:600; color:var(--acc); font-variant-numeric:tabular-nums; }
.ir-semana .cita .que{ font-weight:600; color:var(--ink); }
.ir-semana .cita .donde{ font-size:var(--t-xs); color:var(--mut); }
.ir-semana .cita .donde::before{ content:"· "; }
.ir-semana .cita.proxima{ background:var(--acc); border-color:var(--acc); box-shadow:0 6px 16px -8px rgba(14,42,99,.6); }
.ir-semana .cita.proxima b, .ir-semana .cita.proxima .que{ color:#fff; }
.ir-semana .cita.proxima .donde{ color:rgba(255,255,255,.75); }
.ir-semana .cita.pasada{ opacity:.5; }
/* La próxima reunión, arriba a la derecha, con un pulso que late. */
.ir-proxima{ display:inline-flex; align-items:center; gap:.6rem; margin:0; padding:.55rem .95rem; border-radius:99px;
  background:var(--acc-sf); border:1px solid var(--acc-bd); color:var(--ink); font-size:var(--t-sm); }
.ir-proxima b{ color:var(--acc); }
.ir-proxima .pulso{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--ok, #0a8a5f); flex:none; }
.ir-proxima .pulso::after{ content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:irPulso 1.8s ease-out infinite; }
@keyframes irPulso{ to{ transform:scale(2.8); opacity:0; } }
/* Entrada: los días de la tira caen uno tras otro; las citas aparecen. */
html.js .ir-semana:not(.visto) .tira li{ opacity:0; transform:translateY(-6px); }
.ir-semana .tira li{ transition:opacity .4s var(--ease), transform .4s var(--ease), background-color .3s, color .3s; }
.ir-semana .tira li:nth-child(2){ transition-delay:.05s; } .ir-semana .tira li:nth-child(3){ transition-delay:.1s; }
.ir-semana .tira li:nth-child(4){ transition-delay:.15s; } .ir-semana .tira li:nth-child(5){ transition-delay:.2s; }
.ir-semana .tira li:nth-child(6){ transition-delay:.25s; } .ir-semana .tira li:nth-child(7){ transition-delay:.3s; }
html.js .ir-semana:not(.visto) .cita{ opacity:0; }
.ir-semana-gc{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; padding:.85rem 1.1rem; border-radius:var(--r);
  border:1px dashed var(--acc-bd); color:var(--ink2); font-size:var(--t-sm); text-decoration:none; transition:background-color .3s, border-color .3s; }
.ir-semana-gc:hover{ background:var(--acc-sf); border-color:var(--acc); text-decoration:none; }
.ir-semana-gc svg{ width:18px; height:18px; color:var(--acc); flex:none; }
.ir-semana-gc span{ flex:1; }
@media (max-width: 700px){
  .ir-semana .tira{ gap:.2rem; padding:.4rem; }
  .ir-semana .tira li{ font-size:10px; letter-spacing:.02em; }
  .ir-semana .tira li.hoy span::after{ content:""; }
  .ir-semana .agenda > li{ grid-template-columns:minmax(0, 1fr); gap:.5rem; padding:.8rem .9rem; }
  .ir-semana .cita{ border-radius:var(--r-sm); flex-wrap:wrap; row-gap:.1rem; }
}

/* =====================================================================
   MEJORA VISUAL · bloque 4: Escuela, Donaciones, Convocatorias
   ===================================================================== */

/* E1 · La ruta de la Escuela con un icono por estación. La línea gris es
   el camino; la de color avanza y cada estación se enciende al llegar. */
.ir-ruta.con-iconos::before{ left:17px; top:1.2rem; bottom:1.2rem; width:2px; background:var(--ln); }
.ir-ruta.con-iconos::after{ content:""; position:absolute; left:17px; top:1.2rem; bottom:1.2rem; width:2px; border-radius:2px;
  background:linear-gradient(var(--acc-nav), var(--acc)); transform-origin:50% 0; transform:scaleY(var(--dibujo));
  transition:transform 2s var(--ease) .2s; }
.ir-ruta.con-iconos .ir-etapa{ padding-left:3.6rem; }
.ir-ruta.con-iconos .ir-etapa::before{ display:none; }
.ir-ruta.con-iconos .ico{ position:absolute; z-index:1; left:0; top:0; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--sf); border:2px solid var(--acc-bd); color:var(--acc);
  transition:background-color .4s, color .4s, border-color .4s, box-shadow .4s, transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(.3s + var(--i) * .38s); }
.ir-ruta.con-iconos .ico svg{ width:17px; height:17px; }
.ir-ruta.con-iconos.visto .ico, html:not(.js) .ir-ruta.con-iconos .ico{ background:var(--acc); border-color:var(--acc); color:#fff;
  box-shadow:0 0 0 5px var(--acc-sf); }
html.js .ir-ruta.con-iconos:not(.visto) .ico{ transform:scale(.7); }
.ir-ruta.con-iconos .ir-etapa.puerta .ico{ background:var(--sf); color:#e0445c; border-color:#f3b3bd; box-shadow:0 0 0 5px #fdeef0; }

/* E2 · La pantalla de ingreso del Aula Virtual, dibujada. El RUN se
   escribe, después la contraseña, se pulsa «Acceder» y vuelve a empezar
   (9 s). Con «menos movimiento», los campos quedan escritos y quietos. */
.ir-pasos-aula{ margin:0 0 1.5rem; }
.ir-pasos-aula .ir-ico.n{ font-family:var(--mono); font-weight:600; font-size:.95rem; background:var(--acc); border-color:var(--acc); color:#fff; }
.ir-aula-maqueta{ align-self:center; background:var(--sf); border:1px solid var(--ln); border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(7,17,41,.45), var(--sh); transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition:transform .8s var(--ease); max-width:440px; width:100%; justify-self:center; }
.ir-aula-maqueta:hover{ transform:perspective(1400px) rotateY(0) rotateX(0); }
html.js .ir-aula-maqueta.ir-revelar:not(.visto){ transform:perspective(1400px) rotateY(-14deg) translateY(16px); }
.ir-aula-maqueta .barra{ display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem; background:var(--sf2); border-bottom:1px solid var(--ln); }
.ir-aula-maqueta .barra i{ width:9px; height:9px; border-radius:50%; background:#d9dde5; }
.ir-aula-maqueta .barra i:first-child{ background:#ff6b6b; } .ir-aula-maqueta .barra i:nth-child(2){ background:#ffc24b; } .ir-aula-maqueta .barra i:nth-child(3){ background:#39c07f; }
.ir-aula-maqueta .barra span{ margin-left:.5rem; display:inline-flex; align-items:center; gap:.35rem; font-size:11px; color:var(--mut);
  background:var(--sf); border:1px solid var(--ln); border-radius:99px; padding:.15rem .7rem; }
.ir-aula-maqueta .barra svg{ width:11px; height:11px; color:#39a06f; }
.ir-aula-maqueta .cuerpo{ padding:1.6rem 1.8rem 1.9rem; display:flex; flex-direction:column; gap:.9rem; }
.ir-aula-maqueta .sello{ width:54px; height:54px; align-self:center; background:var(--acc);
  -webkit-mask:url("img/emblema-escuela-blanco.png") center/contain no-repeat; mask:url("img/emblema-escuela-blanco.png") center/contain no-repeat; }
.ir-aula-maqueta .tit{ margin:0 0 .3rem; text-align:center; font-weight:700; color:var(--ink); }
.ir-aula-maqueta .campo{ position:relative; display:flex; flex-direction:column; gap:.3rem; }
.ir-aula-maqueta .rot{ font-size:var(--t-xs); font-weight:600; color:var(--ink2); }
.ir-aula-maqueta .caja{ display:flex; align-items:center; height:40px; padding:0 .8rem; border:1.5px solid var(--ln); border-radius:8px;
  background:var(--sf); font-family:var(--mono); font-size:.95rem; color:var(--ink); }
.ir-aula-maqueta .tipeo{ display:inline-block; overflow:hidden; white-space:nowrap; width:10ch; border-right:2px solid transparent; }
.ir-aula-maqueta .marca{ position:absolute; right:-.7rem; top:1.1rem; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--acc); color:#fff; font-family:var(--mono); font-size:12px; box-shadow:0 0 0 4px var(--acc-sf); }
.ir-aula-maqueta .boton{ margin-top:.4rem; height:42px; border-radius:8px; display:grid; place-items:center; background:var(--acc);
  color:#fff; font-weight:600; font-size:var(--t-sm); }
@media (prefers-reduced-motion: no-preference){
  .ir-aula-maqueta.visto .c1 .tipeo{ animation:irTipeaRun 9s steps(10, end) infinite, irCursorCampo 9s infinite; }
  .ir-aula-maqueta.visto .c2 .tipeo{ animation:irTipeaClave 9s steps(10, end) infinite, irCursorCampo2 9s infinite; }
  .ir-aula-maqueta.visto .c1 .caja{ animation:irFoco1 9s infinite; }
  .ir-aula-maqueta.visto .c2 .caja{ animation:irFoco2 9s infinite; }
  .ir-aula-maqueta.visto .boton{ animation:irPulsa 9s infinite; }
}
@keyframes irTipeaRun{ 0%, 6%{ width:0; } 26%, 100%{ width:10ch; } }
@keyframes irTipeaClave{ 0%, 32%{ width:0; } 50%, 100%{ width:10ch; } }
@keyframes irCursorCampo{ 0%, 5%{ border-color:transparent; } 6%, 29%{ border-color:var(--acc); } 30%, 100%{ border-color:transparent; } }
@keyframes irCursorCampo2{ 0%, 31%{ border-color:transparent; } 32%, 53%{ border-color:var(--acc); } 54%, 100%{ border-color:transparent; } }
@keyframes irFoco1{ 0%, 5%{ border-color:var(--ln); box-shadow:none; } 6%, 29%{ border-color:var(--acc); box-shadow:0 0 0 4px var(--acc-sf); } 30%, 100%{ border-color:var(--ln); box-shadow:none; } }
@keyframes irFoco2{ 0%, 31%{ border-color:var(--ln); box-shadow:none; } 32%, 53%{ border-color:var(--acc); box-shadow:0 0 0 4px var(--acc-sf); } 54%, 100%{ border-color:var(--ln); box-shadow:none; } }
@keyframes irPulsa{ 0%, 58%{ transform:none; box-shadow:0 0 0 0 rgba(14,42,99,0); } 61%{ transform:scale(.96); } 64%{ transform:none; box-shadow:0 0 0 7px rgba(14,42,99,.18); }
  74%, 100%{ box-shadow:0 0 0 0 rgba(14,42,99,0); } }
@media (max-width: 960px){ .ir-aula-maqueta{ transform:none; margin-top:1rem; } }

/* D1 · Cómo ofrendar: tres pasos unidos por una línea punteada que
   avanza (como hormigas en fila) una vez dibujada. */
.ir-flujo{ list-style:none; margin:0 0 clamp(1.75rem, 3.5vw, 2.5rem); padding:0; position:relative;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap); }
.ir-flujo::before{ content:""; position:absolute; top:26px; left:calc(100% / 6); right:calc(100% / 6); height:2px;
  background:repeating-linear-gradient(90deg, var(--acc-bd) 0 8px, transparent 8px 14px); background-size:14px 2px;
  transform-origin:0 50%; transform:scaleX(var(--dibujo)); transition:transform 1.4s var(--ease) .2s; }
@media (prefers-reduced-motion: no-preference){ .ir-flujo.visto::before{ animation:irHormigas .9s linear infinite; } }
@keyframes irHormigas{ to{ background-position:14px 0; } }
.ir-flujo li{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem; padding:0 .5rem; }
.ir-flujo .ir-ico{ position:relative; z-index:1; width:52px; height:52px; background:var(--sf); border:2px solid var(--acc-bd);
  box-shadow:0 0 0 6px var(--sf); transition:background-color .4s, color .4s, border-color .4s; transition-delay:calc(.3s + var(--i) * .45s); }
.ir-flujo.visto .ir-ico, html:not(.js) .ir-flujo .ir-ico{ background:var(--acc); border-color:var(--acc); color:#fff; }
.ir-flujo .ir-ico svg{ width:22px; height:22px; }
.ir-flujo b{ margin-top:.55rem; font-size:1.02rem; color:var(--ink); }
.ir-flujo span:not(.ir-ico){ font-size:var(--t-sm); color:var(--mut); max-width:26ch; }
@media (max-width: 700px){
  .ir-flujo{ grid-template-columns:minmax(0, 1fr); gap:1.1rem; }
  .ir-flujo::before{ top:26px; bottom:26px; left:25px; right:auto; width:2px; height:auto;
    background:repeating-linear-gradient(180deg, var(--acc-bd) 0 8px, transparent 8px 14px); transform-origin:50% 0; transform:scaleY(var(--dibujo)); animation:none !important; }
  .ir-flujo li{ display:grid; grid-template-columns:52px minmax(0, 1fr); column-gap:1rem; text-align:left; align-items:center; padding:0; }
  .ir-flujo .ir-ico{ grid-row:1 / 3; }
  .ir-flujo b{ margin:0; align-self:end; }
  .ir-flujo span:not(.ir-ico){ align-self:start; max-width:none; }
}

/* V1 · El año en convocatorias: meses, «hoy» y cada convocatoria en su
   fecha. Las pasadas, apagadas; la abierta, en verde. */
.ir-anio{ position:relative; --pt:4rem; --pb:4.6rem; --fila-alto:52px; padding:var(--pt) 0 var(--pb); }
.ir-anio .meses{ position:absolute; left:0; right:0; top:calc(var(--pt) + 14px); height:1.2rem; }
.ir-anio .meses span{ position:absolute; left:calc(var(--x) * 100%); font-size:11px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.06em; transform:translateX(-50%); }
.ir-anio .meses span::before{ content:""; position:absolute; left:50%; top:-10px; width:1px; height:6px; background:var(--ln); }
.ir-anio .riel{ position:relative; height:3px; border-radius:3px; background:var(--ln); }
.ir-anio .riel::before{ content:""; position:absolute; inset:0; border-radius:3px; background:linear-gradient(90deg, var(--acc-bd), var(--acc));
  transform-origin:0 50%; transform:scaleX(var(--dibujo)); transition:transform 1.6s var(--ease) .1s; }
.ir-anio .hoy{ position:absolute; left:calc(var(--x) * 100%); top:-14px; height:62px; width:0; border-left:2px dashed #e0445c; }
.ir-anio .hoy b{ position:absolute; bottom:-1.3rem; left:0; transform:translateX(-50%); font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:#e0445c; padding:.1rem .45rem; border-radius:99px; white-space:nowrap; }
.ir-anio .ev{ position:absolute; left:calc(var(--x) * 100%); top:1.5px; width:0; text-decoration:none; color:inherit; }
.ir-anio .ev .pt{ position:absolute; z-index:1; left:-8px; top:-8px; width:16px; height:16px; border-radius:50%; background:var(--sf); border:3px solid var(--acc);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1) calc(.5s + var(--i) * .2s), box-shadow .3s; }
html.js .ir-anio:not(.visto) .ev .pt{ transform:scale(0); }
.ir-anio .ev.abierta .pt{ border-color:var(--ok, #0a8a5f); box-shadow:0 0 0 5px rgba(10,138,95,.15); }
.ir-anio .ev.pasada .pt{ border-color:var(--acc-bd); }
/* El rótulo: centrado en su punto, desplazado (--dx) si choca con el
   borde, y en su fila (--fila) de arriba o de abajo (sitio.js §22). */
.ir-anio .ev .lb{ position:absolute; left:0; transform:translateX(calc(-50% + var(--dx, 0px))); display:flex; flex-direction:column; align-items:center; gap:.05rem;
  width:max-content; max-width:150px; text-align:center; font-size:12px; font-weight:600; color:var(--ink); line-height:1.25;
  background:var(--bg); padding:.1rem .3rem; border-radius:6px; z-index:2; }   /* tapa las líneas que pasan por detrás */
.ir-anio .ev.arriba .lb{ bottom:calc(14px + var(--fila, 0) * var(--fila-alto)); }
.ir-anio .ev.abajo .lb{ top:calc(40px + var(--fila, 0) * var(--fila-alto)); }
/* La línea fina que une cada rótulo con su punto. */
.ir-anio .ev::after{ content:""; position:absolute; z-index:0; left:-.5px; width:1px; background:var(--acc-bd); }
.ir-anio .ev.arriba::after{ bottom:8px; height:calc(6px + var(--fila, 0) * var(--fila-alto)); }
.ir-anio .ev.abajo::after{ top:8px; height:calc(32px + var(--fila, 0) * var(--fila-alto)); }
.ir-anio .ev .lb em{ font-style:normal; font-family:var(--mono); font-weight:500; color:var(--acc); }
.ir-anio .ev.pasada .lb{ color:var(--mut); font-weight:500; }
.ir-anio .ev.pasada .lb em{ color:var(--mut); }
.ir-anio .ev.abierta .lb em{ color:var(--ok, #0a8a5f); }
.ir-anio .ev:hover .pt, .ir-anio .ev:focus-visible .pt{ box-shadow:0 0 0 7px var(--acc-sf); }
.ir-anio .ev:hover .lb{ color:var(--acc); }
/* En el teléfono no hay ancho para una línea con muchas convocatorias:
   pasa a ser una lista por fecha, con «Hoy» en su lugar. */
@media (max-width: 700px){
  .ir-anio{ padding:0; }
  .ir-anio .meses{ display:none; }
  .ir-anio .riel{ height:auto; background:none; display:flex; flex-direction:column; gap:.15rem; padding-left:1.7rem; }
  .ir-anio .riel::before{ inset:.6rem auto .6rem 6px; width:3px; height:auto; background:linear-gradient(var(--acc-bd), var(--acc));
    transform-origin:50% 0; transform:scaleY(var(--dibujo)); }
  .ir-anio .ev{ position:relative; left:auto; top:auto; width:auto; order:var(--o); padding:.45rem 0; }
  .ir-anio .ev::after{ display:none; }
  .ir-anio .ev .pt{ left:calc(-1.7rem - 1px); top:.6rem; }
  .ir-anio .ev .lb{ position:static; transform:none; flex-direction:row; align-items:baseline; gap:.55rem; max-width:none; width:auto;
    text-align:left; font-size:var(--t-sm); background:none; padding:0; }
  .ir-anio .ev .lb em{ flex:none; min-width:3.6rem; }
  .ir-anio .hoy{ position:relative; left:auto; top:auto; height:auto; width:auto; border:0; order:var(--o); display:flex; align-items:center; gap:.6rem;
    padding:.2rem 0; }
  .ir-anio .hoy::after{ content:""; flex:1; border-top:2px dashed #e0445c; }
  .ir-anio .hoy b{ position:static; transform:none; }
}
/* La inclinación de la maqueta sobrevive al revelado (.ir-revelar.visto
   deja transform:none). */
html.js .ir-aula-maqueta.ir-revelar.visto, html:not(.js) .ir-aula-maqueta{ transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); }
html.js .ir-aula-maqueta.ir-revelar.visto:hover{ transform:perspective(1400px) rotateY(0) rotateX(0); }
@media (max-width: 960px){ html.js .ir-aula-maqueta.ir-revelar.visto, html:not(.js) .ir-aula-maqueta{ transform:none; } }
/* Una columna corta junto a una larga (la ruta de la Escuela) acompaña
   al lector en vez de dejar un hueco. */
@media (min-width: 961px){ .ir-lateral-fijo{ position:sticky; top:calc(var(--barra-h) + 1.5rem); align-self:start; } }

/* Titulares de sección con sello e icono (pedido de la iglesia): el
   titular pasa de casi negro a un degradado azul del sitio (del marino
   de la marca a un azul vivo), y a su izquierda un sello azul con el
   icono de la sección, que entra girando un poco cuando aparece. */
.ir-sec-cab h2, .ir-cab-tipo h2{ display:flex; align-items:center; gap:clamp(.6rem, 1.4vw, .85rem); }
.ir-sec-cab.centro h2{ justify-content:center; }
.ir-sec-cab h2 .tx, .ir-cab-tipo h2{
  background:linear-gradient(90deg, #0e2a63 0%, #1d4bb8 70%, #2a5bd7 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.06em; }
.ir-sec-ico{ flex:none; display:grid; place-items:center; width:clamp(36px, 3.2vw, 44px); aspect-ratio:1; border-radius:12px;
  /* Más oscuro (pedido de la iglesia): del azul de la marca al marino de
     la barra, con un brillo apenas arriba. */
  background:linear-gradient(140deg, #1c3f94 0%, #0e2a63 55%, #071a44 100%); color:#fff;
  box-shadow:0 10px 20px -12px rgba(7,26,68,.9), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1) .15s, opacity .5s var(--ease) .15s; }
.ir-sec-ico svg{ width:52%; height:52%; stroke-width:1.9; }
html.js .ir-sec-cab.ir-revelar:not(.visto) .ir-sec-ico{ transform:scale(.6) rotate(-14deg); opacity:0; }
.ir-sec-cab:hover .ir-sec-ico{ transform:rotate(-6deg) scale(1.04); }
/* Sobre fondo oscuro, el titular vuelve a blanco y el sello se aclara. */
.ir-oscura .ir-sec-cab h2 .tx, .ir-heroe .ir-sec-cab h2 .tx{ background:none; color:#fff; -webkit-text-fill-color:#fff; }
.ir-oscura .ir-sec-ico{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
@media (max-width: 600px){ .ir-sec-cab h2{ align-items:flex-start; } .ir-sec-ico{ margin-top:.1em; } }

/* El corazón de «Donaciones» en la barra, en rojo coral para destacarlo:
   relleno suave y un latido al pasar el mouse (y uno solo al cargar). Es
   el único color cálido de la barra, así que se ve sin gritar. */
.ir-nav .aparte svg{ color:#ff5d73; fill:rgba(255,93,115,.28); opacity:1; transform-origin:50% 60%; }
.ir-nav .aparte:hover svg, .ir-nav .aparte[aria-current] svg{ fill:#ff5d73; }
@media (prefers-reduced-motion: no-preference){
  .ir-nav .aparte svg{ animation:irLatido 1.1s ease-in-out .8s 1; }
  .ir-nav .aparte:hover svg{ animation:irLatido 1.1s ease-in-out infinite; }
}
@keyframes irLatido{ 0%, 100%{ transform:scale(1); } 15%{ transform:scale(1.25); } 30%{ transform:scale(1); } 45%{ transform:scale(1.18); } 60%{ transform:scale(1); } }

/* =====================================================================
   Escuela · el Curso Post-Encuentro y el Aula por dentro, con los videos
   (sin audio) de la propia Escuela, dentro de marcos de dispositivo.
   ===================================================================== */
.ir-demo{ display:block; width:100%; height:auto; background:#0b1530; }

/* Los datos del curso: cuatro cifras grandes. */
.ir-post-datos{ list-style:none; margin:1.5rem 0 1.25rem; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.6rem; }
.ir-post-datos li{ padding:.9rem .9rem 1rem; border-radius:var(--r); background:var(--sf); border:1px solid var(--ln); box-shadow:var(--sh);
  display:flex; flex-direction:column; gap:.1rem; }
.ir-post-datos b{ font-family:var(--titulo); font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight:800; line-height:1; letter-spacing:-.02em;
  background:linear-gradient(90deg, #0e2a63, #2a5bd7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ir-post-datos span{ font-size:var(--t-xs); color:var(--mut); font-weight:600; }
.ir-post-nota{ display:flex; gap:.6rem; align-items:flex-start; margin:0; padding:.85rem 1rem; border-radius:var(--r);
  background:var(--ok-sf, #e8f6f0); border:1px solid var(--ok-bd, #b7e2d1); color:var(--ink2); font-size:var(--t-sm); text-align:left; }
.ir-post-nota svg{ width:20px; height:20px; flex:none; color:var(--ok, #0a8a5f); margin-top:.1rem; }
@media (max-width: 600px){ .ir-post-datos{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* La tableta con el libro. */
.ir-tableta{ margin:0; align-self:center; justify-self:center; width:min(100%, 330px); }
.ir-tableta .marco{ padding:14px; border-radius:26px; background:linear-gradient(145deg, #1b2440, #0b1024);
  box-shadow:0 30px 60px -28px rgba(7,17,41,.6), inset 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(2.5deg); transition:transform .8s var(--ease); }
.ir-tableta:hover .marco{ transform:rotate(0) translateY(-4px); }
.ir-tableta .marco video{ border-radius:12px; aspect-ratio:496 / 646; object-fit:cover; object-position:top; background:#fff; }
.ir-tableta figcaption{ margin-top:1rem; text-align:center; font-size:var(--t-xs); color:var(--mut); }

/* Los tres módulos con sus lecciones numeradas de corrido. */
.ir-modulos{ list-style:none; margin:clamp(2rem, 4vw, 3rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap); }
.ir-modulos > li{ position:relative; padding:1.4rem 1.4rem 1.5rem; overflow:hidden; }
.ir-modulos > li::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg, #0e2a63, #2a5bd7); }
.ir-modulos .num{ margin:0; font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--acc); }
.ir-modulos h3{ margin:.2rem 0 .9rem; font-size:1.25rem; }
.ir-modulos .lecciones{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.ir-modulos .lecciones li{ display:flex; gap:.6rem; align-items:baseline; font-size:var(--t-sm); color:var(--ink2); line-height:1.35; }
.ir-modulos .lecciones span{ flex:none; width:1.6rem; height:1.6rem; border-radius:50%; display:grid; place-items:center;
  background:var(--acc-sf); color:var(--acc); font-family:var(--mono); font-size:11px; font-weight:600; transform:translateY(.2rem); }
@media (max-width: 960px){ .ir-modulos{ grid-template-columns:minmax(0, 1fr); } }

/* Las palabras de los pastores en la bienvenida del libro. No son
   Escritura: Roboto cursiva, no la letra de los versículos. */
.ir-post-cita{ margin:clamp(2rem, 4vw, 3rem) auto 0; max-width:760px; text-align:center; position:relative; padding-top:2.2rem; }
.ir-post-cita::before{ content:"“"; position:absolute; top:-1.2rem; left:50%; transform:translateX(-50%); font-family:var(--sans);
  font-size:5rem; line-height:1; color:var(--acc-bd); }
.ir-post-cita p{ margin:0; font-family:var(--sans); font-style:italic; font-weight:400; font-size:clamp(1.15rem, 1rem + .7vw, 1.45rem); line-height:1.5; color:var(--escritura, #003399); }
.ir-post-cita footer{ margin-top:.8rem; font-size:var(--t-xs); color:var(--mut); }
.ir-post-cita cite{ font-style:normal; }

/* El Aula por dentro: navegador + texto. */
.ir-aula-real{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:clamp(1.5rem, 4vw, 3rem); align-items:center;
  margin-top:clamp(2.5rem, 5vw, 4rem); }
.ir-aula-real h3{ margin:.2rem 0 .8rem; font-size:1.3rem; }
.ir-aula-real .txt > p{ color:var(--ink2); }
.ir-navegador{ margin:0; border-radius:12px; overflow:hidden; background:var(--sf); border:1px solid var(--ln);
  box-shadow:0 30px 60px -30px rgba(7,17,41,.5), var(--sh); }
.ir-navegador .barra{ display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem; background:var(--sf2); border-bottom:1px solid var(--ln); }
.ir-navegador .barra i{ width:9px; height:9px; border-radius:50%; background:#d9dde5; }
.ir-navegador .barra i:first-child{ background:#ff6b6b; } .ir-navegador .barra i:nth-child(2){ background:#ffc24b; } .ir-navegador .barra i:nth-child(3){ background:#39c07f; }
.ir-navegador .barra span{ margin-left:.5rem; display:inline-flex; align-items:center; gap:.35rem; font-size:11px; color:var(--mut);
  background:var(--sf); border:1px solid var(--ln); border-radius:99px; padding:.15rem .7rem; }
.ir-navegador .barra svg{ width:11px; height:11px; color:#39a06f; }
.ir-navegador video{ aspect-ratio:612 / 310; }

.ir-lista-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.ir-lista-check li{ display:flex; gap:.65rem; align-items:flex-start; font-size:var(--t-sm); color:var(--ink2); text-align:left; }
.ir-lista-check svg{ width:20px; height:20px; flex:none; color:var(--acc); margin-top:.05rem; }
@media (max-width: 860px){
  .ir-aula-real{ grid-template-columns:minmax(0, 1fr); }
}

/* La clase (Escuela · Aula Virtual): el marco de navegador lleva un punto
   rojo que late, como el «en vivo» de una transmisión. */
.ir-clase video{ aspect-ratio:16 / 9; }
.ir-clase .barra .vivo{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#e0445c; position:relative; }
.ir-clase .barra .vivo::after{ content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:irPulso 1.8s ease-out infinite; }

/* Escuela · los otros cursos, después de los módulos del Post-Encuentro. */
.ir-otros-cursos{ margin-top:clamp(1.75rem, 3.5vw, 2.5rem); padding:clamp(1.25rem, 3vw, 1.9rem); display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:1.25rem 2rem; align-items:center;
  background:linear-gradient(135deg, var(--sf) 60%, var(--acc-sf)); }
.ir-otros-cursos h3{ margin:.2rem 0 .5rem; font-size:1.25rem; }
.ir-otros-cursos .txt p:not(.ir-rotulo){ margin:0; color:var(--ink2); }
.ir-otros-cursos .cursos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.ir-otros-cursos .cursos li{ display:flex; flex-direction:column; padding:.6rem .9rem; border-radius:var(--r-sm); background:var(--sf);
  border:1px solid var(--acc-bd); border-left:3px solid var(--acc); }
.ir-otros-cursos .fase{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--acc); }
.ir-otros-cursos .cursos b{ font-size:var(--t-sm); color:var(--ink); }
.ir-otros-cursos .ir-acciones{ grid-column:1 / -1; margin-top:0; }
@media (max-width: 760px){ .ir-otros-cursos{ grid-template-columns:minmax(0, 1fr); } }

/* Ventana de pasajes, como la de la Escuela: arriba, en chico, el tema al
   que pertenece la cita («04 · Salvación»); abajo, las flechas que
   recorren SÓLO los pasajes de ese tema y la posición «2 de 4». En los
   extremos la flecha se apaga en vez de dar la vuelta. */
.ir-pasaje .articulo{ margin:0 0 .3rem; padding-right:2.75rem; font-family:var(--pasaje-mono); font-size:var(--t-xs);
  letter-spacing:.04em; color:var(--mut); }
.ir-pasaje .articulo[hidden]{ display:none; }
.ir-pasaje .nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.4rem 0 0; }
.ir-pasaje .nav[hidden]{ display:none; }
.ir-pasaje .flecha{ display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:50%;
  border:1px solid var(--escritura-bd); background:var(--sf); color:var(--escritura); cursor:pointer;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.ir-pasaje .flecha svg{ width:18px; height:18px; }
.ir-pasaje .flecha.ant svg{ transform:rotate(180deg); }
.ir-pasaje .flecha:hover:not(:disabled){ background:var(--escritura); color:#fff; }
.ir-pasaje .flecha.sig:hover:not(:disabled){ transform:translateX(2px); }
.ir-pasaje .flecha.ant:hover:not(:disabled){ transform:translateX(-2px); }
.ir-pasaje .flecha:disabled{ opacity:.35; cursor:default; }
.ir-pasaje .pos{ font-family:var(--pasaje-mono); font-size:var(--t-xs); color:var(--mut); font-variant-numeric:tabular-nums; }
/* El texto entra desde el lado hacia el que se avanza. */
.ir-pasaje .cuerpo.desde-der{ animation:irPasajeDer 260ms var(--ease); }
.ir-pasaje .cuerpo.desde-izq{ animation:irPasajeIzq 260ms var(--ease); }
@keyframes irPasajeDer{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
@keyframes irPasajeIzq{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .ir-pasaje[open], .ir-pasaje .cuerpo.desde-der, .ir-pasaje .cuerpo.desde-izq{ animation:none; }
}
/* El crédito de la RVR1960 y el agradecimiento a las SBU: sutil, pequeño
   y justificado (pedido de la iglesia). */
.ir-pasaje .credito{ margin:.85rem 0 0; font-size:10px; line-height:1.5; color:var(--mut); opacity:.75;
  text-align:justify; text-align-last:left; -webkit-hyphens:auto; hyphens:auto; }

/* Textos justificados (pedido de la iglesia): todo párrafo o texto que
   ocupe más de una línea va justificado, con guiones automáticos para
   que no queden huecos. Estos bloques habían quedado a la izquierda. Los
   titulares, los rótulos y lo centrado a propósito (esquemas, pasos) no
   cambian; las citas en letra grande tampoco, como en la Escuela: en una
   columna de unos 28 caracteres el justificado abre huecos. */
.ir-convocatoria .resumen, .ir-post-nota, .ir-modos li > span:not(.ir-ico), .ir-historia p,
.ir-otros-cursos .txt p, .ir-aula-real .txt > p, .ir-lista-check li > span,
.ir-semana-gc span, .ir-proxima [data-proxima-txt]{
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; }

/* Campus: el Campus Virtual no tiene mapa y muestra una clase en línea de
   la Escuela. El recuadro toma la forma del video (16:9), también en el
   teléfono, para no cortar la diapositiva proyectada. */
.ir-mapa.en-linea{ aspect-ratio:auto; min-height:0; background:#1c1c1e; border-color:#2c2c2e; }

/* El marco de videollamada (al estilo de Zoom, sin su logo ni su nombre):
   barra de título con las tres luces de la ventana y barra de controles
   con «Salir» en rojo. Decorativo: no hay botones de verdad. */
.ir-llamada{ display:flex; flex-direction:column; color:#e8e8ea; font-family:var(--sans); }
.ir-llamada .sup{ position:relative; display:flex; align-items:center; justify-content:center; height:30px; padding:0 .75rem;
  background:#232326; border-bottom:1px solid #111; font-size:11.5px; color:#cfcfd3; }
.ir-llamada .luces{ position:absolute; left:.75rem; display:flex; gap:6px; }
.ir-llamada .luces i{ width:10px; height:10px; border-radius:50%; background:#ff5f57; }
.ir-llamada .luces i:nth-child(2){ background:#febc2e; } .ir-llamada .luces i:nth-child(3){ background:#28c840; }
.ir-llamada .titulo{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.ir-llamada .titulo svg{ width:12px; height:12px; color:#3ecf6a; }
.ir-llamada video{ display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:#000; }
.ir-llamada .inf{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; padding:.4rem .75rem .45rem;
  background:#1a1a1c; border-top:1px solid #111; }
.ir-llamada .grupo{ display:flex; gap:.15rem; }
.ir-llamada .grupo.centro{ justify-content:center; }
.ir-llamada .ctl{ display:flex; flex-direction:column; align-items:center; gap:.15rem; min-width:3.3rem; padding:.15rem .25rem; border-radius:6px; }
.ir-llamada .ctl svg{ width:18px; height:18px; color:#e8e8ea; }
.ir-llamada .ctl em{ font-style:normal; font-size:9.5px; line-height:1.1; color:#b9b9be; white-space:nowrap; }
.ir-llamada .ctl.verde svg{ color:#3ecf6a; }
.ir-llamada .salir{ justify-self:end; padding:.3rem .8rem; border-radius:6px; background:#e02f2f; color:#fff; font-size:11px; font-weight:700; }
/* Angosto (la columna del mapa en tableta o el teléfono): sólo íconos. */
@media (max-width: 1100px) and (min-width: 961px), (max-width: 560px){
  .ir-llamada .ctl em, .ir-llamada .ctl.extra{ display:none; }
  .ir-llamada .ctl{ min-width:2.2rem; }
}
/* La nota va DEBAJO del video: encima tapaba el título de la diapositiva. */
.ir-mapa-nota{ display:flex; align-items:center; gap:.5rem; margin:.7rem 0 0; font-size:var(--t-xs); color:var(--mut); }
.ir-mapa-nota .vivo{ width:7px; height:7px; border-radius:50%; background:#e0445c; position:relative; flex:none; }
.ir-mapa-nota .vivo::after{ content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:irPulso 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce){ .ir-mapa-nota .vivo::after{ animation:none; } }
/* En el teléfono la columna se deshace (display:contents) y cada pieza
   lleva su orden: la nota, pegada al video. */
@media (max-width: 960px){ .ir-mapa-nota{ order:1; margin-top:-.4rem; } }

/* =====================================================================
   VISIÓN (vision.php) · el ciclo de la misión y las cuatro bases
   ===================================================================== */
/* V1 · La visión al centro y la misión girando alrededor. El aro entra
   girando, el centro crece y los tres pasos aparecen uno tras otro; el
   punto claro recorre el aro despacio (quieto con «menos movimiento»). */
.ir-ciclo{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(1.5rem, 4vw, 3.5rem); align-items:center; }
.ir-ciclo-dib{ display:block; width:100%; max-width:440px; margin:0 auto; overflow:visible; }
.ir-ciclo-dib text{ font-family:var(--sans); text-anchor:middle; }
.ir-ciclo-dib .pista{ fill:none; stroke:var(--acc-bd); stroke-width:2; stroke-dasharray:4 7; }
.ir-ciclo-dib .aro path{ fill:none; stroke:var(--acc); stroke-width:2.5; }
.ir-ciclo-dib .aro, .ir-ciclo-dib .centro, .ir-ciclo-dib .nodo{ transform-box:view-box; transform-origin:200px 200px;
  transition:transform .9s var(--ease), opacity .6s var(--ease); }
.ir-ciclo-dib .aro{ transform:rotate(calc((1 - var(--dibujo)) * -40deg)); opacity:var(--dibujo); }
.ir-ciclo-dib .centro{ transform:scale(calc(.75 + var(--dibujo) * .25)); opacity:var(--dibujo); }
.ir-ciclo-dib .nodo{ opacity:var(--dibujo); transition-delay:calc(.35s + var(--i) * .18s); }
.ir-ciclo-dib .nodo circle{ fill:var(--sf); stroke:var(--acc); stroke-width:2.5; }
.ir-ciclo-dib .nodo .n{ font-size:10px; font-weight:700; fill:var(--mut); }
.ir-ciclo-dib .nodo .nom{ font-size:12px; font-weight:700; fill:var(--ink); }
.ir-ciclo-dib .centro .rot{ font-size:11px; font-weight:700; letter-spacing:1.5px; fill:var(--escritura-nav); }
.ir-ciclo-dib .centro .pal{ font-size:17px; font-weight:700; fill:#fff; }
.ir-ciclo-dib .orbita{ transform-box:view-box; transform-origin:200px 200px; fill:var(--acc-nav); opacity:var(--dibujo); }
@media (prefers-reduced-motion: no-preference){
  .ir-ciclo-dib.visto .orbita{ animation:irOrbita 16s linear infinite; }
}
@keyframes irOrbita{ to{ transform:rotate(360deg); } }
.ir-ciclo .txt .ir-lead{ margin:0 0 1.4rem; }
.ir-ciclo-pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.ir-ciclo-pasos li{ display:grid; grid-template-columns:34px minmax(0, 1fr); gap:.2rem .85rem; align-items:start; }
.ir-ciclo-pasos i{ grid-row:1 / 3; font-style:normal; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--acc); color:#fff; font-weight:700; }
.ir-ciclo-pasos b{ color:var(--ink); font-size:1.05rem; }
.ir-ciclo-pasos .ir-cita .txt{ font-size:1rem; }
@media (max-width: 860px){ .ir-ciclo{ grid-template-columns:minmax(0, 1fr); } }

/* V2 · Las cuatro bases: índice con riel, y un bloque por base (título a la
   izquierda, esquema a la derecha; en tableta y teléfono, uno bajo otro). */
.ir-bases-indice{ list-style:none; margin:0 0 clamp(1.5rem, 3vw, 2.5rem); padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.ir-bases-indice::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:23px; height:2px;
  background:linear-gradient(90deg, var(--acc-bd), var(--acc), var(--acc-bd)); transform-origin:0 50%;
  transform:scaleX(var(--dibujo)); transition:transform 1.1s var(--ease) .2s; }
.ir-bases-indice li{ position:relative; text-align:center; }
.ir-bases-indice a{ display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:0 .4rem; color:inherit; text-decoration:none; }
.ir-bases-indice .n{ display:grid; place-items:center; width:48px; height:48px; margin-bottom:.5rem; border-radius:50%;
  background:var(--acc); color:#fff; font-weight:700; box-shadow:0 0 0 6px var(--sf); transition:transform .25s var(--ease); }
.ir-bases-indice a:hover .n{ transform:scale(1.08); }
.ir-bases-indice b{ color:var(--ink); }
.ir-bases-indice .p{ font-size:var(--t-xs); color:var(--mut); }
.ir-base{ display:grid; grid-template-columns:minmax(0, 250px) minmax(0, 1fr); gap:clamp(1rem, 3vw, 2.5rem);
  padding:clamp(1.75rem, 3.5vw, 2.5rem) 0; border-top:1px solid var(--ln); scroll-margin-top:calc(var(--barra-h) + 1rem); }
.ir-base .lado .num{ font-size:var(--t-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--escritura); }
.ir-base .lado h3{ font-size:1.5rem; margin:.2rem 0 .4rem; letter-spacing:-.01em; }
.ir-base .lado p{ font-size:var(--t-sm); color:var(--mut); margin:0; }
.ir-base .ir-cita.chica .txt{ font-size:.98rem; line-height:1.45; }
.ir-base .ir-cita .ref{ margin:.35rem 0 0; }
/* Visión: tres tarjetas. */
.ir-base-tres{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; }
.ir-base-tres .ir-tarjeta{ display:flex; flex-direction:column; gap:.7rem; padding:1.3rem; }
.ir-base-tres h4{ font-size:1.12rem; margin:0; color:var(--ink); }
.ir-base-tres p{ font-size:var(--t-sm); margin:0; }
.ir-base-tres .ir-cita{ margin-top:auto; padding-top:.8rem; border-top:1px dashed var(--escritura-bd); }
/* Misión: la declaración y el flujo de tres pasos. */
.ir-base-declaracion{ margin:0 0 1.3rem; padding:1.1rem 1.3rem; font-size:clamp(1.05rem, 1rem + .35vw, 1.22rem); line-height:1.55;
  font-weight:400; color:var(--ink); background:var(--bg); border-left:3px solid var(--acc); border-radius:0 var(--r) var(--r) 0;
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.ir-base-flujo{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2.2rem; }
.ir-base-flujo li{ position:relative; }
.ir-base-flujo li:not(:last-child)::after{ content:"→"; position:absolute; right:-1.65rem; top:.35rem; font-size:1.3rem; font-weight:700; color:var(--acc); }
.ir-base-flujo .paso{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.ir-base-flujo .paso i{ font-style:normal; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--acc); color:#fff; font-size:.85rem; font-weight:700; }
.ir-base-flujo .paso b{ font-size:1.1rem; color:var(--ink); }
.ir-base-flujo p{ font-size:var(--t-sm); margin:0 0 .7rem; }
/* Estrategia: la escalera de las 4F (cada peldaño un poco más arriba) y el
   eje de los Grupos de Conexión. */
.ir-base-escalera{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.8rem; align-items:start; }
.ir-base-escalera li{ display:flex; flex-direction:column; gap:.5rem; padding:1.1rem; }
.ir-base-escalera li:nth-child(1){ margin-top:6rem; } .ir-base-escalera li:nth-child(2){ margin-top:4rem; } .ir-base-escalera li:nth-child(3){ margin-top:2rem; }
.ir-base-escalera .f{ display:flex; align-items:center; gap:.55rem; }
.ir-base-escalera .f em{ font-style:normal; display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:linear-gradient(140deg, #1c3f94, #0e2a63); color:#fff; font-weight:900; font-size:1.05rem; }
.ir-base-escalera .f b{ color:var(--ink); font-size:1.05rem; line-height:1.2; }
.ir-base-escalera .sub{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); }
/* Columna de unos 25 caracteres: justificada abría huecos entre palabras
   («Formar      discípulos»). A la izquierda, como en la Escuela. */
.ir-base-escalera p{ font-size:.9rem; margin:0; text-align:left; -webkit-hyphens:manual; hyphens:manual; }
.ir-base-escalera .lugares{ display:flex; flex-wrap:wrap; gap:.3rem; }
.ir-base-escalera .lugares span{ font-size:.74rem; font-weight:500; color:var(--acc); background:var(--acc-sf); border:1px solid var(--acc-bd);
  border-radius:99px; padding:.12rem .55rem; }
.ir-base-eje{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding:.9rem 1.1rem;
  border-radius:var(--r); background:var(--acc); color:#fff; }
/* ⚠️ Blanco explícito: el <b> hereda el color de texto oscuro del sitio y
   sobre el azul no se leía (lo vio la iglesia). */
.ir-base-eje b{ font-size:.95rem; color:#fff; } .ir-base-eje > span{ font-size:.85rem; color:rgba(255,255,255,.82); }
.ir-base-eje .pasos{ margin-left:auto; display:flex; flex-wrap:wrap; gap:.3rem; }
.ir-base-eje .pasos i{ font-style:normal; font-size:.75rem; font-weight:600; background:rgba(255,255,255,.14); border-radius:99px; padding:.15rem .6rem; }
/* Cultura: los ocho pilares. */
.ir-base-pilares{ list-style:none; margin:0 0 1.3rem; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.8rem; }
.ir-base-pilares li{ display:flex; gap:.7rem; align-items:flex-start; padding:.9rem; background:var(--bg); border:1px solid var(--ln); border-radius:var(--r); }
.ir-base-pilares .ir-ico{ width:36px; height:36px; flex:none; } .ir-base-pilares .ir-ico svg{ width:18px; height:18px; }
.ir-base-pilares b{ display:block; color:var(--ink); font-size:.92rem; line-height:1.25; }
.ir-base-pilares li span:not(.ir-ico){ display:block; margin-top:.15rem; font-size:.8rem; line-height:1.4; color:var(--mut); }
.ir-base > div > .ir-cita:last-child .txt{ font-size:1.2rem; }
@media (max-width: 960px){
  .ir-base{ grid-template-columns:minmax(0, 1fr); }
  .ir-base-tres, .ir-base-flujo{ grid-template-columns:minmax(0, 1fr); }
  .ir-base-flujo{ gap:1.4rem; }
  .ir-base-flujo li:not(:last-child)::after{ content:"↓"; right:auto; left:.5rem; top:auto; bottom:-1.45rem; }
  .ir-base-escalera{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ir-base-escalera li:nth-child(n){ margin-top:0; }
  .ir-base-pilares{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .ir-bases-indice{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:1.2rem; }
  .ir-bases-indice::before{ display:none; }
  .ir-base-escalera, .ir-base-pilares{ grid-template-columns:minmax(0, 1fr); }
  .ir-base-eje .pasos{ margin-left:0; }
}


/* Nosotros · el aviso de la página Visión: las tres palabras como hitos
   de un horizonte que asciende. Entrada (sitio.js §4 pone .visto): la
   línea se dibuja de izquierda a derecha, el área se ilumina y cada hito
   aparece cuando la línea lo alcanza. Después, en bucle, una luz recorre
   la curva hacia adelante (offset-path; si el navegador no lo soporta, no
   se muestra). Sin script o con «menos movimiento», todo quieto y a la
   vista. Va sobre fondo blanco, con los azules del sitio; las palabras
   llevan un halo blanco para que la línea no las cruce. */
.ir-vision-aviso .ir-duo{ align-items:center; }
.ir-vision-horizonte{ display:block; width:100%; max-width:560px; margin:0 auto; overflow:visible; }
.ir-vision-horizonte .suelo{ stroke:var(--acc-bd); stroke-width:1; stroke-dasharray:2 6; }
.ir-vision-horizonte .area{ fill:url(#ir-hz-area); }
.ir-vision-horizonte .curva{ fill:none; stroke:url(#ir-hz-trazo); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
.ir-vision-horizonte .hito line{ stroke:var(--acc-bd); stroke-width:1; }
.ir-vision-horizonte .hito circle{ fill:var(--sf); stroke:var(--acc); stroke-width:2.5; }
.ir-vision-horizonte text{ text-anchor:middle; font-family:var(--titulo); paint-order:stroke fill; stroke:var(--sf); stroke-linejoin:round; }
.ir-vision-horizonte text.p{ font-weight:700; font-size:24px; letter-spacing:-.02em; fill:var(--acc); stroke-width:8px; }
.ir-vision-horizonte text.n{ font-weight:600; font-size:11px; letter-spacing:.14em; fill:var(--escritura); stroke-width:4px; }
.ir-vision-horizonte .luz{ display:none; }
html.js .ir-vision-horizonte:not(.visto) .curva{ stroke-dashoffset:1; }
html.js .ir-vision-horizonte:not(.visto) .area{ opacity:0; }
html.js .ir-vision-horizonte:not(.visto) .hito{ opacity:0; transform:translateY(8px); }
.ir-vision-horizonte .curva{ transition:stroke-dashoffset 2.4s var(--ease); }
.ir-vision-horizonte .area{ transition:opacity 1.6s ease 1s; }
.ir-vision-horizonte .hito{ transition:opacity .8s ease calc(.7s + var(--i) * .7s), transform .8s var(--ease) calc(.7s + var(--i) * .7s); }
@supports (offset-path: path('M 0 0')){
  @media (prefers-reduced-motion: no-preference){
    .ir-vision-horizonte.visto .luz{ display:block; animation:irLuzHorizonte 7s cubic-bezier(.45,0,.55,1) infinite 2.6s; opacity:0; }
  }
}
@keyframes irLuzHorizonte{ 0%{ offset-distance:0%; opacity:0; } 12%{ opacity:1; } 85%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }
@media (max-width: 760px){ .ir-vision-horizonte{ margin-top:.5rem; } }

/* ⚠️ La negrita toma el color de texto oscuro del sitio: en las secciones
   oscuras (la banda de la visión en Nosotros, el Encuentro en Inicio) se
   camuflaba con el fondo azul (lo vio la iglesia). Ahí va en blanco. */
.ir-oscura strong, .ir-oscura b{ color:#fff; }