/* ==========================================================================
   EFFECTS — loader, image trail, grade do CTA
   ========================================================================== */

/* --------------------------------------------------------------------------
   LOADER — 12 colunas amarelas que sobem em stagger
   -------------------------------------------------------------------------- */
.load-grid {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.load-grid_item {
  width: 100%;
  height: 100%;
  background-color: var(--swatch--primary-accent);
}
@media screen and (max-width: 767px) {
  .load-grid_item.hide-on-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   IMAGE TRAIL — imagens que seguem o mouse no CTA final
   -------------------------------------------------------------------------- */
.trail-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
}
.trail-list { position: relative; width: 100%; height: 100%; }
.trail-item {
  position: absolute;
  display: none;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 15rem;
  border-radius: 0.3125em;
  opacity: 0;
  overflow: hidden;
  will-change: transform, opacity;
}
.trail-item__img { width: 100%; height: 100%; object-fit: cover; }
.trail-content { position: relative; z-index: 10; }

/* --------------------------------------------------------------------------
   CTA — grade de colunas ao fundo.

   Não são linhas: cada coluna é uma faixa preenchida com um gradiente
   vertical, e as calhas estreitas entre elas recebem o gradiente invertido.
   No topo as calhas clareiam e as colunas escurecem; embaixo troca. O
   resultado é uma textura tecida, tipo tubos de órgão, em vez de um fundo
   chapado. É assim no original.
   -------------------------------------------------------------------------- */
.main-cta_container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  min-height: 50rem;
}

.cta-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: var(--max-width--lg);
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
  overflow: hidden;
}
.cta-bg-grid_center {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

/* As colunas somem por completo: a estrutura HTML fica (o image-trail
   depende dela), mas nada é pintado. O fundo agora é o halo do ::after. */
.cta-col,
.cta-gutter { width: 100%; background-image: none; }
.cta-gutter { max-width: 1.5rem; }

.cta-gutter.center { margin-left: 1px; margin-right: 1px; }

/* Aura lima na base, ecoando o padrão dos cards de sprint: a cor sobe de
   trás do botão, que é o ponto de ação da seção. */
/* O card sobe sobre a seção clara acima: overflow precisa ficar VISÍVEL
   e a seção não pode ter padding-top, senão o card não alcança a borda. */
#contato.section {
  position: relative;
  overflow: visible;
  padding-top: 0;
  /* respiro entre o card e o rodapé */
  padding-bottom: var(--padding-vertical--lg);
}

.cta-margin { width: 100%; max-width: 2.5rem; }
.cta-margin.left { margin-right: 1px; }
.cta-margin.right { margin-left: 1px; }

@media screen and (max-width: 991px) {
  .cta-col.hide-on-tablet, .cta-gutter.hide-on-tablet { display: none; }
  .main-cta_container { min-height: auto; }
}
@media screen and (max-width: 767px) {
  .cta-col.hide-on-mobile, .cta-gutter.hide-on-mobile { display: none; }
}
@media screen and (max-width: 479px) {
  .cta-margin.left, .cta-margin.right { max-width: 1.125rem; }
}

/* --------------------------------------------------------------------------
   Link com sublinhado animado
   -------------------------------------------------------------------------- */
