/* ==========================================================================
   SiliconVall — sistema de diseño (compartido por todas las páginas)
   ========================================================================== */
:root{
  --purple:#8c239f; --purple-deep:#5e0168; --purple-deeper:#4a0152; --purple-tint:#f6e7f9;
  --yellow:#fbc02d; --yellow-soft:#ffe7a6;
  --green:#1f9d57;  --green-tint:#e6f6ec;
  --orange:#ed6a0c; --orange-tint:#fdeede;
  --blue:#2176ff;   --blue-tint:#e7f0ff;
  --pink:#e11d72;   --pink-tint:#fce4ef;

  --ink:#2c2333; --ink-soft:#6e6478; --ink-mute:#9a90a3;
  --paper:#fdf6fb; --surface:#ffffff; --line:#efe4f0;

  --display:'Fredoka', system-ui, sans-serif;
  --body:'Nunito', system-ui, sans-serif;
  --fun:'Baloo 2', system-ui, sans-serif;
  --r:18px; --r-lg:26px;
  --shadow:0 2px 4px rgba(94,1,104,.05), 0 14px 30px -14px rgba(94,1,104,.22);
  --shadow-sm:0 1px 2px rgba(94,1,104,.06), 0 6px 16px -10px rgba(94,1,104,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.55;font-weight:600;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.01em}

/* ---------- Botones ---------- */
.btn{font-family:var(--display);font-weight:600;font-size:16px;border:none;border-radius:99px;padding:13px 24px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .14s ease, box-shadow .16s ease, background .15s ease}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 6px 0 var(--purple-deep)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--purple-deep)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 3px 0 var(--purple-deep)}
.btn-yellow{background:var(--yellow);color:var(--purple-deep);box-shadow:0 6px 0 #d99e15}
.btn-yellow:hover{transform:translateY(-2px);box-shadow:0 8px 0 #d99e15}
.btn-ghost{background:#fff;color:var(--purple);border:2px solid var(--purple-tint)}
.btn-ghost:hover{border-color:var(--purple);transform:translateY(-2px)}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(253,246,251,.86);backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:23px;color:var(--purple-deep)}
.logo .mark{width:42px;height:42px;flex:none}
nav.menu{display:flex;align-items:center;gap:24px}
nav.menu a{font-family:var(--display);font-weight:500;font-size:16px;color:var(--ink-soft);white-space:nowrap}
nav.menu a:hover,nav.menu a.active{color:var(--purple)}
.bar .btn{padding:11px 20px;font-size:15px}
.burger{display:none;background:none;border:none;cursor:pointer;color:var(--purple-deep);padding:6px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:54px 0 34px}
.hero.center{text-align:center}
.hero .wrap{position:relative;z-index:2}
.hero.split .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.blob{position:absolute;border-radius:50%;z-index:1}
.b1{width:240px;height:240px;background:var(--yellow-soft);top:-60px;right:18%;opacity:.6}
.b2{width:170px;height:170px;background:var(--green-tint);bottom:-30px;left:-40px;opacity:.85}
.b3{width:120px;height:120px;background:var(--pink-tint);top:40px;left:46%;opacity:.7}
.star{position:absolute;z-index:1;color:var(--yellow)}
.s1{top:70px;left:6%}.s2{bottom:54px;right:8%}.s3{top:24px;right:42%}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--purple);background:var(--purple-tint);padding:7px 15px;border-radius:99px}
.hero h1{font-size:clamp(34px,5.4vw,58px);color:var(--purple-deep);margin:18px 0 0}
.hero.split h1{max-width:15ch}
.hero.center h1{max-width:18ch;margin-inline:auto}
.hero h1 b{color:var(--purple);font-weight:700}
.hero p.lead{font-size:18px;color:var(--ink-soft);margin:20px 0 0;font-weight:600}
.hero.split p.lead{max-width:46ch}
.hero.center p.lead{max-width:52ch;margin-inline:auto}
.hero .cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero.center .cta{justify-content:center}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}
.hero-art .ring{position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle at 50% 40%, #fff 0%, var(--purple-tint) 70%, transparent 72%)}

/* trust pills */
.trust{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;position:relative;z-index:2}
.hero.center .trust{justify-content:center}
.trust .pill{display:flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--line);border-radius:99px;padding:9px 16px;font-size:14.5px;color:var(--ink-soft)}
.trust .pill svg{flex:none}
.trust .pill b{color:var(--purple-deep)}

