/* site novo — estilos (sem dependências do site antigo)
   Paleta e fontes do site atual (css/style.css); linguagem visual do blog.chatpro.com.br. */

:root {
	--green-5:hsl(143,70%,96%);
	--green-30:hsl(143,70%,28%);
	--green-40:hsl(143,70%,38%);
	--green-50:hsl(143,70%,48%);
	--green-60:hsl(143,70%,58%);
	--green-70:hsl(143,90%,68%);

	--gray-0:hsl(143,10%,100%);
	--gray-10:hsl(143,10%,90%);
	--gray-20:hsl(143,10%,80%);
	--gray-30:hsl(143,10%,70%);
	--gray-40:hsl(143,10%,60%);
	--gray-50:hsl(143,10%,50%);
	--gray-60:hsl(143,10%,40%);
	--gray-70:hsl(143,10%,30%);
	--gray-80:hsl(143,10%,15%);
	--gray-90:hsl(143,10%,5%);

	--headline-font:'Paytone One', 'Arial Black', sans-serif;
	--body-font:'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--line:2px solid var(--gray-90);
	--radius:16px;
	--radius-sm:10px;
	--gutter:max(16px, 4vw);
	--section:clamp(4rem, 9vw, 7.5rem);
}

*, *::before, *::after {box-sizing:border-box;}
html {scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body {margin:0; background:var(--gray-0); color:var(--gray-90); font-family:var(--body-font); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img {max-width:100%; height:auto; display:block;}
a {color:inherit;}
h1, h2, h3, h4, p, ul, ol, figure, blockquote {margin:0;}
ul, ol {padding:0; list-style:none;}
:focus-visible {outline:3px solid var(--green-50); outline-offset:3px;}

.content {width:calc(100% - 2 * var(--gutter)); max-width:1200px; margin:0 auto;}
.section {padding:var(--section) 0;}
.section--mint {background:var(--green-5);}
.section--dark {background:var(--gray-90); color:var(--gray-0);}
.section--green {background:var(--green-50);}

/* tipografia */
.display {font-family:var(--headline-font); font-weight:400; line-height:1; letter-spacing:-0.02em; text-wrap:balance;}
.h1 {font-size:clamp(2.6rem, 6.4vw, 5rem);}
.h2 {font-size:clamp(2.1rem, 4.6vw, 3.6rem);}
.h3 {font-size:clamp(1.75rem, 3.2vw, 2.5rem);}
.lead {font-size:clamp(1.1rem, 1.6vw, 1.3rem); color:var(--gray-70); max-width:38em;}
.section--dark .lead {color:var(--gray-20);}
.eyebrow {display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-40);}
.section--dark .eyebrow {color:var(--green-60);}
.section-head {display:flex; flex-direction:column; gap:1rem; margin-bottom:clamp(2rem, 5vw, 3.5rem);}
.section-head--center {align-items:center; text-align:center;}
.section-head--center .lead {margin:0 auto;}
.mark {background:linear-gradient(transparent 62%, var(--green-60) 62%, var(--green-60) 92%, transparent 92%); padding:0 .08em;}

/* botões — mesmo desenho do site atual */
/* botões: cantos arredondados e hover que "levanta", como os cards de "Para todo contra, um Pró" */
.button {--lift:var(--gray-90); font-family:inherit; font-weight:700; font-size:1rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.85em 1.25em; border:var(--line); border-radius:var(--radius-sm); background:var(--gray-0); color:var(--gray-90); text-decoration:none; cursor:pointer; transition:transform 120ms, box-shadow 120ms, background 120ms;}
.button:hover {transform:translate(-3px, -3px); box-shadow:4px 4px 0 var(--lift);}
.button:active {transform:none; box-shadow:none;}
.button--fill {background:var(--gray-90); color:var(--gray-0); --lift:var(--green-50);}
.button--green {background:var(--green-50); color:var(--gray-90);}
.section--dark .button--green {border-color:var(--green-50); --lift:var(--gray-0);}
.button--light {background:transparent; border-color:var(--gray-0); color:var(--gray-0); --lift:var(--gray-0);}
@media (prefers-reduced-motion:reduce) {.button:hover {transform:none;}}
.button--lg {font-size:1.1rem; min-height:56px;}
.button .ph {font-size:1.2em;}
.link-arrow {display:inline-flex; align-items:center; gap:.4rem; font-weight:700; text-decoration:none; border-bottom:2px solid var(--green-50); padding-bottom:2px;}
.link-arrow:hover {color:var(--green-40);}
.actions {display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;}


/* cabeçalho */
.header {position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--gray-10);}
.header .content {display:flex; align-items:center; gap:2rem; min-height:76px;}
.header-logo img {width:150px; height:auto;}
.nav {display:flex; align-items:center; gap:1.75rem; margin-left:auto; font-weight:500;}
.nav > a:not(.button) {text-decoration:none;}
.nav > a:not(.button):hover {color:var(--green-40);}
.nav .button {min-height:42px; padding:.6em 1em; font-size:.95rem;}
.nav a[aria-current="page"] {color:var(--green-40);}
/* menu "Recursos" */
.nav-drop {position:relative;}
.nav-drop-btn {font:inherit; font-weight:500; color:inherit; background:none; border:0; padding:.5rem 0; display:inline-flex; align-items:center; gap:.3rem; cursor:pointer;}
.nav-drop-btn .ph {font-size:.85em; transition:transform .2s;}
.nav-drop-btn:hover {color:var(--green-40);}
.mega {display:none; position:absolute; top:100%; left:-1.25rem; z-index:60; width:640px; grid-template-columns:1fr 1fr; gap:1.25rem; padding:1.25rem; background:var(--gray-0); border:var(--line); border-radius:var(--radius); box-shadow:8px 8px 0 var(--gray-90);}
.nav-drop::after {content:""; position:absolute; left:0; right:0; top:100%; height:.75rem;}
.nav-drop.open .mega {display:grid;}
.nav-drop.open .nav-drop-btn .ph {transform:rotate(180deg);}
@media (hover:hover) and (min-width:961px) {.nav-drop:hover .mega {display:grid;} .nav-drop:hover .nav-drop-btn .ph {transform:rotate(180deg);}}
.mega-group {display:flex; flex-direction:column; gap:.15rem;}
.mega-title {font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-50); padding:0 .6rem .4rem;}
.mega a {display:flex; gap:.75rem; align-items:flex-start; padding:.6rem; border-radius:var(--radius-sm); text-decoration:none;}
.mega a:hover, .mega a[aria-current="page"] {background:var(--green-5);}
.mega .icon {flex:none; width:36px; height:36px; border-radius:50%; background:var(--gray-90); color:var(--green-60); display:grid; place-items:center; font-size:1.1rem;}
.mega strong {display:block; font-size:.95rem; line-height:1.25;}
.mega small {display:block; color:var(--gray-60); font-size:.82rem; line-height:1.3;}
.menu-toggle {display:none; margin-left:auto; background:none; border:0; font-size:1.8rem; padding:.25rem; cursor:pointer; color:inherit; min-width:44px; min-height:44px;}
@media (max-width:960px) {
	.menu-toggle {display:inline-flex; align-items:center; justify-content:center;}
	.header .content {gap:1rem; min-height:64px;}
	.header-logo img {width:124px;}
	.nav {display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--gray-0); border-bottom:var(--line); padding:.5rem var(--gutter) 1.25rem;}
	.nav.open {display:flex;}
	.nav > a:not(.button) {padding:.9rem 0; border-bottom:1px solid var(--gray-10);}
	.nav .button {margin-top:.75rem;}
	.nav-drop {border-bottom:1px solid var(--gray-10);}
	.nav-drop-btn {width:100%; justify-content:space-between; padding:.9rem 0;}
	.mega {position:static; width:auto; box-shadow:none; border:0; padding:0 0 .75rem; grid-template-columns:1fr; gap:.75rem;}
	.nav-drop::after {display:none;}
}

