/* ============================================================
   MINER · Pele oficial (fundo #0A0A0B, acento único Hudson #4562FF)
   Fontes da marca auto-hospedadas: VisbyCF e Behind The Nineties.
   ============================================================ */
@font-face { font-family: "VisbyCF"; src: url("/assets/fonts/visbycf-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "VisbyCF"; src: url("/assets/fonts/visbycf-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "VisbyCF"; src: url("/assets/fonts/visbycf-demibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "VisbyCF"; src: url("/assets/fonts/visbycf-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Behind The Nineties"; src: url("/assets/fonts/behind-the-nineties-bd.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg:        #0A0A0B;
  --bg-1:      #0E0E10;
  --surface:   #141417;
  --surface-2: #1B1B1F;
  --line:      #2A2A2F;
  --line-2:    #3A3A41;
  --text:      #FAFAFA;
  --body:      #C6C6C4;
  --muted:     #AEAEAE;   /* Brooklyn, apoio sobre escuro */
  --muted-2:   #AEAEAE;   /* legenda e fonte de dado: Brooklyn, mínimo para texto (8,6:1 sobre o fundo) */
  --soho:      #CBCBCB;
  --blue:      #4562FF;   /* Hudson, o único acento */
  --blue-soft: #889BFF;   /* azul de texto pequeno (7,7:1 sobre o fundo) */
  --blue-tint: rgba(69, 98, 255, .14);
  --white:     #FFFFFF;
  --glow:      rgba(69, 98, 255, .45);
  --danger:    #E5484D;

  --maxw: 1200px;
  --gutter: 28px;
  --r:    18px;
  --r-sm: 12px;
  --head: 96px;
  --f-display: "VisbyCF", "Geist", "Inter", system-ui, sans-serif;
  --f-body:    "VisbyCF", "Geist", "Inter", system-ui, sans-serif;
  --f-num:     "Behind The Nineties", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .25, 1);
}
body.has-announce { --head: 140px; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--f-body); font-size: 17px; font-weight: 400; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; }
::selection { background: var(--blue); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.nav, main, .footer { position: relative; z-index: 2; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }

/* ============================================================
   Camadas de fundo (desligadas abaixo de 768px)
   ============================================================ */
.grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 70px 70px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 78%); }
.bg-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.spotlight { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(600px circle at var(--sx, 50%) var(--sy, -15%), rgba(69,98,255,.06), transparent 62%); }
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200; background: var(--blue); }
@media (max-width: 767px) {
  .grid-bg, .bg-canvas, .spotlight, .grain { display: none; }
}

/* ============================================================
   Tipografia
   ============================================================ */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-soft); margin-bottom: 1.2rem; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.section__head { max-width: 760px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section__head.mk-center { margin-left: auto; margin-right: auto; }
.section__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.75rem, 3.6vw, 2.9rem); line-height: 1.06; color: var(--text); overflow-wrap: break-word; }
.section__lead { color: var(--body); font-size: 1.05rem; margin-top: 1rem; max-width: 60ch; }
.source { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* ============================================================
   Botões
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .75rem 1.25rem;
  border-radius: 12px; font-family: var(--f-body); font-weight: 800; font-size: .95rem; letter-spacing: .01em; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), transform .12s var(--ease); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: #5671FF; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); font-weight: 600; }
.btn--ghost:hover { border-color: var(--blue); }
.btn--lg { min-height: 52px; padding: .9rem 1.5rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ============================================================
   Navegação (pílula flutuante)
   ============================================================ */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 100; padding: 0 16px; }
