/* =========================================================
PIANISTA — DESIGN SYSTEM
Vermelho #CB1516 · Cinza #C1C1C1 · Branco · Preto/Grafite
Space Grotesk (display) + Manrope (corpo)
Formas quadradas/retangulares. border-radius:0 sempre.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
--red:#CB1516;
--gray:#C1C1C1;
--white:#FFFFFF;
--black:#111112;
--graphite:#1A1B1D;
--graphite-2:#232427;
--font-display:'Space Grotesk', sans-serif;
--font-body:'Manrope', sans-serif;
--diagonal-angle:22deg;
--ease-mech:cubic-bezier(.65,0,.35,1);
--radius:0;
--gutter:80px;
--max:1440px;
--box-pad:40px;
--space-1:8px;
--space-2:16px;
--space-3:24px;
--space-4:32px;
--space-5:40px;
--space-6:48px;
--space-8:64px;
--space-10:80px;
--space-12:96px;
--moldura:32px;
}
@media(max-width:1023px){
:root{ --gutter:40px; --box-pad:32px; --moldura:18px; }
}
@media(max-width:767px){
:root{ --gutter:20px; --box-pad:24px; --moldura:12px; }
}

*,*::before,*::after{box-sizing:border-box; border-radius:0 !important;}
html{scroll-behavior:smooth;}
body{
margin:0;
background-color:var(--black);
background-image:repeating-linear-gradient(to right, rgba(255,255,255,.055) 0, rgba(255,255,255,.055) 1px, transparent 1px, transparent 160px);
color:var(--white);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}

/* Reforço: o site já tem CSS de tema/plugins (ex: acessibilidade) que reseta
cor/transição/transform globalmente. Isso força nosso sistema a vencer
dentro do nosso próprio contêiner, sem tocar no resto do site. */
.pianista-redesign, .pianista-redesign *{
color: inherit !important;
}
.pianista-redesign{ color:var(--white) !important; }
.pianista-redesign .on-light, .pianista-redesign .on-light *{ color:var(--black) !important; }
.pianista-redesign .lede{ color:var(--gray) !important; }
.pianista-redesign .on-light .lede{ color:#4a4a4a !important; }
.pianista-redesign .eyebrow, .pianista-redesign .eyebrow::before{ color:var(--red) !important; }
.pianista-redesign .text-accent{ color:var(--red) !important; }
.pianista-redesign .on-light .text-accent{ color:var(--red) !important; }
/* botões precisam de cor própria, não herdada — o color:inherit acima deixava
"Agendar uma conversa"/"Falar com a Pianista" brancos sobre fundo branco
dentro das seções .convert (vermelhas), pois herdavam o branco do texto
da seção em vez de usar a cor de contraste do próprio botão. */
.pianista-redesign .btn-primary{ color:var(--white) !important; }
.pianista-redesign .btn-primary:hover{ color:var(--red) !important; }
.pianista-redesign .convert .btn-primary{ color:var(--red) !important; }
.pianista-redesign .convert .btn-primary:hover{ color:var(--white) !important; }
.pianista-redesign .convert .btn-outline{ color:var(--white) !important; }
.pianista-redesign .convert .btn-outline:hover{ color:var(--red) !important; }
.pianista-redesign .on-light .btn:not(.btn-primary){ color:var(--black) !important; }
.pianista-redesign .on-light .btn:not(.btn-primary):hover{ color:var(--white) !important; }
.pianista-redesign *{
/* FIX: "background-color" saiu desta lista forçada — ela existe só pra
vencer resets de opacity/transform/animation de outros plugins (ver
comentário acima), mas por tabela fazia QUALQUER troca de background-color
(ex: seção que liga/desliga ".on-light") animar durante ~0.6-0.7s herdado
de regras como ".reveal". No meio dessa transição, interpolar de
"transparente" pra uma cor sólida passa por tons que não existem em
nenhum estado real do site (o "flash" ciano visto no scroll, num quadrado
decorativo vermelho virando branco). Nunca foi intencional animar
background-color — só opacity/transform (reveals) e border-color/clip-path
(hovers, wipes) precisam disso. */
transition-property: opacity, transform, border-color, clip-path !important;
animation-name: revert !important;
}
.pianista-redesign .hero h1 .line span{ transition:transform .8s var(--ease-mech) !important; }
.pianista-redesign .hero.revealed h1 .line span{ transform:translateY(0) !important; }
.pianista-redesign .hero-sub, .pianista-redesign .hero-ctas{ transition:opacity .6s var(--ease-mech), transform .6s var(--ease-mech) !important; }
.pianista-redesign .hero.revealed .hero-sub, .pianista-redesign .hero.revealed .hero-ctas{ opacity:1 !important; transform:translateY(0) !important; }
.pianista-redesign .reveal{ transition:opacity .7s var(--ease-mech), transform .7s var(--ease-mech) !important; }
.pianista-redesign .reveal.in{ opacity:1 !important; transform:translateY(0) !important; }

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}

/* ---------- typography ---------- */
/* rede de seguranca: se alguma pagina cair no fallback do tema (sem o
header customizado — ex: /vagas/, que nao tem template proprio ainda),
a logo padrao do WordPress (.custom-logo) renderiza no tamanho real do
arquivo enviado, virando um logo gigante cobrindo a tela. Trava um
tamanho sensato em qualquer contexto, mesmo fora do header customizado. */
.custom-logo{ max-height:56px !important; width:auto !important; height:auto !important; }
/* titulo principal da pagina de Politica de Cookies (widget Elementor
especifico, elementor-element-f0baa3e) estava usando Manrope em vez de
Space Grotesk — todo resto do site usa Space Grotesk pra titulos. */
.elementor-element-f0baa3e .elementor-heading-title{ font-family:var(--font-display) !important; }
h1,h2,h3,.disp{font-family:var(--font-display); font-weight:600; line-height:1.02; letter-spacing:-.01em; margin:0;}
.h1{font-size:clamp(2.4rem, 6vw, 5.6rem);}
.page-head .h1{font-size:55px;}
.h2{font-size:clamp(1.8rem, 4vw, 3.4rem);}
.h3{font-size:clamp(1.2rem, 2.4vw, 1.8rem);}
p{margin:0; line-height:1.55;}
.lede{font-size:clamp(1rem, 1.6vw, 1.25rem); color:var(--gray); max-width:46ch;}

