/* JPL Scan - base do tema
Tokens, reset, tipografia, utilitarios e secoes genericas.
Carregado em TODAS as paginas pelo layout.phtml. */

/* ==========================================================================
TOKENS
========================================================================== */

:root{
--bg:        #f5f8fd;
--bg-2:      #ffffff;
--bg-tint:   #eaf1fc;       /* very light blue tint for stripes */
--card:      #ffffff;
--line:      rgba(10,26,58,.07);
--line-2:    rgba(10,26,58,.13);

--text:      #0a1a3a;       /* deep navy (matches logo) */
--text-mid:  #4a5878;
--text-dim:  #7a89a8;

--jpl-navy:  #0f1f3d;       /* logo navy, for wordmarks / depth */
--jpl:       #1857c8;       /* JPL institutional blue (action) */
--jpl-700:   #133f9a;
--jpl-300:   #5a8bff;
--jpl-100:   #e6efff;
--cyan:      #00b3e6;       /* tech cyan accent */
--green:     #1aab63;
--rose:      #ff5b7a;       /* warm accent for variety */

--radius:    14px;
--radius-lg: 22px;
--radius-xl: 30px;

--shadow-sm: 0 1px 2px rgba(10,26,58,.06), 0 1px 0 rgba(10,26,58,.02);
--shadow:    0 4px 24px -8px rgba(10,26,58,.12), 0 1px 2px rgba(10,26,58,.05);
--shadow-lg: 0 30px 70px -30px rgba(24,87,200,.32), 0 8px 24px -12px rgba(10,26,58,.12);

--pad-x: clamp(22px, 5vw, 64px);
--max:   1320px;
}

*{ box-sizing:border-box }
/* o .nav e sticky: sem isso o topo da secao para embaixo dele ao clicar
num link do menu (inclusive no drawer mobile) */
html{ scroll-padding-top:96px }
html,body{ margin:0; padding:0;
background:var(--bg); color:var(--text);
font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;
font-feature-settings:"ss01","cv11";
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body{
background:
radial-gradient(900px 500px at 90% -200px, rgba(24,87,200,.10), transparent 60%),
radial-gradient(800px 500px at -10% 5%, rgba(0,179,230,.07), transparent 60%),
var(--bg);
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--pad-x) }
.mono{ font-family:"JetBrains Mono",ui-monospace,monospace; font-feature-settings:"ss02","ss03","calt" }

.eyebrow{
font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em;
text-transform:uppercase; color:var(--jpl); display:inline-flex; align-items:flex-start; gap:8px;
font-weight:500;
}
.eyebrow::before{
content:""; flex:0 0 18px; width:18px; height:1px; background:var(--jpl);
margin-top:.62em;   /* meia linha: alinha o traco com a 1a linha do texto */
}
.eyebrow.cyan{ color:#0190b8 } .eyebrow.cyan::before{ background:#0190b8 }
.eyebrow.rose{ color:var(--rose) } .eyebrow.rose::before{ background:var(--rose) }

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.022em; text-wrap:balance; color:var(--text) }
h1{ font-size:clamp(40px, 5.2vw, 76px); line-height:1.02; font-weight:800; letter-spacing:-.038em }
h2{ font-size:clamp(30px, 3.6vw, 52px); line-height:1.04; letter-spacing:-.03em }
h3{ font-size:22px; line-height:1.22 }
p{ margin:0; color:var(--text-mid); line-height:1.6; text-wrap:pretty }

/* ==========================================================================
BOTOES
========================================================================== */

