/* Páginas internas (cases e frentes): complementa base.css e site.css */

/* Abertura */
.page-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: calc(100vh - 84px); padding: 64px 0 56px; background: #060D1D; color: var(--white); }
.page-hero .bg { position: absolute; inset: -10% 0; }
.page-hero .bg video, .page-hero .bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(.42) saturate(1.1); transform: translateY(calc(var(--hp, 0) * 70px)) scale(calc(1.04 + var(--hp, 0) * .14)); }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(6,13,29,.2), rgba(6,13,29,.25) 45%, #060D1D); pointer-events: none; }
.page-hero .wrap { position: relative; z-index: 1; }
/* manchas que se movem devagar, para as aberturas sem imagem */
.blobs { position: absolute; inset: 0; overflow: hidden; filter: blur(70px); }
.blobs i { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; background: rgba(51,163,255,.5); left: -8vw; top: -12vw; animation: mancha 16s ease-in-out infinite alternate; }
.blobs i + i { background: rgba(1,200,239,.4); left: auto; right: -10vw; top: 30%; animation-duration: 21s; animation-delay: -7s; }
@keyframes mancha { 50% { transform: translate(14vw, 10vw) scale(1.25); border-radius: 42% 58% 55% 45%; } 100% { transform: translate(-4vw, 22vw) scale(.9); } }
.crumbs { display: flex; gap: 10px; margin-bottom: 26px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--cyan); }
.giant {
  /* o corpo se ajusta ao número de letras (--n) para a palavra caber na largura e a abertura caber na tela */
  display: block; width: max-content; margin: 0 0 22px -.04em; padding-right: .08em; font-size: min(calc(125vw / var(--n, 5)), calc(1450px / var(--n, 5)), 30vh); font-weight: 800; line-height: .84; letter-spacing: -.05em; text-transform: uppercase;
  color: transparent; background: linear-gradient(100deg, var(--blue), var(--cyan)); -webkit-background-clip: text; background-clip: text;
  transform: translateY(calc(var(--hp, 0) * -50px));
}
.page-hero h1 { max-width: 860px; font-size: clamp(26px, 3.1vw, 44px); letter-spacing: -.03em; }
.page-hero .lead { max-width: 640px; margin-top: 18px; font-size: clamp(17px, 1.6vw, 20px); color: rgba(255,255,255,.82); }
/* título à esquerda, texto de apoio e botões à direita: a abertura inteira cabe na primeira tela */
.hero-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: end; }
.hero-split .lead { margin-top: 0; }
@media (max-width: 960px) { .hero-split { grid-template-columns: 1fr; gap: 20px; } }
.meta-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 34px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); }
.meta-row dt { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.meta-row dd { margin: 8px 0 0; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--white); }

