/* ==========================================================================
   B.blanc — sistema de design
   Paleta e linguagem visual herdadas de bblanc.com.br/links/ (referência RCA)
   Blocos: 01 base · 02 tipografia · 03 cabeçalho · 04 botões · 05 hero
           06 seções · 07 cards · 08 tratamentos · 09 equipe · 10 blog
           11 FAQ · 12 rodapé · 13 flutuantes · 14 responsivo
   ========================================================================== */

/* ============================ 01 · BASE ================================== */
/* Ícones: sprite SVG embutido em lib/icones.svg — sem CDN externo */
.ico-svg{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.125em;flex:none}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/assets/fonts/montserrat.woff2') format('woff2');font-weight:300 600;font-display:swap}
@font-face{font-family:'Great Vibes';src:url('/assets/fonts/great-vibes.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --verde-principal:#5D6653;
  --verde-escuro:#46503D;
  --verde-profundo:#3F4937;
  --dourado:#D3B892;
  --dourado-claro:#E8D5B5;
  --dourado-escuro:#B8965F;
  --marfim:#FAF8F3;
  --bege-claro:#F3EEE5;
  --branco:#FFFFFF;
  --texto-principal:#4B4B43;
  --texto-secundario:#77756D;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',Arial,sans-serif;
  --script:'Great Vibes',cursive;
  --borda-suave:rgba(255,255,255,.7);
  --sombra-card:0 12px 28px rgba(90,72,40,.10), inset 0 1px 0 rgba(255,255,255,.8);
  --sombra-alta:0 26px 55px rgba(63,73,55,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--texto-principal);
  line-height:1.65;font-size:16px;overflow-x:hidden;position:relative;
  /* atmosfera dourada quente — assinatura visual da marca */
  background:
    radial-gradient(ellipse 60% 45% at 12% 6%, rgba(226,196,140,.30), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 20%, rgba(216,186,130,.22), transparent 62%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(210,180,124,.20), transparent 60%),
    linear-gradient(165deg,#FAF8F3 0%,color-mix(in srgb, var(--marfim) 70%, var(--bege-claro)) 45%,#F3EEE5 100%);
  background-attachment:fixed;min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,calc(100% - 40px));margin:0 auto;position:relative;z-index:1}
.estreito{width:min(820px,100%);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pular{position:absolute;left:-999px;top:0;width:1px;height:1px;overflow:hidden}
.pular:focus{
  left:12px;top:12px;width:auto;height:auto;overflow:visible;
  background:#fff;padding:12px 18px;border-radius:10px;z-index:99;
  box-shadow:0 8px 24px rgba(90,72,40,.2)
}

/* ========================= 02 · TIPOGRAFIA =============================== */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0 0 .5em;color:var(--verde-profundo)}
h1{font-size:clamp(2.3rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
p{margin:0 0 1.1em}
.script{font-family:var(--script);color:var(--dourado-escuro);font-weight:400}
.lead{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.45;color:var(--verde-escuro)}
.olho{font-size:.72rem;letter-spacing:3px;font-weight:600;text-transform:uppercase;color:var(--dourado-escuro);margin:0 0 .9em}
.secundario{color:var(--texto-secundario)}

/* título de seção com linhas douradas que somem nas pontas */
.titulo-sec{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 34px;text-align:center}
.titulo-sec span{font-weight:600;letter-spacing:3.2px;color:var(--dourado-escuro);font-size:clamp(.8rem,1.6vw,.95rem);text-transform:uppercase;white-space:nowrap}
.titulo-sec .linha{height:1px;flex:1;max-width:90px;background:linear-gradient(90deg,transparent,rgba(184,150,95,.75))}
.titulo-sec .linha.dir{background:linear-gradient(90deg,rgba(184,150,95,.75),transparent)}

/* ========================== 03 · CABEÇALHO =============================== */
.topo{position:sticky;top:0;z-index:40;background:rgba(250,248,243,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(184,150,95,.16);transition:box-shadow .25s}
.topo.rolou{box-shadow:0 8px 30px rgba(90,72,40,.10)}
.topo-in{display:flex;align-items:center;gap:26px;min-height:82px}
.marca img{width:132px;height:auto}
.menu{display:flex;gap:26px;margin-left:auto;align-items:center}
.menu a{font-size:.87rem;font-weight:500;color:var(--texto-principal);position:relative;padding:6px 0;transition:color .2s}
.menu a:hover{color:var(--dourado-escuro)}
.menu a:hover::after,.menu a[aria-current]::after{right:0}
.menu a[aria-current]{color:var(--dourado-escuro)}
.abrir-menu{display:none;margin-left:auto;background:transparent;border:1px solid rgba(184,150,95,.4);border-radius:999px;padding:9px 14px;cursor:pointer;color:var(--verde-escuro);font-size:1rem}
.link-texto{color:var(--dourado-escuro);font-weight:600;font-size:.88rem;border-bottom:1px solid rgba(184,150,95,.4);padding-bottom:2px;transition:border-color .2s}
.link-texto:hover{border-color:var(--dourado-escuro)}

/* ============================ 05 · HERO ================================== */
.hero{position:relative;padding:0 0 20px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;min-height:min(620px,78vh)}
.hero-texto{padding:56px 0}
.hero h1{margin-bottom:.35em}
.hero h1 .script{display:block;font-size:1.18em;line-height:1;margin-top:.06em}
.hero .lead{max-width:520px;margin-bottom:1.6em}
.hero-acoes{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-selos{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid rgba(184,150,95,.22);font-size:.76rem;letter-spacing:1.4px;color:var(--texto-secundario);text-transform:uppercase;font-weight:500}
.hero-selos span{display:inline-flex;align-items:center;gap:8px}
.hero-selos .ico-svg{color:var(--dourado-escuro);font-size:.95rem}

/* foto do hero com máscara orgânica em gota (assinatura da marca) */
.hero-foto{position:relative}
.hero-foto img{
  width:100%;height:100%;object-fit:cover;min-height:460px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 700' preserveAspectRatio='none'%3E%3Cpath d='M140 0 H600 V700 H0 V140 Q0 0 140 0 Z'/%3E%3C/svg%3E") no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 700' preserveAspectRatio='none'%3E%3Cpath d='M140 0 H600 V700 H0 V140 Q0 0 140 0 Z'/%3E%3C/svg%3E") no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  filter:drop-shadow(0 22px 48px rgba(80,66,40,.18));
}
/* cartão do CRO flutuando sobre a foto */
.hero-cro{
  position:absolute;left:-18px;bottom:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.82));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--borda-suave);border-radius:20px;padding:16px 22px;
  box-shadow:0 22px 46px rgba(90,72,40,.18);max-width:250px;
}
.hero-cro strong{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--verde-profundo);line-height:1.2}
.hero-cro span{display:block;font-size:.68rem;letter-spacing:1.6px;color:var(--dourado-escuro);font-weight:600;margin-top:5px;text-transform:uppercase}

/* cabeçalho de página interna */
.capa{padding:64px 0 18px;text-align:center}
.capa .lead{margin-left:auto;margin-right:auto;max-width:660px}
.migalhas{font-size:.74rem;color:var(--texto-secundario);margin-bottom:1.4em;letter-spacing:.6px}
.migalhas a:hover{color:var(--dourado-escuro)}
.migalhas span{margin:0 7px;opacity:.5}
.faixa-verde{
  position:relative;overflow:hidden;border-radius:34px;padding:52px 56px;margin:64px 0;color:#fff;
  background:radial-gradient(circle at 82% 16%, rgba(211,184,146,.16), transparent 42%),
             linear-gradient(135deg,color-mix(in srgb, var(--verde-principal) 70%, var(--verde-escuro)) 0%,#5D6653 55%,#46503D 100%);
  box-shadow:var(--sombra-alta);
}
/* malha técnica sutil, evocando precisão e tecnologia */
.faixa-verde--tec::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(211,184,146,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211,184,146,.10) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 78% 30%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 70% 90% at 78% 30%, #000 0%, transparent 72%);
}
.faixa-verde--tec > *{position:relative;z-index:1}
.faixa-verde h2,.faixa-verde h3{color:#fff}
.faixa-verde .olho{color:var(--dourado-claro)}
.faixa-verde p{color:rgba(255,255,255,.88)}
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duas-colunas.texto-maior{grid-template-columns:1.15fr .85fr}

/* ============================ 07 · CARDS ================================= */
.grade{display:grid;gap:22px}
.grade.g2{grid-template-columns:repeat(2,1fr)}
.grade.g3{grid-template-columns:repeat(3,1fr)}
.grade.g4{grid-template-columns:repeat(4,1fr)}
.cartao{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.58));
  border:1px solid var(--borda-suave);border-radius:22px;padding:28px 26px;
  box-shadow:var(--sombra-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
a.cartao:hover,.cartao.clicavel:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(90,72,40,.15);border-color:rgba(211,184,146,.65)}
.cartao h3{margin-bottom:.4em}
.cartao p{
  font-size:.92rem;color:var(--texto-secundario);margin-bottom:0;
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:5 3 2;
  overflow-wrap:break-word
}
/* .ico é uma classe própria, usada dentro e fora de .cartao.
   Antes dependia do ancestral .cartao, então em outros contextos
   o círculo virava quadrado sem centralização. */
.ico{
  width:52px;height:52px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(135deg,rgba(232,213,181,.6),rgba(211,184,146,.35));
  color:var(--dourado-escuro);font-size:1.15rem;
  border:1px solid rgba(211,184,146,.4);
}
.cartao .ico{margin-bottom:16px}
/* ícone dentro da faixa verde */
.faixa-verde .ico{background:rgba(255,255,255,.08);border-color:rgba(211,184,146,.45);color:var(--dourado)}
.faixa-verde .cartao{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);backdrop-filter:none}
.faixa-verde .cartao p{color:rgba(255,255,255,.8)}

/* ========================= 08 · TRATAMENTOS ============================== */
.lista-trat{display:grid;gap:0}
.lista-trat article{
  display:grid;grid-template-columns:64px 1fr auto;gap:26px;align-items:center;
  padding:26px 0;border-top:1px solid rgba(184,150,95,.2);transition:padding-left .25s
}
.lista-trat article:last-child{border-bottom:1px solid rgba(184,150,95,.2)}
.lista-trat article:hover{padding-left:8px}
.lista-trat .num{font-family:var(--serif);font-size:1.5rem;color:var(--dourado-escuro);opacity:.75}
.lista-trat h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:0 0 .25em}
.lista-trat h2 a:hover{color:var(--dourado-escuro)}
.lista-trat p{margin:0;font-size:.92rem;color:var(--texto-secundario);max-width:70ch}
.lista-trat .seta{color:var(--dourado-escuro);font-size:.9rem;transition:transform .22s}
.lista-trat article:hover .seta{transform:translateX(4px)}

.beneficios{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.beneficios li{position:relative;padding-left:32px;font-size:.95rem}
.beneficios li::before{
  content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;
  background:currentColor;color:var(--dourado-escuro);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faixa-verde .beneficios li::before{color:var(--dourado)}

/* Etapas: linha do tempo com marcador, sem numeração.
   O número em círculo de 40px encostava no seguinte quando a etapa
   ocupava uma linha só; a linha contínua resolve e lê melhor. */
.passos{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:0;position:relative
}
.passos li{
  position:relative;padding:0 0 26px 34px;font-size:.95rem;line-height:1.6
}
.passos li:last-child{padding-bottom:0}
/* linha vertical ligando os marcadores */
.passos li::before{
  content:"";position:absolute;left:7px;top:16px;bottom:-2px;width:1px;
  background:linear-gradient(180deg, rgba(184,150,95,.5), rgba(184,150,95,.18))
}
.passos li:last-child::before{display:none}
/* marcador redondo */
.passos li::after{
  content:"";position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--dourado-escuro);background:var(--marfim);
  box-shadow:0 0 0 4px rgba(184,150,95,.12)
}
/* dentro da faixa verde */
.faixa-verde .passos li::before{
  background:linear-gradient(180deg, rgba(211,184,146,.55), rgba(211,184,146,.15))
}
.faixa-verde .passos li::after{
  border-color:var(--dourado);background:var(--verde-escuro);
  box-shadow:0 0 0 4px rgba(211,184,146,.14)
}

/* ============================ 09 · EQUIPE ================================ */
.grade-equipe{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.pessoa{text-align:center}
.pessoa img{aspect-ratio:1;object-fit:cover;border-radius:50%;margin:0 auto 16px;width:100%;max-width:190px;box-shadow:0 16px 32px rgba(90,72,40,.14);transition:transform .25s}
.pessoa:hover img{transform:translateY(-4px)}
.pessoa h3{font-size:1.02rem;margin:0 0 .25em;line-height:1.3}
.pessoa p{font-size:.82rem;color:var(--texto-secundario);margin:0 0 .3em}
.pessoa small{font-size:.7rem;letter-spacing:1.4px;color:var(--dourado-escuro);font-weight:600}

/* ============================= 10 · BLOG ================================= */
.blog-capa{padding-bottom:6px}

/* grade de equipamentos na faixa verde */
.grade-equipamentos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.grade-equipamentos figure{margin:0}
.grade-equipamentos img{aspect-ratio:4/3;object-fit:cover;border-radius:16px;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.grade-equipamentos figcaption{
  margin-top:10px;font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--dourado-claro);font-weight:600;text-align:center
}
.foto-cheia{width:100%;height:100%;object-fit:cover;min-height:340px}

/* artigo em destaque */
.post-destaque{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.6));
  border:1px solid var(--borda-suave);border-radius:26px;overflow:hidden;
  box-shadow:var(--sombra-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.post-selo{
  position:absolute;top:18px;left:18px;background:var(--dourado-escuro);color:#fff;
  font-size:.68rem;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;
  padding:7px 14px;border-radius:999px;box-shadow:0 8px 20px rgba(120,90,40,.3)
}

/* cartões de artigo */
.grade-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.56));
  border:1px solid var(--borda-suave);box-shadow:var(--sombra-card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .24s,box-shadow .24s,border-color .24s
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 22px 42px rgba(90,72,40,.16);border-color:rgba(211,184,146,.6)}
.post-card__foto{display:block;overflow:hidden}
.post-card__foto img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s}
.post-card:hover .post-card__foto img{transform:scale(1.05)}
.post-card__texto{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.post-card time{font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--dourado-escuro);font-weight:600}
.post-card h3{font-size:1.14rem;margin:.55em 0 .45em;line-height:1.3}
.post-card h3 a:hover{color:var(--dourado-escuro)}
.post-card p{font-size:.88rem;color:var(--texto-secundario);margin-bottom:1.2em}
.post-card .link-texto{margin-top:auto;align-self:flex-start}

/* barra de progresso da leitura */
.barra-leitura{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.barra-leitura span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--dourado),var(--dourado-escuro));
  transition:width .1s linear
}
/* regra unificada mais abaixo */
.post-meta span{display:inline-flex;align-items:center;gap:7px}
.post-meta .ico-svg{color:var(--dourado-escuro)}
/* object-position mais alto mostra a parte de cima da foto, onde está o
   rosto; sem isso o recorte circular corta a cabeça */
.post-autor__foto{
  width:104px;height:104px;border-radius:50%;object-fit:cover;
  object-position:58% 18%;flex:none
}

/* ============================= 11 · FAQ ================================== */
.faq{display:grid;gap:14px;max-width:820px;margin:0 auto}
.faq details{
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.56));
  border:1px solid var(--borda-suave);border-radius:18px;padding:0 24px;
  box-shadow:var(--sombra-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .22s
}
.faq details[open]{border-color:rgba(211,184,146,.6)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-family:var(--serif);font-size:1.12rem;color:var(--verde-profundo);font-weight:500;line-height:1.35
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:2px;top:50%;margin-top:-7px;
  width:14px;height:14px;color:var(--dourado-escuro);
  background:currentColor;transition:transform .3s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .resposta{padding:0 0 22px;font-size:.94rem;color:var(--texto-secundario);margin:0}

/* =========================== 12 · RODAPÉ ================================= */
.rodape{
  margin-top:70px;padding:56px 0 26px;color:rgba(255,255,255,.82);
  background:radial-gradient(circle at 80% 12%, rgba(211,184,146,.14), transparent 44%),
             linear-gradient(135deg,color-mix(in srgb, var(--verde-principal) 70%, var(--verde-escuro)) 0%,#5D6653 55%,#46503D 100%);
}
.rodape h4{color:#fff;font-family:var(--sans);font-size:.76rem;letter-spacing:2.2px;text-transform:uppercase;font-weight:600;margin-bottom:1.3em}
.rodape a{color:rgba(255,255,255,.82);font-size:.88rem;display:block;margin-bottom:.65em;transition:color .2s}
.rodape a:hover{color:var(--dourado-claro)}
.rodape p{font-size:.88rem;margin-bottom:.7em}
.rodape img{width:126px;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.94}
.rodape .sociais{display:flex;gap:12px;margin-top:16px}
.rodape .sociais a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(211,184,146,.35);
  display:flex;align-items:center;justify-content:center;margin:0;color:var(--dourado);
  transition:background .2s,color .2s,transform .2s
}
.rodape .sociais a:hover{background:var(--dourado);color:var(--verde-profundo);transform:translateY(-2px)}
.rodape-legal{
  border-top:1px solid rgba(255,255,255,.14);margin-top:42px;padding-top:22px;
  font-size:.76rem;color:rgba(255,255,255,.62);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.rodape-legal a{display:inline;color:var(--dourado-claro)}

/* ========================= 13 · FLUTUANTES =============================== */
.zap .ico-svg{width:26px;height:26px}
.zap{
  position:fixed;right:20px;bottom:20px;z-index:50;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--verde-principal),var(--verde-escuro));color:#fff;font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 32px rgba(18,140,126,.4);transition:transform .22s
}
.zap:hover{transform:scale(1.07)}
.cookies{
  position:fixed;left:20px;bottom:20px;z-index:60;max-width:410px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--borda-suave);border-radius:20px;padding:22px 24px;
  box-shadow:0 26px 56px rgba(90,72,40,.24);font-size:.85rem
}
.cookies p{margin-bottom:1em}
.cookies a{color:var(--dourado-escuro);font-weight:600;text-decoration:underline}
.cookies .acoes{display:flex;gap:10px}

/* animação de entrada suave */
.revela{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.revela.visivel{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ========================== 14 · RESPONSIVO ============================== */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-texto{padding:44px 0 30px;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero-acoes,.hero-selos{justify-content:center}
  .hero-foto img{min-height:380px;-webkit-mask:none;mask:none;border-radius:26px}
  .hero-cro{position:static;margin:22px auto 0;max-width:none;text-align:center}
  .duas-colunas,.duas-colunas.texto-maior{grid-template-columns:1fr;gap:34px}
  .grade.g4{grid-template-columns:repeat(2,1fr)}
  .grade-equipe{grid-template-columns:repeat(3,1fr)}
  .grade-blog{grid-template-columns:repeat(2,1fr)}
  .faixa-verde{padding:40px 30px;border-radius:26px}
}
@media(max-width:760px){
  /* ---- menu como painel deslizante no canto direito ---- */
  .abrir-menu{display:flex;align-items:center;justify-content:center;position:relative;z-index:52;
    width:44px;height:44px;padding:0;border-radius:12px}
  .menu{
    display:flex;position:fixed;top:0;right:0;bottom:0;left:auto;z-index:51;
    width:min(320px,86vw);flex-direction:column;align-items:stretch;gap:0;
    background:linear-gradient(170deg,#FAF8F3 0%,#F3EEE5 100%);
    padding:88px 24px 32px;overflow-y:auto;
    box-shadow:-18px 0 50px rgba(63,73,55,.22);
    /* Fechado, encolhe para largura zero em vez de sair para fora da tela.
       Deslocar para fora geraria rolagem horizontal, e conter isso com
       overflow no html quebraria o position:sticky do cabeçalho. */
    width:0;padding-left:0;padding-right:0;opacity:0;visibility:hidden;
    overflow:hidden;
    transition:width .32s cubic-bezier(.4,0,.2,1),opacity .24s,
               padding .32s cubic-bezier(.4,0,.2,1),visibility .32s
  }
  .menu.aberto{
    width:min(320px,86vw);padding-left:24px;padding-right:24px;
    opacity:1;visibility:visible;overflow-y:auto;overflow-x:hidden
  }
  .menu a{
    padding:15px 0;border-bottom:1px solid rgba(184,150,95,.16);font-size:.98rem;
    color:var(--verde-profundo)
  }
  .menu a::after{display:none}
  .menu a[aria-current]{color:var(--dourado-escuro)}

  /* Dois cuidados aqui:
     1) o menu vive dentro de .topo (sticky, com z-index), que cria contexto de
        empilhamento: com o painel aberto o cabeçalho sobe acima do véu;
     2) backdrop-filter em .topo tornaria .topo o bloco de referência dos
        elementos position:fixed, prendendo o painel na altura do cabeçalho.
        Por isso, no mobile, o cabeçalho usa fundo sólido em vez de desfoque. */
  body.menu-travado .topo{z-index:55}
  .topo{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(250,248,243,.97)}

  /* véu escuro atrás do painel */
  .menu-veu{
    position:fixed;inset:0;z-index:50;background:rgba(45,54,39,.5);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s
  }
  .menu-veu.on{opacity:1;visibility:visible}

  /* trava a rolagem do fundo com o menu aberto */
  body.menu-travado{overflow:hidden}

  /* submenus dentro do painel */
  .submenu{width:100%}
  .submenu-abrir{
    width:100%;justify-content:space-between;padding:15px 0;
    border-bottom:1px solid rgba(184,150,95,.16);font-size:.98rem;color:var(--verde-profundo)
  }
  .submenu-abrir::after{display:none}
  .submenu-itens{
    position:static;transform:none;opacity:1;visibility:visible;display:none;
    min-width:0;box-shadow:none;border:0;background:transparent;backdrop-filter:none;
    padding:6px 0 10px 14px;border-left:2px solid rgba(184,150,95,.3);margin:6px 0 4px
  }
  .submenu.aberto .submenu-itens{display:block;transform:none}
  .submenu-itens a{padding:11px 8px;border-bottom:0}
  .submenu-grade{grid-template-columns:1fr;gap:0}
  .submenu-rodape{border-top:1px solid rgba(184,150,95,.18);text-align:left;padding:12px 8px}

  /* ---- demais ajustes de celular (continuam DENTRO desta media query) ---- */
  .grade.g2,.grade.g3,.grade.g4{grid-template-columns:1fr}
  .grade-equipe{grid-template-columns:repeat(2,1fr);gap:20px}
  .grade-blog{grid-template-columns:1fr}
  .lista-trat article{grid-template-columns:44px 1fr;gap:16px}
  .lista-trat .seta{display:none}
  .faixa-verde{padding:34px 24px;margin:44px 0}
  .titulo-sec .linha{max-width:40px}
  .cookies{left:12px;right:12px;max-width:none}
}

/* ---------- submenu de especialidades ---------- */
.submenu{position:relative}
.submenu-abrir{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.87rem;font-weight:500;color:var(--texto-principal);
  padding:6px 0;position:relative;transition:color .2s
}
.submenu-abrir::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--dourado-escuro);transition:right .25s}
.submenu-abrir:hover,.submenu.no-pilar .submenu-abrir{color:var(--dourado-escuro)}
.submenu-abrir:hover::after,.submenu.no-pilar .submenu-abrir::after{right:0}
.submenu-abrir .seta-sub{width:.62em;height:.62em;transition:transform .28s;color:var(--dourado-escuro)}
.submenu.aberto .seta-sub{transform:rotate(45deg)}
.submenu-itens{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:290px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  border:1px solid var(--borda-suave);border-radius:18px;padding:10px;
  box-shadow:0 26px 56px rgba(90,72,40,.18);
  opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;z-index:45
}
.submenu:hover .submenu-itens,.submenu.aberto .submenu-itens{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu-itens a{display:block;padding:11px 14px;border-radius:12px;transition:background .18s}
.submenu-itens a:hover{background:var(--bege-claro)}
.submenu-itens a[aria-current]{background:var(--bege-claro)}
.submenu-itens strong{display:block;font-size:.88rem;font-weight:600;color:var(--verde-profundo);margin-bottom:2px}
.submenu-itens small{display:block;font-size:.74rem;color:var(--texto-secundario);line-height:1.35}
.submenu-itens a::after{display:none}

@media(max-width:760px){
  .submenu{width:100%}
  .submenu-abrir{width:100%;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(184,150,95,.15);font-size:.95rem}
  .submenu-abrir::after{display:none}
  .submenu-itens{
    position:static;transform:none;opacity:1;visibility:visible;display:none;
    min-width:0;box-shadow:none;border:0;background:transparent;backdrop-filter:none;
    padding:4px 0 8px 12px;border-left:2px solid rgba(184,150,95,.28);margin:8px 0 4px
  }
  .submenu.aberto .submenu-itens{display:block;transform:none}
  .submenu-itens a{padding:10px 10px}
}

/* benefícios em duas colunas quando há espaço */
.beneficios--duas{grid-template-columns:1fr 1fr;column-gap:34px}
@media(max-width:760px){.beneficios--duas{grid-template-columns:1fr}}

/* ---------- aviso honesto antes do FAQ ---------- */
.aviso{
  display:flex;gap:18px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.6));
  border:1px solid rgba(184,150,95,.34);border-left:3px solid var(--dourado-escuro);
  border-radius:18px;padding:26px 28px;box-shadow:var(--sombra-card)
}
.aviso .ico{width:42px;height:42px;font-size:1rem;margin-bottom:0;flex:none}
.aviso h3{font-size:1.1rem;margin:0 0 .35em}
.aviso p{margin:0;font-size:.93rem;color:var(--texto-secundario)}
.trat-sinais{margin-top:.7em!important;font-size:.8rem!important;color:var(--dourado-escuro)!important;letter-spacing:.2px}

