/* --- PAGE HOME --- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-light);
  touch-action: pan-y;
  /* Faixa clara de baixo: a altura do raio do canto do painel (88/865 da largura dele), para o azul não aparecer fora da curva. */
  --hero-band: max(56px, 5.82vw);
}

.hero.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Camada 1: fundo claro animado. Só transform e opacity, tons entre primary-500 e o fundo atual. */
/* Termina acima da faixa clara de baixo (--hero-band): ela é do fundo do hero, e o painel escuro desce até ela. */
.hero__waves {
  position: absolute;
  inset: 0 0 var(--hero-band);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(120deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
}

.hero__wave {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform, opacity;
}

.hero__wave--1 {
  width: 70%;
  left: -12%;
  top: -35%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-secondary-300) 55%, transparent), transparent);
  animation: hero-wave-a 24s ease-in-out -7s infinite;
}

.hero__wave--2 {
  width: 55%;
  left: 30%;
  top: 10%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary-300) 50%, transparent), transparent);
  animation: hero-wave-b 30s ease-in-out -19s infinite;
}

.hero__wave--3 {
  width: 62%;
  left: -18%;
  top: 30%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary-400) 55%, transparent), transparent);
  animation: hero-wave-c 18s ease-in-out -4s infinite;
}

.hero__wave--4 {
  width: 48%;
  right: -10%;
  top: -25%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-secondary-400) 45%, transparent), transparent);
  animation: hero-wave-a 27s ease-in-out -14s infinite reverse;
}

@keyframes hero-wave-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
  50% { transform: translate3d(10%, 8%, 0) scale(1.15); opacity: 0.55; }
}

@keyframes hero-wave-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0.6; }
  50% { transform: translate3d(-14%, 6%, 0) scale(0.92); opacity: 0.95; }
}

@keyframes hero-wave-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0.75; }
  50% { transform: translate3d(12%, -10%, 0) scale(1.12); opacity: 0.5; }
}

.hero.is-offscreen .hero__wave,
.hero.is-offscreen .hero-float {
  animation-play-state: paused;
}

/* Carrossel: slides empilhados na mesma célula, crossfade de 550 ms. */
.hero__slides {
  position: relative;
  z-index: 1;
  display: grid;
}

.hero-slide {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  padding-top: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 550ms ease, visibility 0s linear 550ms;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 550ms ease, visibility 0s;
}

/* Camada 2: painel escuro com as linhas. Medidas do frame de 1512 px. */
.hero-slide__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 57.2%;
  aspect-ratio: 865 / 773;
  background: url("../../assets/home/hero/panel.svg") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* Camada 3: item 3D. Flutuação no externo (CSS), parallax no interno (JS). */
.hero-float {
  position: absolute;
  right: 6%;
  bottom: 1.5%;
  z-index: 1;
  width: 63.5%;
  pointer-events: none;
  animation: hero-float 7s ease-in-out infinite;
}

.hero-slide:not(.is-active) .hero-float {
  animation-play-state: paused;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(10px); }
  50% { transform: translateY(-10px); }
}

.hero-parallax {
  will-change: transform;
}

.hero-slide__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Layout "right": colunas invertidas e painel espelhado. */
.hero-slide[data-layout="right"] .hero-slide__panel {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}

.hero-slide[data-layout="right"] .hero-float {
  right: auto;
  left: 6%;
}

.hero-slide[data-layout="right"] .hero__text-box {
  width: min(100%, 720px);
  margin-left: auto;
}

/* Desktop: o hero ocupa a viewport. As medidas do frame de 1512 x 902 viram proporções da altura (cqh). */
@media (min-width: 1280px) {
  .hero {
    height: 100vh;
    height: 100svh;
    min-height: 800px;
    container-type: size;
    --hero-band: max(56px, 9.8cqh);
  }

  .hero-slide__panel {
    width: auto;
    height: 85.7cqh;
  }

  .hero-float {
    right: 10.2cqh;
    bottom: 1.5cqh;
    width: 106.4cqh;
  }

  .hero-slide[data-layout="right"] .hero-float {
    right: auto;
    left: 10.2cqh;
  }
}

.hero .container {
  position: relative;
  z-index: 2;
}

/* Pontos: a pílula do design vira o controle do carrossel. */
.hero__dots {
  position: absolute;
  right: 0;
  bottom: calc(var(--hero-band) / 2 - 14px);
  left: 0;
  z-index: 3;
  pointer-events: none;
}

.hero__dots-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-40);
  background: var(--color-neutral-200);
  pointer-events: auto;
}

