/* 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 - blog dinamico (custom_views/category_templates/blog.phtml).
Carregado so nas telas do blog, pelo proprio template.

Reaproveita o que ja existe no tema: .wrap, .eyebrow, .btn, .sec-head,
.blog-grid e .post (components.css) sao os mesmos da secao de noticias da
home. Aqui entram apenas as pecas que a listagem e o artigo pedem a mais. */

/* ==========================================================================
HERO DA LISTAGEM
========================================================================== */

.blog-hero{ padding: clamp(38px, 5vw, 72px) 0 clamp(30px, 3.5vw, 48px) }
.blog-hero-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(28px, 4vw, 60px); align-items:end }
.blog-hero h1{ margin-top:18px; font-size:clamp(34px, 4.4vw, 58px); max-width:16ch }
.blog-hero h1 em{ font-style:normal; color:var(--jpl) }
.blog-hero .blog-lead{ margin-top:20px; font-size:16.5px; max-width:560px }

/* contador a direita, no mesmo espirito do .hero-trust da home */
.blog-hero-selo{
border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff;
box-shadow:var(--shadow-sm); padding:22px 24px; display:grid; gap:2px; justify-items:start;
}
.blog-hero-selo b{
font-family:"JetBrains Mono",monospace; font-size:34px; line-height:1;
color:var(--jpl); letter-spacing:-.03em;
}
.blog-hero-selo span{
font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em;
text-transform:uppercase; color:var(--text-dim);
}

/* ------------------------------------------------------------------ busca */

.blog-busca{ display:flex; gap:10px; margin-top:26px; max-width:520px }
.blog-busca input{
flex:1; height:48px; padding:0 16px; 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;
}
.blog-busca input::placeholder{ color:var(--text-dim) }
.blog-busca input:focus{ outline:none; border-color:var(--jpl); box-shadow:0 0 0 4px rgba(24,87,200,.12) }
.blog-busca .btn{ height:48px }

/* ------------------------------------------------------- filtros por tema */

.blog-temas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px }
.blog-tema{
display:inline-flex; align-items:center; height:34px; padding:0 14px;
border:1px solid var(--line-2); border-radius:99px; background:#fff;
font-size:13px; font-weight:500; color:var(--text-mid);
transition:border-color .15s, color .15s, background .15s;
}
.blog-tema:hover{ border-color:var(--jpl); color:var(--jpl) }
.blog-tema.is-current{ background:var(--jpl); border-color:var(--jpl); color:#fff }

/* ==========================================================================
META (data / tempo de leitura / autor) - listagem e artigo
========================================================================== */

.blog-meta{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-dim);
}
.blog-meta span{ display:inline-flex; align-items:center; gap:6px }
.blog-meta svg{ width:13px; height:13px; flex:none }
.blog-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-dim) }

.blog-selo-cat{
display:inline-flex; align-items:center; align-self:flex-start;
padding:6px 12px; border-radius:99px;
background:var(--jpl-100); color:var(--jpl-700);
font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
}

/* ==========================================================================
GRADE / ESTADO VAZIO / PAGINACAO
========================================================================== */

.blog-lista{ padding: clamp(12px, 2vw, 30px) 0 clamp(50px, 6vw, 90px) }
.blog-lista .sec-head{ margin-bottom:38px }

.blog-vazio{
border:1px dashed var(--line-2); border-radius:var(--radius-lg);
padding:clamp(36px, 5vw, 64px); text-align:center; background:#fff;
}
.blog-vazio h3{ margin-bottom:10px }
.blog-vazio .btn{ margin-top:22px }

