/* ═══ ARTICULO · 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}

/* ── Fuente de lectura ──
     Si en el kit de Adobe Fonts se activa Freight Text, el navegador la usa.
     Si todavía no está, cae a Paralucent Text y luego a la serif del sistema.
     No hay que tocar código el día que se active: funciona solo. */
: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}}

/* contenido con formato (blog y notas) */
.texto h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(18px,2.2vw,26px);line-height:1.1;margin:clamp(30px,3.6vw,46px) 0 14px;letter-spacing:-.01em}

.texto h3{font-size:clamp(16px,1.8vw,19px);font-weight:800;letter-spacing:-.01em;
  margin:clamp(24px,3vw,34px) 0 10px}

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

.texto p:first-child{font-size:clamp(17px,1.7vw,19.5px);color:#1a1a1e}

.texto strong{font-weight:700;color:#0c0c0d}

.texto em{font-style:italic}

.texto a{color:var(--morado);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;transition:opacity .2s}

.texto a:hover{opacity:.7}

.texto blockquote{margin:clamp(24px,3vw,34px) 0;padding:2px 0 2px 22px;
  border-left:3px solid var(--morado)}

.texto blockquote{color:#1a1a1e;font-size:clamp(17px,1.7vw,20px);line-height:1.6;font-style:italic}

.texto ul,.texto ol{margin:0 0 22px;padding-left:24px}

.texto ul li,.texto ol li{color:#26262a;font-size:clamp(16px,1.5vw,17.5px);
  line-height:1.72;margin-bottom:9px;padding-left:4px}

.texto ul li::marker{color:var(--morado)}

.texto ol li::marker{color:var(--morado);font-family:var(--mono);font-size:.85em}

.texto hr{border:0;border-top:1px solid var(--hair);margin:clamp(30px,4vw,48px) 0;width:80px}

.texto code{font-family:var(--mono);font-size:.88em;background:rgba(12,12,13,.05);
  padding:2px 6px;border-radius:var(--r-s)}

/* ── lectura del artículo ── */
.ar-wrap{max-width:none}

.ar-progreso{position:fixed;top:0;left:0;height:3px;background:var(--morado);z-index:60;
  width:0;transition:width .12s linear}

/* ── UN SOLO ANCHO ──
   Antes había cuatro y ninguno coincidía: la imagen empezaba en 173, el
   título en 333, el cuerpo en 377 y la bajada en 405. Cuatro bordes
   izquierdos distintos en la misma columna: eso era lo que se veía perdido.
   Ahora todo usa la misma medida —la del cuerpo, que es la de lectura— así
   que hay UN borde y todo lo comparte. */
:root{ --medida: min(64ch, 42rem) }

.lee{max-width:none;margin:0 auto}

.lee-cab{max-width:var(--medida);margin:0 auto;text-align:center}

.lee-cab .kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:var(--fz-s);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--morado);margin-bottom:20px}

.lee-cab .kick::before,.lee-cab .kick::after{content:"";width:22px;height:1.5px;background:var(--morado);opacity:.45}

.lee-cab h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,54px);line-height:1.03;letter-spacing:-.015em;
  max-width:20ch;margin:0 auto;text-wrap:balance}

.lee-cab .bajada{max-width:none;margin-top:20px;font-family:var(--lectura);font-size:clamp(18px,1.9vw,22px);
  line-height:1.5;color:#4a4a4e;margin-right:auto;text-wrap:pretty}

.lee-firma{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris)}

.lee-firma b{color:var(--ink);font-weight:600}

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

.lee-img{max-width:var(--medida);margin:clamp(26px,3.4vw,44px) auto 0;aspect-ratio:16/9;
  border-radius:var(--r);overflow:hidden;background:var(--dark)}

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

/* la columna de lectura: medida corta, tipografía cómoda */
.lee-cuerpo{max-width:800px;margin:clamp(30px,3.8vw,50px) auto 0;position:relative;
  font-family:"lora",var(--lectura);
  font-size:clamp(18px,1.4vw,20px);line-height:1.75;color:#24242a;
  /* SIN justificar y SIN guionado, medido de relevantmagazine.com:
       text-align: start   ·   hyphens: manual
     Nunca cortan una palabra. Yo lo había justificado porque los diarios de
     papel lo hacen, pero la revista de referencia no: con guiones el texto
     se lee apretado, y sin ellos el justificado abre ríos de blanco. */
  letter-spacing:0;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;font-kerning:normal;
  font-variant-numeric:oldstyle-nums proportional-nums;
  /* evita palabras huérfanas al final de párrafo */
  text-wrap:pretty;
  /* comillas y guiones fuera del bloque de texto, como en imprenta */
  hanging-punctuation:first last}

