/* =====================================================================
   AZTV v2 — SITE PÚBLICO · design system (extraído do header/footer globais).
   As vars de MARCA (--brand & derivados, --font-sans, --on-brand) são só
   FALLBACK aqui: o layout injeta <style id="tema-wl"> DEPOIS (Tema::cssVars),
   lendo do az_tema — trocar a cor no painel muda o site inteiro (white-label).
   Dark-only (o site não tem toggle de tema). Zero dependência de WordPress.
   ===================================================================== */
:root{
  --bg:#050505;
  --surface-1:rgba(255,255,255,.022);
  --surface-2:rgba(255,255,255,.035);
  --surface-hover:rgba(255,255,255,.045);
  --surface-alt:#080808;   /* fundo escuro das seções (tom original) — o ritmo vem da hairline (border-1), NÃO de clarear */
  --border-1:rgba(255,255,255,.055);
  --border-2:rgba(255,255,255,.085);
  --border-hover:rgba(255,255,255,.12);
  --text-1:rgba(255,255,255,.96);
  --text-2:rgba(255,255,255,.55);
  --text-3:rgba(255,255,255,.46);
  --text-4:rgba(255,255,255,.40);

  /* MARCA — fallback; o az_tema sobrescreve via <style id="tema-wl"> */
  --brand:#FF4D00;
  --brand-hover:#FF7C1F;
  --brand-soft:rgba(255,77,0,.10);
  --brand-border:rgba(255,77,0,.25);
  --brand-ink:#FF4D00;
  --on-brand:#000000;
  --brand-selection:rgba(255,77,0,.30);   /* fallback; o tema-wl injeta rgba(marca,.30) — seleção de texto */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --green:#4ade80; --green-soft:rgba(74,222,128,.10); --green-border:rgba(74,222,128,.25);
  --wpp:#25d366; --wpp-hover:#1fb955;
  --red:#f87171; --red-soft:rgba(248,113,113,.10);
  --amber:#fbbf24; --amber-soft:rgba(251,191,36,.10);
  --blue:#60a5fa; --blue-soft:rgba(96,165,250,.10);

  --radius-card:12px; --radius-pill:6px; --radius-input:8px;
  --ease:cubic-bezier(0.2, 0, 0, 1);
  --shadow-lg:0 20px 60px rgba(0,0,0,.5);
  --surface-solid:#161616; --surface-solid-2:#1f1f1f; --border-solid:#2a2a2a;   /* superfícies SÓLIDAS (sobre a imagem do hero, onde as surfaces rgba vazariam) */
  --header-h:36px; --nav-h:60px; --total-top:96px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text-1);font-family:var(--font-sans);min-height:100vh;-webkit-font-smoothing:antialiased;font-feature-settings:'tnum';font-weight:400;overflow-x:hidden}
body.nav-locked{overflow:hidden}
a{color:inherit;text-decoration:none;transition:color 200ms var(--ease)}
button{font-family:inherit;border:none;cursor:pointer;background:none;color:inherit}
img{max-width:100%;display:block;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
::selection{background:var(--brand-selection);color:var(--text-1)}
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}   /* a11y: foco visível (o site não tinha nenhum) — espelha o painel; o checkout tem :focus próprio nos inputs */

/* ========== BARRA DE AVISOS (rotador; conteúdo vem de az_avisos) ========== */
.avisos{position:sticky;top:0;z-index:10000;height:36px;background:var(--brand);color:var(--on-brand);overflow:hidden}
.avisos-track{position:relative;height:100%;max-width:1100px;margin:0 auto;padding:0 16px}
.avisos-item{position:absolute;inset:0;line-height:36px;text-align:center;font-size:12px;font-weight:500;letter-spacing:.2px;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transition:opacity 400ms var(--ease),visibility 400ms var(--ease)}
.avisos-item.is-on{opacity:1;visibility:visible}
.avisos-item a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.avisos-item a:hover{opacity:.85}

