/* Expedición 2038 — estilos del juego. Complementa css/udea.css (paleta y tipografías del manual v8). */

/* ───────── Mascota: estados animados a partir de data-estado ───────── */

.mascota { display: block; overflow: visible; }
.mascota * { transform-box: view-box; }

.mascota__figura { transform-origin: 116px 262px; }
.mascota__cuerpo, .mascota__cabeza { transform-origin: 116px 262px; }
.mascota__brazo--izq { transform-origin: 70px 178px; }
.mascota__brazo--der { transform-origin: 162px 178px; }
.mascota__ojo--izq .mascota__parpado { transform-origin: 92px 98px; }
.mascota__ojo--der .mascota__parpado { transform-origin: 140px 98px; }
.mascota__parpado { transform: scaleY(0); }
.mascota__boca--abierta { opacity: 0; }
.mascota__confeti { opacity: 0; }
.mascota__cola { transform-origin: 152px 226px; }
.mascota__papada { transform-origin: 116px 140px; }

/* Reposo: respira y parpadea */
.mascota[data-estado] .mascota__figura { animation: mascota-respirar 3.6s ease-in-out infinite; }
.mascota[data-estado] .mascota__parpado { animation: mascota-parpadear 5.2s linear infinite; }
.mascota[data-estado] .mascota__cola { animation: mascota-cola 4.4s ease-in-out infinite; }

/* Saludo: el brazo derecho se agita */
.mascota[data-estado="saludo"] .mascota__brazo--der { animation: mascota-saludar 1.1s ease-in-out infinite; }

/* Hablar: la boca se abre y cierra, y la papada acompaña con un leve vaivén */
.mascota[data-estado="hablar"] .mascota__boca--abierta { animation: mascota-boca .28s steps(1) infinite; }
.mascota[data-estado="hablar"] .mascota__boca--cerrada { animation: mascota-boca-inversa .28s steps(1) infinite; }
.mascota[data-estado="hablar"] .mascota__papada { animation: mascota-papada .56s ease-in-out infinite; }

/* Pensar: mano al mentón, mirada arriba */
/* La mano derecha sube a la mejilla (el brazo derecho se dibuja sobre el cuerpo y bajo la cabeza). */
.mascota[data-estado="pensar"] .mascota__brazo--der { transform: rotate(-135deg); }
.mascota[data-estado="pensar"] .mascota__pupila { transform: translate(3px, -6px); }
.mascota[data-estado="pensar"] .mascota__boca--cerrada { d: path("M 100 136 q 16 -6 32 2"); }

/* Celebrar: salta con los brazos arriba, la cola sacude con más fuerza y cae confeti */
.mascota[data-estado="celebrar"] .mascota__figura { animation: mascota-saltar .9s cubic-bezier(.3, .8, .3, 1) infinite; }
.mascota[data-estado="celebrar"] .mascota__cola { animation: mascota-cola-festejo .5s ease-in-out infinite; }
.mascota[data-estado="celebrar"] .mascota__brazo--izq { transform: rotate(150deg); }
.mascota[data-estado="celebrar"] .mascota__brazo--der { transform: rotate(-150deg); }
.mascota[data-estado="celebrar"] .mascota__boca--abierta { opacity: 1; }
.mascota[data-estado="celebrar"] .mascota__boca--cerrada { opacity: 0; }
.mascota[data-estado="celebrar"] .mascota__confeti { opacity: 1; }
.mascota[data-estado="celebrar"] .mascota__confeti rect {
  transform-origin: center;
  animation: mascota-confeti 1.6s ease-in infinite;
  animation-delay: calc(var(--k) * -.2s);
}

.mascota__brazo, .mascota__pupila, .mascota__boca { transition: transform .35s ease, opacity .2s ease; }