/* ---------- submenu largo (tratamentos) ---------- */
.submenu-itens--largo{min-width:620px;padding:14px}
.submenu-grade{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px}
.submenu-rodape{
  display:block;margin-top:8px;padding:12px 14px;border-top:1px solid rgba(184,150,95,.22);
  font-size:.8rem;color:var(--dourado-escuro);font-weight:600;text-align:center
}
.submenu-rodape:hover{background:var(--bege-claro);border-radius:0 0 12px 12px}

/* ---------- página de tratamentos ---------- */
/* Faixa de categorias: grade de colunas iguais em vez de flex-wrap.
   Com flex, cada item tinha a largura do próprio texto e a última linha
   ficava desequilibrada. São 8 tratamentos, então 4 por linha fecha certo. */
.indice-trat{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  padding:20px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5));
  border:1px solid var(--borda-suave);box-shadow:var(--sombra-card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.indice-trat a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:44px;padding:8px 14px;border-radius:14px;
  font-size:.84rem;font-weight:500;line-height:1.25;
  border:1px solid rgba(184,150,95,.3);color:var(--texto-principal);background:#fff;
  transition:background .2s,color .2s,border-color .2s,transform .2s
}
.indice-trat a:hover{
  background:var(--verde-principal);color:#fff;border-color:var(--verde-principal);
  transform:translateY(-2px)
}
@media(max-width:1024px){
  .indice-trat{grid-template-columns:repeat(2,1fr);gap:8px;padding:16px}
  .indice-trat a{font-size:.8rem;min-height:42px}
}
@media(max-width:420px){
  .indice-trat{grid-template-columns:1fr}
}
.trat-rotulo{
  font-size:.76rem;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  color:var(--dourado-escuro);margin:1.6em 0 .9em
}
.ordem1{order:1}
.ordem2{order:2}
.trat-destaque{
  position:absolute;left:-16px;bottom:22px;max-width:260px;
  display:flex;gap:12px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.86));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--borda-suave);border-radius:18px;padding:15px 18px;
  box-shadow:0 22px 46px rgba(90,72,40,.18)
}
.trat-destaque .ico{width:34px;height:34px;font-size:.8rem;margin-bottom:0;flex:none}
.trat-destaque p{margin:0;font-size:.84rem;line-height:1.42;color:var(--verde-escuro);font-weight:500}

@media(max-width:980px){
  .submenu-itens--largo{min-width:0}
  .submenu-grade{grid-template-columns:1fr 1fr}
  .ordem1,.ordem2{order:initial}
  .trat-destaque{position:static;margin-top:16px;max-width:none}
}
@media(max-width:760px){
  .submenu-grade{grid-template-columns:1fr}
  .indice-trat{padding:16px;gap:7px}
  .indice-trat a{font-size:.78rem;padding:8px 13px}
}

@media(max-width:980px){
  .grade-equipamentos{grid-template-columns:repeat(3,1fr);gap:12px}
  .foto-cheia{min-height:260px}
}
@media(max-width:760px){
  .grade-equipamentos{grid-template-columns:1fr 1fr}
  .grade-equipamentos figure:last-child{grid-column:1/-1}
  .post-meta{gap:14px;font-size:.75rem}
  .post-autor__foto{width:76px;height:76px}
}

/* ---------- banner de página (blog e internas) ---------- */
.banner-pg{
  position:relative;margin-bottom:8px;min-height:min(460px,62vh);
  display:flex;align-items:center;overflow:hidden;isolation:isolate
}
.banner-pg__fundo{position:absolute;inset:0;z-index:-2}
.banner-pg__fundo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,18% 20%)}
/* véu verde/dourado por cima da foto, para o texto ficar legível */
/* véu escuro à esquerda para o texto; à direita clareia e a foto aparece */
.banner-pg::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,
      rgba(50,59,44,.97) 0%,
      rgba(58,68,50,.95) 30%,
      rgba(66,76,58,.86) 48%,
      rgba(80,90,70,.55) 68%,
      rgba(93,102,83,.22) 100%),
    radial-gradient(ellipse 55% 80% at 92% 40%, rgba(211,184,146,.20), transparent 68%);
}
/* Curva da base: arco pintado por cima, como antes.
   O truque para não sobrar faixa clara: o arco recebe EXATAMENTE o mesmo
   fundo do site, com background-attachment:fixed. Como o fundo do body
   também é fixed, os dois coincidem pixel a pixel em qualquer rolagem
   e o arco some contra a página. */
.banner-pg::after{
  content:"";position:absolute;left:-3%;right:-3%;bottom:-1px;height:74px;z-index:1;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(ellipse 60% 45% at 12% 6%, rgba(226,196,140,.30), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 20%, rgba(216,186,130,.22), transparent 62%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(210,180,124,.20), transparent 60%),
    linear-gradient(165deg,#FAF8F3 0%,color-mix(in srgb, var(--marfim) 70%, var(--bege-claro)) 45%,#F3EEE5 100%);
  background-attachment:fixed;
  background-size:cover
}
.banner-pg .olho{color:var(--dourado-claro);margin-bottom:.7em}
.banner-pg h1{
  color:#fff;font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.03;margin:0 0 .35em;
  text-shadow:0 2px 24px rgba(0,0,0,.28)
}
.banner-pg h1 .script{
  display:block;color:var(--dourado-claro);font-size:1.08em;line-height:1.08;margin-top:.04em;
  text-shadow:0 2px 20px rgba(0,0,0,.25)
}
.banner-pg__sub{
  font-family:var(--serif);font-size:clamp(1.06rem,2vw,1.3rem);line-height:1.5;
  color:rgba(255,255,255,.9);max-width:540px;margin:0
}
.migalhas--claro{color:rgba(255,255,255,.7);margin-bottom:1.8em}
.migalhas--claro a{color:rgba(255,255,255,.85)}
.migalhas--claro a:hover{color:var(--dourado-claro)}

/* botão ver mais */
.post-oculto{display:none}
.ver-mais-linha{text-align:center;margin-top:40px}

@media(max-width:900px){
  .banner-pg{min-height:0}
  .banner-pg::before{
    background:
      linear-gradient(170deg, rgba(63,73,55,.94) 0%, rgba(70,80,61,.9) 55%, rgba(93,102,83,.78) 100%),
      radial-gradient(ellipse 70% 50% at 80% 20%, rgba(211,184,146,.2), transparent 65%);
  }
}

/* variações do banner */
.banner-pg__acao{margin:26px 0 0}
.banner-pg--curto{min-height:min(360px,50vh)}
.banner-pg--curto h1{font-size:clamp(2rem,4.2vw,3.2rem)}
@media(max-width:900px){
}

/* ---------- hero da home: banner alto ---------- */
.banner-pg--hero{min-height:min(640px,84vh)}
.banner-pg--hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem)}
.banner-pg__acoes{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 0}
.banner-pg__assinatura{
  margin:26px 0 0;padding-left:16px;border-left:2px solid var(--dourado);line-height:1.35
}
.banner-pg__assinatura strong{
  display:block;font-family:var(--serif);font-size:1.14rem;color:#fff;font-weight:500
}
.banner-pg__assinatura span{
  display:block;font-size:.68rem;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--dourado-claro);font-weight:600;margin-top:4px
}

/* ---------- banners internos: mais baixos ---------- */
.banner-pg:not(.banner-pg--hero){min-height:min(340px,46vh)}
.banner-pg:not(.banner-pg--hero) h1{font-size:clamp(2rem,4vw,3rem)}
.banner-pg:not(.banner-pg--hero) .banner-pg__sub{font-size:clamp(1rem,1.7vw,1.16rem);max-width:520px}
.banner-pg:not(.banner-pg--hero)::after{height:58px}

@media(max-width:900px){
  .banner-pg--hero{min-height:0}
}

/* banner com foto escura: véu mais leve e esverdeado, para o assunto não sumir */
.banner-pg--escuro::before{
  background:
    linear-gradient(96deg,
      rgba(30,38,26,.92) 0%,
      rgba(42,52,36,.84) 34%,
      rgba(55,66,48,.62) 56%,
      rgba(63,73,55,.34) 76%,
      rgba(63,73,55,.16) 100%),
    radial-gradient(ellipse 60% 80% at 88% 45%, rgba(120,170,150,.14), transparent 70%) !important;
}

/* véu leve: para fotos claras e de baixo contraste, onde o assunto precisa aparecer */
.banner-pg--leve::before{
  background:
    linear-gradient(96deg,
      rgba(45,54,39,.94) 0%,
      rgba(52,62,45,.86) 24%,
      rgba(60,70,52,.64) 44%,
      rgba(74,84,63,.30) 66%,
      rgba(93,102,83,.06) 100%),
    radial-gradient(ellipse 55% 80% at 92% 45%, rgba(211,184,146,.14), transparent 70%) !important;
}
@media(max-width:900px){
  .banner-pg--leve::before{
    background:
      linear-gradient(170deg,
        rgba(45,54,39,.94) 0%,
        rgba(52,62,45,.88) 52%,
        rgba(66,76,56,.76) 100%),
      radial-gradient(ellipse 70% 50% at 80% 20%, rgba(211,184,146,.16), transparent 65%) !important;
  }
}
@media(max-width:900px){
}

/* ============ AJUSTES DA HOME ============ */

/* hero: véu recuado à esquerda para o rosto aparecer */
.banner-pg--rosto::before{
  background:
    linear-gradient(94deg,
      rgba(45,54,39,.95) 0%,
      rgba(52,62,45,.90) 20%,
      rgba(58,68,50,.72) 38%,
      rgba(70,80,60,.40) 56%,
      rgba(85,95,74,.14) 74%,
      rgba(93,102,83,.02) 100%) !important;
}
.banner-pg--rosto h1{font-size:clamp(2.3rem,4.4vw,3.5rem)}
.banner-pg--rosto .banner-pg__sub{max-width:440px;font-size:1.02rem}

/* diferenciais com número e linha dourada */
.grade-dif .cartao-dif{position:relative;padding-top:30px;overflow:hidden}
.cartao-dif::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--dourado-escuro),var(--dourado),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s ease
}
.cartao-dif:hover::before{transform:scaleX(1)}
.dif-num{
  position:absolute;top:16px;right:20px;font-family:var(--serif);font-size:2.6rem;
  color:rgba(184,150,95,.16);line-height:1;font-weight:500;pointer-events:none
}
.cartao-dif .ico{
  background:linear-gradient(135deg,var(--verde-principal),var(--verde-escuro));
  color:var(--dourado-claro);border-color:transparent;
  box-shadow:0 8px 20px rgba(63,73,55,.22)
}
.cartao-dif:hover .ico{transform:translateY(-2px)}
.cartao-dif .ico{transition:transform .3s}

/* credenciais da responsável técnica */
.credenciais{list-style:none;padding:0;margin:1.8em 0 0;display:flex;gap:34px;flex-wrap:wrap}
.credenciais li{position:relative;padding-left:14px;border-left:2px solid var(--dourado)}
.credenciais strong{
  display:block;font-family:var(--serif);font-size:1.35rem;color:var(--verde-profundo);
  line-height:1.1;font-weight:500
}
.credenciais span{
  display:block;font-size:.72rem;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--texto-secundario);margin-top:4px
}

/* retrato com legenda, recorte editorial */
.retrato{margin:0;position:relative}
.retrato__foto{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;
  border-radius:200px 200px 26px 26px;
  box-shadow:0 26px 54px rgba(90,72,40,.20)
}
.retrato figcaption{
  position:absolute;left:-14px;bottom:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.88));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--borda-suave);border-radius:18px;padding:14px 20px;
  box-shadow:0 20px 44px rgba(90,72,40,.18);max-width:270px
}
.retrato figcaption strong{
  display:block;font-family:var(--serif);font-size:1.05rem;color:var(--verde-profundo);line-height:1.2
}
.retrato figcaption span{
  display:block;font-size:.68rem;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--dourado-escuro);font-weight:600;margin-top:5px
}
.carrossel__trilho{position:relative;min-height:260px}
.depo__aspas{
  display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(232,213,181,.55),rgba(211,184,146,.3));
  color:var(--dourado-escuro);font-size:.95rem;margin-bottom:16px
}
.depo__estrelas{color:var(--dourado-escuro);font-size:.8rem;letter-spacing:3px;margin-bottom:14px}
.carrossel__pontos{display:flex;gap:9px;justify-content:center;margin-top:24px}
.carrossel__pontos button{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(184,150,95,.32);transition:width .3s,background .3s
}
.carrossel__pontos button.on{width:26px;border-radius:99px;background:var(--dourado-escuro)}
.faq-duas__intro{position:sticky;top:110px}
.faq-duas__intro h2{margin-bottom:.5em}
.faq-duas__intro p{color:var(--texto-secundario);font-size:.95rem}

@media(max-width:980px){
  .faq-duas__intro{position:static}
  .retrato__foto{border-radius:26px;aspect-ratio:4/3}
  .retrato figcaption{position:static;margin-top:16px;max-width:none}
  .credenciais{gap:22px}
}
@media(max-width:760px){
  .dif-num{font-size:2rem;top:12px;right:16px}
}
/* recortes de foto ajustados */
.grade-equipamentos img{object-position:center 42%}
.grade-equipamentos .foco-baixo{object-position:center 62%}
.banner-pg--rosto .banner-pg__acoes{max-width:520px}

/* 2 · foto dupla sobreposta na seção "A clínica" */
.foto-dupla{margin:0;position:relative;padding-bottom:52px;padding-right:40px}
.foto-dupla__a{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 55%;
  border-radius:26px;box-shadow:0 24px 50px rgba(90,72,40,.18)
}
.foto-dupla__b{
  position:absolute;right:0;bottom:0;width:44%;aspect-ratio:1;object-fit:cover;
  object-position:center 45%;border-radius:20px;border:5px solid var(--marfim);
  box-shadow:0 20px 40px rgba(90,72,40,.22)
}

/* 4 · cards de tratamento com foto */
.cartao-trat{
  display:flex;flex-direction:column;overflow:hidden;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.54));
  border:1px solid rgba(211,184,146,.28);
  box-shadow:0 8px 22px rgba(90,72,40,.07);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .24s,box-shadow .24s,border-color .24s
}
.cartao-trat:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(90,72,40,.12);border-color:rgba(211,184,146,.5)}
.cartao-trat__foto{display:block;overflow:hidden;position:relative}
.cartao-trat__foto img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 45%;transition:transform .55s}
.cartao-trat:hover .cartao-trat__foto img{transform:scale(1.06)}
.cartao-trat__texto{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.cartao-trat .olho{margin-bottom:.5em}
.cartao-trat__nome{
  font-family:var(--serif);font-size:1.08rem;color:var(--verde-profundo);
  line-height:1.25;margin-bottom:.35em
}
.cartao-trat__desc{
  font-size:.82rem;color:var(--texto-secundario);line-height:1.55;margin-bottom:.9em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.cartao-trat .olho{font-size:.62rem;letter-spacing:1.6px}
.cartao-trat .link-texto{font-size:.8rem}
.cartao-trat .link-texto{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px}
.cartao-trat .link-texto .ico-svg{font-size:.72rem;transition:transform .22s}
.cartao-trat:hover .link-texto .ico-svg{transform:translateX(3px)}

/* 7 · seção do espaço */
.espaco__topo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:34px}
.espaco__topo h2{margin:0}
.espaco__topo p{color:var(--texto-secundario);font-size:.96rem;margin:0}
.espaco__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* 8 · nota do Google */
.nota-google{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:-16px 0 32px
}
.nota-google__valor{
  font-family:var(--serif);font-size:2.4rem;color:var(--verde-profundo);line-height:1;font-weight:500
}
.nota-google__estrelas{color:var(--dourado-escuro);font-size:.95rem;letter-spacing:3px}
.nota-google__texto{
  font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--texto-secundario);font-weight:600
}
.faq-duas__intro{position:static}

@media(max-width:980px){
  .espaco__topo{grid-template-columns:1fr;gap:18px;align-items:start}
  .foto-dupla{padding-right:0;padding-bottom:0}
  .foto-dupla__b{position:static;width:100%;aspect-ratio:16/9;margin-top:14px;border-width:0}
}
@media(max-width:760px){
  .nota-google__valor{font-size:2rem}
}
/* frase de destaque dentro do texto corrido */
.destaque-frase{
  font-family:var(--serif);font-size:1.18rem;line-height:1.5;color:var(--verde-escuro);
  padding:16px 0 16px 22px;border-left:3px solid var(--dourado);margin:1.6em 0
}
.carrossel__seta{
  position:absolute;top:calc(50% - 26px);transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid rgba(184,150,95,.34);
  color:var(--verde-escuro);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(90,72,40,.14);transition:all .2s;z-index:3
}
.carrossel__seta:hover{background:var(--verde-principal);color:#fff;border-color:var(--verde-principal)}
.carrossel__seta.ant{left:0}
.carrossel__seta.ant .ico-svg{transform:rotate(180deg)}
.carrossel__seta.prox{right:0}
@media(max-width:760px){
  .carrossel__seta{position:static;transform:none;display:inline-flex}
  .carrossel__pontos{gap:14px;align-items:center}
  .carrossel__seta.ant{order:-1}
}

/* degradê verde + textura em PNG transparente por cima, atrás do conteúdo */
.faixa-verde--tec{
  background:linear-gradient(140deg,var(--verde-principal) 0%,var(--verde-escuro) 52%,var(--verde-profundo) 100%) !important;
}
.faixa-verde--tec::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url('/imagens/textura-tec.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.10;
  -webkit-mask-image:none;mask-image:none
}
.faixa-verde--tec > *{position:relative;z-index:1}
@media(max-width:760px){
  .faixa-verde--tec::after{opacity:.06;background-position:center}
}

/* botão do método CHRONUS */
.btn-metodo{
  display:inline-flex;align-items:center;gap:12px;padding:9px 20px 9px 9px;
  border-radius:999px;border:1px solid rgba(184,150,95,.4);
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(250,248,243,.7));
  box-shadow:0 10px 26px rgba(90,72,40,.10);
  transition:transform .22s,box-shadow .22s,border-color .22s
}
.btn-metodo:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(90,72,40,.16);border-color:var(--dourado-escuro)}
.btn-metodo__marca{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--verde-principal),var(--verde-escuro));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)
}
.btn-metodo__marca img{width:24px;height:24px;display:block}
.btn-metodo__texto strong{
  display:block;font-size:.78rem;color:var(--verde-profundo);line-height:1.25;font-weight:600
}
.btn-metodo__texto small{
  display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--dourado-escuro);
  font-weight:600;margin-top:2px
}
.btn-metodo__texto .ico-svg{font-size:.66rem;transition:transform .22s}
.btn-metodo:hover .ico-svg{transform:translateX(3px)}

@media(max-width:900px){
}
@media(max-width:600px){
  .btn-metodo{width:100%}
}

