/* ==========================================================================
   TRIO DE CARDS COM INTERFACE SIMULADA — prefixo trio-
   Cabeçalho em duas colunas e três cards altos, cada um com uma peça de
   interface funcionando dentro.

   Tokens usados:
     --display             família dos títulos e dos números
     --ease                curva única, em toda transição daqui
     --fg --fg-2 --fg-muted   tinta, herdada do escopo de tom de cada card
     --accent              cor de ação (bolinha de confirmação, hachura)
     --accent-2            superfície areia do card claro
     --dark --dark-2 --light --light-2   as superfícies do projeto
     --radius-media        canto do painel e da foto (o card usa 1.5x isto)
     --radius-pill         canto de pílula e de botão de período
     --sec-gap             respiro vertical, via .sec-pad do core

   TRÊS SUPERFÍCIES, TRÊS CAMINHOS. O card 1 é a primitiva .glass do core
   com os parafusos dela trocados; o card 2 é um dark um passo mais claro,
   feito por color-mix sobre --dark-2; o card 3 é o areia de --accent-2 e
   declara .sec-light nele mesmo, para a tinta de dentro virar escura.
   Nenhum dos três escreve cor crua e nenhum sobrescreve --fg.

   PORQUÊ O .glass NO CARD 1. A medição da referência descreve o fundo dele
   como cor sólida mais um radial-gradient a partir do topo — que é, linha
   por linha, o desenho da primitiva. Recopiar seria a terceira cópia da
   mesma regra, exatamente o que o §6 do contrato manda promover em vez de
   repetir. O que muda vem pelos ganchos que a própria primitiva expõe:
   --glass-bg vira a segunda superfície escura do tema (a referência mede
   #161616, que é o --dark-2 da Kirvano) e --glass-blur vai a zero, porque
   sobre um fundo opaco não há o que desfocar atrás.

   O JS não escreve estilo de aparência: ele troca classe. Altura de barra,
   posição de pílula e destaque de linha estão todos aqui.
   ========================================================================== */

.trio{
  /* Altura dos cards. É medida e não proporção: as três peças de interface
     de dentro têm altura fixa em px, e um card em aspect-ratio faria a peça
     descolar do rodapé em telas estreitas. */
  --trio-card-h:520px;

  /* Canto do card. A referência mede 24 num projeto de canto 16 — o card de
     dobra é uma vez e meia o canto de mídia do tema. Projeto flat
     (--radius-media:0) devolve 0 aqui, e os cards ficam retos, que é o
     comportamento certo: quem decide a forma é o tema. */
  --trio-radius:calc(var(--radius-media) * 1.5);

  --trio-gap:30px;
  --trio-panel-h:240px;
  --trio-row-h:56px;
  --trio-row-gap:8px;
  --trio-shot-h:240px;
  --trio-chart-h:170px;

  /* A terceira superfície escura do conjunto: um passo acima de --dark-2,
     ainda dentro da regra do tom vizinho do §3. Serve ao card 2 e ao botão
     de período aceso do card 3 — dois lugares, uma fonte só. */
  --trio-surface-2:color-mix(in srgb,var(--light) 7%,var(--dark-2));

  /* Os três tempos, em SEGUNDOS, lidos pelo script com parseFloat. Ficam
     aqui, e não no JS, porque são ajuste de ritmo da dobra e não lógica:
     quem acha a fila de pagamentos apressada mexe numa linha de CSS.
     Valor em ms quebraria a conta — a unidade é parte do contrato. */
  --trio-metodo-hold:1.9s;
  --trio-oferta-hold:2.5s;
  --trio-periodo-hold:4.26s;
}


/* ==========================================================================
   CABEÇALHO EM DUAS COLUNAS
   Não é o .sec-head do core: aquele é centralizado e de coluna única, e o
   que dá caráter a esta dobra é justamente a assimetria — título e ação
   pesando à esquerda, apoio leve à direita, os dois alinhados pelo topo.
   ========================================================================== */

.trio-head{
  display:flex;flex-wrap:wrap;
  align-items:flex-start;justify-content:space-between;
  gap:clamp(28px,4.4vw,64px);
}

