/* ==========================================================================
   Tema do site inteiro. A Visualizza fica neutra: verde de rio para texto e
   blocos escuros, pedra para os fundos, e o laranja do V só nas ações.
   Uma família só (Bricolage Grotesque): estreita e pesada nos títulos,
   larga e leve no texto.
   Carregado depois do estilo.css em todas as páginas; todas somam o inicio.css.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-latin-var.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  --in-tinta: #12302F;
  --in-texto: #23312F;
  --in-cinza: #56635F;
  --in-cinza-2: #7C8985;
  --in-fundo: #EEF0EB;
  --in-fundo-2: #F6F7F4;
  --in-linha: #D8DCD5;
  --in-rosa: #FCE3D3;
  --in-laranja: #F26B1D;
  --in-laranja-texto: #B04A0E;
  --in-raio: 20px;

  --titulo: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corpo: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* A paleta antiga vira o verde de rio e a pedra. */
  --tinta: #12302F;
  --tinta-2: #1A3D3B;
  --tinta-3: #24504D;
  --laranja: #F26B1D;
  --laranja-2: #FF8A45;
  --laranja-fosco: #B04A0E;
  --papel-2: #EEF0EB;
  --papel-3: #E4E7E1;
  --texto: #23312F;
  --texto-2: #56635F;
  --linha: #D8DCD5;
  --linha-escura: #2A4A48;
  --claro: #EEF3F1;
  --claro-2: #B9C7C4;
  --raio: 14px;
  --raio-g: 18px;
  --topo-h: 68px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .03), 0 10px 28px rgba(0, 0, 0, .05);
  --sombra-g: 0 10px 24px rgba(0, 0, 0, .12), 0 30px 70px rgba(0, 0, 0, .16);
}

html { scroll-padding-top: 90px; }
body { background: #fff; color: var(--in-texto); font-family: var(--corpo); font-size: 16.5px; font-optical-sizing: auto; }
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 650; font-stretch: 88%; letter-spacing: -.025em; color: var(--in-tinta); }
@media (min-width: 900px) { body { font-size: 17px; } }
/* Destaque de uma palavra só no título não é mais usado: o título fala inteiro. */
h1 em, h2 em, h3 em, .in-em { color: inherit; font-style: normal; }
.hero h1 em, .cabeca h2 em, .cabeca-escura h2 em { color: inherit; }
.cabeca-escura .sub, .secao-escura .cabeca .sub { color: var(--claro-2); }
.marca-texto span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rodape .marca-texto span { color: var(--claro-2); }
::selection { background: var(--in-laranja); color: var(--in-tinta); }