/* ========== HEADER NAV ========== */
.nav{position:sticky;top:36px;z-index:9999;height:60px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:rgba(5,5,5,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-1)}
.nav-logo{height:var(--logo-size,30px);width:auto}
/* wordmark: texto da marca quando NÃO há logo no backoffice (az_tema.logo_path vazio) */
.wordmark{font-weight:700;letter-spacing:-.4px;color:var(--text-1);line-height:1;white-space:nowrap;display:inline-block}
.nav .wordmark{font-size:19px}
.nav-ov-head .wordmark{font-size:18px}
.foot .wordmark{font-size:18px;opacity:.92}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:13px;font-weight:500;color:var(--text-2)}
.nav-links a:hover{color:var(--text-1)}
.nav-cta{font-size:13px;font-weight:500;color:var(--on-brand)!important;background:var(--brand);padding:9px 18px;border-radius:var(--radius-input);margin-left:12px;transition:background 200ms var(--ease),transform 200ms var(--ease)}
.nav-cta:hover{background:var(--brand-hover);transform:translateY(-1px)}

.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta).is-active{color:var(--text-1)}
.nav-links a:not(.nav-cta).is-active::after{content:'';position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--brand)}
.menu-btn{display:none;padding:8px;-webkit-tap-highlight-color:transparent}
.menu-btn span{display:block;width:20px;height:2px;background:var(--text-1);margin:4px 0;transition:all 250ms var(--ease);border-radius:2px}
.menu-btn.on span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.menu-btn.on span:nth-child(2){opacity:0}
.menu-btn.on span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* ========== DRAWER MOBILE ========== */
.nav-overlay{display:none;position:fixed!important;inset:0!important;background:rgba(5,5,5,.98)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:10001!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:0!important;margin:0!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav-overlay.on{display:flex!important}
.nav-ov-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:18px 20px!important;border-bottom:1px solid var(--border-1)!important;position:sticky!important;top:0!important;background:rgba(5,5,5,.98)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:1!important;flex-shrink:0!important;width:100%!important;margin:0!important}
.nav-ov-logo{height:24px!important;width:auto!important;max-height:24px!important;max-width:170px!important;object-fit:contain!important;display:block!important;flex-shrink:0!important}
.nav-close{padding:8px!important;-webkit-tap-highlight-color:transparent;background:none!important;border:none!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}
.nav-close svg{width:22px!important;height:22px!important;stroke:var(--text-2)!important;display:block!important}
.nav-ov-body{flex:1 1 auto!important;padding:24px 20px!important;display:flex!important;flex-direction:column!important;gap:28px!important;width:100%!important;margin:0!important}
.nav-ov-section{display:flex!important;flex-direction:column!important;gap:10px!important;margin:0!important}
.nav-ov-title{font-size:11px!important;font-weight:500!important;color:var(--text-3)!important;text-transform:uppercase!important;letter-spacing:1px!important;padding:0 4px!important;margin:0!important}
.nav-ov-list{display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important}
.nav-ov-list a{display:flex!important;align-items:center!important;justify-content:space-between!important;font-size:15px!important;font-weight:500!important;color:var(--text-1)!important;padding:14px 4px!important;border-bottom:1px solid var(--border-1)!important;transition:color 200ms var(--ease);text-decoration:none!important;margin:0!important}
.nav-ov-list a:last-child{border-bottom:none!important}
.nav-ov-list a:hover{color:var(--brand-ink)!important}
.nav-ov-list a.is-active{color:var(--brand-ink)!important}
.nav-ov-list a.is-active svg{color:var(--brand-ink)!important;stroke:var(--brand-ink)!important}
.nav-ov-list a svg{width:14px!important;height:14px!important;color:var(--text-3)!important;stroke:var(--text-3)!important;flex-shrink:0!important}
.nav-ov-btns{display:flex!important;flex-direction:column!important;gap:8px!important;margin:0!important}
.nav-ov-btn{display:flex!important;align-items:center!important;gap:12px!important;padding:14px!important;background:var(--surface-2)!important;border:1px solid var(--border-2)!important;border-radius:var(--radius-input)!important;color:var(--text-1)!important;font-size:14px!important;font-weight:500!important;transition:border-color 200ms var(--ease),background 200ms var(--ease);text-decoration:none!important;margin:0!important;width:100%!important}
.nav-ov-btn:hover{border-color:var(--brand-border)!important;background:var(--surface-hover)!important}
.nav-ov-btn svg{width:20px!important;height:20px!important;color:var(--brand-ink)!important;flex-shrink:0!important}
.nav-ov-btn-info{display:flex!important;flex-direction:column!important;align-items:flex-start!important;line-height:1.2!important;flex:1 1 auto!important}
.nav-ov-btn-info strong{font-weight:500!important;color:var(--text-1)!important;font-size:14px!important}
.nav-ov-btn-info small{font-size:11px!important;color:var(--text-3)!important;font-weight:400!important;margin-top:2px!important;font-feature-settings:'tnum'}
.nav-ov-btn.is-support{background:var(--green-soft)!important;border-color:var(--green-border)!important}
.nav-ov-btn.is-support:hover{background:rgba(74,222,128,.18)!important;border-color:var(--green)!important}
.nav-ov-btn.is-support svg{color:var(--green)!important}
.nav-ov-btn.is-support .nav-ov-btn-info strong{color:var(--green)!important}
.nav-ov-cta{display:block!important;text-align:center!important;background:var(--brand)!important;color:var(--on-brand)!important;font-size:15px!important;font-weight:500!important;padding:16px 24px!important;border-radius:var(--radius-input)!important;margin:0 20px 32px!important;transition:background 200ms var(--ease);text-decoration:none!important;flex-shrink:0!important}
.nav-ov-cta:hover{background:var(--brand-hover)!important;color:var(--on-brand)!important}
@media (max-width:768px){
  .nav{padding:0 16px}
  /* logo no mobile: altura menor + trava de LARGURA (max-width) pra um logo largo (wordmark) não dominar/estourar
     a barra nem o drawer; object-fit:contain mantém a proporção quando a largura clampa. */
  .nav-logo{height:24px;max-width:150px;object-fit:contain}
  .nav-links{display:none}
  .menu-btn{display:block}
}

