/* =========================================================
   Guincho Sarzi · style.css
   Tokens do 07-design-system.json (v1.1.0). Mobile first.
   Layout: grid de 12 colunas, container 1200px, seções alternadas
   (branco / branco rosado / vinho suave) e faixas vinho para prova e conversão.
   ========================================================= */

/* Fontes hospedadas no próprio site (latin), sem depender do Google Fonts */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/manrope-latin-700.woff2") format("woff2"); }

:root {
  /* Cores */
  --vinho: #590719;
  --vinho-hover: #420511;
  --vinho-suave: #F7ECEF;
  --vermelho: #AB3A4D;
  --dourado: #F0C674;
  --dourado-texto: #72500E;
  --texto: #090808;
  --texto-suave: #4D4547;
  --branco: #FFFFFF;
  --fundo-alt: #FAF7F8;
  --borda: #D7C9CD;
  --borda-forte: #8A777D;
  --whats: #166A45;
  --whats-hover: #115737;
  --foco: #2056C9;
  --foco-escuro: #F0C674;

  /* Tipografia */
  --fonte-titulo: "Manrope", Arial, sans-serif;
  --fonte-texto: "Inter", Arial, sans-serif;
  --h1: clamp(2.25rem, 5vw, 4.25rem);
  --h2: clamp(1.875rem, 3.5vw, 3rem);
  --h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --h4: clamp(1.0625rem, 1.4vw, 1.1875rem);
  --corpo-grande: clamp(1.0625rem, 1.2vw, 1.25rem);
  --corpo: clamp(1rem, calc(0.95rem + 0.2vw), 1.125rem);
  --corpo-peq: clamp(0.875rem, calc(0.85rem + 0.1vw), 1rem);

  /* Espaço, raio, sombra, movimento */
  --secao: 64px;
  --gap: 24px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --sombra-sm: 0 4px 12px rgba(9, 8, 8, .06);
  --sombra-md: 0 10px 28px rgba(9, 8, 8, .09);
  --sombra-lg: 0 18px 48px rgba(9, 8, 8, .12);
  --t-rapida: 120ms ease-out;
  --t-normal: 200ms ease-out;
  --t-lenta: 300ms ease-out;
  --altura-topo: 72px;
  --altura-barra: 72px;

  color-scheme: light;
}

@media (min-width: 768px) { :root { --secao: 80px; } }
@media (min-width: 1024px) { :root { --secao: 96px; --altura-topo: 88px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--corpo);
  line-height: 1.7;
  padding-bottom: calc(var(--altura-barra) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--vinho); margin: 0; text-wrap: balance; font-weight: 700; }
h1 { font-size: var(--h1); line-height: 1.08; letter-spacing: -0.04em; }
h2 { font-size: var(--h2); line-height: 1.14; letter-spacing: -0.035em; }
h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.02em; }
h4 { font-size: var(--h4); line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }
a { color: var(--vinho); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-rapida); }
a:hover { color: var(--vinho-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
.ic { width: 24px; height: 24px; flex: none; fill: currentColor; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 32px; height: 32px; }
.sprite { display: none; }

.container {
  width: 100%;
  max-width: 1264px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) { .container { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
@media (min-width: 1024px) { .container { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

.pular {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--vinho); color: var(--branco); padding: 12px 20px; border-radius: var(--r-md);
}
.pular:focus { top: calc(12px + env(safe-area-inset-top, 0px)); color: var(--branco); outline-color: var(--foco-escuro); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: var(--r-md);
  font: 700 1rem/1.25 var(--fonte-texto); text-decoration: none; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--t-normal), transform var(--t-normal), box-shadow var(--t-normal), color var(--t-normal);
}
.btn:active { transform: scale(.98); }
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: .9375rem; }
.btn-lg { min-height: 56px; padding: 16px 28px; }
.btn-whats { background: var(--whats); color: var(--branco); border-color: var(--whats); }
.btn-whats:hover { background: var(--whats-hover); color: var(--branco); }
.btn-prim { background: var(--vinho); color: var(--branco); border-color: var(--vinho); }
.btn-prim:hover { background: var(--vinho-hover); color: var(--branco); }
.btn-sec { background: var(--branco); color: var(--vinho); border-color: var(--vinho); }
.btn-sec:hover { background: var(--vinho-suave); color: var(--vinho); }
.btn-branco { background: var(--branco); color: var(--vinho); border-color: var(--branco); }
.btn-branco:hover { background: var(--vinho-suave); color: var(--vinho-hover); }
.btn-contorno-branco { background: transparent; color: var(--branco); border-color: rgba(255,255,255,.85); }
.btn-contorno-branco:hover { background: rgba(255,255,255,.12); color: var(--branco); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--sombra-sm); }
}
.link-botao { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
  background: var(--vinho); color: var(--dourado);
}
.selo-claro { background: var(--vinho-suave); color: var(--vinho); }

/* ---------- Topbar ---------- */
.topbar { background: var(--vinho); color: var(--branco); font-size: .875rem; display: none; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar-msg { display: flex; align-items: center; gap: 8px; }
.topbar-msg .ic { color: var(--dourado); }
.topbar-links { display: flex; gap: 24px; }
.topbar-links a { color: var(--branco); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.topbar-links a:hover { text-decoration: underline; color: var(--branco); }
.topbar :focus-visible { outline-color: var(--foco-escuro); }
@media (min-width: 768px) { .topbar { display: block; } }

/* ---------- Header ---------- */
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--branco); border-bottom: 1px solid var(--borda);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--branco); }
.topo-in { display: flex; align-items: center; gap: 12px; min-height: var(--altura-topo); }
.logo { display: flex; align-items: center; margin-right: auto; padding: 4px 0; }
.logo img { height: 56px; width: auto; }
@media (min-width: 1024px) { .logo img { height: 72px; } }
.topo-ligar, .abrir-menu {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; min-width: 48px; padding: 0 14px;
  border-radius: var(--r-md); font: 700 .9375rem var(--fonte-texto); cursor: pointer;
}
.topo-ligar { background: var(--vinho-suave); color: var(--vinho); text-decoration: none; }
.abrir-menu { background: var(--vinho); color: var(--branco); border: 0; }
.botao-destaque { display: none; }
.botao-destaque .txt-longo { display: none; }