/* 480 e 520 são as duas caixas medidas na referência. flex-basis e não
   width: com o gap, as duas cabem na coluna de 1136 e encolhem juntas antes
   de quebrar. */
.trio-head-col{flex:0 1 480px}
.trio-lead{
  flex:0 1 520px;
  font-size:clamp(16px,1.25vw,18px);line-height:1.55;
  color:var(--fg-2);
}

/* Dois ajustes no h2.sec-title do core, e nenhuma regra dele reescrita:
   sem o olho por cima, o margin-top de 16 desalinharia o título do
   parágrafo vizinho; e o teto de 22ch é estreito demais para a caixa de
   480 desta dobra. Dois seletores de classe vencem o "h2.sec-title" do
   core sem precisar de peso artificial. */
.trio-head .trio-title{margin-top:0;max-width:none}

.trio-cta{margin-top:32px}


/* ==========================================================================
   A GRADE
   ========================================================================== */

.trio-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--trio-gap);
  margin-top:clamp(40px,4.6vw,64px);
}

/* isolation:isolate dá contexto de empilhamento próprio a cada card: as
   pílulas flutuantes do card 2 não têm como passar por cima do vizinho.
   O overflow:hidden é o que CORTA a peça de interface no rodapé — é ele
   quem arredonda o canto de baixo do painel e da foto. */
.trio-card{
  position:relative;display:flex;flex-direction:column;
  min-height:var(--trio-card-h);
  border-radius:var(--trio-radius);
  overflow:hidden;isolation:isolate;
}

/* Os dois cards de topo têm o mesmo respiro de cabeça; a peça de baixo é
   empurrada pelo margin-top:auto de cada uma. O card 3 tem outro desenho e
   traz o próprio padding. */
.trio-card-a,.trio-card-b{padding-top:48px}

.trio-copy{padding-inline:24px;text-align:center}

.trio-card-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(21px,2vw,30px);line-height:1.25;letter-spacing:-.02em;
  color:var(--fg);
}
.trio-card-text{
  margin-top:24px;
  font-size:16px;line-height:1.5;
  color:var(--fg-muted);
}


/* ==========================================================================
   CARD 1 — fila de meios de pagamento
   ========================================================================== */

/* Os parafusos da primitiva .glass. Ver o cabeçalho deste arquivo para o
   porquê de cada um. */
.trio-card-a{
  --glass-bg:var(--dark-2);
  --glass-line:color-mix(in srgb,var(--light) 6%,transparent);
  --glass-blur:0px;
}

/* margin:auto 20px 0 — o auto em cima é o que ancora o painel no rodapé do
   card, sem posicionamento absoluto: assim, se o parágrafo crescer, o card
   cresce junto e o texto nunca corre por baixo do painel.
   A borda de baixo sai: ela cairia exatamente sobre a aresta do card e
   apareceria como um risco de 1px atravessando o canto arredondado. */
.trio-panel{
  margin:auto 20px 0;
  height:var(--trio-panel-h);
  overflow:hidden;
  padding:12px 12px 0;
  border:1px solid color-mix(in srgb,var(--light) 5%,transparent);
  border-bottom:0;
  border-radius:var(--radius-media) var(--radius-media) 0 0;
  background:color-mix(in srgb,var(--light) 5%,transparent);
}

/* A fila inteira é UM elemento que translada. O script move em múltiplos de
   (altura da linha + vão), e o painel recorta. */
.trio-methods{
  display:flex;flex-direction:column;gap:var(--trio-row-gap);
  will-change:transform;
  transition:transform .55s var(--ease);
}

/* flex-basis fixo além da altura: numa coluna flex, uma linha sem base
   encolhe para caber, e a conta do passo do script deixa de fechar. */
.trio-method{
  display:flex;align-items:center;gap:12px;
  flex:0 0 var(--trio-row-h);height:var(--trio-row-h);
  padding-inline:10px;
  border-radius:12px;
  background:transparent;
  transition:background .45s var(--ease);
}
.trio-method.is-on{background:color-mix(in srgb,var(--light) 5%,transparent)}

.trio-ico{
  flex:0 0 36px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  border:1px solid color-mix(in srgb,var(--light) 10%,transparent);
  background:color-mix(in srgb,var(--light) 6%,transparent);
  color:var(--fg-2);
}
.trio-ico svg{width:18px;height:18px}

