, fora de
qualquer .container. Com width:calc(32%) fixo, a 375px cada cartão fica
com 141px e o conteúdo precisa de 256 — a página vazava 48px.
Consertar o HTML seria mexer em 280 linhas geradas; dar largura de
verdade ao cartão resolve o mesmo problema sem esse risco. */
@media only screen and (max-width: 991px) {
.boxPromocao {
width: calc(50% - 26px);
}
}
@media only screen and (max-width: 767px) {
.boxPromocao {
display: block;
width: auto;
margin: 0 18px 18px;
}
/* sem container em volta, a margem negativa da .row não tem o que
compensar e passaria a vazar sozinha */
.boxPromocao .row {
margin-left: 0;
margin-right: 0;
}
}
.boxPromocao h3 {
background-color: var(--verde-palido);
border-radius: var(--raio-g) var(--raio-g) 0 0;
font-family: var(--f-display);
font-size: 22px;
font-weight: 600;
color: var(--verde);
}
.boxPromocao h5 {
color: var(--verde-vivo);
font-family: var(--f-display);
font-weight: 600;
}
.boxPromocao h1 {
color: var(--acao);
font-family: var(--f-ui);
letter-spacing: .04em;
}
/* A legenda sobre a foto do pacote usa a mesma .picture h2 do resto do
site, dimensionada para uma foto de 600px. Dentro de um cartão de 380px
ela vazava para fora. */
/* Só o tamanho muda: dentro de um cartão de 380px a legenda padrão, feita
para uma foto de 600px, vazava para fora. O alinhamento e o véu ficam a
cargo do --recuo, como em todo o resto do site — antes esta regra fixava
left/right em 18px e deixava a legenda 3px para dentro da foto, um
desencontro pequeno mas visível ao lado das outras telas. */
.boxPromocao .picture h2 {
bottom: 0;
font-size: clamp(17px, 1.35vw, 22px) !important;
line-height: 1.15;
padding: 58px 20px 18px;
}
.boxPromocao .picture h2 small {
margin-top: 6px;
font-family: var(--f-ui);
font-size: 14px;
font-weight: 500;
letter-spacing: .06em;
}
/* O LOGO COLORIDO — a marca registrada, no ar desde 1973.
Ele abre o corpo de todas as telas internas. Antes vinha em tamanho
natural e solto, logo abaixo do logo branco da barra, empurrando o
conteúdo útil para fora da primeira dobra. O problema nunca foi o logo:
era a falta de tratamento.
Aqui ele vira uma assinatura: centralizado, com ar de sobra em volta e
um filete de cada lado, como uma marca em papel timbrado. O tamanho é
fluido — grande em tela cheia, contido no celular. */
.block center:has(img[src*="logo-hpp-g"]) {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(18px, 3vw, 44px);
margin: 0 0 clamp(34px, 4.5vw, 58px);
}
/* os filetes que ladeiam a marca */
.block center:has(img[src*="logo-hpp-g"])::before,
.block center:has(img[src*="logo-hpp-g"])::after {
content: "";
flex: 1 1 auto;
max-width: 190px;
height: 1px;
background: linear-gradient(to right,
transparent, var(--linha) 40%, var(--linha) 60%, transparent);
}
.block center img[src*="logo-hpp-g"] {
flex: 0 0 auto;
width: clamp(190px, 26vw, 330px);
max-width: 100%;
margin: 0;
}
/* o
solto depois do logo dobrava o espaço que o flex já dá */
.block center:has(img[src*="logo-hpp-g"]) + br {
display: none;
}
/* Navegadores sem :has() (nada relevante desde 2023) caem no caminho
antigo: o logo continua visível, só sem os filetes. */
@supports not selector(:has(*)) {
.block center img[src*="logo-hpp-g"] {
display: block;
width: 300px;
margin: 0 auto clamp(30px, 4vw, 50px);
}
}
/* -----------------------------------------------------------------
10. PEÇAS NOVAS
----------------------------------------------------------------- */
/* BLINDAGEM CONTRA O ESPAÇADOR FLUTUANTE — leia antes de criar grade nova.
layout2.css:31 declara .space1n … .space5n como
`float:left; width:100%; clear:both`. Um container display:grid ou
display:flex estabelece um contexto de formatação próprio, e por
definição um BFC não invade a área de um float. Como o espaçador ocupa
100% da largura, sobra ZERO: a grade encolhe para 0px e some, sem erro
no console e sem rolagem horizontal.
Já mordeu duas vezes neste projeto: as sete galerias de quarto e a
lista de acomodações. `clear: both` faz o container descer para depois
do float e recuperar a largura.
Qualquer grade nova colocada dentro do HTML legado entra nesta lista. */
.hpp-duplo,
.hpp-vitrine,
.hpp-trilho,
.hpp-chegar,
.hpp-cabeca,
.hpp-acom {
clear: both;
}
/* A FAIXA DA MARCA FOI REMOVIDA.
Era uma seção inteira, entre os números e o conteúdo, só com a flor
ampliada e uma frase. Ficava solta: não tinha ligação com o que vinha
antes nem com o que vinha depois, e repetia uma marca que já abre a
capa, está na barra do topo e no rodapé.
O que ela tentava fazer — dar destaque à flor — agora acontece onde
importa: a marca da capa e a da barra usam img/logo-hpp-rosa.png, com a
flor em rosa e o letreiro em branco.
O ornamento .hpp-flor abaixo continua disponível para divisores. */
/* --- a flor sozinha, como ornamento -------------------------------
Mesmo recorte da marca-d'água, em tamanho de enfeite. Usada como
divisor entre seções. */
.hpp-flor {
display: block;
width: 68px;
aspect-ratio: 347 / 184;
background: url("../img/logo-hpp-g.png") no-repeat left center;
background-size: 197.7% auto;
flex: 0 0 auto;
}
.hpp-divisor {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(16px, 2.4vw, 34px);
margin: 0 auto;
padding: clamp(30px, 4vw, 56px) 0;
}
.hpp-divisor::before,
.hpp-divisor::after {
content: "";
flex: 1 1 auto;
max-width: 210px;
height: 1px;
background: linear-gradient(to right,
transparent, var(--linha) 45%, var(--linha) 55%, transparent);
}
/* --- faixa de números logo abaixo da capa --- */
.hpp-numeros {
background: var(--verde-fundo);
color: #fff;
}
.hpp-numeros ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
max-width: 1240px;
margin: 0 auto;
padding: 0;
list-style: none;
background: rgba(255, 255, 255, .12);
}
.hpp-numeros li {
background: var(--verde-fundo);
padding: clamp(34px, 4vw, 54px) 18px;
text-align: center;
}
.hpp-numeros b {
display: block;
font-family: var(--f-display);
font-size: clamp(34px, 3.6vw, 52px);
font-weight: 500;
line-height: 1;
color: #fff;
margin-bottom: 10px;
}
.hpp-numeros span {
display: block;
font-size: 11px;
font-weight: 400;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255, 255, 255, .66);
}
/* --- abertura em duas colunas: texto + foto --- */
.hpp-duplo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(38px, 5vw, 84px);
align-items: center;
}
.hpp-duplo--texto-direita {
direction: rtl;
}
.hpp-duplo--texto-direita > * {
direction: ltr;
}
.segment3 .container .block .hpp-duplo p,
.hpp-duplo p {
max-width: 52ch;
}
.hpp-foto {
position: relative;
overflow: hidden;
border-radius: var(--raio);
box-shadow: var(--sombra-2);
aspect-ratio: 4 / 5;
background: var(--verde-palido) center/cover no-repeat;
}
.hpp-foto--larga {
aspect-ratio: 3 / 2;
}
/* moldura deslocada: um filete verde atrás da foto, deslocado no eixo */
.hpp-foto--moldurada {
box-shadow: var(--sombra-2);
}
.hpp-foto--moldurada::before {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(255, 255, 255, .34);
border-radius: 2px;
pointer-events: none;
z-index: 1;
}
/* --- vitrine de experiências (4 cartões grandes) --- */
.hpp-vitrine {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(16px, 1.8vw, 28px);
}
.hpp-cartao {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--raio);
aspect-ratio: 16 / 11;
background: var(--verde-palido);
text-decoration: none;
box-shadow: var(--sombra-1);
}
.hpp-cartao .hpp-cartao-foto {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
transition: transform 1.1s var(--curva);
}
/* Véu geral do cartão: só dá unidade às quatro fotos, que têm exposições
bem diferentes. Quem garante a leitura é o degradê do próprio bloco de
texto, logo abaixo. */
.hpp-cartao::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(10, 28, 18, .34) 0%,
rgba(10, 28, 18, .10) 46%,
rgba(10, 28, 18, 0) 76%);
transition: opacity .5s var(--curva);
}
.hpp-cartao:hover .hpp-cartao-foto,
.hpp-cartao:focus .hpp-cartao-foto {
transform: scale(1.055);
}
/* O degradê fica NO BLOCO DE TEXTO, não no cartão.
Preso ao cartão, ele é calibrado para uma altura só: no desktop o cartão
é 16:11 e o texto cai no terço escuro, mas no celular vira 4:3 e o mesmo
degradê deixa o parágrafo em cima da parte clara da foto — foi o que
aconteceu com o cartão de Acomodações, cuja foto é quase branca.
Preso ao texto, o véu tem sempre exatamente a altura que precisa cobrir,
em qualquer proporção de cartão. O padding-top é o espaço onde o degradê
nasce e se dissolve na foto.
Medido no pior caso (parágrafo sobre a área mais clara da foto do
quarto): 6.2:1 — acima dos 4.5:1 do WCAG AA. */
.hpp-cartao-texto {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
/* o degradê encurtou junto com o texto: o parágrafo saiu dos cartões
(caía no meio da foto e ficava ilegível mesmo com véu), sobraram o
título e a chamada de ação */
padding: 64px clamp(24px, 2.6vw, 38px) clamp(24px, 2.6vw, 34px);
color: #fff;
background: linear-gradient(to top,
rgba(10, 28, 18, .90) 0%,
rgba(10, 28, 18, .76) 45%,
rgba(10, 28, 18, .34) 74%,
rgba(10, 28, 18, 0) 100%);
}
.segment3 .container .block .hpp-cartao-texto h3,
.hpp-cartao-texto h3 {
font-family: var(--f-display);
font-size: clamp(26px, 2.5vw, 38px);
font-weight: 500;
line-height: 1.1;
margin: 0 0 8px;
color: #fff;
text-align: left;
letter-spacing: -.01em;
text-shadow: 0 2px 20px rgba(10, 28, 18, .45);
}
.segment3 .container .block .hpp-cartao-texto p,
.hpp-cartao-texto p {
margin: 0;
max-width: 42ch;
font-size: 14.5px;
font-weight: 300;
line-height: 1.55;
color: rgba(255, 255, 255, .86);
}
.hpp-cartao-texto .hpp-mais {
display: inline-block;
margin-top: 16px;
font-size: 11px;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, .45);
padding-bottom: 5px;
transition: border-color .3s var(--curva);
}
.hpp-cartao:hover .hpp-mais {
border-bottom-color: #fff;
}
/* --- trilho de acomodações --- */
.hpp-trilho {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 26px);
}
.hpp-quarto {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--linha);
border-radius: var(--raio);
overflow: hidden;
text-decoration: none;
color: var(--tinta);
box-shadow: var(--sombra-1);
transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.hpp-quarto:hover,
.hpp-quarto:focus {
transform: translateY(-5px);
box-shadow: var(--sombra-2);
text-decoration: none;
color: var(--tinta);
}
.hpp-quarto-foto {
aspect-ratio: 4 / 3;
background-position: center;
background-size: cover;
background-color: var(--verde-palido);
}
.hpp-quarto-corpo {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.segment3 .container .block .hpp-quarto-corpo h3,
.hpp-quarto-corpo h3 {
font-family: var(--f-display);
font-size: 25px;
font-weight: 600;
line-height: 1.15;
margin: 0 0 8px;
color: var(--verde);
text-align: left;
}
.segment3 .container .block .hpp-quarto-corpo p,
.hpp-quarto-corpo p {
max-width: none;
margin: 0 0 16px;
font-size: 14.5px;
line-height: 1.6;
color: var(--tinta-2);
flex: 1;
}
.hpp-etiqueta {
display: inline-block;
align-self: flex-start;
padding: 5px 11px;
background: var(--verde-palido);
border-radius: 2px;
font-size: 10.5px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--verde);
margin-bottom: 12px;
}
.hpp-quarto .hpp-mais-quarto {
font-size: 11px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--acao);
}
/* --- cabeçalho de seção com título à esquerda e link à direita --- */
.hpp-cabeca {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: clamp(28px, 3.2vw, 46px);
}
.segment3 .container .block .hpp-cabeca h3.hpp-titulo {
margin: 0;
}
.hpp-cabeca-texto {
max-width: 820px;
}
/* o link fica alinhado pela base do título, sem descer com ele */
.hpp-cabeca > .hpp-link-seta {
flex: 0 0 auto;
margin-bottom: 8px;
}
/* --- citação --- */
.hpp-citacao {
max-width: 34ch;
margin: 0;
font-family: var(--f-display);
font-size: clamp(24px, 2.4vw, 36px);
font-weight: 400;
font-style: italic;
line-height: 1.32;
color: var(--verde);
}
.hpp-citacao footer,
.hpp-assinatura {
display: block;
margin-top: 20px;
background: none;
font-family: var(--f-ui);
font-size: 11.5px;
font-style: normal;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tinta-2);
}
/* --- bloco "como chegar" --- */
.hpp-chegar {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(34px, 4vw, 68px);
align-items: start;
}
.hpp-dados {
list-style: none;
padding: 0;
margin: 0 0 28px;
}
.hpp-dados li {
display: flex;
gap: 14px;
padding: 15px 0;
border-bottom: 1px solid var(--linha);
font-size: 16px;
line-height: 1.55;
}
.hpp-dados li:first-child {
padding-top: 0;
}
.hpp-dados i {
flex: 0 0 20px;
margin-top: 4px;
color: var(--verde-vivo);
font-size: 16px;
}
.hpp-dados b {
display: block;
font-size: 10.5px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tinta-2);
margin-bottom: 3px;
}
.hpp-dados a {
color: var(--verde);
text-decoration: none;
border-bottom: 1px solid var(--linha);
}
.hpp-dados a:hover {
color: var(--acao);
border-bottom-color: var(--acao);
}
/* --- texto longo que começa recolhido --- */
.hpp-dobra {
position: relative;
}
.hpp-dobra[data-recolhido="1"] .hpp-dobra-corpo {
max-height: 340px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.hpp-dobra-botao {
margin-top: 20px;
background: none;
border: 0;
padding: 0 0 6px;
font-family: var(--f-ui);
font-size: 11.5px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--verde);
border-bottom: 1px solid var(--linha);
cursor: pointer;
}
.hpp-dobra-botao:hover {
color: var(--acao);
border-bottom-color: var(--acao);
}
/* -----------------------------------------------------------------
11. GALERIA
A grade ficava torta por CSS, não pelas fotos: 16 das 18 imagens de g1/
são 1200x800 idênticas. O problema era .picture-mini com altura FIXA de
150px (layout2.css:374) combinada com colunas que alternavam entre
col-sm-3, col-sm-6 e col-sm-12 no mesmo bloco — a mesma foto aparecia
ora em 1.8:1, ora em 3.8:1.
----------------------------------------------------------------- */
.picture.picture-mini {
height: auto;
aspect-ratio: 4 / 3;
}
.picture.picture-mini .bg {
height: 100%;
}
@media only screen and (max-width: 1024px) {
/* layout2.css:972 força 80px aqui; a proporção precisa vencer */
.picture.picture-mini {
height: auto;
}
}
/* ARMADILHA DO LAYOUT ANTIGO — não tire o clear:both.
Os espaçadores .space1n … .space5n do layout2.css:31 são
`float:left; width:100%; clear:both`. Um container display:grid cria um
contexto de formatação próprio, que por definição não invade a área de
um float — e como o espaçador ocupa 100% da largura, sobra ZERO.
Resultado medido antes desta linha: as sete páginas de acomodação, que
têm um .space3n logo antes da galeria, renderizavam a grade com 0px de
largura e células de 1px. As fotos dos quartos simplesmente não
apareciam, sem nenhum erro no console.
galeria.html escapava por acaso: lá o irmão anterior é um
.
Vale para qualquer grade ou flex novo colocado depois de um espaçador. */
.gal-grade,
.gal-quarto {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(10px, 1.2vw, 18px);
margin-left: 0;
margin-right: 0;
clear: both;
}
/* SEGUNDA ARMADILHA, no mesmo lugar.
As duas grades são aplicadas sobre um , e o .row do
Bootstrap 3 traz `::before` e `::after` com `content:" "; display:table`
para limpar floats. Dentro de um container display:grid, pseudo-elemento
com conteúdo VIRA ITEM DA GRADE.
Medido: a primeira célula da galeria de cada quarto ficava ocupada por
um ::before invisível, empurrando todas as fotos uma posição para a
frente — a linha de cima começava vazia. */
.gal-grade::before,
.gal-grade::after,
.gal-quarto::before,
.gal-quarto::after {
display: none;
}
.gal-grade .picture.picture-mini,
.gal-quarto .picture.picture-mini {
width: auto;
height: auto;
padding: 0;
margin: 0;
float: none;
}
/* os .clearfix que o gerador insere a cada 4 fotos não têm função numa
grade — a quebra de linha é do próprio grid */
.gal-grade .clearfix,
.gal-quarto .clearfix {
display: none;
}
/* o zoom do hover crescia 4% para fora da célula e passava da borda
direita do conteúdo nas fotos da ponta */
.gal-grade .picture,
.gal-quarto .picture {
overflow: hidden;
border-radius: var(--raio);
}
/* O degrau de 3 colunas existia só na .gal-grade. Sem ele, a .gal-quarto
pulava de 4 colunas direto para 2 em 767px — e como o container também
muda de largura ali, a foto ENCOLHIA quando a tela crescia 1px: medido
360x270 a 767px contra 167x126 a 768px, menor até do que a 414px. */
@media only screen and (max-width: 991px) {
.gal-grade,
.gal-quarto {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (max-width: 767px) {
.gal-grade,
.gal-quarto {
grid-template-columns: repeat(2, 1fr);
}
}
/* -----------------------------------------------------------------
12. RODAPÉ
O HTML do rodapé é o mesmo nas 20 telas e foi reescrito por
ferramentas/refazer-rodape.py: virou três colunas com endereço e
telefone, que antes só existiam na página de contato.
----------------------------------------------------------------- */
footer {
background-color: var(--verde-fundo);
color: rgba(255, 255, 255, .70);
font-size: 15px;
}
footer .container {
width: auto;
max-width: 1240px;
padding: clamp(56px, 6vw, 92px) 34px clamp(28px, 3vw, 40px);
}
footer a {
color: rgba(255, 255, 255, .78);
text-decoration: none;
}
footer a:hover,
footer a:focus {
color: #fff;
text-decoration: none;
}
footer .container h2 {
font-family: var(--f-ui);
font-variant: normal;
font-stretch: normal;
font-size: 11px;
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
margin: 0 0 20px;
}
footer .container hr {
border-top: 1px solid rgba(255, 255, 255, .14);
margin: clamp(34px, 4vw, 54px) 0 26px;
}
.hpp-rodape-grade {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(30px, 4vw, 70px);
text-align: left;
}
.hpp-rodape-marca img {
width: 210px;
margin-bottom: 22px;
}
.hpp-rodape-marca p {
max-width: 34ch;
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, .62);
}
.hpp-rodape-lista {
list-style: none;
padding: 0;
margin: 0;
}
.hpp-rodape-lista li {
margin-bottom: 11px;
line-height: 1.5;
}
.hpp-rodape-lista a {
font-size: 15px;
}
.hpp-rodape-contato li {
display: flex;
gap: 11px;
margin-bottom: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, .70);
}
.hpp-rodape-contato i {
flex: 0 0 16px;
margin-top: 4px;
color: rgba(255, 255, 255, .42);
}
/* redes: círculos vazados no lugar dos ícones de 50px soltos */
footer .container .social-line {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0;
}
footer .container .social-line a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
font-size: 17px;
color: rgba(255, 255, 255, .74);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 50%;
}
footer .container .social-line a:hover,
footer .container .social-line a:focus {
color: #fff;
border-color: rgba(255, 255, 255, .7);
background: rgba(255, 255, 255, .08);
}
.hpp-rodape-fim {
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
align-items: center;
justify-content: space-between;
font-size: 12.5px;
letter-spacing: .04em;
color: rgba(255, 255, 255, .42);
}
.hpp-rodape-fim ul {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
list-style: none;
margin: 0;
padding: 0;
}
.hpp-rodape-fim a {
color: rgba(255, 255, 255, .55);
}
/* -----------------------------------------------------------------
13. MENU RECOLHÍVEL (montado por js/menu-mobile.js)
ATÉ 1099px O MENU VIRA HAMBÚRGUER — não é só "no celular".
São nove links mais o botão Reservas, e promocoes.html ainda tem um
décimo item. Medido item a item, com a borda direita de cada link:
abaixo de 960px o Reservas saía da janela nas telas comuns, e abaixo
de 1100px em promocoes.html.
O detalhe perigoso: a barra é position:fixed, então esse vazamento
NÃO gera rolagem horizontal. O botão principal do site simplesmente
desaparecia, em silêncio, em toda a faixa de tablet — nenhuma medição
de scrollWidth acusaria.
Encolher mais a tipografia não resolvia (passaria de 8px). Recolher é
o caminho honesto.
js/menu-mobile.js NÃO repete este número: ele pergunta ao navegador se
o menu de cima está escondido. Quem manda no ponto de virada é este
arquivo, sozinho.
----------------------------------------------------------------- */
.hpp-hamburguer,
.hpp-painel,
.hpp-fundo {
display: none;
}
@media only screen and (max-width: 1099px) {
/* A altura da barra é redeclarada AQUI, e não em cada regra que precisa
dela. Assim tudo que depende de --barra acompanha sozinho: a própria
barra, o recuo das âncoras, o topo do conteúdo da capa e o
afastamento das telas sem foto. Antes a altura era escrita à mão em
cada lugar e a capa continuava calculando com os 92px do desktop —
numa janela baixa a marca ia parar embaixo da barra. */
:root {
--barra: 76px;
--barra-min: 64px;
}
/* os links soltos quebravam em duas fileiras e comiam a tela */
.navbar .menu-top .menu {
display: none;
}
.navbar .menu-top {
position: relative;
justify-content: flex-start;
}
.hpp-hamburguer {
display: block;
position: absolute;
top: 50%;
right: 2px;
transform: translateY(-50%);
width: 44px; /* alvo de toque mínimo confortável */
height: 44px;
padding: 12px 10px;
background: none;
border: 0;
cursor: pointer;
z-index: 1002;
}
.hpp-hamburguer span {
display: block;
height: 1.5px;
width: 100%;
margin: 4.5px 0;
border-radius: 2px;
background: #fff;
box-shadow: 0 1px 6px rgba(10, 28, 18, .55);
transition: transform .25s var(--curva), opacity .2s ease;
}
.hpp-hamburguer.aberto span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.hpp-hamburguer.aberto span:nth-child(2) {
opacity: 0;
}
.hpp-hamburguer.aberto span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.hpp-painel {
display: block;
position: fixed;
top: 0;
right: 0;
width: min(82vw, 340px);
height: 100%;
padding: 90px 0 28px;
background: var(--verde-fundo);
box-shadow: -6px 0 40px rgba(10, 28, 18, .4);
overflow-y: auto;
z-index: 1001;
}
.hpp-painel[hidden] {
display: none;
}
.hpp-painel a {
display: block;
padding: 15px 28px; /* alvo de toque confortável */
color: rgba(255, 255, 255, .86);
font-family: var(--f-ui);
font-size: 13px;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hpp-painel a:hover,
.hpp-painel a:active,
.hpp-painel a:focus {
background: rgba(255, 255, 255, .07);
color: #fff;
}
.hpp-painel a.ativo {
color: #fff;
}
.hpp-painel a.ativo::before {
content: "";
display: inline-block;
width: 14px;
height: 1px;
margin-right: 10px;
vertical-align: middle;
background: var(--acao);
}
/* Reservas continua sendo a ação em destaque */
.hpp-painel a[href="reservas.php"] {
margin: 20px 28px 0;
padding: 14px 16px;
color: #fff;
background: var(--acao);
border: 0;
border-radius: var(--raio);
text-align: center;
font-weight: 500;
}
/* O item do WhatsApp é o único sem href de verdade (o menu-mobile.js
copia o onclick e põe href="#"). Vinha logo depois do botão de
Reservas com a mesma borda dos demais e ficava órfão. */
.hpp-painel a[href="#"] {
margin-top: 6px;
border-bottom: 0;
color: rgba(255, 255, 255, .58);
}
.hpp-fundo {
display: block;
position: fixed;
inset: 0;
background: rgba(10, 28, 18, .55);
z-index: 1000;
}
.hpp-fundo[hidden] {
display: none;
}
body.hpp-menu-aberto {
overflow: hidden;
}
}
@media only screen and (max-width: 767px) {
:root {
--barra: 62px;
--barra-min: 56px;
}
.navbar .container {
padding: 0 16px;
}
/* O logo tem 373px de largura numa tela de 414: ocupava quase tudo e
não sobrava espaço para o botão. */
.navbar .menu-top .logo img,
body.hpp-rolou .navbar .menu-top .logo img {
width: 150px;
}
}
/* -----------------------------------------------------------------
13b. AVISO DE ENVIO DE FORMULÁRIO (criado por js/interface.js)
Substitui o alert() do navegador — aquela caixa cinza do sistema, sem
identidade nenhuma e que ainda por cima trava a página até o clique.
Como funciona: os scripts PHP não mostram mais alert; eles voltam para
a tela do formulário com ?envio=ok, ?envio=erro ou ?envio=dados. O
interface.js lê esse parâmetro, monta o aviso e limpa a URL, para que
um F5 não mostre a mensagem de novo.
Sem JavaScript o visitante simplesmente volta ao formulário sem aviso —
igual ao que acontecia antes quando o alert era bloqueado.
----------------------------------------------------------------- */
.hpp-aviso {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.hpp-aviso-fundo {
position: absolute;
inset: 0;
background: rgba(8, 20, 14, .78);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
animation: hpp-aviso-entra-fundo .35s var(--curva) both;
}
.hpp-aviso-caixa {
position: relative;
width: min(460px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: clamp(32px, 5vw, 46px) clamp(26px, 4vw, 42px) clamp(28px, 4vw, 38px);
background: var(--areia);
border-radius: var(--raio-g);
box-shadow: 0 30px 80px rgba(8, 20, 14, .45);
text-align: center;
animation: hpp-aviso-entra .45s var(--curva) both;
}
.hpp-aviso-marca {
display: block;
width: 172px;
height: auto;
margin: 0 auto clamp(20px, 3vw, 28px);
}
/* --- o selo: círculo e sinal desenhados na hora --- */
.hpp-aviso-selo {
width: 76px;
height: 76px;
margin: 0 auto 22px;
}
.hpp-aviso-selo svg {
width: 100%;
height: 100%;
}
.hpp-aviso-selo circle,
.hpp-aviso-selo path {
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* O traço é desenhado escondendo a linha inteira (dasharray = comprimento)
e puxando o offset até zero. O círculo tem 2*pi*24 = 151 de perímetro;
os sinais têm folga de sobra em 60. */
.hpp-aviso-selo circle {
stroke-dasharray: 151;
stroke-dashoffset: 151;
animation: hpp-risca .6s var(--curva) .15s forwards;
}
.hpp-aviso-selo path {
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: hpp-risca .4s var(--curva) .55s forwards;
}
.hpp-aviso--ok .hpp-aviso-selo circle,
.hpp-aviso--ok .hpp-aviso-selo path {
stroke: var(--verde-vivo);
}
.hpp-aviso--erro .hpp-aviso-selo circle,
.hpp-aviso--erro .hpp-aviso-selo path {
stroke: var(--acao);
}
/* "confira os dados": verde-escuro da marca, para não soar como falha */
.hpp-aviso--dados .hpp-aviso-selo circle,
.hpp-aviso--dados .hpp-aviso-selo path {
stroke: var(--verde);
}
/* o ponto da exclamação aparece depois do traço */
.hpp-aviso--dados .hpp-aviso-selo path + path {
animation-delay: .8s;
}
/* a caixa recebe foco para o leitor de tela; não precisa de anel */
.hpp-aviso-caixa:focus {
outline: none;
}
/* a segunda perna do X sai um pouco depois da primeira */
.hpp-aviso--erro .hpp-aviso-selo path + path {
animation-delay: .72s;
}
.hpp-aviso-caixa h2 {
margin: 0 0 12px;
font-family: var(--f-display);
font-variant: normal;
font-stretch: normal;
font-size: clamp(26px, 3.4vw, 34px);
font-weight: 500;
line-height: 1.15;
color: var(--verde);
}
.hpp-aviso-caixa p {
margin: 0 auto;
max-width: 34ch;
font-size: 16px;
line-height: 1.65;
color: var(--tinta-2);
}
.hpp-aviso-acoes {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: clamp(24px, 3.5vw, 32px);
}
/* --- as animações --- */
@keyframes hpp-aviso-entra-fundo {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes hpp-aviso-entra {
from { opacity: 0; transform: translateY(18px) scale(.96); }
to { opacity: 1; transform: none; }
}
@keyframes hpp-risca {
to { stroke-dashoffset: 0; }
}
/* quem pediu menos movimento recebe o aviso pronto, sem desenho */
@media (prefers-reduced-motion: reduce) {
.hpp-aviso-fundo,
.hpp-aviso-caixa {
animation: none;
}
.hpp-aviso-selo circle,
.hpp-aviso-selo path {
stroke-dashoffset: 0;
animation: none;
}
}
/* a página atrás não rola enquanto o aviso está aberto */
body.hpp-aviso-aberto {
overflow: hidden;
}
/* -----------------------------------------------------------------
14. WHATSAPP FLUTUANTE (criado por js/interface.js)
No site antigo o WhatsApp era um link de texto no meio do menu,
apontando para web.whatsapp.com — que só funciona no computador. O
wa.me abre o aplicativo no celular, que é de onde vem a maior parte
das mensagens.
----------------------------------------------------------------- */
.hpp-zap {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 1020;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25d366;
color: #fff;
font-size: 27px;
text-decoration: none;
box-shadow: 0 8px 26px rgba(10, 28, 18, .32);
transition: transform .3s var(--curva), box-shadow .3s var(--curva);
}
.hpp-zap:hover,
.hpp-zap:focus {
color: #fff;
transform: scale(1.07);
box-shadow: 0 12px 34px rgba(10, 28, 18, .4);
}
/* some quando o painel do celular está aberto, para não cobrir o menu */
body.hpp-menu-aberto .hpp-zap {
display: none;
}
@media only screen and (max-width: 767px) {
.hpp-zap {
right: 16px;
bottom: 16px;
width: 52px;
height: 52px;
font-size: 25px;
}
}
/* -----------------------------------------------------------------
15. MOVIMENTO
Antes conviviam três regimes de transição (0.25s em layout2.css, 0.45s
e 0.2s em quartos.css) e vários elementos clicáveis não davam sinal
nenhum.
A revelação ao rolar só existe quando o JavaScript confirma que está
vivo (html.hpp-anima). Sem essa trava, um erro de script deixaria a
página inteira invisível.
----------------------------------------------------------------- */
a,
.btn,
.panel {
transition: color .25s var(--curva),
background-color .25s var(--curva),
border-color .25s var(--curva),
box-shadow .25s var(--curva);
}
/* ZOOM AO PASSAR O MOUSE — quem cresce é a imagem, não a caixa.
Antes o próprio .bg recebia `transform: scale(1.04)`. Como .bg é o
elemento que ocupa a moldura inteira, ele crescia PARA FORA dela: a foto
passava dos quatro lados enquanto a legenda, que não é transformada,
continuava parada na largura original. O resultado era a faixa escura da
legenda terminando antes da foto, como um retângulo marcado no meio da
imagem transbordada. Em piscinas.html dava para ver a foto escapando
~23px de cada lado.
Não bastava pôr `overflow:hidden` no .picture: ele é uma coluna do
Bootstrap com 15px de padding, e overflow corta na caixa de PADDING —
ainda escapariam 8px por lado.
A solução é separar quem clipa de quem cresce. O .bg passa a clipar, e
um pseudo-elemento dentro dele carrega a foto e cresce. A URL vem por
`background-image: inherit`, porque a foto está num style inline no
HTML de cada bloco (e `background-position: inherit` preserva os
enquadramentos manuais, como o `center -380px` da capa de piscinas).
Assim o zoom acontece DENTRO da moldura, que é o comportamento que se
espera, e a legenda continua casando com a borda da foto. */
.picture .bg.grow {
position: relative;
overflow: hidden;
transition: box-shadow .4s var(--curva);
}
.picture .bg.grow::before {
content: "";
position: absolute;
inset: 0;
background-image: inherit;
background-position: inherit;
background-size: cover;
background-repeat: no-repeat;
border-radius: inherit;
/* devagar de propósito: um movimento lento lê como sofisticado, um
movimento rápido lê como reação de botão */
transition: transform 1.1s var(--curva);
}
/* NEUTRALIZAR A REGRA ANTIGA — sem isto o conserto acima não vale nada.
layout2.css:238 declara `.grow:hover { transform: scale(1.025);
opacity:.90 }`. É uma classe mais uma pseudo-classe, (0,2,0). A regra
nova aqui é (0,4,0) e vence — mas só nas propriedades que ela DECLARA.
Enquanto ela mexia apenas em box-shadow, o `transform` da regra antiga
continuava valendo e escalava a CAIXA inteira, que é justamente o que
se queria evitar: a foto crescia para fora da moldura e a legenda
ficava mais estreita que ela.
`transform: none` e `opacity: 1` desarmam as duas heranças. O
`opacity:.90` também precisava sair: ele desbotava a foto no hover, o
que somado ao salto de escala dava o efeito exagerado. */
.picture .bg.grow:hover {
transform: none;
opacity: 1;
}
/* Zoom discreto: 3,5% em vez dos 6% anteriores, e sem a sombra saltando
junto. O movimento se percebe, não se anuncia. */
.picture .bg.grow:hover::before {
transform: scale(1.035);
}
@media (prefers-reduced-motion: reduce) {
.picture .bg.grow:hover::before {
transform: none;
}
}
html.hpp-anima .hpp-revela {
opacity: 0;
transform: translateY(22px);
transition: opacity .9s var(--curva), transform .9s var(--curva);
will-change: opacity, transform;
}
html.hpp-anima .hpp-revela.hpp-visivel {
opacity: 1;
transform: none;
}
/* quem prefere menos movimento, recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
html.hpp-anima .hpp-revela {
opacity: 1;
transform: none;
}
}
/* -----------------------------------------------------------------
16. TELAS ESTREITAS
Tudo que precisa desmontar as grades acima.
----------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
.hpp-vitrine {
gap: 14px;
}
.hpp-trilho {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hpp-numeros ul {
grid-template-columns: repeat(2, 1fr);
}
.hpp-rodape-grade {
grid-template-columns: 1fr 1fr;
}
.hpp-rodape-marca {
grid-column: 1 / -1;
}
}
@media only screen and (max-width: 767px) {
.segment3 .container {
padding: clamp(48px, 11vw, 70px) 18px;
}
.hpp-duplo,
.hpp-chegar {
grid-template-columns: 1fr;
gap: 30px;
}
.hpp-duplo--texto-direita {
direction: ltr;
}
/* no celular a foto vem antes do texto, como na leitura natural */
.hpp-duplo .hpp-foto {
order: -1;
aspect-ratio: 3 / 2;
}
.hpp-vitrine {
grid-template-columns: 1fr;
}
.hpp-cartao {
aspect-ratio: 4 / 3;
}
.hpp-cabeca {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.hpp-citacao {
max-width: none;
}
.navbar + .picture.picture-big {
height: 52vh;
min-height: 330px;
}
.hpp-rodape-grade {
grid-template-columns: 1fr;
gap: 34px;
}
.hpp-rodape-fim {
flex-direction: column;
align-items: flex-start;
}
footer .container {
padding-left: 18px;
padding-right: 18px;
}
}