/* stack.c227.css — utilidades de espaciado, texto y contenido legal */
@layer utilities {
  /* el CTA de cabecera vive en utilities a proposito: .btn (capa components)
     pisaria un display:none puesto en la capa layout, ver nota en build.log */
  .site-header__cta {
    display: none;
  }

  @media (min-width: 64rem) {
    .site-header__cta {
      display: inline-flex;
    }
  }

  .u-mt-sm {
    margin-top: var(--space-sm);
  }

  .u-mt-md {
    margin-top: var(--space-md);
  }

  .u-mt-lg {
    margin-top: var(--space-lg);
  }

  .u-mb-md {
    margin-bottom: var(--space-md);
  }

  .u-flow > * + * {
    margin-top: var(--space-sm);
  }

  .u-flow--loose > * + * {
    margin-top: var(--space-md);
  }

  .u-kicker {
    font-size: var(--fs-small);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ochre);
  }

  .u-lead {
    font-size: var(--fs-lead);
    color: var(--ink-soft);
    max-width: 60ch;
  }

  .u-center-text {
    text-align: center;
  }

  .u-max-prose {
    max-width: 68ch;
  }

  .u-hairline-top {
    border-top: var(--border-hairline);
    padding-top: var(--space-lg);
  }

  /* contenido legal — mismo tratamiento en privacidad / bloque juridico de contacto */
  .legal-copy h2 {
    font-family: var(--f-display);
    font-size: 1.4rem;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--ink);
  }

  .legal-copy h2:first-child {
    margin-top: 0;
  }

  .legal-copy p,
  .legal-copy li {
    color: var(--ink-soft);
    margin-bottom: var(--space-sm);
  }

  .legal-copy ul {
    padding-left: 1.2rem;
    list-style: disc;
  }

  .legal-copy a {
    color: var(--selva);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .legal-block {
    display: grid;
    gap: 0.4rem;
    font-size: var(--fs-small);
    color: var(--ink-soft);
  }

  .legal-block dt {
    color: var(--ink-faint);
  }

  .legal-block dd {
    margin: 0 0 0.5rem;
  }

  /* pantalla ancha: el contenedor no crece mas alla de su tope, evita
     que la cabecera y el hero se peguen a los bordes en monitores 27"+ */
  @media (min-width: 100rem) {
    .container {
      max-width: var(--container-max);
    }
  }

  /* revelado editorial — la clase que oculta SOLO existe si in-view.c227.js la añade
     en tiempo de ejecucion; sin JS el contenido permanece visible por defecto */
  .is-pre-reveal {
    opacity: 0;
    transform: translateY(0.9rem);
  }

  .is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--ease-editorial), transform 0.6s var(--ease-editorial);
  }

  @media (prefers-reduced-motion: reduce) {
    .is-pre-reveal {
      transition: none;
    }

    .is-revealed {
      transition: none;
    }
  }
}