.nav__pill { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 1.4rem; padding: .55rem .6rem .55rem 1.2rem;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(14,14,16,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .22s var(--ease), border-color .22s var(--ease); }
.nav.scrolled .nav__pill { background: rgba(14,14,16,.94); border-color: var(--line-2); }
.nav__brand { display: flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
.nav__logo { height: 26px; width: auto; }
.nav__links { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.nav__links > a, .nav__item > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; font-size: .92rem; font-weight: 600; color: var(--muted); border-radius: 10px; transition: color .12s; }
.nav__links > a:hover, .nav__item > a:hover { color: var(--text); }
.nav__cta { min-height: 44px; padding: .6rem 1rem; font-size: .9rem; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; }
.nav__toggle span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .22s var(--ease), opacity .22s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile { display: none; }

@media (max-width: 1099px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__mobile { max-width: var(--maxw); margin: .5rem auto 0; padding: .6rem; border: 1px solid var(--line-2); border-radius: 16px;
    background: rgba(14,14,16,.98); max-height: calc(100svh - var(--head)); overflow-y: auto; flex-direction: column; }
  .nav__mobile.open { display: flex; }
  .nav__mobile a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: 0 .8rem; border-radius: 10px; color: var(--body); font-weight: 600; }
  .nav__mobile a:not(.btn):hover { background: var(--surface-2); color: var(--text); }
  .nav__mobile-group { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); padding: .9rem .8rem .3rem; }
  .nav__mobile .btn { margin-top: .6rem; }
}

/* ============================================================
   HERO (vídeo ou imagem, outdoor "(Dados + Vendas)" sempre inteiro)
   ============================================================ */
.hero { position: relative; z-index: 2; padding-top: var(--head); background: var(--bg); }
.hero__stage { position: relative; height: min(56vw, calc(100svh - var(--head))); min-height: 480px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.hero__video { display: none; opacity: 0; transition: opacity .36s var(--ease); }
.hero__video.is-on { opacity: 1; }
.hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,11,.96) 0%, rgba(10,10,11,.92) 30%, rgba(10,10,11,.6) 37%, rgba(10,10,11,0) 44%),
    linear-gradient(0deg, rgba(10,10,11,.9) 0%, rgba(10,10,11,0) 22%); }
