/* ═══════════════════════════════════════════════
   VisionDeTrader — hoja de estilos
   Paleta tomada del logo: navy · oro · verde alcista
   ═══════════════════════════════════════════════ */

:root{
  /* Marca */
  --navy-900:#0C1B2E;
  --navy-800:#122942;
  --navy-700:#1B3A5C;
  --navy-500:#2C5580;

  --gold-600:#A8801C;
  --gold-500:#C9A227;
  --gold-400:#E0BE4E;

  --green-600:#237A3D;
  --green-500:#2E9E4F;
  --green-400:#4FBE70;

  /* Neutros con leve sesgo azul, para que peguen con el navy */
  --ink:#0E1723;
  --ink-soft:#43536A;
  --line:#DDE3EC;
  --paper:#FFFFFF;
  --paper-alt:#F4F7FB;

  /* Tipografía */
  --f-display:"Sora", "Segoe UI", system-ui, sans-serif;
  --f-body:"Manrope", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;

  --radius:14px;
  --shadow:0 1px 2px rgba(12,27,46,.05), 0 12px 32px -12px rgba(12,27,46,.18);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--f-display);
  line-height:1.12;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0;
}

h1{ font-size:clamp(2.3rem, 5.2vw, 3.9rem); font-weight:800; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:700; }
h3{ font-size:1.16rem; font-weight:700; }

p{ margin:0; }

.wrap{ width:min(1140px, 92vw); margin-inline:auto; }
.narrow{ width:min(760px, 92vw); }

/* ── Etiquetas ── */
.eyebrow{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-400);
  margin-bottom:1.1rem;
}
.eyebrow--dark{ color:var(--gold-600); }

.lead{
  font-size:1.14rem;
  color:#C3D0E0;
  max-width:52ch;
  margin-top:1.4rem;
}
.body{
  color:var(--ink-soft);
  max-width:65ch;
  margin-top:1.1rem;
}
.body strong{ color:var(--ink); }

/* ═══ BOTONES ═══ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:var(--f-display);
  font-weight:700;
  font-size:.97rem;
  letter-spacing:-.01em;
  padding:.92rem 1.7rem;
  border-radius:10px;
  border:1.5px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--gold-400); outline-offset:3px; }

.btn--gold{
  background:linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color:var(--navy-900);
  box-shadow:0 8px 22px -8px rgba(201,162,39,.7);
}
.btn--gold:hover{ box-shadow:0 14px 30px -10px rgba(201,162,39,.85); }

.btn--ghost{
  border-color:rgba(255,255,255,.32);
  color:#fff;
  background:transparent;
}
.btn--ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.55); }

.btn--ghost-light{
  border-color:rgba(255,255,255,.28);
  color:#fff;
  background:rgba(255,255,255,.05);
}
.btn--ghost-light:hover{ background:rgba(255,255,255,.13); }

.btn--sm{ padding:.62rem 1.15rem; font-size:.88rem; }
.btn--lg{ padding:1.1rem 2.4rem; font-size:1.06rem; }

/* ═══ NAV ═══ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(12,27,46,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nav__inner{
  display:flex; align-items:center; gap:2rem;
  min-height:70px;
}
.nav__links{
  display:flex; gap:1.7rem;
  margin-left:auto;
  font-size:.93rem; font-weight:500;
}
.nav__links a{
  color:#B9C7D8; text-decoration:none;
  transition:color .16s ease;
}
.nav__links a:hover{ color:var(--gold-400); }

.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand__mark{
  width:40px; height:40px; border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1.5px rgba(224,190,78,.45);
}
.brand__name{
  font-family:var(--f-display); font-weight:800;
  font-size:1.06rem; letter-spacing:-.02em;
  color:#fff;
}
.brand__name em{ font-style:normal; color:var(--gold-400); }

/* ═══ HERO ═══ */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 480px at 78% 22%, rgba(46,158,79,.20), transparent 62%),
    radial-gradient(700px 420px at 12% 78%, rgba(201,162,39,.16), transparent 60%),
    linear-gradient(165deg, var(--navy-900), var(--navy-800) 55%, #0A1725);
  color:#fff;
  padding:clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

/* Fondo de "velas" dibujado con CSS, sin imágenes externas */
.hero__chart{
  position:absolute; inset:auto 0 0 0; height:52%;
  opacity:.16;
  background-image:
    linear-gradient(to top, var(--green-400) 0 100%),
    linear-gradient(to top, var(--green-400) 0 100%),
    linear-gradient(to top, var(--gold-400) 0 100%),
    linear-gradient(to top, var(--green-400) 0 100%),
    linear-gradient(to top, var(--gold-400) 0 100%),
    linear-gradient(to top, var(--green-400) 0 100%),
    linear-gradient(to top, var(--green-400) 0 100%),
    linear-gradient(to top, var(--gold-400) 0 100%),
    linear-gradient(to top, var(--green-400) 0 100%);
  background-repeat:no-repeat;
  background-size:
    22px 32%, 22px 46%, 22px 38%, 22px 62%,
    22px 50%, 22px 74%, 22px 60%, 22px 84%, 22px 96%;
  background-position:
    4% 100%, 13% 100%, 22% 100%, 31% 100%,
    40% 100%, 52% 100%, 64% 100%, 76% 100%, 88% 100%;
  pointer-events:none;
}

.hero__inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3.5rem;
  align-items:center;
}
.hero h1 em{ font-style:normal; color:var(--gold-400); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem; }