/* foto que se dissolve no fundo, em vez de borda dura */
.foto-dupla--degrade .foto-dupla__a{
  border-radius:26px 26px 26px 0;
  -webkit-mask-image:
    linear-gradient(to left, #000 55%, rgba(0,0,0,.35) 82%, transparent 100%),
    linear-gradient(to bottom, #000 62%, rgba(0,0,0,.4) 88%, transparent 100%);
  mask-image:
    linear-gradient(to left, #000 55%, rgba(0,0,0,.35) 82%, transparent 100%),
    linear-gradient(to bottom, #000 62%, rgba(0,0,0,.4) 88%, transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  box-shadow:none
}
.foto-dupla--degrade .foto-dupla__b{
  border-color:var(--marfim);
  box-shadow:0 22px 44px rgba(90,72,40,.24)
}
@media(max-width:980px){
  .foto-dupla--degrade .foto-dupla__a{
    -webkit-mask-image:none;mask-image:none;border-radius:26px;
    box-shadow:0 24px 50px rgba(90,72,40,.18)
  }
}

/* ---------- paralaxe do hero ---------- */
.banner-pg__fundo--paralaxe{will-change:transform}
.banner-pg__fundo--paralaxe img{transform:translate3d(0,var(--paralaxe,0),0) scale(1.14);transition:none}
@media(prefers-reduced-motion:reduce){
  .banner-pg__fundo--paralaxe img{transform:none}
}

/* foto única da seção "A clínica": deslocada à direita, degradê discreto */
/* regras da .foto-solo unificadas mais abaixo, em um bloco só */


/* ============ TIPOGRAFIA: quebra de linha e margem direita ============ */

/* Hifenização em português para blocos de texto corrido.
   Evita rio de espaço no justificado e buraco na margem direita. */
html{-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3}
p,li,dd,blockquote,summary,figcaption{
  hyphens:auto;-webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 3;
  overflow-wrap:break-word;word-break:normal
}

/* Títulos NÃO hifenizam nem justificam: quebra feia em manchete. */
h1,h2,h3,h4,.blog-titulo,.cartao-trat__nome,.banner-pg h1{
  hyphens:manual;-webkit-hyphens:manual;text-wrap:balance;text-align:left
}

/* Colunas estreitas voltam a alinhar à esquerda: abaixo de ~46 caracteres
   o justificado abre buracos. */
@media(max-width:760px){
}

/* Margem direita: nada encosta na borda do contêiner */
.duas-colunas > div > p,.duas-colunas > div > ul{padding-right:8px}
/* os dois botões da seção da Dra., alinhados na mesma linha */
.acoes-dra{
  margin-top:1.8em;display:flex;gap:14px;align-items:stretch;flex-wrap:wrap
}
.acoes-dra .btn-metodo{height:56px}
@media(max-width:520px){
  .acoes-dra{flex-direction:column;align-items:stretch}
  .acoes-dra .btn-metodo{justify-content:flex-start}
}

/* bloco final de chamada: mesma textura da faixa de tecnologia, um pouco mais forte */
.faixa-cta::after{opacity:.14}
.faixa-cta{padding:58px 56px}
.faixa-cta h2{max-width:22ch;margin-left:auto;margin-right:auto;text-align:center}
.faixa-cta .olho{text-align:center}
.faixa-cta p{margin-left:auto;margin-right:auto}
@media(max-width:760px){.faixa-cta{padding:40px 24px}}

/* ==========================================================================
   AJUSTE DE PROPORÇÃO — celular e tablet
   ========================================================================== */

/* ---------- 1 · escala de espaçamento entre seções ---------- */
@media(max-width:1180px){
  .faixa-verde{margin:48px 0;padding:42px 40px}
  .titulo-sec{margin-bottom:26px}
}
@media(max-width:900px){
  .faixa-verde{margin:36px 0;padding:34px 26px}
  .titulo-sec{margin-bottom:22px}
  .duas-colunas{gap:28px}
}
@media(max-width:600px){
  .faixa-verde{margin:28px 0;padding:28px 20px}
  .duas-colunas{gap:22px}
  .grade{gap:14px}
}

/* ---------- 2 · selo "reconhecida pelo CFO" ---------- */
@media(max-width:1180px){
}
@media(max-width:980px){
}
@media(max-width:420px){
}

/* ---------- 3 · hero no celular: mais baixo, foto melhor enquadrada ---------- */
@media(max-width:900px){
  .banner-pg--hero{min-height:0}
  .banner-pg--hero h1{font-size:clamp(1.9rem,7vw,2.6rem)}
  /* no retrato, mostra o rosto em vez do meio da cena */
  .banner-pg--rosto .banner-pg__fundo img{object-position:38% 16% !important}
  .banner-pg__acoes{margin-top:22px}
  .banner-pg__assinatura{margin-top:20px}
}
@media(max-width:600px){
}

/* ---------- 4 · rodapé proporcional ---------- */
@media(max-width:900px){
  .rodape{padding:40px 0 20px;margin-top:48px}
  /* tablet: 2x2 sem coluna cheia, senão o rodapé cresce em vez de encolher */
  .rodape img{width:104px;margin-bottom:12px}
  .rodape p{font-size:.84rem;margin-bottom:.5em}
  .rodape a{font-size:.83rem;margin-bottom:.5em}
  .rodape h4{font-size:.7rem;margin-bottom:1em}
  .rodape-legal{margin-top:28px;padding-top:16px;font-size:.72rem;gap:8px}
}
@media(max-width:600px){
  /* celular: a marca ocupa a linha toda, as três listas viram 2 colunas */
  .rodape{padding:32px 0 18px;margin-top:36px}
  .rodape img{width:92px;margin-bottom:10px}
  .rodape p{font-size:.8rem;line-height:1.5}
  .rodape a{font-size:.8rem;margin-bottom:.42em}
  .rodape .sociais{margin-top:12px}
  .rodape .sociais a{width:34px;height:34px}
  .rodape-legal{margin-top:22px;padding-top:14px;font-size:.68rem;line-height:1.5}
}

/* ---------- 5 · faixa de tecnologia no tablet ---------- */
@media(max-width:1180px) and (min-width:601px){
}
@media(max-width:600px){
}

/* ---------- 6 · justificado e hifenização também no celular ---------- */
@media(max-width:760px){
  /* coluna estreita precisa de hífen mais permissivo e palavra longa quebrável */
  p,li,dd,blockquote{hyphenate-limit-chars:5 3 2;overflow-wrap:break-word}
}

/* texto de apoio abaixo do título de seção */
.secao-intro{
  text-align:center;max-width:600px;margin:-14px auto 32px;
  color:var(--texto-secundario);font-size:.95rem
}

/* cartão de pessoa: texto sempre centralizado sob a foto */
.pessoa{text-align:center;display:flex;flex-direction:column;align-items:center}
.pessoa h3,.pessoa p,.pessoa small{text-align:center !important;width:100%}
.pessoa p{max-width:22ch;margin-left:auto;margin-right:auto}

/* bloco de chamada: centralizar só o conteúdo dele, sem alcançar
   elementos flutuantes ou outras seções */
/* bloco de chamada: rótulo, título, texto e botão centralizados */
.faixa-cta > .olho,
.faixa-cta > h2,
.faixa-cta > p,
.faixa-cta > p.olho{text-align:center}
.faixa-cta > p{max-width:44ch;margin-left:auto;margin-right:auto}

@media(max-width:980px){
  /* deixa de ser flex: a legenda desce em vez de virar item ao lado da foto */
}
@media(max-width:760px){
  .pessoa p{max-width:none}
}

/* ---------- alinhamento: exceções finais ----------
   Ficam por último de propósito: regras de justificação declaradas antes
   têm a mesma especificidade e venceriam pela ordem. */

/* rótulos de seção nunca justificam */
p.olho{text-align:left;hyphens:manual}

/* bloco de chamada: todo o conteúdo dele é centralizado */
.faixa-cta > p.olho,
.faixa-cta > .olho,
.faixa-cta > h2,
.faixa-cta > p{text-align:center}
.faixa-cta > p{max-width:44ch;margin-left:auto;margin-right:auto}
.banner-pg:not(.banner-pg--hero) .banner-pg__sub{max-width:490px}
.banner-pg:not(.banner-pg--hero) .migalhas{max-width:none}

@media(max-width:900px){
}

/* ============ página de tratamento: objeto com profundidade ============ */

.oque{position:relative}
.oque__texto{display:flex;flex-direction:column;justify-content:center}
.oque__indicado{
  margin-top:1.4em;padding:16px 20px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.5));
  border:1px solid rgba(184,150,95,.24);font-size:.92rem;color:var(--texto-secundario)
}
.oque__indicado strong{color:var(--verde-profundo)}

/* mancha de luz no piso, reforçando que o objeto está pousado */
.objeto-3d__piso{
  position:absolute;z-index:1;left:50%;bottom:8%;transform:translateX(-50%);
  width:76%;height:56px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(63,73,55,.22) 0%, rgba(63,73,55,.10) 45%, transparent 72%);
  filter:blur(10px)
}

@media(max-width:980px){
}
@media(max-width:600px){
}

/* ---------- card de tratamento com objeto recortado ---------- */
.cartao-trat--objeto .cartao-trat__foto{
  background:
    radial-gradient(ellipse 66% 58% at 50% 44%, rgba(232,213,181,.44), transparent 72%),
    linear-gradient(165deg,color-mix(in srgb, var(--marfim) 80%, var(--bege-claro)) 0%,var(--bege-claro) 100%);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:visible
}
.cartao-trat__objeto{
  position:relative;z-index:2;width:72%;height:auto;aspect-ratio:auto;object-fit:contain;
  /* o objeto sobe para fora da moldura do card */
  margin-top:-8%;
  filter:
    drop-shadow(0 2px 2px rgba(63,73,55,.13))
    drop-shadow(0 8px 12px rgba(63,73,55,.11))
    drop-shadow(0 20px 30px rgba(63,73,55,.14));
  transition:transform .5s cubic-bezier(.2,.7,.3,1)
}
.cartao-trat--objeto:hover .cartao-trat__objeto{transform:translateY(-5px) scale(1.035)}
.cartao-trat__piso{
  position:absolute;z-index:1;left:50%;bottom:14%;transform:translateX(-50%);
  width:52%;height:26px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(63,73,55,.20) 0%, rgba(63,73,55,.08) 50%, transparent 74%);
  filter:blur(8px);transition:width .5s,opacity .5s
}
.cartao-trat--objeto:hover .cartao-trat__piso{width:56%;opacity:.75}
/* o card precisa deixar o objeto vazar */
.cartao-trat--objeto{overflow:visible}
.cartao-trat--objeto .cartao-trat__texto{position:relative;z-index:3;background:inherit;border-radius:0 0 18px 18px}
@media(max-width:980px){}

/* ============ aproveitamento de margens nas páginas de tratamento ============
   Regra do projeto: seção usa a largura do contêiner (.wrap). Coluna estreita
   só quando o conteúdo é texto corrido longo, nunca para lista ou cartão. */

/* benefícios em grade, ocupando a largura toda */
.grade-beneficios{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px
}

/* aviso ocupando a largura toda, marca à esquerda e texto à direita */
.aviso--largo{
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  padding:30px 34px
}
.aviso--largo .aviso__marca{display:flex;align-items:center;gap:14px;white-space:nowrap}
.aviso--largo .aviso__marca h3{margin:0;font-size:1.15rem}
.aviso--largo .ico{width:44px;height:44px;margin-bottom:0;flex:none}
.aviso--largo p{margin:0;font-size:.96rem;line-height:1.7;text-align:justify}

@media(max-width:980px){
  .aviso--largo{grid-template-columns:1fr;gap:14px;align-items:start}
  .aviso--largo p{text-align:justify}
}
@media(max-width:600px){
  .aviso--largo{padding:24px 20px}
  .aviso--largo .aviso__marca h3{font-size:1.05rem}
}
/* ícone do benefício: maior e com aro, para o desenho aparecer */
.grade-beneficios .ico{
  width:46px;height:46px;font-size:1.08rem;margin-bottom:0;
  border-color:rgba(211,184,146,.42);
  box-shadow:0 6px 16px rgba(63,73,55,.18), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .28s,box-shadow .28s
}

/* ---------- cards de tratamento: passe final de redução ----------
   Área de imagem mais baixa, tipografia menor e respiro reduzido.
   Vem depois no arquivo para vencer as regras anteriores. */
.cartao-trat{border-radius:18px}
/* a área da imagem tem altura fixa: com aspect-ratio o objeto, mais alto
   que o contêiner, esticava o card de volta. */
.cartao-trat--objeto .cartao-trat__foto{aspect-ratio:auto;height:150px}
.cartao-trat__objeto{
  width:auto;max-width:66%;max-height:178px;margin-top:-14px
}
.cartao-trat__piso{width:42%;height:18px;bottom:14px}
/* texto exatamente no tamanho original: a redução pedida era só da imagem */
.cartao-trat__texto{padding:22px 24px 26px}
.cartao-trat .olho{font-size:.7rem;letter-spacing:1.8px;margin-bottom:.6em}
.cartao-trat__nome{font-size:1.25rem;margin-bottom:.4em}
.cartao-trat__desc{
  font-size:.88rem;line-height:1.6;margin-bottom:1.2em;-webkit-line-clamp:3
}
.cartao-trat .link-texto{font-size:.86rem}
.cartao-trat--objeto .cartao-trat__texto{border-radius:0 0 18px 18px}

@media(max-width:900px){
  .cartao-trat--objeto .cartao-trat__foto{height:168px}
  .cartao-trat__objeto{max-width:58%;max-height:196px}
  .cartao-trat__desc{-webkit-line-clamp:3}
}

@media(max-width:980px){
}
@media(max-width:600px){
}

@media(max-width:900px){
}

@media(max-width:900px){
}

/* ---------- lista "Talvez seja o seu caso": check e entrelinhas ----------
   O ícone tinha viewBox 448x512 dentro de uma caixa quadrada de 14px, então
   o traço saía deformado. Agora a máscara usa viewBox quadrado e a caixa
   acompanha a proporção. Entrelinhas e espaço entre itens reduzidos. */
.beneficios{gap:4px}
.beneficios li{padding-left:26px;line-height:1.45;padding-top:2px;padding-bottom:2px}
.beneficios li::before{
  top:.34em;width:15px;height:15px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media(max-width:980px){
}
@media(max-width:600px){
}

/* ---------- banners: véu ainda mais leve onde o assunto precisa aparecer ----------
   Nestes tratamentos o objeto é claro e de baixo contraste; o véu padrão
   apagava o detalhe. Aqui ele recua bem antes do lado direito. */
.banner-pg--nitido::before{
  background:
    linear-gradient(96deg,
      rgba(45,54,39,.93) 0%,
      rgba(52,62,45,.82) 20%,
      rgba(60,70,52,.54) 38%,
      rgba(74,84,63,.22) 58%,
      rgba(93,102,83,.04) 76%,
      rgba(93,102,83,0) 100%) !important;
}
.banner-pg--nitido .banner-pg__fundo img{
  filter:contrast(1.06) saturate(1.04) brightness(1.03)
}
@media(max-width:900px){
  .banner-pg--nitido::before{
    background:
      linear-gradient(170deg,
        rgba(45,54,39,.93) 0%,
        rgba(52,62,45,.84) 46%,
        rgba(66,76,56,.6) 100%) !important;
  }
}

/* coluna do objeto mais estreita, sobrando espaço para o texto */
.duas-colunas--objeto-menor{grid-template-columns:.78fr 1.22fr;gap:46px}
@media(max-width:980px){
  .duas-colunas--objeto-menor{grid-template-columns:1fr}
}

/* ---------- cards da home com a foto do banner ----------
   O objeto principal de cada foto fica à direita no banner; aqui o
   enquadramento é deslocado para centralizá-lo dentro do card. */
.cartao-trat--capa .cartao-trat__foto{
  /* proporção próxima da foto original (16:9): com altura fixa baixa o corte
     vertical era grande demais e o objeto saía do quadro. */
  aspect-ratio:16/10;height:auto;overflow:hidden;display:block;position:relative;
  background:linear-gradient(165deg,color-mix(in srgb, var(--marfim) 80%, var(--bege-claro)) 0%,var(--bege-claro) 100%)
}
.cartao-trat__capa{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)
}
.cartao-trat--capa:hover .cartao-trat__capa{transform:scale(1.05)}
/* Enquadramento medido card a card, olhando o recorte renderizado.
   A área do card é bem mais larga que alta (2,2:1 contra 1,78:1 da foto),
   então o corte é vertical e a posição Y é o que mais importa. */
/* o recorte já vem enquadrado no objeto: aqui basta o centro */
.cartao-trat__capa{object-position:center}
/* leve véu na base, para o texto do card não competir com a foto */
.cartao-trat--capa .cartao-trat__foto::after{
  content:"";position:absolute;inset:auto 0 0 0;height:36%;
  background:linear-gradient(180deg,transparent,rgba(250,248,243,.55))
}
@media(max-width:900px){
  .cartao-trat--capa .cartao-trat__foto{aspect-ratio:16/9}
}

/* ---------- cascata de fotos ----------
   Quatro fotos em alturas alternadas, preenchendo a coluna inteira ao lado
   de um texto longo, com degradê dissolvendo as bordas externas. */
.cascata{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:center;
  position:relative;padding:18px 0
}
.cascata figure{margin:0;overflow:hidden;border-radius:18px}
.cascata img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cascata figure:hover img{transform:scale(1.05)}
.cascata__a{height:210px;box-shadow:0 16px 34px rgba(90,72,40,.14)}
.cascata__b{height:150px;margin-top:38px;box-shadow:0 12px 26px rgba(90,72,40,.12)}
.cascata__c{height:158px;margin-top:-30px;box-shadow:0 12px 26px rgba(90,72,40,.12)}
.cascata__d{height:196px;margin-top:8px;box-shadow:0 16px 34px rgba(90,72,40,.14)}
/* dissolve as bordas externas no fundo da página */
.cascata::after{
  content:"";position:absolute;inset:-6px;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(250,248,243,.85) 0%, transparent 12%),
    linear-gradient(270deg, rgba(250,248,243,.7) 0%, transparent 10%),
    linear-gradient(180deg, rgba(250,248,243,.6) 0%, transparent 10%),
    linear-gradient(0deg, rgba(250,248,243,.6) 0%, transparent 10%)
}
.cascata__selo{
  position:absolute;z-index:2;left:50%;bottom:-14px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.88));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--borda-suave);border-radius:999px;padding:10px 20px;
  box-shadow:0 18px 40px rgba(90,72,40,.2);
  font-size:.72rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--verde-profundo)
}
.cascata__selo .ico-svg{color:var(--dourado-escuro)}
@media(max-width:980px){
  .cascata{gap:10px;padding:10px 0 26px}
  .cascata__a,.cascata__d{height:150px}
  .cascata__b,.cascata__c{height:120px;margin-top:0}
  .cascata__c{margin-top:0}
}

/* ============ página de perguntas frequentes ============
   Sem índice lateral: os atalhos ficam no topo em faixa horizontal e o
   conteúdo usa a largura toda, em duas colunas de grupos. */
/* Mesma grade da faixa de tratamentos: colunas iguais, quantidade fixa
   por linha. São 10 grupos, então 5 por linha fecha em duas linhas cheias. */
.faq-atalhos{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  padding:20px;margin-bottom:38px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.48));
  border:1px solid var(--borda-suave);box-shadow:var(--sombra-card)
}
.faq-atalhos a{
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  min-height:46px;padding:8px 12px;border-radius:14px;
  font-size:.82rem;line-height:1.25;
  background:rgba(255,255,255,.7);border:1px solid rgba(211,184,146,.34);
  color:var(--texto-principal);transition:all .2s
}
.faq-atalhos a:hover{
  background:var(--verde-principal);border-color:var(--verde-principal);color:#fff
}
.faq-atalhos a span{
  flex:none;min-width:20px;height:19px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(184,150,95,.2);color:var(--dourado-escuro);
  font-size:.66rem;font-weight:700;transition:all .2s
}
.faq-atalhos a:hover span{background:rgba(255,255,255,.22);color:#fff}

/* grupos em duas colunas, aproveitando a largura */
.faq-conteudo{columns:2;column-gap:40px}
.faq-grupo{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  scroll-margin-top:110px;margin:0 0 34px;display:inline-block;width:100%
}
.faq-grupo__topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid rgba(184,150,95,.24)
}
.faq-grupo__topo h2{margin:0;font-size:clamp(1.15rem,2vw,1.42rem)}
.faq-grupo__topo .link-texto{flex:none;font-size:.78rem;display:inline-flex;align-items:center;gap:6px}
.faq-grupo__topo .ico-svg{font-size:.68rem}
.faq-pagina .faq{max-width:none;margin:0}
.faq-pagina .faq summary{font-size:.94rem;padding:14px 44px 14px 18px}
.faq-pagina .faq .resposta{font-size:.88rem;padding:0 18px 14px}

/* bloco de ajuda ao final */
.faq-ajuda{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  margin-top:12px;padding:30px 34px;border-radius:22px;
  background:
    radial-gradient(ellipse 60% 80% at 88% 40%, rgba(232,213,181,.42), transparent 65%),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5));
  border:1px solid var(--borda-suave);box-shadow:var(--sombra-card)
}
.faq-ajuda h3{margin:.15em 0 .35em;font-size:1.28rem;color:var(--verde-profundo)}
.faq-ajuda p{margin:0;font-size:.92rem;color:var(--texto-secundario)}

@media(max-width:980px){
  .faq-conteudo{columns:1}
  .faq-atalhos{grid-template-columns:repeat(2,1fr);padding:16px;gap:8px;margin-bottom:28px}
  .faq-atalhos a{font-size:.79rem;min-height:44px}
}
@media(max-width:420px){
  .faq-atalhos{grid-template-columns:1fr}
}
@media(max-width:600px){
  .faq-grupo__topo{flex-direction:column;align-items:flex-start;gap:6px}
  .faq-ajuda{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 20px}
}

/* ---------- botão flutuante do WhatsApp ----------
   Verde da marca em vez do verde do WhatsApp, com anel pulsante dourado
   e um rótulo que aparece no hover. */
.zap{
  background:linear-gradient(135deg,var(--verde-principal),var(--verde-escuro)) !important;
  box-shadow:0 14px 32px rgba(63,73,55,.34), 0 0 0 1px rgba(211,184,146,.3) inset !important;
  width:60px;height:60px;right:22px;bottom:22px
}
.zap .ico-svg{color:var(--dourado-claro);position:relative;z-index:2}
/* anel que pulsa, chamando atenção sem incomodar */
.zap::before,.zap::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(211,184,146,.9);
  animation:zap-pulso 2.6s cubic-bezier(.3,0,.4,1) infinite
}
.zap::after{animation-delay:1.3s}
@keyframes zap-pulso{
  0%   {transform:scale(1);   opacity:1}
  70%  {transform:scale(1.7); opacity:0}
  100% {transform:scale(1.7); opacity:0}
}
.zap:hover{
  transform:scale(1.07);
  box-shadow:0 18px 38px rgba(63,73,55,.42), 0 0 0 1px rgba(211,184,146,.5) inset !important
}
.zap:hover::before,.zap:hover::after{animation-play-state:paused;opacity:0}