/* hero */
.hero {padding:clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);}
.hero .content {display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem, 5vw, 4rem); align-items:center;}
.hero-text {display:flex; flex-direction:column; gap:1.5rem;}
.hero-badges {display:flex; flex-wrap:wrap; gap:.5rem;}
.pill {display:inline-flex; align-items:center; gap:.4rem; border:1.5px solid var(--gray-90); border-radius:999px; padding:.3rem .8rem; font-size:.85rem; font-weight:500; background:var(--gray-0);}
.pill .ph {color:var(--green-40); font-size:1.05em;}
.hero-micro {display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-size:.92rem; color:var(--gray-60);}
.hero-micro span {display:inline-flex; align-items:center; gap:.35rem;}
.hero-micro .ph {color:var(--green-40);}
@media (max-width:900px) {
	.hero .content {grid-template-columns:1fr;}
}

/* conversa simulada do hero: cliente atendido pelo agente de IA */
.chat {position:relative; display:flex; flex-direction:column; border:var(--line); border-radius:24px; background:var(--gray-0); overflow:hidden; box-shadow:10px 10px 0 var(--gray-90); max-width:440px; margin-left:auto; width:100%;}
.chat-top {display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; border-bottom:var(--line); background:var(--green-5);}
.chat-avatar {width:38px; height:38px; border-radius:50%; background:var(--gray-90); color:var(--green-60); display:grid; place-items:center; font-family:var(--headline-font); font-size:1rem;}
.chat-top strong {display:block; line-height:1.2;}
.chat-top small {color:var(--gray-60); font-size:.8rem;}
.chat-status {margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; background:var(--gray-90); color:var(--gray-0); font-size:.75rem; font-weight:700; border-radius:999px; padding:.3rem .7rem; white-space:nowrap;}
.pulse {width:8px; height:8px; border-radius:50%; background:var(--green-50); box-shadow:0 0 0 0 var(--green-50); animation:pulse 1.6s infinite;}
@keyframes pulse {70% {box-shadow:0 0 0 7px transparent;} 100% {box-shadow:0 0 0 0 transparent;}}
.chat-body {height:430px; padding:1rem; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:radial-gradient(circle at 1px 1px, var(--gray-10) 1px, transparent 0) 0 0/16px 16px;}
.chat-stream {flex:none; display:flex; flex-direction:column; gap:.6rem;}
.chat-stream > * {animation:msg-in .35s ease both;}
@keyframes msg-in {from {opacity:0; transform:translateY(10px) scale(.98);} to {opacity:1; transform:none;}}
.msg {max-width:84%; padding:.6rem .8rem; border-radius:14px; font-size:.93rem; line-height:1.4;}
.msg time {display:block; text-align:right; font-size:.7rem; color:var(--gray-50); margin-top:.2rem;}
.msg--in {align-self:flex-start; background:var(--gray-0); border:1.5px solid var(--gray-90); border-bottom-left-radius:4px;}
.msg--out {align-self:flex-end; background:var(--green-5); border:1.5px solid var(--gray-90); border-bottom-right-radius:4px;}
.msg--ai {background:var(--gray-90); color:var(--gray-0); border-color:var(--gray-90);}
.msg--ai time {color:var(--gray-40);}
.msg-tag {display:flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green-60); margin-bottom:.2rem;}
.typing-dots {display:flex; gap:4px; padding:.75rem .9rem;}
.typing-dots span {width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; animation:dot 1s infinite;}
.typing-dots span:nth-child(2) {animation-delay:.15s;}
.typing-dots span:nth-child(3) {animation-delay:.3s;}
@keyframes dot {0%, 60%, 100% {transform:none; opacity:.35;} 30% {transform:translateY(-4px); opacity:1;}}
.audio {display:flex; align-items:center; gap:.6rem; min-width:210px;}
.audio-play {width:32px; height:32px; border-radius:50%; background:var(--gray-90); color:var(--gray-0); display:grid; place-items:center; font-size:.85rem; flex:none;}
.audio-wave {display:flex; align-items:center; gap:2px; flex:1;}
.audio-wave i {display:block; width:3px; border-radius:2px; background:var(--gray-60);}
.audio-time {font-size:.75rem; color:var(--gray-60);}
.transcript {margin-top:.5rem; padding:.45rem .6rem; border-radius:8px; background:var(--green-5); border:1px dashed var(--green-40); font-size:.82rem; color:var(--gray-80); animation:msg-in .35s ease both;}
.transcript .ph {color:var(--green-40);}
.quick {align-self:flex-end; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; max-width:90%;}
.quick button {font:inherit; font-size:.82rem; font-weight:700; border:1.5px solid var(--gray-90); border-radius:999px; background:var(--gray-0); padding:.4rem .8rem; color:var(--gray-90); cursor:default; transition:background .2s, transform .2s;}
.quick button.pressed {background:var(--green-50); transform:scale(.95);}
.quick.used button:not(.pressed) {opacity:.45;}
.chat-system {align-self:center; display:inline-flex; align-items:center; gap:.4rem; background:var(--green-50); border:1.5px solid var(--gray-90); border-radius:999px; padding:.35rem .8rem; font-size:.78rem; font-weight:700; text-align:center;}
.chat-input {display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:0 .75rem .75rem; border:1.5px solid var(--gray-20); border-radius:999px; padding:.55rem 1rem; color:var(--gray-40); font-size:.9rem;}
.chat-input .ph {font-size:1.15rem;}
.chat-replay {position:absolute; top:4.6rem; left:50%; transform:translateX(-50%); font:inherit; font-size:.8rem; font-weight:700; display:inline-flex; align-items:center; gap:.35rem; border:1.5px solid var(--gray-90); border-radius:999px; background:var(--gray-0); padding:.35rem .8rem; cursor:pointer; box-shadow:3px 3px 0 var(--gray-90);}
.chat-replay[hidden] {display:none;}
@media (prefers-reduced-motion:reduce) {
	.chat-stream > *, .transcript {animation:none;}
	.pulse, .typing-dots span {animation:none;}
}
@media (max-width:900px) {
	.chat {margin:0 auto; box-shadow:6px 6px 0 var(--gray-90);}
	.chat-body {height:400px;}
}

