/* =====================================================================
   MENTOR · Peruvian School
   Paleta inspirada en los quipus y textiles andinos:
   azul lago, amarillo maíz, verde coca, rojo achiote.
   Tipografía: Baloo 2 (títulos, redonda y amable) + Atkinson Hyperlegible (texto, máxima legibilidad).
   ===================================================================== */

@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/opendyslexic-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/opendyslexic-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --lago: #1F4E8C;
  --lago-oscuro: #163A6B;
  --lago-claro: #E6EEF8;
  --maiz: #F4B63F;
  --maiz-oscuro: #C98A12;
  --maiz-claro: #FDF1D6;
  --coca: #2F7D55;
  --coca-claro: #E3F2E9;
  --achiote: #B9402A;
  --achiote-claro: #FBE9E5;
  --tinta: #1B2440;
  --tinta-suave: #4A5573;
  --nube: #F5F7FB;
  --blanco: #FFFFFF;
  --linea: #DCE3EF;

  --f-titulo: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --f-texto: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;

  --r-chico: 10px;
  --r-medio: 16px;
  --r-grande: 28px;
  --sombra: 0 2px 0 rgba(27, 36, 64, .08), 0 8px 24px rgba(27, 36, 64, .06);
  --ancho: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--nube);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--lago); text-underline-offset: 3px; }
a:hover { color: var(--lago-oscuro); }
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.15; margin: 0 0 .5em; color: var(--tinta); }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
code { font-size: .92em; background: var(--lago-claro); padding: .1em .35em; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--maiz); outline-offset: 3px; border-radius: 4px; }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.saltar:focus { left: 8px; color: #fff; }

/* Modo dislexia (perfil del niño) */
.modo-dislexia, .modo-dislexia h1, .modo-dislexia h2, .modo-dislexia h3,
.modo-dislexia button, .modo-dislexia input {
  font-family: 'OpenDyslexic', var(--f-texto);
  letter-spacing: .02em;
  word-spacing: .12em;
}

/* ------------------------------------------------------------ Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font: 700 1rem/1 var(--f-texto);
  padding: .85em 1.35em;
  border-radius: var(--r-chico);
  border: 2px solid transparent;
  background: var(--lago); color: var(--blanco);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 var(--lago-oscuro);
  transition: transform .08s ease, box-shadow .08s ease;
}
.boton:hover { color: var(--blanco); filter: brightness(1.05); }
.boton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lago-oscuro); }
.boton-maiz { background: var(--maiz); color: var(--tinta); box-shadow: 0 3px 0 var(--maiz-oscuro); }
.boton-maiz:hover { color: var(--tinta); }
.boton-maiz:active { box-shadow: 0 1px 0 var(--maiz-oscuro); }
.boton-suave { background: var(--blanco); color: var(--lago); border-color: var(--linea); box-shadow: 0 3px 0 var(--linea); }
.boton-suave:hover { color: var(--lago-oscuro); border-color: #c7d3e6; }
.boton-peligro { background: var(--blanco); color: var(--achiote); border-color: #f0c9c1; box-shadow: none; }
.boton-peligro:hover { color: var(--achiote); background: var(--achiote-claro); }
.boton-grande { font-size: 1.15rem; padding: .95em 1.6em; border-radius: var(--r-medio); }
.boton-chico { font-size: .9rem; padding: .55em .9em; }
.boton-ancho { width: 100%; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.enlace-fuerte { font-weight: 700; }
.enlace-suave { color: var(--tinta-suave); }

/* ------------------------------------------------------------ Barra superior */
.barra {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--ancho); margin: 0 auto; padding: 14px 16px;
}
.marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--tinta); font: 800 1.45rem/1 var(--f-titulo); margin-right: auto; }
.marca:hover { color: var(--tinta); }
.menu { display: flex; align-items: center; gap: 1.4rem; }
.menu a:not(.boton) { color: var(--tinta); text-decoration: none; font-weight: 700; }
.menu a:not(.boton):hover { color: var(--lago); }
.menu-boton { display: none; }

@media (max-width: 760px) {
  .menu-boton {
    display: block; background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--r-chico);
    font: 700 .95rem var(--f-texto); padding: .5em .9em; color: var(--tinta); cursor: pointer;
  }
  .menu {
    display: none; position: absolute; left: 12px; right: 12px; top: 68px; z-index: 20;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--blanco); border-radius: var(--r-medio); box-shadow: var(--sombra); padding: 12px;
  }
  .menu a:not(.boton) { padding: .6em .4em; }
  .menu-abierto .menu { display: flex; }
}

.barra-nino { background: var(--blanco); max-width: none; border-bottom: 2px solid var(--linea); }
.nino-chip { display: flex; align-items: center; gap: .5rem; font: 700 1.1rem var(--f-titulo); }

.avatar {
  display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--maiz-claro); font-size: 1.3rem; line-height: 1;
}
.avatar-grande { width: 3.4rem; height: 3.4rem; font-size: 2rem; }
.avatar-enorme { width: 6rem; height: 6rem; font-size: 3.6rem; }

main { min-height: 60vh; }

/* ------------------------------------------------------------ Avisos */
.aviso { max-width: var(--ancho); margin: 12px auto; padding: .85em 1.1em; border-radius: var(--r-chico); font-weight: 700; border-left: 6px solid; }
.form-caja .aviso, .panel .aviso { margin-left: 0; margin-right: 0; }
.aviso-ok { background: var(--coca-claro); border-color: var(--coca); color: #1d5a3b; }
.aviso-error { background: var(--achiote-claro); border-color: var(--achiote); color: #8a2c1b; }
.aviso-info { background: var(--lago-claro); border-color: var(--lago); color: var(--lago-oscuro); }
main > .aviso { margin-left: 16px; margin-right: 16px; }
@media (min-width: 1152px) { main > .aviso { margin-left: auto; margin-right: auto; } }

/* ------------------------------------------------------------ Inicio: hero con demostración */
.hero {
  max-width: var(--ancho); margin: 0 auto; padding: 40px 16px 72px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero h1 { max-width: 15ch; }
.entrada { font-size: 1.2rem; color: var(--tinta-suave); max-width: 52ch; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin: 1.6rem 0 1rem; }
.nota { font-size: .95rem; color: var(--tinta-suave); }

.demo {
  background: var(--blanco);
  border-radius: var(--r-grande);
  padding: 28px;
  box-shadow: var(--sombra);
  border: 2px solid var(--linea);
  position: relative;
}
.demo::before {
  /* el cordón principal del quipu, cruzando la tarjeta */
  content: ""; position: absolute; left: 28px; right: 28px; top: -7px; height: 12px; border-radius: 6px;
  background: repeating-linear-gradient(115deg, var(--maiz) 0 10px, var(--lago) 10px 20px);
}
.demo-kuntur { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; }
.demo-enunciado { font: 700 1.6rem/1.2 var(--f-titulo); margin: .2rem 0 .6rem; }

.globo {
  position: relative; flex: 1;
  background: var(--lago-claro); color: var(--tinta);
  border-radius: var(--r-medio); padding: .85em 1.1em; margin: 0;
  font-weight: 700; min-height: 3em;
  transition: background-color .2s ease;
}
.globo::before {
  content: ""; position: absolute; left: -9px; top: 18px;
  border: 9px solid transparent; border-left: 0; border-right-color: var(--lago-claro);
  transition: border-color .2s ease;
}
.globo p { margin: 0; }
.globo-ok { background: var(--coca-claro); } .globo-ok::before { border-right-color: var(--coca-claro); }
.globo-error { background: var(--maiz-claro); } .globo-error::before { border-right-color: var(--maiz-claro); }
.globo-pista { background: #F1E8F7; } .globo-pista::before { border-right-color: #F1E8F7; }
.globo-grande { padding: 1.1em 1.3em; font-size: 1.15rem; }
.globo-grande .boton { margin-top: .8rem; }

/* Operación en columna */
.operacion {
  display: inline-grid; gap: 2px; margin: .4rem 0 1.2rem;
  font: 700 2.4rem/1.15 var(--f-titulo); font-variant-numeric: tabular-nums;
}
.op-fila { display: grid; grid-auto-flow: column; grid-auto-columns: 1.1ch; justify-content: end; text-align: center; }
.op-fila > span:first-child { color: var(--tinta-suave); }
.op-linea { height: 4px; background: var(--tinta); border-radius: 2px; margin: 2px 0 4px; }
.op-resultado { color: #9aa6c0; }
.op-ok { color: var(--coca); }

/* Opciones de respuesta */
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px; }
.opciones-texto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opcion {
  font: 800 1.6rem/1 var(--f-titulo);
  padding: .6em .4em;
  background: var(--blanco); color: var(--tinta);
  border: 3px solid var(--linea); border-radius: var(--r-medio);
  box-shadow: 0 4px 0 var(--linea);
  cursor: pointer; min-height: 64px;
  transition: transform .08s ease, border-color .15s ease;
}
.opciones-texto .opcion { font-size: 1.25rem; }
.opcion:hover:not(:disabled) { border-color: var(--lago); }
.opcion:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--linea); }
.opcion.es-correcta { border-color: var(--coca); background: var(--coca-claro); box-shadow: 0 4px 0 var(--coca); }
.opcion.es-error { border-color: var(--maiz-oscuro); background: var(--maiz-claro); box-shadow: 0 4px 0 var(--maiz-oscuro); }
.opcion:disabled:not(.es-correcta):not(.es-error) { opacity: .5; }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 16px; }
}