/* rótulo que desliza no hover */
.zap span.zap-txt{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;padding:9px 16px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,248,243,.92));
  color:var(--verde-profundo);font-size:.8rem;font-weight:600;letter-spacing:.2px;
  border:1px solid var(--borda-suave);box-shadow:0 10px 26px rgba(63,73,55,.2);
  opacity:0;pointer-events:none;transition:opacity .26s,transform .26s
}
.zap:hover span.zap-txt{opacity:1;transform:translateY(-50%) translateX(0)}

@media(prefers-reduced-motion:reduce){
  .zap::before,.zap::after{animation:none;opacity:0}
}
@media(max-width:600px){
  .zap{width:54px;height:54px;right:16px;bottom:16px}
  .zap span.zap-txt{display:none}
}
.banner-pg--titulo-largo h1{
  font-size:clamp(2rem,4.6vw,3.5rem);white-space:nowrap;line-height:1.05
}
@media(max-width:760px){
  .banner-pg--titulo-largo h1{white-space:normal;font-size:clamp(1.7rem,7.5vw,2.4rem)}
}

/* ---------- rodapé compacto ---------- */
.rodape{padding:44px 0 18px;margin-top:56px}
.rodape h4{font-size:.68rem;letter-spacing:1.8px;margin-bottom:.9em}
.rodape h4 a{color:inherit}
.rodape a{font-size:.82rem;margin-bottom:.42em;line-height:1.45}
.rodape p{font-size:.82rem;line-height:1.55;margin-bottom:.5em}
.rodape img{width:104px;margin-bottom:10px}
.rodape .sociais{margin-top:10px;gap:8px}
.rodape .sociais a{width:34px;height:34px;margin:0}
.rodape-legal{margin-top:26px;padding-top:14px;font-size:.72rem;line-height:1.5;gap:6px}

@media(max-width:1180px){
}
@media(max-width:900px){
  .rodape{padding:34px 0 16px;margin-top:40px}
  .rodape a{font-size:.8rem;margin-bottom:.36em}
}
@media(max-width:560px){
  .rodape{padding:28px 0 14px;margin-top:32px}
  .rodape img{width:92px}
  .rodape p{font-size:.78rem}
  .rodape a{font-size:.78rem}
}

/* rodapé no tablet e celular: colunas em 3 e listas mais curtas */
@media(max-width:900px){
  .rodape{padding:30px 0 14px;margin-top:36px}
  /* uma coluna por linha: Tratamentos e Especialidades não dividem a mesma faixa */
  .rodape h4{font-size:.64rem;margin-bottom:.7em}
  .rodape a{font-size:.76rem;margin-bottom:.3em}
  .rodape-legal{margin-top:18px;padding-top:12px;font-size:.68rem}
}
@media(max-width:560px){
  /* No celular as listas viram sanfonas: o rodapé fica curto e o visitante
     abre só o que interessa. Cada bloco continua acessível por teclado. */
  /* A regra do tablet põe esta coluna em flex com base de 240px no parágrafo.
     No celular isso sobrava como espaço vazio entre o texto e os ícones;
     aqui o flex é desfeito e cada item volta a ocupar só o que precisa. */
  .rodape a{font-size:.8rem;margin-bottom:.5em}
  .rodape-legal{margin-top:16px}
}

/* ---------- faixas de categoria: grade regular ----------
   Antes eram flex com quebra livre: os itens tinham larguras diferentes
   (143 a 241px) e sobrava vão irregular. Agora é grade, com colunas de
   mesma largura e mesma quantidade por linha. */
.indice-trat,
.faq-atalhos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  justify-content:stretch;align-items:stretch
}
.indice-trat a,
.faq-atalhos a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;line-height:1.3;min-height:44px;padding:9px 14px;
  hyphens:manual
}
/* o contador do FAQ fica no canto, sem empurrar o texto do centro */
.faq-atalhos a{position:relative;padding-right:34px}
.faq-atalhos a span{position:absolute;right:11px;top:50%;transform:translateY(-50%)}

@media(max-width:1100px){
  .indice-trat,.faq-atalhos{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .indice-trat,.faq-atalhos{grid-template-columns:repeat(2,1fr);gap:8px}
  .indice-trat a,.faq-atalhos a{font-size:.79rem;padding:8px 12px;min-height:42px}
  .faq-atalhos a{padding-right:30px}
}
@media(max-width:440px){
  .indice-trat,.faq-atalhos{grid-template-columns:1fr}
}

/* ---------- faixas de categoria: grade regular ----------
   Antes eram flex com quebra livre, o que deixava a última linha com poucos
   itens e larguras diferentes. Agora é grade de colunas iguais: mesma
   quantidade por linha e mesma largura em todos os botões. */
.indice-trat,
.faq-atalhos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  justify-content:stretch;padding:20px
}
.indice-trat a,
.faq-atalhos a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;line-height:1.3;padding:11px 14px;min-height:44px;
  font-size:.82rem
}
/* o contador do FAQ não empurra o texto do centro */
.faq-atalhos a span{position:absolute;right:12px}
.faq-atalhos a{position:relative;padding-right:38px;justify-content:center}

/* 8 itens em tratamentos: 4 por linha, duas linhas cheias.
   10 itens no FAQ: 5 por linha, duas linhas cheias. */
.faq-atalhos{grid-template-columns:repeat(5,1fr)}

@media(max-width:1180px){
  /* 10 itens só fecham linha cheia em 5 ou 2 colunas: mantemos 5 e reduzimos
     a fonte, em vez de aceitar uma linha com dois itens soltos. */
  .indice-trat{grid-template-columns:repeat(4,1fr)}
  .faq-atalhos{grid-template-columns:repeat(5,1fr)}
  .faq-atalhos a{font-size:.74rem;padding:10px 30px 10px 8px}
  .faq-atalhos a span{right:7px}
}
@media(max-width:900px){
  /* 8 itens: 4 colunas = 2 linhas cheias. 10 itens: 2 colunas = 5 linhas cheias.
     Escolhido para nenhuma linha ficar com item solto. */
  .indice-trat{grid-template-columns:repeat(4,1fr);gap:8px;padding:16px}
  .faq-atalhos{grid-template-columns:repeat(2,1fr);gap:8px;padding:16px}
  .indice-trat a,.faq-atalhos a{font-size:.78rem;padding:10px 12px}
  .faq-atalhos a{padding-right:32px}
  .faq-atalhos a span{right:9px}
}
@media(max-width:560px){
  .indice-trat,.faq-atalhos{grid-template-columns:repeat(2,1fr)}
  .indice-trat a,.faq-atalhos a{font-size:.74rem;padding:9px 10px;min-height:40px}
  .faq-atalhos a{padding-right:28px}
}
/* keyframes declarado uma única vez mais abaixo */
@media(prefers-reduced-motion:reduce){
}

/* ---------- selos do hero em uma linha ---------- */


/* ---------- hero no celular e tablet: texto menor, foto respirando ---------- */
@media(max-width:1024px){
  .banner-pg--rosto h1{font-size:clamp(1.62rem,4.6vw,2.15rem);line-height:1.12}
  .banner-pg--rosto .banner-pg__sub{
    font-size:clamp(.9rem,1.7vw,1rem);line-height:1.55;max-width:none
  }
  .banner-pg--rosto .olho{font-size:.62rem;letter-spacing:1.6px}
  .banner-pg--hero .banner-pg__acoes{margin-top:20px;gap:10px}
  .banner-pg__assinatura{margin-top:18px;padding-left:12px}
  .banner-pg__assinatura strong{font-size:.98rem}
  .banner-pg__assinatura span{font-size:.6rem}
  /* a foto sobe para a Dra. aparecer inteira */
  .banner-pg--rosto .banner-pg__fundo img{object-position:66% 12% !important}
}
@media(max-width:600px){
  .banner-pg--rosto h1{font-size:clamp(1.5rem,6.4vw,1.95rem)}
  .banner-pg--rosto .banner-pg__sub{font-size:.88rem;max-width:32ch}
  .banner-pg--hero .banner-pg__acoes{flex-direction:row;flex-wrap:wrap}
  /* véu mais forte embaixo, para o texto não competir com a foto */
  .banner-pg--rosto::before{
    background:
      linear-gradient(168deg,
        rgba(45,54,39,.94) 0%,
        rgba(52,62,45,.86) 40%,
        rgba(60,70,52,.66) 70%,
        rgba(74,84,63,.42) 100%) !important
  }
}

/* ---------- emenda entre o hero e a próxima seção ----------
   O arco tinha bottom:-1px, e em telas com escala fracionária sobrava uma
   linha de um pixel. Estendendo além da borda o problema não existe. */
.banner-pg::after{bottom:-2px;height:76px}
.banner-pg:not(.banner-pg--hero)::after{height:60px}
.banner-pg{margin-bottom:0}
/* o arco da base do banner já cria o respiro; a seção segue o padrão */

/* ---------- cards do mega-menu: altura igual, texto em 2 linhas ---------- */
.submenu-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.submenu-itens a{
  display:flex;flex-direction:column;justify-content:center;
  min-height:62px;padding:11px 14px;border-radius:12px;
  border:1px solid transparent;transition:background .18s,border-color .18s
}
.submenu-itens a:hover{background:var(--bege-claro);border-color:rgba(184,150,95,.28)}
.submenu-itens strong{
  /* Título e subtítulo somam no máximo 2 linhas. Uso line-clamp em vez de
     nowrap: cortar no meio da palavra com reticências fica pior que quebrar. */
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.84rem;font-weight:600;color:var(--verde-profundo);
  line-height:1.3;margin-bottom:3px
}
.submenu-itens small{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.71rem;color:var(--texto-secundario);line-height:1.3
}
@media(max-width:760px){
  .submenu-grade{grid-template-columns:1fr}
  .submenu-itens a{min-height:0;padding:11px 8px}
  .submenu-itens strong,.submenu-itens small{white-space:normal}
}

/* ---------- tipografia proporcional no celular ----------
   O corpo usava tamanho fixo, então no celular a fonte ficava relativamente
   maior que no desktop. Aqui ela acompanha a largura da tela. */
/* O corte era em 760px e o tablet tem 768: a fonte ficava igual à do
   desktop justamente na tela onde o texto parece maior. */
@media(max-width:1024px){
  body{font-size:.96rem}
  .lead{font-size:1.04rem !important}
  h2{font-size:clamp(1.55rem,3.4vw,2rem)}
}
@media(max-width:760px){
  body{font-size:.94rem}
  .lead{font-size:1rem !important;line-height:1.55}
  h2{font-size:clamp(1.45rem,5.4vw,1.85rem)}
  h3{font-size:clamp(1.05rem,4vw,1.2rem)}
  .titulo-sec span:not(.linha){font-size:.66rem;letter-spacing:1.8px}
  .olho{font-size:.62rem;letter-spacing:1.5px}
}
@media(max-width:420px){
  body{font-size:.9rem}
}

/* ---------- foto de "A clínica" ----------
   Regra única para todas as telas: mesma proporção, mesmo ponto de foco e
   mesmo acabamento. Antes existiam dois blocos concorrentes e o resultado
   mudava conforme a largura. */
.foto-solo{margin:0;position:relative}
.foto-solo img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:52% 44%;
  border-radius:24px;
  box-shadow:0 22px 46px rgba(90,72,40,.16);
  -webkit-mask-image:none;mask-image:none
}
@media(max-width:980px){
  .foto-solo img{aspect-ratio:4/3;border-radius:20px}
}
@media(max-width:600px){
  .foto-solo img{aspect-ratio:4/3;border-radius:18px}
}
@media(max-width:980px){
}
@media(max-width:420px){
}
@media(max-width:1180px){
}
@media(max-width:900px){
}
@media(max-width:600px){
}
.faixa-verde--tec h2{line-height:1.14}

/* ---------- "Conheça o espaço": distribuição no tablet ---------- */
@media(max-width:1180px) and (min-width:761px){
  .espaco__topo{grid-template-columns:1fr;gap:14px}
}
@media(max-width:760px){
}

/* ---------- rodapé: endereço clicável para o mapa ---------- */
.rodape-endereco{
  display:flex;align-items:flex-start;gap:9px;margin-top:1em;
  font-size:.82rem;line-height:1.55;transition:color .2s
}
.rodape-endereco .ico-svg{flex:none;margin-top:3px;color:var(--dourado)}
.rodape-endereco:hover{color:var(--dourado-claro)}
.rodape-endereco:hover .ico-svg{color:var(--dourado-claro)}
@media(max-width:1180px){}
@media(max-width:900px){
}
@media(max-width:600px){
}

@media(max-width:980px){
}
@media(max-width:600px){
}

/* ============ BANNERS: altura, entrelinhas e degradê padronizados ============ */

/* ---------- 25 · mesma altura em toda página interna ---------- */
.banner-pg:not(.banner-pg--hero){min-height:0}
@media(max-width:1024px){
}
@media(max-width:600px){
}

/* ---------- 26 · entrelinhas dos textos de banner ---------- */
.banner-pg h1{line-height:1.1;margin-bottom:.32em}
.banner-pg .script{line-height:1.15;display:block}
.banner-pg__sub{line-height:1.62;margin-bottom:0}
.banner-pg .olho{line-height:1.4;margin-bottom:.7em}
.banner-pg .migalhas{line-height:1.5;margin-bottom:1.1em}
@media(max-width:600px){
  .banner-pg h1{line-height:1.14}
  .banner-pg__sub{line-height:1.55}
}

/* ---------- 28 · degradê único para todos os banners ----------
   Antes havia três variações concorrentes (padrão, leve, nítido) com
   ângulos e paradas diferentes. Agora existe uma curva só, e a variação
   é apenas de intensidade. */
.banner-pg::before{
  background:linear-gradient(100deg,
    rgba(45,54,39,.92) 0%,
    rgba(52,62,45,.80) 24%,
    rgba(60,70,52,.52) 44%,
    rgba(74,84,63,.24) 64%,
    rgba(93,102,83,.06) 82%,
    rgba(93,102,83,0) 100%) !important
}
.banner-pg--leve::before{
  background:linear-gradient(100deg,
    rgba(45,54,39,.88) 0%,
    rgba(52,62,45,.74) 24%,
    rgba(60,70,52,.44) 44%,
    rgba(74,84,63,.18) 64%,
    rgba(93,102,83,.04) 82%,
    rgba(93,102,83,0) 100%) !important
}
.banner-pg--nitido::before{
  background:linear-gradient(100deg,
    rgba(45,54,39,.86) 0%,
    rgba(52,62,45,.70) 22%,
    rgba(60,70,52,.38) 42%,
    rgba(74,84,63,.14) 62%,
    rgba(93,102,83,.02) 80%,
    rgba(93,102,83,0) 100%) !important
}
/* no celular o degradê vira vertical, porque o texto ocupa a largura toda */
@media(max-width:900px){
  .banner-pg::before,
  .banner-pg--leve::before,
  .banner-pg--nitido::before{
    background:linear-gradient(172deg,
      rgba(45,54,39,.92) 0%,
      rgba(52,62,45,.82) 42%,
      rgba(60,70,52,.60) 72%,
      rgba(74,84,63,.40) 100%) !important
  }
}
@media(max-width:980px){
}
@media(max-width:600px){
}

@media(max-width:980px){
}
@media(max-width:600px){
}

@media(max-width:900px){
}
@media(max-width:420px){
}

/* ============ TOPO NO MOBILE ============
   Logo e hambúrguer com a mesma altura, para o cabeçalho ficar alinhado. */
.menu__marca{display:none}
@media(max-width:1024px){
  .topo-in{align-items:center}
  .marca img{height:46px;width:auto;max-width:none}
}
@media(max-width:760px){
  .marca img{height:44px}
  .abrir-menu{width:44px;height:44px;padding:0}
  .topo{padding:10px 0}
  /* logo dentro do painel do menu */
  .menu__marca{
    display:block;padding:0 0 22px;margin-bottom:6px;
    border-bottom:1px solid rgba(184,150,95,.18)
  }
  .menu__marca img{width:104px;height:auto;display:block}
  .menu.aberto{padding-top:26px}
}

@media(max-width:1024px){


}

/* altura previsível em qualquer aparelho e botões com largura própria */
@media(max-width:1024px){
  .banner-pg--hero{min-height:0}
  .banner-pg--hero .banner-pg__acoes{
    display:flex;flex-wrap:wrap;gap:10px;margin-top:22px
  }
}
@media(max-width:600px){
  .banner-pg--rosto h1{font-size:clamp(1.45rem,5.8vw,1.8rem)}
  .banner-pg--rosto .banner-pg__sub{font-size:.88rem;max-width:none;line-height:1.55}
}
@media(max-width:380px){
}

/* o respiro usa o botão como referência: mesma distância abaixo dele e
   até a próxima seção */
.trat-acoes{margin-top:26px;margin-bottom:0}

@media(max-width:900px){
}
@media(max-width:600px){
}

/* ---------- "A clínica" com o mesmo relevo do "Diferencial" ---------- */
.foto-solo{position:relative}
.foto-solo img{
  border-radius:26px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(184,150,95,.28),
    0 6px 14px rgba(90,72,40,.10),
    0 22px 40px rgba(90,72,40,.18),
    0 40px 80px rgba(63,73,55,.14)
}
.foto-solo::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;z-index:-1;
  border-radius:26px;
  background:linear-gradient(135deg,rgba(211,184,146,.34),rgba(93,102,83,.18))
}

/* ---------- "Ver como chegar": sem seta, mais afastado ---------- */
/* botão do "Conheça o espaço": afastado do mosaico e com a mesma
   distância até a próxima seção, em todos os formatos */
.espaco__cta{margin:38px 0 0;display:flex;justify-content:center}
@media(max-width:900px){.espaco__cta{margin-top:28px}}
@media(max-width:600px){.espaco__cta{margin-top:24px}}

/* ---------- imagem +25% só no desktop ---------- */
@media(min-width:1025px){
}

@media(max-width:980px){
}
@media(max-width:600px){
}

/* ---------- rodapé no celular: uma coluna por linha ---------- */
@media(max-width:600px){
}

/* ---------- botão de avaliação no Google ---------- */
/* regra unificada mais abaixo */
.btn-google:hover{
  transform:translateY(-2px);box-shadow:0 18px 38px rgba(90,72,40,.18);
  border-color:rgba(211,184,146,.6)
}
.btn-google svg{flex:none}
.btn-google strong{
  display:block;font-size:.94rem;color:var(--verde-profundo);font-weight:600;line-height:1.3
}
.btn-google small{
  display:block;font-size:.78rem;color:var(--dourado-escuro);font-weight:600;margin-top:3px
}
@media(max-width:600px){
  .btn-google{padding:14px 18px;gap:12px}
  .btn-google strong{font-size:.88rem}
}

/* ============ HERO NO MOBILE — reescrita ============
   Medido por emulação de iPhone 15 Pro, Galaxy S24 e iPad.
   Problemas corrigidos:
   1. o subtítulo tinha max-width de 180px e quebrava em 6 linhas;
   2. o véu vertical a 92% cobria a Dra. quase inteira;
   3. o scale(1.14) do paralaxe cortava 27px de cada lado sem servir a nada.
*/
@media(max-width:1024px){
  .banner-pg--rosto .banner-pg__sub{max-width:none}

  /* paralaxe desligado: em tela pequena só cortava a foto */
  .banner-pg__fundo--paralaxe img{transform:none !important;scale:1 !important}

  /* a foto ocupa a metade de baixo e o texto a de cima:
     assim a Dra. aparece inteira e o texto fica sobre área limpa */
  .banner-pg--rosto .banner-pg__fundo img{object-position:72% 6% !important}

  /* véu diagonal, forte só onde há texto */
  .banner-pg--rosto::before{
    background:linear-gradient(158deg,
      rgba(45,54,39,.90) 0%,
      rgba(48,58,42,.84) 26%,
      rgba(56,66,48,.62) 48%,
      rgba(70,80,60,.34) 68%,
      rgba(88,98,78,.14) 86%,
      rgba(93,102,83,.06) 100%) !important
  }
}
@media(max-width:600px){
  .banner-pg--rosto .banner-pg__sub{font-size:.9rem;line-height:1.58}
  .banner-pg--rosto h1{font-size:clamp(1.55rem,6.4vw,1.95rem)}
  .banner-pg--rosto .banner-pg__fundo img{object-position:74% 4% !important}
}

/* ---------- topo mais baixo ---------- */
@media(max-width:1024px){
  .topo{padding:8px 0}
  .topo-in{min-height:0}
  .marca img{height:40px}
  .abrir-menu{width:40px;height:40px}
}
@media(max-width:600px){
  .topo{padding:7px 0}
  .marca img{height:36px}
  .abrir-menu{width:38px;height:38px}
}

/* ---------- hero mobile: ajuste fino após conferir por emulação ----------
   A assinatura caía sobre o rosto da Dra. e a base ficava clara demais para
   o texto branco. O véu ganha reforço na base e a foto desce um pouco. */
@media(max-width:1024px){
  .banner-pg--rosto .banner-pg__fundo img{object-position:76% 2% !important}
  .banner-pg--rosto::before{
    background:
      linear-gradient(0deg, rgba(45,54,39,.80) 0%, rgba(45,54,39,.32) 22%, transparent 42%),
      linear-gradient(158deg,
        rgba(45,54,39,.90) 0%,
        rgba(48,58,42,.82) 24%,
        rgba(56,66,48,.58) 46%,
        rgba(70,80,60,.30) 66%,
        rgba(88,98,78,.12) 86%,
        rgba(93,102,83,.05) 100%) !important
  }
  /* assinatura mais compacta e colada na base */
  .banner-pg__assinatura{margin-top:16px;padding-left:12px}
  .banner-pg__assinatura strong{font-size:.94rem}
  .banner-pg__assinatura span{font-size:.58rem;letter-spacing:1px}

}

/* ============ AJUSTES DE MOBILE E TABLET ============ */

/* ---------- "Por que a B.blanc": centralizado só no celular ---------- */
@media(max-width:760px){
  .grade-dif .cartao{text-align:center;align-items:center}
  .grade-dif .cartao .ico{margin-left:auto;margin-right:auto}
  .grade-dif .cartao h3{text-align:center}
  .grade-dif .cartao p{text-align:center;hyphens:none}
  .grade-dif .cartao::after{left:50%;right:auto;transform:translateX(-50%)}
}

/* ---------- "Alta performance": margens justificadas no mobile ---------- */
@media(max-width:1024px){
}

