:root{
  /* unidades de la diapositiva: normalmente el alto y el ancho de la
     ventana, y cuando la presentación se gira para verse apaisada, los
     del propio deck, que JavaScript pone en píxeles. */
  --vu:1vh; --vw2:1vw;
  --ancho:1240px; --ancho-lectura:1000px;
  --ink:#15151a; --gris:#71716b; --linea:#e6e4de; --papel:#faf9f6; --blanco:#fff;
  --lateral:#14181e; --sans:'Poppins',system-ui,sans-serif; --serif:'Lora',Georgia,serif;
  --c:#c1591b; --soft:#fbf0e6; --sombra:0 18px 40px rgba(0,0,0,.10); --r:14px;
}
body.oscuro{
  --ink:#f1efe9; --gris:#9b9b95; --linea:#2a2f36; --papel:#0f1216; --blanco:#171b21;
  --lateral:#0b0e12; --sombra:0 18px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--papel);color:var(--ink);font-family:var(--serif);line-height:1.62;
  -webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
input,textarea{font:inherit}
::selection{background:var(--c);color:#fff}

#lectura{position:fixed;top:0;left:0;height:3px;background:var(--c);width:0;z-index:70;transition:width .1s linear}

/* ---------- estructura ---------- */

/* ================= barra superior ================= */
.app{min-height:100vh;display:flex;flex-direction:column}
.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.contenido{flex:1;animation:vista .42s cubic-bezier(.2,.7,.3,1)}
@keyframes vista{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.barra{position:sticky;top:0;z-index:45;background:var(--lateral);color:#fff}
.barra .in{max-width:1500px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;gap:14px}
.marca{display:flex;align-items:center;gap:10px;flex-shrink:0}
.iso{display:grid;grid-template-columns:repeat(2,6px);gap:3px}
.iso span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);
  animation:pulso 3.6s ease-in-out infinite}
.iso span:nth-child(1){background:#c1591b}
.iso span:nth-child(2){animation-delay:.3s}
.iso span:nth-child(3){animation-delay:.6s}
.iso span:nth-child(4){animation-delay:.9s}
@keyframes pulso{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.3);opacity:1}}
.marca .txt{text-align:left}
.marca strong{display:block;font-family:var(--sans);font-weight:600;letter-spacing:.18em;font-size:13.5px}
.marca small{display:block;font-family:var(--sans);font-size:9.5px;opacity:.5;letter-spacing:.02em}

#menu{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.nav{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:99px;
  font-family:var(--sans);font-size:13.5px;color:rgba(255,255,255,.75);white-space:nowrap;
  position:relative;transition:.16s}
