* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-base: #ECEFF8;
    --color-surface-card: #DADFF1;
    --color-main-text: #293A70;
    --color-primary-accent: #4560BA;
}

body {
    background-color: #0a0b1e; /* Deep blue matching 404 page */
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.wrapper {
    width: 100%;
    max-width: 1400px;
    height: 90vh;
    max-height: 900px;
    min-height: 600px;
}

.main-card {
    width: 100%;
    height: 100%;
    background: var(--color-base);
    border-radius: 20px;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(41, 58, 112, 0.15); /* Tinted shadow */
}

/* ========================================================================
   PANELS
   ======================================================================== */
.panel-left {
    flex: 1;
    background: var(--color-base);
    position: relative;
}

.panel-right {
    flex: 1;
    background: url('/travel-ui/Grok_Generated_Image_u8m46cu8m46cu8m4.png') center/cover no-repeat;
    position: relative;
    overflow: hidden; /* Necessary for parallax effect */
}

.parallax-bg {
    position: absolute;
    inset: -20px; /* Oversized to prevent white edges during movement */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1); /* Slightly larger for parallax space */
    z-index: 1;
}

/* ========================================================================
   HEADER & NAVIGATION
   ======================================================================== */
.top-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    pointer-events: none; /* Let empty space pass clicks */
}

.logo, .hamburger {
    pointer-events: auto; /* Re-enable clicks for interactive elements */
}

.hamburger {
    width: 25px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #ffffff;
}

.side-menu {
    position: absolute;
    bottom: 50px;
    left: 40px;
}

.side-menu ul {
    list-style: none;
}

.side-menu li {
    margin-bottom: 15px;
}

.nav-icon { display: none; }

.side-menu a {
    text-decoration: none;
    color: var(--color-main-text);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.side-menu a:hover {
    color: var(--color-primary-accent);
}

.side-menu a.active {
    font-weight: 700;
    color: var(--color-primary-accent);
}

/* ========================================================================
   SPLIT TEXT LAYER EFFECT
   ======================================================================== */
.text-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none; /* Text shouldn't block card interactions */
    z-index: 10;
}

.text-content {
    transform: translateY(-65px); /* Slightly lower than previous -80px */
}

.text-layer h1 {
    font-size: 14rem;
    line-height: .95;
    font-weight: 500;
    letter-spacing: -6px;
    margin-bottom: 25px;
}

.text-layer p {
    font-size: 0.85rem;
    max-width: 500px; /* Narrowed to avoid side overlaps */
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 500;
}

/* Hard cutting the layers to create the split color effect */
.layer-dark {
    color: var(--color-main-text);
    -webkit-clip-path: inset(0 50% 0 0);
    clip-path: inset(0 50% 0 0);
}

.layer-light {
    color: rgba(255, 255, 255, 0.95); /* Glassy white */
    -webkit-clip-path: inset(0 0 0 50%);
    clip-path: inset(0 0 0 50%);
    /* Creating a glassy reflection feel on the text */
    text-shadow: 0 4px 20px rgba(41, 58, 112, 0.2);
}

/* ========================================================================
   GEM CARD (RIGHT SIDE)
   ======================================================================== */
.cards-viewport {
    position: absolute;
    bottom: 50px;
    right: 40px;
    width: 420px;
    height: 184px; /* Align with card height */
    overflow: hidden;
    z-index: 15;
}

.cards-slider {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    width: 100%;
    cursor: grab;
}

.cards-slider:active {
    cursor: grabbing;
}

.gem-card {
    position: relative;
    flex-shrink: 0;
    width: 420px;
    background: var(--color-surface-card);
    border-radius: 20px;
    padding: 12px;
    display: flex;
    gap: 15px;
    box-shadow: 0 15px 30px rgba(41, 58, 112, 0.15);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none; /* Ensure link cards don't have underline */
}

.gem-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.gem-img {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    background: url('https://images.unsplash.com/photo-1510511459019-5efa7ae5ca6c?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
    flex-shrink: 0;
}

.gem-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 10px;
}

.gem-content h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-main-text);
    margin-bottom: 8px;
}

.gem-content p {
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-main-text);
    opacity: 0.8;
    margin-bottom: 15px;
}