.eyebrow{
font-family:var(--font-body); font-weight:700; font-size:.72rem;
letter-spacing:.18em; text-transform:uppercase; color:var(--red);
display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{content:'//'; color:var(--gray); font-weight:700;}
.eyebrow.on-white{color:var(--red);}
/* pedido do cliente: remover o padrao "// alguma coisa" (rotulo em
caixa alta acima dos titulos) usado em quase toda secao do site. */
.eyebrow{ display:none !important; }

.num{
font-family:var(--font-display); font-weight:700;
color:var(--gray); opacity:.35; line-height:1;
}

/* ---------- buttons (never capsule) ---------- */
.btn{
display:inline-flex; align-items:center; gap:.6em;
padding:1em 1.8em; font-family:var(--font-body); font-weight:700;
font-size:.85rem; letter-spacing:.03em; text-transform:uppercase;
border:1.5px solid var(--white); background:transparent; color:var(--white);
transition:background var(--ease-mech) .25s, color var(--ease-mech) .25s, border-color var(--ease-mech) .25s;
position:relative; overflow:hidden;
}
.btn .cut{
width:12px; height:10px; position:relative; display:inline-block; flex:none;
}
.btn .cut::before{
content:''; position:absolute; left:0; top:50%; height:2px; width:0;
background:var(--red); transform:translateY(-50%);
transition:width var(--ease-mech) .3s;
}
.btn .cut::after{
content:''; position:absolute; right:0; top:50%; width:7px; height:7px;
border-top:2px solid var(--red); border-right:2px solid var(--red);
transform:translateY(-50%) rotate(45deg) scale(0); opacity:0;
transition:transform var(--ease-mech) .3s, opacity .2s ease;
}
.btn:hover .cut::before{width:10px;}
.btn:hover .cut::after{transform:translateY(-50%) rotate(45deg) scale(1); opacity:1;}
.btn-primary{background:var(--red); border-color:var(--red); color:var(--white);}
.btn-primary:hover{background:var(--white); color:var(--red); border-color:var(--white);}
.btn-outline:hover{background:var(--white); color:var(--black);}
.btn-dark{border-color:var(--black); color:var(--black);}
.btn-dark:hover{background:var(--black); color:var(--white);}

/* ---------- header ---------- */
.site-header{
position:fixed; top:0; left:0; right:0; z-index:200;
display:flex; align-items:center; justify-content:space-between;
padding:20px var(--gutter);
background:transparent;
transition:background var(--ease-mech) .35s, border-color var(--ease-mech) .35s, backdrop-filter .35s;
border-bottom:1px solid transparent;
}
.site-header.scrolled{
background:rgba(17,17,18,.86); backdrop-filter:blur(10px);
border-bottom-color:rgba(255,255,255,.08);
}
.logo{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:700; letter-spacing:.02em;}
.logo-mark{width:34px; height:34px;}
.logo small{display:block; font-family:var(--font-body); font-weight:500; color:var(--gray); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;}

.nav{display:flex; gap:clamp(16px,2.6vw,40px);}
.nav a{
font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
padding-bottom:6px; border-bottom:2px solid transparent; color:var(--white);
transition:border-color .2s;
}
.nav a.active, .nav a:hover{border-color:var(--red);}
.nav-toggle{display:none;}

.studio-clock{
position:absolute; right:var(--gutter); top:70px;
font-size:.68rem; letter-spacing:.06em; color:var(--gray); font-family:var(--font-body);
display:none;
}
@media(min-width:900px){.studio-clock{display:block;}}

/* ---------- preloader ---------- */
.preloader{
position:fixed; inset:0; z-index:999; display:flex;
}
.preloader-panel{flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:32px;}
.preloader-panel.red{background:var(--red); color:var(--white);}
.preloader-panel.graphite{
background:var(--graphite); color:var(--gray);
background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size:18px 18px;
}
.pl-status{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;}
.pl-chip{
align-self:flex-end; border:1px solid currentColor; padding:.5em 1em;
font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
opacity:0; transition:opacity .2s;
}
.pl-chip.ready{opacity:1;}
.pl-mark{margin:auto;}
.preloader.done{opacity:0; visibility:hidden; transition:opacity .35s var(--ease-mech), visibility 0s .35s;}
@media(max-width:760px){.preloader{flex-direction:column;}}

/* diagonal logo mark build (svg) */
.diag-mark rect,
.diag-mark path{
stroke:currentColor; fill:none; stroke-width:3;
}
.diag-mark .bar{fill:currentColor; stroke:none;}

/* ---------- diagonal shard removido: inconsistente entre páginas, sem
solução rápida que ficasse igual em todas — decisão do cliente foi tirar
em vez de continuar ajustando. .hero-shard segue existindo no HTML de
algumas páginas (elemento vazio, aria-hidden), só não é mais renderizado. ---------- */
.page-head{ overflow:hidden; background:#070707; }
.hero-shard{ display:none; }
.page-head > .wrap, .hero > .wrap{position:relative; z-index:1;}

/* fundo sólido do breadcrumb até o título — sem isso o breadcrumb mostra
o preto do body (--black, mais claro) e o título mostra este #070707,
criando uma emenda horizontal visível entre as duas faixas. Contêiner
completo de cada página (breadcrumb + eyebrow + título), 65-formato
nativo Elementor (Contato) ou custom HTML (Sobre Nós/Serviços). */
.elementor-element-a677995,
.elementor-element-5748891,
.elementor-element-pnstA1,
.elementor-element-pnstS1,
.elementor-element-5c71804{
background:#070707;
}

/* ---------- hero ---------- */
.hero{
overflow:hidden;
min-height:calc(100vh - var(--moldura)); display:flex; flex-direction:column; justify-content:center;
padding:96px var(--gutter) 64px; position:relative; background:var(--black);
/* sangra até a borda real da tela, igual o header (que já é fixed e
ignora a margem da moldura). FIX: antes usava a técnica 100vw/
calc(50% - 50vw), que não compensa a largura da scrollbar — o cálculo
de 50vw usa o viewport inteiro (inclui a scrollbar), enquanto o 50%
do body (que já está sem a scrollbar) não bate, deixando a moldura
sobrando de um lado só (visualmente torta) e cortada do outro por
"overflow-x:clip". Troca por margem negativa relativa ao próprio
--moldura do body: sempre simétrica, em qualquer navegador/scrollbar,
sem depender de vw. */
}
.hero-carousel{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide{
position:absolute; inset:0;
background-size:cover; background-position:center;
opacity:0; transform:scale(1);
transition:opacity 1.1s ease;
filter:grayscale(1) contrast(1.15) brightness(.95);
will-change:opacity, transform;
}
.hero-slide.is-active{ opacity:1; animation:heroKenBurns 6s ease-out forwards; }
/* duotone — mantém a fotografia real, mas força a paleta vermelho/preto da
marca por cima do preto-e-branco (filter acima); várias fotos de cases
com cores muito diferentes entre si (turquesa, rosa, verde) passam a ler
como uma peça única, não como fotos soltas brigando entre si. */
.hero-tint{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:var(--red); mix-blend-mode:color; opacity:.85;
}
@keyframes heroKenBurns{
from{ transform:scale(1); }
to{ transform:scale(1.07); }
}
.hero-video-overlay{
position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(180deg, rgba(7,7,7,.6) 0%, rgba(7,7,7,.45) 45%, rgba(7,7,7,.85) 100%);
}
.hero .wrap{ position:relative; z-index:4; }
.hero .diagonal-sweep{
position:absolute; inset:0; background:var(--red); z-index:3;
clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);
transform-origin:top left;
pointer-events:none;
}
.hero.revealed .diagonal-sweep{ animation:sweepOff .7s var(--ease-mech) forwards; }

/* conteúdo do case ativo — vira o próprio texto principal da hero (igual
housecricket.com.br: eyebrow = cliente/categoria, título grande = case,
CTA leva pro case), trocando junto com a imagem/contador/setas. */
.hero-case-content{ display:none; }
.hero-case-content.is-active{ display:block; animation:heroCaseIn .6s var(--ease-mech) forwards; }
@keyframes heroCaseIn{
from{ opacity:0; transform:translateY(14px); }
to{ opacity:1; transform:translateY(0); }
}
.hero-case-content .hero-case-title{ margin-top:14px; }

/* contador editorial + setas (inspirado em housecricket.com.br) */
.hero-counter{
position:absolute; z-index:5; left:var(--gutter); bottom:44px;
display:flex; align-items:center; gap:12px;
font-family:var(--font-body); font-weight:600;
}
.hero-counter .cur{
font-family:var(--font-display); font-weight:600; font-size:1.7rem; color:var(--white);
font-variant-numeric:tabular-nums;
}
.hero-counter .tick{ width:1px; height:28px; background:rgba(255,255,255,.32); transform:rotate(16deg); }
.hero-counter .tot{ font-size:.85rem; color:rgba(255,255,255,.42); font-variant-numeric:tabular-nums; }

.hero-nav-arrows{
position:absolute; inset:0; z-index:5; pointer-events:none;
display:flex; align-items:center; justify-content:space-between;
padding:0 28px;
}
.hero-nav-arrow{
all:unset; box-sizing:border-box; pointer-events:auto; cursor:pointer;
width:46px; height:46px; display:flex; align-items:center; justify-content:center;
color:rgba(255,255,255,.55);
transition:color .25s ease, transform .25s var(--ease-mech), border-color .25s ease;
border:1px solid rgba(255,255,255,.16);
}
.hero-nav-arrow svg{ width:20px; height:20px; }
.hero-nav-arrow:hover{ color:var(--white); border-color:var(--red); transform:scale(1.06); }

@media(max-width:1023px){
.hero-case-strip{ max-width:240px; top:0; }
.hero-nav-arrows{ padding:0 12px; }
.hero-nav-arrow{ width:38px; height:38px; }
}
@media(max-width:767px){
.hero-nav-arrows{ display:none; }
.hero-counter{ left:var(--gutter); bottom:28px; }
}
@media(prefers-reduced-motion:reduce){
.hero-slide{ transition:none; animation:none !important; transform:none !important; }
.hero-slide.is-active{ opacity:1; }
.hero-case-content.is-active{ animation:none; opacity:1; transform:none; }
}
@keyframes sweepOff{
0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
60%{clip-path:polygon(0 0,100% 0,100% 0,-40% 140%);}
100%{clip-path:polygon(0 0,100% 0,100% 0,-40% 0);}
}
.hero-eyebrow{margin-bottom:22px;}
.hero h1{max-width:16ch; overflow:hidden;}
.hero h1 .line{display:block; overflow:hidden;}
.hero h1 .line span{
display:block; transform:translateY(110%); transition:transform .8s var(--ease-mech);
}
.hero.revealed h1 .line span{transform:translateY(0);}
.hero h1 .line:nth-child(2) span{transition-delay:.08s;}
.hero h1 .line:nth-child(3) span{transition-delay:.16s;}
.hero-sub{margin-top:26px; max-width:52ch; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease-mech) .5s, transform .6s var(--ease-mech) .5s;}
.hero.revealed .hero-sub{opacity:1; transform:translateY(0);}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-top:38px; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease-mech) .62s, transform .6s var(--ease-mech) .62s;}
.hero.revealed .hero-ctas{opacity:1; transform:translateY(0);}

/* ---------- sections generic ---------- */
section{position:relative;}
.sec{padding:clamp(90px,12vw,180px) 0;}
.sec-tight{padding:clamp(60px,8vw,110px) 0;}
.divider{height:1px; background:rgba(255,255,255,.12); width:100%;}
.sec-head{display:flex; flex-direction:column; gap:20px; margin-bottom:clamp(56px,7vw,100px); max-width:60ch;}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-mech), transform .7s var(--ease-mech);}
.reveal.in{opacity:1; transform:translateY(0);}

/* máscara fotográfica — fotos de case/bastidor reveladas por wipe diagonal
ao entrar na viewport, nunca fade simples (reference-motion.md §3) */
.reveal-photo{overflow:hidden;}
.reveal-photo img, .reveal-photo video{
clip-path:polygon(0 0, 0 0, -20% 100%, -20% 100%);
transition:clip-path .85s var(--ease-mech);
}
.reveal-photo.in img, .reveal-photo.in video{
clip-path:polygon(0 0, 120% 0, 100% 100%, -20% 100%);
}