.nav svg{width:17px;height:17px;flex-shrink:0;opacity:.8}
.nav:hover{background:rgba(255,255,255,.09);color:#fff}
.nav.activo{background:rgba(255,255,255,.14);color:#fff;font-weight:500}
.nav.activo svg{opacity:1}
.nav .chev{font-style:normal;font-size:11px;opacity:.6;margin-left:-3px}

.con-lista{position:relative}
.lista-anios{position:absolute;top:calc(100% + 8px);left:0;min-width:330px;background:var(--blanco);
  color:var(--ink);border:1px solid var(--linea);border-radius:14px;padding:7px;
  box-shadow:0 24px 50px rgba(0,0,0,.22);display:none;z-index:60;animation:vista .16s;
  max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain}
.con-lista.abierta .lista-anios{display:block}
/* rótulos que separan los bloques del menú de Formación */
.la-tit{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);padding:10px 11px 5px;margin:0}
.la-tit:first-child{padding-top:4px}
/* las dos acciones no llevan punto de color sino un signo, y nunca parten
   la línea: el rótulo va en una sola línea aunque el menú sea estrecho */
.la-accion span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-ico{width:11px!important;height:auto!important;border-radius:0!important;
  background:none!important;font-size:14px;color:var(--c);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.panel-movil .la-tit{color:rgba(255,255,255,.45)}
.panel-movil .la-ico{color:#fff}
.la{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;
  border-radius:10px;font-family:var(--sans);font-size:13.5px;transition:.14s}
.la:hover{background:var(--papel)}
.la i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.la b{font-weight:500}
.la small{opacity:.55;font-size:12px}
.la em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--gris)}

.derecha{display:flex;align-items:center;gap:9px;flex-shrink:0}
.campo{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:7px 14px;
  width:210px;flex-shrink:1;min-width:44px;transition:.2s}
.campo:focus-within{background:#fff;border-color:#fff;width:320px;flex-shrink:0}
.campo span{color:rgba(255,255,255,.6)}
.campo:focus-within span{color:var(--gris)}
.campo input{border:0;outline:0;width:100%;font-family:var(--sans);font-size:13px;background:none;color:#fff}
.campo input::placeholder{color:rgba(255,255,255,.55)}
.campo:focus-within input{color:var(--ink)}
.campo:focus-within input::placeholder{color:var(--gris)}
.btn-icono{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);color:#fff;font-size:14px;transition:.22s}
.btn-icono:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
.btn-icono svg{width:17px;height:17px}
.hamb{display:none}

.aro-prog{position:relative;width:38px;height:38px;flex-shrink:0}
.aro-prog svg{width:38px;height:38px;transform:rotate(0)}
.aro-prog circle{fill:none;stroke-width:3}
.aro-prog .fondo{stroke:rgba(255,255,255,.18)}
.aro-prog .arco{stroke:#e0873f;stroke-linecap:round;stroke-dasharray:94.2;stroke-dashoffset:94.2;
  transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.aro-prog b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sans);
  font-size:9.5px;font-weight:600;color:#fff}

.res{position:absolute;top:calc(100% - 4px);right:20px;width:min(470px,calc(100% - 40px));
  background:var(--blanco);color:var(--ink);border:1px solid var(--linea);border-radius:14px;
  box-shadow:var(--sombra);max-height:66vh;overflow:auto;display:none;z-index:60;animation:vista .2s}
.res.on{display:block}
.res button{display:block;width:100%;text-align:left;padding:11px 15px;border-bottom:1px solid var(--linea);
  border-left:4px solid transparent;transition:.14s}
.res button:hover{background:var(--papel);padding-left:20px}
.res b{display:block;font-family:var(--sans);font-size:14px;font-weight:500}
.res span{font-family:var(--sans);font-size:11.5px;color:var(--gris)}
.res .vacio{padding:15px;font-family:var(--sans);font-size:13.5px;color:var(--gris)}

/* panel para móvil */
.panel-movil{background:var(--lateral);border-top:1px solid rgba(255,255,255,.12);padding:10px 14px 16px}
.panel-movil[hidden]{display:none}
.panel-movil .nav{width:100%;justify-content:flex-start;border-radius:10px}
.panel-movil .grupo{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.panel-movil .la{color:rgba(255,255,255,.8)}
.panel-movil .la:hover{background:rgba(255,255,255,.09)}
.panel-movil .la em{color:rgba(255,255,255,.45)}

@media(max-width:1300px){#menu .nav span{display:none}#menu .nav{padding:9px 10px}
  .nav .chev{display:none}}
@media(max-width:900px){
  .hamb,.panel-movil{display:none!important}
  .aro-prog{display:none}
  .marca small{display:none}
  .barra .in{flex-wrap:wrap;height:auto;padding:9px 0 0;gap:10px;row-gap:0}
  .marca{padding-left:14px}
  .derecha{padding-right:14px}
  .campo{width:auto;flex:1;min-width:0;padding:6px 12px}
  .derecha{gap:6px}
  .btn-icono{width:34px;height:34px;flex-shrink:0}
  .marca{flex-shrink:1;min-width:0}
  .marca strong{font-size:12.5px;letter-spacing:.14em}
  .barra .in{overflow:hidden}
  /* el menú pasa a una fila propia, deslizable */
  #menu{order:3;width:100%;flex:1 0 100%;overflow-x:auto;overflow-y:hidden;gap:6px;
    padding:9px 14px 10px;margin-top:2px;border-top:1px solid rgba(255,255,255,.09);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  #menu::-webkit-scrollbar{display:none}
  #menu .nav{scroll-snap-align:start;padding:8px 14px;background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08)}
  #menu .nav span{display:inline!important;font-size:13px}
  #menu .nav svg{width:15px;height:15px}
  #menu .nav.activo{background:#fff;color:#15151a;border-color:#fff}
  #menu .nav.activo svg{color:#15151a}
  .con-lista{position:static}
  .lista-anios{left:10px;right:10px;top:calc(100% + 4px);min-width:0}
  .res{top:calc(100% + 4px);right:12px;width:calc(100% - 24px)}
  .mini-cab{top:104px}
}

/* ================= zona útil, ahora en la portada ================= */
.util-inicio{display:grid;gap:14px;grid-template-columns:1fr;margin:28px 0 6px}
@media(min-width:820px){.util-inicio{grid-template-columns:1.3fr 1fr 1fr}}
.uc{text-align:left;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  padding:18px;transition:.2s;position:relative;overflow:hidden}
.uc:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.uc h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);margin-bottom:10px}
.uc b{display:block;font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.3}
.uc small{display:block;font-family:var(--sans);font-size:12px;color:var(--gris);margin-top:4px}
.uc .barra-fina{margin-top:12px;background:var(--linea)}
.uc-lista{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.uc-item{display:flex;gap:9px;align-items:center;width:100%;text-align:left;font-family:var(--sans);
  font-size:13px;padding:6px 0;transition:.14s}
.uc-item:hover{padding-left:5px;color:var(--c)}
.uc-item i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.uc-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc.testigo-hoy{border-left:4px solid var(--c)}
.uc.testigo-hoy em{display:block;font-family:var(--serif);font-style:italic;font-size:13.5px;
  color:var(--gris);margin-top:7px;line-height:1.5}
.uc .vacio-uc{font-family:var(--sans);font-size:13px;color:var(--gris)}

/* ---------- portada ---------- */
.portada{position:relative;overflow:hidden;color:#fff;padding:76px 26px 62px;
  min-height:min(86vh,700px);display:flex;align-items:center;
  background:linear-gradient(135deg,#f0741b 0%,#d95c12 38%,#b8410e 72%,#7e2a10 100%)}
#lienzo{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;mix-blend-mode:screen}
.a1{width:520px;height:520px;background:#ffb347;left:-120px;top:-180px;animation:flota 17s ease-in-out infinite}
.a2{width:460px;height:460px;background:#ff7a18;right:-100px;top:10px;animation:flota 21s ease-in-out infinite reverse}
.a3{width:400px;height:400px;background:#c0341a;right:24%;bottom:-200px;animation:flota 25s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.1)}
  66%{transform:translate(-30px,25px) scale(.94)}}
.portada .in{position:relative;max-width:var(--ancho);margin:0 auto;width:100%;z-index:3}
.etq{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  opacity:.75;margin-bottom:12px}
.portada h1{font-family:var(--sans);font-weight:300;font-size:clamp(46px,11vw,104px);letter-spacing:.14em;
  text-transform:uppercase;line-height:.98;margin-bottom:16px}
.portada h1 span{display:inline-block;animation:letra .8s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes letra{from{opacity:0;transform:translateY(46px) rotate(7deg)}to{opacity:1;transform:none}}
.portada p{max-width:33em;opacity:.92;font-size:17px}
.portada .eslogan{font-family:var(--sans);font-weight:300;font-size:clamp(17px,2.4vw,25px);
  line-height:1.35;margin-bottom:14px;opacity:1}
.portada .eslogan b{font-weight:600}
.cifras{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.cifra b{display:block;font-family:var(--sans);font-weight:600;font-size:34px;line-height:1}
.cifra span{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.62}
.sigue{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}

/* ---------- años ---------- */
.anio{padding:44px 0;border-bottom:1px solid var(--linea)}
.anio:last-child{border-bottom:0}
.anio-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.anio .etq{color:var(--c);opacity:1;margin-bottom:4px}
.anio h2{font-family:var(--sans);font-weight:300;font-size:clamp(30px,6vw,44px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c);line-height:1}
.lema{font-style:italic;color:var(--gris);margin-top:8px}
.lema i{font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  margin-left:6px}
.anillo{width:60px;height:60px;flex-shrink:0}
.anillo circle{fill:none;stroke-width:5}
.anillo .fondo{stroke:var(--linea)}
.anillo .arco{stroke:var(--c);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.anillo text{font-family:var(--sans);font-size:15px;font-weight:600;fill:var(--c)}
.libros{display:grid;gap:14px;grid-template-columns:1fr;margin-top:24px}
@media(min-width:760px){.libros{grid-template-columns:repeat(3,1fr)}}
.libro{position:relative;text-align:left;padding:20px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.libro::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c)}
.libro::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:var(--c);
  opacity:0;right:-70px;bottom:-90px;transition:opacity .35s,transform .45s}
.libro:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.libro:hover::after{opacity:.08;transform:scale(1.25)}
.libro>*{position:relative}
.libro .tomo{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.libro h3{font-family:var(--sans);font-weight:500;font-size:18px;margin:8px 0 14px;line-height:1.25}
.libro .barra-fina{background:var(--linea)}
.libro .barra-fina i{background:var(--c)}
.libro .n{display:block;font-family:var(--sans);font-size:12px;color:var(--gris);margin-top:9px}
.libro .flecha{position:absolute;right:16px;bottom:14px;color:var(--c);font-size:20px;opacity:0;
  transform:translateX(-8px);transition:.3s}
.libro:hover .flecha{opacity:1;transform:none}

/* ---------- cabeceras ---------- */
.cab{background:var(--c);color:#fff;padding:24px 26px 46px;position:relative;overflow:hidden}
.cab .ring{position:absolute;width:460px;height:460px;border:1px solid rgba(255,255,255,.26);border-radius:50%;
  right:-170px;top:-210px;animation:gira 46s linear infinite}
.cab .ring::after{content:"";position:absolute;inset:34px;border:1px solid rgba(255,255,255,.14);border-radius:50%}
@keyframes gira{to{transform:rotate(360deg)}}
.cab .in{position:relative;max-width:var(--ancho-lectura);margin:0 auto;width:100%}
.volver{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;opacity:.85;
  margin-bottom:18px;transition:.2s}
.volver:hover{opacity:1;gap:10px}
.cab h1{font-family:var(--sans);font-weight:300;font-size:clamp(34px,7vw,56px);letter-spacing:.14em;
  text-transform:uppercase;line-height:1}
.cab .sub{font-family:var(--sans);font-weight:500;font-size:17px;margin-top:8px}
.cab .lema{color:rgba(255,255,255,.85)}
.titular{display:flex;gap:16px;align-items:flex-start;margin-top:4px}
.titular .num{font-family:var(--sans);font-weight:700;font-size:clamp(38px,9vw,64px);line-height:.88;opacity:.45}
.titular h1{font-family:var(--sans);font-weight:600;font-size:clamp(23px,5vw,38px);letter-spacing:0;
  text-transform:uppercase;line-height:1.1}

.acciones{display:flex;gap:9px;flex-wrap:wrap;margin:-20px auto 30px;position:relative;z-index:3;
  padding:0 26px;max-width:var(--ancho-lectura);width:100%}
.btn{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--c);color:#fff;
  font-family:var(--sans);font-weight:500;font-size:13.5px;padding:11px 19px;border-radius:99px;
  text-decoration:none;box-shadow:0 8px 22px color-mix(in srgb,var(--c) 34%,transparent);overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.btn::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .2s}
.btn:hover{transform:translateY(-3px)}
.btn:hover::after{opacity:.12}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:var(--blanco);color:var(--c);border:1px solid var(--linea);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.btn.on{background:#1e7a45;box-shadow:0 8px 22px rgba(30,122,69,.35)}

.vista{padding:36px 26px 64px;max-width:var(--ancho);margin:0 auto;width:100%}
.cuerpo-vista{padding:0 26px 64px;max-width:var(--ancho-lectura);margin:0 auto;width:100%}
.tit-vista{font-family:var(--sans);font-weight:600;font-size:28px;margin-bottom:6px}
.sub-vista{color:var(--gris);margin-bottom:26px}
.intro-libro{margin:26px 0 18px;font-size:17px}
.bloque{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c);
  margin:30px 0 8px}
.item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:14px 8px;
  border-bottom:1px solid var(--linea);border-radius:8px;transition:.18s cubic-bezier(.2,.8,.2,1)}
.item:hover{background:var(--blanco);transform:translateX(6px);box-shadow:0 6px 18px rgba(0,0,0,.05)}
.item .marca-ok{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--linea);flex-shrink:0;
  display:grid;place-items:center;font-size:11px;color:transparent;transition:.25s}
.item.hecho .marca-ok{background:#1e7a45;border-color:#1e7a45;color:#fff}
.item .num{font-family:var(--sans);font-size:12.5px;color:var(--gris);min-width:24px}
.item .txt{flex:1;min-width:0}
.item b{display:block;font-family:var(--sans);font-weight:500;font-size:15px}
.item em{font-family:var(--sans);font-style:normal;font-size:11.5px;color:var(--gris)}
.item .ir{color:var(--c);font-size:20px;opacity:.4;transition:.2s}
.item:hover .ir{opacity:1;transform:translateX(4px)}

/* ---------- estudio ---------- */
.cita{display:flex;gap:14px;align-items:flex-start;margin-bottom:26px}
.cita .pt{min-width:30px;height:30px;border-radius:50%;background:var(--c);margin-top:5px;
  animation:latido 4s ease-in-out infinite}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 45%,transparent)}
  60%{box-shadow:0 0 0 14px transparent}}
.cita p{font-style:italic;font-size:19px}
.cita i{font-style:normal;font-family:var(--sans);font-size:12.5px;color:var(--gris)}
.dos{display:grid;gap:26px;grid-template-columns:1fr;margin-bottom:22px}
@media(min-width:780px){.dos{grid-template-columns:1.65fr 1fr}}
.intro p{margin-bottom:13px}
.obj{border-left:3px solid var(--c);padding-left:16px}
.obj h2,.testigo h2,.aplica h2,.ejerc h2,.notas h2{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:10px}
.obj ol{padding-left:16px}
.obj li{font-family:var(--sans);font-size:13.5px;margin-bottom:9px}
.sec{margin:28px 0;scroll-margin-top:70px}
.sec h3{font-family:var(--sans);font-weight:600;font-size:20px;margin-bottom:10px}
.sec h3 span{color:var(--c);margin-right:6px}
.sec p{margin-bottom:12px}
.sec h4{font-family:var(--sans);font-size:15px;margin:14px 0 5px}
.sec ul{margin:0 0 13px 18px}
.sec li{margin-bottom:7px}
.sec ul.dl b{font-family:var(--sans)}
blockquote{background:var(--blanco);border-left:4px solid var(--c);padding:15px 18px;margin:16px 0;
  font-style:italic;border-radius:0 8px 8px 0}
.testigo{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:20px;margin:32px 0}
.testigo h2{color:var(--c)}
.aplica{background:var(--c);color:#fff;border-radius:var(--r);padding:22px;margin:22px 0;
  box-shadow:0 14px 34px color-mix(in srgb,var(--c) 28%,transparent)}
.ejerc ul{list-style:none}
.ejerc li{padding-left:19px;position:relative;margin-bottom:8px}
.ejerc li::before{content:"—";position:absolute;left:0;color:var(--c)}
.notas{margin:30px 0}
.notas textarea{width:100%;min-height:110px;border:1px solid var(--linea);border-radius:var(--r);padding:14px;
  background:var(--blanco);color:var(--ink);resize:vertical;font-family:var(--serif);font-size:15px}
.notas textarea:focus{outline:0;border-color:var(--c)}
.nav-t{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--linea);padding:20px 0 40px;
  font-family:var(--sans);font-size:13px}
.nav-t button{color:var(--c);max-width:47%;text-align:left;transition:.2s}
.nav-t button:hover{transform:translateX(-4px)}
.nav-t button:last-child{text-align:right}
.nav-t button:last-child:hover{transform:translateX(4px)}

.tabla{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;margin-top:8px}
.tabla th{text-align:left;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
  padding:9px 8px;border-bottom:1px solid var(--linea);font-weight:500}
.tabla td{padding:11px 8px;border-bottom:1px solid var(--linea)}
.tabla tr:hover td{background:var(--blanco)}
.tabla .pt{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px}
.tabla a{color:var(--c);text-decoration:none;font-weight:500}
.vacia{background:var(--blanco);border:1px dashed var(--linea);border-radius:var(--r);padding:28px;
  text-align:center;color:var(--gris);font-family:var(--sans);font-size:14px}
.aviso{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--papel);
  font-family:var(--sans);font-size:13.5px;padding:11px 20px;border-radius:99px;opacity:0;pointer-events:none;
  transition:.28s cubic-bezier(.2,.8,.2,1);z-index:120;
  display:flex;align-items:center;gap:2px;max-width:calc(100vw - 28px)}
.aviso.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.aviso .deshacer{margin-left:12px;font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--papel);background:rgba(255,255,255,.18);border:0;cursor:pointer;
  padding:7px 14px;border-radius:99px;min-height:36px;white-space:nowrap}
.aviso .deshacer:hover{background:rgba(255,255,255,.32)}

/* ---------- PRESENTACIÓN ---------- */
.deck{position:fixed;inset:0;z-index:100;background:#000;--e:1;
  touch-action:none;overscroll-behavior:none}
.slide{-webkit-user-select:text;user-select:text}
body.presentando{position:fixed;inset:0;width:100%;overflow:hidden;overscroll-behavior:none}
.deck[hidden]{display:none}
.slide{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;padding:calc(9 * var(--vu)) calc(9 * var(--vw2));
  background:var(--papel);color:var(--ink);overflow:hidden}
.slide.on{display:flex;animation:slideIn .5s cubic-bezier(.2,.8,.2,1)}
.deck.atras .slide.on{animation:slideInB .5s cubic-bezier(.2,.8,.2,1)}
@keyframes slideIn{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes slideInB{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
.slide.color{background:var(--c);color:#fff}
.slide.suave{background:var(--soft)}
.slide.oscura{background:#101317;color:#fff}
.slide .fondo-num{position:absolute;right:calc(4 * var(--vw2));bottom:calc(-8 * var(--vu));font-family:var(--sans);font-weight:700;
  font-size:calc(46 * var(--vu));line-height:.8;opacity:.08;pointer-events:none}
.slide .aro{position:absolute;border-radius:50%;border:1px solid currentColor;opacity:.13;pointer-events:none}
.slide .k{font-family:var(--sans);font-size:calc(calc(1.5 * var(--vu)) * var(--e) + 7px);letter-spacing:.26em;
  text-transform:uppercase;opacity:.72;margin-bottom:calc(2.4 * var(--vu));position:relative;
  animation:sube .5s .05s cubic-bezier(.2,.8,.2,1) backwards}
.slide h2{font-family:var(--sans);font-weight:600;font-size:calc(calc(6.4 * var(--vu)) * var(--e));line-height:1.06;
  letter-spacing:-.01em;position:relative;max-width:21ch;animation:sube .55s .1s cubic-bezier(.2,.8,.2,1) backwards}
.slide h2.grande{font-size:calc(calc(9 * var(--vu)) * var(--e));text-transform:uppercase;letter-spacing:.01em;max-width:18ch}
@keyframes sube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.slide .verso{font-family:var(--serif);font-style:italic;font-size:calc(calc(7.2 * var(--vu)) * var(--e));line-height:1.24;
  position:relative;max-width:24ch;animation:sube .6s .1s cubic-bezier(.2,.8,.2,1) backwards}
.slide .ref{font-family:var(--sans);font-size:calc(calc(1.9 * var(--vu)) * var(--e) + 5px);letter-spacing:.22em;
  text-transform:uppercase;margin-top:calc(3.2 * var(--vu));color:var(--c);position:relative;
  animation:sube .6s .3s cubic-bezier(.2,.8,.2,1) backwards}
.slide.color .ref,.slide.oscura .ref{color:rgba(255,255,255,.72)}
.slide ul{list-style:none;margin-top:calc(4 * var(--vu));position:relative;max-width:34ch}
.slide li{font-family:var(--sans);font-size:calc(calc(3.4 * var(--vu)) * var(--e));line-height:1.32;margin-bottom:calc(2.6 * var(--vu));
  padding-left:1.5em;position:relative;animation:sube .5s cubic-bezier(.2,.8,.2,1) backwards}
.slide li b{font-weight:600}
.slide li::before{content:"";position:absolute;left:0;top:.52em;width:.44em;height:.44em;border-radius:50%;
  background:var(--c)}
.slide.color li::before,.slide.oscura li::before{background:rgba(255,255,255,.85)}
.slide ol{margin:calc(4 * var(--vu)) 0 0 1.3em;max-width:32ch}
.slide ol li{padding-left:.4em;font-size:calc(calc(3.6 * var(--vu)) * var(--e))}
.slide ol li::before{display:none}
.slide ol li::marker{color:var(--c);font-weight:600}
.slide .dest{margin-top:auto;padding:calc(2.6 * var(--vu)) calc(3 * var(--vw2));font-family:var(--serif);font-style:italic;
  font-size:calc(calc(2.4 * var(--vu)) * var(--e));border-left:4px solid var(--c);
  background:color-mix(in srgb,var(--c) 8%,transparent);max-width:62ch;
  animation:sube .5s .4s cubic-bezier(.2,.8,.2,1) backwards}
.slide.color .dest{border-left-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12)}
.slide .cuerpo{font-family:var(--sans);font-size:calc(calc(3.1 * var(--vu)) * var(--e));line-height:1.45;margin-top:calc(3 * var(--vu));
  max-width:46ch;animation:sube .55s .18s cubic-bezier(.2,.8,.2,1) backwards}
.slide.seccion.on{display:grid;grid-template-columns:minmax(220px,32%) 1fr;gap:calc(5 * var(--vw2));
  align-content:center;align-items:center}
.slide.seccion .izq-col{position:relative}
.slide.seccion .der-col{position:relative;min-height:0}
.slide .paso-num{font-family:var(--sans);font-weight:700;font-size:calc(calc(9 * var(--vu)) * var(--e));line-height:.85;
  color:var(--c);opacity:.32;margin-bottom:calc(1.6 * var(--vu))}
.slide.seccion h2{font-size:calc(calc(5.4 * var(--vu)) * var(--e));max-width:none}
.slide.seccion ul,.slide.seccion ol{margin-top:0;max-width:none}
.slide.seccion li{font-size:calc(calc(3.6 * var(--vu)) * var(--e));margin-bottom:calc(2.8 * var(--vu))}
.slide.seccion .dest{margin-top:calc(3 * var(--vu))}
@media(max-width:880px){.slide.seccion.on{grid-template-columns:1fr;gap:calc(2 * var(--vu));align-content:center}
  .slide .paso-num{font-size:calc(calc(6 * var(--vu)) * var(--e))}
  .slide.seccion h2{font-size:calc(calc(4.4 * var(--vu)) * var(--e))}
  .slide.seccion li{font-size:calc(calc(2.9 * var(--vu)) * var(--e))}}
.slide .pie-s{position:absolute;left:calc(9 * var(--vw2));bottom:calc(4.4 * var(--vu));font-family:var(--sans);font-size:calc(1.5 * var(--vu));
  letter-spacing:.18em;text-transform:uppercase;opacity:.45}
.deck .barra{position:absolute;top:0;left:0;height:4px;background:var(--c);z-index:6;
  transition:width .4s cubic-bezier(.2,.8,.2,1)}
.deck .ctrl{position:absolute;top:14px;right:16px;z-index:9;display:flex;gap:8px;align-items:flex-start}
.deck .ctrl .redondo{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.3);color:#fff;
  font-family:var(--sans);font-size:15px;line-height:1;display:grid;place-items:center;
  backdrop-filter:blur(8px);transition:.2s}
.deck .ctrl .redondo:hover{background:rgba(0,0,0,.55);transform:scale(1.06)}
.deck .ctrl .redondo.on{background:#fff;color:#111}
.menu-ctrl{position:absolute;top:46px;right:0;min-width:230px;background:rgba(22,22,25,.9);
  backdrop-filter:blur(14px);border-radius:14px;padding:6px;box-shadow:0 22px 48px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:2px;animation:vista .16s}
.menu-ctrl[hidden]{display:none}
.menu-ctrl button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  font-family:var(--sans);font-size:13.5px;color:rgba(255,255,255,.86);padding:10px 12px;
  border-radius:10px;transition:.15s}
.menu-ctrl button:hover{background:rgba(255,255,255,.12);color:#fff}
.menu-ctrl button.on{background:#fff;color:#111}
.menu-ctrl .ic{width:20px;text-align:center;font-size:13px;opacity:.85}
.menu-ctrl em{margin-left:auto;font-style:normal;font-size:11px;opacity:.45;
  border:1px solid currentColor;border-radius:5px;padding:1px 6px}
.deck .reloj{position:absolute;top:16px;left:18px;z-index:8;font-family:var(--sans);font-size:13px;
  letter-spacing:.1em;background:rgba(0,0,0,.3);color:#fff;padding:7px 14px;border-radius:99px;
  backdrop-filter:blur(6px)}
.deck .puntos{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:8;display:flex;gap:7px}
.deck .puntos i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.26;transition:.25s;
  cursor:pointer}
.deck .puntos i.on{opacity:1;width:24px;border-radius:99px}
.deck .paso{position:absolute;bottom:16px;right:18px;z-index:8;font-family:var(--sans);font-size:12.5px;opacity:.5}
.deck .zona{position:absolute;top:0;bottom:0;width:20%;z-index:5;cursor:pointer}
.slide{user-select:text}
.deck .zona.izq{left:0}.deck .zona.der{right:0}
.deck.negro .slide{visibility:hidden}

@media(max-width:880px){
  .lateral{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);height:100vh}
  .lateral.abierto{transform:none;box-shadow:0 0 70px rgba(0,0,0,.5)}
  .menu-movil{display:block}
  .campo{width:auto;flex:1}
  .ruta{display:none}
  .vista,.cuerpo-vista,.cab,.portada,.superior,.acciones{padding-left:18px;padding-right:18px}
  .res{right:18px;width:calc(100% - 36px)}
  .portada{min-height:auto;padding-top:56px}
  .slide{padding:calc(8 * var(--vu)) calc(7 * var(--vw2))}
  .slide h2{font-size:calc(calc(5.2 * var(--vu)) * var(--e))}
  .slide h2.grande{font-size:calc(calc(6.6 * var(--vu)) * var(--e))}
  .slide li{font-size:calc(calc(2.8 * var(--vu)) * var(--e))}
  .slide .verso{font-size:calc(calc(5 * var(--vu)) * var(--e))}
}
@media(max-width:440px){
  .marca .txt{display:none}
  .campo{min-width:100px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
}


/* ================= preparación del expositor ================= */
mark.sub{background:linear-gradient(transparent 36%,
  color-mix(in srgb,var(--c) 38%,transparent) 36%,
  color-mix(in srgb,var(--c) 38%,transparent) 88%,transparent 88%);
  color:inherit;padding:0 2px;border-radius:2px}
.cuerpo-vista.preparando{cursor:text}
.cuerpo-vista.preparando .sec{outline:1px dashed transparent;transition:.2s;border-radius:8px}
.cuerpo-vista.preparando .sec:hover{outline-color:color-mix(in srgb,var(--c) 35%,transparent)}
.barra-prep{position:fixed;z-index:115;background:var(--ink);color:var(--papel);border-radius:99px;
  display:flex;gap:4px;padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.3);transform:translate(-50%,-120%);
  animation:vista .16s}
.barra-prep button{font-family:var(--sans);font-size:12.5px;padding:7px 13px;border-radius:99px;color:inherit}
.barra-prep button:hover{background:rgba(255,255,255,.16)}
.panel-prep{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:18px;
  margin:22px 0}
.panel-prep h2{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:12px;color:var(--c)}
.pieza{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--linea)}
.pieza:last-child{border-bottom:0}
.pieza .txt{flex:1}
.pieza .txt b{display:block;font-family:var(--sans);font-size:13px;font-weight:500}
.pieza .txt small{color:var(--gris);font-family:var(--sans);font-size:12px}
.pieza .txt em{display:block;font-style:italic;margin-top:4px}
.pieza button{color:var(--gris);font-size:18px;line-height:1}
.pieza button:hover{color:#b3261e}
.vaciop{color:var(--gris);font-family:var(--sans);font-size:13.5px}

/* ================= pizarra ================= */
#pizarra,#laser{position:absolute;inset:0;touch-action:none;display:none;pointer-events:none;
  overscroll-behavior:none}
#pizarra{z-index:7}
#laser{z-index:8}
.deck.pintando #pizarra{display:block;pointer-events:auto;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='8' r='5.4' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 8 8, crosshair}
.deck.pintando.modo-laser #pizarra{cursor:none}
.deck.pintando #laser,.deck.con-trazo #pizarra{display:block}
.deck.pintando .zona{pointer-events:none}
.paleta{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);z-index:9;display:none;
  gap:6px;background:rgba(20,20,22,.82);backdrop-filter:blur(10px);padding:7px;border-radius:99px;
  box-shadow:0 14px 34px rgba(0,0,0,.4)}
.deck.pintando .paleta{display:flex}
.paleta button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--sans);font-size:12px;color:#fff;transition:.16s}
.paleta button:hover{transform:scale(1.12)}
.paleta .color{border:2px solid transparent}
.paleta .color.on{border-color:#fff;transform:scale(1.15)}
.paleta .sep{width:1px;height:22px;background:rgba(255,255,255,.25);align-self:center;margin:0 3px}
.paleta .util{background:rgba(255,255,255,.14);width:auto;padding:0 13px;border-radius:99px}
.paleta .util.on{background:#fff;color:#111}


/* ================= menú plegable ================= */
/* ================= pantallas de la presentación ================= */
.deck.blanco{background:#fff}
.deck.blanco .slide{visibility:hidden}
.deck.difuso .slide{transform:scale(1.03)}
.deck.difuso .slide{filter:blur(20px) saturate(.75)}

/* ================= transición entre diapositivas ================= */
.cortina{position:absolute;inset:0;z-index:7;pointer-events:none;background:var(--c);
  transform-origin:left center;transform:scaleX(0)}
.cortina.va{animation:barre .62s cubic-bezier(.7,0,.2,1)}
@keyframes barre{0%{transform:scaleX(0);transform-origin:left center}
  45%{transform:scaleX(1);transform-origin:left center}
  46%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}}
.slide.on{animation:entraSlide .62s cubic-bezier(.2,.8,.2,1)}
@keyframes entraSlide{0%{opacity:0;transform:scale(1.04)}45%{opacity:0}
  100%{opacity:1;transform:none}}


/* ================= preparar dentro de la presentación ================= */


.deck .aviso-modo{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:9;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(0,0,0,.42);color:#fff;padding:7px 16px;border-radius:99px;backdrop-filter:blur(6px);
  display:none}
.deck.pintando .aviso-modo{display:block}
.deck .ctrl button.on{background:#fff;color:#111}


/* ---------- paleta ampliada ---------- */
.paleta{flex-wrap:wrap;max-width:min(92vw,760px);justify-content:center}
.paleta .mas{position:relative;width:34px;height:34px;border-radius:50%;overflow:hidden;
  border:2px dashed rgba(255,255,255,.55);display:grid;place-items:center;color:#fff;font-size:16px}
.paleta .mas input{position:absolute;inset:0;opacity:0;cursor:pointer;padding:0;border:0}
.paleta .opac{display:flex;align-items:center;gap:8px;color:#fff;font-family:var(--sans);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;padding:0 8px}
.paleta .opac input{width:92px;accent-color:#fff;cursor:pointer}
.paleta .opac b{min-width:34px;text-align:right;font-weight:500;letter-spacing:0;font-size:12px}

/* ---------- ventana de confirmación ---------- */
.confirma{position:absolute;inset:0;z-index:12;display:grid;place-items:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);animation:vista .18s}
.confirma .caja{background:var(--blanco);color:var(--ink);border-radius:18px;padding:26px 28px;
  width:min(420px,88vw);box-shadow:0 30px 70px rgba(0,0,0,.4);text-align:center}
.confirma h4{font-family:var(--sans);font-size:19px;font-weight:600;margin-bottom:8px}
.confirma p{font-size:15px;color:var(--gris);margin-bottom:22px}
.confirma .fila{display:flex;gap:10px;justify-content:center}
.confirma button{font-family:var(--sans);font-size:14px;font-weight:500;padding:11px 20px;border-radius:99px}
.confirma .no{background:var(--papel);border:1px solid var(--linea);color:var(--ink)}
.confirma .si{background:#b3261e;color:#fff}
.confirma .si:hover{background:#8f1e18}


/* ---------- accesibilidad ---------- */
.saltar{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:var(--papel);
  font-family:var(--sans);font-size:13px;padding:13px 18px;border-radius:99px;text-decoration:none}
.saltar:focus{left:12px}
:focus-visible{outline:3px solid var(--c);outline-offset:2px;border-radius:4px}
.lateral :focus-visible{outline-color:#fff}
.nav,.la{min-height:44px}
.item{min-height:48px}
.btn{min-height:42px}
@media(max-width:880px){.btn-icono{width:44px;height:44px}.menu-movil{min-width:44px;min-height:44px}}


/* ---------- 6. ritmo entre años ---------- */
.anio{border-bottom:0;padding:32px 26px;margin:0 -26px 16px;border-radius:22px;
  background:color-mix(in srgb, var(--c) 4.5%, var(--papel))}
.anio:last-child{margin-bottom:0}
body.oscuro .anio{background:color-mix(in srgb, var(--c) 12%, var(--papel))}
.anio .libro{background:var(--blanco)}

/* ---------- 7. textura visual ---------- */
.cab::before,.portada::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 16px)}
.intro p:first-of-type::first-letter{float:left;font-family:var(--sans);font-weight:600;
  font-size:3.5em;line-height:.84;color:var(--c);margin:.06em .12em 0 0}
.bloque{display:flex;align-items:center;gap:10px}
.bloque::before{content:"";width:16px;height:16px;flex-shrink:0;border:2px solid var(--c);
  border-radius:50%}
.bloque:nth-of-type(2)::before{border-radius:3px}
.bloque:nth-of-type(3)::before{border-radius:3px;transform:rotate(45deg)}
.sec h3 span{display:inline-grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;
  background:color-mix(in srgb, var(--c) 13%, transparent);font-size:.72em;margin-right:.55em;
  vertical-align:.12em}

/* ---------- 8. cabecera pegajosa del tema ---------- */
.mini-cab{position:sticky;top:60px;z-index:35;display:flex;align-items:center;gap:12px;
  max-width:none;
  padding:10px 26px;background:color-mix(in srgb,var(--papel) 97%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);animation:vista .2s}
.mini-cab[hidden]{display:none}
.mini-cab .n{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--c);min-width:24px}
.mini-cab b{font-family:var(--sans);font-weight:500;font-size:14px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1}
.mini-cab .btn-mini{font-family:var(--sans);font-size:12.5px;color:var(--c);white-space:nowrap;
  padding:6px 12px;border:1px solid var(--linea);border-radius:99px;background:var(--blanco)}

/* ---------- 9. etiquetas menos rígidas ---------- */
.etq{letter-spacing:.16em;font-size:10.5px;opacity:.72}
.libro .tomo{letter-spacing:.12em}
.anio .etq{margin-bottom:2px}
.bloque{letter-spacing:.12em}
@media(max-width:880px){.anio{margin-left:-18px;margin-right:-18px;padding:26px 18px}
  .mini-cab{padding-left:18px;padding-right:18px}}


/* ================= planes ================= */
.planes .conmuta{display:inline-flex;gap:4px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:99px;padding:4px;margin-bottom:26px}
.planes .conmuta button{font-family:var(--sans);font-size:13.5px;padding:9px 18px;border-radius:99px;
  color:var(--gris);transition:.16s;display:flex;align-items:center;gap:7px}
.planes .conmuta button.on{background:var(--ink);color:var(--papel)}
.planes .conmuta em{font-style:normal;font-size:11px;background:#1e7a45;color:#fff;padding:2px 7px;
  border-radius:99px}
.planes .conmuta button.on em{background:#2fa15f}

.planes-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:880px){.planes-grid{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:18px;
  padding:26px 22px;transition:.24s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.plan.destacado{border:2px solid var(--c);box-shadow:0 18px 44px color-mix(in srgb,var(--c) 18%,transparent)}
.plan .cinta{position:absolute;top:-12px;left:22px;background:var(--c);color:#fff;font-family:var(--sans);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:99px}
.plan h3{font-family:var(--sans);font-weight:600;font-size:19px;margin-bottom:4px}
.plan .para{font-family:var(--sans);font-size:13px;color:var(--gris);min-height:36px}
.plan .precio{font-family:var(--sans);font-weight:600;font-size:38px;margin:14px 0 2px;line-height:1}
.plan .precio span{font-size:13px;font-weight:400;color:var(--gris);margin-left:7px}
.plan .nota{font-family:var(--sans);font-size:12px;color:var(--gris);margin-bottom:18px}
.plan ul{list-style:none;margin-bottom:22px}
.plan li{position:relative;padding-left:24px;font-size:14.5px;margin-bottom:9px;line-height:1.45}
.plan li::before{content:"✓";position:absolute;left:0;top:0;color:var(--c);font-weight:700;
  font-family:var(--sans);font-size:13px}
.plan .btn{width:100%;justify-content:center}

/* ---- lo que añade Formación: programas por código y contenido propio ---- */
.propio-planes{margin:38px 0 8px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:20px;padding:26px 24px}
.propio-planes h2{font-family:var(--sans);font-size:21px;font-weight:600;margin-bottom:8px}
.propio-planes .sub-vista{margin-bottom:20px;max-width:70ch}
.propio-pasos{display:grid;gap:16px;grid-template-columns:1fr;margin-bottom:24px}
@media(min-width:820px){.propio-pasos{grid-template-columns:repeat(3,1fr)}}
.propio-pasos>div{border:1px solid var(--linea);border-radius:14px;padding:16px 16px 14px;
  background:var(--papel)}
.propio-pasos .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--c);color:#fff;font-family:var(--sans);font-size:13px;
  font-weight:600;margin-bottom:8px}
.propio-pasos h4{font-family:var(--sans);font-size:15px;font-weight:600;margin-bottom:4px}
.propio-pasos p{font-size:14px;color:var(--gris);line-height:1.55}
.tabla-planes{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:16px}
.tabla-planes table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.tabla-planes thead th{font-family:var(--sans);font-size:13px;font-weight:600;text-align:center;
  padding:10px 8px;border-bottom:2px solid var(--linea);white-space:nowrap}
.tabla-planes thead th:first-child{text-align:left}
.tabla-planes tbody th{font-weight:400;text-align:left;padding:11px 10px 11px 0;
  border-bottom:1px solid var(--linea);line-height:1.4}
.tabla-planes tbody td{text-align:center;padding:11px 8px;border-bottom:1px solid var(--linea);
  color:var(--gris)}
.tabla-planes .col-mid{background:color-mix(in srgb,var(--c) 7%,transparent);color:var(--ink)}
.tabla-planes tbody tr:last-child th,.tabla-planes tbody tr:last-child td{border-bottom:0}
.propio-planes .letra-chica{font-size:13.5px;color:var(--gris);line-height:1.6;max-width:72ch;
  margin-bottom:10px}
.propio-planes .fila-btn{margin-top:16px}

.planes .extra{margin:34px 0 8px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:18px;padding:24px}
.planes .extra h2{font-family:var(--sans);font-size:17px;font-weight:600;margin-bottom:6px}
.planes .extra p{margin-bottom:16px;max-width:60ch}
.dudas{display:grid;gap:20px;grid-template-columns:1fr;margin:30px 0}
@media(min-width:760px){.dudas{grid-template-columns:1fr 1fr}}
.dudas h4{font-family:var(--sans);font-size:14.5px;font-weight:600;margin-bottom:5px}
.dudas p{font-size:14.5px;color:var(--gris);line-height:1.55}
.contacto-planes{background:var(--c);color:#fff;border-radius:22px;padding:32px 26px;margin:8px 0 20px;
  position:relative;overflow:hidden}
.contacto-planes h2{font-family:var(--sans);font-size:24px;font-weight:600;margin-bottom:6px}
.contacto-planes p{opacity:.92;max-width:52ch}
.contacto-planes .fila-btn{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.contacto-planes .btn{background:#fff;color:var(--c)}
.contacto-planes .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.letra-chica{font-family:var(--sans);font-size:11.5px;opacity:.7;margin-top:18px;max-width:70ch}


/* ---------- centrado general ---------- */
.mini-cab{justify-content:center}
.mini-cab .n,.mini-cab b,.mini-cab .btn-mini{flex:none}
.mini-cab b{max-width:min(60ch,60vw);flex:0 1 auto}
.pie{max-width:var(--ancho);margin:0 auto;width:100%}

/* la portada respira en pantallas anchas */
@media(min-width:1500px){
  :root{--ancho:1380px;--ancho-lectura:1080px}
  .portada{padding:88px 26px 74px}
  .portada h1{font-size:clamp(56px,7vw,116px)}
}


/* ================= cuentas ================= */
.btn-icono .avatar{width:26px;height:26px;border-radius:50%;object-fit:cover}
.btn-icono.entrado{border-color:#e0873f;background:rgba(224,135,63,.25);font-family:var(--sans);
  font-weight:600;font-size:13px}
.modal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);animation:vista .18s;padding:20px}
.modal .caja{background:var(--blanco);color:var(--ink);border-radius:20px;padding:28px;
  width:min(420px,100%);max-height:92vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.modal h3{font-family:var(--sans);font-size:20px;font-weight:600;margin-bottom:6px}
.modal .sub{color:var(--gris);font-size:14.5px;margin-bottom:20px}
.modal label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin:12px 0 5px}
.modal input{width:100%;padding:11px 14px;border:1px solid var(--linea);border-radius:10px;
  background:var(--papel);color:var(--ink);font-size:15px}
.modal input:focus{outline:0;border-color:var(--c)}
.modal .btn{width:100%;justify-content:center;margin-top:16px}
.modal .google{background:#fff;color:var(--ink);border:1px solid var(--linea);
  box-shadow:0 4px 14px rgba(0,0,0,.06)}
.modal .o{display:flex;align-items:center;gap:12px;color:var(--gris);font-family:var(--sans);
  font-size:12px;margin:18px 0 4px}
.modal .o::before,.modal .o::after{content:"";flex:1;height:1px;background:var(--linea)}
.modal .pie-m{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--sans);
  font-size:13px}
.modal .pie-m button{color:var(--c)}
.modal .cerrar-m{position:absolute;top:16px;right:18px;color:#fff;font-size:22px}
.modal .error{background:#fdecea;color:#a0231c;border-radius:10px;padding:10px 12px;
  font-family:var(--sans);font-size:13px;margin-top:14px}
.modal .quien{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.modal .quien img{width:44px;height:44px;border-radius:50%}
.modal .quien b{display:block;font-family:var(--sans);font-size:15px}
.modal .quien small{color:var(--gris);font-size:13px}


/* ================= puerta de entrada ================= */
.puerta{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;
  background:linear-gradient(135deg,#f0741b 0%,#d95c12 38%,#b8410e 72%,#7e2a10 100%);
  overflow:auto}
.puerta::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 16px)}
.puerta .aro-p{position:absolute;width:620px;height:620px;border:1px solid rgba(255,255,255,.22);
  border-radius:50%;right:-220px;top:-260px;pointer-events:none}
.puerta .aro-p::after{content:"";position:absolute;inset:52px;border:1px solid rgba(255,255,255,.14);
  border-radius:50%}
.puerta .panel{position:relative;width:min(920px,100%);display:grid;gap:0;grid-template-columns:1fr;
  background:var(--blanco);border-radius:24px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.35)}
@media(min-width:860px){.puerta .panel{grid-template-columns:1.05fr .95fr}}
.puerta .izq{background:var(--lateral);color:#fff;padding:38px 34px;display:flex;
  flex-direction:column;justify-content:center}
.puerta .izq .etq{margin-bottom:12px}
.puerta .izq h1{font-family:var(--sans);font-weight:300;font-size:clamp(38px,6vw,58px);
  letter-spacing:.14em;text-transform:uppercase;line-height:1;margin-bottom:14px}
.puerta .izq p{opacity:.9;font-size:16px;max-width:34ch}
.puerta .izq ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:11px}
.puerta .izq li{font-family:var(--sans);font-size:14px;padding-left:26px;position:relative;
  opacity:.92}
.puerta .izq li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;
  border-radius:50%;background:#e0873f}
.puerta .der{padding:36px 32px;color:var(--ink)}
.puerta .der h2{font-family:var(--sans);font-size:22px;font-weight:600;margin-bottom:4px}
.puerta .der .sub{color:var(--gris);font-size:14.5px;margin-bottom:20px}
.puerta label{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin:13px 0 5px}
.puerta input{width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:11px;
  background:var(--papel);color:var(--ink);font-size:15px}
.puerta input:focus{outline:0;border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 14%,transparent)}
.puerta .btn{width:100%;justify-content:center;margin-top:18px}
.puerta .google{background:var(--blanco);color:var(--ink);border:1px solid var(--linea);
  box-shadow:0 4px 14px rgba(0,0,0,.06)}
.puerta .o{display:flex;align-items:center;gap:12px;color:var(--gris);font-family:var(--sans);
  font-size:12px;margin:20px 0 2px}
.puerta .o::before,.puerta .o::after{content:"";flex:1;height:1px;background:var(--linea)}
.puerta .pie-m{display:flex;justify-content:space-between;gap:12px;margin-top:16px;
  font-family:var(--sans);font-size:13px;flex-wrap:wrap}
.puerta .pie-m button{color:var(--c)}
.puerta .error{background:#fdecea;color:#a0231c;border-radius:11px;padding:11px 13px;
  font-family:var(--sans);font-size:13px;margin-top:15px}
.puerta .cargando{text-align:center;color:var(--gris);font-family:var(--sans);font-size:14px;
  padding:26px 0}
.puerta .nota-legal{font-family:var(--sans);font-size:11.5px;color:var(--gris);margin-top:18px;
  line-height:1.5}
body.con-puerta{overflow:hidden}


/* ================= diapositivas propias ================= */
.modal .tipos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.modal .tipo{font-family:var(--sans);font-size:13px;padding:8px 14px;border-radius:99px;
  border:1px solid var(--linea);background:var(--papel);color:var(--gris);transition:.16s}
.modal .tipo:hover{border-color:var(--c);color:var(--c)}
.modal .tipo.on{background:var(--ink);color:var(--papel);border-color:var(--ink)}
.modal textarea{width:100%;padding:11px 14px;border:1px solid var(--linea);border-radius:11px;
  background:var(--papel);color:var(--ink);font-family:var(--serif);font-size:15px;resize:vertical}
.modal textarea:focus{outline:0;border-color:var(--c)}
.modal .aviso-campo{font-family:var(--sans);font-size:12px;color:var(--gris);margin-top:8px;
  line-height:1.5}
.modal .pieza em{font-style:italic}

/* diapositiva de vídeo */
.slide.video-slide{padding:calc(5 * var(--vu)) calc(5 * var(--vw2));justify-content:center;align-items:center}
.slide.video-slide .k{align-self:flex-start;margin-bottom:calc(2 * var(--vu))}
.marco-video{width:100%;max-width:min(1500px,92vw);aspect-ratio:16/9;background:#000;
  border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);position:relative}
.marco-video iframe,.marco-video video{width:100%;height:100%;border:0;display:block;
  background:#000;object-fit:contain}
.cargando-video{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sans);
  font-size:14px;color:rgba(255,255,255,.5)}


/* ---------- resaltado dentro de la diapositiva ----------
   Sin esta regla el <mark> se queda con el amarillo por defecto del navegador
   y el color elegido no se ve: en la diapositiva no se aplica la clase «sub»,
   así que la de la vista de lectura no llega aquí. */
.slide mark{background:linear-gradient(transparent 36%,
  color-mix(in srgb,var(--marca,var(--c)) 45%,transparent) 36%,
  color-mix(in srgb,var(--marca,var(--c)) 45%,transparent) 88%,transparent 88%);
  color:inherit;padding:0 2px;border-radius:2px}

/* ---------- resaltado con nota al pasar el cursor ---------- */
.slide mark.con-nota{cursor:help;position:relative;
  box-shadow:inset 0 -2px 0 0 color-mix(in srgb,var(--marca,var(--c)) 75%,transparent)}
.slide mark.con-nota::after{content:attr(data-nota);position:absolute;left:50%;bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(6px);width:max-content;max-width:min(46ch,calc(60 * var(--vw2)));
  background:var(--blanco);color:var(--ink);font-family:var(--sans);font-style:normal;
  font-size:clamp(13px,calc(1.5 * var(--vu)),17px);line-height:1.45;text-transform:none;letter-spacing:0;
  padding:14px 16px;border-radius:14px;box-shadow:0 20px 44px rgba(0,0,0,.32);
  border-left:4px solid var(--c);opacity:0;pointer-events:none;transition:.18s;z-index:20;
  white-space:normal;text-align:left}
.slide mark.con-nota::before{content:"";position:absolute;left:50%;bottom:calc(100% + 5px);
  width:12px;height:12px;background:var(--blanco);transform:translateX(-50%) rotate(45deg);
  opacity:0;transition:.18s;z-index:19}
.slide mark.con-nota:hover::after,.slide mark.con-nota:hover::before,
.slide mark.con-nota.ver-nota::after,.slide mark.con-nota.ver-nota::before{opacity:1}
.slide mark.con-nota:hover::after,.slide mark.con-nota.ver-nota::after{
  transform:translateX(-50%) translateY(0)}


/* ---------- paleta ---------- */
.paleta .util.ico{width:38px;padding:0;font-size:16px;display:grid;place-items:center}
.paleta .util:disabled{opacity:.32;cursor:default}
.paleta .util:disabled:hover{background:rgba(255,255,255,.14)}
.paleta .grosor-caja{display:flex;align-items:center;gap:9px;color:#fff;font-family:var(--sans);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:0 6px}
.paleta .grosor-caja input{width:96px;accent-color:#fff;cursor:pointer}
.paleta .grosor-caja b{min-width:42px;text-align:right;font-weight:500;letter-spacing:0;font-size:12px}


/* ---------- aviso de versión nueva ---------- */
.nueva-version{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:160;
  display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--papel);
  font-family:var(--sans);font-size:13.5px;padding:12px 14px 12px 20px;border-radius:99px;
  box-shadow:0 20px 44px rgba(0,0,0,.34);animation:vista .3s;max-width:calc(100vw - 32px)}
.nueva-version button{font-family:var(--sans);font-size:13px;font-weight:500;padding:8px 16px;
  border-radius:99px;background:var(--papel);color:var(--ink);white-space:nowrap}
.nueva-version button.luego{background:transparent;color:var(--papel);opacity:.65;padding:8px 6px}
.nueva-version button.luego:hover{opacity:1}


/* ---------- resaltado y nota en el modo lectura ---------- */
.cuerpo-vista mark.sub{background:linear-gradient(transparent 36%,
  color-mix(in srgb,var(--marca,var(--c)) 42%,transparent) 36%,
  color-mix(in srgb,var(--marca,var(--c)) 42%,transparent) 88%,transparent 88%);
  color:inherit;padding:0 2px;border-radius:2px}
.cuerpo-vista mark.con-nota{position:relative;cursor:help;
  box-shadow:inset 0 -2px 0 0 color-mix(in srgb,var(--marca,var(--c)) 80%,transparent)}
.cuerpo-vista mark.con-nota::after{content:attr(data-nota);position:absolute;left:0;
  bottom:calc(100% + 12px);width:max-content;max-width:min(44ch,80vw);background:var(--blanco);
  color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;padding:13px 15px;
  border-radius:12px;border-left:4px solid var(--c);box-shadow:0 18px 40px rgba(0,0,0,.22);
  opacity:0;pointer-events:none;transition:.18s;z-index:30;transform:translateY(6px)}
.cuerpo-vista mark.con-nota:hover::after,
.cuerpo-vista mark.con-nota.ver-nota::after{opacity:1;transform:translateY(0)}


/* ---------- lista de diapositivas ya añadidas ---------- */
.modal .ya-hay{margin-top:22px;padding-top:16px;border-top:1px solid var(--linea)}
.modal .ya-hay h4{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin-bottom:8px}
.modal .ya-hay .pieza{padding:9px 0}
.modal .ya-hay em{font-style:italic;font-size:13.5px}


/* ---------- elegir color del resaltado ---------- */
.barra-prep .sepb{width:1px;height:20px;background:rgba(255,255,255,.22);align-self:center;margin:0 4px}
.barra-prep .pcolor{width:22px;height:22px;border-radius:50%;padding:0;border:2px solid transparent;
  flex-shrink:0;transition:.15s}
.barra-prep .pcolor:hover{transform:scale(1.14)}
.barra-prep .pcolor.on{border-color:#fff;transform:scale(1.14)}
.barra-prep{align-items:center;flex-wrap:nowrap}


/* ---------- protección del contenido ---------- */
.contenido,.deck{-webkit-touch-callout:none}
.contenido img,.deck img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
@media print{
  body *{display:none!important}
  body::after{content:"El contenido de The Emaús no se puede imprimir.";display:block!important;
    font-family:var(--sans);font-size:16px;padding:40px}
}
body.imprimiendo .contenido,body.imprimiendo .deck{visibility:hidden}


/* ---------- ventana de compartir ---------- */
.vista-tarjeta{position:relative;height:min(44vh,420px);aspect-ratio:9/16;width:auto;
  border-radius:16px;overflow:hidden;background:var(--papel);border:1px solid var(--linea);
  margin:0 auto 18px;display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,0,.14)}
.vista-tarjeta img{width:100%;height:100%;object-fit:contain;display:block}
.cargando-tarjeta{font-family:var(--sans);font-size:13.5px;color:var(--gris)}
.modal .btn + .btn{margin-top:9px}
.barra-prep button{white-space:nowrap}


/* ---------- panel de cuenta ---------- */
.modal .quien .inicial{width:44px;height:44px;border-radius:50%;background:var(--c);color:#fff;
  display:grid;place-items:center;font-family:var(--sans);font-weight:600;font-size:18px;flex-shrink:0}
.anillo-cuenta{display:flex;align-items:center;gap:18px;background:var(--papel);
  border:1px solid var(--linea);border-radius:16px;padding:16px 18px;margin:4px 0 6px;position:relative}
.anillo-cuenta svg{width:84px;height:84px;flex-shrink:0}
.anillo-cuenta circle{fill:none;stroke-width:7}
.anillo-cuenta .fondo{stroke:var(--linea)}
.anillo-cuenta .arco{stroke:var(--c);stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.anillo-cuenta .centro{position:absolute;left:18px;width:84px;text-align:center;pointer-events:none}
.anillo-cuenta .centro b{display:block;font-family:var(--sans);font-weight:600;font-size:19px;line-height:1}
.anillo-cuenta .centro small{display:block;font-family:var(--sans);font-size:9px;color:var(--gris);
  letter-spacing:.06em;margin-top:2px}
.anillo-cuenta .al-lado b{display:block;font-family:var(--sans);font-weight:600;font-size:16px}
.anillo-cuenta .al-lado small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--gris)}
.anillo-cuenta .ir-tema{display:block;margin-top:9px;font-family:var(--sans);font-size:12.5px;
  color:var(--c);text-align:left}
.anillo-cuenta .ir-tema:hover{text-decoration:underline}

.modal .tit-bloque{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);margin:20px 0 9px}
.anios-cuenta{display:flex;flex-direction:column;gap:9px}
.fila-anio{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13px}
.fila-anio .pt{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.fila-anio b{font-weight:500;min-width:74px}
.fila-anio .barra-fina{flex:1;background:var(--linea);height:5px}
.fila-anio em{font-style:normal;color:var(--gris);font-size:12px;min-width:42px;text-align:right}

.rejilla-cuenta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rejilla-cuenta div{background:var(--papel);border:1px solid var(--linea);border-radius:12px;
  padding:12px 6px;text-align:center}
.rejilla-cuenta b{display:block;font-family:var(--sans);font-weight:600;font-size:19px}
.rejilla-cuenta small{display:block;font-family:var(--sans);font-size:10.5px;color:var(--gris);margin-top:2px}
.dato-fino{font-family:var(--sans);font-size:12px;color:var(--gris);margin-top:9px;line-height:1.5}

.datos-cuenta{list-style:none}
.datos-cuenta li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--linea);font-family:var(--sans);font-size:13.5px}
.datos-cuenta li:last-child{border-bottom:0}
.datos-cuenta span{color:var(--gris)}
.datos-cuenta b{font-weight:500}
.acciones-cuenta{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.acciones-cuenta .btn{width:100%;justify-content:center;margin-top:0}


/* ---------- citas bíblicas ---------- */
.cita-b{cursor:help;border-bottom:1px dotted color-mix(in srgb,var(--c) 60%,transparent);
  color:inherit;white-space:nowrap;transition:.15s}
.cita-b:hover{background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:3px}
.slide .cita-b{border-bottom-color:currentColor;opacity:.92}

.globo-cita{position:absolute;z-index:135;width:min(420px,calc(100vw - 28px));
  background:var(--blanco);color:var(--ink);border-radius:16px;padding:18px 20px;
  box-shadow:0 24px 54px rgba(0,0,0,.28);border-left:4px solid var(--c);animation:vista .16s}
.deck .globo-cita{position:absolute}
.globo-cita .ref-b{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c);margin-bottom:9px}
.globo-cita p{font-family:var(--serif);font-size:16px;line-height:1.6;font-style:italic}
.globo-cita .version-b{font-family:var(--sans);font-size:11.5px;color:var(--gris);margin-top:11px}
.globo-cita .sin-texto{font-family:var(--sans);font-style:normal;font-size:14px;color:var(--gris)}
.globo-cita .abrir-b{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:13.5px;
  color:var(--c);text-decoration:none;font-weight:500}
.globo-cita .abrir-b:hover{text-decoration:underline}

/* ---------- el lector de la Biblia ---------- */
.biblia-vista{--c:var(--ink)}
.biblia-vista .sec-b{margin:0 0 26px}
.biblia-vista .sec-b h3{font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin:0 0 10px;font-weight:600}
.libros-b{display:flex;flex-wrap:wrap;gap:7px}
.libro-b{font-family:var(--sans);font-size:14px;text-decoration:none;color:var(--ink);
  padding:8px 13px;border-radius:9px;background:color-mix(in srgb,var(--ink) 5%,transparent);
  transition:.16s;min-height:38px;display:inline-flex;align-items:center}
.libro-b:hover{background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}

/* aviso: este resaltado no tiene diapositiva donde aparecer */
.panel-prep .solo-lect{font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px;
  margin-left:7px;vertical-align:1px;color:var(--gris);
  background:color-mix(in srgb,var(--ink) 9%,transparent)}

/* botón para quitar un resaltado tocándolo en el texto */
.quitar-marca{position:absolute;z-index:140;font-family:var(--sans);font-size:12.5px;
  padding:8px 13px;border-radius:9px;border:0;cursor:pointer;min-height:38px;
  background:var(--ink);color:var(--blanco);box-shadow:0 10px 26px rgba(0,0,0,.26);
  animation:vista .14s}
.quitar-marca:hover{background:var(--c)}
/* dentro de la presentación va por encima de la diapositiva y de la pizarra */
.deck .quitar-marca{z-index:150;background:#fff;color:#111}
.deck .quitar-marca:hover{background:var(--c);color:#fff}

/* el panel «lo que marcaste», dentro del lector */
.biblia-vista .panel-prep{margin-top:34px}

/* pestañas del lector */
.pest-b{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 26px;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.pest-b .pest{font-family:var(--sans);font-size:14px;text-decoration:none;color:var(--gris);
  padding:10px 15px;border-radius:9px 9px 0 0;border-bottom:2px solid transparent;
  transition:.16s;min-height:42px;display:inline-flex;align-items:center}
.pest-b .pest:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.pest-b .pest.on{color:var(--c);border-bottom-color:var(--c);font-weight:500}

/* plan de lectura */
.etapa-b{margin:0 0 30px}
.etapa-b h3{font-family:var(--sans);font-size:16px;margin:0 0 5px;font-weight:600}
.porque-b{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--gris);
  margin:0 0 12px;max-width:46em}
.lectura-b{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);
  padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--ink) 5%,transparent);
  transition:.16s;min-height:44px;justify-content:center}
