/* loja.css — componentes COMPARTIDOS del storefront (un solo archivo, cacheable).
   La identidad la ponen los tokens :root del tema (LojaTema::cssRoot). Sin colores duros acá:
   todo sale de var(--*). Arreglar un componente acá lo arregla en TODOS los temas a la vez. */
/* Tipografía de cabecera self-hosted (OFL, subset latin). font-display:swap = el texto se ve
   al instante con la fuente del sistema y cambia cuando carga la web (cero bloqueo de render). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sora-700.woff2) format('woff2')}
*{box-sizing:border-box}
/* Coluna flex: o rodapé ancora no FUNDO da janela — em páginas curtas (/reserva) ele
   flutuava no meio com um vazio branco debaixo (dono 25/08: "mira como se rompe"). */
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.5}
/* Num flex, o margin:0 auto dos wrappers deixa de esticar (auto-margin no eixo cruzado
   anula o stretch) e a página encolhia ao conteúdo — filho direto volta a ocupar tudo. */
body>*{width:100%}
.lj-foot,.lj-vit-foot{margin-top:auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* UM largo só para a loja inteira (dono 25/08): a barra e o conteúdo alinham em toda página.
   O --wrap por tema segue existindo para quem o lê, mas o chão comum é 1200. */
.lj-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* Fundida com a página, como a da vitrine (dono 25/08) — tom do chão + blur, borda sopro. */
.lj-top{background:color-mix(in srgb,var(--cor) 4%,color-mix(in srgb,var(--bg) 82%,transparent));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--bord) 45%,transparent);position:sticky;top:0;z-index:5}
.lj-top .lj-wrap{display:flex;align-items:center;gap:12px;height:68px}
.lj-brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:var(--whead);font-size:19px}
.lj-brand .dot{width:12px;height:12px;border-radius:50%;background:var(--cor);box-shadow:0 0 0 4px color-mix(in srgb,var(--cor) 18%,transparent)}
.lj-brand img{height:36px;width:auto;border-radius:9px}
.lj-brand small{display:block;font-family:var(--font-body);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:1px}
.lj-spacer{flex:1}
.lj-mr{font-size:13.5px;font-weight:600;color:var(--ink);border:1px solid var(--bord);border-radius:999px;padding:9px 15px;white-space:nowrap;transition:border-color .13s}
.lj-mr:hover{border-color:var(--cor)}
.lj-wa{background:var(--cor);color:var(--on-cor);font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--cor) 65%,transparent)}
/* ───────── Menu da loja: Início · Passeios · Blog (navegação Landing → Blog → Reserva)
   Mora na topbar compartilhada e nos headers próprios de imersivo/carrossel — daí o seletor
   ser independente do container. Estado ativo com sublinhado da cor do tema: um link "acionado"
   por peso ou cor sozinha some nas paletas claras. */