/* ------------------------------------------------------------ Secciones del inicio */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 56px 16px; }
.seccion-estrecha { max-width: 820px; }
.seccion-cabeza { max-width: 62ch; margin-bottom: 2rem; }
.seccion-cabeza p { color: var(--tinta-suave); }

.pasos { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: paso; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pasos li { counter-increment: paso; position: relative; padding-top: 3.6rem; }
.pasos li::before {
  content: counter(paso);
  position: absolute; top: 0; left: 0;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 1.4rem var(--f-titulo); color: var(--tinta); background: var(--maiz);
}
.pasos li:not(:last-child)::after {
  content: ""; position: absolute; top: 1.4rem; left: 3.4rem; right: -20px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--linea) 0 8px, transparent 8px 14px);
}
.pasos p { color: var(--tinta-suave); }
@media (max-width: 880px) {
  .pasos { grid-template-columns: 1fr 1fr; }
  .pasos li::after { display: none; }
}
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; } }

/* Muestra del quipu en el inicio */
.seccion-quipu { background: var(--blanco); max-width: none; border-top: 2px solid var(--linea); border-bottom: 2px solid var(--linea); }
.seccion-quipu > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.quipu-muestra {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 10px solid transparent;
  border-image: repeating-linear-gradient(115deg, var(--tinta) 0 9px, #3a4670 9px 18px) 10;
  padding-top: 0;
}
.cuerda { position: relative; padding: 1.2rem 0 0 2rem; }
.cuerda::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 5px; border-radius: 3px; background: var(--c); }
.cuerda h3 { color: var(--c); }
.cuerda ul { list-style: none; padding: 0; margin: 0; }
.cuerda li { position: relative; padding: .45rem 0; }
.cuerda li::before {
  content: ""; position: absolute; left: calc(-2rem + 4px); top: .78rem;
  width: 17px; height: 17px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--blanco);
}
@media (max-width: 880px) { .quipu-muestra { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .quipu-muestra { grid-template-columns: 1fr; } }

/* Reporte de muestra */
.seccion-reporte { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 880px) { .seccion-reporte { grid-template-columns: 1fr; gap: 28px; } }
.lista-check { list-style: none; padding: 0; margin: 1rem 0; }
.lista-check li { position: relative; padding: .3rem 0 .3rem 1.9rem; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: .3rem; font-weight: 800; color: var(--coca); }
.reporte-muestra { margin: 0; background: var(--blanco); border-radius: var(--r-grande); padding: 24px; box-shadow: var(--sombra); }
.reporte-muestra figcaption { font-weight: 700; color: var(--tinta-suave); margin-bottom: .8rem; }

.barra-dominio {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  padding: .55rem .9rem; margin: .45rem 0; border-radius: var(--r-chico); overflow: hidden;
  background: var(--nube); font-weight: 700; isolation: isolate;
}
.barra-dominio::before {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1;
  width: calc(var(--v) * 1%); background: var(--c); opacity: .18;
}
.barra-dominio::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px;
  width: calc(var(--v) * 1%); background: var(--c);
}
.barra-dominio b { font: 800 1.15rem var(--f-titulo); color: var(--c); }
.reporte-alerta { background: var(--maiz-claro); border-radius: var(--r-chico); padding: .8em 1em; margin: 1rem 0 0; }

.seccion-cuidados .cuidados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 48px; max-width: 900px; }
.cuidados p { padding: 1rem 0; border-bottom: 2px solid var(--linea); margin: 0; }
.cuidados strong { display: block; font: 700 1.2rem var(--f-titulo); }
@media (max-width: 680px) { .seccion-cuidados .cuidados { grid-template-columns: 1fr; } }

