/* Prolans — site institucional
   Identidade: o olhar de uma câmera da Prolans sobre a serra de Teresópolis.
   - A abertura é vista pelo visor de uma câmera (cantos, CAM 01, REC, hora local).
   - O recorte da Serra dos Órgãos, com o Dedo de Deus, separa as seções.
   - A planta de projeto aparece em cianotipia, como prancha técnica.
   - Formas curvas, como as asas do escudo: fotos e cartões com cantos largos, botões em pílula.
   Claro e escuro, com o botão no topo. */

@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(../fonts/archivo.woff2) format("woff2-variations"), url(../fonts/archivo.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/public-sans.woff2) format("woff2-variations"), url(../fonts/public-sans.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: italic; font-display: swap; font-weight: 100 900; src: url(../fonts/public-sans-italic.woff2) format("woff2-variations"), url(../fonts/public-sans-italic.woff2) format("woff2"); }

/* ---------- tokens: tema claro ---------- */
:root {
  --fundo: #F2F5F9;          /* papel frio */
  --superficie: #FFFFFF;
  --superficie-2: #E9EEF5;
  --titulo: #06162E;         /* noite da serra: o azul-marinho da marca */
  --texto: #1A2433;
  --suave: #566479;
  --linha: #D6DDE7;
  --linha-forte: #A8B5C6;
  --azul: #1F5FAE;           /* azul do escudo */
  --azul-fundo: #E3ECF8;
  --marca: #06162E;
  --marca-hover: #1F5FAE;
  --sobre-marca: #FFFFFF;
  --noite: #06162E;          /* faixas escuras: iguais nos dois temas */
  --noite-2: #0B2547;
  --cianotipia: #0C2D5A;     /* fundo da prancha técnica */
  --sinal: #E39A2F;          /* âmbar: o campo de visão da câmera */
  --sinal-fundo: rgba(227, 154, 47, .16);
  --sinal-forte: rgba(227, 154, 47, .34);
  --zap: #18794A;
  --zap-hover: #126039;
  --ok: #1E7F4F;  --ok-fundo: #EAF5EF;  --ok-linha: #B9DEC8;
  --erro: #B3261E; --erro-fundo: #FBEDEC; --erro-linha: #F0C5C2;
  --info-linha: #C8D8EE;
  --vidro: rgba(242, 245, 249, .86);
  --sombra: 0 30px 60px -34px rgba(6, 22, 46, .55);
  --sombra-leve: 0 14px 30px -22px rgba(6, 22, 46, .45);

  --f-titulo: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Public Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --t-0: .8125rem; --t-1: .9375rem; --t-2: 1.0625rem; --t-3: 1.25rem;
  --t-4: clamp(1.45rem, 2.4vw, 1.75rem); --t-5: clamp(1.9rem, 3.6vw, 2.75rem); --t-6: clamp(2.5rem, 6vw, 4.6rem);
  --larg: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --r-pilula: 999px;
  --r-cartao: 20px;
  --r-foto: 26px;
  color-scheme: light;
}