/* negative-space breather between hero and content, biipmk-style */
.breather{height:22vh;}
@media(max-width:760px){.breather{height:10vh;}}

/* ---------- problem list ---------- */
.problem-list{border-top:1px solid rgba(255,255,255,.12);}
.problem-row{
display:grid; grid-template-columns:64px 1fr 40px; align-items:center; gap:24px;
padding:20px 0; border-bottom:1px solid rgba(255,255,255,.12);
transition:background var(--ease-mech) .2s;
}
.problem-row:hover{background:rgba(255,255,255,.03);}
.problem-row .num{font-size:1.1rem;}
.problem-row .txt{font-size:clamp(1rem,1.8vw,1.3rem); font-family:var(--font-display); font-weight:500;}
.problem-row .tick{width:22px; height:2px; background:var(--red); transform:rotate(-40deg); justify-self:end;}

/* ---------- pillars think/execute ---------- */
.pillars{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,.12);}
@media(min-width:760px){.pillars{grid-template-columns:1fr 1fr;}}
.pillar{background:var(--black); padding:var(--box-pad);}
.pillar h3{margin-bottom:18px;}
.pillar li{padding:8px 0; border-top:1px solid rgba(255,255,255,.08); color:var(--gray); font-size:.95rem;}
.pillar li:first-child{border-top:none;}

/* ---------- odometer counters ---------- */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.12);}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr);}}
.stat{background:var(--black); padding:var(--box-pad);}
.odometer{
font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4vw,3.2rem);
display:flex; overflow:hidden; height:1.1em;
}
.od-digit{position:relative; width:.62em; height:1.1em; overflow:hidden;}
.od-digit .col{
position:absolute; left:0; top:0; display:flex; flex-direction:column;
transform:translateY(0); transition:transform 1.1s var(--ease-mech);
}
.od-digit .col span{height:1.1em; line-height:1.1em;}
.stat .cap{margin-top:10px; font-size:.78rem; color:var(--gray); letter-spacing:.04em;}

/* ---------- process cards (Golden Launch "what we need from you") ---------- */
.process{display:grid; gap:1px; background:rgba(255,255,255,.12);}
.process-card{
display:grid; grid-template-columns:48px 1fr; gap:16px; background:var(--black); padding:32px 0;
border-bottom:1px solid rgba(255,255,255,.12);
}
@media(min-width:560px){.process-card{grid-template-columns:96px 1fr; gap:32px; padding:42px 0;}}
.process-card .num{font-size:1.6rem; opacity:.5;}
@media(min-width:560px){.process-card .num{font-size:2.6rem;}}
.process-card h4{font-family:var(--font-display); font-size:1.15rem; margin:0 0 8px;}
.process-card .need{margin-top:14px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.2);}
.process-card .need .eyebrow{font-size:.62rem; margin-bottom:6px;}

/* ---------- negations ---------- */
.negations{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,.1);}
@media(min-width:700px){.negations{grid-template-columns:1fr 1fr;}}
.negation{background:var(--black); padding:28px 32px; display:flex; gap:18px; align-items:flex-start;}
.negation .x{color:var(--red); font-family:var(--font-display); font-weight:700; font-size:1.2rem;}
.negation p{color:var(--gray);}

/* ---------- plan cards ---------- */
.plans{display:grid; grid-template-columns:1fr; gap:28px;}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr);}}
.plan{border:1px solid rgba(255,255,255,.16); padding:var(--box-pad); display:flex; flex-direction:column; gap:22px;}
.plan h3{font-size:1.3rem;}
.plan .price{font-family:var(--font-display); font-size:1.8rem; margin-top:auto;}
.plan .price small{display:block; font-family:var(--font-body); font-size:.68rem; color:var(--gray); letter-spacing:.1em; text-transform:uppercase;}
.plan ul{display:flex; flex-direction:column; gap:8px; font-size:.88rem; color:var(--gray);}
.plan li{display:flex; gap:10px;}
.plan li::before{content:''; width:8px; height:8px; background:var(--red); margin-top:6px; flex:none;}
.plan .commit{display:flex; justify-content:space-between; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); border-top:1px solid rgba(255,255,255,.12); padding-top:14px;}

/* ---------- cases grid / list ---------- */
.cases-filter{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px;}
.filter-btn{
border:1px solid rgba(255,255,255,.3); padding:.6em 1.1em; font-size:.72rem;
letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--gray);
background:transparent; transition:all var(--ease-mech) .2s;
}
.filter-btn.active, .filter-btn:hover{border-color:var(--red); color:var(--white); background:rgba(203,21,22,.12);}

.case-list{border-top:1px solid rgba(255,255,255,.14);}
.case-row{
display:grid; grid-template-columns:1fr; gap:24px;
padding:32px 0; border-bottom:1px solid rgba(255,255,255,.14);
position:relative;
}
@media(min-width:820px){.case-row{grid-template-columns:340px 1fr; align-items:center;}}
.case-thumb{
position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid rgba(255,255,255,.1);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"),
linear-gradient(135deg, var(--graphite-2) 0%, var(--graphite-2) 46%, var(--red) 46%, var(--red) 100%),
repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
var(--black);
background-blend-mode:overlay, normal, normal, normal;
transition:transform .6s var(--ease-mech);
}
.case-row:hover .case-thumb{transform:scale(1.02);}
.case-thumb-video{background:var(--black);}
.case-thumb-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.08);}

/* fotografia real, tratada em duotone vermelho/grafite — nunca a cor original da foto solta */
.case-thumb-photo img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:grayscale(.35) contrast(1.05);
}
.case-thumb::before{
content:''; position:absolute; top:0; right:0; width:0; height:0;
border-style:solid; border-width:0 46px 46px 0; border-color:transparent var(--red) transparent transparent; opacity:.85;
}
.case-thumb .tick{
position:absolute; top:12px; right:12px; width:26px; height:2px; background:var(--white);
transform:rotate(-40deg); opacity:0; transition:opacity .2s; z-index:2;
}
.case-row:hover .case-thumb .tick{opacity:1;}
.case-thumb .ph-label{position:absolute; bottom:10px; left:10px; font-size:.62rem; letter-spacing:.1em; color:var(--gray); text-transform:uppercase; z-index:2;}
.case-meta{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; font-size:.8rem;}
@media(min-width:600px){.case-meta{grid-template-columns:repeat(3,1fr);}}
.case-meta .field{display:flex; flex-direction:column; gap:4px;}
.case-meta .field span:first-child{color:var(--gray); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;}
.case-meta .field span:last-child{font-family:var(--font-display); font-weight:600;}
.case-title{grid-column:1/-1; font-family:var(--font-display); font-size:1.3rem; margin:2px 0 4px;}

/* ---------- fix: filtro de categorias do Cases (plugin Pianista Cases
Panel, classe .pcs-v1-track) tinha overflow-x:auto sem indicador visual
de que rolava — no desktop, categorias como "Indústria & Agronegócio"
ficavam cortadas na borda direita, sem afordance nenhuma de scroll.
A partir de tablet, quebra em várias linhas em vez de rolar escondido;
no mobile mantém o scroll horizontal (faz sentido lá), só ganha uma
pista visual (fade) de que continua. ---------- */
@media(min-width:768px){
.pcs-v1-track{ flex-wrap:wrap !important; overflow-x:visible !important; }
}
@media(max-width:767px){
.pcs-v1-wrap{ position:relative; }
.pcs-v1-wrap::after{
content:''; position:absolute; top:0; right:0; bottom:0; width:32px;
background:linear-gradient(90deg, transparent, var(--black) 85%);
pointer-events:none;
}
}

/* ---------- fix: toggle grade/lista do Cases (.pcs-view-toggle) ficava
embaixo do botão flutuante do Maestro no canto inferior direito —
os dois brigavam pelo mesmo espaço logo abaixo da dobra. ---------- */
.pcs-view-toggle{ padding-right:120px !important; box-sizing:border-box; }
@media(max-width:600px){
.pcs-view-toggle{ padding-right:90px !important; }
}

/* ---------- testimonials ---------- */
.testis{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:760px){.testis{grid-template-columns:repeat(3,1fr);}}
.testi{border:1px solid rgba(255,255,255,.16); padding:var(--box-pad); display:flex; flex-direction:column; gap:24px;}
.testi q{font-family:var(--font-display); font-size:1.02rem; line-height:1.4;}
.testi-who{display:flex; align-items:center; gap:12px; border-top:1px solid rgba(255,255,255,.12); padding-top:14px;}
.testi-photo{width:44px; height:44px; background:var(--graphite-2); flex:none; border:1px solid rgba(255,255,255,.14);}
.testi-who strong{display:block; font-size:.85rem;}
.testi-who span{font-size:.72rem; color:var(--gray);}

/* ---------- closing word ---------- */
.closing-word{
overflow:hidden; padding:0 0 40px; text-align:left;
}
.closing-word .big{
font-family:var(--font-display); font-weight:700; text-transform:uppercase;
font-size:clamp(2.1rem,12vw,9rem); line-height:.94; letter-spacing:-.02em;
white-space:normal; display:block; max-width:100%;
}
@media(min-width:640px){.closing-word .big{white-space:nowrap; line-height:.86;}}

