/* ══════════════════════════════════════════════════════
   BASE.CSS — Estilos compartidos por TODAS las páginas
   (tokens, reset, layout, tipografía, botones, nav, footer)
   Si cambiás algo acá, se actualiza en index.html, privacidad.html
   y cualquier otra página que use este archivo.
   ══════════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  --navy:        #081c41;
  --navy-90:     rgba(8,28,65,0.9);
  --navy-mid:    #0d2655;
  --blue:        #1d4ed8;
  --blue-light:  #3b82f6;
  --ice:         #eef3fc;
  --ice-mid:     #d5e3f8;
  --white:       #ffffff;
  --off:         #f6f8fd;
  --text:        #0b1930;
  --muted:       #4a5f82;
  --faint:       #8fa3c4;
  --border:      rgba(8,28,65,0.09);
  --border-mid:  rgba(8,28,65,0.15);
  --gold:        #c9963d;
  --gold-bg:     rgba(201,150,61,0.1);
  --r: 14px;
  --r-sm: 8px;
  --shadow-sm: 0 2px 12px rgba(8,28,65,0.07);
  --shadow-md: 0 8px 32px rgba(8,28,65,0.11);
  --shadow-lg: 0 20px 60px rgba(8,28,65,0.16);
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--text);background:var(--white);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ─── LAYOUT ─── */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.section{padding:100px 0}
.section--sm{padding:64px 0}
.section--dark{background:var(--navy)}
.section--ice{background:var(--off)}

/* ─── TYPE ─── */
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif;line-height:1.18;letter-spacing:-0.02em}
h1{font-size:clamp(28px,3.8vw,48px);font-weight:800}
h2{font-size:clamp(30px,4vw,48px);font-weight:700}
h3{font-size:22px;font-weight:600}
h4{font-size:17px;font-weight:600}
p{line-height:1.75;color:var(--muted)}

.eyebrow{
  display:inline-block;
  font-size:16px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-light);
  margin-bottom:14px;
}
.eyebrow--gold{color:var(--gold)}
.eyebrow--faint{color:rgba(255,255,255,0.45)}

/* ─── SECTION HEADER (título + regla + copete) ─── */
.sh{margin-bottom:56px}
.sh--center{text-align:center}
.sh--center .sh-rule{margin:14px auto 0}
.sh h2{color:var(--navy);margin-bottom:12px}
.sh--dark h2{color:#fff}
.sh p{font-size:17px}
.sh--center p{margin:0 auto}
.sh-rule{width:44px;height:3px;background:var(--blue);border-radius:2px;margin-top:14px}

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:var(--r-sm);
  font-size:15px;font-weight:500;
  transition:all .22s;cursor:pointer;
  font-family:'Montserrat',sans-serif;
  white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#1741b0;transform:translateY(-1px);box-shadow:0 8px 28px rgba(29,78,216,.35)}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-mid);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-ghost{background:var(--ice);color:var(--navy);border:1.5px solid var(--border-mid)}
.btn-ghost:hover{background:var(--ice-mid);transform:translateY(-1px)}
.btn-arrow::after{content:'→';transition:transform .2s}
.btn-arrow:hover::after{transform:translateX(4px)}
.btn-udemy{background:#a435f0;color:#fff}
.btn-udemy:hover{background:#8710d8;transform:translateY(-1px);box-shadow:0 8px 28px rgba(164,53,240,.35)}

/* ─── NAV ─── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:66px;display:flex;align-items:center;
  padding:0 28px;
  background:rgba(8,28,65,.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:box-shadow .3s;
}
#nav.scrolled{box-shadow:0 4px 40px rgba(0,0,0,.3)}
.nav-inner{
  max-width:1140px;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
  font-family:'Montserrat',sans-serif;font-size:19px;font-weight:800;
  color:#fff;letter-spacing:-.03em;
  display:flex;align-items:center;gap:10px;
}
.nav-mark{
  width:32px;height:32px;background:var(--blue);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;letter-spacing:-.05em;
}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{
  color:rgba(255,255,255,.65);font-size:14px;font-weight:400;
  padding:7px 14px;border-radius:6px;transition:all .18s;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav-cta{
  background:var(--blue)!important;color:#fff!important;
  font-weight:500!important;padding:7px 18px!important;
  border-radius:7px!important;
}
.nav-hamburger{display:none}
.nav-cta:hover{background:#1741b0!important}

/* ─── Nav CTA secundario: "Diagnóstico gratuito" (plateado, contraste con .nav-cta azul) ─── */
.nav-cta-silver{
  background:linear-gradient(135deg, #f4f6f9 0%, #c9cfd9 45%, #eef1f5 100%)!important;
  color:var(--navy)!important;
  font-weight:600!important;padding:7px 18px!important;
  border-radius:7px!important;
  border:1px solid rgba(255,255,255,.5);
}
.nav-cta-silver:hover{
  background:linear-gradient(135deg, #e6e9ee 0%, #b4bbc7 45%, #dfe3e8 100%)!important;
  color:var(--navy)!important;
}

@media(max-width:960px){
  .nav-links.open .nav-cta-gold{
    margin:8px 16px 4px;border-radius:8px !important;
    display:block;text-align:center;
  }
}

/* ─── FOOTER ─── */
footer{background:#040d1c;padding:60px 0 28px}
.footer-grid{
  display:grid;grid-template-columns:200px 1fr 1fr 1fr;gap:48px;
  margin-bottom:44px;
}
.footer-brand p{font-size:13px;color:rgba(255,255,255,.35);margin-top:12px;line-height:1.65}
.fcol h5{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:14px;
}
.flinks{list-style:none;display:flex;flex-direction:column;gap:8px}
.flinks a{font-size:14px;color:rgba(255,255,255,.5);transition:color .15s}
.flinks a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.footer-copy{font-size:13px;color:rgba(255,255,255,.25)}

/* ─── FADE IN (scroll reveal) ─── */
.fi{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fi.v{opacity:1;transform:translateY(0)}
.fi-d1{transition-delay:.1s}.fi-d2{transition-delay:.2s}.fi-d3{transition-delay:.3s}.fi-d4{transition-delay:.4s}

/* ─── RESPONSIVE: NAV + FOOTER (compartido) ─── */
@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}

  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;gap:0;
    position:fixed;top:66px;left:0;right:0;
    background:rgba(8,28,65,.98);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:12px 0;z-index:199;
  }
  .nav-links.open li a{
    display:block;padding:13px 24px;font-size:15px;
    color:rgba(255,255,255,.8);border-radius:0;
  }
  .nav-links.open li a:hover{background:rgba(255,255,255,.07);color:#fff}
  .nav-links.open .nav-cta{
    margin:8px 16px 4px;border-radius:8px !important;
    display:block;text-align:center;
  }
  .nav-hamburger{
    display:flex;flex-direction:column;justify-content:center;
    gap:5px;background:none;border:none;cursor:pointer;padding:6px;
  }
  .nav-hamburger span{
    display:block;width:22px;height:2px;
    background:rgba(255,255,255,.8);border-radius:2px;
    transition:all .25s;
  }
  .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}