/* =========================================================
   Páginas de actividades (edad 3 años y las que vengan)
   Se carga después de styles.css. Todas las clases propias llevan el prefijo ac-.
   ========================================================= */

html { scroll-behavior: smooth; }
html.ac-sin-scroll, html.ac-sin-scroll body { overflow: hidden; }
/* main y el pie comparten z-index 1: en pantalla ampliada main sube para que el pie no se vea encima. */
html.ac-sin-scroll main { z-index: 100; }

.ac-mono {
  font-family: var(--f-mono); font-weight: 500; font-size: 12px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .14em; color: var(--texto-2);
}
.ac-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: var(--f-mono); font-weight: 500; font-size: 12px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .14em; color: var(--texto-2);
}
.ac-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sol); flex-shrink: 0; }
.ac-eyebrow--lila::before { background: var(--lila); }
.ac-h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 28px; }
.ac-aviso { padding: 16px 0; font-weight: 600; }

.ac-seccion { margin-top: 72px; }
.ac-seccion--juego { margin-top: 56px; }
.ac-seccion--ultima { margin-bottom: 96px; }

/* ---------- Migas ---------- */
.ac-migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding-top: 6px; padding-bottom: 22px;
  font-family: var(--f-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-2);
}
.ac-migas a { color: var(--texto-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.ac-migas a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.ac-migas [aria-current] { color: var(--tinta); }

/* ---------- Portada ---------- */
.ac-portada {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 24px;
  padding: 56px;
  background: var(--cielo-t); border-radius: 44px;
  animation: ac-entra .7s var(--curva) both;
}
.ac-portada::before {
  content: ""; position: absolute; top: -90px; right: -90px; width: 260px; height: 260px;
  border: 2px dotted #9CCBEB; border-radius: 50%; pointer-events: none;
}
@keyframes ac-entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.ac-portada__texto { position: relative; }
.ac-pildora {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 18px 8px 14px; margin-bottom: 28px;
  background: #fff; border: 2px solid var(--tinta); border-radius: 999px; box-shadow: 0 4px 0 var(--tinta);
  font-family: var(--f-mono); font-weight: 500; font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
}
.ac-pildora span { display: inline-flex; gap: 6px; }
.ac-pildora i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.ac-pildora i:nth-child(1) { background: var(--coral); }
.ac-pildora i:nth-child(2) { background: var(--sol); }
.ac-pildora i:nth-child(3) { background: var(--menta); }
.ac-portada h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1; letter-spacing: -0.035em; font-weight: 800; margin-bottom: 24px; max-width: 12em; }
.ac-portada__parrafo { font-size: 20px; line-height: 1.5; color: #33415F; max-width: 34em; margin-bottom: 32px; }
.ac-btn-oscuro {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 15px 26px; border-radius: 999px; background: var(--tinta); color: #fff;
  font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: 0 5px 0 #0C1226;
  transition: transform .18s var(--curva), box-shadow .18s var(--curva);
}
.ac-btn-oscuro:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #0C1226; }
.ac-btn-oscuro:active { transform: translateY(4px); box-shadow: 0 1px 0 #0C1226; }

.ac-portada__arte { position: relative; min-height: 340px; }
.ac-ficha {
  --t: 200px; position: absolute; left: 50%; top: 50%;
  margin: 0; border-radius: 44px; font-size: 130px;
  translate: -50% -50%; rotate: -6deg;
  animation: ac-flota 5s ease-in-out infinite;
}
.ac-ficha::before, .ac-ficha::after { top: -26px; width: 48px; height: 40px; }
.ac-flota { position: absolute; font-size: 62px; line-height: 1; animation: ac-flota 4.6s ease-in-out infinite; }
.ac-flota--1 { left: 2%; top: 4%; animation-delay: -.8s; }
.ac-flota--2 { right: 4%; top: 2%; animation-delay: -2.2s; }
.ac-flota--3 { left: 4%; bottom: 4%; animation-delay: -3.1s; }
.ac-flota--4 { right: 2%; bottom: 6%; animation-delay: -1.5s; }
@keyframes ac-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---------- Selector ---------- */
.ac-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.ac-tarjeta {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  padding: 16px; background: #fff; border: 2px solid var(--borde); border-radius: 30px;
  color: var(--tinta); font: inherit; cursor: pointer;
  transition: transform .2s var(--curva), box-shadow .2s var(--curva), border-color .2s;
}
.ac-tarjeta:hover { transform: translateY(-5px) rotate(-.6deg); }
.ac-tarjeta[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 6px 0 var(--tinta); }
.ac-tarjeta__img {
  display: flex; align-items: center; justify-content: center; height: 96px; margin-bottom: 14px;
  border-radius: 22px; font-size: 54px; line-height: 1;
}
.ac-tarjeta h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 6px; }
.ac-tarjeta p { font-size: 15px; line-height: 1.45; color: var(--texto-2); margin-bottom: 14px; }
.ac-tarjeta__estrellas { margin-top: auto; font-size: 20px; line-height: 1; letter-spacing: .08em; color: #E3A400; }

/* ---------- Panel de juego ---------- */
.ac-panel {
  --k: 1; --emo: 84px; --emo-mesa: calc(72px * var(--k)); --optw: 150px; --opth: 150px; --num: 78px; --cell: 112px; --c10: 76px; --big: 190px; --cuadro: 38px; --barra: 150px; --circ: 120px; --circbtn: 170px; --fgrande: 190px; --fbtn: 150px;
  position: relative; overflow: hidden;
  padding: 36px 40px 40px;
  background: #fff; border: 2px solid var(--borde); border-radius: 44px;
}
.ac-panel__fila { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.ac-panel__titulo h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.03em; margin-top: 4px; }
.ac-panel__titulo h2:focus { outline: none; }
.ac-panel__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; }
.ac-progreso { text-align: right; }
.ac-estrellas { font-size: 30px; line-height: 1.1; letter-spacing: .06em; color: #E3A400; }
.ac-conteo { font-size: 11px; }

.ac-peq {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 20px;
  background: #fff; color: var(--tinta); border: 2px solid var(--tinta); border-radius: 999px;
  font: 700 15px/1.1 var(--f-texto); cursor: pointer;
  box-shadow: 0 3px 0 var(--tinta);
  transition: transform .18s var(--curva), box-shadow .18s var(--curva), background-color .18s;
}
.ac-peq:hover { background: #FFE9A3; transform: translateY(-2px); box-shadow: 0 5px 0 var(--tinta); }
.ac-peq:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }
.ac-peq--icono { width: 48px; padding: 0; font-size: 20px; }

.ac-instruccion {
  margin: 0 auto 8px; text-align: center; max-width: 24em;
  font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25;
}
.ac-escenario {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  min-height: 380px; padding-block: 26px;
}
.ac-respuesta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 130px; text-align: center; }
.ac-msg { margin: 0; font-size: 17px; line-height: 1.4; color: var(--texto-2); }
.ac-msg--ok, .ac-msg--err {
  padding: 10px 28px; border-radius: 999px;
  font-family: var(--f-titulo); font-weight: 800; font-size: 24px; line-height: 1.25; color: var(--tinta);
  animation: ac-pop .35s var(--curva) both;
}
.ac-msg--ok { background: var(--menta-t); border: 3px solid var(--menta); }
.ac-msg--err { background: var(--sol-t); border: 3px solid var(--sol); }
@keyframes ac-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.ac-acciones { display: flex; justify-content: center; }
.ac-acciones:empty { display: none; }

.ac-grande {
  padding: 18px 34px; border: 3px solid var(--tinta); border-radius: 999px;
  background: var(--menta); color: var(--tinta);
  font: 700 20px/1.1 var(--f-texto); cursor: pointer;
  box-shadow: 0 6px 0 var(--tinta);
  transition: box-shadow .15s;
}
.ac-grande--otro { animation: ac-balanceo 1.8s ease-in-out infinite; }
.ac-grande--otro:hover { animation-play-state: paused; }
.ac-grande:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--tinta); animation: none; }
@keyframes ac-balanceo { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg) translateY(-2px); } }

