/* Portada: el titulo atraviesa la empanada.
   "Crujientes" va DETRAS de la foto y "y caseras." va DELANTE (z-index en el mismo contexto). */
.hero {
  position: relative;
  min-height: 100dvh;
  background: var(--red);
  color: var(--cream);
  padding: 96px var(--gut) calc(64px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 45% at 62% 55%, rgba(242, 180, 90, 0.32), transparent 70%);
}
.hero__stage {
  flex: 1;
  min-height: min(520px, 50dvh);
}
.hero__title {
  position: relative;
  font-size: clamp(60px, 17.5vw, 300px);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
}
.hero__title span {
  display: block;
}
.hero__back {
  position: relative;
  z-index: 1;
  color: var(--yellow);
}
.hero__front {
  position: relative;
  z-index: 3;
  color: var(--cream);
  text-shadow: 5px 5px 0 var(--red-dk);
  margin-left: 0.18em;
}
.hero__img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__food {
  aspect-ratio: 638/1500;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(96px + 0.5em);
  font-size: clamp(60px, 17.5vw, 300px);
  width: auto;
  max-width: none;
  height: calc(100% - 96px - 0.5em + 70px);
  transform: translateX(-42%) rotate(6deg);
  pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(61, 6, 8, 0.45));
}

/* Sello giratorio $3 */
.badge {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 36%;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow);
  transform: rotate(-12deg);
}
.badge svg {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  font:
    700 10.5px "Bricolage Grotesque",
    sans-serif;
  letter-spacing: 0.12em;
  fill: var(--ink);
}
.badge b {
  font:
    400 38px/1 "Anton",
    sans-serif;
  color: var(--red);
}

.hero__foot {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 20px;
}
.hero__sub {
  font-size: 19px;
  font-weight: 700;
  max-width: 16em;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(61, 6, 8, 0.5);
}
.hero__cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.hero__cta .btn {
  padding: 0 12px;
}

/* Cinta de sabores */
.marquee {
  background: var(--yellow);
  color: var(--ink);
  border-block: 3px solid var(--ink);
  transform: rotate(-2deg) scale(1.04);
  margin-top: -18px;
  position: relative;
  z-index: 6;
  overflow: hidden;
  padding: 14px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 28px;
  align-items: center;
  font:
    400 clamp(30px, 6vw, 56px) / 1 "Anton",
    sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track i {
  font-style: normal;
  color: var(--red);
  font-size: 0.6em;
}

@media (prefers-reduced-motion: no-preference) {
  .badge svg {
    animation: spin 16s linear infinite;
  }
  .marquee__track {
    animation: marquee 26s linear infinite;
  }
  .js .hero__title span,
  .js .hero__foot {
    opacity: 0;
    transform: translateY(40px);
    animation: rise 800ms var(--ease-out) forwards;
  }
  .js .hero__front {
    animation-delay: 120ms;
  }
  .js .hero__foot {
    animation-delay: 380ms;
  }
  .js .hero__food {
    opacity: 0;
    animation: pop 900ms var(--ease-out) 180ms forwards;
  }
  .js .badge {
    opacity: 0;
    animation: stamp 500ms var(--ease-out) 700ms forwards;
  }
  @keyframes rise {
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes pop {
    from {
      opacity: 0;
      transform: translateX(-42%) translateY(80px) rotate(14deg) scale(0.94);
    }
    to {
      opacity: 1;
      transform: translateX(-42%) rotate(6deg);
    }
  }
  @keyframes stamp {
    from {
      opacity: 0;
      transform: rotate(-30deg) scale(1.3);
    }
    to {
      opacity: 1;
      transform: rotate(-12deg);
    }
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }
}

@media (min-width: 900px) {
  .hero {
    padding-top: 120px;
    min-height: max(100dvh, 720px);
  }
  .hero__stage {
    display: flex;
    justify-content: center;
  }
  .hero__title {
    font-size: clamp(150px, 16.5vw, 300px);
    align-items: center;
    text-align: center;
  }
  .hero__front {
    margin-left: 1.6em;
  }
  .hero__food {
    top: auto;
    bottom: -70px;
    left: 50%;
    width: auto;
    height: calc(100% - 70px);
    transform: translateX(-46%) rotate(4deg);
  }
  .badge {
    width: 150px;
    height: 150px;
    right: 4%;
    bottom: 20%;
  }
  .badge svg {
    font-size: 10.5px;
  }
  .badge b {
    font-size: 56px;
  }
  .hero__foot {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .hero__sub {
    font-size: 24px;
  }
  .hero__cta {
    grid-template-columns: auto;
    justify-content: start;
  }
  .hero__cta .btn {
    padding: 0 30px;
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes pop {
      from {
        opacity: 0;
        transform: translateX(-46%) translateY(120px) rotate(12deg) scale(0.94);
      }
      to {
        opacity: 1;
        transform: translateX(-46%) rotate(4deg);
      }
    }
  }
}
.marquee__track i:nth-of-type(even) {
  color: #1e9c52;
}

/* Vapor de "recien frita" sobre la empanada (solo con movimiento permitido) */
.steam {
  position: absolute;
  left: 30%;
  top: -2%;
  width: 40%;
  height: 22%;
  pointer-events: none;
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .steam {
    display: block;
  }
  .steam i {
    position: absolute;
    bottom: 0;
    width: 18%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(to top, transparent, rgba(255, 248, 238, 0.5) 45%, transparent);
    filter: blur(7px);
    opacity: 0;
    animation: steam 3.6s var(--ease-out) infinite;
  }
  .steam i:nth-child(1) {
    left: 8%;
    animation-delay: 1.2s;
  }
  .steam i:nth-child(2) {
    left: 42%;
    animation-delay: 2.4s;
  }
  .steam i:nth-child(3) {
    left: 74%;
    animation-delay: 3.4s;
  }
  @keyframes steam {
    0% {
      opacity: 0;
      transform: translateY(20%) scaleY(0.6);
    }
    35% {
      opacity: 0.9;
    }
    100% {
      opacity: 0;
      transform: translateY(-70%) scaleX(1.8) scaleY(1.1);
    }
  }
}

/* En ingles "& homemade." es mas largo: el titulo baja un poco de tamano */
html[lang="en"] .hero__title {
  font-size: clamp(54px, 15vw, 260px);
}
@media (min-width: 900px) {
  html[lang="en"] .hero__title {
    font-size: clamp(130px, 14.5vw, 260px);
  }
}
@media (min-width: 900px) {
  html[lang="en"] .hero__front {
    margin-left: 0.5em;
  }
}

/* Celular acostado: poca altura, el titulo y los botones tienen que caber juntos */
@media (orientation: landscape) and (max-height: 520px) {
  .hero {
    padding-top: 88px;
    min-height: 100dvh;
  }
  .hero__stage {
    min-height: 0;
  }
  .hero__title,
  html[lang="en"] .hero__title {
    font-size: min(9.5vw, 17dvh);
  }
  .hero__foot {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .hero__sub {
    font-size: 16px;
  }
  .hero__cta {
    grid-template-columns: auto;
    justify-content: start;
  }
  .badge {
    display: none;
  }
}