/* Webs Kids&Us Latina y Pozuelo. Paleta muestreada del logo oficial.
   Sin JavaScript: todo lo interactivo (preguntas) es HTML nativo. */

@font-face{font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fuentes/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fuentes/nunito-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --rojo:#ea5160;--rosa:#f087aa;--turquesa:#31b7bc;--verde:#9fbd75;--naranja:#ee7326;
  /* Variantes oscuras para texto y botones: los tonos de marca sobre blanco no llegan
     al contraste mínimo de lectura (WCAG AA). */
  --rojo-osc:#c93544;--rosa-osc:#bf4a72;--turquesa-osc:#197a7e;--verde-osc:#56752f;--naranja-osc:#b3500d;
  --tinte-rojo:#fdecee;--tinte-rosa:#fdeef3;--tinte-turquesa:#e5f5f5;--tinte-verde:#f0f5e9;--tinte-naranja:#fdf0e5;
  --crema:#fffdfb;--tinta:#2f2f33;--suave:#5b5b64;--linea:#efe6e1;
  --radio:28px;--ancho:1160px;--sombra:0 12px 40px rgba(47,47,51,.09);
}
.acento-turquesa{--acento:var(--turquesa);--acento-osc:var(--turquesa-osc);--acento-tinte:var(--tinte-turquesa)}
.acento-rosa{--acento:var(--rosa);--acento-osc:var(--rosa-osc);--acento-tinte:var(--tinte-rosa)}
.color-rojo{--e:var(--rojo);--e-osc:var(--rojo-osc);--e-tinte:var(--tinte-rojo)}
.color-rosa{--e:var(--rosa);--e-osc:var(--rosa-osc);--e-tinte:var(--tinte-rosa)}
.color-turquesa{--e:var(--turquesa);--e-osc:var(--turquesa-osc);--e-tinte:var(--tinte-turquesa)}
.color-verde{--e:var(--verde);--e-osc:var(--verde-osc);--e-tinte:var(--tinte-verde)}
.color-naranja{--e:var(--naranja);--e-osc:var(--naranja-osc);--e-tinte:var(--tinte-naranja)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tinta);
  background:var(--crema);line-height:1.65;font-size:1.0625rem;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--rojo-osc)}