/* ---------- tema escuro: segue o aparelho, a menos que a pessoa escolha ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #07111E; --superficie: #0E1A2A; --superficie-2: #0B1624;
    --titulo: #F0F5FB; --texto: #D0DAE6; --suave: #93A4BA;
    --linha: #1C2B40; --linha-forte: #33486A;
    --azul: #82B5F5; --azul-fundo: #13253C;
    --marca: #2F6EC4; --marca-hover: #4A86D8; --sobre-marca: #FFFFFF;
    --noite: #040C17; --noite-2: #0A1D38; --cianotipia: #0A2449;
    --sinal: #F2A940; --sinal-fundo: rgba(242, 169, 64, .15); --sinal-forte: rgba(242, 169, 64, .34);
    --zap: #1F8A55; --zap-hover: #27A064;
    --ok: #6CCF9C; --ok-fundo: #0F2A1E; --ok-linha: #1E5038;
    --erro: #F2948D; --erro-fundo: #2E1513; --erro-linha: #5C2622;
    --info-linha: #24406A;
    --vidro: rgba(7, 17, 30, .84);
    --sombra: 0 30px 60px -34px rgba(0, 0, 0, .9);
    --sombra-leve: 0 14px 30px -22px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #07111E; --superficie: #0E1A2A; --superficie-2: #0B1624;
  --titulo: #F0F5FB; --texto: #D0DAE6; --suave: #93A4BA;
  --linha: #1C2B40; --linha-forte: #33486A;
  --azul: #82B5F5; --azul-fundo: #13253C;
  --marca: #2F6EC4; --marca-hover: #4A86D8; --sobre-marca: #FFFFFF;
  --noite: #040C17; --noite-2: #0A1D38; --cianotipia: #0A2449;
  --sinal: #F2A940; --sinal-fundo: rgba(242, 169, 64, .15); --sinal-forte: rgba(242, 169, 64, .34);
  --zap: #1F8A55; --zap-hover: #27A064;
  --ok: #6CCF9C; --ok-fundo: #0F2A1E; --ok-linha: #1E5038;
  --erro: #F2948D; --erro-fundo: #2E1513; --erro-linha: #5C2622;
  --info-linha: #24406A;
  --vidro: rgba(7, 17, 30, .84);
  --sombra: 0 30px 60px -34px rgba(0, 0, 0, .9);
  --sombra-leve: 0 14px 30px -22px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--f-texto); font-size: var(--t-2); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: .18em; }
a:hover { color: var(--titulo); }
:focus-visible { outline: 3px solid var(--sinal); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--f-titulo); color: var(--titulo); margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-6); font-weight: 800; font-stretch: 112%; line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: var(--t-5); font-weight: 780; font-stretch: 108%; line-height: 1.06; letter-spacing: -.028em; }
h3 { font-size: var(--t-3); font-weight: 720; font-stretch: 100%; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
ul.limpa { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
.medida { max-width: 38rem; }
.suave { color: var(--suave); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr:focus { position: fixed; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto; z-index: 50; background: var(--superficie); padding: .5rem .75rem; }

.faixa { padding-inline: var(--gutter); }
.miolo { max-width: var(--larg); margin-inline: auto; }
.secao { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.alt { background: var(--superficie); }
.cabeca { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.cabeca p { color: var(--suave); max-width: 40rem; font-size: var(--t-3); line-height: 1.5; }
.cabeca-linha { display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.cabeca-linha .cabeca { margin: 0; }

/* ---------- botões: pílulas ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font: 650 var(--t-1)/1 var(--f-texto); padding: 1rem 1.5rem; border-radius: var(--r-pilula); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.botao svg { width: 1.15em; height: 1.15em; flex: none; }
.botao:active { transform: translateY(1px); }
.botao-principal { background: var(--marca); color: var(--sobre-marca); }
.botao-principal:hover { background: var(--marca-hover); color: var(--sobre-marca); }
.botao-linha { background: transparent; color: var(--titulo); border-color: var(--linha-forte); }
.botao-linha:hover { border-color: var(--titulo); color: var(--titulo); }
.botao-claro { background: #FFFFFF; color: #06162E; }
.botao-claro:hover { background: #DDE9F8; color: #06162E; }
.botao-vidro { background: rgba(255, 255, 255, .1); color: #FFFFFF; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.botao-vidro:hover { background: rgba(255, 255, 255, .2); color: #FFFFFF; border-color: #FFFFFF; }
.botao-zap { background: var(--zap); color: #fff; }
.botao-zap:hover { background: var(--zap-hover); color: #fff; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.seta-link { font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.seta-link svg { width: 1.1em; height: 1.1em; transition: transform .2s; }
.seta-link:hover svg { transform: translateX(3px); }

/* ---------- topo ---------- */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--vidro); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--linha); }
.topo .miolo { display: flex; align-items: center; gap: 1.25rem; min-height: 4.4rem; }
.marca { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--titulo); flex: none; }
.marca img { width: 42px; height: 42px; }
.marca span { font: 800 1.35rem/1 var(--f-titulo); font-stretch: 110%; letter-spacing: -.02em; }
.marca small { display: block; font: 500 .72rem/1.2 var(--f-texto); color: var(--suave); margin-top: 3px; letter-spacing: 0; }
.menu { display: flex; gap: .15rem; margin-left: auto; }
.menu a { color: var(--texto); text-decoration: none; font-size: var(--t-1); font-weight: 550; padding: .55rem .8rem; border-radius: var(--r-pilula); }
.menu a:hover { background: var(--azul-fundo); color: var(--titulo); }
.menu a[aria-current="page"] { background: var(--titulo); color: var(--fundo); }
.menu a.so-celular { display: none; }
.topo-acoes { display: flex; gap: .45rem; align-items: center; }
.topo-acoes .botao { padding: .7rem 1.1rem; }
.link-cliente { font-size: var(--t-1); font-weight: 650; color: var(--titulo); text-decoration: none; padding: .5rem .6rem; }
.link-cliente:hover { text-decoration: underline; color: var(--titulo); }
.tema { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: transparent; border: 1.5px solid var(--linha); border-radius: 50%; color: var(--titulo); cursor: pointer; flex: none; padding: 0; }
.tema:hover { border-color: var(--linha-forte); background: var(--azul-fundo); }
.tema svg { width: 1.15rem; height: 1.15rem; }
.tema .lua { display: none; }
:root[data-theme="dark"] .tema .sol { display: none; }
:root[data-theme="dark"] .tema .lua { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema .sol { display: none; }
  :root:not([data-theme="light"]) .tema .lua { display: block; }
}
.abre-menu { display: none; background: none; border: 1.5px solid var(--linha-forte); border-radius: var(--r-pilula); padding: .55rem .95rem; font: 650 var(--t-1) var(--f-texto); color: var(--titulo); cursor: pointer; }
@media (max-width: 68rem) {
  .menu, .topo-acoes .link-cliente { display: none; }
  .abre-menu { display: inline-flex; margin-left: auto; }
  .topo.aberto .menu { display: grid; position: absolute; top: 100%; left: 0; right: 0; background: var(--superficie); border-bottom: 1px solid var(--linha); padding: .75rem var(--gutter) 1.25rem; gap: .2rem; box-shadow: var(--sombra); }
  .topo.aberto .menu a { padding: .85rem 1rem; }
  .topo.aberto .menu a.so-celular { display: block; }
}
@media (max-width: 30rem) {
  .topo-acoes .botao { display: none; }
  .marca small { display: none; }
}

