/* ==========================================================================
   theme.css — Tema único RescueMe (2026-11). Va JUSTO DESPUÉS de base.css en
   TODAS las páginas (home, blog, subpáginas, eventos y guías).
   - Siempre claro: anula el modo oscuro automático de base.css.
   - Paleta de la app: logoLight #2AA8E2, logoDark #0772BA, action #163A5F,
     text #16324F, secondary #5D6B7E, fondo #F2F8FD, heart #E8323C.
   - Sin degradados: superficies planas blancas o azul muy claro, y pasteles
     de la app para tarjetas.
   ========================================================================== */

:root,
:root[data-theme="dark"]{
  color-scheme: light;
  --bg:#FFFFFF;
  --bg-tint:#F2F8FD;
  --surface:#FFFFFF;
  --ink:#16324F;
  --muted:#5D6B7E;
  --sky:#2AA8E2;
  --deep:#0772BA;
  --heart:#E8323C;
  --heart-soft:#FDE7E9;
  --border:#E1EBF4;
  --header-bg:rgba(255,255,255,.94);
  --shadow:0 12px 32px -18px rgba(22,50,79,.28);
  --panel-dark:#163A5F;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#FFFFFF; --bg-tint:#F2F8FD; --surface:#FFFFFF; --ink:#16324F; --muted:#5D6B7E;
    --sky:#2AA8E2; --deep:#0772BA; --heart:#E8323C; --heart-soft:#FDE7E9; --border:#E1EBF4;
    --header-bg:rgba(255,255,255,.94); --shadow:0 12px 32px -18px rgba(22,50,79,.28); --panel-dark:#163A5F;
  }
}

/* ---------- Tipografía: títulos compactos (antes heredaban line-height 1.6) ---------- */
h1,h2,h3,h4{line-height:1.15;color:var(--ink)}
.h2{line-height:1.15;letter-spacing:-.005em}
.lede{line-height:1.6}
.eyebrow{color:var(--deep);letter-spacing:.12em}

/* ---------- Botones ---------- */
.btn{padding:14px 26px;border-radius:999px;font-weight:700}
.btn-primary{background:var(--deep);color:#fff;box-shadow:none}
.btn-primary:hover{background:#163A5F;color:#fff;transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--deep);border:2px solid #CFE0EE}
.btn-ghost:hover{border-color:var(--deep);color:var(--deep);background:#F2F8FD}
.btn-heart{background:var(--heart);color:#fff;box-shadow:none}
.btn-heart:hover{background:#C62F3B}

/* ---------- Header ---------- */
.site-header{background:var(--header-bg);border-bottom:1px solid var(--border)}
.brand{color:var(--deep)}
.nav-links a:hover{border-color:var(--sky);color:var(--deep)}

/* ---------- Héroes de subpáginas y CTA final: planos y claros ---------- */
.subpage-hero{background:var(--bg-tint)}
.cta-final{background:#DDF0F5;color:var(--ink)}
.cta-final .h2,.cta-final h2{color:var(--ink)}
.cta-final .lede{color:var(--muted)}
.cta-final .eyebrow{color:#1E7A93 !important}
.cta-final .btn,.cta-final .btn-primary{background:#163A5F !important;color:#fff !important;border:0}
.cta-final .btn:hover{background:var(--deep) !important}
.cta-final .btn-ghost{background:#fff !important;color:#163A5F !important;border:2px solid #163A5F !important}

/* ---------- Divisor "techito" con los mismos tonos ---------- */
.roofline--tint{background-color:var(--bg)}
.roofline--bg{background-color:var(--bg-tint)}

/* ---------- Tarjetas compartidas ---------- */
.product-card,.biz-benefit,.post-card{border:1px solid var(--border);box-shadow:var(--shadow);border-radius:var(--radius-lg)}
.feat-icon{background:#DDF0F5;color:#1E7A93;border-radius:12px}
.store-note{background:#FDF4CC}
.store-note svg{color:#806300}
.wall-card{box-shadow:0 18px 36px -20px rgba(22,50,79,.35)}
.wall-photo>img:first-child{background:#DDF0F5}
.step-card{background:var(--bg-tint)}
.step-num{background:var(--deep)}
.filter-chip.is-active{background:var(--deep);border-color:var(--deep)}

/* ---------- Contenido largo (blog, legales, guías) ---------- */
.legal-content{color:var(--ink)}
.legal-content h2{color:var(--ink)}
.legal-content a{color:var(--deep)}
.legal-content strong{color:var(--ink)}
.legal-content ul li::before{background:var(--sky)}

/* ---------- Footer claro ---------- */
footer{background:var(--bg-tint);color:var(--muted);border-top:1px solid var(--border)}
.footer-grid{border-bottom-color:var(--border)}
.footer-brand{color:var(--deep)}
.footer-col h5{color:var(--ink)}
.footer-col a,.footer-guides a{color:var(--muted)}
.footer-col a:hover,.footer-guides a:hover{color:var(--deep)}
.footer-guides{border-top-color:var(--border) !important}
.footer-bottom{color:var(--muted)}
.social-icons a{background:#fff;border:1px solid var(--border)}
.social-icons svg{stroke:var(--deep)}

/* ---------- Banner de app y botón de WhatsApp ---------- */
.app-banner{background:#fff}
.whatsapp-fab{box-shadow:0 10px 24px -10px rgba(37,211,102,.55)}

/* Botones dentro de textos largos (no heredan el color de los enlaces) */
.legal-content .btn,.seo-article .btn{color:#fff;text-decoration:none}
.legal-content .btn-ghost{color:var(--deep)}
/* El "techito" antes del CTA final toma el color del CTA */
.roofline:has(+ .cta-final),.roofline:has(+ main > .cta-final:first-child){background-color:#DDF0F5}