/* ============================================================================
 * style.css — DESIGN SYSTEM
 * ----------------------------------------------------------------------------
 * CONCEITO: a página É uma agenda de papel.
 *   · réguas horizontais que atravessam a página como as linhas de uma agenda
 *   · horários em fonte monoespaçada na margem, como anotações à caneta
 *   · o elemento de assinatura: o SLOT VAZIO, hachurado — que é literalmente
 *     o que a headline vende ("o horário vago de hoje já foi pago por você")
 *
 * ORDEM DO ARQUIVO
 *   1. Tokens (:root)      — tudo que muda entre produtos
 *   2. Reset e base
 *   3. Primitivos          — botão, container, régua, eyebrow
 *   4. Blocos              — hero, problema, entregáveis, garantia, faq, cta
 *   5. Rodapé e barra fixa
 *   6. Responsivo
 *   7. Acessibilidade e impressão
 *
 * REGRA DE ESPECIFICIDADE: um seletor de classe, um nível. Nada de aninhamento
 * profundo, nada de !important. Espaçamento vertical mora SEMPRE em .secao —
 * nunca dentro dos blocos — para que eles não briguem entre si.
 * ==========================================================================*/

/* ===========================================================================
 * 1. TOKENS
 * =========================================================================*/
:root {
  /* Cor — sobrescrita em runtime por PRODUCT.brand */
  --ink:        #1C1119;
  --primary:    #C9184A;
  --primary-dk: #A01039;
  --surface:    #FFF9FA;
  --paper:      #FFFFFF;
  --muted:      #6E5964;
  --success:    #0F7B5F;
  --rule:       rgba(28, 17, 25, .12);   /* a linha da agenda */
  --rule-soft:  rgba(28, 17, 25, .06);

  /* Tipografia — pilha de sistema: zero download, renderização instantânea.
     Para usar fonte própria, veja o @font-face comentado no fim do arquivo. */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Escala tipográfica fluida — sem media query, sem salto */
  --t-xs:   .75rem;
  --t-sm:   .875rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.125rem, 1rem + .6vw,  1.375rem);
  --t-lg:   clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --t-xl:   clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --t-2xl:  clamp(2.125rem, 1.4rem + 3.6vw, 4rem);

  /* Espaço — escala de 4px */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  /* Estrutura */
  --largura:  clamp(20rem, 92vw, 44rem);   /* medida de leitura, não de site */
  --raio:     10px;
  --raio-sm:  6px;
  --borda:    1px solid var(--rule);
  --sombra:   0 1px 2px rgba(28,17,25,.05), 0 8px 24px -12px rgba(28,17,25,.14);
  --sombra-cta: 0 2px 0 var(--primary-dk), 0 12px 28px -10px rgba(201,24,74,.5);

  /* Movimento */
  --ease:  cubic-bezier(.2, .7, .3, 1);
  --rapido: 140ms var(--ease);
  --medio:  380ms var(--ease);
}

/* ===========================================================================
 * 2. RESET E BASE
 * =========================================================================*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;           /* rolagem suave */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 700; }

/* ===========================================================================
 * 3. PRIMITIVOS REUTILIZÁVEIS
 * =========================================================================*/

/* --- Seção: ÚNICA dona do espaçamento vertical da página --- */
.secao {
  padding-block: var(--s-8);
  position: relative;
}
.secao--regua { border-top: var(--borda); }         /* a linha da agenda */
.secao--papel { background: var(--paper); }

.container {
  width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* --- Eyebrow: o "horário" na margem da agenda --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.eyebrow::after {                    /* a régua que continua até a margem */
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --- Títulos --- */
.titulo {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.titulo--hero { font-size: var(--t-2xl); }

.subtitulo {
  font-size: var(--t-md);
  color: var(--muted);
  line-height: 1.5;
  margin-top: var(--s-4);
  text-wrap: pretty;
}

/* --- Botão: microinterações no hover, no foco e no toque --- */
.botao {
  --altura: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--altura);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  background: var(--primary);
  color: #fff;
  font: 700 var(--t-base)/1.2 var(--font-display);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--raio);
  box-shadow: var(--sombra-cta);
  cursor: pointer;
  transition: transform var(--rapido), box-shadow var(--rapido),
              background var(--rapido);
  will-change: transform;
}
.botao:hover  { background: var(--primary-dk); transform: translateY(-2px); }
.botao:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--primary-dk); }