.lee-cuerpo p{margin:0 0 1.35em;color:inherit;font-size:inherit;line-height:inherit}

/* la entrada, un poco mayor, para dar pie a la lectura */
/* ── entradilla y letra capital ──
   La variante la elige el servidor según el largo del primer párrafo,
   porque una capital que baja 3 líneas contra un párrafo de 1 línea
   deja un hueco. La letra grande nunca desaparece: cambia de forma. */
/* La entrada iba a 1.1em —un 10% más— para hacer de copete. Con la bajada
   fuera y Lora puesta, ese escalón se leía como un error de tamaño en vez de
   una decisión. Ahora es del mismo cuerpo; lo que la distingue es la capital
   y un color algo más oscuro. */
/* NO poner aquí un ::first-letter.
   Este artículo YA tiene sistema de letra capital: el motor de texto envuelve
   la primera letra en <span class="cap"> y el párrafo lleva capital-2,
   capital-3 o capital-alta según cuántas líneas deba ocupar. Ver más abajo.
   Yo agregué un ::first-letter encima sin verlo, y como la primera letra ya
   estaba dentro de un span flotado, mi regla cayó en la letra SIGUIENTE:
   salían dos capitales, «N» negra y «a» morada. */
.lee-cuerpo > p.entrada{font-size:1em;line-height:inherit;color:#16161a}

/* la letra grande, común a las tres variantes.
   Va en la MISMA serif del cuerpo, como en los periódicos: una capital
   en tipografía de titular parece un logo metido en el párrafo. */
.lee-cuerpo .cap{
  font-family:"lora",var(--lectura);
  font-weight:700;
  color:var(--ink);
  /* Las medidas salen de una cuenta, no a ojo:
     alto de la caja = font-size × line-height
     Para que la letra ocupe N líneas exactas:
       font-size  = N × interlínea ÷ 0.70   (0.70 = altura de mayúscula)
       line-height = 0.70                    (así la caja iguala la letra) */
  font-feature-settings:"liga" 0,"kern" 1;
  -webkit-font-smoothing:antialiased;
  text-transform:none}

/* el signo de apertura (¿ ¡ «) queda pequeño antes de la capital */
.lee-cuerpo .pre-cap{
  font-family:var(--lectura);font-size:1em;color:#9a9aa0;
  margin-right:.01em}

/* ── baja 3 líneas · párrafo largo ──
   ATENCIÓN A LA CUENTA. El comentario original decía «3 × 1.6 ÷ 0.70 = 6.85em»
   y era correcto CUANDO la interlínea del cuerpo era 1.6. Hoy es 1.75, así que
   ese 6.85em daba una letra que abarcaba 2.74 líneas en vez de las 3
   previstas: un 18% más grande de lo que decía la fórmula.

   Medido en relevantmagazine.com, su capital abarca 2.33 líneas. Para igualar:
     alto de mayúscula deseado = 2.33 × 1.75em = 4.08em
     font-size                 = 4.08 ÷ 0.70   = 5.83em
   Sigue sangrando 3 líneas de texto —el flotante ocupa 2.33 y el texto se
   acomoda en 3— pero la letra pesa lo mismo que la suya.

   Si alguien cambia la interlínea del cuerpo, hay que rehacer esta cuenta. */
.lee-cuerpo > p.capital-3 .cap{
  float:left;font-size:5.83em;line-height:.70;
  /* 0.1em de aire a la derecha = 11.5px, el mismo que deja Relevant.
     Antes eran .055em = 7.5px y la letra se sentía apretada al texto. */
  margin:0 .1em 0 -.025em}

/* ── baja 2 líneas · párrafo medio ──
   Escalada con el mismo factor que la de 3 líneas (5.83 ÷ 6.85 = 0.851),
   para que las dos variantes guarden la misma proporción entre sí. */
.lee-cuerpo > p.capital-2 .cap{
  float:left;font-size:3.89em;line-height:.70;
  margin:0 .1em 0 -.025em}

/* ── versal elevada · párrafo corto ──
   No flota: se apoya en la línea base y crece hacia arriba, así no deja
   hueco cuando no hay texto al costado. Es la solución de imprenta. */
.lee-cuerpo > p.capital-alta{padding-top:.42em}

.lee-cuerpo > p.capital-alta .cap{
  font-size:2.7em;line-height:.62;
  display:inline-block;vertical-align:-.045em;
  margin-right:.035em;margin-left:-.025em}

/* que el párrafo siguiente respete la capital flotante */
.lee-cuerpo > p.capital-3 + p,
.lee-cuerpo > p.capital-2 + p{margin-top:0}

.lee-cuerpo h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,2.1vw,26px);line-height:1.12;letter-spacing:-.01em;
  margin:2.1em 0 .5em;text-wrap:balance;scroll-margin-top:100px}