.contenedor{max-width:var(--ancho);margin:0 auto;padding-inline:clamp(1rem,4vw,1.75rem)}
h1,h2,h3{line-height:1.12;letter-spacing:-.015em;font-weight:900}
h1{font-size:clamp(2.2rem,5.6vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.8vw,2.7rem);margin-bottom:.7rem}
h3{font-size:1.2rem;font-weight:800}
p{color:var(--suave)}
section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.antetitulo{display:inline-block;font-size:.8rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--acento-osc);margin-bottom:.6rem}
.intro{max-width:60ch;margin-bottom:2.6rem;font-size:1.1rem}
.saltar{position:absolute;left:-999px;top:.5rem;background:#fff;padding:.5rem 1rem;border-radius:8px;z-index:100}
.saltar:focus{left:.5rem}
:focus-visible{outline:3px solid var(--turquesa-osc);outline-offset:3px}
.pendiente{background:#ffe066;color:#5a4300;padding:0 .3em;border-radius:4px;font-weight:700;font-size:.9em}

/* --- botones --- */
.boton{display:inline-flex;align-items:center;gap:.5rem;background:var(--rojo-osc);color:#fff;text-decoration:none;
  padding:.8rem 1.4rem;border-radius:99px;font-weight:800;font-size:1rem;line-height:1.2;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;box-shadow:0 6px 18px rgba(201,53,68,.25)}
.boton:hover{background:#b02b3a;transform:translateY(-2px)}
.boton.claro{background:#fff;color:var(--rojo-osc);box-shadow:inset 0 0 0 2px var(--rojo-osc)}
.boton.claro:hover{background:var(--tinte-rojo)}
.boton.grande{padding:1rem 1.7rem;font-size:1.08rem}
.acciones{display:flex;gap:.8rem;flex-wrap:wrap}

/* --- cabecera --- */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(255,253,251,.94);backdrop-filter:blur(10px)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.65rem}
.marca img{height:44px;width:auto}
.menu{display:flex;gap:1.5rem}
.menu a{color:var(--tinta);text-decoration:none;font-weight:800;font-size:.97rem}
.menu a:hover{color:var(--rojo-osc)}
.franja{display:flex;height:6px}
.franja span{flex:1}
.franja span:nth-child(1){background:var(--rosa)}.franja span:nth-child(2){background:var(--naranja)}
.franja span:nth-child(3){background:var(--turquesa)}.franja span:nth-child(4){background:var(--rojo)}
.franja span:nth-child(5){background:var(--verde)}
@media(max-width:900px){.menu{display:none}.cabecera .boton{padding:.6rem 1rem;font-size:.9rem}}
@media(max-width:420px){.cabecera .boton{display:none}}

/* --- portada --- */
.portada{position:relative;overflow:hidden;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}
.portada::before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-220px;border-radius:50%;
  background:var(--acento-tinte);z-index:-1}
.portada-rejilla{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1.05fr .95fr;align-items:center}
.pastilla{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border-radius:99px;padding:.45rem 1rem;
  font-size:.9rem;font-weight:800;color:var(--acento-osc);margin-bottom:1.3rem;box-shadow:0 3px 14px rgba(47,47,51,.08)}
.pastilla::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--acento)}
.portada h1{margin-bottom:1rem;max-width:15ch}
.portada h1 em{font-style:normal;color:var(--acento-osc)}
.entradilla{font-size:clamp(1.08rem,2.2vw,1.28rem);max-width:48ch;margin-bottom:2rem;color:#4b4b53}
.valoracion{margin-top:1.6rem;font-size:.98rem;color:var(--tinta)}
.estrellas{color:#f2a900;letter-spacing:.08em;margin-right:.2rem}
.antes{margin-top:.5rem;font-size:.9rem}
.portada-foto{position:relative;max-width:500px;justify-self:center;width:100%}
.mancha{position:absolute;inset:7% -5% -3% 9%;background:var(--acento);
  border-radius:46% 54% 42% 58%/55% 45% 55% 45%;transform:rotate(-7deg)}
.burbuja{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:44% 56% 48% 52%/40% 42% 58% 60%;box-shadow:var(--sombra)}
.pegatina{position:absolute;left:-6%;bottom:12%;background:#fff;font-weight:900;padding:.75rem 1.05rem;
  border-radius:18px;transform:rotate(-7deg);box-shadow:var(--sombra);font-size:1rem;line-height:1.2;color:var(--tinta)}
.pegatina small{display:block;font-weight:700;color:var(--suave);font-size:.78rem}
.punto{position:absolute;border-radius:50%}
.punto.p1{width:22px;height:22px;background:var(--naranja);right:4%;top:2%}
.punto.p2{width:14px;height:14px;background:var(--verde);right:-3%;top:18%}
.punto.p3{width:30px;height:30px;background:var(--rosa);left:4%;top:8%}
@media(max-width:860px){.portada-rejilla{grid-template-columns:1fr}.portada-foto{max-width:360px}
  .portada h1{max-width:none}.pegatina{left:-2%}}

/* --- cifras --- */
.cifras{background:#fff;padding-block:2.2rem;border-block:1px solid var(--linea)}
.cifras ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:center}
.cifras strong{display:block;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;line-height:1.1}
.cifras li:nth-child(1) strong{color:var(--rojo-osc)}.cifras li:nth-child(2) strong{color:var(--turquesa-osc)}
.cifras li:nth-child(3) strong{color:var(--naranja-osc)}.cifras li:nth-child(4) strong{color:var(--verde-osc)}
.cifras span{font-size:.92rem;color:var(--suave)}
.cifras p{text-align:center;font-size:.8rem;margin-top:1rem}
@media(max-width:700px){.cifras ul{grid-template-columns:repeat(2,1fr)}}

/* --- recorrido (etapas) --- */
.etapas{list-style:none;display:grid;gap:1.2rem;grid-template-columns:repeat(4,1fr);counter-reset:etapa}
.etapa{background:var(--e-tinte);border-radius:var(--radio);padding:1.4rem 1.3rem 1.5rem;display:flex;flex-direction:column;
  position:relative}
.etapa-cabeza{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--tinta);margin-bottom:.8rem}
.etapa-cabeza img,.etapa-rango{width:74px;height:74px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 4px #fff}
.etapa-rango{display:grid;place-items:center;background:var(--e);color:#fff;font-weight:900;font-size:1.25rem}
.etapa-nombre{display:block;font-size:1.45rem;font-weight:900;line-height:1}
.etapa-edades{display:block;font-size:.92rem;color:var(--e-osc);font-weight:800}
.etapa-lema{font-weight:800;color:var(--tinta);font-size:.98rem;margin-bottom:.9rem}
.cursos{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem;flex:1}
.cursos li{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.95rem;flex-wrap:wrap}
.edad{display:inline-grid;place-items:center;min-width:2rem;height:2rem;border-radius:50%;background:#fff;
  color:var(--e-osc);font-weight:900;font-size:.9rem}
.sello{font-size:.72rem;font-weight:900;letter-spacing:.03em;background:var(--tinta);color:#fff;padding:.2rem .5rem;border-radius:99px;white-space:nowrap}
.cursos .sello{margin-left:auto}
.leyenda{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.88rem;margin:-1.6rem 0 1.8rem;--e-osc:var(--suave)}
.leyenda .edad{background:#fff;box-shadow:0 0 0 1px var(--linea);width:1.7rem;min-width:1.7rem;height:1.7rem;font-size:.8rem}
.leyenda .sello{margin-left:.8rem}
.enlace{font-weight:800;color:var(--e-osc);text-decoration:none}
.enlace:hover{text-decoration:underline}
.meta{margin-top:1.6rem;background:var(--tinta);color:#fff;border-radius:var(--radio);padding:1.4rem 1.6rem;
  display:flex;gap:1rem 2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.meta p{color:rgba(255,255,255,.86);max-width:62ch}
.meta strong{color:#fff}
.meta a{color:#fff;font-weight:800}
@media(max-width:1000px){.etapas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.etapas{grid-template-columns:1fr}}

/* --- método --- */
.pasos{display:grid;gap:1.2rem;grid-template-columns:repeat(4,1fr);counter-reset:paso;list-style:none}
.paso{background:#fff;border-radius:var(--radio);padding:1.8rem 1.5rem;box-shadow:var(--sombra);position:relative;overflow:hidden}
.paso::before{counter-increment:paso;content:counter(paso);display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border-radius:50%;background:var(--e);color:#fff;font-weight:900;font-size:1.15rem;margin-bottom:1rem}
.paso h3{margin-bottom:.4rem}
.paso p{font-size:.97rem}
@media(max-width:1000px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pasos{grid-template-columns:1fr}}

/* --- una clase por dentro --- */
.doble-foto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.foto-ancha{border-radius:var(--radio);box-shadow:var(--sombra);width:100%}
.doble-foto .claves{grid-template-columns:1fr;gap:.6rem}
@media(max-width:860px){.doble-foto{grid-template-columns:1fr}}

/* --- fotos del centro --- */
.mosaico{columns:3 260px;column-gap:1rem}
.mosaico img{width:100%;border-radius:20px;margin-bottom:1rem;break-inside:avoid}

/* --- preguntas --- */
.preguntas{max-width:820px}
.preguntas details{background:#fff;border-radius:20px;margin-bottom:.8rem;box-shadow:0 3px 18px rgba(47,47,51,.05)}
.preguntas summary{cursor:pointer;list-style:none;padding:1.15rem 3.2rem 1.15rem 1.4rem;font-weight:800;position:relative}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";position:absolute;right:1.3rem;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:900;color:var(--rojo-osc);transition:transform .2s ease}
.preguntas details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.preguntas details p{padding:0 1.4rem 1.3rem}

/* --- cierre --- */
.cierre{background:var(--tinta);color:#fff;text-align:center;position:relative;overflow:hidden}
.cierre::before,.cierre::after{content:"";position:absolute;border-radius:50%;opacity:.9}
.cierre::before{width:180px;height:180px;background:var(--acento);left:-60px;top:-60px}
.cierre::after{width:120px;height:120px;background:var(--naranja);right:-30px;bottom:-40px}
.cierre h2{color:#fff;position:relative}
.cierre p{color:rgba(255,255,255,.8);max-width:48ch;margin:0 auto 1.8rem;position:relative}
.cierre .acciones{justify-content:center;position:relative}
.cierre .boton.claro{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
@media(max-width:760px){.cierre::before{width:110px;height:110px;left:-60px;top:-60px}
  .cierre::after{width:80px;height:80px}}

/* --- páginas de etapa --- */
.cabeza-etapa{background:var(--e-tinte);padding-block:clamp(2.5rem,6vw,4.5rem)}
.cabeza-rejilla{display:grid;grid-template-columns:1.3fr .7fr;gap:2.5rem;align-items:center}
.migas{font-size:.9rem;margin-bottom:1rem;color:var(--suave)}
.migas a{color:var(--e-osc);font-weight:700}
.cabeza-etapa h1{margin-bottom:1rem;font-size:clamp(2rem,5vw,3.3rem)}
.cabeza-etapa .rango{color:var(--e-osc)}
.lema{font-weight:900;color:var(--e-osc);font-size:1.15rem;margin-bottom:1.6rem}
.cabeza-imagen img{width:100%;max-width:340px;aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 10px #fff,var(--sombra);margin-inline:auto}
.cabeza-imagen .etapa-rango{width:220px;height:220px;font-size:3rem;margin-inline:auto;box-shadow:0 0 0 10px #fff}
@media(max-width:760px){.cabeza-rejilla{grid-template-columns:1fr}.cabeza-imagen{order:-1}
  .cabeza-imagen img{max-width:200px}.cabeza-imagen .etapa-rango{width:150px;height:150px;font-size:2.2rem}}
.claves{list-style:none;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:3rem}
.claves li{background:#fff;border-radius:20px;padding:1.1rem 1.2rem 1.1rem 3rem;position:relative;font-weight:700;
  box-shadow:0 3px 18px rgba(47,47,51,.05)}
.claves li::before{content:"";position:absolute;left:1.2rem;top:1.35rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--e)}
.lista-cursos{display:grid;gap:1rem}
.curso{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;background:#fff;border-radius:var(--radio);padding:1.4rem;
  box-shadow:0 3px 18px rgba(47,47,51,.05);align-items:start}
.curso-edad{width:4.4rem;height:4.4rem;border-radius:50%;background:var(--e-tinte);color:var(--e-osc);display:grid;
  place-content:center;text-align:center;font-size:.72rem;font-weight:800;line-height:1.1}
.curso-edad span{font-size:1.5rem;font-weight:900;display:block}
.curso h3{margin-bottom:.3rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.otras{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.otras a{display:block;background:var(--e-tinte);border-radius:22px;padding:1.2rem 1.3rem;text-decoration:none;color:var(--tinta)}
.otras strong{display:block;font-size:1.2rem;font-weight:900}
.otras span{color:var(--e-osc);font-weight:800;font-size:.92rem}

/* --- Trinity --- */
.tabla-trinity{width:100%;border-collapse:separate;border-spacing:0 .5rem;margin-bottom:1.5rem}
.tabla-trinity th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);padding:0 1rem}
.tabla-trinity td{background:#fff;padding:.9rem 1rem;font-weight:700}
.tabla-trinity td:first-child{border-radius:16px 0 0 16px}
.tabla-trinity td:last-child{border-radius:0 16px 16px 0}
.nivel-mcer{display:inline-grid;place-items:center;width:3rem;height:2.1rem;border-radius:99px;background:var(--tinta);color:#fff;font-weight:900}
.nota{font-size:.9rem}
.fuentes{margin-top:2rem;font-size:.92rem}
.fuentes li{margin-left:1.2rem}

/* --- contacto --- */
.contacto-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.ficha{background:#fff;border-radius:var(--radio);padding:1.8rem;box-shadow:var(--sombra)}
.ficha h2{font-size:1.5rem}
.dato{margin-bottom:1.2rem}
.etiqueta{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--acento-osc);font-weight:900}
.valor{font-size:1.08rem;color:var(--tinta);font-weight:700}
.valor a{color:var(--tinta)}
.telefono-grande{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900;color:var(--rojo-osc);text-decoration:none;display:inline-block;margin-block:.3rem .8rem}
@media(max-width:760px){.contacto-rejilla{grid-template-columns:1fr}}

/* --- textos legales --- */
.legal{max-width:760px}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:1.5rem}
.legal h2{font-size:1.3rem;margin:2rem 0 .5rem}
.legal p,.legal li{margin-bottom:.7rem}
.legal ul{margin-left:1.3rem}

/* --- pie --- */
.pie{background:#fff;border-top:1px solid var(--linea);padding-block:3rem 1.5rem;font-size:.95rem}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.pie img{height:40px;width:auto;margin-bottom:1rem}
.pie h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--suave);margin-bottom:.7rem}
.pie ul{list-style:none}
.pie li{margin-bottom:.35rem}
.pie a{color:var(--tinta);text-decoration:none;font-weight:700}
.pie a:hover{color:var(--rojo-osc)}
.pie-legal{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--linea);font-size:.82rem;color:var(--suave)}
@media(max-width:760px){.pie-rejilla{grid-template-columns:1fr}}

/* --- barra de contacto en móvil --- */
.barra-movil{display:none}
@media(max-width:760px){
  body{padding-bottom:4.2rem}
  .barra-movil{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;box-shadow:0 -6px 24px rgba(47,47,51,.12);padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom));gap:.5rem}
  .barra-movil a{display:block;text-align:center;padding:.75rem .4rem;border-radius:99px;font-weight:900;text-decoration:none;
    background:var(--tinte-rojo);color:var(--rojo-osc);font-size:.95rem}
  .barra-movil a:first-child{background:var(--rojo-osc);color:#fff}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}