/* ══ BARRA SUPERIOR ══ */


/* ══ CABECERA ══ */


/* ══ CARRUSEL ══ */
.cartel{position:relative;background:var(--negro);overflow:hidden}
.diapos{position:relative;min-height:512px}
.dia{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease}
.dia.on{opacity:1;pointer-events:auto;position:relative}

.dia-in{position:relative;z-index:2;max-width:var(--ancho);margin:0 auto;padding:56px 30px;
  display:grid;grid-template-columns:1fr 1.85fr;gap:44px;align-items:center;min-height:512px}
.dia-fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.dia-fondo img{transform:scale(1.4);filter:blur(46px) saturate(1.15) brightness(.42)}
.dia-fondo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,18,.93) 0%,rgba(8,12,18,.72) 34%,rgba(8,12,18,.42) 100%)}
.eyebrow{display:inline-flex;align-items:center;gap:13px;white-space:nowrap;font-size:12.5px;font-weight:900;letter-spacing:2.4px;color:var(--arena);margin-bottom:20px}
.eyebrow::after{content:'';width:48px;height:1px;background:linear-gradient(90deg,var(--arena),transparent)}
.dia h1,.dia .titdia{font-family:var(--sans);font-weight:900;letter-spacing:-.5px;font-size:clamp(30px,3.4vw,44px);line-height:1.18;color:var(--blanco)}
.dia p{margin-top:19px;font-size:17px;color:var(--g200);line-height:1.65}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:var(--arena);color:var(--tinta);
  font-weight:900;font-size:14px;letter-spacing:1.4px;padding:15px 28px;border-radius:3px;transition:filter .2s,transform .1s}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:translateY(1px)}
.dia-img{border-radius:5px;overflow:hidden;box-shadow:0 20px 50px -14px rgba(0,0,0,.75)}
.dia-img img{aspect-ratio:16/9}
.dia-img.cuad{max-width:400px;margin:0 auto}
.dia-img.cuad img{aspect-ratio:1/1}
.mandos{position:absolute;bottom:22px;left:0;right:0;z-index:5;max-width:var(--ancho);margin:0 auto;padding:0 30px;
  display:flex;align-items:center;justify-content:flex-end;gap:16px}
