/* ═══════════════════════════════════════════════════════
   Microset LP – Image-slice approach
   ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: "Microset Display";
  src: url("../assets/fonts/microset-display-regular.woff") format("woff");
  font-style: normal;
  font-weight: 100 500;
  font-display: swap;
}

@font-face {
  font-family: "Microset Display";
  src: url("../assets/fonts/microset-display-bold.woff") format("woff");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

@font-face {
  font-family: "Microset Display";
  src: url("../assets/fonts/microset-display-italic.woff") format("woff");
  font-style: italic;
  font-weight: 100 500;
  font-display: swap;
}

@font-face {
  font-family: "Microset Text";
  src: url("../assets/fonts/microset-text-regular.woff") format("woff");
  font-style: normal;
  font-weight: 100 500;
  font-display: swap;
}

@font-face {
  font-family: "Microset Text";
  src: url("../assets/fonts/microset-text-bold.woff") format("woff");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

@font-face {
  font-family: "Microset Text";
  src: url("../assets/fonts/microset-text-italic.woff") format("woff");
  font-style: italic;
  font-weight: 100 500;
  font-display: swap;
}

@font-face {
  font-family: "Microset Text";
  src: url("../assets/fonts/microset-text-bold-italic.woff") format("woff");
  font-style: italic;
  font-weight: 600 900;
  font-display: swap;
}

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background: #0d0c1e;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── ANIMAÇÕES DE ENTRADA ───────────────────────────────── */
.motion-ready .motion-section {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition:
    opacity 800ms cubic-bezier(.22, 1, .36, 1),
    transform 900ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.motion-ready .motion-section.motion-left {
  transform: translate3d(-48px, 0, 0);
}

.motion-ready .motion-section.motion-right {
  transform: translate3d(48px, 0, 0);
}

.motion-ready .motion-section.motion-scale {
  transform: scale(.965);
}

.motion-ready .motion-section.is-visible {
  opacity: 1;
  transform: none;
}

.motion-ready .motion-media {
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity 750ms cubic-bezier(.22, 1, .36, 1),
    transform 950ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.motion-ready .motion-media.is-visible {
  opacity: 1;
  transform: none;
}

.motion-ready .motion-stagger {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 550ms cubic-bezier(.22, 1, .36, 1),
    transform 650ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-ready .is-visible .motion-stagger,
.motion-ready .motion-stagger.is-visible {
  opacity: 1;
  transform: none;
}

.overlay-link,
.btn-cta,
.btn-submit-blue,
.btn-submit,
.footer-wa {
  transition: transform 220ms ease, filter 220ms ease, background 220ms ease;
}

.overlay-link:hover,
.btn-cta:hover,
.btn-submit-blue:hover,
.btn-submit:hover,
.footer-wa:hover {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.06);
}

/* ── HEADER ────────────────────────────────────────────── */
.header {
  position: relative;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  z-index: 1000;
  background: #35344f;
  height: 130px;
}

.header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc((100vw - 100%) / -2);
  background: #35344f;
  pointer-events: none;
}

.header-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo { height: 54px; display: block; }

.header-nav {
  display: flex;
  gap: 32px;
  margin: 0 auto;
}

.header-nav a {
  color: #c8c5e2;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.header-nav a:hover { color: #fff; }

.btn-cta {
  background: #28b849;
  color: #fff;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}

.btn-cta:hover { background: #1f9f3d; }

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
}

.mobile-menu {
  display: none;
  background: #35344f;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mobile-menu.open {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 20px;
  gap: 16px;
}

.mobile-menu a {
  color: #c8c5e2;
  text-decoration: none;
  font-size: 15px;
}

/* ── PAGE WRAPPER ───────────────────────────────────────── */
.page-wrapper {
  position: relative;
  max-width: 1366px;
  margin: 0 auto;
  padding-top: 0;
}

.anchor-target {
  position: absolute;
  top: 0;
  left: 0;
}

/* ── SECTION BASE (image-slice) ─────────────────────────── */
.sec {
  position: relative;
  width: 100%;
  line-height: 0;
  font-size: 0;
  container-type: inline-size;
  --bleed-left: transparent;
  --bleed-right: transparent;
  z-index: 0;
}

.sec::before,
.sec::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - 100%) / 2 + 1px));
  pointer-events: none;
}

.sec::before {
  right: calc(100% - 1px);
  background: var(--bleed-left);
}

