/* ==========================================================
   Diseño "Dino" · Infantil (aventura jurásica, personaje original)
   huevo → 3 toques → se rompe → dino bebé que ruge
   ========================================================== */

:root {
  --selva: #1f5a3a;
  --verde: #3fbf9b;
  --hoja: #2f7d4f;
  --naranja: #ff9f43;
  --crema: #fbf3e2;
  --tinta: #1f3d2b;
  --amarillo: #ffd43b;

  --s-fondo: #f2f7e6;
  --s-tinta: var(--tinta);
  --s-suave: #4f6b57;
  --s-acento: var(--naranja);
  --s-acento-tinta: #fff;
  --s-tarjeta: #ffffff;
  --s-borde: rgba(63, 191, 155, .35);
  --s-radio: 26px;
  --s-sombra: 0 14px 26px -16px rgba(31, 61, 43, .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(--hoja);
}

body {
  background:
    radial-gradient(circle at 20% 30%, rgba(63, 191, 155, .12) 0 10px, transparent 11px) 0 0 / 120px 120px,
    radial-gradient(circle at 70% 70%, rgba(255, 159, 67, .1) 0 7px, transparent 8px) 0 0 / 150px 150px,
    #f2f7e6;
  color: var(--tinta);
  font-family: var(--s-fuente);
}

/* ---------- Selva ---------- */
.selva {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + clamp(150px, 24svh, 210px)) 16px calc(env(safe-area-inset-bottom) + 70px);
  overflow: hidden;
  color: var(--crema);
  text-align: center;
  background: radial-gradient(75% 55% at 50% 22%, #a6e3a0, #4caa64 42%, #2a7046 70%, var(--selva) 100%);
}
.rayos {
  position: absolute;
  left: 50%;
  top: -40%;
  width: 180vw;
  max-width: 1200px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 210, .22) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000, transparent);
  mask: radial-gradient(closest-side, #000, transparent);
  animation: girarRayos 60s linear infinite;
  pointer-events: none;
}
@keyframes girarRayos { to { transform: translateX(-50%) rotate(360deg); } }

.hoja { position: absolute; width: clamp(110px, 32vw, 170px); height: auto; transform: rotate(var(--r)); animation: mecer 5s ease-in-out infinite; transform-origin: 50% 100%; z-index: 1; transition: translate 1.2s cubic-bezier(.3, .7, .2, 1); }
.hoja--1 { --r: 140deg; left: -46px; top: -40px; }
.hoja--2 { --r: 100deg; left: -80px; top: 34%; animation-delay: -1.5s; }
.hoja--3 { --r: 40deg; left: -50px; bottom: -70px; animation-delay: -3s; }
.hoja--4 { --r: -140deg; right: -46px; top: -40px; animation-delay: -.7s; }
.hoja--5 { --r: -100deg; right: -80px; top: 40%; animation-delay: -2.2s; }
.hoja--6 { --r: -40deg; right: -50px; bottom: -70px; animation-delay: -3.6s; }
@keyframes mecer { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.selva.abierto .hoja--1, .selva.abierto .hoja--2, .selva.abierto .hoja--3 { translate: -30px 0; }
.selva.abierto .hoja--4, .selva.abierto .hoja--5, .selva.abierto .hoja--6 { translate: 30px 0; }
.liana {
  position: absolute;
  top: 0;
  width: 5px;
  height: 26%;
  border-radius: 3px;
  background: radial-gradient(circle, #6cc070 0 5px, transparent 6px) 50% 0 / 14px 28px repeat-y, #3d8a4f;
  transform-origin: top;
  animation: mecer 6s ease-in-out infinite;
  z-index: 1;
}
.liana--1 { left: 24%; height: 20%; }
.liana--2 { right: 22%; animation-delay: -2s; }

.selva__aventura, .titulo-dino {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top) + 7svh);
  z-index: 2;
  margin: 0;
  transition: opacity .6s ease, transform .6s ease;
}
.selva__aventura { top: calc(env(safe-area-inset-top) + 12svh); font-weight: 600; font-size: .9rem; letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.selva.abierto .selva__aventura { opacity: 0; transform: translateY(-10px); }
.titulo-dino { opacity: 0; transform: scale(.6); pointer-events: none; }
.selva.abierto .titulo-dino { opacity: 1; transform: none; transition: opacity .5s ease 1s, transform .8s cubic-bezier(.3, 1.6, .5, 1) 1s; }
.titulo-dino__nombre {
  margin: 0;
  font-weight: 700;
  font-size: clamp(3.4rem, 17vw, 4.6rem);
  line-height: 1;
  color: var(--crema);
  text-shadow: 0 4px 0 var(--naranja), 0 8px 0 #c76a14, 0 14px 18px rgba(0, 0, 0, .35);
}
.titulo-dino__cumple { margin: 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 1.3rem; text-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.titulo-dino__cumple b { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--naranja); color: #fff; font-size: 2rem; box-shadow: 0 4px 0 #c76a14; text-shadow: none; }
.titulo-dino__fecha { margin: 6px 0 0; font-size: .95rem; text-transform: capitalize; text-shadow: 0 2px 4px rgba(0, 0, 0, .3); }

/* ---------- Nido, huevo y dino ---------- */
.nido-zona { position: relative; z-index: 2; width: min(64vw, 260px, 36svh); aspect-ratio: 1 / 1.05; flex: none; }
.huevo {
  all: unset;
  position: absolute;
  left: 50%;
  bottom: 13%;
  width: 60%;
  transform: translateX(-50%);
  z-index: 3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: tambalear 3.2s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.huevo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .3)); }