/* brilho que atravessa o botão — uma vez, discreto, no hover */
.botao::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 40%,
              rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
}
.botao:hover::after { animation: brilho 700ms var(--ease); }
@keyframes brilho { to { transform: translateX(100%); } }
.botao { position: relative; overflow: hidden; }

.microcopy {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--muted);
  text-align: center;
}

/* ===========================================================================
 * 4. BLOCOS
 * =========================================================================*/

/* ---------- 4.1 HERO ---------------------------------------------------- */
.hero { padding-top: var(--s-7); padding-bottom: var(--s-8); }

.hero__marca {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--s-6);
}

.hero__headline { margin-top: var(--s-5); }
.hero__sub      { margin-bottom: var(--s-6); }
.hero__cta      { margin-top: var(--s-6); }

/* --- ASSINATURA: o slot vago da agenda -------------------------------------
   Três linhas de agenda. A do meio está vazia e hachurada. É o produto
   inteiro em um objeto. Desenhado em CSS: zero bytes de imagem. */
.agenda {
  margin-top: var(--s-7);
  border: var(--borda);
  border-radius: var(--raio);
  background: var(--paper);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.agenda__linha {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-sm);
}
.agenda__linha:last-child { border-bottom: 0; }

.agenda__hora {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.agenda__nome { color: var(--ink); font-weight: 500; }

/* o slot vazio: hachura diagonal, borda vermelha, rótulo "vago" */
.agenda__linha--vago {
  background-image: repeating-linear-gradient(
      -45deg,
      transparent 0 6px,
      rgba(201, 24, 74, .07) 6px 7px);
  box-shadow: inset 3px 0 0 var(--primary);
}
.agenda__linha--vago .agenda__hora { color: var(--primary); }
.agenda__vago {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px dashed var(--primary);
  border-radius: var(--raio-sm);
  padding: var(--s-1) var(--s-3);
  justify-self: start;
}
/* pulso lento — respeita prefers-reduced-motion mais abaixo */
.agenda__vago { animation: pulso 2.8s var(--ease) infinite; }
@keyframes pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* ---------- 4.2 PROBLEMA ------------------------------------------------ */
.problema__lead {
  font-size: var(--t-md);
  margin-top: var(--s-5);
  white-space: pre-line;             /* respeita as quebras vindas do config */
}
.problema__kicker {
  font-weight: 700;
  font-size: var(--t-md);
  margin-top: var(--s-6);
  text-wrap: balance;
}

.lista { list-style: none; margin-top: var(--s-5); }
.lista__item {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--muted);
}
.lista__item:last-child { border-bottom: 0; }
.lista__item strong { color: var(--ink); }

/* marcador: um risco de caneta, não uma bolinha genérica */
.lista__marca {
  width: 14px; height: 2px;
  background: var(--primary);
  margin-top: .7em;
  border-radius: 2px;
}

/* --- Citação: o cálculo do prejuízo. É o clímax emocional da página. --- */
.citacao {
  margin-top: var(--s-7);
  padding: var(--s-6) var(--s-5);
  background: var(--ink);
  color: #fff;
  border-radius: var(--raio);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-line;
  text-wrap: pretty;
  position: relative;
  overflow: hidden;
}
.citacao::before {                   /* hachura discreta: o eco do slot vago */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
      -45deg, transparent 0 10px, rgba(255,255,255,.035) 10px 11px);
  pointer-events: none;
}

/* ---------- 4.3 ENTREGÁVEIS --------------------------------------------- */

/* Lineup: a foto de família dos 4 arquivos. Sangra até a borda no celular —
   é o único elemento da página autorizado a furar o container. */
.lineup {
  margin: var(--s-6) calc(var(--s-5) * -1) 0;
}
.lineup img {
  width: 100%;
  height: auto;
  /* Sem moldura, sem sombra: os mockups já trazem a própria sombra embutida. */
}

