:root {
  --indigo: #0B151E;
  --ivory: #F6F3ED;
  --orange: #FDBD02;
  --ice: #ECE6D8;
  --terracotta: #8A5D06;
  --graphite: #6B6459;
  --ink: #0E1A24;
  --white: #ffffff;
  --line: rgba(11, 21, 30, 0.16);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--indigo); font-family: Inter, Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
main { overflow: hidden; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 999; padding: 10px 14px; color: white; background: var(--indigo); border-radius: 4px; transform: translateY(-160%); transition: transform .18s ease; }
.skip-link:focus { transform: translateY(0); }

/* O cabeçalho ocupa a largura inteira. O preenchimento interno mantém o
   conteúdo alinhado à grade principal sem projetar sombra sobre a primeira dobra. */
.site-header { width: 100%; height: 92px; margin: 0 auto; padding: 0 max(28px, calc((100vw - 1240px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 28px; position: sticky; top: 0; z-index: 50; color: white; background: rgba(11,21,30,.88); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.1); }
.brand img { width: 154px; height: auto; }
.site-header nav { display: flex; gap: 30px; margin-left: auto; }
.site-header nav a { color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; transition: color .2s ease; }
.site-header nav a:hover { color: var(--orange); }

.button { min-height: 52px; padding: 0 22px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 22px; border-radius: 4px; font-size: 13px; font-weight: 800; letter-spacing: .01em; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--orange), #FFE08A); color: #0E1A24; box-shadow: 0 10px 28px rgba(253,189,2,.28); }
.button-primary:hover { background: linear-gradient(135deg, #E0A600, #FDBD02); }
.button-secondary { border-color: var(--line); color: var(--indigo); background: transparent; }
.button-secondary:hover { border-color: var(--indigo); background: white; }
.site-header .button { min-height: 42px; padding: 0 17px; gap: 12px; }

/* SEM max-width aqui: o padding já é calculado a partir de 100vw e centra o
   conteúdo em 1240px. Um max-width junto faria o padding comer a caixa por
   dentro em telas largas (>1440px), esmagando a foto do hero. */
.hero { min-height: 710px; margin: 0 auto; padding: 76px max(28px, calc((100vw - 1240px)/2)) 96px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 62px; align-items: center; position: relative; }
.hero-pattern { position: absolute; width: 260px; height: 610px; right: -85px; top: 18px; background: url('/brand/pattern-2.svg') center/cover; opacity: .055; transform: rotate(-4deg); }
.eyebrow { margin: 0 0 26px; display: flex; align-items: center; gap: 11px; text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 800; }
.eyebrow span { width: 30px; height: 2px; background: var(--orange); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 750px; margin-bottom: 28px; font-size: clamp(47px, 5.3vw, 76px); line-height: .97; letter-spacing: -.055em; font-weight: 800; }
h1 em, h2 em { font-style: normal; color: var(--orange); }
/* Destaque marca-texto: nas dobras de fundo claro o <em> vira uma tarja
   dourada atrás do texto escuro (em vez de texto dourado, que perde
   contraste no papel). box-decoration-break: clone faz a tarja acompanhar
   cada linha quando o texto quebra. Nas dobras de fundo escuro (solution,
   lead-section) o <em> segue como texto dourado, herdando a regra acima. */
.hero h1 em, .customer-path h2 em, .problem h2 em, .process h2 em, .diagnostic-intro h2 em, .faq-head h2 em {
  color: var(--indigo);
  text-shadow: none;
  padding: 0 .045em;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-position: center 54%;
  background-repeat: no-repeat;
  background-size: 100% .86em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero-subtitle { max-width: 650px; color: #50566f; font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0; }
.trust-list { list-style: none; padding: 25px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 20px 26px; border-top: 1px solid var(--line); }
.trust-list li { font-size: 11px; font-weight: 700; color: #5b6075; display: flex; gap: 8px; align-items: center; }
.trust-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

.hero-visual { min-height: 540px; position: relative; display: flex; justify-content: center; align-items: center; }
.sun-orbit { position: absolute; width: 450px; height: 450px; border: 1px solid rgba(11,21,30,.16); border-radius: 50%; }
.sun-orbit::before, .sun-orbit::after { content: ''; position: absolute; inset: 55px; border: 1px solid rgba(11,21,30,.1); border-radius: 50%; }
.sun-orbit::after { inset: 115px; }
.sun-orbit span { position: absolute; width: 54px; height: 54px; background: var(--orange); border-radius: 50%; top: 14px; right: 62px; box-shadow: 0 0 0 14px rgba(253,189,2,.08); }
.phone { width: 280px; height: 512px; border-radius: 35px; border: 8px solid var(--indigo); background: var(--indigo); position: relative; z-index: 2; box-shadow: 28px 35px 60px rgba(11,21,30,.16); transform: rotate(2deg); }
.phone-top { height: 36px; padding: 10px 16px 0; display: flex; justify-content: space-between; color: white; font-size: 8px; font-weight: 700; }
.phone-notch { width: 67px; height: 16px; margin-top: -6px; border-radius: 0 0 10px 10px; background: var(--indigo); }
.phone-screen { height: calc(100% - 36px); padding: 20px 15px; border-radius: 26px; background: var(--ice); overflow: hidden; }
.phone-title { margin-bottom: 27px; display: flex; align-items: baseline; justify-content: space-between; }
.phone-title span { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.phone-title small { color: var(--terracotta); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.message { margin-bottom: 12px; padding: 15px; border-radius: 5px 15px 15px 15px; background: white; box-shadow: 0 10px 30px rgba(11,21,30,.08); }
.message.second { margin-left: 20px; background: var(--indigo); color: white; }
.message b { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.message p { margin: 7px 0 5px; font-size: 12px; line-height: 1.45; }
.message small { font-size: 8px; opacity: .65; }
.pulse-card { margin-top: 25px; padding: 12px; border-top: 1px solid rgba(11,21,30,.15); display: flex; gap: 12px; align-items: center; }
.pulse-icon { width: 34px; height: 34px; border-radius: 50%; color: white; background: var(--orange); display: grid; place-items: center; font-weight: 800; }
.pulse-card div { display: flex; flex-direction: column; gap: 3px; }
.pulse-card b { font-size: 11px; }
.pulse-card small { color: var(--graphite); font-size: 9px; }
.product-tags span { position: absolute; z-index: 3; padding: 10px 14px; border: 1px solid var(--line); background: var(--ivory); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 8px 24px rgba(11,21,30,.07); }
.product-tags span:nth-child(1) { top: 103px; left: 5px; }
.product-tags span:nth-child(2) { top: 196px; right: -3px; }
.product-tags span:nth-child(3) { bottom: 143px; left: -11px; }
.product-tags span:nth-child(4) { bottom: 66px; right: 25px; }
.visual-caption { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--graphite); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.visual-caption i { width: 58px; height: 1px; background: var(--orange); }

.marquee { padding: 17px 0; background: var(--indigo); color: white; white-space: nowrap; overflow: hidden; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.marquee div { width: max-content; animation: ticker 24s linear infinite; }
.marquee span { margin: 0 26px; color: var(--orange); }
@keyframes ticker { to { transform: translateX(-50%); } }

.customer-path { padding: 92px max(28px, calc((100vw - 1180px)/2)); background: var(--ice); }
.customer-path-inner { max-width: 1180px; margin: 0 auto; }
.customer-path-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; }
.customer-path-head .eyebrow { margin-bottom: 20px; }
.customer-path-head h2 { max-width: 730px; margin-bottom: 0; font-size: clamp(38px, 3.8vw, 58px); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; }
.customer-path-head > p { margin-bottom: 5px; color: var(--graphite); font-size: 15px; line-height: 1.7; }
.customer-path-grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.52); border: 1px solid var(--line); }
.customer-path-grid li { min-height: 245px; padding: 28px 26px 32px; position: relative; }
.customer-path-grid li + li { border-left: 1px solid var(--line); }
.customer-path-grid li > span { display: inline-grid; width: 38px; height: 38px; margin-bottom: 43px; place-items: center; border-radius: 50%; background: var(--indigo); color: var(--orange); font-size: 10px; font-weight: 800; }
.customer-path-grid li:not(:last-child)::after { content: '›'; position: absolute; top: 35px; right: -8px; z-index: 1; color: var(--terracotta); background: var(--ice); font-size: 21px; line-height: 1; }
.customer-path-grid h3 { margin-bottom: 12px; font-size: 18px; line-height: 1.25; letter-spacing: -.025em; }
.customer-path-grid p { margin-bottom: 0; color: var(--graphite); font-size: 13px; line-height: 1.65; }

.section { padding: 120px max(28px, calc((100vw - 1180px)/2)); }
.section-head h2 { font-size: clamp(39px, 4vw, 60px); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; }
.section-head > p:last-child { color: var(--graphite); font-size: 16px; line-height: 1.7; }
.split-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 25px 75px; align-items: end; }
.split-head .eyebrow { grid-column: 1 / -1; margin-bottom: 4px; }
.split-head h2 { margin-bottom: 0; }
.split-head > p:last-child { margin: 0 0 4px; }
.problem { background: white; }
.problem-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.problem-card { padding: 33px 36px 39px 0; min-height: 280px; }
.problem-card + .problem-card { padding-left: 36px; border-left: 1px solid var(--line); }
.card-number { color: var(--terracotta); font-size: 11px; font-weight: 800; }
.card-line { width: 42px; height: 2px; background: var(--indigo); margin: 32px 0 52px; }
.problem-card h3, .solution-card h3, .step h3 { font-size: 20px; letter-spacing: -.025em; }
.problem-card p, .solution-card p, .step p { color: var(--graphite); font-size: 14px; line-height: 1.7; }
.section-closing { max-width: 770px; margin: 54px auto 0; text-align: center; font-size: 21px; line-height: 1.5; font-weight: 600; letter-spacing: -.02em; }

.solution { background: var(--indigo); color: white; position: relative; }
.solution-pattern { position: absolute; top: 0; right: 0; width: 36%; height: 100%; background: url('/brand/pattern-1.svg') top right/auto 100%; opacity: .045; }
.light-head { max-width: 890px; position: relative; }
.light-head h2 { max-width: 780px; }
.light-head > p:last-child { max-width: 760px; color: rgba(255,255,255,.67); }
.solution-grid { margin-top: 68px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; }
.solution-card { min-height: 315px; padding: 32px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); }
.solution-index { display: block; margin-bottom: 75px; color: var(--orange); font-size: 11px; font-weight: 800; }
.solution-card p { color: rgba(255,255,255,.66); }
.solution-close { margin-top: 58px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.16); display: flex; gap: 50px; justify-content: space-between; align-items: center; position: relative; }
.solution-close > p { max-width: 670px; margin-bottom: 0; font-size: 20px; line-height: 1.5; font-weight: 600; }
.solution-close > div { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.solution-close small { color: rgba(255,255,255,.55); font-size: 10px; }

.process { background: var(--ivory); }
.centered { max-width: 760px; margin: 0 auto; text-align: center; }
.centered .eyebrow { justify-content: center; }
.timeline { max-width: 980px; margin: 76px auto 0; position: relative; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 33px; width: 1px; background: var(--line); }
.step { min-height: 140px; display: grid; grid-template-columns: 70px 1fr; gap: 36px; }
.step-marker { position: relative; z-index: 1; width: 67px; height: 67px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--line); display: grid; place-items: center; }
.step-marker span { width: 43px; height: 43px; border-radius: 50%; background: var(--indigo); color: white; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.step > div:last-child { padding: 4px 0 38px; display: grid; grid-template-columns: .45fr .55fr; gap: 45px; border-bottom: 1px solid var(--line); }
.step p { margin-bottom: 0; }
.process-close { max-width: 980px; margin: 40px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.process-close p { max-width: 550px; margin: 0; font-weight: 650; line-height: 1.5; }

.diagnostic { display: grid; grid-template-columns: .82fr 1.18fr; gap: 0; padding-top: 0; padding-bottom: 0; background: var(--ice); }
.diagnostic-intro { padding: 105px 65px 105px 0; }
.diagnostic-intro h2 { font-size: clamp(39px, 4vw, 58px); line-height: 1.03; letter-spacing: -.045em; }
.diagnostic-intro > p:not(.eyebrow) { color: var(--graphite); line-height: 1.7; }
.diagnostic-intro .button { margin-top: 25px; }
.diagnostic-intro small { display: block; margin-top: 12px; color: var(--graphite); font-size: 10px; }
.diagnostic-content { margin-right: calc((1180px - 100vw)/2); padding: 105px max(45px, calc((100vw - 1180px)/2)) 105px 64px; background: var(--ivory); }
.mini-label { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.included-list { list-style: none; padding: 0; margin: 28px 0 42px; }
.included-list li { padding: 14px 0; display: grid; grid-template-columns: 30px 1fr; gap: 13px; border-bottom: 1px solid var(--line); }
.included-list span { color: var(--terracotta); font-weight: 800; }
.included-list p { margin: 0; color: #4f556c; font-size: 13px; line-height: 1.55; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.audience-grid > div { padding: 22px; border: 1px solid var(--line); }
.audience-grid span { color: var(--terracotta); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.audience-grid p { margin: 12px 0 0; color: var(--graphite); font-size: 12px; line-height: 1.6; }
blockquote { margin: 34px 0 0; padding: 20px 0 0 24px; border-left: 3px solid var(--orange); font-size: 16px; line-height: 1.55; font-weight: 650; }

.faq { background: white; display: grid; grid-template-columns: .7fr 1.3fr; gap: 85px; }
.faq-head { position: sticky; top: 40px; align-self: start; }
.faq-head h2 { font-size: clamp(37px, 3.7vw, 54px); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item button { width: 100%; padding: 24px 0; border: 0; background: none; color: var(--indigo); display: grid; grid-template-columns: 44px 1fr 35px; gap: 10px; text-align: left; align-items: center; cursor: pointer; }
.faq-item button > span { color: var(--terracotta); font-size: 10px; font-weight: 800; }
.faq-item button b { font-size: 15px; }
.faq-item button i { width: 32px; height: 32px; border-radius: 50%; background: var(--ice); display: grid; place-items: center; font-style: normal; font-size: 21px; font-weight: 400; }
.faq-item.open button i { background: linear-gradient(135deg, var(--orange), #FFE08A); color: #0E1A24; }
.faq-answer { padding: 0 35px 24px 54px; }
.faq-answer p { margin: 0; color: var(--graphite); font-size: 14px; line-height: 1.7; }

.lead-section { padding: 105px max(28px, calc((100vw - 1180px)/2)); background: var(--indigo); color: white; display: grid; grid-template-columns: .9fr 1.1fr; gap: 85px; position: relative; }
.lead-section::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 28%; background: url('/brand/pattern-2.svg') center/cover; opacity: .035; }
.lead-copy, .form-card { position: relative; z-index: 1; }
.lead-copy h2 { font-size: clamp(42px, 4.6vw, 65px); line-height: 1; letter-spacing: -.05em; }
.lead-copy > p:not(.eyebrow) { color: rgba(255,255,255,.65); line-height: 1.65; }
.lead-note { padding: 17px 0; display: grid; grid-template-columns: 45px 1fr; border-top: 1px solid rgba(255,255,255,.14); }
.lead-note span { color: var(--orange); font-size: 10px; font-weight: 800; }
.lead-note p { margin: 0; font-size: 13px; }
.form-card { padding: 44px; color: var(--indigo); background: var(--ivory); box-shadow: 25px 30px 0 rgba(236,230,216,.08); }
.field { margin-bottom: 22px; }
.field label { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.field label small { color: var(--graphite); font-size: 9px; font-weight: 600; }
.field input { width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--line); border-radius: 2px; background: white; color: var(--indigo); outline: none; }
.field input:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(138,93,6,.16); }
.field input::placeholder { color: #9ba0ad; }
.submit-button { width: 100%; border: 0; margin-top: 7px; }
.submit-button:disabled { opacity: .7; cursor: wait; }
.form-privacy { margin: 13px 0 0; text-align: center; color: var(--graphite); font-size: 10px; }
.form-error { padding: 10px 12px; color: #9f2d18; background: #fde9e2; font-size: 12px; }
.success-state { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.success-check { width: 58px; height: 58px; margin-bottom: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), #FFE08A); color: #0E1A24; display: grid; place-items: center; font-size: 24px; }
.success-state h3 { margin-bottom: 12px; font-size: 34px; line-height: 1.1; letter-spacing: -.035em; }
.success-state > p:not(.mini-label) { color: var(--graphite); }
.whatsapp-button { margin-top: 22px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; padding: 24px; display: grid; place-items: center; background: rgba(5, 9, 13, .78); backdrop-filter: blur(6px); animation: modal-fade .22s ease both; }
.modal-backdrop[hidden] { display: none; }
.lead-modal { width: min(610px, 100%); padding: 54px; position: relative; color: var(--indigo); background: var(--ivory); border-top: 5px solid var(--orange); box-shadow: 0 35px 90px rgba(5, 9, 13, .4); animation: modal-rise .28s ease both; }
.modal-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--indigo); background: transparent; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease; }
.modal-close:hover { color: white; background: var(--indigo); }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }

footer { padding: 67px max(28px, calc((100vw - 1180px)/2)) 25px; background: #05090D; color: white; }
.footer-main { min-height: 120px; display: grid; grid-template-columns: .6fr 1fr auto; gap: 45px; align-items: start; }
.footer-main img { width: 150px; }
.footer-main p { max-width: 420px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.6; }
.footer-main a { padding-bottom: 6px; border-bottom: 1px solid var(--orange); font-size: 12px; font-weight: 800; }
.footer-bottom { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; color: rgba(255,255,255,.45); font-size: 10px; }
.legal-page { max-width: 820px; min-height: 100vh; margin: 0 auto; padding: 60px 28px 100px; overflow: visible; }
.legal-logo { display: inline-block; margin-bottom: 80px; }
.legal-logo img { width: 155px; }
.legal-page h1 { max-width: none; font-size: clamp(46px, 7vw, 78px); }
.legal-page > p:not(.eyebrow) { color: var(--graphite); font-size: 16px; line-height: 1.75; }
.legal-page .legal-date { margin: 40px 0 25px; font-size: 12px !important; }

.reveal { animation: rise .8s ease both; }
.delay-1 { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

@media (max-width: 980px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 50px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .trust-list { justify-content: center; }
  .hero-visual { min-height: 550px; }
  .split-head, .faq, .lead-section { grid-template-columns: 1fr; }
  .split-head .eyebrow { grid-column: auto; }
  .problem-grid, .solution-grid { grid-template-columns: 1fr; }
  .problem-card, .problem-card + .problem-card { padding: 30px 0; border-left: 0; border-bottom: 1px solid var(--line); min-height: auto; }
  .card-line { margin: 18px 0 25px; }
  .solution-card { min-height: auto; }
  .solution-index { margin-bottom: 45px; }
  .diagnostic { grid-template-columns: 1fr; }
  .diagnostic-intro { padding: 90px 0; }
  .diagnostic-content { margin: 0 calc(-1 * max(28px, calc((100vw - 1180px)/2))); padding: 75px max(28px, calc((100vw - 1180px)/2)); }
  .faq-head { position: static; }
  .lead-section { gap: 45px; }
  .customer-path-head { grid-template-columns: 1fr; gap: 22px; }
  .customer-path-grid { grid-template-columns: repeat(2, 1fr); }
  .customer-path-grid li:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .customer-path-grid li:nth-child(4) { border-top: 1px solid var(--line); }
  .customer-path-grid li:nth-child(2)::after { display: none; }
}

@media (max-width: 640px) {
  .site-header { height: 76px; padding: 0 18px; }
  .brand img { width: 125px; }
  .site-header .button { min-height: 38px; padding: 0 12px; font-size: 10px; }
  .site-header .button span:last-child { display: none; }
  .hero { padding: 45px 20px 72px; min-height: auto; }
  h1 { font-size: 44px; }
  .hero-subtitle { font-size: 15px; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .trust-list { flex-direction: column; align-items: flex-start; }
  .hero-visual { transform: scale(.88); margin: -25px -25px; }
  .sun-orbit { width: 390px; height: 390px; }
  .product-tags span:nth-child(1) { left: 12px; }
  .product-tags span:nth-child(2) { right: 7px; }
  .section { padding: 82px 20px; }
  .section-head h2, .diagnostic-intro h2, .lead-copy h2 { font-size: 39px; }
  .customer-path { padding: 76px 20px; }
  .customer-path-head h2 { font-size: 39px; }
  .customer-path-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .customer-path-grid li { min-height: auto; }
  .customer-path-grid li + li { border-left: 0; border-top: 1px solid var(--line); }
  .customer-path-grid li > span { margin-bottom: 24px; }
  .customer-path-grid li::after { display: none; }
  .solution-close, .process-close { flex-direction: column; align-items: stretch; }
  .solution-close .button, .process-close .button { width: 100%; }
  .step { grid-template-columns: 55px 1fr; gap: 20px; }
  .step-marker { width: 54px; height: 54px; }
  .step-marker span { width: 36px; height: 36px; }
  .timeline::before { left: 27px; }
  .step > div:last-child { grid-template-columns: 1fr; gap: 7px; }
  .diagnostic { padding: 0 20px; }
  .diagnostic-content { margin: 0 -20px; padding: 70px 20px; }
  .audience-grid { grid-template-columns: 1fr; }
  .faq-item button { grid-template-columns: 30px 1fr 32px; }
  .faq-answer { padding-left: 40px; }
  .lead-section { padding: 80px 20px; }
  .form-card { padding: 28px 20px; }
  .modal-backdrop { padding: 14px; }
  .lead-modal { padding: 40px 24px 30px; }
  .lead-modal .success-state h3 { padding-right: 24px; font-size: 29px; }
  .lead-modal .whatsapp-button { width: 100%; }
  .footer-main { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Camada final mobile first */
.site-header { height: 80px; padding: 0 18px; gap: 12px; }
.brand { min-height: 44px; display: inline-flex; align-items: center; }
.brand img { width: 128px; }
.site-header nav { display: none; }
.site-header .button { min-height: 44px; padding: 0 14px; font-size: 12px; }
.site-header .button span:last-child { display: none; }
.button { min-height: 52px; padding: 0 20px; gap: 16px; font-size: 15px; line-height: 1.25; text-align: center; }
.hero { min-height: auto; padding: 28px 20px 62px; grid-template-columns: 1fr; gap: 0; text-align: center; }
.hero-copy { display: contents; }
.eyebrow { margin-bottom: 22px; justify-content: center; font-size: 12px; line-height: 1.45; }
h1 { margin: 0 auto 18px; font-size: clamp(36px, 10.4vw, 44px); line-height: 1.01; letter-spacing: -.045em; }
.hero-subtitle { font-size: 16px; line-height: 1.65; }
.hero-actions { width: 100%; margin: 24px 0; flex-direction: column; }
.hero-actions .button { width: 100%; }
.trust-list { width: 100%; padding-top: 18px; flex-direction: column; align-items: flex-start; gap: 12px; }
.trust-list li { font-size: 14px; line-height: 1.45; text-align: left; }
.hero .eyebrow { order: 1; }
.hero h1 { order: 2; }
.hero-visual { order: 3; min-height: 330px; margin: 2px -8px 22px; transform: none; }
.hero-subtitle { order: 4; margin-bottom: 0; }
.hero-actions { order: 5; }
.trust-list { order: 6; }
.section { padding: 70px 20px; }
.section-head h2, .diagnostic-intro h2, .lead-copy h2 { font-size: clamp(31px, 8.7vw, 38px); line-height: 1.1; letter-spacing: -.038em; }
.section-head > p:last-child, .diagnostic-intro > p:not(.eyebrow), .lead-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.68; }
.split-head { grid-template-columns: 1fr; gap: 18px; }
.split-head .eyebrow { grid-column: auto; }
.problem-grid, .solution-grid { margin-top: 40px; grid-template-columns: 1fr; }
.problem-card, .problem-card + .problem-card { min-height: auto; padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--line); }
.card-line { margin: 20px 0 28px; }
.problem-card h3, .solution-card h3, .step h3 { font-size: 22px; line-height: 1.25; }
.problem-card p, .solution-card p, .step p { font-size: 16px; line-height: 1.68; }
.card-number, .solution-index { font-size: 12px; }
.section-closing { margin-top: 36px; font-size: 19px; line-height: 1.55; }
.solution-card { min-height: auto; padding: 26px 22px; }
.solution-index { margin-bottom: 28px; }
.solution-close, .process-close { margin-top: 34px; flex-direction: column; align-items: stretch; }
.solution-close > p { font-size: 18px; line-height: 1.58; }
.solution-close .button, .process-close .button { width: 100%; }
.solution-close small, .diagnostic-intro small { font-size: 12px; line-height: 1.45; text-align: center; }
.timeline { margin-top: 44px; }
.step { min-height: 0; grid-template-columns: 55px 1fr; gap: 20px; }
.step-marker { width: 54px; height: 54px; }
.step-marker span { width: 38px; height: 38px; font-size: 12px; }
.timeline::before { left: 27px; }
.step > div:last-child { padding-bottom: 28px; grid-template-columns: 1fr; gap: 8px; }
.process-close p { font-size: 17px; line-height: 1.55; }
.diagnostic { padding: 0 20px; grid-template-columns: 1fr; }
.diagnostic-intro { padding: 70px 0; }
.diagnostic-intro .button { width: 100%; }
.diagnostic-content { margin: 0 -20px; padding: 60px 20px; }
.mini-label { font-size: 12px; line-height: 1.45; }
.included-list p { font-size: 15px; line-height: 1.65; }
.audience-grid { grid-template-columns: 1fr; }
.audience-grid span { font-size: 12px; }
.audience-grid p { font-size: 15px; line-height: 1.65; }
blockquote { font-size: 17px; line-height: 1.6; }
.faq { grid-template-columns: 1fr; gap: 34px; }
.faq-head { position: static; }
.faq-item button { min-height: 68px; grid-template-columns: 32px 1fr 36px; }
.faq-item button > span { font-size: 12px; }
.faq-item button b { font-size: 16px; line-height: 1.4; }
.faq-answer { padding-left: 42px; padding-right: 8px; }
.faq-answer p { font-size: 16px; line-height: 1.68; }
.lead-section { padding: 70px 20px; grid-template-columns: 1fr; gap: 36px; }
.lead-note p { font-size: 14px; line-height: 1.5; }
.form-card { padding: 30px 20px; }
.field label { font-size: 13px; line-height: 1.4; }
.field label small { font-size: 12px; }
.field input { min-height: 56px; font-size: 16px; }
.form-privacy { font-size: 12px; line-height: 1.45; }
.lead-modal { padding: 44px 24px 32px; }
.lead-modal .success-state h3 { padding-right: 24px; font-size: 30px; }
.lead-modal .success-state > p:not(.mini-label) { font-size: 16px; line-height: 1.6; }
.lead-modal .whatsapp-button { width: 100%; }
.footer-main { grid-template-columns: 1fr; gap: 22px; }
.footer-main p { font-size: 14px; line-height: 1.65; }
.footer-main a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.footer-bottom { flex-direction: column; gap: 12px; font-size: 12px; line-height: 1.5; }
/* Espaço extra pro botão flutuante de WhatsApp não cobrir o rodapé quando a
   pessoa rola até o fim (reduzido no desktop, onde o botão é menor em
   proporção à tela — ver bloco 981px do .whatsapp-float). */
footer { padding-bottom: 96px; }

@media (min-width: 700px) {
  .site-header { padding: 0 32px; }
  .hero { padding: 70px 32px 96px; gap: 48px; }
  .hero-copy { display: flex; }
  .hero-actions { max-width: 620px; flex-direction: row; }
  .hero-actions .button { width: auto; flex: 1; }
  .trust-list { max-width: 720px; flex-direction: row; justify-content: center; }
  .hero-visual { transform: scale(1); margin: 0; }
  .section { padding: 100px 32px; }
  .section-head h2, .diagnostic-intro h2, .lead-copy h2 { font-size: clamp(42px, 6vw, 56px); }
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-card:last-child { grid-column: 1 / -1; }
  .solution-card { padding: 26px 22px; }
  .solution-card h3 { font-size: 19px; }
  .solution-card p { font-size: 15px; }
  .diagnostic { padding: 0 32px; }
  .diagnostic-content { margin: 0 -32px; padding: 84px 32px; }
  .audience-grid { grid-template-columns: 1fr 1fr; }
  .form-card { padding: 44px; }
}

@media (min-width: 981px) {
  /* Faixa full-bleed: o fundo escuro atravessa a tela inteira e só o
     CONTEÚDO fica preso à grade de 1240px (via padding). Nunca usar
     max-width aqui — isso encolhe a própria faixa em telas largas. */
  .site-header { height: 92px; padding: 0 max(28px, calc((100vw - 1240px)/2)); gap: 28px; }
  .brand img { width: 154px; }
  .site-header nav { display: flex; }
  .site-header .button { min-height: 44px; padding: 0 17px; font-size: 13px; }
  .site-header .button span:last-child { display: inline; }
  .hero { min-height: 710px; padding: 76px max(28px, calc((100vw - 1240px)/2)) 96px; grid-template-columns: 1.08fr .92fr; gap: 62px; text-align: left; }
  .hero-copy { display: block; }
  .eyebrow { justify-content: flex-start; }
  h1 { font-size: clamp(52px, 5.3vw, 76px); line-height: .97; letter-spacing: -.055em; }
  .hero-subtitle { font-size: 17px; }
  .hero-actions { width: auto; max-width: none; flex-direction: row; }
  .hero-actions .button { width: auto; flex: none; }
  .trust-list { width: auto; max-width: none; flex-direction: row; justify-content: flex-start; }
  .hero-visual { min-height: 540px; }
  .section { padding: 120px max(28px, calc((100vw - 1180px)/2)); }
  .section-head h2 { font-size: clamp(42px, 4vw, 60px); line-height: 1.04; }
  .split-head { grid-template-columns: 1.3fr .7fr; gap: 25px 75px; }
  .split-head .eyebrow { grid-column: 1 / -1; }
  .problem-grid { margin-top: 70px; grid-template-columns: repeat(3, 1fr); }
  .problem-card { min-height: 280px; padding: 33px 36px 39px 0; border-bottom: 0; }
  .problem-card + .problem-card { padding-left: 36px; border-left: 1px solid var(--line); border-bottom: 0; }
  .card-line { margin: 32px 0 52px; }
  .problem-card h3, .solution-card h3, .step h3 { font-size: 20px; }
  .problem-card p, .solution-card p, .step p { font-size: 15px; }
  .solution-card { min-height: 315px; padding: 32px; }
  .solution-card:last-child { grid-column: auto; }
  .solution-index { margin-bottom: 66px; }
  .solution-close, .process-close { flex-direction: row; align-items: center; }
  .solution-close .button, .process-close .button { width: auto; }
  .step { min-height: 140px; grid-template-columns: 70px 1fr; gap: 36px; }
  .step-marker { width: 67px; height: 67px; }
  .step-marker span { width: 43px; height: 43px; }
  .timeline::before { left: 33px; }
  .step > div:last-child { grid-template-columns: .45fr .55fr; gap: 45px; }
  .diagnostic { padding: 0 max(28px, calc((100vw - 1180px)/2)); grid-template-columns: .82fr 1.18fr; }
  .diagnostic-intro { padding: 105px 65px 105px 0; }
  .diagnostic-intro .button { width: auto; }
  .diagnostic-content { margin-right: calc((1180px - 100vw)/2); margin-left: 0; padding: 105px max(45px, calc((100vw - 1180px)/2)) 105px 64px; }
  .faq { grid-template-columns: .7fr 1.3fr; gap: 85px; }
  .faq-head { position: sticky; }
  .lead-section { padding: 105px max(28px, calc((100vw - 1180px)/2)); grid-template-columns: .9fr 1.1fr; gap: 85px; }
  .footer-main { grid-template-columns: .6fr 1fr auto; gap: 45px; }
  .footer-bottom { flex-direction: row; }
}

.hero-car-visual { min-height: 380px; margin: 0; padding-bottom: 36px; transform: none; }
.hero-car-frame { width: 100%; aspect-ratio: 4 / 3; position: relative; overflow: hidden; border-radius: 5px; background: var(--indigo); box-shadow: 22px 26px 55px rgba(11,21,30,.2); }
.hero-car-frame::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; z-index: 2; background: var(--orange); }
.hero-car-frame::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 18%, rgba(253,189,2,.2), transparent 42%), linear-gradient(180deg, rgba(18,22,52,.02) 45%, rgba(10,12,30,.58) 100%); mix-blend-mode: color; }
.hero-car-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 53% center; transform: scale(1.015); }
.car-message { position: absolute; z-index: 3; min-height: 68px; padding: 13px 15px; display: grid; grid-template-columns: 12px 1fr auto; gap: 11px; align-items: center; border: 1px solid rgba(11,21,30,.12); border-radius: 4px; color: var(--indigo); background: rgba(246,243,237,.97); box-shadow: 0 16px 38px rgba(15,18,48,.2); text-align: left; }
.car-message div { display: flex; flex-direction: column; gap: 4px; }
.car-message small { color: var(--terracotta); font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.car-message b { font-size: 14px; line-height: 1.3; }
.car-message i { color: var(--graphite); font-size: 11px; font-style: normal; }
.message-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(253,189,2,.14); }
.car-message-primary { right: 12px; bottom: 58px; left: 12px; }
.car-message-secondary { width: min(245px, 76%); top: 20px; right: -7px; grid-template-columns: 12px 1fr; background: rgba(236,230,216,.96); }
.hero-car-visual .visual-caption { bottom: 0; }
.phone-compact { position: absolute; z-index: 4; width: 158px; height: 306px; left: 10px; bottom: 42px; border: 5px solid #090a0d; border-radius: 28px; background: linear-gradient(145deg,#454a56 0%,#111318 20%,#050608 72%); transform: rotate(-3deg); box-shadow: 0 0 0 1px #555b67, 18px 24px 45px rgba(7,9,26,.55), inset 0 0 0 1px rgba(255,255,255,.18); }
.phone-compact::before { content: ''; position: absolute; top: 58px; left: -9px; width: 3px; height: 30px; border-radius: 3px 0 0 3px; background: linear-gradient(#555a64,#121419); box-shadow: 0 38px 0 #1b1e25, 0 73px 0 #1b1e25; }
.phone-compact::after { content: ''; position: absolute; top: 86px; right: -9px; width: 3px; height: 52px; border-radius: 0 3px 3px 0; background: linear-gradient(#4f5560,#121419); }
.phone-compact .phone-top { height: 25px; padding: 7px 9px 0; align-items: flex-start; color: #f8f8fb; background: #101217; font-size: 5.5px; }
.phone-compact .phone-notch { position: relative; width: 46px; height: 13px; margin-top: -4px; border-radius: 10px; background: #030405; box-shadow: inset 0 1px 2px rgba(255,255,255,.08); }
.phone-compact .phone-notch i { position: absolute; width: 4px; height: 4px; top: 4px; right: 7px; border-radius: 50%; background: #111d35; box-shadow: inset 0 0 1px #6386d8; }
.phone-status { letter-spacing: -.04em; white-space: nowrap; }
.phone-compact .phone-screen { position: relative; height: calc(100% - 25px); padding: 0 8px 34px; overflow: hidden; border-radius: 0 0 22px 22px; background: linear-gradient(rgba(237,239,246,.94),rgba(246,243,237,.98)), url('/brand/pattern-2.svg') center/220px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.phone-compact .phone-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg,rgba(255,255,255,.12),transparent 28% 75%,rgba(255,255,255,.04)); }
.chat-header { height: 43px; margin: 0 -8px 12px; padding: 7px 7px; display: grid; grid-template-columns: 9px 27px minmax(0,1fr) auto; gap: 5px; align-items: center; color: white; background: linear-gradient(135deg,#303875,#22285b); box-shadow: 0 3px 12px rgba(20,24,58,.22); }
.chat-contact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-header b { overflow: hidden; font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.chat-header small { color: rgba(255,255,255,.72); font-size: 5px; }
.chat-back { font-size: 15px; line-height: 1; }
.chat-avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #0E1A24; background: linear-gradient(135deg, var(--orange), #FFE08A); font-size: 9px; font-weight: 800; }
.chat-actions { color: rgba(255,255,255,.84); font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
.chat-date { width: max-content; margin: 0 auto 9px; padding: 3px 7px; border-radius: 9px; color: #74798d; background: rgba(255,255,255,.7); font-size: 5px; }
.phone-compact .message { max-width: 88%; margin-bottom: 8px; padding: 8px 9px 6px; border-radius: 9px 9px 9px 3px; box-shadow: 0 4px 12px rgba(11,21,30,.09); }
.phone-compact .message.store { margin-left: auto; border-radius: 9px 9px 3px 9px; color: white; background: var(--indigo); }
.phone-compact .message.customer { margin-right: auto; color: #292d43; background: white; }
.phone-compact .message p { margin: 0 0 4px; font-size: 7.5px; line-height: 1.35; }
.phone-compact .message small { display: block; font-size: 5px; text-align: right; opacity: .66; }
.phone-compact .message small i { color: #9db8ff; font-style: normal; letter-spacing: -.12em; }
.chat-composer { position: absolute; z-index: 2; right: 7px; bottom: 11px; left: 7px; height: 24px; display: grid; grid-template-columns: 14px 1fr 21px; gap: 4px; align-items: center; color: #8a8ea0; font-size: 9px; }
.chat-input { height: 21px; padding: 5px 8px; border: 1px solid rgba(11,21,30,.12); border-radius: 12px; background: rgba(255,255,255,.92); font-size: 6px; box-shadow: 0 2px 7px rgba(11,21,30,.06); }
.chat-send { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #0E1A24; background: linear-gradient(135deg, var(--orange), #FFE08A); font-size: 7px; transform: rotate(-8deg); }
.home-indicator { position: absolute; z-index: 3; width: 46px; height: 3px; right: 50%; bottom: 3px; border-radius: 3px; background: rgba(20,22,30,.78); transform: translateX(50%); }

@media (min-width: 700px) {
  .hero-car-visual { min-height: 500px; max-width: 680px; width: 100%; margin: 0 auto; }
  .hero-car-frame { aspect-ratio: 16 / 10; }
  .car-message-primary { width: 340px; right: auto; bottom: 56px; left: 34px; }
  .car-message-secondary { width: 280px; top: 38px; right: 12px; }
  .phone-compact { width: 190px; height: 374px; left: 28px; bottom: 42px; border-width: 6px; }
  .phone-compact .message p { font-size: 9px; }
  .chat-header { height: 51px; grid-template-columns: 12px 32px minmax(0,1fr) auto; }
  .chat-avatar { width: 30px; height: 30px; font-size: 11px; }
  .chat-header b { font-size: 10px; }
  .chat-header small { font-size: 6px; }
  .chat-actions { font-size: 10px; }
  .chat-composer { height: 28px; grid-template-columns: 16px 1fr 25px; }
  .chat-input { height: 25px; padding: 6px 9px; font-size: 7px; }
  .chat-send { width: 25px; height: 25px; }
}

@media (min-width: 860px) and (max-width: 980px) {
  .hero { padding: 62px 32px 88px; grid-template-columns: 1.08fr .92fr; gap: 38px; text-align: left; align-items: center; }
  .hero-copy { display: block; }
  .hero .eyebrow { justify-content: flex-start; }
  .hero h1 { font-size: clamp(44px, 5.1vw, 50px); line-height: 1; }
  .hero-actions { max-width: none; }
  .trust-list { max-width: none; justify-content: flex-start; }
  .hero-car-visual { min-height: 500px; }
  .hero-car-frame { height: 460px; aspect-ratio: auto; }
  .car-message-primary { width: 315px; left: -18px; }
  .car-message-secondary { width: 250px; right: -14px; }
  .phone-compact { width: 194px; height: 382px; left: -18px; bottom: 42px; }
}

@media (min-width: 981px) {
  .hero-car-visual { min-height: 540px; max-width: none; margin: 0; }
  .hero-car-frame { height: 510px; aspect-ratio: auto; }
  .car-message-primary { left: -24px; bottom: 58px; }
  .car-message-secondary { top: 54px; right: -24px; }
  .phone-compact { width: 205px; height: 404px; left: -26px; bottom: 48px; }
}

/* Hero motion and photographic phone mockup */
.hero-car-visual::before { content: ''; position: absolute; z-index: 0; width: 88%; height: 78%; right: -4%; top: 5%; border-radius: 50%; background: radial-gradient(circle,rgba(253,189,2,.2) 0%,rgba(253,189,2,.08) 32%,transparent 70%); filter: blur(22px); animation: hero-spotlight 9s ease-in-out infinite alternate; }
.hero-car-frame { z-index: 1; }
.headlight-pulse { position: absolute; z-index: 3; width: 92px; height: 92px; left: 51%; top: 40%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle,rgba(215,239,255,.34),rgba(117,194,255,.12) 28%,transparent 66%); mix-blend-mode: screen; opacity: .12; animation: headlight-breathe 8s ease-in-out .8s infinite; }

.phone-compact { width: 150px; height: 301px; left: 8px; bottom: 42px; border: 0; border-radius: 28px; background: transparent; box-shadow: none; transform: rotate(-3deg); animation: phone-arrive .9s cubic-bezier(.2,.8,.2,1) .25s both; }
.phone-compact::before,.phone-compact::after { display: none; }
.phone-device { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; filter: drop-shadow(15px 22px 24px rgba(5,7,20,.48)); animation: device-notify 8s ease-in-out .8s infinite; }
.phone-compact .phone-screen { position: absolute; z-index: 2; inset: 2.9% 5.1% 3.15%; width: auto; height: auto; padding: 25px 8px 34px; overflow: hidden; border-radius: 14% / 7%; background: linear-gradient(rgba(237,239,246,.95),rgba(246,243,237,.98)),url('/brand/pattern-2.svg') center/220px; box-shadow: none; animation: device-notify 8s ease-in-out .8s infinite; }
.phone-compact .phone-top { position: absolute; z-index: 5; height: 23px; top: 3.2%; right: 7%; left: 7%; padding: 6px 5px 0; color: #f8f8fb; background: transparent; font-size: 5px; pointer-events: none; animation: device-notify 8s ease-in-out .8s infinite; }
.phone-compact .phone-notch { width: 43px; height: 13px; margin-top: -3px; }
.phone-compact .chat-header { height: 41px; margin: 0 -8px 10px; }
.phone-compact .message.store { opacity: 0; transform: translate3d(12px,8px,0) scale(.96); animation: conversation-store 8s cubic-bezier(.2,.8,.2,1) .8s infinite; }
.typing-indicator { width: 36px; height: 20px; margin: 0 auto 8px 0; padding: 0 8px; display: flex; gap: 3px; align-items: center; border-radius: 9px 9px 9px 3px; background: white; box-shadow: 0 4px 12px rgba(11,21,30,.09); opacity: 0; animation: conversation-typing 8s ease .8s infinite; }
.typing-indicator i { width: 3px; height: 3px; border-radius: 50%; background: #8a8ea0; animation: typing-dot .72s ease-in-out infinite alternate; }
.typing-indicator i:nth-child(2) { animation-delay: .14s; }
.typing-indicator i:nth-child(3) { animation-delay: .28s; }
.phone-compact .message.customer { opacity: 0; transform: translate3d(-12px,8px,0) scale(.96); animation: conversation-customer 8s cubic-bezier(.2,.8,.2,1) .8s infinite; }
.phone-alert { position: absolute; z-index: 6; width: 20px; height: 20px; top: 8px; right: 4px; display: grid; place-items: center; border: 2px solid #F6F3ED; border-radius: 50%; color: #0E1A24; background: linear-gradient(135deg, var(--orange), #FFE08A); font-size: 8px; font-weight: 800; opacity: 0; transform: scale(.4); box-shadow: 0 0 0 0 rgba(253,189,2,.5); animation: conversation-alert 8s cubic-bezier(.2,1.5,.3,1) .8s infinite; }

.hero-car-visual::before,
.headlight-pulse,
.phone-compact,
.phone-device,
.phone-compact .phone-screen,
.phone-compact .phone-top,
.phone-compact .message.store,
.typing-indicator,
.typing-indicator i,
.phone-compact .message.customer,
.phone-alert { animation-play-state: paused; }

.hero-motion-active .hero-car-visual::before,
.hero-motion-active .headlight-pulse,
.hero-motion-active .phone-compact,
.hero-motion-active .phone-device,
.hero-motion-active .phone-compact .phone-screen,
.hero-motion-active .phone-compact .phone-top,
.hero-motion-active .phone-compact .message.store,
.hero-motion-active .typing-indicator,
.hero-motion-active .typing-indicator i,
.hero-motion-active .phone-compact .message.customer,
.hero-motion-active .phone-alert { animation-play-state: running; }

@keyframes phone-arrive { from { opacity: 0; transform: translate3d(-18px,28px,0) rotate(-7deg) scale(.94); } to { opacity: 1; transform: translate3d(0,0,0) rotate(-3deg) scale(1); } }
@keyframes conversation-store { 0%,8% { opacity: 0; transform: translate3d(12px,8px,0) scale(.96); } 16%,90% { opacity: 1; transform: translate3d(0,0,0) scale(1); } 97%,100% { opacity: 0; transform: translate3d(0,-3px,0) scale(1); } }
@keyframes conversation-typing { 0%,25%,49%,100% { opacity: 0; transform: translateY(5px); } 31%,44% { opacity: 1; transform: translateY(0); } }
@keyframes conversation-customer { 0%,45% { opacity: 0; transform: translate3d(-12px,8px,0) scale(.96); } 54%,90% { opacity: 1; transform: translate3d(0,0,0) scale(1); } 97%,100% { opacity: 0; transform: translate3d(0,-3px,0) scale(1); } }
@keyframes conversation-alert { 0%,47%,100% { opacity: 0; transform: scale(.4); box-shadow: 0 0 0 0 rgba(253,189,2,.5); } 53% { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 8px rgba(253,189,2,0); } 58%,78% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 8px rgba(253,189,2,0); } 86% { opacity: 0; transform: scale(.85); } }
@keyframes device-notify { 0%,4%,9%,100% { transform: translateX(0); } 5% { transform: translateX(1.8px); } 6% { transform: translateX(-1.8px); } 7% { transform: translateX(.8px); } 8% { transform: translateX(0); } }
@keyframes typing-dot { from { transform: translateY(1px); opacity: .45; } to { transform: translateY(-2px); opacity: 1; } }
@keyframes hero-spotlight { from { transform: translate3d(-3%,1%,0) scale(.96); opacity: .68; } to { transform: translate3d(4%,-2%,0) scale(1.05); opacity: 1; } }
@keyframes headlight-breathe { 0%,38%,100% { opacity: .12; transform: scale(.9); } 49% { opacity: .68; transform: scale(1.1); } 62% { opacity: .16; transform: scale(1); } }

@media (min-width:700px) {
  .phone-compact { width: 180px; height: 362px; left: 28px; bottom: 38px; }
  .phone-compact .phone-screen { padding: 30px 9px 38px; }
  .phone-compact .phone-top { font-size: 6px; }
  .phone-compact .chat-header { height: 48px; }
  .typing-indicator { width: 43px; height: 24px; }
}

@media (min-width:860px) and (max-width:980px) {
  .phone-compact { width: 184px; height: 370px; left: -16px; bottom: 38px; }
}

@media (min-width:981px) {
  .phone-compact { width: 194px; height: 390px; left: -22px; bottom: 44px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-car-visual::before,.headlight-pulse,.phone-compact,.phone-device,.phone-compact .phone-screen,.phone-compact .phone-top,.phone-compact .message.store,.typing-indicator,.typing-indicator i,.phone-compact .message.customer,.phone-alert { animation: none !important; }
  .phone-compact,.phone-compact .message.store,.phone-compact .message.customer,.phone-alert { opacity: 1; transform: rotate(-3deg); }
  .phone-compact .message.store,.phone-compact .message.customer { transform: none; }
  .typing-indicator { display: none; }
}

/* Banner de cookies (LGPD): gateia Meta Pixel/CAPI ao consentimento de marketing.
   Revisão completa de texto/base legal é responsabilidade do checkpoint do Renato
   antes da publicação final em produção. */
#cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999; max-width: 760px; margin: 0 auto; padding: 20px 24px; display: none; gap: 16px; align-items: center; flex-wrap: wrap; color: white; background: var(--indigo); box-shadow: 0 24px 48px rgba(15,18,48,.35); }
#cookie-banner p { margin: 0; flex: 1; min-width: 240px; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.82); }
#cookie-banner a { text-decoration: underline; color: white; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#cookie-banner button { padding: 11px 18px; border-radius: 2px; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; }
#cookie-reject { border: 1px solid rgba(255,255,255,.4); background: transparent; color: white; }
#cookie-reject:hover { background: rgba(255,255,255,.1); }
#cookie-accept { border: 1px solid var(--orange); background: linear-gradient(135deg, var(--orange), #FFE08A); color: #0E1A24; }
#cookie-accept:hover { background: #E0A600; }

/* ÚNICO elemento flutuante da página: o botão redondo de WhatsApp, presente
   em TODAS as larguras. Não existe barra fixa de CTA — o botão "Quero meu
   diagnóstico gratuito" já se repete ao longo das dobras, e uma barra fixa
   com o mesmo texto ficava duplicada por cima do CTA da própria seção. */
.whatsapp-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 58px; min-height: 58px; padding: 14px; overflow: hidden; display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; border-radius: 999px; color: white; background: #25D366; box-shadow: 0 10px 26px rgba(11,21,30,.3); font-size: 13px; font-weight: 800; transition: width .25s ease, transform .2s ease, background .2s ease, box-shadow .2s ease; }
/* O rótulo fica recolhido e só se abre no hover/foco (ponteiro). No toque
   não há hover, então o botão permanece redondo — que é o pedido. */
.whatsapp-float > span:last-child { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, opacity .18s ease; }
.whatsapp-float:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
/* Glifo oficial do WhatsApp em branco sobre o verde da marca (#25D366).
   currentColor no path: a cor vem do .whatsapp-float, então o ícone
   acompanha qualquer ajuste de cor do botão sem edição no SVG. */
.whatsapp-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
/* Enquanto o banner de cookies (z-index 999) não for respondido, sobe o
   botão pra não empilhar os dois no mesmo canto. */
body:has(#cookie-banner:not([hidden])) .whatsapp-float { bottom: 100px; }

@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover, .whatsapp-float:focus-visible { width: 205px; padding-right: 20px; color: white; background: #1DB954; transform: translateY(-3px); box-shadow: 0 18px 42px rgba(11,21,30,.34); }
  .whatsapp-float:hover > span:last-child, .whatsapp-float:focus-visible > span:last-child { max-width: 130px; opacity: 1; }
}
@media (min-width: 981px) {
  footer { padding-bottom: 25px; }
  .whatsapp-float { right: 24px; bottom: 24px; width: 58px; min-height: 58px; }
}
@media (max-width: 640px) {
  #cookie-banner { flex-direction: column; align-items: stretch; left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions button { flex: 1; }
}