/* ================================================================
   ARQUIVO: style.css
   PROJETO: Inter Net — Site institucional + Portal do Cliente
   DESCRIÇÃO: Folha de estilos principal do site. Contém todas as
   regras visuais: cores da marca, tipografia, layout das seções
   da landing page, portal do cliente, painel administrativo e
   regras de responsividade (mobile/tablet/desktop).
   ================================================================ */

/* ============================================================
   RESET GLOBAL
   Remove margens/paddings padrão do navegador e define box-sizing
   para que padding e border não aumentem o tamanho dos elementos.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ============================================================
   VARIÁVEIS DE COR E DESIGN (Design Tokens)
   Centraliza as cores da marca (laranja/preto/vermelho), tipografia,
   raios de borda e sombras. Alterar aqui muda o site inteiro.
   ============================================================ */
:root{
  --or:#FF6B00;--ord:#D95A00;--orl:#FF8C2E;--orp:#FFF4EB;
  --red:#D92B2B;--redd:#A81F1F;
  --blk:#0C0C0C;--g9:#121212;--g8:#1C1C1C;--g7:#2C2C2C;
  --g6:#4A4A4A;--g4:#8A8A8A;--g2:#E0E0E0;--g1:#F6F6F6;
  --wh:#FFFFFF;--ok:#1DB954;--okbg:#EDFBF3;--dbg:#FFF0F0;
  --fd:"Nunito",sans-serif;--fb:"Barlow",sans-serif;
  --r:14px;--rs:8px;
  --sh:0 2px 16px rgba(0,0,0,.07);--shl:0 8px 40px rgba(0,0,0,.13);
  --nh:70px;
}

/* ============================================================
   ESTILOS BASE DO DOCUMENTO
   Configurações globais de fonte, links, botões e imagens.
   ============================================================ */
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--wh);color:var(--blk);overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;font-family:var(--fb)}
img{max-width:100%;display:block}

/* ============================================================
   SISTEMA DE "VIEWS" (PÁGINAS)
   O site é uma SPA (Single Page Application) simples: existem 3
   "views" (landing page, portal do cliente e painel ADM) dentro
   do mesmo HTML. O JavaScript alterna qual delas fica visível
   adicionando/removendo a classe .active.
   ============================================================ */
.view{display:none}.view.active{display:block}

/* ============================================================
   BARRA DE NAVEGAÇÃO (NAVBAR)
   Topo fixo (sticky) presente em todas as views, com a logo,
   links de navegação e botão de acesso à área do cliente.
   ============================================================ */
nav{position:sticky;top:0;z-index:100;background:var(--blk);padding:0 clamp(1rem,5%,3rem);display:flex;align-items:center;justify-content:space-between;height:var(--nh);border-bottom:3px solid var(--or);box-shadow:0 2px 20px rgba(255,107,0,.2)}
.nav-logo{height:46px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:clamp(.5rem,1.8vw,1.8rem);align-items:center}
.nav-links a{color:var(--g2);font-size:.875rem;font-weight:600;transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--or)}
.nav-btn{background:transparent;border:1.5px solid var(--g6);color:var(--g2);padding:.42rem 1rem;border-radius:40px;font-size:.82rem;font-weight:600;transition:all .2s;white-space:nowrap}
.nav-btn:hover{border-color:var(--or);color:var(--or)}
.hamburger{display:none;background:none;border:none;color:var(--wh);font-size:1.6rem;padding:4px}

/* ----- Menu mobile (hambúrguer) -----
   Menu que abre em telas pequenas quando o ícone ☰ é clicado. */
.mmenu{display:none;position:fixed;top:var(--nh);left:0;right:0;background:var(--g9);border-bottom:1px solid var(--g8);z-index:99;flex-direction:column;padding:1rem;gap:4px}
.mmenu.open{display:flex}
.mmenu a,.mmenu button{color:var(--g2);font-size:.95rem;padding:.75rem 1rem;border-radius:var(--rs);display:block;text-align:left;background:transparent;width:100%;font-family:var(--fb);font-weight:600}
.mmenu a:hover,.mmenu button:hover{background:var(--g8);color:var(--wh)}

/* ============================================================
   SEÇÃO HERO (BANNER PRINCIPAL)
   Primeira seção da landing page: título de impacto, descrição,
   botões de ação (CTA) e a imagem do mascote.
   ============================================================ */