.lj-nav{display:flex;align-items:center;gap:20px;min-width:0;margin-left:8px}
.lj-nav-l{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;padding:3px 0;border-bottom:2px solid transparent;transition:color .13s,border-color .13s}
.lj-nav-l:hover{color:var(--ink)}
.lj-nav-l.on{color:var(--ink);border-bottom-color:var(--cor)}
/* Carrossel: header a cor plena — os tokens de texto do corpo não se leem sobre --cor. */
.lj-car-hd .lj-nav-l{color:color-mix(in srgb,var(--on-cor) 72%,transparent)}
.lj-car-hd .lj-nav-l:hover,.lj-car-hd .lj-nav-l.on{color:var(--on-cor)}
.lj-car-hd .lj-nav-l.on{border-bottom-color:var(--on-cor)}
@media (max-width:760px){
  /* Segunda linha própria: em 375px o menu não cabe ao lado da marca + reserva + WhatsApp.
     Rola na horizontal sem barra à vista em vez de quebrar em duas alturas. */
  .lj-top .lj-wrap{flex-wrap:wrap;height:auto;padding-top:11px;padding-bottom:0;column-gap:10px}
  .lj-nav{order:9;flex:1 0 100%;margin:9px 0 0;gap:18px;padding:8px 0 2px;border-top:1px solid color-mix(in srgb,var(--bord) 40%,transparent);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  .lj-nav::-webkit-scrollbar{display:none}
  .lj-ime-top .lj-nav,.lj-car-hd .lj-nav{flex:0 1 auto;margin:0 0 0 6px;padding:0;border-top:0;gap:14px}
}
.lj-hero{padding:34px 0 8px}
.lj-hero h1{font-family:var(--font-head);font-size:var(--h1);line-height:1.15;margin:0 0 8px;font-weight:var(--whead)}
.lj-hero p{color:var(--muted);margin:0;max-width:660px}
.lj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;padding:24px 0 44px}
.lj-card{background:var(--card);border:1px solid var(--bord);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .13s,box-shadow .13s,border-color .13s}
.lj-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.10);border-color:var(--cor)}
.lj-card .ph{aspect-ratio:var(--ph-ratio);background:var(--ph) center/cover no-repeat}
img.lj-ph{width:100%;height:auto;aspect-ratio:var(--ph-ratio);object-fit:cover;display:block;background:var(--ph)}
.lj-card .bd{padding:15px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.lj-card h3{margin:0;font-family:var(--font-head);font-size:18px;font-weight:var(--whead)}
.lj-card .desc{color:var(--muted);font-size:14px;flex:1}
.lj-card .meta{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px;gap:8px}
.lj-card .preco{font-weight:var(--whead);font-size:18px;color:var(--cor)}
.lj-card .preco small{color:var(--muted);font-weight:400;font-size:12px}
.lj-desde{display:block;color:var(--muted);font-weight:400;font-size:11px;letter-spacing:.2px}
/* Escassez honesta no layout BÁSICO (mesma frase da vitrine, tom sóbrio deste layout). */
.lj-vagas{font-size:12.5px;font-weight:600;color:color-mix(in srgb,var(--cor) 80%,#000)}
.lj-vagas.baixa{color:color-mix(in srgb,var(--acento) 42%,#1a0e00)}
.lj-tag{display:inline-block;background:color-mix(in srgb,var(--acento) 18%,var(--card));color:var(--acento);font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;letter-spacing:.3px;text-transform:uppercase}
.lj-btn{display:inline-block;background:var(--cor);color:var(--on-cor);font-weight:700;padding:11px 17px;border-radius:10px;text-align:center;border:none;cursor:pointer;font-size:15px}
.lj-btn.ghost{background:transparent;color:var(--cor);border:1px solid var(--cor)}
.lj-foot{border-top:1px solid var(--bord);background:var(--surf);margin-top:auto}
/* Fundo em vídeo de Minha reserva (dono 25/08): tela cheia atrás de tudo + véu escuro tênue.
   O véu é ::after para o vídeo nunca competir com o formulário; reduced-motion tira tudo. */
.lj-vfundo{position:fixed;inset:0;z-index:-1;overflow:hidden}
.lj-vfundo video{width:100%;height:100%;object-fit:cover}
.lj-vfundo::after{content:"";position:absolute;inset:0;background:rgba(8,18,28,.42)}
/* Sobre o vídeo, SÓ o texto solto do main vira branco — a card branca (.lj-vou .bd) mantém
   a tinta do tema (o #fff geral apagava os valores do voucher dentro dela; dono 25/08). */
body:has(.lj-vfundo) main{color:#fff}
body:has(.lj-vfundo) main a{color:#fff;text-decoration:underline}
body:has(.lj-vfundo) .lj-vou .bd{color:var(--ink)}
body:has(.lj-vfundo) .lj-vou .bd a{color:var(--cor);text-decoration:none}
body:has(.lj-vfundo) .lj-fine{color:rgba(255,255,255,.82)}
body:has(.lj-vfundo) .lj-vou-link input{background:var(--card);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.lj-vfundo{display:none}}
.lj-foot .lj-wrap{padding:22px 18px;color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.lj-foot a{color:var(--muted)}
.lj-back{color:var(--muted);font-size:14px;display:inline-flex;gap:6px;align-items:center;margin:18px 0 0}
/* FICHA v3 (2026-08-07) — layout do handoff: conteúdo + caixa de reserva fixa. Tokens 100%
   do tema (os grafito escuros também): o "azul de link" do mock vira mistura cor+tinta. */
.lj-det{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;align-items:start;padding:18px 0 44px}
.lj-book{position:sticky;top:90px}
.lj-gal-main{width:100%;aspect-ratio:var(--ph-ratio);border-radius:var(--radius);background:var(--ph);border:1px solid var(--bord);object-fit:cover;display:block;cursor:zoom-in}
div.lj-gal-main{cursor:default}
.lj-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:9px}
.lj-thumbs .t{aspect-ratio:1/1;border-radius:9px;background:var(--ph);border:1px solid var(--bord);cursor:pointer;padding:0;overflow:hidden}
.lj-thumbs .t img{width:100%;height:100%;object-fit:cover;display:block}
.lj-lb{position:fixed;inset:0;background:rgba(5,10,16,.92);z-index:50;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.lj-lb img{max-width:94vw;max-height:88vh;border-radius:8px}
.lj-lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:999px;width:44px;height:44px;font-size:20px;cursor:pointer}
.lj-lb .x{top:14px;right:14px}
.lj-lb .pv{left:10px;top:50%;transform:translateY(-50%)}
.lj-lb .nx{right:10px;top:50%;transform:translateY(-50%)}
/* v3: título/subtítulo/chips na coluna de conteúdo */
.lj-titulo{font-family:var(--font-head);font-weight:var(--whead);font-size:33px;line-height:1.1;letter-spacing:-.01em;margin:20px 0 4px}
.lj-subt{color:var(--muted);font-size:16px;margin:0 0 12px;max-width:60ch}
.lj-dspecs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.lj-dspecs .sp{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);background:var(--surf);border:1px solid var(--bord);padding:4px 10px;border-radius:6px}
.lj-dspecs .sp .ico{opacity:.65}
.lj-sec{margin:22px 0 0}
.lj-sec h2{font-family:var(--font-head);font-weight:var(--whead);font-size:21px;margin:0 0 8px}
.lj-sec .longa{color:var(--ink);opacity:.86;font-size:15px;max-width:65ch}
/* roteiro — linha do tempo */
.lj-rot{list-style:none;margin:12px 0 0;padding:0;position:relative}
.lj-rot:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--bord)}
.lj-rot li{position:relative;padding:0 0 15px 32px;font-size:14.5px}
.lj-rot li:last-child{padding-bottom:0}
.lj-rot .pt{position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:999px;background:var(--card);border:3px solid var(--cor);box-sizing:border-box}
.lj-rot li:last-child .pt{background:var(--cor)}
.lj-rot .h{font-weight:700;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--cor) 72%,var(--ink));margin-right:8px}
/* inclui / o que levar */
.lj-inc{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:4px}
.lj-inc.solo{grid-template-columns:1fr}
.lj-inc .cap{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.lj-inc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.lj-inc li{display:flex;gap:9px;align-items:flex-start}
.lj-inc .sim .ico{color:#1d7a43;margin-top:2px}
.lj-inc .neu{color:var(--ink)}
.lj-inc .neu .tr{opacity:.5}
/* ponto de embarque */
.lj-emb{margin-top:22px;background:var(--card);border:1px solid var(--bord);border-radius:var(--radius);padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lj-emb .ic{width:42px;height:42px;border-radius:11px;background:color-mix(in srgb,var(--cor) 11%,var(--card));color:color-mix(in srgb,var(--cor) 72%,var(--ink));display:grid;place-items:center;flex:none}
.lj-emb .tx{flex:1;min-width:180px}
.lj-emb .t{display:block;font-weight:700;font-size:15px}
.lj-emb .d{display:block;font-size:13px;color:var(--muted)}
.lj-emb .h{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-top:4px}
/* D06 (auditoria 30/09): no celular o botão do Maps desce para a própria linha — texto com a largura toda,
   endereço e horário lidos juntos (antes a flex espremia o texto numa coluna de uma letra). */
@media(max-width:600px){
  .lj-emb{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:12px}
  .lj-emb .tx{min-width:0;overflow-wrap:break-word}
  .lj-emb a.maps{grid-column:1/-1;justify-content:center}
}
.lj-cc-blk a.lj-cc-maps{margin-top:2px}
.lj-emb a.maps,.lj-cc-blk a.lj-cc-maps{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:color-mix(in srgb,var(--cor) 72%,var(--ink));border:1.5px solid var(--cor);border-radius:999px;padding:9px 15px}
/* caixa de reserva (v3) — .lj-dates fica transparente (a consulta de reserva a reusa "nua") */
.lj-dates{margin-top:0}
.lj-bx{background:var(--card);border:1px solid var(--bord);border-radius:var(--radius);padding:20px 22px;box-shadow:0 14px 34px -22px rgba(0,0,0,.25)}
.lj-bx .de{font-size:12px;color:var(--muted)}
.lj-bx .pr{font-family:var(--font-head);font-size:30px;font-weight:var(--whead);line-height:1.1}
.lj-bx .pr small{font-size:13px;color:var(--muted);font-family:var(--font-body);font-weight:400}
.lj-bx .cri{font-size:12.5px;color:var(--muted);margin-top:2px}
.lj-bx-h,.lj-dates h2{font-size:15px;margin:14px 0 6px;font-weight:var(--whead)}
.lj-vg{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,var(--cor) 7%,var(--card));color:color-mix(in srgb,var(--cor) 72%,var(--ink));margin:12px 0 0}
/* QA 07/10 (dono: nada durazno dentro de cards): a urgência vai no texto, o fundo segue quase branco. */
.lj-vg.baixa{background:color-mix(in srgb,var(--ink) 4%,var(--card));border:1px solid color-mix(in srgb,var(--ink) 13%,var(--card));color:color-mix(in srgb,var(--acento) 55%,var(--ink))}
.lj-vg .pulse{width:7px;height:7px;border-radius:999px;background:currentColor;flex:none;animation:ljvpulse 1.7s ease-in-out infinite}
@keyframes ljvpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}55%{box-shadow:0 0 0 5px transparent}}
.lj-pol{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink);margin-top:10px}
.lj-pol .ic{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;flex:none;font-size:11px;font-weight:800;background:color-mix(in srgb,var(--cor) 16%,var(--card));color:color-mix(in srgb,var(--cor) 72%,var(--ink))}
.lj-pol small{font-weight:400;color:var(--muted)}
/* passageiros com stepper */
/* Grade 1fr|auto: o contador fica SEMPRE na mesma coluna à direita, seja «Adultos» ou
   «Crianças (até 5 anos)» — no celular o rótulo longo quebrava e empurrava o − + para baixo. */
.lj-strow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bord);font-size:14px}
.lj-strow .lb{display:grid;gap:1px;min-width:0;color:var(--ink)}
.lj-strow .lb>small.id{display:block;font-size:12px}
.lj-strow .lb small{color:var(--muted);font-size:12.5px;font-weight:400}
.lj-strow .step{display:flex;align-items:center;gap:8px}
.lj-strow .step .st{width:34px;height:34px;border-radius:9px;border:1px solid var(--bord);background:var(--surf);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;transition:transform 140ms ease,background 140ms ease}
.lj-strow .step .st:active{transform:scale(.9);background:var(--bord)}
.lj-strow .step .st[disabled]{opacity:.4;cursor:default}
.lj-strow .step input{width:46px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;border:none;background:transparent;padding:6px 0;-moz-appearance:textfield;appearance:textfield}
.lj-strow .step input::-webkit-outer-spin-button,.lj-strow .step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* split informativo "paga agora / no embarque" */
.lj-split{margin-top:10px;border:1px solid var(--bord);border-radius:11px;overflow:hidden}
.lj-split .ln{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 13px;font-size:13px;color:var(--muted)}
.lj-split .ln b{font-variant-numeric:tabular-nums;font-size:14.5px;color:var(--ink)}
.lj-split .ln.agora{background:color-mix(in srgb,var(--cor) 8%,var(--card));color:var(--ink);font-weight:600;border-bottom:1px solid var(--bord)}
.lj-split .ln.agora b{color:var(--cor);font-size:16px}
.lj-cta{display:block;width:100%;margin-top:12px;padding:14px 19px;border-radius:11px;transition:transform 140ms ease,filter 140ms ease}
.lj-cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.lj-cta:hover{filter:brightness(1.07)}}
/* selos sobre a foto principal */
.lj-gal-bdg{position:absolute;top:14px;left:14px;background:var(--acento);color:color-mix(in srgb,var(--acento) 24%,#1a0e00);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.lj-gal-tipo{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(6,26,38,.62);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
/* outros passeios */
.lj-outros{border-top:1px solid var(--bord);padding:26px 0 14px;margin-top:8px}
.lj-outros h2{font-family:var(--font-head);font-weight:var(--whead);font-size:22px;margin:0 0 14px}
.lj-outros .row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.lj-outros .oc{background:var(--card);border:1px solid var(--bord);border-radius:12px;overflow:hidden;display:block;transition:transform 180ms ease,box-shadow 180ms ease}
.lj-outros .oc .m{display:block;height:110px;overflow:hidden;background:var(--ph)}
.lj-outros .oc .m img,.lj-outros .oc .m svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms ease}
.lj-outros .oc .b{display:block;padding:11px 13px 13px}
.lj-outros .oc .t{display:block;font-weight:700;font-size:14px;line-height:1.25}
.lj-outros .oc .p{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
@media (hover:hover) and (pointer:fine){.lj-outros .oc:hover{transform:translateY(-4px);box-shadow:0 14px 34px -16px rgba(0,0,0,.28)}.lj-outros .oc:hover .m img{transform:scale(1.06)}}
.lj-dates label{display:block;font-size:13px;color:var(--muted);margin:11px 0 4px}
/* P1-6: inputs a 16px — abaixo disso o Safari iOS dá auto-zoom no foco (salta a tela no checkout) */
/* font:inherit — sem isto o navegador desenha os campos com a fonte do sistema, não a da loja. */
:where(.lj-dates,.lj-checkout,.lj-pop) :is(input,select,textarea){font:inherit;font-size:16px}
.lj-dates input,.lj-dates select{width:100%;padding:10px 11px;border:1px solid var(--bord);border-radius:9px;font-size:16px;background:var(--surf);color:var(--ink)}
/* Casilha de 20 px dentro de um rótulo de 44 px: o aceite é obrigatório e o dedo erra os 13 px nativos. */
.lj-consent{display:flex;gap:10px;align-items:center;min-height:44px;margin:12px 0 0;font-size:13px;color:var(--muted);cursor:pointer}
.lj-consent input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--cor)}
.lj-consent a{color:var(--cor);text-decoration:underline}
.lj-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px dashed var(--bord);font-size:14px;color:var(--muted)}
.lj-total b{font-family:var(--font-head);font-size:24px;color:var(--cor);font-weight:var(--whead);font-variant-numeric:tabular-nums;display:inline-block;transition:transform 200ms ease}
.lj-total b.bump{transform:scale(1.055)}
.lj-erro{background:color-mix(in srgb,#e24b4a 14%,var(--card));border:1px solid color-mix(in srgb,#e24b4a 45%,var(--card));color:#e24b4a;border-radius:9px;padding:9px 12px;font-size:14px;margin-bottom:8px}
.lj-fine{color:var(--muted);font-size:12px;margin:10px 0 0;text-align:center}
.lj-vou{max-width:530px;margin:28px auto;background:var(--card);border:1px solid var(--bord);border-radius:var(--radius);overflow:hidden}
.lj-vou .top{background:var(--cor);color:var(--on-cor);padding:18px 22px}
.lj-vou .top h1{margin:0;font-family:var(--font-head);font-size:20px;font-weight:var(--whead)}
.lj-vou .bd{padding:22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.lj-vou .qr{flex:0 0 auto}
.lj-vou .qr canvas,.lj-vou .qr img{display:block;border-radius:8px;background:#fff;padding:5px}
.lj-vou .info{flex:1;min-width:200px}
.lj-vou .info .cod{font-family:ui-monospace,monospace;font-size:20px;font-weight:800;letter-spacing:1px;color:var(--cor)}
.lj-vou .info .li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--bord);font-size:14px}
.lj-vou .info .li:last-child{border-bottom:none}
.lj-vou .acts{padding:0 22px 22px;display:flex;gap:10px}
.lj-404{text-align:center;padding:80px 18px}
.lj-404 h1{margin:0 0 8px;font-family:var(--font-custom-head,var(--font-body));font-weight:var(--whead)}
.lj-404 p{color:var(--muted);margin:0 0 18px}
/* P1-4: blocos estruturados da ficha (o que inclui / o que levar / ponto de embarque) */
.lj-spec{display:grid;gap:12px;margin:14px 0 0}
.lj-spec .bl h3{font-size:14px;margin:0 0 5px;font-weight:700}
.lj-spec .bl ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink)}
.lj-spec .bl ul li{margin:2px 0;opacity:.9}
.lj-spec .bl p{margin:0;font-size:14px}
/* P1-2: política de cancelamento/clima no funil (colapsável, sempre antes do form) */
.lj-disc{margin:12px 0 0;border:1px solid var(--bord);border-radius:10px;background:var(--surf);font-size:14px}
.lj-disc summary{padding:10px 13px;cursor:pointer;font-weight:600;color:var(--ink)}
.lj-disc>div{padding:0 13px 12px;color:var(--muted);white-space:normal}
/* P1-13: seletor de idioma (só renderiza com o pacote i18n ativo) */
.lj-lang{display:flex;gap:2px;align-items:center;font-size:12px}
.lj-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;box-sizing:border-box;padding:4px 7px;border-radius:7px;color:var(--muted);font-weight:600;letter-spacing:.3px}
.lj-lang a.on{background:var(--surf);color:var(--cor);border:1px solid var(--bord)}
/* P1-12/POP-1: pop-up de retenção (overlay + card temado; sem libs) */
.lj-pop{position:fixed;inset:0;z-index:60;background:rgba(5,10,16,.55);display:flex;align-items:center;justify-content:center;padding:18px}
.lj-pop[hidden]{display:none}
.lj-pop .card{position:relative;background:var(--card);color:var(--ink);border:1px solid var(--bord);border-radius:var(--radius);max-width:360px;width:100%;padding:26px 22px 22px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.lj-pop .x{position:absolute;top:8px;right:10px;background:none;border:none;font-size:24px;color:var(--muted);cursor:pointer;line-height:1}
.lj-pop .off{display:inline-block;background:var(--cor);color:var(--on-cor);font-weight:800;font-size:15px;padding:5px 14px;border-radius:999px;margin-bottom:10px;letter-spacing:.5px}
.lj-pop h3{font-family:var(--font-custom-head,var(--font-body));font-weight:var(--whead);font-size:20px;margin:0 0 6px}
.lj-pop p{color:var(--muted);font-size:14px;margin:0 0 12px}
.lj-pop .cd{font-size:13px;color:var(--muted);margin:0 0 12px}
.lj-pop .cd b{font-family:ui-monospace,monospace;font-size:16px;color:var(--cor)}
.lj-pop .cup{font-family:ui-monospace,monospace;font-weight:800;font-size:19px;letter-spacing:2px;border:2px dashed var(--cor);color:var(--cor);border-radius:10px;padding:9px 0;margin:0 0 12px;user-select:all}
/* LOJA2: pop-up v2 quase tela cheia — retrato (9:16) no celular, paisagem (16:9) no desktop */
.lj-pop .card.v2{max-width:none;width:min(92vw,440px);min-height:86dvh;max-height:92dvh;padding:0;overflow:hidden;display:flex;flex-direction:column}
.lj-pop .card.v2 .img{flex:1 1 auto;min-height:42dvh;background-size:cover;background-position:center}
.lj-pop .card.v2 .img.anim{background:linear-gradient(120deg,var(--cor),color-mix(in srgb,var(--cor) 35%,#0b2745),var(--cor));background-size:220% 220%;animation:ljPopMar 6s ease-in-out infinite;min-height:24dvh}
@keyframes ljPopMar{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion: reduce){.lj-pop .card.v2 .img.anim{animation:none}}
.lj-pop .card.v2 .bd{padding:20px 18px 22px;overflow:auto}
/* X de 44 px: é a saída de um pop-up que ninguém pediu — tem de ser fácil de acertar com o polegar. */
.lj-pop .card.v2 .x{z-index:2;background:rgba(0,0,0,.35);color:#fff;border-radius:999px;width:44px;height:44px;display:grid;place-items:center;top:10px;right:10px}
/* Foco: fundo branco + anel da marca. O translúcido escuro com contorno branco lia como botão
   desabilitado justo quando o teclado chegava nele. */
.lj-pop .x:focus-visible,.lj-pop .card.v2 .x:focus-visible{outline:none;background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--cor)}
.lj-pop .off{align-self:center}
@media (min-width:761px){
  /* QA 07/10: a 1440 o 16:9 de 960 px dava ~540 px de altura com o texto boiando num mar branco.
     Teto de 560 px e largura de 860: a foto ocupa a metade esquerda inteira (proporcional ao
     cartão, nunca esticada além dele) e o texto fica centrado ao lado, sem sobra. */
  .lj-pop .card.v2{width:min(92vw,860px);aspect-ratio:auto;min-height:min(400px,80vh);height:auto;max-height:min(560px,88vh);flex-direction:row}
  .lj-pop .card.v2 .img{min-height:0;flex:1 1 52%}
  .lj-pop .card.v2 .bd{flex:1 1 48%;display:flex;flex-direction:column;justify-content:center;padding:34px 30px}
}
/* PROD3: carrossel da ficha do produto (setas + contador sobre a imagem principal) */
.lj-gal-wrap{position:relative}
.lj-gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:999px;border:none;background:rgba(0,0,0,.45);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lj-gal-nav.pv{left:10px}.lj-gal-nav.nx{right:10px}
.lj-gal-nav:hover{background:rgba(0,0,0,.65)}
.lj-gal-count{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.lj-thumbs .t.on{outline:2px solid var(--cor)}
/* LOJA2: HERO grande da loja (foto ou vídeo YouTube + texto por cima) — compartilhado pelos layouts */
.lj-heroX{position:relative;overflow:hidden;min-height:var(--shop-hero-height,340px);display:flex;align-items:flex-end}
.lj-heroX .media{position:absolute;inset:0;background-size:cover;background-position:center}
.lj-heroX.video .media iframe{position:absolute;top:50%;left:50%;width:max(100vw,178dvh);height:max(56.25vw,100%);transform:translate(-50%,-50%);border:0;pointer-events:none}
.lj-heroX .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,18,.15) 30%,rgba(4,10,18,.72) 100%)}
.lj-heroX .txt{position:relative;z-index:1;padding:26px 20px 30px;max-width:860px;margin:0 auto;width:100%;color:#fff;text-align:left}
.lj-heroX .txt h1{font-family:var(--font-head);font-weight:var(--whead);font-size:clamp(26px,5.4vw,44px);margin:0 0 8px;text-shadow:0 2px 14px rgba(0,0,0,.45);text-wrap:balance}
.lj-heroX .txt p{font-size:clamp(14px,2.4vw,17px);margin:0;max-width:56ch;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.4)}
@media (max-width:759px){.lj-heroX{min-height:var(--shop-hero-mobile-height,240px)}}
/* P1-5: barra fixa de reserva na ficha (só mobile; a home já tinha a dela) */
.lj-det-bar{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;border-top:1px solid var(--bord);background:var(--card);padding:10px 16px calc(10px + env(safe-area-inset-bottom));margin:18px -18px 0}
.lj-det-bar .pr{flex:1;font-size:14px;color:var(--muted)}
.lj-det-bar .pr b{color:var(--cor);font-size:17px}
.lj-det-bar-btn{background:var(--cor);color:var(--on-cor);font-weight:700;font-size:15px;padding:12px 26px;border-radius:12px;text-align:center}
@media(min-width:761px){.lj-det-bar{display:none}}
@media(max-width:980px){.lj-det{grid-template-columns:1fr;gap:24px}.lj-book{position:static}}
@media(max-width:760px){.lj-hero h1{font-size:26px}.lj-titulo{font-size:26px}}
@media print{body{background:#fff;color:#000}.lj-top,.lj-foot,.lj-vou .acts,.lj-det-bar,.lj-vfundo{display:none}.lj-vou{border:none;margin:0}}

/* ───────── Layout VITRINE v3 (2026-08-07) — estética do handoff de design ─────────
   Recriação fiel de mocksNoTocar/design_handoff_loja_paseos/loja-ecommerce-v3.html.
   TUDO pintado com var(--*) do tema: os 4 temas seguem funcionando sem tocar o markup.
   Tokens de MOTION (não são do tema: os 4 se movem igual) definidos uma vez aqui. */
:root{
  --lj-ease-out:cubic-bezier(.23,1,.32,1);
  --lj-ease-io:cubic-bezier(.77,0,.175,1);
  --lj-t-press:140ms; --lj-t-micro:180ms;
}
.lj-vit-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ══ 1. CABEÇALHO ══ (2026-08-25, dono: "o header está velho" — vidro com blur, marca com
   mais presença, "Minha reserva" vira pill; o WhatsApp ganha sombra da própria cor) */
.lj-vit-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-size:21px;font-weight:var(--whead);white-space:nowrap}
.lj-vit-brand .dot{width:38px;height:38px;border-radius:12px;background:linear-gradient(150deg,var(--cor),color-mix(in srgb,var(--cor) 62%,#000));display:grid;place-items:center;color:var(--on-cor);font-size:18px;font-weight:700;font-family:var(--font-body);box-shadow:0 4px 12px -4px color-mix(in srgb,var(--cor) 55%,transparent)}
.lj-vit-brand img{height:38px;width:auto;border-radius:10px}
.lj-vit-brand small{display:block;font-family:var(--font-body);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:1px}
.lj-vit-sp{flex:1}

/* ══ 2. FAIXA DE MAR E TEMPO (ClimaService::hoje(); null = não renderiza) ══ */
.lj-vit-clima{background:linear-gradient(180deg,color-mix(in srgb,var(--cor) 78%,#000),var(--cor));color:#fff}
.lj-vit-clima .lj-vit-wrap{display:flex;align-items:center;gap:26px;padding:13px 24px;flex-wrap:wrap}
.lj-vit-clima .agora{display:flex;align-items:center;gap:13px}
.lj-vit-clima .tmp{font-family:var(--font-head);font-size:30px;font-weight:var(--whead);line-height:1}
.lj-vit-clima .ceu{font-size:13.5px;line-height:1.3}
.lj-vit-clima .ceu b{display:block;font-size:14.5px}
.lj-vit-clima .div{width:1px;height:34px;background:rgba(255,255,255,.28)}
.lj-vit-clima .mar{display:flex;align-items:center;gap:9px}
.lj-vit-clima .farol{width:11px;height:11px;border-radius:999px;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.lj-vit-clima .farol.calmo{background:#7ae582}
.lj-vit-clima .farol.moderado{background:#ffd166}
.lj-vit-clima .farol.agitado{background:#ff8f6b}
.lj-vit-clima .lb{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;display:block}
.lj-vit-clima .vl{font-size:14.5px;font-weight:700}
.lj-vit-clima .vento{font-size:13.5px;opacity:.92}
.lj-vit-clima .saidas{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600}
.lj-vit-clima .saidas .pt{width:8px;height:8px;border-radius:999px;background:#7ae582;flex:none}

/* ══ 3. TIRA DE CONFIANÇA (cada item sai da config REAL; o que não se cumpre não renderiza) ══ */

/* O chão da vitrine leva um sopro da cor do tema — o branco puro era "frio" (dono 25/08).
   :has não pega em navegador velho → fica o var(--bg) de sempre, nada quebra. */
body:has(.lj-vit-head){background:color-mix(in srgb,var(--cor) 4%,var(--bg))}

/* ══ 4. CABEÇA DE CATÁLOGO ══ */
.lj-vit-head{padding:36px 0 6px}
.lj-vit-kick{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cor);margin-bottom:10px}
.lj-vit-kick .ico{opacity:.8}
.lj-vit-head h1{font-family:var(--font-head);font-weight:var(--whead);font-size:40px;line-height:1.08;margin:0;letter-spacing:-.01em}
.lj-vit-sub{font-size:15.5px;color:var(--muted);margin:9px 0 0;max-width:640px}
.lj-vit-count{font-size:13.5px;color:var(--muted);white-space:nowrap}
.lj-vit-count b{color:var(--ink);font-variant-numeric:tabular-nums}
/* O "Ordenar" é um dropdown PRÓPRIO (<details> + links): a lista aberta de um <select>
   é do sistema operacional e CSS não chega nela — o dono a viu nativa e mandou trocar. */
.lj-vit-sort{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.lj-vit-ord{position:relative}
.lj-vit-ord summary{list-style:none;display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);padding:9px 16px;border:1px solid var(--bord);border-radius:999px;background:var(--card);box-shadow:0 1px 2px rgba(17,34,51,.05);white-space:nowrap;transition:border-color var(--lj-t-micro) var(--lj-ease-out)}
.lj-vit-ord summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){.lj-vit-ord summary:hover{border-color:var(--cor)}}
.lj-vit-ord .chev{width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translate(-1px,-1px);transition:transform var(--lj-t-micro) var(--lj-ease-out)}
.lj-vit-ord[open] summary{border-color:var(--cor)}
.lj-vit-ord[open] .chev{transform:rotate(225deg) translate(-2px,-2px)}
.lj-vit-ord .menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:210px;background:var(--card);border:1px solid var(--bord);border-radius:14px;box-shadow:0 18px 40px -18px rgba(17,34,51,.35);padding:6px;display:flex;flex-direction:column;gap:2px}
.lj-vit-ord .op{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink);padding:10px 12px;border-radius:9px;transition:background var(--lj-t-micro) var(--lj-ease-out)}
.lj-vit-ord .gr{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px 4px}
.lj-vit-ord .gr~.gr{margin-top:4px;border-top:1px solid var(--bord);padding-top:12px}
.lj-vit-ord .op .ico{opacity:0;color:var(--cor);flex:none}
.lj-vit-ord .op.on .ico{opacity:1}
.lj-vit-ord .op.on{background:color-mix(in srgb,var(--cor) 9%,transparent)}
@media (hover:hover) and (pointer:fine){.lj-vit-ord .op:hover{background:color-mix(in srgb,var(--cor) 7%,transparent)}}

/* ══ 5. BARRA DE FILTROS ══ (dono 2026-08-25: sem sticky, tudo numa linha — tipo,
   vagas, TURNO e a ordem juntas; no celular a linha desliza como os chips da agenda) */
.lj-vit-fbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 26px}
.lj-vit-fbar .chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.lj-vit-fbar .sep{width:1px;height:22px;background:var(--bord);flex:none;margin:0 4px}
.lj-vit-fbar .chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink);border:1px solid var(--bord);background:var(--card);border-radius:999px;padding:9px 16px;white-space:nowrap;box-shadow:0 1px 2px rgba(17,34,51,.05);transition:color var(--lj-t-micro) var(--lj-ease-out),border-color var(--lj-t-micro) var(--lj-ease-out),background var(--lj-t-micro) var(--lj-ease-out),box-shadow var(--lj-t-micro) var(--lj-ease-out)}
.lj-vit-fbar .chip .ico{opacity:.6;flex:none}
.lj-vit-fbar .chip .n{font-size:11.5px;font-weight:400;font-variant-numeric:tabular-nums;opacity:.75}
@media (hover:hover) and (pointer:fine){.lj-vit-fbar .chip:hover{border-color:var(--cor);color:var(--ink)}}
.lj-vit-fbar .chip.on{background:var(--cor);border-color:var(--cor);color:var(--on-cor)}
.lj-vit-fbar .chip.on .ico{opacity:1}

/* O ar entre o catálogo e a faixa escura morava no wrapper de colunas (morto 25/08):
   agora é do main — o banner de fecho nunca cola na galeria. */
.lj-vit-main{padding-bottom:64px}

/* ══ 6. PRODUTO EM DESTAQUE ══ */
.lj-vit-hero{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ph);margin-bottom:24px;border:1px solid var(--bord);display:block}
.lj-vit-hero .media{position:relative;height:400px}
.lj-vit-hero .media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity 500ms var(--lj-ease-io),transform 900ms var(--lj-ease-out)}
.lj-vit-hero .media img.on{opacity:1;transform:scale(1)}
@media (hover:hover) and (pointer:fine){.lj-vit-hero:hover .media img.on{transform:scale(1.035)}}
.lj-vit-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,26,38,.05) 30%,rgba(6,26,38,.55) 72%,rgba(6,26,38,.9) 100%)}
.lj-vit-hero .info{position:absolute;left:0;right:0;bottom:0;padding:24px 26px;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lj-vit-hero .badge{display:inline-block;background:var(--acento);color:color-mix(in srgb,var(--acento) 24%,#1a0e00);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.lj-vit-hero h2{font-family:var(--font-head);font-weight:var(--whead);font-size:33px;line-height:1.12;margin:11px 0 6px;color:#fff}
.lj-vit-hero .meta{font-size:13.5px;opacity:.9;display:flex;gap:14px;flex-wrap:wrap}
.lj-vit-hero .meta span{display:inline-flex;align-items:center;gap:6px}
.lj-vit-hero .right{text-align:right}
.lj-vit-hero .de{font-size:12px;opacity:.8}
.lj-vit-hero .pr{font-family:var(--font-head);font-size:30px;font-weight:var(--whead);line-height:1.1}
.lj-vit-hero .pr small{font-size:13px;opacity:.8;font-family:var(--font-body)}
.lj-vit-hero .cta{display:inline-block;margin-top:9px;background:var(--cor);color:var(--on-cor);font-weight:700;font-size:14px;padding:11px 19px;border-radius:11px;white-space:nowrap;transition:transform var(--lj-t-press) var(--lj-ease-out),filter var(--lj-t-press) var(--lj-ease-out)}
.lj-vit-hero:active .cta{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.lj-vit-hero:hover .cta{filter:brightness(1.07)}}
.lj-vit-dots{position:absolute;right:20px;top:20px;display:flex;gap:6px}
.lj-vit-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.45);cursor:pointer;transition:background var(--lj-t-micro) var(--lj-ease-out),width var(--lj-t-micro) var(--lj-ease-out)}
.lj-vit-dots button.on{background:#fff;width:22px}

/* ══ 7. GRADE ══ */
/* auto-FIT, não auto-fill: a coluna fantasma vazia deixava a fileira de 3 mais curta
   que o banner (dono 25/08) — com fit, as 3 pequenas somam o MESMO largo do grande. */
.lj-vit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:22px}
.lj-vit-card{background:var(--card);border:1px solid var(--bord);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 10px -6px rgba(17,34,51,.12);transition:transform var(--lj-t-micro) var(--lj-ease-out),box-shadow var(--lj-t-micro) var(--lj-ease-out),border-color var(--lj-t-micro) var(--lj-ease-out)}
@media (hover:hover) and (pointer:fine){.lj-vit-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px -16px rgba(17,34,51,.28);border-color:color-mix(in srgb,var(--cor) 45%,var(--bord))}}
.lj-vit-card .m{position:relative;height:190px;background:var(--ph);display:block;overflow:hidden}
.lj-vit-card .m img{width:100%;height:100%;object-fit:cover;transition:transform 450ms var(--lj-ease-out)}
@media (hover:hover) and (pointer:fine){.lj-vit-card:hover .m img{transform:scale(1.05)}}
.lj-vit-card .bdg{position:absolute;top:11px;left:11px;background:var(--acento);color:color-mix(in srgb,var(--acento) 24%,#1a0e00);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.lj-vit-card .tipo{position:absolute;top:11px;right:11px;background:rgba(6,26,38,.62);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.lj-vit-card .b{padding:15px 17px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.lj-vit-card h3{margin:0;font-family:var(--font-head);font-size:19px;font-weight:var(--whead);line-height:1.22}
.lj-vit-card h3 a{transition:color var(--lj-t-micro) var(--lj-ease-out)}
@media (hover:hover) and (pointer:fine){.lj-vit-card h3 a:hover{color:color-mix(in srgb,var(--cor) 78%,#000)}}
.lj-vit-card .sub{font-size:13px;color:var(--muted);margin-top:-4px}
.lj-vit-specs{display:flex;flex-wrap:wrap;gap:5px}
.lj-vit-spec{font-size:11.5px;color:var(--muted);background:var(--surf);border:1px solid var(--bord);padding:3px 9px;border-radius:6px;display:inline-flex;align-items:center;gap:5px}
.lj-vit-spec .ico{opacity:.65;flex:none}
/* Escassez REAL: sai de MotorReservas::vagasPorSalidas(), não é urgência inventada. */
.lj-vit-vagas{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,var(--cor) 7%,var(--card));color:color-mix(in srgb,var(--cor) 80%,#000)}
.lj-vit-vagas.baixa{background:color-mix(in srgb,var(--acento) 16%,var(--card));color:color-mix(in srgb,var(--acento) 42%,#1a0e00)}
/* QA 07/10: o ponto de vagas é SEMPRE a cor da marca. Com currentColor ele herdava a tinta do card
   suave (preto na landing e no destaque) e só a grade do catálogo o pintava de verde. */
.lj-vit-vagas .pulse{width:7px;height:7px;border-radius:999px;background:var(--cor);flex:none;animation:ljVpulse 1.7s var(--lj-ease-io) infinite}
@keyframes ljVpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}55%{box-shadow:0 0 0 5px transparent}}
/* Esquema de cobro da LOJA por passeio (mig. 068). Só do canal online. */
.lj-vit-pol{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink)}
.lj-vit-pol .ic{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;flex:none;font-size:11px;font-weight:800}
.lj-vit-pol.full .ic{background:color-mix(in srgb,var(--cor) 16%,var(--card));color:color-mix(in srgb,var(--cor) 80%,#000)}
.lj-vit-pol.split .ic{background:color-mix(in srgb,var(--acento) 24%,var(--card));color:color-mix(in srgb,var(--acento) 42%,#1a0e00)}
.lj-vit-pol.confianca .ic{background:var(--surf);color:var(--muted)}
/* D04 (auditoria 30/09): consulta e indisponível também têm linha própria (nunca "Reserve sem pagar" sem checkout). */
.lj-vit-pol.consulta .ic,.lj-vit-pol.indisponivel .ic,.lj-pol.consulta .ic,.lj-pol.indisponivel .ic{background:var(--surf);color:var(--muted)}
.lj-vit-pol.indisponivel,.lj-pol.indisponivel{color:var(--muted)}
.lj-vit-pol small{font-weight:400;color:var(--muted)}
.lj-vit-price{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--bord);flex-wrap:wrap;min-width:0}
.lj-vit-price>div{min-width:0}
.lj-vit-price .lj-vit-btn{flex:none}
.lj-vit-desde{display:block;font-size:11px;color:var(--muted)}
.lj-vit-preco{display:block;font-family:var(--font-head);font-size:23px;font-weight:var(--whead);color:var(--ink);line-height:1.1;white-space:nowrap}
.lj-vit-per{font-size:12px;color:var(--muted);font-family:var(--font-body);font-weight:400}
.lj-vit-cri{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.lj-vit-btn{background:var(--cor);color:var(--on-cor);font:inherit;font-weight:700;font-size:14px;padding:11px 19px;border-radius:11px;border:0;cursor:pointer;white-space:nowrap;text-align:center;transition:transform var(--lj-t-press) var(--lj-ease-out),filter var(--lj-t-press) var(--lj-ease-out)}
.lj-vit-btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.lj-vit-btn:hover{filter:brightness(1.07)}}
.lj-vit-vazio{color:var(--muted);padding:26px 4px;text-align:center;grid-column:1/-1}
.lj-vit-vazio a{color:var(--cor);text-decoration:underline}

/* ══ 7b. FECHO ══ o último passeio fecha o catálogo em banner largo (espelho do hero) */
.lj-vit-fim{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ph);margin-top:22px;border:1px solid var(--bord);display:block}
.lj-vit-fim .media{position:relative;height:300px;overflow:hidden}
.lj-vit-fim .media img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--lj-ease-out)}
@media (hover:hover) and (pointer:fine){.lj-vit-fim:hover .media img{transform:scale(1.04)}}
.lj-vit-fim .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,26,38,.05) 30%,rgba(6,26,38,.55) 72%,rgba(6,26,38,.9) 100%)}
.lj-vit-fim .info{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lj-vit-fim h2{font-family:var(--font-head);font-weight:var(--whead);font-size:29px;line-height:1.12;margin:0 0 5px;color:#fff}
.lj-vit-fim .sub{font-size:13.5px;opacity:.85;margin:0 0 7px;max-width:520px}
.lj-vit-fim .meta{font-size:13.5px;opacity:.9;display:flex;gap:14px;flex-wrap:wrap}
.lj-vit-fim .meta span{display:inline-flex;align-items:center;gap:6px}
.lj-vit-fim .right{text-align:right}
.lj-vit-fim .de{font-size:12px;opacity:.8}
.lj-vit-fim .pr{font-family:var(--font-head);font-size:27px;font-weight:var(--whead);line-height:1.1}
.lj-vit-fim .pr small{font-size:13px;opacity:.8;font-family:var(--font-body)}
.lj-vit-fim .cta{display:inline-block;margin-top:9px;background:var(--cor);color:var(--on-cor);font-weight:700;font-size:14px;padding:11px 19px;border-radius:11px;white-space:nowrap;transition:transform var(--lj-t-press) var(--lj-ease-out),filter var(--lj-t-press) var(--lj-ease-out)}
.lj-vit-fim:active .cta{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.lj-vit-fim:hover .cta{filter:brightness(1.07)}}

/* ══ 8. GALERIA DO PÉ — filmstrip infinito; clique abre o passeio ══ */
.lj-vit-gal{background:var(--ink);color:#fff;overflow:hidden}
.lj-vit-gal .galhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:34px 0 18px}
.lj-vit-gal h2{font-family:var(--font-head);font-weight:var(--whead);font-size:25px;margin:0;color:#fff}
.lj-vit-gal .sub2{font-size:13px;opacity:.7}
/* Mosaico ESTÁTICO (2026-08-25, dono: a marquee deixava buracos com catálogo pequeno).
   A grade reparte a fila inteira — 3, 4, 5 ou 6 fotos preenchem sempre, sem loop. */
.lj-vit-galgrid{display:grid;gap:14px;padding:0 0 38px;grid-template-columns:repeat(3,1fr)}
.lj-vit-galgrid.n4{grid-template-columns:repeat(4,1fr)}
.lj-vit-galgrid.n5{grid-template-columns:repeat(5,1fr)}
.lj-vit-galgrid.n6{grid-template-columns:repeat(6,1fr)}
.lj-vit-galit{position:relative;height:150px;border-radius:12px;overflow:hidden;display:block;background:#22384a;transition:transform var(--lj-t-micro) var(--lj-ease-out)}
.lj-vit-galit img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--lj-ease-out)}
.lj-vit-galit span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font:600 13px/1.25 var(--font-body);color:#fff;text-align:left;background:linear-gradient(180deg,transparent,rgba(6,26,38,.85))}
@media (hover:hover) and (pointer:fine){.lj-vit-galit:hover{transform:translateY(-4px)}.lj-vit-galit:hover img{transform:scale(1.06)}}
.lj-vit-galit:active{transform:scale(.97)}

/* ══ 9. RODAPÉ COM PESO ══ */
/* Pé com sangue (dono 25/08: "está pobre e feio") — fundo com o tom da marca, colunas em
   flex (uma coluna ausente não deixa buraco como na grade fixa) e links que respondem. */
.lj-vit-foot{background:color-mix(in srgb,var(--cor) 5%,var(--card));border-top:1px solid var(--bord)}
.lj-vit-foot .cols4{display:flex;flex-wrap:wrap;gap:40px 56px;padding:52px 0 36px}
.lj-vit-foot .cols4>div:first-child{flex:1.7;min-width:250px}
.lj-vit-foot .cols4>div{flex:1;min-width:160px}
.lj-vit-foot .tagline{font-size:13.5px;color:var(--ink);opacity:.82;line-height:1.6;margin:12px 0 10px;max-width:300px}
.lj-vit-foot h5{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cor);margin:0 0 14px;font-weight:800}
.lj-vit-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--muted)}
.lj-vit-foot ul a{transition:color var(--lj-t-micro) var(--lj-ease-out)}
@media (hover:hover) and (pointer:fine){.lj-vit-foot ul a:hover{color:var(--cor)}}
.lj-vit-foot .legal{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:14px}
.lj-vit-foot .legal b{color:var(--ink)}
.lj-vit-selos{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.lj-vit-selo{border:1px solid var(--bord);border-radius:8px;padding:7px 11px;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted);background:var(--surf)}
.lj-vit-foot .base{border-top:1px solid var(--bord);padding:16px 0;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

/* ══ 10. BARRA STICKY DE WHATSAPP (só celular) ══ */
.lj-vit-bar{position:sticky;bottom:0;z-index:25;border-top:1px solid var(--bord);background:var(--card);padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
.lj-vit-bar-btn{display:block;text-align:center;background:var(--cor);color:var(--on-cor);font-weight:700;font-size:15px;padding:13px 0;border-radius:12px;transition:transform var(--lj-t-press) var(--lj-ease-out)}
.lj-vit-bar-btn:active{transform:scale(.97)}

/* ══ 11. REVEAL ON SCROLL (com rede de segurança em JS) ══ */
.lj-vit-rv{opacity:0;transform:translateY(16px);transition:opacity 520ms var(--lj-ease-out),transform 520ms var(--lj-ease-out)}
.lj-vit-rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .lj-vit-wrap{padding:0 18px}
  .lj-vit-foot .cols4{gap:26px 32px;padding:36px 0 26px}
  .lj-vit-head{padding:22px 0 4px}
  .lj-vit-head h1{font-size:29px}
  /* a barra vira UMA linha deslizável (mesmo padrão dos chips de Meus bilhetes) */
  .lj-vit-fbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:14px 0 18px;
    mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .lj-vit-fbar::-webkit-scrollbar{display:none}
  /* Dono 31/08 (foto): "Destaques" pisava os chips — .chips com flex:1 encolhia e o conteúdo
     nowrap vazava POR CIMA do sort. Na linha deslizável ninguém encolhe: cada peça ocupa o seu
     largo real e a fila inteira rola como uma unidade (o sort fica no fim do deslize). */
  .lj-vit-fbar .chips{flex-wrap:nowrap;flex:none;min-width:max-content}
  .lj-vit-fbar .lj-vit-sort{flex:none}
  .lj-vit-fbar .lj-vit-count{display:none}
  .lj-vit-hero .media{height:260px}
  .lj-vit-hero h2{font-size:25px}
  .lj-vit-hero .info{padding:18px}
  .lj-vit-fim .media{height:230px}
  .lj-vit-fim h2{font-size:22px}
  .lj-vit-fim .info{padding:16px}
  .lj-vit-fim .sub{display:none}
  .lj-vit-galgrid,.lj-vit-galgrid.n4,.lj-vit-galgrid.n5,.lj-vit-galgrid.n6{grid-template-columns:repeat(2,1fr)}
  /* Tomy 27/08 (auditoria mobile): padding 24 herdado do desktop deixava o WhatsApp ~9px
     fora da tela no iPhone. TUR-8 (auditoria 27/08): o remendo de 14px descolava a topbar 4px
     da coluna de conteúdo (.lj-vit-wrap fica em 18px neste corte) — em tablet se nota. As duas
     réguas agora andam JUNTAS: 18px aqui, e no celular estreito as DUAS baixam a 14px. */
  .lj-top .lj-wrap{min-height:60px;height:auto;gap:9px;padding:10px 18px;flex-wrap:wrap}
  .lj-mr{padding:8px 12px;font-size:12.5px}
  .lj-vit-brand{white-space:normal;min-width:0;flex:1;font-size:17px;gap:9px}
  .lj-vit-brand small{font-size:9.5px;letter-spacing:.1em}
  .lj-wa{padding:8px 13px;font-size:13px}
  .lj-vit-clima .lj-vit-wrap{gap:16px;padding:12px 18px}
  .lj-vit-galit{height:124px}
}
@media (max-width:480px){
  /* iPhone: o CTA do WhatsApp precisa dos 4px de volta — mas o conteúdo baixa JUNTO. */
  .lj-top .lj-wrap{padding:10px 14px}
  .lj-vit-wrap{padding:0 14px}
  .lj-vit-clima .lj-vit-wrap{padding:12px 14px}
}
@media (min-width:901px){ .lj-vit-bar{display:none} }
@media (prefers-reduced-motion:reduce){
  .lj-vit-vagas .pulse{animation:none}
  .lj-vit-rv{opacity:1;transform:none;transition:none}
  .lj-vit-card .m img,.lj-vit-hero .media img,.lj-vit-fim .media img{transition:none}
}

/* ───────── Layout BOUTIQUE (lookbook numerado, responsive) ───────── */
.lj-bou-masthead{text-align:center;padding:20px 18px 0}
.lj-bou-masthead .name{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:4px;text-transform:uppercase}
.lj-bou-tabs{display:flex;justify-content:center;gap:24px;font-size:12.5px;color:var(--muted);margin-top:14px;border-bottom:1px solid var(--bord)}
.lj-bou-tabs span{padding-bottom:9px}
.lj-bou-tabs .lj-nav{margin:0;gap:24px}
.lj-bou-tabs .lj-nav-l{font-size:12.5px;padding-bottom:9px;border-bottom-width:2px}
.lj-bou-tabs .lj-nav-l.on{border-bottom-color:var(--acento)}
.lj-bou-tabs .on{color:var(--ink);font-weight:600;border-bottom:2px solid var(--acento)}
.lj-bou-intro{padding:22px 22px 4px}
.lj-bou-intro h1{font-family:var(--font-head);font-weight:var(--whead);font-size:24px;line-height:1.2;margin:0}
.lj-bou-intro p{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.lj-bou-item{padding:16px 22px 4px}
.lj-bou-media{display:block;background:var(--ph);border-radius:var(--radius);overflow:hidden;position:relative}
.lj-bou-media img{width:100%;height:100%;object-fit:cover;display:block}
.lj-bou-media.lg{height:250px}
.lj-bou-media.md{height:170px}
.lj-bou-media.sm{height:110px}
.lj-bou-item .head-row{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.lj-bou-item .idx{font-family:var(--font-head);font-size:20px;color:var(--acento)}
.lj-bou-item .title{font-family:var(--font-head);font-weight:var(--whead);font-size:19px;color:var(--ink)}
.lj-bou-item .meta-caps{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:4px}
.lj-bou-item .ldesc{display:none}
/* Escassez honesta no BOUTIQUE: caixa-alta fina, sem pulso — o lookbook não grita. */
.lj-bou-vagas{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.lj-bou-vagas.baixa{color:color-mix(in srgb,var(--acento) 45%,#1a0e00)}
.lj-bou-item .price-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.lj-bou-item .price{font-size:14.5px}
.lj-bou-item .price small{color:var(--muted);font-size:12px}
.lj-bou-item .btn-outline{border:1px solid var(--ink);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:9px 16px;border-radius:var(--radius)}
.lj-bou-hr{border-top:1px solid var(--bord);margin:18px 22px 0}
.lj-bou-hr:last-of-type{display:none}
.lj-bou-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px 22px 8px}
.lj-bou-pair .cel{display:block}
.lj-bou-pair .head-row{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.lj-bou-pair .idx{font-family:var(--font-head);font-size:15px;color:var(--acento)}
.lj-bou-pair .title{font-family:var(--font-head);font-weight:var(--whead);font-size:14.5px;line-height:1.2;color:var(--ink)}
.lj-bou-pair .meta{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.lj-bou-foot{text-align:center;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);padding:20px 18px 24px}
@media (min-width:760px){
  .lj-bou-masthead{padding:28px 40px 0}
  .lj-bou-masthead .name{font-size:14px;letter-spacing:5px}
  .lj-bou-tabs{gap:32px;font-size:13px;margin-top:16px}
  .lj-bou-intro{max-width:1040px;margin:0 auto;text-align:center;padding:44px 40px 8px}
  .lj-bou-intro h1{font-size:34px;line-height:1.18}
  .lj-bou-intro p{font-size:15px;margin-top:8px}
  .lj-bou-item{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;padding:28px 40px}
  .lj-bou-item.rev{grid-template-columns:1fr 1.4fr}
  .lj-bou-item.rev .lj-bou-media{order:2}
  .lj-bou-media.lg{height:380px}.lj-bou-media.md{height:300px}
  .lj-bou-item .head-row{display:block;margin-top:0}
  .lj-bou-item .idx{display:block;font-size:24px}
  .lj-bou-item .head-row .title{display:block;font-size:26px;margin-top:6px}
  .lj-bou-item .meta-caps{font-size:12px;margin-top:8px}
  .lj-bou-item .ldesc{display:block;font-size:14.5px;color:var(--muted);margin-top:12px}
  .lj-bou-item .price-row{justify-content:flex-start;gap:18px;margin-top:18px}
  .lj-bou-item .btn-outline{padding:10px 18px}
  .lj-bou-hr{max-width:960px;margin:18px auto 0}
  .lj-bou-pair{max-width:1040px;margin:0 auto;gap:36px;padding:28px 40px 12px}
  .lj-bou-pair .lj-bou-media.sm{height:220px}
  .lj-bou-pair .head-row{margin-top:12px}
  .lj-bou-pair .idx{font-size:17px}.lj-bou-pair .title{font-size:18px}.lj-bou-pair .meta{font-size:13px}
  .lj-bou-foot{border-top:1px solid var(--bord);margin-top:20px;padding:26px 18px 30px;font-size:10.5px}
}

/* ───────── Layout IMERSIVO (foto a sangre + overlay, fondo grafito; responsive) ───────── */
.lj-ime-top{display:flex;align-items:center;gap:10px;padding:16px 18px}
.lj-ime-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:var(--whead);font-size:17px;color:var(--ink)}
.lj-ime-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--cor)}
.lj-ime-sp{flex:1}
.lj-ime-navd{display:none}
.lj-ime-hero{position:relative;height:400px;margin:0 14px;border-radius:var(--radius);overflow:hidden;background:var(--ph)}
.lj-ime-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lj-ime-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,25,29,0) 32%,rgba(23,25,29,.55) 62%,rgba(23,25,29,.94) 100%)}
.lj-ime-hero .info{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#f1f2f4;display:block}
.lj-ime-hero .badge{display:inline-block;background:var(--cor);color:var(--on-cor);font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.lj-ime-hero .h-title{font-family:var(--font-head);font-weight:var(--whead);font-size:24px;line-height:1.15;margin-top:9px}
.lj-ime-hero .h-meta{font-size:13px;margin-top:5px;opacity:.85}
.lj-ime-hero .h-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:11px}
.lj-ime-hero .h-desde{display:block;font-size:11px;opacity:.75}
.lj-ime-hero .h-preco{font-size:24px;font-weight:800;color:var(--cor)}
.lj-ime-hero .h-per{font-size:12px;opacity:.75}
.lj-ime-hero .go{width:46px;height:46px;border-radius:50%;background:var(--cor);color:var(--on-cor);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;flex:none}
.lj-ime-hero .cta-hero{display:none}
.lj-ime-label{padding:16px 18px 2px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.6px;text-transform:uppercase}
.lj-ime-pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:9px 18px 4px}
.lj-ime-pills::-webkit-scrollbar{display:none}
.lj-ime-pill{flex:none;background:var(--surf);border:1px solid var(--bord);color:var(--ink);font-size:13px;padding:8px 14px;border-radius:999px;white-space:nowrap}
.lj-ime-pill b{color:var(--cor)}
.lj-ime-pill.on{background:var(--cor);border-color:var(--cor);color:var(--on-cor);font-weight:700}
.lj-ime-pill.on b{color:var(--on-cor)}
.lj-ime-pill.off{opacity:.45}
.lj-ime-stack{display:flex;flex-direction:column;gap:12px;padding:12px 14px 10px}
.lj-ime-ov{display:block;position:relative;height:170px;border-radius:20px;overflow:hidden;background:var(--ph)}
.lj-ime-ov>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lj-ime-ov .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,25,29,.05) 35%,rgba(23,25,29,.82) 100%)}
.lj-ime-ov .info{position:absolute;left:0;right:0;bottom:0;padding:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;color:#f1f2f4}
.lj-ime-ov .t{font-family:var(--font-head);font-weight:var(--whead);font-size:17px;display:block}
.lj-ime-ov .m{font-size:12px;opacity:.8;margin-top:2px;display:block}
.lj-ime-ov .price-pill{background:rgba(241,242,244,.14);border:1px solid rgba(241,242,244,.28);color:#f1f2f4;font-weight:700;font-size:13px;padding:7px 12px;border-radius:999px;white-space:nowrap}
.lj-ime-ctabar{position:sticky;bottom:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bord);background:rgba(23,25,29,.92);backdrop-filter:blur(6px)}
.lj-ime-ctabar .cta{display:block;width:100%;background:var(--cor);color:var(--on-cor);text-align:center;font-weight:800;font-size:15px;padding:14px 0;border-radius:14px}
.lj-ime-foot{display:none}
@media (min-width:760px){
  .lj-ime-top{padding:18px 28px}
  .lj-ime-brand{font-size:18px}
  .lj-ime-navd{display:flex;align-items:center;gap:18px;font-size:14px;color:var(--muted)}
  .lj-ime-navd .wa{background:var(--cor);color:var(--on-cor);font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:999px}
  .lj-ime-hero{height:520px;margin:2px 24px 0;border-radius:26px}
  .lj-ime-hero .info{padding:28px}
  .lj-ime-hero .badge{font-size:11px;padding:5px 11px}
  .lj-ime-hero .h-title{font-size:42px;line-height:1.08;margin-top:12px;max-width:620px}
  .lj-ime-hero .h-meta{font-size:15px;margin-top:8px}
  .lj-ime-hero .h-row{margin-top:16px}
  .lj-ime-hero .h-preco{font-size:34px}
  .lj-ime-hero .go{display:none}
  .lj-ime-hero .cta-hero{display:inline-block;background:var(--cor);color:var(--on-cor);font-weight:800;font-size:16px;padding:15px 26px;border-radius:14px}
  .lj-ime-label{padding:20px 28px 2px}
  .lj-ime-pills{padding:9px 28px 4px;flex-wrap:wrap;overflow:visible}
  .lj-ime-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 24px 8px}
  .lj-ime-ov{height:240px;border-radius:22px}
  .lj-ime-ctabar{display:none}
  .lj-ime-foot{display:block;border-top:1px solid var(--bord);margin-top:16px}
  .lj-ime-foot .in{max-width:1240px;margin:0 auto;padding:18px 28px;color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
  .lj-ime-foot .in a{color:var(--muted)}
}

/* ───────── Layout CARROSSEL (portal de plataforma; responsive) ───────── */
.lj-car-hd{color:var(--ink);padding-bottom:12px} /* dono 09/10: sem faixa própria — a topbar é a da loja toda */
.lj-car-hd .hd-top{display:flex;align-items:center;gap:10px;padding:16px 18px 0}
.lj-car-hd .brand{font-family:var(--font-head);font-weight:var(--whead);font-size:18px;color:var(--on-cor)}
.lj-car-hd .spacer{flex:1}
.lj-car-hd .mb-d{color:var(--on-cor);font-size:13.5px;opacity:.92;font-weight:600}
.lj-car-hd .hd-title{font-family:var(--font-head);font-weight:var(--whead);font-size:25px;line-height:1.15;padding:14px 18px 0}
.lj-car-hd .hd-search{margin:14px 18px 0;background:var(--card);border:1px solid var(--bord);color:var(--ink);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:9px;font-size:14px}
.lj-car-hd .hd-search input{flex:1;border:none;background:transparent;color:var(--ink);font-size:16px;font-family:inherit;min-width:0;outline:none}
.lj-car-cats{display:flex;gap:16px;padding:16px 18px 0;overflow-x:auto;scrollbar-width:none}
.lj-car-cats::-webkit-scrollbar{display:none}
.lj-car-cats .cat{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink)}
.lj-car-cats .cat .c{width:56px;height:56px;border-radius:50%;background:var(--surf);border:2px solid var(--bord)}
.lj-car-sec{display:flex;justify-content:space-between;align-items:baseline;padding:18px 18px 8px}
.lj-car-sec .t{font-family:var(--font-head);font-weight:var(--whead);font-size:17px}
.lj-car-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 18px 6px;scroll-snap-type:x mandatory;scroll-padding-inline:18px} /* sem o scroll-padding o ímã colava o 1º cartão na borda */
.lj-car-rail::-webkit-scrollbar{display:none}
/* O cartão da tira é o card_passeio na densidade compacta (09/10) — aqui só a largura e o ímã do scroll. */
.lj-car-rail>.lj-vit-card{flex:none;width:min(264px,78vw);scroll-snap-align:start}
.lj-car-trust{margin:14px 18px 4px;background:var(--surf);border-radius:var(--radius);padding:13px 15px;display:flex;flex-direction:column;gap:8px;font-size:13px;box-sizing:border-box;max-width:calc(100% - 36px)} /* 375px: a faixa saía 18px pela direita (o body em coluna a esticava a 100% + margem) */
.lj-car-trust span{display:flex;align-items:center;gap:9px}
.lj-car-trust svg{color:var(--cor);flex:none}
.lj-car-tabbar{position:sticky;bottom:0;display:flex;justify-content:space-around;border-top:1px solid var(--bord);background:var(--card);padding:10px 6px calc(10px + env(safe-area-inset-bottom));margin-top:12px}
.lj-car-tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--muted)}
.lj-car-tabbar .tab.on{color:var(--cor)}
.lj-car-foot{display:none}
@media (min-width:760px){
  /* Dono 09/10: «todo tirado a la izquierda, a la mancha ancha». No computador o conteúdo mora numa coluna
     centrada de 1240px (a mesma do rodapé): o fundo do cabeçalho segue de ponta a ponta, o resto não. */
  .lj-car-hd,.lj-car-sec,.lj-car-rail,.lj-car-trust{--car-gut:max(28px,calc((100% - 1240px) / 2 + 28px))}
  .lj-car-hd{padding-bottom:14px}
  .lj-car-hd .hd-top{padding:22px var(--car-gut) 0}
  .lj-car-hd .brand{font-size:20px}
  .lj-car-hd .hd-title{font-size:38px;line-height:1.12;padding:18px var(--car-gut) 0}
  .lj-car-hd .hd-search{margin:16px 0 0 var(--car-gut);max-width:560px;font-size:15px;padding:13px 16px}
  .lj-car-cats{gap:26px;padding:22px var(--car-gut) 0;overflow:visible;flex-wrap:wrap}
  .lj-car-cats .cat{font-size:12px;gap:7px}
  .lj-car-cats .cat .c{width:68px;height:68px}
  .lj-car-sec{padding:24px var(--car-gut) 10px}
  .lj-car-sec .t{font-size:20px}
  /* No computador a tira vira grade: todos à vista, em ordem, sem cartão cortado na borda direita. */
  .lj-car-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--shop-gap,18px);overflow:visible;padding:2px var(--car-gut) 10px;scroll-snap-type:none}
  .lj-car-rail>.lj-vit-card{width:auto}
  .lj-car-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:none;margin:0;max-width:none;padding:18px var(--car-gut) 8px;font-size:13.5px}
  .lj-car-trust span{background:var(--surf);border-radius:14px;padding:13px 15px;gap:10px}
  .lj-car-tabbar{display:none}
  .lj-car-foot{display:block;border-top:1px solid var(--bord);background:var(--card);margin-top:16px}
  .lj-car-foot .in{max-width:1240px;margin:0 auto;padding:18px 28px;color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
  .lj-car-foot .in a{color:var(--muted)}
  .lj-car-foot .spacer{flex:1}
}