/* ---------- "Conheça o espaço": botão isolado e equidistante ---------- */
.espaco__cta{margin:40px 0 0;display:flex;justify-content:center}
@media(max-width:900px){.espaco__cta{margin-top:30px}}
@media(max-width:900px){
}

/* ---------- banners no mobile: proporção entre texto e altura ---------- */
@media(max-width:1024px){
  .banner-pg:not(.banner-pg--hero) h1{
    font-size:clamp(1.5rem,5.2vw,2rem);line-height:1.12;margin-bottom:.3em
  }
  .banner-pg:not(.banner-pg--hero) .banner-pg__sub{
    font-size:.9rem;line-height:1.55;max-width:none
  }
  .banner-pg:not(.banner-pg--hero) .migalhas{font-size:.72rem;margin-bottom:.9em}
  .banner-pg:not(.banner-pg--hero) .olho{font-size:.6rem;margin-bottom:.55em}
}
@media(max-width:600px){
  .banner-pg:not(.banner-pg--hero) h1{font-size:clamp(1.4rem,6vw,1.8rem)}
  .banner-pg:not(.banner-pg--hero) .banner-pg__sub{font-size:.86rem}
}

@media(max-width:1024px){
}
@media(max-width:600px){
}

/* ============================================================
   RODAPÉ — bloco único
   Substitui 40 declarações espalhadas entre as linhas 433 e 2893.
   ============================================================ */

@media(max-width:1180px){
}
@media(max-width:900px){
}
@media(max-width:600px){
  /* uma coluna por linha: Tratamentos e Especialidades não dividem faixa */
}
.objeto-3d__piso{
  position:absolute;z-index:1;left:50%;bottom:8%;transform:translateX(-50%);
  width:38%;height:26px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(63,73,55,.22) 0%, rgba(63,73,55,.10) 45%, transparent 72%);
  filter:blur(10px)
}
.objeto-3d__img{
  position:relative;z-index:2;
  width:auto;max-width:56%;max-height:230px;height:auto;object-fit:contain;
  transform:translateZ(0) rotateX(2deg) rotateY(-4deg);
  filter:
    drop-shadow(0 3px 3px rgba(63,73,55,.18))
    drop-shadow(0 14px 18px rgba(63,73,55,.16))
    drop-shadow(0 40px 60px rgba(63,73,55,.20));
  transition:transform .6s cubic-bezier(.2,.7,.3,1)
}
/* variante da ozonioterapia: objeto encostado à esquerda */
.objeto-3d--esquerda{justify-content:flex-start}
.objeto-3d--esquerda .objeto-3d__img{max-width:62%}
.objeto-3d--esquerda .objeto-3d__piso{left:44%}

/* desktop: 25% maior, conforme pedido */
@media(min-width:1025px){
  .objeto-3d__img{max-width:70%;max-height:288px}
  .objeto-3d--esquerda .objeto-3d__img{max-width:78%}
}
@media(max-width:980px){
  .objeto-3d__img{max-width:46%;max-height:186px}
  .objeto-3d--esquerda{justify-content:center}
  .objeto-3d--esquerda .objeto-3d__img{max-width:50%}
  .objeto-3d--esquerda .objeto-3d__piso{left:50%}
}
@media(max-width:600px){
  .objeto-3d__img{max-width:52%;max-height:160px}
}
@media(max-width:900px){
}
@media(max-width:600px){
}

@media(max-width:980px){
}
@media(max-width:600px){
}

@media(max-width:980px){
}
@media(max-width:600px){
}

/* ============================================================
   BLOG — card do artigo em destaque, bloco único
   Foto à esquerda ocupando a altura toda, texto à direita com
   selo de "mais recente" e data em destaque.
   ============================================================ */
.post-destaque{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:stretch;
  border-radius:26px;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 90% at 96% 40%, rgba(232,213,181,.34), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62));
  border:1px solid var(--borda-suave);
  box-shadow:0 24px 52px rgba(90,72,40,.14);
  transition:transform .26s,box-shadow .26s
}
.post-destaque:hover{transform:translateY(-3px);box-shadow:0 30px 62px rgba(90,72,40,.2)}
.post-destaque__foto{display:block;position:relative;overflow:hidden;min-height:340px}
.post-destaque__foto img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)
}
.post-destaque:hover .post-destaque__foto img{transform:scale(1.04)}
.post-destaque__foto::after{
  content:"Mais recente";position:absolute;top:18px;left:18px;
  background:linear-gradient(135deg,var(--dourado-escuro),var(--dourado));
  color:var(--verde-profundo);font-size:.62rem;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;
  padding:7px 15px;border-radius:999px;
  box-shadow:0 8px 20px rgba(184,150,95,.34)
}
.post-destaque__texto{
  display:flex;flex-direction:column;justify-content:center;padding:44px 44px 44px 40px
}
.post-destaque__texto time{
  display:block;font-size:.68rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--dourado-escuro);font-weight:600;margin-bottom:14px
}
.post-destaque__texto h2{
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.2;margin:0 0 .5em
}
.post-destaque__texto h2 a{color:var(--verde-profundo)}
.post-destaque__texto h2 a:hover{color:var(--dourado-escuro)}
.post-destaque__texto p{
  font-size:.98rem;line-height:1.68;color:var(--texto-secundario);margin:0 0 1.6em;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto
}

@media(max-width:900px){
  .post-destaque{grid-template-columns:1fr}
  .post-destaque__foto{min-height:0;aspect-ratio:16/9}
  .post-destaque__texto{padding:28px 24px 30px}
  .post-destaque__texto h2{font-size:clamp(1.3rem,4.6vw,1.7rem)}
  .post-destaque__texto p{font-size:.9rem}
}
@media(max-width:600px){
  .post-destaque{border-radius:20px}
  .post-destaque__texto{padding:22px 20px 24px}
  .post-destaque__foto::after{top:14px;left:14px;font-size:.58rem;padding:6px 12px}
}

/* ---------- altura idêntica para todo banner interno ----------
   Medido por emulação: variavam até 42px entre páginas, porque a altura
   vinha do conteúdo (número de linhas do subtítulo, presença de selos). */
.banner-pg:not(.banner-pg--hero){min-height:466px;display:flex;align-items:center}
@media(max-width:1024px){
  .banner-pg:not(.banner-pg--hero){min-height:392px}
}
@media(max-width:600px){
  .banner-pg:not(.banner-pg--hero){min-height:372px}
}

@media(max-width:900px){
}
/* keyframes declarado uma única vez mais abaixo */
@media(max-width:900px){
}
@media(max-width:420px){
}

/* ---------------- BANNER: conteúdo, arco e selos ----------------
   O respiro é dado por PADDING, nunca por altura fixa: assim a caixa
   cresce com o conteúdo e a distância do texto às bordas é sempre a
   mesma, em qualquer página. O padding de baixo soma a altura do arco,
   para o texto nunca ficar atrás da curva. */
:root{--arco:72px}
.banner-pg::after{
  content:"";position:absolute;left:-3%;right:-3%;bottom:-2px;z-index:1;
  height:var(--arco);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(ellipse 60% 45% at 12% 6%, rgba(226,196,140,.30), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 20%, rgba(216,186,130,.22), transparent 62%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(210,180,124,.20), transparent 60%),
    linear-gradient(165deg,#FAF8F3 0%,#F7F2E8 45%,#F3EEE5 100%);
  background-attachment:fixed;background-size:cover
}
.banner-pg:not(.banner-pg--hero) .banner-pg__sub{max-width:490px}
.banner-pg:not(.banner-pg--hero) .migalhas{max-width:none}

@media(max-width:1024px){
  :root{--arco:58px}
}
@media(max-width:600px){
  :root{--arco:46px}
}
.trat-titulo{grid-area:titulo;align-self:end;padding-bottom:10px}
.trat-titulo h2{margin:0}
.trat-texto{grid-area:texto;align-self:start}
.trat-figura{grid-area:figura;margin:0;position:relative}
.trat-acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;margin-bottom:0}

@media(max-width:900px){
  .trat-titulo{padding-bottom:0}
  .trat-acoes{margin-top:24px}
}
@media(max-width:600px){
  .trat-acoes{width:100%}
}

/* ---------------- fechamento de página ----------------
   Faixa clara, sem quadro verde: um título curto, uma linha de texto e
   um botão. É o único ponto de conversão no corpo de cada página. */
.fechamento{
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
  padding:34px 40px;border-radius:22px;
  background:
    radial-gradient(ellipse 55% 85% at 92% 40%, rgba(232,213,181,.4), transparent 64%),
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.52));
  border:1px solid var(--borda-suave);
  box-shadow:0 18px 40px rgba(90,72,40,.1)
}
.fechamento h2{margin:0 0 .3em;font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.24}
.fechamento p{margin:0;font-size:.95rem;color:var(--texto-secundario);max-width:46ch}
@media(max-width:760px){
  .fechamento{flex-direction:column;align-items:flex-start;gap:20px;padding:26px 22px}
}

/* ---------------- correções pontuais do diagnóstico ---------------- */

/* cards justificados; os diferenciais centralizam só no celular */
.cartao p{
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:5 3 2
}
@media(max-width:1024px){
  /* "Por que a B.blanc" centraliza; os demais cartões seguem justificados */
  /* substituída por .grade-dif > .cartao, mais restrita */
}

/* legenda da Dra. sempre no canto direito da foto */
@media(max-width:980px){}
@media(max-width:600px){}

/* nenhum texto encosta na borda da tela */
@media(max-width:900px){
}

/* ############################################################
   BLOCOS ÚNICOS — não acrescentar declaração destes seletores
   em nenhum outro ponto do arquivo. Rodar antes:
     grep -n "\.nome-do-seletor" assets/bblanc.css
   ############################################################ */

/* ======================= BOTÕES ======================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:auto;flex:0 0 auto;white-space:nowrap;line-height:1;
  height:48px;padding:0 28px;
  font-family:var(--sans);font-weight:600;font-size:.9rem;letter-spacing:.4px;
  border-radius:999px;border:1px solid transparent;cursor:pointer;text-align:center;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--dourado-escuro),var(--dourado));
  color:var(--verde-profundo);
  box-shadow:0 10px 26px rgba(184,150,95,.28);
  transition:transform .2s,box-shadow .26s,background .25s,color .25s,border-color .25s
}
.btn::before{
  content:"";position:absolute;top:0;left:0;right:0;height:52%;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(184,150,95,.38)}
.btn .ico-svg{position:relative;z-index:1}
.btn.vazado{background:transparent;border-color:rgba(184,150,95,.5);
  color:var(--verde-profundo);box-shadow:none}
.btn.vazado:hover{background:rgba(184,150,95,.1);border-color:var(--dourado)}
.btn.claro{background:#fff;color:var(--verde-profundo);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.btn.pequeno{height:42px;padding:0 20px;font-size:.84rem}
.banner-pg .btn.vazado{border-color:rgba(255,255,255,.5);color:#fff}
.banner-pg .btn.vazado:hover{background:rgba(255,255,255,.12);border-color:#fff}

.btn-topo{
  margin-left:10px;height:44px;padding:0 26px;font-size:.86rem;letter-spacing:.6px;
  border-radius:999px;position:relative;overflow:hidden;border:0;
  background:linear-gradient(120deg,var(--dourado-escuro) 0%,var(--dourado) 42%,var(--dourado-claro) 58%,var(--dourado) 100%);
  background-size:220% 100%;color:var(--verde-profundo);
  box-shadow:0 4px 14px rgba(184,150,95,.34), inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-position .5s ease,box-shadow .28s,transform .2s
}
.btn-topo::before{display:none}
.btn-topo::after,
.menu a.btn-topo::after{
  content:'';position:absolute;top:0;bottom:auto;left:-60%;right:auto;
  width:45%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  animation:btn-brilho 4.5s ease-in-out infinite
}
@keyframes btn-brilho{0%,60%{left:-60%}80%,100%{left:130%}}
.btn-topo > *{position:relative;z-index:1}
.btn-topo:hover{background-position:100% 0;transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(184,150,95,.46), inset 0 1px 0 rgba(255,255,255,.6)}

@media(max-width:1024px){
  .btn{height:44px;padding:0 22px;font-size:.86rem}
  .btn.pequeno{height:40px;padding:0 18px}
  .btn-topo{height:40px;padding:0 20px;font-size:.8rem;margin-left:0}
}
@media(max-width:600px){
  .btn{height:42px;padding:0 18px;font-size:.83rem}
  .btn.pequeno{height:38px}
  .btn-topo{height:38px;padding:0 17px;font-size:.78rem}
}

/* =============== BANNER: conteúdo, arco e selos ===============
   O respiro vem de PADDING, nunca de altura fixa. O padding de baixo
   soma a altura do arco, para o texto nunca ficar atrás da curva. */
:root{--arco:74px}
.banner-pg__conteudo{
  position:relative;z-index:2;
  width:min(1180px,calc(100% - 40px));margin:0 auto;text-align:left;
  padding-top:46px;
  padding-bottom:calc(var(--arco) + 34px)
}
.banner-pg--hero .banner-pg__conteudo{max-width:none;padding-top:56px}
.banner-pg:not(.banner-pg--hero) .banner-pg__conteudo > *{max-width:560px;margin-left:0}
/* os selos precisam da largura toda: três especialidades não cabem em 560px
   e a terceira caía para a segunda linha */
.banner-pg:not(.banner-pg--hero) .banner-selos{max-width:none}
.banner-pg:not(.banner-pg--hero) .banner-pg__sub{max-width:490px}
.banner-pg:not(.banner-pg--hero) .migalhas{max-width:none}

.banner-selos{
  display:flex;flex-wrap:nowrap;gap:26px;align-items:center;
  margin-top:26px;padding-top:20px;max-width:none;
  border-top:1px solid rgba(232,213,181,.28)
}
.banner-selos span{flex:0 0 auto}
.banner-selos span{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-size:.75rem;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,.82);font-weight:500;line-height:1.4;white-space:nowrap
}

@media(max-width:1024px){
  :root{--arco:58px}
  .banner-pg__conteudo{padding-top:34px;padding-bottom:calc(var(--arco) + 30px)}
  .banner-pg--hero .banner-pg__conteudo{padding-top:38px}
  .banner-pg:not(.banner-pg--hero) .banner-pg__conteudo > *,
  .banner-pg:not(.banner-pg--hero) .banner-pg__sub{max-width:none}
  .banner-selos{flex-direction:column;align-items:flex-start;gap:9px;
    margin-top:18px;padding-top:15px;max-width:none}
  .banner-selos span{font-size:.66rem;letter-spacing:.9px;white-space:normal}
}
@media(max-width:600px){
  :root{--arco:46px}
  .banner-pg__conteudo{padding-top:28px;padding-bottom:calc(var(--arco) + 26px)}
  .banner-pg--hero .banner-pg__conteudo{padding-top:30px}
  .banner-selos{gap:8px;margin-top:15px;padding-top:13px}
}

/* ============ /tratamentos/: bloco, figura e ações ============ */
.trat-bloco{
  position:relative;scroll-margin-top:100px;
  padding-top:64px;padding-bottom:64px
}
.trat-bloco + .trat-bloco::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100% - 40px));height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,150,95,.26) 22%,rgba(184,150,95,.26) 78%,transparent)
}
.trat-bloco.alternado{
  background:linear-gradient(180deg,
    rgba(243,238,229,0) 0%, rgba(243,238,229,.6) 18%,
    rgba(243,238,229,.6) 82%, rgba(243,238,229,0) 100%)
}
.trat-bloco .duas-colunas{
  display:grid;grid-template-columns:1fr 1fr;gap:0 52px;align-items:center;
  grid-template-areas:"titulo figura" "texto figura"
}
.trat-bloco .duas-colunas:has(.ordem1){grid-template-areas:"figura titulo" "figura texto"}
.trat-bloco .lead{font-size:1.06rem}

@media(max-width:900px){
  .trat-bloco{padding-top:48px;padding-bottom:48px}
  .trat-bloco .duas-colunas,
  .trat-bloco .duas-colunas:has(.ordem1){
    grid-template-columns:1fr;grid-template-areas:"titulo" "figura" "texto";gap:16px 0
  }
  .trat-bloco .duas-colunas > *{min-width:0;padding-left:2px;padding-right:2px}
}
@media(max-width:600px){
  .trat-bloco{padding-top:40px;padding-bottom:40px}
}

/* áreas do grid e ações do bloco de tratamento */
.trat-titulo{grid-area:titulo;align-self:end;padding-bottom:10px}
.trat-titulo h2{margin:0}
.trat-texto{grid-area:texto;align-self:start}
.trat-figura{grid-area:figura;margin:0;position:relative}
.trat-acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;margin-bottom:0}
@media(max-width:900px){
  .trat-titulo{padding-bottom:0}
  .trat-acoes{margin-top:24px}
}

/* nenhum ícone ultrapassa a borda da tela */
.ico-svg{max-width:100%;flex:none}
.grade-beneficios .ico-svg,.cartao .ico-svg,.beneficios li .ico-svg{overflow:visible}
@media(max-width:900px){
  .trat-bloco .beneficios li{padding-right:4px}
  .beneficios li::before{left:2px}
}
@media(max-width:900px){}

/* botões nunca esticam além do contêiner */
.trat-acoes .btn,.banner-pg__acoes .btn,.fechamento .btn{max-width:100%}

/* o botão Agendar não aparece no cabeçalho mobile: fica dentro do menu,
   onde tem largura para respirar */
/* No mobile o botão do topo é pequeno demais para o brilho aparecer.
   Some do cabeçalho e reaparece dentro do menu, com largura confortável. */
@media(max-width:1024px){
  .topo-in > .btn-topo{display:none}
  .menu .btn-topo{
    display:inline-flex;align-self:stretch;justify-content:center;
    width:auto;max-width:100%;height:46px;font-size:.88rem;margin:22px 0 0
  }
}

/* cards justificados: só os diferenciais centralizam */
.cartao p{
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:5 3 2
}

/* o svg do sprite não pode criar caixa maior que o ícone */
svg.ico-svg{display:inline-block;overflow:hidden}

/* botões do aviso de cookies na mesma escala dos demais */
.cookies .btn{height:42px}
@media(max-width:600px){.cookies .btn{height:40px}}

@media(max-width:980px){
}
@media(max-width:600px){
}

@media(max-width:980px){
}
@media(max-width:600px){
}

/* ---------- ajustes finais medidos por emulação ----------
   Cards: a regra dos diferenciais estava alcançando todos os cartões
   porque .grade-dif fica dentro de .secao--diferenciais e o seletor
   pegava qualquer .cartao descendente. Aqui a centralização é restrita
   ao próprio bloco de diferenciais. */
.cartao p{
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:5 3 2
}
@media(max-width:1024px){
  .grade-dif > .cartao{text-align:center;align-items:center}
  .grade-dif > .cartao .ico{margin-left:auto;margin-right:auto}
  .grade-dif > .cartao h3{text-align:center}
  .grade-dif > .cartao p{text-align:center;hyphens:none}
}

/* Botão do método: o texto é longo e ocupava quase toda a coluna.
   Duas linhas resolvem sem esticar. */
.acoes-dra .btn,.btn-metodo{max-width:100%}
@media(max-width:600px){
  .acoes-dra{flex-direction:column;align-items:stretch;gap:10px}
  .acoes-dra .btn{width:100%}
}

/* Altura única de botão: o do menu tinha 46 e destoava dos 42 */
@media(max-width:1024px){
  .menu .btn-topo{height:42px}
}

/* ---------- últimos ajustes, medidos por emulação ----------
   Cards: a centralização precisa alcançar .grade-dif mesmo quando ela
   compartilha o elemento com .grade.g4, então o seletor não usa o filho
   direto e sim a própria grade. */
@media(max-width:1024px){
  .grade-dif .cartao{text-align:center;align-items:center}
  .grade-dif .cartao .ico{margin-left:auto;margin-right:auto}
  .grade-dif .cartao h3{text-align:center}
  .grade-dif .cartao p{text-align:center;hyphens:none}
}
/* e os demais cartões continuam justificados */
.grade:not(.grade-dif) .cartao p,
.grade-trat .cartao p{text-align:justify}

/* O botão "Conheça a equipe" tem rótulo longo; no celular ocupa a linha
   inteira de propósito, com o do lado empilhado abaixo. */
@media(max-width:600px){
  .acoes-dra{flex-direction:column;align-items:stretch}
  .acoes-dra .btn{width:100%;max-width:none}
}

/* Respiro igual em toda página interna: quando não há migalhas, o
   conteúdo subia 17px. O espaço passa a ser reservado sempre. */
.banner-pg:not(.banner-pg--hero) .banner-pg__conteudo{padding-top:63px}
@media(max-width:1024px){
  .banner-pg:not(.banner-pg--hero) .banner-pg__conteudo{padding-top:46px}
}
@media(max-width:600px){
  .banner-pg:not(.banner-pg--hero) .banner-pg__conteudo{padding-top:38px}
}
.banner-pg--hero .banner-pg__conteudo{padding-top:63px}
@media(max-width:1024px){.banner-pg--hero .banner-pg__conteudo{padding-top:46px}}
@media(max-width:600px){.banner-pg--hero .banner-pg__conteudo{padding-top:38px}}

/* Respiro idêntico: o conteúdo alinha ao TOPO, não ao centro. Com
   align-items:center o respiro dependia da altura total do banner, que
   varia com o tamanho do texto — daí 63px numa página e 119px noutra. */
.banner-pg{display:block}
.banner-pg:not(.banner-pg--hero){min-height:0}

