/* Primordialle · LP lentes de contato dental
   Linguagem visual: qoves.com (claro, molduras finas, título grande em peso leve com
   segunda metade em cinza, etiquetas em fonte mono) + cores da marca (oliva da logo e dourado). */

:root {
  --fundo: #FFFFFF;
  --fundo-2: #F7F6F2;
  --fundo-3: #EEECE6;
  --linha: #EFEDE8;      /* bem clarinha, como o #F2F2F2 da Qoves: a grade se sente, não pesa */
  --linha-2: #E3E0D8;    /* só para campos de formulário */
  --tinta: #24221D;      /* oliva quase preto, puxado da logo */
  --tinta-2: #5D5950;
  --tom: #A6A194;        /* cinza quente da segunda metade dos títulos */
  --ouro: #BDA351;       /* dourado do site oficial */
  --ouro-txt: #8A7330;   /* dourado escurecido para texto em fundo claro */
  --branco: #FFFFFF;
  --raio: 10px;
  --raio-g: 12px;
  /* grade da Qoves: moldura quase encostada na borda, células com 16px até a foto */
  --gut: clamp(12px, 2.8vw, 48px);    /* da borda da tela até a linha vertical */
  --pad: clamp(20px, 3.4vw, 48px);    /* respiro do texto dentro da célula */
  --secy: clamp(56px, 7vw, 96px);     /* respiro vertical da seção */
  --faixa: clamp(40px, 8.5vw, 122px); /* faixa vazia entre seções */
  --inset: 16px;                      /* da linha até a foto */
  --fonte: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font: 400 16px/1.55 var(--fonte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.03em; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 99; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 8px; }

/* ── grade da Qoves ──
   1. a moldura: duas linhas verticais quase na borda da tela;
   2. entre as seções, uma faixa vazia cujas linhas atravessam a tela de ponta a ponta
      (cruzam as verticais — é o que dá a cara de papel quadriculado);
   3. dentro da seção, células: cabeçalho com linha embaixo, texto | imagem com linha no meio. */
html { overflow-x: clip; }
.moldura {
  margin-inline: max(var(--gut), calc((100% - 1680px) / 2));
  border-inline: 1px solid var(--linha);
}
.secao { padding: var(--secy) var(--pad); }
.espaco { position: relative; height: var(--faixa); }
.espaco::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw;
  border-block: 1px solid var(--linha); pointer-events: none;
}
/* cabeçalho vira célula: linha embaixo indo de uma vertical à outra */
.secao > .cabeca, .cabeca-2 {
  margin-inline: calc(-1 * var(--pad));
  padding: 0 var(--pad) clamp(36px, 4.5vw, 56px);
  border-bottom: 1px solid var(--linha);
}
.cabeca-2 { border-top: 1px solid var(--linha); padding-top: clamp(48px, 6vw, 80px); }
/* seção dividida: texto | imagem, com a linha vertical no meio */
.secao.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; align-items: stretch; }
.split > * { padding: var(--secy) var(--pad); align-self: center; min-width: 0; }
.split > .midia { align-self: stretch; padding: var(--inset); border-left: 1px solid var(--linha); display: flex; flex-direction: column; justify-content: center; }

/* ── tipografia ── */
h1 { font-size: clamp(36px, 5.1vw, 78px); line-height: 1.0; letter-spacing: -0.045em; }
h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.04em; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; }
.tom { color: var(--tom); }
.lead { font-size: clamp(16px, 1.3vw, 18px); color: var(--tinta-2); max-width: 560px; }
.cabeca { margin-bottom: clamp(40px, 5vw, 64px); }
.cabeca h2 { margin: 18px 0 18px; max-width: 900px; }
.cabeca.centro { text-align: center; }
.cabeca.centro h2, .cabeca.centro .lead { margin-inline: auto; }
.centro { text-align: center; }

.selo {
  display: inline-block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  border: 1px solid var(--linha);
  background: var(--branco);
  padding: 7px 11px;
  border-radius: 6px;
}

