/* Modo lateral (desktop): as seções viram painéis que deslizam para o lado, com a faixa branca fixa à esquerda.
   No celular e em telas estreitas nada disso vale: o site continua rolando para baixo. */
.faixa{display:none}
body.lat{--fx:96px;--pw:calc(100vw - var(--fx));overflow:hidden;height:100vh;background:#06080b}
html:has(body.lat){scroll-behavior:auto;overflow:hidden}

/* faixa branca */
body.lat .faixa{display:flex;position:fixed;z-index:70;left:0;top:0;bottom:0;width:var(--fx);background:#f2f2f0;color:#101114;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0 20px;box-shadow:0 0 60px rgba(0,0,0,.55)}
.faixa .f-logo{width:46px;height:46px;border-radius:50%;display:block;overflow:hidden;background:#101114}
.faixa .f-logo img{width:100%;height:100%;object-fit:cover;display:block}
.faixa .f-nome{font-family:'Anton','Inter',sans-serif;font-size:min(15vh,150px);letter-spacing:.01em;line-height:.8;writing-mode:vertical-rl;transform:rotate(180deg);color:#101114;white-space:nowrap;user-select:none}
.faixa .f-baixo{display:flex;flex-direction:column;align-items:center;gap:14px}
.faixa .f-sec{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:#55595f;white-space:nowrap;min-height:90px;text-align:left}
.faixa .f-cont{font-size:.74rem;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:#101114;font-weight:500}
.faixa .f-setas{display:flex;gap:6px}
.faixa button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(16,17,20,.25);background:transparent;color:#101114;cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s,opacity .25s}
.faixa button:hover{background:#101114;color:#f2f2f0}
.faixa button[disabled]{opacity:.25;pointer-events:none}
.faixa button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* deck */
body.lat main{position:fixed;left:var(--fx);top:0;height:100vh;width:var(--pw);display:block;overflow:hidden;z-index:1;background:#000}
/* painéis empilhados: o próximo entra por cima, o atual recua e escurece */
body.lat main>section{position:absolute !important;left:0;top:0;width:var(--pw);height:100vh;overflow-x:hidden;overflow-y:auto;z-index:calc(var(--k,0) + 1) !important;margin:0 !important;border-radius:0 !important;padding-block:96px 44px !important;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;overscroll-behavior:contain;
  transition:transform 1.05s cubic-bezier(.77,0,.18,1),filter 1.05s cubic-bezier(.77,0,.18,1),visibility 0s 0s;will-change:transform,filter;backface-visibility:hidden;box-shadow:-40px 0 90px rgba(0,0,0,.55)}
body.lat main>section.p-prox{transform:translate3d(101%,0,0)}
body.lat main>section.p-ant{transform:translate3d(-26%,0,0);filter:brightness(.38) saturate(.8)}
body.lat main>section.ativo{transform:none;filter:none}
body.lat main>section.longe{visibility:hidden;transition:transform 1.05s cubic-bezier(.77,0,.18,1),filter 1.05s cubic-bezier(.77,0,.18,1),visibility 0s 1.06s}
body.lat main.sem-trans>section{transition:none !important}
body.lat main>section>.wrap{margin-block:auto;width:100%}
body.lat main>section:not(.heroi){padding-right:112px !important}
body.lat main>section.sec .pilha{margin-right:-112px;width:calc(100% + 112px)}
body.lat main>section.heroi{padding:0 !important;overflow:hidden}
body.lat .heroi .h-card{height:100vh;min-height:0;width:100%}
body.lat .heroi .cena{width:max(var(--pw),calc(100vh*1.7778))}
body.lat main>section.sec{background-clip:border-box}
body.lat #disponiveis{background:#06080b}

/* entrada do conteúdo de cada painel */
body.lat main>section>.wrap{opacity:0;transform:translate3d(90px,0,0);transition:opacity .5s,transform .5s}
body.lat main>section.ativo>.wrap{opacity:1;transform:none;transition:opacity 1s .55s,transform 1.2s .45s cubic-bezier(.2,.8,.2,1)}
/* cada bloco do painel chega em sequência */
body.lat main>section.ativo .rv{transition-delay:calc(.65s + var(--d,0s))}

/* botão redondo da direita: próxima seção (estilo Netflix: vidro escuro, só a seta) */
.proximo{display:none}
body.lat .proximo.anterior{right:auto;left:calc(var(--fx) + clamp(18px,2.2vw,34px))}
body.lat .proximo.anterior.oculto{display:none}
.proximo.anterior .seta{transform:rotate(180deg)}
.proximo.anterior:hover .seta{transform:rotate(180deg) translateX(3px)}
.proximo.anterior .dica{right:auto;left:calc(100% + 12px);transform:translate(-8px,-50%)}
.proximo.anterior:hover .dica{transform:translate(0,-50%)}
body.lat .proximo{display:grid;position:fixed;z-index:75;right:clamp(18px,2.2vw,34px);top:76%;width:60px;height:60px;border-radius:50%;border:0;padding:0;cursor:pointer;place-items:center;color:rgba(255,255,255,.92);background:rgba(20,20,22,.34);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:none;transition:background .3s,transform .3s,color .3s}
.proximo .seta{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.proximo:hover{background:rgba(20,20,22,.62);transform:scale(1.12);color:#fff}
.proximo:hover .seta{transform:translateX(3px)}
.proximo:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:3px}
.proximo .dica{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(8px,-50%);white-space:nowrap;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.proximo:hover .dica{opacity:1;transform:translate(0,-50%)}
.proximo.ultimo .seta{transform:rotate(180deg)}
.proximo.ultimo:hover .seta{transform:rotate(180deg) translateX(3px)}

/* topo: a pílula de navegação acompanha o deck */
body.lat .nav{left:calc(var(--fx) + var(--gutter));right:var(--gutter)}

/* ajustes por seção */
body.lat .pilha{width:100%;margin-left:0}
body.lat .disp-topo p{display:none}
body.lat .palco{margin-top:clamp(0px,1vw,16px)}
body.lat .palco-grade{padding-top:clamp(16px,2.4vw,40px)}
body.lat .disp .wrap{max-width:1500px}
body.lat .vend-topo{margin-bottom:0}
body.lat .passos-grade,body.lat .chec-grade{margin-top:clamp(24px,3.4vw,48px)}
body.lat .ola{min-height:clamp(480px,68vh,760px)}
body.lat .ola-bloco{padding-top:clamp(10px,3vh,40px)}
body.lat .ola-pal .p1{font-size:clamp(4.4rem,min(15vw,26vh),14rem)}
body.lat .ola-pal .p2{font-size:clamp(2.4rem,min(8.6vw,14vh),8rem)}
body.lat .sobre{margin-top:clamp(24px,4vh,56px)}
body.lat .depo-grade{align-items:center}
body.lat .depo-moldura{height:min(70vh,640px);width:auto;aspect-ratio:9/16;max-width:100%;margin-inline:auto}
body.lat .depo-moldura video{width:100%;height:100%;object-fit:cover}
body.lat #pedido{background:var(--bg)}
body.lat #pedido footer{margin-top:clamp(28px,5vh,60px);padding-block:30px 10px;background:transparent;border-top:1px solid var(--linha)}
body.lat #pedido footer .rod{gap:1.4rem}

/* ===== Entrada vertical: do herói para a primeira seção a página sobe e cobre; dali em diante é para o lado ===== */
body.lat main>section#topo.p-ant{transform:translate3d(0,-16%,0);filter:brightness(.4)}
body.lat main>section#disponiveis.p-prox{transform:translate3d(0,101%,0)}
body.lat .proximo.vert .seta{transform:rotate(90deg)}
body.lat .proximo.vert:hover .seta{transform:rotate(90deg) translateX(3px)}
body.lat .proximo.anterior.vert .seta{transform:rotate(-90deg)}
body.lat .proximo.anterior.vert:hover .seta{transform:rotate(-90deg) translateX(3px)}
body.lat .proximo.anterior.vert{left:auto;right:clamp(18px,2.2vw,34px);top:calc(76% - 74px)}
body.lat .proximo.anterior.vert .dica{left:auto;right:calc(100% + 12px);transform:translate(8px,-50%)}
body.lat .proximo.anterior.vert:hover .dica{transform:translate(0,-50%)}

/* ===== Seção 5: foto do Marcelo à esquerda (encostada na borda, como corte intencional) + texto ===== */
body.lat main>section#o-careca{padding:0 !important;display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);overflow:hidden;background:#f2f2f0}
#o-careca .oc-foto{margin:0;position:relative;height:100%;min-height:0;overflow:hidden;background:#222}
#o-careca .oc-foto img{width:100%;height:100%;object-fit:cover;object-position:left 30%;display:block}
#o-careca .oc-foto::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 78%,rgba(242,242,240,.0) 100%),linear-gradient(0deg,rgba(0,0,0,.25),transparent 30%)}
body.lat main>section#o-careca>.wrap.oc-txt{margin:auto 0;padding:96px 120px 40px clamp(32px,5vw,84px);max-width:none;display:flex;flex-direction:column;align-items:flex-start}
#o-careca .oc-tit{margin:.9rem 0 0;font-family:'Anton','Inter',sans-serif;font-weight:400;line-height:.95;color:#101114;letter-spacing:-.01em;text-transform:none}
#o-careca .oc-tit .p1{display:block;font-size:clamp(3.4rem,min(7.4cqw,13vh),8rem)}
#o-careca .oc-tit .p2{display:block;font-size:clamp(1.9rem,min(4cqw,7.4vh),4.4rem);color:transparent;-webkit-text-stroke:max(1.5px,.1vw) #101114;margin-top:.06em}
#o-careca .oc-sub{margin:1.2rem 0 0;font-size:clamp(1rem,1.5cqw,1.3rem);color:#101114}
#o-careca .oc-p{margin:.9rem 0 0;max-width:46ch;color:#55595f;font-size:1.02rem;line-height:1.5}
#o-careca .sobre-lista{margin-top:1.4rem}
#o-careca .oc-bts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
#o-careca .oc-bts .btn{border-radius:3px}
#o-careca{container-type:inline-size}
@container (max-width:860px){
  body.lat main>section#o-careca{grid-template-columns:1fr}
}
@media (max-width:900px){
  #o-careca .oc-foto{height:62vh}
  #o-careca .oc-txt{padding:28px 18px 40px}
  #o-careca{background:#f2f2f0}
}

/* ===== Seção 7: depoimento no estilo cartão dividido (azul escuro + painel claro) ===== */
#depoimento{container-type:inline-size;position:relative;--a:0px;--H:100vh;--cut:56cqw;--serif:'Alegreya',Georgia,'Times New Roman',serif;--creme:#eef2f6;--tinta:#0d2a44;background:var(--bg2)}
#depoimento .depo-fundo{display:none}
#depoimento .depo-fundo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.3))}
#depoimento .depo-card{position:relative;width:calc(100cqw - 2*var(--a));height:var(--H);margin:0;border-radius:0;font-family:var(--serif);color:#f3e9d9;background:radial-gradient(380px 360px at 30% 22%,#2f6c9a 0,transparent 70%),linear-gradient(90deg,#0f3555 0,#123B5D calc(var(--cut) - var(--a)),var(--creme) calc(var(--cut) - var(--a)));overflow:hidden}
body.lat main>section#depoimento{padding:0 !important}
body.lat main>section#depoimento>.depo-card{margin:0;width:100cqw;height:100vh}
#depoimento .dc-topo{top:64px !important}
#depoimento .depo-card .depo-moldura{margin-top:96px !important}
#depoimento .depo-card>*{position:absolute}
#depoimento .dc-topo{position:absolute;left:0;right:0;top:0;height:15%}
#depoimento .dc-topo>*{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.7rem;font-size:clamp(.78rem,1.05cqw,.95rem)}
#depoimento .dc-marca{left:5%;letter-spacing:.04em;font-size:clamp(.95rem,1.4cqw,1.2rem)}
#depoimento .dc-linhas{width:20px;height:9px;border-top:2px solid #f3e9d9;position:relative;margin-right:1.2rem}
#depoimento .dc-linhas::after{content:'';position:absolute;left:0;top:3px;width:14px;border-top:2px solid #f3e9d9}
#depoimento .dc-busca{left:calc(var(--cut) - var(--a) - 18%);color:rgba(243,233,217,.5)}
#depoimento .dc-busca svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
#depoimento .dc-perfil{left:calc(var(--cut) - var(--a) + 7%);color:var(--tinta)}
#depoimento .dc-perfil img{width:28px;height:28px;border-radius:50%;object-fit:cover}
#depoimento .dc-perfil b{font-weight:500}
#depoimento .dc-cont{right:5%;color:var(--tinta)}
#depoimento .dc-cont i{width:26px;height:26px;border-radius:50%;background:#123B5D;display:grid;place-items:center}
#depoimento .dc-cont svg{width:13px;height:13px;fill:#fff}
#depoimento .dc-texto{left:7%;top:31%;width:min(420px,calc(var(--cut) - var(--a) - var(--H)*.22 - 14cqw))}
#depoimento .dc-preco{font-size:clamp(1.2rem,2cqw,1.7rem);font-weight:400;letter-spacing:.01em}
#depoimento .dc-texto h2{margin-top:1.1rem;font:500 clamp(1.3rem,2.1cqw,1.85rem)/1.2 var(--serif);letter-spacing:0;text-transform:none;color:#fff;text-wrap:balance}
#depoimento .dc-desc{margin-top:1.4rem;font-size:clamp(.85rem,1.2cqw,1rem);line-height:1.38;color:rgba(243,233,217,.85)}
#depoimento .depo-card .depo-moldura{left:calc(var(--cut) - var(--a));top:50%;transform:translate(-50%,-52%);height:calc(var(--H)*.6);width:auto !important;aspect-ratio:9/16;max-width:none;margin:0 !important;border-radius:16px;border:0;box-shadow:0 30px 60px rgba(8,25,43,.55),0 0 0 1px rgba(255,255,255,.08);z-index:2}
#depoimento .dc-mini{right:4.2%;top:31%;list-style:none;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,18px);margin:0;padding:0}
#depoimento .dc-mini::before{content:'';position:absolute;left:-46px;top:26px;width:34px;border-top:1px solid #c9a98a}
#depoimento .dc-mini li{width:clamp(42px,5cqw,64px);aspect-ratio:1;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 8px 18px rgba(13,42,68,.22)}
#depoimento .dc-mini img{width:100%;height:100%;object-fit:cover;display:block}
#depoimento .dc-specs{left:7%;bottom:10%;width:calc(var(--cut) - var(--a) - var(--H)*.22 - 7cqw);display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
#depoimento .dc-specs h3{font:700 .72rem var(--serif);color:#f0d9a8;letter-spacing:.02em;margin-bottom:.6rem}
#depoimento .dc-specs p{font-size:.62rem;line-height:1.35;color:rgba(243,233,217,.78)}
#depoimento .dc-seta{left:3.5%;bottom:5%;width:8px;height:8px;border-right:1px solid #f3e9d9;border-bottom:1px solid #f3e9d9;transform:rotate(45deg);opacity:.7}
#depoimento .dc-rel{left:calc(var(--cut) - var(--a) + 5%);right:5%;bottom:7%;color:var(--tinta)}
#depoimento .dc-rel small{display:block;font-size:.68rem;margin-bottom:.6rem}
#depoimento .dc-rel-card{display:flex;align-items:center;gap:1rem;background:#fff;border-radius:10px;padding:.9rem 1.1rem;box-shadow:0 12px 26px rgba(13,42,68,.14);color:inherit;text-decoration:none}
#depoimento .dc-rel-card img{width:58px;height:50px;border-radius:8px;object-fit:cover;flex:none}
#depoimento .dc-rel-card span{font-size:.66rem;line-height:1.35;color:#2c4a64}
#depoimento .dc-rel-card em{display:block;font-style:normal;color:#e0a63a;letter-spacing:.14em;margin-top:.35rem}
/* telas estreitas: tudo empilha, vídeo no topo */
@container (max-width:860px){
  #depoimento{--a:16px}
  #depoimento .depo-card{height:auto;display:flex;flex-direction:column;gap:1.6rem;padding:26px 22px 28px;background:linear-gradient(180deg,#123B5D,#0f3555)}
  #depoimento .depo-card>*{position:static}
  #depoimento .dc-topo,#depoimento .dc-mini,#depoimento .dc-seta,#depoimento .dc-busca,#depoimento .dc-perfil,#depoimento .dc-cont{display:none}
  #depoimento .dc-texto{width:auto}
  #depoimento .depo-card .depo-moldura{order:-1;transform:none;height:auto;width:min(100%,300px) !important;margin:0 auto !important}
  #depoimento .dc-specs{width:auto;grid-template-columns:1fr}
  #depoimento .dc-specs p{font-size:.8rem}
  #depoimento .dc-rel{background:var(--creme);border-radius:12px;padding:1rem}
}

/* a seta de rolagem interna quando o painel é mais alto que a tela */
body.lat main>section::-webkit-scrollbar{width:6px}
body.lat main>section::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px}




/* faixa azul metálica da seção Vendidos + redes do rodapé */
.vend-faixa{position:relative;width:100%;background:linear-gradient(180deg,#2c5f8c 0,#123B5D 38%,#0b2a45 62%,#1d4a72 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.45);padding-block:clamp(18px,3vh,34px);overflow:hidden}
.vend-faixa::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.04) 54%,transparent 70%);pointer-events:none}
.vend-faixa .vend-topo{position:relative;margin:0}
.vend-faixa .vend-topo p{color:#d6e4f0}
body.lat main>section#vendidos{padding-top:0!important;justify-content:flex-start}
.vend>.wrap{padding-top:clamp(20px,4vh,44px)}
.rod-redes{display:flex;gap:14px;align-items:center}
.rede{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--linha);color:#fff;transition:background .25s,border-color .25s,transform .25s}
.rede:hover{background:#123B5D;border-color:#4d86b3;transform:translateY(-2px)}
.rede svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rede svg .pt{fill:currentColor;stroke:none}
body.lat .vend-faixa{padding-top:clamp(84px,11vh,104px)}

.vend-faixa{flex:none}

body.lat .vend-faixa{align-self:stretch;width:100%;max-width:none;box-sizing:border-box}

body.lat main>section#vendidos{padding-right:0!important}
body.lat main>section#vendidos>.wrap:not(.x){padding-right:112px}
body.lat main>section#vendidos>.vend-faixa .wrap{padding-right:112px}

body.lat #pedido footer .rod{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
body.lat #pedido footer .rod ul{display:flex;gap:1.4rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
body.lat #pedido footer .rod img{height:44px;width:auto}
body.lat #pedido footer{padding-block:18px 8px;margin-top:clamp(14px,2.5vh,30px)}
body.lat #pedido footer .rod-fim{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:14px;font-size:.78rem}

body.lat #pedido footer .rod ul{flex-direction:row}
body.lat #pedido footer .rod img{height:30px}
body.lat #pedido footer .rod-fim{margin-top:12px;padding-top:12px}