/* ==========================================================================
   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) -------------- */
  --bg:            220 20% 6%;    /* fundo da página              */
  --fg:            40 10% 90%;    /* texto principal              */
  --card:          220 15% 10%;   /* fundo dos cartões            */
  --band:          220 15% 14%;   /* fundo das faixas escuras     */
  --muted:         220 10% 55%;   /* texto secundário / cinza     */
  --border:        220 15% 18%;   /* linhas e bordas              */
  --primary:       35 100% 50%;   /* LARANJA da marca             */
  --on-primary:    220 20% 6%;    /* texto em cima do laranja     */

  /* --- MEDIDAS ----------------------------------------------------------- */
  --radius:        .75rem;
  --gap-section:   4rem;                 /* respiro vertical das seções */
  --gradient:      linear-gradient(135deg, hsl(35 100% 50%), hsl(25 100% 45%));
  --glow:          0 0 30px hsl(35 100% 50% / .3);

  /* --- 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; }

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;
  line-height: 1.1;
  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
   ========================================================================== */

.h-section {
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(var(--primary));
  margin-bottom: .75rem;
}

.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);
  box-shadow: var(--glow);
  color: hsl(var(--on-primary));
  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 */
.btn-lg {
  padding: 1rem 2.5rem;
  border-radius: var(--radius);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

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

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

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: hsl(var(--bg) / .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
}

.header-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo { display: flex; align-items: center; gap: .5rem; flex: 0 1 auto; min-width: 0; }
.header .btn-sm { white-space: nowrap; flex: 0 0 auto; }
.logo .ico { width: 1.5rem; height: 1.5rem; color: hsl(var(--primary)); }
.logo span {
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

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

.hero { padding-top: 6rem; }

.hero h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: hsl(var(--primary));
  margin-bottom: 1.5rem;
}

.hero-claim {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  font-weight: 800;
}
.hero-claim strong { color: hsl(var(--primary)); }

.hero-img { max-width: 42rem; margin: 2.5rem auto; }
.hero-img img { border-radius: var(--radius); width: 100%; }

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

/* ==========================================================================
   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-text {
  color: hsl(var(--muted));
  font-size: 1.125rem;
  text-align: justify;
  max-width: 48rem;
  margin: 0 auto 2.5rem;
}
.pack-highlight { font-weight: 600; font-size: 1.125rem; margin-bottom: 2rem; }
.pack-img { max-width: 42rem; margin-inline: auto; }
.pack-img img { border-radius: var(--radius); width: 100%; }

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

.gallery { display: flex; flex-direction: column; gap: 1.5rem; }

.gallery figure {
  margin: 0;
  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%; }

/* ==========================================================================
   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)); }

.bonus-box {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / .3);
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 42rem;
  margin-inline: auto;
}

.bonus-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.bonus-title span { font-size: 2.25rem; line-height: 1; }
.bonus-title h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--primary));
}

.bonus-list { display: flex; flex-direction: column; gap: 1rem; }

.bonus {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  background: hsl(var(--band));
  border-radius: 1rem;
  padding: 1.25rem;
}
.bonus-icon {
  width: 2.5rem; height: 2.5rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: hsl(var(--primary) / .2);
  color: hsl(var(--primary));
}
.bonus-label {
  display: block;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: hsl(var(--primary));
}
.bonus p { font-size: 1.125rem; font-weight: 500; }

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

.price-card {
  position: relative;
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / .4);
  border-radius: 1rem;
  padding: 2rem;
}
/* fita laranja no topo do cartão */
.price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background-image: var(--gradient);
}

.price-card h3 { font-size: 1.875rem; font-weight: 700; margin-bottom: .5rem; }

.price {
  display: block;
  font-family: var(--font-title);
  font-size: 3.75rem;
  font-weight: 800;
  color: hsl(var(--primary));
  margin: 1.5rem 0;
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  text-align: left;
  margin-bottom: 2rem;
}
.price-list li { display: flex; align-items: flex-start; gap: .75rem; }
.price-list .ico { color: hsl(var(--primary)); margin-top: .15rem; }

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

/* ==========================================================================
   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) {
  .hero h1        { font-size: 4.5rem; }
  .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); }
  .bonus-title h3 { font-size: 1.875rem; }

  .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) — só encolhe o cabeçalho, para o
   logo e o botão "Comprar Agora" caberem lado a lado sem quebrar.
   ========================================================================== */

@media (max-width: 380px) {
  .logo .ico          { width: 1.25rem; height: 1.25rem; }
  .logo span          { font-size: 1rem; letter-spacing: .02em; }
  .header .btn-sm     { padding: .5rem .85rem; font-size: .8125rem; }
  .hero h1            { font-size: 2rem; }
  .price              { font-size: 3rem; }
  .bonus-box          { padding: 1.5rem 1.25rem; }
  .price-card         { padding: 1.5rem 1.25rem; }
}