/* ── botões em pílula ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 26px;
  border-radius: 999px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.btn-escuro { background: var(--tinta); color: var(--branco); box-shadow: 0 6px 18px -8px rgba(36,34,29,.55); }
.btn-escuro:hover { background: #000; }
.btn-claro { background: var(--fundo-3); color: var(--tinta); }
.btn-claro:hover { background: #DEDBD2; }
.btn-p { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-cheio { width: 100%; }

/* ── navegação flutuante ── */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 28px), 1120px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 10px 10px 22px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(228,225,217,.9);
  border-radius: 999px;
  box-shadow: 0 10px 40px -18px rgba(36,34,29,.25);
}
.nav-marca img { height: 50px; width: auto; margin: -8px 0; }
.nav-links { display: flex; gap: clamp(14px, 2vw, 28px); font-size: 14px; color: var(--tinta-2); }
.nav-links a { padding: 11px 2px; }
.nav-links a:hover { color: var(--tinta); }

/* ═════ HERO ═════ */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas: "txt img" "pil img";
  min-height: 100svh;
}
.hero-txt { grid-area: txt; align-self: center; padding: 150px var(--pad) 56px; }
.hero-pre { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--tinta-2); margin-bottom: 26px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 4px rgba(189,163,81,.18); }
.hero h1 { margin-bottom: 26px; }
.hero-lead { font-size: clamp(16px, 1.35vw, 19px); color: var(--tinta-2); max-width: 520px; margin-bottom: 34px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-img { grid-area: img; border-left: 1px solid var(--linha); padding: 92px var(--inset) var(--inset); display: flex; flex-direction: column; justify-content: flex-end; }
.hero-img .ph, .hero-img img { border-radius: var(--raio-g); }
.hero-img img { width: 100%; max-height: calc(100svh - 108px); object-fit: cover; object-position: center 30%; }
.hero-pilares {
  grid-area: pil; align-self: end;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linha);
}
.hero-pilares li { padding: 22px clamp(16px, 2vw, 28px) 26px; font-size: 14px; }
.hero-pilares li:first-child { padding-left: var(--pad); }
.hero-pilares li + li { border-left: 1px solid var(--linha); }
.hero-pilares b { display: block; font-weight: 500; margin-bottom: 4px; }
.hero-pilares span { color: var(--tom); }

/* ═════ IMPACTO ═════ */
.impacto h2 { margin-bottom: 22px; }
.impacto .lead { margin-bottom: 36px; }
.lista-num li {
  display: flex; gap: 22px; padding: 13px 0;
  font-size: 16px; color: var(--tinta);
}
.lista-num li span { font: 400 12px/1.9 var(--mono); color: var(--tom); min-width: 26px; }
.lista-num li b { font-weight: 500; }

/* ── antes / depois arrastável ── */
.ba { position: relative; overflow: hidden; border-radius: var(--raio-g); background: var(--fundo-2); --pos: 50%; touch-action: pan-y; }
.ba-camada { position: absolute; inset: 0; }
.ba-camada > .ph, .ba-camada > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.ba-antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: rgba(255,255,255,.95); pointer-events: none; }
.ba-linha i {
  position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%; border: 1.5px solid #fff; background: rgba(255,255,255,.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ba-linha i::before, .ba-linha i::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -4px;
  border: 4px solid transparent;
}
.ba-linha i::before { left: 7px; border-right-color: #fff; }
.ba-linha i::after { right: 7px; border-left-color: #fff; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-rot {
  position: absolute; top: 16px; z-index: 2; pointer-events: none;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.8); color: var(--tinta); padding: 6px 9px; border-radius: 6px;
}
.ba-rot-e { left: 16px; }
.ba-rot-d { right: 16px; }

