/* =====================================================================
   TIRZEC — store.css  ·  Polimento PREMIUM (somente cosmético)
   Regra de seguranca: NAO altera layout, posicao, display, grid, flex,
   largura de container nem media-queries — so cor, sombra, raio, transicao,
   tipografia. Aditivo e 100% reversivel (restaurar este arquivo desfaz tudo).
   ===================================================================== */

:root {
  --tz-gold:      #c8992f;
  --tz-gold-2:    #e2b64a;
  --tz-gold-lite: #f3d98a;
  --tz-gold-deep: #9a7420;
  --tz-ink:       #16130c;
  --st-ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --st-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --tz-shadow-sm: 0 1px 2px rgba(20,16,8,.05), 0 1px 1px rgba(20,16,8,.04);
  --tz-shadow-md: 0 2px 4px rgba(20,16,8,.04), 0 8px 20px -8px rgba(20,16,8,.13), 0 1px 2px rgba(20,16,8,.05);
  --tz-shadow-lg: 0 4px 10px rgba(20,16,8,.05), 0 26px 52px -20px rgba(20,16,8,.24), 0 10px 22px -14px rgba(20,16,8,.12);
  --tz-shadow-gold: 0 8px 22px -8px rgba(200,153,47,.42), 0 2px 6px rgba(200,153,47,.20);
  /* ---- tokens de polimento (aditivos) ---- */
  --tz-hairline:      rgba(20,16,8,.09);
  --tz-hairline-gold: rgba(200,153,47,.30);
  --tz-ring-gold:     0 0 0 3px rgba(200,153,47,.18);
  --tz-sheen:         inset 0 1px 0 rgba(255,255,255,.38);
  --tz-radius:        16px;
}

/* ---- Anti-icone-gigante (SVG inline sem tamanho vira icone) ---- */
img, video, iframe { max-width: 100%; }
svg:not([width]):not([height]) { width: 1.15em; height: 1.15em; }

/* ---- Alinhamento de icones ---- */
.comp-check svg, .comp-cross svg { vertical-align: middle; }
.comp-badge-win svg { vertical-align: -2px; }
.t-result-badge svg, .pix-timer-box svg, #btnSubmitText svg { flex-shrink: 0; }
.t-stars svg { fill: var(--tz-gold-2); }

/* ---- CTA principal (dourado premium, sombra, brilho no hover) ---- */
.btn-submit-action, .btn-cta-main, #btnSubmitOrder, .btn-select-plan, .btn-comprar-header, .btn-copiar-pix, .btn-msb-buy {
  background-image: linear-gradient(135deg, var(--tz-gold-2) 0%, var(--tz-gold) 55%, var(--tz-gold-deep) 100%) !important;
  color: var(--tz-ink) !important;
  border: none !important;
  box-shadow: var(--tz-shadow-gold), var(--tz-sheen);
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
  letter-spacing: .2px;
  font-weight: 800;
  transition: transform .16s var(--st-ease), box-shadow .22s var(--st-ease), filter .2s var(--st-ease);
}
.btn-submit-action:hover, .btn-cta-main:hover, #btnSubmitOrder:hover,
.btn-select-plan:hover, .btn-comprar-header:hover, .btn-copiar-pix:hover, .btn-msb-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(200,153,47,.6), var(--tz-sheen);
  filter: brightness(1.03);
}
.btn-submit-action:active, .btn-cta-main:active, #btnSubmitOrder:active,
.btn-select-plan:active, .btn-comprar-header:active, .btn-msb-buy:active { transform: translateY(0) scale(.99); }

/* ---- Cards de plano: elevacao + destaque dourado ---- */
.plan-card {
  border-radius: 18px;
  box-shadow: var(--tz-shadow-md);
  transition: transform .25s var(--st-ease), box-shadow .25s var(--st-ease), border-color .25s var(--st-ease);
  will-change: transform;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--tz-shadow-lg); }
.plan-card.featured, .plan-card.destaque, .plan-card.popular {
  border-color: var(--tz-gold) !important;
  box-shadow: var(--tz-shadow-lg), 0 0 0 2px rgba(200,153,47,.35);
}
.plan-features li svg { color: var(--tz-gold-deep); transition: transform .2s var(--st-ease); }
.plan-card:hover .plan-features li svg { transform: scale(1.1); }

/* ---- Precos em destaque (tabular) ---- */
.plan-price, .price, #summaryTotal, .summary-line.total span:last-child {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}

/* ---- Badges / selos dourados ---- */
.t-result-badge { gap: 6px; letter-spacing: .2px; }
.pbf-item svg, .contact-item svg, .modal-header-custom h3 svg { color: var(--tz-gold-deep); }