/* ---------- conversion module (reused every page) ---------- */
.convert{background:var(--red); color:var(--white); padding:clamp(60px,8vw,100px) 0;}
.convert .wrap{display:flex; flex-direction:column; gap:28px;}
.convert h2{max-width:20ch;}
.convert-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.convert .btn{border-color:var(--white);}
.convert .btn-primary{background:var(--white); color:var(--red); border-color:var(--white);}
.convert .btn-primary:hover{background:transparent; color:var(--white);}
.convert .btn-outline:hover{background:var(--white); color:var(--red);}

/* ---------- footer ---------- */
footer.site-footer{background:var(--graphite); padding:60px 0 26px; border-top:1px solid rgba(255,255,255,.08);}
.footer-grid{display:grid; grid-template-columns:1fr; gap:36px;}
@media(min-width:820px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer-grid h5{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); margin-bottom:16px;}
.footer-grid a{display:block; font-size:.88rem; color:var(--white); padding:5px 0;}
.footer-grid a.icon-link{display:flex; align-items:center; gap:12px;}
.footer-grid a.icon-link .icon{width:18px; height:18px; flex:none;}
.footer-grid a.icon-link:hover{color:var(--red);}
.footer-bottom{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin-top:50px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); font-size:.72rem; color:var(--gray);}

.maestro-fab{
position:fixed; right:24px; bottom:24px; z-index:150;
background:var(--red); color:var(--white); padding:.9em 1.3em; font-weight:700;
font-size:.8rem; letter-spacing:.03em; border:1px solid var(--red);
}

/* ---------- icons ---------- */
.icon{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:butt; stroke-linejoin:miter;}
/* ícones com transform:rotate() inline (ex: seta do botão "anterior" do carrossel)
giravam em torno da origem do SVG em vez do próprio centro, jogando o glifo
pra fora da área visível — botão ficava com a caixa certa mas vazio por dentro. */
.icon use{ transform-box:fill-box; transform-origin:50% 50%; }
.icon path, .icon line, .icon polyline{
stroke-dasharray:var(--len,60); stroke-dashoffset:var(--len,60);
transition:stroke-dashoffset .48s var(--ease-mech);
}
.icon.is-visible path, .icon.is-visible line, .icon.is-visible polyline{stroke-dashoffset:0;}

/* ---------- breadcrumb ---------- */
/* PIANISTA — padrão único de espaço entre o header e o início do conteúdo
em toda página interna: 96px no desktop (mesmo valor que a Home já usa
no hero, dentro da faixa 96–120px recomendada), 64px no mobile. Antes
Sobre/Serviços/Contato/Portfólio usavam 132px (104px mobile) e as
páginas de case usavam 112px — inconsistente e maior que o necessário. */
.crumb{padding-top:96px; padding-bottom:18px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); position:relative; z-index:1;}

.pianista-breadcrumb{
display:flex; align-items:center; gap:10px;
font-family:'Space Grotesk','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
font-size:15px; letter-spacing:.18em; text-transform:uppercase;
color:#fff; box-sizing:border-box;
max-width:var(--max); margin:0 auto 24px;
padding:96px var(--gutter) 0;
}
@media(max-width:767px){
/* FIX: no mobile o header NUNCA encolhe (fica sempre em --ph-height,
nunca em --ph-height-compact — o controller.js so encolhe no desktop).
Usar 64px aqui fazia o breadcrumb comecar por baixo do header, direto
em cima da logo. */
.pianista-breadcrumb{ padding:calc(var(--ph-height, 120px) + var(--moldura) + 8px) var(--gutter) 0; }
}
.pianista-breadcrumb-home, .pianista-breadcrumb-link{
color:#fff; text-decoration:none; transition:color .18s ease, opacity .18s ease;
}
.pianista-breadcrumb-home:hover, .pianista-breadcrumb-link:hover{ color:#cb1516 !important; }
.pianista-breadcrumb-sep{ color:rgba(255,255,255,.4); margin:0 4px; }
.pianista-breadcrumb-current{ color:#fce2a5 !important; opacity:1; }
.crumb a{border-bottom:1px solid currentColor; color:var(--white);}
.page-head{padding-bottom:56px; overflow:hidden;}

/* ---------- contact / agenda ---------- */
.contact-grid{display:grid; grid-template-columns:1fr; gap:40px;}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr 1fr;}}
.whatscall{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,.12);}
@media(min-width:560px){.whatscall{grid-template-columns:1fr 1fr;}}
.whatscall .item{background:var(--black); padding:24px; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px;}
.whatscall .item.photo{background:linear-gradient(135deg,var(--graphite-2),var(--black));}
.whatscall .item h4{font-family:var(--font-display); font-size:.98rem;}

.agenda{border:1px solid rgba(255,255,255,.16);}
.agenda-head{background:var(--red); padding:20px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.agenda-head strong{font-family:var(--font-display);}
.agenda-body{padding:24px;}
.agenda-steps{display:flex; gap:0; margin-bottom:24px; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray);}
.agenda-steps span{padding:6px 14px 6px 0; position:relative;}
.agenda-steps span.active{color:var(--red); font-weight:700;}
.agenda-steps span:not(:last-child)::after{content:'/'; margin-left:14px; color:rgba(255,255,255,.2);}
.slots{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px;}
@media(max-width:520px){.slots{grid-template-columns:repeat(2,1fr);}}
.slot{border:1px solid rgba(255,255,255,.2); padding:.7em .4em; text-align:center; font-size:.78rem; background:transparent; color:var(--white);}
.slot:hover, .slot.sel{border-color:var(--red); background:rgba(203,21,22,.15);}
.field-row{display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px;}
@media(min-width:600px){.field-row.two{grid-template-columns:1fr 1fr;}}
.field label{display:block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin-bottom:6px;}
.field input, .field select, .field textarea{
width:100%; background:transparent; border:1px solid rgba(255,255,255,.24); color:var(--white);
padding:.85em 1em; font-family:var(--font-body); font-size:.92rem;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--red);}
.note-box{border:1px dashed rgba(255,255,255,.3); padding:16px; font-size:.78rem; color:var(--gray); margin-top:20px;}

/* ---------- chapter — seção pinada com wipe diagonal scroll-scrubbed (tradução da íris da STILL) ---------- */
.chapter{height:260vh; position:relative;}
.chapter-sticky{
position:sticky; top:0; height:100vh; overflow:hidden;
display:flex; align-items:center; background:var(--black);
}
.chapter-bg{
position:absolute; inset:0;
background:linear-gradient(155deg, var(--red) 0%, #7a0e0f 60%, var(--graphite) 100%);
clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); /* animado via JS a partir do progresso de scroll */
}
.chapter-bg::after{
content:''; position:absolute; inset:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
mix-blend-mode:overlay;
}
.chapter-content{position:relative; z-index:1; padding:0 var(--gutter); max-width:900px;}
.chapter-content .num{font-size:clamp(3rem,8vw,6rem); color:rgba(255,255,255,.5); opacity:1;}
.chapter-content h2{font-size:clamp(2rem,6vw,4.6rem); margin-top:10px;}
.chapter-progress{
position:absolute; left:var(--gutter); bottom:40px; z-index:1;
display:flex; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.08em; color:rgba(255,255,255,.7); text-transform:uppercase;
}
.chapter-progress .track{width:120px; height:2px; background:rgba(255,255,255,.25); position:relative;}
.chapter-progress .fill{position:absolute; left:0; top:0; height:100%; background:var(--white); width:0%;}
@media(max-width:760px){ .chapter{height:180vh;} }

/* ---------- muted heading — biipmk: grande, mas de baixo contraste ---------- */
.muted-lg{
font-family:var(--font-display); font-weight:600; color:var(--gray);
font-size:clamp(2.2rem,6vw,5rem); line-height:.95; letter-spacing:-.01em;
}

/* ---------- page transition — barra diagonal atravessa a tela entre páginas ---------- */
.page-transition{
position:fixed; inset:0; z-index:998; background:var(--red);
clip-path:polygon(0 0, 0 0, -30% 100%, -30% 100%);
pointer-events:none;
}
.page-transition.go{ animation:pageWipeIn .42s var(--ease-mech) forwards; }
@keyframes pageWipeIn{
0%{clip-path:polygon(0 0, 0 0, -30% 100%, -30% 100%);}
100%{clip-path:polygon(0 0, 130% 0, 100% 100%, -30% 100%);}
}