.hero__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-neutral-400);
  cursor: pointer;
  transition: width 300ms ease, background-color 300ms ease;
}

.hero__dot::before {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

.hero__dot[aria-current="true"] {
  width: 24px;
  background: var(--color-primary-900);
}

.hero__dot:focus-visible {
  outline: 2px solid var(--color-primary-900);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero__wave,
  .hero-float {
    animation: none;
  }

  .hero-slide,
  .hero-slide.is-active,
  .hero__dot {
    transition: none;
  }
}

.hero__text-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 893px;
}

.hero__actions {
  display: flex;
  align-items: center;
}

.hero .overline {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  opacity: 1;
  margin-bottom: 15px;
}

.hero .display-text {
  max-width: 893px;
  margin-bottom: 0;
  font-size: 64px;
  font-weight: 300;
  line-height: 1.2;
  background: var(--gradient-text-marquee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* O frame da Home usa 16px / 1.7 neste parágrafo. Body Large do Design System é 18px / 26px. */
.hero .body-large {
  color: var(--color-white);
  font-size: 16px;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: var(--space-16);
  max-width: 547px;
}

/* --- PARCEIROS --- */
.partners { 
  padding: 100px 0; 
  background-color: var(--color-bg-light); 
  text-align: center; 
}

.partners__header {
  margin-bottom: var(--space-40);
}

/* Título 32px, Light, com Gradiente Textual */
.partners__title { 
  font-size: 32px; 
  font-weight: 300;
  line-height: 1.2;
  background: var(--gradient-text-partners);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

/* Descrição 16px */
.partners__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-neutral-400);
}

/* --- CARROSSEL INFINITO --- */
.partners__carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Máscara de fade (gradiente de opacidade) nas extremidades */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.partners__carousel-track {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  width: max-content;
  /* Animação com duração de 25s, linear para fluidez contínua */
  animation: scrollPartners 25s linear infinite;
}

.partners__carousel-track img {
  width: 205px;
  height: 93px;
  object-fit: contain;
  background-color: var(--color-white);
  border-radius: var(--radius-24);
  /* Suavização para quando o cursor passar em cima (opcional) */
  transition: transform 0.3s ease;
}

/* Opcional: Pausa a rolagem se o usuário colocar o mouse em cima */
.partners__carousel-wrapper:hover .partners__carousel-track {
  animation-play-state: paused;
}

/* A animação move a trilha exatamente metade do seu tamanho real (as 6 imagens) */
@keyframes scrollPartners {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 12px)); }
}

/* --- DIFERENCIAIS --- */
.differentials { 
  padding: 100px 0; 
  background-color: var(--color-bg-light); /* Ou white, caso queira contraste com os cards */
}

.diff-grid { 
  display: flex; 
  gap: 40px; 
}

.diff-intro { 
  flex: 1; 
  padding-right: 24px;
}

.diff-intro__overline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-900);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.diff-intro .body-medium {
  color: var(--color-neutral-400);
  line-height: 1.6;
}