/* ---------- Piezas de juego ---------- */
.ac-objetos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.ac-objetos--mezcla { gap: 14px 18px; }
.ac-emo { display: inline-block; line-height: 1; font-size: var(--emo); }
.ac-salta { animation: ac-salta .55s var(--curva) both; }
@keyframes ac-salta { 0% { opacity: 0; transform: translateY(24px) scale(.6); } 60% { opacity: 1; transform: translateY(-12px) scale(1.08); } 100% { opacity: 1; transform: none; } }
.ac-opciones { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 20px; }

.ac-puntos { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; line-height: 1; font-size: 18px; }
.ac-puntos--coral { color: var(--coral); }
.ac-puntos--chico { font-size: 16px; min-height: 18px; color: var(--tinta); }

/* Botón de respuesta («opt») */
.ac-opt {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-width: var(--optw); min-height: var(--opth); padding: 14px 18px;
  background: #fff; color: var(--tinta); border: 3px solid var(--tinta); border-radius: 30px;
  font: inherit; cursor: pointer;
  box-shadow: 0 6px 0 var(--tinta);
  transition: transform .15s var(--curva), box-shadow .15s var(--curva), background-color .15s, opacity .2s;
}
.ac-opt:not(:disabled):hover { transform: translateY(-4px); background: #FFF8DC; box-shadow: 0 10px 0 var(--tinta); }
.ac-opt:not(:disabled):active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tinta); }
.ac-opt:disabled { cursor: default; color: var(--tinta); }
.ac-opt__num { font-family: var(--f-titulo); font-weight: 800; font-size: var(--num); line-height: 1; }
.ac-opt--chica { min-width: max(72px, calc(80px * var(--k))); min-height: max(72px, calc(80px * var(--k))); padding: 8px; border-radius: 22px; }
.ac-opt--fig { padding: 18px 22px; }
.ac-grupo { min-width: min(300px, 100%); min-height: calc(230px * var(--k)); border-radius: 38px; padding: 22px 26px; }
.ac-grupo__emos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; max-width: 300px; }

/* Resultado de una opción */
.ac-ok { background: var(--menta-t) !important; opacity: 1 !important; animation: ac-rebote .6s var(--curva); }
.ac-apagada { opacity: .45; }
@keyframes ac-rebote { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
.ac-sacude-a { animation: ac-sacude-a .45s ease; }
.ac-sacude-b { animation: ac-sacude-b .45s ease; }
@keyframes ac-sacude-a { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-12px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(5px); } }
@keyframes ac-sacude-b { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(12px); } 40% { transform: translateX(-10px); } 60% { transform: translateX(8px); } 80% { transform: translateX(-5px); } }

