/* =========================================================================
   AKROS — O custo de esperar (a 2ª seção desde 07/10; é ela que sobe a
   cortina sobre a hero)

   07/10, 23h, o dono: «deixe esses cards infinitamente mais profissionais…
   texto mais direto e clean… que impacte quem for ver». Os seis cartões
   iguais, com ícone, título e parágrafo, viraram uma grade de PESO DESIGUAL:
     · o MESTRE (metade esquerda, duas fileiras): a janela contra a
       realidade, 5 min × 42 h, numa régua em ESCALA REAL. Os 5 minutos são
       0,2 % dela, um traço azul; o resto é tempo perdido. A régua faz o
       argumento sem frase nenhuma;
     · quatro números de uma frase, 2×2 à direita: o número fala, a frase
       em branco diz o quê, o resto é cinza;
     · a faixa do canal (80 % pelo WhatsApp): não é dor, é ONDE a A.R.I.A.
       atende, por isso fecha a seção.
   Números e fontes são os mesmos de antes; só o texto encurtou. Sem ícone:
   no número grande ele era enfeite.

   10/10, o dono, depois de ver a seção virar uma história animada: «Não
   gostei nada. Volta ao que era antes. Só deixe mais clean e profissional.
   Infinitamente profissional.» Voltou a grade de 07/10, e saiu tudo o que
   era enfeite do passe «orgânico» de 07/10 23h10: as luzes que derivavam
   atrás da grade, a luz num canto de cada cartão, o contorno em degradê, o
   degradê e o brilho nos números, a onda que pulsava na régua, a pílula do
   canal. Ficou: superfície lisa, um fio de 1 px, canto de 16 px, número
   branco e liso, UM acento (azul) só na unidade e na janela de 5 min, régua
   fina com três marcas, fonte discreta. O mesmo em todos os cartões.

   O chão (azul-noite + mosaico) vem de escuro.css.
   ========================================================================= */

.perdas__pilha{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(16px,2.6vh,40px);
}

/* ---------------- o cabeçalho, centrado ---------------- */
/* 1100: em Space Grotesk a manchete passa de 940 e o «dia.» caía sozinho na 2ª linha (1920) */
#perdas .sechead{max-width:min(1100px,100%);margin:0 auto;text-align:center}
#perdas .sechead__title{text-wrap:balance}
#perdas .sechead__eyebrow{margin-bottom:clamp(10px,1.6vh,18px)}
#perdas .sechead__eyebrow i{display:none}
#perdas .sechead__title{
  font-size:min(clamp(1.9rem,3.4vw,3.2rem),5.4vh);
  margin-bottom:clamp(8px,1.3vh,16px);
  color:#FFFFFF;
}
#perdas .sechead__sub{max-width:62ch;margin:0 auto;color:rgba(255,255,255,.66)}
#perdas .sechead__sub b{color:#FFFFFF}

/* =======================================================================
   A GRADE
   ======================================================================= */
.perdas__grade{
  position:relative;
  list-style:none;margin:0 auto;padding:0;width:100%;max-width:min(1240px,100%);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:clamp(10px,1.5vh,16px);
}
.perda--mestre{grid-column:1 / span 6;grid-row:1 / span 2}
.perda:not(.perda--mestre){grid-column:span 3}

/* o cartão: superfície lisa, um degrau acima do chão, um fio de 1 px.
   Sem luz de canto, sem contorno em degradê, sem sombra dramática. */
.perda,.perdas__canal{
  position:relative;isolation:isolate;
  border-radius:16px;
  background:rgba(13,25,42,.9);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.075),
    inset 0 1px 0 rgba(255,255,255,.03),
    0 24px 48px -36px rgba(0,0,0,.8);
}
.perda{
  display:flex;flex-direction:column;min-width:0;
  padding:clamp(18px,2.4vh,28px) clamp(20px,1.6vw,28px);
}

/* ---------------- o número ---------------- */
/* O número e a unidade são nós SEPARADOS: o contador de hero.js reescreve o
   textContent de quem tem `data-count`, e a unidade dentro dele sumiria. */
.perda__n{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .14em;margin:0;
  font-family:var(--titulo);font-weight:500;line-height:.95;letter-spacing:-.04em;
  font-size:min(clamp(2.3rem,3vw,3.3rem),6.6vh);
  font-variant-numeric:lining-nums tabular-nums;color:#FFFFFF;
}
.perda__n i{
  font-style:normal;font-size:.36em;font-weight:500;letter-spacing:.01em;
  color:rgba(156,201,245,.85);
}
/* × e % são parte do número, não unidade: maiores e colados */
.perda__n i.s{font-size:.56em;margin-left:-.08em}

