:root{
  --lila:#A78BFA;
  --turq:#2DD4BF;
  --beige:#F5F5DC;
  --rosa:#F9A8D4;
  --oscuro:#1f2937;
  --gris:#6b7280;
  --bg:#ffffff;
  --whatsapp:#25D366;
  --header-h:76px;
  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --shadow-soft:0 6px 18px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Lato",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:#111;
  background:var(--bg);
  line-height:1.6;
}
h1,h2,h3{font-family:"Poppins",sans-serif; line-height:1.2; margin:0 0 .5rem}
p{margin:.25rem 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
section{padding: clamp(64px, 8vw, 104px) 20px; scroll-margin-top: var(--header-h);}
.container{max-width:1100px; margin:0 auto}
/* Header */
.header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  display:flex; align-items:center; z-index:50;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  background:transparent;
}
.header.scrolled{
  background:rgba(255,255,255,.85);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 2px 14px rgba(0,0,0,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700}
.brand-logo{
  width:36px; height:36px; border-radius:12px;
  background: linear-gradient(135deg, var(--lila), var(--rosa));
  display:grid; place-items:center; color:white; font-weight:800;
  box-shadow: var(--shadow-soft);
}
.menu{display:flex; gap:18px; align-items:center}
.menu a{
  padding:8px 12px; border-radius:10px; font-weight:600; font-family:"Poppins",sans-serif;
  color:#111; opacity:.9; transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.menu a:hover{background:rgba(167,139,250,.12)}
.menu a.active{color:var(--lila)}
.cta-nav{padding:10px 14px; border-radius:12px; background:var(--turq); color:#053; font-weight:700}
.cta-nav:hover{filter:brightness(.95)}
/* Mobile nav */
.burger{display:none; background:none; border:0; padding:8px}
.burger span{display:block; width:26px; height:3px; background:#111; margin:5px 0; border-radius:3px; transition:.2s}
@media (max-width: 860px){
  .menu{position:fixed; inset: var(--header-h) 0 auto 0; background:#fff; display:none; flex-direction:column; padding:16px 20px; box-shadow:0 8px 20px rgba(0,0,0,.1)}
  .menu.open{display:flex}
  .burger{display:block}
  .cta-nav{display:none}
}
/* Hero */
.hero{
  min-height:100svh; display:grid; place-items:center; padding-top:calc(var(--header-h) + 10px); position:relative; overflow:hidden;
  background: radial-gradient(1200px 600px at 85% 15%, rgba(249,168,212,.25), transparent 60%),
              radial-gradient(900px 600px at 5% 20%, rgba(45,212,191,.25), transparent 60%),
              linear-gradient(180deg, #fff, #fff);
}
.hero-inner{display:grid; gap:22px; text-align:center}
.kicker{font-weight:700; color:var(--turq); letter-spacing:.4px}
.title{font-size:clamp(28px, 5vw, 48px)}
.subtitle{color:#374151; max-width:800px; margin:0 auto}
.hero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:14px; font-weight:700; font-family:"Poppins",sans-serif;
  border:2px solid transparent; cursor:pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: var(--shadow-soft);
}
.btn:active{transform: translateY(1px)}
.btn-primary{background:linear-gradient(135deg, var(--lila), var(--rosa)); color:white}
.btn-primary:hover{filter:brightness(.98)}
.btn-outline{background:#fff; border-color:var(--turq); color:#065f46}
.btn-outline:hover{background:#ecfeff}
/* Sobre */
.grid-2{display:grid; grid-template-columns: 1.1fr 1fr; gap:32px; align-items:center}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr;}}
.card{
  background:#fff; border-radius:var(--radius); box-shadow: var(--shadow); padding:20px;
}
.blob{
  aspect-ratio: 4/3; border-radius: 28px;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(167,139,250,.45), transparent 60%),
    radial-gradient(90% 90% at 90% 30%, rgba(45,212,191,.45), transparent 60%),
    radial-gradient(60% 60% at 40% 90%, rgba(249,168,212,.45), transparent 60%),
    linear-gradient(135deg, #fafafa, #ffffff);
  box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.blob::after{ /* sutil textura */
  content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 10px, transparent 10px 20px);
  mix-blend-mode:multiply; pointer-events:none;
}
/* Recursos */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width: 900px){ .cards{grid-template-columns:1fr}}
.resource{transition: transform .12s ease, box-shadow .2s ease}
.resource:hover{transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.12)}
.icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:10px;
  background:linear-gradient(135deg, var(--turq), var(--lila)); color:white;
  box-shadow: var(--shadow-soft);
}
.resource a.btn{margin-top:6px}
/* Podcast */
.media-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width: 900px){ .media-grid{grid-template-columns:1fr}}
.ratio{
  position:relative; width:100%; overflow:hidden; border-radius:16px; box-shadow:var(--shadow)
}
.ratio::before{content:""; display:block; padding-top:56.25%}
.ratio > iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* Agenda */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:10px}
@media (max-width: 900px){ .steps{grid-template-columns:1fr}}
.step{background:#fff; border-left:6px solid var(--lila); padding:16px; border-radius:14px; box-shadow: var(--shadow-soft)}
.wa{background:var(--whatsapp); color:white}
.wa:hover{filter:brightness(.95)}
form{display:grid; gap:10px}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid #e5e7eb; font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease; background:#fff
}
input:focus, textarea:focus{outline:none; border-color:var(--lila); box-shadow:0 0 0 4px rgba(167,139,250,.18)}
textarea{min-height:120px; resize:vertical}
/* Comunidad */
.beige{background:var(--beige)}
.newsletter{display:flex; gap:10px; flex-wrap:wrap}
.newsletter input{flex:1 1 260px}
/* Footer */
footer{background:var(--oscuro); color:#e5e7eb; padding:28px 20px}
.socials{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.socials a{
  width:38px; height:38px; display:grid; place-items:center; background:#111827; border-radius:12px; transition: transform .12s ease, background .2s ease
}
.socials a:hover{transform: translateY(-2px); background:#0b1220}
.legal{font-size:.9rem; color:#9ca3af}
/* Reveal Animations */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
  .btn, .resource{transition:none}
  html{scroll-behavior:auto}
}