.diff-intro__title {
  font-size: 32px;
  font-weight: 300;
  background: var(--gradient-text-diff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
  line-height: 1.2;
}

/* Base do Card (Branco com 8px de padding) */
.diff-cards {
  flex: 2;
  display: flex;
  gap: var(--space-24);
}

.diff-card__desc {
  margin-top: var(--space-16);
}

/* --- BANNER ROTATIVO (MARQUEE) --- */
.marquee {
  width: 100%;
  height: 144px;
  background: var(--gradient-marquee);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.marquee__wrapper {
  width: 100%;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  /* Duração de 20s, ajuste se quiser mais rápido ou mais lento */
  animation: scrollMarquee 20s linear infinite; 
}

/* Tipografia com Gradiente */
.marquee__track span {
  font-size: 48px;
  font-weight: 300;
  line-height: 1.2;
  background: var(--gradient-text-marquee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

/* Imagens em formato de pílula */
.marquee__track img {
  width: 176px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-24);
}

@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  /* O deslocamento de 50% e a compensação de metade do gap (16px) criam um loop perfeito */
  100% { transform: translateX(calc(-50% - 16px)); } 
}

/* --- SOLUÇÕES --- */
.solutions {
  padding: 88px 0 80px;
  position: relative;
  overflow-x: hidden; 
  container-type: inline-size;
  --sol-text-gap: 45px;
}

.solutions::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: calc(50cqw + 42px);
  background: var(--gradient-solutions);
  border-radius: 0 0 80px 0;
  z-index: 0;
}

.sol__container {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 40px;
}

/* Coluna Esquerda */
.sol-text-column { flex: 0 0 459px; max-width: 459px; padding-right: 0; position: relative; z-index: 2; }
.sol-text-column .heading-2 {
  margin-bottom: var(--space-24);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--gradient-text-marquee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sol-text-column .body-medium { opacity: 1; margin-bottom: var(--space-40); color: var(--color-white); line-height: 1.6; }

.sol-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.sol-item { position: relative; padding-bottom: 8px; }
.sol-tab { width: 100%; text-align: left; background: transparent; border: none; color: var(--color-white); font-size: 14px; font-weight: 400; font-family: var(--font-family-base); cursor: pointer; opacity: 1; transition: opacity var(--transition-base); padding: 10px 10px 8px; }
.sol-item:hover .sol-tab, .sol-item.is-active .sol-tab { opacity: 1; }
.sol-item.is-active .sol-tab { font-weight: 600; }

.sol-progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: color-mix(in srgb, var(--color-white) 24%, transparent); }
.sol-progress-fill { height: 100%; width: 0%; background-color: var(--color-white); }
.sol-item.is-active .sol-progress-fill { width: calc(var(--sol-progress, 0) * 100%); }

/* --- Coluna Direita (Galeria e Texto Livre) --- */
.sol-slider-column {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  min-width: 0; 
}

/* Palco: o card da frente e o texto abaixo compartilham a mesma largura. */
.sol-gallery {
  position: relative;
  width: 545px;
  max-width: 100%;
  height: 354px;
  margin-top: -60px;
}

.sol-image-main,
.sol-image-next {
  position: absolute;
  top: 0;
  left: 0;
  width: 545px;
  height: 354px;
  padding: 10px;
  border-radius: var(--radius-20);
  background-color: var(--color-white);
  overflow: hidden;
}

.sol-image-main {
  z-index: 1;
  box-shadow: var(--shadow-media);
}

.sol-image-main img,
.sol-image-next img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: var(--radius-18);
  display: block;
}

/* Card de trás: a moldura branca e a foto andam juntas. */
.sol-image-next {
  z-index: 0;
  opacity: 0.24;
  transform: translate(569px, 26px) scale(0.837);
  transform-origin: top left;
}

