/* =====================================================================
Tauá Resort João Pessoa · camada de composição da página (v2)
Depende de taua-tokens.css e taua-components.css (Design System).
Nada aqui redefine token do DS: a folha só compõe a página com eles.
Os blocos seguem a ordem do arquivo; os marcados (mobile) vivem
dentro de @media e valem só no celular.
1. Fontes da marca (arquivos do DS)
2. Extensão de tokens (só fallback + escala fluida)
3. Base
4. Layout
3b. Quebra de linha em qualquer largura
5. Curvas orgânicas (divisores)
6. Header
7. Hero
8. Faixa de números (ticker)
9. Descoberta + Experiências
10. Acomodações (imersivo)
11. Gastronomia
11b. Faixa de conversão entre seções
12. Ofertas
13. Eventos
14. Sustentabilidade
15. Localização
16. Conversão final
17. Newsletter (faixa horizontal antes do rodape)
18. Footer (padrao Grupo Tauá, em verde escuro)
19. CTA fixo mobile
20. Scroll reveal
21. Responsivo / ajustes finos
22. Movimento reduzido / impressão
23. Revisão de responsividade e rodapé centralizado
24. Aeroportos de desembarque: seletor visual
25. Como chegar + Aereo no formato Resort Week
26. Como chegar + Aereo: filtros, card e beneficios
27. Alinhamento das duas colunas e sombras
29. Credito das fotos do painel de desembarque
30. Ordem do titulo e da linha de filtros
31. Previa do mapa real
35. Aeroportos de desembarque no formato de abas
38. Faixa de beneficios com quatro itens
39. Ritmo vertical entre secoes
40. Faixa de beneficios: icones do design system
41. H1 e apoio do hero no mobile
42. Faixa de beneficios em looping no mobile
43. Saidas em acordeao (desenho da referencia)
44. Bloco de saidas em coluna unica
45. Atributos da saida em pastilhas
46. Fio entre as datas de um mesmo grupo
47. Acordeao no mobile: alinhamento e pastilhas em linha
48. Check-in e check-out em duas colunas (mobile)
49. Abas de desembarque em uma linha (mobile)
50. Atributos em uma linha unica (mobile)
51. Resumo de O Resort em 3 linhas no mobile
52. Numeros de Acomodacoes em uma linha, centrados (mobile)
52b. CTA da saida: largura menor e alinhado a direita (mobile)
53. CTAs da faixa padronizados (mobile)
54. Rotulo de secao centralizado (mobile)
55. Abas do FAQ distribuidas em 2x2 (mobile)
56. Sustentabilidade no mobile: carrossel e foto
57. CTAs das saidas na mesma largura dos outros (mobile)
58. Sustentabilidade no mobile: foto so na metade de cima
59. Selo da Localizacao centralizado (mobile)
60. Faixa clara antes do rodape
61. Saidas no mobile: colunas na largura do CTA
62. Vidro da foto de Acomodacoes
63. Zoom da foto de Acomodacoes (tablet e desktop)
64. Bloco da faixa final mais para baixo (mobile)
65. Menu do celular: canto e rodape
66. Check-in e check-out em uma linha cada (mobile)
67. Check-in e check-out na mesma linha (mobile)
68. Pastilhas na largura do CTA (mobile)
69. Datas nas duas bordas do bloco (mobile)
70. Piso de legibilidade e alvos de toque (mobile)
71. Campo de escolha com lista rolavel
72. Linha reservada para o buscador
73. Filtros em formato de aba (mobile)
74. Respiro no fim do rodape (mobile)
75. Alvo de toque dos links de texto
76. Revisao multidisciplinar: hero, aviso e desembarque
77. Rodape: logo na linha das colunas e barra final
78. Saida esgotada: carimbo no lugar do CTA
79. Hero em banner de campanha
80. Bandeira da campanha na grade de saidas
81. Linha do buscador aberta: fundo de apoio
===================================================================== */
/* ---------- 1. Fontes da marca (arquivos do DS) ---------------------------- */
@font-face{font-family:"Co Headline";src:url("../fonts/CO_HEADLINE_LIGHT.woff2") format("woff2"),url("../fonts/CO_HEADLINE_LIGHT.TTF") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Co Headline";src:url("../fonts/CO_HEADLINE_REGULAR.woff2") format("woff2"),url("../fonts/CO_HEADLINE_REGULAR.TTF") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Co Headline";src:url("../fonts/CO_HEADLINE_CORP_BOLD.woff2") format("woff2"),url("../fonts/CO_HEADLINE_CORP_BOLD.TTF") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Krub";src:url("../fonts/KRUB-REGULAR.woff2") format("woff2"),url("../fonts/KRUB-REGULAR.TTF") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Krub";src:url("../fonts/KRUB-MEDIUM.woff2") format("woff2"),url("../fonts/KRUB-MEDIUM.TTF") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Krub";src:url("../fonts/KRUB-SEMIBOLD.woff2") format("woff2"),url("../fonts/KRUB-SEMIBOLD.TTF") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Krub";src:url("../fonts/KRUB-BOLD.woff2") format("woff2"),url("../fonts/KRUB-BOLD.TTF") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Krub";src:url("../fonts/KRUB-ITALIC.woff2") format("woff2"),url("../fonts/KRUB-ITALIC.TTF") format("truetype");font-weight:400;font-style:italic;font-display:swap}
/* ---------- 2. Extensão de tokens (só fallback + escala fluida) ------------ */
:root{/* mantém a ordem oficial do manual 2025 e cai para as fontes do DS */
--font-display:"Proxima Nova Wide","Proxima Nova","Co Headline","Segoe UI",ui-sans-serif,system-ui,sans-serif;
--font-body:"Proxima Nova","Krub","Segoe UI",ui-sans-serif,system-ui,sans-serif;
/* escala tipográfica fluida ancorada nos tamanhos do DS */
--t-display:clamp(29px,3.5vw,50px);
--t-h1:clamp(26px,3.2vw,34px);
--t-h2:clamp(22px,2.2vw,28px);
--t-h3:clamp(18px,1.55vw,21px);
--t-h4:clamp(16px,1.2vw,18px);
--t-lead:clamp(14.5px,1vw,16.5px);
/* ritmo vertical: seções com respiros diferentes (evita cadência de bloco) */
--gut:clamp(20px,5.5vw,88px);
--shell:1200px;
--shell-wide:1400px;
/* Respiro entre seções, encurtado duas vezes a pedido: ~18% em 01/09/2026 e
outros 15% em 11/09/2026. Com os valores atuais a emenda entre duas seções
fica em 120 a 140px no desktop e 70px no celular — a página ficou mais
compacta sem encostar bloco em bloco. */
--rhythm-lg:clamp(39px,4.85vw,75px);
--rhythm-md:clamp(31px,3.5vw,56px);
--rhythm-sm:clamp(22px,2.8vw,39px);
--header-h:72px;
--header-h-sm:56px;
/* WCAG AA: escurece o cinza de apoio (o token do DS reprova em texto pequeno) */
--text-tertiary:#5B6070;
/* laranja queimado derivado do Pantone 2013 C — só para texto em fundo claro (AA) */
--accent-light:#C56800;
--sand-deep:#E2DCC4;/* 100% Pantone 4545 C (areia cheia) */
--ink-sand:rgba(1,58,47,.72);
--glass:rgba(255,255,255,.82);
--ease-organic:cubic-bezier(.24,.72,.16,1);}
/* ---------- 3. Base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* a rolagem por âncora é animada no JS, com duração curta; o smooth nativo
ficaria lento em salto longo e competiria com ela. Sem JS, o salto é
instantâneo, que é o comportamento padrão do navegador. */
html{scroll-behavior:auto}
body{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.6;
color:var(--text-primary);background:var(--surface-base);
-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,picture,svg,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.015em}
p{margin:0}
button{font:inherit}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:3px;border-radius:6px;}
.jp-skip{position:absolute;left:16px;top:-64px;z-index:200;background:var(--surface-dark);color:#fff;
padding:12px 18px;border-radius:var(--radius-sm);font-weight:700;text-decoration:none;
transition:top var(--motion-base) var(--ease-standard);}
.jp-skip:focus{top:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* ---------- 4. Layout ------------------------------------------------------ */
section[id],form[id],div[id]{scroll-margin-top:calc(var(--header-h-sm) + 20px)}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell--wide{max-width:var(--shell-wide)}
.shell--narrow{max-width:860px}
.stack>*+*{margin-top:var(--sp-3)}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:11px;
letter-spacing:.18em;text-transform:uppercase;color:var(--taua-green-700);
display:inline-flex;align-items:center;gap:9px;}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--taua-orange-300);border-radius:2px}
.eyebrow--onsand{color:var(--taua-green-700)}
.eyebrow--ondark{color:var(--taua-orange-500)}
.eyebrow--ondark::before{background:currentColor}
/* marca de xilogravura no rótulo da seção, no lugar do traço laranja: mesma
cor do rótulo, tamanho fixo porque o rótulo tem só 11px de fonte */
.eyebrow--ico::before{width:28px;height:28px;border-radius:0;background:currentColor;
-webkit-mask:var(--ico) center/contain no-repeat;
mask:var(--ico) center/contain no-repeat;}
@media(max-width:520px){
.eyebrow--ico::before{width:24px;height:24px}
}
.i-sol{--ico:url("../icons/rotulo/sol.svg")}
.i-mar{--ico:url("../icons/rotulo/mar.svg")}
.i-cama{--ico:url("../icons/rotulo/cama.svg")}
.i-peixe{--ico:url("../icons/rotulo/peixe.svg")}
.i-camarao{--ico:url("../icons/rotulo/camarao.svg")}
.i-cadeira-praia{--ico:url("../icons/rotulo/cadeira-praia.svg")}
.i-coqueiro{--ico:url("../icons/rotulo/coqueiro.svg")}
.i-farol{--ico:url("../icons/rotulo/farol.svg")}
.i-concha{--ico:url("../icons/rotulo/concha.svg")}
.i-sanfona{--ico:url("../icons/rotulo/sanfona.svg")}
/* ---------- 3b. Quebra de linha em qualquer largura ----------------------
text-wrap:pretty evita a palavra sozinha na última linha (órfã), e balance
distribui os títulos em linhas de tamanho parecido. As duas se ajustam a
cada largura de tela, o que um max-width fixo não faz. Onde o navegador não
suporta, a quebra volta a ser a padrão: nada quebra. */
h1,h2,h3,.h-display,.h-2,.jp-tile__body h3,.jp-faixa__txt b{text-wrap:balance;}
p,li,figcaption,.lead,.jp-tile__body p,.jp-faixa__txt span{text-wrap:pretty;}
.h-display{font-size:var(--t-display)}
.h-2{font-size:var(--t-h2);color:var(--taua-green-900)}
.h-2 em{font-style:normal;color:var(--accent-light)}
.h-2--light{color:#fff}
.h-2--light em{color:var(--taua-yellow-500)}
.lead{font-size:var(--t-lead);color:var(--text-secondary);line-height:1.6;max-width:54ch}
.lead--light{color:rgba(255,255,255,.86)}
/* botões: herdam .tds-btn do DS, aqui só variações de composição */
.tds-btn{border-radius:var(--radius-full);letter-spacing:.04em;text-transform:uppercase;font-size:11.5px;
padding:12px 21px;text-decoration:none;
transition:transform var(--motion-fast) var(--ease-standard),background var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard),color var(--motion-base) var(--ease-standard)}
.tds-btn:hover{transform:translateY(-2px)}
.tds-btn--primary{color:var(--taua-green-900);box-shadow:0 10px 24px rgba(255,153,0,.28)}
.tds-btn--primary:hover{color:#fff;box-shadow:0 14px 30px rgba(1,87,70,.28)}
.tds-btn--onimage{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.tds-btn--onimage:hover{background:#fff;color:var(--taua-green-900);border-color:#fff}
.tds-btn--lg{padding:14px 26px;font-size:12.5px}
.link-arrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;
font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--taua-green-700);
text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;
transition:color var(--motion-base),border-color var(--motion-base),gap var(--motion-base);}
.link-arrow svg{transition:transform var(--motion-base) var(--ease-standard)}
.link-arrow:hover{color:var(--accent-light);border-bottom-color:var(--taua-orange-300)}
.link-arrow:hover svg{transform:translateX(5px)}
.link-arrow--light{color:#fff}
.link-arrow--light:hover{color:var(--taua-yellow-500)}
/* ---------- 5. Curvas orgânicas (divisores) -------------------------------- */
.curve{position:absolute;left:-2px;width:calc(100% + 4px);display:block;pointer-events:none;z-index:2}
.curve--top{top:-1px}
.curve--bottom{bottom:-1px}
.curve svg{width:100%;height:clamp(40px,5vw,86px);display:block}
/* ---------- 6. Header ------------------------------------------------------ */
.jp-header{position:fixed;inset:0 0 auto 0;z-index:90;
background:transparent;border-bottom:1px solid transparent;
transition:height var(--motion-base) var(--ease-standard),background var(--motion-base),
box-shadow var(--motion-base),backdrop-filter var(--motion-base);
height:var(--header-h);}
.jp-header::before{content:"";position:absolute;inset:0 0 -34px 0;pointer-events:none;
background:linear-gradient(to bottom,rgba(1,42,34,.74),rgba(1,42,34,.30) 62%,rgba(1,42,34,0));
opacity:1;transition:opacity var(--motion-base) var(--ease-standard);}
.jp-header.is-scrolled{height:var(--header-h-sm);background:#fff;border-bottom-color:rgba(1,58,47,.08);
box-shadow:0 8px 26px rgba(1,58,47,.10);backdrop-filter:blur(14px) saturate(140%);}
.jp-header.is-scrolled::before{opacity:0}
.jp-header__in{display:flex;align-items:center;gap:clamp(14px,2vw,34px);height:100%}
.jp-brand{position:relative;display:flex;align-items:center;flex:0 0 auto;text-decoration:none;
height:clamp(38px,3.4vw,48px);transition:height var(--motion-base) var(--ease-standard)}
.jp-brand img{height:100%;width:auto;transition:height var(--motion-base) var(--ease-standard),opacity var(--motion-base)}
.jp-brand img+img{position:absolute;left:0;top:0}
.jp-brand .on-dark{opacity:1}
.jp-brand .on-light{opacity:0}
.is-scrolled .jp-brand{height:36px}
.is-scrolled .jp-brand .on-dark{opacity:0}
.is-scrolled .jp-brand .on-light{opacity:1}
.jp-nav{display:none;align-items:center;gap:clamp(10px,1.3vw,19px);margin-left:auto}
.jp-nav{position:relative;z-index:2}
.jp-nav a{position:relative;text-decoration:none;font-size:12.5px;font-weight:600;color:#fff;
padding:7px 2px;white-space:nowrap;transition:color var(--motion-base);
text-shadow:0 1px 10px rgba(1,42,34,.4);}
.is-scrolled .jp-nav a{color:var(--taua-green-900);text-shadow:none}
.jp-nav a:hover{color:var(--taua-yellow-500)}
.is-scrolled .jp-nav a:hover{color:var(--accent-light)}
.jp-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--taua-orange-300);
border-radius:2px;transition:right var(--motion-base) var(--ease-standard);}
.jp-nav a:hover::after,.jp-nav a[aria-current="true"]::after{right:0}
.jp-header__cta{position:relative;z-index:2;display:none;gap:10px;align-items:center;flex:0 0 auto}
.jp-iconbtn{position:relative;z-index:2;
width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
background:rgba(255,255,255,.14);color:#fff;display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;text-decoration:none;backdrop-filter:blur(6px);
transition:background var(--motion-base),color var(--motion-base),border-color var(--motion-base);}
.jp-iconbtn:hover{background:#fff;color:var(--taua-green-900);border-color:#fff}
.is-scrolled .jp-iconbtn{border-color:rgba(1,87,70,.22);background:#fff;color:var(--taua-green-700)}
.is-scrolled .jp-iconbtn:hover{background:var(--taua-green-700);color:#fff;border-color:var(--taua-green-700)}
.jp-burger{margin-left:auto}
@media(max-width:1079px){
.jp-iconbtn{width:44px;height:44px}
}
@media(min-width:1080px){
.jp-nav{display:flex}
.jp-header__cta{display:flex}
.jp-burger{display:none}
}
/* drawer mobile */
.jp-drawer{position:fixed;inset:0;z-index:95;display:grid;grid-template-columns:1fr min(86vw,400px);
visibility:hidden;overflow:hidden;}
.jp-drawer[hidden]{display:none}
.jp-drawer.is-open{visibility:visible}
.jp-drawer__scrim{background:rgba(1,58,47,.42);opacity:0;transition:opacity var(--motion-base);border:0}
.jp-drawer.is-open .jp-drawer__scrim{opacity:1}
.jp-drawer__panel{background:var(--surface-dark);color:#fff;padding:22px 22px 28px;overflow-y:auto;
transform:translateX(102%);transition:transform var(--motion-slow) var(--ease-organic);
display:flex;flex-direction:column;gap:22px;
border-radius:34px 0 0 0;}
.jp-drawer.is-open .jp-drawer__panel{transform:none}
.jp-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.jp-drawer__top img{height:40px;width:auto}
.jp-drawer__close{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);background:none;
color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.jp-drawer nav{display:flex;flex-direction:column}
.jp-drawer nav a{text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;
padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13);
display:flex;justify-content:flex-start;align-items:center;gap:10px;}
/* ponteiro cheio, no lugar do tracinho, colado no texto */
.jp-drawer__seta{flex:0 0 auto;width:0;height:0;
border-left:7px solid var(--taua-orange-500);
border-top:5px solid transparent;border-bottom:5px solid transparent;
transition:transform var(--motion-base) var(--ease-standard);}
.jp-drawer nav a:hover .jp-drawer__seta,
.jp-drawer nav a:focus-visible .jp-drawer__seta{transform:translateX(3px)}
.jp-drawer__foot{margin-top:auto;display:grid;gap:12px}
/* ---------- 7. Hero -------------------------------------------------------- */
.jp-hero{position:relative;min-height:min(90svh,840px);display:flex;align-items:flex-end;
padding-top:calc(var(--header-h) + clamp(14px,2.2vw,26px));
padding-bottom:clamp(56px,5.6vw,84px);
isolation:isolate;background:var(--taua-green-900);overflow:hidden;}
.jp-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.jp-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 50%}
/* vídeo cobre o poster; object-fit resolve qualquer proporção de tela */
.jp-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
z-index:1;pointer-events:none;background:var(--taua-green-900);}
@media(prefers-reduced-motion:reduce){
.jp-hero__video{display:none}
}
.jp-hero__scrim{position:absolute;inset:0;z-index:1;
/* NN/g - texto sobre imagem: o filtro precisa garantir o PIOR pixel, nao a media.
Faixa diagonal cobre a coluna de texto (esquerda) e libera a foto na direita. */
background:
linear-gradient(100deg,
rgba(1,42,34,.94) 0%,
rgba(1,42,34,.86) 30%,
rgba(1,42,34,.78) 46%,
rgba(1,42,34,.28) 60%,
rgba(1,42,34,0) 72%),
linear-gradient(to bottom,
rgba(1,42,34,.46) 0%,
rgba(1,42,34,0) 26%,
rgba(1,42,34,.10) 62%,
rgba(1,58,47,.55) 100%);}
.jp-hero__grid{position:relative;z-index:3;display:grid;gap:clamp(24px,3vw,42px);align-items:end;grid-template-columns:1fr}
/* a coluna do topo comporta a segunda linha do H1 numa linha só: ela pede
812px a 50px de fonte, e 660px a quebrava em duas. O parágrafo continua
em largura de leitura, para não virar uma linha longa demais. */
.jp-hero__copy{color:#fff;max-width:min(100%,1020px)}
.jp-hero__copy .lead{max-width:58ch}
.jp-hero h1{font-size:var(--t-display);color:#fff;margin:12px 0 14px;letter-spacing:-.03em;
max-width:42ch;text-shadow:0 2px 26px rgba(1,58,47,.34);/* cabe "pessoa é ser um dos primeiros a descobrir." numa linha */}
/* aqui a quebra é decidida na mão, com os dois spans: o balance dividiria a
segunda linha em duas mesmo havendo espaço, então fica desligado */
.jp-hero h1{text-wrap:normal}
.jp-hero h1 .br{display:block}
/* em tela estreita a linha forçada não cabe e sobraria uma quarta linha
solta: abaixo de 520px o título volta a fluir e quebra sozinho */
@media(max-width:520px){
.jp-hero h1{text-wrap:pretty}
.jp-hero h1 .br{display:inline}
}
.jp-hero h1 .glow{color:var(--taua-yellow-500)}
.jp-hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:26px}
/* o CTA do hero é a ação mais importante da primeira tela: entra em laranja
(o mesmo primário do cabeçalho) para não ficar mais fraco que o botão
pequeno do topo. O entrelinhamento cai um pouco porque o rótulo é mais
longo, e em tela estreita ele pode quebrar em duas linhas equilibradas. */
.jp-hero__cta{letter-spacing:.08em;text-wrap:balance;max-width:min(100%,340px)}
@media(max-width:400px){
.jp-hero__cta{letter-spacing:.06em;padding-left:18px;padding-right:18px}
}
/* ---------- 8. Faixa de números (ticker) ----------------------------------- */
.jp-facts{background:var(--surface-dark);color:#fff;padding:15px 0;overflow:hidden;position:relative;}
.jp-facts__track{display:flex;width:max-content;gap:0;animation:marquee 68s linear infinite}
.jp-facts:hover .jp-facts__track{animation-play-state:paused}
.jp-facts__grp{display:flex;align-items:center;gap:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px)}
.jp-facts__i{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.jp-facts__i b{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.65vw,23px);color:var(--taua-yellow-500);line-height:1}
.jp-facts__i span{font-size:12px;color:rgba(255,255,255,.82)}
.jp-facts__i small{font-size:10.5px;color:rgba(255,255,255,.68);display:inline}
.jp-facts__i small::before{content:"·";margin:0 5px;color:rgba(255,255,255,.42)}
.jp-facts__a{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.jp-facts__a svg{flex:0 0 auto;color:var(--taua-yellow-500)}
.jp-facts__a b{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:#fff;letter-spacing:.005em}
.jp-facts__sep{width:7px;height:7px;border-radius:50%;background:var(--taua-orange-300);flex:0 0 auto}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* ---------- 9. Descoberta + Experiências ----------------------------------- */
.jp-discover{position:relative;background:var(--surface-base);padding:var(--rhythm-lg) 0 var(--rhythm-md)}
/* Descoberta e Experiências são o mesmo bloco branco: a primeira não precisa
de respiro embaixo, já que a segunda entra sem respiro em cima */
#descoberta{padding-bottom:0}
.jp-discover__head{display:grid;gap:clamp(16px,2.4vw,36px);align-items:end;grid-template-columns:1fr}
@media(min-width:900px){
.jp-discover__head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
/* resumo do resort: centralizado, logo abaixo do título. Sem a coluna da
direita, o cabeçalho vira uma coluna só e tudo fica centralizado. */
.jp-discover__head--solo{grid-template-columns:1fr;justify-items:center;text-align:center}
.jp-discover__head--solo .eyebrow{justify-content:center}
.jp-discover__dica{max-width:74ch;margin:clamp(18px,2.2vw,28px) auto clamp(24px,3vw,40px);text-align:center;
font-size:15px;line-height:1.65;color:var(--text-secondary);}
.jp-mosaic{margin-top:clamp(22px,3vw,40px);display:grid;gap:clamp(10px,1.1vw,16px);
grid-template-columns:repeat(2,1fr);}
@media(min-width:900px){
.jp-mosaic{grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(78px,8vw,108px)}
.jp-tile--a{grid-column:1/span 7;grid-row:1/span 3}
.jp-tile--b{grid-column:8/span 5;grid-row:1/span 2}
.jp-tile--c{grid-column:8/span 5;grid-row:3/span 3}
.jp-tile--d{grid-column:1/span 4;grid-row:4/span 2}
.jp-tile--e{grid-column:5/span 3;grid-row:4/span 2}
}
.jp-tile{position:relative;overflow:hidden;border-radius:var(--radius-md);isolation:isolate;
text-decoration:none;color:#fff;min-height:160px;background:var(--taua-green-900);
transition:opacity var(--motion-slow) var(--ease-standard),filter var(--motion-slow) var(--ease-standard),
transform var(--motion-base) var(--ease-organic);}
.jp-tile--a{border-radius:var(--radius-md) var(--radius-md) 108px var(--radius-md)}
.jp-tile--c{border-radius:108px var(--radius-md) var(--radius-md) var(--radius-md)}
.jp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
transition:transform 900ms var(--ease-organic)}
/* cards com mais de uma foto do mesmo assunto: elas se revezam em fade.
Sem JS aparece só a primeira, que é a única com alt descritivo. */
.jp-tile[data-rotate] img{opacity:0;transition:opacity 1100ms var(--ease-standard),transform 900ms var(--ease-organic)}
.jp-tile[data-rotate] img.is-on{opacity:1}
.jp-tile::after{content:"";position:absolute;inset:0;z-index:1;
/* Paradas em PX, medidas da base, e não em % da altura: a faixa de texto
mede o mesmo em qualquer tile (fonte + respiro), enquanto a altura do tile
varia de 172px a 356px. Com % o véu escorregava: no tablet, onde o tile
fica baixo, o título subia para a parte clara do degradê (piscinas dava
1,58:1) e nos tiles altos sobrava véu onde não havia texto.
Os 104px cobrem a faixa de texto mais alta medida (102px) e o alfa é o
mínimo que mantém 4,5:1 sobre a pior foto de cada tile, mais margem. */
background:linear-gradient(to top,rgba(1,58,47,.76) 0,rgba(1,58,47,.76) 104px,
rgba(1,58,47,.34) 134px,rgba(1,58,47,0) 172px);}
.jp-tile:hover img,.jp-tile:focus-visible img{transform:scale(1.07)}
/* a foto do avião é clara (fuselagem branca + céu), mas o texto deste tile é
mais alto (título, apoio e botão): véu em px que cobre os 148px da faixa e
solta a aeronave acima disso. Alfa medido nas três fotos que se revezam. */
.jp-tile--voo::after{background:linear-gradient(to top,rgba(1,48,39,.72) 0,rgba(1,48,39,.72) 148px,
rgba(1,48,39,.30) 178px,rgba(1,48,39,0) 216px);}
/* o arquivo já traz a aeronave inteira com folga nas bordas e proporção 1.45,
mais alta que a do tile em qualquer breakpoint: o cover corta só céu e
pista, nunca o avião. O object-position sobe o enquadramento, porque o
texto ocupa a faixa de baixo. */
.jp-tile--voo img{object-position:50% 38%}
/* cada foto do tile de voo tem o aviao numa altura diferente do quadro */
.jp-tile--voo img.jp-fr--aviao1{object-position:52% 44%}
.jp-tile--voo img.jp-fr--aviao2{object-position:40% 46%}
.jp-tile--voo img.jp-fr--aviao3{object-position:50% 62%}
/* em tela estreita o tile fica baixo e o texto tomava quase tudo: aqui ele
ganha altura e o apoio sai, para a aeronave continuar inteira e visível
(o mesmo texto está na seção de voo + hospedagem). */
@media(max-width:640px){
/* .jp-mosaic à frente para vencer o .jp-tile{min-height:200px} do bloco de
520px, que vem depois no arquivo */
.jp-mosaic .jp-tile--voo{min-height:266px}
.jp-tile--voo .jp-tile__body p{display:none}
}
/* chamada dentro do tile: o tile inteiro já é o link, então isto é só a
aparência de botão (um dentro de outro seria HTML inválido) */
.jp-tile__cta{display:inline-flex;align-items:center;gap:9px;justify-self:start;margin-top:12px;
font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.1em;
text-transform:uppercase;color:#fff;
background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55);
backdrop-filter:blur(6px);padding:11px 20px;border-radius:var(--radius-full);
transition:background var(--motion-base),color var(--motion-base),border-color var(--motion-base);}
.jp-tile:hover .jp-tile__cta,.jp-tile:focus-visible .jp-tile__cta{background:#fff;color:var(--taua-green-900);border-color:#fff;}
.jp-tile:hover{transform:translateY(-3px)}
.jp-tile__body{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(14px,1.4vw,20px);display:grid;gap:5px}
.jp-tile__body h3{font-size:var(--t-h4);color:#fff}
.jp-tile__body p{font-size:12px;color:rgba(255,255,255,.84);max-width:38ch}
.jp-tile__kicker{align-self:start;justify-self:start;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--taua-green-900);background:var(--taua-yellow-500);padding:4px 9px;border-radius:var(--radius-full);
position:absolute;z-index:2;top:clamp(12px,1.2vw,16px);left:clamp(12px,1.2vw,18px);}
/* trilho horizontal (atrações / restaurantes) */
.jp-railwrap{position:relative;margin-top:clamp(20px,2.6vw,34px)}
.jp-rail{display:flex;gap:clamp(10px,1.1vw,15px);overflow-x:auto;padding:5px 0 14px;
scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.jp-rail::-webkit-scrollbar{display:none}
.jp-rail.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
.jp-rail.is-dragging *{pointer-events:none}
.jp-rail>*{scroll-snap-align:start;flex:0 0 auto}
.jp-railnote{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.jp-railnav{display:flex;gap:8px;justify-content:flex-end;margin-top:-16px}
.jp-railnav button{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(1,87,70,.24);background:#fff;
color:var(--taua-green-700);cursor:pointer;display:grid;place-items:center;
transition:background var(--motion-base),color var(--motion-base),border-color var(--motion-base),opacity var(--motion-base);}
.jp-railnav button:hover{background:var(--taua-green-700);color:#fff;border-color:var(--taua-green-700)}
.jp-railnav button[disabled]{opacity:.32;cursor:default}
.jp-railnav--light button{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff}
.jp-railnav--light button:hover{background:#fff;color:var(--taua-green-900)}
.jp-attr{width:clamp(164px,15.5vw,204px);text-decoration:none;color:inherit}
.jp-attr__img{position:relative;
aspect-ratio:4/3;border-radius:18px 18px 18px 48px;overflow:hidden;background:var(--surface-subtle);
box-shadow:0 10px 22px rgba(1,58,47,.10);}
/* selo do card: amarelo com texto verde escuro, o mesmo par dos kickers do
mosaico (contraste alto e sem cor nova no sistema) */
.jp-attr__img img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-organic)}
.jp-attr:hover .jp-attr__img img{transform:scale(1.08)}
.jp-attr b{display:block;font-family:var(--font-display);font-size:13px;color:var(--taua-green-900);margin-top:10px}
.jp-attr span{font-size:11.5px;color:var(--text-tertiary)}
/* ---------- 10. Acomodações (imersivo) ------------------------------------- */
.jp-stay{position:relative;background:var(--taua-green-900);color:#fff;padding:calc(var(--rhythm-lg) + 22px) 0 var(--rhythm-lg);overflow:hidden}
.jp-stay__bg{position:absolute;inset:0;z-index:0}
.jp-stay__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.jp-stay__bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(105deg,rgba(1,58,47,.95) 0%,rgba(1,58,47,.84) 38%,rgba(1,58,47,.56) 68%,rgba(1,58,47,.68) 100%);}
.jp-stay .shell{position:relative;z-index:3}
.jp-stay__head{max-width:52ch}
/* abas no formato de navegador — tipografia inalterada (display, 11px, caixa alta, entreletras) */
.jp-stay__filter{display:flex;align-items:flex-end;gap:3px;flex-wrap:wrap;
border-bottom:1px solid rgba(255,255,255,.20);}
.jp-stay__tab{position:relative;cursor:pointer;margin-bottom:-1px;
font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:rgba(255,255,255,.66);
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);border-bottom-color:transparent;
border-radius:10px 10px 0 0;padding:11px 18px 10px;
transition:color var(--motion-base) var(--ease-standard),background var(--motion-base),
border-color var(--motion-base);}
.jp-stay__tab:hover{color:rgba(255,255,255,.86);background:rgba(255,255,255,.11)}
.jp-stay__tab.is-on{color:var(--taua-orange-500);
background:rgba(1,58,47,.94);/* opaca: cobre a linha e vira a aba da frente */
border-color:rgba(255,255,255,.24);border-bottom-color:transparent;}
.jp-stay__tab:focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:2px}
.jp-stay [data-set][hidden],.jp-room[hidden]{display:none}
.jp-stay__meta{display:flex;flex-wrap:wrap;gap:12px 0;margin-top:22px}
.jp-stay__meta div{display:grid;gap:5px;padding-right:clamp(20px,2.4vw,34px);margin-right:clamp(20px,2.4vw,34px);
border-right:1px solid rgba(255,255,255,.2)}
.jp-stay__meta div:last-child{border-right:0;margin-right:0;padding-right:0}
.jp-stay__meta b{font-family:var(--font-display);font-size:clamp(19px,1.9vw,26px);color:var(--taua-yellow-500);line-height:1}
.jp-stay__meta span{font-size:11px;color:rgba(255,255,255,.76);line-height:1.3;letter-spacing:.02em}
.jp-room{width:clamp(214px,20vw,258px);background:#fff;color:var(--text-primary);border-radius:22px;
overflow:hidden;display:flex;flex-direction:column;
transition:transform var(--motion-base) var(--ease-organic);}
.jp-room:hover{transform:translateY(-6px)}
/* 4/3 cortava 11% da largura: as fotos são 3:2. Com 3:2 a foto aparece
inteira e a área de imagem do card cresce. */
.jp-room__img{aspect-ratio:3/2;overflow:hidden;position:relative;background:var(--surface-subtle)}
.jp-room__img img{width:100%;height:100%;object-fit:cover;transition:transform 800ms var(--ease-organic)}
.jp-room:hover .jp-room__img img{transform:scale(1.07)}
.jp-room__flag{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
background:var(--taua-orange-300);color:var(--taua-green-900);padding:4px 9px;border-radius:var(--radius-full);}
/* lupa no alto à direita da foto: abre a foto ampliada. Fica sempre visível,
porque no toque não existe hover para revelar. */
.jp-room__zoom{position:absolute;top:10px;right:10px;z-index:3;
width:32px;height:32px;border-radius:50%;cursor:pointer;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.5);background:rgba(1,48,39,.5);color:#fff;
backdrop-filter:blur(6px);
transition:background var(--motion-base),color var(--motion-base),border-color var(--motion-base),transform var(--motion-base);}
.jp-room__zoom:hover{background:#fff;color:var(--taua-green-900);border-color:#fff;transform:scale(1.06)}
.jp-room__zoom:focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
.jp-room__zoom{transition:none}
.jp-room__zoom:hover{transform:none}
}
.jp-room__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.jp-room__body > :last-child{margin-bottom:0}
.jp-room__facts{margin-top:auto}
.jp-room__body h3{font-size:15px;color:var(--taua-green-900)}
.jp-room__body p{font-size:12.5px;color:var(--text-secondary)}
.jp-room__facts{list-style:none;padding:0;margin:2px 0 0;display:grid;gap:7px}
.jp-room__facts li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-secondary)}
.jp-room__facts svg{flex:0 0 auto;color:var(--taua-green-500)}
.tds-lightbox[hidden]{display:none}
.tds-lightbox img{background:#fff}
/* ---------- 11. Gastronomia ------------------------------------------------ */
.jp-taste{position:relative;background:var(--taua-sand);padding:var(--rhythm-lg) 0 var(--rhythm-md);overflow:hidden}
.jp-taste__sun{position:absolute;right:-30px;top:6%;width:clamp(130px,17vw,250px);opacity:.5;pointer-events:none;
mix-blend-mode:multiply;}
.jp-taste__head{display:grid;gap:clamp(14px,2.2vw,32px);grid-template-columns:1fr;align-items:end}
@media(min-width:900px){
.jp-taste__head{grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}
}
.jp-dish{width:clamp(200px,21vw,268px);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:11px;}
.jp-dish:nth-child(even){margin-top:clamp(14px,2.2vw,34px)}
.jp-dish__img{aspect-ratio:3/4;overflow:hidden;background:#fff;box-shadow:0 14px 32px rgba(1,58,47,.13);
border-radius:130px 130px 22px 22px;position:relative;}
.jp-dish:nth-child(3n) .jp-dish__img{border-radius:76px 22px 76px 22px}
.jp-dish__img img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-organic)}
.jp-dish:hover .jp-dish__img img{transform:scale(1.06)}
.jp-dish__cap{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 15px;
/* O veu tem de garantir o PIOR pixel da foto, nao a media: com o degrade
antigo (.9 na base, sumindo no topo da legenda) as duas linhas caiam em
alfa de 0,25 e 0,47, e sobre pao, prato claro e madeira o rotulo amarelo
dava 1,2:1 e o nome branco 3,0:1. A faixa do texto tem alfa cheio e o
degrade so suaviza a borda de cima.
A COR sai da propria foto: --cap vem no HTML de cada card, calculada da
media da faixa de baixo da imagem e escurecida ate a luminancia que garante
4,5:1 no rotulo amarelo. Assim o veu parece sombra da foto, nao um filtro
verde por cima. A primeira declaracao e reserva para navegador que nao
entende rgb(var() / alfa). */
--cap:1 58 47;
background:linear-gradient(to top,rgba(1,58,47,.92) 0%,rgba(1,58,47,.92) 72%,rgba(1,58,47,0) 100%);
background:linear-gradient(to top,rgb(var(--cap) / .92) 0%,rgb(var(--cap) / .92) 72%,rgb(var(--cap) / 0) 100%);
color:#fff;}
.jp-dish__cap small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--taua-yellow-500)}
.jp-dish__cap b{display:block;font-family:var(--font-display);font-size:15px;margin-top:2px}
.jp-dish p{font-size:12.5px;color:var(--ink-sand);padding-inline:2px}
.jp-dish__tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--taua-green-700);
background:rgba(255,255,255,.72);border-radius:var(--radius-full);padding:4px 10px;align-self:flex-start;}
/* ---------- 11b. Faixa de conversão entre seções -------------------------
Oportunidade de reserva no meio da jornada, sem depender do fim da página.
Duas ações: reservar (motor) e continuar navegando. */
.jp-faixa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:clamp(14px,2vw,28px);
margin:clamp(26px,3.2vw,44px) auto 0;max-width:var(--shell);
padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px);
border:1px solid var(--border-subtle);border-radius:20px;background:#fff;
box-shadow:var(--shadow-card);}
.jp-faixa__txt{min-width:min(100%,30ch);flex:1 1 34ch}
.jp-faixa__txt b{display:block;font-family:var(--font-display);font-weight:700;
font-size:clamp(15px,1.5vw,19px);color:var(--taua-green-900);}
.jp-faixa__txt span{display:block;margin-top:5px;font-size:13px;color:var(--text-secondary)}
.jp-faixa__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
/* ---------- 12. Ofertas ---------------------------------------------------- */
.jp-offer{position:relative;background:var(--surface-base)}
/* foto ocupa o bloco inteiro; filtro garante leitura do texto por cima */
.jp-offer__fine{font-size:11px;color:var(--text-tertiary);margin-top:14px;max-width:74ch}
/* ---------------------------------------------------------------------------
22. Ofertas · coverflow de portas de entrada e pacotes
Mesmo formato da LP de agências: card central de frente, laterais girados
em 3D, arrastável. Sem JS o baralho continua legível (os cards ficam
lado a lado, com rolagem lateral).
--------------------------------------------------------------------------- */
.jp-pkg__head{max-width:64ch;margin:0 auto clamp(24px,3.4vw,42px);text-align:center}
.jp-pkg__head .eyebrow{justify-content:center}
.jp-pkg__head .lead{margin-inline:auto;max-width:60ch}
/* o CTA do hero cai exatamente nesta caixa: a folga tira a faixa de baixo
do cabecalho fixo e deixa a faixa de titulo aparecendo inteira */
#pkgGrid{scroll-margin-top:calc(var(--header-h-sm) + 22px)}
/* aeroportos de chegada */
/* leve destaque ao passar o mouse: são cards de leitura, não de clique, então
sobem pouco e não mudam o cursor */
/* titulos das duas etapas da seção. Deixaram de ser numerados: a escolha
acontece toda na caixa de saidas, e o bloco de desembarque so informa onde
o voo fretado chega. */
.jp-orig__passo{display:flex;align-items:center;justify-content:center;gap:10px;
margin:clamp(28px,3.4vw,46px) 0 0;
font-family:var(--font-display);font-weight:700;font-size:clamp(14px,1.4vw,18px);
color:var(--taua-green-900);}
.jp-orig__passo--2{margin-top:clamp(34px,4vw,56px);margin-bottom:clamp(8px,1vw,12px)}
/* o aeroporto do voo fretado ganha destaque na lista de desembarque */
/* filtros em formato de abas de navegador, centralizados. Mesmo desenho das
abas de Acomodações, mas sobre fundo claro: a aba ativa fica branca e cobre
a linha de baixo. Serve para as abas de origem e para as do FAQ. */
.jp-faq__tabs{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:3px;
border-bottom:1px solid var(--border-subtle);
/* respiro entre o titulo da secao e as abas: o h2 traz 12px embaixo, e o
resto vem daqui. Antes havia um segundo bloco zerando o margin-top e as
abas encostavam no titulo. */
margin:clamp(22px,2.4vw,32px) 0 clamp(20px,2.4vw,30px);}
.jp-faq__tab{position:relative;cursor:pointer;margin-bottom:-1px;
font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-tertiary);
background:var(--surface-subtle);
border:1px solid var(--border-subtle);border-bottom-color:transparent;
border-radius:10px 10px 0 0;padding:11px 18px 10px;
transition:color var(--motion-base) var(--ease-standard),background var(--motion-base),
border-color var(--motion-base);}
.jp-faq__tab:hover{color:var(--taua-green-700);background:#fff}
.jp-faq__tab.is-on{color:var(--taua-green-700);
background:var(--surface-base);/* opaca: cobre a linha e vira a aba da frente */
border-color:var(--border-subtle);border-bottom-color:var(--surface-base);
box-shadow:inset 0 3px 0 var(--taua-orange-500);}
.jp-faq__tab:focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:2px}
/* ponte para o FAQ: quem ainda tem dúvida de trajeto vai direto para as
perguntas de "como chegar", sem procurar no meio da lista */
.jp-pkg__faqlink{text-align:center;margin:clamp(14px,1.8vw,22px) 0 0;font-size:13px;color:var(--text-secondary)}
.jp-pkg__faqlink a{display:inline-flex;align-items:center;gap:6px;color:var(--taua-green-700);font-weight:600}
.jp-offer__fine{text-align:center;margin-inline:auto}
/* ---------- 13. Eventos ---------------------------------------------------- */
/* carrossel: mesmo slot, mesma moldura orgânica; troca por fade */
/* ---------- 14. Sustentabilidade ------------------------------------------- */
.jp-esg{position:relative;background:var(--taua-green-900);color:#fff;padding:var(--rhythm-lg) 0;overflow:hidden}
.jp-esg__media{position:absolute;inset:0 0 0 auto;width:min(52%,780px);z-index:0}
.jp-esg__media img{width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.jp-esg__media::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--taua-green-900) 0%,rgba(1,58,47,.72) 34%,rgba(1,58,47,.18) 100%);}
.jp-esg .shell{position:relative;z-index:2}
.jp-esg__claim{max-width:34ch}
.jp-esg__claim strong{color:var(--taua-yellow-500);font-weight:700}
.jp-esg__list{list-style:none;padding:0;margin:clamp(24px,3vw,36px) 0 0;display:grid;gap:clamp(16px,2vw,26px);
grid-template-columns:repeat(auto-fit,minmax(178px,1fr));max-width:900px}
.jp-esg__list li{position:relative;padding-top:16px;border-top:2px solid rgba(255,255,255,.18)}
.jp-esg__list li::before{content:"";position:absolute;top:-2px;left:0;width:38px;height:2px;background:var(--taua-lime)}
.jp-esg__list b{display:block;font-family:var(--font-display);font-size:13px;color:#fff;margin-bottom:5px}
.jp-esg__list p{font-size:12px;color:rgba(255,255,255,.74)}
/* ---------- 15. Localização ------------------------------------------------ */
.jp-loc{position:relative;background:var(--surface-base);padding:var(--rhythm-lg) 0 var(--rhythm-md)}
.jp-loc__grid{display:grid;gap:clamp(20px,2.6vw,36px);grid-template-columns:1fr}
@media(min-width:1000px){
.jp-loc__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}
.jp-loc__photo{position:relative;border-radius:22px 22px 22px 56px;overflow:hidden;box-shadow:var(--shadow-card);
min-height:clamp(230px,26vw,360px)}
.jp-loc__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jp-loc__badge{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
border-radius:14px;padding:10px 13px;display:grid;gap:2px;box-shadow:0 10px 24px rgba(1,58,47,.16);}
.jp-loc__badge b{font-family:var(--font-display);font-size:12.5px;color:var(--taua-green-900)}
.jp-loc__badge span{font-size:10.5px;color:var(--text-tertiary)}
.jp-dist{list-style:none;padding:0;margin:0;display:grid;gap:0}
.jp-dist li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
.jp-dist li:first-child{padding-top:0}
.jp-dist b{font-family:var(--font-display);font-size:clamp(17px,1.6vw,21px);color:var(--taua-green-900);
min-width:74px;line-height:1}
.jp-dist b small{font-size:11px;color:var(--text-tertiary);font-family:var(--font-body);font-weight:400}
.jp-dist span{font-size:12.5px;color:var(--text-secondary)}
.jp-dist em{display:block;font-style:normal;font-size:11px;color:var(--text-tertiary)}
/* o card do voo fretado leva para a seção Hotel+Aéreo: como card clicável
sem pista nenhuma é interação escondida, entra também a chamada com seta */
.jp-map{border-radius:18px;overflow:hidden;border:1px solid var(--border-subtle);background:#EAF1EE}
.jp-map svg{width:100%;height:auto;display:block}
/* o bloco de duvidas fica centralizado na pagina; as perguntas seguem
alinhadas a esquerda, que e o que se le mais rapido em lista */
.jp-faq{max-width:820px;margin-inline:auto}
.jp-faq > h2{text-align:center}
.jp-faq details[hidden]{display:none}
.jp-faq details{border-bottom:1px solid var(--border-subtle)}
.jp-faq summary{cursor:pointer;list-style:none;padding:15px 40px 15px 0;position:relative;
font-family:var(--font-display);font-weight:700;font-size:clamp(13.5px,1.2vw,15.5px);color:var(--taua-green-900);}
.jp-faq summary::-webkit-details-marker{display:none}
.jp-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-8px;
border-right:2px solid var(--taua-orange-300);border-bottom:2px solid var(--taua-orange-300);
transform:rotate(45deg);transition:transform var(--motion-base) var(--ease-standard);}
.jp-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.jp-faq p{padding:0 0 16px;font-size:13px;color:var(--text-secondary);max-width:80ch}
/* ---------- 16. Conversão final -------------------------------------------- */
.jp-final{position:relative;min-height:min(64svh,540px);display:grid;place-items:center;text-align:center;
color:#fff;background:var(--taua-green-900);overflow:hidden;padding:var(--rhythm-lg) 0}
.jp-final__media{position:absolute;inset:0;z-index:0}
.jp-final__media img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
will-change:transform;animation:kenburns 14s ease-in-out infinite alternate}
/* respiro lento na foto da faixa final: aproxima e afasta, sem estourar as
bordas (o media tem overflow escondido pela propria secao). */
@keyframes kenburns{
from{transform:scale(1) translate3d(0,0,0)}
to{transform:scale(1.085) translate3d(-1.2%,-1%,0)}
}
.jp-final__media::after{content:"";position:absolute;inset:0;
background:radial-gradient(78% 78% at 50% 52%,rgba(1,48,39,.50) 0%,rgba(1,48,39,.82) 100%)}
.jp-final .shell{position:relative;z-index:2}
.jp-final h2{font-size:clamp(26px,3.6vw,44px);color:#fff;max-width:22ch;margin-inline:auto}
.jp-final p{margin:16px auto 0;max-width:52ch;color:rgba(255,255,255,.86);font-size:var(--t-lead)}
.jp-final__acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
/* ---------- 17. Newsletter (faixa horizontal antes do rodape) -------------- */
/* ---------- 18. Footer (padrao Grupo Tauá, em verde escuro) ---------------- */
.jp-footer{position:relative;background:#01251E;color:rgba(255,255,255,.80);
padding:clamp(16px,1.9vw,26px) 0 24px;font-size:13px;
--gut:clamp(20px,4vw,64px);}
.jp-footer a{text-decoration:none;color:inherit;transition:color var(--motion-base)}
.jp-footer a:hover{color:var(--taua-yellow-500)}
/* arco convexo do topo */
.jp-footer__arc{position:absolute;left:0;bottom:calc(100% - 2px);width:100%;pointer-events:none;z-index:1}
.jp-footer__arc svg{width:100%;height:clamp(48px,6vw,104px);display:block}
.jp-footer__grid{display:grid;gap:clamp(26px,3vw,40px);grid-template-columns:1fr;
padding-bottom:clamp(28px,3.4vw,44px);}
@media(min-width:700px){
.jp-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1000px){
.jp-footer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* entre 700 e 1239 o bloco institucional ocupa a linha inteira e as colunas ficam alinhadas abaixo */
@media(min-width:700px) and (max-width:1239px){
.jp-footer__about{grid-column:1/-1;max-width:560px;padding-top:0}
}
@media(min-width:1240px){
.jp-footer__grid{grid-template-columns:minmax(0,1.75fr) minmax(0,.92fr) minmax(0,1.2fr) minmax(0,1.05fr) minmax(0,1.1fr);
gap:clamp(20px,2.2vw,26px);
}
}
/* ---- coluna institucional ---- */
.jp-footer__about{max-width:360px}
.jp-footer__brand{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);flex-wrap:wrap}
.jp-footer__brand .rede{height:clamp(56px,5vw,72px);width:auto}
.jp-footer__tag{margin-top:clamp(24px,3vw,38px);font-size:14.5px;line-height:1.5;color:#fff;max-width:27ch;}
.jp-footer__contact{list-style:none;padding:0;margin:clamp(20px,2.4vw,30px) 0 0;display:grid;gap:12px}
.jp-footer__contact li{display:flex;align-items:center;gap:11px;font-size:14px}
.jp-footer__contact svg{flex:0 0 auto;color:var(--taua-orange-500)}
.jp-footer__contact a{color:#fff}
.jp-footer__hours{margin-top:14px;font-size:13px;line-height:1.8;color:rgba(255,255,255,.62)}
/* ---- colunas de links ---- */
.jp-footer__col h3{font-family:var(--font-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--taua-orange-500);margin:0 0 16px;line-height:1.2;}
.jp-footer__col ul{list-style:none;padding:0;margin:0;display:grid;gap:13px;font-size:13.5px;line-height:1.35}
.jp-footer__col a[aria-current="page"]{color:#fff;font-weight:600}
.jp-footer__col a[aria-current="page"]{position:relative}
.jp-footer__col a[aria-current="page"]::before{content:"";position:absolute;left:-13px;top:.55em;width:6px;height:6px;border-radius:50%;
background:var(--taua-orange-300);}
/* ---- barra inferior ---- */
.jp-footer__bottom{display:grid;align-items:center;
padding:20px 0;border-top:1px solid rgba(255,255,255,.14);}
.jp-footer__bottom .jp-social{justify-self:center}
.jp-footer__bottom .jp-footer__policy{justify-self:end}
.jp-footer__copy{font-size:12.5px;color:rgba(255,255,255,.62)}
.jp-social{display:flex;gap:10px}
.jp-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
display:grid;place-items:center;color:#fff;
transition:background var(--motion-base),border-color var(--motion-base),color var(--motion-base);}
.jp-social a:hover{background:#fff;color:var(--taua-green-900);border-color:#fff}
.jp-footer__policy{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.jp-footer__legal{display:grid;gap:5px;padding-top:16px;font-size:11px;color:rgba(255,255,255,.5);max-width:110ch;}
@media(max-width:699px){
/* o alinhamento da barra inferior no celular vem do bloco 23, que centraliza
tudo sem media query e por isso vence estas larguras. As tres regras que
alinhavam a esquerda viviam aqui e nunca chegavam a valer. */
.jp-footer__about{max-width:none}
}
/* ---------- 19. CTA fixo mobile -------------------------------------------- */
.jp-stickycta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;gap:10px;align-items:center;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
border-top:1px solid rgba(1,58,47,.1);box-shadow:0 -8px 24px rgba(1,58,47,.12);
transform:translateY(120%);transition:transform var(--motion-slow) var(--ease-organic);}
.jp-stickycta.is-on{transform:none}
.jp-stickycta__txt{flex:1;min-width:0}
.jp-stickycta__txt b{display:block;font-family:var(--font-display);font-size:12px;color:var(--taua-green-900)}
.jp-stickycta__txt span{font-size:10.5px;color:var(--text-tertiary)}
.jp-stickycta .tds-btn{flex:0 0 auto}
@media(min-width:1080px){
.jp-stickycta{display:none}
}
/* ---------- 20. Scroll reveal ---------------------------------------------- */
.reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity 700ms var(--ease-standard),transform 700ms var(--ease-organic)}
.reveal.is-in{opacity:1;transform:none}
.reveal--d1{transition-delay:90ms}
.reveal--d2{transition-delay:180ms}
/* ---------- 21. Responsivo / ajustes finos --------------------------------- */
@media(max-width:1023px){
.jp-hero{min-height:min(74svh,640px);padding-bottom:clamp(56px,10vw,96px)}
/* Veu do hero fora do desktop. A faixa diagonal de 100deg foi desenhada para
a coluna de texto do desktop, que fica no terco esquerdo; abaixo de 1024px
o texto ocupa quase toda a largura (e no celular fica centralizado), e a
ponta direita das linhas caia justamente onde a diagonal ja e transparente.
Medido no video quadro a quadro: pior contraste de 1,01:1 no h1 do celular
e 1,56:1 no apoio do tablet. Aqui o veu passa a ser vertical e reforca de
46% para baixo, que e onde o texto vive nesses tamanhos, mantendo a metade
de cima da imagem aberta. O desktop nao muda. */
.jp-hero__scrim{background:linear-gradient(180deg,
rgba(1,42,34,.52) 0%,
rgba(1,42,34,.12) 30%,
rgba(1,42,34,.26) 46%,
rgba(1,42,34,.62) 56%,
rgba(1,42,34,.82) 74%,
rgba(1,58,47,.90) 100%);}
.jp-esg__media{width:100%;opacity:.45}
.jp-esg__media::after{background:linear-gradient(180deg,rgba(1,58,47,.86),rgba(1,58,47,.94))}
}
@media(max-width:899px){
.jp-mosaic{grid-template-columns:1fr 1fr}
.jp-tile{min-height:172px}
.jp-tile--a{grid-column:1/-1;min-height:238px;border-radius:var(--radius-md) var(--radius-md) 88px var(--radius-md)}
.jp-tile--c{border-radius:var(--radius-md)}
.jp-taste__sun{opacity:.32;width:140px}
}
@media(max-width:600px){
.jp-hero__acts .tds-btn{flex:0 1 auto}
.jp-facts__i b{font-size:20px}
.jp-facts__a b{font-size:12.5px}
.jp-mosaic{grid-template-columns:1fr}
.jp-tile{min-height:200px}
.jp-dish:nth-child(even){margin-top:0}
}
/* ---------- 22. Movimento reduzido / impressão ----------------------------- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.jp-final__media img{animation:none}
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important}
.reveal{opacity:1;transform:none}
.jp-hero__media img{animation:none;transform:none}
.jp-facts__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
.jp-tile[data-rotate] img{transition:none}
}
@media print{
.jp-header,.jp-stickycta,.jp-drawer,.jp-railnav{display:none !important}
.jp-hero{min-height:auto;color:#000}
.reveal{opacity:1;transform:none}
}
/* ---------- 23. Revisão de responsividade e rodapé centralizado ------------ */
/* Rodapé: todo o texto centralizado, em qualquer largura. O marcador de
"página atual" sai porque era um ponto à esquerda da linha, que fica solto
quando o texto é centralizado (a cor branca e o negrito seguem marcando). */
.jp-footer__grid,.jp-footer__about,.jp-footer__col,.jp-footer__hours,
.jp-footer__legal,.jp-footer__bottom{text-align:center}
.jp-footer__about{margin-inline:auto}
.jp-footer__brand{justify-content:center}
.jp-footer__contact{justify-items:center}
.jp-footer__contact li{justify-content:center}
.jp-footer__col ul{justify-items:center}
.jp-footer__col li:has(a[aria-current="page"]){padding-left:0}
.jp-footer__col a[aria-current="page"]::before{display:none}
.jp-footer__legal{margin-inline:auto}
.jp-footer__bottom{grid-template-columns:1fr;justify-items:center;gap:16px}
.jp-footer__bottom .jp-social,.jp-footer__bottom .jp-footer__policy{justify-self:center}
.jp-footer__policy{text-align:center;align-items:center}
.jp-footer__copy{max-width:44ch;margin-inline:auto}
/* Alvos de toque: no touch o mínimo confortável é 44px. */
@media(max-width:1079px){
.tds-btn{min-height:44px}
/* o X da foto ampliada tinha 30x32: area pequena para o dedo, e fica no
canto, onde o erro de toque fecha ou nao fecha por poucos pixels */
.tds-lightbox__x{width:44px;height:44px;display:grid;place-items:center;
top:10px;right:10px;border-radius:50%;background:rgba(0,0,0,.34);
}
/* mais alguns pixels de foto na tela estreita */
.tds-lightbox{padding:14px}
.tds-lightbox img{max-width:96vw;max-height:84vh}
.jp-railnav button{width:44px;height:44px}
.jp-room__zoom{width:40px;height:40px;top:8px;right:8px}
.jp-drawer__close{width:44px;height:44px}
}
@media(max-width:900px){
.jp-faq__tab,.jp-stay__tab{padding-left:14px;padding-right:14px;letter-spacing:.1em}
}
@media(max-width:640px){
/* Filtros no mobile em formato de abas, todas visiveis: a faixa deslizante
cortava a ultima na borda. Aqui as abas quebram linha, centralizadas, e
mantem o desenho de aba (canto superior arredondado, selecionada opaca).
Só o respiro interno e o entrelinhamento diminuem, para caberem em 320px. */
.jp-faq__tabs,.jp-stay__filter{flex-wrap:wrap;overflow:visible;justify-content:center;align-items:flex-end;gap:4px;
}
.jp-faq__tab,.jp-stay__tab{flex:0 1 auto;padding:10px 13px 9px;font-size:10.5px;letter-spacing:.07em;
}
/* Sustentabilidade: os 4 pilares viram carrossel automatico, texto
centralizado, e a foto de fundo aparece mais (veu mais leve). */
/* degrade mais leve de cima para baixo. Pior pixel possivel (foto branca)
com a foto em 50%: o apoio rgba(255,255,255,.74) fica em 5,05:1 no topo
e 5,32:1 na base, e o titulo branco acima de 7,6:1. */
.jp-esg__claim,.jp-esg__list li{text-align:center}
.jp-esg__claim{margin-inline:auto}
.jp-esg__list{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;grid-template-columns:none;
scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
}
.jp-esg__list::-webkit-scrollbar{display:none}
.jp-esg__list li{flex:0 0 78vw;scroll-snap-align:center}
.jp-esg__list li::before{left:50%;transform:translateX(-50%)}
/* Cards dos trilhos: 214px é estreito para título + apoio + dois atributos.
78vw deixa o texto respirar e ainda mostra a espia do card seguinte. */
.jp-room{width:min(78vw,300px)}
.jp-dish{width:min(70vw,268px)}
.jp-attr{width:min(52vw,204px)}
/* Mosaico de destaques vira carrossel no mobile: empilhados, os 5 cards
viravam uma coluna longa que empurrava o resto da pagina para baixo.
Rolagem horizontal com encaixe, sangrando ate a borda da tela, e a espia
do card seguinte mostra que ha mais conteudo ao lado. */
.jp-mosaic{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;
scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-bottom:6px;
}
.jp-mosaic::-webkit-scrollbar{display:none}
.jp-mosaic > .jp-tile{flex:0 0 82vw;scroll-snap-align:center;min-height:300px}
.jp-mosaic > .jp-tile--voo{min-height:320px}
.jp-mosaic > .jp-tile--voo .jp-tile__body p{display:block}
/* Bloco de apoio abaixo dos pacotes (selo, telefone, link do FAQ e letra
miuda): 2px menos em cada fonte e uma coluna so, para caber na largura do
mobile sem quebrar no meio das frases. */
.jp-pkg__faqlink{font-size:11px}
/* Sol decorativo passava da borda da tela. */
.jp-taste__sun{width:96px;right:-8px}
/* Vídeo e poster do hero: em tela estreita o quadro é retrato e o cover
corta cerca de dois terços da largura. Centrado em 50% sobrava um pedaço
de mar sem referência; em 66% entram a curva da praia e as falésias. */
.jp-hero__media img,.jp-hero__video{object-position:66% 50%}
}
/* Bolinhas dos carrosseis: criadas pelo JS apenas no mobile (bloco 5d). */
.jp-dots{display:flex;justify-content:center;gap:6px;margin-top:14px;
width:100%;flex:0 0 100%;grid-column:1/-1;/* centraliza em pai bloco, flex ou grade */}
.jp-dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
display:grid;place-items:center;}
.jp-dots button::before{content:"";width:8px;height:8px;border-radius:var(--radius-full);
background:rgba(255,153,0,.34);/* laranja da marca, como nas outras LPs */
transition:width var(--motion-base) var(--ease-standard),background var(--motion-base);}
.jp-dots button[aria-current="true"]::before{width:22px;background:var(--taua-orange-500)}
.jp-dots button:focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:2px;border-radius:var(--radius-full)}
.jp-dots--light button::before{background:rgba(255,255,255,.34)}
.jp-dots--light button[aria-current="true"]::before{background:var(--taua-orange-500)}
@media(prefers-reduced-motion:reduce){
.jp-dots button::before{transition:none}
}
@media(max-width:640px){
/* No mobile as setas dao lugar as bolinhas: alvo maior e mais claro sobre
qual parte do trilho a pessoa esta vendo. */
.jp-railnav{display:none}
/* Textos que vem acompanhados de CTA ficam centralizados no mobile. As
listas de fatos dos cards de pacote seguem alinhadas a esquerda, porque
centralizar itens com marcador atrapalha a leitura. */
.jp-hero__copy,.jp-hero__acts,
.jp-faixa,.jp-faixa__txt,.jp-faixa__acts,
.jp-tile__body,
.jp-loc__grid{text-align:center}
.jp-hero__acts,.jp-faixa__acts{justify-content:center}
.jp-hero h1,.jp-hero .lead,.jp-faixa__txt p{margin-inline:auto}
.jp-tile__body{justify-items:center}
.jp-tile__cta{justify-self:center;margin-inline:auto}
.jp-tile__kicker{left:50%;transform:translateX(-50%)}
.jp-drawer__foot{text-align:center}
/* Cabecalhos de secao centralizados: rotulo, H2 e linha de apoio. Regra
generica de proposito, para valer tambem nas secoes cujo cabecalho nao
tem classe propria. Os H3 dos cards ficam de fora. */
main h2,.jp-stay h2,.jp-final h2{text-align:center;margin-inline:auto}
.eyebrow{text-align:center}
.jp-pkg__head,.jp-discover__head,.jp-stay__head,.jp-taste__head,.jp-orig__passo{text-align:center}
.jp-orig__passo{justify-content:center}
main h2 + .lead,.jp-stay__head .lead,.jp-taste__head .lead{text-align:center;margin-inline:auto}
}
/* ---------- 24. Aeroportos de desembarque: seletor visual ----------------- */
/* Tres cartoes selecionaveis; o painel abaixo troca de foto e de texto. Joao
Pessoa mostra o desembarque real e o atalho para o mapa da Localizacao;
Recife mostra o terminal e a distancia aproximada, que a operacao
ainda nao fechou. */
.jp-porta{margin-top:clamp(16px,2.2vw,26px)}
.jp-porta__tabs{display:flex;flex-wrap:wrap;justify-content:center}
.jp-porta__tab{cursor:pointer;
border:1px solid var(--border-subtle);
display:grid;gap:3px;
transition:border-color var(--motion-base),box-shadow var(--motion-base),transform var(--motion-base) var(--ease-organic);}
.jp-porta__tab b{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--taua-green-900)}
/* laranja em texto pequeno sobre branco da 2,1:1: o rotulo fica no verde da
marca (8,6:1), como nos eyebrows da pagina, e o laranja segue como marca
grafica no traco. */
.jp-porta__tab span{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--taua-green-700)}
.jp-porta__tab:focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:2px}
.jp-porta__painel{display:grid;grid-template-columns:1fr;align-items:center;
background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);
box-shadow:var(--shadow-card);overflow:hidden;}
.jp-porta__painel[hidden]{display:none}
@media(min-width:760px){
.jp-porta__painel{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}
.jp-porta__img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-subtle)}
.jp-porta__img img,.jp-porta__img svg{width:100%;height:100%;object-fit:cover;display:block}
.jp-porta__txt{padding:clamp(16px,2.2vw,28px)}
.jp-porta__eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--taua-green-700);margin:0;display:block;}
.jp-porta__txt h3{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.7vw,22px);
color:var(--taua-green-900);line-height:1.25;margin:8px 0 10px;}
.jp-porta__txt p{font-size:13.5px;line-height:1.65;color:var(--text-secondary);margin:0}
.jp-porta__acts{margin-top:14px !important}
@media(max-width:640px){
.jp-porta__tab{text-align:center;justify-items:center}
.jp-porta__txt{text-align:center}
.jp-porta__eyebrow{text-align:center}
.jp-porta__acts .link-arrow{justify-content:center}
}
/* ---------- 25. Como chegar + Aereo no formato Resort Week ----------------- */
/* Duas colunas: o card do resort (fotos girando) e a lista de saidas com data.
Cada linha abre o motor da Infotravel na busca certa, que e o caminho curto
para quem so quer comprar. */
.jp-week{margin-top:clamp(20px,2.6vw,32px);display:grid;gap:clamp(14px,1.8vw,22px);
align-items:start;}
@media(min-width:900px){
.jp-week{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
}
/* icone e cidade na mesma linha: o svg estava quebrando para cima */
.jp-week__col{display:grid;gap:10px}
.jp-week__t{margin:0 0 2px}
/* ---------- 26. Como chegar + Aereo: filtros, card e beneficios ------------ */
/* Linha de filtros em pastilhas, no lugar das abas: e o formato da referencia
e, no celular, abre o seletor nativo, o que resolve a lista longa de cidades
sem quebrar em varias linhas. */
.jp-filtros{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
margin:clamp(18px,2.4vw,28px) 0 clamp(16px,2vw,24px);}
.jp-filtros__lab{font-size:12.5px;color:var(--text-secondary)}
.jp-filtro{position:relative;display:inline-flex;align-items:center}
.jp-filtro select{appearance:none;-webkit-appearance:none;cursor:pointer;
font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--taua-green-900);
background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-full);
padding:11px 34px 11px 16px;min-height:44px;
transition:border-color var(--motion-base),box-shadow var(--motion-base);}
.jp-filtro select:hover{border-color:var(--taua-green-700)}
.jp-filtro select:focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:2px}
.jp-filtro svg{position:absolute;right:13px;pointer-events:none;color:var(--taua-green-700)}
.jp-filtros__limpar{cursor:pointer;background:none;border:0;padding:11px 6px;min-height:44px;
font-size:12.5px;color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px;}
.jp-filtros__limpar:disabled{opacity:.45;cursor:default;text-decoration:none}
.jp-filtros__limpar:focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:2px;border-radius:6px}
/* selos das linhas de oferta, nas cores da referencia */
/* faixa de beneficios: cartao branco com icone, titulo e apoio, como na
referencia. O conteudo e o mesmo que estava nas pastilhas. */
.jp-incluiwrap{margin:clamp(22px,3vw,38px) auto 0;padding:clamp(18px,2.2vw,26px) clamp(14px,2vw,26px);
max-width:1000px;background:#fff;border:1px solid var(--border-subtle);
border-radius:var(--radius-md);}
.jp-inclui{list-style:none;margin:0;padding:0;
display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.jp-inclui li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
column-gap:11px;row-gap:2px;align-items:center}
.jp-inclui__ico{grid-row:1/3;
color:var(--taua-green-700);}
.jp-inclui b{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--taua-green-900);line-height:1.25}
.jp-inclui span:not(.jp-inclui__ico){font-size:11px;color:var(--text-secondary);line-height:1.35}
@media(max-width:640px){
.jp-filtro select{font-size:12px;padding:11px 32px 11px 14px}
.jp-inclui{text-align:left}
.jp-inclui li{grid-template-columns:auto 1fr}
}
@media(max-width:420px){
.jp-inclui{grid-template-columns:1fr}
}
/* ---------- 27. Alinhamento das duas colunas e sombras --------------------- */
/* o passo 1 ocupa a linha inteira acima das duas colunas */
.jp-week__t{grid-column:1/-1;justify-content:center;margin-top:0}
@media(min-width:900px){
.jp-week{--altura-week:clamp(360px,37vw,468px);align-items:stretch}
.jp-week__col{height:var(--altura-week);grid-template-rows:minmax(0,1fr);grid-auto-rows:auto}
}
/* Sem sombra nos blocos: a borda ja separa do fundo e o conjunto fica mais
limpo, como na referencia. */
.jp-inclui{box-shadow:none}
/* ---------- 29. Credito das fotos do painel de desembarque ----------------- */
/* As tres fotos sao do aeroporto de Joao Pessoa, que e o unico do qual temos
imagem. No painel de Recife o credito impede a leitura errada de
que a foto seria do aeroporto de origem. */
.jp-porta__img{position:relative}
.jp-porta__cred{position:absolute;left:0;right:0;bottom:0;z-index:2;
font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.92);
/* O veu da legenda tem de garantir o PIOR pixel da foto: com o degrade
antigo (.82 na base, some no topo) a legenda caia para 1,98:1 sobre um
telhado branco no pe da foto de Recife. Agora a faixa do texto fica com
alfa cheio e o degrade so suaviza a borda de cima. */
background:linear-gradient(to top,rgba(1,48,39,.92) 0%,rgba(1,48,39,.92) 62%,rgba(1,48,39,0) 100%);
padding:16px 12px 8px;}
/* ---------- 30. Ordem do titulo e da linha de filtros --------------------- */
/* O passo numerado abre o bloco e a linha de filtros vem logo abaixo dele,
antes das duas colunas. */
.jp-week__t{margin-bottom:clamp(10px,1.4vw,16px)}
.jp-filtros{margin-top:0}
/* ---------- 31. Previa do mapa real ---------------------------------------- */
/* O bloco antes trazia um mapa desenhado. Agora e o mapa de verdade, na mesma
busca do botao "Abrir no mapa". */
.jp-map{aspect-ratio:16/9;position:relative}
.jp-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:640px){
.jp-map{aspect-ratio:4/3}
}
/* ---------- 35. Aeroportos de desembarque no formato de abas -------------- */
/* Mesmo desenho das abas do resto da pagina: canto superior arredondado,
apoiadas numa linha, e a selecionada opaca cobrindo a linha. */
.jp-porta__tabs{align-items:flex-end;gap:4px;
border-bottom:1px solid var(--border-subtle);}
.jp-porta__tab{flex:0 1 auto;margin-bottom:-1px;text-align:center;justify-items:center;
border-radius:10px 10px 0 0;border-bottom-color:transparent;
background:var(--surface-subtle);padding:10px 18px 9px;box-shadow:none;}
.jp-porta__tab:hover{background:#fff;transform:none;box-shadow:none;border-color:var(--border-subtle);border-bottom-color:transparent}
.jp-porta__tab.is-on{background:var(--surface-base);box-shadow:none;
border-color:var(--border-subtle);border-bottom-color:var(--surface-base);}
.jp-porta__tab.is-on b{color:var(--taua-green-900)}
.jp-porta__painel{margin-top:clamp(10px,1.2vw,16px)}
@media(max-width:640px){
.jp-porta__tab span{font-size:9.5px}
}
/* ---------- 38. Faixa de beneficios com quatro itens ----------------------- */
/* Com quatro itens o auto-fit ainda criava cinco trilhas e sobrava um vao no
fim: no desktop as colunas passam a ser exatamente quatro. */
@media(min-width:900px){
.jp-inclui{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ---------- 39. Ritmo vertical entre secoes -------------------------------- */
/* Nas emendas entre secoes brancas vizinhas os dois respiros grandes somavam
164px e abriam um vao. O de baixo cai para o medio e o topo da secao seguinte
acompanha, entao a emenda fica em torno de 118px. */
.jp-offer{padding:var(--rhythm-lg) 0 var(--rhythm-md)}
.jp-faq{margin-top:clamp(38px,4.4vw,64px)}
/* ---------- 40. Faixa de beneficios: icones do design system --------------- */
/* O traco do icone do DS e fino: engrossei o alfa na geracao do arquivo e
subi o tamanho de exibicao, senao em 22px o desenho anti-aliasa e parece
um circulo vazio. */
.jp-inclui__ico{width:44px;height:44px;border-radius:50%;
background:rgba(1,87,70,.08);
display:grid;place-items:center;flex:0 0 auto;}
.jp-inclui__ico img{width:28px;height:28px;display:block}
/* ---------- 41. H1 e apoio do hero no mobile ------------------------------- */
/* No celular as quebras marcadas do desktop saem e o titulo flui: com o texto
novo ("Ficou mais facil chegar ao Taua Joao Pessoa.") o balance resolve as
duas linhas ate 320px. O texto de apoio desce um ponto, para o conjunto
caber com folga na primeira tela. */
@media(max-width:640px){
/* um ponto menor no mobile, para o titulo caber em duas linhas */
.jp-hero h1{text-wrap:balance;font-size:26px}
.jp-hero h1 .br{display:inline}
.jp-hero .lead{font-size:13.5px}
/* ---------- 42. Faixa de beneficios em looping no mobile ------------------- */
/* Da direita para a esquerda, sem fim. O JS duplica os quatro itens e a
animacao anda -50%: a emenda cai no ponto identico e nao se ve o pulo.
Para quando o dedo toca e nao roda com movimento reduzido. */
.jp-incluiwrap{overflow:hidden;padding-left:0;padding-right:0}
.jp-inclui{display:flex;flex-wrap:nowrap;width:max-content;
grid-template-columns:none;gap:0;
animation:incluiCorre 24s linear infinite;
}
.jp-inclui li{flex:0 0 auto;padding:0 18px}
.jp-inclui:hover,.jp-inclui:focus-within{animation-play-state:paused}
.jp-inclui b,.jp-inclui span:not(.jp-inclui__ico){white-space:nowrap}
}
@keyframes incluiCorre{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-50%,0,0)}
}
@media(prefers-reduced-motion:reduce){
.jp-inclui{animation:none}
}
/* ---------- 43. Saidas em acordeao (desenho da referencia) ----------------- */
/* Uma caixa so: faixa de titulo no topo, linhas separadas por fio, triangulo a
esquerda e tabela com cabecalho em texto simples. Sem cartoes soltos. */
.jp-ofertas{border:1px solid var(--border-subtle);border-radius:var(--radius-md);
background:#fff;overflow:visible;align-self:start;}
.jp-ofertas__faixa{margin:0;text-align:center;padding:clamp(16px,1.8vw,20px) clamp(16px,2vw,24px);
background:var(--taua-sand);border-bottom:1px solid var(--border-subtle);
font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.5vw,18px);
line-height:1.3;color:var(--taua-green-900);}
.jp-ofertas__lista{max-height:none}
.jp-oferta{border-top:1px solid var(--border-subtle)}
.jp-oferta:first-child{border-top:0}
.jp-oferta[hidden]{display:none}
.jp-oferta > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
padding:16px clamp(16px,2vw,24px);min-height:58px;}
.jp-oferta > summary::-webkit-details-marker{display:none}
/* triangulo cheio a esquerda, como no print */
.jp-oferta > summary::before{content:"";flex:0 0 auto;width:0;height:0;
border-left:8px solid var(--taua-green-700);
border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
transition:transform var(--motion-base) var(--ease-standard);}
.jp-oferta[open] > summary::before{transform:rotate(90deg)}
.jp-oferta > summary:hover .jp-oferta__t{text-decoration:underline;text-underline-offset:3px}
.jp-oferta > summary:focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:-3px}
.jp-oferta__t{font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1.35;
color:var(--taua-green-700);}
.jp-oferta__n{font-size:11.5px;color:var(--text-tertiary);margin-left:auto;white-space:nowrap}
.jp-oferta__tab{width:100%;border-collapse:collapse;font-size:13px}
.jp-oferta__tab th{text-align:left;font-weight:400;font-size:12.5px;color:var(--text-secondary);
padding:6px clamp(16px,2vw,24px) 10px;}
.jp-oferta__tab thead tr th:first-child{padding-left:clamp(38px,4vw,48px)}
.jp-oferta__tab td{padding:10px clamp(16px,2vw,24px) 22px;color:var(--text-secondary);vertical-align:middle}
.jp-oferta__tab td:first-child{padding-left:clamp(38px,4vw,48px);color:var(--taua-green-700);font-weight:600;white-space:nowrap;}
.jp-oferta__tab td:nth-child(2){white-space:nowrap}
.jp-oferta__tab td:last-child{text-align:right;padding-right:clamp(16px,2vw,24px)}
.jp-oferta__tab .tds-btn{font-size:10.5px;padding:9px 18px;min-height:40px}
.jp-oferta__tab tr[hidden]{display:none}
/* o botao e o mesmo do Reservar: para a pessoa, os dois levam ao motor */
@media(max-width:640px){
/* a tabela de quatro colunas nao cabe: cada data vira bloco com rotulo */
.jp-oferta__tab thead{display:none}
.jp-oferta__tab,.jp-oferta__tab tbody,.jp-oferta__tab tr,.jp-oferta__tab td{display:block;width:auto}
.jp-oferta__tab td{border:0;white-space:normal}
.jp-oferta__tab td:first-child,.jp-oferta__tab td:last-child{padding-left:0;padding-right:0}
.jp-oferta__tab td[data-rot]::before{content:attr(data-rot) ": ";font-weight:700}
.jp-oferta__tab td:last-child{text-align:left;padding-top:12px}
.jp-oferta > summary{padding:14px 16px;min-height:54px}
.jp-oferta__t{font-size:13.5px}
.jp-oferta__n{font-size:11px}
}
/* ---------- 44. Bloco de saidas em coluna unica ---------------------------- */
/* O card de imagens saiu: o acordeao ocupa a largura, com limite de leitura
para a linha nao ficar longa demais no desktop. */
.jp-week{grid-template-columns:1fr !important;--altura-week:auto}
.jp-week__col{height:auto !important;max-width:860px;margin-inline:auto;width:100%}
/* ---------- 45. Atributos da saida em pastilhas ---------------------------- */
/* Mesmo desenho de selo que a pagina ja usa: cada atributo do pacote vira uma
pastilha na coluna Inclui, em vez de texto corrido separado por ponto. */
.jp-oferta__tags{display:flex;flex-wrap:wrap;gap:6px}
.jp-oferta__tags i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;
padding:4px 9px;border-radius:var(--radius-full);border:1px solid transparent;
white-space:nowrap;}
.jp-oferta__tags .t-dia{color:#fff;background:var(--taua-green-900);}
.jp-oferta__tags .t-azul{color:#fff;background:#0B5ED7}
.jp-oferta__tags .t-verde{color:var(--taua-green-900);background:#DFF0E7;border-color:#C7E4D6}
@media(max-width:640px){
.jp-oferta__tab td[data-rot="Inclui"]::before{display:block;margin-bottom:5px}
}
/* ---------- 46. Fio entre as datas de um mesmo grupo ----------------------- */
/* Grupo com mais de uma data ganha fio entre elas, como entre os grupos. */
.jp-oferta__tab tbody tr + tr > td{border-top:1px solid var(--border-subtle);padding-top:16px}
@media(max-width:640px){
.jp-oferta__tab tbody tr + tr{border-top:1px solid var(--border-subtle);padding-top:14px}
.jp-oferta__tab tbody tr + tr > td{border-top:0;padding-top:3px}
/* ---------- 47. Acordeao no mobile: alinhamento e pastilhas em linha ------- */
/* As tres pastilhas passavam de 300px e quebravam em duas linhas. Aqui elas
ficam um pouco menores e em linha unica; se ainda faltar espaco em telas de
320px, a faixa desliza no lugar de quebrar. */
.jp-oferta__tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:2px;
}
.jp-oferta__tags::-webkit-scrollbar{display:none}
.jp-oferta__tags i{padding:4px 9px;letter-spacing:.01em}
/* respiro igual dos dois lados, senao o botao centralizado sai do centro
da pagina; o recuo que alinha as datas com o titulo vai nas celulas */
.jp-oferta__tab tr{padding:12px 16px 16px}
.jp-oferta__tab td{padding:3px 0;line-height:1.5}
.jp-oferta__tab td[data-rot]::before{color:var(--taua-green-900)}
.jp-oferta__tab td:first-child{font-weight:400}
.jp-oferta__tab td:first-child::before,.jp-oferta__tab td:nth-child(2)::before{font-weight:700}
.jp-oferta__tab .tds-btn{font-size:11px}
/* respiro igual dos dois lados: o botao central fica no centro da pagina.
O recuo do texto vai no span, para nao mover o botao. */
.jp-ofertas__faixa{font-size:15px;line-height:1.35;padding:15px 16px}
}
/* em 360px e abaixo as tres pastilhas ainda somavam mais que a caixa */
@media(max-width:379px){
.jp-oferta__tags i{padding:3px 7px}
}
/* ---------- 48. Check-in e check-out em duas colunas (mobile) -------------- */
/* No celular as duas datas ficavam em linhas separadas e o bloco esticava.
Aqui a linha da data e uma grade de duas colunas: check-in a esquerda,
check-out a direita, rotulo acima do valor. Inclui e o botao ocupam a
largura inteira. Vale so no mobile; no desktop segue a tabela. */
@media(max-width:640px){
.jp-oferta__tab tbody tr{display:grid;grid-template-columns:1fr 1fr;align-items:start;
}
.jp-oferta__tab tbody td:nth-child(3),
.jp-oferta__tab tbody td:nth-child(4){grid-column:1/-1}
/* rotulo em cima, valor embaixo: e o que alinha as duas colunas */
.jp-oferta__tab tbody td:nth-child(1)::before,
.jp-oferta__tab tbody td:nth-child(2)::before{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--text-tertiary);font-weight:700
}
.jp-oferta__tab tbody td:nth-child(1),
.jp-oferta__tab tbody td:nth-child(2){font-size:13.5px;color:var(--taua-green-900);font-weight:600}
/* ---------- 49. Abas de desembarque em uma linha (mobile) ------------------ */
/* As tres abas quebravam em duas linhas por causa da segunda linha de texto
(distancia e tempo), que mede mais que o nome do aeroporto. No mobile
a aba fica so com o nome; a informacao de voo fretado e de distancia
continua no painel que abre logo abaixo. */
.jp-porta__tabs{flex-wrap:nowrap;gap:4px}
.jp-porta__tab{flex:1 1 0;min-width:0;padding:10px 8px 9px}
.jp-porta__tab span{display:none}
.jp-porta__tab b{font-size:11px;line-height:1.25;white-space:nowrap}
}
/* ---------- 50. Atributos em uma linha unica (mobile) ---------------------- */
/* O rotulo "Inclui:" ocupava a primeira linha e empurrava as pastilhas para a
segunda. No mobile ele sai: as pastilhas dizem o que esta incluido sem
precisar do rotulo, e assim as tres cabem numa linha em tamanho legivel.
Manter o rotulo exigiria pastilha de 7,5px, que ninguem le. No desktop o
cabecalho "Inclui" da tabela continua. */
@media(max-width:640px){
.jp-oferta__tab tbody td:nth-child(3)::before{display:none}
/* ---------- 51. Resumo de O Resort em 3 linhas no mobile ------------------- */
/* O texto completo continua no HTML, para a busca e para quem quiser ler; no
celular ele aparece cortado em 3 linhas, com botao para abrir. */
.jp-discover__dica.is-cortado{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
overflow:hidden;margin-bottom:8px;
}
.jp-discover__dica.is-cortado.is-aberto{-webkit-line-clamp:unset;overflow:visible}
.jp-discover__mais{display:block;margin:0 auto clamp(18px,2.4vw,28px);cursor:pointer;
background:none;border:0;padding:8px 10px;min-height:40px;
font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--taua-green-700);
text-decoration:underline;text-underline-offset:4px;
}
.jp-discover__mais:focus-visible{outline:3px solid var(--taua-orange-300);outline-offset:2px;border-radius:6px}
/* ---------- 52. Numeros de Acomodacoes em uma linha, centrados (mobile) ---- */
/* Os tres numeros quebravam em duas linhas e ficavam encostados a esquerda.
No mobile a faixa nao quebra, fica centralizada na pagina e a tipografia cai
um ponto para os tres caberem lado a lado. O rotulo pode ocupar duas linhas
de texto: o que importa e os tres numeros ficarem na mesma faixa. */
.jp-stay__meta{flex-wrap:nowrap;justify-content:center;gap:0;
margin-inline:auto;width:100%;
}
.jp-stay__meta div{justify-items:center;text-align:center;gap:3px;
padding-right:12px;margin-right:12px;flex:0 1 auto;min-width:0;
}
.jp-stay__meta b{font-size:17px}
.jp-stay__meta span{line-height:1.25}
/* ---------- 52b. CTA da saida: largura menor e alinhado a direita (mobile) */
/* O botao ocupava a largura inteira e pesava mais que a propria data. Aqui ele
volta a ter a largura do texto e vai para a coluna da direita, alinhado com
a borda direita do bloco de datas logo acima. */
/* o botao volta ao centro: encostado a direita ele ficava desalinhado do
texto do grupo, que e centralizado no mobile */
.jp-oferta__tab tbody td:nth-child(4){grid-column:1/-1;text-align:center;margin-top:14px;
}
.jp-oferta__tab .tds-btn{padding:11px 22px}
/* o aviso de Campinas acompanha o mesmo alinhamento */
/* ---------- 53. CTAs da faixa padronizados (mobile) ------------------------ */
/* O primario tinha largura do texto e o secundario ocupava a linha inteira: os
dois pareciam de categorias diferentes. No mobile os dois ficam com a mesma
largura e a mesma altura, empilhados, que e o formato mais facil de tocar. */
.jp-faixa__acts{flex-direction:column;align-items:center;gap:14px;width:100%}
/* o primario e botao de largura cheia; o secundario volta a ser link com
seta, para a hierarquia entre os dois ficar obvia */
.jp-faixa__acts > .tds-btn{width:100%;min-height:48px;justify-content:center;text-align:center}
.jp-faixa__acts > .link-arrow{width:auto;min-height:44px;background:none;border:0;border-radius:0;padding:4px 0;
color:var(--taua-green-700);justify-content:center;
}
.jp-faixa__acts > .link-arrow svg{color:currentColor}
/* ---------- 54. Rotulo de secao centralizado (mobile) ---------------------- */
/* O `.eyebrow` e inline-flex: `justify-content:center` centraliza o conteudo
dentro dele, nao ele dentro da secao. No mobile ele vira flex de bloco, entao
ocupa a largura e o conteudo fica no centro, alinhado com o H2 e o apoio.
Vale para os oito rotulos, sem depender da classe do container. */
.eyebrow{display:flex;justify-content:center;width:100%}
/* ---------- 55. Abas do FAQ distribuidas em 2x2 (mobile) ------------------- */
/* As quatro abas somam mais que a largura da tela e quebravam com a ultima
sozinha e centralizada, parecendo erro. Aqui elas dividem a largura em duas
por linha: duas linhas simetricas, mantendo o desenho de aba. */
.jp-faq__tabs{flex-wrap:wrap;justify-content:center;gap:4px}
.jp-faq__tab{flex:1 1 calc(50% - 4px);min-width:0;
justify-content:center;text-align:center;padding:11px 6px 10px;
}
/* ---------- 56. Sustentabilidade no mobile: carrossel e foto --------------- */
/* Os cards vizinhos apareciam cortados no meio da palavra nas duas bordas, o
que le como layout quebrado. A mascara faz eles desaparecerem na borda em
vez de serem cortados. A foto tambem perde um pouco de forca atras do texto:
e um retrato, e retrato atras de paragrafo compete com a leitura. */
.jp-esg__list{-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.jp-esg__media{opacity:.5}
/* ---------- 57. CTAs das saidas na mesma largura dos outros (mobile) ------- */
/* No resto da pagina o botao primario do mobile ocupa a largura do bloco. Aqui
ele estava com a largura do texto (112px) e destoava. Passa a ocupar a
largura, como a faixa de conversao e o CTA do hero. */
.jp-oferta__tab tbody td:nth-child(4){justify-self:stretch}
.jp-oferta__tab .tds-btn{width:100%;min-height:46px}
/* ---------- 58. Sustentabilidade no mobile: foto so na metade de cima ------ */
/* A foto e um retrato e ficava atras de tudo, inclusive dos cards de 12px.
No mobile ela passa a ocupar so a metade de cima da secao, atras do titulo,
e a metade de baixo fica no verde solido, onde os pilares sao lidos. O
degrade fecha a emenda: leve no alto, solido no fim da foto. */
/* corte vertical: a foto ocupa a metade esquerda e some na metade direita.
O degrade corre da esquerda para a direita, entao a emenda no meio nao tem
linha visivel. */
.jp-esg__media{inset:0 auto 0 0;width:52%;height:100%}
.jp-esg__media::after{background:linear-gradient(to right,
rgba(1,58,47,.70) 0%,
rgba(1,58,47,.74) 46%,
rgba(1,58,47,.92) 84%,
rgba(1,58,47,1) 100%);
}
.jp-esg__media img{object-position:56% 45%}
/* ---------- 59. Selo da Localizacao centralizado (mobile) ------------------ */
/* No celular o selo encostado no canto esquerdo brigava com a borda
arredondada da foto. Aqui ele fica centrado na largura da imagem, na faixa
de ceu, que e a parte mais limpa da foto para um bloco branco. */
.jp-loc__badge{left:50%;right:auto;transform:translateX(-50%);
text-align:center;justify-items:center;
max-width:calc(100% - 28px);
}
}
/* ---------- 60. Faixa clara antes do rodape -------------------------------- */
/* Substitui a newsletter: altura minima para o arco do rodape (que chega a
104px) caber, com um respiro pequeno. */
.jp-prefooter{background:var(--surface-base);
height:clamp(96px,10.4vw,168px);}
/* ---------- 61. Saidas no mobile: colunas na largura do CTA ---------------- */
/* O recuo de 20px nas celulas fazia o texto comecar 20px depois da borda do
botao: data e pastilhas pareciam de outro bloco. Aqui as celulas perdem o
recuo e passam a comecar e terminar exatamente onde o CTA comeca e termina.
O respiro entre as duas colunas e entre os blocos da linha tambem sobe, para
check-in e check-out nao lerem como um texto unico. */
@media(max-width:640px){
.jp-oferta__tab tbody td:nth-child(1),
.jp-oferta__tab tbody td:nth-child(2),
.jp-oferta__tab tbody td:nth-child(3){padding-left:0}
.jp-oferta__tab tbody tr{gap:4px 20px}
.jp-oferta__tab tbody td:nth-child(3){margin-top:16px}
.jp-oferta__tab .tds-btn{margin-top:12px}
/* ---------- 62. Vidro da foto de Acomodacoes ------------------------------- */
/* A foto nova e a piscina de borda infinita: ceu claro e agua clara onde antes
havia deck escuro. Medido pixel a pixel, o texto branco e os numeros amarelos
caiam para 2,2:1 no celular, abaixo do minimo da WCAG. O vidro verde fica
mais fechado na faixa do texto e abre na parte de baixo, onde so ficam os
cards brancos, para a piscina continuar aparecendo. */
.jp-stay__bg::after{background:linear-gradient(180deg,
rgba(1,58,47,.93) 0%,
rgba(1,58,47,.88) 36%,
rgba(1,58,47,.62) 58%,
rgba(1,58,47,.55) 100%);
}
}
/* ---------- 63. Zoom da foto de Acomodacoes (tablet e desktop) ------------- */
/* No mobile a foto ja aparece bem enquadrada; nas telas largas ela ficava
pequena demais e a piscina se perdia. Aqui ela cresce um pouco, com o ponto
de origem na piscina, e o mobile fica como esta. */
@media(min-width:641px){
.jp-stay__bg img{transform:scale(1.18);transform-origin:34% 56%}
}
/* ---------- 64. Bloco da faixa final mais para baixo (mobile) -------------- */
/* Centralizado na vertical, o texto ficava no alto da foto e sobrava praia
vazia embaixo. No celular ele desce para o terco inferior, sobre a faixa de
areia, que e a parte mais limpa da imagem. */
@media(max-width:640px){
.jp-final{align-items:end;padding-bottom:clamp(48px,8vw,72px)}
/* descendo, o texto passou a cair sobre a espuma branca da onda: medido, o
rotulo caia para 3,1:1. Um vidro vertical fecha a metade de baixo, onde o
bloco agora fica, sem tocar no alto da foto. */
.jp-final__media::after{background:
linear-gradient(180deg,
rgba(1,48,39,0) 22%,
rgba(1,48,39,.40) 44%,
rgba(1,48,39,.52) 70%,
rgba(1,48,39,.52) 100%),
radial-gradient(78% 78% at 50% 52%,rgba(1,48,39,.50) 0%,rgba(1,48,39,.82) 100%);
}
/* ---------- 65. Menu do celular: canto e rodape ---------------------------- */
/* O canto arredondado do painel deixava a pagina branca aparecer num pedaco de
34px no alto a esquerda, que lia como falha de desenho. No celular o painel
encosta reto no topo. E o rodape com os botoes deixava de estar preso na base
da tela: ele passa a seguir a lista, com respiro curto. */
.jp-drawer__panel{border-radius:0;padding:18px 22px 22px}
.jp-drawer__foot{margin-top:18px}
/* ---------- 66. Check-in e check-out em uma linha cada (mobile) ------------ */
/* Estavam em duas colunas com o rotulo em cima do valor, ou seja, quatro
linhas para duas informacoes. Aqui cada um ocupa a largura e o rotulo fica na
mesma linha da data: "CHECK-IN: 24/10/2026". Em duas colunas isso nao caberia
(a coluna mede 147px e o texto pede ~150px). */
.jp-oferta__tab tbody td:nth-child(1),
.jp-oferta__tab tbody td:nth-child(2){grid-column:1/-1;white-space:nowrap}
.jp-oferta__tab tbody td:nth-child(1)::before,
.jp-oferta__tab tbody td:nth-child(2)::before{display:inline;margin-bottom:0;margin-right:6px;
}
/* ---------- 67. Check-in e check-out na mesma linha (mobile) --------------- */
/* Com o rotulo em linha, o par mede ~130px de cada lado: os dois cabem na
mesma linha dentro dos 313px do bloco. Abaixo de 360px nao cabe (sobram
246px), e ai eles voltam a ficar um em cada linha. */
.jp-oferta__tab tbody td:nth-child(1){grid-column:1}
.jp-oferta__tab tbody td:nth-child(2){grid-column:2;margin-top:0}
}
@media(max-width:359px){
.jp-oferta__tab tbody td:nth-child(1),
.jp-oferta__tab tbody td:nth-child(2){grid-column:1/-1}
.jp-oferta__tab tbody td:nth-child(2){margin-top:2px}
}
/* ---------- 68. Pastilhas na largura do CTA (mobile) ----------------------- */
/* As tres pastilhas terminavam antes da borda direita do botao e a linha ficava
curta em relacao ao resto do bloco. O vao entre elas passa a ser o que sobra
da largura: a primeira encosta na esquerda e a ultima na direita, no mesmo
alinhamento do CTA e das datas. */
@media(max-width:640px){
.jp-oferta__tags{justify-content:space-between;gap:6px}
}
/* abaixo de 380px as tres pastilhas ja nao cabem e a linha vira um trilho que
rola: ai nao ha sobra para distribuir, e elas voltam a ficar colada a
esquerda, como antes. */
@media(max-width:379px){
.jp-oferta__tags{justify-content:flex-start;gap:4px}
}
/* ---------- 69. Datas nas duas bordas do bloco (mobile) -------------------- */
/* Mesma ideia das pastilhas: o check-in encosta na esquerda e o check-out na
direita, nas mesmas bordas do CTA. Abaixo de 360px eles estao um em cada
linha, e ai o alinhamento a direita nao faz sentido. */
@media(min-width:360px) and (max-width:640px){
.jp-oferta__tab tbody td:nth-child(2){text-align:right}
}
/* ---------- 70. Piso de legibilidade e alvos de toque (mobile) ------------- */
/* Varredura em 320px encontrou 44 textos visiveis abaixo de 11px, alguns em 9px,
e alvos de toque de 18 a 29px de altura. Aqui o celular ganha um piso: nenhum
texto abaixo de 11px, frase abaixo de 11,5px, e todo controle com pelo menos
32px (o recomendado e 44px; onde o desenho nao permite, a area cresce sem
mudar o que aparece). As restricoes de linha unica pedidas antes seguem
valendo e foram medidas de novo depois deste ajuste. */
@media(max-width:640px){
.jp-facts__i small{font-size:11px}
.jp-oferta__tags i{font-size:11px}
.jp-porta__cred{font-size:11px}
.jp-offer__fine{font-size:11.5px}
.jp-tile__kicker{font-size:11px}
.jp-stay__tab{font-size:11.5px}
.jp-stay__meta span{font-size:10.5px}
.jp-room__flag{font-size:10.5px}
.jp-dish__cap small{font-size:11px}
.jp-dish__tag{font-size:11px}
.jp-loc__badge span{font-size:11.5px}
.jp-faq__tab{font-size:11px}
.jp-stickycta__txt span{font-size:11px}
/* area de toque: o ponto do carrossel continua com 8px de desenho, mas o
botao em volta passa de 24 para 32px */
.jp-dots button{width:32px;height:32px}
main .link-arrow{min-height:40px}
.jp-pkg__faqlink a{min-height:40px;padding:4px 0}
.jp-footer__contact a{display:inline-flex;align-items:center;min-height:40px}
.jp-footer__policy a{display:inline-flex;align-items:center;min-height:40px}
}
@media(max-width:359px){
.jp-porta__tab b{font-size:11px}
}
/* abaixo de 380px a linha das pastilhas ja rola: meio ponto menos para o
trecho escondido ser curto. */
@media(max-width:379px){
.jp-oferta__tags i{font-size:10.5px}
}
/* ---------- 71. Campo de escolha com lista rolavel ------------------------- */
/* O balao de um