/* ---------- Secciones ---------- */
section{padding:60px 0}
section.tint{background:#fff;border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 40px}
.sec-head .kick{font-family:var(--display);font-weight:600;color:var(--purple);font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.sec-head h2{font-size:clamp(28px,4vw,42px);color:var(--purple-deep);margin-top:8px}
.sec-head p{color:var(--ink-soft);font-size:17px;margin-top:12px}

/* ---------- Tarjetas de servicios (pilares) ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;transition:transform .16s ease, box-shadow .18s ease;overflow:hidden;display:block}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .ico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:#fff;margin-bottom:18px}
.card h3{font-size:24px;color:var(--purple-deep)}
.card p{color:var(--ink-soft);font-size:15.5px;margin:10px 0 18px;font-weight:600}
.card .more{font-family:var(--display);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px;transition:gap .15s}
.card:hover .more{gap:11px}
.card .corner{position:absolute;width:120px;height:120px;border-radius:50%;right:-46px;top:-46px;opacity:.12}
.badge-new{position:absolute;top:22px;right:22px;font-family:var(--display);font-weight:600;font-size:12px;background:var(--yellow);color:var(--purple-deep);padding:4px 11px;border-radius:99px}
.c-purple .ico,.c-purple .corner{background:var(--purple)} .c-purple .more{color:var(--purple)}
.c-blue .ico,.c-blue .corner{background:var(--blue)} .c-blue .more{color:var(--blue)}
.c-orange .ico,.c-orange .corner{background:var(--orange)} .c-orange .more{color:var(--orange)}
.c-green .ico,.c-green .corner{background:var(--green)} .c-green .more{color:var(--green)}

/* ---------- Pasos / "cómo funciona" ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;text-align:center}
.step .ico{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;margin:0 auto 16px;color:#fff;background:var(--purple)}
.step.g .ico{background:var(--green)} .step.o .ico{background:var(--orange)} .step.b .ico{background:var(--blue)}
.step h3{font-size:20px;color:var(--purple-deep)}
.step p{color:var(--ink-soft);font-size:15px;margin-top:8px;font-weight:600}

/* ---------- Niveles / cursos (lista) ---------- */
.levels{display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto}
.level{display:flex;gap:18px;align-items:flex-start;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;transition:transform .14s, box-shadow .16s}
.level:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.level .num{font-family:var(--display);font-weight:700;font-size:20px;color:#fff;background:var(--purple);width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none}
.level.g .num{background:var(--green)} .level.o .num{background:var(--orange)} .level.b .num{background:var(--blue)} .level.k .num{background:var(--pink)}
.level .body{flex:1}
.level .body h3{font-size:19px;color:var(--purple-deep);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.level .body .age{font-family:var(--body);font-weight:700;font-size:12.5px;color:var(--ink-soft);background:var(--paper);border:2px solid var(--line);border-radius:99px;padding:2px 10px}
.level .body p{color:var(--ink-soft);font-size:15px;margin-top:7px;font-weight:600}

/* ---------- Lista con checks ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:780px;margin:0 auto}
.check{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink-soft);font-weight:600}
.check .ck{width:26px;height:26px;border-radius:50%;background:var(--green-tint);color:var(--green);display:grid;place-items:center;flex:none;font-weight:800}

/* ---------- Dos columnas (oferta adultos) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:32px 30px}
.panel .ico{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:#fff;margin-bottom:18px;background:var(--blue)}
.panel.v .ico{background:var(--purple)}
.panel h3{font-size:23px;color:var(--purple-deep)}
.panel p{color:var(--ink-soft);font-size:15.5px;margin:10px 0 16px;font-weight:600}
.panel ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.panel li{display:flex;gap:10px;font-size:15px;color:var(--ink-soft);font-weight:600}
.panel li::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--blue);margin-top:8px;flex:none}
.panel.v li::before{background:var(--purple)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--purple-deep);border-radius:var(--r-lg);padding:46px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band h2{color:#fff;font-size:clamp(26px,3.4vw,36px)}
.cta-band p{color:#e9d6ec;font-size:17px;margin:12px 0 24px;font-weight:600}
.cta-band .star{color:rgba(251,192,45,.5)}

/* ---------- Testimonios ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.quote .stars{color:var(--yellow);font-size:16px;letter-spacing:2px;margin-bottom:12px}
.quote p{font-size:15.5px;color:var(--ink);font-weight:600}
.quote .who{margin-top:14px;font-family:var(--display);font-weight:600;color:var(--purple-deep)}
.quote .who span{display:block;font-family:var(--body);font-weight:600;font-size:13px;color:var(--ink-mute)}

/* ---------- Footer ---------- */
footer{background:var(--purple-deep);color:#e9d6ec;padding:56px 0 38px}
.grid-f{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
footer h4{color:#fff;font-size:18px;margin-bottom:15px}
footer a:hover{color:var(--yellow)}
footer .row{display:flex;align-items:flex-start;gap:10px;font-size:15px;margin-bottom:11px;font-weight:600}
footer .row svg{color:var(--yellow);flex:none;margin-top:2px}
footer nav{display:flex;flex-direction:column;gap:9px;font-size:15px;font-weight:600}
.foot-logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:22px;color:#fff;margin-bottom:15px}
.copyr{border-top:1px solid #6a1574;margin-top:38px;padding-top:22px;font-size:13.5px;color:#b88dbf;font-weight:600}

/* ==========================================================================
   Calendario (igual que el plugin, para el prototipo)
   ========================================================================== */
.cal-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 16px}
.cal-filters .flabel{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink-mute);margin-right:4px}
.chip{font-family:var(--display);font-weight:500;font-size:15px;border:2px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:99px;padding:8px 17px;cursor:pointer;transition:all .14s}
.chip:hover{border-color:var(--purple-tint);color:var(--purple)}
.chip[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.legend{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.legend .li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-soft)}
.legend .dot{width:12px;height:12px;border-radius:5px;flex:none}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:start}
.col-day{font-family:var(--display);font-weight:700;font-size:17px;color:var(--purple-deep);padding:0 4px 10px;display:flex;justify-content:space-between;align-items:baseline}
.col-day em{font-family:var(--body);font-style:normal;font-size:12px;font-weight:700;color:var(--ink-mute)}
.col-rule{height:4px;border-radius:99px;background:var(--purple-tint);margin-bottom:14px}
.col-stack{display:flex;flex-direction:column;gap:12px;min-height:30px}
.col-empty{font-size:14px;color:var(--ink-mute);padding:4px}
.slot{position:relative;text-align:left;width:100%;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:15px 14px 14px;cursor:pointer;font-family:var(--body);transition:transform .14s ease, box-shadow .16s ease, opacity .2s;display:block}
.slot:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:var(--shadow-sm)}
.slot:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.slot .time{font-family:var(--display);font-weight:600;font-size:14px;color:#fff;border-radius:99px;padding:3px 11px;display:inline-block}
.slot .name{font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--purple-deep);line-height:1.12;margin:9px 0 9px;display:block}
.slot .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.slot .age{font-size:12.5px;font-weight:700;color:var(--ink-soft);background:var(--paper);border:2px solid var(--line);border-radius:99px;padding:2px 9px}
.slot .fam{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700}
.slot .badge{position:absolute;top:13px;right:13px;font-family:var(--display);font-weight:600;font-size:11px;color:var(--purple-deep);background:var(--yellow);border-radius:99px;padding:3px 9px}
.slot.dim{opacity:.25;filter:saturate(.3);pointer-events:none}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;z-index:99999;background:rgba(74,1,82,.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
.overlay.open{display:flex}
.modal{background:var(--surface);border-radius:28px;max-width:470px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 30px 70px -18px rgba(74,1,82,.5);animation:pop .22s ease;text-align:left}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.m-top{padding:26px 28px 0;position:relative}
.m-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:none;border-radius:13px;background:var(--paper);color:var(--ink-soft);cursor:pointer;font-size:20px;line-height:1;transition:background .14s}
.m-close:hover{background:var(--purple-tint);color:var(--purple)}
.m-fam{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;margin-bottom:9px}
.m-title{font-family:var(--display);font-weight:700;font-size:27px;color:var(--purple-deep);padding-right:30px;line-height:1.05}
.m-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.mtag{font-size:13px;font-weight:700;color:var(--ink-soft);background:var(--paper);border:2px solid var(--line);border-radius:11px;padding:6px 11px}
.m-desc{padding:16px 28px 0;color:var(--ink-soft);font-size:15.5px;font-weight:600}
.m-form{padding:20px 28px 28px}
.m-form hr{border:none;border-top:2px solid var(--line);margin:20px 0}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--display);font-weight:500;font-size:14px;color:var(--purple-deep);margin-bottom:6px}
.field input{width:100%;font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:13px;padding:12px 14px;transition:border .14s, box-shadow .14s}
.field input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px var(--purple-tint)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-form .btn-primary{width:100%;padding:15px;font-size:17px}
.m-note{font-size:13px;color:var(--ink-mute);text-align:center;margin-top:12px;font-weight:600}
.success{padding:38px 30px 40px;text-align:center}
.success .ok{width:62px;height:62px;border-radius:50%;background:var(--green-tint);color:var(--green);display:grid;place-items:center;margin:0 auto 18px;font-size:30px;font-weight:800}
.success h3{font-size:25px;color:var(--purple-deep);margin-bottom:9px}
.success p{color:var(--ink-soft);font-size:15.5px;max-width:32ch;margin:0 auto;font-weight:600}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  nav.menu{position:absolute;top:78px;left:0;right:0;background:var(--paper);border-bottom:2px solid var(--line);flex-direction:column;gap:0;padding:8px 0;display:none}
  nav.menu.open{display:flex}
  nav.menu a{padding:13px 22px;width:100%}
  .burger{display:block}
  .hero.split .wrap{grid-template-columns:1fr}
  .hero-art{order:-1;min-height:230px}
  .cards,.steps,.quotes,.duo,.checks{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr;gap:8px}
  .col{margin-bottom:24px}
  .grid-f{grid-template-columns:1fr;gap:26px}
}
@media (prefers-reduced-motion:reduce){*,.modal{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ==========================================================================
   Bloque inmersivo de cursos: competencias, usos y recomendador
   ========================================================================== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

section.deep{background:linear-gradient(165deg,#6c1379 0%,#5e0168 55%,#46014f 100%);color:#f3e6f5;position:relative;overflow:hidden}
section.deep .sec-head h2{color:#fff}
section.deep .sec-head .kick{color:var(--yellow)}
section.deep .sec-head p{color:#dcc4e0}
.deep .glow{position:absolute;border-radius:50%;filter:blur(60px);z-index:0}
.deep .g1{width:320px;height:320px;background:#a83bbd;top:-90px;left:-70px;opacity:.5}
.deep .g2{width:280px;height:280px;background:#e11d72;bottom:-110px;right:-50px;opacity:.35}

.comp-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center;position:relative;z-index:2}
.radar-card{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:18px;display:flex;justify-content:center}
.radar-card svg{width:100%;height:auto;max-width:360px}
.comp-list{display:flex;flex-direction:column;gap:17px}
.comp-item .top{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.comp-item .ci{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;flex:none}
.comp-item h4{font-size:17px;color:#fff}
.comp-item p{font-size:14px;color:#dcc4e0;font-weight:600;margin:2px 0 9px}
.cbar{height:10px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden}
.cbar .fill{height:100%;border-radius:99px;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}

.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.use{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;transition:transform .16s, box-shadow .18s}
.use:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.use .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:14px;background:var(--purple)}
.use.g .ico{background:var(--green)} .use.o .ico{background:var(--orange)} .use.b .ico{background:var(--blue)} .use.k .ico{background:var(--pink)} .use.y .ico{background:var(--yellow);color:var(--purple-deep)}
.use h3{font-size:18px;color:var(--purple-deep)}
.use p{font-size:14.5px;color:var(--ink-soft);margin-top:7px;font-weight:600}

.quiz{max-width:780px;margin:0 auto;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:36px 34px;box-shadow:var(--shadow)}
.q{margin-bottom:26px}
.q .qn{font-family:var(--display);font-weight:600;font-size:19px;color:var(--purple-deep);display:flex;align-items:center;gap:11px;margin-bottom:14px}
.q .qn span{width:27px;height:27px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.qchips{display:flex;gap:10px;flex-wrap:wrap}
.qchip{font-family:var(--display);font-weight:500;font-size:15px;border:2px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:99px;padding:9px 17px;cursor:pointer;transition:all .14s}
.qchip:hover{border-color:var(--purple-tint);color:var(--purple)}
.qchip.sel{background:var(--purple-tint);border-color:var(--purple);color:var(--purple-deep)}
.quiz .go .btn-primary{width:100%}
.result{margin-top:6px;display:none}
.result.show{display:block;animation:pop .3s ease;border-top:2px solid var(--line);padding-top:24px;margin-top:24px}
.result .tag{font-family:var(--display);font-weight:600;font-size:13px;color:var(--purple);text-transform:uppercase;letter-spacing:.05em}
.res-card{display:flex;gap:18px;align-items:flex-start;margin-top:12px;background:var(--paper);border:2px solid var(--line);border-radius:var(--r);padding:22px}
.res-card .ic{width:54px;height:54px;border-radius:16px;flex:none;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:21px}
.res-card h3{font-size:21px;color:var(--purple-deep)}
.res-card p{font-size:15px;color:var(--ink-soft);font-weight:600;margin:6px 0 0}
.res-card .age{font-family:var(--body);font-weight:700;font-size:12.5px;color:var(--ink-soft);background:#fff;border:2px solid var(--line);border-radius:99px;padding:2px 10px;display:inline-block;margin-top:9px}
.res-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

@media (max-width:900px){
  .comp-wrap{grid-template-columns:1fr;gap:30px}
  .uses{grid-template-columns:1fr}
}

/* ==========================================================================
   Home: cifras animadas y FAQ
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:30px 18px;transition:transform .16s, box-shadow .18s}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.4vw,48px);color:var(--purple);line-height:1}
.stat .l{font-size:14.5px;color:var(--ink-soft);font-weight:600;margin-top:10px}

.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .15s}
.faq-item.open{border-color:var(--purple-tint)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:17px;color:var(--purple-deep);padding:19px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-q .ar{transition:transform .25s;flex:none;color:var(--purple)}
.faq-item.open .ar{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-item.open .faq-a{max-height:260px}
.faq-a div{padding:0 22px 19px;color:var(--ink-soft);font-weight:600;font-size:15px}

@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   Hero a pantalla completa con fotos + sección innovación (robot)
   ========================================================================== */
.hero-cine{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.hero-cine .bg{position:absolute;inset:0;z-index:0}
.hero-cine .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.5s ease}
.hero-cine .slide.on{opacity:1}
.hero-cine .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(74,1,82,.94) 0%,rgba(94,1,104,.8) 42%,rgba(94,1,104,.4) 100%)}
.hero-cine .wrap{position:relative;z-index:2;width:100%;padding-top:46px;padding-bottom:46px}
.hero-cine .eyebrow{background:rgba(255,255,255,.16);color:#fff}
.hero-cine h1{color:#fff;font-size:clamp(36px,5.6vw,62px);max-width:16ch;margin-top:18px}
.hero-cine h1 b{color:var(--yellow)}
.hero-cine p.lead{color:#f1e3f3;max-width:50ch;font-size:19px;margin-top:20px}
.hero-cine .cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero-cine .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.hero-cine .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.hero-dots{display:flex;gap:8px;margin-top:34px}
.hero-dots button{height:10px;width:10px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:all .25s}
.hero-dots button.on{background:var(--yellow);width:28px;border-radius:6px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.innova-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}
.innova-art .halo{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#f6e7f9 0%,rgba(246,231,249,0) 70%);z-index:0}
.bot{position:relative;z-index:1;animation:floaty 4.5s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-12px)}}
.bot-cursor{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mini-feats{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:20px}
.mini-feats li{display:flex;align-items:center;gap:13px;font-weight:700;color:var(--ink);font-size:16px}
.mini-feats .mi{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none}
.mini-feats .mi.p{background:var(--purple)} .mini-feats .mi.g{background:var(--green)} .mini-feats .mi.b{background:var(--blue)} .mini-feats .mi.k{background:var(--pink)}

@media (max-width:900px){
  .hero-cine{min-height:80vh}
  .two-col{grid-template-columns:1fr;gap:30px}
  .innova-art{order:-1;min-height:300px}
}
@media (prefers-reduced-motion:reduce){.bot{animation:none}.bot-cursor{animation:none}}

/* ==========================================================================
   Equipo, contacto y detalles
   ========================================================================== */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.member{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:28px 22px;text-align:center;transition:transform .16s,box-shadow .18s}
.member:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.member .av{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-family:var(--display);font-weight:700;font-size:28px;color:#fff}
.member h3{font-size:19px;color:var(--purple-deep)}
.member .role{font-family:var(--display);font-weight:500;font-size:13.5px;color:var(--purple);margin-top:2px}
.member p{font-size:14px;color:var(--ink-soft);margin-top:10px;font-weight:600}

.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:start}
.contact-card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:30px 28px}
.contact-card .ci{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;font-weight:600;color:var(--ink-soft);font-size:15px}
.contact-card .ci svg{color:var(--purple);flex:none;margin-top:2px}
.contact-card .ci b{display:block;color:var(--purple-deep);font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:1px}
.map{width:100%;height:440px;border-radius:var(--r-lg);border:2px solid var(--line)}
.field textarea{width:100%;font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:13px;padding:12px 14px;resize:vertical;min-height:120px;transition:border .14s,box-shadow .14s}
.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px var(--purple-tint)}
.field select{width:100%;font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:13px;padding:12px 14px}
.c-error{display:none;color:#c0264e;font-weight:700;font-size:14px;margin-top:8px}
.c-ok{display:none;text-align:center;padding:20px}
.c-ok .ok{width:58px;height:58px;border-radius:50%;background:var(--green-tint);color:var(--green);display:grid;place-items:center;margin:0 auto 14px;font-size:28px;font-weight:800}
.c-ok h3{font-family:var(--display);font-weight:700;color:var(--purple-deep);font-size:22px}
.c-ok p{color:var(--ink-soft);font-weight:600;margin-top:6px}

.info-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:900px;margin:0 auto}
.info-box{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:24px 18px;text-align:center}
.info-box .ib{font-family:var(--display);font-weight:700;font-size:22px;color:var(--purple);margin-bottom:4px}
.info-box .il{font-size:13.5px;color:var(--ink-soft);font-weight:600}
.todo{background:#fff8e6;border:1px dashed #e0a800;border-radius:8px;padding:1px 7px;font-size:12.5px;font-weight:700;color:#9a7b12}

@media (max-width:900px){
  .team{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:24px}
  .info-panel{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   Formulario de inscripción (estilo CF7)
   ========================================================================== */
.fieldset-t{font-family:var(--display);font-weight:600;font-size:16px;color:var(--purple-deep);margin:24px 0 8px}
.radio-list{display:flex;flex-direction:column;gap:10px}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-opt{display:flex;align-items:flex-start;gap:11px;border:2px solid var(--line);border-radius:13px;padding:13px 16px;cursor:pointer;font-weight:600;color:var(--ink-soft);font-size:15px;transition:border .14s,background .14s}
.radio-opt:hover{border-color:var(--purple-tint)}
.radio-opt input{margin-top:2px;accent-color:var(--purple);width:18px;height:18px;flex:none}
.radio-opt.inline{flex:0 0 auto}
.note-box{background:var(--paper);border:2px solid var(--line);border-radius:13px;padding:14px 16px;font-size:14px;color:var(--ink-soft);font-weight:600;margin-top:4px}
.note-box b{color:var(--purple-deep)}
.legal{font-size:12.5px;color:var(--ink-mute);font-weight:600;line-height:1.65;max-height:160px;overflow:auto;border:2px solid var(--line);border-radius:13px;padding:14px 16px;background:#fff;margin-top:6px}
.accept{display:flex;gap:11px;align-items:flex-start;margin-top:16px;font-weight:700;color:var(--ink);font-size:14.5px;cursor:pointer}
.accept input{margin-top:2px;width:18px;height:18px;accent-color:var(--purple);flex:none}

/* ==========================================================================
   Galería de fotos / imágenes de sección
   ========================================================================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery .gi{position:relative;border-radius:var(--r);overflow:hidden;border:2px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.gallery img{display:block;width:100%;height:240px;object-fit:cover;transition:transform .45s ease}
.gallery .gi:hover img{transform:scale(1.06)}
.media{width:100%;border-radius:var(--r-lg);border:2px solid var(--line);object-fit:cover;display:block}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}.gallery img{height:185px}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}

/* ==========================================================================
   Cabecera rediseñada: logo real + letra infantil (Baloo 2) + menú bonito
   ========================================================================== */
header{border-bottom:none;box-shadow:0 6px 22px rgba(94,1,104,.07)}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--purple) 0%, var(--pink) 50%, var(--yellow) 100%)}
.bar{height:78px}
.logo{gap:12px;font-family:var(--fun);font-weight:800;font-size:25px;color:var(--purple-deep);letter-spacing:.2px}
.logo .mark{width:50px;height:50px;flex:none;border-radius:50%;filter:drop-shadow(0 2px 5px rgba(94,1,104,.18))}
nav.menu{gap:4px}
nav.menu a{font-family:var(--fun);font-weight:600;font-size:16px;color:var(--ink-soft);white-space:nowrap;padding:9px 15px;border-radius:99px;transition:color .15s, background .15s}
nav.menu a:hover{color:var(--purple);background:var(--purple-tint)}
nav.menu a.active{color:#fff;background:var(--purple)}
.bar .btn{font-family:var(--fun);font-weight:700;padding:11px 22px;font-size:15.5px;white-space:nowrap}
@media (max-width:560px){.bar .btn{padding:10px 16px;font-size:14px}}
@media (max-width:1040px){nav.menu a{padding:8px 11px;font-size:15px}}

/* ==========================================================================
   Tarifas (tablas de precios)
   ========================================================================== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:32px 26px;display:flex;flex-direction:column;transition:transform .16s, box-shadow .18s}
.price:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.price.feat{border-color:var(--purple);box-shadow:var(--shadow);position:relative}
.price.feat::before{content:"Más elegida";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--purple);color:#fff;font-family:var(--fun);font-weight:700;font-size:12.5px;padding:4px 15px;border-radius:99px;white-space:nowrap}
.price .pname{font-family:var(--fun);font-weight:700;font-size:21px;color:var(--purple-deep)}
.price .pamt{font-family:var(--fun);font-weight:800;font-size:40px;color:var(--purple);line-height:1;margin:12px 0 2px}
.price .pamt small{font-family:var(--body);font-weight:700;font-size:15px;color:var(--ink-mute)}
.price .pnote{font-size:13.5px;color:var(--ink-mute);font-weight:600;margin-bottom:18px}
.price ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 24px;flex:1}
.price li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;font-weight:600;color:var(--ink-soft)}
.price li svg{color:var(--green);flex:none;margin-top:2px}
.price .btn{width:100%}
.price-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto}
.px{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:22px;text-align:center}
.px .t{font-family:var(--fun);font-weight:700;font-size:16px;color:var(--purple-deep)}
.px .a{font-family:var(--fun);font-weight:800;font-size:24px;color:var(--purple);margin:6px 0 2px}
.px .n{font-size:13px;color:var(--ink-mute);font-weight:600}
@media (max-width:900px){.price-grid,.price-extra{grid-template-columns:1fr}}

/* ficha/CV en tarjetas de equipo */
.member .cv{margin-top:13px;padding-top:13px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink-mute);font-weight:600;text-align:left}
.member .cv b{color:var(--purple-deep);display:block;margin-bottom:3px}

/* fotos reales en avatares de equipo */
.member img.av{object-fit:cover}

/* bloque de prosa (Nuestra historia) */
.prose p{font-size:17px;line-height:1.75;color:var(--ink-soft);margin:0 0 16px;font-weight:600}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--purple);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Menú con desplegable "Qué ofrecemos"
   ========================================================================== */
.has-sub{position:relative;display:flex;align-items:center}
.sub-toggle{font-family:var(--fun);font-weight:600;font-size:16px;color:var(--ink-soft);white-space:nowrap;padding:9px 15px;border-radius:99px;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:color .15s, background .15s}
.sub-toggle .chev{transition:transform .18s}
.sub-toggle:hover,.has-sub:hover .sub-toggle{color:var(--purple);background:var(--purple-tint)}
.sub-toggle.active{color:#fff;background:var(--purple)}
.has-sub:hover .sub-toggle .chev{transform:rotate(180deg)}
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:238px;background:#fff;border:2px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(94,1,104,.16);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s, transform .16s, visibility .16s;z-index:60}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{font-family:var(--fun);font-weight:600;font-size:15px;color:var(--ink-soft);padding:10px 14px;border-radius:10px;white-space:nowrap}
.submenu a:hover{background:var(--purple-tint);color:var(--purple)}
.submenu a.active{background:var(--purple);color:#fff}
@media (max-width:1040px){.sub-toggle{padding:8px 11px;font-size:15px}}
@media (max-width:900px){
  .has-sub{display:block;width:100%}
  .has-sub::after{display:none}
  .sub-toggle{width:100%;justify-content:flex-start;padding:13px 22px;border-radius:0;font-size:16px}
  .has-sub:hover .sub-toggle{background:none;color:var(--ink-soft)}
  .sub-toggle .chev{display:none}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:0 0 6px;min-width:0;border-radius:0}
  .submenu a{padding:11px 22px 11px 40px;font-size:15px;border-radius:0;color:var(--ink-mute)}
  .submenu a.active{background:none;color:var(--purple)}
}

/* ==========================================================================
   Recursos (Aprende en casa)
   ========================================================================== */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rcard{display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .16s, box-shadow .18s, border-color .16s}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--purple)}
.rcard .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.rcard .badge{font-family:var(--fun);font-weight:700;font-size:11px;color:var(--green);background:#e4f6ec;border-radius:99px;padding:3px 11px;white-space:nowrap}
.rcard .age{font-size:12.5px;font-weight:700;color:var(--ink-mute)}
.rcard h3{font-family:var(--fun);font-weight:700;font-size:18px;color:var(--purple-deep);margin:0 0 7px}
.rcard p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);font-weight:600;margin:0;flex:1}
.rcard .go{margin-top:15px;font-family:var(--fun);font-weight:700;font-size:14px;color:var(--purple);display:inline-flex;align-items:center;gap:6px}
.rcard:hover .go{gap:9px}
@media (max-width:900px){.res-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Páginas legales + enlaces de pie + banner de cookies
   ========================================================================== */
.legal-doc{max-width:780px;margin:0 auto}
.legal-doc .upd{font-size:13px;color:var(--ink-mute);font-weight:600;margin-bottom:18px}
.legal-doc h2{font-family:var(--fun);font-weight:700;font-size:21px;color:var(--purple-deep);margin:30px 0 9px}
.legal-doc h3{font-family:var(--fun);font-weight:700;font-size:16.5px;color:var(--ink);margin:18px 0 5px}
.legal-doc p{font-size:15.5px;line-height:1.7;color:var(--ink-soft);font-weight:500;margin:0 0 12px}
.legal-doc ul{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal-doc li{font-size:15.5px;line-height:1.6;color:var(--ink-soft);font-weight:500}
.legal-doc a{color:var(--purple);font-weight:700}
.legal-doc .ph{color:var(--ink-mute);font-style:italic}
.legal-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.legal-links a{color:#cdaccf;font-size:13.5px;font-weight:600}
.legal-links a:hover{color:#fff;text-decoration:underline}
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;background:#fff;border:2px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(94,1,104,.22);padding:18px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:880px;margin:0 auto;font-weight:600}
.cookie-bar p{margin:0;font-size:14px;color:var(--ink-soft);flex:1;min-width:230px;line-height:1.55}
.cookie-bar a{color:var(--purple);font-weight:700}
.cookie-bar .cb-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-bar .btn{padding:9px 18px;font-size:14px}
@media (max-width:560px){.cookie-bar{flex-direction:column;align-items:stretch}.cookie-bar .cb-actions{display:flex}.cookie-bar .cb-actions .btn{flex:1}}