/* ---------- capa: a foto vista pelo visor de uma câmera ---------- */
.capa { position: relative; isolation: isolate; color: #FFFFFF; display: grid; align-items: end; min-height: clamp(36rem, 88vh, 52rem); overflow: hidden; background: var(--noite); }
.capa-interna { min-height: clamp(26rem, 62vh, 36rem); }
.capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.capa-veu { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(4, 12, 25, .88) 0%, rgba(4, 12, 25, .62) 42%, rgba(4, 12, 25, .12) 75%),
  linear-gradient(0deg, rgba(4, 12, 25, .7) 0%, rgba(4, 12, 25, 0) 45%); }
.capa-conteudo { position: relative; width: 100%; padding-block: 7rem clamp(6rem, 12vw, 9rem); }
.capa-conteudo .miolo { display: grid; gap: 1.4rem; justify-items: start; }
.capa h1 { color: #FFFFFF; max-width: 14ch; }
.capa-interna h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); max-width: 20ch; }
.capa-conteudo p { font-size: var(--t-3); line-height: 1.5; color: #D5E0EE; max-width: 36rem; }
.capa .trilha, .capa .trilha a { color: #B9C8DB; }
.selo-nicho { font-size: var(--t-0); font-weight: 650; background: var(--sinal); color: #1B1205; border-radius: var(--r-pilula); padding: .3rem .8rem; }
.selos { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: var(--t-1); color: #C5D2E2; }
.selos li { display: flex; align-items: center; gap: .45rem; }
.selos b { color: #FFFFFF; font-weight: 700; }
.selos svg { width: 1.1rem; height: 1.1rem; color: var(--sinal); }

/* o visor */
.visor { position: absolute; inset: clamp(.9rem, 2.4vw, 1.75rem) clamp(.9rem, 2.4vw, 1.75rem) clamp(3.5rem, 8vw, 7rem); pointer-events: none; z-index: 0; font: 600 .78rem/1 var(--f-texto); letter-spacing: .06em; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; }
.visor i { position: absolute; width: clamp(1.5rem, 3vw, 2.5rem); height: clamp(1.5rem, 3vw, 2.5rem); border: 2px solid rgba(255, 255, 255, .7); }
.visor i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.visor i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.visor i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.visor i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.visor .canal { position: absolute; top: .75rem; left: 3.25rem; }
.visor .rec { position: absolute; top: .75rem; right: 3.25rem; display: flex; gap: .5rem; align-items: center; }
.visor .rec::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #FF4D3D; box-shadow: 0 0 10px #FF4D3D; }
.visor .mira { position: absolute; left: 62%; top: 42%; width: 3.2rem; height: 3.2rem; translate: -50% -50%; }
.visor .mira::before, .visor .mira::after { content: ""; position: absolute; background: rgba(255, 255, 255, .55); }
.visor .mira::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.visor .mira::after { top: 50%; left: 0; right: 0; height: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .visor .rec::before { animation: piscar 1.6s steps(1) infinite; }
  .visor .mira { animation: varrer 9s ease-in-out infinite alternate; }
}
@keyframes piscar { 50% { opacity: 0; } }
@keyframes varrer { 0% { left: 62%; top: 42%; } 35% { left: 74%; top: 36%; } 70% { left: 56%; top: 58%; } 100% { left: 80%; top: 52%; } }
@media (max-width: 40rem) { .visor .mira { display: none; } .visor .canal { left: 2.5rem; } .visor .rec { right: 2.5rem; } }

/* o recorte da serra */
.serra { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(2.5rem, 6vw, 5.5rem); color: var(--fundo); z-index: 1; display: block; }
.serra.para-alt { color: var(--superficie); }
.serra.topo-serra { top: -1px; bottom: auto; }

/* ---------- vitrine de soluções (carrossel) ---------- */
.carrossel { position: relative; }
.trilho { --borda: max(var(--gutter), calc(50vw - var(--larg) / 2)); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(16rem, 27vw, 22rem); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--borda); padding: .25rem var(--borda) 1.5rem; margin-inline: calc(50% - 50vw); scrollbar-width: none; overscroll-behavior-x: contain; }
.trilho::-webkit-scrollbar { display: none; }
.trilho > li { scroll-snap-align: start; }
/* Andando sozinho: sem o encaixe, senão o navegador puxa de volta a cada passo. */
.carrossel.andando .trilho { scroll-snap-type: none; }
.vitrine { position: relative; display: block; aspect-ratio: 3 / 4.1; border-radius: var(--r-foto); overflow: hidden; color: #FFFFFF; text-decoration: none; background: var(--noite); box-shadow: var(--sombra-leve); }
.vitrine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.vitrine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 12, 25, 0) 30%, rgba(4, 12, 25, .9) 100%); }
.vitrine-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.4rem; display: grid; gap: .5rem; }
.vitrine-texto b { font: 800 1.5rem/1.05 var(--f-titulo); font-stretch: 108%; letter-spacing: -.02em; }
.vitrine-texto > span { font-size: var(--t-1); color: #D2DDEA; line-height: 1.4; }
.vitrine-icones { display: flex; gap: .3rem; margin-top: .35rem; }
.vitrine-icones svg { width: 1.9rem; height: 1.9rem; padding: .38rem; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #FFFFFF; backdrop-filter: blur(4px); }
.vitrine:hover { color: #FFFFFF; }
.vitrine:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .vitrine:hover img { transform: scale(1.06); } }
.carrossel-setas { display: flex; gap: .5rem; justify-content: flex-end; }
.carrossel-setas button { width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--linha-forte); background: var(--superficie); color: var(--titulo); cursor: pointer; display: grid; place-items: center; }
.carrossel-setas button:hover { border-color: var(--titulo); }
.carrossel-setas button:disabled { opacity: .35; cursor: default; }
.carrossel-setas button[data-dir="-1"] svg { transform: rotate(180deg); }
.carrossel-setas svg { width: 1.2rem; height: 1.2rem; }
.grade-solucoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.vitrine-grade { aspect-ratio: 4 / 3.6; }

/* ---------- prancha em cianotipia ---------- */
.cianotipia { --titulo: #FFFFFF; --texto: #D6E2F2; --suave: #A9BEDA; --linha: rgba(255, 255, 255, .16); --linha-forte: rgba(255, 255, 255, .32); --superficie: transparent; --fundo: rgba(255, 255, 255, .06); --sinal: #F2A940; --sinal-fundo: rgba(242, 169, 64, .2); --sinal-forte: rgba(242, 169, 64, .42);
  position: relative; background-color: var(--cianotipia); color: var(--texto);
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 28px 28px; }
.cianotipia .miolo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cianotipia .botao-principal { background: #FFFFFF; color: #06162E; }
.cianotipia .botao-principal:hover { background: #DDE9F8; color: #06162E; }
@media (max-width: 56rem) { .cianotipia .miolo { grid-template-columns: minmax(0, 1fr); } }
.prancha { margin: 0; border: 1px solid var(--linha-forte); border-radius: var(--r-cartao); overflow: hidden; background: rgba(4, 16, 36, .35); }
.prancha svg.planta { width: 100%; height: auto; display: block; }
.planta .parede { fill: none; stroke: var(--titulo); stroke-width: 6; stroke-linecap: square; }
.planta .divisoria { fill: none; stroke: var(--titulo); stroke-width: 3; }
.planta .porta { fill: none; stroke: var(--linha-forte); stroke-width: 1.5; stroke-dasharray: 3 3; }
.planta .comodo { font: 500 11px var(--f-texto); fill: var(--suave); }
.planta .area-ext { fill: none; stroke: var(--linha-forte); stroke-width: 1.5; stroke-dasharray: 8 5; }
.planta .cone { fill: var(--sinal-fundo); transition: opacity .2s, fill .2s; }
.planta .cone.ativo { fill: var(--sinal-forte); }
.planta .ponto { color: var(--sinal); transition: opacity .2s, transform .2s; transform-box: fill-box; transform-origin: center; cursor: pointer; }
.planta .ponto circle.base { fill: var(--cianotipia); stroke: currentColor; stroke-width: 2; }
.planta .ponto use { color: #FFFFFF; }
.planta.filtrando .ponto, .planta.filtrando .cone { opacity: .16; }
.planta.filtrando .ponto.ativo, .planta.filtrando .cone.ativo { opacity: 1; }
.planta .ponto.ativo { transform: scale(1.18); }
.planta .ponto:focus { outline: none; }
.planta .ponto:focus-visible circle.base { stroke-width: 3.5; }
.prancha-rodape { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--linha-forte); }
.legenda { padding: .9rem 1rem; display: grid; gap: .45rem; }
.legenda-titulo { font: 700 var(--t-0) var(--f-titulo); color: var(--titulo); }
.legenda ul { display: flex; flex-wrap: wrap; gap: .3rem; }
.legenda button { display: inline-flex; align-items: center; gap: .4rem; font: 550 var(--t-0)/1 var(--f-texto); color: var(--texto); background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r-pilula); padding: .45rem .7rem .45rem .5rem; cursor: pointer; }
.legenda button svg { width: 16px; height: 16px; color: var(--titulo); }
.legenda button:hover, .legenda button[aria-pressed="true"] { border-color: var(--sinal); background: var(--sinal-fundo); }
.carimbo { border-left: 1px solid var(--linha-forte); font-size: .72rem; line-height: 1.25; color: var(--suave); display: grid; grid-template-columns: auto auto; }
.carimbo div { padding: .45rem .7rem; border-bottom: 1px solid var(--linha); }
.carimbo div:nth-child(odd) { border-right: 1px solid var(--linha); }
.carimbo div:nth-last-child(-n+2) { border-bottom: 0; }
.carimbo b { display: block; color: var(--titulo); font-weight: 600; font-size: .78rem; }
.prancha-nota { padding: .75rem 1rem; border-top: 1px solid var(--linha); font-size: var(--t-0); color: var(--suave); min-height: 2.9rem; }
.prancha-nota b { color: var(--titulo); }
@media (max-width: 36rem) { .prancha-rodape { grid-template-columns: minmax(0, 1fr); } .carimbo { border-left: 0; border-top: 1px solid var(--linha-forte); } }
@media (prefers-reduced-motion: no-preference) {
  .planta.desenhar .traco { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: desenha 1.4s ease-out forwards; }
  .planta.desenhar .ponto { animation: aparece .35s ease-out backwards; animation-delay: calc(1.1s + var(--i, 0) * 60ms); }
}
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* ---------- serviços (sem caixas: anel âmbar + texto) ---------- */
.servicos-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2.5rem; }
.servicos-lista a { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .3rem 1rem; text-decoration: none; color: var(--texto); }
.servicos-lista a:hover h3 { color: var(--azul); }
.anel { width: 3.4rem; height: 3.4rem; padding: .78rem; color: var(--titulo); background: var(--superficie); border: 2px solid var(--sinal); border-radius: 50%; box-shadow: 0 0 0 6px var(--sinal-fundo); }
.servicos-lista svg { grid-row: span 2; }
.servicos-lista h3 { font-size: var(--t-3); padding-top: .2rem; }
.servicos-lista p { font-size: var(--t-1); color: var(--suave); line-height: 1.5; }
@media (max-width: 56rem) { .servicos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .servicos-lista { grid-template-columns: minmax(0, 1fr); } }

/* ---------- etapas (sequência real) ---------- */
.etapas { counter-reset: etapa; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.etapas::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 1.5rem; height: 2px; background: repeating-linear-gradient(90deg, var(--linha-forte) 0 8px, transparent 8px 14px); }
.etapas li { counter-increment: etapa; display: grid; gap: .55rem; align-content: start; position: relative; }
.etapas li::before { content: counter(etapa); width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--titulo); color: var(--fundo); border-radius: 50%; font: 800 1.1rem var(--f-titulo); box-shadow: 0 0 0 6px var(--fundo); margin-bottom: .6rem; }
.alt .etapas li::before { box-shadow: 0 0 0 6px var(--superficie); }
.etapas h3 { font-size: var(--t-2); }
.etapas p { font-size: var(--t-1); color: var(--suave); }
@media (max-width: 62rem) {
  .etapas { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .etapas::before { left: 1.5rem; right: auto; top: 1.5rem; bottom: 1.5rem; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--linha-forte) 0 8px, transparent 8px 14px); }
  .etapas li { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.1rem; }
  .etapas li::before { grid-row: span 2; margin: 0; }
}

