/* ==========================================================================
   PACK TESOURO DO SERRALHEIRO — folha de estilo única
   --------------------------------------------------------------------------
   Toda a aparência do site está neste arquivo.
   Para mudar CORES, TAMANHOS ou FONTES, mexa apenas no bloco :root logo
   abaixo — o resto do arquivo usa essas variáveis.
   ========================================================================== */

:root {
  /* --- CORES (formato HSL: matiz / saturação / luminosidade) --------------
     Site em FUNDO BRANCO. São DUAS laranjas de propósito, e a diferença
     importa: --primary é escurecida e serve para TEXTO (título, preço,
     selo escrito). Laranja viva sobre branco dá contraste perto de 2:1 —
     some na tela do celular no sol, que é exatamente onde o serralheiro
     vai ler. --primary-vivo só preenche fundo de botão, e em cima dela o
     texto é escuro (--on-primary), não branco, porque branco sobre
     laranja viva reprova no mesmo teste.                                  */
  --bg:            0 0% 100%;     /* fundo da página: branco      */
  --fg:            220 22% 15%;   /* texto principal              */
  --card:          0 0% 100%;     /* fundo dos cartões            */
  --band:          220 20% 97%;   /* faixas alternadas, cinza claro */
  --muted:         220 10% 42%;   /* texto secundário / cinza     */
  --border:        220 16% 88%;   /* linhas e bordas              */
  --primary:       24 88% 40%;    /* LARANJA ESCURECIDA (texto)   */
  --primary-vivo:  33 100% 50%;   /* laranja viva (preenchimento) */
  --on-primary:    220 25% 11%;   /* texto em cima do laranja vivo */

  /* Mantidos porque o resto do arquivo ainda cita estes nomes; agora
     apontam para os mesmos valores do tema claro. */
  --light-ink:     220 22% 15%;
  --light-muted:   220 10% 42%;
  --light-border:  220 16% 88%;
  --light-accent:  24 88% 40%;

  /* --- MEDIDAS ----------------------------------------------------------- */
  --radius:        .75rem;
  --gap-section:   4rem;                 /* respiro vertical das seções */
  --gradient:      linear-gradient(135deg, hsl(38 100% 55%), hsl(24 95% 48%));
  --glow:          0 8px 22px hsl(28 90% 45% / .28);
  /* verde dos botões de compra — ver o comentário em .btn-hero */
  --gradient-cta:  linear-gradient(135deg, hsl(145 62% 42%), hsl(160 70% 33%));
  --glow-cta:      0 10px 26px hsl(152 60% 30% / .34);

  /* --- FONTES ------------------------------------------------------------
     Quer deixar o site ainda mais leve? Troque --font-text por:
       --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     e remova o <link> do Google Fonts no index.html.                       */
  --font-title:    "Oswald", Impact, system-ui, sans-serif;
  --font-text:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* O smooth voltou. Ele tinha saído quando a seção de preço ficava a
   ~12.000px daqui e a animação atravessava 18 telas, parecendo
   travamento. Agora o preço está na quarta tela e o CTA mais distante
   dele fica a poucas telas, então a rolagem animada é curta e ajuda a
   pessoa a entender que a página se moveu. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: hsl(var(--bg));
  color: hsl(var(--fg));
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-title);
  text-transform: uppercase;
  /* 1.1 era apertado demais: em caixa alta a cedilha de COMEÇAR e
     ORÇAMENTO encostava na linha de baixo. */
  line-height: 1.18;
  margin: 0;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* a "biblioteca" de ícones no topo do index.html nunca aparece na tela */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ícones do sprite SVG (topo do index.html) */
