/* =========================================================
   ELO18 — V22
   Ajustes finos de transições, jornadas e painéis de serviços
   ========================================================= */

:root {
  --v22-journey-haze-dark: rgba(6, 17, 28, .16);
  --v22-journey-haze-soft: rgba(6, 17, 28, .04);
  --v22-service-paper: #fffdfa;
  --v22-service-paper-soft: rgba(255,255,255,.68);
  --v22-service-line: rgba(44,61,81,.12);
  --v22-ribbon-soft: #edf5f3;
}

/* ---------------------------------------------------------------------
   01. TRANSIÇÕES ENTRE SEÇÕES — tonalidade alinhada às duas sessões
   --------------------------------------------------------------------- */
.hero-problem-transition,
.problem-journey-transition {
  position: relative;
  isolation: isolate;
  pointer-events: none;
}

.hero-problem-transition {
  height: clamp(72px, 8vw, 116px);
  margin-top: calc(clamp(72px, 8vw, 116px) * -.58);
  margin-bottom: calc(clamp(72px, 8vw, 116px) * -.22);
  overflow: visible;
}

.hero-problem-transition::before,
.hero-problem-transition::after,
.problem-journey-transition::before,
.problem-journey-transition::after {
  content: "";
  position: absolute;
  inset-inline: -8vw;
}

..hero-problem-transition::before {
  inset-block: 0;
  background: linear-gradient(180deg, rgba(4,11,18,0) 0%, rgba(4,11,18,.18) 28%, rgba(4,11,18,.52) 56%, rgba(4,11,18,.84) 100%);
  filter: blur(32px);
  opacity: .90;
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}

.hero-problem-transition::after {
  display: none;
}

.problem-journey-transition {
  height: clamp(110px, 12vw, 160px);
  margin-top: calc(clamp(110px, 12vw, 160px) * -.70);
  margin-bottom: calc(clamp(110px, 12vw, 160px) * -.18);
  overflow: visible;
}

.problem-journey-transition::before {
  inset-block: 0;
  background: linear-gradient(180deg, rgba(4,11,18,0) 0%, rgba(4,11,18,.16) 30%, rgba(4,11,18,.48) 58%, rgba(4,11,18,.88) 100%);
  filter: blur(34px);
  opacity: .88;
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}

.problem-journey-transition::after {
  display: none;
}

/* ---------------------------------------------------------------------
   02. SEÇÃO 02 — título sem sobreposição e conteúdo direto na imagem
   --------------------------------------------------------------------- */
.journeys .section-heading {
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

.journeys-title.journeys-title--single {
  width: min(100%, 640px);
  max-width: 640px;
  gap: .12em;
}

.journeys-title--single .journeys-title__line {
  max-width: 12.5ch;
  font-size: clamp(2.6rem, 5.2vw, 4.85rem);
  line-height: .94;
}

.journey-card,
.journey-card--reverse {
  min-height: clamp(560px, 68vh, 700px);
}

.journey-card::after,
.journey-card--reverse::after {
  background:
    linear-gradient(180deg, rgba(3,12,20,.10), rgba(3,12,20,.20));
  opacity: .72;
}

.journey-content {
  width: min(48%, 560px);
  padding: clamp(2.8rem, 6vh, 4.8rem) clamp(1.8rem, 4.4vw, 4.5rem);
  background: transparent !important;
  isolation: isolate;
}

.journey-content::before {
  content: "";
  position: absolute;
  inset: .8rem .5rem;
  z-index: -1;
  border-radius: 28px; 
}

.journey-card--reverse .journey-content::before {
  background: linear-gradient(270deg, rgba(6,17,28,.18) 0%, rgba(6,17,28,.08) 34%, rgba(6,17,28,.03) 100%);
}

.journey-content h3 {
  max-width: 10.2ch;
  font-size: clamp(2rem, 3.15vw, 4rem);
  line-height: .96;
}

.journey-content p:not(.eyebrow) {
  max-width: 40ch;
}

/* ---------------------------------------------------------------------
   03. SEÇÃO 03 — degradê branco com conteúdo escuro por cima
   --------------------------------------------------------------------- */
.service-panel,
.service-panel--reverse {
  background: var(--v22-service-paper);
  border-color: rgba(44,61,81,.10);
  box-shadow: 0 22px 64px rgba(7,20,33,.10);
}

.service-panel img,
.service-panel--reverse img {
  filter: saturate(.82) contrast(1.02) brightness(.92);
  opacity: .96;
}

.service-panel::after {
  background:
    linear-gradient(90deg, rgba(255,253,250,.98) 0%, rgba(255,253,250,.94) 34%, rgba(255,253,250,.68) 58%, rgba(255,253,250,.0) 100%),
    radial-gradient(circle at 18% 46%, rgba(255,255,255,.74), transparent 42%);
}

.service-panel--reverse::after {
  background:
    linear-gradient(270deg, rgba(255,253,250,.98) 0%, rgba(255,253,250,.94) 34%, rgba(255,253,250,.68) 58%, rgba(255,253,250,.0) 100%),
    radial-gradient(circle at 82% 46%, rgba(255,255,255,.74), transparent 42%);
}

.service-copy,
.service-panel--reverse .service-copy {
  width: min(50%, 562px);
  color: var(--ink);
  isolation: isolate;
}

.service-copy::before {
  content: "";
  position: absolute;
  inset: 1rem .6rem;
  z-index: -1; 
}

.service-panel--reverse .service-copy::before {
  background: linear-gradient(270deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.04) 100%);
}