/* markup do RS_Helper_SitePager: div.pager > span + a.linkFirst/linkPrevious/... */
.blog-paginacao{ margin-top:44px }
.blog-paginacao .pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px }
.blog-paginacao .pager span{
width:100%; text-align:center; margin-bottom:8px;
font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em;
text-transform:uppercase; color:var(--text-dim);
}
.blog-paginacao .pager a{
display:inline-flex; align-items:center; justify-content:center;
min-width:40px; height:40px; padding:0 12px;
border:1px solid var(--line-2); border-radius:11px; background:#fff;
font-size:14px; font-weight:600; color:var(--text-mid);
transition:border-color .15s, color .15s, background .15s;
}
.blog-paginacao .pager a:hover{ border-color:var(--jpl); color:var(--jpl) }
.blog-paginacao .pager a.linkAtual,
.blog-paginacao .pager a.current,
.blog-paginacao .pager a.selected{ background:var(--jpl); border-color:var(--jpl); color:#fff }

/* first/prev/next/last saem do helper com o <span> vazio (nos temas legados
quem desenhava a seta era um background-image). Aqui a seta vem do ::after. */
.blog-paginacao .pager a.linkFirst span,
.blog-paginacao .pager a.linkPrevious span,
.blog-paginacao .pager a.linkNext span,
.blog-paginacao .pager a.linkLast span{ display:none }
.blog-paginacao .pager a.linkFirst::after{ content:"\00ab" }
.blog-paginacao .pager a.linkPrevious::after{ content:"\2039" }
.blog-paginacao .pager a.linkNext::after{ content:"\203a" }
.blog-paginacao .pager a.linkLast::after{ content:"\00bb" }
.blog-paginacao .pager a.linkFirst::after,
.blog-paginacao .pager a.linkPrevious::after,
.blog-paginacao .pager a.linkNext::after,
.blog-paginacao .pager a.linkLast::after{ font-size:17px; line-height:1 }

/* ==========================================================================
ARTIGO - barra de progresso
========================================================================== */

.blog-progresso{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:60; background:transparent; pointer-events:none }
.blog-progresso i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--jpl), var(--cyan)); transition:width .1s linear }

/* ==========================================================================
ARTIGO - cabecalho
========================================================================== */

.blog-artigo-head{ padding: clamp(34px, 4vw, 58px) 0 clamp(24px, 3vw, 38px) }
.blog-artigo-head-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(28px, 4vw, 56px); align-items:center }
.blog-artigo-head-grid.sem-capa{ grid-template-columns:minmax(0,1fr); max-width:820px }
.blog-artigo-head h1{ margin:18px 0; font-size:clamp(28px, 3.4vw, 46px); line-height:1.1 }
.blog-artigo-head .blog-resumo{ font-size:17px; margin-bottom:20px; max-width:60ch }
.blog-capa{ margin:0; border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:#dde5f2 }
.blog-capa img{ width:100%; aspect-ratio:16/11; object-fit:cover }

/* ==========================================================================
ARTIGO - corpo em duas colunas (trilha lateral + texto)
========================================================================== */

.blog-artigo-corpo{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(30px, 4vw, 64px); align-items:start; padding-bottom:clamp(50px, 6vw, 84px) }

.blog-trilha{ position:sticky; top:100px; display:grid; gap:28px }
.blog-trilha-titulo{
font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--text-dim); font-weight:500; margin-bottom:12px;
}
.blog-sumario{ list-style:none; margin:0; padding:0 0 0 13px; border-left:2px solid var(--line); display:grid; gap:9px; max-height:46vh; overflow-y:auto }
.blog-sumario a{ display:block; font-size:13.5px; line-height:1.4; color:var(--text-mid); transition:color .15s }
.blog-sumario a:hover{ color:var(--jpl) }
.blog-sumario a.is-current{ color:var(--jpl); font-weight:600 }

.blog-share{ display:flex; gap:8px; flex-wrap:wrap }
.blog-share button{
width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
border:1px solid var(--line-2); background:#fff; color:var(--text-mid);
transition:border-color .15s, color .15s, transform .15s;
}
.blog-share button:hover{ border-color:var(--jpl); color:var(--jpl); transform:translateY(-2px) }
.blog-share svg{ width:16px; height:16px }
.blog-share-ok{ font-size:12px; color:var(--green); margin-top:8px }
.blog-share-ok[hidden]{ display:none }

/* ==========================================================================
ARTIGO - tipografia do conteudo vindo do editor do CMS
========================================================================== */

