/* ==========================================================
   IMPLANTES VOTORANTIM — Dr. Jean Victor
   implantesvotorantim.com.br
   Paleta derivada do jaleco: marinho + bordado dourado
   ========================================================== */

:root{
  --marinho:#16274A;
  --marinho-esc:#0E1B33;
  --dourado:#C9A227;
  --dourado-esc:#A2811C;
  --papel:#FBFAF7;
  --papel-2:#F3F1EC;
  --tinta:#20242C;
  --tinta-2:#5A6272;
  --linha:#E2DFD8;
  --verde-wa:#1FA855;
  --larg:1080px;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.72;color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{list-style:none}
button{font-family:inherit;border:none;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}

/* Tipografia */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.24;color:var(--marinho)}
h1{font-size:clamp(1.95rem,4.2vw,2.9rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3vw,2.05rem);margin-bottom:1rem}
h3{font-size:clamp(1.12rem,2vw,1.32rem);margin-bottom:.5rem}
h4{font-family:var(--sans);font-size:1rem;font-weight:650;color:var(--marinho);margin-bottom:.35rem}
p{margin-bottom:1.15rem}
p:last-child{margin-bottom:0}
.lead{font-size:1.13rem;color:var(--tinta-2)}

.wrap{max-width:var(--larg);margin:0 auto;padding:0 1.5rem}
.estreito{max-width:720px}
section{padding:4.5rem 0}
.fundo-claro{background:var(--papel-2)}
.divisor{border-top:1px solid var(--linha)}

/* Rótulo de seção */
.rotulo{display:block;font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado-esc);margin-bottom:.7rem}