/* LOJA-CC — bloco "Como chegar" (embarque + loja física, com mapa Leaflet) */
.lj-cc { margin: 22px 0; }
.lj-cc > h3 { font-size: 18px; margin: 0 0 12px; }
.lj-cc-blk { margin-bottom: 14px; }
.lj-cc-h { font-weight: 700; margin-bottom: 4px; }
.lj-cc-end { font-weight: 600; margin: 0 0 4px; }
.lj-cc p { margin: 0 0 6px; line-height: 1.55; }
.lj-cc-fotos { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.lj-cc-fotos img { width: 160px; height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid var(--lj-border, #0002); }
.lj-cc-map { height: 300px; width: 100%; border-radius: 12px; overflow: hidden; margin: 12px 0; border: 1px solid var(--lj-border, #0002); }
.lj-cc-map .leaflet-container { font: inherit; }
.lj-cc-media { display: inline-block; margin-top: 6px; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LANDING · BLOG · NOTA da loja — sistema EDITORIAL (dono 10/09, terceira passada:
   "sigue muy feo; estilo más editorial, un texto bien grande editable, layout más moderno,
   el blog primero").

   O que mudou em relação às duas passadas anteriores:
     · saiu a tarjeta branca que montava sobre um hero de foto (fazia tudo parecer um documento
       colado em cima de um banner) e saiu o texto por cima de foto como abertura;
     · entrou hierarquia tipográfica: título gigante, coluna de leitura de 64ch centrada, e
       cabeçalhos de seção numerados em mono — a página lê-se como o sumário de uma revista;
     · o ritmo vertical é UM só (--sec-y) e as seções separam-se por regra fina de --bord.

   Zero cor dura fora do painel de fecho (que precisa de um escuro garantido nas 9 paletas e o
   resolve com color-mix sobre --cor): tudo sai dos tokens do tema, para as nove paletas
   pintarem estas três páginas sem tocar no markup. Sem JS (a loja roda com CSP por nonce).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Mono utilitário: números de seção, datas e carimbos. É o que dá o "ar de redação" — e é a
   única família que NÃO vem do tema, de propósito (uma mono do sistema nunca falha e não pede
   rede). Definido uma vez e reusado em landing, blog, nota e rodapé. */
.lj-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}

/* ───────── Chassi comum das três páginas ───────── */
.lj-pg{
  display:block;
  /* clip e não hidden: o breakout das fotos não pode virar barra horizontal em 375px, mas
     tampouco queremos matar o sticky da barra do celular (hidden criaria scroll container). */
  overflow-x:clip;
  --sec-y:96px;   /* respiro vertical de cada seção (o ritmo da revista) */
  --pg-out:64px;  /* quanto uma foto/destaque sai da coluna de leitura, para cada lado */
}
/* Fundo limpo: o editorial vive de branco (ou do preto do tema), não de tintura. */
body:has(.lj-pg){background:var(--bg)}
.lj-ld-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* Regra fina entre seções: é o separador, não uma faixa de fundo colorida. */
.lj-ld-sec{padding:var(--sec-y) 0;border-top:1px solid var(--bord)}

/* ───────── Cabeçalho de seção (_shared/secao_head.php) ─────────
   Número + kicker à esquerda, título serif embaixo, saída à direita na mesma linha de base. */
.lj-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,48px)}
.lj-sh-l{min-width:0}
.lj-sh-k{margin:0 0 14px;display:flex;align-items:center;gap:12px;color:var(--muted)}
.lj-sh-k .n{color:var(--cor);font-weight:700}
.lj-sh-t{font-family:var(--font-head);font-weight:var(--whead);font-size:clamp(28px,4.2vw,52px);line-height:1.02;letter-spacing:-.025em;margin:0;color:var(--ink);text-wrap:balance;max-width:20ch;overflow-wrap:break-word}
.lj-sh-a{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;padding-bottom:5px;border-bottom:1px solid var(--bord);transition:color .16s,border-color .16s}
.lj-sh-a:hover{color:var(--cor);border-bottom-color:var(--cor)}
.lj-sh-a span{display:inline-block;transition:transform .16s}
.lj-sh-a:hover span{transform:translateX(3px)}

/* ───────── HERO da landing: TIPOGRÁFICO, 7/5 ─────────
   A foto de capa de uma agência raramente aguenta um H1 por cima (é foto de celular do
   operador). Aqui o título manda e a foto acompanha, em retrato, com um selo de origem. */
.lj-ld-hero{padding:clamp(44px,7vw,104px) 0 clamp(44px,6vw,92px)}
.lj-ld-hero-in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,72px);align-items:center}
.lj-ld-hero.solo .lj-ld-hero-in{grid-template-columns:1fr} /* sem capa: só texto, largura toda */
.lj-ld-hero-txt{min-width:0}
.lj-ld-kick{margin:0 0 22px;display:flex;align-items:center;gap:14px;color:var(--cor);letter-spacing:.18em}
.lj-ld-kick .ln{display:block;flex:none;width:46px;height:1px;background:var(--cor)}
.lj-ld-hero h1{font-family:var(--font-head);font-weight:var(--whead);font-size:clamp(44px,8.5vw,116px);line-height:.95;letter-spacing:-.03em;margin:0;color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
.lj-ld-sub{margin:26px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--muted);max-width:44ch}
.lj-ld-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,38px)}
.lj-ld-hero-m{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--ph)}
.lj-ld-hero-m img,.lj-ld-hero-m iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
/* Selo: carimbo de quem opera e de onde. Mono pequeno sobre vidro — não compete com o título. */
.lj-ld-selo{position:absolute;left:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 32px);padding:10px 18px;border-radius:999px;background:color-mix(in srgb,var(--card) 86%,transparent);border:1px solid color-mix(in srgb,var(--bord) 60%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);font-size:11px;line-height:1.2;overflow:hidden}
.lj-ld-selo strong{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lj-ld-selo>span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ───────── Botões ─────────
   Pill cheio = a ação que leva à reserva. .fantasma = secundário (contorno). .claro = o primário
   dentro do painel escuro de fecho, onde o pill da cor do tema desapareceria. */
.lj-ld-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--cor);color:var(--on-cor);font-weight:700;font-size:16px;line-height:1.2;padding:17px 34px;border-radius:999px;border:1px solid transparent;box-shadow:0 10px 30px color-mix(in srgb,var(--cor) 30%,transparent);transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s}
.lj-ld-btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px color-mix(in srgb,var(--cor) 42%,transparent)}
.lj-ld-btn.fantasma{background:transparent;color:var(--ink);border-color:var(--bord);box-shadow:none}
.lj-ld-btn.fantasma:hover{border-color:var(--cor);color:var(--cor);transform:none}
.lj-ld-btn.claro{background:#fff;color:#101418;box-shadow:none}

/* ───────── Coluna de LEITURA (blocos da landing e da nota) ─────────
   64ch centrada: a medida de linha de uma revista. Centrada e não à esquerda porque é o que
   permite às fotos e ao destaque saírem para os DOIS lados sem furar a margem da página. */
.lj-pg-lido{max-width:64ch;margin:0 auto;color:var(--ink);font-size:19px;line-height:1.72}
.lj-pg-texto p{margin:0 0 22px}
.lj-pg-texto p:last-child{margin-bottom:0}
.lj-pg-texto strong{font-weight:700}
/* Lead: o primeiro parágrafo decide se o turista segue lendo. */
.lj-pg-texto.lead{font-size:22px;line-height:1.55;color:var(--ink)}
.lj-pg-h2{font-family:var(--font-head);font-weight:var(--whead);font-size:clamp(24px,3.2vw,34px);line-height:1.14;letter-spacing:-.02em;margin:52px 0 16px;color:var(--ink);text-wrap:balance}
.lj-pg-h2:first-child{margin-top:0}

/* ══ DESTAQUE: o "texto bem grande editável" que o dono pediu ══
   Uma frase só, serif enorme, entre duas regras finas e a sangre da coluna. É a pausa da
   página — o que fica na cabeça de quem só lê uma coisa. */
.lj-pg-dest{width:calc(100% + var(--pg-out) * 2);margin:clamp(40px,5vw,64px) 0 clamp(40px,5vw,64px) calc(var(--pg-out) * -1);padding:clamp(26px,3.5vw,42px) 0;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.lj-pg-dest .asp{display:block;font-family:var(--font-head);font-size:clamp(46px,7vw,84px);line-height:.55;color:var(--cor);opacity:.42;margin-bottom:12px;user-select:none}
.lj-pg-dest p{margin:0;font-family:var(--font-head);font-weight:var(--whead);font-size:clamp(30px,5vw,64px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;overflow-wrap:break-word}

/* ══ Fotos e vídeo em BREAKOUT: saem da coluna de leitura para os dois lados ══ */
.lj-pg-fig{width:calc(100% + var(--pg-out) * 2);margin:clamp(36px,4.5vw,56px) 0 clamp(36px,4.5vw,56px) calc(var(--pg-out) * -1)}
.lj-pg-fig img{display:block;width:100%;max-width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:20px;background:var(--ph)}
.lj-pg-fig figcaption{margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.lj-pg-video{position:relative;width:calc(100% + var(--pg-out) * 2);margin:clamp(36px,4.5vw,56px) 0 clamp(36px,4.5vw,56px) calc(var(--pg-out) * -1);aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--ph)}
.lj-pg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Separador: três pontos, não um risco — respira sem cortar a leitura em dois. */
.lj-pg-sep{margin:clamp(32px,4vw,48px) 0;text-align:center;font-size:15px;letter-spacing:.45em;color:var(--muted);opacity:.7;user-select:none}

/* ══ CTA de WhatsApp dentro do texto: painel discreto, alinhado à coluna ══ */
.lj-pg-cta{margin:clamp(32px,4vw,48px) 0;padding:26px 24px;border-radius:20px;background:var(--surf);border:1px solid var(--bord);text-align:center}
.lj-pg-cta-t{font-family:var(--font-head);font-weight:var(--whead);font-size:21px;line-height:1.25;margin:0 0 16px;color:var(--ink)}
.lj-pg-cta-b{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;background:var(--cor);color:var(--on-cor);font-weight:700;font-size:16px;line-height:1.25;padding:15px 30px;border-radius:999px;transition:transform .18s,box-shadow .18s}
.lj-pg-cta-b span{word-break:break-word}
.lj-pg-cta-b:hover{transform:translateY(-1px);box-shadow:0 12px 30px color-mix(in srgb,var(--cor) 38%,transparent)}
.lj-pg-wa-ico{flex:none;display:block}
.lj-pg-cta small{display:block;margin-top:12px;font-size:13px;color:var(--muted)}

/* ───────── Seção Passeios da landing ─────────
   As MESMAS tarjetas do catálogo (.lj-vit-card), só herdando o radio editorial. */
.lj-ld-grid .lj-vit-card{border-radius:var(--shop-radius,20px)}
@media(min-width:900px){.lj-ld-grid{grid-template-columns:repeat(3,1fr)}} /* com 4, o quinto passeio ficava órfão */

/* ───────── FECHO "Reserve seu passeio" (_shared/cta_reserva.php) ─────────
   Painel escuro com cantos e margem lateral: de borda a borda parece rodapé e deixa de ser lido.
   O escuro sai de color-mix sobre --cor (e não de --ink) porque nas paletas escuras --ink é
   quase branco — assim o painel é escuro e tingido do tema nas NOVE paletas. */
.lj-ld-cta{padding:0 24px var(--sec-y)}
.lj-ld-cta-in{max-width:1152px;margin:0 auto;padding:clamp(44px,6vw,84px) clamp(24px,4vw,64px);border-radius:var(--shop-radius,28px);background:color-mix(in srgb,var(--cor) 88%,#000);color:#fff;text-align:center}
.lj-ld-cta-k{margin:0 0 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.lj-ld-cta h2{font-family:var(--font-head);font-weight:var(--whead);font-size:clamp(32px,5.4vw,64px);line-height:1;letter-spacing:-.03em;margin:0;color:#fff;text-wrap:balance}
.lj-ld-cta-s{max-width:46ch;margin:20px auto 0;font-size:17px;line-height:1.55;color:rgba(255,255,255,.8)}
.lj-ld-cta-bts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:clamp(26px,3vw,36px)}
.lj-ld-cta .lj-ld-btn.fantasma{color:#fff;border-color:rgba(255,255,255,.4)}
.lj-ld-cta .lj-ld-btn.fantasma:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* ───────── BLOG ─────────
   Hierarquia antes de grade: com todas as notas do mesmo tamanho ninguém sabe o que ler
   primeiro. A mais nova manda (destaque/capa), o resto acompanha. */
/* Placeholder sem foto: gradiente do tema. NÃO o barquinho do catálogo — uma nota não é um
   passeio, e o barco repetido em toda a grade lê como imagem que faltou. */
.lj-bl-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--cor) 30%,var(--surf)) 0%,color-mix(in srgb,var(--cor) 10%,var(--surf)) 52%,var(--surf) 100%)}
.lj-bl-card h3 a{color:inherit;transition:color .16s}
.lj-bl-card h3 a:hover{color:var(--cor)}
.lj-bl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;color:var(--muted);font-weight:600}
.lj-bl-meta .dot{opacity:.5}
.lj-bl-meta time{font-variant-numeric:tabular-nums}
.lj-bl-kick{color:var(--cor)}
.lj-bl-sub{color:var(--muted)}

/* ══ Grade assimétrica da landing: destacada + fila compacta ══ */
.lj-bl-mix{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.lj-bl-mix.una{grid-template-columns:1fr} /* com uma nota só, a coluna vazia pareceria erro */
.lj-bl-dest .m{display:block;position:relative;aspect-ratio:16/10;border-radius:var(--shop-radius,20px);overflow:hidden;background:var(--ph)}
.lj-bl-dest .m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms var(--lj-ease-out)}
@media (hover:hover) and (pointer:fine){.lj-bl-dest:hover .m img{transform:scale(1.04)}}
.lj-bl-dest .b{padding-top:20px}
.lj-bl-dest h3{margin:10px 0 0;font-family:var(--font-head);font-weight:var(--whead);font-size:clamp(28px,3.4vw,44px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
.lj-bl-dest .lj-bl-sub{margin:14px 0 0;font-size:16.5px;line-height:1.55}
.lj-bl-dest .lj-bl-meta{margin:16px 0 0}
.lj-bl-fila{display:flex;flex-direction:column}
.lj-bl-comp{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--bord)}
.lj-bl-fila>.lj-bl-comp:first-child{border-top:0;padding-top:0}
.lj-bl-comp .m{display:block;width:96px;height:96px;border-radius:14px;overflow:hidden;background:var(--ph)}
.lj-bl-comp .m img{width:100%;height:100%;object-fit:cover;display:block}
.lj-bl-comp h3{margin:0;font-family:var(--font-head);font-weight:var(--whead);font-size:18px;line-height:1.25;text-wrap:balance}
.lj-bl-comp .lj-bl-meta{margin:8px 0 0}

/* ══ Capa do listado: a nota mais nova, foto larga e título por cima ══ */
.lj-bl-capa{position:relative;display:block;border-radius:var(--shop-radius,24px);overflow:hidden;background:var(--ph);margin-bottom:clamp(30px,4vw,52px)}
.lj-bl-capa>a{display:block;position:relative;color:#fff}
.lj-bl-capa .m{display:block;aspect-ratio:21/9}
.lj-bl-capa .m img,.lj-bl-capa .m .lj-bl-ph{width:100%;height:100%;object-fit:cover;display:block;transition:transform 600ms var(--lj-ease-out)}
@media (hover:hover) and (pointer:fine){.lj-bl-capa:hover .m img{transform:scale(1.03)}}
.lj-bl-capa .veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,18,0) 28%,rgba(4,10,18,.84) 100%)}
.lj-bl-capa .b{position:absolute;left:0;right:0;bottom:0;display:block;padding:clamp(22px,3vw,44px);max-width:46ch}
.lj-bl-capa .lj-bl-kick{display:block;margin-bottom:12px;color:rgba(255,255,255,.78)}
.lj-bl-capa .t{display:block;font-family:var(--font-head);font-weight:var(--whead);font-size:clamp(26px,3.8vw,52px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
.lj-bl-capa .s{display:block;margin-top:12px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.86)}
.lj-bl-capa .lj-bl-meta{display:flex;margin-top:14px;color:rgba(255,255,255,.78)}

/* ══ O resto do listado: duas colunas com regras finas ══ */
.lj-bl-topo .lj-bl-intro{max-width:56ch;margin:-14px 0 clamp(28px,3.5vw,44px);font-size:17px;line-height:1.55;color:var(--muted)}
.lj-bl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,56px)}
.lj-bl-item{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;padding:26px 0;border-top:1px solid var(--bord)}
.lj-bl-item .m{display:block;width:120px;aspect-ratio:4/3;border-radius:var(--shop-radius,12px);overflow:hidden;background:var(--ph)}
.lj-bl-item .m img{width:100%;height:100%;object-fit:cover;display:block}
.lj-bl-item h3{margin:9px 0 0;font-family:var(--font-head);font-weight:var(--whead);font-size:21px;line-height:1.2;text-wrap:balance;overflow-wrap:break-word}
.lj-bl-item .lj-bl-sub{margin:9px 0 0;font-size:14.5px;line-height:1.5}
.lj-bl-mais{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cor)}
.lj-bl-mais span{display:inline-block;transition:transform .16s}
.lj-bl-mais:hover span{transform:translateX(3px)}