/* Navegação: celular (drawer) */
.nav {
  position: fixed; inset: 0; z-index: 80; background: var(--branco);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  transform: translateX(100%); visibility: hidden; transition: transform 250ms ease-out, visibility 0s 250ms;
}
.menu-aberto .nav { transform: none; visibility: visible; transition: transform 250ms ease-out; }
.menu-aberto { overflow: hidden; }
.nav-topo-celular { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.nav-topo-celular img { height: 48px; width: auto; }
.fechar-menu { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; background: var(--vinho-suave); color: var(--vinho); border: 0; border-radius: var(--r-md); font: 700 .9375rem var(--fonte-texto); cursor: pointer; }
.menu { display: flex; flex-direction: column; padding-block: 8px 24px; }
.menu-item { border-bottom: 1px solid var(--borda); }
.menu-gatilho, .menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 56px; padding: 0 4px; background: none; border: 0; text-align: left;
  font: 700 1.0625rem var(--fonte-titulo); color: var(--vinho); text-decoration: none; cursor: pointer;
}
.menu-link { justify-content: flex-start; }
.menu-gatilho .ic { transition: transform var(--t-normal); }
.menu-gatilho[aria-expanded="true"] .ic { transform: rotate(180deg); }
.painel { display: none; padding-bottom: 16px; }
.menu-gatilho[aria-expanded="true"] + .painel { display: block; }
/* Sem JavaScript, o celular mostra as listas abertas */
.sem-js .painel { display: block; }
.sem-js .nav { position: static; transform: none; visibility: visible; }
@media (max-width: 1023px) { .sem-js .topo { position: relative; } .sem-js .topo-in { flex-wrap: wrap; } .sem-js .nav { flex-basis: 100%; padding: 0; } }
.sem-js .abrir-menu, .sem-js .nav-topo-celular { display: none; }

.painel-grade { display: grid; gap: 20px; }
.coluna-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; min-height: 44px; }
.coluna-sub { font-size: .875rem; color: var(--texto-suave); margin-bottom: 4px; }
.item { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; min-height: 56px; padding: 8px; border-radius: var(--r-md); text-decoration: none; }
.item:hover { background: var(--vinho-suave); }
.item-ic { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; background: var(--vinho-suave); border-radius: var(--r-md); color: var(--vinho); }
.item:hover .item-ic { background: var(--branco); }
.item-nome { font-weight: 600; color: var(--texto); line-height: 1.3; }
.item-desc { font-size: .875rem; font-weight: 400; color: var(--texto-suave); line-height: 1.4; }
.ver-todos { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .9375rem; }
.destaque { display: none; }
.faixa-painel { display: none; }
.lista-bairros { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.lista-bairros a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 8px; border-radius: var(--r-sm); color: var(--texto); font-weight: 600; text-decoration: none; font-size: .9375rem; }
.lista-bairros a:hover { background: var(--vinho-suave); color: var(--vinho); }
.lista-bairros .ic { color: var(--vinho); }
.lista-bairros a[aria-current="page"] { background: var(--vinho-suave); color: var(--vinho); box-shadow: inset 3px 0 0 var(--vinho); }
.lista-bairros .ver-todos { grid-column: 1 / -1; color: var(--vinho); }
.menu-tel .menu-link { gap: 10px; }
.menu-fixo-celular {
  position: sticky; bottom: 0; margin-top: auto; display: grid; gap: 10px;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--branco); border-top: 1px solid var(--borda);
}
.menu-fixo-celular .btn-whats { min-height: 52px; }
.menu-fixo-celular .btn-sec { min-height: 48px; }

/* Navegação: desktop (mega menu) */
@media (min-width: 1024px) {
  .topo-ligar, .abrir-menu, .nav-topo-celular, .menu-fixo-celular { display: none; }
  .botao-destaque { display: inline-flex; min-height: 48px; padding: 12px 18px; }
  .botao-destaque .txt-curto { display: inline; }
  .logo { margin-right: 8px; }
  .nav {
    position: static; transform: none; visibility: visible; overflow: visible; background: none;
    padding: 0; flex-direction: row; flex: 1; transition: none;
  }
  .menu { flex-direction: row; align-items: center; gap: 4px; padding: 0; width: 100%; }
  .menu-item { border: 0; position: static; }
  .menu-tel { margin-left: auto; }
  .menu-gatilho, .menu-link {
    min-height: 48px; width: auto; padding: 0 12px; border-radius: var(--r-md);
    font: 600 .9688rem var(--fonte-texto); color: var(--texto); white-space: nowrap;
  }
  .botao-destaque { white-space: nowrap; }
  .menu-gatilho, .menu-link { padding: 0 10px; }
  .menu-gatilho:hover, .menu-link:hover, .menu-gatilho[aria-expanded="true"] { background: var(--vinho-suave); color: var(--vinho); }
  .menu-tel .menu-link { color: var(--vinho); font-weight: 700; }
  .painel {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--branco); border-top: 1px solid var(--borda); box-shadow: var(--sombra-lg);
    padding: 0; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s 150ms;
  }
  .painel > * { max-width: 1200px; margin-inline: auto; }
  .menu-gatilho[aria-expanded="true"] + .painel,
  .menu-item:focus-within > .painel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-item[data-fechado] > .painel { opacity: 0; visibility: hidden; }
  .sem-js .painel { display: block; }
  .painel-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; padding: 32px 32px 28px; }
  .coluna { grid-column: span 3; display: flex; flex-direction: column; }
  .coluna ul { display: grid; gap: 4px; margin-bottom: 8px; }
  .coluna .ver-todos { margin-top: auto; }
  .lista-bairros { grid-column: span 9; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(6, auto); align-content: start; }
  .lista-bairros .ver-todos { grid-column: auto; }
  .destaque {
    grid-column: span 3; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
    background: var(--fundo-alt); border-radius: var(--r-lg); padding: 16px;
  }
  .destaque img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
  .destaque-titulo { font: 700 1.125rem var(--fonte-titulo); text-decoration: none; }
  .destaque p { font-size: .875rem; color: var(--texto-suave); line-height: 1.5; }
  .destaque .btn { width: 100%; margin-top: auto; font-size: .875rem; }
  .faixa-painel {
    display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; min-height: 56px;
    background: var(--vinho-suave); padding: 0 32px; font-size: .9375rem; font-weight: 600;
  }
  .painel > .faixa-painel { max-width: none; }
  .faixa-painel > * { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--vinho); text-decoration: none; min-height: 44px; }
  .faixa-painel a:hover { text-decoration: underline; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .menu-item:hover > .painel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-item:not(:hover) > .painel { transition-delay: 150ms; }
  /* Esc fecha o painel mesmo com o mouse em cima; reabre ao sair e voltar com o mouse */
  .menu-item[data-fechado] > .painel { opacity: 0; visibility: hidden; }
}
@media (min-width: 1280px) {
  .botao-destaque .txt-longo { display: inline; }
  .botao-destaque .txt-curto { display: none; }
}

/* ---------- Seções ---------- */
.secao { padding-block: var(--secao); }
.secao-alt { background: var(--fundo-alt); }
.secao-suave { background: var(--vinho-suave); }
.secao-topo { max-width: 760px; margin-bottom: 40px; display: grid; gap: 14px; }
.sobretitulo { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado-texto); }
.secao-resposta { font-size: var(--corpo-grande); line-height: 1.6; color: var(--texto-suave); max-width: 70ch; }
.secao-topo .secao-resposta { color: var(--texto); }
.texto-link { margin-top: 24px; color: var(--texto-suave); }
.secao-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.secao-cta p { color: var(--texto-suave); }
.tel-texto { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; user-select: all; }

