/* FUNDO: sereno */
/* ============================================================
   SORRISO PERFEITO — Clínica Odontológica · Boa Vista/RR
   Direção: editorial, sóbria, azul odontológico. Mobile-first.
   ============================================================ */

/* ---------- Fontes locais (offline-first) ---------- */
@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/montserrat.woff2") format("woff2");
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/montserrat-italic.woff2") format("woff2");
  font-weight:300 800; font-style:italic; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --azul:#1E6FC9;          /* marca / CTA */
  --azul-mid:#3B8EE6;      /* destaque / hover */
  --azul-claro:#6FB0F0;
  --navy:#0B2E5E;          /* texto forte / seções escuras */
  --navy-deep:#07213F;
  --gelo:#EAF2FB;          /* fundo suave */
  --gelo-2:#F3F8FD;
  --branco:#FFFFFF;
  --off:#F7FAFC;
  --tinta:#14243A;         /* corpo */
  --tinta-2:#42536B;       /* secundário */
  --mut:#7C8AA0;           /* silenciado */
  --linha:#E3EBF3;         /* bordas */
  --linha-2:#D3DEEA;
  --ok:#1FB574;            /* status ao vivo */

  --urg:#C81E33;           /* urgência / alerta */
  --urg-esc:#8E1220;       /* urgência escuro */
  --urg-claro:#FF6B72;     /* urgência sobre navy */

  --display:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container:1200px;
  --pad:clamp(20px, 5vw, 48px);
  --r-sm:10px; --r-md:14px; --r-lg:22px;
  --sombra:0 18px 50px -22px rgba(11,46,94,.28);
  --sombra-sutil:0 8px 26px -16px rgba(11,46,94,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--branco); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:600; line-height:1.1;
  letter-spacing:-.02em; color:var(--navy); font-optical-sizing:auto}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--pad)}
.ic{width:1.15em; height:1.15em; flex:none}
.mut{color:var(--mut)}
.serif-it{font-style:italic; color:var(--azul)}

.pular{position:absolute; left:-999px; top:0; background:var(--navy); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; z-index:100}
.pular:focus{left:0}

:focus-visible{outline:2.5px solid var(--azul-mid); outline-offset:3px; border-radius:6px}

/* ---------- Rótulo "olho" ---------- */
.olho{display:inline-block; font-family:var(--sans); font-weight:600; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--azul);
  margin-bottom:16px}
.olho-claro{color:var(--azul-claro)}

/* ---------- Botões ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans);
  font-weight:600; font-size:15.5px; line-height:1; padding:15px 24px; border-radius:99px;
  cursor:pointer; border:1.5px solid transparent; transition:transform .25s var(--ease),
  box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primaria{background:var(--azul); color:#fff; box-shadow:0 12px 26px -12px rgba(30,111,201,.7)}
.btn-primaria:hover{background:#175bad; box-shadow:0 16px 30px -12px rgba(30,111,201,.85); transform:translateY(-2px)}
.btn-linha{background:transparent; color:var(--navy); border-color:var(--linha-2)}
.btn-linha:hover{border-color:var(--azul); color:var(--azul); background:var(--gelo-2)}
.btn-branca{background:#fff; color:var(--navy)}
.btn-branca:hover{transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(0,0,0,.4)}
.btn-fantasma{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-fantasma:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.btn-mini{padding:11px 18px; font-size:14.5px; background:var(--azul); color:#fff;
  box-shadow:0 10px 22px -12px rgba(30,111,201,.7)}
.btn-mini:hover{background:#175bad; transform:translateY(-1px)}
/* botão de urgência (usado no hero) */
.btn-urg{background:transparent; color:var(--urg); border-color:rgba(200,30,51,.4); font-weight:600}
.btn-urg .ic{color:var(--urg)}
.btn-urg:hover{border-color:var(--urg); background:rgba(200,30,51,.06); color:var(--urg-esc)}

