:root{
  --cream:#FBF7EF;
  --card:#FFFFFF;
  --sky:#8FCBE0;
  --sky-deep:#4F9DB8;
  --leaf:#8FBF8A;
  --sun:#F4C05A;
  --coral:#E9967E;
  --ink:#3A3A4A;
  --ink-soft:#6B6B7B;
  --radius-lg:32px;
  --radius-md:20px;
  --focus:#2E6E86;
}

*{box-sizing:border-box;}

html,body{ margin:0; height:100%; }

body{
  background:var(--cream);
  font-family:'Quicksand',sans-serif;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- Header ---------- */
header{
  width:100%;
  max-width:720px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 8px;
}

.titulo{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:clamp(20px,5vw,28px);
  color:var(--sky-deep);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}

.titulo .globo{ font-size:1.2em; }

.btn-icono{
  width:56px; height:56px;
  border-radius:50%;
  border:none;
  background:var(--card);
  box-shadow:0 3px 0 rgba(0,0,0,0.06);
  font-size:26px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--ink-soft);
}
.btn-icono:focus-visible, button:focus-visible, .punto:focus-visible, a:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}
.btn-icono[aria-pressed="true"]{ background:var(--sun); color:#5b4416; }

.header-iconos{ display:flex; gap:10px; }

a.btn-icono{ text-decoration:none; }

/* ---------- Progreso ---------- */
.progreso{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  max-width:640px; padding:4px 16px 6px;
}
.punto{
  width:16px;height:16px;border-radius:50%;
  background:#E3DDD0; border:none; padding:0; cursor:pointer;
}
.punto.hecho{ background:var(--leaf); }
.punto.actual{ background:var(--sky-deep); transform:scale(1.3); }

/* ---------- Escenario principal ---------- */
main{
  flex:1; width:100%; max-width:520px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12px 20px 24px;
}

.tarjeta{
  width:100%;
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 0 rgba(0,0,0,0.05);
  padding:36px 24px 28px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  position:relative;
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
  cursor:grab;
  will-change:transform;
}
.tarjeta:active{ cursor:grabbing; }

/* ---------- Visual del elemento (bandera / emoji / color / letra / número) ---------- */
#visual{
  display:flex; align-items:center; justify-content:center;
  min-height:170px;
  margin-bottom:6px;
}

.visual-imagen{
  width:min(70vw,260px); height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,0.12), 0 0 0 6px #fff, 0 0 0 8px #EDE6D6;
  background:#EDE6D6;
}

.visual-emoji{
  font-size:min(34vw,150px);
  line-height:1;
}

.visual-color{
  width:min(52vw,190px); height:min(52vw,190px);
  border-radius:28px;
  box-shadow:0 4px 14px rgba(0,0,0,0.12), 0 0 0 6px #fff, 0 0 0 8px #EDE6D6;
}

.visual-letra{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:min(34vw,140px);
  color:var(--sky-deep);
  line-height:1;
}

.visual-numero-contenedor{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.puntos-conteo{
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center; max-width:230px;
}
.punto-conteo{
  width:15px; height:15px; border-radius:50%; background:var(--sun);
}

.nombre-pais{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:clamp(28px,7vw,40px);
  color:var(--ink);
  margin:6px 0 0;
}

.continente{
  font-size:16px;
  color:var(--ink-soft);
  margin:2px 0 18px;
  font-weight:600;
}

/* ---------- Botones de pronunciación ---------- */
.pronunciar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:4px;
}

.btn-escuchar{
  width:104px; height:104px;
  border-radius:50%;
  border:none;
  background:var(--sky);
  box-shadow:0 6px 0 var(--sky-deep);
  font-size:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:#fff;
  transition:transform 0.08s ease;
}
.btn-escuchar:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--sky-deep); }

.btn-escuchar-chico{
  display:flex; align-items:center; gap:8px;
  padding:14px 20px;
  border:none;
  border-radius:999px;
  background:var(--sky);
  color:#fff;
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:15px;
  box-shadow:0 5px 0 var(--sky-deep);
  cursor:pointer;
}
.btn-escuchar-chico:nth-of-type(2){
  background:var(--leaf);
  box-shadow:0 5px 0 #6FA069;
}
.btn-escuchar-chico:active{ transform:translateY(4px); box-shadow:none; }