.sec::after {
  left: calc(100% - 1px);
  background: var(--bleed-right);
}

.sec-img {
  display: block;
  width: 100%;
  height: auto;
}

#sec-hero {
  --bleed-left: #35344f;
  --bleed-right: #35344f;
  aspect-ratio: 1366 / 700;
  overflow: visible;
  background: #35344f;
}

#sec-hero::before {
  display: block;
  z-index: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  background: #35344f url("../assets/landing-page-header.png") center top / cover no-repeat;
}

#sec-hero::after {
  display: none;
}

#sec-hero > .sec-img {
  display: none;
}

#sec-numbers {
  --numbers-bg: linear-gradient(135deg, #c7d2f4 0%, #b3c6f7 52%, #93b0ff 100%);
  --bleed-left: var(--numbers-bg);
  --bleed-right: var(--numbers-bg);
  aspect-ratio: 1366 / 696;
  overflow: visible;
  background: var(--numbers-bg);
}

#sec-numbers::before {
  z-index: 0;
  right: auto;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--numbers-bg);
}

#sec-numbers::after {
  display: none;
}

#sec-gargalos,
#sec-solutions,
#sec-clientes {
  --bleed-left: #eaedee;
  --bleed-right: #eaedee;
}

#sec-historia {
  --bleed-left: #eaedee;
  --bleed-right: #eaedee;
  background: #eaedee;
}

/* Mantém a altura da seção, mas remove qualquer arte estática atrás do vídeo. */
#sec-historia > .sec-img {
  visibility: hidden;
}