.btn{
display:inline-flex; align-items:center; gap:8px;
height:46px; padding:0 20px; border-radius:12px;
font-weight:600; font-size:14.5px; letter-spacing:-.005em;
transition:transform .15s, background .15s, box-shadow .15s, border-color .15s, color .15s;
}
.btn-primary{
background:linear-gradient(180deg, #2a6ee0 0%, var(--jpl) 100%);
color:#fff;
box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px -10px rgba(24,87,200,.55);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 16px 32px -10px rgba(24,87,200,.65) }
.btn-ghost{
background:#fff; color:var(--text);
border:1px solid var(--line-2);
box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{ border-color:var(--jpl); color:var(--jpl) }
.btn .arrow{ transition:transform .15s }
.btn:hover .arrow{ transform:translateX(3px) }

/* ==========================================================================
SECOES (envelope generico)
========================================================================== */

section{ padding: clamp(54px, 9vw, 130px) 0; position:relative }
.sec-head{
display:grid; grid-template-columns: 1fr 1fr; gap:48px; margin-bottom:60px;
align-items:end;
}
.sec-head .lead p{ max-width:520px }
.sec-head .lead .links{ margin-top:18px; display:flex; gap:18px; flex-wrap:wrap }
.sec-head .lead .links a{ font-weight:600; font-size:13.5px; color:var(--jpl); display:inline-flex; align-items:center; gap:6px }
.sec-head .lead .links a:hover .arrow{ transform:translateX(2px) }
.sec-head .lead .links .arrow{ transition:transform .15s }

/* section background variants */
.sec-tint{ background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bg-tint) 30%, var(--bg-tint) 70%, rgba(255,255,255,0) 100%) }
.sec-white{ background:#fff }

/* ==========================================================================
SCROLL REVEAL
========================================================================== */

[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease }
[data-reveal].in{ opacity:1; transform:none }
[data-reveal-stagger] > *{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease }
[data-reveal-stagger].in > *{ opacity:1; transform:none }
[data-reveal-stagger].in > *:nth-child(2){ transition-delay:.06s }
[data-reveal-stagger].in > *:nth-child(3){ transition-delay:.12s }
[data-reveal-stagger].in > *:nth-child(4){ transition-delay:.18s }
[data-reveal-stagger].in > *:nth-child(5){ transition-delay:.24s }
[data-reveal-stagger].in > *:nth-child(6){ transition-delay:.30s }

/* ==========================================================================
RESPONSIVO

Escada usada em TODO o tema (os demais css seguem os mesmos cortes):

1280px  topo vira drawer (topo.css)
1100px  grids de duas colunas viram uma
860px  grades de card 3 -> 2 colunas
640px  celular: coluna unica
460px  celular estreito: botao ocupa a linha inteira
========================================================================== */

@media (max-width: 1100px){
.sec-head{ grid-template-columns: 1fr; gap:18px; margin-bottom:44px }
}

@media (max-width: 640px){
/* a tipografia base so escalava acima de ~770px (5.2vw/3.6vw ficavam abaixo
do minimo do clamp): no celular o titulo ficava travado em 40px */
h1{ font-size:clamp(30px, 8.6vw, 42px); letter-spacing:-.03em }
h2{ font-size:clamp(25px, 7vw, 34px); letter-spacing:-.025em }
h3{ font-size:19px }
p { line-height:1.58 }

/* os <br> dos titulos foram escolhidos para a medida do desktop; no celular
eles produzem linhas orfas ("com o app." sozinho). Deixa o texto fluir. */
h1 br, h2 br{ display:none }

.sec-head{ margin-bottom:32px }
.sec-head .lead .links{ gap:14px }
}

/* JPL Scan - componentes reaproveitaveis entre paginas.
Pareia com os partials de custom_views/components/. */

/* ==========================================================================
TRUST STRIP + BADGE PILL  (components/strip-conformidade.phtml)
========================================================================== */

.strip{
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding:20px 0; background:rgba(255,255,255,.6);
}
.strip-inner{
display:flex; align-items:center; gap:24px; flex-wrap:wrap;
color:var(--text-dim); font-family:"JetBrains Mono",monospace; font-size:12.5px;
letter-spacing:.04em;
}
.strip-label{ color:var(--text); font-weight:500 }
.badge-pill{
display:inline-flex; align-items:center; gap:8px;
padding:7px 12px; border-radius:99px; border:1px solid var(--line);
background:#fff; color:var(--text-mid); font-size:12px;
box-shadow:var(--shadow-sm);
}
.badge-pill .ch{ width:6px; height:6px; border-radius:50%; background:var(--jpl) }
.badge-pill .ch.g{ background:var(--green) }
.badge-pill .ch.c{ background:var(--cyan) }
.badge-pill .ch.r{ background:var(--rose) }

/* ==========================================================================
CARD DE MODULO / BENEFICIO  (.ext-grid)
========================================================================== */

.ext-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px }
.ext-card{
background:#fff; border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:28px 26px 26px;
position:relative; overflow:hidden;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.ext-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2) }
.ext-num{
font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--text-dim);
letter-spacing:.08em; margin-bottom:18px;
}
.ext-num b{ color:var(--jpl); font-weight:500 }
.ext-icon{
width:48px; height:48px; border-radius:12px;
background:linear-gradient(180deg, var(--jpl-100), #fff);
color:var(--jpl); display:grid; place-items:center; margin-bottom:18px;
border:1px solid var(--jpl-100);
}
.ext-icon svg{ width:24px; height:24px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round }
.ext-card h3{ font-size:19px; margin-bottom:10px; letter-spacing:-.015em }
.ext-card p{ font-size:14px; line-height:1.55 }

/* ==========================================================================
VIDEO
========================================================================== */

.video{
aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
border:1px solid var(--line); position:relative;
box-shadow:var(--shadow);
background:#0a1a3a;
}
.video iframe{
position:absolute; inset:0;
width:100%; height:100%; border:0;
}

/* ==========================================================================
BLOG / POST
========================================================================== */

.blog-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px }
.post{
border:1px solid var(--line); border-radius:var(--radius-lg);
background:#fff; overflow:hidden;
transition:transform .25s, box-shadow .25s;
display:flex; flex-direction:column;
}
.post:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.post .img{ aspect-ratio:16/10; overflow:hidden; position:relative; background:#dde5f2 }
.post .img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.post:hover .img img{ transform:scale(1.05) }
.post-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1 }
.post-meta{
font-family:"JetBrains Mono",monospace; font-size:11px;
color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase;
display:flex; gap:10px; align-items:center;
}
.post-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-dim) }
.post-meta .cat{ color:var(--jpl); font-weight:600 }
.post h3{ font-size:19px; line-height:1.25 }
.post p{ font-size:14px; flex:1 }
.post .read{ margin-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--jpl); font-weight:600 }
.post .read .arrow{ transition:transform .15s }
.post:hover .read .arrow{ transform:translateX(3px) }

/* ==========================================================================
CTA FINAL  (components/cta-final.phtml)
========================================================================== */

.cta-final{
border-radius:var(--radius-xl);
padding:clamp(40px, 5vw, 72px);
background:
radial-gradient(900px 300px at 80% 0%, rgba(0,179,230,.32), transparent 70%),
linear-gradient(135deg, var(--jpl) 0%, var(--jpl-navy) 100%);
color:#fff;
display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; align-items:center;
position:relative; overflow:hidden;
}
.cta-final::after{
content:""; position:absolute; right:-100px; bottom:-100px; width:400px; height:400px;
border-radius:50%; background:radial-gradient(circle, rgba(0,179,230,.25), transparent 70%);
}
.cta-final h2{ color:#fff; margin:0 }
.cta-final p{ color:rgba(255,255,255,.85); margin-top:14px; max-width:540px }
.cta-final .eyebrow{ color:var(--cyan) }
.cta-final .eyebrow::before{ background:var(--cyan) }
.cta-final .actions{ display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; position:relative; z-index:1 }
.cta-final .btn-primary{ background:#fff; color:var(--jpl); box-shadow:0 12px 28px -10px rgba(0,0,0,.4) }
.cta-final .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3) }
.cta-final .btn-ghost:hover{ background:rgba(255,255,255,.1); color:#fff }
.cta-final .email-action{ padding:0 }
.cta-final .email-action > a{ display:inline-flex; align-items:center; height:100%; padding:0 20px }

/* ==========================================================================
SECAO DE CONTATO + FORMULARIO DO CMS  (components/form-contato.phtml)
As classes .fld/.field/.form-* sao usadas pelo ViewScript do form-jpl
(custom_views/form-form-jpl-custom.phtml).
========================================================================== */

.contato-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px, 4vw, 64px); align-items:start }
.contato-intro p{ margin-top:16px; max-width:420px }
.contato-canais{ list-style:none; padding:0; margin:32px 0 0; display:grid; gap:14px; max-width:420px }
.contato-canais li{ display:flex; align-items:baseline; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line) }
.contato-canais span{
font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em;
text-transform:uppercase; color:var(--text-dim); min-width:92px;
}
.contato-canais a{ font-weight:600; font-size:15px; transition:color .15s }
.contato-canais a:hover{ color:var(--jpl) }

.contato-card{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
padding:clamp(24px, 3vw, 40px); box-shadow:var(--shadow);
}

/* ------------------------------------------------------------- campos */

