/* ==================================================
   VIPZUE — SEÇÃO 02 / GARGALOS INVISÍVEIS
   ================================================== */

/* A referência ilumina esta seção por trás do dinheiro: um foco quente
   central que abre a tipografia gigante e escurece nas bordas. */
.gargalos {
  /* Seção mais aquecida do site. Na referência o centro é claramente
     luminoso — chega ao nível do Marrom Estratégico, com um foco de
     Bronze Neutro por cima — e só as bordas caem para o Preto Carvão.
     Três camadas: foco bronze, calor marrom amplo, base café. */
  background:
    radial-gradient(ellipse 46% 38% at 50% 30%, rgb(var(--bronze-rgb) / 0.62), transparent 66%),
    radial-gradient(ellipse 78% 56% at 50% 34%, rgb(var(--marrom-rgb) / 0.92), transparent 74%),
    radial-gradient(ellipse 110% 80% at 50% 38%, rgb(var(--cafe-rgb) / 0.9), transparent 82%),
    linear-gradient(to bottom, var(--carvao) 0%, var(--cafe) 32%, var(--cafe) 62%, var(--grafite) 100%);
  overflow: hidden;
  text-align: center;
  padding-block: var(--space-2xl) var(--space-3xl);
  /* Largura da nota, compartilhada com o posicionamento do texto de fundo.
     Medido na referência: a nota ocupa 68% da largura da tipografia
     gigante — 630px nesse cálculo. Reduzida ~10% por pedido explícito,
     para o título "GARGALOS INVISÍVEIS" respirar mais atrás dela. */
  --money-w: min(59.4vw, 567px);
  /* Altura relativa do centro da cédula dentro do vídeo (as chamas ocupam
     a parte de cima do quadro). Medido no próprio arquivo: 60%. */
  --money-centro: 0.6;
}

/* vinheta nas bordas para concentrar a luz no centro */
.gargalos::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* A vinheta concentra a luz no centro, mas precisa soltar a borda
     inferior: se escurecer até lá, a seção termina mais escura que o
     Grafite Quente com que a transição seguinte começa, criando costura. */
  background: radial-gradient(ellipse 86% 82% at 50% 38%, transparent 58%, rgb(var(--carvao-rgb) / 0.6) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 97%);
}

.gargalos__bgtext {
  position: absolute;
  /* Alinhamento com a nota, como na referência: a junção entre as duas
     palavras cai no centro visual da cédula, de modo que ela cruza
     "GARGALOS" por baixo e "INVISÍVEIS" por cima, com as chamas subindo
     acima do bloco de texto.
       topo do bloco = padding da seção
                     + 63% da altura da nota (centro da cédula na arte)
                     - metade da altura do bloco de duas linhas (2×0.94em + 0.06em de gap) / 2 = 0.97em
     Como a arte é quadrada, a altura da nota é igual a --money-w. */
  top: calc(var(--space-2xl) + var(--money-centro) * var(--money-w) - 0.97em);
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Gap explícito entre as duas linhas: com line-height sozinho (sem gap),
     o acento do "Í" de "INVISÍVEIS" fica perto demais da linha de baixo de
     "GARGALOS" em alguns navegadores/aparelhos — a distância real depende
     de como cada fonte renderiza peso 900 e diacríticos, e varia mais do
     que o esperado entre desktop e Android real. Um gap físico garante
     espaço mínimo independente da fonte carregada. */
  gap: 0.06em;
  /* Na referência é um SANS pesado (não serifada), com as duas palavras
     ocupando praticamente a mesma largura, como um bloco justificado —
     é isso que faz o texto ler como textura editorial e não como um
     "texto grande em bold" atrás da imagem. */
  font-family: var(--font-estrutura);
  font-weight: 900;
  font-size: clamp(3rem, 12vw, 10.6rem);
  line-height: 0.94;
  letter-spacing: -0.012em;
  /* Bronze Neutro: com o fundo mais luminoso, o texto precisa acompanhar
     para continuar legível como textura editorial. */
  color: var(--bronze);
  opacity: 0.72;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Medido no navegador a 1440px: "GARGALOS" rende 1012px e "INVISÍVEIS"
   871px (as letras I e S são estreitas). O tracking extra na segunda
   linha iguala as duas larguras, reproduzindo o bloco justificado da
   referência — é isso que faz o texto ler como textura editorial. */
.gargalos__bgtext span {
  display: block;
}

.gargalos__bgtext span:last-child {
  letter-spacing: 0.019em;
  text-indent: 0.019em;
}

.gargalos__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Na referência o dinheiro é protagonista da composição central,
   sobreposto à tipografia gigante. */
/* Na referência a nota não fica centrada: é deslocada para a direita, de
   modo que o início de "GARGALOS" e "INVISÍVEIS" permanece legível à
   esquerda dela. O deslocamento é proporcional à própria largura da nota
   para se manter igual em qualquer tela. */
.gargalos__money-wrap {
  position: relative;
  width: var(--money-w);
  margin-bottom: calc(var(--space-lg) * -0.15);
  transform: translateX(calc(var(--money-w) * 0.22));
}

/* brilho quente do fogo projetado no ambiente */
.gargalos__money-wrap::before {
  content: "";
  position: absolute;
  top: 6%;
  right: 4%;
  width: 46%;
  height: 76%;
  background: radial-gradient(ellipse at center, rgb(var(--champagne-rgb) / 0.32), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

/* O asset v2 tem recorte limpo (chamas separadas do fundo, cantos
   totalmente transparentes), então não precisa de máscara corretiva:
   a sombra projetada basta para assentar a nota no cenário. */
.gargalos__money {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 26px 52px rgba(0, 0, 0, 0.6));
}

.gargalos__headline {
  position: relative;
  font-size: var(--fs-h1);
  margin-top: var(--space-md);
}

/* "VIPZUE" aparece reto na referência — o itálico fica só nas palavras
   editoriais (ver .accent--italico em base.css). */
.gargalos__headline .accent {
  color: var(--champagne);
}

.gargalos__subtext {
  position: relative;
  max-width: 58ch;
  margin-top: var(--space-xs);
  color: var(--bege);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.gargalos__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 1.6vw, 1.75rem);
  width: 100%;
  margin-top: var(--space-xl);
  text-align: left;
}

/* A referência mostra os cards com um halo champagne quente ao redor,
   translúcidos, iluminados por dentro — não chapados. */
/* Na referência os cards são luminosos: borda champagne nítida e um halo
   quente que os destaca do fundo — não caixas escuras com contorno fino. */
.gargalos-card {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid rgb(var(--champagne-rgb) / 0.5);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 130% 85% at 50% 0%, rgb(var(--champagne-rgb) / 0.2), transparent 64%),
    linear-gradient(160deg, rgb(var(--marrom-rgb) / 0.45), rgb(var(--carvao-rgb) / 0.5));
  box-shadow:
    inset 0 1px 0 rgb(var(--champagne-claro-rgb) / 0.18),
    0 0 34px -6px rgb(var(--champagne-rgb) / 0.3),
    0 20px 56px -24px rgb(var(--champagne-rgb) / 0.55),
    0 26px 64px -30px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(2px);
  transition: transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.gargalos-card:hover {
  transform: translateY(-3px);
  border-color: var(--champagne);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgb(var(--champagne-rgb) / 0.2), transparent 62%),
    linear-gradient(160deg, rgb(var(--marrom-rgb) / 0.44), rgb(var(--carvao-rgb) / 0.56));
  box-shadow:
    0 0 0 1px rgb(var(--champagne-rgb) / 0.12),
    0 22px 60px -20px rgb(var(--champagne-rgb) / 0.55),
    0 28px 70px -30px rgba(0, 0, 0, 0.85);
}