.ico {
  width: 1.25rem; height: 1.25rem;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   ESTRUTURA — faixas e larguras de conteúdo
   ========================================================================== */

section { padding: var(--gap-section) 1rem; }

/* faixa com fundo mais claro, para alternar as seções */
.band { background: hsl(var(--band)); }

/* larguras máximas do conteúdo centralizado */
.wrap    { max-width: 72rem; margin-inline: auto; }
.wrap-md { max-width: 64rem; margin-inline: auto; }
.wrap-sm { max-width: 48rem; margin-inline: auto; }
.wrap-xs { max-width: 32rem; margin-inline: auto; }

.center { text-align: center; }

/* ==========================================================================
   TÍTULOS DE SEÇÃO
   ========================================================================== */

/* Título em grafite, não em laranja. Laranja fica reservada para preço,
   ícone, selo e a palavra destacada dentro do título — texto grande
   inteiro colorido cansa a vista e rouba o destaque do preço. */
.h-section {
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(var(--fg));
  margin-bottom: .75rem;
}
.h-section em, .hero h1 em {
  font-style: normal;
  color: hsl(var(--primary));
}
.hero h1 em { white-space: nowrap; }

.sub {
  color: hsl(var(--muted));
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-image: var(--gradient-cta);
  box-shadow: var(--glow-cta);
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: opacity .2s;
}
.btn:hover { opacity: .9; }

/* botão pequeno do cabeçalho */
.btn-sm {
  padding: .5rem 1.25rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: .875rem;
}

/* botão grande de chamada */
/* O texto usava Oswald (a fonte de título, condensada) em caixa alta com
   espaçamento aumentado. Condensada + caixa alta + espaçamento é o que
   dava o aspecto esticado: as letras ficam estreitas e o vão entre elas
   largo. Aqui o botão usa a fonte de texto, sem caixa alta forçada. */
.btn-lg {
  padding: 1.05rem 2rem;
  border-radius: 1.15rem;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* botão grande ocupando toda a largura (caixa de preço) */
.btn-block { display: flex; width: 100%; }

/* ==========================================================================
   CABEÇALHO FIXO
   ========================================================================== */

/* Não é mais fixo: a faixa fica no topo da página e sai de cena junto com
   a hero. Ocupar a tela inteira o tempo todo com um aviso de desconto
   cansa, e no celular ela comia altura útil em cada rolagem. */
.header {
  position: static;
  color: hsl(var(--fg));
}

/* O CSS de .header-inner e .logo foi removido junto com a barra da logo:
   não sobrou nenhum elemento com essas classes no HTML. */

/* ==========================================================================
   HERO
   ========================================================================== */

.hero,
.pack-section {
  background: #fff;
  color: hsl(var(--light-ink));
}

/* Sem cabeçalho fixo não há nada para compensar: a faixa já ocupa o
   espaço dela no fluxo normal. */
.hero { padding-top: 2.5rem; padding-bottom: 4.5rem; }

/* A linha da marca, acima do H1. Pequena de propósito: ela serve de
   ponte com o anúncio ("é isto aqui mesmo"), não de argumento. */
.hero-marca {
  margin: 0 0 .75rem;
  font-family: var(--font-text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(var(--muted));
}

/* Duas regras que existem só por causa da quebra de linha:

   - text-wrap: balance distribui as linhas por igual, em vez de encher
     a primeira e largar uma palavra sozinha na última.
   - o nowrap no <em> impede que "do zero" se parta no meio. Sem ele, em
     390px a headline virava três linhas com "ZERO" órfão embaixo.       */
.hero h1 {
  text-wrap: balance;
  /* 2rem, não 2.5rem. Medido: a 2.5rem a headline quebra em 3 linhas em
     todo celular, com a primeira curta e sobrando. A 2rem ela fecha em 2
     linhas de 360px para cima. Encolher o tipo custou menos que encurtar
     a frase — "orçamento" é a palavra que o serralheiro usa todo dia e
     vale mais que 8px de corpo. */
  font-size: 2rem;
  font-weight: 800;
  color: hsl(var(--fg));
  margin-bottom: 1.5rem;
}

.hero-claim {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 800;
}
.hero-claim strong { color: hsl(var(--primary)); }

.hero-img { max-width: 42rem; margin: 2rem auto 2.5rem; }
.hero-img img {
  border-radius: 1.25rem;
  width: 100%;
  border: 1px solid hsl(var(--light-border) / .65);
  box-shadow: 0 16px 40px rgb(28 35 45 / .06);
}

.hero-text {
  color: hsl(var(--light-muted));
  max-width: 42rem;
  margin: 0 auto 2rem;
  font-size: 1.125rem;
  text-align: center;
}

/* O bloco de ação subiu pra antes da imagem: medido num iPhone, o botão
   estava a 888px, 224px abaixo da dobra, e a primeira tela não mostrava
   preço nenhum nem nada clicável fora do cabeçalho. */
.hero-action { padding-inline: .75rem; margin-bottom: .5rem; }

.hero-preco {
  margin: 0 0 1rem;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 600;
  color: hsl(var(--light-muted));
}
.hero-preco strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: hsl(var(--primary));
  vertical-align: -.05em;
}

/* O botão principal. Duas animações somadas, ambas de fundo — nenhuma
   mexe no tamanho do botão. A antiga esticava e encolhia o botão inteiro
   (hero-cta-stretch), o que além de datado empurrava o texto vizinho a
   cada ciclo. Aqui o gradiente desliza devagar e um brilho atravessa de
   vez em quando; o botão fica parado no lugar. */
.btn-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* largura contida: esticado de ponta a ponta o botão virava uma barra */
  width: 100%;
  max-width: 19rem;
  min-height: 3.5rem;
  gap: .5rem;
  padding: 1.1rem clamp(1rem, 4vw, 2.75rem);
  color: #fff;
  border: 0;
  /* Igual ao .btn-lg. Estava 999px, que num botão de 60px de altura vira
     pílula inteira: as pontas ficam mais largas que a altura do texto e o
     botão parece uma cápsula solta no meio da página. */
  border-radius: 1.15rem;
  /* Movimento contido: dois verdes próximos deslizando devagar. O brilho
     que atravessava o botão saiu — somado ao gradiente ficava agitado
     demais e puxava o olho para o efeito em vez do texto. */
  background-image: linear-gradient(100deg,
    hsl(152 58% 34%) 0%, hsl(146 60% 40%) 50%, hsl(152 58% 34%) 100%);
  background-size: 200% 100%;
  box-shadow: 0 10px 24px hsl(152 55% 28% / .3);
  animation: cta-gradiente 9s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}

@keyframes cta-gradiente {
  0%, 100% { background-position:   0% 0; }
  50%      { background-position: 200% 0; }
}

.btn-hero:hover,
.btn-hero:focus-visible {
  opacity: 1;
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px hsl(152 55% 28% / .4);
  animation-play-state: paused;
}

.btn-hero:focus-visible { outline: 3px solid hsl(152 60% 32%); outline-offset: 5px; }
.btn-hero:active { filter: brightness(.94); }
.hero-note { margin-top: 1rem; color: hsl(var(--light-muted)); font-size: .8125rem; }

/* ==========================================================================
   FAIXA DE DESCONTO NO TOPO
   ========================================================================== */

.faixa-topo {
  margin: 0;
  padding: 1.05rem 1rem;
  /* Cor chapada, sem gradiente. O tom é mais fechado do que a laranja da
     marca por um motivo prático: o texto é branco, e branco sobre a
     laranja viva dá contraste de ~2,4:1 — ilegível na tela do celular ao
     sol. Neste tom fica em ~4,6:1 e passa no critério AA. */
  background: hsl(22 92% 41%);
  background-image: none;
  color: #fff;
  font-family: var(--font-text);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

/* No celular a frase passava do fio por poucos pixels e quebrava em duas
   linhas no meio do nome. Menos corpo e menos espaçamento resolvem sem
   encurtar a copy; a altura da faixa vem do padding, não da fonte. */
@media (max-width: 420px) {
  .faixa-topo { font-size: .6875rem; letter-spacing: .02em; }
}

/* ==========================================================================
   CONTADOR DA OFERTA
   ========================================================================== */

.contador { margin: 1.75rem auto 2.25rem; }

.contador-rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 0 0 .75rem;
  font-family: var(--font-text);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: hsl(var(--primary));
}
.contador-rotulo .ico { width: 1rem; height: 1rem; }

.contador-caixas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.contador-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4rem;
  padding: .6rem .5rem .45rem;
  border-radius: .7rem;
  background: hsl(var(--fg));
  color: #fff;
}
.contador-caixa strong {
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  /* largura fixa por dígito: sem isso os números dançam a cada segundo */
  font-variant-numeric: tabular-nums;
}
.contador-caixa small {
  margin-top: .2rem;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .72;
}