.hero{background:var(--blk);padding:clamp(36px,7vw,70px) clamp(1rem,5%,3.5rem) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,50px);align-items:flex-end;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 80% 50%,rgba(255,107,0,.12),transparent 70%);pointer-events:none}
.hero-text{padding-bottom:clamp(36px,6vw,64px);z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,107,0,.15);border:1px solid rgba(255,107,0,.45);color:var(--orl);font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:30px;margin-bottom:1.25rem;letter-spacing:.6px;text-transform:uppercase}
.hero-badge .dot{width:7px;height:7px;background:var(--or);border-radius:50%;animation:pulse 1.5s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-family:var(--fd);font-size:clamp(1.9rem,4.5vw,3.4rem);font-weight:900;color:var(--wh);line-height:1.1;margin-bottom:1rem;letter-spacing:-.5px}
.hero h1 .hl{color:var(--or)}
.hero-sub{color:var(--g4);font-size:clamp(.875rem,1.8vw,1rem);line-height:1.75;margin-bottom:1.75rem;max-width:460px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn-pr{background:linear-gradient(135deg,var(--or),var(--red));color:var(--wh);padding:.82rem 1.75rem;border-radius:40px;font-weight:700;font-size:.9rem;transition:all .22s;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 18px rgba(255,107,0,.4)}
.btn-pr:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,107,0,.5)}
.btn-ol{background:transparent;color:var(--wh);border:1.5px solid var(--g6);padding:.82rem 1.75rem;border-radius:40px;font-weight:600;font-size:.9rem;transition:all .22s}
.btn-ol:hover{border-color:var(--or);color:var(--or)}
.hero-stats{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap}
.stat-item{position:relative;padding-left:1rem}
.stat-item::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--or);border-radius:2px}
.stat-num{font-family:var(--fd);font-size:clamp(1.2rem,2.5vw,1.5rem);font-weight:900;color:var(--wh)}
.stat-lbl{font-size:.72rem;color:var(--g4);margin-top:1px;font-weight:500}
.hero-mascot{display:flex;align-items:flex-end;justify-content:center;z-index:1}
.mascot-img{width:clamp(200px,34vw,400px);height:auto;object-fit:contain;filter:drop-shadow(0 0 40px rgba(255,107,0,.35));animation:float 3.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ============================================================
   SEÇÕES GENÉRICAS
   Espaçamento e cabeçalhos padrão (tag + título + subtítulo)
   reaproveitados em várias seções da landing page.
   ============================================================ */
.section{padding:clamp(48px,8vw,88px) clamp(1rem,5%,3.5rem)}
.sec-hdr{text-align:center;margin-bottom:clamp(2rem,5vw,3.5rem)}
.sec-tag{display:inline-block;background:var(--orp);color:var(--or);font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:5px 16px;border-radius:30px;margin-bottom:.9rem}
.sec-title{font-family:var(--fd);font-size:clamp(1.6rem,3.5vw,2.6rem);font-weight:900;line-height:1.15;letter-spacing:-.3px}
.sec-sub{color:var(--g6);margin-top:.75rem;font-size:clamp(.875rem,1.8vw,1rem);max-width:560px;margin-left:auto;margin-right:auto;line-height:1.65}

/* ============================================================
   SEÇÃO DE PLANOS (PREÇOS)
   Cards com os planos de internet (500Mb, 700Mb, 1Gb), incluindo
   o card "destaque" (.feat) com o plano mais popular.
   ============================================================ */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.plan-card{border:2px solid var(--g2);border-radius:20px;padding:clamp(1.25rem,3vw,2rem);position:relative;transition:all .25s;background:var(--wh);display:flex;flex-direction:column}
.plan-card:hover{transform:translateY(-5px);box-shadow:var(--shl);border-color:var(--orl)}
.plan-card.feat{border-color:var(--or);background:linear-gradient(160deg,var(--blk),var(--g8));color:var(--wh)}
.plan-card.feat .plan-spd,.plan-card.feat .plan-price{color:var(--or)}
.plan-card.feat .plan-nm{color:var(--g4)}
.plan-card.feat .plan-feats li{color:var(--g2)}
.plan-card.feat .plan-feats li::before{color:var(--or)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--or),var(--red));color:var(--wh);font-size:.68rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:4px 16px;border-radius:30px;white-space:nowrap;box-shadow:0 3px 10px rgba(255,107,0,.4)}
.plan-spd{font-family:var(--fd);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:var(--blk);line-height:1}
.plan-spd span{font-size:.9rem;font-weight:600;color:var(--g6)}
.plan-nm{font-weight:700;font-size:.88rem;color:var(--g6);margin-bottom:1rem;margin-top:2px}
.plan-price{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:900;color:var(--or)}
.plan-price small{font-size:.82rem;font-weight:500;color:var(--g6);font-family:var(--fb)}
.plan-pts-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,107,0,.08);border:1px solid rgba(255,107,0,.25);color:var(--or);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:20px;margin:.75rem 0;flex-wrap:wrap}
.plan-feats{list-style:none;margin:0 0 1rem;display:flex;flex-direction:column;gap:9px;flex:1}
.plan-feats li{font-size:.875rem;display:flex;align-items:flex-start;gap:8px;font-weight:500}
.plan-feats li::before{content:"✓";color:var(--ok);font-weight:800;flex-shrink:0;margin-top:1px}
.btn-plan{width:100%;padding:.82rem;border-radius:40px;font-weight:700;font-size:.88rem;transition:all .22s;background:linear-gradient(135deg,var(--or),var(--red));color:var(--wh);margin-top:auto;box-shadow:0 3px 14px rgba(255,107,0,.3)}
.btn-plan:hover{transform:translateY(-1px);box-shadow:0 5px 20px rgba(255,107,0,.4)}
.btn-plan.ol{background:transparent;border:2px solid var(--or);color:var(--or);box-shadow:none}
.btn-plan.ol:hover{background:var(--or);color:var(--wh)}

