/* =====================================================================
FÉRIAS PLAY — folha única
=====================================================================
CONCEITO: "a água que caiu há mil anos".
Caldas Novas é a maior estância hidrotermal do mundo. A chuva infiltra
na Serra de Caldas, desce mais de mil metros, aquece no calor da própria
Terra e volta à superfície entre 37 °C e 57 °C. Esse fenômeno é o que o
site inteiro usa como assinatura: a cor, o ritmo do scroll, o motion e
a copy saem dele. É local, é verdade, e nenhum concorrente da cidade usa.
A RÉGUA (declarada antes da primeira decisão visual):
texto --fs-1 .. --fs-9
espaço --sp-1 .. --sp-10
raio --r-1 .. --r-4, --r-full
duração --d-1 .. --d-4
Número solto em font-size, padding, margin, gap ou border-radius é erro.
A COR nasce da marca e amadurece. O logotipo é azul royal com sol
laranja, seta vermelha e pílula roxa. O site guarda o DNA (água + sol)
e descarta o resto:
- o azul royal vira TEAL PROFUNDO, que é a cor real da água termal
na sombra, e sustenta texto e superfície escura;
- o laranja vira LUZ (âmbar de fim de tarde), e só aparece onde a
pessoa age ou onde o olho precisa ir;
- roxo, vermelho e degradê de marca ficam de fora.
O resultado continua reconhecível como Férias Play e para de parecer
banner de promoção.
===================================================================== */
/* ------------------------------------------------------------------ *
* 1. Fontes — servidas daqui, não do Google.
* Duas conexões externas a menos e nenhum texto invisível esperando
* rede de terceiro. Archivo carrega o título, Instrument Sans o
* corpo, e Literata a ênfase itálica dentro dos títulos.
* ------------------------------------------------------------------ */
/* A ênfase dos títulos. Literata no lugar da Fraunces: a Fraunces tem
eixo de "wonk" e desenho decorativo, que ao lado da Archivo lia como
fonte convidada em vez de parte do mesmo sistema. A Literata foi
desenhada para leitura longa, tem haste grossa e serifa firme, então
aguenta o peso da Archivo sem virar enfeite. Corte itálico de verdade,
com o tamanho óptico já fixado em 36, o que deixou o arquivo em 38 KB. */
@font-face {
font-family: "Literata";
/* 15/09: versão com eixo de tamanho óptico (opsz 12 a 72). A anterior
(literata.woff2) só tinha o corte de texto, que em título fica grosso. */
src: url("../fontes/literata-italic-opsz.woff2") format("woff2");
font-weight: 300 700;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Archivo";
src: url("../fontes/archivo.woff2") format("woff2");
font-weight: 100 900;
font-stretch: 62% 125%;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Instrument Sans";
src: url("../fontes/instrument-sans.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
/* ------------------------------------------------------------------ *
* 2. Tokens
* ------------------------------------------------------------------ */
:root {
/* --- água: o azul da marca. É a cor da piscina termal na luz do
dia, não na sombra, e é o azul do logotipo levado a sério. --- */
--agua-950: #041634;
--agua-900: #06225C;
--agua-800: #0A3A8F;
--agua-700: #0E4FC4;
--agua-600: #1668E8;
--agua-500: #3D8BFF;
--agua-300: #8FBEFF;
--agua-100: #DCEBFF;
/* --- luz: o sol do logotipo. Energia, e onde a pessoa age. --- */
/* O laranja medido dentro da arte da logo, pixel a pixel: é o tom do
sol e do play, e não uma interpretação dele. Existe porque a escala
de luz abaixo foi desenhada como âmbar de fim de tarde, e na headline
isso lia como pôr do sol em vez de marca. Só entra onde a marca
precisa se reconhecer: ênfase do título e selo. */
--laranja-marca: #F87018;
/* 15/09: ênfase de título em fundo claro. O --luz-700 lia marrom; este é o
laranja da logo fechado o mínimo para passar 3:1 (texto grande) no creme. */
--luz-titulo: #EE6A0C;
--luz-800: #8F3A00;
--luz-700: #C44900;
--luz-600: #E85D04;
--luz-500: #FF7A18;
--luz-400: #FF9E3D;
--luz-300: #FFC145;
--luz-200: #FFD9A8;
--luz-100: #FFEFD9;
/* --- mata: o verde da Serra de Caldas. Entrou em 10/09/2026, quando
o corte geológico passou a desenhar a serra como mata e não como
rocha azul. É o único verde da paleta e só existe ali: nenhuma
superfície, nenhum botão e nenhum texto de interface usa. --- */
--mata-900: #052A1B;
--mata-800: #0B4A2E;
--mata-600: #14724A;
--mata-500: #1B7E52;
--mata-300: #6FD3A2;
/* --- turquesa: a água vista de perto. Só acento, nunca área. --- */
--turq-600: #0090A8;
--turq-500: #00B4C8;
--turq-300: #6FE0EC;
--turq-100: #DFF7FA;
/* --- claro: branco quente e creme. O fundo não é frio, porque o
assunto é férias em família, não escritório. --- */
--areia-50: #FFFDFA;
--areia-100: #FFF7ED;
--areia-200: #FCEDDC;
--areia-300: #F2DFC8;
/* --- papéis --- */
--fundo: var(--areia-50);
--fundo-alt: var(--areia-100);
--superficie: var(--branco);
--linha: #EFE3D2;
--linha-forte: #DCC9AE;
--tinta: #0A1B33;
--tinta-2: #3E5578;
--tinta-3: #5A7096;
/* papéis sobre fundo escuro */
--escuro-tinta: #EAF2FF;
--escuro-tinta-2: #A8C4EE;
--escuro-linha: rgba(220, 235, 255, 0.18);
/* --- tipos --- */
--display: "Archivo", "Segoe UI", system-ui, sans-serif;
--corpo: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
--enfase: "Literata", "Iowan Old Style", Georgia, serif;
/* --- texto --- */
--fs-1: 0.75rem;
--fs-2: 0.8125rem;
--fs-3: 0.9375rem;
--fs-4: 1.0625rem;
--fs-5: 1.25rem;
--fs-6: 1.625rem;
--fs-7: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
--fs-8: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
--fs-9: clamp(2.375rem, 1.7rem + 2.6vw, 3.75rem);
/* --- assinatura compacta da marca --- */
--tracking-selo-fino: 0.1em;
--tracking-selo-forte: 0.035em;
--tracking-compacto: 0.025em;
--fs-mini: 0.625rem;
--fs-menu-compacto: 0.875rem;
--sp-compacto: 0.375rem;
/* --- espaço --- */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-7: 3rem;
--sp-8: 4rem;
--sp-9: 6rem;
--sp-10: clamp(4.5rem, 2rem + 9vw, 9rem);
/* --- raio --- */
--r-1: 0.5rem;
--r-2: 0.875rem;
--r-3: 1.5rem;
--r-4: 2.25rem;
--r-full: 999px;
/* --- duração e curva --- */
--d-1: 140ms;
--d-2: 260ms;
--d-3: 520ms;
--d-4: 900ms;
--curva: cubic-bezier(0.22, 1, 0.36, 1);
--curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
/* --- desenho técnico: o corte da água tem escala própria, em
unidades do viewBox, e não a escala de texto da página --- */
--corte-rotulo: 11px;
--corte-valor: 20px;
--marcador-topo: 0.6em;
--corte-descida: 0.16em;
--fio-altura: 3px;
--traco-numero: 0.058em;
--traco-botao: 2px;
/* Só na capa. O fundo dali é água em movimento, cheio de linhas
claras, e um traço de 2px se perde no meio delas. */
--traco-botao-capa: 3px;
--preto: #000000;
--branco: #FFFFFF;
/* --- medidas --- */
--gutter: clamp(1.25rem, 4vw, 3rem);
--pagina: min(1240px, 100% - var(--gutter) * 2);
--leitura: 62ch;
/* --- sombra: quente, nunca cinza-azulada --- */
--sombra-1: 0 1px 2px rgba(12, 43, 49, 0.06), 0 4px 12px rgba(12, 43, 49, 0.05);
--sombra-2: 0 2px 4px rgba(12, 43, 49, 0.05), 0 12px 32px rgba(12, 43, 49, 0.09);
--sombra-3: 0 4px 8px rgba(12, 43, 49, 0.06), 0 28px 64px rgba(12, 43, 49, 0.16);
}
/* ------------------------------------------------------------------ *
* 3. Reset e base
* ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--sp-9);
touch-action: pan-x pan-y;
}
body {
margin: 0;
background: var(--fundo);
color: var(--tinta);
font-family: var(--corpo);
font-size: var(--fs-4);
line-height: 1.6;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img,
picture,
video,
svg { display: block; max-width: 100%; }
/* Ícone inline nasce do tamanho do texto. Sem isso, um SVG sem medida
se estica até o tamanho do contêiner e engole a peça. */
p svg,
span svg,
b svg,
a:not(.botao) svg,
li svg { width: 1.05em; height: 1.05em; flex: none; }
img { height: auto; }
button,
input,
select,
textarea {
font: inherit;
color: inherit;
margin: 0;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--agua-700); text-underline-offset: 0.2em; }
hr {
border: 0;
border-top: 1px solid var(--linha);
margin: var(--sp-7) 0;
}
:focus-visible {
outline: 3px solid var(--luz-500);
outline-offset: 3px;
border-radius: var(--r-1);
}
::selection { background: var(--luz-200); color: var(--agua-900); }
/* ------------------------------------------------------------------ *
* 4. Tipografia
* ------------------------------------------------------------------ */
h1, h2, h3, h4 {
margin: 0 0 var(--sp-4);
font-family: var(--display);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.035em;
font-variation-settings: "wdth" 100;
text-wrap: balance;
}
h1 { font-size: var(--fs-8); }
h2 { font-size: var(--fs-7); }
h3 { font-size: var(--fs-6); letter-spacing: -0.016em; }
h4 { font-size: var(--fs-5); letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
/* O rótulo que abre cada seção. Pequeno, espaçado, com um traço de água
antes: é o que dá ritmo editorial sem precisar de mais um título. */
.rotulo {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: 0 0 var(--sp-4);
font-family: var(--corpo);
font-size: var(--fs-2);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--agua-600);
}
.rotulo::before {
/* 15/09: o traço em degradê virou o sinal da própria logo, o sol nascendo
atrás da onda (luz e água, os dois nomes da paleta). Desenho em
embutido para não depender de arquivo nem de fonte de ícone. */
content: "";
flex: none;
width: 2.1rem;
height: 1rem;
background: url("data:image/svg+xml,") center / contain no-repeat;
}
.rotulo.centro { justify-content: center; }
/* Ênfase dentro de título: a palavra que carrega a promessa.
O peso é 700, o topo do eixo que o arquivo carrega (500 a 700), e não
600. A Archivo do título ao lado é uma grotesca de haste grossa, e a
Literata em 600 chegava fina demais nessa vizinhança: lia como fonte
convidada em vez de parte do mesmo sistema. Em 700 a serifa ganha
corpo e as duas passam a ter o mesmo peso na página.
O `wght` explícito existe porque a fonte é variável: sem ele o
navegador pode escolher a instância padrão do arquivo, que é 500. */
h1 em, h2 em, h3 em {
font-family: var(--enfase);
font-style: italic;
font-weight: 700;
font-variation-settings: "wght" 700;
letter-spacing: -0.015em;
color: var(--luz-titulo);
}
.linha-fina {
max-width: 46ch;
font-size: var(--fs-5);
line-height: 1.5;
color: var(--tinta-2);
}
.texto-apoio { color: var(--tinta-2); max-width: var(--leitura); }
.nota {
font-size: var(--fs-2);
line-height: 1.5;
color: var(--tinta-3);
}
.so-leitor {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ------------------------------------------------------------------ *
* 5. Layout
* ------------------------------------------------------------------ */
.pagina { width: var(--pagina); margin-inline: auto; }
.secao { padding-block: var(--sp-10); }
.secao-curta { padding-block: var(--sp-9); }
/* Sobre qualquer superfície escura, a ênfase do título é luz, nunca
água: o teal do tema claro não tem contraste ali. Uma regra só, para
não depender de lembrar seção por seção. */
.escuro h1 em, .escuro h2 em, .escuro h3 em,
.hero h1 em,
.agua h1 em, .agua h2 em, .agua h3 em,
.convite h1 em, .convite h2 em,
.capa-interna h1 em, .capa-interna h2 em,
.resumo h3 em { color: var(--luz-400); }
/* Superfície escura: a água na sombra. Usada nos momentos em que o site
precisa baixar a luz e prender o olho. */
.escuro {
background: var(--agua-900);
color: var(--escuro-tinta);
}
.escuro h1, .escuro h2, .escuro h3, .escuro h4 { color: var(--escuro-tinta); }
.escuro p { color: var(--escuro-tinta-2); }
.escuro .rotulo { color: var(--agua-300); }
.escuro .linha-fina { color: var(--escuro-tinta-2); }
.escuro a { color: var(--luz-400); }
.escuro h2 em { color: var(--luz-400); }
.claro-alt { background: var(--fundo-alt); }
/* Cabeça de seção: título à esquerda, apoio à direita. Só quando há de
fato duas informações; senão vira moldura vazia. */
.cabeca {
display: grid;
gap: var(--sp-5);
margin-bottom: var(--sp-8);
}
.cabeca-dupla {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: end;
gap: var(--sp-7);
}
.cabeca-dupla > :last-child { padding-bottom: var(--sp-2); }
@media (max-width: 860px) {
.cabeca-dupla { grid-template-columns: 1fr; }
.cabeca-dupla > :last-child { padding-bottom: 0; }
}
/* ------------------------------------------------------------------ *
* 6. Botões
* ------------------------------------------------------------------ */
.botao {
--botao-fundo: var(--agua-700);
--botao-tinta: var(--areia-50);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-5);
border: 1px solid transparent;
border-radius: var(--r-full);
background: var(--botao-fundo);
color: var(--botao-tinta);
font-size: var(--fs-3);
font-weight: 600;
line-height: 1.3;
text-decoration: none;
cursor: pointer;
transition: transform var(--d-1) var(--curva),
box-shadow var(--d-2) var(--curva),
background-color var(--d-2) var(--curva-suave);
will-change: transform;
}
.botao svg { width: 1.05em; height: 1.05em; flex: none; }
.botao:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.botao:active { transform: translateY(0); }
/* A ação principal é a luz: é o único lugar do site onde o âmbar ocupa
área. O texto é a água escura, e o par passa em contraste. */
.botao-sol {
--botao-fundo: var(--luz-500);
--botao-tinta: var(--agua-950);
}
.botao-sol:hover { background: var(--luz-400); }
.botao-contorno {
--botao-fundo: transparent;
--botao-tinta: var(--tinta);
border-color: var(--linha-forte);
}
.botao-contorno:hover { background: var(--superficie); border-color: var(--agua-600); }
.escuro .botao-contorno,
.hero .botao-contorno,
.capa-interna .botao-contorno,
.convite .botao-contorno,
.agua .botao-contorno {
--botao-tinta: var(--escuro-tinta);
border-color: rgba(241, 232, 219, 0.4);
}
.escuro .botao-contorno:hover,
.hero .botao-contorno:hover,
.capa-interna .botao-contorno:hover,
.convite .botao-contorno:hover,
.agua .botao-contorno:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--agua-300);
}
.botao-grande { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-4); }
/* Link de texto com seta que anda no hover. O deslocamento é curto de
propósito: sinaliza direção sem virar truque. */
.link-seta {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-3);
font-weight: 600;
color: var(--agua-700);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--d-2) var(--curva-suave);
}
.link-seta span { transition: transform var(--d-2) var(--curva); }
.link-seta:hover { border-bottom-color: currentColor; }
.link-seta:hover span { transform: translateX(4px); }
.escuro .link-seta { color: var(--luz-400); }
/* ------------------------------------------------------------------ *
* 7. Pílulas e selos
* ------------------------------------------------------------------ */
.pilula {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-3);
border: 1px solid var(--linha);
border-radius: var(--r-full);
background: var(--superficie);
font-size: var(--fs-2);
font-weight: 600;
color: var(--tinta-2);
white-space: nowrap;
}
.pilula svg { width: 0.95em; height: 0.95em; }
.pilula-sol {
border-color: transparent;
background: var(--luz-100);
color: var(--luz-700);
}
.pilula-agua {
border-color: transparent;
background: var(--agua-100);
color: var(--agua-700);
}
.escuro .pilula {
border-color: var(--escuro-linha);
background: rgba(255, 255, 255, 0.05);
color: var(--escuro-tinta-2);
}
/* ------------------------------------------------------------------ *
* 8. Cabeçalho
* ------------------------------------------------------------------ */
.aviso-topo {
padding: var(--sp-2) var(--gutter);
background: var(--agua-900);
color: var(--agua-100);
font-size: var(--fs-2);
text-align: center;
}
.aviso-topo a { color: var(--luz-400); font-weight: 600; }
@media (max-width: 640px) {
.aviso-topo { font-size: var(--fs-1); }
.aviso-topo .so-desktop { display: none; }
}
/* No topo, o header não cria faixa sobre o hero. Depois da rolagem,
a superfície clara aparece translúcida, preservando marca e menu. */
.topo {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 30;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid transparent;
transition: border-color var(--d-2) var(--curva-suave),
background-color var(--d-2) var(--curva-suave);
}
/* A superfície só aparece depois que a página rolou de verdade. */
.topo.rolou {
border-bottom-color: var(--linha);
background: rgba(251, 247, 241, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.topo-interno {
display: flex;
align-items: center;
gap: var(--sp-4);
padding-block: var(--sp-4);
}
/* --- A marca no cabeçalho ------------------------------------------- *
* Só a base comum às três versões. O desenho de cada uma está na
* seção 32, no fim do arquivo, enquanto a escolha não é feita. */
.marca {
display: flex;
align-items: center;
flex: none;
margin-right: auto;
text-decoration: none;
}
.marca-logo { display: block; width: auto; }
.menu {
display: flex;
align-items: center;
gap: var(--sp-5);
}
.menu a {
font-size: var(--fs-3);
font-weight: 600;
color: var(--tinta-2);
text-decoration: none;
transition: color var(--d-1) var(--curva-suave);
}
.menu a:hover { color: var(--agua-700); }
.menu a[aria-current="page"] { color: var(--tinta); }
.menu-botao {
display: none;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-4);
border: 1px solid var(--linha-forte);
border-radius: var(--r-full);
background: var(--superficie);
font-size: var(--fs-3);
font-weight: 600;
cursor: pointer;
}
.menu-botao svg { width: 1.1em; height: 1.1em; }
@media (max-width: 980px) {
.menu-botao { display: inline-flex; }
/* O painel desce do cabeçalho e fica ancorado nele.
Detalhe que custou um bug: `position: fixed` NÃO se resolve contra a
janela quando um ancestral tem `backdrop-filter`, porque o filtro
cria um bloco de contenção. O cabeçalho tem filtro, então o painel
é `absolute` contra ele, que é o comportamento previsível aqui. */
.menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 40;
flex-direction: column;
align-items: stretch;
gap: var(--sp-2);
max-height: calc(100svh - 100%);
overflow-y: auto;
padding: var(--sp-4) var(--gutter) var(--sp-6);
background: var(--superficie);
border-bottom: 1px solid var(--linha);
border-bottom-left-radius: var(--r-3);
border-bottom-right-radius: var(--r-3);
box-shadow: var(--sombra-3);
opacity: 0;
transform: translateY(-10px);
visibility: hidden;
transition: opacity var(--d-2) var(--curva-suave),
transform var(--d-3) var(--curva),
visibility var(--d-3);
}
.menu.aberto { opacity: 1; transform: translateY(0); visibility: visible; }
.menu a {
padding: var(--sp-3) var(--sp-2);
border-bottom: 1px solid var(--linha);
font-size: var(--fs-5);
font-family: var(--display);
font-weight: 600;
}
.menu .botao { margin-top: var(--sp-4); justify-content: center; }
}
.veu-menu {
position: fixed;
inset: 0;
z-index: 28;
background: rgba(7, 34, 41, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity var(--d-2) var(--curva-suave), visibility var(--d-2);
}
.veu-menu.visivel { opacity: 1; visibility: visible; }
.pular {
position: fixed;
z-index: 60;
top: var(--sp-2);
left: var(--sp-2);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--r-1);
background: var(--agua-900);
color: var(--areia-50);
font-size: var(--fs-3);
font-weight: 600;
text-decoration: none;
transform: translateY(-160%);
transition: transform var(--d-2) var(--curva);
}
.pular:focus { transform: translateY(0); }
/* ------------------------------------------------------------------ *
* 9. Hero
*
* A primeira tela não abre com foto de piscina: abre com a água como
* matéria. Fundo escuro de água termal, vapor em movimento lento e o
* corte da Serra de Caldas fechando a base. É o que nenhum concorrente
* da cidade tem, e não depende de foto que ainda não chegou.
* ------------------------------------------------------------------ */
/* O conteúdo ocupa a primeira tela sem prolongar o hero além do necessário. */
.hero {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-start;
min-height: clamp(42rem, 100svh, 58rem);
padding-block: 0;
background: var(--agua-950);
color: var(--escuro-tinta);
overflow: hidden;
}
/* Aqui morava `.hero-fundo`, a moldura da foto de fundo do topo. O hero
deixou de ser foto e virou o canvas de água desenhada (`.hero-agua`),
e essas regras não alcançavam mais nada. */
/* Duas camadas de véu: uma escurece de baixo para cima para o texto ter
base, outra puxa o âmbar do canto, imitando a luz que sobra no fim da
tarde. É o que evita o aspecto de foto com filtro chapado por cima. */
.hero-veu {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(75% 60% at 85% 10%, rgba(61, 139, 255, 0.24), transparent 70%),
radial-gradient(65% 48% at 94% 86%, rgba(248, 112, 24, 0.10), transparent 68%),
linear-gradient(180deg, rgba(4, 22, 52, 0.64) 0%, rgba(4, 22, 52, 0.46) 52%, rgba(4, 22, 52, 0.40) 100%);
}
.hero-conteudo {
position: relative;
z-index: 2;
padding-top: clamp(11rem, 28svh, 18rem);
padding-bottom: var(--sp-10);
}
.hero-local {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin: 0 0 var(--sp-5);
padding: var(--sp-2) var(--sp-4);
border: 1px solid var(--escuro-linha);
border-radius: var(--r-full);
background: rgba(255, 255, 255, 0.06);
font-size: var(--fs-2);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--agua-100);
backdrop-filter: blur(6px);
}
.hero-local svg { width: 1.05em; height: 1.05em; stroke: var(--luz-400); }
/* O símbolo de sol e onda é o mesmo usado nos rótulos do site. */
.hero-sinal {
margin-bottom: var(--sp-5);
color: var(--agua-100);
font-weight: 700;
}
.hero-sinal::before { content: none; display: none; }
.hero-sinal-marca {
flex: none;
width: 2.9rem;
height: 1rem;
overflow: visible;
}
.hero h1 {
max-width: 23ch;
margin-bottom: 0;
font-family: var(--corpo);
letter-spacing: -0.035em;
color: var(--areia-50);
}
.hero-titulo-linha {
display: block;
text-wrap: balance;
font-size: clamp(2.25rem, 1.45rem + 2.5vw, 4rem);
font-weight: 750;
line-height: 1.02;
}
.hero-titulo-mascara {
display: block;
overflow: hidden;
padding-block: .08em;
margin-block: -.08em;
}
.hero h1 em {
display: inline;
margin: 0;
font-family: inherit;
font-style: normal;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
}
.hero h1 .hero-palavra-estadia { color: var(--laranja-marca); }
.hero h1 .hero-palavra-caldas { color: var(--agua-500); }
.hero-apoio {
max-width: 45ch;
margin-top: var(--sp-5);
margin-bottom: 0;
color: var(--agua-100);
font-size: var(--fs-4);
line-height: 1.5;
}
/* O creme da paleta antiga saiu daqui por contraste: sobre o azul-marinho
do hero ele ficava abaixo do mínimo legível. */
.hero .linha-fina { color: var(--escuro-tinta); max-width: 42ch; }
.hero-oficial {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-4);
color: var(--agua-100);
font-size: var(--fs-2);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero-oficial::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: var(--r-full);
background: var(--luz-500);
box-shadow: 0 0 0 0.25rem rgba(255, 122, 24, 0.12);
}
.hero-acoes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-4);
margin-top: var(--sp-6);
}
/* Ações compactas, com área de toque confortável no celular. */
.hero-acoes .botao {
box-sizing: border-box;
width: min(100%, 17rem);
min-height: 3rem;
padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-3);
text-align: center;
}
/* A água continua visível através do fundo escuro, sem disputar com o texto. */
.hero .botao-hero-hoteis {
--botao-fundo: rgba(4, 22, 52, 0.22);
--botao-tinta: var(--agua-300);
border: var(--traco-botao) solid var(--agua-500);
font-size: var(--fs-3);
font-weight: 700;
}
.hero .botao-hero-hoteis:hover,
.hero .botao-hero-hoteis:focus-visible {
--botao-fundo: rgba(4, 22, 52, 0.38);
--botao-tinta: var(--agua-100);
border-color: var(--agua-300);
}
@media (max-width: 560px) {
.hero-acoes { align-items: flex-start; flex-direction: column; gap: var(--sp-3); }
/* espaço para o botão fixo do WhatsApp não cobrir a última ação */
.hero { padding-bottom: var(--sp-10); }
}
/* Entrada da primeira tela independente do modo cinema: aparece também
em celulares onde a camada GSAP pesada é desligada. */
@media (prefers-reduced-motion: no-preference) {
.hero-sinal { animation: hero-acoes-entrada var(--d-3) var(--curva) 80ms both; }
.hero-titulo-linha { animation: hero-entrada var(--d-4) var(--curva) both; }
.hero-titulo-mascara:first-child .hero-titulo-linha { animation-delay: 200ms; }
.hero-titulo-mascara:last-child .hero-titulo-linha { animation-delay: 380ms; }
.hero-apoio { animation: hero-acoes-entrada var(--d-3) var(--curva) 560ms both; }
.hero-acoes { animation: hero-acoes-entrada var(--d-4) var(--curva) 690ms both; }
@keyframes hero-entrada {
from { opacity: 0; transform: translateY(85%); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-acoes-entrada {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
}
@media (prefers-reduced-motion: reduce) {
.hero-sinal,
.hero-titulo-linha,
.hero-apoio,
.hero-acoes { animation: hero-aparecer 160ms ease-out both !important; }
@keyframes hero-aparecer {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* O termômetro do hero: um dado real da cidade, não enfeite. */
.hero-termo {
display: flex;
align-items: baseline;
gap: var(--sp-2);
margin-top: var(--sp-8);
font-size: var(--fs-2);
color: var(--escuro-tinta-2);
}
.hero-termo b {
font-family: var(--display);
font-size: var(--fs-6);
font-weight: 600;
color: var(--agua-300);
font-variant-numeric: tabular-nums;
}
/* Vapor: duas manchas claras que sobem devagar e somem. Roda em
transform e opacity só, e para inteiro em prefers-reduced-motion. */
.vapor {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.vapor i {
position: absolute;
bottom: -20%;
width: 46vmax;
height: 46vmax;
border-radius: var(--r-full);
background: radial-gradient(circle, rgba(140, 196, 205, 0.16), transparent 62%);
filter: blur(28px);
animation: subir 26s var(--curva-suave) infinite;
will-change: transform, opacity;
}
.vapor i:nth-child(1) { left: -8%; animation-delay: -4s; }
.vapor i:nth-child(2) { left: 46%; animation-delay: -14s; animation-duration: 34s; }
.vapor i:nth-child(3) { left: 76%; animation-delay: -22s; animation-duration: 30s; }
@keyframes subir {
0% { transform: translate3d(0, 10%, 0) scale(0.85); opacity: 0; }
22% { opacity: 0.9; }
70% { opacity: 0.5; }
100% { transform: translate3d(6%, -85%, 0) scale(1.25); opacity: 0; }
}
/* A base do hero termina em água escura e o cartão de busca sobe por
cima da junção. A silhueta da serra saiu daqui de propósito: com o
cartão por cima sobrava só a ponta irregular nas laterais. */
/* ------------------------------------------------------------------ *
* 10. Busca
*
* Sobe por cima da junção do hero com o conteúdo. É o controle mais
* importante do site e ganha a única sombra forte da página.
* ------------------------------------------------------------------ */
.busca-wrap {
position: relative;
z-index: 5;
/* Sobe só o suficiente para marcar a passagem entre hero e conteúdo. */
margin-top: calc(var(--sp-6) * -1);
}
/* No celular ele nem sobrepõe: a tela é estreita, o cartão é alto, e
qualquer subida apertaria o fim do hero. Aqui ele desce e vira
o primeiro bloco do conteúdo. */
@media (max-width: 860px) {
.busca-wrap { margin-top: var(--sp-5); }
}
.busca {
padding: var(--sp-5);
border: 1px solid var(--linha);
border-radius: var(--r-3);
background: var(--superficie);
box-shadow: var(--sombra-3);
}
.busca-topo {
display: grid;
gap: var(--sp-4);
margin-bottom: var(--sp-4);
}
.busca-cabeca {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
}
.busca-cabeca strong {
font-family: var(--display);
font-size: var(--fs-5);
font-weight: 700;
}
.busca-cabeca > span { font-size: var(--fs-2); color: var(--tinta-3); }
.busca-linha {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
gap: var(--sp-3);
align-items: end;
}
@media (max-width: 1080px) {
.busca-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.busca-linha .botao { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.busca-linha { grid-template-columns: 1fr; }
}
.busca-nota { margin: var(--sp-4) 0 0; font-size: var(--fs-2); color: var(--tinta-3); }
/* ------------------------------------------------------------------ *
* 11. Campos
* ------------------------------------------------------------------ */
.campo { display: grid; min-width: 0; gap: var(--sp-2); }
.campo > span {
font-size: var(--fs-2);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta-3);
}
.campo input,
.campo select,
.campo textarea {
width: 100%;
min-width: 0;
max-width: 100%;
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--linha-forte);
border-radius: var(--r-1);
background: var(--superficie);
font-size: var(--fs-4);
transition: border-color var(--d-1) var(--curva-suave),
box-shadow var(--d-1) var(--curva-suave);
}
/* Safari no iPhone preserva uma largura intrínseca própria no controle de
data. Os eixos lógico e físico garantem que ele respeite a coluna. */
.campo input[type="date"] {
display: block;
width: 100%;
inline-size: 100%;
min-width: 0;
min-inline-size: 0;
max-width: 100%;
max-inline-size: 100%;
-webkit-appearance: none;
appearance: none;
}
.campo input[type="date"]::-webkit-date-and-time-value {
min-height: 1.5em;
text-align: left;
}
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:hover,
.campo select:hover { border-color: var(--agua-500); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
outline: none;
border-color: var(--agua-600);
box-shadow: 0 0 0 3px var(--agua-100);
}
.campo select {
appearance: none;
padding-right: var(--sp-7);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347666C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-4) center;
background-size: 1.1em;
}
.campo-erro input,
.campo-erro select { border-color: var(--luz-700); }
.recado-erro {
display: block;
margin-top: var(--sp-2);
font-size: var(--fs-2);
font-weight: 600;
color: var(--luz-700);
}
.ajuda { margin: calc(var(--sp-2) * -1) 0 var(--sp-4); font-size: var(--fs-3); color: var(--tinta-2); }
/* Contador de hóspedes: mais rápido no polegar que um select. */
.contador {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--linha-forte);
border-radius: var(--r-1);
background: var(--superficie);
}
.contador b { display: block; font-size: var(--fs-4); }
.contador small { font-size: var(--fs-2); color: var(--tinta-3); }
.contador-botoes { display: flex; align-items: center; gap: var(--sp-3); }
.contador-botoes button {
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--linha-forte);
border-radius: var(--r-full);
background: var(--superficie);
font-size: var(--fs-5);
line-height: 1;
color: var(--agua-700);
cursor: pointer;
transition: background-color var(--d-1) var(--curva-suave),
border-color var(--d-1) var(--curva-suave);
}
.contador-botoes button:hover:not(:disabled) { background: var(--agua-100); border-color: var(--agua-500); }
.contador-botoes button:disabled { opacity: 0.35; cursor: not-allowed; }
.contador-botoes [data-valor] {
min-width: 1.5rem;
text-align: center;
font-size: var(--fs-5);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------------ *
* 12. Faixa de confiança
*
* Responde a pergunta que todo visitante faz e que o site antigo não
* respondia: por que pedir aqui em vez de ligar para o hotel.
* ------------------------------------------------------------------ */
.confianca {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-5);
padding: var(--sp-6) 0;
border-bottom: 1px solid var(--linha);
}
.confianca > div { display: flex; gap: var(--sp-4); }
/* 2,4rem, e não 1,5rem. Em tamanho de marcador de lista o ícone sumia ao
lado do texto; nesse tamanho, dentro do disco logo abaixo, ele vira o
ponto de entrada de cada motivo, que é o papel dele. */
.confianca svg {
width: 2.4rem;
height: 2.4rem;
flex: none;
stroke: var(--agua-600);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.confianca b { display: block; font-size: var(--fs-4); }
.confianca p { margin: var(--sp-1) 0 0; font-size: var(--fs-3); color: var(--tinta-2); }
@media (max-width: 860px) {
.confianca { grid-template-columns: 1fr; gap: var(--sp-4); }
}
/* ------------------------------------------------------------------ *
* 13. Catálogo de hospedagens
*
* O card foi desenhado para os dois estados, e não só para o dia em que
* a foto chegar: sem foto ele mostra a marca d'água da serra e continua
* digno; com foto, a foto assume. Nenhum dos dois estados mente.
* ------------------------------------------------------------------ */
.grade-hoteis {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
gap: var(--sp-5);
}
.grade-hoteis.destaque {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-6);
}
@media (max-width: 860px) {
.grade-hoteis.destaque { grid-template-columns: 1fr; }
}
.cartao {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--linha);
border-radius: var(--r-3);
background: var(--superficie);
transition: transform var(--d-2) var(--curva),
box-shadow var(--d-3) var(--curva),
border-color var(--d-2) var(--curva-suave);
}
.cartao:hover {
transform: translateY(-4px);
border-color: var(--linha-forte);
box-shadow: var(--sombra-2);
}
.cartao-capa {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--agua-800);
}
.cartao-capa img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--d-4) var(--curva);
}
.cartao:hover .cartao-capa img { transform: scale(1.04); }
/* Estado sem foto: mensagem clara sobre uma superfície própria, sem
repetir a logo como marca d'água. */
.capa-vazia {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-3);
padding: var(--sp-4);
background:
radial-gradient(90% 85% at 90% 0%, rgba(61, 139, 255, 0.10), transparent 75%),
linear-gradient(145deg, #F8FAFD, #EAF2FF);
box-shadow: inset 0 0 0 1px rgba(13, 46, 91, 0.09);
}
.capa-vazia .capa-aviso {
max-width: 18ch;
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
text-align: center;
color: var(--agua-900);
}
.cartao-selo {
position: absolute;
z-index: 2;
top: var(--sp-4);
left: var(--sp-4);
}
.cartao-corpo {
display: flex;
flex: 1;
flex-direction: column;
padding: var(--sp-5);
}
.cartao-corpo h3 { margin-bottom: var(--sp-2); font-size: var(--fs-6); }
.cartao-link {
color: inherit;
text-decoration: none;
background-image: linear-gradient(var(--agua-600), var(--agua-600));
background-size: 0% 2px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size var(--d-2) var(--curva);
}
.cartao:hover .cartao-link { background-size: 100% 2px; }
.cartao-local {
display: flex;
align-items: center;
gap: var(--sp-2);
margin: 0 0 var(--sp-3);
font-size: var(--fs-2);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta-3);
}
.cartao-local svg { width: 1.05em; height: 1.05em; flex: none; stroke: var(--agua-600); }
.cartao-texto { font-size: var(--fs-3); color: var(--tinta-2); }
.cartao-tags {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: var(--sp-4);
}
.cartao-pe {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-top: auto;
padding-top: var(--sp-5);
}
.cartao-preco b {
display: block;
font-family: var(--display);
font-size: var(--fs-5);
font-weight: 600;
}
.cartao-preco span { font-size: var(--fs-2); color: var(--tinta-3); }
/* O link que cobre o card inteiro, para o alvo de toque ser o card todo
sem aninhar um link dentro do outro. */
.cartao-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* ------------------------------------------------------------------ *
* 14. A seção da água — o momento alto do site
*
* Um corte do subsolo de Caldas Novas: a chuva entra pela serra, desce
* mil metros, aquece e volta. O traço é desenhado no scroll, e o número
* conta junto. É informação verdadeira virando experiência.
* ------------------------------------------------------------------ */
.agua {
position: relative;
overflow: hidden;
background: var(--agua-950);
}
.agua::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(90% 70% at 20% 0%, rgba(46, 151, 166, 0.22), transparent 60%);
pointer-events: none;
}
.agua .pagina { position: relative; z-index: 2; }
.agua,
.agua h2,
.agua h3 { color: var(--escuro-tinta); }
.agua h2 em { color: var(--luz-400); }
.agua p { color: var(--escuro-tinta-2); }
.agua .rotulo { color: var(--agua-300); }
.agua .linha-fina { color: var(--escuro-tinta-2); }
.agua-grade {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: var(--sp-9);
align-items: center;
}
@media (max-width: 980px) {
.agua-grade { grid-template-columns: 1fr; gap: var(--sp-7); }
}
.agua h2 { max-width: 14ch; }
/* Corte termal minimalista entregue para a Férias Play. O SVG carrega
as cores pelos tokens do próprio site; os fallbacks permanecem no
desenho para que a explicação não desapareça se a folha falhar. */
.fp-corte {
display: block;
width: 100%;
height: auto;
background: var(--agua-950, #041634);
}
.fp-corte text {
font-family: var(--display, "Archivo", "Segoe UI", system-ui, sans-serif);
font-weight: 700;
letter-spacing: 0.08em;
}
.fp-corte .fp-rotulo { font-size: 18px; }
.fp-corte .fp-escala { font-size: 17px; }
.fp-corte .fp-temp {
font-size: 36px;
letter-spacing: 0.02em;
}
/* Sem a camada de movimento, a temperatura continua visível: ela é
informação, não decoração. O GSAP escreve opacity inline ao iniciar. */
.fp-corte [data-el="temp"] { opacity: 1; }
@media (max-width: 640px) {
.fp-corte .fp-rotulo { font-size: 27px; }
.fp-corte .fp-escala { font-size: 26px; }
.fp-corte .fp-temp { font-size: 48px; }
}
.agua-dados {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-5);
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px solid var(--escuro-linha);
}
.agua-dados b {
display: block;
font-family: var(--display);
font-size: var(--fs-6);
font-weight: 600;
color: var(--luz-400);
font-variant-numeric: tabular-nums;
}
.agua-dados span { font-size: var(--fs-2); line-height: 1.4; color: var(--escuro-tinta-2); }
@media (max-width: 620px) {
.agua-dados { grid-template-columns: 1fr; gap: var(--sp-4); }
}
/* ------------------------------------------------------------------ *
* 15. Passos
* ------------------------------------------------------------------ */
.passos {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-5);
counter-reset: passo;
}
@media (max-width: 980px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .passos { grid-template-columns: 1fr; } }
.passo {
position: relative;
padding-top: var(--sp-5);
border-top: 2px solid var(--linha);
transition: border-color var(--d-3) var(--curva-suave);
}
.passo.ativo { border-top-color: var(--luz-500); }
.passo b {
display: block;
margin-bottom: var(--sp-3);
font-family: var(--display);
font-size: var(--fs-2);
font-weight: 600;
letter-spacing: 0.14em;
color: var(--agua-600);
font-variant-numeric: tabular-nums;
}
.passo h3 { margin-bottom: var(--sp-2); font-size: var(--fs-5); }
.passo p { font-size: var(--fs-3); color: var(--tinta-2); }
.escuro .passo { border-top-color: var(--escuro-linha); }
.escuro .passo b { color: var(--agua-300); }
.escuro .passo p { color: var(--escuro-tinta-2); }
/* ------------------------------------------------------------------ *
* 16. Públicos
* ------------------------------------------------------------------ */
.publicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 860px) { .publicos { grid-template-columns: 1fr; } }
.publico {
display: flex;
flex-direction: column;
padding: var(--sp-6);
border: 1px solid var(--linha);
border-radius: var(--r-3);
background: var(--superficie);
}
.publico svg {
width: 2rem;
height: 2rem;
margin-bottom: var(--sp-4);
stroke: var(--agua-600);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.publico h3 { font-size: var(--fs-5); }
.publico p { font-size: var(--fs-3); color: var(--tinta-2); }
.publico ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.publico li {
display: flex;
gap: var(--sp-3);
font-size: var(--fs-3);
color: var(--tinta-2);
}
.publico li::before {
content: "";
width: 6px;
height: 6px;
margin-top: var(--marcador-topo);
flex: none;
border-radius: var(--r-full);
background: var(--luz-500);
}
/* ------------------------------------------------------------------ *
* 17. Extras (ingressos) e dicas
* ------------------------------------------------------------------ */
.extras-grade {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: var(--sp-8);
align-items: center;
}
@media (max-width: 900px) { .extras-grade { grid-template-columns: 1fr; gap: var(--sp-6); } }
.lista-extras { display: grid; gap: var(--sp-3); }
.extra {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-5);
border: 1px solid var(--linha);
border-radius: var(--r-2);
background: var(--superficie);
color: inherit;
text-decoration: none;
transition: transform var(--d-2) var(--curva),
border-color var(--d-2) var(--curva-suave),
background-color var(--d-2) var(--curva-suave);
}
.extra:hover { transform: translateX(4px); border-color: var(--agua-500); background: var(--agua-100); }
.extra h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-4); }
.extra p { margin: 0; font-size: var(--fs-3); color: var(--tinta-2); }
.extra svg { width: 1.25rem; height: 1.25rem; flex: none; stroke: var(--agua-600); fill: none; stroke-width: 1.8; }
.acordeao { display: grid; gap: var(--sp-2); }
.acordeao details {
border: 1px solid var(--linha);
border-radius: var(--r-2);
background: var(--superficie);
overflow: hidden;
transition: border-color var(--d-2) var(--curva-suave);
}
/* Aberto, o cartão ganha um fio da cor da marca na lateral, para o olho
achar de volta qual pergunta está aberta ao rolar a lista. */
.acordeao details[open] {
border-color: var(--agua-500);
box-shadow: inset 3px 0 0 var(--agua-500);
}
.acordeao summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
font-family: var(--display);
font-size: var(--fs-4);
font-weight: 600;
cursor: pointer;
list-style: none;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary i {
position: relative;
width: 1.1rem;
height: 1.1rem;
flex: none;
}
.acordeao summary i::before,
.acordeao summary i::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
border-radius: var(--r-full);
background: var(--agua-600);
transform: translateY(-50%);
transition: transform var(--d-2) var(--curva);
}
.acordeao summary i::after { transform: translateY(-50%) rotate(90deg); }
.acordeao details[open] summary i::after { transform: translateY(-50%) rotate(0deg); }
.acordeao .corpo { padding: 0 var(--sp-5) var(--sp-5); }
.acordeao .corpo p { font-size: var(--fs-3); color: var(--tinta-2); max-width: var(--leitura); }
/* ------------------------------------------------------------------ *
* 18. Convite final
* ------------------------------------------------------------------ */
.convite {
position: relative;
overflow: hidden;
padding-block: clamp(3.5rem, 6vw, 5rem);
background:
radial-gradient(75% 110% at 86% 12%, rgba(61, 139, 255, 0.16), transparent 68%),
linear-gradient(135deg, var(--agua-900), var(--agua-950));
border-top: 1px solid rgba(143, 190, 255, 0.24);
color: var(--escuro-tinta);
text-align: center;
}
.convite .pagina { position: relative; max-width: 54rem; }
.convite h2 { margin-inline: auto; max-width: 18ch; color: var(--areia-50); }
.convite p { margin-inline: auto; max-width: 44ch; color: var(--escuro-tinta-2); }
.convite .botao { margin-top: var(--sp-4); }
/* ------------------------------------------------------------------ *
* 19. Rodapé
* ------------------------------------------------------------------ */
.rodape {
padding-block: var(--sp-7) var(--sp-5);
background: var(--agua-950);
color: var(--escuro-tinta-2);
font-size: var(--fs-3);
}
.rodape-grade {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
gap: var(--sp-5);
padding-bottom: var(--sp-5);
border-bottom: 1px solid var(--escuro-linha);
}
@media (max-width: 900px) { .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (max-width: 560px) {
.rodape-grade { grid-template-columns: 1fr; gap: var(--sp-5); }
.rodape-grade > :nth-child(2) ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--sp-4);
row-gap: 0;
}
}
.rodape h4,
.rodape .rodape-titulo {
margin-bottom: var(--sp-4);
font-family: var(--corpo);
font-size: var(--fs-2);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--agua-300);
}
.rodape img { height: 32px; width: auto; margin-bottom: var(--sp-4); }
.rodape ul { display: grid; gap: var(--sp-1); }
.rodape a { color: var(--escuro-tinta-2); text-decoration: none; }
.rodape a:hover { color: var(--luz-400); }
/* Empilhado, não lado a lado: a linha da Férias Play em cima e a de quem
fez o site embaixo. Lado a lado as duas tinham o mesmo peso visual, e o
crédito competia com a marca do cliente no fecho da página. */
.rodape-fim {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-2);
padding-top: var(--sp-4);
font-size: var(--fs-2);
color: rgba(168, 195, 200, 0.7);
}
.rodape-aviso {
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid var(--escuro-linha);
font-size: var(--fs-2);
line-height: 1.5;
color: rgba(168, 195, 200, 0.68);
}
/* Botão fixo de WhatsApp. Some quando o rodapé aparece, para não cobrir
o próprio contato que está ali embaixo. */
.zap-fixo {
position: fixed;
z-index: 25;
right: var(--sp-4);
bottom: var(--sp-4);
/* 15/09: azul da marca em vez do laranja de ação, e menor. O contorno claro
separa o botão das seções azuis, onde ele sumiria. */
gap: 0.4rem;
min-height: 40px;
padding: 0.45rem 0.95rem;
font-size: 0.82rem;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), var(--sombra-3);
transition: transform var(--d-3) var(--curva), opacity var(--d-2) var(--curva-suave);
}
.zap-fixo.escondido { transform: translateY(150%); opacity: 0; }
/* ------------------------------------------------------------------ *
* 20. Páginas internas
* ------------------------------------------------------------------ */
.capa-interna {
position: relative;
padding-block: var(--sp-9) var(--sp-8);
background: var(--agua-900);
color: var(--escuro-tinta);
overflow: hidden;
}
.capa-interna::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(80% 110% at 92% 0%, rgba(61, 139, 255, 0.15), transparent 68%),
radial-gradient(60% 100% at 100% 100%, rgba(255, 158, 61, 0.07), transparent 72%);
}
.capa-interna .pagina { position: relative; z-index: 2; }
.capa-interna h1 { max-width: 18ch; font-size: var(--fs-8); color: var(--areia-50); }
.capa-interna h1 em,
.capa-interna h2 em { color: var(--luz-400); }
.capa-interna .linha-fina { color: var(--escuro-tinta-2); }
.capa-interna .rotulo { color: var(--agua-300); }
/* `align-items: center` não é enfeite, é correção de um defeito que
aparecia em toda página interna no celular. Os links da trilha ganham
`min-height: 44px` mais abaixo, por causa do alvo de toque, e passam a
centralizar o próprio texto dentro desses 44 px. As setas e a página
atual são ``, que o flex esticava para a mesma altura sem
centralizar nada: o texto delas encostava no topo. O resultado era
"Início" uma dúzia de pixels abaixo de "› Hospedagens", na mesma
linha. Centralizar no contêiner acerta os dois de uma vez. */
.trilha {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-5);
font-size: var(--fs-2);
color: var(--escuro-tinta-2);
}
.trilha a { color: var(--agua-300); text-decoration: none; }
.trilha a:hover { color: var(--luz-400); }
.barra-filtro {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-6);
}
.barra-filtro input[type="search"] {
flex: 1 1 16rem;
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--linha-forte);
border-radius: var(--r-full);
background: var(--superficie);
font-size: var(--fs-3);
}
.barra-filtro input[type="search"]:focus {
outline: none;
border-color: var(--agua-600);
box-shadow: 0 0 0 3px var(--agua-100);
}
.barra-filtro button {
padding: var(--sp-2) var(--sp-4);
border: 1px solid var(--linha-forte);
border-radius: var(--r-full);
background: var(--superficie);
font-size: var(--fs-3);
font-weight: 600;
color: var(--tinta-2);
cursor: pointer;
transition: background-color var(--d-1) var(--curva-suave),
color var(--d-1) var(--curva-suave),
border-color var(--d-1) var(--curva-suave);
}
.barra-filtro button[aria-pressed="true"] {
background: var(--agua-700);
border-color: var(--agua-700);
color: var(--areia-50);
}
.contagem { margin: 0 0 var(--sp-5); font-size: var(--fs-3); color: var(--tinta-3); }
/* --- ficha do hotel --- */
.ficha { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
@media (max-width: 980px) { .ficha { grid-template-columns: 1fr; gap: var(--sp-6); } }
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.galeria > * { border-radius: var(--r-2); overflow: hidden; aspect-ratio: 4 / 3; }
.galeria > :first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.painel {
position: sticky;
top: var(--sp-9);
padding: var(--sp-6);
border: 1px solid var(--linha);
border-radius: var(--r-3);
background: var(--superficie);
box-shadow: var(--sombra-1);
}
.painel h3 { font-size: var(--fs-5); }
.painel .botao { width: 100%; margin-top: var(--sp-4); }
.lista-dados { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }
.lista-dados > div {
display: flex;
justify-content: space-between;
gap: var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--linha);
font-size: var(--fs-3);
}
.lista-dados dt { color: var(--tinta-3); }
.lista-dados dd { margin: 0; font-weight: 600; text-align: right; }
/* Quando o dado ainda não foi confirmado, o site diz isso com todas as
letras. É a diferença entre um site honesto e um site que inventa. */
.a-confirmar {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-weight: 600;
color: var(--tinta-3);
}
.a-confirmar::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--r-full);
background: var(--luz-400);
}
/* --- pedido --- */
.pedido { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
@media (max-width: 980px) { .pedido { grid-template-columns: 1fr; } }
.folha {
padding: var(--sp-6);
border: 1px solid var(--linha);
border-radius: var(--r-3);
background: var(--superficie);
}
.folha + .folha { margin-top: var(--sp-4); }
.folha h3 { font-size: var(--fs-5); }
.dupla { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.dupla > * { min-width: 0; }
@media (max-width: 640px) { .dupla { grid-template-columns: minmax(0, 1fr); } }
.resumo {
position: sticky;
top: var(--sp-9);
padding: var(--sp-6);
border: 1px solid var(--agua-700);
border-radius: var(--r-3);
background: var(--agua-900);
color: var(--escuro-tinta);
}
.resumo h3 { color: var(--areia-50); font-size: var(--fs-5); }
.resumo .lista-dados > div { border-bottom-color: var(--escuro-linha); }
.resumo dt { color: var(--escuro-tinta-2); }
.resumo dd { color: var(--areia-50); }
.resumo .botao { width: 100%; }
.resumo .nota { color: rgba(168, 195, 200, 0.7); }
.resumo .pedido-manual[hidden] { display: none; }
.resumo .pedido-manual:not([hidden]) { display: block; margin-top: var(--sp-3); color: var(--areia-50); }
.resumo .pedido-manual textarea { display: block; width: 100%; margin-top: var(--sp-2); font: inherit; }
.resumo [data-manual-whatsapp]:not([hidden]) { display: inline-block; margin-top: var(--sp-3); color: var(--areia-50); text-decoration: underline; }
/* O bloco de valor nasce pensado para fundo claro, e o resumo do pedido é
a única superfície escura do site. Sem estas quatro linhas o número
ficava azul sobre azul-marinho, ilegível.
O número fica em branco, e não no laranja da marca, porque o botão de
enviar logo abaixo já é laranja: dois laranjas juntos disputam o clique. */
.resumo .pedido-preco { border-top-color: var(--escuro-linha); }
.resumo .pedido-preco-rotulo,
.resumo .pedido-preco-valor,
.resumo .pedido-preco-nota { color: var(--escuro-tinta-2); }
.resumo .pedido-preco-valor strong { color: var(--areia-50); }
/* Trilha de progresso do pedido. Marca o que já está preenchido, para a
pessoa ver que falta pouco em vez de encarar um formulário mudo. */
.progresso {
display: flex;
gap: var(--sp-2);
margin-bottom: var(--sp-5);
}
.progresso span {
display: flex;
align-items: center;
gap: var(--sp-2);
flex: 1;
padding-top: var(--sp-3);
border-top: 3px solid var(--linha);
font-size: var(--fs-2);
font-weight: 600;
color: var(--tinta-3);
transition: border-color var(--d-3) var(--curva), color var(--d-3) var(--curva);
}
.progresso span.pronto { border-top-color: var(--luz-500); color: var(--tinta); }
.progresso i {
display: grid;
place-items: center;
width: 1.35rem;
height: 1.35rem;
border-radius: var(--r-full);
background: var(--linha);
font-size: var(--fs-1);
font-style: normal;
color: var(--tinta-2);
transition: background-color var(--d-3) var(--curva);
}
.progresso span.pronto i { background: var(--luz-500); color: var(--agua-950); }
.idades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
/* --- galeria ampliada --- */
.lightbox {
width: min(1000px, 92vw);
padding: 0;
border: 0;
border-radius: var(--r-3);
background: var(--agua-950);
color: var(--escuro-tinta);
}
.lightbox::backdrop { background: rgba(5, 25, 31, 0.86); backdrop-filter: blur(4px); }
.lightbox header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--escuro-linha);
}
.lightbox h2 { margin: 0; font-size: var(--fs-5); color: var(--areia-50); }
.lightbox img { width: 100%; max-height: 68vh; object-fit: contain; background: var(--preto); }
.lightbox figure { margin: 0; }
.lightbox figcaption { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-2); color: var(--escuro-tinta-2); }
.lightbox-controles {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-5);
padding: var(--sp-4);
border-top: 1px solid var(--escuro-linha);
}
.lightbox button {
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--escuro-linha);
border-radius: var(--r-full);
background: transparent;
color: var(--escuro-tinta);
cursor: pointer;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.08); }
/* ------------------------------------------------------------------ *
* 21. Entradas no scroll
*
* Regra: o conteúdo NUNCA é escondido por CSS. Quem entra sem JS, ou
* com JS quebrado, vê a página inteira. A animação é aplicada por JS,
* só quando o elemento aparece, e só em transform e opacity.
* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.vapor { display: none; }
}
/* ------------------------------------------------------------------ *
* 21b. Alvo de toque
*
* Em tela de dedo, todo controle tem no mínimo 44x44. Isso não é
* capricho: o público deste site inclui gente pedindo hospedagem pelo
* celular com uma criança no colo, e alvo pequeno vira toque errado.
*
* Duas regras da casa NÃO foram aplicadas aqui, de propósito:
* - `user-select: none` no body impediria copiar o telefone, o nome
* do hotel ou o endereço, que é coisa que a pessoa faz o tempo todo
* num site de reserva;
* - `maximum-scale=1` no viewport bloquearia o zoom, o que contraria
* a WCAG 1.4.4 e atrapalha justamente quem mais precisa ampliar.
* ------------------------------------------------------------------ */
/* Em qualquer dispositivo, link de navegação tem altura de alvo
confortável: 24 px é o mínimo da WCAG 2.5.8 para ponteiro fino. */
.menu a,
.rodape a,
.trilha a,
.aviso-topo a,
.nota a,
.link-seta {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
}
.rodape li { display: flex; }
/* Em tela de dedo sobe para 44 px. Não é capricho: o público deste site
inclui gente pedindo hospedagem pelo celular com uma criança no colo,
e alvo pequeno vira toque errado.
Duas regras da casa NÃO foram aplicadas aqui, de propósito:
- `user-select: none` no body impediria copiar o telefone, o nome do
hotel ou o endereço, que é coisa que se faz o tempo todo num site
de reserva;
- `maximum-scale=1` no viewport bloquearia o zoom, o que contraria a
WCAG 1.4.4 e atrapalha justamente quem mais precisa ampliar. */
@media (max-width: 980px), (pointer: coarse) {
.menu a,
.rodape a,
.trilha a,
.aviso-topo a,
.nota a,
.link-seta,
.botao,
.acordeao summary,
.extra { min-height: 44px; }
.barra-filtro button,
.barra-filtro input[type="search"] { min-height: 44px; }
.contador-botoes button { width: 2.75rem; height: 2.75rem; }
}
.pular { min-height: 44px; display: inline-flex; align-items: center; }
.contador-botoes button { min-width: 2.25rem; }
/* ------------------------------------------------------------------ *
* 23. A camada de efeito
*
* Nada aqui é necessário para ler ou usar o site. É a diferença entre
* um site correto e um site que se lembra depois, e por isso tudo tem
* caminho de volta: sem WebGL, sem JS ou com movimento reduzido, cada
* peça vira uma versão parada que continua bonita.
* ------------------------------------------------------------------ */
/* --- A água do hero --- */
.hero-agua {
position: absolute;
inset: 0;
z-index: -3;
width: 100%;
height: 100%;
display: block;
/* Este gradiente é o que aparece quando o shader não roda. Não é
"estado de erro": é a versão parada da mesma água. */
background:
radial-gradient(120% 80% at 20% 0%, var(--agua-700), transparent 60%),
radial-gradient(90% 70% at 85% 20%, rgba(0, 180, 200, .55), transparent 55%),
linear-gradient(180deg, var(--agua-800), var(--agua-950));
}
.hero-agua[data-ligada] { background: none; }
/* --- Tipografia monumental --- *
* A palavra da cidade em escala de arquitetura, cortada pelo conteúdo.
* É a assinatura de composição que separa página de cartaz. */
.monumental {
display: block;
margin: 0;
font-family: var(--display);
font-weight: 800;
font-variation-settings: "wdth" 112;
font-size: clamp(4rem, 19vw, 17rem);
line-height: 0.82;
letter-spacing: -0.05em;
text-transform: uppercase;
white-space: nowrap;
user-select: none;
pointer-events: none;
}
.monumental-contorno {
color: transparent;
-webkit-text-stroke: 1px var(--escuro-linha);
}
.monumental-fantasma { color: rgba(255, 255, 255, .045); }
/* A faixa que desliza devagar contra o scroll. Com a linha do tempo
nativa isso roda fora da thread principal, sem custo de JS. */
.faixa { will-change: transform; }
@supports (animation-timeline: view()) {
.faixa-nativa {
animation: deslizar linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes deslizar {
from { transform: translate3d(4%, 0, 0); }
to { transform: translate3d(-6%, 0, 0); }
}
}
/* --- Ímã --- */
[data-ima] { transition: transform var(--d-3) var(--curva); }
/* --- Transição entre páginas --- */
@media (prefers-reduced-motion: no-preference) {
.com-transicao::view-transition-old(root) {
animation: sair var(--d-2) var(--curva-suave) both;
}
.com-transicao::view-transition-new(root) {
animation: entrar var(--d-3) var(--curva) both;
}
@keyframes sair { to { opacity: 0; transform: translateY(-8px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
}
/* --- Revelação por scroll, nativa quando existir --- *
* Substitui o observador em JavaScript nos navegadores que já sabem
* fazer isso sozinhos, o que tira trabalho da thread principal. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
[data-entra] {
animation: surgir linear both;
animation-timeline: view();
animation-range: entry 0% entry 42%;
}
@keyframes surgir {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
}
}
.nota-agua { color: var(--escuro-tinta-2); opacity: .82; }
/* "Caldas Novas" ao fundo do topo. O `.hero` já é `position: relative`
no bloco dele, lá em cima.
O TAMANHO É MEDIDO, não estimado: a palavra ocupa cerca de 8,6 vezes o
corpo da fonte e anda 45 px para cada lado com a rolagem, e as duas
coisas somadas têm que caber na tela. Com a régua anterior o nome saía
pela borda e sobrava um pedaço picado, que não lê como recorte de
design, lê como defeito.
O convite final mantém a assinatura no rodapé, sem repeti-la atrás da ação. */
.hero .monumental {
position: absolute;
left: 50%;
bottom: clamp(-1rem, -2vw, 0rem);
transform: translateX(-50%);
z-index: -1;
font-size: min(9.6vw, 10rem);
}
@media (max-width: 860px) {
.hero .monumental { bottom: auto; top: var(--sp-8); opacity: .5; }
}
/* Na tela estreita as duas faixas gigantes saem de cena, e isso é
decisão, não esquecimento. "Caldas Novas" precisa de cerca de 8,6
vezes o corpo da fonte para caber, e ainda anda 45 px para cada lado
com a rolagem: em 360 px de largura não existe tamanho que caiba
inteiro e ainda leia como palavra. Cortada, ela vira defeito. Aqui
morava um `.monumental { font-size: ... }` que nunca chegou à tela,
porque `.hero .monumental` tem especificidade maior. */
@media (max-width: 640px) {
.hero .monumental { display: none; }
}
/* ------------------------------------------------------------------ *
* 22. Impressão — a proposta costuma ser impressa ou virar PDF.
* ------------------------------------------------------------------ */
@media print {
/* `.hero-agua` no lugar de `.hero-fundo`: quem some na impressão é o
canvas de água, que sai como um retângulo azul chapado gastando
tinta. O nome antigo apontava para uma peça que não existe mais. */
.topo, .aviso-topo, .zap-fixo, .hero-agua, .hero-veu, .vapor, .menu-botao { display: none !important; }
body { background: var(--branco); color: var(--preto); }
.escuro, .agua, .convite, .capa-interna { background: var(--branco) !important; color: var(--preto) !important; }
}
/* ------------------------------------------------------------------ *
* 24. Ajustes de interação
*
* O que sobrou de uma rodada anterior e continua fazendo sentido, agora
* dentro da régua. O resto do bloco antigo saiu: apontava para peças
* que não existem mais (`.hero-fundo img`, `.mapa-ativar`), porque o
* hero virou canvas e o mapa passou a carregar sob demanda.
* ------------------------------------------------------------------ */
.menu .botao-sol,
.menu .botao-sol:hover { color: var(--botao-tinta); }
.zap-fixo.escondido { pointer-events: none; visibility: hidden; }
/* Campo e resumo não podem estourar a largura em tela estreita. */
.pedido > * { min-width: 0; }
.progresso { flex-wrap: wrap; }
.lista-dados dd { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 400px) {
.pedido { grid-template-columns: minmax(0, 1fr); }
.pedido .folha,
.pedido .resumo { padding: var(--sp-5); }
.progresso { gap: var(--sp-3); }
}
/* O marcador da lista alinha oticamente com a primeira linha do texto. */
.publico li::before { margin-top: var(--marcador-topo); }
/* =====================================================================
* 25. A CAMADA DE CINEMA
*
* O que o GSAP precisa do CSS para funcionar. Tudo aqui é estrutura,
* nunca aparência: nenhuma regra desta seção esconde conteúdo, e a
* página inteira continua legível se o JavaScript não rodar.
* ===================================================================== */
/* A linha recortada do título. A máscara que a esconde é criada pelo
próprio GSAP; o que falta é o respiro embaixo, senão a perna do "g"
e a cedilha do "ç" ficam decepadas pela borda do corte. */
.linha-corte {
padding-bottom: var(--corte-descida);
margin-bottom: calc(var(--corte-descida) * -1);
}
/* Enquanto a rolagem com peso está ligada, o navegador não deve
também tentar suavizar por conta própria: as duas juntas brigam. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* O fio que mede a página. Fica no alto, com 3px, e é a única coisa
fixa além do cabeçalho. Não anuncia nada por áudio: é redundante
com a barra de rolagem, que o leitor de tela já conhece. */
.fio-progresso {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--fio-altura);
z-index: 60;
transform: scaleX(0);
transform-origin: left center;
background: linear-gradient(90deg, var(--luz-600), var(--luz-300));
pointer-events: none;
}
/* O véu do hero começa parcialmente aberto e fecha conforme a página
desce. Sem um ponto de partida declarado o GSAP não tem de onde
animar, e o valor final some no primeiro quadro. */
.cinema .hero-veu { opacity: 0.82; }
/* Enquanto o cursor puxa o botão, a sombra não deve acompanhar o
deslocamento: sombra que anda junto denuncia o truque. */
.cinema [data-ima] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
.fio-progresso { display: none; }
}
/* Experimento de hero acessível por ?hero=referencia. O gradiente também
compõe uma versão parada quando WebGL ou movimento não está disponível. */
.hero-referencia .hero { background: #051636; }
.hero-referencia .hero-agua {
background:
radial-gradient(115% 70% at 5% 112%, transparent 58.5%, rgba(255, 122, 24, .42) 59.2%, transparent 60.4%),
radial-gradient(125% 92% at 4% -18%, transparent 64%, rgba(255, 139, 55, .34) 64.6%, rgba(67, 144, 255, .40) 65.2%, transparent 66.4%),
radial-gradient(65% 48% at 85% 18%, rgba(34, 107, 235, .42), transparent 75%),
radial-gradient(95% 35% at 65% 100%, rgba(14, 91, 194, .58), transparent 75%),
linear-gradient(164deg, #061934, #0b2860 62%, #051631);
}
.hero-referencia .hero-agua[data-ligada] { background: none; }
.hero-referencia .hero-veu {
background:
radial-gradient(72% 60% at 68% 80%, rgba(18, 91, 205, .08), transparent 75%),
linear-gradient(180deg, rgba(3, 13, 35, .10), rgba(3, 13, 35, .05) 56%, rgba(3, 13, 35, .02));
}
.hero-referencia .hero-veu::after {
background: linear-gradient(100deg,
rgba(3, 15, 38, .72) 0%, rgba(3, 15, 38, .49) 31%,
rgba(3, 15, 38, .08) 62%, transparent 78%);
}
@media (max-width: 860px) {
.hero-referencia .hero-veu::after {
background: linear-gradient(180deg,
rgba(3, 15, 38, .34) 0%, rgba(3, 15, 38, .52) 54%,
rgba(3, 15, 38, .22) 76%, rgba(3, 15, 38, .04) 100%);
}
}
/* O rótulo perde peso e ganha respiro. O sinal continua sendo o sol sobre
a onda da marca, redesenhado com hastes finas para parecer um filete. */
.hero-referencia .hero-sinal {
gap: .8rem;
margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
font-size: clamp(.68rem, .63rem + .14vw, .78rem);
font-weight: 500;
letter-spacing: .21em;
/* Com a água subindo até o alto, este rótulo passou a ter cáustica clara
por trás, e medido caía a 3,4:1 nos pontos de brilho, abaixo do mínimo
legível. A saída é dar sombra à letra, não escurecer a água: o brilho
é justamente o que se pediu para manter. */
color: rgba(228, 240, 255, .97);
text-shadow: 0 1px 2px rgba(2, 13, 36, .62), 0 0 12px rgba(2, 13, 36, .78);
}
.hero-referencia .hero-sinal-marca {
width: 3.25rem;
height: 1rem;
opacity: .96;
}
/* A linha sobe primeiro; as duas palavras de marca entram depois por um
corte lateral e assentam com peso. A expansão dura poucos quadros. */
.hero-referencia .hero-titulo-linha {
font-size: clamp(2.25rem, 1rem + 4vw, 5rem);
font-weight: 790;
line-height: .98;
color: #fff;
text-shadow: 0 .035em .12em rgba(1, 10, 31, .42);
}
.hero-referencia .hero h1 .hero-palavra-estadia,
.hero-referencia .hero h1 .hero-palavra-caldas {
display: inline-block;
font-weight: 860;
letter-spacing: -.045em;
transform-origin: 50% 78%;
}
.hero-referencia .hero h1 .hero-palavra-estadia {
color: #FF862E;
text-shadow: 0 0 .2em rgba(132, 46, 0, .58);
}
/* "Caldas" ganhou força em 20/09: o #4F9FFF era claro e lavado demais e
não segurava o par com o laranja, que é uma cor cheia. O azul novo tem
a mesma saturação do laranja ao lado, e continua claro o suficiente
para ficar legível sobre a água escura. */
.hero-referencia .hero h1 .hero-palavra-caldas {
color: #2E93FF;
text-shadow: 0 0 .2em rgba(3, 32, 92, .72);
}
@media (prefers-reduced-motion: no-preference) {
.hero-referencia .hero-titulo-linha {
animation-name: hero-linha-referencia;
animation-duration: 1.02s;
animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
.hero-referencia .hero-palavra-estadia {
animation: hero-palavra-referencia .88s cubic-bezier(.16, 1, .3, 1) 460ms both;
}
@keyframes hero-linha-referencia {
from { opacity: 0; transform: translate3d(0, 108%, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes hero-palavra-referencia {
0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(0, .24em, 0) scale(.82); }
62% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, -.035em, 0) scale(1.075); }
82% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, .008em, 0) scale(.992); }
100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0) scale(1); }
}
}
@media (prefers-reduced-motion: reduce) {
.hero-referencia .hero-palavra-estadia,
.hero-referencia .hero-palavra-caldas { animation: none !important; }
}
/* =====================================================================
* 26. O HERO DEPOIS QUE A ÁGUA GANHOU LUZ
*
* A cáustica ficou mais clara, e o parágrafo do topo caiu para 3,4:1
* contra o mínimo legível de 4,5:1. Duas correções, nesta ordem:
* primeiro o texto sobe de tom, depois a coluna onde ele mora ganha
* uma sombra própria. Escurecer a água inteira resolveria também, e
* seria a solução errada: apagaria justamente o que faz a primeira
* tela valer a pena.
* ===================================================================== */
/* A sombra acompanha só o terço esquerdo e termina antes do meio, então
a água continua inteira à direita, que é onde ela é vista. */
.hero-veu::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
rgba(4, 22, 52, 0.86) 0%,
rgba(4, 22, 52, 0.66) 26%,
rgba(4, 22, 52, 0.18) 52%,
transparent 68%
);
}
@media (max-width: 860px) {
/* Em tela estreita o texto ocupa a largura toda, então a sombra
também precisa cobrir tudo. */
.hero-veu::after {
background: linear-gradient(
180deg,
rgba(4, 22, 52, 0.76) 0%,
rgba(4, 22, 52, 0.55) 55%,
rgba(4, 22, 52, 0.25) 100%
);
}
}
/* =====================================================================
* 29. A RODADA DE AJUSTES PEDIDA EM 08/09
* ===================================================================== */
/* --- O botão principal vazado -------------------------------------- *
* Mesmo princípio dos números da Cup: linha laranja, miolo transparente.
* Diferente deles, aqui existe um estado de toque, e o botão precisa
* responder: no hover ele enche de laranja e inverte a tinta, senão
* contorno em botão lê como "desabilitado". */
.botao-vazado {
--botao-fundo: transparent;
--botao-tinta: var(--luz-500);
border: var(--traco-botao) solid var(--luz-500);
font-weight: 700;
}
.botao-vazado:hover,
.botao-vazado:focus-visible {
--botao-fundo: var(--luz-500);
--botao-tinta: var(--agua-950);
color: var(--agua-950);
}
/* Sobre superfície escura o laranja precisa clarear para manter contraste. */
.escuro .botao-vazado { --botao-tinta: var(--luz-400); border-color: var(--luz-400); }
.escuro .botao-vazado:hover { --botao-fundo: var(--luz-400); --botao-tinta: var(--agua-950); color: var(--agua-950); }
/* Em 24/09, Otávio pediu de volta a escala compacta, com traço e texto
fortes e fundo escuro translúcido em vez de transparência total. */
.hero .botao-vazado {
--botao-fundo: rgba(4, 22, 52, 0.22);
--botao-tinta: var(--luz-400);
border: var(--traco-botao) solid var(--luz-500);
font-size: var(--fs-3);
font-weight: 700;
}
.hero .botao-vazado:hover,
.hero .botao-vazado:focus-visible {
--botao-fundo: rgba(4, 22, 52, 0.38);
--botao-tinta: var(--luz-400);
border-color: var(--luz-400);
color: var(--luz-400);
}
/* --- Os três motivos, com o símbolo puxando o olho ------------------ *
* O ícone estava em 1,5rem, do tamanho de um marcador de lista, e some
* ao lado do texto. Em 2,4rem dentro de um disco ele vira o ponto de
* entrada de cada motivo, que é o papel dele. */
.confianca > div > span {
display: grid;
place-items: center;
flex: none;
width: 3.6rem;
height: 3.6rem;
border-radius: var(--r-full);
background: var(--agua-100);
}
.escuro .confianca > div > span { background: rgba(143, 190, 255, 0.12); }
/* --- A borda azul do formulário ------------------------------------- *
* O cartão é a porta de entrada do pedido, e era a única superfície
* branca da página sem nada que a marcasse. A borda o separa do fundo
* sem precisar de sombra pesada. */
.busca {
border: 2px solid var(--agua-500);
box-shadow: 0 18px 44px rgba(10, 58, 143, 0.10);
}
/* --- A assinatura de quem fez o site -------------------------------- *
* Empilhada, embaixo da linha da Férias Play. Ao lado dela pareceria
* uma segunda marca do mesmo peso, e não é isso. */
.assinatura {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
opacity: 0.72;
transition: opacity var(--d-2) var(--curva-suave);
}
.assinatura:hover { opacity: 1; }
.assinatura-rotulo {
flex: none;
font-size: 0.66rem;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--escuro-tinta-2);
}
.assinatura-marca { display: inline-flex; align-items: center; gap: 0.35rem; height: 16px; }
.assinatura-marca img { display: block; height: 15px; width: auto; margin: 0; }
.assinatura-marca .assinatura-nome { height: 9px; }
/* --- O acordeão abre com o mínimo de movimento --------------------- *
* Ele abria seco, num corte. O que entra aqui é só o conteúdo
* aparecendo e assentando, em opacidade e deslocamento, que são as duas
* coisas que a placa de vídeo resolve sozinha.
*
* A ALTURA CONTINUA SEM ANIMAÇÃO, e isso é decisão, não limitação:
* animar altura obriga o navegador a recalcular o layout da página a
* cada quadro, e numa lista de perguntas isso engasga justo no celular,
* que é onde a maioria vai abrir. O resultado é mais limpo assim.
*
* O ícone de mais que vira menos já era animado por transform, e fica. */
@keyframes acordeao-entra {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.acordeao details[open] .corpo {
animation: acordeao-entra var(--d-2) var(--curva-suave) both;
}
@media (prefers-reduced-motion: reduce) {
.acordeao details[open] .corpo { animation: none; }
}
/* ------------------------------------------------------------------ *
* 30. Formulário de reserva
*
* O formulário deixou de ser um pedido de site e virou a cópia da
* mensagem que a Férias Play já manda no WhatsApp: titular, documento,
* contato e a lista de acompanhantes com a idade colada no nome.
*
* A borda azul existe por isso. Ela marca, sem uma linha de texto, onde
* começa a parte em que a pessoa entrega dado pessoal, e separa esse
* bloco do resto da página, que é leitura.
* ------------------------------------------------------------------ */
.folha-azul { border-color: var(--agua-600); }
#fp-reserva { min-width: 0; padding-top: 0; }
.folha-titulo {
position: relative;
padding-top: var(--sp-6);
border-width: 2px;
}
.folha-titulo > .selo-formulario {
margin-bottom: var(--sp-5);
}
.folha-titulo h2 { font-size: var(--fs-6); margin-bottom: var(--sp-3); }
.folha-titulo .texto-apoio { margin: 0; font-size: var(--fs-3); }
/* Respiro entre campos que não estão dentro de uma grade. */
.espacado { margin-top: var(--sp-4); }
.nota-noites { margin-top: var(--sp-3); }
.nota-vazia { margin-top: var(--sp-4); }
/* Necessidades opcionais ficam fechadas até a pessoa pedir. É informação
importante para a cotação, mas não deve tornar o formulário obrigatório
ainda maior para quem só precisa de uma estadia comum. */
.opcoes-extras {
padding: 0;
overflow: clip;
}
.opcoes-extras summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
min-height: calc(var(--sp-8) + var(--sp-3));
padding: var(--sp-5) var(--sp-6);
list-style: none;
cursor: pointer;
}
.opcoes-extras summary::-webkit-details-marker { display: none; }
.opcoes-extras summary > span { display: grid; gap: var(--sp-1); }
.opcoes-extras summary b {
font-family: var(--display);
font-size: var(--fs-5);
color: var(--tinta);
}
.opcoes-extras summary small {
font-size: var(--fs-2);
line-height: 1.45;
color: var(--tinta-3);
}
.opcoes-extras summary i {
flex: none;
width: var(--sp-3);
height: var(--sp-3);
border-right: 2px solid var(--agua-600);
border-bottom: 2px solid var(--agua-600);
transform: rotate(45deg);
transition: transform var(--d-2) var(--curva);
}
.opcoes-extras[open] summary i { transform: rotate(225deg); }
.opcoes-extras-corpo {
padding: var(--sp-5) var(--sp-6) var(--sp-6);
border-top: 1px solid var(--agua-100);
background: var(--fundo-alt);
}
.opcoes-extras-grade {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-3);
}
.opcao-extra {
display: grid;
grid-template-columns: calc(var(--sp-4) + var(--sp-1)) minmax(0, 1fr);
align-items: start;
gap: var(--sp-3);
min-width: 0;
min-height: var(--sp-9);
padding: var(--sp-4);
border: 1px solid var(--linha-forte);
border-radius: var(--r-2);
background: var(--superficie);
cursor: pointer;
transition: border-color var(--d-1) var(--curva-suave),
background-color var(--d-1) var(--curva-suave),
box-shadow var(--d-1) var(--curva-suave);
}
.opcao-extra:hover { border-color: var(--agua-500); }
.opcao-extra:has(input:checked) {
border-color: var(--agua-600);
background: var(--agua-100);
box-shadow: 0 2px 10px rgba(6, 34, 92, 0.1);
}
.opcao-extra input {
width: var(--sp-4);
height: var(--sp-4);
margin-top: var(--sp-1);
accent-color: var(--agua-600);
}
.opcao-extra span { display: grid; gap: var(--sp-1); min-width: 0; }
.opcao-extra b { font-size: var(--fs-3); color: var(--tinta); }
.opcao-extra small { font-size: var(--fs-2); line-height: 1.45; color: var(--tinta-2); }
@media (max-width: 640px) {
.opcoes-extras summary,
.opcoes-extras-corpo { padding-inline: var(--sp-5); }
.opcoes-extras-grade { grid-template-columns: minmax(0, 1fr); }
.opcao-extra { min-height: 0; }
}
/* Endereço é linha longa e CEP é número curto: dividir a linha ao meio
deixaria um campo apertado e o outro vazio. */
@media (min-width: 561px) {
.dupla-endereco { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
/* O erro também aparece na borda da caixa de texto, não só nos campos
de uma linha. */
.campo-erro textarea { border-color: var(--luz-700); }
/* Recado único de erro, anunciado em voz alta por leitor de tela. Vazio,
some da tela: um formulário sem erro não deve reservar espaço para
uma tarja que não existe. */
.recado-geral {
margin: 0 0 var(--sp-4);
padding: var(--sp-3) var(--sp-4);
border-left: 3px solid var(--luz-700);
border-radius: var(--r-1);
background: var(--luz-100);
font-size: var(--fs-3);
font-weight: 600;
color: var(--luz-800);
}
.recado-geral:empty { display: none; }
/* Um cartão por acompanhante. O nome e a idade dele andam juntos dentro
da mesma moldura, e por isso nunca há dúvida sobre qual idade pertence
a qual nome, que é justamente o que a mensagem do WhatsApp cobra. */
.acompanhantes { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.acompanhante {
display: grid;
gap: var(--sp-3);
margin: 0;
padding: var(--sp-4);
border: 1px solid var(--agua-100);
border-radius: var(--r-2);
background: var(--fundo-alt);
}
.acompanhante legend {
padding: 0 var(--sp-2);
margin-left: calc(var(--sp-2) * -1);
font-family: var(--display);
font-size: var(--fs-2);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--agua-700);
}
/* Idade é número de dois dígitos. Campo do tamanho do dado que ele
recebe evita a dúvida de estar no lugar errado. */
.campo-idade input { max-width: 9rem; }
.ajuda.ajuda-campo { margin: 0; font-size: var(--fs-2); }
/* =====================================================================
* 31. SISTEMA DE MARCA
* A logo completa monocromática assina o rodapé, formulários e fotos reais.
* Fundos e estados sem foto não repetem a marca como textura.
* ===================================================================== */
.logo-marca { display: block; width: auto; height: auto; }
/* --- rodapé ------------------------------------------------------- */
.rodape .rodape-logo {
height: 44px;
width: auto;
}
/* --- carimbo na foto do hotel ------------------------------------- *
* A sombra não é enfeite: a foto muda de claridade de hotel para hotel,
* e sem ela a logo branca some em céu e em piscina clara. */
/* O seletor tem `.cartao-capa` na frente de propósito: a foto do cartão
é `.cartao-capa img` com 100% de largura e altura, e sem a mesma
especificidade o carimbo herdava isso e cobria a foto inteira. */
.cartao-capa .cartao-carimbo,
.cartao:hover .cartao-capa .cartao-carimbo {
transform: none;
}
.cartao-capa .cartao-carimbo {
width: auto;
object-fit: contain;
position: absolute;
right: var(--sp-3);
bottom: var(--sp-3);
z-index: 2;
height: 1.75rem;
width: auto;
opacity: 0.92;
filter: drop-shadow(0 1px 3px rgba(4, 22, 52, 0.55));
pointer-events: none;
}
/* --- assinatura da marca nos formulários -------------------------- */
/* Repete a gramática do header: Play completo, filete azul/laranja e
dizeres. Sem fundo, sombra ou contorno adicional dentro do formulário. */
.selo-formulario {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
width: fit-content;
max-width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.selo-formulario-icone {
display: grid;
place-items: center;
flex: none;
width: calc(var(--sp-9) + var(--sp-2));
height: calc(var(--sp-7) + var(--sp-1));
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.selo-formulario-icone img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.selo-formulario-filete {
display: flex;
flex-direction: column;
flex: none;
width: var(--fio-altura);
height: calc(var(--sp-6) + var(--sp-2));
overflow: hidden;
border-radius: var(--r-full);
}
.selo-formulario-filete i { flex: 1; }
.selo-formulario-filete i:first-child { background: var(--agua-600); }
.selo-formulario-filete i:last-child { background: var(--luz-500); }
.selo-formulario-assinatura {
display: grid;
gap: var(--sp-1);
min-width: 0;
}
.selo-formulario-assinatura small,
.selo-formulario-assinatura strong {
font-family: "Sora", var(--display);
font-style: normal;
text-transform: uppercase;
}
.selo-formulario-assinatura small {
font-size: var(--fs-1);
font-weight: 700;
line-height: 1;
letter-spacing: var(--tracking-selo-fino);
color: var(--agua-700);
}
.selo-formulario-assinatura strong {
font-size: var(--fs-3);
font-weight: 800;
line-height: 1.1;
letter-spacing: var(--tracking-selo-forte);
color: var(--agua-900);
}
@media (max-width: 520px) {
.selo-formulario { gap: var(--sp-2); }
.selo-formulario-icone {
width: calc(var(--sp-9) + var(--sp-1));
height: calc(var(--sp-6) + var(--sp-3));
}
.selo-formulario-filete { height: calc(var(--sp-6) + var(--sp-1)); }
.selo-formulario-assinatura small { font-size: var(--fs-1); }
.selo-formulario-assinatura strong { font-size: var(--fs-2); }
}
/* A assinatura da marca fica no cabeçalho e no rodapé. Convites e
capas internas usam luz discreta da paleta, sem logo atrás do texto. */
/* =====================================================================
* 32. A ASSINATURA DO CABEÇALHO
*
* A logo, o filete azul e laranja e os dizeres, lidos como uma peça só.
* O peso do conjunto vem de três lugares, e nenhum deles é a logo
* crescer:
* - os dizeres sobem um degrau na régua e vão para o peso 800;
* - o filete engrossa de 3 para 4 px e passa a ter a altura da logo;
* - o espaço entre as três peças encurta, e elas passam a ler juntas.
* O filete é o mesmo recurso do cabeçalho do TH: traz as duas cores da
* marca sem empilhar uma faixa, que leria como bandeira.
* ===================================================================== */
.marca { gap: var(--sp-3); }
.marca .marca-logo { height: 42px; }
.marca-filete {
display: flex;
flex-direction: column;
flex: none;
width: 4px;
height: 2.5rem;
overflow: hidden;
border-radius: var(--r-full);
}
.marca-filete i { flex: 1; }
.marca-filete i:first-child { background: var(--agua-600); }
.marca-filete i:last-child { background: var(--luz-500); }
.marca-dizeres {
font-family: var(--display);
font-size: var(--fs-2);
font-weight: 800;
line-height: 1.15;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--areia-50);
transition: color var(--d-2) var(--curva-suave);
}
.topo.rolou .marca-dizeres { color: var(--agua-900); }
@media (max-width: 640px) {
.marca { gap: var(--sp-2); }
.marca .marca-logo { height: 36px; }
.marca-filete { height: 2.125rem; }
.marca-dizeres { letter-spacing: 0.04em; }
}
/* A Sora continua reservada aos selos de marca, não à manchete. */
@font-face {
font-family: "Sora";
src: url("../fontes/sora.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
.hero h1,
.hero-titulo-linha,
.hero h1 em {
font-family: var(--corpo);
letter-spacing: -0.035em;
}
.hero h1 em { font-weight: inherit; }
/* AJUSTE PARA TELAS DE 320 PX */
/* Mantém logo, dizeres e botão Menu completos; o contador empilha para
preservar os alvos de toque de 44 px sem criar rolagem lateral. */
@media (max-width: 340px) {
.hero-titulo-linha { font-size: 2.1rem; }
.hero-acoes .botao-grande { padding-inline: var(--sp-4); font-size: var(--fs-3); }
.topo-interno {
gap: var(--sp-2);
padding-block: var(--sp-3);
}
.marca { gap: var(--sp-compacto); }
.marca .marca-logo { height: calc(var(--sp-6) - var(--sp-1)); }
.marca-filete {
width: var(--fio-altura);
height: calc(var(--sp-6) - var(--sp-1));
}
.marca-dizeres {
font-size: var(--fs-mini);
letter-spacing: var(--tracking-compacto);
}
.menu-botao {
min-height: 44px;
gap: var(--sp-compacto);
padding-inline: var(--sp-3);
font-size: var(--fs-menu-compacto);
}
.contador {
align-items: stretch;
flex-direction: column;
gap: var(--sp-3);
}
.contador-botoes {
justify-content: space-between;
width: 100%;
}
}
/* =====================================================================
* 33. CATÁLOGO — HIERARQUIA E ADAPTAÇÃO MOBILE (15/09/2026)
* ===================================================================== */
.capa-catalogo {
padding-block: clamp(2.25rem, 5vw, 4.75rem) clamp(3rem, 6vw, 5.5rem);
}
.capa-catalogo::before {
background:
radial-gradient(70% 110% at 100% 0%, rgba(255, 122, 24, 0.16), transparent 60%),
linear-gradient(135deg, rgba(61, 139, 255, 0.08), transparent 46%);
}
.capa-catalogo::after {
right: clamp(-4rem, -2vw, -1rem);
width: min(36rem, 43vw);
opacity: 0.045;
}
.capa-catalogo .trilha { margin-bottom: clamp(2rem, 5vw, 4.5rem); }
.capa-catalogo-grid {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
align-items: end;
gap: clamp(2.5rem, 7vw, 7rem);
}
.capa-catalogo h1 {
max-width: 12ch;
margin: 0;
font-size: clamp(3.3rem, 6.2vw, 5.75rem);
line-height: 0.96;
}
.capa-catalogo-apoio {
display: grid;
gap: var(--sp-5);
padding: var(--sp-2) 0 var(--sp-2) clamp(1.5rem, 3vw, 2.5rem);
border-left: 1px solid rgba(143, 190, 255, 0.34);
}
.capa-catalogo-apoio p {
max-width: 36ch;
margin: 0;
font-size: clamp(1rem, 1.4vw, 1.18rem);
line-height: 1.62;
color: var(--escuro-tinta-2);
}
.capa-catalogo-apoio a {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
width: fit-content;
min-height: 44px;
padding-bottom: var(--sp-2);
border-bottom: 1px solid rgba(255, 158, 61, 0.62);
color: var(--luz-400);
font-weight: 700;
text-decoration: none;
}
.capa-catalogo-apoio a span { transition: transform var(--d-2) var(--curva); }
.capa-catalogo-apoio a:hover span { transform: translateY(3px); }
.catalogo-secao { padding-block: clamp(3.5rem, 7vw, 7rem); }
.catalogo-secao .barra-filtro { margin-bottom: var(--sp-4); }
.catalogo-secao .contagem { margin-bottom: var(--sp-6); }
@media (min-width: 1100px) {
.catalogo-secao .grade-hoteis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.catalogo-secao .cartao { grid-column: span 2; }
.catalogo-secao .cartao:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}
@media (max-width: 760px) {
.capa-catalogo { padding-block: var(--sp-4) clamp(2.75rem, 12vw, 4rem); }
.capa-catalogo::before {
background: linear-gradient(180deg, rgba(61, 139, 255, 0.08), transparent 70%);
}
.capa-catalogo::after { display: none; }
.capa-catalogo .trilha { margin-bottom: var(--sp-6); }
.capa-catalogo-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
.capa-catalogo h1 {
max-width: 11ch;
font-size: clamp(2.55rem, 12.5vw, 3.7rem);
line-height: 0.98;
}
.capa-catalogo-apoio {
gap: var(--sp-4);
padding: var(--sp-5) 0 0;
border-top: 1px solid rgba(143, 190, 255, 0.3);
border-left: 0;
}
.capa-catalogo-apoio p { max-width: 32ch; font-size: 1rem; line-height: 1.55; }
.catalogo-secao { padding-block: var(--sp-8); }
.catalogo-secao .barra-filtro {
display: grid;
grid-template-columns: repeat(3, minmax(max-content, 1fr));
align-items: stretch;
overflow-x: auto;
margin-bottom: var(--sp-4);
padding-bottom: var(--sp-2);
scrollbar-width: none;
}
.catalogo-secao .barra-filtro::-webkit-scrollbar { display: none; }
.catalogo-secao .barra-filtro input[type="search"] {
grid-column: 1 / -1;
width: 100%;
min-width: 100%;
min-height: 48px;
}
.catalogo-secao .barra-filtro button { min-height: 44px; white-space: nowrap; }
}
@media (max-width: 380px) {
.capa-catalogo h1 { font-size: 2.5rem; }
.capa-catalogo-apoio p { font-size: 0.975rem; }
.catalogo-secao .barra-filtro { margin-right: calc(var(--sp-5) * -1); }
}
/* Ajuste final: filtros contidos e legíveis em celulares estreitos. */
@media (max-width: 760px) {
.catalogo-secao .barra-filtro {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
min-width: 0;
max-width: 100%;
overflow: visible;
margin-right: 0;
padding-bottom: 0;
}
.catalogo-secao .barra-filtro input[type="search"] {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
}
.catalogo-secao .barra-filtro button:last-child {
grid-column: 1 / -1;
}
}
/* =====================================================================
* 34. CATÁLOGO — ÁGUA, COR DE MARCA E CAPAS MOBILE (15/09/2026)
* ===================================================================== */
.capa-catalogo {
isolation: isolate;
background: var(--agua-800);
}
.capa-catalogo-agua {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.74;
filter: brightness(1.12) saturate(1.08);
pointer-events: none;
}
.capa-catalogo::before {
z-index: 1;
background:
linear-gradient(90deg, rgba(4, 22, 52, 0.38) 0%, rgba(6, 34, 92, 0.46) 54%, rgba(10, 58, 143, 0.18) 100%),
radial-gradient(68% 110% at 100% 10%, rgba(143, 190, 255, 0.24), transparent 66%);
}
.capa-catalogo::after {
display: none;
background: none;
}
.capa-catalogo .pagina { position: relative; z-index: 2; }
.capa-catalogo h1 {
max-width: 11.5ch;
color: #FFFFFF;
text-wrap: balance;
text-shadow: 0 10px 34px rgba(4, 22, 52, 0.34);
}
.capa-catalogo h1 .palavra-azul {
color: #8FC7FF;
text-shadow: 0 0 28px rgba(61, 139, 255, 0.22);
}
.capa-catalogo h1 .palavra-laranja {
color: var(--laranja-marca);
text-shadow: 0 0 28px rgba(248, 112, 24, 0.2);
}
.capa-catalogo-apoio p { color: #D9E8FF; }
.capa-catalogo-apoio a { color: #FFAB58; border-bottom-color: rgba(255, 122, 24, 0.82); }
@media (max-width: 760px) {
.capa-catalogo-agua {
opacity: 0.7;
filter: brightness(1.18) saturate(1.08);
}
.capa-catalogo::before {
background:
linear-gradient(180deg, rgba(4, 22, 52, 0.22), rgba(6, 34, 92, 0.48)),
radial-gradient(110% 72% at 90% 0%, rgba(143, 199, 255, 0.28), transparent 68%);
}
.cartao-capa { aspect-ratio: 4 / 3; }
.cartao-capa img { object-position: center; }
}
@media (max-width: 640px) {
.marca-filete,
.marca-dizeres { display: none; }
.marca .marca-logo { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.capa-catalogo-agua { opacity: 0.62; }
}
/* Correção da sobreposição do breadcrumb sob o cabeçalho transparente. */
@media (max-width: 640px) {
.capa-catalogo {
padding-top: calc(4.625rem + var(--sp-4));
}
.capa-catalogo .trilha { display: none; }
}
/* O menu precisa permanecer legível enquanto o cabeçalho está sobre a água. */
@media (min-width: 981px) {
.topo:not(.rolou) .menu a:not(.botao) { color: #D9E8FF; }
.topo:not(.rolou) .menu a[aria-current="page"]:not(.botao) { color: #FFFFFF; }
}
/* 2026-09: catálogo de fotos com uma imagem por vez. */
.capa-catalogo h1 .palavra-azul { color: #59ADFF; text-shadow: none; }
.capa-catalogo h1 .palavra-laranja { color: #FF8425; text-shadow: none; }
.capa-catalogo-apoio a {
padding: var(--sp-3) var(--sp-4);
border: 0;
border-radius: var(--r-full);
background: #FF8B29;
color: var(--agua-950);
box-shadow: 0 7px 20px rgba(4, 22, 52, .22);
transition: background var(--d-2) var(--curva-suave), transform var(--d-2) var(--curva);
}
.capa-catalogo-apoio a:hover { background: #FFAC60; transform: translateY(-2px); }
.capa-catalogo-apoio a:active { transform: scale(.98); }
.link-seta { color: var(--agua-600); border-bottom-color: currentColor; text-underline-offset: .18em; }
.link-seta:hover { color: var(--agua-800); }
.escuro .link-seta { color: #FFAC60; }
.galeria.hotel-carrossel { display: block; min-width: 0; }
.galeria.hotel-carrossel > * { aspect-ratio: auto; overflow: visible; border-radius: 0; }
.hotel-carrossel-janela {
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
border-radius: var(--r-3);
outline-offset: 4px;
}
.hotel-carrossel-janela::-webkit-scrollbar, .vitrine-janela::-webkit-scrollbar { display: none; }
.hotel-carrossel-trilho { display: flex; }
.hotel-carrossel-foto { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.hotel-carrossel-imagem { aspect-ratio: 16 / 10; overflow: hidden; background: var(--agua-100); border-radius: var(--r-3); }
.hotel-carrossel-imagem img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hotel-carrossel-foto figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-2) 0; }
.foto-categoria { color: var(--agua-700); font-weight: 800; font-size: var(--fs-3); }
.foto-descricao { color: var(--tinta-2); font-size: var(--fs-2); line-height: 1.5; }
.hotel-carrossel-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.hotel-carrossel-contagem { margin: 0; color: var(--agua-700); font-variant-numeric: tabular-nums; }
.hotel-carrossel-contagem strong { font-size: var(--fs-5); }
.hotel-carrossel-botoes { display: flex; gap: var(--sp-2); }
.carrossel-seta { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--r-full); background: var(--agua-800); color: white; cursor: pointer; transition: background var(--d-2) var(--curva-suave), transform var(--d-1) var(--curva); }
.carrossel-seta svg { width: 24px; height: 24px; }
.carrossel-seta:not(:disabled):hover { background: var(--agua-600); }
.carrossel-seta:not(:disabled):active { transform: scale(.93); }
.carrossel-seta:disabled { background: var(--agua-100); color: var(--agua-700); cursor: not-allowed; }
.carrossel-seta:focus-visible, .hotel-carrossel-janela:focus-visible { outline: 3px solid var(--luz-500); outline-offset: 3px; }
@media (max-width: 760px) {
.hotel-carrossel-imagem { aspect-ratio: 4 / 3; }
.hotel-carrossel-foto figcaption { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.hotel-carrossel-janela { scroll-behavior: auto; }
.carrossel-seta, .capa-catalogo-apoio a { transition: none; }
}
/* A grade pai não pode herdar a largura intrínseca de um carrossel. */
.ficha > div, .ficha > aside { min-width: 0; }
@media (max-width: 980px) { .ficha { grid-template-columns: minmax(0, 1fr); } }
.galeria.hotel-carrossel > .hotel-carrossel-janela { overflow-x: auto; overflow-y: hidden; }
/* ------------------------------------------------------------------ *
* Vitrine da home, 15/09 (revezamento Claude): faixa de ponta a ponta,
* só áreas de lazer, sem controle visível. Luxo aqui é contenção: fundo
* fundo profundo, cartão em pé (4:5), cantos quase retos, legenda em duas
* vozes (detalhe em versalete espaçado, hotel na serifada) e movimento
* lento e contínuo. O movimento é transform (subpixel, na GPU): rolar por
* scrollLeft anda de pixel inteiro em pixel inteiro e treme a borda da foto.
* ------------------------------------------------------------------ */
.vitrine-hoteis {
/* Segue o padrão .escuro do site (fundo, texto, rótulo com o traço da
marca, link). O que dá o tom de descanso é composição, não paleta nova:
respiro, cartão em pé, legenda contida e movimento lento. A única
nuance é a ênfase no tom mais claro da própria escala de luz. */
margin-top: var(--sp-9);
margin-inline: calc((100% - var(--vitrine-tela, 100%)) / 2);
padding-block: clamp(4.5rem, 9vw, 8rem);
background:
radial-gradient(80% 70% at 88% 100%, rgba(61, 139, 255, 0.12), transparent 60%),
linear-gradient(180deg, var(--agua-900) 0%, var(--agua-950) 100%);
overflow: hidden;
}
.vitrine-titulo {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
align-items: end;
gap: clamp(1.5rem, 5vw, 5rem);
width: var(--pagina);
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.vitrine-titulo h3 {
margin: 0;
font-size: clamp(2.2rem, 4.6vw, 4rem);
}
.vitrine-titulo h3 em { color: var(--luz-200); }
.vitrine-apoio { display: grid; justify-items: start; gap: var(--sp-4); padding-bottom: 0.4rem; }
.vitrine-apoio p { margin: 0; max-width: 36ch; line-height: 1.6; }
@media (max-width: 860px) {
.vitrine-titulo { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
.vitrine-faixa {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.vitrine-faixa { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vitrine-faixa.arrastando { cursor: grabbing; }
.vitrine-faixa.arrastando .vitrine-foto { pointer-events: none; }
/* o movimento é do carrosseis.js (anda, arrasta, setas, retoma após 4s) */
.vitrine-trilho { display: flex; width: max-content; will-change: transform; }
.vitrine-conjunto { display: flex; }
.vitrine-foto {
position: relative;
display: block;
flex: none;
width: clamp(15rem, 22vw, 22rem);
aspect-ratio: 4 / 5;
margin-right: clamp(0.75rem, 1.2vw, 1.25rem);
overflow: hidden;
border-radius: 3px;
background: var(--agua-900);
color: #FFFFFF;
text-decoration: none;
isolation: isolate;
transform: translateZ(0);
}
.vitrine-foto img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.001);
transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vitrine-foto::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 52%, rgba(4, 22, 52, 0.2) 66%, rgba(4, 22, 52, 0.86) 100%);
pointer-events: none;
}
.vitrine-foto:hover img { transform: scale(1.045); }
.vitrine-legenda {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
display: grid;
gap: 0.35rem;
padding: clamp(1rem, 1.6vw, 1.5rem);
}
.vitrine-detalhe {
color: var(--agua-300);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.vitrine-legenda strong {
font-family: var(--enfase);
font-style: italic;
font-size: clamp(1.15rem, 1.5vw, 1.4rem);
font-weight: 400;
font-variation-settings: "wght" 400;
color: #FFFFFF;
line-height: 1.15;
letter-spacing: -0.01em;
/* sempre espaço para duas linhas: nome curto e longo alinham o rótulo na mesma altura */
min-height: calc(1.15em * 2 + 0.6rem + 1px);
}
.vitrine-legenda strong::before {
content: "";
display: block;
width: 1.75rem;
height: 1px;
margin-bottom: 0.6rem;
background: rgba(255, 255, 255, 0.6);
transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vitrine-foto:hover .vitrine-legenda strong::before { width: 3rem; }
.vitrine-foto:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -6px; }
@media (max-width: 760px) {
.vitrine-foto { width: 68vw; }
}
/* menos movimento: a faixa para e vira rolagem manual, sem a cópia do loop */
@media (prefers-reduced-motion: reduce) {
.vitrine-foto img, .vitrine-legenda strong::before { transition: none; }
}
/* Título da capa do catálogo, 15/09: sem a sombra borrada (embaçava a borda
das letras) e com o itálico usando o corte de título da Literata. */
.capa-catalogo h1 { text-shadow: none; letter-spacing: -0.028em; }
.capa-catalogo h1 em { font-optical-sizing: auto; font-variation-settings: "wght" 640; letter-spacing: -0.01em; }
/* Curiosidade termal, 15/09: o corte animado vira o protagonista. Texto curto à
esquerda, animação maior à direita; a fileira de números saiu porque o próprio
corte já mostra profundidade e temperatura. */
.agua-grade { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 5rem); }
.agua .linha-fina { max-width: 34ch; }
.agua-dados:empty { display: none; }
.agua .nota-agua { max-width: 40ch !important; margin-top: var(--sp-6) !important; font-size: var(--fs-3); opacity: 1; }
.fp-corte { border-radius: var(--r-3); }
@media (max-width: 980px) {
.agua-grade { grid-template-columns: 1fr; }
}
/* 36. Transição apenas no fundo. Em repouso a hero é 100% água; quando
há scroll, a base encontra gradualmente a cor da seção seguinte. */
.hero-referencia .hero::after {
content: "";
position: absolute;
inset: auto 0 -1px;
z-index: 0;
height: clamp(10rem, 24svh, 15rem);
pointer-events: none;
opacity: var(--hero-saida, 0);
will-change: opacity;
background: linear-gradient(180deg,
rgba(255, 253, 250, 0) 0%,
rgba(255, 253, 250, .035) 14%,
rgba(255, 253, 250, .12) 28%,
rgba(255, 253, 250, .28) 42%,
rgba(255, 253, 250, .50) 57%,
rgba(255, 253, 250, .73) 71%,
rgba(255, 253, 250, .90) 84%,
var(--fundo) 100%);
}
#hospedagens {
position: relative;
padding-top: clamp(1.5rem, 3vw, 2.5rem);
background: var(--fundo);
}
/* =====================================================================
* 37. O PACOTE DE DEZEMBRO
*
* Duas peças que existem pelo mesmo motivo: o número sozinho mente. Os
* valores são de pacote fechado de sete diárias numa semana de alta
* temporada, e lidos sem contexto viram "preço da noite".
*
* Por isso o rótulo vem ANTES do valor, e não depois como observação.
* Rodapé de cartão é o lugar onde a ressalva não é lida; acima do número,
* ela chega junto com ele.
*
* Tudo em token, sem medida solta e sem cor cravada, para a peça nova não
* aumentar a dívida que o portão de design já cobra deste site.
* ===================================================================== */
.faixa-pacote {
margin-bottom: var(--sp-7);
padding: var(--sp-5) var(--sp-6);
border: 1px solid var(--linha);
border-left: var(--traco-numero, 3px) solid var(--laranja-marca);
border-radius: var(--r-2);
background: var(--fundo-alt);
}
.faixa-pacote-titulo {
margin: 0 0 var(--sp-2);
font-family: var(--display);
font-size: var(--fs-4);
color: var(--tinta);
}
.faixa-pacote-texto {
margin: 0;
max-width: var(--leitura);
font-size: var(--fs-3);
color: var(--tinta-2);
}
/* No cartão, o bloco é separado do texto por uma linha fina em vez de
uma caixa: caixa dentro de caixa embaralha a leitura da grade. */
.cartao-preco {
margin: var(--sp-4) 0 var(--sp-3);
padding-top: var(--sp-4);
border-top: 1px solid var(--linha);
}
.cartao-preco-rotulo {
display: block;
margin-bottom: var(--sp-1);
font-family: var(--display);
font-size: var(--fs-mini);
letter-spacing: var(--tracking-selo-fino);
text-transform: uppercase;
color: var(--tinta-3);
}
.cartao-preco-valor {
margin: 0;
font-size: var(--fs-3);
color: var(--tinta-2);
}
.cartao-preco-valor strong {
font-family: var(--display);
font-size: var(--fs-5);
color: var(--agua-700);
}
.cartao-preco-nota {
display: block;
margin-top: var(--sp-2);
font-size: var(--fs-2);
color: var(--tinta-3);
}
/* O valor no fim do pedido.
*
* Mesma ordem do bloco acima, e pelo mesmo motivo: o rótulo vem ANTES do
* número, porque é ele que impede a pessoa de ler o pacote de sete
* diárias como preço de uma noite.
*
* Sem caixa, sem fundo e sem cor de alerta: o pedido inteiro já é uma
* caixa, e amarelo aqui viraria aviso de erro. A separação é uma linha
* fina, igual à das outras linhas do resumo. */
.pedido-preco {
margin: var(--sp-4) 0 var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--linha);
}
.pedido-preco-rotulo {
display: block;
margin-bottom: var(--sp-1);
font-family: var(--display);
font-size: var(--fs-mini);
letter-spacing: var(--tracking-selo-fino);
text-transform: uppercase;
color: var(--tinta-3);
}
.pedido-preco-valor {
margin: 0;
font-size: var(--fs-3);
color: var(--tinta-2);
}
.pedido-preco-valor strong {
font-family: var(--display);
font-size: var(--fs-5);
color: var(--agua-700);
}
.pedido-preco-nota {
display: block;
margin-top: var(--sp-2);
max-width: var(--leitura);
font-size: var(--fs-2);
color: var(--tinta-3);
}