/* ───────── NOTA do blog ─────────
   Cabeça tipográfica (não foto com texto por cima) e só depois a capa, larga e com cantos. */
.lj-nt-cab{padding:clamp(40px,6vw,88px) 0 clamp(22px,3vw,34px)}
.lj-nt-kick{margin:0 0 22px;color:var(--cor);letter-spacing:.18em}
.lj-nt-kick a{color:inherit}
.lj-nt-kick a:hover{opacity:.75}
.lj-nt-cab h1{font-family:var(--font-head);font-weight:var(--whead);font-size:clamp(36px,6vw,84px);line-height:.98;letter-spacing:-.03em;margin:0;color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
.lj-nt-sub{margin:22px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--muted)}
.lj-nt-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:24px 0 0;color:var(--muted);font-weight:600}
.lj-nt-meta .dot{opacity:.5}
.lj-nt-meta time{font-variant-numeric:tabular-nums}
.lj-nt-capa{position:relative;max-width:1200px;margin:clamp(18px,2.5vw,30px) auto 0;aspect-ratio:21/9;border-radius:24px;overflow:hidden;background:var(--ph)}
.lj-nt-capa.video{aspect-ratio:16/9}
.lj-nt-capa img,.lj-nt-capa iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.lj-nt-corpo{padding:clamp(38px,5vw,64px) 24px clamp(40px,5vw,72px)}
.lj-nt-volta{margin:clamp(40px,5vw,60px) 0 0;padding-top:24px;border-top:1px solid var(--bord);font-size:14px;font-weight:600}
.lj-nt-volta a{color:var(--muted)}
.lj-nt-volta a:hover{color:var(--cor)}

