/* Aquí había un @import a Google Fonts (Archivo Black, Barlow y Unbounded). Se quitó
el 27-09-2026: ninguna regla de esta hoja ni del sitio usa esas tres familias
(comprobado en 12 páginas: ningún elemento las pide y el navegador no baja
ningún archivo suyo), y un @import dentro de una hoja que bloquea el pintado
encadena OTRA petición bloqueante a Google: PageSpeed lo marcaba como lo que más
retrasaba el primer pintado. Las fuentes que sí se eligen en el panel llegan por
/api/fuentes/google, con su propio . */
/* ============================================================
Tipografía Nayra Travel — Atozimple (Manual 2025) + Savoye LET
TRES cortes de Atozimple y una cursiva. Todo el sitio pide letra por los
tokens de :root, nunca por el nombre de la familia.
SON TRES Y NO MÁS, Y ES UNA REGLA DE LA MARCA, no una casualidad de lo que
hizo falta: la web se viste con cuatro letras y cada una tiene su papel —
SemiBold los títulos, ExtraBold los botones, Light los párrafos y Savoye lo
destacado—. Cada corte declarado aquí es además un corte ELEGIBLE desde el
panel (la lista de src/lib/fuentes.ts tiene que cuadrar con estas líneas), así
que añadir uno no es solo escribir un @font-face: es ofrecerlo como opción y
abrir la puerta a que la web acabe con cinco letras.
AQUÍ ESTUVIERON REGULAR Y MEDIUM y conviene saber por qué se fueron. Se
recuperaron del historial al pedirse unos títulos «más delgados», porque entre
el Light del cuerpo y el SemiBold no había ningún peldaño. Duraron poco: la
marca son cuatro letras, y los títulos han vuelto al SemiBold que les tocaba.
Si algún día hace falta un corte intermedio, los archivos siguen en el
historial de git — igual que Thin, ExtraLight y Bold, que nunca han vuelto.
EL EXTRABOLD SE FUE Y HA VUELTO. Dejó de pedirlo nadie cuando los titulares
pasaron a Savoye LET, así que se retiró; vuelve porque los BOTONES son un rol
propio y piden el corte más grueso de la familia.
Cada corte declara el rango de peso completo (100 900) a propósito: así
responde a cualquier `font-weight` que pida el CSS y el navegador NO fabrica
una negrita sintética encima de un corte que ya tiene su grosor. El peso lo
elige el corte, no la propiedad.
============================================================ */
@font-face { font-family: 'Atozimple Light'; src: url('/assets/Fonts/Atozimple%20Light.otf') format('opentype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atozimple Light'; src: url('/assets/Fonts/Atozimple%20Light-Italic.otf') format('opentype'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atozimple SemiBold'; src: url('/assets/Fonts/Atozimple%20SemiBold.otf') format('opentype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atozimple SemiBold'; src: url('/assets/Fonts/Atozimple%20SemiBold-Italic.otf') format('opentype'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atozimple ExtraBold'; src: url('/assets/Fonts/Atozimple%20ExtraBold.otf') format('opentype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atozimple ExtraBold'; src: url('/assets/Fonts/Atozimple%20ExtraBold-Italic.otf') format('opentype'); font-weight: 100 900; font-style: italic; font-display: swap; }
/* Savoye LET, la cursiva de los titulares. Un solo archivo y un solo corte, y
aun así declara el rango 100 900 por la misma razón que los de arriba: que el
`font-weight: 800` que arrastran las reglas de titular no le fabrique una
negrita sintética encima — en una caligráfica se ve como un borrón.
OJO CON EL ARCHIVO: apunta al «.web.ttf», no al «Savoye LET Plain1.0.ttf»
original que está al lado. El original NO carga en el navegador —Chrome lo
rechaza con «Invalid font data» y cae a la reserva sin decir nada en la
página—, y no porque esté roto: sus 15 tablas están alineadas a 2 bytes y no
a 4, y arrastra 20 KB colgando detrás de la última. Es lo típico de una
TrueType vieja de Mac, y el saneador de fuentes de los navegadores no lo pasa.
El «.web.ttf» es ESE MISMO archivo recolocado, sin tocar un solo glifo, con
scripts/rehacer-sfnt.py. Si algún día se reemplaza la fuente, hay que volver a
pasarla por ahí — y comprobarlo, porque el fallo es mudo. */
@font-face { font-family: 'Savoye LET'; src: url('/assets/Fonts/Savoye%20LET%20Plain1.0.web.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* ============================================
NAYRA TRAVEL — DESIGN SYSTEM
============================================ */
:root {
/* ── Paleta "Nayra": SEIS colores de marca + el blanco y el negro. ──────────
Una por color y ninguna repetida: antes había once nombres para estos mismos
seis valores (--gold y --terracotta eran el mismo oro; --ink-soft, --moss y
--teal-bright el mismo azul…), así que cambiar un color de marca obligaba a
buscar cuál de los alias usaba cada regla. Ahora se tocan estas seis líneas
y cambia el sitio entero — es también lo que edita el panel.
NO añadir aquí un séptimo nombre para uno de estos colores. Si hace falta un
tono intermedio, se deriva con color-mix() de los que ya hay, como abajo. */
--primario: #9D8B53; /* oro de marca: botones, acentos, destacados */
--primario-claro: #D0BD83; /* oro claro: fondo de página */
--primario-alt: #B39F42; /* oro oliva: subrayados y detalles */
--secundario: #205063; /* azul profundo */
--secundario-claro: #2F7D9B; /* azul vivo: fondos de sección, texto suave */
--secundario-oscuro: #243F4C; /* azul oscuro: tinta y fondos profundos */
/* El blanco y el negro de las páginas rediseñadas (contacto, blog, nosotros,
las fichas…). Estaban escritos a pelo en el CSS de cada vista —#fff y #000
repetidos ochenta veces— y por eso no se podían tocar desde el panel, que es
justo lo que se pedía. Ahora salen de aquí igual que los seis de arriba.
No cubren el blanco SOBRE FOTO (banners, marcadores del mapa, la barra del
carrusel): ahí el blanco es legibilidad contra una imagen, no una superficie
de la marca, y seguir a la paleta dejaría un rótulo ilegible. */
--superficie: #fff; /* fondo de páginas, tarjetas y controles */
--tinta: #000; /* titulares y texto de esas mismas páginas */
/* ── Tokens semánticos ──────────────────────────────────────────────────────
No llevan color propio: apuntan a los seis de arriba o se derivan de ellos
con color-mix(). Así siguen existiendo los nombres por función que usa el
CSS (--bg, --ink, --line…) sin que ninguno sea una segunda definición del
mismo color. */
/* Fondo de página: blanco crema, un velo del oro claro sobre blanco (~14%).
No es uno de los seis literales ni un hex nuevo: se deriva, así que si el oro
cambia en el panel el crema le sigue solo. Puesto el oro puro se comía la
página entera; a este nivel se nota la calidez sin restar legibilidad. */
--bg: color-mix(in srgb, var(--primario-claro) 14%, var(--superficie));
/* Secciones alternas: el mismo crema un punto más cargado, lo justo para que
se despeguen del fondo sin marcar una franja. */
--bg-soft: color-mix(in srgb, var(--primario-claro) 28%, var(--superficie));
/* Fondo de una sección alterna CON los bordes difuminados. Se usa en lugar de
`background: var(--bg-soft)` a secas: así el cambio de color no llega como
una línea recta sino que entra y sale en los extremos de la sección.
Los topes van en % del alto de la sección, no en px, para que el degradado
ocupe siempre la misma proporción y no una franja enorme en las cortas. */
--fondo-seccion-alterna: linear-gradient(
to bottom,
var(--bg) 0%,
var(--bg-soft) 9%,
var(--bg-soft) 91%,
var(--bg) 100%
);
--bg-deep: var(--secundario-oscuro);
--ink: var(--secundario-oscuro);
--ink-mute: color-mix(in srgb, var(--secundario-oscuro) 62%, transparent);
--line: color-mix(in srgb, var(--secundario-oscuro) 22%, transparent);
--line-soft: color-mix(in srgb, var(--secundario-oscuro) 12%, transparent);
/* Escala única de los titulares de sección (h2 de «Vive el Perú», FAQ, Equipo,
Hoteles, Testimonios, CTA final…). Antes cada uno traía su propio clamp
—2.625, 2.875, 3.625rem— y en una misma pantalla se leían como niveles
distintos sin que hubiera jerarquía real detrás.
Va en `min()` y no en `clamp()` a propósito: varios de estos títulos llevan
`white-space: nowrap`, y con un mínimo fijo la frase se saldría de la caja en
pantallas estrechas en vez de encoger. El 5.2vw está tomado del titular más
largo que va en una línea.
.pkgs-title («Viajes de autor por el Perú») estuvo fuera de esta escala
mientras fue un titular hueco con contorno sobre el mapa topográfico. Hoy es
una cabecera de sección normal y entra aquí como las demás; la que sigue
fuera es la versión vertical del carril (.pkgs-car .pkgs-title). */
--titulo-seccion: min(5.2vw, 2.875rem);
/* ── Tipografía: CUATRO ROLES, y los tres tokens de siempre encima. ─────────
REGLA: ningún texto pide una familia por su nombre. Siempre un token.
LOS CUATRO ROLES son lo que se elige en el panel (Ajustes del sitio →
Branding → Tipografía) y lo que el layout reescribe encima de esta hoja:
· --fuente-titulos → h1…h4 y rótulos de sección.
· --fuente-parrafos → lectura larga: párrafos y descripciones.
· --fuente-botones → los botones y las llamadas a la acción, Y LAS
TARJETAS DE PAQUETE. Es el corte más grueso de la
marca; las tarjetas lo piden porque se quiso
conservar en ellas el grosor que los titulares
tenían antes de pasar al SemiBold, y es el único
de los cuatro roles que lo lleva. El porqué
completo, en el comentario de .pkg-name.
· --fuente-destacados → la cursiva, que ya no viste titulares: se aplica
A MANO desde el editor del panel, palabra a
palabra («Letra → Destacado»). Ver
src/lib/texto-enriquecido.ts.
También la piden a mano unos cuantos titulares de
la home, por encargo: «Vive el Perú», «Viajes de
autor», «Preguntas frecuentes», el cierre de «¿Por
qué viajar?» y el lema del cuadro de hoteles.
LOS TRES TOKENS VIEJOS siguen aquí porque los piden ~90 reglas de esta hoja
y ~170 de las vistas. No se reescriben una a una: se cuelgan del rol que les
toca y el reparto cambia en estas tres líneas, no en doscientas.
· --font-xbold era Savoye y ahora es el rol de TÍTULOS. Es el cambio
que se nota: la caligráfica sale de los titulares.
· --font-semibold NO cuelga de ningún rol y no es editable, a propósito.
Viste el cromo —versalitas, navegación, etiquetas, meta, «eyebrows»— que
no es ninguno de los cuatro roles y que cambiar de familia desbarata. Fue
el corte de los títulos un rato; ya no lo es, y por eso está escrito con
su nombre y no colgando de `--fuente-titulos`: el cromo se queda donde
está aunque los títulos se muevan por el panel.
· --font-light es el rol de PÁRRAFOS. */
/* Los títulos, en SemiBold. Estuvieron un rato en «Atozimple Regular», dos
peldaños más fino, al pedirse una letra «más delgada, tipo boutique»; se
deshizo porque la marca son CUATRO letras y el Regular era una quinta. Ojo si
vuelve a pedirse lo mismo: en esta familia el grosor solo se mueve cambiando
de corte —el font-weight que arrastran las reglas de titular no adelgaza
nada, porque cada @font-face declara el rango 100 900 justo para que el
navegador no invente pesos—, así que la respuesta no es tocar un número aquí
sino decidir si entra un corte más en la marca. */
--fuente-titulos: "Atozimple SemiBold", "Helvetica Neue", Arial, sans-serif;
--fuente-parrafos: "Atozimple Light", "Helvetica Neue", Arial, sans-serif;
--fuente-botones: "Atozimple ExtraBold", "Helvetica Neue", Arial, sans-serif;
--fuente-destacados: "Savoye LET", "Helvetica Neue", Arial, sans-serif;
/* EL LOGOTIPO ESCRITO NO CUELGA DE LOS TÍTULOS. `.nav-brand`, `.nav-brand-text`,
y `.dgn-brand` piden `--fuente-destacados`: son la marca,
no un titular, y al pasar los títulos al SemiBold se habrían llevado por
delante la caligráfica del logo. Sigue siendo editable desde el panel, solo
que por el campo que le toca. (El logo que se ve normalmente es la IMAGEN
que sube el panel; esto viste su versión escrita.) */
--font-xbold: var(--fuente-titulos);
--font-semibold: "Atozimple SemiBold", "Helvetica Neue", Arial, sans-serif;
--font-light: var(--fuente-parrafos);
/* ── Escala de texto ────────────────────────────────────────────────────────
Siete peldaños, del titular de página a la versalita. Los usan los elementos
base (h1…h4, body, p) más abajo, así que cascadean a TODA la web sin que
cada componente repita su propio clamp.
Antes no había escala: h2 medía menos que h3 (1.75rem contra 2.25rem), y
cada sección traía su tamaño inventado. Con esto, dos textos del mismo rango
miden lo mismo estén donde estén. */
--titulo-pagina: clamp(2.25rem, 5.6vw, 3.5rem); /* h1 */
--titulo-bloque: clamp(1.25rem, 1.9vw, 1.625rem); /* h3: tarjetas, motivos */
--titulo-menor: clamp(1.0625rem, 1.4vw, 1.25rem); /* h4 */
--texto-destacado: clamp(1.0625rem, 1.45vw, 1.25rem); /* entradillas */
--texto: clamp(0.9375rem, 1.1vw, 1.0625rem); /* cuerpo */
--texto-menudo: clamp(0.8125rem, 0.95vw, 0.9375rem); /* pies, meta */
--etiqueta: 0.6875rem; /* versalitas */
/* Sizing */
--pad: clamp(1.25rem, 4vw, 4rem);
--maxw: 92.5rem;
--radius: 0.125rem;
}
/* Modo noche — "Fondo Oscuro" corporativo (Manual 2025, pág. 8): carbón cálido
#231F20 con texto blanco. Se activa con html.dark (persistido en localStorage
y aplicado antes del primer paint en el layout); hoy no hay ningún botón en la
web pública que lo encienda, así que está latente.
Aquí SOLO se reescriben tokens semánticos. Los seis colores de marca no se
tocan: son la identidad, no un tema — y los botones usan el oro como FONDO con
texto blanco encima, así que aclararlo rompería su legibilidad.
Aviso: este bloque redefinía también --ink-deep y --ink-soft (títulos y texto
secundario en claro cálido). Esos dos nombres desaparecieron al unificar la
paleta —eran alias del azul de marca—, así que en modo noche el texto que los
usaba queda ahora en el azul vivo de :root. Cuando el modo noche entre en
servicio habrá que darle sus propios tokens de texto; no se hace ahora porque
quedó fuera del encargo y tocarlo a ciegas es peor. */
html.dark {
color-scheme: dark;
--bg: #231F20; /* Fondo Oscuro del manual */
--bg-soft: #2D2829; /* superficies elevadas: tarjetas, chips, hovers */
--bg-deep: #171415; /* bandas/fondos más profundos */
--ink: #F1F2F2; /* texto principal (blanco cálido del logo) */
--ink-mute: #948C88; /* meta / muted */
--line: #3A3436; /* bordes */
--line-soft: #2D2829; /* bordes suaves */
/* Las páginas de piel clara pintan su fondo y su tinta con estos dos, así que
en noche tienen que darse la vuelta: sin esto quedarían en blanco puro con
el resto del sitio en carbón. */
--superficie: #2D2829;
--tinta: #F1F2F2;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ===== Barra de progreso de navegación (feedback inmediato al hacer clic,
estilo GitHub) — controlada por SiteChrome con las clases is-loading/is-done ===== */
.nav-progress {
position: fixed;
top: 0;
left: 0;
z-index: 100000;
height: 0.1875rem;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
opacity: 0;
visibility: hidden; /* en reposo: totalmente oculto (sin el glow del box-shadow) */
background: var(--primario);
box-shadow: 0 0 10px rgba(157, 139, 83, 0.75), 0 0 4px rgba(157, 139, 83, 0.6);
pointer-events: none;
}
/* Cargando: la barra avanza rápido al inicio y se va frenando (nunca llega al
100 %) mientras la ruta carga. Animación (no transición) para que arranque de
forma fiable al añadir la clase; scaleX interpola sin problemas. */
.nav-progress.is-loading {
visibility: visible;
opacity: 1;
animation: navProgress 8s ease-out forwards;
}
@keyframes navProgress {
from { transform: scaleX(0); }
to { transform: scaleX(0.9); }
}
/* Terminó: llega al 100 % y se desvanece. */
.nav-progress.is-done {
visibility: visible;
opacity: 0;
transform: scaleX(1);
transition: transform 0.2s ease, opacity 0.4s ease 0.15s;
}
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto;
}
/* Raíz fluida: el tamaño base (y por tanto TODOS los rem del sitio) escala
con el ancho de la pantalla. ~14px en móvil → ~16px en portátil → 18px en
pantallas grandes. Esto es lo que hace responsivo todo el rem del CSS. */
html {
font-size: clamp(14px, 0.28vw + 12.65px, 18px);
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-light);
font-size: var(--texto);
line-height: 1.65;
color: var(--tinta);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img,
video {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
/* View Transitions */
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.55s;
animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}
::view-transition-old(root) {
animation-name: vt-fade-out;
}
::view-transition-new(root) {
animation-name: vt-fade-in;
}
@keyframes vt-fade-out {
to {
opacity: 0;
transform: scale(1.02);
}
}
@keyframes vt-fade-in {
from {
opacity: 0;
transform: scale(0.985);
}
}
/* ============================================
TYPOGRAPHY
============================================ */
.eyebrow {
font-family: var(--font-semibold);
font-size: 0.6875rem;
font-weight: 300;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
display: inline-flex;
align-items: center;
gap: 0.625rem;
}
.eyebrow::before {
content: "";
width: 1.125rem;
height: 0.0625rem;
background: currentColor;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-xbold);
font-weight: 500;
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--tinta);
text-wrap: balance;
}
h1 {
font-size: var(--titulo-pagina);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
}
/* El h2 base toma la escala de titular de sección: es el papel que cumple en
todo el sitio. Antes medía MENOS que el h3 de debajo, que es justo el tipo de
incoherencia que la escala viene a quitar. */
h2 {
font-size: var(--titulo-seccion);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
}
h3 {
font-size: var(--titulo-bloque);
line-height: 1.2;
}
h4 {
font-size: var(--titulo-menor);
line-height: 1.25;
}
h4 {
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
}
/* ---- La negrita, que sin esto NO SE VE ----
Cada corte con nombre declara `font-weight: 100 900` (ver la cabecera de este
archivo): es lo que evita que el navegador fabrique una negrita sintética
encima de una letra que ya tiene su grosor. El efecto secundario es que
`font-weight: bold` no cambia NADA — un se pintaba exactamente igual
que el texto de al lado, y en el panel la tecla de negrita no hacía nada
visible.
La emphasis del Manual es el corte SemiBold, así que la negrita cambia de
corte en vez de cambiar de peso. Va aquí, en el elemento, para que valga en
todo el sitio y en cualquier texto que venga del CMS. Las reglas que ya visten
un concreto (.article-meta strong, .feat-counter strong…) mandan sobre
esta por especificidad, así que no se toca ninguna. */
strong,
b {
font-family: var(--font-semibold);
}
p {
text-wrap: pretty;
color: var(--secundario-claro);
font-family: var(--font-light);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.85;
letter-spacing: 0;
}
/* Párrafo secundario / descripción: taglines, citas, subtexto bajo imagen.
Barlow 15px, peso 300, itálica — diferencia sin perder legibilidad. */
.lead-text,
p.secondary {
font-family: var(--font-light);
font-size: 0.9375rem;
font-weight: 300;
font-style: normal;
line-height: 1.8;
color: var(--secundario-claro);
}
.italic {
font-style: normal;
}
/* ============================================
NAVBAR
============================================ */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
padding: 1.125rem var(--pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
/* La barra es transparente y cruza todo el ancho, así que sin esto se queda con
los clics de lo que hay debajo — el logo del banner, que vive en su propia capa
y ya no puede ponerse por encima de la barra: es un enlace al inicio y no
respondía. Los hijos (el CTA y el chip «Menú») recuperan el ratón, así que
siguen funcionando; lo que deja de capturar es el hueco vacío entre ellos. */
pointer-events: none;
/* La altura de la fila la marcaba el logo, que era su elemento más alto. Al
salir el logo de aquí (ahora se queda en el banner, ver .nav-brand) la fila
se habría encogido hasta el chip «Menú» y el CTA habría subido 1.6 px. Este
mínimo la deja exactamente donde estaba.
Va en `rem` y no en `px` porque el tamaño de raíz de este diseño es fluido, así
que la fila sigue escalando igual que antes. Incluye el relleno y el borde
(`box-sizing: border-box`). Si se cambia el logo o la tipografía de la marca,
hay que volver a medirlo: lo fijaba el bloque de texto «NAYRA / TRAVEL». */
min-height: 6.2375rem;
transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease, color 0.4s ease;
color: var(--superficie);
border-bottom: 1px solid transparent;
}
/* Los elementos de la barra sí son pulsables: es el fondo vacío el que no debe
robar clics (ver `pointer-events: none` arriba). Vale para los que inyecta el
JS —el chip «Menú»— porque son hijos directos igual que el CTA. */
.nav > * {
pointer-events: auto;
}
/* Sin barra: el nav es siempre transparente; al hacer scroll solo cambia el
color del texto (oscuro sobre contenido claro). */
.nav.scrolled {
background: transparent;
color: var(--tinta);
border-bottom-color: transparent;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
/* Over full-bleed dark sections (hero + destinos showcase): keep the nav
transparent with white text, exactly like the initial hero state. */
.nav.on-dark {
background: transparent;
color: var(--superficie);
border-bottom-color: transparent;
}
/* Apariencia del logo, común a sus DOS copias: la del banner (.banner-brand) y la
del menú desplegable (.sm-brand). Aquí no hay posicionamiento a propósito: cada
copia se coloca como lo que la rodea, y de eso se encargan sus propias reglas.
El marcado sale de la plantilla oculta que pinta SiteChrome y lo coloca
src/lib/interactions.ts. */
.nav-brand {
font-family: var(--fuente-destacados);
font-size: clamp(1.5rem, 2vw, 1.875rem);
font-style: normal;
font-weight: 800;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.625rem;
/* Sin transiciones: el logo es un elemento estático que enlaza al inicio, y
nada más. Antes tenía dos —un fundido de color con el «wash» de Paquetes y un
desplazamiento al centro al abrir el menú—, pero las dos existían porque el
logo viajaba con el nav sobre fondos cambiantes. Ahora vive en el banner y no
se mueve de ahí. */
transition: none;
}
/* Cuando el fondo del apartado principal se aclara (efecto wash de Paquetes),
el logo "NT Nayra Travel" pasa a negro para mantener el contraste
(sobreescribe el color blanco de .nav.on-dark). */
.nav.nav-pkgs-ink .nav-brand {
color: var(--tinta);
}
/* Páginas cuyo inicio es de fondo claro y sin hero oscuro (Nosotros, Destinos):
el logo "NT Nayra Travel" va en tinta desde el inicio — negro en modo día y
blanco en modo noche (var(--ink) se invierte con html.dark). */
body.page-nosotros .nav-brand,
body.page-destinos .nav-brand {
color: var(--tinta);
}
/* Logo imagen (reemplaza al antiguo círculo "NT") */
.nav-brand-logo {
width: 5rem;
height: auto;
display: block;
flex-shrink: 0;
}
/* Versión de logo según el fondo (Manual 2025, pág. 8):
día = triángulo/sol en teal; noche = en blanco (montaña dorada en ambos). */
.nav-brand-logo--dark { display: none; }
html.dark .nav-brand-logo--light { display: none; }
html.dark .nav-brand-logo--dark { display: block; }
/* Texto de marca apilado: "Nayra" arriba, "Travel" abajo */
.nav-brand-text {
display: flex;
flex-direction: column;
line-height: 1.05;
font-family: var(--fuente-destacados);
font-weight: 700;
font-size: clamp(1rem, 2.6vw, 1.875rem);
letter-spacing: 0.02em;
color: var(--primario);
}
.nav-brand-text .brand-nayra {
color: var(--secundario);
}
.nav-brand-text .brand-travel {
color: var(--secundario);
}
/* Modo noche: el texto del logo va en blanco (Manual 2025, Fondo Oscuro). */
html.dark .nav-brand-text .brand-nayra,
html.dark .nav-brand-text .brand-travel {
color: var(--tinta);
}
.nav-cta {
position: relative;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.5rem;
border-radius: 0.3125rem;
background: var(--primario);
color: #fff;
border: 1.5px solid var(--primario);
font-family: var(--fuente-botones);
font-size: 0.875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
overflow: hidden;
transition: border-color 0.5s, color 0.4s, background 0.4s;
animation: nav-cta-latido 3.3s ease-in-out infinite;
}
/* Latido: el botón crece, aguanta un instante, vuelve y espera antes de repetir.
Los tiempos que se pidieron, y de dónde salen los porcentajes:
crecer 1 s → 1 / 3.3 = 30.3 %
arriba 0.3 s → 1.3 / 3.3 = 39.4 %
encoger 1 s → 2.3 / 3.3 = 69.7 %
abajo 1 s → 3.3 / 3.3 = 100 % (duración total: 3.3 s)
Si se cambia un tramo hay que recalcular TODOS los porcentajes y la duración
de arriba: en una animación CSS los cortes son relativos al total, no
duraciones sueltas.
El resplandor usa el oro de marca (157,139,83) en rgba y no var(--primario),
porque hace falta variar el alfa en cada corte y una variable con un hex no
deja hacerlo dentro de un box-shadow. */
@keyframes nav-cta-latido {
/* Reposo */
0% {
transform: scale(1);
box-shadow: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.08), 0 0 0 rgba(157, 139, 83, 0);
}
/* Ha terminado de crecer */
30.3% {
transform: scale(1.055);
box-shadow: 0 0.625rem 1.375rem rgba(0, 0, 0, 0.08), 0 0 0.875rem rgba(157, 139, 83, 0.28), 0 0 1.75rem rgba(157, 139, 83, 0.14);
}
/* Fin de la espera arriba: aquí empieza a encoger */
39.4% {
transform: scale(1.055);
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08), 0 0 1.625rem rgba(157, 139, 83, 0.42), 0 0 3.4375rem rgba(157, 139, 83, 0.22);
}
/* Ha terminado de encoger */
69.7% {
transform: scale(1);
box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.08), 0 0 0.625rem rgba(157, 139, 83, 0.10), 0 0 1.25rem rgba(157, 139, 83, 0.05);
}
/* Espera abajo hasta completar el ciclo */
100% {
transform: scale(1);
box-shadow: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.08), 0 0 0 rgba(157, 139, 83, 0);
}
}
/* Pausar el latido al pasar el cursor para no interferir con el hover */
.nav-cta:hover {
animation-play-state: paused;
}
/* Respetar la preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
.nav-cta {
animation: none;
}
}
.nav-cta::before {
content: '';
position: absolute;
width: 100%;
aspect-ratio: 1;
background: #021b1a;
border-radius: 50%;
top: 50%;
left: 0;
transform: translateX(-100%) translateY(-50%);
transition: transform 0.7s ease;
}
.nav-cta:hover {
border-color: #021b1a;
color: #fff;
}
.nav-cta:hover::before {
transform: translateX(0) translateY(-50%) scale(2);
}
.nav-cta>span {
position: relative;
z-index: 1;
}
.nav-cta .arrow-icon {
width: 1.875rem;
height: 1.875rem;
display: grid;
place-items: center;
border: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
border-radius: 50%;
transform: rotate(45deg);
transition: transform 0.3s ease, background 0.3s, border-color 0.3s;
}
.nav-cta:hover .arrow-icon {
transform: rotate(90deg);
background: #fff;
border-color: transparent;
color: #021b1a;
}
.nav-cta .arrow-icon svg {
width: 0.6875rem;
height: 0.6875rem;
fill: currentColor;
}
.nav-cta:hover .arrow-icon svg {
fill: #021b1a;
}
/* ============================================
NAV REDUCIDO + MENÚ A PANTALLA COMPLETA (estilo Myrtha)
Solo se muestran el logo, el botón "Menú" y el CTA.
============================================ */
/* Los dos colores van al revés que en .nav-cta, por encargo: aquí el botón parte
del verde oscuro y es el ORO el que barre en el hover. En el CTA de al lado es
al contrario. Es deliberado —los dos botones dejan de ser el mismo bloque de
color pegado— así que no se "corrija" para igualarlos.
El texto se queda en blanco: sirve para los dos fondos, y aquí el color solo
pinta ya las dos rayitas del icono. */
.nav-menu-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 1.5rem;
min-height: 3.75rem;
border-radius: 0.3125rem;
background: #021b1a;
border: 1.5px solid #021b1a;
cursor: pointer;
color: #fff;
font-family: var(--fuente-botones);
font-size: 0.875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
overflow: hidden;
transition: border-color 0.5s, color 0.4s, background 0.4s;
}
/* Mismo círculo que barre que en .nav-cta, pero en oro: ver arriba, los colores
de este botón van intercambiados respecto al CTA. */
.nav-menu-toggle::before {
content: '';
position: absolute;
width: 100%;
aspect-ratio: 1;
background: var(--primario);
border-radius: 50%;
top: 50%;
left: 0;
transform: translateX(-100%) translateY(-50%);
transition: transform 0.7s ease;
}
.nav-menu-toggle:hover {
border-color: var(--primario);
color: #fff;
}
.nav-menu-toggle:hover::before {
transform: translateX(0) translateY(-50%) scale(2);
}
/* El icono queda por encima del círculo que barre. Aquí entraba también un
.nmt-label con la palabra «Menú»; se quitó por encargo y el botón es ya solo
el icono, así que la etiqueta no está en el marcado (ver interactions.ts) y
su nombre accesible lo pone un aria-label. */
.nav-menu-toggle .nmt-icon {
position: relative;
z-index: 1;
}
.nav-menu-toggle .nmt-icon {
position: relative;
display: inline-block;
width: 1.5rem;
height: 0.625rem;
}
.nav-menu-toggle .nmt-icon span {
position: absolute;
left: 0;
right: 0;
height: 0.0938rem;
background: currentColor;
transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1), top 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.nav-menu-toggle .nmt-icon span:nth-child(1) {
top: 0.0625rem;
}
.nav-menu-toggle .nmt-icon span:nth-child(2) {
top: 0.5rem;
}
.nav-menu-toggle.is-active .nmt-icon span:nth-child(1) {
top: 0.25rem;
transform: rotate(45deg);
}
.nav-menu-toggle.is-active .nmt-icon span:nth-child(2) {
top: 0.25rem;
transform: rotate(-45deg);
}
/* Mientras el menú está abierto, el nav queda en claro (logo/botones legibles) */
/* Con el menú abierto el nav es transparente (sin barra): la imagen ocupa toda
la altura por la izquierda y el panel crema por la derecha. El logo se
desliza a la parte superior de la columna central (en tinta, sobre el panel). */
body.site-menu-open .nav {
background: transparent !important;
border-bottom-color: transparent !important;
}
/* ── El logo dentro del BANNER ──────────────────────────────────────────────
Es un elemento del banner, no del nav: se coloca respecto a él (`absolute`,
nunca `fixed`), así que se queda quieto en su sitio y corre la misma suerte que
el banner. En la home eso significa exactamente lo que le pasa al titular: el
escenario está clavado (`sticky`) mientras se hace el zoom, el logo no se mueve
ni un píxel y se desvanece con el scroll —el fundido lo lleva la misma línea de
tiempo de GSAP que el texto, en src/lib/interactions.ts, pero sin el
desplazamiento hacia abajo que sí tiene el texto—. En un hero normal
(PageHero) simplemente se va hacia arriba con él.
La misma posición que tenía en la fila del nav: `top` = su relleno superior,
`left` = el mismo `--pad`. */
/* ── En el BANNER y en el MENÚ va solo el SÍMBOLO, sin el nombre ────────────
Se pidió así, primero para el banner y después para el menú desplegable: fuera
el «NAYRA TRAVEL» y que el dibujo ocupe lo que ocupaban los dos juntos. En el
pie el nombre se queda.
Basta con esconder el , y solo desde que el campo del panel lleva el
SÍMBOLO y no el logotipo entero: mientras llevó el logotipo, el nombre estaba
además metido en los píxeles de la imagen y esconder el texto no servía de
nada. Ver la nota del campo en cms/globals/SiteSettings.ts.
POR CSS Y NO RECORTANDO EL MARCADO. Las dos copias salen de la misma plantilla
oculta (#nt-logo-src) y las coloca src/lib/interactions.ts; el pie usa su
propio marcado. Se podría quitar el del clon al construir el menú, pero
entonces la decisión de «aquí sí, aquí no» viviría en dos sitios —una regla en
esta hoja y un `remove()` en el JS— y la de al lado dejaría de contarla entera.
Con las dos reglas juntas se lee de un vistazo qué copia lleva nombre.
EL TAMAÑO. El conjunto medía 215px de ancho: símbolo 90 (los 5rem de
.nav-brand-logo) + hueco 11.25 (el `gap` de .nav-brand) + nombre 114. Los
12rem son 216 con la raíz de este sitio, o sea ese mismo ancho. Al darle el
ancho de los dos, el símbolo crece también a lo alto —conserva su proporción,
1.593:1— y pasa de 36px a 136, casi el doble de los 71 que medía el bloque
entero. Es la consecuencia de darle el ancho de los dos y no hay forma de
esquivarla sin deformar el dibujo. Si se quisiera conservar el ALTO, el número
es 6.3rem.
El `gap` de .nav-brand deja de pintar nada al quedar un solo hijo visible. */
.banner-brand .nav-brand-text,
.sm-brand .nav-brand-text { display: none; }
.banner-brand .nav-brand-logo,
.sm-brand .nav-brand-logo { width: 12rem; }
.banner-brand {
position: absolute;
top: 1.125rem;
left: var(--pad);
/* La capa del texto del banner: por encima de la foto y del marco del vagón,
igual que el titular, para que se comporten como una sola cosa. */
z-index: 6;
/* El contenedor del texto tiene `pointer-events: none`; el logo sí es un
enlace, así que recupera el ratón. */
pointer-events: auto;
}
/* ── El logo dentro del MENÚ desplegable ────────────────────────────────────
Aquí no se posiciona: es un elemento más del panel, el primero de su columna.
Así entra deslizándose de derecha a izquierda con todo el panel —la animación
es del overlay, no suya— igual que «ES», «Navegación» o «Programas». */
/* El logo, en la fila de la equis y en su misma columna.
Va ANCLADO al panel y no empujado con márgenes o `transform` porque el hueco
que tenía encima no es fijo: .sm-center reparte el espacio sobrante con
`justify-content: center`, así que depende del alto de la ventana y cualquier
desplazamiento en rem solo acertaría en una pantalla.
`top` es el relleno superior de .nav —donde arranca el chip de la equis— y el
`height` es el alto de ese chip: centrando dentro de esa caja, el logo queda
en su misma línea. `left` repite el padding izquierdo de .sm-main para no
salirse de la columna. */
.sm-brand {
position: absolute;
top: 1.125rem;
left: clamp(1.875rem, 3vw, 3.25rem);
/* Sin alto fijo: lo marca el logo. Eran 3.75rem (60px), la medida del bloque
cuando llevaba el nombre al lado y mandaba el TEXTO. Con el dibujo a 12rem de
ancho el alto sale de su proporción —87px con el archivo que hay hoy puesto,
otro número con el que se suba mañana— y se salía del enlace, que es la caja
que recibe el clic. Por eso no se sustituye por otra cifra fija. */
align-items: center;
margin: 0;
}
/* el botón del menú es un chip oscuro: el aspa se mantiene blanca sobre él */
body.site-menu-open .nav-menu-toggle {
color: #fff;
}
/* Con el menú abierto desaparece el CTA: queda solo la equis */
body.site-menu-open .nav-cta {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s, visibility 0s 0.25s;
}
/* Overlay del menú — entra desde la DERECHA. Dos zonas:
IZQUIERDA = imagen de vista previa a toda la columna (cortina + zoom al cambiar);
DERECHA (del centro hacia la derecha) = panel sólido con las secciones y subopciones. */
.site-menu {
position: fixed;
inset: 0;
z-index: 90;
background: transparent;
color: var(--tinta);
transform: translateX(100%);
visibility: hidden;
transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 0.7s;
}
.site-menu.is-open {
transform: translateX(0);
visibility: visible;
transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}
.sm-grid {
height: 100%;
display: grid;
grid-template-columns: 1fr 1.55fr;
/* izquierda imagen a sangre · derecha sólida (Navegación + subopciones) */
}
/* Utilidades del menú (idioma + modo noche), encima de "Navegación" */
.sm-utils {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
}
.sm-util {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 2.75rem;
border: 1px solid var(--line);
border-radius: 62.4375rem;
background: transparent;
color: var(--tinta);
cursor: pointer;
transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.15s;
}
.sm-util:active {
transform: scale(0.95);
}
/* EL SELECTOR DE IDIOMA, vestido como el botón de tema de al lado: el mismo
relleno blanco con tinta verde oscuro, y al revés en modo noche. Antes era una
píldora hueca junto a un botón macizo, y su lista la pintaba el sistema
operativo —gris y cuadrada—. Ahora la lista es marcado propio (ver el selector
en lib/interactions) y sigue la misma piel: redondeada, con el borde de las
píldoras y el idioma elegido marcado con el color del botón. */
.sm-utils {
position: relative;
z-index: 5;
}
.sm-lang {
position: relative;
padding: 0;
background: #fff;
color: #021b1a;
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
html.dark .sm-lang {
background: #021b1a;
color: #fff;
}
.sm-lang:hover,
.sm-lang.is-open {
border-color: var(--ink);
}
/* El encogido al pulsar va en el BOTÓN, no en la píldora: en la píldora también
encogía la lista abierta cada vez que se pulsaba una opción. */
.sm-lang:active {
transform: none;
}
.sm-lang-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: 100%;
padding: 0 0.875rem 0 1.125rem;
border: 0;
border-radius: inherit;
background: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: pointer;
transition: transform 0.15s;
}
.sm-lang-btn:active {
transform: scale(0.95);
}
.sm-lang-btn:focus-visible {
outline: 2px solid var(--primario);
outline-offset: 0.25rem;
}
.sm-lang-globo {
width: 0.9375rem;
height: 0.9375rem;
flex-shrink: 0;
}
/* Ancho fijo para las siglas: con dos o con cinco letras («PT-BR») la píldora
no baila de tamaño al cambiar de idioma. */
.sm-lang-actual {
min-width: 1.5rem;
text-align: center;
}
.sm-lang-flecha {
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
opacity: 0.7;
transition: transform 0.3s ease;
}
.sm-lang.is-open .sm-lang-flecha {
transform: rotate(180deg);
}
.sm-lang-lista {
position: absolute;
top: calc(100% + 0.5rem);
left: -1px;
min-width: 12rem;
max-height: min(18rem, 50vh);
overflow-y: auto;
margin: 0;
padding: 0.375rem;
list-style: none;
background: #fff;
color: #021b1a;
border: 1px solid var(--line);
border-radius: 1.375rem;
box-shadow: 0 0.75rem 2rem -0.75rem rgba(2, 27, 26, 0.28);
animation: sm-lang-entra 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sm-lang-lista[hidden] {
display: none;
}
html.dark .sm-lang-lista {
background: #021b1a;
color: #fff;
box-shadow: 0 0.75rem 2rem -0.75rem rgba(0, 0, 0, 0.6);
}
@keyframes sm-lang-entra {
from { opacity: 0; transform: translateY(-0.375rem); }
to { opacity: 1; transform: none; }
}
.sm-lang-op {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.875rem;
border-radius: 62.4375rem;
cursor: pointer;
outline: none;
transition: background 0.2s, color 0.2s;
}
.sm-lang-op:hover,
.sm-lang-op:focus-visible {
background: rgba(2, 27, 26, 0.07);
}
html.dark .sm-lang-op:hover,
html.dark .sm-lang-op:focus-visible {
background: rgba(255, 255, 255, 0.1);
}
/* El elegido, con los colores del botón en su estado contrario: macizo. */
.sm-lang-op[aria-selected="true"] {
background: #021b1a;
color: #fff;
}
html.dark .sm-lang-op[aria-selected="true"] {
background: #fff;
color: #021b1a;
}
.sm-lang-op-code {
min-width: 1.75rem;
font-size: 0.6875rem;
letter-spacing: 0.16em;
}
.sm-lang-op-nombre {
font-family: var(--font-light);
font-size: 0.875rem;
letter-spacing: normal;
text-transform: none;
}
/* INICIO, a la derecha del modo noche: la misma pieza redonda que el botón de
tema, con la casa dentro. Sus estilos se perdieron por el camino y el enlace
quedó en 2px de ancho, una raya junto al sol. */
.sm-inicio {
width: 2.75rem;
padding: 0.6875rem;
flex-shrink: 0;
background: #fff;
color: #021b1a;
text-decoration: none;
}
html.dark .sm-inicio {
background: #021b1a;
color: #fff;
}
.sm-inicio svg {
width: 100%;
height: 100%;
}
.sm-inicio:hover {
border-color: var(--ink);
}
.sm-inicio:focus-visible {
outline: 2px solid var(--primario);
outline-offset: 0.25rem;
}
/* Botón de tema: sol (claro) → luna (oscuro), recreación CSS de toggles.dev */
.sm-theme {
width: 2.75rem;
padding: 0.5625rem;
background: #fff;
color: #021b1a;
}
html.dark .sm-theme {
background: #021b1a;
color: #fff;
}
.sm-theme svg {
width: 100%;
height: 100%;
}
/* El recorte se desplaza y "muerde" el disco: de sol a luna creciente */
#sm-theme-clip path {
transition: transform 0.7s ease-in-out;
}
html.dark #sm-theme-clip path {
transform: translate(-0.75rem, 0.625rem);
}
.sm-theme-core {
transition: r 0.7s ease-in-out;
}
html.dark .sm-theme-core {
r: 10;
}
.sm-theme-rays {
transform-origin: 1rem 1rem;
transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}
html.dark .sm-theme-rays {
transform: rotate(-100deg) scale(0.5);
opacity: 0;
}
.sm-eyebrow {
display: block;
margin-bottom: clamp(1.125rem, 3vh, 2.125rem);
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
}
/* IZQUIERDA — la imagen ocupa TODA la columna (sin vidrio ni blur). Al
cambiar, la imagen entrante llega ampliada (zoom de afuera hacia adentro)
y se asienta en su tamaño mientras la actual sube como cortina. */
.sm-left {
position: relative;
overflow: hidden;
background: #120d09;
color: #fff;
}
/* DERECHA — panel sólido (crema): Navegación (centro) + subopciones (derecha).
padding-left moderado para que la columna de Navegación quede un poco más a
la izquierda (sin invadir el vidrio). */
.sm-main {
/* Blanco liso, por encargo. Llevaba el mismo fondo topográfico (las curvas de
nivel de /assets/topo-bg.svg) que la sección Paquetes, sobre el crema del
sitio; ahora el panel no compite con los titulares ni con las fotos.
El modo oscuro se queda con su superficie: ver la regla de html.dark justo
debajo. Sin ella, quien tenga el tema oscuro —que se cambia desde ESTE
panel— se encontraría un rectángulo blanco encendido. */
background: #fff;
color: var(--tinta);
/* Ancla del logo, que va posicionado (ver .sm-brand). */
position: relative;
padding: clamp(5.75rem, 13vh, 9.375rem) var(--pad) clamp(2.5rem, 6vh, 4.375rem) clamp(1.875rem, 3vw, 3.25rem);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.75rem, 3.5vw, 4rem);
align-items: stretch;
overflow-y: auto;
}
/* En oscuro, la superficie del tema. El blanco de arriba es para el tema claro:
en oscuro sería un foco en mitad de la pantalla. */
html.dark .sm-main {
background: var(--bg);
}
.sm-figure {
position: absolute;
inset: 0;
}
/* Pila de capas (estilo elementis.co): cada cambio añade una capa ENCIMA que
entra como cortina de abajo hacia arriba (clip-path) con su imagen ya
ampliada perdiendo el zoom (GSAP). Las capas tapadas se retiran al llegar
la cortina arriba; las cortinas en curso nunca se cancelan. */
.sm-fig-stack {
position: absolute;
inset: 0;
z-index: 1;
}
.sm-fig-layer {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
will-change: clip-path;
}
.sm-fig-layer::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%);
}
.sm-fig-layer img {
width: 100%;
height: 100%;
object-fit: cover;
will-change: transform;
}
/* Enlace superior: solo el pie (kicker + título) sobre la pila de imágenes */
.sm-feature-card {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(1.5rem, 3vw, 2.875rem) clamp(1.5rem, 2.8vw, 2.75rem);
}
.sm-feature-kicker {
position: relative;
z-index: 1;
display: block;
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primario);
}
.sm-feature-title {
position: relative;
z-index: 1;
display: block;
margin-top: 0.5rem;
max-width: 26.25rem;
font-family: var(--font-xbold);
font-size: 1.1875rem;
line-height: 1.25;
color: #fff;
}
/* CENTRO — lista de secciones principales (al pasar el cursor, cambia la derecha) */
.sm-center {
display: flex;
flex-direction: column;
justify-content: center;
}
.sm-primary {
display: flex;
flex-direction: column;
}
.sm-prim {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: clamp(0.5rem, 1.4vh, 1rem) 0;
font-weight: 500;
/* Un escalón por debajo de lo que fue —era clamp(1.75rem, 3.2vw, 3.25rem)—, por
encargo. Se bajan los tres valores a la vez y no solo el máximo: con el vw
intacto, el titular seguiría creciendo igual de rápido y solo cambiaría en
las pantallas más anchas. La proporción entre ellos se mantiene, así que el
salto entre una ventana pequeña y una grande se ve igual de suave. */
font-size: clamp(1.5rem, 2.7vw, 2.75rem);
line-height: 1.05;
letter-spacing: -0.01em;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
border-bottom: 1px solid var(--line-soft);
transition: color 0.3s, padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sm-prim:last-child {
border-bottom: 0;
}
.sm-prim-arrow {
flex: none;
opacity: 0;
transform: translateX(-0.5rem);
transition: opacity 0.3s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
}
.sm-prim.is-active,
.sm-prim:hover {
color: var(--tinta);
padding-left: 0.75rem;
}
.sm-prim.is-active .sm-prim-arrow,
.sm-prim:hover .sm-prim-arrow {
opacity: 1;
transform: none;
color: var(--primario);
}
/* DERECHA (dentro del panel sólido) — subopciones de la sección activa */
.sm-right {
position: relative;
display: grid;
align-items: center;
}
.sm-subgroup {
list-style: none;
margin: 0;
padding: 0;
grid-area: 1 / 1;
/* todas en la misma celda: se solapan y hacen crossfade */
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.125rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.4s ease, visibility 0s 0.4s;
}
.sm-subgroup.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.45s ease, visibility 0s;
}
.sm-subgroup-head {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
margin-bottom: 1rem;
}
.sm-subgroup a {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
padding: 0.5625rem 0;
font-size: 1rem;
transition: color 0.2s, padding-left 0.2s;
}
.sm-subgroup a:hover {
color: var(--primario);
padding-left: 0.375rem;
}
.sm-subgroup a span {
font-family: var(--font-semibold);
font-size: 0.625rem;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
white-space: nowrap;
}
/* las subopciones entran escalonadas cada vez que se activa una sección */
.sm-subgroup li {
opacity: 0;
transform: translateX(1.25rem);
transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.sm-subgroup.is-active li {
opacity: 1;
transform: none;
}
.sm-subgroup.is-active li:nth-child(1) {
transition-delay: 0.04s;
}
.sm-subgroup.is-active li:nth-child(2) {
transition-delay: 0.09s;
}
.sm-subgroup.is-active li:nth-child(3) {
transition-delay: 0.14s;
}
.sm-subgroup.is-active li:nth-child(4) {
transition-delay: 0.19s;
}
.sm-subgroup.is-active li:nth-child(5) {
transition-delay: 0.24s;
}
.sm-subgroup.is-active li:nth-child(6) {
transition-delay: 0.29s;
}
.sm-subgroup.is-active li:nth-child(7) {
transition-delay: 0.34s;
}
.sm-subgroup.is-active li:nth-child(8) {
transition-delay: 0.39s;
}
/* Responsive — apilar: panel sólido (Navegación + subopciones) arriba, imagen abajo */
@media (max-width: 900px) {
.sm-grid {
grid-template-columns: 1fr;
}
.sm-main {
order: 1;
grid-template-columns: 1fr;
gap: 1.75rem;
padding-left: var(--pad);
}
/* El panel cambia su relleno izquierdo al apilarse; el logo va con él. */
.sm-brand {
left: var(--pad);
}
.sm-left {
order: 2;
min-height: 48vh;
}
.sm-right {
display: block;
}
.sm-subgroup {
display: none;
}
.sm-subgroup.is-active {
display: flex;
}
/* El móvil baja en la misma proporción que el tamaño de arriba: si solo se
tocara aquel, el menú del teléfono acabaría con la letra MÁS GRANDE que el
del escritorio, que es justo lo que esta media query existe para evitar. */
.sm-prim {
font-size: clamp(1.375rem, 6vw, 2.125rem);
}
.sm-prim-arrow {
opacity: 1;
transform: none;
}
}
/* ============================================
HERO
============================================ */
.hero {
position: relative;
height: 100vh;
min-height: 45rem;
overflow: hidden;
color: #fff;
display: flex;
flex-direction: column;
}
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.45) 100%);
z-index: 4;
pointer-events: none;
}
.hero-layer {
position: absolute;
will-change: transform;
}
.hero-layer--sky {
inset: -10% 0 -10% 0;
z-index: 1;
}
.hero-layer--sky img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-layer--machu {
z-index: 2;
/* Anchored in vw (not %) so the vertical position scales with the image,
which is width-based. Matches -30% (−324px) exactly at 1920×1080. */
bottom: -16.875vw;
left: 0;
right: 0;
display: flex;
justify-content: center;
}
.hero-layer--machu img {
/* max(100%, 90vh): on wide screens fills the width like the copy; on narrow
screens the vh floor takes over so the image grows (and rises) instead of
shrinking into a thin strip. Identical to the copy at 1920 (wins 100%). */
width: max(100%, 90vh);
max-width: 112.5rem;
height: auto;
display: block;
}
.hero-layer--people {
z-index: 3;
/* vw anchor, matches -10% (−108px) exactly at 1920×1080. */
bottom: -5.625vw;
left: 0;
right: 0;
display: flex;
justify-content: center;
}
.hero-layer--people img {
/* Same idea: grows and rises on narrow screens via a vh floor.
Identical to the copy at 1920 (wins 100%, capped at 1000px). */
width: max(100%, 55vh);
max-width: 62.5rem;
height: auto;
display: block;
}
.hero-content {
position: relative;
z-index: 2;
margin-top: auto;
padding: 0 var(--pad) 4rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2.5rem;
}
.hero h1 {
color: #fff;
max-width: 14ch;
}
.hero h1 .scribble {
font-style: normal;
font-family: var(--font-xbold);
color: var(--primario);
}
.hero-meta {
text-align: right;
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.85;
max-width: 28ch;
}
.hero-meta .big {
font-family: var(--font-xbold);
font-size: 1.125rem;
font-style: normal;
letter-spacing: 0;
text-transform: none;
margin-top: 0.875rem;
display: block;
opacity: 1;
}
.hero-search {
position: absolute;
bottom: 0;
left: var(--pad);
right: var(--pad);
z-index: 5;
background: var(--bg);
border-radius: 0.25rem;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
align-items: stretch;
overflow: hidden;
}
.hero-search>* {
padding: 1.375rem 1.5rem;
border-right: 1px solid var(--line-soft);
}
.hero-search>*:last-child {
border-right: none;
}
.hs-field {
display: flex;
flex-direction: column;
gap: 0.25rem;
cursor: pointer;
transition: background 0.2s;
}
.hs-field:hover {
background: var(--bg-soft);
}
.hs-label {
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
}
.hs-value {
font-family: var(--font-xbold);
font-size: 1.125rem;
font-style: normal;
color: var(--tinta);
}
.hs-submit {
background: var(--ink);
color: #fff;
border: none;
padding: 0 2.5rem;
font-family: var(--font-light);
font-size: 0.8125rem;
letter-spacing: 0.04em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.75rem;
transition: background 0.25s;
}
.hs-submit:hover {
background: var(--primario);
}
.hs-submit svg {
width: 1rem;
height: 1rem;
}
/* ============================================
SECTIONS
============================================ */
section {
padding: 0 var(--pad);
position: relative;
}
section.tight {
padding: 5rem var(--pad);
}
section.dark {
background: var(--bg-deep);
color: var(--superficie);
}
section.dark h2,
section.dark h3,
section.dark h4 {
color: var(--superficie);
}
section.dark p {
color: oklch(0.78 0.012 70);
}
section.dark .eyebrow {
color: oklch(0.7 0.012 70);
}
.section-hd {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2.5rem;
margin-bottom: 4rem;
}
.section-hd p {
max-width: 36ch;
font-size: 0.9375rem;
}
.container {
max-width: var(--maxw);
margin: 0 auto;
}
/* Reveal — base.
Solo el ESTADO DE PARTIDA (antes de que el JS tome el mando): oculto y
desplazado. La animación ya no es una transición con duración propia — la
gobierna la barra de scroll desde interactions.ts (GSAP `scrub`), así que
aquí NO puede haber `transition`: emborronaría el seguimiento del scroll. */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
opacity: 0;
}
.reveal {
transform: translateY(3.125rem);
}
.reveal-left {
transform: translateX(-4.375rem);
}
.reveal-right {
transform: translateX(4.375rem);
}
.reveal-scale {
transform: scale(0.9) translateY(1.875rem);
}
.reveal.in,
.reveal-left.in,
.reveal-right.in,
.reveal-scale.in {
opacity: 1;
transform: translate(0) scale(1);
}
/* `data-delay` ya no retrasa segundos: en interactions.ts desplaza el tramo de
scroll del elemento, de modo que el escalonado se mide en recorrido. */
.mask-reveal {
overflow: hidden;
display: block;
}
.mask-reveal>* {
display: block;
transform: translateY(105%);
}
.mask-reveal.in>* {
transform: translateY(0);
}
/* ============================================
INTRO STRIP
============================================ */
.intro {
padding: 5rem var(--pad) 2.5rem;
}
.intro-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 5rem;
align-items: start;
}
.intro h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
}
.intro p {
font-size: 1.125rem;
max-width: 56ch;
}
.intro-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--line-soft);
}
.stat .n {
font-family: var(--font-xbold);
font-size: 3rem;
font-style: normal;
color: var(--primario);
line-height: 1;
}
.stat .l {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
margin-top: 0.5rem;
display: block;
}
/* ============================================
DESTINATIONS — horizontal scroll cards
============================================ */
.dest-scroll {
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 0 var(--pad) 2rem;
margin: 0 calc(var(--pad) * -1);
}
.dest-scroll::-webkit-scrollbar {
display: none;
}
.dest-row {
display: flex;
gap: 1.5rem;
}
.dest-card {
flex: 0 0 clamp(17.5rem, 32vw, 28.75rem);
scroll-snap-align: start;
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
border-radius: var(--radius);
cursor: pointer;
}
.dest-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dest-card:hover img {
transform: scale(1.06);
}
.dest-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
}
.dest-info {
position: absolute;
inset: auto 1.25rem 1.25rem 1.25rem;
z-index: 2;
color: #fff;
display: flex;
justify-content: space-between;
align-items: end;
gap: 1rem;
}
.dest-info h3 {
color: #fff;
font-style: normal;
font-size: 1.75rem;
}
.dest-info .meta {
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.8;
display: block;
margin-bottom: 0.25rem;
}
.dest-info .arrow {
width: 2.5rem;
height: 2.5rem;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
transition: background 0.25s, transform 0.25s;
}
.dest-card:hover .dest-info .arrow {
background: var(--primario);
border-color: var(--primario);
transform: rotate(-45deg);
}
.scroll-hint {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
margin-top: 1.5rem;
display: flex;
gap: 1rem;
align-items: center;
}
.scroll-hint .line {
flex: 1;
height: 0.0625rem;
background: var(--line);
max-width: 12.5rem;
}
/* ============================================
DESTINATIONS — pinned showcase (darknode-style)
============================================ */
/* Scramble / decode text — keep glyph width stable while it resolves */
.scramble {
font-variant-numeric: tabular-nums;
}
.dgn {
position: relative;
height: 500vh;
/* scroll length: one screen per destino (5) */
background: #0a0a0c;
padding: 0;
/* override the global section padding — full bleed, no side borders */
}
.dgn-stage {
position: sticky;
/* sticks while scrolling through the tall section */
top: 0;
height: 100vh;
overflow: hidden;
color: #fff;
}
/* Crossfading full-bleed backgrounds */
.dgn-bgs {
position: absolute;
inset: 0;
}
.dgn-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.07);
transition: opacity 1s ease, transform 7s ease;
will-change: opacity, transform;
}
.dgn-bg.is-active {
opacity: 1;
transform: scale(1);
}
.dgn-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(95deg, rgba(8, 8, 11, 0.5) 0%, rgba(8, 8, 11, 0.18) 40%, rgba(8, 8, 11, 0) 66%),
linear-gradient(0deg, rgba(8, 8, 11, 0.42) 0%, rgba(8, 8, 11, 0) 26%);
}
.dgn-top,
.dgn-deco,
.dgn-items,
.dgn-brand,
.dgn-hint {
position: absolute;
z-index: 3;
}
/* Top bar — pushed below the fixed navbar */
.dgn-top {
top: clamp(4.875rem, 10vh, 6.5rem);
left: var(--pad);
right: var(--pad);
display: flex;
justify-content: space-between;
align-items: center;
}
.dgn-top .eyebrow {
color: rgba(255, 255, 255, 0.85);
}
.dgn-counter {
font-family: var(--font-semibold);
font-size: 0.8125rem;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.55);
}
.dgn-counter b {
color: #fff;
font-weight: 500;
}
.dgn-counter i {
margin: 0 0.4375rem;
font-style: normal;
opacity: 0.45;
}
/* Left technical decoration */
.dgn-deco {
left: var(--pad);
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 1.375rem;
width: clamp(7.5rem, 12vw, 10.25rem);
}
.dgn-thumbs {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.dgn-thumb {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
background: none;
overflow: hidden;
cursor: pointer;
opacity: 0.38;
filter: grayscale(0.5);
transition: opacity 0.45s, border-color 0.45s, filter 0.45s;
}
.dgn-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dgn-thumb span {
position: absolute;
left: 0.3125rem;
bottom: 0.1875rem;
font-family: var(--font-semibold);
font-size: 0.5625rem;
letter-spacing: 0.1em;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.dgn-thumb.is-active {
opacity: 1;
border-color: var(--primario);
filter: none;
}
.dgn-radar {
position: relative;
width: 5.125rem;
height: 5.125rem;
color: rgba(255, 255, 255, 0.32);
}
.dgn-radar svg {
width: 100%;
height: 100%;
display: block;
}
.dgn-radar-sweep {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg, rgba(217, 119, 87, 0) 0deg, rgba(217, 119, 87, 0.4) 48deg, rgba(217, 119, 87, 0) 60deg);
animation: dgnSweep 4s linear infinite;
}
@keyframes dgnSweep {
to {
transform: rotate(360deg);
}
}
.dgn-coord {
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
}
/* Right stacked destinations */
.dgn-items {
right: var(--pad);
left: clamp(40%, 46vw, 52%);
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}
.dgn-it {
display: block;
width: 100%;
margin: 0;
padding: 0.4375rem 0;
text-align: left;
background: none;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
}
.dgn-it:first-child {
border-top: 0;
}
.dgn-it-num {
display: inline-block;
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.4);
transition: color 0.4s;
}
.dgn-it-name {
display: block;
font-family: var(--font-xbold);
font-style: normal;
font-size: 1.375rem;
line-height: 1.05;
color: rgba(255, 255, 255, 0.5);
transition: font-size 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s;
}
.dgn-it.is-active .dgn-it-num {
color: var(--primario);
}
.dgn-it.is-active .dgn-it-name {
font-size: clamp(2.375rem, 5.2vw, 4.625rem);
color: #fff;
}
.tour-intro-map-frame { position: relative; height: 100%; overflow: hidden; }
/* Expanding bordered detail frame */
.dgn-it-detail {
max-height: 0;
opacity: 0;
overflow: hidden;
max-width: 46ch;
margin-top: 0;
padding: 0 1.125rem;
border: 1px solid transparent;
transition: max-height 0.6s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.5s ease, margin 0.5s, padding 0.5s, border-color 0.5s;
}
.dgn-it.is-active .dgn-it-detail {
max-height: 20rem;
opacity: 1;
margin-top: 1rem;
padding: 1rem 1.125rem;
border-color: rgba(255, 255, 255, 0.22);
}
.dgn-it-meta {
display: block;
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primario);
margin-bottom: 0.625rem;
}
.dgn-it-detail p {
font-size: 0.875rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.82);
}
.dgn-it-go {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.875rem;
font-family: var(--fuente-botones);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.dgn-it-go svg {
transition: transform 0.3s;
}
.dgn-it:hover .dgn-it-go svg {
transform: translateX(0.25rem);
}
/* Pinned brand bottom-left */
.dgn-brand {
bottom: clamp(1.25rem, 4vh, 2.625rem);
left: var(--pad);
margin: 0;
font-family: var(--fuente-destacados);
font-size: clamp(2.125rem, 6.4vw, 6.5rem);
line-height: 0.86;
letter-spacing: -0.01em;
color: #fff;
text-shadow: 0 4px 34px rgba(0, 0, 0, 0.45);
pointer-events: none;
}
.dgn-brand span {
display: block;
}
.dgn-brand em {
font-style: normal;
color: rgba(255, 255, 255, 0.88);
}
/* Scroll hint bottom-right */
.dgn-hint {
bottom: clamp(1.25rem, 4vh, 2.625rem);
right: var(--pad);
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.dgn-hint-bar {
position: relative;
width: 3.625rem;
height: 0.0625rem;
background: rgba(255, 255, 255, 0.22);
overflow: hidden;
}
.dgn-hint-bar i {
position: absolute;
top: 0;
left: -30%;
width: 30%;
height: 100%;
background: var(--primario);
animation: dgnHint 2.4s ease-in-out infinite;
}
@keyframes dgnHint {
to {
left: 100%;
}
}
/* Tablet / mobile — keep the pinned showcase, reflow to fit */
@media (max-width: 860px) {
.dgn-deco {
display: none;
}
.dgn-items {
left: var(--pad);
right: var(--pad);
top: 46%;
}
.dgn-it {
padding: 0.3125rem 0;
}
.dgn-it.is-active .dgn-it-name {
font-size: clamp(1.875rem, 9vw, 2.875rem);
}
.dgn-it-detail {
max-width: none;
}
.dgn-brand {
font-size: clamp(1.75rem, 9vw, 3.25rem);
}
.dgn-hint {
display: none;
}
}
/* ============================================
ITINERARIO ANIMADO — rueda (3 visibles, activo centrado)
El activo se centra por JS (translateY del .dgn-wheel).
============================================ */
/* viewport de la rueda: a la IZQUIERDA, ocupa todo el alto y recorta */
#itinerario-dgn .dgn-items {
top: 0;
bottom: 0;
right: auto;
left: var(--pad);
width: min(46vw, 33.75rem);
transform: none;
overflow: hidden;
}
/* Vidrio esmerilado detrás de la columna de texto, para separarla del fondo de
imágenes. Va en el .dgn-stage (no en la columna, que recorta) para poder
arrancar desde el borde izquierdo del todo; se desvanece hacia la derecha
para fundirse con la imagen. Queda por debajo del texto (z-index 1). */
#itinerario-dgn .dgn-stage::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: calc(var(--pad) + min(46vw, 33.75rem));
z-index: 1;
background: rgba(12, 9, 6, 0.32);
-webkit-backdrop-filter: blur(0.875rem) saturate(1.05);
backdrop-filter: blur(0.875rem) saturate(1.05);
-webkit-mask-image: linear-gradient(to right, #000 60%, transparent 100%);
mask-image: linear-gradient(to right, #000 60%, transparent 100%);
pointer-events: none;
}
/* El rótulo superior y la marca quedan por encima del vidrio (sin difuminarse) */
#itinerario-dgn .dgn-top,
#itinerario-dgn .dgn-brand {
z-index: 4;
}
/* miniaturas en 2 columnas (entran los 9 días); índice pasa a la DERECHA */
#itinerario-dgn .dgn-thumbs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.375rem;
}
#itinerario-dgn .dgn-deco {
left: auto;
right: var(--pad);
}
/* marca = día actual, en una sola línea */
#itinerario-dgn .dgn-brand {
white-space: nowrap;
font-size: clamp(1.375rem, 3.6vw, 3rem);
line-height: 1;
}
#itinerario-dgn .dgn-brand span {
display: inline;
}
#itinerario-dgn .dgn-wheel {
position: absolute;
top: 0;
left: 0;
right: 0;
transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1);
will-change: transform;
}
/* cada día: imagen + texto; el detalle aparece abajo cuando está activo */
#itinerario-dgn .dgn-it {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1.125rem;
padding: 0.75rem 0;
opacity: 0.18;
transition: opacity 0.5s ease;
}
#itinerario-dgn .dit-img {
width: 5rem;
height: 3.375rem;
object-fit: cover;
border-radius: 0.1875rem;
filter: grayscale(0.5);
opacity: 0.9;
transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1), height 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s;
}
#itinerario-dgn .dit-text {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
#itinerario-dgn .dgn-it-name {
font-size: 0.8125rem;
font-style: normal;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.5);
}
/* detalle sin animar la altura: el deslizamiento de la rueda lo disimula */
#itinerario-dgn .dgn-it-detail {
grid-column: 1 / -1;
max-height: 0;
transition: opacity 0.5s ease;
}
#itinerario-dgn .dgn-it.is-active {
opacity: 1;
}
#itinerario-dgn .dgn-it.is-active .dit-img {
width: 7.375rem;
height: 5rem;
filter: none;
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
}
#itinerario-dgn .dgn-it.is-active .dgn-it-name {
font-size: 0.875rem;
color: var(--primario, #d9a441);
}
#itinerario-dgn .dgn-it.is-active .dgn-it-detail {
max-height: 15rem;
}
/* ocultar la pista de scroll: el progreso lo indica la barra inferior */
#itinerario-dgn .dgn-hint {
display: none;
}
/* ----- Jerarquía destacada: 1) título "Itinerario" 2) día 3) lugar 4) letras ----- */
/* 1 · Título "Itinerario" — el rótulo de sección, el más destacado arriba */
#itinerario-dgn .dgn-top .eyebrow {
font-size: clamp(1.875rem, 4vw, 3.25rem);
font-weight: 700;
letter-spacing: 0.08em;
color: #fff;
gap: 0;
}
#itinerario-dgn .dgn-top .eyebrow::before {
display: none;
}
/* =====================================================================
FOOTER — imagen de montañas (sin color de fondo propio) + logo NAYRA
superpuesto + difuminado que la funde con el bloque oscuro de abajo
(redes + columnas + copyright).
Ajusta las variables de la parte de arriba a tu paleta de marca.
===================================================================== */
.site-footer {
--footer-bg: #17140f; /* fondo oscuro del bloque inferior */
--footer-bg-soft: #221d16; /* franja de redes sociales */
/* Texto del pie: BLANCO, y el secundario ese mismo blanco al 70 %. Eran un
crema (#f4efe6) y un topo (#b9ae9c); la regla de la casa es que el texto
solo sea blanco o negro, y el resalte, oro. Salen de --superficie, así que
siguen el blanco que se edita en el panel. */
--footer-cream: var(--superficie);
--footer-muted: color-mix(in srgb, var(--superficie) 70%, transparent);
--footer-gold: #c9a04e; /* acento (ajústalo a tu dorado/terracota) */
/* Sin background aquí: el footer en sí no lleva color, solo lo llevan
.footer-hero (blanco, ver más abajo) y .footer-lower con sus hijos. */
overflow: hidden;
}
/* ---------- Hero: imagen de montañas + logo + difuminado ---------- */
.footer-hero {
position: relative;
isolation: isolate;
width: 100%;
min-height: clamp(320px, 42vw, 560px);
margin: 0;
padding: 0; /* sin padding: la imagen va a borde a borde */
/* BLANCO, y escrito aquí en vez de dejarlo transparente.
Antes iba en `none` para que se viera el fondo real de la página, dando
por hecho que era blanco; pero el del sitio es el crema (var(--bg), en el
body), así que la banda de las montañas y el rótulo NAYRA salían sobre
crema. Con el color puesto quedan sobre blanco en todas las páginas, que
es además el cielo del propio PNG.
No rompe el rótulo: aunque lleve z-index -1, .footer-hero abre contexto de
apilamiento con `isolation`, y dentro de un contexto lo negativo se pinta
DESPUÉS del fondo del elemento.
CON LA VARIABLE Y NO CON #fff: es el mismo suelo que las páginas de encima
(--superficie, blanco de día y carbón en modo noche, ver html.dark). Con el
blanco escrito a mano, en noche la banda salía blanca bajo una página
oscura. El cielo del PNG es transparente, así que toma este color. */
background: var(--superficie);
}
.footer-hero-bg {
inset: 0;
width: 100%;
height: 75vh;
object-position: center bottom;
z-index: 0;
display: block;
margin: 0;
padding: 0;
background: none;
}
/* Wordmark NAYRA superpuesto sobre la imagen. */
.footer-hero-logo {
position: absolute;
left: 50%;
bottom: 30%;
transform: translateX(-50%);
width: min(70rem, 100%);
height: auto;
z-index: -1;
opacity: 0.1;
pointer-events: none;
}
/* EN MODO NOCHE, EL RÓTULO EN CLARO. De día es una marca de agua oscura al 10 %
sobre blanco; sobre el carbón de noche esa misma tinta queda más oscura que
el fondo y se lee como una sombra. «brightness(0) invert(1)» lo pasa a silueta
blanca sea cual sea el logotipo que se suba en el panel (Ajustes → pie), y con
la misma opacidad vuelve a ser una marca de agua, ahora clara. */
html.dark .footer-hero-logo { filter: brightness(0) invert(1); }
/* Difuminado: transparente sobre la imagen, funde hacia el color exacto
del bloque de abajo (--footer-bg) justo antes de que este empiece. */
.footer-hero-fade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(23, 20, 15, 0) 0%,
rgba(23, 20, 15, 0) 55%,
rgba(23, 20, 15, 0.6) 78%,
var(--footer-bg) 100%
);
pointer-events: none;
}
/* ---------- Bloque inferior oscuro (redes + columnas + copyright) ---------- */
.footer-lower {
background: var(--footer-bg);
color: var(--footer-cream);
/* Relleno arriba para que el logo y las columnas no arranquen pegados al
borde del bloque oscuro: justo debajo cae el difuminado de la imagen de
montañas y el contenido quedaba metido dentro de esa transición. */
padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad) 0;
}
/* ---------- Redes sociales ---------- */
.footer-social {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 20px 24px;
flex-wrap: wrap;
background: var(--footer-bg-soft);
border-bottom: 1px solid rgba(244, 239, 230, 0.08);
}
.footer-social span {
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--footer-muted);
}
.footer-social-links {
display: flex;
gap: 10px;
}
.footer-social-links a {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(244, 239, 230, 0.2);
color: var(--footer-cream);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.footer-social-links a svg {
width: 18px;
height: 18px;
}
.footer-social-links a:hover {
background: var(--footer-gold);
border-color: var(--footer-gold);
color: var(--footer-bg);
}
/* ---------- Ajustes menores para que foot-grid/foot-bottom hereden el
mismo fondo oscuro dentro de .footer-lower ---------- */
.footer-lower .foot-grid,
.footer-lower .foot-bottom {
background: transparent;
color: var(--footer-cream);
}
/* Esta regla es la que manda sobre `.foot-col a`: gana por especificidad, así
que el blanco de los enlaces del pie hay que ponerlo aquí y no allí. */
.footer-lower .foot-col a {
color: #fff;
}
/* "Día N" — ahora es el texto GRANDE del día (tamaño/diseño del antiguo nombre);
el nombre del lugar queda como kicker pequeño arriba. */
#itinerario-dgn .dgn-it-num {
display: block;
font-size: 1.3125rem;
font-style: normal;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.5);
transition: color 0.45s, font-size 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
#itinerario-dgn .dgn-it.is-active .dgn-it-num {
font-size: clamp(1.875rem, 4.2vw, 3.5rem);
line-height: 1.02;
color: #fff;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
/* el día dentro de la meta también destacado */
#itinerario-dgn .dgn-it-meta {
font-size: 0.6875rem;
color: var(--primario, #d9a441);
}
/* 4 · Las letras — la descripción, legible y con buen contraste */
#itinerario-dgn .dgn-it-detail p {
font-size: clamp(0.875rem, 1.15vw, 1rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
}
/* barra de progreso del itinerario */
/* Barra de progreso — horizontal, en la fila del título "Itinerario".
La línea se estira hasta cerca del título (con un pequeño margen) y las
letras van debajo. */
.dgn-progress {
flex: 1;
margin-left: clamp(1.5rem, 4vw, 4rem);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.dgn-progress-meta {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1rem;
align-items: baseline;
font-family: var(--font-semibold);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.dgn-progress-meta b {
color: #fff;
font-weight: 500;
}
.dgn-progress-track {
position: relative;
width: 100%;
height: 0.3125rem;
background: rgba(255, 255, 255, 0.18);
border-radius: 62.4375rem;
overflow: hidden;
}
.dgn-progress-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: var(--primario);
transition: width 0.12s linear;
}
@media (max-width: 860px) {
#itinerario-dgn .dgn-items {
left: var(--pad);
right: var(--pad);
width: auto;
}
#itinerario-dgn .dgn-it.is-active .dgn-it-num {
font-size: clamp(1.5rem, 7.5vw, 2.5rem);
}
#itinerario-dgn .dit-img {
width: 3.875rem;
height: 2.625rem;
}
#itinerario-dgn .dgn-it.is-active .dit-img {
width: 5.75rem;
height: 3.875rem;
}
.dgn-progress {
margin-left: 1rem;
gap: 0.5rem;
}
.dgn-progress-meta {
font-size: 0.5625rem;
gap: 0.625rem;
}
.dgn-progress-track {
height: 0.25rem;
}
}
/* ============================================
CURSOR-FOLLOWER "scroll" (itinerario animado)
Círculo semitransparente centrado en el cursor, con la palabra "scroll".
============================================ */
.cursor-cta {
position: fixed;
top: 0;
left: 0;
z-index: 300;
pointer-events: none;
will-change: transform;
}
.cursor-cta__ring {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%) scale(0.5);
width: 8rem;
height: 8rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: grayscale(1);
backdrop-filter: grayscale(1);
color: #fff;
font-family: var(--font-semibold);
font-size: 0.8125rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cursor-cta__ring i {
font-style: normal;
}
/* Flecha debajo del texto, sin desplazar el texto (posición absoluta). */
.cursor-cta__arrow {
position: absolute;
left: 50%;
bottom: 1.5rem;
transform: translateX(-50%);
}
.cursor-cta.is-visible .cursor-cta__ring {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* Variante "arrastra": flechas a izquierda y derecha del texto, en fila
(círculo del carrusel de hoteles). */
.cursor-cta--drag .cursor-cta__ring {
gap: 0.375rem;
font-size: 0.625rem;
}
/* Oculta el puntero nativo SOLO mientras la bolita "scroll" lo reemplaza (clase
que activa el JS sobre el área de imagen). Fuera de eso —días clicables o
fuera del banner— se ve el puntero/flechita normal. */
@media (hover: hover) {
#itinerario-dgn.dgn-cursor-none,
#itinerario-dgn.dgn-cursor-none * {
cursor: none;
}
#itinerario-dgn .dgn-it,
#itinerario-dgn .dgn-it * {
cursor: pointer;
}
/* Oculta el puntero sobre las imágenes de los carruseles arrastrables
mientras el círculo "arrastra" lo reemplaza.
Aquí había además el par para .pkgs-car (las tarjetas de "Otros paquetes").
Se quitó con el círculo: era justo la regla que dejaba el puntero invisible,
así que dejarla habría sido peor que el problema —el cursor desaparecía y ya
no venía nada a sustituirlo—. El interruptor está en src/lib/tour.ts, en la
llamada a initDragCursor. */
.hotel-stage.drag-cursor-none .hp-carousel,
.hotel-stage.drag-cursor-none .hp-carousel * {
cursor: none;
}
}
@media (hover: none) {
.cursor-cta {
display: none;
}
}
/* ============================================
GALERÍA POR DÍA — panel deslizante (transición horizontal)
El panel ocupa toda la pantalla y entra desde la derecha; el itinerario
(contenido actual) se desplaza a la izquierda. Dentro va la galería con
zoom controlado por el scroll propio del panel.
============================================ */
.day-gallery {
position: fixed;
inset: 0;
z-index: 200;
background: #0a0a0c;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.8s;
}
.day-gallery.is-open {
transform: translateX(0);
visibility: visible;
transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
/* El itinerario se desliza a la izquierda y se oscurece al abrir la galería. */
#itinerario-dgn .dgn-stage {
transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), filter 0.8s ease;
}
body.dg-open #itinerario-dgn .dgn-stage {
transform: translateX(-30%);
filter: brightness(0.45);
}
/* Scroller interno: aquí vive el zoom (250vh) y manda el scroll del efecto. */
/* Al abrir la galería solo se ve el mosaico y NO se puede scrollear: no hay nada
debajo que leer todavía. El scroll se habilita (.can-scroll, lo pone el JS)
cuando el zoom termina y aparece el detalle de la categoría. */
.dg-scroll {
height: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
/* el suavizado de la rueda lo hace el JS (rAF + interpolación) */
/* Firefox */
scrollbar-width: thin;
scrollbar-color: var(--primario) rgba(255, 255, 255, 0.1);
}
.day-gallery.can-scroll .dg-scroll {
overflow-y: auto;
overflow-x: hidden;
}
/* Barra de scroll a medida (WebKit) — fina, oscura, con pulgar terracota */
.dg-scroll::-webkit-scrollbar {
width: 0.625rem;
}
.dg-scroll::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.06);
}
.dg-scroll::-webkit-scrollbar-thumb {
background: var(--primario);
border-radius: 6.1875rem;
border: 3px solid transparent;
background-clip: padding-box;
}
.dg-scroll::-webkit-scrollbar-thumb:hover {
background: var(--primario);
border-width: 2px;
}
/* Botón "Volver", fijo arriba-izquierda del panel. */
.dg-close {
position: absolute;
top: clamp(1rem, 3vh, 1.75rem);
left: clamp(1rem, 3vw, 2.5rem);
z-index: 5;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.125rem 0.625rem 0.75rem;
border-radius: 62.4375rem;
border: 1.5px solid rgba(255, 255, 255, 0.42);
background: rgba(0, 0, 0, 0.32);
-webkit-backdrop-filter: blur(0.375rem);
backdrop-filter: blur(0.375rem);
color: #fff;
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s, border-color 0.3s, gap 0.3s;
}
.dg-close:hover {
background: var(--primario);
border-color: var(--primario);
gap: 0.8125rem;
}
/* Pista de scroll; se oculta en cuanto empieza el zoom. */
.dg-scrollhint {
position: absolute;
left: 50%;
bottom: clamp(1.125rem, 4vh, 2.5rem);
transform: translateX(-50%);
z-index: 5;
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
pointer-events: none;
transition: opacity 0.4s ease;
}
.day-gallery:has(.zoom-parallax.is-locked) .dg-scrollhint {
opacity: 0;
}
body.dg-lock {
overflow: hidden;
}
@media (max-width: 860px) {
body.dg-open #itinerario-dgn .dgn-stage {
transform: translateX(-18%);
}
}
/* Nombre de la categoría dentro del overlay del zoom */
.dg-cat-kicker {
display: block;
margin-top: 1.125rem;
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--primario, #d9a441);
}
.dg-cat-name {
margin-top: 0.625rem;
color: #fff;
font-family: var(--font-xbold);
font-style: normal;
font-size: clamp(2.75rem, 7vw, 6.5rem);
line-height: 1;
text-align: center;
text-shadow: 0 6px 40px rgba(0, 0, 0, 0.5);
}
/* Detalle de la categoría — debajo de la galería, se revela al terminar el zoom */
.dg-detail {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: clamp(3.75rem, 12vh, 8.75rem) var(--pad);
background: #0d0b09;
color: #fff;
}
.dg-detail-inner {
max-width: 47.5rem;
opacity: 0;
transform: translateY(2.5rem);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.dg-detail.is-revealed .dg-detail-inner {
opacity: 1;
transform: none;
}
.dg-detail-eyebrow {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--primario, #d9a441);
}
.dg-detail-title {
margin-top: 1rem;
font-family: var(--font-xbold);
font-style: normal;
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: 1;
}
.dg-detail-text {
margin-top: 1.5rem;
max-width: 56ch;
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.82);
}
.dg-detail-list {
margin-top: 2.25rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 2.5rem;
list-style: none;
padding: 0;
}
.dg-detail-list li {
position: relative;
padding: 1rem 0 1rem 1.375rem;
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.9);
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.dg-detail-list li::before {
content: "";
position: absolute;
left: 0;
top: 1.375rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--primario);
}
@media (max-width: 720px) {
.dg-detail-list {
grid-template-columns: 1fr;
}
}
/* ============================================
ZOOM PARALLAX
============================================ */
.zoom-parallax {
position: relative;
height: 250vh;
}
/* Dentro de la galería del día el zoom lo dispara el CLIC, no el scroll: el
bloque no necesita 250vh de recorrido y se queda en una pantalla, con el
detalle de la categoría justo debajo. */
.day-gallery .zoom-parallax {
height: 100svh;
}
.zoom-sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.zoom-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
will-change: transform;
/* los wrappers ocupan todo el viewport: dejar pasar el mouse
para que el hover caiga en la imagen correcta */
pointer-events: none;
}
.zoom-img {
position: absolute;
overflow: hidden;
border-radius: 0.1875rem;
pointer-events: auto;
transition: box-shadow 0.35s ease;
}
.zoom-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.3s ease;
}
/* Selección del target del zoom (solo mientras no está bloqueado) */
.zoom-parallax:not(.is-locked) .zoom-img {
cursor: pointer;
}
.zoom-parallax:not(.is-locked) .zoom-img:hover img {
filter: brightness(1.12);
}
.zoom-img.is-target {
box-shadow: 0 0 0 2px var(--primario), 0 0 0 8px rgba(0, 0, 0, 0.12);
}
.zoom-parallax.is-locked .zoom-img.is-target {
box-shadow: none;
}
/* Cebiche · CENTER focal */
.zoom-item--0 .zoom-img {
top: 37.5vh;
left: 37.5vw;
width: 25vw;
height: 25vh;
border-radius: 0;
}
/* img2 · Top-center */
.zoom-item--1 .zoom-img {
top: 5vh;
left: 37.5vw;
width: 35vw;
height: 30vh;
}
/* img1 · Left */
.zoom-item--2 .zoom-img {
top: 17.5vh;
left: 15vw;
width: 20vw;
height: 45vh;
}
/* img4 · Right */
.zoom-item--3 .zoom-img {
top: 37.5vh;
left: 65vw;
width: 25vw;
height: 25vh;
}
/* img3 · Bottom-center */
.zoom-item--4 .zoom-img {
top: 65vh;
left: 45vw;
width: 20vw;
height: 25vh;
}
/* img6 · Bottom-left */
.zoom-item--5 .zoom-img {
top: 65vh;
left: 12.5vw;
width: 30vw;
height: 25vh;
}
/* img7 · Bottom-right */
.zoom-item--6 .zoom-img {
top: 65vh;
left: 67.5vw;
width: 15vw;
height: 15vh;
}
.zoom-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
opacity: 0;
padding: 0 var(--pad);
pointer-events: none;
background: rgba(0, 0, 0, 0.35);
}
/* Título por imagen — se revela al pasar el mouse, igual que el realce
dorado del itinerario (solo mientras la galería se puede explorar) */
.zoom-cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 2.25rem 1rem 0.875rem;
pointer-events: none;
opacity: 0;
transform: translateY(0.625rem);
background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoom-cap-kicker {
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.zoom-cap-name {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: clamp(0.9375rem, 1.3vw, 1.25rem);
font-weight: 600;
letter-spacing: 0.03em;
color: var(--primario, #d9a441);
}
.zoom-cap-name::before {
content: "";
width: 1.25rem;
height: 0.0625rem;
flex: none;
background: var(--primario, #d9a441);
}
.zoom-parallax:not(.is-locked) .zoom-img:hover .zoom-cap {
opacity: 1;
transform: translateY(0);
}
/* ============================================
PARALLAX BLOCKS
============================================ */
.parallax-block {
position: relative;
height: 80vh;
min-height: 37.5rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.parallax-block .px-bg {
position: absolute;
inset: -15% 0 -15% 0;
will-change: transform;
}
.parallax-block .px-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.parallax-block .px-bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
.parallax-block .px-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 50rem;
padding: 0 var(--pad);
}
.parallax-block .px-content h2 {
color: #fff;
font-style: normal;
font-size: clamp(2.5rem, 6vw, 5.5rem);
}
.parallax-block .px-content p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.125rem;
max-width: 52ch;
margin: 1.5rem auto 0;
}
/* ============================================
FILOSOFÍA — GTA VI-style scroll transition
============================================ */
.gta {
position: relative;
height: 420vh;
/* scroll length for the pinned transition */
background: #0a0a0c;
padding: 0;
/* override global section padding (full bleed) */
}
.gta-stage {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
color: #fff;
}
.gta-photo {
position: absolute;
inset: 0;
z-index: 1;
/* "fixed" anchors the photo to the VIEWPORT (not the section), like the
maximusmaximise hero: the background is already in its final position as
the section arrives, and the letters reveal it as windows without it
sliding in with the scroll. */
background: url('https://images.unsplash.com/photo-1531065208531-4036c0dba3ca?w=2400&q=80') center / cover no-repeat fixed;
}
/* Dark cover with a transparent icon-shaped window (hole) onto the banner.
Two mask layers composited with "exclude": a full rectangle MINUS the icon
leaves the cover opaque everywhere except the icon, which becomes a hole. */
.gta-cover {
position: absolute;
inset: 0;
z-index: 3;
background: #f9f5ee;
/* The "window" is now a big uppercase word (FILOSOFÍA), rendered as SVG text.
Used as a mask, the SVG's alpha channel makes the letters opaque; combined
with the full-rect gradient via "exclude", the cover is solid everywhere
except the letters, which become transparent holes onto the fixed photo. */
--gta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 320'%3E%3Ctext x='550' y='160' text-anchor='middle' dominant-baseline='central' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='300' textLength='1045' lengthAdjust='spacingAndGlyphs' fill='%23fff'%3EFILOSOF%C3%8DA%3C/text%3E%3C/svg%3E");
-webkit-mask-image: var(--gta-icon), linear-gradient(#000, #000);
mask-image: var(--gta-icon), linear-gradient(#000, #000);
-webkit-mask-position: center, center;
mask-position: center, center;
-webkit-mask-size: min(99vw, 96.25rem), 100% 100%;
mask-size: min(99vw, 96.25rem), 100% 100%;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
/* The reveal grows the icon hole via mask-size (NOT transform): scaling a
masked element corrupts the mask raster in Chromium, which broke reverse
scroll. Only opacity is transformed here. */
will-change: opacity;
}
/* Second screen: eyebrow + punchline + paragraph, revealed blur → focus */
.gta-final {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-content: center;
text-align: center;
padding: 0 var(--pad);
will-change: transform, filter, opacity;
}
.gta-eyebrow {
justify-content: center;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 1.5rem;
}
.gta-line {
font-family: var(--font-xbold);
font-style: normal;
font-weight: 500;
font-size: clamp(3rem, 8.5vw, 8rem);
line-height: 0.95;
background: linear-gradient(100deg, var(--primario) 0%, var(--primario) 60%, var(--secundario-oscuro) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.gta-line em {
font-style: normal;
}
.gta-para {
margin: 1.875rem auto 0;
max-width: 58ch;
font-size: 1.125rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.86);
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
@media (max-width: 760px) {
.gta-para {
font-size: 0.9375rem;
}
}
/* ============================================
TOURS LIST
============================================ */
.tour-list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--line-soft);
}
.tour-row {
display: grid;
grid-template-columns: 5rem 1.5fr 1fr 1fr 1fr auto;
align-items: center;
gap: 1.5rem;
padding: 2rem 0.5rem;
border-bottom: 1px solid var(--line-soft);
cursor: pointer;
transition: padding 0.3s, background 0.3s;
position: relative;
}
.tour-row:hover {
padding-left: 1.5rem;
background: var(--bg-soft);
}
.tour-row .num {
font-family: var(--font-semibold);
font-size: 0.75rem;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
}
.tour-row .name {
font-family: var(--font-xbold);
font-size: clamp(1.375rem, 2.2vw, 2rem);
font-style: normal;
}
.tour-row .meta-l {
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
display: block;
margin-bottom: 0.375rem;
}
.tour-row .meta-v {
font-size: 0.9375rem;
}
.tour-row .preview {
position: absolute;
right: 5rem;
top: 50%;
transform: translateY(-50%) scale(0.9);
width: 12.5rem;
aspect-ratio: 4/3;
border-radius: var(--radius);
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s, transform 0.3s;
z-index: 2;
}
.tour-row:hover .preview {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.tour-row .preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tour-row .arrow-btn {
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--line);
border-radius: 50%;
display: grid;
place-items: center;
transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.tour-row:hover .arrow-btn {
background: var(--ink);
color: #fff;
border-color: var(--ink);
transform: rotate(-45deg);
}
/* ============================================
EXPERIENCES GRID
============================================ */
/* Aire arriba y abajo del apartado de experiencias ("¿Qué te mueve?" hasta
"¿No ves la tuya?"). Va en una clase propia, no en la etiqueta `section`, para
no afectar a las demás secciones sin clase de la web. */
.exp-section {
padding-top: clamp(3.5rem, 8vh, 7rem);
padding-bottom: clamp(3.5rem, 8vh, 7rem);
}
.exp-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
.exp-card {
position: relative;
overflow: hidden;
border-radius: var(--radius);
cursor: pointer;
}
/* Aquí vivían las reglas del diseño ANTERIOR de estas tarjetas (foto a sangre
con el texto encima: .exp-card .img, .exp-card-cap y un degradado oscuro en
.exp-card::after). El marcado actual es otro —foto arriba (.exp-media) y
texto debajo sobre fondo claro (.exp-body)—, así que de aquel diseño solo
quedaba el velo oscuro, que caía sobre el texto y lo dejaba ilegible.
Se eliminan: el degradado de la foto lo pone ahora .exp-media::after, en el
CSS de la propia página. */
.exp-a {
grid-column: span 7;
aspect-ratio: 16/10;
}
.exp-b {
grid-column: span 5;
aspect-ratio: 4/5;
}
.exp-c {
grid-column: span 4;
aspect-ratio: 4/5;
}
.exp-d {
grid-column: span 4;
aspect-ratio: 4/5;
}
.exp-e {
grid-column: span 4;
aspect-ratio: 4/5;
}
.exp-f {
grid-column: span 6;
aspect-ratio: 16/9;
}
.exp-g {
grid-column: span 6;
aspect-ratio: 16/9;
}
/* ============================================
TESTIMONIALS
============================================ */
.testi {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 5rem;
align-items: center;
}
.testi-media {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: var(--radius);
}
.testi-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testi-quote {
font-family: var(--font-xbold);
font-size: clamp(1.75rem, 3.2vw, 2.875rem);
font-style: normal;
line-height: 1.15;
color: var(--superficie);
margin-bottom: 2rem;
}
.testi-quote::before {
content: "“";
font-size: 1.5em;
color: var(--primario);
margin-right: 0.25rem;
line-height: 0;
}
.testi-author {
display: flex;
align-items: center;
gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.testi-author .avatar {
width: 3rem;
height: 3rem;
border-radius: 50%;
overflow: hidden;
}
.testi-author .name {
font-family: var(--font-xbold);
font-style: normal;
font-size: 1.25rem;
}
.testi-author .from {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: oklch(0.7 0.012 70);
margin-top: 0.125rem;
display: block;
}
.testi-nav {
display: flex;
gap: 0.5rem;
margin-top: 2rem;
}
.testi-dot {
width: 2rem;
height: 0.25rem;
background: rgba(255, 255, 255, 0.2);
border: none;
cursor: pointer;
transition: background 0.3s;
}
.testi-dot.active {
background: var(--primario);
}
/* ============================================
JOURNAL
============================================ */
.journal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* Diario / blog preview cards — bordered card, category badge,
excerpt and an animated "Leer más" arrow. */
.journal-card {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
background: var(--bg);
border-radius: var(--radius);
overflow: hidden;
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.journal-card:hover {
box-shadow: 0 22px 60px -28px rgba(0, 0, 0, 0.30);
transform: translateY(-0.125rem);
}
.journal-card .img-wrap {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.journal-card .img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.journal-card:hover .img-wrap img {
transform: scale(1.05);
}
.journal-card .cat {
position: absolute;
top: 0;
left: 0;
background: var(--bg);
color: var(--tinta);
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.4375rem 0.8125rem;
}
.journal-card .jc-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.375rem 1.375rem 1.5rem;
}
.journal-card h3 {
font-size: clamp(1.25rem, 2vw, 1.625rem);
font-weight: 400;
letter-spacing: -0.01em;
margin-bottom: 0.75rem;
text-wrap: balance;
transition: color 0.25s;
}
.journal-card:hover h3 {
color: var(--primario);
}
.journal-card .jc-excerpt {
font-size: 0.875rem;
line-height: 1.6;
color: var(--secundario-claro);
margin-bottom: 1.5rem;
}
.journal-card .jc-foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.journal-card .jc-more {
display: inline-flex;
align-items: center;
font-size: 0.8125rem;
font-weight: 500;
color: var(--tinta);
}
.jc-arrow {
position: relative;
display: inline-block;
width: 2.5rem;
height: 2.5rem;
margin-right: 0.75rem;
border: 1px solid var(--line);
overflow: hidden;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.journal-card:hover .jc-arrow {
background: var(--ink);
color: var(--superficie);
border-color: var(--ink);
}
.jc-arrow svg {
position: absolute;
top: 50%;
left: 50%;
width: 0.9375rem;
height: 0.9375rem;
}
.jc-arrow .a1 {
transform: translate(-50%, -50%);
transition: transform 0.5s ease, opacity 0.5s ease;
}
.journal-card:hover .jc-arrow .a1 {
transform: translate(110%, -50%);
opacity: 0;
}
.jc-arrow .a2 {
transform: translate(-170%, -50%);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.journal-card:hover .jc-arrow .a2 {
transform: translate(-50%, -50%);
opacity: 1;
}
.journal-card .date {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-semibold);
font-size: 0.6875rem;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
letter-spacing: 0.08em;
white-space: nowrap;
}
.journal-card .date::after {
content: "";
width: 2.5rem;
height: 0.0625rem;
background: var(--line);
}
/* "Ver el diario completo" link */
.journal-all {
display: inline-flex;
align-items: center;
gap: 0.625rem;
margin-top: 1.25rem;
font-family: var(--fuente-botones);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tinta);
border-bottom: 1px solid var(--ink);
padding-bottom: 0.25rem;
transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.journal-all:hover {
gap: 1rem;
color: var(--primario);
border-color: var(--primario);
}
/* ============================================
CTA
============================================ */
.cta-final {
position: relative;
padding: 10rem var(--pad);
text-align: center;
overflow: hidden;
}
.cta-final h2 {
font-size: clamp(3rem, 8vw, 8.75rem);
font-style: normal;
letter-spacing: -0.03em;
}
.cta-final h2 .stroke {
-webkit-text-stroke: 0.0625rem var(--ink);
color: transparent;
font-style: normal;
}
.cta-final p {
max-width: 48ch;
margin: 1.5rem auto 2.5rem;
font-size: 1.125rem;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.875rem;
padding: 1.125rem 2.25rem;
background: var(--ink);
color: var(--superficie);
border-radius: 62.4375rem;
font-size: 0.875rem;
letter-spacing: 0.04em;
transition: background 0.25s, transform 0.25s, color 0.25s;
font-family: var(--fuente-botones);
}
.btn:hover {
background: var(--primario);
transform: translateY(-0.125rem);
}
.btn .arrow {
transition: transform 0.25s;
}
.btn:hover .arrow {
transform: translateX(0.25rem);
}
.btn.ghost {
background: transparent;
color: var(--tinta);
border: 1px solid var(--ink);
}
.btn.ghost:hover {
background: var(--ink);
color: var(--superficie);
}
.btn.light {
background: var(--bg);
color: var(--tinta);
}
.btn.light:hover {
background: var(--primario);
color: var(--superficie);
}
/* ============================================
CTAs DEL INICIO — mismo botón que el nav
Todos los botones del home ("Explora nuestras experiencias", "Ver más
paquetes", "Ver todos los hoteles", "Planear mi viaje") comparten el diseño
de .nav-cta / .nav-menu-toggle: relleno terracota, texto blanco en versalitas
con la mono, esquina de 5 px y el círculo oscuro que barre en el hover.
Requisito de marcado: la etiqueta va dentro de un para que quede por
encima del círculo (igual que en el nav).
Ya no es solo del inicio: .exp-band-inner es la banda que cierra Experiencias,
que repite el recuadro del CTA final y necesita el mismo botón. Se añade a
estas listas en vez de copiarlas dentro de la vista para que el diseño del
botón siga viviendo en un solo sitio.
Y .exp-final .btn, el «Design my journey» que remata /experiencias: se había
quedado fuera de estas listas y por eso caía en el .btn base —píldora de
fondo oscuro que solo se ponía de oro al señalarla—, siendo el único CTA del
sitio que no nacía dorado. El marcado ya cumplía el requisito del , así
que solo le faltaba estar aquí.
Por lo mismo está .pq-cta .btn, el «Conócenos más» de «¿Por qué viajar con
nosotros?»: su sección se rehizo entera y el botón pasó a ser este. Lo único
que se le cambia en la vista es el giro de la flecha (ver PORQUE_CSS en
WhySection.tsx), porque ahí apunta a la derecha desde el reposo.
============================================ */
.pkgs-more,
.community-cta .btn,
.hotels-sel-cta .btn,
.pq-cta .btn,
.home-cta-inner .btn,
.exp-band-inner .btn,
.exp-final .btn,
.foot-cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.875rem 1.5rem;
border-radius: 0.3125rem;
border: 1.5px solid var(--primario);
background: var(--primario);
color: #fff;
font-family: var(--fuente-botones);
font-size: 0.875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
transition: border-color 0.5s, color 0.4s, background 0.4s;
}
.pkgs-more::before,
.community-cta .btn::before,
.hotels-sel-cta .btn::before,
.pq-cta .btn::before,
.home-cta-inner .btn::before,
.exp-band-inner .btn::before,
.exp-final .btn::before,
.foot-cta::before {
content: "";
position: absolute;
width: 100%;
aspect-ratio: 1;
background: #021b1a;
border-radius: 50%;
top: 50%;
left: 0;
transform: translateX(-100%) translateY(-50%);
transition: transform 0.7s ease;
}
.pkgs-more:hover,
.community-cta .btn:hover,
.hotels-sel-cta .btn:hover,
.pq-cta .btn:hover,
.home-cta-inner .btn:hover,
.exp-band-inner .btn:hover,
.exp-final .btn:hover,
.foot-cta:hover {
border-color: #021b1a;
background: var(--primario);
color: #fff;
/* el .btn base levanta el botón; aquí manda el barrido del círculo */
transform: none;
}
.pkgs-more:hover::before,
.community-cta .btn:hover::before,
.hotels-sel-cta .btn:hover::before,
.pq-cta .btn:hover::before,
.home-cta-inner .btn:hover::before,
.exp-band-inner .btn:hover::before,
.exp-final .btn:hover::before,
.foot-cta:hover::before {
transform: translateX(0) translateY(-50%) scale(2);
}
/* Etiqueta y flecha por encima del círculo */
.pkgs-more>span,
.community-cta .btn>span,
.hotels-sel-cta .btn>span,
.pq-cta .btn>span,
.home-cta-inner .btn>span,
.exp-band-inner .btn>span,
.exp-final .btn>span,
.foot-cta>span {
position: relative;
z-index: 1;
}
/* Ícono de flecha circular (igual al de "Diseñar mi viaje" en el nav):
reemplaza la flecha simple en los botones CTA de este mismo diseño. */
.community-cta .btn .arrow-icon,
.hotels-sel-cta .btn .arrow-icon,
.pq-cta .btn .arrow-icon,
.home-cta-inner .btn .arrow-icon,
.exp-band-inner .btn .arrow-icon,
.exp-final .btn .arrow-icon,
.foot-cta .arrow-icon {
width: 1.875rem;
height: 1.875rem;
display: grid;
place-items: center;
border: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
border-radius: 50%;
transform: rotate(45deg);
transition: transform 0.3s ease, background 0.3s, border-color 0.3s;
}
.community-cta .btn:hover .arrow-icon,
.hotels-sel-cta .btn:hover .arrow-icon,
.pq-cta .btn:hover .arrow-icon,
.home-cta-inner .btn:hover .arrow-icon,
.exp-band-inner .btn:hover .arrow-icon,
.exp-final .btn:hover .arrow-icon,
.foot-cta:hover .arrow-icon {
transform: rotate(90deg);
background: #fff;
border-color: transparent;
color: #021b1a;
}
.community-cta .btn .arrow-icon svg,
.hotels-sel-cta .btn .arrow-icon svg,
.pq-cta .btn .arrow-icon svg,
.home-cta-inner .btn .arrow-icon svg,
.exp-band-inner .btn .arrow-icon svg,
.exp-final .btn .arrow-icon svg,
.foot-cta .arrow-icon svg {
width: 0.6875rem;
height: 0.6875rem;
fill: currentColor;
}
.community-cta .btn:hover .arrow-icon svg,
.hotels-sel-cta .btn:hover .arrow-icon svg,
.pq-cta .btn:hover .arrow-icon svg,
.home-cta-inner .btn:hover .arrow-icon svg,
.exp-band-inner .btn:hover .arrow-icon svg,
.exp-final .btn:hover .arrow-icon svg,
.foot-cta:hover .arrow-icon svg {
fill: #021b1a;
}
/* ============================================
BANNER PRINCIPAL + TREN — una sola sección
============================================ */
.train {
position: relative;
/* recorrido del scroll para la animación; menor = termina antes.
Solo cubre el zoom: al terminar, el banner se desliza normal. */
height: 180vh;
/* anula el padding global de section: el tren va a sangre (full screen) */
padding: 0;
background: #021b1a;
}
/* Banner de texto: aparece al hacer zoom hacia la ventana (a pantalla completa) */
.train-hero {
position: absolute;
left: var(--pad);
right: var(--pad);
bottom: clamp(2.5rem, 8vh, 5.625rem);
z-index: 6;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(1.5rem, 4vw, 4rem);
color: #fff;
text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
}
.train-hero-eyebrow {
color: inherit;
opacity: 0.82;
}
.train-hero .train-hero-name {
margin: 0;
color: inherit;
font-size: clamp(2.5rem, 6.4vw, 6.5rem);
}
.train-hero .train-hero-name em {
font-style: normal;
color: #fff;
}
/* Título SEO centrado dentro de la ventana del tren (estado inicial del banner).
Se desvanece al hacer zoom, igual que el selector y el título del destino. */
.train-window-intro {
/* Overlay a pantalla completa sobre la imagen del destino (Machu Picchu):
anclado al viewport, a la izquierda y centrado verticalmente. Visible en el
estado inicial del banner; se desvanece al hacer zoom out hacia el vagón.
El centrado se hace ocupando todo el alto y repartiendo con `justify-content`,
NO con `top: 50%` + `translateY(-50%)`: el JS del banner anima este mismo
elemento y le escribe un `transform` inline, que se llevaría por delante ese
-50% y dejaría el bloque colgando desde la mitad hacia abajo. */
position: absolute;
left: auto;
right: var(--pad);
top: 0;
bottom: 0;
z-index: 6;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: clamp(0.875rem, 1.4vw, 1.5rem);
text-align: right;
color: #fff;
/* Sin panel translúcido: el contraste lo da una sombra más marcada, para que
el texto se lea sobre cualquier zona de la foto. */
text-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.7), 0 0 0.25rem rgba(0, 0, 0, 0.55);
pointer-events: none;
}
/* Contenedor del texto del banner — sin panel translúcido ni desenfoque: el
texto va directo sobre la foto y se lee por la sombra.
`align-items: stretch` (y no `flex-end`): cada bloque ocupa el ancho del panel,
que es lo que permite que la alineación valga para TODOS. Con `flex-end` cada
bloque se encogía a su contenido y se pegaba a la derecha, así que cambiar la
alineación movía el titular pero dejaba el párrafo donde estaba. */
.train-window-intro .twi-panel {
display: flex;
flex-direction: column;
align-items: stretch;
gap: clamp(0.875rem, 1.4vw, 1.5rem);
padding: 0;
background: transparent;
/* Ancho ESTABLE, no del contenido.
Antes el panel se encogía a su contenido y el bloque está anclado por el borde
derecho (`right: var(--pad)` en el contenedor), así que al escribir la caja
crecía hacia la IZQUIERDA y arrastraba todo el texto con ella: el titular se
movía a cada tecla. Con un ancho fijo la caja no se mueve nunca — el texto
avanza hacia la derecha y salta de línea al llegar al borde, como en un cuadro
de texto.
En `vw` y no en `ch` a propósito: `ch` depende de la fuente (y de si ha
cargado), y el titular usa `clamp(..., 5.2vw, ...)`, así que la caja escala con
la misma referencia que la letra. Los 52vw son el ancho que ya tenía el bloque
del diseño, así que el encuadre actual no cambia; el `clamp` pone suelo en
pantallas pequeñas y techo en las muy anchas, donde la tipografía ya no crece. */
width: clamp(18rem, 52vw, 62rem);
max-width: 100%;
}
/* Alineación del bloque entero, elegida en el CMS (Home → Hero → Alineación).
Van los dos mecanismos porque hacen falta los dos:
· `text-align` reparte las líneas dentro de cada bloque.
· los márgenes automáticos colocan el bloque en sí, que es lo que hace falta
cuando tiene ancho máximo (el párrafo): sin ellos se quedaba a la izquierda
aunque su texto estuviera alineado a la derecha. */
.twi-panel[data-align="izquierda"] {
text-align: left;
}
.twi-panel[data-align="izquierda"] > * {
margin-right: auto;
margin-left: 0;
}
.twi-panel[data-align="centro"] {
text-align: center;
}
.twi-panel[data-align="centro"] > * {
margin-right: auto;
margin-left: auto;
}
/* Derecha es el valor por defecto del diseño; también es el de reserva si el
atributo no llega. */
.twi-panel,
.twi-panel[data-align="derecha"] {
text-align: right;
}
.twi-panel[data-align="derecha"] > * {
margin-left: auto;
margin-right: 0;
}
/* El titular del banner. Ya no lleva clase: sale del cuadro de texto del CMS como
un
(o
), así que se le da estilo por etiqueta. Las líneas las decide
quien escribe; el panel crece hasta caber. */
.twi-panel h1,
.twi-panel h2 {
margin: 0;
color: #fff;
font-size: clamp(2.125rem, 5.2vw, 5.25rem);
line-height: 1.06;
letter-spacing: -0.01em;
/* Sombra ligera: el contraste lo pone el panel, no la sombra. */
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
/* Párrafos bajo el titular. El `max-width` en `ch` evita la línea larguísima
cuando el texto crece; los márgenes automáticos de arriba son los que lo
colocan según la alineación elegida. */
.twi-panel p {
position: relative;
margin: 0;
max-width: 54ch;
color: rgba(255, 255, 255, 0.94);
font-family: var(--font-light);
font-size: 1.1875rem;
font-weight: 400;
font-style: normal;
line-height: 1.75;
letter-spacing: 0;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
/* Separación extra entre el titular y el párrafo que le sigue, que es la del
diseño original; entre párrafos basta el `gap` del panel. */
.twi-panel h1 + p,
.twi-panel h2 + p {
padding-top: clamp(0.875rem, 1.6vw, 1.5rem);
}
/* ── Los tres botones de formato del cuadro de texto ──────────────────────────
Negrita, cursiva y subrayado NO significan aquí lo que dice su icono: son los
tres acabados que tiene el titular del diseño. Lo que sigue es lo que los
convierte en eso. El panel lo cuenta igual en la ayuda del campo, y la razón
de reaprovechar los botones en vez de inventar tres estilos personalizados de
Lexical está en src/cms/globals/Home.ts. */
/* Negrita = la palabra destacada, en el oro de marca. Es lo que el diseño hace
con el final del titular («a tu ritmo»); hasta ahora lo pintaba la cursiva.
LAS TRES SON `inherit` POR LA MISMA RAZÓN: destacar aquí es CAMBIAR DE COLOR y
nada más. Lo que se resalta es parte del titular, así que tiene que seguir
siendo el titular en todo lo demás.
· font-weight — el titular ya va en el peso más grueso de la fuente, así que
fijar 600 lo adelgazaba justo en la palabra que más se mira.
· font-family — sin esto gana la regla global `strong, b`, que manda las
negritas del sitio a --font-semibold. Ese token es el CROMO (navegación,
versalitas, etiquetas) y NO es editable; el titular, en cambio, usa el rol
de TÍTULOS, que se elige en Ajustes del sitio. Hoy los dos son el mismo
corte y no se nota, pero el día que alguien cambie los títulos en el panel,
el titular cambiaría y su palabra destacada se quedaría atrás. Que herede
es lo que ata las dos cosas.
Ojo, la regla global se queda como está: para una negrita dentro de un párrafo
—lo que escribe el editor en el CMS— el SemiBold del Manual es lo correcto.
Aquí manda por especificidad, y solo aquí. */
.twi-panel strong {
color: var(--primario);
font-family: inherit;
font-weight: inherit;
}
/* Cursiva = cursiva, sin más. No lleva regla y es a propósito: la del navegador
vale. Queda escrito para que no vuelva a "arreglarse" con un
`font-style: normal`, que es lo que tenía cuando la cursiva hacía de
destacado. */
/* Subrayado = el trazo dibujado a mano del sitio: el mismo garabato de tres
pasadas que subraya «Vive el Perú» o «Viajes de autor».
Por qué en CSS y con el dibujo copiado, en vez de usar el componente Trazo
(src/components/Trazo.tsx): esto sale de un cuadro de texto, así que el
marcado es un pelado, y además el mismo lo pinta la previsualización
en caliente del panel escribiendo `innerHTML` —ahí no hay React que montar—.
Una máscara CSS es lo único que ven igual las dos vías. Si algún día cambia la
curva del trazo, hay que tocarla en LOS DOS SITIOS.
La máscara y no una imagen de fondo para que el color salga de una variable:
dentro de un `url(data:…)` habría que quemarlo. `preserveAspectRatio='none'`
estira el dibujo al ancho de la palabra, que es justo lo que se quiere de un
subrayado.
El oro CLARO de reserva y no el de marca: aquí el fondo es una foto oscurecida
y el oro de marca se apaga sobre ella, el mismo caso que el trazo de la banda
negra. Sigue admitiendo `--trazo-color` por si una sección lo cambia.
Los dos números que se tocan si el trazo queda alto o bajo son el `top` (dónde
empieza, medido desde arriba de la letra) y el `height` (cuánto ocupa). En em,
así acompañan al tamaño del texto sin recalcular nada. */
.twi-panel u {
position: relative;
text-decoration: none;
}
.twi-panel u::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0.84em;
height: 0.28em;
background: var(--trazo-color, var(--primario-claro));
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20116%20500%2037'%20preserveAspectRatio='none'%3E%3Cpath%20d='M9.3,127.3c49.3-3,150.7-7.6,199.7-7.4c121.9,0.4,189.9,0.4,282.3,7.2C380.1,129.6,181.2,130.6,70,139%20c82.6-2.9,254.2-1,335.9,1.3c-56,1.4-137.2-0.3-197.1,9'%20fill='none'%20stroke='%23000'%20stroke-width='6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20116%20500%2037'%20preserveAspectRatio='none'%3E%3Cpath%20d='M9.3,127.3c49.3-3,150.7-7.6,199.7-7.4c121.9,0.4,189.9,0.4,282.3,7.2C380.1,129.6,181.2,130.6,70,139%20c82.6-2.9,254.2-1,335.9,1.3c-56,1.4-137.2-0.3-197.1,9'%20fill='none'%20stroke='%23000'%20stroke-width='6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
pointer-events: none;
}
/* Indicador de scroll: abajo al centro del banner, sobre la imagen del destino.
Se desvanece al hacer zoom out hacia el vagón (controlado por el JS). */
.train-scroll-hint {
position: absolute;
left: 50%;
bottom: clamp(1.375rem, 4vh, 2.625rem);
transform: translateX(-50%);
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
color: #fff;
pointer-events: none;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.train-scroll-hint .tsh-label {
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.28em;
text-transform: uppercase;
opacity: 0.88;
}
/* Galón hacia abajo en lugar del ratón: se entiende igual con el dedo que con
la rueda y no da por hecho que haya un ratón delante. Baja y sube en bucle,
como el "Scroll" de la ficha de tour, pero de mayor tamaño y trazo porque
aquí va suelto sobre la fotografía. */
.train-scroll-hint .tsh-chevron {
width: 2.5rem;
height: 2.5rem;
/* El trazo hereda el blanco del contenedor; la sombra es la del bloque. */
filter: drop-shadow(0 0.125rem 0.625rem rgba(0, 0, 0, 0.5));
animation: tshChevron 1.9s ease-in-out infinite;
}
@keyframes tshChevron {
0%, 100% { transform: translateY(0); opacity: 0.75; }
50% { transform: translateY(0.5625rem); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.train-scroll-hint .tsh-chevron { animation: none; opacity: 0.9; }
}
/* CTA del hero: "Ver paquetes de {destino}" (usa el efecto de .nav-cta, sin vibración) */
.train-hero-cta {
margin-left: 0;
pointer-events: auto;
animation: none;
}
/* Tags apilados en columna, centrados verticalmente en la pantalla (derecha) */
.train-hero-tags {
position: absolute;
right: var(--pad);
top: 50%;
transform: translateY(-50%);
z-index: 6;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: clamp(1.75rem, 4vw, 4.5rem);
text-align: right;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
pointer-events: none;
}
/* Solo letras, sin caja ni fondo */
.train-hero-tag {
font-family: var(--font-semibold);
font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
}
.train-hero p {
margin-top: 1.25rem;
max-width: 48ch;
color: inherit;
opacity: 0.86;
font-size: clamp(0.9375rem, 1.3vw, 1.1875rem);
}
/* Lavado de color: la escena de la ventana se vuelve de un tono oscuro */
.train-wash {
position: absolute;
inset: 0;
z-index: 2;
background: #021b1a;
opacity: 0;
pointer-events: none;
}
/* Lavado final: el fondo se vuelve del color de la web. Va por DEBAJO de las
imágenes (z3) para no cubrir la 2ª imagen; solo afecta al fondo. */
.train-wash-2 {
position: absolute;
inset: 0;
z-index: 3;
background: var(--bg);
opacity: 0;
pointer-events: none;
}
/* Tira central de imágenes verticales que suben de abajo hacia arriba.
Por encima del lavado oscuro (2) pero por debajo del texto, así las
imágenes no se tiñen del color del fondo. */
.train-pass {
position: absolute;
left: 50%;
top: 0;
width: min(96vw, 100rem);
z-index: 4;
display: flex;
flex-direction: column;
gap: 25vh;
pointer-events: none;
will-change: transform;
}
.train-pass-img {
height: 100vh;
margin: 0;
overflow: hidden;
}
.train-pass-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.train-stage {
position: sticky;
top: 0;
height: 100svh;
min-height: 37.5rem;
overflow: hidden;
}
/* La escena (destino) vive detrás del vidrio; dos capas para fundido */
.train-scene {
position: absolute;
inset: 0;
z-index: 0;
}
.train-bg {
position: absolute;
inset: 0;
/* `100% 100%` (estirar), ni `cover` ni `contain`. Las tres opciones son un
compromiso y solo se pueden tener dos de las tres cosas a la vez:
cover -> llena y no deforma, pero RECORTA otra vez: el encuadre
elegido en el CMS no es el que se ve.
contain -> no recorta ni deforma, pero deja MÁRGENES: el banner mide
2.09:1 en un viewport de 1920x911 (la barra del navegador
se come 169 px de los 1080), así que una imagen 16:9 encaja
por alto en 1620 px y sobran 285 px a los lados.
100% 100% -> llena y no recorta, pero DEFORMA en proporción a lo que el
viewport se desvíe de 16:9 (aquí, 17.6% a lo ancho).
Se elige estirar porque el requisito es que la imagen cubra siempre toda la
pantalla y que lo recortado en el CMS sea exactamente lo que se ve. En una
pantalla 16:9 a pantalla completa la deformación es nula, porque el hueco y
el recorte coinciden; crece solo cuando el viewport se aparta de esa
proporción. */
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transition: opacity 0.8s ease;
}
.train-bg.is-active {
opacity: 1;
}
/* La cabina (PNG con la ventana transparente) enmarca la escena */
.train-cabin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
pointer-events: none;
will-change: transform, opacity;
}
/* Estado inicial ANTES de que GSAP monte (evita el "flash" del marco del tren +
textos al recargar): la cabina arranca en zoom (se ve el destino a pantalla
completa) y los textos del estado final quedan ocultos. initTrainZoom() quita
.train-preinit una vez fijado el estado exacto por GSAP. */
.train-preinit .train-cabin { transform: scale(3.6); transform-origin: 48% 47%; }
.train-preinit .train-window-intro,
.train-preinit .train-window-label,
.train-preinit .train-ui,
.train-preinit .train-hero-tags { opacity: 0 !important; }
.train-ui {
position: absolute;
left: 0;
right: 0;
bottom: clamp(1.5rem, 5vh, 3.5rem);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.875rem;
padding: 0 var(--pad);
text-align: center;
color: #fff;
}
.train-eyebrow {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
}
/* Título del destino DENTRO de la ventana, esquina inferior izq. (ubicado por JS) */
.train-window-label {
position: absolute;
right: 18%;
bottom: 30%;
z-index: 5;
max-width: min(40ch, 42%);
color: #fff;
text-align: right;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
pointer-events: none;
}
.twl-kicker {
display: block;
margin-bottom: 0.5rem;
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.train-title {
color: #fff;
font-size: clamp(1.625rem, 3.4vw, 3.25rem);
line-height: 1;
text-align: right;
}
/* Tira inferior de destinos como botones de texto, centrada */
.train-dests {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.375rem, 0.7vw, 0.75rem);
margin-top: 0.375rem;
max-width: 100%;
}
.train-dest {
flex: 0 0 auto;
padding: 0.5rem 1rem;
border: 1.5px solid rgba(255, 255, 255, 0.3);
border-radius: 0.3125rem;
background: rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.train-dest-name {
font-family: var(--font-xbold);
font-weight: 800;
font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
letter-spacing: 0.08em;
line-height: 1.15;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}
.train-dest:hover {
border-color: rgba(255, 255, 255, 0.7);
background: rgba(0, 0, 0, 0.4);
}
.train-dest.is-active {
border-color: var(--primario);
background: var(--primario);
}
@media (max-width: 600px) {
.train-dests {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ============================================
PAQUETES TURÍSTICOS — estilo "Latest Campaigns"
(maximusmaximise.com) · grandes y llamativos
============================================ */
.pkgs {
/* el espacio lateral es exactamente el doble del gap entre tarjetas */
--pkg-gap: clamp(0.75rem, 1.2vw, 1.125rem);
/* título pequeño alineado a la izquierda, con aire arriba (como la sección de hoteles) */
padding: clamp(3rem, 7vh, 6rem) calc(var(--pkg-gap) * 2) clamp(4.5rem, 9vw, 9.375rem);
position: relative;
}
/* Solo en el Home: arranca oscuro (igual que el banner del tren) y vira a
crema en la transición. En otras páginas (p. ej. "Otros itinerarios")
conserva el color de la web. */
/* Fondo topográfico (curvas de nivel, SVG vectorial, solo líneas) de la sección
Paquetes, sobre el fondo claro de la web. Es tileable, por eso se repite en
vez de estirarse (la sección es muy alta). */
#pkgs {
background: var(--bg);
}
/* La capa .pkgs-wash ya no aporta color (el JS la vuelve visible): transparente
para dejar ver el fondo topográfico del #pkgs. */
#pkgs .pkgs-wash {
background: transparent;
}
/* Capa de fondo crema: empieza invisible y entra junto a la transición */
.pkgs-wash {
position: absolute;
inset: 0;
z-index: 0;
background: var(--bg);
opacity: 0;
pointer-events: none;
}
/* dentro de paquetes el contenedor ocupa todo el ancho disponible */
.pkgs .container {
position: relative;
z-index: 1;
max-width: none;
}
.pkgs-hd {
margin-bottom: clamp(2rem, 4vw, 3.75rem);
}
.pkgs-title {
font-family: var(--font-xbold);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 0.94;
font-size: clamp(2.5rem, 7vw, 6.5rem);
color: var(--tinta);
}
.pkgs-title em {
font-style: normal;
color: var(--primario);
}
/* En el Home: el título de paquetes arranca invisible y aparece en negro
(color --secundario) cuando la 2ª imagen sale por el menú (controlado por JS). */
/* Título "Paquetes" hueco: relleno transparente + contorno negro, así el fondo
topográfico (el path) se ve DENTRO de las letras. Más grande, grueso y ancho,
con más aire arriba y abajo. */
#pkgs .pkgs-title {
color: var(--tinta);
-webkit-text-fill-color: var(--ink);
}
/* La palabra resaltada del titular («Perú»), en el color de marca, igual que en
el resto de cabeceras de la página. La marca el helper `resaltar` envolviéndola
en , de ahí que haya que devolverle la redonda: aquí el es un color,
no una cursiva.
Hace falta repetir -webkit-text-fill-color porque se hereda: el título lo pone
en tinta para el contorno hueco, y sin esta línea el relleno heredado ganaría
al `color` y la palabra seguiría saliendo negra. */
#pkgs .pkgs-title em {
font-style: normal;
color: var(--primario);
-webkit-text-fill-color: var(--primario);
}
/* "Peru" del título "Peru Signature journeys" en oro oliva (#B39F42). */
#pkgs .pkgs-title .pkgs-title-accent {
color: var(--primario-alt);
-webkit-text-fill-color: var(--primario-alt);
}
#pkgs .pkgs-title {
opacity: 0;
}
/* Grid de 3 — imágenes completas (full-bleed) como maximusmaximise */
.pkgs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--pkg-gap);
}
.pkg {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 7 / 8;
overflow: hidden;
border-radius: var(--radius);
background: var(--bg-deep);
color: #fff;
isolation: isolate;
}
/* La imagen ocupa toda la tarjeta */
.pkg-media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.pkg-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
/* Degradado permanente para que el texto blanco se lea encima */
.pkg-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 32%, rgba(0, 0, 0, 0) 62%);
transition: opacity 0.5s;
}
.pkg:hover .pkg-media img {
transform: scale(1.06);
}
/* Texto sobre la imagen */
.pkg-info {
position: relative;
z-index: 2;
padding: 0 clamp(1rem, 1.4vw, 1.375rem) clamp(0.75rem, 1vw, 1rem);
}
.pkg-name {
font-family: var(--font-xbold);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.015em;
line-height: 0.95;
font-size: clamp(1.375rem, 2vw, 1.875rem);
color: #fff;
}
.pkg-loc {
margin-top: 0.375rem;
font-family: var(--font-xbold);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.005em;
font-size: clamp(0.75rem, 0.95vw, 0.9375rem);
line-height: 1.1;
color: #fff;
}
/* Barra "Ver" a TODO el ancho de la tarjeta; se engrosa en hover */
.pkg-view {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 0.5625rem;
width: 100%;
padding: clamp(0.6875rem, 1vw, 0.9375rem) clamp(0.875rem, 1.2vw, 1.25rem);
font-family: var(--font-light);
font-weight: 1000;
text-transform: uppercase;
letter-spacing: -0.01em;
font-size: clamp(0.9375rem, 1.15vw, 1.1875rem);
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.28);
}
/* Subrayado inferior a todo el ancho — mismo efecto que "Ver todos los
paquetes", solo abajo y el doble de grueso (6px vs 3px) */
.pkg-view::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0.75rem;
background: var(--primario);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.pkg:hover .pkg-view::after {
transform: scaleX(1);
}
/* Solo las LETRAS de "Ver": el color recorre los glifos de izquierda a
derecha (efecto de "recorrido"), sin caja ni fondo — recortado al texto */
.pkg-view>span {
background-image: linear-gradient(to right, var(--primario) 50%, #fff 50%);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transition: background-position 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.pkg:hover .pkg-view>span {
background-position: 0 0;
}
.pkg-view svg {
width: 0.72em;
height: 0.86em;
fill: var(--primario);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pkg:hover .pkg-view svg {
transform: translateX(0.3125rem);
}
/* Botón inferior — "View all Campaigns" */
/* ============================================
PAQUETES (Home) — título en fila + mosaico de 4
columnas (bento) con scroll horizontal y cortina
de 2ª imagen al hover
============================================ */
/* Medidas compartidas del mosaico: ancho de unidad de columna, idéntico al
ancho de tarjeta que tenía la grilla original de 3 full-bleed. */
#pkgs {
/* Margen lateral del apartado. Antes era casi full-bleed (12–24 px); ahora
usa --pad, el mismo aire que el resto de la web, así el mosaico respira y
queda alineado con las demás secciones. Lo comparten el título, el mosaico
y la fila extra, para que los tres arranquen en la misma vertical. */
--pkg-bp: var(--pad);
--pkg-w: calc((100vw - 2 * var(--pkg-bp) - 2 * var(--pkg-gap)) / 3);
padding-left: var(--pkg-bp);
padding-right: var(--pkg-bp);
}
/* Los mosaicos ya no se salen a 100vw: el margen lo pone la sección (arriba) y
así el título y las tarjetas arrancan en la misma vertical. De paso se evita
el descuadre de `.bleed`, que mide 100vw —barra de scroll incluida— y dejaba
la rejilla unos píxeles corrida respecto al resto. */
#pkgs .bleed {
width: auto;
position: static;
left: auto;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
/* "Paquetes" en fila, horizontal, pegado al techo de la sección (sin
margen superior) */
#pkgs .pkgs-title {
writing-mode: horizontal-tb;
font-family: var(--font-xbold);
font-weight: 800;
font-style: normal;
/* En la escala de titulares del sitio, como cualquier otro h2: este dejó de
ser el titular hueco con contorno sobre el mapa topográfico —hoy es una
cabecera de sección normal, en tinta y en fila— y no había razón para que
midiera un tercio menos que «Hoteles cuidadosamente seleccionados» o
«¿Por qué viajar con nosotros?». Antes: clamp(1.21875rem, 2.7vw, 2.15625rem). */
font-size: var(--titulo-seccion);
letter-spacing: 0.01em;
line-height: 1.05;
text-align: left;
white-space: nowrap;
transform: none;
}
/* Mosaico bento: 3 tarjetas por fila, una grande + dos pequeñas (alternando
el lado de la grande). Se usa una rejilla fina de 50 pistas iguales: la
tarjeta grande abarca 24 y cada pequeña 13 (24 + 13 + 13 = 50).
Todo cabe en el ancho de la pantalla (sin scroll ni arrastre).
El 50 no es un número redondo por gusto, es el que hace falta. La proporción
buscada era «la grande, 3 U más estrecha que la mitad de la fila» (ver
--pkg-u), y durante un tiempo se consiguió recortándola con un margen: la
caja encogía pero las pequeñas se quedaban quietas, así que el hueco junto a
la grande salía 3 U más ancho que los demás. Con las pistas a 12 no había
reparto posible —una pista medía ~123px y el recorte son ~35px—, pero a 50 sí
cae casi exacto: 24/13/13 reproduce aquellas anchuras con menos de 0.2px de
diferencia y, al ser pistas de verdad, TODOS los huecos vuelven a medir un
`--pkg-gap` por construcción, sin márgenes que compensar.
Antes de eso fueron 11 pistas con la grande a 5, y luego 12 con la grande a
6. */
#pkgs .pkgs-grid {
display: grid;
grid-template-columns: repeat(50, minmax(0, 1fr));
gap: var(--pkg-gap);
}
/* Todas las tarjetas con la MISMA altura, y es la altura la que manda: el
`aspect-ratio: auto` de abajo anula a propósito el 7/8 de la regla base, así
que cambiar aquella proporción NO alarga estas tarjetas — hay que tocar este
alto. */
#pkgs .pkg {
grid-column: span 13;
/* tarjetas de 1 campo (las pequeñas) */
height: calc(70vh + 2 * var(--pkg-u));
aspect-ratio: auto;
border-radius: 0.3125rem;
}
/* Tarjeta grande de cada fila: fila 1 (1ª), fila 2 (última), fila 3 (1ª).
Van juntas a propósito: el bento alterna el lado de la grande y las tres
filas comparten la misma retícula, así que ensanchar solo la primera
descuadraría las otras dos. */
#pkgs .pkg:nth-child(1),
#pkgs .pkg:nth-child(6),
#pkgs .pkg:nth-child(7) {
grid-column: span 24;
}
/* Sin zoom de la imagen al pasar el cursor (solo en el Home) */
#pkgs .pkg:hover .pkg-media img {
transform: none;
}
/* Fila extra (se despliega con "Ver más paquetes"): 4 tarjetas en una sola
fila, con el mismo diseño y alto que el mosaico de arriba. Anula el bento
(span 3 / span 5) para que cada tarjeta ocupe una columna. */
#pkgs .pkgs-grid-extra {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--pkg-gap);
margin-top: var(--pkg-gap);
}
/* Mismo alto que el mosaico de arriba: si se cambia uno, hay que cambiar el
otro o la fila desplegada rompe la altura de la sección. */
#pkgs .pkgs-grid-extra .pkg {
grid-column: auto;
height: calc(70vh + 2 * var(--pkg-u));
aspect-ratio: auto;
border-radius: 0.3125rem;
}
@media (max-width: 1000px) {
#pkgs .pkgs-grid-extra {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
#pkgs .pkgs-grid-extra {
grid-template-columns: 1fr;
}
}
/* Paquetes del destino (DestinoDetalle §1): 3 por fila, alto 62.5vh y radio 5px,
sin el bento grande+pequeña.
Ojo: nacieron con el MISMO alto que las del Home, pero el mosaico del inicio
se alargó a 78vh y estas se quedaron aquí a propósito — no se tocaron porque
el encargo era solo el inicio. Si se quiere volver a igualarlas, es este
número y el de #pkgs .pkg. */
.dst-pkgs {
/* mismo gap y padding lateral que el mosaico del Home (.pkgs / #pkgs) */
--pkg-gap: clamp(0.75rem, 1.2vw, 1.125rem);
--pkg-bp: clamp(0.75rem, 1.5vw, 1.5rem);
grid-template-columns: repeat(3, minmax(0, 1fr));
/* se sale del .container (máx 1480px) para ocupar el mismo ancho completo
que las tarjetas del Home — body ya tiene overflow-x:hidden */
width: 100vw;
margin-left: calc(50% - 50vw);
padding-left: var(--pkg-bp);
padding-right: var(--pkg-bp);
}
.dst-pkgs .pkg {
height: 62.5vh;
aspect-ratio: auto;
border-radius: 0.3125rem;
}
.dst-pkgs .pkg:hover .pkg-media img {
transform: none;
}
@media (max-width: 1000px) {
.dst-pkgs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.dst-pkgs {
grid-template-columns: 1fr;
}
.dst-pkgs .pkg {
height: 56vh;
aspect-ratio: auto;
}
}
/* Info de la tarjeta (abajo-izquierda): nombre arriba y, debajo, una fila
con dos celdas — días (nº + "DÍAS") y lugares incluidos separados por comas.
Ambas celdas llevan borde superior y un borde que las separa (derecho de la
1ª, izquierdo de la 2ª). */
#pkgs .pkg-meta,
.dest-pkgs-grid .pkg-meta,
.dst-pkgs .pkg-meta,
.pkgs-car .pkg-meta {
display: flex;
align-items: stretch;
gap: 0;
/* los bordes central (derecho del 2º / izquierdo del 3º) se tocan */
margin-top: clamp(0.625rem, 0.9vw, 0.875rem);
}
#pkgs .pkg-days,
.dest-pkgs-grid .pkg-days,
#pkgs .pkg-places,
.dest-pkgs-grid .pkg-places,
.dst-pkgs .pkg-days,
.dst-pkgs .pkg-places,
.pkgs-car .pkg-days,
.pkgs-car .pkg-places {
border-top: 1px solid rgba(255, 255, 255, 0.45);
padding-top: clamp(0.4375rem, 0.7vw, 0.625rem);
}
#pkgs .pkg-days,
.dest-pkgs-grid .pkg-days,
.dst-pkgs .pkg-days,
.pkgs-car .pkg-days {
flex: none;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, 0.45);
padding-right: clamp(0.75rem, 1vw, 1.125rem);
}
#pkgs .pkg-days-n,
.dest-pkgs-grid .pkg-days-n,
.dst-pkgs .pkg-days-n,
.pkgs-car .pkg-days-n {
font-family: var(--font-xbold);
font-weight: 900;
line-height: 1;
font-size: clamp(1.375rem, 1.8vw, 1.875rem);
color: #fff;
}
#pkgs .pkg-days-l,
.dest-pkgs-grid .pkg-days-l,
.dst-pkgs .pkg-days-l,
.pkgs-car .pkg-days-l {
margin-top: 0.1875rem;
font-family: var(--font-xbold);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: clamp(0.625rem, 0.75vw, 0.75rem);
color: #fff;
}
#pkgs .pkg-places,
.dest-pkgs-grid .pkg-places,
.dst-pkgs .pkg-places,
.pkgs-car .pkg-places {
border-left: 1px solid rgba(255, 255, 255, 0.45);
padding-left: clamp(0.75rem, 1vw, 1.125rem);
display: flex;
align-items: center;
font-family: var(--font-xbold);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.01em;
line-height: 1.25;
font-size: clamp(0.6875rem, 0.9vw, 0.875rem);
color: #fff;
}
/* Cortina: la 2ª imagen sube desde abajo al entrar el cursor y baja al salir;
en ambos sentidos arranca rápido y frena al final (expo-out). */
.pkg-alt {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
clip-path: inset(100% 0 0 0);
transition: clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.pkg:hover .pkg-alt,
.pkg:focus-visible .pkg-alt {
clip-path: inset(0 0 0 0);
}
.pkg-alt img {
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
-webkit-user-drag: none;
}
/* Velo superior para que las etiquetas se lean sobre la foto */
.pkg-alt::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.12) 26%, rgba(0, 0, 0, 0) 48%);
}
/* Etiquetas (lugar, clima, altitud…) arriba de la 2ª imagen */
.pkg-tags {
position: absolute;
z-index: 1;
top: clamp(0.75rem, 1.2vw, 1.125rem);
left: clamp(0.75rem, 1.2vw, 1.125rem);
right: clamp(0.75rem, 1.2vw, 1.125rem);
display: flex;
flex-wrap: wrap;
gap: 0.4375rem;
opacity: 0;
transform: translateY(-0.5rem);
transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pkg:hover .pkg-tags,
.pkg:focus-visible .pkg-tags {
opacity: 1;
transform: none;
transition-delay: 0.16s;
}
.pkg-tag {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.4375rem 0.8125rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 62.4375rem;
background: rgba(20, 16, 12, 0.35);
-webkit-backdrop-filter: blur(0.5rem);
backdrop-filter: blur(0.5rem);
color: #fff;
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
/* El primer tag es el destino activo: pin + relleno sólido para destacarlo */
.pkg-tag-dest {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.92);
color: var(--secundario);
}
.pkg-tag-dest svg {
width: 0.75rem;
height: 0.75rem;
flex: none;
}
/* ============================================================
Variante Home (.pkg--pins): los LUGARES van como pines arriba
(siempre visibles, icono de mapa); el TÍTULO baja a la fila de
días (donde iban los lugares). Hover = solo cambio de imagen:
la 2ª imagen (.pkg-alt) queda debajo de los textos, que se ven
igual con y sin hover.
============================================================ */
/* La 2ª imagen (cortina) va por DEBAJO de los textos; solo cambia la foto. */
.pkg--pins .pkg-alt { z-index: 1; }
.pkg--pins .pkg-info { z-index: 4; width: 75%; }
/* Mismo degradado arriba (para los pines) y abajo (días+título) en AMBAS fotos,
así el texto se lee igual con y sin hover. */
.pkg--pins .pkg-media::after,
.pkg--pins .pkg-alt::after {
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.14) 20%,
rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0) 54%,
rgba(0, 0, 0, 0.78) 100%);
}
/* Pines de lugares — arriba-izquierda, siempre visibles */
.pkg-pins {
position: absolute;
z-index: 4;
top: clamp(0.75rem, 1.2vw, 1.125rem);
left: clamp(0.75rem, 1.2vw, 1.125rem);
right: clamp(0.75rem, 1.2vw, 1.125rem);
display: flex;
flex-wrap: wrap;
gap: 0.4375rem;
}
/* Mismo diseño que los lugares del banner (.hero-lugar-tag): sin fondo ni
caja, texto blanco y pin relleno. Solo el primer lugar lleva icono; los
demás van en la misma línea separados por comas. */
.pkg-pin {
display: inline-flex;
align-items: flex-start;
gap: 0.375rem;
padding: 0;
background: none;
border: none;
box-shadow: none;
color: #fff;
font-family: var(--font-xbold);
font-weight: 800;
font-size: clamp(0.75rem, 0.95vw, 0.9375rem);
letter-spacing: 0.01em;
line-height: 1.3;
white-space: normal;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.pkg-pin svg {
width: 1rem;
height: 1rem;
flex: none;
margin-top: 0.0625rem;
}
/* Pie de la tarjeta (pinsTop): el NOMBRE arriba, un único borde superior debajo
y, bajo el borde, una fila con el nº de días (izquierda) y los lugares
(derecha). Sin separadores verticales. Se prefija con #pkgs para ganar en
especificidad a las reglas base.
El .pkgs-car de cada grupo es el carril «Otros paquetes» de la ficha de tour,
que usa esta misma variante. No basta con que la tarjeta lleve .pkg--pins:
estas cuatro reglas son las que quitan los separadores verticales y bajan el
nombre, y sin nombrar al carril aquí se quedaba con el pie de la variante de
al lado —el de los bordes en cruz—, que es de donde venía la diferencia. */
#pkgs .pkg--pins .pkg-name,
.pkgs-car .pkg--pins .pkg-name,
.dest-pkgs-grid .pkg-name {
margin: 0 0 clamp(0.25rem, 0.45vw, 0.375rem);
border: none;
padding: 0;
display: block;
font-size: clamp(1rem, 1.35vw, 1.5rem);
line-height: 1.05;
letter-spacing: -0.01em;
}
/* Único borde superior por encima de la fila (día + lugares). */
#pkgs .pkg--pins .pkg-meta,
.pkgs-car .pkg--pins .pkg-meta,
.dest-pkgs-grid .pkg-meta {
margin-top: 0;
border-top: 1px solid rgba(255, 255, 255, 0.45);
padding-top: clamp(0.25rem, 0.4vw, 0.375rem);
}
/* Día a la izquierda, sin borde superior ni separador vertical. */
#pkgs .pkg--pins .pkg-days,
.pkgs-car .pkg--pins .pkg-days,
.dest-pkgs-grid .pkg-days {
border-top: none;
border-right: none;
padding-top: 0;
padding-right: 0;
align-items: flex-start;
text-align: left;
}
/* Lugares empujados a la derecha, sin borde superior ni separador vertical. */
#pkgs .pkg--pins .pkg-places,
.pkgs-car .pkg--pins .pkg-places,
.dest-pkgs-grid .pkg-places {
border-top: none;
border-left: none;
padding-top: 0;
padding-left: clamp(0.625rem, 1vw, 0.9375rem);
text-align: left;
justify-content: flex-start;
line-height: 1.5;
}
/* ============================================
PAQUETES · variante CARRIL ARRASTRABLE (.pkgs-car)
Copia fiel del carril del index: título vertical en el hueco
izquierdo + fila full-bleed que se arrastra + barra de progreso.
Se usa en "Otros itinerarios" de /tour-detalle sin tocar el #pkgs
del Home (mismas clases, distinto scope).
============================================ */
.pkgs-car {
/* full-bleed: sin padding lateral para que el cálculo de 100vw cuadre.
Sin relleno ABAJO por encargo: el carril cierra pegado a lo que venga
después. El aire que había (hasta 8.125rem) se quitó a propósito; el de
arriba no se toca. Ojo: lo último de la sección es la barra de progreso
(.pkgs-scroll), así que es ella la que queda a ras. */
padding: clamp(2.5rem, 6vw, 5.625rem) 0 0;
--pkg-bp: clamp(0.75rem, 1.5vw, 1.5rem);
/* CUATRO tarjetas por pantalla, no tres: es lo que las pone del ancho de las
pequeñas del mosaico del inicio (las que van a `grid-column: span 13`).
Medido a 1905 px de ancho: con /3 salían 607 px y las del inicio miden 476;
con /4 salen 451. A 1440 px la comparación es 336 contra 350. */
--pkg-w: calc((100vw - 2 * var(--pkg-bp) - 3 * var(--pkg-gap)) / 4);
/* El 3.4 va PEGADO al divisor de arriba y hay que moverlo con él. Esta resta
es la que reserva el hueco del rótulo vertical: dice «lo que sobra tras
dejar sitio a 3.4 tarjetas». Con el /3 el número era 2.5; manteniéndolo,
al estrechar la tarjeta el hueco del rótulo se habría ido de 352 px a 744 y
el carril arrancaría en mitad de la pantalla. Con 3.4 se queda en 336. */
--pkgs-side-w: calc(100vw - 3.4 * var(--pkg-w) - 2 * var(--pkg-gap));
}
.pkgs-car .pkgs-stage {
position: relative;
}
/* Rótulo vertical en el hueco izquierdo; se traslada con el scroll vía JS */
.pkgs-car .pkgs-side {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: -50vw;
width: var(--pkgs-side-w);
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
will-change: transform;
}
/* El rótulo vertical va en versales. Se hace con text-transform y no cambiando
el texto en el marcado para que el título siga escribiéndose en normal donde
se declara (PkgsCarril lo recibe por prop). Va acotado a .pkgs-car: el otro
.pkgs-title, el del mosaico del inicio, sale del panel y ahí manda el editor. */
.pkgs-car .pkgs-title {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-xbold);
font-weight: 800;
font-size: clamp(2.125rem, 4vw, 4rem);
text-transform: uppercase;
/* El interletrado negativo viene del texto en caja baja; en versales aprieta
de más, así que aquí se suelta a 0. */
letter-spacing: 0;
line-height: 1;
max-height: 100%;
color: var(--tinta);
opacity: 1;
}
/* Carril arrastrable a todo el ancho */
.pkgs-car .pkgs-grid {
display: flex;
grid-template-columns: none;
gap: var(--pkg-gap);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
z-index: 1;
padding-left: var(--pkgs-side-w);
}
.pkgs-car .pkgs-grid::-webkit-scrollbar {
display: none;
}
.pkgs-car .pkgs-grid.is-drag {
cursor: grabbing;
}
.pkgs-car .pkg {
flex: none;
width: var(--pkg-w);
/* Mismo alto que las tarjetas del mosaico del inicio (#pkgs .pkg), y por el
mismo motivo: manda la ALTURA, no la proporción. El `aspect-ratio: auto`
anula a propósito el 7/8 de la regla base — con él puesto, estrechar la
tarjeta la habría dejado también más baja (451 x 515 en vez de 451 x 638) y
el resultado sería una tarjeta más pequeña, no más delgada, que es justo lo
contrario de lo que se pedía.
Se escribe 70vh y no el `calc(70vh + 2 * var(--pkg-u))` del inicio porque
esa «U» es una variable declarada dentro de #pkgs y aquí no llega; son
1.28rem de diferencia, un ajuste de aquel bloque que aquí no aplica. */
height: 70vh;
aspect-ratio: auto;
/* La esquina redondeada, la misma que las tarjetas del inicio. La regla base
va a var(--radius) (0.125rem) y aquí queda demasiado dura.
Ojo con el valor: 0.3125rem es el «5 px» de la casa —así se llama en los
comentarios de todo el archivo— pero la raíz de este sitio está a 18px, no
a 16, así que en pantalla son 5.625. Se deja en rem, y no en 5px clavados,
para que sea EXACTAMENTE la de las tarjetas del inicio, que es con lo que
se pidió igualarlas. */
border-radius: 0.3125rem;
}
.pkgs-car .pkg:hover .pkg-media img {
transform: none;
}
/* Tarjeta final: enlace a todos los paquetes */
.pkg-cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1.125rem, 2vw, 1.75rem);
background: var(--bg-deep);
text-align: center;
transition: background 0.45s ease;
}
.pkg-cta .pkg-cta-text {
font-family: var(--fuente-botones);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1.05;
font-size: clamp(1.25rem, 1.9vw, 1.875rem);
color: #fff;
}
.pkg-cta-circle {
display: grid;
place-items: center;
width: 3.375rem;
height: 3.375rem;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
color: #fff;
transition: background 0.35s, border-color 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pkg-cta-circle svg {
width: 1.25rem;
height: 1.25rem;
}
.pkg-cta:hover {
background: var(--secundario-oscuro);
}
.pkg-cta:hover .pkg-cta-circle {
background: #fff;
border-color: #fff;
color: var(--secundario);
transform: translateX(0.375rem);
}
/* Barra de progreso/controlador bajo las tarjetas */
.pkgs-scroll {
display: flex;
align-items: center;
justify-content: center;
margin-top: clamp(0.875rem, 1.8vw, 1.5rem);
}
.pkgs-scrollbar {
position: relative;
width: calc(var(--pkg-w) / 2);
height: 1.375rem;
cursor: pointer;
touch-action: none;
}
.pkgs-scrollbar::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 0.1875rem;
transform: translateY(-50%);
border-radius: 62.4375rem;
background: var(--line-soft);
}
.pkgs-thumb {
position: absolute;
left: 0;
top: 50%;
width: 40%;
height: 0.3125rem;
transform: translateY(-50%);
border-radius: 62.4375rem;
background: var(--ink);
cursor: grab;
transition: height 0.2s, background 0.2s;
}
.pkgs-scrollbar:hover .pkgs-thumb,
.pkgs-thumb.is-drag {
height: 0.5rem;
background: var(--primario);
}
.pkgs-thumb.is-drag {
cursor: grabbing;
}
@media (max-width: 860px) {
/* En móvil el carril usa media tarjeta más ancha para que se lea */
.pkgs-car {
--pkg-w: 78vw;
}
/* Y más baja, igual que hace el mosaico del inicio en este mismo ancho. Hace
falta desde que la tarjeta manda por altura y no por proporción: con el
70vh de escritorio y los 78vw de aquí, en un teléfono salía una tarjeta de
304 x 591 — antes eran 304 x 347, que es lo que este 46vh recupera. */
.pkgs-car .pkg {
height: 46vh;
}
}
@media (max-width: 860px) {
/* En pantallas estrechas el mosaico se simplifica a 2 columnas iguales
(sin tarjetas grandes) para que todo siga cabiendo sin scroll. */
#pkgs .pkgs-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#pkgs .pkg,
#pkgs .pkg:nth-child(1),
#pkgs .pkg:nth-child(6),
#pkgs .pkg:nth-child(7) {
grid-column: auto;
height: 46vh;
}
}
@media (max-width: 520px) {
#pkgs .pkgs-grid {
grid-template-columns: 1fr;
}
}
/* El aire de ARRIBA del botón «Ver más paquetes». Sale de la misma variable que
el relleno inferior de #pkgs, para que los dos huecos sean iguales por
construcción y no por haber puesto el mismo número en dos sitios.
El valor de reserva es por si algún día .pkgs-foot se usa fuera de #pkgs, que
es quien define la variable. */
.pkgs-foot {
margin-top: var(--pkgs-foot-aire, clamp(2.5rem, 5vw, 5rem));
display: flex;
justify-content: center;
}
/* Ajustes del mosaico SOLO en el inicio (#pkgs). La clase .pkgs se reutiliza en
otras páginas —«Otros itinerarios»—, donde estos valores no convienen.
· padding-bottom 0: el hueco bajo «Ver más paquetes» no lo ponía el botón sino
el relleno inferior de .pkgs, que llegaba a 9.375rem. La separación con la
sección siguiente la pone ahora el relleno superior de esa.
· Los laterales dejan de ser el doble del hueco entre tarjetas y pasan a un
margen propio y mayor, para que el mosaico respire por los costados. */
#pkgs {
/* Mismo hueco encima y debajo del botón: arriba lo aplica .pkgs-foot como
margen, abajo este relleno. */
--pkgs-foot-aire: clamp(1.5rem, 3vw, 2.75rem);
/* El borde del mosaico cae justo donde termina la «Ú» de «MENÚ», el chip de
la barra superior. No es un número redondo elegido a ojo: es la suma de lo
que separa esa letra del borde de la pantalla —el relleno lateral del nav
(--pad), el relleno del propio chip (1.5rem), su borde (1.5px) y el
letter-spacing que cuelga detrás del último glifo (0.16em sobre 0.875rem)—.
Los tres últimos son fijos en rem, así que valen ~1.7rem a cualquier ancho
y la alineación se mantiene sola cuando --pad cambia.
El techo del clamp es esa alineación; el 6vw de en medio (pantallas por
debajo de ~1500px) y el suelo de 1.5rem quedan como estaban, para no
estrechar el mosaico en móvil por perseguir un chip que allí ya no está en
la misma vertical. */
--pkg-bp: clamp(1.5rem, 6vw, calc(var(--pad) + 1.7rem));
padding-bottom: var(--pkgs-foot-aire);
padding-left: var(--pkg-bp);
padding-right: var(--pkg-bp);
/* La «U». Unidad de medida de este apartado: el ancho del glifo «Ú» del chip
«MENÚ» de la barra superior, sin contar el letter-spacing que cuelga
detrás. Medido en pantalla: 11.53px con la raíz a 18px → 0.64rem. Va en
rem, no en px, porque el chip también mide en rem (0.875rem de cuerpo) y
así la unidad sigue valiendo una «U» aunque cambie el tamaño de raíz.
Se usa para el aire de arriba y para el recorte de la tarjeta grande. */
--pkg-u: 0.64rem;
/* Dos U más de aire por arriba. El valor de partida es el de .pkgs; se repite
aquí dentro del calc porque no hay forma de decir «lo que ya había + algo»
sin nombrarlo. Si se cambia allí, hay que cambiarlo aquí. */
padding-top: calc(clamp(3rem, 7vh, 6rem) + 2 * var(--pkg-u));
}
.pkgs-all {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--fuente-botones);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
font-size: clamp(1.75rem, 4vw, 3.75rem);
text-transform: uppercase;
color: var(--tinta);
transition: color 0.3s;
}
.pkgs-all svg {
width: 0.62em;
height: 0.62em;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pkgs-all:hover {
color: var(--primario);
}
.pkgs-all:hover svg {
transform: translateX(0.625rem);
}
/* Mismo efecto de pintado que las "Ver" de las tarjetas: el color recorre
las letras de izquierda a derecha (solo el texto, no la flecha) */
.pkgs-all>span {
background-image: linear-gradient(to right, var(--primario) 50%, var(--ink) 50%);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transition: background-position 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pkgs-all:hover>span {
background-position: 0 0;
}
/* Botón "Ver más paquetes": mismo efecto de hover que .nav-menu-toggle
(círculo oscuro que barre desde la izquierda y rellena), pero sin blur —
solo letra con un borde fino y esquinas de 5px. */
/* El botón "Ver más paquetes" comparte el bloque de CTAs del inicio (arriba,
junto a .btn): mismo diseño que "Diseñar mi viaje" / "Menú" del nav. */
@media (max-width: 1000px) {
.pkgs-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.pkgs-grid {
grid-template-columns: 1fr;
}
.pkg {
aspect-ratio: 4 / 3;
}
}
/* ============================================
FOOTER
============================================ */
footer {
background: var(--bg);
color: var(--superficie);
}
/* El relleno inferior era de 5rem: separaba tanto las columnas de la línea que
el filete parecía suelto, sin cerrar nada. Se deja el aire justo para que no
toque el texto. */
.foot-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Logo del footer = misma marca del header (montañas + ojo + texto), pero en
blanco sobre el fondo oscuro (el filtro convierte el PNG a blanco puro). */
.foot-brand-logo {
display: inline-flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1rem;
}
/* El alto se fija para que la marca case con el bloque «NAYRA / TRAVEL» de al
lado: son dos líneas de 1.75rem con interlineado 1.05, o sea 3.675rem. Si se
cambia el cuerpo de ese texto hay que rehacer esta cuenta — van emparejados a
ojo, no por CSS. Ancho automático para no deformar el PNG. */
.foot-brand-mark {
width: auto;
height: 3.7rem;
flex-shrink: 0;
filter: brightness(0) invert(1);
}
/* Aquí estaba .foot-brand-text: el «NAYRA TRAVEL» escrito que acompañaba al logo
del pie. Se retiró con su marcado por encargo —el pie se queda solo con la
imagen—, y no se deja la regla puesta: es CSS de un elemento que ya no existe y
sin nadie que lo pida no hay forma de saber, leyéndolo, que no pinta nada. */
.foot-brand p {
font-size: 0.875rem;
max-width: 36ch;
color: oklch(0.78 0.012 70);
margin-bottom: 1.5rem;
}
/* Rótulos de columna del pie ("Explorar", "Estudio", "Contacto"): en el oro de
marca —el mismo relleno de los botones— y con cuerpo suficiente para leerse
como encabezado. Antes eran un gris al 70 % de opacidad y apenas se
distinguían de los enlaces que encabezan; ahora el contraste lo da el color,
así que la opacidad vuelve a 1. */
/* ExtraBold, el mismo corte con el que titula «Preguntas frecuentes»: el
SemiBold anterior se quedaba corto para encabezar sobre fondo oscuro. Menos
letter-spacing porque a este grosor separaba de más. */
.foot-col h5 {
font-family: var(--font-xbold);
font-size: 0.9375rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 1.25rem;
color: var(--primario);
font-weight: 400;
}
.foot-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Los enlaces van en blanco puro: la opacidad de antes los dejaba en un gris
claro que, ahora que el rótulo de arriba es dorado, marcaba una jerarquía de
tres niveles donde solo hacen falta dos. */
/* Mismo par que las respuestas del FAQ: corte Light al tamaño de cuerpo de la
escala. Se declaran los dos de forma explícita —antes la familia se heredaba y
el tamaño era un 0.875rem suelto, más pequeño que el cuerpo del resto del
sitio—, que es lo que hacía costar leerlos sobre el fondo oscuro. */
.foot-col a {
font-family: var(--font-light);
font-size: var(--texto);
line-height: 1.4;
opacity: 1;
transition: opacity 0.25s, color 0.25s;
}
.foot-col a:hover {
color: var(--primario);
opacity: 1;
}
/* Centrado: quedó una sola línea de cierre, y con `space-between` un hijo único
se va al borde izquierdo en vez de repartirse. */
.foot-bottom {
padding-top: 2rem;
display: flex;
justify-content: center;
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.5;
}
/* ============================================
PAGE HERO (subpages)
============================================ */
.page-hero {
height: 70vh;
min-height: 33.75rem;
position: relative;
overflow: hidden;
display: flex;
align-items: end;
color: #fff;
padding: 0 var(--pad) 4rem;
}
.page-hero .bg {
position: absolute;
inset: -10% 0;
z-index: 0;
}
.page-hero .bg img,
.page-hero .bg video {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-hero .bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.page-hero-content {
position: relative;
z-index: 2;
max-width: 56.25rem;
}
.page-hero h1 {
color: #fff;
font-size: clamp(3rem, 7vw, 7.25rem);
font-style: normal;
}
.page-hero .breadcrumb {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.85;
margin-bottom: 1.5rem;
display: flex;
gap: 0.75rem;
}
/* ============================================
FILTERS / CHIPS
============================================ */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
padding: 1.5rem 0;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 3rem;
align-items: center;
}
.filter-bar .label {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
margin-right: 1rem;
}
.chip {
padding: 0.625rem 1.125rem;
border: 1px solid var(--line);
border-radius: 62.4375rem;
background: transparent;
font-size: 0.8125rem;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
color: var(--secundario-claro);
}
.chip:hover {
border-color: var(--ink);
color: var(--tinta);
}
.chip.active {
background: var(--ink);
color: var(--superficie);
border-color: var(--ink);
}
/* ============================================
ITINERARY (tour detail)
============================================ */
.tour-detail-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 5rem;
align-items: start;
}
.tour-sidebar {
position: sticky;
top: 6.25rem;
padding: 2rem;
background: var(--bg-soft);
border-radius: var(--radius);
}
.tour-sidebar .price {
font-family: var(--font-xbold);
font-size: 3.5rem;
font-style: normal;
color: var(--primario);
line-height: 1;
}
.tour-sidebar .price-l {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
display: block;
margin-bottom: 0.5rem;
}
.tour-quick {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line-soft);
display: grid;
gap: 0.875rem;
}
.tour-quick li {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
list-style: none;
}
.tour-quick li span:first-child {
color: color-mix(in srgb, var(--tinta) 62%, transparent);
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.itinerary {
display: flex;
flex-direction: column;
}
/* ============================================
SISTEMA CINEMÁTICO — lenguaje compartido de
todas las páginas: heros a pantalla completa,
bandas full-bleed, reveals por líneas (GSAP),
cortinas de imagen y marquesinas.
============================================ */
/* ---- Hero de página: pantalla completa, imagen protagonista ---- */
.page-hero {
height: 90svh;
min-height: 40rem;
padding: 0 var(--pad) clamp(3rem, 7vh, 5.5rem);
}
.page-hero .bg {
inset: 0;
overflow: hidden;
}
.page-hero .bg img,
.page-hero .bg video {
transform-origin: 50% 50%;
will-change: transform;
}
.page-hero .bg::after {
background:
linear-gradient(180deg, rgba(10, 7, 5, 0.42) 0%, rgba(10, 7, 5, 0.08) 34%, rgba(10, 7, 5, 0.14) 60%, rgba(12, 8, 5, 0.66) 100%);
}
.page-hero-content {
max-width: none;
width: 100%;
}
.page-hero h1 {
font-size: clamp(2.625rem, 7.2vw, 8rem);
line-height: 1;
letter-spacing: -0.02em;
max-width: 14ch;
}
.page-hero .hero-sub {
color: rgba(255, 255, 255, 0.88);
font-size: clamp(1rem, 1.3vw, 1.1875rem);
line-height: 1.7;
max-width: 52ch;
margin-top: 1.75rem;
}
/* Pie del hero: hint de scroll + índice, estilo mono */
.hero-foot {
position: absolute;
z-index: 2;
right: var(--pad);
bottom: clamp(3rem, 7vh, 5.5rem);
display: flex;
align-items: center;
gap: 0.875rem;
color: rgba(255, 255, 255, 0.75);
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.hero-foot .hf-line {
width: 0.0625rem;
height: 3.5rem;
background: rgba(255, 255, 255, 0.35);
overflow: hidden;
position: relative;
}
.hero-foot .hf-line::after {
content: "";
position: absolute;
inset: 0;
background: #fff;
transform: translateY(-100%);
animation: hf-drop 2.2s cubic-bezier(0.7, 0, 0.2, 1) infinite;
}
@keyframes hf-drop {
0% {
transform: translateY(-100%);
}
55% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
@media (max-width: 720px) {
.hero-foot {
display: none;
}
.page-hero {
min-height: 35rem;
}
}
/* ---- Reveal por líneas (GSAP SplitText) ----
El JS separa el texto en líneas enmascaradas y las sube en cascada.
Oculto hasta que el split está listo para evitar el destello. */
[data-split] {
opacity: 0;
}
[data-split].split-in {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
[data-split] {
opacity: 1 !important;
}
}
/* ---- Full-bleed: saca un bloque del .container hasta los bordes ---- */
.bleed {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
padding-left: clamp(0.75rem, 1.5vw, 1.5rem);
padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
}
.bleed.flush {
padding-left: 0;
padding-right: 0;
}
/* ---- Banda de imagen a pantalla completa (parallax-block XL) ---- */
.parallax-block {
height: 100svh;
min-height: 40rem;
}
.parallax-block .px-content h2 {
font-size: clamp(2.25rem, 6vw, 6rem);
line-height: 1.02;
}
/* ---- Cortina de imagen: el JS revela con clip-path + zoom ---- */
[data-curtain] {
overflow: hidden;
display: block;
}
[data-curtain] img {
will-change: transform;
}
/* ---- Marquesina: título gigante en movimiento ---- */
.marquee {
overflow: hidden;
padding: clamp(2.5rem, 8vh, 6rem) 0;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
white-space: nowrap;
}
.marquee.dark-band {
background: var(--bg-deep);
border-color: transparent;
}
.marquee-track {
display: inline-flex;
align-items: baseline;
gap: 4rem;
will-change: transform;
}
.marquee-track span {
font-family: var(--font-xbold);
font-weight: 600;
font-size: clamp(3.5rem, 9vw, 9.375rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--tinta);
white-space: nowrap;
}
.marquee.dark-band .marquee-track span {
color: var(--superficie);
}
.marquee-track span.hollow {
color: transparent;
-webkit-text-stroke: 0.0625rem var(--ink-mute);
}
.marquee.dark-band .marquee-track span.hollow {
-webkit-text-stroke: 0.0625rem oklch(0.6 0.012 70);
}
/* ---- Sección de listas con imagen protagonista (Experiencias / Destino) ---- */
.media-rows {
display: block;
}
.media-row {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(1.5rem, 4vw, 4.5rem);
align-items: center;
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
padding: clamp(2rem, 5vh, 4rem) clamp(0.75rem, 1.5vw, 1.5rem);
border-bottom: 1px solid var(--line-soft);
}
.media-row:first-child {
border-top: 1px solid var(--line-soft);
}
.media-row:nth-child(even) {
grid-template-columns: 0.85fr 1.15fr;
}
.media-row:nth-child(even) .mr-media {
order: 2;
}
.media-row .mr-media {
height: min(78vh, 45rem);
overflow: hidden;
border-radius: var(--radius);
}
.media-row .mr-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.media-row:hover .mr-media img {
transform: scale(1.04);
}
.media-row .mr-body {
max-width: 38.75rem;
}
.media-row .mr-body .tag {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primario);
margin-bottom: 1rem;
display: block;
}
.media-row .mr-body h3 {
font-size: clamp(1.875rem, 3.6vw, 3.5rem);
font-style: normal;
line-height: 1.05;
margin-bottom: 1.25rem;
}
.media-row .mr-body>p {
font-size: 1rem;
max-width: 52ch;
}
.media-row .mr-meta {
display: grid;
gap: 0.875rem;
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line-soft);
}
.media-row .mr-meta-row {
display: flex;
justify-content: space-between;
gap: 1.5rem;
font-size: 0.875rem;
}
.media-row .mr-meta-row span:first-child {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
}
.media-row .mr-meta-row span:last-child {
font-family: var(--font-xbold);
font-style: normal;
font-size: 1rem;
}
@media (max-width: 960px) {
.media-row,
.media-row:nth-child(even) {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.media-row:nth-child(even) .mr-media {
order: 0;
}
.media-row .mr-media {
height: 60vh;
}
}
.itin-day {
display: grid;
grid-template-columns: 6.25rem 1fr;
gap: 2rem;
padding: 2.5rem 0;
border-top: 1px solid var(--line-soft);
position: relative;
}
.itin-day .day-n {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primario);
padding-top: 0.5rem;
}
.itin-day h3 {
font-style: normal;
margin-bottom: 0.75rem;
}
.itin-day .meta-row {
display: flex;
gap: 1.5rem;
margin-top: 1rem;
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
}
.itin-day .img {
margin-top: 1.25rem;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--radius);
}
.itin-day .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ============================================
FORM
============================================ */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.form-row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-row.full {
grid-column: span 2;
}
.form-row label {
font-family: var(--font-semibold);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tinta) 62%, transparent);
}
.form-row input,
.form-row textarea,
.form-row select {
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
padding: 0.625rem 0;
font-family: var(--font-xbold);
font-size: 1.25rem;
font-style: normal;
color: var(--tinta);
outline: none;
transition: border-color 0.25s;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
border-color: var(--primario);
}
.form-row textarea {
resize: vertical;
min-height: 7.5rem;
}
/* ============================================
UTILITIES
============================================ */
.divider {
height: 0.0625rem;
background: var(--line-soft);
margin: 5rem auto;
max-width: var(--maxw);
}
.split-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: start;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1100px) {
.hero-search {
grid-template-columns: 1.4fr 1fr 1fr auto;
}
.hero-search>*:nth-child(4) {
display: none;
}
.exp-a {
grid-column: span 12;
}
.exp-b {
grid-column: span 6;
aspect-ratio: 4/3;
}
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 960px) {
:root {
--pad: clamp(1rem, 5vw, 2rem);
}
section {
padding: 5rem var(--pad);
}
section.tight {
padding: 3.5rem var(--pad);
}
/* Nav reducido en móvil: se oculta el CTA, queda el logo y el botón "Menú" */
.nav {
padding: 0.875rem var(--pad);
}
.nav-cta {
display: none;
}
/* Hero */
.hero-content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hero-meta {
text-align: left;
}
.hero-search {
grid-template-columns: 1fr 1fr;
transform: translateY(0);
position: static;
box-shadow: none;
}
.hero-search>* {
border-right: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.hero-search>*:nth-child(2n) {
border-right: none;
}
/* Section headers */
.section-hd {
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 2.5rem;
}
/* Shared two-column layouts */
.intro-grid,
.testi,
.split-2,
.tour-detail-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.intro-stats {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.journal-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* Experiences mosaic */
.exp-a,
.exp-b,
.exp-c,
.exp-d,
.exp-e,
.exp-f,
.exp-g {
grid-column: span 12;
aspect-ratio: 4/3;
}
/* Experiences list page */
.exp-list-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* Tours list */
.tour-row {
grid-template-columns: 3.125rem 1fr auto;
gap: 0.75rem;
}
.tour-row .meta-l,
.tour-row .meta-v {
display: none;
}
.tour-row .preview {
display: none;
}
/* Tour detail */
.tour-summary {
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.gallery .g1,
.gallery .g2,
.gallery .g3,
.gallery .g4,
.gallery .g5 {
grid-column: span 12;
aspect-ratio: 4/3;
}
.included-grid {
grid-template-columns: 1fr;
}
.itin-day {
grid-template-columns: 1fr;
gap: 1rem;
}
.tour-sidebar {
position: static;
}
/* Nosotros */
.manifest-item {
grid-column: span 12;
}
.team-grid {
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.timeline-row {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.press-row {
gap: 1.5rem;
}
/* Contact */
.contact-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.contact-side {
position: static;
}
.pick-grid {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
.form-row.full {
grid-column: span 1;
}
.map-strip {
height: 22.5rem;
min-height: 0;
}
/* Destinos page */
.span4,
.span6,
.span8 {
grid-column: span 12;
aspect-ratio: 4/3;
}
.map-block {
grid-column: span 12;
}
/* Parallax blocks */
.parallax-block {
height: 70vh;
min-height: 30rem;
}
/* Filter bar → horizontal scroll */
.filter-bar {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar {
display: none;
}
.filter-bar .chip,
.filter-bar .label {
flex-shrink: 0;
}
/* Footer */
.foot-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.foot-bottom {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
/* CTA final */
.cta-final h2 {
font-size: clamp(2.25rem, 10vw, 5rem);
}
/* Page hero */
.page-hero {
height: auto;
min-height: 0;
padding: 8.75rem var(--pad) 3.5rem;
}
}
@media (max-width: 600px) {
h1 {
font-size: clamp(2.5rem, 11vw, 4rem);
}
h2 {
font-size: clamp(1.875rem, 8vw, 2.75rem);
}
.btn {
padding: 0.875rem 1.5rem;
font-size: 0.8125rem;
}
.hero-search {
grid-template-columns: 1fr;
}
.hero-search>* {
border-right: none;
}
.intro-stats {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.stat .n {
font-size: 2.25rem;
}
.team-grid {
grid-template-columns: 1fr;
}
.tour-summary {
grid-template-columns: 1fr 1fr;
}
/* Zoom parallax */
.zoom-item--0 .zoom-img {
width: 50vw;
height: 35vh;
top: 32.5vh;
left: 25vw;
}
.zoom-item--1 .zoom-img {
width: 55vw;
height: 25vh;
top: 5vh;
left: 30vw;
}
.zoom-item--2 .zoom-img {
width: 30vw;
height: 35vh;
top: 15vh;
left: 5vw;
}
.zoom-item--3 .zoom-img {
width: 35vw;
height: 20vh;
top: 40vh;
left: 60vw;
}
.zoom-item--4 .zoom-img {
width: 35vw;
height: 20vh;
top: 70vh;
left: 40vw;
}
.zoom-item--5 .zoom-img {
width: 45vw;
height: 20vh;
top: 72vh;
left: 3vw;
}
.zoom-item--6 .zoom-img {
width: 20vw;
height: 15vh;
top: 70vh;
left: 78vw;
}
}
/* ============================================
INTRO — Ventana de cabina (estilo jeskojets)
============================================ */
.jet {
position: relative;
height: 340vh;
/* scroll length del zoom a través de la ventana */
background: #021b1a;
padding: 0;
/* anula el padding global de section (full bleed) */
}
.jet-stage {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
color: #fff;
}
/* Escena tras el vidrio: contiene el hero completo */
.jet-scene {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
/* Cabina con el vidrio recortado (PNG con alpha). El zoom es un
transform scale con origen en el centro del vidrio (lo fija JS). */
.jet-cabin {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
will-change: transform, opacity;
}
.jet-hint {
position: absolute;
left: 50%;
bottom: 4vh;
transform: translateX(-50%);
z-index: 3;
font-family: var(--font-semibold);
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.jet-hint::after {
content: "";
width: 0.0625rem;
height: 2.75rem;
background: linear-gradient(rgba(255, 255, 255, 0.7), transparent);
animation: jet-drop 1.9s ease-in-out infinite;
}
@keyframes jet-drop {
0% {
transform: scaleY(0);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: top;
}
51% {
transform-origin: bottom;
}
100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
/* ============================================
PAGE TRANSITION
============================================ */
/* House of Honey transition via the native cross-document View Transitions API
(needs an http(s) origin — i.e. served from a local server, not file://).
The browser snapshots both pages and animates between them in a single
render — no iframe, no second scrollbar, nothing readjusts:
· the page we leave stays on screen, zooming back + darkening;
· the chosen page rises up over it.
On file:// it simply does an instant navigation (graceful fallback). */
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
/* Outgoing page: stays put, zooms back into the distance and darkens. */
::view-transition-old(root) {
animation: pt-old .85s cubic-bezier(.76, 0, .24, 1) both;
transform-origin: 50% 45%;
z-index: 0;
}
/* Incoming page: rises up from the bottom, over the receding backdrop. */
::view-transition-new(root) {
animation: pt-new .85s cubic-bezier(.76, 0, .24, 1) both;
z-index: 1;
}
}
@keyframes pt-old {
from {
transform: scale(1);
filter: brightness(1);
}
to {
transform: scale(.9);
filter: brightness(.5);
}
/* recede + darken, never black */
}
@keyframes pt-new {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* EL CAMBIO DE IDIOMA: SOLO SE FUNDEN LOS TEXTOS.
El selector cambia de idioma sin recargar, dentro de una View Transition (ver
lib/interactions y components/CambioDeIdioma). Con la de arriba, la página
nueva subiría desde abajo como al cambiar de página; aquí no se va a ninguna
parte, así que es un FUNDIDO CRUZADO SIN MOVIMIENTO: la foto de antes se
desvanece mientras aparece la de después, y como las dos son iguales salvo en
los textos, lo único que se ve moverse es cada texto convirtiéndose en el otro.
Sin desenfoque: difuminaría también las fotos, que no cambian.
Gana a la de arriba por especificidad (la clase del ), y el
`mix-blend-mode` del navegador para estas dos capas se conserva, que es lo que
evita el bajón de brillo a mitad del fundido. */
html.vt-idioma::view-transition-old(root),
html.vt-idioma::view-transition-new(root) {
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: both;
transform: none;
filter: none;
}
html.vt-idioma::view-transition-old(root) {
animation-name: vt-idioma-sale;
}
html.vt-idioma::view-transition-new(root) {
animation-name: vt-idioma-entra;
}
@keyframes vt-idioma-sale {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes vt-idioma-entra {
from { opacity: 0; }
to { opacity: 1; }
}
/* `pt-instant` (every load) stops the nav from tweening white→transparent on
the first painted frame. */
html.pt-instant .nav,
html.pt-instant .nav * {
transition: none !important;
}
/* ============================================
BOTONES FLOTANTES (asistente + WhatsApp)
Esquina inferior derecha, apilados: bot arriba, WhatsApp abajo.
z-index por debajo del menú del sitio (90) y del nav (100).
============================================ */
.floating-actions {
position: fixed;
right: clamp(1rem, 2.5vw, 1.75rem);
bottom: clamp(1rem, 2.5vw, 1.75rem);
z-index: 80;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.fab {
width: 4.25rem;
height: 4.25rem;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
border: none;
padding: 0;
cursor: pointer;
box-shadow: 0 6px 20px rgba(20, 14, 10, 0.22);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.fab:hover {
transform: translateY(-0.1875rem);
box-shadow: 0 10px 26px rgba(20, 14, 10, 0.3);
}
.fab:active {
transform: translateY(-0.0625rem);
}
.fab svg {
width: 2.25rem;
height: 2.25rem;
display: block;
}
/* El de WhatsApp, más grande que el del asistente aunque el botón sea el mismo.
No es un capricho: su dibujo trae aire propio —el trazo ocupa de 4 a 28 en un
viewBox de 32, o sea que se deja un 12% de margen por lado— mientras que el
del bot llega casi al borde de su viewBox de 24. Al mismo tamaño de caja, la
marca de WhatsApp se veía bastante más pequeña que el robot de al lado. Este
valor compensa ese margen y los deja ópticamente iguales. */
.fab-wa svg {
width: 2.75rem;
height: 2.75rem;
}
.fab-bot {
background: var(--primario);
}
.fab-bot:hover {
background: var(--secundario-oscuro);
}
/* Con foto del asistente, el botón ES la foto: se quitan el relleno de oro y el
hueco, para que la imagen llene el círculo en vez de flotar dentro de él. El
filete dorado lo mantiene reconocible como botón del chat. */
.fab-bot--foto {
padding: 0;
overflow: hidden;
border: 2px solid var(--primario);
background: var(--superficie);
position: relative;
}
.fab-bot--foto:hover {
background: var(--superficie);
border-color: var(--secundario-oscuro);
}
/* La foto va en capa y no en el flujo: con el filete de 2px, un `width: 100%`
normal dejaba la imagen más alta que ancha y el círculo salía ovalado. */
.fab-bot-foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.fab-wa {
background: #25d366;
}
.fab-wa:hover {
filter: brightness(1.06);
}
@media (max-width: 640px) {
.fab {
width: 3.75rem;
height: 3.75rem;
}
.fab svg {
width: 1.95rem;
height: 1.95rem;
}
.fab-wa svg {
width: 2.4rem;
height: 2.4rem;
}
}
/* ============================================
DEMO — Panel de personalización (vista previa CMS, no persiste)
============================================ */
.cfg-fab {
position: fixed;
left: clamp(1rem, 2.5vw, 1.75rem);
bottom: clamp(1rem, 2.5vw, 1.75rem);
z-index: 90;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background: var(--secundario);
border: none;
padding: 0;
cursor: pointer;
box-shadow: 0 6px 20px rgba(20, 14, 10, 0.22);
transition: transform 0.25s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cfg-fab:hover { transform: translateY(-0.1875rem) rotate(35deg); box-shadow: 0 10px 26px rgba(20, 14, 10, 0.3); }
.cfg-fab svg { width: 1.75rem; height: 1.75rem; display: block; }
.cfg-panel {
position: fixed;
left: clamp(1rem, 2.5vw, 1.75rem);
bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 4.25rem);
z-index: 91;
width: min(20.5rem, calc(100vw - 2rem));
background: var(--bg);
color: var(--tinta);
border: 1px solid var(--line);
border-radius: 0.9rem;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
padding: 1.1rem 1.15rem 1.25rem;
font-family: var(--font-light);
opacity: 0;
visibility: hidden;
transform: translateY(0.75rem) scale(0.98);
transform-origin: bottom left;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s;
}
.cfg-panel.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.22s ease, transform 0.22s ease; }
.cfg-title { font-family: var(--font-xbold); font-weight: 800; font-style: normal; font-size: 1.1rem; color: var(--tinta); margin: 0 0 0.15rem; }
.cfg-note { font-size: 0.72rem; line-height: 1.4; color: color-mix(in srgb, var(--tinta) 62%, transparent); margin: 0 0 0.9rem; }
.cfg-group { border-top: 1px solid var(--line-soft); padding-top: 0.85rem; margin-top: 0.85rem; }
.cfg-group:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.cfg-label { font-family: var(--font-semibold); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secundario-claro); display: block; margin-bottom: 0.6rem; }
.cfg-row { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.55rem; }
.cfg-row > span { width: 1.1rem; text-align: center; font-size: 0.85rem; color: color-mix(in srgb, var(--tinta) 62%, transparent); flex: none; }
.cfg-row input[type="range"] { flex: 1; height: 1.1rem; accent-color: var(--primario); cursor: pointer; }
.cfg-reset { margin-top: 0.35rem; font-size: 0.72rem; color: var(--secundario-claro); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; }
.cfg-switch { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; cursor: pointer; user-select: none; }
.cfg-switch > span { font-size: 0.85rem; color: var(--tinta); }
.cfg-switch input { display: none; }
.cfg-track { position: relative; flex: none; width: 2.6rem; height: 1.45rem; border-radius: 999px; background: var(--line); transition: background 0.2s ease; }
.cfg-track::after { content: ""; position: absolute; top: 0.18rem; left: 0.18rem; width: 1.09rem; height: 1.09rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.cfg-switch input:checked + .cfg-track { background: var(--primario); }
.cfg-switch input:checked + .cfg-track::after { transform: translateX(1.15rem); }
.cfg-hint { font-size: 0.72rem; line-height: 1.45; color: color-mix(in srgb, var(--tinta) 62%, transparent); margin: 0.6rem 0 0; }
/* --- Opción: menú como barra separada sólida; el tren se acorta ---
El color va por la variable y no escrito: es el mismo azul oscuro de marca, y
escrito a mano se quedaba fuera de lo que cambia el panel. */
html.demo-navbar .nav,
html.demo-navbar .nav.on-dark,
html.demo-navbar .nav.scrolled {
background: var(--secundario-oscuro);
border-bottom-color: rgba(255, 255, 255, 0.10);
/* Barra ESTÁTICA. Dos cosas, porque el movimiento venía de la segunda:
1) Se fija el mismo relleno en reposo y en .scrolled (que lo bajaba a
0.875rem) y se saca `padding` de la transición. Hoy no cambia nada
—el `padding` de .nav lleva var(--pad) y Chromium deja que la
forma abreviada gane a la longhand de .scrolled— pero deja el estado
clavado por si esa resolución cambia.
2) Lo que SÍ se movía: la vibración del CTA (nav-cta-ring), que lo
inclina 3° y le sube el borde ~7 px cada 5 s. Se apaga más abajo. */
padding-top: 1.125rem;
padding-bottom: 1.125rem;
transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
/* Sin vibración del CTA: en la barra separada el menú es una pieza fija. */
html.demo-navbar .nav-cta {
animation: none;
transform: none;
}
html.demo-navbar .nav-brand-logo--light { display: none; }
html.demo-navbar .nav-brand-logo--dark { display: block; }
html.demo-navbar .nav-brand-text .brand-nayra,
html.demo-navbar .nav-brand-text .brand-travel { color: #F1F2F2; }
html.demo-navbar #train .train-stage {
top: var(--nb, 5.5rem);
height: calc(100svh - var(--nb, 5.5rem));
}
/* ============================================
TARJETAS — tipografía (va al FINAL a propósito)
============================================
Todo el texto de las tarjetas usa el corte ExtraBold del Manual.
PIDE --fuente-botones Y NO --font-xbold, y en ese cambio está la corrección de
un fallo que duró varios días. Esta regla siempre quiso el ExtraBold, y durante
años `--font-xbold` FUE el ExtraBold; pero al repartir la tipografía en cuatro
roles editables, ese token pasó a colgar de --fuente-titulos. La regla no se
tocó, así que empezó a servir lo que llevaran los títulos —primero Savoye,
luego Regular, luego SemiBold— y las tarjetas fueron perdiendo su grosor sin
que ninguna línea del archivo dijera nada raro.
De los cuatro roles, el ExtraBold solo lo lleva el de BOTONES, así que es el
que se pide aquí. Consecuencia a tener presente: cambiar la familia de botones
en Ajustes del sitio cambia también estas tarjetas. Si un día hay que
separarlas, la respuesta es un quinto rol, no escribir el nombre de la fuente.
Tres decisiones de la regla:
· Alcanza a los descendientes (`, .x *`) porque dentro de cada tarjeta hay
piezas que fijan su propia familia —etiquetas en SemiBold, descripciones y
nombres en Light—; sin eso la regla del contenedor no les llegaría.
Consecuencia que conviene tener presente: DENTRO de una tarjeta no rige el
reparto general de los tres cortes (ExtraBold titulares · SemiBold versalitas
· Light lectura). Todo va en ExtraBold por decisión de marca. Si algún día se
quiere que las tarjetas sigan el reparto general, es aquí donde hay que
quitarlo, no en las reglas de cada pieza: ganan estas.
· Vive al final del archivo porque compite en igualdad de especificidad con
esas reglas de pieza (p. ej. `.pkg-name`), y a igualdad gana la última.
· Lleva `!important` porque hay overrides que ganarían igualmente: unos por
id (`#pkgs .pkg-days-n`) y otros desde el