/* ============================================================================
   Hangar — styles.css
   ----------------------------------------------------------------------------
   DECLARAÇÃO DE INSUMOS
   Insumos: kit/tokens.json (fonte única de cor/tipo/raio/sombra/overrides),
     kit/identidade-visual.md (60/30/10 dark), kit/analise-referencias.md
     (27 diretrizes), kit/proposta-melhorias.md (exceções escopadas: CTA >=19px,
     badge, links --color-accent-text). Herda _padroes/base.css (assets/base.css):
     escala 42/50, 20/28, 16/24, containers 1300/1140, ritmo 90/50, botão
     Questrial 600, alternância automática de fundos.
   Só declara aqui o que VARIA por cliente + composição da página.
   O QUE FALTOU: sem arquétipo/roteiro no projeto; sem SVG da logo; sem wordmark
     Blueberry. Registrado no HTML e no relatório.
   ============================================================================ */

/* ------------------------------ TOKENS (kit/tokens.json) ------------------ */
:root {
  /* Cores — papéis de tokens.json */
  --color-surface:        #0D1117;
  --color-alt:            #161B22;
  --color-on-alt:         #C9D1D9;
  --color-surface-card:   #1C2128;
  --color-border:         #30363D;

  --color-ink:            #C9D1D9;
  --color-heading:        #FFFFFF;
  --color-ink-muted:      #8B949E;
  --color-on-foto:        #FFFFFF;

  --color-action:         #2980B9;
  --color-action-hover:   #3391C9;
  --color-on-action:      #FFFFFF;

  --color-accent:         #2980B9;
  --color-accent-text:    #4C9BD6;

  --color-action-2-bg:    transparent;
  --color-action-2-hover: #1C2128;

  --color-focus:          #2980B9;

  /* Verde da marca WhatsApp — EXCLUSIVO do FAB. Não entra na paleta 60/30/10
     do restante do site (nenhum outro elemento recebe verde). */
  --color-whatsapp:       #27C941;
  --color-whatsapp-hover: #1FB537;

  /* Rodapé tem tokens próprios — NUNCA herda o acento (regra da casa) */
  --footer-bg:            #0D1117;
  --footer-ink:           #C9D1D9;

  /* Tipografia */
  --font-display: "Space Grotesk", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  /* --font-botao herda de base.css (Questrial) */

  /* Override de token de base.css (tokens.json.overrides_de_token) */
  --fw-corpo: 400;

  /* Raios */
  --radius-btn:   8px;
  --radius-card:  12px;
  --radius-input: 8px;
  --radius-img:   12px;

  /* Sombras */
  --shadow-card:       0 1px 2px rgba(0,0,0,0.40);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.45);

  /* Deco */
  --deco-divider: 1px solid #30363D;

  /* Ritmo vertical do miolo (diretriz 10: 90px desktop é piso) — herdado da casa;
     aumentado no desktop via media query mais abaixo. */

  /* CTA texto grande (proposta-melhorias): label >= 19px em TODOS os breakpoints */
  --cta-fs: 1.1875rem; /* 19px */

  /* FAB */
  --fab-offset: 20px;
  --fab-size: 56px;

  /* respiro de âncora (header não é fixo, mas mantém folga) */
  --scroll-margem-ancora: 2rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--fw-corpo);
  font-size: var(--fs-corpo);      /* 16px (base.css) */
  line-height: var(--lh-corpo);    /* 24px */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  color: var(--color-heading);
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.15;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--color-accent-text); }

::selection { background: rgba(41,128,185,0.35); color: #fff; }

/* Foco visível — nunca outline:none sem substituto */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Containers (base.css) */
.container-creme, .container-branco {
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
}
.container-creme  { max-width: var(--container-creme); }   /* 1300 */
.container-branco { max-width: var(--container-branco); }  /* 1140 */

/* Ritmo vertical entre seções — mobile-first (50px), 90px+ no desktop (diretriz 10) */
.section { padding-block: var(--space-section-mobile); }   /* 50px */

/* ------------------------------ TIPO UTIL -------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;   /* 13px */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 18px;
}