/* ========== FOOTER ========== */
.foot{background:var(--surface-1);border-top:1px solid var(--border-2);margin-top:96px;font-family:var(--font-sans);color:var(--text-2)}
/* Home: a última seção (autenticidade) é uma faixa clara (surface-1); os 96px de respiro viravam um
   buraco escuro entre ela e o rodapé (também claro). Na home o rodapé COLA na última seção. Específico
   da home (via .pg-home no <body>) — as outras páginas mantêm o respiro de 96px. */
.pg-home .foot{margin-top:0}
.pg-home .auth{border-bottom:0}
.foot *{box-sizing:border-box}
.foot-brand-row{max-width:1100px;margin:0 auto;padding:56px 24px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-brand-area{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-logo{height:var(--logo-size,32px);width:auto;opacity:.92;display:block}
.foot-tagline{font-size:13px;color:var(--text-3);font-weight:400;padding-left:18px;border-left:1px solid var(--border-1);line-height:1.4}
.foot-social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-1);color:var(--text-2)!important;transition:color 150ms var(--ease),border-color 150ms var(--ease),background 150ms var(--ease);text-decoration:none!important}
.foot-social:hover{color:var(--brand-ink)!important;border-color:var(--brand-border);background:var(--brand-soft)}
.foot-social svg{width:16px;height:16px}
.foot-social-group{display:inline-flex;align-items:center;gap:10px}
.foot-status{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--text-2);font-weight:500;padding:8px 14px;background:var(--surface-2);border:1px solid var(--border-1);border-radius:99px;letter-spacing:.1px}
.foot-status-dot{width:7px;height:7px;border-radius:50%;background:var(--text-3);flex-shrink:0;transition:background 200ms var(--ease)}
.foot-status-dot.is-open{background:var(--green);box-shadow:0 0 8px var(--green);animation:footStatusPulse 2.5s ease infinite}
.foot-status-dot.is-closed{background:var(--red)}
@keyframes footStatusPulse{0%,100%{opacity:1}50%{opacity:.55}}
.foot-cols{max-width:1100px;margin:0 auto;padding:32px 24px 56px;display:grid;grid-template-columns:repeat(4,1fr);gap:48px;border-top:1px solid var(--border-1)}
.foot-col h4{font-size:11px;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:22px}
.foot-col a,.foot-col a:link,.foot-col a:visited{display:block;width:fit-content;max-width:100%;font-size:13px;font-weight:400;color:var(--text-2)!important;padding:7px 0;text-decoration:none!important;position:relative;transition:color 150ms var(--ease);overflow-wrap:anywhere}
.foot-col a::after{content:'';position:absolute;left:0;bottom:5px;width:0;height:1px;background:var(--brand);transition:width 250ms var(--ease)}
.foot-col a:hover{color:var(--brand-ink)!important}
.foot-col a:hover::after{width:100%}
.foot-hours-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;font-feature-settings:'tnum';gap:12px}
.foot-hours-row span:first-child{color:var(--text-3)}
.foot-hours-row span:last-child{color:var(--text-2);font-weight:500}
.foot-mid{border-top:1px solid var(--border-1);padding:24px}
.foot-auth{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-auth-badge{display:inline-flex;align-items:center;gap:8px;background:var(--brand-soft);border:1px solid var(--brand-border);padding:7px 14px;border-radius:99px;font-size:11px;font-weight:500;color:var(--brand-ink)!important;letter-spacing:.4px;text-transform:uppercase;flex-shrink:0;text-decoration:none!important}
.foot-auth-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.foot-auth-text{font-size:12px;color:var(--text-3);line-height:1.6;flex:1;min-width:240px;font-weight:400}
.foot-bot{border-top:1px solid var(--border-1);padding:20px 24px}
.foot-bot-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.foot-bot-left{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot-copy{font-size:12px;color:var(--text-3);font-weight:400;letter-spacing:.1px}
.foot-legal{font-size:12px;color:var(--text-3)!important;font-weight:400;text-decoration:none!important;transition:color 150ms var(--ease);padding-left:14px;border-left:1px solid var(--border-1)}
.foot-legal:hover{color:var(--brand-ink)!important}
.foot-android{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);font-weight:400}
.foot-android svg{width:13px;height:13px;fill:#a4c639;flex-shrink:0}
@media (max-width:1024px){ .foot-cols{gap:32px} }
@media (max-width:768px){
  .foot-brand-row{padding:48px 20px 28px;flex-direction:column;align-items:flex-start;gap:18px}
  .foot-brand-area{gap:14px}
  .foot-tagline{font-size:12px;padding-left:14px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:32px;padding:28px 20px 40px}
  .foot-mid{padding:20px}
  .foot-bot{padding:18px 20px}
  .foot-bot-inner{flex-direction:column;text-align:center;gap:12px}
}
@media (max-width:480px){
  .foot-cols{grid-template-columns:1fr;gap:32px}
  .foot-brand-area{flex-direction:column;align-items:flex-start;gap:10px}
  .foot-tagline{padding-left:0;border-left:0;padding-top:6px;border-top:1px solid var(--border-1);width:100%}
}

/* ========== POP-UP DA HOME ========== */
/* Cores da marca via var(); o backdrop escuro e o × sobre a imagem são controles
   funcionais (overlay), no mesmo padrão dos outros overlays do site (rgba do --bg). */
.popup{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:24px}
.popup[hidden]{display:none}
.popup-backdrop{position:absolute;inset:0;background:rgba(5,5,5,.7);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* fundo SÓLIDO: superfície do tema (--surface-1) COMPOSTA sobre o --bg opaco, pra o card não deixar
   o conteúdo do site vazar por trás. Fica igual a um card sólido do site (surface sobre o #050505). */
.popup-card{position:relative;z-index:1;width:100%;max-width:420px;max-height:calc(100vh - 48px);overflow:auto;background:linear-gradient(0deg,var(--surface-1),var(--surface-1)),var(--bg);border:1px solid var(--border-2);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);animation:popup-in 250ms var(--ease)}
@keyframes popup-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.popup-x{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;transition:background 150ms var(--ease)}
.popup-x:hover{background:rgba(0,0,0,.7)}
.popup-x svg{width:16px;height:16px}
/* proporção FIXA (16:9): qualquer imagem preenche a área com object-fit:cover — sem distorcer nem
   quebrar o card. Recomendado subir em 880×495 px (2× retina do card de 420px). */
.popup-banner{width:100%;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.popup-banner img{width:100%;height:100%;object-fit:cover;display:block}
.popup-body{padding:24px;text-align:center}
.popup-titulo{font-size:20px;font-weight:600;letter-spacing:-.3px;color:var(--text-1);margin-bottom:10px}
.popup-texto{font-size:14px;color:var(--text-2);line-height:1.6;margin-bottom:18px}
.popup-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:13px 20px;background:var(--brand);color:var(--on-brand)!important;font-size:14px;font-weight:500;border-radius:var(--radius-input);text-decoration:none!important;transition:background 200ms var(--ease),transform 200ms var(--ease)}
.popup-cta:hover{background:var(--brand-hover);transform:translateY(-1px)}
body.popup-open{overflow:hidden}
@media (max-width:480px){ .popup{padding:16px} .popup-body{padding:20px} }