/* =========================================================
   CRIIE MAIS — COMUNICAÇÃO ELEITORAL 2026
   Sistema visual v3 — "dossiê de operação"

   Direção: documento oficial de campanha + gráfico de
   telejornal. Arestas vivas, réguas de hairline, números
   tabulares, tipografia expandida monumental.
   Sem cantos arredondados, sem sombras difusas, sem blobs.
   ========================================================= */

:root{
  /* superfícies — alternância dura entre preto e marinho */
  --black:    #000000;
  --ink:      #05070C;
  --navy:     #0A1428;
  --navy-2:   #0E1C38;
  --navy-3:   #132548;

  /* réguas */
  --rule:     #1B2C4E;
  --rule-2:   #2A4270;

  /* texto */
  --white:    #FFFFFF;
  --off:      #E8EDF6;
  --muted:    #93A3C0;
  --muted-2:  #64748F;

  /* acento */
  --accent:   #FA0038;   /* vermelho da marca Criie+ (extraído do ícone) */
  --accent-2: #FF5C7A;   /* variação clara — textos pequenos e hover */
  --accent-d: #8E0020;   /* variação profunda — réguas e bordas */

  /* estado / marca */
  --live:     #21C879;
  --red:      #FF9F43;   /* alerta de formulário — âmbar, para não se confundir com o acento */

  --ff-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap: 1280px;
  --gut: clamp(20px,4vw,52px);
  --pad: clamp(76px,9vw,152px);

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--off);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* grão global — dá corpo às áreas chapadas sem virar gradiente */
body::after{
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }

h1,h2,h3,h4{
  margin:0; font-family:var(--ff-display); font-weight:800;
  line-height:.98; letter-spacing:-.02em;
}

/* tipografia display expandida — o gesto monumental */
.h1,.h2,.h-hero,.h-urg{
  font-variation-settings:"wdth" 112;
  text-transform:uppercase;
}

.mono{
  font-family:var(--ff-mono); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

.accent{ color:var(--accent); }
.muted-strong{ color:var(--muted); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:880px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--black); padding:12px 20px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* =========================================================
   BOTÕES — retangulares, densos, com deslize de preenchimento
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--ff-display); font-weight:800; font-size:13.5px;
  font-variation-settings:"wdth" 108;
  letter-spacing:.08em; text-transform:uppercase;
  padding:19px 34px; border:0; cursor:pointer; text-align:center;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .3s var(--ease), transform .2s var(--ease);
}
.btn-accent{ background:var(--accent); color:var(--black); }
.btn-accent::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--white); transform:translateY(101%);
  transition:transform .38s var(--ease);
}
.btn-accent:hover::before{ transform:translateY(0); }
.btn-accent:active{ transform:translateY(1px); }

.btn-sm{ padding:12px 20px; font-size:11.5px; }
.btn-lg{ padding:22px 40px; font-size:14.5px; }
.btn-xl{ padding:27px 50px; font-size:16px; }
.btn-block{ display:flex; width:100%; }

/* seta que avança no hover */
.btn .seta{ transition:transform .3s var(--ease); }
.btn:hover .seta{ transform:translateX(5px); }

.link-seta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-weight:500; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:10px 0; position:relative;
  transition:color .25s var(--ease);
}
.link-seta::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.link-seta:hover{ color:var(--accent); }
.link-seta:hover::after{ transform:scaleX(1); }

/* =========================================================
   NAV — barra institucional fina
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.nav.is-stuck{ background:rgba(5,7,12,.93); backdrop-filter:blur(16px); border-bottom-color:var(--rule); }
.nav-in{
  max-width:var(--wrap); margin:0 auto;
  padding:0 var(--gut); height:74px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav-logo img{ height:34px; width:auto; }
.nav-right{ display:flex; align-items:stretch; gap:0; height:100%; }
.nav-clock{
  display:flex; align-items:center; gap:12px;
  padding-inline:24px; font-size:10px; color:var(--muted);
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
}
.nav-clock::before{
  content:""; width:6px; height:6px; background:var(--live);
  animation:blink 2.4s steps(1,end) infinite;
}
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.2} }
.nav .btn{ align-self:center; margin-left:22px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; background:var(--ink);
  padding-top:clamp(120px,14vw,168px);
  border-bottom:1px solid var(--rule);
}
/* grid vertical visível — estrutura como elemento gráfico */
.hero-grade{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(12,1fr);
}
.hero-grade span{ border-left:1px solid rgba(255,255,255,.035); }
.hero-grade span:last-child{ border-right:1px solid rgba(255,255,255,.035); }

.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,3vw,44px);
  align-items:end;
  padding-bottom:clamp(56px,7vw,96px);
}
.hero-copy{ grid-column:1 / span 7; }
.hero-media{ grid-column:8 / span 5; }

.selo{
  display:inline-flex; align-items:stretch; margin-bottom:36px;
  border:1px solid var(--rule-2); font-size:10px;
}
.selo > span{ display:flex; align-items:center; padding:11px 16px; }
.selo-k{ color:var(--muted); border-right:1px solid var(--rule-2); }
.selo-num{ color:var(--accent); background:rgba(255,198,41,.07); }
.selo-dot{
  width:6px; height:6px; background:var(--live); margin-right:11px; flex:none;
  animation:blink 2.4s steps(1,end) infinite;
}

