/* Páginas de serviço da Valen Growth. Mesmos tokens da home, sem as cenas pesadas de scroll: carregam rápido. */
:root {
  --azul: #0F3D91;
  --azul-vivo: #2563D9;
  --navy: #0F2747;
  --navy-2: #0A1B33;
  --off: #F7F8FA;
  --cinza: #D9DEE6;
  --ink: #111A2B;
  --muted: #5A6478;
  --line: #E2E7EF;
  --card: #FFFFFF;
  --tint: #EAF0FA;
  --ok: #1E9E62;
  --bad: #C8373D;
  --wa: #25D366;
  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 18px;
  color-scheme: light;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--off); color: var(--ink); font: 400 16px/1.65 var(--display); -webkit-font-smoothing: antialiased; overflow-x: clip }
img, video { max-width: 100%; display: block; height: auto }
a { color: inherit }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.02em; line-height: 1.1 }
p { margin: 0 }
:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 3px; border-radius: 6px }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) }
.band { padding-block: clamp(64px, 9vw, 112px) }
.band.tight { padding-block: clamp(48px, 6vw, 72px) }
.dark { background: var(--navy); color: #fff }
.white { background: #fff }
.eyebrow { font: 600 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--azul); display: inline-flex; align-items: center; gap: 12px }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none }
.dark .eyebrow { color: #7FA6F0 }
.h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 700; margin-top: 16px }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 62ch; margin-top: 16px }
.dark .lead { color: #B9C6DD }
.hl { color: var(--azul-vivo) }
.dark .hl { color: #6E9BF5 }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; font: 700 15px var(--display); text-decoration: none; border: 0; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s }
.btn:hover { transform: translateY(-2px) }
.btn-primary { background: var(--azul); color: #fff; box-shadow: 0 12px 28px -12px rgba(15,61,145,.7) }
.btn-primary:hover { background: #0C3279 }
.btn-wa { background: var(--wa); color: #06331A; box-shadow: 0 12px 28px -12px rgba(37,211,102,.7) }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cinza) }
.dark .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25) }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(247,248,250,.9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line) }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px }
.nav img { height: 20px; width: auto }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font-size: 14.5px; font-weight: 500 }
.nav ul a { text-decoration: none; color: #3A4458 }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--azul) }
.nav .btn { padding: 11px 18px; font-size: 14px }
@media (max-width: 900px) { .nav ul { display: none } }

/* breadcrumb */
.crumbs { font-size: 13px; color: var(--muted); padding-top: 22px }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: #9AA4B6 }
.crumbs a { text-decoration: none }
.crumbs a:hover { color: var(--azul) }

/* hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 72px) clamp(64px, 8vw, 104px) }
.hero-sweep { position: absolute; right: -10%; top: -10%; width: 60%; height: 130%; z-index: 0; pointer-events: none }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center }
.hero h1 { font-size: clamp(34px, 5.4vw, 64px); font-weight: 800; letter-spacing: -.035em; margin-top: 20px }
.hero h1 .hl { color: var(--azul-vivo) }
.proof { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: 14px; color: var(--muted) }
.proof b { color: var(--ink) }
.stars { color: #F2B01E; letter-spacing: 2px }
.hero-card { background: #fff; border-radius: 24px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 40px 80px -40px rgba(15,39,71,.45), 0 0 0 1px var(--line) }
.hero-card h2 { font-size: 18px; font-weight: 700 }
.hero-card ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px }
.hero-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px }
.hero-card li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3D91' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat }
.hero-card .foot { border-top: 1px dashed var(--line); margin-top: 20px; padding-top: 16px; font-size: 13.5px; color: var(--muted) }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) } .hero-sweep { width: 120%; right: -70%; opacity: .5 } }

/* sinais (pra quem é) */
.signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 40px }
.sign { background: #fff; border-radius: var(--r); padding: 22px 24px; box-shadow: 0 0 0 1px var(--line); font-size: 15.5px }
.sign b { display: block; font-size: 17px; margin-bottom: 6px }
.sign small { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--bad); display: block; margin-bottom: 10px }