.lectura-b:hover{background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.lectura-b b{font-family:var(--sans);font-size:14px;font-weight:500}
.lectura-b i{font-family:var(--sans);font-size:11.5px;color:var(--gris);font-style:normal}
.lectura-b:hover i{color:inherit;opacity:.75}

/* temas */
.temas-b{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px}
.tema-b{font-family:var(--sans);font-size:14px;color:var(--ink);cursor:pointer;
  padding:8px 13px;border-radius:9px;border:0;min-height:38px;display:inline-flex;
  align-items:center;gap:7px;background:color-mix(in srgb,var(--ink) 5%,transparent);transition:.16s}
.tema-b:hover{background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.tema-b.on{background:var(--c);color:#fff}
.tema-b i{font-style:normal;font-size:11px;opacity:.6}
.tit-refs{font-family:var(--sans);font-size:16px;margin:0 0 4px;font-weight:600}

.ref-item{display:block;text-decoration:none;color:var(--ink);padding:11px 14px;
  border-radius:10px;margin:0 0 6px;transition:.16s;
  background:color-mix(in srgb,var(--ink) 4%,transparent)}
.ref-item:hover{background:color-mix(in srgb,var(--c) 11%,transparent)}
.ref-c{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c);margin-bottom:4px}
.ref-t{display:block;font-family:var(--serif);font-size:15.5px;line-height:1.55}

.campo-b{margin:0 0 20px;max-width:30em}
.campo-b input{width:100%;font-family:var(--sans);font-size:16px;padding:13px 16px;
  border-radius:11px;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  background:var(--blanco);color:var(--ink);min-height:48px}
.campo-b input:focus{outline:2px solid var(--c);outline-offset:1px;border-color:transparent}

.cab-b{margin:0 0 20px}
.cab-b h2{font-family:var(--display,var(--sans));font-size:30px;margin:6px 0 0;line-height:1.15}
.cab-b .sub-b{font-family:var(--sans);font-size:13.5px;color:var(--gris);margin:5px 0 0}
.volver-b{font-family:var(--sans);font-size:13px;color:var(--gris);text-decoration:none}
.volver-b:hover{color:var(--c)}

.caps-b{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:7px}
.cap-b{display:flex;align-items:center;justify-content:center;min-height:46px;
  font-family:var(--sans);font-size:15px;text-decoration:none;color:var(--ink);
  border-radius:9px;background:color-mix(in srgb,var(--ink) 5%,transparent);transition:.16s}
.cap-b:hover{background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}

.arg-cap{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--gris);
  margin:0 0 22px;padding:12px 15px;border-radius:10px;
  background:color-mix(in srgb,var(--ink) 4%,transparent);border-left:3px solid var(--c)}

.texto-b{max-width:38em;margin:0;text-align:left}
.texto-b .verso-l{font-family:var(--serif);font-size:18px;line-height:1.75;margin:0 0 11px;
  text-align:left;text-indent:0}
.texto-b .nv-l{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--c);
  vertical-align:.4em;margin-right:4px;opacity:.85;user-select:none}

.notas-cap{margin-top:34px;padding-top:20px;max-width:44em;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.notas-cap h3{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin:0 0 12px;font-weight:600}
.notas-cap .nota-b{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--gris);
  margin:0 0 9px;padding:4px 6px;border-radius:6px;transition:.18s}
.notas-cap .nota-b .nn{font-weight:600;color:var(--c);margin-right:5px}
.notas-cap .nota-b.viva{background:color-mix(in srgb,var(--c) 10%,transparent);color:var(--ink)}

.paso-b{display:flex;justify-content:space-between;gap:12px;margin-top:34px}

@media (max-width:640px){
  .texto-b .verso-l{font-size:17px}
  .cab-b h2{font-size:25px}
  .caps-b{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}
}

/* aviso de numeración de la Vulgata en los salmos */
.globo-cita .vulg-b{font-family:var(--sans);font-style:normal;font-size:11.5px;line-height:1.45;
  color:var(--gris);margin-bottom:10px;padding:5px 8px;border-radius:6px;
  background:color-mix(in srgb,var(--c) 8%,transparent)}

/* argumento del capítulo, en redonda y más pequeño que el texto sagrado */
.globo-cita .arg-b{font-family:var(--sans);font-style:normal;font-size:13px;line-height:1.55;
  color:var(--gris);margin-bottom:12px;padding-bottom:11px;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}

/* versículos */
.globo-cita .versos-b{max-height:46vh;overflow:auto;overscroll-behavior:contain}
.globo-cita .verso-b{margin:0 0 7px}
.globo-cita .verso-b:last-child{margin-bottom:0}
.globo-cita .nv{font-family:var(--sans);font-style:normal;font-size:10.5px;font-weight:600;
  color:var(--c);vertical-align:.35em;margin-right:3px;opacity:.85}

/* llamada de nota: voladita, como en el impreso (globo y lector) */
.marca-n{font-family:var(--sans);font-style:normal;font-size:9.5px;font-weight:600;
  line-height:0;color:var(--c);cursor:help;margin-left:1px;padding:0 1px;border-radius:2px;
  vertical-align:super;user-select:none}
.marca-n:hover{background:color-mix(in srgb,var(--c) 18%,transparent)}
.texto-b .marca-n{font-size:10.5px}

/* notas al pie */
.globo-cita .notas-b{margin-top:13px;padding-top:11px;max-height:34vh;overflow:auto;
  overscroll-behavior:contain;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.globo-cita .notas-t{font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.globo-cita .nota-b{font-family:var(--sans);font-style:normal;font-size:12.5px;line-height:1.5;
  color:var(--gris);margin:0 0 7px;padding:3px 5px;border-radius:5px;transition:.18s}
.globo-cita .nota-b:last-child{margin-bottom:0}
.globo-cita .nota-b .nn{font-weight:600;color:var(--c);margin-right:4px}
.globo-cita .nota-b.viva{background:color-mix(in srgb,var(--c) 10%,transparent);color:var(--ink)}

/* globos encadenados: cada nivel se despega un poco más del fondo */
.globo-cita[data-nivel="1"]{z-index:136;box-shadow:0 26px 58px rgba(0,0,0,.34)}
.globo-cita[data-nivel="2"]{z-index:137;box-shadow:0 28px 62px rgba(0,0,0,.38)}
.globo-cita[data-nivel="3"]{z-index:138;box-shadow:0 30px 66px rgba(0,0,0,.42)}
.globo-cita.cargando .sin-texto{opacity:.7}


/* ---------- áreas táctiles: mínimo 44px ----------
   La auditoría encontró 145 elementos por debajo de 40px. Los peores eran los
   enlaces de los libros en «Mi avance», con 20px de alto: en el móvil son casi
   imposibles de acertar. */
.tabla td a{display:inline-block;padding:11px 0;min-height:44px;line-height:1.35;
  display:flex;align-items:center}
.tabla td{padding-top:2px;padding-bottom:2px}
.libro-b,.cap-b,.tema-b{min-height:44px}
.aro-prog{min-width:44px;min-height:44px}
header .btn-icono{min-width:44px;min-height:44px}
.pest-b .pest{min-height:44px}
.ref-item{min-height:44px}

/* tarjeta de «seguir leyendo la Biblia» en la portada */
.util-inicio .biblia-uc{text-decoration:none;display:flex;flex-direction:column;justify-content:center}

/* ---------- versículos que la formación cita ---------- */
.citado-aviso{font-family:var(--sans);font-size:13px;color:var(--gris);margin:0 0 18px;
  padding:9px 13px;border-radius:9px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.texto-b .verso-l.citado{padding-left:11px;border-left:3px solid color-mix(in srgb,var(--c) 55%,transparent)}
.en-temas{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.chip-tema{font-family:var(--sans);font-size:11.5px;text-decoration:none;color:var(--c);
  padding:5px 11px;border-radius:99px;min-height:30px;display:inline-flex;align-items:center;
  background:color-mix(in srgb,var(--c) 11%,transparent);transition:.16s}
.chip-tema:hover{background:color-mix(in srgb,var(--c) 22%,transparent)}

/* puente del desplegable de búsqueda hacia la Biblia */
#res .ir-biblia{border-left-color:var(--ink) !important;background:color-mix(in srgb,var(--ink) 4%,transparent)}
#res .ir-biblia b{font-weight:600}


/* ================= vista de presentador =================
   Segunda ventana para quien conduce la reunión. Fondo oscuro para no
   deslumbrar en penumbra, y todo lo que el público no ve: lo que viene
   después, el tiempo por bloque y los apuntes. */
body.modo-presentador{background:#14110f}
body.modo-presentador .app>header,
body.modo-presentador .mini-cab{display:none}
body.modo-presentador .principal{padding:0;max-width:none}
body.modo-presentador .contenido{padding:0}

.presentador{--c:#c1591b;min-height:100vh;background:#14110f;color:#f4efe9;
  display:flex;flex-direction:column;font-family:var(--sans)}
.pres-cab{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 26px;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.pres-tit h1{font-size:21px;margin:0;line-height:1.2;color:#fff}
.pres-tit small{font-size:12.5px;color:rgba(255,255,255,.5)}
.pres-relojes{display:flex;gap:26px}
.pres-relojes .rel{text-align:right}
.pres-relojes b{display:block;font-size:27px;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;color:var(--c)}
.pres-relojes span{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;
  color:rgba(255,255,255,.42)}

.pres-cuerpo{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:22px 26px}
.pres-col h2{font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.42);margin:0 0 10px;font-weight:600}
.mini-slide{background:#000;border-radius:14px;overflow:hidden;position:relative;
  aspect-ratio:16/9;border:1px solid rgba(255,255,255,.1)}
.mini-slide.sig{opacity:.72}
.mini-slide .mini-marco{position:absolute;top:0;left:0;width:1280px;height:720px;border:0;
  transform-origin:top left;pointer-events:none;background:var(--papel)}
.pres-vacio{display:grid;place-items:center;height:100%;color:rgba(255,255,255,.35);
  font-size:13.5px;text-align:center;padding:20px}

.pres-mando{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.pres-mando .btn{min-height:46px}
.pres-mando .btn.ghost{background:transparent;color:#f4efe9;border:1px solid rgba(255,255,255,.22)}
.pres-mando .btn.ghost:hover{background:rgba(255,255,255,.09)}

.pres-apuntes{margin-top:16px;max-height:38vh;overflow:auto}
.pres-apuntes h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--c);margin:16px 0 7px;font-weight:600}
.pres-apuntes h3:first-child{margin-top:0}
.pres-apuntes p,.pres-apuntes li{font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 7px}
.pres-apuntes ul{padding-left:19px;margin:0}
.pres-apuntes .apunte em{display:block;color:rgba(255,255,255,.45);font-size:12.5px;margin-bottom:2px}

@media (max-width:900px){
  .pres-cuerpo{grid-template-columns:1fr}
  .pres-relojes{gap:16px}
  .pres-relojes b{font-size:22px}
}

/* ---------- control de pantalla y notas privadas del presentador ---------- */
.pres-pantalla{margin-top:14px}
.pres-etq{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.4);margin-bottom:7px}
.pres-mando .btn.oculta{font-size:13px;padding:9px 14px}
.pres-mando .btn.oculta em{font-style:normal;opacity:.42;margin-left:6px;font-size:11px}
.pres-mando .btn.oculta.on{background:var(--c);border-color:var(--c);color:#fff}
.pres-mando .btn.oculta.on em{opacity:.7}

.pres-privadas{margin-top:16px}
.pres-privadas h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--c);margin:0 0 7px;font-weight:600;display:flex;align-items:center;gap:9px}
.pres-privadas .solo-tu{text-transform:none;letter-spacing:0;font-weight:400;font-size:11px;
  color:rgba(255,255,255,.42);background:rgba(255,255,255,.08);padding:2px 9px;border-radius:99px}
.pres-privadas textarea{width:100%;min-height:96px;resize:vertical;border-radius:11px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#f4efe9;
  font-family:var(--sans);font-size:14px;line-height:1.5;padding:12px 14px}
.pres-privadas textarea:focus{outline:2px solid var(--c);outline-offset:1px;border-color:transparent}
.pres-privadas textarea::placeholder{color:rgba(255,255,255,.32)}
.pres-privadas small{display:block;margin-top:5px;font-size:11.5px;color:rgba(255,255,255,.38)}

/* ---------- la miniatura refleja lo que ve la sala ---------- */
.mini-slide{position:relative}
.mini-slide.tapa-negro::after,.mini-slide.tapa-blanco::after{content:"";position:absolute;
  inset:0;z-index:2;border-radius:14px}
.mini-slide.tapa-negro::after{background:#000}
.mini-slide.tapa-blanco::after{background:#fff}
.mini-slide.tapa-difuso .mini-marco{filter:blur(9px) saturate(.85)}
.mini-slide.tapa-difuso::after{content:"";position:absolute;inset:0;z-index:2;
  border-radius:14px;background:rgba(0,0,0,.18)}
.pres-tapa{font-size:10.5px;text-transform:none;letter-spacing:0;font-weight:400;
  color:var(--c);margin-left:9px}
.pres-privadas .otras{color:rgba(255,255,255,.32);margin-top:2px}

/* ---------- invitación a instalar la aplicación ---------- */
.instalar-banda{position:fixed;left:0;right:0;top:0;z-index:160;
  transform:translateY(-110%);transition:transform .34s cubic-bezier(.2,.8,.2,1);
  background:var(--ink);color:var(--papel);box-shadow:0 12px 34px rgba(0,0,0,.3)}
.instalar-banda.on{transform:translateY(0)}
.instalar-banda .ib-in{max-width:1180px;margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.instalar-banda .ib-icono{width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--c,#c1591b);display:grid;grid-template-columns:1fr 1fr;gap:3px;
  place-content:center;padding:9px}
.instalar-banda .ib-icono span{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9}
.instalar-banda .ib-icono span:nth-child(2),
.instalar-banda .ib-icono span:nth-child(3){opacity:.55}
.instalar-banda .ib-txt{flex:1;min-width:210px}
.instalar-banda .ib-txt b{display:block;font-family:var(--sans);font-size:15px;font-weight:600}
.instalar-banda .ib-txt small{display:block;font-family:var(--sans);font-size:12.5px;
  color:rgba(255,255,255,.62);line-height:1.45;margin-top:2px}
.instalar-banda .ib-btn{display:flex;gap:9px;flex-wrap:wrap}
.instalar-banda .btn{min-height:44px;font-size:14px}
.instalar-banda .btn.ghost{background:transparent;color:var(--papel);
  border:1px solid rgba(255,255,255,.26)}
.instalar-banda .btn.ghost:hover{background:rgba(255,255,255,.1)}
@media (max-width:620px){
  .instalar-banda .ib-in{padding:12px 15px;gap:11px}
  .instalar-banda .ib-btn{width:100%}
  .instalar-banda .ib-btn .btn{flex:1}
}

/* ---------- Formación: los programas ---------- */
.progs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:30px}
.prog{display:flex;flex-direction:column;gap:3px;text-align:left;text-decoration:none;color:var(--ink);
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:18px 20px;
  border-left:4px solid var(--c);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
  cursor:pointer;min-height:118px}
.prog:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.1)}
.prog .etq{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.prog b{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:.02em}
.prog small{font-family:var(--sans);font-size:13px;color:var(--gris)}
.prog .pie{font-family:var(--sans);font-size:12px;color:var(--gris);margin-top:auto;padding-top:9px}
.prog.cerrado{opacity:.62;border-left-style:dashed}
.prog.cerrado:hover{opacity:.9}
.prog.propio{border-left-style:double;border-left-width:5px}

.acciones-prog{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 26px}
.acciones-prog .btn{min-height:46px}

.plan-caja{background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:var(--r);padding:20px 22px}
.plan-caja h3{font-family:var(--sans);font-size:15px;margin:0 0 6px}
.plan-caja p{font-family:var(--sans);font-size:13.5px;color:var(--gris);margin:0 0 6px;line-height:1.55}
.plan-caja .cuenta b{color:var(--ink)}
.aviso-plan{font-family:var(--sans);font-size:12px;color:var(--gris);line-height:1.5;
  background:color-mix(in srgb,var(--ink) 5%,transparent);padding:9px 12px;border-radius:8px;margin-top:10px}
.pista-cod{font-family:var(--sans);font-size:12.5px;color:var(--gris);margin-top:12px;line-height:1.5}
.pista-cod.mal{color:var(--ink);background:color-mix(in srgb,var(--c) 10%,transparent);
  padding:9px 12px;border-radius:8px}
.planes-demo{display:grid;gap:9px;margin-top:6px}
.plan-op{text-align:left;background:var(--blanco);border:1px solid var(--linea);border-radius:11px;
  padding:13px 15px;cursor:pointer;min-height:56px}
.plan-op.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,transparent)}
.plan-op b{display:block;font-family:var(--sans);font-size:14.5px}
.plan-op small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--gris);margin-top:2px}

/* ---------- subir contenido ---------- */
.subir-caja{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.subir-archivo{display:flex;flex-direction:column;gap:2px;cursor:pointer;padding:16px 22px;
  border:2px dashed var(--linea);border-radius:var(--r);transition:.18s;min-height:74px;justify-content:center}
.subir-archivo:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 5%,transparent)}
.subir-archivo b{font-family:var(--sans);font-size:15px}
.subir-archivo small{font-family:var(--sans);font-size:12.5px;color:var(--gris)}
.subir-caja .o{font-family:var(--sans);font-size:13px;color:var(--gris)}

.ayuda-formato{background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:11px;
  padding:14px 16px;margin-bottom:16px}
.ayuda-formato b{font-family:var(--sans);font-size:13px;display:block;margin-bottom:8px}
.ayuda-formato code{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:6px;padding:3px 9px;margin:0 6px 6px 0}
.ayuda-formato p{font-family:var(--sans);font-size:12.5px;color:var(--gris);margin:4px 0 0;line-height:1.5}

.texto-prog{width:100%;min-height:280px;resize:vertical;font-family:var(--sans);font-size:14.5px;
  line-height:1.6;padding:16px 18px;border-radius:12px;border:1px solid var(--linea);
  background:var(--blanco);color:var(--ink)}
.texto-prog:focus{outline:2px solid var(--c);outline-offset:1px;border-color:transparent}

.orto-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
.orto-auto{font-family:var(--sans);font-size:13.5px;display:flex;align-items:center;gap:8px;
  cursor:pointer;min-height:44px}
.orto-tit{font-family:var(--sans);font-size:13px;color:var(--gris);margin:0 0 8px}
.orto-ok{font-family:var(--sans);font-size:13.5px;color:#1e7a45;margin:0}
.orto-fila{display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:11px 14px;margin-bottom:7px}
.orto-txt b{display:block;font-family:var(--sans);font-size:13.5px}
.orto-txt small{display:block;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--gris);
  margin-top:3px;white-space:pre-wrap;word-break:break-word}
.orto-fila .btn{min-height:40px;flex-shrink:0}
.pendiente{font-family:var(--sans);font-size:13px;color:var(--gris);
  background:color-mix(in srgb,var(--ink) 6%,transparent);padding:10px 14px;border-radius:9px}
.num-t{opacity:.5;margin-right:6px}

/* ============================================================
   Saludo, perfil y explicación de qué es The Emaús
   ============================================================ */
.fila-btn{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lig{font-family:var(--sans);font-size:13px;color:var(--c);text-decoration:underline;
  text-underline-offset:3px;padding:4px 0;min-height:auto}
.lig:hover{opacity:.75}

.saludo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:26px 0 -6px}
.saludo b{font-family:var(--sans);font-size:19px;font-weight:600}

.etq-sec{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c);
  background:color-mix(in srgb,var(--c) 10%,transparent);padding:5px 12px;border-radius:99px}

/* ============================================================
   ¿Qué es The Emaús? — carrusel de portada
   Va justo debajo de la portada naranja. En vez de una parrafada
   larga, seis láminas que se pasan solas: una idea cada vez.
   ============================================================ */
.qcar{position:relative;margin:26px 0 10px;padding:22px 26px 16px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:22px;overflow:hidden;box-shadow:var(--sombra)}
.qcar::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--c),#e2933f)}
@media(max-width:620px){.qcar{padding:18px 18px 12px;border-radius:18px;margin-top:20px}}

.qcar-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.qcar-flechas{display:flex;gap:8px}
.qcar-fl{width:34px;height:34px;border-radius:50%;border:1px solid var(--linea);
  background:var(--papel);font-size:19px;line-height:1;color:var(--gris);
  display:flex;align-items:center;justify-content:center;transition:.16s}
.qcar-fl:hover{background:var(--c);border-color:var(--c);color:#fff}

/* Todas las láminas ocupan la misma celda: la altura la fija la más
   alta y no hay saltos al pasar. */
.qcar-lienzo{display:grid}
.qsl{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s}
.qsl.activa{opacity:1;visibility:visible;pointer-events:auto}
.qsl>*{flex:0 0 auto}
.qsl>*{opacity:0}
.qsl.activa>*{animation:qentra .5s cubic-bezier(.2,.7,.3,1) both}
.qsl.activa>*:nth-child(1){animation-delay:.04s}
.qsl.activa>*:nth-child(2){animation-delay:.16s}
.qsl.activa>*:nth-child(3){animation-delay:.28s}
.qsl.activa>*:nth-child(4){animation-delay:.40s}
@keyframes qentra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.qsl h2{font-family:var(--sans);font-size:26px;font-weight:600;line-height:1.25;
  margin-bottom:12px;max-width:26ch}
.qsl h2 em{font-style:normal;color:var(--c)}
.qsl-ico{display:block;font-size:26px;line-height:1;margin-bottom:8px}
.qsl-p{font-size:16px;line-height:1.65;max-width:66ch;margin-bottom:14px}
@media(max-width:620px){.qsl h2{font-size:20px}.qsl-p{font-size:15px}}

.qsl-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.qsl-chips span{font-family:var(--sans);font-size:13px;color:var(--gris);background:var(--papel);
  border:1px solid var(--linea);border-radius:99px;padding:7px 14px}
.qsl-chips b{color:var(--c);font-weight:600;font-size:14.5px}

.qsl-lista{list-style:none;display:grid;gap:9px;max-width:62ch}
.qsl-lista li{position:relative;padding-left:26px;font-size:15px;line-height:1.55;color:var(--gris)}
.qsl-lista li b{color:var(--ink);font-weight:600}
.qsl-lista li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--c)}

