/* Hero: tesis a la izquierda, la hoja de encargo a la derecha.
   La hoja no es una ilustración: es el mismo documento que el visitante
   rellena al final de la página. */

.hero {
  position: relative;
  padding-block: calc(var(--u) * 6) calc(var(--u) * 4);
  overflow: clip;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  min-height: min(46rem, calc(100svh - 7rem));
}

.hero__copy {
  display: grid;
  gap: calc(var(--u) * 3.5);
}

.hero__title {
  max-width: 14ch;
}

.hero__title-accent {
  display: block;
  color: var(--duoris);
}

.hero__lead {
  max-width: 34rem;
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
  padding-top: var(--u);
}

.hero__note {
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.hero__sheet-wrap {
  position: relative;
  /* Leve inclinación: un papel apoyado en la mesa, no una tarjeta flotante */
  transform: rotate(1.25deg);
}

.hero__sheet-wrap::before {
  /* La copia de debajo del taco */
  content: '';
  position: absolute;
  inset: calc(var(--u) * 1.5) calc(var(--u) * -1.25) calc(var(--u) * -1.5) calc(var(--u) * 1.25);
  background: var(--blanco);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  transform: rotate(-2.6deg);
  z-index: -1;
}

/* Entrada orquestada del hero: una sola vez, en cascada */
.js-motion [data-hero-line] {
  animation: hero-rise 800ms var(--ease-out) both;
  animation-delay: calc(var(--n, 0) * 90ms);
}

.js-motion .hero__sheet-wrap {
  animation: hero-sheet 900ms var(--ease-out) 180ms both;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px);
  }
}

@keyframes hero-sheet {
  from {
    opacity: 0;
    transform: translateY(28px) rotate(3.5deg);
  }
}

@media (max-width: 60rem) {
  .hero {
    padding-top: calc(var(--u) * 3);
  }

  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero__sheet-wrap {
    max-width: 34rem;
    margin-inline: auto;
    width: 100%;
    transform: rotate(0.75deg);
  }
}

@media (max-width: 30rem) {
  .hero__actions .btn {
    flex: 1 1 100%;
  }
}