.hero__inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; }
/* O outdoor começa a partir de ~41% da largura em qualquer desktop (1024 a 1920): o texto acaba antes, em 36vw */
.hero__copy { max-width: calc(36vw - max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter))); }
.hero__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 2.9vw, 3.2rem); line-height: 1.04; letter-spacing: -.005em; color: var(--text); }
.hero__sub { color: var(--body); font-size: clamp(1rem, 1.2vw, 1.15rem); margin-top: 1.1rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
@media (min-width: 768px) {
  .hero__video { display: block; }
}
/* Retrato e celular deitado: imagem em bloco recomposta, texto abaixo */
@media (max-aspect-ratio: 6/5), (max-height: 520px) {
  .hero__stage { height: auto; min-height: 0; overflow: visible; }
  .hero__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
  .hero__img, .hero__video { object-position: 72% 50%; }
  .hero__scrim { background: linear-gradient(0deg, var(--bg) 0%, rgba(10,10,11,0) 26%); }
  .hero__inner { height: auto; padding-top: 1.6rem; padding-bottom: 1rem; }
  .hero__copy { max-width: 44ch; }
  .hero__title { font-size: clamp(2rem, 6.4vw, 3.2rem); max-width: 16ch; }
}
/* Celular deitado e telas baixas: sem anúncio, hero em duas colunas para o H1 e o botão caberem na primeira tela */
@media (max-height: 500px) and (min-aspect-ratio: 6/5) {
  body .mk-announce { display: none; }
  body, body.has-announce { --head: 76px; }
  html body .nav, html body.has-announce .nav { top: 8px; }
  html { scroll-padding-top: 76px; }
  .hero__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(100svh - var(--head)); min-height: 0; }
  .hero__media { position: relative; order: 2; aspect-ratio: auto; height: 100%; border-radius: 14px 0 0 14px; }
  .hero__img, .hero__video { object-position: 77% 50%; }
  .hero__scrim { background: linear-gradient(90deg, var(--bg) 0%, rgba(10,10,11,0) 18%); }
  .hero__inner { order: 1; height: 100%; padding-top: .4rem; padding-bottom: .6rem; justify-content: center; }
  .hero__copy { max-width: none; }
  .hero__title { font-size: clamp(1.5rem, 3.6vw, 2.1rem); max-width: none; }
  .hero__sub { font-size: .92rem; margin-top: .5rem; line-height: 1.45; }
  .hero__cta { margin-top: .9rem; gap: .5rem; }
  .hero__cta .btn--lg { min-height: 44px; padding: .6rem 1rem; font-size: .9rem; }
  .svc-hero__stage { padding-top: 1rem; }
  .svc-hero__inner { padding-bottom: 1rem; }
  .svc-hero__title { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
  .svc-hero__sub { font-size: .92rem; margin-top: .5rem; }
  .svc-hero__cta { margin-top: .9rem; }
  .svc-hero__cta .btn--lg { min-height: 44px; padding: .6rem 1rem; font-size: .9rem; }
  .crumb { min-height: 32px; }
  .crumb a { min-height: 44px; }
}
@media (max-width: 599px) {
  .hero__media { aspect-ratio: 4 / 5; }
  .hero__img, .hero__video { object-position: 77% 50%; }
  .hero__cta .btn { width: 100%; }
}

/* ============================================================
   Números
   ============================================================ */
.numbers { position: relative; z-index: 2; padding: clamp(2.6rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.numbers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.number { min-width: 0; display: flex; flex-direction: column; gap: .3rem; border-left: 3px solid var(--blue); padding-left: 1.1rem; }
.number__v { font-family: var(--f-num); font-weight: 700; font-size: clamp(2rem, 3.1vw, 3.5rem); line-height: 1; color: var(--text); white-space: nowrap; }
.number__l { font-size: .95rem; color: var(--muted); }
.numbers__source { margin-top: 1.8rem; }
@media (max-width: 899px) { .numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } .number__v { font-size: min(7vw, 3.6rem); } }

/* ============================================================
   Clientes (faixa de logos em ida e volta, sem cópia duplicada)
   ============================================================ */
.clients { position: relative; z-index: 2; padding: clamp(3.5rem, 6vw, 5rem) 0; overflow: hidden; }
.clients__title { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.25rem, 2.2vw, 1.7rem); margin-bottom: 2.2rem; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: clamp(2.4rem, 5vw, 4rem); width: max-content; padding: 0 var(--gutter);
  animation: vaivem 46s linear infinite alternate; }
.marquee__track img { height: 40px; width: auto; max-width: none; opacity: .75; transition: opacity .12s var(--ease); }
.marquee__track img.logo--medio { height: 50px; }
.marquee__track img.logo--quadrado { height: 64px; }
.marquee__track img:hover { opacity: 1; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes vaivem { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100vw)); } }
@media (max-width: 767px) { .marquee__track img { height: 36px; } .marquee__track img.logo--medio { height: 44px; } .marquee__track img.logo--quadrado { height: 56px; } }

/* ============================================================
   O problema: De → Para + comparação
   ============================================================ */
.problem__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.4rem; align-items: center; margin-bottom: 3.4rem; }
.problem__img { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 746 / 653; }
.problem__img img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.depara { display: grid; gap: .7rem; min-width: 0; }
@media (max-width: 899px) {
  .problem__grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .problem__img { aspect-ratio: 4 / 3; }
}
.depara__head, .depara__row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(56px, 12vw, 150px) minmax(0, 1fr); align-items: center; gap: 1rem; }
.depara__head span { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.depara__head span:last-child { color: var(--blue-soft); }
.depara__from, .depara__to { display: flex; align-items: center; min-height: 58px; padding: .8rem 1.1rem; border-radius: 12px; font-weight: 600; font-size: 1.02rem; }
.depara__from { border: 1px solid var(--line); background: var(--surface); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(174,174,174,.45); }
.depara__to { border: 1px solid var(--blue); background: var(--blue-tint); color: var(--text); }
.depara__arrow { position: relative; height: 2px; background: var(--line); overflow: visible; }
.depara__arrow i { position: absolute; inset: 0; background: var(--blue); transform-origin: left center; transform: scaleX(0); transition: transform .9s var(--ease) .15s; }
.depara__arrow::after { content: ""; position: absolute; right: -2px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue);
  transform: translateY(-50%) rotate(45deg); }