.qsl-quienes{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.qsl-quienes{grid-template-columns:repeat(3,1fr)}}
.qsl-quienes>div{border-left:3px solid var(--c);padding:4px 0 4px 14px}
.qsl-quienes b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;margin-bottom:3px}
.qsl-quienes span{font-size:14px;color:var(--gris);line-height:1.55}

.qsl-pasos{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:18px}
@media(min-width:760px){.qsl-pasos{grid-template-columns:repeat(3,1fr)}}
.qsl-pasos>div{background:var(--papel);border-radius:15px;padding:16px}
.qsl-pasos .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--c);color:#fff;font-family:var(--sans);font-size:14px;
  font-weight:600;margin-bottom:8px}
.qsl-pasos h4{font-family:var(--sans);font-size:15px;font-weight:600;margin-bottom:4px}
.qsl-pasos p{font-size:14px;color:var(--gris);line-height:1.55}
.qsl-pie{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.qsl-pie .fino{font-family:var(--sans);font-size:12.5px;color:var(--gris)}

/* En el teléfono la lámina más alta es la que manda sobre la altura de
   todas: los pasos se aprietan para que no quede un hueco enorme. */
@media(max-width:620px){
  .qsl-pasos{gap:10px;margin-bottom:14px}
  .qsl-pasos>div{display:grid;grid-template-columns:26px 1fr;column-gap:11px;padding:12px 14px}
  .qsl-pasos .n{width:26px;height:26px;margin:0;font-size:13px;grid-row:span 2}
  .qsl-pasos h4{align-self:center}
  .qsl-lista li{font-size:14.5px}
  .qsl-quienes{gap:12px}
}

.qcar-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;padding-top:12px;border-top:1px solid var(--linea)}
.qcar-puntos{display:flex;gap:8px}
.qpunto{width:8px;height:8px;border-radius:50%;background:var(--linea);transition:.25s}
.qpunto:hover{background:var(--gris)}
.qpunto.aqui{background:var(--c);width:26px;border-radius:99px}
.qcar-cuenta{font-family:var(--sans);font-size:12px;color:var(--gris)}
.qcar-barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.qcar-barra i{display:block;height:100%;width:0;background:color-mix(in srgb,var(--c) 55%,transparent)}

@media(prefers-reduced-motion:reduce){
  .qsl.activa>*{animation:none;opacity:1}
  .qcar-barra{display:none}
}

/* ============================================================
   Candados: lo que está en la versión completa
   ============================================================ */
.cerrado-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:18px;
  padding:26px 24px;margin:22px 0;max-width:60ch}
.cerrado-ico{font-size:26px;line-height:1;display:block;margin-bottom:10px}
.cerrado-caja h3{font-family:var(--sans);font-size:19px;font-weight:600;margin-bottom:8px}
.cerrado-caja p{font-size:15px;line-height:1.6;color:var(--gris);margin-bottom:18px}
.cerrado-fino{font-family:var(--sans);font-size:12.5px;color:var(--gris);margin:14px 0 0!important}

.anio-cerrado .anio-cab h2,.anio-cerrado .lema{opacity:.75}
.etq-lock{font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--c);margin-left:8px;font-size:11px}
.libro.cerrado{cursor:pointer;opacity:.72;filter:saturate(.55)}
.libro.cerrado:hover{opacity:1;filter:none}
/* el candado se ve siempre, no sólo al pasar el cursor: en la tarjeta es
   la única señal que distingue un libro cerrado de uno abierto */
.libro.cerrado .flecha{opacity:1;transform:none;font-size:15px;
  right:14px;bottom:12px;filter:grayscale(1)}
.libro.cerrado .tomo::after{content:"🔒";margin-left:7px;font-size:10px;filter:grayscale(1)}
.anio-pie{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;
  background:var(--blanco);border:1px dashed var(--linea);border-radius:14px;padding:16px 18px}
.anio-pie>span:first-child{font-family:var(--sans);font-size:14px;color:var(--gris)}
.la-cerrada b,.la-cerrada small{opacity:.6}
.item.cerrado{cursor:pointer;opacity:.7}
.item.cerrado:hover{opacity:1}
.item.cerrado .marca-ok{visibility:hidden}
.cita-cerrada{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.6;
  border-left:3px solid var(--c);padding:6px 0 6px 18px;margin:18px 0 6px;max-width:56ch}
.cita-cerrada cite{display:block;font-style:normal;font-family:var(--sans);font-size:13px;
  color:var(--gris);margin-top:8px}
.tipo.cerrada{opacity:.6}

/* ============================================================
   El pase de un día
   ============================================================ */
.pase-etq{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:6px}
.pase-franja{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--c);color:#fff;border-radius:18px;padding:22px 24px;margin:0 0 26px}
.pase-franja b{display:block;font-family:var(--sans);font-size:20px;font-weight:600;margin-bottom:5px}
.pase-franja span{display:block;font-size:14.5px;line-height:1.55;opacity:.94;max-width:62ch}
.pase-franja .pase-etq{opacity:.8}
.pase-franja .btn{background:#fff;color:var(--c);border-color:#fff;flex-shrink:0}
.pase-franja .btn:hover{background:#fff;opacity:.9}
.pase-franja.activa{background:#1e7a45}
.pase-cab .pase-etq{color:var(--c)}
.pase-lista{list-style:none;margin:16px 0 20px}
.pase-lista li{position:relative;padding-left:24px;font-size:14.5px;margin-bottom:8px;line-height:1.5}
.pase-lista li::before{content:"✓";position:absolute;left:0;color:var(--c);font-weight:700;
  font-family:var(--sans);font-size:13px}
.cinta-pase{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#1e7a45;color:#fff;
  font-family:var(--sans);font-size:13px;text-align:center;padding:9px 14px}
.cinta-pase a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:10px}
body.con-cinta .app{padding-bottom:44px}

/* ============================================================
   Precio y confianza
   ============================================================ */
.plan .cobro{font-family:var(--sans);font-size:12.5px;color:var(--gris);margin:0 0 2px}
.plan .ahorro{font-style:normal;font-weight:600;color:#1e7a45}
.plan .no-lleva{list-style:none;border-top:1px dashed var(--linea);padding-top:14px;margin-bottom:22px}
.plan .no-lleva li{color:var(--gris);font-size:13.5px;margin-bottom:7px}
.plan .no-lleva li::before{content:"—";color:var(--gris);font-weight:400}
.confianza{display:grid;gap:16px;grid-template-columns:1fr;margin:30px 0}
@media(min-width:760px){.confianza{grid-template-columns:repeat(4,1fr)}}
.confianza>div{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:16px}
.confianza b{display:block;font-family:var(--sans);font-size:14px;font-weight:600;margin-bottom:4px}
.confianza span{font-size:13.5px;color:var(--gris);line-height:1.55}
.lock-mini{font-size:11px;filter:grayscale(1);opacity:.8;vertical-align:1px}

/* ============================================================
   La barra de resaltar en el teléfono
   ------------------------------------------------------------
   Flotando medía 438 px en una pantalla de 390: se salía por la
   izquierda y no había manera de tocarla. Abajo cabe siempre,
   queda a mano del pulgar y no le pisa a iOS su propio menú de
   selección, que aparece pegado al texto.
   ============================================================ */
.barra-prep.abajo{position:fixed;left:0;right:0;bottom:0;top:auto;
  transform:none;border-radius:18px 18px 0 0;flex-direction:column;align-items:stretch;
  gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 34px rgba(0,0,0,.34);animation:sube .18s ease-out}
@keyframes sube{from{transform:translateY(100%)}to{transform:translateY(0)}}
.barra-prep.abajo .bp-sel{display:block;font-family:var(--serif);font-style:italic;
  font-size:13.5px;line-height:1.4;opacity:.66;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.barra-prep.abajo .bp-acc{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.barra-prep.abajo button{min-height:44px;font-size:13.5px;padding:0 14px;
  display:inline-flex;align-items:center}
.barra-prep.abajo .pcolor{width:30px;height:30px;min-height:30px;padding:0}
.barra-prep.abajo .sepb{height:26px;margin:0 2px}
.barra-prep.abajo .bp-x{margin-left:auto;font-size:22px;padding:0 12px;opacity:.6}
/* el deck la mete dentro de sí mismo: ahí también va abajo del todo */
.deck .barra-prep.abajo{position:fixed;z-index:130}

/* la ventana de anotar */
.nota-sobre{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.55;
  border-left:3px solid var(--c);padding:4px 0 4px 14px;margin:6px 0 18px;color:var(--gris)}

/* ============================================================
   Áreas de toque en el teléfono
   ------------------------------------------------------------
   El dedo no es un puntero. En pantallas estrechas todo lo que
   se pulsa pasa a 40 px de alto como mínimo; el informe fijaba
   44 px como norma y estas listas se habían quedado fuera.
   ============================================================ */
@media(max-width:620px){
  .campo{min-height:42px}
  .campo input{min-height:38px}
  .marca{min-height:42px}
  .volver,.volver-b{min-height:42px;display:inline-flex;align-items:center}
  .lig{min-height:42px;display:inline-flex;align-items:center}
  .chip-tema,.temas-citan a,.temas-citan button{min-height:40px;display:inline-flex;
    align-items:center}
  .orto-auto{min-height:42px;display:flex;align-items:center;gap:9px}
  .orto-auto input[type=checkbox]{width:22px;height:22px;flex-shrink:0}
  /* el índice de libros de Mi avance y los 73 de la Biblia */
  .tabla a,.libros-b a,.caps a{min-height:40px;display:inline-flex;align-items:center}
}
.version-app{font-family:var(--sans);font-size:12px;color:var(--gris);margin-top:26px;
  padding-top:14px;border-top:1px solid var(--linea)}

/* ============================================================
   Diapositivas de contenido propio
   ------------------------------------------------------------
   Un documento pegado trae párrafos, no viñetas. Se dibujan con
   el mismo tamaño y ritmo que las listas para que no se note
   que vienen de otro sitio.
   ============================================================ */
.slide.seccion .parrafos p{font-size:calc(calc(3.4 * var(--vu)) * var(--e));line-height:1.5;margin-bottom:calc(2.4 * var(--vu));
  animation:sube .5s cubic-bezier(.2,.8,.2,1) backwards}
.slide.seccion .parrafos p:last-child{margin-bottom:0}
.slide.seccion h2 em{font-style:normal;font-size:.5em;opacity:.5;letter-spacing:.04em}
@media(max-width:880px){.slide.seccion .parrafos p{font-size:calc(calc(2.8 * var(--vu)) * var(--e))}}

/* ============================================================
   Mi material: los bloques que sube el usuario
   ============================================================ */
.bloques{display:flex;flex-direction:column;gap:16px}
.bloque-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;
  overflow:hidden}
.bl-cab{display:flex;align-items:center;gap:14px;padding:14px 16px;
  border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 5%,transparent)}
.bl-orden{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0}
.bl-orden button{width:30px;height:26px;border-radius:7px;font-size:14px;color:var(--c);
  line-height:1}
.bl-orden button:hover:not(:disabled){background:color-mix(in srgb,var(--c) 14%,transparent)}
.bl-orden button:disabled{opacity:.25;cursor:default}
.bl-orden span{font-family:var(--sans);font-size:11px;color:var(--gris)}
.bl-txt{flex:1;min-width:0}
.bl-txt b{display:block;font-family:var(--sans);font-size:16px;font-weight:600}
.bl-txt small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--gris);margin-top:2px}
.bl-cod{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:11px;
  letter-spacing:.06em;color:var(--gris);background:color-mix(in srgb,var(--ink) 7%,transparent);
  padding:2px 7px;border-radius:6px;margin-top:6px}
.bl-acc{display:flex;gap:4px;flex-shrink:0}
.bl-acc button{width:38px;height:38px;border-radius:10px;font-size:16px;color:var(--gris);
  border:1px solid var(--linea);background:var(--blanco)}
.bl-acc button:hover{border-color:var(--c);color:var(--c)}
.bl-orden button{border:1px solid transparent}
.bl-temas{padding:4px 10px 10px}
.bl-temas .item{padding-left:10px}
@media(max-width:620px){
  /* en el teléfono la columna de flechas no cabe al lado: el bloque se
     ordena en dos filas y todo lo que se toca sube a 44 px */
  .bl-cab{flex-wrap:wrap;gap:10px 8px;padding:14px}
  .bl-txt{order:1;flex:1 1 100%}
  .bl-orden{order:2;flex-direction:row;align-items:center;gap:6px}
  .bl-orden button{width:44px;height:44px}
  .bl-orden span{order:-1;min-width:16px}
  .bl-acc{order:3;margin-left:auto}
  .bl-acc button{width:44px;height:44px}
}

/* código y compartir */
.cod-grande{font-family:ui-monospace,Menlo,monospace;font-size:22px;letter-spacing:.1em;
  text-align:center;background:color-mix(in srgb,var(--c) 9%,transparent);color:var(--c);
  border:1px dashed color-mix(in srgb,var(--c) 40%,transparent);border-radius:12px;
  padding:16px 12px;margin:6px 0 12px;word-break:break-all}
.subir-archivo.pequena{margin-top:12px;padding:12px 14px;text-align:center}
.subir-archivo.pequena b{font-size:13.5px}

/* campos sueltos de la pantalla de subir */
.et-campo{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin:20px 0 7px}
.campo-simple{width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:11px;
  background:var(--blanco);color:var(--ink);font-family:var(--sans);font-size:15px;min-height:46px}
.campo-simple:focus{outline:0;border-color:var(--c)}

/* la ayuda de formato, ahora plegada */
details.ayuda-formato{background:transparent;border:1px solid var(--linea);border-radius:12px;
  padding:0;margin:16px 0}
details.ayuda-formato summary{cursor:pointer;padding:13px 16px;font-family:var(--sans);
  font-size:13.5px;color:var(--c);min-height:44px;display:flex;align-items:center}
details.ayuda-formato[open] summary{border-bottom:1px solid var(--linea)}
details.ayuda-formato p{padding:12px 16px 0;font-size:14px;color:var(--gris);line-height:1.55}
details.ayuda-formato code{display:inline-block;margin:8px 6px 0 16px}
details.ayuda-formato p:last-child{padding-bottom:14px}
details.bl-temas{padding:0}
details.bl-temas summary{cursor:pointer;padding:12px 18px;font-family:var(--sans);
  font-size:13px;color:var(--gris);min-height:44px;display:flex;align-items:center}
details.bl-temas summary:hover{color:var(--c)}
details.bl-temas[open] summary{border-bottom:1px solid var(--linea)}
details.bl-temas .item{padding-left:14px}

/* elegir si el documento es uno o va dividido */
.modo-doc{display:grid;gap:10px;grid-template-columns:1fr;margin-bottom:4px}
@media(min-width:760px){.modo-doc{grid-template-columns:1fr 1fr}}
.modo-doc .op{display:block;position:relative;border:1px solid var(--linea);border-radius:13px;
  padding:14px 16px 14px 44px;cursor:pointer;background:var(--blanco);transition:.16s}
.modo-doc .op:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.modo-doc .op.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 6%,transparent)}
.modo-doc .op input{position:absolute;left:15px;top:17px;width:18px;height:18px;accent-color:var(--c)}
.modo-doc .op b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;margin-bottom:3px}
.modo-doc .op small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--gris);
  line-height:1.5}
.bl-acc .bl-pres{color:var(--c);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.bl-acc .bl-pres:hover{background:var(--c);color:#fff;border-color:var(--c)}

/* ============================================================
   El Catecismo
   ============================================================ */
.cic-lista{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:820px){.cic-lista{grid-template-columns:1fr 1fr}}
.cic-item{display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:var(--blanco);border:1px solid var(--linea);border-radius:11px;
  padding:12px 15px;text-decoration:none;color:var(--ink);min-height:46px;transition:.15s}
.cic-item:hover{border-color:var(--c);transform:translateX(2px)}
.cic-item b{font-family:var(--sans);font-size:13.5px;font-weight:500;line-height:1.35}
.cic-item em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:12px;
  color:var(--gris);flex-shrink:0}

.cic-temas{display:flex;flex-direction:column;gap:6px}
.cic-tema{background:var(--blanco);border:1px solid var(--linea);border-radius:12px}
.cic-tema summary{cursor:pointer;padding:13px 16px;font-family:var(--sans);font-size:14px;
  font-weight:500;min-height:46px;display:flex;align-items:center;justify-content:space-between;
  gap:10px}
.cic-tema summary em{font-style:normal;font-size:11.5px;color:var(--gris)}
.cic-tema[open] summary{border-bottom:1px solid var(--linea);color:var(--c)}
.cic-ent{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  padding:11px 16px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--linea);
  min-height:44px}
.cic-ent:last-child{border-bottom:0}
.cic-ent:hover{background:var(--papel)}
.cic-ent span{font-size:14.5px;line-height:1.5}
.cic-ent em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:12px;
  color:var(--c);flex-shrink:0}

.cic-hit{display:flex;gap:14px;align-items:baseline;padding:13px 4px;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--linea);min-height:44px}
.cic-hit:hover{background:var(--blanco)}
.cic-hit b{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--c);flex-shrink:0;
  min-width:44px}
.cic-hit span{font-size:14.5px;line-height:1.55;color:var(--gris)}

.cic-lectura{max-width:var(--ancho-lectura)}
.cic-p{display:flex;gap:16px;align-items:baseline;margin-bottom:20px;flex-wrap:wrap}
.cic-p p{flex:1;font-size:17px;line-height:1.7;margin:0}
.cic-n{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--c);
  text-decoration:none;flex-shrink:0;min-width:46px;padding-top:4px}
.cic-n:hover{text-decoration:underline}
.cic-p.resumen{background:var(--soft);border-left:3px solid var(--c);border-radius:0 10px 10px 0;
  padding:14px 18px;margin-left:-4px}
.cic-p.resumen p{font-family:var(--sans);font-size:15.5px}
.ruta-cic{font-family:var(--sans);font-size:12.5px;color:var(--gris);line-height:1.5;margin-top:6px}
.cic-vecinos{display:flex;justify-content:space-between;gap:12px;margin:30px 0 10px}
.cic-vecinos a{font-family:var(--sans);font-size:13.5px;color:var(--c);text-decoration:none;
  border:1px solid var(--linea);border-radius:10px;padding:11px 15px;min-height:44px;
  display:inline-flex;align-items:center}
.cic-vecinos a:hover{border-color:var(--c)}
.cic-legal{font-family:var(--sans);font-size:11.5px;color:var(--gris);margin-top:26px;
  padding-top:12px;border-top:1px solid var(--linea)}
sup.nota-cic{font-size:.62em;color:var(--gris);margin-left:1px;vertical-align:super;
  user-select:none}
.ruta-globo{font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);margin-bottom:8px}

/* ---- comprobación de Firebase ---- */
.fb-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:26px;max-width:70ch}
.fb-fila{display:flex;gap:12px;align-items:flex-start;background:var(--blanco);
  border:1px solid var(--linea);border-radius:12px;padding:13px 16px}
.fb-fila .fb-ico{font-size:15px;line-height:1.5;flex-shrink:0;width:20px;text-align:center}
.fb-fila.ok .fb-ico{color:#1e7a45}
.fb-fila.mal{border-color:#c0392b}
.fb-fila.mal .fb-ico{color:#c0392b}
.fb-fila.aviso{border-color:var(--c)}
.fb-fila.aviso .fb-ico{color:var(--c)}
.fb-fila.espera .fb-ico{color:var(--gris)}
.fb-fila b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600}
.fb-fila small{display:block;font-size:13.5px;color:var(--gris);line-height:1.55;margin-top:3px}
.fb-fila code,.fb-pasos code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
  background:color-mix(in srgb,var(--ink) 8%,transparent);padding:1px 6px;border-radius:5px}
.fb-pasos{margin:0 0 16px 18px;font-size:14.5px;line-height:1.7}
.fb-pasos li{margin-bottom:8px}
code.fb-dom{display:inline-block;margin-top:6px;font-size:14px;padding:6px 12px;
  background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c)}
.salida-puerta{display:block;margin-top:16px;font-family:var(--sans);font-size:13px;
  color:var(--gris);text-decoration:underline;text-underline-offset:3px}
.salida-puerta:hover{color:var(--c)}

/* notas al pie del Catecismo */
sup.nota-cic.con-t{cursor:pointer;color:var(--c);text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:2px}
sup.nota-cic.con-t:hover,sup.nota-cic.con-t.on{background:color-mix(in srgb,var(--c) 18%,transparent);
  border-radius:3px}
sup.nota-cic.con-t:focus-visible{outline:2px solid var(--c);outline-offset:2px}
/* la nota baja debajo del párrafo, no al margen: el número del CEC ocupa
   la primera columna y sin esto la nota se colaba a su derecha */
.cic-pie{flex:1 0 100%;margin:8px 0 4px 62px;
  border-left:3px solid color-mix(in srgb,var(--c) 45%,transparent);padding-left:14px}
@media(max-width:620px){.cic-pie{margin-left:0}}
.cic-nota{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--gris);
  margin-bottom:6px}
.cic-nota b{color:var(--c);font-weight:600;margin-right:4px}
@media(max-width:620px){sup.nota-cic.con-t{padding:0 3px}}


/* ============================================================
   TEMA «AURORA» — rediseño 2026
   Capa de estilo al final del archivo: cambia el aspecto
   (color, tipografía, escala, aire) sin tocar la estructura ni
   el funcionamiento. Para volver al aspecto anterior, borrar
   desde aquí hasta el final.
   ============================================================ */

:root{
  --sans:'Libre Franklin',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --c:#c1591b;
  --naranja:#e07a1f;
  --ambar:#e9a13b;
  --soft:#fbf0e6;
  --papel:#fbf9f5;
  --blanco:#fff;
  --ink:#1c1a16;
  --gris:#8a8377;
  --linea:#e6e1d7;
  --lateral:#14120f;
  --r:12px;
  --sombra:0 24px 60px -34px rgba(28,26,22,.4);
}
body.oscuro{
  --papel:#14120f; --blanco:#1c1a16; --linea:#2e2a24; --ink:#fbf9f5;
  --gris:#9a9184; --soft:#241a12; --lateral:#0e0d0b;
}
body{font-family:var(--sans)}

/* ---------- barra superior ---------- */
.barra{background:var(--papel);border-bottom:1px solid var(--linea);backdrop-filter:saturate(120%) blur(6px)}
.barra .in{height:66px}
.marca{color:var(--ink)}
.marca strong{color:var(--ink);font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.2em;text-transform:none}
.marca small{display:none}
.iso{display:none}
.nav{border-radius:0;background:none;font-size:14px;color:var(--gris);padding:6px 0;margin-right:22px;
  border-bottom:2px solid transparent}
.nav:hover{background:none;color:var(--ink)}
.nav.activo{background:none;color:var(--ink);font-weight:600;border-bottom-color:var(--c)}
.campo{border-radius:8px;background:transparent;border:1px solid transparent;color:var(--gris)}
.campo:focus-within{border-color:var(--linea);background:var(--blanco)}
.btn-icono{border-radius:8px}
.aro-prog .arco{stroke:var(--c)}
.lista-anios,.panel-movil{border-radius:12px}

/* ---------- portada ---------- */
#lienzo{display:none!important}
.portada{
  color:#fff;padding:96px 26px 88px;min-height:0;align-items:center;
  background:linear-gradient(118deg,#e9a13b 0%,#e07a1f 34%,#c1591b 78%,#a8480f 100%)}
.portada .aurora{opacity:.5;filter:blur(90px)}
.portada .aurora.a1{background:radial-gradient(circle,rgba(255,255,255,.34),transparent 65%)}
.portada .aurora.a2,.portada .aurora.a3{background:radial-gradient(circle,rgba(255,214,160,.28),transparent 65%)}
.portada h1{display:none}
.portada .etq{
  display:inline-block;background:none;padding:0;opacity:1;color:rgba(255,255,255,.78);
  font-weight:600;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px}
.portada .etq::after{
  content:"Vengan y verán · Juan 1, 39";display:block;margin-top:14px;
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;
  letter-spacing:.01em;text-transform:none;color:rgba(255,255,255,.92)}
.portada .eslogan{
  font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(44px,7.4vw,84px);color:#fff;opacity:1;max-width:19ch;margin:6px 0 22px;
  text-wrap:balance}
.portada .eslogan b{font-weight:400}
.portada .in>p:not(.eslogan){
  font-family:var(--sans);font-size:17px;line-height:1.65;color:rgba(255,255,255,.86);max-width:50ch}
.portada .cifras{
  margin:40px 0 0;gap:44px;padding:26px 0;
  border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28)}
.portada .cifra b{font-family:var(--serif);font-weight:300;font-size:46px;color:#fff;letter-spacing:-.01em}
.portada .cifra span{color:rgba(255,255,255,.7);letter-spacing:.2em;font-size:11px}
.portada .sigue{margin-top:34px}
.portada .btn{
  background:#fff;color:#b3500f;font-weight:600;border-radius:8px;
  box-shadow:0 14px 30px -18px rgba(20,16,12,.5);padding:16px 28px}
.portada .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}

/* ---------- cita del día, bajo la portada ---------- */
.portada+.vista{padding-top:0}
.cita-hoy{
  width:100vw;margin:0 0 56px calc(50% - 50vw);
  padding:52px max(26px,calc(50vw - 500px));
  background:var(--soft);border-bottom:1px solid var(--linea)}
.cita-hoy .in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
  max-width:var(--ancho);margin:0 auto}
