/* =================================================================
VIAJESPARAPROFES.COM — STYLES.CSS
=================================================================
Índice:
1. Variables y tokens de diseño
2. Reset y base
3. Tipografía y utilidades
4. Botones (incluye share button)
5. Navegación
6. Hero — Carrusel a dos columnas
7. Filtros (filter-bar)
8. Secciones genéricas
9. Viajes exclusivos (cards)
10. Comunidad — WhatsApp + Social + Referidos
11. Guías de viaje
12. Planifica tu Claustro
13. ¿Por qué viajar?
14. Voces del Claustro
15. Newsletter
16. Install CTA + Smart Banner + iOS Modal
17. Footer
18. Animaciones y reveals
================================================================= */
/* =================================================================
1. VARIABLES Y TOKENS DE DISEÑO
================================================================= */
:root {
/* Paleta */
--navy: #1B2B4A;
--navy-dark: #0F1B33;
--navy-soft: #2D3F5F;
--teal: #4FAFB5;
--teal-deep: #3D9197;
--teal-light: #7BC5C9;
--teal-pale: #BCDFE1;
--teal-bg: #C9E5E7;
--coral: #C84B3F;
--coral-light: #E76C5F;
--gold: #D4A24A;
--whatsapp: #25D366;
--whatsapp-deep: #1FB855;
/* Fondos y neutros */
--bg: #FFFFFF;
--bg-soft: #F8F6F1;
--bg-warm: #F5EFE6;
--text: #1B2B4A;
--text-muted: #6B7280;
--text-light: #9CA3AF;
--line: #E8EBEF;
--line-soft: #F0F2F5;
/* Tipografía */
--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-script: 'Caveat', cursive;
/* Radios */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
/* Sombras */
--shadow-soft: 0 1px 2px rgba(27, 43, 74, 0.04), 0 4px 16px rgba(27, 43, 74, 0.05);
--shadow-card: 0 2px 4px rgba(27, 43, 74, 0.04), 0 12px 28px rgba(27, 43, 74, 0.08);
--shadow-lift: 0 4px 8px rgba(27, 43, 74, 0.06), 0 20px 50px rgba(27, 43, 74, 0.12);
/* Layout */
--container: 1240px;
--gutter: clamp(20px, 4vw, 40px);
/* Z-index escala */
--z-slide-bg: 1;
--z-slide-overlay: 2;
--z-slide-decor: 3;
--z-hero-content: 10;
--z-hero-controls: 20;
--z-nav: 100;
--z-install-banner: 150;
--z-modal: 200;
}
/* =================================================================
2. RESET Y BASE
================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--text);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
/* =================================================================
3. TIPOGRAFÍA Y UTILIDADES
================================================================= */
h1, h2, h3, h4, h5 {
font-family: var(--font-sans);
color: var(--text);
letter-spacing: -0.02em;
line-height: 1.15;
font-weight: 700;
}
h1 { font-size: clamp(32px, 4.5vw, 52px); }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: clamp(18px, 1.6vw, 22px); }
p { color: var(--text-muted); }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
.script {
font-family: var(--font-script);
font-weight: 600;
color: var(--teal);
font-size: 1.15em;
letter-spacing: 0.005em;
}
/* =================================================================
4. BOTONES
================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 13px 22px;
font-family: var(--font-sans);
font-size: 14.5px;
font-weight: 500;
border-radius: 10px;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
cursor: pointer;
border: 1.5px solid transparent;
}
.btn-primary { background: var(--navy); color: white; }
.btn-primary:hover {
background: var(--navy-dark);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(27, 43, 74, 0.25);
}
.btn-teal { background: var(--teal); color: white; }
.btn-teal:hover {
background: var(--teal-deep);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(79, 175, 181, 0.35);
}
.btn-outline {
background: white;
color: var(--navy);
border-color: var(--line);
}
.btn-outline:hover {
border-color: var(--navy);
background: var(--bg-soft);
}
.btn-light-outline {
background: rgba(255,255,255,0.08);
color: white;
border: 1.5px solid rgba(255,255,255,0.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.btn-light-outline:hover {
background: rgba(255,255,255,0.18);
border-color: white;
transform: translateY(-1px);
}
.btn .arrow { transition: transform 0.22s ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* === Share button (compartir en el claustro) === */
.share-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
background: rgba(37, 211, 102, 0.12);
color: var(--whatsapp-deep);
border: 1px solid rgba(37, 211, 102, 0.25);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.share-btn:hover {
background: var(--whatsapp);
color: white;
border-color: var(--whatsapp);
transform: translateY(-1px);
}
.share-btn svg { width: 14px; height: 14px; }
/* Floating en cards de viaje */
.share-floating {
position: absolute;
top: 12px; right: 12px;
z-index: 4;
width: 38px; height: 38px;
padding: 0;
background: rgba(255, 255, 255, 0.95);
color: var(--whatsapp-deep);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-soft);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.share-floating:hover {
background: var(--whatsapp);
color: white;
transform: scale(1.08);
}
.share-floating svg { width: 16px; height: 16px; }
/* En el hero (sobre fondo oscuro) */
.share-hero {
margin-top: 14px;
background: rgba(255, 255, 255, 0.12);
color: white;
border-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.share-hero:hover {
background: var(--whatsapp);
color: white;
border-color: var(--whatsapp);
}
/* =================================================================
5. NAVEGACIÓN
================================================================= */
.nav {
position: sticky;
top: 0;
z-index: var(--z-nav);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
max-width: var(--container);
margin: 0 auto;
padding: 10px var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* Logo +50% */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo {
height: 84px;
max-height: 84px;
width: auto;
display: block;
image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 980px) { .brand-logo { height: 72px; max-height: 72px; } }
@media (max-width: 540px) { .brand-logo { height: 60px; max-height: 60px; } }
/* Enlaces */
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > li > a, .nav-links > li > .has-dropdown {
font-size: 14.5px;
font-weight: 500;
color: var(--navy);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 0;
cursor: pointer;
}
.nav-links a:hover, .has-dropdown:hover { color: var(--teal); }
.has-dropdown svg { width: 11px; height: 11px; opacity: 0.6; transition: transform 0.2s ease; }
.has-dropdown:hover svg { transform: rotate(180deg); }
/* CTA group */
.nav-cta { display: flex; gap: 10px; align-items: center; }
/* Botón Instalar App del Club (en nav) */
.nav-install {
display: inline-flex;
align-items: center;
gap: 7px;
background: transparent;
color: var(--navy);
border: 1.5px dashed var(--teal);
padding: 9px 16px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 600;
transition: all 0.2s ease;
}
.nav-install:hover {
background: var(--teal-pale);
border-color: var(--teal);
border-style: solid;
}
.nav-install svg { color: var(--teal-deep); }
/* Hide install button when app is already installed */
body.is-installed .nav-install,
body.is-installed .install-cta { display: none; }
/* Pill ofertas exclusivas */
.nav-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--teal);
color: white;
padding: 11px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
}
.nav-pill:hover { background: var(--teal-deep); transform: translateY(-1px); }
.profile-btn {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--bg-soft);
border: 1.5px solid var(--line);
display: flex; align-items: center; justify-content: center;
transition: all 0.2s ease;
}
.profile-btn:hover { border-color: var(--navy); background: white; }
.menu-toggle { display: none; }
@media (max-width: 1280px) {
.nav-install span { display: none; }
.nav-install { padding: 9px 11px; }
}
@media (max-width: 1100px) {
.nav-links { gap: 20px; }
.nav-links li:nth-child(n+5) { display: none; }
}
@media (max-width: 880px) {
.nav-links, .nav-pill span, .nav-install { display: none; }
.menu-toggle {
display: flex; flex-direction: column; gap: 4px;
padding: 10px; cursor: pointer;
}
.menu-toggle span {
width: 22px; height: 1.6px;
background: var(--navy); border-radius: 2px;
}
}
/* =================================================================
6. HERO — CARRUSEL A DOS COLUMNAS
================================================================= */
.hero {
position: relative;
min-height: 640px;
background: var(--navy);
overflow: hidden;
}
@media (max-width: 880px) { .hero { min-height: 820px; } }
@media (max-width: 540px) { .hero { min-height: 880px; } }
/* === Capa de fondos (slides) === */
.hero-slides { position: absolute; inset: 0; z-index: var(--z-slide-bg); }
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
pointer-events: none;
}
.hero-slide.active {
opacity: 1;
pointer-events: auto;
}
.slide-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.05);
transition: transform 8s ease-out, opacity 0.6s ease;
}
.hero-slide.active .slide-bg { transform: scale(1); }
/* Skeleton shimmer durante carga */
.slide-bg.loading {
opacity: 0.6;
background-image: none !important;
background-color: var(--navy);
background: linear-gradient(110deg,
rgba(15, 27, 51, 1) 8%,
rgba(45, 63, 95, 0.95) 18%,
rgba(15, 27, 51, 1) 33%);
background-size: 200% 100%;
animation: shimmer 1.6s infinite linear;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.slide-bg.loaded { opacity: 1; animation: none; }
/* Overlay oscuro para legibilidad */
.slide-overlay {
position: absolute;
inset: 0;
z-index: var(--z-slide-overlay);
background: linear-gradient(110deg,
rgba(15, 27, 51, 0.85) 0%,
rgba(15, 27, 51, 0.7) 40%,
rgba(15, 27, 51, 0.55) 70%,
rgba(15, 27, 51, 0.5) 100%);
}
@media (max-width: 880px) {
.slide-overlay {
/* Degradado vertical más sutil:
- Arriba (textos dinámicos): semitransparente, deja ver imagen
- Centro (imagen): muy transparente
- Abajo (texto fijo): más oscuro para legibilidad */
background: linear-gradient(180deg,
rgba(15, 27, 51, 0.55) 0%,
rgba(15, 27, 51, 0.30) 35%,
rgba(15, 27, 51, 0.30) 60%,
rgba(15, 27, 51, 0.78) 100%);
}
}
/* Slide WhatsApp: gradiente verde sin foto */
.slide-3 .slide-bg {
background:
radial-gradient(ellipse at 80% 30%, rgba(37, 211, 102, 0.45) 0%, transparent 55%),
radial-gradient(ellipse at 20% 80%, rgba(79, 175, 181, 0.5) 0%, transparent 55%),
linear-gradient(135deg, #0F1B33 0%, #1B5E3F 50%, #128C5E 100%) !important;
}
.slide-3 .slide-bg.loading { animation: none; opacity: 1; }
.slide-3 .slide-decor {
position: absolute;
right: 6%; top: 50%;
transform: translateY(-50%);
width: clamp(180px, 28vw, 340px);
opacity: 0.18;
z-index: var(--z-slide-decor);
color: white;
}
@media (max-width: 880px) {
.slide-3 .slide-decor { right: -8%; top: 78%; opacity: 0.12; }
}
/* === Contenedor del contenido del hero (siempre por encima) === */
.hero-inner {
position: relative;
z-index: var(--z-hero-content);
max-width: var(--container);
margin: 0 auto;
padding: 80px var(--gutter) 130px;
min-height: 640px;
display: flex;
align-items: center;
}
@media (max-width: 880px) {
.hero-inner {
min-height: 640px;
padding-top: 48px;
padding-bottom: 90px;
align-items: flex-start;
}
}
@media (max-width: 540px) {
.hero-inner {
min-height: 680px;
padding-top: 36px;
padding-bottom: 80px;
}
}
/* === Grid de dos columnas === */
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(28px, 5vw, 80px);
align-items: center;
width: 100%;
}
@media (max-width: 880px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 40px;
/* Convertimos a flex column para poder reordenar fácil */
display: flex;
flex-direction: column;
width: 100%;
}
/* En móvil: textos dinámicos ARRIBA, texto fijo ABAJO */
.hero-grid .hero-dynamic { order: 1; width: 100%; box-sizing: border-box; }
.hero-grid .hero-fixed { order: 2; width: 100%; box-sizing: border-box; max-width: 100%; }
/* Sin botones en el hero móvil — los CTAs ya están más abajo
en otras secciones, esto da aire al carrusel */
.hero-grid .hero-ctas { display: none; }
/* El "Compartir en el claustro" del hero también lo quitamos en móvil,
se reubica en la sección "¿Por qué viajar con nosotros?" */
.hero-grid .share-hero { display: none; }
}
@media (max-width: 540px) {
.hero-grid { gap: 28px; }
}
/* === Columna izquierda: FIJA === */
.hero-fixed {
color: white;
max-width: 600px;
}
.hero-fixed h1 {
color: white;
font-size: clamp(28px, 4.4vw, 50px);
line-height: 1.1;
margin-bottom: 18px;
font-weight: 700;
letter-spacing: -0.025em;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.hero-fixed h1 .lead-line {
display: block;
font-size: 0.78em;
font-weight: 600;
color: var(--teal-light);
margin-bottom: 10px;
letter-spacing: -0.01em;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.hero-fixed h1 .accent {
font-family: var(--font-script);
font-weight: 600;
color: var(--teal-light);
font-size: 1.18em;
display: inline-block;
line-height: 1;
}
.hero-subtitle {
color: rgba(255, 255, 255, 0.85);
font-size: clamp(14.5px, 1.3vw, 17px);
line-height: 1.55;
margin-bottom: 28px;
max-width: 520px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 540px) {
.hero-fixed h1 { font-size: clamp(24px, 7vw, 32px); margin-bottom: 14px; }
.hero-fixed h1 .lead-line { font-size: 0.72em; }
.hero-subtitle { font-size: 14.5px; margin-bottom: 22px; }
}
.hero-ctas {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.hero-ctas .btn-primary {
background: white;
color: var(--navy);
}
.hero-ctas .btn-primary:hover {
background: var(--bg-warm);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
/* === Columna derecha: DINÁMICA === */
.hero-dynamic {
position: relative;
min-height: 220px;
padding: clamp(20px, 3vw, 36px);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-lg);
}
@media (max-width: 880px) {
.hero-dynamic {
min-height: 240px;
width: 100%; /* el flex parent puede hacerle colapsar el ancho */
box-sizing: border-box;
background: rgba(15, 27, 51, 0.45);
border-color: rgba(255, 255, 255, 0.22);
}
}
@media (max-width: 540px) {
.hero-dynamic {
min-height: 220px;
padding: 22px 20px;
}
}
.hero-msg {
position: absolute;
inset: 0;
padding: clamp(20px, 3vw, 36px);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.6s ease, transform 0.6s ease;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-msg.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition-delay: 0.2s;
}
.hero-msg-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
color: white;
padding: 6px 14px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 14px;
align-self: flex-start;
}
.hero-msg-tag.wa {
background: rgba(37, 211, 102, 0.3);
border-color: rgba(37, 211, 102, 0.55);
}
.hero-msg-title {
color: white;
font-size: clamp(18px, 2.2vw, 26px);
line-height: 1.25;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: -0.015em;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero-msg-text {
color: rgba(255, 255, 255, 0.88);
font-size: clamp(13.5px, 1.2vw, 15.5px);
line-height: 1.55;
font-weight: 400;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.hero-msg-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
color: white;
font-size: 14px;
font-weight: 600;
border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
padding-bottom: 1px;
transition: border-color 0.2s ease;
align-self: flex-start;
}
.hero-msg-link:hover { border-color: white; }
.hero-msg-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.hero-msg-link:hover svg { transform: translateX(3px); }
/* === Flechas del carrusel === */
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: var(--z-hero-controls);
width: 50px; height: 50px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
}
.hero-arrow:hover {
background: rgba(255, 255, 255, 0.95);
color: var(--navy);
transform: translateY(-50%) scale(1.06);
}
.hero-arrow.prev { left: 24px; }
.hero-arrow.next { right: 24px; }
.hero-arrow svg { width: 20px; height: 20px; }
@media (max-width: 880px) {
.hero-arrow { width: 42px; height: 42px; }
.hero-arrow.prev { left: 12px; }
.hero-arrow.next { right: 12px; }
}
@media (max-width: 540px) { .hero-arrow { display: none; } }
/* === Dots del carrusel ===
Puntos circulares blancos clásicos: dejan claro al usuario que
se trata de un carrusel y en qué slide está (X de N).
Posición: por encima del filter-bar (que se mete -60px en el hero).
============================================================ */
.hero-dots {
position: absolute;
left: 0; right: 0;
bottom: 100px;
z-index: var(--z-hero-controls);
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
padding: 10px 16px;
pointer-events: none; /* El contenedor no, solo los dots */
}
.hero-dots::before {
/* Fondo translúcido tipo "píldora" para garantizar contraste sobre cualquier foto */
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: max-content;
height: 100%;
padding: 0 18px;
background: rgba(15, 27, 51, 0.35);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: -1;
}
.hero-dot {
pointer-events: auto;
width: 10px; height: 10px;
background: rgba(255, 255, 255, 0.55);
border: none;
border-radius: 50%;
padding: 0;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.hero-dot:hover {
background: rgba(255, 255, 255, 0.85);
transform: scale(1.15);
}
.hero-dot.active {
background: white;
width: 30px;
border-radius: 999px;
transform: scale(1);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
/* Barra de progreso dentro del dot activo, sincronizada con autoplay (5s) */
.hero-dot.active::after {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
background: var(--teal);
width: 0;
border-radius: 999px;
animation: dotProgress 5s linear forwards;
}
.hero-dot.active.paused::after { animation-play-state: paused; }
@keyframes dotProgress { to { width: 100%; } }
@media (max-width: 540px) {
.hero-dots { bottom: 90px; gap: 10px; }
.hero-dot { width: 9px; height: 9px; }
.hero-dot.active { width: 26px; }
}
/* =================================================================
7. FILTER BAR
================================================================= */
.filter-bar-wrap {
position: relative;
z-index: 5;
margin-top: -60px;
padding: 0 var(--gutter);
max-width: var(--container);
margin-left: auto;
margin-right: auto;
}
.filter-bar {
background: white;
border-radius: var(--radius-lg);
padding: 24px 36px;
box-shadow: var(--shadow-lift);
border: 1px solid var(--line-soft);
}
.filter-bar-title {
text-align: center;
font-size: 15px;
font-weight: 600;
color: var(--navy);
margin-bottom: 18px;
}
.filters {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.filter-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
transition: background 0.2s ease;
}
.filter-item:hover { background: var(--bg-soft); }
.filter-icon {
width: 38px; height: 38px;
border-radius: 8px;
background: var(--bg-soft);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.filter-text strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--navy);
letter-spacing: -0.01em;
}
.filter-text span {
display: block;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.filter-link {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
color: var(--navy);
font-size: 13.5px;
font-weight: 500;
border-left: 1px solid var(--line);
}
.filter-link:hover { color: var(--teal); }
.filter-link svg { width: 14px; height: 14px; }
@media (max-width: 980px) {
.filters { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.filter-link { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); justify-content: center; padding-top: 14px; margin-top: 6px; }
}
@media (max-width: 600px) {
.filter-bar { padding: 20px; }
.filters { grid-template-columns: 1fr; }
}
/* =================================================================
8. SECCIONES GENÉRICAS
================================================================= */
.section { padding: clamp(60px, 8vw, 90px) 0; }
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 28px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.section-head-text { flex: 1; min-width: 280px; }
.section-head h2 {
font-size: clamp(26px, 3vw, 34px);
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.section-head .h2-accent {
width: 60px; height: 2px;
background: var(--teal);
margin-bottom: 14px;
}
.section-head p {
font-size: 15.5px;
color: var(--text-muted);
margin-top: 6px;
}
/* =================================================================
9. VIAJES EXCLUSIVOS (CARDS)
================================================================= */
.viajes-section { padding: clamp(50px, 6vw, 70px) 0 clamp(60px, 7vw, 90px); }
.viajes-grid-wrap { position: relative; }
.viajes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 1100px) { .viajes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .viajes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .viajes-grid { grid-template-columns: 1fr; } }
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px; height: 42px;
background: white;
border-radius: 50%;
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-soft);
cursor: pointer;
z-index: 2;
transition: all 0.2s ease;
}
.nav-arrow:hover { border-color: var(--navy); background: var(--bg-soft); }
.nav-arrow.left { left: -54px; }
.nav-arrow.right { right: -54px; }
@media (max-width: 1380px) { .nav-arrow { display: none; } }
.viaje-card {
background: white;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--line-soft);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.viaje-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
border-color: transparent;
}
.viaje-img {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
background: linear-gradient(135deg, #6B8AB0, #2D4A6B);
}
.viaje-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease, opacity 0.6s ease;
opacity: 0;
}
.viaje-img img.loaded { opacity: 1; }
.viaje-card:hover .viaje-img img.loaded { transform: scale(1.05); }
/* Skeleton shimmer en cards */
.viaje-img::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.15) 30%,
rgba(255,255,255,0) 60%);
background-size: 200% 100%;
animation: shimmer 1.6s infinite linear;
z-index: 1;
}
.viaje-img:has(img.loaded)::before { display: none; }
.viaje-img-fallback {
position: absolute; inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.85);
font-size: 24px;
font-weight: 600;
}
.viaje-img-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
z-index: 2;
}
.viaje-badge {
position: absolute;
top: 12px; left: 12px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
color: white;
z-index: 3;
}
.viaje-badge.hot { background: var(--coral); }
.viaje-badge.new { background: var(--teal); }
.viaje-badge.available { background: var(--teal-deep); }
.viaje-img-info {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 16px 18px;
color: white;
z-index: 3;
}
.viaje-img-info h3 {
font-size: 22px;
font-weight: 700;
color: white;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.viaje-img-info .dates {
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.95);
margin-bottom: 4px;
}
.viaje-img-info .duration {
font-size: 12px;
color: rgba(255,255,255,0.75);
display: inline-flex;
align-items: center;
gap: 5px;
}
.viaje-body {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.viaje-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12.5px;
color: var(--text-muted);
padding-bottom: 12px;
border-bottom: 1px solid var(--line-soft);
}
.viaje-meta-row span { display: inline-flex; align-items: center; gap: 5px; }
.viaje-meta-row svg { width: 13px; height: 13px; opacity: 0.8; }
.viaje-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.viaje-price { font-size: 13px; color: var(--text-muted); }
.viaje-price strong {
color: var(--coral);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
}
/* =================================================================
10. COMUNIDAD — WHATSAPP + SOCIAL + REFERIDOS
================================================================= */
.comunidad-section {
background: var(--bg-soft);
padding: clamp(70px, 9vw, 100px) 0;
}
.comunidad-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 26px;
}
@media (max-width: 980px) { .comunidad-grid { grid-template-columns: 1fr; } }
.whatsapp-card {
background: linear-gradient(135deg, #1B2B4A 0%, #2D4A6B 100%);
color: white;
border-radius: var(--radius-xl);
padding: clamp(32px, 4vw, 48px);
position: relative;
overflow: hidden;
}
.whatsapp-card::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(37, 211, 102, 0.18) 0%, transparent 65%);
}
.whatsapp-card::after {
content: '';
position: absolute;
bottom: -60px; left: -60px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(79, 175, 181, 0.12) 0%, transparent 70%);
}
.wa-content { position: relative; z-index: 2; }
.wa-icon-circle {
width: 56px; height: 56px;
background: var(--whatsapp);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}
.wa-icon-circle svg { width: 30px; height: 30px; }
.whatsapp-card h3 {
font-size: clamp(22px, 2.4vw, 28px);
color: white;
margin-bottom: 12px;
font-weight: 700;
}
.whatsapp-card .wa-script {
font-family: var(--font-script);
color: var(--teal-light);
font-size: 26px;
font-weight: 600;
display: block;
margin-bottom: 16px;
}
.whatsapp-card p {
color: rgba(255,255,255,0.78);
font-size: 15px;
line-height: 1.6;
margin-bottom: 22px;
max-width: 460px;
}
.wa-bullets {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 26px;
}
.wa-bullet {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: rgba(255,255,255,0.85);
}
.wa-bullet::before {
content: '✓';
color: var(--whatsapp);
font-weight: 700;
font-size: 14px;
}
.wa-cta {
background: var(--whatsapp);
color: var(--navy-dark);
font-weight: 600;
border: none;
}
.wa-cta:hover {
background: var(--whatsapp-deep);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}
.wa-counter {
margin-top: 18px;
font-family: var(--font-script);
font-size: 18px;
color: var(--teal-light);
position: relative;
z-index: 2;
}
/* Social column */
.social-column {
background: white;
border-radius: var(--radius-xl);
padding: 32px;
border: 1px solid var(--line-soft);
display: flex;
flex-direction: column;
}
.social-column h3 { font-size: 22px; margin-bottom: 8px; }
.social-column p.lead {
font-size: 14.5px;
color: var(--text-muted);
margin-bottom: 22px;
}
.social-feed {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 24px;
}
.social-feed-item {
aspect-ratio: 1/1;
border-radius: 8px;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #6B8AB0, #2D4A6B);
cursor: pointer;
transition: transform 0.25s ease;
}
.social-feed-item:hover { transform: scale(1.04); }
.social-feed-item img { width: 100%; height: 100%; object-fit: cover; }
.social-feed-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4));
}
.social-feed-icon {
position: absolute;
bottom: 6px; right: 6px;
z-index: 2;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
display: flex;
align-items: center;
justify-content: center;
}
.social-feed-icon svg { width: 12px; height: 12px; color: var(--navy); }
.social-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: auto;
}
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 14px;
border-radius: 10px;
font-size: 13.5px;
font-weight: 500;
border: 1.5px solid var(--line);
transition: all 0.2s ease;
background: white;
color: var(--navy);
text-decoration: none;
cursor: pointer;
min-width: 0;
}
.social-btn:hover {
border-color: var(--navy);
background: var(--bg-soft);
transform: translateY(-1px);
}
.social-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
/* IMPORTANTE: el SVG no roba el click al anchor padre */
pointer-events: none;
}
/* Colores oficiales por red */
.social-btn.ig { color: #E1306C; border-color: rgba(225, 48, 108, 0.25); }
.social-btn.ig:hover { background: rgba(225, 48, 108, 0.06); border-color: #E1306C; }
.social-btn.tk { color: #000; border-color: rgba(0, 0, 0, 0.25); }
.social-btn.tk:hover { background: rgba(0, 0, 0, 0.04); border-color: #000; }
.social-btn.fb { color: #1877F2; border-color: rgba(24, 119, 242, 0.25); }
.social-btn.fb:hover { background: rgba(24, 119, 242, 0.06); border-color: #1877F2; }
.social-btn.yt { color: #FF0000; border-color: rgba(255, 0, 0, 0.25); }
.social-btn.yt:hover { background: rgba(255, 0, 0, 0.05); border-color: #FF0000; }
/* En móvil pueden quedar 4 en columna si el espacio aprieta */
@media (max-width: 380px) {
.social-buttons { grid-template-columns: 1fr; }
}
/* Trae a un compañero */
.referral-mini {
margin-top: 28px;
background: white;
border: 1.5px dashed var(--teal);
border-radius: var(--radius-md);
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.referral-mini-text strong {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--navy);
margin-bottom: 2px;
}
.referral-mini-text span {
font-size: 13.5px;
color: var(--text-muted);
}
.referral-mini .btn { padding: 11px 18px; font-size: 13.5px; }
/* =================================================================
11. GUÍAS DE VIAJE
================================================================= */
.guias-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 980px) { .guias-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .guias-grid { grid-template-columns: 1fr; } }
.guia-card {
background: white;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--line-soft);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.guia-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
}
.guia-img {
position: relative;
aspect-ratio: 5/4;
overflow: hidden;
background: linear-gradient(135deg, #6B8AB0, #2D4A6B);
}
.guia-img img {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s ease;
}
.guia-img img.loaded { opacity: 1; }
.guia-img::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.12) 30%,
rgba(255,255,255,0) 60%);
background-size: 200% 100%;
animation: shimmer 1.6s infinite linear;
z-index: 1;
}
.guia-img:has(img.loaded)::before { display: none; }
.guia-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 50%, rgba(0,0,0,0.5) 100%);
z-index: 2;
}
.guia-overlay-title {
position: absolute;
top: 16px; left: 16px; right: 16px;
z-index: 3;
font-size: 22px;
font-weight: 800;
color: white;
text-transform: uppercase;
line-height: 1.05;
letter-spacing: 0.01em;
text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.guia-overlay-title small {
display: block;
font-size: 18px;
font-weight: 700;
margin-top: 2px;
}
.guia-body { padding: 16px 18px 18px; }
.guia-body h4 {
font-size: 15.5px;
font-weight: 600;
color: var(--navy);
margin-bottom: 4px;
}
.guia-body p {
font-size: 13.5px;
color: var(--text-muted);
margin-bottom: 10px;
}
.guia-price {
color: var(--teal);
font-size: 19px;
font-weight: 700;
}
/* =================================================================
12. PLANIFICA TU CLAUSTRO
================================================================= */
.claustro-section {
background: var(--bg-soft);
padding: clamp(60px, 8vw, 90px) 0;
}
.claustro-card {
background: white;
border-radius: var(--radius-xl);
padding: clamp(36px, 5vw, 60px);
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 50px;
align-items: center;
border: 1px solid var(--line-soft);
position: relative;
overflow: hidden;
}
.claustro-card::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(79, 175, 181, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.claustro-content { position: relative; z-index: 2; }
.claustro-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--teal-pale);
color: var(--teal-deep);
padding: 5px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: 16px;
}
.claustro-content h2 {
font-size: clamp(22px, 2.6vw, 32px);
line-height: 1.2;
margin-bottom: 14px;
text-wrap: balance;
}
.claustro-content p {
font-size: 15.5px;
line-height: 1.6;
margin-bottom: 24px;
}
@media (max-width: 540px) {
.claustro-content h2 { font-size: clamp(20px, 5.5vw, 24px); }
.claustro-content p { font-size: 14.5px; }
}
.claustro-features {
position: relative;
z-index: 2;
display: grid;
gap: 14px;
}
.claustro-feat {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
align-items: start;
padding: 16px 18px;
background: var(--bg-soft);
border-radius: var(--radius-md);
transition: background 0.2s ease;
}
.claustro-feat:hover { background: var(--teal-pale); }
.claustro-feat-icon {
width: 44px; height: 44px;
background: white;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border: 1px solid var(--line-soft);
}
.claustro-feat-text strong {
display: block;
font-size: 14.5px;
font-weight: 600;
color: var(--navy);
margin-bottom: 2px;
}
.claustro-feat-text span {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.5;
}
@media (max-width: 880px) {
.claustro-card { grid-template-columns: 1fr; gap: 32px; }
}
/* =================================================================
13. ¿POR QUÉ VIAJAR?
================================================================= */
.porque-section { padding: clamp(60px, 7vw, 80px) 0; }
.porque-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
@media (max-width: 880px) { .porque-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .porque-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; } }
.porque-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.porque-icon {
width: 52px; height: 52px;
background: var(--bg-soft);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy);
}
.porque-icon svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.porque-item h4 { font-size: 16px; font-weight: 700; margin: 0; }
.porque-item p { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
/* === Banda de "Compartir en el claustro" al final de la sección === */
.porque-share {
margin-top: 40px;
padding: 22px 26px;
background: linear-gradient(135deg, var(--teal-pale) 0%, rgba(212, 162, 74, 0.15) 100%);
border-radius: var(--radius-lg);
border: 1px solid rgba(79, 175, 181, 0.25);
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
flex-wrap: wrap;
}
.porque-share__text {
flex: 1 1 320px;
min-width: 0;
}
.porque-share__text strong {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--navy);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.porque-share__text span {
display: block;
font-size: 14px;
color: var(--navy-soft);
line-height: 1.5;
}
.share-claustro {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: var(--navy);
color: white;
border: none;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.share-claustro:hover {
background: var(--navy-dark);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(15, 27, 51, 0.25);
}
.share-claustro svg {
width: 16px;
height: 16px;
}
@media (max-width: 600px) {
.porque-share {
flex-direction: column;
align-items: stretch;
text-align: center;
padding: 22px 20px;
}
.porque-share__text { flex: 1 1 auto; }
.share-claustro { justify-content: center; width: 100%; }
}
/* =================================================================
14. VOCES DEL CLAUSTRO
================================================================= */
.voces-section {
padding: clamp(40px, 5vw, 60px) 0;
background: var(--bg-soft);
}
.voces-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 14px;
}
.voces-head .voces-title {
display: flex;
align-items: center;
gap: 10px;
font-size: clamp(18px, 2vw, 22px);
font-weight: 700;
color: var(--navy);
}
.voces-head .stars-mini {
color: var(--gold);
font-size: 14px;
letter-spacing: 1px;
}
.voces-head small {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.voces-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 880px) { .voces-grid { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; } }
.voz-card {
background: white;
padding: 20px 22px;
border-radius: var(--radius-md);
border: 1px solid var(--line-soft);
display: flex;
flex-direction: column;
gap: 12px;
transition: all 0.25s ease;
}
.voz-card:hover { border-color: var(--teal-pale); box-shadow: var(--shadow-soft); }
.voz-text {
font-size: 14px;
line-height: 1.55;
color: var(--navy);
font-weight: 500;
flex: 1;
}
.voz-author {
display: flex;
align-items: center;
gap: 10px;
padding-top: 12px;
border-top: 1px solid var(--line-soft);
}
.voz-avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--teal-light), var(--teal));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.voz-author strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--navy);
line-height: 1.3;
}
.voz-author small {
display: block;
font-size: 11.5px;
color: var(--text-muted);
}
/* =================================================================
15. NEWSLETTER
================================================================= */
.newsletter-section {
background: var(--teal-bg);
padding: clamp(60px, 7vw, 80px) 0;
position: relative;
overflow: hidden;
}
.newsletter-section::before {
content: '';
position: absolute;
top: -40px; left: -40px;
width: 240px; height: 240px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: contain;
}
.newsletter-section::after {
content: '';
position: absolute;
bottom: -60px; right: -60px;
width: 200px; height: 200px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: contain;
}
.newsletter-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
position: relative;
z-index: 2;
}
@media (max-width: 880px) { .newsletter-inner { grid-template-columns: 1fr; gap: 24px; } }
.newsletter-content h2 {
font-size: clamp(24px, 2.8vw, 30px);
font-weight: 700;
color: var(--navy);
margin-bottom: 12px;
}
.newsletter-content p {
font-size: 15px;
color: var(--navy-soft);
line-height: 1.55;
}
.newsletter-form {
display: flex;
gap: 8px;
background: white;
padding: 6px;
border-radius: 12px;
box-shadow: var(--shadow-soft);
}
.newsletter-form input {
flex: 1;
padding: 12px 16px;
border: none;
background: transparent;
font-family: inherit;
font-size: 14.5px;
color: var(--navy);
outline: none;
min-width: 0;
}
.newsletter-form input::placeholder { color: var(--text-light); }
.newsletter-form .btn { padding: 11px 22px; }
.newsletter-fine {
margin-top: 12px;
color: var(--navy-soft);
font-family: var(--font-script);
font-size: 18px;
}
/* =================================================================
16. INSTALL CTA + SMART BANNER + iOS MODAL
================================================================= */
.install-cta {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
padding: clamp(40px, 5vw, 60px) 0;
position: relative;
overflow: hidden;
}
.install-cta::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(79, 175, 181, 0.18) 0%, transparent 65%);
}
.install-cta-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
position: relative;
z-index: 2;
}
@media (max-width: 760px) { .install-cta-inner { grid-template-columns: 1fr; text-align: center; } }
.install-cta-content {
display: flex;
align-items: center;
gap: 18px;
}
@media (max-width: 760px) { .install-cta-content { flex-direction: column; } }
.install-cta-icon {
width: 60px; height: 60px;
background: white;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.install-cta-icon svg { width: 30px; height: 30px; color: var(--navy); }
.install-cta-text h3 {
color: white;
font-size: 20px;
font-weight: 700;
margin-bottom: 4px;
}
.install-cta-text p {
color: rgba(255,255,255,0.7);
font-size: 14px;
margin: 0;
}
.install-cta-btn {
background: white;
color: var(--navy);
font-weight: 600;
padding: 14px 26px;
}
.install-cta-btn:hover {
background: var(--bg-warm);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
/* === Smart install banner (móvil/tablet) === */
.install-banner {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
z-index: var(--z-install-banner);
background: white;
border-radius: var(--radius-lg);
box-shadow: 0 10px 40px rgba(15, 27, 51, 0.25), 0 4px 12px rgba(15, 27, 51, 0.1);
border: 1px solid var(--line-soft);
padding: 14px 16px;
display: flex;
align-items: center;
gap: 14px;
max-width: 480px;
margin: 0 auto;
transform: translateY(120%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.install-banner.show { transform: translateY(0); }
.install-banner-icon {
width: 48px; height: 48px;
background: linear-gradient(135deg, var(--teal), var(--teal-deep));
border-radius: 12px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.install-banner-icon img {
width: 100%; height: 100%; object-fit: cover;
}
.install-banner-text { flex: 1; min-width: 0; }
.install-banner-text strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--navy);
margin-bottom: 2px;
}
.install-banner-text span {
font-size: 12.5px;
color: var(--text-muted);
display: block;
line-height: 1.35;
}
.install-banner-actions {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.install-banner-btn {
padding: 8px 14px;
background: var(--navy);
color: white;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
transition: background 0.2s ease;
}
.install-banner-btn:hover { background: var(--navy-dark); }
.install-banner-close {
width: 32px; height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: all 0.2s ease;
}
.install-banner-close:hover {
background: var(--bg-soft);
color: var(--navy);
}
.install-banner-close svg { width: 14px; height: 14px; }
@media (max-width: 480px) {
.install-banner-text strong { font-size: 13px; }
.install-banner-text span { font-size: 11.5px; }
.install-banner-btn { padding: 7px 12px; font-size: 12.5px; }
}
/* === iOS instructions modal === */
.ios-modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: rgba(15, 27, 51, 0.6);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.ios-modal.show { display: flex; }
.ios-modal-content {
background: white;
border-radius: var(--radius-lg);
padding: 28px 24px;
max-width: 380px;
width: 100%;
text-align: center;
position: relative;
}
.ios-modal h3 {
font-size: 18px;
margin-bottom: 8px;
color: var(--navy);
}
.ios-modal p {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 18px;
line-height: 1.5;
}
.ios-modal-step {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg-soft);
border-radius: 10px;
margin-bottom: 8px;
text-align: left;
font-size: 13.5px;
color: var(--navy);
}
.ios-modal-step strong {
color: var(--teal-deep);
font-size: 13px;
display: inline-block;
width: 20px;
}
.ios-modal-close {
margin-top: 14px;
background: var(--navy);
color: white;
padding: 11px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
width: 100%;
cursor: pointer;
border: none;
}
/* =================================================================
17. FOOTER
================================================================= */
footer {
background: var(--navy-dark);
color: rgba(255,255,255,0.7);
padding: 60px 0 22px;
}
/* === Footer principal: 3 columnas con Flexbox === */
.footer-grid {
display: flex;
flex-wrap: wrap;
gap: 48px;
margin-bottom: 36px;
}
.footer-brand { flex: 2 1 320px; min-width: 0; }
.footer-col { flex: 1 1 180px; min-width: 0; }
@media (max-width: 720px) {
.footer-grid { gap: 32px; }
.footer-brand { flex: 1 1 100%; }
.footer-col { flex: 1 1 calc(50% - 16px); }
}
@media (max-width: 480px) {
.footer-col { flex: 1 1 100%; }
}
.footer-brand .brand-logo {
height: 96px;
max-height: 96px;
background: var(--bg-warm);
padding: 8px 14px;
border-radius: 10px;
}
.footer-brand p {
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.6);
margin: 18px 0 22px;
max-width: 320px;
}
.footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.foot-social {
width: 38px; height: 38px;
background: rgba(255,255,255,0.06);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
transition: all 0.2s ease;
/* Aseguramos que el anchor sea fully clickable */
text-decoration: none;
cursor: pointer;
flex-shrink: 0;
}
.foot-social:hover { background: var(--teal); transform: translateY(-2px); }
.foot-social:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.foot-social svg {
width: 17px;
height: 17px;
display: block;
/* IMPORTANTE: el SVG no debe robar el click al anchor padre */
pointer-events: none;
}
.footer-col h5 {
color: white;
font-size: 15px;
font-weight: 600;
margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col a {
font-size: 14px;
color: rgba(255,255,255,0.6);
transition: color 0.2s ease;
}
.footer-col a:hover { color: white; }
.contact-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: rgba(255,255,255,0.7);
margin-bottom: 10px;
}
.contact-item svg { width: 14px; height: 14px; flex-shrink: 0; }
/* === Footer bottom: legales en una línea horizontal compacta === */
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 22px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
font-size: 13px;
color: rgba(255,255,255,0.5);
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 18px;
}
.footer-legal-links a,
.footer-legal-links button {
font-size: 12.5px;
color: rgba(255,255,255,0.55);
background: transparent;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
transition: color 0.2s ease;
}
.footer-legal-links a:hover,
.footer-legal-links button:hover {
color: white;
text-decoration: underline;
}
.footer-copyright {
font-size: 12.5px;
color: rgba(255,255,255,0.45);
}
/* =================================================================
18. ANIMACIONES Y REVEALS
================================================================= */
.scroll-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* =================================================================
19. FEEDBACK DEL BOTÓN COMPARTIR (cuando copia al portapapeles)
================================================================= */
.share-btn.share-copied {
background: var(--whatsapp);
color: white;
border-color: var(--whatsapp);
}
.share-btn.share-copied svg { color: white; }
/* =================================================================
20. AJUSTES TIPOGRÁFICOS RESPONSIVE GLOBALES
================================================================= */
/* Títulos H2 de secciones — evitar cortes feos en móvil */
.section-head h2,
.newsletter-content h2,
.whatsapp-card h3 {
text-wrap: balance;
}
@media (max-width: 540px) {
/* Ajuste fino general en móviles pequeños */
.section-head h2 { font-size: clamp(20px, 5.6vw, 26px); }
.section-head h2 svg { display: none; } /* ocultar iconitos decorativos */
.whatsapp-card h3 { font-size: 20px; }
.whatsapp-card .wa-script { font-size: 22px; }
.newsletter-content h2 { font-size: clamp(20px, 5.6vw, 24px); }
.voces-head .voces-title { font-size: 16px; flex-wrap: wrap; }
/* Comunidad — título centrado más compacto */
.comunidad-section .section-head h2 {
font-size: clamp(20px, 5.8vw, 26px);
flex-direction: column;
text-align: center;
gap: 4px;
}
}
/* =================================================================
21. REDISEÑO MOBILE COMPLETO (≤768px)
=================================================================
Bloque enfocado en mejorar la UX móvil:
· Hero: respiración y proporción
· Viajes: horizontal scroll en lugar de apilado vertical
· Guías: grid de 2 columnas más denso
· Tipografías: jerarquía clara y sin saltos raros
· Espaciado: márgenes de seguridad y secciones más compactas
· Imágenes: aspect-ratio ajustado para mejor densidad
No afecta a la versión desktop.
================================================================= */
@media (max-width: 768px) {
/* ---- Variables responsive ---- */
:root {
--gutter: 18px; /* margen seguro a los bordes */
}
/* ---- Hero — respiración y dynamic más compacto ---- */
.hero-fixed {
max-width: 100%;
}
.hero-fixed h1 {
font-size: clamp(26px, 6.4vw, 36px);
line-height: 1.15;
}
.hero-subtitle {
font-size: 14.5px;
margin-bottom: 22px;
}
.hero-ctas {
gap: 8px;
}
.hero-ctas .btn {
padding: 11px 16px;
font-size: 13.5px;
}
.hero-dynamic {
padding: 22px 22px;
border-radius: 16px;
}
.hero-msg {
padding: 22px 22px;
}
.hero-msg-title {
font-size: 19px;
line-height: 1.25;
}
/* ---- Filter bar — más compacto, menos padding ---- */
.filter-bar {
padding: 18px 16px;
}
.filter-bar-title {
font-size: 14px;
margin-bottom: 14px;
}
.filter-item {
padding: 10px 8px;
}
.filter-icon {
width: 34px; height: 34px;
font-size: 16px;
}
/* ---- Secciones — padding vertical más razonable ---- */
.section,
.viajes-section,
.porque-section,
.voces-section,
.newsletter-section,
.comunidad-section,
.claustro-section {
padding: 50px 0;
}
.install-cta {
padding: 36px 0;
}
/* ---- Section heads — alineación cómoda en mobile ---- */
.section-head {
flex-direction: column;
align-items: stretch;
gap: 14px;
margin-bottom: 22px;
}
.section-head .btn-outline {
align-self: flex-start;
font-size: 13.5px;
padding: 10px 16px;
}
/* =============================================================
VIAJES — HORIZONTAL SCROLL (en lugar de apilarse)
============================================================= */
.viajes-section { padding-bottom: 50px; }
.viajes-grid-wrap {
/* Sacamos el carrusel del padding del container para que
las tarjetas puedan tocar el borde derecho de la pantalla
(carrusel "edge-to-edge" típico de apps móviles) */
margin: 0 calc(var(--gutter) * -1);
padding: 4px 0 16px;
}
.viajes-grid {
display: flex; /* sobrescribe grid del desktop */
flex-direction: row;
grid-template-columns: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--gutter);
-webkit-overflow-scrolling: touch;
gap: 12px;
padding: 4px var(--gutter) 14px;
/* Ocultar scrollbar pero mantener funcionalidad */
scrollbar-width: none; /* Firefox */
}
.viajes-grid::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.viaje-card {
flex: 0 0 78%; /* tarjeta = 78% del viewport */
max-width: 320px;
scroll-snap-align: start;
}
/* Aspect-ratio de la imagen: pasamos de 4/5 (vertical alargada)
a 5/4 (más horizontal y compacta). Mejora densidad sin recortar
el destino. */
.viaje-card .viaje-img {
aspect-ratio: 5/4;
}
/* Texto sobre la imagen: tipos un poco más pequeños */
.viaje-img-info h3 {
font-size: 19px;
}
.viaje-img-info .dates {
font-size: 12.5px;
}
/* Hint visual de scroll: pequeña fade a la derecha */
.viajes-grid-wrap::after {
content: '';
position: absolute;
top: 4px; right: 0; bottom: 14px;
width: 32px;
background: linear-gradient(90deg, transparent 0%, var(--bg) 90%);
pointer-events: none;
z-index: 1;
}
/* =============================================================
GUÍAS — Grid de 2 columnas (más denso)
============================================================= */
.guias-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.guia-card .guia-img {
aspect-ratio: 4/5; /* portada de "libro" sigue funcionando */
}
.guia-overlay-title {
font-size: 15px;
top: 12px; left: 12px; right: 12px;
}
.guia-overlay-title small {
font-size: 13px;
}
.guia-body {
padding: 12px 14px 14px;
}
.guia-body h4 { font-size: 14px; }
.guia-body p { font-size: 12.5px; margin-bottom: 6px; }
.guia-price { font-size: 16px; }
/* =============================================================
COMUNIDAD — Tarjetas más cómodas
============================================================= */
.whatsapp-card,
.social-column {
padding: 28px 24px;
border-radius: 20px;
}
.wa-bullets { gap: 8px; }
.wa-bullet { font-size: 13.5px; }
.social-feed { gap: 6px; }
.social-buttons {
flex-direction: row;
gap: 8px;
}
.referral-mini {
padding: 18px 20px;
margin-top: 22px;
}
.referral-mini .btn {
width: 100%;
justify-content: center;
}
/* =============================================================
CLAUSTRO — Card más compacta
============================================================= */
.claustro-card {
padding: 32px 24px;
border-radius: 20px;
gap: 24px;
}
.claustro-content h2 {
font-size: clamp(20px, 5.4vw, 24px);
}
.claustro-content p {
font-size: 14.5px;
}
.claustro-feat {
padding: 14px 14px;
}
.claustro-feat-icon {
width: 38px; height: 38px;
font-size: 16px;
}
/* =============================================================
¿POR QUÉ VIAJAR? — Grid 2x2 más compacto
============================================================= */
.porque-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
max-width: 100%;
}
.porque-icon {
width: 44px; height: 44px;
}
.porque-icon svg { width: 22px; height: 22px; }
.porque-item h4 { font-size: 14.5px; }
.porque-item p { font-size: 13px; }
/* =============================================================
VOCES — Carrusel horizontal también, mejor densidad
============================================================= */
.voces-grid {
display: flex;
flex-direction: row;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--gutter);
-webkit-overflow-scrolling: touch;
gap: 12px;
margin: 0 calc(var(--gutter) * -1);
padding: 4px var(--gutter) 14px;
max-width: none;
scrollbar-width: none;
}
.voces-grid::-webkit-scrollbar { display: none; }
.voz-card {
flex: 0 0 82%;
max-width: 340px;
scroll-snap-align: start;
padding: 18px 18px;
}
/* =============================================================
NEWSLETTER — Botón y form más cómodos
============================================================= */
.newsletter-form {
flex-direction: column;
gap: 6px;
background: white;
padding: 8px;
}
.newsletter-form input {
width: 100%;
padding: 14px 14px;
}
.newsletter-form .btn {
width: 100%;
justify-content: center;
padding: 13px 16px;
}
/* =============================================================
INSTALL CTA — Stack vertical más cómodo
============================================================= */
.install-cta-content {
text-align: center;
}
.install-cta-text h3 { font-size: 18px; }
.install-cta-text p { font-size: 13.5px; }
.install-cta-btn {
width: 100%;
justify-content: center;
}
/* =============================================================
FOOTER — Más respiración entre columnas
============================================================= */
footer { padding: 44px 0 22px; }
.footer-grid { gap: 28px; margin-bottom: 28px; }
.footer-brand .brand-logo { height: 80px; max-height: 80px; }
/* =============================================================
SAFE AREA — Nada toca los bordes en notch / barras
============================================================= */
body {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.install-banner {
bottom: max(16px, env(safe-area-inset-bottom));
}
}
/* =================================================================
22. AJUSTES MOBILE PEQUEÑO (≤420px)
================================================================= */
@media (max-width: 420px) {
:root { --gutter: 16px; }
.hero-fixed h1 {
font-size: clamp(22px, 6.6vw, 28px);
}
.hero-ctas {
flex-direction: column;
align-items: stretch;
}
.hero-ctas .btn {
width: 100%;
justify-content: center;
}
.viaje-card { flex: 0 0 84%; }
.voz-card { flex: 0 0 86%; }
.guias-grid { gap: 10px; }
}
/* =================================================================
23. AUTENTICACIÓN — Botón login, menú usuario y modal
================================================================= */
/* ---- Botones de auth en la nav (Iniciar sesión + Crear cuenta) ---- */
.auth-trigger {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: 1.5px solid transparent;
white-space: nowrap;
}
.auth-trigger[hidden] { display: none; }
.auth-trigger--ghost {
background: transparent;
color: var(--navy);
border-color: var(--line);
}
.auth-trigger--ghost:hover {
border-color: var(--navy);
background: var(--bg-soft);
}
.auth-trigger--ghost svg { color: var(--navy-soft); }
.auth-trigger--primary {
background: var(--navy);
color: white;
border-color: var(--navy);
}
.auth-trigger--primary:hover {
background: var(--navy-dark);
border-color: var(--navy-dark);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 43, 74, 0.25);
}
@media (max-width: 1280px) {
.auth-trigger--ghost span { display: none; }
.auth-trigger--ghost { padding: 9px 11px; }
}
@media (max-width: 1100px) {
.auth-trigger--primary { padding: 9px 13px; }
}
@media (max-width: 880px) {
/* En móvil mostramos solo "Iniciar sesión" (con texto + icono).
"Crear cuenta" se oculta — está dentro del drawer de la hamburguesa
junto con la opción de iniciar sesión. */
.auth-trigger--ghost {
display: inline-flex !important;
padding: 9px 14px;
background: var(--teal);
border-color: var(--teal);
color: white;
font-weight: 600;
}
.auth-trigger--ghost span { display: inline !important; }
.auth-trigger--ghost svg { color: white; }
.auth-trigger--ghost:hover {
background: var(--teal-deep);
border-color: var(--teal-deep);
}
.auth-trigger--primary { display: none !important; }
}
@media (max-width: 480px) {
.auth-trigger--ghost { padding: 8px 12px; font-size: 13px; }
.auth-trigger--ghost svg { width: 13px; height: 13px; }
}
/* ---- Menú del usuario (avatar + dropdown) ---- */
.user-menu {
position: relative;
display: inline-block;
}
.user-menu[hidden] { display: none; }
.user-menu__toggle {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--teal);
border: 2px solid white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
padding: 0;
box-shadow: 0 0 0 1.5px var(--line);
}
.user-menu__toggle:hover {
transform: translateY(-1px);
box-shadow: 0 0 0 1.5px var(--teal), 0 4px 12px rgba(79, 175, 181, 0.3);
}
.user-menu__avatar {
color: white;
font-weight: 700;
font-size: 13.5px;
letter-spacing: 0.02em;
font-family: var(--font-sans);
}
.user-menu__dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 240px;
background: white;
border-radius: var(--radius-md);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-lift);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: var(--z-nav);
}
.user-menu__dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-menu__info {
padding: 12px 14px 10px;
}
.user-menu__name {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.01em;
/* Truncar si es muy largo */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-menu__email {
display: block;
font-size: 12.5px;
color: var(--text-muted);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-menu__divider {
height: 1px;
background: var(--line-soft);
margin: 4px 0;
}
.user-menu__item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
background: transparent;
border: none;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 500;
color: var(--navy);
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.user-menu__item:hover {
background: var(--bg-soft);
}
.user-menu__item svg {
color: var(--text-muted);
flex-shrink: 0;
}
.user-menu__item--danger {
color: var(--coral);
}
.user-menu__item--danger:hover {
background: rgba(200, 75, 63, 0.08);
}
.user-menu__item--danger svg { color: var(--coral); }
@media (max-width: 480px) {
.user-menu__dropdown {
min-width: 0;
width: calc(100vw - 32px);
right: -8px;
}
}
/* =================================================================
24. MODAL DE AUTENTICACIÓN
================================================================= */
.auth-modal {
display: none !important; /* defensa: sin JS no aparece */
position: fixed !important; /* defensa: nunca inline */
inset: 0;
z-index: 9100;
background: rgba(15, 27, 51, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.25s ease;
overflow-y: auto;
}
.auth-modal.is-open {
display: flex !important; /* lo activa el JS */
opacity: 1;
}
.auth-modal__panel {
background: white;
border-radius: var(--radius-lg);
width: 100%;
max-width: 440px;
padding: 32px 28px 28px;
position: relative;
box-shadow: 0 20px 60px rgba(15, 27, 51, 0.3);
transform: scale(0.96) translateY(8px);
transition: transform 0.25s ease;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.auth-modal.is-open .auth-modal__panel {
transform: scale(1) translateY(0);
}
.auth-modal__close {
position: absolute;
top: 14px; right: 14px;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--bg-soft);
border: none;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.auth-modal__close:hover {
background: var(--line);
color: var(--navy);
}
.auth-modal__close svg { width: 16px; height: 16px; }
.auth-modal__header {
text-align: center;
margin-bottom: 22px;
}
.auth-modal__header h2 {
font-size: 22px;
font-weight: 700;
color: var(--navy);
margin-bottom: 6px;
letter-spacing: -0.015em;
}
.auth-modal__header p {
font-size: 14px;
color: var(--text-muted);
}
/* Tabs */
.auth-tabs {
display: flex;
background: var(--bg-soft);
border-radius: 10px;
padding: 4px;
margin-bottom: 22px;
}
.auth-tab {
flex: 1;
padding: 10px 16px;
background: transparent;
border: none;
border-radius: 7px;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s ease;
}
.auth-tab.is-active {
background: white;
color: var(--navy);
box-shadow: 0 1px 3px rgba(15, 27, 51, 0.08);
}
.auth-tab:not(.is-active):hover { color: var(--navy); }
.auth-panel[hidden] { display: none; }
/* Botón Google */
.auth-google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
background: white;
border: 1.5px solid var(--line);
border-radius: 10px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--navy);
cursor: pointer;
transition: all 0.2s ease;
}
.auth-google-btn:hover {
border-color: var(--navy);
background: var(--bg-soft);
}
/* Divider "o con tu email" */
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0;
color: var(--text-light);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
/* Formulario */
.auth-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.auth-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.auth-field > span {
font-size: 12.5px;
font-weight: 600;
color: var(--navy);
letter-spacing: -0.005em;
}
.auth-field input {
padding: 12px 14px;
border: 1.5px solid var(--line);
border-radius: 10px;
font-family: inherit;
font-size: 14.5px;
color: var(--navy);
outline: none;
background: white;
transition: border-color 0.2s ease;
width: 100%;
}
.auth-field input:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(79, 175, 181, 0.15);
}
.auth-field input::placeholder { color: var(--text-light); }
.auth-form__row {
display: flex;
justify-content: flex-end;
margin-top: -4px;
}
.auth-link {
font-size: 12.5px;
font-weight: 600;
color: var(--teal-deep);
text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }
.auth-fineprint {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.45;
margin-top: 2px;
}
.auth-fineprint a { color: var(--teal-deep); font-weight: 600; }
.auth-error {
background: rgba(200, 75, 63, 0.08);
color: var(--coral);
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
border-left: 3px solid var(--coral);
}
.auth-error[hidden] { display: none; }
/* Variante de éxito: verde, mismo elemento del DOM */
.auth-error.auth-success {
background: rgba(37, 211, 102, 0.1);
color: var(--whatsapp-deep);
border-left-color: var(--whatsapp);
}
.auth-submit {
width: 100%;
justify-content: center;
padding: 13px 20px;
margin-top: 4px;
}
.auth-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* Spinner para estados de carga */
.auth-spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,0.4);
border-top-color: white;
border-radius: 50%;
animation: auth-spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
.auth-modal { padding: 12px; }
.auth-modal__panel { padding: 26px 22px 22px; }
.auth-modal__header h2 { font-size: 19px; }
}
/* =================================================================
24b. PANEL DE ONBOARDING TRAS REGISTRO
================================================================= */
.auth-onboarding {
text-align: center;
padding: 8px 4px 4px;
animation: auth-onboarding-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes auth-onboarding-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.auth-onboarding__icon {
font-size: 44px;
line-height: 1;
margin-bottom: 16px;
}
.auth-onboarding__title {
font-size: 22px;
font-weight: 700;
color: var(--navy);
margin-bottom: 8px;
letter-spacing: -0.015em;
}
.auth-onboarding__text {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: 14px;
}
.auth-onboarding__text strong {
color: var(--navy);
font-weight: 600;
word-break: break-all;
}
.auth-onboarding__note {
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
background: var(--bg-soft);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 18px;
}
.auth-onboarding__note strong { color: var(--navy); }
.auth-onboarding__note a { color: var(--teal-deep); font-weight: 600; }
.auth-onboarding__btn {
width: 100%;
justify-content: center;
padding: 13px 20px;
}
/* =================================================================
25. BANNER DE COOKIES (RGPD)
=================================================================
IMPORTANTE: por defecto tiene display:none para que aunque el JS
falle, NUNCA aparezca inline en el flujo del documento. Solo se
muestra cuando tiene la clase .is-visible (la añade cookies.js).
================================================================= */
.cookie-banner {
display: none !important; /* defensa: sin JS no aparece */
position: fixed !important; /* defensa: nunca inline */
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9000;
padding: 0 16px 16px;
padding-bottom: max(16px, env(safe-area-inset-bottom));
pointer-events: none;
transform: translateY(120%);
opacity: 0;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.cookie-banner.is-visible {
display: block !important; /* lo activa el JS */
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.cookie-banner__inner {
max-width: 980px;
margin: 0 auto;
background: white;
border-radius: var(--radius-lg);
box-shadow: 0 10px 40px rgba(15, 27, 51, 0.25), 0 4px 12px rgba(15, 27, 51, 0.1);
border: 1px solid var(--line-soft);
padding: 20px 22px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: center;
}
@media (max-width: 880px) {
.cookie-banner__inner {
grid-template-columns: auto 1fr;
gap: 14px;
padding: 18px;
}
}
@media (max-width: 540px) {
.cookie-banner__inner {
grid-template-columns: 1fr;
text-align: left;
}
}
.cookie-banner__icon {
font-size: 36px;
line-height: 1;
flex-shrink: 0;
}
@media (max-width: 540px) {
.cookie-banner__icon { font-size: 28px; }
}
.cookie-banner__content { min-width: 0; }
.cookie-banner__title {
font-size: 16px;
font-weight: 700;
color: var(--navy);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.cookie-banner__text {
font-size: 13.5px;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
}
.cookie-banner__link {
color: var(--teal-deep);
font-weight: 600;
white-space: nowrap;
}
.cookie-banner__link:hover { text-decoration: underline; }
/* Acciones */
.cookie-banner__actions {
display: flex;
gap: 8px;
flex-shrink: 0;
flex-wrap: wrap;
}
@media (max-width: 880px) {
.cookie-banner__actions {
grid-column: 1 / -1;
justify-content: stretch;
gap: 6px;
}
.cookie-banner__actions .cookie-btn {
flex: 1;
min-width: 0;
}
}
.cookie-btn {
padding: 10px 16px;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
border: 1.5px solid transparent;
text-align: center;
}
.cookie-btn[hidden] { display: none; }
.cookie-btn--primary {
background: var(--navy);
color: white;
}
.cookie-btn--primary:hover {
background: var(--navy-dark);
transform: translateY(-1px);
}
.cookie-btn--ghost {
background: white;
color: var(--navy);
border-color: var(--line);
}
.cookie-btn--ghost:hover {
border-color: var(--navy);
background: var(--bg-soft);
}
/* Panel de preferencias */
.cookie-prefs {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cookie-prefs[hidden] { display: none; }
.cookie-prefs__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--bg-soft);
border-radius: 10px;
cursor: pointer;
border: 1.5px solid transparent;
transition: border-color 0.2s ease;
}
.cookie-prefs__row:hover { border-color: var(--line); }
.cookie-prefs__row strong {
display: block;
font-size: 13.5px;
font-weight: 700;
color: var(--navy);
margin-bottom: 2px;
}
.cookie-prefs__row span {
display: block;
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
.cookie-prefs__row--locked {
cursor: default;
}
.cookie-prefs__row--locked:hover { border-color: transparent; }
.cookie-prefs__locked {
font-size: 11.5px !important;
font-weight: 600 !important;
color: var(--teal-deep) !important;
background: var(--teal-pale);
padding: 4px 10px;
border-radius: 999px;
margin: 0 !important;
display: inline-block !important;
flex-shrink: 0;
}
/* Toggle switch personalizado */
.cookie-prefs__check {
appearance: none;
-webkit-appearance: none;
width: 40px;
height: 22px;
background: var(--line);
border-radius: 999px;
position: relative;
cursor: pointer;
transition: background 0.25s ease;
flex-shrink: 0;
margin: 0;
}
.cookie-prefs__check::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background: white;
border-radius: 50%;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cookie-prefs__check:checked {
background: var(--teal);
}
.cookie-prefs__check:checked::before {
transform: translateX(18px);
}
.cookie-prefs__check:focus-visible {
outline: 2px solid var(--teal-deep);
outline-offset: 2px;
}
@media (max-width: 540px) {
.cookie-prefs__row { padding: 10px 12px; }
.cookie-prefs__row strong { font-size: 13px; }
}
/* =================================================================
26. AUTH — Mejoras: aviso institucional, ojo, switch
================================================================= */
/* Hint informativo bajo el campo email */
.auth-hint {
display: block;
margin-top: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.45;
color: var(--navy-soft);
background: rgba(212, 162, 74, 0.10);
border-left: 2.5px solid var(--gold);
border-radius: 6px;
}
.auth-hint code {
background: rgba(255, 255, 255, 0.6);
padding: 1px 4px;
border-radius: 3px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: var(--navy);
}
/* Toggle ojo en input password */
.auth-password {
position: relative;
display: block;
}
.auth-password input {
width: 100%;
padding-right: 44px !important; /* deja sitio al icono */
}
.auth-password__toggle {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: color 0.2s ease, background 0.2s ease;
padding: 0;
}
.auth-password__toggle:hover {
color: var(--navy);
background: var(--bg-soft);
}
/* Iconos del ojo: control por estado del botón */
.auth-password__icon {
width: 18px !important;
height: 18px !important;
flex-shrink: 0;
}
/* Por defecto (botón NO presionado / contraseña oculta):
se muestra el ojo "ver", se oculta el "tachado" */
.auth-password__toggle .auth-password__icon--show { display: block; }
.auth-password__toggle .auth-password__icon--hide { display: none; }
/* Cuando se hace click, el botón añade .is-showing y se invierten */
.auth-password__toggle.is-showing .auth-password__icon--show { display: none; }
.auth-password__toggle.is-showing .auth-password__icon--hide { display: block; }
/* Switch entre login y registro al final del formulario */
.auth-switch {
margin-top: 16px;
text-align: center;
font-size: 13.5px;
color: var(--text-muted);
}
.auth-switch button.auth-link {
background: transparent;
border: none;
padding: 0;
margin: 0 0 0 4px;
font-family: inherit;
font-size: inherit;
font-weight: 600;
color: var(--teal-deep);
cursor: pointer;
}
.auth-switch button.auth-link:hover { text-decoration: underline; }
/* =================================================================
27. MENÚ MÓVIL — Drawer
================================================================= */
.mobile-drawer {
position: fixed;
inset: 0;
z-index: 9050;
}
.mobile-drawer[hidden] { display: none; }
.mobile-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 27, 51, 0.45);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-drawer.is-open .mobile-drawer__backdrop { opacity: 1; }
.mobile-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(320px, 85vw);
background: white;
display: flex;
flex-direction: column;
padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
padding-top: max(20px, env(safe-area-inset-top));
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
box-shadow: -4px 0 24px rgba(15, 27, 51, 0.15);
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__close {
align-self: flex-end;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--bg-soft);
border: none;
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 8px;
}
.mobile-drawer__close svg { width: 18px; height: 18px; }
.mobile-drawer__nav {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 12px;
}
.mobile-drawer__link {
padding: 14px 12px;
font-size: 16px;
font-weight: 600;
color: var(--navy);
border-radius: 10px;
transition: background 0.15s ease;
}
.mobile-drawer__link:hover,
.mobile-drawer__link:active {
background: var(--bg-soft);
color: var(--teal-deep);
}
.mobile-drawer__divider {
height: 1px;
background: var(--line-soft);
margin: 12px 0;
}
.mobile-drawer__auth { display: flex; flex-direction: column; gap: 10px; }
.mobile-drawer__auth[hidden] { display: none; }
.mobile-drawer__btn {
width: 100%;
justify-content: center;
padding: 12px 16px;
font-size: 14.5px;
}
.mobile-drawer__user[hidden] { display: none; }
.mobile-drawer__userinfo {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--bg-soft);
border-radius: 10px;
margin-bottom: 12px;
}
.mobile-drawer__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--teal);
color: white;
font-weight: 700;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mobile-drawer__username {
font-size: 14.5px;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-drawer__useremail {
font-size: 12px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =================================================================
28. MODAL DE CONFIRMACIÓN (reemplazo de confirm() nativo)
================================================================= */
.confirm-modal {
display: none !important;
position: fixed !important;
inset: 0;
z-index: 9200;
background: rgba(15, 27, 51, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.2s ease;
}
.confirm-modal[hidden] { display: none !important; }
.confirm-modal.is-open {
display: flex !important;
opacity: 1;
}
.confirm-modal__panel {
background: white;
border-radius: var(--radius-lg);
padding: 32px 28px 24px;
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(15, 27, 51, 0.3);
transform: scale(0.96) translateY(8px);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.confirm-modal.is-open .confirm-modal__panel {
transform: scale(1) translateY(0);
}
.confirm-modal__icon {
width: 64px; height: 64px;
margin: 0 auto 14px;
border-radius: 50%;
background: rgba(212, 162, 74, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
.confirm-modal__title {
font-size: 19px;
font-weight: 700;
color: var(--navy);
margin-bottom: 10px;
letter-spacing: -0.015em;
}
.confirm-modal__message {
font-size: 14px;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: 22px;
}
.confirm-modal__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.confirm-modal__actions .btn {
flex: 1 1 140px;
justify-content: center;
padding: 12px 18px;
}
@media (max-width: 480px) {
.confirm-modal__panel { padding: 26px 22px 20px; }
.confirm-modal__title { font-size: 17px; }
.confirm-modal__actions { flex-direction: column; }
}
/* =================================================================
29. BOTÓN CTA — Ver todos los... (estado normal navy, hover teal)
================================================================= */
.btn-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: var(--navy);
color: white;
border: 1.5px solid var(--navy);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
/* Transición suave de 0.3s en color, fondo y borde */
transition: background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
transform 0.2s ease,
box-shadow 0.3s ease;
white-space: nowrap;
}
.btn-cta:hover,
.btn-cta:focus-visible {
background: var(--teal);
border-color: var(--teal);
color: white;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(79, 175, 181, 0.35);
}
.btn-cta .arrow {
transition: transform 0.3s ease;
}
.btn-cta:hover .arrow { transform: translateX(3px); }
/* =================================================================
30. CARDS CLICKABLES — feedback visual cuando son clickables
================================================================= */
.viaje-card[data-href] {
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.viaje-card[data-href]:hover {
transform: translateY(-3px);
}
.viaje-card[data-href]:focus-visible {
outline: 3px solid var(--teal);
outline-offset: 4px;
border-radius: var(--radius-lg);
}
/* =================================================================
31. MODAL DE GATE DE AUTENTICACIÓN
================================================================= */
.auth-gate {
display: none !important;
position: fixed !important;
inset: 0;
z-index: 9300;
background: rgba(15, 27, 51, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.25s ease;
}
.auth-gate[hidden] { display: none !important; }
.auth-gate.is-open {
display: flex !important;
opacity: 1;
}
.auth-gate__panel {
background: white;
border-radius: var(--radius-lg);
padding: 36px 32px 28px;
max-width: 460px;
width: 100%;
text-align: center;
position: relative;
box-shadow: 0 20px 60px rgba(15, 27, 51, 0.3);
transform: scale(0.96) translateY(8px);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-gate.is-open .auth-gate__panel {
transform: scale(1) translateY(0);
}
.auth-gate__close {
position: absolute;
top: 14px; right: 14px;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--bg-soft);
border: none;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.auth-gate__close:hover {
background: var(--line);
color: var(--navy);
}
.auth-gate__close svg { width: 16px; height: 16px; }
.auth-gate__icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
padding: 12px 18px;
background: var(--bg-warm);
border-radius: 14px;
width: fit-content;
}
.auth-gate__logo {
height: 56px;
width: auto;
display: block;
}
@media (max-width: 480px) {
.auth-gate__logo { height: 48px; }
.auth-gate__icon { padding: 10px 14px; margin-bottom: 14px; }
}
.auth-gate__title {
font-size: 22px;
font-weight: 700;
color: var(--navy);
margin-bottom: 12px;
letter-spacing: -0.015em;
}
.auth-gate__message {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: 22px;
}
.auth-gate__message strong {
color: var(--teal-deep);
font-weight: 700;
}
.auth-gate__actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.auth-gate__btn {
width: 100%;
justify-content: center;
padding: 13px 20px;
}
@media (max-width: 480px) {
.auth-gate__panel { padding: 32px 24px 22px; }
.auth-gate__title { font-size: 19px; }
}
/* =================================================================
32. TARJETAS CTA al final de carruseles (Ver todos los...)
================================================================= */
.viaje-card--cta {
display: flex !important;
align-items: stretch;
justify-content: stretch;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
border: 1px solid var(--navy-dark);
cursor: pointer;
overflow: hidden;
}
.viaje-card--cta:hover {
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
border-color: var(--teal-deep);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(79, 175, 181, 0.3);
}
.viaje-card--cta .viaje-card__cta-inner {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 36px 28px;
color: white;
gap: 12px;
}
.viaje-card__cta-icon {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.viaje-card--cta:hover .viaje-card__cta-icon {
transform: scale(1.08) rotate(-5deg);
}
.viaje-card__cta-icon svg {
width: 24px !important;
height: 24px !important;
flex-shrink: 0;
}
.viaje-card--cta h3 {
font-size: 19px;
font-weight: 700;
color: white;
letter-spacing: -0.015em;
margin: 0;
line-height: 1.2;
}
.viaje-card--cta p {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
margin: 0;
max-width: 240px;
}
.viaje-card__cta-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 9px 18px;
background: rgba(255, 255, 255, 0.16);
border-radius: 999px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: -0.01em;
white-space: nowrap;
transition: all 0.3s ease;
}
.viaje-card--cta:hover .viaje-card__cta-arrow {
background: white;
color: var(--navy);
}
.viaje-card__cta-arrow svg {
width: 14px !important;
height: 14px !important;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.viaje-card--cta:hover .viaje-card__cta-arrow svg {
transform: translateX(4px);
}
/* En móvil, la card CTA se ajusta para no tener iconos enormes
ni textos cortados. Es la última card del carrusel. */
@media (max-width: 540px) {
.viaje-card--cta .viaje-card__cta-inner {
padding: 28px 20px;
gap: 10px;
}
.viaje-card__cta-icon {
width: 48px;
height: 48px;
}
.viaje-card__cta-icon svg {
width: 20px !important;
height: 20px !important;
}
.viaje-card--cta h3 { font-size: 17px; }
.viaje-card--cta p { font-size: 13px; }
}
/* =================================================================
33. UTILITY: hidden-mobile (oculta en pantallas <= 640px)
================================================================= */
@media (max-width: 640px) {
.hidden-mobile { display: none !important; }
}
/* =================================================================
34. KICKER de pregunta sobre títulos de sección
================================================================= */
.section-kicker-q {
font-family: var(--font-script, 'Caveat'), cursive;
font-size: clamp(34px, 5.5vw, 54px);
font-weight: 700;
color: var(--teal);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 14px;
display: block;
}
@media (max-width: 540px) {
.section-kicker-q {
font-size: 30px;
margin-bottom: 10px;
}
}