/* A referência não ilumina os três cards igualmente: o primeiro recebe
   mais luz, o central fica mais recolhido e o terceiro fica intermediário.
   Essa variação é o que evita a leitura de "três caixas iguais". */
.gargalos-card:nth-child(1) {
  background:
    radial-gradient(ellipse 140% 92% at 50% 0%, rgb(var(--champagne-rgb) / 0.27), transparent 66%),
    linear-gradient(160deg, rgb(var(--marrom-rgb) / 0.55), rgb(var(--carvao-rgb) / 0.48));
  border-color: rgb(var(--champagne-rgb) / 0.6);
  box-shadow:
    inset 0 1px 0 rgb(var(--champagne-claro-rgb) / 0.24),
    0 0 40px -6px rgb(var(--champagne-rgb) / 0.38),
    0 22px 60px -22px rgb(var(--champagne-rgb) / 0.6),
    0 28px 70px -30px rgba(0, 0, 0, 0.85);
}

.gargalos-card:nth-child(2) {
  background:
    radial-gradient(ellipse 125% 82% at 50% 0%, rgb(var(--champagne-rgb) / 0.13), transparent 62%),
    linear-gradient(160deg, rgb(var(--cafe-rgb) / 0.6), rgb(var(--carvao-rgb) / 0.6));
  border-color: rgb(var(--champagne-rgb) / 0.38);
  box-shadow:
    inset 0 1px 0 rgb(var(--champagne-claro-rgb) / 0.12),
    0 0 28px -8px rgb(var(--champagne-rgb) / 0.22),
    0 18px 50px -24px rgb(var(--champagne-rgb) / 0.4),
    0 26px 64px -30px rgba(0, 0, 0, 0.85);
}

.gargalos-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--champagne);
  margin-bottom: var(--space-sm);
}

.gargalos-card__icon svg {
  width: 18px;
  height: 18px;
}

.gargalos-card h3 {
  font-family: var(--font-estrutura);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.gargalos-card p {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* No mobile o texto-textura precisa caber na tela: as duas palavras
   continuam legíveis como textura, sem serem cortadas nas laterais. */
@media (max-width: 640px) {
  /* A arte v2 é quadrada: na mesma largura ela ocupa ~46% mais altura
     que a versão anterior, o que fazia a nota dominar a tela no celular.
     Reduzimos a largura (e mais ~10% por pedido explícito) — e como o
     texto de fundo é ancorado nesta mesma variável, o alinhamento entre
     nota e palavras se mantém. */
  .gargalos {
    --money-w: min(46.8vw, 207px);
  }

  /* No celular a tela é estreita demais para o deslocamento lateral:
     a nota volta ao centro. */
  .gargalos__money-wrap {
    transform: none;
  }

  .gargalos__bgtext {
    font-size: min(13.2vw, 3.1rem);
    /* No relatado em aparelho Android real, "GARGALOS" e "INVISÍVEIS"
       apareciam colados. line-height 1 sozinho, sem gap, deixava a
       distância real entre as linhas depender só da métrica da fonte
       carregada naquele momento — que varia mais no Android do que no
       ambiente de teste. Aqui o mobile ganha entrelinha e gap maiores
       que o desktop, de propósito: é onde o problema foi visto. */
    line-height: 1.05;
    gap: 0.08em;
    /* mesma âncora do desktop; metade da altura do bloco de duas linhas
       (2×1.05em + 0.08em de gap) / 2 = 1.09em */
    top: calc(var(--space-2xl) + var(--money-centro) * var(--money-w) - 1.09em);
  }
}