/* ═══ EVENTOS · estilos propios de esta página ═══
   Lo compartido por todo el sitio vive en comun.css, que se
   carga antes que este archivo. */

/* ── FUENTES OFICIALES IDG ── */
@font-face{font-family:"Monument Extended";src:url("fonts/monument-ultra.woff2") format("woff2");font-weight:800;font-display:swap}

@font-face{font-family:"Aktiv Grotesk";src:url("fonts/aktiv-400.woff2") format("woff2");font-weight:400;font-display:swap}

@font-face{font-family:"Aktiv Grotesk";src:url("fonts/aktiv-500.woff2") format("woff2");font-weight:500;font-display:swap}

@font-face{font-family:"Aktiv Grotesk";src:url("fonts/aktiv-700.woff2") format("woff2");font-weight:700;font-display:swap}

@font-face{font-family:"Monaco";src:url("fonts/monaco.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  --ink:#0C0C0D;--paper:#FFFFFF;--gris:#6E6E76;
  --morado:#3E22B2;--violeta:#5A3FD6;--lavanda:#9E8BF2;
  --dark:#131215;--hair:rgba(12,12,13,.14);
  --body:"paralucent-text","Aktiv Grotesk",system-ui,sans-serif;
  --display:"Monument Extended","paralucent","Aktiv Grotesk",sans-serif;
  --mono:"Monaco",ui-monospace,monospace;
  --pad:clamp(20px,4.5vw,64px);--nav-h:72px;
}

body{font-family:var(--body);font-size:var(--fz-in);line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}

img{max-width:100%;display:block}

.d{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:0}

.label{font-family:var(--mono);font-size:var(--fz-m);font-weight:600;text-transform:uppercase;letter-spacing:.15em}

/* ── NAV (sólido en esta página) ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);display:flex;align-items:center;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--hair)}

.menu a:hover::after,.menu a.on::after{width:100%}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 26px;border:1.5px solid currentColor;border-radius:var(--r-pill);font-size:var(--fz-m);font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s ease}

.nav .btn-solid{border-color:var(--ink);background:var(--ink);color:#fff}

.overlay{position:fixed;inset:0;z-index:55;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--nav-h) + 24px) var(--pad) 34px;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.7,0,.2,1)}

.overlay nav a{display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(16px,4.4vw,21px);line-height:1;letter-spacing:.01em;padding:19px 0;border-bottom:1px solid var(--hair);opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease,color .2s ease}

/* ── SECCIONES ── */
main{padding-top:var(--nav-h)}

.sec{padding:clamp(64px,9vw,120px) 0}

.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(30px,4vw,52px)}

.sec-head h2{font-size:clamp(26px,4.6vw,58px)}

/* declaración de apertura */
.about-hero{padding:clamp(56px,8vw,110px) 0 clamp(30px,4vw,54px)}

.about-hero h1{font-size:clamp(34px,6vw,86px);max-width:16ch}

.about-hero .label{color:var(--gris);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}

.about-hero .label::before{content:"";width:26px;height:1.5px;background:var(--morado)}

.about-hero p{margin-top:22px;max-width:64ch;color:#3c3c3f;font-size:clamp(15.5px,1.4vw,18px)}

.about-img{aspect-ratio:21/9;overflow:hidden;border-radius:var(--r-s);background:var(--dark)}

.about-img img{width:100%;height:100%;object-fit:cover}

/* misión */
.mission{text-align:center;padding:clamp(64px,9vw,120px) 0}

.mission h2{font-size:clamp(26px,4.2vw,56px);max-width:22ch;margin:0 auto;line-height:1.12}

.mission em{font-style:normal;color:var(--morado)}

/* quiénes somos */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.who{border:1px solid var(--hair);border-radius:var(--r-s);padding:clamp(24px,3vw,40px);transition:transform .3s ease,border-color .3s ease}

.who:hover{transform:translateY(-4px);border-color:var(--ink)}

.who h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(15px,1.6vw,20px);line-height:1.1}

.who p{margin-top:12px;color:#3c3c3f;font-size:var(--fz-base)}

.more{display:inline-block;margin-top:14px;font-size:var(--fz-s);font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--ink);padding-bottom:3px;transition:color .2s,border-color .2s}

.more:hover{color:var(--morado);border-color:var(--morado)}

/* pastores */
.past{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4.5vw,72px);align-items:center}

.past .ph{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-s);background:var(--dark)}

.past .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}

.past h2{font-size:clamp(24px,3.4vw,44px);margin-top:14px}

.past .label{color:var(--gris)}

