:root{
  --sage:#636A55; --sage-osc:#525846; --crema:#FBF7F1; --arena:#F4EDE1;
  --dorado:#B58C59; --tinta:#2C2820; --gris:#8C8174; --linea:rgba(90,80,68,.16);
}
*{box-sizing:border-box}
body{margin:0;background:var(--crema);color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;padding-bottom:76px}
a{color:inherit}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;margin:0}

/* Barra superior */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  background:var(--sage);color:var(--crema);padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top))}
.top .marca{font-family:Georgia,serif;font-size:19px;text-decoration:none;flex:1}
.top .marca span{color:var(--dorado)}
.top .volver{text-decoration:none;font-size:20px;opacity:.9}
.plan{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(251,247,241,.16);border-radius:999px;padding:5px 11px}
.plan.pro{background:var(--dorado);color:#fff}

main{padding:18px 16px 24px;max-width:760px;margin:0 auto}

/* Saludo */
.hola{margin-bottom:18px}
.hola h1{font-size:29px;line-height:1.15}
.hola p{margin:6px 0 0;color:var(--gris);font-size:14px}

/* Tarjetas / módulos */
.mods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:620px){.mods{grid-template-columns:repeat(3,1fr)}}
.mod{display:block;text-decoration:none;background:#fff;border:1px solid var(--linea);
  border-radius:18px;padding:16px;box-shadow:0 2px 10px rgba(90,80,68,.06)}