@keyframes mascota-respirar { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }
@keyframes mascota-parpadear { 0%, 91%, 100% { transform: scaleY(0); } 93.5%, 96% { transform: scaleY(1); } }
@keyframes mascota-cola { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes mascota-cola-festejo { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(16deg); } }
@keyframes mascota-papada { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.1); } }
@keyframes mascota-saludar { 0%, 100% { transform: rotate(-120deg); } 50% { transform: rotate(-150deg); } }
@keyframes mascota-boca { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes mascota-boca-inversa { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mascota-saltar { 0%, 100% { transform: translateY(0) scale(1.02, .98); } 40% { transform: translateY(-22px) scale(.98, 1.04); } 60% { transform: translateY(-22px) scale(.98, 1.04); } }
@keyframes mascota-confeti { 0% { transform: translateY(-30px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(150px) rotate(320deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mascota * { animation: none !important; transition: none !important; }
  .mascota[data-estado="saludo"] .mascota__brazo--der { transform: rotate(-135deg); }
  .mascota[data-estado="hablar"] .mascota__boca--abierta { opacity: 1; }
  .mascota[data-estado="hablar"] .mascota__boca--cerrada { opacity: 0; }
  .mascota[data-estado="celebrar"] .mascota__confeti { opacity: .6; }
}

/* ───────── Página de muestra (hito 1) ───────── */

.muestra { max-width: var(--ancho-cabecera); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.muestra h1 { font-family: var(--slab); color: var(--verde); font-size: 2rem; margin: 0 0 .25rem; }
.muestra h2 { font-family: var(--slab); color: var(--verde); font-size: 1.35rem; margin: 2.2rem 0 .8rem; border-bottom: 2px solid var(--linea); padding-bottom: .3rem; }
.muestra p.intro { color: var(--tinta-suave); max-width: 60ch; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.ficha { background: var(--superficie); border-radius: 10px; padding: 1rem .75rem .75rem; text-align: center; }
.ficha .mascota { margin: 0 auto; }
.ficha figcaption { margin-top: .5rem; font-weight: 500; color: var(--verde); }
.ficha small { display: block; color: var(--tinta-suave); font-weight: 400; font-size: .85rem; }
.nombres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.nombre { border: 2px solid var(--linea); border-radius: 10px; padding: 1rem; }
.nombre strong { font-family: var(--slab); font-size: 1.5rem; color: var(--verde); display: block; }
.nombre--recomendado { border-color: var(--verde); }
.mapa-marco { background: var(--superficie); border-radius: 12px; padding: 1rem; }
.mapa-marco svg { width: 100%; height: auto; display: block; }

/* ───────── Mapa ───────── */

.mapa__tierra { fill: #e6f1e8; stroke: var(--verde); stroke-width: 2.5; stroke-linejoin: round; }
.mapa__rio { fill: none; stroke: #9fd3c7; stroke-width: 3; stroke-linecap: round; opacity: .9; }
.mapa__mar { fill: #d6ecf3; }
.mapa__sede { fill: var(--fondo); stroke: var(--verde); stroke-width: 2.5; }
.mapa__sede--activa { fill: var(--verde); }
.mapa__medellin { fill: var(--verde); }
.mapa__rotulo { font: 500 10px/1 var(--sans); fill: var(--tinta); }
.mapa__rotulo--municipio { font-size: 8.5px; }
.mapa__rotulo--municipio { font: 400 8.5px/1 var(--sans); fill: var(--tinta-suave); }
.mapa__ruta { fill: none; stroke: var(--verde); stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; }
.mapa__lupa { fill: var(--fondo); stroke: var(--verde); stroke-width: 2; stroke-dasharray: 4 4; }
.mapa__lupa-linea { stroke: var(--verde); stroke-width: 1.5; stroke-dasharray: 3 4; }
.mapa__parada { font: 700 8.5px/1 var(--sans); fill: #ffffff; }
.mapa__meta { font: 700 13px/1 var(--slab); fill: var(--verde); }
.mapa__titulo { font: 700 14px/1 var(--slab); fill: var(--verde); }

/* ───────── Alma como guía: mascota + caja de diálogo ───────── */

.guia { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: end; margin: 1.5rem 0; }
.guia__alma { line-height: 0; }
.guia__alma .mascota { width: clamp(96px, 22vw, 190px); height: auto; }
.guia--compacta { align-items: center; margin: 1rem 0; }
.guia--compacta .guia__alma .mascota { width: clamp(72px, 14vw, 110px); }
.guia.is-plegada .dialogo__acciones { display: none; }
.guia.is-plegada { opacity: .85; }

.dialogo {
  position: relative; background: var(--fondo); border: 2px solid var(--verde); border-radius: 14px;
  padding: .9rem 1rem 1rem; min-height: 6rem; box-shadow: 0 2px 0 var(--verde);
}
.dialogo::before {                     /* pico hacia Alma */
  content: ""; position: absolute; left: -14px; bottom: 22px; width: 0; height: 0;
  border: 8px solid transparent; border-right: 14px solid var(--verde); border-left: 0;
}
.dialogo::after { content: ""; position: absolute; left: -9px; bottom: 24px; border: 6px solid transparent; border-right: 11px solid var(--fondo); border-left: 0; }
.dialogo__nombre { margin: 0 0 .25rem; font: 700 .8125rem/1 var(--slab); color: var(--verde); letter-spacing: .06em; text-transform: uppercase; }
.dialogo__texto { margin: 0; font-size: 1.0625rem; line-height: 1.55; min-height: 3.1em; }
.dialogo__acciones { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .6rem; flex-wrap: wrap; }
.dialogo__acciones .boton { min-height: 2.5rem; padding: .5rem .9rem; }
.dialogo__saltar[hidden], .dialogo__siguiente[hidden] { display: none; }

@media (max-width: 30rem) {
  .guia { grid-template-columns: 1fr; justify-items: start; }
  .dialogo::before, .dialogo::after { left: 28px; bottom: auto; top: -14px; transform: rotate(90deg); }
}

/* ───────── Inicio: puertas por estamento ───────── */

.puertas { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.puerta__enlace {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center;
  border: 2px solid var(--linea); border-radius: 12px; padding: .75rem .9rem; text-decoration: none; color: var(--tinta);
  background: var(--fondo); transition: border-color .2s ease, transform .2s ease;
}
.puerta__enlace:hover, .puerta__enlace:focus-visible { border-color: var(--verde); transform: translateY(-2px); }
.puerta__alma .mascota { width: 64px; height: auto; }
.puerta__nombre { display: block; font: 700 1.125rem/1.25 var(--slab); color: var(--verde); }
.puerta__datos { display: block; font-size: .875rem; color: var(--tinta-suave); margin-top: .2rem; }
.puerta.is-lista .puerta__enlace { background: var(--superficie); }
.nota-juego { margin-top: 2rem; font-size: .9375rem; color: var(--tinta-suave); }

/* ───────── Mapa del estamento ───────── */

.mapa-marco--juego { margin: 1.5rem 0; }
.ruta-lista { margin: 1rem 0 0; padding-left: 1.2rem; font-size: .9375rem; }
.ruta-lista li { margin: .2rem 0; }
.ruta-lista strong { color: var(--verde); font-weight: 500; }
.carta { margin: 1.5rem 0; border: 1px solid var(--linea); border-radius: 10px; padding: .75rem 1rem; }
.carta summary { cursor: pointer; font-weight: 500; color: var(--verde); }
.carta[open] summary { margin-bottom: .75rem; }

/* ───────── Estampas ───────── */

.estampas { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.estampa { display: grid; justify-items: center; gap: .35rem; width: 6.5rem; text-align: center; font-size: .8125rem; color: var(--tinta-suave); }
.estampa__sello {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 3px dashed var(--linea); display: grid; place-items: center;
  font: 700 1.1rem/1 var(--slab); color: var(--borde); background: var(--fondo); transition: transform .3s ease, background .3s ease;
}
.estampa.is-ganada .estampa__sello { border: 3px solid var(--verde); background: var(--verde); color: var(--sobre-verde); transform: rotate(-8deg); }
.estampa.is-ganada { color: var(--tinta); }
.estampa--meta.is-ganada .estampa__sello { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }

/* ───────── Paradas (progreso del nivel) ───────── */

.paradas { margin: 0 0 1.25rem; }
.paradas ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; }
.paradas ol::before { content: ""; position: absolute; left: 8%; right: 8%; top: 1rem; height: 4px; background: var(--linea); z-index: 0; }
.paradas__item { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: .15rem; }
.paradas__item a { text-decoration: none; color: inherit; display: grid; justify-items: center; gap: .15rem; }
.paradas__punto {
  width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid var(--linea); background: var(--fondo); display: grid; place-items: center;
  font: 700 .875rem/1 var(--sans); color: var(--tinta-suave);
}
.paradas__item--origen .paradas__punto { width: 1rem; height: 1rem; margin: .5rem 0; }
.paradas__anio { font: 700 .8125rem/1 var(--slab); color: var(--tinta-suave); }
.paradas__nombre { font-size: .75rem; color: var(--tinta-suave); line-height: 1.2; }
.paradas__item.is-hecha .paradas__punto { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.paradas__item.is-actual .paradas__punto { border-color: var(--verde); color: var(--verde); box-shadow: 0 0 0 4px var(--superficie); }
.paradas__item.is-actual .paradas__anio, .paradas__item.is-actual .paradas__nombre { color: var(--verde); font-weight: 700; }
@media (max-width: 30rem) { .paradas__nombre { display: none; } }

/* ───────── Nivel: escena de la sede ───────── */

.nivel__cabecera { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.nivel__escena { line-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); }
.nivel__escena .escena { width: 100%; height: auto; display: block; aspect-ratio: 2 / 1; }
.nivel__datos h1 { margin: .15rem 0 0; font-size: 1.75rem; }
.nivel__municipio { margin: .1rem 0 0; color: var(--tinta-suave); }
@media (min-width: 44rem) { .nivel__cabecera { grid-template-columns: 22rem 1fr; align-items: center; } }

/* ───────── Retos ───────── */

.reto { background: var(--superficie); border-radius: 14px; padding: 1.25rem 1rem 1rem; margin: 1rem 0; }
.reto__titulo { margin: .25rem 0 .25rem; font-size: 1.5rem; }
.reto__pista { margin: 0 0 1rem; color: var(--tinta-suave); }
.reto__cuerpo { display: grid; justify-items: center; gap: .75rem; }
.reto__estado { margin: .75rem 0 0; min-height: 1.4em; font-weight: 500; color: var(--verde); text-align: center; }
.reto__cuenta { margin: 0; font-size: .9375rem; color: var(--tinta-suave); }
.reto__escena { width: 100%; max-width: 40rem; border-radius: 12px; overflow: hidden; border: 2px solid var(--fondo); line-height: 0; }
.reto__escena .escena { width: 100%; height: auto; }
.escena__iguana { cursor: pointer; outline: none; }
.escena__iguana:focus-visible path:first-child { stroke: var(--naranja); stroke-width: 3; }
.escena__iguana.is-hallada path:first-child { fill: var(--naranja); }
.escena__iguana.is-hallada { animation: iguana-hallada .5s ease; }
@keyframes iguana-hallada { 50% { transform: translateY(-6px); } }

.reto__ranuras { display: flex; gap: .5rem; }
.reto__ranura { width: 3.25rem; height: 4rem; border: 3px dashed var(--borde); border-radius: 10px; display: grid; place-items: center; font: 700 2rem/1 var(--slab); color: var(--verde); background: var(--fondo); }
.reto__ranura.is-llena { border-style: solid; border-color: var(--verde); }
.reto__fichas { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.reto__ficha { width: 3.25rem; height: 4rem; border-radius: 10px; border: 2px solid var(--verde); background: var(--fondo); font: 700 2rem/1 var(--slab); color: var(--verde); cursor: pointer; }
.reto__ficha:hover { background: var(--superficie); }
.reto__ficha[disabled] { opacity: .35; cursor: default; }
.reto__ficha.is-error { animation: ficha-error .35s ease; border-color: var(--rojo); }
@keyframes ficha-error { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.reto__alma { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; line-height: 0; }
.reto__alma:focus-visible { outline: 3px solid var(--verde); outline-offset: 6px; }
.mascota.is-dormida .mascota__parpado { transform: scaleY(1); animation: none; }
.mascota.is-dormida .mascota__figura { animation-duration: 6s; }
.mascota.is-sacudida { animation: alma-sacudida .4s ease; }
@keyframes alma-sacudida { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.reto__sueno { display: flex; gap: .25rem; font: 700 1.5rem/1 var(--slab); color: var(--verde); margin-top: -1rem; }
.reto__sueno span { animation: sueno 2.4s ease-in-out infinite; }
.reto__sueno span:nth-child(2) { animation-delay: .4s; font-size: 1.25rem; }
.reto__sueno span:nth-child(3) { animation-delay: .8s; font-size: 1rem; }
@keyframes sueno { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .escena__iguana.is-hallada, .reto__ficha.is-error, .mascota.is-sacudida, .reto__sueno span { animation: none !important; }
}