.marcas{display:flex;gap:9px}
.marcas span{width:38px;height:3px;background:rgba(233,237,240,.26);border-radius:2px;cursor:pointer;transition:background .25s}
.marcas span.on{background:var(--arena)}
.flechas{display:flex;gap:8px}
.flechas button{width:38px;height:38px;border-radius:50%;border:.5px solid var(--g500);background:rgba(8,12,18,.5);
  color:var(--g100);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.flechas button:hover{border-color:var(--arena);color:var(--arena)}

/* ══ FRANJAS ══ */
.franja{padding:70px 0}
.franja.blanco{background:var(--blanco);color:var(--g500)}
.franja.hueso{background:var(--hueso);color:var(--g500)}
.franja.marfil{background:var(--marfil);color:var(--g500)}
.franja.verde{background:var(--verde)}
.franja.petro{background:var(--petroleo)}
.franja.noche{background:var(--noche)}
.franja.hondo{background:var(--hondo)}
.claro h2,.claro .sub{color:inherit}
.cabecilla{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.cabecilla h2{font-size:26px;font-weight:900;letter-spacing:.3px;color:var(--g050)}
.franja.blanco h2,.franja.hueso h2,.franja.marfil h2{color:var(--tinta)}
.sub{font-size:16px;color:var(--g300);margin-top:8px;max-width:56ch;line-height:1.6}
.franja.blanco .sub,.franja.hueso .sub,.franja.marfil .sub{color:var(--g400)}
.mas{font-size:13.5px;font-weight:900;letter-spacing:1.4px;color:var(--g200);border:.5px solid var(--g500);
  padding:12px 22px;border-radius:3px;transition:all .2s;white-space:nowrap}
.mas:hover{border-color:var(--arena);color:var(--arena)}
.franja.blanco .mas,.franja.hueso .mas,.franja.marfil .mas{color:var(--g500);border-color:var(--g100)}
.franja.blanco .mas:hover,.franja.hueso .mas:hover,.franja.marfil .mas:hover{border-color:var(--arena-o);color:var(--arena-o)}
.tira{width:46px;height:3px;border-radius:2px;margin-bottom:15px}

/* ══ TARJETAS ══ */
.rej{display:grid;gap:24px}


.tj{display:flex;flex-direction:column;border-radius:6px;overflow:hidden;background:var(--pizarra);transition:transform .25s,box-shadow .25s}
.franja.verde .tj{background:#1E3F49}
.franja.petro .tj{background:#20384A}
.franja.noche .tj{background:#1A2A38}
.franja.hondo .tj{background:#1B3441}
.franja.blanco .tj,.franja.marfil .tj{background:var(--hueso)}
.franja.hueso .tj{background:var(--blanco);box-shadow:0 1px 3px rgba(13,17,23,.08)}
.tj:hover{transform:translateY(-3px)}
.tj .foto{aspect-ratio:16/10;overflow:hidden;background:var(--negro)}
.tj .foto img{transition:transform .5s}
.tj:hover .foto img{transform:scale(1.04)}
.tj .cuerpo{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}

.tj h3{font-size:18px;font-weight:700;line-height:1.34;color:var(--g050);margin-bottom:9px}
.franja.blanco .tj h3,.franja.hueso .tj h3,.franja.marfil .tj h3{color:var(--tinta)}
.tj p{font-size:15px;color:var(--g300);line-height:1.6}
.franja.blanco .tj p,.franja.hueso .tj p,.franja.marfil .tj p{color:var(--g400)}
.tj .meta{margin-top:auto;padding-top:13px;font-size:13px;color:var(--g400)}

/* ══ SERIES ══ */
.series{display:grid;grid-template-columns:1fr 2fr;gap:44px;align-items:start}
.series-txt h2{font-size:28px;font-weight:900;color:var(--g050);margin-bottom:14px}
.series-txt p{font-size:16.5px;color:var(--g200);line-height:1.7;margin-bottom:26px}
.rej-ser{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.serie{border-radius:6px;overflow:hidden;background:#1B3441;transition:transform .25s}
.serie:hover{transform:translateY(-4px)}
.serie .foto{aspect-ratio:1/1;overflow:hidden;background:var(--negro)}
.serie .cuerpo{padding:14px 15px 17px}
.serie h4{font-size:16px;font-weight:700;color:var(--g050);margin-bottom:5px}
.serie .eps{font-size:13px;color:var(--calipso)}

/* ══ BANDA YOUTUBE ══ */
.canal{background:var(--noche);padding:64px 0}
.canal .env{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.canal .txt{flex:1;min-width:300px}
.canal .kick{font-size:12.5px;font-weight:900;letter-spacing:2.4px;color:var(--terra);margin-bottom:14px}
.canal h3{font-family:var(--sans);font-weight:900;font-size:clamp(26px,3.2vw,36px);color:var(--blanco);line-height:1.2;margin-bottom:14px}
.canal p{color:var(--g200);font-size:16.5px;max-width:54ch;line-height:1.65}
.byt{display:inline-flex;align-items:center;gap:12px;background:#C8352B;color:#fff;font-weight:900;font-size:15px;
  letter-spacing:1.2px;padding:19px 34px;border-radius:3px;white-space:nowrap;transition:filter .2s,transform .1s}
.byt:hover{filter:brightness(1.1)}
.byt:active{transform:translateY(1px)}

/* ══ VERSÍCULO ══ */
.verso{background:var(--hueso);padding:52px 0;text-align:center;border-top:.5px solid var(--g100);border-bottom:.5px solid var(--g100)}
.verso blockquote{font-family:var(--sans);font-style:italic;font-weight:400;font-size:clamp(20px,2.5vw,27px);line-height:1.45;color:var(--pizarra);max-width:34ch;margin:0 auto}
.verso .ref{margin-top:13px;font-size:12px;font-weight:900;letter-spacing:2.6px;color:var(--calipso-o)}

/* ══ HERRAMIENTAS ══ */
.herr{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hc{background:var(--petroleo);border:.5px solid var(--g600);border-radius:6px;padding:30px 28px 32px;display:flex;flex-direction:column;transition:all .25s}
.hc:hover{border-color:var(--calipso);transform:translateY(-3px);box-shadow:0 8px 24px rgba(13,17,23,.22)}
.hc .ic{width:44px;height:44px;border-radius:50%;border:.5px solid var(--calipso);display:flex;align-items:center;justify-content:center;color:var(--calipso);background:rgba(143,207,198,.06);margin-bottom:19px}
.hc h3{font-size:19px;font-weight:900;color:var(--g050);margin-bottom:10px}
.hc p{font-size:15px;color:var(--g200);line-height:1.62;flex:1}
.hc .ir{margin-top:19px;font-size:13px;font-weight:900;letter-spacing:1.4px;color:var(--calipso)}
.hc.pronto{background:#182735;border-color:#243a49}
.hc.pronto h3{color:var(--g200)}
.hc.pronto p{color:var(--g300)}
.hc.pronto .ic{border-color:var(--g500);color:var(--g400);background:none}
.hc.pronto .ir{color:var(--g400)}

/* ══ PROPÓSITO ══ */
.proposito{background:var(--hueso);padding:58px 0}
.proposito h2{font-size:22px;font-weight:900;color:var(--tinta);margin-bottom:14px}
.proposito p{font-size:17px;color:var(--g500);line-height:1.75;max-width:80ch}

/* ══ PIE ══ */


.pie .cita span{display:block;font-family:var(--sans);font-style:normal;font-size:12px;font-weight:900;letter-spacing:2px;color:var(--calipso);margin-top:12px}


/* ══ RESPONSIVE ══ */


@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}


/* ══════ SECCIONES, SERIE Y PUBLICACIÓN ══════ */
/* ----------------------------------------------
   SABIDURÍA Y REVELACIÓN — hoja de estilos base
   Compartida por el home y todas las páginas internas.
   ---------------------------------------------- */

:root{
  /* escala de grises azulados */
  --negro:#080C12; --tinta:#0D1117; --petroleo:#14212B; --pizarra:#1D3440;
  --verde:#16303A; --noche:#101B26; --hondo:#122430;
  --g600:#2A4553; --g500:#3A5666; --g400:#546B7A; --g300:#7A8C99;
  --g200:#A3B0BA; --g100:#CBD3DA; --g050:#E9EDF0;
  --hueso:#F5F3EE; --marfil:#EDEFEF; --blanco:#FFFFFF;

  /* acentos — claro para fondo oscuro, oscuro para fondo claro */
  --calipso:#8FCFC6; --calipso-o:#1F7A6B;
  --celeste:#A8C8DC; --celeste-o:#356484;
  --arena:#E0C88F;   --arena-o:#8A6520;
  --terra:#D99C7A;   --terra-o:#A65635;

  --sans:'Lato',system-ui,-apple-system,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --ancho:1280px;
  --lectura:74ch;      /* tope de línea para texto largo */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--tinta);color:var(--g050);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.env{max-width:var(--ancho);margin:0 auto;padding:0 30px}
::selection{background:var(--arena);color:var(--tinta)}
:focus-visible{outline:2px solid var(--arena);outline-offset:3px}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* -- salto al contenido -- */


/* --- BARRA SUPERIOR --- */
.alta{background:var(--negro);border-bottom:.5px solid var(--g600);height:52px;
  overflow:hidden;transition:height .28s ease,opacity .2s ease;will-change:height}
.alta .env{display:flex;align-items:center;justify-content:space-between;height:52px;gap:24px}
.tend{display:flex;align-items:center;gap:14px;min-width:0}
.tend b{color:var(--arena);font-weight:900;letter-spacing:1.6px;font-size:13px;white-space:nowrap}
.tend a{color:var(--g100);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tend a:hover{color:var(--blanco)}
.alta-d{display:flex;align-items:center;gap:20px}
.alta-d a{color:var(--g200);display:flex;transition:color .2s}
.alta-d a:hover{color:var(--arena)}

/* --- CABECERA --- */
.cab{position:sticky;top:0;z-index:60;background:var(--petroleo);border-bottom:.5px solid var(--g600)}
.cab .env{display:flex;align-items:center;justify-content:space-between;gap:28px;
  height:96px;transition:height .28s ease;will-change:height}
.logo img{height:58px;width:auto;object-fit:contain;transition:height .28s ease}
nav ul{display:flex;list-style:none;gap:24px;align-items:center}
nav a{font-size:13.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--g100);padding:7px 0;border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;white-space:nowrap}
nav a:hover{color:var(--blanco);border-color:var(--arena)}
nav a.act{color:var(--arena);border-color:var(--arena);font-weight:900}
.lupa{display:flex;align-items:center;color:var(--g200);background:none;border:none;
  cursor:pointer;padding:4px;transition:color .2s}
.lupa:hover{color:var(--arena)}
.hamb{display:none;background:none;border:none;color:var(--g100);font-size:28px;cursor:pointer;line-height:1}
body.baja .alta{height:0;opacity:0;border-bottom-color:transparent}
body.baja .cab .env{height:66px}
body.baja .logo img{height:40px}

/* --- MIGAS --- */
.migas{background:var(--negro);border-bottom:.5px solid var(--g600);padding:13px 0}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px}
.migas a{color:var(--g300);transition:color .2s}
.migas a:hover{color:var(--arena)}
.migas .sep{color:var(--g500);font-size:12px}
.migas [aria-current]{color:var(--g100);font-weight:700}

/* --- CABECERA DE SECCIÓN --- */
.portico{position:relative;overflow:hidden;background:var(--negro)}
.portico-fondo{position:absolute;inset:0;z-index:0}
.portico-fondo img{transform:scale(1.25);filter:blur(38px) brightness(.34) saturate(1.1)}
.portico-fondo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,12,18,.94) 0%,rgba(8,12,18,.7) 60%,rgba(8,12,18,.5) 100%)}
.portico .env{position:relative;z-index:2;padding:62px 30px 58px}
.portico h1{font-size:clamp(30px,4vw,44px);font-weight:900;color:var(--blanco);
  line-height:1.12;letter-spacing:-.5px;max-width:20ch}
.portico .lema{margin-top:18px;font-size:18px;color:var(--g200);line-height:1.65;max-width:62ch}
.portico .cuenta{margin-top:24px;font-size:13.5px;font-weight:700;letter-spacing:1.4px;color:var(--g300)}
.tira{width:46px;height:3px;border-radius:2px;margin-bottom:16px}

/* --- FILTROS --- */
.filtros{background:var(--pizarra);border-bottom:.5px solid var(--g600);
  position:sticky;top:96px;z-index:40;transition:top .28s ease}
body.baja .filtros{top:66px}
.filtros .env{display:flex;align-items:center;gap:16px;padding:14px 30px;
  overflow-x:auto;scrollbar-width:none}
.filtros .env::-webkit-scrollbar{display:none}
.chip{font-size:13px;font-weight:700;letter-spacing:.6px;color:var(--g200);
  border:.5px solid var(--g500);padding:9px 17px;border-radius:20px;
  white-space:nowrap;cursor:pointer;background:none;font-family:var(--sans);transition:all .2s}
.chip:hover{border-color:var(--g300);color:var(--g050)}
.chip.on{background:var(--arena);border-color:var(--arena);color:var(--tinta);font-weight:900}
.buscar-mini{margin-left:auto;display:flex;align-items:center;gap:9px;
  border:.5px solid var(--g500);border-radius:20px;padding:8px 16px;min-width:210px}
.buscar-mini.ancho{margin:0;width:100%;max-width:420px;padding:11px 18px}
.buscar-mini input{background:none;border:none;color:var(--g050);font-family:var(--sans);
  font-size:14px;width:100%;outline:none}
.buscar-mini input::placeholder{color:var(--g400)}
.buscar-mini svg{color:var(--g400);flex-shrink:0}

/* --- CUERPO DE SECCIÓN --- */
.cuerpo-sec{padding:56px 0 76px;background:var(--hueso);color:var(--g500)}
.rotulo{font-size:13px;font-weight:900;letter-spacing:2px;color:var(--g400);margin-bottom:22px}

.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.r5{grid-template-columns:repeat(5,1fr)}

/* -- tarjeta de publicación -- */


.sec{font-size:11px;font-weight:900;letter-spacing:1.8px;margin-bottom:9px}


/* -- tarjeta destacada de sección -- */
.destacada{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;
  background:var(--petroleo);border-radius:7px;overflow:hidden;margin-bottom:48px}
.destacada .foto{aspect-ratio:16/9;background:var(--negro)}
.destacada .interior{padding:34px 34px 34px 4px;display:flex;flex-direction:column;justify-content:center}
.destacada h2{font-size:clamp(23px,2.6vw,31px);font-weight:900;color:var(--blanco);
  line-height:1.2;margin-bottom:14px}
.destacada p{font-size:16px;color:var(--g200);line-height:1.65;margin-bottom:20px}
.boton{display:inline-flex;align-items:center;gap:10px;background:var(--arena);color:var(--tinta);
  font-weight:900;font-size:13.5px;letter-spacing:1.3px;padding:14px 26px;border-radius:3px;
  align-self:flex-start;transition:filter .2s,transform .1s}
.boton:hover{filter:brightness(1.08)}
.boton:active{transform:translateY(1px)}
.boton.hueco{background:none;border:.5px solid var(--g500);color:var(--g100)}
.boton.hueco:hover{border-color:var(--arena);color:var(--arena);filter:none}

/* -- carátula de serie -- */


.serie:hover .foto img{transform:scale(1.05)}


/* -- grupo de series (Antiguo / Nuevo) -- */
.grupo{margin-bottom:52px}
.grupo:last-child{margin-bottom:0}
.grupo-tit{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;
  padding-bottom:13px;border-bottom:.5px solid var(--g100)}
.grupo-tit h2{font-size:20px;font-weight:900;color:var(--tinta);letter-spacing:.3px}
.grupo-tit span{font-size:13.5px;color:var(--g300)}

/* -- aviso de lo que viene -- */
.en-camino{margin-top:36px;padding:20px 24px;border:.5px dashed var(--g100);
  border-radius:6px;font-size:15px;color:var(--g400);line-height:1.6;background:rgba(255,255,255,.5)}
.en-camino b{color:var(--tinta);font-weight:900}

/* --- PAGINADO --- */
.paginado{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:56px;flex-wrap:wrap}
.paginado a,.paginado span{min-width:42px;height:42px;display:flex;align-items:center;
  justify-content:center;border:.5px solid var(--g100);border-radius:4px;background:var(--blanco);
  font-size:15px;font-weight:700;color:var(--g500);padding:0 12px;transition:all .2s}

.paginado .act{background:var(--arena-o);border-color:var(--arena-o);color:var(--blanco);font-weight:900}
.paginado .puntos{border:none;background:none;color:var(--g300)}

/* --- CIERRE: no dejar callejón sin salida --- */
.salidas{background:var(--negro);border-top:.5px solid var(--g600);padding:52px 0}
.salidas h2{font-size:19px;font-weight:900;color:var(--g050);margin-bottom:22px}
.rej-salidas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.salida{border:.5px solid var(--g600);border-radius:6px;padding:22px 24px;transition:all .25s}
.salida:hover{border-color:var(--arena);transform:translateY(-2px)}
.salida .sec{margin-bottom:7px}
.salida h3{font-size:17px;font-weight:700;color:var(--g050);margin-bottom:7px}
.salida p{font-size:14.5px;color:var(--g300);line-height:1.55}

/* --- PIE --- */
.pie{background:var(--negro);padding:62px 0 30px;border-top:.5px solid var(--g600)}
.pcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px;
  padding-bottom:34px;border-bottom:.5px solid var(--g600)}
.pcols h4{font-size:13px;font-weight:900;letter-spacing:2px;color:var(--calipso);margin-bottom:17px}
.pcols li{list-style:none;margin-bottom:11px}
.pcols li a{font-size:15.5px;color:var(--g200)}
.pcols li a:hover{color:var(--arena)}
.pie .marca img{height:50px;width:auto;object-fit:contain;margin-bottom:17px}
.pie .cita{font-family:var(--sans);font-style:italic;font-size:16.5px;color:var(--g100);
  line-height:1.65;max-width:46ch}
.pie .cita span{display:block;font-style:normal;font-size:12px;font-weight:900;
  letter-spacing:2px;color:var(--calipso);margin-top:12px}
.predes{display:flex;gap:11px;margin-top:24px}
.predes a{width:42px;height:42px;border-radius:50%;border:.5px solid var(--g500);
  display:flex;align-items:center;justify-content:center;color:var(--g200);transition:all .2s}
.predes a:hover{border-color:var(--arena);color:var(--arena)}
.pbajo{padding-top:26px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cred{font-size:15px;color:var(--g200)}
.cred b{font-weight:900;color:var(--arena)}
.cred .canal-n{font-weight:900;color:var(--hueso)}
.anio{font-size:14px;color:var(--g300)}

/* --- RESPONSIVE --- */


@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}

/* ----------------------------------------------
   PÁGINA DE SERIE — el universo de un libro
   ---------------------------------------------- */

.serie-portico{position:relative;overflow:hidden;background:var(--negro)}
.serie-portico .fondo{position:absolute;inset:0;z-index:0}
.serie-portico .fondo img{transform:scale(1.3);filter:blur(48px) brightness(.3) saturate(1.15)}
.serie-portico .fondo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,12,18,.5) 0%,rgba(8,12,18,.88) 55%,rgba(8,12,18,.96) 100%)}
.serie-portico .env{position:relative;z-index:2;padding:56px 30px;
  display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start}
.serie-caratula{border-radius:7px;overflow:hidden;box-shadow:0 22px 54px -16px rgba(0,0,0,.8)}
.serie-caratula img{aspect-ratio:1/1}
.serie-ficha{padding-top:4px}
.serie-ficha .sec{margin-bottom:14px}
.serie-ficha h1{font-size:clamp(32px,4.4vw,50px);font-weight:900;color:var(--blanco);
  line-height:1.1;letter-spacing:-.6px;margin-bottom:8px}
.serie-datos{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:14px;color:var(--g300);margin-bottom:20px}
.serie-datos .punto{color:var(--g500)}
.serie-ficha .resumen{font-size:17px;color:var(--g200);line-height:1.7;max-width:60ch;margin-bottom:26px}
.serie-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* barra de avance */
.avance{margin-top:24px;max-width:340px}
.avance .barra{height:4px;background:rgba(233,237,240,.14);border-radius:2px;overflow:hidden}
.avance .barra i{display:block;height:100%;background:var(--calipso);border-radius:2px}
.avance p{margin-top:9px;font-size:13px;color:var(--g300)}

/* lista de episodios */
.episodios{background:var(--hueso);padding:52px 0 72px;color:var(--g500)}
.eps-cab{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:26px;flex-wrap:wrap}
.eps-cab h2{font-size:22px;font-weight:900;color:var(--tinta)}
.eps-cab .nota{font-size:14px;color:var(--g300)}
.lista-eps{display:flex;flex-direction:column;gap:2px}
.ep{display:grid;grid-template-columns:52px 190px 1fr auto;gap:22px;align-items:center;
  background:var(--blanco);padding:14px 22px 14px 14px;border-radius:6px;
  transition:transform .2s,box-shadow .2s}
.ep:hover{transform:translateX(4px);box-shadow:0 4px 16px rgba(13,17,23,.1)}
.ep .num{font-size:22px;font-weight:900;color:var(--g100);text-align:center;line-height:1}
.ep .mini{border-radius:4px;overflow:hidden;aspect-ratio:16/9;background:var(--negro)}
.ep h3{font-size:17px;font-weight:700;color:var(--tinta);line-height:1.35;margin-bottom:5px}
.ep p{font-size:14.5px;color:var(--g400);line-height:1.5}
.ep .dur{font-size:13.5px;font-weight:700;color:var(--g300);white-space:nowrap;
  display:flex;align-items:center;gap:7px}
.ep.visto .num{color:var(--calipso-o)}
.ep.proximo{background:rgba(255,255,255,.45);border:.5px dashed var(--g100)}
.ep.proximo h3{color:var(--g400)}
.ep.proximo .mini{opacity:.4}
.ep.proximo .dur{color:var(--g300)}

/* material de la serie */
.material{background:var(--petroleo);padding:52px 0}
.material h2{font-size:20px;font-weight:900;color:var(--g050);margin-bottom:22px}
.rej-mat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mat{border:.5px solid var(--g600);border-radius:6px;padding:22px 24px;
  display:flex;gap:15px;align-items:flex-start;transition:all .25s}
.mat:hover{border-color:var(--calipso);transform:translateY(-2px)}
.mat .ic{flex:0 0 38px;height:38px;border-radius:50%;border:.5px solid var(--calipso);
  display:flex;align-items:center;justify-content:center;color:var(--calipso)}
.mat h3{font-size:16px;font-weight:700;color:var(--g050);margin-bottom:5px}
.mat p{font-size:14px;color:var(--g300);line-height:1.5}


/* ----------------------------------------------
   PÁGINA DE PUBLICACIÓN
   ---------------------------------------------- */

.pub-portico{position:relative;overflow:hidden;background:var(--negro)}
.pub-portico .fondo{position:absolute;inset:0;z-index:0}
.pub-portico .fondo img{transform:scale(1.25);filter:blur(42px) brightness(.3) saturate(1.1)}
.pub-portico .fondo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,12,18,.82) 0%,rgba(8,12,18,.9) 100%)}
.pub-portico .env{position:relative;z-index:2;padding:52px 30px 46px;max-width:900px}
.pub-portico h1{font-size:clamp(28px,3.8vw,42px);font-weight:900;color:var(--blanco);
  line-height:1.14;letter-spacing:-.5px;margin-bottom:16px}