/* ============================================================
   SEÇÃO DE SERVIÇOS (FUNDO ESCURO)
   Grade de cards descrevendo os serviços oferecidos
   (fibra, suporte VIP, cabeamento, etc).
   ============================================================ */
.sec-dark{background:var(--g9);color:var(--wh)}
.sec-dark .sec-title{color:var(--wh)}
.sec-dark .sec-tag{background:rgba(255,107,0,.15)}
.srv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.srv-card{background:var(--g8);border:1px solid var(--g7);border-radius:var(--r);padding:1.6rem;transition:all .22s}
.srv-card:hover{border-color:var(--or);transform:translateY(-3px)}
.srv-icon{font-size:2rem;margin-bottom:.875rem}
.srv-card h3{font-weight:700;margin-bottom:.4rem;font-size:.95rem;color:var(--wh)}
.srv-card p{color:var(--g4);font-size:.845rem;line-height:1.6}

/* ============================================================
   SEÇÃO "PROGRAMA DE FIDELIDADE" (EXPLICAÇÃO DE PONTOS)
   Cards explicando como o cliente ganha pontos (pagar em dia,
   antecipar, indicar amigos, aniversário, ativação de plano)
   e o bloco de conversão de pontos em reais.
   ============================================================ */
.pts-section{background:linear-gradient(135deg,var(--blk),#1a0800);padding:clamp(48px,8vw,88px) clamp(1rem,5%,3.5rem)}
.pts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;margin-top:2.5rem}
.pts-card{background:rgba(255,107,0,.08);border:1px solid rgba(255,107,0,.2);border-radius:16px;padding:1.5rem;transition:all .22s;text-align:center}
.pts-card:hover{background:rgba(255,107,0,.14);border-color:rgba(255,107,0,.4);transform:translateY(-3px)}
.pts-card-icon{font-size:2.2rem;margin-bottom:.75rem}
.pts-card h3{font-family:var(--fd);font-weight:800;font-size:1rem;color:var(--wh);margin-bottom:.4rem}
.pts-card p{color:var(--g4);font-size:.82rem;line-height:1.6}
.pts-val{font-family:var(--fd);font-size:1.5rem;font-weight:900;color:var(--or);margin:.4rem 0}
.pts-conv{background:linear-gradient(135deg,var(--or),var(--red));border-radius:20px;padding:2rem;margin-top:2.5rem;text-align:center;position:relative;overflow:hidden}
.pts-conv::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;background:rgba(255,255,255,.07);border-radius:50%;pointer-events:none}
.pts-conv h3{font-family:var(--fd);font-size:clamp(1.2rem,3vw,1.8rem);font-weight:900;color:var(--wh);margin-bottom:.5rem}
.pts-conv p{color:rgba(255,255,255,.88);font-size:clamp(.875rem,2vw,1rem)}
.pts-conv .eq{font-family:var(--fd);font-size:clamp(2rem,5vw,3rem);font-weight:900;color:var(--wh);margin:.75rem 0;display:block}

/* ============================================================
   BANNER DE PROMOÇÃO (INDICAÇÃO DE AMIGOS)
   Faixa colorida de destaque chamando para o programa de indicação.
   ============================================================ */
