/* El camino del Iberá (mapa.js): el mapa entero (mapa.html) y, desde el 20/10, el final de cada bajada (b.html), que
   ahora es el mapa (Verónica, 20/10: «Al terminar cada juego debería ir al mapa, no el video, solo el mapa»). Estaba en
   mapa.html; pasó acá para que lo usen las dos páginas. Lo que podía chocar con el juego (estilo.css) va adentro de .mapa.
   vuelo.html no lo carga: tiene su propia hoja y sus animales. */

/* El camino con números (20/10, Verónica: «Usaremos números como en candy crash... porque si no, no veo cuál es la
   diferencia entre estar en el 1 o en el 500»). Un sendero por el estero, de arriba abajo, con un círculo por nivel;
   en cada hito, su laguna con su animal; se oscurece hacia la noche de la juntada, en el 120. Los números son botones
   HTML encima del dibujo: crecen con la letra del teléfono (regla de diseño, 5) y son lo que se toca (regla 4). */
.mapa { position: relative; border-radius: var(--radio); overflow: hidden; background: #262341; box-shadow: 0 6px 24px #0008; }
.mapa > svg { display: block; width: 100%; height: auto; }
/* el dibujo, en tres capas una sobre otra (el pasto, las matas y el resto: mapa.js); con profundidad, cada una aparte, así
   lo que se corre al bajar no hace volver a pintar las demás */
.mapa > svg ~ svg { position: absolute; left: 0; top: 0; }
.mapa.conProfundidad > svg { will-change: transform; }
/* la bruma de arriba (27/10, el camino con profundidad; mapa.js, profundidad, la acomoda): lo de más arriba del camino,
   más lejos, apenas velado. Fija, debajo de la cabecera, la tarjeta pegada y el pie */
.mapa .bruma { position: fixed; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(210, 222, 240, .22), rgba(210, 222, 240, 0)) no-repeat; }
/* Ficha de excepción (regla de diseño 5): el número de cada nivel crece con la letra del teléfono sólo hasta 22 (con la
   letra al doble, tres cifras no entran en el círculo de 56, que es lo que se toca). Lo compensa: es un número suelto,
   en Bitter 800, oscuro sobre crema (más de 9 a 1); su hoja, al tocarlo, sí crece entera. */