/* ---------------- o texto: branco diz o quê, cinza completa ---------------- */
.perda__t{
  margin:clamp(10px,1.4vh,16px) 0 0;
  font-size:clamp(.86rem,.88vw,.95rem);line-height:1.45;
  color:rgba(255,255,255,.6);text-wrap:pretty;
}
.perda__t b{color:#FFFFFF;font-weight:600}

.perda__src{
  margin:auto 0 0;padding-top:clamp(12px,1.6vh,18px);
  font-family:var(--titulo);font-size:10px;font-weight:500;line-height:1.5;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);
}
.perda__src a{
  color:rgba(255,255,255,.5);
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.16);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease);
}
.perda__src a:hover{color:#9FD3FF;text-decoration-color:rgba(159,211,255,.5)}

/* =======================================================================
   O MESTRE: a janela × a realidade
   ======================================================================= */
.perda__rot{
  display:flex;justify-content:space-between;gap:12px;margin:0;
  font-family:var(--titulo);font-size:10.5px;font-weight:600;line-height:1.3;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.perda__rot span + span{color:rgba(255,255,255,.38);font-weight:500}

.duelo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin-top:clamp(14px,2.4vh,26px);
}
.duelo__lado{min-width:0}
.duelo__lado:first-child{padding-right:clamp(10px,1vw,16px)}
.duelo__lado + .duelo__lado{
  padding-left:clamp(16px,1.8vw,30px);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.09);
}
.perda--mestre .perda__n{font-size:min(clamp(3rem,5vw,5.4rem),10.5vh)}
.perda--mestre .perda__n i{font-size:.3em}
/* os 5 minutos são a única coisa acesa da seção: o acento, liso, sem brilho */
.duelo__lado--janela .perda__n span{color:#7CC4FF}
.duelo__lado--janela .perda__n i{color:#7CC4FF}
.duelo small{
  display:block;margin-top:clamp(8px,1.2vh,12px);max-width:26ch;
  font-size:.84rem;line-height:1.35;color:rgba(255,255,255,.6);
}

/* ---- a régua: 0 → 42 h, em escala, fina ---- */
.regua{margin:clamp(16px,2.6vh,30px) 0 0}
.regua__trilho{
  position:relative;height:2px;border-radius:2px;
  background:rgba(255,255,255,.09);
}
/* um traço só, nas 24 h (o único ponto com rótulo entre as pontas): traço
   sem rótulo é ruído */
.regua__trilho::after{
  content:"";position:absolute;inset:-3px 0;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) 57.143% 50% / 1px 8px no-repeat;
}
/* o tempo perdido é o lead ESFRIANDO: azul onde ainda havia chance, cinza
   depois. Entra da esquerda quando o cartão aparece (só com JS: sem ele a
   régua já nasce cheia) */
.regua__perdido{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(124,196,255,.9) 0%,rgba(124,196,255,.45) 6%,rgba(124,196,255,.2) 25%,rgba(255,255,255,.12) 60%,rgba(255,255,255,.09) 100%);
  transition:clip-path 2.2s cubic-bezier(.16,1,.3,1) .4s;
}
.js .perda--mestre:not(.is-in) .regua__perdido{clip-path:inset(0 100% 0 0)}
.perda--mestre.is-in .regua__perdido{clip-path:inset(0 0 0 0)}
/* a janela: 5 / 2520 min = 0,198 % da régua, com piso de 2 px: um traço
   alto, no acento, parado */
.regua__janela{
  position:absolute;left:0;top:-5px;bottom:-5px;width:max(2px,.198%);
  border-radius:1px;background:#7CC4FF;
}

.regua__marcas{
  position:relative;height:1.4em;margin-top:10px;
  font-family:var(--titulo);font-size:10.5px;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;
}
.regua__marcas span{position:absolute;left:var(--x);top:0;transform:translateX(-50%);white-space:nowrap}
.regua__marcas span:first-child{transform:none}
.regua__marcas span:last-child{transform:translateX(-100%)}
/* três rótulos bastam: 5 min, 24 h, 42 h (12 h e 36 h ficam só como traços) */
.regua__marcas span:nth-child(2),.regua__marcas span:nth-child(4){display:none}
.regua__marcas .is-janela{color:#7CC4FF;font-weight:600}

.perda--mestre .perda__t{
  margin-top:clamp(14px,2.4vh,26px);max-width:48ch;
  font-size:clamp(.92rem,.98vw,1.04rem);color:rgba(255,255,255,.66);
}

/* =======================================================================
   O CANAL: fecha a seção com a resposta
   ======================================================================= */
.perdas__canal{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);
  width:100%;max-width:min(1240px,100%);margin:0 auto;
  padding:clamp(12px,1.8vh,20px) clamp(20px,1.6vw,28px);
}
.perdas__canal .perda__n{flex:none;font-size:min(clamp(1.9rem,2.4vw,2.6rem),5.2vh)}
.perdas__canal p{
  flex:1;min-width:0;margin:0;
  font-size:clamp(.9rem,.95vw,1.02rem);line-height:1.4;color:rgba(255,255,255,.64);
}
.perdas__canal p b{color:#FFFFFF;font-weight:600}
.perdas__canal small{
  flex:none;font-family:var(--titulo);font-size:10px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);
}