/* Botões */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.6rem;border-radius:3px;font-weight:600;font-size:.97rem;line-height:1.2;transition:background .18s,color .18s,border-color .18s;text-decoration:none}
.bt-principal{background:var(--dourado);color:var(--marinho-esc)}
.bt-principal:hover{background:var(--dourado-esc);color:#fff}
.bt-claro{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.bt-claro:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.bt-escuro{background:transparent;color:var(--marinho);border:1px solid var(--marinho)}
.bt-escuro:hover{background:var(--marinho);color:#fff}
.acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:100;background:var(--marinho);border-bottom:1px solid rgba(255,255,255,.09)}
.topo-int{max-width:var(--larg);margin:0 auto;padding:.8rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{color:#fff;text-decoration:none;line-height:1.25}
.marca b{font-family:var(--serif);font-weight:600;font-size:1.06rem;display:block;letter-spacing:.01em}
.marca span{font-size:.7rem;color:var(--dourado);letter-spacing:.09em;text-transform:uppercase}
.menu{display:flex;align-items:center;gap:1.35rem}
.menu a{color:rgba(255,255,255,.72);font-size:.88rem;text-decoration:none;white-space:nowrap;transition:color .16s}
.menu a:hover,.menu a[aria-current="page"]{color:#fff}
.menu a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--dourado)}
.menu .zap{background:var(--dourado);color:var(--marinho-esc);font-weight:650;padding:.45rem 1rem;border-radius:3px}
.menu .zap:hover{background:#fff;color:var(--marinho-esc)}
.abrir-menu{display:none;flex-direction:column;gap:5px;padding:.45rem}
.abrir-menu span{width:22px;height:2px;background:#fff;display:block}

/* Trilha */
.trilha{font-size:.8rem;color:var(--tinta-2);padding:1.1rem 0 0}
.trilha ol{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.trilha a{color:var(--tinta-2);text-decoration:none}
.trilha a:hover{color:var(--marinho);text-decoration:underline}
.trilha [aria-current]{color:var(--marinho)}
.trilha-clara,.trilha-clara a{color:rgba(255,255,255,.55)}
.trilha-clara [aria-current]{color:var(--dourado)}

/* Abertura */
.abertura{background:var(--marinho);color:#fff;padding:3rem 0 4rem}
.abertura h1{color:#fff;max-width:17ch}
.abertura h1 em{font-style:italic;color:var(--dourado)}
.abertura .lead{color:rgba(255,255,255,.75);max-width:56ch;margin-top:1.2rem}
.abertura-duplo{display:grid;grid-template-columns:1.35fr .65fr;gap:3.5rem;align-items:center}
.selo{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14)}
.selo li{font-size:.85rem;color:rgba(255,255,255,.62)}
.selo li b{color:#fff;font-weight:600}

/* Retrato */
.retrato{border-radius:3px;overflow:hidden;background:var(--marinho-esc)}
.retrato img{width:100%;aspect-ratio:3/4;object-fit:cover}
.retrato figcaption{padding:.85rem 1rem;background:var(--marinho-esc);font-size:.82rem;color:rgba(255,255,255,.65);border-top:2px solid var(--dourado)}
.retrato figcaption b{display:block;color:#fff;font-family:var(--serif);font-size:1rem;font-weight:600;margin-bottom:.1rem}

/* Texto corrido */
.texto h2{margin-top:2.8rem}
.texto h2:first-child{margin-top:0}
.texto h3{margin-top:1.9rem}
.texto ul{margin:0 0 1.15rem;padding-left:0}
.texto ul li{position:relative;padding-left:1.35rem;margin-bottom:.55rem;color:var(--tinta-2)}
.texto ul li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--dourado-esc)}
.texto a{color:var(--marinho);text-decoration:underline;text-decoration-color:var(--dourado);text-underline-offset:3px}
.texto a:hover{color:var(--dourado-esc)}
.texto strong{font-weight:650;color:var(--tinta)}

/* Nota lateral */
.nota{border-left:2px solid var(--dourado);padding:.2rem 0 .2rem 1.35rem;margin:2rem 0;color:var(--tinta-2);font-size:.98rem}
.nota b{color:var(--marinho)}

/* Etapas */
.etapas{counter-reset:e;margin-top:1.5rem}
.etapas li{counter-increment:e;display:grid;grid-template-columns:2.2rem 1fr;gap:1.1rem;padding:1.4rem 0;border-bottom:1px solid var(--linha)}
.etapas li:last-child{border-bottom:none}
.etapas li::before{content:counter(e);font-family:var(--serif);font-size:1.15rem;color:var(--dourado-esc);line-height:1.5}
.etapas p{font-size:.96rem;color:var(--tinta-2);margin:0}

/* Tabela */
.tabela{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--linha)}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:460px;background:#fff}
th{background:var(--papel-2);text-align:left;padding:.85rem 1.1rem;font-size:.79rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--marinho);border-bottom:1px solid var(--linha)}
td{padding:.85rem 1.1rem;border-bottom:1px solid var(--linha);color:var(--tinta-2);vertical-align:top}
td:first-child{color:var(--tinta);font-weight:500}
tr:last-child td{border-bottom:none}

/* Perguntas */
.perguntas{border-top:1px solid var(--linha);margin-top:1.5rem}
.pergunta{border-bottom:1px solid var(--linha)}
.pergunta summary{list-style:none}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary button{display:flex;width:100%;gap:1.2rem;justify-content:space-between;align-items:flex-start;padding:1.25rem 0;text-align:left;font-size:1.02rem;font-weight:600;color:var(--marinho);font-family:var(--serif)}
.pergunta summary button:hover{color:var(--dourado-esc)}
.pergunta i{flex-shrink:0;width:15px;height:15px;position:relative;margin-top:.42rem}
.pergunta i::before,.pergunta i::after{content:'';position:absolute;background:var(--dourado-esc);transition:transform .25s}
.pergunta i::before{top:7px;left:0;width:15px;height:1.5px}
.pergunta i::after{left:7px;top:0;width:1.5px;height:15px}
.pergunta[open] i::after{transform:rotate(90deg)}
.resposta{overflow:hidden;max-height:0;transition:max-height .3s ease}
.pergunta[open] .resposta{max-height:900px}
.resposta div{padding:0 0 1.4rem;color:var(--tinta-2);font-size:.97rem;max-width:72ch}
.resposta a{color:var(--marinho);text-decoration:underline;text-decoration-color:var(--dourado)}

/* Grade de tratamentos */
.tratamentos{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:0;border-top:1px solid var(--linha);border-left:1px solid var(--linha);margin-top:2rem}
.tratamento{border-right:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:1.8rem 1.7rem;text-decoration:none;display:block;background:#fff;transition:background .18s}
.tratamento:hover{background:var(--papel-2)}
.tratamento h3{font-size:1.15rem;margin-bottom:.5rem}
.tratamento p{font-size:.93rem;color:var(--tinta-2);margin-bottom:.9rem}
.tratamento span{font-size:.85rem;font-weight:650;color:var(--dourado-esc)}
.tratamento .qual{display:block;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:.55rem;font-weight:600}

/* Perfil */
.perfil{display:grid;grid-template-columns:290px 1fr;gap:3rem;align-items:start}
.perfil-dados{list-style:none;margin-top:1.5rem;border-top:1px solid var(--linha)}
.perfil-dados li{padding:.75rem 0;border-bottom:1px solid var(--linha);display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;font-size:.94rem;color:var(--tinta-2)}
.perfil-dados b{color:var(--marinho);font-weight:600}

/* Bloco de contato */
.contato{background:var(--marinho);color:#fff;padding:4.5rem 0}
.contato h2{color:#fff}
.contato p{color:rgba(255,255,255,.72);max-width:56ch}
.contato-dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.6rem;margin-top:2.6rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.14)}
.contato-dados div{font-size:.93rem;color:rgba(255,255,255,.68)}
.contato-dados b{display:block;font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dourado);margin-bottom:.4rem;font-weight:700}
.contato-dados a{color:#fff;text-decoration:none}
.contato-dados a:hover{text-decoration:underline}

/* Depoimentos — estrutura vazia até haver conteúdo real */
.depoimentos{display:none}
.depoimentos[data-preenchido="sim"]{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}
.depoimento{border:1px solid var(--linha);padding:1.6rem;background:#fff}
.depoimento blockquote{font-size:.97rem;color:var(--tinta-2);margin-bottom:1rem}
.depoimento cite{font-style:normal;font-size:.87rem;font-weight:600;color:var(--marinho)}

/* Rodapé */
.rodape{background:var(--marinho-esc);color:rgba(255,255,255,.55);padding:3.5rem 0 1.6rem;font-size:.89rem}
.rodape-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.8rem;padding-bottom:2.6rem}
.rodape h5{font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:1rem;font-weight:700;font-family:var(--sans)}
.rodape a{color:rgba(255,255,255,.55);text-decoration:none;display:block;margin-bottom:.55rem}
.rodape a:hover{color:var(--dourado)}
.rodape-marca b{font-family:var(--serif);font-size:1.06rem;color:#fff;display:block;margin-bottom:.15rem;font-weight:600}
.rodape-marca span{font-size:.75rem;color:var(--dourado);letter-spacing:.09em;text-transform:uppercase}
.rodape-marca p{margin-top:1rem;line-height:1.75;color:rgba(255,255,255,.45)}
.rodape-base{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.81rem;color:rgba(255,255,255,.35)}
.rodape-base a{display:inline;margin:0}

/* WhatsApp fixo */
.zap-fixo{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;width:54px;height:54px;border-radius:50%;background:var(--verde-wa);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 14px rgba(0,0,0,.22);transition:transform .18s}
.zap-fixo:hover{transform:scale(1.06)}
.zap-fixo svg{width:28px;height:28px;fill:#fff}

/* Barra fixa mobile */
.barra-mobile{display:none}

/* A preencher */
.preencher{background:#FFF8E1;border:1px dashed var(--dourado);padding:.1rem .45rem;font-size:.92em;color:#7A5D00;border-radius:2px}

/* Responsivo */
@media (max-width:880px){
  .abertura-duplo{grid-template-columns:1fr;gap:2.4rem}
  .retrato{max-width:330px}
  .perfil{grid-template-columns:1fr;gap:2rem}
  .perfil .retrato{max-width:300px}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .rodape-marca{grid-column:1/-1}
  .abrir-menu{display:flex}
  .menu a:not(.zap){display:none}
  .menu.aberto{position:absolute;left:0;right:0;top:100%;background:var(--marinho-esc);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 0;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 12px 24px rgba(0,0,0,.25)}
  .menu.aberto a:not(.zap){display:block;padding:.85rem 1.5rem;font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.06)}
  .menu.aberto a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--dourado)}
  .menu.aberto .zap{margin:.7rem 1.5rem .3rem;text-align:center}
  .topo-int{position:relative}
}
@media (max-width:620px){
  body{font-size:16px}
  section{padding:3.2rem 0}
  .abertura{padding:2.2rem 0 3rem}
  .acoes{flex-direction:column;align-items:stretch}
  .bt{width:100%}
  .perfil-dados li{grid-template-columns:1fr;gap:.15rem}
  .rodape-grade{grid-template-columns:1fr;gap:2rem}
  .zap-fixo{display:none}
  .barra-mobile{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:95;border-top:1px solid rgba(255,255,255,.12)}
  .barra-mobile a{padding:.95rem;text-align:center;font-size:.92rem;font-weight:650;text-decoration:none}
  .barra-mobile .b1{background:var(--verde-wa);color:#fff}
  .barra-mobile .b2{background:var(--marinho);color:#fff}
  body{padding-bottom:3.4rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}
@media print{.topo,.zap-fixo,.barra-mobile,.contato{display:none}}