/* ==========================================================
   HERO — logo oficial animado, cookies grandes a distintas profundidades
   ========================================================== */
.hero {
  --logo-w: min(84vw, 54svh, 560px);
  position: relative; min-height: 100svh; padding: calc(var(--nav-h) + 26px) var(--gutter) 84px;
  display: grid; grid-template-rows: 1fr auto; gap: 6px; overflow: hidden; background: var(--butter);
  isolation: isolate;
}
.hero__esb { position: absolute; z-index: -1; left: -4%; bottom: -2%; height: 55%; width: auto; fill: var(--mint-300); opacity: .8; }
.hero__crown { position: absolute; z-index: -1; right: 2%; top: 10%; width: 44vw; color: var(--mint); opacity: .75; transform: rotate(14deg); }

.hero__stage { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; justify-items: center; align-content: start;
  min-height: calc(var(--logo-w) * .778 + clamp(130px, 28svh, 320px)); }
.hero__title { position: relative; z-index: 5; width: var(--logo-w); color: var(--choc); user-select: none; }
.hero__logo { display: block; width: 100%; height: auto; overflow: visible; }

/* En el teléfono las cookies van debajo del logo: su zona empieza donde el logo termina */
.hero__cookies { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--logo-w) * .778 + 6px); pointer-events: none; }
.hc { position: absolute; height: auto; will-change: transform; filter: drop-shadow(0 18px 18px rgba(60, 30, 5, .3)); }
.hc--a { width: min(54vw, 300px); left: 50%; top: 6%; margin-left: calc(min(54vw, 300px) * -.5); z-index: 3; }
.hc--b { width: min(31vw, 180px); left: -7vw; top: 0; z-index: 2; }
.hc--c { width: min(29vw, 170px); left: -5vw; bottom: 0; z-index: 4; }
.hc--d { width: min(32vw, 190px); right: -7vw; top: 2%; z-index: 2; }

.hero__mascot { position: absolute; z-index: 6; right: 1%; bottom: -3%; width: min(21vw, 130px); height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 14px 12px rgba(60, 30, 5, .22)); }

.hero__copy { position: relative; z-index: 7; width: 100%; max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 14px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; }
.hero__cta .btn { flex: 1 1 120px; padding: 0 1em; }
.hero__meta { font-weight: 600; font-size: .88rem; letter-spacing: .02em; opacity: .75; }

.hero__scroll { display: none; position: absolute; z-index: 6; left: 50%; bottom: 14px; width: 26px; height: 42px; border: 2px solid var(--choc); border-radius: 14px; transform: translateX(-50%); }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--choc); animation: scrollDot 1.8s var(--ease-io) infinite; }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll span { animation: none; } }

/* Pantallas bajas: logo y cookies se achican para que los botones no queden debajo de los flotantes */
@media (max-width: 559px) and (max-height: 700px) {
  .hero { --logo-w: 68vw; }
  .hc--a { width: 42vw; margin-left: -21vw; top: 2%; }
  .hc--b { width: 24vw; left: -4vw; }
  .hc--c { width: 23vw; left: 3vw; bottom: 0; }
  .hc--d { width: 25vw; right: -5vw; }
  .hero__mascot { width: 16vw; right: 2%; }
}

@media (max-width: 350px) and (max-height: 600px) {
  .hero { --logo-w: 60vw; padding-top: calc(var(--nav-h) + 18px); }
}

/* Teléfonos muy angostos: los dos botones siguen en una sola fila */
@media (max-width: 350px) {
  .hero__cta { flex-wrap: nowrap; gap: 8px; }
  .hero .hero__cta .btn { flex: 1 1 auto; padding: 0 .5em; font-size: .84rem; }
  .hero__cta .btn svg { display: none; }
}

/* Tablet vertical: la zona de cookies queda centrada y sin estirarse */
@media (min-width: 560px) and (max-width: 860px) {
  .hc--b { left: 2%; } .hc--c { left: 8%; } .hc--d { right: 2%; }
  .hero__mascot { right: 4%; width: 15vw; }
}

/* Escritorio y teléfono acostado: el logo al centro y las cookies a los costados */
@media (min-width: 861px), (max-height: 520px) and (orientation: landscape) {
  .hero { --logo-w: min(38vw, 74svh, 620px); padding-top: calc(var(--nav-h) + 34px); padding-bottom: 92px; gap: 20px; }
  .hero__esb { left: 4%; height: 78%; }
  .hero__crown { top: 14%; width: min(30vw, 420px); }
  .hero__stage { min-height: calc(var(--logo-w) * .778); align-content: center; }
  .hero__cookies { top: 0; }
  .hc--a { width: min(20vw, 330px); left: 1%; top: 42%; margin-left: 0; }
  .hc--b { width: min(14.5vw, 240px); left: 10%; top: -2%; }
  .hc--c { width: min(13.5vw, 225px); left: auto; right: 12%; top: 50%; bottom: auto; }
  .hc--d { width: min(15vw, 250px); right: 9%; top: 0; }
  .hero__mascot { right: 1.5%; bottom: -3%; width: min(11.5vw, 185px); }
  .hero__copy { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding-top: 0; }
  .hero__cta { width: auto; justify-content: center; }
  .hero__cta .btn { flex: 0 0 auto; padding: 0 1.7em; }
}
@media (min-width: 861px) {
  .hero__scroll { display: block; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 24px; }
  .hero__crown { display: none; }
  .hero__mascot { width: 10vw; right: 3%; }
  .hero__cta .btn { min-height: 46px; }
}