/* faixa de confiança: clientes + nota no Google em destaque */
.trust {border-top:1px solid var(--gray-10); border-bottom:1px solid var(--gray-10); padding:clamp(2.5rem, 6vw, 4rem) 0;}
.trust .content {display:grid; grid-template-columns:1fr auto; gap:clamp(2rem, 5vw, 4rem); align-items:center;}
.trust-main {display:flex; flex-direction:column; gap:clamp(2.25rem, 4vw, 3rem); min-width:0;}
.trust-title {font-size:clamp(1.8rem, 3.6vw, 2.75rem); max-width:16em;}
/* carrossel de logos, transparente nas pontas */
.logos {overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);}
.logos-track {display:flex; align-items:center; width:max-content; animation:marquee 32s linear infinite;}
.logos-track img {height:34px; width:auto; margin-right:3.25rem; filter:grayscale(1) contrast(1.1); opacity:.75; transition:filter .2s, opacity .2s;}
.logos:hover .logos-track {animation-play-state:paused;}
.logos-track img:hover {filter:none; opacity:1;}
@keyframes marquee {to {transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce) {
	.logos {overflow-x:auto;}
	.logos-track {animation:none;}
}
.google-rating {display:flex; flex-direction:column; gap:.6rem; min-width:280px; border:var(--line); border-radius:var(--radius); background:var(--gray-0); padding:1.5rem 1.75rem; text-decoration:none; box-shadow:8px 8px 0 var(--gray-90); transition:transform 120ms, box-shadow 120ms;}
.google-rating:hover {transform:translate(-3px, -3px); box-shadow:11px 11px 0 var(--gray-90);}
.google-rating-top {display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:.95rem;}
.google-g {width:26px; height:26px; flex:none;}
.google-rating-score {display:flex; align-items:center; gap:.9rem;}
.google-rating-score strong {font-family:var(--headline-font); font-weight:400; font-size:clamp(3.5rem, 7vw, 4.75rem); line-height:.9;}
.google-stars {color:#F2B705; font-size:1.75rem; letter-spacing:.06em; line-height:1;}
.google-rating-count {color:var(--gray-70); font-size:.95rem; border-top:1px solid var(--gray-10); padding-top:.7rem;}
.google-rating-count strong {color:var(--gray-90);}
.stars {color:#F2B705; letter-spacing:.05em;}
@media (max-width:900px) {
	.trust .content {grid-template-columns:1fr;}
	.google-rating {justify-self:start; min-width:0; width:100%; max-width:380px;}
}
@media (max-width:560px) {
	.logos-track img {height:26px; margin-right:2.25rem;}
	.google-rating {box-shadow:6px 6px 0 var(--gray-90);}
}

.compare-title {max-width:14em;}

/* antes e depois: cada cartão mostra o problema (x vermelho) e a solução (✓ e marca-texto) */
.fix-wrap {position:relative; scroll-margin-top:90px;}
.fix-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem;}
.fix {display:flex; flex-direction:column; gap:.9rem; border:var(--line); border-radius:var(--radius); background:var(--gray-0); padding:1.4rem 1.4rem 1.5rem; transition:transform 120ms, box-shadow 120ms;}
.fix:hover {transform:translate(-3px, -3px); box-shadow:6px 6px 0 var(--gray-90);}
.fix-topic {display:inline-flex; align-items:center; gap:.55rem; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-60);}
.fix-topic .icon {width:34px; height:34px; border-radius:50%; background:var(--gray-90); color:var(--green-60); display:grid; place-items:center; font-size:1.05rem;}
.fix-old {display:flex; gap:.55rem; align-items:flex-start; color:var(--gray-70); font-size:1rem; line-height:1.45;}
.fix-old .ph-fill {flex:none; font-size:1.35rem; color:#D93025; margin-top:.05em;}
.fix-new {display:flex; gap:.55rem; align-items:flex-start; font-family:var(--headline-font); font-size:1.3rem; line-height:1.2; margin-top:auto; padding-top:.9rem; border-top:1px dashed var(--gray-20);}
.fix-new .ph {flex:none; font-size:1.5rem; color:var(--green-40); margin-top:-.05em;}
.fix-new .hl {background:linear-gradient(transparent 62%, var(--green-60) 62%, var(--green-60) 94%, transparent 94%); padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
/* animação: só quando o JS está ativo (sem JS, tudo aparece no estado final) */
.fix-anim .fix-new {opacity:0; transform:translateY(10px); transition:opacity .4s ease .25s, transform .45s cubic-bezier(.3,1.5,.5,1) .25s;}
.fix-anim .fix.is-on .fix-new {opacity:1; transform:none;}
/* layout em 4 colunas: título no alto à esquerda, ilustração no canto superior direito (2 linhas),
   2 cartões embaixo do título e os outros 4 ocupando a última linha inteira */
.fix-layout {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.25rem; scroll-margin-top:90px;}
.fix-layout .fix-grid {display:contents;}
.fix-head {grid-column:1 / 4; grid-row:1; align-self:start; margin:0 0 1.25rem; position:relative; z-index:1;}
.fix-head .compare-title {max-width:none; font-size:clamp(2.1rem, 4.4vw, 3.9rem);}
.fix-ilus {grid-column:3 / 5; grid-row:1 / 3; justify-self:end; align-self:center; width:calc(100% - 80px); max-width:440px; margin-right:80px; height:auto; position:relative; z-index:0;}
@media (max-width:1000px) {
	.fix-layout {grid-template-columns:repeat(2, minmax(0, 1fr));}
	.fix-head {grid-column:1 / -1; margin-bottom:0;}
	.fix-ilus {grid-column:1 / -1; grid-row:2; justify-self:center; width:100%; max-width:280px; margin-right:0;}
}
@media (max-width:640px) {
	.fix-layout {grid-template-columns:minmax(0, 1fr);}
	.fix-ilus {max-width:220px;}
}
@media (max-width:640px) {.fix-new {font-size:1.2rem;}}
@media (prefers-reduced-motion:reduce) {.fix-anim .fix-new {transition:none;}}

/* para todo contra, um Pró */
.contras-index {display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem;}
.contra-card {font:inherit; color:inherit; text-align:left; cursor:pointer; display:flex; gap:.9rem; align-items:center; border:var(--line); border-radius:var(--radius-sm); padding:1rem 1.1rem; background:var(--gray-0); transition:transform 120ms, box-shadow 120ms, background 120ms; min-height:72px;}
.contra-card:hover {transform:translate(-3px, -3px); box-shadow:4px 4px 0 var(--gray-90);}
.contra-card .icon {flex:none; width:42px; height:42px; border-radius:50%; background:var(--gray-90); color:var(--green-60); display:grid; place-items:center; font-size:1.3rem;}
.contra-card span {font-weight:700; line-height:1.25;}
.contra-card[aria-selected="true"] {background:var(--gray-90); color:var(--gray-0); transform:translate(-3px, -3px); box-shadow:4px 4px 0 var(--green-50);}
.contra-card[aria-selected="true"] .icon {background:var(--green-50); color:var(--gray-90);}
@media (max-width:900px) {.contras-index {grid-template-columns:1fr 1fr;}}
@media (max-width:560px) {
	.contras-index {gap:.5rem;}
	.contra-card {flex-direction:column; align-items:flex-start; gap:.5rem; padding:.8rem; min-height:0; font-size:.92rem;}
	.contra-card .icon {width:34px; height:34px; font-size:1.1rem;}
}

/* painel: um contra por vez, num card branco */
.contras-panels {margin-top:1.5rem; border:var(--line); border-radius:var(--radius); background:var(--gray-0); padding:0 clamp(1.25rem, 4vw, 3.5rem); scroll-margin-top:90px;}
.contra {display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 6vw, 5rem); align-items:center; padding:clamp(2rem, 5vw, 3.5rem) 0;}
.contra[hidden] {display:none;}
.contra:not([hidden]) {animation:panel-in .3s ease both;}
@keyframes panel-in {from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce) {.contra:not([hidden]) {animation:none;}}
.contra-text {display:flex; flex-direction:column; gap:1.25rem;}
/* citação do empresário: sem caixa, aspas em destaque */
.quote {position:relative; align-self:flex-start; max-width:30em; margin:0; padding:.6rem 0 0 3.6rem;}
.quote::before {content:"“"; position:absolute; left:-.05em; top:-.08em; font-family:var(--headline-font); font-size:5.5rem; line-height:1; color:var(--green-50);}
.quote p {font-size:1.15rem; line-height:1.45; font-style:italic; color:var(--gray-80);}
.quote p::after {content:"”"; font-family:var(--headline-font); font-style:normal; color:var(--green-50); margin-left:.1em;}
.features {display:flex; flex-direction:column; gap:.85rem;}
.features li {display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start;}
.features li .ph {font-size:1.3rem; color:var(--green-40); margin-top:.1rem;}
.features strong {font-weight:700;}
.practice {border-left:4px solid var(--green-50); padding:.25rem 0 .25rem 1rem; color:var(--gray-70);}
.practice strong {color:var(--gray-90);}
.punch {font-family:var(--headline-font); font-size:clamp(1.3rem, 2.2vw, 1.6rem); line-height:1.15;}
.contra-links {display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;}

.contra-visual {position:relative; display:flex; justify-content:center;}
.contra-visual .blob {position:absolute; inset:8% 6% 4%; background:var(--green-5); border-radius:46% 54% 42% 58% / 55% 45% 55% 45%; z-index:0;}
.contra-visual img {position:relative; z-index:1; max-height:420px; width:auto;}
.float-card {position:absolute; z-index:2; background:var(--gray-0); border:var(--line); border-radius:14px; padding:.75rem .9rem; font-size:.85rem; box-shadow:5px 5px 0 var(--gray-90); max-width:260px;}
.float-card--bl {left:0; bottom:6%;}
.float-card--br {right:0; bottom:6%;}
.float-card--tr {right:0; top:6%;}
.float-card--tl {left:0; top:6%;}
.float-card .row {display:flex; align-items:center; gap:.5rem;}
.float-card .label {font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-50);}
.float-card .big {font-family:var(--headline-font); font-size:1.4rem; line-height:1.1;}
.float-card .ok {color:var(--green-40);}
.float-card .strike {text-decoration:line-through; color:var(--gray-40);}
.float-card ul {display:flex; flex-direction:column; gap:.3rem; margin-top:.4rem;}
.float-card li {display:flex; align-items:center; gap:.45rem;}
.dot {width:9px; height:9px; border-radius:50%; background:var(--gray-30); flex:none;}
.dot--on {background:var(--green-50); box-shadow:0 0 0 3px var(--green-5);}
.chips {display:flex; flex-wrap:wrap; gap:.35rem;}
.chip {display:inline-flex; align-items:center; gap:.3rem; border:1.5px solid var(--gray-90); border-radius:999px; padding:.2rem .6rem; font-size:.8rem; font-weight:500; background:var(--gray-0);}
.chip .ph {font-size:1rem;}
.chip--dark {background:var(--gray-90); color:var(--gray-0);}
.chip--green {background:var(--green-50);}

@media (max-width:900px) {
	.contra {grid-template-columns:1fr;}
	.contra-visual img {max-height:320px;}
	.float-card {font-size:.8rem; max-width:220px;}
}

/* time e marca: três promessas */
.promises {display:grid; gap:1rem;}
.promise {border:var(--line); border-radius:var(--radius-sm); padding:1rem 1.1rem;}
.promise h4 {font-family:var(--headline-font); font-weight:400; font-size:1.2rem; line-height:1.15; margin-bottom:.35rem;}
.promise p {font-size:.95rem; color:var(--gray-70);}

/* onde está a IA: dois grupos de tópicos (com o cliente / com o time) */
.ia-head {max-width:760px;}
.ia-groups {display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 3rem);}
.ia-group header {display:flex; align-items:center; gap:.9rem; padding-bottom:1.1rem; border-bottom:2px solid var(--green-50);}
.ia-group header .icon {flex:none; width:46px; height:46px; border-radius:50%; background:var(--green-50); color:var(--gray-90); display:grid; place-items:center; font-size:1.35rem;}
.ia-group h3 {font-family:var(--headline-font); font-weight:400; font-size:1.5rem; line-height:1.1;}
.ia-group header p {color:var(--gray-40); font-size:.92rem;}
.ia-item {display:grid; grid-template-columns:3.2rem 1fr; gap:1rem; padding:1.4rem 0; border-bottom:1px solid var(--gray-70);}
.ia-num {font-family:var(--headline-font); font-size:1.6rem; line-height:1; color:var(--green-60);}
.ia-item h4 {display:flex; align-items:center; gap:.45rem; font-size:1.15rem; font-weight:700; color:var(--gray-0); margin-bottom:.3rem;}
.ia-item h4 .ph {color:var(--green-60);}
.ia-item p {color:var(--gray-20); font-size:.98rem; margin-bottom:.7rem;}
.ia-item .chip {background:transparent; color:var(--green-60); border-color:var(--gray-60); font-size:.75rem;}
.ia-actions {margin-top:2.5rem;}
.ia-actions .link-arrow {color:var(--gray-0);}
@media (max-width:900px) {
	.ia-groups {grid-template-columns:1fr;}
	.ia-item {grid-template-columns:2.6rem 1fr;}
}