.cita-hoy .comilla{font-family:var(--serif);font-size:64px;line-height:.7;color:#d2a97e}
.cita-hoy blockquote{margin:0;padding:0;border:0;background:none;box-shadow:none}
.cita-hoy p{margin:0;font-family:var(--serif);font-style:italic;color:#4a4238;
  font-size:clamp(22px,2.6vw,31px);line-height:1.4;max-width:40ch;text-wrap:pretty}
.cita-hoy cite{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#a08d6f}
body.oscuro .cita-hoy p{color:#e8ded0}
body.oscuro .cita-hoy .comilla{color:#7a5c3c}

/* ---------- botones ---------- */
.btn{border-radius:8px;font-weight:600;box-shadow:none;padding:13px 24px}
.btn.ghost{border:1px solid var(--linea);background:var(--blanco);color:var(--ink)}
.btn-mini{border-radius:8px}

/* ---------- años y libros ---------- */
.anio{border-top:1px solid var(--linea);border-bottom:0;padding:44px 0}
.anio .etq{font-weight:600;letter-spacing:.22em;color:var(--gris);background:none;padding:0}
.anio h2{font-family:var(--sans);font-weight:600;letter-spacing:.06em;font-size:clamp(24px,3.4vw,32px)}
.anio-cab .lema{font-family:var(--serif);font-style:italic;font-size:18px;color:#524d44}
.anillo .arco{stroke:var(--c)}
.anillo text{fill:var(--ink);font-weight:600}
.libro{
  background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:24px;
  box-shadow:0 12px 30px -26px rgba(28,26,22,.5)}
.libro::before{display:none}
.libro::after{width:180px;height:180px;right:-80px;bottom:-100px;opacity:.5}
.libro:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(28,26,22,.55);border-color:#d9cfbe}
.libro .tomo{font-weight:600;letter-spacing:.18em;color:var(--c)}
.libro h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em;margin:10px 0 18px}
.libro .barra-fina{height:5px}
.libro .n{color:var(--gris)}

/* ---------- tarjetas del inicio ---------- */
.uc{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:28px}
.uc:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(28,26,22,.5)}
.uc h4{font-weight:700;letter-spacing:.2em;font-size:11px;color:#a05019}
.uc b{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.01em;line-height:1.12}
.uc.testigo-hoy{background:var(--soft);border-left:1px solid var(--linea)}
.uc.testigo-hoy em{font-family:var(--serif);font-size:16px;line-height:1.55}
.uc-item i{border-radius:999px}
.barra-fina,.barra-fina i{border-radius:999px}

/* ---------- cabeceras y títulos ---------- */
.cab h1{font-family:var(--serif);font-weight:300;letter-spacing:-.02em}
.cab .sub{font-family:var(--sans)}
.cab .lema{font-family:var(--serif);font-style:italic}
.cab .volver{border-radius:8px}
.tit-vista,.titular{font-family:var(--serif);font-weight:300;letter-spacing:-.02em}
.tit-vista{font-size:clamp(34px,5vw,52px)}
.sub-vista{font-size:17px;color:#524d44}

/* ---------- índice de temas ---------- */
.item{border-radius:0;border-bottom:1px solid var(--linea);padding-top:18px;padding-bottom:18px}
.item:hover{background:var(--soft);transform:none;box-shadow:none}
.item .num{font-family:var(--serif);font-size:20px;color:var(--c);font-weight:400}
.item b{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.01em}
.item em{font-family:var(--sans);color:var(--gris)}
/* etiqueta de bloque sólo dentro del índice de un libro */
.temas .bloque,.lista-temas .bloque,.vista-libro .bloque{
  font-weight:700;letter-spacing:.2em;font-size:11px;color:var(--gris)}

/* ---------- estudio del tema ---------- */
.cita p{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.45}
.cita .pt{background:var(--c);animation:none}
.sec h2,.obj h3,.testigo h3,.aplica h3,.ejerc h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.sec p,.obj li,.aplica p{font-family:var(--serif);font-size:17.5px;line-height:1.75}

/* ---------- planes y varios ---------- */
.plan,.modal .caja,.panel,.caja,.aviso,.chip-tema,.pest,.tipo{border-radius:12px}
.cinta{background:var(--c);color:#fff;font-weight:600}
.precio{font-family:var(--serif);font-weight:300;letter-spacing:-.02em}
::selection{background:#f7d9b8;color:#3a2a18}
#lectura{background:linear-gradient(90deg,#e9a13b,#c1591b);height:3px}

/* ---------- puerta de entrada ---------- */
.puerta .panel{border-radius:14px}
.puerta .izq{background:linear-gradient(150deg,#e9a13b 0%,#c1591b 62%,#8f3f0c 100%)}
.puerta .izq .etq{background:none;padding:0;opacity:1;color:rgba(255,255,255,.8);
  font-weight:600;letter-spacing:.24em;font-size:11px}
.puerta .izq h1{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(40px,6vw,68px)}
.puerta .izq p b{font-family:var(--serif);font-style:italic;font-weight:400}
.puerta .der h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.puerta .der input,.puerta .der .btn{border-radius:8px}
.puerta .der .btn{width:100%;justify-content:center;font-weight:600}
.puerta .der label{font-weight:700;letter-spacing:.16em;font-size:10.5px;color:var(--gris)}

@media(max-width:760px){
  .portada{padding:62px 20px 56px}
  .portada .cifras{gap:26px}
  .portada+.vista::before{font-size:19px;padding:36px 20px;margin-bottom:40px}
  .libro:hover,.uc:hover{transform:none;box-shadow:none}
}

/* ---------- correcciones: sin círculo, más aire, Biblia y Catecismo iguales ---------- */

/* el círculo decorativo del botón de libro estorbaba */
.libro::after{display:none!important}
.libro::before{height:3px;opacity:.9}
.libro{padding:26px 28px}
.libro h3{margin:12px 0 20px}

/* los años del plan de formación pedían aire en los lados */
.anio{padding:44px 30px}
.anio .anio-cab,.anio .libros,.anio .anio-pie{padding:0}
.anio-cab{margin-bottom:26px}
@media(max-width:760px){.anio{padding:32px 18px}.libro{padding:22px}}

/* tarjetas del inicio: mismo aire */
.uc{padding:26px 28px}
.qsl-ico{display:none}

/* ---------- Biblia y Catecismo con el mismo lenguaje ---------- */
.pest-b{gap:22px;border-bottom:1px solid var(--linea);margin-bottom:34px}
.pest-b .pest{padding:12px 0;border-radius:0;font-size:14.5px}
.pest-b .pest:hover{background:none;color:var(--ink)}
.pest-b .pest.on{font-weight:600;color:var(--ink);border-bottom-color:var(--c)}

.sec-b{margin:0 0 30px}
.sec-b>h3,.biblia-vista .sec-b h3{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin:0 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--linea);display:flex;
  align-items:baseline;justify-content:space-between;gap:12px}
.sec-b>h3 small{font-family:ui-monospace,Menlo,monospace;font-size:11px;
  letter-spacing:.04em;color:#b1a898;font-weight:400}

/* pastillas: las de la Biblia y ahora también las del Catecismo */
.libros-b,.cic-lista{display:flex;flex-wrap:wrap;gap:8px}
.cic-lista{display:flex;grid-template-columns:none}
.libro-b,.cap-b,.cic-item{
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);
  background:#f3efe7;border:1px solid transparent;border-radius:8px;
  padding:11px 15px;min-height:42px;text-decoration:none;
  display:inline-flex;align-items:center;gap:12px;transition:.15s}
.libro-b:hover,.cap-b:hover,.cic-item:hover{
  background:var(--soft);border-color:#e7c9a8;color:#a04f16;transform:none}
.cic-item{justify-content:space-between;max-width:none;flex:0 1 auto}
.cic-item b{font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.35;
  text-transform:none}
.cic-item em{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#a2998a}
body.oscuro .libro-b,body.oscuro .cap-b,body.oscuro .cic-item{background:#241f19}

.cic-tema,.cic-ent{border-radius:8px}
.cic-tema{border-color:var(--linea)}
.cic-tema summary{font-size:14.5px}
.cic-legal{font-size:11.5px;color:#a2998a;margin-top:34px;
  padding-top:18px;border-top:1px solid var(--linea)}
.sub-b,.sub-vista{font-size:16px;color:#524d44;max-width:70ch}

/* los h2.bloque de Biblia y Formación son cabecera de sección, no etiqueta */
h2.bloque{
  font-family:var(--serif);font-weight:400;text-transform:none;
  font-size:clamp(22px,2.6vw,28px);letter-spacing:-.01em;color:var(--ink);
  margin:38px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--linea)}
h2.bloque::before{
  width:8px;height:8px;border:0;background:var(--c);border-radius:999px;
  margin-right:2px;align-self:center}
h2.bloque:first-child{margin-top:0}


/* ============================================================
   CORRECCIONES b32
   ------------------------------------------------------------
   Capa al final, encima de «Aurora».
   ============================================================ */

/* ---------- 1 · la barra de arriba, en claro ----------
   Con la barra clara, todo lo de la derecha —el buscador, el aro
   del avance, el perfil, el modo oscuro— seguía dibujándose en
   blanco, herencia de cuando la barra era negra: blanco sobre
   blanco, invisible hasta que se cambiaba a oscuro. Va en gris,
   el mismo de Inicio · Formación · Biblia. */
.barra{color:var(--ink)}
.campo{color:var(--gris)}
.campo span{color:var(--gris)}
.campo input{color:var(--ink)}
.campo input::placeholder{color:var(--gris)}
.campo:focus-within{background:var(--blanco);border-color:var(--linea);width:320px}
.campo:focus-within span{color:var(--gris)}
.campo:focus-within input{color:var(--ink)}
.btn-icono{border:1px solid var(--linea);color:var(--gris);background:none}
.btn-icono:hover{background:var(--soft);color:var(--ink);border-color:#e7c9a8}
.btn-icono.entrado{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);
  color:var(--c)}
.aro-prog .fondo{stroke:var(--linea)}
.aro-prog b{color:var(--gris)}
#menuMovil{color:var(--gris)}
.res{color:var(--ink)}
body.oscuro .barra{color:var(--ink)}

/* ---------- 2 · acciones de un resaltado ----------
   Antes era un solo botón, «Quitar resaltado»: la nota que habías
   escrito no se podía corregir ni borrar sin cargarte el subrayado.
   Ahora es una fila con anotar/editar, quitar la nota y quitar el
   resaltado. Presentando va pegada abajo, dentro del deck, porque
   la presentación se ve siempre apaisada y ahí las coordenadas de
   la palabra ya no sirven para colocar nada. */
.quitar-marca{position:absolute;z-index:140;display:flex;align-items:center;gap:6px;
  padding:6px;border-radius:12px;background:var(--ink);
  box-shadow:0 14px 34px rgba(0,0,0,.3);animation:vista .14s}
.quitar-marca button{font-family:var(--sans);font-size:12.5px;padding:8px 13px;
  border-radius:8px;min-height:38px;color:var(--papel);white-space:nowrap}
.quitar-marca button:hover{background:rgba(255,255,255,.16)}
.quitar-marca .qm-sel{font-family:var(--serif);font-style:italic;font-size:13px;
  color:rgba(255,255,255,.6);padding:0 8px;max-width:38vw;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.quitar-marca .qm-x{margin-left:auto;font-size:20px;opacity:.6;padding:0 12px}
.deck .quitar-marca{z-index:150}
.quitar-marca.abajo{position:fixed;left:0;right:0;bottom:0;top:auto;
  border-radius:16px 16px 0 0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  flex-wrap:wrap;animation:sube .18s ease-out}
.quitar-marca.abajo button{min-height:44px;font-size:13.5px}
@media(max-width:620px){
  .quitar-marca{left:8px!important;right:8px;flex-wrap:wrap}
}

/* ---------- 3 · la presentación, siempre apaisada ----------
   Una diapositiva es 16:9. En un teléfono o un iPad en vertical se
   quedaba en una franja en medio de la pantalla, con el texto
   diminuto y dos bandas vacías arriba y abajo. Ahora, si la pantalla
   está en vertical, el deck se gira noventa grados y ocupa la
   pantalla entera en apaisado. El tamaño lo llevan --vu y --vw2, que
   JavaScript pone en píxeles del propio deck: así el texto se mide
   contra la diapositiva y no contra la ventana. */
.deck .giro{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0}
.deck.girado .giro{transform:rotate(90deg) translateY(-100%)}
.deck.girado .barra-prep.abajo,.deck.girado .quitar-marca.abajo{padding-bottom:12px}

/* ---------- 4 · la columna de la derecha de las diapositivas de sección ----------
   `.dest` lleva `margin-top:auto` para irse al fondo, pero la columna era un
   bloque normal: ese margen se colapsaba fuera del alto de la caja y la
   diapositiva parecía desbordada siempre. El ajuste automático la encogía
   hasta el mínimo y por eso el texto de la derecha salía diminuto en una
   pantalla medio vacía. Con la columna en flex, el margen automático hace lo
   que dice —empujar la cita al fondo— y las medidas cuadran. */
.slide.seccion .der-col{display:flex;flex-direction:column;min-height:0}
.slide.seccion .der-col>*{flex:0 0 auto}

/* una palabra larga en la columna del título ya no frena el tamaño de todo:
   se parte con guion, como en cualquier libro */
/* El título de la izquierda es lo menos denso de la diapositiva: si una
   palabra larga no cabe, se parte ahí (con guion donde el navegador tenga
   diccionario) en vez de obligar a encoger TODO el texto de la derecha. */
/* Los títulos NO se parten a media palabra: si una palabra larga no cabe,
   se achica sólo el título —con --et, su propia escala— y el resto de la
   diapositiva se queda como está. */
.slide h2{hyphens:none;overflow-wrap:normal;word-break:normal}

/* ---------- 5 · el carrusel, con la letra del resto de la página ----------
   El texto y el contenido estaban bien, pero el carrusel hablaba en otro
   idioma tipográfico: todo en la sans, mientras que en el resto de The Emaús
   los títulos van en la serif y el cuerpo de lectura también. Aquí se
   iguala a lo que ya hacen las tarjetas del inicio, los libros y el estudio
   del tema: títulos en Newsreader, cuerpo en Newsreader, y sólo las
   etiquetitas y los datos sueltos en Libre Franklin. */
.qcar{border-radius:12px;box-shadow:0 12px 30px -26px rgba(28,26,22,.5)}
.qsl h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.16;
  font-size:clamp(25px,3vw,34px);max-width:24ch;margin-bottom:16px}
.qsl h2 em{font-style:normal;color:var(--c)}
.qsl-p{font-family:var(--serif);font-size:17.5px;line-height:1.75;max-width:62ch;
  color:#4a4238}
body.oscuro .qsl-p{color:var(--ink)}

.qsl-lista li{font-family:var(--serif);font-size:17px;line-height:1.7;color:#4a4238}
.qsl-lista li b{font-family:var(--serif);font-weight:600;color:var(--ink)}
body.oscuro .qsl-lista li{color:var(--gris)}

.qsl-quienes b{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.01em;
  margin-bottom:5px}
.qsl-quienes span{font-family:var(--serif);font-size:16px;line-height:1.65;color:#4a4238}
body.oscuro .qsl-quienes span{color:var(--gris)}

.qsl-pasos>div{border-radius:12px}
.qsl-pasos h4{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.01em;
  margin-bottom:5px}
.qsl-pasos p{font-family:var(--serif);font-size:15.5px;line-height:1.65;color:#4a4238}
body.oscuro .qsl-pasos p{color:var(--gris)}
.qsl-pasos .n{font-family:var(--sans);font-weight:600}

/* los botones y la letra pequeña siguen en la sans, como en toda la página */
.qsl-pie .fino{font-family:var(--sans)}
.qcar-cuenta{font-family:var(--sans)}
@media(max-width:620px){
  .qsl h2{font-size:22px}
  .qsl-p{font-size:16.5px}
}


/* ---------- 6 · el titular de la portada ----------
   Mismo tipo de letra y mismo trazo fino de siempre: sólo un punto más
   grande, para que el titular pese más en la pantalla. */
.portada .eslogan{font-size:clamp(48px,8.2vw,96px)}
@media(max-width:760px){.portada .eslogan{font-size:clamp(38px,10vw,60px)}}

/* ============================================================
   7 · LAS DIAPOSITIVAS, CON EL MISMO LENGUAJE QUE LA PORTADA
   ------------------------------------------------------------
   La presentación venía de otro sistema tipográfico: todo en la
   sans y en negrita, los títulos en versales, y muy poco aire.
   Aquí se traslada a la diapositiva exactamente lo que hace la
   portada naranja, que es donde está el estilo de la casa:

     · titulares en Newsreader fino, en caja baja, muy grandes;
     · rótulos y referencias en Libre Franklin, pequeños, en
       versales y muy espaciados;
     · el cuerpo y las viñetas en Libre Franklin, con interlínea
       ancha;
     · las cifras grandes —el número de sección, el del fondo—
       en Newsreader fino, como el «5 · 14 · 120» de la portada;
     · y márgenes generosos: una diapositiva se lee de lejos, así
       que lo que sobra es texto, no espacio.

   Vale igual para los temas de The Emaús y para lo que suba el
   usuario, porque ambos usan estas mismas clases.
   ============================================================ */

/* --- aire: márgenes de la diapositiva y del pie --- */
.slide{padding:calc(11 * var(--vu)) calc(10 * var(--vw2))}
.slide .pie-s{left:calc(10 * var(--vw2));bottom:calc(5 * var(--vu));
  font-family:var(--sans);font-weight:600;letter-spacing:.2em;opacity:.4}

/* --- rótulo pequeño: «AQUÍ EMPIEZA TU FORMACIÓN» --- */
.slide .k{font-family:var(--sans);font-weight:600;letter-spacing:.24em;opacity:.62;
  font-size:calc(calc(1.4 * var(--vu)) * var(--e) + 7px);
  margin-bottom:calc(2.8 * var(--vu))}

/* --- titulares: Newsreader fino, en caja baja --- */
.slide h2{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.04;
  font-size:calc(calc(6.6 * var(--vu)) * var(--e) * var(--et, 1));max-width:20ch;text-wrap:balance}
.slide h2.grande{font-family:var(--serif);font-weight:300;text-transform:none;
  letter-spacing:-.02em;font-size:calc(calc(9.4 * var(--vu)) * var(--e) * var(--et, 1));max-width:15ch}
.slide.seccion h2{font-size:calc(calc(5.6 * var(--vu)) * var(--e) * var(--et, 1));max-width:16ch}

/* --- la Palabra, a pantalla completa --- */
.slide .verso{font-family:var(--serif);font-weight:300;font-style:italic;line-height:1.2;
  font-size:calc(calc(6.8 * var(--vu)) * var(--e));max-width:22ch}
.slide .ref{font-family:var(--sans);font-weight:600;letter-spacing:.22em;
  font-size:calc(calc(1.7 * var(--vu)) * var(--e) + 5px);margin-top:calc(4 * var(--vu))}

/* --- viñetas y cuerpo: Libre Franklin, con interlínea ancha --- */
.slide ul{margin-top:calc(4.5 * var(--vu));max-width:32ch}
.slide li{font-family:var(--sans);font-weight:400;line-height:1.5;
  font-size:calc(calc(2.9 * var(--vu)) * var(--e));margin-bottom:calc(3.2 * var(--vu));
  padding-left:1.6em}
.slide li::before{top:.62em;width:.36em;height:.36em}
.slide ol{margin-top:calc(4.5 * var(--vu))}
.slide ol li{font-size:calc(calc(3.2 * var(--vu)) * var(--e))}
.slide.seccion li{font-size:calc(calc(3 * var(--vu)) * var(--e));margin-bottom:calc(3.2 * var(--vu))}
.slide .cuerpo{font-family:var(--sans);line-height:1.6;
  font-size:calc(calc(2.7 * var(--vu)) * var(--e));margin-top:calc(4 * var(--vu));max-width:44ch}
.slide.seccion .parrafos p{font-family:var(--sans);line-height:1.6;
  font-size:calc(calc(2.8 * var(--vu)) * var(--e));margin-bottom:calc(3 * var(--vu))}

/* --- la cita destacada: cursiva de Newsreader, con su filete --- */
.slide .dest{font-family:var(--serif);font-style:italic;font-weight:300;line-height:1.45;
  font-size:calc(calc(2.5 * var(--vu)) * var(--e));
  padding:calc(2.4 * var(--vu)) calc(3 * var(--vw2));
  border-left-width:2px;background:color-mix(in srgb,var(--c) 6%,transparent);max-width:52ch}
.slide.seccion .dest{margin-top:calc(4 * var(--vu))}

/* --- las cifras grandes, como el 5 · 14 · 120 de la portada --- */
.slide .paso-num{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;
  font-size:calc(calc(8.6 * var(--vu)) * var(--e));line-height:.9;opacity:.28;
  margin-bottom:calc(2 * var(--vu))}
.slide .fondo-num{font-family:var(--serif);font-weight:300;opacity:.07}

/* --- dos columnas con más aire entre ellas --- */
.slide.seccion.on{grid-template-columns:minmax(240px,33%) 1fr;gap:calc(6.5 * var(--vw2))}

@media(max-width:880px){
  .slide{padding:calc(9 * var(--vu)) calc(8 * var(--vw2))}
  .slide.seccion h2{font-size:calc(calc(5 * var(--vu)) * var(--e))}
  .slide.seccion li{font-size:calc(calc(2.9 * var(--vu)) * var(--e))}
  .slide .paso-num{font-size:calc(calc(7 * var(--vu)) * var(--e))}
}

/* las dos columnas empiezan a la misma altura: el título y la primera
   viñeta arrancan en la misma línea, como en una revista */
.slide.seccion.on{align-items:start}

/* una palabra del título, resaltada: da ritmo y evita el bloque plano */
.slide h2 .rel{font-style:normal;font-weight:400;color:var(--c)}
.slide.color h2 .rel,.slide.oscura h2 .rel{color:rgba(255,255,255,.72)}
.slide.suave h2 .rel{color:var(--c)}

/* ============================================================
   8 · LA PORTADA, CON EL The Emaús AL FONDO
   ------------------------------------------------------------
   Estructura de la maqueta que eligió el usuario: rótulo con
   filete, titular grande, entradilla, línea, cuatro rasgos y los
   dos botones; y a la derecha, el camino hacia el sol. La imagen
   va como fondo, con un degradado por encima para que el lado del
   texto quede plano y todo se lea sin esfuerzo.
   ============================================================ */
.portada{
  position:relative;overflow:hidden;
  padding:clamp(56px,7vw,104px) 26px clamp(52px,6vw,88px);
  background:
    linear-gradient(96deg, #e07a1f 0%, #e07a1f 46%, rgba(224,122,31,.94) 58%,
                    rgba(224,122,31,.6) 70%, rgba(224,122,31,0) 86%),
    url("fondo-emaus.webp") right center / cover no-repeat,
    linear-gradient(118deg,#e9a13b 0%,#e07a1f 40%,#c1591b 100%)}
.portada .aurora{display:none}
.portada .in{max-width:var(--ancho);margin:0 auto;position:relative;z-index:2}

/* rótulo con su filete, como en la maqueta */
.portada .etq{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.portada .etq::after{
  content:"";display:block;width:clamp(40px,6vw,84px);height:1px;
  background:rgba(255,255,255,.45);margin:0;font-size:0}
.portada .eslogan{max-width:15ch;margin:0 0 20px}
.portada .in>p:not(.eslogan){max-width:46ch;margin-bottom:clamp(26px,3.4vw,40px)}

/* los cuatro rasgos */
.rasgos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);
  max-width:1000px;padding-top:clamp(24px,3vw,34px);
  border-top:1px solid rgba(255,255,255,.28)}
.rasgo{display:flex;align-items:flex-start;gap:13px}
.rasgo .ico{flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.42);display:grid;place-items:center;color:#fff}
.rasgo .ico svg{width:21px;height:21px}
.rasgo b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;color:#fff;
  margin-bottom:3px}
.rasgo span{font-family:var(--sans);font-size:13.5px;line-height:1.5;
  color:rgba(255,255,255,.82)}

/* botones, con su flecha */
.portada .sigue{margin-top:clamp(28px,3.6vw,42px);gap:12px}
.portada .btn .fl{font-style:normal;margin-left:10px;opacity:.75}

@media(max-width:980px){
  .rasgos{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .portada{background:
    linear-gradient(180deg, #e07a1f 0%, rgba(224,122,31,.9) 55%, rgba(224,122,31,.4) 100%),
    url("fondo-emaus.webp") right bottom / cover no-repeat,
    linear-gradient(118deg,#e9a13b 0%,#e07a1f 40%,#c1591b 100%)}
}
@media(max-width:620px){
  .rasgos{grid-template-columns:1fr;gap:16px;padding-top:20px}
  .rasgo .ico{width:38px;height:38px}
  .portada .sigue{flex-direction:column;align-items:stretch}
  .portada .btn{justify-content:center}
}

/* ============================================================
   9 · LA PUERTA DE ENTRADA, COMO LA MAQUETA
   ------------------------------------------------------------
   Tarjeta partida en dos: a la izquierda la foto del camino con
   el nombre y lo que te llevas; a la derecha, el formulario, con
   los campos con icono, el ojo de la contraseña y el botón
   oscuro. Va después de la capa «Aurora» para poder mandar.
   ============================================================ */
.puerta{background:linear-gradient(122deg,#f08a2a 0%,#e0731a 40%,#cf5f12 74%,#b8480d 100%)}
.puerta .panel{width:min(1080px,100%);border-radius:20px;
  box-shadow:0 50px 110px -30px rgba(60,25,0,.55)}
@media(min-width:860px){.puerta .panel{grid-template-columns:1fr 1fr}}

/* --- lado de la foto --- */
.puerta .izq{
  position:relative;padding:0;color:#fff;min-height:420px;
  background:url("entrada-emaus.webp") center 62% / cover no-repeat}
.puerta .izq::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(184deg,rgba(150,60,5,.62) 0%,rgba(150,60,5,.28) 42%,
             rgba(120,45,0,.5) 100%)}
.puerta .izq-txt{position:relative;z-index:2;padding:44px 40px;
  display:flex;flex-direction:column;justify-content:center;height:100%;
  text-shadow:0 2px 18px rgba(90,35,0,.45)}
.puerta .izq .etq{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.9);
  background:none;padding:0;margin:0 0 14px}
.puerta .izq .etq::after{content:"";display:block;width:52px;height:1px;
  background:rgba(255,255,255,.55);margin-top:14px}
.puerta .izq h1{font-family:var(--serif);font-weight:300;font-size:clamp(42px,5.2vw,62px);
  letter-spacing:.16em;text-transform:uppercase;line-height:1;margin:0 0 18px}
.puerta .izq p{font-family:var(--sans);font-size:15px;line-height:1.62;opacity:1;
  color:rgba(255,255,255,.94);max-width:38ch;margin-bottom:28px;text-wrap:pretty}
.puerta .izq p b{font-family:var(--serif);font-style:italic;font-weight:400}
.puerta .izq ul{gap:14px;margin:0}
.puerta .izq li{display:flex;align-items:center;gap:12px;padding:0;font-size:14px;
  color:rgba(255,255,255,.94)}
.puerta .izq li::before{display:none}
.puerta .izq li .ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  border:1px solid rgba(255,255,255,.4);display:grid;place-items:center}
.puerta .izq li .ic svg{width:17px;height:17px}

/* --- lado del formulario --- */
.puerta .der{padding:clamp(30px,3.4vw,46px)}
.puerta .der h2{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.01em;
  margin-bottom:6px}
.puerta .der .sub{font-size:15px;margin-bottom:24px}
.puerta .google{display:flex;align-items:center;justify-content:center;gap:12px;
  font-weight:600;margin-top:0;min-height:52px;border-radius:10px}
.puerta .google .g{display:grid;place-items:center;line-height:0}
.puerta .o{margin:22px 0 4px;font-size:12.5px}
.puerta label{font-weight:600;letter-spacing:.16em;font-size:10.5px;margin:18px 0 7px}

.campo-p{position:relative;display:flex;align-items:center}
.campo-p .ic{position:absolute;left:14px;display:grid;place-items:center;color:var(--gris);
  pointer-events:none}
.campo-p .ic svg{width:18px;height:18px}
.campo-p input{padding:14px 16px 14px 44px;border-radius:10px;min-height:52px}
.campo-p .ver-clave{position:absolute;right:8px;width:36px;height:36px;border-radius:8px;
  display:grid;place-items:center;color:var(--gris);transition:.15s}
.campo-p .ver-clave:hover{color:var(--ink);background:var(--papel)}
.campo-p .ver-clave.on{color:var(--c)}
.campo-p .ver-clave svg{width:18px;height:18px}
.campo-p input[type="password"]{padding-right:52px}
.campo-p input[type="text"]{padding-right:52px}

.puerta .btn.oscuro{background:var(--ink);color:var(--papel);border:0;min-height:54px;
  border-radius:10px;font-weight:600;position:relative;margin-top:24px}
.puerta .btn.oscuro:hover{background:#000}
.puerta .btn.oscuro .fl{position:absolute;right:20px;display:grid;place-items:center;line-height:0}
.puerta .btn.oscuro .fl svg{width:18px;height:18px}

.puerta .pie-m{margin-top:14px;font-size:13.5px}
.puerta .pie-m button{font-weight:500}
.puerta .pie-m button:hover{text-decoration:underline}

.puerta .nota-legal{display:flex;gap:10px;align-items:flex-start;margin-top:22px;
  font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--gris)}
.puerta .nota-legal .ic{flex:0 0 auto;color:var(--c);opacity:.8;line-height:0;margin-top:1px}
.puerta .nota-legal .ic svg{width:17px;height:17px}

.puerta .error{display:flex;align-items:center;gap:10px;margin-top:18px;
  background:color-mix(in srgb,#c0392b 8%,transparent);color:#a5301f;
  border:1px solid color-mix(in srgb,#c0392b 22%,transparent);
  border-radius:10px;padding:13px 15px;font-family:var(--sans);font-size:13.5px}
.puerta .error::before{content:"!";flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:#c0392b;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}

.puerta .salida-puerta{display:inline-block;margin-top:16px;font-family:var(--sans);
  font-size:12px;color:var(--gris);text-decoration:none}
.puerta .salida-puerta:hover{color:var(--c);text-decoration:underline}

@media(max-width:860px){
  .puerta .izq{min-height:260px}
  .puerta .izq-txt{padding:34px 26px}
  .puerta .izq h1{font-size:38px}
  .puerta .izq p{margin-bottom:18px}
}

/* estado de verificación del correo, en el panel de cuenta */
.datos-cuenta .ok-verif{color:#2c7a4b}
.datos-cuenta .sin-verif{color:#b06a12;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  justify-content:flex-end}
.datos-cuenta .sin-verif .lig{color:var(--c);font-family:var(--sans);font-size:12.5px}
.datos-cuenta .sin-verif .lig:disabled{color:var(--gris);cursor:default}

/* ============================================================
   9 · COMUNIDADES
   ============================================================ */
.banda-com{display:grid;gap:12px;margin:0 0 28px}
.bc-item{background:var(--soft);border:1px solid var(--linea);border-radius:12px;
  padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bc-item .k{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#a05019}
.bc-tema{font-family:var(--serif);font-size:20px;letter-spacing:-.01em;color:var(--ink);
  text-align:left}
.bc-tema i{font-style:normal;color:var(--c)}
.bc-tema:hover{color:var(--c)}
.bc-aviso p{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.55;color:#4a4238}
body.oscuro .bc-item p{color:var(--ink)}

.com-lista{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:26px}
@media(min-width:700px){.com-lista{grid-template-columns:1fr 1fr}}
.com-tarjeta{text-align:left;background:var(--blanco);border:1px solid var(--linea);
  border-radius:12px;padding:22px 24px;transition:.16s}
.com-tarjeta:hover{border-color:#d9cfbe;transform:translateY(-2px)}
.com-tarjeta .k{display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.com-tarjeta b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;
  letter-spacing:-.01em;margin-bottom:6px}
.com-tarjeta em{font-family:var(--sans);font-style:normal;font-size:13.5px;color:var(--gris)}
.com-acciones{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.panel-com{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:24px}

.com-codigo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--soft);
  border:1px solid var(--linea);border-radius:12px;padding:14px 18px;margin:0 0 30px}
.com-codigo .k{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris)}
.com-codigo b{font-family:ui-monospace,Menlo,monospace;font-size:18px;letter-spacing:.12em;
  color:var(--c)}
.com-sec{margin:0 0 38px}
.com-fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.com-fila .campo-simple{flex:1;min-width:180px;margin:0}
.com-semana{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:18px 20px}
.com-semana b{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.01em;flex:1}

.com-recordar textarea{width:100%;font-family:var(--sans);font-size:15px;padding:12px 14px;
  border:1px solid var(--linea);border-radius:10px;background:var(--blanco);color:var(--ink);
  resize:vertical}
.com-avisos{list-style:none;display:grid;gap:10px;margin-top:16px}
.com-avisos li{display:flex;align-items:flex-start;gap:12px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:10px;padding:13px 16px}
.com-avisos p{flex:1;margin:0;font-size:15px;line-height:1.5}
.com-avisos span{font-family:var(--sans);font-size:12px;color:var(--gris);white-space:nowrap}

.com-grupos{display:flex;flex-wrap:wrap;gap:9px}
.com-grupo{display:inline-flex;align-items:center;gap:9px;background:var(--soft);
  border:1px solid var(--linea);border-radius:99px;padding:8px 14px;font-family:var(--sans);
  font-size:14px}
.com-grupo em{font-style:normal;font-size:12px;color:var(--gris)}
.quitar-x{color:var(--gris);font-size:17px;line-height:1;padding:0 4px}
.quitar-x:hover{color:#b3261e}

.com-miembros{display:grid;gap:2px;margin-top:6px}
.com-m{display:grid;grid-template-columns:minmax(140px,1.4fr) minmax(80px,1fr) auto minmax(0,1fr) auto;
  gap:16px;align-items:center;padding:13px 4px;border-bottom:1px solid var(--linea)}
.com-m:last-child{border-bottom:0}
.com-m-quien b{font-family:var(--sans);font-size:14.5px;font-weight:600}
.com-m-quien i{font-style:normal;font-weight:400;color:var(--gris);font-size:12.5px}
.com-m-grupo{display:block;font-family:var(--sans);font-size:12px;color:var(--c)}
.com-m .barra-fina{height:6px;background:var(--linea);border-radius:99px;overflow:hidden}
.com-m .barra-fina i{display:block;height:100%;background:var(--c)}
.com-m-dato{text-align:right;font-family:var(--sans)}
.com-m-dato b{font-size:14.5px;font-weight:600}
.com-m-dato small{display:block;font-size:11.5px;color:var(--gris)}
.com-m-ult{font-family:var(--serif);font-size:14.5px;color:var(--gris)}
.com-m-acc{display:flex;align-items:center;gap:8px}
.com-m-acc select{font-family:var(--sans);font-size:12.5px;padding:5px 8px;border-radius:8px;
  border:1px solid var(--linea);background:var(--blanco);color:var(--ink)}
@media(max-width:760px){
  .com-m{grid-template-columns:1fr auto;gap:8px}
  .com-m .barra-fina{grid-column:1/-1}
  .com-m-ult{grid-column:1/-1;font-size:13.5px}
}

.com-material{display:grid;gap:10px}
.com-mat{display:flex;align-items:center;gap:14px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:10px;padding:13px 16px}
.com-mat div{flex:1}
.com-mat b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600}
.com-mat small{color:var(--gris);font-family:var(--sans);font-size:12.5px}

.com-sesiones{display:grid;gap:12px;margin-top:16px}
.com-ses{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:14px 16px}
.com-ses-cab{display:flex;align-items:baseline;gap:12px}
.com-ses-cab b{font-family:var(--sans);font-size:14.5px;font-weight:600;flex:1}
.com-ses-cab span{font-family:var(--sans);font-size:12.5px;color:var(--gris)}
.com-ses-lista{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.com-vino{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13.5px;
  background:var(--papel);border:1px solid var(--linea);border-radius:99px;padding:6px 13px;
  cursor:pointer}
.com-vino.si{color:#2c7a4b;border-color:#bcd9c6}
.com-pie{border-top:1px solid var(--linea);padding-top:22px;margin-top:10px}

/* ---------- 10 · comunidad, ordenada por pestañas ---------- */
.com-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:22px}
.com-cab h1{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(30px,4.4vw,46px);line-height:1.05}
.com-sub{font-family:var(--sans);font-size:14.5px;color:var(--gris);margin-top:6px}
.chip-cod{display:inline-flex;align-items:center;gap:10px;background:var(--soft);
  border:1px solid var(--linea);border-radius:99px;padding:9px 16px}
.chip-cod span{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris)}
.chip-cod b{font-family:ui-monospace,Menlo,monospace;font-size:14.5px;letter-spacing:.1em;
  color:var(--c)}
.chip-cod:hover{border-color:#e7c9a8}
.com-pest{margin-bottom:26px}
.com-hoja{display:grid;gap:20px}

.com-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:22px 24px}
.com-caja h3{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin-bottom:14px}
.com-caja-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.com-caja-cab h3{margin-bottom:14px}
.nota-aviso{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--gris);
  margin:-6px 0 14px;max-width:70ch}
.com-caja textarea{width:100%;font-family:var(--sans);font-size:15px;padding:12px 14px;
  border:1px solid var(--linea);border-radius:10px;background:var(--papel);color:var(--ink);
  resize:vertical}

.com-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.com-cifras>div{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:20px;text-align:center}
.com-cifras b{display:block;font-family:var(--serif);font-weight:300;font-size:38px;
  letter-spacing:-.02em;line-height:1}
.com-cifras span{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:var(--gris)}

.com-grupo-tit{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c);margin:18px 0 8px}
.com-miembros{display:grid;gap:0}
.com-m{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(160px,1.4fr) auto;
  gap:18px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--linea)}
.com-m:last-child{border-bottom:0}
.com-m-quien b{display:block;font-family:var(--sans);font-size:15px;font-weight:600}
.com-m-quien i{font-style:normal;font-weight:400;color:var(--gris);font-size:12.5px}
.com-m-ult{display:block;font-family:var(--sans);font-size:12.5px;color:var(--gris);margin-top:2px}
.com-m-barra .barra-fina{height:7px;background:var(--linea);border-radius:99px;overflow:hidden}
.com-m-barra .barra-fina i{display:block;height:100%;background:var(--c);border-radius:99px}
.com-m-barra>span{display:block;font-family:var(--sans);font-size:12px;color:var(--gris);
  margin-top:6px}
@media(max-width:700px){
  .com-m{grid-template-columns:1fr auto;gap:10px}
  .com-m-barra{grid-column:1/-1}
}

/* la conversación */
.com-chat{display:grid;gap:12px;max-height:min(52vh,460px);overflow-y:auto;padding:6px 2px 12px;
  overscroll-behavior:contain}
.msg{position:relative;max-width:78%;background:var(--papel);border:1px solid var(--linea);
  border-radius:14px;padding:11px 15px}
.msg.mio{margin-left:auto;background:var(--soft);border-color:#e7d6c2}
.msg-quien{display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;
  color:var(--c);margin-bottom:3px}
.msg p{margin:0;font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg-hora{display:block;font-family:var(--sans);font-size:11px;color:var(--gris);margin-top:5px}
.msg .quitar-x{position:absolute;top:6px;right:8px;opacity:0;font-size:15px}
.msg:hover .quitar-x{opacity:.6}
.com-escribir{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.com-escribir textarea{flex:1;min-height:46px}
@media(max-width:620px){.msg{max-width:92%}}

/* ============================================================
   11 · LA TIENDA Y MI PLAN
   ------------------------------------------------------------
   Formación se elige, no se impone. Estantes con tarjetas de
   módulo, y un plan propio que se puede reordenar.
   ============================================================ */
.tienda-barra{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 34px}
.estante{margin:0 0 40px}
.estante-d{font-family:var(--sans);font-size:14px;color:var(--gris);margin:-10px 0 18px}
.mods{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.mods{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.mods{grid-template-columns:repeat(3,1fr)}}

.mod{position:relative;background:var(--blanco);border:1px solid var(--linea);
  border-radius:12px;padding:22px 24px 18px;transition:.16s}
.mod:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(28,26,22,.5);
  border-color:#d9cfbe}
.mod.dentro{border-color:var(--c);box-shadow:inset 3px 0 0 var(--c)}
.mod-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.mod-tipo{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c)}
.pr{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);
  background:var(--papel);border:1px solid var(--linea);border-radius:99px;padding:4px 11px}
.pr.gratis{color:#2c7a4b;border-color:#bcd9c6}
.pr.tuyo{color:var(--c);border-color:#e7c9a8;background:var(--soft)}
.mod h3{font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:-.01em;
  line-height:1.2;margin-bottom:5px}
.mod-sub{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--gris);
  min-height:2.9em}
.mod-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--linea)}
.mod-n{font-family:var(--sans);font-size:12.5px;color:var(--gris)}
.mod-pie .btn-mini.abrir{border-color:var(--c);color:var(--c)}
.mod-pie .btn-mini.quita{background:var(--soft);border-color:#e7c9a8;color:var(--c)}
.mod-ver{position:absolute;inset:0;z-index:1;background:none;border:0}
.mod-cab,.mod h3,.mod-sub,.mod-pie{position:relative;z-index:2}
.mod-pie button{position:relative;z-index:3}

.mod-ficha{display:flex;gap:34px;flex-wrap:wrap;margin:0 0 22px;padding:18px 0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.mod-ficha b{display:block;font-family:var(--serif);font-weight:300;font-size:30px;
  letter-spacing:-.02em;line-height:1}
.mod-ficha span{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:var(--gris)}

.plan-vacio{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:28px;max-width:64ch}
.plan-vacio h3{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:10px}
.plan-vacio p{font-size:16px;line-height:1.7;margin-bottom:18px}

.plan-lista{display:grid;gap:10px;margin-bottom:30px}
.plan-mod{display:grid;grid-template-columns:auto minmax(140px,1.3fr) minmax(120px,1fr) auto;
  gap:18px;align-items:center;background:var(--blanco);border:1px solid var(--linea);
  border-radius:12px;padding:14px 18px;box-shadow:inset 3px 0 0 var(--c)}
.plan-orden{display:flex;flex-direction:column;align-items:center;gap:1px}
.plan-orden button{font-size:11px;color:var(--gris);line-height:1;padding:2px 4px}
.plan-orden button:hover:not(:disabled){color:var(--c)}
.plan-orden button:disabled{opacity:.25;cursor:default}
.plan-orden b{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--gris)}
.plan-quien b{display:block;font-family:var(--sans);font-size:15px;font-weight:600}
.plan-quien span{font-family:var(--sans);font-size:12.5px;color:var(--gris)}
.plan-barra .barra-fina{height:7px;background:var(--linea);border-radius:99px;overflow:hidden}
.plan-barra .barra-fina i{display:block;height:100%;background:var(--c);border-radius:99px}
.plan-barra span{display:block;font-family:var(--sans);font-size:12px;color:var(--gris);
  margin-top:6px}
.plan-acc{display:flex;align-items:center;gap:10px}
@media(max-width:760px){
  .plan-mod{grid-template-columns:auto 1fr auto}
  .plan-barra{grid-column:2/-1}
}

.plan-sigue{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--soft);
  border:1px solid var(--linea);border-radius:12px;padding:20px 24px}
.plan-sigue .k{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#a05019;width:100%}
.plan-sigue b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em;flex:1}
.plan-sigue em{font-family:var(--sans);font-style:normal;font-size:12.5px;color:var(--gris)}
.mod-candado{display:block;font-family:var(--sans);font-size:11.5px;color:var(--gris);
  margin-top:8px}
.plan-lock{font-style:normal;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  border:1px solid var(--linea);border-radius:99px;padding:2px 8px;margin-left:6px}

/* ============================================================
   CAPA 12 · Estudio bíblico
   ------------------------------------------------------------
   Mismo lenguaje que el resto: serif para lo que se lee,
   sans para lo que se usa, la línea fina de siempre y el
   naranja solo donde hace falta.
   ============================================================ */

.est-intro{font-family:var(--serif);font-size:17.5px;line-height:1.7;color:var(--ink);
  max-width:62ch;margin:0 0 26px}
.est-h3{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin:34px 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--linea)}
.est-p{font-family:var(--serif);font-size:16.5px;line-height:1.72;margin:0 0 13px;max-width:66ch}
.est-lead{font-family:var(--serif);font-size:20px;line-height:1.55;margin:0 0 16px;
  max-width:60ch;color:var(--ink)}
.est-nada{font-family:var(--sans);font-size:13px;color:var(--gris);margin:14px 0}
.est-acc{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.est-cab{margin-bottom:26px}
.est-cab .volver-b{margin-bottom:8px;display:inline-block}

/* ---------- buscador transversal ---------- */
.est-buscar{margin:0 0 30px}
.est-buscar input,.est-filtro{width:100%;max-width:520px;font-family:var(--sans);font-size:14.5px;
  color:var(--ink);background:var(--blanco);border:1px solid var(--linea);border-radius:10px;
  padding:12px 15px;outline:0}
.est-buscar input:focus,.est-filtro:focus{border-color:var(--c)}
.est-filtro{margin:0 0 22px}
#estRes{margin-top:10px;display:flex;flex-direction:column;gap:1px}
.est-hit{display:block;text-decoration:none;background:var(--blanco);border:1px solid var(--linea);
  padding:11px 15px;transition:.14s}
.est-hit:first-child{border-radius:10px 10px 0 0}
.est-hit:last-child{border-radius:0 0 10px 10px}
.est-hit+.est-hit{border-top:0}
.est-hit:hover{background:var(--soft)}
.est-hit-sec{display:block;font-family:var(--sans);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:3px}
.est-hit b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600}
.est-hit em{display:block;font-family:var(--serif);font-style:normal;font-size:13.5px;
  color:var(--gris);line-height:1.5}

/* ---------- rejilla de secciones ---------- */
.est-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;
  margin:0 0 34px}
.est-tarj{position:relative;display:block;text-decoration:none;background:var(--blanco);
  border:1px solid var(--linea);border-radius:12px;padding:20px 22px 22px;transition:.16s}
.est-tarj:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:var(--sombra)}
.est-num{position:absolute;top:16px;right:18px;font-family:var(--sans);font-size:10.5px;
  font-weight:700;letter-spacing:.1em;color:var(--linea)}
.est-tarj h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.25;
  margin:0 0 7px;padding-right:26px;color:var(--ink)}
.est-tarj p{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--gris);margin:0}
.est-tarj.per h3{font-size:18px}

/* ---------- ficha de datos ---------- */
.est-ficha{border-top:1px solid var(--linea)}
.est-fila{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--linea)}
.est-fila b{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);padding-top:4px}
.est-fila span{font-family:var(--serif);font-size:16px;line-height:1.65}
@media(max-width:640px){.est-fila{grid-template-columns:1fr;gap:4px}}

.est-estr{list-style:none;margin:0;padding:0;counter-reset:e}
.est-estr li{position:relative;padding:11px 0 11px 34px;border-bottom:1px solid var(--linea);
  font-family:var(--serif);font-size:16px}
.est-estr li::before{counter-increment:e;content:counter(e);position:absolute;left:0;top:12px;
  font-family:var(--sans);font-size:11px;font-weight:700;color:var(--c)}
.est-estr b{font-weight:400}

.est-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px}
.est-chip{font-family:var(--sans);font-size:12.5px;color:var(--ink);background:var(--soft);
  border:1px solid transparent;border-radius:99px;padding:6px 13px;text-decoration:none}
.est-chip.enl:hover{border-color:var(--c);color:var(--c)}

.refs-b{display:flex;flex-wrap:wrap;gap:6px 10px;margin:10px 0 0;align-items:baseline}
.ref-b{font-family:var(--sans);font-size:12.5px;color:var(--c);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--c) 30%,transparent);white-space:nowrap}
.ref-b:hover{border-bottom-color:var(--c)}
.ref-b.muda{color:var(--gris);border:0}

/* ---------- acordeones ---------- */
.est-acor{border-bottom:1px solid var(--linea)}
.est-acor>summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;position:relative;
  font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--ink)}
.est-acor>summary::-webkit-details-marker{display:none}
.est-acor>summary::after{content:"+";position:absolute;right:4px;top:13px;
  font-family:var(--sans);font-size:19px;font-weight:300;color:var(--gris);transition:.18s}
.est-acor[open]>summary::after{content:"–";color:var(--c)}
.est-acor>summary:hover{color:var(--c)}
.est-acor>div{padding:2px 0 22px}
.est-cuando{display:block;font-family:var(--sans);font-size:11.5px;color:var(--gris);margin-top:2px}
.est-eco{background:var(--soft);border-radius:10px;padding:13px 16px;font-size:15px}

/* ---------- niveles e itinerarios ---------- */
.est-niveles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
  margin:0 0 10px}
.est-niv{border-left:3px solid var(--c);background:var(--blanco);border-radius:0 10px 10px 0;
  padding:13px 16px}
.est-niv b{display:block;font-family:var(--sans);font-size:12.5px;font-weight:600;
  color:var(--c);margin-bottom:4px}
.est-niv span{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--gris)}
.est-caminos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.est-cam{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:22px 24px}
.est-cam-niv{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c)}
.est-cam h4{font-family:var(--serif);font-weight:400;font-size:22px;margin:6px 0 6px}
.est-cam header p{font-family:var(--sans);font-size:13px;color:var(--gris);line-height:1.55;
  margin:0 0 14px}
.est-cam ol{list-style:none;counter-reset:c;margin:0;padding:0}
.est-cam li{position:relative;counter-increment:c;padding:9px 0 9px 28px;
  border-top:1px solid var(--linea)}
.est-cam li::before{content:counter(c);position:absolute;left:0;top:11px;font-family:var(--sans);
  font-size:10.5px;font-weight:700;color:var(--gris)}
.est-cam li b{font-family:var(--serif);font-weight:400;font-size:16px}
.est-cam li em{display:block;font-family:var(--sans);font-style:normal;font-size:12.5px;
  color:var(--gris);line-height:1.5;margin-top:2px}

/* ---------- comparador sinóptico ---------- */
.sin-tabla{border-top:1px solid var(--linea)}
.sin-fila{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:10px;padding:11px 8px;
  border-bottom:1px solid var(--linea);text-decoration:none;align-items:center;transition:.12s}
a.sin-fila:hover{background:var(--soft)}
.sin-cab{position:sticky;top:0;background:var(--papel);z-index:2;border-bottom:1px solid var(--ink)}
.sin-cab span{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.sin-t{font-family:var(--serif);font-size:15.5px;line-height:1.35;color:var(--ink)}
.sin-c{font-family:var(--sans);font-size:12px;color:var(--c)}
.sin-c.no{color:var(--linea)}
.sin-grupo{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);background:var(--soft);padding:9px 10px;
  border-bottom:1px solid var(--linea)}
@media(max-width:700px){
  .sin-fila{grid-template-columns:1fr;gap:3px;padding:12px 8px}
  .sin-cab{display:none}
  .sin-c{display:inline-block;margin-right:10px}
  .sin-c.no{display:none}
}
.sin-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.sin-col{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:18px 20px}
.sin-col h3{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c);margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px solid var(--linea)}
.sin-col h3 small{display:block;font-family:var(--sans);font-size:11.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--gris);margin-top:3px}
.sin-txt .verso-l{font-family:var(--serif);font-size:15.5px;line-height:1.62;margin:0 0 7px}
.sin-abrir{display:inline-block;font-family:var(--sans);font-size:12.5px;color:var(--c);
  text-decoration:none;margin-top:10px}
.sin-abrir:hover{text-decoration:underline}
.sin-paso{display:flex;justify-content:space-between;gap:12px;margin-top:26px}

/* ---------- línea del tiempo ---------- */
.cro{position:relative}
.cro-per{position:relative;padding:0 0 6px 26px;margin:0 0 26px;
  border-left:3px solid color-mix(in srgb,var(--c) 45%,transparent)}
.cro-per{border-left-color:color-mix(in srgb,var(--c) 45%,transparent)}
.cro-fechas{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c)}
.cro-per h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:4px 0 6px}
.cro-per header p{font-family:var(--sans);font-size:13.5px;color:var(--gris);line-height:1.6;
  margin:0 0 14px;max-width:62ch}
.cro-ev{list-style:none;margin:0;padding:0}
.cro-hito{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:11px 0;
  border-top:1px solid var(--linea)}
.cro-a{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--gris);padding-top:3px}
.cro-hito b{font-family:var(--serif);font-weight:400;font-size:17px;display:block}
.cro-hito em{font-family:var(--sans);font-style:normal;font-size:13px;color:var(--gris);
  line-height:1.55;display:block;margin:2px 0 4px;max-width:60ch}
.cro-hito.clave b{color:var(--c)}
.cro-hito.catastrofe .cro-a{color:#8a4a4a}
@media(max-width:600px){.cro-hito{grid-template-columns:1fr;gap:2px}}

/* ---------- mapas ---------- */
.mapa-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:10px;overflow:auto;display:flex;justify-content:center}
.mapa-svg{display:block;max-width:100%;height:auto;margin:0 auto}
.mapa-isla{fill:#f4efe4}
body.oscuro .mapa-isla{fill:#241f18}
.mapa-fondo{fill:#f4efe4}
body.oscuro .mapa-fondo{fill:#241f18}
.mapa-mar{fill:#cfe0e6}
body.oscuro .mapa-mar{fill:#1b2a30}
.mapa-agua{fill:#bcd6de}
body.oscuro .mapa-agua{fill:#20343c}
.mapa-rio{fill:none;stroke:#8fb8c4;stroke-width:1.6}
.mapa-linea{fill:none;stroke-width:2.4;stroke-dasharray:7 5;opacity:.85}
.mapa-paso{opacity:.95}
.mapa-orden{font-family:var(--sans);font-size:9px;font-weight:700;fill:#fff;text-anchor:middle}
.mapa-lug circle,.mapa-lug polygon{fill:#7a6a55;transition:.14s}
.mapa-lug text{font-family:var(--sans);font-size:10.5px;fill:#4a4136}
body.oscuro .mapa-lug text{fill:#cbc2b2}
.mapa-lug.aldea circle{fill:#a3947c}
.mapa-lug.aldea text{font-size:9.5px;opacity:.85}
.mapa-lug.monte polygon{fill:#8a7a4a}
.mapa-lug{cursor:pointer;outline:0}
.mapa-lug:hover circle,.mapa-lug:hover polygon,.mapa-lug.on circle,.mapa-lug.on polygon{fill:var(--c)}
.mapa-lug:hover text,.mapa-lug.on text,.mapa-lug:focus text{fill:var(--c);font-weight:600}
.mapa-rutas{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.mapa-ruta{font-family:var(--sans);font-size:12.5px;color:var(--ink);background:var(--blanco);
  border:1px solid var(--linea);border-radius:99px;padding:7px 15px;transition:.14s}
.mapa-ruta:hover{border-color:var(--c)}
.mapa-ruta.on{background:var(--c);border-color:var(--c);color:#fff}
.mapa-info{min-height:20px}
.mapa-info h4{font-family:var(--serif);font-weight:400;font-size:20px;margin:10px 0 4px}
.mapa-info p{font-family:var(--sans);font-size:13.5px;color:var(--gris);line-height:1.6;
  margin:0 0 6px;max-width:62ch}
.mapa-pasos{margin:8px 0 0 18px;font-family:var(--sans);font-size:13px;color:var(--gris)}
.mapa-pasos li{padding:3px 0}

/* ---------- tablas de dos columnas (profecías, tipos, enlaces) ---------- */
.par-tabla{border-top:1px solid var(--linea)}
.par-fila{display:grid;grid-template-columns:1fr 100px 1fr;gap:14px;align-items:start;
  padding:14px 8px;border-bottom:1px solid var(--linea)}
.par-a,.par-b{min-width:0}
.par-fila b{display:block;font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.4}
.par-flecha{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);text-align:center;padding-top:5px}
.par-nota{grid-column:1/-1;font-family:var(--sans);font-size:13px;color:var(--gris);
  line-height:1.6;margin:6px 0 0;max-width:76ch}
@media(max-width:640px){
  .par-fila{grid-template-columns:1fr;gap:4px}
  .par-flecha{text-align:left;padding:2px 0}
}

/* ---------- genealogías ---------- */
.gen{margin:0 0 30px}
.gen h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 6px}
.gen-lista{list-style:none;margin:14px 0 0;padding:0 0 0 4px}
.gen-lista li{position:relative;padding:9px 0 9px 26px;border-left:2px solid var(--linea);
  margin-left:6px}
.gen-lista li::before{content:"";position:absolute;left:-5px;top:16px;width:8px;height:8px;
  border-radius:50%;background:var(--c)}
.gen-lista b{font-family:var(--serif);font-weight:400;font-size:17px;margin-right:10px}

/* ---------- alianzas ---------- */
.ali-x{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:22px 24px;margin:0 0 16px;position:relative}
.ali-n{position:absolute;top:18px;right:22px;font-family:var(--serif);font-size:30px;
  color:var(--linea);line-height:1}
.ali-x h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 2px}

/* ---------- diccionario ---------- */
.dic{padding:14px 0;border-bottom:1px solid var(--linea)}
.dic h4{font-family:var(--serif);font-weight:400;font-size:19px;margin:0 0 4px}
.dic h4 small{font-family:var(--sans);font-size:11px;font-style:normal;color:var(--c);
  letter-spacing:.06em;margin-left:10px}
.dic p{font-family:var(--serif);font-size:15.5px;line-height:1.65;margin:0;max-width:70ch}

/* ---------- Padres ---------- */
.pad-x{background:var(--soft);border-radius:12px;padding:22px 26px;margin:0 0 14px}
.pad-x blockquote{font-family:var(--serif);font-size:18.5px;line-height:1.6;font-style:italic;
  margin:0 0 12px;max-width:64ch;color:var(--ink)}
.pad-x blockquote::before{content:"“"}
.pad-x blockquote::after{content:"”"}
.pad-x figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.pad-x figcaption b{font-family:var(--sans);font-size:13px;font-weight:600}
.pad-x figcaption span{font-family:var(--sans);font-size:12px;color:var(--gris)}

/* ---------- liturgia ---------- */
.lit-x{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--linea)}
.lit-x b{font-family:var(--sans);font-size:14px;font-weight:600;display:block}
.lit-x em{font-family:var(--serif);font-style:normal;font-size:14.5px;color:var(--gris);
  line-height:1.55;display:block;margin-top:2px;max-width:64ch}
@media(max-width:600px){.lit-x{grid-template-columns:1fr;gap:3px}}

/* ---------- lectio divina ---------- */
.lec-elige{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px}
.lec-elige label{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.lec-elige input{font-family:var(--sans);font-size:14.5px;color:var(--ink);background:var(--blanco);
  border:1px solid var(--linea);border-radius:10px;padding:10px 14px;outline:0;min-width:180px}
.lec-elige input:focus{border-color:var(--c)}
.lec-texto{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:22px 26px;margin:0 0 24px}
.lec-texto h4{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c);margin:0 0 12px}
.lec-texto .verso-l{font-family:var(--serif);font-size:17px;line-height:1.7;margin:0 0 8px}
.lec-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.lec-paso{position:relative;background:var(--soft);border-radius:12px;padding:20px 22px}
.lec-n{position:absolute;top:14px;right:18px;font-family:var(--serif);font-size:26px;
  color:color-mix(in srgb,var(--c) 30%,transparent);line-height:1}
.lec-paso h3{font-family:var(--serif);font-weight:400;font-size:20px;margin:0 0 6px;padding-right:24px}
.lec-paso h3 small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--c);
  margin-top:2px}
.lec-paso p{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--gris);margin:0}

/* ---------- el perfil del pasaje, bajo el capítulo ---------- */
.perfil{margin:38px 0 0;padding:26px 0 0;border-top:2px solid var(--ink)}
.perfil>h2{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin:0 0 6px}
.perfil .est-acor>summary{font-size:16.5px;padding:13px 30px 13px 0}
.perfil-n{display:inline-block;font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c);background:var(--soft);
  border-radius:99px;padding:2px 9px;margin-left:10px;vertical-align:2px}
.perfil-lin{padding:9px 0;border-top:1px solid var(--linea)}
.perfil-lin:first-child{border-top:0}
.perfil-lin b{font-family:var(--serif);font-weight:400;font-size:16px}
.perfil-lin span{display:block;font-family:var(--sans);font-size:12.5px;margin-top:2px}
.perfil-lin em{display:block;font-family:var(--sans);font-style:normal;font-size:13px;
  color:var(--gris);line-height:1.55;margin-top:2px;max-width:66ch}
.perfil .pad-x{padding:18px 20px}
.perfil .pad-x blockquote{font-size:16.5px}

/* ============================================================
   CAPA 13 · La cabecera en el teléfono
   ------------------------------------------------------------
   El rediseño Aurora dejó `.barra .in{height:66px}` fijo, y en el
   móvil la barra se reparte en dos filas: la segunda quedaba
   cortada por el `overflow:hidden`. Resultado: ni marca, ni menú,
   ni buscador. Aquí se rehace esa cabecera entera, con el mismo
   lenguaje claro de Aurora.
   ============================================================ */
@media(max-width:820px){
  .barra .in{height:auto;flex-wrap:wrap;padding:0;gap:0;row-gap:0;
    align-items:center;overflow:visible;position:relative}

  /* fila 1 · la marca y los botones */
  .marca{order:1;flex:1 1 auto;min-width:0;height:52px;padding:0 0 0 16px}
  .marca .txt{display:block}
  .marca strong{font-family:var(--serif);font-size:18px;font-weight:400;
    letter-spacing:.18em;color:var(--ink);white-space:nowrap}
  .derecha{order:2;flex:0 0 auto;height:52px;gap:6px;padding:0 12px 0 0}
  .btn-icono{width:36px;height:36px;border:1px solid var(--linea);border-radius:9px;
    color:var(--gris);background:var(--blanco)}
  .btn-icono:hover{color:var(--ink)}

  /* el buscador es un botón que se abre sobre la fila */
  .campo{flex:0 0 36px;width:36px;min-width:36px;height:36px;padding:0;gap:0;
    justify-content:center;cursor:text;border:1px solid var(--linea);
    border-radius:9px;background:var(--blanco);transition:none}
  .campo span{color:var(--gris);font-size:17px}
  .campo input{width:0;min-width:0;padding:0;opacity:0}
  .campo:focus-within{position:absolute;left:16px;right:12px;top:8px;z-index:8;
    width:auto;min-width:0;flex:none;height:36px;padding:0 12px;gap:9px;
    justify-content:flex-start;background:var(--blanco);border-color:var(--c)}
  .campo:focus-within input{width:100%;opacity:1;font-size:16px;color:var(--ink)}
  .res{top:52px;left:12px;right:12px;width:auto}

  /* fila 2 · el menú, deslizable, con el subrayado naranja de Aurora */
  #menu{order:3;flex:1 0 100%;width:100%;gap:0;margin:0;padding:0 16px;
    border-top:1px solid var(--linea);overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity}
  #menu::-webkit-scrollbar{display:none}
  #menu .nav{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;
    background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
    margin:0 22px 0 0;padding:13px 0;min-height:46px;color:var(--gris);font-size:14.5px}
  #menu .nav:last-child{margin-right:16px}
  #menu .nav span{display:inline!important;font-size:14.5px}
  #menu .nav svg{display:none}
  #menu .nav.activo{background:none;color:var(--ink);font-weight:600;
    border-bottom-color:var(--c)}
  .con-lista{position:static;flex:0 0 auto}
  .lista-anios{left:12px;right:12px;width:auto;min-width:0;max-width:none;
    top:calc(100% + 2px)}
  .mini-cab{top:98px}
}
@media(max-width:400px){
  .marca strong{font-size:16px;letter-spacing:.14em}
  .derecha{gap:5px}
  .btn-icono,.campo{width:34px;min-width:34px;height:34px;flex-basis:34px}
}

/* ============================================================
   CAPA 14 · Índices visuales
   ------------------------------------------------------------
   Un mismo sistema para las tres portadas grandes: los libros de
   la Biblia, el Catecismo y el estudio bíblico. Barra lateral con
   medallón y navegación, bloques con cabecera de color y tarjetas.
   ============================================================ */

.idx{display:grid;grid-template-columns:274px minmax(0,1fr);gap:26px;align-items:start}
.idx-main{min-width:0}

.idx-lado{position:sticky;top:84px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:16px;padding:24px 22px}
.idx-med{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:var(--soft);color:var(--c);flex:0 0 46px}
.idx-med svg{width:24px;height:24px}
.idx-lado-cab h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;
  margin:15px 0 5px}
.idx-lado-cab p{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--gris);margin:0}
.idx-nav{display:flex;flex-direction:column;gap:1px;margin:20px 0 0;padding-top:18px;
  border-top:1px solid var(--linea)}
.idx-grupo{display:flex;align-items:center;gap:8px;margin:16px 0 6px;
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c)}
.idx-grupo:first-child{margin-top:0}
.idx-grupo i{width:7px;height:7px;border-radius:50%;background:currentColor}
.idx-enl{display:flex;align-items:flex-start;gap:11px;padding:9px 11px;border-radius:10px;
  text-decoration:none;color:var(--ink);transition:.14s}
.idx-enl:hover{background:var(--soft)}
.idx-enl.on{background:var(--soft);color:var(--c)}
.idx-enl svg{width:19px;height:19px;flex:0 0 19px;margin-top:1px;color:var(--gris)}
.idx-enl:hover svg,.idx-enl.on svg{color:var(--c)}
.idx-enl b{display:block;font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.3}
.idx-enl em{display:block;font-family:var(--sans);font-style:normal;font-size:12px;
  color:var(--gris);line-height:1.4;margin-top:1px}
.idx-cita{margin:20px 0 0;padding:18px 20px;border-radius:13px;background:var(--soft)}
.idx-cita blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:14.5px;
  line-height:1.55;color:var(--ink)}
.idx-cita blockquote::before{content:"“"}
.idx-cita blockquote::after{content:"”"}
.idx-cita figcaption{margin-top:10px;font-family:var(--sans);font-size:11.5px;color:var(--c)}

.idx-cab{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;
  justify-content:space-between;margin:0 0 26px}
.idx-cab h2{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.15;margin:0 0 5px}
.idx-cab p{font-family:var(--sans);font-size:14px;color:var(--gris);margin:0;max-width:56ch}
.idx-consejo{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:12px;
  background:var(--soft);text-decoration:none;color:var(--ink)}
.idx-consejo svg{width:20px;height:20px;flex:0 0 20px;color:var(--c)}
.idx-consejo b{display:block;font-family:var(--sans);font-size:13.5px;font-weight:600}
.idx-consejo em{display:block;font-family:var(--sans);font-style:normal;font-size:12px;color:var(--gris)}

.idx-parte{display:flex;align-items:center;gap:10px;margin:8px 0 16px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--c)}
.idx-parte svg{width:20px;height:20px;flex:0 0 20px}
.idx-parte::after{content:"";flex:1;height:1px;background:var(--linea)}
.idx-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:14px;
  margin:0 0 34px}
.idx-rejilla.nt{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.idx-caja{border-radius:16px;padding:22px 20px;
  background:color-mix(in srgb,var(--c) 6%,var(--blanco));
  border:1px solid color-mix(in srgb,var(--c) 16%,var(--linea))}
.idx-caja .idx-med{margin:0 auto;background:color-mix(in srgb,var(--c) 15%,var(--blanco))}
.idx-caja h3{text-align:center;margin:14px 0 6px;font-family:var(--sans);font-size:12.5px;
  font-weight:700;letter-spacing:.13em;color:var(--ink)}
.idx-caja p{text-align:center;margin:0 0 16px;font-family:var(--sans);font-size:12.5px;
  line-height:1.5;color:var(--gris)}
.idx-caja .libros-b{justify-content:center}
.idx-caja .libro-b{background:var(--blanco);
  border:1px solid color-mix(in srgb,var(--c) 22%,var(--linea))}
.idx-pie{display:flex;gap:18px;align-items:center;padding:22px 26px;border-radius:16px;
  background:var(--soft);margin:0 0 10px}
.idx-pie>i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--blanco);color:var(--c);flex:0 0 44px}
.idx-pie svg{width:22px;height:22px}
.idx-pie blockquote{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.5;
  color:var(--ink);max-width:70ch}
.idx-pie figcaption{margin-top:7px}

@media(max-width:1080px){
  .idx{grid-template-columns:1fr}
  .idx-lado{position:static;display:grid;grid-template-columns:auto 1fr;gap:0 16px;
    align-items:center;padding:18px 18px 16px}
  .idx-lado .idx-med{grid-row:1/3}
  .idx-lado-cab{display:contents}
  .idx-lado-cab h3{margin:0;align-self:end}
  .idx-lado-cab p{align-self:start}
  .idx-nav{grid-column:1/-1;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;
    margin-top:16px;padding-top:14px;scrollbar-width:none}
  .idx-nav::-webkit-scrollbar{display:none}
  .idx-grupo{display:none}
  .idx-enl{flex:0 0 auto;white-space:nowrap;background:var(--soft);padding:8px 13px;border-radius:99px}
  .idx-enl em{display:none}
  .idx-cita{grid-column:1/-1}
  .idx-pie{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- el mapa del estudio ---------- */
.est-mapa{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:26px;align-items:start}
.est-cuerpo{min-width:0}
.et{display:grid;grid-template-columns:198px minmax(0,1fr);gap:16px;margin:0 0 16px;
  align-items:stretch}
.et-cab{position:relative;border-radius:16px;padding:18px 18px 20px;
  background:color-mix(in srgb,var(--c) 12%,var(--blanco))}
.et-n{font-family:var(--serif);font-size:31px;line-height:1;color:var(--c)}
.et-ico{position:absolute;top:16px;right:16px;color:var(--c);opacity:.5}
.et-ico svg{width:27px;height:27px}
.et-cab b{display:block;margin:10px 0 8px;font-family:var(--sans);font-size:11px;
  font-weight:700;letter-spacing:.16em;color:var(--c)}
.et-cab p{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--gris)}
.et-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}

.est-tarj{position:relative;display:block;background:var(--blanco);border:1px solid var(--linea);
  border-radius:14px;padding:18px 18px 20px;text-decoration:none;transition:.16s}
.est-tarj:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:var(--sombra)}
.est-ico{display:block;color:var(--c);margin-bottom:12px}
.est-ico svg{width:26px;height:26px}
.est-num{position:absolute;top:15px;right:16px;font-family:var(--sans);font-size:11px;
  font-weight:600;color:var(--gris);opacity:.55;letter-spacing:.06em}
.est-tarj h3{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.3;
  margin:0 0 6px;padding-right:24px;color:var(--ink)}
.est-tarj p{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--gris);margin:0}
.est-tarj.dest{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.est-dest{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--c);color:#fff;border-radius:99px;padding:4px 12px;
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.est-tarj.ancha{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:18px;align-items:center;
  background:color-mix(in srgb,var(--c) 7%,var(--blanco));
  border-color:color-mix(in srgb,var(--c) 22%,var(--linea))}
.est-tarj.ancha .est-ico{margin:0}
.est-tarj.ancha .est-ico svg{width:32px;height:32px}
.est-tarj.ancha h3{font-size:17px;padding-right:0}

.est-lado{position:sticky;top:84px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:16px;padding:22px 20px}
.est-lado>h3{margin:0 0 18px;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:19px;line-height:1.25}
.est-hitos{list-style:none;margin:0;padding:0}
.est-hitos li{position:relative;display:flex;align-items:center;gap:11px;padding:8px 0;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gris)}
.est-hitos li i{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;
  flex:0 0 33px;background:color-mix(in srgb,var(--c) 14%,var(--blanco));color:var(--c)}