.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.field-full{ grid-column:1 / -1 }
.field label{ display:block; margin-bottom:8px; font-size:12.5px; font-weight:600; color:var(--text-mid) }
.field label i{ font-style:normal; color:var(--rose); margin-left:3px }

.form-jpl .fld{
width:100%; height:46px; padding:0 14px;
font:inherit; font-size:14.5px; color:var(--text);
background:#fff; border:1px solid var(--line-2); border-radius:12px;
transition:border-color .15s, box-shadow .15s;
}
.form-jpl textarea.fld{ height:auto; min-height:126px; padding:12px 14px; line-height:1.55; resize:vertical }
.form-jpl .fld::placeholder{ color:var(--text-dim) }
.form-jpl .fld:focus{ outline:none; border-color:var(--jpl); box-shadow:0 0 0 4px rgba(24,87,200,.12) }
.field.is-invalid .fld{ border-color:var(--rose); box-shadow:0 0 0 4px rgba(255,91,122,.12) }

/* decorator Errors do Bootstrap3 (o app.js repete essa marcacao no envio ajax).
O glyphicon vem do Bootstrap, que este layout nao carrega. */
.field .label-danger{ display:block; margin-top:7px; font-size:12.5px; line-height:1.4; color:var(--rose) }
.field .label-danger .glyphicon{ display:none }

/* ------------------------------------------------- rodape do form + aviso */

.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:24px }
.form-nota{ font-size:12.5px; color:var(--text-dim); max-width:300px }

.form-msg{
margin-bottom:20px; padding:13px 16px; border:1px solid; border-radius:12px;
font-size:14px; line-height:1.5;
}
.form-msg[hidden]{ display:none }
.form-msg.ok{ background:rgba(26,171,99,.08); border-color:rgba(26,171,99,.30); color:#0f7a45 }
.form-msg.err{ background:rgba(255,91,122,.08); border-color:rgba(255,91,122,.35); color:#c23350 }

/* ==========================================================================
CABECALHO DE PAGINA INTERNA  (components/page-head.phtml)
========================================================================== */

.page-head{ padding: clamp(38px, 5vw, 70px) 0 clamp(22px, 3vw, 38px) }
.migalha{
display:flex; align-items:center; gap:8px; margin-bottom:24px;
font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.06em;
color:var(--text-dim);
}
.migalha a{ color:var(--text-mid); transition:color .15s }
.migalha a:hover{ color:var(--jpl) }
.page-head h1{ margin-top:18px; font-size:clamp(32px, 3.8vw, 50px); max-width:22ch }
.page-lead{ margin-top:20px; font-size:17px; max-width:640px }

/* ==========================================================================
RESPONSIVO   (cortes documentados em assets/css/base.css)
========================================================================== */

@media (max-width: 1100px){
.ext-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.blog-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.cta-final{ grid-template-columns:minmax(0,1fr) }
.cta-final .actions{ justify-content:flex-start }
.contato-grid{ grid-template-columns:minmax(0,1fr) }
}

@media (max-width: 860px){
.strip{ padding:16px 0 }
.strip-inner{ gap:10px 16px }
.page-head h1{ max-width:none }
}

@media (max-width: 640px){
.ext-grid{ grid-template-columns: minmax(0,1fr) }
.blog-grid{ grid-template-columns: minmax(0,1fr) }
.form-grid{ grid-template-columns: minmax(0,1fr) }
.form-foot{ gap:14px; margin-top:20px }
.form-foot .btn{ width:100% ; justify-content:center }
.form-nota{ max-width:none }

.ext-card{ padding:24px 22px }
.ext-card h3{ font-size:18px }

.post-body{ padding:20px }

.cta-final{ padding:clamp(28px, 7vw, 44px) }
.cta-final p{ margin-top:12px }

.page-lead{ font-size:16px; margin-top:16px }
.migalha{ margin-bottom:18px }

.contato-canais li{ flex-direction:column; gap:4px; align-items:flex-start }
.contato-canais span{ min-width:0 }

}

@media (max-width: 460px){
/* botao de largura total: dois CTAs lado a lado nao cabem mais */
.cta-final .actions{ display:grid; gap:10px }
.cta-final .actions .btn{ width:100%; justify-content:center }
.cta-final .email-action > a{ width:100%; justify-content:center }
}

/* JPL Scan - topo (custom_views/topo.phtml) */

/* ==========================================================================
NAV
========================================================================== */

.nav{
position:sticky; top:0; z-index:50;
background:rgba(245,248,253,.78);
backdrop-filter:saturate(1.4) blur(14px);
-webkit-backdrop-filter:saturate(1.4) blur(14px);
border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; gap:32px; height:76px; min-width:0 }
.brand{ display:flex; align-items:center; gap:10px }
.brand-logo{ height:40px; width:auto; display:block }
.nav-links{
display:flex; flex:1; justify-content:space-evenly; gap:4px; min-width:0;
}
.nav-links a{
padding:8px 14px; border-radius:999px; font-size:14px; font-weight:500;
color:var(--text-mid); transition:color .15s, background .15s;
white-space:nowrap;
}
.nav-links a:hover{ color:var(--text); background:rgba(24,87,200,.06) }
.nav-links a.is-current{ color:var(--jpl); background:rgba(24,87,200,.06) }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px }
.icon-btn{
width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
background:#fff; border:1px solid var(--line);
transition:background .15s, border-color .15s, transform .15s;
}
.icon-btn:hover{ border-color:var(--jpl-300); transform:translateY(-1px) }
.icon-btn svg{ width:16px; height:16px; stroke:var(--text-mid); fill:none; stroke-width:1.8 }

/* ==========================================================================
MENU MOBILE (off-canvas)
========================================================================== */

/* O comp base esconde .nav-links abaixo de 1100px sem oferecer alternativa;
o botao hamburguer + painel abaixo cobrem essa faixa. O corte e 1280px e
nao 1100px porque com 9 itens de menu + os dois botoes o .nav-inner passa
de 1100px de largura e a barra estoura antes do drawer entrar. */
.nav-toggle{
display:none; width:42px; height:42px; border-radius:11px;
background:#fff; border:1px solid var(--line-2); box-shadow:var(--shadow-sm);
place-items:center; margin-left:auto;
}
.nav-toggle span{
display:block; width:18px; height:2px; border-radius:2px; background:var(--text);
position:relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
content:""; position:absolute; left:0; width:18px; height:2px; border-radius:2px;
background:var(--text); transition:transform .2s;
}
.nav-toggle span::before{ top:-6px } .nav-toggle span::after{ top:6px }

.nav-drawer{
position:fixed; inset:0 0 0 auto; width:min(340px, 86vw); z-index:70;
background:var(--bg-2); border-left:1px solid var(--line);
box-shadow:-30px 0 60px -30px rgba(10,26,58,.35);
transform:translateX(100%); transition:transform .28s ease;
display:flex; flex-direction:column; padding:22px;
/* env(): em celular a barra do sistema come o ultimo item do menu */
padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));
overflow-y:auto; overscroll-behavior:contain; visibility:hidden;
}
.nav-drawer.open{ transform:none; visibility:visible }
.nav-drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px }
.nav-drawer-close{
width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
border:1px solid var(--line); background:#fff;
}
.nav-drawer-close svg{ width:16px; height:16px; stroke:var(--text-mid); stroke-width:2; fill:none }
.nav-drawer nav{ display:grid; gap:2px }
.nav-drawer nav a{
padding:12px 14px; border-radius:10px; font-size:15px; font-weight:500; color:var(--text-mid);
}
.nav-drawer nav a:hover,
.nav-drawer nav a.is-current{ background:rgba(24,87,200,.06); color:var(--jpl) }
.nav-drawer .drawer-cta{ display:grid; gap:10px; margin-top:26px }
.nav-drawer .drawer-cta .btn{ justify-content:center }