/* ---------- on-light — alternância clara/escura (Golden Launch + biipmk são predominantemente claros; usar branco como cor de fundo real, não só como cor de texto) ---------- */
.on-light{
background-color:var(--white); color:var(--black);
background-image:repeating-linear-gradient(to right, rgba(0,0,0,.07) 0, rgba(0,0,0,.07) 1px, transparent 1px, transparent 160px);
}
.on-light .lede{color:#4a4a4a;}
.on-light .num{color:rgba(0,0,0,.18);}
.on-light .eyebrow{color:var(--red);}
.on-light .divider{background:rgba(0,0,0,.14);}
.on-light .pillars, .on-light .stats, .on-light .process{background:rgba(0,0,0,.1);}
.on-light .pillar, .on-light .stat, .on-light .process-card{background:var(--white);}
.on-light .pillar li{border-color:rgba(0,0,0,.1); color:#4a4a4a;}
.on-light .process-card{border-color:rgba(0,0,0,.1);}
.on-light .process-card .need{border-color:rgba(0,0,0,.18);}
.on-light .btn:not(.btn-primary){border-color:var(--black); color:var(--black);}
.on-light .btn:not(.btn-primary):hover{background:var(--black); color:var(--white);}
.on-light .plan{border-color:rgba(0,0,0,.16);}
.on-light .plan li{color:#4a4a4a;}
.on-light .plan .commit{border-color:rgba(0,0,0,.14); color:#4a4a4a;}
.on-light .testi{border-color:rgba(0,0,0,.16);}
.on-light .testi-who{border-color:rgba(0,0,0,.12);}
.on-light .testi-photo{background:#eee; border-color:rgba(0,0,0,.14);}
.on-light .muted-lg{color:#9a9a9a;}
.on-light .problem-row{border-color:rgba(0,0,0,.14);}
.on-light .problem-row:hover{background:rgba(0,0,0,.03);}

/* ---------- utility ---------- */
.mono{font-family:var(--font-body); letter-spacing:.04em;}
.center{text-align:center;}
@media(max-width:760px){
.nav{position:fixed; inset:0; top:0; background:var(--black); flex-direction:column; justify-content:center; align-items:flex-start; padding:0 var(--gutter); gap:20px; transform:translateX(100%); transition:transform .4s var(--ease-mech);}
.nav.open{transform:translateX(0);}
.nav a{font-size:1.4rem;}
.nav-toggle{display:block; background:none; border:none; color:var(--white); z-index:210;}
}

/* ---------- foto tratada, uso geral (duotone vermelho — nunca cor original solta) ---------- */
.ph{filter:grayscale(1) sepia(1) hue-rotate(-50deg) saturate(2.6) brightness(.92) contrast(1.12);}

/* ---------- carrossel de galeria ---------- */
.carousel{position:relative;}
.carousel-track{
display:flex; gap:2px; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; -ms-overflow-style:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-slide{
flex:0 0 auto; width:min(72vw, 560px); aspect-ratio:4/3; position:relative;
scroll-snap-align:start; overflow:hidden; border:1px solid rgba(255,255,255,.1);
}
.carousel-slide img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-mech);}
.carousel-slide:hover img{transform:scale(1.045);}
.carousel-slide .cap{
position:absolute; left:0; right:0; bottom:0; padding:16px 20px;
background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
font-family:var(--font-display); font-size:.92rem; color:var(--white);
}
.carousel-nav{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.carousel-btn{
width:44px; height:44px; border:1px solid rgba(255,255,255,.3); background:transparent;
color:var(--white); display:flex; align-items:center; justify-content:center;
transition:all var(--ease-mech) .2s;
}
.carousel-btn:hover{border-color:var(--red); background:rgba(203,21,22,.15);}
.carousel-btn svg{width:18px; height:18px;}
.on-light .carousel-btn{border-color:rgba(0,0,0,.3); color:var(--black);}

/* ---------- grid instagram ---------- */
.insta-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px;}
@media(min-width:700px){.insta-grid{grid-template-columns:repeat(6,1fr);}}
.insta-tile{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--black);}
/* object-fit:contain (não cover) — os posts têm texto desenhado na própria
imagem em proporções bem diferentes de 1:1 (0.8 a 1.86); cover cortava
palavras inteiras ("TRAGA UM PROBLE[MA]", "public[idade] ficaz é a venda").
contain garante que a arte/texto nunca seja cortado, com pequena margem
sólida nas bordas quando a proporção não bate. */
.insta-tile img{width:100%; height:100%; object-fit:contain; transition:transform .5s var(--ease-mech);}
.insta-tile:hover img{transform:scale(1.08);}
.insta-tile .icon{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
color:var(--white); width:26px; height:26px; transition:transform .25s var(--ease-mech);
filter:drop-shadow(0 0 6px rgba(0,0,0,.6));
}
.insta-tile:hover .icon{transform:translate(-50%,-50%) scale(1);}

/* ---------- blog / insights ---------- */
.blog-grid{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,.12);}
@media(min-width:820px){.blog-grid{grid-template-columns:repeat(3,1fr);}}
.blog-card{background:var(--black); display:flex; flex-direction:column;}
.on-light .blog-card{background:var(--white);}
.blog-card .thumb{position:relative; aspect-ratio:16/10; overflow:hidden;}
.blog-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-mech);}
.blog-card:hover .thumb img{transform:scale(1.04);}
.blog-card .body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.blog-card .meta{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray);}
.blog-card h4{font-family:var(--font-display); font-size:1.05rem; font-weight:600;}
.blog-card .go{margin-top:auto; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:8px; color:var(--red); font-weight:700;}

/* ---------- features do cliente ---------- */
.feature-grid{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,.12);}
@media(min-width:700px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1100px){.feature-grid{grid-template-columns:repeat(4,1fr);}}
.feature-card{background:var(--black); padding:32px; display:flex; flex-direction:column; gap:14px;}
.on-light .feature-card{background:var(--white);}
.feature-card .icon{color:var(--red); width:28px; height:28px;}
.feature-card h4{font-family:var(--font-display); font-size:1rem;}
.feature-card p{font-size:.85rem; color:var(--gray);}
.on-light .feature-card p{color:#4a4a4a;}
.feature-card .tag{
align-self:flex-start; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
border:1px solid var(--red); color:var(--red); padding:.3em .6em; margin-top:auto;
}

/* =========================================================
FULL-SCREEN MENU OVERLAY (inspirado em housecricket.com.br)
========================================================= */
/* .ph-wrap é grid (não flex) com 3 colunas herdadas de quando o menu
nativo ainda existia — o container do novo botão MENU caía na coluna
do meio (~100px) sobrando uma coluna inteira vazia à direita, por
isso "MENU" nunca chegava na borda oposta à logo. Reduz pra 2
colunas: logo no tamanho natural, resto pro menu, alinhado à direita. */
.pianista-header .ph-wrap{ grid-template-columns:auto 1fr !important; }
.pianista-header .ph-menu-container{
display:flex !important; flex-direction:row !important;
justify-content:flex-end !important; align-items:center !important;
width:100% !important;
}
.pianista-header .ph-menu-container .elementor-widget-nav-menu{ display:none !important; }

.ph-menu-trigger{
all:unset; box-sizing:border-box;
display:flex; align-items:center; gap:14px; cursor:pointer;
color:var(--white); font-family:var(--font-body); font-weight:700;
font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
}
.ph-menu-trigger .burger{ display:flex; flex-direction:column; gap:5px; width:26px; }
.ph-menu-trigger .burger span{
display:block; height:2px; width:100%; background:var(--white);
transition:transform .3s var(--ease-mech), opacity .3s ease;
}
body.ph-menu-open .ph-menu-trigger .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.ph-menu-open .ph-menu-trigger .burger span:nth-child(2){ opacity:0; }
body.ph-menu-open .ph-menu-trigger .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.ph-menu-overlay{
position:fixed; inset:0; z-index:9999;
background:#070707;
visibility:hidden; opacity:0;
transition:opacity .5s var(--ease-mech), visibility 0s linear .5s;
display:flex; overflow:hidden;
}
body.ph-menu-open .ph-menu-overlay{
visibility:visible; opacity:1;
transition:opacity .5s var(--ease-mech), visibility 0s;
}
.ph-menu-overlay-inner{
display:flex; width:100%; max-width:var(--max); margin:0 auto;
padding:0 var(--gutter); align-items:stretch;
}
.ph-menu-links{
flex:1 1 60%; display:flex; flex-direction:column; justify-content:center;
gap:4px; padding-right:60px;
}
.ph-menu-link{
font-family:var(--font-display); font-weight:600;
font-size:clamp(2.2rem, 5.4vw, 4.2rem); line-height:1.12;
color:rgba(255,255,255,.35); text-decoration:none; text-transform:uppercase;
transition:color .3s ease, transform .3s var(--ease-mech), opacity .3s ease;
display:flex; align-items:baseline; gap:18px;
opacity:0; transform:translateY(16px);
}
body.ph-menu-open .ph-menu-link{ opacity:1; transform:translateY(0); }
body.ph-menu-open .ph-menu-link:nth-child(1){ transition-delay:.08s; }
body.ph-menu-open .ph-menu-link:nth-child(2){ transition-delay:.14s; }
body.ph-menu-open .ph-menu-link:nth-child(3){ transition-delay:.2s; }
body.ph-menu-open .ph-menu-link:nth-child(4){ transition-delay:.26s; }
body.ph-menu-open .ph-menu-link:nth-child(5){ transition-delay:.32s; }
.ph-menu-link .idx{ font-family:var(--font-body); font-size:.85rem; font-weight:600; color:var(--red); opacity:0; transition:opacity .3s ease; }
.ph-menu-link:hover, .ph-menu-link.is-current{ color:var(--white); transform:translateX(14px); }
.ph-menu-link:hover .idx, .ph-menu-link.is-current .idx{ opacity:1; }

.ph-menu-visual{
flex:1 1 40%; position:relative;
display:flex; align-items:center; justify-content:center;
border-left:1px solid rgba(255,255,255,.08);
}
.ph-menu-visual::before{
content:''; position:absolute; inset:0;
background:radial-gradient(circle at 50% 50%, rgba(203,21,22,.2), transparent 62%);
}
.ph-menu-visual img{ position:relative; width:42%; opacity:.92; filter:drop-shadow(0 0 60px rgba(203,21,22,.35)); }

.ph-menu-foot{
position:absolute; left:0; right:0; bottom:0; z-index:1;
padding:28px var(--gutter);
display:flex; justify-content:space-between; align-items:center;
border-top:1px solid rgba(255,255,255,.08);
max-width:var(--max); margin:0 auto;
}
.ph-menu-contact{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; }
.ph-menu-contact a{ color:rgba(255,255,255,.62); font-size:.82rem; text-decoration:none; transition:color .2s ease; }
.ph-menu-contact a:hover{ color:var(--white); }
.ph-menu-loc{ color:rgba(255,255,255,.38); font-size:.82rem; }
.ph-menu-social{ display:flex; gap:12px; }
.ph-menu-social a{
width:38px; height:38px; border:1px solid rgba(255,255,255,.18);
display:flex; align-items:center; justify-content:center;
color:var(--white); text-decoration:none;
transition:background .2s ease, border-color .2s ease;
}
.ph-menu-social a:hover{ background:var(--red); border-color:var(--red); }

.ph-menu-close{
all:unset; box-sizing:border-box; position:absolute; top:32px; right:var(--gutter); z-index:2;
cursor:pointer; color:var(--white);
width:44px; height:44px; display:flex; align-items:center; justify-content:center;
border:1px solid rgba(255,255,255,.18);
transition:border-color .2s ease, color .2s ease, transform .3s var(--ease-mech);
}
.ph-menu-close:hover{ border-color:var(--red); color:var(--red); transform:rotate(90deg); }

body.ph-noscroll{ overflow:hidden; }

@media(max-width:900px){
.ph-menu-overlay-inner{ flex-direction:column; padding:0 20px; }
.ph-menu-visual{ display:none; }
.ph-menu-links{ padding-right:0; padding-top:110px; gap:2px; }
.ph-menu-link{ font-size:clamp(1.7rem,8.6vw,2.4rem); }
.ph-menu-foot{ flex-direction:column; align-items:flex-start; gap:16px; padding:20px; }
.ph-menu-close{ top:20px; right:20px; }
}
@media(prefers-reduced-motion:reduce){
.ph-menu-link{ transition:color .2s ease; opacity:1; transform:none; }
.ph-menu-close{ transition:none; }
.ph-menu-close:hover{ transform:none; }
}

/* legacy mobile trigger/overlay (pianista-header-controller) — superseded above */
#ph-mobile-trigger, #ph-mobile-overlay{ display:none !important; }

/* esconde a secao "Insights" (posts falsos, todos os links caem em
/conteudos/ que e 404) ate existir conteudo real — nao deixa card
ficticio clicavel. */
section:has(a[href*="/conteudos/"]){ display:none !important; }

/* ===================================================
MOLDURA (inspirado em housecricket.com.br)
O conteúdo inteiro fica recuado da borda real da tela,
revelando uma margem preta sólida ao redor — igual ao
"quadro" do site de referência (adaptado: sem cantos
arredondados, que contrariam o sistema quadrado/diagonal
da marca — a versão Pianista fecha com um hairline
vermelho fino no lugar do raio). html fica preto puro;
body recua com margin (--moldura, mesmo valor usado pra
cancelar a sangria do .hero) e ganha o hairline vermelho
como acabamento. Elementos fixed (menu overlay, admin
bar, widgets flutuantes) continuam cobrindo a tela toda
normalmente — a moldura é só para o conteúdo do fluxo.
=================================================== */
html{ background:#000; }
body{
margin:var(--moldura);
background:var(--graphite-2);
min-height:calc(100vh - (var(--moldura) * 2));
outline:1px solid var(--red);
outline-offset:-1px;
}
@media print{
body{ margin:0; outline:none; }
}

/* ===================================================
HEADER FLUTUANTE TRANSPARENTE (estilo housecricket.com.br)
O controller.css já deixava .pianista-header transparente e
fixed, com fundo sólido só depois de rolar (body.ph-compact) —
mas o Elementor aplicava um background-color sólido direto no
container (config antiga do Kit), o que escondia o efeito
inteiro. Removendo isso aqui + tirando o espaçador de posição,
o header passa a flutuar sobre o hero de verdade, como no
site de referência.
=================================================== */
.pianista-header,
.elementor-element-a3510d0:not(.elementor-motion-effects-element-type-background){
background:transparent !important; background-color:transparent !important;
}
#ph-header-spacer{ display:none !important; }

/* header nunca fica "compacto" no mobile (controller.js: shrink é DESKTOP ONLY,
mobileBp=1024), mas o .pianista-header continua fixed e transparente o tempo
todo -- ao rolar, o conteúdo da página passa por baixo dele sem nenhum fundo,
sobrepondo visualmente logo/MENU no texto (título, breadcrumb, etc). Reaproveita
os mesmos tokens que o controller.css usa no estado ph-compact (--ph-bg-solid,
--ph-blur) e aplica o fundo sólido sempre no mobile, independente da classe. */
@media(max-width:1023px){
.pianista-header::before{
background:var(--ph-bg-solid) !important;
backdrop-filter:blur(var(--ph-blur)) saturate(140%) !important;
-webkit-backdrop-filter:blur(var(--ph-blur)) saturate(140%) !important;
}
}
.elementor-location-header.ph-controlled{
top:var(--moldura) !important; left:var(--moldura) !important; right:var(--moldura) !important;
transition:top .35s ease, left .35s ease, right .35s ease;
}
body.ph-compact .elementor-location-header.ph-controlled{
top:0 !important; left:0 !important; right:0 !important;
}
.hero{ padding-top:max(96px, var(--ph-height, 120px)); }
.page-head{ padding-top:calc(var(--ph-height, 120px) + 32px); }
@media(max-width:1023px){
/* FIX: mesmo motivo do breadcrumb acima — no mobile/tablet o header
fica sempre na altura cheia, nunca na compacta. */
.page-head{ padding-top:calc(var(--ph-height, 120px) + var(--moldura) + 48px); }
}

/* o ::before de fundo (blur ao rolar) do controller.css usava z-index:-1,
o que às vezes empurrava a camada pra trás do próprio conteúdo da
página atrás do header fixed, deixando o texto vazando por cima do
"MENU" mesmo com o fundo sólido supostamente ativo. Sobe pra 0 e
garante que logo/menu fiquem acima dela. */
.pianista-header::before{ content:'' !important; z-index:0 !important; }
.pianista-header > *{ position:relative; z-index:1; }

/* ===================================================
TRAVA DE CORES DO KIT ELEMENTOR
Botões nativos do Elementor (widget "Button", etc.) usam as
variáveis globais --e-global-color-* do Kit (post 1491), editáveis
pelo painel do Elementor sem passar por este CSS. Isso significa que
qualquer alteração feita ali (sem querer ou não) muda a cor de TODO
botão do site. Trava aqui os valores certos da marca, incluindo uma
cor customizada solta no Kit (#FF4D4E, não é a vermelha da marca)
que nunca deveria aparecer em botão nenhum.
=================================================== */
/* ===================================================
FOCO/DESTAQUE TRAVADO EM TODA A UI
Botoes/links focados (clique, tab do teclado) estavam pegando a cor de
destaque NATIVA do sistema operacional/navegador (aparecia rosa/magenta
no botao MENU e no X do menu fullscreen) em vez de uma cor definida pelo
site — o CSS normal (outline-color etc.) as vezes nao vence esse estilo
nativo. Declara explicitamente pra nunca mais sobrar cor de fora da marca. */
a, button, .btn, [role="button"], input, select, textarea{
outline-color:var(--red) !important;
accent-color:var(--red) !important;
}
.ph-menu-trigger, .ph-menu-close{
background:transparent !important;
}
*:focus{
outline-color:var(--red) !important;
}
*:focus:not(:focus-visible){
outline:none !important;
}
*:focus-visible{
outline:2px solid var(--red) !important;
outline-offset:2px !important;
background-color:transparent !important;
}

:root{
--e-global-color-primary:#CB1516 !important;
--e-global-color-secondary:#FFFFFF !important;
--e-global-color-text:#111112 !important;
--e-global-color-accent:#FCE2A5 !important;
--e-global-color-a0411fe:#CB1516 !important;
--e-global-color-4bac2b8:#111112 !important;
}


/* ---------- fix: widget de acessibilidade (Pianista Accessibility
Advanced, botao flutuante inercial) as vezes fica posicionado numa
faixa vertical que coincide com a 2a linha do filtro de categorias
quando ele quebra em varias linhas (fix acima), cobrindo o inicio
da pill (ex: "Indústria & Agronegócio" virava "ústria & Agronegócio").
Da mais respiro a partir da esquerda pro filtro nao comecar bem onde
o botao costuma flutuar. ---------- */
.pcs-v1-track{ padding-left:74px !important; }
@media(max-width:480px){
.pcs-v1-track{ padding-left:0 !important; }
}


/* ===================================================
PAGINA 404 (body.error404)
O template padrao do tema (Hello Elementor) nao recebe
nenhum estilo do redesign -- h1/p saiam com a cor de texto
padrao do tema (quase preto, #1c1c1c) sobre o fundo escuro
do site, ficando literalmente invisiveis. Aplica a
tipografia/cor da marca, o mesmo respiro de topo que as
outras paginas internas, centraliza e da altura minima pra
nao colar direto no rodape, alem de um CTA de volta (via JS).
=================================================== */
body.error404 .page-header{
display:block !important;
padding-top:calc(var(--ph-height, 120px) + var(--moldura) + 48px);
padding-bottom:0;
text-align:center;
}
@media(max-width:1023px){
body.error404 .page-header{
padding-top:calc(var(--ph-height, 120px) + var(--moldura) + 32px);
}
}
body.error404 .entry-title{
color:var(--white) !important;
font-family:var(--font-display) !important;
font-size:clamp(2rem, 5vw, 3.4rem) !important;
font-weight:700 !important;
text-transform:uppercase;
max-width:none;
padding:0 var(--gutter);
}
body.error404 .page-content{
text-align:center;
min-height:40vh;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:28px;
padding:24px var(--gutter) 100px;
}
body.error404 .page-content p{
color:var(--gray) !important;
font-family:var(--font-body) !important;
font-size:1rem !important;
}
body.error404 .page-content .btn-404-home{
display:inline-flex; align-items:center; gap:10px;
border:1px solid var(--red); color:var(--white) !important;
text-decoration:none; padding:.9em 1.8em;
font-family:var(--font-body); font-weight:700; font-size:.78rem;
letter-spacing:.08em; text-transform:uppercase;
transition:background .2s ease, color .2s ease;
}
body.error404 .page-content .btn-404-home:hover{
background:var(--red);
}

/* ===================================================
PAGINA DE VAGA INDIVIDUAL (body.single-pianista_vaga)
Mesmo problema do 404: template padrao do tema esconde
.page-header e o titulo sai com a cor escura padrao do
tema sobre o fundo escuro do site. Reaplica a tipografia
da marca e da respiro em relacao ao header fixo.
=================================================== */
body.single-pianista_vaga .page-header{
display:block !important;
padding-top:calc(var(--ph-height, 120px) + var(--moldura) + 48px);
padding-bottom:0;
max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);
box-sizing:border-box;
}
@media(max-width:1023px){
body.single-pianista_vaga .page-header{
padding-top:calc(var(--ph-height, 120px) + var(--moldura) + 32px);
}
}
body.single-pianista_vaga .entry-title{
color:var(--white) !important;
font-family:var(--font-display) !important;
font-size:clamp(1.8rem, 4.5vw, 3rem) !important;
font-weight:700 !important;
margin:0 0 8px;
}
body.single-pianista_vaga .page-content{
max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
box-sizing:border-box;
}

/* ===================================================
CAMPOS EXTRAS "SEJA UM DE NOS" NO FORM DE CONTATO
Injetados via JS (pianistaCareersInitContatoForm). Agrupados
num cartao com moldura sutil (hairline + corte diagonal no
canto, no motivo da marca) para separar visualmente do resto
do form. Upload de curriculo usa dropzone customizada com
preview em cartao (em vez do input[type=file] nativo).
=================================================== */
#pcf-scope #pcf-rh-extra{
display:flex; flex-direction:column; gap:22px;
margin:28px 0; padding:28px var(--gutter, 24px);
border:1px solid rgba(255,255,255,.14);
position:relative;
background:rgba(255,255,255,.02);
}
#pcf-scope #pcf-rh-extra::before{
content:''; position:absolute; top:0; right:0; width:0; height:0;
border-style:solid; border-width:0 28px 28px 0;
border-color:transparent var(--red) transparent transparent;
}
#pcf-scope .pcf-rh-heading{
font-family:var(--font-body); font-weight:700; font-size:.68rem;
letter-spacing:.14em; text-transform:uppercase; color:var(--red);
}
#pcf-scope #pcf-rh-extra .pcf-field{ position:static !important; margin:0; }
#pcf-scope #pcf-rh-extra .pcf-field label{
position:static !important; display:block; margin-bottom:8px;
font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray);
transform:none !important; pointer-events:auto !important;
}
#pcf-scope #pcf-rh-extra select,
#pcf-scope #pcf-rh-extra input[type="url"]{
width:100%; background:var(--black) !important; border:none; border-bottom:1px solid rgba(255,255,255,.24);
color:var(--white) !important; padding:.6em 0; font-family:var(--font-body); font-size:.95rem;
outline:none; box-sizing:border-box; border-radius:0; appearance:none; -webkit-appearance:none;
}
#pcf-scope #pcf-rh-extra select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C1C1C1' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important; background-position:right center !important; padding-right:20px;
}
#pcf-scope #pcf-rh-extra select option{ background:var(--black); color:var(--white); }
#pcf-scope #pcf-rh-extra input[type="url"]:focus,
#pcf-scope #pcf-rh-extra select:focus{ border-color:var(--red); }
#pcf-scope #pcf-rh-extra .pcf-error{ display:none !important; }

