/* Nivel a pantalla completa (22/10/2026, petición de Laura tras probarlo en el ordenador):
   - El reto ocupa toda la pantalla, con letra y botones grandes (tablet, ordenador y móvil).
   - Luxi (o el guía elegido) siempre a la vista y grande; reacciona a cada respuesta y explica en su bocadillo.
   - Un dibujo con cada reto (ver js/dibujos.js).
   Va la última: manda sobre aventura.css, premium.css y plano.css. */

/* ---------- Estructura general ---------- */
.pantalla.aventura { gap: 8px; padding-left: clamp(10px, 2vw, 32px); padding-right: clamp(10px, 2vw, 32px); }
.pantalla.aventura > .av-barra, .pantalla.aventura > .av-zona, .pantalla.aventura > .av-cuerpo { width: 100% !important; max-width: 1800px; }
.av-lumi .av-acomp img { width: 100%; height: 100%; object-fit: cover; }
.av-zona { margin: -6px 0 0; font-size: clamp(14px, 1.6vh, 19px); }

/* Móvil y tablet en vertical: Luxi y su bocadillo arriba, el reto y debajo las ayudas */
.av-cuerpo { display: flex; flex-direction: column; gap: 10px; flex: 1 0 auto; }
.av-lado { display: contents; }
.av-lado .av-lumi { order: 1; }
.av-reto { order: 2; }
.av-lado .av-ayudas { order: 3; }
.av-lado .av-apoyo { order: 4; }
.av-lumi { display: flex; align-items: center; gap: 10px; min-height: 0; }
#av-lumi-img { width: clamp(112px, 21vw, 180px); height: clamp(112px, 21vw, 180px); flex: none; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); margin: -6px -8px -6px -6px; }
/* Quien vive en la isla: pequeño, en la esquina del bocadillo (en horizontal, al lado de Luxi) */
.av-acomp { position: absolute; right: 2px; top: -10px; left: auto; bottom: auto; width: 46px; height: 46px; margin: 0; z-index: 2; transition: transform .3s; border-width: 3px; }
.av-lumi-dice { padding-right: 52px !important; }
.av-lumi:has(.av-acomp[hidden]) .av-lumi-dice { padding-right: 14px !important; }
.av-acomp span { font-size: 20px; }
.burbuja-dibujo { max-height: 34vh; }
.av-lumi { position: relative; }
.av-acomp.habla { transform: scale(1.25); box-shadow: 0 0 0 4px var(--sol), 0 4px 6px rgba(0, 0, 0, .3); }
.av-lumi-dice { flex: 1; min-width: 0; font-size: clamp(16px, 2.2vw, 22px); line-height: 1.35; padding: 10px 14px; }

/* El reto */
.av-reto { padding: clamp(14px, 2.5vw, 28px); }
.av-asignatura { font-size: clamp(14px, 1.8vw, 18px); }
.av-texto { font-size: clamp(18px, 2.6vw, 26px); }
.av-pregunta { font-size: clamp(22px, 3.6vw, 34px); line-height: 1.25; margin: 4px 0 12px; }
.av-cuenta { font-size: clamp(34px, 6vw, 56px); }
.av-opciones { gap: clamp(10px, 1.4vw, 18px); }
.av-opcion { min-height: clamp(58px, 7.5vh, 96px); font-size: clamp(21px, 3.4vw, 34px); border-radius: 20px; }
.av-opciones.grande .av-opcion { font-size: clamp(48px, 8vw, 84px); min-height: clamp(90px, 12vh, 140px); }
.av-palabra { font-size: clamp(36px, 6vw, 60px); }
.av-palabra.frase { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.35; }
.av-afirmacion { font-size: clamp(20px, 3vw, 30px); }
.teclado { width: min(420px, 100%); gap: 8px; }
.teclado button { min-height: clamp(50px, 7vh, 84px); font-size: clamp(24px, 3.6vw, 36px); }
.av-escrito { width: min(320px, 100%); min-height: clamp(56px, 7.5vh, 88px); line-height: 1.4; font-size: clamp(32px, 5.5vw, 52px); }
.av-input { min-height: clamp(58px, 7.5vh, 84px); font-size: clamp(22px, 3.4vw, 34px); }
.av-comprobar { min-height: clamp(58px, 7.5vh, 84px); font-size: clamp(18px, 2.6vw, 26px); }
.av-pieza { min-height: clamp(50px, 7vh, 76px); font-size: clamp(19px, 2.8vw, 28px); }
.av-ayuda { min-height: 50px; font-size: clamp(15px, 2vw, 18px); }