.section__title {
  /* Mobile-first: h2 reduzido a 32/38 para preservar a hierarquia h1 > h2 em
     telas estreitas (o h1 do hero vale >=40px no mobile). Volta a 42/50 em
     >=640px, onde o h1 (7vw) já supera 42px com folga. */
  font-size: 2rem;                 /* 32px */
  line-height: 2.375rem;           /* 38px */
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.section__intro {
  margin-top: 14px;
  max-width: 65ch;                 /* diretriz 12: medida confortável */
  color: var(--color-ink);
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.6;
}

.ink-accent { color: var(--color-accent); }  /* texto grande (h1) — AA-grande OK */
.nowrap { white-space: nowrap; }

/* ------------------------------ BOTÕES ----------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-botao);
  font-weight: var(--fw-botao);        /* 600 */
  letter-spacing: var(--tracking-botao);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-btn);
  padding: 15px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
  min-height: 48px;                    /* alvo de toque */
  line-height: 1.1;
}

/* CTA primário: fill #2980B9, label branco >= 19px (texto grande -> AA-grande) */
.btn--primary {
  background: var(--color-action);
  color: var(--color-on-action);
  font-size: var(--cta-fs);            /* 19px em TODOS os breakpoints */
}
.btn--primary:hover {
  background: var(--color-action-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
  text-decoration: underline;          /* reforço de estado (manual/QA) */
  text-underline-offset: 3px;
}
.btn--primary:active { transform: translateY(0); }

/* CTA secundário: outline */
.btn--secondary {
  background: var(--color-action-2-bg);
  color: var(--color-heading);
  border-color: var(--color-border);
  font-size: 1rem;
}
.btn--secondary:hover {
  background: var(--color-action-2-hover);
  border-color: var(--color-accent);
}

.btn--sm  { padding: 10px 18px; min-height: 40px; }
.btn--lg  { padding: 18px 34px; font-size: 1.25rem; }   /* >=19px */
.btn--block { width: 100%; }

/* garante 19px mesmo nos CTAs "sm" que são primários (topbar) */
.btn--primary.btn--sm { font-size: var(--cta-fs); }

/* ------------------------------ CARDS ------------------------------------ */
.card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.icon {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  margin-bottom: 18px;
}
.icon svg { width: 24px; height: 24px; }

/* ------------------------------ GRIDS ------------------------------------ */
/* Grade adaptativa: linha incompleta centraliza (sem coluna fantasma) */
.grid {
  display: grid;
  gap: 20px;
  justify-content: center;
}
.grid--3 { grid-template-columns: 1fr; }

/* ============================ HERO ============================ */
.hero {
  position: relative;
  background-color: var(--color-surface);           /* fallback/base */
  background-image:
    linear-gradient(rgba(13, 17, 23, 0.50), rgba(13, 17, 23, 0.50)),  /* overlay p/ legibilidade */
    url("img_bg_hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}

.hero__topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
}
.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img { width: 175px; height: 32px; }

.topnav { display: none; gap: 26px; }
.topnav a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.topnav a:hover { color: var(--color-heading); }

.topbar-cta { display: none; }

.hero__inner {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 96px;   /* respiro antes do deco/base */
  position: relative;
  z-index: 1;
}

.hero__title {
  /* diretriz 2: h1 do hero entre 3.5rem e 5rem no desktop; curto por linha.
     Piso 2.875rem (46px): garante h1 > h2 (32px mobile) E h1 > numeral de preço
     (44px) — mantém o h1 como o MAIOR font-size da página em 390 e 1440,
     sem tocar na seção de planos. */
  font-size: clamp(2.875rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 16ch;
  margin: 0 auto 22px;
}

.hero__sub {
  /* diretriz 3: 1.125–1.375rem, contraste alto (--color-ink) */
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  color: var(--color-ink);
  max-width: 60ch;
  margin: 0 auto 30px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.hero__micro {
  margin-top: 18px;
  color: var(--color-ink-muted);
  font-size: 0.95rem;
}

/* ============================ PILARES ============================ */
.pilar__title {
  font-size: var(--fs-bloco);      /* 20px */
  line-height: var(--lh-bloco);    /* 28px */
  font-weight: 600;
  margin-bottom: 10px;
}
.pilar p { color: var(--color-on-alt); }

/* ============================ INCLUSOS ============================ */
/* Cabeçalho centralizado (eyebrow + título + subtítulo); grid/cards seguem à esquerda. */
.inclusos .eyebrow { display: block; width: fit-content; margin-inline: auto; }
.inclusos .section__title,
.inclusos .section__intro { text-align: center; margin-inline: auto; }
.inclusos__grid { margin-top: 34px; }
.incluso { padding: 24px; }
.incluso p { color: var(--color-ink); font-size: 1.0625rem; line-height: 1.55; }
.incluso strong { color: var(--color-heading); font-weight: 600; }

.nota-honestidade {
  margin-top: 26px;
  color: var(--color-ink-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 70ch;
  text-align: center;
  margin-inline: auto;
}

/* ============================ SPLIT (diferencial / FAQ) ============================ */
.split { display: grid; gap: 40px; }
.split__text > .section__title { margin-top: 8px; }
.split__text > p { margin-top: 18px; color: var(--color-on-alt); font-size: 1.0625rem; line-height: 1.65; max-width: 62ch; }
.split__text > .btn { margin-top: 28px; }
.split__text strong { color: var(--color-heading); font-weight: 600; }

.microcopy-escopo {
  font-size: 0.95rem !important;
  color: var(--color-ink-muted) !important;
  border-left: 2px solid var(--color-border);
  padding-left: 16px;
}

/* Lockup do vínculo (diferencial) */
.split__visual { display: flex; align-items: center; justify-content: center; }
/* Arte da seção Diferencial: figura recortada (PNG/WebP com transparência).
   Sem borda/raio — a moldura enquadraria o espaço transparente ao redor da
   figura. height:auto preserva a proporção; max-width evita overflow no mobile. */
.diferencial__art {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
}

/* ============================ PLANOS ============================ */
.toggle {
  display: inline-flex;
  margin: 28px auto 0;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-alt);
  gap: 4px;
}
.planos { text-align: center; }
/* Cabeçalho centralizado (eyebrow + título + subtítulo); grid/cards seguem à esquerda (.planos__grid). */
.planos .section__title, .planos .section__intro { text-align: center; margin-inline: auto; }

.toggle__btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 9px 22px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.toggle__btn.is-active {
  background: var(--color-action);
  color: var(--color-on-action);
}

.planos__grid { margin-top: 34px; text-align: left; align-items: stretch; }

.plano {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 28px;
  position: relative;
}
.plano__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  color: var(--color-heading);
}
.plano__para { margin-top: 6px; color: var(--color-ink-muted); font-size: 0.95rem; min-height: 2.6em; }
.plano__preco {
  margin-top: 18px; display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-display);
}
.plano__valor {
  font-size: 2.75rem;          /* preço dominante (diretriz 19) */
  font-weight: 700;
  color: var(--color-accent);  /* numeral em #2980B9 (texto grande -> OK) */
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plano__valor--combinar { font-size: 1.75rem; }
.plano__periodo { color: var(--color-ink-muted); font-size: 1rem; font-weight: 500; }

.plano__features {
  margin-top: 22px; display: flex; flex-direction: column; gap: 12px;
  border-top: var(--deco-divider);
  padding-top: 22px;
  flex-grow: 1;
}
.plano__features li {
  position: relative;
  padding-left: 30px;
  color: var(--color-ink);
  font-size: 1rem;             /* diretriz 23: benefícios >= 1rem */
  line-height: 1.45;
}
.plano__features li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C9BD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.plano .btn { margin-top: 26px; }

/* Plano M — destaque por borda/badge/CTA/elevação (NÃO fill azul) */
.plano--destaque {
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-card-hover);
}
.plano__badge {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.planos__micro {
  margin-top: 28px; text-align: center;
  color: var(--color-ink-muted); font-size: 0.95rem;
}

/* ============================ COMO FUNCIONA ============================ */
/* Cabeçalho centralizado (eyebrow + título); os passos seguem à esquerda. */
.como .eyebrow { display: block; width: fit-content; margin-inline: auto; }
.como .section__title { text-align: center; margin-inline: auto; }
.passos { margin-top: 34px; counter-reset: passo; }
.passo { display: flex; flex-direction: column; gap: 14px; }
.passo__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;           /* numeral grande em acento -> OK */
  color: var(--color-accent);
  line-height: 1;
}
.passo p { color: var(--color-on-alt); font-size: 1.0625rem; line-height: 1.55; }
.como__cta { margin-top: 34px; text-align: center; }

/* ============================ FAQ ============================ */
.split--faq { grid-template-columns: 1fr; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  overflow: hidden;
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B949E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__answer { padding: 0 22px 20px; }
.faq__answer p { color: var(--color-ink); font-size: 1rem; line-height: 1.6; max-width: 68ch; }

/* ============================ CTA FINAL ============================ */
/* fora da alternância (base.css); fundo próprio */
.cta-final {
  background: var(--color-alt);
  border-top: var(--deco-divider);
  border-bottom: var(--deco-divider);
  padding-block: var(--space-section-mobile);
}
.cta-final__inner { text-align: center; }
.cta-final .section__title { margin-inline: auto; max-width: 22ch; }
.cta-final__body {
  margin: 18px auto 30px;
  max-width: 58ch;
  color: var(--color-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ============================ RODAPÉ ============================ */
.rodape {
  background: var(--footer-bg);
  color: var(--footer-ink);
  border-top: var(--deco-divider);
  padding-block: var(--pad-rodape);   /* 30px (base.css) */
}
.rodape__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rodape__brand img { width: 175px; height: 32px; margin-bottom: 12px; }
.rodape__linha { color: var(--footer-ink); font-size: 0.95rem; }
.rodape__contato { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rodape__contato a { color: var(--color-accent-text); text-decoration: none; font-size: 0.95rem; }
.rodape__contato a:hover { text-decoration: underline; }
.rodape__legal p { color: var(--color-ink-muted); font-size: 0.85rem; }

/* ============================ FAB ============================ */
/* posição right/bottom com safe-area vem de base.css (a.fab).
   FAB é DESKTOP-ONLY: no mobile, um FAB fixo no canto inferior-direito cruza
   h2/summary de largura total (medido: colisões a 30% e 90% do scroll) — o que
   REPROVA na regra de elemento fixo. Mobile fica coberto pelos 8 CTAs inline
   (um em praticamente toda região de scroll). Em >=900px o conteúdo é centrado
   e o FAB mede 0 colisões nos 4 pontos de scroll. */
.fab {
  display: none;
  position: fixed;
  z-index: 50;
  width: var(--fab-size); height: var(--fab-size);
  border-radius: 50%;
  /* Verde da marca WhatsApp (ver exceção de contraste em proposta-melhorias.md) */
  background: var(--color-whatsapp);
  color: #FFFFFF;             /* ícone stroke branco (currentColor) */
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-card-hover);
  transition: background-color .18s ease, transform .18s ease;
}
.fab svg { width: 30px; height: 30px; }
.fab:hover { background: var(--color-whatsapp-hover); transform: translateY(-2px); }

/* ============================ MOVIMENTO REDUZIDO ============================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================================
   BREAKPOINTS
   ============================================================================ */

/* >= 640px: grids 2 colunas, hero maior */
@media (min-width: 640px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__actions { gap: 16px; }
  .rodape__inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }

  /* h2 volta à escala da casa (42/50); aqui o h1 do hero (7vw >= ~45px) supera 42px */
  .section__title { font-size: var(--fs-secao); line-height: var(--lh-secao); }
}

/* >= 900px: grids 3 colunas, split 2 colunas, ritmo 90px */
@media (min-width: 900px) {
  .section { padding-block: var(--space-section); }        /* 90px */
  .cta-final { padding-block: calc(var(--space-section) + 10px); }

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

  .split { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .split--faq { grid-template-columns: 0.9fr 1.1fr; align-items: start; gap: 56px; }

  .hero__inner { padding-top: 56px; padding-bottom: 130px; }
  .hero__topbar { padding-block: 24px; }
  .topnav { display: inline-flex; margin-inline: auto; }
  .topbar-cta { display: inline-flex; }
  .brand { margin-right: 0; }

  .section__title { font-size: var(--fs-secao); line-height: var(--lh-secao); }

  .rodape__inner { gap: 40px; flex-wrap: nowrap; }

  /* FAB só no desktop (ver justificativa na regra .fab) */
  .fab { display: inline-flex; }
}

/* >= 1200px: leve folga extra de leitura */
@media (min-width: 1200px) {
  .hero__title { max-width: 18ch; }
}