/* estrelas */
.estrelas{color:#F5A524; letter-spacing:.06em; font-size:14px}
.estrelas.grande{font-size:22px}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.cab{position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s}
.cab.solido{background:rgba(255,255,255,.92); border-bottom-color:var(--linha);
  box-shadow:0 6px 24px -18px rgba(11,46,94,.5)}
.cab-in{display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px}
.marca{display:flex; align-items:center; gap:11px}
.marca-logo{width:44px; height:44px; border-radius:50%; box-shadow:0 4px 12px -5px rgba(11,46,94,.5)}
.marca-txt{display:flex; flex-direction:column; line-height:1.1}
.marca-txt strong{font-family:var(--display); font-weight:600; font-size:18px; color:var(--navy); letter-spacing:-.01em; white-space:nowrap}
.marca-txt em{font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.nav{display:flex; gap:30px}
.nav a{font-size:15px; font-weight:500; color:var(--tinta-2); position:relative; padding:4px 0}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--azul); transition:right .3s var(--ease)}
.nav a:hover{color:var(--navy)}
.nav a:hover::after{right:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding:calc(72px + clamp(40px,7vw,86px)) 0 clamp(56px,7vw,96px); overflow:hidden}
.hero-fundo{position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 90% at 78% 8%, #FFFFFF 0%, #F4F9FE 46%, #E9F2FB 100%)}
.hero-fundo .aura{position:absolute; border-radius:50%; filter:blur(46px); opacity:.6}
.hero-fundo .a1{width:44vw; height:44vw; max-width:560px; max-height:560px; left:-8%; top:-12%;
  background:radial-gradient(circle, rgba(59,142,230,.28), transparent 66%)}
.hero-fundo .a2{width:38vw; height:38vw; max-width:480px; max-height:480px; right:-6%; top:20%;
  background:radial-gradient(circle, rgba(111,176,240,.26), transparent 66%)}
.hero-fundo .a3{width:30vw; height:30vw; max-width:380px; max-height:380px; left:36%; bottom:-16%;
  background:radial-gradient(circle, rgba(30,111,201,.14), transparent 66%)}
.hero-fundo .arco{position:absolute; inset:0; width:100%; height:100%}

.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(30px,5vw,72px); align-items:center}
.hero-txt h1{font-size:clamp(38px,5.6vw,68px); margin:6px 0 0}
.hero-sub{margin-top:22px; font-size:clamp(16.5px,1.5vw,19px); color:var(--tinta-2); max-width:37ch}
.hero-sub strong{color:var(--navy); font-weight:600}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero-selo{display:flex; align-items:center; gap:12px; margin-top:28px; font-size:14.5px; color:var(--tinta-2)}
.hero-selo strong{color:var(--navy)}

.hero-media{position:relative}
.hero-foto{margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra);
  border:1px solid rgba(255,255,255,.6); aspect-ratio:4/5; animation:flutua 7s var(--ease) infinite}
.hero-foto img{width:100%; height:100%; object-fit:cover}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.chip{position:absolute; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border:1px solid var(--linha); border-radius:14px; box-shadow:var(--sombra-sutil);
  padding:12px 16px; display:flex; align-items:center; gap:11px}
.chip-24{left:-22px; top:34px; animation:flutuaChip 6s var(--ease) infinite}
.chip-24 span:last-child{display:flex; flex-direction:column; line-height:1.15}
.chip-24 strong{font-size:15px; color:var(--navy)}
.chip-24 em{font-style:normal; font-size:12px; color:var(--mut)}
.chip-rev{right:-16px; bottom:26px; max-width:230px; flex-direction:column; align-items:flex-start; gap:5px;
  animation:flutuaChip 6.6s var(--ease) infinite .4s}
.chip-rev em{font-style:italic; font-size:13px; color:var(--tinta); line-height:1.4}
@keyframes flutuaChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.pulso{width:10px; height:10px; border-radius:50%; background:var(--ok); position:relative; flex:none}
.pulso::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--ok);
  animation:pulsa 2s ease-out infinite}
@keyframes pulsa{0%{transform:scale(1); opacity:.7}100%{transform:scale(2.8); opacity:0}}