/* ============ OBJETO RECORTADO — bloco único ============ */
.objeto-3d{
  margin:0;position:relative;display:flex;align-items:center;justify-content:center;
  min-height:190px;perspective:1200px
}
.objeto-3d::before{
  content:"";position:absolute;z-index:0;inset:16% 18% 16% 18%;
  background:radial-gradient(ellipse 62% 58% at 52% 46%, rgba(232,213,181,.5), transparent 68%);
  filter:blur(18px)
}
.objeto-3d__piso{
  position:absolute;z-index:1;left:50%;bottom:8%;transform:translateX(-50%);
  width:38%;height:26px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(63,73,55,.22) 0%, rgba(63,73,55,.10) 45%, transparent 72%);
  filter:blur(10px)
}
.objeto-3d__img{
  position:relative;z-index:2;width:auto;max-width:56%;max-height:230px;height:auto;
  object-fit:contain;transform:translateZ(0) rotateX(2deg) rotateY(-4deg);
  filter:drop-shadow(0 3px 3px rgba(63,73,55,.18))
         drop-shadow(0 14px 18px rgba(63,73,55,.16))
         drop-shadow(0 40px 60px rgba(63,73,55,.20));
  transition:transform .6s cubic-bezier(.2,.7,.3,1)
}
.objeto-3d:hover .objeto-3d__img{transform:translateZ(0) rotateX(0) rotateY(-1deg) scale(1.02)}
.objeto-3d--esquerda{justify-content:flex-start}
.objeto-3d--esquerda .objeto-3d__img{max-width:62%}
.objeto-3d--esquerda .objeto-3d__piso{left:44%}
@media(min-width:1025px){
  .objeto-3d{min-height:240px}
  .objeto-3d__img{max-width:70%;max-height:288px}
  .objeto-3d--esquerda .objeto-3d__img{max-width:78%}
}
@media(max-width:980px){
  .objeto-3d{min-height:150px}
  .objeto-3d__img{max-width:46%;max-height:186px}
  .objeto-3d--esquerda{justify-content:center}
  .objeto-3d--esquerda .objeto-3d__img{max-width:50%}
  .objeto-3d--esquerda .objeto-3d__piso{left:50%}
}
@media(max-width:600px){
  .objeto-3d{min-height:130px}
  .objeto-3d__img{max-width:52%;max-height:160px}
}
.trat-figura--objeto{display:flex;align-items:center;justify-content:center;height:250px;position:relative}
.trat-figura--objeto::before{
  content:"";position:absolute;z-index:0;inset:10% 6% 10% 6%;
  background:radial-gradient(ellipse 62% 58% at 52% 46%, rgba(232,213,181,.5), transparent 68%);
  filter:blur(18px)
}
.trat-figura--objeto .objeto-3d__img{max-width:78%;max-height:270px}
.trat-figura--objeto .objeto-3d__piso{width:46%;height:22px;bottom:14px}
@media(max-width:900px){
  .trat-figura--objeto{height:170px}
  .trat-figura--objeto .objeto-3d__img{max-width:56%;max-height:190px}
}
@media(max-width:600px){
  .trat-figura--objeto{height:150px}
  .trat-figura--objeto .objeto-3d__img{max-width:62%;max-height:168px}
}
@media(max-width:980px){
}
@media(max-width:600px){
}
@media(max-width:1180px){}
@media(max-width:900px){}
@media(max-width:600px){}

/* ============ QUEM LIDERA — bloco único ============
   No mobile a foto entra entre o primeiro e o segundo parágrafo. */
@media(max-width:980px){
  /* rótulo, nome, primeiro parágrafo, FOTO, restante do texto */
}
@media(max-width:600px){
}
.faq-duas__intro{align-self:center}
@media(max-width:900px){
}
@media(max-width:900px){
}
.depo-nav--ant{left:0}
.depo-nav--prox{right:0}
@media(max-width:900px){
  .depo-nav--ant{left:calc(50% - 50px)}
  .depo-nav--prox{right:calc(50% - 50px)}
}

/* ############################################################
   AJUSTES DA REVISÃO VISUAL — blocos únicos
   ############################################################ */

/* ---------------- espaçamento entre seções ----------------
   Escala mais curta que a anterior, e a mesma em todo o site. */
.secao{padding:48px 0}
.secao.compacta{padding:34px 0}
@media(max-width:1180px){
  .secao{padding:42px 0}
  .secao.compacta{padding:30px 0}
}
@media(max-width:900px){
  .secao{padding:36px 0}
  .secao.compacta{padding:26px 0}
}
@media(max-width:600px){
  .secao{padding:30px 0}
  .secao.compacta{padding:22px 0}
}

/* ---------------- HERO no celular ----------------
   O texto ocupa a faixa da esquerda e a foto desloca para que o rosto
   caia na metade direita, livre de qualquer texto por cima. */
@media(max-width:900px){
  .banner-pg--rosto .banner-pg__fundo img{object-position:88% 6% !important}
  .banner-pg--hero .banner-pg__conteudo > *{max-width:60%}
  .banner-pg--hero .banner-pg__acoes{max-width:none}
  .banner-pg--rosto::before{
    background:
      linear-gradient(0deg, rgba(45,54,39,.78) 0%, rgba(45,54,39,.28) 20%, transparent 40%),
      linear-gradient(96deg,
        rgba(45,54,39,.93) 0%,
        rgba(48,58,42,.88) 30%,
        rgba(56,66,48,.62) 52%,
        rgba(70,80,60,.26) 70%,
        rgba(88,98,78,.08) 88%,
        rgba(93,102,83,0) 100%) !important
  }
}
@media(max-width:600px){
  .banner-pg--rosto .banner-pg__fundo img{object-position:92% 4% !important}
  .banner-pg--hero .banner-pg__conteudo > *{max-width:66%}
  .banner-pg--rosto h1{font-size:clamp(1.4rem,5.6vw,1.75rem)}
  .banner-pg--rosto .banner-pg__sub{font-size:.83rem;line-height:1.5}
  .banner-pg--hero .banner-pg__acoes{flex-direction:column;align-items:flex-start;gap:9px}
  .banner-pg--hero .banner-pg__acoes .btn{width:auto}
}

/* ---------------- carrossel de depoimentos ----------------
   As setas ficam ao lado do card, fora dele, em todos os formatos. */
.carrossel{position:relative;padding:0 62px}
.carrossel__seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.8));
  border:1px solid var(--borda-suave);
  box-shadow:0 10px 24px rgba(90,72,40,.16);
  transition:transform .2s,box-shadow .2s,border-color .2s
}
.carrossel__seta::after{
  content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-top:2px solid var(--verde-profundo);border-right:2px solid var(--verde-profundo)
}
.carrossel__seta.ant{left:0}
.carrossel__seta.ant::after{transform:translate(-35%,-50%) rotate(-135deg)}
.carrossel__seta.prox{right:0}
.carrossel__seta.prox::after{transform:translate(-65%,-50%) rotate(45deg)}
.carrossel__seta:hover{
  transform:translateY(-50%) scale(1.07);
  box-shadow:0 14px 30px rgba(90,72,40,.22);border-color:rgba(211,184,146,.7)
}
.carrossel__pontos{display:flex;justify-content:center;gap:9px;margin-top:22px}
.carrossel__pontos button{
  width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(184,150,95,.32);transition:width .25s,background .25s
}
.carrossel__pontos button.on{width:26px;border-radius:99px;background:var(--dourado-escuro)}
@media(max-width:760px){
  .carrossel{padding:0 46px}
  .carrossel__seta{width:38px;height:38px}
}
@media(max-width:420px){
  .carrossel{padding:0 40px}
  .carrossel__seta{width:34px;height:34px}
}

/* ---------------- "Tire suas dúvidas": duas colunas ----------------
   A coluna da esquerda centraliza no eixo vertical em relação à lista. */
.faq-duas{
  display:grid;grid-template-columns:.66fr 1.34fr;gap:52px;align-items:center
}
.faq-duas__intro{align-self:center}
.faq-duas__intro h2{margin-top:0}
.faq-duas .faq{max-width:none;width:100%;margin:0}
@media(max-width:900px){
  .faq-duas{grid-template-columns:1fr;gap:24px;align-items:start}
}

/* ---------------- BENEFÍCIOS: 2 colunas de 3, sem destaque ---------------- */
.lista-benef{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 56px
}
.lista-benef li{
  position:relative;padding:18px 0 18px 26px;min-width:0;
  font-size:1.02rem;line-height:1.7;color:var(--texto-principal);
  border-bottom:1px solid rgba(184,150,95,.22);
  text-align:left;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word
}
.lista-benef li::before{
  content:"";position:absolute;left:0;top:24px;bottom:24px;width:2px;
  background:linear-gradient(180deg,var(--dourado),rgba(211,184,146,.28))
}
/* o último de cada coluna não leva linha */
.lista-benef li:nth-child(3n){border-bottom:0}
@media(max-width:900px){
  .lista-benef{grid-template-columns:minmax(0,1fr)}
  .lista-benef li{font-size:.96rem;padding:15px 0 15px 22px;border-bottom:1px solid rgba(184,150,95,.22)}
  .lista-benef li::before{top:20px;bottom:20px}
  .lista-benef li:last-child{border-bottom:0}
}

/* ---------------- rodapé no celular: sanfona ---------------- */
@media(max-width:1180px){
}
@media(max-width:600px){
}

/* ---------------- "Quem lidera a clínica" ----------------
   Desktop: foto à esquerda, cabeçalho e texto à direita.
   Celular e tablet: rótulo, nome, 1º parágrafo, FOTO, restante do texto. */
@media(max-width:980px){
  /* a foto entra entre o primeiro e o segundo parágrafo */
}
@media(max-width:600px){
}

/* ---------------- paralaxe em todos os banners ----------------
   O mesmo efeito da hero: o fundo desloca a 28% da velocidade da rolagem. */
/* o deslocamento vem da variável --paralaxe, definida pelo site.js */
@media(max-width:900px){
  /* no celular o paralaxe só corta a foto e não se percebe */
  .banner-pg__fundo--paralaxe img{transform:none !important}
}
@media(prefers-reduced-motion:reduce){
  .banner-pg__fundo--paralaxe img{transform:none !important}
}

/* ---------------- objeto mais alto no celular em 4 tratamentos ----------------
   Medido: nestes a peça ficava baixa demais e sumia na dobra. */
@media(max-width:900px){
  .pg-aparelho-invisivel .objeto-3d,
  .pg-endodontia .objeto-3d,
  .pg-lentes-de-contato-dental .objeto-3d,
  .pg-clinica-geral .objeto-3d{align-items:flex-start}
  .pg-aparelho-invisivel .objeto-3d__img,
  .pg-endodontia .objeto-3d__img,
  .pg-lentes-de-contato-dental .objeto-3d__img,
  .pg-clinica-geral .objeto-3d__img{margin-top:-14px}
  .pg-aparelho-invisivel .objeto-3d__piso,
  .pg-endodontia .objeto-3d__piso,
  .pg-lentes-de-contato-dental .objeto-3d__piso,
  .pg-clinica-geral .objeto-3d__piso{bottom:14%}
}

/* ---------------- /contato/: colunas da mesma altura ---------------- */
.contato-grade{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch}
.contato-grade > div{display:flex;flex-direction:column}
.contato-grade iframe{flex:1;min-height:420px;height:100%}
@media(max-width:900px){
  .contato-grade{grid-template-columns:1fr;gap:26px}
  .contato-grade iframe{min-height:320px}
}

/* ---------------- ajustes finais medidos ---------------- */
/* o subtítulo do hero quebrava em 4 linhas com a coluna a 66% */
@media(max-width:600px){
  /* o texto ocupa a faixa esquerda; o rosto fica livre na direita.
     3 linhas no subtítulo é o limite antes de virar bloco pesado. */
  .banner-pg--hero .banner-pg__conteudo > *{max-width:76%}
  .banner-pg--rosto .banner-pg__sub{font-size:.79rem;line-height:1.46;max-width:78%}
}
@media(max-width:380px){
  .banner-pg--hero .banner-pg__conteudo > *{max-width:78%}
}

/* folga do botão até a linha que separa os blocos */
@media(max-width:1024px){
  .trat-bloco{padding-bottom:56px}
}
@media(max-width:600px){
  .trat-bloco{padding-bottom:48px}
}

/* o brilho precisa contrastar sobre o dourado do botão */
/* faixa larga e opaca: a variação medida oscilava perto do limite conforme
   o instante da captura, e um brilho que só aparece às vezes não cumpre a
   função de chamar atenção */
.btn-topo::after,
.menu a.btn-topo::after{
  width:64%;
  background:linear-gradient(100deg,
    transparent 8%,
    rgba(255,255,255,.62) 30%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.62) 70%,
    transparent 92%)
}

/* véu mais leve sobre o rosto: a faixa escura acompanha só a coluna do texto */
@media(max-width:900px){
  .banner-pg--rosto::before{
    background:
      linear-gradient(0deg, rgba(45,54,39,.62) 0%, rgba(45,54,39,.18) 16%, transparent 34%),
      linear-gradient(92deg,
        rgba(45,54,39,.90) 0%,
        rgba(48,58,42,.84) 34%,
        rgba(56,66,48,.46) 56%,
        rgba(70,80,60,.14) 74%,
        rgba(93,102,83,0) 90%) !important
  }
}
@media(max-width:420px){
  /* telas estreitas: subtítulo em 3 linhas */
  .banner-pg--rosto .banner-pg__sub{font-size:.76rem;line-height:1.44;max-width:82%}
  .banner-pg--hero .banner-pg__conteudo > *{max-width:82%}
}

/* ============ FOTO COM SELO — bloco único ============
   A imagem ficava sem altura porque a regra de tamanho estava numa das
   nove declarações espalhadas e sumiu na consolidação anterior. */
.foto-arredondada{
  width:100%;height:auto;display:block;
  border-radius:28px;box-shadow:0 22px 46px rgba(90,72,40,.16)
}
.foto-selo{margin:0;position:relative;display:block;isolation:isolate}
.foto-selo img{
  width:100%;height:auto;display:block;aspect-ratio:16/11;object-fit:cover;
  object-position:center 46%;border-radius:26px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(184,150,95,.28),
    0 6px 14px rgba(90,72,40,.10),
    0 22px 40px rgba(90,72,40,.18)
}
/* placa de relevo atrás da foto: z-index 0 com a imagem em 1, porque
   z-index negativo some atrás do fundo da seção em alguns navegadores */
.foto-selo::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;z-index:0;
  border-radius:26px;
  background:linear-gradient(135deg,rgba(211,184,146,.34),rgba(93,102,83,.18))
}
.foto-selo img{position:relative;z-index:1}
.foto-selo figcaption{
  position:absolute;z-index:2;left:auto;right:-10px;bottom:22px;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.88));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--borda-suave);border-radius:999px;padding:10px 20px;
  box-shadow:0 18px 40px rgba(90,72,40,.2);
  font-size:.7rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--verde-profundo)
}
.foto-selo figcaption .ico-svg{color:var(--dourado-escuro)}
@media(max-width:980px){
  .foto-selo img{aspect-ratio:16/10;border-radius:22px}
  .foto-selo figcaption{right:12px;bottom:12px;font-size:.64rem;padding:8px 16px}
}
@media(max-width:600px){
  .foto-selo img{aspect-ratio:4/3;border-radius:18px}
  .foto-selo figcaption{right:10px;bottom:10px;font-size:.58rem;padding:6px 12px;letter-spacing:.5px}
}
/* a mesma foto dentro da listagem de tratamentos */
.trat-figura .foto-arredondada{aspect-ratio:16/10;object-fit:cover;max-height:250px}

/* ============ DEPOIMENTOS — bloco único ============
   Os cards se sobrepõem e só o ativo aparece; sem esta regra eles
   empilham um embaixo do outro e o carrossel deixa de existir. */
.depo{
  position:absolute;inset:0;margin:0;text-align:center;padding:38px 40px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.6));
  border:1px solid var(--borda-suave);border-radius:26px;box-shadow:var(--sombra-card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease,visibility .5s
}
.depo.on{opacity:1;visibility:visible;transform:none;position:relative}
.depo blockquote{
  font-family:var(--serif);font-size:1.12rem;line-height:1.7;
  color:var(--texto-principal);margin:0 0 1.4em;max-width:62ch;
  margin-left:auto;margin-right:auto
}
.depo figcaption{
  font-weight:600;color:var(--verde-profundo);font-size:.95rem;
  display:flex;flex-direction:column;align-items:center;gap:3px
}
.depo figcaption small{
  font-size:.68rem;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--dourado-escuro);font-weight:600
}
.carrossel__trilho{position:relative;min-height:260px}
@media(max-width:760px){
  .depo{padding:28px 22px}
  .depo blockquote{font-size:1rem;line-height:1.62}
  .carrossel__trilho{min-height:300px}
}
@media(max-width:1180px) and (min-width:761px){
}
@media(max-width:760px){
}

/* ############################################################
   CORREÇÕES DA REVISÃO — blocos únicos
   ############################################################ */

/* ============ QUEM LIDERA A CLÍNICA — bloco único ============
   Desktop: foto à esquerda ocupando as três linhas.
   Celular e tablet: cabeçalho, 1º parágrafo, FOTO, restante do texto. */
.ceo{
  display:grid;grid-template-columns:.82fr 1.18fr;
  grid-template-areas:"foto cabecalho" "foto texto" "foto depois";
  grid-template-rows:auto auto 1fr;gap:0 52px;align-items:start
}
.ceo__cabecalho{grid-area:cabecalho;align-self:end;padding-bottom:8px}
.ceo__cabecalho h2{margin:0}
.ceo__texto{grid-area:texto}
.ceo__depois{grid-area:depois;display:flex;flex-direction:column}
.ceo__texto p,.ceo__depois p{
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto
}
.ceo__texto .lead,.ceo__depois .lead,.ceo__depois .destaque-frase{text-align:left}
.ceo__foto{grid-area:foto;margin:0;position:relative;display:block;align-self:stretch}
.ceo__foto img{
  width:100%;height:100%;object-fit:cover;object-position:58% 14%;
  border-radius:180px 180px 26px 26px;box-shadow:0 26px 54px rgba(90,72,40,.20)
}
.ceo__foto figcaption{
  position:absolute;left:auto;right:-14px;bottom:26px;max-width:250px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.88));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--borda-suave);border-radius:18px;padding:14px 20px;
  box-shadow:0 20px 44px rgba(90,72,40,.18)
}
.ceo__foto figcaption strong{
  display:block;font-family:var(--serif);font-size:1.05rem;
  color:var(--verde-profundo);line-height:1.2
}
.ceo__foto figcaption span{
  display:block;font-size:.66rem;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--dourado-escuro);font-weight:600;margin-top:5px
}
@media(max-width:980px){
  .ceo{
    grid-template-columns:1fr;
    grid-template-areas:"cabecalho" "texto" "foto" "depois";
    grid-template-rows:auto auto auto auto;gap:16px 0
  }
  .ceo__cabecalho{padding-bottom:0}
  .ceo__foto img{
    aspect-ratio:16/11;height:auto;border-radius:22px;object-position:60% 12%;
    box-shadow:0 20px 42px rgba(90,72,40,.18)
  }
  .ceo__foto figcaption{right:12px;bottom:12px;max-width:none;padding:10px 16px;border-radius:14px}
  .ceo__foto figcaption strong{font-size:.92rem}
  .ceo__foto figcaption span{font-size:.58rem}
}
@media(max-width:600px){
  .ceo__foto img{aspect-ratio:4/3;object-position:62% 14%}
  .ceo__foto figcaption{right:10px;bottom:10px;padding:9px 13px}
}

/* ============ RODAPÉ — bloco único ============ */
.rodape-grid{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1.3fr;gap:30px 26px}
.rodape-grid > div:first-child img{width:104px;height:auto;margin:0 0 10px;display:block}
.rodape-grid > div:first-child p{font-size:.82rem;line-height:1.55;margin:0 0 12px;max-width:34ch}
.rodape-grid > div:first-child .sociais{margin:0;gap:8px}
@media(max-width:1180px){
  .rodape-grid{grid-template-columns:1.4fr 1fr 1fr;gap:26px 22px}
  .rodape-grid > div:last-child{grid-column:1/-1}
}
@media(max-width:600px){
  .rodape-grid{grid-template-columns:1fr;gap:0}
  .rodape-grid > div:first-child{margin-bottom:16px}
  .rodape-grid > div:not(:first-child){border-top:1px solid rgba(211,184,146,.2)}
  .rodape-grid > div:not(:first-child) h4{
    display:flex;align-items:center;justify-content:space-between;
    margin:0;padding:14px 0;cursor:pointer;font-size:.7rem
  }
  .rodape-grid > div:not(:first-child) h4::after{
    content:"+";font-size:1.15rem;font-weight:400;color:var(--dourado);
    transition:transform .24s;line-height:1
  }
  .rodape-grid > div.aberto h4::after{transform:rotate(45deg)}
  .rodape-grid > div:not(:first-child) > a,
  .rodape-grid > div:not(:first-child) > p{display:none}
  .rodape-grid > div.aberto > a,
  .rodape-grid > div.aberto > p{display:block}
  .rodape-grid > div:not(:first-child) > a{padding:3px 0 3px 2px}
}

/* ============ HERO no celular: foto para a DIREITA ============
   object-position menor mostra a ESQUERDA da foto, o que empurra o
   assunto para a direita da tela. O valor anterior fazia o oposto. */
@media(max-width:900px){
  .banner-pg--rosto .banner-pg__fundo img{object-position:30% 6% !important}
}
@media(max-width:600px){
  .banner-pg--rosto .banner-pg__fundo img{object-position:24% 4% !important}
}

/* ============ botões centralizados no celular, menos os do hero ============ */
@media(max-width:760px){
  .secao .btn,
  .trat-acoes,
  .espaco__cta,
  .fechamento,
  .acoes-dra{justify-content:center}
  .trat-acoes,.acoes-dra,.espaco__cta{display:flex;flex-wrap:wrap;justify-content:center}
  .secao p:has(> .btn){text-align:center}
  .secao p > .btn,
  .secao div > .btn{margin-left:auto;margin-right:auto;display:inline-flex}
  .trat-bloco .trat-acoes{justify-content:center}
  .fechamento{align-items:center;text-align:center}
  .fechamento p{margin-left:auto;margin-right:auto}
  /* o hero mantém tudo à esquerda */
  .banner-pg--hero .banner-pg__acoes{justify-content:flex-start}
}

/* ============ folga do banner até a curva no celular ============
   Medido: 12px entre o último selo e o arco, nas 9 páginas. */
@media(max-width:1024px){
  .banner-pg__conteudo{padding-bottom:calc(var(--arco) + 46px)}
}
@media(max-width:600px){
  .banner-pg__conteudo{padding-bottom:calc(var(--arco) + 42px)}
}

/* ============ enquadramento do objeto no desktop ============
   Segundo valor menor sobe o objeto dentro da moldura. */
@media(max-width:900px){
  .trat-aparelho-invisivel .banner-pg__fundo img,
  .trat-endodontia .banner-pg__fundo img,
  .trat-lentes-de-contato-dental .banner-pg__fundo img,
  .trat-clinica-geral .banner-pg__fundo img{object-position:68% 30% !important}
}