.entregaveis { display: grid; gap: var(--s-4); margin-top: var(--s-6); }

.card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--paper);
  border: var(--borda);
  border-radius: var(--raio);
  transition: transform var(--rapido), box-shadow var(--rapido),
              border-color var(--rapido);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
  border-color: var(--primary);
}
.card__icone {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: var(--raio-sm);
  color: var(--primary);
}
.card__icone svg { width: 22px; height: 22px; }
.card__titulo { font-weight: 700; font-size: var(--t-base); line-height: 1.3; }
.card__texto  { color: var(--muted); font-size: var(--t-sm); margin-top: var(--s-2); }

.entregaveis__fecho {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: var(--borda);
  font-weight: 700;
  font-size: var(--t-md);
  white-space: pre-line;
  text-wrap: balance;
}

/* ---------- 4.4 GARANTIA ------------------------------------------------ */
.garantia {
  padding: var(--s-6) var(--s-5);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.garantia__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
  font: 700 var(--t-sm)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: var(--s-4);
}
.garantia__selo svg { width: 15px; height: 15px; }
.garantia p        { margin-top: var(--s-4); color: var(--muted); }
.garantia p strong { color: var(--ink); }
.garantia__fine    { margin-top: var(--s-5); font-size: var(--t-xs); }

/* ---------- 4.5 FAQ (acordeão, sem JS de altura) ------------------------ */
.faq { margin-top: var(--s-6); }
.faq__item {
  border-bottom: var(--borda);
  padding-block: var(--s-1);
}
.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) 0;
  background: none;
  border: 0;
  font: 700 var(--t-base)/1.4 var(--font-display);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq__sinal {
  flex: none;
  width: 20px; height: 20px;
  position: relative;
  color: var(--primary);
}
.faq__sinal::before, .faq__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--rapido);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq__item[data-aberto="true"] .faq__sinal::after { transform: rotate(0); }

.faq__resposta {
  display: grid;
  grid-template-rows: 0fr;           /* animação de altura sem medir em JS */
  transition: grid-template-rows var(--medio);
}
.faq__item[data-aberto="true"] .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta > div { overflow: hidden; }
.faq__resposta p { padding-bottom: var(--s-5); color: var(--muted); }

/* ---------- 4.6 CTA FINAL ----------------------------------------------- */
.cta-final { text-align: center; }
.cta-final .subtitulo { white-space: pre-line; font-weight: 600; color: var(--ink); }
.cta-final .botao     { margin-top: var(--s-6); }
.cta-final__termos {
  margin-top: var(--s-4);
  font: 700 var(--t-sm)/1.5 var(--font-mono);
  color: var(--ink);
}

/* ===========================================================================
 * 5. RODAPÉ E BARRA FIXA
 * =========================================================================*/
.rodape {
  border-top: var(--borda);
  padding-block: var(--s-7);
  font-size: var(--t-sm);
  color: var(--muted);
  text-align: center;
}
.rodape__links {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.rodape a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.rodape a:hover { color: var(--primary); }
.rodape__legal { margin-top: var(--s-4); font-size: var(--t-xs); opacity: .8; }

/* Barra fixa — só entra em cena depois que o hero sai da tela. */
.barra-fixa {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4)
           calc(var(--s-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: var(--borda);
  transform: translateY(110%);
  transition: transform var(--medio);
}
.barra-fixa[data-visivel="true"] { transform: translateY(0); }
.barra-fixa .botao { --altura: 52px; }
.barra-fixa__nota {
  flex: none;
  font: 600 var(--t-xs)/1.3 var(--font-mono);
  color: var(--muted);
  max-width: 5.5rem;
}

/* ===========================================================================
 * 6. RESPONSIVO — mobile-first: o que vem abaixo é ganho de tela grande
 * =========================================================================*/
@media (min-width: 40rem) {
  .secao         { padding-block: var(--s-9); }
  .lineup        { margin-inline: 0; }
  .entregaveis   { grid-template-columns: 1fr 1fr; }
  .botao         { width: auto; min-width: 22rem; margin-inline: auto; }
  .citacao       { padding: var(--s-7) var(--s-6); }
  .barra-fixa    { display: none; }   /* no desktop o CTA do corpo basta */
}

@media (min-width: 64rem) {
  :root { --largura: 56rem; }
  .hero__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: var(--s-8);
    align-items: center;
  }
  .agenda { margin-top: 0; }
  .hero .botao { margin-inline: 0; }
}

/* ===========================================================================
 * 7. ACESSIBILIDADE, MOVIMENTO E IMPRESSÃO
 * =========================================================================*/

/* Foco visível — sempre. Nunca remover outline sem substituir. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
}

.skip-link {
  position: absolute;
  left: var(--s-4); top: -4rem;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: #fff;
  border-radius: var(--raio-sm);
  text-decoration: none;
  transition: top var(--rapido);
}
.skip-link:focus { top: var(--s-4); }

/* Revelação no scroll — o estado inicial só é aplicado se o JS estiver vivo,
   para que a página funcione 100% sem JavaScript. */
[data-revelar] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--medio), transform var(--medio);
}
[data-revelar][data-visivel="true"] { opacity: 1; transform: none; }