/* ---------------------------------------------------------------- topo: barra branca fixa */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--in-linha);
}
.faixa {
  max-width: 1200px; margin: 0 auto; width: 100%;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 0 var(--gut); min-height: var(--topo-h); gap: 14px;
}
.topo .marca { color: var(--in-tinta); }
.topo .marca-icone path { stroke: var(--in-laranja); }
.topo .marca-icone circle { fill: var(--in-laranja); }
.marca-texto b { font-weight: 650; letter-spacing: -.01em; font-stretch: 90%; font-size: 1.15rem; }
.topo .marca-texto span { color: var(--in-cinza); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .74rem; }
.topo .menu { margin: 0 auto; gap: 2px; }
.topo .menu a { color: var(--in-texto); font-weight: 500; white-space: nowrap; padding: 9px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px; }
.topo .menu a:hover { color: var(--in-tinta); background: var(--in-fundo); }
.topo .btn-whats {
  background: var(--in-tinta); color: #fff; border: 0; border-radius: 12px;
  padding: 0 18px; min-height: 46px; gap: 10px; font-weight: 600; font-size: .95rem; box-shadow: none;
}
.topo .btn-whats svg { width: 20px; height: 20px; color: #fff; fill: #fff; }
.topo .btn-whats:hover { background: var(--tinta-3); transform: none; }
@media (max-width: 1100px) { .topo .menu { display: none; } .topo .btn-topo { margin-left: auto; } }
@media (max-width: 640px) {
  .topo .btn-whats span { display: none; }
  .topo .btn-whats { padding: 0; width: 44px; min-height: 44px; justify-content: center; }
}

/* ---------------------------------------------------------------- botões */
.btn { font-family: var(--titulo); border-radius: 12px; font-weight: 600; }
.btn-laranja {
  background: var(--in-laranja); color: var(--in-tinta); border: 0; gap: 10px;
  padding: 0 24px; min-height: 52px; box-shadow: none;
}
.btn-laranja svg { width: 18px; height: 18px; padding: 0; background: none; color: currentColor; fill: currentColor; }
.btn-laranja:hover { background: #FF8434; transform: none; }
.btn-vazado { background: transparent; color: var(--in-tinta); border: 1.5px solid var(--in-tinta); padding: 13px 22px; }
.btn-vazado:hover { background: var(--in-tinta); color: #fff; border-color: var(--in-tinta); }
.secao-escura .btn-vazado { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.secao-escura .btn-vazado:hover { background: #fff; color: var(--in-tinta); }

/* ---------------------------------------------------------------- rótulo: texto curto, sem pílula */
.olho, .olho-claro {
  gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--titulo); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--in-laranja-texto);
}
.olho::before { content: none; }
.olho .ponto { display: none; }
.secao-escura .olho, .cabeca-escura .olho { background: none; color: var(--in-laranja); }
.olho-tag { color: #fff; }

/* ---------------------------------------------------------------- hero claro */
.hero {
  margin: 0; padding: calc(var(--topo-h) + clamp(40px, 6vw, 80px)) 0 0;
  border-radius: 0; color: var(--in-texto); background: #fff;
}
.hero-simples { padding-bottom: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--in-linha); }
.hero-simples .hero-texto { max-width: 50em; margin: 0; text-align: left; }
.hero-simples .hero-botoes, .hero-simples .hero-selos { justify-content: flex-start; }
.hero h1 { color: var(--in-tinta); font-weight: 700; font-stretch: 80%; font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: .96; letter-spacing: -.04em; }
.hero .lead { color: var(--in-cinza); }
.hero-simples .lead { margin: 0 auto; }
.hero-selos li { color: #444; }
.hero :where(a, button):focus-visible { outline-color: var(--in-laranja); }
.fone-legenda { color: var(--in-cinza); }
.fone-legenda a { color: var(--in-laranja-texto); }
.hero-lojas { border-top: 0; background: transparent; }
.hero-lojas-titulo { color: var(--in-cinza); text-align: left; }
.lojas-links a { background: #fff; border: 1px solid var(--in-linha); border-radius: 18px; }
.lojas-links a:hover { border-color: var(--in-tinta); background: #fff; }
.lojas-links b { color: var(--in-tinta); font-weight: 500; }
.lojas-links span { color: var(--in-cinza); }


/* ---------------------------------------------------------------- seções e containers */
.secao { scroll-margin-top: 90px; }
.cabeca { margin-left: 0; margin-right: auto; text-align: left; }
.cabeca h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 650; font-stretch: 86%; line-height: 1.02; letter-spacing: -.03em; }
.cabeca .sub { color: var(--in-cinza); margin-left: 0; }

/* Seção clara e escura viram containers arredondados no meio da página branca. */
.secao-clara, .secao-escura { background: transparent; padding: clamp(10px, 2vw, 18px) 0; }
.secao-clara > .caixa, .secao-clara > .caixa-media,
.secao-escura > .caixa, .secao-escura > .caixa-media {
  width: calc(100% - 24px); border-radius: var(--in-raio);
  padding: clamp(44px, 7vw, 88px) clamp(20px, 5vw, 64px);
}
.secao-clara > .caixa, .secao-clara > .caixa-media { background: var(--in-fundo); border: 0; }
.secao-escura > .caixa, .secao-escura > .caixa-media { background: var(--in-tinta); color: var(--claro); }
/* O container ocupa a largura da página; o conteúdo estreito fica centrado dentro dele. */
.secao-clara > .caixa-estreita, .secao-escura > .caixa-estreita { max-width: var(--caixa); }
.secao-clara > .caixa-estreita > *, .secao-escura > .caixa-estreita > * { max-width: 920px; margin-left: 0; margin-right: auto; }
.secao > .caixa-estreita .lista-check, .secao > .caixa-estreita .implanta { max-width: 960px; }
@media (max-width: 480px) {
  .secao-clara > .caixa, .secao-clara > .caixa-media,
  .secao-escura > .caixa, .secao-escura > .caixa-media { width: calc(100% - 12px); border-radius: 24px; }
}

/* ---------------------------------------------------------------- listas e cartões */
.lista-check { gap: 12px; }
@media (min-width: 700px) { .lista-check { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lista-check li {
  align-items: flex-start; background: var(--in-fundo-2); border: 1px solid var(--in-linha);
  border-radius: 12px; padding: 16px 18px; color: var(--in-cinza); font-size: .97rem; line-height: 1.5;
}
.secao-clara .lista-check li, .painel .lista-check li { background: #fff; }
.lista-check b { color: var(--in-tinta); font-weight: 600; }
.lista-check svg {
  width: 26px; height: 26px; padding: 5px; margin-top: 0; border-radius: 50%;
  background: var(--in-rosa); color: var(--in-laranja);
}
.painel .lista-check { grid-template-columns: 1fr; }

.implanta { gap: 14px; }
@media (min-width: 700px) { .implanta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.implanta li { align-content: start; background: #fff; border: 1px solid var(--in-linha); border-radius: 14px; box-shadow: none; grid-template-columns: 1fr; gap: 10px; padding: 24px; }
.implanta li > span { width: auto; height: auto; background: none; color: var(--in-laranja); font-size: 2.6rem; font-weight: 700; font-stretch: 75%; line-height: .9; justify-content: flex-start; border-radius: 0; }
.implanta p { color: var(--in-cinza); }

.bloco, .dor, .invest-item, .preco-cartao, .cartao-marca, .servico {
  border-radius: 16px; box-shadow: none; border: 1px solid var(--in-linha);
}
.bloco-icone, .servico-icone { width: 44px; height: 44px; border-radius: 50%; background: var(--in-rosa); color: var(--in-laranja); }
.bloco-icone svg, .servico-icone svg { width: 21px; height: 21px; }
.bloco h3, .dor h3, .invest-item h3 { font-weight: 500; }
.dor-num { color: var(--in-laranja-texto); font-weight: 600; }
.secao-clara .dor, .secao-clara .bloco, .secao-clara .invest-item, .secao-clara .cartao-marca { background: #fff; }
.cartao-marca:hover { box-shadow: none; border-color: var(--in-tinta); }
.invest-destaque { background: var(--in-tinta); border-color: var(--in-tinta); }
.preco-cartao-destaque { border: 2px solid var(--in-laranja); }

.link-loja {
  gap: 10px; padding: 0 22px; min-height: 52px; border: 0; border-radius: 12px;
  background: var(--in-tinta); color: #fff;
}
.link-loja svg { width: 18px; height: 18px; padding: 0; background: none; color: #fff; }
.link-loja:hover { background: var(--tinta-3); }
.link-loja:hover svg { transform: none; }
.cabeca + .link-loja { display: flex; width: fit-content; margin: 0; }

.faixas { border-radius: 14px; }

/* Cartões dentro do container preto. */
.passos li, .infra article, .novidade { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); border-radius: 14px; }
.passo-icone, .infra span { border-radius: 10px; background: rgba(242, 107, 29, .16); }

/* abas */
.abas-botoes { justify-content: flex-start; }
/* Com espaço, as abas quebram linha e ficam todas à vista; no celular rolam para o lado a partir da primeira. */
@media (min-width: 700px) { .abas-botoes { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 699px) { .abas-botoes { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); scroll-padding: 0 var(--gut); } }
.abas-botoes button { font-weight: 500; border-color: var(--in-linha); border-radius: 12px; }
.abas-botoes button[aria-selected="true"] { background: var(--in-tinta); border-color: var(--in-tinta); }
.segunda-loja { border-radius: 20px; }

/* comparativo */
.comparativo thead th, .comparativo tbody th { font-weight: 500; }
.comparativo .col-nossa { background: rgba(242, 107, 29, .08); }

/* perguntas */
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--in-linha); border-radius: 0; }
.faq details[open] { border-color: var(--in-linha); }
.faq summary { font-weight: 600; color: var(--in-tinta); padding-left: 0; padding-right: 0; }
.faq summary::after {
  content: ''; width: 14px; height: 14px; border: 0; border-radius: 0; transform: none;
  background: linear-gradient(var(--in-tinta), var(--in-tinta)) center / 14px 2px no-repeat,
              linear-gradient(var(--in-tinta), var(--in-tinta)) center / 2px 14px no-repeat;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--in-cinza); padding-left: 0; padding-right: 0; }

/* formulário dentro do container preto */
.form { background: var(--tinta-2); border-color: var(--linha-escura); border-radius: 18px; }
.campo label { font-weight: 600; }
.campo input, .campo select { background: #0E2625; border-color: var(--linha-escura); border-radius: 10px; }
.campo select option { background: var(--tinta-2); }

.btn-whats { border-radius: 12px; }
.cta-alt a { color: var(--in-laranja); }

/* ---------------------------------------------------------------- rodapé */
.rodape { background: #0D2524; margin-top: clamp(64px, 9vw, 120px); }
.rodape h2 { color: #fff; font-weight: 500; }
.rodape a { color: #B9C7C4; }
.rodape a:hover { color: #fff; }
.rodape .marca-texto b { color: #fff; }
.rodape-fim { border-top-color: #22403E; }
.zap-flutua { box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }

/* Links de texto soltos: área de toque de 44px sem mudar o desenho. */
.in-link, .in-final-contatos a {
  display: inline-block; padding: 11px 0; min-height: 44px; border-bottom: 0;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.in-link { text-decoration-color: var(--in-laranja); }
.in-final-contatos a { text-decoration-color: var(--in-linha); text-decoration-thickness: 1px; }
.in-final-contatos { gap: 0; }
.in-marca { min-height: 48px; }

/* ---------------------------------------------------------------- menu do celular */
.faixa { position: relative; }
.menu-movel { display: none; flex: none; }
.menu-movel summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 12px;
  background: var(--in-fundo); border: 1px solid var(--in-linha);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.menu-movel summary::-webkit-details-marker { display: none; }
.menu-movel summary span { width: 18px; height: 2px; border-radius: 2px; background: var(--in-tinta); transition: transform .2s, opacity .2s; }
.menu-movel[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-movel[open] summary span:nth-child(2) { opacity: 0; }
.menu-movel[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-movel-painel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  display: grid; gap: 4px; padding: 10px;
  background: #fff; border: 1px solid var(--in-linha); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(18, 48, 47, .12);
}
.menu-movel-painel a {
  display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 10px;
  color: var(--in-tinta); font-weight: 500; text-decoration: none;
}
.menu-movel-painel a:hover { background: var(--in-fundo); }
@media (max-width: 1100px) { .menu-movel { display: block; } }
@media (max-width: 640px) { .topo .faixa { gap: 6px; padding-left: 14px; } .topo .btn-topo { margin-left: auto; } }
@media (max-width: 420px) {
  .topo .marca { gap: 8px; }
  .topo .marca-icone { width: 28px; height: 28px; }
  .topo .marca-texto b { font-size: .98rem; }
  .topo .marca-texto span { font-size: .62rem; }
}

/* ---------------------------------------------------------------- página 404 */
.erro {
  min-height: 100vh; display: grid; place-items: center; text-align: center;
  background: #fff;
}
.erro .erro-num { margin: 0; font-size: clamp(5rem, 20vw, 9rem); font-weight: 700; font-stretch: 75%; line-height: 1; letter-spacing: -.05em; color: var(--in-laranja); }
.erro h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 10px 0 14px; }
.erro p { color: var(--in-cinza); max-width: 30em; margin: 0 auto 30px; }
.erro-botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------------------------------------------------------------- títulos sem palavra solta e rótulos em caixa normal */
h1, h2, h3 { text-wrap: balance; }
.rodape h2 { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; }
.zap-flutua { border-radius: 16px; }

/* ---------------------------------------------------------------- alinhamento à esquerda em todas as seções */
.hero-simples .lead, .hero .lead { margin-left: 0; margin-right: 0; }
.secao > .caixa-estreita { max-width: var(--caixa); }
.secao > .caixa-estreita > * { max-width: 920px; margin-left: 0; margin-right: auto; }
.btn-laranja { justify-content: center; text-align: center; }

/* ---------------------------------------------------------------- movimento em resposta ao toque e ao mouse */
.btn, .topo .btn-whats, .link-loja { transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s; }
.btn-laranja:hover, .btn-vazado:hover, .link-loja:hover { transform: translateY(-2px); }
.btn-laranja:hover { box-shadow: 0 10px 22px rgba(242, 107, 29, .28); }
.topo .btn-whats:hover { transform: translateY(-1px); }
.cartao-marca, .lista-check li, .implanta li, .bloco, .dor { transition: transform .2s, box-shadow .2s, border-color .2s; }
.cartao-marca:hover, .bloco:hover, .dor:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18, 48, 47, .10); }
.topo .menu a { transition: background .15s, color .15s; }
/* Menu do celular: o painel desce e os itens entram em sequência. */
.menu-movel summary { transition: background .15s, border-color .15s; }
.menu-movel[open] summary { background: var(--in-tinta); border-color: var(--in-tinta); }
.menu-movel[open] summary span { background: #fff; }
.menu-movel[open] .menu-movel-painel { animation: vz-menu-desce .24s cubic-bezier(.2, .8, .2, 1); transform-origin: top; }
.menu-movel[open] .menu-movel-painel a { animation: vz-menu-item .3s cubic-bezier(.2, .8, .2, 1) backwards; }
.menu-movel[open] .menu-movel-painel a:nth-child(2) { animation-delay: .03s; }
.menu-movel[open] .menu-movel-painel a:nth-child(3) { animation-delay: .06s; }
.menu-movel[open] .menu-movel-painel a:nth-child(4) { animation-delay: .09s; }
.menu-movel[open] .menu-movel-painel a:nth-child(5) { animation-delay: .12s; }
.menu-movel[open] .menu-movel-painel a:nth-child(n+6) { animation-delay: .15s; }
@keyframes vz-menu-desce { from { opacity: 0; transform: translateY(-10px) scaleY(.96); } }
@keyframes vz-menu-item { from { opacity: 0; transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .btn-laranja:hover, .btn-vazado:hover, .link-loja:hover, .topo .btn-whats:hover,
  .cartao-marca:hover, .bloco:hover, .dor:hover { transform: none; }
  .menu-movel[open] .menu-movel-painel, .menu-movel[open] .menu-movel-painel a { animation: none; }
}