/* ==========================================================================
   SuperContato – main.css
   Última atualização: 2025-08-16
   ========================================================================== */

/* ===== Variáveis de cor e tokens ===== */
:root{
  /* Paleta base */
  --sc-primary:#5B8DEF;         /* azul moderno */
  --sc-dark:#0F172A;            /* quase preto (texto padrão em superfícies claras) */
  --sc-accent:#22C55E;          /* verde ação */
  --sc-muted:#64748B;           /* cinza texto secundário */

  /* Wow Card / premium */
  --sc-gold:#D4AF37;            /* ouro/bronze elegante (título) */
  --sc-dourado:#E9D98F;         /* dourado leve (ênfase) */
  --sc-azul:#60A5FA;            /* azul claro (ênfase) */
  --sc-card:#0F172A;            /* fundo escuro do wow card e rodapé */
  --sc-ink:#E5E7EB;             /* texto claro em fundos escuros */
  --sc-green-pop:#22E55D;       /* verde vibrante “bem-vindo(a)” */

  /* Auxiliares */
  --sc-white:#FFFFFF;
  --sc-faint:#F8FAFC;           /* superfícies levinhas */
}

/* ===== Base / Tipografia ===== */
html { scroll-behavior: smooth; }
body{ color: var(--sc-dark); }
a { color: var(--sc-primary); text-decoration: none; }
a:hover { color: #3B82F6; text-decoration: underline; }
.section-title{ font-weight:800; letter-spacing:-.02em; }

/* ===== Navbar ===== */
.navbar-brand img{ height:36px; }

/* ===== Hero ===== */
.hero{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(91,141,239,.15), transparent),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}
.hero h1{ letter-spacing:-.02em; }

/* ===== Utilitários visuais ===== */
.shadow-soft{ box-shadow:0 10px 30px rgba(2,6,23,.08); }
.rounded-2xl{ border-radius:1rem; }
.bg-faint{ background: var(--sc-faint); }