.h-hero{
  font-size:clamp(42px,7vw,96px); font-weight:900;
  letter-spacing:-.035em; line-height:.96;
}
/* padding interno dá espaço para acentos sem quebrar a cortina */
.h-hero .ln{ display:block; overflow:hidden; padding-top:.1em; margin-top:-.1em; }
.h-hero .ln > span{ display:block; }
.h-hero em{ font-style:normal; }

.hero-sub{
  margin-top:32px; padding-left:20px; border-left:3px solid var(--accent);
  font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"wdth" 105;
  font-size:clamp(18px,2.1vw,25px); line-height:1.24; color:var(--white);
}
.hero-text{ margin-top:26px; max-width:50ch; color:var(--muted); font-size:16.5px; }

.hero-ctas{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 32px; margin-top:40px; }

.hero-trust{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; font-size:10px; color:var(--muted-2); }
.hero-trust li{ display:flex; align-items:center; gap:9px; }
.hero-trust li::before{ content:""; width:4px; height:4px; background:var(--live); }

/* ---------- tratamento cinematográfico de imagem ---------- */
.foto{
  position:relative; margin:0; overflow:hidden; background:var(--navy);
  border:1px solid var(--rule-2);
}
.foto img{
  width:100%; height:100%; object-fit:cover; position:relative; z-index:1;
  filter:contrast(1.16) saturate(.62) brightness(.82);
}
/* duotone marinho */
.foto::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,20,40,.34), rgba(5,7,12,.72));
  mix-blend-mode:multiply;
}
/* vinheta dura + varredura */
.foto::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(0,0,0,.68) 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
.hero-media .foto{ aspect-ratio:3/4; }

/* placeholder enquanto não há foto */
.foto-ph{ position:absolute; inset:0; z-index:1; display:none; }
.foto.sem-imagem .foto-ph{ display:block; }
.foto.sem-imagem img{ display:none; }
.foto-ph::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(160deg,var(--navy-3),var(--ink)),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:cover, 15px 15px;
}
.foto-ph-txt{
  position:absolute; inset:auto 0 46%; text-align:center; padding-inline:24px;
  display:flex; flex-direction:column; gap:9px; font-size:9.5px; color:var(--muted-2);
}
.foto-ph-txt strong{ color:var(--muted); font-size:10.5px; letter-spacing:.22em; }
.foto-ph-txt code{ font-family:var(--ff-mono); color:var(--accent); text-transform:none; letter-spacing:0; }
.foto-cantos{ position:absolute; inset:20px 20px 64px; z-index:4; pointer-events:none; }
.foto-cantos::before,.foto-cantos::after{ content:""; position:absolute; width:38px; height:38px; }
.foto-cantos::before{ top:0; left:0; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.foto-cantos::after{ bottom:0; right:0; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }

/* lower-third estilo telejornal sobre a foto */
.chyron{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:stretch; font-size:9.5px;
  border-top:2px solid var(--accent);
}
.chyron-k{ background:var(--accent); color:var(--black); padding:10px 14px; font-weight:600; }
.chyron-v{
  background:rgba(5,7,12,.92); color:var(--off); padding:10px 14px;
  flex:1; display:flex; align-items:center; letter-spacing:.13em;
}

/* =========================================================
   BARRA DE PROVA — números tabulares grandes
   ========================================================= */
.prova{ background:var(--black); border-bottom:1px solid var(--rule); }
.prova-in{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-inline:0;
}
.prova-item{
  padding:34px var(--gut); border-left:1px solid var(--rule);
  display:flex; flex-direction:column; gap:9px;
  transition:background-color .3s var(--ease);
}
.prova-item:first-child{ border-left:0; }
.prova-item:hover{ background:var(--navy); }
.prova-n{
  font-size:clamp(26px,3vw,38px); font-weight:600; color:var(--accent);
  line-height:1; letter-spacing:.005em;
}
.prova-l{ font-size:12.5px; color:var(--muted); line-height:1.45; max-width:22ch; }

/* =========================================================
   SEÇÕES — cabeçalho de dossiê numerado
   ========================================================= */
.sec{ padding:var(--pad) 0; position:relative; }
.sec-black{ background:var(--black); }
.sec-navy{ background:var(--navy); }
.sec + .sec{ border-top:1px solid var(--rule); }

.cab{ margin-bottom:clamp(40px,5vw,64px); }
.eyebrow{
  display:flex; align-items:center; gap:16px;
  font-size:10px; color:var(--accent); margin-bottom:24px;
}
.eyebrow .sec-n{
  color:var(--black); background:var(--accent);
  padding:4px 9px; font-weight:600; letter-spacing:.1em;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--rule-2); max-width:180px; }

.h2{ font-size:clamp(28px,4.4vw,58px); font-weight:800; letter-spacing:-.03em; }
.lead{ margin-top:26px; max-width:60ch; color:var(--muted); font-size:16.5px; }

.mid-cta{ margin-top:clamp(44px,5vw,64px); display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; }
.mid-cta-c{ justify-content:center; }
.mid-cta-nota{ font-size:10px; color:var(--muted-2); }

/* microanimações de entrada */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
/* régua que se desenha */
.regua{ height:1px; background:var(--rule); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease); }
.regua.is-in{ transform:scaleX(1); }

/* =========================================================
   DOR — livro-razão de falhas
   ========================================================= */