/* ============ destaque do Google ============ */
.cta-google{display:flex;justify-content:center;margin-top:30px}
.btn-google{
  display:inline-flex;align-items:center;gap:15px;
  padding:16px 26px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.76));
  border:1px solid var(--borda-suave);
  box-shadow:0 14px 32px rgba(90,72,40,.14);
  transition:transform .22s,box-shadow .22s,border-color .22s
}
.btn-google:hover{
  transform:translateY(-2px);box-shadow:0 20px 42px rgba(90,72,40,.2);
  border-color:rgba(211,184,146,.65)
}
.btn-google svg{flex:none}
.btn-google strong{
  display:block;font-size:.96rem;color:var(--verde-profundo);font-weight:600;line-height:1.3
}
.btn-google small{
  display:block;font-size:.8rem;color:var(--dourado-escuro);font-weight:600;margin-top:3px
}
@media(max-width:600px){
  .btn-google{padding:14px 20px;gap:12px}
  .btn-google strong{font-size:.88rem}
  .btn-google small{font-size:.74rem}
}

/* parágrafo que contém apenas um botão: à esquerda no desktop,
   centralizado no celular, junto com os demais */
.acao-linha{margin-top:1.6em}
@media(max-width:760px){
  /* o !important vence a justificação herdada dos parágrafos da seção */
  .secao .acao-linha,
  p.acao-linha{text-align:center !important}
  .acao-linha .btn{margin-left:auto;margin-right:auto}
}

/* ============ ALTA PERFORMANCE — bloco único ============
   No celular a proporção estava errada: parágrafo de 15,68px com
   entrelinhas de 26,97 (1,72) numa coluna de 353px, e justificado,
   o que abria buracos entre as palavras. Aqui a escala acompanha a
   largura e a justificação sai abaixo de 900px. */
.tec-topo{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.tec-topo h2{margin:0 0 .3em;line-height:1.16}
.tec-topo__texto{
  font-size:1rem;line-height:1.72;color:rgba(255,255,255,.86);margin:0;
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto
}
.tec-destaques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
.tec-destaques figure{margin:0}
.tec-destaques img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;display:block;
  box-shadow:0 16px 34px rgba(0,0,0,.22)
}
.tec-destaques strong{
  display:block;margin:14px 0 6px;font-size:.72rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--dourado-claro);line-height:1.4
}
.tec-destaques span{
  display:block;font-size:.86rem;line-height:1.56;color:rgba(255,255,255,.78)
}
.tec-lista{
  list-style:none;padding:0;margin:30px 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px
}
.tec-lista li{
  position:relative;padding-left:20px;font-size:.9rem;line-height:1.5;
  color:rgba(255,255,255,.8)
}
.tec-lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--dourado)
}

@media(max-width:900px){
  .tec-topo{grid-template-columns:1fr;gap:14px}
  .tec-topo h2{line-height:1.2}
  /* texto alinhado à esquerda: justificar em coluna estreita abre buracos */
  .tec-topo__texto{
    font-size:.92rem;line-height:1.6;text-align:left;hyphens:none
  }
  .tec-destaques{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
  .tec-destaques strong{font-size:.66rem;letter-spacing:1.2px;margin:10px 0 4px}
  .tec-destaques span{font-size:.8rem;line-height:1.5}
  .tec-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin-top:22px}
  .tec-lista li{font-size:.84rem;line-height:1.45;padding-left:17px}
  .tec-lista li::before{width:5px;height:5px;top:.58em}
}
@media(max-width:600px){
  .tec-topo__texto{font-size:.88rem;line-height:1.58}
  .tec-destaques{grid-template-columns:1fr;gap:18px}
  .tec-destaques img{aspect-ratio:16/9}
  .tec-lista{grid-template-columns:1fr;gap:7px}
}


/* ---------- foto da Dra. entre o 1º e o 2º parágrafo ----------
   Reforço da ordem no grid; nenhuma outra regra deve alterar as áreas. */
@media(max-width:980px){
  .ceo{
    grid-template-areas:"cabecalho" "texto" "foto" "depois" !important
  }
  .ceo__cabecalho{grid-area:cabecalho !important}
  .ceo__texto{grid-area:texto !important}
  .ceo__foto{grid-area:foto !important}
  .ceo__depois{grid-area:depois !important}
}

/* ============ enquadramento dos banners: objeto mais alto ============
   Testado por captura, comparando 22 / 40 / 55 / 70 / 85%: quanto MAIOR
   o segundo valor de object-position, mais o objeto sobe dentro da
   moldura, porque a imagem desliza para cima mostrando a parte de baixo.
   As tentativas anteriores usavam valores baixos e faziam o contrário. */
@media(min-width:1025px){
  body.trat-aparelho-invisivel .banner-pg__fundo img,
  body.trat-endodontia .banner-pg__fundo img,
  body.trat-clinica-geral .banner-pg__fundo img{object-position:68% 85% !important}
  body.pg-contato .banner-pg__fundo img{object-position:62% 82% !important}
}
@media(max-width:1024px){
  body.trat-aparelho-invisivel .banner-pg__fundo img,
  body.trat-endodontia .banner-pg__fundo img,
  body.trat-lentes-de-contato-dental .banner-pg__fundo img,
  body.trat-clinica-geral .banner-pg__fundo img{object-position:68% 78% !important}
}

/* ============ "Quem lidera a clínica" na HOME — bloco único ============
   Desktop: texto à esquerda, retrato à direita ocupando as duas linhas.
   Celular e tablet: rótulo, nome, 1º parágrafo, FOTO, restante do texto.
   Esta seção é diferente da /equipe/, que usa .ceo. */
.lidera{
  display:grid;grid-template-columns:1.18fr .82fr;
  grid-template-areas:"topo foto" "texto foto";
  grid-template-rows:auto 1fr;gap:0 52px;align-items:start
}
.lidera__topo{grid-area:topo}
.lidera__topo h2{margin:.1em 0 .5em}
.lidera__texto{grid-area:texto}
.lidera__foto{grid-area:foto;align-self:stretch}
.lidera__texto > p{
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto
}
.lidera__texto .destaque-frase{text-align:left}

@media(max-width:980px){
  .lidera{
    grid-template-columns:1fr;
    grid-template-areas:"topo" "foto" "texto";
    grid-template-rows:auto auto auto;gap:18px 0
  }
  .lidera__foto{margin:2px 0 4px}
  .lidera__texto > p{text-align:left;hyphens:none}
}

/* ============================================================
   TALVEZ SEJA O SEU CASO — bloco único, modelo do implante
   Cartões verticais em três colunas, com o ícone acima do texto e
   numeração em marca d'água. É o desenho oposto ao dos "Benefícios",
   que são lista editorial de texto limpo com fio dourado.
   ============================================================ */
.grade-sinais{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;width:100%;max-width:100%;counter-reset:sinal
}
.cartao--sinal{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  position:relative;min-width:0;max-width:100%;overflow-wrap:break-word;
  padding:28px 24px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.54));
  border:1px solid var(--borda-suave);box-shadow:var(--sombra-card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .22s,box-shadow .22s,border-color .22s
}
.cartao--sinal:hover{
  transform:translateY(-3px);box-shadow:0 18px 34px rgba(90,72,40,.14);
  border-color:rgba(211,184,146,.6)
}
/* numeração em marca d'água, no canto superior direito */
.cartao--sinal::after{
  content:counter(sinal,decimal-leading-zero);counter-increment:sinal;
  position:absolute;top:18px;right:22px;
  font-family:var(--serif);font-size:2.2rem;line-height:1;
  color:rgba(184,150,95,.2);pointer-events:none
}
.cartao--sinal .ico{flex:none;margin:0}
.cartao--sinal p{
  margin:0;min-width:0;font-size:.95rem;line-height:1.6;
  overflow-wrap:break-word;padding-right:34px
}

@media(max-width:980px){
  .grade-sinais{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .grade-sinais{grid-template-columns:minmax(0,1fr);gap:12px}
  .cartao--sinal{padding:22px 20px;gap:12px}
  .cartao--sinal::after{font-size:1.9rem;top:15px;right:18px}
  .cartao--sinal p{font-size:.9rem;padding-right:30px}
}

/* ############################################################
   LANDING DE CAMPANHA — /campanha-2026/
   Página isolada, sem menu e sem rodapé de navegação. Todo o estilo
   fica sob .lp-campanha para não vazar para o site.
   ############################################################ */
.lp-campanha{background:var(--marfim)}
.lp-wrap{width:min(1080px,calc(100% - 40px));margin:0 auto}

/* ---- topo mínimo: só a marca e o registro profissional ---- */
.lp-topo{
  position:relative;z-index:5;background:rgba(250,248,243,.96);
  border-bottom:1px solid rgba(184,150,95,.18);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.lp-topo__in{
  width:min(1080px,calc(100% - 40px));margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0
}
.lp-logo{width:132px;height:auto;display:block}
.lp-topo__cro{
  font-size:.66rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--dourado-escuro);font-weight:600
}

/* ---- botão único da página ---- */
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 34px;border-radius:999px;white-space:nowrap;
  font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.3px;
  background:linear-gradient(120deg,var(--dourado-escuro) 0%,var(--dourado) 42%,var(--dourado-claro) 58%,var(--dourado) 100%);
  background-size:220% 100%;
  color:var(--verde-profundo);border:0;cursor:pointer;
  position:relative;overflow:hidden;
  box-shadow:0 14px 34px rgba(184,150,95,.36), inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-position .5s ease,transform .2s,box-shadow .26s
}
/* mesmo brilho do botão do topo: faixa de 45% que atravessa a cada 4,5s */
.lp-btn::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  animation:btn-brilho 4.5s ease-in-out infinite;
  pointer-events:none
}
.lp-btn > *,.lp-btn .ico-svg{position:relative;z-index:1}
.lp-btn:hover{
  background-position:100% 0;transform:translateY(-2px);
  box-shadow:0 20px 44px rgba(184,150,95,.46), inset 0 1px 0 rgba(255,255,255,.6)
}
/* o vazado e o claro têm fundo próprio, então o brilho muda de tom */
.lp-btn--vazado::after{
  background:linear-gradient(100deg,transparent,rgba(184,150,95,.28),transparent)
}
.lp-btn--claro::after{
  background:linear-gradient(100deg,transparent,rgba(184,150,95,.22),transparent)
}
.lp-btn--vazado{
  height:50px;padding:0 26px;font-size:.92rem;
  background:transparent;border:1px solid rgba(184,150,95,.55);
  color:var(--verde-profundo);box-shadow:none
}
.lp-btn--vazado:hover{background:rgba(184,150,95,.12);box-shadow:none}
.lp-btn--claro{background:#fff;color:var(--verde-profundo);box-shadow:0 14px 34px rgba(0,0,0,.18)}

/* ---- dobra 1 ---- */
.lp-hero{position:relative;overflow:hidden;isolation:isolate}
.lp-hero__fundo{position:absolute;inset:0;z-index:0}
.lp-hero__fundo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,58% 42%)}
.lp-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(45,54,39,.94) 0%, rgba(50,60,44,.86) 28%,
    rgba(60,70,52,.56) 50%, rgba(76,86,64,.22) 70%, rgba(93,102,83,0) 92%)
}
.lp-hero__conteudo{position:relative;z-index:2;padding:76px 0 84px;color:#fff}
.lp-olho{
  font-size:.7rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--dourado-claro);font-weight:600;margin:0 0 .9em
}
.lp-olho--claro{color:var(--dourado-escuro)}
.lp-hero h1{
  font-family:var(--serif);font-size:clamp(2.1rem,4.6vw,3.4rem);
  line-height:1.1;margin:0 0 .45em;color:#fff;font-weight:400
}
.lp-script{
  display:block;font-family:var(--script);
  color:var(--dourado-claro);font-size:1.06em;line-height:1.16
}
.lp-sub{
  font-size:1.06rem;line-height:1.66;color:rgba(255,255,255,.9);
  max-width:52ch;margin:0 0 2em
}
.lp-selos{
  list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:22px;
  padding-top:22px;border-top:1px solid rgba(232,213,181,.3)
}
.lp-selos li{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:.76rem;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,.84);font-weight:500
}
.lp-selos .ico-svg{color:var(--dourado-claro)}

/* ---- seções ---- */
.lp-secao{padding:64px 0}
.lp-secao--clara{
  background:
    radial-gradient(ellipse 70% 60% at 88% 10%, rgba(232,213,181,.28), transparent 62%),
    linear-gradient(180deg,var(--bege-claro),var(--marfim))
}
.lp-secao h2{
  font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.3rem);
  line-height:1.2;color:var(--verde-profundo);margin:0 0 1.1em;font-weight:400
}

/* ---- dobra 2 · sinais ---- */
.lp-sinais{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-sinais > div{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;
  padding:26px 24px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.56));
  border:1px solid var(--borda-suave);box-shadow:0 12px 28px rgba(90,72,40,.1)
}
.lp-sinais span{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--verde-principal),var(--verde-escuro));
  color:var(--dourado-claro);font-size:1.05rem
}
.lp-sinais p{margin:0;font-size:.95rem;line-height:1.6;color:var(--texto-principal)}

/* ---- dobra 3 · os dois caminhos ---- */
.lp-opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.lp-opcoes article{
  display:flex;flex-direction:column;min-width:0;
  padding:28px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.64));
  border:1px solid var(--borda-suave);box-shadow:0 18px 40px rgba(90,72,40,.12)
}
.lp-opcoes figure{
  margin:0 0 18px;border-radius:16px;overflow:hidden;
  background:linear-gradient(165deg,#F8F4EC,#F1EADD);
  display:flex;align-items:center;justify-content:center;height:190px
}
.lp-opcoes figure img{width:auto;max-width:72%;max-height:170px;object-fit:contain}
.lp-opcoes h3{
  font-family:var(--serif);font-size:1.34rem;color:var(--verde-profundo);
  margin:0 0 .5em;font-weight:400
}
.lp-opcoes p{font-size:.95rem;line-height:1.66;color:var(--texto-secundario);margin:0 0 1.2em}
.lp-opcoes ul{list-style:none;padding:0;margin:0 0 1.8em}
.lp-opcoes li{
  position:relative;padding:8px 0 8px 22px;font-size:.9rem;line-height:1.5;
  color:var(--texto-principal);border-bottom:1px solid rgba(184,150,95,.18)
}
.lp-opcoes li:last-child{border-bottom:0}
.lp-opcoes li::before{
  content:"";position:absolute;left:0;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--dourado)
}
.lp-opcoes .lp-btn{margin-top:auto;align-self:flex-start}

/* ---- dobra 4 · prova social ---- */
.lp-prova{
  background:linear-gradient(150deg,var(--verde-principal),var(--verde-profundo));
  color:#fff;text-align:center
}
.lp-prova__nota{margin-bottom:34px}
.lp-prova__nota strong{
  display:block;font-family:var(--serif);font-size:3.4rem;line-height:1;
  color:var(--dourado-claro);font-weight:400
}
.lp-estrelas{display:block;color:var(--dourado);font-size:1rem;letter-spacing:4px;margin:10px 0 6px}
.lp-prova__nota small{font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.78)}
.lp-prova__numeros{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  padding:30px 0;margin-bottom:30px;
  border-top:1px solid rgba(232,213,181,.26);border-bottom:1px solid rgba(232,213,181,.26)
}
.lp-prova__numeros strong{
  display:block;font-family:var(--serif);font-size:1.5rem;color:var(--dourado-claro);
  font-weight:400;margin-bottom:5px
}
.lp-prova__numeros span{display:block;font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.78)}
.lp-depo{
  font-family:var(--serif);font-size:1.16rem;line-height:1.7;
  max-width:58ch;margin:0 auto 2.2em;color:rgba(255,255,255,.94)
}
.lp-depo cite{
  display:block;margin-top:14px;font-family:var(--sans);font-style:normal;
  font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--dourado-claro)
}

/* ---- dobra 5 · passos ---- */
.lp-passos{
  list-style:none;padding:0;margin:0;counter-reset:passo;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px
}
.lp-passos li{position:relative;padding-top:52px;min-width:0}
.lp-passos li::before{
  content:counter(passo,decimal-leading-zero);counter-increment:passo;
  position:absolute;top:0;left:0;
  font-family:var(--serif);font-size:1.7rem;color:var(--dourado);line-height:1
}
.lp-passos li::after{
  content:"";position:absolute;top:14px;left:44px;right:-11px;height:1px;
  background:linear-gradient(90deg,rgba(184,150,95,.4),rgba(184,150,95,0))
}
.lp-passos li:last-child::after{display:none}
.lp-passos strong{
  display:block;font-size:1rem;color:var(--verde-profundo);margin-bottom:7px;font-weight:600
}
.lp-passos span{display:block;font-size:.9rem;line-height:1.6;color:var(--texto-secundario)}

/* ---- dobra 6 · fechamento ---- */
.lp-fecho{
  padding:70px 0;text-align:center;
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(232,213,181,.34), transparent 62%),
    linear-gradient(180deg,var(--bege-claro),var(--marfim))
}
.lp-fecho h2{
  font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.5rem);
  color:var(--verde-profundo);margin:0 0 .5em;font-weight:400
}
.lp-fecho > .lp-wrap > p{
  font-size:1.02rem;line-height:1.66;color:var(--texto-secundario);
  max-width:50ch;margin:0 auto 2em
}
.lp-fecho__endereco{
  display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:34px;
  font-size:.86rem;color:var(--texto-secundario)
}
.lp-fecho__endereco a{display:inline-flex;align-items:center;gap:8px;color:var(--verde-profundo)}
.lp-fecho__endereco a:hover{color:var(--dourado-escuro)}
.lp-fecho__endereco span{display:inline-flex;align-items:center;gap:8px}
.lp-fecho__endereco .ico-svg{color:var(--dourado-escuro)}

/* ---- rodapé mínimo ---- */
.lp-rodape{
  padding:22px 0;background:var(--verde-profundo);
  text-align:center;font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.62)
}
.lp-rodape a{color:var(--dourado-claro)}

/* ---- tablet ---- */
@media(max-width:900px){
  .lp-hero__conteudo{padding:52px 0 60px}
  .lp-secao{padding:48px 0}
  .lp-sinais{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-opcoes{grid-template-columns:1fr;gap:20px}
  .lp-prova__numeros{grid-template-columns:1fr;gap:20px;padding:24px 0}
  .lp-passos{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .lp-passos li::after{display:none}
  .lp-fecho{padding:52px 0}
}

/* ---- celular ---- */
@media(max-width:600px){
  .lp-wrap,.lp-topo__in{width:calc(100% - 32px)}
  .lp-logo{width:112px}
  .lp-hero__conteudo{padding:40px 0 48px}
  .lp-hero h1{font-size:clamp(1.7rem,7vw,2.2rem)}
  .lp-sub{font-size:.94rem;line-height:1.6}
  .lp-btn{height:52px;padding:0 26px;font-size:.94rem;width:100%}
  .lp-btn--vazado{height:48px;font-size:.88rem}
  .lp-selos{flex-direction:column;gap:10px;margin-top:26px;padding-top:18px}
  .lp-secao{padding:38px 0}
  .lp-sinais{grid-template-columns:1fr;gap:12px}
  .lp-sinais > div{flex-direction:row;align-items:center;padding:18px 20px;gap:14px}
  .lp-sinais span{width:40px;height:40px;font-size:.94rem}
  .lp-sinais p{font-size:.9rem}
  .lp-opcoes article{padding:22px}
  .lp-opcoes figure{height:160px}
  .lp-opcoes .lp-btn{align-self:stretch}
  .lp-prova__nota strong{font-size:2.8rem}
  .lp-depo{font-size:1rem}
  .lp-passos{grid-template-columns:1fr;gap:20px}
  .lp-passos li{padding-top:0;padding-left:46px}
  .lp-passos li::before{top:-2px}
  .lp-fecho{padding:40px 0}
  .lp-fecho__endereco{font-size:.8rem;text-align:center}
}

/* ############################################################
   PÁGINA DE LINKS — /links/
   Mantém a aparência da versão anterior: capa com a marca sobreposta,
   cartões empilhados com ícone à esquerda e o bloco de avaliação no fim.
   Todo o estilo fica sob .pg-links para não vazar para o site.
   ############################################################ */
.pg-links{background:linear-gradient(180deg,#FAF8F3 0%,#F3EEE5 100%);min-height:100vh}
.lk{width:min(560px,calc(100% - 32px));margin:0 auto;padding-bottom:40px}

/* ---- capa ---- */
.lk-capa{position:relative;margin:0 -16px 74px}
.lk-capa__foto{
  position:relative;overflow:hidden;
  border-radius:0 0 28px 28px;aspect-ratio:16/9;
  box-shadow:0 18px 40px rgba(90,72,40,.16)
}
.lk-capa__foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.lk-capa__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(45,54,39,.12) 0%,rgba(45,54,39,.52) 100%)
}
.lk-capa__marca{
  position:absolute;left:50%;bottom:-56px;transform:translateX(-50%);z-index:2;
  width:116px;height:116px;border-radius:50%;overflow:hidden;
  border:4px solid #FAF8F3;background:#FAF8F3;
  box-shadow:0 14px 32px rgba(90,72,40,.24)
}
.lk-capa__marca img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- textos ---- */
.lk-corpo{text-align:center}
.lk-corpo h1{
  font-family:var(--serif);font-size:1.62rem;line-height:1.2;font-weight:400;
  color:var(--verde-profundo);margin:0 0 .25em
}
.lk-sub{
  font-size:.68rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--dourado-escuro);font-weight:600;margin:0 0 1.1em
}
.lk-frase{
  font-size:.92rem;line-height:1.62;color:var(--texto-secundario);
  max-width:38ch;margin:0 auto 2em
}

/* ---- cartões ---- */
.lk-lista{display:grid;gap:11px;text-align:left}
.lk-item{
  display:flex;align-items:center;gap:15px;padding:16px 18px;
  border-radius:16px;border:1px solid var(--borda-suave);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  box-shadow:0 8px 22px rgba(90,72,40,.09);
  transition:transform .2s,box-shadow .22s,border-color .2s
}
.lk-item:hover{
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(90,72,40,.16);
  border-color:rgba(211,184,146,.6)
}
.lk-item__ico{
  width:44px;height:44px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--verde-principal),var(--verde-escuro));
  color:var(--dourado-claro);font-size:1rem;
  box-shadow:0 6px 16px rgba(63,73,55,.2)
}
.lk-item__texto{flex:1;min-width:0}
.lk-item__texto strong{
  display:block;font-size:.98rem;font-weight:600;color:var(--verde-profundo);line-height:1.3
}
.lk-item__texto small{
  display:block;font-size:.8rem;color:var(--texto-secundario);margin-top:2px;line-height:1.45
}
.lk-item__seta{
  flex:none;width:8px;height:8px;
  border-top:2px solid var(--dourado);border-right:2px solid var(--dourado);
  transform:rotate(45deg);transition:transform .22s
}
.lk-item:hover .lk-item__seta{transform:rotate(45deg) translate(2px,-2px)}