.depara__row.in .depara__arrow i { transform: scaleX(1); }
@media (max-width: 599px) {
  .depara__head, .depara__row { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: .5rem; }
  .depara__from, .depara__to { font-size: .92rem; padding: .7rem .8rem; min-height: 64px; }
}

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .table-wrap .mk-compare, .table-wrap .mk-compare tbody, .table-wrap .mk-compare tr, .table-wrap .mk-compare th, .table-wrap .mk-compare td { display: block; }
  .table-wrap .mk-compare { min-width: 0; border: 0; border-radius: 0; }
  .table-wrap .mk-compare thead { display: none; }
  .table-wrap .mk-compare tbody { display: grid; gap: .8rem; }
  .table-wrap .mk-compare tbody tr { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
  .table-wrap .mk-compare tbody th { padding: .9rem 1rem; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 800; background: var(--surface-2); }
  .table-wrap .mk-compare td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .6rem 1rem; }
  .table-wrap .mk-compare td::before { content: attr(data-label); font-size: .9rem; color: var(--muted); }
  .table-wrap .mk-compare td.is-miner { order: -1; }
  .table-wrap .mk-compare td.is-miner::before { color: #fff; font-weight: 800; }
  .table-wrap .mk-compare tbody tr { display: flex; flex-direction: column; }
  .table-wrap .mk-compare tbody tr th { order: -2; }
  .table-wrap .mk-compare tbody tr td, .table-wrap .mk-compare tbody tr:last-child td { border-bottom: 1px solid var(--line); }
  .table-wrap .mk-compare tbody tr > :nth-child(3) { border-bottom: 0 !important; }
}
.ic-yes, .ic-no { display: inline-block; width: 22px; height: 22px; vertical-align: middle; border-radius: 50%; }
.ic-yes { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ic-no { border: 1px solid var(--line-2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEAEAE' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ============================================================
   Serviços: bento de 7
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tile { position: relative; display: flex; flex-direction: column; min-height: 340px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface);
  transition: border-color .12s var(--ease); }
.tile--big { grid-column: span 2; }
.tile:hover, .tile:focus-visible { border-color: var(--blue); }
.tile__media { position: absolute; inset: 0; overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6s linear; }
.tile:hover .tile__media img { transform: scale(1.1); }
.tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,.96) 0%, rgba(10,10,11,.7) 38%, rgba(10,10,11,.05) 75%); }
.tile__body { position: relative; margin-top: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: .4rem; }
.tile__title { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 1.25rem; line-height: 1.15; }
.tile__line { color: var(--body); font-size: .98rem; max-width: 40ch; }
.tile__more { margin-top: .5rem; font-size: .85rem; font-weight: 800; color: var(--blue-soft); display: inline-flex; align-items: center; gap: .4rem; }
.tile__more::after { content: ""; width: 14px; height: 2px; background: currentColor; transition: width .12s var(--ease); }
.tile:hover .tile__more::after { width: 22px; }
@media (max-width: 1023px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile--big:first-child { grid-column: span 2; } .tile--big:last-child { grid-column: span 2; } }
@media (max-width: 699px) { .bento { grid-template-columns: minmax(0, 1fr); } .tile--big:first-child, .tile--big:last-child { grid-column: auto; } .tile { min-height: 300px; } }

/* ============================================================
   Método
   ============================================================ */