/* dropzone de curriculo */
#pcf-scope #pcf-rh-extra .pcf-dropzone input[type="file"]{ display:none !important; }
#pcf-scope #pcf-rh-extra .pcf-dropzone{
border:1px dashed rgba(255,255,255,.24);
padding:20px; cursor:pointer;
transition:border-color .2s ease, background .2s ease;
}
#pcf-scope #pcf-rh-extra .pcf-dropzone:hover,
#pcf-scope #pcf-rh-extra .pcf-dropzone.pcf-dropzone-over{
border-color:var(--red); background:rgba(203,21,22,.06);
}
#pcf-scope #pcf-rh-extra .pcf-dropzone-empty{
display:flex; flex-direction:column; align-items:center; gap:6px;
text-align:center; color:var(--gray);
}
#pcf-scope #pcf-rh-extra .pcf-dropzone-empty .icon{
width:22px; height:22px; stroke:var(--red); fill:none; stroke-width:1.5; margin-bottom:2px;
}
#pcf-scope #pcf-rh-extra .pcf-dropzone-empty span{
font-family:var(--font-body); font-weight:700; font-size:.82rem; color:var(--white);
text-transform:uppercase; letter-spacing:.04em;
}
#pcf-scope #pcf-rh-extra .pcf-dropzone-empty small{ font-size:.72rem; color:var(--gray); }

/* cartao de arquivo anexado -- moldura com corte diagonal, no motivo da marca */
#pcf-scope #pcf-rh-extra .pcf-file-card{
display:flex; align-items:center; gap:14px;
}
#pcf-scope #pcf-rh-extra .pcf-file-frame{
flex:none; width:44px; height:44px; position:relative;
border:1px solid var(--red); display:flex; align-items:center; justify-content:center;
clip-path:polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 78%);
}
#pcf-scope #pcf-rh-extra .pcf-file-frame .icon{
width:18px; height:18px; stroke:var(--red); fill:none; stroke-width:1.5;
}
#pcf-scope #pcf-rh-extra .pcf-file-meta{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
#pcf-scope #pcf-rh-extra .pcf-file-name{
font-family:var(--font-body); font-weight:700; font-size:.86rem; color:var(--white);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#pcf-scope #pcf-rh-extra .pcf-file-size{ font-size:.72rem; color:var(--gray); }
#pcf-scope #pcf-rh-extra .pcf-file-remove{
flex:none; width:28px; height:28px; border:1px solid rgba(255,255,255,.24);
background:transparent; color:var(--gray); font-size:1.1rem; line-height:1; cursor:pointer;
transition:border-color .2s ease, color .2s ease;
}
#pcf-scope #pcf-rh-extra .pcf-file-remove:hover{ border-color:var(--red); color:var(--red); }

/* ---------- padroniza labels do formulario "Fale Conosco" (Pianista Contact Bridge) com o padrao de micro-label maiusculo do site ---------- */
#pcf-scope .pcf-field > label{
text-transform:uppercase !important;
letter-spacing:.08em !important;
font-family:var(--font-body) !important;
font-weight:600 !important;
font-size:15px !important;
color:rgba(255,255,255,.45) !important;
}
#pcf-scope input:focus + label,
#pcf-scope textarea:focus + label,
#pcf-scope input:not(:placeholder-shown) + label,
#pcf-scope textarea:not(:placeholder-shown) + label{
color:var(--red) !important;
font-size:12px !important;
}
#pcf-scope .pcf-label-inline{
text-transform:uppercase !important;
letter-spacing:.08em !important;
font-size:.72rem !important;
color:var(--gray) !important;
font-weight:700 !important;
}


/* ---------- pagina /vagas/: remove padding do grid de vagas que revelava blocos vazios nas laterais ---------- */
.pv-grid-cards{ padding:0 !important; background:transparent !important; }

/* ---------- pagina /vagas/: secao "por que trabalhar aqui" ---------- */
.vagas-why{ padding:clamp(60px,8vw,100px) 0 0; }


/* ---------- fix: elementos .reveal.in mantinham transform:translateY(0px) (nao "none") apos a animacao,
   criando uma camada de composicao GPU permanente que ocasionalmente falhava em pintar o conteudo
   (fotos de case ficavam invisiveis mesmo com todos os estilos computados corretos). translateY(0px)
   e visualmente identico a none, entao trocar e seguro e remove a camada extra. ---------- */
