/* VOOC — layout do site. Depende de vooc-tokens.css (fonte única de cor e tipo). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Cabeçalho */
.topo { background: var(--vooc-marfim); border-bottom: 1px solid rgba(28,26,23,.08); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.topo .logo img { height: 44px; width: auto; }
.nav { display: flex; gap: 28px; flex-wrap: wrap; }
.nav a { font-family: var(--vooc-texto); font-size: var(--vooc-apoio); color: var(--vooc-tinta); text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: var(--vooc-azul); text-decoration: underline; }

/* Herói */
.heroi { padding: 96px 0 88px; }
.heroi .filete { width: 48px; height: 2px; background: var(--vooc-ouro); margin-bottom: 28px; }
.heroi h1 { margin: 0 0 24px; max-width: 18ch; font-size: clamp(38px, 5.2vw, var(--vooc-display)); line-height: var(--vooc-display-lh); }
.heroi .vooc-destaque { margin: 0; max-width: 54ch; }

/* Seções */
.secao { padding: 72px 0; border-top: 1px solid rgba(28,26,23,.08); }
.secao h2 { margin: 0 0 12px; font-size: clamp(27px, 3.2vw, var(--vooc-titulo2)); }
.secao .sub { margin: 0 0 40px; color: var(--vooc-tinta); }
/* --vooc-apagado sobre marfim dá 4,05:1 — abaixo de AA para texto normal. Só usar sobre branco (4,69). */

/* Fronteira — duas colunas */
.fronteira { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.fronteira > div { padding: 28px 30px; background: #fff; border: 1px solid rgba(28,26,23,.08); }
.fronteira h3 { margin: 0 0 14px; font-size: var(--vooc-apoio); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--vooc-apagado); }
.fronteira ul { margin: 0; padding: 0; list-style: none; }
.fronteira li { padding: 10px 0; border-top: 1px solid rgba(28,26,23,.08); }
.fronteira li:first-child { border-top: 0; padding-top: 0; }
.fronteira .nos { border-left: 2px solid var(--vooc-ouro); }
.regra { margin: 32px 0 0; padding: 22px 26px; background: #fff; border: 1px solid rgba(28,26,23,.08); }
.regra p { margin: 0; font-family: var(--vooc-titulo); font-size: var(--vooc-destaque); line-height: var(--vooc-destaque-lh); color: var(--vooc-azul); max-width: none; }

/* Sistemas */
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; } /* 6 áreas → 3×2 no desktop, 2×3 no tablet, 1 col no celular */
.dores { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 36px; margin: 0; padding: 0; list-style: none; }
.dores li { padding: 22px 24px; background: #fff; border: 1px solid rgba(28,26,23,.08); border-top: 2px solid var(--vooc-azul); }
.dores strong { display: block; margin-bottom: 8px; font-family: var(--vooc-titulo); font-weight: 500; font-size: var(--vooc-destaque); line-height: var(--vooc-destaque-lh); color: var(--vooc-azul); }
.dores li p { margin: 0; font-size: var(--vooc-apoio); line-height: var(--vooc-apoio-lh); color: var(--vooc-tinta); max-width: none; }
.cartao { background: #fff; border: 1px solid rgba(28,26,23,.08); padding: 28px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s; }
.cartao:hover { border-color: var(--vooc-caqui); transform: translateY(-2px); }
.cartao .rotulo { font-size: var(--vooc-rotulo); line-height: var(--vooc-rotulo-lh); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--vooc-apagado); }
.cartao h3 { margin: 0; font-family: var(--vooc-titulo); font-weight: 500; font-size: var(--vooc-titulo3); color: var(--vooc-azul); }
.cartao p { margin: 0; font-size: var(--vooc-apoio); line-height: var(--vooc-apoio-lh); max-width: none; }
.cartao .estado { margin-top: auto; padding-top: 12px; font-size: var(--vooc-rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--vooc-apagado); }
.cartao .estado.ativo { color: var(--vooc-azul); }

/* Como trabalhamos */
.escada { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.escada li { background: #fff; border: 1px solid rgba(28,26,23,.08); border-top: 2px solid var(--vooc-ouro); padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.escada .rotulo { font-size: var(--vooc-rotulo); line-height: var(--vooc-rotulo-lh); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--vooc-tinta); }
.escada h3 { margin: 0; font-family: var(--vooc-titulo); font-weight: 500; font-size: var(--vooc-titulo3); letter-spacing: .06em; color: var(--vooc-azul); }
.escada p { margin: 0; font-size: var(--vooc-apoio); line-height: var(--vooc-apoio-lh); color: var(--vooc-tinta); max-width: none; }
.compromissos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; margin: 0; padding: 0; list-style: none; }
.compromissos li { padding-left: 18px; border-left: 2px solid var(--vooc-ouro); }
.compromissos strong { display: block; margin-bottom: 6px; color: var(--vooc-tinta); }
.compromissos li p { margin: 0; font-size: var(--vooc-apoio); line-height: var(--vooc-apoio-lh); color: var(--vooc-tinta); max-width: none; }

/* Origem */
.origem p { max-width: 62ch; }

/* Contato */
.contato .caixa { background: #fff; border: 1px solid rgba(28,26,23,.08); border-left: 2px solid var(--vooc-ouro); padding: 30px 32px; }
.contato .caixa p { margin: 0 0 12px; }
.contato .caixa p:last-child { margin-bottom: 0; }

/* Rodapé */
.rodape { background: var(--vooc-profundo); color: var(--vooc-camisa); padding: 52px 0 40px; }
.rodape .logo img { height: 36px; width: auto; margin-bottom: 26px; }
.rodape p { margin: 0 0 8px; font-size: var(--vooc-apoio); line-height: var(--vooc-apoio-lh); max-width: none; }
.rodape a { color: #fff; }
.rodape .legal { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(169,196,232,.25); font-size: 13px; color: rgba(169,196,232,.8); }

a:focus-visible { outline: 2px solid var(--vooc-azul); outline-offset: 3px; }

@media (max-width: 720px) {
  .heroi { padding: 64px 0 56px; }
  .secao { padding: 52px 0; }
  .fronteira { grid-template-columns: 1fr; }
  .topo .logo img { height: 38px; }
}