.nav-backdrop{
position:fixed; inset:0; z-index:60; background:rgba(10,26,58,.35);
backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .28s;
}
.nav-backdrop.open{ opacity:1; visibility:visible }
body.nav-open{ overflow:hidden }

/* ==========================================================================
RESPONSIVO
========================================================================== */

@media (max-width: 1280px){
.nav-links{ display:none }
.nav-cta{ display:none }
.nav-toggle{ display:grid }
}
@media (min-width: 1281px){
.nav-drawer, .nav-backdrop{ display:none }
}

@media (max-width: 640px){
.nav-inner{ height:64px; gap:16px }
.brand-logo{ height:34px }
.nav-toggle{ width:40px; height:40px }
.nav-drawer nav a{ padding:13px 14px; font-size:16px }
/* o html tem scroll-padding-top de 96px (base.css); com o topo mais baixo
o alvo da ancora ficaria com folga demais */
html{ scroll-padding-top:78px }
}

/* JPL Scan - rodape (custom_views/rodape.phtml) */

/* ==========================================================================
FOOTER
========================================================================== */

footer{ padding: clamp(60px, 7vw, 90px) 0 40px; border-top:1px solid var(--line); margin-top:clamp(70px, 8vw, 110px); background:#fff }
.foot-grid{ display:grid; grid-template-columns: minmax(0,1.2fr) repeat(3, minmax(0,1fr)); gap:40px; margin-bottom:54px }
.foot-grid h4{
font-size:11px; font-family:"JetBrains Mono",monospace; letter-spacing:.16em;
text-transform:uppercase; color:var(--text-dim); font-weight:500; margin-bottom:18px;
}
.foot-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:14px }
.foot-grid li a{ color:var(--text-mid); transition:color .15s }
.foot-grid li a:hover{ color:var(--jpl) }
.foot-brand p{ font-size:13.5px; margin-top:18px; max-width:300px }
.foot-contact .tel{ font-family:"JetBrains Mono",monospace; font-size:22px; color:var(--text); margin-bottom:6px; letter-spacing:-.02em }
.foot-contact .tel-secondary{ font-size:13px; color:var(--text-mid); margin-bottom:8px }
.foot-contact .email{ color:var(--jpl); font-size:14px; font-weight:500 }
.foot-contact .contact-details{ margin-top:14px; font-size:13px }
.foot-bottom{
display:flex; justify-content:space-between; align-items:center; gap:24px;
padding-top:30px; border-top:1px solid var(--line);
font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--text-dim);
flex-wrap:wrap;
}
.foot-bottom a{ color:var(--text-mid); transition:color .15s }
.foot-bottom a:hover{ color:var(--jpl) }
.badges{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.cert{
display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
border:1px solid var(--line); border-radius:8px; background:#f7f9fd;
color:var(--text-mid); font-size:11px;
}
.cert b{ color:var(--text); font-weight:500 }

/* ==========================================================================
RESPONSIVO
========================================================================== */

@media (max-width: 1100px){
.foot-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:36px 40px }
}

@media (max-width: 640px){
footer{ padding-top:clamp(44px, 9vw, 70px) }

/* as duas listas de link continuam lado a lado: em uma coluna so o rodape
virava uma tira de ~20 linhas */
.foot-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:30px 22px; margin-bottom:36px }
.foot-brand, .foot-contact{ grid-column:1 / -1 }
.foot-grid ul{ font-size:13.5px; gap:9px }
.foot-contact .tel{ font-size:19px }

.foot-bottom{ gap:16px; padding-top:22px }
.badges{ gap:8px }
}

@media (max-width: 380px){
.foot-grid{ grid-template-columns: minmax(0,1fr) }
}

/* JPL Scan - secoes exclusivas da home (pages/index.phtml).
Carregado so nessa pagina; o que e compartilhado vive em
/assets/css/{base,components,topo,rodape}.css */

/* ==========================================================================
HERO + MOCKUP DE APP
========================================================================== */

