:root {
  --rojo: #D62828;
  --rojo-pulsado: #B01F1F;
  --tinta: #142359;
  --fondo: #FFF4DC;
  --tarjeta: #FFFFFF;
  --secundario: #4A5270;
  --amarillo: #FFD020;
  --azul: #0042A2;
  --azul-borde: #00327C;
  --turquesa: #00838F;
  --turquesa-borde: #00636D;
  --naranja: #D63F00;
  --naranja-borde: #A53100;
  --rosa: #C2189A;
  --rosa-borde: #941275;
  --morado: #7A3DC2;
  --morado-borde: #5C2D94;
  --correcto: #2E8B3A;
  --correcto-borde: #236A2C;
  --linea: #CFE3F2;
  --margen-cuaderno: #F2A0A0;
  --sombra: rgba(20, 35, 89, .08);
  --titulo: 'Baloo 2', sans-serif;
  --texto: 'Andika', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 17px/1.6 var(--texto); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 800; line-height: 1.12; }
h1 { font-size: 48px; }
h2 { font-size: 34px; }
h3 { font-size: 26px; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, input { font: inherit; }
button:disabled { cursor: wait; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 4px solid var(--tinta); outline-offset: 4px; }
[hidden] { display: none !important; }
.contenedor { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.cabecera { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 24px; }
.marca { display: inline-flex; align-items: center; gap: 12px; font: 800 20px/1.2 var(--titulo); text-decoration: none; }
.marca-silaba { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--rojo); color: var(--tarjeta); font: 700 26px/1 var(--texto); flex-shrink: 0; }
.enlace { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-size: 15px; font-weight: 700; }
.portada { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding-block: 48px 64px; }
.presentacion { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.etiqueta { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.resaltado { background: var(--amarillo); border-radius: 12px; padding-inline: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.entradilla { font-size: 20px; color: var(--secundario); }
.precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.precio strong { font: 800 34px/1.2 var(--titulo); }
.precio span { font-size: 15px; color: var(--secundario); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 12px 32px; border: 0; border-bottom: 4px solid var(--rojo-pulsado); border-radius: 999px; background: var(--rojo); color: var(--tarjeta); text-align: center; text-decoration: none; font: 800 20px/1.3 var(--titulo); transition: transform 100ms, background-color 100ms; }
.boton:active { transform: translateY(2px); border-bottom-color: transparent; background: var(--rojo-pulsado); }
.boton-secundario { background: var(--fondo); border-bottom-color: var(--linea); color: var(--tinta); min-height: 48px; font-size: 17px; }
.boton-secundario:active { background: var(--fondo); }
.nota { font-size: 13px; color: var(--secundario); }
.tarjeta { background: var(--tarjeta); border: 0; border-radius: 24px; box-shadow: 0 4px 0 var(--sombra); }
.muestra { min-width: 0; }
.muestra-titulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.distintivo { background: var(--amarillo); padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.demo { overflow: hidden; min-height: 448px; }
.pantalla-centro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 48px 24px; text-align: center; }
.icono-grande { font-size: 48px; color: var(--tinta); }
.pie-muestra { margin-top: 16px; text-align: center; }
.seccion { margin-block: 64px; }
.seccion > .etiqueta { margin-bottom: 8px; }
.seccion > h2 { margin-bottom: 32px; }
.cifras { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 48px; padding: 32px; }
.cifra-principal { font: 800 48px/1.12 var(--titulo); }
.cifras-detalle { display: grid; gap: 16px; }
.cifras-detalle strong { font: 800 26px/1.3 var(--titulo); }
.edades { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding-block: 24px; }
.edades h2 { margin-block: 8px 16px; }
.edades p:not(.etiqueta) { color: var(--secundario); }
.fichas-edad { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fichas-edad span { display: grid; place-items: center; width: 88px; height: 88px; border: 4px solid var(--tarjeta); border-radius: 50%; font: 800 34px/1 var(--titulo); box-shadow: 0 4px 0 var(--sombra); }
.fichas-edad span:nth-child(1) { background: var(--rojo); color: var(--tarjeta); }
.fichas-edad span:nth-child(2) { background: var(--amarillo); }
.fichas-edad span:nth-child(3) { background: var(--tinta); color: var(--tarjeta); }
.fichas-edad span:nth-child(4) { background: var(--tarjeta); }
.pasos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; }
.pasos li { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.numero { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--amarillo); font: 800 26px/1 var(--titulo); }
.pasos p { margin-top: 12px; font-size: 15px; color: var(--secundario); }
.oferta { position: relative; text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.oferta > h2 { margin-bottom: 0; }
body[data-pagina="venta"] { overflow-x: clip; }
.portada, .oferta { position: relative; isolation: isolate; }
.portada > :not(.lapices), .oferta > :not(.lapices) { position: relative; z-index: 1; }
.lapices { position: absolute; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; pointer-events: none; z-index: 0; }
.crayon { position: absolute; width: 160px; height: 32px; }
.crayon-izquierdo { left: -48px; top: 8px; transform: rotate(24deg); }
.crayon-derecho { right: -48px; bottom: 16px; transform: rotate(156deg); }
.oferta .crayon-izquierdo { top: auto; bottom: 16px; }
.preguntas { max-width: 800px; margin-inline: auto; }
details { border-bottom: 2px solid var(--linea); padding-block: 16px; }
summary { cursor: pointer; min-height: 48px; font-weight: 700; display: list-item; align-content: center; }
details p { padding-block: 8px 16px; color: var(--secundario); font-size: 15px; }
.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 32px; font-size: 13px; color: var(--secundario); }
.pie a { min-height: 48px; display: inline-flex; align-items: center; }
.estado { font-size: 15px; color: var(--secundario); }
.estado:not(:empty) { padding-block: 16px; }
.zona-jugar { max-width: 1000px; padding-bottom: 48px; }
.intro-niveles { padding-block: 32px; }
.intro-niveles h1 { margin-block: 8px 16px; }
.rejilla-niveles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.nivel { padding: 24px 12px; min-height: 176px; color: var(--tinta); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: transform 100ms; }
.nivel:active { transform: translateY(2px); }
.nivel-numero { font: 800 26px/1 var(--titulo); color: var(--secundario); }
.nivel-titulo { font: 800 20px/1.2 var(--titulo); }
.nivel .ph-lock-key { font-size: 26px; }
.estrellas { display: flex; justify-content: center; gap: 4px; color: var(--amarillo); font-size: 26px; }
.estrella-vacia { color: var(--linea); }
#nota-acceso { margin-top: 24px; }
.barra-juego { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; }
.datos-juego { display: flex; flex-direction: column; gap: 4px; }
.datos-juego strong { font: 800 20px/1.2 var(--titulo); }
.contador-pregunta { font-size: 15px; color: var(--secundario); }
.contador-estrellas { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 64px; padding: 8px 12px; border-radius: 999px; background: var(--fondo); font-weight: 700; }
.contador-estrellas i { color: var(--amarillo); font-size: 26px; }
.progreso { height: 8px; margin-inline: 24px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.progreso span { display: block; height: 100%; background: var(--amarillo); }
.cuaderno { position: relative; background-color: var(--tarjeta); padding: 32px 24px; margin-top: 24px; text-align: center; isolation: isolate; }
.renglones { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.renglones span { display: block; height: 24px; border-bottom: 1px solid var(--linea); }
.instruccion { font: 800 26px/1.2 var(--titulo); margin-bottom: 32px; }
.instruccion:focus, #titulo-niveles:focus, #titulo-resultado:focus { outline: none; }
.opciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.silaba { --color-ficha: var(--azul); --borde-ficha: var(--azul-borde); background: var(--color-ficha); border: 0; border-bottom: 4px solid var(--borde-ficha); border-radius: 12px; color: var(--tarjeta); width: 112px; height: 112px; min-width: 88px; padding: 8px; font: 700 48px/1 var(--texto); transition: transform 100ms, background-color 100ms; }
.color-1 { --color-ficha: var(--turquesa); --borde-ficha: var(--turquesa-borde); }
.color-2 { --color-ficha: var(--naranja); --borde-ficha: var(--naranja-borde); }
.color-3 { --color-ficha: var(--rosa); --borde-ficha: var(--rosa-borde); }
.color-4 { --color-ficha: var(--morado); --borde-ficha: var(--morado-borde); }
.silaba:active { transform: translateY(2px); border-bottom-color: transparent; }
.silaba.correcta { background: var(--correcto); border-bottom-color: var(--correcto-borde); }
.espacios { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 32px; }
.espacio { display: grid; place-items: center; min-width: 88px; height: 88px; padding-inline: 8px; background: var(--fondo); border-bottom: 4px solid var(--tinta); border-radius: 12px; font: 700 34px/1 var(--texto); }
.espacio.lleno { color: var(--correcto); }
.controles-juego { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; }
.escuchar { min-width: 240px; }
.mensaje-juego { min-height: 24px; text-align: center; font-size: 13px; color: var(--secundario); }
.demo .barra-juego { padding: 24px; }
.demo .cuaderno { padding-inline: 16px; }
.demo .silaba { width: 96px; height: 96px; }
.demo .instruccion { font-size: 26px; }
.resultado { max-width: 640px; margin: 32px auto; min-height: 480px; }
.estrellas-grandes { gap: 12px; font-size: 72px; }
.dialogo { max-width: min(480px, calc(100% - 32px)); padding: 32px; color: var(--tinta); text-align: center; }
.dialogo::backdrop { background: rgba(20, 35, 89, .48); }
.dialogo h2 { margin-block: 16px; }
.dialogo p { margin-bottom: 24px; }
.dialogo form { margin-top: 16px; }
.dialogo .boton { width: 100%; }
.estrella-voladora { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 10; color: var(--amarillo); font-size: 34px; }
.temblar { animation: temblar 200ms ease-in-out; }
@keyframes temblar { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes aparecer { from { opacity: .4; } to { opacity: 1; } }
@media (max-width: 1000px) {
  .portada { gap: 32px; }
  .edades { grid-template-columns: 1fr; gap: 24px; }
  .fichas-edad { justify-content: flex-start; }
  .rejilla-niveles { grid-template-columns: repeat(3, 1fr); }
  .demo .silaba { width: 88px; height: 88px; }
  .demo .opciones { gap: 8px; }
}
@media (max-width: 760px) {
  .contenedor { width: calc(100% - 32px); }
  .cabecera { gap: 12px; padding-block: 16px; }
  .marca { font-size: 17px; gap: 8px; max-width: 208px; }
  .cabecera > .enlace { font-size: 13px; text-align: right; }
  .portada { grid-template-columns: 1fr; gap: 48px; padding-block: 32px; }
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  .entradilla { font-size: 17px; }
  .seccion { margin-block: 48px; }
  .cifras { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .fichas-edad { gap: 8px; }
  .fichas-edad span { width: 72px; height: 72px; }
  .pasos { grid-template-columns: 1fr; gap: 24px; }
  .pasos li { flex-direction: row; gap: 16px; }
  .numero { flex-shrink: 0; }
  .crayon-derecho, .portada .crayon-izquierdo { display: none; }
  .rejilla-niveles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .nivel { min-height: 160px; padding: 24px 12px; }
  .barra-juego { padding: 16px; gap: 8px; flex-wrap: wrap; }
  .barra-juego .boton { padding-inline: 16px; font-size: 15px; }
  .cuaderno { padding: 32px 12px; }
  .opciones { gap: 8px; }
  .silaba { width: 88px; height: 88px; font-size: 34px; }
  .instruccion { font-size: 26px; margin-bottom: 24px; }
  .demo .barra-juego { padding: 16px; }
  .demo .cuaderno { padding-inline: 12px; }
  .demo .silaba { font-size: 48px; }
  .pantalla-centro { padding: 32px 16px; }
  .boton { padding-inline: 24px; max-width: 100%; }
  .controles-juego { padding-inline: 16px; }
  .estrellas-grandes { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: opacity 100ms !important; }
  .boton:active, .silaba:active, .nivel:active { transform: none; }
  .temblar { animation: aparecer 200ms; }
}