/* marcação de conteúdo a validar ou a produzir */
.mark { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 99px; background: #FFF3D6; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9A6400; }
.ph-box { padding: 32px 34px; border: 2px dashed #B9C6D8; border-radius: 20px; background: repeating-linear-gradient(135deg, #EAF1F9 0 14px, #F5F8FC 14px 28px); }
.ph-box b { display: block; font-size: 20px; letter-spacing: -.02em; color: var(--navy); }
.ph-box p { margin-top: 8px; font-size: 15px; }

/* Blocos de história do case: rótulo fixo à esquerda, texto à direita */
.story .wrap { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.story + .story { padding-top: 0; }
.story-label { position: sticky; top: 130px; }
.story-label b { display: block; font-size: clamp(64px, 8vw, 110px); font-weight: 200; line-height: .9; letter-spacing: -.05em; color: var(--blue); }
.story-label h2 { margin-top: 14px; font-size: clamp(28px, 3.4vw, 44px); color: var(--navy); }
.story-body p { font-size: clamp(19px, 2vw, 26px); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--navy); }
.story-body p + p { margin-top: 22px; font-size: 18px; font-weight: 400; letter-spacing: 0; color: var(--gray); }
.story-body .chips { padding-bottom: 0; }
.story-body .ph-box p { margin-top: 8px; font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--gray); }

/* Galeria que corre na horizontal enquanto a página rola */
.hs { background: #060D1D; color: var(--white); padding: 96px 0; }
.hs-track { display: flex; align-items: center; gap: 28px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
.hs-track::-webkit-scrollbar { display: none; }
.hs-item { position: relative; flex: none; overflow: hidden; width: min(72vw, 400px); aspect-ratio: 3 / 4; border-radius: 22px; background: #0B1830; }
.hs-item.wide { width: min(86vw, 720px); aspect-ratio: 16 / 10; }
.hs-item video, .hs-item img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.hs-item:hover video, .hs-item:hover img { transform: scale(1.08); }
.hs-title { flex: none; padding: 0 3vw; }
.hs-title b { display: block; font-size: 30px; font-weight: 200; letter-spacing: -.04em; color: var(--cyan); }
.hs-title p { font-size: clamp(54px, 9vw, 140px); font-weight: 800; line-height: .9; letter-spacing: -.05em; white-space: nowrap; }
.hs.hs-on { padding: 0; }
.hs-on .hs-pin { position: sticky; top: 84px; height: calc(100vh - 84px); overflow: hidden; display: flex; align-items: center; }
.hs-on .hs-track { overflow: visible; padding: 0 8vw; will-change: transform; }
.hs-on .hs-item { width: auto; height: 62vh; }
.hs-on .hs-item:nth-child(even) { translate: 0 calc((var(--hs, 0) - .5) * -90px); }
.hs-on .hs-item:nth-child(odd) { translate: 0 calc((var(--hs, 0) - .5) * 90px); }

/* Slides em pilha 3D que se abre com a rolagem e inclina com o ponteiro */
.deck3d { position: relative; overflow: hidden; background: var(--navy); color: var(--white); }
.deck3d .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.deck3d h2 { font-size: clamp(30px, 4vw, 52px); color: var(--white); }
.deck3d p { margin-top: 18px; color: rgba(255,255,255,.8); }
.bigstat { display: flex; align-items: flex-end; gap: 16px; margin-top: 40px; }
.bigstat b { font-size: clamp(90px, 13vw, 190px); font-weight: 800; line-height: .82; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.bigstat b i { font-style: normal; font-weight: 200; color: var(--cyan); }
.bigstat > span { padding-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); }
.deck-stage { position: relative; height: clamp(360px, 44vw, 560px); perspective: 1400px; }
.deck-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(18deg + var(--ty, 0) * -8deg)) rotateY(calc(-24deg + var(--tx, 0) * 10deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.deck-tilt img { position: absolute; left: 8%; top: 50%; width: 78%; max-width: none; border-radius: 14px; box-shadow: -24px 36px 70px rgba(0,0,0,.55); will-change: transform; }
.deck-tilt img:nth-child(1) { transform: translate3d(calc(var(--d, 0) * -16%), calc(-50% + var(--d, 0) * 34%), calc(var(--d, 0) * -150px)); }
.deck-tilt img:nth-child(2) { transform: translate3d(0, -50%, 0); }
.deck-tilt img:nth-child(3) { transform: translate3d(calc(var(--d, 0) * 16%), calc(-50% - var(--d, 0) * 34%), calc(var(--d, 0) * 150px)); }

/* Próximo case */
.next-case { display: block; position: relative; overflow: hidden; padding: 110px 0; background: #060D1D; color: var(--white); text-decoration: none; }
.next-case span { font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); }
.next-case b { display: flex; align-items: center; gap: .2em; margin-top: 10px; font-size: clamp(54px, 12vw, 190px); font-weight: 800; line-height: .9; letter-spacing: -.05em; text-transform: uppercase; color: rgba(255,255,255,.16); transition: color .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.next-case b::after { content: "→"; font-weight: 200; color: var(--cyan); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.next-case:hover b { color: var(--white); transform: translateX(2vw); }
.next-case:hover b::after { transform: translateX(3vw); }

/* Página de frente */
.moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.moments li { position: relative; overflow: hidden; padding: 36px 32px 38px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 10px 30px rgba(15,35,69,.06); transition: transform .45s ease, box-shadow .35s ease, border-color .35s ease; }
.moments li:hover { transform: translateY(-8px); box-shadow: 0 24px 54px rgba(15,35,69,.15); border-color: var(--cyan); }
.moments b { display: block; font-size: 64px; font-weight: 200; line-height: 1; letter-spacing: -.05em; color: var(--blue); }
.moments h3 { margin: 16px 0 10px; font-size: 22px; letter-spacing: -.02em; color: var(--navy); }
.moments p { font-size: 16px; }

.deliver { background: var(--soft); }
.deliver-list { border-bottom: 1px solid #D5DEEA; }
.deliver-row { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: baseline; padding: 30px 0; border-top: 1px solid #D5DEEA; transition: padding .35s ease, background .35s ease; }
.deliver-row h3 { font-size: clamp(24px, 3vw, 40px); font-weight: 800; letter-spacing: -.03em; color: var(--navy); transition: color .3s ease, transform .35s ease; }
.deliver-row p { font-size: 17px; color: var(--ink); }
.deliver-row:hover h3 { color: var(--blue); transform: translateX(12px); }

.rel-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.rel { position: relative; overflow: hidden; display: block; aspect-ratio: 16 / 9; border-radius: 24px; background: var(--navy); color: var(--white); text-decoration: none; box-shadow: 0 20px 50px rgba(8,20,45,.18); }
.rel img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.rel:hover img { transform: scale(1.07); }
.rel-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 24px; background: linear-gradient(transparent, rgba(5,11,26,.88)); }
.rel-cap h3 { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.02em; color: var(--white); }
.rel-cap p { font-size: 14px; color: rgba(255,255,255,.75); }
.rel.ph-box { display: flex; flex-direction: column; justify-content: center; box-shadow: none; color: var(--gray); }

@media (max-width: 960px) {
  .page-hero { min-height: 0; padding: 90px 0 56px; }
  .meta-row { grid-template-columns: repeat(2, 1fr); }
  .story .wrap, .deck3d .wrap, .deliver-row { grid-template-columns: 1fr; gap: 20px; }
  .story-label { position: static; }
  .moments, .rel-cases { grid-template-columns: 1fr; }
  .deliver-row { gap: 8px; padding: 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .blobs i { animation: none; }
  .page-hero .bg video, .page-hero .bg img, .giant, .deck-tilt { transform: none; transition: none; }
}

/* Momentos: cartões que se enchem com o azul da marca ao passar o ponteiro */
.moments-sec { background: var(--soft); }
.moments li { isolation: isolate; border-top: 0; }
.moments li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.moments li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, var(--navy), #1B4FA0 70%, var(--blue)); transform: translateY(101%); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.moments li:hover::after { transform: none; }
.moments b, .moments h3, .moments p { transition: color .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.moments li:hover b { color: var(--cyan); transform: translateX(6px) scale(1.12); transform-origin: left; }
.moments li:hover h3 { color: var(--white); }
.moments li:hover p { color: rgba(255,255,255,.85); }
.moments b { font-size: 84px; }

/* Entregas: palco escuro com lista interativa e cartão 3D ilustrado */
.stage-sec { position: relative; overflow: hidden; background: #060D1D; color: var(--white); }
.stage-sec::before { content: ""; position: absolute; right: -12vw; top: 10%; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle, rgba(51,163,255,.22), transparent 62%); pointer-events: none; }
.stage-sec .wrap { position: relative; }
.stage-sec .sec-head h2 { color: var(--white); }
.stage-sec .sec-head p { color: rgba(255,255,255,.78); }
.stage-sec .eyebrow { color: var(--cyan); }
.stage { display: grid; grid-template-columns: 6fr 6fr; gap: 64px; align-items: center; }
.stage-list { border-bottom: 1px solid rgba(255,255,255,.14); }
.stage-item { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 54px 1fr; align-items: baseline; width: 100%; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); cursor: pointer; }
.stage-item::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: left; }
.stage-item.on::before { animation: stagebar 6s linear forwards; }
.stage:hover .stage-item.on::before { animation-play-state: paused; }
@keyframes stagebar { to { transform: scaleX(1); } }
.stage-item b { font-size: 24px; font-weight: 200; letter-spacing: -.04em; color: rgba(255,255,255,.35); transition: color .3s ease; }
.stage-item strong { display: block; font-size: clamp(22px, 2.5vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: rgba(255,255,255,.38); transition: color .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.stage-item em { display: block; max-height: 0; overflow: hidden; opacity: 0; font-style: normal; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.8); transition: max-height .5s ease, opacity .4s ease, margin-top .5s ease; }
.stage-item:hover strong { color: rgba(255,255,255,.75); }
.stage-item.on b { color: var(--cyan); }
.stage-item.on strong { color: var(--white); transform: translateX(8px); }
.stage-item.on em { max-height: 120px; margin-top: 8px; opacity: 1; }
.stage-item:focus-visible strong { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 6px; }

.stage-view { perspective: 1300px; align-self: start; position: sticky; top: 120px; }
/* a lista reserva a altura do texto aberto, para a página não se mexer quando a entrega ativa troca */
.stage-list { min-height: 560px; }
.stage-card { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 28px; background: #0B1830; border: 1px solid rgba(1,200,239,.4); box-shadow: 0 50px 110px rgba(0,0,0,.6), 0 0 90px rgba(1,200,239,.18); transform: rotateX(calc(var(--ty, 0) * -9deg)) rotateY(calc(-6deg + var(--tx, 0) * 12deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.stage-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(380px circle at calc(50% + var(--tx, 0) * 40%) calc(50% + var(--ty, 0) * 40%), rgba(255,255,255,.14), transparent 60%); }
.sv { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.sv.on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.sv > svg { width: 100%; height: 100%; display: block; }
.sv * { transform-box: fill-box; }

/* 01 estratégia: a marca encontra o seu lugar no mapa */
.sv-map.on .a-you { animation: svyou 1.8s cubic-bezier(.2, .8, .2, 1) both; }
.sv-map .a-ring { transform-origin: center; animation: svspin 14s linear infinite; }
.sv-map .a-ping { transform-origin: center; animation: pulse 2.2s ease-out infinite; }
@keyframes svyou { from { transform: translate(-190px, 130px) scale(.5); opacity: .3; } }
@keyframes svspin { to { transform: rotate(360deg); } }
/* 02 naming: caminhos descartados e o nome escolhido */
.sv-name > div { display: grid; gap: 14px; width: 74%; }
.sv-name span { position: relative; width: max-content; font-size: clamp(16px, 1.8vw, 22px); font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.4); }
.sv-name span::after { content: ""; position: absolute; left: -4%; top: 52%; width: 108%; height: 2px; background: #D8556B; transform: scaleX(0); transform-origin: left; }
.sv-name.on span::after { animation: svcut .5s ease forwards; }
.sv-name.on span:nth-child(1)::after { animation-delay: .5s; } .sv-name.on span:nth-child(2)::after { animation-delay: .9s; } .sv-name.on span:nth-child(3)::after { animation-delay: 1.3s; }
.sv-name strong { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: clamp(30px, 4vw, 54px); font-weight: 800; line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: transparent; background: linear-gradient(100deg, var(--blue), var(--cyan)); -webkit-background-clip: text; background-clip: text; clip-path: inset(0 100% 0 0); }
.sv-name.on strong { animation: svtype 1.1s steps(12) 1.8s forwards; }
.sv-name strong i { width: 4px; height: .9em; background: var(--cyan); animation: svblink .8s steps(2) infinite; }
@keyframes svcut { to { transform: scaleX(1); } }
@keyframes svtype { to { clip-path: inset(0 -6% 0 0); } }
@keyframes svblink { 50% { opacity: 0; } }
/* 04 sistema: cores, tipografia e regras */
.sv-sys > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 76%; }
.sv-sys i { aspect-ratio: 1; border-radius: 12px; background: var(--navy); border: 1px solid rgba(255,255,255,.2); }
.sv-sys i:nth-child(2) { background: var(--blue); } .sv-sys i:nth-child(3) { background: var(--cyan); } .sv-sys i:nth-child(4) { background: var(--white); }
.sv-sys b { grid-column: span 2; grid-row: span 3; align-self: center; font-size: clamp(64px, 9vw, 120px); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--white); }
.sv-sys u { grid-column: span 2; height: 10px; align-self: center; border-radius: 9px; background: rgba(255,255,255,.3); }
.sv-sys u:nth-of-type(2) { width: 78%; } .sv-sys u:nth-of-type(3) { width: 52%; background: var(--cyan); }
.sv-sys.on > div > * { animation: svpop .6s cubic-bezier(.2, .8, .2, 1) both; }
.sv-sys.on > div > :nth-child(2) { animation-delay: .08s; } .sv-sys.on > div > :nth-child(3) { animation-delay: .16s; } .sv-sys.on > div > :nth-child(4) { animation-delay: .24s; }
.sv-sys.on > div > :nth-child(5) { animation-delay: .36s; } .sv-sys.on > div > :nth-child(6) { animation-delay: .46s; } .sv-sys.on > div > :nth-child(7) { animation-delay: .54s; } .sv-sys.on > div > :nth-child(8) { animation-delay: .62s; }
@keyframes svpop { from { opacity: 0; transform: translateY(18px) scale(.9); } }
/* 05 papelaria: timbrado, envelope e cartão se abrem em leque */
.sv-pap { perspective: 900px; }
.sv-pap > div { position: relative; width: 44%; aspect-ratio: 3 / 4; transform-style: preserve-3d; transform: rotateX(48deg) rotateZ(-24deg); }
.sv-pap i { position: absolute; inset: 0; border-radius: 8px; background: var(--white); box-shadow: -14px 20px 34px rgba(0,0,0,.45); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.sv-pap i::before { content: ""; position: absolute; left: 12%; top: 10%; width: 22%; aspect-ratio: 1; border-radius: 4px; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.sv-pap i:nth-child(2) { inset: 34% -18% 18% 30%; background: var(--navy); border: 1px solid rgba(255,255,255,.25); }
.sv-pap i:nth-child(3) { inset: 58% 34% 14% -22%; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.sv-pap i:nth-child(3)::before { background: var(--white); }
.sv-pap.on i:nth-child(1) { transform: translate3d(-12%, -6%, 0); }
.sv-pap.on i:nth-child(2) { transform: translate3d(14%, 4%, 50px); }
.sv-pap.on i:nth-child(3) { transform: translate3d(-6%, 14%, 100px); }
/* 06 sinalização: o letreiro acende */
.sv-sign .a-sign { animation: svsign 4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(1,200,239,.9)); }
.sv-sign .a-light { animation: svsign 4s ease-in-out .4s infinite; }
@keyframes svsign { 0%, 8% { opacity: .15; } 10% { opacity: 1; } 12% { opacity: .3; } 16%, 100% { opacity: 1; } }

@media (max-width: 960px) {
  .stage { grid-template-columns: 1fr; gap: 32px; }
  .stage-view { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-item.on::before { animation: none; transform: scaleX(1); }
  .sv *, .sv-name strong, .sv-name span::after { animation: none !important; }
  .sv-name strong { clip-path: none; }
  .stage-card, .moments li::after { transition: none; }
}

/* Ilustrações das entregas (demais serviços): cada peça com a classe "p" entra em sequência, na ordem de --i */
.sv.on .p { animation: svpop .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * .12s); }
/* site e landing page: uma janela de navegador que se monta */
.sv-web .win { display: grid; grid-template-rows: 20px 1.4fr 1fr auto auto; gap: 9px; width: 72%; aspect-ratio: 4 / 3; padding: 0 14px 14px; overflow: hidden; border-radius: 14px; background: var(--white); box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.sv-web .bar { margin: 0 -14px; background: #E3E9F1; }
.sv-web .hero { border-radius: 8px; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.sv-web .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sv-web .row i { border-radius: 6px; background: #E3E9F1; }
.sv-web u { height: 8px; border-radius: 8px; background: #C9D5E5; }
.sv-web u:last-of-type { width: 58%; }
.sv-web.lp .win { grid-template-rows: 20px 1.6fr auto auto 1fr; width: 46%; aspect-ratio: 3 / 4; }
.sv-web.lp b { align-self: center; justify-self: start; width: 62%; height: 30px; border-radius: 99px; background: var(--navy); box-shadow: 0 0 0 0 rgba(1,200,239,.7); }
.sv-web.lp.on b { animation: svpop .6s cubic-bezier(.2, .8, .2, 1) .6s both, svbtn 1.8s ease-out 1.4s infinite; }
@keyframes svbtn { to { box-shadow: 0 0 0 16px rgba(1,200,239,0); } }
/* redes sociais: grade de publicações no celular e reações subindo */
.sv-phone .fone { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 7px; width: 30%; aspect-ratio: 9 / 17; padding: 12px 10px; border: 6px solid #1D3A6B; border-radius: 24px; background: var(--white); box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.sv-phone .fone i { aspect-ratio: 1; border-radius: 7px; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.sv-phone .fone i:nth-child(2), .sv-phone .fone i:nth-child(3), .sv-phone .fone i:nth-child(6) { background: var(--navy); }
.sv-phone > b { position: absolute; left: 62%; top: 62%; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); opacity: 0; }
.sv-phone > b:nth-of-type(2) { left: 68%; width: 14px; height: 14px; background: var(--blue); }
.sv-phone > b:nth-of-type(3) { left: 58%; width: 10px; height: 10px; background: var(--white); }
.sv-phone.on > b { animation: svfloat 2.8s ease-out 1s infinite; }
.sv-phone.on > b:nth-of-type(2) { animation-delay: 1.6s; } .sv-phone.on > b:nth-of-type(3) { animation-delay: 2.2s; }
@keyframes svfloat { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-140px) scale(1.2); } }
/* resultados: colunas crescem e a linha de tendência se desenha */
.sv-chart .g { transform-origin: bottom; }
.sv-chart.on .g { animation: svgrow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .12s); }
.sv-chart .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sv-chart.on .ln { animation: svdraw 1.2s ease .8s forwards; }
@keyframes svgrow { from { transform: scaleY(0); } }
@keyframes svdraw { to { stroke-dashoffset: 0; } }
/* busca: a barra de pesquisa e o anúncio em primeiro lugar */
.sv-search > div { display: grid; gap: 12px; width: 70%; }
.sv-search b { display: flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 99px; background: var(--white); }
.sv-search b i { width: 0; height: 9px; border-radius: 9px; background: var(--navy); }
.sv-search.on b i { animation: svbusca 1s steps(10) .3s forwards; }
@keyframes svbusca { to { width: 58%; } }
.sv-search span { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.07); }
.sv-search span u { height: 8px; border-radius: 8px; background: rgba(255,255,255,.3); }
.sv-search span u:last-child { width: 62%; }
.sv-search .ad { background: rgba(1,200,239,.14); border: 1.5px solid var(--cyan); }
.sv-search .ad em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.sv-search .ad u:first-of-type { background: var(--white); }
/* vídeo: tela com o botão de reprodução pulsando e a barra correndo */
.sv-play > div { position: relative; display: grid; place-items: center; width: 74%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, #13294F, #1B4FA0); box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.sv-play i { width: 64px; height: 64px; border-radius: 50%; background: var(--white); clip-path: none; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: svbtn2 1.8s ease-out infinite; }
.sv-play i::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -7px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--navy); }
.sv-play u { position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: var(--cyan); transform: scaleX(0); transform-origin: left; }
.sv-play.on u { animation: stagebar 6s linear forwards; }
@keyframes svbtn2 { to { box-shadow: 0 0 0 26px rgba(255,255,255,0); } }
/* e-mail: a carta sobe do envelope */
.sv-mail.on .carta { animation: svmail 1.3s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes svmail { from { transform: translateY(74px); } }

/* Entregas, ajuste de escala: lista mais compacta */
.stage { grid-template-columns: 5fr 6fr; gap: 56px; }
.stage-item { grid-template-columns: 44px 1fr; padding: 15px 0; }
.stage-item b { font-size: 18px; }
.stage-item strong { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.02em; }
.stage-item em { font-size: 15px; }
.stage-list { min-height: 0; }
.stage-view { top: 130px; }
.stage-card { max-width: 520px; margin: 0 auto; }

/* Case: imagem principal e pedido de mais material */
.shot-sec { padding: 0 0 96px; }
.shot-sec .wrap { display: grid; gap: 28px; }
.shot { margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 70px rgba(8,20,45,.25); }
.shot img { width: 100%; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.shot:hover img { transform: scale(1.04); }

/* Abertura compacta (Contato) e lista de contatos em letra grande */
.page-hero.compact { min-height: 0; padding-bottom: 64px; }
.big-links { padding: 40px 0 96px; }
.big-links a { display: grid; grid-template-columns: 180px 1fr auto; align-items: baseline; gap: 24px; padding: 34px 0; border-bottom: 1px solid #D5DEEA; text-decoration: none; }
.big-links span { font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--blue); }
.big-links b { font-size: clamp(26px, 5vw, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--navy); transition: color .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1); overflow-wrap: anywhere; }
.big-links a::after { content: "→"; font-size: clamp(26px, 4vw, 54px); font-weight: 200; color: var(--cyan); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.big-links a:hover b { color: var(--blue); transform: translateX(14px); }
.big-links a:hover::after { transform: translateX(14px); }
.signup select { width: 100%; padding: 24px 0 10px; font: inherit; font-size: 17px; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.28); border-radius: 0; outline: none; cursor: pointer; }
.signup select option { color: var(--ink); }
.signup select:focus { border-bottom-color: var(--cyan); }
.signup select:valid + span, .signup select:focus + span { top: 0; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
/* nas páginas internas o menu tem um item a mais */
.top nav a:not(.btn) { padding-left: 12px; padding-right: 12px; }

@media (max-width: 960px) {
  .big-links a { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 26px 0; }
  .big-links span { grid-column: 1 / -1; }
  .stage-card { max-width: none; }
}

/* Páginas-índice (Serviços, Metodologia, Cases) */
.page-hero.compact .lead { max-width: 520px; }
/* Serviços: quatro faixas grandes que se enchem de azul-marinho ao passar o ponteiro */
.svc-rows { padding-top: 24px; }
.svc-rows a { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 70px 1.1fr 1.2fr 60px; align-items: center; gap: 32px; padding: 46px 28px; margin: 0 -28px; border-top: 1px solid #D5DEEA; border-radius: 20px; text-decoration: none; }
.svc-rows a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--navy), #1B4FA0); transform: translateY(101%); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.svc-rows a:hover::before, .svc-rows a:focus-visible::before { transform: none; }
.svc-rows i { font-style: normal; font-size: 30px; font-weight: 200; letter-spacing: -.04em; color: #9FB0C7; transition: color .35s ease; }
.svc-rows h2 { font-size: clamp(38px, 6vw, 88px); font-weight: 800; line-height: .95; letter-spacing: -.045em; color: var(--navy); transition: color .35s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.svc-rows h2 + span { display: block; margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); transition: color .35s ease; }
.svc-rows p { font-size: 17px; color: var(--ink); transition: color .35s ease; }
.svc-rows em { display: block; margin-top: 12px; font-style: normal; font-size: 13px; letter-spacing: .04em; color: var(--gray); transition: color .35s ease; }
.svc-rows u { justify-self: end; text-decoration: none; font-size: 44px; font-weight: 200; line-height: 1; color: var(--cyan); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.svc-rows a:hover h2 { color: var(--white); transform: translateX(12px); }
.svc-rows a:hover i, .svc-rows a:hover h2 + span { color: var(--cyan); }
.svc-rows a:hover p { color: rgba(255,255,255,.88); }
.svc-rows a:hover em { color: rgba(255,255,255,.65); }
.svc-rows a:hover u { transform: translateX(12px); }

/* Cases: filtro por serviço */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filters button { all: unset; cursor: pointer; padding: 12px 24px; border: 1px solid #CBD5E3; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--navy); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.filters button:hover { border-color: var(--blue); color: var(--blue); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filters button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.rel-cases .rel[hidden] { display: none; }
.rel-cases .rel.pop { animation: svpop .5s cubic-bezier(.2, .8, .2, 1) both; }
.rel-tag { position: absolute; left: 20px; top: 20px; padding: 6px 14px; border-radius: 99px; background: rgba(6,13,29,.6); backdrop-filter: blur(6px); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.rel.ph-box .rel-tag { position: static; align-self: flex-start; margin-bottom: 10px; background: var(--navy); }

/* Metodologia: cartões de escolha */
.pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pick a { position: relative; isolation: isolate; overflow: hidden; display: block; padding: 44px 40px; border: 1px solid var(--line); border-radius: 24px; background: var(--white); box-shadow: 0 10px 30px rgba(15,35,69,.06); text-decoration: none; transition: transform .45s ease, box-shadow .35s ease; }
.pick a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, var(--navy), #1B4FA0 70%, var(--blue)); transform: translateY(101%); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.pick a:hover { transform: translateY(-8px); box-shadow: 0 24px 54px rgba(15,35,69,.18); }
.pick a:hover::after { transform: none; }
.pick span { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
.pick h3 { margin: 12px 0 14px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.035em; color: var(--navy); }
.pick p { font-size: 17px; color: var(--ink); }
.pick em { display: block; margin-top: 22px; font-style: normal; font-weight: 600; color: var(--blue); }
.pick span, .pick h3, .pick p, .pick em { transition: color .35s ease; }
.pick a:hover span, .pick a:hover em { color: var(--cyan); }
.pick a:hover h3 { color: var(--white); }
.pick a:hover p { color: rgba(255,255,255,.88); }
.method-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 52px; }

/* Atalhos da home para as páginas completas */
.see-all { display: flex; justify-content: center; margin-top: 44px; }
.sc-all { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--cyan); text-decoration: none; }
.sc-all::after { content: " →"; display: inline-block; transition: transform .3s ease; }
.sc-all:hover::after { transform: translateX(5px); }

@media (max-width: 960px) {
  .svc-rows a { grid-template-columns: 40px 1fr 34px; gap: 14px; padding: 30px 16px; margin: 0 -16px; }
  .svc-rows a > div:nth-of-type(2) { grid-column: 2 / -1; }
  .svc-rows u { grid-column: 3; grid-row: 1; font-size: 30px; }
  .pick { grid-template-columns: 1fr; }
  .pick a { padding: 34px 28px; }
}

/* cartão reservado na grade de cases */
.rel.ph-box { background: repeating-linear-gradient(135deg, #EAF1F9 0 14px, #F5F8FC 14px 28px); padding: 32px 34px; }

/* Ajuste de escala: faixas de serviço e faixa de palavras mais contidas, para caberem inteiras na leitura */
@media (min-width: 961px) { .svc-rows a { grid-template-columns: 56px 1fr 1.25fr 44px; padding: 30px 28px; } }
.svc-rows i { font-size: 22px; }
.svc-rows h2 { font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -.035em; }
.svc-rows h2 + span { margin-top: 8px; font-size: 11px; }
.svc-rows p { font-size: 16px; }
.svc-rows u { font-size: 32px; }
.kband { padding: 26px 0; }
.kband div { font-size: clamp(34px, 5vw, 76px); letter-spacing: -.035em; }

/* ===== Celular e toque ===== */
/* onda no ponto tocado */
.ripple { position: fixed; z-index: 95; width: 18px; height: 18px; margin: -9px; border: 2px solid var(--blue); border-radius: 50%; pointer-events: none; animation: ripple .6s ease-out forwards; }
.ripple.dark { border-color: var(--cyan); }
@keyframes ripple { to { transform: scale(5.5); opacity: 0; } }

/* o efeito de "passar o mouse" aplicado ao bloco que cruza o meio da tela (classe posta por touch.js) */
.moments li.is-hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(15,35,69,.15); border-color: var(--cyan); }
.moments li.is-hover::after { transform: none; }
.moments li.is-hover b { color: var(--cyan); transform: translateX(6px) scale(1.12); transform-origin: left; }
.moments li.is-hover h3 { color: var(--white); }
.moments li.is-hover p { color: rgba(255,255,255,.85); }
.svc-rows a.is-hover::before { transform: none; }
.svc-rows a.is-hover h2 { color: var(--white); transform: translateX(8px); }
.svc-rows a.is-hover i, .svc-rows a.is-hover h2 + span { color: var(--cyan); }
.svc-rows a.is-hover p { color: rgba(255,255,255,.88); }
.svc-rows a.is-hover em { color: rgba(255,255,255,.65); }
.svc-rows a.is-hover u { transform: translateX(6px); }
.pick a.is-hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(15,35,69,.18); }
.pick a.is-hover::after { transform: none; }
.pick a.is-hover span, .pick a.is-hover em { color: var(--cyan); }
.pick a.is-hover h3 { color: var(--white); }
.pick a.is-hover p { color: rgba(255,255,255,.88); }
.next-case.is-hover b { color: var(--white); transform: translateX(2vw); }
.next-case.is-hover b::after { transform: translateX(3vw); }
.big-links a.is-hover b { color: var(--blue); transform: translateX(10px); }
.big-links a.is-hover::after { transform: translateX(8px); }
.deliver-row.is-hover h3 { color: var(--blue); transform: translateX(10px); }
.rel.is-hover img { transform: scale(1.07); }
.shot.is-hover img { transform: scale(1.04); }
@media (hover: none) {
  .marq-track img { filter: none; opacity: 1; }
}

@media (max-width: 960px) {
  /* abertura da home: a peça 3D gira e a palavra ao fundo desliza conforme a rolagem */
  .piece { margin: 120px auto 130px; }
  .hero h1 { font-size: clamp(38px, 10.5vw, 60px); }

  /* cases: carrossel com profundidade, nome do cliente ao fundo e contador */
  .showcase:not(.sc-3d) .sc-pin { display: flex; flex-direction: column; }
  .showcase:not(.sc-3d) .sc-top { order: 1; margin-bottom: 8px; }
  .showcase:not(.sc-3d) .sc-word { order: 2; display: block; overflow: hidden; padding: 0 24px; margin-bottom: -4.5vw; pointer-events: none; }
  .showcase:not(.sc-3d) .sc-word span { font-size: min(var(--fs, 20vw), 21vw); opacity: .28; translate: calc((var(--rot, 0) - var(--idx, 0)) * -30vw) 0; }
  .showcase:not(.sc-3d) .sc-stage { order: 3; position: relative; }
  .showcase:not(.sc-3d) .sc-hud { order: 4; justify-content: space-between; align-items: center; padding: 0 24px; margin: 22px 0 0; }
  .showcase:not(.sc-3d) .sc-count { display: flex; align-items: baseline; gap: 6px; }
  .showcase:not(.sc-3d) .sc-count b { font-size: 46px; }
  .showcase:not(.sc-3d) .sc-count span { font-size: 12px; }
  .showcase:not(.sc-3d) .sc-ring { padding-top: 14px; padding-bottom: 14px; }
  .showcase:not(.sc-3d) .sc-media { will-change: transform; transition: box-shadow .4s ease; }
  .showcase:not(.sc-3d) .sc-card.on .sc-media { box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1.5px rgba(1,200,239,.7), 0 0 50px rgba(1,200,239,.28); }

  /* metodologias: linha que se preenche e etapa ativa conforme a rolagem */
  .ritmo-grid::before { background: rgba(255,255,255,.16); opacity: 1; }
  .ritmo-grid::after { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: linear-gradient(180deg, var(--blue), var(--cyan)); transform: scaleY(var(--prog, 0)); transform-origin: top; transition: transform .6s cubic-bezier(.6, 0, .2, 1); }
  .step { z-index: 1; }
  .step .letter { background: var(--navy); color: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), 0 0 0 8px var(--navy); transition: transform .4s ease, background .4s ease, color .4s ease, box-shadow .4s ease; }
  .step h3 { color: rgba(255,255,255,.6); transition: color .4s ease; }
  .step p { opacity: .5; transition: opacity .4s ease; }
  .step.done .letter { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: var(--white); box-shadow: 0 0 0 8px var(--navy); }
  .step.done h3 { color: var(--white); }
  .step.done p { opacity: .8; }
  .step.active .letter { background: var(--white); color: var(--navy); transform: scale(1.14); box-shadow: 0 0 0 8px var(--navy), 0 0 0 11px var(--cyan), 0 10px 30px rgba(1,200,239,.5); }
  .step.active h3 { color: var(--cyan); }
  .step.active p { opacity: 1; }
  .m-tabs { margin-bottom: 44px; }

  /* entregas dos serviços: o cartão ilustrado fica preso no topo e troca conforme a lista rola por baixo */
  .stage-view { position: sticky; top: 92px; z-index: 3; order: -1; }
  .stage-card { box-shadow: 0 24px 50px rgba(0,0,0,.7), 0 0 60px rgba(1,200,239,.16); transform: none; }
  .stage-item { padding: 20px 0; }
  .stage-item em { max-height: none; margin-top: 8px; opacity: .55; overflow: visible; transition: opacity .4s ease; }
  .stage-item.on em { max-height: none; opacity: 1; }
  .stage-item.on::before { animation: none; transform: scaleX(1); }
  .stage-list { padding-bottom: 30vh; }

  /* galeria do case: arraste com encaixe */
  .hs:not(.hs-on) .hs-track { scroll-snap-type: x mandatory; gap: 16px; }
  .hs:not(.hs-on) .hs-item, .hs:not(.hs-on) .hs-title { scroll-snap-align: center; }
  .hs-title p { font-size: clamp(40px, 13vw, 90px); }

  /* tabelas das páginas legais rolam dentro do próprio quadro */
  .legal table { display: block; overflow-x: auto; }
  .legal th, .legal td { min-width: 150px; }

  /* aviso de cookies mais baixo, para não tomar a tela */
  .cookie { padding: 16px 18px; border-radius: 18px; }
  .cookie b { margin-bottom: 4px; font-size: 15px; }
  .cookie p { font-size: 12.5px; line-height: 1.5; }
  .cookie div { margin-top: 12px; gap: 8px; }
  .cookie button { padding: 10px 16px; font-size: 13px; }

  /* páginas internas */
  .giant { margin-bottom: 14px; }
  .story-label b { font-size: 64px; }
  .deck-stage { height: 300px; }
  .svc-rows h2 { font-size: clamp(34px, 11vw, 60px); }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px 28px; padding: 0 24px 6px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { white-space: nowrap; }
  .kband { padding: 22px 0; }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .piece-3d { transform: rotateY(calc(-18deg + var(--p, 0) * 200deg)) rotateZ(calc(6deg - var(--p, 0) * 12deg)); }
  .layer.l1 { transform: translate3d(-8%, calc(-58% - var(--p, 0) * 14%), 46px); }
  .layer.l3 { transform: translate3d(8%, calc(58% + var(--p, 0) * 14%), -46px); }
}
@media (prefers-reduced-motion: reduce) {
  .ritmo-grid::after { transition: none; }
}

/* faixas de serviço no celular: nada passa da largura da tela */
.svc-rows a > div { min-width: 0; }
@media (max-width: 960px) {
  .svc-rows a { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 10px; padding: 26px 16px; }
  .svc-rows h2 { font-size: clamp(28px, 8.6vw, 44px); overflow-wrap: anywhere; }
  .svc-rows u { font-size: 26px; }
  .svc-rows a > div:nth-of-type(2) { grid-column: 2 / -1; }
}

/* Entregas: o cartão precisa de "clip" (e não "hidden") no fundo para conseguir ficar preso na tela; no celular a lista ocupa a largura toda */
.stage-sec { overflow: clip; }
@media (max-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stage-item { grid-template-columns: 34px minmax(0, 1fr); }
}

/* Números: painel azul-marinho com algarismos fortes, no mesmo peso visual do resto do site */
.nums { padding: 56px 0; border-bottom: 0; }
.nums ul { position: relative; isolation: isolate; overflow: hidden; gap: 0; padding: 48px 28px; border-radius: 28px; background: var(--navy); box-shadow: 0 30px 70px rgba(15,35,69,.22); }
.nums ul::before { content: ""; position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; right: -8%; top: -70%; border-radius: 50%; background: rgba(51,163,255,.45); filter: blur(80px); animation: drift 14s ease-in-out infinite alternate; }
.nums li { padding: 6px 28px; border-left: 1px solid rgba(255,255,255,.16); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.nums li:first-child { border-left: 0; }
.nums li:hover { transform: translateY(-6px); }
.nums b { font-size: clamp(50px, 6vw, 86px); font-weight: 800; letter-spacing: -.05em; color: var(--white); }
.nums b i { font-weight: 300; color: var(--cyan); }
.nums p { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.72); }

/* Manifesto: frase mais leve, em duas vozes (abertura forte, complemento suave) */
.manifesto { padding: 96px 0; }
.manifesto p { max-width: 900px; font-size: clamp(24px, 3vw, 40px); font-weight: 500; line-height: 1.32; letter-spacing: -.02em; }
.manifesto p span { opacity: .22; }
.manifesto p span.lit { opacity: 1; }
.manifesto p span.forte { font-weight: 800; color: var(--blue); }

@media (max-width: 960px) {
  .nums ul { padding: 34px 10px; gap: 30px 0; }
  .nums li { padding: 0 20px; }
  .nums li:nth-child(odd) { border-left: 0; }
  .manifesto { padding: 72px 0; }
}
@media (prefers-reduced-motion: reduce) { .nums ul::before { animation: none; } }

/* telas de trabalho das entregas: cada uma fica o tempo de uma animação completa (9 s) */
.stage-item.on::before { animation-duration: 9s; }
.sv.vid > svg { width: 100%; height: 100%; }

/* Números, ponto de equilíbrio: painel claro, algarismos em peso médio (nem fino demais, nem pesado) */
.nums ul { background: var(--soft); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(15,35,69,.07); padding: 40px 28px; }
.nums ul::before { background: rgba(51,163,255,.22); }
.nums li { border-left-color: var(--line); }
.nums b { font-size: clamp(42px, 4.8vw, 68px); font-weight: 600; letter-spacing: -.04em; color: var(--navy); }
.nums b i { font-weight: 300; color: var(--blue); }
.nums p { color: var(--gray); }

/* Números, versão final: sem painel nem fundo em degradê. Algarismos no degradê da marca, com um fio que se desenha no topo de cada coluna */
.nums { padding: 72px 0 64px; }
.nums ul { overflow: visible; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.nums ul::before { content: none; }
.nums li { position: relative; padding: 30px 28px 4px; border-left: 0; }
.nums li::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; background: var(--line); }
.nums li::after { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .25s; }
.nums li.in::after { transform: scaleX(.34); }
.nums li:hover::after { transform: scaleX(1); transition-delay: 0s; transition-duration: .6s; }
.nums li:first-child { padding-left: 0; } .nums li:first-child::before, .nums li:first-child::after { left: 0; }
.nums b { display: inline-block; padding-right: .06em; font-size: clamp(52px, 6vw, 88px); font-weight: 700; letter-spacing: -.045em; color: transparent; background: linear-gradient(100deg, var(--navy) 10%, var(--blue) 70%, var(--cyan)); -webkit-background-clip: text; background-clip: text; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.nums b i { font-weight: 300; color: var(--cyan); -webkit-text-fill-color: var(--cyan); }
.nums li:hover b { transform: translateY(-6px); }
.nums li:hover { transform: none; }
.nums p { margin-top: 14px; color: var(--ink); }
@media (max-width: 960px) {
  .nums ul { gap: 34px 0; padding: 0; }
  .nums li, .nums li:first-child { padding: 24px 16px 0 0; }
  .nums li::before, .nums li::after { left: 0; right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .nums li::after { transition: none; } }

/* Números em formato paralelo: algarismo + palavra em todas as colunas, para nenhuma parecer menor que a outra.
   O degradê corre de cima para baixo, então todos os algarismos têm exatamente a mesma cor, com um ou dois dígitos. */
.nums li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
.nums b { background: linear-gradient(180deg, var(--blue) 8%, var(--navy) 92%); -webkit-background-clip: text; background-clip: text; padding-right: 0; }
.nums b i { font-size: .5em; font-weight: 400; vertical-align: .62em; margin-right: .06em; }
.nums em { font-style: normal; font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.nums p { grid-column: 1 / -1; margin-top: 12px; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: none; line-height: 1.5; color: var(--gray); }
@media (max-width: 960px) { .nums li { column-gap: 8px; } .nums em { font-size: 18px; } }

/* Números: cada coluna é um bloco só. Algarismo à esquerda; à direita, a palavra e o complemento empilhados e colados um no outro */
.nums li { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 16px; row-gap: 0; }
.nums b { grid-row: 1 / 3; }
.nums em { align-self: end; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; }
.nums p { grid-column: 2; align-self: start; margin-top: 4px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; color: var(--gray); }
@media (max-width: 960px) { .nums li { column-gap: 10px; } .nums em { font-size: 19px; } .nums p { font-size: 15px; } }
.nums p, .nums em { white-space: nowrap; }

/* Números: o mesmo respiro acima e abaixo do bloco. Quando a frase de posicionamento vem em seguida (mesmo fundo branco), o espaço de baixo é dela */
.nums { padding: 80px 0; }
.nums:has(+ .manifesto) { padding-bottom: 0; }
.nums + .manifesto { padding-top: 80px; }
@media (max-width: 960px) { .nums { padding: 56px 0; } .nums + .manifesto { padding-top: 56px; } }

/* Radar: área de conteúdo */
.radar-list { border-bottom: 1px solid #D5DEEA; }
.post { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 28px; padding: 34px 24px; margin: 0 -24px; border-top: 1px solid #D5DEEA; border-radius: 18px; text-decoration: none; }
.post[hidden] { display: none; }
.post::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--navy), #1B4FA0); transform: translateY(101%); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.post:hover::before, .post.is-hover::before { transform: none; }
.post-meta { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7; color: var(--blue); }
.post-meta span { display: block; color: var(--gray); letter-spacing: .08em; }
.post h2 { font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: var(--navy); }
.post p { margin-top: 10px; max-width: 720px; font-size: 16px; color: var(--ink); }
.post em { display: block; margin-top: 12px; font-style: normal; font-size: 13px; color: var(--gray); }
.post u { justify-self: end; text-decoration: none; font-size: 30px; font-weight: 200; color: var(--cyan); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.post h2, .post p, .post em, .post-meta, .post-meta span { transition: color .35s ease; }
.post:hover h2, .post.is-hover h2 { color: var(--white); }
.post:hover p, .post.is-hover p { color: rgba(255,255,255,.88); }
.post:hover em, .post.is-hover em, .post:hover .post-meta span, .post.is-hover .post-meta span { color: rgba(255,255,255,.65); }
.post:hover .post-meta, .post.is-hover .post-meta { color: var(--cyan); }
.post:hover u, .post.is-hover u { transform: translateX(8px); }

/* Matéria: coluna estreita, de leitura fácil */
.art-hero { position: relative; overflow: hidden; padding: 72px 0 56px; background: #060D1D; color: var(--white); }
.art-hero .wrap, .art .wrap { max-width: 820px; }
.art-hero .wrap { position: relative; z-index: 1; }
.art-hero h1 { margin-top: 6px; font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; }
.art-tema { display: inline-block; padding: 6px 14px; border-radius: 99px; background: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.art-linha { margin-top: 22px; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: rgba(255,255,255,.84); }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); font-size: 14px; color: rgba(255,255,255,.7); }
.byline i { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-style: normal; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.byline b { display: block; font-size: 16px; color: var(--white); }
.byline span:last-child { margin-left: auto; text-align: right; }
.art { padding: 64px 0 96px; }
.resumo { margin-bottom: 44px; padding: 28px 32px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); }
.resumo b { display: block; margin-bottom: 12px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
.resumo ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.resumo li { font-size: 17px; line-height: 1.5; color: var(--navy); }
.art h2 { margin: 48px 0 14px; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.025em; color: var(--navy); }
.art p, .art li { font-size: 19px; line-height: 1.75; color: var(--ink); }
.art p + p { margin-top: 18px; }
.art ul, .art ol { margin: 16px 0 0; padding-left: 24px; display: grid; gap: 10px; }
.art a { color: var(--blue); }
.art blockquote { margin: 40px 0; padding-left: 26px; border-left: 4px solid var(--cyan); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--navy); }
.art .fontes { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.art .fontes p, .art .fontes li { font-size: 15px; color: var(--gray); }
@media (max-width: 960px) {
  .post { grid-template-columns: 1fr 30px; gap: 8px 14px; padding: 26px 16px; margin: 0 -16px; }
  .post-meta { grid-column: 1 / -1; }
  .post-meta span { display: inline; margin-left: 10px; }
  .byline span:last-child { display: none; }
  .art p, .art li { font-size: 18px; }
}

/* Matéria, ajuste de escala: tipografia menor e mais confortável para textos longos */
.art-hero h1 { font-size: clamp(28px, 3.6vw, 44px); }
.art-linha { font-size: clamp(17px, 1.5vw, 19px); }
.art { padding: 56px 0 88px; }
.art p, .art li { font-size: 17px; line-height: 1.75; }
.art h2 { margin: 44px 0 12px; font-size: clamp(22px, 2.2vw, 27px); }
.art blockquote { margin: 36px 0; font-size: clamp(20px, 2.1vw, 25px); }
.resumo { padding: 24px 28px; }
.resumo li { font-size: 16px; }
.art table { width: 100%; margin: 20px 0 22px; border-collapse: collapse; font-size: 16px; }
.art th, .art td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink); }
.art th { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
/* a chamada no fim da matéria é um bloco escuro: os estilos do texto corrido não valem dentro dela */
.art .spot p { margin-top: 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); }
.art .spot h3 { color: var(--white); }
.art .spot a.btn { color: var(--white); }
@media (max-width: 960px) {
  .art p, .art li { font-size: 16.5px; }
  .art table { display: block; overflow-x: auto; }
  .art th, .art td { min-width: 130px; }
}

/* Contato: os três canais em cartões compactos, lado a lado (a versão em letras gigantes ficou desproporcional) */
.big-links { padding: 64px 0 88px; }
.big-links .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.big-links a { position: relative; isolation: isolate; overflow: hidden; display: block; padding: 30px 30px 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 10px 30px rgba(15,35,69,.06); transition: transform .4s ease, box-shadow .35s ease, border-color .35s ease; }
.big-links a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, var(--navy), #1B4FA0 70%, var(--blue)); transform: translateY(101%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.big-links a::after { content: "→"; position: absolute; right: 26px; top: 24px; font-size: 22px; font-weight: 300; color: var(--cyan); transition: transform .4s ease; }
.big-links span { display: block; font-size: 11px; letter-spacing: .22em; }
.big-links b { display: block; margin-top: 14px; font-size: clamp(18px, 1.7vw, 23px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.big-links a:hover, .big-links a.is-hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(15,35,69,.16); border-color: var(--cyan); }
.big-links a:hover::before, .big-links a.is-hover::before { transform: none; }
.big-links a:hover b, .big-links a.is-hover b { color: var(--white); transform: none; }
.big-links a:hover span, .big-links a.is-hover span { color: var(--cyan); }
.big-links a:hover::after, .big-links a.is-hover::after { transform: translateX(6px); }
@media (max-width: 960px) { .big-links .wrap { grid-template-columns: 1fr; gap: 14px; } .big-links a { padding: 24px; } }

/* Números de case (ex.: Econoweek) */
.case-nums { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 28px 0 8px; padding: 0; }
.case-nums li { padding: 22px 24px; border-radius: 18px; background: var(--navy); }
.case-nums b { display: block; font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--cyan); }
.case-nums span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.82); }
@media (max-width: 560px) { .case-nums { grid-template-columns: 1fr; } }
a.rel.ph-box { text-decoration: none; transition: transform .4s, border-color .4s; }
a.rel.ph-box:hover, a.rel.ph-box.is-hover { transform: translateY(-4px); border-color: var(--blue); }

/* Grade de thumbs (case Econoweek) */
.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.thumb-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; box-shadow: 0 16px 40px rgba(8,20,45,.2); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.thumb-grid img:hover { transform: scale(1.04) rotate(-1deg); }
@media (max-width: 760px) { .thumb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* E-book em três páginas (case Econoweek) */
.ebook-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 18px; align-items: center; padding: 34px; border-radius: 24px; background: var(--navy); color: var(--white); }
.ebook-row h3 { margin: 10px 0 12px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; color: var(--white); }
.ebook-row p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.8); }
.ebook-row img { width: 100%; border-radius: 14px; box-shadow: 0 20px 44px rgba(0,0,0,.45); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ebook-row img:nth-of-type(1) { transform: rotate(-3deg); }
.ebook-row img:nth-of-type(3) { transform: rotate(3deg); }
.ebook-row img:hover { transform: translateY(-8px) scale(1.03); }
@media (max-width: 760px) { .ebook-row { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 24px 18px; } .ebook-txt { grid-column: 1 / -1; } }

/* Amostra do e-book em celular 3D (case Econoweek) */
.ebook-demo { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; padding: 56px; border-radius: 28px; overflow: hidden; color: var(--white);
  background: radial-gradient(520px circle at 78% 45%, rgba(1,200,239,.26), transparent 62%), radial-gradient(420px circle at 12% 110%, rgba(51,163,255,.25), transparent 60%), var(--navy); }
.ebook-demo h3 { margin: 10px 0 12px; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.025em; color: var(--white); }
.ebook-demo p { max-width: 420px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); }
.ebook-demo small { display: block; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.55); }
.ed-ctrl { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.ed-ctrl button { width: 48px; height: 48px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 50%; background: none; color: var(--white); font-size: 20px; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.ed-ctrl button:hover { background: var(--blue); border-color: var(--blue); transform: scale(1.08); }
.ed-count { font-size: 14px; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.ed-count b { font-size: 22px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ed-bars { display: flex; gap: 6px; max-width: 320px; margin-top: 20px; }
.ed-bars i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); transition: background .35s; }
.ed-bars i.on { background: var(--cyan); }
.ed-stage { perspective: 1300px; padding: 10px 34px; }
.ed-phone { position: relative; width: min(290px, 66vw); padding: 10px; border-radius: 46px; background: linear-gradient(145deg, #3A4C73, #05080F 38%, #0B1220 70%, #2A3A5C);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), 0 50px 90px rgba(0,0,0,.6), 0 0 70px rgba(1,200,239,.28);
  transform: rotateY(calc(var(--ry, -14) * 1deg)) rotateX(calc(var(--rx, 5) * 1deg)) rotateZ(2deg); transition: transform .35s ease-out; animation: edfloat 6s ease-in-out infinite alternate; }
@keyframes edfloat { from { translate: 0 -8px; } to { translate: 0 8px; } }
.ed-phone::before, .ed-phone::after { content: ""; position: absolute; width: 4px; border-radius: 3px; background: #1B2740; }
.ed-phone::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 54px 0 #1B2740; }
.ed-phone::after { right: -3px; top: 28%; height: 13%; }
.ed-screen { display: flex; aspect-ratio: 9 / 16; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 37px; background: #000; cursor: pointer; outline: none; }
.ed-screen::-webkit-scrollbar { display: none; }
.ed-screen:focus-visible { box-shadow: 0 0 0 3px var(--cyan); }
.ed-screen img { flex: 0 0 100%; width: 100%; height: 100%; max-width: none; object-fit: cover; scroll-snap-align: start; user-select: none; }
.ed-island { position: absolute; top: 19px; left: 50%; z-index: 2; width: 78px; height: 21px; border-radius: 20px; background: #000; translate: -50%; }
.ed-glare { position: absolute; inset: 10px; z-index: 2; border-radius: 37px; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.08) 100%); }
@media (max-width: 860px) {
  .ebook-demo { grid-template-columns: 1fr; gap: 34px; padding: 34px 22px 44px; }
  .ed-stage { padding: 0; display: grid; justify-items: center; }
  .ed-bars { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .ed-phone { animation: none; transition: none; } }

/* Prancha vertical de identidade (case Picolé) */
.shot.board { max-width: 760px; margin-inline: auto; }
.shot.board:hover img { transform: none; }

.case-nums b { white-space: nowrap; }

/* Capas de Reels em formato de tela (case Econoweek) */
.reel-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.reel-row a { display: block; overflow: hidden; border-radius: 16px; box-shadow: 0 16px 40px rgba(8,20,45,.22); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.reel-row a:nth-child(odd) { transform: translateY(14px); }
.reel-row a:hover { transform: translateY(-6px) scale(1.04); }
.reel-row img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.reel-note { margin-top: 12px; font-size: 14px; color: var(--gray); text-align: center; }
.reel-note a { color: var(--blue); font-weight: 600; }
@media (max-width: 760px) { .reel-row { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
/* capa clara (Picolé): escurece um pouco mais para o título continuar legível */
.page-hero .bg img[src*="picole/capa"] { filter: brightness(.32) saturate(1.15); }

/* Mockup de site em janela de navegador (case Keyflex) */
.browser { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 40px 90px rgba(8,20,45,.3), 0 0 0 1px rgba(15,35,69,.08); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.browser:hover { transform: perspective(1400px) rotateX(2deg) translateY(-6px); }
.br-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #E9EEF5; }
.br-bar i { width: 11px; height: 11px; border-radius: 50%; background: #C3CDDB; }
.br-bar i:first-child { background: #FF6B5E; } .br-bar i:nth-child(2) { background: #FFC24A; } .br-bar i:nth-child(3) { background: #3DCB6C; }
.br-bar span { flex: 1; max-width: 420px; margin-left: 14px; padding: 6px 16px; border-radius: 999px; background: #fff; font-size: 13px; color: var(--gray); }
.br-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 4.5%; background: #0A2A66; }
.br-nav img { width: 18%; min-width: 96px; }
.br-nav ul { display: flex; gap: 2.4vw; margin: 0; padding: 0; list-style: none; font-size: clamp(10px, 1.1vw, 14px); font-weight: 600; color: #fff; }
.br-hero { display: block; width: 100%; }
.br-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; padding: 4% 4.5% 5%; background: #fff; }
.br-row figure { margin: 0; text-align: center; }
.br-row img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.br-row figcaption { margin-top: 10px; font-size: clamp(11px, 1.2vw, 15px); font-weight: 700; color: #0A2A66; }
.kf-duo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: stretch; }
.kf-duo .shot img { height: 100%; object-fit: cover; }
.kf-card { margin: 0; display: grid; place-items: center; padding: 24px; border-radius: 24px; background: var(--soft, #EEF3F9); }
.kf-card img { width: 100%; }
@media (max-width: 760px) { .kf-duo { grid-template-columns: 1fr; } .br-nav ul { gap: 12px; } }
/* capa da Keyflex nos cartões: mostra o produto, que fica à direita do banner */
img[src*="keyflex/capa"] { object-position: 50% 50%; background: #0A2A66; }
.page-hero .bg img[src*="keyflex/hero"] { object-position: 70% 40%; filter: brightness(.4) saturate(1.1); }

/* Radar: exemplo visual dentro da matéria. Desenhos em SVG que se animam quando entram na tela (.in vem do data-rv). */
.fig { margin: 44px 0; padding: 30px 30px 24px; border-radius: 24px; background: radial-gradient(520px circle at 85% 0%, rgba(1,200,239,.18), transparent 60%), var(--navy); }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig svg text { font-family: Montserrat, sans-serif; }
.fig figcaption { margin-top: 18px; font-size: 14px; line-height: 1.5; text-align: center; color: rgba(255,255,255,.72); }
.fig [data-a] { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fig.in [data-a="pop"] { animation: figpop .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--i, 0) * .16s); }
.fig.in [data-a="up"] { animation: figup .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--i, 0) * .16s); }
.fig.in [data-a="draw"] { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: figdraw 1.4s ease-out forwards; animation-delay: calc(.3s + var(--i, 0) * .16s); }
.fig [data-l="float"] { animation: figfloat 4s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.7s); }
.fig [data-l="pulse"] { transform-box: fill-box; transform-origin: center; animation: figpulse 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
@keyframes figpop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes figup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes figdraw { to { stroke-dashoffset: 0; } }
@keyframes figfloat { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
@keyframes figpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }
@media (max-width: 640px) { .fig { padding: 20px 14px 18px; margin: 34px -6px; } }
@media (prefers-reduced-motion: reduce) { .fig [data-a] { opacity: 1; animation: none !important; stroke-dashoffset: 0 !important; } .fig [data-l] { animation: none; } }

/* Cases: o que o projeto ensina (no lugar de depoimento) */
.learn-t { margin-top: 36px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.story-body .learn { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 0; padding: 0; }
.story-body .learn li { padding: 22px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); transition: transform .4s cubic-bezier(.2, .7, .2, 1), border-color .4s; }
.story-body .learn li:hover { transform: translateY(-5px); border-color: var(--blue); }
.learn b { display: block; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; color: var(--navy); }
.learn span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--gray); }
@media (max-width: 860px) { .story-body .learn { grid-template-columns: 1fr; } }

/* Keyflex: landing page que rola dentro da moldura e anúncios */
.kf-lp { display: grid; grid-template-columns: 1fr 1.25fr; gap: 44px; align-items: center; padding: 44px; border-radius: 28px; background: var(--navy); color: var(--white); }
.kf-lp h3 { margin: 10px 0 12px; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.02em; color: var(--white); }
.kf-lp p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); }
.lp-frame { height: 460px; overflow: hidden; border-radius: 16px; border: 8px solid #0B1730; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 60px rgba(1,200,239,.2); outline: none; }
.lp-frame img { display: block; width: 100%; transition: transform 9s cubic-bezier(.3, 0, .2, 1); }
.lp-frame:hover img, .lp-frame:focus img, .lp-frame.is-hover img { transform: translateY(calc(-100% + 444px)); }
.ads-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ads-row img { width: 100%; border-radius: 16px; box-shadow: 0 16px 40px rgba(8,20,45,.2); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ads-row img:hover { transform: translateY(-6px) scale(1.03); }
@media (max-width: 860px) { .kf-lp { grid-template-columns: 1fr; padding: 28px 20px; gap: 26px; } .lp-frame { height: 380px; } .lp-frame:hover img, .lp-frame:focus img, .lp-frame.is-hover img { transform: translateY(calc(-100% + 364px)); } .ads-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Sobre: as duas sócias */
.socias { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 36px 0 0; padding: 0; }
.socias li { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 18px; background: var(--navy); }
.socias i { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-style: normal; font-weight: 800; font-size: 17px; color: var(--white); }
.socias span { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.75); }
.socias b { display: block; font-size: 18px; color: var(--white); }
@media (max-width: 760px) { .socias { grid-template-columns: 1fr; } }

/* "No seu negócio": o bloco dos cases passa a falar com o futuro cliente, em cartões escuros numerados */
.learn-t { margin-top: 44px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.025em; text-transform: none; color: var(--navy); }
.story-body .learn { counter-reset: neg; gap: 16px; margin-top: 20px; }
.story-body .learn li { counter-increment: neg; position: relative; padding: 58px 24px 26px; border: 0; background: var(--navy); overflow: hidden; }
.story-body .learn li::before { content: "0" counter(neg); position: absolute; top: 20px; left: 24px; font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--cyan); }
.story-body .learn li::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(1,200,239,.35), transparent 70%); transition: transform .5s; }
.story-body .learn li:hover { transform: translateY(-6px); }
.story-body .learn li:hover::after { transform: scale(1.6); }
.story-body .learn b { font-size: 19px; line-height: 1.22; color: var(--white); }
.story-body .learn span { margin-top: 12px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.8); }

/* Escala de texto (10/10/2026): corpo entre 16 e 18 px, abertura de bloco até 20 px, títulos de seção até 44 px.
   Antes, o texto dos cases chegava a 26 px e o título final a 60 px, grandes demais em monitor largo. */
.story-body p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; max-width: 62ch; }
.story-body p:first-of-type { font-size: clamp(18px, 1.45vw, 20px); line-height: 1.6; }
.story-body p + p { font-size: clamp(16px, 1.25vw, 18px); }
.story-label h2 { font-size: clamp(26px, 2.8vw, 38px); }
.deck3d h2 { font-size: clamp(28px, 3.2vw, 42px); }
.deliver-row h3 { font-size: clamp(22px, 2.4vw, 32px); }
.final h2 { font-size: clamp(28px, 3.6vw, 44px); }
.final p { font-size: 17px; }
.sec-head h2 { font-size: clamp(28px, 3.4vw, 42px); }
.about h2 { font-size: clamp(28px, 3.4vw, 42px); }
.quote-grid .quote blockquote { font-size: clamp(17px, 1.5vw, 20px); }
.art blockquote { font-size: clamp(19px, 1.9vw, 23px); }

/* Celular estreito: nos números, o algarismo fica em cima e as palavras embaixo, para nada passar da largura da tela */
@media (max-width: 560px) {
  .nums ul { gap: 28px 12px; }
  .nums li { grid-template-columns: 1fr; padding-left: 14px; }
  .nums b { grid-row: auto; font-size: 50px; }
  .nums em { font-size: 17px; margin-top: 6px; }
  .nums p { grid-column: 1; font-size: 14px; }
}

/* Notebook pequeno e tablet deitado (961 a 1100 px): números mais compactos; e trava geral contra rolagem lateral */
@media (min-width: 961px) and (max-width: 1100px) {
  .nums ul { gap: 18px; }
  .nums li { padding-left: 14px; column-gap: 10px; }
  .nums b { font-size: 60px; }
  .nums em { font-size: 19px; }
  .nums p { font-size: 14px; }
}
body { overflow-x: clip; }