/* ---------- Grades (simetria) ---------- */
.grade { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .grade-2, .grade-3, .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3, 9, 15... itens: 3 colunas já no tablet, para a última linha não ficar com 1 card sozinho */
  .grade-3:has(> :last-child:nth-child(3n):nth-child(odd)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Hero ---------- */
.hero { padding-block: 40px var(--secao); background: linear-gradient(180deg, var(--fundo-alt) 0%, var(--branco) 70%); }
.hero-grade { display: grid; gap: 40px; align-items: center; }
.hero-texto { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.hero-lead { font-size: var(--corpo-grande); line-height: 1.6; max-width: 60ch; }
.hero-promessa { font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--vinho); max-width: 52ch; padding-left: 16px; border-left: 4px solid var(--vermelho); }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.botoes .btn { flex: 1 1 100%; }
@media (min-width: 640px) { .botoes .btn { flex: 0 1 auto; } }
.hero-numero { font-size: .9375rem; color: var(--texto-suave); }
.provas { display: grid; gap: 12px; width: 100%; padding-top: 8px; }
.provas li { display: flex; gap: 12px; align-items: center; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 14px 16px; }
.prova-ic { width: 44px; height: 44px; display: grid; place-items: center; flex: none; background: var(--vinho-suave); color: var(--vinho); border-radius: 12px; }
.prova-t { display: block; font-family: var(--fonte-titulo); color: var(--vinho); font-size: 1.0625rem; line-height: 1.2; }
.prova-d { display: block; font-size: .875rem; color: var(--texto-suave); line-height: 1.4; }
.hero-foto { margin: 0; position: relative; min-width: 0; }
.hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sombra-lg); background: var(--vinho-suave); }
.hero-foto figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 8px; align-items: center;
  background: rgba(89, 7, 25, .92); color: var(--branco); font-size: .875rem; font-weight: 600; line-height: 1.4;
  padding: 10px 14px; border-radius: var(--r-md);
}
.hero-foto figcaption .ic { color: var(--dourado); }

@media (min-width: 768px) { .provas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .provas li { flex-direction: column; align-items: flex-start; } }
@media (min-width: 1024px) {
  .hero { padding-top: 64px; }
  .hero-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .hero-texto { grid-column: span 7; }
  .hero-foto { grid-column: span 5; }
}


/* ---------- Faixa de confiança ---------- */
.confianca { background: var(--vinho); color: var(--branco); }
.confianca-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-block: 8px; }
.confianca-grade li { display: flex; gap: 12px; align-items: flex-start; padding: 20px 8px; font-size: .875rem; line-height: 1.45; color: rgba(255,255,255,.88); min-width: 0; }
.confianca-grade .ic { color: var(--dourado); }
.confianca-grade strong { display: block; color: var(--branco); font-family: var(--fonte-titulo); font-size: 1rem; }
.confianca-grade a { color: var(--dourado); font-weight: 600; }
.confianca-grade a:hover { color: var(--branco); }
.confianca :focus-visible { outline-color: var(--foco-escuro); }
@media (min-width: 1024px) {
  .confianca-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .confianca-grade li { padding: 28px 24px; border-left: 1px solid rgba(255,255,255,.14); }
  .confianca-grade li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- Cards de serviço e blog ---------- */
.card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); overflow: hidden;
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.card-img { position: relative; }
.card-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--vinho-suave); transition: transform var(--t-lenta); }
.card-img-169 img { aspect-ratio: 16 / 9; }
.card-ic {
  position: absolute; left: 20px; bottom: -24px; width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--vinho); color: var(--branco); border-radius: 12px; border: 3px solid var(--branco);
}
.card-corpo { display: flex; flex-direction: column; gap: 10px; padding: 40px 24px 24px; flex: 1; }
.card-blog .card-corpo { padding-top: 24px; }
.card-corpo > p:not(.card-meta):not(.card-acao):not(.categoria) { color: var(--texto-suave); line-height: 1.6; }
.card h3 { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); }
.card h3 a { color: var(--vinho); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.card-meta, .card-acao {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borda);
  display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--dourado-texto);
}
.card-meta .seta, .card-acao .ic { margin-left: auto; color: var(--vinho); transition: transform var(--t-normal); }
.card-acao a { color: var(--vinho); text-decoration: none; display: inline-block; }
.card-acao a::first-letter, .bairros span::first-letter { text-transform: uppercase; }
.categoria { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado-texto); }
.card-hub { background: var(--vinho-suave); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--sombra-md); transform: translateY(-3px); }
  .card:hover .card-img img { transform: scale(1.015); }
  .card:hover .seta, .card:hover .card-acao .ic { transform: translateX(4px); }
  .card:hover h3 a { text-decoration: underline; }
}

/* ---------- Split texto + imagem ---------- */
.split { display: grid; gap: 40px; align-items: center; }
.split-texto { display: grid; gap: 16px; min-width: 0; }
.split-texto > p:not(.sobretitulo):not(.secao-resposta):not(.texto-link) { color: var(--texto-suave); max-width: 70ch; }
.split-foto { margin: 0; min-width: 0; }
.split-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--vinho-suave); }
.dores { display: grid; gap: 16px; margin-top: 8px; }
.dor { padding: 18px 20px; background: var(--fundo-alt); border-radius: var(--r-md); display: grid; gap: 6px; }
.dor h3 { font-size: 1.125rem; }
.dor p { color: var(--texto-suave); font-size: .9688rem; line-height: 1.6; }
.dores-ic .dor { grid-template-columns: 44px 1fr; column-gap: 14px; background: var(--branco); border: 1px solid var(--borda); }
.dores-ic .dor-ic { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--vinho-suave); color: var(--vinho); border-radius: 12px; }
@media (min-width: 768px) { .dores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .split-foto { grid-column: span 5; position: sticky; top: 140px; align-self: start; }
  .split-texto { grid-column: span 7; }
  .split-invertido .split-texto { order: -1; }
}

/* ---------- Passos ---------- */
.passos { counter-reset: none; }
.passo { position: relative; display: grid; gap: 10px; align-content: start; background: var(--branco); border-radius: var(--r-lg); padding: 28px 24px; height: 100%; }
.passo-num { position: absolute; top: 18px; right: 22px; font: 700 2.5rem/1 var(--fonte-titulo); color: var(--vinho-suave); -webkit-text-stroke: 1px var(--borda); }
.passo-ic { width: 56px; height: 56px; display: grid; place-items: center; background: var(--vinho); color: var(--dourado); border-radius: 12px; }
.passo h3 { font-size: 1.1875rem; padding-right: 48px; }
.passo p { color: var(--texto-suave); font-size: .9688rem; line-height: 1.6; }

/* ---------- Benefícios ---------- */
.beneficio { display: grid; gap: 12px; align-content: start; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 32px; height: 100%; }
.beneficio-ic { width: 56px; height: 56px; display: grid; place-items: center; background: var(--vinho-suave); color: var(--vinho); border-radius: 12px; }
.beneficio h3 { font-size: 1.1875rem; }
.beneficio p { color: var(--texto-suave); font-size: .9688rem; line-height: 1.6; }

