/*
 * Cabecera fija: marca, navegación y el botón de WhatsApp siempre a mano.
 * El estado compacto (data-compact) lo activa js/modules/compact-header.js.
 */
@layer components {
  /* Marca invisible que el módulo observa para saber si ya se hizo scroll. */
  .scroll-sentinel {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: var(--space-m);
    pointer-events: none;
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    border-block-end: 1px solid transparent;
    background-color: var(--color-desk);
    transition: border-color var(--duration-base) ease;
  }

  /* Al bajar, una línea fina separa la cabecera del contenido que pasa por debajo. */
  .site-header[data-compact="true"] {
    border-block-end-color: var(--color-line);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-block-size: var(--header-height);
  }

  /* La marca empuja la navegación y el botón hacia la derecha. */
  .site-header__inner .brand {
    margin-inline-end: auto;
  }

  /* Pantallas muy angostas (320 px): la marca se ajusta y el botón va sin icono. */
  @media (max-width: 22.49rem) {
    .site-header__inner .brand {
      font-size: 1.0625rem;
    }

    .site-header__inner .button__icon {
      display: none;
    }
  }

  @media (min-width: 30rem) {
    .site-header__inner {
      gap: var(--space-m);
    }
  }

  /* En el celular la página es corta y basta con la marca y el botón. */
  .site-nav {
    display: none;
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-l);
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--color-ink);
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    text-decoration-line: none;
  }

  .site-nav__link:hover {
    text-decoration-line: underline;
  }

  @media (min-width: 52rem) {
    .site-nav {
      display: block;
    }
  }
}