#sec-gargalos {
  --bleed-left: linear-gradient(to bottom, #b5c6f7 0 6px, #eaedee 6px);
  --bleed-right: linear-gradient(to bottom, #93b0ff 0 6px, #eaedee 6px);
}

#sec-form {
  --bleed-left: linear-gradient(to bottom, #eaedee 0 6px, #485e9a 6px, #485e9a calc(100% - 5px), #eaedee calc(100% - 5px));
  --bleed-right: linear-gradient(to bottom, #eaedee 0 6px, #485e9a 6px, #485e9a calc(100% - 5px), #eaedee calc(100% - 5px));
}

#sec-closing {
  --bleed-left: linear-gradient(to bottom, #eaedee 0 76.6%, #35344f 76.6%);
  --bleed-right: linear-gradient(to bottom, #eaedee 0 76.6%, #000000 76.6%);
}

#footer {
  --bleed-left: #35344f;
  --bleed-right: #000;
}

/* ── TEXTOS REAIS SOBRE O LAYOUT ORIGINAL ───────────────── */
.copy-mask,
.live-copy,
.solutions-photo-clean {
  position: absolute;
}

.copy-mask { z-index: 6; }

.live-copy {
  z-index: 8;
  line-height: 1.25;
  font-size: 1cqw;
  color: #35344f;
  font-family: "Microset Text", Arial, sans-serif;
}

.live-copy h1,
.live-copy h2,
.live-copy h3,
.live-copy p {
  margin: 0;
}

.live-copy em { font-weight: 300; }

.canva-motion {
  display: block;
  transform-origin: center;
}

.motion-ready .canva-fade {
  opacity: 0;
}

.motion-ready .is-visible .canva-fade {
  animation: canva-fade 600ms ease both;
}

.motion-ready .canva-slide-right {
  opacity: 0;
  transform: translateX(-80px);
}

.motion-ready .is-visible .canva-slide-right {
  animation: canva-slide-right 600ms ease var(--canva-delay, 0ms) both;
}

.motion-ready .header .canva-slide-right {
  animation: canva-slide-right 500ms ease var(--canva-delay, 0ms) both;
}

.motion-ready .canva-pop {
  opacity: 0;
  transform: scale(.9);
}

.motion-ready .is-visible .canva-pop {
  animation:
    canva-pop-scale 4000ms linear 0ms both,
    canva-pop-opacity 500ms ease var(--canva-delay, 0ms) both;
}

@keyframes canva-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes canva-slide-right {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes canva-pop-opacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes canva-pop-scale {
  0% { transform: scale(.9); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Hero */
.hero-copy-mask {
  top: 10%;
  left: 47%;
  width: 44%;
  height: 67%;
  background: #35344f;
}

.hero-copy {
  top: 15.3%;
  left: 48.9%;
  width: 42%;
  color: #fff;
}

.hero-copy h1 {
  font-size: 3.45cqw;
  line-height: 1.01;
  font-weight: 750;
  letter-spacing: -.04em;
}

.hero-copy p {
  margin-top: 2.15cqw;
  color: #f3f3fa;
  font-size: 1.43cqw;
  line-height: 1.62;
}

.hero-copy p span {
  display: block;
}

/* Números — fonte de exibição idêntica ao Canva */
@font-face {
  font-family: "Numbers Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/num-heavy.woff") format("woff");
}
@font-face {
  font-family: "Numbers Display";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/num-lightitalic.woff") format("woff");
}
@font-face {
  font-family: "Numbers Display";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/num-heavyitalic.woff") format("woff");
}
@font-face {
  font-family: "Numbers Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/num-regular.woff") format("woff");
}

/* Números */
#sec-numbers > .sec-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  visibility: hidden;
}

.numbers-scene {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.numbers-asset {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  transform-origin: center;
  will-change: opacity, transform;
}

.numbers-photo {
  object-fit: cover;
  object-position: center;
  border-radius: 1.55cqw;
  filter: drop-shadow(0 14px 22px rgba(53, 52, 79, .08));
}

/* caixas de recorte exatas do Canva (largura × altura) */
.numbers-hands  { top: 5.56%;  left: 57.39%; width: 16.65%; height: 42.70%; }
.numbers-chart  { top: 29.94%; left: 45.50%; width: 16.65%; height: 25.34%; }
.numbers-market { top: 45.89%; left: 57.42%; width: 16.65%; height: 25.34%; }
.numbers-noc    { top: 39.44%; left: 71.67%; width: 12.23%; height: 28.20%; }

/* fotos: ordem de pintura interna igual ao Canva */
.numbers-hands { z-index: 2; }
.numbers-market { z-index: 4; }
.numbers-chart { z-index: 5; }
.numbers-noc { z-index: 6; }

/* Retângulos (contorno roxo arredondado) — idênticos ao Canva */
.numbers-rect {
  position: absolute;
  display: block;
  border: 0.16cqw solid #8c52ff;
  border-radius: 3.66cqw;
  background: transparent;
  pointer-events: none;
}
/* ordem de camadas igual ao Canva:
   rect-b (atrás) < mãos < rect-a (sobre as mãos) < mercado < gráfico < NOC < rect-c (sobre tudo) */
.numbers-rect-a { top: 9.66%; left: 72.60%; width: 20.29%; height: 31.85%; z-index: 3; }
.numbers-rect-b { top: 45.89%; left: 37.29%; width: 23.89%; height: 32.90%; z-index: 1; }
.numbers-rect-c { top: 64.83%; left: 69.85%; width: 19.08%; height: 26.44%; z-index: 7; }

.numbers-title-mask {
  top: 34%;
  left: 4.5%;
  width: 30%;
  height: 34%;
  background: linear-gradient(100deg, #c3cff4, #b9c9f6);
}

.numbers-title {
  top: 35.8%;
  left: 5.34%;
  width: 32%;
  color: #35344f;
}

.numbers-title h2 {
  margin-left: 2.44cqw;
  font-family: "Numbers Display", "Microset Text", Arial, sans-serif;
  font-size: 4.35cqw;
  line-height: .95;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.037em;
}

.numbers-title p {
  font-family: "Numbers Display", "Microset Text", Arial, sans-serif;
  font-size: 3.9cqw;
  line-height: .96;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -.084em;
}

.numbers-title p span,
.numbers-title p em {
  display: inline-block;
}

.numbers-title p span { margin-left: 4.24cqw; }

.numbers-title p em {
  margin-left: 0;
  font-size: 1.35em;
  font-weight: 300;
  font-style: italic;
}

.number-mask {
  background: #a9befa;
  z-index: 7;
}

.number-mask-a { top: 14%; left: 74.6%; width: 16.4%; height: 25%; }
.number-mask-b { top: 57%; left: 38.6%; width: 20.8%; height: 18%; }
.number-mask-c { top: 70%; left: 71.5%; width: 14.7%; height: 16%; }

/* Métricas: número e legenda posicionados INDEPENDENTEMENTE e alinhados à
   esquerda, exatamente como no Canva (a legenda fica indentada à direita,
   abaixo do número). */
.metric-num,
.metric-lbl {
  position: absolute;
  color: #35344f;
  z-index: 8;
  text-align: left;
  font-family: "Numbers Display", "Microset Text", Arial, sans-serif;
}

.metric-num {
  font-size: 5.57cqw;      /* Canva escala o texto: renderiza ~76px (não os 101px nominais) */
  line-height: 1.34;        /* caixa ~103px como no Canva (centraliza o número na altura certa) */
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.073em;
  white-space: nowrap;
}

.metric-lbl {
  font-size: 1.17cqw;       /* 16px @1366 */
  line-height: 1.25;         /* 20px @16px */
  font-weight: 400;
  letter-spacing: -.022em;
}

/* posições exatas do Canva (topo/esquerda em % de 1366×696) */
.metric-num-a { left: 75.57%; top: 11.94%; letter-spacing: -.073em; }
.metric-lbl-a { left: 79.51%; top: 25.30%; }
.metric-num-b { left: 40.58%; top: 56.26%; letter-spacing: -.022em; }
.metric-lbl-b { left: 43.83%; top: 69.58%; }
.metric-num-c { left: 72.61%; top: 69.27%; letter-spacing: -.022em; }
.metric-lbl-c { left: 75.92%; top: 82.16%; }

/* Gargalos */
.gargalos-title-mask {
  top: 29%;
  left: 4.5%;
  width: 30%;
  height: 42%;
  background: #eaedee;
}

.gargalos-title {
  top: 32.5%;
  left: 5.7%;
  width: 29%;
  color: #57427c;
  font-family: "Microset Display", Arial, sans-serif;
}

.gargalos-title small {
  display: block;
  margin-bottom: 1.1cqw;
  font-size: 1cqw;
}

.gargalos-title h2 {
  font-size: 2.95cqw;
  line-height: 1.08;
  font-weight: 750;
}

.gargalos-title h2 em { font-weight: 300; }

.card-copy-mask {
  top: 31%;
  height: 37%;
  width: 14.2%;
  background: #eaedee;
}

.card-copy-mask-1 { left: 43.4%; }
.card-copy-mask-2 { left: 61.1%; }
.card-copy-mask-3 { left: 78.8%; }

.issue-copy {
  top: 31.7%;
  width: 14%;
  color: #35344f;
  text-align: center;
}

.issue-copy-1 { left: 43.5%; }
.issue-copy-2 { left: 61.2%; }
.issue-copy-3 { left: 78.9%; }

.issue-copy h3 {
  font-size: 1.25cqw;
  line-height: 1.05;
  font-weight: 800;
}

.issue-copy p {
  margin-top: 2cqw;
  font-size: .87cqw;
  line-height: 1.35;
}

.mobile-gargalos-cards {
  display: none;
}

/* Soluções */
.solutions-photo-clean {
  display: none;
}

.solutions-heading {
  display: none;
}

.solutions-heading small {
  display: block;
  margin-left: 17%;
  margin-bottom: 1.1cqw;
  font-size: 1cqw;
}

.solutions-heading h2 {
  font-size: 3.45cqw;
  line-height: 1.02;
  font-weight: 750;
  letter-spacing: -.035em;
}

.solutions-heading h2 em { font-weight: 300; }

.solution-copy-mask {
  z-index: 7;
  top: 40%;
  width: 23%;
  height: 34%;
  background: #2b4088;
}

.solution-copy-mask-1 { left: 12%; }
.solution-copy-mask-2 { left: 38%; }
.solution-copy-mask-3 { left: 64%; }

.solution-copy {
  z-index: 8;
  top: 41%;
  width: 23%;
  color: #fff;
  text-align: center;
}

.solution-copy-1 { left: 12%; }
.solution-copy-2 { left: 38%; }
.solution-copy-3 { left: 64%; }

.solution-copy h3 {
  font-size: 1.65cqw;
  font-weight: 750;
  line-height: 1.1;
}

.solution-copy p {
  margin-top: 5.3cqw;
  font-size: 1.55cqw;
  line-height: 1.48;
}

/* Clientes */
.clientes-copy-mask {
  top: 5%;
  left: 24%;
  width: 52%;
  height: 52%;
  background: #eaedee;
}

.clientes-copy {
  top: 13%;
  left: 24%;
  width: 52%;
  color: #5270ff;
  text-align: center;
}

.clientes-copy small {
  display: block;
  margin-bottom: 1.1cqw;
  font-size: 1cqw;
}

.clientes-copy h2 {
  font-size: 3.65cqw;
  line-height: 1;
  font-weight: 750;
}

.clientes-copy h2 em { font-weight: 300; }

/* Formulário */
.form-copy-mask {
  top: 18%;
  left: 4.5%;
  width: 29%;
  height: 59%;
  background: #485e9a;
}

.form-copy {
  top: 26.5%;
  left: 5.7%;
  width: 29%;
  color: #fff;
}

.form-copy small { font-size: 1cqw; }

.form-copy h2 {
  margin-top: 1.6cqw;
  font-size: 3.45cqw;
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -.04em;
}

.form-copy h2 strong { font-weight: 750; }

.form-copy p {
  margin-top: 1.7cqw;
  font-size: 1.45cqw;
  line-height: 1.4;
}

.form-copy p em { font-weight: 750; }

/* Encerramento */
.closing-copy-mask {
  top: 10%;
  left: 4.5%;
  width: 30%;
  height: 58%;
  background: #eaedee;
}

.closing-copy {
  top: 11.8%;
  left: 5.65%;
  width: 29%;
  color: #57427c;
  font-family: "Microset Display", Arial, sans-serif;
}

.closing-copy small { font-size: 1cqw; }

.closing-copy h2 {
  margin-top: 1.2cqw;
  font-size: 2.9cqw;
  line-height: 1.08;
  font-weight: 750;
}

.closing-copy p {
  margin-top: 1.7cqw;
  color: #35344f;
  font-size: 1.42cqw;
  line-height: 1.38;
}

/* ── TRANSPARENT OVERLAY LINKS ──────────────────────────── */
.overlay-link {
  position: absolute;
  display: block;
  cursor: pointer;
  z-index: 10;
}

.hero-video {
  position: absolute;
  z-index: 5;
  top: 10.43%;
  left: 7.32%;
  width: 37.63%;
  height: 65%;
  display: block;
  object-fit: cover;
  border: 0;
  border-radius: 34px;
  background: transparent;
  opacity: 0;
}

.hero-video.is-ready {
  opacity: 1;
}

.motion-ready .hero-video {
  opacity: 0;
  transform: translateX(-80px);
}

.motion-ready #sec-hero.is-visible .hero-video.is-ready {
  animation: canva-hero-video 500ms ease 1400ms both;
}

.motion-ready #sec-hero > .sec-img,
.motion-ready #sec-numbers > .sec-img {
  opacity: 0;
}

.motion-ready #sec-numbers > .sec-img {
  transform: scale(.985);
}

.motion-ready #sec-hero.is-visible > .sec-img {
  animation: canva-hero-bg-arrive 700ms ease both;
}

