/* =========================================================
   CHAMA GÁS MACAÚBAS — Design tokens v1.0
   Carregar DEPOIS do bootstrap.min.css
   ========================================================= */

/* ---------- CAMADA 1 — TOKENS PRIMITIVOS ----------
   Valores brutos. NUNCA usar direto nos componentes.      */
:root {
  /* Marca — verde (ação, WhatsApp, sucesso) */
  --brand-50:  #F0FAF1;
  --brand-100: #DCF3DF;
  --brand-200: #B7E5BD;
  --brand-300: #8AD394;
  --brand-400: #57BB65;
  --brand-500: #2D9E3C;  /* cor base da marca */
  --brand-600: #248232;  /* botao primario tema claro (AA c/ branco) */
  --brand-700: #1D6828;  /* texto verde sobre fundo claro */
  --brand-800: #17521F;
  --brand-900: #103A16;

  /* Institucional — azul navy (superficies escuras e textos) */
  --navy-900: #0B0E24;
  --navy-800: #12173F;
  --navy-700: #171D4E;
  --navy-600: #1D245D;  /* cor base institucional */
  --navy-500: #2A3278;
  --navy-400: #414A96;
  --navy-300: #8E96C9;

  /* Neutros */
  --gray-50:  #F7F7F8;
  --gray-100: #EFEFF1;
  --gray-200: #E2E2E6;
  --gray-300: #C9CACF;
  --gray-400: #9A9BA3;
  --gray-500: #737480;
  --gray-600: #4F5059;  /* cinza base da marca */
  --gray-700: #35363D;

  /* Superficies suaves (alternancia de secoes) */
  --surface-mist:  #F4F6FA;
  --surface-cream: #FFF8EE;
  --surface-leaf:  #F0FAF1;

  /* Ambar — usado so na nota de avaliacao (estrelas) */
  --amber-500: #F8BF37;
  --amber-300: #FCD34D;

  /* Status */
  --status-success: #248232;
  --status-warning: #B57406;
  --status-danger:  #C4342F;
  --status-info:    #1F5FD1;

  /* Gradiente da marca — uso restrito */
  --brand-gradient: linear-gradient(135deg, #1D245D 0%, #2A3278 45%, #248232 100%);

  /* ---------- TIPOGRAFIA ---------- */
  --font-base: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.05;
  --lh-heading: 1.18;
  --lh-body: 1.7;

  --tracking-hero: -2px;
  --tracking-heading: -0.8px;
  --tracking-normal: 0;
  --tracking-label: 1.6px;   /* rotulos em CAIXA ALTA */

  --fs-hero:  clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:    clamp(2.125rem, 4.4vw, 3.25rem);
  --fs-h2:    clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-h3:    1.75rem;
  --fs-h4:    1.375rem;
  --fs-h5:    1.125rem;
  --fs-h6:    1rem;
  --fs-lead:  1.1875rem;
  --fs-body:  1rem;
  --fs-small: 0.8125rem;
  --fs-label: 0.75rem;

  /* ---------- RAIOS ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;

  /* ---------- SOMBRAS ---------- */
  --shadow-xs: 0 1px 2px rgba(29,36,93,.06);
  --shadow-sm: 0 2px 8px rgba(29,36,93,.08);
  --shadow-md: 0 8px 24px rgba(29,36,93,.10);
  --shadow-lg: 0 18px 44px rgba(29,36,93,.14);
  --shadow-brand: 0 10px 24px rgba(45,158,60,.30);

  /* ---------- MOVIMENTO ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --transition-base: 220ms var(--ease);

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;
  --space-10: 128px;
  --nav-height: 68px;

  /* ---------- ASSINATURAS DA MARCA ---------- */
  --corner-cut: 24px;  /* recorte 45 graus no topo direito */
  --spark-dot: rgba(45,158,60,.22);
  --spark-size: 14px;
}

/* ---------- CAMADA 2 — PAPEIS SEMANTICOS (TEMA CLARO) ----------
   E o unico conjunto que os componentes podem usar.               */
:root,
[data-bs-theme="light"] {
  --bg-page:    #FFFFFF;
  --bg-soft:    var(--surface-mist);
  --bg-cream:   var(--surface-cream);
  --bg-card:    #FFFFFF;
  --bg-inverse: var(--navy-600);

  --text-strong: var(--navy-600);
  --text-body:   var(--gray-600);
  --text-muted:  var(--gray-500);
  --text-on-brand:   #FFFFFF;   /* texto sobre o botao primario */
  --text-on-inverse: #FFFFFF;

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);

  --nav-bg:     rgba(255,255,255,.82);
  --nav-border: rgba(29,36,93,.10);

  --accent:       var(--brand-600);  /* fundo do botao primario */
  --accent-hover: var(--brand-700);
  --accent-text:  var(--brand-700);  /* verde legivel como TEXTO */
  --accent-soft:  var(--brand-50);   /* pill de link ativo, badges */

  --star: var(--amber-500);          /* estrelas da nota do Google — 4,8:1 no branco */
  --verified: #3897F0;                /* selo de verificado ao lado do nome — azul claro, estilo Instagram */

  --focus-ring: var(--brand-600);
}

