@layer organisms {
  /* Menú flotante tipo "liquid glass": píldora translúcida separada de los bordes. Sobre una página
     con hero, aparece al salir del hero (html[data-past-hero], lo pone scroll_state_controller). */
  .site-header {
    position: fixed;
    inset: var(--glass-gap) 0 auto;
    z-index: 50;
    padding-inline: var(--glass-gap);
    pointer-events: none;
    transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
  }

  .glass {
    background:
      linear-gradient(135deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.42));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgb(255 255 255 / 0.65);
    box-shadow:
      0 10px 30px rgb(25 22 37 / 0.12),
      0 1px 2px rgb(25 22 37 / 0.06),
      inset 0 1px 0 rgb(255 255 255 / 0.9),
      inset 0 -1px 0 rgb(25 22 37 / 0.04);

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

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    max-width: 68rem;
    min-height: var(--header-height);
    margin-inline: auto;
    padding: 0.375rem 0.375rem 0.375rem 1.25rem;
    border-radius: var(--radius-pill);
    pointer-events: auto;
  }

  .site-header__brand { flex: none; }

  .site-header__toggle {
    display: inline-grid;
    place-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    background: rgb(255 255 255 / 0.6);
    border: 1px solid rgb(25 22 37 / 0.08);
    border-radius: 50%;

    & svg { width: 20px; height: 20px; }
  }

  /* Móvil: el menú es un popover nativo con el mismo vidrio, debajo de la píldora */
  .site-nav {
    position: fixed;
    inset: calc(var(--header-height) + var(--glass-gap) * 2) var(--glass-gap) auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--space-s) var(--space-m) var(--space-m);
    border-radius: 24px;
    color: var(--ink);

    &::backdrop { background: rgb(25 22 37 / 0.15); }
  }

  .site-nav__links {
    display: flex;
    flex-direction: column;
    padding: 0;
    list-style: none;

    & a {
      display: flex;
      align-items: center;
      min-height: var(--tap-min);
      font-size: 1.0625rem;
      font-weight: 500;
      color: var(--ink);
      text-decoration: none;
    }

    & a:hover, & a[aria-current="page"] { color: var(--accent); }
  }

  .site-nav__cta { margin-block-start: var(--space-s); }

  @media (min-width: 64rem) {
    .site-header__toggle { display: none; }

    .site-nav,
    .site-nav:popover-open {
      position: static;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      gap: var(--space-l);
      width: auto;
      padding: 0;
      overflow: visible;
      /* en escritorio el vidrio lo pone la píldora, no el nav */
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .site-nav__links {
      flex-direction: row;
      gap: 0.25rem;
      margin-inline: auto;

      & a {
        padding-inline: 0.875rem;
        border-radius: var(--radius-pill);
        font-size: var(--text-small);
        color: var(--text-muted);
        transition: background-color 0.2s, color 0.2s;
      }

      & a:hover { background: rgb(255 255 255 / 0.7); color: var(--ink); }
    }

    .site-nav__cta { margin: 0; }

  }

  /* Sobre el hero el menú está oculto (en todos los tamaños) y aparece al salir de él */
  html:has(.hero) .site-header {
    translate: 0 calc(-100% - var(--glass-gap) * 2);
    opacity: 0;
  }

  html[data-past-hero] .site-header {
    translate: 0 0;
    opacity: 1;
  }

  /* Páginas sin hero: espacio para el menú flotante */
  body:not(:has(.hero)) main { padding-block-start: calc(var(--header-height) + var(--glass-gap) * 2); }
}