:root{
  --navy:#002066;
  --blue:#06357a;
  --blue-2:#0b4fa1;
  --sky:#19aadb;
  --gold:#ebc366;
  --orange:#eb5b25;
  --wine:#94284d;
  --wine-deep:#691a35;
  --green:#009984;

  --bg:#edf2f7;
  --bg-soft:#f6f9fc;
  --card:#ffffff;
  --card-border:#dbe5f0;
  --text:#12213f;
  --text-soft:#64718d;

  --shadow-xs:0 8px 18px rgba(7,26,76,.045);
  --shadow-sm:0 14px 34px rgba(7,26,76,.075);
  --shadow-md:0 24px 58px rgba(7,26,76,.11);
  --shadow-lg:0 32px 80px rgba(6,26,87,.18);

  --radius-sm:18px;
  --radius-md:24px;
  --radius-lg:32px;

  --container:1200px;
  --section-space:88px;
  --header-height:78px;

  /* Fondo azul único para TODAS las franjas "hero" del sitio (home,
     blog, templos, cena, fundamento, manuales, recursos, aplicaciones,
     contacto, login...) para que ninguna landing se vea negra. */
  --hero-bg:
    radial-gradient(circle at 78% 22%, rgba(25,170,219,.32), transparent 28%),
    radial-gradient(circle at 86% 70%, rgba(25,170,219,.14), transparent 26%),
    linear-gradient(90deg, rgba(0,24,73,.97) 0%, rgba(0,32,102,.86) 46%, rgba(0,32,102,.24) 100%),
    linear-gradient(135deg, var(--navy), var(--blue));

  /* Alias semánticos: varios CSS del theme usan estos nombres. */
  --text-main:var(--text);
  --text-muted:var(--text-soft);
  --color-text:var(--text);
  --color-heading:var(--navy);
  --color-muted:var(--text-soft);
  --color-primary:var(--blue-2);
  --color-surface:var(--card);
  --color-surface-alt:var(--bg-soft);
  --color-border:var(--card-border);
  --border-color:var(--card-border);
  --border:var(--card-border);
  --surface:var(--card);
  --surface-soft:var(--bg-soft);
  --surface-dark-soft:#172033;
  --text-inverse:#ffffff;
  --container-max:var(--container);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 18px)}
body{margin:0;font-family:"Inter",system-ui,sans-serif;background:var(--bg-soft);color:var(--text);line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
h1,h2,h3,h4,p{margin-top:0}
sup{font-size:.65em;font-weight:800;color:var(--sky);top:-.4em}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:800;color:var(--navy)}
.container{width:min(100% - 40px,var(--container));margin-inline:auto}