/* ---------- Information Gain ---------- */
.ig-bloco { margin-top: 48px; display: grid; gap: 12px; }
.ig-bloco:first-of-type { margin-top: 0; }
.ig-resposta { color: var(--texto-suave); max-width: 70ch; margin-bottom: 12px; }
.check-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px; border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--branco); height: 100%; }
.check-num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: var(--vinho); color: var(--dourado); font: 700 1.125rem var(--fonte-titulo); }
.check-item h4 { margin-bottom: 6px; }
.check-item p { color: var(--texto-suave); font-size: .9688rem; line-height: 1.6; }
.ig-mensagem { background: var(--vinho); color: var(--branco); border-radius: var(--r-xl); padding: 28px 24px; gap: 20px; }
.ig-mensagem h3 { color: var(--branco); }
.ig-mensagem .ig-resposta { color: rgba(255,255,255,.85); margin-bottom: 0; }
.ig-mensagem :focus-visible { outline-color: var(--foco-escuro); }
.mensagem { background: var(--branco); color: var(--texto); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 16px; min-width: 0; }
.mensagem-txt { font: 600 1.125rem/1.5 var(--fonte-titulo); color: var(--vinho); border-left: 4px solid var(--vermelho); padding-left: 16px; }
.mensagem-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.mensagem-acoes .btn-sec { color: var(--vinho); }
.mensagem :focus-visible { outline-color: var(--foco); }
.copiado { font-size: .875rem; color: var(--whats); font-weight: 600; min-height: 1.4em; }
@media (min-width: 1024px) {
  .ig-mensagem { grid-template-columns: 5fr 7fr; align-items: center; padding: 40px; }
}
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9688rem; border: 1px solid var(--borda); border-radius: var(--r-lg); overflow: hidden; }
.tabela caption { text-align: left; font-size: .875rem; color: var(--texto-suave); padding-bottom: 10px; }
.tabela thead th { background: var(--vinho); color: var(--branco); font-family: var(--fonte-titulo); text-align: left; padding: 14px 18px; }
.tabela tbody th { text-align: left; color: var(--vinho); font-family: var(--fonte-titulo); padding: 14px 18px; }
.tabela td { padding: 14px 18px; color: var(--texto-suave); vertical-align: top; }
.tabela tbody tr:nth-child(even) { background: var(--fundo-alt); }
.tabela td:nth-child(2) { color: var(--texto); font-weight: 600; }
@media (max-width: 767px) {
  .tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; width: 100%; }
  .tabela { border: 0; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela tbody { display: grid; gap: 12px; }
  .tabela tbody tr { border: 1px solid var(--borda); border-radius: var(--r-lg); overflow: hidden; background: var(--branco) !important; }
  .tabela tbody th { background: var(--vinho-suave); }
  .tabela td { padding: 10px 18px; }
  .tabela td::before { content: attr(data-rotulo); display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dourado-texto); }
}

/* ---------- Faz / não faz ---------- */
.lista-card { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 28px; height: 100%; }
.lista-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.lista-card h3 .ic { color: var(--whats); }
.lista-nao h3 .ic { color: var(--vermelho); }
.lista-check { display: grid; gap: 12px; }
.lista-check li { position: relative; padding-left: 22px; color: var(--texto-suave); line-height: 1.6; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--whats); }
.lista-nao .lista-check li::before { background: var(--vermelho); }

/* ---------- Destaque de preço ---------- */
.destaque-box { display: grid; gap: 24px; background: var(--vinho-suave); border-left: 4px solid var(--vinho); border-radius: var(--r-lg); padding: 32px 24px; }
.destaque-box-texto { display: grid; gap: 14px; }
.destaque-box-texto > p:last-child { color: var(--texto-suave); max-width: 70ch; }
.destaque-box-acoes { display: grid; gap: 12px; align-content: center; }
.destaque-box-nota { display: flex; gap: 8px; align-items: center; font-size: .875rem; color: var(--texto-suave); }
@media (min-width: 1024px) { .destaque-box { grid-template-columns: 8fr 4fr; padding: 48px; gap: 48px; } }

/* ---------- Bairros ---------- */
.bairros a {
  display: flex; align-items: center; gap: 12px; min-height: 64px; height: 100%; padding: 14px 18px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-md);
  font-weight: 600; color: var(--texto); text-decoration: none; transition: border-color var(--t-normal), box-shadow var(--t-normal);
}
.bairros span { display: inline-block; }
.bairros .ic { color: var(--vinho); }
.bairros a:hover { border-color: var(--vinho); box-shadow: var(--sombra-sm); color: var(--vinho); }

/* ---------- Avaliações ---------- */
.avaliacoes-google { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 24px 28px; }
.estrelas { display: inline-flex; gap: 4px; color: var(--dourado-texto); }
.avaliacoes-google p { font-family: var(--fonte-titulo); font-weight: 700; color: var(--vinho); font-size: 1.125rem; }
@media (min-width: 768px) { .avaliacoes-google .btn { margin-left: auto; } }