.promo-banner{background:linear-gradient(120deg,var(--ord),var(--or) 45%,var(--red));border-radius:20px;padding:clamp(1.5rem,5vw,3rem);margin:0 clamp(1rem,5%,3.5rem) clamp(40px,7vw,80px);display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;overflow:hidden;position:relative}
.promo-banner::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;background:rgba(255,255,255,.07);border-radius:50%;pointer-events:none}
.promo-txt{flex:1;min-width:220px;z-index:1}
.promo-txt h2{font-family:var(--fd);font-size:clamp(1.3rem,3vw,2rem);font-weight:900;color:var(--wh);margin-bottom:.4rem}
.promo-txt p{color:rgba(255,255,255,.88);font-size:clamp(.85rem,1.8vw,1rem)}
.promo-cta{background:var(--wh);color:var(--or);padding:.9rem 2rem;border-radius:40px;font-weight:800;font-size:.92rem;white-space:nowrap;transition:transform .2s;flex-shrink:0;z-index:1;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.promo-cta:hover{transform:scale(1.04)}

/* ============================================================
   SEÇÃO DO MASCOTE ("Conheça o Net")
   Apresenta o mascote da marca e reforça os diferenciais do serviço.
   ============================================================ */
.msc-section{background:linear-gradient(135deg,var(--blk) 55%,var(--g8));padding:clamp(40px,7vw,80px) clamp(1rem,5%,3.5rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,60px);align-items:center;overflow:hidden;position:relative}
.msc-section::before{content:"";position:absolute;top:-60px;right:30%;width:300px;height:300px;background:radial-gradient(circle,rgba(255,107,0,.08),transparent 70%);pointer-events:none}
.msc-img{width:clamp(180px,30vw,360px);margin:0 auto;filter:drop-shadow(0 0 50px rgba(255,107,0,.4));animation:float 4s ease-in-out infinite}
.msc-text h2{font-family:var(--fd);font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:900;color:var(--wh);line-height:1.2;margin-bottom:1rem}
.msc-text h2 .hl{color:var(--or)}
.msc-text p{color:var(--g4);line-height:1.75;margin-bottom:1.5rem;font-size:clamp(.875rem,1.8vw,1rem)}
.msc-feats{display:flex;flex-direction:column;gap:10px;margin-bottom:1.75rem}
.msc-feat{display:flex;align-items:center;gap:12px;color:var(--g2);font-size:.9rem;font-weight:500}
.msc-fi{width:36px;height:36px;background:rgba(255,107,0,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;border:1px solid rgba(255,107,0,.3)}

/* ============================================================
   SEÇÃO DE ATENDIMENTO
   Cards com os canais de contato (WhatsApp, telefone, loja, e-mail).
   ============================================================ */
.atd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr));gap:14px}
.atd-card{background:var(--g1);border-radius:var(--r);padding:1.4rem 1rem;text-align:center;transition:all .22s;border:1px solid transparent}
.atd-card:hover{background:var(--orp);border-color:rgba(255,107,0,.25);transform:translateY(-2px)}
.atd-icon{font-size:2rem;margin-bottom:.75rem}
.atd-card h4{font-weight:700;margin-bottom:5px;font-size:.92rem}
.atd-card p{font-size:.82rem;color:var(--g6);line-height:1.5}

/* ============================================================
   SEÇÃO DO APLICATIVO MÓVEL
   Mostra "mockups" de telas de celular e botões para as lojas
   de aplicativos (App Store / Google Play).
   ============================================================ */
.app-sec{background:var(--g9);padding:clamp(48px,8vw,88px) clamp(1rem,5%,3.5rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,60px);align-items:center}
.phones{display:flex;justify-content:center;align-items:flex-end;gap:10px}
.phone{width:clamp(85px,13vw,130px);background:var(--g8);border-radius:20px;border:2px solid var(--g7);padding:9px;aspect-ratio:9/19;display:flex;flex-direction:column}
.p-screen{background:var(--or);border-radius:13px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.p-ico{font-size:clamp(1rem,2.5vw,1.8rem);color:var(--wh)}
.p-lbl{font-size:clamp(.4rem,.9vw,.58rem);color:rgba(255,255,255,.9);font-weight:700}
.phone:nth-child(2){transform:scale(1.1) translateY(-12px);z-index:2}
.phone:nth-child(2) .p-screen{background:var(--g7);border:1px solid var(--or)}
.app-txt h2{font-family:var(--fd);font-size:clamp(1.5rem,3.2vw,2rem);font-weight:900;color:var(--wh);margin-bottom:.875rem}
.app-txt p{color:var(--g4);line-height:1.75;margin-bottom:1.5rem;font-size:clamp(.875rem,1.8vw,1rem)}
.app-btns{display:flex;gap:10px;flex-wrap:wrap}
.store-btn{background:var(--g8);border:1px solid var(--g7);color:var(--wh);padding:10px 16px;border-radius:12px;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:8px;transition:all .2s}
.store-btn:hover{border-color:var(--or)}

/* ============================================================
   RODAPÉ (FOOTER)
   Logo, descrição da empresa, links institucionais e informações
   legais (CNPJ, LGPD).
   ============================================================ */
footer{background:var(--blk);color:var(--g4);padding:clamp(40px,6vw,64px) clamp(1rem,5%,3.5rem) 28px;border-top:1px solid var(--g8)}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(1.5rem,4vw,40px);margin-bottom:36px}
.ft-logo{height:40px;width:auto;object-fit:contain;margin-bottom:1rem}
.ft-brand p{font-size:.845rem;line-height:1.7;max-width:260px}
footer h5{color:var(--wh);font-weight:700;margin-bottom:1rem;font-size:.875rem}
footer ul{list-style:none;display:flex;flex-direction:column;gap:7px}
footer li a{font-size:.82rem;transition:color .2s}
footer li a:hover{color:var(--or)}
.ft-bottom{border-top:1px solid var(--g8);padding-top:20px;display:flex;justify-content:space-between;font-size:.78rem;flex-wrap:wrap;gap:8px}