.motion-ready #sec-numbers.is-visible > .sec-img {
  animation: canva-bg-arrive 700ms ease 80ms both;
}

/* Fotos e retângulos: entrada em cascata como no Canva.
   O estado inicial só entra quando o JS adiciona .numbers-anim. */
.numbers-anim .numbers-asset,
.numbers-anim .numbers-rect {
  opacity: 0;
  transform: translateX(var(--card-x, 56px)) scale(.9);
  transition:
    opacity .62s ease,
    transform .78s cubic-bezier(.16, .92, .24, 1);
  transition-delay: var(--card-delay, 0ms);
}

.numbers-anim .numbers-rect {
  transform: translateX(var(--card-x, 56px)) scale(.96);
}

.numbers-anim .numbers-rect-b,
.numbers-anim .numbers-chart {
  --card-x: -56px;
}

.numbers-anim .numbers-asset.is-in,
.numbers-anim .numbers-rect.is-in {
  opacity: 1;
  transform: none;
}

/* Textos: fade + leve subida + zoom, em cascata escalonada (igual ao Canva).
   O estado inicial só é aplicado quando o JS ativa (.numbers-anim), evitando
   sumir o conteúdo caso o JS não rode. */
.numbers-anim .numbers-reveal {
  opacity: 0;
  transform: translateY(28px) scale(.9);
  transform-origin: center;
  transition: opacity .7s ease, transform .75s cubic-bezier(.22, .9, .26, 1);
  transition-delay: var(--rvl-delay, 0ms);
  will-change: opacity, transform;
}