.cierre { text-align: center; padding: 72px 16px 88px; background: var(--lago); color: var(--blanco); }
.cierre h2 { color: var(--blanco); }
.cierre p { color: #d8e3f3; }

/* ------------------------------------------------------------ Pie */
.pie { background: var(--tinta); color: #c9d1e3; padding: 40px 16px 24px; }
.pie a { color: #fff; }
.pie-interno { max-width: var(--ancho); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.pie nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.pie-marca { display: flex; align-items: center; gap: .5rem; font: 700 1.2rem var(--f-titulo); color: #fff; }
.pie-copy { max-width: var(--ancho); margin: 24px auto 0; font-size: .9rem; }

/* ------------------------------------------------------------ Precios y legales */
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 2rem 0 3rem; }
@media (max-width: 680px) { .planes { grid-template-columns: 1fr; } }
.plan { background: var(--blanco); border-radius: var(--r-grande); padding: 28px; border: 2px solid var(--linea); display: flex; flex-direction: column; }
.plan .boton { margin-top: auto; }
.plan-destacado { border-color: var(--maiz); box-shadow: 0 6px 0 var(--maiz); }
.precio { font: 800 2.4rem/1 var(--f-titulo); margin: .3rem 0 .2rem; }
.precio small { font-size: 1rem; color: var(--tinta-suave); font-weight: 600; }
.precio-anual { color: var(--tinta-suave); font-weight: 700; }
.pregunta { background: var(--blanco); border-radius: var(--r-medio); padding: 1rem 1.2rem; margin: .6rem 0; border: 2px solid var(--linea); }
.pregunta summary { font-weight: 700; cursor: pointer; }
.pregunta p { margin: .8rem 0 0; }
.legal h2 { margin-top: 2rem; font-size: 1.4rem; }
.legal li { margin: .3rem 0; }

/* ------------------------------------------------------------ Formularios */
.form-caja { max-width: 480px; margin: 32px auto 64px; padding: 32px 28px; background: var(--blanco); border-radius: var(--r-grande); box-shadow: var(--sombra); }
.form-ancha { max-width: 640px; }
.form-caja h1 { font-size: 2rem; }
label { display: block; font-weight: 700; margin: 1.1rem 0 .35rem; }
input, select {
  width: 100%; font: inherit; padding: .75em .9em;
  border: 2px solid var(--linea); border-radius: var(--r-chico); background: var(--blanco); color: var(--tinta);
}
input:focus, select:focus { border-color: var(--lago); outline: none; box-shadow: 0 0 0 3px var(--lago-claro); }
.ayuda { font-size: .92rem; color: var(--tinta-suave); margin: .35rem 0 0; }
.opcional { font-weight: 400; color: var(--tinta-suave); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; accent-color: var(--lago); }
form .boton-ancho { margin-top: 1.6rem; }
.form-pie { margin: 1.2rem 0 0; color: var(--tinta-suave); font-size: .95rem; }
.zona-peligro { margin-top: 2rem; padding-top: 1.4rem; border-top: 2px dashed var(--linea); }

.avatares { border: 0; padding: 0; margin: 1.2rem 0 0; }
.avatares legend { font-weight: 700; margin-bottom: .5rem; }
.avatares { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.avatar-opcion { margin: 0; display: grid; justify-items: center; gap: .3rem; padding: .7rem .3rem; border: 2px solid var(--linea); border-radius: var(--r-medio); cursor: pointer; font-weight: 600; font-size: .85rem; text-align: center; }
.avatar-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avatar-opcion:has(input:checked) { border-color: var(--lago); background: var(--lago-claro); }
.avatar-opcion:has(input:focus-visible) { outline: 3px solid var(--maiz); }

/* PIN */
.pin-caja { max-width: 360px; margin: 32px auto 64px; padding: 0 16px; text-align: center; }
.pin-campo { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.pin-puntos { display: flex; justify-content: center; gap: 14px; margin: 1rem 0 1.4rem; }
.pin-puntos span { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--lago); }
.pin-puntos span.lleno { background: var(--lago); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.teclado button {
  font: 800 1.8rem var(--f-titulo); padding: .5em 0; border-radius: var(--r-medio);
  background: var(--blanco); border: 2px solid var(--linea); box-shadow: 0 4px 0 var(--linea); color: var(--tinta); cursor: pointer;
}
.teclado button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--linea); }
.teclado .tecla-ok { background: var(--maiz); border-color: var(--maiz); box-shadow: 0 4px 0 var(--maiz-oscuro); }

/* ------------------------------------------------------------ Panel del apoderado */
.panel { max-width: 920px; margin: 0 auto; padding: 24px 16px 64px; }
.panel-estrecho { max-width: 720px; }
.panel-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 1.4rem; }
.panel-cabeza h1 { font-size: 2.2rem; margin: 0; }
.panel-cabeza p { margin: .2rem 0 0; color: var(--tinta-suave); }
.texto-alerta { color: var(--achiote); font-weight: 700; }

.vacio { text-align: center; background: var(--blanco); border-radius: var(--r-grande); padding: 40px 24px; box-shadow: var(--sombra); }
.vacio p { color: var(--tinta-suave); max-width: 44ch; margin-left: auto; margin-right: auto; }

.tarjeta-nino { background: var(--blanco); border-radius: var(--r-grande); padding: 24px; margin-bottom: 20px; box-shadow: var(--sombra); }
.tarjeta-nino header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 1rem; }
.tarjeta-nino h2 { margin: 0; font-size: 1.6rem; }
.tarjeta-nino header p { margin: 0; color: var(--tinta-suave); }
.tarjeta-acciones { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dominio-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .dominio-mini { grid-template-columns: 1fr; } .tarjeta-acciones { margin-left: 0; } }
.semana { margin: .8rem 0 0; color: var(--tinta-suave); }
.semana strong { color: var(--tinta); }

.resumen-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: .6rem; }
.resumen-semana div { background: var(--blanco); border-radius: var(--r-medio); padding: 16px; box-shadow: var(--sombra); }
.resumen-semana b { display: block; font: 800 2rem/1.1 var(--f-titulo); color: var(--lago); }
.resumen-semana span { color: var(--tinta-suave); font-size: .95rem; }
.panel h2 { margin-top: 2rem; }

.dificultades { padding: 0; list-style: none; }
.dificultades li { background: var(--maiz-claro); border-radius: var(--r-chico); padding: .8em 1em; margin: .5rem 0; font-weight: 700; }
.dificultades .veces { display: block; font-weight: 400; font-size: .9rem; color: var(--tinta-suave); }
.competencia-reporte { background: var(--blanco); border-radius: var(--r-medio); padding: 14px 16px; margin: .8rem 0; box-shadow: var(--sombra); }
.niveles-reporte { list-style: none; padding: 0; margin: .4rem 0 0; }
.niveles-reporte li { display: flex; justify-content: space-between; gap: 12px; padding: .45rem .2rem; border-bottom: 1px solid var(--linea); }
.niveles-reporte li:last-child { border-bottom: 0; }
.niveles-reporte em { font-style: normal; color: var(--tinta-suave); font-size: .95rem; text-align: right; }
.niveles-reporte .estado-dominada em { color: var(--coca); font-weight: 700; }
.logros { list-style: none; padding: 0; }
.logros li { padding: .4rem 0; color: var(--maiz-oscuro); font-weight: 700; }
.logros span { color: var(--tinta-suave); font-weight: 400; margin-left: .4rem; }
.plan-actual { background: var(--blanco); border-radius: var(--r-medio); padding: 18px 20px; box-shadow: var(--sombra); }
.plan-actual p:last-child { margin: 0; }

.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; background: var(--blanco); border-radius: var(--r-medio); overflow: hidden; box-shadow: var(--sombra); font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { background: var(--lago-claro); font-weight: 700; }
.buscador { display: flex; gap: 8px; margin-bottom: 12px; max-width: 520px; }
.form-plan { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.form-plan select, .form-plan input { width: auto; padding: .45em .5em; font-size: .9rem; }

/* ------------------------------------------------------------ App del niño: quipu */
.zona-app { background: #F3F6FB; }
.mapa { max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; }
.kuntur-dice { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
.kuntur-dice img { flex: none; }
.estrellas-total { margin: 0 0 0 auto; font: 800 1.6rem var(--f-titulo); color: var(--maiz-oscuro); background: var(--blanco); padding: .2em .7em; border-radius: 999px; box-shadow: var(--sombra); white-space: nowrap; }

.quipu {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding-top: 18px;
}
.quipu::before {
  /* cordón principal del quipu */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 7px;
  background: repeating-linear-gradient(115deg, var(--tinta) 0 9px, #3a4670 9px 18px);
}
.cuerda-app { position: relative; padding-top: 10px; }
.cuerda-app h2 { font-size: 1.35rem; color: var(--c); margin: 0 0 .6rem 44px; }
.nudos { list-style: none; margin: 0; padding: 0 0 0 0; position: relative; }
.nudos::before {
  content: ""; position: absolute; left: 26px; top: -46px; bottom: 30px; width: 6px; border-radius: 3px;
  background: var(--c); opacity: .9;
}
.nudo { position: relative; margin: 0 0 22px; }
.nudo > a, .nudo > span { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); border-radius: var(--r-medio); padding: 4px 8px 4px 0; }
.nudo > a:hover .nudo-bola { transform: scale(1.08); }
.nudo-bola {
  position: relative; z-index: 1; flex: none;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 1.5rem var(--f-titulo);
  background: var(--blanco); color: var(--c);
  border: 5px solid var(--c);
  transition: transform .15s ease;
}
.nudo-texto { display: grid; line-height: 1.25; }
.nudo-texto b { font: 700 1.05rem var(--f-titulo); }
.nudo-texto small { color: var(--tinta-suave); font-weight: 700; }

.nudo-dominada .nudo-bola { background: var(--c); color: var(--blanco); }
.nudo-dominada small { color: var(--maiz-oscuro); letter-spacing: .05em; }
.nudo-disponible .nudo-bola, .nudo-en_curso .nudo-bola { box-shadow: 0 0 0 6px var(--maiz); }
.nudo-disponible small { color: var(--lago); }
.nudo-bloqueada .nudo-bola { border-color: #c4cde0; color: #a3aec7; background: #eef1f7; }
.nudo-bloqueada .nudo-texto { color: #8b96b0; }
.nudo-plan .nudo-bola { border-style: dashed; font-size: 1.2rem; }

@media (prefers-reduced-motion: no-preference) {
  .nudo-disponible .nudo-bola, .nudo-en_curso .nudo-bola { animation: latido 2.4s ease-in-out infinite; }
  @keyframes latido { 0%, 100% { box-shadow: 0 0 0 6px var(--maiz); } 50% { box-shadow: 0 0 0 11px rgba(244, 182, 63, .35); } }
}
@media (max-width: 860px) { .quipu { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
@media (max-width: 480px) {
  .quipu { grid-template-columns: 1fr; }
  .estrellas-total { position: absolute; right: 16px; top: 76px; font-size: 1.2rem; }
  .kuntur-dice img { width: 52px; height: 52px; }
}

/* ------------------------------------------------------------ App del niño: lección */
.leccion { max-width: 760px; margin: 0 auto; padding: 18px 16px 72px; }
.leccion-cabeza { display: grid; grid-template-columns: auto 1fr minmax(140px, 220px); align-items: center; gap: 14px; margin-bottom: 18px; }
.leccion-cabeza h1 { font-size: 1.7rem; margin: 0; }
.leccion-comp { margin: 0; color: var(--c); font-weight: 700; }
.volver { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blanco); text-decoration: none; font-size: 1.4rem; font-weight: 800; box-shadow: var(--sombra); }
.avance-barra { height: 14px; border-radius: 7px; background: var(--linea); overflow: hidden; }
.avance-barra span { display: block; height: 100%; width: 0; background: var(--c); border-radius: 7px; transition: width .4s ease; }
.avance p { margin: .3rem 0 0; font-size: .9rem; font-weight: 700; color: var(--tinta-suave); text-align: right; }
@media (max-width: 560px) {
  .leccion-cabeza { grid-template-columns: auto 1fr; }
  .avance { grid-column: 1 / -1; }
  .avance p { text-align: left; }
}

.kuntur-leccion { margin-bottom: 18px; }
#kuntur-img { transition: transform .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .kuntur-feliz { animation: salto .6s ease; }
  .kuntur-piensa { animation: ladeo .7s ease; }
  @keyframes salto { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-6deg); } }
  @keyframes ladeo { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
}

.ejercicio { background: var(--blanco); border-radius: var(--r-grande); padding: 24px; box-shadow: var(--sombra); scroll-margin-top: 12px; }
.enunciado-fila { display: flex; align-items: flex-start; gap: 12px; }
.enunciado { font: 700 1.55rem/1.3 var(--f-titulo); margin: 0 0 1rem; flex: 1; }
.boton-voz { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--linea); background: var(--blanco); font-size: 1.3rem; cursor: pointer; }
.boton-voz:hover { border-color: var(--lago); }
.visual { display: flex; justify-content: center; margin: .4rem 0 1.4rem; overflow-x: auto; }
.visual[hidden] { display: none; }
.respuesta-numero { display: flex; gap: 12px; max-width: 360px; }
.respuesta-numero input { font: 800 2rem var(--f-titulo); text-align: center; padding: .25em .4em; border-width: 3px; }
.ayudas { margin-top: 1.2rem; display: flex; justify-content: flex-end; }

.retro { margin-top: 16px; border-radius: var(--r-grande); padding: 20px 24px; border: 3px solid; }
.retro-ok { background: var(--coca-claro); border-color: var(--coca); }
.retro-error { background: var(--maiz-claro); border-color: var(--maiz); }
.retro-titulo { font: 800 1.5rem var(--f-titulo); margin: 0 0 .3rem; }
.retro-ok .retro-titulo { color: var(--coca); }
.retro-error .retro-titulo { color: var(--maiz-oscuro); }
.retro-texto { font-size: 1.2rem; margin: 0 0 1rem; }
.retro-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; }

.celebracion { text-align: center; background: var(--blanco); border-radius: var(--r-grande); padding: 36px 24px; box-shadow: var(--sombra); }
.celebracion-estrellas { font-size: 3.6rem; color: var(--maiz); letter-spacing: .1em; margin: 0; line-height: 1.2; }
.celebracion .retro-acciones { justify-content: center; margin-top: 1rem; }
.boton-empezar { display: flex; margin: 8px auto 0; min-width: 220px; }

/* ------------------------------------------------------------ Dibujos de ejercicios */
.v-bloques { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; justify-content: center; }
.v-decenas { display: flex; gap: 8px; }
.v-barra { display: grid; grid-template-rows: repeat(10, 14px); gap: 2px; padding: 3px; background: var(--lago-oscuro); border-radius: 5px; }
.v-barra i { width: 14px; background: #6f9ad6; border-radius: 2px; }
.v-unidades { display: grid; grid-template-columns: repeat(3, 20px); gap: 5px; }
.v-cubo { width: 20px; height: 20px; background: var(--maiz); border: 2px solid var(--maiz-oscuro); border-radius: 3px; }

.v-secuencia { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.v-elemento, .v-hueco {
  min-width: 58px; height: 58px; padding: 0 8px; display: grid; place-items: center;
  font: 800 1.9rem var(--f-titulo); background: var(--nube); border-radius: var(--r-chico);
}
.v-hueco { border: 3px dashed var(--lago); color: var(--lago); background: var(--lago-claro); }

.v-balanza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.v-platillo { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--nube); border-bottom: 6px solid var(--tinta-suave); border-radius: var(--r-medio) var(--r-medio) 6px 6px; }
.v-pesa { font: 800 2rem var(--f-titulo); padding: 4px 14px; background: var(--blanco); border-radius: var(--r-chico); border: 2px solid var(--linea); }
.v-balanza .v-hueco { min-width: 56px; height: 56px; }
.v-signo, .v-igual { font: 800 2rem var(--f-titulo); color: var(--tinta-suave); }

.v-figura { width: 210px; height: 210px; }
.v-forma { fill: var(--lago-claro); stroke: var(--lago); stroke-width: 5; stroke-linejoin: round; }
.v-lado { stroke-width: 9; stroke-linecap: round; }
.v-lado-0 { stroke: var(--maiz-oscuro); }
.v-lado-1 { stroke: var(--coca); }
.v-vertice { fill: var(--achiote); stroke: var(--blanco); stroke-width: 3; }

.v-marco-fila { display: grid; gap: 6px; justify-items: center; }
.v-marco-fila .v-lado-etq { font-weight: 700; color: var(--tinta-suave); font-size: .9rem; }
.v-marco-fila .v-lado-etq:first-child { justify-self: start; }
.v-marco-fila .v-lado-etq:last-child { justify-self: end; }
.v-fila, .v-repisa { display: flex; gap: 10px; justify-content: center; }
.v-objeto { margin: 0; display: grid; justify-items: center; gap: 2px; min-width: 64px; }
.v-emoji { font-size: 2.6rem; line-height: 1.1; }
.v-objeto figcaption { font-size: .85rem; color: var(--tinta-suave); font-weight: 700; }
.v-estante { display: grid; gap: 0; }
.v-repisa { padding: 8px 14px 6px; border-bottom: 8px solid #a8784a; }

.v-pictograma, .v-grafico { margin: 0; width: 100%; max-width: 420px; }
.v-pictograma figcaption, .v-grafico figcaption { font-weight: 700; text-align: center; margin-bottom: .5rem; }
.v-picto-tabla { border: 2px solid var(--linea); border-radius: var(--r-chico); overflow: hidden; }
.v-picto-fila { display: grid; grid-template-columns: 110px 1fr; border-bottom: 2px solid var(--linea); }
.v-picto-fila:last-child { border-bottom: 0; }
.v-picto-etq { padding: .5rem .7rem; font-weight: 700; background: var(--nube); }
.v-picto-dibujos { padding: .3rem .6rem; font-size: 1.6rem; letter-spacing: .12em; }
.v-leyenda { text-align: center; color: var(--tinta-suave); font-weight: 700; margin: .5rem 0 0; }
.v-barras { width: 100%; }
.v-rejilla { stroke: var(--linea); stroke-width: 1; }
.v-eje { font: 700 11px var(--f-texto); fill: var(--tinta-suave); text-anchor: end; }
.v-etq { font: 700 12px var(--f-texto); fill: var(--tinta); text-anchor: middle; }
.v-barra-0 { fill: var(--maiz); } .v-barra-1 { fill: var(--achiote); } .v-barra-2 { fill: var(--coca); } .v-barra-3 { fill: var(--lago); }

.v-bolsa { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 280px; padding: 18px 20px; background: #efe3cf; border-radius: 40% 40% var(--r-grande) var(--r-grande); font-size: 2rem; }
.v-dados { display: flex; gap: 6px; font-size: 3rem; line-height: 1; justify-content: center; color: var(--tinta); }

/* ------------------------------------------------------------ Impresión del reporte */
@media print {
  .barra, .pie, .boton, .enlace-suave, .menu-boton { display: none !important; }
  body { background: #fff; }
  .tarjeta-nino, .competencia-reporte, .resumen-semana div { box-shadow: none; border: 1px solid #ccc; }
  .barra-dominio::before, .barra-dominio::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

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

/* =====================================================================
   v2 · Práctica, juegos, insignias, plan Colegio y pagos
   ===================================================================== */

/* Registro: tipo de cuenta */
.selector-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--nube); padding: 5px; border-radius: var(--r-medio); margin: .4rem 0 1rem; }
.selector-tipo a { text-align: center; padding: .6em .4em; border-radius: var(--r-chico); font-weight: 700; text-decoration: none; color: var(--tinta-suave); font-size: .95rem; }
.selector-tipo a[aria-selected="true"] { background: var(--blanco); color: var(--lago); box-shadow: var(--sombra); }

/* Avisos con botón */
.aviso-accion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.logros-linea { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: .4rem 0 .2rem; font-weight: 700; color: var(--tinta-suave); }
.etiqueta { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1em .55em; border-radius: 999px; background: var(--lago-claro); color: var(--lago-oscuro); }
.etiqueta-aprobado { background: var(--coca-claro); color: #1d5a3b; }
.etiqueta-rechazado, .etiqueta-cancelado { background: var(--achiote-claro); color: #8a2c1b; }
.etiqueta-pendiente { background: var(--maiz-claro); color: #7a5500; }
.pagar-opciones { display: flex; flex-wrap: wrap; gap: 10px; margin: .6rem 0; }
.plan .pagar-opciones { margin-top: auto; }
.plan-colegio { margin: -1rem 0 3rem; display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: center; border-color: var(--coca); }
.plan-colegio-acciones { display: grid; gap: 10px; }
@media (max-width: 680px) { .plan-colegio { grid-template-columns: 1fr; } }

/* Mapa del niño: marcadores y accesos */
.marcadores { display: flex; gap: 10px; flex-wrap: wrap; margin: -10px 0 18px; }
.marcador { display: inline-flex; align-items: baseline; gap: .35em; background: var(--blanco); padding: .35em .9em; border-radius: 999px; box-shadow: var(--sombra); font: 700 1.1rem var(--f-titulo); }
.marcador b { font-size: 1.4rem; }
.marcador small { font: 700 .85rem var(--f-texto); color: var(--tinta-suave); }
.marcador-racha b { color: var(--achiote); }
.marcador-estrellas { color: var(--maiz-oscuro); }
.accesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 34px; }
.acceso { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: var(--blanco); border-radius: var(--r-medio); padding: 14px 16px; text-decoration: none; color: var(--tinta); box-shadow: 0 4px 0 var(--linea); border: 2px solid var(--linea); }
.acceso:hover { border-color: var(--lago); color: var(--tinta); }
.acceso > span { grid-row: span 2; font-size: 2rem; }
.acceso b { font: 700 1.1rem var(--f-titulo); }
.acceso small { color: var(--tinta-suave); font-weight: 700; }
.acceso-bloqueado { opacity: .75; }
@media (max-width: 640px) { .accesos { grid-template-columns: 1fr; } }

/* Insignias */
.insignias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 1rem 0; }
.insignia { background: var(--blanco); border-radius: var(--r-medio); padding: 16px 12px; text-align: center; display: grid; gap: 4px; justify-items: center; box-shadow: var(--sombra); }
.insignia b { font: 700 1.05rem var(--f-titulo); }
.insignia small { color: var(--tinta-suave); font-size: .85rem; }
.insignia-emoji { font-size: 2.6rem; line-height: 1.1; width: 4.2rem; height: 4.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--maiz-claro); }
.insignia-pendiente { opacity: .55; }
.insignia-pendiente .insignia-emoji { background: #eef1f7; filter: grayscale(1); }
.insignia-fecha { color: var(--coca) !important; font-weight: 700; }
.insignias-chicas { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.insignias-chicas .insignia-emoji { width: 3rem; height: 3rem; font-size: 1.8rem; }
.dialogo-insignia { border: 0; border-radius: var(--r-grande); padding: 28px 24px; max-width: 420px; width: calc(100% - 32px); text-align: center; box-shadow: 0 20px 60px rgba(27,36,64,.3); }
.dialogo-insignia::backdrop { background: rgba(27, 36, 64, .55); }
.dialogo-titulo { font: 800 1.5rem var(--f-titulo); margin-bottom: .8rem; }
.insignia-grande { display: grid; justify-items: center; gap: 4px; margin: .6rem 0 1rem; }
.insignia-grande span { font-size: 3.4rem; width: 5.4rem; height: 5.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--maiz-claro); }
.insignia-grande b { font: 800 1.25rem var(--f-titulo); }
.insignia-grande small { color: var(--tinta-suave); }
@media (prefers-reduced-motion: no-preference) {
  .dialogo-insignia[open] .insignia-grande span { animation: brillo .9s ease; }
  @keyframes brillo { 0% { transform: scale(.4) rotate(-20deg); } 70% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1); } }
}

/* Aviso flotante */
.tostada { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: var(--r-medio); box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100% - 32px); transition: opacity .5s ease, transform .5s ease; }
.tostada b { display: block; }
.tostada small { color: #c9d1e3; }
.tostada-emoji { font-size: 2rem; }
.tostada-sale { opacity: 0; transform: translate(-50%, 20px); }

/* Cálculo rápido */
.practicas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.practica-op { display: grid; gap: 2px; background: var(--blanco); border-radius: var(--r-medio); padding: 18px; text-decoration: none; color: var(--tinta); border: 2px solid var(--linea); box-shadow: 0 4px 0 var(--linea); }
.practica-op:hover { border-color: #7A3E9D; color: var(--tinta); }
.practica-ejemplo { font: 800 1.9rem var(--f-titulo); color: #7A3E9D; }
.practica-op b { font: 700 1.1rem var(--f-titulo); }
.practica-op small { color: var(--tinta-suave); font-weight: 700; }
.practica-nivel { color: var(--maiz-oscuro); letter-spacing: .15em; }
.tablero-practica { background: var(--blanco); border-radius: var(--r-grande); padding: 22px; box-shadow: var(--sombra); max-width: 420px; margin: 0 auto; text-align: center; }
.practica-racha { min-height: 1.6em; font-weight: 700; color: var(--achiote); }
.practica-pregunta { font: 800 clamp(2.4rem, 9vw, 3.4rem)/1.1 var(--f-titulo); margin: .2rem 0 .8rem; font-variant-numeric: tabular-nums; }
.practica-pantalla { display: block; font: 800 2.2rem var(--f-titulo); min-height: 3.3rem; padding: .2em; border-radius: var(--r-medio); background: var(--nube); border: 3px solid var(--linea); margin-bottom: 14px; }
.practica-pantalla.es-ok { background: var(--coca-claro); border-color: var(--coca); color: #1d5a3b; }
.practica-pantalla.es-mal { background: var(--maiz-claro); border-color: var(--maiz); color: #7a5500; font-size: 1.6rem; }
.teclado-practica button { font-size: 1.6rem; padding: .45em 0; }
.niveles-practica { list-style: none; padding: 0; background: var(--blanco); border-radius: var(--r-medio); box-shadow: var(--sombra); }
.niveles-practica li { display: flex; justify-content: space-between; padding: .6rem 1rem; border-bottom: 1px solid var(--linea); }
.niveles-practica li:last-child { border-bottom: 0; }

/* Calendario de constancia */
.calendario { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; max-width: 460px; }
.dia { display: inline-block; aspect-ratio: 1; min-width: 14px; border-radius: 4px; background: #e6eaf2; }
.dia-1 { background: #f8dfa6; } .dia-2 { background: var(--maiz); } .dia-3 { background: var(--maiz-oscuro); }
.leyenda-calendario { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: var(--tinta-suave); margin-top: .5rem; }
.leyenda-calendario .dia { width: 14px; }

/* Juegos */
.juegos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.juego-tarjeta { display: grid; gap: 6px; background: var(--blanco); border-radius: var(--r-grande); padding: 22px; text-decoration: none; color: var(--tinta); border: 3px solid var(--linea); box-shadow: 0 6px 0 var(--linea); }
.juego-tarjeta:hover { border-color: var(--maiz); color: var(--tinta); }
.juego-emoji { font-size: 3rem; }
.juego-tarjeta b { font: 800 1.4rem var(--f-titulo); }
.juego-tarjeta small { color: var(--tinta-suave); }
.juego-estado { font-weight: 700; color: var(--lago) !important; }
.juego-bloqueado { opacity: .7; }
.juego { max-width: 760px; margin: 0 auto; padding: 18px 16px 64px; }
.juego-cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.juego-cabeza h1 { font-size: 1.8rem; margin: 0; }
.juego-marcador { margin: 0 0 0 auto; font-weight: 700; }
.juego-marcador span:first-child { font: 800 1.5rem var(--f-titulo); color: var(--lago); }

.lluvia { position: relative; height: min(64vh, 520px); border-radius: var(--r-grande); overflow: hidden; background: linear-gradient(#cfe0f5, #eef4fb 70%); touch-action: manipulation; user-select: none; }
.nube { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: #fff; padding: .4em 1.1em; border-radius: 999px; font: 800 2rem var(--f-titulo); box-shadow: 0 6px 0 rgba(27,36,64,.08); z-index: 2; white-space: nowrap; }
.vidas { position: absolute; top: 18px; right: 14px; font-size: 1.3rem; z-index: 2; }
.suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-linear-gradient(115deg, #7ab26b 0 12px, #6aa05c 12px 24px); }
.gota { position: absolute; top: 0; z-index: 3; width: 76px; height: 86px; border: 0; cursor: pointer; font: 800 1.6rem var(--f-titulo); color: #fff; background: var(--lago); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: inset -8px -10px 0 rgba(0,0,0,.12); will-change: transform; }
.gota-ok { background: var(--coca); }
.gota-mal { background: var(--achiote); }
.temblor { animation: temblor .3s ease; }
@keyframes temblor { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.mercado { background: var(--blanco); border-radius: var(--r-grande); padding: 20px; box-shadow: var(--sombra); }
.puesto { text-align: center; background: repeating-linear-gradient(90deg, var(--maiz-claro) 0 30px, #fff 30px 60px); border-radius: var(--r-medio); padding: 16px; border-bottom: 6px solid var(--maiz); }
.producto { font: 800 2.2rem var(--f-titulo); margin: 0; }
.precio-producto { font: 800 2.6rem var(--f-titulo); color: var(--achiote); margin: 0; }
.ronda { margin: 0; color: var(--tinta-suave); font-weight: 700; }
.caja { margin: 16px 0; padding: 12px; border: 2px dashed var(--linea); border-radius: var(--r-medio); min-height: 90px; }
.caja p { margin: 0 0 6px; font-weight: 700; }
.caja b { font: 800 1.4rem var(--f-titulo); color: var(--lago); }
.monedero { display: flex; flex-wrap: wrap; gap: 6px; }
.billetera { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; }
.dinero { border: 0; cursor: pointer; font: 800 1.05rem var(--f-titulo); color: var(--tinta); display: inline-grid; place-items: center; }
.moneda { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbe7a8, #d9a92b 70%); box-shadow: inset 0 0 0 4px rgba(150,100,0,.35), 0 4px 0 #a97c12; }
.moneda-chica { width: 58px; height: 58px; font-size: .9rem; background: radial-gradient(circle at 35% 30%, #f1d9b5, #b98a4c 70%); }
.billete { width: 104px; height: 58px; border-radius: 8px; background: linear-gradient(135deg, #b9dcc3, #6fae83); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), 0 4px 0 #4d8a5f; }
.dinero.mini { width: 34px; height: 34px; font-size: .75rem; box-shadow: none; cursor: default; }
.billete.mini { width: 48px; height: 28px; }
.dinero:active:not(.mini) { transform: translateY(3px); }
.mercado-mensaje { min-height: 1.5em; font-weight: 700; text-align: center; margin: 12px 0 0; }
.mercado-mensaje.es-ok { color: var(--coca); }
.mercado-mensaje.es-mal { color: var(--achiote); }

/* Plan Colegio: panel docente */
.panel-ancho { max-width: 1100px; }
.aulas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 1rem; }
.aula-tarjeta { display: flex; gap: 14px; align-items: center; background: var(--blanco); border-radius: var(--r-medio); padding: 16px; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra); border: 2px solid transparent; }
.aula-tarjeta:hover { border-color: var(--lago); color: var(--tinta); }
.aula-grado { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 800 1.5rem var(--f-titulo); background: var(--lago); color: #fff; flex: none; }
.aula-datos { display: grid; }
.aula-datos b { font: 700 1.2rem var(--f-titulo); }
.aula-datos small { color: var(--tinta-suave); }
.form-linea { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-linea > div { flex: 1 1 200px; }
.form-linea label { margin-top: 0; }
.pasos-simples li { margin: .35rem 0; }
.codigo-aula { text-align: center; background: var(--blanco); border: 3px dashed var(--lago); border-radius: var(--r-medio); padding: 8px 18px; }
.codigo-aula small { display: block; color: var(--tinta-suave); font-weight: 700; }
.codigo-aula b { font: 800 2rem var(--f-titulo); letter-spacing: .12em; color: var(--lago); }
.tabla-aula th[style] { border-bottom: 4px solid var(--c); }
.tabla-aula td { vertical-align: middle; }
.celda-dominio { display: inline-grid; place-items: center; min-width: 2.6rem; padding: .2em .4em; border-radius: 8px; font-weight: 800; background: color-mix(in srgb, var(--c) calc(var(--v) * 0.4%), #fff); }
.menu-fila summary { cursor: pointer; list-style: none; font-size: 1.4rem; padding: 0 .4rem; }
.menu-fila summary::-webkit-details-marker { display: none; }
.menu-fila form { display: grid; gap: 6px; margin-top: 6px; }
.form-alumnos textarea { width: 100%; font: inherit; padding: .75em .9em; border: 2px solid var(--linea); border-radius: var(--r-chico); }
.form-alumnos .boton { margin-top: 1rem; }
.ajustes-aula { margin-top: 2.4rem; background: var(--blanco); border-radius: var(--r-medio); padding: 14px 18px; }
.ajustes-aula summary { font-weight: 700; cursor: pointer; }
.ajustes-aula form { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

/* Ingreso de alumnos por código */
.pin-caja-ancha { max-width: 640px; }
.form-codigo { max-width: 340px; margin: 0 auto; }
.campo-codigo { text-align: center; font: 800 2.2rem var(--f-titulo); letter-spacing: .25em; text-transform: uppercase; padding: .3em; margin: .8rem 0 1rem; border-width: 3px; }
.lista-alumnos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 1rem 0; }
.alumno-boton { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--r-medio); text-decoration: none; color: var(--tinta); font: 700 1.05rem var(--f-titulo); box-shadow: 0 4px 0 var(--linea); }
.alumno-boton:hover { border-color: var(--lago); color: var(--tinta); }

/* Dibujos nuevos de ejercicios */
.v-centenas { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.v-placa { display: grid; grid-template-columns: repeat(10, 7px); grid-auto-rows: 7px; gap: 1px; padding: 3px; background: #8a5a12; border-radius: 4px; }
.v-placa i { background: #e9b54a; border-radius: 1px; }
.v-bloques-chicos .v-barra { grid-template-rows: repeat(10, 7px); gap: 1px; padding: 3px; }
.v-bloques-chicos .v-barra i { width: 7px; }
.v-bloques-chicos .v-cubo { width: 13px; height: 13px; }
.v-bloques-chicos .v-unidades { grid-template-columns: repeat(3, 13px); gap: 4px; }
.v-grupos { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.v-grupo { display: flex; flex-wrap: wrap; gap: 2px; max-width: 120px; justify-content: center; padding: 10px; border: 3px solid var(--lago); border-radius: 50% / 40%; font-size: 1.5rem; background: var(--lago-claro); }
.v-perimetro { width: 100%; max-width: 360px; overflow: visible; }
.v-medida { font: 800 16px var(--f-texto); fill: var(--tinta); }
.v-marca { stroke: var(--achiote); stroke-width: 3; }
.v-cuerpo { width: 230px; height: 210px; }
.v-cara { fill: var(--lago-claro); stroke: var(--lago); stroke-width: 3.5; stroke-linejoin: round; }
.v-cara-arriba { fill: #f3f7fd; }
.v-cara-lado { fill: #c9daf0; }
.v-esfera { fill: var(--lago-claro); }
.v-arista { stroke: var(--lago); stroke-width: 3.5; stroke-linecap: round; }
.v-oculta { stroke: var(--lago); stroke-width: 2.5; stroke-dasharray: 6 6; opacity: .7; fill: none; }
.seccion-extra { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
.extra-docentes { background: var(--blanco); border-radius: var(--r-grande); padding: 26px; border: 2px solid var(--linea); }
@media (max-width: 880px) { .seccion-extra { grid-template-columns: 1fr; } }

/* v3 · cuenta, recuperación y correos */
.bloque-cuenta { background: var(--blanco); border-radius: var(--r-medio); padding: 18px 20px 22px; box-shadow: var(--sombra); margin-bottom: 18px; }
.bloque-cuenta h2 { margin-top: 0; font-size: 1.4rem; }
.bloque-cuenta .boton { margin-top: 1rem; }
.olvido { margin-top: 1.4rem; border-top: 2px dashed var(--linea); padding-top: 1rem; }
.olvido summary { cursor: pointer; font-weight: 700; color: var(--lago); }
.olvido p { font-size: .95rem; color: var(--tinta-suave); margin: .8rem 0 .4rem; }
.vista-correo { width: 100%; max-width: 680px; height: 900px; border: 2px solid var(--linea); border-radius: var(--r-medio); background: #F5F7FB; }
.fila-voz { display: flex; gap: 8px; }
.fila-voz select { flex: 1; }

/* v4 · marca del colegio */
.barra-colegio { border-bottom: 4px solid var(--color-colegio, var(--linea)); }
.barra-colegio-docente { max-width: none; background: var(--blanco); }
.colegio-marca { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-colegio) 10%, #fff); font: 700 .95rem var(--f-titulo); color: var(--tinta); max-width: 40vw; }
.colegio-marca img { width: 36px; height: 36px; object-fit: contain; }
.colegio-marca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-nino .colegio-marca { margin-right: auto; }
.barra .marca + .colegio-marca { margin-left: -6px; }
.barra:has(.colegio-marca) .marca { margin-right: 0; }
.barra:has(.colegio-marca) .colegio-marca { margin-right: auto; }
@media (max-width: 560px) { .colegio-marca span { display: none; } .colegio-marca { padding: 2px; } }
.aula-colegio { display: grid; justify-items: center; gap: 6px; margin-bottom: 8px; }
.aula-colegio img { width: 88px; height: 88px; object-fit: contain; }
.aula-colegio p { margin: 0; font: 700 1rem var(--f-titulo); color: var(--color-colegio); }
.subidas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1rem; }
.subida { display: grid; gap: 8px; justify-items: start; }
.subida-titulo { font-weight: 700; }
.subida-vista { width: 96px; height: 96px; display: grid; place-items: center; background: var(--nube); border: 2px dashed var(--linea); border-radius: var(--r-medio); }
.subida-vista-ancha { width: 180px; }
.subida-vista img { max-width: 90%; max-height: 90%; object-fit: contain; }
.subida input[type=file] { padding: .4em; font-size: .9rem; }
.campo-color { width: 90px; height: 46px; padding: 4px; }
.muestra-colegio { border: 2px solid var(--linea); border-radius: var(--r-medio); overflow: hidden; }
.punto-color { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
@media (max-width: 560px) { .subidas { grid-template-columns: 1fr; } }

/* v4 · dibujos de 4.° a 6.° */
.v-fraccion { width: 100%; max-width: 320px; }
.v-fraccion-circulo { max-width: 200px; }
.v-parte { fill: #fff; stroke: var(--lago); stroke-width: 3; }
.v-pintada { fill: var(--maiz); }
.v-fracciones { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.v-fraccion-item { margin: 0; display: grid; justify-items: center; gap: 4px; width: 200px; }
.v-fraccion-item figcaption { font: 800 1.4rem var(--f-titulo); }
.v-angulo { width: 260px; height: 170px; }
.v-rayo { stroke: var(--lago); stroke-width: 5; stroke-linecap: round; }
.v-arco { fill: none; stroke: var(--achiote); stroke-width: 4; }
.v-recto { fill: none; stroke: var(--achiote); stroke-width: 3; }
.v-vertice-angulo { fill: var(--tinta); }
.v-cuadricula { width: 100%; max-width: 360px; }
.v-celda { fill: #fff; stroke: #c9d4e6; stroke-width: 1.5; }
.v-celda-llena { fill: #9cc0ea; stroke: var(--lago); }
.v-altura { stroke: var(--achiote); stroke-width: 3; stroke-dasharray: 7 6; }
.v-tabla { border-collapse: collapse; font-size: 1.05rem; background: #fff; }
.v-tabla caption { font-weight: 700; margin-bottom: .4rem; }
.v-tabla th, .v-tabla td { border: 2px solid var(--linea); padding: .45em .8em; text-align: center; }
.v-tabla thead th, .v-tabla tbody th { background: var(--lago-claro); }
.v-linea { fill: none; stroke: var(--lago); stroke-width: 4; stroke-linejoin: round; }
.v-punto { fill: var(--achiote); stroke: #fff; stroke-width: 2; }
.v-plano { width: 100%; max-width: 320px; }
.v-eje-linea { stroke: var(--tinta); stroke-width: 2.5; }
.v-circular { width: 100%; max-width: 360px; }
.v-sector { stroke: #fff; stroke-width: 2; }
.v-porcentaje { font: 800 15px var(--f-texto); fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.25); stroke-width: 3px; }
.v-cubos { width: 100%; max-width: 300px; }
.v-cubo-arriba { fill: #dbe8f8; stroke: var(--lago); stroke-width: 1.5; }
.v-cubo-der { fill: #7fa8dc; stroke: var(--lago); stroke-width: 1.5; }
.v-cubo-izq { fill: #a9c6ea; stroke: var(--lago); stroke-width: 1.5; }

/* Teclado de práctica: con punto decimal, el ✓ ocupa toda la fila; sin punto, ⌫ 0 ✓ como antes */
.teclado-practica:not(.teclado-decimal) [data-k="0"] { order: 1; }
.teclado-practica:not(.teclado-decimal) [data-k="borrar"] { order: 0; }
.teclado-practica:not(.teclado-decimal) .tecla-ok { order: 2; }
.teclado-decimal .tecla-ok { grid-column: 1 / -1; }

/* Etiquetas de medidas legibles aunque crucen una línea */
.v-medida, .v-etq, .v-angulo text, .v-plano text { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }

/* Secundaria: rectas y curvas en el plano */
.v-recta { stroke: var(--achiote); stroke-width: 3; }
.v-curva { fill: none; stroke: var(--lago); stroke-width: 3.5; stroke-linecap: round; }
.v-plano { max-width: 360px; }

.respuesta-numero .boton-signo { min-width: 3rem; font-size: 1.3rem; padding-inline: .6rem; }

/* =====================================================================
   v6 · PREMIUM «ANDINO MODERNO»
   Temas de color del estudiante, profundidad, movimiento suave y el estudio de avatar.
   ===================================================================== */
:root {
  --sombra: 0 1px 2px rgba(27, 36, 64, .06), 0 6px 16px rgba(27, 36, 64, .07), 0 18px 40px -18px rgba(27, 36, 64, .18);
  --sombra-alta: 0 2px 4px rgba(27, 36, 64, .06), 0 14px 30px rgba(27, 36, 64, .12), 0 30px 60px -24px rgba(27, 36, 64, .28);
  --r-medio: 18px;
  --r-grande: 26px;
  --suave: cubic-bezier(.2, .8, .2, 1);
  --textil: repeating-linear-gradient(90deg, var(--achiote) 0 18px, var(--maiz) 18px 36px, var(--coca) 36px 54px, var(--lago) 54px 72px);
}

/* --------------------------------------------------------------- Temas (solo app del estudiante) */
[data-tema="oceano"]    { --lago: #0E6BA8; --lago-oscuro: #0A4F7D; --lago-claro: #E3F1FA; --maiz: #4FD1C5; --maiz-oscuro: #2A9D8F; --maiz-claro: #DDF7F4; --nube: #EEF7FB; }
[data-tema="selva"]     { --lago: #1E7A4C; --lago-oscuro: #155A37; --lago-claro: #E4F3EA; --maiz: #C6D93B; --maiz-oscuro: #8FA020; --maiz-claro: #F3F8D9; --nube: #F1F7F1; }
[data-tema="atardecer"] { --lago: #C2452D; --lago-oscuro: #922F1E; --lago-claro: #FCE8E2; --maiz: #F6A13A; --maiz-oscuro: #C8741A; --maiz-claro: #FFF0DC; --nube: #FFF7F1; }
[data-tema="rosa"]      { --lago: #C2387A; --lago-oscuro: #962660; --lago-claro: #FCE6F0; --maiz: #FFB4D2; --maiz-oscuro: #E07AA6; --maiz-claro: #FFEAF3; --nube: #FFF5F9; }
[data-tema="lavanda"]   { --lago: #6B4BC4; --lago-oscuro: #4F3594; --lago-claro: #EEE9FB; --maiz: #B8A4F5; --maiz-oscuro: #8C73E0; --maiz-claro: #F2EEFE; --nube: #F7F5FF; }
[data-tema="menta"]     { --lago: #127C74; --lago-oscuro: #0C5A54; --lago-claro: #E0F4F1; --maiz: #7FE3C4; --maiz-oscuro: #3FBF98; --maiz-claro: #E3FAF2; --nube: #F0FAF7; }
/* Variantes con el color del colegio (--cc lo pone la cabecera) */
[data-tema="colegio"], [data-tema="colegio-suave"], [data-tema="colegio-noche"] {
  --lago: var(--cc, #1F4E8C);
  --lago-oscuro: color-mix(in srgb, var(--cc, #1F4E8C) 72%, #000);
  --lago-claro: color-mix(in srgb, var(--cc, #1F4E8C) 12%, #fff);
}
[data-tema="colegio-suave"] {
  --maiz: color-mix(in srgb, var(--cc, #1F4E8C) 30%, #fff); --maiz-oscuro: color-mix(in srgb, var(--cc, #1F4E8C) 55%, #fff);
  --maiz-claro: color-mix(in srgb, var(--cc, #1F4E8C) 8%, #fff); --nube: color-mix(in srgb, var(--cc, #1F4E8C) 4%, #FBFAF7);
}
/* Temas oscuros */
[data-tema="noche"], [data-tema="colegio-noche"] {
  --nube: #0F1424; --blanco: #1A2138; --tinta: #EEF2FF; --tinta-suave: #A9B3D1; --linea: #2C3655;
  --maiz-claro: #3A3220; --coca-claro: #183A2B; --achiote-claro: #3D2220;
  color-scheme: dark;
}
[data-tema="noche"] { --lago: #8FB4FF; --lago-oscuro: #5E86D6; --lago-claro: #22304F; }
[data-tema="colegio-noche"] { --lago: color-mix(in srgb, var(--cc, #1F4E8C) 45%, #fff); --lago-oscuro: color-mix(in srgb, var(--cc, #1F4E8C) 70%, #fff); --lago-claro: color-mix(in srgb, var(--cc, #1F4E8C) 30%, #1A2138); }
[data-tema="noche"] .boton-maiz, [data-tema="colegio-noche"] .boton-maiz,
[data-tema="noche"] .boton:not(.boton-suave):not(.boton-peligro), [data-tema="colegio-noche"] .boton:not(.boton-suave):not(.boton-peligro) { color: #10162A; }
[data-tema="noche"] .nudo-bloqueada .nudo-bola, [data-tema="colegio-noche"] .nudo-bloqueada .nudo-bola { background: #222A44; border-color: #3A4466; color: #6E7898; }
[data-tema="noche"] .nudo-bloqueada .nudo-texto, [data-tema="colegio-noche"] .nudo-bloqueada .nudo-texto { color: #6E7898; }
[data-tema="noche"] .practica-pantalla.es-ok, [data-tema="colegio-noche"] .practica-pantalla.es-ok { color: #9BE3BC; }
[data-tema="noche"] .practica-pantalla.es-mal, [data-tema="colegio-noche"] .practica-pantalla.es-mal { color: #F7D27A; }
[data-tema="noche"] .aviso-ok, [data-tema="colegio-noche"] .aviso-ok { color: #9BE3BC; }
[data-tema="noche"] .aviso-error, [data-tema="colegio-noche"] .aviso-error { color: #F4B3A8; }
[data-tema="noche"] .aviso-info, [data-tema="colegio-noche"] .aviso-info { color: #BCD0FF; }
[data-tema="noche"] .globo-pista, [data-tema="colegio-noche"] .globo-pista { background: #2E2445; }
[data-tema="noche"] .globo-pista::before, [data-tema="colegio-noche"] .globo-pista::before { border-right-color: #2E2445; }
[data-tema="noche"] .visual svg, [data-tema="colegio-noche"] .visual svg { background: #F7F9FD; border-radius: 14px; padding: 6px; }
[data-tema="noche"] .visual .v-tabla, [data-tema="colegio-noche"] .visual .v-tabla { color: #1B2440; background: #F7F9FD; }
[data-tema="noche"] .dia, [data-tema="colegio-noche"] .dia { background: #2A3352; }

/* --------------------------------------------------------------- Fondo y barra de la app */
.zona-app {
  background:
    radial-gradient(1100px 520px at 0% -8%, color-mix(in srgb, var(--lago) 14%, transparent), transparent 62%),
    radial-gradient(900px 480px at 105% 0%, color-mix(in srgb, var(--maiz) 22%, transparent), transparent 58%),
    var(--nube);
  background-attachment: fixed;
}
.barra-nino {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--blanco) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--tinta) 8%, transparent);
}
.barra-nino::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--textil); opacity: .85; }
.barra-nino .marca span { background: linear-gradient(90deg, var(--lago), color-mix(in srgb, var(--lago) 60%, var(--maiz))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nino-chip { text-decoration: none; color: var(--tinta); padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--blanco); box-shadow: var(--sombra); transition: transform .2s var(--suave), box-shadow .2s var(--suave); }
.nino-chip:hover { color: var(--tinta); transform: translateY(-1px); box-shadow: var(--sombra-alta); }

/* --------------------------------------------------------------- Avatares ilustrados */
.avatar.av { background: transparent; overflow: hidden; padding: 0; font-size: 1.2rem; box-shadow: 0 0 0 2.5px var(--blanco), 0 0 0 4.5px color-mix(in srgb, var(--maiz) 85%, var(--lago)); }
.av svg { display: block; width: 100%; height: 100%; }
.avatar.av.avatar-grande { width: 3.6rem; height: 3.6rem; }
.avatar.av.avatar-enorme { width: 7rem; height: 7rem; box-shadow: 0 0 0 4px var(--blanco), 0 0 0 8px var(--maiz), var(--sombra-alta); }
.nino-chip .avatar.av { width: 2.5rem; height: 2.5rem; }

/* --------------------------------------------------------------- Tarjetas, botones y movimiento */
.boton { background: linear-gradient(180deg, color-mix(in srgb, var(--lago) 88%, #fff), var(--lago)); transition: transform .12s var(--suave), box-shadow .12s var(--suave), filter .2s; }
.boton-maiz { background: linear-gradient(180deg, color-mix(in srgb, var(--maiz) 80%, #fff), var(--maiz)); }
.boton-suave { background: var(--blanco); }
.boton-peligro { background: var(--blanco); }
.boton:hover { filter: brightness(1.04) saturate(1.05); }

.globo { background: var(--blanco); box-shadow: var(--sombra); border: 1px solid color-mix(in srgb, var(--lago) 14%, transparent); }
.globo::before { border-right-color: var(--blanco); filter: drop-shadow(-1px 0 0 color-mix(in srgb, var(--lago) 14%, transparent)); }
.globo-grande { border-left: 5px solid var(--maiz); }

.acceso, .practica-op, .juego-tarjeta, .insignia, .marcador, .ejercicio, .celebracion, .tablero-practica {
  border: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent); box-shadow: var(--sombra);
}
.acceso, .practica-op, .juego-tarjeta, .insignia { transition: transform .22s var(--suave), box-shadow .22s var(--suave), border-color .2s; }
.acceso:hover, .practica-op:hover, .juego-tarjeta:hover, .insignia:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--lago) 40%, transparent); }
.acceso > span:first-child { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; font-size: 1.6rem; background: linear-gradient(140deg, var(--lago-claro), var(--maiz-claro)); }
.acceso-avatar .avatar.av { grid-row: span 2; width: 3rem; height: 3rem; }
.accesos { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .accesos { grid-template-columns: 1fr 1fr; } }

.marcador { backdrop-filter: blur(6px); }

/* Quipu: nudos con volumen */
.nudo-bola { background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--blanco) 55%, #fff) 0 14%, var(--blanco) 15%); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--c) 18%, transparent); }
.nudo-dominada .nudo-bola { background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c) 55%, #fff) 0 16%, var(--c) 46%); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--c) 70%, transparent); }
.nudo > a { transition: background-color .2s; }
.nudo > a:hover { background: color-mix(in srgb, var(--c) 7%, transparent); }
.quipu::before { background: linear-gradient(180deg, rgba(255,255,255,.18), transparent), repeating-linear-gradient(115deg, var(--tinta) 0 9px, color-mix(in srgb, var(--tinta) 70%, var(--lago)) 9px 18px); box-shadow: 0 4px 10px -4px rgba(0,0,0,.4); }

/* Lección: barra de avance con brillo, opciones vivas */
.avance-barra { background: color-mix(in srgb, var(--tinta) 10%, transparent); }
.avance-barra span { background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--lago)) 70%, #fff), var(--c, var(--lago))); position: relative; overflow: hidden; }
.avance-barra span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); }
.opcion { transition: transform .15s var(--suave), border-color .15s, box-shadow .15s, background-color .2s; }
.opcion:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--linea), 0 10px 20px -10px rgba(27,36,64,.3); }
.ejercicio { border-radius: 28px; }
.retro { border-width: 0; border-left: 6px solid; box-shadow: var(--sombra); }
.volver { transition: transform .2s var(--suave); }
.volver:hover { transform: translateX(-3px); }

@media (prefers-reduced-motion: no-preference) {
  .avance-barra span::after { animation: brillo-barra 2.6s ease-in-out infinite; }
  @keyframes brillo-barra { 0%, 40% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
  .opcion.es-correcta { animation: pop .45s var(--suave); }
  .opcion.es-error { animation: sacudir .4s ease; }
  @keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
  @keyframes sacudir { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
  .mapa > *, .leccion > *, .estudio > * { animation: entrar .5s var(--suave) both; }
  .mapa > *:nth-child(2), .estudio > *:nth-child(2) { animation-delay: .05s; }
  .mapa > *:nth-child(3), .estudio > *:nth-child(3) { animation-delay: .1s; }
  .mapa > *:nth-child(4), .estudio > *:nth-child(4) { animation-delay: .15s; }
  .mapa > *:nth-child(5) { animation-delay: .2s; }
  @keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .celebracion-estrellas { animation: estrellas 1s var(--suave) both; }
  @keyframes estrellas { 0% { transform: scale(.3) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
}

/* --------------------------------------------------------------- Estudio de avatar */
.estudio { max-width: 1040px; margin: 0 auto; padding: 18px 16px 120px; }
.estudio-cabeza { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center; margin-bottom: 24px; }
.estudio-vista { text-align: center; }
.estudio-avatar { width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; box-shadow: 0 0 0 6px var(--blanco), 0 0 0 11px var(--maiz), var(--sombra-alta); }
.estudio-avatar svg { width: 100%; height: 100%; display: block; }
.estudio-nombre { font: 800 1.5rem var(--f-titulo); margin: 16px 0 6px; }
.estudio-vista .marcador { display: inline-flex; }
.pestanas { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 7%, transparent); margin-top: .4rem; flex-wrap: wrap; }
.pestana { font: 700 1rem var(--f-texto); border: 0; background: transparent; color: var(--tinta-suave); padding: .65em 1.2em; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.pestana.activa { background: var(--blanco); color: var(--lago); box-shadow: var(--sombra); }
.sub { font-size: 1.25rem; margin: 1.4rem 0 .8rem; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.galeria-chica { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.ficha { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px; border-radius: 20px; background: var(--blanco); border: 2px solid transparent; box-shadow: var(--sombra); cursor: pointer; font: 700 .92rem var(--f-titulo); color: var(--tinta); transition: transform .2s var(--suave), box-shadow .2s, border-color .2s; }
.ficha:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.ficha.activa { border-color: var(--lago); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lago) 22%, transparent), var(--sombra-alta); }
.ficha-av { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: block; }
.galeria-chica .ficha-av { width: 64px; height: 64px; }
.ficha-av svg { width: 100%; height: 100%; display: block; }
.ficha-nombre { line-height: 1.1; text-align: center; }
.ficha.bloqueada .ficha-av { filter: grayscale(.85) brightness(1.05); opacity: .6; }
.ficha-candado, .muestra-av em { position: absolute; top: 8px; right: 8px; font: 800 .78rem var(--f-texto); font-style: normal; color: #5A3D00; background: var(--maiz); padding: .2em .55em; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.creador { display: grid; gap: 18px; }
.grupo { background: var(--blanco); border-radius: 22px; padding: 16px 18px; box-shadow: var(--sombra); border: 1px solid color-mix(in srgb, var(--tinta) 6%, transparent); }
.grupo h3 { font-size: 1.05rem; margin: 0 0 .7rem; color: var(--tinta-suave); }
.opciones-av { display: flex; flex-wrap: wrap; gap: 10px; }
.muestra-color { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--blanco); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 15%, transparent), 0 3px 8px -2px rgba(0,0,0,.2); cursor: pointer; transition: transform .15s var(--suave); }
.muestra-color:hover { transform: scale(1.1); }
.muestra-color.activa { box-shadow: 0 0 0 3px var(--lago), 0 3px 8px -2px rgba(0,0,0,.2); transform: scale(1.08); }
.muestra-av { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 6px 4px; border-radius: 16px; border: 2px solid transparent; background: var(--nube); cursor: pointer; color: var(--tinta); transition: transform .15s var(--suave), border-color .15s; }
.muestra-av:hover { transform: translateY(-2px); }
.muestra-av.activa { border-color: var(--lago); background: var(--lago-claro); }
.muestra-av.bloqueada .mini { filter: grayscale(.9); opacity: .55; }
.muestra-av em { top: -6px; right: -6px; }
.mini { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; display: block; }
.mini svg { width: 100%; height: 100%; display: block; }
.mini-zoom svg { transform: scale(2.1) translateY(4%); transform-origin: 50% 52%; }
.muestra-av small { font: 700 .74rem var(--f-texto); color: var(--tinta-suave); }
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.tema { display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: var(--blanco); border: 2px solid transparent; box-shadow: var(--sombra); cursor: pointer; color: var(--tinta); font: 700 1rem var(--f-titulo); transition: transform .2s var(--suave), border-color .2s; }
.tema:hover { transform: translateY(-3px); }
.tema.activo { border-color: var(--lago); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lago) 20%, transparent), var(--sombra-alta); }
.tema-muestra { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: 70px; border-radius: 14px; overflow: hidden; background: var(--t3); border: 1px solid rgba(0,0,0,.06); }
.tema-muestra i:nth-child(1) { grid-row: span 2; background: linear-gradient(140deg, var(--t1), color-mix(in srgb, var(--t1) 70%, #000)); }
.tema-muestra i:nth-child(2) { background: var(--t2); }
.tema-muestra i:nth-child(3) { background: var(--t3); }
.estudio-pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 14px max(16px, calc((100vw - 1040px) / 2 + 16px)); background: color-mix(in srgb, var(--blanco) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.25); }
.estudio-estado { font-weight: 700; color: var(--tinta-suave); }
.estudio-estado.pulso { animation: pulso .6s ease; }
@keyframes pulso { 0% { transform: scale(.96); opacity: .4; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .estudio-avatar.rebote { animation: rebote .5s var(--suave); }
  @keyframes rebote { 0% { transform: scale(.94); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
}
@media (max-width: 760px) {
  .estudio-cabeza { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .estudio-avatar { width: 150px; height: 150px; }
  .galeria { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .ficha-av { width: 68px; height: 68px; }
  .estudio-pie { justify-content: space-between; }
}
.avatares-ilustrados { border: 0; padding: 0; margin: 1rem 0; }
.avatares-ilustrados legend { font-weight: 700; margin-bottom: .6rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.acceso-avatar > .avatar.av:first-child { border-radius: 50%; background: transparent; font-size: 1.2rem; }

[data-tema="noche"] .nudo-bola, [data-tema="colegio-noche"] .nudo-bola { background: var(--blanco); }
[data-tema="noche"] .quipu::before, [data-tema="colegio-noche"] .quipu::before { background: repeating-linear-gradient(115deg, #3A4670 0 9px, #26304F 9px 18px); }
@media (max-width: 760px) {
  .pestanas { display: flex; width: 100%; flex-wrap: nowrap; }
  .pestana { flex: 1; padding: .65em .4em; font-size: .92rem; white-space: nowrap; }
  .barra-nino .marca span { display: none; }
}
@media (max-width: 560px) {
  .accesos { gap: 10px; }
  .acceso { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; text-align: center; padding: 14px 8px; row-gap: 2px; }
  .acceso > span:first-child, .acceso-avatar > .avatar.av:first-child { grid-row: auto; margin-bottom: 6px; }
  .acceso b { font-size: 1rem; line-height: 1.15; }
  .acceso small { font-size: .82rem; line-height: 1.25; }
}