/* Sistema de cards do Voar Sem Asas.
   Carrega depois do site-bundle.css: quando a especificidade empata, vence esta
   folha. Cinco padrões — Fio, Foco, Placa, Vitrine e Trilha — mais a hierarquia
   comum (título grande em serifa, descrição pequena) e a limpeza das colunas de
   grid que existiam só para segurar a numeração. */

:root{
  --card-title:clamp(25px,2.6vw,31px);
  --card-desc:12.5px;
  --card-gap:13px;
  --card-hair:color-mix(in srgb,var(--taupe) 78%,transparent);
  --card-hair-light:rgba(255,255,255,.16);
}

/* ============================================================
   01 · Hierarquia — o título manda, a explicação apoia
   ============================================================ */

.journey-step h3,
.onboarding-steps-icons h3,
.marketplace-how__steps h3,
.class-timeline-step h3,
.training-method-grid h3{
  margin:0 0 var(--card-gap);
  font:200 var(--card-title)/1.04 var(--serif);
  letter-spacing:-.005em;
  text-wrap:balance;
}
.journey-step p,
.onboarding-steps-icons p,
.marketplace-how__steps p,
.class-timeline-step p,
.training-method-grid p{
  margin:0;
  max-width:34ch;
  color:var(--muted);
  font:400 var(--card-desc)/1.65 var(--sans);
}
.subscribe-flight-card strong{
  margin-bottom:var(--card-gap);
  font:200 clamp(24px,2.2vw,29px)/1.02 var(--serif);
  letter-spacing:-.015em;
}
/* O ícone dividia a primeira linha com o número e ficava encostado à direita.
   Sozinho ele cairia na coluna da esquerda — aqui ele volta para o canto. */
.subscribe-flight-card__icon{grid-column:1/3}

/* O h3 da preparação vinha em sans 17px contra um texto de 13px — quase o mesmo
   peso. Como o card tem duas colunas de ícone, o par título/texto ocupa a
   terceira e precisa de uma linha própria. */
.onboarding-steps-icons article{grid-template-columns:46px minmax(0,1fr)}
.onboarding-steps-icons h3{font-size:clamp(22px,2.2vw,29px)}
.onboarding-steps-icons p{max-width:28ch}

/* ============================================================
   02 · Limpeza — colunas e contadores que seguravam o número
   ============================================================ */

.benefits-ticket-card .benefit-list article{grid-template-columns:44px minmax(0,1fr)}
.journey-step{grid-template-columns:44px minmax(0,1fr)}
.program-line{grid-template-columns:44px minmax(0,1fr);gap:26px}
.faq-item summary{grid-template-columns:minmax(0,1fr) 28px!important}

/* O índice de produtos trocou o dígito por uma seta: o link leva para a seção
   logo abaixo, e a seta diz isso. */