.hero__facts{
  display:flex; gap:2.6rem;
  list-style:none; margin:2.8rem 0 0; padding:2rem 0 0;
  border-top:1px solid rgba(255,255,255,.13);
}
.hero__facts li{ display:flex; flex-direction:column; }
.hero__facts strong{
  font-family:var(--f-mono); font-size:1.75rem; font-weight:600;
  color:var(--gold-400); font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.hero__facts span{ font-size:.83rem; color:#9DB0C6; letter-spacing:.03em; }

.hero__visual{ display:flex; justify-content:center; }
.hero__logo{
  width:min(340px, 78%);
  border-radius:50%;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.5));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* ═══ BARRA DE VALOR ═══ */
.strip{ background:var(--navy-700); color:#DDE7F2; }
.strip__inner{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 3rem;
  padding:1.05rem 0;
  font-size:.92rem; font-weight:500;
}
.strip__item{ display:flex; align-items:center; gap:.55rem; }
.strip__ico{ color:var(--gold-400); font-size:.7rem; }

/* ═══ SECCIONES ═══ */
.section{ padding:clamp(3.5rem, 7vw, 6rem) 0; }
.section--alt{ background:var(--paper-alt); }
.section--dark{
  background:linear-gradient(170deg, var(--navy-900), var(--navy-800));
  color:#fff;
}
.section__head{ margin-bottom:3rem; max-width:62ch; }
.section__head--light .body{ color:#B9C7D8; }

/* ═══ MÓDULOS ═══ */
.modules{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr));
  gap:1.15rem;
}
.module{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.9rem 1.7rem;
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.module:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--gold-400);
}
.module__n{
  font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  letter-spacing:.1em; color:var(--gold-600);
  display:block; margin-bottom:.85rem;
}
.module h3{ margin-bottom:.6rem; }
.module p{ color:var(--ink-soft); font-size:.96rem; }

/* Número de capítulo con su rango de páginas */
.module__n em{
  font-style:normal;
  color:var(--ink-soft);
  font-weight:500;
  letter-spacing:.04em;
}
.module--anexo{ background:var(--paper-alt); }
.module--anexo .module__n{ color:var(--green-600); }
.module--anexo .module__n em{ color:var(--ink-soft); }
.module--anexo:hover{ border-color:var(--green-500); }