.dor-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--rule); }
.dor-item{
  display:flex; align-items:center; gap:20px;
  padding:24px 28px 24px 0; border-bottom:1px solid var(--rule);
  font-size:16.5px; color:var(--muted);
  transition:color .28s var(--ease), padding-left .28s var(--ease), background-color .28s var(--ease);
}
.dor-grid > :nth-child(odd){ padding-right:44px; }
.dor-grid > :nth-child(even){ padding-left:44px; }
.dor-grid > :nth-child(even):hover{ padding-left:52px; }
.dor-grid > :nth-child(odd):hover{ padding-left:8px; }
.dor-item:hover{ color:var(--white); }
.dor-i{ font-family:var(--ff-mono); font-size:11px; color:var(--rule-2); flex:none; transition:color .28s var(--ease); }
.dor-item:hover .dor-i{ color:var(--red); }

.dor-fecho{
  margin-top:clamp(44px,5vw,64px); max-width:56ch;
  font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"wdth" 104;
  font-size:clamp(19px,2.3vw,27px); line-height:1.32; color:var(--muted);
}
.dor-fecho strong{ color:var(--accent); font-weight:800; }

/* =========================================================
   COMPARATIVO — blocagem chapada
   ========================================================= */
.vs{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--rule); }
.vs-col{ padding:clamp(28px,3.4vw,44px); }
.vs-a{ background:var(--ink); border-right:1px solid var(--rule); }
.vs-b{ background:var(--navy-2); position:relative; }
.vs-b::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); }
.vs-head{ padding-bottom:20px; margin-bottom:8px; border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.vs-label{ font-size:10px; color:var(--muted-2); }
.vs-b .vs-label{ color:var(--accent); }
.vs-carimbo{ font-family:var(--ff-mono); font-size:9px; letter-spacing:.18em; color:var(--muted-2); border:1px solid var(--rule-2); padding:4px 8px; }
.vs-b .vs-carimbo{ color:var(--black); background:var(--accent); border-color:var(--accent); }
.vs-list li{
  padding:15px 0; color:var(--muted); font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex; align-items:center; gap:14px;
}
.vs-list li:last-child{ border-bottom:0; }
.vs-a .vs-list li::before{ content:"—"; font-family:var(--ff-mono); color:var(--muted-2); font-size:12px; }
.vs-b .vs-list li{ color:var(--white); }
.vs-b .vs-list li::before{ content:"■"; color:var(--accent); font-size:8px; }

/* =========================================================
   CARDS — painéis de aresta viva com índice
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(12,1fr); border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.card{
  grid-column:span 3; position:relative;
  padding:clamp(28px,3vw,40px) clamp(22px,2.2vw,30px) clamp(36px,4vw,52px);
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--ink);
  transition:background-color .32s var(--ease);
}
.card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:bottom;
  transition:transform .34s var(--ease);
}
.card:hover{ background:var(--navy-2); }
.card:hover::before{ transform:scaleY(1); transform-origin:top; }
.card-i{
  display:block; font-family:var(--ff-mono); font-size:10px; letter-spacing:.2em;
  color:var(--muted-2); margin-bottom:clamp(28px,3.4vw,52px);
  transition:color .32s var(--ease);
}
.card:hover .card-i{ color:var(--accent); }
.card h3{
  font-size:clamp(17px,1.6vw,21px); text-transform:uppercase;
  font-variation-settings:"wdth" 106; margin-bottom:14px;
}
.card p{ color:var(--muted); font-size:15px; line-height:1.58; }
.card-wide{ grid-column:span 12; }
.card-wide p{ max-width:74ch; }

/* =========================================================
   PASSOS
   ========================================================= */
.passos{ border-top:1px solid var(--rule); }
.passo{
  display:grid; grid-template-columns:clamp(80px,10vw,150px) 1fr auto;
  gap:clamp(20px,3vw,40px); align-items:center;
  padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--rule);
  position:relative;
}
.passo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--navy-2); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.passo:hover::before{ transform:scaleX(1); }
.passo > *{ position:relative; z-index:1; }
.passo-n{
  font-size:clamp(38px,5.4vw,72px); font-weight:600; color:var(--rule-2);
  line-height:.9; letter-spacing:.01em; transition:color .32s var(--ease);
}
.passo:hover .passo-n{ color:var(--accent); }
.passo-body h3{ font-size:clamp(18px,2vw,25px); text-transform:uppercase; font-variation-settings:"wdth" 106; margin-bottom:9px; }
.passo-body p{ color:var(--muted); max-width:56ch; font-size:15.5px; }
.passo-prazo{
  font-size:9.5px; color:var(--accent); white-space:nowrap;
  border:1px solid rgba(255,198,41,.4); padding:8px 14px;
}

/* =========================================================
   FORMULÁRIO
   ========================================================= */
.form-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,5vw,80px); align-items:start; }
.form-copy{ position:sticky; top:110px; }
.form-bullets{ margin-top:36px; border-top:1px solid var(--rule); }
.form-bullets li{
  padding:15px 0 15px 28px; border-bottom:1px solid var(--rule);
  position:relative; color:var(--muted); font-size:15.5px;
}
.form-bullets li::before{ content:""; position:absolute; left:0; top:23px; width:9px; height:1px; background:var(--accent); }
.form-selo{ margin-top:30px; display:flex; align-items:flex-start; gap:12px; font-size:10px; color:var(--muted); line-height:1.7; }
.form-selo .selo-dot{ margin-top:5px; margin-right:0; }