.products-index a{justify-content:space-between;gap:24px}
.products-index a span{
  font:400 19px/1 var(--sans);
  letter-spacing:0;
  color:var(--rust);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.products-index a:hover span,
.products-index a:focus-visible span{transform:translateY(4px)}

/* Marcador de lista nos diferenciais do produto — um losango, não uma ordem. */
.product-perks li{grid-template-columns:22px minmax(0,1fr)}
.product-perks li>span{
  width:7px;height:7px;
  border:1px solid var(--rust);
  transform:rotate(45deg);
  transition:background .22s,border-color .22s,transform .22s;
}
.product-perks li:hover>span{background:#fff;border-color:#fff;transform:rotate(135deg)}

/* Os itens do card de nível vinham numerados por counter() no CSS. */
.level-card ul{counter-reset:none}
.level-card li{counter-increment:none;padding-left:28px}
.level-card li:before{
  content:"";
  width:7px;height:7px;
  border-radius:0;
  background:transparent;
  transform:translateY(-50%) rotate(45deg);
  left:2px;
}
.level-card li:hover{padding-left:34px}
.level-card li:hover:before{
  background:var(--rust-light);
  transform:translateY(-50%) rotate(135deg);
}
.level-card.intermediate li:before{border-color:rgba(255,255,255,.7)}
.level-card.intermediate li:hover:before{background:#fff}

/* ============================================================
   03 · Padrão Fio — um fio de luz percorre a borda
   Onde: valores dos Looks, destaques da oferta.
   ============================================================ */

@property --fio-angle{syntax:'<angle>';inherits:false;initial-value:0deg}

.card-fio{position:relative;isolation:isolate}
.card-fio::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--fio-angle),
    transparent 0 58%,
    color-mix(in srgb,var(--rust-light) 60%,transparent) 72%,
    var(--rust-light) 84%,
    var(--rust) 90%,
    transparent 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.card-fio:hover::before,
.card-fio:focus-within::before{
  opacity:1;
  animation:fio-run 2.6s linear infinite;
}
@keyframes fio-run{to{--fio-angle:360deg}}

/* Sem cursor não existe hover: o fio entra parado, na diagonal. */
@media (hover:none){
  .card-fio::before{
    opacity:.55;
    background:linear-gradient(135deg,transparent 30%,var(--rust-light) 58%,transparent 76%);
    animation:none;
  }
}

/* Os três valores dos Looks viram cards de verdade em vez de colunas coladas. */
.looks-values{gap:16px}
.looks-values article,
.looks-values article:first-child,
.looks-values article:last-child{
  padding:34px 30px 38px;
  border:1px solid var(--card-hair);
  border-radius:18px;
  background:#fff;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.looks-values article:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(37,25,31,.09)}
.looks-values h3{margin:0 0 var(--card-gap);font-size:clamp(34px,3.6vw,46px)}
.looks-values p{max-width:30ch;font-size:13px;line-height:1.62}

/* Os quatro pilares da capacitação — Segurança, Didática, Progressão,
   Autonomia — não são uma ordem: são quatro coisas de mesmo peso. O 55px de
   margem no h3 existia só para abrir espaço abaixo do dígito. */
.training-method-grid{gap:16px;border-top:0}
.training-method-grid article,
.training-method-grid article:first-child,
.training-method-grid article:last-child,
.training-method-grid article:nth-child(2),
.training-method-grid article:nth-child(-n+2){
  min-height:0;
  padding:32px 28px 36px;
  border:1px solid var(--card-hair);
  border-radius:18px;
  background:#fff;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.training-method-grid article:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(37,25,31,.09)}
.training-method-grid h3{margin:0 0 var(--card-gap)}

/* ============================================================
   04 · Padrão Foco — a luz segue o cursor sobre o fundo escuro
   Onde: planos presenciais, módulos do Online, planos de assinatura.
   ============================================================ */

.card-foco{
  --card-x:50%;
  --card-y:50%;
  position:relative;
  isolation:isolate;
}
.card-foco::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--card-x) var(--card-y),
    color-mix(in srgb,var(--rust-light) 22%,transparent),
    transparent 62%);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.card-foco:hover::after,
.card-foco:focus-within::after{opacity:1}

/* No plano presencial o conteúdo é texto solto em fluxo normal: sem subir os
   filhos, a camada posicionada da luz passaria por cima deles. */
.level-card.card-foco>*{position:relative;z-index:2}

/* Já no módulo a foto ocupa o card inteiro e a legenda vem num bloco que o
   bundle deixa em z-index 2 — aqui a luz é que sobe. */
.module-card.card-foco::after{z-index:3}

/* Mesma regra do plano presencial: conteúdo em fluxo normal, precisa subir
   acima da luz. */
.plan-card.card-foco>*{position:relative;z-index:2}

@media (hover:none){
  .card-foco::after{
    opacity:.7;
    background:radial-gradient(320px circle at 86% 12%,
      color-mix(in srgb,var(--rust-light) 16%,transparent),transparent 60%);
  }
}

/* ============================================================
   04B · Inclinação 3D dos planos de assinatura
   O bundle antigo (site-bundle.css) tem MUITAS regras de .plan-badge e
   .plan-card espalhadas por diferentes larguras de tela, várias com
   !important. Em vez de caçar cada uma, uso !important aqui também nas
   propriedades que preciso — como cards.css carrega por último, ganha de
   qualquer uma delas, em qualquer largura. */
.plans-grid{perspective:1400px}
.plan-card[data-tilt]{
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .12s ease-out,box-shadow .35s ease;
  will-change:transform;
}
.plan-card[data-tilt]:hover{box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}

/* selo "mais vantajoso": vira faixa centralizada no topo, dentro da borda
   (o card agora tem overflow:hidden por causa do brilho, então nada pode
   ficar posicionado pra fora dele). */
.plans-grid .plan-badge{
  position:absolute!important;
  top:16px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:auto!important;
  max-width:none!important;
  padding:7px 18px!important;
  border:0!important;
  background:var(--cream)!important;
  color:var(--rust)!important;
  font:800 10px/1 var(--sans)!important;
  letter-spacing:.1em;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 8px 16px -6px rgba(0,0,0,.4);
}
.plans-grid .plan-card.featured{padding-top:58px!important}

@media (prefers-reduced-motion:reduce){
  .plan-card[data-tilt]{transition:box-shadow .35s ease}
}

/* ============================================================
   05 · Padrão Placa — vidro fosco sobre uma placa colorida girada
   Onde: vantagens (Online e assinatura), preparação da primeira aula,
   destaques da oferta, sinais do momento, provas sociais da home.

   Duas camadas atrás do ícone, ambas em z-index:-1 dentro de um contexto
   de empilhamento próprio: ::before é a placa colorida e ::after o vidro.
   Como ::after vem depois na árvore, o vidro cobre a placa sem uma
   terceira camada. O ícone, sendo conteúdo, fica na frente das duas.

   Os seletores repetem a cadeia de cada contexto porque as regras
   originais do bundle têm dois níveis de classe — um `.placa` solto
   perderia a disputa de especificidade e a placa não apareceria.
   ============================================================ */

.placa,
.benefits-ticket-card .benefit-icon.placa,
.onboarding-steps-icons .onboarding-step-icon.placa,
.subscribe-flight-card .subscribe-flight-card__icon.placa,
.offer-moments__list article>span.placa{
  --placa-de:var(--rust-light);
  --placa-para:var(--rust);
  --placa-giro:-13deg;
  --placa-vidro-alto:rgba(255,255,255,.80);
  --placa-vidro-baixo:rgba(255,255,255,.42);
  --placa-aro:rgba(255,255,255,.72);
  --placa-sombra:rgba(39,23,40,.42);

  position:relative;
  isolation:isolate;
  background:transparent;
  border:0;
  border-radius:30%;
  overflow:visible;
  animation:none;
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}

/* a placa colorida — é ela que dá a cor, e sai do eixo o bastante
   para aparecer inteira de um lado */
.placa::before,
.benefits-ticket-card .benefit-icon.placa::before,
.onboarding-steps-icons .onboarding-step-icon.placa::before,
.subscribe-flight-card .subscribe-flight-card__icon.placa::before,
.offer-moments__list article>span.placa::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(142deg,var(--placa-de),var(--placa-para));
  box-shadow:0 8px 16px -8px var(--placa-sombra);
  transform:rotate(var(--placa-giro)) translate(-5px,-2px);
  opacity:1;
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}

/* a face de vidro fosco */
.placa::after,
.benefits-ticket-card .benefit-icon.placa::after,
.onboarding-steps-icons .onboarding-step-icon.placa::after,
.subscribe-flight-card .subscribe-flight-card__icon.placa::after,
.offer-moments__list article>span.placa::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(155deg,var(--placa-vidro-alto),var(--placa-vidro-baixo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),
             inset 0 -1px 0 rgba(255,255,255,.25),
             0 0 0 1px var(--placa-aro);
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}

/* o glifo e o SVG precisam ficar na frente das duas camadas */
.placa>*,.placa svg,.placa img{position:relative;z-index:1}

/* o glifo das vantagens vinha no marrom quente do tema, que fica turvo
   contra o rosa da placa — e virava vinho só no hover. Agora já nasce vinho. */
.benefits-ticket-card .benefit-icon.placa{color:var(--rust)}

.placa--redonda,
.subscribe-flight-card .subscribe-flight-card__icon.placa--redonda,
.offer-moments__list article>span.placa--redonda{border-radius:50%}

/* sobre fundo escuro o vidro entra mais fraco, senão vira mancha branca —
   e o glifo passa a branco, que é o que se lê sobre o rosa da placa */
.placa--escura,
.subscribe-flight-card .subscribe-flight-card__icon.placa--escura{
  --placa-vidro-alto:rgba(255,255,255,.34);
  --placa-vidro-baixo:rgba(255,255,255,.12);
  --placa-aro:rgba(255,255,255,.36);
  --placa-sombra:rgba(0,0,0,.65);
  color:#fff;
}
/* o hover antigo pintava o ícone inteiro de rosa e escondia o vidro */
.subscribe-flight-card:hover .subscribe-flight-card__icon.placa{
  background:transparent;
  color:#fff;
}

/* no hover a placa abre mais e o vidro dá um passo à frente.
   Cada contexto tem o seu pai, então não há classe extra na marcação. */
.benefits-ticket-card .benefit-list article:hover .placa,
.onboarding-steps-icons article:hover .placa,
.subscribe-flight-card:hover .placa,
.offer-moments__list article:hover .placa{transform:translate(2px,-2px)}

.benefits-ticket-card .benefit-list article:hover .placa::before,
.onboarding-steps-icons article:hover .placa::before,
.subscribe-flight-card:hover .placa::before,
.offer-moments__list article:hover .placa::before{
  transform:rotate(calc(var(--placa-giro) * 1.85)) translate(-8px,-4px);
}

/* a linha vira vinho no hover: o vidro clareia para a placa não sumir */
.benefits-ticket-card .benefit-list article:hover .benefit-icon.placa{background:transparent}
.benefits-ticket-card .benefit-list article:hover .benefit-icon.placa::after{
  --placa-vidro-alto:rgba(255,255,255,.94);
  --placa-vidro-baixo:rgba(255,255,255,.74);
}
.offer-moments__list article:hover>span.placa{
  background:transparent;
  color:var(--rust);
  transform:translate(2px,-2px);
}

@media (prefers-reduced-motion:reduce){
  .placa,.placa::before,.placa::after{transition:none}
}

/* ============================================================
   06 · Padrão Vitrine — card de imagem que abre no hover
   Onde: módulos do Online, capa do produto, cartas das galerias.
   ============================================================ */

.module-card{overflow:hidden}
.module-card img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.module-card:hover img{filter:saturate(1)}
.module-card h3{
  margin:0 0 var(--card-gap);
  font:200 clamp(28px,3vw,36px)/1 var(--serif);
  letter-spacing:-.015em;
}
.module-card p{
  margin:0;
  max-width:32ch;
  font:400 var(--card-desc)/1.65 var(--sans);
}
.module-card span{font-size:10px;letter-spacing:.16em}

.product-cover{transition:box-shadow .4s ease,border-color .4s ease}
.product-ticket-stage:hover .product-cover{
  border-color:var(--rust);
  box-shadow:0 26px 54px rgba(161,45,92,.18);
}

/* As cartas de Looks perderam a legenda (nome do look): eram muitas
   informações em cima da foto. Sem texto, o degradê escuro que existia só
   para a legenda se ler também sai — a foto fica inteira, sem sombra. */
.looks-card:after{content:none}

/* ============================================================
   07 · Padrão Trilha — a ordem vira um trilho, não um dígito
   Onde: Como funciona (home, Online, oferta), programa do workshop,
   passo a passo do marketplace.
   ============================================================ */

.trail-node{
  position:relative;
  display:block;
  justify-self:center;
  align-self:start;
  width:11px;height:11px;
  margin-top:14px;
  border:1px solid var(--rust);
  border-radius:50%;
  background:var(--paper);
  transition:background .3s ease,transform .3s cubic-bezier(.34,1.45,.44,1),border-color .3s ease;
}
.trail-node::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:var(--rust);
  transform:scale(0);
  transition:transform .3s cubic-bezier(.34,1.45,.44,1);
}

