/* Light: estilos da home. */
/* ===== Tokens ===== */
:root {
--bg:      #DCDCDC;  /* fundo geral */
--paper:   #F0F0F0;  /* painel do topo */
--white:   #FFFFFF;
--ink:     #0C1E29;  /* texto e blocos escuros (azul-petróleo) */
--ink-2:   #163246;  /* azul-petróleo mais claro, para relevo */
--steel:   #2C5873;  /* luz azulada sobre o escuro */
--deep:    #07131A;  /* sombra do azul-petróleo */
--muted:   #53616B;  /* texto secundário */
--soft:    #8F9AA1;  /* texto apagado */
--line:    rgba(12,30,41,.14);
--accent:  #FFFE15;  /* cor de destaque da marca */
--dark:    #0C1E29;

/* 80% da tela no desktop; em telas menores o site ocupa quase toda a largura */
--outer: max(80vw, min(100vw - 24px, 900px));
--inner: max(80vw, min(100vw - 40px, 900px));
--u: calc(var(--outer) / 1232); /* 1px do layout-base (1232px), proporcional ao contêiner */

--display: "Cal Sans", "Inter", system-ui, sans-serif;
--body: "Inter", system-ui, sans-serif;
--script: "Caveat", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: clamp(16px, 8px + .5556vw, 24px); }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 .9375rem/1.55 var(--body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--accent); border-radius: 6px; }
/* Marca-texto amarelo: o destaque legível sobre fundo claro */
.mark { background: linear-gradient(180deg, transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); padding: 0 .06em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: var(--inner); margin-inline: auto; }
.icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ===== Botões ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 2.75rem; padding: 0 1.25rem; border-radius: 999px;
font: 500 .875rem/1 var(--body); white-space: nowrap;
transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-dark {
background: var(--ink-2); color: var(--white);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -6px rgba(7,19,26,.6);
}
.btn-dark:hover { background: var(--ink); color: var(--accent); }
.btn-ghost { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-sm { height: 2.25rem; padding: 0 1rem; font-size: .8125rem; }

/* ===== Títulos de seção ===== */
.eyebrow { font-size: .8125rem; color: var(--muted); text-align: center; }
.giant {
display: block; text-align: center; white-space: nowrap;
font: 400 max(46px, calc(136 * var(--u)))/.9 var(--display); letter-spacing: -.01em;
background: linear-gradient(180deg, #A2A2A2 15%, rgba(220,220,220,0) 92%);
-webkit-background-clip: text; background-clip: text; color: transparent;
margin: 6px 0 -.12em; position: relative; z-index: 0; user-select: none;
}
.h2 { font: 400 max(28px, calc(40 * var(--u)))/1.08 var(--display); letter-spacing: -.005em; }
section { position: relative; }
.over { position: relative; z-index: 1; }

/* ===== Topo (painel claro) ===== */
.top {
width: var(--outer); margin: 0 auto; position: relative;
background: var(--paper); border-radius: 0 0 28px 28px;
box-shadow: 0 0 44px rgba(12,30,41,.07), 0 22px 44px -22px rgba(12,30,41,.2);
padding: 0 4px 0;
}
.notch {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 8px;
background: var(--ink); color: var(--white);
font-size: .75rem; font-weight: 500; white-space: nowrap;
padding: 6px 20px 8px; border-radius: 0 0 16px 16px; z-index: 5;
}
.notch::before, .notch::after { content: ""; position: absolute; top: 0; width: 16px; height: 16px; }
.notch::before { left: -16px; background: radial-gradient(circle at 0 100%, transparent 15.5px, var(--ink) 16px); }
.notch::after  { right: -16px; background: radial-gradient(circle at 100% 100%, transparent 15.5px, var(--ink) 16px); }
.notch .dot { width: 7px; height: 7px; border-radius: 50%; background: #61C554; box-shadow: 0 0 0 3px rgba(97,197,84,.22); }

/* Cabeçalho */
.site-header {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 42px max(16px, calc(72 * var(--u))) 0; position: relative; z-index: 4;
}
.logo { font: 400 1.625rem/1 var(--display); color: var(--accent); letter-spacing: -.01em; }
.site-header .logo { color: var(--ink); }
.site-header .logo span { display: inline-block; width: .3em; height: .3em; margin-left: .04em; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--ink); color: transparent; overflow: hidden; vertical-align: baseline; }
.lang { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.lang-flag { display: grid; place-items: center; width: 40px; height: 32px; border-radius: 999px; transition: background .2s; }
.lang-flag svg { width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(12,30,41,.12); }
.lang-flag:hover { background: var(--bg, #F0F0F0); }
.lang-flag[aria-current] { background: var(--accent); }

/* Hero */
.hero { text-align: center; padding: max(56px, calc(88 * var(--u))) 16px max(36px, calc(48 * var(--u))); }
.trust { display: inline-flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--muted); margin-bottom: 24px; }
.trust-faces { display: flex; flex: none; }
.trust-faces span {
width: 2.25rem; height: 2.25rem; border-radius: 50%; margin-left: -.5rem; overflow: hidden;
border: 2px solid var(--paper); background: var(--bg);
}
.trust-faces span:first-child { margin-left: 0; }
.trust-faces img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) { .trust { flex-direction: column; gap: 8px; } }
.hero h1 {
font: 400 max(32px, calc(52 * var(--u)))/1.06 var(--display); letter-spacing: -.012em;
max-width: 15.5em; margin: 0 auto;
}
.hero h1 .line { display: block; }
.hero h1 .g { color: var(--muted); }
.hero h1 .a { color: var(--ink); }
.nb { white-space: nowrap; }
@media (max-width: 480px) { .hero h1 { font-size: min(32px, calc((100vw - 64px) / 10.3)); } }
.pill-img {
display: inline-block; vertical-align: -.08em; width: 1.18em; height: .84em; border-radius: 999px;
margin: 0 .08em; position: relative; overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px -8px rgba(7,19,26,.6);
}
.pill-img svg { position: absolute; inset: 0; margin: auto; width: .46em; height: .46em; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pill-img.p1 { background: radial-gradient(120% 120% at 30% 20%, #FFFF9E 0%, var(--accent) 45%, #E9E700 100%); }
.pill-img.p1 svg { stroke: var(--ink); }
.pill-img.p2 { background: radial-gradient(120% 120% at 70% 20%, var(--steel) 0%, var(--ink) 70%); }
.pill-img.p3 { background: radial-gradient(120% 120% at 30% 80%, var(--ink-2) 0%, var(--deep) 75%); }
.pill-img.p3 svg { stroke: var(--accent); }
.hero-sub { max-width: 35rem; margin: 22px auto 0; color: var(--muted); font-size: .9375rem; }
.hero-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (prefers-reduced-motion: no-preference) {
.hero > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero > *:nth-child(2) { animation-delay: .08s; }
.hero > *:nth-child(3) { animation-delay: .16s; }
.hero > *:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
}

/* Vitrine: do processo bagunçado à solução implantada */
.showcase {
position: relative; border-radius: 24px; overflow: hidden;
background: radial-gradient(62% 90% at 76% 50%, rgba(44,88,115,.55), transparent 72%), var(--deep);
transform-origin: 50% 0; will-change: transform;
}
.journey {
display: grid; grid-template-columns: 1fr calc(290 * var(--u)) 1.2fr;
padding: max(20px, calc(28 * var(--u)));
}
.j-col { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
.j-cap { font: 400 max(17px, calc(21 * var(--u)))/1.15 var(--display); color: var(--white); margin-bottom: 14px; }

.j-mess { flex: 1; min-height: 340px; position: relative; font-size: max(11px, calc(12.5 * var(--u))); line-height: 1.3; color: var(--ink); }
.j-mess > div { position: absolute; border-radius: 8px; background: #D5DADD; box-shadow: 0 14px 26px -14px rgba(0,0,0,.8); }
.m-sheet { left: 0; top: 0; width: 76%; rotate: -5deg; padding: .72em; }
.m-sheet p { font-weight: 600; margin-bottom: .48em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #A9B2B8; border: 1px solid #A9B2B8; }
.m-grid span { background: #EEF0F1; height: 1.8em; font-size: .88em; line-height: 1.8em; text-align: center; }
.m-grid .err { color: #B3261E; font-weight: 600; }
.j-mess > .m-chat { left: 40%; top: 25%; width: 60%; rotate: 5deg; padding: .64em; display: grid; gap: .4em; background: #B9C2C6; }
.m-chat span { padding: .32em .64em; border-radius: .56em; background: #F5F6F6; justify-self: start; }
.m-chat .me { background: #D3F2C6; justify-self: end; }
.j-mess > .m-note { left: 2%; top: 34%; width: 37%; rotate: -5deg; padding: .5em; background: #EEF0F1; border-radius: 2px; font: 500 1.76em/1.02 var(--script); }
.j-mess > .m-note2 { left: 5%; top: auto; bottom: 1%; width: 38%; rotate: 5deg; }
.j-mess > .m-copy { left: auto; right: 0; top: auto; bottom: 0; width: 56%; rotate: 6deg; }
.m-mail { left: 0; top: 57%; width: 66%; rotate: 3deg; padding: .72em .88em; }
.m-mail b { display: block; font-weight: 600; margin-bottom: .48em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-mail i { display: block; height: .4em; border-radius: 9px; background: #A9B2B8; margin-top: .32em; }
.m-mail i:last-child { width: 62%; }
.j-mess > .m-alert { right: 0; top: 64%; rotate: -5deg; padding: .56em .8em; font-weight: 600; background: #F5F6F6; display: flex; align-items: center; gap: .48em; white-space: nowrap; }
.m-alert::before { content: ""; width: .56em; height: .56em; border-radius: 50%; background: #B3261E; }

.j-mid { position: relative; z-index: 2; display: grid; place-items: center; }
.j-lines { position: absolute; left: calc(-140 * var(--u)); top: 50%; width: calc(100% + calc(140 * var(--u))); max-width: none; height: calc(120 * var(--u)); pointer-events: none; transform: translateY(-50%); overflow: visible; }
.j-disc {
position: relative; width: max(136px, calc(176 * var(--u))); aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: var(--ink);
display: grid; place-items: center; text-align: center; padding: 10%;
font: 400 max(16px, calc(21 * var(--u)))/1.08 var(--display);
box-shadow: 0 0 0 .5em rgba(255,255,255,.07), 0 0 0 1.15em rgba(255,255,255,.03);
}

.j-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.j-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px 8px 10px; border-radius: 14px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.j-tile b { font: 400 max(13px, calc(15 * var(--u)))/1.1 var(--display); color: var(--white); padding-inline: 3px; }
.j-ui { aspect-ratio: 200 / 90; border-radius: 8px; overflow: hidden; background: var(--paper); position: relative; }
.j-ui svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.j-ui .k { fill: var(--ink); }
.j-ui .y { fill: var(--accent); }
.j-ui .s { fill: var(--steel); }
.j-ui .c { fill: #C8CED2; }
.j-ui .w { fill: var(--white); }

@media (max-width: 860px) {
.journey { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
.j-mess { flex: none; height: 350px; font-size: 12.5px; }
.j-mid { padding: 34px 0; }
.j-mid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--soft), var(--accent)); }
.j-lines { display: none; }
.j-disc { width: 150px; font-size: 1.125rem; }
}

/* Mosaico do fundo da seção de contato */
.mosaic {
position: absolute; left: -16%; top: -26%; width: 132%;
display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: max(120px, calc(210 * var(--u))); gap: 14px;
transform: rotate(-9deg);
}
.tile { border-radius: 18px; position: relative; overflow: hidden; color: var(--white); background: var(--ink); }
.tile b, .tile i { position: absolute; font-style: normal; }
.t-script { font: 500 max(30px, calc(54 * var(--u)))/1 var(--script); color: rgba(255,255,255,.55); left: 18px; top: 16%; }
.t1 b { font: 400 max(30px, calc(64 * var(--u)))/1 var(--display); left: 16px; bottom: 22%; letter-spacing: .01em; }
.t2 { grid-column: span 2; color: var(--ink); background: radial-gradient(70% 90% at 22% 60%, #FFFFB8 0%, var(--accent) 40%, #EDEB00 100%); }
.t2 b { font: 400 max(40px, calc(86 * var(--u)))/1 var(--display); right: 8%; bottom: 18%; letter-spacing: -.01em; }
.t2 i { left: 44%; top: 14%; font: 600 .625rem/1.6 var(--body); letter-spacing: .08em; color: rgba(12,30,41,.7); white-space: pre; }
.t3 { background: linear-gradient(160deg, #EEF1F3, #C8CED2); }
.t3 .ui { position: absolute; inset: 18% 12%; display: grid; gap: 8px; align-content: start; }
.t3 .ui span { height: 10px; border-radius: 99px; background: rgba(12,30,41,.14); }
.t3 .ui span:nth-child(1) { width: 60%; background: var(--ink); }
.t3 .ui span:nth-child(2) { width: 90%; }
.t3 .ui span:nth-child(3) { width: 74%; }
.t3 .ui span:nth-child(4) { width: 82%; }
.t4 { background: linear-gradient(135deg, var(--deep) 20%, var(--ink-2) 60%, var(--steel) 120%); }
.t4 b { font: 400 max(22px, calc(34 * var(--u)))/1 var(--display); left: 12%; bottom: 20%; transform: rotate(-12deg); color: var(--accent); }
.t5 { background: var(--deep); }
.t5 .phone { position: absolute; left: 50%; top: 12%; width: 34%; aspect-ratio: 9/17; transform: translateX(-50%); border-radius: 12px; color: var(--ink); background: linear-gradient(170deg, #FFFF9E, var(--accent) 55%, #E3E100); box-shadow: 0 0 0 3px var(--ink-2); }
.t5 .phone b { font: 400 max(14px, calc(22 * var(--u)))/1 var(--display); left: 10px; bottom: 12px; }
.t6 { background: radial-gradient(90% 90% at 80% 20%, var(--steel), var(--ink) 70%); }
.t6 b { font: 400 max(26px, calc(46 * var(--u)))/1 var(--display); left: 16px; top: 34%; }
.t7 { grid-column: span 2; background: linear-gradient(180deg, var(--ink-2), var(--deep)); }
.t7 .bars { position: absolute; left: 10%; right: 10%; bottom: 16%; height: 56%; display: flex; align-items: flex-end; gap: 6%; }
.t7 .bars span { flex: 1; border-radius: 8px 8px 2px 2px; background: var(--accent); }
.t7 i { left: 10%; top: 12%; font: 400 max(16px, calc(26 * var(--u)))/1 var(--display); color: rgba(255,255,255,.85); }
.t8 { background: radial-gradient(80% 80% at 30% 30%, #3E6E8C, var(--ink) 75%); }
.t8 b { font: 400 max(22px, calc(38 * var(--u)))/1 var(--display); left: 16px; bottom: 18%; }

/* Faixa de logos */
.logos { padding: 26px 0 30px; overflow: hidden; }
.logos-label { text-align: center; font-size: .7813rem; color: var(--soft); margin-bottom: 16px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; width: max-content; }
.logos .track { gap: 52px; padding-right: 52px; animation: slide 60s linear infinite; }
.logos .track { align-items: center; }
.logo-word { font: 400 1.25rem/1 var(--display); color: #6E7A82; white-space: nowrap; letter-spacing: -.01em; }
.logo-item { flex: none; font-size: 1rem; }
.logo-item img { width: auto; max-width: none; height: calc(var(--h) * .0625em); filter: grayscale(1); opacity: .72; transition: filter .25s, opacity .25s; }
.logo-item:hover img { filter: none; opacity: 1; }
@media (max-width: 560px) { .logo-item { font-size: .8rem; } }
@keyframes slide { to { transform: translateX(-50%); } }

/* ===== Fitas cruzadas ===== */
.tapes { width: 100%; margin: max(56px, calc(96 * var(--u))) auto 0; height: max(150px, calc(200 * var(--u))); position: relative; overflow: hidden; }
.tape { position: absolute; left: -2%; right: -2%; top: 50%; height: max(36px, calc(46 * var(--u))); display: flex; align-items: center; overflow: hidden; }
.tape-dark { background: var(--ink); transform: translateY(-50%) rotate(-4.5deg); }
.tape-orange { background: var(--accent); transform: translateY(-50%) rotate(4deg); box-shadow: 0 10px 30px -12px rgba(12,30,41,.35); }
.tape.tape-orange span { color: var(--ink); }
.tape .track { gap: 22px; padding-right: 22px; align-items: center; animation: slide 38s linear infinite; }
.tape-dark .track { animation-direction: reverse; }
.tape span { font: 400 max(14px, calc(19 * var(--u)))/1 var(--display); color: var(--white); white-space: nowrap; }
.tape .x { font-family: var(--body); font-weight: 600; font-size: .875rem; opacity: .9; }

/* ===== Manifesto (olá) ===== */
.statement-sec { padding: max(64px, calc(110 * var(--u))) 0 0; text-align: center; }
.hello { display: inline-block; font: 500 1.625rem/1 var(--script); color: var(--ink); margin-bottom: 14px; }
.statement { width: var(--inner); max-width: 24em; margin: 0 auto; font: 400 max(26px, calc(38 * var(--u)))/1.18 var(--display); letter-spacing: -.005em; }
.statement h2 { font: inherit; }
.statement p { font-size: max(18px, calc(23 * var(--u))); line-height: 1.3; margin-top: .9em; }
.statement .w { color: #ADADAD; transition: color .35s ease; }
.statement .w.on { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 32.5rem; margin: 30px auto 0; }
.chip {
display: inline-flex; align-items: center; gap: 6px; height: 1.875rem; padding: 0 .8125rem;
border-radius: 999px; background: var(--ink-2); color: var(--white); font-size: .7813rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 10px -6px rgba(7,19,26,.6);
}
.chip .icon { width: .8125rem; height: .8125rem; }

@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== Serviços (cards empilhados) ===== */
.services { padding-top: max(90px, calc(150 * var(--u))); }
.stack { width: var(--outer); margin: 0 auto; }
.svc-card {
--fg2: rgba(255,255,255,.74); --rule: rgba(255,255,255,.3);
position: sticky; top: 64px; min-height: max(520px, min(78vh, calc(560 * var(--u))));
border-radius: 24px; overflow: hidden; color: var(--white);
display: grid; grid-template-columns: 1fr minmax(220px, calc(300 * var(--u))) 1fr; gap: 28px;
padding: max(28px, calc(56 * var(--u))) max(24px, calc(72 * var(--u)));
transform-origin: 50% 0; will-change: transform, opacity;
margin-bottom: 22vh;
}
.svc-card:last-child { margin-bottom: 0; }
.svc-ink { --fg2: rgba(12,30,41,.74); --rule: rgba(12,30,41,.32); color: var(--ink); }
.svc-1 { background: radial-gradient(70% 90% at 20% 40%, #FFFFB8 0%, var(--accent) 45%, #ECEA00 100%); }
.svc-2 { background: radial-gradient(60% 80% at 30% 30%, var(--steel), var(--ink) 60%, var(--deep)); }
.svc-3 { background: radial-gradient(70% 90% at 80% 40%, #3E6E8C 0%, var(--ink-2) 40%, var(--ink) 70%, var(--deep)); }
.svc-4 { background: var(--white); }
.svc-5 { background: radial-gradient(70% 90% at 75% 80%, var(--ink-2), var(--deep) 70%); }
.svc-left { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.svc-left > p { font-size: .9375rem; color: var(--fg2); max-width: 21rem; }
.svc-index { font-size: .75rem; color: var(--fg2); margin-bottom: 6px; }
.svc-name { font: 400 max(30px, calc(46 * var(--u)))/1.02 var(--display); max-width: 9em; }
.svc-visual { align-self: center; border-radius: 14px; aspect-ratio: 4/5; position: relative; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(7,19,26,.6); }
.svc-visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.svc-visual text { font-family: var(--display); }
.sv .k { fill: var(--ink); }
.sv .y { fill: var(--accent); }
.sv .s { fill: var(--steel); }
.sv .c { fill: #C8CED2; }
.sv .w { fill: var(--white); }
.sv .p { fill: var(--paper); }
.svc-right { display: flex; flex-direction: column; gap: 20px; }
.svc-label { font-size: .75rem; color: var(--fg2); margin-bottom: 8px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-tags li { padding: .25rem .6875rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); font-size: .8125rem; }
.svc-big { font: 400 max(17px, calc(21 * var(--u)))/1.2 var(--display); }
/* O card inteiro é clicável: o ::after do link cobre o card. Sem transform no link, senão a área encolhe para o botão. */
.svc-card:hover, .cs-card:hover { cursor: pointer; }
.svc-link {
display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start;
min-height: 3rem; padding: .5rem 1.125rem; border-radius: 999px;
background: var(--accent); color: var(--ink); font-size: .9375rem; font-weight: 600; line-height: 1.2;
box-shadow: 0 10px 22px -10px rgba(7,19,26,.7); transition: background-color .2s, color .2s;
}
.svc-ink .svc-link { background: var(--ink); color: var(--white); }
.svc-link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.svc-link .icon { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover .svc-link .icon, .cs-card:hover .svc-link .icon { transform: translateX(5px); }
.svc-card:hover .svc-link, .cs-card:hover .svc-link { background: var(--white); color: var(--ink); }
.svc-ink:hover .svc-link { background: var(--deep); color: var(--accent); }
.svc-foot { width: var(--inner); margin: 40px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.svc-foot p { max-width: 36rem; color: var(--muted); font-size: .875rem; }
.svc-foot div { display: flex; flex-wrap: wrap; gap: 10px; }

/* ===== Como funciona ===== */
/* Sem efeito (celular, tela baixa ou movimento reduzido): linha do tempo vertical. */
.how { padding-top: max(90px, calc(150 * var(--u))); }
.how-head { width: var(--inner); margin-inline: auto; text-align: center; }
.how-head .eyebrow { margin-bottom: 8px; }
.how-head .intro { color: var(--muted); font-size: .875rem; margin-top: 10px; }
.how-track { position: relative; width: var(--inner); margin: 36px auto 0; padding-left: 22px; display: grid; gap: 14px; }
.how-track::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.how-step { position: relative; display: grid; gap: 22px; min-width: 0; padding: 20px; border-radius: 22px; background: var(--paper); transition: opacity .35s ease; }
.how-step::before { content: ""; position: absolute; left: -22px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--bg); }
.how-text { display: flex; flex-direction: column; min-width: 0; }
.how-n { font-size: .8125rem; color: var(--muted); margin-bottom: 10px; }
.how-text h3 { font: 400 max(24px, calc(33 * var(--u)))/1.08 var(--display); letter-spacing: -.005em; }
.how-text p:not(.how-n) { margin-top: 12px; color: var(--muted); font-size: 1rem; max-width: 26rem; }
.how-text .btn { align-self: flex-start; margin-top: 20px; white-space: normal; height: auto; min-height: 2.75rem; padding-block: .5rem; }
.how-progress { display: none; }

/* Cenas: o estado final é o padrão; o .is-live esconde até a etapa chegar. */
.how-art { position: relative; min-height: 300px; display: grid; align-items: center; justify-items: stretch; padding: 1.3em; border-radius: 16px; overflow: hidden; color: var(--white); background: radial-gradient(70% 90% at 75% 20%, var(--ink-2), var(--deep) 75%); font-size: 12px; line-height: 1.25; }
.how.is-live .how-step:not(.played) .a { opacity: var(--o, 0); transform: translate(var(--x, 0), var(--y, .9em)) rotate(var(--r, 0deg)); }
.how.is-live .a { transition: opacity .45s ease var(--d, 0s), transform var(--t, .55s) cubic-bezier(.2,.7,.2,1) var(--d, 0s); }

.ha-chat { align-content: center; justify-items: start; gap: .7em; }
.ha-doc, .ha-status { justify-items: center; }
.ha-chat p { max-width: 86%; padding: .7em 1em; border-radius: 1em 1em 1em .25em; background: rgba(255,255,255,.12); font-size: 1.1em; }
.ha-chat .me { justify-self: end; border-radius: 1em 1em .25em 1em; background: var(--accent); color: var(--ink); font-weight: 600; }

.ha-call { grid-template-columns: repeat(3, 1fr); align-content: center; gap: .7em; }
.ha-call span { display: grid; justify-items: center; gap: .6em; padding: 1em .4em; border-radius: .9em; background: rgba(255,255,255,.09); font-size: 1em; text-align: center; }
.ha-call i { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--steel); font: 400 1.05em/1 var(--display); }
.ha-call .me { background: var(--accent); color: var(--ink); font-weight: 600; }
.ha-call .me i { background: var(--ink); color: var(--accent); }
.ha-call b { grid-column: 1 / -1; justify-self: center; margin-top: .3em; font: 400 1.25em/1.1 var(--display); }

.ha-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-content: center; gap: 1.2em .5em; }
@media (max-width: 560px) {
.ha-flow { gap: 1em .25em; }
.ha-flow i { width: .9em; }
.how-art { padding: .9em; }
.ha-flow span.a { font-size: .82em; padding-inline: .1em; }
.ha-call { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.ha-call span { font-size: .88em; padding-inline: .15em; }
}
.ha-flow .a { --o: 1; }
.ha-flow span.a { display: grid; place-items: center; min-height: 4.4em; padding: .5em .3em; border-radius: .8em; background: #D5DADD; color: var(--ink); font-weight: 600; text-align: center; font-size: 1em; }
.ha-flow span small { display: block; font-weight: 500; font-size: .85em; }
.ha-flow .hot { background: var(--accent); }
.ha-flow i { align-self: center; width: 1.6em; height: 2px; background: rgba(255,255,255,.75); position: relative; opacity: 1; }
.ha-flow i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 2px solid rgba(255,255,255,.75); border-right: 2px solid rgba(255,255,255,.75); transform: rotate(45deg); }
.how.is-live .how-step:not(.played) .ha-flow i { opacity: 0; }
.how.is-live .ha-flow i { transition: opacity .4s ease 1s; }

.ha-doc > div { width: min(100%, 25em); padding: 1.5em; border-radius: .9em; background: var(--white); color: var(--ink); box-shadow: 0 24px 40px -22px #000; }
.ha-doc b { display: block; font: 400 1.5em/1 var(--display); margin-bottom: .2em; }
.ha-doc small { display: block; color: var(--muted); font-size: .95em; margin-bottom: 1em; }
.ha-doc ul { display: grid; gap: .55em; }
.ha-doc li { display: flex; align-items: center; gap: .7em; padding-top: .55em; border-top: 1px solid var(--line); font-weight: 500; font-size: 1.05em; }
.ha-doc li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--accent); font-size: .85em; font-weight: 700; }

.ha-board { align-content: center; justify-items: stretch; gap: .9em; }
.ha-pm { justify-self: start; display: inline-flex; align-items: center; gap: .6em; padding: .4em .9em .4em .4em; border-radius: 99px; background: rgba(255,255,255,.12); font-weight: 500; }
.ha-pm i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--accent); color: var(--ink); font-style: normal; font-weight: 700; font-size: .85em; }
.ha-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.ha-cols > div { display: grid; align-content: start; gap: .5em; min-height: 13em; padding: .6em; border-radius: .8em; background: rgba(255,255,255,.08); }
.ha-cols b { font-weight: 600; font-size: .95em; }
.ha-cols span { display: block; height: 2.9em; border-radius: .5em; background: #D5DADD; }
.ha-cols .mv { --o: 1; --x: calc(-200% - 2.4em); --y: 0; --t: 1.5s; --d: .35s; position: relative; z-index: 1; background: var(--accent); box-shadow: 0 12px 20px -10px #000; }

.ha-status > div { width: min(100%, 26em); display: grid; gap: .55em; }

.ha-ok i { flex: none; width: .55em; height: .55em; border-radius: 50%; background: #61C554; box-shadow: 0 0 0 .22em rgba(97,197,84,.25); }
@media (prefers-reduced-motion: no-preference) {
.how-step.is-on .ha-ok i { animation: how-pulse 1.8s ease-in-out infinite; }
@keyframes how-pulse { 50% { box-shadow: 0 0 0 .5em rgba(97,197,84,0); } }
}
.ha-status p { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .75em 1em; border-radius: .7em; background: rgba(255,255,255,.1); font-weight: 500; font-size: 1.05em; }
.ha-status em { font-style: normal; color: #8BDB80; font-size: .9em; }
.ha-status .ha-ok { justify-content: flex-start; gap: .7em; margin-bottom: .4em; padding: 0; background: none; font: 400 1.5em/1.1 var(--display); }

@media (min-width: 901px) {
.how-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; padding: calc(22 * var(--u)); }
.how-text { padding: calc(18 * var(--u)); justify-content: center; }
.how-art { font-size: max(12px, min(calc(17 * var(--u)), 2.2vh)); }
}

/* Com efeito: a tela fica fixa e as etapas andam para o lado, em largura total. */
@media (min-width: 901px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
.how-pin { position: sticky; top: 0; max-height: 100vh; display: flex; flex-direction: column; gap: calc(22 * var(--u)); padding-block: 20px; overflow-x: clip; }
.how-head .intro { margin-top: 6px; }
.how-track {
  flex: 0 1 calc(520 * var(--u)); min-height: 0; width: max-content; margin: 0; display: flex; gap: calc(22 * var(--u));
  padding-inline: calc((100vw - var(--outer)) / 2); will-change: transform;
}
.how-track::before { display: none; }
.how-step { flex: 0 0 calc(880 * var(--u)); opacity: .42; }
.how-step::before { display: none; }
.how-step.is-on { opacity: 1; }
.how-art { min-height: 0; }
.how-progress { display: block; position: relative; flex: none; width: var(--outer); height: 12px; margin-inline: auto; }
.how-progress::before, .how-fill { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; }
.how-progress::before { background: var(--line); }
.how-fill { background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.how-dots { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.how-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--soft); transition: background-color .2s, box-shadow .2s; }
.how-dots i.on { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.how-dots i.now { background: var(--accent); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 3px var(--bg); }
}

/* ===== Cases (mosaico) ===== */
.cases { padding-top: max(90px, calc(150 * var(--u))); }
.cases-title { margin: 0; font-weight: 400; text-align: center; }
.cases-sub { display: block; position: relative; z-index: 1; margin: -.35em 0 max(24px, calc(34 * var(--u))); font: 400 max(28px, calc(40 * var(--u)))/1.08 var(--display); letter-spacing: -.005em; }
.cs-grid { width: var(--inner); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(10px, calc(14 * var(--u))); }
.cs-card {
--fg2: rgba(255,255,255,.74); --rule: rgba(255,255,255,.3);
position: relative; display: flex; flex-direction: column; gap: 14px; min-height: max(290px, calc(310 * var(--u)));
padding: max(22px, calc(34 * var(--u))); border-radius: 24px; overflow: hidden; color: var(--white);
transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.cs-card:hover { transform: translateY(-4px); }
.cs-card.svc-ink { --fg2: rgba(12,30,41,.74); --rule: rgba(12,30,41,.32); color: var(--ink); }
.cs-tag { font-size: .8125rem; color: var(--fg2); }
.cs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cs-logo { flex: none; display: grid; place-items: center; padding: .5rem .7rem; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px rgba(12,30,41,.08); }
.cs-logo img { width: auto; height: auto; max-width: 9rem; max-height: 3.25rem; }
.cs-card h3 { font: 400 max(22px, calc(29 * var(--u)))/1.1 var(--display); letter-spacing: -.005em; }
.cs-card p:not(.cs-tag) { font-size: .9375rem; color: var(--fg2); max-width: 32rem; }
.cs-dark { background: radial-gradient(70% 90% at 80% 10%, var(--steel), var(--ink) 62%, var(--deep)); }
.cs-light { background: var(--white); }
.cs-wide { grid-column: span 2; }
.cs-1 { grid-column: span 2; flex-direction: row; gap: max(20px, calc(32 * var(--u))); background: radial-gradient(70% 90% at 20% 40%, #FFFFB8 0%, var(--accent) 45%, #ECEA00 100%); }
.cs-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cs-1 h3 { font-size: max(32px, calc(54 * var(--u))); line-height: 1.03; margin-top: auto; }
.cs-bars { flex: none; width: max(130px, calc(150 * var(--u))); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-bars span { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; text-align: center; font: 400 max(13px, calc(15 * var(--u)))/1.1 var(--display); }
.cs-bars i { display: block; height: var(--h); min-height: 14px; border-radius: 10px 10px 3px 3px; background: var(--ink); }
.cs-bars span:first-child i { background: rgba(12,30,41,.3); }
.cs-foot { align-items: center; }
.svc-foot.cs-foot p { max-width: none; color: var(--ink); font: 400 max(20px, calc(26 * var(--u)))/1.15 var(--display); }

/* ===== FAQ ===== */
.faq { padding-top: max(90px, calc(150 * var(--u))); text-align: center; }
.faq .sub { color: var(--muted); font-size: .8438rem; margin-top: 8px; }
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 34px auto 0; text-align: left; align-items: start; }
.faq-col { display: grid; gap: 10px; }
.faq details { background: var(--white); border-radius: 12px; box-shadow: 0 1px 0 rgba(7,19,26,.04); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; font-size: .8438rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); transition: background .2s, transform .25s; }
.faq details[open] summary::after { background: var(--accent); box-shadow: 0 0 0 1.5px var(--ink); transform: scale(1.4); }
.faq details p { padding: 0 18px 16px; color: var(--muted); font-size: .8125rem; }
.faq details[open] p { animation: fade .35s ease both; }

/* ===== CTA final ===== */
.connect { padding-top: max(90px, calc(150 * var(--u))); overflow: hidden; }
.connect-card {
width: var(--outer); margin: 0 auto; position: relative; overflow: hidden;
border-radius: 24px; background: var(--dark); color: var(--white);
}
.connect-bg { position: absolute; inset: 0; overflow: hidden; filter: blur(14px) brightness(.42) saturate(1.2); transform: scale(1.1); }
.connect-bg .mosaic { top: -30%; }
.connect-body { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: max(28px, calc(64 * var(--u))); padding: max(32px, calc(60 * var(--u))) max(24px, calc(64 * var(--u))) max(28px, calc(44 * var(--u))); }
.connect-body h2 { font: 400 max(30px, calc(44 * var(--u)))/1.05 var(--display); max-width: 11em; }
.connect-body .lead { margin-top: 14px; color: rgba(255,255,255,.72); font-size: .875rem; max-width: 23.75rem; }
.connect-body .note { margin-top: 22px; color: rgba(255,255,255,.5); font-size: .7813rem; }
.form { display: grid; gap: 14px; }
.field label { display: block; font-size: .7813rem; font-weight: 500; margin-bottom: 4px; }
.field input, .field textarea {
width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.22);
color: var(--white); font: 400 .875rem/1.4 var(--body); padding: 8px 0; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.4); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.form .btn-light { width: 100%; margin-top: 6px; }
.form .alt { text-align: center; font-size: .8125rem; color: rgba(255,255,255,.7); }
.form .alt a { color: var(--white); border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; }
.form .alt a:hover { border-color: var(--white); }
.connect-strip { position: relative; display: block; border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; }
.connect-strip .track { gap: 22px; padding-right: 22px; animation: slide 26s linear infinite; align-items: center; }
.connect-strip span { font: 400 max(16px, calc(22 * var(--u)))/1 var(--display); white-space: nowrap; }
.connect-strip .x { font: 600 .875rem/1 var(--body); color: var(--accent); }
.connect-strip:hover span:not(.x) { color: var(--accent); }

/* ===== Rodapé ===== */
.footer {
width: var(--outer); margin: 12px auto 12px; border-radius: 24px; position: relative; overflow: hidden;
color: var(--white); padding: max(32px, calc(56 * var(--u))) max(24px, calc(64 * var(--u))) 0;
background:
  radial-gradient(60% 55% at 50% 0%, rgba(255,255,255,.08), transparent 70%),
  radial-gradient(110% 62% at 50% 108%, #5A8DAB 0%, #3E6E8C 18%, var(--ink-2) 42%, var(--ink) 62%, var(--deep) 80%);
}
.footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px) 0 0 / 5px 5px; -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000); mask-image: linear-gradient(180deg, transparent 40%, #000); pointer-events: none; }
.foot-contact { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: max(10px, calc(14 * var(--u))); }
.foot-reach { display: flex; flex-wrap: wrap; gap: max(10px, calc(14 * var(--u))); }
.foot-pill {
display: inline-flex; align-items: center; gap: .5em; min-height: max(56px, calc(78 * var(--u))); padding: .3em .95em .3em .4em;
border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
font: 400 max(20px, calc(30 * var(--u)))/1 var(--display); letter-spacing: -.005em; white-space: nowrap;
transition: background-color .2s, color .2s;
}
.foot-pill i { flex: none; display: grid; place-items: center; width: 1.65em; height: 1.65em; border-radius: 50%; background: var(--white); color: var(--ink); }
.foot-pill svg, .foot-social svg { width: 55%; height: 55%; fill: currentColor; }
.foot-pill svg.line, .foot-social svg.line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foot-pill:hover { background: var(--white); color: var(--ink); }
.foot-pill:hover i { background: var(--ink); color: var(--white); }
.foot-pill-wa { background: var(--accent); color: var(--ink); box-shadow: none; }
.foot-pill-wa i { background: var(--ink); color: var(--accent); }
.foot-pill-wa:hover i { color: var(--accent); }
.foot-social { display: flex; gap: max(10px, calc(14 * var(--u))); }
.foot-social a { display: grid; place-items: center; width: max(56px, calc(78 * var(--u))); height: max(56px, calc(78 * var(--u))); border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background-color .2s, color .2s; }
.foot-social svg { width: 38%; height: 38%; }
.foot-social a:hover { background: var(--accent); color: var(--ink); }
/* Os serviços correm como uma frase, separados pelo ponto do logo */
.foot-services { position: relative; margin-top: max(28px, calc(48 * var(--u))); }
.foot-services ul { display: flex; flex-wrap: wrap; row-gap: .22em; font: 400 max(22px, calc(40 * var(--u)))/1.18 var(--display); letter-spacing: -.008em; }
.foot-services li { display: flex; align-items: center; }
.foot-services li:not(:last-child)::after { content: ""; flex: none; width: .24em; height: .24em; margin-inline: .5em; border-radius: 50%; background: var(--accent); }
.foot-services a { transition: color .2s; }
.foot-services a:hover, .foot-services a[aria-current] { color: var(--accent); }
.foot-bottom { position: relative; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: max(30px, calc(52 * var(--u))); padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); font-size: .75rem; color: rgba(255,255,255,.66); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-bottom a { color: var(--white); }
.foot-bottom a:hover { color: var(--accent); }
.foot-giant {
position: relative; display: block; text-align: center; pointer-events: none; user-select: none;
font: 400 max(120px, calc(340 * var(--u)))/.8 var(--display); letter-spacing: -.02em;
margin: 18px 0 -.12em;
background: linear-gradient(180deg, var(--accent) 0%, rgba(255,254,21,.85) 45%, rgba(255,254,21,.2) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===== WhatsApp fixo ===== */
.wa-float {
position: fixed; right: 18px; bottom: 18px; z-index: 50;
display: flex; align-items: center; gap: 0; height: 52px; padding: 0 15px;
border-radius: 999px; background: #25D366; color: #fff;
box-shadow: 0 14px 30px -10px rgba(7,19,26,.45);
transition: gap .25s ease, padding .25s ease;
}
.wa-float svg { width: 22px; height: 22px; fill: currentColor; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 600; font-size: .875rem; transition: max-width .3s ease; }
.wa-float:hover, .wa-float:focus-visible { gap: 8px; padding-right: 20px; }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 160px; }

/* ===== Responsivo ===== */
@media (max-width: 900px) {
.svc-card { position: relative; top: 0; grid-template-columns: 1fr; height: auto; min-height: 0; gap: 24px; margin-bottom: 12px; }
.svc-left { gap: 28px; }
.svc-visual { width: min(190px, 56%); justify-self: center; }
.svc-link { margin-top: 4px; }
.faq-cols { grid-template-columns: 1fr; }
.cs-grid { grid-template-columns: minmax(0, 1fr); }
.cs-card { min-height: 0; }
.cs-1 { flex-direction: column; }
.cs-1, .cs-wide { grid-column: auto; }
.cs-1 h3 { margin-top: 8px; }
.cs-bars { width: 100%; height: 170px; }
.cs-card .svc-link { margin-top: 8px; }
.connect-body { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.foot-reach, .foot-pill { width: 100%; }
.foot-pill { font-size: 19px; }
.foot-services ul { flex-direction: column; row-gap: .5em; }
.foot-services li:not(:last-child)::after { display: none; }
.notch { font-size: .6875rem; padding-inline: 14px; }
.site-header { padding-top: 46px; }
.logo { font-size: 1.4375rem; }
.mosaic { width: 190%; left: -45%; top: -20%; }
.wa-float { height: 48px; padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.track { animation: none !important; }
.marquee { -webkit-mask-image: none; mask-image: none; }
.logos .track, .connect-strip .track { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 14px; }
.svc-card { position: relative; top: 0; margin-bottom: 16px; }
.statement .w { color: var(--ink); }
}

/* Área de toque mínima de 24 px nos links pequenos */
.crumbs a, .foot-links a { display: inline-flex; align-items: center; min-height: 24px; }