/* ============================================================
   MODAL DE LOGIN (ÁREA DO CLIENTE)
   Janela sobreposta (overlay) onde o cliente digita o CPF
   para acessar o portal. A classe .ov é genérica para qualquer
   overlay (login, modais, etc).
   ============================================================ */
.ov{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:1rem}
.ov.open{display:flex}
.lbox{background:var(--wh);border-radius:24px;padding:clamp(1.5rem,5vw,2.5rem);width:100%;max-width:420px;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.lbox-logo{height:52px;margin:0 auto .5rem;object-fit:contain}
.lbox h2{text-align:center;font-family:var(--fd);font-size:1.15rem;font-weight:800;margin-bottom:.3rem}
.lbox-sub{text-align:center;color:var(--g6);font-size:.85rem;margin-bottom:1.5rem}
.fgrp{margin-bottom:1.1rem}
.fgrp label{display:block;font-size:.85rem;font-weight:700;margin-bottom:5px}
.fgrp input{width:100%;padding:.82rem 1rem;border:2px solid var(--g2);border-radius:12px;font-family:var(--fb);font-size:1rem;transition:border-color .2s;outline:none}
.fgrp input:focus{border-color:var(--or)}
.btn-login{width:100%;padding:.95rem;background:linear-gradient(135deg,var(--or),var(--red));color:var(--wh);border-radius:40px;font-weight:800;font-size:1rem;transition:all .22s;margin-top:.4rem;box-shadow:0 4px 16px rgba(255,107,0,.35)}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(255,107,0,.45)}
.lbox-close{position:absolute;top:.875rem;right:.875rem;background:var(--g1);border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lbox-close:hover{background:var(--g2)}
.ldemo{margin-top:1.25rem;background:var(--orp);border-radius:12px;padding:.875rem 1rem;font-size:.8rem;border:1px solid rgba(255,107,0,.2)}
.ldemo strong{display:block;margin-bottom:7px;color:var(--or);font-weight:800}
.ldrow{display:flex;justify-content:space-between;margin-bottom:5px;align-items:center;gap:8px}
.lcpf{font-family:monospace;cursor:pointer;color:var(--ord);font-weight:700}
.lcpf:hover{text-decoration:underline}
.lerr{color:var(--red);font-size:.78rem;margin-top:4px;display:none;font-weight:600}

/* ============================================================
   PORTAL DO CLIENTE — LAYOUT GERAL
   Estrutura de duas colunas: menu lateral (sidebar) fixo à
   esquerda e conteúdo principal à direita.
   ============================================================ */
.portal-layout{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - var(--nh))}
.sidebar{background:var(--blk);padding:1.5rem 0;border-right:1px solid var(--g8);position:sticky;top:var(--nh);align-self:start;height:calc(100vh - var(--nh));overflow-y:auto;display:flex;flex-direction:column}
.sb-user{padding:0 1.25rem 1.25rem;border-bottom:1px solid var(--g8);margin-bottom:.75rem}
.sb-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--or),var(--red));display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:900;color:var(--wh);font-size:1rem;margin-bottom:9px;box-shadow:0 2px 12px rgba(255,107,0,.4)}
.sb-name{color:var(--wh);font-weight:700;font-size:.9rem}
.sb-plan{color:var(--g4);font-size:.78rem;margin-top:2px}
.sb-pts{display:inline-flex;align-items:center;gap:5px;margin-top:8px;background:rgba(255,107,0,.12);color:var(--or);padding:3px 10px;border-radius:30px;font-size:.78rem;font-weight:700;border:1px solid rgba(255,107,0,.25)}
.sb-real{display:inline-flex;align-items:center;gap:5px;margin-top:4px;background:rgba(29,185,84,.1);color:var(--ok);padding:2px 9px;border-radius:30px;font-size:.72rem;font-weight:700;border:1px solid rgba(29,185,84,.2)}
.sb-nav{list-style:none;padding:0 .6rem;flex:1}
.sb-nav li button{display:flex;align-items:center;gap:10px;padding:.7rem .875rem;border-radius:10px;color:var(--g4);font-size:.845rem;font-weight:600;transition:all .2s;width:100%;background:none;text-align:left}
.sb-nav li button:hover{background:var(--g8);color:var(--wh)}
.sb-nav li button.act{background:rgba(255,107,0,.12);color:var(--or);border-left:3px solid var(--or);padding-left:calc(.875rem - 3px)}
.sb-logout{padding:.75rem}
.btn-out{width:100%;padding:.7rem;background:transparent;border:1px solid var(--g7);color:var(--g4);border-radius:10px;font-size:.845rem;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600}
.btn-out:hover{border-color:var(--red);color:var(--red)}

