/* ============================================================
   DEBES CREÉRTELO · CRÉETELO DE VERDAD
   Lo que Dios dice sobre ti
   Hoja de estilos única del curso
   ============================================================ */

:root{
  --tinta:#171a24;
  --tinta-suave:#414a5e;
  --papel:#f8f6f1;
  --papel-2:#ffffff;
  --linea:#e3ded3;
  --acento:#8c2135;
  --acento-2:#1d4f7c;
  --oro:#a9822c;
  --sombra:0 1px 2px rgba(18,20,28,.06), 0 8px 24px rgba(18,20,28,.06);
  --radio:14px;
  --ancho:760px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tinta:#ebe7df;
    --tinta-suave:#a5a093;
    --papel:#13151b;
    --papel-2:#1b1e26;
    --linea:#2c3039;
    --acento:#e08a95;
    --acento-2:#7fb6e2;
    --oro:#e0b45c;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --tinta:#ebe7df;
  --tinta-suave:#a5a093;
  --papel:#13151b;
  --papel-2:#1b1e26;
  --linea:#2c3039;
  --acento:#e08a95;
  --acento-2:#7fb6e2;
  --oro:#e0b45c;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Barra superior ---------- */
.barra{
  position:sticky; top:0; z-index:50;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}
.barra-in{
  max-width:1080px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.marca{
  font-family:var(--serif); font-weight:700; letter-spacing:.01em;
  text-decoration:none; color:var(--tinta); font-size:1.02rem;
}
.marca span{color:var(--acento)}
.barra nav{margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.barra nav a{
  text-decoration:none; color:var(--tinta-suave); font-size:.87rem;
  padding:6px 10px; border-radius:8px;
}
.barra nav a:hover{background:var(--papel-2); color:var(--tinta)}
.btn-tema{
  border:1px solid var(--linea); background:var(--papel-2); color:var(--tinta);
  border-radius:999px; padding:5px 12px; font-size:.8rem; cursor:pointer; font-family:var(--sans);
}

/* ---------- Contenedores ---------- */
.envoltorio{max-width:1080px; margin:0 auto; padding:0 16px 80px}
.lectura{max-width:var(--ancho); margin:0 auto; padding:0 16px 90px}

/* ---------- Portada ---------- */
.portada{
  text-align:center; padding:72px 16px 44px; max-width:820px; margin:0 auto;
}
.kicker{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acento); font-weight:700;
}
.portada h1{
  font-family:var(--serif); font-size:clamp(2.3rem,7vw,4rem); line-height:1.05;
  margin:.35em 0 .25em; letter-spacing:-.02em;
}
.portada h1 em{font-style:normal; color:var(--acento)}
.lema{font-size:1.12rem; color:var(--tinta-suave); max-width:60ch; margin:0 auto}
.cifras{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:28px 0 0;
}
.cifra{
  background:var(--papel-2); border:1px solid var(--linea); border-radius:999px;
  padding:7px 16px; font-size:.84rem; color:var(--tinta-suave);
}
.cifra b{color:var(--tinta)}

/* ---------- Bloques de texto ---------- */
h2{font-family:var(--serif); font-size:1.85rem; line-height:1.2; margin:2.2em 0 .5em; letter-spacing:-.01em}
h3{font-size:1.16rem; margin:1.9em 0 .4em; letter-spacing:.01em}
h4{margin:1.5em 0 .3em; color:var(--acento-2); text-transform:uppercase; letter-spacing:.09em; font-size:.8rem}
p{margin:0 0 1.05em}
a{color:var(--acento)}
ul,ol{margin:0 0 1.15em; padding-left:1.25em}
li{margin:.4em 0}
strong{color:var(--tinta)}
hr{border:none; border-top:1px solid var(--linea); margin:2.6em 0}

.entradilla{
  font-family:var(--serif); font-size:1.24rem; line-height:1.6; color:var(--tinta-suave);
  border-left:3px solid var(--acento); padding-left:18px; margin:0 0 2em;
}

/* ---------- Tarjetas de módulo ---------- */
.rejilla{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  margin-top:26px;
}
.tarjeta{
  display:block; text-decoration:none; color:inherit;
  background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--radio);
  padding:20px 20px 18px; box-shadow:var(--sombra);
  transition:transform .15s ease, border-color .15s ease;
  position:relative; overflow:hidden;
}
.tarjeta:hover{transform:translateY(-3px); border-color:var(--acento)}
.tarjeta .num{
  font-family:var(--serif); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acento); font-weight:700;
}
.tarjeta h3{margin:.35em 0 .35em; font-family:var(--serif); font-size:1.3rem; letter-spacing:-.01em}
.tarjeta p{font-size:.92rem; color:var(--tinta-suave); margin:0 0 14px}
.meta{font-size:.78rem; color:var(--tinta-suave); display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.pastilla{
  background:var(--papel);
  color:var(--acento); border:1px solid var(--linea);
  border-radius:999px; padding:3px 10px; font-weight:600; font-size:.74rem;
}

/* ---------- Lista de lecciones ---------- */
.lecciones{list-style:none; padding:0; margin:22px 0 0; border-top:1px solid var(--linea)}
.lecciones li{margin:0; border-bottom:1px solid var(--linea)}
.lecciones a{
  display:flex; gap:14px; align-items:baseline; padding:15px 6px;
  text-decoration:none; color:inherit;
}
.lecciones a:hover{background:var(--papel-2)}
.lecciones .n{
  font-family:var(--serif); color:var(--acento); font-weight:700; min-width:2.6em; font-size:.95rem;
}
.lecciones .t{flex:1}
.lecciones .t b{display:block; font-weight:600; font-size:1.02rem}
.lecciones .t span{font-size:.88rem; color:var(--tinta-suave)}
.lecciones .estado{font-size:1rem; color:var(--tinta-suave)}
.lecciones li.hecha .estado{color:var(--acento-2)}

/* ---------- Cajas didácticas ---------- */
.caja{
  background:var(--papel-2); border:1px solid var(--linea); border-left:4px solid var(--acento);
  border-radius:10px; padding:18px 20px; margin:1.9em 0; box-shadow:var(--sombra);
}
.caja > :last-child{margin-bottom:0}
.caja .rotulo{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  color:var(--acento); display:block; margin-bottom:.5em;
}
.caja.verde{border-left-color:var(--acento-2)}
.caja.verde .rotulo{color:var(--acento-2)}
.caja.oro{border-left-color:var(--oro)}
.caja.oro .rotulo{color:var(--oro)}
.caja.oscura{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.caja.oscura strong,.caja.oscura b{color:var(--papel)}

.frase{
  font-family:var(--serif); font-size:1.4rem; line-height:1.45; text-align:center;
  margin:2.2em auto; max-width:34ch; color:var(--tinta);
}
.frase small{display:block; font-family:var(--sans); font-size:.78rem; color:var(--tinta-suave); margin-top:.9em; letter-spacing:.08em; text-transform:uppercase}

/* ---------- Citas bíblicas ---------- */
.versiculo{
  font-family:var(--serif); font-size:1.13rem; line-height:1.62;
  border-left:3px solid var(--oro); padding:4px 0 4px 20px;
  margin:1.8em 0; color:var(--tinta);
}
.versiculo p{margin:0 0 .5em}
.versiculo cite,.versiculo .ref{
  display:block; font-family:var(--sans); font-style:normal;
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--oro); font-weight:700; margin-top:.3em;
}
.ref-inline{font-size:.86em; color:var(--tinta-suave); white-space:nowrap}
.caja .versiculo{margin:.9em 0; font-size:1.05rem}

/* ---------- Tablas ---------- */
.tabla-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; margin:1.7em 0; font-size:.93rem}
th,td{border:1px solid var(--linea); padding:10px 12px; text-align:left; vertical-align:top}
th{background:var(--papel-2); font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; color:var(--tinta-suave)}

