/* Uma apresentação compartilhada pela vitrine, página inicial e ficha. Cores da agência. */
html[data-loja-cartoes="suave"] body{background:color-mix(in srgb,var(--ink) 3%,var(--bg))}
html[data-loja-cartoes="suave"] .lj-vit-card,
html[data-loja-cartoes="suave"] .lj-vit-hero,
html[data-loja-cartoes="suave"] .lj-vit-fim,
html[data-loja-cartoes="suave"] .lj-tour-page .lj-bx,
html[data-loja-cartoes="suave"] .lj-outros .oc{
 /* Dono 07/10: «o color de las cards está horrible, que sea blanca o gris muy clara». O cartão era --surf, e no
    tema tropical --surf é durazno (#fff2e4): a foto e o preço boiavam num pêssego. Agora o cartão é --card (branco;
    nos temas escuros, o cinza do tema) com borda e sombra de papel; o fundo da página segue o do tema. */
 border:1px solid color-mix(in srgb,var(--ink) 6%,transparent);border-radius:var(--shop-radius,24px);background:var(--card,#fff);color:var(--ink);
 box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);overflow:hidden;
 transition:box-shadow .25s ease,transform .25s ease;
}
html[data-loja-cartoes="suave"] .lj-vit-card .m{height:auto;aspect-ratio:var(--shop-photo-ratio,3/2);border-radius:0;flex-shrink:0}
html[data-loja-cartoes="suave"] .lj-vit-card .b{padding:28px;gap:16px;display:flex;flex-direction:column;color:inherit}
html[data-loja-cartoes="suave"] .lj-vit-card h3{font-family:var(--font-custom-head,var(--font-body));font-size:26px;font-weight:600;letter-spacing:-.035em;line-height:1.18;color:inherit;margin:0}
html[data-loja-cartoes="suave"] .lj-vit-card .sub{font-size:14px;line-height:1.6;color:inherit;opacity:.75;margin:0}
html[data-loja-cartoes="suave"] .lj-vit-card :is(.lj-vit-spec,.lj-vit-vagas,.lj-vit-pol,.lj-vit-preco,.lj-vit-per,.lj-vit-cri,.lj-vit-desde){color:inherit}
html[data-loja-cartoes="suave"] .lj-vit-card .lj-vit-spec{background:transparent;border:0;padding:0;font-size:13px}
html[data-loja-cartoes="suave"] .lj-vit-card .lj-vit-price{display:flex;flex-direction:column;align-items:stretch;gap:18px;border:0;padding-top:10px;margin-top:auto}
html[data-loja-cartoes="suave"] .lj-vit-card .lj-vit-preco{font-size:28px;font-weight:600;letter-spacing:-.035em;white-space:normal}
html[data-loja-cartoes="suave"] .lj-vit-card .lj-vit-desde{font-size:12px;margin-bottom:6px;opacity:.75}
html[data-loja-cartoes="suave"] .lj-vit-card .lj-vit-cri{font-size:12px;line-height:1.5;margin-top:6px;opacity:.75}
html[data-loja-cartoes="suave"] .lj-vit-card .lj-vit-btn,
html[data-loja-cartoes="suave"] .lj-vit-hero .cta,
html[data-loja-cartoes="suave"] .lj-vit-fim .cta,
html[data-loja-cartoes="suave"] .lj-tour-page .lj-btn{
 display:flex;align-items:center;justify-content:center;min-height:48px;padding:13px 24px;
 border-radius:999px;background:var(--cor);color:var(--on-cor);box-shadow:none;
 font-size:14px;font-weight:600;line-height:1.4;white-space:normal;box-sizing:border-box;
}
html[data-loja-cartoes="suave"] .lj-vit-card .lj-vit-btn{width:100%}
html[data-loja-cartoes="suave"] .lj-vit-card .lj-vit-btn::after{content:none}
html[data-loja-cartoes="suave"] :is(.lj-vit-hero,.lj-vit-fim) .info{color:inherit;padding:40px}
html[data-loja-cartoes="suave"] :is(.lj-vit-hero,.lj-vit-fim) :is(h2,.meta){color:inherit}
html[data-loja-cartoes="suave"] :is(.lj-vit-hero,.lj-vit-fim) .right{border:0;padding-top:8px}
html[data-loja-cartoes="suave"] .lj-vit-fbar :is(.chip,summary){border-radius:999px;min-height:44px}
html[data-loja-cartoes="suave"] .lj-tour-page .lj-bx{--ink:var(--shop-book-ink,var(--on-surf));--muted:color-mix(in srgb,var(--ink) 68%,var(--shop-book-bg,var(--card,#fff)));background:var(--shop-book-bg,var(--card,#fff));color:var(--ink);padding:24px}
html[data-loja-cartoes="suave"] .lj-tour-page .lj-bx .lj-saida{background:transparent}
html[data-loja-cartoes="suave"] .lj-tour-page .lj-bx .lj-saida.is-selected{background:color-mix(in srgb,var(--cor) 5%,var(--shop-book-bg,var(--card,#fff)))}
html[data-loja-cartoes="suave"] .lj-outros .oc .b{padding:20px}
html[data-loja-cartoes="suave"] .lj-ld-rail{padding:8px 0 28px}
@media(hover:hover) and (pointer:fine){
 html[data-loja-cartoes="suave"] .lj-vit-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 14px 32px rgba(0,0,0,.10);border-color:color-mix(in srgb,var(--ink) 6%,transparent)}
 html[data-loja-cartoes="suave"] .lj-vit-card:hover .m img{transform:none}
}
@media(max-width:600px){
 html[data-loja-cartoes="suave"] .lj-vit-card .b{padding:24px;gap:14px}
 html[data-loja-cartoes="suave"] .lj-vit-card h3{font-size:24px}
 html[data-loja-cartoes="suave"] :is(.lj-vit-hero,.lj-vit-fim) .info{padding:28px}
}
@media(prefers-reduced-motion:reduce){
 html[data-loja-cartoes="suave"] .lj-vit-card{transition:none}
 html[data-loja-cartoes="suave"] .lj-vit-card:hover{transform:none}
}

/* ── Raios: três tokens, um por tipo de peça (07/10) ─────────────────────────────────────────
   Botão, cartão e campo tinham cinco raios diferentes espalhados (5, 6, 8, 12, 14 px) — a loja
   parecia montada de peças de lojas distintas. Agora: todo botão é pílula, todo cartão segue o
   raio que o dono escolheu, todo campo tem o mesmo canto. Só no modo "cartões suaves". */
html[data-loja-cartoes="suave"]{--r-btn:999px;--r-card:var(--shop-radius,24px);--r-input:14px}
html[data-loja-cartoes="suave"] :is(.lj-ld-btn:not(.fantasma),.lj-pg-bar-btn,.lj-det-bar-btn,.lj-vit-bar-btn,.lj-ld-rail .lj-vit-btn,.lj-vit-vazio .lj-vit-btn,.lj-reserva-fields .lj-btn,.lj-vou .lj-btn,.lj-top .lj-wa,.lj-checkout .lj-btn){border-radius:var(--r-btn)}
html[data-loja-cartoes="suave"] :is(.lj-checkout,.lj-reserva-panel,.lj-vou,.lj-ld-cta-in){border-radius:var(--r-card)}
html[data-loja-cartoes="suave"] :is(.lj-reserva-fields input,.lj-checkout input,.lj-checkout select,.lj-checkout textarea,.lj-tour-page .lj-bx :is(input,select,textarea),.lj-vou-link input){border-radius:var(--r-input)}
/* "Aplicar" do cupom (e todo .lj-btn.ghost da ficha) volta a ser ghost: a regra cheia de cima
   pintava os dois botões da reserva iguais, e o cupom opcional gritava tanto quanto Reservar. */
html[data-loja-cartoes="suave"] .lj-tour-page .lj-btn.ghost{background:transparent;color:var(--cor);border:1px solid color-mix(in srgb,var(--cor) 55%,transparent)}
@media(hover:hover) and (pointer:fine){html[data-loja-cartoes="suave"] .lj-tour-page .lj-btn.ghost:hover{background:color-mix(in srgb,var(--cor) 8%,transparent)}}

/* Foco e toque: um anel só em toda a loja (antes cada página tinha o seu offset/cor) e o CTA
   "afunda" 2% ao toque — no celular é o único retorno de que o dedo pegou. */
html[data-loja-cartoes="suave"] :is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--cor);outline-offset:3px}
html[data-loja-cartoes="suave"] .lj-ld-hero a:focus-visible{outline-color:#fff}
html[data-loja-cartoes="suave"] :is(.lj-ld-btn,.lj-pg-bar-btn,.lj-det-bar-btn,.lj-vit-bar-btn,.lj-vit-btn,.lj-btn,.lj-vit-hero .cta,.lj-vit-fim .cta){transition:transform .12s ease,background-color .2s ease}
html[data-loja-cartoes="suave"] :is(.lj-ld-btn,.lj-pg-bar-btn,.lj-det-bar-btn,.lj-vit-bar-btn,.lj-vit-btn,.lj-btn):active{transform:scale(.98)}
html[data-loja-cartoes="suave"] :is(.lj-vit-hero,.lj-vit-fim):active .cta{transform:scale(.98)}

/* Destaque do catálogo: agora traz frase, vagas, cobrança e criança como os cartões. */
html[data-loja-cartoes="suave"] .lj-vit-hero .sub{font-size:15px;line-height:1.6;opacity:.78;margin:0 0 14px;max-width:52ch}
html[data-loja-cartoes="suave"] .lj-vit-hero :is(.lj-vit-vagas,.lj-vit-pol){color:inherit;background:transparent;padding:0;margin-top:12px;font-size:13px}
html[data-loja-cartoes="suave"] .lj-vit-hero .lj-vit-pol small{opacity:.75}
html[data-loja-cartoes="suave"] .lj-vit-hero .lj-vit-cri{display:block;font-size:12px;opacity:.75;margin-top:4px}
/* (07/10) o antigo .pr.sob/.lj-vit-preco.sob saiu: o estado agora é o chip .lj-vit-chip-sob (loja-catalogo.css). */

/* Estado vazio dos filtros: barco de linha + saída óbvia. */
.lj-vit-vazio{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 16px;text-align:center;color:var(--muted);grid-column:1/-1}
.lj-vit-vazio .ilu{display:block;width:120px;height:120px;border-radius:50%;overflow:hidden}
.lj-vit-vazio .ilu .lj-tour-placeholder svg{width:56px;height:56px}
.lj-vit-vazio .t{margin:0;font-size:16px;color:var(--ink);max-width:36ch}
.lj-vit-vazio .acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px}
.lj-vit-vazio .lj-vit-btn{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;background:var(--cor);color:var(--on-cor);font-weight:600;font-size:14px;border-radius:999px}
.lj-vit-vazio .lj-vit-lnk{color:var(--cor);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}

/* Fotos chegando: fundo do tema enquanto carrega, fade de 250 ms quando chega (script no rodapé). */
:is(.lj-vit-card .m,.lj-vit-fim .media,.lj-bl-card .m){background-color:var(--ph,color-mix(in srgb,var(--ink) 4%,var(--card,#fff)))}
img.lj-img-wait{opacity:0}
img.lj-img-in{animation:ljImgIn .25s ease both}
@keyframes ljImgIn{from{opacity:0}to{opacity:1}}

/* Linha de meta do blog: cada item inteiro numa linha e o "·" é ::before de cada item. O .mi
   recua 14 px dentro de um pai que recorta: o ponto de quem ABRE uma linha cai no recorte, então
   nunca sobra um ponto órfão no começo nem no fim da linha (a 375 px a data longa quebrava). */
.lj-bl-meta{overflow:hidden}
.lj-bl-meta .mi{display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;flex:1 1 auto;min-width:0;margin-left:-14px}
.lj-bl-meta .nw{white-space:nowrap}
.lj-bl-meta .nw::before{content:"·";display:inline-block;width:14px;text-align:center;opacity:.5}

/* Rodapé único: a coluna de contato entra como quarta coluna quando existe. */
.lj-foot .lj-ft:has(.lj-ft-contato){grid-template-columns:1.4fr 1fr 1.2fr 1.2fr}
.lj-ft-tag{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:34ch}
html[data-loja-cartoes="suave"] .lj-ft-nome{font-family:var(--font-custom-head,var(--font-body));letter-spacing:-.04em}
@media(max-width:900px){.lj-foot .lj-ft:has(.lj-ft-contato){grid-template-columns:1fr 1fr}}
@media(max-width:760px){.lj-foot .lj-ft:has(.lj-ft-contato){grid-template-columns:1fr}}

/* ── Voucher (07/10): o que era estilo inline vira classe; um CTA cheio, o resto link. ── */
.lj-vou .top{display:flex;align-items:center;gap:14px}
.lj-vou .top h1{font-family:var(--font-custom-head,var(--font-body));letter-spacing:-.02em}
.lj-vou-passeio{margin:2px 0 0;font-size:14px;opacity:.92}
.lj-vou-ok{flex:none;color:currentColor}
.lj-vou-ok .c{stroke-dasharray:145;stroke-dashoffset:145;animation:ljVouTraco .6s ease-out forwards}
.lj-vou-ok .k{stroke-dasharray:36;stroke-dashoffset:36;animation:ljVouTraco .3s ease-out .3s forwards}
@keyframes ljVouTraco{to{stroke-dashoffset:0}}
.lj-vou .info .li span:last-child{text-align:right;overflow-wrap:anywhere}
.lj-vou .info .money{white-space:nowrap;font-variant-numeric:tabular-nums}
.lj-vou-sec{padding:0 22px 18px}
.lj-vou-sec h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:0;color:var(--ink)}
.lj-vou-sec h2 .ico{color:var(--cor);flex:none}
.lj-vou-end{margin:0;font-size:14px;display:flex;align-items:flex-start;gap:6px}
.lj-vou-end a{display:inline-flex;align-items:flex-start;gap:6px;color:var(--cor);text-decoration:underline;text-underline-offset:3px}
.lj-vou-end .ico{flex:none;margin-top:2px;vertical-align:-3px}
.lj-vou-forte{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
.lj-vou-txt{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.lj-vou-lista{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--muted)}
.lj-vou-foto{display:block;margin-top:10px;max-width:100%;border-radius:var(--r-input,8px)}
.lj-vou .acts{flex-direction:column;align-items:stretch;gap:12px}
.lj-vou .acts .lj-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;width:100%;box-sizing:border-box;text-align:center}
.lj-vou-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.lj-vou-links :is(a,button){display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--cor);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.lj-vou-link{padding:18px 22px 22px;border-top:1px solid var(--bord)}
.lj-vou-link label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.lj-vou-link .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lj-vou-link input{flex:1 1 220px;min-width:0;min-height:44px;font-size:13px;padding:8px 12px;border:1px solid var(--bord);border-radius:8px;background:var(--bg);color:var(--ink)}
.lj-vou-link .lj-btn{min-height:44px;flex:none}
.lj-vou-fine{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.lj-vou-fine a{color:var(--cor);text-decoration:underline;text-underline-offset:3px}
@media print{.lj-vou-link{display:none}.lj-vou-ok .c,.lj-vou-ok .k{animation:none;stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
 html[data-loja-cartoes="suave"] :is(.lj-ld-btn,.lj-pg-bar-btn,.lj-det-bar-btn,.lj-vit-bar-btn,.lj-vit-btn,.lj-btn,.lj-vit-hero .cta,.lj-vit-fim .cta){transition:none}
 html[data-loja-cartoes="suave"] :is(.lj-ld-btn,.lj-pg-bar-btn,.lj-det-bar-btn,.lj-vit-bar-btn,.lj-vit-btn,.lj-btn):active,
 html[data-loja-cartoes="suave"] :is(.lj-vit-hero,.lj-vit-fim):active .cta{transform:none}
 img.lj-img-in{animation:none}
 .lj-vou-ok .c,.lj-vou-ok .k{animation:none;stroke-dashoffset:0}
}
/* Pasada 2 (07/10): a ação secundária do «Sob consulta» também no modo suave (que pinta todo botão de --cor). */
html[data-loja-cartoes="suave"] :is(.lj-vit-card .lj-vit-btn.sec,.lj-vit-hero .cta.sec,.lj-vit-fim .cta.sec){background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 32%,transparent)}
/* Dono 07/10 (cont.): nada durazno DENTRO do cartão — o fundo da foto enquanto carrega, o barco de linha do
   passeio sem foto e as pílulas internas (vagas, horário, «Sob consulta») vão para um cinza muito claro. */
html[data-loja-cartoes="suave"] :is(.lj-vit-card .m,.lj-vit-hero .media,.lj-vit-fim .media,.lj-outros .oc .m,.lj-bl-card .m,.lj-vit-vazio .ilu){background-color:color-mix(in srgb,var(--ink) 4%,var(--card,#fff))}
html[data-loja-cartoes="suave"] :is(.lj-vit-card,.lj-vit-hero,.lj-vit-fim,.lj-outros .oc,.lj-vit-vazio) .lj-tour-placeholder{background:color-mix(in srgb,var(--ink) 4%,var(--card,#fff));color:color-mix(in srgb,var(--ink) 45%,var(--card,#fff))}
html[data-loja-cartoes="suave"] :is(.lj-vit-card,.lj-vit-hero,.lj-vit-fim) :is(.lj-vit-spec,.lj-vit-chip-sob){background:color-mix(in srgb,var(--ink) 4%,var(--card,#fff))}
html[data-loja-cartoes="suave"] :is(.lj-vit-card,.lj-vit-hero,.lj-vit-fim) .lj-vit-spec{padding:4px 10px;border-radius:999px}
html[data-loja-cartoes="suave"] .lj-vit-card .lj-vit-vagas{background:color-mix(in srgb,var(--ink) 4%,var(--card,#fff));padding:4px 10px;border-radius:999px;align-self:flex-start}

/* Dono 07/10, dois pedidos sobre a cor: «el naranjita de las cards me da asco» e «lo dejaste en la parte de
   Clara Maré, sacalo». No modo suave nada herda o acento nem o pêssego do tema: o selo DESTAQUE vira uma
   pílula branca translúcida sobre a foto (o padrão de Airbnb/GetYourGuide), e a seção «sobre» da landing,
   que ainda pintava --surf, passa ao fundo da página. --surf fica só na faixa do clima. */
html[data-loja-cartoes="suave"] .lj-vit-card .bdg,
html[data-loja-cartoes="suave"] .lj-vit-hero .badge,
html[data-loja-cartoes="suave"] .lj-gal-bdg,
html[data-loja-cartoes="suave"] .lj-tag{background:rgba(255,255,255,.92);color:var(--ink);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 1px 2px rgba(0,0,0,.08)}
html[data-loja-cartoes="suave"] .lj-ld-sobre{background:var(--bg);--ink:initial;--muted:initial;--bord:initial}

/* Voucher (09/10): «Pagar agora R$ X» é botão CHEIO — é a ação de dinheiro. --pg-bg/--pg-ink saem de cor_aa.php
   (a cor da marca escurecida o mínimo para o texto passar AA); sem eles, a marca pura. */
.lj-vou .acts .lj-vou-pagar{background:var(--pg-bg,var(--cor));color:var(--pg-ink,var(--on-cor));border:0;font-weight:700;font-variant-numeric:tabular-nums}
.lj-vou .acts .lj-vou-pagar:focus-visible{outline:2px solid var(--pg-bg,var(--cor));outline-offset:3px}
/* Sem gateway: uma linha sob «A pagar» diz que se paga direto à agência (nada de «pague online»). */
.lj-vou-agencia{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:right}
/* Com vídeo de fundo, loja.css sublinha e pinta de branco todo link do <main> (body:has(.lj-vfundo) main a) — nos
   botões do voucher isso deixava «Pagar agora» sublinhado e o contorno do WhatsApp com texto branco sobre branco. */
.lj-vou .acts .lj-btn{text-decoration:none}
.lj-vou .acts .lj-btn.ghost{color:var(--cor)}