/* ----- Menu inferior (mobile) -----
   Em telas pequenas a sidebar é escondida e substituída por
   uma barra de navegação fixa na parte inferior da tela. */
.mob-bnav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--blk);border-top:1px solid var(--g8);z-index:90;padding:6px 0 max(6px,env(safe-area-inset-bottom))}
.mob-bnav ul{list-style:none;display:flex;justify-content:space-around;align-items:center}
.mob-bnav li button{background:none;border:none;color:var(--g4);display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 8px;font-size:.6rem;font-weight:600;transition:color .2s}
.mob-bnav li button .bi{font-size:1.3rem}
.mob-bnav li button.act{color:var(--or)}

/* ----- Área de conteúdo das abas do portal -----
   Cada "aba" (.ptab) representa uma seção do portal:
   Dashboard, Boletos, Extrato, Lojinha e Meu Plano.
   Apenas a aba com classe .active fica visível. */
.pcontent{padding:clamp(1rem,3vw,2rem);background:var(--g1);min-height:calc(100vh - var(--nh))}
.ptab{display:none}.ptab.active{display:block}
.ptitle{font-family:var(--fd);font-size:clamp(1.2rem,3vw,1.5rem);font-weight:900;margin-bottom:1.25rem}
.ptitle span{color:var(--or)}

/* ----- Cards de resumo (Dashboard) -----
   Pequenos cartões com números (plano atual, pontos, crédito,
   pagamentos em dia). A classe .dc é "dashboard card". */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px;margin-bottom:1.5rem}
