/* ==========================================================================
   Sabio Celestial - hoja de estilos unica
   Los componentes NUNCA usan un color literal: leen --surface-fg / --surface-bg.
   Solo .s-dark / .s-cream / .s-paper cambian ese par, asi cada componente
   se escribe una vez y funciona igual en el landing oscuro y en las paginas claras.
   ========================================================================== */

/* ---------- Fuentes autoalojadas ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/russoone-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/russoone-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens ---------- */
:root{
  --accent:#ECF302;              /* amarillo lima: H1, encabezados sobre oscuro, botones */
  --accent-2:#F3A602;            /* ambar: "10 Capitulos" */
  --ink:#000;
  --paper:#fff;
  --cream:rgba(243,166,2,.42);   /* ambar 42% sobre blanco */
  --card-veil:rgba(0,0,0,.48);
  --link-mail:#CC3366;

  --font-body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Russo One',var(--font-body);

  --radius-btn:10px;
  --radius-btn-sm:3px;
  --wrap-wide:1200px;
  --wrap-text:767px;

  /* contrato de superficie - lo redefinen .s-* */
  --surface-bg:var(--paper);
  --surface-fg:var(--ink);
  --surface-heading:var(--ink);
  --surface-link:var(--link-mail);
}

.s-dark { --surface-bg:var(--ink);   --surface-fg:var(--paper); --surface-heading:var(--accent); --surface-link:var(--accent); }
.s-cream{ --surface-bg:var(--cream); --surface-fg:#333;        --surface-heading:var(--ink); --surface-link:var(--link-mail); }
.s-paper{ --surface-bg:var(--paper); --surface-fg:#333;        --surface-heading:var(--ink); --surface-link:var(--link-mail); }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-body);margin:0 0 .5em;}
h1{font-size:52px;font-weight:600;line-height:1.05;}
h2{font-size:40px;font-weight:600;line-height:1.1;}
h3{font-size:28px;font-weight:400;line-height:1.2;}
p{margin:0 0 1em;}
ul,ol{margin:0 0 1em;padding-left:1.4em;}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.s-paper :focus-visible,.s-cream :focus-visible,.prose :focus-visible{outline-color:var(--ink);}

/* ---------- Layout ---------- */
.section{
  background:var(--surface-bg);
  color:var(--surface-fg);
  padding:64px 20px;
}
.section h1,.section h2{color:var(--surface-heading);}
.wrap{max-width:var(--wrap-wide);margin-inline:auto;}
.wrap--text{max-width:var(--wrap-text);}
.center{text-align:center;}
.stack > * + *{margin-top:24px;}

.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:840px;margin-inline:auto;}
.split{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center;}
.split--top{align-items:start;}
.split img{border-radius:20px;}

/* ---------- Heroe ---------- */
.hero{
  background-image:url(../img/hero-bg.webp);
  background-size:cover;
  background-position:center;
  background-color:var(--ink);
  padding-block:56px 72px;
}
.hero-lead{font-size:20px;line-height:1.5;max-width:820px;margin-inline:auto;}
.hero-img{width:100%;max-width:520px;margin:24px auto 40px;}

/* ---------- Tarjetas ---------- */
.card{
  background:var(--card-veil);
  color:var(--paper);
  padding:28px 24px;
  border-radius:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  text-align:center;
}
.card h2,.card h3{color:var(--paper);margin:0;font-size:28px;font-weight:400;line-height:1.2;}
.card p{margin:0;font-size:18px;}
.card img{margin-inline:auto;}
.qr-img{width:180px;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 24px;
  background:var(--accent);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  border:0;
  border-radius:var(--radius-btn);
  cursor:pointer;
  transition:transform .15s ease,filter .2s ease;
}
.btn--volver{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  border-radius:var(--radius-btn-sm);
}
.btn--sm{font-size:18px;}
.btn--form{font-family:var(--font-display);font-size:18px;font-weight:500;}
.btn--block{width:100%;}

/* ---------- Landing de iman de leads (paginas claras y centradas) ---------- */
.lead{max-width:720px;margin-inline:auto;}
.lead .kicker{text-transform:uppercase;color:#666;}
.lead h1{font-size:38px;font-weight:600;color:var(--ink);}
.lead h2{font-size:28px;font-weight:600;color:var(--ink);margin-top:36px;}
.lead h3{font-size:24px;font-weight:600;color:var(--ink);margin-top:32px;}
.lead p{font-size:18px;}
.lead .list-check li{font-size:18px;}
.lead .form{margin-top:24px;max-width:100%;}
.lead .form input[type=text],.lead .form input[type=email]{border:1px solid #ccc;}
.lead .consent{color:#555;}
.lead .nota{font-size:14px;color:#666;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.btn:active{transform:scale(.98);}

/* ---------- Listas ---------- */
.list-check,.list-cross,.list-plain{list-style:none;padding:0;margin:0;}
.list-check li,.list-cross li,.list-plain li{position:relative;padding-left:32px;margin-bottom:12px;font-size:20px;}
.list-check li::before{content:"\2714";position:absolute;left:0;color:var(--ink);font-weight:700;}
.list-cross li::before{content:"\2716";position:absolute;left:0;color:#FF0000;font-weight:700;}
.list-check--green li::before{color:#61CE70;}
.list-plain li{padding-left:0;}
.heading-amber{color:var(--accent-2);font-size:34px;font-weight:600;}
.heading-sub{font-size:34px;font-weight:600;}

/* ---------- FAQ ---------- */
.faq{margin:0;}
.faq dt{font-weight:700;font-size:20px;margin-top:20px;}
.faq dd{margin:4px 0 0;font-size:20px;}

/* ---------- Formulario (inactivo en fase 1) ---------- */
.form{display:grid;gap:16px;max-width:520px;}
.form label{font-size:16px;font-weight:600;}
.form input[type=text],.form input[type=email]{
  width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;
  border:1px solid rgba(255,255,255,.35);border-radius:4px;background:var(--paper);color:var(--ink);
}
.form select{width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;
  border:1px solid #ccc;border-radius:4px;background:var(--paper);color:var(--ink);}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;}
.form .consent input{margin-top:4px;width:18px;height:18px;flex:none;}
.form .consent a{color:var(--surface-link);}
.form-note{margin:0;font-size:16px;font-weight:600;color:var(--accent);}
.form-note[hidden]{display:none;}

/* ---------- Paginas de texto (legales y gracias) ---------- */
.page-title{font-family:var(--font-display);font-size:22px;font-weight:500;margin:0 0 24px;color:var(--ink);}
.prose{font-size:16px;line-height:1.5;color:var(--ink);}
.prose h2{font-size:16px;font-weight:700;line-height:1.5;margin:24px 0 4px;color:var(--ink);}
.prose h3{font-size:16px;font-weight:600;line-height:1.5;margin:16px 0 4px;}
.prose p{margin:0 0 16px;}
.prose ul{margin:0 0 16px;padding-left:20px;}
.prose li{margin-bottom:4px;}
.prose a[href^="mailto:"]{color:var(--link-mail);}
.thanks{font-size:20px;}
.thanks .page-title{font-size:32px;}
.thanks p{margin:0 0 20px;}

/* ---------- Pie ---------- */
.site-footer{
  background:var(--ink);color:var(--paper);
  padding:32px 20px 48px;text-align:center;font-size:16px;
}
.site-footer a{color:var(--accent);}
.site-footer .disclaimer{margin:12px 0 0;font-size:14px;opacity:.85;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  h1{font-size:40px;}
  h2{font-size:30px;}
  h3{font-size:24px;}
  .heading-amber,.heading-sub{font-size:26px;}
  .btn{font-size:20px;}
  .section{padding:48px 20px;}
}
@media (max-width:600px){
  h1{font-size:34px;}
  h2{font-size:28px;}
  h3{font-size:22px;}
  .heading-amber,.heading-sub{font-size:24px;}
  .hero-lead,.list-check li,.list-cross li,.faq dt,.faq dd,.thanks{font-size:18px;}
  .btn{font-size:18px;padding:12px 18px;}
  .qr-img{width:150px;}
}

@media (hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(1.08);transform:translateY(-2px);}
  .prose a[href^="mailto:"]:hover{text-decoration:underline;}
  .site-footer a:hover{text-decoration:underline;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .btn:hover,.btn:active{transform:none;}
}

/* ---------- Utilidades ---------- */
.mt-24{margin-top:24px;}
.mt-28{margin-top:28px;}
.mt-32{margin-top:32px;}
.kicker{letter-spacing:.08em;font-weight:600;margin-bottom:4px;font-size:16px;}