.lee-cuerpo h3{font-size:1.05em;font-weight:800;letter-spacing:-.01em;margin:1.7em 0 .4em}

.lee-cuerpo strong{font-weight:700;color:#0c0c0d}

.lee-cuerpo em{font-style:italic}

.lee-cuerpo a{color:var(--morado);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;transition:opacity .2s}

.lee-cuerpo a:hover{opacity:.68}

.lee-cuerpo blockquote{position:relative;margin:1.9em 0;padding:0 0 0 30px;
  border-left:2px solid var(--morado);font-size:1.16em;line-height:1.5;
  font-style:italic;color:#12121a;letter-spacing:-.005em}

.lee-cuerpo blockquote::before{content:"\201C";position:absolute;left:8px;top:-.16em;
  font-family:var(--display);font-size:1.5em;line-height:1;color:var(--lavanda);
  opacity:.55;pointer-events:none}

.lee-cuerpo ul,.lee-cuerpo ol{margin:0 0 1.35em;padding-left:1.5em}

.lee-cuerpo li{margin-bottom:.5em;line-height:1.75}

.lee-cuerpo li::marker{color:var(--morado)}

.lee-cuerpo hr{border:0;width:64px;height:1px;margin:2.6em auto;
  background:linear-gradient(90deg,transparent,var(--hair) 18%,var(--hair) 82%,transparent)}

.lee-cuerpo ::selection{background:rgba(62,34,178,.16)}

.lee-cuerpo li{padding-left:2px}

.lee-cuerpo ul{list-style:none;padding-left:0}

.lee-cuerpo ul li{position:relative;padding-left:26px}

.lee-cuerpo ul li::before{content:"";position:absolute;left:6px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--lavanda)}

.lee-cuerpo ol{padding-left:1.4em}

.lee-cuerpo ol li::marker{color:var(--morado);font-family:var(--mono);font-size:.8em;font-weight:600}

.lee-cuerpo h2 + p,.lee-cuerpo h3 + p{margin-top:0}

.lee-cuerpo p + h2{margin-top:1.9em}

/* Los párrafos que abren con una frase en negrita funcionan como puntos
   de una enumeración ("1. Aislamiento.", "2. Adoctrinamiento."). Un poco
   más de aire arriba los agrupa visualmente y el texto deja de leerse
   como un muro. */
.lee-cuerpo > p:has(> strong:first-child){margin-top:1.75em}

.lee-cuerpo > p.entrada:has(> strong:first-child){margin-top:0}

.lee-cuerpo > p:has(> strong:first-child) > strong:first-child{
  letter-spacing:-.005em}

.lee-cuerpo code{font-family:var(--mono);font-size:.86em;background:rgba(12,12,13,.05);
  padding:2px 6px;border-radius:var(--r-s)}

/* ── compartir ── */
.comp{max-width:var(--medida);margin:clamp(34px,4.4vw,56px) auto 0;padding-top:28px;
  border-top:1px solid var(--hair)}

.comp .t{font-family:var(--mono);font-size:var(--fz-mini);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-bottom:14px}

.comp-fila{display:flex;gap:9px;flex-wrap:wrap}

.comp-fila a,.comp-fila button{display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border:1.5px solid var(--hair);border-radius:var(--r-pill);
  font-size:var(--fz-m);font-weight:700;letter-spacing:.02em;color:var(--ink);
  transition:background .22s,color .22s,border-color .22s,transform .2s}

.comp-fila a:hover,.comp-fila button:hover{background:var(--ink);color:#fff;
  border-color:var(--ink);transform:translateY(-2px)}

.comp-fila svg{width:16px;height:16px;flex:0 0 auto}

/* comp-wa y no wa: la clase .wa es el botón FLOTANTE de contacto, con
   position:fixed;right:20px;bottom:20px. Al reusarla aquí, los botones de
   compartir heredaban ese fixed y se escapaban de su sitio: el de la fila
   se iba a la esquina —encima del botón real— con su etiqueta de texto
   desbordando el círculo, y el del riel quedaba descolocado dentro del riel
   porque .comp-rail tiene un transform y eso vuelve el fixed relativo a él.
   Dos nombres distintos para dos cosas distintas. */
.comp-fila .comp-wa:hover{background:#25D366;border-color:#25D366;color:#0c0c0d}

.comp-fila .copiado{background:var(--morado)!important;border-color:var(--morado)!important;color:#fff!important}

/* rail lateral en pantallas grandes */
@media (max-width:700px){
  /* La columna del celular es angosta: 3 líneas se comerían el párrafo.
     Todas bajan a 2 → 2 × 1.6 ÷ 0.70 = 4.57em */
  .lee-cuerpo > p.capital-3 .cap,
  .lee-cuerpo > p.capital-2 .cap{font-size:3.89em;line-height:.70;margin:0 .1em 0 -.02em}
  .lee-cuerpo > p.capital-alta{padding-top:.36em}
  .lee-cuerpo > p.capital-alta .cap{font-size:2.45em}
}

@media (max-width:640px){
  .lee-cuerpo{font-size:var(--fz-lg);line-height:1.72}
}

/* ── firma del autor al final ── */
.autor-caja{max-width:min(64ch,42rem);margin:clamp(32px,4vw,50px) auto 0;padding:clamp(24px,3vw,32px);
  border:1px solid var(--hair);border-radius:var(--r);display:flex;gap:20px;align-items:flex-start}

.autor-caja .ini{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--ink);
  color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:var(--fz-xl)}

.autor-caja .txt{min-width:0}

.autor-caja .rol{font-family:var(--mono);font-size:var(--fz-mini);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);display:block;margin-bottom:5px}

.autor-caja b{display:block;font-size:var(--fz-lg);font-weight:800;letter-spacing:-.01em}

.autor-caja p{margin-top:8px;color:#4a4a4e;font-size:var(--fz-base);line-height:1.6}

/* ── anterior / siguiente ── */
/* ══════════ ENCABEZADO: EL TÍTULO SOBRE LA FOTO ══════════
   Medidas tomadas de relevantmagazine.com con el inspector:
     foto 1320px en una ventana de 1358  → 97% del ancho
     alto 650px
     bloque del título 792px
     título 65px con interlínea 58.5 (0.90)
     rótulos y firma a 10px en mayúsculas
   Lo único que NO copié es el velo: ellos no lo llevan porque su foto es
   oscura. Aquí las fotos cambian cada semana.

   ¡OJO CON EL ATAJO DE MARGIN! El margin-inline de abajo hace que la foto
   se salga del relleno del contenedor. Si alguien escribe después un
   «margin: 0 0 X» en esta misma regla, el atajo lo pisa y la foto se
   desborda 13px a la derecha. Ya pasó. Usar margin-bottom, nunca margin. */
.lee-hero{position:relative;overflow:hidden;background:#090909;
  min-height:clamp(400px,50vw,650px);display:grid;place-items:center;
  width:calc(100% + 2 * (var(--pad) - 18px));
  margin-inline:calc(-1 * (var(--pad) - 18px));
  margin-bottom:clamp(34px,4vw,52px)}

.lee-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.lee-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,9,9,.58) 0%,rgba(9,9,9,.30) 42%,rgba(9,9,9,.72) 100%)}