.method__figure { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #050506; }
.method__figure img { width: 100%; height: auto; }
.pipeline { position: relative; height: 2px; background: var(--line); margin: 2rem 0 1.4rem; overflow: hidden; border-radius: 2px; }
.pipeline__pulse { position: absolute; top: 0; left: -20%; width: 20%; height: 100%; background: linear-gradient(90deg, transparent, var(--blue), transparent); animation: pulso 3.2s linear infinite; }
@keyframes pulso { to { left: 100%; } }
.axes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.axis { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.axis h3 { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .92rem; }
.axis p { color: var(--muted); font-size: .9rem; line-height: 1.35; }
.chip-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 14px; background: var(--soho); flex: 0 0 auto; }
.chip-ic img { width: 78%; height: 78%; object-fit: contain; opacity: 1; }
.deliver__card .chip-ic { width: 76px; height: 76px; border-radius: 16px; }
.chip-ic--sm { width: 46px; height: 46px; }
.chip-ic--lg { width: 104px; height: 104px; border-radius: 22px; margin-top: 2rem; }
@media (max-width: 1023px) { .axes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .axes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pipeline { display: none; } }

/* ============================================================
   Manifesto (21:9)
   ============================================================ */
.manifesto { position: relative; z-index: 2; aspect-ratio: 21 / 9; min-height: 420px; max-height: 760px; width: 100%; overflow: hidden; display: flex; align-items: center; }
.manifesto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.manifesto__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.6) 42%, rgba(10,10,11,.15) 70%), linear-gradient(0deg, rgba(10,10,11,.6), transparent 40%); }
.manifesto__inner { position: relative; }
.manifesto__text { font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 3.8rem); line-height: 1.04; letter-spacing: .005em; max-width: 15ch; }
.manifesto__text span { color: var(--blue-soft); }
@media (max-width: 767px) {
  .manifesto { aspect-ratio: auto; min-height: 520px; align-items: flex-end; padding-bottom: 3rem; }
  .manifesto__img { object-position: 50% 50%; }
  .manifesto__scrim { background: linear-gradient(0deg, rgba(10,10,11,.95) 10%, rgba(10,10,11,.3) 60%, rgba(10,10,11,.2)); }
}

/* ============================================================
   Produtos
   ============================================================ */
.product + .product, .product + .product__pair, .product__pair + .product { margin-top: clamp(2.4rem, 5vw, 4rem); }
.product__name { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.product__line { color: var(--body); margin-top: .4rem; font-size: 1.02rem; }
.product__sub { color: var(--muted); margin-top: .6rem; font-size: .95rem; max-width: 46ch; }
.product__label { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1rem; margin-bottom: 1.2rem; }
.selo { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--blue); background: var(--blue-tint);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-soft); }
.product__crm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30%); gap: 1.2rem; align-items: stretch; }
.product__crm-img { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.product__crm-img img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
@media (max-width: 1023px) { .product__crm-grid { grid-template-columns: minmax(0, 1fr); } .product__crm-img { display: none; } }

.product--portais { position: relative; width: 100%; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); height: clamp(380px, 50vw, 600px); }
.product--portais > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product--portais::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.2) 50%, transparent 70%); }
.product__over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(1.2rem, 3vw, 2.2rem); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.chips li { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(20,20,23,.85); font-size: .9rem; font-weight: 600; }
@media (max-width: 599px) { .product--portais { height: min(120vw, 520px); } .product--portais > img { object-position: 55% 50%; } }

.product__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.product__pair .product { margin-top: 0; }
.product__frame { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 3 / 2; margin-bottom: 1.1rem; }
.product__frame img { width: 100%; height: 100%; object-fit: cover; }
.bars { position: absolute; left: 6%; bottom: 8%; width: 44%; height: 34%; display: flex; align-items: flex-end; gap: 6%; padding: 6% 5% 0;
  background: rgba(10,10,11,.78); border: 1px solid var(--line-2); border-radius: 10px; }
.bars i { flex: 1; height: 0; background: var(--blue); border-radius: 3px 3px 0 0; transition: height .64s var(--ease); }
.bars i:nth-child(1) { --h: 38%; } .bars i:nth-child(2) { --h: 54%; } .bars i:nth-child(3) { --h: 46%; } .bars i:nth-child(4) { --h: 68%; }
.bars i:nth-child(5) { --h: 61%; } .bars i:nth-child(6) { --h: 84%; } .bars i:nth-child(7) { --h: 92%; }
.product--rel.in .bars i { height: var(--h); }
.bars i:nth-child(2) { transition-delay: 80ms; } .bars i:nth-child(3) { transition-delay: 160ms; } .bars i:nth-child(4) { transition-delay: 240ms; }
.bars i:nth-child(5) { transition-delay: 320ms; } .bars i:nth-child(6) { transition-delay: 400ms; } .bars i:nth-child(7) { transition-delay: 480ms; }
@media (max-width: 767px) { .product__pair { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; } }