/* depoimentos */
.reviews-head {display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem;}
.reviews {display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;}
.review {border:var(--line); border-radius:var(--radius); padding:1.4rem; background:var(--gray-0); display:flex; flex-direction:column; gap:1rem;}
.review blockquote {font-size:1rem; color:var(--gray-80);}
.review footer {display:flex; align-items:center; gap:.7rem; margin-top:auto; font-weight:700;}
.review footer img {width:40px; height:40px; border-radius:50%; border:1.5px solid var(--gray-90);}
.review footer small {display:block; font-weight:400; color:var(--gray-60); font-size:.8rem;}
@media (max-width:900px) {
	.reviews {grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(82%, 340px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.75rem;}
	.review {scroll-snap-align:start;}
}

/* planos */
.all-in {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem 1rem; border:var(--line); border-radius:var(--radius-sm); background:var(--green-5); padding:1rem 1.25rem; margin-bottom:1.5rem; text-align:center; font-weight:500;}
.all-in {flex-direction:column; gap:1rem; padding:1.5rem 1.25rem;}
.all-in > span:last-child {font-size:1.2rem; line-height:1.45; max-width:46em; text-wrap:balance;}
.channel-icons {display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem;}
iconify-icon.brand {display:inline-block; width:1em; height:1em; vertical-align:-.125em;}
.channel {width:56px; height:56px; border-radius:50%; background:var(--c); color:#fff; display:grid; place-items:center; font-size:1.65rem; border:2px solid var(--gray-90);}
@media (max-width:560px) {.channel {width:48px; height:48px; font-size:1.55rem;} .channel-icons {gap:.5rem;}}
.plans {display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; padding-top:.75rem;}
.plan {position:relative; border:var(--line); border-radius:var(--radius); background:var(--gray-0); display:flex; flex-direction:column;}
.plan--featured {box-shadow:8px 8px 0 var(--green-50);}
.plan header {padding:1.4rem 1.4rem 1rem; border-bottom:var(--line); display:flex; flex-direction:column; gap:.2rem;}
.plan-name {font-weight:700; font-size:1.1rem;}
.plan-tag {position:absolute; top:0; left:1.4rem; transform:translateY(-50%); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--green-50); border:1.5px solid var(--gray-90); border-radius:999px; padding:.2rem .6rem;}
.plan del {color:var(--gray-50); font-size:.9rem;}
.plan-price {font-family:var(--headline-font); font-size:2.6rem; line-height:1;}
.plan-price small {font-family:var(--body-font); font-size:1rem; color:var(--gray-60);}
.plan ul {padding:1rem 1.4rem; display:flex; flex-direction:column; gap:.85rem; flex:1;}
.plan li strong {display:block; font-size:1.35rem; line-height:1.1; margin-bottom:.1rem;}
.plan li span {display:block; font-size:.88rem; line-height:1.3; color:var(--gray-60);}
.plan footer {padding:0 1.4rem 1.4rem;}
.plan footer .button {width:100%;}
.plans-links {display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2rem; margin-top:2rem;}
@media (max-width:1080px) {.plans {grid-template-columns:repeat(2, 1fr);}}
@media (max-width:600px) {.plans {grid-template-columns:1fr;}}

/* comece em 3 passos */
.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;}
/* título cíclico: fases controladas por data-fase no JS */
.swap {white-space:nowrap;}
.swap-old {position:relative; display:inline-block; transition:color .3s, opacity .5s ease, transform .5s ease;}
.swap-old::after {content:""; position:absolute; left:0; top:60%; height:.1em; margin-top:-.05em; width:0; background:var(--gray-90); border-radius:.1em;}
.swap-new {display:none; background:linear-gradient(transparent 58%, var(--green-60) 58%, var(--green-60) 92%, transparent 92%); padding:0 .08em;}
@keyframes hoje-in {from {opacity:0; transform:translateY(.35em) scale(.7);} to {opacity:1; transform:none;}}
@keyframes hoje-out {to {opacity:0; transform:translateY(-.25em);}}
.swap-title[data-fase="riscado"] .swap-old::after {width:100%; transition:width .55s cubic-bezier(.6,0,.3,1);}
.swap-title[data-fase="riscado"] .swap-old {color:var(--gray-40);}
.swap-title[data-fase="sumindo"] .swap-old {color:var(--gray-40); opacity:0; transform:translateY(-.15em);}
.swap-title[data-fase="sumindo"] .swap-old::after {width:100%;}
.swap-title[data-fase="hoje"] .swap-old,
.swap-title[data-fase="saindo"] .swap-old {display:none;}
.swap-title[data-fase="hoje"] .swap-new {display:inline-block; animation:hoje-in .45s cubic-bezier(.3,1.6,.5,1) both;}
.swap-title[data-fase="saindo"] .swap-new {display:inline-block; animation:hoje-out .4s ease both;}
@media (prefers-reduced-motion:reduce) {
	.swap-title .swap-new {animation:none !important;}
}