/* ---------- Ejercicios interactivos ---------- */
.ejercicio{
  background:var(--papel-2); border:1px dashed var(--acento); border-radius:var(--radio);
  padding:22px; margin:2.2em 0;
}
.ejercicio h3{margin-top:0}
.ejercicio textarea, .ejercicio input[type=text]{
  width:100%; background:var(--papel); color:var(--tinta);
  border:1px solid var(--linea); border-radius:9px; padding:11px 13px;
  font-family:var(--sans); font-size:.95rem; line-height:1.6; resize:vertical;
}
.ejercicio label{display:block; font-size:.86rem; color:var(--tinta-suave); margin:14px 0 5px; font-weight:600}
.guardado{font-size:.78rem; color:var(--acento-2); margin-top:10px; min-height:1.2em}

.checklist{list-style:none; padding:0}
.checklist li{display:flex; gap:10px; align-items:flex-start; padding:7px 0}
.checklist input{margin-top:.45em; accent-color:var(--acento); width:17px; height:17px; flex:none}

/* ---------- Botones ---------- */
.boton{
  display:inline-block; background:var(--acento); color:#fff; text-decoration:none;
  padding:12px 24px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:none; cursor:pointer; font-family:var(--sans);
}
.boton:hover{filter:brightness(1.08)}
.boton.fantasma{background:transparent; color:var(--tinta); border:1px solid var(--linea)}