/* ═════ MÉTODO: jeito comum × Primordialle ═════ */
.trilhas { display: grid; gap: 14px; }
.trilha {
  display: grid; grid-template-columns: 260px 1fr; align-items: center;
  border: 1px solid var(--linha); border-radius: var(--raio-g);
  background: var(--branco); padding: 26px 28px;
}
.trilha-nome { display: flex; align-items: center; gap: 14px; }
.trilha-nome h3 { font-size: 21px; font-weight: 400; letter-spacing: -0.02em; }
.trilha ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.trilha li { font-size: 15px; line-height: 1.35; position: relative; padding-top: 30px; }
.trilha li small { position: absolute; top: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tom); }
.trilha li::before { content: ""; position: absolute; top: -3px; right: 0; left: 64px; height: 1px; background: var(--linha); top: 5px; }
.trilha-velha { background: var(--fundo-2); }
.trilha-velha li { color: var(--tom); }
.trilha-nova { border-color: rgba(189,163,81,.45); box-shadow: 0 18px 50px -30px rgba(138,115,48,.45); }
.trilha-nova li::before { background: rgba(189,163,81,.4); }
.ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ico-x { background: var(--fundo-3); }
.ico-x::before { content: "✕"; font-size: 12px; color: var(--tom); }
.ico-ok { background: var(--ouro); }
.ico-ok::before { content: "✓"; font-size: 14px; color: #fff; font-weight: 600; }

.citacao { margin: clamp(56px, 7vw, 90px) auto 0; max-width: 760px; text-align: center; }
.citacao p { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -0.025em; }
.citacao footer { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; font-size: 14px; color: var(--tinta-2); }
.citacao footer b { color: var(--tinta); font-weight: 500; }

/* ═════ ANÁLISE (sorriso largo no centro, cartões de dados em cima e embaixo) ═════ */
.analise { background: linear-gradient(180deg, var(--fundo) 0%, #ECEBE6 100%); }
.hud {
  display: grid; max-width: 1080px; margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "a b c" "rosto rosto rosto" "d e f";
  gap: 0 20px;
}
/* os cartões invadem um pouco a borda da foto, como os da Qoves flutuam sobre o rosto */
.hud-card { position: relative; z-index: 2; }
.hud-a, .hud-b, .hud-c { align-self: end; margin-bottom: -44px; }
.hud-d, .hud-e, .hud-f { align-self: start; margin-top: -44px; }
.hud-b { transform: translateY(-18px); }
.hud-e { transform: translateY(18px); }
.hud-rosto { grid-area: rosto; position: relative; width: 100%; margin: 0; }
.hud-rosto img { border-radius: var(--raio-g); }
.hud-guias { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hud-guias line, .hud-guias path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.hud-guias path { stroke: var(--ouro); stroke-width: 1.6; stroke-dasharray: none; }
.guia-rot {
  position: absolute; font: 500 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  background: rgba(255,255,255,.88); color: var(--tinta); padding: 5px 7px; border-radius: 5px; white-space: nowrap;
}
.guia-media { left: 50.5%; top: 50%; transform: translate(8px, -50%); }
.guia-arco { left: 13%; top: 52%; }
.hud-card {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(228,225,217,.95);
  border-radius: var(--raio); padding: 16px 16px 14px;
  box-shadow: 0 14px 40px -24px rgba(36,34,29,.4);
}
.hud-a { grid-area: a; } .hud-b { grid-area: b; } .hud-c { grid-area: c; }
.hud-d { grid-area: d; } .hud-e { grid-area: e; } .hud-f { grid-area: f; }
.hud-t { font: 500 10.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 12px; }
.hud-v { font-size: 13px; color: var(--tinta-2); margin-top: 10px; }
.hud-v b { color: var(--tinta); font-weight: 500; font-size: 15px; }
.medidor { position: relative; height: 6px; border-radius: 3px; background: var(--fundo-3); }
.medidor em { position: absolute; top: 0; height: 100%; background: rgba(189,163,81,.35); border-radius: 3px; }
.medidor i { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--tinta); }
.hud-escala { display: flex; justify-content: space-between; font: 400 10px/1 var(--mono); color: var(--tom); margin-top: 8px; }
.hud-svg { width: 100%; height: 60px; }
.tr-lab { fill: none; stroke: var(--tom); stroke-width: 1.5; stroke-dasharray: 3 4; }
.tr-ouro { fill: none; stroke: var(--ouro); stroke-width: 2; }
.pt-ouro { fill: var(--ouro); }
.cores { display: flex; gap: 6px; }
.cores span {
  flex: 1; height: 44px; border-radius: 8px; background: var(--c); border: 1px solid var(--linha);
  font: 500 9.5px/1 var(--mono); color: var(--tinta-2); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
}
.cores span.on { outline: 2px solid var(--ouro); outline-offset: 2px; }
.grade {
  height: 62px; border-radius: 6px;
  background:
    radial-gradient(circle at 50% 50%, rgba(189,163,81,.55) 0 18%, transparent 45%),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(166,161,148,.35) 9px 10px),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(166,161,148,.35) 9px 10px),
    var(--fundo-2);
}
.regua {
  position: relative; height: 28px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--tom) 0 1px, transparent 1px 10%) bottom/100% 10px no-repeat, var(--fundo-2);
}
.regua i { position: absolute; left: 0; top: 6px; width: 50%; height: 6px; border-radius: 3px; background: var(--ouro); }
.nota-ilustrativa { text-align: center; font: 400 12px/1.5 var(--mono); color: var(--tom); margin-top: 28px; }