.start {display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem, 6vw, 5rem); align-items:center;}
.steps {display:grid; gap:1rem; counter-reset:s;}
.steps li {counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:1rem; border:var(--line); border-radius:var(--radius-sm); padding:1.1rem 1.25rem; background:var(--gray-0);}
.steps li::before {content:counter(s); width:42px; height:42px; border-radius:50%; background:var(--green-50); border:var(--line); display:grid; place-items:center; font-family:var(--headline-font); font-size:1.2rem;}
.steps h3 {font-size:1.1rem; margin-bottom:.15rem;}
.steps p {color:var(--gray-70); font-size:.95rem;}
.no-lock {margin-top:1.25rem; display:flex; gap:.75rem; align-items:center; font-family:var(--headline-font); font-size:1.5625rem; line-height:1.2; text-wrap:balance;}
.no-lock .ph {font-size:2.25rem; color:var(--green-40);}
@media (max-width:900px) {.start {grid-template-columns:1fr;} .start figure img {max-height:280px; margin:0 auto;}}

/* faq */
.faq {max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:.75rem;}
.faq details {border:var(--line); border-radius:var(--radius-sm); background:var(--gray-0);}
.faq summary {list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1.1rem 1.25rem; font-weight:700; font-size:1.05rem; min-height:56px;}
.faq summary::-webkit-details-marker {display:none;}
.faq summary .ph {flex:none; font-size:1.3rem; transition:transform .2s;}
.faq details[open] summary .ph {transform:rotate(45deg);}
.faq details p {padding:0 1.25rem 1.25rem; color:var(--gray-70);}

/* cta final */
.final {display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center;}
.final h2 {max-width:12em;}
.final p {font-size:1.35rem; line-height:1.4; margin:1rem 0 1.75rem; max-width:30em; text-wrap:balance;}
.final figure {--d:min(380px, 80vw); justify-self:center; background:var(--gray-0); border:var(--line); border-radius:50%; width:var(--d); height:var(--d); display:flex; align-items:center; justify-content:center; box-shadow:8px 8px 0 var(--gray-90); overflow:hidden;}
.final figure img {height:82%; width:auto;}
.final .phone {font-weight:700; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;}
@media (max-width:900px) {.final {grid-template-columns:1fr;} .final figure {order:-1; --d:min(240px, 64vw);}}

/* rodapé */
.footer {background:var(--gray-90); color:var(--gray-20); padding:4rem 0 2rem; font-size:.95rem;}
.footer-grid {display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:2rem;}
.footer-logo {filter:invert(1); width:150px; margin-bottom:1rem;}
.footer h4 {color:var(--gray-0); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.85rem;}
.footer ul {display:flex; flex-direction:column; gap:.5rem;}
.footer a {text-decoration:none;}
.footer a:hover {color:var(--green-60);}
@media (max-width:820px) {.footer-grid {grid-template-columns:1fr 1fr;}}
@media (max-width:520px) {.footer-grid {grid-template-columns:1fr;}}

/* ===== páginas internas ===== */
.page-hero {padding:clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);}
.page-hero .content {display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 6vw, 4.5rem); align-items:center;}
.page-hero--plain .content {grid-template-columns:1fr; max-width:900px; text-align:center; justify-items:center;}
.page-hero--plain .lead {margin:0 auto;}
.page-hero-text {display:flex; flex-direction:column; gap:1.25rem;}
.page-hero--plain .page-hero-text {align-items:center;}
.page-hero .h1 {font-size:clamp(2.4rem, 5.4vw, 4.2rem);}
@media (max-width:900px) {.page-hero .content {grid-template-columns:1fr;}}

/* como funciona */
.how {display:grid; grid-template-columns:repeat(var(--cols, 4), 1fr); gap:1rem; counter-reset:how;}
.how li {counter-increment:how; position:relative; border:var(--line); border-radius:var(--radius); background:var(--gray-0); padding:1.4rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.4rem;}
.how li::before {content:counter(how, decimal-leading-zero); font-family:var(--headline-font); font-size:1.6rem; line-height:1; color:var(--green-40); margin-bottom:.35rem;}
.how h3 {font-size:1.1rem;}
.how p {color:var(--gray-70); font-size:.95rem;}
.section--dark .how li {background:var(--gray-80); border-color:var(--gray-70);}
.section--dark .how p {color:var(--gray-20);}
@media (max-width:1000px) {.how {grid-template-columns:repeat(2, 1fr);}}
@media (max-width:560px) {.how {grid-template-columns:1fr;}}

/* grade de recursos */
.feature-grid {display:grid; grid-template-columns:repeat(var(--cols, 3), 1fr); gap:1rem;}
.feature {border:var(--line); border-radius:var(--radius); background:var(--gray-0); padding:1.35rem 1.25rem; display:flex; flex-direction:column; gap:.55rem;}
.feature .icon {width:44px; height:44px; border-radius:50%; background:var(--gray-90); color:var(--green-60); display:grid; place-items:center; font-size:1.3rem; margin-bottom:.25rem;}
.feature h3 {font-size:1.3rem; line-height:1.25;}
.feature p {color:var(--gray-70); font-size:1.125rem; line-height:1.5;}
.feature-group-title {font-family:var(--headline-font); font-weight:400; font-size:clamp(1.75rem, 3vw, 2.35rem); line-height:1.1; text-wrap:balance; margin:3rem 0 1.25rem;}
.feature-group-title:first-child {margin-top:0;}
@media (max-width:1000px) {.feature-grid {grid-template-columns:repeat(2, 1fr);}}
@media (max-width:600px) {.feature-grid {grid-template-columns:1fr;}}

/* bloco "na prática" */
.practice-block {display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem, 4vw, 3rem); align-items:center; border:var(--line); border-radius:var(--radius); background:var(--gray-0); padding:clamp(1.5rem, 4vw, 3rem); box-shadow:8px 8px 0 var(--green-50);}
.practice-block .tag {display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-40); margin-bottom:.6rem;}
.practice-block p {font-size:clamp(1.2rem, 2vw, 1.45rem); line-height:1.5; color:var(--gray-80);}
.practice-block .punch {margin-top:1.25rem; font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.1; color:var(--gray-90);}
.practice-block img {width:min(300px, 60vw); height:auto;}
@media (max-width:760px) {.practice-block {grid-template-columns:1fr;} .practice-block img {margin:0 auto;}}