/* ============================================================
   FAIXA DE CONFIANÇA
   ============================================================ */
.confianca{background:var(--navy); color:#fff; position:relative; z-index:2}
.confianca-in{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  padding-block:26px}
.conf-item{display:flex; align-items:center; gap:13px; padding:8px 18px; position:relative}
.conf-item:not(:last-child)::after{content:""; position:absolute; right:0; top:18%; bottom:18%;
  width:1px; background:rgba(255,255,255,.14)}
.conf-item .ic{width:26px; height:26px; color:var(--azul-claro)}
.conf-item div{display:flex; flex-direction:column; line-height:1.25}
.conf-item strong{font-size:15px; font-weight:600}
.conf-item span{font-size:12.5px; color:rgba(255,255,255,.6)}
/* item de urgência com acento de alerta */
.conf-urg .ic{color:var(--urg-claro)}
.conf-urg strong{display:inline-flex; align-items:center; gap:8px}
.conf-urg strong::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--urg-claro);
  position:relative; flex:none; box-shadow:0 0 0 0 rgba(255,107,114,.6); animation:pulsaUrg 2.4s ease-out infinite}
@keyframes pulsaUrg{0%{box-shadow:0 0 0 0 rgba(255,107,114,.55)}70%,100%{box-shadow:0 0 0 7px rgba(255,107,114,0)}}

/* ============================================================
   SEÇÕES — títulos
   ============================================================ */
section{scroll-margin-top:82px}
.sec-cab{max-width:640px; margin-bottom:clamp(34px,4vw,54px)}
.sec-cab h2{font-size:clamp(28px,3.7vw,44px)}
.sec-sub{margin-top:16px; font-size:17px; color:var(--tinta-2)}

/* ---------- SOBRE ---------- */
.sobre{padding:clamp(64px,8vw,110px) 0}
.sobre-grid{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(32px,5vw,72px); align-items:center}
.sobre-foto{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra); aspect-ratio:4/5}
.sobre-foto img{width:100%; height:100%; object-fit:cover}
.sobre-txt h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:22px}
.sobre-txt > p{font-size:17px; color:var(--tinta-2); margin-bottom:26px}
.sobre-lista{display:flex; flex-direction:column; gap:16px; margin-bottom:30px}
.sobre-lista li{display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--tinta-2)}
.sobre-lista .ic{color:var(--azul); width:22px; height:22px; margin-top:2px}
.sobre-lista strong{color:var(--navy); font-weight:600}
.link-seta{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--azul); font-size:15.5px}
.link-seta .ic{transition:transform .25s var(--ease)}
.link-seta:hover .ic{transform:translateX(5px)}

/* ---------- TRATAMENTOS ---------- */
.tratamentos{padding:clamp(64px,8vw,110px) 0; background:var(--gelo-2)}
.trat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.trat-card{background:#fff; border:1px solid var(--linha); border-radius:var(--r-md);
  padding:28px 24px 26px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.trat-card::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--azul),var(--azul-mid)); transform:scaleX(0);
  transform-origin:left; transition:transform .4s var(--ease)}