.past p{margin-top:16px;color:#3c3c3f;font-size:var(--fz-base);max-width:58ch}

/* libros */
.books-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.book .ph{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-s);background:var(--dark)}

.book img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}

.book:hover img{transform:scale(1.03)}

.book h3{margin-top:14px;font-size:var(--fz-lg);font-weight:700;letter-spacing:-.01em}

.book span{display:block;margin-top:3px;font-size:var(--fz-base);color:#3c3c3f}

.book .go{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);transition:color .2s}

.book:hover .go{color:var(--morado)}

.books-cta{margin-top:30px}

.books-cta .btn{border-color:var(--ink);background:var(--ink);color:#fff}

.books-cta .btn:hover{background:var(--morado);border-color:var(--morado)}

/* qué esperar */
.expect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.exp .ph{aspect-ratio:16/11;overflow:hidden;border-radius:var(--r-s);background:var(--dark)}

.exp img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}

.exp:hover img{transform:scale(1.03)}

.exp h3{margin-top:16px;font-size:var(--fz-lg);font-weight:700;letter-spacing:-.01em}

.exp p{margin-top:6px;color:#3c3c3f;font-size:var(--fz-base)}

/* ministerios — bloques estilo About */
.mblock{margin-top:clamp(44px,6vw,84px);scroll-margin-top:calc(var(--nav-h) + 16px)}

.mblock:first-of-type{margin-top:0}

.mblock .cat{font-family:var(--mono);font-size:var(--fz-m);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--morado)}

.mblock .intro{margin-top:8px;max-width:62ch;color:#3c3c3f;font-size:clamp(15px,1.35vw,17px)}

.mblock .ph{margin-top:22px;aspect-ratio:2/1;overflow:hidden;border-radius:var(--r-s);background:var(--dark)}

.mblock img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}

.mblock:hover img{transform:scale(1.03)}

.mblock .below{display:grid;grid-template-columns:1fr 1fr;gap:14px clamp(24px,4vw,64px);margin-top:22px;align-items:start}

.mblock .name{font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}

.mblock h3{font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.015em;line-height:1.2}

.mblock .desc p{color:#3c3c3f;font-size:var(--fz-base)}

/* CTA final */
.cta-final{background:var(--paper);color:var(--ink);text-align:center;border-top:1px solid var(--hair);padding:clamp(70px,10vw,130px) 0}

.cta-final .label{color:var(--morado);display:block;margin-bottom:18px}

.cta-final h2{font-size:clamp(26px,4.8vw,64px);max-width:16ch;margin:0 auto;text-wrap:balance}

.cta-final .btn{margin-top:36px;border-color:var(--ink);background:var(--ink);color:#fff;padding:17px 40px;font-size:var(--fz-base)}

.cta-final .btn:hover{background:var(--morado);border-color:var(--morado);color:#fff}

.wa{position:fixed;right:20px;bottom:20px;z-index:50;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .25s ease}

/* rail lateral (estilo About de Elevation) */
.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:16px;align-items:flex-end}

.rail a{display:flex;align-items:center;gap:10px}

.rail span{font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);opacity:0;transform:translateX(8px);transition:opacity .25s,transform .25s,color .25s}

.rail i{display:block;width:18px;height:2px;background:rgba(12,12,13,.22);transition:width .25s,background .25s}

.rail a:hover span,.rail a.on span{opacity:1;transform:none}

.rail a.on span{color:var(--ink)}

.rail a.on i{width:32px;background:var(--morado)}

@media (max-width:1100px){.rail{display:none}}

/* eventos */
.ev-hero{padding:clamp(52px,7vw,96px) 0 clamp(26px,3.5vw,44px)}

.ev-hero h1{font-size:clamp(30px,5.4vw,74px);max-width:15ch}

.ev-hero .label{color:var(--gris);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}

.ev-hero .label::before{content:"";width:26px;height:1.5px;background:var(--morado)}

.ev-hero p{margin-top:20px;max-width:60ch;color:#3c3c3f;font-size:clamp(15.5px,1.4vw,18px)}

.ev-filters{display:flex;flex-wrap:wrap;gap:9px;padding-bottom:clamp(26px,3.5vw,44px);border-bottom:1px solid var(--hair)}

.ev-filters button{font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.14em;text-transform:uppercase;padding:10px 17px;border:1px solid var(--hair);border-radius:var(--r-pill);color:#4a4a4e;transition:background .22s,color .22s,border-color .22s}

.ev-filters button:hover{border-color:var(--ink)}

.ev-filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.ev-list{padding:clamp(34px,4.5vw,64px) 0 clamp(64px,9vw,120px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.6vw,52px) 20px}

.ecard{display:block}

.ecard .ph{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-s);background:var(--dark);position:relative}

.ecard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}

.ecard:hover img{transform:scale(1.035)}

.ecard .tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,.94);color:var(--ink);font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-pill)}

.ecard h3{margin-top:18px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(15px,1.7vw,21px);line-height:1.08}

.ecard .when{margin-top:10px;font-size:var(--fz-base);font-weight:700}

.ecard .where{margin-top:3px;color:var(--gris);font-size:var(--fz-base)}

.ecard .more{display:inline-block;margin-top:13px;font-size:var(--fz-s);font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--ink);padding-bottom:3px;transition:color .2s,border-color .2s}

.ecard:hover .more{color:var(--morado);border-color:var(--morado)}

.ev-note{padding-bottom:clamp(56px,8vw,110px);font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

@media (max-width:760px){.ev-list{grid-template-columns:1fr}}

@media (max-width:1020px){
  .past{grid-template-columns:1fr}
  .past .ph{aspect-ratio:16/10}
  .expect-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .menu{display:none}
  .burger{display:flex}
  .nav .btn-solid{padding:11px 20px}
  .brand .logo{height:27px}
  .who-grid,.books-grid,.expect-grid{grid-template-columns:1fr}
  .mblock .below{grid-template-columns:1fr}
  .about-img{aspect-ratio:16/10}
  .f-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:480px){
  .f-brand p{white-space:normal}
  .f-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   VIDEO DE FONDO EN EL BANNER DEL EVENTO
   ══════════════════════════════════════════════════════════════
   La imagen SIEMPRE está debajo. El video se pone encima solo cuando de
   verdad empieza a reproducirse, y por eso arranca invisible: si falla,
   no se ve un rectángulo negro, se ve la imagen.

   Se respeta «reducir movimiento» del sistema. Para quien lo tiene puesto
   —mareos, migrañas, epilepsia fotosensible— un bucle que no para de
   moverse es un problema real, no una preferencia estética. */
.ph video.ev-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;pointer-events:none}

.ph video.ev-video.suena{opacity:1}

@media (prefers-reduced-motion:reduce){
  .ph video.ev-video{display:none}
}

/* ══════════════════════════════════════════════════════════════
   PANTALLAS SIN RATÓN · DESHACER LOS EFECTOS DE HOVER
   ══════════════════════════════════════════════════════════════
   En un teléfono no hay puntero, pero al tocar un elemento el navegador le
   aplica :hover Y SE QUEDA PEGADO hasta que tocas en otro lado. Eso hacía
   que un título tocado se quedara morado, que una foto se quedara con el
   zoom puesto, y que los enlaces del pie cambiaran de color al deslizar el
   dedo por encima.

   Es «hover: none» y no «max-width» a propósito: en un portátil con pantalla
   táctil el ratón sigue funcionando, y ahí no se desactiva nada. Decide el
   dispositivo, no el ancho.

   VA AL FINAL DEL <style>. Si se mueve hacia arriba, las reglas de hover que
   queden después vuelven a ganar y el problema regresa.
   ══════════════════════════════════════════════════════════════ */
@media (hover:none){
  /* textos y enlaces que cambiaban de color */
  .bcard:hover h3,.bl-dest a:hover h2,.book:hover .go,.more:hover,.ar-back:hover,
  .overlay nav a:hover,.f-col a:hover,.f-legal a:hover,.f-legal .powered:hover,
  .menu a:hover,.ecard:hover h3,.mcard:hover h3,.gcard:hover h3,.scard:hover h3,
  .links a:hover{color:inherit;background:inherit;border-color:inherit}

  /* fotos que se quedaban con el zoom */
  .bcard:hover img,.bl-dest a:hover img,.book:hover img,.exp:hover img,
  .mblock:hover img,.ecard:hover img,.mcard:hover img,.gcard:hover img,
  .scard:hover img,.f-legal .powered a:hover img{transform:none}

  /* cajas y botones que se levantaban o cambiaban de fondo */
  .who:hover,.btn:hover,.f-social a:hover,.wa:hover,.links a:hover,
  .ecard:hover,.mcard:hover,.gcard:hover,.scard:hover{transform:none}
  .nav .btn-solid:hover,.books-cta .btn:hover,.cta-final .btn:hover,
  .gr-cta .btn:hover,.mdl-save:hover,.mdl-x:hover,.cierre-col .btn:hover,
  .links a.solid:hover{background:inherit;border-color:inherit;color:inherit}

  /* la flecha de «leer» que se separaba */
  .bl-dest a:hover .leer{gap:10px;color:inherit;border-color:inherit}
}