/* ---- Cartoes/paineis genericos ganham profundidade sutil ---- */
.card, .panel, .benefit-card, .pbf-item, .feature-card {
  box-shadow: var(--tz-shadow-sm), var(--tz-shadow-md);
}

/* ---- Inputs: foco dourado suave (sem mudar layout) ---- */
.form-group input:focus, #formCheckout input:focus, #formCheckout select:focus, #formCheckout textarea:focus {
  border-color: var(--tz-gold) !important;
  box-shadow: 0 0 0 3px rgba(200,153,47,.18) !important;
  outline: none;
}

/* ---- Acessibilidade: anel de foco visivel ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tz-gold);
  outline-offset: 2px;
}

/* =====================================================================
   ELEVACAO PREMIUM — profundidade, hierarquia tipografica e COESAO de acento
   Somente cosmetico (cor/fundo/sombra/borda/raio/peso/tracking/transicao).
   Traz acentos ciano/verde soltos da base para a familia DOURADA TIRZEC.
   Nao altera display/position/grid/flex/tamanho de container nem breakpoints.
   ===================================================================== */

/* ---- Coesao de acento: selos/badges de MARCA em dourado (eram ciano/verde) ---- */
.hero-badge {
  background: rgba(200,153,47,.13);
  color: var(--tz-gold-deep);
  border: 1px solid var(--tz-hairline-gold);
  box-shadow: var(--tz-shadow-sm);
}
.hero-badge-dot { background: var(--tz-gold); box-shadow: 0 0 0 3px rgba(200,153,47,.20); }

.plan-badge, .product-ribbon {
  background-image: linear-gradient(135deg, var(--tz-gold-2) 0%, var(--tz-gold) 60%, var(--tz-gold-deep) 100%);
  color: var(--tz-ink);
  box-shadow: var(--tz-shadow-gold);
  letter-spacing: .3px;
}
.brinde-tag {
  background-image: linear-gradient(135deg, var(--tz-gold) 0%, var(--tz-gold-deep) 100%);
  color: var(--tz-ink);
  box-shadow: var(--tz-shadow-sm);
  letter-spacing: .3px;
}
.msb-badge { background: rgba(200,153,47,.15); color: var(--tz-gold-deep); }

/* ---- FAQ ativo: acento dourado coeso (era ciano) ---- */
.faq-question { font-weight: 700; letter-spacing: .1px; }
.faq-item.active {
  border-color: var(--tz-hairline-gold);
  background: #fffdf5;
  box-shadow: 0 8px 24px -10px rgba(200,153,47,.28);
}
.faq-item.active .faq-question { color: var(--tz-gold-deep); }
.faq-item.active .faq-icon-box { background: rgba(200,153,47,.16); color: var(--tz-gold-deep); }

/* ---- Plano em destaque: brilho/borda/botao dourados coesos (era ciano/verde) ---- */
.plan-card.featured { background-image: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%); }
.plan-card.featured:hover { box-shadow: var(--tz-shadow-lg), 0 0 0 2px rgba(200,153,47,.45); }
.plan-card.featured .btn-select-plan {
  background-image: linear-gradient(135deg, var(--tz-gold-2) 0%, var(--tz-gold) 55%, var(--tz-gold-deep) 100%) !important;
  color: var(--tz-ink) !important;
  box-shadow: var(--tz-shadow-gold), var(--tz-sheen) !important;
}
.plan-card.featured .btn-select-plan:hover {
  box-shadow: 0 16px 34px -10px rgba(200,153,47,.6), var(--tz-sheen) !important;
}

/* ---- Hierarquia tipografica (peso/tracking/altura — SEM mexer em font-size) ---- */
.section-title-wrap h2 { font-weight: 800; letter-spacing: -.6px; line-height: 1.14; }
.plan-name { font-weight: 800; letter-spacing: -.2px; }
.plan-price, .pb-price { font-weight: 800; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.plan-old-price { opacity: .72; letter-spacing: .1px; }

/* ---- Total do pedido: enfase dourada premium (contraste ok em claro) ---- */
#summaryTotal, .summary-line.total span:last-child {
  color: var(--tz-gold-deep);
  font-weight: 800;
}