/* ---------- Pie de lección / navegación ---------- */
.migas{font-size:.82rem; color:var(--tinta-suave); margin:30px 0 8px}
.migas a{color:var(--tinta-suave); text-decoration:none}
.migas a:hover{color:var(--acento)}
.titulo-leccion{font-family:var(--serif); font-size:clamp(1.9rem,5.2vw,2.7rem); line-height:1.12; margin:.1em 0 .4em; letter-spacing:-.02em}
.dato-leccion{font-size:.82rem; color:var(--tinta-suave); border-bottom:1px solid var(--linea); padding-bottom:18px; margin-bottom:28px}

.pasos{counter-reset:paso; list-style:none; padding:0}
.pasos > li{
  counter-increment:paso; position:relative; padding-left:48px; margin:0 0 1.3em;
}
.pasos > li::before{
  content:counter(paso); position:absolute; left:0; top:0;
  width:32px; height:32px; border-radius:50%; background:var(--acento); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.9rem;
}

.nav-leccion{
  display:flex; gap:12px; justify-content:space-between; align-items:stretch;
  margin-top:50px; padding-top:26px; border-top:1px solid var(--linea); flex-wrap:wrap;
}
.nav-leccion a{
  flex:1 1 44%; min-width:200px; text-decoration:none; color:inherit;
  border:1px solid var(--linea); border-radius:var(--radio); padding:14px 16px;
  background:var(--papel-2);
}
.nav-leccion a:hover{border-color:var(--acento)}
.nav-leccion .dir{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acento); font-weight:700}
.nav-leccion .tit{font-size:.96rem; margin-top:3px; display:block}
.nav-leccion a.der{text-align:right}

.marcar{
  display:flex; align-items:center; gap:10px; margin:36px 0 0;
  background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--radio); padding:14px 18px;
}
.marcar input{width:20px; height:20px; accent-color:var(--acento-2)}
.marcar label{font-size:.95rem; font-weight:600; cursor:pointer}

/* ---------- Barra de progreso ---------- */
.progreso{margin:30px 0 0}
.progreso .pista{height:9px; background:var(--linea); border-radius:999px; overflow:hidden}
.progreso .relleno{height:100%; width:0; background:var(--acento-2); border-radius:999px; transition:width .4s ease}
.progreso .texto{font-size:.82rem; color:var(--tinta-suave); margin-top:8px}

footer.pie{
  border-top:1px solid var(--linea); margin-top:60px; padding:26px 16px 60px;
  text-align:center; font-size:.82rem; color:var(--tinta-suave);
}

@media (max-width:620px){
  body{font-size:16px}
  .portada{padding:48px 4px 30px}
  .nav-leccion a{flex:1 1 100%}
  .nav-leccion a.der{text-align:left}
}

@media print{
  .barra,.nav-leccion,.marcar,.btn-tema{display:none}
}