.contador-sep {
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: hsl(var(--muted));
  padding-bottom: .9rem;
}

/* ==========================================================================
   NOTIFICAÇÕES DE COMPRA
   ========================================================================== */

.avisos {
  position: fixed;
  left: .75rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  /* a caixa não pode capturar cliques: ela cobre parte da página e
     engoliria o toque nos botões que estiverem embaixo */
  pointer-events: none;
}

.aviso-compra {
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: min(24.5rem, calc(100vw - 1.5rem));
  padding: .85rem 1rem;
  /* acompanha o ícone: com o ícone quadrado, a pílula destoava */
  border-radius: 1.1rem;
  background: #fff;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 10px 30px hsl(220 25% 20% / .16);
  pointer-events: auto;      /* mas cada aviso, sim, para poder fechar */
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity .35s ease, transform .35s ease;
}
.aviso-compra.visivel { opacity: 1; transform: translateY(0); }

.aviso-icone {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 3.15rem;
  /* quadrado de cantos macios, não círculo, e um pouco mais alto */
  border-radius: .6rem;
  background: hsl(22 92% 41%);
  background-image: none;
  color: #fff;
}
.aviso-icone .ico { width: 1.45rem; height: 1.45rem; }

.aviso-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.aviso-texto strong {
  font-size: .9375rem;
  font-weight: 700;
  color: hsl(var(--fg));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aviso-texto small { font-size: .8125rem; color: hsl(var(--muted)); }

.aviso-fechar {
  flex: 0 0 auto;
  margin-left: auto;
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: hsl(var(--muted));
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.aviso-fechar:hover { background: hsl(var(--band)); }

@media (prefers-reduced-motion: reduce) {
  .aviso-compra { transition: none; }
}

/* ==========================================================================
   BLOCOS DE CTA NO MEIO DA PÁGINA
   Substituem o botão que ficava fixo no cabeçalho. Ficam entre seções,
   sempre logo depois de um argumento de venda.
   ========================================================================== */

.cta-meio {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.25rem 1.25rem;
  text-align: center;
}

.cta-meio-titulo {
  margin: 0 0 1.25rem;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 700;
  color: hsl(var(--fg));
}

.cta-meio-botoes {
  display: grid;
  gap: .625rem;
}

/* A classe .btn sozinha não traz medida nenhuma — quem dá tamanho é
   .btn-sm / .btn-lg. Aqui os botões precisam de um meio-termo: maiores
   que o do cabeçalho antigo, menores que o do hero, senão o bloco
   intermediário compete com a seção de preço. */
.cta-meio-botoes .btn {
  padding: .85rem 1.25rem;
  border-radius: var(--radius);
  font-family: var(--font-title);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

@media (min-width: 560px) {
  .cta-meio-botoes { grid-template-columns: 1fr 1.15fr; }
}

/* ==========================================================================
   CHAMADA FINAL (depois do FAQ)
   ========================================================================== */

.chamada-final .final-botoes {
  display: grid;
  gap: .75rem;
  max-width: 26rem;
  margin: 1.75rem auto 0;
}

@media (min-width: 768px) {
  .chamada-final .final-botoes {
    grid-template-columns: 1fr 1fr;
    max-width: 40rem;
  }
}

/* hero-cta-stretch foi removida: esticava o botão inteiro, o que dava
   aspecto datado e empurrava o texto ao redor a cada ciclo. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-hero { animation: none; transition: none; }
  .carousel-track { scroll-behavior: auto; }
}

/* A faixa neutra conecta as duas seções brancas. */
.problems-section {
  --fg: var(--light-ink);
  --muted: var(--light-muted);
  --card: 0 0% 100%;
  --border: var(--light-border);
  --primary: var(--light-accent);
  color: hsl(var(--fg));
  background: hsl(var(--band));
  border-block: 1px solid hsl(var(--light-border));
}

.problems-section .h-section { color: hsl(var(--light-ink)); }
.problems-section .card { box-shadow: 0 4px 16px rgb(28 35 45 / .025); }

/* ==========================================================================
   CARTÕES GENÉRICOS
   ========================================================================== */

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color .2s;
}
.card:hover { border-color: hsl(var(--primary) / .4); }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }

/* ---- seção "Você se identifica?" ---- */
.problem { text-align: left; }
.problem .ico {
  width: 2rem; height: 2rem;
  color: hsl(var(--primary));
  margin-bottom: .75rem;
}
.problem h3 {
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: none;
  margin-bottom: .5rem;
}
.problem p { color: hsl(var(--muted)); }

/* ==========================================================================
   "O QUE É O PACK?"
   ========================================================================== */

.pack-section .h-section { color: hsl(var(--light-ink)); }

.pack-text {
  color: hsl(var(--light-muted));
  font-size: 1.125rem;
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 2.5rem;
}
.pack-highlight {
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0 auto 2rem;
  max-width: 48rem;
  padding: 1rem 1.25rem;
  color: hsl(var(--light-accent));
  background: #fff8eb;
  border: 1px solid #f0dfbc;
  border-radius: var(--radius);
}
.pack-img { max-width: 42rem; margin-inline: auto; }
.pack-img img { border-radius: 1.25rem; width: 100%; }

/* Retoma o tema escuro com um detalhe da cor da marca. */
.pack-section + .band { border-top: 3px solid hsl(var(--primary) / .65); }

#preco { scroll-margin-top: 1.5rem; }

/* ==========================================================================
   GALERIA DE PROJETOS (imagens empilhadas)
   ========================================================================== */

/* Galeria em colunas tipo mosaico: 2 no celular, 4 no computador.
   Antes era "flex-direction: column" SEM media query nenhuma — as 11 fotos
   em largura total somavam 5.293px, oito telas de celular inteiras, e tudo
   isso vinha ANTES do preço. Usando columns em vez de grid as fotos se
   encaixam sem sobrar buraco embaixo das mais baixas, e nenhuma é cortada
   (são plantas técnicas: recortar quadrado comeria as cotas). */
.gallery { columns: 2; column-gap: .75rem; }

.gallery figure {
  margin: 0 0 .75rem;
  break-inside: avoid;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  transition: border-color .2s;
}
.gallery figure:hover { border-color: hsl(var(--primary) / .4); }
.gallery img { width: 100%; display: block; }

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */

.review { text-align: left; }
.stars { display: flex; gap: .25rem; margin-bottom: 1rem; }
.stars .ico {
  width: 1rem; height: 1rem;
  color: hsl(var(--primary));
  fill: hsl(var(--primary));
}
.review blockquote {
  margin: 0 0 1.5rem;
  color: hsl(var(--muted));
  font-style: italic;
  font-size: 1.125rem;
}
.review-author { display: flex; align-items: center; gap: .75rem; }
.review-author img {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}
.review-author b { display: block; font-size: .875rem; font-weight: 600; }
.review-author small { color: hsl(var(--muted)); font-size: .75rem; }

/* ==========================================================================
   "O QUE VEM DENTRO" + BÔNUS
   ========================================================================== */

.features {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 3.5rem;
}

.feature {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-align: left;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  padding: 1rem;
  font-weight: 500;
}
.feature .ico { color: hsl(var(--primary)); }

/* A .bonus-box saiu: era uma caixa com borda laranja em volta de tudo,
   e ela que dava o aspecto espremido. Agora a chamada é o título da
   seção (grande) e os quatro bônus ficam soltos embaixo, menores. */

.bonus-chamada {
  margin: -.25rem 0 2rem;
  color: hsl(var(--muted));
  font-size: 1rem;
}
.bonus-chamada span { font-size: 1.25rem; vertical-align: -.1em; }

/* Dois por linha em qualquer tela. A largura máxima segura os cartões
   pequenos: eles são apoio do argumento, não o argumento. */
.bonus-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  max-width: 32rem;
  margin-inline: auto;
}