.lee-hero-in{position:relative;width:88%;max-width:792px;text-align:center;padding:48px 0}

/* ── LA INTERLÍNEA NO PUEDE SER 0.9 EN ESPAÑOL ──
   Copié el 0.9 de relevantmagazine.com, y ahí funciona porque sus títulos
   están en INGLÉS: no llevan Ñ ni vocales acentuadas en mayúscula.

   Medido en Monument Extended a 65px:
     la N  mide 45.5px de alto
     la Ñ  mide 63.7px   ← la tilde sube 18.2px, un 28% del tamaño
     con interlínea 58.5 faltaban 6px y la tilde tocaba la línea de arriba

   1.02 deja 2.6px de holgura sobre la tinta de la Ñ. Probado también con
   0.98, que da holgura CERO: justo se tocan.

   SI SE CAMBIA LA FUENTE DEL TÍTULO hay que rehacer esta cuenta: cada
   tipografía pone la tilde a distinta altura. La prueba rápida es medir
   «Ñ» contra «N» con measureText().actualBoundingBoxAscent en la consola. */
.lee-hero-in h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,4.6vw,65px);line-height:1.02;letter-spacing:-.005em;
  color:#fff;margin:0;text-wrap:balance}

.lee-firma2{margin:26px 0 0;font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.09em;
  text-transform:uppercase;color:#fff;line-height:2}

.lee-firma2 .por,.lee-firma2 .fecha{font-weight:400;opacity:.72}

.lee-firma2 b{font-weight:500}

@media(max-width:640px){
  .lee-hero{min-height:clamp(340px,72vw,460px)}
  .lee-hero-in{width:90%;padding:36px 0}
  .lee-firma2{margin-top:18px;font-size:var(--fz-mini)}
}

/* ══════════ COMPARTIR, FUERA DEL MARGEN ══════════
   Sin transform: un transform en el contenedor volvería relativo cualquier
   position:fixed de sus hijos, que es lo que rompió el riel anterior. */
.rail{position:absolute;left:-104px;top:0;bottom:0;width:44px}

.rail-in{position:sticky;top:120px;display:flex;flex-direction:column;gap:10px;align-items:center}

/* Un rótulo vertical, como el «PREVIOUS ARTICLE» de Relevant. Sin él los
   cuatro botones son cuatro círculos sin explicación. */
.rail-lbl{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);margin-bottom:6px;user-select:none}

