/* =========================================================================
Royalty Viagens — Package Site
Apple-clean: white, generous space, type-driven.
Brand-aligned accents (turquesa) + one orange CTA per page.
========================================================================= */
@import url("colors_and_type.css");
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body {
margin: 0; padding: 0;
font-family: var(--rv-font-body);
font-size: 17px;
line-height: 1.55;
color: var(--rv-fg-strong);
background: #FFFFFF;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* ----- Layout ----- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 28px; }
.container-text { max-width: 680px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 720px) {
.container, .container-narrow, .container-text { padding: 0 22px; }
}
/* =========================================================================
Header
========================================================================= */
.site-header {
position: sticky; top: 0; z-index: 60;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.site-header-inner {
display: flex; align-items: center; justify-content: space-between;
height: 84px;
}
.site-logo img { height: 56px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a {
font-family: var(--rv-font-body);
font-size: 14px; font-weight: 500;
color: var(--rv-fg-strong);
letter-spacing: -0.005em;
transition: color 200ms;
}
.site-nav a:hover { color: var(--rv-turquesa); }
.site-nav a.is-active { color: var(--rv-turquesa); font-weight: 600; }
/* Dropdown nav group (Pacotes Royalty) */
.site-nav-group {
position: relative;
display: inline-flex; align-items: center;
}
.site-nav-trigger {
appearance: none;
background: transparent;
border: 0;
padding: 0;
margin: 0;
font-family: var(--rv-font-body);
font-size: 14px;
font-weight: 500;
color: inherit;
cursor: pointer;
display: inline-flex; align-items: center; gap: 4px;
transition: color 200ms;
white-space: nowrap;
}
.site-nav-trigger svg {
width: 13px; height: 13px;
transition: transform 200ms;
}
.site-nav-trigger:hover { color: var(--rv-turquesa); }
.site-nav-trigger.is-active { color: var(--rv-turquesa); font-weight: 600; }
.site-nav-group.is-open .site-nav-trigger svg,
.site-nav-group:hover .site-nav-trigger svg { transform: rotate(180deg); }
.site-nav-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
min-width: 220px;
background: white;
border-radius: 14px;
border: 1px solid var(--rv-cinza-100);
box-shadow: 0 20px 50px -20px rgba(11,61,90,0.25), 0 6px 16px -10px rgba(11,61,90,0.10);
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 200ms, transform 200ms, visibility 200ms;
z-index: 60;
}
.site-nav-dropdown::before {
content: '';
position: absolute;
top: -8px; left: 0; right: 0; height: 12px;
/* invisible bridge so hover doesn't drop */
}
.site-nav-group:hover .site-nav-dropdown,
.site-nav-group.is-open .site-nav-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.site-nav-dropdown a {
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--rv-cinza-700, var(--rv-cinza-600));
text-decoration: none;
white-space: nowrap;
transition: background 160ms, color 160ms;
}
.site-nav-dropdown a:hover {
background: var(--rv-turquesa-50);
color: var(--rv-turquesa-700);
}
.site-nav-dropdown a.is-active {
background: var(--rv-turquesa-50);
color: var(--rv-turquesa-700);
font-weight: 600;
}
/* Mobile sheet — grouped pacotes */
.site-mobile-group {
display: flex; flex-direction: column;
padding: 8px 0 4px;
border-top: 1px solid var(--rv-cinza-100);
margin-top: 4px;
}
.site-mobile-group-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rv-cinza-500);
padding: 6px 0 4px;
}
.site-mobile-group a {
padding-left: 12px !important;
}
.site-header-cta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 500;
color: var(--rv-azul-profundo);
}
.site-header-cta svg { width: 14px; height: 14px; }
@media (max-width: 820px) {
.site-nav { display: none; }
.site-header-cta { display: none; }
.site-header-mobile-burger {
display: inline-flex; width: 36px; height: 36px;
align-items: center; justify-content: center;
border-radius: 999px;
background: var(--rv-cinza-100);
}
}
@media (min-width: 821px) { .site-header-mobile-burger { display: none; } }
.site-header-mobile-burger svg { width: 18px; height: 18px; stroke: var(--rv-fg-strong); }
/* Mobile sheet (rendered when burger toggled) */
.site-mobile-sheet {
display: none; position: fixed; inset: 84px 0 0 0;
background: white;
z-index: 55;
flex-direction: column; padding: 28px 28px 0;
}
.site-mobile-sheet.is-open { display: flex; }
.site-mobile-sheet a {
font-family: var(--rv-font-display);
font-weight: 600; font-size: 28px;
padding: 22px 0; border-bottom: 1px solid var(--rv-cinza-200);
color: var(--rv-fg-strong);
}
.site-mobile-sheet a.is-active { color: var(--rv-turquesa); }
/* =========================================================================
Buttons (one orange per page max)
========================================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--rv-font-body);
font-weight: 600; font-size: 15px;
padding: 14px 28px;
border-radius: 999px;
border: 0; cursor: pointer;
transition: all 220ms cubic-bezier(.22,.61,.36,1);
letter-spacing: -0.005em;
}
.btn-primary {
background: var(--rv-laranja); color: white;
box-shadow: 0 12px 28px rgba(255,133,44,0.30);
}
.btn-primary:hover { background: var(--rv-laranja-700); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.985); }
.btn-secondary {
background: white; color: var(--rv-azul-profundo);
border: 1.5px solid var(--rv-cinza-300);
}
.btn-secondary:hover { border-color: var(--rv-azul-profundo); background: var(--rv-cinza-50); }
.btn-link {
background: transparent; color: var(--rv-turquesa);
padding: 14px 12px;
}
.btn-link:hover { color: var(--rv-turquesa-700); }
.btn svg { width: 16px; height: 16px; }
.btn-sm { padding: 10px 20px; font-size: 13px; }
.btn-lg { padding: 18px 36px; font-size: 17px; }
.btn-full { width: 100%; }
/* =========================================================================
Footer
========================================================================= */
.site-footer {
margin-top: 120px;
background: var(--rv-cinza-50);
padding: 56px 0 0;
color: var(--rv-cinza-600);
font-size: 14px;
}
.site-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 56px; padding-bottom: 44px;
}
@media (max-width: 820px) {
.site-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
.site-footer-grid { grid-template-columns: 1fr; }
}
.site-footer h4 {
font-family: var(--rv-font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0;
color: var(--rv-fg-strong);
margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer a:hover { color: var(--rv-turquesa); }
/* Contact list with icons (atendimento) */
.site-footer-contact a {
display: inline-flex;
align-items: center;
gap: 10px;
transition: color 200ms, transform 200ms;
}
.site-footer-contact a:hover { transform: translateX(2px); }
.site-footer-contact svg {
width: 16px; height: 16px;
flex-shrink: 0;
color: var(--rv-turquesa);
transition: transform 200ms;
}
.site-footer-contact a:hover svg { transform: scale(1.1); }
.site-footer-logo img { height: 72px; width: auto; margin-bottom: 16px; }
.site-footer-socials {
display: flex; gap: 10px;
margin-top: 16px;
}
.site-footer-socials a {
width: 36px; height: 36px;
display: inline-grid; place-items: center;
border-radius: 999px;
background: white;
border: 1px solid var(--rv-cinza-200);
color: var(--rv-cinza-600);
transition: all 180ms;
}
.site-footer-socials a:hover {
background: var(--rv-turquesa);
border-color: var(--rv-turquesa);
color: white;
transform: translateY(-1px);
}
.site-footer-socials svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.site-footer-bar {
background: linear-gradient(90deg, #058996 0%, #10547A 100%);
color: white; text-align: center;
padding: 18px;
font-family: var(--rv-font-soft);
font-style: italic; font-size: 15px;
}
.site-footer-bar b { font-style: normal; font-weight: 700; letter-spacing: 0.02em; }
/* =========================================================================
Type utilities (Apple-clean)
========================================================================= */
.display {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(40px, 6vw, 88px);
line-height: 1.05;
letter-spacing: -0.015em;
text-wrap: balance;
margin: 0;
}
.headline {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(32px, 4.4vw, 56px);
line-height: 1.05;
letter-spacing: -0.01em;
text-wrap: balance;
margin: 0;
}
.subhead {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.15;
letter-spacing: -0.005em;
margin: 0;
}
.lede {
font-family: var(--rv-font-body);
font-weight: 400;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.45;
color: var(--rv-cinza-600);
text-wrap: pretty;
margin: 0;
}
.eyebrow {
font-family: var(--rv-font-body);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--rv-turquesa);
margin: 0 0 12px;
}
.muted { color: var(--rv-cinza-500); }
/* =========================================================================
Generic section spacing
========================================================================= */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }
.divider { border: 0; border-top: 1px solid var(--rv-cinza-200); margin: 0; }
/* =========================================================================
Hero (used on home + category pages + package pages)
========================================================================= */
.hero-pkg {
position: relative;
height: clamp(520px, 78vh, 760px);
background-size: cover; background-position: center;
color: white; display: flex; align-items: flex-end;
overflow: hidden;
}
.hero-pkg::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,20,25,0) 35%, rgba(15,20,25,0.55) 75%, rgba(15,20,25,0.85) 100%);
}
.hero-pkg-inner { position: relative; padding: 0 0 56px; width: 100%; }
.hero-pkg .eyebrow { color: rgba(255,255,255,0.85); }
.hero-pkg .display { color: white; }
.hero-pkg .meta-row {
margin-top: 20px;
display: flex; flex-wrap: wrap; gap: 24px;
color: rgba(255,255,255,0.9);
font-size: 15px;
font-weight: 500;
}
.hero-pkg .meta-row .meta {
display: inline-flex; align-items: center; gap: 8px;
}
.hero-pkg .meta-row svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }
/* =========================================================================
Lede block
========================================================================= */
.lede-block {
padding: clamp(72px, 10vw, 140px) 0;
text-align: center;
}
.lede-block .lede {
max-width: 720px; margin: 0 auto;
font-size: clamp(22px, 2.6vw, 32px);
line-height: 1.35;
color: var(--rv-fg-strong);
font-weight: 400;
}
/* =========================================================================
Included-items grid (modern blocks with icons)
========================================================================= */
.includes {
background: var(--rv-cinza-50);
}
.includes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 36px);
margin-top: 36px;
}
@media (max-width: 820px) { .includes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .includes-grid { grid-template-columns: 1fr; } }
.include-item {
background: white;
border-radius: 18px;
padding: 26px 24px;
display: flex; flex-direction: column; gap: 12px;
transition: transform 240ms ease, box-shadow 240ms ease;
}
.include-item:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15,20,25,0.06); }
.include-item .ic {
width: 44px; height: 44px; border-radius: 12px;
background: var(--rv-turquesa-50); color: var(--rv-turquesa);
display: grid; place-items: center;
}
.include-item .ic svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.include-item .label {
font-family: var(--rv-font-body);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
color: var(--rv-fg-strong);
}
.include-item .sub {
font-size: 13px;
color: var(--rv-cinza-500);
line-height: 1.45;
}
/* =========================================================================
Hotel block
========================================================================= */
.hotel {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(36px, 5vw, 72px);
align-items: center;
}
@media (max-width: 820px) {
.hotel { grid-template-columns: 1fr; gap: 32px; }
}
.hotel-photo {
aspect-ratio: 5/4;
background-size: cover; background-position: center;
border-radius: 24px;
overflow: hidden;
}
.hotel-body .hotel-name {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.1;
letter-spacing: -0.01em;
margin: 14px 0 16px;
color: var(--rv-fg-strong);
}
.hotel-body p {
margin: 0 0 24px;
font-size: 17px; line-height: 1.55;
color: var(--rv-cinza-600);
max-width: 480px;
}
.hotel-features { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.hotel-features .row {
display: flex; align-items: center; gap: 12px;
font-size: 15px; color: var(--rv-fg-strong);
}
.hotel-features .row svg { width: 18px; height: 18px; stroke: var(--rv-turquesa); stroke-width: 1.8; fill: none; flex-shrink: 0; }
/* =========================================================================
Itinerary
========================================================================= */
.itinerary {
background: var(--rv-cinza-50);
}
.itinerary-list { margin-top: 36px; display: flex; flex-direction: column; }
.itinerary-day {
display: grid; grid-template-columns: 100px 1fr; gap: 32px;
padding: 28px 0;
border-top: 1px solid var(--rv-cinza-200);
}
.itinerary-day:last-child { border-bottom: 1px solid var(--rv-cinza-200); }
.itinerary-day .label {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 20px;
color: var(--rv-turquesa);
letter-spacing: -0.005em;
}
.itinerary-day .title {
font-family: var(--rv-font-body);
font-weight: 600; font-size: 18px;
margin: 0 0 4px;
color: var(--rv-fg-strong);
}
.itinerary-day .desc {
font-size: 15px; line-height: 1.55;
color: var(--rv-cinza-600);
margin: 0;
}
@media (max-width: 600px) {
.itinerary-day { grid-template-columns: 1fr; gap: 6px; }
}
/* =========================================================================
Investment / Pricing
========================================================================= */
.pricing { padding: clamp(48px, 7vw, 96px) 0; }
.pricing-head { text-align: center; margin-bottom: 32px; }
.pricing-head .eyebrow { color: var(--rv-azul-profundo); }
.pricing-head .headline { font-size: clamp(24px, 3vw, 34px); }
.price-card {
background: white;
border: 1px solid var(--rv-cinza-200);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(11,61,90,0.05);
max-width: 980px;
margin: 0 auto;
}
.price-card-head {
background: var(--rv-azul-profundo);
color: white;
padding: 12px 20px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 8px;
}
.price-card-head .title {
font-family: var(--rv-font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
}
.price-card-head .note {
font-size: 11px;
color: rgba(255,255,255,0.75);
letter-spacing: 0;
}
.price-rooms { display: flex; flex-direction: column; }
.price-room {
display: grid;
grid-template-columns: 1.3fr 0.9fr 0.9fr 1fr 1fr;
align-items: stretch;
border-top: 1px solid var(--rv-cinza-100);
background: white;
}
.price-room:first-child { border-top: 0; }
.price-room.is-header {
background: var(--rv-cinza-50);
border-top: 0;
}
.price-cell {
padding: 12px 14px;
display: flex; flex-direction: column; gap: 2px;
justify-content: center;
}
.price-cell.room-name {
background: var(--rv-cinza-50);
border-right: 1px solid var(--rv-cinza-100);
}
.price-cell .room-label {
font-family: var(--rv-font-body);
font-weight: 600; font-size: 13px;
letter-spacing: -0.005em;
color: var(--rv-fg-strong);
}
.price-cell .col-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rv-cinza-500);
}
.price-cell .col-sub {
font-size: 10px;
color: var(--rv-cinza-500);
line-height: 1.35;
font-weight: 500;
}
.price-cell .col-sub b { font-weight: 600; color: var(--rv-laranja); }
.price-cell .price-main {
font-family: var(--rv-font-body);
font-weight: 600; font-size: 15px;
letter-spacing: -0.005em;
color: var(--rv-fg-strong);
}
.price-cell .price-main.is-accent { color: var(--rv-turquesa); }
.price-cell .price-main.is-base { color: var(--rv-azul-profundo); font-weight: 700; }
.price-cell .price-strong {
color: var(--rv-fg-strong);
font-weight: 600;
font-family: var(--rv-font-body);
font-size: 12px;
}
.price-cell .price-detail {
font-size: 11px; color: var(--rv-cinza-600);
line-height: 1.4;
}
.price-cell .price-detail b { color: var(--rv-fg-strong); font-weight: 600; }
@media (max-width: 1080px) {
.price-room { grid-template-columns: 1fr 1fr; }
.price-cell.room-name {
grid-column: span 2;
background: var(--rv-azul-50);
border-right: 0;
border-bottom: 1px solid var(--rv-cinza-100);
padding: 10px 14px;
}
.price-room.is-header { display: none; }
.price-cell { padding: 10px 14px; }
.price-cell::before {
content: attr(data-label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rv-cinza-500);
margin-bottom: 3px;
}
}
@media (max-width: 520px) {
.price-room { grid-template-columns: 1fr; }
.price-cell.room-name { grid-column: span 1; }
}
.pricing-note { margin-top: 14px; font-size: 12px; color: var(--rv-cinza-500); text-align: center; max-width: 980px; margin-left: auto; margin-right: auto; }
/* Foot of the price-card with boleto info */
.price-card-foot {
background: var(--rv-cinza-50);
padding: 10px 20px;
border-top: 1px solid var(--rv-cinza-100);
font-size: 11px;
color: var(--rv-cinza-600);
line-height: 1.45;
}
.price-card-foot p { margin: 0; }
.price-card-foot b { color: var(--rv-fg-strong); font-weight: 600; }
/* =========================================================================
Lead capture / Date picker
========================================================================= */
.cta-section {
padding: clamp(72px, 10vw, 128px) 0;
background: linear-gradient(180deg, #ECF7F8 0%, #FFFFFF 100%);
}
.cta-card {
background: white;
border-radius: 28px;
padding: clamp(36px, 5vw, 64px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(36px, 5vw, 64px);
align-items: center;
box-shadow: 0 24px 56px rgba(11,61,90,0.10);
border: 1px solid var(--rv-cinza-100);
}
@media (max-width: 820px) {
.cta-card { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
}
.cta-card h2 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 16px;
}
.cta-card p { color: var(--rv-cinza-600); font-size: 16px; line-height: 1.55; margin: 0 0 24px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lead-form { display: flex; flex-direction: column; gap: 14px; }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .lead-row { grid-template-columns: 1fr; } }
.lead-field { display: flex; flex-direction: column; gap: 6px; }
.lead-field label {
font-size: 12px; font-weight: 600; color: var(--rv-cinza-600);
letter-spacing: -0.005em;
}
.lead-field input, .lead-field select {
font-family: var(--rv-font-body);
font-size: 15px; font-weight: 500;
padding: 14px 16px;
border-radius: 14px;
border: 1.5px solid var(--rv-cinza-200);
background: white; color: var(--rv-fg-strong);
outline: none;
transition: border-color 200ms, box-shadow 200ms;
}
.lead-field input:focus, .lead-field select:focus {
border-color: var(--rv-turquesa);
box-shadow: 0 0 0 3px rgba(5,137,150,0.15);
}
.lead-field input::placeholder { color: var(--rv-cinza-400); font-weight: 400; }
.lead-field textarea {
font-family: var(--rv-font-body);
font-size: 15px; font-weight: 500;
padding: 14px 16px;
border-radius: 14px;
border: 1.5px solid var(--rv-cinza-200);
background: white; color: var(--rv-fg-strong);
outline: none;
transition: border-color 200ms, box-shadow 200ms;
resize: vertical;
min-height: 80px;
}
.lead-field textarea:focus {
border-color: var(--rv-turquesa);
box-shadow: 0 0 0 3px rgba(5,137,150,0.15);
}
.lead-field textarea::placeholder { color: var(--rv-cinza-400); font-weight: 400; }
.lead-radio-row {
display: flex; gap: 14px;
padding: 4px 0;
}
.lead-radio {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer;
font-size: 14px;
color: var(--rv-fg-strong);
font-weight: 500;
}
.lead-radio input[type="radio"] {
width: 18px; height: 18px;
margin: 0;
accent-color: var(--rv-turquesa);
cursor: pointer;
}
/* Children ages reveal */
.lead-field.is-children-ages[hidden] { display: none; }
.children-ages-list {
display: flex; flex-direction: column;
gap: 8px;
margin: 6px 0 8px;
}
.age-row {
display: grid;
grid-template-columns: 96px 1fr 36px;
gap: 10px;
align-items: center;
}
.age-row .age-label {
font-size: 13px; font-weight: 600;
color: var(--rv-fg-strong);
}
.age-row select {
font-family: var(--rv-font-body);
font-size: 14px; font-weight: 500;
padding: 10px 14px;
border-radius: 12px;
border: 1.5px solid var(--rv-cinza-200);
background: white; color: var(--rv-fg-strong);
outline: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.age-row select:focus {
border-color: var(--rv-turquesa);
box-shadow: 0 0 0 3px rgba(5,137,150,0.15);
}
.age-row .age-remove {
width: 32px; height: 32px;
border: 0; background: var(--rv-cinza-100);
color: var(--rv-cinza-600);
border-radius: 999px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all 180ms;
}
.age-row .age-remove:hover { background: rgba(213,69,69,0.10); color: var(--rv-danger); }
.btn-tiny-add {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--rv-font-body);
font-weight: 600; font-size: 12px;
padding: 8px 14px;
background: white;
color: var(--rv-turquesa);
border: 1.5px dashed var(--rv-cinza-300);
border-radius: 999px;
cursor: pointer;
transition: all 180ms;
}
.btn-tiny-add:hover { border-color: var(--rv-turquesa); background: var(--rv-turquesa-50); }
.btn-tiny-add svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
/* Wizard steps (cadastro-agente.html) */
.wizard-steps {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
position: relative;
}
.wizard-steps .step {
display: flex; flex-direction: column; align-items: center;
gap: 6px;
font-size: 12px; font-weight: 600;
color: var(--rv-cinza-400);
text-align: center;
}
.wizard-steps .step .n {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--rv-cinza-200);
color: var(--rv-cinza-600);
display: grid; place-items: center;
font-family: var(--rv-font-body);
font-weight: 700;
font-size: 13px;
transition: all 240ms;
}
.wizard-steps .step.is-active { color: var(--rv-fg-strong); }
.wizard-steps .step.is-active .n { background: var(--rv-turquesa); color: white; }
.wizard-steps .step.is-current .n { box-shadow: 0 0 0 4px var(--rv-turquesa-100); }
.wizard-pane { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.wizard-pane.is-active { display: flex; flex-direction: column; gap: 16px; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.wizard-nav .btn { padding: 12px 22px; font-size: 14px; }
.form-section-title {
font-family: var(--rv-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rv-turquesa);
margin: 14px 0 -4px;
padding-bottom: 6px;
border-bottom: 1px solid var(--rv-cinza-200);
}
.form-section-title:first-of-type { margin-top: 0; }
.lead-field .req { color: var(--rv-danger); font-weight: 700; }
.lead-field small { color: var(--rv-cinza-500); font-weight: 400; }
.lead-feedback {
margin-top: 8px;
padding: 14px 18px;
background: var(--rv-turquesa-50);
border-radius: 12px;
font-size: 13px;
color: var(--rv-turquesa-700);
display: none;
}
.lead-feedback.is-visible { display: block; }
/* Date / departures (the package may have multiple dates) */
.date-picker { display: flex; flex-direction: column; gap: 10px; }
.date-picker-label {
font-size: 12px; font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rv-fg-soft);
}
.date-options { display: flex; flex-wrap: wrap; gap: 8px; }
.date-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600;
padding: 9px 16px;
border-radius: 999px;
border: 1.5px solid var(--rv-cinza-200);
background: white;
color: var(--rv-fg-strong);
cursor: pointer;
transition: all 180ms;
}
.date-pill:hover { border-color: var(--rv-turquesa); color: var(--rv-turquesa); }
.date-pill.is-selected {
background: var(--rv-azul-profundo); color: white;
border-color: var(--rv-azul-profundo);
}
/* =========================================================================
Final CTA strip
========================================================================= */
.final-cta {
text-align: center;
padding: clamp(72px, 10vw, 120px) 0;
}
.final-cta h2 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 16px;
text-wrap: balance;
}
.final-cta p { font-size: 19px; color: var(--rv-cinza-600); margin: 0 0 32px; max-width: 540px; margin-left: auto; margin-right: auto; }
.final-cta .actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
/* =========================================================================
Home — categories grid
========================================================================= */
.home-hero {
padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 7vw, 88px);
text-align: center;
}
.home-hero-banner {
margin: 0 0 clamp(48px, 7vw, 88px);
border-radius: 24px;
overflow: hidden;
background: #fff;
box-shadow: 0 12px 40px -18px rgba(15,20,25,0.18);
}
.home-hero-banner img {
display: block;
width: 100%;
height: auto;
}
.home-hero .display {
font-size: clamp(48px, 7vw, 96px);
letter-spacing: -0.02em;
}
.home-hero .display em {
font-style: normal; color: var(--rv-turquesa);
}
.home-hero .lede {
margin: 28px auto 0;
max-width: 640px;
}
.cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.2vw, 28px);
padding-bottom: clamp(80px, 10vw, 128px);
}
@media (max-width: 820px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card {
position: relative;
display: block;
border-radius: 24px; overflow: hidden;
aspect-ratio: 4 / 5;
background-size: cover; background-position: center;
transition: transform 320ms ease;
}
.cat-card:hover { transform: translateY(-4px); }
.cat-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(11,30,45,0) 35%,
rgba(11,30,45,0.55) 65%,
rgba(11,30,45,0.92) 100%);
}
.cat-card-body {
position: absolute; left: 28px; right: 28px; bottom: 28px;
color: white;
z-index: 2;
text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.cat-card-eyebrow {
font-size: 12px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.85); margin-bottom: 8px;
}
.cat-card-title {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 6px;
color: white;
}
.cat-card-count {
font-size: 14px;
color: rgba(255,255,255,0.85);
}
.cat-card-arrow {
position: absolute; right: 24px; top: 24px;
width: 44px; height: 44px; border-radius: 999px;
background: rgba(255,255,255,0.92);
color: var(--rv-fg-strong);
display: grid; place-items: center;
transition: transform 320ms;
}
.cat-card:hover .cat-card-arrow { transform: translateX(4px); }
.cat-card-arrow svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
/* =========================================================================
Category page — packages grid
========================================================================= */
.cat-hero {
padding: clamp(80px, 12vw, 144px) 0 clamp(40px, 6vw, 64px);
}
.cat-hero .headline { font-size: clamp(48px, 6vw, 80px); }
.pkg-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 32px);
padding-bottom: clamp(80px, 10vw, 128px);
}
@media (max-width: 980px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pkg-grid { grid-template-columns: 1fr; } }
.pkg-card {
display: flex; flex-direction: column;
border-radius: 20px; overflow: hidden;
background: white;
transition: transform 240ms ease, box-shadow 240ms ease;
}
.pkg-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(15,20,25,0.10); }
.pkg-card-photo {
aspect-ratio: 4/3;
background-size: cover; background-position: center;
position: relative;
}
.pkg-card-tag {
position: absolute; top: 14px; left: 14px;
background: rgba(255,255,255,0.95);
color: var(--rv-turquesa);
font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 5px 11px; border-radius: 999px;
}
.pkg-card-body { padding: 20px 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.pkg-card-region {
font-size: 12px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--rv-cinza-500);
}
.pkg-card-name {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 22px; line-height: 1.15;
letter-spacing: -0.005em;
color: var(--rv-fg-strong);
margin: 0;
}
.pkg-card-foot {
margin-top: 12px;
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px;
}
.pkg-card-price {
font-family: var(--rv-font-display);
font-weight: 600; font-size: 18px;
color: var(--rv-azul-profundo);
}
.pkg-card-price small {
display: block;
font-family: var(--rv-font-body);
font-size: 11px; font-weight: 500;
color: var(--rv-cinza-500);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pkg-card-arrow {
color: var(--rv-turquesa);
font-weight: 600; font-size: 14px;
display: inline-flex; align-items: center; gap: 6px;
}
.pkg-card-arrow svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 240ms; }
.pkg-card:hover .pkg-card-arrow svg { transform: translateX(4px); }
/* =========================================================================
Coming soon (Caldas Novas placeholder)
========================================================================= */
.coming-soon {
padding: clamp(96px, 14vw, 200px) 0;
text-align: center;
background: linear-gradient(180deg, #ECF7F8 0%, #FFFFFF 100%);
min-height: 70vh;
display: flex; align-items: center; justify-content: center;
}
.coming-soon .container-text { width: 100%; }
.coming-soon .display em { font-style: normal; color: var(--rv-turquesa); }
.coming-soon .lede {
margin: 24px auto 32px;
max-width: 560px;
}
/* =========================================================================
Header — extra: full nav with more items, CTA button, sub-nav
========================================================================= */
.site-header-cta-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--rv-font-body);
font-size: 13px; font-weight: 600;
padding: 10px 18px;
border-radius: 999px;
background: var(--rv-azul-profundo); color: white;
letter-spacing: -0.005em;
transition: background 200ms, transform 180ms;
}
.site-header-cta-btn:hover { background: var(--rv-azul-700); transform: translateY(-1px); color: white; }
.site-header-cta-btn svg { width: 14px; height: 14px; }
@media (max-width: 1100px) { .site-header-cta-btn { display: none; } }
.site-nav a { white-space: nowrap; font-size: 13.5px; }
@media (max-width: 1180px) { .site-nav { gap: 22px; } }
@media (max-width: 980px) { .site-nav { display: none; } .site-header-mobile-burger { display: inline-flex !important; } }
@media (min-width: 981px) { .site-header-mobile-burger { display: none !important; } }
.site-mobile-cta {
margin-top: 16px;
background: var(--rv-laranja); color: white !important;
border-radius: 999px;
text-align: center;
font-size: 17px !important; padding: 18px !important;
border-bottom: 0 !important;
}
/* Sub-nav (Caldas sub-pages) */
.site-subnav {
border-top: 1px solid rgba(0,0,0,0.06);
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
.site-subnav-inner {
display: flex; align-items: center; gap: 28px;
height: 52px;
}
.site-subnav-label {
font-family: var(--rv-font-body);
font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--rv-turquesa);
padding-right: 16px;
border-right: 1px solid var(--rv-cinza-200);
}
.site-subnav-links {
display: flex; gap: 24px; flex: 1;
overflow-x: auto;
}
.site-subnav-links::-webkit-scrollbar { display: none; }
.site-subnav-links a {
font-size: 13.5px; font-weight: 500;
color: var(--rv-cinza-600);
white-space: nowrap;
padding: 4px 0;
border-bottom: 2px solid transparent;
}
.site-subnav-links a:hover { color: var(--rv-fg-strong); }
.site-subnav-links a.is-active {
color: var(--rv-fg-strong);
border-bottom-color: var(--rv-turquesa);
font-weight: 600;
}
.site-subnav-cta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600;
padding: 8px 16px;
background: var(--rv-laranja); color: white;
border-radius: 999px;
transition: background 180ms, transform 180ms;
}
.site-subnav-cta:hover { background: var(--rv-laranja-700); color: white; transform: translateY(-1px); }
.site-subnav-cta svg { width: 12px; height: 12px; }
@media (max-width: 720px) {
.site-subnav-label { display: none; }
.site-subnav-inner { gap: 16px; }
}
/* =========================================================================
Highlight cards (used on Caldas overview)
========================================================================= */
.highlights {
background: white;
}
.highlights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 28px);
margin-top: 44px;
}
@media (max-width: 900px) { .highlights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .highlights-grid { grid-template-columns: 1fr; } }
.highlight {
padding: 32px 28px;
border-radius: 22px;
background: var(--rv-cinza-50);
border: 1px solid var(--rv-cinza-100);
display: flex; flex-direction: column; gap: 14px;
transition: transform 220ms ease, box-shadow 220ms ease, background 220ms;
}
.highlight:hover {
transform: translateY(-3px);
box-shadow: 0 18px 38px rgba(11,61,90,0.08);
background: white;
}
.highlight .ic {
width: 52px; height: 52px;
border-radius: 14px;
background: var(--rv-turquesa-50); color: var(--rv-turquesa);
display: grid; place-items: center;
}
.highlight .ic svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.highlight h3 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.005em;
margin: 0;
}
.highlight p {
font-size: 15px; line-height: 1.55;
color: var(--rv-cinza-600);
margin: 0;
}
/* =========================================================================
Calendar of departures
========================================================================= */
.calendar-block {
background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
}
.calendar-shell {
background: white;
border-radius: 28px;
padding: clamp(28px, 4vw, 48px);
box-shadow: 0 24px 56px rgba(11,61,90,0.08);
border: 1px solid var(--rv-cinza-100);
margin-top: 40px;
}
.calendar-head {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 14px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rv-cinza-200);
margin-bottom: 24px;
}
.calendar-title {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(22px, 2.4vw, 28px);
letter-spacing: -0.005em;
margin: 0;
}
.calendar-legend {
display: flex; flex-wrap: wrap; gap: 14px 22px;
font-size: 12px; color: var(--rv-cinza-600);
}
.calendar-legend .dot {
display: inline-flex; align-items: center; gap: 8px;
}
.calendar-legend .dot::before {
content: ''; width: 10px; height: 10px; border-radius: 50%;
background: var(--c, var(--rv-cinza-300));
}
.cal-c-baixa { --c: var(--rv-turquesa-300); }
.cal-c-promo { --c: var(--rv-laranja); }
.cal-c-feriado { --c: var(--rv-azul-profundo); }
.cal-c-criancas { --c: var(--rv-laranja-300); }
.cal-c-natal { --c: #8E5BD9; }
.calendar-months {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1100px) { .calendar-months { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .calendar-months { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .calendar-months { grid-template-columns: 1fr; } }
.cal-month {
border: 1px solid var(--rv-cinza-100);
border-radius: 18px;
padding: 18px 16px 14px;
background: var(--rv-cinza-50);
}
.cal-month-name {
font-family: var(--rv-font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rv-fg-strong);
margin-bottom: 14px;
display: flex; justify-content: space-between; align-items: center;
}
.cal-month-name .yr {
font-weight: 500;
color: var(--rv-cinza-500);
letter-spacing: 0.06em;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.cal-dow {
font-size: 10px;
text-align: center;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--rv-cinza-400);
padding: 4px 0;
}
.cal-day {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
font-family: var(--rv-font-body);
font-size: 12px; font-weight: 500;
color: var(--rv-cinza-500);
display: grid; place-items: center;
background: transparent;
border: 0; padding: 0;
cursor: default;
transition: background 180ms, color 180ms, transform 180ms;
}
.cal-day.is-empty { visibility: hidden; }
.cal-day.is-event {
background: var(--rv-turquesa-50);
color: var(--rv-fg-strong);
font-weight: 600;
cursor: pointer;
}
.cal-day.is-event::after {
content: '';
position: absolute; bottom: 3px;
width: 4px; height: 4px; border-radius: 50%;
background: var(--c, var(--rv-turquesa));
}
.cal-day.is-event:hover {
transform: scale(1.08);
z-index: 2;
}
.cal-day.is-start-baixa, .cal-day.is-baixa { --c: var(--rv-turquesa-300); background: rgba(79,183,192,0.14); }
.cal-day.is-start-promo, .cal-day.is-promo { --c: var(--rv-laranja); background: rgba(255,133,44,0.14); color: var(--rv-laranja-700); }
.cal-day.is-start-feriado, .cal-day.is-feriado { --c: var(--rv-azul-profundo); background: rgba(16,84,122,0.14); }
.cal-day.is-start-criancas, .cal-day.is-criancas { --c: var(--rv-laranja-300); background: rgba(255,176,121,0.20); }
.cal-day.is-start-natal, .cal-day.is-natal { --c: #8E5BD9; background: rgba(142,91,217,0.14); }
.cal-day.is-start { box-shadow: inset 0 0 0 2px var(--c, var(--rv-turquesa)); }
.calendar-foot {
margin-top: 24px;
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
padding-top: 24px;
border-top: 1px solid var(--rv-cinza-200);
font-size: 13px;
color: var(--rv-cinza-600);
}
.calendar-foot strong { color: var(--rv-fg-strong); font-weight: 600; }
.calendar-foot .actions { display: inline-flex; gap: 10px; flex-wrap: wrap; }
/* Selected date popover (inline below grid) */
.calendar-selected {
margin-top: 18px;
padding: 20px 24px;
border-radius: 16px;
background: var(--rv-azul-50);
border: 1px solid var(--rv-azul-100);
display: none;
align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 14px;
}
.calendar-selected.is-visible { display: flex; }
.calendar-selected .info { display: flex; flex-direction: column; gap: 4px; }
.calendar-selected .label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--rv-azul-profundo);
}
.calendar-selected .date {
font-family: var(--rv-font-display);
font-weight: 600; font-size: 20px;
letter-spacing: -0.005em;
color: var(--rv-fg-strong);
}
.calendar-selected .meta {
font-size: 13px; color: var(--rv-cinza-600);
}
/* =========================================================================
Hotel cards (multiple hotels on a page, individually presented)
========================================================================= */
.brand-strip {
background: var(--rv-cinza-50);
}
.brand-strip-head {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
margin-bottom: 36px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rv-cinza-200);
}
.brand-strip-head .left { display: flex; flex-direction: column; gap: 6px; }
.brand-strip-head h2 {
font-size: clamp(28px, 3.6vw, 44px);
}
.brand-strip-head .badge {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 8px 14px;
border-radius: 999px;
background: white;
border: 1px solid var(--rv-cinza-200);
color: var(--rv-cinza-600);
}
.brand-strip-head .badge b { color: var(--rv-fg-strong); }
/* =========================================================================
Tipos de acomodação — WAM / diRoma
========================================================================= */
.acomod-section {
max-width: 1200px;
margin: 0 auto clamp(40px, 5vw, 64px);
padding: clamp(28px, 4vw, 44px);
background: linear-gradient(180deg, var(--rv-cinza-50) 0%, white 100%);
border-radius: 24px;
border: 1px solid var(--rv-cinza-100);
}
.acomod-header {
text-align: center;
margin-bottom: 28px;
}
.acomod-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rv-turquesa-700);
margin: 0 0 6px;
}
.acomod-title {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(22px, 3vw, 32px);
letter-spacing: -0.01em;
color: var(--rv-azul-profundo);
margin: 0;
text-wrap: balance;
}
.acomod-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 980px) { .acomod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .acomod-grid { grid-template-columns: 1fr; } }
.acomod-card {
background: white;
border: 1.5px solid var(--rv-cinza-200);
border-radius: 16px;
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
gap: 12px;
transition: all 200ms;
}
.acomod-card:hover {
transform: translateY(-2px);
border-color: var(--rv-turquesa-200, #B4E1E0);
box-shadow: 0 14px 28px -16px rgba(11, 30, 45, 0.18);
}
.acomod-card.is-highlight {
border-color: var(--rv-turquesa);
background: linear-gradient(135deg, var(--rv-turquesa-50) 0%, white 100%);
box-shadow: 0 10px 24px -16px rgba(5, 137, 150, 0.30);
}
.acomod-icon {
width: 100%;
height: 64px;
display: grid;
place-items: center;
background: var(--rv-cinza-50);
border-radius: 12px;
}
.acomod-card.is-highlight .acomod-icon { background: white; }
.acomod-icon svg {
width: 80px;
height: 38px;
stroke: var(--rv-azul-profundo);
stroke-width: 1.5;
fill: none;
stroke-linejoin: round;
}
.acomod-card.is-highlight .acomod-icon svg { stroke: var(--rv-turquesa-700); }
.acomod-card-body { display: flex; flex-direction: column; gap: 6px; }
.acomod-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.acomod-card-head strong {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.005em;
color: var(--rv-azul-profundo);
}
.acomod-pax {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rv-turquesa-700);
background: var(--rv-turquesa-50);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.acomod-card.is-highlight .acomod-pax {
background: var(--rv-turquesa);
color: white;
}
.acomod-card p {
font-size: 13px;
line-height: 1.55;
color: var(--rv-cinza-700, var(--rv-cinza-600));
margin: 0;
}
.acomod-card p em {
font-style: normal;
font-weight: 600;
color: var(--rv-cinza-600);
}
.acomod-note {
margin-top: 22px;
padding: 14px 18px;
background: var(--rv-turquesa-50);
border: 1px solid var(--rv-turquesa-100);
border-radius: 12px;
font-size: 13.5px;
line-height: 1.6;
color: var(--rv-azul-profundo);
}
.acomod-note strong { color: var(--rv-turquesa-700); }
.hotels-list { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
.hotel-card {
background: white;
border-radius: 26px;
overflow: hidden;
border: 1px solid var(--rv-cinza-100);
box-shadow: 0 12px 32px rgba(11,61,90,0.06);
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: stretch;
}
.hotel-card.is-reverse { grid-template-columns: 1fr 1.1fr; }
.hotel-card.is-reverse .hotel-card-carousel { order: 2; }
.hotel-card.is-reverse .hotel-card-body { order: 1; }
@media (max-width: 900px) {
.hotel-card, .hotel-card.is-reverse { grid-template-columns: 1fr; }
.hotel-card.is-reverse .hotel-card-carousel { order: -1; }
}
.hotel-card-carousel {
position: relative;
background: var(--rv-cinza-100);
min-height: 360px;
overflow: hidden;
}
.hotel-card-photo {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0;
transition: opacity 420ms ease;
}
.hotel-card-photo.is-active { opacity: 1; }
.hotel-card-photo.is-placeholder {
background: repeating-linear-gradient(135deg, var(--rv-turquesa-50) 0 16px, var(--rv-turquesa-100) 16px 32px);
display: grid; place-items: center;
color: var(--rv-turquesa-700);
font-family: var(--rv-font-mono);
font-size: 12px;
letter-spacing: 0.06em;
opacity: 1;
}
.hotel-card-photo.is-placeholder::before {
content: 'IMAGEM · ' attr(data-placeholder);
background: rgba(255,255,255,0.85);
padding: 8px 14px;
border-radius: 999px;
}
.hotel-card-dots {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px;
background: rgba(15,20,25,0.4);
backdrop-filter: blur(8px);
padding: 6px 10px; border-radius: 999px;
z-index: 2;
}
.hotel-card-dots button {
width: 7px; height: 7px; border-radius: 50%;
border: 0; background: rgba(255,255,255,0.45);
cursor: pointer;
padding: 0;
transition: background 180ms, width 180ms;
}
.hotel-card-dots button.is-active { background: white; width: 18px; border-radius: 999px; }
.hotel-card-arrows {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 0 14px;
pointer-events: none;
}
.hotel-card-arrows button {
pointer-events: auto;
width: 40px; height: 40px; border-radius: 999px;
background: rgba(255,255,255,0.9);
border: 0; cursor: pointer;
display: grid; place-items: center;
color: var(--rv-fg-strong);
transition: background 180ms, transform 180ms;
}
.hotel-card-arrows button:hover { background: white; transform: scale(1.05); }
.hotel-card-arrows svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.hotel-card-brand-tag {
position: absolute; top: 18px; left: 18px;
z-index: 2;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--rv-azul-profundo);
padding: 7px 12px;
border-radius: 999px;
}
.hotel-card-body {
padding: clamp(28px, 4vw, 44px);
display: flex; flex-direction: column;
gap: 18px;
justify-content: center;
}
.hotel-card-eyebrow {
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--rv-turquesa);
}
.hotel-card-name {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--rv-fg-strong);
margin: 0;
}
.hotel-card-desc {
font-size: 16px; line-height: 1.55;
color: var(--rv-cinza-600);
margin: 0;
}
.hotel-card-tags {
display: flex; flex-wrap: wrap; gap: 8px;
}
.hotel-tag {
font-size: 12px; font-weight: 600;
padding: 6px 12px;
background: var(--rv-turquesa-50);
color: var(--rv-turquesa-700);
border-radius: 999px;
letter-spacing: -0.005em;
}
.hotel-tag.is-azul { background: var(--rv-azul-50); color: var(--rv-azul-profundo); }
.hotel-tag.is-laranja { background: var(--rv-laranja-50); color: var(--rv-laranja-700); }
.hotel-card-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin: 6px 0 4px;
}
@media (max-width: 480px) { .hotel-card-features { grid-template-columns: 1fr; } }
.hotel-card-features .row {
display: flex; align-items: flex-start; gap: 8px;
font-size: 14px;
color: var(--rv-fg-strong);
line-height: 1.4;
}
.hotel-card-features .row svg {
width: 14px; height: 14px; flex-shrink: 0;
stroke: var(--rv-turquesa); stroke-width: 2.2; fill: none;
margin-top: 4px;
}
.hotel-card-actions {
margin-top: 8px;
display: flex; flex-wrap: wrap; gap: 10px;
}
.hotel-card-actions .btn { padding: 12px 20px; font-size: 14px; }
/* =========================================================================
Parks — similar but use accent color rings
========================================================================= */
.park-card .hotel-card-eyebrow { color: var(--rv-laranja-700); }
.park-card .hotel-tag { background: var(--rv-laranja-50); color: var(--rv-laranja-700); }
.park-card .hotel-card-features .row svg { stroke: var(--rv-laranja); }
/* =========================================================================
Tarifário — full table with filters
========================================================================= */
.tarifario-section { padding: clamp(56px, 8vw, 96px) 0; }
.tarifario-head { margin-bottom: 36px; }
.tarifario-head h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 14px; }
.tarifario-head p.lede { max-width: 720px; }
.tarif-controls {
background: white;
border-radius: 22px;
border: 1px solid var(--rv-cinza-100);
box-shadow: 0 12px 28px rgba(11,61,90,0.06);
padding: 24px;
margin-bottom: 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
align-items: end;
}
@media (max-width: 980px) { .tarif-controls { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tarif-controls { grid-template-columns: 1fr; } }
.tarif-field { display: flex; flex-direction: column; gap: 6px; }
.tarif-field label {
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--rv-cinza-500);
}
.tarif-field select, .tarif-field input {
font-family: var(--rv-font-body);
font-size: 14px; font-weight: 500;
padding: 12px 14px;
border-radius: 12px;
border: 1.5px solid var(--rv-cinza-200);
background: white; color: var(--rv-fg-strong);
outline: none;
appearance: none;
}
.tarif-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.tarif-field input:focus, .tarif-field select:focus {
border-color: var(--rv-turquesa);
box-shadow: 0 0 0 3px rgba(5,137,150,0.15);
}
.tarif-period-tabs {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 18px;
}
.tarif-period-tab {
font-family: var(--rv-font-body);
font-size: 13px; font-weight: 600;
padding: 10px 18px;
border-radius: 999px;
border: 1.5px solid var(--rv-cinza-200);
background: white;
color: var(--rv-cinza-600);
cursor: pointer;
transition: all 180ms;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 7px;
}
.tarif-period-tab .pill-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--c, var(--rv-cinza-400));
}
.tarif-period-tab:hover { border-color: var(--rv-turquesa); color: var(--rv-turquesa); }
.tarif-period-tab.is-active {
background: var(--rv-azul-profundo); color: white;
border-color: var(--rv-azul-profundo);
}
.tarif-period-tab.is-disabled {
opacity: 0.65;
font-style: italic;
}
.tarif-table-wrap {
background: white;
border-radius: 22px;
border: 1px solid var(--rv-cinza-100);
box-shadow: 0 18px 40px rgba(11,61,90,0.08);
overflow: hidden;
}
.tarif-table-head {
background: linear-gradient(90deg, var(--rv-azul-profundo) 0%, #0B3D5A 100%);
color: white;
padding: 24px 28px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
}
.tarif-table-head .title {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.005em;
}
.tarif-table-head .dates {
font-size: 13px;
color: rgba(255,255,255,0.78);
display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.tarif-table-head .dates b { color: white; font-weight: 600; }
.tarif-table-head .promo-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
padding: 6px 12px;
background: var(--rv-laranja); color: white;
border-radius: 999px;
}
.tarif-table {
overflow-x: auto;
}
.tarif-table table {
width: 100%;
border-collapse: collapse;
font-family: var(--rv-font-body);
min-width: 880px;
}
.tarif-table thead th {
background: var(--rv-cinza-50);
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--rv-cinza-600);
padding: 16px 14px;
text-align: left;
border-bottom: 1px solid var(--rv-cinza-200);
white-space: nowrap;
}
.tarif-table thead th .hotel-brand {
display: block;
font-size: 9px; color: var(--rv-cinza-400);
letter-spacing: 0.14em;
margin-bottom: 4px;
font-weight: 600;
}
.tarif-table tbody td {
padding: 16px 14px;
font-size: 14px;
border-bottom: 1px solid var(--rv-cinza-100);
vertical-align: middle;
}
.tarif-table tbody tr:hover td { background: var(--rv-azul-50); }
.tarif-table tbody tr.is-empty td { padding: 36px 14px; text-align: center; color: var(--rv-cinza-500); font-style: italic; }
.tarif-table .col-room {
font-weight: 600;
color: var(--rv-fg-strong);
background: var(--rv-cinza-50);
border-right: 1px solid var(--rv-cinza-200);
white-space: nowrap;
}
.tarif-table .col-room small {
display: block;
font-size: 11px; font-weight: 500;
color: var(--rv-cinza-500);
margin-top: 2px;
letter-spacing: 0;
}
.tarif-table .col-regime {
font-size: 12px; font-weight: 500;
color: var(--rv-cinza-600);
white-space: nowrap;
}
.tarif-table .price-cell {
font-family: var(--rv-font-body);
font-weight: 600;
font-size: 15px;
color: var(--rv-fg-strong);
white-space: nowrap;
letter-spacing: -0.005em;
}
.tarif-table .price-cell.is-empty {
color: var(--rv-cinza-300);
font-style: italic;
font-weight: 400;
}
.tarif-table .price-cell.is-best {
color: var(--rv-laranja-700);
}
.tarif-table .price-cell.is-best::after {
content: '★';
margin-left: 4px;
color: var(--rv-laranja);
}
.tarif-table-foot {
background: var(--rv-cinza-50);
padding: 22px 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
font-size: 13px;
color: var(--rv-cinza-600);
line-height: 1.5;
border-top: 1px solid var(--rv-cinza-200);
}
@media (max-width: 720px) { .tarif-table-foot { grid-template-columns: 1fr; } }
.tarif-table-foot strong { color: var(--rv-fg-strong); font-weight: 600; }
.tarif-table-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tarif-table-foot ul li::before { content: '· '; color: var(--rv-turquesa); }
.tarif-promo-banner {
display: flex; align-items: center; gap: 16px;
padding: 16px 22px;
border-radius: 14px;
background: linear-gradient(90deg, rgba(255,133,44,0.10), rgba(255,176,121,0.05));
border: 1px solid var(--rv-laranja-100);
margin-bottom: 18px;
font-size: 14px;
color: var(--rv-laranja-700);
}
.tarif-promo-banner svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; flex-shrink: 0; }
.tarif-promo-banner b { color: var(--rv-laranja-700); }
/* =========================================================================
Payment options card
========================================================================= */
.payment-plan-toggle {
display: inline-flex;
background: var(--rv-cinza-100);
border-radius: 999px;
padding: 4px;
gap: 4px;
margin: 32px auto 8px;
}
.payment-plan-toggle button {
border: 0; background: transparent;
font-family: var(--rv-font-body);
font-size: 13px; font-weight: 600;
padding: 10px 20px;
border-radius: 999px;
cursor: pointer;
color: var(--rv-cinza-600);
letter-spacing: -0.005em;
transition: background 200ms, color 200ms, box-shadow 200ms;
white-space: nowrap;
}
.payment-plan-toggle button.is-active {
background: white;
color: var(--rv-azul-profundo);
box-shadow: 0 6px 16px rgba(11,61,90,0.08);
}
.payment-plan-toggle button:hover:not(.is-active) { color: var(--rv-fg-strong); }
.payment-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 24px;
}
@media (max-width: 1080px) { .payment-options { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .payment-options { grid-template-columns: 1fr; } }
.pay-opt {
background: white;
border: 1px solid var(--rv-cinza-100);
border-radius: 18px;
padding: 24px;
display: flex; flex-direction: column; gap: 8px;
}
.pay-opt .badge {
display: inline-flex; align-items: center; gap: 6px;
width: max-content;
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
}
.pay-opt.is-vista .badge { background: var(--rv-turquesa-50); color: var(--rv-turquesa-700); }
.pay-opt.is-6x .badge { background: var(--rv-azul-50); color: var(--rv-azul-profundo); }
.pay-opt.is-10x .badge { background: var(--rv-laranja-50); color: var(--rv-laranja-700); }
.pay-opt.is-card .badge { background: var(--rv-azul-50); color: var(--rv-azul-profundo); }
.pay-opt.is-coupon .badge { background: var(--rv-laranja-50); color: var(--rv-laranja-700); }
.pay-opt.is-boleto .badge { background: var(--rv-cinza-100); color: var(--rv-cinza-700); }
.pay-opt .swap { transition: opacity 220ms ease; }
.pay-opt.is-card .big { color: var(--rv-azul-profundo); }
.pay-opt.is-coupon .big { color: var(--rv-laranja-700); }
.pay-opt.is-boleto .big {
font-size: 24px;
color: var(--rv-fg-strong);
letter-spacing: -0.005em;
}
.pay-opt.is-card .entry-row,
.pay-opt.is-coupon .entry-row,
.pay-opt.is-boleto .entry-row {
display: flex; gap: 6px;
font-size: 12px;
color: var(--rv-cinza-500);
margin-top: -4px;
}
.pay-opt.is-card .entry-row b,
.pay-opt.is-coupon .entry-row b,
.pay-opt.is-boleto .entry-row b {
color: var(--rv-fg-strong); font-weight: 600;
}
.pay-opt .big {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.01em;
color: var(--rv-fg-strong);
}
.pay-opt .sub {
font-size: 13px; color: var(--rv-cinza-600); line-height: 1.5;
}
/* =========================================================================
Página Área do Agente
========================================================================= */
.agente-hero {
position: relative;
background: var(--rv-grad-brand);
color: white;
padding: clamp(72px, 11vw, 140px) 0 clamp(88px, 12vw, 160px);
overflow: hidden;
}
.agente-hero::before {
content: '';
position: absolute; right: -120px; top: -60px;
width: 480px; height: 480px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
}
.agente-hero::after {
content: '';
position: absolute; left: -100px; bottom: -200px;
width: 360px; height: 360px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
}
.agente-hero .container { position: relative; z-index: 1; }
.agente-hero .eyebrow { color: rgba(255,255,255,0.85); }
.agente-hero h1 {
color: white;
font-size: clamp(44px, 6vw, 80px);
max-width: 720px;
}
.agente-hero p.lede {
color: rgba(255,255,255,0.88);
max-width: 580px;
margin-top: 20px;
}
.agente-hero .actions {
margin-top: 36px;
display: flex; flex-wrap: wrap; gap: 12px;
}
.agente-hero .actions .btn-outline {
background: transparent;
color: white;
border: 1.5px solid rgba(255,255,255,0.4);
}
.agente-hero .actions .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: white; }
.agente-stack {
margin-top: -80px;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 820px) { .agente-stack { grid-template-columns: 1fr; } }
/* Docs grid — 5 cards (Ficha, Condições, Débito, Menor, Cancelamento) */
.docs-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
@media (max-width: 1280px) { .docs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .docs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .docs-grid { grid-template-columns: 1fr; } }
.docs-grid .agente-card-head .ic { color: white; }
.agente-card {
background: white;
border-radius: 22px;
padding: 28px 28px 24px;
box-shadow: 0 24px 56px rgba(11,61,90,0.10);
border: 1px solid var(--rv-cinza-100);
display: flex; flex-direction: column; gap: 14px;
}
.agente-card.is-feature { background: var(--rv-azul-profundo); color: white; }
.agente-card.is-feature h3 { color: white; }
.agente-card.is-feature p { color: rgba(255,255,255,0.78); }
.agente-card.is-feature .agente-card-head .ic {
background: rgba(255,255,255,0.12); color: white;
}
.agente-card-head { display: flex; align-items: center; gap: 14px; }
.agente-card-head .ic {
width: 44px; height: 44px;
background: var(--rv-turquesa-50); color: var(--rv-turquesa);
border-radius: 12px;
display: grid; place-items: center;
}
.agente-card-head .ic svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.agente-card h3 {
font-family: var(--rv-font-display);
font-weight: 600; font-size: 20px;
letter-spacing: -0.005em;
margin: 0;
color: var(--rv-fg-strong);
}
.agente-card p { font-size: 14.5px; line-height: 1.55; color: var(--rv-cinza-600); margin: 0; }
.agente-card .arrow {
margin-top: auto;
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600;
color: var(--rv-turquesa);
}
.agente-card.is-feature .arrow { color: white; }
.agente-card .arrow svg { width: 14px; height: 14px; transition: transform 200ms; }
.agente-card:hover .arrow svg { transform: translateX(4px); }
.agente-list {
background: var(--rv-cinza-50);
border-radius: 22px;
border: 1px solid var(--rv-cinza-100);
overflow: hidden;
}
.agente-list-head {
padding: 24px 28px;
border-bottom: 1px solid var(--rv-cinza-200);
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
background: white;
}
.agente-list-head .left h3 {
font-family: var(--rv-font-display);
font-weight: 600; font-size: 22px;
letter-spacing: -0.005em;
margin: 0;
}
.agente-list-head .left p {
font-size: 13px; color: var(--rv-cinza-500);
margin-top: 2px;
}
.agente-item {
padding: 22px 28px;
display: grid;
grid-template-columns: 80px 1fr auto;
align-items: center;
gap: 20px;
border-bottom: 1px solid var(--rv-cinza-200);
background: white;
transition: background 180ms;
}
.agente-item:last-child { border-bottom: 0; }
.agente-item:hover { background: var(--rv-cinza-50); }
.agente-item .date {
font-family: var(--rv-font-display);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1;
color: var(--rv-fg-strong);
}
.agente-item .date .d { font-size: 28px; display: block; }
.agente-item .date .m { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rv-cinza-500); font-weight: 600; margin-top: 4px; display: block; }
.agente-item .body .tag {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 8px;
}
.agente-item .body .tag.is-info { background: var(--rv-azul-50); color: var(--rv-azul-profundo); }
.agente-item .body .tag.is-campanha { background: var(--rv-laranja-50); color: var(--rv-laranja-700); }
.agente-item .body .tag.is-comunicado { background: var(--rv-turquesa-50); color: var(--rv-turquesa-700); }
.agente-item .body h4 {
font-family: var(--rv-font-display);
font-weight: 600; font-size: 17px;
letter-spacing: -0.005em;
margin: 0 0 4px;
color: var(--rv-fg-strong);
}
.agente-item .body p {
font-size: 13.5px;
color: var(--rv-cinza-600);
margin: 0;
line-height: 1.5;
}
.agente-item .action {
color: var(--rv-turquesa);
font-size: 13px; font-weight: 600;
display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap;
}
.agente-item .action svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
.agente-item { grid-template-columns: 1fr; gap: 10px; }
.agente-item .date { display: flex; gap: 8px; align-items: baseline; }
.agente-item .date .d { font-size: 18px; }
}
/* Downloads grid */
.downloads-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 28px;
}
@media (max-width: 820px) { .downloads-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .downloads-grid { grid-template-columns: 1fr; } }
.download-item {
background: white;
border: 1px solid var(--rv-cinza-100);
border-radius: 18px;
padding: 22px;
display: flex; gap: 14px;
align-items: flex-start;
transition: all 200ms;
}
.download-item:hover {
border-color: var(--rv-turquesa);
background: var(--rv-turquesa-50);
transform: translateY(-2px);
}
.download-item .ic {
width: 40px; height: 40px;
background: var(--rv-cinza-100);
border-radius: 10px;
display: grid; place-items: center;
flex-shrink: 0;
color: var(--rv-cinza-600);
transition: all 200ms;
}
.download-item:hover .ic { background: white; color: var(--rv-turquesa); }
.download-item .ic svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.download-item .name {
font-family: var(--rv-font-body);
font-weight: 600; font-size: 14px;
color: var(--rv-fg-strong);
margin-bottom: 2px;
}
.download-item .meta {
font-size: 11px; color: var(--rv-cinza-500);
letter-spacing: 0.04em; text-transform: uppercase;
font-weight: 600;
}
/* Login card */
.login-card {
background: white;
border-radius: 24px;
padding: clamp(32px, 5vw, 48px);
box-shadow: 0 24px 56px rgba(11,61,90,0.10);
border: 1px solid var(--rv-cinza-100);
max-width: 520px;
margin: 0 auto;
}
.login-card h2 { margin-bottom: 12px; font-size: clamp(28px, 3vw, 36px); }
.login-card p.lede { font-size: 15px; margin-bottom: 28px; color: var(--rv-cinza-600); }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card .field-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--rv-cinza-600); }
.login-card .field-row a { color: var(--rv-turquesa); font-weight: 600; }
.login-card .preview-note {
margin-top: 24px;
padding: 14px 18px;
background: var(--rv-azul-50);
border-radius: 12px;
font-size: 12px;
color: var(--rv-azul-profundo);
line-height: 1.5;
}
/* =========================================================================
Sextou Royalty page
========================================================================= */
.sextou-hero {
position: relative;
background:
radial-gradient(circle at 80% 20%, rgba(255,133,44,0.35) 0%, transparent 60%),
radial-gradient(circle at 10% 80%, rgba(5,137,150,0.25) 0%, transparent 60%),
linear-gradient(135deg, #0F1419 0%, #10547A 100%);
color: white;
padding: clamp(80px, 12vw, 160px) 0 clamp(96px, 13vw, 180px);
overflow: hidden;
}
.sextou-hero::before {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(45deg,
rgba(255,255,255,0.015) 0px,
rgba(255,255,255,0.015) 2px,
transparent 2px,
transparent 12px);
pointer-events: none;
}
.sextou-hero .container { position: relative; z-index: 1; max-width: 1100px; }
.sextou-hero .badge {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--rv-font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
padding: 10px 18px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
color: white;
backdrop-filter: blur(8px);
margin-bottom: 28px;
}
.sextou-hero .badge::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--rv-laranja);
box-shadow: 0 0 0 4px rgba(255,133,44,0.2);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(255,133,44,0.2); }
50% { box-shadow: 0 0 0 8px rgba(255,133,44,0.05); }
}
.sextou-hero h1 {
color: white;
font-size: clamp(56px, 8vw, 120px);
line-height: 0.92;
letter-spacing: -0.02em;
margin-bottom: 24px;
}
.sextou-hero h1 .amount {
display: inline-flex;
align-items: center;
font-family: var(--rv-font-display);
color: var(--rv-laranja);
font-size: 1em;
letter-spacing: -0.02em;
}
.sextou-hero p.lede {
color: rgba(255,255,255,0.88);
font-size: clamp(18px, 1.8vw, 22px);
max-width: 580px;
line-height: 1.5;
}
.sextou-hero .meta {
margin-top: 32px;
display: flex; flex-wrap: wrap; gap: 28px;
font-size: 13px;
color: rgba(255,255,255,0.7);
}
.sextou-hero .meta span { display: inline-flex; align-items: center; gap: 8px; }
.sextou-hero .meta svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }
/* Bonus tiers */
.bonus-tiers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: -80px;
position: relative; z-index: 2;
}
@media (max-width: 720px) { .bonus-tiers { grid-template-columns: 1fr; } }
.bonus-tier {
background: white;
border-radius: 24px;
padding: 36px;
box-shadow: 0 24px 56px rgba(11,61,90,0.12);
border: 1px solid var(--rv-cinza-100);
position: relative;
overflow: hidden;
}
.bonus-tier.is-30 { background: white; }
.bonus-tier.is-50 {
background: linear-gradient(135deg, var(--rv-laranja) 0%, #FFB079 100%);
color: white;
}
.bonus-tier .ribbon {
position: absolute;
top: 24px; right: 24px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
background: rgba(0,0,0,0.06);
color: var(--rv-cinza-700);
}
.bonus-tier.is-50 .ribbon { background: rgba(255,255,255,0.2); color: white; }
.bonus-tier .label {
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--rv-cinza-500);
margin-bottom: 12px;
}
.bonus-tier.is-50 .label { color: rgba(255,255,255,0.85); }
.bonus-tier .amount {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(48px, 6vw, 72px);
letter-spacing: -0.02em;
color: var(--rv-laranja);
line-height: 1;
margin-bottom: 14px;
}
.bonus-tier.is-50 .amount { color: white; }
.bonus-tier .amount .per {
font-size: 14px;
color: var(--rv-cinza-500);
letter-spacing: 0;
font-family: var(--rv-font-body);
font-weight: 500;
margin-left: 6px;
}
.bonus-tier.is-50 .amount .per { color: rgba(255,255,255,0.85); }
.bonus-tier h3 {
font-family: var(--rv-font-display);
font-weight: 600; font-size: 22px;
letter-spacing: -0.005em;
margin: 0 0 14px;
color: var(--rv-fg-strong);
}
.bonus-tier.is-50 h3 { color: white; }
.bonus-tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bonus-tier li { font-size: 14px; line-height: 1.45; color: var(--rv-cinza-600); display: flex; gap: 8px; align-items: flex-start; }
.bonus-tier li::before {
content: '+'; color: var(--rv-laranja);
font-weight: 700;
flex-shrink: 0;
}
.bonus-tier.is-50 li { color: rgba(255,255,255,0.9); }
.bonus-tier.is-50 li::before { color: white; }
/* Process steps */
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
@media (max-width: 900px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .process-steps { grid-template-columns: 1fr; } }
.step {
position: relative;
padding-top: 12px;
}
.step .n {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 999px;
background: var(--rv-turquesa);
color: white;
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 16px;
margin-bottom: 14px;
}
.step h4 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.005em;
margin: 0 0 6px;
color: var(--rv-fg-strong);
}
.step p {
font-size: 14px; line-height: 1.5;
color: var(--rv-cinza-600);
margin: 0;
}
/* Rules list (do / don't) */
.rules {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 40px;
}
@media (max-width: 720px) { .rules { grid-template-columns: 1fr; } }
.rules-col {
background: white;
border: 1px solid var(--rv-cinza-100);
border-radius: 22px;
padding: 32px;
}
.rules-col h3 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.005em;
margin: 0 0 20px;
display: flex; align-items: center; gap: 10px;
}
.rules-col.is-do h3 { color: var(--rv-success); }
.rules-col.is-dont h3 { color: var(--rv-danger); }
.rules-col h3 svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
.rules-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rules-col li {
font-size: 14px; line-height: 1.5;
color: var(--rv-fg-strong);
display: flex; gap: 10px;
align-items: flex-start;
}
.rules-col.is-do li::before { content: '✓'; color: var(--rv-success); font-weight: 700; flex-shrink: 0; }
.rules-col.is-dont li::before { content: '✗'; color: var(--rv-danger); font-weight: 700; flex-shrink: 0; }
/* Sextou form */
.sextou-form-section {
background: var(--rv-cinza-50);
padding: clamp(72px, 10vw, 128px) 0;
}
.sextou-form {
background: white;
border-radius: 28px;
padding: clamp(36px, 5vw, 56px);
box-shadow: 0 32px 64px rgba(11,61,90,0.10);
border: 1px solid var(--rv-cinza-100);
max-width: 760px;
margin: 40px auto 0;
}
.sextou-form h3 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3.2vw, 40px);
letter-spacing: -0.01em;
margin: 0 0 8px;
text-align: center;
}
.sextou-form .sub {
text-align: center;
color: var(--rv-cinza-500);
font-size: 14px;
margin-bottom: 32px;
}
.sextou-form .grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 540px) { .sextou-form .grid { grid-template-columns: 1fr; } }
.sextou-form .field { display: flex; flex-direction: column; gap: 6px; }
.sextou-form .field.is-full { grid-column: 1 / -1; }
.sextou-form label {
font-size: 12px; font-weight: 700;
letter-spacing: 0.04em;
color: var(--rv-cinza-700);
text-transform: none;
}
.sextou-form input, .sextou-form select {
font-family: var(--rv-font-body);
font-size: 15px; font-weight: 500;
padding: 14px 16px;
border-radius: 14px;
border: 1.5px solid var(--rv-cinza-200);
background: white;
outline: none;
transition: border-color 200ms, box-shadow 200ms;
color: var(--rv-fg-strong);
}
.sextou-form input:focus, .sextou-form select:focus {
border-color: var(--rv-laranja);
box-shadow: 0 0 0 3px rgba(255,133,44,0.15);
}
.sextou-form .actions {
margin-top: 28px;
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.sextou-form .actions .note {
font-size: 12px;
color: var(--rv-cinza-500);
max-width: 320px;
}
.sextou-success {
display: none;
margin-top: 24px;
padding: 22px 26px;
background: var(--rv-turquesa-50);
border: 1px solid var(--rv-turquesa-100);
border-radius: 16px;
display: none;
align-items: center; gap: 14px;
}
.sextou-success.is-visible { display: flex; }
.sextou-success .ic {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--rv-turquesa);
color: white;
display: grid; place-items: center;
flex-shrink: 0;
}
.sextou-success .ic svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sextou-success .body {
font-size: 14px;
color: var(--rv-fg-strong);
line-height: 1.5;
}
.sextou-success .body b { color: var(--rv-turquesa-700); }
/* Sextou form fieldsets + multi-venda */
.sextou-fs {
border: 1px solid var(--rv-cinza-100);
border-radius: 16px;
padding: 18px 22px 22px;
margin: 0 0 18px;
}
.sextou-fs > legend {
font-family: var(--rv-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rv-azul-profundo);
padding: 0 8px;
}
.sextou-fs > legend .count {
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: var(--rv-cinza-500);
margin-left: 6px;
font-size: 12px;
}
.sextou-vendas { display: flex; flex-direction: column; gap: 14px; }
.venda-item {
border: 1px solid var(--rv-cinza-100);
border-radius: 14px;
padding: 14px 16px;
background: var(--rv-cinza-50);
display: flex; flex-direction: column; gap: 10px;
}
.venda-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 2px;
}
.venda-num {
font-family: var(--rv-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rv-laranja-700);
}
.venda-remove {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600;
background: transparent;
border: 0;
color: var(--rv-danger);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: background 180ms;
}
.venda-remove:hover { background: rgba(213,69,69,0.08); }
.venda-remove svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.btn-add-venda {
margin-top: 14px;
width: 100%;
background: white;
border: 1.5px dashed var(--rv-cinza-300);
color: var(--rv-cinza-600);
font-family: var(--rv-font-body);
font-weight: 600;
font-size: 13px;
padding: 12px 18px;
border-radius: 12px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: all 180ms;
}
.btn-add-venda:hover {
border-color: var(--rv-laranja);
color: var(--rv-laranja-700);
background: var(--rv-laranja-50);
}
.btn-add-venda svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
/* =========================================================================
Página Lojas & Consultores
========================================================================= */
.lojas-hero {
padding: clamp(80px, 12vw, 144px) 0 clamp(56px, 8vw, 96px);
background:
radial-gradient(circle at 90% 10%, rgba(5,137,150,0.06) 0%, transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
text-align: center;
}
.lojas-hero h1 {
font-size: clamp(40px, 6vw, 80px);
letter-spacing: -0.02em;
margin-bottom: 24px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.lojas-hero h1 em {
font-style: normal;
color: var(--rv-turquesa);
}
.lojas-hero .lede {
max-width: 640px;
margin: 0 auto;
}
.lojas-stats {
margin-top: 48px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 24px 56px;
}
.lojas-stat { text-align: center; }
.lojas-stat .n {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(36px, 4vw, 56px);
letter-spacing: -0.01em;
color: var(--rv-turquesa);
line-height: 1;
}
.lojas-stat .l {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rv-cinza-500);
margin-top: 8px;
}
/* Lojas grid */
.lojas-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.2vw, 28px);
}
@media (max-width: 980px) { .lojas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lojas-grid { grid-template-columns: 1fr; } }
.loja-card {
background: white;
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--rv-cinza-100);
box-shadow: 0 8px 24px rgba(11,61,90,0.06);
display: flex; flex-direction: column;
transition: transform 240ms ease, box-shadow 240ms ease;
}
.loja-card:hover {
transform: translateY(-3px);
box-shadow: 0 24px 48px rgba(11,61,90,0.12);
}
.loja-card-photo {
aspect-ratio: 5 / 3;
background-color: var(--rv-cinza-100);
background-size: cover;
background-position: center;
position: relative;
}
.loja-card-photo.is-placeholder {
background:
linear-gradient(135deg, var(--rv-turquesa-50) 0%, var(--rv-azul-50) 100%);
display: grid; place-items: center;
color: var(--rv-turquesa);
}
.loja-card-photo.is-placeholder::before {
content: 'FOTO · ' attr(data-placeholder);
background: rgba(255,255,255,0.92);
padding: 8px 14px;
border-radius: 999px;
font-family: var(--rv-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--rv-turquesa-700);
}
.loja-card-tag {
position: absolute; top: 14px; left: 14px;
background: rgba(255,255,255,0.95);
color: var(--rv-turquesa);
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
}
.loja-card-body {
padding: 26px 24px 24px;
display: flex; flex-direction: column; gap: 14px;
flex: 1;
}
.loja-card-name {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 22px;
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--rv-fg-strong);
margin: 0;
}
.loja-card-floor {
font-size: 13px;
font-weight: 600;
color: var(--rv-turquesa);
letter-spacing: -0.005em;
margin-top: -8px;
}
.loja-card-address {
font-size: 14px;
line-height: 1.55;
color: var(--rv-cinza-600);
font-style: normal;
}
.loja-card-address .cep {
display: block;
font-size: 12px;
color: var(--rv-cinza-500);
margin-top: 4px;
letter-spacing: 0.04em;
}
.loja-card-hours {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px;
background: var(--rv-cinza-50);
border-radius: 12px;
font-size: 13px;
color: var(--rv-fg-strong);
line-height: 1.5;
}
.loja-card-hours svg {
width: 16px; height: 16px;
stroke: var(--rv-turquesa); stroke-width: 1.8; fill: none;
flex-shrink: 0; margin-top: 2px;
}
.loja-card-hours b { font-weight: 600; }
.loja-card-actions {
display: flex; gap: 8px;
margin-top: auto;
padding-top: 8px;
}
.loja-card-actions .btn { flex: 1; padding: 10px 14px; font-size: 13px; }
/* Map section */
.map-section {
background: var(--rv-cinza-50);
padding: clamp(72px, 10vw, 128px) 0;
}
.map-shell {
background: white;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 24px 56px rgba(11,61,90,0.10);
border: 1px solid var(--rv-cinza-100);
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 1.5fr;
min-height: 480px;
}
@media (max-width: 900px) { .map-shell { grid-template-columns: 1fr; } }
.map-sidebar {
padding: 28px;
display: flex; flex-direction: column;
border-right: 1px solid var(--rv-cinza-100);
background: white;
overflow: auto;
max-height: 540px;
}
@media (max-width: 900px) {
.map-sidebar { border-right: 0; border-bottom: 1px solid var(--rv-cinza-100); max-height: none; }
}
.map-sidebar h3 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.005em;
margin: 0 0 4px;
}
.map-sidebar p {
font-size: 13px;
color: var(--rv-cinza-500);
margin-bottom: 18px;
}
.map-item {
padding: 14px 16px;
border-radius: 12px;
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 6px;
transition: background 180ms;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.map-item:hover { background: var(--rv-cinza-50); }
.map-item .pin {
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 50%;
flex-shrink: 0;
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 12px;
color: white;
}
.map-item .body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.map-item .name {
font-family: var(--rv-font-body);
font-weight: 600;
font-size: 14px;
color: var(--rv-fg-strong);
letter-spacing: -0.005em;
}
.map-item .addr {
font-size: 12px;
color: var(--rv-cinza-500);
line-height: 1.4;
}
.map-item .ico-arrow {
align-self: center;
color: var(--rv-cinza-400);
flex-shrink: 0;
}
.map-item .ico-arrow svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.map-frame { background: var(--rv-cinza-100); }
.map-frame iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }
/* Consultores */
.equipe-section { padding: clamp(72px, 10vw, 128px) 0; }
.equipe-section .equipe-head {
text-align: center;
max-width: 720px;
margin: 0 auto 56px;
}
.equipe-group {
margin-bottom: clamp(40px, 6vw, 72px);
}
.equipe-group-head {
display: flex; align-items: baseline; justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
padding-bottom: 20px;
margin-bottom: 24px;
border-bottom: 1px solid var(--rv-cinza-200);
}
.equipe-group-head .left { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.equipe-group-head h3 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: -0.005em;
color: var(--rv-fg-strong);
margin: 0;
}
.equipe-group-head .count {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--rv-cinza-500);
}
.consultor-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (max-width: 720px) { .consultor-grid { grid-template-columns: 1fr; } }
.consultor-card {
background: white;
border: 1px solid var(--rv-cinza-100);
border-radius: 18px;
padding: 20px;
display: grid;
grid-template-columns: 64px 1fr;
gap: 18px;
align-items: center;
transition: border-color 180ms, box-shadow 180ms;
}
.consultor-card:hover {
border-color: var(--rv-turquesa-100);
box-shadow: 0 12px 28px rgba(11,61,90,0.06);
}
.consultor-avatar {
width: 64px; height: 64px;
border-radius: 50%;
background-size: cover;
background-position: center;
display: grid; place-items: center;
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 22px;
color: white;
letter-spacing: -0.01em;
flex-shrink: 0;
position: relative;
}
.consultor-avatar.is-c1 { background: linear-gradient(135deg, var(--rv-turquesa), var(--rv-azul-profundo)); }
.consultor-avatar.is-c2 { background: linear-gradient(135deg, var(--rv-azul-profundo), #0B3D5A); }
.consultor-avatar.is-c3 { background: linear-gradient(135deg, var(--rv-laranja), #D86713); }
.consultor-avatar.is-c4 { background: linear-gradient(135deg, var(--rv-turquesa-700), var(--rv-turquesa)); }
.consultor-avatar.is-c5 { background: linear-gradient(135deg, #5C8AAB, var(--rv-azul-profundo)); }
.consultor-avatar.is-c6 { background: linear-gradient(135deg, #FFB079, var(--rv-laranja)); }
.consultor-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.consultor-info {
display: flex; flex-direction: column; gap: 1px;
}
.consultor-info .name {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.005em;
color: var(--rv-fg-strong);
}
.consultor-info .role {
font-size: 12px;
font-weight: 600;
color: var(--rv-turquesa);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: 2px;
}
.consultor-info .hours {
font-size: 12px;
color: var(--rv-cinza-500);
margin-top: 4px;
font-style: normal;
}
.consultor-info .hours::before { content: '🕒 '; opacity: 0.6; }
.consultor-meta {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 4px;
}
.consultor-meta a {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600;
padding: 7px 12px;
border-radius: 999px;
background: var(--rv-cinza-50);
color: var(--rv-fg-strong);
letter-spacing: -0.005em;
transition: background 180ms, color 180ms;
border: 1px solid var(--rv-cinza-100);
}
.consultor-meta a:hover { background: white; color: var(--rv-fg-strong); }
.consultor-meta a.is-mail:hover { color: var(--rv-azul-profundo); border-color: var(--rv-azul-100); }
.consultor-meta a.is-wpp { background: var(--rv-turquesa-50); color: var(--rv-turquesa-700); border-color: var(--rv-turquesa-100); }
.consultor-meta a.is-wpp:hover { background: var(--rv-turquesa); color: white; border-color: var(--rv-turquesa); }
.consultor-meta a.is-loc { background: white; color: var(--rv-cinza-600); }
.consultor-meta a.is-loc::before {
content: '📍';
font-size: 10px;
}
.consultor-meta a svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; }
/* Director card (full-width feature) */
.director-card {
background: linear-gradient(135deg, var(--rv-azul-profundo) 0%, #0B3D5A 100%);
border-radius: 28px;
padding: clamp(28px, 4vw, 48px);
margin-top: clamp(40px, 6vw, 64px);
display: grid;
grid-template-columns: 120px 1fr auto;
gap: clamp(20px, 3vw, 36px);
align-items: center;
color: white;
}
@media (max-width: 720px) {
.director-card { grid-template-columns: 80px 1fr; }
.director-card > .director-cta { grid-column: 1 / -1; }
}
.director-card .consultor-avatar {
width: 120px; height: 120px;
font-size: 36px;
background: rgba(255,255,255,0.12);
}
@media (max-width: 720px) {
.director-card .consultor-avatar { width: 80px; height: 80px; font-size: 28px; }
}
.director-card .info .role {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.director-card .info .name {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3vw, 40px);
letter-spacing: -0.01em;
line-height: 1.05;
margin-top: 6px;
}
.director-card .info .extra {
margin-top: 14px;
display: flex; flex-wrap: wrap; gap: 20px;
font-size: 13px;
color: rgba(255,255,255,0.78);
}
.director-card .info .extra span { display: inline-flex; gap: 6px; align-items: center; }
.director-card .info .extra svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.director-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 22px;
background: white;
color: var(--rv-azul-profundo);
border-radius: 999px;
font-size: 14px; font-weight: 600;
text-decoration: none;
letter-spacing: -0.005em;
transition: transform 200ms, box-shadow 200ms;
}
.director-cta:hover { transform: translateY(-1px); color: var(--rv-azul-profundo); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.director-cta svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
/* =========================================================================
"Imprimir orçamento" floating button + A4 print stylesheet
========================================================================= */
.print-orcamento {
position: fixed;
bottom: clamp(16px, 3vw, 28px);
right: clamp(16px, 3vw, 28px);
z-index: 50;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--rv-font-body);
font-weight: 600; font-size: 14px;
padding: 14px 22px;
border-radius: 999px;
background: var(--rv-azul-profundo);
color: white;
border: 0; cursor: pointer;
box-shadow: 0 12px 28px rgba(11,61,90,0.25);
letter-spacing: -0.005em;
transition: transform 200ms, background 200ms;
}
.print-orcamento:hover { background: var(--rv-azul-700); transform: translateY(-1px); }
.print-orcamento svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }
@media (max-width: 600px) {
.print-orcamento { padding: 12px 18px; font-size: 13px; bottom: 14px; right: 14px; }
.print-orcamento .label-long { display: none; }
}
@media print {
.print-orcamento { display: none; }
}
/* =========================================================================
Página Orçamento
========================================================================= */
.orcamento-hero {
padding: clamp(80px, 12vw, 144px) 0 clamp(48px, 7vw, 80px);
text-align: center;
background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
}
.orcamento-hero h1 {
font-size: clamp(40px, 6vw, 84px);
letter-spacing: -0.02em;
}
.orcamento-hero h1 em {
font-style: normal;
color: var(--rv-turquesa);
}
.orcamento-hero .lede {
max-width: 640px;
margin: 28px auto 0;
}
/* Nordeste promo card */
.nordeste-promo {
padding: clamp(32px, 6vw, 64px) 0;
}
.nordeste-card {
position: relative;
display: grid;
grid-template-columns: 1.1fr 1fr;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 24px 56px rgba(11,61,90,0.12);
min-height: 480px;
background: var(--rv-azul-profundo);
}
@media (max-width: 900px) {
.nordeste-card { grid-template-columns: 1fr; min-height: 0; }
}
.nordeste-photo {
position: relative;
background-size: cover;
background-position: center;
min-height: 320px;
}
.nordeste-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(15,20,25,0) 0%, rgba(15,20,25,0.3) 100%);
}
.nordeste-body {
padding: clamp(36px, 5vw, 64px);
color: white;
display: flex; flex-direction: column;
justify-content: center;
gap: 16px;
background: linear-gradient(135deg, var(--rv-azul-profundo) 0%, #0B3D5A 100%);
}
.nordeste-body h2 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3.6vw, 48px);
letter-spacing: -0.01em;
line-height: 1.05;
margin: 0;
color: white;
}
.nordeste-body h2 em {
font-style: normal;
color: var(--rv-laranja);
}
.nordeste-body p {
color: rgba(255,255,255,0.88);
font-size: 16px;
line-height: 1.55;
margin: 0;
max-width: 480px;
}
.nordeste-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 6px;
}
.nordeste-tags .tag-pill {
display: inline-flex; align-items: center;
font-size: 12px; font-weight: 600;
padding: 7px 14px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
color: white;
border-radius: 999px;
letter-spacing: -0.005em;
}
.nordeste-actions {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 14px;
}
.btn-outline-light {
background: transparent;
color: white;
border: 1.5px solid rgba(255,255,255,0.4);
}
.btn-outline-light:hover {
background: rgba(255,255,255,0.1);
border-color: white;
}
/* Destinos grid */
.orcamento-destinos { padding: clamp(48px, 7vw, 96px) 0; }
.orcamento-destino-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) { .orcamento-destino-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .orcamento-destino-grid { grid-template-columns: 1fr; } }
.orc-dest-card {
position: relative;
display: block;
aspect-ratio: 3/4;
border-radius: 20px;
overflow: hidden;
background-size: cover;
background-position: center;
text-decoration: none;
transition: transform 240ms ease;
}
.orc-dest-card:hover { transform: translateY(-3px); }
.orc-dest-body {
position: absolute;
left: 22px; right: 22px; bottom: 22px;
color: white;
}
.orc-dest-eyebrow {
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.88);
margin-bottom: 6px;
}
.orc-dest-card h3 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.1;
letter-spacing: -0.005em;
margin: 0 0 6px;
color: white;
}
.orc-dest-meta {
font-size: 12px;
color: rgba(255,255,255,0.85);
}
.orc-dest-tag {
position: absolute; top: 18px; left: 18px;
background: var(--rv-laranja);
color: white;
font-size: 10px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
}
/* Formulário de orçamento */
.orcamento-form-section {
padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 128px);
background: var(--rv-cinza-50);
}
.orc-form-card {
background: white;
border-radius: 28px;
padding: clamp(28px, 4vw, 56px);
box-shadow: 0 24px 56px rgba(11,61,90,0.10);
border: 1px solid var(--rv-cinza-100);
}
.orc-form-head {
text-align: center;
max-width: 600px;
margin: 0 auto 36px;
}
.orc-form-head h2 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3.4vw, 44px);
letter-spacing: -0.01em;
margin: 8px 0 14px;
}
.orc-form-head .lede {
font-size: 16px;
color: var(--rv-cinza-600);
}
.orc-form-card .lead-form { display: flex; flex-direction: column; gap: 16px; }
.orc-form-card .lead-row { gap: 14px; }
/* Small helper text under fields */
.lead-help {
font-size: 12px;
color: var(--rv-cinza-500);
margin-top: 4px;
line-height: 1.45;
display: block;
}
/* Parceiros banner */
.parceiros-banner {
padding: 0 0 clamp(32px, 5vw, 56px);
}
.parceiros-card {
background: linear-gradient(135deg, var(--rv-turquesa-50) 0%, var(--rv-azul-50) 100%);
border: 1px solid var(--rv-turquesa-100);
border-radius: 24px;
padding: clamp(28px, 4vw, 48px);
display: grid;
grid-template-columns: 72px 1fr;
gap: 28px;
align-items: flex-start;
}
@media (max-width: 720px) {
.parceiros-card { grid-template-columns: 1fr; gap: 16px; }
}
.parceiros-icon {
width: 72px; height: 72px;
border-radius: 22px;
background: white;
display: grid; place-items: center;
color: var(--rv-turquesa);
box-shadow: 0 8px 20px rgba(5,137,150,0.12);
}
.parceiros-icon svg { width: 32px; height: 32px; stroke-width: 1.7; fill: none; stroke: currentColor; }
.parceiros-body h3 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(22px, 2.6vw, 32px);
letter-spacing: -0.005em;
line-height: 1.15;
margin: 6px 0 12px;
color: var(--rv-fg-strong);
}
.parceiros-body p {
font-size: 15px;
line-height: 1.55;
color: var(--rv-cinza-600);
margin: 0 0 16px;
}
.parceiros-tags {
display: flex; flex-wrap: wrap; gap: 8px;
}
.parceiros-tags span {
font-size: 12px; font-weight: 600;
padding: 7px 14px;
background: white;
color: var(--rv-azul-profundo);
border-radius: 999px;
border: 1px solid var(--rv-turquesa-100);
letter-spacing: -0.005em;
}
/* Promo strip (Google Photos gallery) */
.promo-strip {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 22px;
align-items: center;
background: linear-gradient(135deg, var(--rv-laranja) 0%, #D86713 100%);
border-radius: 22px;
padding: 22px 28px;
color: white;
text-decoration: none;
box-shadow: 0 16px 36px rgba(255,133,44,0.25);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.promo-strip:hover {
transform: translateY(-2px);
box-shadow: 0 22px 44px rgba(255,133,44,0.32);
}
.promo-strip-ic {
width: 64px; height: 64px;
border-radius: 18px;
background: rgba(255,255,255,0.18);
display: grid; place-items: center;
}
.promo-strip-ic svg { width: 28px; height: 28px; stroke: white; fill: none; }
.promo-strip-body .eyebrow {
color: rgba(255,255,255,0.88);
letter-spacing: 0.14em;
font-size: 11px; font-weight: 700;
text-transform: uppercase;
margin: 0 0 4px;
display: block;
}
.promo-strip-body h3 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(20px, 2.4vw, 28px);
letter-spacing: -0.005em;
margin: 0 0 4px;
color: white;
line-height: 1.1;
}
.promo-strip-body p {
font-size: 14px;
color: rgba(255,255,255,0.92);
margin: 0;
line-height: 1.45;
}
.promo-strip-arrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 600;
padding: 12px 20px;
background: white;
color: var(--rv-laranja-700);
border-radius: 999px;
white-space: nowrap;
}
.promo-strip-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
@media (max-width: 720px) {
.promo-strip { grid-template-columns: 56px 1fr; }
.promo-strip-arrow {
grid-column: 1 / -1;
justify-self: start;
}
}
/* =========================================================================
Cruzeiros section (orçamento page)
========================================================================= */
.cruzeiros-section {
background: linear-gradient(180deg, #FFFFFF 0%, var(--rv-cinza-50) 100%);
padding: clamp(48px, 7vw, 96px) 0;
}
.cruzeiros-hero {
position: relative;
display: grid;
grid-template-columns: 1.1fr 1fr;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 24px 56px rgba(11,61,90,0.14);
min-height: 560px;
background: var(--rv-azul-profundo);
}
@media (max-width: 900px) {
.cruzeiros-hero { grid-template-columns: 1fr; min-height: 0; }
}
.cruzeiros-photo {
position: relative;
background-image:
linear-gradient(180deg, rgba(15,20,25,0.15) 0%, rgba(15,20,25,0.55) 100%),
url('https://images.unsplash.com/photo-1548574505-5e239809ee19?w=2400&q=85');
background-size: cover;
background-position: center;
min-height: 320px;
}
.cruzeiros-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(11,61,90,0.2) 0%, rgba(5,137,150,0.35) 100%);
}
.cruzeiros-badge {
position: absolute;
top: 24px; left: 24px;
z-index: 2;
display: inline-flex; align-items: center;
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
padding: 8px 14px;
background: rgba(255,255,255,0.95);
color: var(--rv-azul-profundo);
border-radius: 999px;
backdrop-filter: blur(6px);
}
.cruzeiros-body {
padding: clamp(36px, 5vw, 64px);
color: white;
display: flex; flex-direction: column;
justify-content: center;
gap: 18px;
background: linear-gradient(135deg, var(--rv-azul-profundo) 0%, #0B3D5A 100%);
}
.cruzeiros-body h2 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3.6vw, 48px);
letter-spacing: -0.01em;
line-height: 1.05;
margin: 0;
color: white;
}
.cruzeiros-body h2 em {
font-style: normal;
color: var(--rv-turquesa-300);
}
.cruzeiros-body > p {
color: rgba(255,255,255,0.88);
font-size: 15px;
line-height: 1.55;
margin: 0;
max-width: 520px;
}
/* Companhia logos */
.cruzeiros-brands {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 4px;
}
@media (max-width: 540px) { .cruzeiros-brands { grid-template-columns: 1fr; } }
.cz-brand {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
align-items: center;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
padding: 12px 14px;
border-radius: 14px;
}
.cz-brand-logo {
width: 80px; height: 56px;
border-radius: 10px;
background: white;
display: grid; place-items: center;
padding: 6px 10px;
flex-shrink: 0;
box-shadow: 0 4px 12px -4px rgba(0,0,0,0.20);
}
.cz-brand-logo img {
max-width: 100%;
max-height: 100%;
display: block;
object-fit: contain;
}
.cz-brand-info strong {
display: block;
font-size: 14px;
font-weight: 600;
color: white;
letter-spacing: -0.005em;
}
.cz-brand-info span {
display: block;
font-size: 11px;
color: rgba(255,255,255,0.75);
margin-top: 2px;
line-height: 1.4;
}
.cruzeiros-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 4px;
}
.cruzeiros-tags span {
font-size: 12px; font-weight: 600;
padding: 7px 14px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
color: white;
border-radius: 999px;
letter-spacing: -0.005em;
}
/* Print-only summary block — rendered hidden, shown only when printing */
.print-only {
display: none;
}
@media print {
.print-only { display: block; }
}
/* ============== A4 PRINT LAYOUT (max 2 pages) ============== */
@media print {
@page { size: A4; margin: 14mm 12mm; }
html, body {
background: white !important;
color: #000 !important;
font-size: 10pt;
line-height: 1.4;
}
* { box-shadow: none !important; }
/* Hide everything except print-only block */
body > *:not(.print-only) { display: none !important; }
.print-orcamento { display: none !important; }
/* Headers, footers, nav, forms, CTAs */
.site-header, .site-footer, .site-subnav, .site-mobile-sheet,
.hero-pkg, .cta-section, .final-cta,
form, .cta-card, button { display: none !important; }
}
/* Print-only summary structure */
.po-doc {
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #1a1a1a;
}
.po-header {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
border-bottom: 2px solid #058996;
padding-bottom: 10mm;
margin-bottom: 8mm;
}
.po-header .brand-name {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
font-size: 11pt;
letter-spacing: 0.18em;
color: #058996;
text-transform: uppercase;
}
.po-header .pkg-name {
font-weight: 700;
font-size: 22pt;
line-height: 1.05;
letter-spacing: -0.01em;
color: #0F1419;
margin-top: 4mm;
}
.po-header .pkg-meta {
font-size: 9.5pt;
color: #4B5563;
margin-top: 3mm;
display: flex; gap: 16px; flex-wrap: wrap;
}
.po-header .pkg-meta strong { color: #1a1a1a; }
.po-header .right { text-align: right; }
.po-header .seal {
font-size: 8pt;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #FFFFFF;
background: linear-gradient(90deg, #058996 0%, #10547A 100%);
padding: 5pt 10pt;
border-radius: 999px;
display: inline-block;
}
.po-header .ref {
font-size: 8pt;
color: #6B7280;
margin-top: 3mm;
}
.po-section { margin-bottom: 6mm; page-break-inside: avoid; }
.po-section h2 {
font-size: 10pt;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #058996;
margin: 0 0 3mm;
padding-bottom: 1.5mm;
border-bottom: 1px solid #E3E7EC;
}
.po-section p { font-size: 10pt; line-height: 1.45; margin: 0 0 2mm; color: #1F2937; }
.po-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4mm;
}
.po-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3mm;
}
.po-list {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5mm 4mm;
font-size: 9.5pt;
line-height: 1.4;
}
.po-list li {
position: relative;
padding-left: 4mm;
break-inside: avoid;
}
.po-list li::before {
content: '✓';
position: absolute; left: 0; top: 0;
color: #058996;
font-weight: 700;
}
.po-pricing {
border: 1px solid #E3E7EC;
border-radius: 2mm;
overflow: hidden;
margin-bottom: 3mm;
page-break-inside: avoid;
}
.po-pricing-head {
background: #10547A;
color: white;
padding: 1.5mm 3mm;
font-size: 8.5pt;
font-weight: 600;
letter-spacing: 0.02em;
display: flex; justify-content: space-between; align-items: center;
}
.po-pricing-head small {
font-weight: 400;
font-size: 7pt;
color: rgba(255,255,255,0.78);
letter-spacing: 0;
}
.po-pricing-rows {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
font-size: 8pt;
}
.po-pricing-rows > div {
padding: 1.5mm 3mm;
border-top: 1px solid #E3E7EC;
}
.po-pricing-rows > div:nth-child(-n+5) { background: #F9FAFB; font-weight: 700; font-size: 6.5pt; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280; border-top: 0; }
.po-pricing-rows .room { font-weight: 600; color: #0F1419; }
.po-pricing-rows .price { font-weight: 600; color: #0F1419; }
.po-pricing-rows .price.is-accent { color: #058996; }
.po-pricing-rows .price.is-base { color: #10547A; }
.po-pricing-rows .price small { font-weight: 400; color: #6B7280; font-size: 6.5pt; }
.po-pay {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5mm;
margin-top: 3mm;
}
.po-pay > div {
border: 1px solid #E3E7EC;
border-radius: 3mm;
padding: 3mm;
font-size: 8.5pt;
line-height: 1.4;
}
.po-pay .label {
font-size: 7.5pt;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #058996;
margin-bottom: 1mm;
display: block;
}
.po-pay .big {
font-weight: 700;
font-size: 13pt;
color: #0F1419;
display: block;
margin-bottom: 1mm;
}
.po-itinerary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2mm 5mm;
font-size: 9pt;
line-height: 1.4;
}
.po-itinerary .day {
display: grid; grid-template-columns: 14mm 1fr;
gap: 2mm;
break-inside: avoid;
}
.po-itinerary .day-num {
font-weight: 700;
color: #058996;
font-size: 8.5pt;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.po-itinerary .day-title { font-weight: 700; color: #1a1a1a; }
.po-itinerary .day-desc { color: #4B5563; font-size: 8.5pt; }
.po-hotel {
display: grid;
grid-template-columns: auto 1fr;
gap: 4mm;
padding: 3mm 4mm;
background: #F9FAFB;
border-radius: 3mm;
border: 1px solid #E3E7EC;
font-size: 9.5pt;
align-items: center;
}
.po-hotel .icon {
width: 12mm; height: 12mm;
display: grid; place-items: center;
background: #058996;
border-radius: 50%;
color: white;
font-size: 14pt;
font-weight: 700;
}
.po-hotel .name { font-weight: 700; font-size: 11pt; color: #1a1a1a; }
.po-hotel .info { font-size: 9pt; color: #4B5563; margin-top: 1mm; }
.po-footer {
margin-top: 7mm;
padding-top: 4mm;
border-top: 1px solid #E3E7EC;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4mm;
font-size: 8pt;
color: #4B5563;
line-height: 1.45;
page-break-inside: avoid;
}
.po-footer .contact strong {
display: block;
color: #058996;
font-size: 8.5pt;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1.5mm;
}
.po-footer .stores {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1mm 3mm;
font-size: 7.5pt;
}
.po-footer .stores div b { color: #1a1a1a; font-weight: 700; }
.po-footer .tagline {
text-align: center;
font-style: italic;
margin-top: 3mm;
grid-column: 1 / -1;
padding-top: 2mm;
border-top: 1px solid #E3E7EC;
color: #058996;
font-size: 8.5pt;
}
/* =========================================================================
Itinerary V2 — bullet/icon/info-box pattern (PADRAO-ROTEIRO.md)
========================================================================= */
.itinerary-v2 {
background: var(--rv-cinza-50);
padding: clamp(72px, 10vw, 128px) 0;
}
.itinerary-v2 .container-narrow > .eyebrow,
.itinerary-v2 .container-narrow > .headline {
text-align: center;
}
.itinerary-v2 .container-narrow > .lede {
text-align: center;
max-width: 640px;
margin: 14px auto 0;
}
.itinerary-list-v2 {
margin-top: 48px;
display: flex; flex-direction: column;
gap: 18px;
}
.itin-day {
background: white;
border-radius: 22px;
border: 1px solid var(--rv-cinza-100);
padding: clamp(24px, 3.5vw, 36px);
position: relative;
overflow: hidden;
}
.itin-day::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--rv-turquesa);
}
.itin-day-head {
display: flex; align-items: baseline; gap: 16px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rv-cinza-100);
flex-wrap: wrap;
}
.itin-day-num {
font-family: var(--rv-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: white;
background: var(--rv-turquesa);
padding: 6px 12px;
border-radius: 999px;
flex-shrink: 0;
}
.itin-day-title {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(20px, 2.4vw, 26px);
letter-spacing: -0.005em;
color: var(--rv-fg-strong);
margin: 0;
flex: 1;
min-width: 200px;
line-height: 1.2;
}
.itin-day-sub {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rv-cinza-500);
}
.itin-list {
list-style: none;
margin: 0;
padding: 0;
display: flex; flex-direction: column;
gap: 12px;
}
.itin-list li {
display: grid;
grid-template-columns: 24px 1fr;
gap: 14px;
align-items: flex-start;
font-size: 15px;
line-height: 1.55;
color: var(--rv-fg);
padding-left: 0;
}
.itin-list li b {
font-weight: 600;
color: var(--rv-fg-strong);
}
.itin-list li::before {
content: '';
width: 24px; height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
margin-top: 1px;
opacity: 0.95;
}
/* Icon variants — inline SVGs encoded; stroke uses turquesa */
.itin-list li.itin-bus::before {
background-image: url("data:image/svg+xml;utf8,");
}
.itin-list li.itin-hotel::before {
background-image: url("data:image/svg+xml;utf8,");
}
.itin-list li.itin-cafe::before {
background-image: url("data:image/svg+xml;utf8,");
}
.itin-list li.itin-passeio::before {
background-image: url("data:image/svg+xml;utf8,");
}
.itin-list li.itin-checkin::before {
background-image: url("data:image/svg+xml;utf8,");
}
.itin-list li.itin-checkout::before {
background-image: url("data:image/svg+xml;utf8,");
}
.itin-list li.itin-noite::before {
background-image: url("data:image/svg+xml;utf8,");
}
.itin-list li.itin-comida::before {
background-image: url("data:image/svg+xml;utf8,");
}
.itin-list li.itin-encerra::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Info boxes */
.itin-info {
margin-top: 16px;
padding: 14px 18px;
border-radius: 12px;
font-size: 14px;
line-height: 1.55;
display: flex; align-items: flex-start; gap: 12px;
border: 1px solid;
}
.itin-info::before {
font-size: 16px;
flex-shrink: 0;
line-height: 1.4;
}
.itin-info b { font-weight: 600; }
.itin-info.is-incluso {
background: var(--rv-turquesa-50);
border-color: var(--rv-turquesa-100);
color: var(--rv-turquesa-700);
}
.itin-info.is-incluso::before { content: '✓'; color: var(--rv-turquesa); font-weight: 700; }
.itin-info.is-incluso b { color: var(--rv-turquesa-700); }
.itin-info.is-dica {
background: var(--rv-laranja-50);
border-color: var(--rv-laranja-100);
color: var(--rv-laranja-700);
}
.itin-info.is-dica::before { content: '💡'; }
.itin-info.is-dica b { color: var(--rv-laranja-700); }
.itin-info.is-atencao {
background: rgba(213, 69, 69, 0.06);
border-color: rgba(213, 69, 69, 0.18);
color: var(--rv-cinza-700);
}
.itin-info.is-atencao::before { content: '⚠'; color: var(--rv-danger); }
.itin-info.is-atencao b { color: var(--rv-danger); }
.itin-info.is-nota {
background: var(--rv-azul-50);
border-color: var(--rv-azul-100);
color: var(--rv-azul-700);
}
.itin-info.is-nota::before { content: 'ℹ'; color: var(--rv-azul-profundo); font-weight: 700; }
.itin-info.is-nota b { color: var(--rv-azul-profundo); }
/* Roteiro variant: 5-day diurno (feriado) — laranja accent */
.itin-day.is-variant {
border-style: dashed;
}
.itin-day.is-variant::before { background: var(--rv-laranja); }
.itin-day.is-variant .itin-day-num { background: var(--rv-laranja); }
/* =========================================================================
Pacote Arte — promotional image generator UI (injected on package pages)
========================================================================= */
.pa-section {
padding: clamp(56px, 7vw, 96px) 0;
background: linear-gradient(180deg, var(--rv-cinza-50) 0%, white 100%);
}
.pa-card {
background: white;
border-radius: 28px;
padding: clamp(32px, 4.5vw, 56px);
max-width: 980px;
margin: 0 auto;
box-shadow: 0 30px 60px -30px rgba(11, 30, 45, 0.18);
border: 1px solid var(--rv-cinza-100);
}
.pa-head {
margin-bottom: 32px;
}
.pa-head .eyebrow {
color: var(--rv-turquesa-700);
}
.pa-head h2 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(28px, 3.4vw, 38px);
letter-spacing: -0.02em;
line-height: 1.1;
margin: 8px 0 12px;
color: var(--rv-azul-profundo);
}
.pa-lede {
font-size: 15.5px;
line-height: 1.6;
color: var(--rv-cinza-700, var(--rv-cinza-600));
margin: 0;
max-width: 580px;
}
.pa-form {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
margin-bottom: 24px;
}
@media (max-width: 720px) { .pa-form { grid-template-columns: 1fr; } }
.pa-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.pa-field label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rv-cinza-500);
}
.pa-field input {
padding: 12px 14px;
border: 1.5px solid var(--rv-cinza-200);
border-radius: 12px;
font-family: var(--rv-font-body);
font-size: 15px;
color: var(--rv-azul-profundo);
background: white;
transition: all 180ms;
}
.pa-field input:focus {
outline: 0;
border-color: var(--rv-turquesa);
box-shadow: 0 0 0 4px rgba(5, 137, 150, 0.10);
}
.pa-field input::placeholder { color: var(--rv-cinza-400); }
.pa-buttons {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-bottom: 18px;
}
@media (max-width: 720px) { .pa-buttons { grid-template-columns: 1fr; } }
.pa-btn {
appearance: none;
background: white;
border: 1.5px solid var(--rv-cinza-200);
border-radius: 16px;
padding: 16px 18px;
cursor: pointer;
display: flex;
align-items: center;
gap: 14px;
text-align: left;
transition: all 220ms;
font-family: var(--rv-font-body);
}
.pa-btn:hover:not(:disabled) {
border-color: var(--rv-laranja);
background: linear-gradient(180deg, #FFF7F0 0%, white 100%);
transform: translateY(-2px);
box-shadow: 0 14px 28px -16px rgba(255, 133, 44, 0.40);
}
.pa-btn:disabled { opacity: 0.6; cursor: wait; }
.pa-btn.is-loading {
background: var(--rv-cinza-50);
}
.pa-btn-ic {
flex-shrink: 0;
width: 42px; height: 42px;
border-radius: 11px;
background: linear-gradient(135deg, var(--rv-laranja) 0%, #E66A00 100%);
color: white;
display: grid; place-items: center;
}
.pa-btn-ic svg { width: 20px; height: 20px; }
.pa-btn-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.pa-btn-text strong {
font-size: 15px;
font-weight: 600;
color: var(--rv-azul-profundo);
}
.pa-btn-text small {
font-size: 11.5px;
color: var(--rv-cinza-500);
letter-spacing: 0.02em;
}
.pa-btn-arrow {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--rv-cinza-50);
display: grid; place-items: center;
color: var(--rv-cinza-600);
transition: all 200ms;
}
.pa-btn:hover .pa-btn-arrow {
background: var(--rv-laranja);
color: white;
}
.pa-btn-arrow svg { width: 14px; height: 14px; }
.pa-preview {
margin-top: 22px;
display: grid;
grid-template-columns: auto 1fr;
gap: 22px;
align-items: center;
padding: 18px 22px;
background: var(--rv-turquesa-50);
border: 1px solid var(--rv-turquesa-100);
border-radius: 16px;
}
@media (max-width: 540px) { .pa-preview { grid-template-columns: 1fr; text-align: center; } }
.pa-preview-wrap {
width: 120px;
max-width: 120px;
border-radius: 12px;
overflow: hidden;
background: var(--rv-cinza-100);
box-shadow: 0 8px 24px -10px rgba(11, 30, 45, 0.30);
}
.pa-preview-wrap img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.pa-preview-actions p {
font-size: 14.5px;
line-height: 1.55;
color: var(--rv-azul-profundo);
margin: 0;
}
.pa-preview-actions p strong { color: var(--rv-turquesa-700); }
.pa-preview-actions p small { color: var(--rv-cinza-600); font-size: 13px; }
.pa-preview-actions a {
color: var(--rv-turquesa-700);
font-weight: 600;
text-decoration: underline;
}
.pa-fineprint {
margin: 18px 0 0;
font-size: 12.5px;
color: var(--rv-cinza-500);
line-height: 1.55;
}
/* =========================================================================
Store picker modal — global "Falar com consultor" intercept
========================================================================= */
.rv-sp-overlay {
position: fixed;
inset: 0;
background: rgba(11, 30, 45, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
z-index: 9000;
display: grid;
place-items: center;
padding: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 240ms, visibility 240ms;
}
.rv-sp-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.rv-sp-modal {
background: white;
border-radius: 24px;
width: min(720px, 100%);
max-height: 90vh;
overflow-y: auto;
padding: clamp(28px, 4vw, 44px);
position: relative;
box-shadow: 0 40px 100px -30px rgba(11, 30, 45, 0.50);
transform: translateY(20px) scale(0.96);
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rv-sp-overlay.is-open .rv-sp-modal {
transform: translateY(0) scale(1);
}
.rv-sp-close {
position: absolute;
top: 14px; right: 14px;
appearance: none;
background: var(--rv-cinza-50);
border: 0;
width: 36px; height: 36px;
border-radius: 50%;
cursor: pointer;
display: grid; place-items: center;
color: var(--rv-cinza-600);
transition: all 180ms;
}
.rv-sp-close:hover {
background: var(--rv-cinza-100);
color: var(--rv-azul-profundo);
}
.rv-sp-close svg { width: 18px; height: 18px; }
.rv-sp-head {
text-align: center;
margin-bottom: 24px;
}
.rv-sp-ic {
width: 56px; height: 56px;
margin: 0 auto 14px;
border-radius: 16px;
background: linear-gradient(135deg, var(--rv-turquesa) 0%, var(--rv-azul-profundo) 100%);
display: grid; place-items: center;
color: white;
box-shadow: 0 10px 24px -10px rgba(5, 137, 150, 0.50);
}
.rv-sp-ic svg { width: 28px; height: 28px; }
.rv-sp-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rv-turquesa-700);
margin: 0 0 6px;
}
.rv-sp-modal h3 {
font-family: var(--rv-font-display);
font-weight: 600;
font-size: clamp(22px, 2.6vw, 28px);
letter-spacing: -0.01em;
color: var(--rv-azul-profundo);
margin: 0 0 8px;
line-height: 1.15;
}
.rv-sp-sub {
font-size: 14px;
color: var(--rv-cinza-600);
margin: 0;
line-height: 1.55;
}
.rv-sp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 560px) {
.rv-sp-grid { grid-template-columns: 1fr; }
}
.rv-sp-store {
appearance: none;
background: white;
border: 1.5px solid var(--rv-cinza-200);
border-radius: 16px;
padding: 0;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px 12px 12px;
transition: all 200ms;
position: relative;
overflow: hidden;
}
.rv-sp-store:hover {
border-color: var(--rv-turquesa);
background: var(--rv-turquesa-50);
transform: translateY(-2px);
box-shadow: 0 10px 24px -16px rgba(11, 61, 90, 0.30);
}
.rv-sp-store-photo {
width: 56px; height: 56px;
flex-shrink: 0;
border-radius: 12px;
background-size: cover;
background-position: center;
background-color: var(--rv-cinza-100);
}
.rv-sp-store-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.rv-sp-store-body strong {
font-size: 14px;
color: var(--rv-azul-profundo);
font-weight: 600;
line-height: 1.2;
}
.rv-sp-store-body small {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rv-cinza-500);
}
.rv-sp-store-hours {
font-size: 11px;
color: var(--rv-cinza-500);
margin-top: 2px;
}
.rv-sp-store-arrow {
width: 30px; height: 30px;
flex-shrink: 0;
border-radius: 50%;
background: var(--rv-cinza-50);
display: grid; place-items: center;
color: var(--rv-cinza-600);
transition: all 200ms;
}
.rv-sp-store:hover .rv-sp-store-arrow {
background: var(--rv-turquesa);
color: white;
transform: translateX(2px);
}
.rv-sp-store-arrow svg { width: 14px; height: 14px; }
.rv-sp-foot {
margin: 22px 0 0;
padding-top: 18px;
border-top: 1px solid var(--rv-cinza-100);
text-align: center;
font-size: 13px;
color: var(--rv-cinza-600);
}
.rv-sp-foot a {
color: var(--rv-turquesa-700);
font-weight: 600;
text-decoration: none;
margin-left: 4px;
}
.rv-sp-foot a:hover { text-decoration: underline; }
/* =========================================================================
GLOBAL PRINT SAFETY NET — fixes Safari "blank page" prints
---------------------------------------------------------------
Safari blanks the page when sticky/fixed parents, transforms, or
overflow:hidden ancestors interfere with the print viewport. This
block resets those defensively for all document pages.
========================================================================= */
@media print {
html, body {
background: white !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
overflow: visible !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Reset everything that breaks Safari print */
.site-header,
.site-footer,
.rv-sp-overlay,
.pa-section,
.doc-actions-bar,
.doc-page-intro,
.ma-toc,
.bus-hero,
.bus-final {
display: none !important;
}
/* Common containers — drop sticky/transform/vh and let content flow */
.section,
.doc-wrap,
.container,
.container-narrow,
.container-text {
position: static !important;
transform: none !important;
overflow: visible !important;
min-height: 0 !important;
max-height: none !important;
background: transparent !important;
}
/* Form card baseline (each page may further refine) */
.orc-form-card {
position: static !important;
transform: none !important;
overflow: visible !important;
page-break-inside: auto;
}
}
/* =========================================================================
THEME TOGGLE BUTTON (sun/moon)
========================================================================= */
.site-header-theme-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: transparent;
border: 1px solid var(--rv-border);
border-radius: 50%;
color: var(--rv-fg-strong);
cursor: pointer;
transition: all .22s var(--rv-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
margin-right: 8px;
}
.site-header-theme-btn:hover {
background: var(--rv-bg-soft);
border-color: var(--rv-turquesa);
color: var(--rv-turquesa);
transform: scale(1.05);
}
.site-header-theme-btn svg { width: 18px; height: 18px; }
.site-header-theme-btn .rv-theme-icon-moon { display: none; }
.site-header-theme-btn .rv-theme-icon-sun { display: block; }
html[data-rv-theme="dark"] .site-header-theme-btn .rv-theme-icon-sun { display: none; }
html[data-rv-theme="dark"] .site-header-theme-btn .rv-theme-icon-moon { display: block; }
/* =========================================================================
DARK MODE — overrides finos pra componentes do site
========================================================================= */
html[data-rv-theme="dark"] body {
background: var(--rv-bg);
color: var(--rv-fg);
}
html[data-rv-theme="dark"] .site-header {
background: rgba(0,0,0,0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom-color: var(--rv-border);
}
html[data-rv-theme="dark"] .site-footer {
background: var(--rv-bg-soft);
border-top: 1px solid var(--rv-border);
}
html[data-rv-theme="dark"] .site-footer h4,
html[data-rv-theme="dark"] .site-footer a {
color: var(--rv-fg);
}
html[data-rv-theme="dark"] .site-footer a:hover { color: var(--rv-turquesa-300); }
/* Mantém logo turquesa visível no dark mode (não inverte) */
html[data-rv-theme="dark"] .site-logo img,
html[data-rv-theme="dark"] .site-footer-logo img { filter: brightness(1.05); }
/* Cards e surfaces */
html[data-rv-theme="dark"] .card,
html[data-rv-theme="dark"] [class*="-card"]:not(.agente-card):not(.consultor-card):not(.loja-card) {
background: var(--rv-bg-muted);
border-color: var(--rv-border);
}
/* Inputs */
html[data-rv-theme="dark"] input,
html[data-rv-theme="dark"] textarea,
html[data-rv-theme="dark"] select {
background: var(--rv-bg-muted);
color: var(--rv-fg-strong);
border-color: var(--rv-border);
}
html[data-rv-theme="dark"] input::placeholder,
html[data-rv-theme="dark"] textarea::placeholder { color: var(--rv-fg-soft); }
/* Botão CTA mantém laranja vivo, mas o ghost/secondary ganha contraste */
html[data-rv-theme="dark"] .btn-secondary,
html[data-rv-theme="dark"] .btn-outline,
html[data-rv-theme="dark"] .btn-ghost {
background: var(--rv-bg-muted);
color: var(--rv-fg-strong);
border-color: var(--rv-border-strong);
}
html[data-rv-theme="dark"] .btn-secondary:hover,
html[data-rv-theme="dark"] .btn-ghost:hover { background: var(--rv-bg-soft); }
/* Mobile sheet */
html[data-rv-theme="dark"] .site-mobile-sheet { background: var(--rv-bg); border-top: 1px solid var(--rv-border); }
html[data-rv-theme="dark"] .site-mobile-sheet a { color: var(--rv-fg-strong); }
/* Mobile burger */
@media (max-width: 760px) {
.site-header-theme-btn { width: 36px; height: 36px; margin-right: 4px; }
.site-header-theme-btn svg { width: 16px; height: 16px; }
}
/* =========================================================================
AGENTE — modernização (Apple-style hover, lift, transitions)
========================================================================= */
.agente-card {
transition: all .35s cubic-bezier(0.22, 0.61, 0.36, 1);
text-decoration: none;
position: relative;
overflow: hidden;
}
.agente-card::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(5,137,150,0) 0%, rgba(5,137,150,0.06) 100%);
opacity: 0;
transition: opacity .35s cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
}
.agente-card:hover {
transform: translateY(-6px);
box-shadow: 0 40px 80px rgba(11,61,90,0.18);
border-color: var(--rv-turquesa-300);
}
.agente-card:hover::before { opacity: 1; }
.agente-card.is-feature:hover {
background: linear-gradient(135deg, var(--rv-azul-profundo) 0%, var(--rv-turquesa-700) 100%);
}
.agente-card-head .ic {
transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.agente-card:hover .agente-card-head .ic { transform: scale(1.08) rotate(-3deg); }
/* Dark mode pros cards do agente */
html[data-rv-theme="dark"] .agente-card {
background: var(--rv-bg-muted);
border-color: var(--rv-border);
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
html[data-rv-theme="dark"] .agente-card h3 { color: var(--rv-fg-strong); }
html[data-rv-theme="dark"] .agente-card p { color: var(--rv-fg-muted); }
html[data-rv-theme="dark"] .agente-card:hover {
box-shadow: 0 24px 60px rgba(0,0,0,0.6);
background: var(--rv-bg-soft);
}
html[data-rv-theme="dark"] .agente-card-head .ic {
background: rgba(5,137,150,0.18); color: var(--rv-turquesa-300);
}
html[data-rv-theme="dark"] .agente-list { background: var(--rv-bg-muted); border-color: var(--rv-border); }
html[data-rv-theme="dark"] .agente-list-head { background: var(--rv-bg-soft); border-color: var(--rv-border); }
html[data-rv-theme="dark"] .agente-list-head .left h3 { color: var(--rv-fg-strong); }
html[data-rv-theme="dark"] .docs-grid .agente-card { background: var(--rv-bg-muted); }
/* =========================================================================
ORÇAMENTO — modernização do hero/intro + dark mode dos formulários
========================================================================= */
.orc-hero, .orc-intro {
padding: clamp(80px, 10vw, 130px) 0 clamp(50px, 7vw, 80px);
}
html[data-rv-theme="dark"] .orc-card,
html[data-rv-theme="dark"] .cz-card,
html[data-rv-theme="dark"] .lead-form {
background: var(--rv-bg-muted);
border-color: var(--rv-border);
}
html[data-rv-theme="dark"] .cz-brand-logo {
background: white;
border-radius: 8px;
padding: 8px;
}
/* =========================================================================
GERAL — ajustes finos pra dark mode (textos, eyebrows, hero genéricos)
========================================================================= */
html[data-rv-theme="dark"] .eyebrow { color: var(--rv-turquesa-300); }
html[data-rv-theme="dark"] .hero { background: var(--rv-bg-soft); }
html[data-rv-theme="dark"] section { color: var(--rv-fg); }
html[data-rv-theme="dark"] h1, html[data-rv-theme="dark"] h2,
html[data-rv-theme="dark"] h3, html[data-rv-theme="dark"] h4 { color: var(--rv-fg-strong); }
html[data-rv-theme="dark"] p { color: var(--rv-fg); }
html[data-rv-theme="dark"] .lede, html[data-rv-theme="dark"] .placeholder-text,
html[data-rv-theme="dark"] .esp { color: var(--rv-fg-muted); }