/* ---------- FAQ ---------- */
.faq-container > * { max-width: 800px; margin-inline: auto; }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--borda); border-radius: var(--r-md); background: var(--branco); transition: border-color var(--t-normal); }
.faq details[open] { border-color: var(--vinho); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 60px; padding: 14px 20px; cursor: pointer; list-style: none;
  font: 700 1.0625rem/1.4 var(--fonte-titulo); color: var(--vinho);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform var(--t-normal); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq-resp { padding: 0 20px 20px; color: var(--texto-suave); }

/* ---------- CTA final ---------- */
.cta-final { background: var(--vermelho); color: var(--branco); padding-block: 40px; }
.cta-grade { display: grid; gap: 28px; align-items: center; }
.cta-texto { display: grid; gap: 14px; }
.cta-final h2 { color: var(--branco); }
.cta-texto > p { font-size: var(--corpo-grande); line-height: 1.6; max-width: 60ch; }
.cta-mensagem { display: flex; gap: 10px; align-items: flex-start; background: rgba(66, 5, 17, .35); padding: 12px 16px; border-radius: var(--r-md); font-size: .9688rem !important; }
.cta-mensagem .ic { margin-top: 3px; color: var(--dourado); }
.cta-acoes { display: grid; gap: 12px; }
.cta-acoes .btn { width: 100%; }
.cta-tel { font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; user-select: all; }
.cta-final :focus-visible { outline-color: var(--foco-escuro); }
@media (min-width: 1024px) {
  .cta-final { padding-block: 64px; }
  .cta-grade { grid-template-columns: 7fr 5fr; gap: 48px; }
}

/* ---------- Rodapé ---------- */
.rodape { background: var(--vinho); color: rgba(255,255,255,.88); padding-block: 56px 24px; font-size: .9375rem; }
.rodape a { color: var(--branco); font-weight: 400; text-decoration: none; }
.rodape a:hover { text-decoration: underline; color: var(--branco); }
.rodape :focus-visible { outline-color: var(--foco-escuro); }
.rodape .ic { color: var(--dourado); }
.rodape-marca { display: flex; gap: 20px; align-items: center; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.16); }
.rodape-logo { flex: none; background: var(--branco); border-radius: var(--r-lg); padding: 8px; }
.rodape-logo img { height: 80px; width: auto; }
.rodape-marca p { max-width: 56ch; line-height: 1.6; }
.rodape-colunas { display: grid; gap: 32px; padding-block: 36px; }
.rodape-titulo { font: 700 .8125rem var(--fonte-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--dourado); margin-bottom: 12px; }
.rodape-col ul { display: grid; gap: 2px; }
.rodape-col li, .rodape-col a { display: flex; align-items: center; gap: 10px; min-height: 44px; line-height: 1.4; }
.rodape-col li .ic, .rodape-col a .ic { flex: none; }
.rodape address { font-style: normal; }
.rodape-nap { order: -1; }
.rodape-confianca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: 24px; border-top: 1px solid rgba(255,255,255,.16); }
.rodape-confianca li, .rodape-confianca a { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--branco); min-height: 44px; }
.rodape-final { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font-size: .875rem; }
.rodape-final ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.rodape-final li, .rodape-final a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape .link-botao { color: var(--branco); }
@media (min-width: 768px) { .rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .rodape-colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rodape-nap { order: 0; }
  .rodape-confianca { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rodape-final { grid-template-columns: auto 1fr; align-items: center; }
  .rodape-final ul { justify-content: flex-end; }
}

/* ---------- Barra fixa do celular ---------- */
.barra-celular {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
  background: var(--branco); border-top: 1px solid var(--borda); box-shadow: 0 -6px 20px rgba(9,8,8,.08);
  padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.barra-celular .btn { min-height: 52px; padding: 10px 12px; }
@media (min-width: 1024px) { .barra-celular { display: none; } }

/* ---------- Aviso de cookies ---------- */
.cookies {
  position: fixed; z-index: 45; left: 12px; right: 12px;
  bottom: calc(var(--altura-barra) + 12px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin-inline: auto; display: grid; gap: 14px;
  background: var(--branco); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: var(--r-lg); box-shadow: var(--sombra-lg);
  padding: 18px 20px; font-size: .875rem; line-height: 1.55;
}
.cookies[hidden] { display: none; }
.cookies-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1024px) { .cookies { bottom: 24px; left: 24px; right: auto; } }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Entre 1024 e 1279 px o telefone fica na topbar, para o menu caber em uma linha */
@media (min-width: 1024px) and (max-width: 1279px) { .menu-tel { display: none; } }

/* =========================================================
   Hub de categoria
   ========================================================= */
.breadcrumb { background: var(--fundo-alt); border-bottom: 1px solid var(--borda); font-size: .875rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; min-height: 44px; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--texto-suave); }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--borda-forte); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb [aria-current="page"] { color: var(--texto); font-weight: 600; }
.hero-hub { padding-top: 32px; }
@media (min-width: 1024px) { .hero-hub { padding-top: 48px; } }

.resposta-direta { background: var(--branco); }
.resposta-direta p {
  max-width: 900px; font-size: var(--corpo-grande); line-height: 1.7; color: var(--texto);
  padding: 28px 0 28px 24px; border-left: 4px solid var(--vinho);
}

.coluna-titulo[aria-current="page"] { color: var(--vinho); box-shadow: inset 0 -2px 0 var(--vinho); }

/* Tabela de 5 colunas */
.tabela-4 { min-width: 0; }
.tabela-4 tbody th a { color: var(--vinho); }
.tabela-4 td:nth-child(2) { color: var(--texto-suave); font-weight: 400; }
.tabela-4 td:nth-child(4) { color: var(--texto); font-weight: 600; white-space: normal; }
@media (min-width: 768px) and (max-width: 1023px) {
  .tabela-wrap { overflow-x: auto; }
  .tabela-4 { min-width: 860px; }
}

/* Etapas em seção branca */
.passos-claros .passo { border: 1px solid var(--borda); }

/* 3 itens de segurança: 1 coluna no texto (sem célula vazia) */
.dores-3 { grid-template-columns: minmax(0, 1fr) !important; }

/* Bairros sem página linkada */
.bairros-lista li {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-md); font-weight: 600;
}
.bairros-lista .ic { color: var(--vinho); }
.bairros-lista .bairros-acao { padding: 0; border-color: var(--whats); background: var(--whats); }
.bairros-lista .bairros-acao a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 12px 16px; color: var(--branco); text-decoration: none; font-size: .9375rem; }
.bairros-lista .bairros-acao .ic { color: var(--branco); }
.bairros-lista .bairros-acao:hover { background: var(--whats-hover); }

/* Information Gain do hub */
.check-alerta .check-num { background: var(--vinho-suave); color: var(--vermelho); }
.check-alerta .check-num .ic { width: 22px; height: 22px; }
.ig-lei { grid-template-columns: 56px 1fr; gap: 20px; align-items: start; background: var(--branco); border-left: 4px solid var(--vinho); border-radius: var(--r-lg); padding: 28px; }
.ig-lei-ic { width: 56px; height: 56px; display: grid; place-items: center; background: var(--vinho-suave); color: var(--vinho); border-radius: 12px; }
.ig-lei h3 { margin-bottom: 8px; }
.ig-lei p { color: var(--texto-suave); max-width: 75ch; }
@media (max-width: 599px) { .ig-lei { grid-template-columns: 1fr; } }

/* Links sobre fundo vermelho */
.link-claro { color: var(--branco); }
.link-claro:hover { color: var(--vinho-suave); }
.cta-alt { text-align: center; font-size: .9375rem; }
.cta-alt a { display: inline-flex; align-items: center; min-height: 44px; }

/* =========================================================
   Página de serviço
   ========================================================= */
@media (min-width: 1024px) {
  .hero-servico .hero-texto { grid-column: span 7; }
  .hero-servico .montar { grid-column: span 5; }
}
.hero-servico .provas { padding-top: 4px; }

/* Monte sua mensagem (abre o WhatsApp com o texto pronto; nada é enviado ao site) */
.montar {
  display: grid; gap: 14px; min-width: 0;
  background: var(--branco); border: 1px solid var(--borda); border-top: 4px solid var(--whats);
  border-radius: var(--r-xl); box-shadow: var(--sombra-lg); padding: 24px;
}
.montar-titulo { display: flex; align-items: center; gap: 10px; font: 700 1.25rem var(--fonte-titulo); color: var(--vinho); }
.montar-titulo .ic { color: var(--whats); }
.montar-sub, .montar-nota { font-size: .875rem; color: var(--texto-suave); line-height: 1.5; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: 1rem; color: var(--texto); }
.campo input {
  width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1rem var(--fonte-texto); color: var(--texto);
  background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--r-md);
  transition: border-color var(--t-normal);
}
.campo input::placeholder { color: var(--texto-suave); opacity: .8; }
.campo input:hover { border-color: var(--vinho); }
.campo input:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-color: var(--vinho); }
.montar .btn { width: 100%; }
.montar-escuro { border-top-color: var(--dourado); }
.montar-escuro :focus-visible { outline-color: var(--foco); }