.rail a,.rail button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--hair);
  background:transparent;color:#3c3c41;display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .18s,color .18s,border-color .18s}

.rail a:hover,.rail button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.rail svg{width:17px;height:17px}

.rail .copiado{background:var(--morado)!important;border-color:var(--morado)!important;color:#fff!important}

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

/* ══════════ EL ARTÍCULO EN CELULAR ══════════ */
@media(max-width:700px){
  /* La foto, mucho más alta. Relevant ocupa un 73% de la pantalla; la
     nuestra estaba en 340px, menos de la mitad. */
  .lee-hero{min-height:min(72svh,560px)}
}

.vecinos{max-width:1080px;margin:clamp(38px,5vw,66px) auto 0;padding-top:clamp(26px,3.4vw,40px);
  border-top:1px solid var(--hair);display:grid;grid-template-columns:1fr 1fr;gap:16px}

.vec{display:flex;gap:16px;align-items:center;padding:20px;border:1px solid var(--hair);
  border-radius:var(--r);transition:border-color .25s,transform .25s,box-shadow .25s}

.vec:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.06)}

.vec.der{flex-direction:row-reverse;text-align:right}

.vec .mini{flex:0 0 auto;width:66px;height:50px;border-radius:var(--r-s);overflow:hidden;background:var(--dark)}

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