/* ---------- CAMADA 2 — TEMA ESCURO ----------
   Mesmos nomes, outros valores. Nenhum componente muda.  */
[data-bs-theme="dark"] {
  --bg-page:    #0B0E24;
  --bg-soft:    #111535;
  --bg-cream:   #181231;
  --bg-card:    #161B44;
  --bg-inverse: #070A1B;

  --text-strong: #F2F4FC;
  --text-body:   #C4C8DE;
  --text-muted:  #9AA0C2;
  --text-on-brand:   var(--navy-900); /* navy sobre verde-400 = 7,8:1 */
  --text-on-inverse: #FFFFFF;

  --border-subtle: #262C5C;
  --border-strong: #3B4382;

  --nav-bg:     rgba(11,14,36,.78);
  --nav-border: rgba(255,255,255,.10);

  --accent:       var(--brand-400);
  --accent-hover: var(--brand-300);
  --accent-text:  var(--brand-300);
  --accent-soft:  rgba(87,187,101,.16);

  --star: var(--amber-300);          /* estrelas — 8,9:1 no fundo escuro */
  --verified: #5FB2F7;                /* selo de verificado — azul claro, mesma família no escuro */

  --focus-ring: var(--brand-300);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,.50);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
  --shadow-brand: 0 10px 24px rgba(45,158,60,.28);

  --spark-dot: rgba(87,187,101,.14);
}

/* ---------- PALETA DE 5 ICONES (lista sem monotonia) ---------- */
:root {
  --icon-1-bg: #DCF3DF; --icon-1-fg: #1D6828;
  --icon-2-bg: #E3E7F7; --icon-2-fg: #2A3278;
  --icon-3-bg: #FDECD2; --icon-3-fg: #8A5A08;
  --icon-4-bg: #D9EDF9; --icon-4-fg: #0F5E86;
  --icon-5-bg: #F7E1DF; --icon-5-fg: #9C2B27;
}
[data-bs-theme="dark"] {
  --icon-1-bg: rgba(87,187,101,.18);  --icon-1-fg: #8AD394;
  --icon-2-bg: rgba(65,74,150,.28);   --icon-2-fg: #B6BCE4;
  --icon-3-bg: rgba(181,116,6,.24);   --icon-3-fg: #F0C070;
  --icon-4-bg: rgba(31,95,209,.24);   --icon-4-fg: #8FBDF5;
  --icon-5-bg: rgba(196,52,47,.22);   --icon-5-fg: #F0A5A2;
}

/* ---------- PONTE COM O BOOTSTRAP 5.3 ----------
   Faz .btn-primary, .text-primary, .bg-body etc. herdarem a marca. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-font-sans-serif: var(--font-base);
  --bs-body-font-family: var(--font-base);
  --bs-body-bg: var(--bg-page);
  --bs-body-color: var(--text-body);
  --bs-heading-color: var(--text-strong);
  --bs-border-color: var(--border-subtle);
  --bs-link-color: var(--accent-text);
  --bs-link-hover-color: var(--accent-hover);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 36,130,50;
  --bs-secondary-rgb: 29,36,93;
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: var(--lh-body);
}

/* ---------- BASE ---------- */
body {
  font-family: var(--font-base);
  background: var(--bg-page);
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-semibold); }
.hero-title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
}
.lead { font-size: var(--fs-lead); color: var(--text-body); }
.text-muted-2 { color: var(--text-muted); }
.accent { color: var(--accent-text); }