.hero{ padding: clamp(56px, 8vw, 110px) 0 clamp(60px, 8vw, 100px); position:relative; overflow:hidden }
.hero-grid{
display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap:60px; align-items:center;
}
.hero h1 .accent{
background:linear-gradient(95deg, var(--jpl) 0%, var(--jpl-300) 50%, var(--cyan) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:18px; max-width:560px; margin-top:24px }
.hero-cta{ display:flex; gap:12px; margin-top:36px; flex-wrap:wrap }
/* Grade de 3 colunas em vez de uma linha flex: os tres numeros com os
rotulos por extenso pedem ~730px e a coluna do hero tem no maximo ~595px
(o .wrap trava em 1320px), entao a linha unica nunca coube - so nao
aparecia porque o excesso vazava por baixo do mockup.
Os <div class="sep"> do markup viram borda da propria coluna. */
.hero-trust{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:22px; margin-top:48px;
color:var(--text-dim); font-size:13px;
}
.hero-trust .stat{ display:flex; align-items:baseline; gap:8px; min-width:0; line-height:1.4 }
.hero-trust .stat:not(:first-child){ border-left:1px solid var(--line-2); padding-left:22px }
.hero-trust .stat b{
font-family:"JetBrains Mono",monospace; color:var(--text); font-weight:500; font-size:20px;
letter-spacing:-.02em;
}
.hero-trust .sep{ display:none }

/* hero visual = phone mockup */
.hero-visual{ position:relative; aspect-ratio: 5/5.4; }
.phone{
position:absolute; left:8%; top:0; width:74%; aspect-ratio: 9/19.5;
background:#0a1a3a; border-radius:42px; padding:10px;
box-shadow:var(--shadow-lg), 0 0 0 1px rgba(10,26,58,.08);
transform:rotate(-3deg);
}
.phone-screen{
width:100%; height:100%;
background:linear-gradient(180deg, #f4f7fc 0%, #ffffff 100%);
border-radius:32px; overflow:hidden; position:relative;
display:flex; flex-direction:column;
}
.phone-notch{
position:absolute; top:6px; left:50%; transform:translateX(-50%);
width:88px; height:22px; background:#0a1a3a; border-radius:99px; z-index:2;
}
.phone-status{ padding:16px 22px 8px; display:flex; justify-content:space-between; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--text); font-weight:600 }
.phone-header{ padding:22px 22px 16px; display:flex; align-items:center; gap:12px }
.phone-avatar{
width:42px; height:42px; border-radius:50%;
background:linear-gradient(135deg, var(--jpl), var(--cyan));
color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px;
}
.phone-greet{ font-size:13px; color:var(--text-mid) }
.phone-name{ font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.01em }
.phone-camera{
margin:6px 22px 0; aspect-ratio: 1/.9; border-radius:18px;
background:
linear-gradient(180deg, rgba(10,26,58,0) 50%, rgba(10,26,58,.45) 100%),
#cbd5e7;
position:relative; overflow:hidden;
border:1px solid var(--line);
}
.phone-camera img{ width:100%; height:100%; object-fit:cover }
.phone-camera .ring{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:60%; aspect-ratio:1; border-radius:50%;
border:2px dashed rgba(255,255,255,.7); animation:spin 18s linear infinite;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg)} }
.phone-camera .face-pill{
position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
background:rgba(26,171,99,.95); color:#fff;
font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:600;
padding:5px 10px; border-radius:99px; display:flex; align-items:center; gap:6px;
backdrop-filter:blur(4px);
}
.phone-camera .face-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff }
.phone-info{ padding:14px 22px 0; display:grid; grid-template-columns:1fr 1fr; gap:8px }
.phone-info .row{ display:flex; justify-content:space-between; gap:10px; font-size:11.5px; padding:6px 0; border-bottom:1px solid var(--line); font-family:"JetBrains Mono",monospace }
.phone-info .row span{ color:var(--text-dim) }
.phone-info .row b{ color:var(--text); font-weight:500 }
.phone-time{
margin:10px 22px 0;
display:flex; align-items:baseline; gap:10px;
font-family:"JetBrains Mono",monospace;
}
.phone-time .big{ font-size:38px; font-weight:600; letter-spacing:-.04em; color:var(--text) }
.phone-time .ms{ font-size:14px; color:var(--text-dim) }
.phone-cta{
margin:auto 22px 26px; padding:14px;
background:linear-gradient(180deg, #2a6ee0, var(--jpl));
color:#fff; border-radius:14px;
text-align:center; font-weight:700; font-size:15px;
box-shadow:0 8px 22px -6px rgba(24,87,200,.55);
}

/* floating cards beside phone */
.fc{
position:absolute;
background:#fff;
border:1px solid var(--line);
border-radius:14px; padding:16px;
box-shadow:var(--shadow);
}
.fc-1{
top:6%; right:-2%; width:230px;
}
.fc-1 .head{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600 }
.fc-1 .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(26,171,99,.18) }
.fc-1 .bar{ height:6px; border-radius:99px; background:#eef3fb; margin-top:12px; overflow:hidden }
.fc-1 .bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--cyan), var(--jpl)); width:78%; border-radius:99px }
.fc-1 .legend{ display:flex; justify-content:space-between; gap:10px; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--text-mid); margin-top:8px }