.vec .mini.sin{background:#f2f2f4}

.vec .d{min-width:0}

.vec .dir{display:block;font-family:var(--mono);font-size:var(--fz-mini);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-bottom:6px}

.vec b{display:block;font-size:var(--fz-base);font-weight:800;letter-spacing:-.01em;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.vec:hover .dir{color:var(--morado)}

@media (max-width:760px){
  .vecinos{grid-template-columns:1fr}
  .vec.der{flex-direction:row;text-align:left}
  .autor-caja{flex-direction:column;gap:14px}
}

/* ── impresión: que un artículo se imprima bien ── */
@media print{
  .nav,.overlay,.wa-float,.comp,.comp-rail,.ar-progreso,.vecinos,.ar-rel,
  .cta-final,footer,.ar-back{display:none!important}
  body{background:#fff;color:#000}
  .lee-cuerpo{max-width:none;font-size:11.5pt;line-height:1.55;color:#000}
  .lee-cab h1{font-size:22pt}
  .lee-img{page-break-inside:avoid;max-height:9cm}
  .lee-cuerpo h2{page-break-after:avoid;font-size:14pt}
  .lee-cuerpo blockquote{border-left:2px solid #666}
  a{color:#000;text-decoration:none}
  .lee-cuerpo a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ── migas de pan ── */
.migas{max-width:1080px;margin:0 auto;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);margin-bottom:clamp(18px,2.4vw,30px)}

.migas a{color:var(--gris);transition:color .2s}

.migas a:hover{color:var(--morado)}

.migas span.sep{opacity:.45}

.migas b{color:var(--ink);font-weight:600;max-width:34ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── tema del artículo ── */
.lee-tema{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(62,34,178,.07);color:var(--morado);font-family:var(--mono);font-size:var(--fz-mini);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .22s}

.lee-tema:hover{background:rgba(62,34,178,.14)}

/* ── cabecera que aparece al desplazarse ── */
.lee-fija{position:fixed;top:0;left:0;right:0;z-index:55;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);
  transform:translateY(-100%);transition:transform .3s cubic-bezier(.22,.7,.3,1)}

.lee-fija.on{transform:none}

.lee-fija .in{max-width:1180px;margin:0 auto;padding:11px clamp(16px,3vw,28px);
  display:flex;align-items:center;gap:16px}

.lee-fija .tit{flex:1;min-width:0;font-size:var(--fz-base);font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lee-fija .pct{font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.1em;color:var(--gris);flex:0 0 auto}

.lee-fija .arriba{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);
  display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}

.lee-fija .arriba:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.ar-progreso{top:0}

/* ── índice del artículo ── */
.indice{max-width:min(64ch,42rem);margin:clamp(28px,3.4vw,42px) auto 0;padding:22px 26px;
  border:1px solid var(--hair);border-radius:var(--r);background:#fbfbfc}

.indice .t{font-family:var(--mono);font-size:var(--fz-mini);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-bottom:14px}

.indice ol{list-style:none;margin:0;padding:0;counter-reset:idx}

.indice li{counter-increment:idx;margin-bottom:9px;padding-left:30px;position:relative}

.indice li:last-child{margin-bottom:0}

.indice li::before{content:counter(idx,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:var(--fz-mini);color:var(--lavanda);font-weight:600}

.indice a{font-size:var(--fz-base);font-weight:600;letter-spacing:-.01em;color:var(--ink);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}

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

/* índice flotante en pantallas anchas */
@media (min-width:1500px){
  .indice-rail{position:fixed;right:clamp(20px,2.6vw,52px);top:50%;transform:translateY(-50%);
    width:210px;z-index:18;display:block}
  .indice-rail .t{font-family:var(--mono);font-size:var(--fz-mini);font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--gris);margin-bottom:12px}
  .indice-rail ol{list-style:none;margin:0;padding:0}
  .indice-rail li{margin-bottom:11px;line-height:1.35}
  .indice-rail a{font-size:var(--fz-s);color:#8e8e93;border-left:2px solid var(--hair);
    padding-left:11px;display:block;transition:color .25s,border-color .25s}
  .indice-rail a:hover{color:var(--ink);border-color:var(--ink)}
  .indice-rail a.activo{color:var(--ink);border-color:var(--morado);font-weight:600}
}

.indice-rail{display:none}

/* ── suscripción al final ── */
.suscribe{max-width:min(64ch,42rem);margin:clamp(32px,4vw,52px) auto 0;padding:clamp(28px,3.4vw,40px);
  border-radius:var(--r);background:var(--ink);color:#fff;text-align:center}

.suscribe .k{font-family:var(--mono);font-size:var(--fz-mini);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lavanda);display:block;margin-bottom:12px}

.suscribe h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(18px,2.2vw,26px);line-height:1.08;max-width:24ch;margin:0 auto;text-wrap:balance}

.suscribe p{color:#b7b7bd;margin-top:12px;font-size:var(--fz-base);max-width:44ch;margin-left:auto;margin-right:auto}

.suscribe form{margin-top:22px;display:flex;gap:9px;max-width:430px;margin-left:auto;margin-right:auto}

.suscribe input{flex:1;margin:0;padding:14px 18px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);color:#fff;font-size:var(--fz-base)}

.suscribe input::placeholder{color:rgba(255,255,255,.55)}

.suscribe input:focus{outline:0;border-color:var(--lavanda);background:rgba(255,255,255,.12)}

.suscribe button{padding:14px 26px;border-radius:var(--r-pill);background:#fff;color:var(--ink);
  font-size:var(--fz-m);font-weight:700;letter-spacing:.02em;transition:background .22s,color .22s}

.suscribe button:hover{background:var(--lavanda)}

.suscribe .ok{margin-top:14px;color:var(--lavanda);font-family:var(--mono);font-size:var(--fz-mini);
  letter-spacing:.13em;text-transform:uppercase;min-height:14px}

@media (max-width:520px){.suscribe form{flex-direction:column}}

/* ── "Mira el mensaje completo" ── */
.msg-video{max-width:1080px;margin:clamp(38px,4.6vw,64px) auto 0;
  padding-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--hair);scroll-margin-top:90px}

.msg-video .cab{max-width:min(64ch,42rem);margin:0 auto clamp(18px,2vw,24px);text-align:center}

.msg-video .k{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);margin-bottom:13px}

.msg-video .k::before,.msg-video .k::after{content:"";width:20px;height:1.5px;
  background:var(--morado);opacity:.45}

.msg-video h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,32px);line-height:1.06;text-wrap:balance}

.msg-video p{margin-top:12px;font-family:var(--lectura);font-size:clamp(16px,1.5vw,17.5px);
  line-height:1.55;color:#4a4a4e;max-width:46ch;margin-left:auto;margin-right:auto}

.msg-marco{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--dark);box-shadow:0 22px 60px rgba(0,0,0,.13)}

.msg-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.msg-fachada{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  cursor:pointer;display:block;background:var(--dark)}

.msg-fachada img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .4s}

.msg-fachada:hover img{transform:scale(1.03)}

.msg-fachada .velo{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,9,.55),rgba(8,8,9,.12) 55%,rgba(8,8,9,.3))}