.mapa .nivel { position: absolute; transform: translate(-50%, -50%); width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 3px solid #8f7a52; background: #e7dec6; color: #2b2419;
  display: grid; place-items: center; font: 800 clamp(15px, var(--letra), 22px)/1 Bitter, Georgia, serif; cursor: pointer; box-shadow: 0 3px 0 #6d5a33, 0 6px 10px #0006; }
.mapa .nivel:active { transform: translate(-50%, calc(-50% + 2px)); box-shadow: 0 1px 0 #6d5a33, 0 3px 6px #0006; }
.mapa .nivel:focus { outline: none; }
.mapa .nivel:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
.mapa .nivel.hecho { background: #5ee38f; border-color: #1d5a32; color: #0d2a18; }
.mapa .nivel.hecho .tilde { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #0d2a18; color: #5ee38f; font: 800 14px/22px system-ui, -apple-system, sans-serif; text-align: center; }
/* el que te toca: relleno de amarillo, más grande, con borde blanco y su luz (22/10, Verónica, N.º 52: «En el mapa no se
   distingue claramente cuál es el número que sigue»; hasta ese día era crema, como los que faltan, con un borde amarillo).
   Los que faltan quedan crema; los pasados, verdes: tres colores que no se confunden. El número, oscuro sobre amarillo
   (más de 12 a 1) */
.mapa .nivel.actual { width: 76px; height: 76px; background: #ffd23f; border: 4px solid #fffaf0; color: #14121f; font-size: clamp(20px, calc(var(--letra) * 1.25), 26px);
  box-shadow: 0 0 0 5px #ffd23f, 0 0 20px 8px #ffd23fa0, 0 6px 14px #0008; }
.mapa .nivel.falta { background: #d9cfb3; color: #3a3122; }
/* difícil: un aro punteado alrededor y la palabra debajo; de héroe: grande, con su animal (una sombra hasta que llega) */
.mapa .nivel.dificil::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 3px dashed #ff8f6b; pointer-events: none; }
.mapa .nivel .marca { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; border-radius: 999px; background: #14121fd9; color: #ffd1bf; font: 700 14px/1.3 system-ui, -apple-system, sans-serif; pointer-events: none; }
/* contra reloj (20/10): un aro de puntos celestes y «⏱ Contra reloj» abajo, como «Difícil» */
.mapa .nivel.reloj::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 3px dotted var(--celeste); pointer-events: none; }
.mapa .nivel.reloj .marca { color: #bff5f5; }
.hoja .chip.reloj { color: var(--celeste); }
.mapa .nivel.heroe { width: 80px; height: 80px; background: #f6eedb; border-color: #ffd23f; }
.mapa .nivel.heroe img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: contain; }
.mapa .nivel.heroe img.sombra { filter: brightness(0) opacity(.45); }
.mapa .nivel.heroe .num { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); min-width: 34px; padding: 2px 6px; border-radius: 999px; background: #ffd23f; color: #14121f; font-size: clamp(15px, var(--chica), 20px); }
.mapa .nivel.heroe .marca { top: calc(100% + 16px); color: #ffe9a0; }
.mapa .nivel.heroe.hecho { border-color: #5ee38f; }
/* de héroe y el que te toca: también amarillo; la corona, oscura para que no se pierda */
.mapa .nivel.heroe.actual { width: 88px; height: 88px; background: #ffd23f; border-color: #fffaf0; }
.mapa .nivel.heroe.actual .num { background: #14121f; color: #ffd23f; }
/* donde estás: la cabeza del carpincho del día al costado del número, y un cartel con la meta */
.mapa .ficha { position: absolute; transform: translate(-50%, -100%); width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 8px #000a; pointer-events: none; }
.mapa .cartelActual { position: absolute; transform: translateY(-50%); width: max-content; max-width: 46%; display: grid; gap: 2px; padding: 8px 12px; border-radius: 14px;
  background: #fff6d6; color: #2b2419; box-shadow: 0 0 0 3px #ffd23f, 0 6px 14px #0007; pointer-events: none; }
.mapa .cartelActual b { font: 800 var(--chica)/1.2 Bitter, Georgia, serif; }
/* al lado de «Nivel 12», las vidas (21/10, «❤️ 4»), sin cortarse */
.mapa .cartelActual b .vidas { white-space: nowrap; }
.mapa .cartelActual small { font-size: var(--mini); font-weight: 700; color: #6d5a33; }
.mapa .cartelActual span { font-size: var(--chica); line-height: 1.25; }
/* el nombre de la laguna, debajo de su agua (mapa.js, acomodar lo corre para que no se salga) */
.mapa .rotulo { position: absolute; transform: translate(-50%, 0); width: max-content; max-width: 48%; padding: 4px 10px; border-radius: 10px; background: #f6eedb; color: #2b2419;
  font: 800 var(--chica)/1.2 Bitter, Georgia, serif; box-shadow: 0 3px 0 #8f7a52, 0 5px 10px #0006; text-align: center; pointer-events: none; }
/* el camino sigue para arriba (20/10: sube, como en el Candy) */
.mapa .sigue { position: absolute; left: 50%; transform: translateX(-50%); top: 14px; min-height: 0; padding: 0; color: #e8e2f6; font-size: var(--chica); text-shadow: 0 1px 4px #000; }

/* El pasito del final de una bajada (mapa.js, pasito): mientras el que se jugó sigue «actual», el cartel del que toca
   espera escondido y el tramo nuevo, apagado; después la cabeza camina 0,6 s y el tramo y el número se prenden. Con
   «reducir movimiento», sin transiciones: ya está dado. */
.mapa.antes .pasoAndado { opacity: 0; }
.mapa.antes .cartelActual { opacity: 0; }
.mapa.anda .pasoAndado { transition: opacity .35s ease-out; }
.mapa.anda .ficha { transition: left .6s ease-in-out, top .6s ease-in-out; }
.mapa.anda .cartelActual { transition: opacity .3s ease-out .45s; }
.mapa.anda .nivel { transition: background-color .3s, border-color .3s, box-shadow .3s, width .3s, height .3s; }
@media (prefers-reduced-motion: reduce) { .mapa.anda .pasoAndado, .mapa.anda .ficha, .mapa.anda .cartelActual, .mapa.anda .nivel { transition: none; } }
/* los destellos alrededor del número que se pasó (estilo.css tiene la estrellita y su animación) */
.mapa .destellos { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 5px #ffd23fcc); }

/* tus animales: los de los hitos, arriba; los que faltan, con «?» */
.animales { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 4px 10px; }
.animales .cuantos { font-size: var(--chica); color: var(--suave); }
.animales .cuantos b { color: var(--texto); }
.animales ol { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.animales li { flex: none; width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; background: #f6eedb; overflow: hidden; }
.animales li img { width: 88%; height: 88%; object-fit: contain; }
.animales li.falta { background: none; border: 2px dashed #8d84ad; color: #b8b3d1; font-weight: 800; font-size: var(--mini); }

/* la hoja de un nivel: sale abajo al tocarlo; «Volver» o «atrás» la cierran */
.velo { position: fixed; inset: 0; z-index: 35; background: #0b0a12b3; display: flex; align-items: flex-end; justify-content: center; }
.hoja { width: min(430px, 100%); max-height: 88dvh; overflow-y: auto; background: var(--superficie); border-radius: 24px 24px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 12px; animation: subeHoja .22s ease-out both; }
@keyframes subeHoja { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hoja { animation: none; } }
.hoja .cabeza { display: flex; align-items: center; gap: 12px; }
.hoja .retrato { width: 72px; height: 72px; flex: none; border-radius: 50%; background: #f6eedb; display: grid; place-items: center; overflow: hidden; }
.hoja .retrato img { width: 64px; height: 64px; object-fit: contain; }
.hoja .retrato img.sombra { filter: brightness(0) opacity(.45); }
.hoja h2 { font-family: Bitter, Georgia, serif; font-weight: 800; font-size: var(--titulo); margin: 0; }
.hoja .chip { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 999px; border: 2px solid currentColor; font: 800 var(--chica)/1.3 system-ui, -apple-system, sans-serif; vertical-align: 3px; }
.hoja .chip.dificil { color: #ffb08a; }
.hoja .chip.heroe { color: var(--amarillo); }
.hoja .meta { font: 800 var(--titulo)/1.25 Bitter, Georgia, serif; margin: 0; }
.hoja .meta.reloj { color: var(--celeste); }
.hoja .linea { color: var(--suave); font-size: var(--letra); margin: 0; }

.sponsor-mapa { text-align: center; color: var(--suave); font-size: var(--chica); margin: 12px 0 0; }
.fin-camino { display: grid; gap: 10px; margin: 16px 0 0; text-align: center; font-weight: 700; }
.fin-camino > p { margin: 0; }
.vuelo { margin: 0; text-decoration: none; display: grid; place-items: center; text-align: center; } /* en el pie, fijo abajo (22/10) */
.pie-mapa.sinPrincipal { padding-top: 24px; } /* sin el botón de color, no hace falta lugar para su flecha */
/* abajo: el botón de color, fijo, con la flecha encima, sobre una franja lisa (así la flecha no tapa nada) */
.pie-mapa { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 6px; padding: 56px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #14121f00, var(--fondo) 45%); pointer-events: none; }
.pie-mapa > * { pointer-events: auto; }
.pie-mapa .boton.principal { text-decoration: none; display: grid; place-items: center; text-align: center; }
.pie-mapa .manana { margin: 0; text-align: center; font-weight: 800; color: var(--texto); }
.pie-mapa > .guia { top: 6px; pointer-events: none; }

/* ---- El final de cada bajada, en el mapa (20/10, Verónica: «Al terminar cada juego debería ir al mapa, no el video,
   solo el mapa»; mapa.js, finEnMapa). Una capa sobre el juego, de pantalla entera: arriba, la barra del juego (el
   sonido, el nombre e «Inicio», en el mismo lugar) y cómo salió, en dos o tres líneas cortas; en el medio, el mapa, que
   se baja con el dedo; abajo, el botón principal con la flecha, lo demás y el sponsor. ---- */
html.enMapa, html.enMapa body { overflow: hidden; }
/* el juego, debajo, no se ve ni se toca (su barra de abajo, con «Centrar», queda pegada encima de todo: estilo.css) */
html.enMapa .pantallaJuego { visibility: hidden; }
.mapaFin { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: center; background: var(--fondo); }
.mapaFin .columna { width: 100%; max-width: 430px; height: 100%; display: flex; flex-direction: column; min-height: 0;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 0 calc(12px + env(safe-area-inset-left, 0px)); }
/* en la tablet parada, la columna del mapa como en mapa.html */
@media (orientation: portrait) and (min-width: 600px) { .mapaFin .columna { max-width: max(430px, calc((100dvh - 440px) * 390 / 600 + 24px)); } }
/* la barra: la misma que la del juego (estilo.css: 18 y 14 fijos, su ficha de excepción); si se pasó, en amarillo */
.mapaFin .barraArriba { --barra: 56px; --hueco: 6px; gap: 6px; }
.mapaFin .barraArriba.paso h1 .nombre { color: var(--amarillo); }
.mapaFin .barraArriba h1 .metaBarra { color: var(--texto); }
.mapaFin .resultado { flex: none; display: grid; gap: 2px; padding: 6px 4px 8px; }
.mapaFin .resultado p { margin: 0; }
.mapaFin .resultado .sub { font-weight: 800; font-size: var(--chica); }
.mapaFin .resultado .linea { color: var(--suave); font-size: var(--chica); line-height: 1.3; }
/* lo que viene y la promesa de mañana (28/10): lo último que se lee antes de irse, en el color de leer */
.mapaFin .resultado .viene { color: var(--texto); }
.mapaFin .resultado .puesto { color: var(--celeste); font-weight: 800; }
.mapaFin .resultado .puesto[hidden] { display: none; }
.mapaFin .resultado .fin-camino { margin: 8px 0 0; }
/* el mapa: lo que queda en el medio, y se baja con el dedo (sin arrastrar la página de atrás) */
.mapaFin .recorrido { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: var(--radio); padding-bottom: 56px; } /* (abajo de todo, lugar para la flecha del botón de abajo) */
/* abajo, encima del borde del mapa (con su franja que se funde), sin pegarse con sticky: la columna ya mide la pantalla */
.mapaFin .pie-mapa { position: relative; flex: none; margin-top: -48px; padding-top: 48px; gap: 8px; }
.mapaFin .pie-mapa .boton.conGuia:not(:first-child) { margin-top: 44px; } /* la flecha, en su lugar: no tapa lo de arriba */
.mapaFin .pie-mapa .guiaFin { top: -48px; }
.mapaFin .pie-mapa .manana { font-size: var(--titulo); font-family: Bitter, Georgia, serif; }
/* la palabra del botón y, debajo, en chico, lo que cuesta o cuántas quedan */
.mapaFin .pie-mapa .boton small { display: block; margin-top: 2px; font-size: var(--chica); font-weight: 700; opacity: .9; }
.mapaFin .pie-mapa .boton { position: relative; padding-block: 10px; line-height: 1.2; } /* (la flecha va sobre el suyo) */
.mapaFin .sponsor-mapa { margin: 2px 0 0; }
/* «Copiado: pegalo en el grupo», sobre el botón (el juego, con su cartel, está tapado) */
.mapaFin .avisoMapa { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: max-content; max-width: 100%; margin: 0; padding: 8px 14px; border-radius: 999px;
  background: #000c; color: #fff; font-size: var(--chica); text-align: center; pointer-events: none; opacity: 0; transition: opacity .2s; }
.mapaFin .avisoMapa.ve { opacity: 1; }

/* ---- Se elige el número en el mapa (20/10, Verónica: «al terminar cada juego te debe llevar al mapa para que allí
   selecciones el siguiente número»): tu número lleva la flecha guía, justo arriba, apuntándolo (se mueve 5 s y queda);
   su hoja trae «▶ Jugar», con la flecha. Durante el pasito, la flecha espera (como el cartel). ---- */
.mapa .guiaNumero { position: absolute; left: 50%; transform: translate(-50%, -100%); z-index: 2; gap: 0; }
.mapa .guiaNumero svg { width: 30px; height: 36px; }
.mapa.antes .guiaNumero { opacity: 0; }
.mapa.anda .guiaNumero { transition: opacity .3s ease-out .45s, left .6s ease-in-out, top .6s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .mapa.anda .guiaNumero { transition: none; } }
/* la hoja: «▶ Jugar» con la flecha encima (deja su lugar) y, debajo, en chico, cuántas quedan hoy */
.hoja .boton.conGuia { position: relative; margin-top: 44px; text-decoration: none; display: grid; place-items: center; line-height: 1.2; }
.hoja .boton.conGuia .guiaFin { top: -48px; }
.hoja .boton small { display: block; margin-top: 2px; font-size: var(--chica); font-weight: 700; opacity: .9; }
/* sin botón principal abajo (con bajadas, lo principal es tu número): la franja, más baja */
.mapaFin .pie-mapa.sinPrincipal { margin-top: -24px; padding-top: 24px; }

/* volver al nivel 1, sólo en los aparatos de la fundadora (20/10, «Quiero reiniciar en el nivel 1»): chico, al pie */
.volverAlUno { display: block; margin: 14px auto 0; }
/* en el nivel de ahora, la marca («Difícil», «⏱ Contra reloj») ya la dice el cartel de «Estás acá», que la tapaba (20/10) */
.nivel.actual > .marca { display: none; }
/* el huevo ganado (26/10, «Tu laguna»): su pintura al lado de la línea */
.mapaFin .resultado .huevoGanado { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---- La laguna de hoy (27/10, Verónica, al boceto: «Hacelo»; mapa.html): arriba del camino, con la flecha en su botón
   mientras no se jugó hoy ---- */
.lagunaHoy { display: grid; grid-template-columns: 52px 1fr; gap: 6px 12px; align-items: center; margin: 4px 0 12px; padding: 12px;
  border-radius: var(--radio); background: var(--superficie); border: 2px solid var(--amarillo); }
.lagunaHoy.jugada { border-color: var(--borde); }
.lagunaHoy img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #c9982e; }
.lagunaHoy .textos { display: grid; gap: 2px; }
.lagunaHoy .textos b { font: 800 var(--titulo)/1.15 Bitter, Georgia, serif; }
.lagunaHoy .textos span { color: var(--suave); font-size: var(--chica); }
.lagunaHoy .boton { grid-column: 1 / -1; text-decoration: none; display: grid; place-items: center; text-align: center; }
.lagunaHoy .boton.conGuia { position: relative; margin-top: 44px; }
.lagunaHoy .boton.conGuia .guiaFin { top: -48px; }
/* sin jugar, queda a la vista aunque el mapa abra bajado hasta tu número: pegada debajo de la cabecera (mapa.html mide
   su alto en --altoCabecera) */
.lagunaHoy:not(.jugada) { position: sticky; top: var(--altoCabecera, 64px); z-index: 9; box-shadow: 0 8px 16px var(--fondo); }

/* ---- «Tu laguna» (26/10, Verónica, al boceto: «hacelo»; laguna.js): al pasar un nivel, una línea que se toca con lo que
   llegó («Llegó una mojarra a tu laguna») y, al tocarla, tu laguna entera, en una capa como la hoja de un número ---- */
.mapaFin .resultado .llegoLaguna { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  margin: 2px 0; padding: 4px 14px; border-radius: 999px; border: 2px solid var(--borde-toca); background: var(--superficie);
  color: var(--texto); font: 800 var(--chica)/1.25 system-ui, -apple-system, sans-serif; cursor: pointer; text-align: left; }
.mapaFin .resultado .llegoLaguna img { width: 44px; height: 32px; object-fit: contain; flex: none; }
.mapaFin .resultado .llegoLaguna .ver { margin-left: auto; color: var(--amarillo); white-space: nowrap; }
.mapaFin .resultado .llegoLaguna:active { transform: scale(.98); }
.capaLaguna { position: fixed; inset: 0; z-index: 36; display: flex; justify-content: center; background: var(--fondo); }
.capaLaguna .columna { width: 100%; max-width: 430px; height: 100%; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 0; }
.capaLaguna .cabezaLaguna { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.capaLaguna .cabezaLaguna h2 { margin: 0; font: 800 var(--titulo)/1.2 Bitter, Georgia, serif; }
.capaLaguna .cabezaLaguna .cerrar { width: auto; padding-inline: 20px; }
/* la laguna pintada, a lo ancho y recortada abajo (780 × 1000 de los 780 × 1200: laguna.js): lo más ancha que entre con
   lo de abajo a la vista; con la letra grande no baja de 240 de ancho y la columna se baja con el dedo */
.escenaLaguna { position: relative; flex: none; align-self: center; aspect-ratio: 780 / 1000; overflow: hidden;
  width: min(100%, max(240px, calc((100dvh - 330px) * 0.78)));
  border-radius: var(--radio, 18px); background: url('dibujos/fondo_laguna.webp') 50% 0 / 100% auto no-repeat #0e3a35; box-shadow: 0 6px 20px #0008; }
.escenaLaguna img { position: absolute; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* los árboles de enfrente, lejos: chicos, apagados y con el aire de la tarde, como los de la pintura (29/10, «muy artificial») */
.escenaLaguna .lejos { filter: saturate(.45) brightness(.72) contrast(.85) sepia(.18) hue-rotate(-12deg) blur(.3px); opacity: .92; }
/* lo que nada: lo mueve laguna.js (nadar), cuadro por cuadro; escondido hasta el primero */
.escenaLaguna .nada { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; }
.escenaLaguna .nada > img { left: 0; top: 0; width: 100%; height: 100%; }
/* el fondo de piedras de la pintura, en una franja abajo (29/10, «está algo básico»: el agua ya no termina en la nada) */
.escenaLaguna::after { content: ''; position: absolute; inset: auto 0 0; height: 13%; pointer-events: none;
  background: url('dibujos/fondo_laguna.webp') 50% 100% / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
/* el yacaré a flor de agua: arriba, entero; lo que queda abajo del agua, apenas, a través del agua */
.escenaLaguna .yacare { -webkit-mask-image: linear-gradient(#000 0 44%, #0008 52%, #0004 100%); mask-image: linear-gradient(#000 0 44%, #0008 52%, #0004 100%); }
/* lo que flota, al ras del agua: lo de abajo de la línea del agua, a través del agua */
.escenaLaguna .flota { filter: brightness(.9) saturate(.88) drop-shadow(0 2px 3px #0005);
  -webkit-mask-image: linear-gradient(#000 0 60%, #000b 68%, #0006 100%); mask-image: linear-gradient(#000 0 60%, #000b 68%, #0006 100%); }
.escenaLaguna .rana, .escenaLaguna .yacare { filter: brightness(.9) saturate(.9) drop-shadow(0 2px 3px #0005); }
/* donde el yacaré comió (30/10; laguna.js, ondas): las ondas, anillos chatos, como se ve el agua casi de costado, y las
   gotas que saltan */
.escenaLaguna .onda { position: absolute; width: 36%; aspect-ratio: 12; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid #f4fbfce6; box-shadow: 0 2px 0 #0a3c3c73, inset 0 -1px 0 #0a3c3c4d; }
.escenaLaguna .burbuja { position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 1px solid #e6fafabf; background: radial-gradient(circle at 35% 30%, #ffffffb3, #c8ebeb26 60%, #0000); }
.escenaLaguna .gota { position: absolute; width: 1%; aspect-ratio: 1; margin: -0.5% 0 0 -0.5%; border-radius: 50%; pointer-events: none;
  opacity: 0; background: radial-gradient(circle at 40% 40%, #ffffffeb, #e2f2f4b3 60%, #a9d2d400); }
/* las de la orilla se hunden en el agua (sin el pie cortado a la vista: la auditoría del 29/10) */
.escenaLaguna .orilla { filter: brightness(.8) saturate(.75); -webkit-mask-image: linear-gradient(#000 80%, #0000 100%); mask-image: linear-gradient(#000 80%, #0000 100%); }
/* lo que llegó recién: un brillo quieto alrededor (sin moverse: regla de diseño 3) */
.escenaLaguna .nuevo:not(.nada) { filter: drop-shadow(0 0 4px #ffd23f) drop-shadow(0 0 10px #ffd23fb3); }
.capaLaguna .cuentaLaguna { flex: none; display: grid; gap: 2px; text-align: center; }
.capaLaguna .cuentaLaguna p { margin: 0; }
.capaLaguna .cuentaLaguna .cuantos { font-weight: 800; font-size: var(--letra); }
.capaLaguna .cuentaLaguna .linea { color: var(--suave); font-size: var(--chica); }
/* «▶ Jugar», pegado abajo: siempre a la vista, aunque la letra grande haga bajar la columna (regla de diseño 5) */
.capaLaguna .pieLaguna { position: sticky; bottom: 0; flex: none; margin: auto -12px 0; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--fondo); z-index: 2; }
.capaLaguna .boton.conGuia { position: relative; }
.capaLaguna .boton.conGuia .guiaFin { top: -48px; }
.capaLaguna .cuentaLaguna { margin-bottom: 44px; } /* (el lugar de la flecha, encima de «▶ Jugar») */