/* ───────── Barra fixa do celular (≤760px) — mesma ideia da ficha (.lj-det-bar) ───────── */
.lj-pg-bar{position:sticky;bottom:0;z-index:25;border-top:1px solid var(--bord);background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
.lj-pg-bar-btn{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--cor);color:var(--on-cor);font-weight:700;font-size:15px;padding:14px 0;border-radius:14px}
.lj-pg-bar-btn:active{transform:scale(.97)}
@media (min-width:761px){.lj-pg-bar{display:none}}

/* ───────── Cortes ─────────
   Regra: nada de largura fixa maior que 100%, e em 375px a página não desborda (o breakout
   zera). O que muda é o ritmo (--sec-y) e o quanto as fotos saem da coluna (--pg-out). */
@media (max-width:1000px){
  .lj-pg{--pg-out:32px}
  .lj-ld-hero-in{grid-template-columns:1fr;gap:32px}
  /* Celular/tablet: a foto vai DEBAIXO do título e em 4/3 (o retrato 4/5 ocuparia a tela toda). */
  .lj-ld-hero-m{aspect-ratio:4/3;border-radius:24px}
  .lj-bl-mix{grid-template-columns:1fr}
}
@media (max-width:760px){
  .lj-pg{--sec-y:56px;--pg-out:0px}
  .lj-ld-wrap{padding:0 18px}
  .lj-ld-cta{padding:0 18px var(--sec-y)}
  .lj-ld-cta-in{border-radius:var(--shop-radius,22px)}
  .lj-nt-corpo{padding-left:18px;padding-right:18px}
  .lj-ld-hero{padding-top:36px}
  .lj-ld-hero-cta{gap:10px}
  .lj-ld-hero-cta .lj-ld-btn{flex:1 1 100%}
  .lj-ld-cta-bts{flex-direction:column;gap:12px}
  .lj-ld-cta-bts .lj-ld-btn{width:100%}
  .lj-pg-lido{font-size:17px}
  .lj-pg-texto.lead{font-size:19px}
  .lj-pg-fig img,.lj-pg-video,.lj-nt-capa{border-radius:16px}
  /* 21/9 num celular é uma faixa: a capa passa a 4/3 e volta a ser uma foto. */
  .lj-bl-capa .m,.lj-nt-capa{aspect-ratio:4/3}
  .lj-bl-capa{border-radius:var(--shop-radius,18px)}
  .lj-bl-grid{grid-template-columns:1fr}
  .lj-bl-item{grid-template-columns:96px 1fr;gap:14px;padding:20px 0}
  .lj-bl-item .m{width:96px}
  .lj-ld-grid{grid-template-columns:1fr} /* o mínimo de 268px da grade da vitrine sobra em 375px */
}
@media (max-width:480px){
  .lj-ld-wrap{padding:0 16px}
  .lj-ld-cta{padding-left:16px;padding-right:16px}
  .lj-nt-corpo{padding-left:16px;padding-right:16px}
  .lj-ld-cta-in{padding-left:20px;padding-right:20px}
  .lj-bl-comp{grid-template-columns:72px 1fr;gap:13px}
  .lj-bl-comp .m{width:72px;height:72px;border-radius:11px}
}
/* Quem pediu menos movimento não recebe zoom de foto nem deslocamento de seta. */
@media (prefers-reduced-motion:reduce){
  .lj-bl-dest .m img,.lj-bl-capa .m img,.lj-ld-btn,.lj-sh-a span,.lj-bl-mais span{transition:none}
  .lj-ld-btn:hover{transform:none}
}