.product--chat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 2rem; align-items: center; padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
@media (max-width: 899px) { .product--chat { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Miner Company
   ============================================================ */
.company__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem 3rem; align-items: center; }
.company__media { grid-column: 1 / -1; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 21 / 9; }
.company__media img { width: 100%; height: 100%; object-fit: cover; }
.company__logo { height: 30px; width: auto; margin-bottom: 1.4rem; }
.company__title { font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.06; max-width: 20ch; }
.company__text { color: var(--body); margin: 1rem 0 1.8rem; max-width: 44ch; }
.company__aside { display: grid; gap: .8rem; }
.company__card { display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 14px; background: var(--surface); }
.company__card-k { font-family: var(--f-num); font-weight: 700; font-size: 2.4rem; line-height: 1; min-width: 3ch; }
.company__card-v { color: var(--muted); font-size: .95rem; }
@media (max-width: 899px) { .company__inner { grid-template-columns: minmax(0, 1fr); } .company__media { aspect-ratio: 16 / 10; } }

/* ============================================================
   Resultados por setor (também usado nas páginas de serviço)
   ============================================================ */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.case { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.case__media { aspect-ratio: 16 / 9; overflow: hidden; }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__body { padding: 1.5rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.case__sector { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-soft); }
.case__num { font-family: var(--f-num); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; margin-top: .2rem; }
.case__line { color: var(--body); max-width: 44ch; }
.case .source { margin-top: auto; padding-top: .8rem; }
@media (max-width: 767px) { .cases { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Faixa do diagnóstico
   ============================================================ */
.band { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); min-height: 380px; display: flex; align-items: center; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.band__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,11,.94) 0%, rgba(10,10,11,.7) 45%, rgba(10,10,11,.1) 80%); }
.band__inner { position: relative; padding: clamp(1.8rem, 5vw, 4rem); max-width: 640px; }
.band__title { font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.06; margin-bottom: 1.8rem; }
@media (max-width: 599px) { .band { align-items: flex-end; min-height: 460px; } .band__scrim { background: linear-gradient(0deg, rgba(10,10,11,.96) 25%, rgba(10,10,11,.25)); } .band .btn { width: 100%; } }

/* ============================================================
   Time
   ============================================================ */
.team__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.member { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.member img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); transition: filter .22s var(--ease); }
.member:hover img { filter: none; }
.member figcaption { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.member__name { font-weight: 800; font-size: .95rem; }
.member__role { color: var(--muted); font-size: .85rem; }
@media (max-width: 1023px) { .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   Conteúdo (YouTube)
   ============================================================ */
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.video h3 { font-weight: 600; font-size: 1.02rem; margin-top: .9rem; line-height: 1.35; }
.video__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
.video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .36s var(--ease); }
.video__thumb:hover img { transform: scale(1.04); }
.video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--blue); cursor: pointer; display: grid; place-items: center; }
.video__play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.video__tag { position: absolute; left: .7rem; top: .7rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px; background: rgba(10,10,11,.8); border: 1px solid var(--line-2); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }
.content__links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
@media (max-width: 899px) { .videos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .content__links .btn { width: 100%; } }

/* ============================================================
   FAQ (com ícone)
   ============================================================ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.4rem; align-items: start; }
.faq .mk-faq { margin: 0; max-width: none; }
@media (max-width: 899px) { .faq { grid-template-columns: minmax(0, 1fr); } .chip-ic--lg { width: 72px; height: 72px; border-radius: 16px; margin-top: 1.4rem; } }

/* ============================================================
   Contato
   ============================================================ */