/* Sem cartão em volta: a imagem é o cartão.
   O display:flex com o figcaption esticando serve para uma coisa só:
   empurrar a linha de preço para o rodapé do cartão. Sem isso, um bônus
   de nome curto e outro de nome longo deixam os "Hoje grátis" em alturas
   diferentes, e a grade fica torta. */
.bonus {
  margin: 0;
  background: none;
  border: 0;
  display: flex;
  flex-direction: column;
}
.bonus figcaption { display: flex; flex-direction: column; flex: 1 1 auto; }
/* Os arquivos já são 800x800, então o 1:1 aqui não recorta nada —
   ele só garante que nenhuma troca futura de imagem desalinhe a grade. */
.bonus img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: .875rem;
  border: 1px solid hsl(var(--border));
  transition: transform .2s ease;
}
.bonus:hover img { transform: translateY(-3px); }

/* A imagem já traz o número e o nome do bônus em destaque. O nome aqui é
   discreto de propósito (serve de reserva se a imagem não carregar numa
   conexão ruim). A linha de preço é o que realmente chama atenção. */
.bonus figcaption {
  padding: .6rem .1rem 0;
  text-align: left;
  line-height: 1.35;
}

.bonus-nome {
  display: block;
  font-size: .8125rem;
  color: hsl(var(--muted));
}