/* ───────── Nav da topbar compartilhada: aire editorial ─────────
   Escopado a .lj-top de propósito: os headers próprios do imersivo/carrossel/boutique têm as
   suas próprias regras para .lj-nav-l e não queremos mudá-los aqui.
   Maiúsculas pequenas + ponto da cor do tema no item ativo (em vez do sublinhado). */
.lj-top .lj-nav{gap:26px}
.lj-top .lj-nav-l{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:0;padding:4px 0}
.lj-top .lj-nav-l.on::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cor)}
/* Duas linhas no celular: marca/reserva, depois seções/contato. A altura acompanha
   nomes longos e o seletor de idiomas sem sobrepor o conteúdo. */
/* Ficha 07/10: o cabeçalho é FIXO — cada linha dele é foto e preço que o turista deixa de ver.
   Duas linhas, não três: a sigla do idioma sobe para a linha da marca (≤760, o mesmo corte da
   grade; entre 601 e 760 a terceira linha também existia). Alvo medido: ≤100 px a 375. */
.lj-lang-m{display:none;position:relative}
@media(max-width:760px){
  .lj-top .lj-wrap:has(>.lj-nav){display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:2px 6px;padding-top:8px;padding-bottom:8px}
  .lj-top .lj-wrap:has(>.lj-nav)>.lj-brand{grid-area:1/1;font-size:17px;min-width:0;gap:8px}
  .lj-top .lj-wrap:has(>.lj-nav)>.lj-brand>span:last-child{min-width:0;overflow-wrap:anywhere}
  .lj-top .lj-wrap:has(>.lj-nav)>.lj-lang-m{grid-area:1/2}
  .lj-top .lj-wrap:has(>.lj-nav)>.lj-mr{grid-area:1/3}
  .lj-top .lj-wrap:has(>.lj-nav)>.lj-spacer{display:none}
  .lj-top .lj-wrap:has(>.lj-nav)>.lj-nav{grid-area:2/1/3/3;order:initial;margin:0;padding:0;border:0;gap:16px;min-height:44px}
  .lj-top .lj-wrap:has(>.lj-nav)>.lj-wa{grid-area:2/3;align-self:center;box-shadow:none;text-align:center}
  .lj-top .lj-wrap>.lj-lang{display:none}
  .lj-lang-m{display:block}
  .lj-top .lj-nav-l{font-size:11px;letter-spacing:.08em;min-height:44px}
}
/* A sigla ativa é um <details>: abre sem JS, fecha com outro toque. Alvo de 44 px. */
.lj-lang-m summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:0 8px;border-radius:7px;font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--cor);cursor:pointer}
.lj-lang-m summary::-webkit-details-marker{display:none}
.lj-lang-m summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.lj-lang-m[open] summary{background:var(--surf)}
.lj-lang-m .lst{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:grid;min-width:64px;padding:4px;background:var(--card);border:1px solid var(--bord);border-radius:9px;box-shadow:0 12px 30px -14px rgba(0,0,0,.3)}
.lj-lang-m .lst a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:6px;font-size:12px;font-weight:600;color:var(--muted)}
.lj-lang-m .lst a.on{color:var(--cor);background:var(--surf)}