/* incluso */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 44px }
.card { background: #fff; border-radius: var(--r); padding: 26px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s, transform .25s }
.card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(15,39,71,.45), 0 0 0 1px var(--line) }
.card .n { font: 700 12px var(--mono); color: var(--azul-vivo); letter-spacing: .12em }
.card h3 { font-size: 19px; font-weight: 700; margin-top: 10px }
.card p { color: var(--muted); font-size: 15px; margin-top: 8px }
.dark .card { background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px rgba(255,255,255,.1) }
.dark .card p { color: #B9C6DD }

/* passos */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 44px; list-style: none; padding: 0 }
.steps li { counter-increment: s; position: relative; padding: 26px 24px 24px; border-radius: var(--r); background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px rgba(255,255,255,.1) }
.steps li::before { content: counter(s, decimal-leading-zero); font: 700 32px/1 var(--display); color: #6E9BF5; display: block; margin-bottom: 14px }
.steps b { font-size: 18px; display: block }
.steps p { color: #B9C6DD; font-size: 15px; margin-top: 6px }
.steps small { display: block; font: 600 11px var(--mono); letter-spacing: .12em; color: #7FA6F0; margin-top: 12px }

/* portfólio: carrossel de sites */
.port { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 44px }
.port figure { margin: 0; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 1px var(--line) }
.port img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; border-bottom: 1px solid var(--line) }
.port figcaption { padding: 14px 18px 16px; font-size: 14px; color: var(--muted) }
.port figcaption b { display: block; color: var(--ink); font-size: 15.5px }
/* carrossel de sites: celulares em 3D, o do meio rola o site sozinho */
.cf-band { background: radial-gradient(90% 70% at 50% 60%, #143466 0%, var(--navy) 45%, var(--navy-2) 100%); color: #fff; overflow: hidden }
.cf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 48px }
.cf-head .lead { max-width: 44ch }
.cf { --w: clamp(210px, 17vw, 262px); --gap: calc(var(--w) * .92); position: relative; height: calc(var(--w) * 2.16 + 70px); margin-top: clamp(36px, 5vw, 60px); perspective: 1600px; outline: none; touch-action: pan-y }
.cf-track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d }
.cf-card { --o: 0; --a: 0; position: absolute; left: 50%; top: 34px; width: var(--w); margin-left: calc(var(--w) / -2); cursor: pointer;
  transform: translateX(calc(var(--o) * var(--gap))) translateZ(calc(var(--a) * -170px)) rotateY(calc(var(--o) * -24deg)) scale(calc(1 - var(--a) * .04));
  opacity: calc(1 - var(--a) * .28); filter: brightness(calc(1 - var(--a) * .22)); transition: transform .7s cubic-bezier(.22,.8,.24,1), opacity .5s, filter .5s; will-change: transform }
.cf-card.far { opacity: 0; pointer-events: none }
.cf-card.on { cursor: default; z-index: 2 }
.cf-scr { aspect-ratio: 390 / 844; border-radius: 28px; overflow: hidden; background: #0A1220; container-type: size;
  box-shadow: 0 0 0 7px #0A1220, 0 0 0 8px rgba(255,255,255,.14), 0 50px 90px -30px rgba(0,0,0,.85) }
.cf-card.on .cf-scr { box-shadow: 0 0 0 7px #0A1220, 0 0 0 9px #6E9BF5, 0 60px 110px -30px rgba(37,99,217,.55) }
.cf-scr img { width: 100%; max-width: none }
.cf-card.rola.on .cf-scr img { animation: cf-rola 26s cubic-bezier(.45,0,.55,1) 1.2s infinite alternate }
@keyframes cf-rola { 0%, 5% { translate: 0 0 } 95%, 100% { translate: 0 calc(-100% + 100cqh) } }
.cf-card.deitado .cf-scr img { height: 100%; object-fit: cover; object-position: left top }
.cf-tag { position: absolute; top: -34px; left: 0; display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #B9C6DD; white-space: nowrap; transition: opacity .4s }
.cf-tag i { width: 6px; height: 6px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 3px rgba(61,220,151,.18) }
.cf-card:not(.on) .cf-tag { opacity: 0 }
.cf-bar { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 40px); margin-top: 8px }
.cf-info { text-align: center; min-width: 0; width: min(420px, 60vw) }
.cf-count { display: block; font: 700 12px var(--mono); color: #6E9BF5; letter-spacing: .14em }
.cf-name { display: block; font-size: clamp(19px, 2vw, 23px); margin-top: 4px }
.cf-seg { color: #B9C6DD; font-size: 14.5px }
.cf-nav { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; font-size: 19px; cursor: pointer; transition: background .2s, transform .2s }
.cf-nav:hover { background: rgba(255,255,255,.16); transform: scale(1.06) }
.cf-cta { display: flex; justify-content: center; margin-top: 22px; min-height: 52px }
.cf-go[hidden] { display: none }
@media (max-width: 640px) { .cf { --w: 62vw; --gap: calc(var(--w) * .78) } .cf-nav { width: 44px; height: 44px } }
@media (prefers-reduced-motion: reduce) { .cf-card { transition: none } .cf-card.rola.on .cf-scr img { animation: none } }

/* texto longo (guia) */
.guide { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start }
.guide aside { position: sticky; top: 96px }
.guide aside ol { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; font-size: 14px }
.guide aside a { text-decoration: none; color: var(--muted) }
.guide aside a:hover { color: var(--azul) }
.prose { max-width: 70ch }
.prose h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 48px 0 14px; scroll-margin-top: 96px }
.prose h2:first-child { margin-top: 0 }
.prose h3 { font-size: 19px; font-weight: 700; margin: 26px 0 8px }
.prose p, .prose li { color: #3A4458; font-size: 16.5px }
.prose p + p { margin-top: 14px }
.prose ul { padding-left: 20px; margin: 14px 0 0; display: grid; gap: 8px }
.prose strong { color: var(--ink) }
.prose ul + p { margin-top: 14px }
.prose .note { background: var(--tint); border-left: 3px solid var(--azul); border-radius: 0 12px 12px 0; padding: 16px 20px; margin-top: 20px; font-size: 15.5px }
@media (max-width: 900px) { .guide { grid-template-columns: minmax(0, 1fr) } .guide aside { position: static } }

/* região */
.region { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 40px }
.region > div { border-radius: var(--r); padding: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line) }
.region h3 { font-size: 20px; font-weight: 700 }
.region p { color: var(--muted); margin-top: 8px; font-size: 15.5px }
.cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.cities span { font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 99px; background: var(--tint); color: var(--azul) }
@media (max-width: 760px) { .region { grid-template-columns: minmax(0, 1fr) } }

/* depoimentos */
.revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 40px }
.rv { background: #fff; border-radius: var(--r); padding: 26px; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 18px }
.rv blockquote { margin: 0; font-size: 16px; color: #2A3346 }
.rv .who { display: flex; gap: 12px; align-items: center; font-size: 14px }
.rv .who small { display: block; color: var(--muted) }
.av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none }

/* faq */
.faq { margin-top: 36px; display: grid; gap: 12px; max-width: 860px }
.faq details { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); padding: 4px 22px }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; font-size: 16.5px; display: flex; justify-content: space-between; gap: 16px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font-weight: 500; font-size: 22px; line-height: 1; color: var(--azul) }
.faq details[open] summary::after { content: "−" }
.faq details p { color: var(--muted); padding-bottom: 18px; font-size: 15.5px }

/* outras frentes */
.others { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 36px }
.others a { display: block; text-decoration: none; background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s }
.others a:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(15,39,71,.5), 0 0 0 1px var(--azul-vivo) }
.others small { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--azul-vivo) }
.others b { display: block; font-size: 17px; margin-top: 6px }
.others span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px }