.skip-link{position:fixed;left:16px;top:16px;z-index:999;transform:translateY(-140%);background:var(--navy);color:#fff;padding:12px 16px;border-radius:12px;font-weight:800;box-shadow:var(--shadow-md)}
.skip-link:focus{transform:translateY(0)}

.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);backdrop-filter:blur(18px);border-bottom:1px solid rgba(219,229,240,.75);transition:box-shadow .2s ease,background .2s ease,border-color .2s ease}
.site-header.is-scrolled{box-shadow:var(--shadow-sm);background:rgba(255,255,255,.98);border-bottom-color:rgba(25,170,219,.28)}
.header-inner{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{flex:0 0 auto}.logo img{height:52px;width:auto}
.nav{display:flex;align-items:center;gap:26px;font-size:.9rem;font-weight:700;color:var(--text)}
.nav a{position:relative;padding:7px 0;transition:.2s ease}
.nav a:hover,.nav a[aria-current="page"]{color:var(--sky)}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;border-radius:999px;background:var(--sky);transition:.2s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.header-actions{display:flex;align-items:center;gap:12px}
.icon-btn{width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;transition:.2s ease}
.icon-btn:hover{background:rgba(25,170,219,.08);color:var(--sky)}
.menu-toggle{display:none;border:0;background:linear-gradient(135deg,var(--sky),var(--blue-2));color:#fff;width:44px;height:44px;border-radius:14px;font-size:1.15rem;cursor:pointer;box-shadow:var(--shadow-sm)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:13px;padding:13px 22px;font-family:"Inter",sans-serif;font-weight:800;font-size:.93rem;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;white-space:nowrap}
.btn-sm{padding:11px 18px}
.btn i{font-size:.85em;transition:transform .2s ease}
.btn:hover i,.link:hover i,.tool-card:hover span i{transform:translateX(3px)}

.btn-primary{background:linear-gradient(135deg,var(--blue-2),var(--sky));color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:linear-gradient(135deg,var(--blue),var(--blue-2));transform:translateY(-2px);box-shadow:var(--shadow-md)}

.header-actions .btn-primary,
.cta-actions .btn-gold{
  background:linear-gradient(135deg,var(--orange),#ff7a3d);
  color:#fff;
}

.header-actions .btn-primary:hover,
.cta-actions .btn-gold:hover{
  background:linear-gradient(135deg,#d64215,var(--orange));
}

.btn-light{background:#fff;color:var(--blue);border-color:rgba(219,229,240,.95);box-shadow:var(--shadow-xs)}
.btn-light:hover{border-color:var(--sky);color:var(--sky);transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#f2d486);color:var(--navy);box-shadow:var(--shadow-sm)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline{border-color:rgba(255,255,255,.30);color:#fff;background:rgba(255,255,255,.04)}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(25,170,219,.65);transform:translateY(-2px)}

.hero{
  position:relative;
  min-height:460px;
  color:#fff;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--hero-bg);
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:64px;
  background:linear-gradient(180deg,transparent,rgba(0,32,102,.14));
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:1;
  max-width:600px;
  padding:72px 0;
}

.eyebrow{
  color:var(--gold);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:14px;
}

.hero .eyebrow{
  color:#f8d98a;
}

.hero h1{
  color:#fff;
  font-size:clamp(2.6rem,5vw,4.45rem);
  line-height:.98;
  margin-bottom:22px;
  letter-spacing:-.05em;
  text-wrap:balance;
}

.hero p{
  max-width:480px;
  font-size:1.05rem;
  color:rgba(255,255,255,.9);
  margin-bottom:28px;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

section{padding:var(--section-space) 0}
.path-section{background:#fff}
.section-heading{text-align:center;max-width:720px;margin:0 auto 44px}
.section-heading .eyebrow,.section-top .eyebrow{color:#b8892e;margin-bottom:8px}
.section-heading h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.08;letter-spacing:-.04em;margin-bottom:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.card{position:relative;isolation:isolate;background:rgba(255,255,255,.94);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:34px 28px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,170,219,.10),transparent 48%);opacity:0;transition:.2s ease;z-index:-1}
.card::after{content:"";position:absolute;left:28px;right:28px;top:0;height:3px;background:var(--sky);opacity:0;transition:.2s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(25,170,219,.38)}
.card:hover::before,.card:hover::after{opacity:1}

.icon{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;font-size:1.55rem;margin-bottom:22px;color:#fff;box-shadow:0 14px 30px rgba(7,26,76,.12)}
.icon.blue{background:linear-gradient(135deg,var(--blue-2),var(--blue))}
.icon.sky{background:linear-gradient(135deg,var(--sky),#0ea5c6)}
.icon.wine{background:linear-gradient(135deg,var(--wine),var(--wine-deep))}
.icon.gold{background:linear-gradient(135deg,var(--orange),#ff7a3d)}
.icon.green{background:linear-gradient(135deg,var(--green),#007a6b)}
.icon.orange{background:linear-gradient(135deg,var(--orange),#d64215)}
.card h3{font-size:1.32rem;line-height:1.18;margin-bottom:12px}
.card p{color:var(--text-soft);font-size:.95rem;margin-bottom:20px}
.link{display:inline-flex;align-items:center;gap:7px;color:var(--sky);font-weight:800;font-size:.92rem}
.link:hover{color:var(--orange)}
.link i{font-size:.8em;transition:transform .2s ease}

.jesus-section{
  background:
    radial-gradient(circle at 80% 18%, rgba(25,170,219,.18), transparent 28%),
    radial-gradient(circle at 20% 75%, rgba(25,170,219,.12), transparent 26%),
    linear-gradient(180deg, #f6faff 0%, #e6f2fb 100%);
}

.feature{
  display:grid;
  grid-template-columns:1.05fr 1.15fr .78fr;
  gap:42px;
  align-items:center;
}

/* VIDEO */
.video-card{
  min-height:340px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,32,102,.75)),
    radial-gradient(circle at 80% 20%, rgba(25,170,219,.25), transparent 30%),
    linear-gradient(135deg, var(--blue), var(--navy));
  color:#fff;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
}

/* 🔴 AQUÍ estaba el naranja → reemplazado por azul cielo */
.video-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 78% 18%, rgba(25,170,219,.20), transparent 24%);
  pointer-events:none;
}

.video-card > *{position:relative}

.video-card p{
  font-family:"Playfair Display",Georgia,serif;
  font-size:1.18rem;
  line-height:1.35;
  margin-bottom:8px;
}

.video-card strong{
  color:var(--gold);
}

/* BOTÓN PLAY */
.play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:74px;
  height:74px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:var(--blue-2); /* 🔴 antes naranja */
  display:grid;
  place-items:center;
  font-size:1.3rem;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  transition:.2s ease;
}

.play:hover{
  transform:translate(-50%,-50%) scale(1.05);
  color:var(--sky);
}

.feature h2{
  font-size:2.85rem;
  line-height:1.03;
  letter-spacing:-.04em;
  margin-bottom:18px;
}

.feature p{
  color:var(--text-soft);
  margin-bottom:26px;
}

/* LISTA */
.quick-list{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  border:1px solid rgba(219,229,240,.85);
  border-radius:var(--radius-md);
  padding:22px;
  box-shadow:var(--shadow-sm);
  display:grid;
  gap:10px;
}

.quick-list a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px;
  border-radius:15px;
  color:var(--text);
  font-weight:700;
  font-size:.92rem;
  transition:.2s ease;
}

.quick-list a:hover{
  background:rgba(25,170,219,.08);
  color:var(--blue-2);
}

/* 🔴 AQUÍ también había naranja → eliminado */
.quick-list a:hover .mini-icon{
  background:var(--sky);
  color:#fff;
}

.mini-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eaf4ff;
  color:var(--sky);
  transition:.2s ease;
}

.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px;gap:20px}
.section-top h2{font-size:2.75rem;line-height:1.08;letter-spacing:-.04em;margin-bottom:0}
.resources-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.resource-card{display:block;position:relative;background:#fff;border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:26px 22px;box-shadow:var(--shadow-xs);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;overflow:hidden}
.resource-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sky);opacity:0;transition:.2s ease}
.resource-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(25,170,219,.38)}
.resource-card:hover::before{opacity:1}
.resource-card .icon{width:52px;height:52px;border-radius:17px;font-size:1.25rem;margin-bottom:18px}
.resource-card h3{margin-bottom:6px;font-size:1.18rem}
.resource-card p{color:var(--text-soft);font-size:.9rem;margin-bottom:0}

.tools{
  background:
    radial-gradient(circle at 20% 25%, rgba(25,170,219,.18), transparent 60%),
    radial-gradient(circle at 85% 75%, rgba(25,170,219,.16), transparent 25%),
    linear-gradient(180deg, #e6f2fb, #f3f8fc);
}
.tools-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:38px;align-items:center}
.tools-copy h2{font-size:2.75rem;line-height:1.06;letter-spacing:-.04em;margin-bottom:18px}
.tools-copy p{color:var(--text-soft);margin-bottom:26px}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tool-card{min-height:260px;border-radius:var(--radius-md);color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow-md);overflow:hidden;position:relative;transition:transform .2s ease,box-shadow .2s ease}
a.tool-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.tool-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 18%,rgba(255,255,255,.18),transparent 24%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.28))}
.tool-card::after{font-family:"IcoFont";font-weight:normal;position:absolute;right:22px;top:22px;font-size:3.2rem;opacity:.20}
.tool-card.blue::after{content:"\ea30"}
.tool-card.green::after{content:"\ecf9"}
.tool-card.wine::after{content:"\ede5"}
.tool-card.orange::after{content:"\f014"}
.tool-card.sky::after{content:"\efca"}
.tool-card.navy::after{content:"\e968"}
.tool-card>*{position:relative}
.tool-card.blue{background:linear-gradient(135deg,var(--orange),#d64215)}
.tool-card.green{background:linear-gradient(135deg,var(--green),#006f63)}
.tool-card.wine{background:linear-gradient(135deg,var(--wine),var(--wine-deep))}
.tool-card.orange{background:linear-gradient(135deg,var(--orange),#d64215)}
.tool-card.sky{background:linear-gradient(135deg,var(--sky),#0e7fa8)}
.tool-card.navy{background:linear-gradient(135deg,var(--blue-2),var(--navy))}
.tool-card h3{color:#fff;font-size:1.5rem;margin-bottom:8px}
.tool-card p{color:rgba(255,255,255,.86);font-size:.92rem;margin-bottom:16px}
.tool-card span{font-weight:800;color:#fff}
.tool-card span i{font-size:.8em;transition:transform .2s ease}

.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* Listados de resultados (búsqueda, archivos, categorías): una tarjeta por fila para facilitar la lectura. */
.archive-grid{grid-template-columns:1fr;max-width:820px;margin-inline:auto}
.post{display:block;background:#fff;border:1px solid var(--card-border);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(25,170,219,.35)}
.post img{width:100%;height:152px;object-fit:cover;background:linear-gradient(135deg,#dbe5f0,#f6f9fc)}
.post-thumb-placeholder{width:100%;height:152px;display:grid;place-items:center;font-size:1.9rem;color:var(--sky);background:radial-gradient(circle at 78% 20%,rgba(25,170,219,.16),transparent 40%),linear-gradient(135deg,#dbe5f0,#f6f9fc)}
.post-body{padding:22px}
.tag{color:var(--orange);text-transform:uppercase;font-size:.72rem;font-weight:900;letter-spacing:.08em;margin-bottom:8px}
.post h3{line-height:1.15;margin-bottom:10px;font-size:1.18rem}
.post p{font-size:.9rem;color:var(--text-soft);margin-bottom:0}
.church-card{
  background:
    radial-gradient(circle at 80% 15%, rgba(25,170,219,.30), transparent 25%),
    linear-gradient(135deg, rgba(0,32,102,.98), rgba(6,53,122,.92)),
    linear-gradient(135deg, var(--navy), var(--blue-2));
  color:#fff;
  border-radius:var(--radius-md);
  padding:34px;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
}

.church-card h3{
  color:#fff;
  font-size:1.9rem;
  margin-bottom:10px;
}

.church-card p{
  color:rgba(255,255,255,.86);
  margin-bottom:20px;
}



.cta{
  padding:0 0 28px;
}

.cta-box{
  background:
    radial-gradient(circle at 85% 15%, rgba(25,170,219,.18), transparent 30%),
    linear-gradient(135deg, #00143f, var(--navy) 60%, var(--blue));
  color:#fff;
  border-radius:var(--radius-md);
  padding:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  box-shadow:var(--shadow-lg);
}

.cta-box h2{
  color:#fff;
  margin-bottom:4px;
  font-size:1.55rem;
}

.cta-box p{
  margin-bottom:0;
  color:rgba(255,255,255,.82);
}

.cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(25,170,219,.12), transparent 30%),
    linear-gradient(135deg, #000a26, #00143f 40%, #002066 100%);
  color:#fff;
  padding:64px 0 28px;
}

.footer-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.35fr repeat(4,1fr);
  gap:40px;
}

.footer-logo img{
  height:58px;
  margin-bottom:18px;
}

.footer p{
  color:rgba(255,255,255,.78);
  font-size:.92rem;
  line-height:1.6;
}

.footer h4{
  margin:0 0 16px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.9);
  position:relative;
}

/* línea simple (sin degradado) */
.footer h4::after{
  content:"";
  display:block;
  width:24px;
  height:2px;
  margin-top:6px;
  background:var(--sky);
  border-radius:2px;
}

.footer ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

/* enlaces LIMPIOS */
.footer a{
  color:rgba(255,255,255,.72);
  font-size:.92rem;
  transition:.2s ease;
}

/* hover sobrio */
.footer a:hover{
  color:var(--sky);
}

/* puedes usar naranja solo en enlaces clave */
.footer .highlight-link{
  color:var(--orange);
  font-weight:600;
}

.footer .highlight-link:hover{
  color:#ff7a3d;
}

/* footer bottom */
.footer-bottom{
  position:relative;
  z-index:1;
  margin-top:44px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:rgba(255,255,255,.6);
  font-size:.82rem;
}

/* enlaces inferiores */
.footer-bottom a{
  color:rgba(255,255,255,.75);
}

.footer-bottom a:hover{
  color:var(--orange);
}
:focus-visible{outline:3px solid rgba(25,170,219,.45);outline-offset:3px}

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

@media (max-width:1120px){
  .nav{gap:18px;font-size:.84rem}
  .header-actions .btn{padding-inline:16px}
}

.nav-contact-mobile{display:none}

@media (max-width:1024px){
  :root{--header-height:78px}
  .header-actions .btn{display:none}
  .menu-toggle{display:grid;place-items:center}
  .nav{position:fixed;top:calc(var(--header-height) + 10px);left:16px;right:16px;display:flex;flex-direction:column;align-items:stretch;gap:0;background:#fff;padding:14px;border:1px solid var(--card-border);border-radius:20px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.2s ease}
  .nav.open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav a{padding:14px 16px;border-radius:14px}
  .nav a:hover,.nav a[aria-current="page"]{background:rgba(25,170,219,.08)}
  .nav a::after{display:none}
  .nav-contact-mobile{display:block;margin-top:10px;padding-top:14px;border-top:1px solid var(--card-border)}
  .nav-contact-mobile .btn{display:flex;justify-content:center;padding:13px 22px}
  .grid-4,.grid-3,.resources-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .feature,.tools-layout{grid-template-columns:1fr}
  .quick-list{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  :root{--section-space:64px;--header-height:70px}
  .container{width:min(100% - 28px,var(--container))}
  .header-inner{height:var(--header-height)}
  .logo img{height:44px}
  .hero{min-height:auto}
  .hero-content{padding:58px 0;}
  .hero h1{font-size:clamp(2.35rem,11vw,3.2rem);}
  .hero p{font-size:1rem}
  .hero-actions,.cta-actions{width:100%}
  .hero-actions .btn,.cta-actions .btn{width:100%}
  .grid-4,.grid-3,.resources-grid,.blog-grid,.tool-grid,.quick-list{grid-template-columns:1fr}
  .section-top{flex-direction:column;align-items:flex-start}
  .section-top h2,.tools-copy h2,.feature h2{font-size:2.25rem}
  .video-card{min-height:280px;border-radius:24px}
  .card,.resource-card,.quick-list,.cta-box{border-radius:22px}
  .tools{background:#e2f1fb;}
  .tools + section{
    background:#fff;
    padding-top:72px;
  }
  .cta-box{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}

@media (max-width:420px){
  .btn{padding:12px 18px}
  .card,.resource-card{padding:26px 22px}
  .icon{width:56px;height:56px}
}

/* =========================
   THEME TOGGLE
========================= */
.theme-toggle{
  position:relative;
}

.theme-toggle i{
  transition:transform .2s ease;
}

.theme-toggle:hover i{
  transform:rotate(-12deg) scale(1.04);
}

/* =========================
   DARK MODE (MANUAL)
   Activo con: <html data-theme="dark">
========================= */
html[data-theme="dark"]{
  color-scheme:dark;

  --bg:#0b1224;
  --bg-soft:#0f172a;
  --card:#111a2e;
  --card-border:#1e2a45;

  --hero-bg:
    radial-gradient(circle at 78% 22%, rgba(25,170,219,.22), transparent 28%),
    radial-gradient(circle at 86% 70%, rgba(25,170,219,.10), transparent 26%),
    linear-gradient(90deg, rgba(0,10,40,.98) 0%, rgba(0,20,70,.90) 50%, rgba(0,20,70,.42) 100%),
    linear-gradient(135deg, #060d20, #0a1a3f);

  --text:#e6edf7;
  --text-soft:#9fb0cc;

  --shadow-xs:0 8px 18px rgba(0,0,0,.35);
  --shadow-sm:0 14px 34px rgba(0,0,0,.45);
  --shadow-md:0 24px 58px rgba(0,0,0,.55);
  --shadow-lg:0 32px 80px rgba(0,0,0,.65);

  /* Alias semánticos en dark: los que no derivan de tokens ya oscuros. */
  --color-heading:#f8fafc;
  --color-primary:var(--sky);
}

html[data-theme="dark"] body{
  background:var(--bg-soft);
  color:var(--text);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3{
  color:#ffffff;
}

html[data-theme="dark"] .site-header{
  background:rgba(10,18,36,.86);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 32px rgba(0,0,0,.22);
}

html[data-theme="dark"] .site-header.is-scrolled{
  background:rgba(10,18,36,.96);
  border-bottom-color:rgba(25,170,219,.18);
}

html[data-theme="dark"] .nav,
html[data-theme="dark"] .icon-btn{
  color:var(--text);
}

html[data-theme="dark"] .icon-btn:hover{
  background:rgba(25,170,219,.12);
  color:var(--sky);
}

html[data-theme="dark"] .nav{
  background:transparent;
}

html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a[aria-current="page"]{
  color:var(--sky);
}

html[data-theme="dark"] .path-section,
html[data-theme="dark"] section:not(.hero):not(.jesus-section):not(.tools):not(.cta):not(.landing-hero):not(.templo-hero):not(.templo-archive-hero):not(.cena-hero-v2):not(.fundamento-hero):not(.fundamento-single-hero):not(.manual-hero){
  background:var(--bg-soft);
}

html[data-theme="dark"] .hero::after{
  background:linear-gradient(180deg,transparent,rgba(0,10,40,.28));
}

/* Conociendo a Jesús: sección completamente oscura */
html[data-theme="dark"] .jesus-section{
  background:
    radial-gradient(circle at 80% 18%, rgba(25,170,219,.14), transparent 30%),
    radial-gradient(circle at 18% 80%, rgba(25,170,219,.08), transparent 28%),
    linear-gradient(180deg, #0f172a 0%, #0b1224 100%);
}

html[data-theme="dark"] .feature p,
html[data-theme="dark"] .tools-copy p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .resource-card p,
html[data-theme="dark"] .post p{
  color:var(--text-soft);
}

html[data-theme="dark"] .video-card{
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,20,70,.88)),
    radial-gradient(circle at 80% 20%, rgba(25,170,219,.18), transparent 30%),
    linear-gradient(135deg, #0a1a3f, #060d20);
}

html[data-theme="dark"] .video-card::before{
  background:radial-gradient(circle at 78% 18%, rgba(25,170,219,.14), transparent 24%);
}

html[data-theme="dark"] .quick-list{
  background:rgba(17,26,46,.88);
  border-color:rgba(255,255,255,.08);
  box-shadow:var(--shadow-sm);
}

html[data-theme="dark"] .quick-list a{
  color:var(--text);
}

html[data-theme="dark"] .quick-list a:hover{
  background:rgba(25,170,219,.12);
  color:#fff;
}

html[data-theme="dark"] .mini-icon{
  background:#16213d;
  color:var(--sky);
}

html[data-theme="dark"] .quick-list a:hover .mini-icon{
  background:var(--sky);
  color:#fff;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .post{
  background:var(--card);
  border-color:var(--card-border);
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .resource-card:hover,
html[data-theme="dark"] .post:hover{
  border-color:rgba(25,170,219,.35);
}

html[data-theme="dark"] .card::before{
  background:linear-gradient(180deg,rgba(25,170,219,.08),transparent 48%);
}

html[data-theme="dark"] .btn-light{
  background:var(--card);
  color:var(--text);
  border-color:var(--card-border);
}

html[data-theme="dark"] .btn-light:hover{
  color:var(--sky);
  border-color:rgba(25,170,219,.55);
}

html[data-theme="dark"] .btn-outline{
  background:rgba(255,255,255,.04);
}

html[data-theme="dark"] .tools{
  background:
    radial-gradient(circle at 20% 25%, rgba(25,170,219,.12), transparent 30%),
    radial-gradient(circle at 85% 75%, rgba(25,170,219,.08), transparent 28%),
    linear-gradient(180deg, #0f172a, #0b1224);
}

html[data-theme="dark"] .post img{
  background:linear-gradient(135deg,#16213d,#0f172a);
}

html[data-theme="dark"] .post-thumb-placeholder{
  background:radial-gradient(circle at 78% 20%,rgba(25,170,219,.14),transparent 40%),linear-gradient(135deg,#16213d,#0f172a);
}

html[data-theme="dark"] .tag{
  color:#ff8a5c;
}

html[data-theme="dark"] .church-card{
  background:
    radial-gradient(circle at 80% 15%, rgba(25,170,219,.22), transparent 25%),
    linear-gradient(135deg, rgba(0,12,46,.98), rgba(0,28,84,.92)),
    linear-gradient(135deg, #060d20, #0a1a3f);
}

html[data-theme="dark"] .cta-box{
  background:
    radial-gradient(circle at 85% 15%, rgba(25,170,219,.14), transparent 30%),
    linear-gradient(135deg, #000c2e, #001a55);
}

html[data-theme="dark"] .footer{
  background:
    radial-gradient(circle at 85% 15%, rgba(25,170,219,.10), transparent 30%),
    linear-gradient(135deg, #000814, #000c2e 40%, #00143f 100%);
}

html[data-theme="dark"] .footer p{
  color:rgba(255,255,255,.75);
}

html[data-theme="dark"] .footer a{
  color:rgba(255,255,255,.65);
}

html[data-theme="dark"] .footer a:hover,
html[data-theme="dark"] .footer-bottom a:hover{
  color:var(--sky);
}

html[data-theme="dark"] .footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
}

@media (max-width:1024px){
  html[data-theme="dark"] .nav{
    background:var(--card);
    border-color:var(--card-border);
  }

  html[data-theme="dark"] .nav a:hover,
  html[data-theme="dark"] .nav a[aria-current="page"]{
    background:rgba(25,170,219,.12);
  }
}

@media (max-width:720px){
  html[data-theme="dark"] .tools{
    background:#0f172a;
  }

  html[data-theme="dark"] .tools + section{
    background:var(--bg-soft);
  }
}


/* =========================================================
   DARK MODE SECTION DEPTH PATCH v2
   Objetivo: evitar que todas las secciones oscuras se vean planas.
   Estas reglas van al final para sobreescribir el bloque dark general.
   ========================================================= */
html[data-theme="dark"]{
  --dark-bg-0:#070d1c;
  --dark-bg-1:#0b1224;
  --dark-bg-2:#0f172a;
  --dark-bg-3:#111c33;
  --dark-surface:#111a2e;
  --dark-surface-2:#14203a;
  --dark-border:rgba(148,163,184,.18);
  --dark-border-strong:rgba(25,170,219,.26);
}

html[data-theme="dark"] body{
  background:var(--dark-bg-1);
}

/* Alternancia base para las secciones del home y cualquier pagina no cubierta.
   Las heroes con nombre propio (no literalmente ".landing-hero") deben
   quedar excluidas aquí también, si no esta regla (con !important) les
   gana a su propio fondo azul --hero-bg solo en modo oscuro. */
html[data-theme="dark"] main > section:not(.hero):not(.landing-hero):not(.tools):not(.cta):not(.templo-hero):not(.templo-archive-hero):not(.cena-hero-v2):not(.fundamento-hero):not(.fundamento-single-hero):not(.manual-hero):nth-of-type(odd){
  background:
    radial-gradient(circle at 12% 8%, rgba(25,170,219,.07), transparent 28%),
    linear-gradient(180deg,var(--dark-bg-1),var(--dark-bg-2)) !important;
}

html[data-theme="dark"] main > section:not(.hero):not(.landing-hero):not(.tools):not(.cta):not(.templo-hero):not(.templo-archive-hero):not(.cena-hero-v2):not(.fundamento-hero):not(.fundamento-single-hero):not(.manual-hero):nth-of-type(even){
  background:
    radial-gradient(circle at 86% 16%, rgba(235,195,102,.055), transparent 28%),
    linear-gradient(180deg,var(--dark-bg-0),var(--dark-bg-1)) !important;
}

html[data-theme="dark"] .path-section,
html[data-theme="dark"] .jesus-section{
  background:
    radial-gradient(circle at 15% 10%, rgba(25,170,219,.08), transparent 28%),
    linear-gradient(180deg,#0d1730,#0f172a) !important;
}

html[data-theme="dark"] .tools{
  background:
    radial-gradient(circle at 80% 12%, rgba(25,170,219,.12), transparent 30%),
    linear-gradient(135deg,#071126,#0d1a34 52%,#0b1224) !important;
}

html[data-theme="dark"] .cta,
html[data-theme="dark"] .cta-section{
  background:
    radial-gradient(circle at 15% 15%, rgba(25,170,219,.14), transparent 30%),
    linear-gradient(135deg,#06102a,#09265b 54%,#0b4fa1) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .post,
html[data-theme="dark"] .church-card,
html[data-theme="dark"] .quick-list,
html[data-theme="dark"] .video-card{
  background:linear-gradient(180deg,rgba(20,32,58,.96),rgba(15,23,42,.96)) !important;
  border-color:var(--dark-border) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] .cta-box{
  background:
    radial-gradient(circle at 80% 18%, rgba(235,195,102,.18), transparent 30%),
    linear-gradient(135deg,#00194d,#062e78 58%,#0b4fa1) !important;
  border-color:rgba(255,255,255,.14) !important;
}

/* =========================================================
   FINE DESIGN SPACING PATCH
   Objetivo: dar aire vertical a las secciones y evitar que
   los hijos queden pegados al borde superior.
   ========================================================= */
:root{
  --section-space:96px;
  --section-space-tight:72px;
  --section-space-mobile:68px;
  --section-inner-gap:48px;
}

main > section:not(.hero):not(.landing-hero):not(.cta):not(.templo-hero):not(.templo-archive-hero):not(.cena-hero-v2):not(.fundamento-hero):not(.fundamento-single-hero):not(.manual-hero){
  padding-top:clamp(76px, 7vw, 104px);
  padding-bottom:clamp(76px, 7vw, 104px);
}

main > section > .container > .section-heading,
main > section > .container > .section-top{
  margin-top:0;
  margin-bottom:clamp(34px, 4vw, 52px);
}

.section-heading p,
.section-top p{
  margin-bottom:0;
}

.card,
.resource-card,
.post-body,
.quick-list,
.church-card,
.cta-box{
  scroll-margin-top:calc(var(--header-height) + 28px);
}

/* Las CTA intencionalmente son mas compactas, pero no pegadas. */
.cta{
  padding-top:clamp(56px, 6vw, 76px);
  padding-bottom:clamp(34px, 4vw, 48px);
}

.cta-box{
  padding:clamp(28px, 4vw, 42px);
}

/* Evita que las secciones que antes anulaban el padding superior queden apretadas. */
.church-cta-section,
.practical-section,
.editorial-cta{
  padding-top:clamp(64px, 6vw, 88px) !important;
}

/* Hero del home: mas aire interno sin afectar el layout general. */
.hero-content{
  padding-top:clamp(68px, 7vw, 90px);
  padding-bottom:clamp(68px, 7vw, 90px);
}

@media (max-width:720px){
  :root{--section-space:var(--section-space-mobile)}

  main > section:not(.hero):not(.landing-hero):not(.cta):not(.templo-hero):not(.templo-archive-hero):not(.cena-hero-v2):not(.fundamento-hero):not(.fundamento-single-hero):not(.manual-hero){
    padding-top:66px;
    padding-bottom:66px;
  }

  main > section > .container > .section-heading,
  main > section > .container > .section-top{
    margin-bottom:32px;
  }

  .cta{
    padding-top:50px;
    padding-bottom:34px;
  }

  .hero-content{
    padding-top:62px;
    padding-bottom:62px;
  }
}


/* =========================================================
   ID7D NORMALIZACION GLOBAL
   Capa base preparada para migracion a WordPress theme.
   - Tokens semanticos
   - Secciones reutilizables
   - Correccion fina de espaciados
   - Capas visuales para dark mode
   ========================================================= */
:root{
  --section-pad-y: clamp(76px, 8vw, 112px);
  --section-pad-y-compact: clamp(56px, 6vw, 82px);
  --section-pad-y-lg: clamp(96px, 10vw, 136px);
  --section-inner-gap: clamp(28px, 4vw, 52px);
  --section-bg-default: var(--bg-soft);
  --section-bg-raised: #ffffff;
  --section-bg-soft: #f4f8fc;
  --section-bg-tint: #eaf5fb;
  --section-bg-warm: #fff8ed;
  --section-bg-deep: #eef4ff;
  --surface-elevated: rgba(255,255,255,.96);
  --surface-muted: rgba(255,255,255,.72);
}

html[data-theme="dark"]{
  --section-bg-default:#071426;
  --section-bg-raised:#0d1c33;
  --section-bg-soft:#0a172b;
  --section-bg-tint:#092138;
  --section-bg-warm:#1d1820;
  --section-bg-deep:#081a31;
  --surface-elevated:rgba(15,32,55,.94);
  --surface-muted:rgba(17,39,66,.70);
}

section,
.section,
.path-section,
.jesus-section,
.blog-section,
.contacto-section,
.org-section,
.formacion-section,
.servir-section,
.tools-section{
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

section > .container,
.section > .container{
  position: relative;
}

.section-compact{padding-top:var(--section-pad-y-compact);padding-bottom:var(--section-pad-y-compact)}
.section-large{padding-top:var(--section-pad-y-lg);padding-bottom:var(--section-pad-y-lg)}

.section-heading,
.section-top{
  margin-bottom: var(--section-inner-gap);
}

.section-heading + .grid-4,
.section-heading + .grid-3,
.section-heading + .cards-grid,
.section-heading + .blog-grid,
.section-heading + .contact-grid,
.section-heading + .org-grid,
.section-heading + .tools-grid{
  margin-top: 0;
}

.card,
.feature-card,
.topic-card,
.tool-card,
.blog-card,
.org-card,
.contact-card,
.ministry-card,
.resource-card,
.directory-card,
.temple-card{
  padding-top: clamp(28px, 3vw, 38px);
  padding-bottom: clamp(28px, 3vw, 38px);
}

/* Alternancia semantica de secciones para evitar bloques planos */
.section-bg-default{background:var(--section-bg-default)}
.section-bg-raised{background:var(--section-bg-raised)}
.section-bg-soft{background:var(--section-bg-soft)}
.section-bg-tint{background:var(--section-bg-tint)}
.section-bg-warm{background:var(--section-bg-warm)}
.section-bg-deep{background:var(--section-bg-deep)}

html[data-theme="dark"] body{background:var(--section-bg-default)}
html[data-theme="dark"] .path-section,
html[data-theme="dark"] .section-bg-raised{background:var(--section-bg-raised)}
html[data-theme="dark"] .jesus-section,
html[data-theme="dark"] .section-bg-soft{background:var(--section-bg-soft)}
html[data-theme="dark"] .section-bg-tint{background:var(--section-bg-tint)}
html[data-theme="dark"] .section-bg-warm{background:var(--section-bg-warm)}
html[data-theme="dark"] .section-bg-deep{background:var(--section-bg-deep)}

html[data-theme="dark"] .card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .org-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .ministry-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .directory-card,
html[data-theme="dark"] .temple-card,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .cta-box{
  background: var(--surface-elevated);
  border-color: rgba(148,163,184,.18);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3{color:#f8fafc}
html[data-theme="dark"] p,
html[data-theme="dark"] li{color:#cbd5e1}
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .section-top p,
html[data-theme="dark"] .card p{color:#aebdd0}

/* La regla genérica "html[data-theme=dark] p" de arriba le gana en
   especificidad a la base ".eyebrow" cuando el eyebrow es un <p>
   (la mayoría de las landing). Se restaura el dorado explícitamente
   para que todas las heroes se vean iguales en modo oscuro. */
html[data-theme="dark"] .eyebrow{color:var(--gold)}
html[data-theme="dark"] .hero .eyebrow{color:#f8d98a}

@media (max-width: 760px){
  :root{
    --section-pad-y: 64px;
    --section-pad-y-compact: 48px;
    --section-pad-y-lg: 76px;
  }
  .container{width:min(100% - 28px,var(--container))}
  .card,
  .feature-card,
  .topic-card,
  .tool-card,
  .blog-card,
  .org-card,
  .contact-card,
  .ministry-card,
  .resource-card,
  .directory-card,
  .temple-card{padding:24px 20px}
}