/* Objeto tocable («tapitem») */
.ac-tap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 104px; min-height: 104px; padding: 10px;
  background: transparent; border: 0; border-radius: 26px; color: var(--tinta);
  font: inherit; cursor: pointer;
  transition: transform .15s var(--curva), background-color .15s, box-shadow .15s, opacity .2s;
}
.ac-tap:not(:disabled):hover { transform: translateY(-4px) scale(1.05); }
.ac-tap.ac-sel { background: #FFE9A3; transform: translateY(-8px) scale(1.1); box-shadow: 0 0 0 4px var(--tinta); }
.ac-tap:disabled { cursor: default; }
.ac-tap.ac-ok { background: var(--menta-t); }
.ac-tap.ac-unida { opacity: .55; box-shadow: 0 0 0 4px var(--menta); transform: none; }
.ac-tap--tam { min-width: 0; min-height: 0; padding: 12px; font-size: calc(var(--t) * 1px * var(--k)); line-height: 1; }
.ac-tap--tam .ac-emo { font-size: inherit; }
.ac-tap--cesta { min-width: 0; min-height: 0; padding: 4px; }
.ac-tamanos { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 16px 28px; }

/* Figuras dibujadas con CSS */
.ac-fig { display: inline-block; flex-shrink: 0; width: var(--s); height: var(--s); filter: drop-shadow(0 5px 0 rgba(31, 42, 68, .2)); }
.ac-fig i { display: block; width: 100%; height: 100%; }
.ac-f-circulo { border-radius: 50%; }
.ac-f-cuadrado { border-radius: 22%; }
.ac-f-triangulo { clip-path: polygon(50% 6%, 97% 92%, 3% 92%); }
.ac-f-rombo { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }
.ac-f-estrella { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* Juego 2 */
.ac-modelo {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 34px 20px; background: var(--lila-t); border-radius: 34px;
}

/* Juego 3 */
.ac-canastas { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.ac-canasta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-width: 230px; min-height: 170px; padding: 16px 22px;
  background: var(--suave); color: var(--tinta); border: 3px dashed var(--c); border-radius: 30px;
  font: inherit; cursor: pointer;
  transition: transform .15s var(--curva), background-color .15s;
}
.ac-canasta:not(:disabled):hover { transform: translateY(-3px); }
.ac-canasta:disabled { cursor: default; }
.ac-canasta__color { width: 46px; height: 46px; border: 3px solid var(--tinta); border-radius: 50%; }
.ac-canasta__nombre { font-family: var(--f-titulo); font-weight: 800; font-size: 26px; line-height: 1.1; }

/* Juego 6 */
.ac-banda { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 18px 20px; background: var(--sol-t); border-radius: 34px; }
.ac-casilla {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cell); height: var(--cell);
  background: #fff; border: 3px solid var(--borde); border-radius: 26px;
}
.ac-casilla--duda { background: #FFF8DC; border: 3px dashed var(--tinta); animation: ac-balanceo 2.2s ease-in-out infinite; }
.ac-casilla__q { font-family: var(--f-titulo); font-weight: 800; font-size: calc(var(--cell) * .5); line-height: 1; }
.ac-opciones--serie { gap: 18px; }

/* Juego 7 */
.ac-parejas { display: flex; justify-content: center; gap: 90px; }
.ac-columna { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Juego 8 */
.ac-pedido {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center;
  padding: 14px 34px; background: var(--coral-t); border-radius: 34px;
}
.ac-pedido__num { font-family: var(--f-titulo); font-weight: 800; font-size: calc(84px * var(--k)); line-height: 1; }
.ac-mesa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.ac-hueco { display: inline-flex; align-items: center; justify-content: center; min-width: 104px; min-height: 104px; visibility: hidden; }
.ac-cesta {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(100%, 520px); min-width: min(420px, 100%); min-height: 150px; padding: 14px 20px;
  background: #F5F2FE; border: 3px dashed var(--lila); border-radius: 34px;
}
.ac-cesta__items { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; min-height: calc(76px * var(--k)); }
.ac-grande--listo { background: var(--menta); }

/* Lluvia de celebración */
.ac-confeti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.ac-confeti span { position: absolute; bottom: -10%; line-height: 1; animation: ac-sube 1.5s ease-out both; }
@keyframes ac-sube { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-420px) rotate(25deg); } }

/* ---------- Pantalla ampliada ---------- */
.ac-panel--completa {
  --c10: 96px; --big: 240px; --cuadro: 48px; --barra: 180px; --circ: 160px; --circbtn: 220px; --k: 1.5; --emo: 150px; --optw: 200px; --opth: 200px; --num: 120px; --cell: 130px;
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  display: flex; flex-direction: column;
  border: 0; border-radius: 0;
  animation: ac-entra-pantalla .3s var(--curva) both;
}
.ac-panel--completa > :first-child { margin-top: auto; padding-right: 76px; }
.ac-panel--completa > :last-child { margin-bottom: auto; }
.ac-panel--completa #ac-pantalla { display: none; }
.ac-panel--completa .ac-escenario { min-height: 52vh; }
@keyframes ac-entra-pantalla { from { opacity: 0; } to { opacity: 1; } }
.ac-cerrar {
  position: fixed; top: 16px; right: 16px; z-index: 110;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  background: var(--tinta); color: #fff; border: 0; border-radius: 50%;
  font: 700 24px/1 var(--f-texto); cursor: pointer;
  box-shadow: 0 5px 0 #0C1226;
}
.ac-cerrar[hidden] { display: none; }
.ac-cerrar:active { transform: translateY(3px); box-shadow: 0 2px 0 #0C1226; }
.ac-cerrar:focus-visible { outline-color: var(--sol); }

/* ---------- Notas para el adulto ---------- */
.ac-notas { display: flex; flex-wrap: wrap; gap: 20px; }
.ac-nota { flex: 1 1 360px; padding: 26px 28px; border-radius: 30px; }
.ac-nota--sol { background: var(--sol-t); }
.ac-nota--lila { background: var(--lila-t); }
.ac-nota h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin: 10px 0 12px; }
.ac-nota p:last-child { margin: 0; }
.ac-nota--lila .ac-mono + p { margin-top: 10px; font-size: 17px; }
.ac-chip {
  display: inline-block; margin-bottom: 12px; padding: 6px 16px;
  background: #fff; border-radius: 999px; font-weight: 700; font-size: 15px;
}

/* ---------- Otras edades ---------- */
.ac-edades { display: flex; flex-wrap: wrap; gap: 28px 32px; }
.ac-edades li { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ac-edad { --t: 130px; margin-top: 18px; opacity: .55; border-radius: 34px; font-size: 62px; }
.ac-edad::before, .ac-edad::after { top: -17px; width: 31px; height: 26px; }
.ac-edad--tinta { --c: var(--tinta); color: var(--sol); }

/* ---------- Edad de 4 años ---------- */
.ac-portada--sol { background: var(--sol-t); }
.ac-portada--sol::before { border: 2px dashed #E8C65A; }
.ac-ficha--4 { rotate: 5deg; }
.ac-flota--r1 { rotate: -14deg; } .ac-flota--r2 { rotate: 12deg; } .ac-flota--r3 { rotate: -8deg; } .ac-flota--r4 { rotate: 16deg; }
.ac-e4 .ac-casilla--duda { animation-name: ac-sube-baja; animation-duration: 1.6s; }
@keyframes ac-sube-baja { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Rectángulo */
.ac-fig[data-forma="rectangulo"] { width: calc(var(--s) * 1.4); height: calc(var(--s) * .78); }
.ac-f-rectangulo { border-radius: 16%; }

/* Juego 1: junta y cuenta */
.ac-suma { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.ac-grupo-suma { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; min-width: 96px; max-width: 330px; min-height: 96px; padding: 14px 18px; border-radius: 28px; }
.ac-signo { font-family: var(--f-titulo); font-weight: 800; font-size: calc(72px * var(--k)); line-height: 1; }
.ac-signo--mas { color: var(--coral); }
.ac-signo--igual { color: var(--cielo); }
.ac-casilla--grande { width: calc(120px * var(--k)); height: calc(120px * var(--k)); }
.ac-casilla--ok { background: var(--menta-t); border: 3px solid var(--menta); }

/* Juego 2: nombra las figuras */
.ac-modelo__nombre { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(34px, calc(48px * var(--k)), 52px); line-height: 1.1; padding-inline: 18px; }
.ac-panel--completa .ac-modelo__nombre { font-size: 52px; }

/* Juego 3: fila de números */
.ac-banda--lila { background: var(--lila-t); gap: 12px; align-items: flex-start; }
.ac-numcol { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ac-casilla--num { width: calc(110px * var(--k)); height: calc(110px * var(--k)); min-width: 64px; min-height: 64px; }
.ac-casilla--num .ac-casilla__q { font-size: calc(60px * var(--k)); }
.ac-puntos--coral.ac-puntos--chico { color: var(--coral); }
.ac-numcol .ac-puntos { max-width: calc(110px * var(--k)); }

/* Juego 4: canastas */
.ac-canasta--34 { border-radius: 34px; min-width: 200px; }

/* Juego 5: insignias de orden */
.ac-tap--insignia { position: relative; }
.ac-tap--insignia.ac-hecho { opacity: .5; }
.ac-insignia {
  position: absolute; top: -6px; right: -6px; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--tinta); color: #fff;
  font: 800 18px/1 var(--f-titulo);
}

/* Juego 6: escenas con la caja */
.ac-opt--escena { min-width: var(--optw); min-height: var(--opth); padding: 10px; }
.ac-escena { --e: calc(var(--k) * 1px); position: relative; display: block; width: calc(170 * var(--e)); height: calc(170 * var(--e)); }
.ac-escena__caja {
  position: absolute; left: 50%; top: 50%; width: calc(64 * var(--e)); height: calc(54 * var(--e));
  translate: -50% -50%; background: #FFF8DC; border: 3px solid var(--tinta); border-radius: 14px;
}
.ac-escena__obj {
  position: absolute; left: 50%; top: 50%; line-height: 1; font-size: calc(36 * var(--e));
  translate: calc(-50% + var(--dx) * var(--e)) calc(-50% + var(--dy) * var(--e));
}

/* Juego 8: sombras */
.ac-tap--sombra { background: #EEF3FB; border-radius: 26px; }
.ac-tap--sombra.ac-sel { background: #FFE9A3; }

/* Enlaces entre edades */
.ac-edades a { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: var(--tinta); border-radius: 34px; }
.ac-edades a .ac-edad { opacity: 1; transition: transform .2s var(--curva); }
.ac-edades a:hover .ac-edad { transform: translateY(-5px) rotate(-3deg); }
.ac-edades a .ac-mono { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.ac-edad--coral { --c: var(--coral); }

/* ---------- Edad de 5 años ---------- */
.ac-portada--menta { background: var(--menta-t); }
.ac-portada--menta::before { border: 2px dashed #7FD8B5; }
.ac-portada--menta .ac-portada__parrafo { color: #2F4A3F; }

/* Juego 1: cuadro del diez */
.ac-diez { display: grid; grid-template-columns: repeat(5, var(--c10)); gap: 8px; padding: 16px; background: var(--cielo-t); border-radius: 28px; }
.ac-diez__casilla { display: flex; align-items: center; justify-content: center; width: var(--c10); height: var(--c10); background: #fff; border: 3px solid var(--tinta); border-radius: 16px; }
.ac-diez__punto { width: calc(var(--c10) * .63); height: calc(var(--c10) * .63); border-radius: 50%; background: var(--coral); box-shadow: 0 4px 0 rgba(31, 42, 68, .25); }

/* Juego 2: sumandos */
.ac-sumando { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; max-width: 260px; padding: 12px 18px; border-radius: 28px; }
.ac-sumando__num { font-family: var(--f-titulo); font-weight: 800; font-size: calc(72px * var(--k)); line-height: 1; }
.ac-emos-chicos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }

/* Juego 3: globos */
.ac-franja { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; padding: 22px 28px; border-radius: 34px; }
.ac-franja--coral { background: var(--coral-t); }
.ac-globo { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ac-globo--ido .ac-emo { opacity: .35; filter: grayscale(1); }
.ac-globo__x { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--coral); font: 800 calc(48px * var(--k))/1 var(--f-titulo); }

/* Juego 4: vecinos */
.ac-banda--verde { background: var(--menta-t); align-items: center; }
.ac-casilla--vecino { width: calc(120px * var(--k)); height: calc(120px * var(--k)); min-width: 76px; min-height: 76px; }
.ac-casilla--vecino .ac-casilla__q { font-size: calc(64px * var(--k)); }

/* Juego 5: figuras escondidas */
.ac-modelo__emoji { font-size: calc(84px * var(--k)); line-height: 1; }
.ac-modelo__nombre--chico { font-size: clamp(24px, calc(30px * var(--k)), 34px); padding-inline: 10px; }

/* Juego 6: dos números enormes */
.ac-opciones--enorme { gap: 34px; }
.ac-opt--enorme { min-width: var(--big); min-height: var(--big); }
.ac-opt--enorme .ac-opt__num { font-size: calc(96px * var(--k)); }

/* Juego 7: gráfica de barras */
.ac-grafica { display: flex; flex-direction: column; gap: 12px; padding: 20px 26px; background: var(--cielo-t); border-radius: 34px; max-width: 100%; }
.ac-grafica__fila { display: flex; align-items: center; gap: 18px; }
.ac-grafica__emoji { flex: 0 0 auto; width: 56px; text-align: center; font-size: 44px; line-height: 1; }
.ac-grafica__barra { display: flex; gap: 6px; }
.ac-grafica__cuadro { width: var(--cuadro, 38px); height: var(--cuadro, 38px); border: 3px solid var(--tinta); border-radius: 10px; }

/* Juego 8: números con insignia */
.ac-opt--insignia { position: relative; }
.ac-insignia--grande { width: 40px; height: 40px; font-size: 22px; top: -10px; right: -10px; }
.ac-opt.ac-hecho:disabled { opacity: 1; }

/* ---------- Edad de 6 años ---------- */
.ac-portada--lila { background: var(--lila-t); }
.ac-portada--lila::before { border: 2px dashed #B7A6F2; }
.ac-portada--lila .ac-portada__parrafo { color: #3A3560; }

/* Juegos 1 y 2: operaciones */
.ac-sumando--solo { padding: 16px 26px; border-radius: 30px; min-width: 0; }
.ac-suma--6 .ac-suma > .ac-signo, .ac-suma--6 .ac-signo { font-size: calc(60px * var(--k)); }
.ac-suma--6 .ac-sumando:first-child { background: #FFF3C9; }
.ac-suma--6 .ac-sumando:nth-child(3) { background: #D9F5E9; }

/* Juego 3: monedas */
.ac-franja--sol { background: var(--sol-t); padding: 22px 26px; max-width: 640px; }
.ac-moneda {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--m) * 1px * var(--mk, 1)); height: calc(var(--m) * 1px * var(--mk, 1));
  border: 4px solid var(--tinta); border-radius: 50%; box-shadow: 0 4px 0 rgba(31, 42, 68, .25);
  font-family: var(--f-texto); font-weight: 800; color: var(--tinta); line-height: 1;
}
.ac-moneda span { font-size: inherit; }
.ac-opt__num--dinero { font-size: calc(54px * var(--k)); }
.ac-opt__num--hora { font-size: calc(58px * var(--k)); }

/* Juego 4: reloj de manecillas */
.ac-reloj { position: relative; width: 260px; height: 260px; background: #fff; border: 6px solid var(--tinta); border-radius: 50%; box-shadow: 0 8px 0 rgba(31, 42, 68, .18); }
.ac-reloj__num { position: absolute; translate: -50% -50%; font-family: var(--f-titulo); font-weight: 800; font-size: 22px; line-height: 1; }
.ac-reloj__mano { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; transform: translateX(-50%) rotate(var(--ang, 0deg)); }
.ac-reloj__mano--hora { width: 12px; height: 62px; background: var(--tinta); border-radius: 8px; }
.ac-reloj__mano--min { width: 8px; height: 92px; background: var(--coral); border-radius: 8px; }
.ac-reloj__centro { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; translate: -50% -50%; background: var(--tinta); border-radius: 50%; }

/* Juego 5: decenas y unidades */
.ac-du { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.ac-du__tarjeta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 18px 24px; padding: 22px 30px; background: var(--lila-t); border-radius: 34px; max-width: 100%; }
.ac-du__barras { display: flex; align-items: flex-end; gap: 8px; }
.ac-du__barra {
  width: 24px; height: var(--barra, 150px); border: 3px solid var(--tinta); border-radius: 8px;
  background: linear-gradient(to bottom, var(--coral) 80%, #fff 80%); background-size: 100% 10%;
}
.ac-du__sueltos { display: grid; grid-template-columns: repeat(5, 24px); gap: 6px; }
.ac-du__cuadrito { width: 24px; height: 24px; background: var(--sol); border: 3px solid var(--tinta); border-radius: 6px; }
.ac-du__nota { margin: 0; font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); text-align: center; }

/* Juego 6: círculos partidos */
.ac-opt--circ { min-width: var(--circbtn); min-height: var(--circbtn); }
.ac-circ { position: relative; display: block; width: var(--circ); height: var(--circ); border: 4px solid var(--tinta); border-radius: 50%; overflow: hidden; }
.ac-circ--cruz::before, .ac-circ--cruz::after { content: ""; position: absolute; background: var(--tinta); }
.ac-circ--cruz::before { left: calc(50% - 1.5px); top: 0; width: 3px; height: 100%; }
.ac-circ--cruz::after { top: calc(50% - 1.5px); left: 0; height: 3px; width: 100%; }

/* Juego 7: saltos */
.ac-casilla--salto { width: calc(110px * var(--k)); height: calc(110px * var(--k)); min-width: 64px; min-height: 64px; }
.ac-casilla--salto .ac-casilla__q { font-size: calc(56px * var(--k)); }

/* Juego 8: polígonos */
.ac-poligono { display: flex; align-items: center; justify-content: center; padding: 22px 56px; background: var(--cielo-t); border-radius: 34px; }
.ac-fig--recto i { border-radius: 0; }
.ac-f-pentagono { clip-path: polygon(50% 3%, 97% 38%, 79% 95%, 21% 95%, 3% 38%); }
.ac-f-hexagono { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); }

/* ---------- Edad de 7 años ---------- */
.ac-portada--coral { background: var(--coral-t); }
.ac-portada--coral::before { border: 2px dashed #FF9A8D; }
.ac-portada--coral .ac-portada__parrafo { color: #5A3A38; }

/* Juegos 1 y 3: operaciones hasta 100 */
.ac-suma--7 .ac-casilla--grande { width: calc(130px * var(--k)); height: calc(120px * var(--k)); min-width: 72px; }
.ac-suma--7 .ac-casilla__q { font-size: calc(60px * var(--k)); }
.ac-suma--7 .ac-sumando--solo { min-width: calc(96px * var(--k)); }

/* Juego 2: grupos iguales */
.ac-grupos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; max-width: 780px; }
.ac-grupo-caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; padding: 12px 14px; border: 3px solid var(--tinta); border-radius: 26px; box-sizing: border-box; }

/* Juego 4: calendario */
.ac-calendario { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; max-width: 680px; background: #DDF1FD; border-radius: 34px; }
.ac-chip-cal { padding: 8px 14px; background: #fff; border: 2px solid #E1E9F7; border-radius: 999px; font-family: var(--f-texto); font-weight: 700; font-size: 18px; line-height: 1.2; }
.ac-chip-cal--ref { background: #FFD45E; border-color: var(--tinta); }
.ac-opt__num--nombre { font-size: calc(36px * var(--k)); }

/* Juego 6: par o impar */
.ac-par { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 44px; background: #ECE7FD; border-radius: 34px; max-width: 100%; }
.ac-par__num { font-family: var(--f-titulo); font-weight: 800; font-size: calc(104px * var(--k)); line-height: 1; }
.ac-par__puntos { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 14px; }
.ac-par__punto { width: 34px; height: 34px; background: var(--coral); border: 3px solid var(--tinta); border-radius: 50%; box-sizing: border-box; }
.ac-opt__num--palabra { font-size: calc(56px * var(--k)); }

/* Juego 7: regla */
.ac-regla { position: relative; width: min(640px, 100%); height: 128px; background: #FFF8DC; border: 3px solid var(--tinta); border-radius: 18px; box-sizing: border-box; }
.ac-regla__linea { position: absolute; left: 0; right: 0; top: 62px; height: 3px; margin-top: -1px; background: var(--tinta); }
.ac-regla__marca { position: absolute; top: 62px; width: 2px; height: 20px; margin-left: -1px; margin-top: -1px; background: var(--tinta); }
.ac-regla__num { position: absolute; top: 88px; translate: -50% 0; font-family: var(--f-mono); font-weight: 700; font-size: 14px; line-height: 1; }
.ac-regla__barra { position: absolute; top: 14px; height: 36px; background: var(--coral); border: 3px solid var(--tinta); border-radius: 10px; box-sizing: border-box; }
.ac-opt__num--cm { font-size: calc(52px * var(--k)); }

/* Juego 8: cuerpos geométricos */
.ac-modelo--coral { background: #FFE3DF; padding: 14px 48px; }
.ac-opt__num--cuerpo { font-size: calc(38px * var(--k)); }

/* ---------- Edad de 8 años o más ---------- */
.ac-portada--tinta { background: var(--tinta); }
.ac-portada--tinta::before { border: 2px dashed #FFD45E; }
.ac-portada--tinta h1 { color: #fff; }
.ac-portada--tinta .ac-portada__parrafo { color: #C9D3EE; }
.ac-btn-sol {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 15px 26px; border-radius: 999px; background: #FFD45E; color: var(--tinta);
  font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: 0 5px 0 #B58B00;
  transition: transform .18s var(--curva), box-shadow .18s var(--curva);
}
.ac-btn-sol:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #B58B00; }
.ac-btn-sol:active { transform: translateY(4px); box-shadow: 0 1px 0 #B58B00; }
.ac-portada--tinta .ac-btn-sol:focus-visible { outline-color: #fff; }
.ac-ficha--8 { font-size: 110px; rotate: -5deg; }

/* Controles: modo y filtro por tema */
.ac-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.ac-modo { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 3px solid var(--tinta); border-radius: 999px; }
.ac-modo__b {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; padding: 8px 22px; background: transparent; color: var(--tinta); border: 0; border-radius: 999px;
  font: 700 16px/1.1 var(--f-texto); cursor: pointer; transition: background-color .18s, color .18s;
}
.ac-modo__b .ac-mono { font-size: 11px; color: inherit; }
.ac-modo__b[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.ac-modo__b:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }
.ac-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-filtro {
  min-height: 44px; padding: 8px 18px; background: #fff; color: var(--tinta); border: 2px solid #E1E9F7; border-radius: 999px;
  font: 700 14px/1.1 var(--f-texto); cursor: pointer; transition: background-color .18s, border-color .18s;
}
.ac-filtro[aria-pressed="true"] { background: #FFD45E; border-color: var(--tinta); }
.ac-modo-linea { margin: 14px 0 24px; font-family: var(--f-mono); font-weight: 500; font-size: 12px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: #4A5676; }
.ac-tarjeta[hidden] { display: none; }
.ac-tarjeta__tema { display: block; margin-bottom: 6px; font-size: 11px; color: #4A5676; }

/* Tamaños de texto de los botones de respuesta */
.ac-opt__num--t40 { font-size: calc(40px * var(--k)); }
.ac-opt__num--t44 { font-size: calc(44px * var(--k)); }
.ac-opt__num--t46 { font-size: calc(46px * var(--k)); }
.ac-opt__num--t48 { font-size: calc(48px * var(--k)); }
.ac-opt__num--t52 { font-size: calc(52px * var(--k)); }
.ac-opt__num--t54 { font-size: calc(54px * var(--k)); }
.ac-opt__num--t56 { font-size: calc(56px * var(--k)); }
.ac-opt__num--t60 { font-size: calc(60px * var(--k)); }
.ac-opt__num--t64 { font-size: calc(64px * var(--k)); }
.ac-opt__num--t70 { font-size: calc(70px * var(--k)); }
.ac-opt__num--t78 { font-size: calc(78px * var(--k)); }

/* Juegos 1, 2 y 3: operaciones */
.ac-suma--8 .ac-casilla--grande { width: calc(150px * var(--k)); height: calc(120px * var(--k)); min-width: 72px; }
.ac-suma--8 .ac-casilla__q { font-size: calc(56px * var(--k)); }
.ac-suma--ng .ac-sumando__num { font-size: calc(56px * var(--k)); }
.ac-sumando--duda { border: 3px dashed var(--tinta); animation: ac-balanceo 2.2s ease-in-out infinite; }
.ac-e4 .ac-sumando--duda { animation-name: ac-sube-baja; animation-duration: 1.6s; }

/* Juego 4: valor de la cifra */
.ac-cifras { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 18px 28px; max-width: 100%; background: #FFF3C9; border-radius: 34px; }
.ac-cifra, .ac-cifras__parte {
  display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px;
  background: #fff; border: 3px solid #E1E9F7; border-radius: 14px;
  font-family: var(--f-titulo); font-weight: 800; font-size: clamp(44px, 11vw, 72px); line-height: 1.1;
}
.ac-cifras__parte { font-size: clamp(36px, 9vw, 64px); padding-inline: 16px; }
.ac-cifra--ref { background: #FFD45E; border-color: var(--tinta); }
.ac-cifras__punto, .ac-cifras__signo { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(30px, 7vw, 48px); line-height: 1; align-self: flex-end; padding-bottom: 6px; }
.ac-cifras__signo { align-self: center; padding: 0 6px; color: var(--coral); }
.ac-casilla--parte { width: auto; height: auto; min-width: 96px; padding: 4px 18px; }
.ac-casilla--parte .ac-casilla__q { font-size: clamp(36px, 9vw, 56px); }

/* Juego 5: fracciones */
.ac-pastel {
  display: block; flex: 0 0 auto; width: var(--fg); height: var(--fg);
  border: 3px solid var(--tinta); border-radius: 50%; box-sizing: border-box;
}
.ac-pastel--grande { --fg: var(--fgrande); }
.ac-pastel--boton { --fg: var(--fbtn); }
.ac-modelo--pastel { background: var(--sol-t); padding: 20px 34px; }
.ac-opt--pastel { min-width: 170px; min-height: 170px; padding: 10px; }

/* Juego 6: secuencias */
.ac-serie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: 100%; padding: 22px 26px; background: #D9F5E9; border-radius: 34px; }
.ac-casilla--serie { width: calc(116px * var(--k)); height: calc(110px * var(--k)); min-width: 60px; min-height: 60px; }
.ac-casilla--serie .ac-casilla__q { font-size: calc(50px * var(--k)); }

/* Juego 7: compras y vueltos */
.ac-compra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.ac-etiqueta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 26px; background: #fff; border: 3px solid var(--tinta); border-radius: 24px; }
.ac-etiqueta__emoji { font-size: calc(54px * var(--k)); line-height: 1; }
.ac-etiqueta__precio { font-family: var(--f-titulo); font-weight: 800; font-size: calc(28px * var(--k)); line-height: 1.1; }
.ac-etiqueta__desc {
  position: absolute; top: -18px; right: -18px; display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; background: var(--coral); color: var(--tinta); border: 3px solid var(--tinta); border-radius: 50%;
  font-family: var(--f-titulo); font-weight: 800; font-size: 18px; line-height: 1;
}
.ac-billete { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 26px; background: #FFF3C9; border: 3px dashed var(--tinta); border-radius: 18px; }
.ac-billete__valor { font-family: var(--f-titulo); font-weight: 800; font-size: calc(34px * var(--k)); line-height: 1.1; }

/* Juego 8: tiempo */
.ac-tiempo { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 14px; }
.ac-caja-t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 150px; padding: 14px 20px; border: 3px solid var(--tinta); border-radius: 26px; }
.ac-caja-t .ac-mono { color: var(--tinta); }
.ac-caja-t__valor { font-family: var(--f-titulo); font-weight: 800; font-size: calc(40px * var(--k)); line-height: 1.1; text-align: center; }
.ac-caja-t--ini { background: #FFF3C9; }
.ac-caja-t--dur { background: #D9F5E9; }
.ac-caja-t--fin { background: #ECE7FD; }
.ac-caja-t--duda { background: #FFF8DC; border-style: dashed; }

/* Juego 9: unidades */
.ac-conversion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.ac-ficha-u { padding: 14px 28px; background: #FFF3C9; border-radius: 30px; font-family: var(--f-titulo); font-weight: 800; font-size: calc(60px * var(--k)); line-height: 1.1; }
.ac-ficha-u--a { background: #D9F5E9; font-size: calc(52px * var(--k)); }
.ac-casilla--conv { width: calc(170px * var(--k)); height: calc(110px * var(--k)); min-width: 96px; }
.ac-casilla--conv .ac-casilla__q { font-size: calc(56px * var(--k)); }
.ac-leyenda { padding: 18px 30px; background: #DDF1FD; border-radius: 34px; text-align: center; }
.ac-leyenda .ac-mono { color: var(--tinta); }

/* Juego 10: perímetro y área */
.ac-medidas { --cu: 36px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: ". ancho" "alto marco"; gap: 8px; align-items: center; max-width: 100%; }
.ac-medidas__ancho { grid-area: ancho; text-align: center; font-size: 14px; color: var(--tinta); }
.ac-medidas__alto { grid-area: alto; font-size: 14px; color: var(--tinta); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.ac-marco { grid-area: marco; min-width: 0; padding: 4px; background: #fff; border: 3px solid var(--tinta); border-radius: 14px; }
.ac-rejilla { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); gap: 2px; width: calc(var(--w) * var(--cu) + (var(--w) - 1) * 2px); max-width: 100%; }
.ac-cuadrito { display: block; aspect-ratio: 1; background: #FFD45E; border: 2px solid var(--tinta); border-radius: 5px; box-sizing: border-box; }
.ac-cuadrito--fuera { background: transparent; border: 2px dotted #D3E2F6; }

/* Juego 11: ángulos */
.ac-angulo { position: relative; width: 240px; height: 130px; background: #DDF1FD; border-radius: 26px; overflow: hidden; }
.ac-angulo__rayo { position: absolute; left: 120px; top: 106px; width: 100px; height: 6px; border-radius: 3px; background: var(--tinta); transform-origin: 0 50%; }
.ac-angulo__rayo--giro { background: var(--coral); }
.ac-angulo__punto { position: absolute; left: 112px; top: 101px; width: 16px; height: 16px; border-radius: 50%; background: var(--tinta); }
.ac-angulos-suma { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 20px 24px; background: #DDF1FD; border-radius: 34px; }
.ac-casilla--ang { width: calc(130px * var(--k)); height: calc(100px * var(--k)); min-width: 84px; min-height: 70px; }
.ac-casilla--ang .ac-casilla__q { font-size: calc(48px * var(--k)); }

/* Juego 12: probabilidad */
.ac-bolsa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: min(520px, 100%); padding: 20px 26px; background: #ECE7FD; border: 3px solid var(--tinta); border-radius: 34px; }
.ac-bola { display: block; width: 40px; height: 40px; border: 3px solid var(--tinta); border-radius: 50%; box-sizing: border-box; }
.ac-color-bola { display: block; width: 76px; height: 76px; border: 4px solid var(--tinta); border-radius: 50%; box-sizing: border-box; }

/* ---------- Aparición al desplazarse ---------- */
.js .ac-rev { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--curva), transform .6s var(--curva); }
.js .ac-rev.is-in { opacity: 1; transform: none; }

/* ---------- Foco visible ---------- */
.ac-seccion :focus-visible, .ac-btn-oscuro:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ac-portada { grid-template-columns: 1fr; padding: 40px 32px; }
  .ac-portada__arte { min-height: 280px; }
  .ac-ficha { --t: 160px; font-size: 104px; }
  .ac-flota { font-size: 48px; }
  .ac-panel { padding: 30px 28px 34px; }
}
@media (max-width: 640px) {
  .ac-seccion { margin-top: 52px; }
  .ac-portada { padding: 32px 22px; border-radius: 32px; }
  .ac-portada__parrafo { font-size: 18px; }
  .ac-portada__arte { min-height: 240px; }
  .ac-ficha { --t: 130px; font-size: 84px; border-radius: 34px; }
  .ac-ficha::before, .ac-ficha::after { top: -18px; width: 32px; height: 28px; }
  .ac-flota { font-size: 40px; }
  .ac-tarjetas { grid-template-columns: 1fr; }
  .ac-panel {
    --k: .76; --emo: 64px; --optw: 112px; --opth: 130px; --num: 60px; --cell: 76px;
    padding: 24px 18px 28px; border-radius: 32px;
  }
  .ac-panel__acciones { justify-content: flex-start; }
  .ac-progreso { text-align: left; width: 100%; }
  .ac-escenario { min-height: 320px; gap: 26px; }
  .ac-opciones { gap: 14px; }
  .ac-canasta { min-width: 150px; min-height: 150px; padding: 12px 14px; }
  .ac-canasta__nombre { font-size: 22px; }
  .ac-canastas { gap: 14px; }
  .ac-banda { max-width: calc(var(--cell) * 3 + 20px + 40px + 12px); padding: 14px 12px; gap: 10px; }
  .ac-parejas { gap: 44px; }
  .ac-modelo { padding: 14px 24px 18px; }
  .ac-pedido { padding: 12px 22px; }
  .ac-msg--ok, .ac-msg--err { font-size: 20px; padding: 10px 20px; }
  .ac-nota { padding: 22px 22px; }
  .ac-edades { gap: 22px; }
  .ac-edad { --t: 100px; font-size: 48px; }
  .ac-panel { --c10: 48px; --big: 140px; --cuadro: 28px; --barra: 110px; --circ: 96px; --circbtn: 130px; --fgrande: 150px; --fbtn: 120px; }
  .ac-franja { --mk: .85; }
  .ac-du__tarjeta { padding: 18px 14px; gap: 14px 18px; }
  .ac-du__barras { gap: 6px; }
  .ac-poligono { padding: 18px 28px; }
  .ac-grafica { padding: 16px 14px; }
  .ac-regla__num { font-size: 11px; }
  .ac-medidas { --cu: 22px; }
  .ac-cifras { padding: 18px 14px; gap: 4px; }
  .ac-cifra { padding: 4px 6px; border-width: 2px; }
  .ac-cifras__parte { font-size: 30px; padding-inline: 8px; border-width: 2px; }
  .ac-cifras__signo { font-size: 26px; padding: 0 2px; }
  .ac-casilla--parte { min-width: 64px; padding: 2px 10px; }
  .ac-casilla--parte .ac-casilla__q { font-size: 30px; }
  .ac-serie { padding: 16px 14px; gap: 8px; }
  .ac-etiqueta { padding: 12px 18px; }
  .ac-caja-t { min-width: 140px; }
  .ac-bolsa { padding: 16px 18px; }
  .ac-controles { gap: 14px 16px; }
  .ac-ficha--8 { font-size: 64px; }
  .ac-par { padding: 16px 28px; }
  .ac-calendario { padding: 12px 12px; }
  .ac-chip-cal { padding: 6px 10px; font-size: 16px; }
  .ac-grafica__emoji { width: 40px; font-size: 34px; }
  .ac-grafica__fila { gap: 10px; }
  .ac-opciones--enorme { gap: 18px; }
  .ac-panel--completa { --c10: 56px; --cuadro: 30px; --barra: 130px; --circ: 110px; --circbtn: 150px; --k: 1; --emo: 100px; --optw: 130px; --opth: 150px; --num: 84px; --cell: 76px; border-radius: 0; padding: 24px 16px 32px; }
  .ac-panel--completa > :first-child { padding-right: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ac-portada, .ac-ficha, .ac-flota, .ac-salta, .ac-grande--otro, .ac-casilla--duda, .ac-sumando--duda,
  .ac-msg--ok, .ac-msg--err, .ac-ok, .ac-sacude-a, .ac-sacude-b, .ac-panel--completa { animation: none !important; }
  .ac-ficha { transform: none; }
  .js .ac-rev { opacity: 1; transform: none; transition: none; }
  .ac-tarjeta, .ac-opt, .ac-tap, .ac-peq, .ac-btn-oscuro, .ac-canasta { transition: none; }
  .ac-tarjeta:hover, .ac-opt:not(:disabled):hover, .ac-tap:not(:disabled):hover, .ac-peq:hover, .ac-btn-oscuro:hover { transform: none; }
}