.trio-method-name{font-size:14px;line-height:1.4;color:var(--fg-2)}


/* ==========================================================================
   CARD 2 — foto no rodapé e pílulas de comissão girando
   ========================================================================== */

.trio-card-b{background:var(--trio-surface-2)}

.trio-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-top:16px;
}
.trio-chip{
  height:24px;padding-inline:10px;
  font-size:12px;line-height:24px;
  border-radius:6px;
  color:var(--fg-2);
  background:color-mix(in srgb,var(--light) 10%,transparent);
}

/* A foto não recorta a si mesma por overflow: o canto vive na própria
   imagem. É o que deixa as pílulas vazarem para fora da largura dela
   quando o valor é longo — quem corta continua sendo o card. */
.trio-shot{
  position:relative;
  margin-top:auto;align-self:center;
  width:64%;
}
.trio-shot-img{
  width:100%;height:var(--trio-shot-h);
  object-fit:cover;
  border-radius:var(--radius-media) var(--radius-media) 0 0;
}

/* O rotador é uma célula de grade só, com as três pílulas empilhadas nela.
   Assim a caixa tem a largura da mais larga, as três nascem centradas e o
   deslocamento de cada uma é só o próprio translateY — sem left/top e sem
   uma conta de posição por pílula. */
.trio-offers{
  position:absolute;top:34px;left:50%;
  transform:translateX(-50%);
  display:grid;justify-items:center;
}

/* Três estados, um por posição do rotador:
     .is-on    em cima, destacada
     .is-next  logo abaixo, a próxima da fila
     nenhuma   fora de cena, mais abaixo e transparente
   O ciclo é on -> fora -> next -> on. Quem sai DESCE e apaga; quem entra
   sobe da posição de fora, acende no meio do caminho e assume o destaque.
   A cor do texto é --dark porque a pílula é uma superfície clara sobre foto,
   e não texto de seção: seguir --fg aqui a deixaria ilegível em dobra
   escura. Mesmo caso do .pil-title do conteudo/pilares-texto-na-foto. */
.trio-offer{
  grid-area:1/1;
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 14px 0 6px;
  border-radius:var(--radius-pill);
  white-space:nowrap;letter-spacing:normal;
  font-size:12px;font-weight:500;line-height:1;
  color:var(--dark);
  background:color-mix(in srgb,var(--light) 95%,transparent);
  opacity:0;transform:translateY(96px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.trio-offer.is-next{opacity:1;transform:translateY(48px)}
.trio-offer.is-on{opacity:1;transform:translateY(0)}

.trio-offer-val{font-weight:600}

.trio-offer-dot{
  flex:0 0 20px;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--accent);color:var(--dark);
}
.trio-offer-dot svg{width:11px;height:11px}


/* ==========================================================================
   CARD 3 — painel claro de vendas
   O fundo areia é --accent-2, o apoio de marca do tema. A tinta escura vem
   do .sec-light declarado no próprio card, no markup: aqui não se escreve
   cor de texto nenhuma, e por isso o card acompanha qualquer tema.
   ========================================================================== */

.trio-card-c{background:var(--accent-2);padding:24px}

.trio-card-head{
  display:flex;flex-wrap:wrap;
  align-items:flex-start;justify-content:space-between;
  gap:12px;
}
.trio-card-title-c{flex:1 1 140px}

.trio-track{
  flex:0 0 auto;
  display:flex;gap:2px;padding:4px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--dark) 6%,transparent);
}
.trio-per{
  height:24px;padding-inline:11px;
  border:0;border-radius:var(--radius-pill);
  background:transparent;color:var(--fg-2);
  font-size:12px;font-weight:500;line-height:1;letter-spacing:normal;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.trio-per.is-on{background:var(--trio-surface-2);color:var(--light-2)}

/* margin-top:auto empurra o gráfico para o pé do card e deixa o vão morto no
   meio — que é o desenho da referência, não sobra: o número embaixo precisa
   de silêncio em volta para pesar. */
.trio-chart{
  margin-top:auto;
  height:var(--trio-chart-h);
  display:flex;align-items:flex-end;gap:8px;
}

/* A altura de cada barra em cada período viaja no style da própria barra,
   como --trio-h-a/b/c. Trocar de período é trocar UMA classe no gráfico: o
   CSS reescolhe qual das três ler, e a transição faz a barra crescer. O
   script não escreve altura — e sem script o cartão fica no período 7d,
   correto e legível. */
.trio-bar{
  position:relative;flex:1 1 0;
  height:var(--trio-h-a,40%);
  border-radius:8px;
  background:color-mix(in srgb,var(--dark) 88%,transparent);
  transition:height .7s var(--ease);
}
.trio-chart.is-p1 .trio-bar{height:var(--trio-h-b,40%)}
.trio-chart.is-p2 .trio-bar{height:var(--trio-h-c,40%)}

/* As seis barras não crescem juntas: um atraso curto por posição transforma
   a troca de período em varredura da esquerda para a direita, que é o que
   faz o gráfico parecer estar recalculando. */
.trio-bar:nth-child(2){transition-delay:.05s}
.trio-bar:nth-child(3){transition-delay:.1s}
.trio-bar:nth-child(4){transition-delay:.15s}
.trio-bar:nth-child(5){transition-delay:.2s}
.trio-bar:nth-child(6){transition-delay:.25s}

/* Preenchimento hachurado, 3px menor em cima e embaixo — 6px no total, como
   na referência. É o que impede a barra de ler como bloco chapado e dá a
   ela a textura de dado projetado. */
.trio-bar-fill{
  position:absolute;left:0;right:0;top:3px;bottom:3px;
  border-radius:6px;
  background-image:repeating-linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 34%,transparent) 0 2px,
    transparent 2px 6px);
}

