/* ============================================================================
   LAYOUT.CSS — ANALIST.COM
   Brutalismo Estrutural: Grid como linguagem, não scaffolding.
   
   DEPENDÊNCIAS: base.css → design-tones.css → este arquivo
   
   ARQUITETURA:
   @layer layout      — containers, grid system, flow
   @layer navigation  — header, navbar, drawer
   @layer hero        — hero section
   @layer patterns    — padrões de grid reutilizáveis
   @layer components  — botões, cards, elementos de UI
   @layer overrides   — ajustes de breakpoint específicos
   ============================================================================ */

@layer reset, tokens, base, brand, themes, atmosphere,
       layout, navigation, hero, patterns, components,
       states, utilities, overrides;


/* ─────────────────────────────────────────────────
   1. LAYOUT — Fundação Estrutural
───────────────────────────────────────────────── */
@layer layout {

  /* ── FLOW — Ritmo Vertical Global ────────────── */
  /* Ao invés de margin em cada elemento,
     definimos o ritmo no pai. */
  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-6));
  }

  .flow--tight > * + * { --flow-space: var(--space-4); }
  .flow--loose > * + * { --flow-space: var(--space-12); }
  .flow--hero  > * + * { --flow-space: var(--space-16); }

  /* ── CONTAINERS ──────────────────────────────── */
  /* 3 tamanhos semânticos, todos responsivos */
  .container {
    --_max: var(--container, min(100% - (var(--gutter) * 2), 72rem));
    width: min(var(--_max), 100% - (var(--gutter) * 2));
    margin-inline: auto;
  }

  .container--tight  { --container: var(--container-tight); }
  .container--wide   { --container: var(--container-wide); }
  .container--full   { --container: 100%; }

  /* ── SECTION WRAPPER ─────────────────────────── */
  /* Section sem nome de componente — reutilizável */
  .section {
    padding-block: var(--section-primary);
    width: 100%;
    position: relative;
  }

  .section--hero     { padding-block: var(--section-hero); }
  .section--sm       { padding-block: var(--section-secondary); }
  .section--tight    { padding-block: var(--section-tight); }
  .section--flush    { padding-block: 0; }
  .section--bordered {
    border-block-start: var(--border-width-brutal) solid var(--border-default);
  }
  .section--inverse {
    background-color: var(--ink);
    color: var(--paper);
  }

  /* ── SECTION HEADER ──────────────────────────── */
  .section__header {
    margin-block-end: var(--space-12);
  }

  .section__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-accent);
    margin-block-end: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  /* Linha antes do eyebrow */
  .section__eyebrow::before {
    content: '';
    display: inline-block;
    width: var(--space-8);
    height: var(--border-width-brutal);
    background: var(--brand-accent);
    flex-shrink: 0;
  }

  .section__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    color: var(--ink);
    text-wrap: balance;
    margin-block: 0;
  }

  .section__subtitle {
    font-family: var(--font-brand-body);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--text-muted);
    max-width: 56ch;
    margin-block-start: var(--space-4);
    font-style: italic;
  }

  /* ── CLUSTER — itens em linha com wrap ───────── */
  /* Substitui flexbox manual repetido em todo lugar */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-4));
    align-items: var(--cluster-align, center);
    justify-content: var(--cluster-justify, flex-start);
  }

  .cluster--center  { --cluster-justify: center; }
  .cluster--between { --cluster-justify: space-between; }
  .cluster--end     { --cluster-justify: flex-end; }
  .cluster--stretch { --cluster-align: stretch; }
  .cluster--start   { --cluster-align: flex-start; }

  /* ── STACK — coluna com gap semântico ────────── */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-4));
    justify-content: var(--stack-justify, flex-start);
    align-items: var(--stack-align, stretch);
  }

  .stack--center { --stack-align: center; }
  .stack--end    { --stack-align: flex-end; }

  /* ── SWITCHER — muda de coluna pra linha ─────── */
  /* O componente mais inteligente do layout:
     Empilha verticalmente ATÉ atingir --switch-threshold,
     então muda para horizontal. Zero @media query. */
  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap, var(--space-8));
  }

  .switcher > * {
    flex-grow: 1;
    flex-basis: calc(
      (var(--switcher-threshold, 40rem) - 100%) * 999
    );
  }

  /* ── COVER — seção de altura mínima centralizada */
  /* Substitui o min-height: 100vh + flexbox center */
  .cover {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: var(--cover-min-height, 100svh);
  }

  .cover > * { grid-row: 2; }
  .cover > :first-child:not(.cover__center) { grid-row: 1; }
  .cover > :last-child:not(.cover__center)  { grid-row: 3; }

  /* ── SIDEBAR ─────────────────────────────────── */
  /* Layout com barra lateral — intrinsically responsive */
  .with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap, var(--space-8));
  }

  /* Sidebar (elemento menor) */
  .with-sidebar > :first-child {
    flex-basis: var(--sidebar-width, 20rem);
    flex-grow: 1;
    min-width: 0;
  }

  /* Conteúdo principal (elemento maior) */
  .with-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-min, 60%);
  }
}


