Funciona sem JS — usa a GPU via translateZ + perspective
---------------------------------------------------------- */
.hh-css-parallax {
perspective: 1px;
perspective-origin: center top;
overflow: hidden;
height: 100vh;
position: relative;
}
.hh-cpp__bg {
position: absolute;
inset: 0;
/* translateZ(-1px) afasta do olho → precisa escalar para preencher */
transform: translateZ(-1px) scale(2);
transform-origin: center center;
background-size: cover;
background-position: center;
will-change: transform;
backface-visibility: hidden;
}
.hh-cpp__content {
position: relative;
z-index: 1;
/* translateZ(0) = plano do observador — rola à velocidade normal */
transform: translateZ(0);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100%;
padding: 4rem 6%;
color: var(--hh-on-dark);
}
/* ----------------------------------------------------------
.hh-3d-section — seção com transformação 3D suave no scroll
O GSAP anima rotateX + translateY via ScrollTrigger scrub
---------------------------------------------------------- */
.hh-3d-section {
perspective: 1200px;
perspective-origin: 50% 40%;
overflow: hidden;
isolation: isolate;
}
.hh-3d-section__inner {
transform-style: preserve-3d;
will-change: transform;
backface-visibility: hidden;
}
/* ----------------------------------------------------------
.hh-float-3d — elementos que 'flutuam' em 3D com o mouse
---------------------------------------------------------- */
.hh-float-3d {
transform-style: preserve-3d;
will-change: transform;
}
.hh-float-3d__layer {
will-change: transform;
backface-visibility: hidden;
}
.hh-float-3d__layer--deep { transform: translateZ(-40px) scale(1.04); }
.hh-float-3d__layer--mid { transform: translateZ(0px); }
.hh-float-3d__layer--front { transform: translateZ(30px); }
/* ----------------------------------------------------------
.hh-img-reveal — revelação de imagem com varredura dourada
Uso:
---------------------------------------------------------- */
.hh-img-reveal {
position: relative;
overflow: hidden;
display: block;
isolation: isolate;
}
.hh-img-reveal__bar {
/* Barra dourada que varre a imagem antes de revelar */
position: absolute;
inset: 0;
background: var(--hh-gold, #c9a961);
transform-origin: left center;
transform: scaleX(0);
z-index: 2;
pointer-events: none;
}
.hh-img-reveal__inner {
display: block;
width: 100%;
will-change: clip-path, transform;
/* estado inicial — clipado pelo JS */
clip-path: inset(0 100% 0 0);
}
.hh-img-reveal__inner img {
width: 100%;
display: block;
transform-origin: left center;
}
/* ----------------------------------------------------------
CSS Scroll-Driven Animations (progressivo — Chrome ≥115)
Funciona em paralelo com GSAP; navegadores sem suporte
simplesmente ignoram o bloco @supports.
---------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
/* Barra de progresso — fallback CSS puro caso o JS não carregue */
@keyframes hh-scroll-prog {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#hh-scroll-progress {
animation: hh-scroll-prog linear both;
animation-timeline: scroll(root block);
}
/* Reveal de seções via CSS puro (complementa o GSAP) */
@keyframes hh-section-reveal {
from { opacity: 0; translate: 0 48px; }
to { opacity: 1; translate: 0 0; }
}
.hh-section[data-reveal] {
animation: hh-section-reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 35%;
/* GSAP vai sobrescrever com overwrite:true quando ativo */
}
/* Fundo paralaxado em seções opt-in */
@keyframes hh-parallax-bg {
from { transform: translateY(0); }
to { transform: translateY(30%); }
}
.hh-parallax-section::before {
animation: hh-parallax-bg linear both;
animation-timeline: view(block);
animation-range: entry exit;
}
}
/* =========================================================
HERO — ANIMAÇÃO REVEAL NO LOAD
========================================================= */
@keyframes hhHeroReveal {
from {
opacity: 0;
transform: translateY(40px) scale(.97);
letter-spacing: .25em;
}
to {
opacity: 1;
transform: translateY(0) scale(1);
letter-spacing: inherit;
}
}
@keyframes hhFadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hhLineGrow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.hh-hero__title {
animation: hhHeroReveal .9s cubic-bezier(.16,1,.3,1) both;
animation-delay: .15s;
}
.hh-hero__sub,
.hh-hero__text {
animation: hhFadeUp .8s cubic-bezier(.16,1,.3,1) both;
animation-delay: .45s;
}
.hh-hero__actions,
.hh-hero__ctas {
animation: hhFadeUp .8s cubic-bezier(.16,1,.3,1) both;
animation-delay: .7s;
}
.hh-hero__eyebrow {
animation: hhFadeUp .6s cubic-bezier(.16,1,.3,1) both;
animation-delay: .05s;
color: var(--hh-text-color, var(--hh-gold, #d6b55d));
}
/* =========================================================
COUNTER — animação numérica
========================================================= */
.hh-stat__num,
[data-count] {
display: inline-block;
transition: color .3s;
}
/* highlight dourado enquanto conta */
.hh-stat--counting .hh-stat__num,
.hh-stat--counting [data-count] { color: var(--hh-gold, #d6b55d); }
/* =========================================================
SECTION REVEAL — efeito de entrada nas seções
========================================================= */
.hh-section[data-reveal],
.hh-section-dark[data-reveal],
.hh-section-light[data-reveal] {
opacity: 0;
transform: translateY(40px);
transition: opacity .8s ease, transform .8s ease;
}
.hh-section[data-reveal].is-visible,
.hh-section-dark[data-reveal].is-visible,
.hh-section-light[data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* =========================================================
SHIMMER — acento decorativo dourado (linhas)
========================================================= */
.hh-shimmer-line {
display: block;
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--hh-gold, #d6b55d), transparent);
margin: .75rem auto;
}
.hh-shimmer-line--left { margin-left: 0; }
/* =========================================================
HOVER CARD ELEVATE
========================================================= */
.hh-card,
.hh-exp-card,
.hh-benefit,
.hh-apto-tipologia {
transition: transform .3s ease, box-shadow .3s ease, opacity .5s ease;
}
.hh-card:hover,
.hh-exp-card:hover,
.hh-benefit:hover {
transform: translateY(-6px) !important;
box-shadow: 0 20px 40px rgba(63,43,12,.12);
}
/* =========================================================
SCROLL FX — CURTAIN (transição de página)
========================================================= */
#hh-curtain {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
pointer-events: none;
}
.hh-curtain__bar {
flex: 1;
background: #0a0a0a;
transform-origin: top;
}
.hh-curtain__bar--1 { background: #0a0a0a; }
.hh-curtain__bar--2 { background: #111; }
.hh-curtain__bar--3 { background: var(--hh-gold,#c9a961); }
/* =========================================================
SCROLL FX — SPLIT TEXT
========================================================= */
.hh-sw { /* split-wrap: esconde o excesso vertical */
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: inherit;
}
.hh-si { /* split-inner: o bloco que sobe */
display: inline-block;
line-height: inherit;
}
/* =========================================================
SCROLL FX — BARRA DE PROGRESSO SUPERIOR
(JS atualiza scaleX via ScrollTrigger; CSS scroll-driven
animation é o fallback se o JS ainda não carregou)
========================================================= */
#hh-scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
90deg,
#a07832 0%,
var(--hh-gold, #c9a961) 50%,
#ffe28a 100%
);
transform: scaleX(0);
transform-origin: left;
z-index: 99998;
pointer-events: none;
box-shadow: 0 0 10px rgba(201,169,97,.8), 0 1px 0 rgba(201,169,97,.3);
backface-visibility: hidden;
will-change: transform;
}
/* =========================================================
SCROLL FX — MARQUEE (cidades)
========================================================= */
.hh-cities--marquee {
overflow: hidden !important;
display: block !important;
padding: 0 !important;
mask-image: linear-gradient(
90deg,
transparent 0%,
#000 8%,
#000 92%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
#000 8%,
#000 92%,
transparent 100%
);
}
.hh-marquee__track {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0;
will-change: transform;
width: max-content;
}
.hh-marquee__track .hh-city {
flex-shrink: 0;
padding: .5rem 2.5rem;
white-space: nowrap;
}
/* =========================================================
SCROLL FX — clip-path em imagens (não quebra layout)
========================================================= */
.hh-card__img,
.img-full,
[data-parallax-img] img {
will-change: clip-path, transform;
}
/* Wrapper de imagem paralaxada em seções: ocupa 100% da largura */
[data-parallax-img] {
display: block;
width: 100%;
}
/* Imagem complexo — margem superior para separar dos stats */
.hh-complexo-img {
width: 100%;
display: block;
margin-top: 20px;
}
/* =========================================================
PRELOADER
========================================================= */
#hh-preloader {
position: fixed;
inset: 0;
z-index: 999999;
background: #060606;
display: flex;
align-items: center;
justify-content: center;
}
.hh-pl__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.hh-pl__logo svg {
width: 280px;
height: auto;
display: block;
filter: drop-shadow(0 0 18px rgba(201,169,97,.45));
}
.hh-pl__logo img {
width: 280px;
max-width: min(70vw, 320px);
height: auto;
max-height: 84px;
object-fit: contain;
display: block;
filter: drop-shadow(0 0 18px rgba(201,169,97,.35));
}
.hh-pl__bar-wrap {
width: 220px;
height: 2px;
background: rgba(201,169,97,.18);
border-radius: 99px;
overflow: hidden;
}
.hh-pl__bar {
height: 100%;
width: 100%;
background: var(--hh-gold, #c9a961);
border-radius: 99px;
transform: scaleX(0);
transform-origin: left;
box-shadow: 0 0 10px rgba(201,169,97,.6);
}
.hh-pl__label {
font-family: 'Apex Sans', sans-serif;
font-size: .65rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(201,169,97,.55);
margin: 0;
}
/* =========================================================
CUSTOM CURSOR
========================================================= */
.hh-has-cursor,
.hh-has-cursor * { cursor: none !important; }
#hh-cursor-dot {
position: fixed;
top: 0; left: 0;
width: 8px; height: 8px;
background: var(--hh-gold, #c9a961);
border-radius: 50%;
z-index: 999997;
pointer-events: none;
transition: transform .05s, width .25s, height .25s, background .25s;
will-change: transform;
}
#hh-cursor-ring {
position: fixed;
top: 0; left: 0;
width: 40px; height: 40px;
border: 1.5px solid rgba(201,169,97,.65);
border-radius: 50%;
z-index: 999996;
pointer-events: none;
will-change: transform;
transition: width .3s, height .3s, border-color .3s, opacity .3s;
}
#hh-cursor-dot.hh-cursor--hover {
width: 14px; height: 14px;
background: var(--hh-white);
}
#hh-cursor-ring.hh-cursor--hover {
width: 56px; height: 56px;
border-color: rgba(201,169,97,1);
}
#hh-cursor-ring.hh-cursor--click {
width: 30px; height: 30px;
border-color: var(--hh-white);
opacity: .6;
}
/* =========================================================
3-D TILT — cards
========================================================= */
.hh-tilt {
transform-style: preserve-3d;
will-change: transform;
overflow: hidden; /* contém o glare */
backface-visibility: hidden;
}
.hh-tilt__glare {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 2;
transition: background .15s;
mix-blend-mode: overlay;
}
/* =========================================================
SPLIT-WORD REVEAL — overflow clip por palavra
(gerado pelo JS wrapWords() no scroll-fx.js)
========================================================= */
.hh-sw {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: inherit;
}
.hh-si {
display: inline-block;
/* estado inicial definido pelo GSAP (yPercent 108 → 0) */
}
/* =========================================================
HERO CANVAS PARTICLES
========================================================= */
#hh-hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.hh-hero__content { position: relative; z-index: 2; display: none; }
/* =========================================================
NÚMERO DE SEÇÃO — lateral
========================================================= */
#hh-section-counter {
position: fixed;
right: 2rem;
bottom: 2.5rem;
z-index: 9000;
display: flex;
align-items: baseline;
gap: .2rem;
pointer-events: none;
font-family: 'Apex Sans', sans-serif;
letter-spacing: .06em;
color: rgba(201,169,97,.45);
line-height: 1;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.hh-sc__num {
font-size: 2.8rem;
color: var(--hh-gold, #c9a961);
opacity: .9;
display: inline-block;
}
.hh-sc__slash {
font-size: 1.1rem;
margin: 0 .1rem;
opacity: .45;
}
.hh-sc__total {
font-size: 1.1rem;
opacity: .45;
}
/* =========================================================
PAGE — GRAMADO
========================================================= */
/* Numbers bar */
.hh-gramado-numbers,
.hh-Gramado-numbers {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--hh-black);
border-top: 2px solid var(--hh-gold, #d6b55d);
}
.hh-gramado-numbers__item,
.hh-Gramado-numbers__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 36px 20px;
border-right: 1px solid rgba(255,255,255,.08);
text-align: center;
}
.hh-gramado-numbers__item:last-child,
.hh-Gramado-numbers__item:last-child { border-right: none; }
.hh-gramado-numbers__item strong,
.hh-Gramado-numbers__item strong {
font-family: var(--hh-font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 100;
color: var(--hh-gold, #d6b55d);
line-height: 1;
display: block;
margin-bottom: 8px;
}
.hh-gramado-numbers__item span,
.hh-Gramado-numbers__item span {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255,255,255,.55);
}
/* Two-column: gastronomia */
.hh-gramado-twocol,
.hh-Gramado-twocol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.hh-gramado-twocol__media,
.hh-Gramado-twocol__media {
position: relative;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 4/3;
}
.hh-gramado-twocol__media img,
.hh-Gramado-twocol__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s ease;
}
.hh-gramado-twocol__media:hover img,
.hh-Gramado-twocol__media:hover img { transform: scale(1.04); }
.hh-gramado-twocol__badge,
.hh-Gramado-twocol__badge {
position: absolute;
bottom: 20px;
left: 20px;
background: var(--hh-gold, #d6b55d);
color: var(--hh-black);
font-size: .7rem;
font-weight: 700;
letter-spacing: .15em;
padding: 6px 14px;
}
.hh-gramado-list,
.hh-Gramado-list {
list-style: none;
padding: 0;
margin: 24px 0 0;
}
.hh-gramado-list li,
.hh-Gramado-list li {
padding: 10px 0 10px 28px;
position: relative;
font-size: .95rem;
color: var(--hh-gold, #d6b55d);
border-bottom: 1px solid var(--hh-border-light);
}
.hh-gramado-list li::before,
.hh-Gramado-list li::before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: var(--hh-gold, #d6b55d);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Atrações cards */
.hh-Gramado-cards,
.hh-gramado-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 56px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.hh-gramado-card,
.hh-Gramado-card {
width: 100%;
max-width: none;
background: #232424 !important;
border: 1px solid rgba(201,169,97,.22);
border-top: 2px solid var(--hh-gold, #d6b55d);
border-radius: 12px;
box-shadow: 0 18px 36px rgba(63,43,12,.08);
padding: 32px 24px;
transition: background .3s, transform .3s;
}
.hh-gramado-card:hover,
.hh-Gramado-card:hover {
background: var(--hh-black) !important;
transform: translateY(-4px);
}
.hh-gramado-card__icon,
.hh-Gramado-card__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(201,169,97,.22);
border-radius: 8px;
color: var(--color-text-primary);
margin-bottom: 16px;
flex-shrink: 0;
transition: border-color .3s;
overflow: hidden;
line-height: 0;
}
.hh-gramado-card__icon svg,
.hh-Gramado-card__icon svg {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
stroke: var(--color-text-primary);
display: block;
}
.hh-gramado-card:hover .hh-gramado-card__icon,
.hh-gramado-card:hover .hh-Gramado-card__icon,
.hh-Gramado-card:hover .hh-gramado-card__icon,
.hh-Gramado-card:hover .hh-Gramado-card__icon {
border-color: rgba(201,169,97,.42);
}
.hh-gramado-card__title,
.hh-Gramado-card__title {
font-family: var(--hh-font-display);
font-size: 1rem;
letter-spacing: .1em;
color: var(--color-text-dark);
margin: 0 0 12px;
}
.hh-gramado-card p,
.hh-Gramado-card p {
font-size: .875rem;
color: #ffffff;
line-height: 1.6;
margin: 0;
}
/* Seasons / Estações */
.hh-seasons,
.hh-Seasons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 56px;
border: 1px solid var(--hh-border-light);
overflow: hidden;
border-radius: 4px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.hh-season,
.hh-Season {
padding: 40px 28px;
border-right: 1px solid var(--hh-border-light);
transition: background .3s;
}
.hh-season:last-child,
.hh-Season:last-child { border-right: none; }
.hh-season:hover,
.hh-Season:hover { background: var(--hh-lighter-bg); }
.hh-season__header,
.hh-Season__header {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--hh-border-light);
}
.hh-season__emoji,
.hh-Season__emoji {
width: 42px;
height: 42px;
font-size: 0;
display: block;
margin-bottom: 12px;
color: #D4AF37;
}
.hh-season__emoji svg,
.hh-Season__emoji svg {
width: 100%;
height: 100%;
display: block;
}
.hh-season__header h3,
.hh-Season__header h3 {
font-family: var(--hh-font-display);
font-size: .9rem;
letter-spacing: .15em;
color: var(--hh-black);
margin: 0 0 8px;
}
.hh-season__header strong,
.hh-Season__header strong {
font-size: .8rem;
color: var(--hh-text-gray);
line-height: 1.5;
display: block;
}
/* Headings follow centralized font variable */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hh-font-heading) !important;
}
.hh-season__header span,
.hh-Season__header span { color: var(--hh-gold, #d6b55d); font-weight: 700; }
.hh-season ul,
.hh-Season ul {
list-style: none;
padding: 0;
margin: 0;
}
.hh-season ul li,
.hh-Season ul li {
font-size: .85rem;
color: #ffffff;
padding: 6px 0 6px 18px;
position: relative;
border-bottom: 1px dashed var(--hh-border-light);
}
.hh-season ul li::before,
.hh-Season ul li::before {
position: absolute;
left: 0;
color: var(--hh-gold, #d6b55d);
font-size: .75rem;
}
.hh-season ul li:last-child,
.hh-Season ul li:last-child { border-bottom: none; }
/* color accents per season */
.hh-season--spring .hh-season__header h3 { color: var(--hh-season-spring); }
.hh-season--summer .hh-season__header h3 { color: var(--hh-season-summer); }
.hh-season--autumn .hh-season__header h3 { color: var(--hh-season-autumn); }
.hh-season--winter .hh-season__header h3 { color: var(--hh-season-winter); }
.hh-page--gramado .hh-season:not(:hover) .hh-season__header strong,
.hh-page--gramado .hh-Season:not(:hover) .hh-Season__header strong {
color: rgba(255,255,255,.72);
}
.hh-page--gramado .hh-season:not(:hover) ul li,
.hh-page--gramado .hh-Season:not(:hover) ul li {
color: rgba(255,255,255,.82);
border-bottom-color: rgba(255,255,255,.14);
}
/* Eventos */
.hh-gramado-eventos-wrap,
.hh-Gramado-eventos-wrap {
background: var(--hh-black);
padding: 80px 5vw;
}
.hh-gramado-eventos,
.hh-Gramado-eventos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.08);
border-radius: 4px;
overflow: hidden;
margin-top: 40px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.hh-evento,
.hh-Evento {
background: #0a0a0a;
padding: 32px 24px;
display: flex;
gap: 20px;
transition: background .3s;
}
.hh-evento:hover,
.hh-Evento:hover { background: #111; }
.hh-evento__mes,
.hh-Evento__mes {
display: block;
flex: 0 0 96px;
font-family: var(--hh-font-display);
font-size: 1.1rem;
letter-spacing: .1em;
line-height: 1.35;
color: var(--hh-gold, #d6b55d);
min-width: 96px;
padding-top: 3px;
}
.hh-evento__body,
.hh-Evento__body {
flex: 1;
min-width: 0;
}
.hh-evento__body h4,
.hh-Evento__body h4 {
font-family: var(--hh-font-display);
font-size: .9rem;
letter-spacing: .08em;
color: var(--hh-white);
margin: 0 0 8px;
}
.hh-evento__body p,
.hh-Evento__body p {
font-size: .8rem;
color: rgba(255,255,255,.5);
line-height: 1.55;
margin: 0;
}
/* Itinerary */
.hh-itinerary,
.hh-Itinerary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin-top: 56px;
background: var(--hh-bg-card);
border: 1px solid rgba(255,255,255,.07);
border-radius: 4px;
overflow: hidden;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.hh-itinerary__day,
.hh-Itinerary__day {
background: rgba(0,0,0,.3);
padding: 40px 32px;
transition: background .3s;
}
.hh-itinerary__day:hover,
.hh-Itinerary__day:hover { background: rgba(255,255,255,.04); }
.hh-itinerary__num,
.hh-Itinerary__num {
font-family: var(--hh-font-display);
font-size: 4rem;
line-height: 1;
color: var(--hh-gold, #d6b55d);
opacity: .25;
margin-bottom: 20px;
}
.hh-itinerary__content h3,
.hh-Itinerary__content h3 {
font-family: var(--hh-font-display);
font-size: .95rem;
letter-spacing: .12em;
color: var(--hh-gold, #d6b55d);
margin: 0 0 24px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.hh-itinerary__list,
.hh-Itinerary__list {
list-style: none;
padding: 0;
margin: 0;
}
.hh-itinerary__list li,
.hh-Itinerary__list li {
font-size: .875rem;
color: rgba(255,255,255,.7);
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,.06);
display: flex;
gap: 12px;
align-items: baseline;
}
.hh-itinerary__list li:last-child,
.hh-Itinerary__list li:last-child { border-bottom: none; }
.hh-it-time,
.hh-It-time {
font-size: .72rem;
font-weight: 700;
color: var(--hh-gold, #d6b55d);
letter-spacing: .08em;
min-width: 36px;
flex-shrink: 0;
}
/* Map */
.hh-gramado-map-wrap,
.hh-Gramado-map-wrap {
display: grid;
grid-template-columns: 380px 1fr;
gap: 48px;
align-items: stretch;
margin-top: 48px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.hh-gramado-distance,
.hh-Gramado-distance {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 4px;
}
.hh-gramado-distance__item,
.hh-Gramado-distance__item {
background: var(--hh-bg-card);
border-left: 3px solid var(--hh-gold, #d6b55d);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 16px;
}
.hh-gramado-distance__item strong,
.hh-Gramado-distance__item strong {
font-family: var(--hh-font-display);
font-size: 1.4rem;
color: var(--hh-gold, #d6b55d);
min-width: 60px;
}
.hh-gramado-distance__item span,
.hh-Gramado-distance__item span {
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--hh-white);
}
.hh-gramado-map-embed,
.hh-Gramado-map-embed {
border-radius: 4px;
overflow: hidden;
min-height: 400px;
box-shadow: 0 12px 40px rgba(0,0,0,.15);
}
.hh-gramado-map-embed iframe,
.hh-Gramado-map-embed iframe { display: block; height: 100%; min-height: 400px; }
/* ---- Responsive: Gramado page ---- */
@media (max-width: 1100px) {
.hh-gramado-cards,
.hh-Gramado-cards { grid-template-columns: repeat(2, 1fr); }
.hh-seasons,
.hh-Seasons { grid-template-columns: repeat(2, 1fr); }
.hh-gramado-eventos,
.hh-Gramado-eventos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
.hh-gramado-twocol,
.hh-Gramado-twocol { gap: 40px; }
.hh-gramado-map-wrap,
.hh-Gramado-map-wrap { grid-template-columns: 1fr; }
.hh-gramado-map-embed,
.hh-Gramado-map-embed { min-height: 320px; }
}
@media (max-width: 768px) {
.hh-gramado-numbers,
.hh-Gramado-numbers { grid-template-columns: repeat(2, 1fr); }
.hh-gramado-twocol,
.hh-Gramado-twocol { grid-template-columns: 1fr; gap: 28px; }
.hh-gramado-cards,
.hh-Gramado-cards { grid-template-columns: 1fr; }
.hh-seasons,
.hh-Seasons { grid-template-columns: 1fr 1fr; }
.hh-season,
.hh-Season { border-right: none; border-bottom: 1px solid var(--hh-border-light); }
.hh-itinerary,
.hh-Itinerary { grid-template-columns: 1fr; }
.hh-gramado-eventos,
.hh-Gramado-eventos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.hh-gramado-numbers,
.hh-Gramado-numbers { grid-template-columns: 1fr 1fr; }
.hh-seasons,
.hh-Seasons { grid-template-columns: 1fr; }
.hh-gramado-eventos,
.hh-Gramado-eventos { grid-template-columns: 1fr; }
}
/* ---------- San Juan visual overrides (site-wide) ---------- */
/* Align whole theme to the San Juan visual line while keeping existing content */
/* Cards, icons, headings, CTAs and surfaces */
/* Keep this block near the end so it wins in the cascade */
/* Backgrounds and surfaces */
.hh-card, .hh-post-card, article.hh-post-card, .hh-area-card, .hh-widget, .hh-ec-card {
background: var(--hh-bg-card) !important;
color: var(--hh-on-dark) !important;
border-color: rgba(214,181,93,0.08) !important;
margin-left: 30px;
padding: 20px;
}
/* Card titles and important headings in brand gold */
.hh-post-card__title, .hh-card h2, .hh-card h3, .hh-ec-card h1, .hh-ec-card h4, .hh-section__title, .hh-section h2, .hh-section h3 {
color: var(--hh-text-color, var(--hh-gold, #d6b55d)) !important;
font-family: var(--hh-font-title) !important;
}
/* Icons (SVG) forced to brand gold */
svg, .hh-ec-card__icon svg, .hh-benefit-icon svg, .hh-area-icon svg, .hh-destino-cat__icon svg, .hh-contact-inline a svg {
fill: #d6b55d00 !important;
stroke: var(--hh-gold, #d6b55d) !important;
color: var(--hh-gold, #d6b55d) !important;
}
/* Lists inside cards should be white for readability */
.hh-ec-card ul li, .hh-card ul li, .hh-check-list li { color: var(--hh-on-dark); }
/* Buttons / CTAs — primary filled gold, outline uses border in gold */
.hh-btn--primary, .hh-btn--primary:visited { background: var(--hh-gold, #d6b55d) !important; color: var(--hh-text-color, var(--hh-black)) !important; border-color: var(--hh-gold, #d6b55d) !important; }
.hh-btn--outline { background: transparent !important; color: var(--hh-text-color, var(--hh-gold, #d6b55d)) !important; border: 1.5px solid var(--hh-gold, #d6b55d) !important; }
/* Hero and headings scale to match San Juan style */
.hh-hero, .hero, .site-hero { color: var(--hh-on-dark); }
.hh-hero h1, .site-hero h1, .entry-header h1 { color: var(--hh-text-color, var(--hh-gold, #d6b55d)) !important; font-family: 'apex-sans', Georgia, "Times New Roman", serif !important; font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: .02em; }
.hh-hero .hh-hero__sub, .site-hero .hh-hero__sub { color: var(--hh-text-color, rgba(255,255,255,.92)); }
/* Stats: ensure numbers and units are readable (already tuned) */
.hh-stats, .hh-stats-row { background: var(--hh-bg-card) !important; }
/* Ensure logo stays left and doesn't overlap navigation */
#masthead .site-branding { margin-right: 12px; }
/* Small layout tweak: center content containers to San Juan-like width */
.container, .hh-container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
/* Accessibility: keep sufficient contrast for links in cards */
.hh-card a, .hh-ec-card a { color: var(--hh-gold, #d6b55d) !important; }
/* End of San Juan visual overrides */
/* ---------- Final brand lock (override any palette previews) ---------- */
/* This block is intentionally last so it wins in the cascade. It ensures
the entire site uses the selected brand values (San Juan alignment). */
:root {
--bde-font-size-ratio: 1.35;
--bde-base-font-size: 16px;
--bde-h6-font-size: var(--bde-base-font-size);
--bde-h5-font-size: calc(var(--bde-h6-font-size) * var(--bde-font-size-ratio));
--bde-h4-font-size: calc(var(--bde-h5-font-size) * var(--bde-font-size-ratio));
--bde-h3-font-size: calc(var(--bde-h4-font-size) * var(--bde-font-size-ratio));
--bde-h2-font-size: calc(var(--bde-h3-font-size) * var(--bde-font-size-ratio));
--bde-h1-font-size: calc(var(--bde-h2-font-size) * var(--bde-font-size-ratio));
--color-gold: #d6b55d;
--hh-gold: var(--color-gold, #d6b55d);
--hh-gold-light: #f3d79a;
--hh-gold-dark: #b58f44;
--hh-bg-card: #232424;
--hh-bg-card-hover: #2b2a2a;
--hh-font-heading: 'Apex Sans', 'ITC Avant Garde Gothic Pro', 'ITC Avant Garde Gothic Std', 'Avant Garde', 'Montserrat', 'Open Sans', sans-serif;
--hh-font-body: 'Source Sans Pro', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--hh-font-title: 'Apex Sans', 'ITC Avant Garde Gothic Pro', 'Montserrat', 'Open Sans', sans-serif;
}
/* Also apply to palette classes to be safe */
body.hh-palette-premium-brand,
body.hh-palette-premium-emerald,
body.hh-palette-premium-olive,
body.hh-palette-premium-teal {
--color-gold: #d6b55d;
--hh-gold: var(--color-gold, #d6b55d);
--hh-bg-card: #232424;
--hh-bg-card-hover: #2b2a2a;
}
/* Nav link color: black (default) → white (scrolled) */
#masthead.scrolled .hh-nav-link {
color: var(--hh-white) !important;
}
/* =========================================================
SCROLL FX — reduced-motion: desativa tudo
========================================================= */
@media (prefers-reduced-motion: reduce) {
#hh-preloader { display: none !important; }
#hh-curtain,
#hh-scroll-progress { display: none !important; }
#hh-cursor-dot,
#hh-cursor-ring { display: none !important; }
.hh-has-cursor,
.hh-has-cursor * { cursor: auto !important; }
.hh-sw { overflow: visible; }
.hh-si { transform: none !important; opacity: 1 !important; }
.hh-card__img,
.img-full,
[data-parallax-img] img { clip-path: none !important; transform: none !important; }
}
/* =========================================================
HERO — PÁGINA INTERNA
========================================================= */
.hh-hero--inner {
min-height: clamp(420px, 62vh, 700px);
height: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
align-items: stretch;
padding: clamp(2rem, 4vw, 3rem) max(2rem, calc((100vw - 1320px) / 2));
position: relative;
overflow: hidden;
color: var(--hh-white);
}
.hh-hero--inner::before {
grid-column: 1;
grid-row: 1;
min-height: clamp(420px, 62vh, 700px);
background: inherit;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hh-hero--inner .hh-hero__bg {
transform: none !important; /* remove parallax em páginas internas */
}
.hh-hero--inner .hh-hero__content {
grid-column: 2;
grid-row: 1;
min-height: clamp(420px, 62vh, 700px);
padding: clamp(2rem, 4vw, 4rem);
background: var(--hh-bg-card);
position: relative;
z-index: 2;
text-align: left;
max-width: none;
display: flex;
flex-direction: column;
justify-content: center;
transform: none !important;
}
.hh-hero--inner .hh-hero__title {
color: var(--hh-text-color, var(--hh-white))!important;
}
.hh-hero--inner > .hh-page-shell {
grid-column: 1 / -1;
grid-row: 1;
display: grid;
place-items: center;
z-index: 2;
}
.hh-hero--inner > .hh-hero__title--outside {
grid-column: 1 / -1;
grid-row: 1;
align-self: center;
justify-self: center;
z-index: 2;
}
.hh-hero--inner > .hh-page-shell > .hh-hero__title--outside {
justify-self: center;
align-self: center;
}
.hh-hero--inner .hh-hero__title span {
color: var(--hh-text-color, var(--hh-sj-accent2));
}
.hh-hero--inner .hh-hero__sub {
color: var(--hh-text-color, rgba(255,255,255,.95));
opacity: 1;
max-width: 30rem;
}
/* Páginas internas: manter layout e centralizar somente o texto do hero */
body.page .hh-hero--inner .hh-hero__content {
text-align: center;
align-items: center;
}
body.page .hh-hero--inner .hh-hero__sub {
margin-left: auto;
margin-right: auto;
}
.hh-page--complexo .hh-hero--inner .hh-hero__eyebrow {
color: var(--hh-sj-accent3);
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.hh-page--complexo .hh-hero--inner .hh-hero__title {
color: var(--hh-text-color, var(--hh-sj-text-light));
text-shadow: 0 4px 22px rgba(0,0,0,.55);
}
.hh-page--complexo .hh-hero--inner .hh-hero__title span {
text-shadow: 0 6px 20px rgba(58,20,92,.55), 0 2px 10px rgba(0,0,0,.45);
}
.hh-page--complexo .hh-hero--inner .hh-hero__sub {
color: var(--hh-text-color, rgba(255,253,248,.96));
opacity: 1;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* Hero específico da página Galeria */
.hh-page--galeria .hh-hero--inner .hh-hero__overlay {
background: linear-gradient(115deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,.48) 55%, rgba(8,8,8,.30) 100%);
}
.hh-page--galeria .hh-hero--inner .hh-hero__title {
color: var(--hh-text-color, var(--hh-sj-text-light));
text-shadow: 0 4px 20px rgba(0,0,0,.52);
}
.hh-page--galeria .hh-hero--inner .hh-hero__sub {
color: var(--hh-text-color, rgba(255,253,248,.95));
opacity: 1;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
@media (max-width: 1024px) {
.hh-hero--inner {
grid-template-columns: 1fr;
padding: 16px 16px 0;
}
.hh-hero--inner::before,
.hh-hero--inner .hh-hero__content {
grid-column: 1;
grid-row: auto;
}
.hh-hero--inner::before {
min-height: 300px;
}
.hh-hero--inner .hh-hero__content {
min-height: 0;
}
}
/* =========================================================
APARTAMENTOS — TABS DE TIPOLOGIA
========================================================= */
.hh-apto-tipologias-section {
padding-bottom: 0;
}
.hh-apto-tabs {
display: flex;
gap: 0;
color: var(--hh-text-color, var(--color-text-dark));
border-bottom: 2px solid var(--hh-border-light);
flex-wrap: wrap;
}
.hh-apto-tab__btn {
display: flex;
align-items: center;
gap: 14px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
cursor: pointer;
font-family: 'Apex Sans', sans-serif;
font-size: 1rem;
letter-spacing: 2px;
transition: color .25s, border-color .25s;
color: var(--hh-text-color, var(--color-text-primary));
}
.hh-apto-tab__btn:hover {
color: var(--hh-text-color, var(--hh-text-dark));
}
.hh-apto-tab__btn.is-active {
color: var(--hh-text-color, var(--hh-gold, #d6b55d));
border-bottom-color: var(--hh-text-color, var(--hh-gold, #d6b55d));
}
.hh-apto-tab__num {
font-size: .7rem;
opacity: .55;
letter-spacing: 1px;
}
.hh-apto-tab__name {
letter-spacing: 2.5px;
color: var(--hh-gold, inherit);
}
/* ── Painéis ── */
.hh-apto-panel {
display: none;
opacity: 0;
transform: translateY(18px);
transition: opacity .4s ease, transform .4s ease;
}
.hh-apto-panel.is-active {
display: block;
opacity: 1;
transform: none;
animation: hh-panel-in .45s ease forwards;
}
@keyframes hh-panel-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; }
}
.hh-apto-panel__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 560px;
}
.hh-apto-panel__media {
position: relative;
overflow: hidden;
}
.hh-apto-panel__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease;
}
.hh-apto-panel__media:hover img {
transform: scale(1.04);
}
.hh-apto-panel__badge {
position: absolute;
bottom: 24px;
left: 24px;
background: var(--hh-gold, #d6b55d);
color: var(--hh-text-color, var(--hh-black));
font-family: 'Apex Sans', sans-serif;
font-size: .75rem;
font-weight: 600;
letter-spacing: 1.5px;
padding: 10px 20px;
text-transform: uppercase;
}
.hh-apto-panel__badge strong {
font-size: 1rem;
display: block;
margin-top: 2px;
color: var(--hh-text-color, inherit);
}
.hh-apto-panel__text {
padding: 60px 56px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--hh-bg-card);
}
.hh-apto-panel__title {
font-family: 'Apex Sans', sans-serif;
font-size: clamp(28px, 3.5vw, 44px);
letter-spacing: 3px;
color: var(--hh-text-color, var(--hh-text-dark));
margin-bottom: 16px;
line-height: 1;
}
.hh-apto-panel__ctas {
margin-top: 32px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* ── Diferenciais rápidos ── */
.hh-apto-perks {
background: var(--hh-black);
padding: 56px 6%;
}
.hh-apto-perks__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
.hh-apto-perk {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
color: var(--hh-white);
}
.hh-apto-perk__icon {
width: 52px;
height: 52px;
color: var(--color-text-primary);
}
.hh-apto-perk__icon svg {
width: 100%;
height: 100%;
}
.hh-apto-perk span {
font-size: .72rem;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
color: var(--hh-text-color, var(--hh-white));
opacity: .8;
}
/* =========================================================
GALERIA — FILTRO
========================================================= */
.hh-gallery-wrap {
margin-top: 56px;
}
/* =========================================================
GALERIA — CARROSSEL PRINCIPAL
========================================================= */
.hh-gal-carousel {
display: grid;
grid-template-columns: minmax(0, 1fr) 56px;
gap: 14px;
margin-bottom: 28px;
align-items: stretch;
}
.hh-gal-carousel__viewport {
position: relative;
min-height: 420px;
border: 1px solid rgba(201,169,97,.24);
background: #111;
overflow: hidden;
}
.hh-gal-carousel__slide {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
.hh-gal-carousel__slide.is-active {
opacity: 1;
pointer-events: auto;
}
.hh-gal-carousel__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hh-gal-carousel__slide figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 14px 18px;
font-size: .86rem;
color: var(--hh-white);
background: linear-gradient(to top, rgba(0,0,0,.76) 0%, rgba(0,0,0,.2) 65%, transparent 100%);
}
.hh-gal-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 1px solid rgba(255,255,255,.28);
background: rgba(0,0,0,.38);
color: var(--hh-white);
font-size: 20px;
cursor: pointer;
z-index: 3;
}
.hh-gal-carousel__nav--prev { left: 12px; }
.hh-gal-carousel__nav--next { right: 12px; }
.hh-gal-carousel__nav:hover {
border-color: var(--hh-gold, #d6b55d);
background: rgba(0,0,0,.58);
color: var(--hh-gold, #d6b55d);
}
.hh-gal-carousel__nav:disabled {
opacity: .35;
cursor: default;
}
.hh-gal-carousel__counter {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 3;
padding: 4px 10px;
font-size: .72rem;
letter-spacing: 2px;
color: var(--hh-white);
border: 1px solid rgba(255,255,255,.24);
background: rgba(0,0,0,.38);
}
/* separador com cordas verticais à direita */
.hh-gal-vstrings {
border-left: 1px solid rgba(201,169,97,.24);
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 6px;
padding: 10px 8px;
}
.hh-gal-vstrings__s {
display: block;
width: 1px;
height: 100%;
background: linear-gradient(180deg, rgba(10,10,10,.92) 0%, rgba(165,130,74,.7) 48%, rgba(10,10,10,.92) 100%);
opacity: .6;
}
.hh-gal-vstrings__s--1 { width: 3px; opacity: .52; }
.hh-gal-vstrings__s--2 { width: 2px; opacity: .44; }
.hh-gal-vstrings__s--3 { width: 1.6px; opacity: .36; }
.hh-gal-vstrings__s--4 { width: 1.2px; opacity: .28; }
.hh-gal-vstrings__s--5 { width: .8px; opacity: .22; }
.hh-gal-vstrings__s--6 { width: .5px; opacity: .16; }
.hh-gal-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.hh-gal-filter__btn {
background: transparent;
border: 1px solid rgba(201,169,97,.35);
color: var(--hh-text-color, rgba(255,255,255,.5));
font-family: 'Apex Sans', sans-serif;
font-size: .82rem;
letter-spacing: 2px;
padding: 8px 20px;
cursor: pointer;
transition: background .25s, color .25s, border-color .25s;
}
.hh-gal-filter__btn:hover {
color: var(--hh-text-color, var(--hh-white));
border-color: var(--hh-gold, #d6b55d);
}
.hh-gal-filter__btn.is-active {
background: var(--hh-gold, #d6b55d);
border-color: var(--hh-gold, #d6b55d);
color: var(--hh-text-color, var(--hh-black));
}
.hh-gal-meta {
margin-bottom: 28px;
min-height: 20px;
}
.hh-gal-count {
font-size: .72rem;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .45;
color: var(--hh-text-color, var(--hh-white));
}
/* =========================================================
GALERIA — GRID
========================================================= */
.hh-gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 260px;
grid-auto-flow: dense;
gap: 8px;
}
.hh-gal-item {
position: relative;
overflow: hidden;
cursor: pointer;
background: #111;
}
.hh-gal-item.is-hidden,
.hh-gal-item[hidden] {
display: none !important;
}
.hh-gal-item--wide { grid-column: span 2; }
.hh-gal-item--tall { grid-row: span 2; }
.hh-gal-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1);
transition: transform .55s cubic-bezier(.25,.46,.45,.94);
filter: brightness(.88);
}
.hh-gal-item:hover img {
transform: scale(1.08);
filter: brightness(.65);
}
/* overlay desliza de baixo para cima */
.hh-gal-item__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
transform: translateY(100%);
transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.hh-gal-item:hover .hh-gal-item__overlay {
transform: none;
}
.hh-gal-item__cat {
font-size: .65rem;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--hh-text-color, var(--hh-gold, #d6b55d));
font-weight: 700;
margin-bottom: 4px;
}
.hh-gal-item__caption {
font-size: .82rem;
color: var(--hh-text-color, var(--hh-white));
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.hh-gal-item__zoom {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
background: var(--hh-gold, #d6b55d);
color: var(--hh-black);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
opacity: 0;
transform: scale(.7);
transition: opacity .3s .1s, transform .3s .1s;
}
.hh-gal-item:hover .hh-gal-item__zoom {
opacity: 1;
transform: scale(1);
}
/* =========================================================
GALERIA — LOADING / LAZY RENDER BOOST
========================================================= */
.hh-gallery-enhanced .hh-gal-item,
.hh-gallery-enhanced .hh-gallery-item,
.hh-gallery-enhanced .hh-apto-slide {
position: relative;
background: rgba(0,0,0,.28);
}
.hh-gallery-enhanced .hh-gal-item img,
.hh-gallery-enhanced .hh-gallery-item img,
.hh-gallery-enhanced .hh-apto-slide img {
opacity: 0;
transition: opacity .35s ease;
}
.hh-gallery-enhanced .hh-gal-item.hh-img-ready img,
.hh-gallery-enhanced .hh-gallery-item.hh-img-ready img,
.hh-gallery-enhanced .hh-apto-slide.hh-img-ready img {
opacity: 1;
}
.hh-gallery-enhanced .hh-img-loading::before {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background: linear-gradient(100deg, rgba(255,255,255,.03) 10%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.03) 90%);
background-size: 220% 100%;
animation: hh-img-shimmer 1.15s linear infinite;
}
@keyframes hh-img-shimmer {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
/* filter enter/exit */
.hh-gal-item--exit {
opacity: 0;
transform: scale(.88);
}
.hh-gal-item--enter {
animation: hh-gal-enter .4s ease forwards;
}
@keyframes hh-gal-enter {
from { opacity: 0; transform: scale(.9); }
to { opacity: 1; transform: none; }
}
/* =========================================================
LIGHTBOX
========================================================= */
#hh-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
#hh-lightbox.is-open {
opacity: 1;
pointer-events: all;
}
.hh-lb__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.96);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hh-lb__box {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 16px;
max-width: 92vw;
max-height: 92vh;
}
.hh-lb__img-wrap {
position: relative;
max-width: min(80vw, 1100px);
max-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.hh-lb__img {
max-width: 100%;
max-height: 78vh;
object-fit: contain;
opacity: 0;
transform: scale(.9);
transition: opacity .35s ease, transform .35s ease;
display: block;
box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.hh-lb__img.is-loaded {
opacity: 1;
transform: none;
}
.hh-lb__img.is-changing {
opacity: 0;
transform: scale(.9);
}
.hh-lb__loader {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
}
.hh-lb__loader.is-loading {
display: flex;
}
.hh-lb__loader span {
width: 36px;
height: 36px;
border: 3px solid rgba(255,255,255,.15);
border-top-color: var(--hh-gold, #d6b55d);
border-radius: 50%;
animation: hh-spin .7s linear infinite;
}
@keyframes hh-spin { to { transform: rotate(360deg); } }
.hh-lb__nav {
background: transparent;
border: 1px solid rgba(255,255,255,.2);
color: var(--hh-white);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s, border-color .2s, color .2s;
flex-shrink: 0;
}
.hh-lb__nav:hover {
background: var(--hh-gold, #d6b55d);
border-color: var(--hh-gold, #d6b55d);
color: var(--hh-black);
}
.hh-lb__nav:disabled {
opacity: .2;
cursor: default;
pointer-events: none;
}
.hh-lb__nav svg { width: 22px; height: 22px; }
.hh-lb__close {
position: fixed;
top: 20px;
right: 20px;
background: transparent;
border: 1px solid rgba(255,255,255,.2);
color: var(--hh-white);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: background .2s, border-color .2s;
}
.hh-lb__close:hover {
background: var(--hh-gold, #d6b55d);
border-color: var(--hh-gold, #d6b55d);
color: var(--hh-black);
}
.hh-lb__close svg { width: 20px; height: 20px; }
.hh-lb__info {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 20px;
padding: 18px 32px;
background: rgba(0,0,0,.7);
backdrop-filter: blur(8px);
}
.hh-lb__category {
font-family: 'Apex Sans', sans-serif;
font-size: .8rem;
letter-spacing: 3px;
color: var(--hh-gold, #d6b55d);
white-space: nowrap;
}
.hh-lb__caption {
flex: 1;
font-size: .85rem;
color: rgba(255,255,255,.75);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hh-lb__counter {
font-size: .75rem;
color: rgba(255,255,255,.4);
white-space: nowrap;
font-family: 'Apex Sans', sans-serif;
letter-spacing: 2px;
}
body.hh-lb-open {
overflow: hidden;
}
/* =========================================================
APARTAMENTOS — RESPONSIVO
========================================================= */
@media (max-width: 1100px) {
.hh-gal-carousel {
grid-template-columns: minmax(0, 1fr) 44px;
}
.hh-gal-carousel__viewport {
min-height: 360px;
}
.hh-gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
.hh-apto-perks__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.hh-gal-carousel {
grid-template-columns: 1fr;
}
.hh-gal-vstrings {
min-height: 80px;
border-left: none;
border-top: 1px solid rgba(201,169,97,.24);
padding: 8px 0;
}
.hh-gal-vstrings__s {
height: 100%;
}
.hh-gal-carousel__viewport {
min-height: 280px;
}
.hh-apto-panel__inner {
grid-template-columns: 1fr;
}
.hh-apto-panel__media {
height: 300px;
}
.hh-apto-panel__text {
padding: 36px 28px;
}
.hh-apto-tabs {
gap: 0;
flex-direction: column;
border-bottom: none;
}
.hh-apto-tab__btn {
border-bottom: none;
border-left: 3px solid transparent;
padding: 14px 20px;
}
.hh-apto-tab__btn.is-active {
border-left-color: var(--hh-gold, #d6b55d);
border-bottom-color: transparent;
}
.hh-gallery-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
}
.hh-gal-item--wide,
.hh-gal-item--tall { grid-column: span 1; grid-row: span 1; }
.hh-apto-perks__grid {
grid-template-columns: repeat(2, 1fr);
}
.hh-lb__box {
flex-direction: column;
gap: 8px;
}
.hh-lb__nav { display: none; }
}
@media (max-width: 480px) {
.hh-gallery-grid {
grid-template-columns: 1fr;
grid-auto-rows: 240px;
}
.hh-apto-perks__grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
/* ================================================================
FRONT-PAGE — 14 SECTIONS (added)
================================================================ */
/* ---- Hero Split ---- */
.hh-hero--split .hh-hero__inner {
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: center;
padding: 130px 0 70px;
position: relative;
z-index: 2;
}
.hh-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
}
.hh-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hh-hero__copy { text-align: left; color: var(--hh-white); display: none; }
.hh-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.hh-hero__badges span {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.25);
border-radius: 4px;
padding: 6px 14px;
font-size: 12px;
color: rgba(255,255,255,.85);
letter-spacing: .06em;
}
/* Hero form box */
.hh-hero__form-box {
background: rgba(10,10,10,.88);
border: 1px solid var(--hh-gold, #d6b55d);
border-radius: 4px;
max-width: 360px;
padding: 14px 16px;
position: relative;
z-index: 2;
}
.hh-hero__form-title {
font-family: var(--hh-font-heading);
font-size: 14px;
color: var(--hh-gold, #d6b55d);
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 1px;
}
.hh-hero__form-sub {
font-size: 11.5px;
color: var(--hh-text-gray);
margin: 0 0 8px;
}
.hh-hero__form-box .hh-form-lead {
background: transparent;
padding: 0;
}
.hh-hero__form-box .hh-form-lead > .hh-container {
max-width: none;
padding: 0;
}
.hh-hero__form-box .hh-form-lead__inner {
display: block;
grid-template-columns: 1fr;
gap: 0;
}
.hh-hero__form-box .hh-form-lead__copy { display: none; }
.hh-hero__form-box .hh-form-lead__form-wrap {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
.hh-hero__form-box .hh-lead-form { gap: .4rem; }
.hh-hero__form-box .hh-lead-form__row input {
padding: .52rem .7rem;
font-size: .78rem;
line-height: 1.25;
}
.hh-hero__form-box .hh-lead-form__feedback {
min-height: 1em;
font-size: .72rem;
margin-top: 2px;
}
.hh-hero__form-box .hh-lead-form__lgpd {
font-size: .56rem;
line-height: 1.25;
margin-top: 2px;
}
.hh-hero__form-box .hh-btn {
padding: 10px 18px;
font-size: .76rem;
}
.hh-hero--split .hh-hero__inner.hh-front-hero,
.hh-hero--split .hh-hero__inner.hh-press-split {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
gap: 0;
align-items: stretch;
padding: 0;
max-width: 1240px;
margin: 0 auto;
box-shadow: 0 24px 54px rgba(0,0,0,.18);
}
.hh-front-hero__media,
.hh-press-split__media {
position: relative;
min-height: 410px;
overflow: hidden;
}
.hh-front-hero__panel {
background: var(--hh-bg-card);
padding: clamp(2rem, 4vw, 4rem);
display: none;
flex-direction: column;
justify-content: center;
}
.hh-press-split__content {
background: var(--hh-bg-card);
padding: clamp(2rem, 4vw, 4rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.hh-front-hero__panel .hh-hero__copy {
color: var(--color-text-primary);
margin-bottom: 1.4rem;
}
.hh-front-hero__panel .hh-hero__title,
.hh-press-split__content .hh-section-title {
color: var(--hh-sj-accent1) !important;
}
.hh-front-hero__panel .hh-hero__title span {
color: var(--hh-sj-accent2);
}
.hh-front-hero__panel .hh-hero__sub,
.hh-press-split__content .hh-press-hero__lead,
.hh-press-split__content .hh-press-hero__panel,
.hh-press-split__content .hh-press-kpis {
color: rgba(255,255,255,.95);
opacity: 1;
}
.hh-front-hero__panel .hh-hero__form-box {
max-width: none;
width: 100%;
background: rgba(255,255,255,.03);
border-color: rgba(214,181,93,.28);
margin-top: 5rem;
}
.hh-press-split__content .hh-press-hero__panel {
margin-top: 1.35rem;
}
@media (max-width: 1024px) {
.hh-hero--split .hh-hero__inner.hh-front-hero,
.hh-hero--split .hh-hero__inner.hh-press-split {
grid-template-columns: 1fr;
}
.hh-front-hero__media,
.hh-press-split__media {
min-height: 300px;
width: 100%;
}
}
.hh-hero__arrow-link {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: rgba(255,255,255,.6);
text-decoration: none;
font-size: 22px;
animation: hh-bounce 1.8s infinite;
}
@keyframes hh-bounce {
0%,100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}
/* ---- Economia Compartilhada ---- */
.hh-ec-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
gap: 0;
align-items: stretch;
margin: 48px 0;
overflow: hidden;
border-radius: 10px;
background: transparent;
box-shadow: 0 18px 38px rgba(0,0,0,.18);
}
.hh-ec-col {
min-width: 0;
padding: 48px 34px 38px;
background: #232424;
color: var(--color-text-primary);
text-align: center;
}
.hh-ec-col--before {
border-right: 1px solid rgba(214,181,93,.12);
}
.hh-ec-col--after {
border-left: 1px solid rgba(214,181,93,.12);
}
.hh-ec-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
color: var(--hh-gold, #d6b55d);
}
.hh-ec-card__icon svg { display: block; }
.hh-ec-card__icon svg,
.hh-ec-card__icon svg path,
.hh-ec-card__icon svg circle {
fill: currentColor;
stroke: currentColor;
}
.hh-ec-plan {
font-family: var(--hh-font-heading);
font-size: clamp(1.05rem, 1.2vw, 1.38rem);
line-height: 1.2;
letter-spacing: .06em;
color: var(--hh-gold, #d6b55d);
margin: 0 0 26px;
}
.hh-ec-price {
display: block;
}
.hh-ec-list {
list-style: none;
padding: 0;
margin: 0;
}
.hh-ec-list li {
padding: 14px 8px;
border-bottom: 1px solid rgba(255,255,255,.08);
font-size: 15px;
line-height: 1.6;
color: rgba(255,255,255,.96);
}
.hh-ec-list li:last-child { border-bottom: 0; }
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-ec-card__icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-benefit-icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-area-icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-destino-cat__icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-rockstar-perk span,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-trust-seal .hh-inline-icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-contact-inline a svg {
color: var(--hh-gold, #d6b55d);
}
.hh-ec-card__total { font-size: 13px; font-weight: 700; color: var(--hh-gold, #d6b55d) !important; text-transform: uppercase; letter-spacing: .06em; }
.hh-ec-vs {
align-self: stretch;
justify-self: stretch;
display: flex;
align-items: center;
justify-content: center;
width: 68px;
min-height: 100%;
background: #f6f3ea;
color: var(--color-text-dark);
font-family: var(--hh-font-heading);
font-size: 18px;
font-weight: 700;
padding: 0;
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: .18em;
text-transform: uppercase;
border-left: 1px solid rgba(214,181,93,.10);
border-right: 1px solid rgba(214,181,93,.10);
}
.hh-ec-vs::before,
.hh-ec-vs::after {
position: absolute;
}
.hh-benefits-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-top: 48px;
}
.hh-benefit-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 140px;
gap: 10px;
}
.hh-benefit-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--color-text-primary);
flex-shrink: 0;
}
.hh-benefit-icon svg { display: block; }
.hh-benefit-label { font-size: 12px; color: var(--hh-gold); line-height: 1.5; text-align: center; }
/* ---- Complexo Layout ---- */
.hh-stats--row { justify-content: space-around; flex-wrap: wrap; gap: 54px; margin-bottom: 48px; }
.hh-complexo-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 48px;
align-items: start;
margin-bottom: 48px;
}
.hh-complexo-areas { display: flex; flex-direction: column; gap: 16px; }
.hh-area-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background: rgba(255,255,255,.04);
border-left: 3px solid var(--hh-gold, #d6b55d);
border-radius: 3px;
}
.hh-area-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--color-text-primary);
flex-shrink: 0;
}
.hh-area-icon svg { display: block; }
.hh-area-item strong { display: block; font-size: 14px; font-family: var(--hh-font-title); letter-spacing:.04em; color: var(--color-text-primary); }
.hh-area-item span { font-size: 12px; color: var(--hh-white); }
.hh-tour-cta {
text-align: center;
padding: 48px;
border: 1px solid var(--hh-gold, #d6b55d);
border-radius: 6px;
background: rgba(196,159,77,.05);
p {
color: var(--hh-white) !important;
}
}
.hh-tour-cta__label { display: block; font-size: 12px; color: var(--hh-gold, #d6b55d); text-transform: uppercase; letter-spacing:.1em; margin-bottom: 8px; }
.hh-tour-cta__title { font-family: var(--hh-font-heading); font-size: 28px; color: var(--color-text-primary); margin: 0 0 28px; }
/* ---- Apartamentos Tabs ---- */
.hh-apto-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--hh-border-light);
margin-bottom: 40px;
overflow-x: auto;
}
.hh-apto-tab {
background: none;
border: none;
border-bottom: 3px solid transparent;
color: var(--hh-text-gray);
font-family: var(--hh-font-heading);
font-size: 14px;
letter-spacing: .06em;
text-transform: uppercase;
padding: 14px 32px;
cursor: pointer;
white-space: nowrap;
transition: color .25s, border-color .25s;
margin-bottom: -2px;
}
.hh-apto-tab:hover,
.hh-apto-tab.is-active {
color: var(--hh-gold, #d6b55d);
border-bottom-color: var(--hh-gold, #d6b55d);
}
.hh-apto-panel { display: none; }
.hh-apto-panel.is-active { display: block; }
.hh-apto-layout {
display: grid;
grid-template-columns: 1fr 420px;
gap: 48px;
align-items: start;
}
/* ---- Carousel ---- */
.hh-apto-carousel {
position: relative;
overflow: hidden;
border-radius: 4px;
aspect-ratio: 4/3;
background: #111;
}
.hh-apto-slides { position: relative; width: 100%; height: 100%; }
.hh-apto-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .45s ease;
}
.hh-apto-slide.is-active { opacity: 1; }
.hh-apto-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-apto-prev,
.hh-apto-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.2);
color: var(--color-text-primary);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: background .2s;
}
.hh-apto-prev:hover,
.hh-apto-next:hover { background: var(--hh-gold, #d6b55d); color: var(--hh-black); }
.hh-apto-prev { left: 12px; }
.hh-apto-next { right: 12px; }
.hh-apto-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 3;
}
.hh-apto-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,.4);
cursor: pointer;
transition: background .2s;
}
.hh-apto-dot.is-active { background: var(--hh-gold, #d6b55d); }
.hh-apto-info h3 {
font-family: var(--hh-font-heading);
font-size: 26px;
letter-spacing: .06em;
margin: 0 0 16px;
}
.hh-apto-desc { color: var(--hh-text-gray); line-height: 1.7; margin-bottom: 24px; }
.hh-apto-features {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: flex;
flex-direction: column;
gap: 10px;
}
.hh-apto-features li { font-size: 14px; color: var(--hh-text-gray); }
.hh-apto-features li::before { color: var(--hh-gold, #d6b55d); margin-right: 4px; }
/* ---- Gramado Parallax section ---- */
.hh-section--gramado-parallax { padding: 0; }
.hh-gramado-parallax,
.hh-Gramado-parallax {
background-attachment: fixed;
background-size: cover;
background-position: center;
position: relative;
padding: 120px 0;
}
.hh-gramado-overlay,
.hh-Gramado-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--hh-overlay-gramado-a) 0%, var(--hh-overlay-gramado-b) 100%);
}
.hh-gramado-content,
.hh-Gramado-content { position: relative; z-index: 2; }
.hh-gramado-distances,
.hh-Gramado-distances {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 28px;
font-size: 14px;
color: rgba(255,255,255,.8);
}
.hh-gramado-distances div,
.hh-Gramado-distances div {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hh-gramado-distances strong,
.hh-Gramado-distances strong { color: var(--hh-gold, #d6b55d); }
/* ---- RCI Numbers ---- */
.hh-rci-numbers {
display: flex;
flex-wrap: wrap;
gap: 0;
justify-content: center;
border: 1px solid var(--hh-border-light);
border-radius: 6px;
overflow: hidden;
margin: 48px 0;
}
.hh-rci-num {
flex: 1;
min-width: 160px;
text-align: center;
padding: 36px 20px;
border-right: 1px solid var(--hh-border-light);
}
.hh-rci-num:last-child { border-right: none; }
.hh-rci-num__value {
display: block;
font-family: var(--hh-font-heading);
font-size: 40px;
color: var(--hh-gold, #d6b55d);
line-height: 1;
margin-bottom: 8px;
}
.hh-rci-num__value sup { font-size: 20px; }
.hh-rci-num__label { font-size: 12px; color: var(--hh-white) !important; text-transform: uppercase; letter-spacing: .07em; }
.hh-destinos-cats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.hh-destino-cat {
text-align: center;
padding: 32px 20px;
background: rgba(255,255,255,.04);
border: 1px solid var(--hh-border-light);
border-radius: 6px;
transition: border-color .25s, background .25s;
}
.hh-destino-cat:hover { border-color: var(--hh-gold, #d6b55d); background: rgba(196,159,77,.06); }
.hh-destino-cat__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
margin-bottom: 12px;
}
.hh-destino-cat__icon svg { width: 32px; height: 32px; display: block; }
.hh-destino-cat h4 { font-family: var(--hh-font-heading); font-size: 14px; letter-spacing:.06em; margin: 0 0 8px; }
.hh-destino-cat p { font-size: 12px; color: var(--hh-text-gray); margin: 0; }
/* ---- Timeline ---- */
.hh-timeline {
position: relative;
max-width: 860px;
margin: 48px auto 0;
padding: 0;
}
.hh-timeline::before {
position: absolute;
left: 50%;
top: 0; bottom: 0;
width: 2px;
background: var(--hh-gold, #d6b55d);
opacity: .3;
transform: translateX(-50%);
}
.hh-timeline-item {
display: flex;
position: relative;
margin-bottom: 40px;
}
.hh-timeline-item--left { justify-content: flex-end; padding-right: calc(50% + 32px); }
.hh-timeline-item--right { justify-content: flex-start; padding-left: calc(50% + 32px); }
.hh-timeline-dot {
position: absolute;
left: 50%;
top: 24px;
transform: translateX(-50%);
width: 14px; height: 14px;
background: var(--hh-gold, #d6b55d);
border-radius: 50%;
z-index: 2;
}
.hh-timeline-card {
background: linear-gradient(180deg, rgba(255,250,242,.98) 0%, rgba(246,236,220,.98) 100%);
border: 1px solid rgba(201,169,97,.22);
border-radius: 12px;
padding: 24px 28px;
max-width: 380px;
box-shadow: 0 18px 36px rgba(63,43,12,.08);
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.hh-timeline-card:hover { border-color: var(--hh-gold, #d6b55d); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(63,43,12,.12); }
.hh-timeline-year {
display: block;
font-family: var(--hh-font-heading);
font-size: 32px;
color: var(--hh-gold, #d6b55d);
line-height: 1;
margin-bottom: 6px;
}
.hh-timeline-card h4 { font-size: 15px; font-family: var(--hh-font-heading); letter-spacing:.04em; margin: 0 0 10px; color: var(--color-text-dark); }
.hh-timeline-card p { font-size: 13px; color: var(--hh-card-text); line-height: 1.65; margin: 0; }
.hh-city--active { color: var(--hh-gold, #d6b55d) !important; border-color: var(--hh-gold, #d6b55d) !important; font-weight: 700; }
/* ---- Rockstar section ---- */
.hh-section--rockstar {
position: relative;
text-align: center;
overflow: hidden;
}
.hh-rockstar-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.hh-rockstar-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--hh-overlay-rock-a) 0%, var(--hh-overlay-rock-b) 100%);
}
.hh-rockstar-content { position: relative; z-index: 2; }
.hh-rockstar-perks {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
max-width: 700px;
margin: 0 auto;
}
.hh-rockstar-perk {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
border-radius: 6px;
padding: 16px 22px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #ffffff;
min-width: 200px;
}
/* Rockstar split hero used above the first container */
.hh-hero--rockstar {
padding: 40px 0 10px;
color: var(--color-text-primary);
}
.hh-hero--rockstar .hh-hero__inner.hh-rockstar-split {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
gap: 0;
align-items: stretch;
max-width: 1240px;
margin: 0 auto;
background: var(--hh-bg-card);
overflow: hidden;
box-shadow: 0 24px 54px rgba(0,0,0,.18);
}
.hh-rockstar-split__media {
min-height: 410px;
background: var(--hh-surface-dark);
}
.hh-rockstar-split__img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.hh-rockstar-split__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2rem, 4vw, 4rem);
}
.hh-rockstar-split__content .hh-hero__title {
color: var(--hh-sj-accent1) !important;
margin-bottom: 1.3rem;
}
.hh-rockstar-split__content .hh-hero__title span {
color: var(--hh-sj-accent2);
}
.hh-rockstar-split__content .hh-hero__sub {
color: rgba(255,255,255,.95);
max-width: 28rem;
}
@media (max-width: 900px) {
.hh-hero--rockstar {
padding-top: 16px;
}
.hh-hero--rockstar .hh-hero__inner.hh-rockstar-split {
grid-template-columns: 1fr;
}
.hh-rockstar-split__media {
min-height: 260px;
}
}
.hh-rockstar-perk span {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
flex-shrink: 0;
}
.hh-rockstar-perk span svg { width: 20px; height: 20px; display: block; }
/* ---- Depoimentos ---- */
.hh-owners-count {
text-align: center;
margin: 0 auto 48px;
}
.hh-owners-count__number {
display: block;
font-family: var(--hh-font-heading);
font-size: 64px;
color: var(--hh-gold, #d6b55d);
line-height: 1;
margin-bottom: 8px;
}
.hh-owners-count__label {
display: block;
font-size: 14px;
color: var(--hh-text-gray);
text-transform: uppercase;
letter-spacing: .07em;
}
.hh-testimonials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.hh-testimonial-card {
background: linear-gradient(180deg, rgba(255,250,242,.98) 0%, rgba(246,236,220,.98) 100%);
border: 1px solid rgba(201,169,97,.22);
border-radius: 12px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 0 18px 36px rgba(63,43,12,.08);
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.hh-testimonial-card:hover { border-color: var(--hh-gold, #d6b55d); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(63,43,12,.12); }
.hh-testimonial-stars { color: var(--hh-gold, #d6b55d); font-size: 16px; letter-spacing: 3px; }
.hh-testimonial-text { font-size: 14px; color: var(--hh-card-text); line-height: 1.7; font-style: italic; flex: 1; margin: 0; }
.hh-testimonial-author strong { display: block; font-size: 14px; color: var(--color-text-dark); font-family: var(--hh-font-heading); letter-spacing:.04em; }
.hh-testimonial-author span { font-size: 12px; color: var(--hh-white) !important; }
.hh-testimonial-author {
display: flex;
align-items: center;
gap: 12px;
margin-top: 18px;
}
.hh-testimonial-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--hh-gold, #d6b55d);
}
.hh-testimonial-author__info { display: flex; flex-direction: column; }
/* ---- Trust seals ---- */
.hh-trust-seals {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-bottom: 36px;
}
.hh-trust-seal {
background: rgba(255,255,255,.04);
border: 1px solid var(--hh-gold, #d6b55d);
border-radius: 4px;
padding: 8px 18px;
font-size: 12px;
color: rgba(255,255,255,.8) !important;
letter-spacing: .05em;
display: flex;
align-items: center;
gap: 6px;
}
.hh-trust-seal .hh-inline-icon { color: var(--color-text-primary); }
/* ---- Contact inline ---- */
.hh-contact-inline {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
margin-top: 36px;
padding-top: 32px;
border-top: 1px solid var(--hh-border-light);
}
.hh-contact-inline a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
color: var(--hh-text-gray);
text-decoration: none;
transition: color .2s;
}
.hh-contact-inline a svg { width: 16px; height: 16px; display: block; color: var(--color-text-primary); }
.hh-contact-inline a:hover { color: var(--color-text-primary); }
/* ---- FAQ (improved) ---- */
.hh-faq-item {
border-bottom: 1px solid var(--hh-border-light);
}
.hh-faq-q {
width: 100%;
background: none;
border: none;
color: var(--hh-text-color, #000000);
font-family: var(--hh-font-heading);
font-size: 16px;
letter-spacing: .04em;
text-align: left;
padding: 22px 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 16px;
transition: color .2s;
}
.hh-faq-q span {
font-size: 14px;
color: var(--hh-gold, #d6b55d);
font-family: var(--hh-font-heading);
flex-shrink: 0;
}
.hh-faq-q:hover { color: var(--hh-text-color, var(--hh-gold, #d6b55d)); }
.hh-faq-chevron {
margin-left: auto;
flex-shrink: 0;
transition: transform .3s;
color: var(--hh-gold, #d6b55d);
opacity: .7;
}
.hh-faq-q[aria-expanded="true"] .hh-faq-chevron { transform: rotate(180deg); }
.hh-faq-q[aria-expanded="true"] { color: var(--hh-text-color, var(--hh-gold, #d6b55d)); }
.hh-faq-a { padding: 0 16px 24px 52px; }
.hh-faq-a p { color: var(--hh-text-color, var(--hh-text-gray)); line-height: 1.75; font-size: 15px; margin: 0; }
/* ---- Press Logos ---- */
.hh-press-logos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 48px;
}
.hh-press-item {
display: block;
background: #232424 !important;
border: 1px solid var(--hh-border-light);
border-radius: 6px;
padding: 28px 20px;
text-decoration: none;
transition: border-color .25s, transform .25s;
text-align: center;
}
.hh-press-item:hover { border-color: var(--hh-gold, #d6b55d); transform: translateY(-3px); }
.hh-press-logo-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 70px;
margin-bottom: 16px;
}
.hh-press-logo-box strong {
font-family: var(--hh-font-heading);
font-size: 26px;
color: var(--hh-gold);
letter-spacing: .04em;
}
.hh-press-logo-box span {
font-size: 10px;
color: var(--hh-gold, #d6b55d);
text-transform: uppercase;
letter-spacing: .12em;
margin-top: 2px;
}
.hh-press-logo-box--dark strong { color: var(--hh-gold, #d6b55d); }
.hh-press-headline {
font-size: 12px;
color: var(--hh-white);
line-height: 1.5;
margin: 0;
font-style: italic;
}
/* ---- Press Page ---- */
.hh-press-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(214,181,93,.16), transparent 34%),
linear-gradient(180deg, rgba(18,18,24,.96) 0%, rgba(20,20,28,.92) 100%);
border-bottom: 1px solid var(--hh-border-light);
}
.hh-press-hero::after {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 30%, rgba(214,181,93,.06) 70%, transparent 100%);
}
.hh-press-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(300px, .9fr);
gap: 32px;
align-items: stretch;
padding: 80px 0;
}
.hh-press-hero__copy,
.hh-press-hero__panel,
.hh-press-note,
.hh-press-contact {
background: rgba(35,36,36,.88);
border: 1px solid var(--hh-border-light);
box-shadow: 0 20px 50px rgba(0,0,0,.16);
}
.hh-press-hero__copy {
padding: 36px;
border-radius: 20px;
}
.hh-press-hero__lead {
max-width: 760px;
color: var(--hh-text-body);
font-size: clamp(1rem, 1.4vw, 1.125rem);
line-height: 1.8;
margin: 18px 0 0;
}
.hh-press-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.hh-imprensa-hero-intro {
padding-top: clamp(1.2rem, 2.6vw, 2rem);
}
.hh-imprensa-hero-intro .hh-press-hero__lead {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.hh-imprensa-hero-intro .hh-press-hero__actions {
justify-content: center;
margin-top: clamp(1rem, 2vw, 1.4rem);
}
.hh-page--imprensa .hh-imprensa-hero-intro .hh-btn--ghost {
color: var(--hh-white) !important;
border-color: var(--hh-gold, #d6b55d) !important;
}
.hh-page--imprensa .hh-imprensa-hero-intro .hh-btn--ghost:hover {
color: var(--hh-white) !important;
border-color: var(--hh-gold, #d6b55d) !important;
}
.hh-press-kpis {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 28px;
}
.hh-press-kpi {
padding: 18px 16px;
border-radius: 14px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.08);
}
.hh-press-kpi strong {
display: block;
font-family: var(--hh-font-heading);
color: var(--hh-gold, #d6b55d);
font-size: 1.65rem;
line-height: 1;
margin-bottom: 8px;
}
.hh-press-kpi span {
display: block;
color: var(--hh-text-gray);
font-size: .92rem;
line-height: 1.45;
}
.hh-press-hero__panel {
border-radius: 20px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
}
.hh-press-hero__panel-label,
.hh-press-note__eyebrow {
color: var(--hh-gold, #d6b55d);
text-transform: uppercase;
letter-spacing: .18em;
font-size: .72rem;
font-weight: 700;
margin: 0;
}
.hh-press-hero__panel h2,
.hh-press-note h3,
.hh-press-contact h2 {
margin: 0;
font-family: var(--hh-font-heading);
color: var(--hh-text-primary);
line-height: 1.15;
}
.hh-press-hero__panel h2 { font-size: clamp(1.8rem, 2.4vw, 2.7rem); }
.hh-press-hero__list {
margin: 0;
padding-left: 18px;
display: grid;
gap: 12px;
color: var(--hh-text-gray);
}
.hh-press-hero__list li::marker { color: var(--hh-gold, #d6b55d); }
.hh-press-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
gap: 24px;
align-items: end;
margin-bottom: 28px;
}
.hh-press-section-head__text {
color: var(--hh-text-gray);
margin: 0;
line-height: 1.7;
}
.hh-press-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.hh-press-card {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 100%;
padding: 28px;
border-radius: 20px;
border: 1px solid var(--hh-border-light);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
color: var(--hh-text-primary) !important;
text-decoration: none;
transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.hh-press-card:hover {
transform: translateY(-4px);
border-color: rgba(214,181,93,.55);
background: linear-gradient(180deg, rgba(214,181,93,.08), rgba(255,255,255,.025));
}
.hh-press-card__tag {
display: inline-flex;
align-self: flex-start;
padding: 6px 10px;
border-radius: 999px;
background: rgba(214,181,93,.12);
color: var(--hh-gold, #d6b55d);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .7rem;
font-weight: 700;
}
.hh-press-card h3 {
margin: 0;
font-family: var(--hh-font-heading);
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
line-height: 1.2;
}
.hh-press-card p {
margin: 0;
color: var(--hh-text-gray);
line-height: 1.7;
}
.hh-press-card__link {
margin-top: auto;
color: var(--hh-gold, #d6b55d) !important;
font-weight: 700;
letter-spacing: .04em;
}
.hh-press-note {
margin-top: 24px;
padding: 24px 28px;
border-radius: 18px;
display: flex;
gap: 18px;
justify-content: space-between;
align-items: center;
}
.hh-press-note p { margin: 0; color: var(--hh-text-gray); line-height: 1.7; max-width: 760px; }
.hh-press-contact {
margin-top: 0;
padding: 28px 30px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.hh-press-contact__text {
margin: 14px 0 0;
color: var(--hh-text-gray);
line-height: 1.75;
max-width: 760px;
}
.hh-press-contact__email {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 18px;
border-radius: 999px;
background: var(--hh-gold, #d6b55d);
color: var(--color-text-dark) !important;
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
transition: transform .25s ease, background .25s ease;
}
.hh-press-contact__email:hover { transform: translateY(-2px); background: var(--hh-gold-light); }
/* e-mail como link simples (nova classe) */
.hh-press-contact__email-link {
display: inline-block;
color: var(--hh-gold, #d6b55d);
font-size: 1rem;
font-weight: 600;
letter-spacing: .04em;
text-decoration: none;
border-bottom: 1px solid rgba(214,181,93,.4);
padding-bottom: 2px;
transition: border-color .2s, opacity .2s;
}
.hh-press-contact__email-link:hover {
border-bottom-color: var(--hh-gold, #d6b55d);
opacity: .8;
}
.hh-press-contact__cta-link {
display: inline-block;
margin-top: 1rem;
color: var(--hh-gold, #d6b55d);
font-size: .88rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid rgba(214,181,93,.4);
padding-bottom: 2px;
transition: border-color .2s, color .2s;
}
.hh-press-contact__cta-link:hover {
border-bottom-color: var(--hh-gold, #d6b55d);
color: var(--hh-gold, #d6b55d);
}
/* Imprensa: tipografia escopada apenas nesta página */
.hh-page--imprensa {
color: var(--hh-white);
}
.hh-page--imprensa p,
.hh-page--imprensa li,
.hh-page--imprensa .hh-press-hero__lead,
.hh-page--imprensa .hh-press-section-head__text,
.hh-page--imprensa .hh-press-note p,
.hh-page--imprensa .hh-press-contact__text {
color: var(--hh-white);
}
.hh-page--imprensa .hh-section-title,
.hh-page--imprensa .hh-section__title,
.hh-page--imprensa .hh-press-hero__panel h2,
.hh-page--imprensa .hh-press-note h3,
.hh-page--imprensa .hh-press-contact h2,
.hh-page--imprensa .hh-press-card h3 {
font-family: 'Montserrat', var(--hh-font-heading);
font-weight: 700;
color: var(--hh-gold, #d6b55d) !important;
}
.hh-page--imprensa .hh-press-card,
.hh-page--imprensa .hh-press-card * {
color: var(--hh-white) !important;
}
.hh-page--imprensa .hh-press-card__tag,
.hh-page--imprensa .hh-press-card__link,
.hh-page--imprensa .hh-press-hero__panel-label,
.hh-page--imprensa .hh-press-note__eyebrow,
.hh-page--imprensa .hh-section-subtitle {
color: var(--hh-gold, #d6b55d) !important;
}
.hh-page--imprensa .hh-press-contact__email,
.hh-page--imprensa .hh-press-card:hover .hh-press-card__link {
color: var(--hh-black) !important;
}
/* ---- Partners ---- */
.hh-partners-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
align-items: center;
margin-top: 48px;
}
.hh-partner-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 140px;
text-align: center;
}
.hh-partner-item img {
max-width: 140px;
max-height: 60px;
object-fit: contain;
filter: none;
opacity: 1;
transition: opacity .2s, filter .2s;
}
.hh-partner-item:hover img { opacity: 1; filter: none; }
.hh-partner-icon {
width: 58px;
height: 58px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.35);
background: rgba(255,255,255,.08);
color: var(--hh-gold, #d6b55d);
font-family: var(--hh-font-heading);
font-size: 18px;
letter-spacing: .08em;
font-weight: 700;
}
.hh-partner-name {
font-family: var(--hh-font-heading);
font-size: 18px;
color: rgba(255,255,255,.75);
letter-spacing: .06em;
}
.hh-partner-role {
font-size: 11px;
color: var(--hh-gold, #d6b55d);
text-transform: uppercase;
letter-spacing: .1em;
}
/* ---- hh-lead--center ---- */
.hh-lead--center { text-align: center; margin-left: auto; margin-right: auto; }
/* ================================================================
RESPONSIVE — Front Page
================================================================ */
@media (max-width: 1024px) {
.hh-hero--split .hh-hero__inner { grid-template-columns: 1fr; padding: 140px 0 80px; }
.hh-hero__form-box { max-width: 560px; margin: 0 auto; }
.hh-apto-layout { grid-template-columns: 1fr; }
.hh-complexo-layout { grid-template-columns: 1fr; }
.hh-timeline-item--left { padding-right: 0; justify-content: flex-start; padding-left: calc(2rem + 32px); }
.hh-timeline-item--right { padding-left: calc(2rem + 32px); }
.hh-timeline::before { left: 1rem; }
.hh-timeline-dot { left: 1rem; }
.hh-testimonials { grid-template-columns: 1fr; }
.hh-press-logos { grid-template-columns: repeat(2, 1fr); }
.hh-press-hero__grid,
.hh-press-section-head,
.hh-press-contact { grid-template-columns: 1fr; }
.hh-press-contact { flex-direction: column; align-items: flex-start; }
.hh-press-grid { grid-template-columns: 1fr; }
.hh-press-kpis { grid-template-columns: 1fr; }
.hh-destinos-cats { grid-template-columns: repeat(2, 1fr); }
.hh-lead--white { color: var(--hh-black) !important; }
}
@media (max-width: 640px) {
.hh-ec-grid { flex-direction: column; }
.hh-ec-vs { writing-mode: horizontal-tb; padding: 16px; text-align: center; }
.hh-rci-numbers { flex-direction: column; }
.hh-rci-num { border-right: none; border-bottom: 1px solid var(--hh-border-light); }
.hh-rci-num:last-child { border-bottom: none; }
.hh-press-logos { grid-template-columns: 1fr 1fr; }
.hh-apto-tabs { gap: 0; }
.hh-apto-tab { padding: 12px 16px; font-size: 12px; }
.hh-destinos-cats { grid-template-columns: 1fr 1fr; }
.hh-owners-count__number { font-size: 48px; }
.hh-press-hero__copy,
.hh-press-hero__panel,
.hh-press-note,
.hh-press-contact { padding: 22px; }
}
/* =========================================================
PAGE: COMPLEXO
========================================================= */
/* ── Section variants ── */
.hh-section--alt {
background: var(--hh-bg-alt);
}
.hh-section--dark-alt {
background: var(--hh-bg);
}
.hh-section--accent {
background: var(--hh-bg-card)!important;
border-top: 1px solid var(--color-gold, #d6b55d);
border-bottom: 1px solid var(--color-gold, #d6b55d);
}
/* ── Numbers bar ── */
.hh-numbers-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
}
.hh-number-item {
flex: 1 1 160px;
text-align: center;
padding: 2.5rem 2rem;
border-right: 1px solid var(--hh-gold, #d6b55d);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: .5rem;
}
.hh-number-item:last-child { border-right: none; }
.hh-number-item__value {
display: flex;
align-items: flex-end;
justify-content: center;
flex-wrap: wrap;
font-family: 'Apex Sans', sans-serif;
font-size: clamp(40px, 5vw, 72px);
color: var(--hh-gold, #d6b55d) !important;
line-height: 1;
min-height: 90px;
margin-bottom: 0;
}
/* Ensure numbers in the complexo bar use tabular figures and style units */
.hh-number-item__value {
font-variant-numeric: tabular-nums;
-moz-font-feature-settings: "tnum" 1;
-webkit-font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.hh-number-item__value sup,
.hh-number-item__value .unit {
font-size: 0.45em;
vertical-align: super;
margin-left: .12em;
color: rgba(255,255,255,.85);
}
.hh-number-item__label {
display: block;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: #ffffff;
font-weight: 600;
margin-top: .2rem;
}
/* ── Split 2-col ── */
.hh-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
.hh-split__media { position: relative; }
.hh-split__img {
width: 100%;
height: 560px;
object-fit: cover;
display: block;
border: 1px solid var(--hh-border);
}
/* ── Areas grid ── */
.hh-areas-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5px;
margin-top: 0;
}
.hh-area-card {
background: linear-gradient(180deg, rgba(255,250,242,.98) 0%, rgba(246,236,220,.98) 100%);
border: 1px solid rgba(201,169,97,.22);
border-radius: 12px;
box-shadow: 0 18px 36px rgba(63,43,12,.08);
padding: 2.5rem 2rem;
transition: background .25s, transform .25s, box-shadow .25s, border-color .25s;
cursor: default;
}
.hh-area-card:hover { background: linear-gradient(180deg, rgba(255,248,238,.98) 0%, rgba(244,233,214,.98) 100%); border-color: var(--hh-gold, #d6b55d); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(63,43,12,.12); }
.hh-area-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.2rem;
}
.hh-area-card__tag {
font-size: 9px;
letter-spacing: 3px;
font-weight: 700;
color: var(--hh-gold, #d6b55d);
text-transform: uppercase;
}
.hh-area-card__icon {
color: var(--color-text-primary);
opacity: .9;
}
.hh-area-card__title {
font-family: 'Apex Sans', sans-serif;
font-size: 22px;
letter-spacing: 2px;
color: var(--color-text-dark);
margin: 0 0 .8rem;
}
.hh-area-card__desc {
font-size: 14px;
color: var(--color-text-primary);
line-height: 1.65;
margin: 0;
}
/* ── Feature split (full-bleed 2-col) ── */
.hh-section--feature {
padding: 0;
overflow: hidden;
}
.hh-feature-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 640px;
}
.hh-feature-split__media {
position: relative;
overflow: hidden;
}
.hh-feature-split__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hh-feature-split__text {
padding: 6rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
background: #232424;
}
.hh-feature-list {
list-style: none;
margin: 2rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .8rem;
}
.hh-feature-list li {
padding-left: 1.4rem;
position: relative;
font-size: 15px;
color: #ffffff;
line-height: 1.5;
}
.hh-feature-list li::before {
position: absolute;
left: 0;
top: .55em;
width: 6px;
height: 6px;
background: var(--hh-gold, #d6b55d);
border-radius: 50%;
}
/* ── Tour embed ── */
.hh-tour-embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.hh-tour-embed iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
.hh-tour-placeholder {
padding: 4rem 2rem;
text-align: center;
border: 1px dashed var(--hh-border-gold);
color: var(--hh-text-muted);
background: var(--hh-bg-card);
font-size: 14px;
}
/* ── Map embed ── */
.hh-map-embed {
width: 100%;
height: 480px;
overflow: hidden;
border: 1px solid var(--hh-border);
}
.hh-map-embed iframe {
width: 100%;
height: 100%;
display: block;
filter: grayscale(100%) invert(90%) contrast(85%);
}
/* ── Complexo responsive ── */
@media (max-width: 1024px) {
.hh-areas-grid { grid-template-columns: repeat(2, 1fr); }
.hh-feature-split { grid-template-columns: 1fr; }
.hh-feature-split__text { padding: 4rem 3rem; }
.hh-split { grid-template-columns: 1fr; gap: 3rem; }
.hh-split__img { height: 380px; }
}
@media (max-width: 640px) {
.hh-areas-grid { grid-template-columns: 1fr; }
.hh-feature-split__text { padding: 3rem 1.5rem; }
.hh-number-item { flex: 1 1 140px; padding: 2rem 1rem; }
.hh-split__img { height: 260px; }
}
/* =========================================================
PAGE: EXPERIÊNCIAS
========================================================= */
.hh-exp-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
background-color: var(--hh-bg-card);
}
.hh-exp-split--reverse .hh-exp-split__media { order: 2; }
.hh-exp-split--reverse .hh-exp-split__text { order: 1; margin-left: 20px;}
.hh-exp-split__img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
border: 1px solid var(--hh-border);
}
@media (max-width: 1024px) {
.hh-exp-split { grid-template-columns: 1fr; gap: 3rem; }
.hh-exp-split--reverse .hh-exp-split__media { order: 0; }
.hh-exp-split--reverse .hh-exp-split__text { order: 0; }
.hh-exp-split__img { height: 360px; }
}
/* =========================================================
PAGE: OBRA
========================================================= */
.hh-obra-badge {
display: inline-flex;
align-items: center;
gap: .6rem;
background: var(--hh-bg-card);
padding: .6rem 1.4rem;
font-size: 14px;
color: #ffffff;
margin-bottom: 0;
}
.hh-obra-badge__label {
color: var(--hh-gold);
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: 700;
}
.hh-obra-badge__value { color: var(--hh-gold, #d6b55d); font-weight: 700; }
.hh-progress-blocks { display: flex; flex-direction: column; gap: 1.5rem; }
.hh-progress-item__meta {
display: flex;
justify-content: space-between;
margin-bottom: .5rem;
}
.hh-progress-item__label {
font-size: 13px;
color: var(--hh-black);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.hh-progress-item__pct {
font-size: 13px;
color: var(--hh-gold, #d6b55d);
font-weight: 700;
}
.hh-progress-bar {
height: 6px;
background: rgba(255,255,255,0.07);
border-radius: 3px;
overflow: hidden;
}
.hh-progress-bar__fill {
height: 100%;
background: linear-gradient(90deg, var(--hh-gold-dark), var(--hh-gold, #d6b55d));
border-radius: 3px;
transition: width 1.2s ease .3s;
}
.hh-obra-overall {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 2.5rem;
}
.hh-obra-overall__label {
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--hh-black);
}
.hh-obra-overall__value {
font-family: 'Apex Sans', sans-serif;
font-size: 56px;
color: var(--hh-gold, #d6b55d);
line-height: 1;
}
.hh-obra-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.hh-obra-gallery__item {
overflow: hidden;
margin: 0;
aspect-ratio: 4/3;
}
.hh-obra-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s;
}
.hh-obra-gallery__item:hover img { transform: scale(1.05); }
.hh-obra-gallery__item figcaption {
padding: .5rem .75rem;
font-size: 11px;
color: var(--hh-text-muted);
background: var(--hh-bg-card);
text-align: center;
}
.hh-obra-gallery-placeholder {
padding: 4rem 2rem;
text-align: center;
border: 1px dashed var(--hh-border-gold);
background: var(--hh-bg-card);
color: #ffffff;
}
.hh-obra-gallery-placeholder__hint {
font-size: 12px;
margin-top: .75rem;
opacity: .55;
}
.hh-obra-milestones {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.hh-obra-milestone {
text-align: center;
padding: 2rem;
background: var(--hh-bg-card);
border: 1px solid var(--hh-border);
min-width: 160px;
transition: border-color .25s;
}
.hh-obra-milestone:hover { border-color: var(--hh-gold); }
.hh-obra-milestone--final {
background: var(--hh-bg-card-hover);
}
.hh-obra-milestone__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
margin-bottom: .75rem;
}
.hh-obra-milestone__icon svg { width: 28px; height: 28px; display: block; }
.hh-obra-milestone__year {
display: block;
font-family: 'Apex Sans', sans-serif;
font-size: 36px;
color: var(--color-gold, #d6b55d);
line-height: 1;
margin-bottom: .3rem;
}
.hh-obra-milestone__label {
display: block;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #ffffff;
font-weight: 600;
}
.hh-obra-milestone-arrow {
color: var(--hh-gold, #d6b55d);
font-size: 24px;
opacity: .4;
}
@media (max-width: 768px) {
.hh-obra-gallery { grid-template-columns: 1fr 1fr; }
.hh-obra-milestones { flex-direction: column; }
.hh-obra-milestone-arrow { transform: rotate(90deg); }
}
/* =========================================================
PAGE: LEAD FORM
========================================================= */
:where(.hh-lead, .hh-form-lead) {
color: var(--color-text-dark);
}
:where(.hh-lead, .hh-form-lead) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, label, small, a) {
color: inherit;
}
:where(.hh-lead, .hh-form-lead) :is(input, textarea, select, button) {
color: inherit;
}
:where(.hh-lead, .hh-form-lead) :is(input, textarea, select)::placeholder {
color: currentColor;
opacity: .62;
}
:where(.hh-lead, .hh-form-lead):is(.hh-lead--dark, .hh-form-lead--dark, [style*="background:"], [style*="background-color:"]) {
color: var(--color-text-primary) !important;
}
:where(.hh-lead, .hh-form-lead):is(.hh-lead--dark, .hh-form-lead--dark, [style*="background:"], [style*="background-color:"]) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, label, small, a) {
color: inherit;
}
:where(.hh-lead, .hh-form-lead):is(.hh-lead--dark, .hh-form-lead--dark, [style*="background:"], [style*="background-color:"]) :is(input, textarea, select, button)::placeholder {
color: currentColor;
}
/* =========================================================
PAGE: HISTÓRIA
========================================================= */
.hh-awards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5px;
background: var(--hh-border);
border: 1px solid var(--hh-border);
margin-top: 0;
}
.hh-award {
background: var(--hh-bg-card);
padding: 2.5rem 2rem;
text-align: center;
transition: background .25s;
}
.hh-award:hover { background: var(--hh-bg-card-hover); }
.hh-award__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
margin-bottom: 1rem;
}
.hh-award__icon svg { width: 32px; height: 32px; display: block; }
.hh-award__title {
font-family: 'Apex Sans', sans-serif;
font-size: 20px;
letter-spacing: 2px;
color: var(--hh-gold, #d6b55d);
margin: 0 0 .75rem;
}
.hh-award__desc {
font-size: 13px;
color: var(--hh-text-muted);
line-height: 1.65;
margin: 0;
}
@media (max-width: 768px) {
.hh-awards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.hh-awards-grid { grid-template-columns: 1fr; }
}
/* =========================================================
PAGE: DESTINOS
========================================================= */
.hh-dest-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 2.5rem;
}
.hh-dest-step {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.hh-dest-step__num {
font-family: 'Apex Sans', sans-serif;
font-size: 40px;
color: var(--hh-gold, #d6b55d);
line-height: 1;
flex-shrink: 0;
width: 2.5rem;
}
.hh-dest-step strong {
display: block;
color: var(--hh-gold, #d6b55d);
font-size: 15px;
font-weight: 700;
margin-bottom: .3rem;
}
.hh-dest-step p {
margin: 0;
font-size: 14px;
color: var(--hh-black);
line-height: 1.6;
}
.hh-destinos-cats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5px;
}
.hh-dest-cat-card {
background: #232424;
border: 1px solid rgba(201,169,97,.22);
border-radius: 12px;
box-shadow: 0 18px 36px rgba(63,43,12,.08);
padding: 2.5rem 2rem;
text-align: center;
transition: background .25s, transform .25s, box-shadow .25s, border-color .25s;
}
.hh-dest-cat-card:hover { background: var(--hh-black); border-color: var(--hh-gold, #d6b55d); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(63,43,12,.12); }
.hh-dest-cat-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
margin-bottom: .6rem;
}
.hh-dest-cat-card__icon svg { width: 34px; height: 34px; display: block; }
.hh-dest-cat-card__count {
display: block;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--hh-gold, #d6b55d);
font-weight: 700;
margin-bottom: .75rem;
}
.hh-dest-cat-card__title {
font-family: 'Apex Sans', sans-serif;
font-size: 22px;
letter-spacing: 2px;
color: var(--color-text-dark);
margin: 0 0 .75rem;
}
.hh-dest-cat-card__items {
font-size: 13px;
color: var(--color-text-primary);
line-height: 1.6;
margin: 0;
}
/* Destinos economy compare — override existing hh-ec-* */
.hh-ec-saving {
display: inline-block;
margin-top: 1.25rem;
font-size: 14px;
color: #ffffff;
}
.hh-ec-saving strong { color: var(--hh-gold, #d6b55d); font-size: 20px; }
.hh-ec-price--gold { color: var(--hh-gold, #d6b55d) !important; }
@media (max-width: 1024px) {
.hh-destinos-cats-grid { grid-template-columns: repeat(2, 1fr); }
.hh-ec-grid { grid-template-columns: 1fr; }
.hh-ec-col--before,
.hh-ec-col--after {
border: 0;
}
.hh-ec-vs {
width: 100%;
min-height: 64px;
writing-mode: horizontal-tb;
text-orientation: mixed;
border-left: 0;
border-right: 0;
border-top: 1px solid rgba(214,181,93,.10);
border-bottom: 1px solid rgba(214,181,93,.10);
}
}
@media (max-width: 640px) {
.hh-destinos-cats-grid { grid-template-columns: 1fr 1fr; }
.hh-ec-col { padding: 36px 20px 30px; }
.hh-ec-plan { margin-bottom: 20px; }
.hh-ec-list li { font-size: 14px; padding: 12px 0; }
}
/* =========================================================
GALLERY FILTER BUTTONS
========================================================= */
.hh-gal-filter {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1.5rem;
}
.hh-gal-filter__btn {
background: transparent;
border: 1px solid var(--hh-border);
color: var(--hh-text-muted);
font-size: 11px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
padding: .5rem 1.2rem;
cursor: pointer;
transition: background .2s, border-color .2s, color .2s;
}
.hh-gal-filter__btn:hover,
.hh-gal-filter__btn.is-active {
background: var(--hh-gold, #d6b55d);
border-color: var(--hh-gold, #d6b55d);
color: var(--hh-black);
}
.hh-gal-meta {
margin-bottom: 1.5rem;
font-size: 12px;
color: var(--hh-text-muted);
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* =========================================================
LIGHTBOX (class-based, dynamically injected by JS)
========================================================= */
.hh-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0,0,0,.95);
backdrop-filter: blur(6px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
.hh-lightbox__close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: transparent;
border: 1px solid rgba(255,255,255,.2);
color: var(--color-text-primary);
font-size: 28px;
line-height: 1;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color .2s, background .2s;
}
.hh-lightbox__close:hover { border-color: var(--hh-gold, #d6b55d); color: var(--hh-gold, #d6b55d); }
.hh-lightbox__img-wrap { max-width: 90vw; max-height: 80vh; }
.hh-lightbox__img-wrap img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
display: block;
box-shadow: 0 0 60px rgba(0,0,0,.8);
}
.hh-lightbox__caption {
margin-top: 1rem;
text-align: center;
font-size: 13px;
color: rgba(255,255,255,.55);
letter-spacing: 1px;
}
/* .hh-no-scroll desabilitado para permitir scroll livre
Se precisar bloquear scroll ao abrir modal, use JS:
document.body.style.overflow = 'hidden';
document.body.style.overflow = 'auto';
*/
/* =========================================================
PARALLAX BREAK (apartamentos page)
========================================================= */
.hh-parallax-break {
position: relative;
min-height: 320px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hh-parallax-break__bg {
position: absolute;
inset: -20% 0;
background-size: cover;
background-position: center;
will-change: transform;
}
.hh-parallax-break__bg::after {
position: absolute;
inset: 0;
background: rgba(0,0,0,.65);
}
.hh-parallax-break__inner {
position: relative;
z-index: 2;
text-align: center;
padding: 3rem 2rem;
}
.hh-parallax-break__label {
display: block;
font-size: 11px;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--hh-gold, #d6b55d);
font-weight: 700;
margin-bottom: 1rem;
}
.hh-parallax-break__title {
font-family: 'Apex Sans', sans-serif !important;
font-size: clamp(28px, 4vw, 54px);
color: var(--hh-gold);
font-weight: 100;
letter-spacing: 4px;
line-height: 1.1;
margin: 0 0 1.5rem;
}
.hh-parallax-break__line {
display: block;
width: 60px;
height: 2px;
background: var(--hh-gold, #d6b55d);
margin: 0 auto;
}
/* Strong override: ensure hero/entry headings and section titles use apex-sans
Placed late in the file to win the cascade and avoid accidental overrides. */
.hh-hero h1,
.site-hero h1,
.entry-header h1,
.hh-section-title,
.hh-section__title {
font-family: 'Montserrat', 'apex-sans', Georgia, "Times New Roman", serif !important;
color: var(--hh-white) !important;
padding-top: 1%;
}
/* Contato: reduzir o padding top dos títulos pela metade */
.hh-page--contato .hh-hero h1,
.hh-page--contato .site-hero h1,
.hh-page--contato .entry-header h1,
.hh-page--contato .hh-section-title,
.hh-page--contato .hh-section__title {
padding-top: 0 !important;
}
.hh-parallax-break__line {
display: block;
width: 60px;
height: 2px;
background: var(--hh-gold, #d6b55d);
margin: 0 auto;
}
/* =====================================================================
GUITAR STRINGS — Hard Rock Brand Language
Regras de uso:
• entram pela esquerda de uma imagem
• saem pela direita ou transitam para o próximo frame
• dividem duas imagens na mesma página horizontalmente
• corda mais grossa (Low E) lidera; imagens quebram na 3ª corda
• opacidade variável para não interferir com outros elementos
• nunca forçadas — omitidas quando não acrescentam valor
===================================================================== */
.hh-strings {
pointer-events: none;
user-select: none;
overflow: hidden;
/* ocultadas em mobile — nunca forçadas */
display: none;
}
@media (min-width: 961px) {
.hh-strings { display: block; }
}
.hh-strings__s {
display: block;
width: 100%;
will-change: transform;
/* JS define scaleX:0 → scaleX:1 com transformOrigin:left */
}
/* Cordas são interativas no desktop — palheta do mouse ativa vibração */
@media (min-width: 961px) {
.hh-strings__s {
pointer-events: auto;
cursor: crosshair;
}
}
/* ── 6 cordas de guitarra — Low E (mais grossa) → High e (mais fina) ──
Espessuras mimetizam cordas reais: Low E visivelmente mais grossa;
opacidades no range 30–50% conforme manual (elemento de suporte, não linha sólida);
espaçamento maior entre cordas graves, menor entre agudas */
.hh-strings__s--1 { height: 5px; opacity: .42; margin-bottom: 18px; } /* Low E — visivelmente mais grossa */
.hh-strings__s--2 { height: 3px; opacity: .34; margin-bottom: 14px; }
.hh-strings__s--3 { height: 1.8px; opacity: .26; margin-bottom: 10px; } /* imagens quebram aqui */
.hh-strings__s--4 { height: 1.1px; opacity: .18; margin-bottom: 8px; }
.hh-strings__s--5 { height: .6px; opacity: .13; margin-bottom: 6px; }
.hh-strings__s--6 { height: .35px; opacity: .08; margin-bottom: 0; }
.hh-strings__s--2 { height: 3px; opacity: .38; margin-bottom: 11px; }
.hh-strings__s--3 { height: 1.8px; opacity: .30; margin-bottom: 8px; } /* imagens quebram aqui */
.hh-strings__s--4 { height: 1.1px; opacity: .22; margin-bottom: 6px; }
.hh-strings__s--5 { height: .6px; opacity: .16; margin-bottom: 4px; }
.hh-strings__s--6 { height: .35px; opacity: .10; margin-bottom: 0; }
/* ── Paletas por contexto de fundo ── */
.hh-strings--light .hh-strings__s { background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(100,100,100,.72) 48%, rgba(18,18,18,.88) 100%); }
.hh-strings--dark .hh-strings__s { background: linear-gradient(90deg, rgba(6,6,6,.90) 0%, rgba(70,70,70,.65) 48%, rgba(8,8,8,.92) 100%); }
/* Transição dark → light: cordas escuras com realce de gradiente */
.hh-strings--d2l .hh-strings__s {
background: linear-gradient(90deg, rgba(6,6,6,.88) 0%, rgba(85,85,85,.68) 48%, rgba(10,10,10,.90) 100%);
}
/* Transição light → dark: cordas com tom dourado/vintage discreto */
.hh-strings--l2d .hh-strings__s {
background: linear-gradient(90deg, rgba(12,12,12,.82) 0%, rgba(140,110,60,.58) 48%, rgba(8,8,8,.86) 100%);
}
/* ── Variante hero-exit:
entram pela borda ESQUERDA da tela — left: 0, sem padding horizontal.
A corda mais grossa (Low E) lidera; saem pela direita do frame.
Cordas tratadas como elemento de suporte (opacidade 30–50%). */
.hh-strings--hero-exit {
position: absolute;
bottom: -22px;
left: 0;
right: 0;
z-index: 12;
padding: 0; /* ancoragem à borda esquerda — sem recuo lateral */
overflow: visible;
}
.hh-hero .hh-strings {
z-index: 12;
}
/* ── Overlay das cordas — posicionadas logo abaixo do hero
Ficam na frente de tudo com z-index elevado, sem ocupar fluxo */
.hh-strings-overlay {
position: absolute;
left: 0;
right: 0;
z-index: 99;
pointer-events: none;
overflow: visible;
height: auto;
padding: 12px 0 0;
width: 100%;
}
/* ── Variante divide:
Filho absoluto posicionado em bottom:0 da seção anterior.
Não ocupa fluxo — zero gap de layout. */
.hh-strings--divide {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 8;
padding: 8px 0;
overflow: visible;
width: 100%;
}
/* ── Variante exit-right:
Saída pela direita do frame/imagem — faixa na base da seção.
Segura para seções com overflow:hidden (usa bottom:0, não -22px).
A corda mais grossa (--1) alinha‑se à borda inferior da imagem. */
.hh-strings--exit-right {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 4;
padding: 0 6%;
overflow: visible;
}
/* ── Variante enter-left:
Cordas entram pela borda esquerda de uma imagem/seção.
O container cobre ~48% da largura a partir da esquerda;
as cordas crescem (scaleX 0→1) da borda esquerda do frame
para dentro da imagem — nunca ultrapassam o centro.
A corda mais grossa (--1) alinha‑se à borda esquerda do frame. */
.hh-strings--enter-left {
position: absolute;
top: 50%;
left: 0;
width: 48%;
transform: translateY(-50%);
z-index: 4;
padding: 0;
overflow: visible;
}
/* ── Variante gold:
Para fundos escuros com imagens vivas onde branco interfere.
Tom dourado sutil, entre a marca Hard Rock e o vintage das cordas. */
.hh-strings--gold .hh-strings__s {
background: linear-gradient(90deg, rgba(24,18,8,.84) 0%, rgba(185,145,60,.76) 48%, rgba(18,14,6,.88) 100%);
}
/* =========================================================
REFRESH HOTELARIA CLARA — março/2026
========================================================= */
body.hh-palette-premium-brand {
--color-bg-primary: #FFF;
--color-bg-secondary: #EDE0C4;
--color-purple: #215732;
--color-purple-mid: #2F6A43;
--color-purple-light: #5E8263;
--color-pink: #B89750;
--color-pink-mid: #9B7B3B;
--color-blue: #215732;
--color-gold: #B89750;
--color-text-primary: #1A1008;
--color-text-body: #5A4A30;
--color-text-dark: #1A1008;
--gradient-hero: linear-gradient(135deg, #F5EDD8 0%, #EDE0C4 56%, #E6D0AF 100%);
--gradient-cta: linear-gradient(135deg, #B89750 0%, #9B7B3B 100%);
--gradient-card: linear-gradient(180deg, rgba(245,237,216,0) 0%, rgba(237,224,196,.95) 100%);
--gradient-bar: linear-gradient(90deg, #B89750 0%, #215732 100%);
--hh-black: #1A1008;
--hh-white: #FFFDF8;
--hh-gold: #B89750;
--hh-gold-light: #C8AA68;
--hh-gold-dark: #8E7037;
--hh-bg: var(--color-bg-primary);
--hh-bg-section: var(--color-bg-primary);
--hh-bg-alt: #EDE0C4;
--hh-bg-card: #232424;
--hh-bg-card-hover: rgba(255,248,239,.98);
--hh-bg-input: rgba(255,255,255,.88);
--hh-text-white: #FFFDF8;
--hh-text-muted: var(--color-text-body);
--hh-text-subtle: rgba(90,74,48,.56);
--hh-border: rgba(184,151,80,.24);
--hh-border-gold: rgba(184,151,80,.42);
--hh-text-dark: #1A1008;
--hh-text-gray: rgba(90,74,48,.82);
--hh-light-bg: #EDE0C4;
--hh-lighter-bg: #FBF5E8;
--hh-border-light: rgba(90,74,48,.16);
--hh-purple: #215732;
--hh-purple-dark: #215732;
--hh-purple-light: #5E8263;
--hh-purple-bg: rgba(33,87,50,.10);
--hh-orange: #B89750;
--hh-pink: #B89750;
--hh-magenta-brand: #883001;
--hh-blue-brand: #215732;
--hh-red-brand: #FE5000;
--hh-yellow-brand: #D9B96C;
--hh-green-brand: #215732;
--hh-script-shadow: none;
--hh-surface-dark: #EDE0C4;
--hh-surface-dark-soft: #F7F0E0;
--hh-surface-dark-elev: #F1E4C8;
--hh-surface-dark-input: #FFF9F0;
--hh-overlay-gramado-a: rgba(245,237,216,.90);
--hh-overlay-gramado-b: rgba(237,224,196,.72);
--hh-overlay-rock-a: rgba(245,237,216,.84);
--hh-overlay-rock-b: rgba(237,224,196,.76);
--hh-bg-white-wash: rgba(255,255,255,.20);
--hh-bg-white-wash-strong: rgba(255,255,255,.32);
--hh-accent: #B89750;
--hh-accent-hover: #215732;
--hh-border-accent: rgba(33,87,50,.18);
--hh-badge-hot: #883001;
--hh-urgency: #FE5000;
--hh-cta-text: #1A1008;
--hh-on-accent-hover: #FFFDF8;
--hh-panel-shadow: 0 24px 48px rgba(90,74,48,.10);
--hh-soft-shadow: 0 12px 30px rgba(90,74,48,.08);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) {
background: transparent;
color: var(--hh-text-primary);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) ::selection {
background: var(--hh-accent);
color: var(--hh-text-dark);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) a {
color: var(--hh-gold);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) a:hover {
color: var(--hh-gold-dark);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section-title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section__title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-post-card__title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-card h4,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-tour-cta__title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-author strong,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-info h3,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-destino-cat h4,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-timeline-card h4,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-area-item strong {
color: var(--color-text-primary);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section-title span,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__title span {
text-shadow: none;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section-subtitle,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__eyebrow,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-card__tag,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-post-card__meta,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-tour-cta__label,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-timeline-year,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-owners-count__number,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-rci-num__value,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-stars,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-nav-link::after {
color: var(--hh-gold, #d6b55d);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-gold-bar,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-nav-link::after {
background: var(--hh-gold, #d6b55d);
box-shadow: none;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section__sub,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-post-card__excerpt,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-card p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-text,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-author span,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-destino-cat p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-timeline-card p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-contact-inline a,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-footer__legal,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-footer__copy,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-footer__links a,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-lead .hh-section__sub,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-section__sub,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-desc,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-features li,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-rci-num__label,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-owners-count__label,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-stat__label,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-rockstar-perk,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-trust-seal {
color: var(--hh-black);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section:not(.hh-section--dark):not(.hh-section--black) {
background: var(--hh-white);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-economia {
background:
linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 100%),
var(--color-bg-primary);
}
/* dark sections mantêm fundo escuro — só form-lead e footer viram branco */
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-lead,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #colophon {
background: white;
color: var(--color-text-dark, #1a1a1a);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-section-title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-section-title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-lead,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-lead,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-faq summary,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-section__title {
color: var(--hh-text-color, var(--color-text-primary));
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-card,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) article.hh-post-card,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-faq details,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-city,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-destino-cat,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-timeline-card,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-card,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-tour-cta,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-rockstar-perk,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-trust-seal,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-wrap,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-lead__form-wrap,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__form-box,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-area-item,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-rci-numbers,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-stats,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-ec-grid {
background: rgb(35 36 36);
border-color: rgba(184,151,80,.24);
box-shadow: var(--hh-soft-shadow);
color: var(--hh-white, #ffffff);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-city {
color: var(--color-text-primary);
}
/* texto interno de cards escuros — anula o var(--hh-black) do bloco geral acima */
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-card p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) article.hh-post-card .hh-post-card__excerpt,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-card .hh-testimonial-text,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-timeline-card p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-destino-cat p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-area-item p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-faq details p {
color: rgba(255,255,255,.78);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-gramado-card,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-Gramado-card {
background: rgba(255,251,244,.88);
border-color: rgba(184,151,80,.24);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-gramado-card:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-Gramado-card:hover {
background: rgba(255,248,239,.98);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-gramado-card p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-Gramado-card p {
color: #ffffff;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-gramado-card__icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-gramado-card__icon svg,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-Gramado-card__icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-Gramado-card__icon svg {
color: var(--hh-accent, #B89750);
stroke: var(--hh-accent, #B89750);
border-color: rgba(90,74,48,.18);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-faq-item {
border-bottom-color: rgba(90,74,48,.22);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-faq-q {
color: var(--color-text-primary);
}
/* texto de resposta do FAQ — caixas escuras no palette padrão */
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-faq-a p {
color: rgba(255,255,255,.75);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-faq-q span,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-faq-chevron {
color: var(--hh-gold-dark);
opacity: 1;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page--gramado #roteiro .hh-itinerary {
background: rgba(90,74,48,.14);
border-color: rgba(90,74,48,.18);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page--gramado #roteiro .hh-itinerary__day {
background: rgba(255,251,244,.92);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page--gramado #roteiro .hh-itinerary__day:hover {
background: #fffdf8;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page--gramado #roteiro .hh-itinerary__num {
color: var(--hh-gold-dark);
opacity: .52;
text-shadow: none;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page--gramado #roteiro .hh-itinerary__content h3 {
color: var(--hh-gold-dark);
border-bottom-color: rgba(90,74,48,.22);
text-shadow: none;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page--gramado #roteiro .hh-itinerary__list li {
color: var(--color-text-dark, #1a1a1a);
border-bottom-color: rgba(90,74,48,.16);
text-shadow: none;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page--gramado #roteiro .hh-it-time {
color: var(--hh-gold-dark);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-card:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) article.hh-post-card:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-card:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-timeline-card:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-faq details:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-faq details[open] {
border-color: rgba(33,87,50,.28);
box-shadow: 0 18px 36px rgba(90,74,48,.10);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-group label,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-form-group label,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-form-group label,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-lead-form__lgpd,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-checkbox,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-checkbox {
color: var(--color-text-body);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-group input,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-group textarea,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-group select,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-form-group input,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-form-group textarea,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-form-group select,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-form-group input,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-form-group textarea,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-form-group select,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-lead-form__row input {
background: rgba(255,255,255,.90);
border: 1px solid rgba(90,74,48,.16);
color: var(--color-text-dark, #1a1a1a);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-group input::placeholder,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-group textarea::placeholder,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-lead-form__row input::placeholder {
color: rgba(90,74,48,.48);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-group input:focus,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-group textarea:focus,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-form-group select:focus,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-lead-form__row input:focus {
border-color: var(--hh-green-brand);
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(33,87,50,.08);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-lead-form__feedback {
color: var(--hh-green-brand);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-lead-form__feedback.error {
color: var(--hh-urgency);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-lead-form__lgpd a {
color: var(--hh-white);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn {
background: var(--gradient-cta);
color: var(--hh-cta-text);
border-color: var(--hh-accent);
animation: none;
box-shadow: 0 14px 30px rgba(184,151,80,.16);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn:hover {
background: var(--hh-accent-hover);
border-color: rgba(255,255,255,.92);
color: var(--hh-on-accent-hover);
box-shadow: 0 16px 36px rgba(33,87,50,.18);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--gold {
background: var(--hh-gold, #d6b55d);
border-color: var(--hh-gold, #d6b55d);
color: var(--hh-white) !important;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--gold:hover {
background: var(--hh-accent-hover);
border-color: var(--hh-accent-hover);
color: var(--hh-on-accent-hover) !important;
}
@keyframes hh-btn-text-bounce-subtle {
0%, 100% {
transform: translateY(0);
text-shadow: 0 0 0 rgba(255,255,255,0);
}
50% {
transform: translateY(-0.8px);
text-shadow: 0 1px 0 rgba(255,255,255,.34);
}
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--outline,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--ghost,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--dark,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--portal,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--rockstar-nav {
background: transparent;
color: var(--hh-gold);
border-color: var(--hh-gold);
box-shadow: none;
animation: none;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--outline:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--ghost:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--dark:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--portal:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--rockstar-nav:hover {
background: rgba(201,169,97,.12);
border-color: rgba(0,0,0,.28);
color: var(--hh-text-color, var(--hh-black));
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .hh-btn--outline,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .hh-btn--ghost,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .hh-btn--dark,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .hh-btn--portal,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .hh-btn--rockstar-nav,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-btn--outline,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-btn--ghost,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-btn--dark,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-btn--portal,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-btn--rockstar-nav {
background: transparent;
color: var(--hh-text-color, var(--hh-white));
border-color: rgba(255,255,255,.66);
box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
animation: hh-btn-text-bounce-subtle 3.4s ease-in-out infinite;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--pink {
background: var(--hh-gold, #d6b55d);
border-color: var(--hh-gold, #d6b55d);
color: var(--hh-white);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--pink:hover {
background: var(--hh-green-brand);
border-color: var(--hh-green-brand);
color: var(--hh-white);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--orange {
background: var(--hh-urgency);
border-color: var(--hh-urgency);
color: var(--hh-white);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-btn--orange:hover {
background: var(--hh-gold, #d6b55d);
border-color: var(--hh-gold, #d6b55d);
color: var(--hh-white);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header {
background: var(--hh-white);
border-bottom: 1px solid rgba(0,0,0,.08);
backdrop-filter: blur(16px);
box-shadow: 0 10px 30px rgba(0,0,0,.06);
color: var(--color-text-dark);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled {
background: linear-gradient(black, transparent);
border-bottom-color: rgba(184,151,80,.32);
box-shadow: 0 18px 40px rgba(90,74,48,.12);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .site-title-text,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-nav-link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-menu-toggle,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-sub-toggle {
color: var(--hh-black);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .site-title-text,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .hh-nav-link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .hh-menu-toggle,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .hh-sub-toggle,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .site-title-text,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-nav-link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-menu-toggle,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-sub-toggle {
color: var(--color-text-primary);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header__logo--dark { display: block; }
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-header__logo--dark { display: none; }
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-header__logo--light { display: block; }
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-nav-link:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #primary-menu > li.current-menu-item > .hh-nav-link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #primary-menu > li.current-menu-ancestor > .hh-nav-link {
color: var(--hh-black);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled .hh-nav-link:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled #primary-menu > li.current-menu-item > .hh-nav-link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #masthead.scrolled #primary-menu > li.current-menu-ancestor > .hh-nav-link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled .hh-nav-link:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled #primary-menu > li.current-menu-item > .hh-nav-link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header.scrolled #primary-menu > li.current-menu-ancestor > .hh-nav-link {
color: var(--color-text-primary);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-sub-menu,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-mega,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-pnav-clone .hh-sub-menu {
background: rgba(0, 0, 0, 0.7);
border-top-color: rgba(255, 255, 255, 0);
border-bottom-color: rgba(255, 255, 255, 0);
box-shadow: 0 24px 50px rgba(90,74,48,.12);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-sub-menu > li,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-mega__links > li,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-pnav-clone > .hh-nav-link {
border-bottom-color: rgba(90,74,48,.08);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-sub-link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-mega__flat-link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-mega__link,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-pnav-clone > .hh-nav-link {
color: var(--hh-white) !important;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-sub-link:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-mega__flat-link:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-mega__link:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-pnav-clone > .hh-nav-link:hover {
color: var(--hh-gold, #d6b55d) !important;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-mega__headline,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-mega__col-title {
color: var(--hh-gold, #d6b55d);
border-bottom-color: rgba(255, 255, 255, 0);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero {
color: var(--color-text-body);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__bg {
filter: saturate(.92) sepia(.06) brightness(.95);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero::before {
background: none;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero--has-video .hh-hero__video {
filter: saturate(.92) contrast(1.04) brightness(.88);
}
/* Gramado: com vídeo no hero, não renderiza a camada de imagem (fica só fallback sem vídeo) */
.hh-page--gramado .hh-hero--has-video .hh-hero__bg {
display: none;
}
.hh-page--galeria .hh-hero--has-video .hh-hero__bg {
display: none;
}
.hh-page--destinos .hh-hero--has-video .hh-hero__bg {
display: none;
}
.hh-destinos-transition {
padding-top: clamp(24px, 4vw, 56px);
padding-bottom: clamp(24px, 4vw, 56px);
}
.hh-destinos-transition__media {
max-width: 1600px;
margin: 0 auto;
}
.hh-destinos-transition__img {
width: 100%;
aspect-ratio: 2 / 1;
object-fit: cover;
display: block;
border-radius: 8px;
}
.hh-page--galeria .hh-hero--has-video .hh-hero__video {
transform: scale(1.12);
transform-origin: center center;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero::after {
background: transparent;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__title {
color: var(--hh-black);
text-shadow: none;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__eyebrow,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-tour-cta__label {
color: var(--hh-gold, #d6b55d);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__sub,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__text {
color: var(--hh-white) !important;
background: var(--hh-bg-card);
padding: .62rem .9rem;
display: inline-block;
max-width: min(92vw, 860px);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__badges span {
background: rgba(255,251,244,.78);
border-color: rgba(184,151,80,.22);
color: var(--color-text-body);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__form-title {
color: var(--hh-gold, #d6b55d);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__form-sub,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-lead-form__lgpd {
color: var(--hh-gold, #d6b55d);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__arrow,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__arrow-link {
color: var(--hh-gold, #d6b55d);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-stats {
background: rgba(255,251,244,.74);
border-top: 1px solid rgba(184,151,80,.32);
border-bottom: 1px solid rgba(184,151,80,.32);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-stat + .hh-stat::before {
background: rgba(184,151,80,.18);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-ec-card--good,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-tour-cta {
background: rgba(184,151,80,.10);
border-color: rgba(184,151,80,.30);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-ec-vs {
background: var(--hh-on-accent-hover);
color: var(--hh-cta-text);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-ec-card__icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-benefit-icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-area-icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-destino-cat__icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-rockstar-perk span,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-trust-seal .hh-inline-icon,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-contact-inline a svg {
color: var(--hh-white);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-city:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-city--active {
background: var(--hh-accent);
color: var(--hh-cta-text) !important;
border-color: var(--hh-accent) !important;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-tabs {
border-bottom-color: rgba(184,151,80,.24);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-tab {
color: var(--color-text-body);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-tab:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-tab.is-active {
color: var(--hh-green-brand);
border-bottom-color: var(--hh-accent);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-carousel {
background: rgba(237,224,196,.52);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-prev,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-next {
background: rgba(255,251,244,.84);
border-color: rgba(184,151,80,.28);
color: var(--color-text-primary);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-prev:hover,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-next:hover {
background: var(--hh-accent);
color: var(--hh-cta-text);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-dot {
background: rgba(90,74,48,.22);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-dot.is-active {
background: var(--hh-accent);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-gramado-distances strong,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-Gramado-distances strong,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-tour-cta__label,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-hero__eyebrow {
color: var(--hh-gold, #d6b55d);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-gramado .hh-section-title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-rockstar .hh-section-title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-gramado .hh-lead,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-rockstar .hh-lead {
color: var(--color-text-primary);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-gramado .hh-lead,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-rockstar .hh-lead,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-gramado .hh-gramado-distances,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-gramado .hh-Gramado-distances,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #sec-rockstar .hh-rockstar-perk {
color: #ffffff;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-author strong,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-footer__logo-text {
color: var(--color-text-primary);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) #colophon {
border-top: 1px solid rgba(184,151,80,.28);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-social__icon {
background: rgba(255,251,244,.78);
border-color: rgba(184,151,80,.28);
color: var(--hh-green-brand);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-social__icon:hover {
background: rgba(33,87,50,.08);
border-color: var(--hh-green-brand);
color: var(--hh-green-brand);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-footer__links a:hover {
color: var(--hh-green-brand);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-blog-hero,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page-hero {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-blog-hero::before,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page-hero__overlay {
background: linear-gradient(135deg, rgba(245,237,216,.94) 0%, rgba(237,224,196,.78) 100%);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-blog-hero.hh-blog-hero--search {
color: var(--hh-white);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-blog-hero.hh-blog-hero--search::before {
background: rgba(0,0,0,.72);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-blog-hero.hh-blog-hero--search .hh-hero__title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-blog-hero.hh-blog-hero--search .hh-hero__title--outside,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-blog-hero.hh-blog-hero--search .hh-hero__title--outside span {
color: var(--hh-white) !important;
text-shadow: 0 4px 18px rgba(0,0,0,.48);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-blog-hero.hh-blog-hero--search .hh-hero__eyebrow {
color: var(--hh-gold, #d6b55d);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-page-hero__img {
opacity: .34;
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-card,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) article.hh-post-card,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-destino-cat,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-timeline-card,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-card,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-tour-cta,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-area-item,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-rockstar-perk,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-trust-seal,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-ec-grid,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-ec-card--bad,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-ec-card--good {
background: #232424;
border-color: rgba(214,181,93,.18);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section-title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section__title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-post-card__title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-card h4,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-tour-cta__title,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-author strong,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-apto-info h3,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-destino-cat h4,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-timeline-card h4,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-area-item strong {
color: var(--hh-gold, #d6b55d);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-card p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) article.hh-post-card p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-post-card__excerpt,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-destino-cat p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-timeline-card p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-testimonial-card p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-tour-cta p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-area-item span,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-ec-card ul li {
color: var(--color-text-primary);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-strings--light .hh-strings__s {
background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(95,95,95,.70) 48%, rgba(16,16,16,.88) 100%);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-strings--d2l .hh-strings__s {
background: linear-gradient(90deg, #111 0%, rgba(33, 87, 50, .22) 100%);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-strings--l2d .hh-strings__s {
background: linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(135,105,55,.60) 48%, rgba(8,8,8,.86) 100%);
}
@media (max-width: 768px) {
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-header__nav {
background: rgba(245,237,216,.98);
border-top: 1px solid rgba(184,151,80,.20);
box-shadow: 0 18px 36px rgba(90,74,48,.12);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-nav-link {
border-bottom-color: rgba(90,74,48,.08);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-sub-toggle {
border-left-color: rgba(90,74,48,.08);
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-sub-menu,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-mega {
background-color: rgba(0, 0, 0, 0.7) !important;
border-color: rgba(255, 255, 255, 0) !important;
}
}
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-lead,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-lead,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--dark .hh-faq details p,
body:not(.hh-palette-premium-emerald):not(.hh-palette-premium-olive):not(.hh-palette-premium-teal) .hh-section--black .hh-faq details p {
color: var(--hh-text-color, var(--color-text-body));
}
@media (max-width: 768px) {
.hh-hero--split .hh-hero__copy {
padding-inline: clamp(12px, 4.5vw, 18px);
}
}
.hh-lead-form select,
.hh-form-wrap select,
.hh-form-lead select {
width: 100%;
display: block;
color: var(--hh-white);
background: linear-gradient(180deg, rgba(35,36,36,.98) 0%, rgba(24,24,24,.98) 100%);
border: 1px solid rgba(214,181,93,.28);
border-radius: 4px;
padding: 12px 44px 12px 16px;
min-height: 48px;
line-height: 1.2;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--hh-gold, #d6b55d) 50%), linear-gradient(135deg, var(--hh-gold, #d6b55d) 50%, transparent 50%);
background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
transition: border-color .25s, box-shadow .25s, transform .2s, background .25s;
}
#sec-cta .hh-form-lead > .hh-container {
max-width: min(1880px, 98vw);
padding-left: clamp(12px, 1.8vw, 30px);
padding-right: clamp(10px, 1.6vw, 24px);
}
#sec-cta .hh-form-lead {
--hh-cta-shift-left: clamp(56px, 5.3vw, 120px);
position: relative;
left: calc(-5 * var(--hh-cta-shift-left));
width: calc(100% + var(--hh-cta-shift-left));
min-width: 107vw;
}
#sec-cta .hh-form-lead__inner {
grid-template-columns: minmax(340px, 0.9fr) minmax(760px, 1.55fr);
gap: 2.4rem;
margin-left: 0;
}
@media (max-width: 1100px) {
#sec-cta .hh-form-lead {
left: 0;
width: 100%;
min-width: 100%;
}
#sec-cta .hh-form-lead__inner {
grid-template-columns: minmax(280px, 0.95fr) minmax(460px, 1.22fr);
gap: 1.8rem;
margin-left: 0;
}
}
@media (max-width: 900px) {
#sec-cta .hh-form-lead > .hh-container {
max-width: 100%;
padding-left: clamp(12px, 4vw, 18px);
padding-right: clamp(12px, 4vw, 18px);
}
#sec-cta .hh-form-lead__inner {
grid-template-columns: 1fr;
gap: 1.25rem;
}
#sec-cta .hh-form-lead__form-wrap {
padding: clamp(1rem, 4vw, 1.4rem);
}
}
.hh-lead-form select:hover,
.hh-form-wrap select:hover,
.hh-form-lead select:hover {
border-color: rgba(214,181,93,.52);
box-shadow: 0 10px 24px rgba(0,0,0,.14);
transform: translateY(-1px);
}
.hh-lead-form select:focus,
.hh-form-wrap select:focus,
.hh-form-lead select:focus {
outline: none;
border-color: var(--hh-gold, #d6b55d);
box-shadow: 0 0 0 3px rgba(214,181,93,.14), 0 10px 24px rgba(0,0,0,.14);
}
.hh-lead-form select option,
.hh-form-wrap select option,
.hh-form-lead select option {
color: var(--color-text-dark);
}
/* Title moved outside hero: keep visual scale and spacing */
.hh-hero__title--outside {
display: block;
width: min(100%, 1200px);
margin: 40px auto 24px;
box-sizing: border-box;
padding-inline: 24px;
font-size: clamp(40px,6vw,86px);
line-height: 1.02;
text-align: center;
font-weight: 700;
align-self: center;
justify-self: center;
}
.hh-hero__title--outside span {
display: block;
font-weight: 100;
margin-left: 0;
color: var(--hh-black);
}
@media (min-width: 980px) {
.hh-hero__title--outside { margin-top: 12%; }
}
/* =========================================================
MOBILE — Revisão completa de responsividade
Corrige overflow, espaçamentos e grids em telas pequenas
========================================================= */
/* ── 768 px ── tablets e celulares grandes ── */
@media (max-width: 768px) {
.hh-hero__title--outside {
padding-inline: 20px;
}
/* Hero: letter-spacing de 1.5rem causa overflow horizontal grave */
.hh-hero__title {
letter-spacing: 0.2rem !important;
font-size: clamp(1.9rem, 7vw, 3rem);
}
/* Section title: margem inferior excessiva */
.hh-section-title {
margin-bottom: 48px;
}
.hh-section-title span {
max-height: none; /* evita clipping em telas pequenas */
}
/* Logo no header menor */
.hh-header__logo-link .hh-header__logo { max-height: 60px; }
.hh-header__logo-link { min-height: 60px; }
/* CTAs secundárias do hero empilhadas */
.hh-hero__ctas-secondary {
flex-direction: column;
align-items: center;
}
/* Cards: cancela margin-left: 30px do bloco global (San Juan) */
.hh-card,
.hh-post-card,
article.hh-post-card,
.hh-area-card,
.hh-widget,
.hh-ec-card {
margin-left: 0;
}
/* Contato e imprensa splits: 1 coluna */
.hh-contact-split,
.hh-contact-inner { grid-template-columns: 1fr; }
.hh-press-split { grid-template-columns: 1fr; }
/* Historia split */
.hh-historia-split,
.hh-Historia-split { grid-template-columns: 1fr; gap: 32px; }
/* Número items: border direita removida em 2-col */
.hh-number-item {
border-right: none;
padding-bottom: 1.25rem;
}
}
/* ── 480 px ── celulares comuns (iPhone 14, Pixel, Samsung) ── */
@media (max-width: 480px) {
.hh-hero__title--outside {
padding-inline: 16px;
}
/* Hero */
.hh-hero__title {
letter-spacing: 0 !important;
font-size: clamp(1.7rem, 9vw, 2.6rem);
}
.hh-hero__sub,
.hh-hero__text { font-size: 1rem; }
.hh-hero__ctas { gap: .75rem; }
.hh-btn--hero-primary { width: 100%; max-width: 320px; }
/* Seção */
.hh-section { padding: 52px 5%; }
.hh-section-title { margin-bottom: 32px; }
.hh-section-subtitle { letter-spacing: 0.15em; }
/* Botão: evita overflow e texto cortado */
.hh-btn {
padding: 14px 32px;
font-size: 1rem;
letter-spacing: 0.04em;
white-space: normal;
word-break: break-word;
max-width: 100%;
box-sizing: border-box;
}
/* Cards: cancela margin-left em telas pequenas */
.hh-card,
.hh-post-card,
article.hh-post-card,
.hh-area-card,
.hh-widget,
.hh-ec-card {
margin-left: 0;
padding: 20px 16px;
}
/* Eventos Gramado */
.hh-evento { padding: 16px 18px; }
.hh-evento__mes { font-size: .7rem; min-width: 76px; }
/* FAQ */
.hh-faq details summary { font-size: .85rem; }
/* Imprensa: logos 2 colunas */
.hh-press-logos-grid { grid-template-columns: repeat(2, 1fr); }
/* Gallery filter: botões mais compactos */
.hh-gal-filter__btn { font-size: 10px; padding: .4rem .8rem; }
/* Tabs apartamentos */
.hh-apto-tab__btn { font-size: .7rem; padding: 10px 14px; }
/* Points step */
.hh-points-step { padding: 20px; }
/* Seasons */
.hh-season,
.hh-Season { padding: 24px 16px; }
/* Benefícios */
.hh-benefit-card { padding: 24px 20px; }
/* Economia comparada: padding no container */
.hh-ec-grid { margin: 24px 0; padding: 0 12px; }
.hh-ec-plan { font-size: 1rem; margin-bottom: 14px; }
/* Numbers row: alinha em 2 colunas sem overflow */
.hh-numbers-row { flex-wrap: wrap; }
.hh-number-item { flex: 0 0 50%; max-width: 50%; }
/* Contato inline */
.hh-contact-inline { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ── 380 px ── iPhone SE, Galaxy A, telas muito pequenas ── */
/* =========================================================
EMPTY FIELD GUARD
Respeita campos limpos no Customizer/Gutenberg:
quando o PHP produz uma tag vazia (esc_html('') == '')
o seletor :empty a esconde automaticamente.
========================================================= */
.hh-section-subtitle:empty,
.hh-section-title span:empty,
.hh-tour-cta__label:empty,
.hh-tour-cta__title:empty,
.hh-lead:empty,
.hh-lead--center:empty,
.hh-section-title:empty { display: none; }
@media (max-width: 380px) {
/* Hero */
.hh-hero__title {
font-size: clamp(1.45rem, 10vw, 2rem);
letter-spacing: 0 !important;
}
/* Seção */
.hh-section { padding: 40px 4%; }
.hh-section-title { font-size: clamp(1.45rem, 9vw, 2rem); margin-bottom: 24px; }
.hh-section-subtitle { font-size: .58rem; letter-spacing: .1em; }
/* Botão ainda mais compacto */
.hh-btn { padding: 12px 20px; font-size: .88rem; }
/* Economia comparada */
.hh-ec-grid { margin: 16px 0; padding: 0 8px; }
/* Header */
.hh-header__logo-link .hh-header__logo { max-height: 46px; }
.hh-header__logo-link { min-height: 46px; }
#masthead,
.hh-header { padding: 12px 4%; }
/* Gold bar */
.hh-gold-bar { width: 40px; }
/* Eventos: período menor */
.hh-evento__mes { font-size: .62rem; min-width: 68px; }
/* Cards: sem padding extra */
.hh-card,
.hh-post-card,
article.hh-post-card,
.hh-area-card,
.hh-widget,
.hh-ec-card {
margin-left: 0;
padding: 16px 14px;
}
}
/* =========================================================
FRONT PAGE HOTFIX V2 — June 2026
Force stable alignment on Home only
========================================================= */
body.home #hh-hero .hh-hero__inner.hh-front-hero {
max-width: 1600px !important;
margin: 0 auto !important;
grid-template-columns: 1fr !important;
}
body.home #hh-hero .hh-front-hero__media {
min-height: clamp(340px, 52vh, 620px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
grid-column: 1 / -1 !important;
}
body.home #hh-hero .hh-hero__title--outside {
position: relative !important;
left: auto !important;
transform: none !important;
margin: 0 auto !important;
width: min(100%, 1100px) !important;
max-width: 1100px !important;
padding-inline: 20px !important;
text-align: center !important;
}
body.home #sec-complexo .hh-stats--row {
display: grid !important;
grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
gap: 20px !important;
justify-content: stretch !important;
align-items: stretch !important;
}
body.home #sec-complexo .hh-stat {
min-width: 0 !important;
text-align: center !important;
}
body.home #sec-complexo .hh-stat__number {
font-size: clamp(34px, 3.1vw, 58px) !important;
line-height: 1.06 !important;
white-space: nowrap !important;
}
body.home #sec-complexo .hh-complexo-layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) !important;
gap: 32px !important;
align-items: start !important;
}
body.home #sec-complexo .hh-complexo-img-wrap {
width: 100% !important;
margin: 0 !important;
justify-self: stretch !important;
}
body.home #sec-complexo .hh-complexo-img-wrap img {
display: block !important;
width: 100% !important;
height: auto !important;
object-fit: cover !important;
object-position: center !important;
margin: 0 !important;
}
body.home #sec-apartamentos .hh-apto-carousel {
position: relative !important;
overflow: hidden !important;
aspect-ratio: 4/3 !important;
min-height: 420px !important;
}
body.home #sec-apartamentos .hh-apto-slides {
position: relative !important;
height: 100% !important;
overflow: hidden !important;
}
body.home #sec-apartamentos .hh-apto-slide {
position: absolute !important;
inset: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
z-index: 0 !important;
transform: none !important;
}
body.home #sec-apartamentos .hh-apto-slide.is-active {
opacity: 1 !important;
visibility: visible !important;
z-index: 1 !important;
}
body.home #sec-apartamentos .hh-apto-slide img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
opacity: 1 !important;
}
body.home #sec-apartamentos .hh-apto-slide::before,
body.home #sec-apartamentos .hh-gallery-enhanced .hh-apto-slide.hh-img-loading::before {
display: none !important;
}
@media (max-width: 1024px) {
body.home #sec-complexo .hh-stats--row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.home #sec-complexo .hh-complexo-layout {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 640px) {
body.home #sec-complexo .hh-stats--row {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
body.home #sec-apartamentos .hh-apto-carousel {
min-height: 300px !important;
}
}
/* Hero block-mode hard lock: centers title when WP block wrapper is present */
body.home #hh-hero .hh-front-hero__container {
width: 100% !important;
max-width: 1240px !important;
margin: 0 auto !important;
padding-inline: clamp(14px, 3vw, 32px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
body.home #hh-hero .hh-front-hero__container .hh-hero__title,
body.home #hh-hero .hh-front-hero__container .hh-hero__title--outside {
width: min(100%, 980px) !important;
max-width: 980px !important;
margin: 0 auto !important;
text-align: center !important;
line-height: 1.04 !important;
letter-spacing: clamp(0.2rem, 1vw, 0.9rem) !important;
}
/* Gutenberg image block: full width only inside Home hero */
body.home #hh-hero figure.wp-block-image.size-full,
body.home #hh-hero .wp-block-image.size-full {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
}
body.home #hh-hero figure.wp-block-image.size-full img,
body.home #hh-hero .wp-block-image.size-full img {
width: 100%;
max-width: none;
height: clamp(280px, 52vh, 760px);
object-fit: cover;
object-position: center;
}
@media (max-width: 768px) {
body.home #hh-hero figure.wp-block-image.size-full img,
body.home #hh-hero .wp-block-image.size-full img {
height: clamp(220px, 38vh, 460px);
}
}
/* =========================================================
GLOBAL MOBILE SAFETY LAYER
Hard override to keep all templates usable on phones
========================================================= */
@media (max-width: 768px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
#main-content,
.hh-page,
.hh-page-shell {
max-width: 100%;
overflow-x: clip;
}
.container,
.hh-container {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.hh-hero--split .hh-hero__inner,
.hh-hero--split .hh-hero__inner.hh-front-hero,
.hh-hero--split .hh-hero__inner.hh-press-split,
.hh-apto-layout,
.hh-apto-panel__inner,
.hh-split,
.hh-two-col,
.hh-contact-split,
.hh-contact-inner,
.hh-complexo-layout,
.hh-destinos-cats-grid,
.hh-ec-grid,
.hh-gramado-map-wrap,
.hh-blog-layout {
grid-template-columns: 1fr !important;
}
.hh-front-hero__media,
.hh-press-split__media {
width: 100% !important;
min-height: 260px;
}
.hh-apto-tabs,
.hh-tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.hh-apto-tab,
.hh-apto-tab__btn,
.hh-tab,
.hh-tabs button {
flex: 0 0 auto;
white-space: nowrap;
}
body {
padding-bottom: calc(78px + env(safe-area-inset-bottom));
}
.hh-sticky-cta {
left: 8px;
right: 8px;
bottom: calc(8px + env(safe-area-inset-bottom));
border-radius: 10px;
padding: .7rem .9rem;
}
.hh-whatsapp-float {
right: 10px;
bottom: calc(88px + env(safe-area-inset-bottom));
}
}
@media (max-width: 480px) {
.hh-section {
padding-left: 0;
padding-right: 0;
}
.hh-number-item,
.hh-stat,
.hh-benefit-item {
min-width: 0;
}
}
/* =========================================================
MOBILE REFINEMENT PASS 2
Improves readability and spacing on small screens
========================================================= */
@media (max-width: 768px) {
.hh-header__inner {
min-height: 72px;
gap: .5rem;
}
.hh-header__brand img,
.hh-header__logo-link .hh-header__logo {
height: 54px;
max-height: 54px;
width: auto;
}
#site-navigation.is-open {
width: 100vw;
max-width: 100vw;
left: 0;
right: 0;
border-radius: 0;
}
.hh-section {
padding-top: 44px;
padding-bottom: 44px;
padding-left: 0;
padding-right: 0;
}
.hh-apto-panel__inner {
min-height: 0;
}
.hh-apto-panel__media {
min-height: 230px;
height: auto;
}
.hh-apto-panel__text {
padding: 24px 18px !important;
}
.hh-apto-panel__title,
.hh-apto-info h3 {
font-size: clamp(1.65rem, 7.8vw, 2.15rem);
letter-spacing: .06em;
line-height: 1.1;
}
.hh-apto-desc,
.hh-apto-features li {
font-size: .98rem;
line-height: 1.58;
}
.hh-apto-tab,
.hh-apto-tab__btn {
font-size: .76rem;
letter-spacing: .08em;
padding: 11px 14px;
}
}
@media (max-width: 768px) {
#main-content,
.hh-page,
.hh-page-shell,
.container,
.hh-container,
.hh-section,
#masthead,
.hh-header,
.hh-header__inner {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
@media (max-width: 480px) {
.hh-header__brand img,
.hh-header__logo-link .hh-header__logo {
height: 66px;
max-height: 66px;
}
.hh-apto-panel__media {
min-height: 210px;
}
.hh-apto-panel__text {
padding: 20px 14px !important;
}
.hh-apto-panel__title,
.hh-apto-info h3 {
font-size: clamp(1.45rem, 8.8vw, 1.95rem);
}
.hh-apto-panel__ctas {
flex-direction: column;
gap: 10px;
}
.hh-apto-panel__ctas .hh-btn {
width: 100%;
max-width: 100%;
}
.hh-sticky-cta {
padding: .62rem .8rem;
}
}
@media (max-width: 768px) {
.hh-press-logos,
.hh-press-logos-grid,
.hh-press-grid {
grid-template-columns: 1fr !important;
}
.hh-press-card {
min-height: auto;
padding: 22px 18px;
border-radius: 14px;
}
.hh-press-card h3 {
font-size: clamp(1.55rem, 7vw, 2rem);
line-height: 1.15;
letter-spacing: .04em;
margin-bottom: .7rem;
}
.hh-press-card p {
font-size: 1rem;
line-height: 1.55;
}
.hh-press-card__tag {
font-size: .68rem;
letter-spacing: .18em;
}
}
@media (max-width: 768px) {
.hh-page--imprensa .hh-container {
padding-left: 12px !important;
padding-right: 12px !important;
}
.hh-page--imprensa .hh-press-grid {
grid-template-columns: 1fr !important;
gap: 14px;
}
.hh-page--imprensa .hh-press-card {
width: 100%;
max-width: 520px;
margin-left: auto;
margin-right: auto;
padding: 20px 16px;
border-radius: 12px;
min-height: 0;
}
.hh-page--imprensa .hh-press-card h3 {
font-size: clamp(1.35rem, 7.2vw, 1.85rem);
line-height: 1.16;
word-break: break-word;
margin-bottom: .6rem;
}
.hh-page--imprensa .hh-press-card p {
font-size: .98rem;
line-height: 1.58;
}
.hh-page--imprensa .hh-press-note,
.hh-page--imprensa .hh-press-contact,
.hh-page--imprensa .hh-press-section-head,
.hh-page--imprensa .hh-press-hero__panel,
.hh-page--imprensa .hh-press-hero__copy {
padding: 18px 14px;
}
}
@media (max-width: 480px) {
.hh-page--imprensa .hh-container {
padding-left: 10px !important;
padding-right: 10px !important;
}
.hh-page--imprensa .hh-press-card {
max-width: none;
padding: 18px 14px;
}
.hh-page--imprensa .hh-press-card h3 {
font-size: clamp(1.25rem, 8.2vw, 1.6rem);
}
.hh-page--imprensa .hh-press-card__tag {
font-size: .62rem;
letter-spacing: .14em;
}
/* ──────────────────────────────────────────────────────────────── */
/* PAGE-SPECIFIC MOBILE RULES: DESTINOS, APARTAMENTOS, COMPLEXO, etc */
/* ──────────────────────────────────────────────────────────────── */
/* .hh-page--destinos */
.hh-page--destinos .hh-destinos-cats-grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
.hh-page--destinos .hh-ec-grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
.hh-page--destinos .hh-ec-card {
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.hh-page--destinos h3,
.hh-page--destinos h2 {
font-size: clamp(1.35rem, 6.8vw, 1.8rem);
line-height: 1.15;
}
/* .hh-page--apartamentos */
.hh-page--apartamentos .hh-apto-perks__grid {
grid-template-columns: 1fr !important;
}
.hh-page--apartamentos .hh-apto-panel__inner {
grid-template-columns: 1fr !important;
height: auto !important;
}
.hh-page--apartamentos h3 {
font-size: clamp(1.35rem, 7vw, 1.8rem);
line-height: 1.15;
}
/* .hh-page--complexo */
.hh-page--complexo .hh-complexo-layout {
grid-template-columns: 1fr !important;
}
.hh-page--complexo .hh-stats--row {
grid-template-columns: 1fr !important;
gap: 16px;
}
.hh-page--complexo h3,
.hh-page--complexo h2 {
font-size: clamp(1.35rem, 7vw, 1.8rem);
line-height: 1.15;
}
/* .hh-page--contato */
.hh-page--contato .hh-contact-split {
grid-template-columns: 1fr !important;
gap: 32px;
}
.hh-page--contato .hh-contact-inner {
grid-template-columns: 1fr !important;
}
.hh-page--contato h3 {
font-size: clamp(1.35rem, 7vw, 1.8rem);
line-height: 1.15;
}
/* .hh-page--galeria */
.hh-page--galeria .hh-gallery-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px;
}
.hh-page--galeria h3 {
font-size: clamp(1.2rem, 6.5vw, 1.6rem);
line-height: 1.15;
}
/* .hh-page--gramado */
.hh-page--gramado .hh-Gramado-cards,
.hh-page--gramado .hh-Seasons,
.hh-page--gramado .hh-Gramado-eventos {
grid-template-columns: 1fr !important;
gap: 16px;
}
.hh-page--gramado .hh-Gramado-card {
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.hh-page--gramado h3,
.hh-page--gramado h2 {
font-size: clamp(1.35rem, 7vw, 1.8rem);
line-height: 1.15;
}
/* .hh-page--historia */
.hh-page--historia .hh-historia-split,
.hh-page--historia .hh-Historia-split {
grid-template-columns: 1fr !important;
gap: 24px;
}
.hh-page--historia h3,
.hh-page--historia h2 {
font-size: clamp(1.35rem, 7vw, 1.8rem);
line-height: 1.15;
}
/* .hh-page--guia-admin */
.hh-page--guia-admin .hh-guide-grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
.hh-page--guia-admin .hh-guide-card {
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.hh-page--guia-admin h3,
.hh-page--guia-admin h2 {
font-size: clamp(1.35rem, 7vw, 1.8rem);
line-height: 1.15;
}
/* .hh-page--experiencias */
.hh-page--experiencias .hh-exp-grid,
.hh-page--experiencias .hh-exp-split {
grid-template-columns: 1fr !important;
}
.hh-page--experiencias .hh-exp-card {
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.hh-page--experiencias h3,
.hh-page--experiencias h2 {
font-size: clamp(1.35rem, 7vw, 1.8rem);
line-height: 1.15;
}
/* .hh-page--obra */
.hh-page--obra .hh-obra-gallery {
grid-template-columns: 1fr !important;
gap: 12px;
}
.hh-page--obra .hh-obra-card {
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.hh-page--obra h3,
.hh-page--obra h2 {
font-size: clamp(1.35rem, 7vw, 1.8rem);
line-height: 1.15;
}
}
@media (max-width: 768px) {
/* Restore horizontal breathing room for blog layouts/text on small screens. */
body.blog .hh-blog-layout,
body.archive .hh-blog-layout,
body.single-post .hh-blog-layout,
body.page .hh-single__content,
body.single-post .hh-single__content {
padding-left: clamp(14px, 4.5vw, 22px) !important;
padding-right: clamp(14px, 4.5vw, 22px) !important;
}
body.single-post .hh-post-nav,
body.single-post .hh-post-tags,
body.single-post .hh-pagination,
body.single-post .hh-single__content > .wp-block-group,
body.single-post .hh-single__content > .wp-block-columns {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Keep language switcher accessible without covering sticky CTA actions. */
#gt_float_wrapper {
left: auto !important;
right: 12px !important;
top: auto !important;
bottom: calc(76px + env(safe-area-inset-bottom)) !important;
z-index: 760 !important;
}
#gt_float_wrapper .gt_float_switcher {
transform: scale(0.94);
transform-origin: right bottom;
}
/* Blog post blocks: ensure readable side gutters in mobile. */
body.single-post .hh-single__content > :where(p, ul, ol, h2, h3, h4, h5, h6, blockquote, pre, table, figure, .wp-block-group, .wp-block-columns, .wp-block-media-text):not(.alignfull) {
padding-left: clamp(14px, 4.5vw, 22px) !important;
padding-right: clamp(14px, 4.5vw, 22px) !important;
box-sizing: border-box;
}
/* Experiencias: text blocks were touching screen edges on mobile. */
.hh-page--experiencias .hh-exp-split__text,
.hh-page--experiencias .hh-hero__content,
.hh-page--experiencias .hh-lead {
padding-left: clamp(14px, 4.5vw, 22px) !important;
padding-right: clamp(14px, 4.5vw, 22px) !important;
box-sizing: border-box;
}
/* Apartamentos: keep outside hero title away from screen edges. */
.hh-page--apartamentos .hh-hero__title--outside {
width: 100%;
font-size: 2rem;
padding-left: clamp(16px, 5vw, 24px) !important;
padding-right: clamp(16px, 5vw, 24px) !important;
box-sizing: border-box;
}
}
/* =========================================================
CHECKLIST FIXES — 2026-06
========================================================= */
/* Blog/Search: improve legibility without changing template structure. */
.hh-blog-hero::before {
background: linear-gradient(180deg, rgba(11, 11, 11, 0.44) 0%, rgba(11, 11, 11, 0.72) 100%);
}
.hh-blog-hero.hh-blog-hero--search::before {
background: linear-gradient(180deg, rgba(8, 8, 8, 0.62) 0%, rgba(8, 8, 8, 0.84) 100%);
}
/* Experiencias: normalize left spacing on split text blocks. */
.hh-exp-split--reverse .hh-exp-split__text {
margin-left: 0;
margin-right: clamp(12px, 2.2vw, 28px);
}
.hh-page--experiencias .hh-exp-split__text {
padding-left: clamp(12px, 2vw, 24px);
padding-right: clamp(12px, 2vw, 24px);
}
/* Apartamentos: add breathing room to hero heading. */
.hh-page--apartamentos .hh-hero__title--outside {
margin-top: clamp(16px, 3.2vw, 36px);
}
/* Galeria: keeps desktop intact and applies one image per row only on mobile. */
@media (max-width: 768px) {
.hh-page--galeria .hh-gallery-grid,
.page-template-page-galeria .hh-gallery-grid,
.page-template-page-galeria-php .hh-gallery-grid {
grid-template-columns: 1fr !important;
grid-auto-flow: row !important;
}
.hh-page--galeria .hh-gallery-grid .hh-gal-item,
.page-template-page-galeria .hh-gallery-grid .hh-gal-item,
.page-template-page-galeria-php .hh-gallery-grid .hh-gal-item {
grid-column: auto !important;
grid-row: auto !important;
}
}
/* Contato: icon buttons with tighter spacing and consistent icon sizing. */
.hh-contact-social__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
}
.hh-contact-social__icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hh-contact-social__icon svg {
width: 16px;
height: 16px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.hh-contact-social__icon img {
width: 16px;
height: 16px;
display: block;
object-fit: contain;
}
.hh-page--contato .hh-contact-inline {
margin-top: 24px;
padding-top: 20px;
}
/* Gramado: ensure accent text follows gold standard. */
.hh-page--gramado .hh-section-title span,
.hh-page--gramado .hh-hero__title span {
color: var(--hh-gold, #d6b55d) !important;
}
.hh-complexo-layout--no-image {
grid-template-columns: 1fr !important;
}
/* =========================================================
GALERIAS — PADRAO GLOBAL DE RESPONSIVIDADE
Desktop: varias colunas | Mobile: uma imagem por linha
========================================================= */
@media (min-width: 769px) {
#galeria [data-gallery-slug] > .hhgm-shortcode-gallery__item {
width: calc((100% - 2rem) / 3) !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.hh-gallery-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.hh-obra-gallery {
grid-template-columns: repeat(2, 1fr) !important;
}
#galeria [data-gallery-slug] > .hhgm-shortcode-gallery__item {
width: calc((100% - 1rem) / 2) !important;
}
}
@media (max-width: 768px) {
.hh-gallery-grid {
grid-template-columns: 1fr !important;
grid-auto-flow: row !important;
}
.hh-gallery-grid .hh-gal-item,
.hh-gallery-grid .hh-gallery-item,
.hh-gallery-grid .hh-gal-item--wide,
.hh-gallery-grid .hh-gal-item--tall {
grid-column: auto !important;
grid-row: auto !important;
}
.hh-obra-gallery {
grid-template-columns: 1fr !important;
}
#galeria [data-gallery-slug] > .hhgm-shortcode-gallery__item {
width: 100% !important;
}
}
.hh-complexo-layout--no-image {
grid-template-columns: 1fr !important;
}