/* ---------- Horizontal (tablet apaisada y ordenador): dos columnas, todo a pantalla completa ---------- */
@media (min-width: 900px) and (orientation: landscape) {
  .pantalla.aventura { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .av-cuerpo { display: grid; grid-template-columns: clamp(260px, 23vw, 420px) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 30px); align-items: stretch; flex: 1 1 auto; min-height: 0; }
  .av-lado { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; align-self: start; max-height: calc(100dvh - 90px); overflow-y: auto; overflow-x: hidden; padding: 4px 4px 8px; }
  .av-lado .av-lumi { flex-direction: column; align-items: center; gap: 4px; }
  #av-lumi-img { width: clamp(130px, 22vh, 250px); height: clamp(130px, 22vh, 250px); }
  .av-acomp { left: auto; right: 6px; top: 6px; width: clamp(56px, 8vh, 84px); height: clamp(56px, 8vh, 84px); }
  .av-lado .av-lumi-dice { width: 100%; font-size: clamp(17px, 1.2vw + .8vh, 24px); padding-right: 14px !important; }
  .av-lado .av-lumi-dice::before { left: 50%; top: -9px; margin: 0 0 0 -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: var(--papel); }
  .av-lado .av-ayudas { justify-content: center; }
  .av-lado .burbuja-dibujo { max-height: 56vh; }

  /* La tarjeta del reto llena el alto: arriba la pregunta; a la izquierda el texto y el dibujo; a la derecha las respuestas */
  .av-reto {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(18px, 2.4vw, 44px); row-gap: 0;
    grid-template-areas: "asig asig" "pictos pictos" "texto preg" "texto resp" "dib resp" "cuenta resp" "esc resp" "sigue resp" "resto resp";
    align-content: start; min-height: 100%; padding: clamp(18px, 2vw, 36px);
  }
  .av-reto > * { min-width: 0; }
  .av-asignatura { grid-area: asig; justify-self: center; }
  .av-pictos { grid-area: pictos; }
  .av-texto { grid-area: texto; align-self: start; max-height: calc(100dvh - 220px); overflow-y: auto; font-size: clamp(19px, .9vw + 1.2vh, 28px); }
  .av-pregunta { grid-area: preg; }
  .av-dibujo { grid-area: dib; }
  .av-cuenta { grid-area: cuenta; }
  .av-escuchar { grid-area: esc; }
  .av-sigue { grid-area: sigue; }
  .av-respuestas { grid-area: resp; align-self: center; }
  /* Sin texto: la pregunta arriba de todo, a lo ancho; el dibujo ocupa todo el alto que queda */
  .av-reto:not(.con-texto) { grid-template-areas: "asig asig" "pictos pictos" "preg preg" "cuenta resp" "dib resp" "esc resp" "sigue resp" "resto resp" "resto resp"; }
  .av-reto:not(.con-texto) .av-dibujo { align-self: center; align-content: center; min-height: clamp(220px, 40vh, 560px); margin-bottom: 14px; --u: clamp(8px, 1.5vh, 17px); }
  .av-reto:not(.con-texto) .dib-escena span { font-size: clamp(70px, 16vh, 200px); }
  .av-reto:not(.con-texto) .dib-cinco { font-size: var(--cosa-g, clamp(30px, 5.4vh, 60px)); }
  .av-reto:not(.con-texto) .dib-letras b { font-size: clamp(40px, 7.5vh, 84px); }
  /* Todo el reto, centrado en el alto de la pantalla */
  .av-reto { align-content: center; }
  /* Con texto (lecturas): el texto a la izquierda; la pregunta, el dibujo y las respuestas a la derecha */
  .av-reto.con-texto { grid-template-areas: "asig asig" "pictos pictos" "texto preg" "texto dib" "texto resp" "texto cuenta" "texto esc" "texto sigue" "texto resto"; }
  .av-reto.con-texto .av-dibujo { padding: 6px; }
  .av-reto.con-texto .av-dibujo .dib-escena span { font-size: clamp(40px, 7vh, 72px); }
  .av-reto.con-texto .av-respuestas { align-self: start; }
  /* Sin dibujo ni texto (gráficos de barras…): una sola columna, centrada */
  .av-reto:not(.con-texto):not(.con-dibujo) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "asig" "pictos" "preg" "cuenta" "esc" "sigue" "resp" "resto" "resto"; }
  .av-reto:not(.con-texto):not(.con-dibujo) .av-respuestas { width: min(900px, 100%); justify-self: center; align-self: start; }

  .av-pregunta { font-size: clamp(26px, 1.1vw + 1.9vh, 46px); margin: 6px 0 14px; }
  .av-cuenta { font-size: clamp(40px, 1.4vw + 3vh, 72px); }
  .av-opciones { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
  /* (premium.css y las escenas de globos, cofres… ponían columnas de 100-140 px: en el ordenador, con la letra grande,
     partían las palabras: «Segmen-to», «Decimoquin-to». Aquí manda esta, con más prioridad) */
  .av-opciones:not(.grande):not(.dos):not(.largas) { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .av-opciones.largas { grid-template-columns: 1fr; }
  .av-opciones.dos { grid-template-columns: 1fr 1fr; }
  /* (como mucho 32 px: en el ordenador, con 44, «Decimotercero» no cabía en su botón y se partía) */
  .av-opcion { min-height: clamp(66px, 11vh, 130px); font-size: clamp(24px, .9vw + 2vh, 32px); }
  .av-opciones.largas .av-opcion { min-height: clamp(60px, 9vh, 110px); font-size: clamp(20px, .6vw + 1.6vh, 34px); }
  .teclado { width: min(480px, 100%); gap: 10px; }
  .teclado button { min-height: clamp(54px, 8.5vh, 100px); font-size: clamp(26px, 3.8vh, 42px); }
  .av-escrito { min-height: clamp(60px, 9vh, 104px); font-size: clamp(34px, 6vh, 64px); width: min(380px, 100%); }
  .av-palabra { font-size: clamp(40px, 7vh, 80px); }
}
/* Pantallas apaisadas bajas (móvil en horizontal): más compacto */
@media (orientation: landscape) and (max-height: 560px) {
  #av-lumi-img { width: 90px; height: 90px; }
  .av-opcion { min-height: 52px; }
  .teclado button { min-height: 44px; }
}

/* ---------- Luxi reacciona ---------- */
#av-lumi-img { animation: flotar 3s ease-in-out infinite; transform-origin: 50% 90%; }
#av-lumi-img.reacciona-bien { animation: lumiSalta .9s cubic-bezier(.3, 1.4, .5, 1), flotar 3s ease-in-out .9s infinite; }
#av-lumi-img.reacciona-mal { animation: lumiPiensa 1.2s ease-in-out, flotar 3s ease-in-out 1.2s infinite; }
@keyframes lumiSalta { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-34px) scale(1.08) rotate(-4deg); } 55% { transform: translateY(0) scale(.96, 1.04); } 75% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes lumiPiensa { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
body.ahorro #av-lumi-img { animation: none !important; }

/* ---------- El bocadillo: explicaciones con dibujo y botones ---------- */
.av-lumi-dice .av-frase { display: block; }
.burbuja-dibujo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; background: #fff; border-radius: 16px; border: 3px solid #F1E6C8; overflow: auto; font-weight: 700; }
.burbuja-dibujo:empty { display: none; }
.burbuja-dibujo .ex-columnas { font-size: clamp(28px, 4vh, 40px); }
.burbuja-dibujo .ex-palabra { font-size: clamp(26px, 4vh, 40px); }
.burbuja-dibujo .ex-palabra.mal { font-size: clamp(22px, 3vh, 30px); }
.burbuja-dibujo .ex-texto { font-size: 17px; max-height: none; }
.burbuja-dibujo .ex-solucion { font-size: clamp(22px, 3vh, 30px); }
.burbuja-dibujo .ex-quesito, .burbuja-dibujo .ex-reloj { width: 110px; height: 110px; }
.burbuja-dibujo .teoria-ejemplo { margin: 0; font-size: 17px; font-weight: 600; text-align: left; }
.burbuja-dibujo .explica-pasos { align-self: stretch; text-align: left; margin: 2px 0 0 22px; font-size: 17px; }
.burbuja-dibujo .ex-grupo { color: var(--tinta-suave); font-size: 20px; font-weight: 800; }
.burbuja-dibujo .ex-fila i { width: 13px; height: 13px; }
.burbuja-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.burbuja-btn { margin: 0; min-height: 54px; font-size: clamp(17px, 2vh, 21px); background: var(--hoja); box-shadow: 0 5px 0 #2E9A57; }
.burbuja-btn:active { box-shadow: 0 2px 0 #2E9A57; }
.animo-mini { flex: 1 1 110px; min-height: 48px; padding: 4px 10px; border: 3px solid #E4DCCB; border-radius: 16px; background: #fff; color: var(--tinta); font-weight: 800; font-size: 15px; box-shadow: 0 3px 0 #E4DCCB; }
.animo-mini:active { transform: translateY(2px); }

/* ---------- Dibujo del reto ---------- */
.av-dibujo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(8px, 1.2vw, 18px); margin: 0 0 12px; padding: clamp(8px, 1.4vw, 18px); background: linear-gradient(180deg, #FFF8E8, #FFEFD0); border-radius: 22px; --u: clamp(6px, 1.1vh, 12px); }
/* (23/10/2026) Una pequeña escena: cielo suave, un rayo de luz y el suelo donde se apoyan las cosas */
.av-dibujo {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 34%),
    radial-gradient(ellipse 78% 30% at 50% 102%, rgba(255, 196, 120, .55), rgba(255, 196, 120, 0) 72%),
    linear-gradient(180deg, #E6F4FF 0%, #F6FAFF 36%, #FFF7EA 70%, #FFEBCF 100%);
  border-radius: 26px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 22px rgba(96, 62, 16, .09);
}
.av-dibujo[hidden] { display: none; }
.dib-escena { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1vw, 18px); }
.dib-escena span { font-size: clamp(52px, 10vh, 130px); line-height: 1.1; display: inline-block; animation: dibFlota 3s ease-in-out infinite; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .18)); }
.dib-escena span:nth-child(2) { animation-delay: -.8s; } .dib-escena span:nth-child(3) { animation-delay: -1.6s; } .dib-escena span:nth-child(4) { animation-delay: -2.3s; }
@keyframes dibFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dib-cosas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 100%; }
.dib-cinco { background: rgba(255, 255, 255, .8); border-radius: 14px; padding: 2px 8px; font-size: clamp(26px, 4.4vh, 48px); line-height: 1.25; letter-spacing: 2px; white-space: nowrap; }
.dib-grande { flex-direction: column; }
.dib-filas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }
.dib-filas .dib-cinco { border: 3px dashed #D9C79E; }
.dib-num { font-family: var(--letra-titulo); font-weight: 800; font-size: clamp(26px, 4.4vh, 48px); color: #6B4423; }
.dib-signo { font-family: var(--letra-titulo); font-weight: 800; font-size: clamp(30px, 5vh, 56px); color: var(--tinta-suave); }
.dib-tarjeta { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border-radius: 16px; padding: 8px 10px; box-shadow: 0 3px 0 #EADFC6; }
.dib-tarjeta small { font-family: var(--letra-titulo); font-weight: 800; font-size: clamp(18px, 2.6vh, 28px); color: #6B4423; }
.dib-tarjeta .ex-reloj, .dib-tarjeta .ex-quesito { width: clamp(110px, 20vh, 200px); height: clamp(110px, 20vh, 200px); }
.dib-tarjeta .ex-puntos { gap: 4px; }
.dib-tarjeta .ex-fila i { width: clamp(12px, 2vh, 20px); height: clamp(12px, 2vh, 20px); }
.dib-tarjeta .ex-cuenta { font-size: clamp(16px, 2.2vh, 22px); }
/* Bloques de base 10 */
.b10 { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.2); flex-wrap: wrap; justify-content: center; }
.b10-g { display: flex; align-items: flex-end; gap: 3px; flex-wrap: wrap; max-width: calc(var(--u) * 33); }
.b10-us { display: grid; grid-template-columns: repeat(5, var(--u)); gap: 3px; }
.b10 i { display: block; border: 1.5px solid rgba(0, 0, 0, .35); border-radius: 2px; }
.b10-c { width: calc(var(--u) * 10); height: calc(var(--u) * 10); background: #2E9E5B; background-image: linear-gradient(rgba(255, 255, 255, .45) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .45) 1px, transparent 1px); background-size: var(--u) var(--u); }
.b10-d { width: var(--u); height: calc(var(--u) * 10); background: #E2574C; background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px); background-size: 100% var(--u); }
.b10-u { width: var(--u); height: var(--u); background: #3B98CD; }
/* Meses y días */
.dib-tira { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 560px; }
.dib-tira span { padding: 6px 10px; border-radius: 12px; background: #fff; font-weight: 800; font-size: clamp(15px, 2.2vh, 22px); text-transform: capitalize; box-shadow: 0 2px 0 #EADFC6; }
.dib-tira span.si { background: var(--sol); color: #5A3A00; transform: scale(1.12); }
/* Dinero */
.dib-compra { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dib-objeto { position: relative; display: inline-flex; flex-direction: column; align-items: center; font-size: clamp(44px, 8vh, 90px); line-height: 1.1; }
.dib-precio { margin-top: -4px; padding: 2px 10px; border-radius: 10px; background: #FFE27A; border: 2px solid #C99A1A; font-family: var(--letra-titulo); font-weight: 800; font-size: clamp(16px, 2.4vh, 24px); color: #5A3A00; }
.dib-paga { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(30px, 5vh, 50px); }
.dib-paga .billete { width: clamp(88px, 14vh, 130px); height: clamp(50px, 8vh, 74px); }
.dib-paga .billete b { font-size: clamp(20px, 3vh, 30px); }
/* Figuras */
.dib-figura { width: clamp(100px, 18vh, 190px); height: clamp(100px, 18vh, 190px); animation: dibFlota 3.5s ease-in-out infinite; }
.dib-medidas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }
.dib-medidas span { padding: 4px 12px; border-radius: 12px; background: #fff; font-weight: 800; font-size: clamp(16px, 2.4vh, 24px); }
/* Series: piedras en el río */
.dib-serie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.dib-serie span { min-width: clamp(54px, 8vh, 86px); padding: 10px 12px; border-radius: 50% 46% 52% 48%; background: radial-gradient(circle at 35% 30%, #E9E4DA, #A79E8E); border: 3px solid #7D7465; font-family: var(--letra-titulo); font-weight: 800; font-size: clamp(22px, 3.6vh, 38px); text-align: center; color: #2E2840; }
.dib-serie span.falta { background: #fff; border-style: dashed; border-color: #D9503C; color: #D9503C; animation: dibFlota 1.6s ease-in-out infinite; }
.dib-serie i { font-style: normal; font-size: clamp(18px, 3vh, 30px); color: #3B98CD; }
.dib-serie.recta { padding: 6px 12px; border-bottom: 4px solid var(--tinta); border-radius: 0; }
/* Repartir: grupos vacíos */
.dib-grupos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 360px; }
.dib-grupos i { width: clamp(44px, 7vh, 70px); height: clamp(44px, 7vh, 70px); border: 4px dashed #C9B48A; border-radius: 50%; background: rgba(255, 255, 255, .7); }
/* Lengua */
.dib-color { width: clamp(80px, 14vh, 150px); height: clamp(80px, 14vh, 150px); border-radius: 50%; background: var(--c); border: 5px solid #2E2840; box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
.dib-letras { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dib-letras b { min-width: clamp(50px, 8vh, 84px); padding: 4px 10px; border-radius: 16px; background: #fff; border: 4px solid var(--c); color: var(--c); font-family: var(--letra-titulo); font-weight: 800; font-size: clamp(30px, 5.5vh, 60px); line-height: 1.2; text-align: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.dib-palmas { font-size: clamp(26px, 4.4vh, 46px); }
.dib-palmas b { font-family: var(--letra-titulo); color: #6B4423; letter-spacing: .04em; }
.dib-escucha { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: clamp(60px, 11vh, 120px); }
.dib-escucha i { width: 10px; height: 30px; border-radius: 6px; background: #3B98CD; animation: onda 1s ease-in-out infinite; }
.dib-escucha i:nth-child(2) { animation-delay: .2s; height: 44px; } .dib-escucha i:nth-child(3) { animation-delay: .4s; }
@keyframes onda { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.2); } }
body.ahorro .av-dibujo *, body.calma .av-dibujo * { animation: none !important; }
/* «Marcar»: la frase en trozos que se tocan (27/10/2026) */
.av-marcar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 3px #F0E6D2; }
.av-trozo { min-height: clamp(50px, 7vh, 74px); padding: 6px 14px; border: 3px solid #E4DCCB; border-radius: 14px; background: #FFFBF2; font-family: var(--letra-titulo); font-weight: 800; font-size: clamp(20px, 3vw, 30px); color: var(--tinta); box-shadow: 0 4px 0 #E4DCCB; cursor: pointer; }
.av-trozo.hecha { background: #FFE27A; border-color: #E0A800; color: #5A3A00; box-shadow: 0 4px 0 #E0A800; animation: emoEntra .35s; }
.av-trozo.mal { border-color: var(--coral); animation: temblor .35s; }
.av-pieza.emoji { font-size: clamp(30px, 5vh, 46px); line-height: 1; padding: 4px 10px; }
/* «Clasificar»: tarjetas arriba y cajas de colores abajo */
.av-clasificar { display: grid; gap: 14px; }
.av-monton { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 56px; }
.av-monton .av-pieza.elegida { border-color: var(--cielo-2); background: #E3EEFF; transform: translateY(-3px); }
.av-cajas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.av-cajas.tres { grid-template-columns: repeat(3, 1fr); }
.av-caja { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: clamp(110px, 18vh, 190px); padding: 8px; border: 4px dashed var(--c); border-radius: 18px; background: color-mix(in srgb, var(--c) 10%, #fff); cursor: pointer; }
.av-caja.mal { animation: temblor .35s; border-color: var(--coral); }
.av-caja-nombre { font-family: var(--letra-titulo); font-size: clamp(18px, 2.6vw, 26px); color: var(--c); }
.av-caja-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.av-caja-lista .av-pieza { min-height: 40px; font-size: clamp(15px, 2vw, 20px); background: #fff; border-color: var(--c); box-shadow: none; }
.ex-marcar { font-size: 20px; font-weight: 700; line-height: 1.6; }
.ex-marcar mark { background: #FFE27A; border-radius: 6px; padding: 0 4px; }
.ex-cajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ex-cajas div { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; background: #FFF4DD; }
.ex-cajas span { padding: 3px 8px; border-radius: 8px; background: #fff; font-weight: 700; font-size: 16px; }
/* Dibujos con datos de figuras.js (figuras con medidas, gráficos, recta, cubitos…), 27/10/2026 */
.fig-caja { display: inline-flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, .78); border-radius: 20px; padding: 8px 12px; box-shadow: 0 6px 16px rgba(110, 70, 20, .1); max-width: 100%; }
.fig { display: block; width: clamp(240px, 46vh, 460px); max-width: 100%; height: auto; font-family: var(--letra-titulo); }
.fig text { font-family: var(--letra-titulo); }
.fig-azar { width: clamp(90px, 16vh, 150px); }
.fig-azar.fig[viewBox="0 0 200 200"] { width: clamp(150px, 28vh, 260px); }
.fig-termo { width: clamp(120px, 26vh, 220px); }
.fig-ejes { width: clamp(220px, 40vh, 380px); }
.fig-cubitos { width: clamp(190px, 36vh, 340px); }
.fig-arbol { width: clamp(260px, 50vh, 460px); }
.fig-recta { width: clamp(300px, 60vh, 540px); }
.fig-iconos .emo3d { width: 1.15em; height: 1.15em; }
.fig-figura, .fig-circ { filter: drop-shadow(0 5px 5px rgba(70, 40, 10, .14)); }
.fig-iconos { display: grid; grid-template-columns: repeat(6, auto); gap: 6px 10px; font-size: clamp(28px, 5vh, 46px); line-height: 1.1; }
/* (con 1 a 3 cosas, más grandes: una pera sola se veía diminuta en la tablet) */
.fig-iconos:not(:has(> :nth-child(4))) { font-size: clamp(52px, 10vh, 100px); }
.fig-tabla { border-collapse: collapse; font-family: var(--letra-titulo); font-size: clamp(17px, 2.6vh, 24px); }
.fig-tabla th, .fig-tabla td { padding: 6px 16px; border: 2px solid #E4D3B0; text-align: center; }
.fig-tabla th { background: #FFE3B8; font-weight: 800; }
.fig-tabla td:first-child { text-align: left; }
/* (27/10/2026, 5.º) reloj, fracciones, cuadrícula, escalera de unidades, tarjetas y barra del 100 % */
.fig-tabla .fig-marca { background: #FFE27A; color: #C0392B; }
.fig-reloj { width: clamp(120px, 24vh, 210px); }
.fig-fraccion { width: clamp(200px, 40vh, 420px); }
.fig-fraccion.fig-ancha { width: clamp(260px, 56vh, 540px); }
.fig-cuadricula { width: clamp(200px, 40vh, 380px); }
.fig-cuadricula.fig-mini { width: clamp(120px, 21vh, 210px); }
.fig-cuadricula.fig-paneles { width: clamp(280px, 56vh, 520px); }
.fig-escalera { width: clamp(290px, 58vh, 540px); }
.fig-tarjetas { width: clamp(160px, 34vh, 360px); }
.fig-barra100 { width: clamp(260px, 50vh, 480px); }
/* (27/10/2026, 3.º-4.º) rectas y segmentos, cuerpos geométricos, desarrollos planos y dinero para contar */
.fig-trazos { width: clamp(240px, 46vh, 440px); }
.fig-cuerpo { width: clamp(150px, 30vh, 280px); filter: drop-shadow(0 5px 5px rgba(70, 40, 10, .14)); }
.fig-desarrollo { width: clamp(170px, 34vh, 320px); }
.fig-dinero { width: clamp(240px, 48vh, 440px); }
/* (27/10/2026, 3.º) la división en «casita», semirrectas desde un vértice, una fila hacia la meta y un edificio con sus pisos */
.fig-division { width: clamp(150px, 28vh, 250px); }
.fig-rayos { width: clamp(220px, 42vh, 400px); }
.fig-fila { width: clamp(240px, 54vh, 520px); }
.fig-edificio { width: clamp(110px, 20vh, 180px); }
/* (29/10/2026, 1.º-2.º) bloques de base 10 (el alto manda: el ancho sale de lo que haya), ábaco, regla, balanza,
   cosas tachadas, grupos en su plato y la hoja del calendario */
.fig.fig-bloques { width: auto; height: clamp(110px, 26vh, 240px); }
.fig-abaco { width: clamp(150px, 28vh, 250px); }
.fig-regla { width: clamp(260px, 52vh, 480px); }
.fig-balanza { width: clamp(220px, 40vh, 380px); }
.fig-dinero.fig-uno { width: clamp(90px, 16vh, 150px); }
.fig-iconos .fig-tachado { position: relative; }
.fig-iconos .fig-tachado::after { content: ''; position: absolute; inset: 4%; pointer-events: none;
  background: linear-gradient(45deg, transparent calc(50% - 3px), #D2473C calc(50% - 3px), #D2473C calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(-45deg, transparent calc(50% - 3px), #D2473C calc(50% - 3px), #D2473C calc(50% + 3px), transparent calc(50% + 3px)); }
.fig-iconos.fig-grupos, .fig-iconos.fig-grupos:not(:has(> :nth-child(4))) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; font-size: clamp(24px, 4.2vh, 40px); }
.fig-grupo { display: grid; gap: 2px 4px; padding: 6px 9px; border: 3px dashed #E4C58F; border-radius: 18px; background: #FFF8EA; }
.fig-grupo i { font-style: normal; display: inline-flex; justify-content: center; }
.fig-signo { font-family: var(--letra-titulo); font-size: 1.3em; font-weight: 800; color: #D2473C; }
.fig-tabla.fig-cal th, .fig-tabla.fig-cal td { padding: 4px 9px; text-align: center; }

/* ---------- Emojis 3D (23/10/2026, provisionales; ver «Emojis 3D» en js/dibujos.js) ----------
   Cada imagen mide lo que mediría el emoji (1.2 veces la letra), así que todos los tamaños de arriba siguen valiendo.
   Para quitarlos: USAR_3D = false en dibujos.js (estas reglas dejan de aplicarse solas). */
.emo3d { display: inline-block; width: 1.2em; height: 1.2em; object-fit: contain; vertical-align: -.24em; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.av-dibujo .emo3d, .burbuja-dibujo .emo3d { filter: drop-shadow(0 .06em .05em rgba(70, 40, 10, .22)); animation: emoEntra .55s cubic-bezier(.3, 1.45, .5, 1) both; animation-delay: calc(var(--k, 0) * 45ms); }
@keyframes emoEntra { 0% { opacity: 0; transform: translateY(.3em) scale(.4); } 100% { opacity: 1; transform: none; } }
/* (en el texto pequeño de las tarjetas, sin sombra ni salto) */
.esq-t .emo3d, .esq-i small .emo3d { width: 1.35em; height: 1.35em; filter: none; animation: none; }
/* (en el bocadillo del guía, las imágenes del guía miden 80-120 px: las de las explicaciones, no) */
.av-lumi .burbuja-dibujo img.emo3d { width: 1.2em; height: 1.2em; flex: none; }
.av-lumi .burbuja-dibujo .esq-t img.emo3d, .av-lumi .burbuja-dibujo .esq-i small img.emo3d { width: 1.35em; height: 1.35em; }
/* Las cosas para contar: en bandejas de 5, y de 10 en 10 (dos filas de 5, como una caja de huevos),
   para contarlas de un vistazo. Más grandes si son pocas. */
.dib-cosas { gap: 6px 8px; }
.dib-cosas.n-medias, .dib-cosas.n-muchas { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; justify-content: center; justify-items: start; gap: 6px 14px; }
.dib-cinco { display: inline-flex; align-items: center; gap: .1em; padding: .1em .28em; border-radius: 999px; letter-spacing: 0; line-height: 1; font-size: var(--cosa, clamp(26px, 4.4vh, 48px)); background: rgba(255, 255, 255, .72); box-shadow: inset 0 -2px 0 rgba(160, 120, 60, .12), 0 3px 10px rgba(110, 70, 20, .08); }
.dib-filas .dib-cinco { border: 2px dashed rgba(190, 150, 90, .55); }
.n-pocas { --cosa: clamp(30px, min(5.6vh, 8vw), 54px); --cosa-g: clamp(30px, min(8vh, 3.6vw), 80px); }
.n-medias { --cosa: clamp(18px, min(3.8vh, 7vw), 38px); --cosa-g: clamp(24px, min(5.6vh, 3.6vw), 56px); }
.n-muchas { --cosa: clamp(15px, min(2.8vh, 4.4vw), 28px); --cosa-g: clamp(16px, min(3.1vh, 1.75vw), 30px); }
.n-pocas .dib-cinco { gap: .18em; padding: .14em .36em; }
/* Las tarjetas: blancas y suaves, sin bordes oscuros */
.dib-tarjeta { background: rgba(255, 255, 255, .66); border-radius: 20px; padding: 10px 12px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 6px 16px rgba(110, 70, 20, .1); }
.dib-escena { align-items: flex-end; gap: clamp(10px, 1.6vw, 26px); }
.dib-escena span { filter: none; }
.dib-objeto .emo3d { margin-bottom: 2px; }
.dib-figura { filter: drop-shadow(0 6px 6px rgba(70, 40, 10, .2)); }
.dib-color { border: 6px solid #fff; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 42%), var(--c); box-shadow: 0 10px 20px rgba(70, 40, 10, .16), inset 0 -10px 18px rgba(0, 0, 0, .12); }
body.ahorro .burbuja-dibujo *, body.calma .burbuja-dibujo * { animation: none !important; }
/* El hueco de la palabra, más visible */
.av-palabra .hueco { background: #FFF0C4; border-radius: 10px 10px 0 0; padding: 0 6px; }

/* ---------- Explicaciones con dibujo en todas las asignaturas (22/10/2026): tarjetas de la regla o del tema ---------- */
.esq { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; align-self: stretch; }
.esq.cadena { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.esq.cadena .esq-i { flex: 1 1 90px; max-width: 150px; }
.esq-flecha { font-style: normal; color: #3B98CD; font-size: 18px; }
.esq-i { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 6px 7px; border-radius: 12px; background: #F8F3E6; border: 2px solid #EFE5CC; text-align: center; transition: transform .3s; }
.esq-i > b { font-size: 24px; line-height: 1.15; }
.esq-i > b.esq-letra { min-width: 34px; padding: 0 6px; border-radius: 10px; background: #fff; border: 3px solid #FF9F43; color: #D9700F; font-family: var(--letra-titulo); font-size: 20px; }
.esq-t { font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--tinta); }
.esq-i small { font-weight: 600; font-size: 11.5px; line-height: 1.25; color: var(--tinta-suave); }
.esq-i.si { background: #DDF5E5; border-color: var(--hoja); transform: scale(1.04); box-shadow: 0 3px 0 #9ED9B0; }
.esq-i.si > b.esq-letra { border-color: var(--hoja); color: #1E6B3A; }
/* Sílabas en cajas (la que suena más fuerte, en rojo) y palmadas */
.esq-silabas { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.esq-silabas b { min-width: 42px; padding: 4px 8px; border-radius: 10px; background: #fff; border: 3px solid #3B98CD; color: #2E2840; font-family: var(--letra-titulo); font-size: 24px; text-align: center; }
.esq-silabas b.fuerte { border-color: #E2574C; background: #FFE1DC; color: #9B2C1F; }
.esq-palmas { font-size: 20px; letter-spacing: 2px; }
.esq-nota { margin: 0; font-weight: 800; font-size: 15px; color: var(--tinta-suave); }
/* Palabra con su dibujo, y dos tarjetas unidas (sinónimos, antónimos, traducciones) */
.esq-par { display: inline-flex; flex-direction: column; align-items: center; min-width: 84px; padding: 6px 10px; border-radius: 14px; background: #fff; border: 3px solid #E4DCCB; }
.esq-par > b { font-size: 34px; line-height: 1.1; }
.esq-par > span { font-family: var(--letra-titulo); font-weight: 800; font-size: 20px; }
.esq-par.si { border-color: var(--hoja); background: #DDF5E5; }
.esq-par.no { border-color: #E8A598; background: #FFF1EE; opacity: .85; }
.esq-par.no > span { text-decoration: line-through; color: #9B2C1F; }
.esq-pareja { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.esq-pareja > i { font-style: normal; font-weight: 800; font-size: 26px; color: #7652C4; }
/* Palabras de una frase como etiquetas */
.esq-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.esq-chips span { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 9px; border-radius: 10px; background: #fff; border: 2px solid #E4DCCB; font-weight: 800; font-size: 17px; }
.esq-chips span.si { border-color: var(--hoja); background: #DDF5E5; }
.esq-chips small { font-size: 11px; color: #1E6B3A; }
/* Abecedario */
.esq-abc { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.esq-abc span { width: 22px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: #F1EADB; font-weight: 800; font-size: 14px; color: var(--tinta-suave); }
.esq-abc span.si { background: #FFC94D; color: #5A3A00; transform: scale(1.15); }
/* La palabra bien escrita, con las letras de la regla en color */
.esq-palabra { margin: 0; font-family: var(--letra-titulo); font-weight: 800; font-size: clamp(24px, 3.4vh, 34px); text-align: center; line-height: 1.3; }
.esq-palabra mark { background: #DDF5E5; color: #1E6B3A; border-radius: 6px; padding: 0 2px; }
.esq-brujula { width: 96px; height: 96px; }
/* En el bocadillo: tarjetas en fila (dibujo a la izquierda), para que quepa todo sin desplazarse */
.burbuja-dibujo .esq:not(.cadena) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.burbuja-dibujo .esq-i { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 7px; align-items: center; text-align: left; padding: 4px 7px; }
.burbuja-dibujo .esq-i > b { grid-row: 1 / span 2; font-size: 20px; }
.burbuja-dibujo .esq-i > b.esq-letra { font-size: 16px; min-width: 28px; }
.burbuja-dibujo .esq-i:not(:has(small)) > b { grid-row: 1; }
.burbuja-dibujo .esq-t { font-size: 13.5px; }
.burbuja-dibujo .esq-i small { font-size: 11px; }
.burbuja-dibujo .esq.cadena .esq-i { flex: 1 1 100px; }
.av-lado .burbuja-dibujo { max-height: 44vh !important; }
.burbuja-dibujo .esq.cadena { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; }
.burbuja-dibujo .esq.cadena .esq-i { flex: none; max-width: none; }
.burbuja-dibujo .esq-flecha { align-self: center; transform: rotate(90deg); font-size: 14px; line-height: 1; }
.burbuja-dibujo > * { flex-shrink: 0; }

/* ---------- Móviles estrechos (22/10/2026, comprobado a 360 y 390 px de ancho) ---------- */
/* Botones del mapa: si no caben, se desplazan de lado (antes, centrados, el primero y el último se salían de la pantalla) */
@media (orientation: portrait) {
  .mapa-acciones { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 10px 8px; pointer-events: auto; }
  .mapa-acciones::-webkit-scrollbar { display: none; }
  .mapa-acciones::before, .mapa-acciones::after { content: ""; flex: none; }
  .mapa-acciones::before { margin-left: auto; } .mapa-acciones::after { margin-right: auto; }
  .mapa-acciones .btn-redondo { flex: none; }
}
@media (max-width: 480px) {
  /* El nombre del mundo, en dos líneas si hace falta (antes se cortaba en «L'Arxi…») */
  .mapa-barra { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .mapa-barra h1 { font-size: 16px; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
  .mapa-barra .contador-estrellas { font-size: 13px; padding: 3px 7px; }
  /* En el nivel: el guía más pequeño, para que el bocadillo (y el dibujo de la explicación) tenga más sitio */
  #av-lumi-img { width: 78px; height: 78px; margin: -4px -6px -4px -8px; }
  .av-lumi-dice { font-size: 16px; padding: 8px 10px; }
  .burbuja-dibujo { padding: 6px; }
  .burbuja-dibujo .ex-texto { font-size: 14.5px; line-height: 1.4; }
}
/* Retos con dibujo en el móvil en vertical (27/10/2026): el dibujo, la pregunta y las respuestas caben sin bajar
   (comprobado a 390 × 844 y 360 × 740; el SVG se encoge dentro de su caja sin deformarse) */
@media (orientation: portrait) and (max-width: 600px) {
  .av-dibujo { padding: 6px; margin-bottom: 8px; }
  .av-dibujo .fig { max-height: 26vh; }
  .av-dibujo .fig-caja { padding: 4px 8px; }
  .fig-tabla { font-size: 15px; }
  .fig-tabla th, .fig-tabla td { padding: 4px 10px; }
  .fig-iconos { font-size: 26px; }
  .fig-iconos:not(:has(> :nth-child(4))) { font-size: 48px; }
  .fig-iconos.fig-grupos, .fig-iconos.fig-grupos:not(:has(> :nth-child(4))) { font-size: 22px; gap: 6px 8px; }
  .fig-tabla.fig-cal th, .fig-tabla.fig-cal td { padding: 3px 6px; }
  /* «¿Qué palabra falta?» con una frase entera: letra grande, pero que quepa */
  .av-palabra { font-size: clamp(24px, 7.5vw, 40px); }
  /* el dibujo de adorno (sin datos), más pequeño; en emparejar y ordenar, sin él: las tarjetas necesitan el sitio */
  .av-reto.dibujo-adorno .dib-escena span { font-size: 54px; }
  .av-reto.dibujo-adorno:is([data-tipo="emparejar"], [data-tipo="ordenar"]) .av-dibujo, .av-reto.dibujo-adorno.con-texto .av-dibujo { display: none; }
  /* tarjetas con frases largas (emparejar, clasificar): letra y márgenes un poco menores */
  .av-reto:is([data-tipo="emparejar"], [data-tipo="clasificar"]) .av-pieza { font-size: 16.5px; min-height: 44px; padding: 6px 10px; }
  .av-clasificar .av-monton { gap: 6px; }
  /* el teclado, en 2 filas de 6 (1-6 / 7 8 9 ⌫ 0 ✓) en vez de 4 de 3: deja sitio al dibujo */
  .teclado { gap: 6px; grid-template-columns: repeat(6, 1fr); width: 100%; }
  .teclado button { min-height: 52px; font-size: 24px; padding: 0; }
}
/* Móviles bajitos (360 × 740 y menos): el dibujo, la pregunta y las opciones, un poco más pequeños */
@media (orientation: portrait) and (max-width: 600px) and (max-height: 800px) {
  .av-reto { padding: 12px; }
  .av-pregunta { font-size: 20px; margin: 2px 0 8px; }
  .av-dibujo .fig { max-height: 21vh; }
  .av-opciones { gap: 8px; }
  .av-opcion { min-height: 48px; font-size: 20px; }
  .teclado button { min-height: 48px; font-size: 22px; }
}
/* «leer» (1.º-2.º): la sílaba, palabra o frase corta que el niño lee solo, en grande y centrada */
.av-texto.av-leer-solo { font-size: clamp(34px, 6vw, 64px); font-weight: 800; line-height: 1.25; text-align: center; letter-spacing: .04em; background: #fff; align-self: center; }
/* Pictogramas (apoyo para TEA, 27/10/2026): qué hay que hacer, en dibujos y en orden (lee → mira → toca) */
.av-pictos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin: 2px 0 10px; }
.av-pictos[hidden] { display: none; }
.picto { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 74px; padding: 6px 8px 5px; background: #fff; border: 3px solid #2B2F36; border-radius: 12px; }
.picto b { font-size: clamp(30px, 4.6vh, 48px); line-height: 1; }
.picto b .emo3d { width: 1.1em; height: 1.1em; vertical-align: 0; animation: none; }
.picto small { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #2B2F36; }
.picto-flecha { font-style: normal; font-size: 22px; font-weight: 800; color: #2B2F36; opacity: .55; }
/* Dedos: todo lo que se toca, al menos 44 px */
#mapa-voz, .btn-voz { min-height: 44px; }
.ficha-chips .alta-chip, .refuerzo-temas .alta-chip, .tablas-chips .alta-chip, .refuerzo-asigs .alta-chip, .personaje-rasgos .alta-chip, .alta-rasgos .alta-chip { min-height: 44px; }
.tema-activo button { width: 44px; height: 44px; }
.ficha-botones .btn-mini, .alta-parecido-yo, .btn-mini.alta-parecido-yo { min-height: 44px; }

/* ---------- Trazar: repasar con el dedo trazos, números y letras (29/10/2026; ver js/trazos.js) ---------- */
/* La pauta de 4 líneas (la zona de las letras pequeñas, en amarillo), el modelo de puntos con su carril,
   el punto verde de salida con su número y la flecha; lo que dibuja el niño sale en naranja y, si está bien, en verde. */
.tz text { font-family: var(--letra-titulo, system-ui), system-ui, sans-serif; }
.tz-zona { fill: #FFF6DA; }
.tz-l1 { stroke: #C6D5E8; stroke-width: .5; }
.tz-l2 { stroke: #8DB0D6; stroke-width: .5; stroke-dasharray: 2 1.6; }
.tz-l3 { stroke: #4F86C2; stroke-width: .8; }
.tz-fondo { fill: transparent; }
.tz-carril { fill: none; stroke: #F1ECF8; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.tz-puntos { fill: none; stroke: #ABA3BF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .01 4.2; }
.tz-golpe.actual .tz-carril { stroke: #FFEBC2; }
.tz-golpe.actual .tz-puntos { stroke: #5E5873; }
.tz-golpe.hecho .tz-puntos, .tz-golpe.hecho .tz-carril { display: none; }
.tz-solido { display: none; fill: none; stroke: #2E9E5B; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.tz.resuelto .tz-solido { display: inline; }
.tz.resuelto .tz-puntos, .tz.resuelto .tz-carril { display: none; }
.tz-trazo { fill: none; stroke: #FF7A1A; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.tz-trazo.bien { stroke: #2E9E5B; }
.tz-trazo.mal { stroke: #E2574C; animation: tzSeVa .6s ease-in forwards; }
@keyframes tzSeVa { 0% { opacity: .9; } 100% { opacity: 0; } }
.tz-modelo-linea { fill: none; stroke: #5E5873; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tz-flecha-tramo { fill: none; stroke: #FF8A3D; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tz-flecha-punta { fill: #FF8A3D; }
.tz-marca circle { fill: #2E9E5B; stroke: #fff; stroke-width: .9; }
.tz-marca text { fill: #fff; font-size: 4.6px; font-weight: 800; text-anchor: middle; }
.tz-juego .tz-flecha { opacity: .35; }
.tz-juego .tz-flecha.actual, .tz.resuelto .tz-flecha { opacity: 1; }
.tz-juego .tz-marca.pendiente { opacity: .45; }
.tz-juego .tz-marca.hecho, .tz-juego .tz-marca.oculta, .tz-juego .tz-flecha.hecho, .tz-juego .tz-flecha.oculta { display: none; }
.tz-juego .tz-marca.actual circle { animation: tzLate 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tzLate { 50% { transform: scale(1.22); } }
.tz-estela { fill: none; stroke: #7652C4; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.tz-lapiz { fill: #7652C4; stroke: #fff; stroke-width: 1; }
.tz-demo { transition: opacity .4s; }
.tz-demo.se-va { opacity: 0; }
body.ahorro .tz-juego .tz-marca.actual circle, body.calma .tz-juego .tz-marca.actual circle { animation: none; }
/* La zona de dibujo: tan grande como quepa (el dibujo no se deforma: se centra dentro) */
.av-trazar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
.av-trazar-lienzo { position: relative; display: flex; justify-content: center; padding: 6px; background: #fff; border-radius: 22px; box-shadow: inset 0 0 0 3px #F0E6D2; overflow: hidden; }
.av-trazar-lienzo.bien { box-shadow: inset 0 0 0 4px #2E9E5B; }
.tz-juego { display: block; width: 100%; height: auto; max-height: clamp(220px, calc(100dvh - 330px), 680px); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.av-trazar-aviso { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 92%; margin: 0; padding: 5px 16px; border-radius: 999px; background: #FFF1D6; color: #6B4423; font-weight: 800; font-size: clamp(16px, 2vw, 20px); text-align: center; opacity: 0; transition: opacity .2s; pointer-events: none; }
.av-trazar-aviso.sale { opacity: 1; }
.av-trazar-aviso.mal { background: #FFE1DC; color: #9B2C1F; }
.av-trazar-botones { display: flex; justify-content: center; gap: 10px; }
.av-trazar-botones .btn { width: auto; flex: 1 1 auto; max-width: 340px; margin: 0; min-height: 52px; padding: 6px 14px; font-size: clamp(16px, 2vw, 20px); line-height: 1.15; }
.av-trazar-botones .av-trazar-ver { flex-grow: 2; }
.av-reto[data-tipo="trazar"] .av-respuestas { width: 100% !important; max-width: 1300px; justify-self: center; }
.av-reto[data-tipo="trazar"] .av-pregunta { margin-bottom: 8px; }
/* En el bocadillo del guía: el modelo con sus números y flechas */
.burbuja-dibujo .ex-trazo { display: block; height: clamp(110px, 19vh, 180px); width: auto; max-width: 100%; }
@media (orientation: portrait) and (max-width: 600px) {
  .tz-juego { max-height: max(200px, calc(100dvh - 380px)); }
  .av-trazar-lienzo { padding: 3px; border-radius: 18px; }
  .av-trazar-botones .btn { min-height: 46px; padding: 4px 12px; font-size: 16px; }
  .av-trazar-aviso { font-size: 15px; top: 6px; }
}
/* ---------- fin trazar ---------- */
/* ---------- Pistas de verdad (04/11/2026, ver js/pistas.js) ---------- */
/* La respuesta que la pista quita: se apaga y se tacha (no se puede tocar) */
.av-opcion.quitada { opacity: .28; text-decoration: line-through; box-shadow: none; transform: scale(.94); transition: opacity .4s, transform .4s; }
/* Los pasos de «¿Cómo se hace?», numerados y con aire */
.teoria-pasos { list-style: none; counter-reset: paso; margin: 4px 0 10px; padding: 0; }
.teoria-pasos li { counter-increment: paso; position: relative; padding: 4px 0 4px 38px; line-height: 1.4; }
.teoria-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 3px; width: 28px; height: 28px; border-radius: 50%; background: var(--hoja, #2E9E5B); color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.burbuja-dibujo .teoria-pasos { align-self: stretch; text-align: left; margin: 2px 0 6px; font-size: 17px; }