/* Celular (ate 520px). Carregado com media="(max-width:520px)"; de 521px para cima nada daqui vale. */
:root{
  --c-fundo:#050C1C;--c-fundo-2:#081430;--c-cartao:#0B1730;
  --c-texto:#E9EEF7;--c-texto-2:#B6C2D6;--c-texto-3:#8C99AF;
  --c-azul:#2479FF;--c-azul-claro:#8FB4FF;--c-teal:#5EE0C6;
  color-scheme:dark;
}
body{background:var(--c-fundo);color:var(--c-texto)}
.so-cel{display:revert}
.so-pc{display:none!important}

/* Selo: pilula de vidro com ponto azul */
.c-selo{display:inline-block;font-family:var(--font-sans);font-weight:500;font-size:12.5px;color:var(--c-texto);padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}
.c-selo::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-azul);margin-right:8px;vertical-align:1px;box-shadow:0 0 8px var(--c-azul)}

/* Botoes */
.c-btn{display:block;text-align:center;background:#fff;color:#04132E;font-weight:600;font-size:15px;padding:15px;border-radius:999px;margin:0 8px;white-space:nowrap;text-decoration:none}
.c-btn2{display:block;text-align:center;color:#fff;font-size:14px;padding:14px;border-radius:999px;margin:10px 8px 0;border:1px solid rgba(255,255,255,.22);white-space:nowrap;text-decoration:none}

/* Titulo, lead e secao */
.c-h2{font-size:28px;line-height:1.12;font-weight:500;letter-spacing:-.025em;color:#fff;margin:12px 0 8px}
.c-lead{font-size:14.5px;line-height:1.55;color:#9AA7BD;margin:0 0 26px}
.c-sec{padding:60px 24px;border-top:1px solid rgba(255,255,255,.06)}
.c-sec.alt{background:var(--c-fundo-2)}

/* ---------- Task 3: barra do topo, primeira tela com foto e painel na segunda tela ---------- */

/* Barra do topo da home e do catalogo: transparente no alto, logo branco e botao de menu.
   O celular.js poe .solida quando a primeira tela sai de vista (scrollY > 70% da tela). */
:is(.home,.catalogo) .nav,:is(.home,.catalogo) .nav.stuck{
  margin-bottom:-65px;background:transparent;border-bottom:1px solid transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background-color .25s ease,border-color .25s ease;
}
:is(.home,.catalogo) .nav.solida,:is(.home,.catalogo) .nav.menu-aberto{
  background:rgba(5,12,28,.78);border-bottom-color:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
:is(.home,.catalogo) .nav.menu-aberto{background:rgba(5,12,28,.94)}
:is(.home,.catalogo) .nav-in{position:relative;padding-inline:20px}
:is(.home,.catalogo) .nav-logo img{height:20px}
:is(.home,.catalogo) .nav .btn-primary,:is(.home,.catalogo) .nav-links{display:none}
.c-menu{
  display:flex;align-items:center;justify-content:center;margin-left:auto;margin-right:-11px;
  width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.c-menu span{display:block;width:22px;height:12px;border-top:1.5px solid #fff;border-bottom:1.5px solid #fff;transition:transform .2s ease}
.menu-aberto .c-menu span{transform:scaleY(.6)}
:is(.home,.catalogo) .nav-curto{display:none}
:is(.home,.catalogo) .nav.menu-aberto .nav-curto{
  display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;
  padding:6px 20px 14px;background:rgba(5,12,28,.94);border-bottom:1px solid rgba(255,255,255,.08);
}
:is(.home,.catalogo) .nav.menu-aberto .nav-curto a{
  font-size:16px;font-weight:500;color:#E9EEF7;padding:13px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
:is(.home,.catalogo) .nav.menu-aberto .nav-curto a:first-child{border-top:0}

/* Primeira tela: a foto ocupa a tela inteira atras da barra; o texto fica no alto
   e o monitor aceso, no terco de baixo, fica livre. */
.c-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  padding:104px 26px 0;text-align:center;color:#E9EEF7;
  background:#050C1C url(hero-celular.webp) center bottom/cover no-repeat;
}
.c-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,12,28,.55) 0%,rgba(5,12,28,0) 45%,rgba(5,12,28,0) 80%,#050C1C 100%);
}
.c-h1{font-size:40px;line-height:1.06;font-weight:500;letter-spacing:-.03em;color:#fff;margin:12px 0 14px;text-wrap:balance}
.c-sub{font-size:15.5px;line-height:1.5;color:#D5DEEC;margin:0 auto 22px;max-width:300px;text-wrap:balance}
.c-hero .c-sub{white-space:nowrap;font-size:min(15.5px,3.6vw);max-width:none}

/* Segunda tela: a .hero-painel vira o painel escuro, com o cabecalho do celular */
.hero-painel{
  min-height:0;display:block;padding:44px 0 60px;background:#050C1C;
  --surface:#0B1730;--canvas:rgba(255,255,255,.03);
  --ink:#FFFFFF;--ink-soft:#B6C2D6;--steel:#7F8CA3;
  --hairline-soft:rgba(255,255,255,.06);
  --navy:#8FB4FF;--signal:#00A88E;--signal-ink:#5EE0C6;
}
.hero-painel>.wrap{padding-inline:24px}
.hero-painel .hero-grid{gap:0}
.c-painel-txt{margin-bottom:26px}
.c-painel-txt .c-h2{text-wrap:balance}
.c-painel-txt .c-lead{margin-bottom:0}
.hero-painel .widget-stage::before{display:none}
.hero-painel .widget{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),#0B1730;
  border:1px solid rgba(255,255,255,.12);border-radius:18px;
  box-shadow:0 -20px 60px rgba(36,121,255,.25);
}
.hero-painel .widget::after{display:none}
.hero-painel .mac-bar{background:transparent;border-bottom:1px solid rgba(255,255,255,.06);box-shadow:none;height:36px}
.hero-painel .mac-dots{gap:5px}
.hero-painel .mac-dots i{width:7px;height:7px;background:rgba(255,255,255,.25);box-shadow:none}
.hero-painel .mac-title{font-family:var(--font-mono);font-size:10.5px;color:#7F8CA3;letter-spacing:.02em}
.hero-painel .agora{background:linear-gradient(180deg,rgba(36,121,255,.08),transparent 78%)}
.hero-painel .prog{background:rgba(255,255,255,.1)}
.hero-painel .prog span{background:linear-gradient(90deg,#2479FF 0%,#00A88E 100%)}
.hero-painel .prog span::after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.28) 50%,transparent 100%)}

/* ---------- Task 4: rotinas e conversa curta do Virtual Bot ---------- */
.c-rotinas .c-lead{margin-bottom:18px}
.it{border-top:1px solid rgba(255,255,255,.14);padding:18px 0}
.it h4{margin:0 0 6px;font-size:18px;font-weight:500;color:#fff}
.it p{margin:0;font-size:14.5px;line-height:1.5;color:#B6C2D6}
.c-rotinas .c-btn2{margin:8px 0 0}
.c-bot .c-lead{margin-bottom:0}
.c-bot .c-btn{margin:18px 0 0}
.chat{margin-top:22px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0B1730}
.chat .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.chat .hd img{width:32px;height:32px;border-radius:50%}
.chat .hd b{display:block;font-size:13.5px;font-weight:500;color:#fff}
.chat .hd span{font-size:11px;color:#5EE0C6}
.chat .bd{padding:14px 12px 16px;display:flex;flex-direction:column;gap:8px}
.bb{max-width:82%;font-size:13.5px;line-height:1.42;padding:9px 12px 7px;border-radius:14px}
.bb small{display:block;text-align:right;font-size:10.5px;opacity:.65;margin-top:3px}
.bb.in{background:#16264A;color:#E9EEF7;border-top-left-radius:4px}
.bb.out{align-self:flex-end;background:#003B95;color:#fff;border:1px solid rgba(36,121,255,.45);border-top-right-radius:4px}
.bb.in b{color:#5EE0C6;font-weight:500}

/* ---------- Task 5: planos, como funciona, agentes, garantias, chamada final, pop-up e rodape ---------- */
[id^="c-"]{scroll-margin-top:64px}

/* Planos: cartao curto por produto, com "Detalhes" que abre e fecha (details, sem script) */
.prod{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;margin-bottom:12px;background:rgba(255,255,255,.03)}
.prod .lv{font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--c-azul-claro);text-wrap:balance}
.prod h4{margin:8px 0 4px;font-size:18px;font-weight:500;color:#fff}
.prod>p{margin:0 0 12px;font-size:13.5px;color:#9AA7BD;line-height:1.45}
.prod .pr{font-size:13px;line-height:22px;color:var(--c-texto-2);padding-right:96px}
.prod .pr b{font-size:17px;color:#fff;font-weight:500;white-space:nowrap}
.prod .pr .rec{white-space:nowrap}
.prod details{margin-top:-33px}
.prod summary{display:block;width:max-content;min-width:44px;box-sizing:border-box;margin-left:auto;margin-bottom:-11px;padding-block:11px;list-style:none;cursor:pointer;
  font-size:12px;line-height:22px;color:var(--c-azul-claro);-webkit-tap-highlight-color:transparent}
.prod summary::-webkit-details-marker{display:none}
.prod summary::after{content:"▾";display:inline-block;margin-left:4px;transition:transform .2s ease}
.prod details[open] summary::after{transform:rotate(180deg)}
.prod details ul{margin:12px 0 0;padding:12px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.08)}
.prod details li{position:relative;padding-left:16px;font-size:13px;line-height:1.5;color:var(--c-texto-2);margin-top:6px}
.prod details li:first-child{margin-top:0}
.prod details li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--c-azul-claro)}

/* Como funciona: grade 2 x 2 */
.c-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.st{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px}
.st span{font-family:var(--font-mono);font-size:10px;color:var(--c-teal)}
.st h5{margin:8px 0 4px;font-size:14.5px;font-weight:500;color:#fff}
.st p{margin:0;font-size:12px;color:var(--c-texto-3);line-height:1.4}

/* Agentes de IA: um cartao com os tres pacotes e o botao de compra de cada um */
.ag{border-radius:20px;padding:24px 20px;background:radial-gradient(100% 80% at 100% 0%,rgba(36,121,255,.35),transparent 60%),#0B1B3D;border:1px solid rgba(143,180,255,.25)}
.ag .c-h2{font-size:25px}
.ag .c-lead{margin:0}
.c-agentes .ias2{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 20px}
.ia{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#04132E;font-size:12.5px;font-weight:500;padding:6px 10px 6px 7px;white-space:nowrap;border-radius:999px}
.ia img{width:16px;height:16px;border-radius:4px}
.pk{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 12px 12px 14px;margin-bottom:8px;background:rgba(255,255,255,.03)}
.pk.dest{border-color:rgba(143,180,255,.45);background:rgba(36,121,255,.10)}
.pk-t b{display:block;font-size:15px;font-weight:500;color:#fff}
.pk-t>span{font-size:11.5px;color:#9AA7BD;line-height:1.35;display:block;margin-top:2px}
.nw{white-space:nowrap}
.pk-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.pk-r em{font-style:normal;font-size:15px;font-weight:500;color:#fff;white-space:nowrap}
.pk-b{position:relative;isolation:isolate;display:inline-block;font:inherit;font-size:12px;font-weight:600;line-height:1.4;background:transparent;color:#04132E;padding:14px 12px;margin:-8px 0;border:0;-webkit-tap-highlight-color:transparent;border-radius:999px;cursor:pointer;white-space:nowrap;text-decoration:none}
/* area de toque de 44 px: a pilula branca e desenhada aqui e fica do tamanho de sempre */
.pk-b::before{content:"";position:absolute;inset:8px 0;z-index:-1;border-radius:999px;background:#fff}
.ag-nota{font-size:12.5px;line-height:1.55;text-align:center;color:var(--c-texto-2);margin:12px 0 0}
.ag .c-btn2{margin:14px 0 0}

/* Garantias */
.c-garantias{padding-bottom:40px}
.c-garantias .c-h2{text-wrap:pretty}
.trust{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.trust>div{position:relative;padding-left:24px;font-size:14px;color:#C9D3E4;line-height:1.4}
.trust>div::before{content:"✓";position:absolute;left:0;top:0;color:var(--c-teal);font-weight:600}

/* Chamada final */
.c-fim{padding:44px 24px 48px;text-align:center;background:radial-gradient(90% 60% at 50% 100%,#0E3A8A,transparent 70%),#050C1C}
.c-fim .c-h2{font-size:30px;text-wrap:balance}
.c-fim .c-sub{color:var(--c-texto-2);margin-bottom:22px}

/* Pop-up do Departamento (#mdep): o mesmo pop-up do computador, como painel que sobe de baixo */
#mdep.modal{align-items:flex-end;padding:0}
#mdep .modal-bg{background:rgba(2,6,16,.62)}
#mdep .modal-cx{
  width:100%;max-height:85vh;max-height:85svh;border:0;border-top:1px solid rgba(143,180,255,.3);
  border-radius:22px 22px 0 0;background:#0B1730;color:var(--c-texto);box-shadow:0 -20px 60px rgba(0,0,0,.45);
  padding:10px 18px calc(22px + env(safe-area-inset-bottom));animation:sobe-painel .3s cubic-bezier(.22,.8,.2,1);
}
@keyframes sobe-painel{from{transform:translateY(100%)}to{transform:none}}
#mdep .modal-cx::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin:0 auto 14px}
#mdep .modal-x{top:8px;right:8px;width:44px;height:44px;color:var(--c-texto-2);font-size:22px}
#mdep .modal-x:hover{background:rgba(255,255,255,.06);color:#fff}
#mdep .modal-olho{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--c-azul-claro)}
#mdep .modal-cx h3{font-size:22px;font-weight:500;color:#fff;margin:6px 0;letter-spacing:-.02em}
#mdep .modal-sub{font-size:12.5px;line-height:1.45;max-width:none;margin:0 0 12px;color:#9AA7BD}
#mdep .modal-lista{display:block;margin:0}
#mdep .modal-lista a{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center;
  padding:11px 0;border:0;border-top:1px solid rgba(255,255,255,.08);border-radius:0;background:none;transform:none;box-shadow:none}
#mdep .modal-lista a:hover{background:none;transform:none;box-shadow:none}
#mdep .mc-ico{display:none}
#mdep .modal-lista b{grid-column:1;grid-row:1;font-size:14.5px;font-weight:500;color:#fff}
#mdep .mc-desc{grid-column:1;grid-row:2;font-size:11.5px;line-height:1.4;color:var(--c-texto-3);margin-top:2px}
#mdep .modal-lista i{grid-column:2;grid-row:1/3;font-size:11px;font-weight:500;color:var(--c-teal);white-space:nowrap;
  border:1px solid rgba(94,224,198,.35);padding:3px 8px;border-radius:999px}

/* Rodape: o mesmo conteudo de hoje, na roupa escura */
footer{background:var(--c-fundo);color:var(--c-texto-3);border-top:1px solid rgba(255,255,255,.06);padding:30px 0 calc(34px + env(safe-area-inset-bottom))}
footer .wrap{padding-inline:24px}
.foot-in{flex-direction:column;gap:20px}
.foot-tag{color:var(--c-texto-3);font-size:13px;margin-top:12px}
.foot-links{gap:4px 20px}
.foot-links a{color:var(--c-texto-2);font-size:13px;padding:6px 0}
.foot-rule{margin-top:22px;padding-top:16px;border-top-color:rgba(255,255,255,.08);font-family:var(--font-sans);font-size:11px;letter-spacing:0;line-height:1.6;color:#7F8CA3}

/* ---------- Task 6: catalogo no celular (/catalogo), com carrossel por nivel ---------- */
.c-cat-topo{padding:96px 24px 36px;background:radial-gradient(120% 70% at 50% 0%,#0E3A8A 0%,rgba(14,58,138,0) 65%),var(--c-fundo)}
.c-voltar{display:block;width:max-content;font-size:13px;color:var(--c-texto-2);padding:10px 0;margin:-10px 0 12px;text-decoration:none}
.c-cat-topo .c-h1{font-size:34px;margin:14px 0}
.c-cat-topo .c-sub{margin:0;max-width:none;color:var(--c-texto-2)}

/* Os tres produtos: o cartao curto dos planos, com "Quero este" no lugar do "Detalhes" */
.c-cat-prods{border-top:0;padding-top:28px}
.c-cat-prods .c-h2{margin-bottom:18px}
.c-cat-prods .prod .pr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:0}
.c-quero{flex:none;font-size:12px;font-weight:600;line-height:1.4;background:#fff;color:#04132E;padding:7px 13px;border-radius:999px;white-space:nowrap;text-decoration:none}

/* Mais 18 rotinas: abas por nivel, etiquetas com o nome de cada rotina e o carrossel */
.c-cat-rotinas .c-lead{margin:0;text-wrap:pretty}
.c-abas{display:flex;gap:6px;margin:18px 0 6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px}
.c-aba{flex:1 1 auto;font:inherit;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--c-texto-2);background:none;border:0;border-radius:999px;padding:9px 2px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.c-aba i{font-style:normal;font-size:10.5px;color:#7F8CA3;margin-left:3px}
.c-aba.on{background:#fff;color:#04132E}
.c-aba.on i{color:#5F6B80}
.c-ixs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.c-ix{font:inherit;font-size:12px;line-height:1.3;color:var(--c-texto-2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.c-ix.on{background:rgba(36,121,255,.22);border-color:rgba(143,180,255,.6);color:#fff}
/* o carrossel rola sozinho com o dedo (overflow + scroll-snap); o celular.js so cuida
   das etiquetas, das setas e dos pontos */
.c-car{display:flex;gap:12px;overflow-x:auto;margin:16px -24px 0;padding:0 24px 4px;
  scroll-snap-type:x mandatory;scroll-padding-inline:24px;overscroll-behavior-x:contain;scrollbar-width:none}
.c-car::-webkit-scrollbar{display:none}
.c-cc{flex:none;width:calc(100% - 48px);box-sizing:border-box;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;
  border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.c-cc-top{display:flex;justify-content:space-between;align-items:center}
.c-ic{width:36px;height:36px;border-radius:11px;background:rgba(36,121,255,.16);color:var(--c-azul-claro);display:grid;place-items:center}
.c-ic svg{width:20px;height:20px}
.c-cc-n{font-size:11.5px;color:#7F8CA3}
.c-cc-nome{font-size:19px;line-height:1.25;font-weight:500;color:#fff;margin:4px 0 0;letter-spacing:-.01em}
.c-cc-linha{margin:0;font-size:14px;line-height:1.45;color:var(--c-texto-2);min-height:41px}
.c-cc-pr{display:flex;flex-direction:column;gap:2px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding-top:12px;font-size:13px;color:var(--c-texto-2)}
.c-cc-preco strong{font-weight:500;color:#fff;font-size:15px}
.c-cc-prazo{font-size:11.5px;color:#7F8CA3}
.c-cq{display:block;text-align:center;font-size:14px;font-weight:600;background:#fff;color:#04132E;padding:12px;border-radius:999px;margin-top:4px;white-space:nowrap;text-decoration:none}
.c-cnav{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.c-seta{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
  color:#fff;font:inherit;font-size:20px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.c-seta:disabled{opacity:.3;cursor:default}
.c-pontos{display:flex;gap:5px}
.c-pontos i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.22);transition:width .2s ease,background-color .2s ease}
.c-pontos i.on{width:18px;background:var(--c-azul-claro)}
@media (prefers-reduced-motion:reduce){.c-pontos i{transition:none}}