/* ─────────────────────────────────────────────────
   2. NAVIGATION — Header, Navbar, Mobile Drawer
   
   Técnica: Checkbox hack moderno + :has()
   Zero JS necessário para o toggle básico.
   JS pode adicionar aria-expanded para acessibilidade.
───────────────────────────────────────────────── */
@layer navigation {

  /* ── HEADER ──────────────────────────────────── */
  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    width: 100%;

    /* Altura via custom property — alterável por JS */
    --header-height: clamp(52px, 8vw, 68px);
    height: var(--header-height);

    display: grid;
    grid-template-columns: 1fr;
    align-items: center;

    background-color: var(--paper);
    border-block-end: var(--border-width-brutal) solid var(--ink);

    /* Safe area para notch de celular */
    padding-inline: max(var(--gutter), env(safe-area-inset-left));
    padding-block-start: max(0px, env(safe-area-inset-top));

    /* Transição suave no scroll — definida via JS com
       scroll-driven animation como enhancement */
    transition:
      background-color var(--duration-base) var(--ease-heavy),
      border-color var(--duration-base) var(--ease-heavy);
  }

  /* Estado scrolled — adicionado via JS ou scroll-driven */
  .header[data-scrolled] {
    background-color: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
  }

  /* ── NAVBAR CONTAINER ────────────────────────── */
  .navbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-6);
    width: min(var(--container-wide), 100%);
    margin-inline: auto;
    height: 100%;
    container-type: inline-size;
    container-name: navbar;
  }

  /* ── BRAND ───────────────────────────────────── */
  .navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    background: none;
    padding: var(--space-2);
    margin-inline-start: calc(-1 * var(--space-2));
    /* Sem border-radius — brutalismo */
    transition: background-color var(--transition-snap);
  }

  .navbar__brand:hover {
    background-color: var(--mark);
  }

  /* Remove o underline animado do base.css para o brand */
  .navbar__brand {
    background-image: none;
  }

  .navbar__brand:hover {
    background-image: none;
    color: inherit;
  }

  .navbar__logo {
    block-size: clamp(24px, 5vw, 40px);
    width: auto;
    display: block;
  }

  .navbar__brand-name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-none);
    color: var(--ink);
    white-space: nowrap;
  }

  /* Ponto vermelho no brand name — detalhe de marca */
  .navbar__brand-name::after {
    content: '.';
    color: var(--brand-accent);
  }

  /* ── MENU — Desktop ──────────────────────────── */
  .navbar__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
  }

  .navbar__link {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    background-image: none;
    transition:
      color var(--transition-snap),
      background-color var(--transition-snap);
    white-space: nowrap;
    position: relative;
  }

  .navbar__link::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: var(--space-3);
    inset-inline-end: var(--space-3);
    height: var(--border-width-brutal);
    background: var(--brand-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-snap);
  }

  .navbar__link:hover {
    color: var(--ink);
    background: none;
    background-image: none;
  }

  .navbar__link:hover::after {
    transform: scaleX(1);
  }

  .navbar__link[aria-current="page"] {
    color: var(--ink);
  }

  .navbar__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  /* ── DROPDOWN ────────────────────────────────── */
  .dropdown-wrapper {
    position: relative;
  }

  .navbar__link--dropdown::after {
    display: none; /* sem linha no dropdown trigger */
  }

  .navbar__link--dropdown .dropdown-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-inline-start: 4px solid transparent;
    border-inline-end: 4px solid transparent;
    border-block-start: 5px solid currentColor;
    margin-inline-start: var(--space-2);
    transition: transform var(--transition-snap);
    vertical-align: middle;
  }

  .dropdown-wrapper:hover .dropdown-arrow,
  .dropdown-wrapper:focus-within .dropdown-arrow {
    transform: rotate(180deg);
  }

  .navbar__submenu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-inline-size: 200px;

    background-color: var(--paper);
    border: var(--border-width-brutal) solid var(--ink);
    box-shadow: var(--shadow-brutal);

    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--transition-snap),
      transform var(--transition-snap),
      visibility var(--transition-snap);
  }

  .dropdown-wrapper:hover .navbar__submenu,
  .dropdown-wrapper:focus-within .navbar__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .navbar__sublink {
    display: block;
    padding: var(--space-2) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    background-image: none;
    transition:
      background-color var(--transition-snap),
      color var(--transition-snap),
      padding-inline-start var(--transition-snap);
  }

  .navbar__sublink:hover {
    background-color: var(--mark);
    color: var(--ink);
    background-image: none;
    padding-inline-start: var(--space-6);
  }

  /* ── NAVBAR ACTIONS ──────────────────────────── */
  .navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: end;
  }

  /* ── THEME TOGGLE ────────────────────────────── */
  .navbar__theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border: var(--border-width-brutal) solid var(--scar);
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    position: relative;
    overflow: hidden;
    transition:
      border-color var(--transition-snap),
      color var(--transition-snap),
      background-color var(--transition-snap);
  }

  .navbar__theme-toggle:hover {
    border-color: var(--ink);
    color: var(--ink);
    background-color: var(--mark);
  }

  /* Ícones de tema — estados opostos */
  .navbar__theme-toggle .icon-sun,
  .navbar__theme-toggle .icon-moon {
    position: absolute;
    transition:
      opacity var(--duration-base) var(--ease-heavy),
      transform var(--duration-base) var(--ease-spring);
  }

  .navbar__theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg); }
  .navbar__theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg); }

  [data-theme="dark"] .navbar__theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg); }
  [data-theme="dark"] .navbar__theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg); }

  /* ── HAMBURGER TOGGLE ────────────────────────── */
  .navbar__toggle {
    display: none; /* visível apenas em mobile via container query */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    inline-size: 40px;
    block-size: 40px;
    border: var(--border-width-brutal) solid var(--scar);
    background: none;
    cursor: pointer;
    padding: var(--space-2);
    align-items: center;
    transition:
      border-color var(--transition-snap),
      background-color var(--transition-snap);
  }

  .navbar__toggle:hover {
    border-color: var(--ink);
    background-color: var(--mark);
  }

  .navbar__toggle-bar {
    display: block;
    inline-size: 18px;
    block-size: var(--border-width-brutal);
    background-color: var(--ink);
    transform-origin: center;
    transition:
      transform var(--duration-base) var(--ease-snap),
      opacity var(--duration-fast) var(--ease-linear),
      width var(--duration-base) var(--ease-snap);
  }

  /* Estado aberto — transforma em × */
  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* ── MOBILE DRAWER ───────────────────────────── */
  /* Posição fixa, desliza da esquerda.
     Sem display: none / flex toggle.
     Usa clip-path para transição suave. */
  .navbar__drawer {
    position: fixed;
    inset-block-start: var(--header-height);
    inset-inline-start: 0;
    inset-inline-end: 0;
    block-size: calc(100svh - var(--header-height));
    z-index: var(--z-overlay);

    background-color: var(--paper);
    border-block-start: var(--border-width-brutal) solid var(--ink);

    overflow-y: auto;
    overscroll-behavior: contain;

    /* Escondido via clip-path — mais performático que display toggle */
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path var(--duration-slow) var(--ease-snap);

    /* Safe areas */
    padding-block-end: max(var(--space-8), env(safe-area-inset-bottom));
    padding-inline: max(var(--gutter), env(safe-area-inset-left));
  }

  .navbar__drawer[aria-hidden="false"],
  .navbar__drawer.is-open {
    clip-path: inset(0 0 0% 0);
  }

  .navbar__drawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .navbar__drawer-item {
    border-block-end: var(--border-width-thin) solid var(--border-default);
  }

  .navbar__drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-none);
    color: var(--ink);
    text-decoration: none;
    background-image: none;
    transition: color var(--transition-snap);
  }

  .navbar__drawer-link::after {
    content: '→';
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--brand-accent);
    transform: translateX(-8px);
    opacity: 0;
    transition:
      transform var(--transition-snap),
      opacity var(--transition-snap);
  }

  .navbar__drawer-link:hover {
    color: var(--brand-accent);
    background: none;
    background-image: none;
  }

  .navbar__drawer-link:hover::after {
    transform: translateX(0);
    opacity: 1;
  }

  /* ── CONTAINER QUERY — Mobile nav ────────────── */
  /* A grande virada: navbar responde ao SEU tamanho,
     não à viewport. Funciona em qualquer contexto. */
  @container navbar (max-width: 700px) {

    .navbar__menu {
      display: none; /* esconde menu desktop */
    }

    .navbar__toggle {
      display: inline-flex; /* mostra hamburger */
    }
  }

  @container navbar (min-width: 701px) {

    .navbar__drawer {
      /* Em desktop, drawer nunca aparece visualmente */
      clip-path: inset(0 0 100% 0) !important;
      pointer-events: none;
    }
  }

  /* ── OVERLAY DE FUNDO ────────────────────────── */
  .navbar__overlay {
    position: fixed;
    inset: 0;
    inset-block-start: var(--header-height);
    background: color-mix(in srgb, var(--ink) 40%, transparent);
    z-index: calc(var(--z-overlay) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-heavy);
  }

  .navbar__overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}