/* ---- Profundidade coesa em cards de marketing (so cor/sombra/hairline/transicao) ---- */
.hf-card, .t-card, .faq-item, .brinde-special-card, .quality-banner-box, .summary-card {
  box-shadow: var(--tz-shadow-md);
  border-color: var(--tz-hairline);
  transition: transform .25s var(--st-ease), box-shadow .25s var(--st-ease), border-color .25s var(--st-ease);
}
.hf-card:hover, .t-card:hover { box-shadow: var(--tz-shadow-lg); border-color: var(--tz-hairline-gold); }
.hero-product-card { box-shadow: var(--tz-shadow-lg); border-color: var(--tz-hairline); }
.brinde-special-card { background-image: linear-gradient(180deg, #fffef9 0%, #f9efd6 100%); }

/* ---- Inputs: transicao suave (foco dourado ja definido acima) ---- */
.form-group input, .form-group select, .form-group textarea,
#formCheckout input, #formCheckout select, #formCheckout textarea {
  transition: border-color .18s var(--st-ease), box-shadow .18s var(--st-ease), background-color .18s var(--st-ease);
}

/* ---- Modal de checkout: mais profundidade + aba ativa nitida ---- */
.modal-dialog { box-shadow: var(--tz-shadow-lg); }
.modal-tab-btn.active { box-shadow: 0 2px 10px rgba(20,16,8,.10), var(--tz-sheen); }

@media (prefers-reduced-motion: reduce) {
  .plan-card, .plan-card:hover, .btn-submit-action, .btn-cta-main, #btnSubmitOrder,
  .btn-select-plan, .btn-comprar-header, .btn-msb-buy, .plan-features li svg,
  .hf-card, .hf-card:hover, .t-card, .t-card:hover, .faq-item {
    transition: none !important;
    transform: none !important;
  }
}

/* =====================================================================
   COMPLEMENTO DE MARCA — remove o NAVY/AZUL/VERDE residual da base
   (o index.php inline ainda usa --primary navy e paineis azul-marinho).
   SOMENTE cor/gradiente/borda/fill. Nada de layout. Reversivel pelo .bak.
   ===================================================================== */

/* 1) Override das variaveis do index.php -> familia dourada/preta */
:root {
  --primary:            #c8992f;
  --primary-dark:       #9a7420;
  --primary-light:      #e2b64a;
  --dark:               #16130c;
  --accent-pix:         #c8992f;
  --accent-green:       #c8992f;
  --accent-green-hover: #9a7420;
  --focus-ring:         0 0 0 3px rgba(200,153,47,.42);
  --tz-ink-2:           #0c0a07;
  --tz-gold-soft:       #fbf3df;
  --tz-gold-bd:         #ecd9a0;
}

/* 2) Superficies escuras: NAVY -> PRETO quente */
.top-announcement { background: linear-gradient(90deg, var(--tz-ink-2) 0%, #241a08 50%, var(--tz-ink-2) 100%); }
.top-announcement span { background: linear-gradient(135deg, var(--tz-gold-2), var(--tz-gold)); color: var(--tz-ink); }
.pricing-banner { background: linear-gradient(145deg, var(--tz-ink) 0%, var(--tz-ink-2) 100%); }
.quality-banner-box { background: linear-gradient(145deg, var(--tz-ink) 0%, var(--tz-ink-2) 100%); }
.quality-banner-box h2 span { color: var(--tz-gold-2); }
.qp-icon { color: var(--tz-gold-2); }
.video-card-bg { background: linear-gradient(160deg, #241a08 0%, var(--tz-ink) 45%, var(--tz-ink-2) 100%); }
.play-btn-circle svg { fill: var(--tz-gold-deep); }
.video-sub-text { color: var(--tz-gold-lite); }
footer { background: var(--tz-ink-2); }
.modal-overlay { background: rgba(12,10,7,.82); }
.modal-header-custom { background: linear-gradient(135deg, var(--tz-ink) 0%, var(--tz-ink-2) 100%); }

/* 3) Acentos AZUIS residuais -> dourado */
.hero-section { background: radial-gradient(circle at 10% 20%, rgba(243,217,138,.32) 0%, rgba(248,250,252,.92) 78%); }
.logo span { background: var(--tz-gold-soft); color: var(--tz-gold-deep); }
.hf-icon { background: var(--tz-gold-soft); color: var(--tz-gold-deep); }
.b-icon-wrap { background: var(--tz-gold-soft); color: var(--tz-gold-deep); }
.pbf-item svg { color: var(--tz-gold-2); }
.t-avatar { background: linear-gradient(135deg, var(--tz-gold) 0%, var(--tz-gold-deep) 100%); color: var(--tz-ink); }
.t-result-badge { color: var(--tz-gold-deep); background: var(--tz-gold-soft); border: 1px solid var(--tz-gold-bd); }
.brinde-perk-pill { color: var(--tz-gold-deep); border: 1px solid var(--tz-gold-bd); }
.brinde-special-card { border-color: var(--tz-gold-bd); }
.summary-card { background: linear-gradient(145deg, #fffaf0 0%, var(--tz-gold-soft) 100%); border: 1.5px solid var(--tz-gold-bd); }
.summary-line.total { border-top: 1.5px dashed var(--tz-gold-bd); }
.plan-price { color: var(--tz-gold-deep); }
.plan-installments { color: var(--tz-gold-deep); }
.msb-price strong { color: var(--tz-gold-deep); }
.social-links a:hover { background: var(--tz-gold-deep); }
.modal-tab-btn.active { color: var(--tz-gold-deep); }
.modal-tab-btn#tabBtnPix.active { color: var(--tz-gold-deep); }
.pix-qr-container { border-color: var(--tz-gold); }
::selection { background: rgba(200,153,47,.22); color: var(--tz-ink); }

/* 4) Comparativo: coluna TIRZEC em dourado (check verde / cross vermelho ficam) */
.comp-table th.col-tirzec, .comp-table td.col-tirzec {
  background: #fdf7e6; color: #6b5212;
  border-left-color: var(--tz-gold); border-right-color: var(--tz-gold);
}
.comp-table th.col-tirzec { border-top-color: var(--tz-gold); background: var(--tz-gold-soft); color: var(--tz-gold-deep); }
.comp-table tr:last-child td.col-tirzec { border-bottom-color: var(--tz-gold); }
.comp-badge-win { background: linear-gradient(135deg, var(--tz-gold-2), var(--tz-gold-deep)); color: var(--tz-ink); }

/* Mantidos por SEMANTICA (nao viram dourado):
   WhatsApp (verde), pix-timer (ambar), radar/sucesso de pagamento (verde),
   t-verified (verde), comp-check (verde), comp-cross/erros (vermelho). */

/* 5) Depoimentos: avatar com FOTO (do template) — circular, preenche, anel dourado */
img.t-avatar { display: block; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--tz-gold-bd); }

/* =====================================================================
   6) EFEITOS EXATOS DO TEMPLATE (Originkit "Capable")
   A assinatura do template e sombra FRIA, BAIXA OPACIDADE, com ANEL BRANCO.
   Valores portados de globals.css do template (float-card / capability /
   hero-panel). So sombra / raio / transicao / transform — nao altera layout.
   ===================================================================== */
/* transicao comum suave (ease do template) */
.hero-product-card, .plan-card, .comparison-section,
.hf-card, .t-card, .faq-item, .summary-card, .brinde-special-card {
  transition: transform .35s var(--st-ease), box-shadow .35s var(--st-ease), border-color .35s var(--st-ease);
}
/* Cards GRANDES de vitrine = "capability card" do template */
.plan-card, .comparison-section {
  box-shadow: 0 0 0 4px #ffffff, -15px 10px 13px rgba(48,49,51,.04), 0 31px 38px rgba(81,95,122,.06);
}
/* Cards MENORES = "float card" do template */
.hf-card, .t-card, .faq-item, .summary-card, .brinde-special-card {
  box-shadow: 0 0 0 4px #ffffff, 0 11px 34px rgba(118,125,165,.14);
}
/* Card do produto no hero = "hero panel" (mais presenca) */
.hero-product-card {
  box-shadow: 0 0 0 6px #ffffff, 0 22px 34px rgba(140,150,169,.14), 0 4px 8px rgba(140,150,169,.14);
}
/* cantos generosos do template */
.plan-card, .hf-card, .t-card, .faq-item, .brinde-special-card, .summary-card { border-radius: 20px; }
.hero-product-card { border-radius: 26px; }
/* Hover: eleva com a sombra "hero-panel" (fria, suave) */
.hf-card:hover, .t-card:hover, .plan-card:hover, .brinde-special-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 4px #ffffff, 0 28px 46px rgba(140,150,169,.18), 0 8px 12px rgba(140,150,169,.12);
}
/* Plano em destaque: anel + halo dourado premium */
.plan-card.featured {
  box-shadow: 0 0 0 4px #fffdf5, 0 0 0 5px rgba(200,153,47,.30), 0 31px 44px rgba(154,116,32,.14);
}
.plan-card.featured:hover {
  box-shadow: 0 0 0 4px #fffdf5, 0 0 0 5px rgba(200,153,47,.42), 0 34px 56px rgba(154,116,32,.20);
}
/* Pills/selos e botoes com cantos do template */
.hero-badge, .brinde-tag, .brinde-perk-pill, .t-result-badge, .msb-badge { border-radius: 100px; }
.btn-cta-main, .btn-submit-action, .btn-select-plan, .btn-comprar-header { border-radius: 14px; }

/* 7) Ultimos residuos apontados pela auditoria (dentro do <style> inline) */
.hero h1 span.highlight {
  background: linear-gradient(120deg, rgba(200,153,47,0) 0%, rgba(226,182,74,.38) 100%);
}
.pix-trust-item svg { color: var(--tz-gold-deep); }