/* ==========================================================================
   Weekend Festival 2027 · camada PREMIUM (23/10/2026)
   Carregada por último nas três páginas e no 404. Reversível: tire o <link> e o site volta ao
   estado anterior. Pedido da cliente (reunião de 23/10): "algo mais caro", "azul em vez de branco,
   cara de sofisticação", "explorar o mar azulzinho", pacotes em azul e rosa.

   Direção: HOTEL BOUTIQUE À BEIRA-MAR. Menos brinquedo, mais editorial.
     - Baloo 2 só nos títulos, em peso menor e tracking fechado; Jost leve para o resto; rótulos
       pequenos em caixa alta com espaçamento largo.
     - Raios menores e únicos (4 / 8 / 14 / 18), fios de 1 px, sombras em camadas tingidas de teal.
     - Céu em gradiente (nunca branco chapado), mar profundo (teal) como contraponto, grão sutil.
     - Movimento lento e discreto (ease-expo), tudo desligado em reduced-motion e na pausa.
   Marca intacta: --wk-azul, --wk-laranja, --wk-pink, --wk-pink-forte, --wk-grafite, --wk-teal.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. tokens */
:root {
  /* mar profundo, derivado do teal da marca (#014655) */
  --mar-0: #0b6a82;                 /* raso, onde bate a luz */
  --mar-1: #014655;                 /* o teal da marca */
  --mar-2: #02323f;                 /* fundo */
  --mar-3: #01222c;                 /* abismo */
  --mar: linear-gradient(180deg, var(--mar-0) 0%, var(--mar-1) 34%, var(--mar-2) 78%, var(--mar-3) 100%);
  --mar-texto-2: #cfe6ee;           /* 12,1:1 sobre --mar-2 */

  /* céu e brisa: gradientes dentro do azul e do rosa da cliente, nenhum branco chapado */
  --ceu: linear-gradient(180deg, #d4eefd 0%, #e2f5fe 38%, #e8f7fe 100%);
  --ceu-fundo: linear-gradient(180deg, #e8f7fe 0%, #d9f1fe 60%, #cfeefd 100%);
  --brisa: linear-gradient(180deg, #fcdbe8 0%, #fde6ef 40%, #feecf3 100%);
  --brisa-fundo: linear-gradient(180deg, #feecf3 0%, #fddfea 60%, #fbd5e4 100%);

  /* forma: menor e única */
  --r-etiqueta: 4px;
  --r-controle: 10px;
  --r-foto: 8px;
  --r-midia: 14px;
  --r-cartao: 18px;

  /* hairlines e sombras em camadas, tingidas do teal (luz de cima à esquerda) */
  --fio: rgb(1 70 85 / .14);
  --fio-forte: rgb(1 70 85 / .26);
  --fio-claro: rgb(255 255 255 / .55);
  --sombra-1: 0 1px 1px rgb(1 50 63 / .05), 0 2px 6px -1px rgb(1 50 63 / .06);
  --sombra-2: 0 1px 1px rgb(1 50 63 / .04), 0 4px 10px -2px rgb(1 50 63 / .07), 0 18px 36px -14px rgb(1 50 63 / .18);
  --sombra-3: 0 1px 1px rgb(1 50 63 / .04), 0 8px 16px -4px rgb(1 50 63 / .08), 0 32px 64px -24px rgb(1 50 63 / .28);
  --sombra-foto: 0 2px 4px rgb(1 50 63 / .06), 0 22px 48px -18px rgb(1 50 63 / .38);
  --divisa: var(--fio);
  --wk-linha: var(--fio);

  /* tipo: escala mais contida, tracking mais fechado */
  --t-h1: clamp(2.5rem, 1.4rem + 4.3vw, 5.25rem);
  --t-h2: clamp(2.125rem, 1.35rem + 2.9vw, 3.75rem);
  --t-rotulo: 0.8125rem;
  --track-rotulo: 0.16em;

  /* movimento */
  --ease-seda: cubic-bezier(0.22, 0.8, 0.2, 1);
}

/* ---------------------------------------------------------------- 1. superfícies e grão */
html { background: var(--wk-azul-claro); }
html:has(body[data-page="hospedagem"]) { background: var(--wk-pink-claro); }
body { background-color: var(--fundo-pagina); }
/* o dia em degradê: seções claras ganham profundidade dentro do azul e do rosa; o fundo da página
   fica chapado de propósito (emendas entre seções não aparecem) e a luz vem dos heróis */
.fundo-azul-claro { background-image: linear-gradient(180deg, #e2f5fe 0%, #d8f0fd 50%, #e2f5fe 100%); }
.fundo-pink-claro { background-image: linear-gradient(180deg, #fde6ef 0%, #fde4ee 50%, #fde6ef 100%); }
.heroi:not(.mare--laranja) {
  background-image:
    linear-gradient(180deg, transparent 62%, var(--fundo-pagina) 100%),
    radial-gradient(60% 70% at 88% 12%, rgb(65 187 250 / .22), transparent 70%),
    radial-gradient(40% 50% at 6% 75%, rgb(251 46 128 / .06), transparent 70%);
}
body[data-page="hospedagem"] .heroi {
  background-image:
    linear-gradient(180deg, transparent 62%, var(--fundo-pagina) 100%),
    radial-gradient(60% 70% at 88% 10%, rgb(251 46 128 / .16), transparent 70%),
    radial-gradient(40% 50% at 6% 75%, rgb(65 187 250 / .16), transparent 70%);
}
/* grão: camada fixa, sem evento, 9% em overlay, neutro no tom médio (quebra a cara de vetor chapado) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-selo);
  pointer-events: none;
  opacity: .09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='.33 .33 .33 0 0  .33 .33 .33 0 0  .33 .33 .33 0 0  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------- 2. tipografia */
/* Baloo 2 só nos títulos, em 700 e 600; a redondeza some do corpo e dos rótulos */
h1, .t-h1 { font-weight: 600; letter-spacing: -0.032em; line-height: 1.02; }
h2, .t-h2 { font-weight: 600; letter-spacing: -0.028em; line-height: 1.05; }
h3, .t-h3 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.16; }
.lead { font-weight: 300; letter-spacing: 0.002em; color: var(--texto-2); }
body { font-weight: 400; letter-spacing: 0.002em; }
.legenda { font-size: 0.875rem; letter-spacing: 0.04em; color: var(--texto-2); }
/* rótulo: Jost 600, caixa alta, espaço largo (nunca abaixo de 13 px) */
.etiqueta {
  min-height: 28px;
  padding: 0.12em 11px 0;
  border-width: 1px;
  font-family: var(--f-texto);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: var(--track-rotulo);
  line-height: 1;
}
.etiqueta--display { rotate: none; }
.etiqueta--pink-g b { font-weight: 700; }
.heroi--home .heroi__publico,
.heroi__publico {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: var(--track-rotulo);
  color: var(--wk-teal);
  display: flex;
  align-items: center;
  gap: 14px;
}
.heroi__publico::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .6; }
.produto {
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: max(var(--t-produto), 0.9375rem);
}
.produto--cheio { padding: 0.34em 0.8em 0.22em; border-radius: var(--r-etiqueta); font-size: 0.9375rem; letter-spacing: 0.12em; font-weight: 700; }
.produto--fio { border-bottom-width: 1px; padding-bottom: 10px; }
.preco { font-weight: 600; letter-spacing: -0.03em; }
.faq__pergunta, .rodape__titulo { font-weight: 600; letter-spacing: -0.005em; }
.cartaz__n1, .menu__nome, .numero-passo { letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- 3. botões */
.btn {
  min-height: 52px;
  padding: 0.12em 30px 0;
  border: 1px solid transparent;
  border-radius: var(--r-controle);
  font-family: var(--f-texto);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 1px rgb(1 50 63 / .12), 0 8px 18px -8px rgb(1 50 63 / .35);
  transition:
    transform 400ms var(--ease-seda),
    box-shadow 400ms var(--ease-seda),
    background-color 300ms var(--ease-seda),
    border-color 300ms var(--ease-seda),
    color 300ms var(--ease-seda);
}
.btn--p { min-height: 44px; padding-inline: 20px; font-size: 0.8125rem; }
.btn .i { width: 1.15em; height: 1.15em; margin-top: 0; }
.btn--contorno { border-width: 1px; box-shadow: none; }
.btn--grafite { box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 1px rgb(38 36 31 / .2), 0 10px 20px -10px rgb(38 36 31 / .5); }
.btn:active { transform: translateY(1px) scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn--contorno):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 1px rgb(1 50 63 / .12), 0 14px 26px -10px rgb(1 50 63 / .45); text-decoration: none; }
  .btn:not(.btn--seta):hover { text-decoration: none; }
  .btn--contorno:hover { background-color: color-mix(in oklab, currentColor 9%, transparent); }
  .btn--seta:hover .i { translate: 5px 0; }
}
.btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.link { font-weight: 500; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link--solo { letter-spacing: 0.01em; }

/* ---------------------------------------------------------------- 4. navegação em vidro */
.nav {
  background: color-mix(in srgb, var(--fundo-pagina) 74%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--fio);
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset;
}
body[data-nav-estilo="transparente"] .nav:not(.is-solida) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
body[data-ceu="noite"] .nav {
  background: color-mix(in srgb, var(--mar-2) 82%, transparent);
  border-bottom-color: rgb(255 255 255 / .12);
}
.nav__links a { font-weight: 500; letter-spacing: 0.03em; }
@media (min-width: 980px) {
  .nav__links a[aria-current="page"] { text-decoration-thickness: 1px; text-underline-offset: 10px; }
  .nav__links a { transition: opacity 300ms var(--ease-seda); }
  .nav__links:hover a:not(:hover):not([aria-current="page"]) { opacity: .55; }
  .nav__cta { font-size: 0.8125rem; }
}
.nav__menu { border-width: 1px; font-family: var(--f-texto); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------------------------------------------------------------- 5. fotos e vídeo: acabamento de editorial */
.janela, .mosaico__item picture img, .mosaico__midia, .escolha__foto img, .quarto__foto, .festa-foto__img, .lineup-arte__img {
  box-shadow: var(--sombra-foto);
}
.heroi__janela .janela { box-shadow: var(--sombra-foto), 0 0 0 1px rgb(255 255 255 / .55); }
.janela__pausa, .video-sob__tocar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------------------------------------------------------------- 6. revelações lentas */
[data-revela] { transition: opacity 900ms var(--ease-seda), translate 1100ms var(--ease-seda); }
.anima [data-revela]:not(.is-in) { opacity: 0; translate: 0 22px; }
.anima [data-revela="fade"]:not(.is-in) { translate: none; }
@media (prefers-reduced-motion: reduce) {
  [data-revela] { transition: none; }
  .btn, .btn:hover { transition: none; transform: none; }
}
html.is-pausado [data-revela], html.is-pausado .btn { transition: none; }


/* ---------------------------------------------------------------- 7. MAR: ondas, mar profundo, noite marinha */
:root {
  --onda-topo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 46 C160 18 340 16 520 40 S880 74 1080 50 S1360 20 1440 30 V80 H0 Z'/></svg>");
  --onda-baixo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 34 C160 62 340 64 520 40 S880 6 1080 30 S1360 60 1440 50 V0 H0 Z'/></svg>");
  --noite-mar: #02323f;
}
/* a noite deixa de ser grafite: é o mar fundo (mesmo azul-marinho da faixa do herói ao rodapé) */
.fundo-grafite {
  --fundo: var(--noite-mar);
  --texto-2: var(--mar-texto-2);
  background-image: radial-gradient(45% 40% at 88% 45%, rgb(11 106 130 / .30), transparent 100%), radial-gradient(40% 35% at 6% 70%, rgb(65 187 250 / .06), transparent 100%);
}
.mare-bloco--noite { --mare-fundo: var(--noite-mar); --texto-2: var(--mar-texto-2); }
body[data-ceu="noite"] .nav { background: color-mix(in srgb, var(--noite-mar) 84%, transparent); }
.etiqueta--noite { --et-fundo: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .35); }

/* herói da home: a faixa do dock deixa de ser sol chapado e vira mar ao pôr do sol */
.mare-bloco--sol {
  --texto: var(--wk-branco);
  --texto-2: var(--mar-texto-2);
  --foco: var(--wk-branco);
  --mare-fundo:
    radial-gradient(40% 100% at 100% 125%, rgb(251 46 128 / .38), transparent 62%),
    radial-gradient(34% 90% at 0% 125%, rgb(250 143 65 / .3), transparent 62%),
    linear-gradient(180deg, #0b6a82 0%, #014655 52%, #02323f 100%);
}
/* a segunda onda, azul da marca, por trás da primeira: o mar em camadas */
.mare-bloco--sol::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--mare-h);
  transform: translateY(-14px);
  background: linear-gradient(90deg, rgb(65 187 250 / .55), rgb(65 187 250 / .22));
  -webkit-mask: url("/assets/brand/mare.svg") top / 100% var(--mare-h) no-repeat;
  mask: url("/assets/brand/mare.svg") top / 100% var(--mare-h) no-repeat;
}
@media (max-width: 767px) {
  .mare-bloco--sol::before { -webkit-mask-image: url("/assets/brand/mare-m.svg"); mask-image: url("/assets/brand/mare-m.svg"); }
}
.mare__crista path { stroke: #fff; stroke-opacity: .55; stroke-width: 1; }

/* o painel de produto sobre o mar */
.dock__painel {
  border: 1px solid rgb(255 255 255 / .7);
  box-shadow: 0 1px 1px rgb(1 34 44 / .12), 0 14px 28px -12px rgb(1 34 44 / .55), inset 0 1px 0 rgb(255 255 255 / .8);
  transition: transform 500ms var(--ease-seda), box-shadow 500ms var(--ease-seda);
}
.dock__painel--nl { background: linear-gradient(135deg, #fff0f6 0%, #fde1ec 100%); }
.dock__painel--pp { background: linear-gradient(135deg, #e6f6ff 0%, #c6ebfe 100%); }
@media (hover: hover) and (pointer: fine) {
  .dock__painel:hover { transform: translateY(-3px); box-shadow: 0 1px 1px rgb(1 34 44 / .12), 0 24px 40px -14px rgb(1 34 44 / .65), inset 0 1px 0 rgb(255 255 255 / .8); }
}
.dock__preco { font-weight: 500; letter-spacing: -0.005em; }
.dock__seta { box-shadow: 0 6px 14px -4px rgb(1 34 44 / .45), inset 0 1px 0 rgb(255 255 255 / .3); }

/* #lugar: a abertura do mar. Foto sangrada, onda do céu por cima, a imagem se dissolve no mar fundo */
.lugar {
  position: relative;
  --fundo: var(--noite-mar);
  --texto: var(--wk-branco);
  --texto-2: var(--mar-texto-2);
  --foco: var(--wk-azul);
  --link: var(--wk-azul);
  --divisa: rgb(255 255 255 / .18);
  background: linear-gradient(180deg, var(--noite-mar) 0%, var(--noite-mar) 100%);
  color: var(--wk-branco);
  padding-bottom: clamp(72px, 9vw, 140px);
}
.lugar__foto { max-width: none; background: var(--mar-1); position: relative; }
.lugar__foto::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 44%;
  background: linear-gradient(180deg, transparent 0%, rgb(2 50 63 / .75) 62%, var(--noite-mar) 100%);
  pointer-events: none;
}
.lugar__foto img { max-height: none; height: clamp(440px, 78svh, 820px); object-fit: cover; object-position: 30% 45%; }
.lugar__foto::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  z-index: 2;
  height: clamp(36px, 5vw, 72px);
  background: var(--wk-azul-claro);
  -webkit-mask: var(--onda-baixo) bottom / 100% 100% no-repeat;
  mask: var(--onda-baixo) bottom / 100% 100% no-repeat;
}
@media (max-width: 767px) {
  .lugar__foto img { height: auto; aspect-ratio: 4 / 5; max-height: none; }
}
.lugar__trilho { background: transparent; border-radius: 0; position: relative; z-index: 3; }
@media (min-width: 980px) {
  .lugar__trilho { margin: clamp(-150px, -9vw, -90px) 0 0; padding: 0; }
  .lugar__fatos { border-left-color: rgb(255 255 255 / .22); }
}
.lugar__legenda { color: rgb(207 230 238 / .9); }
.lugar__fatos .i { color: var(--wk-azul); }
.lugar__texto { color: var(--mar-texto-2); font-weight: 300; }
.lugar h2 { color: var(--wk-branco); }
.lugar__trilho .link { color: var(--wk-azul); }

/* rodapé: a mesma água, mais fundo, com a onda de entrada */
.rodape {
  position: relative;
  background: linear-gradient(180deg, #014655 0%, #01333f 55%, #01222c 100%);
  padding-top: clamp(104px, 11vw, 160px);
}
.rodape::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: clamp(36px, 5vw, 72px);
  background: var(--noite-mar);
  -webkit-mask: var(--onda-baixo) bottom / 100% 100% no-repeat;
  mask: var(--onda-baixo) bottom / 100% 100% no-repeat;
}
.rodape__titulo { font-family: var(--f-texto); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--wk-azul); margin-bottom: 18px; }
.rodape__legal { border-top-color: rgb(255 255 255 / .14); color: rgb(207 230 238 / .85); letter-spacing: .02em; }
.rodape__bloco p, .rodape__lista li { font-weight: 300; color: var(--mar-texto-2); }
.rodape a:not(.btn) { text-decoration-thickness: 1px; font-weight: 500; }


/* ---------------------------------------------------------------- 8. componentes: cartões, linhas, selos */
:root { --inclina-objeto: -1deg; }
.nossa-praia { position: relative; }
.nossa-praia::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: clamp(36px, 5vw, 72px);
  background: var(--noite-mar);
  -webkit-mask: var(--onda-baixo) bottom / 100% 100% no-repeat;
  mask: var(--onda-baixo) bottom / 100% 100% no-repeat;
}
.nossa-praia { padding-top: calc(var(--secao) + 24px); }

/* comparador: duas colunas de cor, acabamento de cartão */
.comparador tbody th, .comparador tbody tr th { font-weight: 500; letter-spacing: 0.01em; }
.comparador__rotulo, .comparador tbody th { color: var(--wk-grafite-2); }
.comparador__produto .produto { letter-spacing: 0.14em; font-size: 0.9375rem; }
.comparador__produto.comparador__nl { background: linear-gradient(135deg, #e7045f 0%, #c4034d 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); }
.comparador__produto.comparador__pp { background: linear-gradient(135deg, #5cc6fb 0%, #2fb0f2 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45); }
.comparador tbody .comparador__nl { background: linear-gradient(180deg, #fff0f6 0%, #fde3ed 100%); }
.comparador tbody .comparador__pp, .comparador tfoot .comparador__pp { background: linear-gradient(180deg, #e6f6ff 0%, #c9ecfe 100%); }
.escolha__foto img { border-radius: var(--r-midia); }
.comparador .btn { letter-spacing: 0.12em; }

/* seção de alto padrão: título com rótulo e fio */
.cab h2, .escolha__cab h2 { text-wrap: balance; }

/* galeria: fotos com moldura de papel (passe-partout) */
.mosaico__item picture img, .mosaico__midia { border-radius: var(--r-foto); box-shadow: 0 0 0 1px rgb(255 255 255 / .6), var(--sombra-foto); }

/* festas e agenda (noite marinha) */
.agenda__num { font-weight: 500; letter-spacing: -0.04em; }
.agenda__semana { font-family: var(--f-texto); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: var(--track-rotulo); }
.festa__nome { font-weight: 600; letter-spacing: -0.02em; }
.festa { transition: background-color 500ms var(--ease-seda); }
@media (hover: hover) and (pointer: fine) {
  .festa:hover { background-color: rgb(255 255 255 / .04); }
}
.festas-passes .produto--fio { font-size: var(--t-rotulo); letter-spacing: var(--track-rotulo); }

/* cartaz do line-up: papel com fio e luz, nomes mais finos */
.cartaz__papel, .lineup-arte__img {
  border-radius: var(--r-cartao);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 40px 80px -30px rgb(1 12 18 / .75);
}
.cartaz__papel { background-image: radial-gradient(70% 90% at 15% 0%, rgb(255 255 255 / .22), transparent 60%), var(--wk-sol); }
.cartaz__n1 { font-weight: 700; }
.cartaz__n2 { font-weight: 400; }
.cartaz__topo { font-family: var(--f-texto); font-weight: 600; letter-spacing: var(--track-rotulo); text-transform: uppercase; }
.cartaz__letreiro { box-shadow: 0 8px 20px -8px rgb(1 12 18 / .5); }

/* final da home: duas metades, material de seda */
.final__metade--nl { background: linear-gradient(150deg, #e7045f 0%, #c4034d 60%, #a80340 100%); }
.final__metade--pp { background: linear-gradient(150deg, #66cbfc 0%, #41bbfa 55%, #2aa4e6 100%); }
.final__metade .produto { font-size: var(--t-rotulo); letter-spacing: var(--track-rotulo); border-bottom: 1px solid currentColor; padding-bottom: 10px; }
.final__preco b { font-weight: 600; letter-spacing: -0.03em; }

/* FAQ de hotel boutique: fios, perguntas em 600, sinal fino */
.faq__item { transition: background-color 400ms var(--ease-seda); }
.faq__pergunta { padding-block: 22px; font-size: 1.1875rem; }
.faq__sinal { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .faq__item:hover .faq__pergunta { color: var(--link); }
}
.faq__grupo > h3 { font-family: var(--f-texto); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--texto-2); }

/* ---------------------------------------------------------------- 9. hospedagem: hotel boutique */
.hosp-complexo { padding-top: clamp(56px, 7vw, 104px); }
.grupo__cab h3, .grupo__cab .t-h3 { font-family: var(--f-texto); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--wk-pink-escuro); }
.grupo__desde { font-weight: 400; }
.grupo__lista { gap: 0; }
.grupo__lista > li { border-top: 1px solid var(--fio); }
.grupo__lista > li:last-child { border-bottom: 1px solid var(--fio); }
.quarto { border-radius: var(--r-midia); transition: background-color 500ms var(--ease-seda), box-shadow 500ms var(--ease-seda); }
.quarto__linha { min-height: 104px; padding: 14px 14px; }
.quarto__foto { border-radius: var(--r-foto); box-shadow: 0 1px 2px rgb(1 50 63 / .1), 0 10px 20px -10px rgb(1 50 63 / .35); }
.quarto__nome { font-weight: 600; letter-spacing: -0.01em; }
.quarto__preco b { font-weight: 600; letter-spacing: -0.02em; }
.quarto[open], .quarto.is-alvo { background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / .25)); box-shadow: 0 0 0 1px rgb(255 255 255 / .7), var(--sombra-2); }
@media (hover: hover) and (pointer: fine) {
  .quarto:not([open]):not(.quarto--esgotado):hover { background-color: rgb(255 255 255 / .38); }
  .quarto__foto { transition: transform 700ms var(--ease-seda); }
  .quarto__linha:hover .quarto__foto { transform: scale(1.04); }
}
.vitrine__item { border-bottom: 0; }
.vitrine__nome { font-weight: 600; letter-spacing: -0.015em; }
.hosp-vitrine__midia img, .hosp-vitrine__midia .janela, .hosp-vitrine__midia picture img { border-radius: var(--r-midia); }
@media (min-width: 980px) {
  /* a janela do quarto em arco: a porta de hotel */
  .hosp-vitrine__midia, .hosp-vitrine__midia .janela, .hosp-vitrine__midia img { border-radius: 999px 999px var(--r-midia) var(--r-midia); }
}
.conta__partes > .etiqueta { border-radius: var(--r-etiqueta); font-family: var(--f-voz); letter-spacing: 0; text-transform: none; }
.conta__partes > li { rotate: 0deg !important; }
.conta__partes > li:nth-child(even) { translate: 0 3px; }
.ocupa__chip { border-radius: var(--r-controle); }
.ocupa__n { font-weight: 600; }
.hosp-passos__lista .numero-passo, .linha-ponto__n { font-weight: 500; letter-spacing: -0.03em; }
.hosp-fora, .hosp-inclui__cruzado { border: 1px solid var(--fio); border-radius: var(--r-cartao); background: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / .22)); box-shadow: var(--sombra-1); }

/* faixa do mar (hospedagem): foto de ponta a ponta entre duas ondas */
.mar-faixa { position: relative; margin: 0; background: var(--mar-1); }
.mar-faixa { overflow: hidden; }
.mar-faixa img { display: block; width: 100%; height: clamp(340px, 56svh, 600px); object-fit: cover; object-position: 22% 38%; }
.mar-faixa::before, .mar-faixa::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: clamp(32px, 4.5vw, 64px); pointer-events: none; }
.mar-faixa::before { top: -1px; background: #e2f5fe; -webkit-mask: var(--onda-baixo) bottom / 100% 100% no-repeat; mask: var(--onda-baixo) bottom / 100% 100% no-repeat; }
.mar-faixa::after { bottom: -1px; background: var(--wk-pink-claro); -webkit-mask: var(--onda-topo) top / 100% 100% no-repeat; mask: var(--onda-topo) top / 100% 100% no-repeat; }
.mar-faixa figcaption { position: absolute; z-index: 3; left: var(--margem); bottom: calc(clamp(32px, 4.5vw, 64px) + 14px); color: #fff; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: var(--track-rotulo); text-transform: uppercase; text-shadow: 0 1px 12px rgb(1 34 44 / .7); }
.mar-faixa figcaption::before { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; }

/* finais: o fundo do mar guarda uma lembrança da praia */
.hosp-final.fundo-grafite, .secao.fundo-grafite.final {
  background-image:
    linear-gradient(180deg, rgb(2 50 63 / .86) 0%, rgb(2 50 63 / .93) 100%),
    url("/assets/img/home/lugar-lg.webp");
  background-size: cover;
  background-position: 30% 40%;
}

/* ---------------------------------------------------------------- 10. ingressos: bilheteria */
.ingresso { filter: drop-shadow(0 2px 2px rgb(120 50 0 / .18)) drop-shadow(0 28px 36px rgb(120 50 0 / .3)); }
.mare--laranja { --mare-fundo: radial-gradient(60% 90% at 85% 10%, rgb(255 190 120 / .55), transparent 65%), linear-gradient(165deg, #fb9a52 0%, #fa8f41 48%, #f4743f 100%); }
.ingresso__titulo { font-weight: 600; letter-spacing: -0.03em; }
.ingresso__canhoto span { font-family: var(--f-texto); font-weight: 600; letter-spacing: .3em; }
.lote__painel {
  border-top-width: 3px;
  border-radius: var(--r-cartao);
  background: linear-gradient(180deg, #e8f7fe 0%, #d6effd 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .7), var(--sombra-3);
}
.lote__nome { font-family: var(--f-texto); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: var(--track-rotulo); text-transform: uppercase; }
.pulseira { filter: drop-shadow(0 18px 22px rgb(1 50 63 / .28)); }
.pulseira__nome { letter-spacing: -0.02em; }
.pulseira__dia { font-family: var(--f-texto); font-weight: 600; letter-spacing: .12em; }
.festa-foto__img { border-radius: var(--r-midia); }
.festa-foto__titulo { font-weight: 600; letter-spacing: -0.01em; }
.passos__ol .linha-ponto__n, .passos__ol li b { font-weight: 600; }


/* ---------------------------------------------------------------- 11. movimento do mar (só com movimento liberado) */
.lugar__foto, .mar-faixa { overflow: hidden; }
@keyframes wk-mar-zoom { from { transform: scale(1.1) translate3d(0, -2.5%, 0); } to { transform: scale(1.0) translate3d(0, 2.5%, 0); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.is-pausado) .lugar__foto img,
    html:not(.is-pausado) .mar-faixa img { animation: wk-mar-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}

/* ---------------------------------------------------------------- 12. menu do celular: o mar à noite */
.menu {
  --foco: var(--wk-azul);
  --texto: var(--wk-branco);
  --link: var(--wk-azul);
  background:
    radial-gradient(70% 40% at 90% 8%, rgb(11 106 130 / .55), transparent 100%),
    linear-gradient(180deg, #02323f 0%, #01222c 100%);
  color: var(--wk-branco);
}
.menu__pagina { border-bottom-color: rgb(255 255 255 / .16); }
.menu__nome { font-weight: 600; letter-spacing: -0.02em; }
.menu__linha { color: var(--mar-texto-2); font-weight: 300; }
.menu__linha b { color: var(--wk-branco); font-weight: 500; }
.menu__links a { text-decoration-color: rgb(255 255 255 / .3); text-decoration-thickness: 1px; font-weight: 400; }
.menu .btn--contorno, .menu .pausa { color: var(--wk-branco); }
.menu .etiqueta--pink { box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
.menu { --cor-pagina: var(--wk-branco); }

/* /hospedagem: o campo rosa do "Racha o quarto" ganha luz e fundo, sem deixar de ser o único campo cheio da tela */
.mare-bloco--rosa {
  --mare-fundo:
    radial-gradient(50% 90% at 92% 0%, rgb(251 46 128 / .55), transparent 70%),
    linear-gradient(160deg, #e7045f 0%, #c4034d 70%, #a80340 100%);
}
.mare-bloco--rosa .mare__crista path { stroke-opacity: .5; stroke-width: 1; }