/* Trilho vertical: liga um passo ao seguinte e some depois do último nó. */
.journey-line.trail{position:relative}
.journey-line.trail::before{
  content:"";
  position:absolute;
  left:22px;
  top:63px;
  bottom:0;
  width:1px;
  margin-left:-.5px;
  background:linear-gradient(to bottom,
    var(--card-hair) 0 calc(100% - 96px),
    transparent);
  pointer-events:none;
}
.journey-step .trail-node{margin-top:20px}
.journey-step:hover .trail-node,
.journey-step:focus-within .trail-node{transform:scale(1.25)}
.journey-step:hover .trail-node::after,
.journey-step:focus-within .trail-node::after{transform:scale(1)}
.journey-line.trail>*:last-child .trail-node::after{transform:scale(1)}

/* No programa do workshop a linha do trilho seria redundante: cada item já é
   uma faixa com borda, e a faixa desliza no hover. Fica só o nó. */
.program-line .trail-node{
  justify-self:start;
  align-self:center;
  margin:0 0 0 6px;
}
.program-line:hover .trail-node,
.program-line:focus-visible .trail-node{
  border-color:#fff;
  background:transparent;
  transform:scale(1.25);
}
.program-line:hover .trail-node::after,
.program-line:focus-visible .trail-node::after{background:#fff;transform:scale(1)}

/* Trilho horizontal: as três etapas do marketplace. */
.trail--row{position:relative}
.trail--row::before{
  content:"";
  position:absolute;
  left:32px;
  right:32px;
  top:calc(32px + 5px);
  height:1px;
  background:linear-gradient(to right,
    var(--card-hair) 0 calc(100% - 120px),
    transparent);
  pointer-events:none;
}
.marketplace-how__steps .trail-node{
  justify-self:start;
  margin:0;
  font-size:0;
}
.marketplace-how__steps article:hover .trail-node{transform:scale(1.25)}
.marketplace-how__steps article:hover .trail-node::after{transform:scale(1)}
.marketplace-how__steps h3{margin-top:44px}

/* ============================================================
   07A · Dobras de galeria em claro
   A animação de tecido saiu daqui: estas seções passam a ter o fundo mais
   claro do site. Com o fundo invertido, tudo que estava escrito em branco
   precisa voltar para a tinta.
   ============================================================ */

.looks-stack-section.is-clara{
  background:var(--cream,#fcf9f7);
  color:var(--ink);
}
.looks-stack-section.is-clara:before{
  background:radial-gradient(circle at 50% 42%,
    color-mix(in srgb,var(--rust) 7%,transparent),transparent 46%);
}
.looks-stack-section.is-clara .looks-stack__word{color:color-mix(in srgb,var(--ink) 5%,transparent)}
.looks-stack-section.is-clara .micro-label,
.looks-stack-section.is-clara .micro-label.light{color:var(--rust)}
.looks-stack-section.is-clara .looks-stack__heading h2{color:var(--ink)}
.looks-stack-section.is-clara .looks-stack__heading p{color:var(--muted)}

.looks-stack-section.is-clara .looks-controls>button{
  border-color:color-mix(in srgb,var(--ink) 30%,transparent);
  color:var(--ink);
}
.looks-stack-section.is-clara .looks-controls>button:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.looks-stack-section.is-clara .looks-controls [data-look-dots] button{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.looks-stack-section.is-clara .looks-controls [data-look-dots] button.is-active{background:var(--rust)}

/* as cartas do leque tinham aro branco, que sumia no claro */
.looks-stack-section.is-clara .looks-card{border-color:color-mix(in srgb,var(--ink) 12%,transparent)}

/* A dobra das vantagens vinha com o tecido sobre um preto fixo (#120e11). Sem
   o tecido esse preto ficaria chapado, então ela passa para o cinza-lavanda
   da paleta — o cartão em papel se destaca contra ele. */
.benefits-band.is-clara{background:var(--soft)}
.benefits-band.is-clara .benefits-ticket-card{background:var(--paper)}
.benefits-band.is-clara .benefits-ticket-sheet{
  border-color:color-mix(in srgb,var(--ink) 18%,transparent);
  background:color-mix(in srgb,var(--soft) 55%,var(--paper));
}

/* ============================================================
   07B · Mesa — só no desktop, na dobra "Treine o movimento"
   As fotos vivem numa camada que cobre a seção inteira, então dá para
   arrastá-las por cima do título. A camada não intercepta clique; só as
   fotos é que respondem.
   ============================================================ */

.mesa-dobra{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(30px,4vw,64px);
  align-items:center;
  width:min(var(--max,1400px),calc(100% - 48px));
  margin-inline:auto;
  /* duas fileiras de polaroide precisam desta altura para não cortar a
     última: 300 do deslocamento + ~265 da foto com a aba */
  min-height:660px;
}
.mesa-texto{position:relative;z-index:2;text-align:left}
.mesa-texto .micro-label{display:block;margin-bottom:16px}
.mesa-texto h2{margin:0 0 16px;font:200 clamp(38px,4.4vw,64px)/.92 var(--serif);letter-spacing:-.03em}
.mesa-texto p{margin:0;max-width:38ch;color:var(--muted);font-size:13.5px;line-height:1.75}

/* a camada de arraste cobre a dobra inteira: sem limite de coluna */
.mesa-campo{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  perspective:2400px;
}
.mesa-campo .looks-card{
  position:absolute;
  inset:auto;
  width:var(--mesa-w,193px);
  height:auto;
  padding:9px 9px 0;
  border:0;
  border-radius:3px;
  background:#fdfbf9;
  box-shadow:0 22px 44px -20px rgba(39,23,40,.42),0 1px 0 rgba(39,23,40,.08);
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  pointer-events:auto;
  cursor:grab;
  opacity:1;
  filter:none;
  will-change:transform;
}
.mesa-campo .looks-card.esta-arrastando{cursor:grabbing}
.mesa-campo .looks-card.suave{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mesa-campo .looks-card:after{content:none}
.mesa-campo .looks-card img{
  position:static;
  width:100%;
  height:auto;
  aspect-ratio:1080/1350;
  object-fit:cover;
  border-radius:1px;
}
/* a aba de baixo do polaroid, onde entra o nome da conquista */
.mesa-campo .looks-card figcaption{
  position:static;
  display:block;
  padding:13px 4px 17px;
  background:none;
  text-align:center;
}
.mesa-campo .looks-card figcaption strong{
  display:block;
  max-width:none;
  text-align:center;
  color:var(--ink);
  font:200 15px/1.1 var(--serif);
}
.mesa-campo .g-brilho{
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7),transparent 70%);
  opacity:0;pointer-events:none;transition:opacity .3s;
}

/* dica em marca d'água, atrás das fotos */
.mesa-dica{
  position:absolute;left:0;right:0;top:26px;
  z-index:1;
  margin:0;
  color:color-mix(in srgb,var(--ink) 17%,transparent);
  font:700 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;
  text-align:center;
  pointer-events:none;
}

/* com a Mesa montada, o leque e os controles saem de cena */
.looks-stack-section.is-mesa{min-height:0;padding-block:clamp(80px,8vw,120px);overflow:hidden}
.looks-stack-section.is-mesa .looks-deck,
.looks-stack-section.is-mesa .looks-controls,
.looks-stack-section.is-mesa>.looks-stack__heading{display:none}

@media (prefers-reduced-motion:reduce){
  .mesa-campo .looks-card.suave{transition:none}
}

/* ============================================================
   07C · FAQ em acordeão
   As perguntas deixam de ser linhas soltas e viram uma pilha de fichas
   encostadas. A aberta se destaca da pilha: ganha canto redondo nos quatro
   lados e um respiro acima e abaixo. Quem fica ao lado dela arredonda o
   canto que passou a ser ponta — é o que dá a impressão de que a pilha
   abriu, e não de que uma linha cresceu.
   ============================================================ */

.faq-list{
  border-top:0!important;
  display:flex;
  flex-direction:column;
}

.faq-item{
  --ficha-raio:26px;
  border-bottom:0!important;
  overflow:hidden;
  background:var(--cream,#fcf9f7);
  border-radius:0;
  transition:border-radius .5s cubic-bezier(.34,1.5,.5,1),
             margin .5s cubic-bezier(.34,1.5,.5,1),
             background .3s ease;
}
/* o fio que separa duas fichas encostadas */
.faq-item+.faq-item{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 13%,transparent)}

.faq-item:first-child{border-start-start-radius:var(--ficha-raio);border-start-end-radius:var(--ficha-raio)}
.faq-item:last-child{border-end-start-radius:var(--ficha-raio);border-end-end-radius:var(--ficha-raio)}

/* a ficha aberta sai da pilha */
.faq-item[open]{
  border-radius:var(--ficha-raio);
  margin-block:12px;
  background:#fff;
  box-shadow:0 18px 40px -26px rgba(39,23,40,.4);
}
.faq-item[open]:first-child{margin-top:0}
.faq-item[open]:last-child{margin-bottom:0}

/* os vizinhos da aberta arredondam o canto que virou ponta */
.faq-item[open]+.faq-item{
  border-start-start-radius:var(--ficha-raio);
  border-start-end-radius:var(--ficha-raio);
  box-shadow:none;
}
.faq-item:has(+.faq-item[open]){
  border-end-start-radius:var(--ficha-raio);
  border-end-end-radius:var(--ficha-raio);
}

.faq-item summary{
  grid-template-columns:minmax(0,1fr) 28px!important;
  gap:18px!important;
  min-height:56px;
  padding:20px 24px!important;
  font-size:clamp(20px,1.9vw,29px)!important;
  transition:background .25s ease;
}
.faq-item summary:hover{background:color-mix(in srgb,var(--rust) 4%,transparent)}
.faq-item summary:focus-visible{outline:2px solid var(--rust);outline-offset:-3px}
.faq-item summary b{
  color:var(--rust);
  transition:transform .45s cubic-bezier(.34,1.5,.5,1);
}

/* a altura é animada pelo faq.js: aqui ela só precisa poder ser cortada */
.faq-answer{
  display:block!important;
  height:0;
  overflow:hidden;
}
.faq-item[open] .faq-answer{height:auto}
.faq-answer p,
.faq-item>p{
  /* o recuo de 64px à esquerda existia por causa do número, que saiu */
  padding:0 26px 22px 24px!important;
  font-size:15.5px!important;
  line-height:1.7!important;
}

@media (max-width:800px){
  .faq-item{--ficha-raio:20px}
  .faq-item summary{padding:16px 18px!important;font-size:19px!important}
  .faq-answer p,.faq-item>p{padding:0 18px 18px!important;font-size:15px!important}
}

@media (prefers-reduced-motion:reduce){
  .faq-item,.faq-item summary b,.faq-answer{transition:none!important}
}

/* ============================================================
   07D · Rescaldo da paleta
   Pontos onde o vinho e o rosa antigos estavam escritos à mão no CSS, ou
   onde a troca de tokens deixou duas superfícies com a mesma cor.
   ============================================================ */

/* O botão vazado revela o preenchimento amarelo no hover, mas a letra
   continuava branca — branco sobre amarelo não se lê. */
.button.ghost-light:hover,
.button.outline-light:hover,
.button.ghost-light:focus-visible,
.button.outline-light:focus-visible{
  color:var(--button-ink);
  border-color:var(--button-fill);
}
.button.ghost-light:hover .point,
.button.outline-light:hover .point{background-color:var(--button-ink)}

/* A lógica de cor do rótulo, em duas linhas:
   sobre papel, a tinta (13,3:1); sobre fundo escuro, o amarelo (11,5:1).
   O amarelo é o destaque da paleta e é a cor mais clara que ela tem — sobre
   o verde é ela que se lê e ela que combina. O rosa pastel dava contraste
   parecido, mas rosa sobre verde é combinação suja.

   As três últimas linhas são rede de segurança: em superfície escura o
   rótulo clareia mesmo que alguém esqueça a classe `.light` na marcação,
   que foi exatamente o que aconteceu no rodapé. */
.micro-label{color:var(--rust)}
/* Só onde o fundo é escuro de fato. Um curinga de "-hero" pegava também os
   heroes claros, como o de Produtos, e pintava o rótulo com a cor de fundo
   escuro em cima do papel. Os heroes escuros já trazem `.light` na marcação. */
.micro-label.light,
.surface-dark .micro-label,
.site-footer .micro-label{color:var(--label-on-dark,var(--rust-light))}
/* Na página de assinatura o rodapé fica transparente sobre o papel, então
   ali o rótulo tem de voltar para a tinta. */
body.page-subscribe .site-footer .micro-label{color:var(--rust)}

/* Estas seções não têm fundo escuro: o fundo delas é o próprio destaque.
   Aí o tom claro do destaque não contrasta com nada — o certo é a mesma
   cor que o site já usa para texto sobre o destaque. */
.surface-rust .micro-label,
.warm-card .micro-label,
.path-training .micro-label,
.graduates-call .micro-label,
.location-card .micro-label,
.products-future .micro-label,
.looks-coupon-cta .micro-label,
.plan-card.featured .micro-label{color:var(--on-rust,#fff)}
.hero .micro-label{color:#fff}

/* ── Os três caminhos da home ─────────────────────────────── */

/* O card da capacitação usava --rust, que agora é a mesma cor do fundo da
   seção: o card sumia dentro dela. Passa a ser o amarelo, que é onde a
   paleta manda o destaque ir, com a tinta escura por cima. */
/* No Bosque o fundo da seção e o destaque eram a mesma cor e o card sumia;
   nas demais paletas o destaque já se separa do escuro. */
.path-training{
  background:var(--rust);
  border-color:color-mix(in srgb,var(--ink) 22%,transparent);
  color:var(--ink);
}
.path-training h3,.path-training p,.path-training>span{color:var(--on-rust,#fff)}
.path-training p{color:color-mix(in srgb,var(--on-rust,#fff) 78%,transparent)}
.path-training .path-card__button{
  border-color:color-mix(in srgb,var(--on-rust,#fff) 45%,transparent);
  background:var(--paper);
  color:var(--ink);
}
/* A capacitação ganhou foto de verdade: a cor rust vira um véu por cima
   dela em vez do fundo sólido, pra manter a identidade do card sem
   esconder a imagem. */
.path-training img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-2;
  transition:transform .65s;
}
.path-training:hover img{transform:scale(1.05)}
.path-training:after{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--rust) 62%,transparent) 0%,
    color-mix(in srgb,var(--dark) 78%,transparent) 100%);
}

/* ── Card Online: o vídeo original intercalado com 2 fotos ───── */
.path-online__slides{position:absolute;inset:0;z-index:0}
.path-online__slides img,
.path-online__slides video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  filter:saturate(.88) contrast(1.08);
  transition:opacity 1.2s ease;
}
.path-online__slides img.is-active,
.path-online__slides video.is-active{opacity:1}

/* Todo o bloco de texto do card Online — número, título, descrição e
   botão — junto na base do card, onde o véu escuro é mais forte. Solto no
   meio/topo ele caía sobre qualquer trecho claro da foto ou do vídeo, sem
   contraste nenhum. */
.path-online>.path-online__content{justify-content:flex-end!important}

/* Botão sempre na base do card, não solto logo depois do texto — os outros
   dois caminhos da home têm quantidades de texto diferentes, então sem
   isso o botão ficava em alturas diferentes em cada um. */
.path-classes>div,
.path-training>div{margin-top:auto}

/* Mesmo rodízio de fotos, agora no hero das páginas de Aulas Presenciais e
   Capacitação — reaproveita as mesmas 3 fotos do card Online da home. */
.hero-media .hero-slideshow{position:absolute;inset:0}
.hero-media .hero-slideshow img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:none!important;
  transition:opacity 1.4s ease;
}
.hero-media .hero-slideshow img.is-active{opacity:1}

/* Véus e brilhos que tinham o vinho antigo escrito em rgba fixo. */
/* O véu escuro do card: só o bastante para o texto se ler por cima do
   vídeo. Mais fechado que isto e o vídeo some, que foi o que aconteceu
   quando o roxo virou verde. */
.path-online:before{
  background:
    linear-gradient(100deg,
      color-mix(in srgb,var(--dark) 68%,transparent) 0%,
      color-mix(in srgb,var(--dark) 42%,transparent) 48%,
      color-mix(in srgb,var(--dark) 16%,transparent) 100%),
    linear-gradient(180deg,
      transparent 42%,
      color-mix(in srgb,var(--dark) 60%,transparent) 66%,
      color-mix(in srgb,var(--dark) 92%,transparent) 100%);
}
.path-online__glass{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--rust-light) 16%,transparent),
    transparent 42%,
    color-mix(in srgb,var(--dark) 20%,transparent));
}
/* O número grande estava em lavanda sobre a foto e sumia. O amarelo é o
   destaque da paleta e é o que se enxerga sobre imagem escura. */
.path-online__content>strong{color:var(--rust-light)}
.path-classes:after{
  background:linear-gradient(transparent 25%,color-mix(in srgb,var(--dark) 92%,transparent));
}

/* ── Como funciona ────────────────────────────────────────── */

/* A descrição de cada passo tinha herdado o corpo de 12,5px dos cards.
   Aqui ela é texto de leitura, não legenda. */
.journey-step h3{font-size:clamp(27px,2.8vw,34px)}
.journey-step p{
  max-width:44ch;
  font-size:16px;
  line-height:1.65;
  color:var(--muted);
}

/* ── Provas sociais ───────────────────────────────────────── */

/* A placa ficou cinza-esverdeada quando o destaque virou verde. Os dois
   pastéis da paleta ainda não tinham função: são eles que dão a cor. */
.placa::before,
.benefits-ticket-card .benefit-icon.placa::before,
.onboarding-steps-icons .onboarding-step-icon.placa::before,
.subscribe-flight-card .subscribe-flight-card__icon.placa::before,
.offer-moments__list article>span.placa::before{
  --placa-de:var(--rust-light);
  --placa-para:var(--rust);
}
/* Provas sociais da home: pílulas com ícone + texto fixo (nada de letra
   subindo/descendo — era bonito na teoria mas quebrava a leitura em
   telas reais). Só o ícone anima, no mesmo padrão "Placa" (plaquinha
   colorida girada + vidro fosco) usado nas vantagens e na primeira aula.
   Empilhadas na coluna, não em grade, porque são pílulas de largura cheia. */
.home-proof-metrics{display:flex;flex-direction:column;gap:12px}

/* Tudo prefixado com .home-proof-metrics de propósito: o bundle antigo
   ainda tem `.home-proof-metrics span{color:var(--muted)}` (especificidade
   0-1-1) que bateria direto no texto se ele não tivesse essa cor definida
   explicitamente aqui. */
.home-proof-metrics .metric-btn{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:14px 20px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  border-radius:999px;
  background:linear-gradient(160deg,var(--paper),var(--soft));
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  --placa-de:var(--rust-light);
  --placa-para:var(--rust);
}
.home-proof-metrics .metric-btn:nth-child(2){--placa-de:#caa06b;--placa-para:#8a5a33}
.home-proof-metrics .metric-btn:nth-child(3){--placa-de:#8f9ec8;--placa-para:#4f5789}
.home-proof-metrics .metric-btn:focus-visible{outline:2px solid var(--rust);outline-offset:2px}

/* O ícone reaproveita o padrão Placa (seção 05): plaquinha colorida
   girada atrás + vidro fosco na frente, glifo por cima. Só precisa da
   classe — as camadas ::before/::after já vêm do padrão compartilhado. */
.home-proof-metrics .metric-btn-icon{
  position:relative;z-index:1;
  isolation:isolate;
  display:grid;
  place-items:center;
  flex:none;
  width:48px;height:48px;
  border-radius:50%;
  overflow:visible;
  color:#fff;
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
.home-proof-metrics .metric-btn-icon:before{
  content:"";
  position:absolute;inset:-1px;
  z-index:-1;
  border-radius:50%;
  background:linear-gradient(142deg,var(--placa-de),var(--placa-para));
  box-shadow:0 8px 16px -8px color-mix(in srgb,var(--placa-para) 60%,transparent);
  transform:rotate(-13deg) translate(-3px,-2px);
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
.home-proof-metrics .metric-btn-icon:after{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  border-radius:50%;
  background:linear-gradient(155deg,rgba(255,255,255,.62),rgba(255,255,255,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.55);
}
.home-proof-metrics .metric-btn-icon svg{position:relative;z-index:1;display:block;width:22px;height:22px}
.home-proof-metrics .metric-btn:hover .metric-btn-icon,
.home-proof-metrics .metric-btn:focus-visible .metric-btn-icon{transform:translate(2px,-2px)}
.home-proof-metrics .metric-btn:hover .metric-btn-icon:before,
.home-proof-metrics .metric-btn:focus-visible .metric-btn-icon:before{transform:rotate(-24deg) translate(-7px,-4px)}

/* Texto fixo, centralizado com o ícone por align-items:center do pai —
   sem posicionamento absoluto, sem grid de sobreposição, sem mistério. */
.home-proof-metrics .metric-btn-text{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.home-proof-metrics .metric-btn-value{font-size:16px;font-weight:700;color:var(--ink);line-height:1.25}
.home-proof-metrics .metric-btn-label{font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.25}

@media (prefers-reduced-motion:reduce){
  .home-proof-metrics .metric-btn-icon,.home-proof-metrics .metric-btn-icon:before{transition:none}
}

/* botão "Conhecer a comunidade" centralizado sob a fileira de botões,
   sem esticar (fica do tamanho do conteúdo, só a posição muda) */
.community-copy .button{display:flex;width:fit-content;margin-inline:auto}

/* Selo "VOAR SEM ASAS × KAISAN" virou botão de verdade: antes era só um
   texto solto acima do título, sem ação nenhuma. */
.partner-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border:1px solid color-mix(in srgb,currentColor 35%,transparent);
  border-radius:999px;
  text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.partner-badge:hover,
.partner-badge:focus-visible{
  background:var(--rust-light);
  border-color:var(--rust-light);
  color:var(--dark);
}


/* ============================================================
   07E · Cores presas do cupom dos Looks
   Esta dobra tinha meia dúzia de tons escritos à mão no bundle, então
   ela não acompanhava a troca de paleta. Agora tudo sai dos tokens.
   ============================================================ */
.looks-coupon-guide__copy>strong em{color:var(--rust-light)}
.looks-coupon-guide__copy>small{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.looks-coupon-guide__field>span{color:var(--muted)}
.looks-coupon-guide__field button:hover{background:var(--rust-hover)}
.looks-coupon-guide__discount{color:var(--muted)}
.looks-coupon-guide.is-applied .looks-coupon-guide__field button{background:var(--cool)}
.looks-coupon-guide__success{color:var(--cool)}
.looks-coupon-guide__cursor:before{border-color:color-mix(in srgb,var(--rust) 65%,transparent)}

/* ============================================================
   08 · Utilitários
   ============================================================ */

.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Posição no carrossel do Instagram: pontos no lugar de "01 / 05". */
.insta-dots{display:flex;align-items:center;gap:7px}
.insta-dots i{
  display:block;
  width:6px;height:6px;
  border-radius:50%;
  background:color-mix(in srgb,var(--ink) 25%,transparent);
  transition:width .25s ease,background .25s ease;
}
.insta-dots i.is-on{width:22px;border-radius:99px;background:var(--rust)}

/* ============================================================
   09 · Telas pequenas
   ============================================================ */

@media (max-width:800px){
  :root{--card-title:clamp(23px,6.2vw,28px)}

  .journey-step{grid-template-columns:34px minmax(0,1fr)}
  .journey-line.trail::before{left:17px;top:49px}
  .journey-step .trail-node{margin-top:16px}

  .program-line{grid-template-columns:30px minmax(0,1fr);gap:16px}
  .program-line .trail-node{margin-left:0}

  .faq-item summary{grid-template-columns:minmax(0,1fr) 24px!important}

  .looks-values{gap:12px}
  .looks-values article,
  .looks-values article:first-child,
  .looks-values article:last-child{padding:28px 22px 30px}

  .training-method-grid{gap:12px}
  .training-method-grid article,
  .training-method-grid article:first-child{padding:26px 22px 30px}

  /* Empilhado, o trilho horizontal do marketplace vira vertical. */
  .trail--row::before{
    left:0;right:auto;
    top:27px;bottom:26px;
    width:1px;height:auto;
    background:linear-gradient(to bottom,
      var(--card-hair) 0 calc(100% - 80px),
      transparent);
  }
  .marketplace-how__steps .trail-node{margin-left:-5px}
  .marketplace-how__steps h3{margin-top:26px}

  .onboarding-steps-icons article{grid-template-columns:40px minmax(0,1fr)}
}

/* ============================================================
   10 · Movimento reduzido
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .card-fio::before{animation:none;opacity:.5}
  .card-fio:hover::before,
  .card-fio:focus-within::before{animation:none}
  .trail-node,
  .trail-node::after,
  .product-perks li>span,
  .products-index a span,
  .benefits-ticket-card .benefit-icon::before,
  .onboarding-steps-icons .onboarding-step-icon::before,
  .looks-values article,
  .training-method-grid article,
  .module-card img{transition:none}
  .looks-values article:hover,
  .training-method-grid article:hover{transform:none}
}