@layer organisms {
  /* Hero con parallax: los labios quedan fijos a la pantalla, siempre a la derecha, mientras los textos suben
     a distintas velocidades. El clip-path recorta la imagen fija al área del hero, así la sección siguiente
     "tapa" los labios al subir (a diferencia de background-attachment: fixed, funciona también en iOS). */
  .hero {
    position: relative;
    clip-path: inset(0);
    min-height: 100svh;
  }

  .hero__inner {
    position: relative;
    z-index: 1;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
    padding-block: var(--space-xl) var(--space-l);
  }

  /* En móvil el logo ya está en el menú; el grande solo aparece en escritorio. */
  .hero__logo { display: none; margin-block-end: var(--space-2xs); }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-s);
  }

  /* Los labios: fijos a la ventana, pegados a la orilla derecha. En móvil ocupan la parte de abajo. */
  .hero__media {
    position: fixed;
    inset-block-end: 0;
    inset-inline-end: 0;
    z-index: 0;
    width: min(78vw, 420px);
    height: 48svh;
    pointer-events: none;

    & picture, & img {
      width: 100%;
      height: 100%;
    }

    & img {
      object-fit: cover;
      object-position: right center;
    }
  }

  /* Móvil: los labios llenan la pantalla detrás, fijos como en escritorio, y el texto va en una tarjeta de
     vidrio translúcido para leerse sobre la foto. El menú está oculto sobre el hero, así que aquí sí va el logo. */
  @media (max-width: 47.99rem) {
    .hero__media {
      inset: 0;
      width: 100%;
      height: 100svh;

      & img { object-position: 72% center; }
    }

    .hero__content {
      /* Pegada al borde superior, como si saliera de la pantalla: sin curva ni borde arriba */
      margin-block: 0 var(--space-l);
      padding: calc(var(--space-l) + env(safe-area-inset-top)) var(--space-m) var(--space-l);
      gap: var(--space-s);
      background: linear-gradient(160deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.55));
      backdrop-filter: blur(18px) saturate(170%);
      -webkit-backdrop-filter: blur(18px) saturate(170%);
      border: 1px solid rgb(255 255 255 / 0.7);
      border-block-start: 0;
      border-radius: 0 0 28px 28px;
      box-shadow:
        0 12px 36px rgb(25 22 37 / 0.14),
        inset 0 1px 0 rgb(255 255 255 / 0.9);

      @supports not (backdrop-filter: blur(1px)) {
        background: rgb(255 255 255 / 0.9);
      }
    }

    .hero__logo {
      display: block;
      --logo-height: 64px;
    }
  }

  @media (min-width: 48rem) {
    .hero__content {
      max-width: 58%;
      padding-block: var(--space-2xl);
    }

    .hero__media {
      inset-block-start: 0;
      width: min(42vw, calc(100svh * 0.7));
      height: 100svh;
    }
  }

  @media (min-width: 64rem) {
    /* En escritorio el menú está oculto sobre el hero: el hero ocupa la pantalla completa y el texto
       se pega a la izquierda, sin el límite del contenedor de 1200 px. */
    .hero {
      display: grid;
      align-items: center;
      min-height: max(640px, 100svh);
      padding-block-end: var(--sheet-overlap);
    }

    .hero__inner {
      max-width: none;
      margin: 0;
      padding-inline: clamp(2rem, 6.5vw, 9rem);
    }

    .hero__content {
      max-width: min(50vw, 48rem);
      gap: clamp(1.5rem, 0.8rem + 1.1vw, 2.25rem);
      padding-block: var(--space-2xl) 4rem;
    }

    .hero__logo {
      display: block;
      --logo-height: clamp(110px, 2.5rem + 6vw, 190px);
    }

    .hero .eyebrow { font-size: clamp(0.75rem, 0.5rem + 0.35vw, 0.9375rem); }
    .hero h1 { font-size: clamp(3.875rem, 1.6rem + 3.6vw, 6.5rem); }

    .hero .lead {
      max-width: 40ch;
      font-size: clamp(1.0625rem, 0.75rem + 0.5vw, 1.375rem);
    }

    .hero .btn { padding: 1.125rem 2.25rem; font-size: clamp(0.9375rem, 0.75rem + 0.3vw, 1.125rem); }
    .hero .link-arrow--underline { font-size: clamp(0.9375rem, 0.75rem + 0.3vw, 1.125rem); }
  }

  /* Tablet y escritorio: los textos se van hacia arriba a distintas velocidades sobre los labios fijos.
     Sin soporte o con "reducir movimiento", simplemente hacen scroll normal. */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
      .hero__content > * {
        animation: hero-sube linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100svh;
      }

      .hero__logo { --sube: -10svh; }
      .hero__content .eyebrow { --sube: -18svh; }
      .hero__content h1 { --sube: -32svh; }
      .hero__content .lead { --sube: -22svh; }
      .hero__actions { --sube: -14svh; }
    }
  }

  @keyframes hero-sube {
    to {
      translate: 0 var(--sube, -15svh);
      opacity: 0;
    }
  }
}