/* Página de audio para niños: selva amable, colores cálidos, texto oscuro con buen contraste. */
:root {
  --ink: #3b2a1a;
  --sun: #fff3b8;
  --leaf: #cfeeb0;
  --c1: #ffd9d4; --c2: #ffe7b8; --c3: #fff6a8; --c4: #cdeec0; --c5: #bfe6f5; --c6: #dccdf5;
  --card-line: #3b2a1a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  font-family: ui-rounded, "Nunito", "Baloo 2", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  font-size: 18px; line-height: 1.4;
  background:
    radial-gradient(circle at 8% 4%, #b9e39b 0 7%, transparent 7.2%),
    radial-gradient(circle at 96% 10%, #b9e39b 0 9%, transparent 9.2%),
    radial-gradient(circle at 2% 96%, #c9ecb0 0 10%, transparent 10.2%),
    radial-gradient(circle at 100% 92%, #c9ecb0 0 8%, transparent 8.2%),
    linear-gradient(#fff7c8, #e4f4c2);
  background-attachment: fixed; min-height: 100vh;
}
main { max-width: 620px; margin: 0 auto; padding: 18px 14px 44px; position: relative; }

h1 { margin: 6px 0 2px; font-size: 1.9rem; line-height: 1.05; text-align: center; letter-spacing: .5px; }
h1 .l { display: inline-block; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(59,42,26,.25); }
.unidad { text-align: center; margin: 14px 0 12px; font-weight: 800; font-size: 1.05rem; }
.unidad span { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; }

/* Tito */
.escena { display: grid; grid-template-columns: 1fr; gap: 10px; justify-items: center; margin: 4px 0 12px; }
.foto { width: min(58%, 215px); border: 4px solid var(--ink); border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 6px 0 rgba(59,42,26,.3); transform-origin: 50% 100%; }
.foto img { display: block; width: 100%; height: auto; }
.habla { display: flex; align-items: center; gap: 10px; width: 100%; }
.cara { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--ink); background: #fff; overflow: hidden; box-shadow: 0 4px 0 rgba(59,42,26,.3); }
.cara img { width: 100%; height: 100%; display: block; object-fit: cover; }
.globo { position: relative; flex: 1; min-height: 84px; background: #fff; border: 4px solid var(--ink); border-radius: 22px; padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 4px 0 rgba(59,42,26,.3); }
.globo::before { content: ""; position: absolute; left: -16px; top: 50%; width: 22px; height: 22px; background: #fff; border-left: 4px solid var(--ink); border-bottom: 4px solid var(--ink); transform: translateY(-50%) rotate(45deg); }
.globo .g-en { font-weight: 900; font-size: 1.45rem; line-height: 1.1; }
.globo .g-es { opacity: .8; font-size: 1rem; font-weight: 700; }

audio { width: 100%; margin: 6px 0 12px; border-radius: 999px; }
.nota { border: 3px dashed var(--ink); background: #fff; border-radius: 14px; padding: 10px 12px; margin: 8px 0; font-size: .95rem; }
.consigna { font-weight: 900; margin: 10px 2px 8px; font-size: 1.05rem; }

/* Tarjetas de palabras */
ol { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
li.card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 3px solid var(--card-line); border-radius: 18px; cursor: pointer; background: var(--bg-card, #fff); box-shadow: 0 4px 0 rgba(59,42,26,.28); transition: transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
li.card:nth-child(6n+1) { --bg-card: var(--c1); } li.card:nth-child(6n+2) { --bg-card: var(--c2); }
li.card:nth-child(6n+3) { --bg-card: var(--c3); } li.card:nth-child(6n+4) { --bg-card: var(--c4); }
li.card:nth-child(6n+5) { --bg-card: var(--c5); } li.card:nth-child(6n+6) { --bg-card: var(--c6); }
li.card .n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: .95rem; }
li.card .t { flex: 1; min-width: 0; }
li.card .en { display: block; font-weight: 900; font-size: 1.35rem; line-height: 1.15; overflow-wrap: anywhere; }
li.card .es { display: block; font-weight: 700; opacity: .8; font-size: .98rem; }
li.card .oir { flex: 0 0 auto; font-size: 1.25rem; opacity: .7; }
li.card.on { transform: scale(1.04); box-shadow: 0 7px 0 rgba(59,42,26,.4); outline: 4px solid #fff; z-index: 1; }
li.card.on .n { background: var(--ink); color: #fff; }

footer { margin-top: 20px; font-size: .82rem; text-align: center; opacity: .8; }
a { color: inherit; }
ol.menu { display: block; } ol.menu li { padding: 8px 4px; border-bottom: 2px solid rgba(59,42,26,.15); font-weight: 800; }

/* Movimiento (se apaga si el sistema pide menos movimiento) */
@keyframes rebota { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-9px) rotate(-1.5deg); } 60% { transform: translateY(0) rotate(1.5deg); } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes cae { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(360deg); opacity: .9; } }
.foto { animation: flota 3.2s ease-in-out infinite; }
.sonando .foto { animation: rebota .9s ease-in-out infinite; }
.cara.pop { animation: pop .35s ease-out; }
li.card.on { animation: pop .3s ease-out; }
.confeti { position: fixed; top: -30px; font-size: 1.6rem; pointer-events: none; animation: cae 3.2s linear forwards; z-index: 5; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (min-width: 560px) {
  .escena { grid-template-columns: 250px 1fr; align-items: center; justify-items: stretch; }
  .foto { width: 100%; }
  h1 { font-size: 2.3rem; }
}