/* ─────────────────────────────────────────────────
   3. HERO — Seção Principal
   
   Técnica: Grid com named areas, sem pixel hardcoded.
───────────────────────────────────────────────── */
@layer hero {

  .hero {
    padding-block: var(--section-hero);
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    container-name: hero;
  }

  /* Grid responsivo com named lines */
  .hero__layout {
    display: grid;
    grid-template-columns:
      [full-start]
        var(--gutter)
      [content-start]
        1fr
      [mid]
        1fr
      [content-end]
        var(--gutter)
      [full-end];
    grid-template-rows:
      [above]
        auto
      [main-start]
        1fr
      [main-end]
        auto
      [below];
    gap: var(--space-8) 0;
    min-block-size: 80svh;
    align-items: center;
    width: 100%;
  }

  .hero__content {
    grid-column: content-start / content-end;
    grid-row: main-start / main-end;
  }

  .hero__visual {
    grid-column: content-start / content-end;
    grid-row: below;
    opacity: 0.12;
  }

  /* ── HERO COPY ───────────────────────────────── */
  .hero__kicker {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-accent);
    margin-block-end: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .hero__kicker::before {
    content: '';
    display: block;
    inline-size: var(--space-12);
    block-size: var(--border-width-brutal);
    background: var(--brand-accent);
  }

  .hero__heading {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tightest);
    color: var(--ink);
    text-wrap: balance;
    margin-block: 0;
  }

  /* Linha destacada em vermelho */
  .hero__heading mark {
    background: none;
    color: var(--brand-accent);
    font-style: normal;
    padding: 0;
  }

  /* Linha com sublinhado textual */
  .hero__heading u {
    text-decoration: underline;
    text-decoration-color: var(--brand-accent);
    text-decoration-thickness: var(--border-width-brutal);
    text-underline-offset: var(--space-2);
  }

  .hero__subheading {
    font-family: var(--font-brand-body);
    font-size: var(--text-xl);
    font-style: italic;
    line-height: var(--leading-snug);
    color: var(--text-muted);
    max-width: 52ch;
    margin-block-start: var(--space-6);
    margin-block-end: 0;
  }

  .hero__actions {
    margin-block-start: var(--space-10);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
  }

  /* Ticker de números em tempo real */
  .hero__stats {
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-8);
    border-block-start: var(--border-width-brutal) solid var(--border-default);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  .hero__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .hero__stat-value {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tightest);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .hero__stat-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* ── CONTAINER QUERY — Hero ──────────────────── */
  /* Layout de duas colunas quando o hero tiver espaço */
  @container hero (min-width: 768px) {

    .hero__layout {
      grid-template-columns:
        [full-start]
          var(--gutter)
        [content-start]
          var(--col-golden-lg)
        [mid]
          var(--col-golden-sm)
        [content-end]
          var(--gutter)
        [full-end];
    }

    .hero__content {
      grid-column: content-start / mid;
    }

    .hero__visual {
      grid-column: mid / content-end;
      grid-row: main-start / main-end;
      opacity: 1;
    }
  }
}


