/* Light: estilos das páginas de serviço. Mesmos tokens e componentes da home. */

/* ===== Tokens ===== */
:root {
  --bg:      #DCDCDC;
  --paper:   #F0F0F0;
  --white:   #FFFFFF;
  --ink:     #0C1E29;
  --ink-2:   #163246;
  --steel:   #2C5873;
  --deep:    #07131A;
  --muted:   #53616B;
  --soft:    #8F9AA1;
  --line:    rgba(12,30,41,.14);
  --accent:  #FFFE15;
  --alert:   #E5484D;

  /* 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 */
  --gap: max(72px, calc(120 * var(--u)));

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

*, *::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; }
section { position: relative; scroll-margin-top: 24px; }
.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; }
.icon-fill { fill: currentColor; stroke: none; }
.nb { white-space: nowrap; }

/* ===== Botões ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 2.75rem; padding: .5rem 1.25rem; border-radius: 999px;
  font: 500 .875rem/1.2 var(--body); text-align: center;
  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-accent { background: var(--accent); color: var(--ink); font-weight: 600; }
.btn-accent:hover { background: var(--white); }
.btn-sm { min-height: 2.25rem; padding: .25rem 1rem; font-size: .8125rem; }
.btn-lg { min-height: 3.25rem; padding: .5rem 1.625rem; font-size: 1rem; font-weight: 600; }

/* ===== Títulos ===== */
.giant {
  display: block; text-align: center; white-space: nowrap;
  font: 400 max(40px, 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;
  user-select: none;
}
.h2 { font: 400 max(28px, calc(40 * var(--u)))/1.08 var(--display); letter-spacing: -.005em; text-wrap: balance; }

/* ===== Topo ===== */
.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 4px;
}
.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); }

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 42px max(16px, calc(56 * 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 do serviço: texto à esquerda, aparelhos à direita ===== */
.sp-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
  gap: max(20px, calc(40 * var(--u))); align-items: stretch;
  margin-top: max(20px, calc(30 * var(--u)));
}
.sp-hero-text { display: flex; flex-direction: column; justify-content: center; padding: max(16px, calc(36 * var(--u))) 0 max(24px, calc(44 * var(--u))) max(14px, calc(52 * var(--u))); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); margin-bottom: max(22px, calc(40 * var(--u))); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--soft); }
.crumbs [aria-current] { color: var(--ink); }
.sp-kicker {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 1.875rem; padding: .25rem .8125rem;
  border-radius: 999px; background: var(--ink-2); color: var(--white); font-size: .7813rem; margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 10px -6px rgba(7,19,26,.6);
}
.sp-kicker .icon { width: .8125rem; height: .8125rem; }
.sp-hero h1 { font: 400 max(32px, calc(52 * var(--u)))/1.06 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.sp-hero h1 .g { color: var(--muted); }
.sp-sub { margin-top: 18px; color: var(--muted); font-size: 1rem; max-width: 29rem; }
.sp-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Aparelhos: ilustração em HTML, para trocar depois por um site real da Light */
.dv {
  position: relative; min-height: max(400px, calc(590 * var(--u)));
  font-size: max(8px, calc(10.8 * var(--u))); line-height: 1.2;
}
.dv-laptop { position: absolute; left: 5%; top: 14%; width: 88%; }
.dv-lid { padding: .55em; border-radius: 1.3em 1.3em 0 0; background: #24323B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.dv-screen { border-radius: .7em .7em 0 0; overflow: hidden; background: var(--paper); color: var(--ink); }
.dv-base { position: relative; height: 1.1em; margin-inline: -5.5%; border-radius: 0 0 1.4em 1.4em; background: linear-gradient(180deg, #C8CED2, #8F9AA1); box-shadow: 0 34px 44px -22px rgba(12,30,41,.5); }
.dv-base::before { content: ""; position: absolute; left: 41%; right: 41%; top: 0; height: .4em; border-radius: 0 0 .5em .5em; background: #6E7A82; }
.dv-bar { display: flex; align-items: center; gap: .4em; padding: .6em .9em; background: #D5DADD; }
.dv-bar i { width: .6em; height: .6em; border-radius: 50%; background: var(--white); }
.dv-bar span { flex: 1; margin-left: .6em; padding: .25em .9em; border-radius: 99px; background: var(--white); color: var(--muted); font-size: .85em; }
.ds { padding: 1.1em 1.6em 1.5em; }
.ds-nav { display: flex; align-items: center; gap: 1.2em; font-weight: 600; font-size: .95em; }
.ds-nav b { font: 400 1.25em/1 var(--display); margin-right: auto; }
.ds-nav span { width: 3.4em; height: .45em; border-radius: 9px; background: #C8CED2; }
.ds-nav em { font-style: normal; padding: .45em 1em; border-radius: 99px; background: var(--ink); color: var(--white); }
.ds-main { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5em; align-items: center; margin-top: 1.6em; }
.ds-h { font: 400 2.5em/1.04 var(--display); letter-spacing: -.01em; }
.ds-line { display: block; height: .45em; margin-top: .8em; border-radius: 9px; background: #C8CED2; }
.ds-line + .ds-line { width: 72%; margin-top: .5em; }
.ds-btn { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.1em; padding: .65em 1.1em; border-radius: 99px; background: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(12,30,41,.2); }
.ds-img { position: relative; aspect-ratio: 1 / .88; border-radius: .9em; overflow: hidden; background: radial-gradient(90% 90% at 80% 15%, #3E6E8C, var(--ink) 75%); }
.ds-img::before { content: ""; position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); }
.ds-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin-top: 1.5em; }
.ds-cards span { display: grid; gap: .45em; padding: .9em; border-radius: .7em; background: var(--white); }
.ds-cards i { display: block; height: .45em; border-radius: 9px; background: #C8CED2; }
.ds-cards i:first-child { width: 58%; height: .6em; background: var(--ink); }

.dv-phone { position: absolute; right: 2%; bottom: 7%; width: 26%; padding: .5em; border-radius: 2.2em; background: #24323B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 30px 44px -16px rgba(12,30,41,.6); }
.dv-phone-in { position: relative; aspect-ratio: 9 / 18.5; border-radius: 1.75em; overflow: hidden; background: var(--paper); color: var(--ink); padding: 1.9em .95em 1em; display: flex; flex-direction: column; gap: .7em; }
.dv-phone-in::before { content: ""; position: absolute; left: 50%; top: .55em; width: 32%; height: .7em; border-radius: 99px; background: #24323B; transform: translateX(-50%); }
.dv-phone .ds-brand { font: 400 1em/1 var(--display); }
.dv-phone .ds-h { font-size: 1.55em; }
.dv-phone .ds-btn { align-self: flex-start; margin: 0; padding: .55em .85em; font-size: .9em; }
.dv-phone .ds-img { flex: 1; aspect-ratio: auto; min-height: 0; }
.dv-wa { position: absolute; right: .8em; bottom: .8em; display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: #25D366; color: var(--white); box-shadow: 0 8px 14px -6px rgba(7,19,26,.6); }
.dv-wa svg { width: 58%; height: 58%; fill: currentColor; }
.dv-status {
  position: absolute; left: 5%; bottom: 7%; display: flex; align-items: center; gap: .7em; padding: .85em 1.3em;
  border-radius: 99px; background: var(--white); color: var(--ink); font: 400 1.5em/1 var(--display);
  box-shadow: 0 14px 26px -12px rgba(12,30,41,.45), 0 0 0 1px rgba(12,30,41,.06);
}
.dv-status i { width: .55em; height: .55em; border-radius: 50%; background: #2FA84F; box-shadow: 0 0 0 .22em rgba(47,168,79,.22); }

@media (prefers-reduced-motion: no-preference) {
  .sp-hero-text > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .sp-hero-text > *:nth-child(2) { animation-delay: .06s; }
  .sp-hero-text > *:nth-child(3) { animation-delay: .12s; }
  .sp-hero-text > *:nth-child(4) { animation-delay: .18s; }
  .sp-hero-text > *:nth-child(5) { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  /* O site se monta na tela e, por último, entra no ar */
  .dv .bd { animation: build .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
  @keyframes build { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } }
  .dv-status { animation: pop .5s cubic-bezier(.2,1.4,.4,1) 1.5s both; }
  @keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
}

/* ===== Fitas cruzadas ===== */
.tapes { width: 100%; margin-top: max(48px, calc(72 * var(--u))); 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-accent { background: var(--accent); transform: translateY(-50%) rotate(4deg); box-shadow: 0 10px 30px -12px rgba(12,30,41,.35); }
.tape.tape-accent span { color: var(--ink); }
.track { display: flex; width: max-content; }
.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; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ===== Bloco: a dor ===== */
.pain { padding-top: max(48px, calc(72 * var(--u))); }
.pain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: max(28px, calc(64 * var(--u))); align-items: center; }
.pain h2 { font: 400 max(32px, calc(54 * var(--u)))/1.04 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.pain-text p { margin-top: 18px; color: var(--muted); font-size: 1rem; max-width: 31rem; }
.pain-panel {
  border-radius: 24px; padding: max(24px, calc(44 * var(--u))) max(18px, calc(40 * var(--u)));
  background: radial-gradient(70% 80% at 20% 15%, rgba(44,88,115,.6), transparent 72%), var(--deep);
}
.pain-list { display: grid; gap: max(10px, calc(14 * var(--u))); }
.pain-list li {
  display: flex; align-items: center; gap: .875rem; padding: .875rem 1.125rem .875rem .875rem; border-radius: 12px;
  background: #E4E7E9; font-weight: 500; font-size: 1rem; line-height: 1.3; box-shadow: 0 14px 26px -14px rgba(0,0,0,.8);
}
.pain-list li:nth-child(odd) { rotate: -1.3deg; margin-right: 7%; }
.pain-list li:nth-child(even) { rotate: 1.1deg; margin-left: 7%; }
.pain-ico { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: var(--ink); color: var(--white); }
.pain-list li:first-child .pain-ico { background: var(--alert); }

/* ===== Bloco: dois caminhos ===== */
.paths { padding-top: var(--gap); }
.paths-title { position: relative; margin: 0 0 max(24px, calc(34 * var(--u))); text-align: center; font-weight: 400; }
.paths-title .h2 { display: block; position: relative; z-index: 1; margin-top: -.25em; }
.paths-grid { width: var(--outer); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(10px, calc(14 * var(--u))); }
.path {
  --fg2: rgba(255,255,255,.72); --rule: rgba(255,255,255,.22);
  position: relative; display: flex; flex-direction: column; gap: max(22px, calc(30 * var(--u)));
  padding: max(26px, calc(48 * var(--u))); border-radius: 24px; overflow: hidden; color: var(--white);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.path:hover { transform: translateY(-4px); cursor: pointer; }
.path-fast { --fg2: rgba(12,30,41,.72); --rule: rgba(12,30,41,.24); color: var(--ink); background: radial-gradient(70% 90% at 20% 30%, #FFFFB8 0%, var(--accent) 45%, #ECEA00 100%); }
.path-custom { background: radial-gradient(70% 90% at 80% 10%, var(--steel), var(--ink) 62%, var(--deep)); }
.path h3 { font: 400 max(32px, calc(54 * var(--u)))/1.02 var(--display); letter-spacing: -.01em; }

/* Sete dias até o ar */
.pv { font-size: max(12px, calc(14 * var(--u))); min-height: 6.4em; display: flex; align-items: center; }
.pv-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.9fr); gap: .35em; width: 100%; }
.pv-days span { display: grid; place-items: end start; height: 5.4em; padding: .55em; border-radius: .7em; background: rgba(12,30,41,var(--a)); font-family: var(--display); font-size: 1em; line-height: 1; }
.pv-days .live { --a: 1; color: var(--accent); font-size: 1.35em; height: 4em; place-items: end start; padding: .5em .6em; }
/* Layout aprovado antes de programar */
.pv-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .5em; align-items: center; width: 100%; }
.pv-flow > span { display: grid; align-content: end; height: 5.4em; padding: .6em .7em; border-radius: .7em; background: rgba(255,255,255,.1); font: 400 1.1em/1.05 var(--display); }
.pv-flow > span.ok { background: var(--accent); color: var(--ink); }
.pv-flow > span.ok svg { width: 1.2em; height: 1.2em; margin-bottom: .3em; stroke-width: 2.6; }
.pv-flow > i { width: 1.3em; height: 2px; background: rgba(255,255,255,.55); position: relative; }
.pv-flow > i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 2px solid rgba(255,255,255,.55); border-right: 2px solid rgba(255,255,255,.55); transform: rotate(45deg); }

.path-rows { display: grid; }
.path-rows > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 12px; padding-block: .8rem; border-top: 1px solid var(--rule); }
.path-rows dt { font-size: .8125rem; color: var(--fg2); padding-top: .15em; }
.path-rows dd { font-size: 1rem; line-height: 1.4; }
.path-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start;
  min-height: 3rem; padding: .5rem 1.25rem; 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;
}
.path-fast .path-link { background: var(--ink); color: var(--white); }
/* O card inteiro é clicável. Sem transform no link, senão a área encolhe para o botão. */
.path-link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.path:hover .path-link { background: var(--white); color: var(--ink); }
.path-fast:hover .path-link { background: var(--deep); color: var(--accent); }
.paths-note { width: var(--inner); margin: 22px auto 0; text-align: center; color: var(--muted); font-size: 1rem; }
.paths-note a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--ink); }
.paths-note a:hover { background: var(--accent); }

/* ===== Bloco: o que vem em todo site ===== */
.incl { padding-top: var(--gap); }
.incl-card { width: var(--outer); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: max(24px, calc(64 * var(--u))); padding: max(26px, calc(56 * var(--u))); border-radius: 24px; background: var(--white); }
.incl h2 { font: 400 max(30px, calc(46 * var(--u)))/1.06 var(--display); letter-spacing: -.008em; text-wrap: balance; }
.incl-list li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .875rem; align-items: start; padding-block: 1rem; border-top: 1px solid var(--line); }
.incl-list li:first-child { border-top: 0; padding-top: 0; }
.incl-list li:last-child { padding-bottom: 0; }
.incl-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ink); color: var(--accent); }
.incl-ico .icon { width: 1.2rem; height: 1.2rem; }
.incl-list h3 { font: 400 max(18px, calc(22 * var(--u)))/1.15 var(--display); }
.incl-list p { color: var(--muted); font-size: .9375rem; margin-top: 2px; }

/* ===== Bloco: site com problema ===== */
.sos { width: var(--outer); margin: max(28px, calc(48 * var(--u))) auto 0; position: relative; overflow: hidden; border-radius: 24px; color: var(--white); background: var(--ink); }
.sos::before { content: ""; display: block; height: max(10px, calc(14 * var(--u))); background: repeating-linear-gradient(-55deg, var(--accent) 0 18px, var(--ink) 18px 36px); }
.sos-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: max(16px, calc(40 * var(--u))); align-items: center; padding: max(22px, calc(34 * var(--u))) max(26px, calc(56 * var(--u))); }
.sos h2 { font: 400 max(25px, calc(33 * var(--u)))/1.08 var(--display); text-wrap: balance; }
.sos p { color: rgba(255,255,255,.76); font-size: .9375rem; }

/* ===== Bloco: quanto custa ===== */
.cost { padding-top: var(--gap); }
.cost-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(28px, calc(72 * var(--u))); align-items: center; }
.cost h2 { font: 400 max(32px, calc(54 * var(--u)))/1.04 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.cost-text > p { margin-top: 16px; color: var(--muted); font-size: 1rem; max-width: 29rem; }
.cost-text .cost-end { margin-top: max(20px, calc(30 * var(--u))); padding-top: max(16px, calc(22 * var(--u))); border-top: 2px solid var(--ink); color: var(--ink); font: 400 max(20px, calc(26 * var(--u)))/1.18 var(--display); text-wrap: balance; }
/* A fatura em que o prejuízo não aparece */
.bill-wrap { rotate: 1.5deg; filter: drop-shadow(0 22px 26px rgba(7,19,26,.2)); }
.bill {
  padding: max(22px, calc(34 * var(--u))) max(20px, calc(34 * var(--u))) max(36px, calc(48 * var(--u)));
  background: var(--white);
  /* Base serrilhada, como papel de fatura destacado */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
}
.bill li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding-block: 1rem; border-top: 1.5px dashed rgba(12,30,41,.28); font-size: 1rem; line-height: 1.4; }
.bill li:first-child { border-top: 0; padding-top: 0; }
.bill b { font: 400 1.25rem/1 var(--display); white-space: nowrap; color: var(--alert); }

/* ===== Bloco: como funciona ===== */
.flow { padding-top: var(--gap); text-align: center; }
.flow-list { width: var(--outer); margin: max(24px, calc(34 * var(--u))) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 24px; background: rgba(255,255,255,.14); text-align: left; color: var(--white); box-shadow: 0 0 0 1px var(--ink); }
.flow-list li { display: flex; flex-direction: column; gap: 10px; min-height: max(170px, calc(216 * var(--u))); padding: max(22px, calc(32 * var(--u))); background: var(--ink); }
.flow-n { font: 400 max(24px, calc(32 * var(--u)))/1 var(--display); color: var(--accent); margin-bottom: auto; padding-bottom: 14px; }
.flow-list strong { display: block; font: 400 max(19px, calc(24 * var(--u)))/1.14 var(--display); }
.flow-list span:not(.flow-n) { display: block; margin-top: 6px; color: rgba(255,255,255,.72); font-size: .9375rem; line-height: 1.4; }
.flow-list li:last-child { background: radial-gradient(100% 120% at 90% 0%, var(--steel), var(--ink) 72%); }

/* ===== Bloco: prova ===== */
.proof { padding-top: var(--gap); text-align: center; overflow: hidden; }
.proof > .wrap p { max-width: 36rem; margin: 12px auto 0; color: var(--muted); font-size: 1rem; }
.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); }
.proof .marquee { margin-top: max(26px, calc(40 * var(--u))); }
.proof .track { gap: 52px; padding-right: 52px; align-items: center; animation: slide 60s linear infinite; }
.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) contrast(1.1); opacity: .72; transition: filter .25s, opacity .25s; }
.logo-item:hover img { filter: none; opacity: 1; }
.proof .btn { margin-top: max(26px, calc(40 * var(--u))); }

/* ===== FAQ ===== */
.faq { padding-top: var(--gap); text-align: center; }
.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: .9375rem; font-weight: 500; line-height: 1.35; }
.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: .9375rem; }
.faq details[open] p { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== CTA final ===== */
.final { padding-top: var(--gap); }
.final-card {
  width: var(--outer); margin-inline: auto; display: grid; justify-items: center; text-align: center; gap: 18px;
  padding: max(44px, calc(92 * var(--u))) max(22px, calc(64 * var(--u)));
  border-radius: 24px; background: radial-gradient(70% 90% at 30% 30%, #FFFFB8 0%, var(--accent) 45%, #ECEA00 100%);
}
.final h2 { font: 400 max(34px, calc(76 * var(--u)))/1 var(--display); letter-spacing: -.012em; max-width: 13em; text-wrap: balance; }
.final p { max-width: 35rem; font-size: 1.0625rem; }
.final .btn { margin-top: 8px; }

/* ===== Rodapé ===== */
.footer {
  width: var(--outer); margin: 12px auto; 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; }

/* ===== Gestão de E-commerce ===== */
/* Hero com título longo: mais espaço para o texto, para os botões ficarem lado a lado */
.sp-hero-long { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.sp-hero-long h1 { font-size: max(32px, calc(47 * var(--u))); }
.sp-hero-long .dv { min-height: max(400px, calc(540 * var(--u))); font-size: max(8px, calc(9.8 * var(--u))); }


/* Loja ilustrada nos aparelhos */
.ds-cart { display: inline-flex; align-items: center; gap: .4em; }
.ds-cart .icon { width: 1.1em; height: 1.1em; }
.ds-banner { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; margin-top: 1.2em; padding: 1.5em 1.7em; border-radius: .9em; color: var(--white); background: radial-gradient(90% 140% at 85% 10%, #3E6E8C, var(--ink) 70%); }
.ds-banner .ds-h { font-size: 2.15em; max-width: 11em; }
.ds-banner .ds-btn { flex: none; margin: 0; color: var(--ink); }
.ds-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; margin-top: 1.1em; }
.ds-shop > span { display: grid; gap: .5em; padding: .55em .55em .85em; border-radius: .8em; background: var(--white); }
.ds-shop .ds-img { display: block; aspect-ratio: 1; border-radius: .55em; }
.ds-img-b { background: #C8D4DB; }
.ds-img-b::before { border-radius: .4em; background: var(--ink); }
.ds-img-c { background: var(--accent); }
.ds-img-c::before { background: var(--ink); }
.ds-l { display: block; height: .45em; border-radius: 9px; background: #C8CED2; }
.ds-l:first-of-type { background: var(--ink); width: 80%; height: .55em; }
.ds-shop .ds-l:last-child { width: 48%; }
.dv-phone-in > .ds-l:last-of-type { width: 50%; }
.dv-phone-in .ds-btn-full { align-self: stretch; justify-content: center; margin-top: .2em; padding: .75em; font-size: 1.05em; }
.dv-status { white-space: nowrap; }

/* As quatro fases: uma escada que sobe da atração à indicação */
.phases { padding-top: var(--gap); text-align: center; }
.phases-list { width: var(--outer); margin: max(28px, calc(44 * var(--u))) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(10px, calc(14 * var(--u))); align-items: end; text-align: left; }
.phase { position: relative; display: flex; flex-direction: column; padding: max(22px, calc(32 * var(--u))); border-radius: 24px; min-height: max(var(--min), calc(var(--step) * var(--u))); }
.phase-1 { --min: 320px; --step: 330; background: var(--white); }
.phase-2 { --min: 340px; --step: 380; color: var(--white); background: radial-gradient(90% 90% at 80% 10%, #3E6E8C, var(--steel)); }
.phase-3 { --min: 360px; --step: 430; color: var(--white); background: radial-gradient(90% 90% at 80% 10%, var(--steel), var(--ink) 65%, var(--deep)); }
.phase-4 { --min: 380px; --step: 480; background: radial-gradient(80% 90% at 25% 15%, #FFFFB8 0%, var(--accent) 50%, #ECEA00 100%); }
.phase-v { width: max(84px, calc(104 * var(--u))); height: auto; margin-bottom: 20px; fill: none; stroke: currentColor; stroke-width: 2; overflow: visible; }
.phase-v circle { fill: currentColor; stroke: none; }
.phase-v circle.on { fill: var(--accent); }
.phase-1 .phase-v circle.on, .phase-4 .phase-v circle.on { fill: var(--ink); }
.phase-v .tick { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.phase h3 { margin-top: auto; font: 400 max(26px, calc(36 * var(--u)))/1.05 var(--display); letter-spacing: -.008em; }
.phase p { margin-top: 10px; font-size: 1rem; line-height: 1.45; color: rgba(12,30,41,.74); }
.phase-2 p, .phase-3 p { color: rgba(255,255,255,.82); }
.phase-arrow { position: absolute; z-index: 1; right: calc(max(10px, calc(14 * var(--u))) / -2 - 1.25rem); bottom: max(120px, calc(170 * var(--u))); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ink); color: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.phases-end { margin: max(24px, calc(36 * var(--u))) auto 0; font: 400 max(20px, calc(26 * var(--u)))/1.2 var(--display); text-wrap: balance; }

/* O que fazemos */
.does { padding-top: var(--gap); text-align: center; }
.does-grid { width: var(--outer); margin: max(24px, calc(34 * var(--u))) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(10px, calc(14 * var(--u))); text-align: left; }
.does-card { padding: max(24px, calc(38 * var(--u))); border-radius: 24px; background: var(--white); }
.does-card h3 { margin-top: 16px; font: 400 max(26px, calc(36 * var(--u)))/1.05 var(--display); letter-spacing: -.008em; }
.does-card ul { margin-top: 10px; }
.does-card li { padding-block: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.does-card li:first-child { border-top: 0; }
.does-card li:last-child { padding-bottom: 0; }
.does-card strong { display: block; margin-bottom: 3px; color: var(--ink); font: 400 max(17px, calc(20 * var(--u)))/1.18 var(--display); }

/* Para quem é */
.who { padding-top: var(--gap); }
.who .h2 { max-width: 22em; }
.who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(20px, calc(40 * var(--u))); margin-top: max(24px, calc(38 * var(--u))); }
.who-grid > div { padding-top: 18px; border-top: 2px solid var(--ink); }
.who-grid h3 { font: 400 max(22px, calc(28 * var(--u)))/1.12 var(--display); text-wrap: balance; }
.who-grid p { margin-top: 10px; color: var(--muted); font-size: 1rem; }

/* Quanto a loja deixa de vender: fundo levemente destacado */
.cost-box { padding: max(24px, calc(60 * var(--u))); border-radius: 24px; background: var(--paper); }
.flow-more { margin-top: max(20px, calc(28 * var(--u))); }

/* Cases */
.cases { padding-top: var(--gap); text-align: center; }
.cases-grid { width: var(--outer); margin: max(24px, calc(34 * var(--u))) auto 0; display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: max(10px, calc(14 * var(--u))); text-align: left; }
.case { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 24px; padding: max(26px, calc(48 * var(--u))); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.case:hover { transform: translateY(-4px); }
.case-head { display: flex; align-items: center; gap: 14px; }
.case-head h3 { font: 400 max(20px, calc(25 * var(--u)))/1.12 var(--display); text-wrap: balance; }
.case-logo { flex: none; display: grid; place-items: center; width: 4rem; height: 3.5rem; padding: .4rem; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px rgba(12,30,41,.08); }
.case-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.case-text { font-size: 1rem; line-height: 1.5; }
.case .path-link { margin-top: auto; }
.case-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: max(20px, calc(44 * var(--u))); color: var(--white); background: radial-gradient(70% 100% at 85% 0%, var(--steel), var(--ink) 60%, var(--deep)); }
.case-copy { display: flex; flex-direction: column; min-width: 0; }
.case-big { margin-top: max(22px, calc(34 * var(--u))); font: 400 max(32px, calc(56 * var(--u)))/1.03 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.case-main .case-text { margin-top: 14px; margin-bottom: 26px; color: rgba(255,255,255,.76); }
.case-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; height: max(280px, calc(420 * var(--u))); align-self: end; }
/* A proporção real: a barra de R$ 400 mil tem dez vezes a altura da de R$ 40 mil */
.case-bars span { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 100%; font: 400 max(14px, calc(17 * var(--u)))/1.1 var(--display); white-space: nowrap; }
.case-bars i { display: block; height: calc((100% - 2em) * var(--h)); border-radius: 12px 12px 4px 4px; background: rgba(255,255,255,.26); }
.case-bars span:last-child i { background: var(--accent); }
.case-side { background: var(--white); }
.case-side .case-head { flex-direction: column; align-items: flex-start; }
.case-side .case-head h3 { font-size: max(26px, calc(36 * var(--u))); line-height: 1.05; }
.case-side .case-text { margin-top: 14px; margin-bottom: 26px; color: var(--muted); }
.case-side .path-link { background: var(--ink); color: var(--white); }
.case-main:hover .path-link { background: var(--white); color: var(--ink); }
.case-side:hover .path-link { background: var(--deep); color: var(--accent); }

/* CTA final com dois botões */
.final-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.final-ctas .btn { margin-top: 0; }

/* ===== Desenvolvimento de Software ===== */
/* Painel de sistema ilustrado nos aparelhos */
.sy { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); min-height: 26em; }
.sy-side { display: flex; flex-direction: column; gap: .3em; padding: 1.2em .8em; background: var(--ink); color: rgba(255,255,255,.72); font-weight: 500; }
.sy-side b { padding: 0 .55em; margin-bottom: .9em; font: 400 1.25em/1 var(--display); color: var(--white); }
.sy-side span { padding: .5em .65em; border-radius: .5em; }
.sy-side .on { background: var(--accent); color: var(--ink); font-weight: 600; }
.sy-main { display: flex; flex-direction: column; gap: .9em; padding: 1.2em; min-width: 0; }
.sy-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.sy-kpis span { display: grid; gap: .55em; padding: .9em; border-radius: .7em; background: var(--white); }
.sy-kpis i { display: block; height: .45em; border-radius: 9px; background: #C8CED2; }
.sy-kpis i:first-child { width: 55%; }
.sy-kpis i:last-child { height: 1em; width: 80%; background: var(--ink); }
.sy-kpis .on { background: var(--ink); }
.sy-kpis .on i:first-child { background: rgba(255,255,255,.4); }
.sy-kpis .on i:last-child { background: var(--accent); }
.sy-chart { flex: 1; display: flex; align-items: flex-end; gap: .8em; min-height: 8em; padding: 1em; border-radius: .7em; background: var(--white); }
.sy-chart i { flex: 1; height: var(--v); border-radius: .35em .35em 0 0; background: #C8D4DB; }
.sy-chart .on { background: var(--ink); }
.sy-rows { display: grid; gap: .5em; }
.sy-rows span { display: grid; grid-template-columns: 1.2fr 1fr 3.4em; gap: 1em; align-items: center; padding: .6em .9em; border-radius: .55em; background: var(--white); }
.sy-rows i { display: block; height: .45em; border-radius: 9px; background: #C8CED2; }
.sy-rows i:first-child { background: var(--ink); }
.sy-rows em { display: block; height: 1em; border-radius: 99px; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(12,30,41,.2); }
.sy-tasks { flex: 1; display: flex; flex-direction: column; gap: .6em; min-height: 0; }
.sy-tasks span { display: flex; align-items: center; gap: .7em; padding: .85em .7em; border-radius: .7em; background: var(--white); }
.sy-tasks i { flex: 1; height: .5em; border-radius: 9px; background: #C8CED2; }
.sy-tasks u { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C8CED2; }
.sy-tasks .icon { flex: none; width: 1.5em; height: 1.5em; padding: .28em; border-radius: 50%; background: var(--ink); color: var(--accent); stroke-width: 3; }
.sy-tasks .ok i { background: var(--ink); }

/* Balões de fala: as dores que mais chegam à Light */
.talk-list { display: grid; gap: max(16px, calc(22 * var(--u))); }
.talk-list li { position: relative; padding: 1rem 1.25rem; border-radius: 18px; background: #E4E7E9; font: 400 max(18px, calc(23 * var(--u)))/1.2 var(--display); text-wrap: balance; box-shadow: 0 14px 26px -14px rgba(0,0,0,.8); }
.talk-list li::after { content: ""; position: absolute; bottom: -9px; width: 20px; height: 20px; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.talk-list li:nth-child(odd) { rotate: -1.2deg; margin-right: 9%; }
.talk-list li:nth-child(odd)::after { left: 26px; }
.talk-list li:nth-child(even) { rotate: 1deg; margin-left: 9%; background: var(--accent); }
.talk-list li:nth-child(even)::after { right: 26px; }

/* Sistemas que desenvolvemos: grupos de tamanhos diferentes */
.sys-intro { margin: 12px auto 0; max-width: 36rem; color: var(--muted); font-size: 1rem; }
.sys-grid { width: var(--outer); margin: max(24px, calc(34 * var(--u))) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c" "a b d"; gap: max(10px, calc(14 * var(--u))); text-align: left; }
.sys-a { grid-area: a; }
.sys-b { grid-area: b; }
.sys-c { grid-area: c; color: var(--white); background: radial-gradient(90% 90% at 85% 5%, var(--steel), var(--ink) 65%, var(--deep)); }
.sys-c .incl-ico { background: var(--accent); color: var(--ink); }
.sys-c li { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.76); }
.sys-c strong { color: var(--white); }
.sys-d { grid-area: d; background: radial-gradient(80% 90% at 25% 15%, #FFFFB8 0%, var(--accent) 50%, #ECEA00 100%); }
.sys-d li { color: rgba(12,30,41,.74); }
.sys-end { width: var(--outer); margin: max(10px, calc(14 * var(--u))) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: max(16px, calc(40 * var(--u))); align-items: center; padding: max(22px, calc(34 * var(--u))) max(24px, calc(38 * var(--u))); border-radius: 24px; color: rgba(255,255,255,.76); background: var(--ink); text-align: left; font-size: 1rem; }
.sys-end strong { display: block; margin-bottom: 4px; color: var(--white); font: 400 max(22px, calc(30 * var(--u)))/1.1 var(--display); }

/* Objeção em destaque */
.who-note { margin-top: max(24px, calc(38 * var(--u))); padding: max(22px, calc(34 * var(--u))) max(22px, calc(40 * var(--u))); border-radius: 24px; background: radial-gradient(70% 140% at 20% 30%, #FFFFB8 0%, var(--accent) 45%, #ECEA00 100%); font-size: 1.0625rem; }
.who-note strong { display: block; margin-bottom: 4px; font: 400 max(22px, calc(32 * var(--u)))/1.1 var(--display); letter-spacing: -.005em; text-wrap: balance; }

/* Cases em grade 2 x 2 */
.cases-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-head { min-height: 3.5rem; }
.case-logo-wide { width: auto; max-width: 11rem; padding-inline: .7rem; }
.case-result { margin: max(18px, calc(26 * var(--u))) 0 max(24px, calc(32 * var(--u))); font: 400 max(21px, calc(29 * var(--u)))/1.16 var(--display); letter-spacing: -.005em; text-wrap: pretty; }
.case-dark { color: var(--white); background: radial-gradient(80% 100% at 90% 0%, var(--steel), var(--ink) 60%, var(--deep)); }
.case-light { background: var(--white); }
.case-light .path-link { background: var(--ink); color: var(--white); }
.case-dark:hover .path-link { background: var(--white); color: var(--ink); }
.case-light:hover .path-link { background: var(--deep); color: var(--accent); }

/* ===== Gestão de Tráfego Pago ===== */
/* O H1 é o sobretítulo, e a headline é o maior texto da página */
.sp-hero-ads { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.sp-hero h1.sp-kicker { font: 400 .7813rem/1.25 var(--body); letter-spacing: 0; text-wrap: wrap; }
.sp-headline { font: 400 max(32px, calc(52 * var(--u)))/1.06 var(--display); letter-spacing: -.012em; }
.sp-headline span { display: block; }
.sp-headline .g { color: var(--muted); }
.page-ads .pain h2, .page-ads .cost h2, .page-ads .start h2, .page-lp .pain h2, .page-lp .cost h2 { font-size: max(30px, calc(46 * var(--u))); }
.page-ads .final h2, .page-lp .final h2 { font-size: max(30px, calc(50 * var(--u))); max-width: 16em; }

/* Funil ilustrado: do anúncio à venda */
.ad-funnel { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .55em; }
.ad-funnel span { display: flex; align-items: center; gap: .9em; font-weight: 600; white-space: nowrap; }
.ad-funnel i { flex: none; order: -1; width: calc(var(--w) * .68); height: 3em; border-radius: .5em; background: #C8D4DB; }
.ad-funnel .on { font-weight: 700; }
.ad-funnel .on i { background: var(--accent); box-shadow: inset 0 0 0 1px rgba(12,30,41,.25); }
.dv-phone .ad-tag { margin-top: -.45em; color: var(--muted); font-size: .8em; }
.dv-phone .ds-btn-full { font-size: .92em; padding-inline: .3em; }

/* Onde a venda se perde */
.leak-list li { align-items: flex-start; font-weight: 400; font-size: .9375rem; line-height: 1.4; }
.leak-list strong { display: block; margin-bottom: 2px; font: 400 max(19px, calc(23 * var(--u)))/1.15 var(--display); }
.leak-list a { font-weight: 600; border-bottom: 1px solid var(--ink); }
.leak-list a:hover { background: var(--accent); }
.leak-list a .icon { display: inline-block; width: .85rem; height: .85rem; margin-left: 2px; vertical-align: -.1em; }

/* Nunca anunciou antes? */
.start { padding-top: var(--gap); }
.start-card { width: var(--outer); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: max(24px, calc(56 * var(--u))); align-items: center; padding: max(26px, calc(60 * var(--u))); border-radius: 24px; background: radial-gradient(70% 90% at 22% 25%, #FFFFB8 0%, var(--accent) 48%, #ECEA00 100%); }
.start h2 { font: 400 max(30px, calc(46 * var(--u)))/1.05 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.start-text p { margin: 16px 0 24px; font-size: 1.0625rem; max-width: 32rem; }
.start-steps { display: grid; gap: max(8px, calc(10 * var(--u))); }
.start-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: max(16px, calc(22 * var(--u))) max(16px, calc(24 * var(--u))); border-radius: 16px; background: var(--ink); color: rgba(255,255,255,.76); font-size: 1rem; line-height: 1.4; }
.start-steps strong { display: block; margin-bottom: 2px; text-wrap: balance; color: var(--white); font: 400 max(18px, calc(22 * var(--u)))/1.18 var(--display); }
.start-n { font: 400 max(28px, calc(38 * var(--u)))/1 var(--display); color: var(--accent); }

/* Plataformas */
.does-card > p { margin-top: 12px; color: var(--muted); font-size: 1rem; }
.plat-ico .icon { width: 1.25rem; height: 1.25rem; color: var(--white); }

/* O que você recebe */
.get-list { width: var(--outer); margin: max(24px, calc(34 * var(--u))) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(24px, calc(38 * var(--u))) max(24px, calc(56 * var(--u))); padding: max(26px, calc(52 * var(--u))); border-radius: 24px; background: var(--white); text-align: left; }
.get-list li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.get-list h3 { font: 400 max(20px, calc(25 * var(--u)))/1.15 var(--display); text-wrap: balance; }
.get-list p { margin-top: 4px; color: var(--muted); font-size: 1rem; }

/* Por que a Light */
.why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ===== Criação de Landing Page ===== */
.page-lp .sp-headline span { text-wrap: balance; }

/* Hero: o anúncio leva à página no celular */
.dv-lp .lp-phone { right: 5%; top: 2%; bottom: auto; z-index: 1; width: 50%; font-size: 1.55em; }
.lp-logo { width: 100%; height: auto; }
.lp-phone .ds-cards { gap: .35em; margin-top: 0; }
.lp-phone .ds-cards span { gap: .35em; padding: .5em; }
.lp-phone .ds-btn .icon { width: 1.3em; height: 1.3em; stroke-width: 2.2; }
.lp-ad { position: absolute; z-index: 2; left: 0; top: 26%; width: 44%; display: flex; flex-direction: column; gap: .6em; padding: 1em; border-radius: 1.3em; background: var(--white); color: var(--ink); font-size: 1.25em; rotate: -3deg; box-shadow: 0 26px 40px -18px rgba(12,30,41,.55), 0 0 0 1px rgba(12,30,41,.06); }
.lp-ad .ad-tag { color: var(--muted); font-size: .85em; }
.lp-ad .ds-img { aspect-ratio: 1 / .62; }
.lp-cursor { position: absolute; right: -.7em; bottom: -1em; width: 2.8em; height: 2.8em; fill: var(--ink); stroke: var(--white); stroke-width: 1.5; stroke-linejoin: round; }
.dv-lp .dv-status { left: 2%; bottom: 9%; z-index: 3; }

/* A dor: site com muitos caminhos, landing page com um só */
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(14px, calc(22 * var(--u))); }
.cmp-col { display: flex; flex-direction: column; }
.cmp-col p { margin-top: 14px; color: var(--white); font: 400 max(17px, calc(21 * var(--u)))/1.15 var(--display); text-wrap: balance; }
.cmp-page { flex: 1; display: flex; flex-direction: column; gap: .7em; min-height: 26em; padding: 1.1em; border-radius: 1em; background: #E4E7E9; font-size: max(9px, calc(11 * var(--u))); box-shadow: 0 14px 26px -14px rgba(0,0,0,.8); }
.cmp-img { flex: 1; min-height: 5em; border-radius: .6em; background: radial-gradient(90% 90% at 80% 15%, #3E6E8C, var(--ink) 75%); }
.cmp-nav { display: flex; align-items: center; gap: .5em; }
.cmp-nav b { width: 2.4em; height: .9em; margin-right: auto; border-radius: 9px; background: var(--ink); }
.cmp-nav i { width: 1.8em; height: .45em; border-radius: 9px; background: #A9B3B9; }
.cmp-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
.cmp-links i { height: 2.2em; border-radius: .45em; background: var(--white); }
.cmp-btns { display: flex; gap: .4em; }
.cmp-btns i { flex: 1; height: 2em; border-radius: 99px; background: #A9B3B9; }
.cmp-btns i:first-child { background: var(--ink); }
.cmp-h { display: block; height: 1em; border-radius: 9px; background: var(--ink); }
.cmp-h + .cmp-h { width: 66%; margin-top: -.25em; }
.cmp-one { display: grid; place-items: center; height: 3.4em; border-radius: 99px; background: var(--accent); color: var(--ink); box-shadow: 0 0 0 .5em rgba(255,254,21,.28), inset 0 0 0 1px rgba(12,30,41,.2); margin: .5em .5em .5em; }
.cmp-one .icon { width: 1.5em; height: 1.5em; stroke-width: 2.2; }

/* Uma landing page para cada objetivo */
.goals { padding-top: var(--gap); text-align: center; }
.goal-grid { width: var(--outer); margin: max(24px, calc(34 * var(--u))) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(10px, calc(14 * var(--u))); text-align: left; }
.goal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: max(20px, calc(30 * var(--u))); padding: max(24px, calc(38 * var(--u))); border-radius: 24px; }
.goal-text { display: flex; flex-direction: column; align-items: flex-start; }
.goal h3 { font: 400 max(26px, calc(34 * var(--u)))/1.06 var(--display); letter-spacing: -.006em; text-wrap: balance; }
.goal-text p { margin: 12px 0 24px; font-size: 1rem; }
.goal .btn { margin-top: auto; }
.goal-light { background: var(--white); }
.goal-light .goal-text p { color: var(--muted); }
.goal-dark { color: var(--white); background: radial-gradient(90% 100% at 85% 5%, var(--steel), var(--ink) 62%, var(--deep)); }
.goal-dark .goal-text p { color: rgba(255,255,255,.76); }
.goal-accent { background: radial-gradient(80% 110% at 22% 18%, #FFFFB8 0%, var(--accent) 50%, #ECEA00 100%); }
.goal-accent .goal-text p { color: rgba(12,30,41,.78); }
.goal-mini { display: flex; flex-direction: column; justify-content: center; gap: .7em; min-height: 18em; padding: 1em; border-radius: 1em; background: var(--paper); color: var(--ink); font-size: max(10px, calc(12 * var(--u))); line-height: 1.2; box-shadow: 0 16px 26px -16px rgba(7,19,26,.5), 0 0 0 1px rgba(12,30,41,.06); }
.goal-light .goal-mini { background: #E9EBEC; box-shadow: none; }
.goal-mini .ds-img { flex: 1; aspect-ratio: auto; min-height: 6em; }
.goal-mini .ds-img::before { width: auto; height: 56%; aspect-ratio: 1; }
.goal-mini .ds-btn { align-self: stretch; justify-content: center; margin-top: .3em; }
.mini-field { padding: .6em .7em; border-radius: .5em; background: var(--white); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.mini-check { display: flex; align-items: center; gap: .6em; }
.mini-check .icon { width: 1.5em; height: 1.5em; padding: .28em; border-radius: 50%; background: var(--ink); color: var(--accent); stroke-width: 3; }
.mini-check i { flex: 1; height: .5em; border-radius: 9px; background: #C8CED2; }
.mini-heart { display: grid; place-items: center; width: 3em; height: 3em; margin-bottom: .3em; border-radius: 50%; background: var(--ink); color: var(--accent); }
.mini-heart .icon { width: 1.5em; height: 1.5em; fill: currentColor; stroke: none; }
.mini-bar { display: block; height: .8em; margin-top: .5em; border-radius: 99px; background: #C8CED2; overflow: hidden; }
.mini-bar i { display: block; width: 62%; height: 100%; background: var(--ink); }

/* O que faz converter: o título divide a grade com os itens */
.conv { padding-top: var(--gap); }
.conv-card { width: var(--outer); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(26px, calc(40 * var(--u))) max(24px, calc(56 * var(--u))); padding: max(26px, calc(52 * var(--u))); border-radius: 24px; background: var(--white); }
.conv-card .get-list { display: contents; }
.conv-head p { margin-top: 12px; color: var(--muted); font-size: 1rem; max-width: 30rem; }

/* Quanto custa: bloco curto */
.lp-cost { align-items: start; }
.lp-cost .cost-text > p:first-child { margin-top: 0; }
.lp-cost .lp-cost-link { color: var(--ink); font-weight: 500; text-wrap: balance; }
.lp-cost-link a { border-bottom: 1px solid var(--ink); font-weight: 600; }
.lp-cost-link a:hover { background: var(--accent); }

/* Case FIFT2027: card largo */
.lp-case-grid { grid-template-columns: minmax(0, 1fr); }
.lp-case { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.lp-case:hover { transform: none; }
.lp-case .case-big { font-size: max(28px, calc(40 * var(--u))); line-height: 1.07; letter-spacing: -.008em; }
.lp-case .case-text { margin-bottom: 0; }
.lp-case .case-result { color: var(--accent); }
.lp-shot { border-radius: .9em; overflow: hidden; background: var(--paper); color: var(--ink); font-size: max(8px, calc(11 * var(--u))); line-height: 1.2; rotate: 1.5deg; box-shadow: 0 30px 50px -24px rgba(0,0,0,.75); }
.lp-shot-body { display: grid; gap: 1.1em; padding: 1.4em; }
.lp-shot-top { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.lp-shot-top img { width: 62%; height: auto; }
.lp-shot-top .ds-btn { margin: 0; }
.lp-shot-top .icon { width: 1.2em; height: 1.2em; stroke-width: 2.2; }
.lp-shot .ds-img { aspect-ratio: 1 / .5; }
.lp-shot .ds-img::before { width: 22%; }
.lp-shot .ds-cards { margin-top: 0; }

/* ===== Responsivo ===== */
@media (max-width: 1040px) {
  .phases-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .phase { min-height: 0; }
  .phase-v { margin-bottom: 28px; }
  .phase-2 .phase-arrow { display: none; }
  .phase-arrow { bottom: 50%; transform: translateY(50%); width: 2rem; height: 2rem; right: calc(max(10px, calc(14 * var(--u))) / -2 - 1rem); }
  .does-grid, .who-grid, .cases-grid, .goal-grid { grid-template-columns: minmax(0, 1fr); }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "c d"; }
  .cases-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sos-in { grid-template-columns: minmax(0, 1fr) auto; }
  .sos h2 { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sp-hero, .sp-hero-long, .sp-hero-ads, .start-card, .pain-grid, .paths-grid, .incl-card, .cost-grid, .faq-cols { grid-template-columns: minmax(0, 1fr); }
  .sp-hero-text { padding: 12px 14px 8px; }
  .dv, .sp-hero-long .dv { min-height: 0; aspect-ratio: 1 / .96; font-size: max(6.8px, 1.7vw); }
  .dv-laptop { top: 5%; }
  .dv-lp .lp-phone { width: 42%; right: 10%; }
  .lp-ad { left: 6%; width: 38%; }
  .dv-lp .dv-status { left: 6%; }
  .flow-list { grid-template-columns: repeat(2, minmax(0, 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; }
  .sp-ctas .btn { width: 100%; }
  .sp-hero h1.sp-kicker { border-radius: 14px; }
  .get-list, .why-grid, .conv-card { grid-template-columns: minmax(0, 1fr); }
  .goal { grid-template-columns: minmax(0, 1fr); }
  .goal-mini { display: none; }
  .goal .btn { width: 100%; }
  .cmp-page { min-height: 20em; }
  .lp-shot { rotate: none; }
  .start-text .btn { width: 100%; }
  .leak-list a .icon { display: none; }
  .talk-list li:nth-child(n) { rotate: none; margin-inline: 0; }
  .talk-list li:nth-child(odd) { margin-right: 6%; }
  .talk-list li:nth-child(even) { margin-left: 6%; }
  .sys-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d"; }
  .sys-end { grid-template-columns: minmax(0, 1fr); }
  .sys-end .btn { width: 100%; }
  .cases-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .phases-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .phase-2 .phase-arrow { display: grid; }
  .phase-arrow { right: auto; left: 50%; bottom: -11px; width: 2.5rem; height: 2.5rem; transform: translate(-50%, 50%) rotate(90deg); }
  .case-main { grid-template-columns: minmax(0, 1fr); }
  .case-bars { height: 190px; }
  .final-ctas { width: 100%; }
  .final-ctas .btn { width: 100%; }
  .btn-lg { padding-inline: 1rem; font-size: .9375rem; }
  .pain-list li:nth-child(n) { rotate: none; margin-inline: 0; }
  .sos-in { grid-template-columns: minmax(0, 1fr); }
  .sos .btn { width: 100%; }
  .flow-list { grid-template-columns: minmax(0, 1fr); }
  .flow-list li { min-height: 0; }
  .flow-n { margin-bottom: 0; padding-bottom: 2px; }
  .path-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .path-link { width: 100%; justify-content: center; }
  .bill-wrap { rotate: none; }
  .paths-title .h2 { margin-top: -.02em; }
  .logo-item { font-size: .8rem; }
  .wa-float { height: 48px; padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track { animation: none !important; }
  .proof .marquee, .marquee { -webkit-mask-image: none; mask-image: none; }
  .proof .track { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 14px; }
}

/* Á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; }