/* La Cruz de Jesús — Oraciones diarias
   Sistema tipo Monitor Venezuela: light principal, dark en toggle, tokens como variables.
   Identidad del canal: panel oscuro + marco dorado (diseño B) en hero y versículo. */
:root{
  --bg:#FAF6EB; --surface:#FFFDF6; --surface2:#F3ECDA; --border:#E5DCC4;
  --text:#26231D; --text2:#5C564A; --gold:#A9853D; --gold-strong:#8A6D2F;
  --panel:#12100C; --panel2:#1A1712; --panel-text:#F5EFE0; --panel-gold:#C6A15B;
  --radius:18px; --maxw:1120px; --readw:720px;
}
html[data-theme="dark"]{
  --bg:#12100C; --surface:#1A1712; --surface2:#211D16; --border:#2E2A20;
  --text:#F5EFE0; --text2:#CBC2AC; --gold:#C6A15B; --gold-strong:#D9BC7A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--gold-strong);text-decoration-color:color-mix(in srgb,var(--gold) 55%,transparent);text-underline-offset:3px}
a:hover{text-decoration-color:var(--gold)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.read{max-width:var(--readw)}
h1,h2,h3,.serif{font-family:Fraunces,Georgia,"Times New Roman",serif}
h2{font-size:1.65rem;line-height:1.25;margin:2.2em 0 .6em}
h3{font-size:1.25rem;line-height:1.3;margin:1.8em 0 .5em}
p{margin:.9em 0}
.kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 .6em}
.muted{color:var(--text2)}
.small{font-size:.9rem}

/* Header tipo MV */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
header.site .bar{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);font-family:Fraunces,Georgia,serif;font-size:1.13rem;font-weight:600;white-space:nowrap}
.brand img{width:36px;height:36px;border-radius:9px}
nav.main{margin-left:auto;display:flex;gap:22px;align-items:center}
nav.main a{color:var(--text);text-decoration:none;font-size:.96rem;font-weight:500}
nav.main a:hover{color:var(--gold-strong)}
.btn{display:inline-block;background:var(--gold);color:#fff !important;border-radius:999px;padding:9px 18px;font-weight:600;font-size:.93rem;text-decoration:none;border:1px solid var(--gold)}
.btn:hover{background:var(--gold-strong)}
.iconbtn{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:999px;width:38px;height:38px;cursor:pointer;font-size:16px;line-height:1;flex:none}
.burger{display:none}
@media(max-width:860px){
  nav.main{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;padding:14px 20px 20px;gap:14px}
  nav.main.open{display:flex}
  .burger{display:block;margin-left:auto}
  nav.main .btn{align-self:flex-start}
}

/* Hero panel B */
.hero{background:var(--panel);color:var(--panel-text);border-radius:0 0 28px 28px}
.hero .inner{max-width:var(--maxw);margin:0 auto;padding:54px 20px 48px;text-align:center}
.hero .frame{border:1px solid var(--panel-gold);border-radius:14px;padding:38px 22px 34px;max-width:820px;margin:0 auto}
.hero .tema{color:var(--panel-gold);letter-spacing:.22em;text-transform:uppercase;font-weight:700;font-size:.85rem;margin:0}
.hero h1{font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.08;margin:.35em 0 .25em;font-weight:600}
.hero .fecha{color:var(--panel-gold);letter-spacing:.16em;text-transform:uppercase;font-size:.95rem;margin:0}
.hero .linea{width:64px;height:1px;background:var(--panel-gold);margin:18px auto}
.hero .sub{color:#DDD3B8;max-width:620px;margin:0 auto;font-size:1.05rem}
.hero .cta{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-ghost{display:inline-block;border:1px solid var(--panel-gold);color:var(--panel-text);border-radius:999px;padding:9px 18px;font-weight:600;font-size:.93rem;text-decoration:none}
.btn-gold{display:inline-block;background:var(--panel-gold);color:#171410;border-radius:999px;padding:10px 20px;font-weight:700;font-size:.93rem;text-decoration:none}

/* Video facade */
.video{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;aspect-ratio:16/9;border:1px solid var(--border);cursor:pointer;margin:26px 0}
.video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.video .play{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.95rem}
.video .play b{width:70px;height:70px;border-radius:50%;background:rgba(18,16,12,.82);border:1.5px solid var(--panel-gold);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--panel-gold)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Verse card */
.verse{background:var(--panel);color:var(--panel-text);border:1px solid var(--panel-gold);border-radius:var(--radius);padding:30px 28px;margin:30px 0}
.verse p.txt{font-family:Fraunces,Georgia,serif;font-size:1.35rem;line-height:1.5;margin:.2em 0 .5em}
.verse p.ref{color:var(--panel-gold);letter-spacing:.12em;text-transform:uppercase;font-size:.83rem;font-weight:700;margin:0}
.verse p.ver{color:#CFC5A6;font-size:.85rem;margin:.6em 0 0}

/* Cards / lists */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:22px 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-decoration:none;color:var(--text);display:block}
.card:hover{border-color:var(--gold)}
.card .f{color:var(--gold);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.card h3{margin:.45em 0 .35em;font-size:1.22rem}
.card p{margin:0;color:var(--text2);font-size:.95rem}
section.blk{padding:12px 0 6px}
.consigna{background:var(--panel);color:var(--panel-text);border-radius:var(--radius);padding:26px 28px;text-align:center;margin:34px 0}
.consigna .frase{font-family:Fraunces,Georgia,serif;font-size:1.5rem;margin:.15em 0}
.consigna p{color:#DDD3B8;margin:.3em 0}
.adslot{border:1px dashed var(--border);border-radius:12px;min-height:110px;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin:30px 0;visibility:hidden}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin:12px 0}
.faq summary{font-family:Fraunces,Georgia,serif;font-size:1.13rem;cursor:pointer;font-weight:600}
.faq details p{color:var(--text2)}
.crumbs{font-size:.88rem;color:var(--text2);margin:22px 0 0}
.crumbs a{color:var(--text2)}
.chapters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chapters a{background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:.87rem;color:var(--text);text-decoration:none}
.chapters a:hover{border-color:var(--gold)}
.pager{display:flex;justify-content:space-between;gap:14px;margin:36px 0;flex-wrap:wrap}
table.arch{width:100%;border-collapse:collapse;margin:18px 0}
table.arch th,table.arch td{border-bottom:1px solid var(--border);padding:12px 10px;text-align:left;vertical-align:top}
table.arch th{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}
footer.site{margin-top:64px;background:var(--panel);color:var(--panel-text)}
footer.site .wrap{padding-top:38px;padding-bottom:30px}
footer.site a{color:#DDD3B8}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
footer.site h4{font-family:Fraunces,Georgia,serif;margin:.2em 0 .6em;font-size:1.05rem;color:var(--panel-text)}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:.45em 0}
footer.site .fin{border-top:1px solid #2E2A20;margin-top:28px;padding-top:18px;color:#A99F83;font-size:.87rem}
article.cuerpo{font-size:1.06rem}
article.cuerpo p{line-height:1.78}
blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--gold);font-family:Fraunces,Georgia,serif;font-size:1.2rem}
.oracion{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:12px;padding:26px 28px;margin:28px 0}
.oracion h2{margin-top:.1em}