.form-box{ background:var(--navy-2); border:1px solid var(--rule-2); padding:clamp(26px,3.2vw,42px); }
.hp{ position:absolute; left:-9999px; }

.etapa-topo{ margin-bottom:30px; }
.etapa-topo .mono{ display:block; font-size:9.5px; color:var(--muted-2); margin-bottom:12px; }
.etapa-barra{ height:2px; background:var(--rule); }
.etapa-barra span{ display:block; height:100%; width:50%; background:var(--accent); transition:width .4s var(--ease); }

.field{ margin-bottom:20px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field label{
  display:block; margin-bottom:9px;
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.field input,.field select{
  width:100%; padding:16px 16px; font-family:var(--ff-body); font-size:16px;
  color:var(--white); background:var(--ink);
  border:1px solid var(--rule-2); border-radius:0; appearance:none;
  transition:border-color .22s var(--ease), background-color .22s var(--ease);
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2393A3C0' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:11px;
  padding-right:44px; cursor:pointer;
}
.field select option{ background:var(--navy-2); color:var(--white); }
.field input::placeholder{ color:var(--muted-2); }
.field input:focus,.field select:focus{ border-color:var(--accent); outline:none; }
.field.erro input,.field.erro select{ border-color:var(--red); }
.msg-campo{ display:block; margin-top:8px; font-size:12px; color:var(--red); }
.ajuda{ display:block; margin-top:9px; font-size:12px; color:var(--muted-2); line-height:1.5; }

#btnEnviar,#btnProximo{ margin-top:12px; }
.btn-spin{
  width:15px; height:15px; display:none;
  border:2px solid rgba(0,0,0,.25); border-top-color:var(--black);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-loading{ pointer-events:none; }
.btn.is-loading .btn-spin{ display:block; }

.btn-voltar{
  display:block; margin:18px auto 0; background:none; border:0; cursor:pointer;
  font-size:9.5px; color:var(--muted-2); padding:8px; transition:color .22s var(--ease);
}
.btn-voltar:hover{ color:var(--accent); }

.form-nota{ margin-top:16px; font-size:12px; color:var(--muted-2); line-height:1.55; text-align:center; }
.form-reassure{
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px 22px;
  margin-top:24px; padding-top:22px; border-top:1px solid var(--rule);
  font-size:9.5px; color:var(--muted-2);
}
.form-reassure li{ display:flex; align-items:center; gap:8px; }
.form-reassure li::before{ content:""; width:4px; height:4px; background:var(--live); }
.form-lgpd{ margin-top:14px; }

.form-msg{ margin-top:22px; padding:22px; }
.form-erro{
  background:rgba(234,51,74,.08); border:1px solid rgba(234,51,74,.45);
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  font-size:14.5px; color:var(--muted);
}
.form-erro strong{ color:var(--white); font-family:var(--ff-display); }
.form-ok{ text-align:center; padding:48px 28px; background:var(--navy-2); border:1px solid rgba(33,200,121,.45); }
.ok-mark{ width:46px; height:46px; margin:0 auto 22px; display:block; border:2px solid var(--live); position:relative; }
.ok-mark::after{
  content:""; position:absolute; left:15px; top:10px; width:13px; height:22px;
  border-right:2.4px solid var(--live); border-bottom:2.4px solid var(--live); transform:rotate(42deg);
}
.form-ok h3{ font-size:23px; text-transform:uppercase; font-variation-settings:"wdth" 106; margin-bottom:13px; }
.form-ok p{ color:var(--muted); margin-bottom:26px; font-size:15.5px; }

/* =========================================================
   AUTORIDADE
   ========================================================= */
.auth-grid{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.auth-item{
  padding:18px 26px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:var(--ff-display); font-weight:700; font-size:14px;
  font-variation-settings:"wdth" 106; text-transform:uppercase; letter-spacing:.02em;
  color:var(--muted); flex:1 1 auto; text-align:center;
  transition:background-color .28s var(--ease), color .28s var(--ease);
}
.auth-item:hover{ background:var(--accent); color:var(--black); }

.auth-frase{
  margin-top:clamp(44px,5vw,64px); font-family:var(--ff-display); font-weight:800;
  font-variation-settings:"wdth" 110; text-transform:uppercase;
  font-size:clamp(21px,3.2vw,40px); letter-spacing:-.025em; line-height:1.14; max-width:25ch;
}
.criterio{
  margin-top:clamp(40px,4.5vw,56px); padding:32px 34px; max-width:68ch;
  border:1px solid var(--rule-2); border-left:3px solid var(--accent); background:var(--ink);
}
.criterio-t{ font-size:9.5px; color:var(--accent); margin-bottom:14px; }
.criterio p:last-child{ color:var(--muted); font-size:15.5px; }

/* =========================================================
   SERVIÇOS
   ========================================================= */
.serv-list{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--rule); }
.serv-list li{
  padding:22px 0 22px 42px; border-bottom:1px solid var(--rule);
  font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"wdth" 108; text-transform:uppercase;
  font-size:clamp(16px,1.8vw,22px); letter-spacing:-.005em;
  position:relative; color:var(--off);
  transition:color .26s var(--ease), padding-left .26s var(--ease);
}
.serv-list > :nth-child(odd){ padding-right:40px; }
.serv-list > :nth-child(even){ padding-left:calc(42px + 40px); }
.serv-list li::before{
  content:""; position:absolute; left:0; top:50%; width:22px; height:1px;
  background:var(--rule-2); transition:width .26s var(--ease), background-color .26s var(--ease);
}
.serv-list > :nth-child(even)::before{ left:40px; }
.serv-list li:hover{ color:var(--accent); }
.serv-list li:hover::before{ width:32px; background:var(--accent); }

/* =========================================================
   URGÊNCIA — bloco preto, relógio de operação
   ========================================================= */
.sec-urg{ background:var(--black); text-align:center; }
.h-urg{ font-size:clamp(40px,8.4vw,116px); font-weight:900; letter-spacing:-.045em; line-height:.95; padding-top:.06em; }

.countdown{
  margin:clamp(40px,5vw,60px) auto 0; display:grid;
  grid-template-columns:repeat(4,1fr); max-width:660px;
  border:1px solid var(--rule);
}
.cd-item{ padding:26px 12px; border-left:1px solid var(--rule); background:var(--ink); }
.cd-item:first-child{ border-left:0; }
.cd-n{ display:block; font-size:clamp(30px,5vw,52px); font-weight:600; color:var(--accent); line-height:1; letter-spacing:.01em; }
.cd-l{ display:block; margin-top:12px; font-size:9px; color:var(--muted-2); }
.cd-cap{ margin-top:20px; font-size:10px; color:var(--muted); }

.prazos{ margin:clamp(40px,5vw,56px) auto 0; max-width:660px; border:1px solid var(--rule); border-bottom:0; }
.prazos li{
  padding:16px 22px; font-size:10px; color:var(--muted);
  display:flex; align-items:center; gap:20px; text-align:left;
  border-bottom:1px solid var(--rule); background:var(--ink);
}
.prazo-d{ color:var(--black); background:var(--accent); padding:4px 9px; flex:none; font-weight:600; }
.prazos li:last-child .prazo-d{ background:var(--red); color:var(--white); }

.urg-text{ margin:clamp(40px,5vw,56px) auto clamp(36px,4vw,48px); max-width:58ch; color:var(--muted); font-size:17px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--rule); }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:28px 52px 28px 0; position:relative;
  font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"wdth" 104;
  font-size:clamp(16px,1.8vw,20px); letter-spacing:-.01em;
  transition:color .22s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--accent); }