.dc{background:var(--wh);border-radius:var(--r);padding:1.25rem;border:1px solid var(--g2);position:relative;overflow:hidden}
.dc-ico{position:absolute;top:.875rem;right:.875rem;font-size:1.3rem;opacity:.2}
.dc-lbl{font-size:.72rem;color:var(--g6);font-weight:600;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.dc-val{font-family:var(--fd);font-size:clamp(1.4rem,3vw,1.8rem);font-weight:900}
.dc-val.or{color:var(--or)}.dc-val.ok{color:var(--ok)}
.dc-sub{font-size:.72rem;color:var(--g4);margin-top:3px}
.dc.pts{background:var(--blk);border-color:rgba(255,107,0,.4)}
.dc.pts .dc-lbl{color:var(--g4)}.dc.pts .dc-val{color:var(--or)}.dc.pts .dc-sub{color:var(--g4)}
.dc.rl{background:#0a1f0f;border-color:rgba(29,185,84,.4)}
.dc.rl .dc-lbl{color:var(--g4)}.dc.rl .dc-val{color:var(--ok)}.dc.rl .dc-sub{color:var(--g4)}

/* ----- Tabelas (boletos, extrato, clientes, resgates) -----
   Cartão com cabeçalho + tabela com rolagem horizontal
   automática em telas pequenas (.tscroll). */
.tcard{background:var(--wh);border-radius:var(--r);border:1px solid var(--g2);overflow:hidden}
.tcard-hdr{padding:1rem 1.25rem;border-bottom:1px solid var(--g2);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.tcard-hdr h3{font-weight:700;font-size:.95rem;font-family:var(--fd)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:400px}
th,td{padding:.8rem 1.1rem;text-align:left;font-size:.845rem}
th{background:var(--g1);font-weight:700;color:var(--g6);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
tr:not(:last-child) td{border-bottom:1px solid var(--g1)}
tr:hover td{background:var(--g1)}
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:30px;font-size:.72rem;font-weight:700;white-space:nowrap}
.bg-ok{background:var(--okbg);color:#15A449}.bg-or{background:var(--orp);color:var(--ord)}
.bg-red{background:var(--dbg);color:var(--redd)}.bg-gy{background:var(--g1);color:var(--g6)}
.btn-dl{background:var(--orp);color:var(--or);border:none;padding:5px 12px;border-radius:20px;font-size:.78rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;transition:all .2s;white-space:nowrap;cursor:pointer}
.btn-dl:hover{background:var(--or);color:var(--wh)}

/* ============================================================
   LOJINHA DE PRÊMIOS (RESGATE DE PONTOS)
   Cabeçalho mostrando o saldo de pontos/crédito e a grade de
   prêmios disponíveis para troca.
   ============================================================ */
.loja-hdr{background:var(--blk);border-radius:var(--r);padding:clamp(1.1rem,3vw,1.75rem);margin-bottom:1.25rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;border:1px solid rgba(255,107,0,.3)}
.saldo-row{display:flex;align-items:center;gap:.875rem}
.saldo-ico{font-size:2.2rem}
.saldo-lbl{color:var(--g4);font-size:.82rem;margin-bottom:2px;font-weight:500}
.saldo-val{font-family:var(--fd);font-size:clamp(1.6rem,4vw,2rem);font-weight:900;color:var(--or)}
.saldo-eq{color:var(--ok);font-size:.88rem;font-weight:700;margin-top:2px}
.loja-info p{color:var(--g4);font-size:.82rem;text-align:right;line-height:1.6}
.loja-info strong{color:var(--wh)}
.premios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:14px}
.premio-card{background:var(--wh);border-radius:var(--r);border:1px solid var(--g2);overflow:hidden;transition:all .25s;display:flex;flex-direction:column}
.premio-card:hover{transform:translateY(-4px);box-shadow:var(--shl);border-color:var(--orl)}
.premio-card.no-pts{opacity:.5;pointer-events:none}
.premio-img{height:110px;background:linear-gradient(135deg,var(--g1),var(--orp));display:flex;align-items:center;justify-content:center;font-size:3.2rem}
.premio-body{padding:.875rem;flex:1;display:flex;flex-direction:column}
.premio-nm{font-weight:700;font-size:.875rem;margin-bottom:3px;font-family:var(--fd)}
.premio-desc{font-size:.76rem;color:var(--g6);margin-bottom:.875rem;line-height:1.5;flex:1}
.premio-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;flex-wrap:wrap;gap:4px}
.premio-pts{font-weight:800;color:var(--or);font-size:.82rem}
.premio-real{font-size:.72rem;color:var(--ok);font-weight:600}
.btn-resg{background:linear-gradient(135deg,var(--or),var(--red));color:var(--wh);padding:5px 12px;border-radius:20px;font-size:.78rem;font-weight:700;transition:all .2s;cursor:pointer}
.btn-resg:hover{transform:scale(1.05)}
.btn-resg:disabled{background:var(--g2);color:var(--g4);cursor:not-allowed;transform:none}

/* ============================================================
   NOTIFICAÇÕES "TOAST"
   Pequenas mensagens temporárias no canto da tela usadas para
   dar feedback ao usuário (ex: "Resgate solicitado!").
   ============================================================ */
.toast-wrap{position:fixed;bottom:clamp(70px,12vw,24px);right:16px;z-index:999;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 32px)}
.toast{background:var(--blk);color:var(--wh);padding:.875rem 1.1rem;border-radius:var(--r);min-width:min(280px,calc(100vw - 32px));border-left:3px solid var(--or);font-size:.845rem;animation:slideIn .3s ease;display:flex;align-items:center;gap:9px;box-shadow:var(--shl)}
.toast.ok{border-left-color:var(--ok)}.toast.err{border-left-color:var(--red)}
@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ============================================================
   PAINEL ADMINISTRATIVO (ADM)
   Barra de navegação própria, abas (Notificações, Clientes,
   Resgates) e lista de notificações em tempo real.
   ============================================================ */
.adm-nav{background:var(--g9);border-bottom:3px solid var(--red);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,5%,3rem);height:56px;flex-wrap:wrap;gap:8px;min-height:56px}
.adm-brand{font-family:var(--fd);font-weight:900;color:var(--wh);display:flex;align-items:center;gap:8px;font-size:clamp(.8rem,2.5vw,1rem)}
.badge-adm{background:var(--red);color:var(--wh);font-size:.68rem;padding:2px 8px;border-radius:6px;font-weight:800}
.adm-tabs{display:flex;gap:2px;overflow-x:auto}
.adm-tab{background:none;border:none;color:var(--g4);padding:5px 14px;border-radius:var(--rs);font-size:.845rem;transition:all .2s;cursor:pointer;white-space:nowrap;font-weight:600}
.adm-tab:hover{color:var(--wh)}.adm-tab.act{background:var(--g8);color:var(--wh)}
.adm-content{padding:clamp(1rem,3vw,2rem) clamp(1rem,5%,3rem);background:var(--g1);min-height:calc(100vh - 130px)}
.adm-sec{display:none}.adm-sec.active{display:block}
.notif-list{display:flex;flex-direction:column;gap:10px}
.notif-item{background:var(--wh);border-radius:var(--r);padding:.875rem 1.25rem;border:1px solid var(--g2);border-left:3px solid var(--or);display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.notif-item:hover{box-shadow:var(--sh)}.notif-item.unread{background:var(--orp)}
.notif-dot{width:8px;height:8px;background:var(--or);border-radius:50%;flex-shrink:0;margin-top:4px}
.notif-txt{flex:1;min-width:0}
.notif-txt strong{font-weight:700;font-size:.875rem;display:block;word-break:break-word}
.notif-txt p{font-size:.78rem;color:var(--g6);margin-top:2px}
.notif-time{font-size:.72rem;color:var(--g4);white-space:nowrap;flex-shrink:0}
.adm-sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:14px;margin-bottom:1.5rem}

