/* ==========================================================================
   PAKTRA — Layout — secciones genéricas, reveal y responsive
   ========================================================================== */

/* ============= GENERIC SECTION ============= */
  .section { padding: clamp(80px, 10vw, 140px) 0; }
  /* Cuando dos secciones cream van seguidas, colapsa el gap entre ellas */
  .section--cream + .section--cream { padding-top: clamp(40px, 5vw, 70px); }
  .section--cream:has(+ .section--cream) { padding-bottom: clamp(40px, 5vw, 70px); }
  .section--dark { background: var(--paktra-negro); color: var(--paktra-crema); }
  .section--cream { background: var(--paktra-crema); }
  .section--gris { background: var(--paktra-gris); }
  .section--verde { background: var(--paktra-verde-osc); color: var(--paktra-crema); }

  .section__head {
    display: grid;
    /* el título manda: columna ancha a la izquierda, intro angosta a la derecha */
    grid-template-columns: 1.45fr 1fr;
    gap: 60px;
    margin-bottom: 72px;
    align-items: end;
  }
  .section__eyebrow {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paktra-verde-med);
    margin-bottom: 18px;
  }
  .section--dark .section__eyebrow,
  .section--verde .section__eyebrow { color: var(--paktra-lima); }
  .section__eyebrow .line { width: 28px; height: 1px; background: currentColor; }
  .section__title {
    font-size: clamp(36px, 5.2vw, 76px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--paktra-verde-osc);
    text-wrap: balance;
  }
  .section--dark .section__title,
  .section--verde .section__title { color: var(--paktra-crema); }
  .section__title em {
    font-style: normal;
    font-weight: 300;
    color: var(--paktra-verde-med);
  }
  .section--dark .section__title em,
  .section--verde .section__title em { color: var(--paktra-verde-clr); }
  .section__intro {
    font-size: 17px;
    line-height: 1.55;
    color: var(--paktra-verde-osc);
    max-width: 540px;
    font-weight: 300;
    text-wrap: pretty;
  }
  .section--dark .section__intro,
  .section--verde .section__intro { color: rgba(255,253,238,0.8); }

/* ============= REVEAL ANIMATIONS ============= */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal.delay-1 { transition-delay: .08s; }
  .reveal.delay-2 { transition-delay: .16s; }
  .reveal.delay-3 { transition-delay: .24s; }