/* Os três resultados na MESMA célula de grade: a caixa fica com a altura do
   mais alto e nada salta na troca. visibility, além da opacidade, para o
   que está fora de cena sair também do leitor de tela — sem ela, os três
   valores seriam lidos em sequência. O atraso de 0s na saída é o truque de
   sempre: a visibilidade só cai depois da fusão terminar. */
.trio-figs{display:grid;margin-top:28px}
.trio-fig{
  grid-area:1/1;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  opacity:0;filter:blur(8px);visibility:hidden;
  transition:opacity .5s var(--ease),filter .5s var(--ease),visibility 0s .5s;
}
.trio-fig.is-on{
  opacity:1;filter:blur(0);visibility:visible;
  transition:opacity .5s var(--ease),filter .5s var(--ease),visibility 0s;
}
.trio-fig-val{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(24px,2.2vw,32px);line-height:1.1;
  color:var(--fg);
}
.trio-fig-lab{font-size:14px;line-height:1.4;color:var(--fg-2)}

/* ---------------------------------------------------------------- movimento reduzido */
/* O script nem liga o rodízio quando a preferência está ativa — o que sobra
   aqui é o caso do botão de período, que continua clicável de propósito
   (botão morto na tela é defeito). Sem transição, a troca é instantânea. */
@media(prefers-reduced-motion:reduce){
  .trio-methods,.trio-method,.trio-offer,.trio-per,.trio-bar,.trio-fig{transition:none}
  .trio-fig{filter:none}
}


/* ---------------------------------------------------------------- mobile */

/* Três colunas de 359 pedem 1137 de coluna útil. Abaixo disso a grade vira
   duas, e o card do gráfico ocupa a linha inteira: é o único dos três que
   melhora ao ficar largo, porque o gráfico ganha respiro entre as barras. */
@media(max-width:1080px){
  .trio-grid{grid-template-columns:repeat(2,1fr)}
  .trio-card-c{grid-column:span 2}
}

@media(max-width:900px){
  .trio-head{flex-direction:column}
  .trio-head-col,.trio-lead{flex:1 1 auto;max-width:100%}
}

@media(max-width:720px){
  .trio{--trio-card-h:470px;--trio-gap:16px}
  .trio-grid{grid-template-columns:1fr}
  .trio-card-c{grid-column:auto}
  /* Card estreito e foto em 64% viram um selo pequeno demais no meio do
     quadro; em uma coluna a foto ocupa quase a largura toda. */
  .trio-shot{width:78%}
}