/* =======================================================================
   RESPONSIVO
   ======================================================================= */
/* a tela do dono é 1521×712: a faixa tem 100svh e tudo cabe nela */
@media (min-width:1181px) and (max-height:820px){
  .perdas__pilha{gap:clamp(12px,2vh,22px)}
  .perda{padding:clamp(14px,2vh,20px) clamp(18px,1.4vw,24px)}
  .perda__t{font-size:.86rem;line-height:1.4}
  .perda--mestre .perda__t{font-size:.92rem}
  .perda__src{padding-top:clamp(8px,1.2vh,12px)}
}

@media (max-width:1180px){
  .perdas__grade{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .perda--mestre{grid-column:1 / -1;grid-row:auto}
  .perda:not(.perda--mestre){grid-column:auto}
}
@media (max-width:640px){
  .perdas__grade{grid-template-columns:minmax(0,1fr)}
  /* os quatro números viram linhas: o número à esquerda, a frase à direita */
  .perda:not(.perda--mestre){
    display:grid;grid-template-columns:5.6rem minmax(0,1fr);column-gap:14px;align-items:start;
  }
  .perda:not(.perda--mestre) .perda__n{grid-row:1 / span 2;font-size:2.3rem}
  .perda:not(.perda--mestre) .perda__t{margin:0}
  .perda:not(.perda--mestre) .perda__src{grid-column:2;padding-top:8px}
  .perda--mestre .perda__n{font-size:clamp(2.6rem,12vw,3.4rem)}
  .duelo small{font-size:.8rem}
  .perdas__canal{flex-wrap:wrap;row-gap:6px}
  .perdas__canal p{flex-basis:calc(100% - 6rem)}
  .perdas__canal small{flex-basis:100%}
}

/* ---------------- a luz diagonal que passa pelos cartões ----------------
   10/10, «bota um efeito de iluminação diagonal transicional nos cards»
   (no lugar do anel que acendia): uma luz larga e macia, a 135°, atravessa
   cada cartão do canto superior esquerdo ao inferior direito, na ordem de
   leitura (mestre → 7× → 72 % → 16 h → 3ª → 80 %), 3 s por cartão (2 s de
   passagem + 1 s de pausa; «deixe mais demorado entre cards»), ciclo de
   18 s. É um degradê de 250 % do cartão cuja posição transita com
   ease-in-out enquanto a opacidade entra e sai — luz larga (≈ 60 % do
   cartão), não faixa fina. Fica atrás do texto (z-index:-1 dentro do
   isolate do cartão) e presa ao canto do cartão (border-radius:inherit).
   Dispara com o is-in do mestre, para os seis andarem no mesmo relógio
   mesmo no celular, onde cada cartão entra numa hora. */
.perda::before,.perdas__canal::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  opacity:0;
  background-image:linear-gradient(135deg,
    transparent 32%,
    rgba(160,210,255,.12) 43%,
    rgba(255,255,255,.28) 50%,
    rgba(160,210,255,.12) 57%,
    transparent 68%);
  background-size:250% 250%;background-position:100% 100%;background-repeat:no-repeat;
}
.perda--mestre{--i:0}
.perda--mestre ~ .perda:nth-child(2){--i:1}
.perda--mestre ~ .perda:nth-child(3){--i:2}
.perda--mestre ~ .perda:nth-child(4){--i:3}
.perda--mestre ~ .perda:nth-child(5){--i:4}
.perdas__canal{--i:5}
.perda--mestre.is-in::before,
.perda--mestre.is-in ~ .perda::before,
.perdas__grade:has(.perda--mestre.is-in) ~ .perdas__canal::before{
  animation:perdaLuz 18s linear infinite;
  animation-delay:calc(var(--i) * 3s + .9s);
}
/* a posição transita de ponta a ponta nos 2 s iniciais do ciclo de 18 s
   (11,1 %), com ease-in-out; a opacidade entra em 0,22 s e sai nos últimos
   0,35 s. Depois a luz volta ao canto de partida já invisível e espera a
   vez seguinte (o cartão seguinte começa aos 3 s). */
@keyframes perdaLuz{
  0%{opacity:0;background-position:100% 100%;animation-timing-function:ease-in-out}
  1.2%{opacity:1}
  9.2%{opacity:1}
  11.1%{opacity:0;background-position:0% 0%}
  11.2%,100%{opacity:0;background-position:100% 100%}
}

@media (prefers-reduced-motion:reduce){
  .regua__perdido{transition:none}
  .js .perda--mestre:not(.is-in) .regua__perdido{clip-path:none}
  .perda::before,.perdas__canal::before{animation:none !important}
}