/* Foco visivel — nunca remover */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ---------- ASSINATURAS VISUAIS ---------- */
.cut-corner {
  clip-path: polygon(0 0, calc(100% - var(--corner-cut)) 0,
             100% var(--corner-cut), 100% 100%, 0 100%);
}
.spark-bg {
  background-image: radial-gradient(var(--spark-dot) 1.5px, transparent 1.5px);
  background-size: var(--spark-size) var(--spark-size);
}

/* ---------- SECOES ALTERNADAS ---------- */
.section        { padding: var(--space-9) 0; background: var(--bg-page); }
.section--soft  { background: var(--bg-soft); }
.section--cream { background: var(--bg-cream); }
.section--inverse {
  background: var(--bg-inverse);
  color: rgba(255,255,255,.78);
}
.section--inverse h1, .section--inverse h2,
.section--inverse h3 { color: var(--text-on-inverse); }
@media (max-width: 767.98px) { .section { padding: var(--space-7) 0; } }

/* ---------- EYEBROW E TITULO DE SECAO ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent-text);
  margin-bottom: var(--space-3);
}
.eyebrow svg { width: 14px; height: 14px; }
.section-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.section-title em { font-style: normal; color: var(--accent-text); }

/* ---------- BOTOES ---------- */
.btn { transition: var(--transition-base); font-weight: var(--fw-semibold); }
.btn-brand {
  background: var(--accent);
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 26px;
}
.btn-brand:hover {
  background: var(--accent-hover);
  color: var(--text-on-brand);
  transform: translateY(-2px);
}
.btn-brand:active { transform: translateY(1px); }
.btn-brand:disabled,
.btn-brand.disabled {
  background: var(--border-strong);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.btn-brand-lg { font-size: 1.125rem; padding: 18px 38px; }
.btn-outline-brand {
  background: transparent;
  color: var(--text-strong);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 12px 25px;
}
.btn-outline-brand:hover {
  border-color: var(--text-strong);
  background: var(--bg-soft);
  color: var(--text-strong);
  transform: translateY(-2px);
}
.btn-icon { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (max-width: 575.98px) {
  .btn-brand, .btn-outline-brand { width: 100%; min-height: 48px; }
}

/* ---------- NAVBAR FIXA ---------- */
.navbar-brandbar {
  position: fixed; inset: 0 0 auto 0; z-index: 1030;
  min-height: var(--nav-height);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: var(--transition-base);
}
.navbar-brandbar.is-scrolled { box-shadow: var(--shadow-sm); }
.navbar-brandbar .nav-link {
  color: var(--text-body);
  font-weight: var(--fw-medium);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
}
.navbar-brandbar .nav-link:hover { color: var(--text-strong); }
.navbar-brandbar .nav-link.active {
  color: var(--accent-text);
  background: var(--accent-soft);
  font-weight: var(--fw-semibold);
}
/* Logo: 2 versoes no HTML, a CSS decide qual aparece.
   <img class="logo-positive" src="/assets/logo-horizontal.svg" alt="Chama Gas Macaubas">
   <img class="logo-negative" src="/assets/logo-horizontal-negativa.svg" alt="Chama Gas Macaubas">
   Arquivos: logo-horizontal | logo-vertical | logo-nome | logo-simbolo
            (+ sufixo -negativa para fundos escuros)                      */
.navbar-brandbar .navbar-brand img { height: 36px; width: auto; }
.logo-positive { display: block; }
.logo-negative { display: none; }
[data-bs-theme="dark"] .logo-positive { display: none; }
[data-bs-theme="dark"] .logo-negative { display: block; }
@media (max-width: 991.98px) {
  .navbar-brandbar .nav-link { padding: 14px 16px; min-height: 48px; }
}

/* ---------- CARDS ---------- */
.card-brand {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-base);
}
.card-brand:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card-plan--featured {
  background: var(--bg-inverse);
  color: rgba(255,255,255,.80);
  border: none;
  box-shadow: var(--shadow-lg);
}
.card-plan--featured .price { color: #FFFFFF; }
.card-post .post-img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.card-testimonial .avatar {
  width: 44px; height: 44px; border-radius: var(--radius-pill); object-fit: cover;
}

/* ---------- ICONE EM CAIXA ---------- */
.icon-box {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--icon-1-bg); color: var(--icon-1-fg);
}
.icon-box--2 { background: var(--icon-2-bg); color: var(--icon-2-fg); }
.icon-box--3 { background: var(--icon-3-bg); color: var(--icon-3-fg); }
.icon-box--4 { background: var(--icon-4-bg); color: var(--icon-4-fg); }
.icon-box--5 { background: var(--icon-5-bg); color: var(--icon-5-fg); }

/* ---------- BADGES ---------- */
.badge-pill {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.badge-save {
  background: var(--accent);
  color: var(--text-on-brand);
  font-weight: var(--fw-bold);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
}

/* ---------- FORMULARIOS ---------- */
.form-label {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-bottom: 7px;
}
.form-control, .form-select {
  background: var(--bg-card);
  color: var(--text-strong);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 48px;
  transition: var(--transition-base);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.form-text { font-size: var(--fs-small); color: var(--text-muted); }
.form-control.is-invalid { border-color: var(--status-danger); }
.invalid-feedback {
  display: flex; align-items: center; gap: 6px;
  color: var(--status-danger);
  font-size: var(--fs-small);
}
.alert-inline {
  display: flex; gap: var(--space-3);
  background: color-mix(in srgb, var(--status-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-danger) 30%, transparent);
  border-left: 4px solid var(--status-danger);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

/* ---------- MODAL ---------- */
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--border-subtle); }
.modal-title { color: var(--text-strong); font-weight: var(--fw-semibold); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
.modal-success { text-align: center; padding: var(--space-7) var(--space-5); }
.modal-success .success-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-4);
}

/* ---------- ACCORDION (FAQ) ---------- */
.accordion-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm) !important;
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.accordion-item:has(.accordion-button:not(.collapsed)) {
  border: 1.5px solid var(--brand-200);
  box-shadow: var(--shadow-sm);
}
.accordion-button {
  background: transparent;
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  padding: 18px 20px;
  box-shadow: none;
}
.accordion-button:not(.collapsed) { background: transparent; color: var(--text-strong); }
.accordion-button::after { transition: transform var(--transition-base); }
.accordion-body { color: var(--text-body); padding-top: 0; }

/* ---------- CARROSSEL DE DEPOIMENTOS ---------- */
.carousel-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }
.carousel-dots button {
  width: 8px; height: 8px; padding: 18px 0;
  background: var(--border-strong);
  border: none; border-radius: var(--radius-pill);
  background-clip: content-box;
  transition: var(--transition-base);
}
.carousel-dots button[aria-current="true"] { width: 26px; background: var(--accent); background-clip: content-box; }


.badge-pill-blue {
    background:#daecf8;
    color:#236289;
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}

/* ---------- PAGINACAO ---------- */
.page-link {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  background: var(--bg-card);
}
.page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-brand);
}
.page-item.disabled .page-link { color: var(--border-strong); background: transparent; }

/* ---------- RODAPE ---------- */
.site-footer {
  background: var(--bg-inverse);
  color: rgba(255,255,255,.78);
  padding: var(--space-8) 0 var(--space-5);
}
.site-footer h2, .site-footer h3, .site-footer strong { color: #FFFFFF; }
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer .footer-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--brand-300);
}
.social-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  color: #FFFFFF;
}
.social-btn:hover { background: rgba(255,255,255,.16); }
.footer-copy { border-top: 1px solid rgba(255,255,255,.12); color: var(--navy-300); }

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