/* cta final */
.cta { text-align: center; position: relative; overflow: hidden }
.cta h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; margin-top: 16px }
.cta .lead { margin-inline: auto }
.cta .cta-row { justify-content: center }
.cta-sweep { position: absolute; inset: auto 0 0; width: 100%; height: 60%; pointer-events: none }
.cta .wrap { position: relative }

/* social media: perfis */
.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 44px }
.profile { all: unset; cursor: pointer; display: block; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: transform .25s, box-shadow .25s }
.profile:hover, .profile:focus-visible { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(15,39,71,.5), 0 0 0 1px var(--azul-vivo) }
.profile img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; width: 100% }
.profile .pi { display: block; padding: 14px 18px 16px; font-size: 14px; color: var(--muted) }
.profile .pi b { display: block; color: var(--ink); font-size: 15.5px }
.profile .pi em { font-style: normal; color: var(--azul-vivo); font-weight: 700; font-size: 13px; display: block; margin-top: 8px }
dialog.case { border: 0; padding: 0; border-radius: 24px; width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 48px); box-shadow: 0 60px 120px -40px rgba(10,27,51,.6) }
dialog.case::backdrop { background: rgba(10,27,51,.6); backdrop-filter: blur(4px) }
dialog.case .in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) }
dialog.case .in > img { width: 100%; height: 100%; object-fit: contain; object-position: top; background: var(--navy-2) }
dialog.case .tx { padding: 48px 28px 30px; overflow: auto }
dialog.case h3 { font-size: 22px; font-weight: 700; margin-top: 10px }
dialog.case p { color: var(--muted); margin-top: 12px; font-size: 15.5px }
dialog.case ul { padding-left: 18px; color: #3A4458; font-size: 15px; display: grid; gap: 6px; margin: 14px 0 0 }
dialog.case .x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 20px; cursor: pointer; box-shadow: 0 0 0 1px var(--line) }
dialog.case .tx a { margin-top: 20px }
@media (max-width: 680px) { dialog.case .in { grid-template-columns: minmax(0, 1fr) } dialog.case .in > img { max-height: 320px } }
.reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; max-width: 760px }
.reels figure { margin: 0 }
.reels video { aspect-ratio: 9 / 16; width: 100%; object-fit: cover; border-radius: 16px; background: #000 }
.reels figcaption { font-size: 13px; color: #B9C6DD; margin-top: 8px }

/* exemplo de conversa (IA) */
.chat { background: #E9E2D8; border-radius: 22px; padding: 18px; display: grid; gap: 8px; font-size: 14.5px; box-shadow: 0 40px 80px -40px rgba(15,39,71,.45) }
.chat .t { justify-self: center; font: 600 11px var(--mono); color: #6B5F4E; background: rgba(255,255,255,.6); padding: 4px 10px; border-radius: 8px }
.chat .m { max-width: 84%; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08) }
.chat .m.me { justify-self: end; background: #D9FDD3 }
.chat .m small { display: block; text-align: right; font-size: 11px; color: #7A8290; margin-top: 2px }

/* reveal */
.js .rv-in { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s }
.rv-in.on { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .rv-in { opacity: 1; transform: none; transition: none } .btn:hover, .card:hover, .port figure:hover { transform: none } html { scroll-behavior: auto } }

/* whatsapp flutuante */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); display: grid; place-items: center; box-shadow: 0 16px 36px -12px rgba(37,211,102,.8) }
.wa-float svg { width: 28px; height: 28px }

/* footer */
footer { background: var(--navy-2); color: #8EA0C0; font-size: 13.5px; padding-block: 40px }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center }
footer img { height: 18px; width: auto }
footer .foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; width: 100%; order: 3; border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px }
footer .foot-links a { color: #B9C6DD; text-decoration: none }
footer .foot-links a:hover { color: #fff }
.cities.br span { background: var(--navy); color: #fff }

/* blog */
.post-head { padding-block: clamp(28px, 5vw, 56px) clamp(32px, 5vw, 56px) }
.post-head h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; max-width: 22ch; margin-top: 16px }
.post-meta { margin-top: 20px; font-size: 14px; color: var(--muted) }
.post-meta b { color: var(--ink) }
.post-body { padding-top: clamp(40px, 6vw, 72px) }
.prose ol { padding-left: 22px; margin: 14px 0 0; display: grid; gap: 8px }
.prose ol + p { margin-top: 14px }
.prose a:not(.btn) { color: var(--azul); font-weight: 600 }
.prose h3 + p { margin-top: 0 }
.tbl { overflow-x: auto; margin-top: 18px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line) }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px }
.tbl th { background: var(--navy); color: #fff; text-align: left; font-weight: 600; padding: 12px 16px }
.tbl td { padding: 12px 16px; border-top: 1px solid var(--line); color: #3A4458; vertical-align: top }
.tbl tr:nth-child(even) td { background: var(--off) }
.tbl + p, .note + p { margin-top: 16px }
.post-cta { margin: 44px 0 8px; padding: 26px 28px; border-radius: var(--r); background: linear-gradient(135deg, var(--navy) 0%, var(--azul) 100%); color: #fff }
.post-cta b { font-size: 20px; display: block }
.post-cta p { color: #D2DCEE !important; margin: 8px 0 18px !important }
.post-cta .btn { margin: 4px 8px 0 0 }
.post-cta .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4) }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 28px }
.post-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; background: #fff; border-radius: var(--r); padding: 24px; box-shadow: 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(15,39,71,.5), 0 0 0 1px var(--azul-vivo) }
.post-card small { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--azul-vivo) }
.post-card b { font-size: 18.5px; line-height: 1.3 }
.post-card span { color: var(--muted); font-size: 14.5px; flex: 1 }
.post-card em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--azul); margin-top: 6px }
.post-cat { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; margin-top: 56px }
.post-cat:first-child { margin-top: 0 }