/* CJR ENGPRO — carrossel do topo (grade única, montagem por partes) e tela de boas-vindas. Só vale com o Motion (.mv-car). */

/* ---------- grade única: todos os slides no mesmo lugar; a altura é a do maior, então a página não pula ---------- */
.site.s2 .slides.mv-car .slides-in{display:grid; grid-template-columns:minmax(0,1fr); touch-action:pan-y}
.site.s2 .slides.mv-car .slide2{grid-area:1/1; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; align-content:start; min-height:0; animation:none}
.site.s2 .slides.mv-car .slide2.fora{visibility:hidden}   /* não usa [hidden]: o extra.css força display:none e o slide sairia da grade */
.site.s2 .slides.mv-car .slide2-txt{padding-top:56px}
.site.s2 .slides.mv-car .slide2-img{height:520px; align-self:end; display:flex; align-items:flex-end; justify-content:center}

.site.s2 .slides.mv-car[data-fundo] .slide2-img img.slide2-boneco[src*="carlito-medicoes"]{width:auto; height:auto; max-width:100%; max-height:100%; margin:0 auto}
.site.s2 .slides.mv-car .eb-traco{transform-origin:0 50%}
.site.s2 .slides.mv-car .sl-w{display:inline-block}

/* setas, bolinhas e redes numa linha só, embaixo do texto (nunca em cima do Carlito) */
.site.s2 .slides.mv-car .slides-ctl{grid-row:2; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-top:10px; max-width:56%}
.site.s2 .slides.mv-car .sl-nav{display:flex; align-items:center; gap:14px}
.site.s2 .slides.mv-car .slides-ctl .hero2-redes{margin-top:0}
.site.s2 .slides.mv-car .sbtn{width:44px; height:44px; border-color:rgba(255,255,255,.45); color:#FFFFFF}   /* no lado escuro a borda de hoje some */
.site.s2 .slides.mv-car .sl-pt:not(.on){background:rgba(255,255,255,.45)}

/* bolinhas: barra com o tempo do slide + área de toque de 44 px */
.site.s2 .slides.mv-car .sl-pt{position:relative; overflow:visible}
.site.s2 .slides.mv-car .sl-pt::after{content:""; position:absolute; inset:-17px -6px}
.site.s2 .slides.mv-car .sl-pt.on{background:color-mix(in srgb,var(--brand) 30%,transparent)}
.site.s2 .sl-prog{position:absolute; inset:0; border-radius:inherit; background:var(--brand); transform:scaleX(0); transform-origin:0 50%; pointer-events:none}
.site.s2 .sl-pt:not(.on) .sl-prog{opacity:0}

/* fundo e desenhos técnicos em camada própria (aparece na montagem); substitui o ::before */
.site.s2 .slides.mv-car[data-fundo="a"]::before{display:none}
.site.s2 .sl-fundo{position:absolute; inset:0; pointer-events:none; z-index:0}
.site.s2 .sl-fundo-in{position:absolute; inset:0; background:url(../img/boneco/pattern-horizontal.webp) center/cover no-repeat; opacity:.42}

@media (max-width:900px){
  .site.s2 .slides.mv-car .slide2{grid-template-columns:1fr; gap:12px}
  .site.s2 .slides.mv-car .slide2-img{order:-1; height:300px; align-self:auto}
  .site.s2 .slides.mv-car .slide2-txt{padding-top:4px}
  .site.s2 .slides.mv-car .slides-ctl{max-width:none}
  .site.s2 .sl-fundo-in{opacity:.3}
}

/* ---------- boas-vindas: tela cheia própria na primeira visita ---------- */
html.bv::after{content:""; position:fixed; inset:0; z-index:2147483646; background:#0F1F38; pointer-events:none; animation:bv-solta 0s linear 2.5s forwards}
@keyframes bv-solta{to{visibility:hidden}}
.bv-tela{position:fixed; inset:0; z-index:2147483647; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:24px; padding:72px clamp(16px,5vw,80px) 0; background:#0F1F38; color:#FFFFFF}
.bv-tela::before{content:""; position:absolute; inset:0; background:url(../img/boneco/pattern-horizontal.webp) center/cover no-repeat; opacity:.22; pointer-events:none}
.bv-tela::after{content:""; position:absolute; inset:0; background:radial-gradient(900px 520px at 78% 30%, rgba(0,168,89,.18), transparent 62%); pointer-events:none}
.bv-texto{position:relative; z-index:1; display:grid; justify-items:start; gap:18px; max-width:640px; padding-bottom:72px}
.bv-logo{width:min(170px,40vw); height:auto; overflow:visible}
.bv-logo path{stroke-width:10}
.bv-logo .lg-n{fill:#FFFFFF; stroke:#FFFFFF}
.bv-logo .lg-v{fill:#00A859; stroke:#00A859}
.bv-frase{margin:0; font:700 clamp(28px,4.4vw,58px)/1.08 'Fyodor Exp','Arial Black',Arial,sans-serif; text-transform:uppercase; letter-spacing:.01em}
.bv-frase span{display:inline-block; opacity:0}
.bv-frase span:nth-last-child(-n+2){color:#00A859}
.bv-sub{margin:0; max-width:32em; font:400 clamp(15px,1.4vw,18px)/1.55 'Poppins',Arial,sans-serif; color:#C9D3DE; opacity:0}
.bv-bts{display:flex; flex-wrap:wrap; gap:12px; opacity:0}
.bv-entrar{min-height:52px; padding:0 30px; border:0; border-radius:999px; background:#00A859; color:#0F1F38; font:700 17px/1 'Poppins',Arial,sans-serif; cursor:pointer}
.bv-pular{position:absolute; z-index:2; top:max(16px,env(safe-area-inset-top)); right:16px; min-width:48px; min-height:48px; padding:0 24px; border:2px solid #FFFFFF; border-radius:999px; background:#FFFFFF; color:#0F1F38; font:700 16px/1 'Poppins',Arial,sans-serif; cursor:pointer}
.bv-entrar:focus-visible,.bv-pular:focus-visible{outline:3px solid #00A859; outline-offset:3px}
.bv-carlito{position:relative; z-index:1; align-self:end; height:min(82vh,680px); display:flex; justify-content:center; align-items:flex-end}
.bv-carlito-in{height:100%; display:flex; align-items:flex-end; opacity:0}
.bv-carlito img{height:100%; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}
@media (max-width:760px){
  .bv-tela{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; align-items:end; gap:8px; padding:72px 16px 0}
  .bv-carlito{order:-1; height:34vh; align-self:end}
  .bv-texto{gap:14px; padding-bottom:28px}
  .bv-logo{width:120px}
}


/* sem o Motion o carrossel de hoje continua com o fundo do ::before */
.site.s2 .slides:not(.mv-car) .sl-fundo{display:none}