/* ─────────────────────────────────────────────────
   4. PATTERNS — Sistemas de Grid Reutilizáveis
   
   Filosofia: padrões, não componentes.
   .grid-auto-fill → qualquer seção de cards
   .grid-sidebar   → qualquer layout com barra
   .grid-bento     → qualquer layout irregular
───────────────────────────────────────────────── */
@layer patterns {

  /* ── AUTO-FILL GRID ──────────────────────────── */
  /* Grid que cria colunas automaticamente.
     Sem breakpoints, sem media queries. */
  .grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(min(var(--grid-min-col, 280px), 100%), 1fr)
    );
    gap: var(--grid-gap, var(--space-6));
  }

  /* Variantes de tamanho mínimo */
  .grid-auto-fill--sm  { --grid-min-col: 200px; }
  .grid-auto-fill--md  { --grid-min-col: 280px; }
  .grid-auto-fill--lg  { --grid-min-col: 360px; }
  .grid-auto-fill--xl  { --grid-min-col: 480px; }

  /* ── GRID DE 2 COLUNAS (DOURADO) ─────────────── */
  .grid-golden {
    display: grid;
    grid-template-columns: var(--col-golden-lg) var(--col-golden-sm);
    gap: var(--space-12);
    align-items: start;
  }

  .grid-golden--reverse {
    grid-template-columns: var(--col-golden-sm) var(--col-golden-lg);
  }

  /* ── GRID DE 12 COLUNAS COM SUBGRID ──────────── */
  /* O padrão mais poderoso — filhos se alinham ao
     grid do pai sem duplicar a definição */
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-6);
    container-type: inline-size;
    container-name: grid-12;
  }

  /* Filhos do grid-12 alinham ao SUBGRID */
  .grid-12 > .subgrid {
    display: grid;
    grid-column: span 12;
    grid-template-columns: subgrid;
    gap: inherit;
  }

  /* ── BENTO GRID ──────────────────────────────── */
  /* Layout irregular estilo Apple — áreas nomeadas.
     Declare as áreas no elemento filho via class. */
  .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(var(--space-24), auto);
    gap: var(--space-4);
    container-type: inline-size;
    container-name: bento;
  }

  /* Tamanhos de célula pré-definidos */
  .bento__item         { grid-column: span 3; }
  .bento__item--wide   { grid-column: span 4; }
  .bento__item--narrow { grid-column: span 2; }
  .bento__item--full   { grid-column: span 6; }
  .bento__item--tall   { grid-row: span 2; }
  .bento__item--hero   { grid-column: span 4; grid-row: span 2; }

  /* Container query — colapsa bento em mobile */
  @container bento (max-width: 600px) {
    .bento__item,
    .bento__item--wide,
    .bento__item--narrow,
    .bento__item--hero {
      grid-column: span 6;
      grid-row: span 1;
    }
  }

  /* ── MASONRY — simulação CSS pura ────────────── */
  .masonry {
    columns: var(--masonry-cols, 3);
    column-gap: var(--space-6);
  }

  .masonry > * {
    break-inside: avoid;
    margin-block-end: var(--space-6);
  }

  /* ── GRID EDITORIAL ──────────────────────────── */
  /* Grid de revista: texto e imagem sobrepostos */
  .grid-editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .grid-editorial__headline {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-block-end: var(--space-4);
    border-block-end: var(--border-width-brutal) solid var(--ink);
    margin-block-end: var(--space-4);
  }

  .grid-editorial__main {
    grid-column: 1;
    grid-row: 2;
    padding-inline-end: var(--space-8);
    border-inline-end: var(--border-width-brutal) solid var(--ink);
  }

  .grid-editorial__aside {
    grid-column: 2;
    grid-row: 2;
    padding-inline-start: var(--space-8);
  }

  /* ── FEATURE SECTION ─────────────────────────── */
  /* Seção de feature com texto e visual lado a lado */
  .feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
    container-type: inline-size;
    container-name: feature;
  }

  @container feature (min-width: 640px) {
    .feature {
      grid-template-columns: 1fr 1fr;
    }

    .feature--reversed .feature__content { order: 2; }
    .feature--reversed .feature__visual  { order: 1; }
  }

  /* ── CARDS GRID (substitui .services__grid etc.) ─ */
  /* Container query: cards respondem ao container, não viewport */
  .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    container-type: inline-size;
    container-name: cards-grid;
  }

  @container cards-grid (min-width: 480px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @container cards-grid (min-width: 800px) {
    .cards-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @container cards-grid (min-width: 1100px) {
    .cards-grid { grid-template-columns: repeat(4, 1fr); }
  }

  /* Variante de 2 colunas fixas */
  .cards-grid--2 {
    container-name: cards-grid-2;
  }

  @container cards-grid-2 (min-width: 480px) {
    .cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── FOOTER GRID ─────────────────────────────── */
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    container-type: inline-size;
    container-name: footer-grid;
  }

  @container footer-grid (min-width: 480px) {
    .footer-grid {
      grid-template-columns: 2fr repeat(3, 1fr);
    }
  }

  /* ── SUBGRID — Alinhamento de card internos ──── */
  /* Quando cards estão em um grid, seus filhos
     precisam se alinhar entre si sem JS. */
  .card-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
    align-items: start;
  }

  /* Card com subgrid: título, corpo e CTA sempre alinhados */
  .card-group > .card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-self: stretch;
  }
}