/* ───────── Rodapé em 3 colunas (marca · navegar · legal) ─────────
   Quem chega ao fim procura uma coisa específica: navegar, ou conferir que a agência existe de
   verdade. Uma fila única de oito links não separa as duas — três colunas, sim. */
.lj-foot .lj-ft{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:26px 40px;align-items:start;padding:36px 24px 26px}
.lj-ft-c{display:flex;flex-direction:column;gap:9px;min-width:0}
.lj-ft-c a{color:var(--muted);font-size:14px;transition:color .16s}
.lj-ft-c a:hover{color:var(--cor)}
.lj-ft-t{margin:0 0 4px;color:var(--ink);opacity:.55}
.lj-ft-nome{margin:0;font-family:var(--font-head);font-weight:var(--whead);font-size:22px;line-height:1.15;color:var(--ink)}
.lj-ft-cidade{margin:0;color:var(--muted)}
.lj-ft-dl{font-size:12px;line-height:1.45;color:var(--muted);opacity:.8}
.lj-foot .lj-ft-fim{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:16px 24px 22px;border-top:1px solid var(--bord);color:var(--muted);font-size:13px}
.lj-ft-bz{opacity:.7}
@media (max-width:760px){
  .lj-foot .lj-ft{grid-template-columns:1fr;gap:24px;padding:28px 18px 20px}
  .lj-foot .lj-ft-fim{padding:14px 18px 20px}
}
/* Dono, 10/09: "não deixe essa sangria ao lado, fica horrível" — a coluna de leitura NÃO fica
   centrada no meio da tela. Título, texto, destaque e fotos nascem na MESMA borda esquerda do
   container (a mesma da capa e da marca no topo). O que "sai" da coluna sai só para a direita.
   Continua responsiva: em telas estreitas a coluna é a largura toda. */
