/* =========================================================
   Sunline Taxi Service. Folha de estilo unica.
   Ordem das secoes espelha a ordem do HTML.
   ========================================================= */

/* --- Fonte ------------------------------------------------ */
@font-face {
  font-family: "Archivo";
  /* format("woff2") e reconhecido por todo browser que suporta woff2.
     "woff2-variations" e sintaxe antiga que alguns ignoram, e um src
     ignorado faz a fonte inteira nao carregar. Os eixos continuam ativos. */
  src: url("assets/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ----------------------------------------------- */
:root {
  --navy: #0E1B2C;
  --ink: #0A1522;
  --yellow: #FFC12B;
  --amber: #F0A500;
  --amber-ink: #9C5500;
  --cream: #FDF8F0;
  --white: #FFFFFF;
  --muted: #5B6B7C;
  --line: rgba(14, 27, 44, 0.08);

  --sunset: linear-gradient(158deg, #FFD9A0 0%, #FFB36B 52%, #FF8A5B 100%);

  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1180px;
  --gutter: 20px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(10, 21, 34, 0.04), 0 12px 32px -12px rgba(10, 21, 34, 0.18);

  --space-section: 64px;
  /* A barra mede 12px de padding + 52px de botao + 12px de padding, mais o
     safe area do iPhone com home indicator. Sem o env aqui, o padding-bottom
     do body reserva 76px e a barra cobre os ultimos ~34px do footer. */
  --callbar-h: calc(76px + env(safe-area-inset-bottom));
}

@media (min-width: 880px) {
  :root {
    --gutter: 32px;
    --space-section: 112px;
    --callbar-h: 0px;
  }
  body { font-size: 17px; }
  .eyebrow { font-size: 0.8125rem; }
}

/* --- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--callbar-h);
}

img, svg { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* --- Tipografia ------------------------------------------- */
h1, h2 {
  font-stretch: 125%;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 7.4vw, 3.75rem); }
h2 { font-size: clamp(1.625rem, 4.6vw, 2.5rem); }

h3 {
  /* 2,73vw atinge 24px em 879px, logo antes do breakpoint de 880px.
     Com 2,4vw so chegaria em 1000px e o H3 ficaria 12% menor que a spec. */
  font-size: clamp(1.25rem, 2.73vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

.lede {
  font-size: clamp(1.0625rem, 2.1vw, 1.1875rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin: 0;
}

.tel-num { font-variant-numeric: tabular-nums; }

/* --- Layout ----------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }
.section--navy { background: var(--navy); color: var(--cream); }
.section--navy .lede { color: rgba(253, 248, 240, 0.72); }
/* Sobre navy o ambar cheio tem 8,32:1 e pode voltar */
.section--navy .eyebrow { color: var(--amber); }

/* --- Acessibilidade --------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--amber-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Indicador de foco precisa de 3:1. Sobre navy, o ambar-ink some */
.section--navy :where(a, button, summary):focus-visible { outline-color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Botoes ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.btn:active { transform: translateY(1px); }
.btn__icon { flex: none; }

.btn--call {
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 6px 20px -8px rgba(240, 165, 0, 0.9);
}
.btn--call:hover { background: var(--amber); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  /* 0,60 e nao 0,22: a borda e um limite de componente e precisa de 3:1.
     Medida sobre a parada mais escura do gradiente, #FF8A5B, 0,22 da 1,50:1
     e 0,60 da 3,41:1. Sem isso o botao Get a quote nao tem contorno visivel. */
  box-shadow: inset 0 0 0 1.5px rgba(14, 27, 44, 0.6);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }

/* 0,45 da 4,26:1 sobre o navy. 0,32 dava 2,80:1 e reprovava os 3:1 */
.section--navy .btn--ghost { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(253, 248, 240, 0.45); }
.section--navy .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--cream); }

.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { width: 100%; }

/* --- Header ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(253, 248, 240, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand { text-decoration: none; display: grid; gap: 1px; }

.brand__name {
  font-stretch: 125%;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--navy);
  line-height: 1;
}

.brand__sub {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--amber-ink);
  line-height: 1;
}

/* Esconde o botao do header enquanto a barra fixa cobre o mobile */
@media (max-width: 559px) {
  .site-header .btn { display: none; }
}

/* --- Barra fixa de ligar ---------------------------------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(253, 248, 240, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

@media (min-width: 880px) {
  .callbar { display: none; }
}



.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }



/* --- Trust bar -------------------------------------------- */
.trustbar { background: var(--navy); color: var(--cream); }

.trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  padding-block: 18px;
}

.trustbar__item {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.trustbar__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}

/* --- Servicos --------------------------------------------- */
.service:nth-of-type(even) { background: var(--white); }

.service__grid { display: grid; gap: 28px; }

.service__art { margin: 0; }

.service__art img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.service__copy { display: grid; gap: 16px; justify-items: start; align-content: start; }

.ticks { display: grid; gap: 10px; }

.ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 0.9375rem;
  color: var(--navy);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yellow);
  /* Um inset so. Um segundo de 6px ficaria sob este, sobre fundo ja amarelo */
  box-shadow: inset 0 0 0 5px var(--navy);
}

@media (min-width: 880px) {
  .service__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
  }
  .service:nth-of-type(even) .service__art { order: 2; }
}