.huevo:focus-visible { outline: 3px dashed var(--amarillo); outline-offset: 8px; border-radius: 40%; }
.huevo.sacude { animation: sacudir .45s ease; }
@keyframes tambalear { 0%, 78%, 100% { rotate: 0deg; } 84% { rotate: 6deg; } 90% { rotate: -6deg; } 95% { rotate: 3deg; } }
@keyframes sacudir { 0%, 100% { rotate: 0deg; } 20% { rotate: -12deg; } 40% { rotate: 10deg; } 60% { rotate: -7deg; } 80% { rotate: 4deg; } }
.grieta { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease; }
.huevo.g1 .grieta--1, .huevo.g2 .grieta--1, .huevo.g2 .grieta--2, .huevo.g3 .grieta { stroke-dashoffset: 0; }
.huevo__arriba { transform-box: fill-box; transform-origin: 50% 80%; transition: transform 1s cubic-bezier(.3, .6, .4, 1), opacity .8s ease .3s; }
.huevo.roto { animation: none; pointer-events: none; }
.huevo.roto .huevo__arriba { transform: translate(26px, -170px) rotate(48deg); opacity: 0; }
.huevo.roto .grietas { opacity: 0; transition: opacity .2s; }

.dino {
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: 76%;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, 34%) scale(.5);
  transition: transform .9s cubic-bezier(.3, 1.7, .5, 1) .3s, opacity .2s ease .3s;
  cursor: pointer;
}
.selva.abierto .dino { opacity: 1; transform: translate(-50%, -6%) scale(1); }
.dino__fig { display: block; width: 100%; height: auto; overflow: visible; }
.selva.abierto .dino__fig { animation: saltito 2.4s 1.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes saltito { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-8px) scale(1.03, .97); } 86% { transform: translateY(0) scale(.98, 1.02); } }
.dino__pupila { transform-box: fill-box; transform-origin: center; animation: parpadear 4s infinite; }
@keyframes parpadear { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.dino__boca { transform-box: fill-box; transform-origin: 50% 0; transition: transform .2s ease; }
.dino.rugiendo .dino__boca { transform: scale(1.5, 2.1); }
.globo-roar {
  position: absolute;
  top: -6%;
  right: -16%;
  padding: 8px 14px;
  border-radius: 20px;
  background: #fff;
  color: var(--naranja);
  font-weight: 700;
  font-size: 1.4rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
  transform: scale(0) rotate(-10deg);
  transform-origin: 0 100%;
  transition: transform .35s cubic-bezier(.3, 1.8, .5, 1);
}
.globo-roar::after { content: ""; position: absolute; left: 12px; bottom: -10px; border: 6px solid transparent; border-top: 10px solid #fff; border-left-width: 2px; }
.dino.rugiendo .globo-roar { transform: scale(1) rotate(-8deg); }

.nido {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 96%;
  height: 32%;
  z-index: 4;
  transform: translateX(-50%);
  border-radius: 40% 40% 50% 50% / 25% 25% 75% 75%;
  background:
    repeating-linear-gradient(14deg, transparent 0 5px, rgba(60, 35, 15, .55) 5px 7px, transparent 7px 12px),
    repeating-linear-gradient(-16deg, transparent 0 6px, rgba(150, 100, 50, .7) 6px 8px, transparent 8px 13px),
    linear-gradient(180deg, #b07a3e, #6b4220);
  box-shadow: 0 14px 18px -8px rgba(0, 0, 0, .45), inset 0 8px 10px rgba(0, 0, 0, .3);
}

.toques { display: flex; gap: 10px; z-index: 2; }
.toques i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); transition: background-color .3s, transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.toques i.lleno { background: var(--naranja); transform: scale(1.25); }
.selva.abierto .toques { opacity: 0; transition: opacity .5s; }
.selva__hint { margin: 0; z-index: 2; font-weight: 600; font-size: 1.15rem; text-shadow: 0 2px 4px rgba(0, 0, 0, .35); animation: botar 1.4s ease-in-out infinite; }
.selva.abierto .selva__hint { opacity: 0; animation: none; transition: opacity .5s; }
@keyframes botar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.selva .desliza-c { color: var(--crema); z-index: 3; }

/* ---------- Secciones ---------- */
.explorador-sec { padding-top: 80px; }
.explorador { display: flex; flex-direction: column; align-items: center; }
.explorador__marco {
  width: 190px;
  height: 190px;
  padding: 8px;
  border-radius: 50% 6% 50% 6%;
  background: linear-gradient(135deg, var(--verde), var(--hoja));
  box-shadow: 0 16px 26px -14px rgba(31, 61, 43, .6);
  transform: rotate(-6deg);
}
.explorador__marco img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% 6% 50% 6%; display: block; }
.explorador__t { margin: 18px 0 0; font-weight: 600; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--naranja); }
.explorador__n { margin: 0; font-weight: 700; font-size: 2.6rem; color: var(--hoja); }
.explorador__mensaje { margin: 18px 0 0; max-width: 22em; font-size: 1.1rem; line-height: 1.6; }