/* tabela comparativa */
.vs-wrap {overflow-x:auto; border:var(--line); border-radius:var(--radius);}
.vs-table {width:100%; min-width:620px; border-collapse:collapse; background:var(--gray-0);}
.vs-table th, .vs-table td {padding:1rem 1.25rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--gray-10);}
.vs-table thead th {font-family:var(--headline-font); font-weight:400; font-size:1.2rem; border-bottom:var(--line);}
.vs-table thead th:nth-child(2) {background:var(--green-5);}
.vs-table tbody th {font-weight:700; width:24%;}
.vs-table td:nth-child(2) {background:var(--green-5);}
.vs-table tr:last-child th, .vs-table tr:last-child td {border-bottom:0;}
.vs-table .ph {margin-right:.35rem;}
.vs-table .ph-check-circle {color:var(--green-40);}
.vs-table .ph-warning {color:#C27A00;}
.vs-table .ph-x-circle {color:#D93025;}

/* lista com ícones (requisitos, incluso) */
.checklist {display:grid; grid-template-columns:repeat(var(--cols, 2), 1fr); gap:.75rem 2rem;}
.checklist li {display:flex; gap:.6rem; align-items:flex-start;}
.checklist .ph {flex:none; color:var(--green-40); font-size:1.3rem; margin-top:.05rem;}
@media (max-width:700px) {.checklist {grid-template-columns:1fr;}}

/* blocos de texto lado a lado */
.split {display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4rem); align-items:start;}
@media (max-width:900px) {.split {grid-template-columns:1fr;}}
.card {border:var(--line); border-radius:var(--radius); background:var(--gray-0); padding:1.5rem;}
.card h3 {font-size:1.35rem; line-height:1.25; margin-bottom:.5rem;}
.card p {font-size:1.15rem; line-height:1.55;}
.card p + p {margin-top:.6rem;}

/* três partes da cobrança */
.billing {display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;}
.billing .card {display:flex; flex-direction:column; gap:.5rem;}
.billing .label {font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-50);}
.billing .big {font-family:var(--headline-font); font-size:1.6rem; line-height:1.1;}
.billing p {color:var(--gray-70); font-size:1.125rem;}
@media (max-width:900px) {.billing {grid-template-columns:1fr;}}

@media (max-width:760px) {.embed iframe {height:1900px;}}

/* páginas relacionadas */
.related {display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;}
.related a {display:flex; gap:.9rem; align-items:center; border:var(--line); border-radius:var(--radius-sm); padding:1rem 1.1rem; text-decoration:none; background:var(--gray-0); transition:transform 120ms, box-shadow 120ms;}
.related a:hover {transform:translate(-3px, -3px); box-shadow:4px 4px 0 var(--gray-90);}
.related .icon {flex:none; width:40px; height:40px; border-radius:50%; background:var(--gray-90); color:var(--green-60); display:grid; place-items:center; font-size:1.2rem;}
.related strong {display:block;}
.related small {color:var(--gray-60);}
@media (max-width:900px) {.related {grid-template-columns:1fr;}}

/* simulações de produto nas páginas internas */
.mock {position:relative; z-index:1; border:var(--line); border-radius:20px; background:var(--gray-0); box-shadow:8px 8px 0 var(--gray-90); overflow:hidden; width:100%; max-width:460px;}
.mock-bar {display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem; border-bottom:var(--line); background:var(--green-5); font-size:.8rem; color:var(--gray-60);}
.mock-bar i {width:10px; height:10px; border-radius:50%; background:var(--gray-20); display:block;}
.mock-bar span {margin-left:.5rem;}
.mock-site {padding:1.25rem; min-height:300px; position:relative; background:repeating-linear-gradient(transparent 0 22px, var(--gray-10) 22px 23px);}
.mock-site .fake {height:12px; border-radius:6px; background:var(--gray-10); margin-bottom:.6rem;}
.mock-widget {position:absolute; right:1rem; bottom:1rem; width:250px; border:var(--line); border-radius:16px; background:var(--gray-0); box-shadow:5px 5px 0 var(--gray-90); overflow:hidden; font-size:.85rem;}
.mock-widget header {background:var(--gray-90); color:var(--gray-0); padding:.6rem .8rem; display:flex; align-items:center; gap:.5rem; font-weight:700;}
.mock-widget header .ph {color:var(--green-60);}
.mock-widget .body {padding:.75rem; display:flex; flex-direction:column; gap:.45rem;}
.mock-widget .msg {font-size:.82rem; max-width:92%;}
.mock-flow {display:flex; flex-direction:column; gap:.75rem; padding:1.5rem;}
.mock-node {display:flex; align-items:center; gap:.75rem; border:var(--line); border-radius:14px; padding:.8rem 1rem; background:var(--gray-0); font-weight:700;}
.mock-node .icon {width:38px; height:38px; border-radius:50%; background:var(--gray-90); color:var(--green-60); display:grid; place-items:center; font-size:1.15rem; flex:none;}
.mock-node small {display:block; font-weight:400; color:var(--gray-60); font-size:.8rem;}
.mock-node--brand {background:var(--green-50);}
.mock-node--brand .icon {background:var(--gray-0); color:var(--gray-90);}
.mock-link {align-self:center; display:flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; color:var(--gray-60);}