.contact { overflow: hidden; }
.contact__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.contact__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,.97) 40%, rgba(10,10,11,.7) 70%, rgba(10,10,11,.3)); }
.contact__inner { position: relative; }
.contact__title { font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.04; margin-bottom: 2.2rem; }
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 3rem; }
.action { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.6rem; min-height: 132px; padding: 1.3rem;
  border: 1px solid var(--line-2); border-radius: 16px; background: rgba(20,20,23,.88); font-weight: 800; font-size: 1.05rem; transition: border-color .12s var(--ease), background .12s var(--ease); }
.action svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--blue-soft); }
.action:hover { border-color: var(--blue); }
.action--main { background: var(--blue); border-color: var(--blue); color: #fff; }
.action--main svg { color: #fff; }
.action--main:hover { background: #5671FF; }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.4rem; align-items: start; }
.contact__list { display: grid; gap: 1.1rem; }
.contact__list li { display: flex; flex-direction: column; gap: .15rem; }
.contact__list span { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.contact__list a, .contact__list address { font-style: normal; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.contact__list a { display: inline-flex; min-height: 44px; align-items: center; }
.contact__where { margin-top: 1.6rem; padding-left: 1rem; border-left: 3px solid var(--blue); color: var(--body); }
.contact__form { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line-2); border-radius: 18px; background: rgba(20,20,23,.94); }
@media (max-width: 1023px) { .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 399px) { .actions { grid-template-columns: minmax(0, 1fr); } .action { min-height: 0; flex-direction: row; align-items: center; } }

/* Campos de formulário (contato e modal): 16px para o celular não dar zoom */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.field label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text); font-family: var(--f-body); font-size: 16px; }
.field input::placeholder { color: var(--muted-2); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(69,98,255,.32); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.form__status { margin-top: .8rem; font-size: .92rem; color: var(--body); min-height: 1.2em; }
.form__status.is-error { color: #FF8A8E; }
.form__status a { color: var(--blue-soft); text-decoration: underline; }

/* ============================================================
   Rodapé
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: 4rem 0 6.5rem; background: var(--bg); }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.wordmark { display: inline-flex; align-items: flex-start; gap: .2rem; font-family: var(--f-num); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--text); }
.wordmark svg { width: 22px; height: 11px; fill: var(--blue); margin-top: .1rem; }
.footer__brand p { color: var(--muted); margin-top: 1rem; max-width: 30ch; font-size: .95rem; }
.footer__col { display: flex; flex-direction: column; }
.footer__col h4 { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .4rem; }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--body); font-size: .95rem; }
.footer__col a:hover { color: var(--text); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); color: var(--muted-2); font-size: .85rem; }
@media (max-width: 899px) { .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .footer__inner { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Revelar ao rolar
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .36s var(--ease), transform .36s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   PÁGINA DE SERVIÇO (molde único)
   ============================================================ */
.svc-hero { position: relative; z-index: 2; padding-top: var(--head); }
.svc-hero__stage { position: relative; aspect-ratio: 21 / 9; min-height: 460px; max-height: calc(100svh - var(--head)); width: 100%; overflow: hidden; display: flex; align-items: flex-end; }
.svc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.svc-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.65) 40%, rgba(10,10,11,.1) 75%), linear-gradient(0deg, rgba(10,10,11,.95) 0%, transparent 45%); }
.svc-hero__inner { position: relative; padding-bottom: clamp(2rem, 5vw, 4rem); }
.crumb { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-soft); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.svc-hero__title { font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.03; max-width: 16ch; }
.svc-hero__sub { color: var(--body); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 46ch; margin-top: 1rem; }
.svc-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
@media (max-aspect-ratio: 6/5) and (max-width: 1023px) {
  .svc-hero__stage { aspect-ratio: 4 / 5; max-height: none; min-height: 0; }
  .svc-hero__scrim { background: linear-gradient(0deg, rgba(10,10,11,.97) 18%, rgba(10,10,11,.55) 52%, rgba(10,10,11,.15)); }
}
@media (max-aspect-ratio: 6/5) and (min-width: 600px) and (max-width: 1023px) { .svc-hero__stage { aspect-ratio: 4 / 4.2; } }
@media (max-height: 520px) { .svc-hero__stage { max-height: none; min-height: 0; aspect-ratio: auto; padding-top: .5rem; } }
@media (max-width: 599px) { .svc-hero__cta .btn { width: 100%; } }

.deliver { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.deliver__card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; gap: .7rem; }
.deliver__card h3 { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.08rem; margin-top: .5rem; }
.deliver__card p { color: var(--body); font-size: .98rem; }
@media (max-width: 899px) { .deliver { grid-template-columns: minmax(0, 1fr); } }

.flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: passo; }
.flow__line { position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--line); }
.flow__line i { position: absolute; inset: 0; background: var(--blue); transform-origin: left center; transform: scaleX(0); transition: transform .9s var(--ease); }
.flow.in .flow__line i { transform: scaleX(1); }
.flow__step { position: relative; display: flex; flex-direction: column; gap: .9rem; }
.flow__n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line-2);
  font-family: var(--f-num); font-weight: 700; font-size: 1.5rem; transition: border-color .36s var(--ease), background .36s var(--ease); }
