: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: nueve retratos redondos con un anillo de la paleta.
   El fondo #7BCBD2 es el turquesa que traen las propias fotos —salen recortadas
   de las artes de Instagram del centro—, así no se ve dónde acaba la imagen.
   El encuadre sube al 14%: en una foto 4:5 la cara vive arriba, y un círculo
   centrado la cortaría por la barbilla. */
.equipo{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px}
@media(max-width:860px){ .equipo{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .equipo{grid-template-columns:1fr} }
.persona{text-align:center}
.persona .retrato{width:168px; max-width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  margin:0 auto 14px; background:#7BCBD2; box-shadow:0 0 0 5px #fff, 0 0 0 7px var(--anillo)}
.persona .retrato img{width:100%; height:100%; object-fit:cover; object-position:50% 14%}
.persona:nth-child(3n+1){--anillo:var(--turquesa)}
.persona:nth-child(3n+2){--anillo:var(--rosado)}
.persona:nth-child(3n+3){--anillo:var(--amarillo)}
.persona strong{display:block; font-size:17px}
.persona .rol{font-size:12.5px; color:var(--rosado); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:6px}
.persona span{display:block; font-size:14px; color:var(--muted); line-height:1.5; max-width:27ch; margin:0 auto}

/* 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} }