.faq-item summary::before,
.faq-item summary::after{
  content:""; position:absolute; right:8px; top:50%; background:var(--accent);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-item summary::before{ width:14px; height:1.6px; transform:translateY(-50%); }
.faq-item summary::after{ width:1.6px; height:14px; right:14px; transform:translateY(-50%); }
.faq-item[open] summary{ color:var(--accent); }
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(90deg); opacity:0; }
.faq-body{ padding:0 60px 32px 0; }
.faq-body p{ color:var(--muted); font-size:15.5px; max-width:70ch; }

/* =========================================================
   CTA FINAL
   ========================================================= */
.sec-final{ background:var(--navy); text-align:center; padding:clamp(90px,11vw,170px) 0; position:relative; overflow:hidden; }
.sec-final::before,.sec-final::after{
  content:""; position:absolute; left:0; right:0; height:3px; background:var(--accent);
}
.sec-final::before{ top:0; }
.sec-final::after{ bottom:0; }
.h-final{ font-size:clamp(30px,5.6vw,68px); }
.sec-final .lead{ margin-inline:auto; margin-bottom:clamp(36px,4vw,48px); }
.final-nota{ margin-top:24px; font-size:9.5px; color:var(--muted-2); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{ background:var(--black); border-top:1px solid var(--rule); padding-top:clamp(56px,6vw,80px); }
.rodape-grid{ display:grid; grid-template-columns:1.9fr 1fr 1fr; gap:44px; padding-bottom:52px; }
.rodape-logo{ height:38px; width:auto; margin-bottom:22px; }
.rodape-tag{ color:var(--muted-2); font-size:12.5px; max-width:42ch; }
.rodape-col h4{ font-size:9.5px; color:var(--accent); margin-bottom:20px; font-family:var(--ff-mono); font-weight:500; }
.rodape-col p{ color:var(--muted); font-size:14px; margin-bottom:9px; }
.rodape-col a{ transition:color .2s var(--ease); }
.rodape-col a:hover{ color:var(--accent); }
.rodape-legal{ border-top:1px solid var(--rule); padding-top:30px; padding-bottom:120px; }
.rodape-legal p{ color:var(--muted-2); font-size:12px; line-height:1.7; margin-bottom:11px; max-width:100ch; }
.rodape-copy{ margin-top:22px; }

/* barra fixa mobile */
.barra-mobile{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; text-align:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.95); backdrop-filter:blur(12px); border-top:2px solid var(--accent);
}
.barra-nota{ display:block; margin-top:9px; font-size:9px; color:var(--muted-2); }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; row-gap:48px; align-items:start; }
  .hero-copy,.hero-media{ grid-column:1 / -1; }
  .hero-media{ max-width:460px; }
  .hero-grade{ display:none; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .card{ grid-column:span 1; }
  .card-wide{ grid-column:span 2; }
  .form-grid{ grid-template-columns:1fr; }
  .form-copy{ position:static; }
  .prova-in{ grid-template-columns:repeat(2,1fr); }
  .prova-item:nth-child(3){ border-left:0; }
  .prova-item:nth-child(-n+2){ border-bottom:1px solid var(--rule); }
  .rodape-grid{ grid-template-columns:1fr 1fr; }
  .rodape-marca{ grid-column:span 2; }
}