.flow.in .flow__n { border-color: var(--blue); background: var(--surface); }
.flow.in .flow__step:nth-child(3) .flow__n { transition-delay: .2s; } .flow.in .flow__step:nth-child(4) .flow__n { transition-delay: .4s; } .flow.in .flow__step:nth-child(5) .flow__n { transition-delay: .6s; }
.flow__step p { font-weight: 800; font-size: 1.05rem; line-height: 1.3; max-width: 18ch; }
@media (max-width: 767px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .flow__line { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .flow__line i { transform-origin: center top; transform: scaleY(0); }
  .flow.in .flow__line i { transform: scaleY(1); }
  .flow__step { flex-direction: row; align-items: center; gap: 1.1rem; }
  .flow__step p { max-width: none; }
}

.practice { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.practice--product { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; align-items: center; max-width: none; }
.practice__img { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 3 / 2; }
.practice__img img { width: 100%; height: 100%; object-fit: cover; }
.practice__text { font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.2; }
.practice--chat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 2rem; align-items: center; }
@media (max-width: 899px) { .practice--product, .practice--chat { grid-template-columns: minmax(0, 1fr); } }

.qa { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 2.4rem; align-items: start; }
.qa__list { display: grid; gap: .9rem; }
.qa__item { padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.qa__item h3 { font-weight: 800; font-size: 1.05rem; }
.qa__item p { color: var(--body); margin-top: .35rem; }
@media (max-width: 899px) { .qa { grid-template-columns: minmax(0, 1fr); } }

.svc-close .band__inner { max-width: 680px; }
.band__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.others { margin-top: 2.4rem; }
.others__label { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .8rem; }
.others__chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.others__chips a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: .95rem; transition: border-color .12s var(--ease); }
.others__chips a:hover { border-color: var(--blue); }
@media (max-width: 599px) { .band__cta .btn { width: 100%; } }

/* ============================================================
   Movimento reduzido: direto ao estado final
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 1.6rem; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .pipeline__pulse { display: none; }
  .depara__arrow i, .flow__line i { transform: none !important; }
  .bars i { height: var(--h) !important; }
  .flow__n { border-color: var(--blue); }
  .tile__media img, .tile:hover .tile__media img { transform: none !important; }
}

/* ============================================================
   Página 404
   ============================================================ */
.erro { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem var(--gutter); }
.erro__logo { height: 32px; width: auto; margin-bottom: 2.4rem; }
.erro__code { font-family: var(--f-num); font-weight: 700; font-size: clamp(6rem, 22vw, 12rem); line-height: 1; color: var(--text); border-bottom: 4px solid var(--blue); padding-bottom: .5rem; }
.erro__texto { color: var(--body); margin: 1.6rem 0 2rem; font-size: 1.1rem; max-width: 36ch; }