.pub-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:14px;color:var(--g300)}
.pub-meta .punto{color:var(--g500)}

/* -- video -- */
.pub-video{background:var(--negro);padding:0 0 8px}
.pub-video .marco{max-width:900px;margin:0 auto;padding:0 30px}
.pub-video .caja{position:relative;aspect-ratio:16/9;background:#000;
  border-radius:6px;overflow:hidden;box-shadow:0 16px 44px -14px rgba(0,0,0,.8)}
.pub-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pub-video .aviso{max-width:900px;margin:12px auto 0;padding:0 30px;
  font-size:13.5px;color:var(--g400);text-align:center}

/* -- cuerpo del texto -- */
.pub-cuerpo{background:var(--hueso);color:var(--g500);padding:56px 0 40px}
.pub-texto{max-width:74ch;margin:0 auto;padding:0 30px;font-size:18px;line-height:1.78}
.pub-texto>*+*{margin-top:22px}
.pub-texto p{color:#3A5666}
.pub-texto h2{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--tinta);
  line-height:1.25;margin-top:44px}
.pub-texto h3{font-size:20px;font-weight:900;color:var(--pizarra);margin-top:34px}
.pub-texto strong{font-weight:700;color:var(--pizarra)}
.pub-texto b{font-weight:700;color:var(--petroleo)}
.pub-texto em{font-style:italic;color:var(--g400)}
.pub-texto a{color:var(--calipso-o);border-bottom:1px solid rgba(31,122,107,.35)}
.pub-texto a:hover{border-color:var(--calipso-o)}
.pub-texto ol,.pub-texto ul{padding-left:26px}
.pub-texto li{margin-bottom:12px;color:#3A5666}
.pub-texto li::marker{color:var(--arena-o);font-weight:700}

/* cita bíblica destacada */
.cita-b{border-left:3px solid var(--arena-o);padding:6px 0 6px 22px;
  font-family:var(--serif);font-style:italic;font-size:19px;color:var(--g400);line-height:1.7}
.cita-b cite{display:block;font-family:var(--sans);font-style:normal;font-size:12.5px;
  font-weight:900;letter-spacing:1.6px;color:var(--arena-o);margin-top:10px}

/* -- imagen dentro del artículo, con pie -- */
figure.pub-fig{margin:38px auto;max-width:1000px}
figure.pub-fig .marco{border-radius:6px;overflow:hidden;background:var(--negro);cursor:zoom-in;
  box-shadow:0 4px 20px rgba(13,17,23,.16)}
figure.pub-fig img{width:100%;height:auto;display:block;transition:transform .4s}
figure.pub-fig .marco:hover img{transform:scale(1.02)}
figure.pub-fig figcaption{margin-top:12px;font-size:14px;color:var(--g400);
  line-height:1.6;padding:0 4px}
figure.pub-fig figcaption b{color:var(--pizarra);font-weight:700}
figure.pub-fig .fuente{display:block;margin-top:5px;font-size:12.5px;color:var(--g300);font-style:italic}

/* ampliar imagen */
.lupa-fondo{position:fixed;inset:0;z-index:300;background:rgba(8,12,18,.94);
  display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}

.lupa-fondo img{max-width:100%;max-height:88vh;width:auto;height:auto;
  border-radius:4px;object-fit:contain}
.lupa-fondo .cerrar{position:absolute;top:18px;right:22px;width:44px;height:44px;
  border-radius:50%;border:.5px solid var(--g500);background:rgba(8,12,18,.7);
  color:var(--g100);font-size:22px;cursor:pointer;line-height:1}
.lupa-pie{position:absolute;bottom:20px;left:0;right:0;text-align:center;
  color:var(--g200);font-size:14px;padding:0 30px}

/* -- fuentes del artículo -- */
.pub-fuentes{max-width:74ch;margin:44px auto 0;padding:26px 30px 0;
  border-top:.5px solid var(--g100)}
.pub-fuentes h2{font-size:12.5px;font-weight:900;letter-spacing:2px;
  color:var(--g300);margin-bottom:16px}
.pub-fuentes li{list-style:none;font-size:14.5px;color:var(--g400);
  line-height:1.65;margin-bottom:10px;padding-left:18px;position:relative}
.pub-fuentes li::before{content:'';position:absolute;left:0;top:10px;
  width:6px;height:6px;border-radius:50%;background:var(--arena-o)}

/* -- compartir -- */
.pub-compartir{background:var(--hueso);padding:0 0 52px}
.pub-compartir .env{max-width:74ch;padding:0 30px}
.pub-compartir h2{font-size:12.5px;font-weight:900;letter-spacing:2px;
  color:var(--g300);margin-bottom:15px}
.redes-c{display:flex;flex-wrap:wrap;gap:10px}
.redes-c a,.redes-c button{display:inline-flex;align-items:center;gap:9px;
  border:.5px solid var(--g100);background:var(--blanco);color:var(--g500);
  font-family:var(--sans);font-size:14px;font-weight:700;
  padding:11px 18px;border-radius:4px;cursor:pointer;transition:all .2s}
.redes-c a:hover,.redes-c button:hover{border-color:var(--pizarra);color:var(--tinta);
  transform:translateY(-2px)}
.redes-c .wa:hover{border-color:#25D366;color:#128C4A}
.redes-c .fb:hover{border-color:#1877F2;color:#1877F2}
.redes-c .tg:hover{border-color:#2AABEE;color:#1E8BC3}
#avisoCopia{font-size:13.5px;color:var(--calipso-o);font-weight:700;
  margin-top:12px;opacity:0;transition:opacity .3s}
#avisoCopia.on{opacity:1}

/* -- navegación de serie -- */
.serie-nav{background:var(--petroleo);padding:44px 0}
.serie-nav .env{max-width:1000px}
.serie-nav .rot{font-size:12px;font-weight:900;letter-spacing:2px;
  color:var(--calipso);margin-bottom:8px}
.serie-nav h2{font-size:21px;font-weight:900;color:var(--g050);margin-bottom:20px}
.serie-nav h2 a:hover{color:var(--calipso)}
.eps-mini{display:flex;flex-direction:column;gap:2px;margin-bottom:24px}
.epm{display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:center;
  padding:11px 14px;border-radius:5px;font-size:15px;color:var(--g200);transition:background .2s}
.epm:hover{background:rgba(233,237,240,.05)}
.epm .n{font-weight:900;color:var(--g500);text-align:center}
.epm .d{font-size:13px;color:var(--g400)}
.epm.aqui{background:rgba(143,207,198,.09);color:var(--blanco);font-weight:700}
.epm.aqui .n{color:var(--calipso)}
.epm.aqui .marca{font-size:11px;font-weight:900;letter-spacing:1.4px;color:var(--calipso)}
.ant-sig{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding-top:22px;border-top:.5px solid var(--g600)}
.as{border:.5px solid var(--g600);border-radius:6px;padding:18px 20px;transition:all .25s}
.as:hover{border-color:var(--calipso);transform:translateY(-2px)}
.as .rot{font-size:11px;font-weight:900;letter-spacing:1.6px;color:var(--g400);margin-bottom:7px}
.as h3{font-size:16.5px;font-weight:700;color:var(--g050);line-height:1.35}
.as.der{text-align:right}


/* --- 404 --- */
.err{min-height:62vh;display:flex;align-items:center;background:var(--negro);
  position:relative;overflow:hidden}
.err .fondo{position:absolute;inset:0;z-index:0}
.err .fondo img{transform:scale(1.3);filter:blur(52px) brightness(.26)}
.err .env{position:relative;z-index:2;padding:70px 30px;max-width:760px}
.err .num{font-size:13px;font-weight:900;letter-spacing:3px;color:var(--arena);margin-bottom:18px}
.err h1{font-size:clamp(28px,4vw,42px);font-weight:900;color:var(--blanco);
  line-height:1.16;margin-bottom:18px;letter-spacing:-.5px}
.err p{font-size:17.5px;color:var(--g200);line-height:1.7;max-width:56ch;margin-bottom:30px}
.err .acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ----------------------------------------------
   BUSCADOR DEL SITIO
   ---------------------------------------------- */
.busq-modal{position:fixed;inset:0;z-index:200;background:rgba(8,12,18,.9);
  backdrop-filter:blur(5px);display:none;padding:9vh 24px 24px}
.busq-modal.on{display:block}
.busq-caja{max-width:720px;margin:0 auto}
.busq-campo{display:flex;align-items:center;gap:14px;background:var(--petroleo);
  border:.5px solid var(--g500);border-radius:6px;padding:16px 20px}
.busq-campo svg{color:var(--g300);flex-shrink:0}
.busq-campo input{flex:1;background:none;border:none;color:var(--g050);
  font-family:var(--sans);font-size:19px;outline:none}
.busq-campo input::placeholder{color:var(--g400)}
.busq-campo kbd{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--g400);
  border:.5px solid var(--g500);border-radius:3px;padding:3px 7px}
.busq-sug{margin-top:14px;font-size:13.5px;color:var(--g400)}
.busq-sug b{color:var(--g200);font-weight:700}
.busq-sug a{color:var(--calipso);margin-right:14px;white-space:nowrap}
.busq-res{margin-top:16px;background:var(--petroleo);border:.5px solid var(--g600);
  border-radius:6px;max-height:56vh;overflow-y:auto}
.busq-res:empty{display:none}
.busq-r{display:block;padding:15px 20px;border-bottom:.5px solid var(--g600);transition:background .18s}
.busq-r:last-child{border-bottom:none}
.busq-r:hover,.busq-r.sel{background:rgba(233,237,240,.06)}
.busq-r .s{font-size:10.5px;font-weight:900;letter-spacing:1.6px;margin-bottom:5px}
.busq-r h3{font-size:16.5px;font-weight:700;color:var(--g050);margin-bottom:4px;line-height:1.35}
.busq-r p{font-size:14px;color:var(--g300);line-height:1.5}
.busq-r mark{background:rgba(224,200,143,.24);color:var(--arena);border-radius:2px;padding:0 2px}
.busq-vacio{padding:30px 20px;text-align:center;color:var(--g400);font-size:15px}
.busq-cerrar{position:absolute;top:20px;right:24px;width:42px;height:42px;border-radius:50%;
  border:.5px solid var(--g500);background:rgba(8,12,18,.6);color:var(--g100);
  font-size:20px;cursor:pointer;line-height:1}
.busq-cerrar:hover{border-color:var(--arena);color:var(--arena)}


/* ----------------------------------------------
   CONTACTO
   ---------------------------------------------- */
.cont-zona{background:var(--hueso);padding:56px 0 76px}
.cont-rej{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:start}
.hoja{background:var(--blanco);border-radius:6px;padding:38px 38px 34px;
  box-shadow:0 2px 16px rgba(13,17,23,.08);position:relative;overflow:hidden}
.hoja::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--arena-o) 0%,var(--terra-o) 50%,var(--calipso-o) 100%)}
.hoja h2{font-size:23px;font-weight:900;color:var(--tinta);margin-bottom:8px}
.hoja .sub{font-size:15px;color:var(--g400);margin-bottom:30px;line-height:1.6}
.campo{margin-bottom:24px}
.campo label{display:block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--arena-o);font-weight:900;margin-bottom:7px}
.campo input,.campo select,.campo textarea{width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--g100);color:var(--tinta);font-family:var(--sans);
  font-size:16.5px;padding:9px 2px 11px;border-radius:0;transition:border-color .22s,box-shadow .22s}