.est-hitos li i svg{width:17px;height:17px}
.est-hitos li:not(:last-child)::before{content:"";position:absolute;left:16px;top:41px;
  bottom:-8px;border-left:2px dashed color-mix(in srgb,var(--c) 45%,transparent)}

.est-buscar{position:relative;margin:0 0 26px}
.est-lupa{position:absolute;left:15px;top:14px;width:18px;height:18px;color:var(--gris);
  pointer-events:none}
.est-buscar input{width:100%;max-width:none;padding:13px 16px 13px 43px;border-radius:12px}
#estRes{position:relative;z-index:3}

@media(max-width:1150px){
  .est-mapa{grid-template-columns:1fr}
  .est-lado{display:none}
}
@media(max-width:700px){
  .et{grid-template-columns:1fr;gap:12px}
  .et-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"n b i" "n p i";gap:2px 14px;align-items:center;padding:15px 16px}
  .et-n{grid-area:n;font-size:26px}
  .et-cab b{grid-area:b;margin:0;align-self:end}
  .et-cab p{grid-area:p;align-self:start}
  .et-ico{grid-area:i;position:static}
  .et-cards{grid-template-columns:1fr}
  .est-tarj.ancha{grid-template-columns:1fr}
  .idx-cab h2{font-size:23px}
}