@media (max-width:780px){
  body{ font-size:16px; }
  .nav-in{ height:64px; }
  .nav-clock{ display:none; }
  .nav .btn{ display:none; }
  .hero{ padding-top:104px; }
  .hero-media{ max-width:100%; order:2; }
  .hero-media .foto{ aspect-ratio:4/3; }
  .h-hero{ font-size:clamp(36px,10.4vw,54px); }
  .hero-sub{ margin-top:24px; font-size:19px; }
  .hero-text{ margin-top:18px; font-size:15.5px; line-height:1.55; }
  .hero-ctas{ margin-top:30px; flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }
  /* CTAs longos não podem quebrar em três linhas no celular */
  .btn{ gap:10px; }
  .btn-xl{ padding:21px 18px; font-size:13.5px; letter-spacing:.05em; }
  .btn-lg{ padding:19px 18px; font-size:13px; letter-spacing:.05em; }
  .link-seta{ justify-content:center; }
  .selo{ margin-bottom:24px; font-size:9px; }
  .selo > span{ padding:9px 12px; }

  .prova-in{ grid-template-columns:1fr; }
  .prova-item{ border-left:0; border-bottom:1px solid var(--rule); padding:20px var(--gut);
               flex-direction:row; align-items:baseline; gap:16px; }
  .prova-n{ font-size:22px; min-width:62px; }
  .prova-l{ font-size:12.5px; }

  .dor-grid{ grid-template-columns:1fr; }
  .dor-grid > :nth-child(odd),
  .dor-grid > :nth-child(even){ padding-left:0; padding-right:0; }
  .dor-grid > :nth-child(odd):hover,
  .dor-grid > :nth-child(even):hover{ padding-left:10px; }

  .vs{ grid-template-columns:1fr; }
  .vs-a{ border-right:0; border-bottom:1px solid var(--rule); }

  .cards{ grid-template-columns:1fr; }
  .card,.card-wide{ grid-column:span 1; }

  .passo{ grid-template-columns:64px 1fr; row-gap:12px; }
  .passo-prazo{ grid-column:2; justify-self:start; }

  .serv-list{ grid-template-columns:1fr; }
  .serv-list > :nth-child(odd),
  .serv-list > :nth-child(even){ padding-left:42px; padding-right:0; }
  .serv-list > :nth-child(even)::before{ left:0; }

  .field-row{ grid-template-columns:1fr; gap:0; }
  .countdown{ grid-template-columns:repeat(2,1fr); }
  .cd-item:nth-child(3){ border-left:0; }
  .cd-item:nth-child(-n+2){ border-bottom:1px solid var(--rule); }
  .prazos li{ flex-direction:column; align-items:flex-start; gap:9px; }
  .faq-body{ padding-right:0; }
  .mid-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .mid-cta .btn{ width:100%; }
  .rodape-grid{ grid-template-columns:1fr; }
  .rodape-marca{ grid-column:span 1; }
  .barra-mobile{ display:block; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .regua{ transform:scaleX(1); }
}

/* =========================================================
   v4 — OTIMIZAÇÃO MOBILE
   Tráfego vem de Instagram e WhatsApp: navegador in-app,
   uma mão, tela pequena, pouca paciência.
   ========================================================= */

:root{ --tap:48px; }

/* cauda de texto que só aparece no desktop */
.desk{ display:inline; }

/* âncoras não podem ficar sob a nav fixa */
section[id]{ scroll-margin-top:88px; }

/* prefixo @ colado ao campo do Instagram */
.input-prefixo{ display:flex; align-items:stretch; border:1px solid var(--rule-2); background:var(--ink); }
.input-prefixo > span{
  display:flex; align-items:center; padding:0 4px 0 16px;
  font-family:var(--ff-body); font-size:16px; color:var(--muted-2);
}
.input-prefixo input{ border:0 !important; padding-left:2px; background:transparent; }
.input-prefixo:focus-within{ border-color:var(--accent); }

/* chips de escolha — um toque, sem picker nativo */
.campo-chips{ border:0; margin:0 0 22px; padding:0; }
.campo-chips legend{
  padding:0; margin-bottom:11px;
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ position:relative; flex:1 1 auto; }
.chip input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.chip span{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:var(--tap); padding:12px 16px;
  border:1px solid var(--rule-2); background:var(--ink);
  font-family:var(--ff-body); font-size:14.5px; color:var(--muted);
  transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.chip input:checked + span{ border-color:var(--accent); background:var(--accent); color:var(--black); font-weight:600; }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.campo-chips.erro .chip span{ border-color:var(--red); }
.campo-chips .msg-campo,.campo-chips .ajuda{ margin-top:10px; }

/* barra fixa: diagnóstico + WhatsApp */
.barra-acoes{ display:grid; grid-template-columns:1fr auto; gap:8px; }
.barra-acoes .btn{ min-height:var(--tap); }
.btn-whats{
  background:#1FA855; color:#fff; padding-inline:18px;
  display:flex; align-items:center; justify-content:center;
}
.btn-whats::before{ display:none; }
.btn-whats:active{ transform:translateY(1px); }

@media (max-width:780px){
  /* ---- texto: corta as caudas ---- */
  .desk{ display:none; }

  section[id]{ scroll-margin-top:72px; }

  /* ---- áreas clicáveis ---- */
  .btn{ min-height:var(--tap); }
  .faq-item summary{ padding-block:22px; min-height:var(--tap); display:flex; align-items:center; }
  .serv-list li,.dor-item,.form-bullets li,.auth-item{ min-height:var(--tap); }
  .rodape-col a,.link-seta{ display:inline-block; padding-block:10px; }

  /* ---- hero mais curto ---- */
  .hero{ padding-top:92px; }
  .hero-grid{ padding-bottom:44px; row-gap:36px; }
  .hero-sub{ font-size:18px; padding-left:16px; }
  .hero-text{ max-width:none; }
  .hero-trust{ gap:8px 18px; font-size:9px; }
  .hero-media .foto{ aspect-ratio:16/10; }
  .foto-cantos{ inset:14px 14px 52px; }
  .chyron{ font-size:8.5px; }
  .chyron-k,.chyron-v{ padding:9px 11px; }

  /* ---- seções mais justas ---- */
  :root{ --pad:clamp(56px,13vw,76px); }
  .cab{ margin-bottom:32px; }
  .lead{ margin-top:20px; font-size:15.5px; }
  .eyebrow{ margin-bottom:18px; }
  .eyebrow::after{ max-width:60px; }

  /* ---- prova: 2 colunas compactas em vez de 4 linhas ---- */
  .prova-in{ grid-template-columns:repeat(2,1fr); }
  .prova-item{
    flex-direction:column; align-items:flex-start; gap:6px;
    padding:20px 18px; border-left:1px solid var(--rule);
  }
  .prova-item:nth-child(odd){ border-left:0; }
  .prova-item:nth-child(-n+2){ border-bottom:1px solid var(--rule); }
  .prova-n{ font-size:23px; min-width:0; }
  .prova-l{ font-size:11.5px; }

  /* ---- listas densas ---- */
  .dor-item{ font-size:15.5px; padding-block:18px; gap:16px; }
  .dor-fecho{ font-size:19px; }
  .vs-list li{ font-size:15px; padding-block:13px; }
  .card{ padding:24px 20px 30px; }
  .card-i{ margin-bottom:20px; }
  .passo{ padding-block:24px; }
  .passo-body p{ font-size:14.5px; }

  /* ---- serviços em duas colunas compactas ---- */
  .serv-list{ grid-template-columns:repeat(2,1fr); }
  .serv-list > :nth-child(odd),
  .serv-list > :nth-child(even){ padding:16px 10px 16px 20px; }
  .serv-list li{ font-size:13px; display:flex; align-items:center; }
  .serv-list li::before{ width:10px; left:0; }
  .serv-list > :nth-child(even)::before{ left:0; }
  .serv-list > :nth-child(even){ border-left:1px solid var(--rule); padding-left:26px; }
  .serv-list li:hover::before{ width:14px; }

  /* ---- contador numa linha só ---- */
  .countdown{ grid-template-columns:repeat(4,1fr); }
  .cd-item{ padding:18px 4px; border-left:1px solid var(--rule); border-bottom:0; }
  .cd-item:nth-child(3){ border-left:1px solid var(--rule); }
  .cd-n{ font-size:27px; }
  .cd-l{ margin-top:8px; font-size:8px; letter-spacing:.1em; }
  .prazos li{ flex-direction:row; align-items:center; gap:12px; font-size:9px; padding:14px 14px; }
  .prazo-d{ padding:4px 7px; }

  /* ---- formulário ---- */
  .form-box{ padding:22px 18px 26px; }
  .field{ margin-bottom:16px; }
  .field input,.field select{ padding:15px 14px; font-size:16px; } /* 16px evita zoom no iOS */
  .field select{ min-height:var(--tap); }
  .form-bullets{ margin-top:28px; }
  .form-bullets li{ font-size:14.5px; padding-block:13px; }
  .chips{ gap:8px; }
  .chip{ flex:1 1 calc(50% - 4px); }
  .chip span{ font-size:14px; padding:12px 10px; }

  /* respiro para a barra fixa não cobrir o fim das seções */
  .rodape-legal{ padding-bottom:132px; }
  .sec-final{ padding-bottom:clamp(80px,14vw,110px); }
}

/* telas bem estreitas */
@media (max-width:380px){
  .cd-n{ font-size:23px; }
  .chip span{ font-size:13px; }
  .barra-acoes .btn{ font-size:12px; padding-inline:12px; }
  .serv-list li{ font-size:12px; }
}

/* menos movimento em telas pequenas: economiza bateria e evita jank */
@media (max-width:780px){
  .passo::before,.card::before{ transition-duration:.001ms; }
  body::after{ opacity:.02; }
}

/* alvos de toque que ainda ficavam abaixo de 44px */
@media (max-width:780px){
  .nav-logo{ display:flex; align-items:center; min-height:var(--tap); padding-right:8px; }
  .link-seta{ min-height:var(--tap); display:inline-flex; align-items:center; padding-block:14px; }
  .rodape-col a{ padding-block:12px; }
}

/* .chip é um <label> dentro de .field — precisa anular o estilo de rótulo */
.field .chip,
.campo-chips .chip{
  margin-bottom:0; text-transform:none; letter-spacing:normal;
  font-family:var(--ff-body); font-size:inherit; color:inherit;
}

/* =========================================================
   v5 — CORREÇÕES DE LAYOUT
   ========================================================= */

/* A — a imagem do hero acompanha a altura do texto: sem vazio no canto */
.hero-grid{ align-items:stretch; }
.hero-media{ display:flex; align-items:stretch; }
.hero-media .foto{ width:100%; aspect-ratio:auto; min-height:520px; }

/* C — divisória real entre as duas colunas de sintomas */
.dor-grid > :nth-child(odd){ padding-right:44px; }
.dor-grid > :nth-child(even){ padding-left:44px; border-left:1px solid var(--rule); }
.dor-grid > :nth-child(odd):hover,
.dor-grid > :nth-child(even):hover{ padding-left:0; }
.dor-grid > :nth-child(even):hover{ padding-left:44px; }
.dor-item:hover .dor-i{ color:var(--accent); }

/* D — rótulos da barra de prova cabem em uma linha */
.prova-l{ max-width:26ch; }

/* E — fecho que equilibra a altura das colunas do comparativo */
.vs-col{ display:flex; flex-direction:column; }
.vs-list{ flex:1; }
.vs-fecho{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--rule);
  font-size:13.5px; line-height:1.55; color:var(--muted-2);
}
.vs-b .vs-fecho{ color:var(--accent-2); }

/* F — cards em 3 + 2: linhas de leitura confortáveis */
.card{ grid-column:span 4; }
.card:nth-of-type(4),
.card:nth-of-type(5){ grid-column:span 6; }
.card-wide{ grid-column:span 6; }
.card-wide p{ max-width:52ch; }

/* H — título do formulário não pode deixar "força." órfã */
.sec-form .h2{ font-size:clamp(26px,3.3vw,44px); }

/* I — frase de autoridade em três linhas fechadas */
.auth-frase{ max-width:none; }

/* J — o dia da votação deixa de competir com o acento */
.prazos li:last-child .prazo-d{ background:var(--white); color:var(--black); }

/* B — faixa intermediária: imagem em corte panorâmico, largura cheia */
@media (min-width:781px) and (max-width:1080px){
  .hero-media{ max-width:none; }
  .hero-media .foto{ aspect-ratio:2.2/1; min-height:0; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .card,.card:nth-of-type(4),.card:nth-of-type(5),.card-wide{ grid-column:span 1; }
}

@media (max-width:1080px){
  .hero-grid{ align-items:start; }
  .hero-media .foto{ min-height:0; aspect-ratio:2.2/1; }
}

@media (max-width:780px){
  .dor-grid > :nth-child(even){ border-left:0; }
  .dor-grid > :nth-child(odd),
  .dor-grid > :nth-child(even){ padding-left:0; padding-right:0; }
  .dor-grid > :nth-child(odd):hover,
  .dor-grid > :nth-child(even):hover{ padding-left:10px; }
  .hero-media .foto{ aspect-ratio:16/10; }
  .vs-fecho{ font-size:13px; margin-top:20px; }
}

/* v6 — enquadramento da foto do hero em cada proporção.
   O rosto fica a ~58% da altura da imagem: em cortes largos é preciso
   descer a janela de recorte, senão a cabeça sai cortada. */
.hero-media .foto img{ object-position:52% 45%; }
@media (max-width:1080px){
  .hero-media .foto img{ object-position:50% 60%; }
}
@media (max-width:780px){
  .hero-media .foto{ aspect-ratio:4/3; }
  .hero-media .foto img{ object-position:50% 62%; }
}

/* =========================================================
   v7 — BOTÃO FLUTUANTE DO WHATSAPP
   Aresta viva como o resto do sistema: quadrado, não círculo.
   O rótulo se abre no hover e some de novo.
   ========================================================= */
.fab-whats{
  position:fixed; right:28px; bottom:28px; z-index:95;
  display:flex; align-items:stretch;
  background:#1FA855; color:#fff;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.fab-whats.is-in{ opacity:1; visibility:visible; transform:none; }
.fab-whats:hover{ background:#25C464; }

.fab-icone{
  display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; flex:none;
}
.fab-rotulo{
  display:flex; align-items:center; overflow:hidden;
  max-width:0; white-space:nowrap;
  font-family:var(--ff-display); font-weight:700; font-size:13px;
  font-variation-settings:"wdth" 106; letter-spacing:.05em; text-transform:uppercase;
  transition:max-width .38s var(--ease), padding .38s var(--ease);
}
.fab-whats:hover .fab-rotulo,
.fab-whats:focus-visible .fab-rotulo{ max-width:230px; padding-left:22px; }

/* pulso discreto de chamada, só uma vez a cada ciclo longo */
.fab-whats::after{
  content:""; position:absolute; inset:0; z-index:-1;
  border:2px solid #1FA855; animation:fabPulso 3.6s ease-out infinite;
}
@keyframes fabPulso{
  0%   { transform:scale(1);    opacity:.55; }
  60%  { transform:scale(1.28); opacity:0; }
  100% { transform:scale(1.28); opacity:0; }
}

/* no celular a barra fixa já tem o botão verde — dois seria redundante */
@media (max-width:780px){
  .fab-whats{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .fab-whats::after{ animation:none; }
}

/* v9 — o anel de foco não pode ser vermelho em cima do vermelho:
   sobre o acento ele vira branco, para continuar visível no teclado. */
.btn-accent:focus-visible,
.chip input:checked:focus-visible + span,
.prazo-d:focus-visible{ outline-color:var(--white); }