/* Destaque dentro do bloco "O que é" */
.dor-destaque { display: flex; gap: 12px; align-items: flex-start; background: var(--vinho-suave); color: var(--texto); font-size: .9688rem; line-height: 1.6; }
.dor-destaque .ic { color: var(--vermelho); margin-top: 2px; }
@media (min-width: 768px) { .split-texto .dores .dor-destaque { grid-column: 1 / -1; } }

/* Prazo de cada etapa */
.passo-prazo { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--borda); display: flex; gap: 8px; align-items: flex-start; font-size: .875rem !important; font-weight: 600; color: var(--dourado-texto) !important; }
.passo-prazo .ic { margin-top: 2px; }
.passos-claros .passo { display: flex; flex-direction: column; gap: 10px; }
.passos-claros .passo-ic { margin-bottom: 2px; }

/* Tabela de preço */
.tabela-precos td:nth-child(2) { color: var(--texto); font-weight: 600; }
.tabela-precos td:nth-child(3) { color: var(--texto-suave); font-weight: 400; }

/* Provas abaixo dos diferenciais */
.selos-prova { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 20px 24px; background: var(--vinho); color: var(--branco); border-radius: var(--r-lg); font-weight: 600; }
.selos-prova li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.selos-prova .ic { color: var(--dourado); }
.selos-prova a { color: var(--dourado); }
.selos-prova a:hover { color: var(--branco); }
.selos-prova :focus-visible { outline-color: var(--foco-escuro); }

/* Caixa de artigos de apoio */
.secao-curta { padding-block: calc(var(--secao) * .6); }
.caixa-guias { display: grid; gap: 20px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-xl); padding: 28px 24px; }
.caixa-guias h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin-bottom: 6px; }
.caixa-guias > div > p { color: var(--texto-suave); }
.caixa-guias ul { display: grid; gap: 12px; }
.caixa-guias a { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 12px 16px; border-radius: var(--r-md); background: var(--fundo-alt); color: var(--texto); font-weight: 600; text-decoration: none; }
.caixa-guias a .ic { color: var(--vinho); }
.caixa-guias .guia-ancora { color: var(--vinho); text-decoration: underline; text-underline-offset: 3px; }
.caixa-guias a:hover { background: var(--vinho-suave); }
@media (min-width: 1024px) { .caixa-guias { grid-template-columns: 5fr 7fr; align-items: center; padding: 36px 40px; } .caixa-guias ul { grid-template-columns: 1fr 1fr; } }

.cta-alt-esq { font-size: .9375rem !important; }
.cta-alt-esq a { display: inline-flex; align-items: center; min-height: 44px; }

/* =========================================================
   Página Sobre (entity home)
   ========================================================= */
.definicao { font-size: var(--corpo-grande); line-height: 1.6; max-width: 60ch; }
.ficha { display: grid; grid-template-columns: 1fr; gap: 0; margin: 4px 0 0; width: 100%; border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--branco); overflow: hidden; }
.ficha > div { display: grid; grid-template-columns: minmax(0, 11em) 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--borda); }
.ficha > div:first-child { border-top: 0; }
.ficha dt { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dourado-texto); align-self: center; }
.ficha dd { margin: 0; font-weight: 600; color: var(--texto); min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .ficha { grid-template-columns: 1fr 1fr; } .ficha > div:nth-child(2) { border-top: 0; } .ficha > div:nth-child(even) { border-left: 1px solid var(--borda); } .ficha > div { grid-template-columns: 1fr; gap: 2px; } }

.descricao-oficial { max-width: 860px; display: grid; gap: 18px; font-size: var(--corpo-grande); line-height: 1.75; }
.descricao-oficial > p:not(.texto-link) { color: var(--texto); }
.descricao-oficial .texto-link { margin-top: 0; font-size: var(--corpo); }

.linha-tempo { position: relative; }
.marco { position: relative; display: grid; gap: 10px; align-content: start; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 28px 24px; height: 100%; }
.marco-ano { font: 700 2.25rem/1 var(--fonte-titulo); color: var(--vinho); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.marco h3 { font-size: 1.1875rem; }
.marco p { color: var(--texto-suave); font-size: .9688rem; line-height: 1.6; }
@media (min-width: 1024px) {
  .linha-tempo::before { content: ""; position: absolute; left: 24px; right: 24px; top: 46px; height: 2px; background: var(--borda); z-index: 0; }
  .marco { z-index: 1; }
}

.mvv .valores { display: grid; gap: 8px; }
.mvv .valores li { color: var(--texto-suave); font-size: .9688rem; line-height: 1.5; }
.mvv .valores strong { color: var(--vinho); }

.veiculos li { display: flex; gap: 16px; align-items: flex-start; height: 100%; padding: 22px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); }
.veiculos .ic { color: var(--vinho); flex: none; }
.veiculos h3 { font-size: 1.125rem; margin-bottom: 4px; }
.veiculos p { color: var(--texto-suave); font-size: .9375rem; line-height: 1.55; }

.lista-nao-sobre { margin-top: 6px; }
.lista-nao-sobre li::before { background: var(--vermelho); }

.numeros { background: var(--vinho); color: var(--branco); padding-block: var(--secao); }
.numeros h2 { color: var(--branco); margin-bottom: 32px; }
.numeros-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.numeros-grade li { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.2); }
.numeros-grade strong { font: 700 clamp(2.25rem, 4.5vw, 3.5rem)/1 var(--fonte-titulo); color: var(--dourado); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.numeros-grade span { color: rgba(255,255,255,.88); font-size: .9688rem; line-height: 1.5; }
.numeros-nota { margin-top: 24px; font-size: .875rem; color: rgba(255,255,255,.75); }
@media (min-width: 1024px) { .numeros-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.nap-card { display: grid; gap: 14px; align-content: start; height: 100%; padding: 26px; background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: var(--r-lg); }
.nap-card h3 { display: flex; gap: 10px; align-items: center; font-size: 1.1875rem; }
.nap-card h3 .ic { color: var(--vinho); }
.nap-card address { font-style: normal; }
.nap-card ul { display: grid; gap: 8px; }
.nap-card li { color: var(--texto-suave); line-height: 1.5; }
.nap-card li strong { color: var(--texto); }
.nap-card a { display: inline-flex; align-items: center; min-height: 44px; }
.destaque-box-acoes .destaque-box-nota { display: block; line-height: 1.6; }
.destaque-box-acoes .destaque-box-nota .ic { vertical-align: -3px; margin-right: 6px; }
.checklist h3 { font-size: 1.125rem; margin-bottom: 6px; }

/* =========================================================
   Página de contato (Pedir guincho)
   ========================================================= */
.numero-grande { display: grid; gap: 2px; }
.numero-grande .tel-texto { font: 700 clamp(2rem, 4vw, 2.75rem)/1.1 var(--fonte-titulo); color: var(--vinho); letter-spacing: -0.02em; }
.numero-grande > span:last-child { font-size: .875rem; color: var(--texto-suave); }
.campo select {
  width: 100%; min-height: 52px; padding: 12px 40px 12px 14px; font: 400 1rem var(--fonte-texto); color: var(--texto);
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23590719' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  border: 1px solid var(--borda-forte); border-radius: var(--r-md); appearance: none; -webkit-appearance: none;
}
.campo select:hover { border-color: var(--vinho); }
.campo select:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-color: var(--vinho); }

.canal { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 24px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); }
.canal h3 { font-size: 1.1875rem; }
.canal-dado { font: 700 1.0625rem/1.4 var(--fonte-titulo); color: var(--texto); font-variant-numeric: tabular-nums; }
.canal > p:not(.canal-dado) { color: var(--texto-suave); font-size: .9375rem; line-height: 1.55; }
.canal-acao { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-top: 12px; border-top: 1px solid var(--borda); font-size: .9375rem; }

