/* ============ TOKENS ============ */
/* DM Sans (variável, com eixo óptico, servida pelo Google Fonts) declarada com nome próprio:
o chat da LeadConnector carrega outra "DM Sans" (estática, mais larga) que, com o mesmo nome,
passaria por cima da do site. O arquivo latin tem preload em partials/head.html */
@font-face{font-family:"Anpla Sans";font-style:normal;font-weight:400 700;font-display:swap;
src:url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anpla Sans";font-style:normal;font-weight:400 700;font-display:swap;
src:url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Space Mono itálico 700 (destaques .accent), direto do gstatic como a DM Sans: sem o CSS do Google bloqueando a pintura */
@font-face{font-family:"Space Mono";font-style:italic;font-weight:700;font-display:swap;
src:url(https://fonts.gstatic.com/s/spacemono/v17/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSRRXaPYw.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";font-style:italic;font-weight:700;font-display:swap;
src:url(https://fonts.gstatic.com/s/spacemono/v17/i7dSIFZifjKcF5UAWdDRYERE_FeqEiSRRXaPY-je.woff2) format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
--navy:#10295B;
--acid:#E2E233;
--paper:#FFFFFF;
--paper-2:#F5F5EF;
--ink:#10295B; /* texto principal = navy */
--muted:rgba(16,41,91,.66); /* texto de apoio */
--line:rgba(16,41,91,.12); /* bordas */
--radius:20px;
--radius-pill:999px;
--maxw:1160px;
--gap:clamp(16px,3vw,32px);
--pad-y:clamp(44px,6vw,88px);
--hero-r:clamp(20px,3vw,40px); /* canto inferior arredondado do hero */
--font:"Anpla Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
--mono:"Space Mono",ui-monospace,monospace;
}
/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
font-size:clamp(16px,1.1vw,18px);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--acid);outline-offset:2px;border-radius:4px}
/* ============ BASE TIPOGRAFIA ============ */
.display{font-weight:700;line-height:1.02;letter-spacing:-.02em;
font-size:clamp(2.2rem,6vw,4.4rem)}
/* itálico (Space Mono) sempre em negrito */
.accent{font-family:var(--mono);font-style:italic;font-weight:700}
.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--muted);max-width:52ch}
/* ============ LAYOUT ============ */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:var(--pad-y)}
.section--alt{background:var(--paper-2)}
.section--navy{background:var(--navy);color:#fff}
.section--navy .lead{color:rgba(255,255,255,.72)}
/* ============ SECTION HEAD ============ */
.section__head{display:flex;flex-direction:column;gap:16px;max-width:64ch;margin-bottom:clamp(28px,4vw,52px)}
.section__head h2{font-weight:700;line-height:1.05;letter-spacing:-.02em;font-size:clamp(1.8rem,4vw,3rem)}
/* ============ BOTÕES ============ */
.btn{display:inline-flex;align-items:center;gap:.6em;font-weight:500;
padding:.85em 1.4em;border-radius:var(--radius-pill);border:1px solid transparent;
cursor:pointer;transition:transform .12s ease,filter .12s ease;font-size:1rem}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--acid);color:var(--navy)}
.btn--primary:hover{filter:brightness(.96)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn--on-navy{background:var(--acid);color:var(--navy)}
.btn__arrow{display:inline-grid;place-items:center;width:1.6em;height:1.6em;
border-radius:50%;background:var(--navy);color:var(--acid);font-size:.8em;line-height:1}
.btn--primary .btn__arrow{background:var(--navy);color:var(--acid)}
/* ============ CARDS ============ */
.card{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.card--accent{background:var(--acid);border-color:transparent;color:var(--navy)}
.card__arrow{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;
background:var(--navy);color:var(--acid);margin-top:auto;align-self:flex-start}
.card--accent .card__arrow{background:var(--navy);color:var(--acid)}
/* ============ KPI ============ */
.kpi__num{font-weight:700;letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.5rem,3vw,2.4rem);overflow-wrap:break-word}
.kpi__label{color:var(--muted);font-size:.95rem;margin-top:6px}
.section--navy .kpi__label{color:rgba(255,255,255,.72)}
/* ============ LOGO STRIP ============ */
/* ============ MARQUEE DE LOGOS (full-bleed, infinito) ============ */
.logo-marquee{overflow:hidden;width:100%;
-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-marquee__track{display:flex;align-items:center;width:max-content;
animation:logo-scroll 40s linear infinite;will-change:transform}
.logo-marquee:hover .logo-marquee__track{animation-play-state:paused}
.logo-marquee__item{height:52px;width:auto;flex:0 0 auto;
margin-right:clamp(44px,6vw,92px);
opacity:.7;filter:grayscale(1);transition:opacity .2s,filter .2s}
.logo-marquee__item:hover{opacity:1;filter:grayscale(0)}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.logo-marquee{-webkit-mask:none;mask:none}
.logo-marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:100%;
gap:clamp(24px,5vw,64px) clamp(40px,6vw,90px)}
.logo-marquee__item{margin-right:0}
}
/* ============ HEADER (flutuante: transparente no topo → vidro ao rolar) ============ */
/* Outer: fixo, largura total, transparente. Anima só o padding (cria o recuo do
pill sem "saltar" a largura). O visual de vidro vive no bar interno. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:70;padding:0;
transition:padding .4s cubic-bezier(.4,0,.2,1)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding-block:15px;background:transparent;border:1px solid transparent;border-radius:0;
box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
transition:background-color .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1),
border-radius .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),
padding .4s cubic-bezier(.4,0,.2,1)}
.brand{display:inline-flex;align-items:center;padding-block:9px;margin-block:-9px} /* área de toque 44px sem mudar o layout */
.brand__logo{display:block;width:74px;height:26px;background-color:#fff;
-webkit-mask:url("../img/logo-anpla-white.webp") left center/contain no-repeat;
mask:url("../img/logo-anpla-white.webp") left center/contain no-repeat;
transition:background-color .4s cubic-bezier(.4,0,.2,1)}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a:not(.btn){color:#fff;font-weight:500;font-size:.98rem;padding-block:.6em;margin-block:-.6em;
transition:color .4s cubic-bezier(.4,0,.2,1)}
.site-nav a:not(.btn):hover{opacity:.7}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;color:#fff;cursor:pointer;
transition:color .4s cubic-bezier(.4,0,.2,1)}
/* botão do cabeçalho: mais compacto que os CTAs das seções */
.site-header .site-nav .btn{padding:.55em 1.05em;font-size:.9rem;gap:.5em}
.site-header .site-nav .btn__arrow{width:1.5em;height:1.5em;font-size:.72em}
/* estado flutuante (após scroll) */
.site-header.is-floating{padding:14px clamp(14px,3vw,24px) 0}
.site-header.is-floating .site-header__bar{
padding-block:10px;padding-inline:clamp(20px,2.6vw,30px);border-radius:999px}
.site-header:not(.on-dark) .site-nav a:not(.btn){color:var(--ink)}
.site-header:not(.on-dark) .nav-toggle{color:var(--navy)}
.site-header:not(.on-dark) .brand__logo{background-color:var(--navy)}
@supports (backdrop-filter:url(#liquid-glass)){
.site-header.is-floating .site-header__bar{backdrop-filter:url(#liquid-glass) blur(16px) saturate(1.9)}
}
@media (max-width:820px){
.nav-toggle{display:block}
.site-nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;gap:20px;
background:var(--paper);padding:28px 24px;border-bottom:1px solid var(--line);
transform:translateY(-140%);transition:transform .22s ease}
.site-nav a:not(.btn){color:var(--ink)}
body.nav-open .site-nav{transform:translateY(0)}
}
/* Header glass is a separate surface: fade it without switching filters. */
.site-header{transition:padding .52s cubic-bezier(.22,1,.36,1)}
.site-header__bar,.site-header.is-floating .site-header__bar{
position:relative;isolation:isolate;border-radius:999px;background:transparent;border-color:transparent;
box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
transition:padding .52s cubic-bezier(.22,1,.36,1)}
.site-header__bar::before{content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.1));
border:1px solid rgba(255,255,255,.42);
-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.12),
0 14px 38px -14px rgba(16,41,91,.28);
opacity:0;transition:opacity .32s ease .12s}
.site-header.is-floating .site-header__bar::before{opacity:1;transition:opacity .38s ease .06s}
/* vidro sobre fundo escuro: bem translúcido, borda clara — para o texto branco contrastar */
.site-header.on-dark .site-header__bar::before{
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
border-color:rgba(255,255,255,.26);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 38px -16px rgba(0,0,0,.5)}
@supports (backdrop-filter:url(#liquid-glass)){
.site-header__bar::before{backdrop-filter:blur(20px) url(#liquid-glass) saturate(1.8)}
}
.site-header .brand__logo{transition:background-color .24s ease}
.site-header .site-nav a:not(.btn){transition:color .24s ease,opacity .24s ease}
.site-header .nav-toggle{transition:color .24s ease}
.site-header .site-nav .btn{color:var(--navy);transition:transform .3s ease,filter .3s ease}
.site-header .btn__arrow{transition:transform .3s ease}
@media (hover:hover){.site-header .btn:hover .btn__arrow{transform:translate(1px,-1px)}}
@media (max-width:820px){
.nav-toggle{display:grid;place-items:center;width:44px;height:44px;margin-block:-6.5px}
.site-header .site-nav{position:absolute;inset:calc(100% + 10px) 14px auto;gap:16px;
padding:24px;background:rgba(250,251,255,.85);border:1px solid rgba(255,255,255,.4);border-radius:24px;
-webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15);
box-shadow:0 12px 32px -12px rgba(16,41,91,.24);max-height:calc(100dvh - 110px);overflow-y:auto;
opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s}
body.nav-open .site-header .site-nav{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
/* menu mobile: itens com 44px de altura de toque */
.site-header .site-nav{gap:4px}
.site-header .site-nav a:not(.btn){display:block;padding-block:10px;margin-block:0}
.site-header .site-nav .btn{margin-top:10px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
.site-header,.site-header__bar,.site-header__bar::before,.site-header .brand__logo,
.site-header .site-nav,.site-header .site-nav a,.site-header .nav-toggle,.site-header .btn__arrow{transition:none!important}
.site-header .site-nav,.site-header .btn:hover,.site-header .btn:hover .btn__arrow{transform:none}
}
/* ============ MENU: dropdown "Soluções" (disclosure) ============ */
.site-nav{gap:clamp(18px,2.4vw,30px)} /* fluido: cabe o menu inteiro de 821px em diante */
.nav-dd{position:relative}
.nav-dd__toggle{display:inline-flex;align-items:center;gap:6px;padding:.6em 0;margin:-.6em 0;border:0;background:none;
font:inherit;font-weight:500;font-size:.98rem;color:#fff;cursor:pointer;transition:color .24s ease,opacity .24s ease}
.site-header:not(.on-dark) .nav-dd__toggle{color:var(--ink)}
.nav-dd__toggle:hover{opacity:.7}
.nav-dd__chev{width:16px;height:16px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.nav-dd.is-open .nav-dd__chev{transform:rotate(180deg)}
/* painel desktop: vidro claro, legível sobre o hero escuro ou seções claras */
.nav-dd__panel{position:absolute;top:calc(100% + 18px);left:50%;width:340px;z-index:5;
translate:-50% 8px;opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .2s ease,translate .45s cubic-bezier(.16,1,.3,1),visibility 0s .45s}
.nav-dd.is-open .nav-dd__panel{opacity:1;visibility:visible;pointer-events:auto;translate:-50% 0;
transition:opacity .25s ease,translate .45s cubic-bezier(.16,1,.3,1),visibility 0s}
/* ponte invisível: o mouse atravessa o vão entre botão e painel sem fechar */
.nav-dd__panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-dd__inner{padding:8px;border-radius:20px;background:rgba(250,251,255,.94);border:1px solid rgba(255,255,255,.6);
-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
box-shadow:0 24px 60px -20px rgba(16,41,91,.45),inset 0 1px 0 rgba(255,255,255,.7)}
.nav-dd__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-header .site-nav a.nav-dd__item{display:flex;align-items:center;gap:14px;margin:0;padding:10px 12px;border-radius:14px;
color:var(--ink);transition:background-color .2s ease}
.site-header .site-nav a.nav-dd__item:hover{opacity:1;background:rgba(16,41,91,.06)}
.site-header .site-nav a.nav-dd__item:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.nav-dd__icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;
background:var(--navy);color:rgb(var(--c));transition:transform .4s cubic-bezier(.16,1,.3,1)}
.nav-dd__item:hover .nav-dd__icon{transform:scale(1.06)}
.nav-dd__icon svg{width:20px;height:20px}
.nav-dd__txt{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.nav-dd__txt strong{font-weight:600;font-size:.95rem}
.nav-dd__txt small{font-size:.8rem;color:var(--muted)}
@media (max-width:820px){
/* menu mobile alinhado à esquerda (mais natural com o acordeão) */
.site-header .site-nav{align-items:stretch;text-align:left}
.site-header .site-nav .nav-dd__toggle{width:100%;justify-content:space-between;padding:10px 0;margin:0;color:var(--ink)}
/* acordeão: anima a altura via grid-template-rows (0fr → 1fr), sem medir em JS */
.nav-dd__panel{position:static;width:auto;translate:none;opacity:1;pointer-events:auto;
display:grid;grid-template-rows:0fr;visibility:hidden;
transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1),visibility 0s .45s}
.nav-dd.is-open .nav-dd__panel{grid-template-rows:1fr;visibility:visible;translate:none;
transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1),visibility 0s}
.nav-dd__panel::before{display:none}
.nav-dd__inner{min-height:0;overflow:hidden;padding:0;border:0;border-radius:16px;background:rgba(16,41,91,.05);
box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-dd__list{padding:6px}
.site-header .site-nav a.nav-dd__item{padding:8px 10px}
.nav-dd__icon{flex-basis:34px;width:34px;height:34px;border-radius:10px}
.nav-dd__icon svg{width:18px;height:18px}
}
/* menu mobile: itens entram em cascata ao abrir */
@keyframes nav-in{from{opacity:0;translate:0 8px}}
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
body.nav-open .site-header .site-nav > *{animation:nav-in .5s cubic-bezier(.16,1,.3,1) both}
body.nav-open .site-header .site-nav > :nth-child(2){animation-delay:40ms}
body.nav-open .site-header .site-nav > :nth-child(3){animation-delay:80ms}
body.nav-open .site-header .site-nav > :nth-child(4){animation-delay:120ms}
body.nav-open .site-header .site-nav > :nth-child(5){animation-delay:160ms}
}
@media (prefers-reduced-motion:reduce){
.nav-dd__panel,.nav-dd.is-open .nav-dd__panel,.nav-dd__chev,.nav-dd__icon{transition:none}
}
/* animações de entrada mais curtas em telas pequenas */
@media (max-width:640px){:root{--reveal-y:18px}}
/* ============ HERO (escuro, imagem de fundo) ============ */
.hero{position:relative;isolation:isolate;color:#fff;
padding-block:clamp(140px,15vh,200px) clamp(64px,9vw,120px);
background:#0a1836 url("../img/hero-home-1920.webp") center/cover no-repeat}
/* telas estreitas baixam a versão de 1024 px (o do bloco de SEO usa o mesmo corte).
Vem logo após o .hero e antes do .err404, que continua sobrescrevendo o fundo da 404 */
@media (max-width:820px){.hero{background-image:url("../img/hero-home-1024.webp")}}
/* borda inferior arredondada: a seção seguinte sobe por baixo das curvas, então o canto mostra a cor dela */
.hero{border-radius:0 0 var(--hero-r) var(--hero-r);overflow:clip;z-index:1}
.hero + .section{margin-top:calc(-1 * var(--hero-r));padding-top:calc(var(--pad-y) + var(--hero-r))}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(100deg,rgba(8,18,42,.82) 0%,rgba(8,18,42,.5) 45%,rgba(8,18,42,.15) 100%)}
.hero .display{color:#fff}
.hero .accent{color:var(--acid)}
.hero .lead{color:rgba(255,255,255,.82)}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.hero .btn--ghost:hover{border-color:#fff}
.hero__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,56px);align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:24px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.hero__proof{display:flex;flex-direction:column;gap:0}
.hero__proof-card{--edge:rgba(184,197,224,.7);gap:6px;color:#fff;position:relative;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);
-webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15);
transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s cubic-bezier(.22,1,.36,1),border-color .7s ease}
.hero__proof-card > *{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.hero__proof-card .kpi__num{font-size:clamp(2rem,4vw,3rem);color:#fff}
.hero__proof-card .kpi__label{color:rgba(255,255,255,.72)}
.hero__proof-card.card--accent{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)}
.hero__proof-card.card--accent .kpi__num{color:var(--acid)}
/* paralelogramo: card de cima com topo à esquerda e base à direita (skewX);
espessura pela sombra sólida deslocada para a base-esquerda */
.hero__proof-card:nth-child(1){z-index:2;transform:skewX(14deg) rotate(-3deg) translateX(-6%);
box-shadow:-1px 1px 0 var(--edge),-2px 2px 0 var(--edge),-3px 3px 0 var(--edge),
-4px 4px 0 var(--edge),-5px 5px 0 var(--edge),
-14px 26px 44px -12px rgba(0,0,0,.58)}
/* card de baixo: ESPELHADO (topo à direita, base à esquerda), texto legível */
.hero__proof-card:nth-child(2){z-index:1;margin-top:26px;transform:skewX(-14deg) rotate(3deg) translateX(6%);
box-shadow:1px 1px 0 var(--edge),2px 2px 0 var(--edge),3px 3px 0 var(--edge),
4px 4px 0 var(--edge),5px 5px 0 var(--edge),
14px 26px 44px -12px rgba(0,0,0,.58)}
/* Preserve the six shadow layers so the solid edge survives interpolation. */
@media (min-width:821px) and (hover:hover) and (pointer:fine){
.hero__proof-card:hover{border-color:rgba(255,255,255,.42);transition-duration:.52s}
.hero__proof-card:hover > *{transform:translateY(-1.5px);transition-duration:.52s}
.hero__proof-card:nth-child(1):hover{transform:skewX(9.8deg) rotate(-2.1deg) translateX(-6%) translateY(-5px) scale(1.01);
box-shadow:-1px 1px 0 var(--edge),-2px 2px 0 var(--edge),-3px 3px 0 var(--edge),
-4px 4px 0 var(--edge),-5px 5px 0 var(--edge),
-16px 32px 52px -12px rgba(0,0,0,.62)}
.hero__proof-card:nth-child(2):hover{transform:skewX(-9.8deg) rotate(2.1deg) translateX(6%) translateY(-5px) scale(1.01);
box-shadow:1px 1px 0 var(--edge),2px 2px 0 var(--edge),3px 3px 0 var(--edge),
4px 4px 0 var(--edge),5px 5px 0 var(--edge),
16px 32px 52px -12px rgba(0,0,0,.62)}
}
/* Independent translation leaves the resting angle and hover transform intact. */
@media (prefers-reduced-motion:no-preference){
.hero__proof-card{animation:proof-arrive 1.1s cubic-bezier(.16,1,.3,1) .7s backwards}
.hero__proof-card:nth-child(2){animation-delay:.85s}
}
@keyframes proof-arrive{
from{opacity:0;translate:0 12px}
to{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){
.hero__proof-card,.hero__proof-card > *{animation:none;transition:none}
.hero__proof-card:nth-child(1):hover{transform:skewX(14deg) rotate(-3deg) translateX(-6%)}
.hero__proof-card:nth-child(2):hover{transform:skewX(-14deg) rotate(3deg) translateX(6%)}
.hero__proof-card:hover > *{transform:none}
}
/* telas grandes: o hero ocupa a primeira dobra (com teto, para monitores muito altos) */
@media (min-width:821px){
.hero{display:flex;align-items:center;min-height:min(100svh,960px)}
}
@media (max-width:820px){
.hero__grid{grid-template-columns:1fr}
/* provas lado a lado: o hero fica bem mais curto no celular */
.hero__proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hero__proof-card,.hero__proof-card:nth-child(1),.hero__proof-card:nth-child(2),
.hero__proof-card:nth-child(1):hover,.hero__proof-card:nth-child(2):hover{
transform:none;margin-top:0;box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.hero__proof-card{padding:18px}
.hero__proof-card .kpi__num{font-size:clamp(1.6rem,7vw,2.4rem)}
.hero__proof-card .kpi__label{font-size:.88rem;line-height:1.4}
}
@media (max-width:480px){
.hero__cta .btn{flex:1 1 100%;justify-content:center}
}
/* home: título em duas linhas (quebra no
). O tamanho acompanha a largura da coluna (cqi),
então a linha mais longa ("A sua operação de energia") cabe em qualquer tela. Ela mede ~11,4 em
nos tamanhos grandes e ~12,2 em no celular (o eixo óptico da DM Sans alarga a fonte pequena) */
.hero--home .hero__copy{container-type:inline-size}
.hero--home .display{white-space:nowrap;font-size:min(3.85rem,7.9cqi)}
@media (min-width:821px){
.hero--home .hero__grid{grid-template-columns:1.4fr .6fr}
.hero--home .display{font-size:min(3.85rem,8.5cqi)}
}
/* selo GPTW: pequeno, entre o subtítulo e os botões */
.hero__seal{align-self:flex-start;width:auto;height:clamp(56px,5.4vw,72px)}
/* ============ TRUST (logos) ============ */
.trust__label{text-align:center;color:var(--muted);font-weight:500;
font-size:clamp(1.45rem,1rem + 2.4vw,2.7rem);line-height:1.25;letter-spacing:-.01em;
max-width:min(1080px,92vw);margin:0 auto clamp(28px,5vw,48px)}
@media (max-width:640px){
.logo-marquee__item{height:40px}
}
.trust__label .accent{color:var(--navy)}
/* ============ CASES ============ */
/* título em uma linha a partir do tablet (no celular quebra normalmente) */
.cases .section__head{max-width:none}
@media (min-width:721px){.cases .section__head h2{white-space:nowrap}}
.cases__cta{margin-top:clamp(24px,4vw,40px);display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* ===== acordeão de cases (sanfona horizontal) ===== */
.cases-acc{display:flex;gap:14px;height:clamp(340px,40vw,440px)}
.cases-acc__item{position:relative;flex:1 1 0;min-width:0;overflow:clip;
border-radius:24px;cursor:pointer;text-align:left;padding:0;color:#fff;background:transparent;border:none;
transition:flex-grow .7s cubic-bezier(.65,0,.35,1)}
/* superfície do card num pseudo (permite recorte via mask sem cortar o botão) */
.cases-acc__item::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
background:radial-gradient(130% 100% at 100% 0%,rgba(var(--glow),.34),transparent 58%),linear-gradient(160deg,#0f2352,#0a1734);
border:1px solid rgba(255,255,255,.14)}
.cases-acc__item.has-surface::before{display:none}
/* contorno SVG com recorte (gerado em main.js), compartilhado por Cases e Soluções */
.notch-surface{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cases-acc__item:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
/* foto de fundo (assets/img/gigantes), recortada pelo mesmo contorno do card (main.js);
o véu escuro mantém o logo e o texto brancos legíveis, mais forte embaixo, onde fica o texto */
.cases-acc__media{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;
background:#0b0f18 center/cover no-repeat}
.cases-acc__media::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(5,9,18,.38) 0%,rgba(5,9,18,.55) 50%,rgba(5,9,18,.9) 100%)}
.cases-acc__item--coca .cases-acc__media{background-image:url("../img/gigantes/coca.webp");background-position:72% 45%}
.cases-acc__item--herbalife .cases-acc__media{background-image:url("../img/gigantes/herbalife.webp");background-position:45% 30%}
.cases-acc__item--gerdau .cases-acc__media{background-image:url("../img/gigantes/gerdau.webp");background-position:28% 55%}
.cases-acc__item.is-open{flex-grow:5}
.cases-acc__name{position:absolute;inset:0 16px;z-index:1;display:flex;align-items:center;justify-content:center;
opacity:1;transition:opacity .25s ease .45s}
.cases-acc__name img{width:180px;max-width:none;height:52px;flex-shrink:0;object-fit:contain;
transform:rotate(-90deg);filter:brightness(0) invert(1)}
.cases-acc__hint{position:absolute;top:22px;left:0;right:0;margin:0 auto;width:max-content;z-index:1;
color:var(--acid);font-size:1.4rem;line-height:1;transition:opacity .4s ease}
.cases-acc__item.is-open .cases-acc__name,.cases-acc__item.is-open .cases-acc__hint{opacity:0;transition-delay:0s}
.cases-acc__panel{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;
gap:16px;padding:clamp(22px,2.4vw,36px);width:var(--case-panel-width,100%);right:auto;
pointer-events:none;opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .14s ease,transform .14s ease,visibility 0s .14s}
.cases-acc__item.is-open .cases-acc__panel{opacity:1;visibility:visible;transform:translateY(0);
transition:opacity .3s ease .48s,transform .4s cubic-bezier(.22,1,.36,1) .48s,visibility 0s}
.cases-acc__item.is-leaving .cases-acc__panel{opacity:0;transform:translateY(-4px);visibility:hidden;
transition:opacity .14s ease,transform .14s ease,visibility 0s .14s}
.cases-acc__logo{height:clamp(30px,3vw,42px);width:auto;max-width:60%;object-fit:contain;object-position:left;
filter:brightness(0) invert(1);opacity:.96}
.cases-acc__desc{color:rgba(255,255,255,.86);font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.5;max-width:min(42ch,72%)}
.cases-acc__arrow{position:absolute;right:6px;bottom:6px;z-index:2;
display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:var(--acid);color:var(--navy);
transition:width .7s cubic-bezier(.65,0,.35,1),height .7s cubic-bezier(.65,0,.35,1)}
.cases-acc__item.is-open .cases-acc__arrow{width:58px;height:58px}
.cases-acc__arrow svg{width:42%;height:42%}
@media (max-width:720px){
.cases-acc{flex-direction:column;height:auto}
.cases-acc__item{flex:0 0 auto;height:76px;transition:height .7s cubic-bezier(.65,0,.35,1)}
.cases-acc__item.is-open{flex-grow:0;height:clamp(330px,90vw,380px)}
.cases-acc__item.is-open::before{-webkit-mask:none;mask:none}
.cases-acc__name{inset:0 64px 0 24px;justify-content:flex-start}
.cases-acc__name img{width:120px;height:32px;transform:none}
.cases-acc__hint{display:none}
.cases-acc__panel{width:100%;padding-bottom:88px}
.cases-acc__desc{max-width:100%}
.cases-acc__arrow{right:6px;bottom:6px}
}
@media (prefers-reduced-motion:reduce){
.cases-acc__item,.cases-acc__panel,.cases-acc__arrow,.cases-acc__name{transition:none!important;transform:none!important}
}
/* ============ BLOG ============ */
.journal__head{display:grid;grid-template-columns:1.6fr 1fr;align-items:start;gap:64px;margin-bottom:40px}
.journal__head .section__head{margin:0;align-items:flex-start}
.journal__head h2{font-size:clamp(2rem,3.8vw,3rem);max-width:20ch;line-height:1.12}
.journal__head .accent{background:linear-gradient(transparent 79%,var(--acid) 79%,var(--acid) 94%,transparent 94%)}
.journal__intro{max-width:32ch;justify-self:end;color:var(--muted);font-size:1rem;
/* topo das letras do apoio na mesma altura do topo das letras do título: as maiúsculas da DM Sans
começam 0,204 em abaixo da caixa do título (line-height 1.12) e 0,42 rem abaixo da do apoio (1.55) */
margin-top:calc(clamp(2rem,3.8vw,3rem) * .204 - .42rem)}
.journal__all{display:inline-flex;align-items:center;gap:20px;margin-top:22px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;color:var(--navy);font-weight:500;transition:background .3s,border-color .3s}
.journal__all:hover{background:var(--acid);border-color:var(--acid)}
.journal__grid{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:18px}
.journal-card{min-width:0}
.journal-card__link{position:relative;isolation:isolate;display:flex;align-items:flex-end;height:460px;padding:24px;color:#fff;background:var(--navy);border-radius:26px;overflow:hidden}
.journal-card__link:focus-visible{outline:3px solid var(--navy);outline-offset:5px;border-radius:26px}
.journal-card__image{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.65,.3,1)}
.journal-card__link::before,.journal-card__link::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-2}
.journal-card__link::before{background:linear-gradient(180deg,rgba(5,18,40,.2) 0%,rgba(5,18,40,.05) 28%,rgba(8,23,51,.8) 65%,#0a1936 100%)}
.journal-card__link::after{background:var(--navy);opacity:0;transition:opacity .6s}
.journal-card__category{position:absolute;top:22px;left:22px;max-width:calc(100% - 90px);padding:7px 11px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(8,23,51,.55);backdrop-filter:blur(12px);font:italic 700 .75rem/1.4 var(--mono)}
.journal-card--featured .journal-card__category{color:var(--navy);background:var(--acid);border-color:var(--acid)}
.journal-card__arrow{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--navy);transition:background .45s,transform .6s cubic-bezier(.2,.65,.3,1)}
.journal-card__arrow svg{width:19px;height:19px}
.journal-card__copy{width:100%}
.journal-card__copy time{display:block;color:rgba(255,255,255,.75);font-size:.75rem;margin-bottom:12px}
.journal-card__copy h3{font-size:clamp(1.15rem,1.65vw,1.4rem);font-weight:700;letter-spacing:-.025em;line-height:1.24;max-width:24ch}
.journal-card--featured h3{font-size:clamp(1.3rem,1.9vw,1.65rem)}
.journal-card__read{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.25);margin-top:22px;padding-top:14px;font-size:.8rem;font-weight:500}
.journal-card__read span{color:var(--acid);font-size:1.1rem}
.journal-card__link:focus-visible .journal-card__arrow{background:var(--acid)}
@media (hover:hover){
.journal-card__link:hover .journal-card__image{transform:scale(1.045)}
.journal-card__link:hover::after{opacity:.1}
.journal-card__link:hover .journal-card__arrow{background:var(--acid);transform:rotate(6deg)}
}
.journal__swipe{display:none}
@media (max-width:820px){
.journal__head{grid-template-columns:1fr;gap:22px;margin-bottom:30px}
.journal__intro{justify-self:start;max-width:42ch;margin-top:0}
.journal__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:-20px;padding:6px 20px 14px;scroll-padding-inline:20px;scrollbar-width:thin;scrollbar-color:var(--navy) var(--paper-2)}
.journal-card{flex:0 0 84%;scroll-snap-align:start}
.journal-card__link{height:420px}
.journal-card__copy h3,.journal-card--featured h3{font-size:1.5rem}
.journal__swipe{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;margin-top:12px}
}
@media (max-width:480px){
.journal-card__link{height:380px;padding:20px}
.journal-card__copy h3,.journal-card--featured h3{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
.journal-card__image,.journal-card__arrow,.journal-card__link::after,.journal__all{transition:none}
.journal-card__link:hover .journal-card__image,.journal-card__link:hover .journal-card__arrow{transform:none}
}
/* ===== SOLUÇÕES (mesmo card de Cases: superfície SVG + recorte, fixos e abertos) ===== */
.solutions__grid{--gap:clamp(16px,1.8vw,24px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gap);container-type:inline-size}
/* quadrado: altura mínima = largura da coluna (cqw do grid); cresce se o texto pedir.
(aspect-ratio no item do grid cria dependência circular entre altura esticada e largura) */
.sol-card{--pad:clamp(22px,2.4vw,36px);position:relative;border-radius:24px;color:#fff;
min-height:calc((100cqw - 2 * var(--gap)) / 3);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad)}
/* fallback sem JS (sem recorte); com JS a superfície SVG assume */
.sol-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
background:linear-gradient(160deg,#0f2352,#0a1734);border:1px solid rgba(255,255,255,.14)}
.sol-card.has-surface::before{display:none}
/* foto de fundo de cada solução (assets/img/cards-solucoes). Com JS, o main.js recorta esta camada
com o mesmo contorno do card (clip-path: path), deixando a bolinha do número de fora. O véu navy
mantém o título e o texto legíveis, mais forte embaixo, onde eles ficam. */
.sol-card__media{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;
background:#0a1734 center/cover no-repeat}
.sol-card__media::before{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,23,52,.08) 0%,rgba(10,23,52,.5) 45%,rgba(10,23,52,.92) 100%)}
.sol-card--gestao .sol-card__media{background-image:url("../img/cards-solucoes/gestao.webp")}
.sol-card--energia .sol-card__media{background-image:url("../img/cards-solucoes/energia.webp")}
.sol-card--manutencao .sol-card__media{background-image:url("../img/cards-solucoes/manutencao.webp")}
/* granulação sutil: tira o aspecto "chapado" do degradê */
.sol-card__media::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sol-card__content{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.sol-card__title{font-size:clamp(1.6rem,2.3vw,2.2rem);line-height:1.08;letter-spacing:-.02em;color:var(--acid)}
/* termina antes do recorte (78px da bolinha + folga), qualquer que seja o padding */
.sol-card__desc{color:rgba(255,255,255,.84);font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.5;
max-width:min(34ch,calc(100% + var(--pad) - 94px))}
/* número da solução na bolinha do recorte */
.sol-card__num{position:absolute;right:6px;bottom:6px;z-index:2;display:grid;place-items:center;
width:58px;height:58px;border-radius:50%;background:var(--acid);color:var(--navy);
font-weight:700;font-size:1.05rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* hover: o card sobe e ganha uma sombra que segue o recorte (na superfície SVG do main.js) */
.sol-card{transition:translate .45s cubic-bezier(.22,1,.36,1)}
.sol-card > .notch-surface{transition:filter .45s ease}
@media (hover:hover){
.sol-card:hover{translate:0 -4px}
.sol-card:hover > .notch-surface{filter:drop-shadow(0 22px 28px rgba(10,23,52,.28))}
}
.sol-card:has(.sol-card__link:focus-visible){translate:0 -4px}
@media (prefers-reduced-motion:reduce){
.sol-card,.sol-card > .notch-surface{transition:none}
.sol-card:hover,.sol-card:has(.sol-card__link:focus-visible){translate:none}
}
@media (max-width:900px){
.solutions__grid{grid-template-columns:1fr}
.sol-card{min-height:clamp(340px,70vw,440px);padding-bottom:88px}
.sol-card__desc{max-width:min(46ch,100%)}
}
/* tablet: 2 cards quadrados + o terceiro na largura toda (evita 3 retângulos enormes empilhados) */
@media (min-width:601px) and (max-width:900px){
.solutions__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sol-card{min-height:calc((100cqw - var(--gap)) / 2)}
.sol-card:last-child{grid-column:1 / -1;min-height:clamp(260px,34vw,320px)}}
/* ============ SOBRE A ANPLA (bento) ============ */
.about__head{max-width:none;margin-bottom:clamp(32px,4.5vw,56px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.about__statement{font-weight:500;color:var(--muted);letter-spacing:-.015em;line-height:1.2;text-wrap:pretty;
font-size:clamp(1.35rem,1rem + 1.6vw,2.4rem)}
.about__statement .accent{color:var(--navy)}
.bento{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(4,minmax(0,1fr));
grid-template-areas:"portal portal brasil multi" "portal portal docs consc" "selos selos selos selos"}
.bento__card{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;
background:var(--paper);border:1px solid var(--line);color:var(--ink);
padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:10px;min-height:220px;
transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.bento__card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(16,41,91,.07),transparent 45%);
opacity:0;transition:opacity .3s ease}
.bento__card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(16,41,91,.35)}
.bento__card:hover::after{opacity:1}
.bento__card h3{font-size:clamp(1.1rem,1.3vw,1.28rem);line-height:1.2;margin-top:auto}
.bento__card p{color:var(--muted);font-size:.95rem;line-height:1.5}
.bento__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
background:var(--navy);color:var(--acid);margin-bottom:6px}
.bento__icon svg{width:22px;height:22px}
.bento__card--brasil{grid-area:brasil;background:var(--acid);border-color:transparent;color:var(--navy)}
.bento__card--brasil p{color:rgba(16,41,91,.78)}
.bento__card--brasil::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 45%)}
.bento__card--multi{grid-area:multi}.bento__card--docs{grid-area:docs}.bento__card--consc{grid-area:consc}
/* destaque: portal */
.bento__card--portal{grid-area:portal;color:#fff;border-color:rgba(255,255,255,.1);
background:radial-gradient(120% 90% at 100% 0%,rgba(56,214,196,.28),transparent 55%),
linear-gradient(160deg,#0f2352,#0a1734);
display:grid;grid-template-columns:1fr;gap:26px;align-content:space-between}
.bento__card--portal::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 45%)}
.bento__card--portal .bento__icon{background:var(--acid);color:var(--navy)}
.bento__card--portal h3{font-size:clamp(1.4rem,2vw,1.9rem);margin-top:6px}
.bento__card--portal p{color:rgba(255,255,255,.76);max-width:40ch}
.bento__text{display:flex;flex-direction:column;gap:10px}
.portal-ui{border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:12px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.portal-ui__bar{display:flex;align-items:center;gap:6px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.portal-ui__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.portal-ui__bar span{margin-left:8px;font-family:var(--mono);font-style:italic;font-weight:700;font-size:.72rem;color:rgba(255,255,255,.6)}
.portal-ui__item{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.portal-ui__row{display:flex;align-items:center;gap:10px;font-size:.86rem}
.portal-ui__row b{font-weight:500}
.portal-ui__row em{margin-left:auto;font-style:normal;font-size:.75rem;color:rgba(255,255,255,.62)}
.portal-ui__dot{width:8px;height:8px;border-radius:50%;background:#38d6c4;box-shadow:0 0 0 4px rgba(56,214,196,.18)}
.portal-ui__dot--warn{background:var(--acid);box-shadow:0 0 0 4px rgba(226,226,51,.18)}
.portal-ui__meter{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.portal-ui__meter span{display:block;height:100%;width:var(--v);border-radius:inherit;
background:linear-gradient(90deg,#38d6c4,var(--acid))}
/* reconhecimentos */
.bento__card--selos{grid-area:selos;min-height:0;display:grid;align-items:center;
grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(20px,3vw,40px)}
.bento__card--selos .bento__text{max-width:32ch}
.bento__card--selos h3{margin-top:0}
.seals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.seal{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:18px;border-radius:18px;
background:var(--paper-2);border:1px solid var(--line)}
/* logo do selo (o nome abaixo já o identifica, por isso alt vazio). Todas ocupam a mesma faixa
de altura, para os nomes ficarem alinhados; as menores (ABRATENE e Humanizadas) são contidas
numa largura e centradas na faixa */
.seal__logo{height:56px;width:auto;max-width:100%;flex:0 0 auto}
.seal__logo--wide,.seal__logo--square{object-fit:contain;object-position:left center}
.seal__logo--wide{width:min(128px,100%)}
.seal__logo--square{width:44px}
.seal__txt{display:flex;flex-direction:column;gap:4px;line-height:1.2}
.seal__txt strong{font-weight:700;font-size:.95rem}
.seal__txt small{font-family:var(--mono);font-style:italic;font-weight:700;font-size:.75rem;color:var(--muted)}
@media (max-width:1000px){
.bento{grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-areas:"portal portal" "brasil multi" "docs consc" "selos selos"}
.bento__card--selos{grid-template-columns:1fr}
}
@media (max-width:640px){
.bento{grid-template-columns:1fr;grid-template-areas:"portal" "brasil" "multi" "docs" "consc" "selos"}
.bento__card{min-height:0}
/* diferenciais compactos: ícone ao lado do texto (menos rolagem no celular) */
.bento__card:not(.bento__card--portal):not(.bento__card--selos){display:grid;grid-template-columns:46px minmax(0,1fr);
column-gap:16px;row-gap:4px;align-items:start;padding:20px}
.bento__card:not(.bento__card--portal):not(.bento__card--selos) .bento__icon{grid-row:1 / span 2;margin-bottom:0}
.bento__card:not(.bento__card--portal):not(.bento__card--selos) > h3,
.bento__card:not(.bento__card--portal):not(.bento__card--selos) > p{grid-column:2}
.bento__card:not(.bento__card--portal):not(.bento__card--selos) > h3{margin-top:2px}
.seals{grid-template-columns:1fr}
.seal{gap:12px;padding:16px}
.seal__logo{height:48px}
.seal__logo--wide{width:min(116px,100%)}
.seal__logo--square{width:38px}
}
@media (prefers-reduced-motion:reduce){
.bento__card,.bento__card::after{transition:none}
.bento__card:hover{transform:none}
}
/* ============ ANPLACAST (carrossel de episódios + player em modal) ============ */
.cast__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;
margin-bottom:clamp(28px,4vw,48px)}
.cast__head .section__head{flex:1 1 440px;max-width:54ch;margin:0}
/* equalizador "no ar" ao lado do nome */
.cast__eq{display:inline-flex;align-items:flex-end;gap:.07em;height:.6em;margin-left:.3em}
.cast__eq i{width:.1em;height:100%;border-radius:.05em;background:var(--navy);transform-origin:bottom;
animation:cast-eq .9s ease-in-out infinite alternate}
.cast__eq i:nth-child(2){animation-duration:1.2s;animation-delay:-.5s;background:var(--acid)}
.cast__eq i:nth-child(3){animation-duration:.8s;animation-delay:-.3s}
.cast__eq i:nth-child(4){animation-duration:1.05s;animation-delay:-.7s}
@keyframes cast-eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.cast__nav{display:flex;align-items:center;gap:10px}
.cast__all{margin:0 8px 0 0;white-space:nowrap}
.cast__btn{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;padding:0;border-radius:50%;cursor:pointer;
border:1px solid var(--line);background:var(--paper);color:var(--navy);transition:background .3s,border-color .3s,opacity .3s}
.cast__btn svg{width:20px;height:20px}
.cast__btn:hover:not(:disabled){background:var(--acid);border-color:var(--acid)}
.cast__btn:disabled{opacity:.35;cursor:default}
.cast__btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
/* trilho alinhado ao container à esquerda e sangrando até a borda direita da tela */
.cast__track{--edge:calc(max(0px,(100% - var(--maxw)) / 2) + clamp(20px,5vw,40px));
display:flex;gap:clamp(14px,1.6vw,20px);list-style:none;margin:0;padding:6px var(--edge) 10px;
scroll-padding-inline:var(--edge);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
scroll-behavior:smooth;scrollbar-width:none}
.cast__track::-webkit-scrollbar{display:none}
.cast__track:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.cast__item{flex:0 0 clamp(270px,29vw,360px);scroll-snap-align:start;display:flex}
/* card do episódio: mesmo widget de Cases (superfície SVG + recorte abraçando o play) */
.ep{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;padding:10px;
border-radius:24px;color:#fff}
.ep::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(130% 100% at 100% 0%,rgba(var(--glow),.34),transparent 58%),linear-gradient(160deg,#0f2352,#0a1734)}
.ep.has-surface::before{display:none}
.ep:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
/* capas oficiais do Anplacast (1101×690, sem corte) em duotone navy; a cor original volta no hover */
.ep__thumb{position:relative;z-index:1;display:block;aspect-ratio:1101/690;border-radius:16px;overflow:hidden;background:var(--navy)}
.ep__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.84);
transition:filter .6s ease,transform .8s cubic-bezier(.2,.65,.3,1)}
.ep__thumb::after{content:"";position:absolute;inset:0;background:#1d3f86;mix-blend-mode:color;transition:opacity .6s ease}
.ep__body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 76px 22px 14px}
.ep__num{font-family:var(--mono);font-style:italic;font-weight:700;font-size:.85rem;color:var(--acid)}
.ep__title{font-weight:500;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.3}
.ep__play{position:absolute;right:6px;bottom:6px;z-index:2;display:grid;place-items:center;
width:58px;height:58px;border-radius:50%;background:var(--acid);color:var(--navy)}
.ep__play svg{width:42%;height:42%;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.ep:hover .ep__thumb img,.ep:focus-visible .ep__thumb img{filter:none;transform:scale(1.05)}
.ep:hover .ep__thumb::after,.ep:focus-visible .ep__thumb::after{opacity:0}
.ep:hover .ep__play svg{transform:scale(1.18)}
.cast__foot{display:flex;align-items:center;gap:20px;margin-top:clamp(18px,2.6vw,28px)}
.cast__progress{position:relative;flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.cast__progress span{position:absolute;inset:0 auto 0 0;width:var(--view,30%);border-radius:inherit;background:var(--navy);
transform:translateX(var(--at,0%));transition:transform .2s linear}
.cast__count{font-family:var(--mono);font-style:italic;font-weight:700;font-size:.85rem;color:var(--muted)}
.cast__count b{color:var(--navy)}
/* player */
html:has(.cast-modal[open]){overflow:hidden}
.cast-modal{width:min(1100px,calc(100vw - 32px),calc((100dvh - 140px) * 16 / 9));max-width:none;max-height:none;
padding:0;border:0;border-radius:24px;overflow:hidden;background:#0a1734;color:#fff;
box-shadow:0 40px 120px -20px rgba(0,0,0,.6)}
.cast-modal::backdrop{background:rgba(6,14,33,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cast-modal[open]{animation:cast-in .4s cubic-bezier(.22,1,.36,1)}
@keyframes cast-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.cast-modal__frame{aspect-ratio:16/9;background:#000}
.cast-modal__frame iframe{display:block;width:100%;height:100%;border:0}
.cast-modal__bar{display:flex;align-items:center;gap:18px;padding:12px 12px 12px 22px}
.cast-modal__title{flex:1;min-width:0;margin:0;font-weight:500}
.cast-modal__title b{font-family:var(--mono);font-style:italic;font-weight:700;color:var(--acid);margin-right:.5em}
.cast-modal__yt{color:rgba(255,255,255,.78);font-size:.9rem;white-space:nowrap;transition:color .3s}
.cast-modal__yt:hover{color:var(--acid)}
.cast-modal__close{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:50%;
background:var(--acid);color:var(--navy);cursor:pointer}
.cast-modal__close svg{width:20px;height:20px}
.cast-modal__close:focus-visible,.cast-modal__yt:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* celular: navegação por gesto (a barra de progresso indica que há mais); a pílula fica inteira */
@media (max-width:560px){
.cast__btn{display:none}
}
@media (max-width:720px){
.cast__nav{width:100%}
.cast__all{margin-right:auto}
.cast__item{flex-basis:80vw}
.cast-modal__yt{display:none}
.cast-modal__bar{padding:10px 10px 10px 16px}
}
@media (prefers-reduced-motion:reduce){
.cast__eq i{animation:none}
.cast__track{scroll-behavior:auto}
.ep__thumb img,.ep__thumb::after,.ep__play svg,.cast__progress span{transition:none}
.ep:hover .ep__thumb img{transform:none}
.cast-modal[open]{animation:none}
}
/* ============ CTA FINAL + RODAPÉ + WHATSAPP ============ */
.final__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,56px);align-items:start}
/* o formulário é alto: o texto acompanha a rolagem ao lado dele */
.final__copy{display:flex;flex-direction:column;gap:20px;position:sticky;top:clamp(96px,14vh,150px)}
.final__copy .btn{align-self:flex-start}
/* Formulário LeadConnector: o conteúdo do iframe é estilizado na plataforma; aqui só a moldura de vidro.
A altura fica reservada até o form_embed.js exibir o iframe (evita a página "pular"). */
.form-slot{padding:8px;border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
box-shadow:0 40px 90px -40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.form-slot__frame{position:relative;border-radius:20px;overflow:hidden;min-height:960px}
.form-slot__frame::before{content:"Carregando formulário…";position:absolute;inset:0;display:grid;place-items:center;
color:rgba(255,255,255,.6);font-size:.95rem;animation:form-wait 1.4s ease-in-out infinite alternate}
@keyframes form-wait{from{opacity:.35}to{opacity:1}}
.form-slot.is-ready .form-slot__frame{min-height:0}
.form-slot.is-ready .form-slot__frame::before{display:none}
.form-slot__frame iframe{display:block}
@media (prefers-reduced-motion:reduce){.form-slot__frame::before{animation:none}}
.site-footer{background:var(--navy);color:#fff;padding-block:clamp(40px,6vw,72px) 24px}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gap);align-items:start}
.site-footer .brand img{height:39px;width:auto}
.site-footer__tag{color:rgba(255,255,255,.72);margin-top:14px;max-width:34ch}
/* links com ~42px de área de toque, largos só até o fim do texto */
.site-footer__nav,.site-footer__social{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:-9px}
.site-footer__nav a,.site-footer__social a{padding-block:9px}
.site-footer a{color:rgba(255,255,255,.85)}
.site-footer a:hover{color:var(--acid)}
.site-footer__legal{border-top:1px solid rgba(255,255,255,.15);margin-top:32px;padding-top:20px;
color:rgba(255,255,255,.6);font-size:.85rem}
.site-footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.site-footer__legal-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.site-footer__legal-links a,.site-footer__legal-links button{padding-block:6px;color:rgba(255,255,255,.75)}
.site-footer__legal-links button{border:0;background:none;padding-inline:0;font:inherit;cursor:pointer}
.site-footer__legal-links a:hover,.site-footer__legal-links button:hover{color:var(--acid)}
/* fim do rodapé livre dos botões fixos (WhatsApp e chat, 60px a 20px da borda) */
.site-footer{padding-bottom:96px}
.form-note{margin-top:12px;font-size:.85rem;color:rgba(255,255,255,.7)}
.form-note a{color:#fff;text-decoration:underline;text-underline-offset:.18em}
.form-note a:hover{color:var(--acid)}
@media (max-width:820px){
.final__grid{grid-template-columns:1fr}
.final__copy{position:static}
.site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
.site-footer__grid > :first-child{grid-column:1 / -1}
}
/* ============ ANIMAÇÕES DE ENTRADA ============ */
/* .js-reveal vem do (só com JS e sem "reduzir movimento"). Só opacity + translate
(compositor); translate é independente de transform, então não briga com os hovers.
Ao terminar, main.js marca .is-done e a animação sai do elemento (nada fica "preso"). */
@keyframes reveal-up{from{opacity:0;translate:0 var(--reveal-y,28px)}to{opacity:1;translate:0 0}}
@keyframes reveal-word{from{opacity:0;translate:0 110%}to{opacity:1;translate:0 0}}
@keyframes reveal-header{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
.js-reveal .site-header{animation:reveal-header .9s cubic-bezier(.16,1,.3,1) .05s backwards}
/* blocos e itens de grupo (cascata via --rd, calculado no main.js) */
.js-reveal :is([data-reveal]:not([data-reveal="words"]),[data-reveal-stagger] > *):not(.is-done){opacity:0}
.js-reveal :is([data-reveal]:not([data-reveal="words"]),[data-reveal-stagger] > *).is-in:not(.is-done){
animation:reveal-up 1.1s cubic-bezier(.16,1,.3,1) var(--rd,0ms) both}
/* títulos palavra a palavra: cada palavra sobe de trás de uma máscara.
clip-path (e não overflow) para não mexer na linha de base entre DM Sans e Space Mono. */
.js-reveal [data-reveal="words"]:not(.is-split){opacity:0}
.rw{display:inline-block;clip-path:inset(-.35em -.2em -.3em -.2em)}
.rw > span{display:inline-block}
.rw-tail{font-family:var(--font);font-style:normal} /* pontuação colada ao destaque, na fonte do título */
.js-reveal .rw > span:not(.is-done){opacity:0;translate:0 110%}
.js-reveal .rw > span.is-in:not(.is-done){animation:reveal-word 1s cubic-bezier(.16,1,.3,1) var(--rd,0ms) both}
/* equalizador do Anplacast acompanha o título */
.js-reveal [data-reveal="words"] .cast__eq{transition:opacity .8s ease .5s}
.js-reveal [data-reveal="words"]:not(.is-in) .cast__eq{opacity:0}
/* celular: o topo aparece pronto, sem animação (o main.js também não o anima). O título é o maior
elemento da tela (LCP); começar oculto, à espera do main.js e das fontes, custava segundos no PageSpeed. */
@media (max-width:820px){
.js-reveal .hero :is([data-reveal]:not([data-reveal="words"]),[data-reveal-stagger] > *):not(.is-done),
.js-reveal .hero [data-reveal="words"]:not(.is-split){opacity:1}
}
/* ============ PÁGINAS INTERNAS (padrões da home) ============ */
/* hero de página: mesmo fundo e mesma altura do banner da home (regras de .hero) */
.page-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,64px);align-items:center}
.page-hero__copy{display:flex;flex-direction:column;gap:22px}
/* hero só com texto (soluções): o bloco ocupa a largura que era do painel */
.page-hero--texto{grid-template-columns:minmax(0,1fr)}
.page-hero--texto .page-hero__copy{max-width:58rem}
.page-hero--texto .lead{max-width:66ch}
.hero--page .display{font-size:clamp(2.1rem,4.8vw,3.7rem)}
/* trilha de navegação */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem;color:rgba(255,255,255,.62)}
.crumbs li + li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{color:rgba(255,255,255,.82);padding-block:12px;margin-block:-12px;transition:color .2s ease} /* toque de 43px sem mudar o layout */
.crumbs a:hover{color:var(--acid)}
.crumbs [aria-current]{color:#fff}
/* painel ilustrativo da central de monitoramento */
.noc{display:grid;gap:12px;padding:16px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.noc__bar{display:flex;align-items:center;gap:6px;padding:2px 4px 12px;border-bottom:1px solid rgba(255,255,255,.1)}
.noc__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.noc__bar span{min-width:0;margin-left:8px;font:italic 700 .75rem var(--mono);color:rgba(255,255,255,.7);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noc__live{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:.72rem;
color:#38d6c4;white-space:nowrap}
.noc__live b{width:8px;height:8px;border-radius:50%;background:#38d6c4;animation:noc-pulse 2s ease-out infinite}
@keyframes noc-pulse{0%{box-shadow:0 0 0 0 rgba(56,214,196,.55)}70%,100%{box-shadow:0 0 0 8px rgba(56,214,196,0)}}
.noc__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.noc__kpi{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:14px;background:rgba(255,255,255,.05)}
.noc__kpi small{font-size:.7rem;color:rgba(255,255,255,.55)}
.noc__kpi strong{font-size:.92rem;font-weight:600;color:#fff}
.noc__kpi--warn strong{color:var(--acid)}
.noc__chart{padding:12px 12px 10px;border-radius:14px;background:rgba(255,255,255,.05)}
.noc__chart small{font-size:.7rem;color:rgba(255,255,255,.55)}
.noc__bars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:10px}
.noc__bars i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#38d6c4,rgba(56,214,196,.25))}
.noc__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.noc__list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 10px;padding:10px 12px;border-radius:12px;
background:rgba(255,255,255,.05);font-size:.84rem}
.noc__list b{font-weight:500;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.noc__list em{font-style:normal;font-size:.72rem;color:rgba(255,255,255,.6);white-space:nowrap}
.noc__dot{width:8px;height:8px;border-radius:50%;background:#38d6c4;box-shadow:0 0 0 4px rgba(56,214,196,.18)}
.noc__list .is-warn .noc__dot{background:var(--acid);box-shadow:0 0 0 4px rgba(226,226,51,.18)}
.noc__list .is-warn em{color:var(--acid)}
.noc__meter{grid-column:1 / -1;height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.noc__meter span{display:block;height:100%;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,#38d6c4,var(--acid))}
@media (max-width:920px){.page-hero{grid-template-columns:1fr}}
@media (max-width:480px){
.noc__kpis{grid-template-columns:1fr 1fr}
.noc__kpi--warn{grid-column:1 / -1}
.noc__chart{display:none} /* painel mais enxuto no celular */
}
@media (prefers-reduced-motion:reduce){.noc__live b{animation:none}}
/* antes × depois */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.compare__col{position:relative;overflow:hidden;border-radius:24px;padding:clamp(24px,3vw,40px)}
.compare__col--sem{background:var(--paper-2);border:1px solid var(--line)}
.compare__col--com{color:#fff;background:radial-gradient(90% 80% at 100% 0%,rgba(var(--accent,56,214,196),.28),transparent 60%),
linear-gradient(160deg,#16357a,var(--navy) 45%,#0a1734)}
.compare h3{font-size:clamp(1.15rem,1.5vw,1.35rem);margin-bottom:22px}
.compare ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.compare li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;line-height:1.45}
.compare li::before{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:.78rem;font-weight:700}
.compare__col--sem li{color:var(--muted)}
.compare__col--sem li::before{content:"✕";background:rgba(16,41,91,.08);color:rgba(16,41,91,.55)}
.compare__col--com li::before{content:"✓";background:var(--acid);color:var(--navy)}
@media (max-width:720px){.compare{grid-template-columns:1fr}}
/* pilares (o que inclui) */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.pillar{position:relative;display:flex;flex-direction:column;gap:10px;min-height:250px;padding:clamp(24px,2.6vw,32px);
border-radius:24px;background:var(--paper);border:1px solid var(--line);color:var(--ink);
transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.pillar:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(16,41,91,.35)}
.pillar__num{margin-bottom:auto;padding-bottom:18px;font-weight:700;font-size:clamp(2.6rem,4vw,3.4rem);line-height:1;
letter-spacing:-.02em;color:rgba(16,41,91,.13)}
.pillar h3{font-size:clamp(1.1rem,1.3vw,1.25rem);line-height:1.2}
.pillar p{color:var(--muted);font-size:.95rem;line-height:1.5}
.pillar--cta{justify-content:space-between;background:var(--acid);border-color:transparent}
.pillar--cta h3{font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.15;max-width:16ch}
.pillar__go{display:inline-flex;align-items:center;gap:.6em;font-weight:600}
.pillar--cta:hover .btn__arrow{transform:translate(2px,-2px)}
.pillar--cta .btn__arrow{transition:transform .3s ease}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}.pillar{min-height:0}.pillar__num{margin-bottom:0}}
/* número, título e texto em linhas compartilhadas entre os cards (subgrid): títulos começam na mesma
altura, e os textos também. A linha do número é flexível e absorve a altura mínima do card de chamada
(o subgrid ignora o min-height do próprio card). No celular, uma coluna só, fica o layout normal. */
@supports (grid-template-rows:subgrid) { @media (min-width:561px){
.pillars{grid-auto-rows:1fr auto auto}
.pillar{grid-row:span 3}
.pillar:not(.pillar--cta){display:grid;grid-template-rows:subgrid;row-gap:10px}
.pillar__num{margin-bottom:0;align-self:start}
}}
/* etapas (como funciona) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
.step{position:relative;padding-top:70px}
.step::before{content:"";position:absolute;top:22px;left:56px;right:calc(-1 * clamp(18px,2.2vw,32px) + 10px);height:1px;
background:linear-gradient(90deg,rgba(226,226,51,.55),rgba(255,255,255,.12))}
.step:last-child::before{display:none}
.step__n{position:absolute;top:0;left:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
border:1px solid rgba(226,226,51,.5);background:rgba(226,226,51,.07);color:var(--acid);font:italic 700 .9rem var(--mono)}
.step h3{font-size:clamp(1.05rem,1.3vw,1.2rem);margin-bottom:8px}
.step p{color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.55}
@media (max-width:900px){
.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
.step:nth-child(2)::before{display:none}
}
@media (max-width:560px){
.steps{grid-template-columns:1fr;row-gap:0}
.step{padding:0 0 30px 64px}
.step::before,.step:nth-child(2)::before{display:block;top:52px;bottom:6px;left:22px;right:auto;width:1px;height:auto;
background:linear-gradient(180deg,rgba(226,226,51,.5),rgba(255,255,255,.1))}
.step:last-child{padding-bottom:0}
.step:last-child::before{display:none}
}
/* destaque de case: mesmo card recortado de Cases (superfície SVG via main.js) */
.notch-card{position:relative;isolation:isolate;display:block;border-radius:24px;color:#fff}
.notch-card::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(130% 100% at 100% 0%,rgba(var(--glow),.34),transparent 58%),linear-gradient(160deg,#0f2352,#0a1734)}
.notch-card.has-surface::before{display:none}
.notch-card__btn{position:absolute;right:6px;bottom:6px;z-index:2;display:grid;place-items:center;width:58px;height:58px;
border-radius:50%;background:var(--acid);color:var(--navy)}
.notch-card__btn svg{width:42%;height:42%;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.notch-card:hover .notch-card__btn svg{transform:translate(2px,-2px)}
.notch-card:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.case-hl{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;
padding:clamp(10px,1vw,14px)}
.case-hl__media{position:relative;z-index:1;display:block;overflow:hidden;border-radius:16px;aspect-ratio:16/10;background:var(--navy)}
.case-hl__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.65,.3,1)}
.case-hl:hover .case-hl__media img{transform:scale(1.04)}
.case-hl__body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
padding:clamp(18px,2.4vw,32px) clamp(12px,2vw,24px) 88px 0}
.case-hl__logo{height:clamp(28px,3vw,38px);width:auto;filter:brightness(0) invert(1)}
.case-hl__text{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.55;color:rgba(255,255,255,.88);max-width:44ch}
.case-hl__more{font-weight:600;color:var(--acid)}
@media (max-width:820px){
.case-hl{grid-template-columns:1fr}
.case-hl__body{padding:8px 14px 88px}
}
/* perguntas frequentes */
.faq-sec__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.faq-sec__grid .section__head{position:sticky;top:clamp(96px,14vh,140px);margin:0}
.faq{display:grid;gap:10px}
.faq__item{border-radius:18px;background:var(--paper);border:1px solid var(--line);transition:border-color .3s ease,box-shadow .3s ease}
.faq__item[open]{border-color:rgba(16,41,91,.22);box-shadow:0 14px 32px -20px rgba(16,41,91,.3)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;
list-style:none;font-weight:600;font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.35}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:18px}
.faq__icon{position:relative;flex:0 0 32px;height:32px;border-radius:50%;background:var(--paper-2);transition:background-color .3s ease}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;margin:-1px 0 0 -6px;
border-radius:2px;background:var(--navy);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__icon{background:var(--acid)}
.faq__item[open] .faq__icon::after{transform:rotate(0)}
.faq__a{padding:0 22px 22px;color:var(--muted);line-height:1.6;max-width:68ch}
/* abertura suave onde o navegador suporta (nos demais, abre sem animação) */
:root{interpolate-size:allow-keywords}
.faq__item::details-content{block-size:0;overflow-y:clip;
transition:block-size .45s cubic-bezier(.16,1,.3,1),content-visibility .45s allow-discrete}
.faq__item[open]::details-content{block-size:auto}
@media (max-width:900px){
.faq-sec__grid{grid-template-columns:1fr}
.faq-sec__grid .section__head{position:static}
}
/* outras soluções: 2 cards clicáveis */
.solutions__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.solutions__grid--2 .sol-card{min-height:clamp(300px,28vw,360px)}
.sol-card__link{position:absolute;inset:0;z-index:3;border-radius:24px}
.sol-card__link:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
@media (min-width:601px) and (max-width:900px){
.solutions__grid--2 .sol-card:last-child{grid-column:auto;min-height:clamp(300px,40vw,360px)}
}
@media (max-width:600px){.solutions__grid--2{grid-template-columns:1fr}}
/* painel de projeto (energia corporativa): diagrama elétrico com redundância e fluxo animado */
.proj-diagram{padding:12px;border-radius:14px;background:rgba(255,255,255,.05)}
.proj-diagram svg{display:block;width:100%;height:auto;overflow:visible}
.proj-diagram__wires path{stroke:rgba(255,255,255,.2);stroke-width:1.5}
.proj-diagram__flow path{stroke:rgb(var(--accent,96,140,240));stroke-width:2;stroke-linecap:round;stroke-dasharray:3 12;
animation:proj-flow 1.4s linear infinite}
@keyframes proj-flow{to{stroke-dashoffset:-30}}
.proj-diagram__nodes rect{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.22)}
.proj-diagram__nodes .is-key{fill:rgba(226,226,51,.12);stroke:rgba(226,226,51,.6)}
.proj-diagram__labels text{fill:rgba(255,255,255,.86);font:500 10.5px var(--font);text-anchor:middle}
.proj-diagram__tag{fill:rgb(var(--accent,96,140,240));font:italic 700 9.5px var(--mono);text-anchor:middle}
@media (prefers-reduced-motion:reduce){.proj-diagram__flow path{animation:none}}
/* pilares em 4 colunas (7 serviços + CTA = 4+4) */
.pillars--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pillars--4 .pillar{min-height:260px}
.pillars--4 .pillar h3{font-size:clamp(1.02rem,1.15vw,1.15rem);hyphens:auto;overflow-wrap:break-word}
.pillars--4 .pillar--cta h3{font-size:clamp(1.2rem,1.6vw,1.45rem)}
.pillars--4 .pillar__go{font-size:clamp(.85rem,.7rem + .25vw,.92rem);gap:.45em;white-space:nowrap}
@media (max-width:1100px){.pillars--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pillars--4{grid-template-columns:1fr}.pillars--4 .pillar{min-height:0}}
/* por que a Anpla */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.why__item{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.8vw,36px);border-radius:24px;
background:var(--paper-2);color:var(--ink)}
.why__big{font-weight:700;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.05;letter-spacing:-.02em}
.why__item p{color:var(--muted);line-height:1.55}
.why__item--link{color:#fff;background:radial-gradient(90% 80% at 100% 0%,rgba(var(--accent,96,140,240),.3),transparent 60%),
linear-gradient(160deg,#16357a,var(--navy) 45%,#0a1734);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.why__item--link p{color:rgba(255,255,255,.78)}
.why__item--link:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(16,41,91,.5)}
.why__item--link:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.why__more{margin-top:auto;padding-top:8px;font-weight:600;color:var(--acid)}
.why__more span{display:inline-block;transition:transform .3s ease}
.why__item--link:hover .why__more span{transform:translateX(3px)}
@media (max-width:820px){.why{grid-template-columns:1fr}}
/* tipos de manutenção (corretiva · preventiva · preditiva) */
.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.type{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,38px);border-radius:24px;
background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.type__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--navy);color:var(--acid);margin-bottom:6px}
.type__icon svg{width:24px;height:24px}
.type h3{font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.15}
.type h3 .accent{display:block;color:var(--navy)} /* 2 linhas em todos: títulos alinhados */
.type p{color:var(--muted);line-height:1.55}
.type__goal{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.93rem}
.type__goal strong{display:block;margin-bottom:4px;font:italic 700 .78rem var(--mono);color:var(--ink)}
.type--hl{color:#fff;border-color:transparent;
background:radial-gradient(90% 70% at 100% 0%,rgba(var(--accent,226,226,51),.24),transparent 60%),linear-gradient(160deg,#16357a,var(--navy) 45%,#0a1734)}
.type--hl h3 .accent{color:var(--acid)}
.type--hl p{color:rgba(255,255,255,.78)}
.type--hl .type__goal{border-top-color:rgba(255,255,255,.16)}
.type--hl .type__goal strong{color:var(--acid)}
.type--hl .type__icon{background:var(--acid);color:var(--navy)}
@media (max-width:900px){.types{grid-template-columns:1fr}}
/* status "a seguir" no painel */
.noc__dot--idle{background:rgba(255,255,255,.3);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
/* ponte para outra solução */
.bridge-sec{padding-block:calc(var(--pad-y) * .6)}
.bridge{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;
padding:clamp(28px,4vw,52px);border-radius:28px;color:#fff;
background:radial-gradient(80% 120% at 100% 0%,rgba(56,214,196,.3),transparent 60%),linear-gradient(160deg,#16357a,var(--navy) 45%,#0a1734);
transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.bridge:hover{transform:translateY(-3px);box-shadow:0 24px 50px -26px rgba(16,41,91,.55)}
.bridge:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.bridge__text{display:flex;flex-direction:column;gap:8px;max-width:58ch}
.bridge__text strong{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15;letter-spacing:-.01em}
.bridge__text span{color:rgba(255,255,255,.78);line-height:1.55}
.bridge .btn{flex:0 0 auto}
.bridge:hover .btn__arrow{transform:translate(1px,-1px)}
.bridge .btn__arrow{transition:transform .3s ease}
@media (max-width:560px){.bridge .btn{width:100%;justify-content:center}}
/* ============ SOMOS ============ */
/* card "desde 1992" (vidro sobre o hero) */
.since{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:6px;
padding:clamp(26px,3vw,40px);border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.since::before{content:"";position:absolute;z-index:-1;width:70%;aspect-ratio:1;top:-35%;right:-20%;border-radius:50%;
background:radial-gradient(circle,rgba(var(--accent,56,214,196),.35),transparent 65%)}
.since__label{font:italic 700 .9rem var(--mono);color:rgb(var(--accent,56,214,196))}
.since__year{font-weight:700;font-size:clamp(4.5rem,10vw,8rem);line-height:.9;letter-spacing:-.04em;
background:linear-gradient(180deg,#fff 35%,rgba(var(--accent,56,214,196),.85));-webkit-background-clip:text;background-clip:text;color:transparent}
.since__text{margin-top:10px;max-width:34ch;color:rgba(255,255,255,.8);line-height:1.5}
.since__facts{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.12);
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.since__facts strong{display:block;font-size:.98rem;color:#fff}
.since__facts span{display:block;margin-top:2px;font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.6)}
@media (max-width:480px){.since__facts{grid-template-columns:1fr;gap:12px}}
/* engenharia humana + para quem */
.somos-intro__statement{margin-bottom:clamp(36px,5vw,64px)}
.somos-intro__statement .accent{white-space:nowrap} /* "dormir em paz" não se parte entre linhas */
.audience{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(20px,4vw,56px);align-items:start;
padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.audience__head h3{font-size:clamp(1.15rem,1.4vw,1.3rem);margin-bottom:10px}
.audience__head p{color:var(--muted);line-height:1.55}
.audience__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.audience__list li{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;background:var(--paper-2);
font-weight:600;font-size:.98rem}
.audience__list li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
background:rgb(var(--accent,56,214,196));box-shadow:0 0 0 4px rgba(var(--accent,56,214,196),.18)}
@media (max-width:900px){.audience{grid-template-columns:1fr}}
@media (max-width:560px){.audience__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* propósito, missão e visão */
.mvv{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(14px,1.6vw,20px)}
.mvv__card{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,40px);border-radius:24px;
background:var(--paper-2);border:1px solid var(--line)}
.mvv__card--purpose{grid-row:span 2;justify-content:space-between;min-height:340px;color:#fff;border-color:transparent;
background:radial-gradient(90% 70% at 100% 0%,rgba(var(--accent,56,214,196),.3),transparent 60%),linear-gradient(160deg,#16357a,var(--navy) 45%,#0a1734)}
.mvv__label{font:italic 700 .82rem var(--mono);color:var(--muted)}
.mvv__card--purpose .mvv__label{color:rgb(var(--accent,56,214,196))}
.mvv__card p{font-weight:500;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.4;color:var(--ink)}
.mvv__card--purpose p{font-size:clamp(1.45rem,2.5vw,2.2rem);line-height:1.2;letter-spacing:-.01em;color:#fff;text-wrap:pretty}
@media (max-width:820px){.mvv{grid-template-columns:1fr}.mvv__card--purpose{grid-row:auto;min-height:0}}
/* valores */
.values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,16px)}
.value{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:160px;padding:clamp(20px,2vw,26px);
border-radius:20px;background:var(--paper);border:1px solid var(--line);
transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.value:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(16,41,91,.35)}
.value__n{font:italic 700 .85rem var(--mono);color:rgba(16,41,91,.35);transition:color .3s ease}
.value:hover .value__n{color:var(--navy)}
.value__name{font-weight:600;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.25;hyphens:auto;overflow-wrap:break-word}
@media (max-width:1000px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}.value{min-height:120px}}
/* onde a Anpla está */
.places{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,16px)}
.place{display:flex;flex-direction:column;gap:22px;min-height:184px;padding:clamp(20px,2.2vw,28px);border-radius:22px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
transition:background-color .35s ease,border-color .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.place:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);transform:translateY(-3px)}
.place__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
background:rgba(var(--accent,56,214,196),.14);color:rgb(var(--accent,56,214,196))}
.place__icon svg{width:22px;height:22px}
.place__name{margin-top:auto;font-weight:600;font-size:1.02rem;line-height:1.3;color:#fff}
.place--cta{padding:0;background:var(--acid);border-color:transparent}
.place--cta:hover{background:var(--acid);border-color:transparent}
.place--cta a{display:flex;flex-direction:column;justify-content:space-between;gap:22px;height:100%;padding:clamp(20px,2.2vw,28px);color:var(--navy)}
.place--cta a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:22px}
.place--cta .place__name{margin-top:0;font-size:clamp(1.15rem,1.5vw,1.3rem);color:var(--navy)}
.place__go{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem}
@media (max-width:1000px){.places{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){
.places{grid-template-columns:1fr}
.place{flex-direction:row;align-items:center;min-height:0}
.place__name{margin-top:0}
.place--cta a{flex-direction:column;align-items:flex-start}
}
/* menu: página atual */
.site-nav > a[aria-current="page"],.nav-dd__toggle.is-current{position:relative}
.site-nav > a[aria-current="page"]::after,.nav-dd__toggle.is-current::after{content:"";position:absolute;left:0;right:0;bottom:.35em;
height:2px;border-radius:2px;background:var(--acid)}
.nav-dd__toggle.is-current::after{right:22px}
.site-nav a.nav-dd__item[aria-current="page"]{background:rgba(16,41,91,.06)}
.site-footer__nav a[aria-current="page"]{color:var(--acid)}
@media (max-width:820px){
.site-nav > a[aria-current="page"]::after,.nav-dd__toggle.is-current::after{display:none}
.site-header .site-nav > a[aria-current="page"],.site-header .site-nav .nav-dd__toggle.is-current{color:var(--navy);font-weight:700}
}
/* ============ CASES ============ */
/* painel de logos no hero */
.logo-wall{list-style:none;margin:0;padding:clamp(14px,1.6vw,20px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.logo-wall__tile{display:grid;place-items:center;aspect-ratio:4/3;padding:18px;border-radius:18px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:background-color .35s ease}
.logo-wall__tile:hover{background:rgba(255,255,255,.09)}
.logo-wall__tile img{width:auto;max-width:82%;max-height:44px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.logo-wall__tile--you{padding:0;background:var(--acid);border-color:transparent}
.logo-wall__tile--you:hover{background:var(--acid)}
.logo-wall__tile--you a{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;width:100%;height:100%;
padding:16px 18px;border-radius:18px;color:var(--navy);font-weight:600;line-height:1.2}
.logo-wall__tile--you a:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:480px){
.logo-wall__tile{padding:12px}
.logo-wall__tile--you{padding:0}
.logo-wall__tile img{max-height:32px}
.logo-wall__tile--you a{flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:10px;font-size:.82rem}
.logo-wall__tile--you .btn__arrow{display:none} /* célula pequena: o card acid já indica a ação */
.logo-wall__tile--you a{text-align:center}
}
/* case em destaque: desafio · solução · resultados */
.cdr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:clamp(14px,1.6vw,20px)}
.cdr__item{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.8vw,34px);border-radius:24px;background:var(--paper-2);border:1px solid var(--line)}
.cdr__label{font:italic 700 .82rem var(--mono);color:var(--muted)}
.cdr__item p{line-height:1.55}
.cdr__item--result{color:#fff;border-color:transparent;
background:radial-gradient(90% 70% at 100% 0%,rgba(var(--accent,56,214,196),.28),transparent 60%),linear-gradient(160deg,#16357a,var(--navy) 45%,#0a1734)}
.cdr__item--result .cdr__label{color:var(--acid)}
.cdr__item--result ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cdr__item--result li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;line-height:1.45;color:rgba(255,255,255,.9)}
.cdr__item--result li::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;
background:var(--acid);color:var(--navy);font-size:.7rem;font-weight:700}
@media (max-width:900px){.cdr{grid-template-columns:1fr}}
/* demais cases */
.case-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.case-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:22px;min-height:260px;padding:clamp(26px,3vw,40px);
border-radius:24px;color:#fff;background:radial-gradient(110% 90% at 100% 0%,rgba(var(--glow),.3),transparent 58%),linear-gradient(160deg,#0f2352,#0a1734);
transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.case-card:hover{transform:translateY(-3px);box-shadow:0 22px 46px -24px rgba(16,41,91,.55)}
.case-card__logo{height:clamp(34px,3.4vw,46px);width:auto;max-width:60%;object-fit:contain;object-position:left;filter:brightness(0) invert(1)}
.case-card p{margin-top:auto;max-width:46ch;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.55;color:rgba(255,255,255,.86)}
.case-card__link{align-self:flex-start;font-weight:600;color:var(--acid);padding-block:10px;margin-block:-10px}
.case-card__link span{display:inline-block;transition:transform .3s ease}
.case-card__link:hover span{transform:translate(2px,-2px)}
@media (max-width:720px){.case-cards{grid-template-columns:1fr}.case-card{min-height:0}}
/* WordPress: com a barra de admin (usuário logado), o cabeçalho fixo desce junto */
body:has(#wpadminbar) .site-header{top:var(--wp-admin--admin-bar--height,32px)}
/* ============ 404 ============ */
/* teste: página clara e sem rodapé (o rodapé segue no HTML por causa do script e do botão do WhatsApp) */
.page-404{background:var(--paper)}
.page-404 .site-footer{display:none}
.err404{text-align:center;color:var(--ink);background:var(--paper)}
.err404::before{content:none}
.err404 .display{color:var(--ink)}
.err404 .accent{color:var(--navy)} /* acento sobre branco: navy, nunca acid */
.err404 .lead{color:var(--muted)}
.err404 .btn--ghost{color:var(--navy);border-color:rgba(16,41,91,.3);background:transparent}
.err404 .btn--ghost:hover{border-color:var(--navy)}
.err404__inner{display:flex;flex-direction:column;align-items:center;gap:22px}
/* o número fica atrás do ícone sem ocupar altura: pode ser enorme sem empurrar o texto para fora da tela */
.err404__art{position:relative;display:grid;place-items:center;width:100%;margin-bottom:clamp(0px,1vw,12px)}
.err404__num{position:absolute;left:50%;top:50%;z-index:-1;margin:0;transform:translate(-50%,-50%);
font-weight:700;line-height:.8;letter-spacing:-.06em;white-space:nowrap;
font-size:clamp(11rem,52vw,42rem);color:rgba(16,41,91,.07);user-select:none;pointer-events:none}
.err404__icon{position:relative;width:clamp(140px,19vw,250px)}
.err404__icon img{display:block;width:100%;height:auto;
filter:drop-shadow(0 18px 36px rgba(56,214,196,.28));animation:err404-float 6s ease-in-out infinite}
@keyframes err404-float{0%,100%{transform:translateY(6px) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.err404 .display{font-size:clamp(2rem,4.4vw,3.4rem);max-width:none}
.err404 .lead{max-width:none;margin-inline:auto}
.err404 .hero__cta{justify-content:center}
@media (prefers-reduced-motion:reduce){.err404__icon img{animation:none}}
/* computador: arte acompanha a altura da tela (botões na primeira dobra); título e apoio em uma linha */
@media (min-width:821px){
.err404{padding-top:clamp(150px,19vh,240px)}
.err404__icon{width:clamp(120px,min(19vw,24vh),250px)}
.err404__num{font-size:clamp(12rem,min(44vw,62vh),40rem)}
.err404 .display,.err404 .lead{white-space:nowrap}
}
/* ============ FERRAMENTAS ============ */
/* calculadora de autonomia (partials/calculadora-autonomia.html, código do cliente intacto): identidade do
site por cima das variáveis dela. O