/* Componentes comuns da OZATI: barra do topo, menu, aberturas, dados, formulários, avisos e rodapé.
   Botões ficam no glass.css; cartões, trilhos e banners no cards.css. O HTML de cada um está em docs/design-system.md. */
@layer components {
  /* Barra do topo (estilo Bonança / Apple):
     No topo da página, a barra é ampla, integrada e sem corte de cápsula.
     Ao rolar (.site-header.slim), a barra flutua com respiro superior, encolhe
     em cápsula concêntrica e ativa o vidro líquido (Liquid Glass) com sombra suave. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    padding-top: 0;
    pointer-events: none;
    transition: padding var(--duracao-longa) var(--curva-fluida);
  }
  .site-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-4);
    min-height: 4.5rem;
    padding: var(--espaco-2) var(--margem-lateral);
    border-radius: 0;
    pointer-events: auto;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 0;
    transition:
      min-height var(--duracao-longa) var(--curva-fluida),
      max-width var(--duracao-longa) var(--curva-fluida),
      padding var(--duracao-longa) var(--curva-fluida),
      border-radius var(--duracao-longa) var(--curva-fluida);
  }
  .site-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--vidro-forte);
    -webkit-backdrop-filter: blur(calc(var(--vidro-desfoque) * 2.4)) saturate(var(--vidro-saturacao));
    backdrop-filter: blur(calc(var(--vidro-desfoque) * 2.4)) saturate(var(--vidro-saturacao));
    box-shadow:
      inset 0 0 0 1px var(--vidro-contorno),
      inset 1.5px 2px 0 -1px var(--vidro-luz),
      inset -1.5px -2px 0 -1px var(--vidro-luz-suave),
      0 12px 32px -12px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.6));
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
    transition: opacity 0.5s var(--curva-fluida), transform 0.6s var(--curva-fluida);
  }
  .site-header.slim {
    padding-top: clamp(8px, 1.2vw, 14px);
  }
  .site-header.slim .site-bar {
    min-height: var(--altura-barra);
    max-width: min(1200px, calc(100% - 24px));
    margin-inline: auto;
    padding: var(--espaco-1) var(--espaco-1) var(--espaco-1) var(--espaco-5);
    border-radius: var(--raio-controle);
  }
  .site-header.slim .site-bar::before {
    opacity: 1;
    transform: scale(1);
  }
  @media (width >= 48rem) {
    .site-bar {
      padding: var(--espaco-3) var(--espaco-6);
    }
    .site-header.slim .site-bar {
      padding: var(--espaco-2) var(--espaco-2) var(--espaco-2) var(--espaco-5);
    }
  }
  .site-logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    color: var(--cor-texto);
  }
  .site-logo-svg {
    width: auto;
    height: 22px;
    transition: height var(--duracao-entrada) var(--curva-fluida);
  }
  .site-header.slim .site-logo-svg {
    height: 19px;
  }

  /* Menu: no celular é um popover nativo aberto pelo botão (sem JS; Esc e toque fora fecham e o foco
     volta ao botão) e sai dele como um painel de vidro. Do tablet para cima, a lista fica na barra. */
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--alvo-toque); height: var(--alvo-toque); padding: 0; background: none; border: 0; border-radius: var(--raio-controle); }
  .menu-toggle-line { transform-box: fill-box; transform-origin: center; transition: transform var(--duracao-media) var(--curva-saida); }
  .site-header:has(.site-nav:popover-open) .menu-toggle-line:first-child { transform: translateY(3px) rotate(45deg); }
  .site-header:has(.site-nav:popover-open) .menu-toggle-line:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-menu a { text-decoration: none; }

  @media (width < 48rem) {
    .site-nav { inset: calc(var(--altura-barra) + 2 * var(--espaco-3)) var(--margem-lateral) auto; width: auto; height: auto; max-width: none; max-height: calc(100svh - var(--altura-barra) - 4 * var(--espaco-3)); margin: 0; padding: var(--espaco-4) var(--espaco-5) var(--espaco-5); border-radius: var(--raio-cartao); color: var(--cor-texto); overflow-y: auto; opacity: 0; scale: 0.94; transform-origin: top right; transition: opacity var(--duracao-media) var(--curva-saida), scale var(--duracao-media) var(--curva-mola), overlay var(--duracao-media) allow-discrete, display var(--duracao-media) allow-discrete; }
    .site-nav:popover-open { display: flex; flex-direction: column; gap: var(--espaco-5); opacity: 1; scale: 1; }
    @starting-style { .site-nav:popover-open { opacity: 0; scale: 0.94; } }
    .site-nav .button { width: 100%; min-height: var(--alvo-toque); font-size: var(--texto-apoio); }
    .site-menu a { display: flex; align-items: center; min-height: 3rem; font-size: 1.5rem; font-weight: var(--peso-semi); letter-spacing: var(--tracking-titulo); }
    .site-menu a[aria-current="page"] { color: var(--cor-texto-suave); }
  }
  @media (width >= 48rem) {
    .menu-toggle { display: none; }
    /* A lista entra na própria barra: sem segundo vidro por cima do primeiro */
    .site-header .site-nav { position: static; display: flex; align-items: center; gap: var(--espaco-4); inset: auto; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: inherit; }
    .site-menu { display: flex; gap: var(--espaco-1); }
    .site-menu a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--espaco-3); border-radius: var(--raio-controle); color: var(--cor-texto-suave); font-size: 0.875rem; transition: color var(--duracao-rapida) var(--curva-padrao); }
    .site-menu a:hover, .site-menu a[aria-current="page"] { color: var(--cor-texto); }
  }

  /* Link com seta, para "saiba mais" e destinos dentro do texto */
  .link-arrow { display: inline-flex; align-items: center; gap: 0.3em; min-height: var(--alvo-toque); color: var(--cor-texto); font-weight: var(--peso-medio); text-decoration: none; }
  .link-arrow::after { content: "›"; content: "›" / ""; font-size: 1.2em; line-height: 1; transition: translate var(--duracao-rapida) var(--curva-padrao); }
  .link-arrow:hover { text-decoration: underline; }
  .link-arrow:hover::after { translate: 2px 0; }

  /* Abertura da home e de páginas de venda: título grande, resumo e no máximo duas ações */
  .hero { padding-block: clamp(4rem, 2rem + 9vw, 9rem) var(--espaco-secao); }
  /* Palco da home: as partículas de bolinhas (hero.js) ocupam a hero de ponta a ponta,
     livres entre o fundo e os componentes (texto e ações), sem serem cortadas nas bordas da seção.
     Sem JS ou com movimento reduzido, o logo em SVG aparece no centro do palco. */
  .hero-stage { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: max(36rem, 100svh); margin-top: calc(-1 * var(--barra-total)); padding: calc(var(--barra-total) + var(--espaco-7)) 0 var(--espaco-7); overflow: visible; text-align: center; }

  .hero-stage .container { position: relative; z-index: 2; }
  .hero-particles { position: absolute; inset: -30px 0 -50px 0; z-index: 1; width: 100%; height: calc(100% + 80px); pointer-events: auto; touch-action: none; color: var(--cor-texto); background-color: var(--cor-fundo); }
  .hero-glass { display: none; }
  .hero-stage .hero-logo { margin-inline: auto; transition: opacity var(--duracao-media) var(--curva-padrao); }
  .hero-stage.is-live .hero-logo { opacity: 0; pointer-events: none; }
  .hero-stage .hero-lead { margin-inline: auto; }
  .hero-stage .hero-actions { justify-content: center; position: relative; z-index: 2; }

  /* O nome OZATI como abertura: o logo ocupa a coluna, como no frame do Figma (nó 12:3) */
  .hero-brand { line-height: 0; }
  .hero-logo { display: block; width: 100%; max-width: 56rem; height: auto; color: var(--cor-texto); }
  .hero-brand + .hero-lead { margin-top: var(--espaco-6); }
  .hero-title { max-width: 18ch; font-size: var(--texto-display); letter-spacing: var(--tracking-display); line-height: 1.04; }
  /* Título de frase inteira (mais de ~35 caracteres): o tamanho de display tomaria a tela toda */
  .hero-title-long { max-width: 24ch; font-size: var(--texto-titulo-1); letter-spacing: var(--tracking-titulo); line-height: var(--entrelinha-titulo); }
  .hero-lead { max-width: 38rem; margin-top: var(--espaco-5); color: var(--cor-texto-suave); font-size: var(--texto-destaque); line-height: 1.45; }
  .hero-actions { margin-top: var(--espaco-6); }
  /* Abertura seguida de seção sem faixa: o respiro fica acima do título da seção, não abaixo da abertura */
  :is(.hero, .page-header):has(+ .section:not(.section-alt)) { padding-bottom: 0; }
  .page-header + .section:not(.section-alt) { padding-top: var(--espaco-7); }

  /* Abertura das páginas internas */
  .page-header { padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--espaco-7); }
  .page-title { max-width: 22ch; font-size: var(--texto-titulo-1); }
  .page-lead { max-width: var(--largura-texto); margin-top: var(--espaco-4); color: var(--cor-texto-suave); font-size: var(--texto-destaque); line-height: 1.45; }

  /* Pares rótulo e valor (CNPJ, dados de contato, ficha técnica) */
  .facts { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; border-top: var(--linha); }
  .facts dt, .facts dd { padding-block: var(--espaco-4); border-bottom: var(--linha); }
  .facts dt { padding-right: var(--espaco-4); color: var(--cor-texto-apagado); font-size: var(--texto-apoio); }
  @media (width < 40rem) {
    .facts { grid-template-columns: 1fr; }
    .facts dt { padding-bottom: 0; border-bottom: 0; }
    .facts dd { padding-top: var(--espaco-1); }
  }

  /* Formulários: rótulo sempre visível, dica e erro ligados ao campo por aria-describedby */
  .field { display: grid; gap: var(--espaco-2); }
  .field + .field { margin-top: var(--espaco-5); }
  .field-label { font-size: var(--texto-apoio); font-weight: var(--peso-medio); }
  .field-input { width: 100%; min-height: var(--alvo-toque); padding: 0.625rem 1.125rem; background: var(--cor-fundo); border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-controle); transition: border-color var(--duracao-rapida) var(--curva-padrao); }
  .field-input:hover { border-color: var(--cor-texto-apagado); }
  .field-input:focus-visible { outline-offset: 0; border-color: var(--cor-foco); }
  .field-input[aria-invalid="true"] { border-color: var(--cor-erro); }
  textarea.field-input { min-height: 8rem; padding: 0.875rem 1.125rem; border-radius: var(--raio-cartao); resize: vertical; }
  .field-hint { color: var(--cor-texto-apagado); font-size: var(--texto-legenda); }
  .field-error { color: var(--cor-erro); font-size: var(--texto-legenda); }
  .form-actions { margin-top: var(--espaco-6); }
  .form-status { margin-top: var(--espaco-5); padding: var(--espaco-4) var(--espaco-5); border: 1px solid currentColor; border-radius: var(--raio-cartao); font-size: var(--texto-apoio); }
  .form-status[data-estado="sucesso"] { color: var(--cor-sucesso); }
  .form-status[data-estado="erro"] { color: var(--cor-erro); }

  /* Aviso discreto (espaço em construção, mudança de política) e selo de estado */
  .notice { padding: var(--espaco-5); background: var(--cor-superficie); border-radius: var(--raio-cartao); color: var(--cor-texto-suave); }
  .notice-title { color: var(--cor-texto); font-size: var(--texto-corpo); font-weight: var(--peso-semi); }
  .badge { display: inline-flex; align-items: center; padding: 0.3125rem 0.75rem; border: var(--linha); border-radius: var(--raio-controle); color: var(--cor-texto-suave); font-size: var(--texto-legenda); font-weight: var(--peso-medio); letter-spacing: 0; }

  /* Rodapé em diretório: grupos de links pequenos sobre a superfície, e a linha legal no fim */
  .site-footer { position: relative; z-index: 3; padding-block: var(--espaco-7) var(--espaco-6); background: var(--cor-superficie); color: var(--cor-texto-suave); font-size: var(--texto-legenda); }
  .footer-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-6) var(--espaco-5); }
  @media (width >= 48rem) { .footer-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .footer-title { color: var(--cor-texto); font-size: var(--texto-legenda); font-weight: var(--peso-semi); letter-spacing: 0; }
  .footer-links { margin-top: var(--espaco-2); }
  .footer-links a, .footer-legal a { border-radius: var(--raio-controle); }
  .footer-links a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); text-decoration: none; overflow-wrap: anywhere; }
  .footer-links a:hover { color: var(--cor-texto); text-decoration: underline; }
  .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-3) var(--espaco-5); margin-top: var(--espaco-7); padding-top: var(--espaco-4); border-top: var(--linha); }
  .footer-legal a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); text-decoration: none; }
  .footer-legal a:hover { color: var(--cor-texto); text-decoration: underline; }
  .footer-social { display: flex; margin-left: -12px; }
  .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: var(--alvo-toque); height: var(--alvo-toque); border-radius: var(--raio-controle); }
  .footer-social a:hover { color: var(--cor-texto); background: var(--cor-hover); }

  /* Preferências: discreta, no fim do rodapé; só aparece com JS (o preferencias.js tira o hidden) */
  .preferences { margin-top: var(--espaco-3); }
  .preferences fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espaco-4); margin: 0; padding: 0; border: 0; }
  .preferences legend { float: left; margin-right: var(--espaco-2); padding: 0; color: var(--cor-texto-apagado); }
  .preferences label { display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--alvo-toque); cursor: pointer; }
  .preferences input { margin: 0; accent-color: var(--cor-texto); }
}