.campo textarea{min-height:130px;resize:vertical;line-height:1.7}
.campo select{appearance:none;cursor:pointer;padding-right:26px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' stroke='%238A6520' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 2px center}
.campo input::placeholder,.campo textarea::placeholder{color:var(--g300)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;
  border-bottom-color:var(--arena-o);box-shadow:0 1px 0 var(--arena-o)}
.campo .error{display:none;font-size:13px;color:var(--terra-o);margin-top:6px;font-weight:700}
.campo.mal input,.campo.mal select,.campo.mal textarea{border-bottom-color:var(--terra-o)}
.campo.mal .error{display:block}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.firma{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:32px}
.reserva{font-size:13px;color:var(--g300);max-width:30ch;line-height:1.55}
.aviso-form{margin-bottom:24px;padding:14px 18px;border-radius:4px;font-size:15px;
  display:none;line-height:1.55}
.aviso-form.ok{display:block;background:rgba(31,122,107,.08);
  border-left:3px solid var(--calipso-o);color:#186356}
.aviso-form.mal{display:block;background:rgba(166,86,53,.08);
  border-left:3px solid var(--terra-o);color:var(--terra-o)}
.cont-lado h2{font-size:20px;font-weight:900;color:var(--tinta);margin-bottom:10px}
.cont-lado .sub{font-size:15px;color:var(--g400);margin-bottom:28px;line-height:1.6}
.via{display:flex;gap:15px;align-items:flex-start;padding:19px 0;
  border-top:.5px solid var(--g100)}
.via:last-of-type{border-bottom:.5px solid var(--g100)}
.via-ic{flex:0 0 38px;height:38px;border-radius:50%;border:.5px solid var(--arena-o);
  display:flex;align-items:center;justify-content:center;color:var(--arena-o);
  background:rgba(138,101,32,.05)}
.via h3{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--arena-o);font-weight:900;margin-bottom:5px}
.via p{font-size:15px;color:var(--g400);line-height:1.55}
.via a{color:var(--pizarra);border-bottom:1px solid var(--g100);word-break:break-word}
.via a:hover{color:var(--arena-o);border-color:var(--arena-o)}
.atajos{margin-top:34px}
.atajos h3{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--calipso-o);font-weight:900;margin-bottom:14px}
.atajos a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;font-size:15.5px;color:var(--pizarra);
  border-bottom:.5px solid var(--g100);transition:color .2s,padding-left .2s}