.sol-image-next.is-advancing {
  z-index: 2;
  box-shadow: var(--shadow-media);
  animation: sol-card-forward 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes sol-card-forward {
  from {
    transform: translate(569px, 26px) scale(0.837);
    opacity: 0.24;
  }

  to {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* Texto à direita do card, fora do degradê azul. As setas ficam de fora da troca. */
.sol-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  max-width: 480px;
  margin-top: var(--space-32);
  margin-left: max(
    0px,
    calc(
      50cqw + 42px
      - (100cqw - min(100cqw, calc(var(--container-content) + 2 * var(--container-gutter)))) / 2
      - var(--container-gutter) - 459px - 40px
      + var(--sol-text-gap)
    )
  );
}

.sol-info {
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.sol-info .heading-3 {
  color: var(--color-accent-navy);
  font-size: 21px;
  font-weight: 600;
  line-height: normal;
  margin-bottom: var(--space-16);
}

.sol-info .body-small {
  color: var(--color-neutral-600);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0;
}

.sol-slider-controls { display: flex; gap: 16px; }
.slider-btn { background: transparent; border: none; color: var(--color-neutral-500); cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease; }
.slider-btn:hover { color: var(--color-accent-navy); }

/* Oculta textos suavemente enquanto o card de trás vem para a frente. */
.is-hidden { opacity: 0; transform: translateY(10px); }

/* --- CENÁRIO IDEAL --- */
.ideal-scenario {
  padding: 80px 0;
  background-color: var(--color-bg-light); /* Cor de fundo da página */
}

.ideal-scenario__banner {
  position: relative;
  width: 100%;
  max-width: 1352px;
  aspect-ratio: 1352 / 623; 
  min-height: 623px; /* Trava de altura exata para evitar o colapso do flexbox */
  margin: 0 auto;
  background-image: image-set(
    url("../../assets/home/cenario-ideal.webp") type("image/webp"),
    url("../../assets/home/o-cenario-ideal.png") type("image/png")
  );
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px;
}

/* Overlay Escuro para destacar os textos brancos */
.ideal-scenario__banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 80%);
  z-index: 1;
}

/* Conteúdo deve ficar acima do overlay */
.ideal-scenario__top,
.ideal-scenario__bottom {
  position: relative;
  z-index: 2;
}

.ideal-scenario .overline {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  opacity: 1;
}

.ideal-scenario__top .display-text {
  font-size: 48px;
  font-weight: 300;
  line-height: 1.2;
  margin-top: var(--space-16);
  background: var(--gradient-text-marquee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ideal-scenario__quote .body-medium {
  color: var(--color-white);
  font-size: 16px;
  line-height: 1.6;
  opacity: 1;
}

.ideal-scenario__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

/* Citação à esquerda com a linha vertical */
.ideal-scenario__quote {
  max-width: 547px;
  border-left: 2px solid var(--color-white);
  padding-left: 16px;
}

/* --- INSIGHTS --- */
.insights {
  padding: 120px 0;
}

.insights__header {
  text-align: center;
  margin-bottom: 32px;
}

.insights__title {
  color: var(--color-primary-900);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 16px;
}

.insights__desc {
  color: var(--color-neutral-400);
  font-size: 14px;
  line-height: 1.6;
}

.insights__grid {
  display: flex;
  gap: 24px;
  margin-bottom: 64px;
}

.insights__actions {
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .partners__carousel-track,
  .marquee__track {
    animation: none;
  }

  .sol-item.is-active .sol-progress-fill {
    width: 100%;
  }

  .sol-image-next.is-advancing {
    animation: none;
  }
}

/* Laptop: o hero cresce com o texto e a foto de Soluções cabe na coluna. 1512px fica fora. */
@media (max-width: 1279px) {
  .hero-slide {
    padding-bottom: 72px;
  }

  .sol-gallery {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 545 / 354;
  }

  .sol-image-main,
  .sol-image-next {
    width: 100%;
    height: 100%;
  }
}

/* Tablet: duas colunas. O azul de Soluções fica só na coluna de texto. */
@media (max-width: 1023px) {
  .hero {
    --hero-band: max(56px, 10.17vw);
  }

  .hero-slide {
    padding-top: 148px;
    padding-bottom: calc(50vw + 56px);
  }

  .hero-slide__panel {
    width: 100%;
  }

  .hero-float {
    right: 5%;
    width: 90%;
  }

  .hero-slide[data-layout="right"] .hero-float {
    right: auto;
    left: 5%;
  }

  .hero .display-text {
    font-size: 40px;
  }

  .partners__title,
  .diff-intro__title,
  .insights__title {
    font-size: 26px;
  }

  .diff-grid {
    flex-direction: column;
    gap: var(--space-32);
  }

  .diff-intro {
    padding-right: 0;
  }

  .diff-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .diff-card {
    display: flex;
    width: auto;
    height: auto;
    min-height: 420px;
  }

  .diff-card__inner {
    flex: 1;
    height: auto;
  }

  .solutions {
    padding-top: 0;
  }

  .solutions::before {
    content: none;
  }

  .sol__container {
    flex-direction: column;
    gap: var(--space-32);
  }

  .sol-text-column {
    flex: none;
    width: calc(100% + 2 * var(--container-gutter));
    max-width: none;
    margin-inline: calc(var(--container-gutter) * -1);
    padding: var(--space-48) var(--container-gutter) var(--space-40);
    background: var(--gradient-solutions);
    border-radius: 0 0 48px 0;
  }

  .sol-text-column .heading-2 {
    font-size: 36px;
  }

  .sol-gallery {
    margin-top: 0;
  }

  .sol-gallery,
  .sol-image-main {
    width: 100%;
    height: 280px;
    aspect-ratio: auto;
  }

  .sol-image-main {
    position: relative;
  }

  .sol-image-next {
    display: none;
  }

  .sol-copy {
    margin-left: 0;
    max-width: none;
  }

  .sol-info {
    width: 100%;
  }

  .ideal-scenario__banner {
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    padding: var(--space-32);
  }

  .ideal-scenario__top .display-text {
    font-size: 36px;
  }

  .ideal-scenario__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
  }

  .insights__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insights__grid .blog-card {
    width: 100%;
    height: auto;
  }
}

/* Mobile: uma coluna e títulos display menores. */
@media (max-width: 639px) {
  .hero-slide {
    padding-top: 120px;
  }

  .hero .display-text,
  .ideal-scenario__top .display-text {
    font-size: 30px;
  }

  .sol-text-column .heading-2 {
    font-size: 26px;
  }

  .diff-cards,
  .insights__grid {
    grid-template-columns: 1fr;
  }

  .ideal-scenario__banner {
    padding: var(--space-24);
    border-radius: var(--radius-24);
  }

  .ideal-scenario__quote {
    max-width: none;
  }
}