/* Respeita quem pediu menos movimento. Não é opcional. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
}

@media print {
  .barra-fixa, .botao { display: none; }
  body { background: #fff; }
}

/* ===========================================================================
 * FONTE PRÓPRIA (opcional)
 * ---------------------------------------------------------------------------
 * A pilha de sistema acima renderiza em 0ms e não custa nenhuma requisição —
 * é a razão de o Lighthouse de Performance abrir em 100.
 * Se o produto exigir fonte de marca, coloque o .woff2 em assets/fonts/ e
 * descomente. Use SEMPRE font-display: swap e subset latin — do contrário
 * você troca 6 pontos de Performance por uma fonte bonita.
 *
 * @font-face {
 *   font-family: "Marca";
 *   src: url("assets/fonts/marca.woff2") format("woff2");
 *   font-weight: 400 800;
 *   font-display: swap;
 * }
 * :root { --font-display: "Marca", ui-sans-serif, system-ui, sans-serif; }
 * =========================================================================*/

/* ===========================================================================
 * PÁGINAS LEGAIS (termos, privacidade, reembolso)
 * Mesma identidade da landing. Nenhum estilo da landing foi alterado.
 * =========================================================================*/
.legal { padding-block: var(--s-7) var(--s-8); }
.legal__voltar {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: 700 var(--t-sm)/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); text-decoration: none;
  margin-bottom: var(--s-6);
}
.legal__voltar:hover { text-decoration: underline; text-underline-offset: 3px; }

.legal h1 {
  font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; margin-bottom: var(--s-3); text-wrap: balance;
}
.legal__data {
  font: 600 var(--t-sm)/1.4 var(--font-mono);
  color: var(--muted);
  padding-bottom: var(--s-5);
  border-bottom: var(--borda);
  margin-bottom: var(--s-6);
}
.legal h2 {
  font-size: var(--t-md); font-weight: 800; letter-spacing: -.02em;
  margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal h3 { font-size: var(--t-base); font-weight: 700; margin: var(--s-5) 0 var(--s-2); }
.legal p  { margin-bottom: var(--s-4); color: var(--ink); }
.legal ul, .legal ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.legal li { margin-bottom: var(--s-2); color: var(--ink); }
.legal li::marker { color: var(--primary); font-weight: 700; }
.legal a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.legal__box {
  padding: var(--s-5);
  background: var(--paper);
  border: var(--borda);
  border-left: 3px solid var(--primary);
  border-radius: var(--raio);
  margin: var(--s-5) 0;
}
.legal__box p:last-child { margin-bottom: 0; }
.legal__box--forte { border-left-color: var(--success); }

.legal__contato {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--ink);
  color: #fff;
  border-radius: var(--raio);
}
.legal__contato p { color: #fff; margin-bottom: var(--s-2); }
.legal__contato p:last-child { margin-bottom: 0; }
.legal__contato a { color: #fff; }