:root{
  --naranja:#E87722; --marino:#1B365D; --rosado:#E31C79; --turquesa:#45B5AA; --lima:#AFC400; --amarillo:#FFC845;
  --crema:#FFF9F2; --rosado-s:#FDEBF4; --turquesa-s:#E9F6F5; --amarillo-s:#FFF6E0; --lima-s:#F5F8DC; --marino-s:#EDF1F7;
  --ink:#1B365D; --muted:#6A7A92; --linea:#E7EBF1; --wa:#25D366;
  --radio:24px;
}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth; scroll-padding-top:78px; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }
body{font-family:'Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif; color:var(--ink); background:#fff; line-height:1.62; font-size:16.5px}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto;
  padding-left:max(22px, env(safe-area-inset-left)); padding-right:max(22px, env(safe-area-inset-right))}

/* ---------- Botones ---------- */
.btn{border:none; font-family:inherit; cursor:pointer; border-radius:999px; padding:13px 26px; font-weight:700;
  font-size:15.5px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  white-space:nowrap; transition:filter .15s ease, transform .15s ease}
.btn:hover{filter:brightness(1.07); transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--turquesa); outline-offset:3px}
.btn svg{width:19px; height:19px; flex-shrink:0}
.btn-rosado{background:var(--rosado); color:#fff}
.btn-wa{background:var(--wa); color:#fff}
.btn-linea{background:transparent; color:var(--marino); border:2px solid var(--marino); padding:11px 24px}
.btn-linea:hover{background:var(--marino); color:#fff}
.btn-amarillo{background:var(--amarillo); color:var(--marino)}
.btn-blanco{background:#fff; color:var(--marino)}
.wa-icono{width:42px; height:42px; border-radius:50%; background:var(--wa); color:#fff; display:inline-flex;
  align-items:center; justify-content:center; flex-shrink:0; transition:filter .15s ease}
.wa-icono:hover{filter:brightness(1.08)}
.wa-icono svg{width:22px; height:22px; fill:currentColor}
.wa-icono:focus-visible{outline:3px solid var(--turquesa); outline-offset:3px}

/* ---------- Barra superior ---------- */
.barra{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea)}
.barra .wrap{max-width:1320px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px}
.barra .logo{flex-shrink:0; display:block}
.barra .logo img{height:36px; width:auto; max-width:none}
nav{display:flex; gap:15px; font-size:13.5px; font-weight:600}
.btn-portal{padding:10px 18px; font-size:14.5px}
.btn-portal .largo{display:none}
.btn-portal .corto{display:inline}
nav a{color:var(--muted); text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap}
nav a:hover{color:var(--rosado); border-bottom-color:var(--rosado)}
nav a.activo{color:var(--marino); border-bottom-color:var(--rosado)}
.acciones{display:flex; gap:10px; align-items:center; flex-shrink:0}
.menu-btn{display:none; background:none; border:none; padding:8px; cursor:pointer; color:var(--marino)}
.menu-btn svg{width:26px; height:26px}
@media(max-width:1380px){
  nav{position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; gap:0;
    border-bottom:1px solid var(--linea); padding:8px 22px 16px; display:none; box-shadow:0 12px 24px rgba(27,54,93,.08)}
  nav.abierto{display:flex}
  nav a{padding:12px 0; border-bottom:1px solid var(--linea); font-size:16px}
  .menu-btn{display:block; order:3}
  .acciones .btn-rosado{display:none}
  .barra .wrap{flex-wrap:wrap}
  .barra .logo img{height:30px}
  .acciones{gap:8px}
  .btn-portal{padding:9px 14px; font-size:14px}
}

/* ---------- Hero ---------- */
.hero{background:var(--crema); border-radius:var(--radio); margin-top:20px; padding:clamp(30px,5vw,58px);
  position:relative; overflow:hidden; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(20px,4vw,46px); align-items:center}
.hero .blob{position:absolute; border-radius:50%; opacity:.13; pointer-events:none}
.blob-1{width:250px; height:250px; background:var(--rosado); top:-95px; left:-72px}
.blob-2{width:180px; height:180px; background:var(--turquesa); bottom:-64px; right:34%}
.hero>*{position:relative}
h1{font-size:clamp(31px,5vw,50px); line-height:1.07; letter-spacing:-.022em; font-weight:800; margin-bottom:16px; text-wrap:balance}
h1 mark{background:linear-gradient(transparent 64%, var(--amarillo) 64%); color:inherit; padding:0 3px}
.hero p.entrada{color:var(--muted); font-size:17.5px; max-width:46ch; margin-bottom:14px}
.edades{font-weight:700; font-size:15px; color:var(--marino); margin-bottom:24px}
.botonera{display:flex; gap:11px; flex-wrap:wrap; margin-bottom:22px}
.enfoques{font-size:12.5px; color:var(--muted); letter-spacing:.03em; font-weight:600}
@media(max-width:820px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero .foto{max-width:320px; margin:8px auto 0}
  .hero p.entrada{margin-left:auto; margin-right:auto}
  .botonera{justify-content:center}
}

/* ---------- Secciones ---------- */
section{padding:66px 0 0}
h2{font-size:clamp(25px,3.9vw,34px); letter-spacing:-.018em; line-height:1.15; text-align:center; margin-bottom:8px; text-wrap:balance}
.sub{color:var(--muted); text-align:center; margin:0 auto 34px; max-width:54ch}
h3{font-size:19px; letter-spacing:-.01em}

/* Marcador de foto pendiente: panel de marca, no un hueco roto */
.foto-marca{border-radius:20px; display:flex; align-items:center; justify-content:center; padding:34px 20px; min-height:230px}
.foto-marca img{height:120px; width:auto}

/* Manifiesto */
.manifiesto{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,50px); align-items:center; margin-top:12px}
.manifiesto h2{text-align:left; font-size:clamp(24px,3.6vw,32px); margin-bottom:16px}
.manifiesto p{color:var(--muted); font-size:16.5px}
.manifiesto p + p{margin-top:13px}
.manifiesto .ritmo{color:var(--ink); font-weight:600}
@media(max-width:820px){ .manifiesto{grid-template-columns:1fr} .manifiesto h2{text-align:center} }

/* Cuatro verbos: piensa / siente / conecta / crea */
.cuatro{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:1000px){ .cuatro{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .cuatro{grid-template-columns:1fr} }
.verbo{border:2px solid var(--linea); border-radius:20px; padding:24px 22px}
.verbo svg{width:28px; height:28px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-bottom:11px}
.verbo strong{display:block; font-size:17px; margin-bottom:4px; letter-spacing:.02em}
.verbo span{font-size:14px; color:var(--muted)}

/* Chikis */
.chikis{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
@media(max-width:1019px){ .chikis{grid-template-columns:repeat(3,1fr)} }
@media(max-width:660px){ .chikis{grid-template-columns:1fr} }
.chiki{border-radius:20px; padding:22px 18px 20px; display:flex; flex-direction:column}
.chiki img{height:80px; width:auto; align-self:center; margin-bottom:10px}
.chiki .edad{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em}
.chiki h3{margin:3px 0 6px}
.chiki p{font-size:13.5px; color:var(--muted)}
.k1{background:var(--amarillo-s)} .k2{background:var(--rosado-s)} .k3{background:var(--turquesa-s)}
.k4{background:var(--lima-s)} .k5{background:var(--marino-s)}

/* Aquí no solo jugamos */
.juego{background:var(--marino); color:#fff; border-radius:var(--radio); padding:clamp(30px,5vw,56px); margin-top:66px}
.juego h2{color:#fff; text-align:left; margin-bottom:10px}
.juego .arranque{color:#B9C6DA; max-width:52ch; margin-bottom:28px}
.traducciones{display:grid; gap:0; margin-bottom:30px}
.trad{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; padding:15px 0; border-top:1px solid rgba(255,255,255,.13)}
.trad:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.trad .accion{font-size:15.5px; color:#C6D3E4}
.trad .flecha{color:var(--amarillo); font-weight:800; flex-shrink:0}
.trad .aprende{font-size:15.5px; font-weight:700}
@media(max-width:640px){
  .trad{grid-template-columns:1fr; gap:3px; padding:13px 0}
  .trad .flecha{display:none}
  .trad .aprende{color:var(--amarillo)}
}
.frase{font-size:clamp(18px,2.7vw,23px); font-weight:800; line-height:1.35; text-wrap:balance; max-width:30ch; margin-bottom:24px}
.frase em{font-style:normal; color:var(--amarillo)}

/* Metodología */
.metodo{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
@media(max-width:1019px){ .metodo{grid-template-columns:repeat(3,1fr)} }
@media(max-width:660px){ .metodo{grid-template-columns:repeat(2,1fr)} }
@media(max-width:430px){ .metodo{grid-template-columns:1fr} }
.met{border-radius:18px; padding:22px 18px; border:2px solid var(--turquesa-s)}
.met .ic{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:11px}
.met .ic svg{width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.met strong{display:block; font-size:15.5px; margin-bottom:2px; letter-spacing:.03em}
.met span{font-size:13px; color:var(--muted)}
.remate{text-align:center; color:var(--muted); margin:26px auto 0; max-width:48ch; font-size:16.5px}
.remate b{color:var(--ink)}

/* Un día: línea de tiempo con desplazamiento en celular */
.dia-scroll{overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px}
.dia{display:grid; grid-template-columns:repeat(4,1fr); gap:0 0}
@media(max-width:1019px){ .dia{grid-template-columns:repeat(8,minmax(158px,1fr)); min-width:min-content} }
.momento{padding:26px 16px 26px; position:relative; border-top:3px solid var(--linea); scroll-snap-align:start}
.momento::before{content:''; position:absolute; top:-9px; left:16px; width:15px; height:15px; border-radius:50%; background:var(--c)}
.momento .hora{font-size:12.5px; font-weight:800; letter-spacing:.05em; color:var(--c); font-variant-numeric:tabular-nums}
.momento h3{font-size:16.5px; margin:3px 0 5px}
.momento p{font-size:13.5px; color:var(--muted)}
.nota-horario{text-align:center; color:var(--muted); font-size:13.5px; margin-top:18px}

/* Lo que no ves en una foto */
.nover{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,50px); align-items:center; background:var(--crema);
  border-radius:var(--radio); padding:clamp(28px,4vw,50px); margin-top:66px}
.nover h2{text-align:left; margin-bottom:12px}
.nover p{color:var(--muted); margin-bottom:20px}
.habilidades{display:flex; flex-wrap:wrap; gap:8px}
.hab{background:#fff; border:1.5px solid var(--linea); border-radius:999px; padding:7px 15px; font-size:14px; font-weight:600}
@media(max-width:820px){ .nover{grid-template-columns:1fr} .nover h2{text-align:center} }

/* Nuestras familias */
.familias-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px}
@media(max-width:1000px){ .familias-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .familias-grid{grid-template-columns:1fr} }
.fam{background:var(--crema); border-radius:18px; padding:22px}
.fam svg{width:26px; height:26px; stroke:var(--rosado); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; margin-bottom:10px}
.fam strong{display:block; margin-bottom:3px; font-size:16px}
.fam span{font-size:13.8px; color:var(--muted)}
.cierre-familias{text-align:center; font-size:clamp(17px,2.4vw,21px); font-weight:700; max-width:44ch; margin:0 auto 22px; text-wrap:balance}
.centrado{text-align:center}

/* Portal de familias */
.portal{background:var(--turquesa-s); border-radius:var(--radio); padding:clamp(30px,5vw,54px); margin-top:66px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,54px); align-items:center}
.portal h2{text-align:left; margin-bottom:12px}
.portal>div>p{color:var(--muted); margin-bottom:22px; max-width:46ch}
.portal ul{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px}
.portal li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px}
.portal li svg{width:21px; height:21px; stroke:var(--turquesa); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; margin-top:2px}
.destacado{display:inline-block; background:var(--marino); color:#fff; font-size:12.5px; font-weight:700; border-radius:999px; padding:5px 14px; margin-bottom:14px; letter-spacing:.02em}
@media(max-width:820px){ .portal{grid-template-columns:1fr} .portal h2{text-align:center} .portal>div>p{margin-left:auto; margin-right:auto; text-align:center} }

.telefono{width:250px; margin:0 auto; background:#fff; border-radius:30px; padding:12px 10px 16px; box-shadow:0 24px 50px rgba(27,54,93,.24); color:var(--ink)}
.telefono .top{display:flex; align-items:center; gap:8px; padding:2px 8px 10px; border-bottom:1px solid var(--linea); margin-bottom:10px}
.telefono .top img{height:19px; width:auto}
.tf{display:flex; gap:9px; padding:9px 8px; align-items:flex-start}
.tf+.tf{border-top:1px solid var(--linea)}
.tf .ico{width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.tf b{display:block; font-size:12.5px; line-height:1.35}
.tf span{font-size:12.5px; color:var(--muted); line-height:1.4}
.tf .hora{margin-left:auto; font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; flex-shrink:0}

/* Instalaciones */
.instalaciones{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){ .instalaciones{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .instalaciones{grid-template-columns:1fr} }
.inst{display:flex; gap:14px; align-items:flex-start; background:var(--crema); border-radius:18px; padding:20px}
.inst svg{width:26px; height:26px; stroke:var(--naranja); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; margin-top:2px}
.inst strong{display:block; margin-bottom:3px; font-size:16px}
.inst span{font-size:13.8px; color:var(--muted)}

/* FAQ */
.faq{max-width:760px; margin:0 auto}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer; padding:19px 34px 19px 0; font-weight:700; font-size:16.5px; list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:6px; top:26px; width:9px; height:9px;
  border-right:2.4px solid var(--rosado); border-bottom:2.4px solid var(--rosado); transform:rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg); top:30px}
.faq summary:focus-visible{outline:3px solid var(--turquesa); outline-offset:2px; border-radius:6px}
.faq p{color:var(--muted); padding:0 30px 20px 0; margin-top:-4px; font-size:15.5px}

/* Visita */
.visita{background:var(--rosado-s); border-radius:var(--radio); padding:clamp(28px,5vw,50px); margin-top:66px;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,44px); align-items:center}
.visita h2{text-align:left; margin-bottom:10px}
.visita>div>p{color:var(--muted); margin-bottom:20px}
.campo{margin-bottom:13px}
.campo label{display:block; font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px}
.campo input, .campo select{width:100%; font-family:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1.8px solid #E8D3DF; border-radius:12px; padding:12px 14px}
.campo input:focus, .campo select:focus{outline:none; border-color:var(--rosado); box-shadow:0 0 0 3px rgba(227,28,121,.16)}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.aviso{font-size:13px; color:var(--muted); margin-top:11px}
.contacto-directo{margin-top:22px; padding-top:20px; border-top:1px solid #F0D8E5; font-size:15.5px}
.contacto-directo a{color:var(--marino); font-weight:600; text-decoration:none}
.contacto-directo a:hover{color:var(--rosado)}
.contacto-directo div{margin-bottom:7px; display:flex; gap:9px; align-items:center}
.contacto-directo svg{width:18px; height:18px; stroke:var(--rosado); fill:none; stroke-width:2; flex-shrink:0}
@media(max-width:820px){ .visita{grid-template-columns:1fr} .visita h2{text-align:center} .visita>div>p{text-align:center} }

footer{margin-top:70px; border-top:1px solid var(--linea); padding:40px 0 96px; text-align:center}
footer img{height:32px; width:auto; margin:0 auto 16px}
.lema{font-weight:800; font-size:clamp(18px,3.2vw,23px); margin-bottom:18px; text-wrap:balance}
.lema em{font-style:normal; color:var(--rosado)}
.pie-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; font-size:14.5px; color:var(--muted); margin-bottom:14px}
.pie-links a{text-decoration:none}
.pie-links a:hover{color:var(--rosado)}
.copy{font-size:13px; color:var(--muted)}

.cta-fijo{position:fixed; z-index:70; display:none;
  left:max(14px, env(safe-area-inset-left)); right:max(14px, env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom))}
.cta-fijo a{width:100%; box-shadow:0 10px 26px rgba(0,0,0,.24); padding:15px}
@media(max-width:1380px){ .cta-fijo{display:block} footer{padding-bottom:calc(104px + env(safe-area-inset-bottom))} }
@media(max-width:560px){ .btn{white-space:normal; text-align:center} }

/* ==================== PÁGINAS INTERNAS ==================== */

/* Migas de pan */
.migas{font-size:13.5px; color:var(--muted); padding:18px 0 0; display:flex; gap:8px; flex-wrap:wrap}
.migas a{text-decoration:none}
.migas a:hover{color:var(--rosado)}
.migas span{opacity:.55}

/* Encabezado de página interna */
.encabezado{padding:28px 0 8px; max-width:60ch}
.encabezado h1{font-size:clamp(29px,4.6vw,44px); margin-bottom:14px}
.encabezado p{color:var(--muted); font-size:17.5px}

/* Bloque de contenido con foto al lado */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,50px); align-items:center; margin-top:16px}
.duo.invertido>*:first-child{order:2}
.duo h2{text-align:left; margin-bottom:14px}
.duo p{color:var(--muted)}
.duo p + p{margin-top:12px}
@media(max-width:820px){
  .duo{grid-template-columns:1fr}
  .duo.invertido>*:first-child{order:0}
  .duo h2{text-align:center}
}

/* Marcador de contenido pendiente — se ve intencional, no roto */
.pendiente{border:2px dashed var(--linea); border-radius:18px; padding:26px 24px; background:var(--crema)}
.pendiente strong{display:block; font-size:15px; margin-bottom:5px; color:var(--marino)}
.pendiente span{font-size:14px; color:var(--muted); display:block; max-width:56ch}

/* Convicciones */
.creencias{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media(max-width:760px){ .creencias{grid-template-columns:1fr} }
.creencia{background:var(--crema); border-radius:18px; padding:24px}
.creencia h3{font-size:19px; margin-bottom:7px; line-height:1.25}
.creencia p{font-size:14.5px; color:var(--muted)}

/* Equipo */
.equipo{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:900px){ .equipo{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .equipo{grid-template-columns:1fr} }
.persona{text-align:center}
.persona .retrato{aspect-ratio:1; border-radius:18px; background:var(--marino-s); display:flex;
  align-items:center; justify-content:center; margin-bottom:11px; overflow:hidden}
.persona .retrato img{height:64%; width:auto}
.persona strong{display:block; font-size:16px}
.persona .rol{font-size:13.5px; color:var(--rosado); font-weight:700; margin-bottom:4px}
.persona span{font-size:13.5px; color:var(--muted)}

/* Selector de Chikis */
.selector{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:8px}
.selector a{display:flex; align-items:center; gap:9px; text-decoration:none; border:2px solid var(--linea);
  border-radius:999px; padding:8px 18px 8px 10px; font-weight:700; font-size:15px; transition:border-color .15s}
.selector a:hover{border-color:var(--rosado)}
.selector a img{height:32px; width:auto}
.selector a small{display:block; font-size:12.5px; color:var(--muted); font-weight:600}

/* Detalle de cada Chiki */
.chiki-detalle{border-radius:var(--radio); padding:clamp(26px,4vw,44px); margin-top:22px; scroll-margin-top:90px}
.chiki-detalle .cabecera{display:flex; gap:18px; align-items:center; margin-bottom:20px; flex-wrap:wrap}
.chiki-detalle .cabecera img{height:74px; width:auto}
.chiki-detalle .edad{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em}
.chiki-detalle h2{text-align:left; margin:2px 0 0; font-size:clamp(24px,3.4vw,31px)}
.chiki-detalle .resumen{font-size:17px; margin-bottom:22px; max-width:58ch}
.detalle-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:760px){ .detalle-grid{grid-template-columns:1fr} }
.detalle-grid h4{font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:9px}
.detalle-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:7px}
.detalle-grid li{display:flex; gap:9px; font-size:14.5px; align-items:flex-start}
.detalle-grid li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--c); flex-shrink:0; margin-top:8px}
.detalle-grid p{font-size:14.5px; color:var(--muted)}
.ratio{display:inline-block; background:#fff; border-radius:12px; padding:11px 16px; font-weight:700; font-size:15px}
.ratio span{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}

/* Comparativa */
.comparativa{overflow-x:auto; margin-top:16px}
.comparativa table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px}
.comparativa th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:0 14px 10px 0; border-bottom:2px solid var(--linea)}
.comparativa td{padding:13px 14px 13px 0; border-bottom:1px solid var(--linea); vertical-align:middle}
.comparativa td:last-child{padding-right:0}
.comparativa .nombre{font-weight:800; display:flex; align-items:center; gap:10px}
.comparativa .nombre img{height:34px; width:auto}

/* Enfoque a fondo */
.enfoque{border-radius:var(--radio); padding:clamp(24px,3.5vw,38px); margin-top:16px; background:var(--crema)}
.enfoque .titulo{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.enfoque .ic{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.enfoque .ic svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.enfoque h2{text-align:left; margin:0; font-size:clamp(22px,3vw,28px); letter-spacing:.02em}
.enfoque .que{font-size:16.5px; margin-bottom:18px; max-width:60ch}
.enfoque .partes{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:760px){ .enfoque .partes{grid-template-columns:1fr} }
.enfoque h4{font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:7px}
.enfoque .partes p{font-size:14.5px; color:var(--muted)}
.enfoque .partes .aula{background:#fff; border-radius:14px; padding:16px 18px; font-size:14.5px; font-style:italic; color:var(--ink)}

/* Marcos de respaldo */
.marcos{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media(max-width:760px){ .marcos{grid-template-columns:1fr} }
.marco{border:2px solid var(--linea); border-radius:18px; padding:22px}
.marco strong{display:block; font-size:17px; margin-bottom:5px}
.marco span{font-size:14.5px; color:var(--muted)}

/* Pasos numerados */
.pasos{display:grid; gap:12px; counter-reset:paso; margin-top:16px}
.paso{counter-increment:paso; background:var(--crema); border-radius:16px; padding:20px 22px 20px 62px; position:relative}
.paso::before{content:counter(paso); position:absolute; left:20px; top:19px; width:28px; height:28px;
  border-radius:9px; background:var(--rosado); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px}
.paso strong{display:block; font-size:16.5px; margin-bottom:3px}
.paso span{font-size:14.5px; color:var(--muted)}

/* Momentos del día, versión extendida */
.jornada{display:grid; gap:12px; margin-top:16px}
.jornada .tramo{display:grid; grid-template-columns:92px 1fr; gap:20px; background:#fff;
  border:1px solid var(--linea); border-radius:16px; padding:20px 22px; align-items:start}
@media(max-width:620px){ .jornada .tramo{grid-template-columns:1fr; gap:6px} }
.jornada .hora{font-weight:800; font-size:16px; color:var(--c); font-variant-numeric:tabular-nums}
.jornada h3{margin-bottom:5px}
.jornada p{font-size:14.5px; color:var(--muted)}
.jornada .aprende{font-size:13.5px; color:var(--ink); margin-top:8px; font-weight:600}
.jornada .aprende b{color:var(--c)}

/* Franja de cierre reutilizable */
.cierre-pagina{background:var(--crema); border-radius:var(--radio); padding:clamp(28px,4vw,46px);
  margin-top:66px; text-align:center}
.cierre-pagina h2{margin-bottom:10px}
.cierre-pagina p{color:var(--muted); max-width:48ch; margin:0 auto 22px}
.cierre-pagina .botonera{justify-content:center; margin-bottom:0}

/* ==================== OLA 2 ==================== */

/* Lista con palomitas */
.incluye{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px}
.incluye li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px}
.incluye li svg{width:20px; height:20px; stroke:var(--turquesa); fill:none; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; margin-top:3px}
.incluye.no li svg{stroke:var(--muted)}
.incluye.no li{color:var(--muted)}

/* Testimonios */
.testimonios{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){ .testimonios{grid-template-columns:1fr} }
.testimonio{background:var(--crema); border-radius:20px; padding:26px 24px; display:flex; flex-direction:column}
.testimonio .comilla{font-size:44px; line-height:.7; color:var(--rosado); font-weight:800; margin-bottom:8px}
.testimonio p{font-size:15.5px; flex:1; margin-bottom:16px}
.testimonio .quien{display:flex; gap:11px; align-items:center}
.testimonio .quien .cara{width:42px; height:42px; border-radius:50%; background:var(--marino-s);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden}
.testimonio .quien .cara img{height:74%; width:auto}
.testimonio .quien strong{display:block; font-size:15px}
.testimonio .quien span{font-size:13px; color:var(--muted)}

/* Blog */
.temas{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom:28px}
.tema{border:2px solid var(--linea); border-radius:999px; padding:7px 17px; font-size:14px; font-weight:700;
  text-decoration:none; color:var(--muted)}
.tema:hover, .tema.activo{border-color:var(--rosado); color:var(--rosado)}

.destacada{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(22px,4vw,44px); align-items:center;
  background:var(--crema); border-radius:var(--radio); padding:clamp(26px,4vw,44px); margin-bottom:30px}
@media(max-width:820px){ .destacada{grid-template-columns:1fr} }
.destacada .etiqueta{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rosado); margin-bottom:10px}
.destacada h2{text-align:left; margin-bottom:12px; font-size:clamp(23px,3.4vw,31px)}
.destacada p{color:var(--muted); margin-bottom:18px}

.notas{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:900px){ .notas{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .notas{grid-template-columns:1fr} }
.nota{border:1.5px solid var(--linea); border-radius:20px; overflow:hidden; display:flex; flex-direction:column;
  text-decoration:none; transition:border-color .15s ease, transform .15s ease}
.nota:hover{border-color:var(--rosado); transform:translateY(-2px)}
.nota .tapa{aspect-ratio:16/10; display:flex; align-items:center; justify-content:center}
.nota .tapa img{height:52%; width:auto}
.nota .cuerpo{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.nota .tema-nota{font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:7px}
.nota h3{font-size:17.5px; margin-bottom:7px; line-height:1.28}
.nota p{font-size:14px; color:var(--muted); flex:1}
.nota .pie-nota{font-size:12.5px; color:var(--muted); margin-top:12px}
.nota.proxima{opacity:.62; pointer-events:none}
.nota.proxima .pie-nota{color:var(--ambar, #B07A00); font-weight:700}

/* Artículo */
.articulo{max-width:70ch; margin:0 auto}
.articulo .meta-nota{display:flex; gap:12px; align-items:center; margin:18px 0 26px; flex-wrap:wrap}
.articulo .meta-nota .cara{width:44px; height:44px; border-radius:50%; background:var(--turquesa-s);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0}
.articulo .meta-nota .cara img{height:74%; width:auto}
.articulo .meta-nota strong{display:block; font-size:15px}
.articulo .meta-nota span{font-size:13.5px; color:var(--muted)}
.articulo h2{text-align:left; font-size:clamp(21px,2.9vw,26px); margin:34px 0 12px}
.articulo h3{font-size:18px; margin:26px 0 8px}
.articulo p{font-size:17px; margin-bottom:16px}
.articulo p.entradilla{font-size:19px; color:var(--muted)}
.articulo ol.preguntas{list-style:none; padding:0; margin:20px 0 0; counter-reset:pr; display:grid; gap:14px}
.articulo ol.preguntas li{counter-increment:pr; background:var(--crema); border-radius:16px;
  padding:20px 22px 20px 60px; position:relative}
.articulo ol.preguntas li::before{content:counter(pr); position:absolute; left:20px; top:19px;
  width:26px; height:26px; border-radius:8px; background:var(--rosado); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px}
.articulo ol.preguntas strong{display:block; font-size:16.5px; margin-bottom:5px}
.articulo ol.preguntas span{font-size:14.5px; color:var(--muted)}
.cita{border-left:4px solid var(--rosado); padding:4px 0 4px 20px; margin:24px 0; font-size:18px;
  font-weight:700; line-height:1.4}

/* ==================== CALENDARIO DE LA WEB ==================== */
.cal-filtros{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom:30px}
.cal-filtro{border:2px solid var(--linea); border-radius:999px; padding:7px 16px; font-size:14px;
  font-weight:700; background:none; font-family:inherit; color:var(--muted); cursor:pointer}
.cal-filtro:hover{border-color:var(--rosado); color:var(--rosado)}
.cal-filtro[aria-pressed="true"]{border-color:var(--rosado); background:var(--rosado); color:#fff}
.cal-filtro .n{font-variant-numeric:tabular-nums; opacity:.75; margin-left:4px}

.cal-mes{margin-bottom:34px}
.cal-mes h3{font-size:20px; margin-bottom:12px; text-transform:capitalize;
  padding-bottom:8px; border-bottom:2px solid var(--linea)}
.cal-evento{display:grid; grid-template-columns:66px 1fr; gap:16px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--linea)}
.cal-evento:last-child{border-bottom:none}
.cal-evento .caja-fecha{text-align:center}
.cal-evento .caja-fecha .n{font-size:21px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--c)}
.cal-evento .caja-fecha .sem{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.cal-evento h4{font-size:16.5px; margin-bottom:3px; letter-spacing:-.01em}
.cal-evento p{font-size:14px; color:var(--muted)}
.cal-evento .etiqueta{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; border-radius:999px; padding:3px 10px; margin-top:6px;
  background:var(--f); color:var(--c)}
.cal-vacio{text-align:center; color:var(--muted); padding:40px 0}
.cal-nota{text-align:center; color:var(--muted); font-size:13.5px; margin-top:26px}
@media(max-width:520px){
  .cal-evento{grid-template-columns:52px 1fr; gap:12px}
  .cal-evento .caja-fecha .n{font-size:18px}
}

/* ==================== AFINADO PARA PANTALLAS TÁCTILES ====================
   Va por `pointer:coarse` y no por ancho: lo que cambia no es el tamaño de la
   pantalla sino que se navega con el dedo. Así aplica también en tablets. */
@media (pointer: coarse) {
  /* 44px es el objetivo táctil mínimo recomendado por Apple y Google. */
  .btn, .wa-icono { min-height: 46px }
  nav a, .pie-links a, .migas a { min-height: 44px; display: inline-flex; align-items: center }
  .cal-filtros button { min-height: 44px }
  .menu-btn { min-height: 44px; min-width: 44px }
  /* El destello gris de Android al tocar se ve sucio sobre nuestros colores. */
  a, button { -webkit-tap-highlight-color: transparent }
  /* En táctil el `:hover` se queda pegado después de tocar. */
  .btn:hover { filter: none; transform: none }
  nav a:hover { color: var(--muted); border-bottom-color: transparent }
  .pie-links a:hover { color: var(--muted) }
}

/* El desenfoque de la barra superior cuesta caro al hacer scroll en teléfonos
   de gama baja. En pantallas pequeñas se cambia por un blanco casi opaco:
   el resultado se ve igual y el scroll va suave. */
@media (max-width: 820px) {
  .barra { backdrop-filter: none; background: rgba(255,255,255,.985) }
}

/* ---------- Páginas legales ---------- */
.legal{max-width:68ch; margin:0 auto}
.legal h2{text-align:left; font-size:clamp(21px,2.8vw,26px); margin:38px 0 12px}
.legal h3{font-size:17.5px; margin:26px 0 8px}
.legal p, .legal li{color:var(--muted); font-size:16px}
.legal p{margin-bottom:13px}
.legal ul{margin:0 0 16px; padding-left:22px}
.legal li{margin-bottom:7px}
.legal strong{color:var(--ink)}
.legal .actualizado{font-size:14px; color:var(--muted); border-left:3px solid var(--linea);
  padding-left:14px; margin-bottom:28px}
.legal .tabla-datos{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15px}
.legal .tabla-datos th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); padding:9px 12px; border-bottom:2px solid var(--linea)}
.legal .tabla-datos td{padding:10px 12px; border-bottom:1px solid var(--linea); vertical-align:top; color:var(--muted)}
.legal .tabla-datos td:first-child{color:var(--ink); font-weight:600; white-space:nowrap}
.legal .destacado{background:var(--crema); border-radius:16px; padding:20px 22px; margin:0 0 22px}
.legal .destacado p:last-child{margin-bottom:0}
.legal .contacto{background:var(--marino-s); border-radius:16px; padding:22px; margin-top:30px}
.legal .contacto p:last-child{margin-bottom:0}
@media(max-width:560px){ .legal .tabla-datos td:first-child{white-space:normal} }