/* ============================================================
   MODAL DE CONFIRMAÇÃO DE RESGATE
   Janela que pergunta "Deseja resgatar este prêmio?" antes de
   confirmar a troca de pontos.
   ============================================================ */
.modal-ov{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.75);align-items:center;justify-content:center;padding:1rem}
.modal-ov.open{display:flex}
.modal-box{background:var(--wh);border-radius:24px;padding:clamp(1.5rem,5vw,2rem);width:100%;max-width:400px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.3)}
.modal-ico{font-size:2.8rem;margin-bottom:.875rem}
.modal-box h3{font-family:var(--fd);font-weight:800;font-size:1.15rem;margin-bottom:.4rem}
.modal-box p{color:var(--g6);font-size:.875rem;margin-bottom:1.4rem;line-height:1.6}
.modal-btns{display:flex;gap:10px}
.modal-btns button{flex:1;padding:.8rem;border-radius:40px;font-weight:700;font-size:.875rem}
.btn-cfm{background:linear-gradient(135deg,var(--or),var(--red));color:var(--wh)}
.btn-cfm:hover{transform:translateY(-1px)}
.btn-cnl{background:var(--g1);color:var(--g6)}
.btn-cnl:hover{background:var(--g2)}

/* ============================================================
   RESPONSIVIDADE (MEDIA QUERIES)
   Ajustes de layout para tablets (1024px), tablets pequenos /
   celulares grandes (768px), celulares (480px) e celulares
   muito pequenos (360px). "Mobile first" invertido: o layout
   padrão é desktop e aqui adaptamos para telas menores.
   ============================================================ */
@media(max-width:1024px){.ft-grid{grid-template-columns:1fr 1fr}.portal-layout{grid-template-columns:200px 1fr}}
@media(max-width:768px){
  .nav-links{display:none}.hamburger{display:block}
  .hero{grid-template-columns:1fr;text-align:center;align-items:center;padding-bottom:clamp(24px,5vw,40px)}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-btns{justify-content:center}.hero-stats{justify-content:center}
  .hero-mascot{justify-content:center;padding-top:1rem}
  .mascot-img{width:clamp(160px,55vw,280px)}
  .app-sec{grid-template-columns:1fr;text-align:center}.app-btns{justify-content:center}
  .phones{order:-1}
  .msc-section{grid-template-columns:1fr;text-align:center}.msc-img{order:-1}.msc-feats{align-items:center}
  .portal-layout{grid-template-columns:1fr}.sidebar{display:none}
  .pcontent{padding-bottom:80px}.mob-bnav{display:block}
  .toast-wrap{bottom:76px}
  .adm-nav{height:auto;padding:10px clamp(1rem,4%,2rem)}.adm-tabs{width:100%;overflow-x:auto}
}
@media(max-width:480px){
  :root{--nh:60px}
  .plans-grid{grid-template-columns:1fr;max-width:360px;margin:0 auto}
  .srv-grid{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}
  .promo-cta{width:100%;text-align:center}
  .dash-grid{grid-template-columns:1fr 1fr}
  .premios-grid{grid-template-columns:1fr 1fr}
  .loja-hdr{flex-direction:column;align-items:flex-start}
  th,td{padding:.65rem .75rem;font-size:.8rem}
}
@media(max-width:360px){
  .srv-grid{grid-template-columns:1fr}.premios-grid{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;align-items:center}.hero-btns button{width:100%;justify-content:center}
}