/* ═══ PARA QUIÉN ═══ */
.cols{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(310px,1fr));
  gap:1.3rem;
}
.card{
  border-radius:var(--radius);
  padding:2rem 1.85rem;
  border:1px solid var(--line);
  background:var(--paper);
}
.card h3{ margin-bottom:1.1rem; }
.card ul{ margin:0; padding:0; list-style:none; display:grid; gap:.75rem; }
.card li{
  position:relative; padding-left:1.75rem;
  color:var(--ink-soft); font-size:.96rem;
}
.card li::before{
  position:absolute; left:0; top:-.05em;
  font-weight:700; font-size:1.05rem;
}
.card--yes{ border-top:3px solid var(--green-500); }
.card--yes li::before{ content:"✓"; color:var(--green-600); }
.card--no{ border-top:3px solid #C4553F; }
.card--no li::before{ content:"×"; color:#C4553F; font-size:1.25rem; }

/* ═══ PLANES ═══ */
.plans{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:1.5rem; align-items:start;
}
.plan{
  position:relative;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:2.2rem 1.9rem;
}
.plan--featured{
  background:rgba(201,162,39,.09);
  border-color:var(--gold-500);
  box-shadow:0 22px 50px -22px rgba(201,162,39,.55);
}
.plan__tag{
  position:absolute; top:-.75rem; left:1.9rem;
  background:linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color:var(--navy-900);
  font-family:var(--f-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.32rem .8rem; border-radius:99px;
}
.plan__name{ font-size:1.28rem; }
.plan__desc{ color:#A9BACE; font-size:.93rem; margin-top:.35rem; }
.plan__price{
  font-family:var(--f-mono); font-weight:600;
  font-size:2.9rem; color:var(--gold-400);
  font-variant-numeric:tabular-nums;
  margin:1.4rem 0 1.6rem;
  line-height:1;
}
.plan__price .cur{ font-size:.95rem; color:#8FA3BA; margin-right:.4rem; letter-spacing:.06em; }
.plan__list{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.7rem; }
.plan__list li{
  position:relative; padding-left:1.6rem;
  color:#C6D3E2; font-size:.95rem;
}
.plan__list li::before{
  content:"✓"; position:absolute; left:0;
  color:var(--green-400); font-weight:700;
}
.plan__btn{ width:100%; }

.guarantee{
  text-align:center; margin-top:2.6rem;
  color:#A9BACE; font-size:.95rem;
}
.guarantee strong{ color:var(--gold-400); }

/* ═══ FAQ ═══ */
.faq{
  border-bottom:1px solid var(--line);
  padding:.35rem 0;
}
.faq summary{
  cursor:pointer; list-style:none;
  font-family:var(--f-display); font-weight:600; font-size:1.03rem;
  padding:1.15rem 2.5rem 1.15rem 0;
  position:relative;
  transition:color .16s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-600); }
.faq summary:focus-visible{ outline:3px solid var(--gold-400); outline-offset:3px; border-radius:6px; }
.faq summary::after{
  content:"+";
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  font-family:var(--f-mono); font-size:1.4rem; font-weight:500;
  color:var(--gold-600);
  transition:transform .2s ease;
}
.faq[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq p{ color:var(--ink-soft); font-size:.97rem; padding:0 2.5rem 1.35rem 0; margin:0; }

/* ═══ CTA FINAL ═══ */
.final{
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(46,158,79,.20), transparent 65%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color:#fff;
  text-align:center;
  padding:clamp(3.5rem, 7vw, 5.5rem) 0;
}
.final__inner{ display:grid; justify-items:center; gap:2rem; }
.final__note{ color:#93A7BE; font-size:.88rem; margin:0; }

/* ═══ FOOTER ═══ */
.foot{ background:var(--navy-900); color:#93A7BE; padding:3rem 0 2.2rem; font-size:.9rem; }
.foot__top{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
  padding-bottom:1.9rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.brand--foot .brand__mark{ width:34px; height:34px; }
.foot__links{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.foot__links a{ color:#93A7BE; text-decoration:none; transition:color .16s ease; }
.foot__links a:hover{ color:var(--gold-400); }

.disclaimer{
  margin:1.9rem 0 0;
  font-size:.79rem; line-height:1.7;
  color:#67788F; max-width:88ch;
}
.disclaimer strong{ color:#93A7BE; }
.copy{ margin-top:1.6rem; font-size:.8rem; color:#556A82; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:880px){
  .hero__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .hero__visual{ order:-1; }
  .hero__logo{ width:min(230px, 60%); }
  .nav__links{ display:none; }
  .hero__facts{ gap:1.8rem; }
}
@media (max-width:520px){
  body{ font-size:16px; }
  .strip__inner{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .foot__top{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════
   COMPONENTES DEL LIBRO
   ═══════════════════════════════════════════════ */

.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;
}

/* ═══ PORTADA DEL LIBRO ═══ */
/* Sin animación ni rotación en hover: el libro flotando se movía debajo del
   cursor, eso encendía y apagaba el :hover y quedaba temblando. Queda fija. */
.book{
  --book-w:300px;
  width:var(--book-w);
  max-width:100%;
}
.book--sm{ --book-w:230px; }

.book__cover{
  position:relative;
  aspect-ratio:2 / 3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem;
  padding:2.2rem 1.5rem;
  text-align:center;
  border-radius:4px 10px 10px 4px;
  background:
    linear-gradient(155deg, rgba(224,190,78,.16), transparent 46%),
    linear-gradient(170deg, var(--navy-800), var(--navy-900));
  box-shadow:
    inset 10px 0 16px -11px rgba(0,0,0,.9),   /* sombra del lomo */
    inset -1px 0 0 rgba(255,255,255,.06),
    0 30px 64px -26px rgba(0,0,0,.7);
}
/* Lomo */
.book__cover::before{
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:11px;
  border-radius:4px 0 0 4px;
  background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(255,255,255,.07));
  pointer-events:none;
}
/* Filo de páginas */
.book__cover::after{
  content:"";
  position:absolute; top:3px; bottom:3px; right:-6px; width:6px;
  border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(to bottom, #F3F5F8 0 2px, #C7D0DC 2px 3px);
  pointer-events:none;
}

.book__mark{
  width:78px; height:78px; border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(224,190,78,.5);
}
.book__kicker{
  font-family:var(--f-mono); font-size:.56rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-400);
}
.book__title{
  font-family:var(--f-display); font-weight:800;
  font-size:calc(var(--book-w) * .125); line-height:1.08;
  letter-spacing:-.02em; color:#fff;
}
.book__rule{ width:44px; height:2px; background:var(--gold-500); }
.book__sub{
  font-size:.74rem; line-height:1.5; color:#A9BACE;
  max-width:20ch;
}

/* ═══ MUESTRA GRATIS ═══ */
.sample{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:3.5rem; align-items:center;
}
.sample__page{ margin:0; }
.sample__paper{
  background:#FDFCF8;
  border:1px solid var(--line);
  border-radius:4px;
  padding:2.3rem 2.1rem 3.6rem;
  box-shadow:
    0 1px 0 #fff, 0 2px 0 var(--line),
    0 3px 0 #fff, 0 4px 0 var(--line),
    0 22px 42px -20px rgba(12,27,46,.35);
  position:relative;
  transform:rotate(-1.1deg);
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
}
.sample__n{
  font-family:var(--f-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600);
  display:block; margin-bottom:.9rem;
}
.sample__paper h3{ font-size:1.4rem; margin-bottom:1rem; }
.sample__paper p{
  color:var(--ink-soft); font-size:.95rem; line-height:1.8;
  margin-bottom:.9rem;
}
.sample__paper em{ color:var(--ink); font-style:italic; }
.sample__page figcaption{
  text-align:center; margin-top:1.1rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ═══ CAPTURA DE MAIL ═══ */
.lead-form{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:1.8rem;
}
.lead-form__input{
  flex:1 1 240px;
  font-family:var(--f-body); font-size:1rem;
  padding:.92rem 1.1rem;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.lead-form__input::placeholder{ color:#93A0B2; }
.lead-form__input:focus{
  outline:none;
  border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(201,162,39,.2);
}
.lead-form__note{
  margin-top:.75rem;
  font-size:.82rem; color:var(--ink-soft);
}

/* ═══ OFERTA ÚNICA ═══ */
.offer__head{ text-align:center; margin-inline:auto; }
.offer{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:3.5rem; align-items:center;
  max-width:900px; margin-inline:auto;
}
.offer__visual{ display:flex; justify-content:center; }
.offer__plan{ margin:0; }
.offer__pay{
  text-align:center; margin-top:.9rem;
  font-size:.82rem; color:#8FA3BA;
}

/* ═══ BARRA DE COMPRA MÓVIL ═══ */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem clamp(1rem, 4vw, 1.4rem);
  background:rgba(12,27,46,.96);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(224,190,78,.28);
  box-shadow:0 -10px 30px -12px rgba(0,0,0,.6);
}
.buybar[hidden]{ display:none; }
.buybar__info{ display:flex; flex-direction:column; line-height:1.3; }
.buybar__info strong{
  font-family:var(--f-display); font-size:.92rem; color:#fff;
}
.buybar__info span{
  font-family:var(--f-mono); font-size:.76rem; color:var(--gold-400);
}
.buybar .btn{ margin-left:auto; white-space:nowrap; }

@media (min-width:721px){
  .buybar{ display:none !important; }
}

/* ═══ RESPONSIVE DE LO NUEVO ═══ */
@media (max-width:880px){
  .sample{ grid-template-columns:1fr; gap:2.5rem; }
  .sample__page{ order:-1; }
  .offer{ grid-template-columns:1fr; gap:2.5rem; }
  .book{ --book-w:250px; }
}
@media (max-width:720px){
  body{ padding-bottom:74px; }  /* espacio para la barra de compra */
}
@media (max-width:520px){
  .book{ --book-w:210px; }
  .lead-form .btn{ width:100%; }
}

/* ═══════════════════════════════════════════════
   SITIO MULTIPÁGINA
   ═══════════════════════════════════════════════ */

/* ── Nav: estado activo y menú móvil ── */
.nav__links a.is-active{ color:var(--gold-400); }
.nav__cta{ margin-left:1.4rem; }

.nav__toggle{
  display:none;
  margin-left:auto;
  width:42px; height:42px;
  padding:0;
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  cursor:pointer;
}
.nav__toggle span{
  display:block; width:18px; height:2px;
  margin:3.5px auto;
  background:#fff; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav__toggle.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ── Cabecera de páginas interiores ── */
.phero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(800px 420px at 80% 25%, rgba(46,158,79,.18), transparent 62%),
    radial-gradient(600px 380px at 10% 80%, rgba(201,162,39,.14), transparent 60%),
    linear-gradient(165deg, var(--navy-900), var(--navy-800) 58%, #0A1725);
  color:#fff;
  padding:clamp(3rem, 6.5vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.phero__chart{
  position:absolute; inset:auto 0 0 0; height:48%;
  opacity:.14;
  background-image:
    linear-gradient(to top, var(--green-400) 0 100%),
    linear-gradient(to top, var(--gold-400) 0 100%),
    linear-gradient(to top, var(--green-400) 0 100%),
    linear-gradient(to top, var(--gold-400) 0 100%),
    linear-gradient(to top, var(--green-400) 0 100%),
    linear-gradient(to top, var(--green-400) 0 100%);
  background-repeat:no-repeat;
  background-size:22px 40%, 22px 58%, 22px 46%, 22px 72%, 22px 60%, 22px 90%;
  background-position:8% 100%, 22% 100%, 38% 100%, 56% 100%, 72% 100%, 88% 100%;
  pointer-events:none;
}
.phero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:3.5rem; align-items:center;
}
.phero h1{ font-size:clamp(2.1rem, 4.6vw, 3.3rem); }
.phero--sm{ padding:clamp(2.6rem, 5vw, 3.8rem) 0; }
.phero--sm .lead{ margin-top:1.1rem; }

/* ── Texto largo (artículos, sobre mí) ── */
.prose h2{
  font-size:1.5rem;
  margin:2.6rem 0 .9rem;
}
.prose h2:first-child{ margin-top:0; }
.prose p{
  color:var(--ink-soft);
  margin-bottom:1.15rem;
  max-width:68ch;
}
.prose p strong{ color:var(--ink); }
.prose em{ color:var(--ink); }
.prose ul, .prose ol{
  color:var(--ink-soft);
  max-width:68ch;
  margin:0 0 1.6rem;
  padding-left:1.3rem;
}
.prose li{ margin-bottom:.55rem; }
.prose li strong{ color:var(--ink); }

/* ── Listado del blog ── */
.posts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:1.3rem;
}
.post{
  display:block;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.9rem 1.7rem;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--gold-400);
}
.post__cat{
  font-family:var(--f-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600);
  display:block; margin-bottom:.85rem;
}
.post h3{ color:var(--ink); margin-bottom:.65rem; }
.post p{ color:var(--ink-soft); font-size:.96rem; margin-bottom:1.1rem; }
.post__more{
  font-family:var(--f-display); font-weight:700; font-size:.9rem;
  color:var(--gold-600);
}
.post--pronto{
  opacity:.62;
  background:var(--paper-alt);
  cursor:default;
}
.post--pronto:hover{
  transform:none; box-shadow:none; border-color:var(--line);
}
.post--pronto .post__more{ color:var(--ink-soft); }

/* ── Foto de Sobre mí ── */
.avatar{
  width:min(300px, 80%);
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 2px rgba(224,190,78,.4), 0 26px 60px -24px rgba(0,0,0,.6);
}
.avatar--vacio{
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05);
  border:2px dashed rgba(224,190,78,.4);
  color:#8FA3BA;
  font-family:var(--f-mono); font-size:.85rem;
  text-align:center;
}

/* ── Contacto ── */
.contacto{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:1.3rem;
}
.contacto__item{
  border:1px solid var(--line);
  border-top:3px solid var(--gold-500);
  border-radius:var(--radius);
  padding:2rem 1.85rem;
  display:flex; flex-direction:column; align-items:flex-start;
}
.contacto__item .body{ margin-bottom:1.5rem; flex:1; }
.btn--oscuro{ border-color:var(--line); color:var(--ink); }
.btn--oscuro:hover{ background:var(--paper-alt); border-color:var(--gold-500); }

.contacto--solo{ grid-template-columns:minmax(0, 560px); justify-content:center; }

.aviso{
  margin-top:2.5rem;
  background:var(--paper-alt);
  border-left:3px solid var(--gold-500);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.8rem 1.7rem;
}
.aviso h3{ margin-bottom:1rem; }
.aviso p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:.9rem; }
.aviso p:last-child{ margin-bottom:0; }
.aviso strong{ color:var(--ink); }

/* ── Formulario centrado ── */
.lead-form--centro{ justify-content:center; max-width:520px; margin-inline:auto; }

/* ── Footer en columnas ── */
.foot__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.2rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.foot__tag{ margin-top:1rem; font-size:.88rem; max-width:30ch; }
.foot__col h4{
  font-family:var(--f-display); font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:#fff; margin:0 0 1.1rem;
}
.foot__col a{
  display:block; margin-bottom:.6rem;
  color:#93A7BE; text-decoration:none; font-size:.9rem;
  transition:color .16s ease;
}
.foot__col a:hover{ color:var(--gold-400); }

/* ── Responsive ── */
@media (max-width:980px){
  .foot__grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:880px){
  .phero__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .phero .hero__visual{ order:-1; }

  .nav__toggle{ display:block; }
  .nav__cta{ display:none; }
  .nav__inner{ flex-wrap:wrap; gap:1rem; }
  .nav__links{
    display:none;
    order:3;
    width:100%;
    flex-direction:column; gap:0;
    margin-left:0;
    padding-bottom:.8rem;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{
    padding:.85rem 0;
    border-top:1px solid rgba(255,255,255,.09);
    font-size:1rem;
  }
}
@media (max-width:520px){
  .foot__grid{ grid-template-columns:1fr; gap:1.8rem; }
}

/* ═══ El CSS de Hotmart pinta su botón de verde. Acá lo neutralizamos
       para que el botón de compra siga siendo el dorado de la marca.
       La clase .hotmart-fb queda porque es la que engancha el widget. ═══ */
.btn.hotmart-fb,
.btn.hotmart-fb:link,
.btn.hotmart-fb:visited,
a.hotmart-fb.btn--gold{
  background:linear-gradient(180deg, var(--gold-400), var(--gold-500)) !important;
  color:var(--navy-900) !important;
  border:1.5px solid transparent !important;
  border-radius:10px !important;
  font-family:var(--f-display) !important;
  font-weight:700 !important;
  font-size:.97rem !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  text-decoration:none !important;
  text-shadow:none !important;
  padding:.92rem 1.7rem !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  line-height:1.2 !important;
  box-shadow:0 8px 22px -8px rgba(201,162,39,.7) !important;
}
.btn.hotmart-fb:hover{
  background:linear-gradient(180deg, var(--gold-400), var(--gold-500)) !important;
  color:var(--navy-900) !important;
  box-shadow:0 14px 30px -10px rgba(201,162,39,.85) !important;
}
/* Por si su hoja mete un ícono o imagen dentro del botón */
.btn.hotmart-fb img{ display:none !important; }


@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}