.trat-card:hover{transform:translateY(-6px); box-shadow:var(--sombra); border-color:transparent}
.trat-card:hover::before{transform:scaleX(1)}
.trat-num{font-family:var(--display); font-size:15px; color:var(--azul); font-weight:600; letter-spacing:.05em}
.trat-ic{width:34px; height:34px; color:var(--azul); margin:14px 0 16px; stroke-width:1.5}
.trat-card h3{font-size:20px; margin-bottom:10px; letter-spacing:-.01em}
.trat-card p{font-size:14.5px; color:var(--tinta-2); margin-bottom:18px}
.trat-link{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--azul)}
.trat-link .ic{width:16px; height:16px; transition:transform .25s var(--ease)}
.trat-link:hover .ic{transform:translateX(4px)}
/* card de urgência com acento de alerta */
.trat-card.urg{border-color:rgba(200,30,51,.28); background:linear-gradient(180deg,#fff, #FFF7F7)}
.trat-card.urg::before{background:linear-gradient(90deg,var(--urg),#e0475a); transform:scaleX(1)}
.trat-card.urg .trat-num,.trat-card.urg .trat-ic,.trat-card.urg .trat-link{color:var(--urg)}
.trat-card.urg .trat-tag{position:absolute; right:16px; top:16px; z-index:2; display:inline-flex;
  align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--urg); background:rgba(200,30,51,.09); padding:5px 11px; border-radius:99px}
.trat-card.urg .trat-tag::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--urg);
  animation:pulsaUrg 2.4s ease-out infinite; box-shadow:0 0 0 0 rgba(200,30,51,.5)}
/* lista completa de serviços (chips) */
.trat-mais{margin-top:clamp(28px,3.6vw,44px); display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.trat-mais-tit{font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
.trat-tags{display:flex; flex-wrap:wrap; gap:10px}
.trat-tags li{font-size:14px; font-weight:500; color:var(--navy); background:#fff; border:1px solid var(--linha-2);
  padding:8px 15px; border-radius:99px; transition:border-color .25s var(--ease), color .25s}
.trat-tags li:hover{border-color:var(--azul); color:var(--azul)}

/* ============================================================
   JORNADA — scroll motion
   ============================================================ */
.jornada{background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff}
.trilho{position:relative; height:420vh}
.trilho-palco{position:sticky; top:0; height:100vh; display:flex; align-items:center;
  overflow:hidden; padding-top:76px; padding-bottom:24px}
.jornada-in{width:100%}
.jornada-cab{max-width:640px; margin-bottom:clamp(18px,2.4vw,30px)}
.jornada-cab .olho{color:var(--azul-claro); margin-bottom:12px}
.jornada-cab h2{color:#fff; font-size:clamp(25px,3vw,38px)}
.jornada-cab .sec-sub{color:rgba(255,255,255,.72); margin-top:12px}

.jornada-palco{position:relative; padding-left:34px}
.jornada-linha{position:absolute; left:6px; top:6px; height:calc(100% - 12px); width:4px}
.jornada-linha .linha-base{stroke:rgba(255,255,255,.16); stroke-width:4; stroke-linecap:round}
.jornada-linha .linha-ativa{stroke:var(--azul-mid); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:400; stroke-dashoffset:400}

.passos{display:flex; flex-direction:column; gap:clamp(12px,1.8vw,22px)}
.passo{display:flex; gap:18px; align-items:flex-start; position:relative;
  opacity:.32; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.passo.on{opacity:1; transform:none}
.passo-ponto{position:absolute; left:-34px; top:4px; width:15px; height:15px; border-radius:50%;
  background:var(--navy); border:2px solid rgba(255,255,255,.3); transition:.4s var(--ease); flex:none}
.passo.on .passo-ponto{background:var(--azul-mid); border-color:#fff; box-shadow:0 0 0 5px rgba(59,142,230,.25)}
.passo-corpo{padding-bottom:2px}
.passo-n{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--azul-claro)}
.passo h3{color:#fff; font-size:clamp(18px,1.9vw,23px); margin:4px 0 6px; line-height:1.15}
.passo p{font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.74); max-width:64ch}
.jornada-cta{margin-top:clamp(16px,2vw,26px)}

/* ---------- ESTRUTURA / galeria ---------- */
.estrutura{padding:clamp(64px,8vw,110px) 0}
.galeria{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.g-item{margin:0; position:relative; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sombra-sutil)}
.g-item img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.g-item:hover img{transform:scale(1.04)}
.g-item figcaption{position:absolute; left:0; right:0; bottom:0; padding:36px 20px 16px 20px;
  font-size:13.5px; color:#fff; background:linear-gradient(to top, rgba(7,33,63,.85), transparent)}
.g-grande{grid-row:span 2}
.g-grande img{min-height:100%}

/* ---------- AVALIAÇÕES ---------- */
.avaliacoes{padding:clamp(64px,8vw,110px) 0; background:var(--gelo-2)}
.nota-google{display:flex; align-items:center; gap:14px; margin-top:20px}
.nota-google .nota{font-family:var(--display); font-size:40px; font-weight:600; color:var(--navy); line-height:1}
.nota-txt{font-size:14.5px; color:var(--tinta-2)}
.aval-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.aval{background:#fff; border:1px solid var(--linha); border-radius:var(--r-md); padding:26px 24px; margin:0;
  display:flex; flex-direction:column; gap:14px; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.aval:hover{transform:translateY(-5px); box-shadow:var(--sombra-sutil)}
.aval p{font-size:15px; color:var(--tinta); line-height:1.6; flex:1}
.aval cite{font-style:normal; font-weight:600; font-size:14px; color:var(--navy)}
.aval cite::before{content:"— "}

/* ---------- CONTATO ---------- */
.contato{padding:clamp(64px,8vw,110px) 0}
.contato-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,64px); align-items:center}
.contato-info h2{font-size:clamp(26px,3.3vw,40px); margin-bottom:30px}
.info-lista{display:flex; flex-direction:column; gap:22px; margin-bottom:32px}
.info-lista li{display:flex; gap:15px; align-items:flex-start}
.info-lista .ic{color:var(--azul); width:24px; height:24px; margin-top:2px; flex:none}
.info-lista strong{display:block; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-bottom:3px; font-weight:600}
.info-lista li > div{font-size:16px; color:var(--tinta); line-height:1.5}
.badge-live{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--navy)}
.contato-ctas{display:flex; flex-wrap:wrap; gap:13px}
.contato-mapa{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra); border:1px solid var(--linha); height:100%; min-height:360px}
.contato-mapa iframe{width:100%; height:100%; min-height:360px; border:0; display:block; filter:grayscale(.15)}

/* ---------- CTA FINAL ---------- */
.cta-final{padding:clamp(56px,7vw,96px) 0; background:
  radial-gradient(90% 120% at 15% 10%, #1a5cbf 0%, transparent 55%),
  linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff}
.cta-in{max-width:720px; text-align:center; margin-inline:auto}
.cta-in h2{color:#fff; font-size:clamp(30px,4.4vw,52px); margin-bottom:18px}
.cta-in p{font-size:17.5px; color:rgba(255,255,255,.8); margin-bottom:34px; max-width:52ch; margin-inline:auto}
.cta-botoes{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}

/* ---------- RODAPÉ ---------- */
.rodape{background:var(--navy-deep); color:rgba(255,255,255,.8); padding:56px 0 26px}
.rodape-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:32px; align-items:start;
  padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1)}
.rodape-marca{display:flex; align-items:center; gap:14px}
.rodape-marca img{width:52px; height:52px; border-radius:50%}
.rodape-marca strong{display:block; font-family:var(--display); font-size:19px; color:#fff}
.rodape-marca span{font-size:13px; color:rgba(255,255,255,.55)}
.rodape-nav{display:flex; flex-direction:column; gap:11px}
.rodape-nav a{font-size:14.5px; color:rgba(255,255,255,.72)}
.rodape-nav a:hover{color:#fff}
.rodape-contato{display:flex; flex-direction:column; gap:9px; font-size:14.5px}
.rodape-contato a:hover{color:#fff}
.rodape-fim{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding-top:22px; font-size:12.5px; color:rgba(255,255,255,.5)}

/* ---------- WhatsApp flutuante ---------- */
.wpp-flut{position:fixed; right:20px; bottom:20px; z-index:70; display:inline-flex; align-items:center; gap:9px;
  background:#25D366; color:#fff; padding:13px 18px 13px 15px; border-radius:99px; font-weight:600; font-size:15px;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.6); transition:transform .3s var(--ease), box-shadow .3s}
.wpp-flut svg{width:24px; height:24px}
.wpp-flut:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 18px 34px -10px rgba(37,211,102,.75)}

/* ============================================================
   FAIXA DE URGÊNCIA 24H
   ============================================================ */
.urgencia{position:relative; z-index:2; color:#fff; overflow:hidden;
  background:
    radial-gradient(120% 150% at 10% 0%, #d5253b 0%, transparent 52%),
    linear-gradient(120deg, var(--urg) 0%, var(--urg-esc) 100%)}
.urgencia::after{content:""; position:absolute; right:-60px; bottom:-90px; width:340px; height:340px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.12), transparent 62%);
  pointer-events:none}
.urg-in{position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.86fr); gap:clamp(24px,4.5vw,60px);
  align-items:center; padding-block:clamp(30px,4.2vw,46px)}
.urg-selo{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600;
  font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.32);
  padding:7px 15px; border-radius:99px; margin-bottom:16px}
.urg-pulso{width:9px; height:9px; border-radius:50%; background:#fff; position:relative; flex:none}
.urg-pulso::after{content:""; position:absolute; inset:0; border-radius:50%; background:#fff;
  animation:pulsa 2s ease-out infinite}
.urg-titulo{color:#fff; font-size:clamp(27px,3.7vw,44px); line-height:1.04; letter-spacing:-.015em}
.urg-titulo b{color:#fff; font-weight:700; position:relative; white-space:nowrap}
.urg-titulo b::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:3px;
  background:rgba(255,255,255,.6); border-radius:2px}
.urg-txt p{margin-top:18px; font-size:clamp(15px,1.5vw,17.5px); line-height:1.55;
  color:rgba(255,255,255,.9); max-width:52ch}
.urg-acao{display:flex; flex-direction:column; gap:13px; align-items:stretch}
.urg-btn{background:#fff; color:var(--urg-esc); font-size:16.5px; font-weight:700; padding:17px 26px;
  justify-content:center; box-shadow:0 16px 34px -12px rgba(0,0,0,.5); border-color:#fff}
.urg-btn .ic{width:20px; height:20px; color:var(--urg)}
.urg-btn:hover{background:#fff; color:var(--urg-esc); transform:translateY(-2px);
  box-shadow:0 22px 42px -12px rgba(0,0,0,.6)}
.urg-tel{display:inline-flex; align-items:center; justify-content:center; gap:9px; color:#fff;
  font-weight:600; font-size:15px; padding:9px 6px}
.urg-tel .ic{width:18px; height:18px}
.urg-tel:hover{text-decoration:underline}

/* ============================================================
   RESULTADOS — antes e depois
   ============================================================ */
.resultados{padding:clamp(64px,8vw,110px) 0; background:var(--branco)}
.ad-lista{display:flex; flex-direction:column; gap:clamp(34px,5vw,66px)}
.ad-linha{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,5vw,58px); align-items:center}
.ad-invert .ad-foto{order:2}
.ad-foto{position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sombra); background:#0a1420; align-self:center; width:100%}
.ad-foto-lentes{max-width:420px; margin-inline:auto}
.ad-foto img{width:100%; height:100%; object-fit:cover; display:block}
.ad-tag{position:absolute; left:14px; top:14px; z-index:2; background:rgba(255,255,255,.94);
  color:var(--navy); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:99px; box-shadow:var(--sombra-sutil)}
.ad-par{display:grid; grid-template-columns:1fr 1fr; gap:3px; background:#0a1420}
.ad-radio{position:relative; overflow:hidden}
.ad-radio img{width:100%; height:100%; object-fit:cover; aspect-ratio:834/688}
.ad-rot{position:absolute; left:9px; top:9px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:99px; color:#fff}
.ad-rot-antes{background:rgba(20,36,58,.85)}
.ad-rot-depois{background:var(--azul)}
.ad-txt .olho{margin-bottom:12px}
.ad-txt h3{font-size:clamp(22px,2.5vw,30px); color:var(--navy); line-height:1.12; margin-bottom:12px}
.ad-txt p{font-size:16px; color:var(--tinta-2); margin-bottom:18px; max-width:46ch}
.ad-nota{display:block; font-size:12.5px; color:var(--mut); margin-top:14px}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.vis{opacity:1; transform:none}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero-media{max-width:460px; margin-inline:auto; width:100%}
  .hero-sub{max-width:52ch}
  .sobre-grid{grid-template-columns:1fr; gap:34px}
  .sobre-foto{max-width:460px; order:2}
  .trat-grid{grid-template-columns:repeat(2,1fr)}
  .aval-grid{grid-template-columns:repeat(2,1fr)}
  .confianca-in{grid-template-columns:repeat(2,1fr); gap:16px 8px}
  .conf-item:nth-child(2)::after{display:none}
  .contato-grid{grid-template-columns:1fr}
  .contato-mapa{min-height:320px; order:2}
  .rodape-grid{grid-template-columns:1fr 1fr; gap:28px}
  .urg-in{grid-template-columns:1fr; gap:24px}
  .urg-txt p{max-width:60ch}
  .ad-linha{grid-template-columns:1fr; gap:22px}
  .ad-invert .ad-foto{order:0}
  .ad-foto-lentes{max-width:360px}
}

@media (max-width:820px){
  .nav{display:none}
  .marca-txt em{display:none}
  /* jornada vira seção normal em telas estreitas */
  .trilho{height:auto}
  .trilho-palco{position:static; height:auto; padding:clamp(56px,10vw,80px) 0; display:block}
  .passo{opacity:1; transform:none}
  .passo.on .passo-ponto,.passo-ponto{background:var(--azul-mid); border-color:#fff}
  .jornada-linha .linha-ativa{stroke-dashoffset:0}
}

@media (max-width:640px){
  body{font-size:15.5px}
  .so-desktop{display:none}
  .btn-mini{padding:11px 15px}
  .hero{padding-top:calc(72px + 44px)}
  .hero-ctas{gap:11px}
  .hero-ctas .btn{flex:1 1 auto; justify-content:center}
  .chip-24{left:8px; top:12px}
  .chip-rev{right:8px; bottom:12px; max-width:200px}
  .trat-grid{grid-template-columns:1fr}
  .aval-grid{grid-template-columns:1fr}
  .galeria{grid-template-columns:1fr}
  .g-grande{grid-row:auto}
  .g-item{aspect-ratio:4/3}
  .confianca-in{grid-template-columns:1fr 1fr}
  .rodape-grid{grid-template-columns:1fr}
  .rodape-fim{flex-direction:column}
  .cta-botoes .btn{flex:1 1 auto; justify-content:center}
  .wpp-flut span{display:none}
  .wpp-flut{padding:15px; right:16px; bottom:16px}
  .urg-titulo b{white-space:normal}
  .ad-foto-lentes{max-width:320px}
  .ad-txt p{max-width:100%}
}

@media (max-width:380px){
  .marca-txt strong{font-size:16px}
  .btn{padding:14px 18px; font-size:14.5px}
}

/* telas muito estreitas (≈320px) — cabeçalho compacto, sem overflow */
@media (max-width:360px){
  .cab-in{gap:8px}
  .marca{gap:9px}
  .marca-logo{width:38px; height:38px}
  .marca-txt strong{font-size:15px}
  .btn-mini{padding:10px 13px; font-size:13.5px; gap:.4em}
  .btn-mini .ic{display:none}
}

/* Alturas curtas — compacta a jornada sticky (notebooks 768/800) */
@media (min-width:821px) and (max-height:840px){
  .trilho-palco{padding-top:66px; padding-bottom:16px}
  .passos{gap:12px}
  .passo p{font-size:13.5px; line-height:1.45}
  .passo h3{font-size:20px}
  .jornada-cab{margin-bottom:16px}
  .jornada-cab h2{font-size:30px}
  .jornada-cab .sec-sub{font-size:15px; margin-top:8px}
  .jornada-cta{margin-top:16px}
}
@media (min-width:821px) and (max-height:680px){
  .jornada-cab .sec-sub{display:none}
  .passo p{display:none}
  .passo h3{margin-bottom:0}
  .passos{gap:14px}
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .trilho{height:auto}
  .trilho-palco{position:static; height:auto; padding:80px 0; display:block}
  .passo{opacity:1; transform:none}
  .jornada-linha .linha-ativa{stroke-dashoffset:0}
  .hero-foto{animation:none}
}