.msg-fachada .btn2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;box-shadow:0 14px 40px rgba(0,0,0,.4);
  transition:transform .28s cubic-bezier(.22,.7,.3,1),background .28s,color .28s}

.msg-fachada:hover .btn2{transform:translate(-50%,-50%) scale(1.09);background:var(--morado);color:#fff}

.msg-fachada .pie{position:absolute;left:0;right:0;bottom:0;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left}

.msg-fachada .pie b{color:#fff;font-size:var(--fz-base);font-weight:700;letter-spacing:-.01em}

.msg-fachada .pie span{font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}

/* aviso de que el artículo trae video, arriba en la firma */
.lee-firma .convideo{display:inline-flex;align-items:center;gap:6px;color:var(--morado);
  transition:opacity .2s}

.lee-firma .convideo:hover{opacity:.7}

@media (max-width:640px){
  .msg-fachada .btn2{width:62px;height:62px}
  .msg-fachada .pie{padding:15px 17px}
  .msg-fachada .pie b{font-size:var(--fz-m)}
  .msg-fachada .pie span{display:none}
}

/* 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}
}

/* ══════════════════════════════════════════════════════════════
   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}
}

/* ══ COMPARTIR · fila y riel se reparten los anchos ══
   El riel vertical de la izquierda necesita margen libre y se esconde por
   debajo de 1180px. La fila hace su trabajo desde ahí para abajo.
   Complementarios: siempre hay una forma de compartir, nunca dos. */
/* La fila va visible en TODOS los anchos.
   Antes solo salía por debajo de 1180px, con el riel de la izquierda
   cubriendo el escritorio. Pero cuatro círculos pequeños en el margen no se
   leen como «compartir»: están, y nadie los ve. En escritorio ahora hay las
   dos cosas —el riel que acompaña mientras se lee, y la fila al terminar—
   que es lo que hace cualquier revista. No es duplicar: son dos momentos
   distintos, y el de después de leer es el que de verdad convierte. */
.comp{max-width:800px;margin:clamp(30px,4vw,48px) auto 0;
  padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--hair)}

.comp-lbl{display:block;margin-bottom:14px;font-family:var(--mono);font-size:var(--fz-mini);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}