[data-underline-link] { position: relative; text-decoration: none; }
[data-underline-link]::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition: transform 0.735s var(--ease--chars);
}
@media (hover: hover) and (pointer: fine) {
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

/* --------------------------------------------------------------------------
   CTA CANVAS — card arredondado com mesh gradient, moldura de seleção no
   título e cursores de colaboração. A leitura é a de um documento sendo
   editado a várias mãos: é o que a ECOSS faz com o cliente.
   -------------------------------------------------------------------------- */
.cta-canvas {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 76rem;
  /* Sobreposição CURTA: o card só encosta na seção clara de cima, sem
     cobrir os depoimentos. Antes a margem chegava a -9rem e engolia os
     cards de depoimento inteiros. */
  margin: clamp(-4rem, -4vw, -2.5rem) auto 0;
  box-shadow: 0 2rem 5rem rgba(1, 0, 27, 0.55);
  padding: clamp(2.5rem, 6vw, 6rem) clamp(1.75rem, 5vw, 5rem);
  min-height: 34rem;
  display: flex;
  flex-flow: column;
  justify-content: center;
  /* O rem congela acima de 1680px, então um teto em rem deixava o raio
     pequeno em relação ao card nas telas grandes. Aqui o teto também é
     relativo à viewport, e o piso garante curva em tela pequena. */
  border-radius: clamp(1.25rem, 2.6vw, 3rem);
  overflow: hidden;
  /* garantia extra: a máscara recorta mesmo se algum filho com filter
     ou transform escapar do overflow */
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  isolation: isolate;
  background-color: #05182c;
  /* O retângulo é SEMPRE um bloco escuro, esteja em seção escura ou clara.
     Sem esta linha ele herda a cor de texto da seção que o envolve: na
     trabalhos.html, onde a seção é creme, o título saía navy sobre navy
     e sumia. A cor passa a vir do próprio card. */
  color: var(--swatch--neutral-light);
}
.cta-canvas .heading { color: var(--swatch--neutral-light); }

/* Mesh gradient: manchas grandes e desfocadas que se cruzam. O blur alto
   é o que dá o aspecto difuso, impossível de obter só com gradiente. */
.cta-canvas__mesh {
  position: absolute;
  /* inset 0, não -20%: com o blur alto o mesh já sangra sozinho, e
     estourar a caixa fazia o canto escapar do recorte do card */
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* filter cria contexto próprio e escapa do overflow:hidden do pai —
     por isso o raio tem de estar aqui também */
  border-radius: inherit;
  filter: blur(84px);
  /* O clarão à direita é o que dá o efeito da referência: uma mancha
     quase branca, muito grande e muito borrada, que dissolve o canto do
     card. As manchas de acento entram por baixo dela. */
  background:
    radial-gradient(34% 40% at 82% 58%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.35) 42%, transparent 72%),
    radial-gradient(30% 34% at 92% 34%, rgba(203, 255, 84, 0.55) 0%, transparent 68%),
    radial-gradient(34% 40% at 70% 88%, rgba(92, 200, 255, 0.58) 0%, transparent 70%),
    radial-gradient(46% 50% at 16% 26%, rgba(12, 32, 54, 0.95) 0%, transparent 74%),
    /* O último ponto era #2a5a5e — matiz 185, um petróleo herdado da paleta
       verde antiga: os outros três estão em 204-211 e ele destoava sozinho.
       #37547c tem o MESMO L* (35,2) e a mesma saturação, só girado para 215,
       a família azul da marca. */
    linear-gradient(115deg, #05182c 0%, #0a2036 34%, #16405c 62%, #37547c 100%);
}
/* granulado leve: tira o aspecto de plástico do gradiente puro */
.cta-canvas__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.cta-canvas__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.75rem;
  max-width: 42rem;
}

/* Moldura de seleção do título — as alças nos cantos, como num editor */
.cta-select { position: relative; display: inline-block; padding: 0.5rem 1rem; }
.cta-select::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(240, 242, 253, 0.42);
  pointer-events: none;
}
.cta-select__handle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--swatch--neutral-light);
  box-shadow: 0 0 0 1px rgba(1, 0, 27, 0.35);
}
.cta-select__handle.tl { top: -4px; left: -4px; }
.cta-select__handle.tr { top: -4px; right: -4px; }
.cta-select__handle.bl { bottom: -4px; left: -4px; }
.cta-select__handle.br { bottom: -4px; right: -4px; }