.mod .ico{font-size:24px;display:block;margin-bottom:8px}
.mod h3{font-size:16px;margin-bottom:4px}
.mod p{margin:0;font-size:12.5px;color:var(--gris);line-height:1.45}
.mod.ancho{grid-column:1/-1}
.mod.oscuro{background:var(--sage);border-color:var(--sage);color:var(--crema)}
.mod.oscuro p{color:rgba(251,247,241,.75)}
.mod.pro{background:linear-gradient(135deg,#2C2820,#4A4436);border-color:#2C2820;color:var(--crema);position:relative}
.mod.pro p{color:rgba(251,247,241,.75)}
.mod.pro .tag{position:absolute;top:14px;right:14px;background:var(--dorado);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:4px 9px;border-radius:999px}

/* Bloques de contenido */
.card{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:18px;margin-bottom:14px}
.card h2{font-size:21px;margin-bottom:4px}
.eyebrow{color:var(--dorado);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.card p{line-height:1.62;font-size:15px;margin:0 0 10px}
.muted{color:var(--gris);font-size:13.5px}

/* Paleta */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;margin:10px 0 4px}
.sw{border-radius:12px;aspect-ratio:1;border:1px solid rgba(0,0,0,.06);position:relative}
.sw code{position:absolute;left:0;right:0;bottom:-17px;text-align:center;font-size:9px;color:var(--gris)}
.grupo{margin-bottom:26px}
.grupo h3{font-size:14px;letter-spacing:.04em;margin-bottom:4px}
.grupo .muted{font-size:12.5px}

.rueda{width:100%;border-radius:16px;border:1px solid var(--linea);background:#fff}

/* DISC */
.disc{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.disc div{background:var(--arena);border-radius:12px;padding:12px 4px;text-align:center}
.disc strong{display:block;font-family:Georgia,serif;font-size:22px}
.disc span{font-size:11px;color:var(--gris);font-weight:800}
.disc .on{color:#fff}
.disc .on span{color:rgba(255,255,255,.8)}
.barra{height:8px;background:var(--arena);border-radius:999px;overflow:hidden;margin-top:6px}
.barra i{display:block;height:100%;border-radius:999px}

/* Listas */
.lista{list-style:none;padding:0;margin:8px 0 0}
.lista li{padding:9px 0 9px 26px;position:relative;font-size:14.5px;line-height:1.5;border-bottom:1px solid var(--linea)}
.lista li:last-child{border-bottom:0}
.lista li::before{content:"✓";position:absolute;left:0;color:var(--dorado);font-weight:700}

/* Botones */
.btn{display:block;text-align:center;text-decoration:none;background:var(--sage);color:var(--crema);
  font-weight:700;font-size:15px;padding:15px;border-radius:14px;border:0;width:100%;cursor:pointer}
.btn.oro{background:var(--dorado)}
.btn.linea{background:transparent;border:1.5px solid var(--sage);color:var(--sage)}
.btn+.btn{margin-top:10px}

/* Aviso */
.aviso{background:var(--arena);border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.55}

/* Tab bar */
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);z-index:20}
.tabbar a{flex:1;text-align:center;text-decoration:none;color:var(--gris);font-size:17px;padding:9px 2px 7px;min-width:0}
.tabbar a span{display:block;font-size:9.5px;font-weight:700;margin-top:2px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabbar a.on{color:var(--sage-osc)}
.tabbar a.on span{color:var(--sage-osc)}

/* Portada pública */
.portada{text-align:center;padding:22px 4px 8px}
.portada .eyebrow{letter-spacing:.18em}
.portada h1{font-size:44px;margin:6px 0 10px}
.portada .lead{color:var(--gris);font-size:16px;line-height:1.6;max-width:30ch;margin:0 auto 20px}
.portada .btn{max-width:340px;margin:0 auto 10px}
.lista em{color:var(--dorado);font-style:normal;font-weight:700}

/* ── Hero de portada (wallpaper Brand You) ── */
.hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:-18px;
  min-height:88vh;min-height:88svh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  background:#4E5544 url('img/hero-movil.jpg') center/cover no-repeat}
@media(min-width:700px){
  .hero{background-image:url('img/hero.jpg');min-height:82vh;border-radius:0}
}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(44,40,32,.30) 0%,rgba(44,40,32,.12) 38%,rgba(44,40,32,.62) 100%)}
.hero-in{position:relative;z-index:2;padding:44px 26px;max-width:520px;width:100%}
.hero-logo{width:230px;max-width:62%;height:auto;margin:0 auto 18px;display:block;
  filter:drop-shadow(0 2px 12px rgba(30,28,22,.45))}
.hero h1{font-size:52px;line-height:1;color:var(--crema);margin:0;
  text-shadow:0 2px 18px rgba(30,28,22,.45)}
.hero-rule{width:64px;height:1.5px;background:var(--dorado);margin:16px auto}
.hero-lead{color:var(--crema);font-size:18px;line-height:1.5;margin:0 0 6px;
  font-family:Georgia,serif;font-style:italic;text-shadow:0 1px 10px rgba(30,28,22,.5)}
.hero-sub{color:#E4DCCB;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 26px;text-shadow:0 1px 8px rgba(30,28,22,.5)}
.hero-btn{background:var(--crema);color:var(--sage-osc);max-width:330px;margin:0 auto;
  box-shadow:0 8px 26px rgba(24,22,16,.30)}
.hero-alt{display:inline-block;margin-top:16px;color:#EDE6D8;font-size:13.5px;font-weight:700;
  text-decoration:none;border-bottom:1px solid rgba(237,230,216,.45);padding-bottom:2px;
  text-shadow:0 1px 8px rgba(30,28,22,.5)}

/* Barra superior transparente sobre el hero (solo portada pública) */
.top-hero{position:absolute;top:0;left:0;right:0;background:transparent;
  text-shadow:0 1px 10px rgba(30,28,22,.5)}
.top-hero+main .hero{margin-top:0;min-height:100vh;min-height:100svh}
body:has(.top-hero){padding-bottom:0}

/* ── Login ── */
.top .salir{font-size:11px;font-weight:700;color:rgba(251,247,241,.8);text-decoration:none;margin-left:4px}
.hero-login{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center}
.hero-login::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(30,32,20,.45),rgba(30,32,20,0))}   /* legibilidad de la barra superior */
.hero-login .hero-in{max-width:440px;padding-top:70px;padding-bottom:40px}
.hero-login .hero-lead{margin-bottom:4px}
.hero-login .hero-sub{margin-bottom:18px;letter-spacing:.12em;white-space:nowrap}
.hero-login .login-card{margin-top:0}
body:has(.hero-login){background:#7A8459}            /* sin banda crema si la pantalla es más alta que el hero */
body:has(.hero-login) main{padding:0;max-width:none}
.top-hero .marca{text-shadow:0 1px 14px rgba(20,22,12,.75)}
@media (max-width:420px){ .hero-login .hero-sub{white-space:normal} }
.login-card{background:rgba(251,247,241,.96);border-radius:20px;padding:22px 20px;text-align:left;
  box-shadow:0 14px 40px rgba(24,22,16,.35);margin-top:8px}
.login-card label{display:block;font-size:12px;font-weight:800;color:var(--gris);letter-spacing:.04em;margin:12px 0 5px}
.login-card input{width:100%;padding:13px 14px;border:1.5px solid var(--linea);border-radius:12px;font-size:16px;
  background:#fff;font-family:inherit;color:var(--tinta)}
.login-card input:focus{outline:none;border-color:var(--sage)}
.login-card .btn{margin-top:18px}
.login-links{text-align:center;font-size:13px;margin:16px 0 0;color:var(--gris)}
.login-links a{color:var(--sage-osc);font-weight:700;text-decoration:none}
.login-links span{margin:0 8px}
.aviso.error{background:#F7DED7;color:#9B3B26;margin-top:8px}

/* ═══════════════════════════════════════════════════════════
   Los 5 capítulos · portada
   ═══════════════════════════════════════════════════════════ */
.saludo{margin:6px 0 26px}
.saludo h1{font-family:Georgia,serif;font-size:30px;line-height:1.15;margin:0 0 6px;font-weight:400}
.saludo p{color:var(--gris);margin:0;font-size:15px}
.saludo .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{font-size:12px;font-weight:700;letter-spacing:.03em;background:#fff;border:1px solid var(--linea);
  border-radius:999px;padding:6px 13px;color:var(--sage-osc)}
.chip.tono{background:var(--sage);color:var(--crema);border-color:transparent}

.caps{display:grid;gap:14px;margin-bottom:22px}
.cap{display:block;position:relative;background:#fff;border:1px solid var(--linea);border-radius:18px;
  padding:20px 20px 18px;text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.cap:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(24,22,16,.10);border-color:#D6CFC2}
.cap:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.cap .num{font-family:Georgia,serif;font-size:13px;color:var(--dorado);letter-spacing:.14em}
.cap h3{font-family:Georgia,serif;font-size:21px;font-weight:400;margin:6px 0 6px;line-height:1.2}
.cap p{margin:0;color:var(--gris);font-size:14.5px;line-height:1.5}
.cap .tiras{display:flex;gap:0;margin-top:15px;border-radius:7px;overflow:hidden;height:9px}
.cap .tiras i{flex:1;display:block}
.cap .ir{position:absolute;right:18px;top:20px;color:var(--sage);font-size:19px;opacity:.55;transition:transform .18s}
.cap:hover .ir{transform:translateX(3px);opacity:1}

.cap-extra{display:grid;gap:14px;margin-bottom:26px}
.cap-pdf{background:var(--sage);color:var(--crema);border-color:transparent}
.cap-pdf h3,.cap-pdf .num{color:var(--crema)}
.cap-pdf p{color:rgba(251,247,241,.82)}
.cap-pdf .ir{color:var(--crema)}
.cap-pro{border-style:dashed}
.cap-pro .num{color:var(--sage-osc)}

/* ── Detalle de módulo ── */
.det-hero{margin:2px 0 24px}
.det-hero .eyebrow{margin-bottom:8px}
.det-hero h1{font-family:Georgia,serif;font-size:28px;font-weight:400;margin:0 0 8px;line-height:1.18}
.det-hero p{color:var(--gris);margin:0;font-size:15.5px;max-width:62ch}

.bloques{display:grid;gap:16px}
.bloque{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:20px}
.bloque h2{font-family:Georgia,serif;font-size:19px;font-weight:400;margin:0 0 4px}
.bloque .sub{color:var(--gris);font-size:14px;margin:0 0 14px}
.bloque .ico{font-size:22px;line-height:1;margin-bottom:8px;display:block}
.bloque ul{margin:0;padding-left:18px;color:var(--tinta);font-size:15px;line-height:1.65}
.bloque .nota{margin:13px 0 0;font-size:13.5px;color:var(--gris);border-left:2px solid var(--sage);padding-left:11px}
.franja{display:flex;height:34px;border-radius:9px;overflow:hidden;margin-top:13px}
.franja i{flex:1}
.formula{background:var(--crema);border-radius:11px;padding:13px 15px;font-size:14.5px;margin:11px 0 0;line-height:1.55}
.formula b{color:var(--sage-osc)}

/* ═══════════════════════════════════════════════════════════
   Escritorio
   ═══════════════════════════════════════════════════════════ */
@media (min-width:760px){
  main{max-width:1120px;padding:30px 30px 60px}
  .saludo{margin:14px 0 34px}
  .saludo h1{font-size:40px}
  .saludo p{font-size:16.5px}
  .caps{grid-template-columns:repeat(3,1fr);gap:18px}
  .cap{padding:24px 24px 22px}
  .cap h3{font-size:22px}
  .cap-extra{grid-template-columns:2fr 1fr;gap:18px}
  .det-hero h1{font-size:38px}
  .det-hero p{font-size:17px}
  .bloques{grid-template-columns:repeat(2,1fr);gap:20px}
  .bloque{padding:24px}
  .bloque.ancho{grid-column:1/-1}
  .tabbar{display:none}
  body{padding-bottom:0}
  .top{padding:16px 30px}
  .top .marca{font-size:21px}
  .top nav.desk{display:flex;gap:22px;align-items:center;margin-right:6px}
  .top nav.desk a{color:rgba(251,247,241,.86);text-decoration:none;font-size:14px;font-weight:600;
    padding:6px 0;border-bottom:2px solid transparent}
  .top nav.desk a:hover{color:var(--crema)}
  .top nav.desk a.on{color:var(--crema);border-bottom-color:var(--dorado)}
}
@media (max-width:759px){ .top nav.desk{display:none} }

@media (min-width:1000px){
  .caps{gap:20px}
  .bloques{grid-template-columns:repeat(3,1fr)}
  .bloque.medio{grid-column:span 2}
}
.sec-t{font-family:Georgia,serif;font-size:22px;font-weight:400;margin:32px 0 14px}
@media (min-width:760px){ .sec-t{font-size:26px;margin:44px 0 18px} }

/* Pestañas del acceso: contraseña / enlace por correo */
.modos{display:flex;background:rgba(24,22,16,.07);border-radius:999px;padding:4px;margin:0 0 14px}
.modos a{flex:1;text-align:center;text-decoration:none;font-size:13px;font-weight:700;color:var(--gris);
  padding:9px 8px;border-radius:999px;transition:background .15s,color .15s}
.modos a.on{background:#fff;color:var(--sage-osc);box-shadow:0 2px 8px rgba(24,22,16,.10)}

/* Colores universales (nombre bajo cada muestra) */
.swatches.universales{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px}
.sw-u .sw{aspect-ratio:1.15}
.sw-nombre{font-size:11.5px;font-weight:700;color:var(--gris);text-align:center;margin-top:5px;line-height:1.25}
@media (min-width:760px){ .swatches.universales{grid-template-columns:repeat(6,1fr)} .sw-nombre{font-size:12.5px} }