.huella { width: 34px; height: 40px; fill: rgba(31, 61, 43, .22); }
.huella.aparece { opacity: 0; transform: scale(.3) rotate(var(--r, 0deg)); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.8, .5, 1); }
.huella.aparece.visible { opacity: 1; transform: rotate(var(--r, 0deg)); }
.explorador-sec .huella { position: absolute; }
.huella--1 { left: 10%; top: 40px; --r: -20deg; }
.huella--2 { right: 12%; top: 120px; --r: 25deg; }
.sendero { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.huella--3 { --r: -15deg; margin-left: -50px; }
.huella--4 { --r: 15deg; margin-left: 40px; transition-delay: .2s !important; }
.huella--5 { --r: -15deg; margin-left: -40px; transition-delay: .4s !important; }

.s-titulo { font-weight: 700; text-shadow: 0 3px 0 rgba(255, 159, 67, .55); }
.s-cuenta__num { font-weight: 700; color: var(--naranja); }
.s-evento__icono { color: #fff; background: var(--verde); border-color: var(--verde); }
.s-evento__hora { font-weight: 700; color: var(--hoja); }
.s-vestimenta__tipo { font-weight: 700; font-size: 1.5rem; color: var(--hoja); }
.s-rsvp__saludo { font-weight: 600; font-size: 1.2rem; color: var(--naranja); }
.s-btn { font-weight: 700; letter-spacing: .06em; }
.s-btn--lleno { background: linear-gradient(180deg, #ffb46b, var(--naranja)); box-shadow: 0 6px 0 #c76a14, 0 14px 20px rgba(31, 61, 43, .35); }
.s-btn--lleno:active { transform: translateY(4px); box-shadow: 0 2px 0 #c76a14; }
.s-pie__n { font-weight: 700; color: var(--hoja); }
.btn-musica { background: var(--verde); color: #fff; box-shadow: 0 4px 0 var(--hoja); }

@media (prefers-reduced-motion: reduce) {
  .rayos, .hoja, .liana, .huevo, .selva__hint, .dino__fig, .dino__pupila { animation: none !important; }
}