:root{
  --bg:#ffffff;
  --panel:#f6f7f9;
  --line:#e5e8ee;
  --azul:#0f1e3e;
  --txt:#2a3340;
  --muted:#5d6879;
  --lima:#d5fa9c;         /* fondo de botones */
  --verde:#3f6b00;        /* mismo verde, legible sobre blanco */
  --lima-txt:#0f1e3e;
  --radio:18px;
  /* tipografias calcadas de la referencia */
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;   /* titulares */
  --ui:'Josefin Sans',-apple-system,Helvetica,Arial,sans-serif; /* antetitulo, fecha, botones */
  --fuente:'Bricolage Grotesque',-apple-system,Helvetica,Arial,sans-serif; /* texto corrido */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--fuente);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.barra .wrap{display:flex;align-items:center;gap:18px;height:66px;justify-content:space-between}
.logo{font-family:var(--serif);font-weight:500;font-style:italic;font-size:22px;color:var(--azul);text-decoration:none;flex-shrink:0}
.cuenta{display:flex;gap:12px;align-items:flex-start}
.cuenta div{text-align:center;min-width:44px}
.cuenta b{display:block;font-family:var(--ui);font-size:21px;font-weight:600;line-height:1.1;color:var(--azul);font-variant-numeric:tabular-nums}
.cuenta span{font-family:var(--ui);font-size:9.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

.btn{display:inline-block;font-family:var(--ui);background:var(--lima);color:var(--lima-txt);font-weight:500;font-size:20px;
     padding:14px 24px;border-radius:50px;border:0;text-decoration:none;cursor:pointer;
     transition:transform .12s ease,filter .12s ease;white-space:nowrap;line-height:1.2}
.btn:hover{transform:translateY(-1px);filter:brightness(.97)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.barra .btn{background:var(--azul);color:#fff;font-size:15px;padding:11px 20px}

/* ---------- hero: alineado a la izquierda ---------- */
.hero{padding:60px 0 70px}
.hero .wrap{display:grid;grid-template-columns:400px 1fr;gap:56px;align-items:center;text-align:left}
.hero figure{border-radius:0;overflow:hidden;background:var(--panel);aspect-ratio:400/435}
.hero figure img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}

.ante{font-family:var(--ui);color:var(--verde);font-weight:500;font-size:20px;margin-bottom:14px}
h1{font-family:var(--serif);font-weight:400;font-size:45px;line-height:1.24;letter-spacing:-1.5px;color:var(--txt)}
h1 em{font-style:italic;font-weight:600;color:var(--azul);display:block}
.sub{font-family:var(--ui);color:#080808;font-size:16px;line-height:1.4;margin-top:18px;max-width:46ch}
.cuando{font-family:var(--ui);margin-top:20px;font-size:24px;font-weight:500;color:var(--verde)}
.hero .btn{margin-top:24px}

/* ---------- secciones ---------- */
section{padding:70px 0}
h2{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.24;letter-spacing:-1.5px;color:var(--azul)}
h2 em{font-style:italic;font-weight:600}
.centro{text-align:center}

.aprendes{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:44px}
.aprendes div{text-align:center}
.aprendes div p{font-family:var(--ui);color:#080808;font-size:16px;line-height:22.4px;margin-top:12px}
.ico{width:40px;height:40px;color:var(--azul);margin:0 auto;display:block}

.caja{border-radius:24px;padding:48px 44px;margin-top:28px}
.caja.si{background:var(--panel);border:1px solid var(--line)}
.caja.no{background:var(--azul);color:#eef1f6}
.caja h2{margin-bottom:26px;text-align:left}
.caja.no h2{color:#fff}
.caja ul{list-style:none;max-width:640px}
.caja li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px dashed rgba(15,30,62,.14);font-family:var(--ui);font-size:16px;color:#080808}
.caja.no li{border-bottom-color:rgba(255,255,255,.16);color:#eef1f6}
.caja li:last-child{border-bottom:0}
.sw{flex-shrink:0;width:34px;height:20px;border-radius:999px;position:relative;margin-top:2px}
.sw.on{background:var(--lima)}
.sw.off{background:rgba(255,255,255,.22)}
.sw::after{content:'';position:absolute;top:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.sw.on::after{right:3px;background:var(--azul)}
.sw.off::after{left:3px}

.bio{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:center}
.bio > div{order:1}
.bio .rol{font-family:var(--ui);color:var(--azul);font-weight:500;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 20px}
.bio p{font-family:var(--ui);color:var(--muted);font-size:16px;line-height:1.5;margin-bottom:15px}
.bio figure{border-radius:6px;overflow:hidden;background:var(--panel);aspect-ratio:340/460;order:2}
.bio figure img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

.cierre{background:var(--lima);color:var(--azul);text-align:center;padding:76px 20px}
.cierre h2{color:var(--azul);font-size:52px;text-transform:uppercase;text-align:center}
.cierre .btn{background:var(--azul);color:#fff;margin-top:26px}

footer{padding:38px 20px 58px;text-align:center;border-top:1px solid var(--line);background:var(--panel)}
footer p{font-family:var(--ui);color:var(--muted);font-size:13px;max-width:860px;margin:0 auto 12px}
footer a{color:var(--azul)}

/* ---------- modal ---------- */
.capa{position:fixed;inset:0;background:rgba(15,30,62,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.capa.abierta{display:flex}
.modal{background:#fff;border:1px solid var(--line);border-radius:24px;max-width:480px;width:100%;padding:38px 34px;position:relative;max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(15,30,62,.18)}
.modal h3{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.2;letter-spacing:-1.5px;text-align:center;color:var(--azul)}
.modal .sub2{font-family:var(--ui);color:var(--muted);font-size:16px;text-align:center;margin:10px 0 26px;line-height:1.4}
.cerrar{position:absolute;top:14px;right:18px;background:0;border:0;color:var(--muted);font-size:26px;cursor:pointer;line-height:1}
.modal label{font-family:var(--ui);display:block;font-size:13px;color:var(--muted);margin:0 0 6px}
.modal input[type=text],.modal input[type=email],.modal input[type=tel]{
  width:100%;font-family:var(--ui);background:#fff;border:1px solid #d7dce4;border-radius:12px;color:var(--txt);
  padding:14px 16px;font-size:16px;margin-bottom:16px}
.modal input:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(15,30,62,.08)}
.modal .btn{width:100%;margin-top:4px}
.rgpd{display:flex;gap:11px;align-items:flex-start;margin:4px 0 16px}
.rgpd input{margin-top:4px;accent-color:var(--azul);width:17px;height:17px;flex-shrink:0}
.rgpd span{font-family:var(--ui);font-size:13px;color:var(--muted);line-height:1.45}
.rgpd a{color:var(--azul)}
.legalito{font-family:var(--ui);font-size:12px;color:#8a93a3;margin-top:16px;line-height:1.5}
.err{font-family:var(--ui);color:#c0392b;font-size:14px;margin-top:12px;display:none}
.aviso{font-family:var(--ui);font-size:13px;color:var(--muted);line-height:1.5;margin-top:18px}
.aviso a,.aviso strong{color:var(--azul)}

/* ---------- movil: como ella, la barra entera desaparece ---------- */
@media (max-width:991px){
  .barra{display:none}
  .hero{padding:34px 0 52px}
  .hero .wrap,.bio{grid-template-columns:1fr;gap:26px;text-align:left}
  .hero .wrap > div{order:1}
  .hero figure{order:2;width:100%;max-width:none;margin:0;aspect-ratio:1/1;border-radius:0}
  .bio figure{order:1;width:100%;max-width:300px;margin:0 auto 6px;aspect-ratio:1/1;border-radius:6px}
  .bio > div{order:2}
  h1{font-size:clamp(34px,8.4vw,44px);letter-spacing:-1px}
  h2{font-size:32px;letter-spacing:-1px}
  .cierre h2{font-size:38px}
  .ante{font-size:18px}
  .cuando{font-size:21px}
  .btn{font-size:18px}
  .aprendes{grid-template-columns:1fr 1fr;gap:26px}
  .caja{padding:34px 24px}
  section{padding:52px 0}
}
@media (max-width:520px){
  .aprendes{grid-template-columns:1fr}
}