/* ==========================================================================
   toucas.css — a ÚNICA camada de CSS que esta oferta acrescentou.

   style.css, type.css e design.css são os mesmos arquivos da página base,
   byte a byte. Nada aqui muda cor, fonte, espaçamento de seção, sombra ou
   animação existente: só resolve os três casos que a base não tinha.

   1. rótulo de nome e etiquetas dentro do card do catálogo
   2. grid de bônus em 2 colunas (seção "Verão e inverno")
   3. pequenos ajustes de lista/nota nas seções novas

   Tudo sai das mesmas variáveis do :root de style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. hidden de verdade
   Alguns blocos desligados (topbar, depoimentos, escassez, nº de alunas) usam
   o atributo hidden, mas suas classes declaram display:flex — que ganha do
   display:none do navegador. Esta regra devolve a prioridade ao hidden.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   1. Card do catálogo: nome do bichinho + etiquetas
   O briefing pediu "cards com imagem + nome" e etiquetas de versão e nível.
   O bloco fica abaixo da imagem, dentro do mesmo .card, e herda o hover,
   a borda, o raio e a sombra que já existiam.
   -------------------------------------------------------------------------- */
.card__label {
  padding: 8px 10px 10px;
  text-align: center;
  background-color: hsl(var(--card));
}
@media (min-width: 768px) { .card__label { padding: 10px 12px 12px; } }

.card__name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  color: hsl(var(--primary));
  text-wrap: balance;
}
@media (min-width: 768px) { .card__name { font-size: 15px; line-height: 20px; } }

.card__tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   2. Etiqueta (.tag) — mesma linguagem do .badge, em tamanho menor
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid hsl(var(--primary) / 0.15);
  background-color: hsl(var(--secondary) / 0.6);
  color: hsl(var(--primary));
  padding: 2px 8px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (min-width: 768px) { .tag { font-size: 11px; line-height: 16px; } }

.tag--verao {
  border-color: hsl(var(--accent) / 0.25);
  background-color: hsl(var(--accent) / 0.08);
  color: hsl(var(--accent));
}
.tag--inverno {
  border-color: hsl(var(--sky) / 0.3);
  background-color: hsl(var(--sky) / 0.1);
  color: hsl(var(--headline-accent));
}

/* Etiqueta de tamanho na tabela: largura fixa pra as idades alinharem. */
.tag--size {
  min-width: 46px;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0;
  background-color: hsl(var(--primary) / 0.08);
  border-color: hsl(var(--primary) / 0.2);
}
@media (min-width: 768px) { .tag--size { min-width: 54px; font-size: 14px; } }

/* --------------------------------------------------------------------------
   3. Seção "Verão e inverno": o mesmo .bonus__grid, em 2 colunas
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .bonus__grid--2 { max-width: 672px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1024px) { .bonus__grid--2 { max-width: 880px; gap: 32px; } }

/* ícone dentro do título do card de estação */
.bonus__title .icon { display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* --------------------------------------------------------------------------
   4. Listas das seções novas
   Reaproveitam .plan__list (mesma linha divisória, mesmo gap de 12px).
   -------------------------------------------------------------------------- */
/* .plan__list-title fora do .plan__body original não tinha respiro embaixo */
.bonus__body .plan__list-title { margin-bottom: 16px; }

.plan__list--table { text-align: left; }
.plan__list--table li { align-items: center; }
.plan__list--table li > span:last-child { flex: 1 1 auto; }

/* par rótulo → valor da seção "Quanto custa e quanto rende" */
.conta__valor {
  display: block;
  margin-top: 2px;
  /* valor longo (ou um placeholder por preencher) nunca pode vazar do card */
  overflow-wrap: anywhere;
  font-family: var(--font-headline);
  font-size: 18px;
  line-height: 24px;
  color: hsl(var(--primary));
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .plan__list--conta li > span:last-child { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .conta__valor { margin-top: 0; text-align: right; }
}

/* A sobra é a linha que transforma dado em argumento: ela ganha destaque
   e perde a divisória, pra fechar o card como um resultado. */
.conta__sobra { border-bottom-width: 0 !important; padding-bottom: 0 !important; }
.conta__sobra .chip { background-color: hsl(var(--green) / .14); }
.conta__sobra .chip .icon { color: hsl(var(--green)); }
.conta__sobra > span:last-child { font-weight: 700; color: hsl(var(--foreground)) !important; }
.conta__sobra .conta__valor { font-size: 24px; line-height: 30px; color: hsl(var(--green)); }
@media (min-width: 768px) { .conta__sobra .conta__valor { font-size: 26px; } }

.conta__texto { margin-top: 24px; margin-bottom: 0; }

/* nota de rodapé de seção */
.nota {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: hsl(var(--foreground) / 0.6);
  text-wrap: pretty;
}

/* container um pouco mais estreito, pras seções de card único */
.faq__wrap--narrow { max-width: 560px; }

/* --------------------------------------------------------------------------
   6. Trilha "Comece por aqui": a foto da touca de cada passo
   Reaproveita o .card do catálogo (mesma borda, mesmo raio, mesma sombra).
   O .trilha limita o efeito a esta seção — o "Passo a passo" lá embaixo usa
   o mesmo .how__step e não pode ser afetado.
   -------------------------------------------------------------------------- */
.trilha .how__step { align-items: center; }
.trilha .trilha__texto { flex: 1 1 auto; min-width: 0; }

.trilha .trilha__foto { flex: 0 0 84px; width: 84px; }
@media (min-width: 640px) { .trilha .trilha__foto { flex-basis: 124px; width: 124px; } }
@media (min-width: 1024px) { .trilha .trilha__foto { flex-basis: 148px; width: 148px; } }

/* No celular a foto e o ícone disputam a largura com o título, que acaba
   quebrando em três linhas. Abaixo de 640px o ícone sai: a foto já diz
   do que se trata, melhor que o novelo genérico. */
@media (max-width: 639px) {
  .trilha .how__step { gap: 14px; }
  .trilha .how__head > .icon { display: none; }
  .trilha .how__head { gap: 0; }
}

/* sem hover de card aqui: a foto é ilustração do passo, não é clicável */
.trilha .trilha__foto .card { cursor: default; }

/* --------------------------------------------------------------------------
   5. Modal do catálogo: linha de etiquetas abaixo do título
   -------------------------------------------------------------------------- */
.dialog__tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  color: hsl(var(--primary) / 0.8);
}
.dialog__tags:empty { display: none; }

/* --------------------------------------------------------------------------
   6. Celular do Passo a Passo
   O base tinha uma janela de navegador deitada (16:9). O app é usado no
   celular e a gravação é vertical, então a moldura virou um celular em pé.
   Tudo daqui sai dos tokens do :root — nenhuma cor nova foi inventada.
   -------------------------------------------------------------------------- */
.fone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  padding: 20px 10px 14px;
  border-radius: 44px;
  background: linear-gradient(158deg, hsl(var(--primary) / 0.92), hsl(var(--primary) / 0.62) 45%, hsl(var(--primary) / 0.98));
  box-shadow: var(--shadow-2xl);
  position: relative;
  isolation: isolate;
}

/* fio de luz na borda, pra moldura não ficar chapada */
.fone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, hsl(0 0% 100% / 0.45), hsl(0 0% 100% / 0) 42%);
  -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;
  pointer-events: none;
}

/* alto-falante e barra de gesto ficam na moldura, nunca em cima da tela:
   a gravação já começa no conteúdo do app, sem barra de status */
.fone__ilha,
.fone__barra {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 9999px;
  background-color: hsl(0 0% 100% / 0.28);
}
.fone__ilha { top: 8px; width: 58px; height: 5px; }
.fone__barra { bottom: 5px; width: 92px; height: 4px; }

.fone__tela {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background-color: hsl(var(--muted, var(--background)));
  aspect-ratio: 560 / 1188;
}
.fone__tela video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* dentro do passo 2, no mobile, o espaço é menor: o celular encolhe */
.how__mock-mobile .fone { max-width: 248px; }

/* a coluna da direita recortava o mockup antigo; o celular precisa da sombra */
@media (min-width: 1024px) {
  .how__mock-desktop { overflow: visible; border-radius: 0; align-items: flex-start; }
  .how__mock-desktop .fone { max-width: 312px; }
}

@media (prefers-reduced-motion: reduce) {
  .fone { box-shadow: var(--shadow-lg); }
}

/* --------------------------------------------------------------------------
   7. O clique nos botões de compra não pode se perder

   Sintoma: era preciso clicar duas vezes em "QUERO O COMPLETO" e, logo
   depois de rolar até o preço, também em "QUERO O BÁSICO".

   Causa: um `click` só dispara se o mousedown e o mouseup caírem no MESMO
   elemento. Os dois botões estavam se mexendo debaixo do ponteiro.

     a) .btn--pulse rodava `gentle-pulse-accent`, um transform: scale(1 → 1.05)
        infinito. Medido: a largura oscilava 18 px e a borda esquerda 9 px,
        para sempre. Apertar com o botão grande e soltar com ele pequeno
        deixava o ponteiro fora — e o clique não acontecia.

     b) .reveal-on-scroll desliza a seção inteira 26 px para cima em 0,8 s.
        Quem rolava até o preço e clicava na hora pegava o botão em movimento.

   Correção: o pulso sai do transform e vira sombra (o desenho continua
   chamando atenção, a caixa de clique nunca se move), e a seção de preço
   aparece só com fade, sem deslizar. O resto da página mantém o deslize.
   -------------------------------------------------------------------------- */

/* (a) pulso sem movimento.
   O .btn tem overflow:hidden, mas isso não recorta a sombra do próprio
   elemento — só o conteúdo dele. Por isso o anel funciona aqui. */
.btn--pulse {
  --anel-cor:  hsl(var(--primary) / .42);
  --anel-base: var(--shadow-primary);
  animation: pulso-anel 2s var(--ease-out) infinite;
}
.btn--accent.btn--pulse {
  --anel-cor:  hsl(var(--accent) / .42);
  --anel-base: var(--shadow-accent);
}
@keyframes pulso-anel {
  0%   { box-shadow: var(--anel-base), 0 0 0 0   var(--anel-cor); }
  70%  { box-shadow: var(--anel-base), 0 0 0 18px transparent; }
  100% { box-shadow: var(--anel-base), 0 0 0 0   transparent; }
}

/* (b) a seção de preço entra sem deslizar.
   O fade continua; o que sai é o translateY que movia o alvo do clique. */
.js #pricing .reveal-on-scroll,
.js #pricing [data-stagger] > * {
  transform: none;
}

/* quem pediu menos movimento já não tinha o pulso; mantém assim */
@media (prefers-reduced-motion: reduce) {
  .btn--pulse { animation: none !important; }
}