/* conversa híbrida (WebChat): a tela do atendente, que muda de canal no meio da conversa */
.hybrid {align-items:center;}
.hybrid .section-head {margin-bottom:1.5rem;}
.mock-hybrid {justify-self:center; color:var(--gray-90);}
.mock-hybrid .mock-bar {gap:.6rem; font-size:.9rem; color:var(--gray-90); padding:.75rem 1rem;}
.mock-hybrid .chat-avatar {width:32px; height:32px; font-size:.85rem;}
.mock-hybrid .mock-bar span {margin-left:0;}
.mock-hybrid .mock-bar i {width:auto; height:auto; background:none; border-radius:0; display:inline;}
.section--dark .mock-hybrid {box-shadow:8px 8px 0 var(--green-50);}
.mock-hybrid .mock-bar .channel-now {margin-left:auto;}
.channel-now { display:inline-flex; align-items:center; gap:.35rem; background:rgb(27,80,104); color:#fff; font-size:.75rem; font-weight:700; border-radius:999px; padding:.25rem .65rem;}
.hybrid-body {padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:radial-gradient(circle at 1px 1px, var(--gray-10) 1px, transparent 0) 0 0/16px 16px;}
.hybrid-body .msg {font-size:.9rem;}
.via {display:flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-50); margin-bottom:.15rem;}
.via iconify-icon {color:rgb(37,170,60);}
.via--web {color:rgb(27,80,104);}
.hybrid-sys {align-self:flex-end; display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:700; color:var(--gray-60); background:var(--gray-0); border:1.5px dashed var(--gray-30); border-radius:999px; padding:.2rem .65rem;}
.hybrid-switch {align-self:stretch; display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.78rem; font-weight:700; color:#fff; background:rgb(27,80,104); border-radius:999px; padding:.35rem .75rem; margin:.25rem 0;}
.section--dark .hybrid .lead {color:var(--gray-20);}

/* marcação de pendência (só no protótipo) */
.todo {display:inline-flex; align-items:center; gap:.25rem; vertical-align:middle; margin-left:.35rem; font-family:var(--body-font); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A5A00; background:#FFF4D6; border:1.5px dashed #C27A00; border-radius:999px; padding:.05rem .5rem; white-space:nowrap;}

/* ajuda */
.help-cats {display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem;}
@media (max-width:900px) {.help-cats {grid-template-columns:1fr 1fr;}}
.faq-group + .faq-group {margin-top:3rem;}
.faq-group > h2 {font-family:var(--headline-font); font-weight:400; font-size:1.75rem; margin:0 auto 1rem; max-width:860px; scroll-margin-top:90px;}

/* termos e política (termos/) */
.legal {padding:clamp(2.5rem, 6vw, 4.5rem) 0 var(--section);}
.legal-layout {display:grid; grid-template-columns:260px minmax(0, 1fr); gap:clamp(2rem, 5vw, 4.5rem); align-items:start;}
.legal-nav {position:sticky; top:100px; display:flex; flex-direction:column; gap:.75rem;}
.legal-nav-item {width:100%; justify-content:flex-start; text-align:left; font-size:.95rem; line-height:1.25;}
.legal-nav-versao {display:block;}
.legal-nav-item[aria-current] {background:var(--gray-90); color:var(--gray-0); --lift:var(--green-50);}
.legal-doc {max-width:820px; color:var(--gray-80);}
.legal-doc h1 {font-family:var(--headline-font); font-weight:400; font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1; letter-spacing:-0.02em; color:var(--gray-90); margin-bottom:1.25rem;}
.legal-doc h2 {font-family:var(--headline-font); font-weight:400; font-size:clamp(1.3rem, 2.4vw, 1.6rem); line-height:1.2; color:var(--gray-90); margin:2.75rem 0 1rem; scroll-margin-top:100px;}
.legal-doc hr + h2 {margin-top:0;}
.legal-doc p + p, .legal-doc p + ul, .legal-doc ul + p {margin-top:.9rem;}
.legal-doc ul {list-style:disc; padding-left:1.4rem; display:flex; flex-direction:column; gap:.5rem;}
.legal-doc li::marker {color:var(--green-40);}
.legal-doc a {font-weight:700; text-decoration-color:var(--green-50); text-decoration-thickness:2px; text-underline-offset:3px;}
.legal-doc a:hover {color:var(--green-40);}
.legal-doc hr {border:0; border-top:1px solid var(--gray-10); margin:2.75rem 0;}
.legal-doc .termo-versao {font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-40);}
.legal-doc .termo-aviso {margin:1.5rem 0 2.5rem; padding:1rem 1.25rem; background:var(--green-5); border:var(--line); border-radius:var(--radius-sm); color:var(--gray-90);}
.termo-tabela {overflow-x:auto; margin:1.5rem 0; border:var(--line); border-radius:var(--radius-sm);}
.termo-tabela table {width:100%; min-width:520px; border-collapse:collapse; font-size:.95rem;}
.termo-tabela th, .termo-tabela td {padding:.7rem 1rem; text-align:left; white-space:nowrap; border-bottom:1px solid var(--gray-10);}
.termo-tabela th {background:var(--green-5); font-weight:700; border-bottom:var(--line);}
.termo-tabela tr:last-child td {border-bottom:0;}
@media (max-width:900px) {
	.legal-layout {grid-template-columns:minmax(0, 1fr);}
	.legal-nav {position:static; flex-direction:row; overflow-x:auto; gap:.5rem; padding:0 0 .75rem; margin-right:calc(-1 * var(--gutter));}
	.legal-nav-item {width:auto; flex:none; font-size:.85rem; min-height:44px;}
	.legal-nav-versao {display:inline;}
}

/* ===== modais ===== */
html.modal-aberto {overflow:hidden;}
.modal {width:min(620px, calc(100% - 24px)); max-height:min(92vh, 920px); padding:0; border:var(--line); border-radius:var(--radius); background:var(--gray-0); color:var(--gray-90); box-shadow:10px 10px 0 var(--gray-90); overflow:auto; overscroll-behavior:contain;}
#modal-teste {width:min(570px, calc(100% - 24px));}
.modal::backdrop {background:rgba(10, 18, 13, .8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.modal[open] {animation:modal-in .25s ease both;}
@keyframes modal-in {from {opacity:0; transform:translateY(14px) scale(.98);} to {opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce) {.modal[open] {animation:none;}}
.modal-body {padding:clamp(1.5rem, 4vw, 2.25rem);}
.modal-close {position:absolute; top:.85rem; right:.85rem; z-index:2; width:40px; height:40px; border-radius:50%; border:var(--line); background:var(--gray-0); display:grid; place-items:center; font-size:1.15rem; cursor:pointer; color:inherit;}
.modal-close:hover {background:var(--gray-90); color:var(--gray-0);}
.modal-back {font:inherit; font-weight:700; font-size:.9rem; background:none; border:0; padding:0; margin-bottom:1rem; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; color:var(--gray-70);}
.modal-back:hover {color:var(--green-40);}
.modal-head {display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.5rem; padding-right:2.5rem;}
.modal-head h2 {font-size:clamp(1.6rem, 4vw, 2.1rem);}
.modal-head p {color:var(--gray-70);}
.modal-foot {margin-top:1.25rem; font-size:.88rem; color:var(--gray-60); text-align:center;}
.modal-foot a {font-weight:700;}

/* campos */
.form-modal {display:flex; flex-direction:column; gap:1rem;}
.field {display:flex; flex-direction:column; gap:.35rem; border:0; padding:0; margin:0; min-width:0;}
.field-row {display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media (max-width:560px) {.field-row {grid-template-columns:1fr;}}
.field label, .field legend {font-weight:700; font-size:1em; padding:0;}
.field legend {margin-bottom:.45rem;}
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password] {font:inherit; font-size:1rem; width:100%; min-height:48px; padding:.65rem .85rem; border:2px solid var(--gray-20); border-radius:var(--radius-sm); background:var(--gray-0); color:var(--gray-90); transition:border-color .15s, box-shadow .15s;}
.field input::placeholder {color:var(--gray-40);}
.field input:focus {outline:none; border-color:var(--gray-90); box-shadow:0 0 0 3px var(--green-60);}
.field input[aria-invalid="true"] {border-color:#C0392B;}
.field-error {font-size:.82rem; color:#B03A2E; min-height:0;}
.field-error:empty {display:none;}
.form-error {font-size:.9rem; color:#B03A2E; background:#FDECEA; border:1.5px solid #E6B0AA; border-radius:var(--radius-sm); padding:.6rem .85rem;}
.form-error[hidden] {display:none;}
/* enviando: botão travado, com spinner e uma faixa que corre por baixo */
.modal-submit:disabled, .modal-submit:disabled:hover {transform:none; box-shadow:none; cursor:progress;}
.modal-submit.carregando {position:relative; overflow:hidden; opacity:1;}
.modal-submit.carregando::after {content:""; position:absolute; left:0; bottom:0; height:4px; width:40%; background:var(--green-50); animation:carregando-faixa 1.4s ease-in-out infinite;}
.spinner {width:1.15em; height:1.15em; flex:none; border-radius:50%; border:3px solid rgba(255, 255, 255, .25); border-top-color:var(--green-50); animation:girar .7s linear infinite;}
@keyframes girar {to {transform:rotate(360deg);}}
@keyframes carregando-faixa {from {transform:translateX(-100%);} to {transform:translateX(250%);}}
@media (prefers-reduced-motion:reduce) {.spinner {animation-duration:2s;} .modal-submit.carregando::after {animation:none; width:100%; opacity:.5;}}
.armadilha {position:absolute; left:-9999px; width:1px; height:1px; opacity:0;} /* campo invisível contra robôs */
.check {display:flex; gap:.6rem; align-items:center; font-weight:500 !important; cursor:pointer;}
.check input {width:22px; height:22px; flex:none; accent-color:var(--green-40);}
.check a {color:var(--green-40); font-weight:700;}
.modal-submit {width:100%; margin-top:.5rem;}
/* teste grátis: formulário longo, labels e campos menores para caber com menos rolagem (no celular vale o bloco abaixo) */
@media (min-width:561px) {
	#modal-teste .modal-head {margin-bottom:1.1rem;}
	#modal-teste .form-modal {gap:.8rem;}
	#modal-teste .field {gap:.25rem;}
	#modal-teste .field label {font-size:.9rem;}
	#modal-teste .field input[type=text], #modal-teste .field input[type=email], #modal-teste .field input[type=tel], #modal-teste .field input[type=password] {min-height:42px; padding:.45rem .75rem; font-size:.95rem;}
	#modal-teste .password-toggle, #modal-teste .match {width:34px; height:34px; font-size:1.1rem;}
	#modal-teste .check input {width:20px; height:20px;}
}
/* modais no celular: labels e campos mais compactos.
   O texto digitado fica em 16px de propósito: abaixo disso o Safari do iPhone dá zoom na página ao focar o campo. */
@media (max-width:560px) {
	.modal-body {padding:1.25rem 1.1rem 1.4rem;}
	.modal-head {margin-bottom:1.1rem;}
	.form-modal {gap:.8rem;}
	.field {gap:.25rem;}
	.field label, .field legend {font-size:.875rem;}
	.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password] {min-height:42px; padding:.45rem .7rem; font-size:16px; border-radius:8px;}
	.password-toggle, .match {width:34px; height:34px; font-size:1.1rem;}
	.choice span {min-height:40px; padding:.4rem .75rem; font-size:.85rem;}
	.choice--dia span {padding:.4rem .2rem;}
	.check input {width:20px; height:20px;}
	.field-error {font-size:.78rem;}
}

/* senha */
.password {position:relative;}
.password input {padding-right:3rem !important;}
.password-toggle, .match {position:absolute; right:.4rem; top:50%; transform:translateY(-50%); width:38px; height:38px; display:grid; place-items:center; font-size:1.25rem;}
.password-toggle {border:0; background:none; cursor:pointer; color:var(--gray-60); border-radius:8px;}
.password-toggle:hover {color:var(--gray-90);}
.match--ok {color:var(--green-40);}
.match--no {color:#B03A2E;}
.pw-meter {height:6px; border-radius:999px; background:var(--gray-10); overflow:hidden; margin-top:.15rem;}
.pw-meter span {display:block; height:100%; width:0; border-radius:inherit; background:#D9534F; transition:width .25s, background .25s;}
.pw-meter span[data-nivel="2"] {background:#E8A33D;}
.pw-meter span[data-nivel="3"] {background:#C9C83A;}
.pw-meter span[data-nivel="4"] {background:var(--green-50);}
.pw-rules {display:grid; grid-template-columns:1fr 1fr; gap:.3rem 1rem; font-family:system-ui, sans-serif; font-size:12px; color:var(--gray-60); margin-top:.2rem;}
.pw-rules li {display:flex; gap:.4rem; align-items:center; transition:color .2s;}
.pw-rules li .ph {font-size:1.05rem;}
.pw-rules li.ok {color:var(--green-30); font-weight:500;}
.pw-rules li.ok .ph {color:var(--green-40);}
@media (max-width:560px) {.pw-rules {grid-template-columns:1fr;}}

/* opções do especialista */
.options {display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media (max-width:560px) {.options {grid-template-columns:1fr;} .option .option-desc, .option .option-cta {display:none;}}
.option {font:inherit; text-align:left; color:inherit; text-decoration:none; cursor:pointer; display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; border:var(--line); border-radius:var(--radius); padding:1.35rem; background:var(--gray-0); transition:transform 120ms, box-shadow 120ms;}
.option:hover, .option:focus-visible {transform:translate(-3px, -3px); box-shadow:6px 6px 0 var(--gray-90);}
.option strong {font-family:var(--headline-font); font-weight:400; font-size:1.35rem; line-height:1.1;}
.option-desc {font-size:.92rem; color:var(--gray-70);}
.option-icon {width:56px; height:56px; border-radius:50%; border:var(--line); display:grid; place-items:center; font-size:1.8rem; margin-bottom:.35rem;}
.option-meta {display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:.2rem .6rem; border:1.5px solid var(--gray-90);}
.option-cta {margin-top:auto; padding-top:.5rem; display:inline-flex; align-items:center; gap:.35rem; font-weight:700;}
.option--whats {background:var(--green-50);}
.option--whats .option-icon {background:var(--gray-0);}
.option--whats .option-desc {color:var(--gray-90);}
.option--whats .option-meta {background:var(--gray-90); color:var(--gray-0);}
.option--agenda {background:var(--green-5);}
.option--agenda .option-icon {background:var(--gray-90); color:var(--green-60);}
.option--agenda .option-meta {background:var(--gray-0);}

/* escolhas (data e período) */
.choices {display:flex; flex-wrap:wrap; gap:.5rem;}
.choices--dias {display:grid; grid-template-columns:repeat(6, 1fr); gap:.4rem;}
@media (max-width:560px) {.choices--dias {grid-template-columns:repeat(3, 1fr);}}
.choice {position:relative; cursor:pointer;}
.choice input {position:absolute; opacity:0; inset:0; cursor:pointer;}
.choice span {display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.55rem 1rem; border:2px solid var(--gray-20); border-radius:var(--radius-sm); font-weight:700; font-size:.92rem; background:var(--gray-0); transition:border-color .15s, background .15s;}
.choice--dia span {flex-direction:column; justify-content:center; gap:0; width:100%; padding:.5rem .25rem; text-align:center; line-height:1.15;}
.choice--dia small {font-size:.72rem; font-weight:700; text-transform:capitalize; color:var(--gray-60);}
.choice--dia strong {font-size:1rem;}
.choice:hover span {border-color:var(--gray-60);}
.choice input:focus-visible + span {box-shadow:0 0 0 3px var(--green-60);}
.choice input:checked + span {border-color:var(--gray-90); background:var(--green-50);}
.choice input:checked + span small {color:var(--gray-90);}

/* sucesso */
.modal-done {text-align:center; display:flex; flex-direction:column; align-items:center; gap:.75rem; padding-top:2.75rem; padding-bottom:2.25rem;}
.modal-done[hidden], .modal-done > [hidden] {display:none;}
.modal-done h2 {font-size:2rem;}
.modal-done p {color:var(--gray-70); max-width:28em;}
.modal-done [data-tel] {white-space:nowrap;}
.done-icon {width:72px; height:72px; border-radius:50%; background:var(--green-50); border:var(--line); display:grid; place-items:center; font-size:2.1rem; box-shadow:4px 4px 0 var(--gray-90); margin-bottom:.5rem;}
.proto-note {font-size:.8rem; color:#8A5A00 !important; background:#FFF4D6; border:1.5px dashed #C27A00; border-radius:999px; padding:.15rem .7rem;}

/* botão flutuante do WhatsApp: mesmo desenho dos botões (borda preta, hover que levanta) */
.wa-float {position:fixed; right:28px; bottom:28px; z-index:70; width:78px; height:78px; border-radius:50%; border:var(--line); background:var(--green-50); color:var(--gray-90); display:grid; place-items:center; font-size:2.375rem; text-decoration:none; box-shadow:4px 4px 0 var(--gray-90); transition:transform 120ms, box-shadow 120ms;}
.wa-float:hover {transform:translate(-3px, -3px); box-shadow:7px 7px 0 var(--gray-90);}
.wa-float:active {transform:none; box-shadow:2px 2px 0 var(--gray-90);}
.wa-float iconify-icon {display:block; width:1em; height:1em;}
@media (max-width:560px) {.wa-float {right:20px; bottom:20px; width:52px; height:52px; font-size:1.6rem; box-shadow:3px 3px 0 var(--gray-90);}}
@media (prefers-reduced-motion:reduce) {.wa-float:hover {transform:none;}}