.hpv-hero { position: relative; display: flex; width: 100%; min-height: clamp(430px, 58vw, 690px); flex-direction: column; justify-content: flex-end; margin-top: -72px; overflow: hidden; background: var(--wp--preset--color--grupo-mar-800); color: var(--wp--preset--color--branco); }
.hpv-main--page:has(.hpv-hero), .hpv-main--single:has(.hpv-hero), .hpv-main--post:has(.hpv-hero), .hpv-main--room:has(.hpv-hero) { padding-top: 0; }
/* Os resets das páginas zeram margin-block dos filhos. A sobreposição precisa
   vencer esses resets para o gradiente do header cair sobre a foto. */
.wp-site-blocks .hpv-main .wp-block-post-content > .hpv-hero { margin-top: -72px; }
@media (max-width: 1023px) { .wp-site-blocks .hpv-main .wp-block-post-content > .hpv-hero { margin-top: -64px; } }
.hpv-hero__media, .hpv-hero__shade { position: absolute; inset: 0; }
.hpv-hero__media { background: var(--hpv-hero-image) center / cover no-repeat; transform-origin: center; animation: hpv-mare 14s ease-in-out infinite alternate; }
.hpv-hero__shade { pointer-events: none; }
.hpv-hero__shade::before, .hpv-hero__shade::after { position: absolute; inset: 0; content: ""; }
.hpv-hero__shade::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 32%, transparent), transparent 30%); }
.hpv-hero__shade::after { background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 86%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 74%, transparent) 34%, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 38%, transparent) 58%, transparent 76%); }
.hpv-hero__content { position: relative; z-index: 1; width: min(100%, 1280px); margin-inline: auto; padding: 9rem 16px 4rem; }
.hpv-hero .hpv-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; color: var(--wp--preset--color--branco); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; }
.hpv-hero__mark { width: 2.25rem; height: 0.625rem; flex: 0 0 auto; }
.hpv-hero h1 { max-width: 40rem; margin: 0; color: var(--wp--preset--color--branco); font-size: 3.375rem; font-weight: 400; line-height: 1.08; }
.hpv-hero__subtitle { max-width: 29.5rem; margin: 1.25rem 0 0; color: var(--wp--preset--color--branco); font-size: 1.0625rem; line-height: 1.6; }
.hpv-hero .hpv-button { margin-top: 2rem; background: var(--wp--preset--color--branco); color: var(--wp--preset--color--grupo-mar-800); }
.hpv-hero .hpv-button:hover { background: var(--wp--preset--color--grupo-mar-100); color: var(--wp--preset--color--grupo-mar-800); }
.hpv-hero--home, .hpv-hero--unit { min-height: 86svh; }
.hpv-hero--internal { min-height: 46svh; }
.hpv-hero--internal h1 { max-width: 46rem; font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 600; }
.hpv-hero--internal .hpv-hero__content { padding-bottom: 3rem; }
.hpv-hero--internal .hpv-hero__subtitle { max-width: 40rem; }
.hpv-hero__badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.hpv-hero__badge { margin: 0; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--wp--preset--color--areia-100); color: var(--wp--preset--color--grupo-mar-800); font-size: 0.75rem; font-weight: 800; line-height: 1.3; }
.hpv-hero--home .hpv-button, .hpv-hero--unit .hpv-button { display: none; }
.hpv-wave { position: relative; z-index: 1; width: 100%; overflow: hidden; margin-bottom: -1px; line-height: 0; }
.hpv-wave--hero { color: var(--wp--preset--color--areia-50); }
.hpv-wave--footer { margin-block: 0; color: var(--wp--preset--color--grupo-mar-950); background: var(--wp--preset--color--areia-50); }
.hpv-wave--to-mar { color: var(--wp--preset--color--grupo-mar-100); background: var(--wp--preset--color--areia-50); }
.hpv-wave--from-mar { color: var(--wp--preset--color--areia-50); background: var(--wp--preset--color--grupo-mar-100); }
.hpv-wave svg { display: block; width: 100%; height: 88px; }
.hpv-wave g { animation: hpv-onda 26s linear infinite; }
@keyframes hpv-onda { from { transform: translateX(0); } to { transform: translateX(-1440px); } }
@keyframes hpv-mare { from { transform: scale(1) translateY(0); } to { transform: scale(1.06) translateY(-1.5%); } }
@media (min-width: 1024px) {
	.hpv-hero__shade::after { background: linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 76%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 66%, transparent) 30%, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 42%, transparent) 50%, transparent 72%); -webkit-mask-image: linear-gradient(to top, black 0%, black 75%, transparent 100%); mask-image: linear-gradient(to top, black 0%, black 75%, transparent 100%); }
	.hpv-hero--home .hpv-button, .hpv-hero--unit .hpv-button { display: inline-flex; }
	.hpv-hero__content { padding: 10rem 24px 6rem; }
}
@media (max-width: 1023px) { .hpv-hero { margin-top: -64px; } .hpv-hero h1 { font-size: 2.75rem; line-height: 1.1; } .hpv-wave svg { height: 64px; } }
@media (max-width: 639px) { .hpv-hero__content { padding: 9rem 16px 4rem; } .hpv-hero .hpv-eyebrow { letter-spacing: 0.16em; } .hpv-hero__mark { width: 2rem; } .hpv-hero h1 { font-size: 2.125rem; } .hpv-hero__subtitle { font-size: 0.9375rem; } .hpv-wave svg { height: 44px; } }
/* Hero interno: o véu é escuro embaixo, onde está o título, e abre no topo.
   O cabeçalho transparente senta nessa faixa clara. O véu da home escurece
   o topo de propósito e, reusado aqui, pintava o menu de chapado em toda
   página interna. */
.hpv-hero--internal .hpv-hero__shade::before { content: none; }
.hpv-hero--internal .hpv-hero__shade::after { background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 92%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 78%, transparent) 50%, color-mix(in srgb, var(--wp--preset--color--grupo-mar-950) 35%, transparent) 100%); -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) { .hpv-wave g, .hpv-hero__media { animation: none; } }