@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/assets/fonts/spacemono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/assets/fonts/spacemono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --grafite: #22262A; --grafite2: #2C3135;
  --nevoa: #F1F2F0; --osso: #F8F8F6; --pedra: #D8DCD8; --tinta: #E6E9E5;
  --texto: #3A4046; --suave: #5D646B;
  --salvia: #4E6B55; --salvia-media: #6B8A72; --salvia-clara: #A9BFA9; --salvia-fundo: #E5EBE4;
  --claro: #DADDDA; --claro-suave: #A4AAA8;
  --linha: rgba(34,38,42,.12); --linha-escura: rgba(241,242,240,.14);
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --raio: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nevoa); color: var(--texto); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 56px); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--salvia); color: var(--osso); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--salvia-media); outline-offset: 3px; border-radius: 6px; }

/* tipografia */
.rotulo { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--salvia); margin-bottom: 16px; }
.rotulo span { color: var(--claro-suave); margin: 0 6px; }
.rotulo-escuro { color: var(--salvia); }
h1, h2 { color: var(--grafite); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { color: var(--grafite); font-weight: 600; font-size: 1.2rem; line-height: 1.3; }
.sub { color: var(--suave); font-size: 1.08rem; line-height: 1.7; max-width: 660px; margin-top: 18px; }

/* topo */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(241,242,240,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 70px; }
.marca img { height: 30px; width: auto; }
.menu { display: flex; gap: 28px; font-size: .94rem; color: var(--suave); }
.menu a:hover { color: var(--salvia); }
.topo-cta { border: 1px solid var(--grafite); color: var(--grafite); border-radius: 999px; font-weight: 600; font-size: .88rem; padding: 10px 18px; white-space: nowrap; transition: background .2s, color .2s; }
.topo-cta:hover { background: var(--grafite); color: var(--nevoa); }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--salvia); background: var(--salvia); color: var(--osso); border-radius: 999px; font: 600 1rem/1.2 var(--sans); padding: 15px 24px; cursor: pointer; transition: background .2s, transform .2s, color .2s; }
.botao:hover { background: #425C49; transform: translateY(-1px); }
.botao-linha { background: transparent; color: var(--grafite); border-color: var(--pedra); }
.botao-linha:hover { background: var(--osso); color: var(--salvia); border-color: var(--salvia-media); }
.botao-escuro { background: var(--grafite); border-color: var(--grafite); }
.botao-largo { width: 100%; }
.botao[disabled] { opacity: .6; cursor: wait; transform: none; }

/* hero */
.hero { padding: clamp(60px, 9vw, 112px) 0 clamp(48px, 6vw, 72px); background: radial-gradient(800px 420px at 92% 0%, rgba(107,138,114,.12), transparent 60%), var(--nevoa); border-bottom: 1px solid var(--linha); }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); max-width: 900px; }
.hero h1 em { font-style: normal; color: var(--salvia); }
.hero-base { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px clamp(24px, 5vw, 64px); align-items: end; margin-top: 26px; }
.lead { color: var(--suave); font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.7; max-width: 640px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.placar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: clamp(40px, 5vw, 60px) 0 0; }
.placar div { background: var(--osso); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; }
.placar dt { font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.03em; color: var(--grafite); line-height: 1.05; font-variant-numeric: tabular-nums; }
.placar dd { margin: 6px 0 0; font-size: .9rem; color: var(--suave); }
.placar-nota { margin-top: 18px; font-family: var(--mono); font-size: .74rem; color: var(--suave); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--salvia-media); display: inline-block; animation: pulso 2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .3; } }