/* valor riscado de um lado, "Hoje grátis" do outro */
.bonus-precos {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .15rem .5rem;
  /* "auto" e não uma medida fixa: empurra a linha de preço para o rodapé
     do cartão. Sem isso, um bônus de nome curto e outro de nome longo
     deixam os "Hoje grátis" em alturas diferentes e a grade fica torta.
     O respiro mínimo fica por conta do padding-top. */
  margin-top: auto;
  padding-top: .4rem;
}

/* O nowrap aqui conserta um desalinhamento que parecia de flexbox e não
   era: no cartão estreito, "R$ 39,00" quebrava entre o "R$" e o número,
   crescia uma linha e empurrava o "Hoje grátis" daquele bônus para baixo
   dos outros. O .bonus-hoje já tinha nowrap; este faltava. */
.bonus-antes {
  color: hsl(var(--muted));
  font-size: .875rem;
  white-space: nowrap;
  text-decoration-thickness: 2px;
  text-decoration-color: hsl(0 70% 55% / .85);
}

.bonus-hoje {
  color: hsl(150 62% 36%);
  font-family: var(--font-title);
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}


/* ==========================================================================
   CAIXA DE PREÇO
   ========================================================================== */

/* Dois planos lado a lado no computador; no celular empilham na ordem do
   HTML: Básico e depois Completo. Essa ordem é de propósito — a pessoa vê
   R$10 primeiro e aí o "só R$7,90 a mais" do Completo pesa mais.
   Se quiser testar o contrário (Completo em cima no celular), basta:
       .planos .price-card.destaque { order: -1; }
   dentro de um @media (max-width: 767.98px).                            */
.planos {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: start;
  max-width: 58rem;
  margin-inline: auto;
}

.price-card {
  position: relative;
  /* visível, não hidden: o selo do Premium monta na borda de cima e
     ficaria cortado pela metade. A fita colorida do topo continua
     contida porque é um ::before com inset e border-radius próprio. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
}
/* fita no topo do cartão */
.price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: hsl(var(--border));
  border-radius: 1rem 1rem 0 0;
}

/* o plano que queremos vender ganha destaque */
.price-card.destaque {
  border-color: hsl(var(--primary) / .45);
  /* a sombra anterior era preta a 25% — desenhada para o tema escuro.
     Em fundo branco virava uma mancha cinza em volta do cartão. */
  box-shadow: 0 8px 28px hsl(24 60% 40% / .14);
}
.price-card.destaque::before { background-image: var(--gradient); }

/* Montado na borda de cima e centrado. Antes ficava no canto direito, na
   MESMA LINHA do <h3>, e empurrava "Premium" para a esquerda — ao lado do
   Básico, cujo título fica centrado sozinho, um cartão parecia torto em
   relação ao outro. Fora do fluxo do título, os dois títulos ficam na
   mesma altura e no mesmo eixo. */
.selo {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: hsl(22 92% 41%);
  background-image: none;
  color: #fff;
  font-family: var(--font-title);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .3rem .8rem;
  border-radius: 999px;
}