/* ---------- el índice del Catecismo ---------- */
.cic-bloque{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;
  padding:20px 22px 24px;margin:0 0 18px}
.cic-bloque>header{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.cic-bloque>header>i{display:grid;place-items:center;color:var(--c)}
.cic-bloque>header svg{width:22px;height:22px}
.cic-bloque h3{margin:0;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.13em;color:var(--c);line-height:1.35}
.cic-sub{font-weight:600;opacity:.85}
.cic-rango{margin-left:auto;font-family:var(--sans);font-size:12.5px;color:var(--c);
  opacity:.75;white-space:nowrap}
.cic-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.cic-t{position:relative;display:flex;gap:12px;align-items:flex-start;border-radius:12px;
  padding:14px 32px 14px 14px;text-decoration:none;color:var(--ink);transition:.14s;
  background:color-mix(in srgb,var(--c) 6%,var(--blanco));
  border:1px solid color-mix(in srgb,var(--c) 14%,var(--linea))}
.cic-t:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 11%,var(--blanco))}
.cic-n{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  background:var(--blanco);border:1px solid color-mix(in srgb,var(--c) 30%,var(--linea));
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--c)}
.cic-ic{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:8px;
  background:color-mix(in srgb,var(--c) 16%,var(--blanco));color:var(--c)}
.cic-ic svg{width:16px;height:16px}
.cic-et{display:block;margin-bottom:2px;font-family:var(--sans);font-size:11.5px;color:var(--c)}
.cic-t b{display:block;font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.35}
.cic-t em{display:block;margin-top:5px;font-family:var(--sans);font-style:normal;
  font-size:12px;color:var(--gris)}
.cic-t small{display:block;margin-top:2px;font-family:var(--sans);font-size:11.5px;color:var(--gris)}
.cic-ch{position:absolute;right:12px;bottom:11px;color:var(--gris);font-size:19px;line-height:1}
.cic-mas{margin-top:12px}
.cic-mas>summary{list-style:none;cursor:pointer;text-align:center;padding:12px;border-radius:11px;
  background:color-mix(in srgb,var(--c) 7%,var(--blanco));font-family:var(--sans);
  font-size:13.5px;color:var(--ink)}
.cic-mas>summary::-webkit-details-marker{display:none}
.cic-mas>summary::after{content:" ⌄";color:var(--c)}
.cic-mas[open]>summary::after{content:" ⌃"}
.cic-mas>div{margin-top:12px}
.cic-legal{margin:18px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--gris);line-height:1.6}
/* las citas de los índices no llevan la barra ni la caja del blockquote general */
.idx-cita blockquote,.idx-pie blockquote{background:none;border:0;padding:0;box-shadow:none;
  quotes:none;border-radius:0}
.idx-cita blockquote::before,.idx-cita blockquote::after{position:static;font-size:inherit;
  color:inherit;opacity:1;line-height:inherit}
.idx-cab.solo{justify-content:flex-end;margin-bottom:18px}

/* ============================================================
   CAPA 15 · Mi avance
   ============================================================ */
.av-vista .idx-lado-cab h3{font-size:19px}
.av-hero{position:relative;overflow:hidden;border-radius:18px;padding:38px 34px 42px;
  margin:0 0 20px;color:#fff;
  background:linear-gradient(112deg,#e9a13b 0%,#e07a1f 38%,#c1591b 100%)}
.av-hero::after{content:"";position:absolute;inset:0;opacity:.42;pointer-events:none;
  background:url("entrada-emaus.webp") center/cover no-repeat;mix-blend-mode:soft-light}
.av-hero h1{position:relative;z-index:1;font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,4.4vw,46px);letter-spacing:-.02em;line-height:1.05;margin:0 0 12px}
.av-hero p{position:relative;z-index:1;font-family:var(--sans);font-size:15px;
  line-height:1.6;color:rgba(255,255,255,.9);max-width:44ch;margin:0}

.av-cols{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:start}
.av-centro{min-width:0}

.av-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:16px;
  padding:18px 20px;margin:0 0 20px}
.av-cifra{display:flex;align-items:center;gap:13px;padding:4px 8px}
.av-cifra+.av-cifra{border-left:1px solid var(--linea)}
.av-cifra>i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;flex:0 0 44px;
  background:color-mix(in srgb,var(--c,#c8791f) 13%,var(--blanco));color:var(--c,#c8791f)}
.av-cifra>i svg{width:22px;height:22px}
.av-cifra b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1}
.av-cifra span{display:block;font-family:var(--sans);font-size:11.5px;color:var(--gris);
  line-height:1.35;margin-top:2px}
.av-aro{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  flex:0 0 44px;background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--linea) 0)}
.av-aro::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--blanco)}
.av-aro b{position:relative;z-index:1;font-family:var(--sans);font-size:10.5px;font-weight:700;
  color:var(--c)}

.av-tabla{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;
  padding:18px 20px 12px;margin:0 0 18px}
.av-tabla>header{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.av-tabla h3{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--serif);
  font-weight:400;font-size:19px}
.av-tabla h3 svg{width:20px;height:20px;color:var(--c)}
.av-cuenta{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--gris)}
.av-cab,.av-fila{display:grid;grid-template-columns:5px minmax(0,2.1fr) 74px minmax(120px,1.4fr) 26px 18px;
  gap:12px;align-items:center}
.av-cab{padding:0 4px 8px;border-bottom:1px solid var(--linea);
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.av-cab>span:first-child{grid-column:1/3}
.av-fila{padding:11px 4px;border-bottom:1px solid var(--linea);text-decoration:none;
  color:var(--ink);transition:.12s}
.av-fila:hover{background:var(--soft)}
.av-marca{width:5px;height:26px;border-radius:99px;background:var(--c)}
.av-libro b{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--c);
  letter-spacing:.04em}
.av-libro{font-family:var(--sans);font-size:13.5px;min-width:0}
.av-libro em{display:block;font-style:normal;font-size:12.5px;color:var(--gris);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-anio{font-family:var(--sans);font-size:12.5px;color:var(--gris)}
.av-prog{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:12px;
  color:var(--gris)}
.av-prog>i{font-style:normal;min-width:34px;flex:0 0 auto}
.av-prog .barra-fina{flex:1;height:6px;border-radius:99px;background:var(--linea);overflow:hidden}
.av-prog .barra-fina i{display:block;height:100%;background:var(--c);border-radius:99px}
.av-prog u{text-decoration:none;min-width:32px;text-align:right}
.av-estado{text-align:center;font-size:13px;color:var(--gris)}
.av-ch{color:var(--gris);font-size:17px;line-height:1}

.av-consejo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;
  border-radius:16px;background:var(--soft)}
.av-consejo>i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  flex:0 0 42px;background:var(--blanco);color:var(--c)}
.av-consejo svg{width:21px;height:21px}
.av-consejo b{display:block;font-family:var(--sans);font-size:14px;font-weight:600}
.av-consejo p{margin:2px 0 0;font-family:var(--serif);font-size:14.5px;color:var(--gris)}
.av-consejo .btn{margin-left:auto}

.av-lado{display:flex;flex-direction:column;gap:12px}
.av-tarj{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:18px 18px 20px}
.av-tarj h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-family:var(--sans);
  font-size:12.5px;font-weight:600;color:var(--ink)}
