/* ════════════════════════════════════════════════════════════════
   ONDA · PADRÃO VISUAL DAS PÁGINAS INTERNAS
   Mesmo sistema tipográfico/UI da home nova e de Sistemas & Apps.
   Carregado DEPOIS de style.css e dos <style> inline → vence.
   Não remove conteúdo: só reestiliza.
   ════════════════════════════════════════════════════════════════ */

/* ── Fontes locais (mesmos arquivos da home /novo) ───────────────── */
@font-face{font-family:'Unbounded';src:url('/novo/fonts/unbounded-latin-300-normal.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Unbounded';src:url('/novo/fonts/unbounded-latin-500-normal.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Unbounded';src:url('/novo/fonts/unbounded-latin-700-normal.woff2') format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'Unbounded';src:url('/novo/fonts/unbounded-latin-800-normal.woff2') format('woff2');font-weight:800 900;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('/novo/fonts/bricolage-grotesque-latin-400-normal.woff2') format('woff2');font-weight:300 400;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('/novo/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('/novo/fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2');font-weight:600 800;font-display:swap}

:root{
  --op-ink:#020b1c; --op-ink2:#041633; --op-blue:#1CA3E0; --op-foam:#EAF6FF;
  --op-yellow:#F3E91E; --op-muted:rgba(234,246,255,.68); --op-line:rgba(234,246,255,.14);
  --op-glass:rgba(4,22,52,.5);
  --op-text:#020b1c; --op-text2:#4a5a74; --op-line-l:rgba(2,11,28,.09); --op-soft:#f4f7fb;
  --op-title:'Unbounded',system-ui,sans-serif; --op-body:'Bricolage Grotesque','Bricolage',system-ui,sans-serif;
  --op-pad:clamp(20px,4vw,56px); --op-max:1280px; --op-sec:clamp(84px,10vw,136px);
  --op-ease:cubic-bezier(.2,.8,.2,1);
  /* tokens antigos do style.css realinhados à paleta nova */
  --title:var(--op-title); --body:var(--op-body); --cyan:#1CA3E0; --accent:#F3E91E; --t1:#020b1c; --t2:#4a5a74;
}

/* ── Base ─────────────────────────────────────────────────────────── */
html{background:var(--op-ink)}
body{font-family:var(--op-body) !important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{background:#fff}
::selection{background:var(--op-yellow);color:var(--op-ink)}
main p,main li,main label,main input,main textarea,main select,footer{font-family:var(--op-body) !important}
main h1,main h2,main h3,main h4,
.section-title,.hero-title,.portfolio-slider-title,.cuidamos-title,.design-team-title,.faq-title{
  font-family:var(--op-title) !important;text-transform:none !important;font-style:normal}
.container{max-width:var(--op-max) !important;padding-left:var(--op-pad) !important;padding-right:var(--op-pad) !important}
main strong{font-weight:600}

/* acentos <em> — no claro: marca-texto amarelo; no escuro: palavra amarela */
main h1 em,main h2 em{font-style:normal !important;font-weight:inherit !important;color:inherit;
  background:linear-gradient(180deg,transparent 58%,var(--op-yellow) 58%,var(--op-yellow) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;border:0 !important}
.op-dark h1 em,.op-dark h2 em,.hero-service h1 em,.hero-service h2 em,.op-cta h2 em{
  background:none !important;color:var(--op-yellow) !important;-webkit-text-fill-color:var(--op-yellow) !important;padding:0}

/* ── Eyebrow / tag (pequeno, caixa-alta espaçada, linha antes) ────── */
.section-tag,.eyebrow,.cuidamos-tag,.op-tag{
  display:inline-flex !important;align-items:center;gap:12px;background:none !important;border:0 !important;
  padding:0 !important;border-radius:0 !important;box-shadow:none !important;
  font-family:var(--op-body) !important;font-size:12px !important;font-weight:500 !important;
  letter-spacing:.22em !important;text-transform:uppercase !important;line-height:1.4 !important;
  color:var(--op-text2) !important;opacity:1 !important;margin:0 0 18px !important;text-shadow:none !important}
.section-tag::before,.eyebrow::before,.cuidamos-tag::before,.op-tag::before{
  content:'';flex:0 0 30px;width:30px;height:1px;background:var(--op-blue);display:block}
.op-dark .section-tag,.op-dark .eyebrow,.hero-service .eyebrow,.op-cta .section-tag,.op-dark .op-tag{color:var(--op-muted) !important}
.op-dark .section-tag::before,.hero-service .eyebrow::before,.op-cta .section-tag::before,.op-dark .op-tag::before{background:var(--op-yellow)}
.section-header[style*="center"] .section-tag,.op-cta .section-tag{margin-left:auto !important;margin-right:auto !important}

/* ── Títulos de seção ─────────────────────────────────────────────── */
main .section-title,main .portfolio-slider-title,main .faq-title,main .design-team-title,main .cuidamos-title{
  font-weight:600 !important;font-size:clamp(30px,4.2vw,60px) !important;line-height:1.04 !important;
  letter-spacing:-.035em !important;color:var(--op-text) !important;margin:0 0 20px !important;text-shadow:none !important}
.section-desc{font-family:var(--op-body) !important;font-size:clamp(16px,1.3vw,19px) !important;line-height:1.6 !important;
  color:var(--op-text2) !important;max-width:640px;margin-left:auto;margin-right:auto}
.section-header{margin-bottom:clamp(44px,5vw,64px) !important}
main .op-dark .section-title,main .op-dark h2,main .op-dark h3{color:var(--op-foam) !important}
main .op-dark .section-desc,main .op-dark p{color:var(--op-muted) !important}
main .portfolio-slider-title em{background:none !important;color:var(--op-blue) !important;padding:0}

/* espaçamento padrão das seções */
main > section.section:not(.hero-service),main > .section:not(.hero-service),
.cuidamos-section,.faq-section,.portfolio-slider-section,.design-team-section,section.section-pricing{
  padding-top:var(--op-sec) !important;padding-bottom:var(--op-sec) !important}

/* ── Botões (pílula amarela + círculo de seta / ghost) ────────────── */
.btn-primary,.btn-ghost{
  display:inline-flex !important;align-items:center !important;justify-content:center;gap:14px !important;
  border-radius:999px !important;font-family:var(--op-body) !important;font-weight:600 !important;
  font-size:16px !important;letter-spacing:0 !important;text-transform:none !important;line-height:1.2 !important;
  padding:16px 24px 16px 28px !important;transition:transform .3s var(--op-ease),background .3s,border-color .3s,color .3s !important;
  box-shadow:none !important;text-decoration:none !important;min-height:56px}
.btn-primary{background:var(--op-yellow) !important;color:var(--op-ink) !important;border:0 !important}
.btn-primary:not(:has(svg,i))::after{content:'→';width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:var(--op-ink);color:var(--op-yellow);display:grid;place-items:center;font-size:15px;font-weight:600;line-height:1}
.btn-primary:hover,.btn-ghost:hover{transform:translateY(-2px) !important}
.btn-ghost{background:rgba(255,255,255,.08) !important;color:var(--op-foam) !important;
  border:1px solid rgba(234,246,255,.3) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:not(:has(svg,i))::after{content:'↗';width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:var(--op-foam);color:var(--op-ink);display:grid;place-items:center;font-size:14px;line-height:1}
.btn-ghost:hover{border-color:var(--op-foam) !important;background:rgba(255,255,255,.14) !important}
.btn-primary svg,.btn-ghost svg{flex:0 0 auto}

/* ══ HERO DAS PÁGINAS DE SERVIÇO (navy, igual à home) ══════════════ */
.hero-service{background:radial-gradient(90% 70% at 85% 10%,rgba(28,163,224,.28),transparent 60%),
  linear-gradient(180deg,#041633 0%,var(--op-ink) 100%) !important;
  min-height:min(92vh,880px) !important;padding:clamp(130px,16vh,170px) 0 clamp(64px,9vh,100px) !important}
.hero-service > video{opacity:.42 !important;mix-blend-mode:screen;filter:saturate(.7) hue-rotate(-8deg)}
.hero-service > div[style*="position: absolute"]{background:linear-gradient(180deg,rgba(2,11,28,.55) 0%,rgba(2,11,28,.35) 45%,rgba(2,11,28,.92) 100%) !important;mix-blend-mode:normal !important}
.hero-service > div[style*="position: absolute"] + div[style*="position: absolute"]{background:radial-gradient(70% 60% at 15% 85%,rgba(28,163,224,.18),transparent 70%) !important}
.hero-service::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-service .container{z-index:2 !important}
.hero-service .hero-split-layout{align-items:center;gap:clamp(28px,4vw,64px)}
.hero-service .hero-title{color:var(--op-foam) !important;font-weight:700 !important;
  font-size:clamp(40px,5.4vw,84px) !important;line-height:.98 !important;letter-spacing:-.045em !important;
  margin:0 0 26px !important;text-shadow:0 6px 40px rgba(0,30,70,.35) !important}
.hero-service .hero-title em{font-style:normal !important}
.hero-service .hero-desc{color:var(--op-muted) !important;font-size:clamp(16px,1.25vw,18px) !important;
  line-height:1.6 !important;max-width:560px;margin:0 0 36px !important}
.hero-service .hero-actions{gap:14px !important;align-items:center}
.hero-service .hero-split-image img{filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}

/* ══ CARDS ═══════════════════════════════════════════════════════════ */
.ticker-card{border-radius:22px !important;border:1px solid var(--op-line-l) !important;background:#fff !important;
  box-shadow:0 1px 0 rgba(2,11,28,.02),0 18px 40px -24px rgba(2,11,28,.18) !important}
.ticker-card:hover{border-color:rgba(28,163,224,.45) !important}
.ticker-card h3{font-family:var(--op-title) !important;font-weight:600 !important;font-size:17px !important;
  letter-spacing:-.02em !important;line-height:1.25 !important;color:var(--op-text) !important;text-transform:none !important}
.ticker-card p{font-size:15.5px !important;line-height:1.6 !important;color:var(--op-text2) !important}
.ticker-arrow{border-radius:50% !important;background:#fff !important;border:1px solid var(--op-line-l) !important;color:var(--op-ink) !important}
.ticker-arrow:hover{background:var(--op-yellow) !important;border-color:var(--op-yellow) !important;color:var(--op-ink) !important}
.portfolio-item,.ticker-item img{border-radius:20px !important}

/* títulos de cards em geral (inline Unbounded 800 → 600, tracking da home) */
main h3{font-weight:600 !important;letter-spacing:-.02em !important;line-height:1.25 !important}

/* grade "o que entregamos" (sites premium) */
.asymmetric-grid > div{border-radius:24px !important;border-color:var(--op-line-l) !important;box-shadow:0 18px 40px -26px rgba(2,11,28,.2) !important}
.asymmetric-grid > div:first-child{background:radial-gradient(120% 120% at 100% 0%,rgba(28,163,224,.32),transparent 55%),linear-gradient(160deg,#071a3d,var(--op-ink)) !important;border:1px solid var(--op-line) !important}
.asymmetric-grid > div:first-child h3{color:var(--op-foam) !important}
.asymmetric-grid > div:first-child p{color:var(--op-muted) !important}
.asymmetric-grid > div:first-child > span{font-family:var(--op-body) !important;font-weight:500 !important;font-size:12px !important;
  letter-spacing:.22em !important;color:var(--op-yellow) !important;display:flex !important;align-items:center;gap:12px}
.asymmetric-grid > div:first-child > span::before{content:'';width:30px;height:1px;background:var(--op-yellow)}
.asymmetric-grid h3{font-size:clamp(17px,1.5vw,22px) !important}

/* ══ TIMELINE (mídias sociais) ═════════════════════════════════════ */
.timeline-bubble{font-family:var(--op-title) !important;font-weight:300 !important;color:var(--op-ink) !important;
  border:1px solid rgba(28,163,224,.5) !important;box-shadow:0 10px 30px -12px rgba(28,163,224,.5) !important;letter-spacing:-.03em}
.timeline-node:hover .timeline-bubble{background:var(--op-yellow) !important;border-color:var(--op-yellow) !important;color:var(--op-ink) !important}
.timeline-line{background:repeating-linear-gradient(to right,var(--op-blue),var(--op-blue) 6px,transparent 6px,transparent 14px) !important;opacity:.6}
.timeline-title{font-weight:600 !important;font-size:17px !important;color:var(--op-text) !important}
.timeline-desc{font-size:15px !important;color:var(--op-text2) !important}
@media (max-width:900px){.timeline-line{background:repeating-linear-gradient(to bottom,var(--op-blue),var(--op-blue) 6px,transparent 6px,transparent 14px) !important}}

/* ══ MARKETING: frentes / cards coloridos / funil ═════════════════ */
#detalhes .reveal h3{font-size:18px !important}
.op-process-grid > div{border-radius:24px !important}
.op-process-grid h3{font-size:18px !important}
.op-process-grid p{font-size:15.5px !important}
.op-dark{background:radial-gradient(80% 60% at 80% 0%,rgba(28,163,224,.22),transparent 60%),linear-gradient(180deg,#041633,var(--op-ink)) !important;border-color:var(--op-line) !important}
.funnel-stage{border-radius:22px !important;border:1px solid var(--op-line) !important;backdrop-filter:blur(14px)}
.funnel-stage:nth-child(1){background:rgba(28,163,224,.22) !important}
.funnel-stage:nth-child(3){background:rgba(4,22,52,.75) !important}
.funnel-stage:nth-child(5){background:var(--op-yellow) !important}
.funnel-stage:nth-child(5) h3,.funnel-stage:nth-child(5) p{color:var(--op-ink) !important}
.funnel-stage-title{text-transform:none !important;font-weight:600 !important;font-size:17px !important;letter-spacing:-.02em !important}
.funnel-stage-desc{font-size:15px !important;line-height:1.55 !important}
.funnel-arrow{border-top-color:var(--op-yellow) !important}

/* ══ AMARELO (cuidamos / qualidade) ════════════════════════════════ */
.cuidamos-section,#qualidade{background:var(--op-yellow) !important;color:var(--op-ink)}
.cuidamos-tag,#qualidade .section-tag{color:var(--op-ink) !important}
.cuidamos-tag::before,#qualidade .section-tag::before{background:var(--op-ink) !important}
main .cuidamos-title,main #qualidade .section-title{color:var(--op-ink) !important;font-weight:700 !important}
main .cuidamos-title{margin-bottom:36px !important}
.cuidamos-title em,#qualidade .section-title em{background:none !important;color:var(--op-ink) !important;
  box-shadow:inset 0 -.14em 0 var(--op-blue);border:0 !important;padding:0 !important}
.cuidamos-list li{font-family:var(--op-body) !important;font-weight:500 !important;font-size:clamp(17px,1.5vw,21px) !important;color:var(--op-ink)}
.cuidamos-list li::before{background:var(--op-ink) !important;color:var(--op-yellow) !important;font-size:13px !important;width:30px !important;height:30px !important;flex:0 0 30px}
.cuidamos-image-container img{border-radius:24px !important}
.qualidade-card{background:rgba(2,11,28,.06) !important;border:1px solid rgba(2,11,28,.1);border-radius:22px !important}
.qualidade-card .card-gradient-bar{display:none}
.qualidade-card .card-title{font-weight:600 !important;letter-spacing:-.02em !important;color:var(--op-ink) !important}
.qualidade-card .card-text{color:rgba(2,11,28,.72) !important;font-size:15.5px !important}
.onda-hint{font-family:var(--op-body) !important;color:rgba(2,11,28,.55) !important}

/* ══ PLANOS ══════════════════════════════════════════════════════ */
.section-pricing{background:var(--op-soft) !important}
.pricing-toggle-wrap{border-radius:999px !important;border-color:var(--op-line-l) !important;box-shadow:none !important;padding:8px 18px !important}
.pricing-toggle-wrap .toggle-label{font-family:var(--op-body) !important;font-weight:600 !important;font-size:15px !important}
.pricing-toggle-wrap .toggle-label span{font-family:var(--op-body) !important;letter-spacing:.12em;font-weight:600}
.pricing-card{border-radius:24px !important;border:1px solid var(--op-line-l) !important;box-shadow:0 18px 40px -26px rgba(2,11,28,.22) !important}
.pricing-card.popular{background:radial-gradient(120% 80% at 100% 0%,rgba(28,163,224,.3),transparent 55%),linear-gradient(170deg,#071a3d,var(--op-ink)) !important;border:1px solid rgba(243,233,30,.55) !important}
.pricing-card.popular > div:first-child{background:var(--op-yellow) !important;color:var(--op-ink) !important;font-family:var(--op-body) !important;letter-spacing:.18em;font-weight:600 !important;padding:6px 16px !important}
.pricing-card.popular h3,.pricing-card.popular .plan-price,.pricing-card.popular strong,.pricing-card.popular li[style*="Unbounded"]{color:var(--op-foam) !important}
.pricing-card.popular .plan-features,.pricing-card.popular .price-period{color:var(--op-muted) !important}
.pricing-card.popular li[style*="Unbounded"]{border-top-color:var(--op-line) !important}
.pricing-card h3{font-size:22px !important}
.price-val{font-weight:300 !important;letter-spacing:-.05em !important;font-size:clamp(44px,4.2vw,56px) !important}
.price-currency{font-weight:500 !important;font-size:16px !important}
.plan-features{font-size:15.5px !important}
.plan-features li[style*="Unbounded"]{font-family:var(--op-body) !important;font-weight:600 !important;font-size:12px !important;letter-spacing:.18em;color:var(--op-text2) !important}
.pricing-card .plan-btn{display:flex !important;width:100%;border-radius:999px !important;font-family:var(--op-body) !important;font-weight:600 !important;
  font-size:16px !important;padding:16px 24px !important;background:var(--op-ink) !important;color:var(--op-foam) !important;border:0 !important;box-shadow:none !important;min-height:56px}
.pricing-card .plan-btn::after{background:var(--op-yellow) !important;color:var(--op-ink) !important}
.pricing-card.popular .plan-btn{background:var(--op-yellow) !important;color:var(--op-ink) !important}
.pricing-card.popular .plan-btn::after{background:var(--op-ink) !important;color:var(--op-yellow) !important}

/* ══ QUEM CUIDA DO SEU DESIGN (navy) ══════════════════════════════ */
.design-team-section{background:radial-gradient(70% 70% at 20% 100%,rgba(28,163,224,.3),transparent 60%),linear-gradient(180deg,#041633,var(--op-ink)) !important;color:var(--op-foam)}
main .design-team-title{color:var(--op-foam) !important;font-weight:700 !important}
.design-team-content p{color:var(--op-muted) !important;font-size:clamp(16px,1.25vw,18px) !important;line-height:1.65 !important}
.design-team-content .op-tag{color:var(--op-muted) !important}
.design-team-content .op-tag::before{background:var(--op-yellow)}

/* ══ FAQ ═════════════════════════════════════════════════════════ */
.faq-section{text-align:center}
.faq-section .faq-container{text-align:left}
.faq-title{text-align:center;margin-bottom:clamp(40px,5vw,60px) !important}
.faq-item{border-radius:20px !important;border:1px solid var(--op-line-l) !important;background:#fff !important}
.faq-item.active{border-color:rgba(28,163,224,.5) !important;box-shadow:0 18px 40px -26px rgba(2,11,28,.25) !important}
.faq-header h3{font-family:var(--op-title) !important;font-weight:500 !important;font-size:15.5px !important;letter-spacing:-.01em !important;
  line-height:1.35 !important;color:var(--op-text) !important}
.faq-item.active .faq-header h3{color:var(--op-ink) !important}
.faq-icon{background:var(--op-ink) !important;color:var(--op-yellow) !important;border-color:var(--op-ink) !important}
.faq-content p,.faq-content li{font-size:15.5px !important;line-height:1.65 !important;color:var(--op-text2) !important}

/* ══ CTA FINAL (card navy) ═════════════════════════════════════════ */
.op-cta{background:radial-gradient(90% 120% at 100% 0%,rgba(28,163,224,.35),transparent 55%),
  radial-gradient(70% 90% at 0% 100%,rgba(28,163,224,.18),transparent 60%),linear-gradient(170deg,#071a3d,var(--op-ink)) !important;
  border:1px solid var(--op-line) !important;border-radius:28px !important;box-shadow:0 40px 80px -40px rgba(2,11,28,.55) !important;
  padding:clamp(48px,6vw,80px) clamp(22px,5vw,64px) !important}
.op-cta > div[style*="blur"]{background:rgba(28,163,224,.18) !important}
main .op-cta .section-title{font-weight:700 !important;font-size:clamp(32px,4.6vw,64px) !important;line-height:1 !important;
  letter-spacing:-.045em !important;margin:4px 0 20px !important}
.op-cta .section-desc{color:var(--op-muted) !important;font-size:clamp(16px,1.3vw,19px) !important}
.op-cta .btn-primary,.op-cta .btn-ghost{font-family:var(--op-body) !important}

/* ══ RODAPÉ (mesmo visual da home) ═════════════════════════════════ */
footer.site-footer{background:linear-gradient(180deg,#041633 0%,var(--op-ink) 40%,#020814 100%) !important;
  border-top:1px solid var(--op-line) !important;padding:clamp(56px,7vw,88px) var(--op-pad) 28px !important;
  color:var(--op-muted);font-size:15px;text-align:left !important;margin-top:0 !important}
footer.site-footer > .container{max-width:var(--op-max) !important;margin:0 auto;padding:24px 0 0 !important;
  flex-direction:row !important;justify-content:space-between !important;align-items:center !important;flex-wrap:wrap;gap:16px !important}
footer.site-footer > .container > div{gap:10px !important}
footer.site-footer > .container a{border:1px solid var(--op-line) !important;color:var(--op-foam) !important;background:transparent !important}
footer.site-footer > .container a:hover{border-color:var(--op-blue) !important;color:var(--op-blue) !important}
footer.site-footer > .container p{color:var(--op-muted) !important;font-size:13px !important;font-family:var(--op-body) !important}
.op-ft-top{max-width:var(--op-max);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,64px);
  padding-bottom:44px;border-bottom:1px solid var(--op-line);text-align:left}
.op-ft-brand img{height:34px;width:auto;filter:brightness(0) invert(1);display:block}
.op-ft-brand p{margin:18px 0 26px;max-width:34ch;line-height:1.55;color:var(--op-muted)}
.op-ft-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--op-yellow);color:var(--op-ink) !important;font-weight:600;font-size:15px;transition:transform .3s}
.op-ft-cta:hover{transform:translateY(-2px)}
.op-ft-col{display:flex;flex-direction:column;gap:12px}
.op-ft-col h4{font-family:var(--op-title) !important;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--op-foam);margin:0 0 8px}
.op-ft-col a{color:var(--op-muted);transition:color .2s;width:fit-content}
.op-ft-col a:hover,.op-ft-col a.cur{color:var(--op-blue)}
.op-ft-col span{color:var(--op-muted)}
@media(max-width:860px){.op-ft-top{grid-template-columns:1fr 1fr}.op-ft-brand{grid-column:1/-1}
  footer.site-footer > .container{flex-direction:column-reverse !important;align-items:flex-start !important}
  footer.site-footer{padding-bottom:96px !important}}

.back-to-top{border-radius:50% !important;background:rgba(2,11,28,.7) !important;color:var(--op-foam) !important;border:1px solid var(--op-line) !important;backdrop-filter:blur(10px)}

/* ══ CONTATO ═════════════════════════════════════════════════════ */
body.page-contato{background:radial-gradient(70% 60% at 85% 10%,rgba(28,163,224,.3),transparent 60%),
  linear-gradient(-45deg,#020b1c,#041633,#06306b,#0a4f8f) !important;background-size:100% 100%,300% 300% !important;color:var(--op-foam)}
body.page-contato main{background:transparent !important;padding-top:clamp(130px,16vh,170px) !important}
body.page-contato main .container{align-items:center !important}
body.page-contato .op-contact-h1{display:inline-flex !important;align-items:center;gap:12px;font-family:var(--op-body) !important;
  font-size:13px !important;font-weight:500 !important;letter-spacing:.22em !important;text-transform:uppercase !important;
  color:var(--op-muted) !important;margin:0 0 22px !important;line-height:1.4 !important}
body.page-contato .op-contact-h1::before{content:'';width:34px;height:1px;background:var(--op-yellow)}
body.page-contato .op-contact-h2{color:var(--op-foam) !important;font-weight:700 !important;font-size:clamp(38px,5vw,76px) !important;
  line-height:.98 !important;letter-spacing:-.045em !important;margin:0 0 26px !important;text-transform:none !important}
body.page-contato .op-contact-lead{color:var(--op-muted);font-size:clamp(16px,1.25vw,18px);line-height:1.6;max-width:460px;margin:0 0 34px}
body.page-contato .op-contact-card{background:rgba(4,22,52,.55) !important;border:1px solid var(--op-line) !important;border-radius:24px !important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 40px 80px -40px rgba(0,0,0,.6) !important}
body.page-contato #contactForm label{color:var(--op-muted) !important;font-family:var(--op-body) !important;font-weight:500 !important;
  font-size:12px !important;letter-spacing:.18em;text-transform:uppercase}
body.page-contato #contactForm input[type=text],body.page-contato #contactForm input[type=email],
body.page-contato #contactForm input[type=tel],body.page-contato #contactForm textarea{color:var(--op-foam) !important;
  border-bottom:1px solid rgba(234,246,255,.25) !important;font-size:17px !important;font-family:var(--op-body) !important;transition:border-color .25s}
body.page-contato #contactForm input:focus,body.page-contato #contactForm textarea:focus{border-bottom-color:var(--op-yellow) !important}
body.page-contato #contactForm > div[style*="max-content"]{background:rgba(255,255,255,.06) !important;border:1px solid var(--op-line) !important;border-radius:14px !important}
body.page-contato #contactForm > div[style*="max-content"] span{color:var(--op-foam) !important}
body.page-contato #contactSubmitBtn{display:inline-flex !important;align-items:center;gap:14px;background:var(--op-yellow) !important;color:var(--op-ink) !important;
  border:0 !important;border-radius:999px !important;padding:14px 22px 14px 28px !important;font-family:var(--op-body) !important;
  font-weight:600 !important;font-size:16px !important;letter-spacing:0 !important;text-transform:none !important;min-height:56px;transition:transform .3s}
body.page-contato #contactSubmitBtn::after{content:'→';width:30px;height:30px;border-radius:50%;background:var(--op-ink);color:var(--op-yellow);display:grid;place-items:center;font-size:15px}
body.page-contato #contactSubmitBtn:hover{transform:translateY(-2px)}
body.page-contato .btn-primary{background:var(--op-yellow) !important;color:var(--op-ink) !important}

/* ══ ORÇAMENTO (página clara / app) ═════════════════════════════════ */
body.op-orc main,body.op-orc{background:var(--op-soft) !important}
.catalog-hero{padding-top:clamp(130px,16vh,170px) !important}
.catalog-hero .op-tag{justify-content:center}
.catalog-title{font-weight:700 !important;font-size:clamp(36px,5vw,76px) !important;line-height:1 !important;
  letter-spacing:-.045em !important;color:var(--op-text) !important;margin-bottom:20px !important}
.catalog-title em{color:var(--op-text) !important;font-style:normal;
  background:linear-gradient(180deg,transparent 58%,var(--op-yellow) 58%,var(--op-yellow) 92%,transparent 92%);padding:0 .06em}
.catalog-desc{font-size:clamp(16px,1.3vw,19px) !important;color:var(--op-text2) !important;line-height:1.6 !important}
.btn-mode-switch{font-family:var(--op-body) !important;font-weight:600 !important;font-size:15px !important;border-radius:999px !important;
  padding:12px 22px !important;border:1px solid rgba(2,11,28,.16) !important;background:#fff !important;color:var(--op-ink) !important;box-shadow:none !important}
.btn-mode-switch:hover,.btn-mode-switch.active{background:var(--op-ink) !important;color:var(--op-foam) !important;border-color:var(--op-ink) !important}
.sidebar-cart-inner,.form-panel,.chat-box{border-radius:24px !important;border-color:var(--op-line-l) !important}
.cart-header h3,.row-title,.card-title{font-family:var(--op-title) !important;font-weight:600 !important;letter-spacing:-.02em !important;text-transform:none !important}
.cart-count-badge{background:var(--op-ink) !important;color:var(--op-yellow) !important}
.row-title{border-radius:16px !important}
.fancy-card{border-radius:22px !important}
.fancy-card.selected{border-color:var(--op-blue) !important}
.card-tag{font-family:var(--op-body) !important;letter-spacing:.18em !important;font-weight:600 !important}
.form-group label{font-family:var(--op-body) !important;font-weight:600 !important;font-size:12px !important;letter-spacing:.16em !important;color:var(--op-text2) !important}
.form-group input,.form-group select,.form-group textarea{border-radius:14px !important;font-family:var(--op-body) !important}
.btn-submit,.cart-btn-checkout{background:var(--op-yellow) !important;color:var(--op-ink) !important;border-radius:999px !important;
  font-family:var(--op-body) !important;font-weight:600 !important;font-size:16px !important;letter-spacing:0 !important;text-transform:none !important;box-shadow:none !important}
.btn-submit:hover,.cart-btn-checkout:hover{background:#fff35a !important;color:var(--op-ink) !important}
.btn-back{border-radius:50% !important}
.chat-header{border-radius:24px 24px 0 0}
.success-box{border-radius:24px !important}
.success-box h2{font-family:var(--op-title) !important;letter-spacing:-.03em}

/* ══ OBRIGADO ════════════════════════════════════════════════════ */
body.op-thanks{background:var(--op-ink) !important;font-family:var(--op-body) !important}
body.op-thanks .orb-1{background:radial-gradient(circle,#1CA3E0,#0a4f8f) !important;opacity:.45}
body.op-thanks .orb-2{background:radial-gradient(circle,#1CA3E0,#06306b) !important;opacity:.4}
body.op-thanks .orb-3{background:radial-gradient(circle,rgba(243,233,30,.55),rgba(28,163,224,.2)) !important;opacity:.18 !important}
body.op-thanks .thankyou-header{display:none}
body.op-thanks .thankyou-wrapper{background:transparent !important;padding-top:clamp(120px,15vh,160px)}
body.op-thanks .glass-card-pro{border-radius:28px !important;background:rgba(4,22,52,.55) !important;border:1px solid var(--op-line) !important}
body.op-thanks .glass-card-pro::before{opacity:.35}
body.op-thanks .eyebrow-tag{display:inline-flex !important;align-items:center;gap:12px;background:none !important;border:0 !important;padding:0 !important;
  box-shadow:none !important;font-family:var(--op-body) !important;font-size:12px !important;font-weight:500 !important;letter-spacing:.22em !important;
  text-transform:uppercase !important;color:var(--op-muted) !important}
body.op-thanks .eyebrow-tag::before{content:'';width:30px;height:1px;background:var(--op-yellow)}
body.op-thanks .eyebrow-tag i{color:var(--op-yellow)}
body.op-thanks .check-icon-box{background:var(--op-yellow) !important;color:var(--op-ink) !important;box-shadow:0 0 0 10px rgba(243,233,30,.12),0 20px 40px -10px rgba(243,233,30,.35) !important}
body.op-thanks .thankyou-title{font-family:var(--op-title) !important;font-weight:700 !important;font-size:clamp(28px,3.6vw,48px) !important;
  line-height:1.04 !important;letter-spacing:-.04em !important;color:var(--op-foam) !important;text-transform:none !important}
body.op-thanks .thankyou-title span{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:var(--op-yellow) !important;color:var(--op-yellow) !important}
body.op-thanks .thankyou-desc{color:var(--op-muted) !important;font-size:clamp(16px,1.25vw,18px) !important;line-height:1.6 !important}
body.op-thanks .credentials-box{border-radius:20px !important;border-color:var(--op-line) !important}
body.op-thanks .credentials-title{font-family:var(--op-title) !important;font-weight:600 !important;letter-spacing:-.01em}
body.op-thanks .credentials-title i{color:var(--op-yellow) !important}
body.op-thanks .btn-primary-glass,body.op-thanks .btn-secondary-glass{border-radius:999px !important;font-family:var(--op-body) !important;
  font-weight:600 !important;font-size:16px !important;padding:15px 24px !important;letter-spacing:0 !important;text-transform:none !important}
body.op-thanks .btn-primary-glass{background:var(--op-yellow) !important;color:var(--op-ink) !important;border:0 !important;box-shadow:none !important}
body.op-thanks .btn-secondary-glass{background:rgba(255,255,255,.08) !important;color:var(--op-foam) !important;border:1px solid rgba(234,246,255,.3) !important}
body.op-thanks .thankyou-footer{font-family:var(--op-body) !important;font-size:13px !important;color:var(--op-muted) !important;
  border-top:1px solid var(--op-line) !important;background:rgba(2,11,28,.6) !important;text-align:center}

/* ══ PORTFÓLIO (canvas infinito: só tipografia/paleta) ══════════════ */
body.op-portfolio{--bg:#020b1c;--azul:#1CA3E0;--amarelo:#F3E91E;font-family:var(--op-body) !important}
body.op-portfolio .cap .t{font-family:var(--op-body) !important;font-size:14px;font-weight:500}
body.op-portfolio .cap .tag,body.op-portfolio .clock,body.op-portfolio .meta,body.op-portfolio #dragHint,
body.op-portfolio #lb .lb-cap .tag,body.op-portfolio #lb .counter,body.op-portfolio .cursor-label,body.op-portfolio .ph{font-family:var(--op-body) !important}
body.op-portfolio #lb .lb-cap{font-family:var(--op-title) !important;font-weight:600;letter-spacing:-.02em}
body.op-portfolio .frame{border-radius:18px}
body.op-portfolio #dragHint span{border-radius:999px;font-weight:500}
body.op-portfolio .op-pf-tag{display:inline-flex;align-items:center;gap:12px;font-family:var(--op-body);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--op-muted);pointer-events:none}
body.op-portfolio .op-pf-tag::before{content:'';width:30px;height:1px;background:var(--op-yellow)}
body.op-portfolio .op-pf-tag b{font-family:var(--op-title);font-weight:600;letter-spacing:-.02em;text-transform:none;font-size:15px;color:var(--op-foam)}

/* ══ RESPONSIVO ══════════════════════════════════════════════════ */
@media (max-width:860px){
  .hero-service{min-height:auto !important;padding:118px 0 64px !important}
  .hero-service .hero-title{font-size:clamp(36px,10.5vw,56px) !important;line-height:1 !important}
  .hero-service .hero-actions{flex-direction:row;flex-wrap:wrap}
  .btn-primary,.btn-ghost{font-size:15px !important;padding:14px 18px 14px 22px !important;min-height:52px}
  main .section-title,main .portfolio-slider-title,main .faq-title,main .design-team-title,main .cuidamos-title{font-size:clamp(28px,8vw,40px) !important;line-height:1.06 !important}
  main .op-cta .section-title{font-size:clamp(30px,9vw,44px) !important}
  .op-cta{border-radius:24px !important}
  main > section.section:not(.hero-service),.cuidamos-section,.faq-section,.portfolio-slider-section,.design-team-section,section.section-pricing{
    padding-top:76px !important;padding-bottom:76px !important}
  .pricing-card{padding:32px 24px !important}
  body.page-contato .op-contact-h2{font-size:clamp(34px,10vw,52px) !important}
  body.page-contato main .container > div{min-width:0 !important}
  body.page-contato .op-contact-card{padding:28px 22px !important}
  .catalog-title{font-size:clamp(32px,9vw,48px) !important}
}
@media (max-width:420px){
  .hero-service .hero-actions a{flex:1 1 auto}
}

/* ── ajustes finos (marketing) ── */
main #detalhes .section-title[style*="text-align: left"]{font-size:clamp(30px,3.4vw,50px) !important;text-align:left}
#detalhes .reveal > div[style*="115, 60, 245"]{background:rgba(28,163,224,.08) !important;border-color:rgba(28,163,224,.25) !important;color:var(--op-blue) !important;border-radius:14px !important}
#detalhes .reveal > div[style*="115, 60, 245"] svg{stroke:var(--op-blue) !important;color:var(--op-blue) !important}
.op-process-grid > div{box-shadow:0 18px 40px -26px rgba(2,11,28,.25) !important}
.op-process-grid > div:nth-child(1){background:var(--op-yellow) !important;color:var(--op-ink) !important}
.op-process-grid > div:nth-child(2){background:linear-gradient(170deg,#071a3d,var(--op-ink)) !important;color:var(--op-foam) !important}
.op-process-grid > div:nth-child(3){background:var(--op-blue) !important;color:#fff !important}
.op-process-grid > div:nth-child(4){background:#fff !important;color:var(--op-ink) !important;border:1px solid var(--op-line-l)}
.op-process-grid > div:nth-child(2) > div:first-child{background:rgba(234,246,255,.1) !important;color:var(--op-yellow) !important}
.op-process-grid > div:nth-child(2) svg{stroke:var(--op-yellow) !important}
.op-process-grid > div:nth-child(4) > div:first-child{background:rgba(28,163,224,.1) !important}

/* ── contato: vídeo de fundo fixo com tom navy (igual aos heroes) ── */
body.page-contato > video{opacity:.4 !important;mix-blend-mode:screen;filter:saturate(.7)}
body.page-contato > div[style*="rgba(14, 94, 250"]{background:linear-gradient(180deg,rgba(2,11,28,.55) 0%,rgba(2,11,28,.35) 45%,rgba(2,11,28,.9) 100%) !important;mix-blend-mode:normal !important}
body.page-contato > div[style*="37, 81, 242"]{background:radial-gradient(70% 60% at 15% 90%,rgba(28,163,224,.2),transparent 70%) !important}
body.page-contato main h2 em{background:none !important;color:var(--op-yellow) !important;padding:0}
body.op-portfolio .op-pf-tag{padding:9px 16px 9px 14px;border-radius:999px;background:rgba(2,11,28,.6);border:1px solid var(--op-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
footer.op-ft-only{position:relative;z-index:2}

/* palavras animadas (app.js envolve cada palavra em span.word) herdam a cor do título */
main h1 .word,main h2 .word,main h3 .word{color:inherit !important;-webkit-text-fill-color:currentColor}
/* contato no celular: colunas empilhadas */
@media (max-width:860px){
  body.page-contato main .container{flex-direction:column !important;align-items:stretch !important;gap:40px !important}
  body.page-contato main .container > div{flex:1 1 auto !important;max-width:none !important;width:100% !important;padding-top:0 !important}
}
.hero-section.hero-service .hero-title .word{color:var(--op-foam) !important}
.hero-section.hero-service .hero-title em,.hero-section.hero-service .hero-title em .word{color:var(--op-yellow) !important}
.pricing-card .plan-btn,.btn-primary,.btn-ghost{text-decoration:none !important}
@media (max-width:900px){
  .design-team-grid{grid-template-columns:minmax(0,1fr) !important}
  .design-team-content{min-width:0;max-width:100%}
  .design-team-section{overflow:hidden !important}
}
@media (max-width:600px){
  body.op-thanks .eyebrow-tag{font-size:11px !important;letter-spacing:.16em !important;white-space:nowrap}
  body.op-thanks .eyebrow-tag::before{width:20px}
}
@media (max-width:900px){
  .qualidade-layout{grid-template-columns:minmax(0,1fr) !important;gap:40px !important;min-height:0 !important}
  #canvas-onda-assinatura{width:min(480px,100%) !important;height:auto !important;aspect-ratio:1}
  #qualidade .container{padding-left:var(--op-pad) !important;padding-right:var(--op-pad) !important}
}
body.page-contato{background-attachment:fixed,fixed !important}
.faq-icon{flex:0 0 auto !important;margin-left:12px}

/* ══ COR PRÓPRIA DE CADA SERVIÇO (definida em <body style="--svc">) ═══ */
body[style*="--svc"] .hero-service{
  background:radial-gradient(80% 70% at 85% 8%,color-mix(in srgb,var(--svc) 70%,#fff 10%),transparent 62%),
    linear-gradient(165deg,var(--svc) 0%,color-mix(in srgb,var(--svc) 62%,#020b1c) 100%) !important}
body[style*="--svc"] .hero-service > video{opacity:.35 !important;filter:saturate(.6)}
body[style*="--svc"] .hero-service > div[style*="position: absolute"]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--svc) 45%,transparent) 0%,transparent 45%,color-mix(in srgb,var(--svc) 55%,#020b1c 45%) 100%) !important}
body[style*="--svc"] .hero-service > div[style*="position: absolute"] + div[style*="position: absolute"]{
  background:radial-gradient(70% 60% at 15% 85%,rgba(255,255,255,.08),transparent 70%) !important}
body[style*="--svc"] .hero-service .hero-desc{color:rgba(255,255,255,.82) !important}
body[style*="--svc"] .op-cta{
  background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--svc) 30%,#fff 8%),transparent 55%),
    linear-gradient(165deg,var(--svc),color-mix(in srgb,var(--svc) 55%,#020b1c)) !important;border-color:rgba(255,255,255,.16) !important}
body[style*="--svc"] .op-cta > div[style*="blur"]{background:rgba(255,255,255,.12) !important}
body[style*="--svc"] .op-cta .section-desc{color:rgba(255,255,255,.82) !important}

/* ══ Heroes de serviço só com texto (as ilustrações saíram; o bicho 3D vem logo abaixo) ══ */
.hero-service .hero-split-layout{display:block!important;max-width:980px}
.hero-service .hero-split-text{max-width:980px!important}
.hero-service .hero-title{font-size:clamp(44px,7vw,108px)!important;line-height:.98!important}
.hero-service .hero-desc{max-width:680px!important;font-size:clamp(17px,1.4vw,21px)!important}
.hero-service{min-height:min(88vh,860px)!important;align-items:flex-end!important;padding-bottom:clamp(70px,12vh,130px)!important}

/* Quem cuida do seu design: foto encostada na base da seção */
.design-team-section{padding-bottom:0!important;overflow:hidden}
.design-team-section .design-team-grid{align-items:end!important}
.design-team-section .design-team-image-container{align-self:end;justify-content:center}
.design-team-section .design-team-image-container img{display:block;height:auto!important;max-height:560px;border-radius:28px 28px 0 0!important;box-shadow:0 -10px 60px -20px rgba(0,0,0,.45)!important;margin-bottom:0!important}
.design-team-section .design-team-content{align-self:center;padding-bottom:clamp(60px,10vh,110px)}
@media (max-width:900px){.design-team-section .design-team-content{order:-1;padding-bottom:30px}.design-team-section .design-team-image-container img{max-width:340px!important}}

/* descendentes (g, j, p, q, y) nunca cortados em títulos de várias linhas */
h1 .word,h2 .word,h3 .word{padding-bottom:.1em;margin-bottom:-.1em}
h1 em,h2 em,h3 em{-webkit-box-decoration-break:clone;box-decoration-break:clone}
[style*='background-clip'] ,.op-feed h2 em,.igx h2 em{padding-bottom:.14em}

/* faixas de portfólio: imagens inteiras, sem corte (largura segue a proporção da arte) */
.ticker-item:has(> img){width:auto!important;max-width:none!important;height:400px!important;flex:0 0 auto!important;margin-right:24px}
.ticker-item > img{width:auto!important;height:100%!important;max-width:none!important;object-fit:contain!important;display:block}
@media (max-width:700px){.ticker-item:has(> img){height:240px!important;margin-right:14px}}
/* portfólio de sites: cards inteiros, sem esmaecer/cortar nas bordas da seção */
.portfolio-slider-section .ticker-outer{-webkit-mask-image:none!important;mask-image:none!important;width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;padding:30px 0 50px!important}
.portfolio-slider-section .portfolio-item{width:auto!important;height:clamp(220px,32vw,460px)!important;aspect-ratio:16/9;max-width:none!important}
.portfolio-slider-section .portfolio-item img{object-fit:contain!important;background:#fff}