/* ---------- faixa escura (Signature+) com o escudo ---------- */
.escura { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 90% 10%, var(--noite-2) 0%, var(--noite) 60%); color: #D3DEEB; }
.escura h2, .escura h3 { color: #FFFFFF; }
.escura .suave, .escura .cabeca p { color: #A9BBD3; }
.escura .botao-principal { background: #FFFFFF; color: #06162E; }
.escura .botao-principal:hover { background: #DDE9F8; color: #06162E; }
.escura .botao-linha { color: #FFFFFF; border-color: rgba(255, 255, 255, .4); }
.escura .botao-linha:hover { border-color: #FFFFFF; color: #FFFFFF; }
.escura .marcas-lista b { color: #FFFFFF; }
.escudo-fundo { position: absolute; right: -6rem; top: 50%; width: min(34rem, 60vw); translate: 0 -50%; opacity: .07; pointer-events: none; filter: grayscale(1) brightness(2); }
.escura .miolo { position: relative; }
.dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 52rem) { .dois { grid-template-columns: minmax(0, 1fr); } }
.marcas-lista { display: grid; gap: 1.2rem; }
.marcas-lista li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .85rem; }
.marcas-lista li svg { width: 1.4rem; height: 1.4rem; color: var(--sinal); margin-top: .15rem; }
.marcas-lista b { color: var(--titulo); font-weight: 650; }

/* ---------- avaliações ---------- */
.nota-google { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nota-google .numero { font: 800 3.6rem/1 var(--f-titulo); font-stretch: 112%; color: var(--titulo); letter-spacing: -.03em; }
.estrelas { color: var(--sinal); letter-spacing: .12em; font-size: 1.15rem; }
.depoimentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.depoimentos figure { position: relative; margin: 0; background: var(--superficie); border-radius: var(--r-cartao); padding: 2.6rem 1.6rem 1.5rem; display: grid; gap: 1.1rem; align-content: space-between; box-shadow: var(--sombra-leve); }
.depoimentos figure::before { content: "\201C"; position: absolute; top: .4rem; left: 1.2rem; font: 800 4rem/1 var(--f-titulo); color: var(--sinal); }
.alt .depoimentos figure { background: var(--fundo); box-shadow: none; }
.depoimentos blockquote { margin: 0; font-size: var(--t-2); line-height: 1.55; color: var(--texto); }
.depoimentos figcaption { font-size: var(--t-1); color: var(--suave); }
.depoimentos figcaption b { display: block; color: var(--titulo); }
@media (max-width: 56rem) { .depoimentos { grid-template-columns: minmax(0, 1fr); } }
.depoimentos.muitos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.clientes { display: flex; flex-wrap: wrap; gap: .6rem; }
.clientes li { font: 650 var(--t-1) var(--f-texto); color: var(--titulo); background: var(--fundo); border-radius: var(--r-pilula); padding: .55rem 1rem; }

/* ---------- chamada final: foto + serra ---------- */
.final { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; background: var(--noite); }
.final .capa-foto { opacity: .5; }
.final-conteudo { padding-block: clamp(6rem, 12vw, 9rem) clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; }
.final h2 { color: #FFFFFF; font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 14ch; }
.final p { color: #D0DBE9; font-size: var(--t-3); line-height: 1.5; max-width: 32rem; }
.final .contatos { display: grid; gap: 1rem; font-size: var(--t-1); color: #BFCDE0; }
.final .contatos b { display: block; color: #FFFFFF; font-size: var(--t-3); font-family: var(--f-titulo); font-stretch: 105%; }
@media (max-width: 48rem) { .final-conteudo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- páginas internas ---------- */
.titulo-pagina { position: relative; padding-block: clamp(3rem, 7vw, 5rem) clamp(4.5rem, 9vw, 7rem); background: radial-gradient(120% 160% at 85% 0%, var(--noite-2) 0%, var(--noite) 60%); color: #D3DEEB; overflow: hidden; }
.titulo-pagina .miolo { display: grid; gap: 1.1rem; position: relative; }
.titulo-pagina h1 { color: #FFFFFF; font-size: clamp(2.3rem, 5vw, 3.9rem); }
.titulo-pagina p { font-size: var(--t-3); color: #BFCDE0; max-width: 42rem; line-height: 1.5; }
.titulo-pagina .trilha, .titulo-pagina .trilha a { color: #9FB2CC; }
.titulo-pagina .indice a { background: rgba(255, 255, 255, .08); color: #FFFFFF; border-color: rgba(255, 255, 255, .25); }
.titulo-pagina .indice a:hover { border-color: #FFFFFF; }
.titulo-pagina .nota-google .numero { color: #FFFFFF; }
.titulo-pagina .suave { color: #A9BBD3; }
.titulo-pagina .botao-linha { color: #FFFFFF; border-color: rgba(255, 255, 255, .4); }
.trilha { font-size: var(--t-0); color: var(--suave); }
.trilha a { color: var(--suave); }
.indice { display: flex; flex-wrap: wrap; gap: .45rem; }
.indice a { font-size: var(--t-0); font-weight: 650; text-decoration: none; color: var(--titulo); border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); padding: .45rem .9rem; }

.servico { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 2rem 3rem; padding-block: 3rem; scroll-margin-top: 5.5rem; }
.servico + .servico { border-top: 1px dashed var(--linha-forte); }
.servico-cabeca { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.servico h2 { font-size: var(--t-4); }
.servico .texto { display: grid; gap: 1.1rem; max-width: 40rem; }
.servico .colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.servico h3 { font-size: var(--t-1); color: var(--suave); font-weight: 650; margin-bottom: .45rem; }
.servico ul.itens { margin: 0; padding-left: 1.1rem; font-size: var(--t-1); display: grid; gap: .3rem; }
.servico ul.itens li::marker { color: var(--sinal); }
.servico .foto { margin: 0; background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #E9EEF5 100%); border-radius: var(--r-foto); aspect-ratio: 1; display: grid; place-items: center; padding: 1.4rem; align-self: start; max-width: 100%; }
.servico .foto figcaption { font-size: .75rem; color: #566479; text-align: center; }
.servico .foto img { max-height: 11rem; width: auto; }
.no-projeto { font-size: var(--t-1); color: var(--suave); }
.no-projeto b { color: var(--titulo); font-weight: 650; }
@media (max-width: 52rem) { .servico { grid-template-columns: minmax(0, 1fr); } .servico .foto { max-width: 15rem; } }
@media (max-width: 34rem) { .servico .colunas { grid-template-columns: minmax(0, 1fr); } }

/* páginas de solução */
.solucao-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.solucao-corpo .texto { display: grid; gap: 3rem; }
.solucao-corpo .texto > section { display: grid; gap: 1.25rem; }
.solucao-corpo h2 { font-size: var(--t-4); }
.lista-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; }
.lista-check li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .65rem; font-size: var(--t-2); }
.lista-check svg { width: 1.3rem; height: 1.3rem; color: var(--sinal); margin-top: .2rem; }
.lista-servicos { display: grid; gap: 1.5rem; }
.lista-servicos li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.lista-servicos h3 { font-size: var(--t-3); margin-bottom: .2rem; }
.lista-servicos h3 a { color: var(--titulo); text-decoration: none; }
.lista-servicos h3 a:hover { color: var(--azul); }
.lista-servicos p { color: var(--suave); }
.cartao-cta { position: sticky; top: 6rem; background: var(--superficie); border-radius: var(--r-cartao); padding: 1.75rem; display: grid; gap: 1rem; box-shadow: var(--sombra); }
.cartao-cta h2 { font-size: var(--t-4); }
.cartao-cta p { color: var(--suave); font-size: var(--t-1); }
.ilustrativo { font-size: .75rem; color: var(--suave); }
@media (max-width: 56rem) { .solucao-corpo { grid-template-columns: minmax(0, 1fr); } .cartao-cta { position: static; } }
@media (max-width: 34rem) { .lista-check { grid-template-columns: minmax(0, 1fr); } }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1.25rem; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-foto); }
.galeria figcaption { font-size: var(--t-0); color: var(--suave); padding-top: .55rem; }
.vizinhos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.vizinhos a { display: grid; gap: .3rem; padding: 1.25rem 1.5rem; border-radius: var(--r-cartao); background: var(--fundo); text-decoration: none; color: var(--titulo); }
.vizinhos a:hover { color: var(--azul); }
.vizinhos small { color: var(--suave); font-size: var(--t-0); }
.vizinhos b { font: 780 var(--t-3) var(--f-titulo); font-stretch: 105%; }
.vizinhos a:last-child { text-align: right; }
@media (max-width: 34rem) { .vizinhos { grid-template-columns: minmax(0, 1fr); } .vizinhos a:last-child { text-align: left; } }

.niveis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.nivel { background: var(--superficie); border-radius: var(--r-cartao); padding: 1.8rem; display: grid; gap: 1rem; align-content: start; box-shadow: var(--sombra-leve); }
.nivel.destaque { background: var(--noite); color: #D3DEEB; box-shadow: var(--sombra); }
.nivel.destaque h3 { color: #FFFFFF; }
.nivel.destaque .para { color: #A9BBD3; }
.nivel .para { font-size: var(--t-1); color: var(--suave); }
.nivel ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: var(--t-1); }
.nivel ul li::marker { color: var(--sinal); }
.nivel .selo { justify-self: start; font-size: .75rem; font-weight: 700; color: #1B1205; background: var(--sinal); border-radius: var(--r-pilula); padding: .25rem .7rem; }
@media (max-width: 56rem) { .niveis { grid-template-columns: minmax(0, 1fr); } }

.linha-tempo { display: grid; border-left: 2px dashed var(--linha-forte); margin-left: .5rem; }
.linha-tempo li { position: relative; padding: 0 0 2rem 1.75rem; display: grid; gap: .3rem; }
.linha-tempo li::before { content: ""; position: absolute; left: -.55rem; top: .35rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--fundo); border: 3px solid var(--sinal); }
.linha-tempo time { font: 700 var(--t-0) var(--f-titulo); color: var(--azul); }
.linha-tempo p { color: var(--suave); font-size: var(--t-1); max-width: 36rem; }
.fundador { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; align-items: center; }
.fundador img { border-radius: 50%; width: 12rem; height: 12rem; object-fit: cover; box-shadow: 0 0 0 6px var(--superficie), 0 0 0 8px var(--sinal); }
@media (max-width: 34rem) { .fundador { grid-template-columns: minmax(0, 1fr); } }
.valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.valores > div { display: grid; gap: .5rem; align-content: start; }
.valores p { color: var(--suave); font-size: var(--t-1); }
@media (max-width: 48rem) { .valores { grid-template-columns: minmax(0, 1fr); } }

.perguntas { display: grid; max-width: 46rem; gap: .6rem; }
.perguntas details { background: var(--superficie); border-radius: var(--r-cartao); padding: 0 1.4rem; }
.perguntas summary { cursor: pointer; list-style: none; padding: 1.2rem 2.25rem 1.2rem 0; position: relative; font: 650 var(--t-2) var(--f-texto); color: var(--titulo); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ""; position: absolute; right: .3rem; top: 1.5rem; width: .6rem; height: .6rem; border-right: 2px solid var(--sinal); border-bottom: 2px solid var(--sinal); transform: rotate(45deg); transition: transform .2s; }
.perguntas details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.perguntas details > div { padding: 0 0 1.3rem; color: var(--suave); display: grid; gap: .6rem; max-width: 40rem; }
.alt .perguntas details { background: var(--fundo); }

.form { display: grid; gap: 1.25rem; background: var(--superficie); border-radius: var(--r-cartao); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--sombra-leve); }
.campo { display: grid; gap: .45rem; min-width: 0; }
.campo label, .campo legend { font-weight: 650; font-size: var(--t-1); color: var(--titulo); }
.campo .ajuda { font-size: var(--t-0); color: var(--suave); }
.campo input, .campo select, .campo textarea { font: inherit; font-size: var(--t-2); color: var(--texto); background: var(--fundo); border: 1.5px solid var(--linha); border-radius: 14px; padding: .85rem 1rem; width: 100%; }
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-fundo); }
.campo [aria-invalid="true"] { border-color: var(--erro); }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 34rem) { .par { grid-template-columns: minmax(0, 1fr); } }
.opcoes { display: flex; flex-wrap: wrap; gap: .45rem; }
.opcoes label { font-weight: 550; font-size: var(--t-1); color: var(--texto); display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid var(--linha); border-radius: var(--r-pilula); padding: .5rem .95rem .5rem .65rem; cursor: pointer; background: var(--fundo); }
.opcoes input { accent-color: var(--azul); margin: 0; width: 1rem; height: 1rem; }
.opcoes label:has(input:checked) { border-color: var(--azul); background: var(--azul-fundo); }
.aviso { border-radius: 14px; padding: .95rem 1.1rem; font-size: var(--t-1); border: 1px solid; }
.aviso-ok { color: var(--ok); background: var(--ok-fundo); border-color: var(--ok-linha); }
.aviso-erro { color: var(--erro); background: var(--erro-fundo); border-color: var(--erro-linha); }
.aviso-info { color: var(--titulo); background: var(--azul-fundo); border-color: var(--info-linha); }
.ficha { display: grid; gap: 1.2rem; font-size: var(--t-1); }
.ficha dt { font-weight: 650; color: var(--titulo); }
.ficha dd { margin: .15rem 0 0; color: var(--suave); }

/* ---------- rodapé ---------- */
.rodape { position: relative; background: var(--noite); color: #A9BBD3; padding-block: 4rem 2rem; font-size: var(--t-1); }
.rodape a { color: #DCE5F0; text-decoration: none; }
.rodape a:hover { color: #FFFFFF; text-decoration: underline; }
.rodape .grade { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.rodape h4 { color: #FFFFFF; font-size: var(--t-1); margin-bottom: .9rem; }
.rodape ul { display: grid; gap: .5rem; }
.rodape .marca { color: #FFFFFF; margin-bottom: 1rem; }
.rodape .marca small { color: #8FA4BE; }
.rodape .legal { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; font-size: var(--t-0); color: #8FA4BE; }
@media (max-width: 52rem) { .rodape .grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 30rem) { .rodape .grade { grid-template-columns: minmax(0, 1fr); } }

.zap-flutuante { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 30; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--zap); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); }
.zap-flutuante:hover { background: var(--zap-hover); color: #fff; }
.zap-flutuante svg { width: 1.75rem; height: 1.75rem; }

/* celular: o visor fica só com a hora, e o véu cobre a foto inteira para o texto ler bem */
@media (max-width: 40rem) {
  .visor .canal { display: none; }
  .visor .rec { right: 2.25rem; }
  .capa-veu { background: linear-gradient(0deg, rgba(4, 12, 25, .94) 0%, rgba(4, 12, 25, .72) 55%, rgba(4, 12, 25, .45) 100%); }
  .capa-conteudo { padding-top: 5rem; }
}

/* ilustração dos serviços: o símbolo da planta, sem marca de fabricante */
.ilustra { position: relative; align-self: start; width: 100%; max-width: 16rem; aspect-ratio: 1; border-radius: var(--r-foto); overflow: hidden; display: grid; place-items: center;
  background-color: #0C2D5A; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; }
.ilustra span { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .25); }
.ilustra span:nth-child(1) { width: 78%; aspect-ratio: 1; }
.ilustra span:nth-child(2) { width: 52%; aspect-ratio: 1; border-style: solid; border-color: rgba(242, 169, 64, .55); box-shadow: 0 0 0 10px rgba(242, 169, 64, .12); }
.ilustra svg { position: relative; width: 30%; height: 30%; color: #FFFFFF; }
@media (max-width: 52rem) { .ilustra { max-width: 11rem; } }

/* Serra dos Órgãos (contorno da foto real do Dedo de Deus) no topo da
   última seção. A seção sobe por trás do conteúdo de cima; só aparece
   o recorte das montanhas, na proporção da foto. */
.final-serra { --serra-l: 56vw; --serra-a: calc(var(--serra-l) * 215 / 400);
  margin-top: calc(-1 * var(--serra-a)); padding-top: var(--serra-a); z-index: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 90 400 215' preserveAspectRatio='none'%3E%3Cpath d='M100 305L117 291L123 287L135 283L141 279L148 264L160 256L173 242L205 200L220 176L225 178L233 201L238 206L245 220L250 224L256 224L261 219L276 211L289 211L293 209L306 181L310 181L315 199L323 211L330 211L344 207L355 198L361 184L370 170L371 162L375 158L378 151L386 148L391 153L393 148L401 142L405 142L408 147L414 142L420 142L425 138L433 122L432 109L436 97L437 97L440 97L444 101L444 106L447 111L447 130L453 142L452 150L458 156L460 163L463 165L476 145L485 135L490 123L496 116L498 109L500 109L500 305Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 90 400 215' preserveAspectRatio='none'%3E%3Cpath d='M100 305L117 291L123 287L135 283L141 279L148 264L160 256L173 242L205 200L220 176L225 178L233 201L238 206L245 220L250 224L256 224L261 219L276 211L289 211L293 209L306 181L310 181L315 199L323 211L330 211L344 207L355 198L361 184L370 170L371 162L375 158L378 151L386 148L391 153L393 148L401 142L405 142L408 147L414 142L420 142L425 138L433 122L432 109L436 97L437 97L440 97L444 101L444 106L447 111L447 130L453 142L452 150L458 156L460 163L463 165L476 145L485 135L490 123L496 116L498 109L500 109L500 305Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: var(--serra-l) var(--serra-a), 100% calc(100% - var(--serra-a) + 1px);
          mask-size: var(--serra-l) var(--serra-a), 100% calc(100% - var(--serra-a) + 1px);
  -webkit-mask-position: right top, left bottom; mask-position: right top, left bottom;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.final-serra .final-conteudo { padding-top: clamp(2.5rem, 5vw, 4rem); }
main > section:not(.final) > .miolo { position: relative; z-index: 2; }
@media (max-width: 48rem) { .final-serra { --serra-l: 100vw; } }