/* seções */
.secao { padding: clamp(68px, 9vw, 112px) 0; }
.secao-grafite { background: var(--osso); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.secao-lima { background: var(--salvia-fundo); }
.cabeca { margin-bottom: clamp(36px, 5vw, 56px); max-width: 780px; }

/* frentes */
.frentes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.frente { display: flex; flex-direction: column; background: var(--osso); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px 24px 24px; transition: transform .2s, box-shadow .2s; }
.frente:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(34,38,42,.07); }
.frente-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.num { font-family: var(--mono); font-weight: 700; color: var(--claro-suave); font-size: .8rem; }
.status { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.status.on { background: var(--salvia-fundo); color: var(--salvia); }
.status.build { background: var(--tinta); color: var(--suave); }
.frente h3 { font-size: 1.55rem; letter-spacing: -.02em; }
.papel { font-weight: 600; margin: 6px 0 12px; color: var(--texto); }
.frente > p:not(.papel) { color: var(--suave); font-size: .96rem; }
.frente-link { margin-top: auto; padding-top: 22px; font-weight: 600; font-size: .95rem; color: var(--salvia); }
.frente-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.frente-link.off { color: var(--claro-suave); }
.frente-destaque { background: var(--salvia-fundo); border-color: rgba(78,107,85,.25); }
.frente-destaque .status { background: var(--osso); color: var(--salvia); }

/* método */
.degraus { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; }
.degraus li { background: var(--nevoa); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; }
.degraus li:nth-child(1) { min-height: 200px; } .degraus li:nth-child(2) { min-height: 236px; } .degraus li:nth-child(3) { min-height: 272px; } .degraus li:nth-child(4) { min-height: 308px; background: var(--salvia-fundo); border-color: rgba(78,107,85,.25); }
.nivel { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: .9rem; color: var(--salvia); background: var(--osso); border: 1px solid var(--linha); border-radius: 999px; padding: 4px 12px; margin-bottom: 18px; }
.degraus li:nth-child(4) .nivel { background: var(--salvia); color: var(--osso); border-color: var(--salvia); }
.degraus h3 { margin-bottom: 8px; }
.degraus p { color: var(--suave); font-size: .96rem; }
.regras { list-style: none; padding: 0; margin: clamp(40px, 5vw, 56px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.regras li { border-left: 3px solid var(--salvia-media); background: var(--nevoa); border-radius: 0 var(--raio) var(--raio) 0; padding: 20px 22px; color: var(--suave); }
.regras b { display: block; color: var(--grafite); font-size: 1.04rem; margin-bottom: 4px; }

/* reforma */
.reforma-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.sub-escuro { color: var(--texto); font-size: 1.1rem; line-height: 1.7; margin-top: 18px; max-width: 620px; }
.lista-reforma { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.lista-reforma li { padding-left: 30px; position: relative; color: var(--texto); }
.lista-reforma li::before { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--salvia); font-weight: 700; }
.nota-escura { margin-top: 20px; font-size: .92rem; color: var(--suave); }

/* prova */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.numeros div { background: var(--osso); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 22px 18px; }
.numeros dt { font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.7rem); letter-spacing: -.035em; line-height: 1; color: var(--grafite); font-variant-numeric: tabular-nums; }
.numeros dd { margin: 8px 0 0; color: var(--suave); font-size: .94rem; }
.nota { margin-top: 18px; font-size: .9rem; color: var(--suave); }
.nota a { color: var(--salvia); text-decoration: underline; text-underline-offset: 3px; }

/* formulários */
.contato-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.form { background: var(--osso); border: 1px solid var(--linha); border-radius: 18px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 18px 50px rgba(34,38,42,.06); }
.form-escuro { background: var(--osso); }
.form-titulo { font-weight: 600; color: var(--grafite); font-size: 1.18rem; line-height: 1.3; margin-bottom: 16px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--texto); }
.form-escuro > label { margin-bottom: 14px; }
.form input:not([type=checkbox]), .form select, .form textarea { font: 400 1rem/1.4 var(--sans); color: var(--grafite); background: #FFFFFE; border: 1px solid rgba(34,38,42,.2); border-radius: 10px; padding: 12px 13px; width: 100%; min-height: 46px; }
.form textarea { resize: vertical; min-height: 84px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--salvia-media); box-shadow: 0 0 0 3px rgba(107,138,114,.2); }
.form .invalido { border-color: #A0574A !important; }
.checks { border: 0; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.checks legend { font-size: .86rem; font-weight: 600; color: var(--texto); margin-bottom: 8px; padding: 0; }
.form .checks label, .form .aceite { flex-direction: row; align-items: flex-start; gap: 9px; font-weight: 400; font-size: .92rem; color: var(--texto); cursor: pointer; }
.form input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--salvia); flex: none; }
.form .largo { margin-top: 18px; }
.opcional { font-weight: 400; color: var(--suave); }
.form .aceite { margin: 18px 0; font-size: .85rem; color: var(--suave); }
.aceite a { color: var(--salvia); text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; margin-top: 12px; font-size: .92rem; color: var(--suave); }
.form-status.erro { color: #A0574A; }
.form-ok { text-align: center; padding: 26px 8px; }
.form-ok .selo-ok { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; background: var(--salvia-fundo); color: var(--salvia); align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.form-ok h3 { font-size: 1.6rem; margin: 12px 0 10px; }
.form-ok p { color: var(--suave); }

/* rodapé */
.rodape { background: var(--grafite); color: var(--claro-suave); padding: 44px 0; font-size: .9rem; }
.rodape-in { display: grid; grid-template-columns: 1.3fr 1.2fr auto; gap: 26px; align-items: start; }
.rodape-in img { height: 26px; width: auto; }
.rodape-in > div p { margin-top: 12px; max-width: 380px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.rodape nav a:hover { color: var(--claro); }
.copy { color: rgba(218,221,218,.5); }

/* páginas internas */
.pagina { padding: clamp(56px, 8vw, 96px) 0; }
.pagina .wrap { max-width: 820px; }
.pagina h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 22px; }
.pagina h2 { font-size: 1.45rem; margin: 36px 0 10px; }
.pagina p, .pagina li { color: var(--suave); line-height: 1.75; }
.pagina p + p { margin-top: 12px; }
.pagina a { color: var(--salvia); text-decoration: underline; }

/* responsivo */
@media (max-width: 1060px) {
  .frentes, .degraus { grid-template-columns: 1fr 1fr; }
  .degraus li { min-height: 0 !important; }
  .reforma-in, .contato-in, .hero-base { grid-template-columns: 1fr; }
  .hero-acoes { justify-content: flex-start; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .menu { display: none; }
  .topo-in { height: 62px; }
  .marca img { height: 26px; }
  .topo-cta { padding: 9px 14px; font-size: .82rem; }
  .placar { grid-template-columns: 1fr 1fr; }
  .frentes, .degraus, .regras, .numeros, .campos, .checks, .rodape-in { grid-template-columns: 1fr; }
  .hero-acoes .botao { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pulso { animation: none; } .botao, .frente { transition: none; } }