@layer ec.shell {
  /* Contém o drawer de navegação (.ec-site-nav) fora da tela no mobile, que é
     `position: fixed` deslocado via `translateX(105%)` — a caixa projetada para
     além da borda direita gera barra de rolagem horizontal quando o menu está
     FECHADO. `clip` (e não `hidden`) contém o transbordo sem forçar o eixo Y a
     `auto`, preservando o `position: sticky` do aside no desktop. É preciso nos
     dois níveis: só no root ou só no shell não elimina o transbordo. */
  :root {
    overflow-x: clip;
  }

  .ec-shell {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    background: var(--ec-sys-color-background);
    color: var(--ec-sys-color-on-background);
  }

  .ec-shell__main {
    min-height: 60vh;
  }

  .ec-site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--ec-z-sticky);
    border-block-end: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
    background: color-mix(in srgb, var(--ec-sys-color-surface) 92%, transparent);
    backdrop-filter: blur(1rem);
  }

  .ec-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ec-space-5);
    min-height: 4.5rem;
  }

  .ec-site-header__brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--ec-touch-target-min);
    text-decoration: none;
  }

  .ec-site-header__logo {
    display: block;
    width: auto;
    height: 2.25rem;
    max-width: min(13.75rem, 52vw);
  }

  .ec-site-nav {
    display: flex;
    align-items: center;
    gap: var(--ec-space-2);
  }

  .ec-site-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ec-touch-target-min);
    padding-inline: var(--ec-space-4);
    border-radius: var(--ec-radius-full);
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-label-lg-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-label-lg-line);
    text-decoration: none;
    transition:
      background-color var(--ec-motion-duration-medium) var(--ec-motion-easing-standard),
      color var(--ec-motion-duration-medium) var(--ec-motion-easing-standard);
  }

  .ec-site-nav__link:hover {
    background: var(--ec-sys-color-interactive-subtle);
    color: var(--ec-sys-color-primary);
    text-decoration: none;
  }

  .ec-site-nav__link[aria-current="page"] {
    background: var(--ec-sys-color-primary-container);
    color: var(--ec-sys-color-on-primary-container);
  }

  .ec-site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--ec-touch-target-min);
    height: var(--ec-touch-target-min);
    padding: 0;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-on-surface);
    box-shadow: var(--ec-elevation-1);
  }

  .ec-site-nav-toggle__icon,
  .ec-site-nav-toggle__icon::before,
  .ec-site-nav-toggle__icon::after {
    display: block;
    width: 1.125rem;
    height: 0.125rem;
    border-radius: var(--ec-radius-full);
    background: currentColor;
    content: "";
    transition:
      transform var(--ec-motion-duration-medium) var(--ec-motion-easing-standard),
      opacity var(--ec-motion-duration-medium) var(--ec-motion-easing-standard);
  }

  .ec-site-nav-toggle__icon {
    position: relative;
  }

  .ec-site-nav-toggle__icon::before {
    position: absolute;
    inset-block-start: -0.375rem;
  }

  .ec-site-nav-toggle__icon::after {
    position: absolute;
    inset-block-start: 0.375rem;
  }

  [data-ec-nav-open="true"] .ec-site-nav-toggle__icon {
    background: transparent;
  }

  [data-ec-nav-open="true"] .ec-site-nav-toggle__icon::before {
    transform: translateY(0.375rem) rotate(45deg);
  }

  [data-ec-nav-open="true"] .ec-site-nav-toggle__icon::after {
    transform: translateY(-0.375rem) rotate(-45deg);
  }

  .ec-site-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ec-z-overlay) - 1);
    background: var(--ec-sys-color-scrim);
  }

  .ec-site-nav-overlay[hidden] {
    display: none;
  }

  .ec-message-stack {
    display: grid;
    gap: var(--ec-space-3);
    padding-block-start: var(--ec-space-4);
  }

  .ec-message-stack .ec-feedback {
    align-items: start;
  }

  .ec-message-stack__icon {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    font-weight: var(--ec-font-weight-extrabold);
    line-height: 1;
  }

  .ec-site-footer {
    margin-block-start: var(--ec-section-space);
    border-block-start: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
    background: var(--ec-sys-color-primary-pressed);
    color: var(--ec-sys-color-on-primary);
  }

  .ec-site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--ec-space-8);
    padding-block: var(--ec-space-10);
  }

  .ec-site-footer__brand {
    display: block;
    width: min(15rem, 100%);
    height: auto;
    margin-block-end: var(--ec-space-4);
  }

  .ec-site-footer__title {
    margin: 0 0 var(--ec-space-4);
    color: var(--ec-sys-color-on-primary);
    font-size: var(--ec-type-title-md-size);
    line-height: var(--ec-type-title-md-line);
  }

  .ec-site-footer__text,
  .ec-site-footer__link {
    color: var(--ec-sys-color-on-primary);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
    opacity: 0.82;
  }

  .ec-site-footer__text {
    max-width: 34rem;
    margin: 0;
  }

  .ec-site-footer__list {
    display: grid;
    gap: var(--ec-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ec-site-footer__link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    text-decoration: none;
  }

  .ec-site-footer__link:hover {
    color: var(--ec-sys-color-on-primary);
    text-decoration: underline;
    text-underline-offset: 0.22em;
    opacity: 1;
  }

  .ec-site-footer__legal {
    padding-block: var(--ec-space-5);
    border-block-start: var(--ec-border-width-thin) solid color-mix(in srgb, var(--ec-sys-color-on-primary) 18%, transparent);
  }

  .ec-site-footer__legal p {
    margin: 0;
    color: var(--ec-sys-color-on-primary);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
    opacity: 0.82;
  }

  @media (max-width: 839px) {
    .ec-site-header__inner {
      min-height: 4rem;
    }

    .ec-site-header__logo {
      height: 1.875rem;
    }

    .ec-site-nav-toggle {
      display: inline-flex;
      position: relative;
      z-index: calc(var(--ec-z-drawer) + 1);
    }

    .ec-site-nav {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      z-index: var(--ec-z-drawer);
      display: flex;
      width: min(22rem, calc(100vw - 3rem));
      /* `inset-block: 0` deveria esticar o painel à altura da viewport, mas o nav
         é filho de um flex container (.ec-site-header__inner, align-items:center),
         que colapsa a altura do filho posicionado para a do conteúdo — o fundo
         cobria só o topo e os itens vazavam sobre a página. Fixar a altura na
         viewport dinâmica resolve; overflow-y garante rolagem se houver muitos
         itens em telas baixas. */
      min-block-size: 100dvh;
      overflow-y: auto;
      padding: 5.5rem var(--ec-space-5) max(var(--ec-space-6), env(safe-area-inset-bottom));
      flex-direction: column;
      align-items: stretch;
      gap: var(--ec-space-2);
      border-inline-start: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
      background: var(--ec-sys-color-surface);
      box-shadow: var(--ec-elevation-4);
      transform: translateX(105%);
      visibility: hidden;
      transition:
        transform var(--ec-motion-duration-emphasis) var(--ec-motion-easing-standard),
        visibility 0s linear var(--ec-motion-duration-emphasis);
    }

    [data-ec-nav-open="true"] .ec-site-nav {
      transform: translateX(0);
      visibility: visible;
      transition-delay: 0s;
    }

    /* O drawer (.ec-site-nav) vive DENTRO do header, cujo contexto de
       empilhamento (z-sticky: 100) fica abaixo do overlay (z: 599). Sem elevar
       o header enquanto o menu está aberto, o scrim é pintado por cima do painel
       e captura os toques — o menu abre mas fica inclicável. Elevá-lo acima do
       overlay mantém painel e botão de fechar operáveis. */
    [data-ec-nav-open="true"] .ec-site-header {
      z-index: var(--ec-z-drawer);
    }

    .ec-site-nav__link {
      justify-content: flex-start;
      min-height: 3rem;
      border-radius: var(--ec-radius-md);
      font-size: var(--ec-type-body-lg-size);
    }

    [data-ec-nav-open="true"] {
      overflow: hidden;
    }

    .ec-site-footer__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 559px) {
    .ec-site-footer__grid {
      grid-template-columns: 1fr;
      gap: var(--ec-space-7);
      padding-block: var(--ec-space-9);
    }
  }
}