/* ==============================================================
   ESTILO DE "AMADEO Y LAS TABLAS DE MULTIPLICAR"
   Papel claro, marcos naranjas de pizarra y colores de los dibujos.
   ============================================================== */
:root{
  --naranja:#ec6a1d; --naranja-osc:#c4510e;
  --verde:#1f5a35; --verde-claro:#2e8b57;
  --azul:#2a8fd8; --amarillo:#f5c518; --rojo:#e53935;
  --tinta:#2b2b2b; --papel:#f4f2ee;
  --letra:"Chalkboard SE","Comic Sans MS","Segoe Print","Marker Felt","Trebuchet MS",sans-serif;
  --alto-cabecera:68px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-cabecera) + 12px)}
body{margin:0;font-family:var(--letra);color:var(--tinta);background:radial-gradient(1200px 600px at 20% 0%,#fbfaf7 0,transparent 70%),radial-gradient(900px 500px at 90% 30%,#f1eee8 0,transparent 70%),var(--papel);line-height:1.45}
img{max-width:100%}
a{color:inherit}

/* ---------- Encabezado ---------- */
.cabecera{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:var(--alto-cabecera);padding:8px clamp(12px,3vw,32px);
  background:rgba(250,248,244,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:5px solid var(--naranja);box-shadow:0 4px 14px rgba(0,0,0,.10)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.marca-cara{width:50px;height:50px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid var(--naranja);background:#fff}
.marca-texto{display:flex;flex-direction:column;font-size:1.35rem;font-weight:700;color:var(--verde);line-height:1.05}
.marca-texto small{font-size:.72rem;font-weight:400;color:#555;margin-top:2px}
.marca-logo{height:52px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.menu a,.menu button{font:inherit;font-size:.98rem;text-decoration:none;color:var(--tinta);background:none;border:0;
  padding:8px 12px;border-radius:999px;cursor:pointer;transition:background .15s,transform .15s}
.menu a:hover,.menu button:hover{background:rgba(236,106,29,.14)}
.menu .boton-codigo{background:var(--verde);color:#fff;font-weight:700}
.menu .boton-codigo:hover{background:var(--verde-claro)}
.menu .boton-codigo.activo{background:#2e8b57}
.boton-ig{display:inline-block;background:linear-gradient(45deg,#f9a03a,#e1306c,#7a3fe0);color:#fff!important;font-weight:700;
  padding:8px 14px;border-radius:999px;text-decoration:none}
.menu a.boton-ig,.menu a.boton-ig:hover{background:linear-gradient(45deg,#f9a03a,#e1306c,#7a3fe0);color:#fff}
.menu a.boton-ig:hover{filter:brightness(1.08)}

/* ---------- Secciones ---------- */
main{padding-bottom:20px}
.inicio,.seccion{max-width:1100px;margin:0 auto;padding:clamp(22px,4vw,46px) clamp(12px,3vw,24px) 8px;text-align:center}
h1{font-size:clamp(1.7rem,4.2vw,2.8rem);margin:.2em 0 .1em;color:var(--verde);line-height:1.1}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:.2em 0 .1em;color:var(--naranja-osc)}
.subtitulo{margin:.2em 0 1.1em;font-size:1.05rem;color:#555}

/* marcos de imagen/video con borde de pizarra */
.marco{position:relative;margin:0 auto;border:6px solid var(--naranja);border-radius:24px;background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.20),inset 0 0 0 2px rgba(255,255,255,.6);overflow:hidden}
.marco-hero{max-width:980px}
.marco-intro{max-width:900px}
.proporcion{position:relative;width:100%;padding-top:56.25%;background:#fbfaf7}
.llena{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block;object-fit:contain}
video.llena{background:#000;object-fit:contain}
.zona-empezar{position:absolute;left:32.3%;top:71.4%;width:35.3%;height:20.2%;border:0;background:transparent;border-radius:20px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.zona-empezar:hover{transform:scale(1.04);box-shadow:0 0 0 4px rgba(245,197,24,.9)}
.zona-empezar:focus-visible{outline:4px solid var(--azul);outline-offset:3px}
.marco-hero #hero-img{cursor:pointer}
.video-error{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px;background:rgba(0,0,0,.72);color:#fff;font-size:1rem}

/* pestañas de la introducción */
.pestanas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 14px}
.pestana{font:inherit;font-size:.98rem;padding:9px 16px;border-radius:999px;cursor:pointer;border:3px solid var(--azul);background:#fff;color:var(--azul);transition:all .15s}
.pestana:hover{background:#eaf5fd}
.pestana.activa{background:var(--azul);color:#fff;font-weight:700}
.boton-pantalla{position:absolute;right:10px;bottom:10px;z-index:3;font:inherit;font-size:.85rem;padding:7px 12px;border-radius:999px;border:2px solid #fff;
  background:rgba(31,90,53,.88);color:#fff;cursor:pointer}

/* ---------- Tarjetas de modos ---------- */
.seccion-aprender{padding-bottom:30px}
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,34px);margin-top:10px}
.tarjeta{font:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:center;transition:transform .18s}
.tarjeta:hover{transform:translateY(-6px) rotate(-.6deg)}
.tarjeta:focus-visible{outline:4px solid var(--azul);outline-offset:6px;border-radius:30px}
.tarjeta-imagen{position:relative;display:block;border-radius:34px;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.25);border:5px solid #fff;padding-top:67.27%;background:#1f5a35}
.tarjeta-imagen img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;object-fit:cover}
.tarjeta-nombre{display:block;margin-top:12px;font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:800;letter-spacing:.06em;color:var(--verde)}
.candado{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:1.15rem;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.tarjeta:not(.bloqueada) .candado{display:none}

/* ---------- Pie ---------- */
.pie{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:left;margin-top:26px;padding:22px clamp(12px,3vw,32px);
  background:rgba(250,248,244,.96);border-top:5px solid var(--naranja)}
.pie p{margin:0;font-size:.98rem;color:#444}
.pie-cara{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid var(--naranja);background:#fff}

/* ---------- Ventana del código ---------- */
.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:12px}
.modal[hidden]{display:none}
.modal-fondo{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(20,30,24,.62)}
.modal-caja{position:relative;width:min(94vw,860px);max-height:96vh;overflow:auto;background:#fbfaf7;border:6px solid var(--naranja);border-radius:26px;padding:14px 14px 18px;text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.4)}
.modal-cerrar{position:absolute;right:8px;top:6px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:1.9rem;line-height:1;cursor:pointer;color:#444;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pizarra-codigo{position:relative;width:min(100%,calc((100vh - 170px) * 1.7778));margin:0 auto;border-radius:16px;overflow:hidden}
.pizarra-codigo img{display:block;width:100%;height:auto}
.campo-codigo{position:absolute;left:21.6%;top:55.1%;width:56.8%;height:17.2%;background:transparent;border:0;outline:0;text-align:center;
  font-family:var(--letra);font-weight:800;color:#1b4f8a;letter-spacing:.18em;text-transform:uppercase;font-size:calc(var(--w,700px) * .05);padding:0 4%}
.campo-codigo:focus{box-shadow:0 0 0 4px rgba(42,143,216,.55);border-radius:30px}
.mensaje{min-height:1.6em;margin:10px 0 4px;font-size:1.02rem;font-weight:700}
.mensaje.error{color:var(--rojo)} .mensaje.ok{color:var(--verde-claro)}
.modal-acciones{display:flex;flex-direction:column;align-items:center;gap:10px}
.boton-verde{font:inherit;font-size:1.2rem;font-weight:800;color:#fff;background:linear-gradient(#3ea96a,#1f7a45);border:4px solid #fff;border-radius:999px;padding:11px 38px;cursor:pointer;
  box-shadow:0 5px 12px rgba(0,0,0,.28);transition:transform .15s}
.boton-verde:hover{transform:translateY(-2px)} .boton-verde[disabled]{opacity:.6;cursor:wait}
.enlace-ayuda{font-size:.95rem;color:#6b3fc2;font-weight:700}

/* ---------- Aviso ---------- */
.aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:120;max-width:min(92vw,520px);padding:12px 20px;border-radius:16px;
  background:#263238;color:#fff;font-size:1rem;box-shadow:0 8px 22px rgba(0,0,0,.35);text-align:center}
.aviso[hidden]{display:none}

/* ---------- Pantallas chicas ---------- */
@media (max-width:760px){
  :root{--alto-cabecera:104px}
  .cabecera{flex-direction:column;align-items:flex-start;gap:6px;padding-top:6px;padding-bottom:6px}
  .menu{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;gap:2px}
  .menu a,.menu button{white-space:nowrap;padding:6px 10px;font-size:.9rem}
  .marca-cara{width:38px;height:38px}
  .marca-texto{font-size:1.1rem}
  .tarjetas{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
}
@media (max-height:520px) and (orientation:landscape){
  :root{--alto-cabecera:54px}
  .cabecera{min-height:54px}
  .marca-cara{width:38px;height:38px}
  .modal-caja{padding:8px 8px 10px}
  .pizarra-codigo{width:min(100%,calc((100vh - 112px) * 1.7778))}
  .mensaje{margin:4px 0 2px;min-height:1.2em;font-size:.92rem}
  .modal-acciones{flex-direction:row;justify-content:center;gap:18px}
  .boton-verde{font-size:1.05rem;padding:8px 28px}
}

/* ---------- Pantalla completa del carrusel ---------- */
.marco:fullscreen{width:100vw;max-width:none;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;background:#000}
.marco:fullscreen .proporcion{width:min(100vw,177.78vh);padding-top:min(56.25vw,100vh);margin:0 auto}
.marco:-webkit-full-screen{width:100vw;max-width:none;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;background:#000}
.marco:-webkit-full-screen .proporcion{width:min(100vw,177.78vh);padding-top:min(56.25vw,100vh);margin:0 auto}

/* ---------- Visor de la introducción (carrusel propio, sin marcos externos) ---------- */
.visor{position:relative;width:100%;padding-top:61.3%;background:#fbfaf7;overflow:hidden;touch-action:pan-y;outline:0}
.visor:focus-visible{box-shadow:inset 0 0 0 4px var(--azul)}
.visor-pista{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;transition:transform .35s ease}
.visor-diap{flex:0 0 100%;width:100%;height:100%}
.visor-diap img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.flecha{position:absolute;top:50%;margin-top:-28px;z-index:2;width:56px;height:56px;border:0;border-radius:50%;background:rgba(255,255,255,.86);color:#222;
  font-size:2.3rem;line-height:1;padding:0 0 6px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .15s,background .15s}
.flecha:hover{background:#fff;transform:scale(1.08)}
.flecha-izq{left:10px} .flecha-der{right:10px}
.puntos{display:flex;gap:9px;justify-content:center;margin-top:14px;min-height:14px}
.punto{width:13px;height:13px;border-radius:50%;border:2px solid var(--naranja);background:#fff;padding:0;cursor:pointer}
.punto.activo{background:var(--naranja)}
.marco:fullscreen .visor{width:min(100vw,163vh);padding-top:min(61.3vw,100vh);margin:0 auto}
.marco:-webkit-full-screen .visor{width:min(100vw,163vh);padding-top:min(61.3vw,100vh);margin:0 auto}
@media (max-width:760px){.flecha{width:46px;height:46px;margin-top:-23px;font-size:1.9rem}}

/* ================= ETAPA 2: carruseles de las tablas ================= */
.seccion-tablas{padding-bottom:30px}
.selector-tablas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;max-width:760px;margin:0 auto 14px}
.num-tabla{font:inherit;font-size:1.25rem;font-weight:800;aspect-ratio:1;border-radius:50%;border:4px solid var(--naranja);background:#fff;color:var(--naranja-osc);cursor:pointer;padding:0;transition:transform .15s,background .15s}
.num-tabla:hover{transform:translateY(-3px);background:#fff3e8}
.num-tabla.activa{background:var(--verde);border-color:var(--verde);color:#fff;transform:scale(1.08)}
.num-tabla:focus-visible{outline:4px solid var(--azul);outline-offset:2px}
.titulo-tabla{font-size:clamp(1.4rem,3vw,2rem);margin:.4em 0 .5em;color:var(--verde)}
.pasos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 14px}
.paso{font:inherit;font-size:.98rem;padding:8px 18px;border-radius:999px;cursor:pointer;border:3px solid var(--azul);background:#fff;color:var(--azul);transition:all .15s}
.paso:hover{background:#eaf5fd}
.paso.activa{background:var(--azul);color:#fff;font-weight:700}
.marco-tabla{max-width:900px;--r:.48}
.marco-tabla .visor{padding-top:calc(var(--r) * 100%)}
.marco-tabla .visor video.llena{background:#000}
.marco-tabla:fullscreen{width:100vw;max-width:none;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;background:#000}
.marco-tabla:fullscreen .visor{width:min(100vw,calc(100vh / var(--r)));padding-top:min(calc(var(--r) * 100vw),100vh);margin:0 auto}
.marco-tabla:-webkit-full-screen{width:100vw;max-width:none;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;background:#000}
.marco-tabla:-webkit-full-screen .visor{width:min(100vw,calc(100vh / var(--r)));padding-top:min(calc(var(--r) * 100vw),100vh);margin:0 auto}
.acciones-tabla{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.boton-tabla{font:inherit;font-size:1.05rem;font-weight:700;padding:10px 22px;border-radius:999px;cursor:pointer;border:4px solid var(--naranja);background:#fff;color:var(--naranja-osc);transition:transform .15s,background .15s}
.boton-tabla:hover{background:#fff3e8;transform:translateY(-2px)}
.boton-verde.resaltado{animation:late 1.3s ease-in-out infinite;box-shadow:0 0 0 5px rgba(245,197,24,.95),0 5px 12px rgba(0,0,0,.28)}
@keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.boton-verde.resaltado{animation:none}}
@media (max-width:760px){
  .selector-tablas{grid-template-columns:repeat(6,minmax(0,1fr));max-width:420px}
  .acciones-tabla{flex-direction:column}
  .acciones-tabla .boton-tabla,.acciones-tabla .boton-verde{width:min(100%,320px)}
  #t-continuar{order:-1}
}
.marco-tabla .boton-pantalla{top:10px;bottom:auto}

/* ================= ETAPA 3: videos de las tablas ================= */
.marco-video{max-width:980px}
.marco-video video.llena{background:#fbfaf7;cursor:default}
.zonas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.zonas[hidden]{display:none}
.zona{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;pointer-events:auto;border-radius:12px;transition:box-shadow .15s,background .15s}
.zona:hover{background:rgba(255,255,255,.16);box-shadow:0 0 0 3px rgba(245,197,24,.95)}
.zona:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.zona:active{background:rgba(255,255,255,.3)}
/* posiciones en % del cuadro 16:9 (medidas sobre el video de 1280x720) */
.z-home{left:1.4%;top:1.7%;width:6.25%;height:9.2%}
.z-sonido{left:87.3%;top:1.7%;width:5.1%;height:8.9%}
.z-pantalla{left:93.4%;top:1.7%;width:5%;height:8.9%}
.z-anterior{left:2%;top:87.2%;width:23.6%;height:11.4%}
.z-pausa{left:27.1%;top:87.2%;width:24.5%;height:11.4%}
.z-repetir{left:53%;top:87.2%;width:21.1%;height:11.4%}
.z-listo{left:75.5%;top:87.2%;width:22.3%;height:11.4%}
.z-anterior.apagado{cursor:not-allowed}
.z-anterior.apagado:hover{box-shadow:none;background:transparent}
.z-listo.resaltado{box-shadow:0 0 0 4px rgba(245,197,24,.95),0 0 18px 6px rgba(245,197,24,.7);animation:late-listo 1.3s ease-in-out infinite}
@keyframes late-listo{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.z-listo.resaltado{animation:none}}
/* sonido silenciado: una raya roja sobre el altavoz dibujado */
.z-sonido.silenciado::after{content:"";position:absolute;left:8%;right:8%;top:47%;height:5px;border-radius:3px;background:#e53935;box-shadow:0 0 0 2px #fff;transform:rotate(-40deg)}
/* teléfono horizontal: el cuadro entra completo en la pantalla */
@media (max-height:520px) and (orientation:landscape){
  .marco-video{max-width:calc((100vh - var(--alto-cabecera) - 24px) * 1.7778)}
  .marco-tabla{max-width:calc((100vh - var(--alto-cabecera) - 24px) * 1.65)}
}

/* ¡Estoy listo! y Continuar */
.z-listo.apagado{cursor:not-allowed}
.z-listo.apagado:hover{box-shadow:none;background:transparent}
.z-listo.apagado:active{background:transparent}
#v-continuar.resaltado{animation:late 1.3s ease-in-out infinite;box-shadow:0 0 0 5px rgba(245,197,24,.95),0 5px 12px rgba(0,0,0,.28)}

/* ================= ETAPA 4: examen y felicitaciones ================= */
.marco-examen{max-width:980px}
.escena-examen,#escena-examen{--w:900px}
.ex-capa{position:absolute;top:0;left:0;width:100%;height:100%}
.ex-capa[hidden]{display:none}
.ex-marco{position:absolute;border:4px solid #ffd91a;border-radius:16px;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 18px 4px rgba(255,217,26,.55);pointer-events:none;transition:top .25s,left .25s;animation:marco-late 1.4s ease-in-out infinite}
@keyframes marco-late{0%,100%{box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 12px 2px rgba(255,217,26,.4)}50%{box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 22px 7px rgba(255,217,26,.75)}}
@media (prefers-reduced-motion:reduce){.ex-marco{animation:none}}
.ex-fila{position:absolute;border:0;background:transparent;padding:0;border-radius:16px;cursor:default}
.ex-fila.corregible{cursor:pointer;box-shadow:inset 0 0 0 3px rgba(255,90,90,.9);background:rgba(255,90,90,.12)}
.ex-fila.corregible:hover{background:rgba(255,90,90,.25)}
.ex-fila:disabled{pointer-events:none}
.ex-resp{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:var(--letra);font-weight:800;
  color:#fff;font-size:calc(var(--w) * .037);line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.5);letter-spacing:.02em}
.ex-resp.mal{color:#ff8a8a}
.ex-tecla{position:absolute;border:0;background:transparent;padding:0;border-radius:14px;cursor:pointer;transition:background .12s,box-shadow .12s}
.ex-tecla:hover{background:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(245,197,24,.95)}
.ex-tecla:active{background:rgba(255,255,255,.4)}
.ex-mensaje{min-height:1.7em;margin:12px 0 0;font-size:1.1rem;font-weight:700;color:#555}
.ex-mensaje.ok{color:var(--verde-claro)} .ex-mensaje.error{color:var(--rojo)}
.felic-cartel{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(circle at 50% 40%,#2e7d4f,#1f5a35);color:#fff;text-align:center;padding:20px}
.felic-cartel[hidden]{display:none}
.felic-titulo{font-size:clamp(2rem,7vw,4.6rem);font-weight:800;color:#ffd91a;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.felic-texto{font-size:clamp(1.2rem,3vw,2rem)}
@media (max-width:760px){#fe-acciones .boton-tabla,#fe-acciones .boton-verde,#ex-acciones .boton-tabla{width:min(100%,320px)}}
@media (max-height:520px) and (orientation:landscape){.marco-examen{max-width:calc((100vh - var(--alto-cabecera) - 70px) * 1.7778)}.ex-mensaje{margin:4px 0 0;font-size:.95rem;min-height:1.2em}}
.marco-examen .boton-pantalla{top:10px;bottom:auto}

/* Botón verde de confirmar: palpita cuando el niño ya escribió una respuesta.
   La animación va en un pseudo-elemento que no recibe toques, así el botón real no se mueve ni pierde el clic. */
.ex-tecla.llama::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;animation:llama-ok 0.9s ease-in-out infinite}
@keyframes llama-ok{0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 10px 2px rgba(46,170,80,.6);background:rgba(255,255,255,.1)}50%{transform:scale(1.12);box-shadow:0 0 0 4px rgba(255,255,255,1),0 0 24px 8px rgba(46,200,90,.95);background:rgba(255,255,255,.25)}}
@media (prefers-reduced-motion:reduce){.ex-tecla.llama::after{animation:none;box-shadow:0 0 0 4px #fff,0 0 18px 6px rgba(46,200,90,.9)}}


/* ================= ETAPA 5: AUDIOS Y DESCARGAS ================= */
.audio-caja{display:flex;align-items:center;gap:18px;max-width:760px;margin:10px auto 0;padding:18px 20px;background:#fff;border:5px solid var(--naranja);border-radius:22px;box-shadow:0 8px 22px rgba(0,0,0,.13);text-align:left}
.audio-general{margin-top:20px;border-color:var(--verde)}
.audio-cara{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid var(--naranja);flex:none;background:#fff}
.audio-general .audio-cara{border-color:var(--verde)}
.audio-lista{flex:1;min-width:0}
.audio-lista .titulo-tabla{margin:0 0 10px}
.pista{display:flex;align-items:center;gap:14px;padding:9px 0}
.pista+.pista{border-top:2px dashed #e6d9c8}
.pista-play{flex:none;width:58px;height:58px;border-radius:50%;border:4px solid #fff;background:linear-gradient(#3ea96a,#1f7a45);color:#fff;font-size:1.4rem;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.25);display:grid;place-items:center;padding:0;transition:transform .15s}
.pista-play:hover{transform:scale(1.07)}
.pista-play:focus-visible{outline:4px solid var(--azul);outline-offset:2px}
.pista.sonando .pista-play{background:linear-gradient(#f08a3f,#c4510e)}
.pista-info{flex:1;min-width:0}
.pista-texto{font-weight:700;font-size:1.05rem;margin-bottom:6px;color:var(--tinta)}
.pista-barra{height:12px;border-radius:999px;background:#efe6d8;overflow:hidden;cursor:pointer}
.pista-barra i{display:block;height:100%;width:0;background:var(--verde-claro);border-radius:999px}
.pista.sonando .pista-barra i{background:var(--naranja)}
@media (max-width:560px){
  .audio-caja{flex-direction:column;align-items:stretch;text-align:center}
  .audio-cara{margin:0 auto}
  .pista{text-align:left}
}

.seccion-descargas{max-width:900px;margin-left:auto;margin-right:auto}
.descarga-grupo{margin:22px 0;padding:18px;background:#fff;border:4px solid var(--naranja);border-radius:20px}
.descarga-grupo h3{margin:.1em 0 .2em;color:var(--verde);font-size:1.4rem}
.descarga-texto{margin:0 0 14px;color:#555}
.posters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.poster{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;text-decoration:none;color:var(--naranja-osc);background:#fff8f0;border:3px solid var(--naranja);border-radius:16px;transition:transform .15s,background .15s}
.poster:hover{transform:translateY(-3px);background:#fff3e8}
.poster-num{font-size:1.9rem;font-weight:800;line-height:1}
.poster-txt{font-size:.85rem;font-weight:700}
.poster-ico{font-size:1.1rem;color:var(--verde)}
.poster.bloqueada,.descarga-boton.bloqueada{opacity:.6;filter:grayscale(.4)}
.descarga-boton{display:inline-block;text-decoration:none}
.posters.faltan{grid-template-columns:repeat(4,minmax(0,1fr))}
.faltan .poster-num{font-size:1.5rem;padding:6px 0 4px}
@media (max-width:640px){.posters{grid-template-columns:repeat(3,minmax(0,1fr))}.posters.faltan{grid-template-columns:repeat(2,minmax(0,1fr))}}

.audio-practica{max-width:760px;margin:26px auto 0;text-align:center;font-weight:800;font-size:clamp(1.1rem,2.6vw,1.45rem);color:var(--verde)}
.audio-practica+.audio-general{margin-top:8px}
/* Aviso para teléfonos en vertical: el contenido se ve mejor en horizontal */
.aviso-girar{display:none;margin:0 auto 12px;max-width:340px;padding:8px 14px;border-radius:999px;background:#fff3e8;border:3px solid var(--naranja);color:var(--naranja-osc);font-weight:700;font-size:.95rem}
@media (orientation:portrait) and (max-width:700px){.aviso-girar{display:block}}

.audio-listo{margin-top:14px;justify-content:flex-start}
@media (max-width:560px){.audio-listo{justify-content:center}}


/* ================= ETAPA 6: TABLA PITAGÓRICA ================= */
.seccion-pit{max-width:900px;margin-left:auto;margin-right:auto}
.pit-caja{max-width:820px;margin:0 auto}
.pit-marco{padding:10px;background:#bf5a1a;background:linear-gradient(135deg,#f08a3f,#c4510e);border-radius:20px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.pit-tabla{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;padding:8px;background:#1f4f33;border-radius:12px;font-family:var(--letra)}
.pit-esq,.pit-cab,.pit-celda{display:grid;place-items:center;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:6px;font:inherit;font-weight:800;font-size:clamp(.5rem,1.9vw,1.05rem);line-height:1}
.pit-esq{color:#ffd91a;background:transparent;font-size:clamp(.7rem,2.3vw,1.3rem)}
.pit-cab{cursor:pointer;color:#fff;background:#ec6a1d;transition:transform .12s,background .15s}
.pit-cab:hover{background:#ff8236}
.pit-cab.act{background:#ffd91a;color:#3b2a00;transform:scale(1.1);box-shadow:0 0 0 2px #fff}
.pit-celda{cursor:pointer;color:#fff;background:#2b6a45;transition:background .15s,transform .12s,opacity .2s}
.pit-celda:hover{background:#3a8a5b}
.pit-celda.en-linea{background:#3f9a68}
.pit-celda.sel{background:#ffd91a;color:#3b2a00;transform:scale(1.18);box-shadow:0 0 0 3px #fff,0 0 12px 3px rgba(255,217,26,.8);position:relative;z-index:2}
.pit-celda.espejo{background:#2aa8e0;color:#fff;transform:scale(1.18);box-shadow:0 0 0 3px #fff,0 0 12px 3px rgba(42,168,224,.8);position:relative;z-index:2}
.pit-tabla.ver-repetidos .pit-celda.repe{opacity:.25}
.pit-tabla.ver-repetidos .pit-celda.repe.sel,.pit-tabla.ver-repetidos .pit-celda.repe.espejo{opacity:1}
.pit-tabla.bloqueada .pit-celda,.pit-tabla.bloqueada .pit-cab{opacity:.8}
.pit-celda:focus-visible,.pit-cab:focus-visible{outline:3px solid #fff;outline-offset:1px;position:relative;z-index:3}
.pit-amadeo{display:flex;align-items:center;gap:14px;margin-top:16px;text-align:left}
.pit-cara{width:76px;height:76px;border-radius:50%;object-fit:cover;border:4px solid var(--naranja);background:#fff;flex:none}
.pit-globo{position:relative;flex:1;padding:14px 18px;background:#fff;border:4px solid var(--naranja);border-radius:18px;font-size:clamp(1rem,2.3vw,1.2rem);font-weight:700;color:var(--tinta);min-height:64px;display:flex;align-items:center}
.pit-globo::before{content:"";position:absolute;left:-14px;top:50%;margin-top:-10px;border:10px solid transparent;border-right:12px solid var(--naranja);border-left:0}
.pit-acciones{margin-top:14px}
.pit-acciones .bloqueada{opacity:.6}
@media (max-width:560px){.pit-amadeo{flex-direction:column;text-align:center}.pit-globo::before{display:none}.pit-tabla{gap:2px;padding:5px}}
/* Teléfono horizontal angosto (hasta 760 px): la cabecera pasa a una sola fila de 54 px (el menú se desliza hacia los costados) */
@media (max-height:520px) and (orientation:landscape) and (max-width:760px){
  .cabecera{flex-direction:row;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}
  .marca-texto small{display:none}
  .marca-texto{font-size:1rem}
  .menu{width:auto;flex:1;min-width:0}
  .menu a,.menu button{padding:6px 8px;font-size:.82rem}
  .boton-ig{padding:6px 10px}
}
/* Teléfono en horizontal: el cuadro ocupa todo el alto visible y Amadeo, su globo y los botones van a la derecha */
@media (max-height:520px) and (orientation:landscape){
  .seccion-pit{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:14px;max-width:none;padding:0 12px 8px;text-align:left}
  .seccion-pit h2{grid-column:2;grid-row:1;margin:0 0 4px;font-size:1.3rem}
  .seccion-pit .subtitulo{grid-column:2;grid-row:2;margin:0 0 6px;font-size:.85rem}
  .pit-caja{display:contents}
  .pit-marco{grid-column:1;grid-row:1 / 6;--pw:calc(100vh - var(--alto-cabecera) - 24px);width:var(--pw);padding:5px;border-radius:14px;align-self:start}
  .pit-tabla{gap:2px;padding:4px;border-radius:8px}
  .pit-esq,.pit-cab,.pit-celda{font-size:calc(var(--pw) / 13 * .4);border-radius:4px}
  .pit-amadeo{grid-column:2;grid-row:3;margin-top:0;gap:8px;align-items:flex-start}
  .pit-cara{width:46px;height:46px;border-width:3px}
  .pit-globo{padding:8px 10px;font-size:.85rem;min-height:0;border-width:3px;border-radius:14px}
  .pit-globo::before{left:-11px;top:22px;margin-top:-8px;border-width:8px;border-right-width:9px}
  .pit-acciones{grid-column:2;grid-row:4;margin-top:8px;display:flex;flex-direction:column;gap:6px;align-items:stretch}
  .pit-acciones .boton-tabla{width:100%;margin:0;padding:8px 10px;font-size:.9rem}
}
@media (min-width:761px) and (max-width:1050px){.menu{gap:2px}.menu a,.menu button{font-size:.86rem;padding:6px 8px}.marca-texto small{display:none}}