html body .reveal.in{ transform:none !important; }


/* ---------- padroniza titulo das paginas utilitarias (Contato, Cases, Servicos) com o mesmo peso/tamanho de Vagas -
   cada uma tinha um tratamento de titulo diferente (tamanho e peso da fonte variavam bastante entre paginas),
   o que deixava a navegacao entre paginas inconsistente ---------- */
.elementor-element-22c363e .pianista-type-el,
.elementor-element-4bc63ac .pianista-type-el {
font-size: clamp(2.4rem, 6vw, 5.6rem) !important;
font-weight: 700 !important;
}
body.page-id-95 h1{
font-size: clamp(2.4rem, 6vw, 5.6rem) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
}


/* =========================================================
SISTEMA DE DESIGN GLOBAL — TOKENS ESTENDIDOS
(complementa o :root ja existente no topo do arquivo — nao duplica
--red/--gray/--black/--gutter/--moldura/--box-pad, que ja seguem
exatamente os valores pedidos: gutter 80/40/20, moldura 32/18/12,
box-pad 40/32/24 em desktop/tablet/mobile)
========================================================= */
:root{
--bg-primary:var(--black);
--bg-secondary:var(--graphite);
--surface-card:var(--graphite-2);
--bg-light:var(--white);
--text-primary:var(--white);
--text-secondary:var(--gray);
--border-color:rgba(255,255,255,.14);
--red-hover:#a81213;
--success:#2e7d46;
--warning:#c78a1e;
--error:var(--red);
--grid-gap:32px;
--fs-h1:72px; --fs-h1-tablet:56px; --fs-h1-mobile:40px;
--fs-h2:48px; --fs-h2-tablet:40px; --fs-h2-mobile:32px;
--fs-h3:32px; --fs-h3-tablet:28px; --fs-h3-mobile:24px;
--fs-h4:24px; --fs-h4-mobile:20px;
--fs-body:18px; --fs-body-tablet:17px; --fs-body-mobile:16px;
--fs-aux:14px;
--fs-label:13px;
--fs-btn:16px;
}
@media(max-width:1023px){ :root{ --grid-gap:24px; } }
@media(max-width:767px){ :root{ --grid-gap:16px; } }

/* =========================================================
TIPOGRAFIA — escala global para tags cruas (h1-h4/p sem classe
utilitaria). .h1/.h2/.h3/.lede/.page-head .h1 continuam funcionando
como antes (maior especificidade, nao sao afetados por isto).
========================================================= */
h1{ font-size:var(--fs-h1); line-height:.98; text-wrap:balance; }
h2{ font-size:var(--fs-h2); line-height:1.05; text-wrap:balance; }
h3{ font-size:var(--fs-h3); line-height:1.1; text-wrap:balance; }
h4{ font-family:var(--font-display); font-weight:600; line-height:1.15; font-size:var(--fs-h4); margin:0; }
p{ font-size:var(--fs-body); line-height:1.6; }
@supports (text-wrap:pretty){ p{ text-wrap:pretty; } }
@media(max-width:1023px){
h1{ font-size:var(--fs-h1-tablet); } h2{ font-size:var(--fs-h2-tablet); } h3{ font-size:var(--fs-h3-tablet); } p{ font-size:var(--fs-body-tablet); }
}
@media(max-width:767px){
h1{ font-size:var(--fs-h1-mobile); } h2{ font-size:var(--fs-h2-mobile); } h3{ font-size:var(--fs-h3-mobile); } h4{ font-size:var(--fs-h4-mobile); } p{ font-size:var(--fs-body-mobile); }
}
.aux, .text-aux{ font-size:var(--fs-aux) !important; }

/* =========================================================
BOTOES — altura minima e estados completos em todo o site
========================================================= */
.btn{ min-height:48px; font-size:15px; font-weight:600; }
@media(min-width:1024px){ .btn{ min-height:52px; } }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* =========================================================
CAMPOS DE FORMULARIO — altura minima consistente (16px evita
zoom automatico no iOS ao focar um campo)
========================================================= */
.field input, .field select, .field textarea,
#pcf-scope input:not([type=checkbox]):not([type=radio]), #pcf-scope select, #pcf-scope textarea{
min-height:48px; font-size:16px;
}
.field textarea, #pcf-scope textarea{ min-height:120px; }

/* =========================================================
CONTRASTE — paginas fora do wrapper .pianista-redesign (Vagas: lista
e pagina individual) herdavam a cor de texto escura padrao do tema
(quase preto, #1c1c1c) sobre o fundo escuro do site — praticamente
ilegivel, falha grave de contraste (WCAG AA). Corrige na origem:
forca texto claro nessas paginas, preservando os acentos (vermelho
nas tags, cinza nos metadados) que ja funcionavam certos.
========================================================= */
.vagas-why, .vagas-why h1, .vagas-why h2, .vagas-why h3, .vagas-why h4, .vagas-why p{ color:var(--white); }
.vagas-why .eyebrow{ color:var(--red) !important; }
.vagas-why .feature-card p{ color:var(--gray) !important; }
.vagas-why .feature-card .tag{ color:var(--red) !important; }
body.page-id-3639 h1, body.page-id-3639 h2, body.page-id-3639 h3, body.page-id-3639 > * p{ color:var(--white); }
body.single-pianista_vaga, body.single-pianista_vaga h1, body.single-pianista_vaga h2, body.single-pianista_vaga h3, body.single-pianista_vaga h4, body.single-pianista_vaga p, body.single-pianista_vaga li{ color:var(--white); }


/* =========================================================
FIX: menu some no mobile (raiz do bug)
.ph-logo-stack tem width:260px declarado (controller.css) mas seus
filhos (.ph-logo-full/.ph-logo-icon) sao position:absolute — fora do
fluxo normal, entao nao contribuem min-content pro pai. Em telas
estreitas, o grid do header (.ph-wrap{grid-template-columns:auto 1fr})
nao tem espaco pra dar 1fr + a coluna "auto" inteira, e como o auto-track
so tem garantia de respeitar o MIN-CONTENT do item (que aqui e ~0, sem
min-width explicito), o grid encolhe a coluna do logo pra perto de 0 em
vez de repartir o espaco com o botao de menu — que e empurrado pra fora
da viewport e cortado pelo overflow-x:clip do body. Resultado visivel:
o "MENU" aparece cortado ("MEN") ou some por completo.
Fix: min-width explicito (impede o grid de zerar a coluna) + largura
menor da logo em telas estreitas (o controller.css ja encolhe a ALTURA
da imagem no mobile, mas nunca ajustava a largura do container).
========================================================= */
.pianista-header .ph-logo-stack{ min-width:200px; }
@media(max-width:1023px){
.pianista-header .ph-logo-stack{ width:150px !important; min-width:150px; }
}
@media(max-width:767px){
.pianista-header .ph-logo-stack{ width:90px !important; min-width:90px; }
}


/* =========================================================
FIX: menu some no mobile (raiz real do bug — corrige o fix anterior)
O .ph-logo-stack nao era o gargalo: o CONTAINER do widget Elementor
que envolve a logo (.elementor-element-20151b6, mesmo ID nas 4 paginas
que usam o header compartilhado 1671 — Vagas/Contato/Servicos/Cases)
fica travado numa largura fixa (~203px, herdada da config de largura
do widget no editor do Elementor pra desktop, sem override responsivo
pra mobile — daí a classe "elementor-widget-mobile__width-initial").
Essa largura fixa nao encolhe em telas estreitas, empurrando o botao
de menu (2a coluna do grid) pra fora da viewport, onde o overflow-x:clip
do body corta ele. Libera a largura desse widget especifico pra se
ajustar ao conteudo real (a logo, que ja tem seu proprio tamanho
controlado por .ph-logo-stack acima).
========================================================= */
.elementor-element-20151b6{ width:auto !important; max-width:none !important; flex:none !important; }


/* =========================================================
COOKIE BANNER — layout mobile em coluna com padding real e
botoes de largura total (o container ja empilhava, mas sem
padding lateral proprio e com botoes de largura de conteudo,
nao largura total).
========================================================= */
@media(max-width:767px){
#pianista-cookie-consent{ padding:20px !important; box-sizing:border-box; }
#pianista-cookie-consent .pcc-actions{ display:flex; flex-direction:column; gap:10px; width:100%; }
#pianista-cookie-consent .pcc-actions button{ width:100% !important; min-height:44px; box-sizing:border-box; }
}


/* ---------- Home: hero institucional (substitui o rotator de case) ---------- */
.hero--institutional{
  min-height:82vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, rgba(203,21,22,.14), transparent 55%), var(--black);
  position:relative; text-align:left; padding:calc(var(--moldura,32px) * 2) 0;
}
.hero--institutional::before{
  content:''; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 120px 120px 0;
  border-color:transparent var(--red) transparent transparent; opacity:.9;
}
.hero-institutional-inner{ max-width:900px; }
.hero-institutional-inner .h1{ margin-bottom:24px; text-wrap:balance; }
.hero-institutional-inner .lede{ max-width:56ch; margin-bottom:40px; color:rgba(255,255,255,.78); }
.hero-institutional-inner .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }