/* ═══ BLOG · 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{
    --lectura:"freight-text-pro","paralucent-text",Georgia,"Iowan Old Style","Times New Roman",serif;
  }

: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}}

/* blog y grupos */
.bl-hero{padding:clamp(48px,6.5vw,88px) 0 clamp(20px,3vw,34px)}

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

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

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

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

.bl-dest{padding:clamp(22px,3vw,40px) 0 0}

.bl-dest a{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(22px,3.4vw,48px);align-items:center}

.bl-dest .ph{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--dark)}

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

.bl-dest a:hover img{transform:scale(1.03)}

.bl-dest h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.8vw,36px);line-height:1.05;margin-top:10px}

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

.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,40px) 20px;padding:clamp(28px,4vw,52px) 0 clamp(40px,5vw,70px)}

.bcard{display:block}

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

.bcard .ph.sin{display:grid;place-items:center;background:var(--soft,#f6f6f7);color:var(--gris);font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.14em;text-transform:uppercase}

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

.bcard:hover img{transform:scale(1.04)}

.bcard h3{margin-top:14px;font-size:var(--fz-lg);font-weight:800;letter-spacing:-.01em;line-height:1.3}

.bcard p{margin-top:7px;color:#3c3c3f;font-size:var(--fz-base);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.bcard .meta{margin-top:9px;font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}

.ar-wrap{padding-top:clamp(24px,3.4vw,44px);padding-bottom:clamp(50px,7vw,96px)}

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

.ar-back:hover{color:var(--morado)}

.ar-head{max-width:74ch}

.ar-head h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,4vw,52px);line-height:1.02}

.ar-meta{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}

.ar-meta span{font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.13em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--hair);border-radius:var(--r-pill);color:#4a4a4e}

.ar-img{margin-top:clamp(22px,3vw,38px);aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--dark)}

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

.ar-body{margin-top:clamp(26px,3.6vw,46px);max-width:70ch}

.ar-body p{color:#26262a;font-size:clamp(16px,1.5vw,17.5px);line-height:1.78;margin-bottom:20px}

.ar-body p:first-of-type{font-size:clamp(17px,1.7vw,19.5px);color:#1a1a1e}

.ar-rel{border-top:1px solid var(--hair);margin-top:clamp(34px,4.5vw,60px);padding-top:clamp(28px,4vw,48px)}

.ar-rel h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(17px,2.2vw,26px);margin-bottom:22px}

.ar-rel .bl-grid{padding:0}

/* grupos */
.gr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:clamp(26px,3.6vw,48px) 0}

.gr-step{border:1px solid var(--hair);border-radius:var(--r);padding:26px}

.gr-step span{font-family:var(--display);font-weight:800;font-size:var(--fz-num);line-height:1;color:var(--lavanda);display:block;margin-bottom:12px}

.gr-step b{display:block;font-size:var(--fz-in);font-weight:800;letter-spacing:-.01em;margin-bottom:7px}

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

.gr-info{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);padding-bottom:clamp(40px,5.5vw,80px);align-items:start}

.gr-info .ph{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--dark)}

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

.gr-list{border-top:1px solid var(--hair)}

.gr-list div{padding:18px 0;border-bottom:1px solid var(--hair)}

.gr-list .label{color:var(--gris);display:block;margin-bottom:6px}

.gr-list b{font-size:clamp(15.5px,1.5vw,18px);font-weight:700;letter-spacing:-.01em;display:block}

.gr-list span{color:#3c3c3f;font-size:var(--fz-base)}

.gr-cta{background:var(--ink);color:#fff;padding:clamp(46px,6vw,84px) 0;text-align:center}

.gr-cta h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,3.4vw,44px);line-height:1.05;max-width:20ch;margin:0 auto}

.gr-cta p{color:#b7b7bd;margin-top:14px;font-size:var(--fz-base);max-width:46ch;margin-left:auto;margin-right:auto}

.gr-cta .btn{margin-top:26px;border-color:#fff;background:#fff;color:var(--ink);padding:16px 34px}

.gr-cta .btn:hover{background:var(--lavanda);border-color:var(--lavanda)}

@media (max-width:1020px){.bl-grid,.gr-steps{grid-template-columns:repeat(2,1fr)}.bl-dest a,.gr-info{grid-template-columns:1fr}}

@media (max-width:640px){.bl-grid,.gr-steps{grid-template-columns:1fr}}

/* ── portada del blog, versión editorial ── */
.bl-hero h1{text-wrap:balance}

.bl-hero p{font-family:var(--lectura);font-size:clamp(18px,1.7vw,21px);line-height:1.55;
  color:#4a4a4e;max-width:54ch;text-wrap:pretty}

/* destacado: dos columnas con la foto mandando */
.bl-dest{padding:clamp(26px,3.4vw,44px) 0 0}

.bl-dest a{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.6vw,54px);
  align-items:center;padding-bottom:clamp(34px,4.4vw,58px);border-bottom:1px solid var(--hair)}

.bl-dest .ph{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--dark)}

.bl-dest .marca{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:var(--fz-mini);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--morado)}

.bl-dest .marca::before{content:"";width:20px;height:1.5px;background:var(--morado)}

.bl-dest h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,3vw,40px);line-height:1.04;margin-top:14px;text-wrap:balance;
  transition:color .25s}

.bl-dest a:hover h2{color:var(--morado)}

.bl-dest p{margin-top:16px;font-family:var(--lectura);font-size:clamp(16.5px,1.5vw,18.5px);
  line-height:1.62;color:#3c3c3f;text-wrap:pretty}

.bl-dest .pie{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}

.bl-dest .pie i{width:4px;height:4px;border-radius:50%;background:var(--hair);display:block}

.bl-dest .leer{margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fz-m);font-weight:700;letter-spacing:.03em;padding-bottom:4px;
  border-bottom:2px solid var(--ink);transition:gap .25s,border-color .25s,color .25s}

.bl-dest a:hover .leer{gap:16px;color:var(--morado);border-color:var(--morado)}

/* rejilla */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(34px,3.6vw,52px) clamp(20px,2.4vw,32px);
  padding:clamp(34px,4.4vw,58px) 0 clamp(44px,5.5vw,76px)}

.bcard .ph{aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--dark)}

.bcard h3{margin-top:16px;font-size:var(--fz-xl);font-weight:800;letter-spacing:-.015em;line-height:1.26;
  text-wrap:balance;transition:color .25s}

.bcard:hover h3{color:var(--morado)}

.bcard p{margin-top:9px;font-family:var(--lectura);color:#4a4a4e;font-size:var(--fz-base);line-height:1.58;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.bcard .meta{margin-top:11px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}

.bcard .meta i{width:3px;height:3px;border-radius:50%;background:var(--hair);display:block}

/* ── filtros por tema ── */
.bl-temas{display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  padding:clamp(22px,2.8vw,34px) 0 0;border-top:1px solid var(--hair);margin-top:clamp(26px,3.2vw,40px)}

.bl-temas .et{font-family:var(--mono);font-size:var(--fz-mini);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-right:6px}

.bl-temas a{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:var(--r-pill);
  border:1px solid var(--hair);font-size:var(--fz-m);font-weight:600;letter-spacing:.01em;color:#3c3c3f;
  transition:background .22s,color .22s,border-color .22s}

.bl-temas a:hover{border-color:var(--ink);color:var(--ink)}

.bl-temas a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.bl-temas a .n{font-family:var(--mono);font-size:var(--fz-mini);opacity:.6}

/* tema sobre la tarjeta */
.bcard .tema{display:inline-block;margin-top:13px;font-family:var(--mono);font-size:var(--fz-mini);
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--morado)}

.bcard h3{margin-top:7px}

/* encabezado del resultado filtrado */
.bl-filtro{padding:clamp(24px,3vw,38px) 0 0}

.bl-filtro h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,2.4vw,30px);line-height:1.06}

.bl-filtro p{margin-top:10px;color:#4a4a4e;font-size:var(--fz-base)}

.bl-filtro .quitar{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);border-bottom:1px solid var(--hair);padding-bottom:3px;transition:color .2s,border-color .2s}

.bl-filtro .quitar:hover{color:var(--morado);border-color:var(--morado)}

/* eventos (heredado) */
.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}
}

/* ══════════════════════════════════════════════════════════════
   EL BLOG EN CELULAR
   ══════════════════════════════════════════════════════════════
   POR QUÉ ESTO VA AQUÍ ABAJO Y NO ARRIBA CON LAS OTRAS MEDIA QUERIES:

   Este archivo tiene DOS bloques de estilos para .bl-grid. El primero
   (más arriba) es una versión antigua; el segundo es la buena, escrita
   después sin borrar la primera. Y las media queries de la línea ~344
   quedaron ATRAPADAS ENTRE LAS DOS.

   Como las dos reglas tienen la misma especificidad, gana la que viene
   después en el archivo — o sea el segundo bloque. Por eso la rejilla se
   quedaba en TRES COLUMNAS en el celular aunque existiera una media query
   pidiendo una sola: la media query estaba antes y la pisaban.

   Estas reglas van después de todo, así que ganan de verdad.
   Si alguien mueve este bloque hacia arriba, el celular se rompe otra vez.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1020px){
  .bl-grid{grid-template-columns:repeat(2,1fr)}

  /* ── EL DESTACADO, APILADO ──  TRAMPA Nº2, la otra mitad
     La media query de la línea 345 ya dice `.bl-dest a{...:1fr}`, pero el
     bloque reescrito de .bl-dest (línea 355) va DESPUÉS con la misma
     especificidad (0,1,1), así que ganaba él a cualquier ancho.
     Cuando se arregló .bl-grid trayendo sus media queries aquí abajo,
     .bl-dest se quedó atrás — mismo archivo, misma reescritura, la mitad
     que nadie miró porque en el escritorio se ve bien.
     Medido en Chromium: a 375px el destacado quedaba en DOS columnas de
     178.8px y 132.2px, con el h2 a 22px en Monument mayúsculas dentro de
     los 132px. A 320px, 108.8px. */
  .bl-dest a{grid-template-columns:1fr}
}

@media (max-width:640px){
  .bl-grid{grid-template-columns:1fr;gap:0;
    padding:clamp(24px,4vw,34px) 0 clamp(36px,5vw,56px)}

  /* ── LA PRIMERA, DESTACADA ──
     La nota más reciente se queda grande: foto ancha, título mayor y con
     su resumen. Como publican cada domingo, ésta es siempre la del
     domingo pasado. */
  .bl-grid > .bcard:first-child{padding-bottom:26px;border-bottom:1px solid var(--hair)}
  .bl-grid > .bcard:first-child .ph{aspect-ratio:16/10;border-radius:var(--r)}
  .bl-grid > .bcard:first-child h3{font-size:var(--fz-2xl);line-height:1.16;margin-top:8px}
  .bl-grid > .bcard:first-child p{-webkit-line-clamp:3;font-size:var(--fz-in)}

  /* ── LAS DEMÁS, EN FILA ──
     Miniatura cuadrada a la izquierda y texto a la derecha. Antes cada
     tarjeta ocupaba media pantalla de alto; así entran cuatro por pantalla
     y se pueden repasar de un vistazo. Es lo que hacen las apps de
     noticias, y por eso: lo nuevo con presencia, el resto escaneable. */
  .bl-grid > .bcard:not(:first-child){
    display:grid;grid-template-columns:96px 1fr;column-gap:15px;
    align-items:start;padding:17px 0;border-bottom:1px solid var(--hair)}
  .bl-grid > .bcard:not(:first-child) .ph{
    grid-column:1;grid-row:1 / span 3;aspect-ratio:1;border-radius:var(--r-s)}
  .bl-grid > .bcard:not(:first-child) .tema{margin-top:1px;font-size:var(--fz-mini)}
  .bl-grid > .bcard:not(:first-child) h3{
    margin-top:4px;font-size:var(--fz-in);line-height:1.24;letter-spacing:-.01em;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* El resumen no cabe al lado de la miniatura y lo importante ahí es el
     titular. Se oculta con display:none para que no ocupe celda. */
  .bl-grid > .bcard:not(:first-child) p{display:none}
  .bl-grid > .bcard:not(:first-child) .meta{margin-top:6px;font-size:var(--fz-mini);gap:6px}
  .bl-grid > .bcard:last-child{border-bottom:0}
}

/* ══════════════════════════════════════════════════════════════
   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 el título de la nota que tocaste se quedara MORADO, que la
   foto se quedara con el zoom puesto, y que los enlaces del pie cambiaran
   de color al pasar el dedo por encima mientras se desliza.

   «hover: none» es cierto solo en dispositivos que de verdad no pueden
   hacer hover. En un portátil con pantalla táctil sigue funcionando el
   ratón, así que ahí no se desactiva nada.

   ESTE BLOQUE SIRVE IGUAL EN LAS OTRAS PÁGINAS. Si notas títulos que se
   quedan de color en eventos, mensajes o ministerios, es lo mismo: se puede
   copiar tal cual al final del <style> de esas páginas.
   ══════════════════════════════════════════════════════════════ */
@media (hover:none){
  /* títulos 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{color: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,
  .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{transform:none}
  .nav .btn-solid:hover,
  .books-cta .btn:hover,
  .cta-final .btn:hover,
  .gr-cta .btn:hover,
  .mdl-save:hover,
  .mdl-x: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}
}