.atajos a:hover{color:var(--arena-o);padding-left:7px}
.atajos span{color:var(--g300)}


/* elementos que aún no llevan a ninguna parte */
.paginado .inactivo{opacity:.42;cursor:default}
.pcols li .pronto{font-size:15.5px;color:var(--g400);opacity:.6;cursor:default}


/* ══════════════════════════════════════════════════════
   CONTEXTO CLARO
   Las páginas de sección, búsqueda y archivo no tienen
   franjas: su fondo es siempre claro. Se les declara el
   contexto una vez, y las tarjetas heredan los colores
   correctos sin depender de nada más.
   ══════════════════════════════════════════════════════ */
.cuerpo-sec .tj,
.cuerpo-sec .serie{background:var(--blanco);box-shadow:0 1px 3px rgba(13,17,23,.08)}
.cuerpo-sec .tj:hover,
.cuerpo-sec .serie:hover{box-shadow:0 8px 22px rgba(13,17,23,.12)}
.cuerpo-sec .tj h3,
.cuerpo-sec .serie h3{color:var(--tinta)}
.cuerpo-sec .tj p,
.cuerpo-sec .serie p{color:var(--g400)}
.cuerpo-sec .tj .meta{color:var(--g400)}

/* ══════════════════════════════════════════════════════
   EL MENÚ, CUANDO HAY MUCHAS SECCIONES

   Con nueve o diez categorías el menú no cabe en una
   línea. En vez de desbordarse fuera de la pantalla, se
   desliza de lado con el dedo o con la rueda del mouse.
   ══════════════════════════════════════════════════════ */
.cab .env{gap:20px}
.cab nav{min-width:0;flex:1 1 auto;overflow:visible}
.cab nav ul{flex-wrap:nowrap;overflow:visible}
.cab nav a{white-space:nowrap}

/* ── LAS FUENTES DE UNA PUBLICACIÓN ──
   Si escribes un encabezado que diga «Fuentes», «Referencias» o
   «Bibliografía», el tema separa todo lo que va debajo en su propio
   bloque, con letra más chica. Se distingue del estudio sin cortarlo. */
.fuentes{
  margin-top:52px;
  padding:26px 28px 22px;
  background:var(--hueso);
  border-radius:6px;
  border-left:3px solid var(--g100);
}
.fuentes h2,.fuentes h3{
  font-family:var(--sans)!important;
  font-size:12.5px!important;
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--g400);
  margin:0 0 16px!important;
}
.fuentes p,.fuentes li{
  font-size:14.5px;
  line-height:1.66;
  color:var(--g400);
  margin-bottom:9px;
}
.fuentes a{color:var(--arena-o)}
.fuentes ul,.fuentes ol{margin:0 0 12px 20px}

/* El buscador del menú solo existe en teléfono. En escritorio la
   lupa está en la cabecera, así que aquí no se muestra. */
.menu-buscar{display:none}

/* El botón que recoge las secciones que no caben */
.mas-menu{position:relative;flex:0 0 auto}
.mas-menu > a{color:var(--g200)}
.mas-menu.abierto > a{color:var(--arena)}
.mas-menu .sub-menu{display:none;position:absolute;top:100%;right:0;left:auto;
  min-width:216px;background:var(--petroleo);border:.5px solid var(--g600);
  border-radius:5px;padding:8px 0;flex-direction:column;z-index:80;
  box-shadow:0 12px 30px rgba(8,12,18,.45);list-style:none;margin:0}
.mas-menu.abierto .sub-menu{display:flex}
.mas-menu .sub-menu li{width:100%}
.mas-menu .sub-menu a{display:block;padding:10px 18px;border:none;
  font-size:13px;letter-spacing:.6px}
.mas-menu .sub-menu a:hover{background:rgba(233,237,240,.07);color:var(--arena)}

/* El nombre del sitio, cuando no hay logo, no puede comerse el menú */
.cab .logo{flex:0 1 auto;min-width:0;max-width:38%}
.cab .logo-texto{overflow:hidden;text-overflow:ellipsis;display:block}


/* Nada se sale de la pantalla, pase lo que pase */
html,body{overflow-x:hidden;max-width:100%}
img,video,iframe,table{max-width:100%}

/* ══════════════════════════════════════════════════════
   AJUSTES PROPIOS DE WORDPRESS
   ══════════════════════════════════════════════════════ */

/* El menú que arma WordPress trae su propia estructura */
.cab nav ul{list-style:none;display:flex;gap:26px;align-items:center;margin:0;padding:0}
.cab nav li{position:relative}
.cab nav .act,.cab nav .current-menu-item > a,.cab nav .current-menu-parent > a{
  color:var(--arena);border-bottom:2px solid var(--arena)}

/* Submenús */
.cab nav .sub-menu{display:none;position:absolute;top:100%;left:-14px;min-width:214px;
  background:var(--petroleo);border:.5px solid var(--g600);border-radius:5px;
  padding:8px 0;flex-direction:column;gap:0;z-index:70;
  box-shadow:0 12px 30px rgba(8,12,18,.45)}
.cab nav li:hover > .sub-menu,.cab nav li:focus-within > .sub-menu{display:flex}
.cab nav .sub-menu a{padding:9px 18px;text-transform:none;letter-spacing:0;
  font-weight:400;font-size:15px;border:none}
.cab nav .sub-menu a:hover{background:rgba(233,237,240,.07);color:var(--arena)}
.cab nav .menu-item-has-children > a::after{content:' ▾';font-size:10px;opacity:.6}

/* El pie */
.pcols ul{list-style:none;margin:0;padding:0}
.pcols li{margin-bottom:11px}
.pcols li a{font-size:15.5px;color:var(--g200);transition:color .2s,padding-left .2s;display:inline-block}
.pcols li a:hover{color:var(--arena);padding-left:5px}

/* Paginado */
.paginado{display:flex;justify-content:center;align-items:center;gap:9px;
  margin-top:52px;flex-wrap:wrap}
.paginado a,.paginado .act,.paginado .puntos{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:4px;font-size:15px;font-weight:700;
  border:.5px solid var(--g100);color:var(--g500);background:var(--blanco);transition:all .2s}
.paginado a:hover{border-color:var(--arena-o);color:var(--arena-o)}
.paginado .act{background:var(--arena-o);border-color:var(--arena-o);color:var(--blanco)}
.paginado .puntos{border:none;background:none;opacity:.45}

/* Contenido del editor */
.pub-texto > *:first-child{margin-top:0}
.pub-texto h4{font-size:17.5px;font-weight:900;color:var(--pizarra);margin:30px 0 12px}
.pub-texto hr{border:0;border-top:.5px solid var(--g100);margin:44px 0}
.pub-texto code{background:var(--hueso);padding:2px 6px;border-radius:3px;
  font-size:15px;color:var(--pizarra)}
.pub-texto .alignleft{float:left;margin:8px 30px 22px 0;max-width:46%}
.pub-texto .alignright{float:right;margin:8px 0 22px 30px;max-width:46%}
.pub-texto .aligncenter{margin-left:auto;margin-right:auto}
.pub-texto .alignwide{margin-left:-70px;margin-right:-70px;max-width:none}
.pub-texto .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}


/* Videos embebidos */
.video-marco,.wp-block-embed__wrapper{position:relative;padding-top:56.25%;
  border-radius:6px;overflow:hidden;margin:32px 0;background:var(--negro)}
.video-marco iframe,.wp-block-embed__wrapper iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0}

/* Tablas */
.pub-texto table{width:100%;border-collapse:collapse;margin:32px 0;font-size:15.5px}
.pub-texto th{background:var(--hueso);text-align:left;padding:12px 15px;
  font-weight:900;color:var(--pizarra);border-bottom:2px solid var(--g100)}
.pub-texto td{padding:12px 15px;border-bottom:.5px solid var(--g100);color:var(--g500)}

/* Lo que aún no existe */
.pronto,.hc.pronto{opacity:.55;cursor:default}
.hc.pronto:hover{transform:none;border-color:inherit}
.pcols .pronto{font-size:15.5px;color:var(--g400)}

/* Ampliar imágenes del texto */
.lupa-fondo{position:fixed;inset:0;z-index:210;background:rgba(8,12,18,.94);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  padding:5vh 4vw;cursor:zoom-out}
.lupa-fondo.on{display:flex}
.lupa-fondo img{max-width:100%;max-height:82vh;width:auto;height:auto;
  object-fit:contain;border-radius:4px}