.service-index {
  color: rgba(72,169,166,.72);
}

.service-copy .eyebrow,
.service-copy h3,
.service-copy > p:not(.eyebrow),
.service-copy li {
  color: rgba(7,20,33,.88);
}

.service-copy > p:not(.eyebrow) {
  color: rgba(7,20,33,.72);
}

.service-copy h3 {
  font-size: clamp(2.2rem, 3.6vw, 4.2rem);
  max-width: 13ch;
}

.service-copy ul,
.service-copy li {
  border-color: rgba(44,61,81,.12);
}

/* ---------------------------------------------------------------------
   04. CASES — fita ainda mais suave e conectada à identidade
   --------------------------------------------------------------------- */
.projects.cases .case-ribbon-wrap {
  background:
    linear-gradient(90deg, rgba(72,169,166,.11) 0%, rgba(255,255,255,.36) 18%, rgba(255,255,255,.28) 82%, rgba(44,61,81,.05) 100%),
    var(--v22-ribbon-soft) !important;
  border-top: 1px solid rgba(255,255,255,.74) !important;
  border-bottom: 1px solid rgba(44,61,81,.10) !important;
  box-shadow: 0 14px 36px rgba(3,12,20,.07) !important;
}

.projects.cases .case-tab + .case-tab {
  border-left-color: rgba(44,61,81,.07) !important;
}

/* ---------------------------------------------------------------------
   05. RESPONSIVIDADE
   --------------------------------------------------------------------- */
@media (max-width: 980px) {
  .journeys-title.journeys-title--single {
    width: min(100%, 540px);
  }

  .journeys-title--single .journeys-title__line {
    font-size: clamp(2.45rem, 6.4vw, 4rem);
  }

  .journey-content,
  .journey-card--reverse .journey-content,
  .service-copy,
  .service-panel--reverse .service-copy {
    width: min(54%, 100%);
  }
}

@media (max-width: 720px) {
  .hero-problem-transition {
    height: 62px;
    margin-top: -32px;
    margin-bottom: -10px;
  }

  .problem-journey-transition {
    height: 70px;
    margin-top: -34px;
    margin-bottom: -18px;
  }

  .journeys-title.journeys-title--single {
    width: 100%;
    max-width: 100%;
  }

  .journeys-title--single .journeys-title__line {
    max-width: 100%;
    font-size: clamp(2.2rem, 9vw, 3.4rem);
  }

  .journey-card,
  .journey-card--reverse,
  .service-panel,
  .service-panel--reverse {
    min-height: auto;
  }

  .journey-content,
  .journey-card--reverse .journey-content,
  .service-copy,
  .service-panel--reverse .service-copy {
    width: 100%;
    padding: 5rem 1.2rem 2.4rem;
  }

  .journey-content::before,
  .service-copy::before {
    inset: .4rem 0;
    border-radius: 22px;
  }

  .journey-content::before {
    background: linear-gradient(180deg, rgba(6,17,28,.08) 0%, rgba(6,17,28,.18) 66%, rgba(6,17,28,.24) 100%);
  }

  .service-panel::after,
  .service-panel--reverse::after {
    background: linear-gradient(180deg, rgba(255,253,250,.12) 0%, rgba(255,253,250,.24) 24%, rgba(255,253,250,.82) 58%, rgba(255,253,250,.96) 100%);
  }

  .service-copy::before,
  .service-panel--reverse .service-copy::before {
    background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.50) 46%, rgba(255,255,255,.18) 100%);
  }

  .service-copy h3,
  .journey-content h3 {
    max-width: 100%;
  }
}

/* Botões da hero — fumaça maior e mais rápida */
@media (min-width: 901px) {

  /* Velocidade do brilho geral */
  .hero-quick-link {
    animation: v21-smoke-shadow 2.4s ease-in-out infinite;
  }

  /* Tamanho e velocidade da fumaça */
  .hero-quick-link::before {
    inset: -28px -34px; /* aumenta a área da fumaça */
    filter: blur(20px); /* deixa a fumaça maior e mais difusa */
    animation: v21-smoke-drift 2.8s ease-in-out infinite alternate;
  }

  /* Tamanho e velocidade do aro pulsante */
  .hero-quick-link::after {
    inset: -14px;
    animation: v21-smoke-ring 1.9s ease-in-out infinite;
  }
}

/* Aumenta o movimento da fumaça */
@keyframes v21-smoke-drift {
  0% {
    opacity: .42;
    transform: translate3d(-13px, 8px, 0) scale(.94) rotate(-6deg);
  }

  48% {
    opacity: .82;
    transform: translate3d(10px, -8px, 0) scale(1.28) rotate(7deg);
  }

  100% {
    opacity: .52;
    transform: translate3d(-3px, 5px, 0) scale(1.08) rotate(-3deg);
  }
}

/* Aumenta a expansão do aro */
@keyframes v21-smoke-ring {
  0%, 100% {
    opacity: .25;
    transform: scale(.92);
  }

  50% {
    opacity: .78;
    transform: scale(1.22);
  }
}