.lj-pg-lido{margin:0}
.lj-pg-dest,.lj-pg-fig,.lj-pg-video{margin-left:0;width:calc(100% + var(--pg-out) * 2);max-width:100%}
@media(min-width:761px){.lj-pg-dest,.lj-pg-fig,.lj-pg-video{max-width:none}}
.lj-nt-capa{margin-left:0}
/* Painéis de chamada também alinhados à esquerda, com o botão na linha do texto. */
.lj-pg-cta{text-align:left}
.lj-ld-cta-in{text-align:left}
.lj-ld-cta-s{margin-left:0}
.lj-ld-cta-bts{justify-content:flex-start}
.lj-pg-cta-b{margin-left:0}
/* Início › Passeios como carrossel (dono 10/09). Scroll-snap nativo; setas só com overflow. */
.lj-ld-carrossel{position:relative}
.lj-ld-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0 12px;scroll-padding-left:0;overscroll-behavior-x:contain}
.lj-ld-rail::-webkit-scrollbar{display:none}
.lj-ld-rail>*{flex:0 0 min(340px,82vw);scroll-snap-align:start}
.lj-ld-rail:focus-visible{outline:2px solid var(--cor);outline-offset:6px;border-radius:12px}
.lj-ld-seta{position:absolute;top:calc(50% - 30px);z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid var(--bord);background:var(--card);color:var(--ink);font-size:28px;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.lj-ld-seta:hover{background:var(--cor);color:var(--on-cor);border-color:var(--cor);transform:scale(1.05)}
.lj-ld-seta.prev{left:-24px}.lj-ld-seta.next{right:-24px}
@media(max-width:760px){.lj-ld-seta{display:none}.lj-ld-rail{gap:14px}}
.lj-ld-seta[hidden]{display:none}
/* A suavidade da seta vem do CSS (o snap manda no destino); em reduced-motion o salto é seco. */
@media(prefers-reduced-motion:no-preference){.lj-ld-rail{scroll-behavior:smooth}}
/* Infinito: as setas ficam sempre; o riel deixa de ter "fim". Gradiente nas bordas para sugerir
   que continua dos dois lados. */
.lj-ld-carrossel::before,.lj-ld-carrossel::after{content:"";position:absolute;top:0;bottom:12px;width:36px;z-index:1;pointer-events:none}
.lj-ld-carrossel::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.lj-ld-carrossel::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
@media(max-width:760px){.lj-ld-carrossel::before,.lj-ld-carrossel::after{display:none}}
/* Destaque (dono 10/09): este sim vai centrado, com aspa de abertura e de fecho. */
.lj-pg-dest{text-align:center}
.lj-pg-dest p{margin:0 auto;max-width:22ch}
.lj-pg-dest .asp{margin:0 auto 12px}
.lj-pg-dest .asp.fecha{margin:22px auto 0;line-height:.3}
/* Dono 10/09 (ajuste): aspa de abertura à ESQUERDA, de fecho à DIREITA, frase centrada no meio. */
.lj-pg-dest{position:relative;padding-left:clamp(44px,6vw,80px);padding-right:clamp(44px,6vw,80px)}
.lj-pg-dest .asp{position:absolute;top:clamp(18px,3vw,34px);left:0;margin:0;line-height:1}
.lj-pg-dest .asp.fecha{top:auto;left:auto;right:0;bottom:clamp(18px,3vw,34px);margin:0;line-height:.4}
.lj-pg-dest p{max-width:none}
@media(max-width:760px){.lj-pg-dest{padding-left:34px;padding-right:34px}}

/* Ficha 07/10: foto que ainda está chegando mostra o fundo --ph (nunca um buraco branco) e entra
   com fade de 250 ms. O JS só marca .lj-fi nas imagens AINDA não carregadas — sem JS, nada some. */
.lj-gal-main,.lj-thumbs .t,.lj-cc-fotos img,.lj-outros .oc .m{background-color:var(--ph)}
img.lj-fi{opacity:0;transition:opacity 250ms ease}
img.lj-fi.ok{opacity:1}
@media (prefers-reduced-motion:reduce){img.lj-fi{transition:none}}
/* ── Ficha 07/10 · pasada 2 — cabeçalho, clima e pop-up no celular ─────────────────────── */
/* Alvos de 44 px no menu (eram 34×34 a 375). «body» na frente: o loja-editorial.css carrega
   DEPOIS deste arquivo e baixava a altura para 34 com a mesma especificidade. */
body .lj-top .lj-nav-l{min-height:44px;padding:0 6px}
body .lj-top .lj-nav-l:first-child{padding-left:0}
@media(max-width:760px){
  body .lj-top .lj-wrap:has(>.lj-nav)>.lj-nav{min-height:44px;gap:10px}
  /* Ao rolar para baixo o cabeçalho vira UMA fila (~56 px: marca · idioma · Minha reserva); o menu
     volta ao rolar para cima. O JS do topbar compensa a altura com margin-bottom — o conteúdo não pula. */
  body .lj-top.is-min .lj-wrap:has(>.lj-nav)>.lj-nav,body .lj-top.is-min .lj-wrap:has(>.lj-nav)>.lj-wa{display:none}
  /* Franja do clima: UMA altura em toda a loja (o catálogo media 92 px porque o selo «N saídas»
     quebrava em 3 linhas; a landing, 48). Uma linha que rola de lado, com degradê à direita
     dizendo «tem mais». Nada encolhe: «Vento» nunca é cortado no meio da palavra. */
  body .lj-vit-clima .lj-vit-wrap{height:48px;min-height:0;padding-top:0;padding-bottom:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  body .lj-vit-clima .lj-vit-wrap::-webkit-scrollbar{display:none}
  body .lj-vit-clima .lj-vit-wrap>*{flex:none;white-space:nowrap}
  body .lj-vit-clima .lj-vit-wrap::after{content:"";flex:0 0 28px}
  body .lj-vit-clima .lj-vit-sp{display:none}
  body .lj-vit-clima .saidas{padding:5px 11px;font-size:12px}
  body .lj-vit-clima .div{height:22px}
  /* Pop-up: bottom-sheet (~45 % da tela), não uma parede. A foto vira uma faixa de 120 px em cima. */
  .lj-pop{align-items:flex-end;padding:0}
  .lj-pop .card.v2{width:100%;min-height:0;max-height:78dvh;border-radius:16px 16px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);animation:ljSheet 180ms cubic-bezier(.2,.8,.2,1)}
  .lj-pop .card.v2 .img,.lj-pop .card.v2 .img.anim{flex:0 0 120px;min-height:0;height:120px}
  .lj-pop .card.v2 .bd{padding:16px 18px 18px}
  .lj-pop .card.v2 .off{margin-bottom:6px}
  .lj-pop .card.v2 h3{font-size:19px}
}
@keyframes ljSheet{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.lj-pop .card.v2{animation:none}}
@media(max-width:760px){
  /* Com a fila do menu a 44 px, o respiro de baixo sai do padding (os links já têm folga própria):
     o cabeçalho aberto fica ~98 px em vez de 106; recolhido, volta o padding e dá ~60. */
  body .lj-top .lj-wrap:has(>.lj-nav){padding-bottom:2px}
  body .lj-top.is-min .lj-wrap:has(>.lj-nav){padding-bottom:8px}
  body .lj-top .lj-mr{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:760px){
  /* Sem WhatsApp, a terceira coluna da fila do menu ficava vazia e cortava «Caderno da ilha». */
  body .lj-top .lj-wrap:has(>.lj-nav):not(:has(>.lj-wa))>.lj-nav{grid-column:1/-1}
}