.lupa-fondo .lupa-pie{margin-top:16px;color:var(--g200);font-size:15px;
  text-align:center;max-width:70ch}
.lupa-fondo .cerrar{position:absolute;top:22px;right:26px;width:44px;height:44px;
  border-radius:50%;border:.5px solid var(--g500);background:rgba(8,12,18,.6);
  color:var(--g100);font-size:21px;cursor:pointer;line-height:1}
.lupa-fondo .cerrar:hover{border-color:var(--arena);color:var(--arena)}

/* Salto al contenido */
.saltar{position:absolute;left:-9999px;background:var(--arena);color:var(--tinta);
  padding:12px 20px;font-weight:900;z-index:99}
.saltar:focus{left:12px;top:12px}

/* Solo para lectores de pantalla */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Cuando no hay logo cargado */
.logo-texto{font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--blanco);letter-spacing:.3px;line-height:1.2;white-space:nowrap}
.pie .logo-texto{font-size:19px;margin-bottom:16px;white-space:normal}

/* Al imprimir, solo el texto */
@media print{
  .alta,.cab,.pie,.pub-compartir,.salidas,.serie-nav,.migas,.busq-modal{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .pub-texto{max-width:100%}
  .pub-texto a::after{content:' (' attr(href) ')';font-size:9pt;color:#555}
}

/* ══════════════════════════════════════════════════════
   REJILLAS QUE SE AJUSTAN A LO QUE HAY

   Una sección recién empezada tiene una o dos
   publicaciones. Con una rejilla de cuatro columnas fijas
   quedarían tres cuartos de franja vacíos.

   Aquí la rejilla se adapta: con dos, dos columnas; con
   una, la tarjeta se pone horizontal y ocupa el ancho.
   ══════════════════════════════════════════════════════ */

.rej.r2{grid-template-columns:repeat(2,1fr)}

/* Una sola: tarjeta horizontal, foto a la izquierda */
.rej.r1{grid-template-columns:1fr}
.rej.r1 .tj{flex-direction:row;align-items:stretch}
.rej.r1 .tj .foto{flex:0 0 40%;aspect-ratio:16/10}
.rej.r1 .tj .cuerpo{justify-content:center;padding:26px 30px}
.rej.r1 .tj h3{font-size:22px;margin-bottom:12px}
.rej.r1 .tj p{font-size:16px}
.rej.r1 .tj .meta{margin-top:16px;padding-top:0}

/* Una sola serie: la carátula es cuadrada, así que se
   limita el ancho para que no quede gigante */
.rej.r1 .serie{flex-direction:row;align-items:stretch;display:flex}
.rej.r1 .serie .foto{flex:0 0 220px;aspect-ratio:1/1}
.rej.r1 .serie .cuerpo{display:flex;flex-direction:column;justify-content:center;padding:26px 30px}


/* ══════════════════════════════════════════════════════
   LOS LÍMITES

   Un tema es un sistema de medidas. Si el contenido no
   cabe dentro de ellas, deforma la caja que lo recibe.

   La maqueta se veía bien porque sus textos estaban
   escritos a medida. El contenido real no mide lo mismo,
   así que aquí se declara cuánto entra en cada lugar y
   qué pasa con lo que sobra: se corta con puntos
   suspensivos. El alto queda reservado siempre, tenga
   una línea o dos, para que todas las tarjetas midan
   igual y la franja no se descuadre.
   ══════════════════════════════════════════════════════ */

.recorte{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── TARJETA DE PUBLICACIÓN ── */
/* Título: 2 líneas. Descripción: 2 líneas. Siempre. */
.tj h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(2 * 1.34em);
}
.tj p:not(.sec):not(.meta){
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(2 * 1.6em);
}
.tj .sec{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── TARJETA DE SERIE ── */
.serie h4{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(2 * 1.3em)}
.serie p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* ── CABECERA DE FRANJA ── */
/* La descripción de la sección: 2 líneas y punto. */
.cabecilla .sub{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:62ch}
.cabecilla h2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* ── CARRUSEL ── */
.dia .txt h1,.dia .txt h2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.dia .txt p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.dia .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── PÓRTICO DE SECCIÓN ── */
.portico h1{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.portico .lema{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;max-width:70ch}

/* ── LISTA DE CLASES DE UNA SERIE ── */
.ep h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.ep p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* ── SALIDAS Y NAVEGACIÓN DE SERIE ── */
.salida h3,.salida p,.epm span:nth-child(2),.as h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* ── DESTACADA DE SECCIÓN ── */
.destacada h2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.destacada .interior > p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}

/* ── HERRAMIENTAS ── */
.hc h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(3 * 1.6em)}

/* ── BARRA SUPERIOR ── */
.tend a{max-width:min(58vw,640px)}

/* ── PIE ── */
.pie .cita{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden}

/* Ninguna palabra larga rompe su caja */
.tj h3,.serie h4,.cabecilla h2,.portico h1,.dia .txt h1,.dia .txt h2,
.ep h3,.salida h3,.destacada h2{overflow-wrap:anywhere}

/* ══════════════════════════════════════════════════════
   CADA IMAGEN TIENE SU CAJA

   Ninguna imagen decide el tamaño de nada. La caja se
   declara aquí con una medida fija; la imagen entra,
   se acomoda y lo que sobra se recorta por el centro.

   Así una foto vertical, una cuadrada y una panorámica
   producen exactamente el mismo hueco en la página. La
   franja no se descuadra según lo que subas.
   ══════════════════════════════════════════════════════ */

/* La regla general: llenar y recortar por el centro */
.foto,.mini,.dia-fondo,.dia-img,.serie-caratula,
.portico-fondo,.pub-portico .fondo,.serie-portico .fondo{
  overflow:hidden;
  position:relative;
}
.foto > img,.mini > img,.dia-fondo > img,.dia-img > img,
.serie-caratula > img,.portico-fondo > img,
.pub-portico .fondo > img,.serie-portico .fondo > img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}

/* ── LAS MEDIDAS ── */
.tj .foto{aspect-ratio:16/10}
.serie .foto{aspect-ratio:1/1}
.ep .mini{aspect-ratio:16/10;overflow:hidden}
.destacada .foto{aspect-ratio:16/9;overflow:hidden}
.salida .foto{aspect-ratio:16/10;overflow:hidden}

/* Carrusel: la imagen de la derecha manda el alto,
   así que se le fija la relación. La cuadrada usa 1/1
   pero con un ancho máximo, para que no crezca de más. */
.dia-img{aspect-ratio:16/9}
.dia-img.cuad{aspect-ratio:1/1;max-width:min(400px,38vw);margin-inline:auto}

/* Fondos que van detrás de un texto: ocupan la caja
   completa y nunca la estiran */
.dia-fondo,.portico-fondo,.pub-portico .fondo,.serie-portico .fondo{
  position:absolute;inset:0;
}

/* Carátula de serie: siempre cuadrada, con tope */
.serie-caratula{aspect-ratio:1/1;max-width:340px}

/* El carrusel no puede crecer más allá de esto,
   pase lo que pase con las imágenes */
.cartel{max-height:min(78vh,620px)}
.cartel .dia{max-height:min(78vh,620px)}


/* ── LAS IMÁGENES DENTRO DEL TEXTO SON DISTINTAS ──
   Aquí no se recorta nada: una foto dentro de una
   publicación se ve entera, porque es contenido, no
   decoración. Solo se le impide pasarse del ancho. */
.pub-texto img,
.pub-texto figure img,
.wp-block-image img{
  width:100%;height:auto;
  object-fit:contain;
  max-width:100%;
}
.pub-texto .wp-block-image,
.pub-texto figure{max-width:100%}

/* El logo tampoco se recorta: se ve completo */
.logo img,.marca img{width:auto;object-fit:contain}

/* ══════════════════════════════════════════════════════
   TODO LO QUE PUEDE VENIR DENTRO DE UNA PUBLICACIÓN

   El editor de WordPress permite meter cosas que la
   maqueta nunca tuvo: citas, tablas, listas numeradas,
   código, enlaces larguísimos. Cada una necesita su
   límite, o rompe el ancho de la columna de lectura.
   ══════════════════════════════════════════════════════ */

/* Ninguna palabra ni dirección larga rompe la columna */
.pub-texto,.pub-texto p,.pub-texto li,.pub-texto td,.pub-texto th,
.pub-texto h2,.pub-texto h3,.pub-texto h4,.pub-texto a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Citas */
.pub-texto blockquote{
  margin:36px 0;padding:4px 0 4px 26px;
  border-left:3px solid var(--arena);
  font-family:var(--serif);font-size:20px;font-style:italic;
  color:var(--g500);line-height:1.62;max-width:100%}
.pub-texto blockquote p:last-child{margin-bottom:0}
.pub-texto blockquote cite{display:block;margin-top:12px;font-family:var(--sans);
  font-style:normal;font-size:12px;font-weight:900;letter-spacing:2px;
  color:var(--arena-o);text-transform:uppercase}

/* Listas numeradas */
.pub-texto ol{margin:0 0 26px 24px}
.pub-texto ol li{margin-bottom:11px;line-height:1.75}

/* Bloques de código: se deslizan, no desbordan */
.pub-texto pre{
  background:var(--tinta);color:var(--g100);
  padding:18px 20px;border-radius:5px;margin:28px 0;
  overflow-x:auto;font-size:14.5px;line-height:1.6;
  max-width:100%;white-space:pre}
.pub-texto pre code{background:none;padding:0;color:inherit}

/* Tablas: en pantalla chica se deslizan de lado */
.pub-texto .tabla-marco{overflow-x:auto;margin:32px 0;max-width:100%}
.pub-texto .tabla-marco table{margin:0;min-width:520px}

/* Pies de imagen */
.pub-texto figcaption,.wp-element-caption{
  margin-top:11px;font-size:14px;color:var(--g400);
  line-height:1.55;padding-left:14px;border-left:2px solid var(--g100)}

/* Cualquier incrustado suelto */
.pub-texto iframe,.pub-texto embed,.pub-texto object,.pub-texto video{
  max-width:100%;border-radius:5px}

/* Listas de definición y detalles */
.pub-texto dl{margin:0 0 26px}
.pub-texto dt{font-weight:900;color:var(--pizarra);margin-top:16px}
.pub-texto dd{margin:4px 0 0 22px}
.pub-texto details{border:.5px solid var(--g100);border-radius:5px;
  padding:14px 18px;margin:24px 0}
.pub-texto summary{cursor:pointer;font-weight:700;color:var(--pizarra)}


/* ══════════════════════════════════════════════════════
   EL MISMO BORDE EN TODAS LAS PÁGINAS

   Da igual en qué página estés: el contenido empieza y
   termina a la misma distancia del borde. En pantallas
   chicas, 20 píxeles en todas sin excepción.
   ══════════════════════════════════════════════════════ */


/* Ningún elemento, venga de donde venga, pasa del ancho */
.env > *,.pub-texto > *{max-width:100%}

/* ══════════════════════════════════════════════════════
   PANTALLAS CHICAS — LO QUE FALTABA

   Tres medidas y no más:
     1120 px  portátil chico
      900 px  tableta
      560 px  teléfono

   Antes había cinco medidas distintas y entre una y otra
   el sitio quedaba a medio armar: unas cosas ya habían
   cambiado y otras no. Aquí cada componente cambia en el
   mismo punto que los demás.
   ══════════════════════════════════════════════════════ */


/* En pantallas muy angostas, nada se aprieta de más */


/* ══════════════════════════════════════════════════════
   LA ESCALERA DE LAS REJILLAS — LA PALABRA FINAL

   Antes cada rejilla bajaba por su lado: a 900 píxeles
   unas quedaban en dos columnas y otras en una, y había
   reglas que se contradecían en el mismo punto.

   Aquí baja todo junto, en la misma escalera:

     escritorio   4 columnas   3   2   1
     1120 px      3            3   2   1
      900 px      2            2   2   1
      560 px      1            1   1   1

   Esto va al final del archivo a propósito: manda sobre
   cualquier regla anterior.
   ══════════════════════════════════════════════════════ */


/* Las salidas del pie de página, en pantalla chica */


/* Los puntos del carrusel en escritorio.
   La maqueta los escribía como <span>; el tema los escribe como
   <button> para que se puedan pulsar con el teclado. Sin esta regla
   salían sin ningún estilo. */
.marcas .marca{
  width:38px;height:3px;padding:0;
  background:rgba(233,237,240,.26);
  border:none;border-radius:2px;
  cursor:pointer;transition:background .25s;
}
.marcas .marca.on{background:var(--arena)}
.marcas .marca:hover{background:rgba(233,237,240,.5)}

/* ══════════════════════════════════════════════════════
   HERRAMIENTAS: LA REJILLA SE AJUSTA A CUÁNTAS HAY

   Hoy son dos. Cuando el Diccionario exista serán tres.
   Ni la de dos se ve incompleta, ni la de tres apretada.
   ══════════════════════════════════════════════════════ */
.herr.h1{grid-template-columns:minmax(0,560px);justify-content:center}
.herr.h2{grid-template-columns:repeat(2,1fr)}
.herr.h3{grid-template-columns:repeat(3,1fr)}


/* ══════════════════════════════════════════════════════
   EL MENÚ DE MÓVIL

   La maqueta lo llama «abierto». El panel se desliza
   desde la derecha y ocupa la pantalla. Con un velo
   detrás, para que se entienda que el sitio está debajo
   y se cierre tocando fuera.
   ══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   SIEMPRE HAY CÓMO VOLVER

   En un teléfono, si el menú falla, el visitante queda
   atrapado. Estas son las salidas que no dependen de que
   el menú funcione.
   ══════════════════════════════════════════════════════ */


/* El botón del menú tiene que ser fácil de tocar */
.hamb{min-width:44px;min-height:44px;display:none;
  align-items:center;justify-content:center}


/* ══════════════════════════════════════════════════════════════════
   ▄▄▄  T E L É F O N O  ▄▄▄

   Un solo corte: 768 píxeles.

   Sobre 768 va el escritorio, y ahí entran las tablets en vertical y
   en horizontal. Nada de lo de arriba se toca.

   Bajo 768 vive todo lo de este bloque. Antes esto estaba repartido
   en veintinueve trozos con cuatro medidas distintas, y entre una y
   otra el sitio quedaba a medio armar.
   ══════════════════════════════════════════════════════════════════ */

@media(max-width:768px){

  /* ─────────────────────────────────────────────
     MÁRGENES: el mismo borde en todo el sitio
     ───────────────────────────────────────────── */
  .env{padding-left:20px;padding-right:20px}
  .pub-texto{padding-left:20px;padding-right:20px}

  /* ─────────────────────────────────────────────
     LETRA
     ───────────────────────────────────────────── */
  body{font-size:16px}
  .pub-texto{font-size:17px;line-height:1.72}
  .pub-texto h2{font-size:22px;margin:36px 0 14px}
  .pub-texto h3{font-size:18.5px;margin:28px 0 11px}
  .pub-texto blockquote{font-size:17.5px;padding-left:18px;margin:28px 0}

  .tj h3{font-size:17px;-webkit-line-clamp:3;min-height:0}
  .tj p:not(.sec):not(.meta){font-size:14.5px;-webkit-line-clamp:3;min-height:0}
  .tj .cuerpo{padding:16px 18px 20px}
  .serie h4{font-size:16.5px;min-height:0}

  .cabecilla h2{font-size:22px}
  .cabecilla .sub{font-size:15px;-webkit-line-clamp:3;max-width:100%}
  .portico h1{font-size:26px}
  .portico .lema{font-size:15.5px;-webkit-line-clamp:4}
  .portico .cuenta{font-size:11.5px;letter-spacing:1.2px}

  /* 16 px es el mínimo: bajo eso el teléfono hace acercamiento solo */
  input,select,textarea,.busq-campo input{font-size:16px}

  /* ─────────────────────────────────────────────
     FUERA: lo que en un teléfono estorba más de lo que aporta
     ───────────────────────────────────────────── */

  /* La barra de «LO ÚLTIMO»: 52 px de alto, el título cortado */
  .alta{display:none}


  /* El buscador sale de la cabecera y entra al menú */
  .cab .lupa{display:none}

  /* Detalles que en un teléfono solo ocupan */
  .ep p{display:none}
  .epm .d{display:none}
  .busq-campo kbd{display:none}
  .mas-menu{display:none!important}

  /* ─────────────────────────────────────────────
     CABECERA: se esconde al bajar, vuelve al subir
     ───────────────────────────────────────────── */
  /* Sin will-change ni transform permanente: cualquiera de los dos
     haría que el panel del menú, que es fijo, se posicione respecto
     a esta barra de 56 px en vez de respecto a la pantalla. */
  .cab{
    position:sticky;top:0;z-index:100;
    transition:transform .24s ease;
    background:var(--negro);
  }
  .cab.oculta{transform:translateY(-100%)}

  .cab .env{min-height:56px;gap:14px}

  .cab .logo{max-width:none;flex:1 1 auto;min-width:0;
    min-height:44px;display:flex;align-items:center}
  .cab .logo img{max-height:36px;width:auto}
  .cab .logo-texto{font-size:16px;line-height:1.25;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;overflow-wrap:anywhere}

  .hamb{display:flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;position:relative;z-index:130}

  /* ─────────────────────────────────────────────
     MENÚ: panel desde la derecha, con el buscador dentro
     ───────────────────────────────────────────── */
  .cab nav{
    position:fixed;inset:0 0 0 auto;
    width:min(320px,86vw);
    background:var(--petroleo);
    border-left:.5px solid var(--g600);
    transform:translateX(100%);
    transition:transform .26s ease;
    z-index:120;overflow-y:auto;
    padding:72px 24px 40px;
    flex:none;
  }
  .cab nav.abierto{transform:none}
  .cab nav.abierto::before{
    content:'';position:fixed;inset:0;
    background:rgba(8,12,18,.62);z-index:-1;
  }

  .cab nav ul{flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap}
  .cab nav li{width:100%}
  .cab nav a{display:block;padding:15px 0;
    border-bottom:.5px solid var(--g600);font-size:14px;white-space:normal}
  .cab nav .act,.cab nav .current-menu-item > a{
    color:var(--arena);border-bottom-color:var(--arena)}

  .cab nav .sub-menu{display:flex;position:static;background:none;
    border:none;box-shadow:none;padding:0 0 0 16px;min-width:0}
  .cab nav .sub-menu a{font-size:13.5px;padding:12px 0}

  /* El buscador, arriba del todo dentro del menú */
  .menu-buscar{display:flex!important;align-items:center;gap:10px;width:100%;
    margin-bottom:22px;padding:12px 14px;
    background:rgba(8,12,18,.5);border:.5px solid var(--g600);
    border-radius:6px;color:var(--g300);font-size:15px;
    cursor:pointer;text-align:left}
  .menu-buscar:hover{border-color:var(--arena);color:var(--arena)}

  /* ─────────────────────────────────────────────
     REJILLAS: todo a una columna
     ───────────────────────────────────────────── */
  .rej.r1,.rej.r2,.rej.r3,.rej.r4,.rej.r5,
  .rej-ser,.rej-ser-movil,.rej-salidas,.rej-mat,
  .herr,.herr.h1,.herr.h2,.herr.h3,
  .grupo .r4,.ant-sig{grid-template-columns:1fr}
  .rej{gap:16px}

  .rej.r1 .tj,.rej.r1 .serie{flex-direction:column}
  .rej.r1 .tj .foto{flex:none;aspect-ratio:16/10}
  .rej.r1 .serie .foto{flex:none;aspect-ratio:1/1}
  .rej.r1 .tj .cuerpo,.rej.r1 .serie .cuerpo{padding:16px 18px 20px}
  .rej.r1 .tj h3{font-size:17px}
  .rej.r1 .tj p{font-size:14.5px}

  /* El pie se queda con sus columnas apiladas, como está */
  .pcols{grid-template-columns:1fr;gap:28px}
  .pie .marca{grid-column:auto}
  .predes{justify-content:flex-start}
  .pbajo{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}


  /* ─────────────────────────────────────────────
     FRANJAS Y BLOQUES
     ───────────────────────────────────────────── */
  .franja{padding:40px 0}
  .cabecilla{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
  .cabecilla .mas{align-self:flex-start}

  .verso{padding:42px 0}
  .verso blockquote{font-size:19px;line-height:1.5}
  .verso .ref{font-size:11.5px;letter-spacing:1.6px}
  .proposito{padding:42px 0}
  .proposito h2{font-size:22px}
  .proposito p{font-size:16px}
  .canal{padding:36px 0}
  .canal .env{flex-direction:column;align-items:flex-start;gap:18px}
  .canal .byt{width:100%;justify-content:center}
  .hc{padding:20px 18px}
  .hc p{-webkit-line-clamp:4;min-height:0}

  /* ─────────────────────────────────────────────
     SECCIÓN, SERIE Y PUBLICACIÓN
     ───────────────────────────────────────────── */
  .portico{padding:44px 0 38px}
  .cuerpo-sec{padding:36px 0 44px}
  .destacada{grid-template-columns:1fr;grid-template-rows:auto auto}
  .destacada .foto{aspect-ratio:16/9}
  .destacada .interior{padding:22px 20px 26px}

  .migas{padding:11px 0;position:relative;z-index:5}
  .migas ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;font-size:13px}
  .migas ol::-webkit-scrollbar{display:none}
  .migas li{white-space:nowrap}
  .migas a{padding:4px 0;display:inline-block}

  .serie-portico .env{grid-template-columns:1fr;justify-items:start;gap:24px}
  .serie-caratula{max-width:200px}
  .serie-ficha h1{font-size:25px}
  .serie-datos{font-size:14px;flex-wrap:wrap}
  .serie-acciones{flex-direction:column;align-items:stretch;gap:12px}
  .serie-acciones .boton{justify-content:center}

  .episodios{padding:40px 0}
  .lista-eps .ep{flex-wrap:wrap;gap:12px;padding:14px 0}
  .ep .num{font-size:20px;min-width:32px}
  .ep .mini{flex:0 0 92px}
  .ep h3{font-size:15.5px;-webkit-line-clamp:2}
  .ep .dur{font-size:12px}

  .pub-portico{padding:38px 0 30px}
  .pub-portico h1{font-size:27px}
  .pub-cuerpo{padding:32px 0 26px}
  .pub-compartir{padding:34px 0}
  .redes-c{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .redes-c a,.redes-c button{justify-content:center;width:100%}

  .serie-nav{padding:40px 0}
  .eps-mini{max-height:300px}
  .as.der{text-align:left}

  .salidas{padding:44px 0}
  .salidas h2{font-size:21px}
  .salida{padding:20px 22px}
  .salida h3{font-size:17px}
  .salida p{font-size:14.5px}

  /* ─────────────────────────────────────────────
     BUSCADOR, PAGINADO Y ERROR
     ───────────────────────────────────────────── */
  .busq-caja{padding:0 18px}
  .paginado{margin-top:36px;gap:7px}
  .paginado a,.paginado .act,.paginado .puntos{
    min-width:36px;height:36px;padding:0 10px;font-size:14px}
  .err{padding:64px 0}
  .err .num{font-size:64px}
  .err h1{font-size:25px}
  .err .acciones{flex-direction:column;align-items:stretch;gap:12px}
}

/* Pantallas muy angostas: nada se aprieta de más */
@media(max-width:380px){
  .env,.pub-texto{padding-left:16px;padding-right:16px}
  .redes-c{grid-template-columns:1fr}
  .ep .mini{display:none}
}


/* ══════════════════════════════════════════════════════════════════
   EL CARRUSEL DE TELÉFONO — INDEPENDIENTE

   No comparte ni una clase con el de escritorio. Todas empiezan por
   «mcar-» y no existen en ninguna otra parte del archivo.

   Se hizo así porque el de escritorio arrastra posición absoluta,
   opacidad cero, mínimos de 512 píxeles y eventos apagados. Anular
   eso uno por uno no terminaba nunca, y cada navegador resolvía la
   herencia a su manera: tres teléfonos, tres resultados distintos.

   Aquí no hay nada que heredar. Cada medida está declarada.

   El reparto, exacto:

     foto      56.25vw    (16:9 del ancho de la pantalla)
     rótulo    18 px
     título    62 px      (2 líneas de 31)
     texto     66 px      (3 líneas de 22)
     botón     44 px
     rellenos  40 px
     ─────────────────
     texto    230 px
   ══════════════════════════════════════════════════════════════════ */

/* En escritorio no existe */
.mcar{display:none}

@media(max-width:768px){

  /* El de escritorio se apaga; este se enciende */
  .cartel{display:none!important}

  .mcar{
    display:block;
    background:var(--negro);
    position:relative;
    overflow:hidden;
  }

  /* ── LA TIRA ── */
  .mcar-tira{
    display:flex;
    height:calc(56.25vw + 230px);
    min-height:0;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin:0;
    padding:0;
  }
  .mcar-tira::-webkit-scrollbar{display:none}

  /* ── UNA DIAPOSITIVA ── */
  .mcar-dia{
    flex:0 0 100%;
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    opacity:1;
    pointer-events:auto;
    margin:0;
    padding:0;
  }

  /* ── LA FOTO ── */
  .mcar-foto{
    flex:0 0 56.25vw;
    height:56.25vw;
    width:100%;
    overflow:hidden;
    background:var(--tinta);
    margin:0;
    padding:0;
    border-radius:0;
  }
  .mcar-foto img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    aspect-ratio:auto;
    max-width:none;
    max-height:none;
    border-radius:0;
    transform:none;
    filter:none;
  }

  /* ── EL TEXTO ── */
  .mcar-txt{
    flex:0 0 230px;
    height:230px;
    display:flex;
    flex-direction:column;
    padding:14px 20px 12px;
    overflow:hidden;
    background:var(--negro);
    margin:0;
  }

  .mcar-rot{
    flex:0 0 18px;
    height:18px;
    line-height:18px;
    margin:0 0 6px;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.6px;
    color:var(--arena);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mcar-tit{
    flex:0 0 62px;
    height:62px;
    line-height:31px;
    margin:0 0 8px;
    font-family:var(--sans);
    font-size:22px;
    font-weight:900;
    letter-spacing:-.3px;
    color:var(--blanco);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    overflow-wrap:anywhere;
  }

  .mcar-des{
    flex:0 0 66px;
    height:66px;
    line-height:22px;
    margin:0;
    font-size:14.5px;
    color:var(--g200);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .mcar-btn{
    flex:0 0 44px;
    height:44px;
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--arena);
    color:var(--tinta);
    font-size:13px;
    font-weight:900;
    letter-spacing:1.4px;
    border-radius:3px;
    text-decoration:none;
  }

  /* ── LOS PUNTOS ── */
  .mcar-puntos{
    position:static;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    padding:14px 0 20px;
    margin:0;
    background:var(--negro);
  }
  .mcar-p{
    width:8px;
    height:8px;
    padding:0;
    margin:0;
    border:none;
    border-radius:50%;
    background:var(--g500);
    cursor:pointer;
    transition:width .22s,background .22s;
  }
  .mcar-p.on{
    width:22px;
    border-radius:4px;
    background:var(--arena);
  }
}

/* Pantallas muy angostas: una línea más de texto */
@media(max-width:380px){
  .mcar-tira{height:calc(56.25vw + 240px)}
  .mcar-txt{flex-basis:240px;height:240px;padding:12px 16px 12px}
  .mcar-tit{flex-basis:56px;height:56px;font-size:20px;line-height:28px}
  .mcar-des{flex-basis:84px;height:84px;font-size:14px;line-height:21px;-webkit-line-clamp:4}
}


/* ══════════════════════════════════════════════════════════════════
   LAS HERRAMIENTAS

   La Paralela y el Interlineal ocupan la pantalla completa menos lo
   que tengan encima. Cada píxel de arriba es texto bíblico que se
   pierde, y ahí no se pierde poco: la página no se desplaza —se
   desplazan las columnas por dentro—, así que la barra tampoco se
   recoge sola al bajar como en el resto del sitio. Se queda fija
   comiendo 52 px todo el rato.

   «LO ÚLTIMO» es para quien llega a ver qué hay nuevo. Quien abre una
   herramienta vino a estudiar un versículo.

   Fuera en las dos, en computador y en teléfono. La cabecera con el
   logo y el menú se queda: la navegación no se pierde nunca.

   Los plugins solo ponen la clase en el cuerpo. La regla vive aquí
   porque la barra es del tema.
   ══════════════════════════════════════════════════════════════════ */
body.syr-herramienta .alta{display:none}