/* ===== Badges de origem ===== */
.badge-wix      { background:#FFF7ED; color:#9A3412; border:1px solid #FED7AA; }
.badge-google   { background:#EEF2FF; color:#3730A3; border:1px solid #C7D2FE; }
.badge-planilhas{ background:#E0F2FE; color:#075985; border:1px solid #BAE6FD; }
.badge-texto    { background:#F1F5F9; color:#0F172A; border:1px solid #E2E8F0; }
.logo-grid img{ max-height:38px; opacity:.85; }
.logo-grid{ align-items:flex-start; }

/* ===== Botões ===== */
.gradient-btn{
  background:linear-gradient(90deg, var(--sc-primary), #7C3AED);
  color:#fff;
}
.gradient-btn:hover{ filter:brightness(1.05); color:#fff; }

/* ===== Sticky CTA ===== */
.sticky-cta{ position:fixed; right:1rem; bottom:1rem; z-index:1030; }

/* ===== Lista com check (conteúdo) ===== */
.list-check li{ margin:.4rem 0; }
.list-check li::marker{ content:"✔  "; }

/* ==========================================================================
   Promo SuperContato
   ========================================================================== */
.promo-banner{ margin-top:-.5rem; margin-bottom:1.25rem; }

.promo-card.promo--warm{
  position:relative; overflow:hidden; color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(124,58,237,.38), rgba(124,58,237,0) 60%),
    radial-gradient(620px 360px at 85% 25%, rgba(91,141,239,.50), rgba(91,141,239,0) 62%),
    radial-gradient(560px 300px at 20% 85%, rgba(16,185,129,.45), rgba(16,185,129,0) 65%),
    linear-gradient(135deg, #0f172a 10%, #0b1221 60%, #152e4d 100%);
  background-color:#0f172a; /* fallback */
}
.promo-card .promo-kicker{
  color:#FDE047;
  font-weight:900;
  font-size:clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  letter-spacing:.06em;
  text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.promo-card .promo-text{ text-shadow:0 1px 2px rgba(0,0,0,.35); line-height:1.5; }
.promo-card .promo-link,
.promo-card .promo-link-underline{
  color:#fff; text-decoration-thickness:.12rem; text-underline-offset:2px;
}
.promo-card .promo-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(60% 100% at 30% 20%, rgba(255,255,255,.95), rgba(255,255,255,.75) 60%, rgba(255,255,255,.6)),
    linear-gradient(180deg, #ffffff, #f3f4f6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 20px rgba(2,6,23,.28);
}
.promo-card .promo-icon i{ font-size:1.5rem; color:#0f172a; line-height:1; }
.promo-card.promo--warm::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 120px at 50% -40px, rgba(255,255,255,.25), transparent 70%);
  pointer-events:none;
}
@media (max-width:576px){
  .promo-card .promo-icon{ width:40px; height:40px; }
  .promo-card .promo-text{ font-size:.97rem; }
}
@media (prefers-contrast: more){
  .promo-card.promo--warm{ border-color:rgba(255,255,255,.35); }
  .promo-card .promo-kicker{ color:#FACC15; }
}

/* ==========================================================================
   WOW CARD – pergunta premium logo no início
   ========================================================================== */
.wow-card{ background:var(--sc-card); color:var(--sc-ink); }
.wow-card .question{
  color:var(--sc-gold);
  font-size:1.6rem;
  font-weight:300;           /* mais fino */
  letter-spacing:.5px;
  margin-bottom:1rem;
}
/* Ênfases elegantes (sem marca-texto) */
.emph-gold  { font-weight:600; color:var(--sc-dourado); }
.emph-blue  { font-weight:600; color:var(--sc-azul); }
.emph-white { font-weight:700; color:#fff; }
.wow-card .welcome{ color:var(--sc-green-pop); font-weight:800; }

/* ==========================================================================
   Depoimento (quote)
   ========================================================================== */
.quote-card blockquote p { line-height: 1.6; }
.quote-card blockquote p::before {
  content: "“";
  font-size: 2.2rem; line-height: 0; vertical-align: -0.3rem;
  color: var(--sc-primary); margin-right: .15rem;
}
.quote-card blockquote p::after { content: "”"; }
.quote-avatar-oval {
  width: 72px; height: 72px; border-radius: 50% / 40%;
  object-fit: cover; background: #E2E8F0;
}
.text-quote { color: #374151; line-height: 1.65; }

/* ==========================================================================
   Telas / Galeria
   ========================================================================== */
.gallery-card{
  background:#fff; border:1px solid #E2E8F0; border-radius:1rem;
  box-shadow:0 10px 24px rgba(2,6,23,.12); overflow:hidden;
}
.gallery-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(2,6,23,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.gallery-card .ratio{ background:#F1F5F9; }
.gallery-caption{
  font-size:.875rem; color:#475569; text-align:center; padding:.5rem .25rem .25rem;
}

/* ==========================================================================
   FAQ (details/summary)
   ========================================================================== */
.faq-accordion details{
  border:1px solid #E2E8F0; border-radius:.75rem; background:#fff;
  margin-bottom:.75rem; overflow:hidden;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.faq-accordion details[open]{ box-shadow:0 12px 28px rgba(2,6,23,.10); }
.faq-accordion summary{
  list-style:none; cursor:pointer; padding:1rem 1.25rem; font-weight:600;
  color:#0F172A; display:flex; align-items:center; justify-content:space-between;
}
.faq-accordion summary::-webkit-details-marker{ display:none; }
.faq-accordion summary::after{
  content:""; width:.75rem; height:.75rem;
  border-right:2px solid var(--sc-primary); border-bottom:2px solid var(--sc-primary);
  transform:rotate(-45deg); transition:transform .2s ease;
}
.faq-accordion details[open] summary::after{ transform:rotate(45deg); }
.faq-accordion .content{
  background:#F9FAFB; color:#4B5563; font-size:.95rem;
  padding:1rem 1.25rem; border-top:1px solid #E5E7EB;
}
.faq-accordion details:focus-within { outline:2px solid rgba(91,141,239,.25); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .faq-accordion summary::after{ transition:none; } }

/* ==========================================================================
   Preços / badges
   ========================================================================== */
.price{ letter-spacing:-0.02em; }
.badge-promo { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A; font-weight:600; }
.badge-pop   { background:#E0E7FF; color:#3730A3; border:1px solid #C7D2FE; font-weight:600; }

/* ==========================================================================
   Footer institucional (escopo limpo)
   ========================================================================== */
.site-footer{
  --footer-bg:#0c111b;
  --footer-ink:#cbd5e1;
  --footer-muted:#94a3b8;
  --footer-heading:#e5e7f0;
  --footer-link:#cbd5e1;
  --footer-link-hover:#22e55d;
  --footer-bullet:#3b4452;
  --footer-rule:rgba(148,163,184,.18);

  background:var(--footer-bg);
  color:var(--footer-ink);
}

.site-footer .footer-title{
  color:var(--footer-heading);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.9rem;
  margin-bottom:.75rem;
}

/* listas com bullet minimalista */
.site-footer .footer-list{
  list-style:none;
  margin:0;
  padding-left:0;
}
.site-footer .footer-list li{
  position:relative;
  margin:.28rem 0;
  padding-left:1rem;
}
.site-footer .footer-list li::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width:6px; height:6px; border-radius:999px;
  background:var(--footer-bullet);
  box-shadow:0 0 0 2px rgba(255,255,255,.03) inset;
}

/* links silenciosos (sem azul) */
.site-footer a.link-quiet{
  color:var(--footer-link) !important;
  text-decoration: underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color: rgba(203,213,225,.35);
}
.site-footer a.link-quiet:hover{
  color:var(--footer-link-hover) !important;
  text-decoration-color: var(--footer-link-hover);
}

/* textinhos */
.site-footer .text-muted{ color:var(--footer-muted) !important; }

/* frase/aspas em 4ª coluna */
.footer-quote{
  color:var(--footer-ink);
}
.footer-quote .quote-mark{
  color:var(--footer-link-hover);
  font-size:1.1rem;
  vertical-align: baseline;
}
.footer-quote blockquote{
  font-style:italic;
  line-height:1.5;
  margin:0;
}
.footer-quote .author{
  display:block;
  margin-top:.35rem;
  color:var(--footer-muted);
}

/* responsivo: mantém a 4ª coluna empilhada no mobile com boa leitura */
@media (max-width: 767.98px){
  .site-footer .footer-title{ margin-top:.5rem; }
}





/* Pill ao lado da logo */
.brand-wrap{ row-gap:.4rem; }
.brand-logo{ display:block; }

/* Pill base escura (Windows) */
.os-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .7rem; border-radius:999px;
  font-weight:700; font-size:.92rem; letter-spacing:.2px;
  background:#0f172a; color:#e5e7eb;
  border:1px solid rgba(2,6,23,.12);
  box-shadow:0 8px 18px rgba(2,6,23,.10);
  white-space:nowrap;
}
.os-pill svg{ width:16px; height:16px; }

/* Pill WhatsApp (verde oficial) */
.wa-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .7rem; border-radius:999px;
  font-weight:700; font-size:.92rem; letter-spacing:.2px;
  background:#25D366;          /* WhatsApp brand */
  color:#ffffff;                /* texto branco */
  border:1px solid #1ebe5d;     /* borda levemente mais escura */
  box-shadow:0 8px 18px rgba(2,6,23,.10);
  text-decoration:none;         /* remove sublinhado do <a> */
  white-space:nowrap;
}
.wa-pill:hover{ filter:brightness(1.05); color:#fff; }
.wa-pill svg{ width:16px; height:16px; }

/* Acessibilidade */
.os-pill:focus-visible,
.wa-pill:focus-visible{
  outline:2px solid rgba(34,197,94,.6);
  outline-offset:2px;
}

@media (max-width: 575.98px){
  .brand-wrap{ gap:.5rem .6rem; }
  .os-pill, .wa-pill{ font-size:.88rem; }
}




/* ==========================================================================
   Extras úteis
   ========================================================================== */
/* Pulse suave caso queira aplicar em algum CTA específico */
@keyframes sc-cta-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,.0); }
  50%  { transform: scale(1.025); box-shadow: 0 12px 24px rgba(16,185,129,.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,.0); }
}
.cta-pulse.pulse-always { animation: sc-cta-pulse 1.6s ease-in-out infinite; will-change: transform; }

.cursor-zoom-in { cursor: zoom-in; }
#heroLightbox .modal-content{ background:#0b0f19; } /* combina com o site */