.fc-2{
bottom:6%; left:-4%; width:240px;
}
.fc-2 .title{ font-size:11px; font-family:"JetBrains Mono",monospace; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; font-weight:500; margin-bottom:8px }
.fc-2 ul{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
.fc-2 li{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; padding:4px 0 }
.fc-2 li b{ font-weight:500; color:var(--text); font-family:"JetBrains Mono",monospace }
.fc-2 li .v{ color:var(--green); font-family:"JetBrains Mono",monospace; font-size:11.5px; font-weight:500 }
.fc-2 li .v.late{ color:var(--rose) }

/* ==========================================================================
PONTO + KIOSK
========================================================================== */

.ponto{
display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap:60px; align-items:center;
}
.ponto-text h2{ margin-top:18px; margin-bottom:22px }
.ponto-bullets{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; margin-top:32px }
.ponto-bullets .b{
display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; align-items:start;
}
.ponto-bullets .b-ico{
width:32px; height:32px; border-radius:9px;
background:rgba(24,87,200,.08); color:var(--jpl);
display:grid; place-items:center;
}
.ponto-bullets .b-ico svg{ width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round }
.ponto-bullets .b-title{ font-weight:600; color:var(--text); font-size:14.5px; margin-bottom:2px }
.ponto-bullets .b-desc{ font-size:13px; color:var(--text-mid); line-height:1.45 }
.legal-note{ font-size:12px; color:var(--text-dim); margin-top:28px; padding-left:14px; border-left:2px solid var(--line-2) }

.ponto-visual{ position:relative; aspect-ratio:5/5.6 }
.kiosk{
position:absolute; right:0; top:6%; width:88%; aspect-ratio:1.05;
background:#fff; border:1px solid var(--line);
border-radius:var(--radius-xl);
box-shadow:var(--shadow-lg);
overflow:hidden;
}
.kiosk-bar{
height:38px; padding:0 16px; display:flex; align-items:center; gap:6px;
background:#f4f7fc; border-bottom:1px solid var(--line);
}
.kiosk-bar .dot{ width:9px; height:9px; border-radius:50%; background:#e2e8f4 }
.kiosk-bar .dot.r{ background:#ff7185 } .kiosk-bar .dot.y{ background:#ffc94f } .kiosk-bar .dot.g{ background:#36cf78 }
.kiosk-bar .url{ margin-left:14px; flex:1; height:22px; border-radius:6px; background:#fff; display:flex; align-items:center; padding:0 10px; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--text-mid); border:1px solid var(--line) }
.kiosk-body{ padding:22px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; height:calc(100% - 38px) }
.kiosk-face{
border-radius:14px; overflow:hidden; position:relative;
background:#dde5f2;
}
.kiosk-face img{ width:100%; height:100%; object-fit:cover }
.kiosk-face .scan-line{
position:absolute; left:8%; right:8%; top:50%;
height:2px; background:linear-gradient(90deg, transparent, var(--cyan), transparent);
box-shadow:0 0 12px var(--cyan);
animation:scanLine 2.2s ease-in-out infinite;
}
@keyframes scanLine{
0%,100%{ top:18%; opacity:.4 }
50%{ top:82%; opacity:1 }
}
.kiosk-face .frame{
position:absolute; inset:14px; border:2px solid rgba(255,255,255,.5); border-radius:10px;
}
.kiosk-face .frame::before, .kiosk-face .frame::after,
.kiosk-face .frame > i::before, .kiosk-face .frame > i::after{
content:""; position:absolute; width:14px; height:14px; border:2px solid var(--cyan);
}
.kiosk-face .frame::before{ top:-2px; left:-2px; border-right:0; border-bottom:0 }
.kiosk-face .frame::after{ top:-2px; right:-2px; border-left:0; border-bottom:0 }
.kiosk-face .frame > i{ display:contents }
.kiosk-face .frame > i::before{ bottom:-2px; left:-2px; border-right:0; border-top:0 }
.kiosk-face .frame > i::after{ bottom:-2px; right:-2px; border-left:0; border-top:0 }

.kiosk-side{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.ks-clock{ font-family:"JetBrains Mono",monospace; font-size:42px; font-weight:600; letter-spacing:-.04em; color:var(--text); line-height:1 }
.ks-clock .sec{ font-size:18px; color:var(--text-dim); margin-left:6px }
.ks-date{ font-size:13px; color:var(--text-mid); margin-top:4px }
.ks-pill{
margin-top:6px; padding:10px 12px; border-radius:10px;
background:rgba(26,171,99,.08); border:1px solid rgba(26,171,99,.2);
color:#0e6b3a; font-size:12px; font-family:"JetBrains Mono",monospace; font-weight:500;
display:flex; align-items:center; gap:8px;
}
.ks-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(26,171,99,.2) }
.ks-stack{ display:grid; gap:8px; margin-top:auto }
.ks-stack .row{
display:flex; justify-content:space-between; gap:12px; padding:8px 12px;
background:#f4f7fc; border-radius:8px;
font-family:"JetBrains Mono",monospace; font-size:11.5px;
border:1px solid var(--line);
}
.ks-stack .row b{ color:var(--text); font-weight:500 }
.ks-stack .row span{ color:var(--text-mid) }

.ponto-watermark{
position:absolute; left:-30px; bottom:-30px; width:200px; opacity:.06;
color:var(--jpl);
}

/* ==========================================================================
AVALIACOES
========================================================================== */

.aval-grid{
display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap:60px; align-items:center;
}
.aval-card{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
box-shadow:var(--shadow);
padding:28px;
}
.aval-top{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:24px }
.aval-top .pill{
padding:5px 10px; border-radius:99px; font-family:"JetBrains Mono",monospace;
font-size:11px; background:rgba(0,179,230,.1); color:#017fa3; font-weight:500;
}
.aval-progress{
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:end;
padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px;
}
.aval-progress .big{ font-family:"JetBrains Mono",monospace; font-size:44px; font-weight:600; letter-spacing:-.04em; line-height:1 }
.aval-progress .big small{ font-size:18px; color:var(--text-dim); font-weight:400 }
.aval-progress .pct{
font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--green); font-weight:500;
display:flex; align-items:center; gap:6px;
}
.aval-bar{ height:8px; border-radius:99px; background:#eef3fb; overflow:hidden; margin-bottom:24px }
.aval-bar i{ display:block; height:100%; width:67%; border-radius:99px; background:linear-gradient(90deg, var(--jpl), var(--cyan)) }
.aval-row{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; font-size:13px; border-bottom:1px dashed var(--line) }
.aval-row:last-child{ border-bottom:0 }
.aval-row .who{ display:flex; align-items:center; gap:10px }
.aval-row .ava{ width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg, var(--jpl), var(--cyan)); color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center }
.aval-row .ava.b{ background:linear-gradient(135deg, var(--rose), #ff8e6a) }
.aval-row .ava.c{ background:linear-gradient(135deg, #1aab63, #6ad29e) }
.aval-row .ava.d{ background:linear-gradient(135deg, #6b48d4, #b687ff) }
.aval-row .status{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--green); font-weight:500 }
.aval-row .status.pending{ color:var(--rose) }

.aval-mini{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:32px;
}
.aval-mini .m{
background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px;
}
.aval-mini .m b{ display:block; font-size:24px; font-family:"JetBrains Mono",monospace; font-weight:600; color:var(--text); letter-spacing:-.03em }
.aval-mini .m span{ font-size:12px; color:var(--text-mid); display:block; margin-top:4px }

/* ==========================================================================
ASSINATURA
========================================================================== */

.ass{
display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:center;
}
.ass-card{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
box-shadow:var(--shadow);
padding:28px; position:relative;
}
.ass-card .doc{
background:#f7f9fd; border:1px solid var(--line); border-radius:12px;
padding:18px; margin-bottom:18px;
}
.ass-card .doc .doc-title{ font-weight:600; font-size:14px; margin-bottom:4px }
.ass-card .doc .doc-meta{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--text-dim) }
.ass-step{ display:grid; grid-template-columns: 28px minmax(0,1fr) auto; gap:14px; align-items:center; padding:10px 0; border-top:1px solid var(--line) }
.ass-step:first-of-type{ border-top:0 }
.ass-step .num{
width:28px; height:28px; border-radius:50%;
background:var(--green); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:600;
}
.ass-step.pending .num{ background:#e2e8f4; color:var(--text-mid) }
.ass-step .name{ font-size:13.5px; font-weight:600; color:var(--text) }
.ass-step .meta{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--text-dim) }
.ass-step .ts{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--green); font-weight:500 }
.ass-step.pending .ts{ color:var(--rose) }
.ass-selos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:18px }
.ass-selos .s{
font-family:"JetBrains Mono",monospace; font-size:10.5px; padding:4px 8px;
border-radius:6px; background:#f4f7fc; color:var(--text-mid); border:1px solid var(--line);
}
.ass-selos .s b{ color:var(--text); font-weight:500 }

/* ==========================================================================
RPA
========================================================================== */

.rpa-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px }
.rpa-card{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
padding:24px; transition:transform .25s, box-shadow .25s, border-color .25s;
position:relative; overflow:hidden;
}
.rpa-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2) }
.rpa-card.span-2{ grid-column:span 2 }
.rpa-card.span-3{ grid-column:span 3 }
.rpa-card.feat{ background:linear-gradient(135deg, var(--jpl) 0%, #2a6ee0 100%); color:#fff; border:0 }
.rpa-card.feat h3, .rpa-card.feat p{ color:#fff }
.rpa-card.feat p{ color:rgba(255,255,255,.85) }
.rpa-card.feat .rpa-ico{ background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.2) }
.rpa-card.feat .rpa-num b{ color:#fff }
.rpa-card.feat .rpa-num{ color:rgba(255,255,255,.7) }
.rpa-ico{
width:42px; height:42px; border-radius:11px;
background:linear-gradient(180deg, var(--jpl-100), #fff);
color:var(--jpl); display:grid; place-items:center; margin-bottom:18px;
border:1px solid var(--jpl-100);
}
.rpa-ico svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round }
.rpa-num{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--text-dim); letter-spacing:.08em; margin-bottom:12px }
.rpa-num b{ color:var(--jpl); font-weight:500 }
.rpa-card h3{ font-size:17px; margin-bottom:8px }
.rpa-card p{ font-size:13.5px }
.rpa-stats{
display:flex; gap:24px; margin-top:24px; flex-wrap:wrap;
}
.rpa-stats .s{ display:flex; flex-direction:column; gap:4px }
.rpa-stats .s b{ font-family:"JetBrains Mono",monospace; font-size:32px; font-weight:600; letter-spacing:-.03em; color:#fff; line-height:1 }
.rpa-stats .s span{ font-size:12px; color:rgba(255,255,255,.7) }

/* ==========================================================================
CHATBOT
========================================================================== */

.bot-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:center }
.bot-window{
background:#e6dccb;
border-radius:var(--radius-lg);
padding:18px;
box-shadow:var(--shadow);
position:relative;
background-image:
radial-gradient(circle at 10% 20%, rgba(255,255,255,.4) 0%, transparent 30%),
radial-gradient(circle at 80% 80%, rgba(255,255,255,.3) 0%, transparent 40%);
}
.bot-bar{
display:flex; align-items:center; gap:12px; padding:10px 14px 14px;
border-bottom:1px solid rgba(0,0,0,.06); margin-bottom:14px;
}
.bot-avatar{
width:38px; height:38px; border-radius:50%;
background:#25d366; color:#fff; display:grid; place-items:center;
}
.bot-bar .name{ font-weight:600; font-size:14px; color:#0a1a3a }
.bot-bar .status{ font-size:11px; color:#5a6878 }
.msg{
max-width:78%; padding:10px 12px 8px; border-radius:12px;
font-size:13.5px; line-height:1.4; margin-bottom:8px;
box-shadow:0 1px 1px rgba(0,0,0,.08);
color:#0a1a3a; position:relative;
}
.msg.bot{ background:#fff; border-top-left-radius:4px; margin-right:auto }
.msg.user{ background:#d9fdd3; border-top-right-radius:4px; margin-left:auto }
.msg .ts{ font-size:9.5px; color:#8b97a8; float:right; margin-top:2px; margin-left:6px }
.msg .opt{
display:block; padding:8px 12px; margin:4px -6px 0; border-top:1px solid #eef0f3;
color:#1857c8; font-weight:500; font-size:13px;
}
.msg .opt:first-of-type{ margin-top:8px }

/* ==========================================================================
GED COMPACT
========================================================================== */

.ged-compact{
background:linear-gradient(135deg, var(--jpl-navy) 0%, #1146a3 100%);
border-radius:var(--radius-xl); color:#fff;
padding: clamp(40px, 5vw, 64px); position:relative; overflow:hidden;
display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap:50px; align-items:center;
}
.ged-compact h2{ color:#fff; margin-bottom:18px }
.ged-compact p{ color:rgba(255,255,255,.78) }
.ged-compact .eyebrow{ color:var(--cyan) }
.ged-compact .eyebrow::before{ background:var(--cyan) }
.ged-features{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px; margin-top:24px }
.ged-features .f{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.9); font-weight:500 }
.ged-features .f::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); flex:0 0 auto }
.ged-stack{
position:relative; aspect-ratio:1.1; perspective:1000px;
}
.ged-stack .sheet{
position:absolute; left:50%; top:50%;
width:78%; aspect-ratio:1/1.3; border-radius:14px;
background:#fff; padding:18px;
box-shadow:0 20px 40px -10px rgba(0,0,0,.5);
transform-origin:center;
}
.ged-stack .sheet.s1{ transform:translate(-50%,-50%) rotate(-8deg) translateY(-10%) }
.ged-stack .sheet.s2{ transform:translate(-50%,-50%) rotate(2deg) }
.ged-stack .sheet.s3{ transform:translate(-50%,-50%) rotate(10deg) translateY(8%); background:#f6f8fd }
.ged-stack .sheet .sh-title{ font-size:12px; font-weight:700; color:var(--text); margin-bottom:14px }
.ged-stack .sheet .sh-line{ height:6px; background:#dde5f2; border-radius:99px; margin:4px 0 }
.ged-stack .sheet .sh-line.w70{ width:70% }
.ged-stack .sheet .sh-line.w90{ width:90% }
.ged-stack .sheet .sh-line.w50{ width:50% }
.ged-stack .sheet.s2{ z-index:3 }
.ged-stack .sheet.s2 .sh-stamp{
margin-top:14px; padding:6px 10px;
background:rgba(0,179,230,.12); color:#0190b8;
font-family:"JetBrains Mono",monospace; font-size:9.5px; border-radius:6px;
display:inline-block; font-weight:500;
}

/* ==========================================================================
NUMEROS
========================================================================== */

.nums{ background:linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.nums-head{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:56px; flex-wrap:wrap }
.nums-head h2{ max-width:600px }
.nums-head p{ max-width:340px }
.nums-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:0 }
/* escopo obrigatorio: .ass-step tambem usa .num, e la o padding de 24px
espremia o digito para fora da bolinha de 28px (box-sizing:border-box) */
.nums-grid .num{ padding:0 24px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:6px }
.nums-grid .num:first-child{ border-left:0; padding-left:0 }
.num-value{
font-family:"JetBrains Mono",monospace; font-weight:500;
font-size:clamp(40px, 5vw, 64px); color:var(--text);
letter-spacing:-.04em; line-height:1; display:flex; align-items:baseline; gap:4px;
}
.num-value .suf{ font-size:.5em; color:var(--jpl); margin-left:4px; font-weight:400 }
.num-label{ font-size:13px; color:var(--text-mid); margin-top:10px; line-height:1.4; max-width:220px }

/* ==========================================================================
SOBRE
========================================================================== */

.about{
display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap:64px; align-items:center;
}
.about-text h2{ margin-bottom:20px }
.about-text p + p{ margin-top:18px }
.about-pillars{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px }
.pillar{
padding:8px 14px; border-radius:99px;
background:#fff; border:1px solid var(--line);
font-size:12.5px; color:var(--text); font-family:"JetBrains Mono",monospace; font-weight:500;
box-shadow:var(--shadow-sm);
}
.pillar .ch{ color:var(--jpl); margin-right:6px }

/* ==========================================================================
RESPONSIVO   (cortes documentados em assets/css/base.css)

Os dois mockups desta pagina (telefone do hero e kiosk do ponto) sao
desenhados com filhos absolutos dentro de um container com aspect-ratio.
Isso so fecha na proporcao do desktop: em uma coluna so, o telefone com
74% de largura passava de 1100px de altura e era cortado pelo
overflow:hidden do .hero. Por isso, abaixo de 1100px, os dois viram
fluxo normal (position:static) com largura maxima propria.
========================================================================== */

@media (max-width: 1100px){
.hero-grid, .ponto, .aval-grid, .ass, .bot-grid, .ged-compact, .about{
grid-template-columns: minmax(0,1fr); gap:44px;
}

/* ------------------------------------------------ hero: telefone + cards */
.hero-visual{
position:static; aspect-ratio:auto;
width:100%; max-width:560px; margin-inline:auto;
display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
gap:16px; align-items:start;
}
.phone{
position:static; grid-column:1 / -1; justify-self:center;
width:min(250px, 74%); transform:rotate(-2deg); margin-bottom:8px;
}
.fc{ position:static; inset:auto; width:auto }

/* a tela do telefone passa de ~370px para 230px: os internos foram
dimensionados para a medida do desktop e ficam apertados */
.phone-info{ grid-template-columns:minmax(0,1fr); gap:0 }
.phone-camera .face-pill{ white-space:nowrap; font-size:9.5px; padding:4px 9px }
.phone-time .big{ font-size:34px }

/* ---------------------------------------------------- ponto: kiosk */
.ponto-visual{ position:static; aspect-ratio:auto }
.kiosk{
position:static; width:100%; max-width:540px; margin-inline:auto;
aspect-ratio:auto;
}
.kiosk-body{ height:auto }
.ponto-bullets{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.ponto-watermark{ display:none }

/* ------------------------------------------------------------ demais */
.rpa-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.rpa-card.span-2, .rpa-card.span-3{ grid-column: span 1 }
.rpa-card.feat{ grid-column: span 2 }

/* o gap:0 do desktop so funcionava porque cada .num tinha padding lateral
e borda; sem eles as colunas encostavam uma na outra */
.nums-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:34px 28px }
.nums-grid .num{ border-left:0; padding:0 }

.ged-stack{ width:100%; aspect-ratio:1/1.05; max-width:400px; margin:10px auto 0 }
.ged-stack .sheet{ width:64% }
}

@media (max-width: 860px){
.ponto-bullets{ grid-template-columns:minmax(0,1fr) }
.nums-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}

@media (max-width: 640px){
.hero{ padding-bottom:clamp(40px, 8vw, 70px) }
.hero-sub{ font-size:16.5px; margin-top:20px }
.hero-cta{ margin-top:28px }

/* rotulo embaixo do numero; a borda divisoria comeria 22px de uma coluna
de ~105px */
.hero-trust{ gap:14px; margin-top:34px; align-items:start }
.hero-trust .stat{ display:block; line-height:1.35 }
.hero-trust .stat:not(:first-child){ border-left:0; padding-left:0 }
.hero-trust .stat b{ display:block; font-size:18px }

.rpa-grid{ grid-template-columns: minmax(0,1fr) }
.rpa-card.span-2, .rpa-card.span-3, .rpa-card.feat{ grid-column: span 1 }
.rpa-card{ padding:22px 20px }
.rpa-stats{ gap:16px 22px; margin-top:20px }
.rpa-stats .s b{ font-size:26px }

/* kiosk: a foto em cima, o painel embaixo. Lado a lado o relogio de 42px
nao cabia e o ":14" saia pela borda do card. */
.kiosk-body{ grid-template-columns:minmax(0,1fr); gap:16px; padding:18px }
.kiosk-face{ aspect-ratio:4/3 }
.ks-clock{ font-size:34px }
.ks-stack{ margin-top:0 }
.kiosk-bar .url{ font-size:10px }

.ponto-text h2{ margin-bottom:18px }
.aval-card{ padding:22px 20px }
.aval-progress .big{ font-size:38px }

.aval-mini{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:24px }
.aval-mini .m{ padding:14px 12px }
.aval-mini .m b{ font-size:20px }
.aval-mini .m span{ font-size:11px; margin-top:2px }

/* a data cabia mal na terceira coluna: desce para a linha de baixo */
.ass-card{ padding:22px 20px }
.ass-step{ grid-template-columns:28px minmax(0,1fr); gap:6px 12px; padding:12px 0 }
.ass-step .ts{ grid-column:2; justify-self:start }

.ged-compact{ padding:clamp(28px, 7vw, 44px) }
.ged-features{ grid-template-columns:minmax(0,1fr); gap:10px }
.ged-stack{ max-width:300px }

.nums-grid{ gap:28px 22px }
.num-label{ font-size:12.5px; margin-top:8px }

.about-text h2{ margin-bottom:16px }
}

@media (max-width: 460px){
.hero-cta .btn{ flex:1 1 100%; justify-content:center }
.hero-trust{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 14px }
.phone{ width:min(250px, 88%) }
.aval-mini{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}