/* ============================
VIAYO - Premium Travel
============================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
/* ===== SPLASH PAGE ===== */
.viayo-splash {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: #0B3C49;
overflow: hidden;
transition: opacity 0.65s ease, visibility 0.65s ease;
}
.viayo-splash.splash-hiding { opacity: 0; visibility: hidden; }
.viayo-splash.splash-hidden { display: none; }
.splash-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
animation: splash-zoom 12s ease-out forwards;
}
@keyframes splash-zoom {
from { transform: scale(1.1); }
to { transform: scale(1.0); }
}
.splash-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(11, 60, 73, 0.45) 0%,
rgba(11, 60, 73, 0.55) 40%,
rgba(11, 60, 73, 0.85) 100%
);
}
.splash-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 24px;
padding: 40px 24px;
max-width: 720px;
width: 100%;
animation: splash-fade-up 1s ease-out 0.2s both;
}
@keyframes splash-fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.splash-logo {
width: 180px;
height: auto;
margin-bottom: 8px;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25));
}
.splash-tagline {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(40px, 6vw, 72px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -1.5px;
color: #fff;
margin: 0;
}
.splash-tagline em {
font-style: italic;
color: #6FE3D6;
}
.splash-sub {
font-size: clamp(15px, 1.5vw, 18px);
color: rgba(255,255,255,0.85);
max-width: 520px;
margin: 0;
line-height: 1.5;
font-weight: 400;
}
.splash-btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 18px 44px;
background: #4FBDB3;
color: #fff;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
letter-spacing: 0.3px;
box-shadow: 0 10px 40px rgba(79, 189, 179, 0.5);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.splash-btn:hover {
transform: translateY(-3px);
background: #6FE3D6;
box-shadow: 0 14px 48px rgba(111, 227, 214, 0.6);
}
.splash-btn svg {
transition: transform 0.25s ease;
}
.splash-btn:hover svg {
transform: translateX(4px);
}
@media (max-width: 600px) {
.splash-logo { width: 140px; }
.splash-btn { padding: 15px 32px; font-size: 15px; }
.splash-inner { gap: 18px; }
}
:root {
--color-primary: #4FBDB3;
--color-primary-dark: #3da89e;
--color-primary-light: #6FE3D6;
--color-dark: #0B3C49;
--color-text: #222222;
--color-text-secondary: #717171;
--color-bg: #ffffff;
--color-bg-alt: #f7f7f7;
--color-border: #dddddd;
--color-border-light: #ebebeb;
--color-success: #48bb78;
--color-error: #f56565;
--color-whatsapp: #25D366;
--font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 50px;
--shadow: 0 2px 8px rgba(0,0,0,0.08);
--shadow-lg: 0 6px 20px rgba(0,0,0,0.12);
--shadow-xl: 0 12px 40px rgba(0,0,0,0.15);
--transition: 0.2s ease;
--container: 1280px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--color-text); background: var(--color-bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.2; }
.container { max-width: 100%; margin: 0 auto; padding: 0 5vw; }
@media (max-width: 768px) { .container { padding: 0 20px; } }
/* --- HEADER --- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border-light);
}
.header-inner {
display: flex; align-items: center; justify-content: space-between;
height: 80px; gap: 24px;
}
.site-logo img { height: 32px; width: auto; }
.nav-list { display: flex; gap: 4px; }
.nav-list li a {
padding: 10px 16px; font-size: 14px; font-weight: 500;
border-radius: var(--radius-full); color: var(--color-text);
transition: all var(--transition);
}
.nav-list li a:hover,
.nav-list li.current-menu-item a { background: var(--color-bg-alt); color: var(--color-primary); }
.header-actions .btn { border-radius: var(--radius-full); font-size: 13px; }
.menu-toggle { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; border: none; background: none; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; height: 2px; background: var(--color-text); border-radius: 2px; transition: all var(--transition); }
/* --- BUTTONS --- */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 20px; border: 1px solid transparent; border-radius: 8px;
font-family: var(--font); font-size: 14px; font-weight: 600;
cursor: pointer; transition: all var(--transition);
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); transform: scale(1.02); }
.btn-outline { background: #fff; color: var(--color-text); border-color: var(--color-border); }
.btn-outline:hover { border-color: var(--color-text); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
/* --- SEARCH HERO (full-screen premium) --- */
.search-hero {
position: relative;
min-height: 88vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 60px;
overflow: hidden;
}
.hero-bg-pic {
position: absolute; inset: 0;
overflow: hidden;
pointer-events: none;
}
.hero-bg {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
transform: scale(1.04);
animation: hero-zoom-out 8s ease forwards;
will-change: transform;
}
@keyframes hero-zoom-out {
from { transform: scale(1.08); }
to { transform: scale(1.00); }
}
/* Mejora #10 — Disable Ken Burns en mobile + reduced-motion */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
.hero-bg { animation: none; transform: none; }
}
.hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(
180deg,
rgba(7,17,34,0.30) 0%,
rgba(7,17,34,0.10) 30%,
rgba(7,17,34,0.55) 65%,
rgba(7,17,34,0.90) 100%
);
}
.hero-content {
position: relative; z-index: 2;
margin-bottom: 36px;
}
.hero-eyebrow {
font-size: 11px; font-weight: 600; letter-spacing: 3px;
text-transform: uppercase; color: rgba(255,255,255,0.65);
margin-bottom: 16px;
}
.hero-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(44px, 7vw, 80px);
font-weight: 400; line-height: 1.02;
color: #fff; letter-spacing: -2px;
text-shadow: 0 2px 30px rgba(0,0,0,0.25);
margin-bottom: 18px;
}
.hero-title em { font-style: italic; color: var(--color-primary-light); }
.hero-subtitle {
font-size: 17px; color: rgba(255,255,255,0.75);
font-weight: 400; line-height: 1.5; max-width: 500px;
}
/* Glass-morphism search bar */
.search-bar {
position: relative; z-index: 2;
display: flex; align-items: center;
max-width: 780px;
background: rgba(255,255,255,0.14);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,0.28);
border-radius: var(--radius-full);
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
transition: box-shadow var(--transition), background var(--transition);
}
.search-bar:hover, .search-bar:focus-within {
background: rgba(255,255,255,0.20);
box-shadow: 0 12px 48px rgba(0,0,0,0.3);
}
.search-field {
flex: 1; padding: 16px 24px; cursor: pointer;
border-radius: var(--radius-full);
transition: background var(--transition);
}
.search-field:hover { background: rgba(255,255,255,0.06); }
.search-where { flex: 1.5; }
.search-field label {
display: block; font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.9); margin-bottom: 3px;
}
.search-field input {
border: none; outline: none; background: transparent;
font-family: var(--font); font-size: 14px;
color: #fff; width: 100%;
}
.search-field input::placeholder { color: rgba(255,255,255,0.55); }
.search-placeholder { font-size: 14px; color: rgba(255,255,255,0.55); }
.search-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.search-btn {
width: 52px; height: 52px; border-radius: 50%;
background: var(--color-primary); border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
margin: 7px; flex-shrink: 0;
box-shadow: 0 4px 16px rgba(79,189,179,0.5);
transition: all var(--transition);
}
.search-btn:hover { background: var(--color-primary-dark); transform: scale(1.06); }
/* --- CATEGORIES BAR --- */
.categories-bar {
position: sticky; top: 80px; z-index: 90;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border-light);
padding: 12px 0;
transition: top 0.3s ease;
}
/* Cuando el header se oculta al hacer scroll, mover la barra al top */
.site-header.is-hidden ~ .site-main .categories-bar {
top: 0;
}
.categories-bar .container {
display: flex;
align-items: center;
gap: 16px;
max-width: none;
padding-left: 5vw;
padding-right: 5vw;
}
.categories-scroll {
display: flex; gap: 32px; overflow-x: auto; flex: 1;
justify-content: space-between;
scrollbar-width: none; -ms-overflow-style: none;
padding: 4px 0;
}
@media (max-width: 768px) {
.categories-scroll { justify-content: flex-start; }
}
.categories-scroll::-webkit-scrollbar { display: none; }
.category-item {
display: flex; flex-direction: column; align-items: center; gap: 6px;
min-width: 56px; padding: 8px 4px;
color: var(--color-text-secondary); font-size: 12px; font-weight: 500;
border-bottom: 2px solid transparent;
transition: all var(--transition); white-space: nowrap; cursor: pointer;
opacity: 0.7;
}
.category-item:hover { opacity: 1; color: var(--color-text); border-bottom-color: var(--color-border); }
.category-item.active { opacity: 1; color: var(--color-text); border-bottom-color: var(--color-text); }
.category-icon { width: 24px; height: 24px; }
.category-icon svg { width: 24px; height: 24px; }
.filter-toggle {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; border: 1px solid var(--color-border);
border-radius: var(--radius); background: #fff;
font-family: var(--font); font-size: 13px; font-weight: 500;
cursor: pointer; white-space: nowrap;
transition: all var(--transition);
}
.filter-toggle:hover { border-color: var(--color-text); }
/* --- LISTINGS GRID --- */
.listings { padding: 40px 0 60px; }
.listings-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.listing-card {
display: block; border-radius: 20px; overflow: hidden;
background: #fff;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.listing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.14); }
.listing-image {
position: relative; aspect-ratio: 3/4; border-radius: 20px 20px 0 0;
overflow: hidden;
}
.listing-image img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s ease;
}
.listing-card:hover .listing-image img { transform: scale(1.06); }
/* gradient overlay on image */
.listing-image::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
.listing-fav {
position: absolute; top: 12px; right: 12px; z-index: 2;
background: rgba(255,255,255,0.22); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.3); border-radius: 50%;
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all var(--transition);
}
.listing-fav:hover { background: rgba(255,255,255,0.35); transform: scale(1.1); }
.listing-fav svg { fill: none; stroke: #fff; width: 16px; height: 16px; }
/* price badge on image */
.listing-price-badge {
position: absolute; bottom: 52px; left: 14px; z-index: 2;
background: rgba(255,255,255,0.22); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3);
border-radius: 10px; padding: 4px 10px;
font-size: 12px; font-weight: 700; color: #fff;
}
.listing-info { padding: 12px 14px 14px; }
.listing-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.listing-header h3 { font-size: 15px; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.listing-rating {
display: flex; align-items: center; gap: 3px;
font-size: 13px; font-weight: 600; flex-shrink: 0; color: var(--color-text);
}
.listing-rating svg { fill: var(--color-text); width: 12px; height: 12px; }
.listing-reviews { color: var(--color-text-secondary); font-size: 13px; margin-top: 3px; }
.listing-price { margin-top: 6px; font-size: 14px; color: var(--color-text-secondary); }
.listing-price strong { font-weight: 700; color: var(--color-text); font-size: 15px; }
/* --- NEWSLETTER --- */
.newsletter-section {
background: var(--color-dark); padding: 60px 0;
}
.newsletter-box { text-align: center; max-width: 520px; margin: 0 auto; }
.newsletter-box h2 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.newsletter-box p { color: rgba(255,255,255,0.7); margin-bottom: 24px; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input[type="email"] {
flex: 1; padding: 14px 20px; border: 2px solid rgba(255,255,255,0.2);
border-radius: var(--radius); background: rgba(255,255,255,0.1);
color: #fff; font-family: var(--font); font-size: 14px; outline: none;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form input:focus { border-color: var(--color-primary); }
.form-message { margin-top: 12px; padding: 10px 16px; border-radius: 8px; font-size: 14px; display: none; }
.form-message.success { display: block; background: rgba(72,187,120,0.15); color: var(--color-success); }
.form-message.error { display: block; background: rgba(245,101,101,0.15); color: var(--color-error); }
/* --- FOOTER --- */
.site-footer { background: var(--color-bg-alt); color: var(--color-text); padding: 48px 0 0; border-top: 1px solid var(--color-border-light); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 32px; }
.footer-logo img {
height: 36px;
width: auto;
max-width: 140px;
object-fit: contain;
margin-bottom: 14px;
display: block;
}
.footer-desc { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 16px; }
.social-links { display: flex; gap: 8px; }
.social-links a {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
color: var(--color-text-secondary); transition: all var(--transition);
}
.social-links a:hover { color: var(--color-primary); background: rgba(79,189,179,0.1); }
.footer-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--color-text-secondary); font-size: 14px; }
.footer-links a:hover { color: var(--color-primary); text-decoration: underline; }
.footer-contact li { display: flex; gap: 8px; margin-bottom: 10px; font-size: 14px; color: var(--color-text-secondary); }
.footer-contact svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.footer-contact a { color: var(--color-text-secondary); }
.footer-contact a:hover { color: var(--color-primary); }
.footer-bottom { border-top: 1px solid var(--color-border-light); padding: 20px 0; text-align: center; font-size: 13px; color: var(--color-text-secondary); }
/* --- WHATSAPP FLOAT --- */
.whatsapp-float {
position: fixed; bottom: 24px; right: 24px;
width: 56px; height: 56px; background: var(--color-whatsapp);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(37,211,102,0.4); z-index: 999;
transition: all var(--transition);
}
.whatsapp-float:hover { transform: scale(1.1); }
.btn-whatsapp {
background: var(--color-whatsapp); color: #fff; border-radius: 8px;
padding: 12px 20px; display: inline-flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 14px; width: 100%; justify-content: center; margin-top: 16px;
}
.btn-whatsapp:hover { background: #20ba5a; }
/* --- ARCHIVE PAGES --- */
.archive-header { background: var(--color-bg-alt); padding: 100px 0 40px; text-align: center; margin-top: 0; }
.archive-header h1 { font-size: 32px; margin-bottom: 8px; }
.archive-header p { color: var(--color-text-secondary); font-size: 16px; }
.archive-filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.filter-btn {
padding: 8px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-full);
background: #fff; color: var(--color-text-secondary); font-family: var(--font); font-size: 13px;
font-weight: 500; cursor: pointer; transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.active { border-color: var(--color-text); color: var(--color-text); background: #fff; }
.archive-content { padding: 32px 0 60px; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* --- SINGLE PAGES --- */
.single-header { position: relative; height: 400px; overflow: hidden; }
.single-header img { width: 100%; height: 100%; object-fit: cover; }
.single-header .placeholder-image { height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); color: var(--color-primary); }
.single-header-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%); display: flex; align-items: flex-end; padding: 40px; }
.single-header-content { max-width: var(--container); margin: 0 auto; width: 100%; color: #fff; }
.single-header-content h1 { color: #fff; font-size: 36px; }
.single-content { max-width: 800px; margin: 0 auto; padding: 40px 24px 60px; }
.single-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border-light); }
.single-meta-item { display: flex; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: 14px; }
.single-meta-item svg { color: var(--color-primary); }
.single-meta-item strong { color: var(--color-text); }
.content-body { font-size: 16px; line-height: 1.7; }
.content-body h2 { margin: 28px 0 12px; font-size: 22px; }
.content-body p { margin-bottom: 14px; }
.content-body ul, .content-body ol { margin: 14px 0; padding-left: 24px; list-style: disc; }
.content-body li { margin-bottom: 6px; }
.includes-list { margin: 20px 0; }
.includes-list h3 { font-size: 16px; margin-bottom: 10px; }
.includes-list ul { list-style: none; padding: 0; }
.includes-list li { padding: 8px 0 8px 28px; position: relative; border-bottom: 1px solid var(--color-border-light); }
.includes-list.yes li::before { content: ''; position: absolute; left: 0; top: 10px; width: 16px; height: 16px; background: var(--color-success); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.includes-list.no li::before { content: ''; position: absolute; left: 0; top: 10px; width: 16px; height: 16px; background: var(--color-error); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7M7 1L1 7' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.quote-cta {
background: linear-gradient(135deg, #0B3C49 0%, #1a5566 100%);
border-radius: 24px;
padding: 40px 32px;
text-align: center;
margin: 32px 0;
color: #fff;
box-shadow: 0 12px 40px rgba(11, 60, 73, 0.18);
}
.quote-cta .quote-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(24px, 3vw, 32px);
font-weight: 400;
color: #fff;
margin: 0 0 8px;
letter-spacing: -0.5px;
}
.quote-cta .quote-sub {
font-size: 15px;
color: rgba(255,255,255,0.75);
margin: 0 0 24px;
}
.quote-cta .btn-whatsapp,
.quote-cta .btn-primary {
margin-top: 4px;
}
.card-actions {
display: flex;
gap: 8px;
margin-top: 12px;
align-items: center;
}
.card-actions .btn-sm {
flex: 1;
text-align: center;
padding: 10px 16px;
font-size: 13px;
}
.card-actions .btn-outline {
background: transparent;
color: var(--color-text);
border: 1.5px solid var(--color-border);
}
.card-actions .btn-outline:hover {
border-color: var(--color-text);
background: var(--color-bg-alt);
}
.badge { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 20px; background: rgba(79,189,179,0.1); color: var(--color-primary); margin-right: 4px; }
.badge:hover { background: var(--color-primary); color: #fff; }
/* --- PAGES --- */
.page-header { background: var(--color-bg-alt); padding: 100px 0 40px; text-align: center; }
.page-header h1 { font-size: 32px; }
.page-content { max-width: 700px; margin: 0 auto; padding: 40px 24px 60px; }
.error-404 { min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 100px 20px; }
.error-404 h1 { font-size: 80px; color: var(--color-primary); margin-bottom: 12px; }
.error-404 p { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 20px; }
.no-content-message { grid-column: 1/-1; text-align: center; padding: 40px; color: var(--color-text-secondary); }
/* --- CONTACT --- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.form-group input, .form-group textarea, .form-group select {
width: 100%; padding: 12px 14px; border: 1px solid var(--color-border);
border-radius: 8px; font-family: var(--font); font-size: 14px; outline: none;
transition: border-color var(--transition);
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--color-text); }
.contact-info-card { background: var(--color-bg-alt); padding: 28px; border-radius: var(--radius-lg); }
.contact-info-card h3 { font-size: 18px; margin-bottom: 20px; }
.info-item { display: flex; gap: 10px; margin-bottom: 16px; }
.info-item svg { flex-shrink: 0; color: var(--color-primary); margin-top: 2px; }
.info-item strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin-bottom: 2px; }
/* --- PAGINATION --- */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px solid var(--color-border); }
.pagination .page-numbers:hover, .pagination .page-numbers.current { background: var(--color-text); color: #fff; border-color: var(--color-text); }
/* --- DESTINATION/PACKAGE CARDS (archive pages) --- */
.destination-card { display: block; border-radius: var(--radius); overflow: hidden; transition: transform var(--transition); }
.destination-card:hover { transform: translateY(-2px); }
.destination-image { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); }
.destination-image img { width: 100%; height: 100%; object-fit: cover; }
.destination-price { position: absolute; bottom: 10px; right: 10px; background: var(--color-primary); color: #fff; padding: 4px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; }
.destination-info { padding: 10px 2px; }
.destination-info h3 { font-size: 15px; margin-bottom: 4px; }
.destination-location { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-text-secondary); }
.placeholder-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); color: var(--color-primary); }
.package-card { border-radius: var(--radius); overflow: hidden; transition: transform var(--transition); background: #fff; border: 1px solid var(--color-border-light); }
.package-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.package-image { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; }
.package-image img { width: 100%; height: 100%; object-fit: cover; }
.package-price { position: absolute; top: 10px; right: 10px; background: var(--color-dark); color: #fff; padding: 4px 12px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.package-info { padding: 14px; }
.package-meta { display: flex; gap: 12px; margin-bottom: 6px; }
.meta-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-secondary); }
.package-info h3 { font-size: 15px; margin-bottom: 6px; }
.package-info h3 a { color: var(--color-text); }
.package-info h3 a:hover { color: var(--color-primary); }
.package-info p { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 12px; }
.packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.packages-section { background: var(--color-bg-alt); padding: 60px 0; }
.package-card {
border-radius: 22px; overflow: hidden; background: #fff;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
border: none !important;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.package-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.14); }
/* --- SECTION HEADER --- */
.section-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 28px;
}
.section-header h2 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(26px, 4vw, 36px);
font-weight: 400; letter-spacing: -0.5px; line-height: 1.1;
}
.section-header h2 em { font-style: italic; color: var(--color-primary); }
.section-link {
font-size: 14px; font-weight: 600; color: var(--color-text);
text-decoration: underline; white-space: nowrap;
}
.section-link:hover { color: var(--color-primary); }
/* --- WHY SECTION --- */
.why-section { padding: 80px 0; background: var(--color-dark); }
.why-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(30px, 4vw, 44px);
font-weight: 400; text-align: center; margin-bottom: 48px;
color: #fff; letter-spacing: -0.8px;
}
.why-title em { font-style: italic; color: var(--color-primary-light); }
.why-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.why-item {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px; padding: 28px 24px;
text-align: left; color: #fff;
transition: background var(--transition), transform var(--transition);
}
.why-item:hover { background: rgba(255,255,255,0.10); transform: translateY(-3px); }
.why-icon {
width: 48px; height: 48px; border-radius: 14px;
background: rgba(79,189,179,0.18); color: var(--color-primary);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.why-item h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #fff; }
.why-item p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.55; }
.why-item { text-align: center; }
.why-icon {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(79,189,179,0.1); display: flex;
align-items: center; justify-content: center; margin: 0 auto 16px;
color: var(--color-primary);
}
.why-item h3 { font-size: 16px; margin-bottom: 8px; }
.why-item p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }
/* --- CONTACT SECTION (homepage) --- */
.contact-section { padding: 60px 0; background: var(--color-bg-alt); }
.contact-section h2 { font-size: 26px; margin-bottom: 4px; }
/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
.listings-grid, .catalog-grid { grid-template-columns: repeat(3, 1fr); }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.menu-toggle { display: flex; }
.header-actions { display: none; }
.main-nav {
position: fixed; top: 80px; left: 0; right: 0; bottom: 0;
background: var(--color-bg); padding: 20px; z-index: 999;
transform: translateX(100%); transition: transform var(--transition); overflow-y: auto;
}
.main-nav.active { transform: translateX(0); }
.nav-list { flex-direction: column; }
.nav-list li a { padding: 14px 16px; font-size: 16px; }
.search-bar { flex-direction: column; border-radius: var(--radius-lg); padding: 8px; }
.search-field { padding: 10px 16px; }
.search-divider { width: 100%; height: 1px; }
.search-btn { width: 100%; border-radius: var(--radius); height: 44px; margin: 4px 0; }
.categories-bar { top: 80px; }
.categories-actions { display: none; }
.listings-grid, .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.contact-grid, .form-row { grid-template-columns: 1fr; }
.newsletter-form { flex-direction: column; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
.single-header { height: 280px; }
.single-header-content h1 { font-size: 24px; }
.packages-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
.listings-grid, .catalog-grid, .packages-grid { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: 1fr; }
}
/* ========================================================
LOTE 1 — Quick wins (Mejoras #10 #17 #21 #28 #45 #46 #48 #50)
======================================================== */
/* #50 (parcial) — Skip link y :focus-visible */
.skip-link {
position: absolute; top: -40px; left: 12px;
background: var(--color-primary); color: #fff;
padding: 10px 16px; border-radius: 8px;
font-weight: 600; z-index: 99999;
text-decoration: none;
transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid #fff; }
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: 4px;
}
/* #45 — Breadcrumbs */
.viayo-breadcrumbs {
background: var(--color-bg-alt);
padding: 12px 0;
border-bottom: 1px solid var(--color-border-light);
font-size: 13px;
}
.viayo-breadcrumbs ol {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 6px;
align-items: center;
}
.viayo-breadcrumbs li {
display: flex; align-items: center; gap: 6px;
color: var(--color-text-secondary);
}
.viayo-breadcrumbs li:not(:last-child)::after {
content: '/';
color: var(--color-border);
margin-left: 6px;
}
.viayo-breadcrumbs a {
color: var(--color-text-secondary);
text-decoration: none;
transition: color 0.15s ease;
}
.viayo-breadcrumbs a:hover { color: var(--color-primary); }
.viayo-breadcrumbs li[aria-current="page"] {
color: var(--color-text);
font-weight: 600;
}
/* #21 — Stats band */
.stats-band {
background: linear-gradient(135deg, #4FBDB3 0%, #6FE3D6 100%);
padding: 56px 0;
color: #fff;
position: relative;
overflow: hidden;
}
.stats-band::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.12), transparent 40%),
radial-gradient(circle at 80% 50%, rgba(255,255,255,0.08), transparent 40%);
pointer-events: none;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
position: relative; z-index: 1;
}
.stat-item {
display: flex; flex-direction: column; gap: 6px;
}
.stat-num {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(36px, 5vw, 56px);
font-weight: 400;
line-height: 1;
letter-spacing: -1px;
}
.stat-suffix {
font-size: 0.6em;
opacity: 0.85;
}
.stat-label {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.2px;
opacity: 0.95;
font-weight: 500;
}
@media (max-width: 768px) {
.stats-band { padding: 40px 0; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
/* #46 — Footer denso (5 columnas + trust band + legal) */
.footer-grid {
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
gap: 32px;
}
.footer-trust-band {
margin-top: 32px;
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 16px;
}
.trust-item {
display: flex; align-items: center; gap: 10px;
font-size: 13px;
color: rgba(255,255,255,0.75);
}
.trust-item svg { color: var(--color-primary); flex-shrink: 0; }
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding-top: 20px;
gap: 16px;
}
.footer-copyright {
font-size: 13px;
color: rgba(255,255,255,0.55);
margin: 0;
}
.footer-legal {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.footer-legal a {
color: rgba(255,255,255,0.6);
text-decoration: none;
font-size: 13px;
transition: color 0.15s ease;
}
.footer-legal a:hover { color: #fff; }
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
.footer-about { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-about { grid-column: 1 / -1; }
.footer-trust-band { flex-direction: column; align-items: flex-start; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ========================================================
LOTE 2 — Trust signals (Mejoras #20 #22 #23)
======================================================== */
/* #20 — Header IATA badge */
.header-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(11, 60, 73, 0.08);
border: 1px solid rgba(11, 60, 73, 0.15);
border-radius: 20px;
font-size: 11px;
font-weight: 700;
color: var(--color-dark);
letter-spacing: 1px;
margin-right: 8px;
}
.header-badge svg { color: var(--color-primary); }
@media (max-width: 768px) {
.header-badge { display: none; }
}
/* #23 — Garantías rotuladas */
.guarantees-section {
padding: 80px 0;
background: #fafaf7;
}
.guarantees-header {
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
}
.section-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 12px;
}
.guarantees-section .why-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 400;
color: var(--color-dark);
margin: 0 0 12px;
letter-spacing: -1px;
line-height: 1.05;
}
.guarantees-section .why-title em {
font-style: italic;
color: var(--color-primary);
}
.guarantees-section .why-sub {
font-size: 16px;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
}
.guarantees-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.guarantee-item {
background: #fff;
border-radius: 16px;
padding: 28px 24px;
border: 1px solid var(--color-border-light);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.guarantee-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(11, 60, 73, 0.08);
border-color: rgba(79, 189, 179, 0.3);
}
.guarantee-badge {
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #4FBDB3 0%, #6FE3D6 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.5px;
margin-bottom: 18px;
box-shadow: 0 6px 16px rgba(79, 189, 179, 0.25);
}
.guarantee-item h3 {
font-size: 18px;
font-weight: 700;
color: var(--color-dark);
margin: 0 0 8px;
letter-spacing: -0.3px;
}
.guarantee-item p {
font-size: 14px;
color: var(--color-text-secondary);
line-height: 1.55;
margin: 0;
}
@media (max-width: 900px) {
.guarantees-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.guarantees-grid { grid-template-columns: 1fr; }
.guarantees-section { padding: 56px 0; }
}
/* #20 + #22 — Trust strip de certificaciones */
.trust-strip {
padding: 48px 0;
background: #fff;
border-top: 1px solid var(--color-border-light);
border-bottom: 1px solid var(--color-border-light);
}
.trust-strip-label {
text-align: center;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-text-secondary);
margin: 0 0 24px;
}
.trust-strip-grid {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 32px;
}
.trust-cert {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.cert-tag {
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
color: var(--color-dark);
padding: 8px 16px;
background: #fafaf7;
border-radius: 8px;
line-height: 1.2;
transition: background 0.2s ease, color 0.2s ease;
}
.trust-cert:hover .cert-tag {
background: var(--color-primary);
color: #fff;
}
.cert-text {
font-size: 11px;
color: var(--color-text-secondary);
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (max-width: 700px) {
.trust-strip { padding: 32px 0; }
.trust-strip-grid { gap: 20px; }
.cert-tag { font-size: 14px; padding: 6px 12px; }
}
/* ========================================================
LOTE 3 — Hero (Mejoras #6 #7 #8 #9)
======================================================== */
/* #6 — Carrusel hero crossfade */
.hero-slide {
position: absolute; inset: 0;
width: 100%; height: 100%;
opacity: 0;
transition: opacity 1.4s cubic-bezier(.4,0,.2,1);
pointer-events: none;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.hero-pagination {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
gap: 8px;
}
.hero-dot {
width: 28px; height: 4px;
background: rgba(255,255,255,0.35);
border: none;
border-radius: 2px;
cursor: pointer;
padding: 0;
transition: background 0.25s ease, width 0.25s ease;
}
.hero-dot:hover { background: rgba(255,255,255,0.6); }
.hero-dot.is-active {
background: #fff;
width: 36px;
}
@media (max-width: 768px) {
.hero-pagination { bottom: 16px; }
.hero-dot { width: 22px; height: 3px; }
.hero-dot.is-active { width: 28px; }
}
/* #8 — Microcopy rotativo */
.hero-eyebrow {
transition: opacity 0.4s ease;
min-height: 1.4em;
}
.hero-eyebrow.is-fading {
opacity: 0;
}
/* #9 — CTA secundario asesor */
.hero-secondary-cta {
margin: 18px 0 0;
text-align: center;
font-size: 14px;
color: rgba(255,255,255,0.85);
position: relative;
z-index: 2;
}
.hero-secondary-cta span {
margin-right: 6px;
opacity: 0.85;
}
.hero-secondary-cta a {
color: #fff;
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid rgba(255,255,255,0.4);
padding-bottom: 1px;
transition: border-color 0.2s ease, color 0.2s ease;
}
.hero-secondary-cta a:hover {
color: var(--color-primary-light);
border-bottom-color: var(--color-primary-light);
}
@media (max-width: 600px) {
.hero-secondary-cta { font-size: 13px; margin-top: 14px; }
.hero-secondary-cta span { display: block; margin-bottom: 4px; }
}
/* ========================================================
LOTE 4 — Cards (Mejoras #11 #12 #13 #14 #16)
======================================================== */
/* #13 — Multi-photo gallery dentro de card */
.listing-image { position: relative; }
.listing-photo {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.45s ease;
}
.listing-photo.is-active { opacity: 1; position: relative; }
.listing-photo:not(.is-active) { position: absolute; }
/* Garantizar que la primera imagen ocupe espacio */
.listing-image .listing-photo:first-child { position: relative; }
.listing-dots {
position: absolute;
bottom: 12px; left: 50%;
transform: translateX(-50%);
display: flex;
gap: 5px;
z-index: 4;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.listing-card:hover .listing-dots { opacity: 1; }
.listing-dot {
width: 6px; height: 6px;
background: rgba(255,255,255,0.55);
border-radius: 50%;
transition: background 0.2s ease, width 0.2s ease;
}
.listing-dot.is-active {
background: #fff;
width: 14px;
border-radius: 3px;
}
/* #12 — Badges contextuales */
.listing-badge {
position: absolute;
top: 12px; left: 12px;
z-index: 5;
padding: 5px 11px;
border-radius: 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
background: #fff;
color: var(--color-dark);
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
backdrop-filter: blur(8px);
}
.listing-badge--hot {
background: linear-gradient(135deg, #FF6B6B, #E55050);
color: #fff;
}
.listing-badge--gold {
background: linear-gradient(135deg, #C9A45E, #B8893A);
color: #fff;
}
.listing-badge--season {
background: linear-gradient(135deg, #4FBDB3, #3EA098);
color: #fff;
}
.listing-badge--value {
background: linear-gradient(135deg, #3E8B6E, #2F6B53);
color: #fff;
}
.listing-badge--romantic {
background: linear-gradient(135deg, #E55B7E, #C0426A);
color: #fff;
}
.listing-badge--adventure {
background: linear-gradient(135deg, #E58A3F, #C9722C);
color: #fff;
}
/* #11 — Quick view button (aparece en hover) */
.listing-quick {
position: absolute;
bottom: 12px; right: 12px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 20px;
background: rgba(255,255,255,0.92);
color: var(--color-dark);
border: none;
font-size: 12px;
font-weight: 600;
cursor: pointer;
backdrop-filter: blur(10px);
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.listing-card:hover .listing-quick {
opacity: 1;
transform: translateY(0);
}
.listing-quick:hover {
background: var(--color-primary);
color: #fff;
}
/* #14 — Hover overlay con highlights */
.listing-highlights {
position: absolute;
inset: auto 0 0 0;
z-index: 3;
padding: 12px 14px;
background: linear-gradient(180deg, transparent 0%, rgba(7,17,34,0.85) 100%);
display: flex;
flex-wrap: wrap;
gap: 4px;
transform: translateY(100%);
transition: transform 0.35s ease;
pointer-events: none;
}
.listing-card:hover .listing-highlights { transform: translateY(0); }
.hl-chip {
background: rgba(255,255,255,0.18);
backdrop-filter: blur(6px);
color: #fff;
padding: 3px 9px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3px;
border: 1px solid rgba(255,255,255,0.18);
}
/* #16 — Mini-rating breakdown */
.listing-breakdown {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 3px;
}
.bd-row {
display: grid;
grid-template-columns: 70px 1fr;
gap: 8px;
align-items: center;
font-size: 10.5px;
color: var(--color-text-secondary);
}
.bd-label {
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.bd-bar {
height: 4px;
background: var(--color-border-light);
border-radius: 2px;
overflow: hidden;
}
.bd-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
border-radius: 2px;
transition: width 0.6s ease;
}
/* #11 — Quick view modal */
.quickview-modal {
position: fixed; inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.quickview-modal[aria-hidden="false"],
.quickview-modal:not([hidden]) {
opacity: 1;
pointer-events: auto;
}
.quickview-backdrop {
position: absolute; inset: 0;
background: rgba(7,17,34,0.65);
backdrop-filter: blur(8px);
}
.quickview-card {
position: relative;
width: min(720px, 92vw);
max-height: 86vh;
background: #fff;
border-radius: 24px;
box-shadow: 0 30px 80px rgba(0,0,0,0.4);
overflow: hidden;
display: flex; flex-direction: column;
animation: qv-pop 0.35s cubic-bezier(.2,.8,.2,1);
}
@keyframes qv-pop {
from { opacity: 0; transform: scale(0.94) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.quickview-close {
position: absolute;
top: 16px; right: 16px;
z-index: 6;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
border: none;
font-size: 26px;
line-height: 1;
cursor: pointer;
color: var(--color-dark);
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
}
.quickview-body {
overflow-y: auto;
overflow-x: hidden;
}
.qv-hero {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.qv-hero img {
width: 100%; height: 100%;
object-fit: cover;
}
.qv-hero-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 28px 28px 22px;
background: linear-gradient(180deg, transparent 0%, rgba(7,17,34,0.9) 100%);
color: #fff;
}
.qv-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 32px;
font-weight: 400;
margin: 0 0 4px;
letter-spacing: -0.5px;
line-height: 1.05;
}
.qv-rating {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(255,255,255,0.9);
}
.qv-content {
padding: 24px 28px 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.qv-section h4 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-secondary);
margin: 0 0 12px;
font-weight: 700;
}
.qv-highlights ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.qv-highlights li {
font-size: 13px;
color: var(--color-text);
padding-left: 22px;
position: relative;
line-height: 1.4;
}
.qv-highlights li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: 700;
}
.qv-breakdown {
display: flex;
flex-direction: column;
gap: 8px;
}
.qv-bd-row {
display: grid;
grid-template-columns: 90px 1fr 28px;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--color-text);
}
.qv-bd-label { font-weight: 600; }
.qv-bd-bar {
height: 6px; background: var(--color-border-light);
border-radius: 3px; overflow: hidden;
}
.qv-bd-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
border-radius: 3px;
}
.qv-bd-score { font-weight: 700; color: var(--color-primary); text-align: right; }
.qv-actions {
grid-column: 1 / -1;
display: flex;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--color-border-light);
}
.qv-actions .btn { flex: 1; justify-content: center; padding: 14px; }
@media (max-width: 600px) {
.quickview-card { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
.qv-content { grid-template-columns: 1fr; gap: 20px; }
.qv-title { font-size: 26px; }
.listing-quick { font-size: 11px; padding: 6px 10px; }
}
/* ========================================================
LOTE 5 — Comparador (Mejora #15)
======================================================== */
/* Botón compare en cada card */
.listing-compare {
position: absolute;
top: 12px; right: 56px;
z-index: 5;
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease, border-color 0.2s ease;
}
.listing-compare:hover {
background: rgba(255,255,255,0.35);
}
.listing-compare.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
}
/* Ajustar position del fav (estaba en top-right) */
.listing-fav {
top: 12px;
right: 12px;
}
/* Compare dock flotante */
.compare-dock {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(120px);
z-index: 1000;
background: var(--color-dark);
color: #fff;
border-radius: 60px;
box-shadow: 0 16px 48px rgba(11, 60, 73, 0.35);
padding: 12px 16px;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
min-width: min(560px, 92vw);
}
.compare-dock:not([hidden]) {
transform: translateX(-50%) translateY(0);
}
.compare-dock-inner {
display: flex; align-items: center; gap: 14px;
}
.compare-count {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.compare-thumbs {
display: flex; gap: 6px;
flex: 1;
}
.compare-thumb {
width: 36px; height: 36px;
border-radius: 8px;
background-size: cover;
background-position: center;
border: 2px solid rgba(255,255,255,0.2);
flex-shrink: 0;
position: relative;
}
.compare-thumb::after {
content: '×';
position: absolute;
top: -4px; right: -4px;
width: 16px; height: 16px;
background: #fff;
color: var(--color-dark);
border-radius: 50%;
font-size: 12px;
line-height: 14px;
font-weight: 700;
cursor: pointer;
text-align: center;
}
.compare-dock .btn-outline {
background: transparent;
color: rgba(255,255,255,0.85);
border-color: rgba(255,255,255,0.3);
}
.compare-dock .btn-outline:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
color: #fff;
}
@media (max-width: 600px) {
.compare-dock { min-width: 92vw; padding: 10px 14px; border-radius: 30px; }
.compare-count { font-size: 12px; }
.compare-thumb { width: 28px; height: 28px; }
}
/* Compare drawer */
.compare-drawer {
position: fixed; inset: 0;
z-index: 10001;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.compare-drawer:not([hidden]) {
opacity: 1;
pointer-events: auto;
}
.compare-drawer-backdrop {
position: absolute; inset: 0;
background: rgba(7,17,34,0.7);
backdrop-filter: blur(6px);
}
.compare-drawer-panel {
position: absolute;
top: 0; right: 0;
width: min(900px, 95vw);
height: 100vh;
background: #fff;
box-shadow: -20px 0 60px rgba(0,0,0,0.3);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.compare-drawer:not([hidden]) .compare-drawer-panel { transform: translateX(0); }
.compare-drawer-head {
padding: 20px 24px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--color-border-light);
}
.compare-drawer-head h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 26px;
font-weight: 400;
margin: 0;
color: var(--color-dark);
}
.compare-drawer-head .quickview-close {
position: static;
box-shadow: none;
background: var(--color-bg-alt);
}
.compare-drawer-body {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.cmp-grid {
display: grid;
gap: 16px;
}
.cmp-grid[data-cols="1"] { grid-template-columns: 1fr; }
.cmp-grid[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.cmp-grid[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
.cmp-col {
border: 1px solid var(--color-border-light);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.cmp-img {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.cmp-img img {
width: 100%; height: 100%;
object-fit: cover;
}
.cmp-content {
padding: 16px;
display: flex; flex-direction: column; gap: 12px;
}
.cmp-name {
font-size: 17px;
font-weight: 700;
margin: 0;
}
.cmp-rating {
font-size: 13px;
color: var(--color-primary);
font-weight: 600;
}
.cmp-section-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-secondary);
font-weight: 700;
margin-bottom: 4px;
}
.cmp-bd {
display: flex; flex-direction: column; gap: 4px;
font-size: 11px;
}
.cmp-bd-row { display: grid; grid-template-columns: 1fr 60px 24px; align-items: center; gap: 6px; }
.cmp-bd-row .qv-bd-bar { height: 5px; }
.cmp-hl {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px;
color: var(--color-text);
}
.cmp-hl-item::before { content: '·'; margin-right: 6px; color: var(--color-primary); font-weight: 700; }
.cmp-cta { padding: 10px; font-size: 12px; }
@media (max-width: 700px) {
.cmp-grid[data-cols="2"], .cmp-grid[data-cols="3"] { grid-template-columns: 1fr; }
}
/* ========================================================
LOTE 6 — Search funcional (Mejoras #1 #2 #3 #4 #5)
======================================================== */
/* Convertir search-bar en form que mantiene posicion para popovers */
.search-bar { position: relative; }
.search-field { position: relative; }
/* Triggers como botones */
.search-trigger {
background: none;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
padding: 0;
color: inherit;
font: inherit;
}
.search-value {
color: #fff !important;
font-weight: 600 !important;
font-size: 14px !important;
}
/* Voice button */
.search-voice {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
margin-right: 6px;
}
.search-voice:hover { background: rgba(255,255,255,0.25); }
.search-voice.is-listening {
background: #FF6B6B;
animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.5); }
50% { box-shadow: 0 0 0 10px rgba(255,107,107,0); }
}
/* Popovers genéricos */
.search-popover {
position: absolute;
top: calc(100% + 12px);
left: -16px;
min-width: 360px;
max-width: 480px;
max-height: 480px;
overflow-y: auto;
background: #fff;
color: var(--color-text);
border-radius: 16px;
box-shadow: 0 16px 40px rgba(7,17,34,0.18);
padding: 14px;
z-index: 100;
animation: popover-pop 0.2s ease;
}
@keyframes popover-pop {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.popover-section + .popover-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border-light); }
.popover-section h5 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-secondary);
font-weight: 700;
margin: 0 0 8px;
}
.popover-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 10px;
text-decoration: none;
color: var(--color-text);
transition: background 0.15s ease;
}
.popover-item:hover { background: var(--color-bg-alt); }
.popover-item img {
width: 40px; height: 40px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.popover-icon {
width: 40px; height: 40px;
background: var(--color-bg-alt);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.popover-item div {
flex: 1;
display: flex; flex-direction: column;
}
.popover-item strong {
font-size: 14px;
font-weight: 600;
}
.popover-item span {
font-size: 12px;
color: var(--color-text-secondary);
}
.popover-badge {
background: var(--color-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.popover-empty {
text-align: center;
padding: 20px;
}
.popover-empty p { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 12px; }
.popover-loading {
text-align: center;
padding: 20px;
color: var(--color-text-secondary);
font-size: 13px;
}
/* Stepper */
.popover-stepper {
min-width: 320px;
padding: 16px;
}
.stepper-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.stepper-row + .stepper-row { border-top: 1px solid var(--color-border-light); }
.stepper-row strong { display: block; font-size: 14px; color: var(--color-text); }
.stepper-row small { display: block; font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.stepper-controls {
display: flex;
align-items: center;
gap: 12px;
}
.step-btn {
width: 32px; height: 32px;
border-radius: 50%;
border: 1.5px solid var(--color-border);
background: #fff;
color: var(--color-text);
font-size: 18px;
line-height: 1;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.step-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.step-value { font-size: 16px; font-weight: 700; min-width: 24px; text-align: center; }
/* Date picker */
.date-picker {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
background: #fff;
color: var(--color-text);
border-radius: 18px;
box-shadow: 0 20px 50px rgba(7,17,34,0.22);
padding: 18px;
z-index: 200;
width: min(380px, 95vw);
animation: popover-pop 0.22s ease;
}
.date-picker-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.dp-month {
font-weight: 700;
text-transform: capitalize;
font-size: 15px;
}
.dp-nav {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--color-border);
background: #fff;
cursor: pointer;
font-size: 16px;
line-height: 1;
}
.dp-nav:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dp-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.dp-dow {
text-align: center;
font-size: 11px;
color: var(--color-text-secondary);
font-weight: 700;
text-transform: uppercase;
padding: 6px 0;
}
.dp-day {
aspect-ratio: 1;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
color: var(--color-text);
transition: background 0.15s ease, color 0.15s ease;
}
.dp-day:hover:not(.is-past):not(:disabled) { background: var(--color-bg-alt); }
.dp-day.is-past, .dp-day:disabled { color: var(--color-border); cursor: not-allowed; }
.dp-day.is-selected { background: var(--color-primary); color: #fff; font-weight: 700; }
.dp-day.is-range { background: rgba(79, 189, 179, 0.18); }
.dp-presets {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--color-border-light);
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dp-preset {
background: var(--color-bg-alt);
border: none;
padding: 6px 10px;
border-radius: 14px;
font-size: 12px;
cursor: pointer;
color: var(--color-text);
transition: background 0.15s ease;
}
.dp-preset:hover {
background: var(--color-primary);
color: #fff;
}
@media (max-width: 768px) {
.search-popover, .date-picker {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
transform: none;
max-width: 100%;
width: 100%;
max-height: 70vh;
border-radius: 20px 20px 0 0;
animation: popover-up 0.3s ease;
}
@keyframes popover-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
}
/* ========================================================
LOTE 7 — Conversion (Mejoras #24 #25 #26)
======================================================== */
/* #24 — Sticky CTA dock en single-paquete */
.sticky-cta-dock {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 900;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(14px);
border-top: 1px solid var(--color-border-light);
box-shadow: 0 -8px 24px rgba(7,17,34,0.08);
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
padding: 12px 0;
}
.sticky-cta-dock:not([hidden]) { transform: translateY(0); }
.sticky-cta-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
}
.sticky-cta-info { display: flex; align-items: center; gap: 12px; }
.sticky-cta-thumb {
width: 44px; height: 44px;
border-radius: 10px;
object-fit: cover;
}
.sticky-cta-info strong { display: block; font-size: 14px; color: var(--color-dark); }
.sticky-cta-info span { display: block; font-size: 12px; color: var(--color-text-secondary); }
.sticky-cta-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 600px) {
.sticky-cta-info span { display: none; }
.sticky-cta-info strong { font-size: 13px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-cta-actions .btn { font-size: 12px; padding: 8px 12px; }
.sticky-cta-actions .btn-outline { display: none; }
}
/* #25 — Quickform modal */
.quickform-modal {
position: fixed; inset: 0;
z-index: 10002;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.quickform-modal:not([hidden]) {
opacity: 1;
pointer-events: auto;
}
.quickform-backdrop {
position: absolute; inset: 0;
background: rgba(7,17,34,0.7);
backdrop-filter: blur(6px);
}
.quickform-panel {
position: absolute;
top: 0; right: 0;
width: min(440px, 100vw);
height: 100vh;
background: #fff;
box-shadow: -20px 0 60px rgba(0,0,0,0.3);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
overflow-y: auto;
padding: 28px;
}
.quickform-modal:not([hidden]) .quickform-panel { transform: translateX(0); }
.quickform-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.quickform-head h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 30px;
font-weight: 400;
margin: 0;
color: var(--color-dark);
letter-spacing: -0.5px;
}
.quickform-head h3 em { color: var(--color-primary); font-style: italic; }
.quickform-head .quickview-close { position: static; box-shadow: none; background: var(--color-bg-alt); }
.quickform-sub { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 24px; line-height: 1.5; }
.quickform .form-group { margin-bottom: 18px; }
.quickform-trust {
margin-top: 14px;
font-size: 11px;
color: var(--color-text-secondary);
text-align: center;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* #26 — Multi-step form */
.cotizar-wrap { padding: 80px 0; min-height: 80vh; }
.cotizar-intro { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.cotizar-intro h1 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(36px, 5vw, 56px);
font-weight: 400;
color: var(--color-dark);
margin: 12px 0;
letter-spacing: -1px;
}
.cotizar-intro h1 em { font-style: italic; color: var(--color-primary); }
.cotizar-form {
background: #fff;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(7,17,34,0.08);
padding: 40px;
max-width: 720px;
margin: 0 auto;
}
.multistep-progress { margin-bottom: 32px; }
.ms-bar {
height: 4px;
background: var(--color-border-light);
border-radius: 2px;
overflow: hidden;
margin-bottom: 14px;
}
.ms-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
transition: width 0.4s ease;
}
.ms-steps { display: flex; justify-content: space-between; gap: 8px; }
.ms-step {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--color-text-secondary);
font-weight: 600;
flex: 1;
text-align: center;
}
.ms-step.is-active { color: var(--color-primary); }
.ms-pane { display: none; animation: ms-fade 0.3s ease; }
.ms-pane.is-active { display: block; }
@keyframes ms-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ms-pane h2 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 32px;
font-weight: 400;
color: var(--color-dark);
margin: 0 0 8px;
letter-spacing: -0.5px;
}
.ms-help { color: var(--color-text-secondary); margin: 0 0 24px; font-size: 14px; }
.ms-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ms-row .form-group { flex: 1; }
.ms-chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ms-chip { cursor: pointer; }
.ms-chip input { display: none; }
.ms-chip span {
display: inline-block;
padding: 8px 16px;
border-radius: 20px;
border: 1.5px solid var(--color-border);
font-size: 13px;
color: var(--color-text);
transition: all 0.15s ease;
}
.ms-chip input:checked + span {
border-color: var(--color-primary);
background: var(--color-primary);
color: #fff;
}
.ms-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.ms-radio { cursor: pointer; }
.ms-radio input { display: none; }
.ms-radio span {
display: block;
padding: 16px;
border-radius: 12px;
border: 1.5px solid var(--color-border);
transition: all 0.15s ease;
}
.ms-radio span strong { display: block; color: var(--color-dark); margin-bottom: 4px; }
.ms-radio span small { display: block; color: var(--color-text-secondary); font-size: 12px; }
.ms-radio input:checked + span {
border-color: var(--color-primary);
background: rgba(79, 189, 179, 0.08);
}
.ms-check {
display: flex; align-items: center; gap: 8px;
font-size: 14px;
color: var(--color-text-secondary);
cursor: pointer;
margin-top: 12px;
}
.ms-check input { accent-color: var(--color-primary); width: 18px; height: 18px; }
.multistep-nav {
display: flex;
gap: 12px;
justify-content: space-between;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--color-border-light);
}
[data-ms-prev] { margin-right: auto; }
[data-ms-next], [data-ms-submit] { margin-left: auto; min-width: 160px; }
.cotizar-success {
text-align: center;
padding: 60px 20px;
background: #fff;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(7,17,34,0.08);
max-width: 520px;
margin: 0 auto;
}
.cotizar-success svg { margin-bottom: 16px; }
.cotizar-success h2 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 36px;
font-weight: 400;
color: var(--color-dark);
margin: 0 0 12px;
}
.cotizar-success p { color: var(--color-text-secondary); margin-bottom: 24px; }
@media (max-width: 600px) {
.cotizar-form { padding: 24px; }
.ms-row, .ms-radio-group { grid-template-columns: 1fr; }
.ms-step { font-size: 9px; }
.ms-pane h2 { font-size: 26px; }
}
/* ========================================================
COTIZAR — 10 mejoras premium
======================================================== */
/* Layout con sidebar */
.cotizar-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 32px;
align-items: start;
}
@media (max-width: 1024px) { .cotizar-layout { grid-template-columns: 1fr; } }
/* #1 — Slide animations entre pasos */
.cotizar-form { overflow: hidden; }
.ms-pane {
display: none;
animation: none;
}
.ms-pane.is-active { display: block; animation: ms-enter 0.4s cubic-bezier(.2,.8,.2,1); }
@keyframes ms-enter {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
.ms-pane.is-leaving-left {
display: block;
animation: ms-leave-left 0.35s cubic-bezier(.4,0,.6,1) forwards;
position: absolute;
top: 0; left: 0; right: 0;
pointer-events: none;
}
.ms-pane.is-leaving-right {
display: block;
animation: ms-leave-right 0.35s cubic-bezier(.4,0,.6,1) forwards;
position: absolute;
top: 0; left: 0; right: 0;
pointer-events: none;
}
@keyframes ms-leave-left {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-40px); }
}
@keyframes ms-leave-right {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(40px); }
}
/* Cotizar form needs relative for absolute leaving panes */
.cotizar-form { position: relative; }
.cotizar-form > .multistep-progress,
.cotizar-form > .multistep-nav { position: relative; z-index: 2; }
/* #9 — Social proof banner por paso */
.ms-social-proof {
display: inline-flex;
align-items: center;
background: rgba(79, 189, 179, 0.1);
color: var(--color-primary);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 14px;
animation: ms-fade-down 0.5s ease;
}
@keyframes ms-fade-down {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* #2 — Inline validation states */
.form-group { position: relative; }
.form-group .ms-validation-icon {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.form-group input.is-valid + .ms-validation-icon,
.form-group input.is-invalid + .ms-validation-icon,
.form-group input + .ms-validation-icon {
opacity: 1;
}
.form-group label + input + .ms-validation-icon {
top: calc(50% + 12px);
}
.cotizar-form input.is-valid {
border-color: #3E8B6E !important;
padding-right: 40px;
}
.cotizar-form input.is-invalid {
border-color: #E35B5B !important;
padding-right: 40px;
animation: shake 0.35s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
/* Inputs base improvements */
.cotizar-form input[type="text"],
.cotizar-form input[type="email"],
.cotizar-form input[type="tel"],
.cotizar-form input[type="month"],
.cotizar-form input[type="number"],
.cotizar-form select,
.cotizar-form textarea {
width: 100%;
padding: 14px 16px;
border: 1.5px solid var(--color-border);
border-radius: 12px;
font-size: 15px;
font-family: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background: #fff;
}
.cotizar-form input:focus,
.cotizar-form select:focus,
.cotizar-form textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(79, 189, 179, 0.12);
}
/* #4 — Autocomplete dropdown */
[data-autocomplete-wrap] { position: relative; }
.ms-autocomplete {
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
background: #fff;
border: 1px solid var(--color-border-light);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(7,17,34,0.12);
max-height: 320px;
overflow-y: auto;
z-index: 100;
animation: ms-fade-down 0.18s ease;
}
.ac-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: none;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.12s ease;
}
.ac-item:hover { background: var(--color-bg-alt); }
.ac-item img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.ac-icon { width: 32px; text-align: center; font-size: 18px; }
.ac-item div { display: flex; flex-direction: column; min-width: 0; }
.ac-item strong { font-size: 14px; color: var(--color-dark); }
.ac-item span { font-size: 12px; color: var(--color-text-secondary); }
.ac-empty { padding: 20px; text-align: center; color: var(--color-text-secondary); font-size: 13px; }
/* #5 — Cards visuales (radios y checkboxes) */
.ms-cards-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 14px;
}
.ms-cards-group--small { grid-template-columns: repeat(6, 1fr); }
.ms-cards-group--budget { grid-template-columns: repeat(2, 1fr); }
.ms-card-check, .ms-card-radio { display: block; cursor: pointer; }
.ms-card-check input, .ms-card-radio input { display: none; }
.ms-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 18px 12px;
border: 1.5px solid var(--color-border);
border-radius: 14px;
background: #fff;
transition: all 0.2s cubic-bezier(.2,.8,.2,1);
text-align: center;
height: 100%;
}
.ms-card:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(79, 189, 179, 0.12);
}
.ms-card-icon {
font-size: 28px;
line-height: 1;
}
.ms-card-label {
font-size: 13px;
font-weight: 600;
color: var(--color-dark);
}
.ms-card-sub {
font-size: 11px;
color: var(--color-text-secondary);
line-height: 1.3;
}
.ms-card--budget {
padding: 24px 16px;
align-items: flex-start;
text-align: left;
}
.ms-card--budget .ms-card-icon { font-size: 32px; }
.ms-card-check input:checked + .ms-card,
.ms-card-radio input:checked + .ms-card {
border-color: var(--color-primary);
background: linear-gradient(135deg, rgba(79,189,179,0.08), rgba(111,227,214,0.04));
box-shadow: 0 8px 20px rgba(79, 189, 179, 0.18);
}
.ms-card-check input:checked + .ms-card::before,
.ms-card-radio input:checked + .ms-card::before {
content: '✓';
position: absolute;
top: 8px; right: 12px;
color: var(--color-primary);
font-weight: 700;
font-size: 14px;
}
.ms-card-check, .ms-card-radio { position: relative; }
@media (max-width: 768px) {
.ms-cards-group--small { grid-template-columns: repeat(3, 1fr); }
.ms-cards-group--budget { grid-template-columns: 1fr; }
.ms-cards-group { grid-template-columns: 1fr 1fr; }
}
.ms-sublabel {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-secondary);
font-weight: 600;
margin: 24px 0 8px;
}
/* Stepper rows in cotizar */
.ms-stepper-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
background: var(--color-bg-alt);
border-radius: 14px;
margin-bottom: 8px;
}
.ms-stepper-row strong { display: block; font-size: 15px; color: var(--color-dark); }
.ms-stepper-row small { display: block; font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
/* #7 — Resumen flotante sidebar */
.cotizar-resume {
position: sticky;
top: 100px;
background: linear-gradient(135deg, #0B3C49 0%, #1a5566 100%);
color: #fff;
border-radius: 20px;
padding: 24px;
box-shadow: 0 16px 40px rgba(11, 60, 73, 0.15);
}
.resume-head { margin-bottom: 18px; }
.resume-head .section-eyebrow { color: var(--color-primary-light); }
.resume-head h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px;
font-weight: 400;
color: #fff;
margin: 6px 0 0;
letter-spacing: -0.3px;
}
.resume-empty {
text-align: center;
padding: 30px 10px;
color: rgba(255,255,255,0.6);
}
.resume-empty p { font-size: 13px; margin: 12px 0 0; line-height: 1.5; }
.resume-items {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
}
.resume-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.08);
border-radius: 10px;
transition: background 0.2s ease;
}
.resume-item.is-new {
animation: ri-pop 0.4s ease;
background: rgba(79, 189, 179, 0.25);
}
@keyframes ri-pop {
from { opacity: 0; transform: translateY(-6px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ri-icon { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
.ri-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ri-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6); font-weight: 600; }
.ri-text strong { font-size: 13px; color: #fff; word-break: break-word; }
.resume-promise {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: rgba(255,255,255,0.65);
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.12);
}
.resume-promise svg { color: var(--color-primary-light); }
/* #10 — WhatsApp preview mockup */
.wa-preview {
margin-top: 28px;
padding: 20px;
background: linear-gradient(135deg, #075E54 0%, #128C7E 100%);
border-radius: 16px;
color: #fff;
}
.wa-preview-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.wa-icon {
width: 36px; height: 36px;
background: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.wa-preview-head strong { display: block; font-size: 14px; }
.wa-preview-head span { display: block; font-size: 11px; opacity: 0.85; }
.wa-bubble {
background: #DCF8C6;
color: #111;
padding: 12px 14px 8px;
border-radius: 8px;
border-top-right-radius: 0;
margin-left: auto;
max-width: 92%;
box-shadow: 0 1px 2px rgba(0,0,0,0.13);
position: relative;
animation: ms-fade-down 0.25s ease;
}
.wa-author {
display: block;
font-size: 11px;
font-weight: 700;
color: #25D366;
margin-bottom: 4px;
}
.wa-message {
display: block;
font-size: 13px;
line-height: 1.45;
white-space: pre-wrap;
}
.wa-time {
display: block;
text-align: right;
font-size: 10px;
color: rgba(0,0,0,0.5);
margin-top: 6px;
}
/* #8 — Success animation con check SVG */
.success-check {
margin: 0 auto 16px;
display: block;
}
.success-check .sc-bg {
stroke-dasharray: 226;
stroke-dashoffset: 226;
animation: sc-bg 0.6s 0.1s ease forwards;
}
.success-check .sc-mark {
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: sc-mark 0.4s 0.5s ease forwards;
}
@keyframes sc-bg { to { stroke-dashoffset: 0; } }
@keyframes sc-mark { to { stroke-dashoffset: 0; } }
/* Refinements */
.cotizar-resume .section-eyebrow { color: var(--color-primary-light); }
.multistep-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border-light); }
[data-ms-prev] { margin-right: auto; }
[data-ms-next], [data-ms-submit] { margin-left: auto; min-width: 180px; justify-content: center; display: inline-flex; align-items: center; }
/* Mobile sidebar adapts */
@media (max-width: 1024px) {
.cotizar-resume {
position: static;
margin-top: 24px;
}
}
/* ========================================================
LOTE 8 — Personalization (Mejoras #29 #30 #33)
======================================================== */
/* Header actions container — alinear todo en linea horizontal */
.header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
/* Wishlist toggle in header (smaller, more refined) */
.wish-toggle {
position: relative;
width: 36px; height: 36px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--color-border-light);
color: var(--color-text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
flex-shrink: 0;
}
.wish-toggle svg { width: 16px; height: 16px; }
.wish-toggle:hover { background: rgba(229, 91, 126, 0.08); color: #E55B7E; border-color: #E55B7E; }
.trip-toggle:hover { background: rgba(79, 189, 179, 0.08); color: var(--color-primary); border-color: var(--color-primary); }
@media (max-width: 768px) {
.wish-toggle, .trip-toggle { display: none; }
}
.wish-badge {
position: absolute;
top: -2px; right: -2px;
background: #FF6B6B;
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
transform: scale(0);
transition: transform 0.2s ease;
}
.wish-badge.has-items { transform: scale(1); }
/* Listing fav active state (heart filled) */
.listing-fav.is-active {
background: #FF6B6B;
border-color: #FF6B6B;
}
.listing-fav.is-active svg { fill: #fff; stroke: #fff; }
/* #29 — Recently viewed strip */
.recent-strip {
padding: 32px 0;
background: #fff;
border-bottom: 1px solid var(--color-border-light);
}
.recent-strip .section-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
}
.recent-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px;
font-weight: 400;
margin: 0;
color: var(--color-dark);
}
.recent-clear {
background: none; border: none;
font-size: 12px; color: var(--color-text-secondary);
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.recent-clear:hover { color: var(--color-primary); }
.recent-rail {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 6px;
scrollbar-width: thin;
}
.recent-rail::-webkit-scrollbar { height: 4px; }
.recent-rail::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.recent-card {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px 8px 8px;
background: var(--color-bg-alt);
border-radius: 14px;
text-decoration: none;
color: var(--color-text);
transition: background 0.15s ease;
min-width: 240px;
}
.recent-card:hover { background: rgba(79, 189, 179, 0.1); }
.recent-img {
width: 50px; height: 50px;
border-radius: 10px;
background-size: cover;
background-position: center;
background-color: var(--color-border-light);
flex-shrink: 0;
}
.recent-info { display: flex; flex-direction: column; gap: 2px; }
.recent-type {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-secondary);
font-weight: 600;
}
.recent-info strong {
font-size: 13px;
color: var(--color-dark);
line-height: 1.3;
}
/* #30 — Wishlist drawer */
.wish-drawer {
position: fixed; inset: 0;
z-index: 10003;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.wish-drawer:not([hidden]) { opacity: 1; pointer-events: auto; }
.wish-backdrop {
position: absolute; inset: 0;
background: rgba(7,17,34,0.7);
backdrop-filter: blur(6px);
}
.wish-panel {
position: absolute;
top: 0; right: 0;
width: min(380px, 100vw);
height: 100vh;
background: #fff;
box-shadow: -20px 0 60px rgba(0,0,0,0.3);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.wish-drawer:not([hidden]) .wish-panel { transform: translateX(0); }
.wish-head {
padding: 18px 20px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--color-border-light);
}
.wish-head h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 24px;
font-weight: 400;
margin: 0;
color: var(--color-dark);
}
.wish-head .quickview-close { position: static; box-shadow: none; background: var(--color-bg-alt); }
.wish-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.wish-empty {
text-align: center;
padding: 60px 20px;
color: var(--color-text-secondary);
}
.wish-empty h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px;
margin: 14px 0 6px;
color: var(--color-dark);
}
.wish-empty p { font-size: 13px; margin: 0; }
.wish-item {
display: flex; align-items: center; gap: 12px;
padding: 10px;
border-radius: 12px;
text-decoration: none;
color: var(--color-text);
transition: background 0.15s ease;
position: relative;
}
.wish-item:hover { background: var(--color-bg-alt); }
.wish-item + .wish-item { margin-top: 4px; }
.wish-img {
width: 56px; height: 56px;
border-radius: 10px;
background-size: cover;
background-position: center;
background-color: var(--color-border-light);
flex-shrink: 0;
}
.wish-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wish-info strong { font-size: 14px; color: var(--color-dark); }
.wish-info span { font-size: 12px; color: var(--color-text-secondary); }
.wish-remove {
width: 28px; height: 28px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--color-text-secondary);
font-size: 18px;
cursor: pointer;
}
.wish-remove:hover { background: rgba(255,107,107,0.15); color: #FF6B6B; }
/* #33 — Alerts section */
.alerts-section { padding: 60px 0; background: #fafaf7; }
.alerts-card {
background: #fff;
border-radius: 24px;
box-shadow: 0 12px 40px rgba(7,17,34,0.06);
padding: 40px;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
align-items: center;
}
.alerts-info h2 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(28px, 4vw, 40px);
font-weight: 400;
color: var(--color-dark);
margin: 8px 0 12px;
letter-spacing: -0.5px;
line-height: 1.05;
}
.alerts-info h2 em { font-style: italic; color: var(--color-primary); }
.alerts-info p { color: var(--color-text-secondary); margin: 0; }
.alerts-form { display: flex; flex-direction: column; gap: 12px; }
.alerts-form .form-group { margin: 0; }
.alerts-form .btn { margin-top: 6px; }
.alert-success {
text-align: center;
padding: 24px;
}
.alert-success h4 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px;
font-weight: 400;
color: var(--color-dark);
margin: 8px 0 4px;
}
.alert-success p { color: var(--color-text-secondary); margin: 0; font-size: 14px; }
@media (max-width: 768px) {
.alerts-card { grid-template-columns: 1fr; padding: 28px; }
.recent-card { min-width: 200px; }
}
/* ========================================================
LOTES 9 + 10 — Trip planner & Mobile UX (Mejoras #31 #34 #36 #38)
======================================================== */
/* #36 — Header collapse */
.site-header {
transition: transform 0.3s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled {
background: rgba(255,255,255,0.96);
backdrop-filter: blur(14px);
box-shadow: 0 4px 16px rgba(7,17,34,0.06);
}
/* #34 — Mobile bottom search dock */
.mobile-search-dock {
display: none;
position: fixed;
bottom: 12px;
left: 12px; right: 12px;
z-index: 950;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(16px);
border: 1px solid var(--color-border-light);
border-radius: 60px;
padding: 8px;
box-shadow: 0 14px 36px rgba(7,17,34,0.18);
transform: translateY(140%);
opacity: 0;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;
align-items: center;
gap: 8px;
}
.mobile-search-dock.is-visible {
transform: translateY(0);
opacity: 1;
}
@media (max-width: 768px) {
.mobile-search-dock { display: flex; }
}
.mobile-dock-search {
flex: 1;
display: flex; align-items: center; gap: 10px;
background: var(--color-bg-alt);
border: none;
border-radius: 50px;
padding: 12px 18px;
color: var(--color-dark);
font-weight: 500;
cursor: pointer;
text-align: left;
font-size: 14px;
}
.mobile-dock-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--color-bg-alt);
border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--color-dark);
position: relative;
flex-shrink: 0;
}
.mobile-dock-icon .dock-badge {
position: absolute;
top: 0; right: 0;
background: #FF6B6B;
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
transform: scale(0);
transition: transform 0.2s ease;
}
.mobile-dock-icon .dock-badge.has-items { transform: scale(1); }
/* Trip planner add button on cards */
.listing-trip {
position: absolute;
top: 56px;
right: 12px;
z-index: 5;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease, border-color 0.2s ease;
opacity: 0;
transform: translateY(-4px);
}
.listing-card:hover .listing-trip {
opacity: 1;
transform: translateY(0);
}
.listing-trip:hover {
background: rgba(255,255,255,0.35);
}
.listing-trip.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
}
/* Trip drawer items */
.trip-list {
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 16px;
}
.trip-item {
display: flex; align-items: center; gap: 12px;
padding: 12px;
border: 1px solid var(--color-border-light);
border-radius: 14px;
background: #fff;
position: relative;
}
.trip-step {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 13px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.trip-img {
width: 50px; height: 50px;
border-radius: 10px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.trip-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.trip-info strong { font-size: 14px; color: var(--color-dark); }
.trip-controls {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.trip-controls input[type="date"] {
font-size: 12px;
padding: 4px 8px;
border: 1px solid var(--color-border);
border-radius: 6px;
}
.trip-controls input[type="number"] {
width: 56px;
font-size: 12px;
padding: 4px 8px;
border: 1px solid var(--color-border);
border-radius: 6px;
}
.trip-days-label { font-size: 12px; color: var(--color-text-secondary); }
.trip-actions {
display: flex; gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--color-border-light);
}
.trip-actions .btn { flex: 1; justify-content: center; }
/* #38 — Lightbox */
.viayo-lightbox {
position: fixed; inset: 0;
z-index: 99999;
background: rgba(0,0,0,0.92);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
cursor: zoom-out;
}
.viayo-lightbox.is-open { opacity: 1; }
.viayo-lightbox img {
max-width: 95vw;
max-height: 95vh;
object-fit: contain;
transform: scale(0.95);
transition: transform 0.3s ease;
}
.viayo-lightbox.is-open img { transform: scale(1); }
.viayo-lightbox-close {
position: absolute;
top: 20px; right: 20px;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
}
/* Padding bottom on mobile to avoid dock overlap */
@media (max-width: 768px) {
.site-main { padding-bottom: 90px; }
.whatsapp-float { bottom: 90px !important; }
}
/* ========================================================
LOTE 11 — Reviews real (Mejoras #18 #19)
======================================================== */
.reviews-section { padding: 80px 0; background: #fafaf7; }
.reviews-header {
text-align: center;
max-width: 720px;
margin: 0 auto 40px;
}
.reviews-header h2 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 400;
color: var(--color-dark);
margin: 12px 0;
letter-spacing: -1px;
}
.reviews-header h2 em { color: var(--color-primary); font-style: italic; }
.reviews-header p { color: var(--color-text-secondary); margin: 0; }
.reviews-rail {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 8px 4px 24px;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.reviews-rail::-webkit-scrollbar { height: 6px; }
.reviews-rail::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
.review-card {
flex-shrink: 0;
width: min(360px, 85vw);
background: #fff;
border-radius: 18px;
padding: 22px;
box-shadow: 0 8px 24px rgba(7,17,34,0.06);
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 14px;
border: 1px solid var(--color-border-light);
}
.review-video {
aspect-ratio: 9 / 12;
background: var(--color-dark);
border-radius: 14px;
overflow: hidden;
position: relative;
background-image: linear-gradient(135deg, #4FBDB3, #0B3C49);
margin-bottom: 4px;
}
.review-video-overlay {
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.35);
transition: background 0.2s ease;
}
.review-video-overlay:hover { background: rgba(0,0,0,0.55); }
.review-play {
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
border: none;
color: var(--color-primary);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
transition: transform 0.2s ease;
}
.review-play:hover { transform: scale(1.08); }
.review-rating-row {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
}
.review-stars { display: inline-flex; gap: 2px; }
.review-verified {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px;
color: var(--color-primary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.review-text {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
color: var(--color-dark);
margin: 0;
font-style: italic;
}
.review-author {
display: flex; align-items: center; gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--color-border-light);
}
.review-author img {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
}
.review-author strong {
display: block;
font-size: 14px;
color: var(--color-dark);
}
.review-author span {
display: block;
font-size: 12px;
color: var(--color-text-secondary);
}
.reviews-aggregate {
margin-top: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.agg-num {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 56px;
font-weight: 400;
color: var(--color-primary);
line-height: 1;
letter-spacing: -1px;
}
.agg-stars { display: block; color: #FFB400; font-size: 18px; letter-spacing: 2px; }
.agg-label { display: block; font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
/* ========================================================
LOTE 12 — Editorial (Mejoras #39 #40 #41 #42)
======================================================== */
/* #41 — Calendario "mejor mes" */
.calendar-section { padding: 80px 0; background: #fff; }
.calendar-table {
border: 1px solid var(--color-border-light);
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: 0 8px 24px rgba(7,17,34,0.04);
}
.cal-row {
display: grid;
grid-template-columns: 200px repeat(12, 1fr);
}
.cal-row + .cal-row { border-top: 1px solid var(--color-border-light); }
.cal-cell {
padding: 14px 8px;
text-align: center;
font-size: 12px;
color: var(--color-text-secondary);
display: flex; align-items: center; justify-content: center;
border-left: 1px solid var(--color-border-light);
}
.cal-cell:first-child { border-left: none; }
.cal-head { background: var(--color-bg-alt); }
.cal-head .cal-cell {
font-weight: 700;
color: var(--color-dark);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cal-dest {
justify-content: flex-start !important;
text-align: left !important;
padding-left: 16px !important;
gap: 10px;
font-weight: 600;
color: var(--color-dark);
font-size: 13px;
}
.cal-dest img {
width: 32px; height: 32px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.cal-best {
background: rgba(79, 189, 179, 0.12);
color: var(--color-primary);
}
.cal-mid { background: #fff; }
.cal-legend {
margin-top: 16px;
text-align: center;
font-size: 12px;
color: var(--color-text-secondary);
}
.cal-leg-best, .cal-leg-mid {
display: inline-block;
width: 14px; height: 14px;
border-radius: 3px;
vertical-align: middle;
margin-right: 4px;
}
.cal-leg-best { background: rgba(79, 189, 179, 0.4); }
.cal-leg-mid { background: var(--color-bg-alt); border: 1px solid var(--color-border-light); }
@media (max-width: 768px) {
.calendar-table { overflow-x: auto; }
.cal-row { grid-template-columns: 140px repeat(12, 60px); min-width: 860px; }
}
/* #42 — Stories rail */
.stories-rail-section { padding: 24px 0; background: #fff; border-bottom: 1px solid var(--color-border-light); }
.stories-rail-section .container {
max-width: none;
padding-left: 5vw;
padding-right: 5vw;
}
@media (max-width: 768px) {
.stories-rail-section .container,
.categories-bar .container {
padding-left: 4%;
padding-right: 4%;
}
}
.stories-rail {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 6px;
scrollbar-width: none;
justify-content: space-between;
}
@media (max-width: 768px) {
.stories-rail { justify-content: flex-start; }
}
.stories-rail::-webkit-scrollbar { display: none; }
.story-bubble {
background: none; border: none;
cursor: pointer;
display: flex; flex-direction: column; align-items: center;
gap: 6px;
flex-shrink: 0;
padding: 0;
}
.story-ring {
width: 72px; height: 72px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, #FF6B6B, #C9A45E, #4FBDB3);
display: flex;
}
.story-ring img {
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
}
.story-name { font-size: 11px; color: var(--color-dark); font-weight: 600; max-width: 80px; text-align: center; line-height: 1.2; }
/* Stories viewer */
.stories-viewer {
position: fixed; inset: 0;
z-index: 100000;
background: rgba(0,0,0,0.95);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
display: flex; align-items: center; justify-content: center;
}
.stories-viewer:not([hidden]) { opacity: 1; pointer-events: auto; }
.stories-progress {
position: absolute;
top: 12px; left: 12px; right: 12px;
display: flex; gap: 4px;
z-index: 5;
}
.sp-bar {
flex: 1; height: 3px;
background: rgba(255,255,255,0.25);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.sp-bar.is-done { background: #fff; }
.sp-bar.is-active::after {
content: '';
position: absolute; left: 0; top: 0;
height: 100%; background: #fff;
width: 0;
animation: sp-fill 5s linear forwards;
}
@keyframes sp-fill { to { width: 100%; } }
.stories-close {
position: absolute;
top: 28px; right: 20px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
border: none;
color: #fff;
font-size: 22px;
cursor: pointer;
z-index: 6;
}
.stories-content {
position: relative;
width: 100%;
height: 100vh;
max-width: 460px;
overflow: hidden;
cursor: pointer;
}
.stories-content img {
width: 100%; height: 100%;
object-fit: cover;
}
.story-info {
position: absolute;
bottom: 36px; left: 20px; right: 20px;
color: #fff;
text-align: center;
}
.story-info h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 32px;
font-weight: 400;
margin: 0 0 4px;
letter-spacing: -0.5px;
}
.story-info p { margin: 0 0 16px; opacity: 0.85; font-size: 14px; }
.story-info .btn { background: rgba(255,255,255,0.95); color: var(--color-dark); padding: 10px 20px; border-radius: 50px; }
.story-info .btn:hover { background: #fff; }
/* #40 — Travel feed masonry */
.feed-section { padding: 80px 0; background: #fff; }
.feed-masonry {
column-count: 4;
column-gap: 14px;
}
@media (max-width: 1024px) { .feed-masonry { column-count: 3; } }
@media (max-width: 700px) { .feed-masonry { column-count: 2; column-gap: 8px; } }
.feed-item {
display: block;
margin-bottom: 14px;
break-inside: avoid;
position: relative;
border-radius: 14px;
overflow: hidden;
cursor: zoom-in;
}
.feed-item img {
width: 100%; height: auto; display: block;
transition: transform 0.4s ease;
}
.feed-item:hover img { transform: scale(1.05); }
.feed-tag {
position: absolute;
bottom: 10px; left: 10px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
color: var(--color-dark);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.feed-item:hover .feed-tag { opacity: 1; transform: translateY(0); }
/* #39 — Single guia article */
.guia-article { background: #fff; }
.guia-hero {
position: relative;
height: 70vh;
min-height: 480px;
overflow: hidden;
}
.guia-hero-img, .guia-hero img {
width: 100%; height: 100%;
object-fit: cover;
}
.guia-hero-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 80px 0 60px;
background: linear-gradient(180deg, transparent 0%, rgba(7,17,34,0.85) 100%);
color: #fff;
}
.guia-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(40px, 7vw, 80px);
font-weight: 400;
line-height: 1.05;
margin: 12px 0;
letter-spacing: -1.5px;
}
.guia-meta {
font-size: 14px;
opacity: 0.85;
display: flex; flex-wrap: wrap; gap: 8px;
}
.guia-dot { opacity: 0.5; }
.guia-body {
padding: 60px 20px;
max-width: 720px;
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
}
.guia-body h2, .guia-body h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-weight: 400;
color: var(--color-dark);
letter-spacing: -0.5px;
}
.guia-body h2 { font-size: 36px; margin: 48px 0 16px; }
.guia-body h3 { font-size: 28px; margin: 32px 0 12px; }
.guia-body img { border-radius: 12px; margin: 24px 0; }
.guia-body blockquote {
border-left: 3px solid var(--color-primary);
padding: 8px 24px;
margin: 32px 0;
font-style: italic;
color: var(--color-dark);
font-size: 22px;
font-family: 'Instrument Serif', Georgia, serif;
}
.guia-footer {
margin-top: 60px;
padding: 40px;
background: var(--color-bg-alt);
border-radius: 18px;
text-align: center;
}
.guia-footer p { font-size: 16px; color: var(--color-dark); margin-bottom: 18px; }
.guia-related { padding: 60px 0; background: var(--color-bg-alt); }
.guia-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 24px;
}
.guia-mini {
text-decoration: none;
color: var(--color-dark);
border-radius: 14px;
overflow: hidden;
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.guia-mini:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(7,17,34,0.08); }
.guia-mini img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.guia-mini h3 { padding: 16px; margin: 0; font-size: 16px; font-weight: 600; }
@media (max-width: 768px) { .guia-related-grid { grid-template-columns: 1fr; } }
/* ========================================================
LOTE 13 — Wayfinding (Mejoras #44 #47)
======================================================== */
/* #44 — Mega menu (full width, debajo del header, con hover bridge) */
.has-mega { position: static; }
.site-header { position: relative; z-index: 100; }
.mega-menu {
position: absolute;
top: 100%; left: 0; right: 0;
width: 100vw;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid var(--color-border-light);
box-shadow: 0 18px 32px rgba(7,17,34,0.08);
padding: 32px 5vw 36px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
z-index: 99;
}
/* === Mega-line: single-row pills (Option A) === */
.mega-menu.mega-line { padding: 14px 0; }
.mega-menu.mega-line .container { max-width: 1180px; padding: 0 24px; }
.region-pills {
display: flex; align-items: center;
gap: 6px; list-style: none; padding: 0; margin: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.region-pills::-webkit-scrollbar { display: none; }
.region-pills li { flex-shrink: 0; }
.region-pills li a {
display: inline-flex; align-items: center;
padding: 9px 18px; border-radius: 999px;
font-size: 14px; font-weight: 600;
color: var(--color-text);
border: 1px solid transparent;
transition: all 0.2s ease;
text-decoration: none;
white-space: nowrap;
}
.region-pills li a:hover {
background: #e9f7f4;
border-color: #0a8a78;
color: #003f38;
}
.region-pills li.region-cta { margin-left: auto; padding-left: 16px; }
.region-pills li.region-cta a {
background: #003f38; color: #fff;
box-shadow: 0 8px 18px rgba(0,63,56,0.18);
}
.region-pills li.region-cta a:hover {
background: #064f46; transform: translateY(-1px);
border-color: transparent;
color: #fff;
}
@media (max-width: 760px) {
.region-pills li.region-cta { margin-left: 6px; padding-left: 0; }
.region-pills li a { padding: 8px 14px; font-size: 13px; }
}
/* Bridge invisible para mantener el hover entre el nav y el menu */
.mega-menu::before {
content: '';
position: absolute;
top: -24px;
left: 0;
right: 0;
height: 24px;
background: transparent;
}
.has-mega:hover > .mega-menu,
.has-mega:focus-within > .mega-menu,
.mega-menu:hover {
opacity: 1;
visibility: visible;
}
.mega-menu .container {
max-width: none;
padding: 0;
}
.mega-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
}
.mega-col h5 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-primary);
font-weight: 700;
margin: 12px 0 10px;
}
.mega-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mega-col a {
color: var(--color-text);
text-decoration: none;
font-size: 13px;
transition: color 0.15s ease;
}
.mega-col a:hover { color: var(--color-primary); }
.mega-cover {
aspect-ratio: 4 / 3;
border-radius: 10px;
background-size: cover;
background-position: center;
background-color: var(--color-bg-alt);
}
.mega-cta {
background: linear-gradient(135deg, #0B3C49 0%, #1a5566 100%);
color: #fff;
padding: 20px;
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
}
.mega-cta h5 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 18px;
font-weight: 400;
text-transform: none;
letter-spacing: -0.3px;
color: #fff;
margin: 0;
}
.mega-cta p { font-size: 12px; opacity: 0.85; margin: 0 0 8px; line-height: 1.4; }
@media (max-width: 1024px) {
.mega-menu { display: none; }
}
/* #47 — Sobre nosotros */
.about-hero {
position: relative;
min-height: 70vh;
display: flex;
align-items: center;
color: #fff;
overflow: hidden;
}
.about-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.about-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7,17,34,0.45) 0%, rgba(7,17,34,0.85) 100%);
}
.about-hero-content {
position: relative;
z-index: 2;
max-width: 720px;
padding: 80px 0;
}
.about-hero-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(42px, 7vw, 80px);
font-weight: 400;
line-height: 1.05;
margin: 12px 0 20px;
letter-spacing: -1.5px;
}
.about-hero-title em { color: var(--color-primary-light); font-style: italic; }
.about-hero-sub {
font-size: clamp(17px, 1.6vw, 20px);
opacity: 0.9;
line-height: 1.5;
max-width: 560px;
}
.about-mission { padding: 100px 0; background: #fff; }
.about-mission-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 60px;
align-items: center;
}
.about-mission-grid h2 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 400;
color: var(--color-dark);
margin: 12px 0 24px;
letter-spacing: -1px;
line-height: 1.05;
}
.about-mission-grid h2 em { font-style: italic; color: var(--color-primary); }
.about-lead { font-size: 18px; color: var(--color-dark); line-height: 1.6; margin-bottom: 16px; font-weight: 500; }
.about-mission-grid p { color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 14px; }
.about-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.about-stat {
background: var(--color-bg-alt);
border-radius: 16px;
padding: 24px;
text-align: center;
}
.about-stat .stat-num {
display: block;
color: var(--color-primary);
font-size: clamp(32px, 4vw, 48px);
line-height: 1;
}
.about-stat .stat-label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-secondary);
margin-top: 6px;
font-weight: 600;
}
.about-team { padding: 100px 0; background: #fafaf7; }
.team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 820px;
margin: 0 auto;
}
.team-card { padding: 32px 28px; }
.team-card img {
width: 120px; height: 120px;
border: 4px solid var(--color-primary-light);
}
.team-card h3 { font-size: 20px; margin-bottom: 6px; }
.team-card {
background: #fff;
border-radius: 16px;
padding: 24px;
text-align: center;
border: 1px solid var(--color-border-light);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(7,17,34,0.08); }
.team-card img {
width: 88px; height: 88px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 12px;
display: block;
border: 3px solid var(--color-primary-light);
}
.team-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--color-dark); }
.team-role {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--color-primary);
font-weight: 600;
margin-bottom: 12px;
}
.team-card p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; margin: 0; }
.about-map { padding: 100px 0; background: #fff; }
.continent-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.continent-tile {
aspect-ratio: 3 / 4;
background-size: cover;
background-position: center;
border-radius: 16px;
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.3s ease;
}
.continent-tile:hover { transform: scale(1.03); }
.continent-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(7,17,34,0.85) 100%);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 18px;
color: #fff;
}
.continent-overlay h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 26px;
font-weight: 400;
margin: 0;
letter-spacing: -0.5px;
}
.continent-overlay span {
font-size: 12px;
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 1px;
}
.about-cta { padding: 80px 0 100px; background: #fafaf7; }
.about-cta-card {
background: linear-gradient(135deg, #0B3C49 0%, #1a5566 100%);
color: #fff;
border-radius: 24px;
padding: 60px 40px;
text-align: center;
box-shadow: 0 20px 60px rgba(11, 60, 73, 0.18);
}
.about-cta-card h2 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(30px, 4vw, 44px);
font-weight: 400;
margin: 0 0 12px;
color: #fff;
letter-spacing: -0.5px;
}
.about-cta-card p { color: rgba(255,255,255,0.8); margin: 0; font-size: 16px; }
@media (max-width: 768px) {
.about-mission-grid { grid-template-columns: 1fr; gap: 32px; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.continent-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ========================================================
Legal pages (Privacidad / Terminos / Cookies)
======================================================== */
.legal-wrap { padding: 80px 0 60px; background: #fff; min-height: 70vh; }
.legal-head { text-align: center; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--color-border-light); }
.legal-head h1 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(36px, 5vw, 56px);
font-weight: 400;
color: var(--color-dark);
margin: 12px 0 8px;
letter-spacing: -1px;
}
.legal-meta { color: var(--color-text-secondary); font-size: 13px; margin: 0; }
.legal-body { font-size: 16px; line-height: 1.7; color: var(--color-text); }
.legal-body h2 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 28px;
font-weight: 400;
color: var(--color-dark);
margin: 36px 0 12px;
letter-spacing: -0.3px;
}
.legal-body h3 { font-size: 18px; font-weight: 700; color: var(--color-dark); margin: 24px 0 8px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { padding-left: 24px; margin: 0 0 14px; }
.legal-body li { margin-bottom: 6px; }
.legal-body em { color: var(--color-text-secondary); font-size: 13px; display: block; margin-top: 32px; padding-top: 20px; border-top: 1px dashed var(--color-border); }
/* Mega menu link styles */
.mega-cover-link { display: block; text-decoration: none; }
.mega-cover-link:hover .mega-cover { transform: scale(1.04); }
.mega-cover { transition: transform 0.3s ease; }
.mega-col h5 a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.mega-col h5 a:hover { color: var(--color-primary); }
/* ========================================================
Continente template (mapa + paises + paquetes)
======================================================== */
.continent-hero {
position: relative;
min-height: 60vh;
display: flex; align-items: flex-end;
overflow: hidden;
color: #fff;
padding-bottom: 60px;
}
.continent-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transform: scale(1.05);
animation: hero-zoom-out 9s ease forwards;
}
.continent-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7,17,34,0.35) 0%, rgba(7,17,34,0.85) 100%);
}
.continent-hero-content { position: relative; z-index: 2; }
.continent-hero-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(48px, 9vw, 110px);
font-weight: 400;
line-height: 1;
margin: 12px 0 14px;
letter-spacing: -2px;
}
.continent-hero-tag {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 400;
color: var(--color-primary-light);
margin: 0;
max-width: 720px;
}
.continent-hero-tag em { font-style: italic; }
.continent-intro { padding: 80px 0; background: #fff; }
.continent-intro-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 60px;
align-items: start;
}
.continent-lead {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(22px, 2.6vw, 32px);
font-weight: 400;
color: var(--color-dark);
line-height: 1.35;
margin: 14px 0 0;
font-style: italic;
}
.continent-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.fact-item {
background: var(--color-bg-alt);
border-radius: 14px;
padding: 18px;
display: flex; flex-direction: column; gap: 4px;
}
.fact-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--color-text-secondary);
font-weight: 700;
}
.fact-value {
font-size: 14px;
color: var(--color-dark);
font-weight: 600;
line-height: 1.4;
}
.continent-map-section { padding: 60px 0; background: #fafaf7; }
.continent-map-wrap {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(7,17,34,0.1);
}
.continent-countries { padding: 80px 0; background: #fff; }
.countries-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.country-card {
background: #fff;
border: 1px solid var(--color-border-light);
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.country-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(7,17,34,0.1);
}
.country-img {
aspect-ratio: 16 / 10;
background-size: cover; background-position: center;
position: relative;
}
.country-img-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 20px;
background: linear-gradient(180deg, transparent 0%, rgba(7,17,34,0.85) 100%);
color: #fff;
}
.country-img-overlay h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 28px;
font-weight: 400;
margin: 0 0 2px;
letter-spacing: -0.5px;
}
.country-img-overlay span {
font-size: 13px;
opacity: 0.85;
}
.country-body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.country-actions-top {
display: flex; gap: 8px; flex-wrap: wrap;
}
.country-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--color-bg-alt);
color: var(--color-dark);
border-radius: 16px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.country-link:hover {
background: var(--color-primary);
color: #fff;
}
.country-packages {
background: rgba(79, 189, 179, 0.05);
border-radius: 12px;
padding: 14px;
}
.country-packages--empty {
background: rgba(11, 60, 73, 0.04);
}
.cp-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-primary);
font-weight: 700;
margin-bottom: 6px;
display: block;
}
.country-packages ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.country-packages li a {
color: var(--color-text);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: color 0.15s ease;
}
.country-packages li a:hover { color: var(--color-primary); }
.country-actions { margin-top: auto; }
.country-actions .btn { width: 100%; justify-content: center; }
@media (max-width: 768px) {
.continent-intro-grid { grid-template-columns: 1fr; gap: 32px; }
.continent-facts { grid-template-columns: 1fr 1fr; gap: 12px; }
.countries-grid { grid-template-columns: 1fr; }
}
/* ========================================================
ALL COUNTRIES GRID (catálogo completo del continente)
======================================================== */
.continent-all-countries {
padding: 80px 0 100px;
background: linear-gradient(180deg, #fff 0%, var(--color-bg-alt) 100%);
}
.all-countries-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.acc-tile {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--color-border-light);
border-radius: 12px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.acc-tile:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(7,17,34,0.08);
border-color: var(--color-primary-light);
}
.acc-tile.is-featured {
border-color: var(--color-primary);
background: linear-gradient(135deg, #fff 0%, rgba(79,189,179,0.04) 100%);
position: relative;
}
.acc-tile.is-featured::before {
content: '★';
position: absolute;
top: 6px; right: 8px;
color: var(--color-primary);
font-size: 11px;
line-height: 1;
}
.acc-flag {
flex-shrink: 0;
width: 48px; height: 36px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
background: var(--color-bg-alt);
}
.acc-flag img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.acc-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.acc-info strong {
font-size: 13px;
color: var(--color-dark);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.acc-info span {
font-size: 11px;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.acc-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.acc-btn {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--color-bg-alt);
color: var(--color-text-secondary);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.acc-btn:hover {
background: var(--color-dark);
color: #fff;
}
.acc-btn-quote:hover {
background: var(--color-primary);
color: #fff;
}
@media (max-width: 1024px) {
.all-countries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.all-countries-grid { grid-template-columns: 1fr; gap: 8px; }
.acc-actions .acc-btn:not(.acc-btn-quote) { display: none; }
}
/* ========================================================
CONTINENT — Mejoras #1-#10 (filtros, mapa, clima, combos, visa, compare)
======================================================== */
/* Toolbar (search + chips) */
.acc-toolbar {
background: #fff;
border-radius: 16px;
padding: 14px;
margin-bottom: 28px;
box-shadow: 0 4px 14px rgba(7,17,34,0.05);
border: 1px solid var(--color-border-light);
display: flex;
flex-direction: column;
gap: 14px;
position: sticky; top: 90px; z-index: 50;
}
.acc-search {
display: flex; align-items: center; gap: 8px;
background: var(--color-bg-alt);
border-radius: 10px;
padding: 8px 12px;
}
.acc-search svg { color: var(--color-text-secondary); flex-shrink: 0; }
.acc-search input {
flex: 1;
border: none;
background: transparent;
font-size: 14px;
outline: none;
color: var(--color-text);
}
.acc-search button {
width: 22px; height: 22px;
border-radius: 50%;
border: none;
background: var(--color-text-secondary);
color: #fff;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
.acc-chips {
display: flex; gap: 6px; overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}
.acc-chip {
padding: 6px 14px;
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
color: var(--color-text);
transition: all 0.15s ease;
}
.acc-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.acc-chip.is-active {
background: var(--color-dark);
color: #fff;
border-color: var(--color-dark);
}
/* Subregion grouping */
.acc-subregion + .acc-subregion { margin-top: 32px; }
.acc-subregion-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px;
font-weight: 400;
color: var(--color-dark);
margin: 0 0 14px;
padding-left: 4px;
border-left: 3px solid var(--color-primary);
padding: 4px 0 4px 12px;
display: flex;
align-items: center;
gap: 10px;
}
.acc-subregion-title span {
background: var(--color-bg-alt);
color: var(--color-text-secondary);
font-size: 11px;
font-family: var(--font);
padding: 2px 8px;
border-radius: 10px;
font-weight: 600;
}
/* Compare button on tile */
.acc-tile { position: relative; }
.acc-compare-btn {
position: absolute;
top: 6px; right: 6px;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(0,0,0,0.4);
color: #fff;
border: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease;
z-index: 2;
}
.acc-tile:hover .acc-compare-btn { opacity: 1; }
.acc-compare-btn:hover { background: var(--color-primary); }
.acc-compare-btn.is-active { opacity: 1; background: var(--color-primary); }
/* Empty state */
.acc-empty {
text-align: center;
padding: 40px 20px;
color: var(--color-text-secondary);
}
.acc-empty button {
background: none; border: none;
color: var(--color-primary);
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
/* Mapa Leaflet */
.continent-leaflet-map {
width: 100%;
height: 520px;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(7,17,34,0.1);
z-index: 1;
}
.viayo-map-marker { background: transparent !important; border: none !important; }
.map-popup { font-family: var(--font); padding: 4px; min-width: 200px; }
.map-popup-flag { margin-bottom: 6px; }
.map-popup-flag img { border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.map-popup strong { display: block; font-size: 14px; color: var(--color-dark); }
.map-popup span { font-size: 12px; color: var(--color-text-secondary); }
.map-popup-actions {
display: flex; gap: 4px; flex-wrap: wrap;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--color-border-light);
}
.map-popup-actions a {
padding: 4px 8px;
background: var(--color-bg-alt);
border-radius: 6px;
text-decoration: none;
font-size: 11px;
color: var(--color-text);
}
.map-popup-actions a.map-popup-cta { background: var(--color-primary); color: #fff; font-weight: 600; }
/* Climate widget on featured cards */
.country-img { position: relative; }
.country-climate {
position: absolute;
top: 12px; right: 12px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 6px 12px;
display: none;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--color-dark);
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
z-index: 2;
}
.country-climate.is-loaded { display: inline-flex; animation: cw-pop 0.4s ease; }
@keyframes cw-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.cw-emoji { font-size: 16px; }
.cw-time { font-size: 11px; color: var(--color-text-secondary); margin-left: 4px; }
/* Combos section */
.combos-section { padding: 80px 0; background: #fafaf7; }
.combos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.combo-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--color-border-light);
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: flex; flex-direction: column;
}
.combo-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(7,17,34,0.1);
}
.combo-img {
aspect-ratio: 16 / 10;
background-size: cover; background-position: center;
position: relative;
}
.combo-img-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 14px;
display: flex; justify-content: flex-end;
background: linear-gradient(180deg, transparent 0%, rgba(7,17,34,0.55) 100%);
}
.combo-duration {
background: rgba(255,255,255,0.95);
color: var(--color-dark);
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.combo-body {
padding: 18px;
display: flex; flex-direction: column; gap: 10px;
flex: 1;
}
.combo-flags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.combo-flags img { width: 24px; height: 18px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.combo-paises { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.combo-name {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px;
font-weight: 400;
color: var(--color-dark);
margin: 0;
letter-spacing: -0.3px;
line-height: 1.15;
}
.combo-tagline {
font-size: 13px;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.4;
}
.combo-highlights {
list-style: none; padding: 0; margin: 4px 0 12px;
display: flex; flex-wrap: wrap; gap: 4px;
}
.combo-highlights li {
font-size: 11px;
background: var(--color-bg-alt);
color: var(--color-text);
padding: 3px 9px;
border-radius: 10px;
}
@media (max-width: 900px) { .combos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .combos-grid { grid-template-columns: 1fr; } }
/* Visa wizard */
.visa-wizard-section { padding: 60px 0; background: #fff; }
.visa-wizard {
background: linear-gradient(135deg, #0B3C49 0%, #1a5566 100%);
color: #fff;
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 50px rgba(11, 60, 73, 0.15);
}
.vw-head h2 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(28px, 4vw, 40px);
font-weight: 400;
color: #fff;
margin: 8px 0 8px;
}
.vw-head em { font-style: italic; color: var(--color-primary-light); }
.vw-head p { color: rgba(255,255,255,0.8); margin: 0 0 24px; }
.vw-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.vw-controls label { font-weight: 600; }
.vw-controls select {
padding: 10px 16px;
border-radius: 10px;
border: none;
background: #fff;
color: var(--color-dark);
font-size: 14px;
font-weight: 600;
cursor: pointer;
min-width: 220px;
}
.vw-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 20px;
}
.vw-summary-item {
background: rgba(255,255,255,0.08);
border-radius: 12px;
padding: 14px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.vw-summary-item .vw-icon { font-size: 22px; }
.vw-summary-item strong { font-size: 24px; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.vw-summary-item span { font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; }
.vw-list h4 {
font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
opacity: 0.7; margin: 20px 0 12px; font-weight: 700;
}
.vw-row {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
margin-bottom: 4px;
}
.vw-row img { width: 32px; height: 24px; border-radius: 2px; }
.vw-row strong { font-size: 14px; font-weight: 600; }
.vw-status {
padding: 4px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vw-disclaimer {
font-size: 11px;
color: rgba(255,255,255,0.55);
text-align: center;
margin-top: 20px;
}
/* Compare types badge */
.cmp-type {
background: rgba(79, 189, 179, 0.12);
color: var(--color-primary);
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
text-transform: capitalize;
}
@media (max-width: 768px) {
.visa-wizard { padding: 24px; }
.vw-controls { flex-direction: column; align-items: flex-start; }
.vw-controls select { width: 100%; }
}
/* ========================================================
CONTINENT PAGE — 20 mejoras (UI 1-10 + UX 1-10)
======================================================== */
/* UX #1 — In-page navigation sticky */
.continent-pagenav {
position: sticky; top: 80px; z-index: 88;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--color-border-light);
transition: top 0.3s ease;
}
.site-header.is-hidden ~ .site-main .continent-pagenav { top: 0; }
.continent-pagenav ul {
list-style: none; padding: 0; margin: 0;
display: flex; gap: 24px;
overflow-x: auto;
scrollbar-width: none;
}
.continent-pagenav ul::-webkit-scrollbar { display: none; }
.continent-pagenav a {
display: block;
padding: 14px 0;
color: var(--color-text-secondary);
text-decoration: none;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.continent-pagenav a:hover { color: var(--color-text); }
.continent-pagenav a.is-active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
/* UI #1 — Hero wave divider */
.hero-wave {
position: absolute; bottom: -1px; left: 0; right: 0;
width: 100%; height: 80px;
display: block;
}
@media (max-width: 768px) {
.hero-wave { height: 50px; }
}
/* UI #3 — Hero stat strip */
.hero-stat-strip {
margin-top: 32px;
padding: 14px 22px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 18px;
color: #fff;
flex-wrap: wrap;
}
.hss-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hss-item strong {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px;
font-weight: 400;
line-height: 1;
}
.hss-item span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.8;
}
.hss-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.2); }
@media (max-width: 600px) {
.hero-stat-strip { padding: 12px 14px; gap: 10px; border-radius: 16px; }
.hss-item strong { font-size: 18px; }
.hss-divider { display: none; }
}
/* UI #2 — Section number */
.sec-num {
display: inline-block;
margin-right: 8px;
color: var(--color-primary);
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: 1.3em;
font-weight: 400;
letter-spacing: 0;
}
.section-eyebrow .sec-num::after {
content: '';
display: inline-block;
width: 24px;
height: 1px;
background: var(--color-primary);
vertical-align: middle;
margin-left: 6px;
margin-right: 4px;
}
/* UI #4 — Featured countries v2 (overlap design) */
.country-card.v2 {
background: #fff;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--color-border-light);
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: flex; flex-direction: column;
}
.country-card.v2:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(7,17,34,0.1); }
.country-img-v2 {
aspect-ratio: 16 / 11;
background-size: cover; background-position: center;
position: relative;
}
.country-info-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 18px 18px 16px;
background: linear-gradient(180deg, transparent 0%, rgba(7,17,34,0.85) 70%);
color: #fff;
}
.country-info-overlay h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 28px;
font-weight: 400;
margin: 0 0 2px;
letter-spacing: -0.5px;
color: #fff;
}
.country-capital { font-size: 13px; opacity: 0.85; }
.country-actions-row {
display: flex; align-items: center; gap: 8px;
margin-top: 8px;
}
.country-link-mini {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
border-radius: 50%;
text-decoration: none;
font-size: 12px;
transition: background 0.15s ease;
}
.country-link-mini:hover { background: rgba(255,255,255,0.32); }
.country-pkg-count {
margin-left: auto;
background: var(--color-primary);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 10px;
}
.country-fav {
position: absolute;
top: 14px; right: 14px;
z-index: 4;
}
.country-body-v2 {
padding: 16px 18px 18px;
display: flex; flex-direction: column; gap: 12px;
}
.country-paq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.country-paq-list li a {
color: var(--color-text);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: color 0.15s ease;
}
.country-paq-list li a:hover { color: var(--color-primary); }
.country-no-paq { font-size: 13px; color: var(--color-text-secondary); margin: 0; }
/* UI #5 — Climate skeleton */
.country-climate {
position: absolute; top: 14px; left: 14px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 6px 12px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--color-dark);
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
z-index: 3;
min-width: 70px;
min-height: 28px;
}
.country-climate.is-skeleton .cw-skel {
display: block;
width: 60px;
height: 14px;
background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.05) 75%);
background-size: 200% 100%;
animation: cw-shimmer 1.4s ease-in-out infinite;
border-radius: 4px;
}
@keyframes cw-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.country-climate.is-loaded .cw-skel { display: none; }
/* UI #6 — Combo route */
.combo-route {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.route-flag img {
width: 28px; height: 21px;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
display: block;
}
.route-arrow {
width: 30px; height: 16px;
color: var(--color-primary);
flex-shrink: 0;
}
/* UI #7 — Color-coded subregion */
.acc-subregion-title {
border-left-color: var(--sub-color, var(--color-primary)) !important;
}
.acc-subregion-title span {
background: color-mix(in srgb, var(--sub-color, var(--color-primary)) 15%, transparent);
color: var(--sub-color, var(--color-primary));
}
/* UI #8 — Sticky toolbar shadow when stuck */
.acc-toolbar.is-stuck {
box-shadow: 0 8px 24px rgba(7,17,34,0.12);
border-color: transparent;
}
/* UI #9 — Visa wizard collapsible */
.visa-wizard { padding: 0; overflow: hidden; }
.vw-toggle {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 20px 28px;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
font-family: inherit;
text-align: left;
}
.vw-toggle-icon { font-size: 24px; flex-shrink: 0; }
.vw-toggle-text { flex: 1; font-size: 14px; }
.vw-toggle-text strong { display: block; font-size: 16px; margin-bottom: 2px; }
.vw-toggle-text em { font-style: normal; opacity: 0.75; font-size: 13px; }
.vw-toggle-chevron {
font-size: 20px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.visa-wizard:not(.is-collapsed) .vw-toggle-chevron { transform: rotate(180deg); }
.vw-body {
max-height: 1200px;
padding: 0 28px 32px;
transition: max-height 0.4s ease, padding 0.4s ease;
overflow: hidden;
}
.visa-wizard.is-collapsed .vw-body {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
/* UI #10 — Map height adaptive + zoom controls */
@media (max-width: 768px) {
.continent-leaflet-map { height: 360px; }
}
.leaflet-control-zoom a {
background: #fff !important;
color: var(--color-dark) !important;
border: none !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
font-weight: 700;
}
.leaflet-control-zoom a:hover { background: var(--color-primary) !important; color: #fff !important; }
/* UX #10 — Markers diferenciados */
.viayo-marker { background: transparent !important; border: none !important; }
.vm-pin {
width: 100%; height: 100%;
border-radius: 50%;
box-shadow: 0 4px 14px rgba(0,0,0,0.3);
position: relative;
}
.vm-pin-feat {
border: 3px solid #fff;
overflow: hidden;
}
.vm-pin-feat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-pin-feat .vm-pulse {
position: absolute; inset: -6px;
border-radius: 50%;
border: 2px solid var(--color-primary);
animation: vm-pulse 1.8s ease-out infinite;
pointer-events: none;
}
@keyframes vm-pulse {
0% { transform: scale(0.95); opacity: 0.8; }
100% { transform: scale(1.4); opacity: 0; }
}
.vm-pin-small {
background: var(--color-dark);
border: 2px solid #fff;
width: 14px; height: 14px;
margin: 1px auto;
}
/* UX #2 — Anchor highlight */
.acc-tile.is-highlighted {
animation: tile-highlight 2.2s ease;
z-index: 5;
position: relative;
}
@keyframes tile-highlight {
0% { box-shadow: 0 0 0 0 rgba(79, 189, 179, 0.6); transform: scale(1); }
20% { box-shadow: 0 0 0 12px rgba(79, 189, 179, 0); transform: scale(1.04); }
100% { box-shadow: 0 0 0 0 rgba(79, 189, 179, 0); transform: scale(1); }
}
/* UX #3 — Back to top */
.back-to-top {
position: fixed;
bottom: 90px; right: 20px;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--color-dark);
color: #fff;
border: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
z-index: 800;
transition: transform 0.2s ease;
}
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top[hidden] { display: none; }
/* UX #4 — Wishlist en acc-tile */
.acc-wish-btn {
position: absolute;
top: 6px; right: 32px;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(0,0,0,0.4);
color: #fff;
border: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
z-index: 2;
}
.acc-tile:hover .acc-wish-btn { opacity: 1; }
.acc-wish-btn:hover { background: #FF6B6B; }
.acc-wish-btn.is-active { opacity: 1; background: #FF6B6B; color: #fff; }
.acc-has-pkg {
position: absolute;
bottom: 6px; right: 6px;
font-size: 14px;
z-index: 2;
}
/* UX #7 + #8 — Toolbar with new filters */
.acc-toolbar-row {
display: flex; gap: 12px; align-items: center;
flex-wrap: wrap;
}
.acc-toolbar-row .acc-search { flex: 1; min-width: 220px; }
.acc-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--color-bg-alt);
border-radius: 20px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
user-select: none;
transition: background 0.15s ease, color 0.15s ease;
}
.acc-toggle input { display: none; }
.acc-toggle:hover { background: rgba(79,189,179,0.12); color: var(--color-primary); }
.acc-toggle:has(input:checked) {
background: var(--color-primary);
color: #fff;
}
.acc-month-filter {
padding: 8px 14px;
border-radius: 20px;
border: 1.5px solid var(--color-border);
background: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
color: var(--color-text);
}
/* UX #9 — Toast feedback */
.acc-toast {
position: fixed;
bottom: 100px; left: 50%;
transform: translateX(-50%);
background: var(--color-dark);
color: #fff;
padding: 12px 20px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
z-index: 10005;
animation: toast-pop 0.25s ease;
}
.acc-toast[hidden] { display: none; }
@keyframes toast-pop {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.compare-dock.is-shake {
animation: cmp-shake 0.35s;
}
@keyframes cmp-shake {
0%, 100% { transform: translateX(-50%); }
25% { transform: translateX(calc(-50% - 8px)); }
75% { transform: translateX(calc(-50% + 8px)); }
}
/* ========================================================
FEATURED PAQUETE — Tour por Panamá (diseño guía)
======================================================== */
.featured-paquete {
padding: 80px 0;
background: linear-gradient(180deg, #fafaf7 0%, #fff 100%);
}
.fp-card {
background: #fff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(7, 17, 34, 0.1);
border: 1px solid var(--color-border-light);
}
/* Header band — verde oscuro como el diseño */
.fp-header {
background: #0F4D3F;
color: #fff;
padding: 18px 32px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.fp-header-brand { display: flex; align-items: center; gap: 14px; }
.fp-header-brand img { height: 28px; width: auto; }
.fp-header-tag {
font-size: 13px;
color: rgba(255,255,255,0.85);
font-weight: 500;
line-height: 1.2;
}
.fp-header-tag em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: #6FE3D6; font-size: 1.1em; }
.fp-badge-month {
background: #6FE3D6;
color: #0F4D3F;
padding: 6px 14px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
}
/* Hero block */
.fp-hero {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 0;
background: #fff;
}
.fp-hero-text {
padding: 40px 32px;
display: flex; flex-direction: column; gap: 12px;
}
.fp-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(40px, 6vw, 64px);
font-weight: 400;
line-height: 1.0;
letter-spacing: -1.5px;
color: #0B3C49;
margin: 0;
text-transform: uppercase;
}
.fp-title em {
font-style: italic;
color: #0F4D3F;
display: block;
font-size: 1.3em;
line-height: 0.95;
text-transform: none;
}
.fp-noches {
display: inline-block;
background: #0F4D3F;
color: #fff;
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
align-self: flex-start;
}
.fp-tagline {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: 22px;
color: #0F4D3F;
margin: 12px 0 4px;
line-height: 1.2;
}
.fp-subtagline {
font-size: 14px;
color: var(--color-text-secondary);
margin: 0;
}
.fp-hero-images {
position: relative;
min-height: 320px;
}
.fp-hero-img {
width: 100%; height: 100%;
background-size: cover;
background-position: center;
position: relative;
min-height: 320px;
}
.fp-img-label {
position: absolute;
bottom: 18px; left: 18px;
background: rgba(15, 77, 63, 0.9);
color: #fff;
padding: 6px 14px;
border-radius: 14px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Info cards row */
.fp-info-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--color-border-light);
padding: 0;
}
.fp-info-card {
background: #fff;
padding: 24px;
display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center;
}
.fp-info-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: #0F4D3F;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 24px;
margin-bottom: 6px;
}
.fp-info-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--color-text-secondary);
font-weight: 700;
}
.fp-info-card strong {
font-size: 15px;
color: #0B3C49;
font-weight: 600;
line-height: 1.3;
}
.fp-info-card .fp-price {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 28px;
font-weight: 400;
color: #6FE3D6;
}
.fp-info-stars { font-size: 12px; color: #C9A45E; font-weight: 700; }
.fp-info-sub { font-size: 11px; color: var(--color-text-secondary); }
/* Amenities + Includes grid */
.fp-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
padding: 36px 32px;
border-top: 1px solid var(--color-border-light);
}
.fp-section-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 24px;
font-weight: 400;
color: #0F4D3F;
margin: 0 0 14px;
letter-spacing: -0.3px;
}
.fp-section-desc {
font-size: 14px;
color: var(--color-text);
line-height: 1.55;
margin: 0 0 20px;
max-width: 580px;
}
.fp-amenities {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
.fp-amenity {
display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center;
}
.fp-amenity-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: #0F4D3F;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
}
.fp-amenity-label {
font-size: 11px;
color: var(--color-text);
line-height: 1.3;
}
.fp-includes {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.fp-includes li {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
background: rgba(15, 77, 63, 0.05);
border-radius: 10px;
font-size: 13px;
color: var(--color-text);
font-weight: 500;
}
.fp-includes li::before {
content: '✓';
color: #0F4D3F;
font-weight: 700;
flex-shrink: 0;
width: 20px; height: 20px;
background: #6FE3D6;
border-radius: 50%;
display: inline-flex;
align-items: center; justify-content: center;
font-size: 12px;
}
/* Tours block */
.fp-tours-block {
padding: 0 32px 36px;
}
.fp-tours-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.fp-tour {
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
border-radius: 14px;
position: relative;
overflow: hidden;
transition: transform 0.25s ease;
cursor: pointer;
}
.fp-tour:hover { transform: translateY(-4px); }
.fp-tour-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(7, 17, 34, 0.85) 100%);
color: #fff;
padding: 16px;
display: flex; flex-direction: column; justify-content: flex-end;
gap: 4px;
}
.fp-tour-overlay strong {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 18px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.3px;
}
.fp-tour-overlay span {
font-size: 11px;
opacity: 0.85;
line-height: 1.3;
}
/* CTA band */
.fp-cta-band {
background: linear-gradient(135deg, #0F4D3F 0%, #0B3C49 100%);
color: #fff;
padding: 32px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
}
.fp-cta-price {
display: flex; flex-direction: column; gap: 4px;
}
.fp-cta-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.85;
font-weight: 600;
}
.fp-cta-price strong {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(36px, 5vw, 56px);
font-weight: 400;
line-height: 1;
letter-spacing: -1.5px;
}
.fp-cta-sub { font-size: 13px; opacity: 0.85; }
.fp-cta-actions {
display: flex; gap: 12px;
flex-wrap: wrap;
}
.fp-cta-actions .btn-outline {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,0.4);
}
.fp-cta-actions .btn-outline:hover {
background: rgba(255,255,255,0.1);
border-color: #fff;
}
.fp-cta-actions .btn-primary {
background: #25D366;
border-color: #25D366;
}
.fp-cta-actions .btn-primary:hover { background: #128C7E; border-color: #128C7E; }
@media (max-width: 1024px) {
.fp-hero { grid-template-columns: 1fr; }
.fp-hero-images { min-height: 240px; }
.fp-grid { grid-template-columns: 1fr; }
.fp-amenities { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
.fp-info-cards { grid-template-columns: 1fr; }
.fp-amenities { grid-template-columns: repeat(3, 1fr); }
.fp-tours-grid { grid-template-columns: 1fr; }
.fp-cta-band { grid-template-columns: 1fr; text-align: center; }
.fp-cta-actions { justify-content: center; }
.fp-header { padding: 14px 20px; }
.fp-hero-text { padding: 28px 20px; }
.fp-grid, .fp-tours-block { padding-left: 20px; padding-right: 20px; }
.fp-cta-band { padding: 24px 20px; }
}
@media (max-width: 480px) {
.fp-amenities { grid-template-columns: repeat(2, 1fr); }
}
/* ========================================================
PROPUESTA — Single paquete Tour por Panamá (full width PDF)
======================================================== */
.propuesta-page {
padding: 0;
background: #f4f3ee;
}
.propuesta-card {
width: 100%;
margin: 0;
background: #fff;
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
/* Padding lateral consistente con header/footer (10%) */
.prop-header,
.prop-info-cards,
.prop-gallery,
.prop-location-grid,
.prop-details-grid,
.prop-bottom-grid,
.prop-footer-grid,
.prop-footer-band,
.prop-tours-block {
padding-left: 5vw;
padding-right: 5vw;
}
/* Hero text alineado al 10% izq pero foto va al borde */
.prop-hero-text { padding-left: 5vw; }
/* Header band verde con logo — full width */
.prop-header {
background: #0F4D3F;
padding-top: 22px;
padding-bottom: 22px;
color: #fff;
position: relative;
z-index: 2;
width: 100%;
}
.prop-header-brand { display: flex; align-items: center; gap: 14px; }
.prop-header-brand img { height: 28px; width: auto; }
.prop-header-tag {
font-size: 13px;
color: rgba(255,255,255,0.95);
font-weight: 500;
line-height: 1.2;
max-width: 140px;
}
.prop-header-tag em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: #6FE3D6; font-size: 1.1em; }
/* HERO con título grande y foto al lado — el texto respeta 10% izq, foto va al borde derecho */
.prop-hero {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 0;
margin-top: 0;
}
.prop-hero-text {
padding-top: 40px;
padding-bottom: 30px;
padding-right: 40px !important;
display: flex; flex-direction: column; gap: 12px;
align-self: center;
}
.prop-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(48px, 7vw, 88px);
font-weight: 400;
line-height: 0.95;
letter-spacing: -2px;
color: #0B3C49;
margin: 0;
text-transform: uppercase;
}
.prop-title em {
font-style: italic;
color: #0F4D3F;
display: block;
font-size: 1.05em;
margin-top: 4px;
text-transform: none;
}
.prop-noches {
display: inline-block;
background: #0F4D3F;
color: #fff;
padding: 8px 22px;
border-radius: 20px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
align-self: flex-start;
}
.prop-tagline {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: 22px;
color: #0F4D3F;
margin: 8px 0 0;
line-height: 1.2;
}
.prop-subtagline {
font-size: 14px;
color: var(--color-text-secondary);
margin: 0;
}
.prop-hero-images {
background-size: cover;
background-position: center;
min-height: 380px;
}
.prop-hero-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
min-height: 380px;
}
/* Info cards row */
.prop-info-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
background: #0F4D3F;
color: #fff;
padding: 0;
margin: 0 36px;
border-radius: 16px;
overflow: hidden;
transform: translateY(-30px);
box-shadow: 0 12px 32px rgba(15, 77, 63, 0.25);
}
.prop-info-card {
padding: 22px 18px;
display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center;
border-right: 1px solid rgba(255,255,255,0.15);
}
.prop-info-card:last-child { border-right: none; }
.prop-info-icon {
width: 50px; height: 50px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
margin-bottom: 4px;
}
.prop-info-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: 0.85;
font-weight: 700;
}
.prop-info-card strong {
font-size: 14px;
line-height: 1.3;
color: #fff;
font-weight: 600;
}
.prop-info-card.prop-info-price strong {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 26px;
font-weight: 400;
color: #6FE3D6;
}
.prop-info-stars { color: #FFD166; font-size: 14px; letter-spacing: 2px; }
.prop-info-substars { font-size: 10px; color: #FFD166; font-weight: 700; letter-spacing: 1px; }
.prop-info-sub { font-size: 11px; opacity: 0.8; }
/* Galería rooftop / habitaciones */
.prop-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 0 36px 24px;
}
.prop-gallery-item {
aspect-ratio: 16 / 9;
background-size: cover; background-position: center;
border-radius: 14px;
position: relative;
overflow: hidden;
}
.prop-gallery-label {
position: absolute;
bottom: 12px; left: 14px;
background: rgba(15, 77, 63, 0.92);
color: #fff;
padding: 6px 14px;
border-radius: 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
/* Section titles genéricos */
.prop-section-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px;
font-weight: 400;
color: #0F4D3F;
margin: 0 0 14px;
letter-spacing: -0.3px;
}
.prop-section-title--green { color: #0F4D3F; }
.prop-details-title {
background: #0F4D3F;
color: #fff;
padding: 12px 20px;
border-radius: 14px;
margin: 0 0 18px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* Ubicación + hotel grid */
.prop-location-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 30px;
padding: 24px 36px;
}
.prop-location-text {
font-size: 13px;
color: var(--color-text);
margin: 0 0 12px;
line-height: 1.5;
}
.prop-hotel-desc {
font-size: 13px;
color: var(--color-text);
line-height: 1.55;
margin: 0 0 18px;
}
.prop-amenities {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
.prop-amenity {
display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center;
}
.prop-amenity-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: #0F4D3F;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
}
.prop-amenity-label {
font-size: 10.5px;
color: var(--color-text);
line-height: 1.25;
}
/* Detalles + tours grid */
.prop-details-grid {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 30px;
padding: 24px 36px;
border-top: 1px solid var(--color-border-light);
}
.prop-details-list {
list-style: none; padding: 0; margin: 0 0 18px;
display: flex; flex-direction: column; gap: 8px;
}
.prop-details-list li {
display: grid;
grid-template-columns: 24px 110px 1fr;
align-items: center;
gap: 6px;
padding: 8px 0;
border-bottom: 1px dashed var(--color-border-light);
font-size: 13px;
}
.pd-icon { color: #0F4D3F; font-size: 14px; }
.pd-label { color: var(--color-text-secondary); }
.prop-details-list li strong { color: var(--color-dark); font-weight: 600; }
.prop-details-meta {
border-top: 1px solid var(--color-border-light);
padding-top: 14px;
display: flex; flex-direction: column; gap: 8px;
font-size: 13px;
}
.prop-details-meta span { color: var(--color-text-secondary); margin-right: 4px; }
.prop-details-meta strong { color: var(--color-dark); }
/* Tours */
.prop-tours-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.prop-tour {
aspect-ratio: 4 / 5;
background-size: cover; background-position: center;
border-radius: 14px;
position: relative;
overflow: hidden;
}
.prop-tour-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 35%, rgba(7, 17, 34, 0.88) 100%);
color: #fff;
padding: 14px;
display: flex; flex-direction: column; justify-content: flex-end;
gap: 4px;
}
.prop-tour-overlay strong {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 17px;
font-weight: 400;
line-height: 1.15;
}
.prop-tour-overlay span { font-size: 11px; opacity: 0.9; line-height: 1.3; }
/* Bottom grid: Incluye + Total */
.prop-bottom-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 0;
margin: 0 36px 30px;
}
.prop-includes-block {
background: #fafaf7;
padding: 24px;
border-radius: 16px 0 0 16px;
}
.prop-includes {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.prop-includes li {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
background: #fff;
border-radius: 10px;
font-size: 13px;
color: var(--color-text);
font-weight: 500;
}
.prop-includes li::before {
content: '✓';
color: #fff;
font-weight: 700;
flex-shrink: 0;
width: 20px; height: 20px;
background: #6FE3D6;
border-radius: 50%;
display: inline-flex;
align-items: center; justify-content: center;
font-size: 11px;
}
/* Total CTA bloque verde */
.prop-total-block {
background: linear-gradient(135deg, #0F4D3F 0%, #0B3C49 100%);
color: #fff;
padding: 30px;
border-radius: 0 16px 16px 0;
display: flex; flex-direction: column; gap: 4px;
justify-content: center;
}
.prop-total-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.85;
font-weight: 700;
}
.prop-total-amount {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(40px, 5vw, 60px);
font-weight: 400;
line-height: 1;
letter-spacing: -1.5px;
color: #fff;
}
.prop-total-sub {
font-size: 13px;
opacity: 0.85;
margin-bottom: 10px;
}
.prop-total-actions {
display: flex; gap: 10px; flex-wrap: wrap;
margin-top: 14px;
}
.btn-wapp {
background: #25D366;
color: #fff;
padding: 12px 24px;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
transition: background 0.2s ease, transform 0.2s ease;
}
.btn-wapp:hover { background: #128C7E; transform: translateY(-2px); }
.btn-outline-light {
background: transparent;
color: #fff;
padding: 12px 24px;
border-radius: 30px;
border: 1.5px solid rgba(255,255,255,0.4);
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }
/* Footer grid: terminos + contacto */
.prop-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
padding: 24px 36px;
border-top: 1px solid var(--color-border-light);
}
.prop-terms { list-style: disc; padding-left: 18px; margin: 0; }
.prop-terms li {
font-size: 11.5px;
color: var(--color-text-secondary);
line-height: 1.5;
margin-bottom: 6px;
}
.prop-contact { list-style: none; padding: 0; margin: 0; }
.prop-contact li {
font-size: 13px;
margin-bottom: 8px;
color: var(--color-text);
}
.prop-contact strong { color: var(--color-dark); }
.prop-contact a { color: var(--color-primary); text-decoration: none; }
/* Footer band verde */
.prop-footer-band {
background: #0F4D3F;
color: #fff;
padding: 14px 36px;
display: flex; justify-content: space-between; flex-wrap: wrap;
gap: 12px;
font-size: 12px;
}
.prop-footer-band em {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
color: #6FE3D6;
}
@media (max-width: 1024px) {
.prop-hero { grid-template-columns: 1fr; }
.prop-hero-images, .prop-hero-img { min-height: 280px; }
.prop-info-cards { transform: none; margin: 0 24px 24px; }
.prop-location-grid, .prop-details-grid, .prop-bottom-grid, .prop-footer-grid { grid-template-columns: 1fr; }
.prop-amenities { grid-template-columns: repeat(4, 1fr); }
.prop-includes-block, .prop-total-block { border-radius: 16px; }
.prop-bottom-grid { gap: 14px; }
}
@media (max-width: 700px) {
.prop-info-cards { grid-template-columns: 1fr; }
.prop-info-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
.prop-gallery { grid-template-columns: 1fr; }
.prop-amenities { grid-template-columns: repeat(3, 1fr); }
.prop-tours-grid { grid-template-columns: 1fr; }
.prop-hero-text, .prop-location-grid, .prop-details-grid, .prop-footer-grid { padding-left: 20px; padding-right: 20px; }
.prop-bottom-grid { margin-left: 20px; margin-right: 20px; }
.prop-footer-band { padding: 14px 20px; }
}
/* ========================================================
CHESKY MODE — UI 1-10 + UX 1-10 (humano > algoritmo)
======================================================== */
/* UI #1 + #2 + #4 — Hero v2 mega tipografía + emotion buttons */
.search-hero-v2 { min-height: 92vh; }
.search-hero-v2 .hero-overlay {
background: linear-gradient(180deg, rgba(7,17,34,0.30) 0%, rgba(7,17,34,0.15) 35%, rgba(7,17,34,0.65) 75%, rgba(7,17,34,0.92) 100%);
}
.hero-content-v2 { max-width: 1200px; }
.hero-title-mega {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(56px, 11vw, 152px);
font-weight: 400;
line-height: 0.95;
letter-spacing: -3px;
color: #fff;
margin: 12px 0 36px;
}
.hero-title-mega em { font-style: italic; color: var(--color-primary-light); }
.hero-emotions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-emotion {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
background: rgba(255,255,255,0.14);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 60px;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 600;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.2s ease, border-color 0.2s ease;
}
.hero-emotion:hover {
transform: translateY(-3px) scale(1.04);
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.5);
color: #fff;
}
.he-icon { font-size: 22px; }
.hero-secondary-cta-v2 { color: rgba(255,255,255,0.85); margin-top: 18px; }
.hero-secondary-cta-v2 a { color: var(--color-primary-light); }
@media (max-width: 600px) {
.hero-title-mega { font-size: 48px; letter-spacing: -1.5px; margin-bottom: 24px; }
.hero-emotion { font-size: 14px; padding: 11px 16px; }
}
/* UX #1 — Founder letter */
.founder-letter { padding: 80px 0 60px; background: #fff; }
.fl-card {
max-width: 920px; margin: 0 auto;
background: #fafaf7; border-radius: 24px; padding: 36px;
display: grid; grid-template-columns: 160px 1fr; gap: 30px; align-items: center;
border: 1px solid var(--color-border-light);
}
.fl-photo { position: relative; text-align: center; }
.fl-photo img {
width: 140px; height: 140px; border-radius: 50%;
object-fit: cover; border: 4px solid #fff;
box-shadow: 0 8px 24px rgba(7,17,34,0.12);
}
.fl-status {
display: inline-block; margin-top: 10px;
background: #25D366; color: #fff;
padding: 4px 10px; border-radius: 12px;
font-size: 11px; font-weight: 600;
}
.fl-greeting {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 28px; font-weight: 400;
color: var(--color-dark); margin: 0 0 8px; letter-spacing: -0.5px;
}
.fl-body { font-size: 17px; color: var(--color-text); line-height: 1.55; margin: 0 0 16px; }
.fl-body em { color: var(--color-primary); font-style: italic; }
.fl-cta {
display: inline-flex; align-items: center; gap: 8px;
background: #25D366; color: #fff;
padding: 12px 22px; border-radius: 30px;
text-decoration: none; font-weight: 600;
transition: background 0.2s ease, transform 0.2s ease;
}
.fl-cta:hover { background: #128C7E; transform: translateY(-2px); color: #fff; }
.fl-signature {
margin-top: 12px;
font-family: 'Instrument Serif', Georgia, serif;
color: var(--color-text-secondary); font-size: 14px; margin-bottom: 0;
}
@media (max-width: 700px) {
.fl-card { grid-template-columns: 1fr; padding: 28px 22px; text-align: center; }
.fl-photo img { width: 110px; height: 110px; }
}
/* UX #2 — Advisor pill (header WhatsApp humano) */
.advisor-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px 6px 6px;
background: #25D366; color: #fff;
border-radius: 50px; text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.advisor-pill:hover { background: #128C7E; transform: translateY(-2px); color: #fff; }
.advisor-avatar {
position: relative; width: 32px; height: 32px;
border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.advisor-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.advisor-status {
position: absolute; bottom: 0; right: 0;
width: 10px; height: 10px;
background: #4ade80; border: 2px solid #25D366;
border-radius: 50%;
}
.advisor-text { display: flex; flex-direction: column; line-height: 1.1; }
.advisor-text strong { font-size: 13px; }
.advisor-text span { font-size: 10px; opacity: 0.9; }
@media (max-width: 768px) {
.advisor-pill .advisor-text { display: none; }
.advisor-pill { padding: 4px; }
}
/* CSS conflictivo removido — usar reglas originales del tema */
/* UI #7 — Footer storytelling */
.footer-story {
background: linear-gradient(135deg, #0B3C49 0%, #1a5566 100%);
color: #fff; padding: 60px 0;
}
.fs-grid {
display: grid; grid-template-columns: auto 1fr;
gap: 40px; align-items: center;
max-width: 800px; margin: 0 auto;
}
.fs-photos { position: relative; width: 180px; height: 140px; }
.fs-photo {
width: 110px; height: 110px; border-radius: 50%;
object-fit: cover; border: 4px solid #fff;
position: absolute; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.fs-photo-1 { top: 0; left: 0; z-index: 2; }
.fs-photo-2 { top: 30px; left: 70px; z-index: 1; }
.fs-handwritten {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic; font-size: 26px;
color: var(--color-primary-light); margin: 0 0 12px;
line-height: 1.2;
}
.fs-names {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px; color: #fff;
margin: 0 0 18px; line-height: 1.2;
}
.fs-names span { font-size: 13px; opacity: 0.7; font-family: var(--font); }
.fs-cta {
display: inline-block;
color: var(--color-primary-light); text-decoration: none;
font-weight: 600; border-bottom: 1px solid var(--color-primary-light);
padding-bottom: 2px; transition: color 0.2s ease;
}
.fs-cta:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 600px) {
.fs-grid { grid-template-columns: 1fr; text-align: center; }
.fs-photos { margin: 0 auto; }
}
/* UX #4 — Onboarding modal */
.viayo-onboard {
position: fixed; inset: 0; z-index: 100000;
opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
}
.viayo-onboard.is-open { opacity: 1; pointer-events: auto; }
.viayo-onboard.is-closing { opacity: 0; }
.vo-backdrop { position: absolute; inset: 0; background: rgba(7,17,34,0.7); backdrop-filter: blur(8px); }
.vo-card {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.96);
background: #fff; border-radius: 24px;
width: min(440px, 92vw); padding: 40px 36px 28px;
box-shadow: 0 30px 80px rgba(0,0,0,0.4);
transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.viayo-onboard.is-open .vo-card { transform: translate(-50%, -50%) scale(1); }
.vo-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; border-radius: 50%;
background: var(--color-bg-alt); border: none;
font-size: 22px; cursor: pointer; color: var(--color-text);
}
.vo-stage { min-height: 220px; position: relative; }
.vo-slide { display: none; text-align: center; animation: vo-fade 0.35s ease; }
.vo-slide.is-active { display: block; }
@keyframes vo-fade {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.vo-emoji { font-size: 56px; line-height: 1; margin-bottom: 16px; }
.vo-slide h3 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 28px; font-weight: 400;
color: var(--color-dark); margin: 0 0 10px; letter-spacing: -0.3px;
}
.vo-slide p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.5; margin: 0; }
.vo-dots { display: flex; gap: 6px; justify-content: center; margin: 24px 0 18px; }
.vo-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border); border: none; cursor: pointer;
transition: width 0.25s ease, background 0.2s ease;
}
.vo-dot.is-active { background: var(--color-primary); width: 24px; border-radius: 4px; }
.vo-actions {
display: flex; justify-content: space-between; align-items: center;
padding-top: 16px; border-top: 1px solid var(--color-border-light);
}
.vo-skip {
background: none; border: none;
color: var(--color-text-secondary); cursor: pointer;
font-size: 14px; font-weight: 500;
}
.vo-next {
background: var(--color-primary); color: #fff;
border: none; padding: 12px 24px; border-radius: 30px;
cursor: pointer; font-size: 14px; font-weight: 600;
transition: background 0.2s ease;
}
.vo-next:hover { background: var(--color-primary-dark); }
/* UX #7 — Social proof toast */
.social-proof-toast {
position: fixed; bottom: 100px; left: 20px;
background: #fff; border-radius: 14px;
padding: 12px 36px 12px 12px;
box-shadow: 0 12px 32px rgba(7,17,34,0.18);
display: flex; align-items: center; gap: 12px;
z-index: 999;
transform: translateY(20px); opacity: 0;
transition: transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease;
max-width: 320px;
border: 1px solid var(--color-border-light);
}
.social-proof-toast.is-shown { transform: translateY(0); opacity: 1; }
.spt-avatar {
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, #4FBDB3, #0B3C49);
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.spt-text { font-size: 13px; line-height: 1.35; color: var(--color-text); }
.spt-text strong { color: var(--color-dark); }
.spt-text span { display: block; font-size: 11px; color: var(--color-text-secondary); }
.spt-close {
position: absolute; top: 8px; right: 8px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--color-bg-alt); border: none;
color: var(--color-text-secondary); font-size: 14px;
cursor: pointer; line-height: 1;
}
@media (max-width: 600px) {
.social-proof-toast { left: 12px; right: 12px; max-width: none; bottom: 80px; }
}
/* UI #8 — Reduce Ken Burns en mobile (más sutil) */
@media (prefers-reduced-motion: reduce) {
.hero-bg, .splash-bg, .hero-bg-pic img { animation: none !important; transform: none !important; }
}
@media (max-width: 768px) {
.hero-bg-pic img { animation-duration: 14s !important; }
}
/* ========================================================
UNICORN PAQUETE — editorial scroll-driven storytelling
======================================================== */
.unicorn-paquete {
background: #f7f5f0;
color: #1a1a1a;
overflow-x: hidden;
}
/* === HERO CINEMÁTICO === */
.up-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
overflow: hidden;
color: #fff;
}
.up-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transform: scale(1.05);
animation: up-zoom 14s ease-out forwards;
}
@keyframes up-zoom {
from { transform: scale(1.12); }
to { transform: scale(1.0); }
}
.up-hero-grain {
position: absolute; inset: 0;
opacity: 0.08;
background-image:
repeating-radial-gradient(circle at 30% 50%, rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 1px, transparent 100%),
repeating-radial-gradient(circle at 70% 30%, rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 1px, transparent 100%);
pointer-events: none;
mix-blend-mode: overlay;
}
.up-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85) 100%);
}
.up-hero-content {
position: relative; z-index: 2;
width: 100%;
padding: 0 6vw 60px;
max-width: 1600px;
margin: 0 auto;
}
.up-hero-meta {
display: flex; align-items: center; gap: 16px;
margin-bottom: 24px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 500;
color: rgba(255,255,255,0.85);
}
.up-hero-eyebrow { font-style: italic; font-family: 'Instrument Serif', Georgia, serif; font-size: 14px; letter-spacing: 1px; text-transform: none; }
.up-hero-divider { width: 40px; height: 1px; background: rgba(255,255,255,0.6); }
.up-title {
font-family: 'Instrument Serif', Georgia, serif;
font-weight: 400;
line-height: 0.85;
margin: 0 0 28px;
color: #fff;
}
.up-title-1 {
display: block;
font-size: clamp(48px, 8vw, 140px);
letter-spacing: 6px;
text-transform: uppercase;
font-weight: 400;
}
.up-title-2 {
display: block;
font-size: clamp(80px, 16vw, 280px);
letter-spacing: -4px;
margin-top: -0.1em;
}
.up-title-2 em {
font-style: italic;
color: #fff;
}
.up-subtitle {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: clamp(18px, 2vw, 26px);
color: rgba(255,255,255,0.92);
margin: 0 0 60px;
max-width: 600px;
}
.up-hero-bottom { display: flex; justify-content: center; }
.up-scroll-hint {
display: flex; flex-direction: column; align-items: center; gap: 10px;
color: rgba(255,255,255,0.7);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
animation: up-bob 2.5s ease-in-out infinite;
}
@keyframes up-bob {
0%, 100% { transform: translateY(0); opacity: 0.7; }
50% { transform: translateY(8px); opacity: 1; }
}
/* === SIDE NAV STICKY === */
.up-side-nav {
position: fixed;
left: 24px;
top: 50%;
transform: translateY(-50%);
z-index: 90;
display: flex; flex-direction: column;
gap: 18px;
padding: 20px 14px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(18px);
border-radius: 30px;
border: 1px solid rgba(255,255,255,0.12);
}
.up-nav-item {
display: flex; align-items: center; gap: 12px;
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 500;
transition: color 0.2s ease;
}
.up-nav-item:hover { color: #fff; }
.up-nav-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
transition: all 0.25s ease;
}
.up-nav-item.is-active { color: #fff; }
.up-nav-item.is-active .up-nav-dot {
background: #6FE3D6;
transform: scale(1.5);
box-shadow: 0 0 12px rgba(111, 227, 214, 0.6);
}
.up-nav-label { display: none; }
.up-side-nav:hover .up-nav-label { display: inline; }
@media (max-width: 1024px) {
.up-side-nav { display: none; }
}
/* Para que después del hero la nav cambie a fondo claro */
.up-hero ~ * .up-side-nav { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
/* === PULL QUOTES EDITORIALES === */
.up-quote {
padding: 100px 6vw;
text-align: center;
background: #f7f5f0;
}
.up-quote.up-quote-alt {
background: #1a3a3a;
color: #f0eee5;
}
.up-quote blockquote {
margin: 0;
max-width: 880px;
margin: 0 auto;
}
.up-quote blockquote p {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(28px, 4vw, 48px);
line-height: 1.2;
font-weight: 400;
color: #1a3a3a;
margin: 0;
letter-spacing: -0.5px;
}
.up-quote.up-quote-alt blockquote p { color: #f0eee5; }
.up-quote blockquote p em { color: #5a8a78; font-style: italic; }
.up-quote.up-quote-alt blockquote p em { color: #6FE3D6; }
.up-quote blockquote footer {
margin-top: 28px;
display: flex; align-items: center; justify-content: center; gap: 12px;
font-family: var(--font);
font-size: 13px;
color: rgba(240,238,229,0.7);
font-style: normal;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 500;
}
.up-quote-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #6FE3D6; }
/* === SECTION HEADS (capítulos romanos) === */
.up-section-head {
text-align: center;
padding: 100px 6vw 50px;
max-width: 720px;
margin: 0 auto;
}
.up-chapter {
display: block;
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: clamp(40px, 5vw, 64px);
color: #5a8a78;
margin-bottom: 8px;
line-height: 1;
}
.up-chapter-title {
font-family: 'Instrument Serif', Georgia, serif;
font-weight: 400;
font-size: clamp(36px, 5vw, 56px);
color: #1a3a3a;
margin: 0 0 18px;
letter-spacing: -1px;
line-height: 1.05;
}
.up-section-divider {
display: block;
width: 60px; height: 1px;
background: #1a3a3a;
margin: 0 auto;
opacity: 0.3;
}
.up-section-intro {
margin-top: 24px;
font-size: 16px;
color: rgba(26, 58, 58, 0.7);
line-height: 1.55;
}
/* === HOTEL — magazine asymmetric grid === */
.up-hotel {
padding-bottom: 80px;
}
.up-hotel-grid {
max-width: 1400px;
margin: 0 auto;
padding: 0 6vw;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 60px;
align-items: start;
}
.up-hotel-text { padding-top: 40px; }
.up-leader {
font-size: 18px;
line-height: 1.65;
color: #1a1a1a;
margin-bottom: 18px;
}
.up-dropcap {
float: left;
font-family: 'Instrument Serif', Georgia, serif;
font-size: 86px;
line-height: 0.85;
padding: 8px 12px 0 0;
color: #5a8a78;
font-weight: 400;
font-style: italic;
}
.up-hotel-text p {
font-size: 15px;
line-height: 1.7;
color: rgba(26, 26, 26, 0.78);
margin: 0 0 16px;
}
.up-hotel-text p em { color: #5a8a78; font-style: italic; }
.up-hotel-amenities {
list-style: none;
padding: 0;
margin: 24px 0 0;
columns: 2;
column-gap: 24px;
}
.up-hotel-amenities li {
padding: 6px 0;
border-bottom: 1px solid rgba(26, 58, 58, 0.1);
font-size: 13px;
color: #1a1a1a;
break-inside: avoid;
}
.up-hotel-amenities li::before { content: '— '; color: #5a8a78; }
.up-hotel-photos {
display: grid;
grid-template-columns: 1.3fr 1fr;
grid-template-rows: 280px 200px;
gap: 16px;
}
.up-photo {
background-size: cover; background-position: center;
border-radius: 4px;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.up-photo.is-visible { opacity: 1; transform: translateY(0); }
.up-photo-large { grid-column: 1 / 2; grid-row: 1 / 3; }
.up-photo-tall { grid-column: 2 / 3; grid-row: 1 / 3; }
.up-photo-caption {
position: absolute;
bottom: 14px; left: 14px;
background: rgba(255,255,255,0.92);
color: #1a3a3a;
padding: 5px 12px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 600;
border-radius: 2px;
}
@media (max-width: 900px) {
.up-hotel-grid { grid-template-columns: 1fr; gap: 40px; }
.up-hotel-photos { grid-template-columns: 1fr; grid-template-rows: 240px 200px; }
.up-photo-large, .up-photo-tall { grid-column: 1; }
.up-photo-large { grid-row: 1; }
.up-photo-tall { grid-row: 2; }
.up-hotel-amenities { columns: 1; }
}
/* === ITINERARY — scroll narrative === */
.up-itinerary { background: #fff; padding-bottom: 80px; }
.up-day {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-bottom: 80px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding: 0 6vw;
align-items: center;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.up-day.is-visible { opacity: 1; transform: translateY(0); }
.up-day.is-reverse { direction: rtl; }
.up-day.is-reverse > * { direction: ltr; }
.up-day-photo {
aspect-ratio: 4 / 5;
background-size: cover; background-position: center;
position: relative;
border-radius: 2px;
overflow: hidden;
}
.up-day-roman {
position: absolute;
top: 28px; left: 28px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 8px 18px;
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
}
.up-day-text { padding: 0 8% 0 8%; }
.up-day-eyebrow {
display: block;
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
color: #5a8a78;
font-size: 16px;
margin-bottom: 8px;
}
.up-day-title {
font-family: 'Instrument Serif', Georgia, serif;
font-weight: 400;
font-size: clamp(32px, 4vw, 52px);
color: #1a3a3a;
margin: 0 0 18px;
letter-spacing: -1px;
line-height: 1.05;
}
.up-day-body {
font-size: 16px;
line-height: 1.7;
color: rgba(26, 26, 26, 0.78);
margin: 0;
}
.up-day-body em { color: #5a8a78; font-style: italic; font-weight: 500; }
@media (max-width: 800px) {
.up-day { grid-template-columns: 1fr; gap: 32px; }
.up-day.is-reverse { direction: ltr; }
.up-day-text { padding: 0; }
}
/* === LOCATION map === */
.up-location { padding-bottom: 80px; }
.up-map-wrap {
position: relative;
max-width: 1400px;
margin: 0 auto;
padding: 0 6vw;
}
.up-map-wrap iframe {
filter: grayscale(100%) contrast(1.1);
border-radius: 2px;
transition: filter 0.4s ease;
}
.up-map-wrap:hover iframe { filter: grayscale(0%); }
.up-map-overlay {
position: absolute;
bottom: 30px; left: calc(6vw + 30px);
background: #fff;
padding: 22px 26px;
max-width: 320px;
box-shadow: 0 12px 32px rgba(26, 58, 58, 0.18);
}
.up-map-address {
font-size: 14px;
line-height: 1.5;
color: #1a1a1a;
margin: 0;
}
.up-map-address strong {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 18px;
font-weight: 400;
color: #1a3a3a;
display: block;
margin-bottom: 6px;
}
/* === INCLUDES editorial list === */
.up-includes { background: #1a3a3a; color: #f0eee5; padding-bottom: 100px; }
.up-includes .up-section-head .up-chapter,
.up-includes .up-section-head .up-chapter-title { color: #6FE3D6; }
.up-includes .up-section-head .up-section-divider { background: #6FE3D6; opacity: 0.5; }
.up-includes-list {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 720px;
padding: 0 6vw;
}
.up-includes-list li {
display: flex; align-items: baseline; gap: 24px;
padding: 22px 0;
border-bottom: 1px solid rgba(240, 238, 229, 0.15);
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 400;
color: #f0eee5;
line-height: 1.3;
letter-spacing: -0.3px;
}
.up-inc-num {
font-family: var(--font);
font-size: 11px;
color: #6FE3D6;
letter-spacing: 2px;
flex-shrink: 0;
min-width: 32px;
font-weight: 600;
}
/* === RESERVAR === */
.up-reservar {
background: #f7f5f0;
padding: 120px 6vw;
text-align: center;
}
.up-reservar-inner { max-width: 720px; margin: 0 auto; }
.up-r-eyebrow {
display: block;
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
color: #5a8a78;
font-size: 18px;
margin-bottom: 8px;
}
.up-r-title {
font-family: 'Instrument Serif', Georgia, serif;
font-weight: 400;
font-size: clamp(40px, 6vw, 72px);
color: #1a3a3a;
margin: 0 0 40px;
letter-spacing: -1.5px;
line-height: 1.05;
}
.up-r-title em { font-style: italic; color: #5a8a78; }
.up-r-price {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 28px 48px;
background: #fff;
border: 1px solid rgba(26, 58, 58, 0.12);
margin-bottom: 36px;
}
.up-r-price-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(26, 58, 58, 0.65);
font-weight: 600;
}
.up-r-price strong {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(48px, 6vw, 72px);
font-weight: 400;
color: #1a3a3a;
line-height: 1;
letter-spacing: -2px;
}
.up-r-price-sub {
font-size: 13px;
color: rgba(26, 58, 58, 0.7);
}
.up-r-actions {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.up-r-btn-primary {
display: inline-flex; align-items: center; gap: 10px;
background: #1a3a3a;
color: #f0eee5;
padding: 18px 32px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: background 0.2s ease, transform 0.2s ease;
}
.up-r-btn-primary:hover { background: #5a8a78; color: #fff; transform: translateY(-2px); }
.up-r-btn-ghost {
display: inline-flex; align-items: center;
color: #1a3a3a;
padding: 18px 32px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
border: 1px solid #1a3a3a;
transition: background 0.2s ease, color 0.2s ease;
}
.up-r-btn-ghost:hover { background: #1a3a3a; color: #f0eee5; }
/* === MOMENTOS de clientes === */
.up-moments { padding-bottom: 100px; }
.up-moments-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
max-width: 1400px;
margin: 0 auto;
padding: 0 6vw;
}
.up-moment {
margin: 0;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.up-moment.is-visible { opacity: 1; transform: translateY(0); }
.up-moment img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 2px;
filter: sepia(15%) saturate(0.85);
transition: filter 0.4s ease;
}
.up-moment:hover img { filter: sepia(0%) saturate(1); }
.up-moment figcaption {
margin-top: 10px;
font-size: 12px;
color: rgba(26, 26, 26, 0.55);
text-transform: uppercase;
letter-spacing: 1.5px;
text-align: center;
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
text-transform: none;
font-size: 14px;
letter-spacing: 0;
}
@media (max-width: 700px) {
.up-moments-grid { grid-template-columns: 1fr; }
}
/* === FLOATING WIDGET (Tablet Hotels style) === */
.up-floating-widget {
position: fixed;
bottom: 24px; right: 24px;
z-index: 800;
background: #1a3a3a;
color: #f0eee5;
padding: 14px 16px;
border-radius: 4px;
box-shadow: 0 16px 40px rgba(26, 58, 58, 0.3);
display: flex; align-items: center; gap: 16px;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
transform: translateY(0);
}
.up-floating-widget[hidden] { display: none; }
.up-fw-summary { display: flex; flex-direction: column; gap: 2px; }
.up-fw-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: 0.7;
font-weight: 500;
}
.up-fw-price {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 22px;
font-weight: 400;
color: #6FE3D6;
line-height: 1;
letter-spacing: -0.5px;
}
.up-fw-cta {
background: #6FE3D6;
color: #1a3a3a;
padding: 10px 18px;
font-size: 12px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: background 0.2s ease, transform 0.2s ease;
}
.up-fw-cta:hover { background: #fff; transform: translateY(-2px); color: #1a3a3a; }
@media (max-width: 600px) {
.up-floating-widget { bottom: 90px; left: 12px; right: 12px; padding: 12px 14px; }
.up-fw-price { font-size: 18px; }
}
/* === Global header/footer (vh-) — Diseño paquete aplicado site-wide, FULL WIDTH === */
.vh-header{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.92);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid #e7eeee;
width:100%;
font-family:"Inter",system-ui,-apple-system,sans-serif;
}
.vh-header-inner{
display:flex;align-items:center;justify-content:space-between;gap:28px;
height:76px;
padding:0 5vw;
width:100%;
max-width:none;
}
.vh-logo{display:flex;align-items:center;text-decoration:none}
.vh-logo img{height:42px;width:auto;display:block}
.vh-nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600;color:#293735}
.vh-nav a{color:inherit;text-decoration:none;padding:6px 0;transition:color .15s ease}
.vh-nav a:hover{color:#0a8a78}
.vh-actions{display:flex;align-items:center;gap:12px}
.vh-icon{
width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
background:#fff;border:1px solid #e7eeee;color:#003f38;cursor:pointer;
position:relative;text-decoration:none;transition:.2s
}
.vh-icon:hover{background:#f4fbf9;border-color:#0a8a78}
.vh-icon.is-saved{color:#e11d48;background:#fff5f7;border-color:#e11d48}
.vh-icon.is-saved svg{fill:#e11d48;stroke:#e11d48}
.vh-badge{
position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;
padding:0 5px;border-radius:9px;background:#e11d48;color:#fff;
font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1
}
.vh-badge:empty,.vh-badge[data-wish-count="0"]{display:none}
.vh-profile{
display:flex;align-items:center;gap:10px;
padding:6px 12px 6px 6px;border-radius:999px;
background:#f7faf9;border:1px solid #e7eeee;
font-size:13px;font-weight:600;color:#17211f;text-decoration:none;
transition:.2s
}
.vh-profile:hover{background:#fff;border-color:#0a8a78}
.vh-profile img{width:34px;height:34px;border-radius:50%;flex-shrink:0}
.vh-profile span{display:flex;flex-direction:column;line-height:1.1}
.vh-profile small{color:#6b7775;font-size:11px;font-weight:500;margin-top:1px}
.vh-mobile-toggle{
display:none;width:44px;height:44px;border-radius:50%;
border:1px solid #e7eeee;background:#fff;cursor:pointer;
flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0
}
.vh-mobile-toggle span{display:block;width:18px;height:2px;background:#003f38;transition:.2s;border-radius:2px}
.vh-mobile-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.vh-mobile-toggle.is-open span:nth-child(2){opacity:0}
.vh-mobile-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.vh-mobile-menu{display:none;padding:0 5vw 20px;background:#fff;border-bottom:1px solid #e7eeee}
.vh-mobile-menu.is-open{display:grid;gap:0}
.vh-mobile-menu a{padding:14px 0;border-bottom:1px solid #e7eeee;font-weight:600;color:#17211f;text-decoration:none;font-size:15px}
.vh-mobile-menu a:last-child{border-bottom:0;color:#16a34a}
@media (max-width:960px){
.vh-nav,.vh-actions{display:none}
.vh-mobile-toggle{display:flex}
}
/* === Global footer (vh-) FULL WIDTH === */
.vh-footer{
background:radial-gradient(circle at 10% 20%,rgba(18,173,150,.22),transparent 25%),
linear-gradient(135deg,#003f38,#022d2a);
color:#d9fffa;
padding:58px 0 22px;
font-family:"Inter",system-ui,-apple-system,sans-serif;
}
.vh-footer-inner{
width:100%;max-width:none;padding:0 5vw;
}
.vh-footer-grid{
display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:42px;
padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.14)
}
.vh-footer-brand p{max-width:320px;color:#c7e9e5;margin:14px 0 20px;font-size:14px;line-height:1.6}
.vh-footer-logo{display:inline-flex;align-items:center;margin-bottom:14px;text-decoration:none}
.vh-footer-logo img{
height:48px;width:auto;display:block;
filter:brightness(0) invert(75%) sepia(31%) saturate(700%) hue-rotate(125deg) brightness(95%) contrast(90%)
}
.vh-socials{display:flex;gap:10px}
.vh-socials a{
width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
background:rgba(255,255,255,.1);color:#d9fffa;transition:.2s
}
.vh-socials a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.vh-footer-col h4{
color:#fff;font-size:13px;letter-spacing:.11em;text-transform:uppercase;
margin:0 0 16px;font-weight:700
}
.vh-footer-col a,.vh-footer-col p{
display:block;color:#c7e9e5;font-size:14px;
margin:0 0 10px;text-decoration:none;line-height:1.5
}
.vh-footer-col a:hover{color:#52d9ca}
.vh-footer-bottom{
display:flex;justify-content:space-between;align-items:center;gap:20px;
padding-top:22px;color:#a9ccc7;font-size:13px;flex-wrap:wrap
}
.vh-footer-bottom p{margin:0}
.vh-footer-links{display:flex;gap:24px}
.vh-footer-links a{color:#a9ccc7;text-decoration:none;transition:.2s}
.vh-footer-links a:hover{color:#fff}
@media (max-width:1024px){
.vh-footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:680px){
.vh-footer-grid{grid-template-columns:1fr}
.vh-footer-bottom{flex-direction:column;text-align:center}
.vh-footer-links{flex-direction:column;gap:8px}
}
/* ============================================================
25 MEJORAS UI HOMEPAGE — v7.7.0
============================================================ */
/* Mejora #1 — Hero search bar */
.hero-search{
display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:0;
background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);
border-radius:999px;padding:6px;max-width:780px;margin:30px auto 22px;
box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.hs-field{display:flex;flex-direction:column;justify-content:center;padding:10px 22px;border-right:1px solid rgba(0,0,0,.08);cursor:pointer;text-align:left;border-radius:999px;transition:.15s;}
.hs-field:hover{background:rgba(0,63,56,.04)}
.hs-field:last-of-type{border-right:0}
.hs-label{font-size:11px;font-weight:700;color:#003f38;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.hs-field input,.hs-field select{border:0;background:transparent;font:inherit;font-size:14px;color:#17211f;width:100%;padding:0;outline:0;cursor:pointer}
.hs-field input::placeholder{color:#888;font-weight:500}
.hs-submit{display:inline-flex;align-items:center;gap:8px;background:#003f38;color:#fff;border:0;border-radius:999px;padding:14px 26px;font-weight:700;font-size:14px;cursor:pointer;transition:.2s;white-space:nowrap}
.hs-submit:hover{background:#0a8a78;transform:scale(1.02)}
/* Mejora #3 — Trust strip hero */
.hero-trust{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;color:rgba(255,255,255,.95);font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.4);margin-bottom:18px}
.ht-item strong{color:#fff;font-weight:700}
.ht-dot{opacity:.5}
/* Mejora #4 — Texto separador antes de mood chips */
.hero-or-mood{color:rgba(255,255,255,.85);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;margin:18px 0 12px}
/* Mejora #2 — Slideshow */
.hero-slideshow .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
.hero-slideshow .hero-slide.is-active{opacity:1}
.hero-slide-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:6}
.hsd-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:0;cursor:pointer;transition:.2s;padding:0}
.hsd-dot.is-active{background:#fff;width:24px;border-radius:4px}
.hsd-dot:hover{background:rgba(255,255,255,.7)}
/* Mejora #5 — Reducir hero height */
.search-hero.search-hero-v2{min-height:78vh!important;max-height:780px}
/* Mejora #6 — Categorias con count */
.cat-count{color:#999;font-size:11px;font-weight:500;margin-left:2px}
.category-item.active .cat-count{color:#0a8a78}
/* Mejora #7 — Quick search inline */
.quick-search-wrap{position:relative;display:inline-flex;align-items:center;background:#f7faf9;border:1px solid #e7eeee;border-radius:999px;padding:6px 14px 6px 36px;transition:.2s}
.quick-search-wrap:focus-within{border-color:#0a8a78;background:#fff;box-shadow:0 0 0 3px rgba(10,138,120,.12)}
.qs-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#0a8a78}
.quick-search-input{border:0;background:transparent;font:inherit;font-size:13px;width:170px;outline:0;color:#17211f}
.quick-search-input::placeholder{color:#999}
/* Mejora #8 — Filters drawer */
.filters-drawer{position:fixed;inset:0;z-index:200}
.filters-drawer[hidden]{display:none}
.fd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);animation:fdBg .25s ease}
@keyframes fdBg{from{opacity:0}to{opacity:1}}
.fd-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;display:flex;flex-direction:column;animation:fdSlide .3s cubic-bezier(.2,.7,.2,1);box-shadow:-12px 0 40px rgba(0,0,0,.18)}
@keyframes fdSlide{from{transform:translateX(100%)}to{transform:translateX(0)}}
.fd-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid #e7eeee}
.fd-head h3{margin:0;font-size:18px;color:#003f38}
.fd-close{width:36px;height:36px;border-radius:50%;border:1px solid #e7eeee;background:#fff;font-size:22px;cursor:pointer;color:#003f38}
.fd-body{padding:24px 26px;overflow-y:auto;flex:1}
.fd-block{margin-bottom:28px}
.fd-block h4{margin:0 0 12px;font-size:13px;color:#003f38;text-transform:uppercase;letter-spacing:.08em}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px}
.fd-chips button{padding:8px 14px;background:#f7faf9;border:1px solid #e7eeee;border-radius:999px;font:inherit;font-size:13px;color:#17211f;cursor:pointer;transition:.15s}
.fd-chips button:hover{background:#e9f7f4;border-color:#0a8a78}
.fd-chips button.is-on{background:#003f38;color:#fff;border-color:#003f38}
.fd-months button{min-width:50px;text-align:center}
.fd-foot{display:flex;gap:10px;padding:18px 26px;border-top:1px solid #e7eeee}
.fd-foot button{flex:1}
/* Mejora #10 + #11 — Listing card overlay con nombre + precio */
.listing-overlay{position:absolute;left:0;right:0;bottom:0;padding:60px 16px 14px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65));z-index:3;display:flex;align-items:end;justify-content:space-between;gap:8px;pointer-events:none;border-radius:0 0 18px 18px}
.lo-text{flex:1;min-width:0}
.lo-name{font-size:18px;font-weight:700;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.4);line-height:1.1}
.lo-country{font-size:12px;opacity:.85;display:block;margin-top:2px}
.lo-price{text-align:right;flex-shrink:0;background:rgba(255,255,255,.95);color:#003f38;padding:6px 12px;border-radius:10px;line-height:1.1;backdrop-filter:blur(8px)}
.lo-from{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#666;display:block}
.lo-price strong{font-size:14px;font-weight:700;font-family:"Playfair Display",serif}
/* Mejora #15-#18 — Package cards (Airbnb-style) */
.package-card-v2{display:block;background:#fff;border-radius:18px;overflow:hidden;border:1px solid #e7eeee;box-shadow:0 14px 30px rgba(0,63,56,.07);transition:.2s ease;text-decoration:none;color:inherit;position:relative}
.package-card-v2:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,63,56,.14)}
.package-card-v2 .package-image{height:240px;background-size:cover;background-position:center;position:relative;display:block;border-radius:18px 18px 0 0}
.pkg-price-badge{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);padding:7px 13px;border-radius:999px;font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.06em}
.pkg-price-badge strong{font-family:"Playfair Display",serif;font-size:18px;color:#003f38;text-transform:none;letter-spacing:0;margin-left:4px}
.pkg-wish{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);border:0;display:grid;place-items:center;cursor:pointer;color:#003f38;transition:.2s}
.pkg-wish:hover{transform:scale(1.08)}
.pkg-wish.is-saved{color:#e11d48;background:#fff5f7}
.pkg-wish.is-saved svg{fill:#e11d48;stroke:#e11d48}
.package-card-v2 .package-info{padding:18px 20px}
.package-card-v2 .package-meta{display:flex;gap:12px;font-size:12px;color:#666;margin-bottom:6px;flex-wrap:wrap}
.meta-item,.meta-rating{display:inline-flex;align-items:center;gap:3px}
.meta-rating{margin-left:auto;color:#003f38;font-weight:600}
.package-card-v2 h3{font-family:"Playfair Display",serif;color:#003f38;font-size:22px;line-height:1.1;margin:0 0 6px}
.pkg-tagline{color:#666;font-size:13px;line-height:1.5;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pkg-cta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px dashed #e7eeee}
.pkg-cta-link{color:#0a8a78;font-weight:700;font-size:13px}
.pkg-mini-trust{font-size:11px;color:#888}
/* Mejora #19 — Allies strip */
.allies-strip{padding:38px 0;background:#fafbfb;border-top:1px solid #e7eeee;border-bottom:1px solid #e7eeee;text-align:center}
.allies-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#888;margin:0 0 18px;font-weight:700}
.allies-row{display:flex;justify-content:center;align-items:center;gap:34px;flex-wrap:wrap;color:#444;font-weight:600;font-size:14px;opacity:.7}
.allies-row .ally{transition:.2s;cursor:default}
.allies-row .ally:hover{opacity:1;color:#003f38;transform:translateY(-2px)}
/* Mejora #25 — Editorial section */
.editorial-section{padding:80px 0;background:linear-gradient(180deg,#fff,#f7faf9)}
.ed-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.ed-img{height:520px;border-radius:32px;background-size:cover;background-position:center;position:relative;box-shadow:0 24px 50px rgba(0,63,56,.18)}
.ed-badge{position:absolute;top:24px;left:24px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);padding:8px 16px;border-radius:999px;font-size:12px;font-weight:700;color:#003f38;text-transform:uppercase;letter-spacing:.08em}
.ed-text{padding-right:20px}
.ed-title{font-family:"Playfair Display",serif;font-size:clamp(28px,4vw,46px);line-height:1.05;color:#003f38;margin:14px 0 18px;letter-spacing:-.02em}
.ed-title em{font-style:italic;color:#0a8a78}
.ed-lede{color:#444;font-size:16px;line-height:1.65;margin-bottom:22px}
.ed-bullets{list-style:none;padding:0;margin:0 0 28px}
.ed-bullets li{padding:8px 0;border-bottom:1px dashed #e7eeee;color:#17211f;font-size:14px}
.ed-bullets li:last-child{border-bottom:0}
@media (max-width:900px){
.ed-grid{grid-template-columns:1fr;gap:36px}
.ed-img{height:340px}
}
/* Mejora #22 + #24 — Sticky dock con Mishelle */
.fp-sticky-dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(140%);width:min(540px,calc(100% - 36px));background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border:1px solid #e7eeee;border-radius:999px;box-shadow:0 22px 50px rgba(0,63,56,.18);padding:8px 8px 8px 16px;z-index:60;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s;opacity:0;pointer-events:none}
.fp-sticky-dock.is-visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.fpsd-inner{display:flex;align-items:center;gap:12px}
.fpsd-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.fpsd-info{flex:1;min-width:0;line-height:1.2}
.fpsd-info strong{font-size:14px;color:#003f38;display:block}
.fpsd-info span{font-size:12px;color:#666;display:flex;align-items:center;gap:5px}
.fpsd-status{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;animation:fpsdPulse 1.6s ease-out infinite}
@keyframes fpsdPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.fpsd-cta{display:inline-flex;align-items:center;gap:6px;background:#22c55e;color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;flex-shrink:0;transition:.2s}
.fpsd-cta:hover{background:#16a34a;transform:translateY(-1px)}
/* Responsive sticky dock */
@media (max-width:600px){
.fp-sticky-dock{padding:6px 8px 6px 12px;bottom:12px}
.fpsd-info span{font-size:11px}
.fpsd-cta{padding:9px 14px;font-size:12px}
.hero-search{grid-template-columns:1fr;gap:6px;border-radius:24px;padding:10px}
.hs-field{border-right:0;border-bottom:1px solid rgba(0,0,0,.08);padding:10px 16px;border-radius:14px}
.hs-field:last-of-type{border-bottom:0}
.hs-submit{width:100%;justify-content:center}
.hero-trust{font-size:11px;gap:4px 10px}
.ht-dot{display:none}
}
/* ============================================================
MOBILE BOTTOM NAV + STICKY SEARCH (v7.8.0)
============================================================ */
/* Mobile bottom navigation */
.mobile-bottom-nav{
position:fixed;left:0;right:0;bottom:0;z-index:100;
display:none;justify-content:space-around;align-items:center;
background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
border-top:1px solid #e7eeee;padding:8px 4px 12px;
box-shadow:0 -8px 24px rgba(0,0,0,.06)
}
.mbn-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;text-decoration:none;color:#666;font-size:10px;font-weight:600;letter-spacing:.02em;position:relative;border-radius:12px;transition:.15s;background:none;border:0;cursor:pointer}
.mbn-item.is-active{color:#003f38}
.mbn-item.is-active .mbn-icon{background:#e9f7f4}
.mbn-item:hover{color:#003f38}
.mbn-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:inherit}
.mbn-cta{background:#003f38;color:#fff!important;padding:10px 16px;border-radius:14px;margin-top:-12px;box-shadow:0 6px 16px rgba(0,63,56,.25)}
.mbn-cta .mbn-icon{background:transparent}
.mbn-badge{position:absolute;top:2px;right:6px;background:#e11d48;color:#fff;font-size:9px;font-weight:700;min-width:14px;height:14px;border-radius:7px;display:grid;place-items:center;padding:0 3px}
/* Sticky mini search en scroll (mobile) */
.mobile-sticky-search{
position:fixed;top:60px;left:8px;right:8px;z-index:55;
background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
border:1px solid #e7eeee;border-radius:999px;
padding:8px 16px;display:none;align-items:center;gap:10px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
transform:translateY(-100%);transition:transform .3s ease;
font-size:13px;color:#666
}
.mobile-sticky-search.is-visible{transform:translateY(0)}
.mobile-sticky-search svg{flex-shrink:0;color:#003f38}
.mobile-sticky-search-text{flex:1;font-weight:500}
@media (max-width:768px){
.mobile-bottom-nav{display:flex}
body{padding-bottom:72px} /* Reserva espacio para el bottom nav */
.floating-whatsapp,.whatsapp-float{bottom:88px!important}
.fp-sticky-dock{bottom:80px!important}
.tpp .sticky-dock{bottom:80px!important}
}
/* Touch targets ≥44px en mobile */
@media (max-width:768px){
.vh-icon,.icon-btn,.btn,button{min-height:44px}
.nav-list a,.vh-nav a{padding:12px 16px}
input,select,textarea{font-size:16px} /* prevent iOS zoom */
}
/* ============================================================
CONVERSION TRIGGERS (v7.8.0)
============================================================ */
/* Exit-intent toast (suave, no popup invasivo) */
.exit-toast{
position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(20px);
background:#003f38;color:#fff;padding:14px 18px;border-radius:14px;
display:flex;align-items:center;gap:12px;
box-shadow:0 18px 40px rgba(0,0,0,.25);
z-index:99;opacity:0;pointer-events:none;
transition:.4s cubic-bezier(.2,.7,.2,1);max-width:380px;
font-size:13px;line-height:1.4
}
.exit-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.exit-toast img{width:36px;height:36px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.3)}
.exit-toast strong{display:block;color:#52d9ca;margin-bottom:2px;font-size:13px}
.exit-toast a{color:#fff;text-decoration:underline;font-weight:600}
.exit-toast button.exit-toast-x{margin-left:auto;background:transparent;border:0;color:rgba(255,255,255,.6);font-size:18px;cursor:pointer;padding:0;line-height:1;width:24px;height:24px;flex-shrink:0}
/* Urgency strip (live count) */
.urgency-strip{
display:inline-flex;align-items:center;gap:8px;
background:linear-gradient(90deg,#fff7ed,#fef3c7);
color:#92400e;padding:6px 14px;border-radius:999px;
font-size:12px;font-weight:600;border:1px solid #fde68a
}
.urgency-pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#f59e0b;position:relative}
.urgency-pulse::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:#f59e0b;opacity:.4;animation:tpp-pulse 1.4s ease-out infinite}
/* Cotizar sidebar (sticky en scroll de paquete pages) */
.quote-sidebar-trigger{
position:fixed;right:-2px;top:50%;transform:translateY(-50%);
background:#003f38;color:#fff;padding:14px 8px;border-radius:14px 0 0 14px;
writing-mode:vertical-rl;text-orientation:mixed;
font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
cursor:pointer;z-index:35;box-shadow:-4px 4px 16px rgba(0,0,0,.15);
transition:.2s;text-decoration:none;display:none
}
.quote-sidebar-trigger:hover{padding-right:14px;background:#0a8a78}
@media (min-width:1024px){
.quote-sidebar-trigger{display:flex;align-items:center;gap:8px}
}
/* Newsletter conversion improvements */
.newsletter-section .editorial-note{
display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,.1);padding:4px 10px;border-radius:999px;
font-size:11px;text-transform:uppercase;letter-spacing:.08em;
color:#52d9ca;margin-bottom:14px
}
/* ============================================================
ARCHIVE PAQUETES + 404 + INLINE CTA (v7.8.0)
============================================================ */
/* Archive hero */
.archive-hero-paquetes{
padding:80px 0 50px;
background:linear-gradient(135deg,#f4fbf9 0%,#fff 100%);
border-bottom:1px solid #e7eeee;text-align:center
}
.ah-eyebrow{color:#0a8a78;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin:0 0 14px}
.ah-title{font-family:"Playfair Display",serif;font-size:clamp(40px,6vw,72px);line-height:1.05;color:#003f38;margin:0 0 18px;letter-spacing:-.02em}
.ah-title em{font-style:italic;color:#0a8a78}
.ah-lede{color:#666;font-size:17px;max-width:580px;margin:0 auto 24px;line-height:1.6}
.ah-trust{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;color:#444;font-size:13px;margin-bottom:32px}
.ah-trust strong{color:#003f38}
.ah-trust .ht-dot{opacity:.4}
.archive-filters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.archive-filters .filter-btn{padding:10px 20px;background:#fff;border:1px solid #e7eeee;border-radius:999px;color:#17211f;font-weight:600;font-size:13px;text-decoration:none;transition:.2s}
.archive-filters .filter-btn:hover{background:#f4fbf9;border-color:#0a8a78}
.archive-filters .filter-btn.active{background:#003f38;color:#fff;border-color:#003f38}
.archive-paquetes-grid{padding:60px 0}
.archive-paquetes-grid .packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:900px){.archive-paquetes-grid .packages-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.archive-paquetes-grid .packages-grid{grid-template-columns:1fr}}
/* Empty state mejorado */
.no-content-v2{text-align:center;padding:80px 24px;max-width:520px;margin:0 auto}
.ncm-illust{font-size:64px;margin-bottom:18px;line-height:1}
.no-content-v2 h2{font-family:"Playfair Display",serif;font-size:34px;color:#003f38;margin:0 0 12px}
.no-content-v2 p{color:#666;font-size:15px;margin-bottom:26px;line-height:1.6}
/* Inline CTA editorial al final del archive */
.archive-inline-cta{padding:80px 0;background:linear-gradient(180deg,#fff,#f4fbf9)}
.aic-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center;background:#fff;padding:60px;border-radius:32px;box-shadow:0 24px 60px rgba(0,63,56,.08);border:1px solid #e7eeee}
.aic-text .section-eyebrow{color:#0a8a78;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:11px;display:block;margin-bottom:10px}
.aic-title{font-family:"Playfair Display",serif;font-size:clamp(28px,3.5vw,44px);line-height:1.05;color:#003f38;margin:0 0 16px;letter-spacing:-.02em}
.aic-title em{font-style:italic;color:#0a8a78}
.aic-text p{color:#444;font-size:16px;line-height:1.6;margin-bottom:24px}
.aic-actions{display:flex;gap:12px;flex-wrap:wrap}
.aic-visual{text-align:center}
.aic-avatar{width:120px;height:120px;border-radius:50%;border:5px solid #fff;box-shadow:0 12px 30px rgba(0,63,56,.18);margin-bottom:24px}
.aic-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:center}
.aic-stats div{background:#f4fbf9;padding:16px 10px;border-radius:14px;border:1px solid #e7eeee}
.aic-stats strong{display:block;font-family:"Playfair Display",serif;font-size:24px;color:#003f38;line-height:1}
.aic-stats span{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;display:block}
@media (max-width:900px){
.aic-grid{grid-template-columns:1fr;padding:36px;gap:36px;border-radius:24px}
.aic-visual{order:-1}
.aic-avatar{width:88px;height:88px}
}
/* 404 */
.error-404-section{padding:120px 24px;text-align:center;min-height:60vh;display:flex;align-items:center;justify-content:center}
.error-404-inner{max-width:520px}
.e404-num{font-family:"Playfair Display",serif;font-size:clamp(120px,18vw,220px);line-height:1;color:#003f38;letter-spacing:-.04em;margin-bottom:14px;opacity:.85}
.e404-num em{font-style:italic;color:#0a8a78}
.e404-title{font-family:"Playfair Display",serif;font-size:clamp(28px,4vw,42px);color:#003f38;margin:0 0 14px}
.e404-text{color:#666;font-size:16px;line-height:1.6;margin-bottom:30px}
.e404-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ============================================================
ESCALAR DISEÑO A TODOS LOS TEMPLATES (v7.9.0)
============================================================ */
/* Archive destinos grid */
.archive-destinos-grid{padding:60px 0}
.destinos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1100px){.destinos-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.destinos-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:460px){.destinos-grid{grid-template-columns:1fr}}
.destino-card{display:block;text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;background:#fff;border:1px solid #e7eeee;transition:.25s ease;box-shadow:0 8px 22px rgba(0,63,56,.06)}
.destino-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(0,63,56,.14)}
.destino-image{position:relative;aspect-ratio:3/4;background-size:cover;background-position:center;background-color:#e7eeee;display:flex;align-items:flex-end;padding:18px}
.destino-image::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65));pointer-events:none}
.destino-overlay{position:relative;color:#fff;z-index:2;width:100%}
.do-name{font-family:"Playfair Display",serif;font-size:22px;font-weight:700;line-height:1.1;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.do-location{font-size:12px;opacity:.92;margin-top:4px;display:block}
.destino-fav{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.96);border:0;display:grid;place-items:center;color:#003f38;cursor:pointer;z-index:3;transition:.2s}
.destino-fav:hover{transform:scale(1.08)}
.destino-fav.is-saved{color:#e11d48;background:#fff5f7}
.destino-fav.is-saved svg{fill:#e11d48}
.destino-info{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.di-tags{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;color:#666}
.di-cta{color:#0a8a78;font-weight:700;font-size:13px;white-space:nowrap}
/* Single destino */
.dest-hero{position:relative;height:60vh;min-height:420px;max-height:620px;display:flex;align-items:end;color:#fff;overflow:hidden}
.dest-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transform:scale(1.04);transition:transform 8s ease}
.dest-hero:hover .dest-hero-bg{transform:scale(1)}
.dest-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 30%,rgba(0,0,0,.7));z-index:1}
.dest-hero .container{position:relative;z-index:2;width:100%;padding-bottom:60px}
.dest-hero-content{max-width:760px}
.dest-eyebrow{font-size:13px;color:#52d9ca;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.dest-title{font-family:"Playfair Display",serif;font-size:clamp(48px,8vw,96px);line-height:.95;letter-spacing:-.03em;margin:0 0 16px}
.dest-meta-strip{background:#f4fbf9;padding:24px 0;border-bottom:1px solid #e7eeee}
.dms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dms-item{display:flex;align-items:center;gap:12px}
.dms-icon{font-size:24px;background:#fff;border-radius:12px;width:48px;height:48px;display:grid;place-items:center;border:1px solid #e7eeee}
.dms-item span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#666;font-weight:600}
.dms-item strong{font-size:14px;color:#003f38}
@media (max-width:760px){.dms-grid{grid-template-columns:repeat(2,1fr)}}
.dest-body{padding:60px 0}
.dest-body-grid{display:grid;grid-template-columns:1fr 340px;gap:50px;align-items:start}
@media (max-width:1024px){.dest-body-grid{grid-template-columns:1fr}}
.dest-content{font-size:16px;line-height:1.7;color:#333}
.dest-content h2{font-family:"Playfair Display",serif;font-size:32px;color:#003f38;margin:32px 0 16px}
.dest-content p{margin-bottom:18px}
.dest-sidebar{position:sticky;top:100px}
.dest-cta-card{background:linear-gradient(135deg,#003f38,#0a8a78);color:#fff;padding:28px;border-radius:22px;text-align:center;box-shadow:0 18px 40px rgba(0,63,56,.18)}
.dcc-avatar{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,.25);margin:0 auto 14px}
.dest-cta-card h3{font-family:"Playfair Display",serif;font-size:22px;margin:0 0 10px;line-height:1.2}
.dest-cta-card p{font-size:13px;color:#d9fffa;margin-bottom:18px}
.dest-cta-card .btn{display:block;margin-bottom:8px;width:100%}
.dcc-trust{display:flex;justify-content:space-between;font-size:11px;color:#52d9ca;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15);font-weight:600}
.dest-packages{padding:60px 0;background:linear-gradient(180deg,#fff,#f4fbf9)}
/* Blog featured */
.blog-featured{padding:60px 0 0}
.bf-card{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;background:#fff;border-radius:32px;padding:50px;border:1px solid #e7eeee;box-shadow:0 18px 40px rgba(0,63,56,.06);text-decoration:none;color:inherit;transition:.25s}
.bf-card:hover{box-shadow:0 28px 60px rgba(0,63,56,.12)}
.bf-img{height:420px;border-radius:22px;background-size:cover;background-position:center;position:relative}
.bf-badge{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.95);padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;color:#003f38;text-transform:uppercase;letter-spacing:.06em}
.bf-text .section-eyebrow{color:#0a8a78;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:11px;display:block;margin-bottom:10px}
.bf-title{font-family:"Playfair Display",serif;font-size:clamp(28px,3.5vw,42px);line-height:1.1;color:#003f38;margin:8px 0 16px;letter-spacing:-.01em}
.bf-lede{color:#444;font-size:15px;line-height:1.65;margin-bottom:22px}
.bf-meta{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:13px;color:#666}
.bf-avatar{width:32px;height:32px;border-radius:50%}
.bf-cta{color:#0a8a78;font-weight:700;font-size:14px}
@media (max-width:900px){.bf-card{grid-template-columns:1fr;padding:24px;gap:24px}.bf-img{height:280px}}
/* Blog grid */
.blog-grid-section{padding:60px 0}
.section-title-md{font-family:"Playfair Display",serif;font-size:28px;color:#003f38;margin:0 0 28px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;gap:18px}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr}}
.blog-card{display:block;background:#fff;border-radius:18px;overflow:hidden;border:1px solid #e7eeee;text-decoration:none;color:inherit;transition:.25s;box-shadow:0 10px 22px rgba(0,63,56,.05)}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(0,63,56,.12)}
.bc-img{height:200px;background-size:cover;background-position:center;background-color:#e7eeee}
.bc-body{padding:18px 20px}
.bc-meta{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#0a8a78;font-weight:700}
.bc-title{font-family:"Playfair Display",serif;font-size:20px;color:#003f38;line-height:1.2;margin:6px 0 8px}
.bc-excerpt{color:#666;font-size:13px;line-height:1.55;margin:0 0 12px}
.bc-cta{color:#0a8a78;font-weight:700;font-size:13px}
/* Single guía Medium-style */
.guia-article-v2 .guia-hero{position:relative;min-height:520px;display:flex;align-items:end;color:#fff;overflow:hidden}
.guia-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.guia-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 40%,rgba(0,0,0,.75));z-index:1}
.guia-article-v2 .container{position:relative;z-index:2;width:100%;padding:80px 5vw}
.guia-hero-content{max-width:780px}
.guia-eyebrow{font-size:13px;color:#52d9ca;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.guia-article-v2 .guia-title{font-family:"Playfair Display",serif;font-size:clamp(40px,6vw,72px);line-height:1.05;letter-spacing:-.02em;margin:0 0 22px}
.guia-meta{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.95)}
.ga-avatar{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}
.guia-dot{opacity:.5}
.guia-body{max-width:760px!important;padding:60px 24px;font-size:18px;line-height:1.78;color:#222}
.guia-body p{margin-bottom:24px}
.guia-body h2{font-family:"Playfair Display",serif;font-size:32px;color:#003f38;margin:48px 0 18px;letter-spacing:-.01em}
.guia-body h3{font-family:"Playfair Display",serif;font-size:24px;color:#003f38;margin:36px 0 14px}
.guia-body img{border-radius:14px;margin:30px 0;width:100%}
.guia-body blockquote{border-left:4px solid #0a8a78;padding:20px 24px;background:#f4fbf9;border-radius:0 14px 14px 0;margin:32px 0;font-family:"Playfair Display",serif;font-size:22px;font-style:italic;color:#003f38;line-height:1.4}
.guia-body ul,.guia-body ol{margin:18px 0 24px;padding-left:24px}
.guia-body li{margin-bottom:8px}
.guia-footer{margin-top:60px;padding-top:40px;border-top:1px solid #e7eeee}
.gf-card{display:flex;gap:24px;align-items:center;background:#f4fbf9;padding:32px;border-radius:22px;border:1px solid #e7eeee}
.gf-card img{width:80px;height:80px;border-radius:50%;flex-shrink:0;border:3px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.1);margin:0!important}
.gf-card h3{font-family:"Playfair Display",serif;font-size:22px;color:#003f38;margin:0 0 8px}
.gf-card p{font-size:14px;color:#666;margin-bottom:14px;line-height:1.5}
@media (max-width:600px){.gf-card{flex-direction:column;text-align:center;padding:24px}}
.guia-related-v2{padding:60px 0;background:#fafbfb}
/* Page template (estáticas) */
.page-hero{padding:80px 0 50px;background:linear-gradient(135deg,#f4fbf9 0%,#fff 100%);border-bottom:1px solid #e7eeee;text-align:center}
.ph-eyebrow{color:#0a8a78;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin:0 0 14px}
.ph-title{font-family:"Playfair Display",serif;font-size:clamp(40px,6vw,72px);line-height:1.05;color:#003f38;margin:0 0 14px;letter-spacing:-.02em}
.ph-lede{color:#666;font-size:17px;max-width:580px;margin:0 auto;line-height:1.6}
.page-body-section{padding:60px 0;display:grid}
.page-body-section .container{display:grid;grid-template-columns:1fr 320px;gap:50px;align-items:start}
@media (max-width:1024px){.page-body-section .container{grid-template-columns:1fr}}
.page-prose{font-size:16px;line-height:1.75;color:#333;max-width:760px}
.page-prose h2{font-family:"Playfair Display",serif;font-size:28px;color:#003f38;margin:36px 0 14px}
.page-prose h3{font-family:"Playfair Display",serif;font-size:22px;color:#003f38;margin:28px 0 12px}
.page-prose p{margin-bottom:18px}
.page-prose a{color:#0a8a78;font-weight:600}
.page-prose ul,.page-prose ol{margin:18px 0 24px;padding-left:24px}
.page-prose li{margin-bottom:8px}
.page-aside .pa-card{background:linear-gradient(135deg,#003f38,#0a8a78);color:#fff;padding:24px;border-radius:18px;text-align:center;position:sticky;top:100px;box-shadow:0 18px 40px rgba(0,63,56,.18)}
.pa-card img{width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.25);margin:0 auto 14px}
.pa-card h3{font-family:"Playfair Display",serif;font-size:20px;margin:0 0 10px;line-height:1.2}
.pa-card p{font-size:13px;color:#d9fffa;margin-bottom:14px}
.pa-card .btn{width:100%}
/* Search results */
.search-hero-results{padding:60px 0 32px;background:linear-gradient(135deg,#f4fbf9,#fff);border-bottom:1px solid #e7eeee;text-align:center}
.search-redo{display:flex;gap:8px;max-width:560px;margin:24px auto 0;background:#fff;border-radius:999px;padding:6px;border:1px solid #e7eeee;box-shadow:0 8px 22px rgba(0,0,0,.05)}
.search-redo input{flex:1;border:0;background:transparent;font:inherit;font-size:15px;padding:12px 18px;outline:0;color:#17211f}
.search-redo button{background:#003f38;color:#fff;border:0;border-radius:999px;padding:12px 22px;font-weight:700;font-size:14px;cursor:pointer;transition:.2s}
.search-redo button:hover{background:#0a8a78}
.search-results-section{padding:50px 0}
.search-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.search-results-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.search-results-grid{grid-template-columns:1fr}}
.search-result-card{display:block;background:#fff;border-radius:18px;overflow:hidden;border:1px solid #e7eeee;text-decoration:none;color:inherit;transition:.2s;box-shadow:0 10px 22px rgba(0,63,56,.05)}
.search-result-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(0,63,56,.12)}
.src-img{height:180px;background-size:cover;background-position:center;position:relative;background-color:#e7eeee}
.src-type{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.95);padding:5px 10px;border-radius:999px;font-size:10px;font-weight:700;color:#003f38;text-transform:uppercase;letter-spacing:.06em}
.src-body{padding:18px}
.src-body h3{font-family:"Playfair Display",serif;font-size:20px;color:#003f38;margin:0 0 8px;line-height:1.2}
.src-body p{font-size:13px;color:#666;line-height:1.55;margin-bottom:12px}
.src-cta{color:#0a8a78;font-weight:700;font-size:13px}
/* Fix: destino-card con div + link overlay (evita anidados) */
.destino-card{position:relative}
.destino-link{position:absolute;inset:0;z-index:1;text-indent:-9999px}
.destino-fav,.di-tag{position:relative;z-index:2}
.di-tag{display:inline-block;background:#f4fbf9;color:#0a8a78;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;margin-right:4px}
/* ============================================================
FIXES v7.10.0 — slideshow especificidad + estilos botón mobile
============================================================ */
/* Fix #7 — Slideshow especificidad fuerte para evitar ghosting */
.search-hero .hero-slideshow .hero-slide{opacity:0!important;transition:opacity 1.5s ease;z-index:1}
.search-hero .hero-slideshow .hero-slide.is-active{opacity:1!important;z-index:2}
/* Fix #9 — Mobile sticky search button styling (era , ahora