/* ─────────────────────────────────────────────────
   5. COMPONENTS — UI Elements
───────────────────────────────────────────────── */
@layer components {

  /* ── CARD ────────────────────────────────────── */
  .card {
    background: var(--surface-secondary);
    border: var(--border-width-brutal) solid var(--border-default);
    padding: var(--space-8);
    position: relative;
    overflow: hidden;
    transition:
      transform var(--transition-snap),
      box-shadow var(--transition-snap),
      border-color var(--transition-snap);
    container-type: inline-size;
    container-name: card;
  }

  .card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-strong);
  }

  /* Linha de acento no topo do card — cor via --card-accent */
  .card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--border-width-brutal);
    background: var(--card-accent, transparent);
    transition: background-color var(--transition-snap);
  }

  .card:hover::before,
  .card--featured::before {
    --card-accent: var(--brand-accent);
  }

  .card__number {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: var(--leading-none);
    color: color-mix(in srgb, var(--ink) 15%, var(--paper));
    margin-block-end: var(--space-4);
    letter-spacing: var(--tracking-tightest);
  }

  .card__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin-block-end: var(--space-4);
  }

  .card__body {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    flex: 1;
    max-width: 100%;
  }

  .card__footer {
    padding-block-start: var(--space-6);
    margin-block-start: var(--space-6);
    border-block-start: var(--border-width-thin) solid var(--border-default);
  }

  /* Variante: card invertido */
  .card--inverse {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    --card-accent: var(--brand-accent);
  }

  .card--inverse .card__title { color: var(--paper); }
  .card--inverse .card__body  { color: color-mix(in srgb, var(--paper) 65%, var(--ink)); }

  /* ── BUTTONS ─────────────────────────────────── */
  /* Sistema de botões brutalista:
     Sombra deslocada ao invés de border-radius.
     Hover desloca o botão para cancelar a sombra. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    padding: var(--space-3) var(--space-6);
    min-block-size: 48px;

    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    text-decoration: none;
    background-image: none;
    white-space: nowrap;

    border: var(--border-width-brutal) solid var(--ink);
    border-radius: var(--radius-none);
    background: transparent;
    color: var(--ink);
    cursor: pointer;

    /* Sombra deslocada — identidade brutalista */
    box-shadow: var(--shadow-base);

    transition:
      transform var(--transition-snap),
      box-shadow var(--transition-snap),
      background-color var(--transition-snap),
      color var(--transition-snap);

    position: relative;
    overflow: hidden;
  }

  /* Hover: desloca para "encaixar" na sombra */
  .btn:hover {
    transform: translate(3px, 3px);
    box-shadow: none;
    background: none;
    background-image: none;
    color: var(--ink);
  }

  .btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
  }

  /* Variante primária — fundo sólido */
  .btn--primary {
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-brand);
  }

  .btn--primary:hover {
    background: var(--ink);
    color: var(--paper);
  }

  /* Variante de acento */
  .btn--accent {
    background: var(--brand-accent);
    color: var(--analist-paper);
    border-color: var(--brand-accent);
    box-shadow: var(--shadow-brand);
  }

  .btn--accent:hover {
    background: var(--brand-accent);
    color: var(--analist-paper);
  }

  /* Variante ghost */
  .btn--ghost {
    border-color: var(--border-default);
    color: var(--text-muted);
    box-shadow: none;
  }

  .btn--ghost:hover {
    border-color: var(--ink);
    color: var(--ink);
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  /* Tamanhos */
  .btn--sm {
    padding: var(--space-2) var(--space-4);
    min-block-size: 36px;
    font-size: var(--text-2xs);
  }

  .btn--lg {
    padding: var(--space-4) var(--space-10);
    min-block-size: 56px;
    font-size: var(--text-sm);
  }

  /* Botão full-width */
  .btn--full { width: 100%; }

  /* ── WHATSAPP ─────────────────────────────────── */
  .whatsapp-btn {
    position: fixed;
    inset-block-end: max(var(--space-8), calc(var(--space-8) + env(safe-area-inset-bottom)));
    inset-inline-end: max(var(--space-8), calc(var(--space-8) + env(safe-area-inset-right)));
    z-index: var(--z-toast);

    inline-size: 56px;
    block-size: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #25d366;
    color: #fff;
    border: var(--border-width-brutal) solid #128c7e;
    box-shadow: var(--shadow-brutal);
    text-decoration: none;
    background-image: none;

    transition:
      transform var(--transition-snap),
      box-shadow var(--transition-snap);
  }

  .whatsapp-btn:hover {
    transform: translate(3px, 3px);
    box-shadow: none;
    background-image: none;
    color: #fff;
  }

  /* ── FOOTER ──────────────────────────────────── */
  .footer {
    padding-block: var(--section-secondary);
    border-block-start: var(--border-width-brutal) solid var(--ink);
    background: var(--surface-secondary);
    container-type: inline-size;
    container-name: footer;
  }

  .footer__brand {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tighter);
    margin-block-end: var(--space-4);
    display: inline-block;
    text-decoration: none;
    background: none;
    background-image: none;
    color: var(--ink);
  }

  .footer__brand:hover {
    background: none;
    background-image: none;
    color: var(--brand-accent);
  }

  .footer__brand::after {
    content: '.';
    color: var(--brand-accent);
  }

  .footer__heading {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-block-end: var(--space-4);
  }

  .footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .footer__link {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    background-image: none;
    transition: color var(--transition-snap);
  }

  .footer__link:hover {
    color: var(--ink);
    background: none;
    background-image: none;
  }

  .footer__bottom {
    padding-block-start: var(--space-8);
    margin-block-start: var(--space-8);
    border-block-start: var(--border-width-thin) solid var(--border-default);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    align-items: center;
  }

  .footer__copy {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
    text-transform: uppercase;
  }
}