.price-card h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: .25rem;
  /* Sem padding-right aqui. Havia 6rem para o título não correr por baixo
     do selo, que ficava no canto superior direito — e esses 96rem de vão
     empurravam o texto centrado 48px para a esquerda, nos DOIS cartões.
     Era essa a origem do desalinhamento. Com o selo montado na borda de
     cima, nada mais disputa espaço com o título. */
}

.plano-resumo {
  color: hsl(var(--muted));
  font-size: .875rem;
  min-height: 2.6em;
}

/* O "de R$" e o "por R$" numa coluna só, para o riscado ficar colado
   em cima do valor cheio em vez de flutuar solto. */
.preco-bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0 1.35rem;
}

.preco-antes {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--muted));
  text-decoration-thickness: 2px;
  text-decoration-color: hsl(0 72% 52% / .9);
  margin-bottom: .1rem;
}

.price {
  display: block;
  font-family: var(--font-title);
  font-size: 3rem;
  font-weight: 800;
  color: hsl(var(--primary));
  margin: 0;
  line-height: 1;
}
.price small {
  display: block;
  font-family: var(--font-text);
  font-size: .8125rem;
  font-weight: 500;
  color: hsl(var(--muted));
  letter-spacing: 0;
  margin-top: .35rem;
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-align: left;
  margin-bottom: 1.25rem;
  font-size: .9375rem;
}

/* O que o plano NÃO traz fica numa lista separada, atrás de um filete.
   Misturado com os itens positivos, o olho lia tudo como uma coisa só e
   a diferença entre os planos sumia. */
.price-list-nao {
  margin-top: -.5rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border));
}
.price-list li { display: flex; align-items: flex-start; gap: .6rem; }
.price-list .ico {
  width: 1.05rem; height: 1.05rem;
  color: hsl(var(--primary));
  margin-top: .22rem;
}
/* item que este plano NÃO tem */
.price-list li.nao { color: hsl(var(--muted)); }
.price-list li.nao .ico { color: hsl(var(--muted) / .7); }

/* empurra o botão para a base, para os dois cards alinharem */
.price-card .btn { margin-top: auto; }

.price-note {
  color: hsl(var(--muted));
  font-size: .75rem;
  margin-top: .9rem;
}

/* botão discreto para o plano de entrada */
.btn-secundario {
  background-image: none;
  background-color: transparent;
  box-shadow: none;
  color: hsl(var(--fg));
  border: 1px solid hsl(var(--border));
}
.btn-secundario:hover {
  opacity: 1;
  border-color: hsl(var(--primary) / .5);
}

/* ==========================================================================
   CARROSSEL DO CATÁLOGO
   ========================================================================== */

.carousel { position: relative; }