/* ═════ LEVAMOS EM CONTA ═════ */
.conta h2 { margin: 18px 0 34px; }
.conta-lista li { border-top: 1px solid var(--linha); padding: 18px 0; }
.conta-lista li:last-child { border-bottom: 1px solid var(--linha); }
.conta-lista h3 { margin-bottom: 4px; }
.conta-lista p { color: var(--tinta-2); font-size: 15px; }

/* ═════ VOCÊ VAI ENTENDER ═════ */
.entender { padding-bottom: 0; }
.entender .cabeca { margin-bottom: 0; }
.colunas3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-inline: calc(-1 * var(--pad)); }
.colunas3 > div { padding: 36px var(--pad) var(--secy); }
.colunas3 > div + div { border-left: 1px solid var(--linha); }
.colunas3 h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 16px; }
.lista-traco li { position: relative; padding: 9px 0 9px 22px; color: var(--tinta-2); font-size: 15px; border-bottom: 1px dashed var(--linha); }
.lista-traco li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 1px; background: var(--ouro); }

/* ═════ ETAPAS ═════ */
.etapas h2 { margin: 18px 0 18px; }
.etapas .lead { margin-bottom: 30px; }
.etapas-lista li {
  position: relative; display: flex; gap: 20px; cursor: pointer;
  padding: 20px 0; border-top: 1px solid var(--linha); outline: none;
}
.etapas-lista li:last-child { border-bottom: 1px solid var(--linha); }
.etapas-lista li > span { font: 400 12px/1.8 var(--mono); color: var(--tom); min-width: 26px; }
.etapas-lista h3 { color: var(--tom); transition: color .3s; }
.etapas-lista p { color: var(--tinta-2); font-size: 15px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .4s ease, margin .4s; }
.etapas-lista li[aria-selected="true"] h3 { color: var(--tinta); }
.etapas-lista li[aria-selected="true"] p { max-height: 120px; opacity: 1; margin-top: 6px; }
.etapas-lista li:focus-visible h3 { text-decoration: underline; }
.barra { position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--tinta); }
.etapas-lista li[aria-selected="true"] .barra { animation: encher var(--tempo, 6s) linear forwards; }
.etapas.parado .etapas-lista li[aria-selected="true"] .barra { animation: none; width: 100%; }
@keyframes encher { to { width: 100%; } }
.split > .etapas-img { display: grid; align-content: center; }
.etapa-quadro { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; }
.etapa-quadro.on { opacity: 1; }
.etapa-quadro .ph { border-radius: var(--raio-g); }

/* ═════ RESULTADOS ═════ */
.casos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 48px; margin-inline: calc(var(--inset) - var(--pad)); }
.caso h3, .caso p { padding-inline: 4px; }
.caso h3 { margin-top: 16px; }
.caso p { font-size: 14px; color: var(--tinta-2); margin-top: 2px; }
.caso em { color: var(--ouro-txt); font-style: normal; }