.btn-escuchar.hablando, .btn-escuchar-chico.hablando{
  animation:pulso 0.9s ease-in-out infinite;
}
@keyframes pulso{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

.pista-escuchar{
  margin-top:12px;
  font-size:15px;
  color:var(--ink-soft);
  font-weight:600;
}

.estrella-flotante{
  position:absolute; top:14px; right:18px; font-size:28px; opacity:0;
}
.estrella-flotante.mostrar{ animation:aparecer 1.2s ease forwards; }
@keyframes aparecer{
  0%{ opacity:0; transform:translateY(6px) scale(0.7); }
  25%{ opacity:1; transform:translateY(-4px) scale(1.1); }
  70%{ opacity:1; transform:translateY(-4px) scale(1); }
  100%{ opacity:0; transform:translateY(-14px) scale(1); }
}

/* ---------- Deslizar para avanzar ---------- */
.pista-deslizar{
  width:100%; max-width:520px; text-align:center;
  padding:2px 20px 26px; color:var(--ink-soft); font-weight:600; font-size:15px;
}
.flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:26px; color:#DCD4C2; pointer-events:none;
}
.flecha-izq{ left:8px; }
.flecha-der{ right:8px; }

/* ---------- Pantallas de inicio y cierre ---------- */
.pantalla{
  width:100%; max-width:480px; text-align:center; padding:20px 24px;
}
.pantalla .globo-grande{ font-size:88px; display:block; margin-bottom:8px; }
.pantalla h1{
  font-family:'Baloo 2',sans-serif;
  color:var(--sky-deep);
  font-size:clamp(26px,7vw,36px);
  margin:0 0 10px;
}
.pantalla p{ color:var(--ink-soft); font-size:17px; line-height:1.5; margin:0 0 26px; }

.btn-grande{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:22px;
  color:#fff;
  background:var(--sky-deep);
  border:none;
  border-radius:999px;
  padding:18px 46px;
  box-shadow:0 6px 0 #366e82;
  cursor:pointer;
}
.btn-grande:active{ transform:translateY(4px); box-shadow:none; }

.estrellas-final{ font-size:40px; margin:6px 0 20px; letter-spacing:4px; }

.volver-menu{ margin-top:6px !important; }
.volver-menu a{
  color:var(--ink-soft);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  border-bottom:2px solid transparent;
}
.volver-menu a:hover, .volver-menu a:focus-visible{ border-bottom-color:var(--sky-deep); }

.oculto{ display:none !important; }

footer{ padding-bottom:14px; font-size:12px; color:#B9B2A2; }

/* ---------- Menú principal ---------- */
.menu-encabezado{
  text-align:center;
  padding:36px 24px 8px;
  max-width:600px;
}
.menu-encabezado .globo-grande{ font-size:80px; display:block; margin-bottom:6px; }
.menu-encabezado h1{
  font-family:'Baloo 2',sans-serif;
  color:var(--sky-deep);
  font-size:clamp(28px,7vw,38px);
  margin:0 0 8px;
}
.menu-encabezado p{ color:var(--ink-soft); font-size:16px; margin:0; }

.menu-grid{
  width:100%;
  max-width:640px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  padding:24px 24px 40px;
}

.menu-tarjeta{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:0 7px 0 rgba(0,0,0,0.06);
  padding:28px 18px 22px;
  text-decoration:none;
  color:var(--ink);
  transition:transform 0.08s ease;
}
.menu-tarjeta:active{ transform:translateY(5px); box-shadow:0 2px 0 rgba(0,0,0,0.06); }

.menu-tarjeta .icono{ font-size:64px; margin-bottom:4px; }
.menu-tarjeta .nombre{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:20px;
}
.menu-tarjeta .detalle{
  font-size:14px;
  color:var(--ink-soft);
  font-weight:600;
}