/* ─────────────────────────────────────────────────
   6. OVERRIDES — Breakpoints globais necessários
   
   Apenas para o que container queries não alcançam.
   (Principalmente: body-level, html, scroll behavior)
───────────────────────────────────────────────── */
@layer overrides {

  /* Grid áureo colapsa em mobile */
  @media (max-width: 640px) {
    .grid-golden,
    .grid-golden--reverse {
      grid-template-columns: 1fr;
    }

    .grid-editorial {
      grid-template-columns: 1fr;
    }

    .grid-editorial__main {
      border-inline-end: none;
      border-block-end: var(--border-width-brutal) solid var(--ink);
      padding-inline-end: 0;
      padding-block-end: var(--space-8);
    }

    .grid-editorial__aside {
      padding-inline-start: 0;
    }

    .masonry {
      columns: 1;
    }
  }

  /* Masonry 2 colunas em tablet */
  @media (min-width: 480px) and (max-width: 899px) {
    .masonry { columns: 2; }
  }

  /* Print — oculta navegação e interatividade */
  @media print {
    .header,
    .navbar__toggle,
    .navbar__drawer,
    .navbar__overlay,
    .navbar__theme-toggle,
    .whatsapp-btn {
      display: none !important;
    }

    .section {
      padding-block: var(--space-8);
      page-break-inside: avoid;
    }

    .header {
      position: static;
    }
  }
}