/* ═════ TIME ═════ */
.time-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pessoa {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: 10px 10px 18px;
}
.pessoa .ph { border-radius: 14px; }
.pessoa h3 { font-size: 16px; margin: 14px 6px 4px; }
.pessoa p { font-size: 13px; color: var(--tinta-2); margin: 0 6px; line-height: 1.45; }

/* ═════ LABORATÓRIO ═════ */
.lab { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-areas: "grande grande" "txt menor"; padding: 0; }
.lab-img-grande { grid-area: grande; padding: var(--inset); border-bottom: 1px solid var(--linha); }
.lab-img-grande .ph, .lab-img-grande img { border-radius: var(--raio-g); }
.lab-txt { grid-area: txt; align-self: center; padding: var(--secy) var(--pad); }
.lab-txt h2 { margin: 18px 0 20px; }
.lab-txt .lead { margin-bottom: 26px; }
.lab-img-menor { grid-area: menor; padding: var(--inset); border-left: 1px solid var(--linha); }
.lab-img-menor .ph { border-radius: var(--raio-g); }

/* ═════ PACIENTES DE FORA ═════ */
.fora { background: var(--fundo-2); }
.fora h2 { margin: 18px 0 18px; }
.fora .lead { margin-bottom: 26px; }
.fora-lista li { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--linha); }
.fora-lista li > span {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linha); background: var(--branco);
  display: grid; place-items: center; font: 500 12px/1 var(--mono); color: var(--tinta-2);
}
.fora-lista p { font-size: 15px; color: var(--tinta-2); }
.fora-lista b { color: var(--tinta); font-weight: 500; }
.bandeiras { margin-top: 22px; font-size: 22px; letter-spacing: 4px; }
.fora-img .ph { border-radius: var(--raio-g); }

/* ═════ DEPOIMENTOS ═════ */
.depo-trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  scrollbar-width: thin;
}
.depo-trilho li { scroll-snap-align: start; }
.depo {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  border: 0; border-radius: var(--raio-g); overflow: hidden; cursor: pointer; background: var(--tinta);
}
.depo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.depo:hover img { transform: scale(1.04); }
.play {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
}
.play::before { content: ""; position: absolute; left: 22px; top: 18px; border: 10px solid transparent; border-left: 15px solid var(--tinta); border-right: 0; }
.depo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═════ GUIA (tabela) ═════ */
.tabela-rolar { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--branco); }
.tabela { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; }
.tabela th, .tabela td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }
.tabela thead th { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.tabela tbody th { font: 500 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); width: 190px; }
.tabela td { color: var(--tinta-2); }
.tabela .destaque { background: #FBF8EE; color: var(--tinta); }
.tabela thead .destaque { color: var(--ouro-txt); }

/* ═════ DÚVIDAS ═════ */
.cabeca-2 { margin-top: clamp(72px, 9vw, 120px); }
.grande-pergunta { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 80px); }
.pontos li { border-top: 1px solid var(--linha); padding: 18px 0 18px; }
.pontos li:last-child { border-bottom: 1px solid var(--linha); }
.pontos b { font-weight: 500; display: block; margin-bottom: 4px; }
.pontos p { color: var(--tinta-2); font-size: 15px; }
.titulo-faq { font-size: clamp(26px, 2.6vw, 34px); margin: clamp(72px, 9vw, 120px) 0 22px; }
.faq { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 17px; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 24px; font-weight: 300; color: var(--tom); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--tinta-2); padding: 0 0 24px; max-width: 760px; }

/* ═════ AGENDAR ═════ */
.agendar h2 { margin: 18px 0 18px; }
.agendar .lead { margin-bottom: 30px; }
.form { display: grid; gap: 14px; max-width: 480px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.form input, .form select {
  width: 100%; min-width: 0;
  height: 50px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--linha-2);
  background: var(--branco); font-size: 16px; color: var(--tinta); font-weight: 400;
  transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form select:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgba(189,163,81,.18); }
