/* ===================== HERO (mobile-first) ===================== */
:root{
  --topbar-h: 72px;
  --hero-curve-h: 68px;
}

.hero{
  position: relative;
  background: var(--peach);   /* antes: var(--black) */
  color: var(--ink);          /* texto negro dentro de .page */
  min-height: calc(50svh - var(--topbar-h));
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  z-index: 1;
}

.hero__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  justify-items: center;
  gap: 8px;
  flex: 1;
  height: 100%;
  padding: 0 10px;
}

/* Columna izquierda (texto) */
.hero__copy{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
}

.hero__headline{
  margin: 0;
  color: var(--ink);          /* antes: #fff */
  line-height: 0.95;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 5.2vh;
  max-width: 13ch;
  text-wrap: balance;
}

/* Columna derecha (huevo) */
.hero__media{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
}

.hero__media img{
  display: block;
  max-height: calc(110svh - var(--topbar-h) - var(--hero-curve-h));
  width: auto;
  height: auto;
  object-fit: contain;

  transform: translateY(-3vh) rotate(10deg);
  transform-origin: center;
  transition: transform .3s ease-in-out;

  filter: drop-shadow(0 10px 30px rgba(0,0,0,.55));
  pointer-events: none;
}

/* Curva inferior */
.curve{
  position:absolute; left:0; right:0; width:100%;
  pointer-events: none;
}
.curve--bottom{
  bottom: 0;
  height: var(--hero-curve-h);
}
.curve--bottom svg{ display:block; width:100%; height:100%; }
/* peach → orange (respeta alternancia) */
.curve--bottom path{ fill: var(--orange); }

/* =============== Desktop =============== */
@media (min-width: 900px){
  .hero{
    min-height: calc(100svh - var(--topbar-h));
    display: flex;
    align-items: flex-end;
    overflow: visible; /* permite que el huevo sobresalga */
  }

  .hero__grid{
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    padding: 0 40px 0;
    position: relative;
    z-index: 2;
  }

  .hero__copy{
    align-self: end;
    padding-bottom: 6vh;
  }

  .hero__headline{
    font-size: clamp(58px, 5.8vw, 100px);
    line-height: 1.05;
    max-width: 16ch;
    color: var(--ink); /* asegura negro en desktop también */
  }

  .hero__media{
    position: relative;
    overflow: visible;
    z-index: 10;
  }

  .hero__media img{
    position: relative;
    z-index: 10001; /* encima del navbar */
    transform: translateY(-10vh) rotate(8deg); /* lo sube y lo inclina */
    transform-origin: center;
    max-height: calc(100svh - var(--topbar-h) + 100px);
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 36px rgba(0,0,0,.6));
  }

  .curve--bottom{
    position: relative;
    z-index: 1;
  }
}