.btn-explore {
    align-self: flex-start;
    background: var(--color-main-text);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-explore:hover {
    background: var(--color-primary-accent);
}

/* ========================================================================
   NAVIGATION ARROWS
   ======================================================================== */
.nav-arrows {
    position: absolute;
    bottom: 121px; /* Centered vertically relative to card (50 + 184/2 - 21 offset) */
    right: 40px; /* Anchor exactly to cards-viewport horizontal position */
    width: 420px; /* Match cards-viewport width */
    height: 45px;
    z-index: 20;
    pointer-events: none;
}

.arrow-btn {
    pointer-events: auto; /* Ensure clickable spite parent having none */
    position: absolute;
    top: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.arrow-btn:hover {
    background: var(--color-primary-accent);
    border-color: var(--color-primary-accent);
    transform: scale(1.1);
}

.arrow-btn:active {
    transform: scale(0.95);
}

.arrow-btn.prev {
    left: -20px;
}

.arrow-btn.next {
    right: -20px;
}

/* ========================================================================
   PAGINATION DOTS
   ======================================================================== */
.dots {
    position: absolute;
    bottom: 25px;
    right: 40px;
    width: 420px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 15;
}

.dots span {
    pointer-events: auto; /* Ensure clickable */
    display: block;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dots span.active {
    background: var(--color-primary-accent);
}

.dots span:hover {
    background: var(--color-surface-card);
}

/* ========================================================================
   TABLET
   ======================================================================== */
@media (max-width: 1024px) {
    .text-layer h1 { font-size: 4rem; }
    .gem-card { width: 380px; }
    .gem-img { width: 130px; height: 130px; }
}

/* ========================================================================
   MOBILE (≤ 768px) — Hero full-screen + nav strip
   ======================================================================== */
@media (max-width: 768px) {

    body.page-welcome {
        padding: 0;
        align-items: flex-start;
    }

    body.page-welcome .wrapper {
        height: 100svh;
        max-height: none;
        min-height: unset;
    }

    body.page-welcome .main-card {
        flex-direction: column;
        border-radius: 0;
        overflow: hidden;
        height: 100svh;
        min-height: unset;
        box-shadow: none;
    }

    /* ── HERO: panel-right rellena el espacio restante ── */
    body.page-welcome .panel-right {
        order: 1;
        flex: 1;
        min-height: 0;
        height: auto;
    }

    /* Gradiente oscuro para legibilidad */
    body.page-welcome .panel-right::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(5, 7, 25, 0.55) 0%,
            rgba(5, 7, 25, 0.0) 28%,
            rgba(5, 7, 25, 0.45) 58%,
            rgba(5, 7, 25, 0.93) 100%
        );
        z-index: 2;
        pointer-events: none;
    }

    /* ── NAV: panel-left barra inferior fija ── */
    body.page-welcome .panel-left {
        order: 2;
        flex: none;
        background: #0a0b1e;
        padding: 12px 24px 16px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.page-welcome .side-menu {
        position: static;
        width: 100%;
    }

    body.page-welcome .side-menu ul {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
    }

    body.page-welcome .side-menu li { margin-bottom: 0; }

    body.page-welcome .side-menu a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: rgba(255, 255, 255, 0.45);
        transition: color 0.2s;
    }

    body.page-welcome .side-menu a:hover,
    body.page-welcome .side-menu a.active {
        color: rgba(255, 255, 255, 0.95);
    }

    .nav-label { display: none; }

    body.page-welcome .nav-icon {
        display: block;
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0;
    }

    /* ── LOGO: centrado sobre el hero ── */
    body.page-welcome .top-header {
        position: absolute;
        padding: 4px 20px 0;
        justify-content: center;
        z-index: 10;
    }

    body.page-welcome .top-header img {
        height: 220px !important;
        mix-blend-mode: normal !important;
    }

    body.page-welcome .hamburger { display: none; }

    /* ── TEXTO: ocultamos el efecto split ── */
    body.page-welcome .text-layer { display: none; }

    /* ── CARDS: carousel ancho completo en la parte baja ── */
    body.page-welcome .cards-viewport {
        bottom: 82px;
        left: 16px;
        right: 16px;
        width: auto;
        height: 160px;
    }

    body.page-welcome .gem-card {
        width: 100%;
        height: 160px;
    }

    body.page-welcome .gem-img {
        width: 120px;
        height: 136px;
    }

    /* ── FLECHAS: flanqueando el card ── */
    body.page-welcome .nav-arrows {
        bottom: 146px;
        left: 0;
        right: 0;
        width: 100%;
        height: 32px;
    }

    body.page-welcome .arrow-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    body.page-welcome .arrow-btn.prev { left: 4px; }
    body.page-welcome .arrow-btn.next { right: 4px; }

    /* ── DOTS: centrados ── */
    body.page-welcome .dots {
        bottom: 52px;
        left: 0;
        right: 0;
        width: 100%;
        justify-content: center;
    }
}