.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track > * {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

.slide {
  margin: 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: .75rem;
  transition: border-color .2s;
}
.slide:hover { border-color: hsl(var(--primary) / .4); }
.slide img { width: 100%; border-radius: .5rem; margin-bottom: .5rem; }
.slide figcaption {
  font-family: var(--font-title);
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 2.5rem; height: 2.5rem;
  display: grid;
  place-items: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  color: hsl(var(--fg));
  cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.carousel-btn:hover { border-color: hsl(var(--primary) / .4); }
.carousel-btn[disabled] { opacity: .35; cursor: default; }
.carousel-btn.prev { left: -.5rem; }
.carousel-btn.next { right: -.5rem; }

/* ==========================================================================
   GARANTIA
   ========================================================================== */

.warranty .ico {
  width: 4rem; height: 4rem;
  color: hsl(var(--primary));
  margin: 0 auto 1rem;
}
.warranty h2 { margin-bottom: 1.5rem; }
.warranty p { color: hsl(var(--muted)); font-size: 1.125rem; line-height: 1.75; }

/* ==========================================================================
   PERGUNTAS FREQUENTES  (usa <details>, sem JavaScript)
   ========================================================================== */

.faq { display: flex; flex-direction: column; gap: .75rem; }

.faq details {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0 1.5rem;
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico {
  width: 1rem; height: 1rem;
  transition: rotate .2s;
}
.faq details[open] summary .ico { rotate: 180deg; }

.faq details p {
  color: hsl(var(--muted));
  font-size: .875rem;
  padding-bottom: 1.25rem;
}

/* ==========================================================================
   TELAS MAIORES  (a partir de 768px)
   ========================================================================== */

@media (min-width: 768px) {
  /* Escala com a largura em vez de saltar de 2rem para 4.75rem no
     768px: naquele salto a headline voltava a quebrar em 3 linhas no
     tablet. O teto de 4.75rem e o mesmo de antes. */
  .hero h1        { font-size: clamp(2.5rem, 5.6vw, 4.75rem); }
  .hero-claim     { font-size: 1.25rem; }
  .hero-text      { font-size: 1.125rem; }
  .h-section      { font-size: 2.25rem; }

  .grid-2         { grid-template-columns: 1fr 1fr; }
  .grid-3         { grid-template-columns: repeat(3, 1fr); }
  .features       { grid-template-columns: repeat(3, 1fr); }

  /* os dois planos lado a lado; o Completo um pouco mais largo */
  .planos         { grid-template-columns: 1fr 1.08fr; gap: 1.5rem; }
  .price-card     { padding: 2rem 1.75rem; }

  /* bônus: 2 por linha */
  .bonus-list     { gap: 1.25rem 1.5rem; }

  /* galeria: 4 colunas no computador */
  .gallery        { columns: 4; column-gap: 1rem; }
  .gallery figure { margin-bottom: 1rem; }

  .carousel-track > * { flex-basis: 50%; }
}

@media (min-width: 640px) and (max-width: 767.98px) {
  .features { grid-template-columns: 1fr 1fr; }
  .carousel-track > * { flex-basis: 60%; }
}

/* ==========================================================================
   CELULARES BEM ESTREITOS (até 380px)
   As regras de .logo e .header .btn-sm saíram daqui: esses elementos
   deixaram de existir quando a barra da logo foi removida do cabeçalho.
   ========================================================================== */

@media (max-width: 380px) {
  .hero h1            { font-size: 1.8125rem; }
  .price              { font-size: 2.5rem; }
  .price-card         { padding: 1.5rem 1.25rem; }
}

/* ==========================================================================
   TELAS MUITO ESTREITAS (iPhone SE e semelhantes)
   ========================================================================== */

/* Abaixo disto, o valor riscado e o "Hoje grátis" não cabem mais lado a
   lado no cartão de bônus. Quando isso acontecia, a linha quebrava em UM
   cartão e não no vizinho, e os dois ficavam em alturas diferentes.
   Diminuir o corpo mantém os dois na mesma linha em todos os quatro, que
   é o que preserva o alinhamento da grade. */
@media (max-width: 389.98px) {
  .bonus-antes { font-size: .8125rem; }
  .bonus-hoje  { font-size: .8125rem; letter-spacing: .01em; }
  .bonus-list  { gap: .875rem 1rem; }
}

/* Em 320px (iPhone 5 / SE de 1ª geração) nenhum corpo de fonte razoável
   faz os dois preços caberem lado a lado. Aqui eles empilham — e empilham
   nos QUATRO cartões, que é o que mantém o alinhamento. Deixar a quebra
   por conta do flex-wrap produzia cartões com alturas diferentes. */
@media (max-width: 339.98px) {
  .bonus-precos { flex-direction: column; align-items: flex-start; gap: .1rem; }
}