/* destaque: o botão principal */
.lk-item--destaque{
  background:linear-gradient(120deg,var(--dourado-escuro) 0%,var(--dourado) 46%,var(--dourado-claro) 62%,var(--dourado) 100%);
  background-size:220% 100%;border:0;position:relative;overflow:hidden;
  box-shadow:0 12px 30px rgba(184,150,95,.36), inset 0 1px 0 rgba(255,255,255,.5)
}
.lk-item--destaque::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:btn-brilho 4.5s ease-in-out infinite;pointer-events:none
}
.lk-item--destaque > *{position:relative;z-index:1}
.lk-item--destaque .lk-item__ico{background:rgba(255,255,255,.9);color:var(--verde-escuro)}
.lk-item--destaque .lk-item__texto strong{color:var(--verde-profundo)}
.lk-item--destaque .lk-item__texto small{color:rgba(63,73,55,.8)}
.lk-item--destaque .lk-item__seta{border-color:var(--verde-profundo)}

/* ---- avaliação ---- */
.lk-avaliar{
  margin-top:30px;padding:28px 24px;border-radius:20px;text-align:center;
  background:linear-gradient(150deg,var(--verde-principal),var(--verde-profundo));
  color:#fff;box-shadow:0 16px 36px rgba(63,73,55,.24)
}
.lk-avaliar h2{
  font-family:var(--serif);font-size:1.16rem;line-height:1.35;font-weight:400;
  color:#fff;margin:0 0 1em
}
.lk-nota strong{
  display:block;font-family:var(--serif);font-size:2.4rem;line-height:1;
  color:var(--dourado-claro);font-weight:400
}
.lk-estrelas{display:block;color:var(--dourado);letter-spacing:4px;margin:8px 0 5px}
.lk-nota small{font-size:.74rem;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.78)}
.lk-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:20px;height:48px;padding:0 30px;border-radius:999px;
  background:#fff;color:var(--verde-profundo);font-weight:600;font-size:.92rem;
  box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .2s
}
.lk-btn:hover{transform:translateY(-2px)}

/* ---- rodapé ---- */
.lk-rodape{margin-top:28px;text-align:center;font-size:.8rem;line-height:1.7;color:var(--texto-secundario)}
.lk-rodape__cro{margin-top:8px;font-size:.72rem;color:#9A9384}

@media(max-width:420px){
  .lk-corpo h1{font-size:1.44rem}
  .lk-item{padding:14px 15px;gap:12px}
  .lk-item__ico{width:40px;height:40px;font-size:.92rem}
  .lk-item__texto strong{font-size:.92rem}
  .lk-capa__marca{width:100px;height:100px;bottom:-48px}
  .lk-capa{margin-bottom:64px}
}

/* o botão flutuante do WhatsApp não faz sentido nesta página: cada cartão
   já é uma ação, e ele acabava cobrindo um deles */
.pg-links .zap{display:none}

/* ---------- especialidades da /odontologia-integrativa/ ----------
   Mesma altura entre os três e o "Conhecer" alinhado na base. No celular
   seguem a regra dos demais cartões do site: compactos, com ícone à
   esquerda e texto à direita — e não centralizados, que é a exceção
   reservada ao bloco "Por que a B.blanc". */
.grade-esp{align-items:stretch}
.grade-esp .cartao{display:flex;flex-direction:column;height:100%}
.grade-esp .cartao > p:last-child{margin-top:auto;padding-top:1em}

@media(max-width:760px){
  .grade-esp{gap:12px}
  .grade-esp .cartao{
    display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico titulo" "ico texto" "ico link";
    align-items:start;gap:4px 16px;padding:18px 20px;text-align:left;height:auto
  }
  .grade-esp .cartao .ico{grid-area:ico;align-self:center;margin:0;width:44px;height:44px;font-size:1rem}
  .grade-esp .cartao h3{grid-area:titulo;margin:0 0 3px;text-align:left;font-size:1.02rem}
  .grade-esp .cartao > p:not(:last-child){
    grid-area:texto;margin:0;text-align:left;font-size:.88rem;line-height:1.55
  }
  .grade-esp .cartao > p:last-child{grid-area:link;margin:8px 0 0;padding-top:0;text-align:left}
}

@media(max-width:980px){
}
@media(max-width:600px){
}

/* ---------- comentários no blog ---------- */
.coment-lista{list-style:none;padding:0;margin:0 0 34px}
.coment-lista li{
  padding:20px 0;border-bottom:1px solid rgba(184,150,95,.2)
}
.coment-lista li:last-child{border-bottom:0}
.coment-lista strong{font-size:.96rem;color:var(--verde-profundo)}
.coment-lista time{margin-left:10px;font-size:.74rem;color:var(--texto-secundario)}
.coment-lista p{margin:8px 0 0;font-size:.94rem;line-height:1.7;color:var(--texto-principal)}
.coment-form{
  padding:26px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.6));
  border:1px solid var(--borda-suave)
}
.coment-form h3{margin:0 0 .5em;font-family:var(--serif);font-size:1.16rem;font-weight:400;color:var(--verde-profundo)}
.coment-aviso{
  margin:0 0 20px;padding:13px 16px;border-radius:10px;font-size:.84rem;line-height:1.6;
  background:rgba(232,213,181,.24);border:1px solid rgba(184,150,95,.28);color:var(--texto-principal)
}
.coment-grade{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.coment-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--verde-profundo)}
.coment-form label span{font-weight:400;color:var(--texto-secundario);font-size:.74rem}
.coment-form input,.coment-form textarea{
  padding:12px 14px;border:1px solid var(--borda-suave);border-radius:10px;
  background:#fff;font:inherit;font-size:.92rem;font-weight:400;color:var(--texto-principal)
}
.coment-form input:focus,.coment-form textarea:focus{
  outline:0;border-color:var(--dourado);box-shadow:0 0 0 3px rgba(184,150,95,.16)
}
.coment-form .btn{margin-top:18px}
.coment-recado{
  padding:13px 16px;border-radius:10px;margin-bottom:18px;font-size:.88rem
}
.coment-recado--ok{background:#EDF5EE;border:1px solid #BBD9BF;color:#2F7A3E}
.coment-recado--erro{background:#FBEAE8;border:1px solid #E6BDB7;color:#8C2F22}
/* armadilha: invisível para gente, preenchida por robô */
.coment-armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:600px){
  .coment-grade{grid-template-columns:1fr}
  .coment-form{padding:20px}
}

/* ============================================================
   MOSAICO "Conheça o espaço" — bloco único
   Card grande 2×2 com a recepção; quatro menores ao lado.
   ============================================================ */
.mosaico{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:180px;gap:16px}
.mosaico figure{margin:0;position:relative;overflow:hidden;border-radius:18px;min-width:0}
.mosaico__grande{grid-column:span 2;grid-row:span 2}
.mosaico img{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)
}
.mosaico figure:hover img{transform:scale(1.05)}
.mosaico figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 18px 15px;
  background:linear-gradient(0deg,rgba(45,54,39,.88),rgba(45,54,39,.4) 62%,transparent);
  color:#fff
}
.mosaico figcaption strong{
  display:block;font-size:.74rem;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:600;margin-bottom:3px
}
.mosaico figcaption span{display:block;font-size:.82rem;color:rgba(255,255,255,.86);line-height:1.4}
.mosaico__grande figcaption{padding:30px 22px 20px}
.mosaico__grande figcaption strong{font-size:.86rem}
.mosaico__grande figcaption span{font-size:.92rem}

@media(max-width:1180px) and (min-width:761px){
  .mosaico{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:160px;gap:14px}
  .mosaico__grande{grid-column:span 2;grid-row:span 2}
}
@media(max-width:760px){
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:132px;gap:10px}
  .mosaico__grande{grid-column:1/-1;grid-row:span 1;height:190px}
  .mosaico figcaption{padding:16px 13px 11px}
  .mosaico figcaption strong{font-size:.66rem;letter-spacing:1.2px}
  .mosaico figcaption span{font-size:.74rem}
  .mosaico__grande figcaption{padding:20px 16px 14px}
}
@media(max-width:980px){
}
@media(max-width:600px){
}

/* ############################################################
   /o-espaco/ — percurso pelos ambientes
   Cada bloco tem ritmo próprio: a fachada em duas colunas, os
   ambientes de espera em par, os consultórios em quatro e o
   bastidor em três. Grade única de fotos iguais não tem
   hierarquia e cansa a leitura.
   ############################################################ */
.esp-intro{
  max-width:64ch;margin:0 auto 30px;text-align:center;
  font-size:1rem;line-height:1.7;color:var(--texto-secundario)
}

/* --- chegada: foto e texto lado a lado --- */
.esp-chegada{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.esp-chegada__foto{margin:0;position:relative;border-radius:24px;overflow:hidden;
  box-shadow:0 24px 52px rgba(90,72,40,.18)}
.esp-chegada__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.esp-chegada__texto h2{margin:.1em 0 .6em}

/* --- par: dois ambientes maiores --- */
.esp-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

/* --- quatro consultórios --- */
.esp-quatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* --- três do bastidor --- */
.esp-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.esp-bastidor{
  background:
    radial-gradient(ellipse 60% 70% at 12% 10%, rgba(232,213,181,.3), transparent 62%),
    linear-gradient(180deg,var(--bege-claro),var(--marfim))
}

/* --- aparência comum das figuras --- */
.esp-par figure,.esp-quatro figure,.esp-tres figure{
  margin:0;position:relative;overflow:hidden;border-radius:18px;min-width:0;
  box-shadow:0 16px 36px rgba(90,72,40,.15)
}
.esp-par img,.esp-quatro img,.esp-tres img{
  width:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)
}
.esp-par img{aspect-ratio:4/5}
.esp-quatro img,.esp-tres img{aspect-ratio:3/4}
.esp-par figure:hover img,.esp-quatro figure:hover img,.esp-tres figure:hover img{transform:scale(1.05)}
.esp-par figcaption,.esp-quatro figcaption,.esp-tres figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px 18px;
  background:linear-gradient(0deg,rgba(45,54,39,.92),rgba(45,54,39,.44) 58%,transparent);
  color:#fff
}
.esp-par figcaption strong,.esp-quatro figcaption strong,.esp-tres figcaption strong{
  display:block;font-size:.76rem;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:600;margin-bottom:4px
}
.esp-par figcaption span,.esp-quatro figcaption span,.esp-tres figcaption span{
  display:block;font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.86)
}
.esp-par figcaption{padding:26px 24px 20px}
.esp-par figcaption strong{font-size:.82rem}
.esp-par figcaption span{font-size:.88rem}

@media(max-width:980px){
  .esp-chegada{grid-template-columns:1fr;gap:26px}
  .esp-quatro{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .esp-par{grid-template-columns:1fr;gap:14px}
  .esp-par img{aspect-ratio:16/11}
  .esp-tres{grid-template-columns:1fr;gap:14px}
  .esp-tres img{aspect-ratio:16/11}
  .esp-intro{font-size:.94rem;margin-bottom:22px}
}
@media(max-width:600px){
  .esp-quatro{gap:10px}
  .esp-quatro figcaption{padding:14px 13px 12px}
  .esp-quatro figcaption strong{font-size:.66rem;letter-spacing:1.1px}
  .esp-quatro figcaption span{font-size:.72rem}
  .esp-chegada__foto img{aspect-ratio:16/11}
}

/* ---- compartilhar ---- */
.post-compartilhar{
  margin-top:44px;padding-top:26px;border-top:1px solid rgba(184,150,95,.24);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.post-compartilhar__rot{
  font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--dourado-escuro);font-weight:600
}
.post-compartilhar__botoes{display:flex;gap:10px;flex-wrap:wrap}
.post-share{
  display:inline-flex;align-items:center;gap:9px;
  height:42px;padding:0 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--borda-suave);background:rgba(255,255,255,.7);
  font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--verde-profundo);
  transition:transform .2s,border-color .2s,background .2s
}
.post-share:hover{transform:translateY(-2px);border-color:var(--dourado);background:#fff}
.post-share .ico-svg{font-size:.9rem;color:var(--dourado-escuro)}
.post-share--zap{
  background:linear-gradient(135deg,var(--verde-principal),var(--verde-escuro));
  border-color:transparent;color:#fff
}
.post-share--zap .ico-svg{color:var(--dourado-claro)}
.post-share--zap:hover{background:linear-gradient(135deg,var(--verde-escuro),var(--verde-profundo))}
.post-share--copiar.copiado{border-color:#7FA98A;background:#EDF5EE;color:#2F7A3E}
.post-share--copiar.copiado .ico-svg{color:#2F7A3E}

@media(max-width:760px){
  .post-compartilhar{flex-direction:column;align-items:flex-start;gap:14px}
  .post-compartilhar__botoes{width:100%}
  .post-share{flex:1;justify-content:center;padding:0 12px}
}

/* ---------- leia também ---------- */
.leia-tambem{
  background:
    radial-gradient(ellipse 60% 70% at 12% 10%, rgba(232,213,181,.28), transparent 62%),
    linear-gradient(180deg,var(--bege-claro),var(--marfim))
}
.leia-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:860px;margin:0 auto}
.leia-item{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.66));
  border:1px solid var(--borda-suave);box-shadow:0 14px 32px rgba(90,72,40,.12);
  transition:transform .22s,box-shadow .24s,border-color .22s
}
.leia-item:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(90,72,40,.18);border-color:rgba(211,184,146,.6)}
.leia-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.leia-item__texto{padding:18px 20px 22px}
.leia-item__data{
  display:block;font-size:.68rem;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--dourado-escuro);font-weight:600;margin-bottom:6px
}
.leia-item h3{
  font-family:var(--serif);font-size:1.08rem;line-height:1.35;font-weight:400;
  color:var(--verde-profundo);margin:0
}

@media(max-width:760px){
  .leia-grade{grid-template-columns:1fr;gap:14px}
}

/* ############################################################
   ARTIGO DO BLOG — bloco único
   ############################################################ */

/* ---- coluna elástica ----
   A coluna cresce com a tela em vez de ficar travada em 680px. Antes, em
   Full HD, o texto usava 35% da largura e sobravam 620px vazios de cada
   lado. O clamp mantém a linha entre 66 e 78 caracteres — a faixa em que
   ainda se lê sem perder o início da linha seguinte — e usa o espaço que
   existe. */
/* Mesma largura do resto do site: .wrap de 1180px. O artigo usava uma
   coluna estreita de 740px, com 350px de margem de cada lado — metade da
   largura das demais páginas. Para a linha não ficar longa demais nessa
   largura, o texto do corpo é distribuído em duas colunas no desktop, o
   que mantém a leitura confortável e usa a tela inteira. */
.post-corpo,
.post-cabecalho .estreito,
.post-autor,
.coment{
  width:min(1180px, calc(100% - 40px));
  margin-left:auto;margin-right:auto
}

/* a capa sangra além da coluna: é o elemento que dá hierarquia à página
   e o único que pode ocupar mais largura sem prejudicar a leitura */
.post-capa{width:min(1180px, calc(100% - 40px));margin:0 auto 10px}
.post-capa img{
  width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:20px;display:block;
  box-shadow:0 22px 48px rgba(90,72,40,.18)
}

/* ---- cabeçalho ---- */
.post-cabecalho{padding-top:46px}
.post-cabecalho .migalhas{margin-bottom:22px}
.post-cabecalho h1{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.14;margin:.1em 0 .4em}
/* sem limite de caracteres: com 58ch o texto quebrava em 522px e parecia
   uma coluna estreita ao lado do título, que ocupa a largura toda */
.post-cabecalho .lead{
  font-size:1.24rem;line-height:1.6;max-width:none;
  color:var(--texto-secundario)
}
/* alinhada à esquerda, como todo o resto do cabeçalho do artigo */
.post-meta{
  display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;
  gap:22px;margin:0 0 8px;padding-bottom:18px;
  border-bottom:1px solid rgba(184,150,95,.22);
  font-size:.86rem;color:var(--texto-secundario)
}
.post-meta span{display:inline-flex;align-items:center;gap:7px}
.post-meta .ico-svg{color:var(--dourado-escuro)}

/* ---- corpo do texto ----
   Justificado, como no resto do site, com hifenização de verdade: em
   texto justificado ela é necessária para evitar buracos entre palavras.
   O prefixo -webkit é obrigatório, senão não funciona no Safari nem em
   nenhum navegador de iPhone. */
.artigo{
  /* corpo grande: em coluna de 1180px a fonte precisa crescer junto, senão
     a linha passa de 100 caracteres e a leitura fica cansativa */
  font-family:var(--serif);font-size:1.44rem;line-height:1.68;
  color:var(--texto-principal);max-width:100%;
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;
  hyphenate-limit-chars:6 3 3
}
.artigo > * + *{margin-top:1.25em}
.artigo p{margin:0}
.artigo strong{font-weight:600;color:var(--verde-profundo)}

/* ---- títulos ----
   Sem-serifa contra o corpo serifado: com a mesma família, um título de
   27px ao lado de um texto de 18px parece só um parágrafo grande. A
   diferença de família é o que separa de verdade. */
.artigo h2{
  font-family:var(--sans);font-size:1.52rem;line-height:1.26;font-weight:600;
  letter-spacing:-.2px;color:var(--verde-profundo);
  margin:1.8em 0 .1em;padding-top:.55em;position:relative;
  text-align:left;hyphens:none
}
.artigo > h2:first-child{margin-top:0}
.artigo h2::before{
  content:"";position:absolute;top:0;left:0;width:46px;height:2px;
  background:linear-gradient(90deg,var(--dourado),rgba(211,184,146,.15))
}
.artigo h2 + p{margin-top:.9em}
.artigo h3{
  font-family:var(--sans);font-size:1.04rem;font-weight:600;letter-spacing:.1px;
  color:var(--verde-escuro);margin:1.7em 0 .1em;text-align:left;hyphens:none;
  }
.artigo h3 + p{margin-top:.6em}
.artigo h4{font-family:var(--sans);font-size:.96rem;font-weight:600;color:var(--verde-escuro);margin:1.6em 0 .1em}

/* ---- listas: sangram para a esquerda, ocupando a margem ---- */
.artigo ul,.artigo ol{
  padding:16px 20px 16px 30px;margin-left:0;margin-right:0;
  border-left:2px solid rgba(184,150,95,.4);
  background:linear-gradient(90deg,rgba(232,213,181,.14),transparent 62%);
  border-radius:0 12px 12px 0;list-style-position:outside;
}
.artigo li{margin:0 0 .5em;line-height:1.62;text-align:left;hyphens:none}
.artigo li:last-child{margin-bottom:0}
.artigo li::marker{color:var(--dourado-escuro)}

.artigo a{
  color:var(--verde-profundo);text-decoration:underline;
  text-decoration-color:rgba(184,150,95,.5);text-underline-offset:3px
}
.artigo a:hover{color:var(--dourado-escuro);text-decoration-color:var(--dourado)}
.artigo img{
  width:100%;max-width:100%;margin:0;height:auto;
  border-radius:16px;display:block;box-shadow:0 18px 38px rgba(90,72,40,.14);
}
.artigo blockquote{
  margin:1.6em 0;padding:20px 26px;border-left:3px solid var(--dourado);
  background:rgba(232,213,181,.16);border-radius:0 14px 14px 0;
  font-size:1.12rem;line-height:1.62;color:var(--verde-escuro);text-align:left;
}
.artigo blockquote p{margin:0}
.artigo hr{border:0;height:1px;background:rgba(184,150,95,.28);margin:2.4em 0}
.artigo table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.94rem}
.artigo th{
  text-align:left;padding:12px;background:rgba(232,213,181,.28);
  font-size:.74rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--verde-profundo)
}
.artigo td{padding:12px;border-bottom:1px solid rgba(184,150,95,.2)}

/* ---- caixa da clínica ---- */
.post-autor{
  display:flex;gap:24px;align-items:center;padding:26px;
  border-radius:20px;border:1px solid var(--borda-suave);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.64))
}
.post-autor__foto{
  width:104px;height:104px;border-radius:50%;object-fit:cover;
  object-position:58% 18%;flex:none
}
.post-autor h3{font-size:1.2rem;margin:.25em 0 .5em}
.post-autor p{font-size:.9rem;color:var(--texto-secundario);margin-bottom:1.2em}

/* ---- telas menores ---- */
@media(max-width:1180px){
  .artigo{font-size:1.18rem;line-height:1.74}
  .artigo h2{font-size:1.4rem}
}
@media(max-width:1024px){
  /* abaixo disso duas colunas ficariam estreitas demais: volta a coluna
     única. A largura acompanha o wrap, mas a fonte cresce para a linha
     não passar de 85 caracteres. */
  .artigo{font-size:1.2rem;line-height:1.74}
  .post-corpo,.post-cabecalho .estreito,.post-autor,.coment{
    width:min(1180px, calc(100% - 44px))
  }
}
@media(max-width:900px){
  .post-corpo,.post-cabecalho .estreito,.post-autor,.coment,
  .post-capa{width:calc(100% - 44px)}
  .artigo ul,.artigo ol{margin-left:-16px;padding-left:26px}
  .artigo img{width:calc(100% + 32px);margin-left:-16px}
  .artigo blockquote{margin-left:-12px;margin-right:-12px}
}
@media(max-width:600px){
  /* margem lateral maior que a do resto do site: leitura longa em
     serifada precisa de respiro para o texto não encostar na borda */
  .post-corpo,.post-cabecalho .estreito,.post-autor,.coment,
  .post-capa{width:calc(100% - 48px)}
  .artigo{
    font-size:1.04rem;line-height:1.74;
    /* coluna estreita justificada abre buracos entre palavras; e sem
       justificação a hifenização só corta palavra à toa */
    text-align:left;
    hyphens:none;-webkit-hyphens:none;-ms-hyphens:none
  }
  .artigo h2{font-size:1.2rem;margin-top:1.9em}
  .artigo h3{font-size:.98rem}
  .artigo ul,.artigo ol{padding:14px 16px 14px 26px}
  .artigo blockquote{padding:16px 18px;font-size:1.06rem}
  .post-capa img{aspect-ratio:16/10;border-radius:14px}
  .post-autor{flex-direction:column;text-align:center;gap:16px;padding:22px}
  .post-autor__foto{width:84px;height:84px}
  .post-meta{gap:14px;font-size:.78rem}
}

/* o "Ler artigo" dentro do card precisa de área clicável própria:
   como <span> ele parecia botão mas não respondia ao clique */
.post-card__texto .link-texto{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;cursor:pointer
}
.post-card__texto .link-texto::after{
  content:"";width:6px;height:6px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);transition:transform .22s
}
.post-card__texto .link-texto:hover::after{transform:rotate(45deg) translate(2px,-2px)}