/* ============================================================
   UPWINS · BASE
   Mobília compartilhada por todas as páginas: tipografia, botões,
   barra de vidro, acordeão, formulário de conversão, faixa de rota,
   rodapé, CTA fixa e o sistema de revelação.

   Depende de tokens.css, que precisa vir antes.
   O que é layout de seção mora na folha da página, nunca aqui:
   nenhuma seção repete o layout de outra dentro da mesma página.
   ============================================================ */

/* ---------- 1. BASE ---------- */
body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { color: var(--ink); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
::selection { background: var(--accent); color: var(--on-accent); }

:where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--accent-strong); color: var(--on-accent);
  padding: .75rem 1rem; border-radius: var(--radius);
  text-decoration: none; font-size: var(--fs-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
:where(section[id], main[id]) { scroll-margin-top: 104px; }

.section__title { font-size: var(--fs-h2); max-width: 20ch; text-wrap: balance; }
.section__title--center { margin-inline: auto; text-align: center; max-width: 24ch; }
.section__lead { font-size: var(--fs-lead); color: var(--body); max-width: 58ch; margin-top: 1.25rem; }

/* ---------- 2. BOTÕES E LINKS ----------
   O preenchimento entra pela esquerda no hover. Um gesto só, sem brilho,
   sem escala. Contraste conferido nos dois temas. */
.btn {
  --btn-bg: var(--accent-strong);
  --btn-fg: var(--on-accent);
  --btn-fill: var(--accent-hover);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.35rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s var(--ease);
}
.btn:hover { box-shadow: var(--shadow-md); border-color: var(--btn-fill); }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn:active::before { transition-duration: .1s; }

.btn--lg { padding: 1.05rem 1.75rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--invert { --btn-bg: #FFFFFF; --btn-fg: var(--blue-900); --btn-fill: var(--blue-100); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--invert { --btn-bg: #EFF3F9; --btn-fg: #06091F; --btn-fill: #FFFFFF; }
}
:root[data-theme="dark"] .btn--invert { --btn-bg: #EFF3F9; --btn-fg: #06091F; --btn-fill: #FFFFFF; }

.btn__spinner { display: none; width: 1em; height: 1em; }
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading .btn__label { opacity: .4; }
.btn.is-loading .btn__spinner {
  display: block;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--accent);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  padding-block: .35rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s var(--ease);
}
.link-arrow::after { content: "\2192"; transition: transform .3s var(--ease); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--lg { font-size: var(--fs-lead); }

/* ---------- 3. HEADER ----------
   A barra se desprende ao rolar: a caixa não muda de lugar nem de tamanho,
   só o material aparece. É por isso que não há salto de layout. */
#topo-sentinela { position: absolute; top: 0; height: 24px; width: 100%; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-block: 9px;
  background: none;
}

.barra {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  height: 58px;
  /* O padding entra para fora da linha de conteúdo, então a borda de vidro
     nasce em volta do conteúdo sem empurrar nada. */
  padding-inline: var(--float-out);
  margin-inline: calc(-1 * var(--float-out));
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    background-color .35s cubic-bezier(.2,.65,.3,1),
    border-color     .35s cubic-bezier(.2,.65,.3,1),
    border-radius    .35s cubic-bezier(.2,.65,.3,1),
    box-shadow       .35s cubic-bezier(.2,.65,.3,1);
}

/* Estado solto: vidro. Também vale com o menu aberto, para o painel
   não ficar pendurado em nada. */
.site-header.is-stuck .barra,
.barra.is-solida {
  background-color: var(--glass-bg);
  border-color: var(--glass-border);
  border-radius: var(--radius-float);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-stuck .barra,
  .barra.is-solida {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}
/* Sem transparência: o vidro vira superfície opaca, o contraste não muda. */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-stuck .barra,
  .barra.is-solida {
    background-color: var(--glass-solid);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

.brand { display: inline-flex; align-items: center; color: var(--accent-strong); text-decoration: none; }
.brand__mark { width: 138px; height: auto; transition: color .25s var(--ease); }
.brand:hover .brand__mark { color: var(--accent-hover); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  font-size: var(--fs-sm); font-weight: 500; color: var(--body);
  text-decoration: none; white-space: nowrap; padding-block: .5rem;
  transition: color .22s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: scaleX(1); }

.barra__acoes {
  display: flex; align-items: center; gap: .5rem; flex: none;
}

.theme-toggle {
  display: inline-flex; width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--ink); cursor: pointer; padding: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.theme-toggle:hover { border-color: var(--hairline-strong); background: var(--surface); color: var(--accent); }
.theme-toggle:active { transform: scale(.94); }

.theme-toggle__sun,
.theme-toggle__moon {
  display: none; width: 19px; height: 19px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}

/* Modo claro (padrão): mostra ícone da lua */
.theme-toggle__moon { display: block; }
.theme-toggle__sun  { display: none; }

/* Modo escuro via data-theme="dark" */
:root[data-theme="dark"] .theme-toggle__sun  { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

/* Modo escuro via prefers-color-scheme (se não forçado claro) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}

.nav-toggle {
  display: none; width: 42px; height: 42px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: none; border: 1px solid var(--hairline); border-radius: var(--radius);
  cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nav-toggle:hover { border-color: var(--hairline-strong); background: var(--surface); }
.nav-toggle__bar {
  width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  /* O menu desce da barra como um painel do mesmo material. Fica absoluto
     dentro da barra porque backdrop-filter já é o bloco de contenção dela. */
  .nav {
    position: absolute; top: calc(100% + .6rem); left: 0; right: 0; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem var(--float-out) 1.25rem;
    background-color: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-float);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
    transform: translateY(-8px) scale(.985); transform-origin: top center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .24s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  @supports (backdrop-filter: blur(1px)) {
    .nav { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .nav { background-color: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding-block: .9rem; border-bottom: 1px solid var(--glass-border); }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--accent); }
  .nav__cta { margin-top: 1.1rem; }

  /* No mobile a barra e o painel do menu são opacos: o vidro deixava o
     conteúdo da página aparecer por trás do texto e dos links. */
  .site-header.is-stuck .barra,
  .barra.is-solida,
  .nav {
    background-color: var(--glass-solid);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* Transição suave ao alternar temas manualmente */
html.is-theme-transitioning,
html.is-theme-transitioning *,
html.is-theme-transitioning *::before,
html.is-theme-transitioning *::after {
  transition: background-color .32s var(--ease), border-color .32s var(--ease), color .32s var(--ease), fill .32s var(--ease), stroke .32s var(--ease), box-shadow .32s var(--ease) !important;
  transition-delay: 0s !important;
}

/* ---------- 4. ACORDEÃO ---------- */
.faq { margin-top: clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.35rem;
  font-size: 1.0625rem; font-weight: 500; color: var(--ink);
  cursor: pointer; list-style: none;
  transition: color .22s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: translateY(2px) rotate(-135deg); }
.faq__q:hover { color: var(--accent); }
.faq__a { padding-bottom: 1.5rem; color: var(--body); max-width: 62ch; }

/* Abertura suave nativa onde existe; o main.js anima a altura no resto. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .34s var(--ease), content-visibility .34s allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}
.faq__item.js-anim .faq__a { overflow: hidden; }

/* ---------- 5. CONTATO E FORMULÁRIO ---------- */
.contato__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.contato__pontos { margin-top: 2rem; display: grid; gap: .65rem; }
.contato__pontos li { font-size: var(--fs-sm); color: var(--muted); padding-left: 1.1rem; position: relative; }
.contato__pontos li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--accent);
}

.form {
  display: grid; gap: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.field { display: grid; gap: .5rem; }
.field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.field__input {
  width: 100%; padding: .8rem .9rem;
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input::placeholder { color: var(--muted); }
.field__input:hover { border-color: var(--muted); }
.field__input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field__input--area { resize: vertical; min-height: 7rem; line-height: 1.55; }

/* Select usa a mesma caixa do input, sem a mobília nativa do sistema: solto,
   ele traz a própria borda, o próprio raio e a própria seta, e fica sendo o
   único controle da página que não pertence ao desenho. A seta é um chevron
   desenhado em gradiente, não uma imagem, para acompanhar a cor do texto nos
   dois temas. O padding da direita abre espaço para ela.
   Enquanto a opção vazia está selecionada, o texto fica em --muted: ali ele
   é placeholder, não resposta. */
select.field__input {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + 1px),
    calc(100% - .85rem)  calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.field__input:has(option[value=""]:checked) { color: var(--muted); }
/* A lista aberta é desenhada pelo sistema, então as opções precisam voltar
   ao contraste cheio mesmo quando o campo está em estado de placeholder. */
select.field__input option { color: var(--ink); background: var(--canvas); }
.field__help { font-size: var(--fs-xs); color: var(--muted); }
.field__error { font-size: var(--fs-xs); color: var(--alert); font-weight: 500; }
.field.is-invalid .field__input { border-color: var(--alert); }
.field.is-invalid .field__input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert) 20%, transparent); }

.form__status { font-size: var(--fs-sm); min-height: 1.5rem; }
.form__status.is-error { color: var(--alert); }
.form__status.is-ok { color: var(--good); }
@media (max-width: 860px) { .contato__grid { grid-template-columns: 1fr; } }

/* ---------- 6. FAIXA DE ROTA ---------- */
.rota { border-top: 1px solid var(--hairline); }
.rota__inner {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem; padding-block: clamp(2.5rem, 4vw, 3.5rem);
}
.rota__texto { font-size: var(--fs-lead); color: var(--ink); max-width: 40ch; }

/* ---------- 7. RODAPÉ ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--hairline); }
.site-footer__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem clamp(2rem, 5vw, 4rem); padding-block: clamp(3rem, 5vw, 4.5rem);
}
.site-footer__mark { width: 150px; height: auto; color: var(--accent-strong); }
.site-footer__claim { margin-top: .9rem; font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
.site-footer__nav ul { display: grid; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.site-footer__nav a {
  font-size: var(--fs-sm); color: var(--body); text-decoration: none;
  transition: color .2s var(--ease);
}
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__nav a[aria-current="page"] { color: var(--ink); }
.site-footer__legal {
  grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs); color: var(--muted);
}
@media (max-width: 620px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* ---------- 8. CTA FIXA (mobile) ----------
   Mesma camada flutuante da barra: mesmo vidro, mesmo raio de 12px.
   O CTA da página é um só; aqui ele fica alcançável depois do hero. */
.cta-fixa {
  position: fixed; z-index: 40;
  left: calc(var(--gutter) - var(--float-out));
  right: calc(var(--gutter) - var(--float-out));
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  padding: .7rem;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-float);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  transform: translateY(calc(100% + 1.5rem));
  transition: transform .38s cubic-bezier(.2,.65,.3,1);
}
@supports (backdrop-filter: blur(1px)) {
  .cta-fixa { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
@media (prefers-reduced-transparency: reduce) {
  .cta-fixa { background-color: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.cta-fixa.is-visivel { transform: none; }
@media (min-width: 901px) { .cta-fixa { display: none; } }

/* ---------- 9. REVEAL ----------
   Dois gestos só: texto sobe, superfície é revelada por máscara.
   Cada elemento entra uma vez. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s var(--ease), transform .6s var(--ease), clip-path .7s var(--ease);
    transition-delay: calc(var(--reveal-delay, 0) * 90ms);
  }
  .js [data-reveal="wipe"] {
    transform: none; opacity: 1;
    clip-path: inset(0 0 100% 0);
  }
  .js [data-reveal].is-revealed { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  [data-reveal-delay="1"] { --reveal-delay: 1; }
  [data-reveal-delay="2"] { --reveal-delay: 2; }
  [data-reveal-delay="3"] { --reveal-delay: 3; }
}

@media print {
  .site-header, .nav-toggle, .rota, .cta-fixa { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
}