.blog-texto{ font-size:17px; line-height:1.72; color:var(--text-mid); max-width:72ch }
.blog-texto > *:first-child{ margin-top:0 }
.blog-texto p{ margin:0 0 22px; font-size:inherit; line-height:inherit }
.blog-texto h2{ font-size:clamp(23px, 2.1vw, 30px); line-height:1.2; margin:48px 0 16px; scroll-margin-top:100px; color:var(--text) }
.blog-texto h3{ font-size:20px; margin:34px 0 12px; scroll-margin-top:100px; color:var(--text) }
.blog-texto h4{ font-size:17px; margin:28px 0 10px; color:var(--text) }
.blog-texto a{ color:var(--jpl); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.blog-texto a:hover{ color:var(--jpl-700) }
.blog-texto strong,.blog-texto b{ color:var(--text); font-weight:700 }
.blog-texto ul,.blog-texto ol{ margin:0 0 22px; padding-left:22px; display:grid; gap:9px }
.blog-texto li{ line-height:1.62 }
.blog-texto li::marker{ color:var(--jpl) }
.blog-texto img{ border-radius:var(--radius); margin:12px 0 26px; height:auto }
.blog-texto figure{ margin:26px 0 }
.blog-texto figcaption{ font-size:13px; color:var(--text-dim); margin-top:8px; text-align:center }
.blog-texto blockquote{
margin:30px 0; padding:20px 26px; border-left:3px solid var(--jpl);
background:var(--jpl-100); border-radius:0 var(--radius) var(--radius) 0;
font-size:17.5px; color:var(--text); font-style:italic;
}
.blog-texto blockquote p:last-child{ margin-bottom:0 }
.blog-texto hr{ border:0; border-top:1px solid var(--line); margin:38px 0 }
.blog-texto code{ font-family:"JetBrains Mono",monospace; font-size:.88em; background:var(--bg-tint); padding:2px 6px; border-radius:6px; color:var(--jpl-700) }
.blog-texto pre{ background:var(--jpl-navy); color:#e6efff; padding:20px 22px; border-radius:var(--radius); overflow-x:auto; margin:0 0 24px; font-size:13.5px; line-height:1.6 }
.blog-texto pre code{ background:none; padding:0; color:inherit }
.blog-texto iframe{ max-width:100%; border-radius:var(--radius); border:0; aspect-ratio:16/9; height:auto; width:100%; margin-bottom:24px }

/* tabelas do editor costumam vir com width fixo: o wrapper segura o overflow */
.blog-texto table{ width:100%; border-collapse:collapse; margin:0 0 26px; font-size:14.5px; display:block; overflow-x:auto }
.blog-texto th,.blog-texto td{ border:1px solid var(--line); padding:11px 14px; text-align:left }
.blog-texto th{ background:var(--bg-tint); color:var(--text); font-weight:600 }

/* album de fotos do conteudo (helper ContentAlbum) */
.blog-album{ margin-top:12px }
.blog-album img{ border-radius:var(--radius); margin-bottom:14px }

/* ==========================================================================
ARTIGO - rodape / relacionados
========================================================================== */

.blog-artigo-fim{
display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
padding-top:26px; margin-top:8px; border-top:1px solid var(--line); max-width:72ch;
}
.blog-voltar{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--jpl) }
.blog-voltar svg{ width:16px; height:16px; transition:transform .15s }
.blog-voltar:hover svg{ transform:translateX(-3px) }
.blog-tags{ display:flex; gap:7px; flex-wrap:wrap }
.blog-tags span{
padding:5px 11px; border-radius:99px; border:1px solid var(--line-2);
font-size:12px; color:var(--text-dim); background:#fff;
}

.blog-relacionados{ padding: clamp(50px, 6vw, 84px) 0 }

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

@media (max-width: 1100px){
.blog-hero-grid{ grid-template-columns:minmax(0,1fr); align-items:start }
.blog-hero-selo{ justify-self:start }
.blog-artigo-head-grid{ grid-template-columns:minmax(0,1fr) }
.blog-artigo-corpo{ grid-template-columns:minmax(0,1fr) }
.blog-trilha{ position:static; top:auto; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:20px }
.blog-sumario{ max-height:none }
}

@media (max-width: 640px){
/* em coluna, o flex:1 do input zerava a altura (flex-basis:0 sem espaco
livre para distribuir): ele voltava a ter ~0px */
.blog-busca{ flex-direction:column; margin-top:22px }
.blog-busca input{ flex:0 0 auto; width:100% }
.blog-busca .btn{ justify-content:center }
.blog-trilha{ grid-template-columns:minmax(0,1fr) }
.blog-texto{ font-size:16px; line-height:1.68 }
.blog-texto blockquote{ padding:16px 18px; font-size:16px }
.blog-texto ul, .blog-texto ol{ padding-left:20px }
.blog-artigo-fim{ flex-direction:column; align-items:flex-start }
.blog-hero-selo{ padding:18px 20px }
.blog-hero h1{ max-width:none }
.blog-artigo-head .blog-resumo{ font-size:16px }
/* o pager do helper vinha com min-width 40px: 9 paginas nao cabiam na linha */
.blog-paginacao .pager a{ min-width:38px; height:38px; padding:0 9px; font-size:13.5px }
}

/* ==========================================================================
ALBUM DE FOTOS DO CONTEUDO  (custom_views/content-album.phtml)
========================================================================== */

.album-photos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; margin:8px 0 30px }
.album-photo{
display:block; border:1px solid var(--line); border-radius:var(--radius);
overflow:hidden; background:#dde5f2; transition:transform .2s, box-shadow .2s;
}
.album-photo:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.album-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover }