/* ==========================================================
   Diseño "Cachorros" · Infantil (brigada de rescate, motivos genéricos)
   4 huellitas → sirena → la casita se abre → insignia con el montaje
   ========================================================== */

:root {
  --azul: #1b5aa6;
  --azul-osc: #0f3b75;
  --rojo: #e53935;
  --rojo-osc: #b71c1c;
  --amarillo: #ffd23f;
  --amarillo-osc: #e0b000;
  --tinta: #12305e;

  --s-fondo: #f1f7ff;
  --s-tinta: var(--tinta);
  --s-suave: #46608c;
  --s-acento: var(--rojo);
  --s-acento-tinta: #fff;
  --s-tarjeta: #ffffff;
  --s-borde: rgba(27, 90, 166, .22);
  --s-radio: 24px;
  --s-sombra: 0 6px 0 rgba(27, 90, 166, .14), 0 18px 26px -16px rgba(18, 48, 94, .45);
  --s-fuente: "Fredoka", system-ui, sans-serif;
  --s-titulo: "Fredoka", system-ui, sans-serif;
  --s-titulo-tam: clamp(2rem, 9vw, 2.6rem);
  --s-etiqueta: "Fredoka", system-ui, sans-serif;
  --s-num: "Fredoka", system-ui, sans-serif;
  --s-titulo-color: var(--azul);
}

body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%231b5aa6' fill-opacity='.07' transform='rotate(-20 30 30)'%3E%3Cellipse cx='30' cy='36' rx='9' ry='7.5'/%3E%3Cellipse cx='19' cy='26' rx='3.6' ry='4.8'/%3E%3Cellipse cx='26' cy='20' rx='3.6' ry='4.8'/%3E%3Cellipse cx='34' cy='20' rx='3.6' ry='4.8'/%3E%3Cellipse cx='41' cy='26' rx='3.6' ry='4.8'/%3E%3C/g%3E%3Cg fill='%23e53935' fill-opacity='.06' transform='rotate(18 90 90)'%3E%3Cellipse cx='90' cy='96' rx='9' ry='7.5'/%3E%3Cellipse cx='79' cy='86' rx='3.6' ry='4.8'/%3E%3Cellipse cx='86' cy='80' rx='3.6' ry='4.8'/%3E%3Cellipse cx='94' cy='80' rx='3.6' ry='4.8'/%3E%3Cellipse cx='101' cy='86' rx='3.6' ry='4.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px,
    var(--s-fondo);
  color: var(--tinta);
  font-family: var(--s-fuente);
}

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Parque (HERO) ---------- */
.base {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  text-align: center;
  color: var(--tinta);
  background: linear-gradient(180deg, #8ec8ff 0%, #c9e5ff 55%, #eaf5ff 78%);
}
.nube { position: absolute; height: 24px; border-radius: 24px; background: #fff; opacity: .9; animation: nube 46s linear infinite; }
.nube::before, .nube::after { content: ""; position: absolute; bottom: 8px; border-radius: 50%; background: #fff; }
.nube::before { left: 14%; width: 40%; height: 180%; }
.nube::after { left: 46%; width: 34%; height: 140%; }
.nube--1 { top: 9%; left: 6%; width: 100px; }
.nube--2 { top: 19%; left: 60%; width: 76px; animation-duration: 60s; animation-delay: -24s; }
.nube--3 { top: 30%; left: 30%; width: 60px; animation-duration: 52s; animation-delay: -38s; opacity: .7; }
@keyframes nube { from { translate: -40vw 0; } to { translate: 60vw 0; } }

.torre { position: absolute; left: 1%; bottom: 14svh; z-index: 1; height: min(38svh, 300px); width: auto; aspect-ratio: 120 / 260; overflow: visible; transition: transform 1s ease, opacity 1s ease; }
.torre__haz { opacity: .35; transform-box: view-box; transform-origin: 88px 62px; animation: haz 3s ease-in-out infinite alternate; }
@keyframes haz { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.base.revelado .torre { transform: translateX(-35%); opacity: .55; }
.pasto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18svh;
  border-radius: 50% 50% 0 0 / 26px 26px 0 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .28) 0 2.5px, transparent 3.5px) 0 0 / 44px 30px,
    linear-gradient(180deg, #7ccf5b, #55ad3c);
}
.hueso { position: absolute; z-index: 2; width: 50px; height: auto; filter: drop-shadow(0 3px 2px rgba(18, 48, 94, .25)); }
.hueso--1 { left: 7%; bottom: 5svh; transform: rotate(-18deg); }
.hueso--2 { right: 8%; bottom: 10svh; transform: rotate(14deg); width: 42px; }
.hueso--3 { right: 26%; bottom: 2.5svh; transform: rotate(-6deg); width: 34px; }

/* Casita de perro */
.casita {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 4svh);
  z-index: 2;
  width: clamp(180px, 54vw, 280px);
  transform: translateX(-50%);
  perspective: 600px;
  transition: transform 1s cubic-bezier(.5, 0, .3, 1) .9s;
}
.casita__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 10px rgba(18, 48, 94, .25)); }
.casita__puerta { position: absolute; left: 36.364%; top: 55%; width: 27.273%; height: 41%; transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.5, 0, .2, 1); }
.casita__puerta svg { display: block; width: 100%; height: 100%; }
.casita.abierta .casita__puerta { transform: rotateY(-115deg); }
.base.revelado .casita { transform: translateX(-50%) translateY(42%) scale(.88); }
.luz { transition: opacity .2s; }
.base.alarma .luz--roja { animation: parpadeo .5s steps(1, end) infinite; }
.base.alarma .luz--azul { animation: parpadeo .5s steps(1, end) infinite -.25s; }
@keyframes parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }

/* ---------- Intro: alerta y huellitas ---------- */
.rastro-intro {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 5svh);
  left: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: opacity .5s ease;
}
.base.alarma .rastro-intro, .base.revelado .rastro-intro { opacity: 0; pointer-events: none; }
.rastro-intro__alerta {
  margin: 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  border: 3px solid #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 var(--rojo-osc), 0 8px 14px rgba(18, 48, 94, .25);
  animation: latido 1.3s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.rastro-intro__t { margin: 6px 0 0; font-weight: 700; font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.1; color: var(--azul); text-shadow: 0 3px 0 #fff; }
.rastro-intro__d { margin: 0; font-weight: 600; font-size: .98rem; color: var(--tinta); }
.contador { display: flex; gap: 8px; margin-top: 4px; }
.contador__h { width: 32px; height: 32px; padding: 5px; border-radius: 50%; background: rgba(27, 90, 166, .35); transition: background-color .3s, transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.contador__h.lleno { background: var(--rojo); transform: scale(1.15); }

.rastro { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.huellita {
  all: unset;
  position: absolute;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transform: scale(0) rotate(var(--r));
  transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.8, .5, 1);
  -webkit-tap-highlight-color: transparent;
}
.huellita--1 { left: 25%; top: 37%; --r: 100deg; }
.huellita--2 { left: 72%; top: 46%; --r: -100deg; }
.huellita--3 { left: 30%; top: 55%; --r: 100deg; }
.huellita--4 { left: 68%; top: 63%; --r: 150deg; }
.huellita__svg { width: 66%; height: auto; filter: drop-shadow(0 3px 0 rgba(255, 255, 255, .9)); }
.huellita.ver { opacity: 1; transform: scale(1) rotate(var(--r)); pointer-events: auto; }
.huellita.ver::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 4px solid var(--amarillo); animation: onda 1.4s ease-out infinite; }
@keyframes onda { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.huellita:focus-visible { outline: 3px dashed var(--rojo); outline-offset: 2px; }
.huellita.tocada { pointer-events: none; opacity: .5; animation: rebota .6s cubic-bezier(.3, 1.8, .5, 1); }
.huellita.tocada::before { display: none; }
@keyframes rebota {
  0% { transform: scale(1) rotate(var(--r)); }
  30% { transform: translateY(-14px) scale(1.45) rotate(var(--r)); }
  60% { transform: scale(.88) rotate(var(--r)); }
  100% { transform: scale(1) rotate(var(--r)); }
}
.base.alarma .huellita, .base.revelado .huellita { opacity: 0; }
.guau {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 6px 14px;
  border-radius: 18px;
  background: #fff;
  color: var(--rojo);
  font-weight: 700;
  font-size: 1.35rem;
  white-space: nowrap;
  box-shadow: 0 6px 12px rgba(18, 48, 94, .25);
  transform: translate(-50%, -165%) scale(0);
  transition: transform .25s cubic-bezier(.3, 1.8, .5, 1);
}
.guau::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -6px; border: 6px solid transparent; border-top: 9px solid #fff; border-bottom: 0; }
.guau.ver { transform: translate(-50%, -165%) scale(1) rotate(-6deg); }

/* Luces de sirena */
.sirena { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .3s; }
.sirena::before, .sirena::after { content: ""; position: absolute; inset: 0; }
.sirena::before { background: radial-gradient(75% 60% at 0% 35%, rgba(229, 57, 53, .6), transparent 72%); }
.sirena::after { background: radial-gradient(75% 60% at 100% 35%, rgba(27, 90, 166, .65), transparent 72%); }
.base.alarma .sirena { opacity: 1; }
.base.alarma .sirena::before { animation: luzRoja .6s steps(1, end) infinite; }
.base.alarma .sirena::after { animation: luzAzul .6s steps(1, end) infinite; }
@keyframes luzRoja { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .08; } }
@keyframes luzAzul { 0%, 49% { opacity: .08; } 50%, 100% { opacity: 1; } }

/* ---------- Misión (contenido del HERO) ---------- */
.mision {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 96px);
  pointer-events: none;
}
.base.listo .mision { pointer-events: auto; }
.mision > * { opacity: 0; }
.mision__brigada { margin: 0; padding: 5px 14px; border-radius: 999px; background: var(--azul); color: #fff; font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.mision__nombre {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: clamp(3rem, 15vw, 4.4rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 4px 0 var(--azul), 0 8px 0 var(--azul-osc), 0 12px 16px rgba(18, 48, 94, .3);
  overflow-wrap: anywhere;
}
.mision__nombre:focus { outline: none; }
.mision__cumple { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.25rem; color: var(--azul); }
.mision__cumple b { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--amarillo); color: var(--azul); font-size: 1.9rem; box-shadow: 0 4px 0 var(--amarillo-osc); }
.insignia-zona { position: relative; width: clamp(180px, min(70vw, calc((100svh - 350px) / 1.36)), 300px); margin: 44px 0 8px; flex: none; }
.insignia { position: relative; margin: 0; }
.insignia__escudo {
  padding: 10px;
  border-radius: 26px 26px 50% 50% / 26px 26px 36% 36%;
  background: linear-gradient(180deg, #ffe066, #f5b800);
  box-shadow: 0 0 0 6px var(--azul), 0 0 0 11px #fff, 0 0 0 15px var(--rojo), 0 24px 26px -6px rgba(18, 48, 94, .45);
}
.insignia__escudo img { display: block; width: 100%; aspect-ratio: 9 / 11; object-fit: cover; object-position: 50% 30%; border-radius: 18px 18px 50% 50% / 18px 18px 36% 36%; background: #dbeafe; }
.insignia__medalla {
  position: absolute;
  left: 50%;
  top: -44px;
  z-index: 2;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3f86d6, var(--azul));
  border: 5px solid #fff;
  box-shadow: 0 0 0 4px var(--rojo), 0 6px 10px rgba(18, 48, 94, .3);
}
.insignia__huella { width: 62%; height: auto; }
.insignia__estrella { position: absolute; top: -18px; width: 30px; aspect-ratio: 1; background: var(--amarillo); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.insignia__estrella--izq { left: 12%; transform: rotate(-14deg); }
.insignia__estrella--der { right: 12%; transform: rotate(14deg); }
.insignia__cinta {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 14%;
  z-index: 2;
  padding: 8px 22px;
  background: var(--rojo);
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.05rem, 5vw, 1.35rem);
  text-shadow: 0 2px 0 var(--rojo-osc);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  transform: rotate(-3deg);
}
.personaje {
  position: absolute;
  right: -24%;
  bottom: -10%;
  z-index: 4;
  width: 54%;
  height: auto;
  filter: drop-shadow(0 10px 10px rgba(18, 48, 94, .35));
  opacity: 0;
  transform: translateY(40%) scale(.5);
  transform-origin: 50% 100%;
}
.mision__fecha { margin: 12px 0 0; padding: 5px 16px; border-radius: 999px; background: #fff; color: var(--azul); font-weight: 700; box-shadow: 0 4px 0 rgba(27, 90, 166, .25); }
.mision__fecha [data-pieza="semana"] { text-transform: capitalize; }

.base.revelado .mision__brigada { animation: aparecer .5s ease .1s both; }
.base.revelado .mision__nombre { animation: rebote .8s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
.base.revelado .mision__cumple { animation: rebote .7s cubic-bezier(.3, 1.6, .5, 1) .55s both; }
.base.revelado .insignia-zona { opacity: 1; }
.base.revelado .mision__fecha { animation: aparecer .6s ease 1.1s both; }
.base.revelado .personaje { animation: salto 1s linear 1.4s forwards; }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rebote { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes salto {
  0% { opacity: 0; transform: translateY(40%) scale(.5); }
  35% { opacity: 1; transform: translateY(-16%) scale(1.04, .96); }
  60% { transform: translateY(3%) scale(.97, 1.04); }
  80% { transform: translateY(-3%) scale(1.01, .99); }
  100% { opacity: 1; transform: none; }
}

.base .desliza-c { color: var(--azul); z-index: 7; }

/* ---------- Secciones ---------- */
.reporte-sec { padding-top: 80px; }
.reporte {
  width: min(100%, 380px);
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 4px var(--azul), 0 20px 30px -16px rgba(18, 48, 94, .5);
}
.reporte__cabeza { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; background: var(--azul); }
.reporte__huella { width: 30px; height: 30px; flex: none; }
.reporte__t { margin: 0; font-weight: 700; font-size: 1.3rem; color: #fff; }
.reporte__foto { width: 140px; aspect-ratio: 9 / 11; margin: 22px auto 0; padding: 6px; border-radius: 16px 16px 50% 50% / 16px 16px 30% 30%; background: var(--amarillo); box-shadow: 0 0 0 4px var(--rojo); }
.reporte__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 12px 12px 50% 50% / 12px 12px 30% 30%; }
.reporte__p { margin: 0; padding: 18px 24px 24px; font-size: 1.07rem; line-height: 1.65; }

.s-titulo { font-weight: 700; text-shadow: 0 3px 0 var(--amarillo); }
.s-cuenta__caja { border: 0; background: var(--azul); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25), 0 6px 0 var(--azul-osc); }
.s-cuenta__caja:nth-child(even) { background: var(--rojo); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25), 0 6px 0 var(--rojo-osc); }
.s-cuenta__num { font-weight: 700; color: #fff; }
.s-cuenta__lbl { color: var(--amarillo); }
.s-cuenta__fin { font-weight: 700; color: var(--rojo); }
.s-evento { border: 4px solid var(--azul); }
.s-evento__icono { color: var(--azul); background: var(--amarillo); border: 3px solid var(--azul); }
.s-evento__hora { font-weight: 700; color: var(--rojo); }
.s-vestimenta__tipo { font-weight: 700; font-size: 1.45rem; color: var(--rojo); }
.s-paleta li { border: 2px solid var(--azul); }
.s-rsvp__saludo { font-weight: 700; font-size: 1.25rem; color: var(--azul); }
.s-btn { font-weight: 700; letter-spacing: .06em; }
.s-btn--linea, .s-btn--mini { border: 3px solid var(--azul); background: #fff; }
.s-btn--lleno { background: linear-gradient(180deg, #f05a56, var(--rojo)); box-shadow: 0 6px 0 var(--rojo-osc), 0 14px 20px rgba(18, 48, 94, .3); }
.s-btn--lleno:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--rojo-osc); }
.s-foto { border: 4px solid var(--azul); }
.s-pie { background: var(--azul); color: #fff; --s-suave: rgba(255, 255, 255, .78); }
.s-pie__n { font-weight: 700; color: var(--amarillo); }
.btn-musica { background: var(--rojo); color: #fff; box-shadow: 0 4px 0 var(--rojo-osc); }

@media (max-height: 640px) {
  .huellita { width: 66px; height: 66px; margin: -33px 0 0 -33px; }
  .rastro-intro__d { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nube, .torre__haz, .rastro-intro__alerta, .huellita.ver::before { animation: none !important; }
  .base.alarma .sirena::before, .base.alarma .sirena::after, .base.alarma .luz { animation: none !important; opacity: .7; }
  .casita { transition-duration: .4s; transition-delay: 0s; }
  .base.revelado .mision > *, .base.revelado .personaje { animation-duration: .01s !important; animation-delay: 0s !important; }
}