@font-face{font-family:"Outfit";src:url(fonts/outfit-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-r1.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  color-scheme:light;
  --crema:#F6EFE3; --tinta:#2B2118; --suave:#5E5046; --terracota:#B4472F; --terracota-hover:#9C3B26;
  --verde:#2F5D50; --verde-suave:#DDEFE5; --arena:#E9DCC6; --borde:#E2D4BC; --blanco:#FFFFFF; --error-suave:#FBE3DD;
  --ambar:#E0A526;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sombra:0 4px 0 rgba(43,33,24,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--sans);font-size:18px;line-height:1.4;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
main:focus{outline:0}
h1,h2{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;line-height:1.1;margin:0;text-wrap:balance}

.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;max-width:960px;width:100%;margin:0 auto}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:21px;min-height:48px}
.marca img{height:42px;width:auto}
.marca b{color:var(--terracota);font-weight:600}
.barra-der{display:flex;align-items:center;gap:10px}
.total{font-weight:700;background:var(--blanco);border-radius:999px;padding:8px 14px;white-space:nowrap}
.redondo{width:48px;height:48px;border-radius:50%;border:0;background:var(--blanco);font-size:23px;padding:0;display:grid;place-items:center}
.redondo[aria-pressed="true"]{background:var(--verde-suave);box-shadow:inset 0 0 0 3px var(--verde)}

main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:6px 16px 28px}
.aviso{text-align:center;padding:40px 0}
.pie{text-align:center;padding:10px 16px 18px;font-size:16px;color:var(--suave)}
.pie a{display:inline-block;padding:10px}