.cta-canvas__content .heading { margin: 0; }
/* a segunda metade do título em tom apagado, como no editor */
.cta-canvas__content .heading em {
  font-style: normal;
  /* 42% dava 3.7:1 e ficava lavado demais para uma linha de título.
     62% chega a 6.5:1 e ainda lê como "apagado" contra os 15.1:1 da
     primeira metade — a diferença entre as duas é o que conta. */
  color: rgba(240, 242, 253, 0.62);
}

/* Cursores de colaboração */
.cta-cursor {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  pointer-events: none;
  animation: cta-cursor-float 7s ease-in-out infinite;
}
.cta-cursor svg { width: 1.125rem; height: auto; flex: none; }
.cta-cursor__tag {
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font--secondary-family);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--swatch--brand-navy);
  transform: translateY(0.5rem);
}
.cta-cursor.is-lime .cta-cursor__tag { background: var(--swatch--primary-accent); }
.cta-cursor.is-lime svg { color: var(--swatch--primary-accent); }
.cta-cursor.is-ciano .cta-cursor__tag { background: var(--swatch--accent-pink); }
.cta-cursor.is-ciano svg { color: var(--swatch--accent-pink); }

.cta-cursor.pos-1 { top: 46%; right: 16%; animation-delay: -1.4s; }
.cta-cursor.pos-2 { top: 66%; left: 46%; animation-delay: -4.2s; }

@keyframes cta-cursor-float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(0.75rem, -0.9rem); }
  66% { transform: translate(-0.6rem, 0.7rem); }
}
@media (prefers-reduced-motion: reduce) { .cta-cursor { animation: none; } }

@media screen and (max-width: 767px) {
  .cta-canvas { min-height: 26rem; }
  .cta-cursor.pos-1 { right: 6%; top: 40%; }
  .cta-cursor.pos-2 { left: 8%; top: 74%; }
  .cta-cursor__tag { font-size: 0.75rem; }
}

/* ==========================================================================
   PERFORMANCE NO CELULAR

   backdrop-filter obriga o navegador a reamostrar e desfocar TUDO que está
   atrás do elemento, a cada quadro. No desktop passa despercebido; no
   celular, com 16 cards de vidro em movimento contínuo mais um blur(46px)
   ao lado, é isso que trava o scroll.

   Aqui o desfoque de fundo sai e cada superfície vira opaca — usando os
   mesmos valores que os blocos @supports já reservavam para navegador sem
   suporte, então o resultado visual já estava previsto e testado.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .nav-list,
  .menu-dropdown_list,
  .bunny-bg__btn,
  .card-main,
  .tst-card,
  .plan,
  .phase-card,
  .hero-glass_item,
  .pricing-model-card[class*="-gradient"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* opacidade suficiente para o texto não pousar no que está atrás */
  .card-main,
  .pricing-model-card[class*="-gradient"] { background-color: var(--swatch--neutral-cream); }
  .tst-card { background-color: #ffffff; }
  .phase-card { background-color: var(--swatch--neutral-cream); }
  .hero-glass_item { background-color: rgba(248, 249, 250, 0.97); }
  .nav-list,
  .menu-dropdown_list { background-color: var(--swatch--neutral-xdark); }
  .bunny-bg__btn { background-color: rgba(1, 0, 27, 0.55); }

  /* Blur grande em elemento grande é caro do mesmo jeito. Reduzido ao
     ponto em que a mancha continua difusa mas a área a processar cai
     para uma fração. */
  .cta-canvas__mesh { filter: blur(38px); }
  .hero-glass::before { filter: blur(24px); }

  /* O grão animado repinta a tela inteira 3x por segundo para um efeito
     que ninguém percebe num celular. Fica estático. */
  .grain, [class*="grain"], .cta-canvas__grain { animation: none; }
}

/* Quem pediu menos movimento não deve pagar por nenhuma dessas animações. */
@media (prefers-reduced-motion: reduce) {
  .hero-glass_col,
  .media-strip,
  .cta-cursor { animation: none; }
}