.horario h2, .mensagem-card h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin-bottom: 14px; }
.horario h2 .ic, .mensagem-card h2 .ic { color: var(--vinho); width: 28px; height: 28px; }
.horario-destaque { font: 700 1.125rem/1.5 var(--fonte-titulo); color: var(--vinho); margin-bottom: 16px; }
.mensagem-card > p { color: var(--texto-suave); margin-bottom: 16px; }
.mensagem-card .mensagem { padding: 0; }
.mensagem-card .mensagem-acoes .btn { flex: 1 1 auto; }

.mapa { display: grid; gap: 14px; min-width: 0; }
.mapa-capa, .mapa-frame { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); border: 1px solid var(--borda); }
.mapa-frame { border: 0; background: var(--fundo-alt); }
.mapa-capa {
  position: relative; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; overflow: hidden;
  background-color: var(--branco);
  background-image:
    linear-gradient(var(--vinho-suave) 1px, transparent 1px),
    linear-gradient(90deg, var(--vinho-suave) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(171, 58, 77, .16) 0 22%, transparent 23%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
}
.mapa-pino { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 999px; background: var(--vinho); color: var(--branco); box-shadow: var(--sombra-md); }
.mapa-rotulo { font: 700 1.25rem var(--fonte-titulo); color: var(--vinho); }
.mapa-sub { font-size: .9375rem; color: var(--texto-suave); }
.mapa-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.mapa-acoes .btn { flex: 1 1 200px; }
.mapa-nota { font-size: .8125rem; color: var(--texto-suave); }
@media (min-width: 1024px) {
  .hero-contato .hero-texto { grid-column: span 6; }
  .hero-contato .montar { grid-column: span 6; }
  .mapa { grid-column: span 5; }
}

/* =========================================================
   Blog: hub e categoria
   ========================================================= */
.blog-topo { padding-block: 40px 48px; background: linear-gradient(180deg, var(--fundo-alt) 0%, var(--branco) 100%); }
.blog-topo-grade { display: grid; gap: 20px; align-items: end; }
.blog-topo-grade h1 { margin-top: 14px; max-width: 18ch; }
.blog-topo-texto { display: grid; gap: 12px; }
.blog-topo-texto > p:last-child { color: var(--texto-suave); }
@media (min-width: 1024px) { .blog-topo { padding-block: 56px 64px; } .blog-topo-grade { grid-template-columns: 7fr 5fr; gap: 48px; } }

.titulo-pequeno { font-size: .8125rem; font-family: var(--fonte-texto); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado-texto); margin-bottom: 16px; }
.destaque-artigo { position: relative; display: grid; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-xl); overflow: hidden; transition: box-shadow var(--t-normal); }
.destaque-artigo-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: 100%; background: var(--vinho-suave); }
.destaque-artigo-corpo { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; }
.destaque-artigo h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.2; }
.destaque-artigo-corpo > p:not(.categoria):not(.card-data):not(.card-acao) { color: var(--texto-suave); font-size: var(--corpo-grande); line-height: 1.6; }
@media (min-width: 1024px) { .destaque-artigo { grid-template-columns: 7fr 5fr; } .destaque-artigo-corpo { padding: 40px; justify-content: center; } }
@media (hover: hover) and (pointer: fine) { .destaque-artigo:hover { box-shadow: var(--sombra-md); } }

.card-data { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8125rem !important; color: var(--texto-suave) !important; }
.card-data .ic { color: var(--vinho); }

.paginacao { margin-top: 40px; }
.paginacao ul { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.paginacao a { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 14px; border: 1px solid var(--borda); border-radius: var(--r-md); background: var(--branco); color: var(--vinho); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.paginacao a:hover { border-color: var(--vinho); }
.paginacao a[aria-current="page"] { background: var(--vinho); border-color: var(--vinho); color: var(--branco); }
.paginacao-prox a { display: inline-flex; gap: 8px; }
@media (max-width: 599px) { .paginacao-prox { flex-basis: 100%; display: flex; justify-content: center; } }

.cat-grade { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.cat-card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: var(--r-lg); transition: box-shadow var(--t-normal), transform var(--t-normal); }
.cat-card h3 { font-size: 1.1875rem; }
.cat-card > p:not(.cat-n) { color: var(--texto-suave); font-size: .9375rem; line-height: 1.55; }
.cat-n { font-size: .8125rem; font-weight: 700; color: var(--dourado-texto); }
.cat-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-top: 10px; border-top: 1px solid var(--borda); font-size: .9375rem; text-decoration: none; }
.cat-link::first-letter { text-transform: uppercase; }
.cat-card:has(.cat-link:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .cat-card:hover { box-shadow: var(--sombra-md); transform: translateY(-3px); } }
@media (min-width: 640px) and (max-width: 1023px) { .cat-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cat-card { grid-column: span 2; } .cat-card:nth-child(4) { grid-column: 2 / span 2; } }
@media (min-width: 1024px) { .cat-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.grade-blog-4 .card h3 { font-size: 1.125rem; }
@media (min-width: 1024px) { .grade-blog-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card-img-acao { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--vinho); color: var(--dourado); }
.card-img-acao .ic { width: 56px; height: 56px; }
.card-acao-grade { border-color: var(--vinho); }
.card-acao-grade .card-acao a { color: var(--whats); }
.cap { display: inline-block; }
.cap::first-letter { text-transform: uppercase; }
.grade-blog-4 .card-corpo > p:not(.card-data):not(.card-acao):not(.categoria) { font-size: .9375rem; }
.card-data span { white-space: nowrap; }

/* =========================================================
   Artigo do blog
   ========================================================= */
.artigo-topo { padding-block: 32px 28px; background: linear-gradient(180deg, var(--fundo-alt) 0%, var(--branco) 100%); }
.artigo-topo-in { display: grid; gap: 14px; max-width: 1080px; }
.artigo-topo h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); max-width: 22ch; }
.autor-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 8px; }
.autor-linha img { width: 48px; height: auto; border-radius: 999px; background: var(--branco); border: 1px solid var(--borda); padding: 4px; }
.autor-nome { font-weight: 600; }
.autor-cargo { font-size: .875rem; color: var(--texto-suave); }
.autor-datas { display: flex; flex-wrap: wrap; gap: 6px 16px; width: 100%; font-size: .875rem; color: var(--texto-suave); }
.autor-datas li { display: inline-flex; align-items: center; gap: 6px; }
.autor-datas .ic { color: var(--vinho); }
@media (min-width: 768px) { .autor-datas { width: auto; margin-left: auto; } }