.av-tarj h4 svg{width:17px;height:17px;color:var(--c)}
.av-animo{background:linear-gradient(140deg,#fdf1e2,#f7e3cd);border-color:#f0dcc4;text-align:center}
body.oscuro .av-animo{background:linear-gradient(140deg,#2a2018,#241a12);border-color:#3a2c20}
.av-animo>i{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.7);color:#c1591b;margin-bottom:10px}
body.oscuro .av-animo>i{background:rgba(255,255,255,.1)}
.av-animo svg{width:23px;height:23px}
.av-animo b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;margin-bottom:5px}
.av-animo p{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--gris)}
.av-racha-n{margin:0 0 12px;font-family:var(--serif);font-weight:400;font-size:26px;color:var(--c)}
.av-semana{display:flex;gap:5px;margin:0 0 10px}
.av-dia{flex:1;display:grid;place-items:center;height:26px;border-radius:8px;
  background:var(--soft);font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--gris)}
.av-dia.on{background:var(--c);color:#fff}
.av-tarj small{font-family:var(--sans);font-size:11px;color:var(--gris);line-height:1.45;display:block}
.av-sig-l{display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:5px}
.av-sig b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25;
  margin-bottom:14px}
.av-sig .btn{width:100%;justify-content:center;font-size:13.5px;padding:11px 14px}
.av-acc{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:10px 0;border-bottom:1px solid var(--linea);text-decoration:none;text-align:left;
  font-family:var(--sans);font-size:13px;color:var(--ink)}
.av-acc:last-child{border-bottom:0}
.av-acc:hover{color:var(--c)}
.av-acc span{color:var(--gris)}
.av-anios{margin-top:18px}
.av-anios .idx-grupo{margin-bottom:8px}
.av-chips{display:flex;flex-wrap:wrap;gap:6px}
.av-chip{font-family:var(--sans);font-size:12px;color:var(--ink);background:var(--soft);
  border-radius:99px;padding:6px 12px;border:1px solid transparent}
.av-chip:hover{border-color:var(--c)}
.av-chip.on{background:var(--c);color:#fff}

@media(max-width:1250px){
  .av-cifras{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .av-cifra:nth-child(odd){border-left:0}
}
@media(max-width:1150px){
  .av-cols{grid-template-columns:1fr}
  .av-lado{flex-direction:row;flex-wrap:wrap}
  .av-lado>*{flex:1 1 240px}
}
@media(max-width:1080px){
  .av-anios{grid-column:1/-1;margin-top:14px}
}
@media(max-width:700px){
  .av-hero{padding:28px 22px 30px}
  .av-cifra+.av-cifra{border-left:0}
  .av-cab{display:none}
  .av-fila{grid-template-columns:5px minmax(0,1fr) 16px;
    grid-template-areas:"m l c" "m a c" "m p c";gap:4px 10px}
  .av-marca{grid-area:m;height:100%;min-height:26px}
  .av-libro{grid-area:l}
  .av-anio{grid-area:a;font-size:11.5px}
  .av-prog{grid-area:p}
  .av-ch{grid-area:c;align-self:center}
  .av-estado{display:none}
  .av-prog>i{min-width:30px}
  .av-prog u{min-width:28px}
  .av-consejo .btn{margin-left:0;width:100%}
}
/* en el teléfono, «Mi avance» enseña primero el avance y deja los filtros debajo */
@media(max-width:1080px){
  .av-vista .idx-lado{order:2;margin-top:18px}
  .av-vista .idx-main{order:1}
}

/* ============================================================
   EL MENÚ DEL CATECISMO Y DE LA BIBLIA
   ------------------------------------------------------------
   Tres columnas: a la izquierda la obra y sus partes, en medio la
   portada y los bloques, a la derecha el progreso y los accesos.
   Las estampas (arte.js) se colorean solas a partir del --c de
   cada parte, por eso aquí no hay ni un color escrito a mano
   dentro de los dibujos.
   ============================================================ */

.vista-menu{max-width:1520px}
.vista-menu .pest-b{margin-bottom:22px}

.mn{
  /* El menú arranca siempre del color de la casa; cada bloque pone luego
     el suyo. Hace falta decirlo aquí porque .biblia-vista deja --c en la
     tinta, y sin esto los botones del menú salían negros. */
  --c:var(--naranja);
  display:grid;
  grid-template-columns:252px minmax(0,1fr) 300px;
  gap:20px;
  align-items:start;
}
.mn-lado,.mn-der{display:flex;flex-direction:column;gap:16px;position:sticky;top:84px}
.mn-centro{min-width:0;display:flex;flex-direction:column;gap:26px}

/* ---------- las estampas ---------- */
.arte{
  --a1:color-mix(in srgb,var(--c) 66%,#241f1a);
  --a2:var(--c);
  --a3:color-mix(in srgb,var(--c) 36%,#fff);
  --a4:color-mix(in srgb,var(--c) 15%,#fff);
  --a5:color-mix(in srgb,var(--c) 7%,#fff);
  --aw:#e2a03f;
  display:block;overflow:hidden;border-radius:10px;line-height:0;
  background:var(--a5);
}
body.oscuro .arte{
  --a1:color-mix(in srgb,var(--c) 60%,#fff);
  --a2:color-mix(in srgb,var(--c) 82%,#fff);
  --a3:color-mix(in srgb,var(--c) 52%,#15120e);
  --a4:color-mix(in srgb,var(--c) 26%,#15120e);
  --a5:color-mix(in srgb,var(--c) 13%,#15120e);
  --aw:#d99a45;
}
.arte svg{display:block;width:100%;height:100%}
.arte .f1{fill:var(--a1)}
.arte .f2{fill:var(--a2)}
.arte .f3{fill:var(--a3)}
.arte .f4{fill:var(--a4)}
.arte .f5{fill:var(--a5)}
.arte .fw{fill:var(--aw)}
.arte .s1{stroke:var(--a1);fill:none;stroke-width:5;stroke-linecap:round}
.arte .s2{stroke:var(--a2);fill:none;stroke-width:6;stroke-linecap:round}
.arte .s3{stroke:var(--a5);fill:none;stroke-width:3.4;stroke-linecap:round}
.arte .s4{stroke:var(--a3);fill:none;stroke-width:5;stroke-linecap:round}
/* suelta: sin marco, para que flote dentro de una caja de cita */
.arte.arte-suelta{background:none;border-radius:0}
.arte.arte-ancha{background:none}

/* ---------- columna izquierda ---------- */
.mn-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:18px}

.mn-obra-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mn-med{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(150deg,var(--naranja),var(--c));color:#fff}
.mn-med svg{width:20px;height:20px}
.mn-vuelo{color:var(--gris);opacity:.55}
.mn-vuelo svg{width:18px;height:18px}
.mn-obra h3{margin:0 0 6px;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2}
.mn-obra p{margin:0 0 16px;font-size:12.5px;line-height:1.5;color:var(--gris)}
.mn-obra-pct{display:flex;align-items:baseline;gap:6px;font-size:11.5px;color:var(--gris)}
.mn-obra-pct b{font-size:15px;color:var(--ink);font-weight:600}
.mn-obra-pct em{margin-left:auto;font-style:normal;font-size:11px;white-space:nowrap}
.mn-obra-barra,.mn-c-barra,.mn-f-barra{display:block;height:4px;border-radius:99px;
  background:var(--linea);margin-top:7px;overflow:hidden}
.mn-obra-barra i,.mn-c-barra i,.mn-f-barra i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--ambar),var(--c))}

.mn-nav{display:flex;flex-direction:column;gap:2px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:16px;padding:8px}
.mn-nav-i{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;
  text-decoration:none;color:var(--ink);transition:background .16s}
.mn-nav-i i{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:8px;
  background:color-mix(in srgb,var(--c) 13%,var(--blanco));color:var(--c)}
.mn-nav-i i svg{width:16px;height:16px}
.mn-nav-i i.t0{background:color-mix(in srgb,var(--naranja) 15%,var(--blanco));color:var(--naranja)}
.mn-nav-i b{display:block;font-size:13.5px;font-weight:500;line-height:1.25}
.mn-nav-i em{display:block;font-style:normal;font-size:11px;color:var(--gris);margin-top:1px}
.mn-nav-i:hover{background:var(--papel)}
.mn-nav-i.on{background:color-mix(in srgb,var(--naranja) 11%,var(--blanco))}
.mn-nav-i.on b{color:var(--c);font-weight:600}

.mn-cita{background:var(--soft);border-color:transparent;position:relative;padding:18px 18px 16px}
.mn-cita .arte{--a5:var(--soft);--c:var(--naranja);
  position:absolute;right:6px;bottom:0;width:74px;height:74px;opacity:.5}
.mn-cita blockquote,.mn-cita2 blockquote{background:none;border:0;padding:0;box-shadow:none}
.mn-cita blockquote::before,.mn-cita2 blockquote::before{content:"“"}
.mn-cita blockquote::after,.mn-cita2 blockquote::after{content:"”"}
.mn-cita blockquote{margin:0;font-family:var(--serif);font-size:14.5px;font-style:italic;
  line-height:1.5;max-width:80%}
.mn-cita cite{display:block;margin-top:10px;font-style:normal;font-size:11.5px}
.mn-cita cite a{color:var(--c);text-decoration:none}
.mn-cita cite a:hover{text-decoration:underline}

.mn-invita{text-align:left;overflow:hidden}
.mn-invita h4{margin:0 0 4px;font-size:14px;font-weight:600}
.mn-invita p{margin:0;font-size:12.5px;line-height:1.5;color:var(--gris)}
.mn-invita .arte{--c:#c1591b;margin:12px -18px 14px;border-radius:0;height:104px}
.mn-invita .btn{width:100%;justify-content:center;padding:10px 14px;font-size:13px}

/* ---------- la portada ---------- */
.mn-hero{position:relative;border-radius:18px;overflow:hidden;min-height:342px;
  display:flex;align-items:center;isolation:isolate}
.mn-hero-foto{position:absolute;inset:0;z-index:0;
  background-color:#161009;
  background-image:url("cic-portada.webp"),
    radial-gradient(120% 150% at 74% 45%,#8a5320 0%,#33200f 52%,#140e08 100%);
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat}
.mn-hero-velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(12,9,6,.9) 0%,rgba(12,9,6,.72) 34%,
    rgba(12,9,6,.24) 64%,rgba(12,9,6,0) 92%)}
.mn-hero-txt{position:relative;z-index:2;padding:38px 40px;max-width:560px;color:#fff}
.mn-hero-raya{display:block;width:44px;height:3px;border-radius:99px;
  background:var(--naranja);margin-bottom:20px}
.mn-hero h1{margin:0;font-family:var(--serif);font-weight:500;font-size:38px;line-height:1.16;
  letter-spacing:-.01em;color:#fff}
.mn-hero h1 em{font-style:normal;color:var(--ambar)}
.mn-hero p{margin:16px 0 0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
.mn-hero-pie{display:flex;align-items:center;gap:12px;margin-top:26px}
.mn-hero .btn{background:var(--naranja);border-color:transparent;color:#fff;
  padding:13px 24px;border-radius:99px;font-size:14.5px;font-weight:500}
.mn-hero .btn:hover{background:var(--c)}
.mn-hero-mas{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.32);color:#fff;text-decoration:none;transition:.16s}
.mn-hero-mas svg{width:20px;height:20px}
.mn-hero-mas:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}

/* ---------- los bloques por parte ---------- */
.mn-bl{background:var(--blanco);border:1px solid var(--linea);border-radius:18px;padding:22px}
.mn-bl-cab{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.mn-bl-cab h3{margin:0;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.1em;color:var(--c)}
.mn-bl-cab h3 span{font-weight:500;opacity:.8}
.mn-bl-cab p{margin:3px 0 0;font-size:12.5px;color:var(--gris)}
.mn-bl-rango{margin-left:auto;flex-shrink:0;font-size:12.5px;color:var(--c);
  text-decoration:none;font-family:ui-monospace,Menlo,monospace;padding-top:2px}
.mn-bl-rango:hover{text-decoration:underline}

/* la tira del Prólogo, que se desliza a lo ancho */
.mn-tira{display:flex;gap:12px;overflow-x:auto;padding:0 26px 6px 0;scroll-snap-type:x proximity;
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.mn-tira::-webkit-scrollbar{height:6px}
.mn-tira::-webkit-scrollbar-thumb{background:var(--linea);border-radius:99px}
.mn-f{flex:0 0 152px;scroll-snap-align:start;display:flex;flex-direction:column;
  border:1px solid var(--linea);border-radius:14px;padding:13px;text-decoration:none;
  color:var(--ink);background:var(--blanco);transition:.16s}
.mn-f:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 6%,var(--blanco));
  transform:translateY(-2px)}
.mn-f-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mn-f-cab i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:color-mix(in srgb,var(--c) 12%,var(--blanco));color:var(--c)}
.mn-f-cab i svg{width:18px;height:18px}
.mn-f-cab em{font-style:normal;font-size:11.5px;color:var(--gris);
  font-family:ui-monospace,Menlo,monospace}
.mn-f b{font-size:12.5px;font-weight:500;line-height:1.35;min-height:68px}
.mn-f-n{margin-top:8px;font-size:11.5px;color:var(--gris);
  font-family:ui-monospace,Menlo,monospace}
.mn-f-barra{margin-top:8px;height:3px}
.mn-f.leida .mn-f-cab i{background:var(--c);color:#fff}

/* las tarjetas de las cuatro partes */
.mn-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.mn-c{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:13px;
  align-items:center;padding:11px;border:1px solid var(--linea);border-radius:14px;
  text-decoration:none;color:var(--ink);background:var(--blanco);transition:.16s;overflow:hidden}
.mn-c:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 5%,var(--blanco));
  transform:translateY(-2px);box-shadow:0 12px 26px -20px rgba(28,26,22,.6)}
.mn-c .arte{width:84px;height:76px}
.mn-c-txt{min-width:0;padding-right:16px}
.mn-c-et{display:block;font-size:11px;color:var(--c);margin-bottom:3px}
.mn-c b{display:block;font-size:14px;font-weight:500;line-height:1.32}
.mn-c-pie{display:flex;align-items:baseline;gap:8px;margin-top:7px;flex-wrap:wrap}
.mn-c-pie em{font-style:normal;font-size:11.5px;color:var(--gris);
  font-family:ui-monospace,Menlo,monospace}
.mn-c-pie small{font-size:11px;color:var(--gris)}
.mn-c-barra{margin-top:7px;height:3px}
.mn-c-ch{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  color:var(--linea);font-size:20px;line-height:1}
.mn-c:hover .mn-c-ch{color:var(--c)}
.mn-c.leida{border-color:color-mix(in srgb,var(--c) 40%,var(--linea))}

/* «ver todos»: la tarjeta ancha que despliega el resto */
.mn-bl .mn-mas{grid-column:1/-1;margin:0}
.mn-bl .mn-mas summary{display:flex;align-items:center;gap:14px;cursor:pointer;
  list-style:none;padding:11px 18px 11px 20px;border-radius:14px;overflow:hidden;
  background:color-mix(in srgb,var(--c) 7%,var(--blanco));
  border:1px solid color-mix(in srgb,var(--c) 16%,var(--linea));transition:.16s}
.mn-bl .mn-mas summary::-webkit-details-marker{display:none}
.mn-bl .mn-mas summary:hover{background:color-mix(in srgb,var(--c) 12%,var(--blanco))}
.mn-bl .mn-mas summary span{display:block}
.mn-bl .mn-mas summary b{display:block;font-size:14px;font-weight:500;color:var(--c)}
.mn-bl .mn-mas summary em{display:block;font-style:normal;font-size:11.5px;
  color:var(--gris);margin-top:2px}
.mn-bl .mn-mas summary .arte{margin-left:auto;width:82px;height:56px;flex-shrink:0}
.mn-bl .mn-mas[open] summary b::after{content:" ▴"}
.mn-rej-mas{margin-top:12px}

.mn-centro .cic-legal{margin:0;text-align:center}

/* ---------- columna derecha ---------- */
.mn-prog header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.mn-prog h4,.mn-accesos h4{margin:0;font-size:14px;font-weight:600}
.mn-prog header a{font-size:11.5px;color:var(--c);text-decoration:none}
.mn-prog-fila{display:flex;align-items:center;gap:14px}
.mn-rosca{width:96px;height:96px;flex-shrink:0}
.mn-rosca .fondo{fill:none;stroke:var(--linea);stroke-width:7}
.mn-rosca .arco{fill:none;stroke:var(--naranja);stroke-width:7;stroke-linecap:round;
  transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.3,1)}
.mn-rosca .n{font-family:var(--sans);font-size:17px;font-weight:600;fill:var(--ink);
  text-anchor:middle}
.mn-rosca .l{font-family:var(--sans);font-size:8px;fill:var(--gris);text-anchor:middle}
.mn-prog-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.mn-prog-lista li{display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--gris)}
.mn-prog-lista i{width:8px;height:8px;border-radius:50%;flex-shrink:0;align-self:center}
.mn-prog-lista .p1{background:var(--naranja)}
.mn-prog-lista .p2{background:#e0607a}
.mn-prog-lista .p3{background:#3f9f78}
.mn-prog-lista b{font-size:14px;color:var(--ink);font-weight:600}
.mn-prog-lista span{line-height:1.3}

.mn-racha{display:flex;align-items:center;gap:5px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--linea)}
.mn-racha>span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.mn-racha em{font-style:normal;font-size:10px;color:var(--gris)}
.mn-racha i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--linea);font-size:11px;font-style:normal;color:transparent}
.mn-racha .on i{background:var(--naranja);border-color:var(--naranja);color:#fff}
.mn-racha .fut{opacity:.45}
.mn-llama{flex:0 0 auto!important;display:grid!important;place-items:center;width:30px;height:30px;
  border-radius:50%;background:color-mix(in srgb,var(--naranja) 15%,var(--blanco));
  color:var(--naranja);margin-left:4px}
.mn-llama svg{width:17px;height:17px}

.mn-accesos a{display:flex;align-items:center;gap:11px;padding:10px 6px;text-decoration:none;
  color:var(--ink);font-size:13px;border-bottom:1px solid var(--linea);transition:.16s}
.mn-accesos a:last-child{border-bottom:0}
.mn-accesos a svg{width:17px;height:17px;color:var(--gris);flex-shrink:0}
.mn-accesos a span{flex:1;min-width:0}
.mn-accesos a em{font-style:normal;color:var(--linea);font-size:17px}
.mn-accesos a:hover{color:var(--c);padding-left:10px}
.mn-accesos a:hover svg,.mn-accesos a:hover em{color:var(--c)}
.mn-accesos h4{margin-bottom:4px}

.mn-cita2{background:var(--soft);border-color:transparent;position:relative;overflow:hidden}
.mn-cita2 .arte{--a5:var(--soft);--c:var(--ambar);
  position:absolute;right:-14px;bottom:-14px;width:112px;height:112px;opacity:.45}
.mn-cita2 blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:15px;
  line-height:1.5;max-width:78%;position:relative;z-index:1}
.mn-cita2 cite{display:block;margin-top:10px;font-style:normal;font-size:11.5px;
  color:var(--gris);position:relative;z-index:1}

/* ---------- pantallas estrechas ---------- */
@media (max-width:1320px){
  .mn{grid-template-columns:236px minmax(0,1fr)}
  .mn-der{grid-column:1/-1;position:static;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
}
@media (max-width:900px){
  /* En el móvil manda la portada: primero lo que se lee, luego el
     progreso, y al final el índice lateral y la comunidad. */
  /* align-items:start es lo que quiere el escritorio, pero en una columna
     hace que cada bloque se ensanche a su contenido y la tira del prólogo
     empujaba la página entera a lo ancho. Aquí se estira. */
  .mn{display:flex;flex-direction:column;gap:16px;align-items:stretch}
  .mn-centro,.mn-lado,.mn-der{width:100%;min-width:0}
  .mn-centro{order:1}
  .mn-der{order:2;display:flex;flex-direction:column;position:static}
  .mn-lado{order:3;position:static}
  .mn-hero{min-height:0}
  .mn-hero-txt{padding:30px 26px;max-width:none}
  .mn-hero h1{font-size:29px}
  .mn-hero-velo{background:linear-gradient(180deg,rgba(12,9,6,.62) 0%,rgba(12,9,6,.86) 70%,
    rgba(12,9,6,.92) 100%)}
  .mn-rej{grid-template-columns:minmax(0,1fr)}
  .mn-bl,.mn-caja{padding:16px}
}

/* ------------------------------------------------------------
   Lo propio del menú de la Biblia
   ------------------------------------------------------------
   Reutiliza todo lo anterior (portada, cajas, tira, progreso) y
   sólo añade lo que el Catecismo no tiene: los grupos del índice
   lateral, las secciones de la biblioteca con sus libros en
   pastillas, los temas y el material de estudio.
   ------------------------------------------------------------ */

.bib-hero .mn-hero-foto{
  background-color:#0f1218;
  background-image:url("biblia-portada.webp"),
    radial-gradient(130% 155% at 68% 42%,#b8802f 0%,#4a3a52 46%,#111219 100%);
}

/* el rótulo de testamento dentro del índice lateral */
.mn-nav-g{display:block;padding:14px 10px 6px;font-family:var(--sans);font-size:10px;
  font-weight:600;letter-spacing:.12em;color:var(--gris)}
.mn-nav-i:first-child+.mn-nav-g{padding-top:8px}

/* una sección de la biblioteca */
.mn-secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;
  align-items:start}
.mn-sec{background:var(--blanco);border:1px solid var(--linea);border-radius:15px;padding:12px}
.mn-sec>header{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:12px;
  align-items:center;margin-bottom:12px}
.mn-sec .arte{width:78px;height:70px}
.mn-sec h4{margin:0;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--c)}
.mn-sec p{margin:3px 0 0;font-size:11.5px;line-height:1.42;color:var(--gris)}
.mn-sec>header em{align-self:flex-start;font-style:normal;font-size:10.5px;color:var(--gris);
  font-family:ui-monospace,Menlo,monospace;white-space:nowrap;padding-top:3px}

/* los libros, en pastillas */
.mn-libs{display:flex;flex-wrap:wrap;gap:6px}
.mn-lib,.mn-chips a{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;
  border-radius:99px;border:1px solid var(--linea);background:var(--papel);
  font-family:var(--sans);font-size:12.5px;color:var(--ink);text-decoration:none;transition:.15s}
.mn-lib i,.mn-chips a i{font-style:normal;font-size:10px;color:var(--gris);
  font-family:ui-monospace,Menlo,monospace}
.mn-lib:hover,.mn-chips a:hover{border-color:var(--c);color:var(--c);
  background:color-mix(in srgb,var(--c) 8%,var(--blanco))}
.mn-lib:hover i,.mn-chips a:hover i{color:var(--c)}
.mn-lib.empezado{border-color:color-mix(in srgb,var(--c) 45%,var(--linea));
  background:color-mix(in srgb,var(--c) 8%,var(--blanco))}
.mn-lib.entero{background:var(--c);border-color:var(--c);color:#fff}
.mn-lib.entero i{color:rgba(255,255,255,.72)}
.mn-lib.entero:hover{background:var(--c);color:#fff}

/* los cincuenta temas */
.mn-chips{display:flex;flex-wrap:wrap;gap:7px}

/* el material de estudio */
.mn-est{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:10px}
.mn-est a{display:flex;gap:11px;align-items:flex-start;padding:11px;border-radius:13px;
  border:1px solid var(--linea);background:var(--blanco);text-decoration:none;
  color:var(--ink);transition:.16s}
.mn-est a>i{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  background:color-mix(in srgb,var(--c) 13%,var(--blanco));color:var(--c)}
.mn-est a>i svg{width:17px;height:17px}
.mn-est a b{display:block;font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.3}
.mn-est a em{display:block;margin-top:3px;font-style:normal;font-size:11px;line-height:1.42;
  color:var(--gris)}
.mn-est a:hover{border-color:var(--c);transform:translateY(-2px);
  box-shadow:0 12px 26px -20px rgba(28,26,22,.6)}

/* la caja de «¿por dónde empiezo?» lleva enlace, no botón */
.mn-invita .btn{width:100%;justify-content:center}

/* en oscuro las estampas de las citas pesan más: se bajan */
body.oscuro .mn-cita .arte,body.oscuro .mn-cita2 .arte{opacity:.3}

@media (max-width:900px){
  .mn-secs{grid-template-columns:minmax(0,1fr)}
  .mn-est{grid-template-columns:minmax(0,1fr)}
  .mn-sec>header{grid-template-columns:64px minmax(0,1fr)}
  .mn-sec .arte{width:64px;height:60px}
  .mn-sec>header em{display:none}
}

/* ------------------------------------------------------------
   Los años de la formación, con su estampa
   ------------------------------------------------------------
   Mismo lenguaje que el Catecismo y la Biblia: cada libro lleva
   su tapa dibujada, teñida con el color del año, y la cabecera
   del año un medallón con su sello. La portada de Inicio no se
   toca: esto empieza por debajo del carrusel.
   ------------------------------------------------------------ */

.anio-cab{display:flex;align-items:flex-start;gap:16px}
.anio-cab>div{flex:1;min-width:0}
.anio-med{display:grid;place-items:center;width:50px;height:50px;flex:0 0 50px;
  border-radius:15px;margin-top:2px;color:var(--c);
  background:color-mix(in srgb,var(--c) 13%,var(--blanco));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 18%,transparent)}
.anio-med svg{width:24px;height:24px}

/* la tapa dibujada */
.libro{padding:0;overflow:hidden;display:flex;flex-direction:column}
.libro>.arte.arte-tapa{display:block;width:100%;height:118px;border-radius:0;flex:0 0 118px}
.libro-txt{display:block;padding:18px 20px 22px;flex:1}
.libro .tomo{display:block}
.libro h3{margin:8px 0 0}
.libro-pie{display:block;margin-top:16px}
.libro .barra-fina{display:block}
.libro .flecha{bottom:18px}

/* con el libro cerrado la tapa se apaga, pero se ve */
.libro.cerrado>.arte{opacity:.75}
.libro.cerrado:hover>.arte{opacity:1}

@media(max-width:760px){
  .libro>.arte.arte-tapa{height:98px;flex-basis:98px}
  .anio-med{width:42px;height:42px;flex-basis:42px;border-radius:12px}
  .anio-med svg{width:20px;height:20px}
}

/* ============================================================
   LAS PANTALLAS DE DENTRO
   ------------------------------------------------------------
   Un tema del Catecismo, un libro de la Biblia, un apartado de
   estudio. Todas entran por la misma cabecera: estampa, migas,
   titular, dos datos y las acciones. Debajo, el contenido de
   cada una, en cajas del mismo lenguaje que los menús.
   ============================================================ */

.dx{max-width:1180px;margin:0 auto}
.dx-ancha{max-width:1420px}

/* ---------- la cabecera ---------- */
.dx-cab{
  --c:var(--naranja);
  display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:22px;align-items:center;
  background:color-mix(in srgb,var(--c) 6%,var(--blanco));
  border:1px solid color-mix(in srgb,var(--c) 14%,var(--linea));
  border-radius:20px;padding:20px 24px;margin-bottom:26px;overflow:hidden}
.dx-cab>.arte{width:132px;height:120px;border-radius:14px;flex-shrink:0}
.dx-cab-txt{min-width:0}
.dx-volver{display:inline-block;margin-bottom:9px;font-family:var(--sans);font-size:12.5px;
  color:var(--gris);text-decoration:none}
.dx-volver:hover{color:var(--c)}
.dx-et{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:5px}
.dx-cab h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,34px);
  line-height:1.14;letter-spacing:-.01em}
.dx-cab h2 small{font-family:var(--sans);font-size:15px;color:var(--gris);font-weight:400;
  letter-spacing:0;margin-left:8px}
.dx-cab p{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--gris);max-width:66ch}
.dx-datos{display:flex;flex-wrap:wrap;gap:18px;margin-top:13px}
.dx-datos span{font-family:var(--sans);font-size:11.5px;color:var(--gris)}
.dx-datos b{display:block;font-family:var(--sans);font-size:19px;font-weight:600;
  color:var(--ink);line-height:1.1;margin-bottom:1px}
.dx-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.dx-acc .btn{padding:10px 18px;font-size:13.5px}
.dx-lado{flex-shrink:0}

/* ---------- filtro y letras ---------- */
.dx-barra{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.dx-buscar{position:relative;flex:1;min-width:230px;max-width:420px}
.dx-buscar svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--gris);pointer-events:none}
.dx-buscar input{width:100%;padding:12px 16px 12px 40px;border-radius:99px;
  border:1px solid var(--linea);background:var(--blanco);color:var(--ink);
  font-family:var(--sans);font-size:14px}
.dx-buscar input:focus{outline:0;border-color:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 12%,transparent)}
.dx-cuenta{font-family:var(--sans);font-size:12.5px;color:var(--gris);margin-left:auto}

.dx-letras{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:20px}
.dx-letras a{display:grid;place-items:center;min-width:28px;height:28px;padding:0 5px;
  border-radius:8px;font-family:var(--sans);font-size:12px;font-weight:600;
  color:var(--gris);text-decoration:none;transition:.15s}
.dx-letras a:hover{background:color-mix(in srgb,var(--c) 12%,var(--blanco));color:var(--c)}

/* ---------- rejilla de fichas ---------- */
.dx-grupo{margin-bottom:26px;scroll-margin-top:96px}
.dx-grupo>h3{margin:0 0 12px;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.18em;color:var(--c);display:flex;align-items:center;gap:10px}
.dx-grupo>h3::after{content:"";flex:1;height:1px;background:var(--linea)}

.dx-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:11px;
  align-items:start}

/* una ficha desplegable (un tema, con sus entradas dentro) */
.dx-t{background:var(--blanco);border:1px solid var(--linea);border-radius:13px;overflow:hidden}
.dx-t>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:13px 15px;font-family:var(--sans);font-size:13.5px;font-weight:500;transition:.15s}
.dx-t>summary::-webkit-details-marker{display:none}
.dx-t>summary::after{content:"+";margin-left:auto;font-size:16px;color:var(--gris);
  line-height:1;transition:.2s}
.dx-t[open]>summary::after{content:"–";color:var(--c)}
.dx-t>summary em{font-style:normal;font-size:11px;color:var(--gris);
  font-family:ui-monospace,Menlo,monospace}
.dx-t>summary:hover{background:color-mix(in srgb,var(--c) 6%,var(--blanco));color:var(--c)}
.dx-t[open]>summary{border-bottom:1px solid var(--linea);color:var(--c)}
.dx-e{display:flex;gap:10px;justify-content:space-between;align-items:baseline;
  padding:10px 15px;border-bottom:1px solid var(--linea);text-decoration:none;color:var(--ink)}
.dx-e:last-child{border-bottom:0}
.dx-e:hover{background:var(--papel);padding-left:19px}
.dx-e span{font-size:13.5px;line-height:1.45}
.dx-e em{flex-shrink:0;font-style:normal;font-size:11px;color:var(--c);
  font-family:ui-monospace,Menlo,monospace}

/* ---------- estado vacío y sugerencias ---------- */
.dx-vacio{text-align:center;padding:48px 20px;color:var(--gris);font-size:14.5px}
.dx-vacio .arte{width:96px;height:96px;margin:0 auto 18px;opacity:.65}
.dx-sug{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.dx-sug button,.dx-sug a{padding:8px 15px;border-radius:99px;border:1px solid var(--linea);
  background:var(--blanco);font-family:var(--sans);font-size:13px;color:var(--ink);
  cursor:pointer;text-decoration:none;transition:.15s}
.dx-sug button:hover,.dx-sug a:hover{border-color:var(--c);color:var(--c);
  background:color-mix(in srgb,var(--c) 7%,var(--blanco))}

/* ---------- resultados ---------- */
.dx-res{display:grid;gap:9px}
.dx-hit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;
  padding:14px 16px;border:1px solid var(--linea);border-radius:13px;background:var(--blanco);
  text-decoration:none;color:var(--ink);transition:.15s}
.dx-hit:hover{border-color:var(--c);transform:translateX(2px)}
.dx-hit b{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--c)}
.dx-hit span{font-size:14.5px;line-height:1.55;color:var(--gris)}
.dx-hit mark{background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--ink);
  border-radius:3px;padding:0 2px}

@media (max-width:760px){
  .dx-cab{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}
  .dx-cab>.arte{width:100%;height:104px}
  .dx-lado{align-self:flex-start}
  .dx-rej{grid-template-columns:minmax(0,1fr)}
  .dx-cuenta{margin-left:0;width:100%}
}

/* remates de las pantallas de dentro */
.dx-t>summary>span{flex:1;min-width:0}
.dx-buscar-g{max-width:520px;width:100%;flex:1 1 100%}
.dx-buscar-g input{padding:14px 18px 14px 44px;font-size:15px}
.dx-buscar-g svg{left:17px;width:18px;height:18px}
.dx-hit-ruta{display:block;font-family:var(--sans);font-size:11px;font-style:normal;
  color:var(--c);margin-bottom:4px;letter-spacing:.02em}
.dx-fav{gap:8px}
.dx-fav svg{width:16px;height:16px}
.dx-fav.on{background:var(--c);border-color:var(--c);color:#fff}
.dx-fav.on svg{color:#fff}
.dx .cic-lectura,.dx .cuerpo-vista{padding-left:0;padding-right:0;max-width:var(--ancho-lectura)}
.dx .cic-legal{margin-top:30px}
.dx-vacio .arte{--a5:var(--papel)}
.dx-vacio p{margin:0;line-height:1.7}

/* ---------- la ficha de un libro de la Biblia ---------- */
.bib-leyenda{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:11.5px;color:var(--gris)}
.bib-leyenda i{width:14px;height:14px;border-radius:5px;background:var(--c)}

.bib-caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.bib-cap{display:grid;place-items:center;height:52px;border-radius:12px;
  border:1px solid var(--linea);background:var(--blanco);color:var(--ink);
  font-family:var(--sans);font-size:15px;text-decoration:none;transition:.15s}
.bib-cap:hover{border-color:var(--c);color:var(--c);transform:translateY(-2px);
  background:color-mix(in srgb,var(--c) 7%,var(--blanco))}
.bib-cap.leido{background:var(--c);border-color:var(--c);color:#fff;font-weight:500}
.bib-cap.leido:hover{background:var(--c);color:#fff}

/* ---------- los saltos de capítulo, en la cabecera ---------- */
.bib-saltos{display:flex;align-items:center;gap:6px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:99px;padding:5px 8px}
.bib-salto{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--c);text-decoration:none;font-size:17px;line-height:1;transition:.15s}
.bib-salto:hover{background:color-mix(in srgb,var(--c) 12%,var(--blanco))}
.bib-salto.muda{color:var(--linea);pointer-events:none}
.bib-salto-n{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--gris);
  padding:0 4px;white-space:nowrap}

.dx .texto-b,.dx .notas-cap,.dx .paso-b,.dx .citado-aviso{max-width:var(--ancho-lectura)}
.dx .citado-aviso{margin-bottom:18px}

/* ---------- el plan de lectura ---------- */
.dx-etapas{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;
  align-items:start}
.dx-etapa{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:14px}
.dx-etapa>header{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;
  align-items:center;margin-bottom:14px}
.dx-etapa .arte{width:84px;height:78px}
.dx-etapa h4{margin:0;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.2}
.dx-etapa p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--gris)}
.dx-lecturas{display:flex;flex-direction:column;gap:7px}
.dx-lec{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;
  padding:11px 13px;border-radius:11px;border:1px solid var(--linea);background:var(--papel);
  text-decoration:none;color:var(--ink);transition:.15s}
.dx-lec b{font-family:var(--sans);font-size:13.5px;font-weight:500}
.dx-lec i{font-style:normal;font-size:11.5px;color:var(--gris);text-align:right;white-space:nowrap}
.dx-lec-barra{grid-column:1/-1;height:3px;border-radius:99px;background:var(--linea);
  overflow:hidden;margin-top:3px}
.dx-lec-barra em{display:block;height:100%;border-radius:99px;background:var(--c)}
.dx-lec u{grid-column:1/-1;text-decoration:none;font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px;color:var(--gris)}
.dx-lec:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,var(--blanco))}
.dx-lec:hover b{color:var(--c)}
.dx-lec.empezada{border-color:color-mix(in srgb,var(--c) 40%,var(--linea))}
.dx-lec.entera{background:color-mix(in srgb,var(--c) 10%,var(--blanco));
  border-color:color-mix(in srgb,var(--c) 45%,var(--linea))}
.dx-lec.entera b::after{content:" ✓";color:var(--c)}

/* ---------- los temas de la Biblia ---------- */
.dx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.dx-chip{display:inline-flex;align-items:baseline;gap:7px;padding:9px 15px;border-radius:99px;
  border:1px solid var(--linea);background:var(--blanco);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:13.5px;transition:.15s}
.dx-chip i{font-style:normal;font-size:10.5px;color:var(--gris);
  font-family:ui-monospace,Menlo,monospace}
.dx-chip:hover{border-color:var(--c);color:var(--c)}
.dx-chip.on{background:var(--c);border-color:var(--c);color:#fff}
.dx-chip.on i{color:rgba(255,255,255,.72)}
.dx-refs-cab{margin-bottom:16px}
.dx-refs-cab h3{margin:0;font-family:var(--serif);font-weight:400;font-size:24px}
.dx-refs-cab p{margin:5px 0 0;font-size:13px;color:var(--gris)}

/* el medallón de las herramientas de estudio, en vez de la estampa */
.dx-cab-ico{grid-template-columns:auto minmax(0,1fr) auto;gap:18px}
.dx-med{display:grid;place-items:center;width:62px;height:62px;flex-shrink:0;border-radius:18px;
  color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--blanco));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent)}
.dx-med svg{width:28px;height:28px}
.dx-nota{margin:0 0 20px;font-size:15px;line-height:1.65;color:var(--gris);max-width:74ch}
.dx-datos-suelto{margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid var(--linea)}