/* Inicio */
.hola{display:flex;align-items:center;gap:16px;margin:8px 0 20px}
.hola img{width:84px;height:auto;flex:none}
.hola h1{font-size:clamp(30px,6vw,44px)}
.hola p{margin:6px 0 0;color:var(--suave)}
.temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tarjeta-tema{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 8px 12px;border-radius:24px;text-decoration:none;box-shadow:var(--sombra);text-align:center;transition:transform .12s}
.tarjeta-tema:hover{transform:translateY(-2px)}
.tarjeta-tema .ico{font-size:50px;line-height:1.2}
.tarjeta-tema strong{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.15}
.tarjeta-tema small{font-size:16px;color:#4A3D32}
.estrellas{letter-spacing:2px;font-size:17px;min-height:25px}
.estrellas .apagada{filter:grayscale(1);opacity:.32}
.mezcla{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding:16px;min-height:68px;border-radius:24px;background:var(--verde);color:#fff;text-decoration:none;font-weight:700;font-size:20px;box-shadow:var(--sombra)}

/* Tema */
.cabeza{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.volver{flex:none;width:48px;height:48px;border-radius:50%;background:var(--blanco);display:grid;place-items:center;text-decoration:none;font-size:23px;font-weight:700}
.cabeza h1{font-size:30px}
.cabeza small{display:block;font-family:var(--sans);font-size:16px;font-weight:400;color:var(--suave)}
.actividades{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.actividad{display:flex;align-items:center;gap:14px;padding:16px;min-height:96px;border-radius:24px;background:var(--blanco);text-decoration:none;box-shadow:var(--sombra)}
.actividad .ico{font-size:40px;flex:none;width:52px;text-align:center}
.actividad strong{display:block;font-size:21px}
.actividad span span{display:block;color:var(--suave);font-size:16px}
.actividad .gano{margin-left:auto;font-size:24px;flex:none}
.actividad .gano.no{filter:grayscale(1);opacity:.32}

/* Dibujos */
.emoji{line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.mancha{display:block;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(43,33,24,.22)}
.cifra{font-family:var(--serif);font-weight:600;line-height:1}

/* Aprender */
.carta{background:var(--blanco);border-radius:28px;padding:22px 16px;text-align:center;box-shadow:var(--sombra);max-width:480px;margin:0 auto}
.carta .dibujo{width:100%;border:0;background:none;padding:0;display:grid;place-items:center;min-height:150px}
.carta .emoji{font-size:112px}
.carta .cifra{font-size:112px}
.carta .mancha{width:132px;height:132px}
.carta .pt{font-family:var(--serif);font-weight:600;font-size:clamp(34px,9vw,44px);margin:12px 0 0;line-height:1.1}
.carta .es{color:var(--suave);font-size:20px;margin:2px 0 12px}
.oir{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 24px;border:0;border-radius:999px;background:var(--terracota);color:#fff;font-weight:700;font-size:19px;box-shadow:var(--sombra)}
.oir:hover{background:var(--terracota-hover)}
.oir.sec{background:var(--arena);color:var(--tinta)}
.frase{margin-top:14px}
.frase p{margin:6px 0 0;color:var(--suave)}
.nota{background:#FFF4DC;border-radius:16px;padding:10px 14px;margin:14px 0 0;font-size:17px}
.pasos{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:480px;margin:16px auto 0}
.pasos .cuenta{font-weight:700;color:var(--suave)}
.paso{width:64px;height:64px;border-radius:50%;border:0;background:var(--blanco);font-size:27px;font-weight:700;box-shadow:var(--sombra);display:grid;place-items:center;text-decoration:none}
.paso:disabled{opacity:.35;box-shadow:none;cursor:default}

/* Juegos */
.avance{height:14px;background:var(--arena);border-radius:999px;overflow:hidden;margin-bottom:16px}
.avance i{display:block;height:100%;width:0;background:var(--verde);border-radius:999px;transition:width .3s}
.pregunta{text-align:center;margin-bottom:16px;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.pregunta p{margin:0;color:var(--suave)}
.pregunta .palabra{font-family:var(--serif);font-weight:600;font-size:clamp(36px,10vw,50px);color:var(--tinta);line-height:1.1}
.altavoz{width:88px;height:88px;border-radius:50%;border:0;background:var(--terracota);font-size:38px;box-shadow:var(--sombra);display:grid;place-items:center}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;margin:0 auto}
.op{min-height:136px;border:0;border-radius:24px;background:var(--blanco);box-shadow:var(--sombra);display:grid;place-items:center;padding:10px;transition:background .15s}
.op .emoji,.op .cifra{font-size:68px}
.op .mancha{width:84px;height:84px}
.op.bien{background:var(--verde-suave);box-shadow:inset 0 0 0 4px var(--verde)}
.op.mal{background:var(--error-suave);opacity:.55;animation:temblor .35s}
.op:disabled{cursor:default}
.animo{text-align:center;min-height:32px;margin:12px 0 0;font-weight:700;color:var(--verde)}
.animo.otra{color:var(--terracota-hover)}
@keyframes temblor{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* Memorice */
.memorice{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px;margin:0 auto}
.naipe{aspect-ratio:1/1.05;min-height:88px;border:0;border-radius:18px;background:var(--terracota);color:#fff;box-shadow:var(--sombra);display:grid;place-items:center;padding:5px;overflow:hidden}
.naipe .tapa{font-family:var(--serif);font-size:38px;font-weight:600}
.naipe.abierto{background:var(--blanco);color:var(--tinta)}
.naipe.par{background:var(--verde-suave);box-shadow:inset 0 0 0 3px var(--verde)}
.naipe .emoji,.naipe .cifra{font-size:48px}
.naipe .mancha{width:58px;height:58px}
.naipe .texto{font-weight:700;font-size:18px;line-height:1.1;overflow-wrap:anywhere}

/* Final */
.final{text-align:center;padding:12px 0}
.final img{width:128px;height:auto;animation:salto .7s ease-out 2}
.final h1{font-size:44px;margin-top:10px;color:var(--terracota)}
.final p{font-size:20px;margin:8px 0 18px}
.final .botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.final a{text-decoration:none}
@keyframes salto{40%{transform:translateY(-22px) rotate(-5deg)}}

/* Adultos */
.texto-adultos{max-width:640px}
.texto-adultos h2{font-size:23px;margin:22px 0 4px}
.texto-adultos p{margin:6px 0}

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

/* Edades */
.edades{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.edad{display:flex;align-items:center;gap:14px;padding:16px 18px;min-height:104px;border-radius:24px;text-decoration:none;box-shadow:var(--sombra)}
.edad .ico{font-size:46px;flex:none}
.edad strong{display:block;font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.15}
.edad small{display:block;font-size:17px;color:#4A3D32}
.edad-chip{display:inline-block;margin-top:4px}

/* Bebés: el dibujo ocupa casi toda la carta y se toca completo */
.carta.bebe .dibujo{min-height:260px}
.carta.bebe .emoji,.carta.bebe .cifra{font-size:190px}
.carta.bebe .mancha{width:230px;height:230px}
.carta.bebe .es{margin-bottom:0}

/* Armar palabras y ordenar frases */
.op.txt{min-height:72px;font-weight:600;font-size:20px;text-align:center;grid-column:1/-1}
.opciones .op:last-child:nth-child(odd){grid-column:1/-1}
.pregunta .pista{font-size:21px;color:var(--tinta);font-weight:600;text-wrap:balance}
.pregunta .emoji{font-size:64px}
.pregunta .cifra{font-size:64px}
.pregunta .mancha{width:72px;height:72px}
.fila-pregunta{display:flex;align-items:center;justify-content:center;gap:16px}
.fila-pregunta .altavoz{width:64px;height:64px;font-size:28px}
.armado{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:56px;margin:0 auto 18px;max-width:560px}
.hueco{min-width:38px;height:52px;padding:0 6px;border-bottom:4px solid var(--borde);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:27px;white-space:nowrap}
.hueco.lleno{border-color:var(--verde)}
.fichas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:560px;margin:0 auto}
.ficha{min-width:56px;min-height:56px;padding:0 14px;border:0;border-radius:16px;background:var(--blanco);box-shadow:var(--sombra);font-weight:700;font-size:22px}
.ficha.tiembla{background:var(--error-suave);animation:temblor .35s}
.ficha:disabled{visibility:hidden}
.texto-adultos ul{padding-left:20px;margin:6px 0}
.texto-adultos li{margin:4px 0}

/* Familia bilingüe */
.banda-familia{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 18px;border-radius:24px;background:var(--verde);color:#fff;text-decoration:none;box-shadow:var(--sombra)}
.banda-familia .emoji{font-size:34px;flex:none}
.banda-familia strong{display:block;font-size:21px}
.banda-familia small{display:block;font-size:16px;line-height:1.25}
.etapas{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 8px}
.etapa{flex:none;min-height:48px;padding:0 16px;border:0;border-radius:999px;background:var(--blanco);font-weight:600;font-size:16px}
.etapa[aria-pressed="true"]{background:var(--verde);color:#fff}
.intro{margin:10px 0 0}
.seccion{font-size:23px;margin:24px 0 10px}
.actividad .sobre{color:var(--terracota-hover);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.consejo{background:#FFF4DC;border-radius:18px;padding:14px 16px;margin:14px 0}
.consejo strong{display:block;font-size:19px}
.consejo p{margin:4px 0 0}
.dias{color:var(--suave);font-size:16px;margin:8px 0 0}
.lineas{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.linea{display:block;width:100%;text-align:left;border:0;border-radius:18px;background:var(--blanco);padding:12px 16px;box-shadow:var(--sombra)}
.linea .pt{display:block;font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.2}
.linea .es{display:block;color:var(--suave);font-size:17px}
.linea.sonando{box-shadow:inset 0 0 0 3px var(--verde)}
.carta.pagina .emoji{font-size:96px;display:block}
.carta.pagina .pt{font-size:clamp(25px,7vw,32px);line-height:1.2}
.enlace{border:0;background:none;color:var(--suave);text-decoration:underline;font-size:16px;min-height:44px;padding:0 8px}