.form input.erro { border-color: #C0563F; }
.form .btn { margin-top: 8px; height: 54px; }
.form-nota { font-size: 12px; color: var(--tom); text-align: center; }
.agendar-lado { display: grid; gap: 22px; align-content: start; }
.agendar-lado .ph { border-radius: var(--raio-g); }
.endereco { font-style: normal; font-size: 15px; color: var(--tinta-2); line-height: 1.7; }
.endereco b { display: block; color: var(--tinta); font-weight: 500; }
.endereco span { display: block; color: var(--tom); }
.endereco a { color: var(--ouro-txt); font-weight: 500; }

/* ═════ RODAPÉ ═════ */
.rodape { padding: 56px var(--pad) 40px; font-size: 14px; color: var(--tinta-2); }
.rodape-topo { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--linha); }
.rodape-logo { width: 180px; }
.rodape-t { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); margin-bottom: 12px; }
.rodape a:hover { color: var(--tinta); }
.rodape-aviso { padding-top: 24px; font-size: 12px; color: var(--tom); display: grid; gap: 6px; }
.rodape-aviso b { color: var(--tinta-2); font-weight: 500; }

/* ── botão fixo (só celular) ── */
.wa-fixo {
  position: fixed; z-index: 40; right: 16px; bottom: 16px; display: none;
  align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--tinta); color: #fff; font-weight: 500; font-size: 15px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.45);
}
.wa-fixo svg { width: 22px; height: 22px; fill: #fff; }

/* ═════ ESPAÇOS DE FOTO (placeholders) ═════ */
.ph {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; aspect-ratio: var(--ar, 4 / 5);
  padding: clamp(16px, 2vw, 24px);
  border-radius: var(--raio);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(166,161,148,.13) 14px 15px),
    linear-gradient(160deg, #EFEDE7, #E2DFD6);
  border: 1px dashed #C9C4B7;
  color: var(--tinta-2); overflow: hidden;
}
.ph::before {
  content: attr(data-ph); position: absolute; top: 14px; left: 14px;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; color: #fff; background: var(--tinta);
  padding: 6px 8px; border-radius: 6px;
}
.ph[data-prio="essencial"]::after {
  content: "ESSENCIAL"; position: absolute; top: 14px; right: 14px;
  font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--ouro-txt);
  border: 1px solid rgba(189,163,81,.6); background: rgba(255,255,255,.7); padding: 5px 7px; border-radius: 6px;
}
.ph b { font-weight: 500; color: var(--tinta); font-size: 15px; letter-spacing: -0.01em; }
.ph p { font-size: 13px; line-height: 1.45; margin-top: 6px; max-width: 420px; }
.ph small { font: 400 11px/1.4 var(--mono); color: var(--tom); margin-top: 10px; }
.ph-escuro { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.05) 14px 15px), linear-gradient(160deg, #57524A, #3D3A33); border-color: #6D675C; color: #D9D4C8; }
.ph-escuro b { color: #fff; }
.ph-escuro small { color: #ABA597; }
.ph-escuro::before { background: var(--ouro); color: var(--tinta); }
.ph-mini { width: 40px; height: 40px; aspect-ratio: 1; padding: 0; border-radius: 50%; justify-content: center; align-items: center; }
.ph-mini::before { display: none; }
.ph-mini b { font: 500 9px/1 var(--mono); }
img.ph-foto { width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; border-radius: var(--raio-g); }
img.ph-foto.ph-mini { border-radius: 50%; }
.r-4x5 { --ar: 4 / 5; }
.r-5x6 { --ar: 5 / 6; }
.r-1x1 { --ar: 1 / 1; }
.r-4x3 { --ar: 4 / 3; }
.r-16x10 { --ar: 16 / 10; }
.r-2x1 { --ar: 2 / 1; }
.ba.r-4x5, .ba.r-1x1 { aspect-ratio: var(--ar); }

/* ═════ entrada suave ═════ */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .etapas-lista li .barra { animation: none !important; }
}

/* ═════ responsivo ═════ */
@media (max-width: 1080px) {
  .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "rosto rosto" "a b" "c d" "e f"; gap: 12px; }
  .hud-rosto { margin-bottom: 8px; }
  .hud-card, .hud-a, .hud-b, .hud-c, .hud-d, .hud-e, .hud-f { margin: 0; transform: none; align-self: stretch; }
  .time-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trilha { grid-template-columns: 1fr; gap: 22px; }
  .casos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav { padding-left: 16px; }
  .nav-marca img { height: 42px; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "txt" "img" "pil"; min-height: 0; }
  .hero-txt { padding: 116px var(--pad) 40px; }
  .hero-img { border-left: 0; border-top: 1px solid var(--linha); padding: var(--inset); }
  .hero-pilares { grid-template-columns: 1fr; }
  .hero-pilares li, .hero-pilares li + li { padding: 16px var(--pad); border-left: 0; border-top: 1px solid var(--linha); }
  .hero-pilares li:first-child { border-top: 0; }
  .secao.split, .grande-pergunta { grid-template-columns: 1fr; }
  .split > .midia { border-left: 0; border-top: 1px solid var(--linha); }
  .split > .etapas-img { order: -1; border-top: 0; border-bottom: 1px solid var(--linha); }
  .lab { grid-template-columns: 1fr; grid-template-areas: "grande" "txt" "menor"; }
  .lab-img-menor { border-left: 0; border-top: 1px solid var(--linha); }
  .trilha ol { grid-template-columns: 1fr; gap: 14px; }
  .trilha li { padding-top: 0; padding-left: 74px; }
  .trilha li small { top: 3px; left: 0; }
  .trilha li::before { display: none; }
  .colunas3 { grid-template-columns: 1fr; }
  .colunas3 > div, .colunas3 > div + div { padding: 28px var(--pad) 28px; border-left: 0; }
  .colunas3 > div + div { border-top: 1px solid var(--linha); }
  .casos { grid-template-columns: 1fr; }
  .rodape-topo { grid-template-columns: 1fr 1fr; }
  .wa-fixo { display: inline-flex; }
}
@media (max-width: 560px) {
  .hud { gap: 8px; }
  .hud-card { padding: 12px 11px 10px; }
  .hud-t { font-size: 9.5px; margin-bottom: 9px; }
  .hud-v { font-size: 12px; margin-top: 8px; }
  .hud-v b { font-size: 14px; }
  .hud-svg { height: 44px; }
  .cores { gap: 3px; }
  .cores span { height: 34px; font-size: 8.5px; border-radius: 6px; }
  .hud-escala span:nth-child(2) { display: none; }
  .time-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pessoa-destaque { grid-column: 1 / -1; }
  .hero-acoes .btn { flex: 1 1 100%; }
  .rodape-topo { grid-template-columns: 1fr; }
}

/* espaços de foto dentro do comparador: antes à esquerda, depois à direita, sem sobrepor */
.ba .ph { justify-content: center; }
.ba .ph > * { max-width: 44%; }
.ba-depois .ph { align-items: flex-end; text-align: right; }
.ba-depois .ph::before { left: auto; right: 14px; }
.ba .ph::after { display: none; }
.ba-rot { top: auto; bottom: 16px; }

/* cartões encostam a 16px das linhas verticais, como os da Qoves */
.trilhas, .time-grade, .tabela-rolar, .depo-trilho { margin-inline: calc(var(--inset) - var(--pad)); }

/* ═════ ajustes finos de responsividade ═════ */
/* tablet deitado / notebook pequeno: menu mais enxuto */
@media (max-width: 1080px) and (min-width: 861px) {
  .nav-links a:first-child { display: none; }
}
/* celular: rótulo do arco some (fica só a linha média), cartões e textos respiram */
@media (max-width: 560px) {
  .guia-arco { display: none; }
  .guia-rot { font-size: 9px; padding: 4px 6px; }
  h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .hero-pre { font-size: 13px; }
  .trilha { padding: 22px 18px; }
  .trilha li { padding-left: 64px; }
}
/* celular muito estreito (320px) */
@media (max-width: 360px) {
  .nav-marca img { height: 36px; }
  .nav .btn-p { padding: 0 14px; font-size: 13px; }
  .time-grade { grid-template-columns: 1fr; }
}