.artigo-grade { display: grid; gap: 24px; padding-block: 8px var(--secao); }
.artigo-corpo { min-width: 0; max-width: 760px; display: grid; gap: 28px; font-size: 1.0625rem; }
.artigo-corpo section { display: grid; gap: 14px; scroll-margin-top: 120px; }
.artigo-corpo section > p, .artigo-corpo li p { color: var(--texto); line-height: 1.75; max-width: 70ch; }
.artigo-corpo h2 { font-size: clamp(1.625rem, 2.8vw, 2.125rem); margin-top: 12px; scroll-margin-top: 120px; }
.artigo-corpo h3 { font-size: clamp(1.1875rem, 1.8vw, 1.375rem); margin-top: 6px; }
.artigo-corpo h4 { font-size: 1.0625rem; color: var(--texto); }
.artigo-resposta { font-size: var(--corpo-grande); line-height: 1.65; padding: 20px 22px; background: var(--vinho-suave); border-left: 4px solid var(--vinho); border-radius: var(--r-md); }
.artigo-cta-topo, .lista-cta-topo { margin-top: 16px; }
.artigo-foto { margin: 0; }
.artigo-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--vinho-suave); }

.resumo { padding: 22px 24px; border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--branco); }
.resumo-titulo { display: flex; align-items: center; gap: 10px; font: 700 1.125rem var(--fonte-titulo); color: var(--vinho); margin-bottom: 12px; }
.resumo ul { display: grid; gap: 10px; }
.resumo li { position: relative; padding-left: 26px; line-height: 1.6; }
.resumo li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--whats); }

.sumario details { border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--fundo-alt); }
.sumario summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 18px; cursor: pointer; list-style: none; font: 700 1rem var(--fonte-titulo); color: var(--vinho); }
.sumario summary::-webkit-details-marker { display: none; }
.sumario details[open] summary .ic { transform: rotate(180deg); }
.sumario ol { padding: 0 18px 16px 38px; list-style: decimal; display: grid; gap: 2px; }
.sumario li { color: var(--texto-suave); }
.sumario a { display: inline-flex; min-height: 40px; align-items: center; font-weight: 600; font-size: .9375rem; text-decoration: none; }
.sumario a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .artigo-grade { grid-template-columns: minmax(0, 760px) 280px; justify-content: space-between; gap: 64px; }
  .sumario { order: 2; position: sticky; top: 120px; align-self: start; }
}

.passos-artigo { counter-reset: passo; display: grid; gap: 14px; }
.passos-artigo > li { counter-increment: passo; position: relative; display: grid; gap: 6px; padding: 18px 20px 18px 68px; border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--branco); }
.passos-artigo > li::before { content: counter(passo); position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: var(--vinho); color: var(--dourado); font: 700 1rem var(--fonte-titulo); }
.passos-artigo h3 { margin: 0; font-size: 1.125rem; }
.passos-artigo p { font-size: 1rem; }

.artigo-corpo .tabela { font-size: .9375rem; }
.nao-fazer { margin-top: 4px; }
.nao-fazer h3 { margin: 0 0 6px; }
.lista-artigo { margin-block: 4px; }
.lista-artigo li { color: var(--texto); }
.nota-futura { font-size: .9375rem; color: var(--texto-suave) !important; font-style: italic; }

.cta-contextual { display: grid; gap: 16px; padding: 24px; border-radius: var(--r-xl); background: var(--vinho); color: var(--branco); }
.cta-sobre, .cta-bairro, .cta-servico, .cta-lista { margin-top: var(--gap); }
.cta-contextual-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.1); color: var(--dourado); }
.cta-contextual-titulo { font: 700 1.25rem/1.3 var(--fonte-titulo); color: var(--branco); margin-bottom: 6px; }
.cta-contextual p { color: rgba(255,255,255,.9); }
.cta-contextual a:not(.btn) { color: var(--dourado); }
.cta-contextual a:not(.btn):hover { color: var(--branco); }
.cta-contextual :focus-visible { outline-color: var(--foco-escuro); }
@media (min-width: 768px) { .cta-contextual { grid-template-columns: 56px 1fr; align-items: start; } .cta-contextual .btn { grid-column: 2; justify-self: start; } }

.faq-artigo .faq { margin-top: 4px; }
.autor-box { display: grid; gap: 16px; padding: 24px; border-radius: var(--r-lg); background: var(--fundo-alt); border: 1px solid var(--borda); }
.autor-box img { width: 72px; height: auto; border-radius: var(--r-md); background: var(--branco); padding: 6px; border: 1px solid var(--borda); }
.autor-box-nome { font: 700 1.125rem var(--fonte-titulo); color: var(--vinho); }
.autor-box-cargo { font-size: .875rem; color: var(--dourado-texto); font-weight: 600; margin-bottom: 8px; }
.autor-box p:not(.autor-box-nome):not(.autor-box-cargo) { color: var(--texto-suave); font-size: .9688rem; line-height: 1.6; }
.autor-box p + p { margin-top: 8px; }
@media (min-width: 640px) { .autor-box { grid-template-columns: 72px 1fr; } }

/* =========================================================
   Páginas legais, obrigado e 404
   ========================================================= */
.legal-datas { width: auto; margin-left: 0 !important; }
.ficha-legal { margin-block: 4px; }
.legal .artigo-corpo section > ul { margin-top: -2px; }
.beneficio-link { display: flex; flex-direction: column; }
.beneficio-link .canal-acao { margin-top: auto; }
.obrigado-topo, .erro-topo { text-align: center; padding-block: 56px var(--secao); }
.obrigado-in { display: grid; justify-items: center; gap: 18px; max-width: 760px; }
.obrigado-in .hero-lead { max-width: 60ch; }
.obrigado-ic { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 999px; background: var(--whats); color: var(--branco); }
.obrigado-ic .ic { width: 40px; height: 40px; }
.obrigado-prazo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--vinho-suave); color: var(--vinho); font-weight: 600; font-size: .9375rem; }
.botoes-centro { justify-content: center; }
.erro-codigo { font: 700 clamp(4.5rem, 12vw, 8rem)/1 var(--fonte-titulo); color: var(--vinho-suave); -webkit-text-stroke: 2px var(--vinho); letter-spacing: -0.04em; }
.erro-volta { text-align: center; }