.numbers-anim .numbers-reveal.is-in {
  opacity: 1;
  transform: none;
}

@keyframes canva-hero-video {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes canva-bg-arrive {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes canva-hero-bg-arrive {
  from { opacity: 0; transform: translateX(-50%) scale(.985); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes numbers-card-arrive {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ── VIDEO OVERLAY ──────────────────────────────────────── */
.overlay-video {
  position: absolute;
  z-index: 10;
  border-radius: 18px;
  overflow: hidden;
  background: #eaedee;
}

.overlay-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── VÍDEO "UMA HISTÓRIA" ──────────────────────────────── */
.historia-video {
  position: absolute;
  z-index: 20;
  top: -15.7895%; /* 90 px acima do recorte de 570 px */
  left: 6.368%;   /* x = 87 px em 1366 px */
  width: 87.189%; /* 1191 px em 1366 px */
  height: 100%;   /* 570 px: proporção exata do retângulo */
  overflow: hidden;
  border-radius: clamp(12px, 2.635vw, 36px);
  background: #eaedee; /* mesmo fundo da seção original enquanto o vídeo carrega */
  box-shadow: 0 0 0 2px #eaedee; /* elimina frestas de subpixel sobre a arte escura anterior */
}

/* Wrapper que recebe a animação de entrada (a moldura acima fica sempre sólida) */
.historia-video-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Vídeo em "cover": preenche toda a moldura larga sem faixas pretas nas laterais */
.historia-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 100%;
  border: 0;
  display: block;
}

.motion-ready .canva-case-media {
  opacity: 0;
  transform: scale(.75);
  transform-origin: center;
}

.motion-ready #sec-historia.is-visible .canva-case-media {
  animation: canva-case-video 550ms ease 350ms both;
}

@keyframes canva-case-video {
  from { opacity: 0; transform: scale(.75); }
  to { opacity: 1; transform: scale(1); }
}

/* ── FORM SECTION ───────────────────────────────────────── */
.sec-form {
  line-height: 0;
  font-size: 0;
}

/* Overlay do painel escuro sobre a imagem de fundo */
.form-panel {
  position: absolute;
  top: 0.76%;
  left: 39.24%;
  width: 54.03%;
  height: 88.23%;
  background: #35344f;
  border-radius: 36px;
  padding: 32px 52px 24px;
  display: flex;
  align-items: center;
  z-index: 10;
  box-sizing: border-box;
}

.lead-form { width: 100%; }

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 46px;
}

.fg { margin-bottom: 10px; }

.fl {
  display: block;
  color: #c5cae9;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: normal;
}

.fl span { color: #00a5ff; }

.fi {
  width: 100%;
  height: 70px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(53, 52, 79, 0) 10%,
    #353651 24%,
    #383b5a 43%,
    #414562 68%,
    #4c4e68 86%,
    #52536b 100%
  );
  border: 0;
  border-radius: 0 999px 999px 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  color: #d7daf0;
  font-size: 14px;
  padding: 0 18px;
  outline: none;
  transition: filter 0.2s;
  font-family: inherit;
  line-height: normal;
}

.fi:focus { filter: brightness(1.08); }

.fi::placeholder { color: #c7cae5; opacity: 1; }

.fi-select {
  cursor: pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(53, 52, 79, 0) 10%,
      #353651 24%,
      #383b5a 43%,
      #414562 68%,
      #4c4e68 86%,
      #52536b 100%
    );
  background-repeat: no-repeat;
  background-position: right 18px center, 0 0;
  background-size: 12px 8px, 100% 100%;
  padding-right: 40px;
}

.fi-select option {
  background-color: #35344f;
  color: #d7daf0;
}

/* Blue submit button */
.btn-submit-blue {
  width: 100%;
  height: 61px;
  background: linear-gradient(90deg, #4c63a5 0%, #4f65a7 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  display: block;
  text-align: center;
  margin-top: 4px;
  font-family: inherit;
  transition: background 0.2s;
  line-height: normal;
}

.btn-submit-blue:hover { background: #3245b8; }
.btn-submit-blue:disabled { opacity: 0.6; cursor: not-allowed; }

/* Green WA submit button */
.btn-submit {
  width: 100%;
  height: 61px;
  background: linear-gradient(90deg, #31c34a 0%, #37bb4a 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.2s;
  line-height: normal;
  box-sizing: border-box;
}

.btn-submit:hover { background: #1fba58; }

.form-feedback {
  margin-top: 4px;
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
  min-height: 16px;
  color: #25d366;
}

.form-feedback.error { color: #ff6b6b; }

/* ── FOOTER SECTION ─────────────────────────────────────── */
.sec-footer { line-height: 0; }

.footer-whatsapp-mask {
  position: absolute;
  top: -12%;
  left: 89.3%;
  width: 7.2%;
  height: 44%;
  z-index: 7;
  display: none;
  background: #000;
  pointer-events: none;
}

/* ── WHATSAPP DO RODAPÉ ─────────────────────────────────── */
.footer-wa {
  position: fixed;
  right: clamp(16px, 3vw, 42px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: 1200;
  width: clamp(54px, 4.5vw, 72px);
  aspect-ratio: 1;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.footer-wa:hover { transform: scale(1.08); }

.footer-wa.is-footer-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(.96);
}

.footer-wa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.popup-open .footer-wa {
  display: none;
}

/* ── POPUP ──────────────────────────────────────────────── */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 42px);
}

.popup-overlay.active { display: flex; }

.popup {
  width: min(480px, 78vw, calc((100vh - 128px) * 0.8));
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
}

.popup-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.popup-close { top: 5.1%; left: 78.2%; width: 13.2%; height: 10.6%; }
.popup-whatsapp { top: 50.8%; left: 18.7%; width: 60.6%; height: 7%; }
.popup-facebook { top: 75.1%; left: 19.9%; width: 10%; height: 8.6%; }
.popup-instagram { top: 75.1%; left: 32.5%; width: 10%; height: 8.6%; }
.popup-linkedin { top: 75.1%; left: 44.1%; width: 10.7%; height: 8.6%; }
.popup-youtube { top: 75.1%; left: 55.6%; width: 10.7%; height: 8.6%; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .header {
    height: 92px;
  }

  .header-inner {
    justify-content: center;
    padding: 0 20px;
  }

  .header-logo {
    height: 46px;
  }

  .header-nav { display: none; }
  .btn-cta { display: none; }
  .mobile-toggle {
    display: block;
    position: absolute;
    right: 18px;
  }

  .mobile-menu .btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: fit-content;
  }
}

@media (max-width: 768px) {
  .overlay-video { display: none; }

  #sec-hero {
    aspect-ratio: 1366 / 900;
  }

  .hero-copy {
    top: 19%;
    left: 44%;
    width: 52%;
  }

  .hero-copy h1 {
    font-size: 3.7cqw;
    line-height: 1.03;
  }

  .hero-copy p {
    margin-top: 1.25cqw;
    font-size: 1.95cqw;
    line-height: 1.3;
  }

  .hero-copy p span {
    display: inline;
  }

  .hero-copy p span::after {
    content: " ";
  }

  .hero-video {
    top: 25%;
    left: 6.4%;
    width: 34.8%;
    height: 47%;
    border-radius: 18px;
  }

  #sec-gargalos .overlay-link,
  #sec-solutions .overlay-link,
  #sec-closing .overlay-link {
    min-width: 44px;
    min-height: 44px;
  }

  .mobile-gargalos-cards {
    display: none;
  }

  #sec-clientes {
    --bleed-left: #eaedee;
    --bleed-right: #eaedee;
    background: #eaedee;
    padding: 34px 20px 0;
    line-height: normal;
    font-size: 16px;
  }

  #sec-clientes > .sec-img {
    display: none;
  }

  .clientes-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    color: #5270ff;
    text-align: center;
  }

  .clientes-copy small {
    margin-bottom: 6px;
    font-size: 8px;
  }

  .clientes-copy h2 {
    font-size: 20px;
    line-height: 1.05;
  }

  #sec-historia {
    --bleed-left: #eaedee;
    --bleed-right: #eaedee;
    background: #eaedee;
    padding: 18px 20px 22px;
    line-height: normal;
    font-size: 16px;
  }

  #sec-historia > .sec-img {
    display: none;
  }

  .historia-video {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    box-shadow: none;
  }

  #sec-closing {
    --bleed-left: #eaedee;
    --bleed-right: #eaedee;
    background: #eaedee;
    padding: 30px 20px 36px;
    line-height: normal;
    font-size: 16px;
  }

  #sec-closing > .sec-img {
    display: none;
  }

  .closing-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-bottom: 18px;
    color: #57427c;
  }

  .closing-copy small {
    font-size: 12px;
  }

  .closing-copy h2 {
    margin-top: 10px;
    font-size: clamp(28px, 7.4vw, 36px);
    line-height: 1.08;
  }

  #sec-closing .closing-action {
    display: none;
  }

  #sec-closing .overlay-video {
    display: block;
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    margin: 0;
  }

  #footer {
    background: linear-gradient(90deg, #141226 0%, #000 100%);
    padding-bottom: 0;
  }

  .footer-whatsapp-mask {
    display: none;
  }

  #sec-numbers {
    padding: 0;
    aspect-ratio: 1366 / 696;
    background: linear-gradient(135deg, #c7d3fb 0%, #9db7ff 100%);
    line-height: 0;
    font-size: 0;
    container-type: inline-size;
  }

  #sec-numbers > .sec-img {
    display: block;
    visibility: hidden;
  }

  .numbers-title,
  .metric {
    position: absolute;
  }

  .numbers-title {
    top: 35.8%;
    left: 5.34%;
    width: 32%;
    text-align: left;
    margin-bottom: 0;
  }

  .numbers-title h2 {
    margin-left: 2.44cqw;
    font-size: 4.35cqw;
    line-height: .95;
  }

  .numbers-title p {
    font-size: 3.9cqw;
    line-height: .96;
    letter-spacing: -.084em;
  }

  .numbers-title p span { margin-left: 4.24cqw; }
  .numbers-title p em { margin-left: 0; }

  .metric {
    min-height: 0;
    margin-top: 0;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .metric strong {
    font-size: 6.45cqw;
    letter-spacing: -.07em;
  }

  .metric span {
    margin-top: .55cqw;
    font-size: 1.12cqw;
    line-height: 1.28;
  }

  .metric-a { top: 16%;   left: 72.6%; width: 15.5%; }
  .metric-b { top: 57.5%; left: 36.8%; width: 20%; }
  .metric-c { top: 71.5%; left: 70.7%; width: 14%; }

  .footer-wa {
    width: 58px;
    right: 16px;
    bottom: 16px;
  }

  .popup {
    width: min(76vw, 360px, calc((100vh - 128px) * 0.8));
  }

  #sec-form {
    --bleed-left: #485e9a;
    --bleed-right: #485e9a;
    background: #485e9a;
    padding: 30px 20px 34px;
    line-height: normal;
    font-size: 16px;
    overflow: visible;
  }

  #sec-form > .sec-img {
    display: none;
  }

  .form-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0 0 22px;
    color: #fff;
  }

  .form-copy small {
    font-size: 12px;
  }

  .form-copy h2 {
    margin-top: 10px;
    font-size: clamp(30px, 8.2vw, 38px);
    line-height: 1.08;
    letter-spacing: 0;
  }

  .form-panel {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding: 22px 18px 18px;
    border-radius: 22px;
    display: block;
  }

  .lead-form,
  .fg,
  .fi,
  .btn-submit-blue,
  .btn-submit {
    min-width: 0;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .fg {
    margin-bottom: 14px;
  }

  .fl {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .fi {
    height: 50px;
    border-radius: 0 28px 28px 0;
    font-size: 14px;
    padding: 0 16px;
  }

  .fi-select {
    background-position: right 16px center, 0 0;
    background-size: 12px 8px, 100% 100%;
    padding-right: 38px;
  }

  .btn-submit-blue,
  .btn-submit {
    height: 52px;
    font-size: 14px;
    padding: 0 16px;
  }

  .btn-submit {
    margin-top: 14px;
  }

  .btn-submit svg {
    flex: 0 0 auto;
  }

  .form-feedback {
    margin-top: 8px;
    font-size: 12px;
  }

  .form-layout { flex-direction: column; }
  .form-left-col { display: none; }
  .form-right-col { padding: 24px 16px 32px; min-height: auto; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .motion-ready .motion-section,
  .motion-ready .motion-media,
  .motion-ready .motion-stagger,
  .motion-ready .canva-motion,
  .motion-ready #sec-hero > .sec-img,
  .motion-ready #sec-numbers > .sec-img,
  .motion-ready .numbers-asset,
  .motion-ready .numbers-rect,
  .motion-ready .numbers-reveal,
  .motion-ready .hero-video,
  .motion-ready .canva-case-media {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

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