/* --- Diferenciais ----------------------------------------- */
.reasons { display: grid; gap: 20px; margin-top: 36px; }

.reason {
  background: rgba(253, 248, 240, 0.05);
  box-shadow: inset 0 0 0 1px rgba(253, 248, 240, 0.14);
  border-radius: var(--radius);
  padding: 26px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.reason h3 { color: var(--yellow); }
.reason p { color: rgba(253, 248, 240, 0.76); font-size: 0.9375rem; }

@media (min-width: 700px) {
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* --- Area de atendimento ---------------------------------- */
.area { display: grid; gap: 32px; margin-top: 36px; }
.area__group { display: grid; gap: 14px; align-content: start; }
.area__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.area__tags li {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 9px 16px;
  border-radius: 999px;
}

.area__note { margin-top: 28px; max-width: 52ch; }

@media (min-width: 700px) {
  .area { grid-template-columns: auto minmax(0, 1fr); gap: 56px; }
}

/* --- Passos ----------------------------------------------- */
.steps { display: grid; gap: 20px; margin: 36px 0 0; padding: 0; list-style: none; }

.step {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.step__num {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}

.step p { color: var(--muted); font-size: 0.9375rem; }

@media (min-width: 880px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* --- Depoimentos ------------------------------------------ */
.reviews { display: grid; gap: 20px; margin-top: 36px; }

.review {
  margin: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 16px;
  align-content: start;
}

/* O amarelo puro daria 1,54:1 sobre o branco do card. As estrelas sao
   informacao, nao decoracao, entao usam o tom que passa em AA */
.review__stars { color: var(--amber-ink); }

.review blockquote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.review figcaption { display: grid; gap: 2px; }
.review__name { font-weight: 600; color: var(--navy); }
.review__ctx { font-size: 0.8125rem; color: var(--muted); }

@media (min-width: 700px) {
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* --- FAQ -------------------------------------------------- */
.faq__list { margin-top: 36px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--amber-ink);
  border-bottom: 2px solid var(--amber-ink);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.faq__body { padding: 0 44px 22px 0; }
.faq__body p { color: var(--muted); max-width: 62ch; }



/* --- Footer ----------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(253, 248, 240, 0.68); padding-block: 48px 32px; }
.site-footer .brand__name { color: var(--cream); display: block; }
/* No footer o fundo e --ink, entao o ambar cheio volta */
.site-footer .brand__sub { display: block; margin-top: 3px; color: var(--amber); }

.footer__grid { display: grid; gap: 26px; }
.footer__contact { display: grid; gap: 6px; }
.footer__contact a { color: var(--cream); text-decoration: none; font-weight: 600; }
.footer__contact a:hover { color: var(--yellow); }
.footer__area { font-size: 0.875rem; }

.footer__legal {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(253, 248, 240, 0.12);
  display: grid;
  gap: 6px;
  font-size: 0.8125rem;
  color: rgba(253, 248, 240, 0.62);
}

@media (min-width: 700px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .footer__legal { grid-template-columns: 1fr auto; align-items: center; }
}

/* =========================================================
   Secoes em altura de viewport
   Cada secao ocupa a tela inteira e centraliza o conteudo.
   min-height e nao height: secao com conteudo alto, como o FAQ
   de oito perguntas, cresce em vez de cortar.
   svh e nao vh: no mobile o vh conta a barra do navegador que
   some ao rolar, o que empurra conteudo para fora da tela.
   ========================================================= */
.hero,
.section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A trust bar e uma faixa fina de proposito, fica de fora */
.trustbar { min-height: 0; }

.hero > .container,
.section > .container { width: 100%; }

@media (max-width: 879px) {
  .hero { min-height: calc(100svh - var(--callbar-h)); }
  .section { min-height: calc(100svh - var(--callbar-h)); }
}

/* Em tela baixa e larga, tipo notebook de 13 polegadas na horizontal,
   forcar viewport inteiro espreme demais. Volta ao fluxo natural. */
@media (max-height: 620px) {
  .hero, .section { min-height: 0; }
}

/* =========================================================
   Estados iniciais das animacoes
   Aplicados so quando ha JavaScript e o usuario nao pediu menos
   movimento. Sem JS a classe .js nunca entra e nada fica escondido.
   ========================================================= */
.js:not(.reduced-motion) [data-anim] { opacity: 0; will-change: transform, opacity; }
.js:not(.reduced-motion) [data-anim="up"] { transform: translateY(26px); }
.js:not(.reduced-motion) [data-anim="card"] { transform: translateY(34px); }
.js:not(.reduced-motion) [data-anim="row"] { transform: translateY(16px); }
.js:not(.reduced-motion) [data-anim="chip"] { transform: translateY(14px); }
.js:not(.reduced-motion) [data-anim="art"] { transform: scale(1.05); }

/* Rede de seguranca: se o GSAP nao carregar, o conteudo aparece assim mesmo */
.js .anim-fallback [data-anim] {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.4s ease;
}

/* A arte precisa de recorte proprio para o parallax nao vazar */
.service__art { overflow: hidden; border-radius: var(--radius); }
.service__art img { will-change: transform; }

/* O header so ganha peso depois que a pagina sai do topo */
.site-header { transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.site-header.is-stuck { box-shadow: 0 8px 28px -18px rgba(10, 21, 34, 0.55); }


/* =========================================================
   Header sobreposto ao hero
   Transparente no topo, sobre a foto. Ganha fundo creme so
   depois que a pagina rola, quando passa a flutuar sobre
   conteudo claro e precisaria de contraste proprio.
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header .brand__name { color: var(--cream); }
.site-header .brand__sub { color: var(--yellow); }

.site-header.is-stuck {
  background: rgba(253, 248, 240, 0.9);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-header.is-stuck .brand__name { color: var(--navy); }
.site-header.is-stuck .brand__sub { color: var(--amber-ink); }

/* =========================================================
   Hero com foto de fundo
   Grade de duas faixas: conteudo ocupa o espaco livre e fica
   centralizado, a trust bar cola no fim da primeira dobra.
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  /* Anula o justify-content: center herdado da regra de secao em viewport.
     Em grid ele encolhe a coluna ao conteudo e a trust bar deixaria de
     ocupar a largura toda. */
  justify-content: stretch;
  justify-items: stretch;
  isolation: isolate;
  background: var(--navy);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

/* Escurece a esquerda, onde fica o texto, e preserva a direita,
   onde estao o carro e as pessoas. A segunda camada garante o
   contraste do rodape do hero contra a trust bar. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10, 21, 34, 0.94) 0%, rgba(10, 21, 34, 0.82) 32%, rgba(10, 21, 34, 0.28) 62%, rgba(10, 21, 34, 0.1) 100%),
    linear-gradient(to bottom, rgba(10, 21, 34, 0.55) 0%, rgba(10, 21, 34, 0) 26%, rgba(10, 21, 34, 0) 68%, rgba(10, 21, 34, 0.62) 100%);
}

.hero__inner {
  align-self: center;
  padding-block: 120px 48px;
}

.hero__copy {
  display: grid;
  gap: 22px;
  justify-items: start;
  max-width: 34rem;
}

.hero__copy .eyebrow { color: var(--yellow); }
.hero__copy h1 { color: var(--cream); }
.hero__copy .lede { color: rgba(253, 248, 240, 0.82); max-width: 32ch; }
.hero .btn--ghost { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(253, 248, 240, 0.55); }
.hero .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--cream); }

@media (min-width: 880px) {
  .hero__inner { padding-block: 140px 56px; }
  .hero__copy { gap: 26px; }
}

/* Em telas estreitas a foto vira retrato: puxa o enquadramento
   para o carro em vez de deixar o meio vazio */
@media (max-width: 700px) {
  .hero__bg { object-position: 66% 60%; }
  .hero__scrim {
    background: linear-gradient(to bottom, rgba(10, 21, 34, 0.86) 0%, rgba(10, 21, 34, 0.72) 44%, rgba(10, 21, 34, 0.5) 68%, rgba(10, 21, 34, 0.86) 100%);
  }
}

/* --- Trust bar dentro do hero ----------------------------- */
.trustbar {
  position: relative;
  z-index: 1;
  background: rgba(10, 21, 34, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(253, 248, 240, 0.16);
}

.trustbar__inner { padding-block: 20px; }
.trustbar__item { color: var(--cream); }

/* --- Divisor entre cobertura e passos --------------------- */
.rule {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 64px;
  scroll-margin-top: 88px;
}

.rule::before, .rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.rule__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-ink);
  white-space: nowrap;
}

.area + .area__note { margin-top: 28px; }
.rule + .steps { margin-top: 32px; }

@media (min-width: 700px) {
  .area { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* --- FAQ --------------------------------------------------
   Titulo e accordion alinhados a esquerda como as demais secoes,
   e a lista ocupa a largura inteira do container para as linhas
   fecharem no mesmo eixo do resto da pagina. */
.faq__list { margin-inline: 0; max-width: none; }
.faq .faq__item summary { padding-right: 56px; }
.faq__body p { max-width: 72ch; }

/* A regra do hero com foto vem depois do bloco de secoes em viewport, entao
   precisa repetir o desconto da barra fixa de ligar. Sem isso o hero mede
   100svh cheios e a trust bar fica escondida atras da barra amarela. */
@media (max-width: 879px) {
  .hero { min-height: calc(100svh - var(--callbar-h)); }
  .trustbar__inner { padding-block: 14px; gap: 8px 18px; }
  .trustbar__item { font-size: 0.6875rem; letter-spacing: 0.05em; }
}

/* --- Contato: ligar, email ou formulario ------------------- */
.finalcta .lede { color: rgba(253, 248, 240, 0.72); max-width: 46ch; }

.contact { display: grid; gap: 24px; margin-top: 40px; }
.contact__direct { display: grid; gap: 20px; align-content: start; }

.contact__option,
.contact__form-wrap {
  position: relative;
  background: rgba(253, 248, 240, 0.05);
  box-shadow: inset 0 0 0 1px rgba(253, 248, 240, 0.14);
  border-radius: var(--radius);
  padding: 26px 26px 26px 68px;
}

.contact__option { display: grid; }

.contact__num {
  position: absolute;
  left: 24px;
  top: 26px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.contact__option h3,
.contact__form-wrap h3 { color: var(--cream); }
.contact__option p,
.contact__hint { color: rgba(253, 248, 240, 0.72); font-size: 0.9375rem; margin: 6px 0 16px; }
.contact__option .btn { width: 100%; }
.contact__option .btn--ghost { font-size: 0.9375rem; }

/* --- Formulario de orcamento ------------------------------- */
.quote { display: grid; gap: 14px; }
.quote__row { display: grid; gap: 6px; margin: 0; }
.quote__pair { display: grid; gap: 14px; }

.quote label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 248, 240, 0.62);
}

.quote input {
  font-family: inherit;
  font-size: 1rem;
  color: var(--cream);
  background: rgba(10, 21, 34, 0.5);
  border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(253, 248, 240, 0.28);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  min-height: 50px;
  width: 100%;
}

.quote input::placeholder { color: rgba(253, 248, 240, 0.38); }
.quote input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.quote input:user-invalid { box-shadow: inset 0 0 0 1.5px #FF8A5B; }

.quote button { margin-top: 8px; min-height: 56px; font-size: 1.0625rem; }

/* Campo isca. Robo preenche, humano nao ve. */
.quote__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.quote__status { margin: 0; font-size: 0.9375rem; min-height: 1.4em; }
.quote__status.is-ok { color: var(--yellow); font-weight: 600; }
.quote__status.is-error { color: #FFB36B; font-weight: 600; }
.quote__note { margin: 0; font-size: 0.8125rem; color: rgba(253, 248, 240, 0.5); }

@media (min-width: 560px) {
  .quote__pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 940px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
  .contact__direct { gap: 24px; }
}