body {
    background-color: #f4ece4;
    font-family: 'Outfit', sans-serif;
    color: #4a4036;
    margin: 0;
    overflow: hidden; /* Prevent body scroll, handle scroll in container */
}

h1, h2, h3, .serif-text {
    font-family: 'Noto Serif', serif;
}

/* Map Container styling */
#map-container {
    height: 45vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    border-bottom: 3px solid #3d5a42;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background-color: #e4e0d9;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

#map {
    height: 100%;
    width: 100%;
}

/* Content scrollable area */
#content-area {
    height: 55vh;
    width: 100%;
    position: fixed;
    top: 45vh;
    left: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-bottom: 50px;
    transition: top 0.5s ease, height 0.5s ease;
}

body.map-hidden #map-container {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

body.map-hidden #content-area {
    top: 0;
    height: 100vh;
}

/* Custom Scrollbar for sleekness */
#content-area::-webkit-scrollbar { width: 6px; }
#content-area::-webkit-scrollbar-track { background: transparent; }
#content-area::-webkit-scrollbar-thumb { background: #b05c45; border-radius: 10px; }

/* Custom Map Icon Styles */
.emoji-marker {
    font-size: 28px;
    line-height: 28px;
    text-align: center;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.4));
    transition: transform 0.2s;
}

.city-marker {
    width: 14px;
    height: 14px;
    background-color: #b05c45;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(176, 92, 69, 0.8);
    animation: pulse 2s infinite;
}

.map-label {
    background: rgba(244, 236, 228, 0.95);
    color: #4a4036;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(176, 92, 69, 0.35);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    white-space: nowrap;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(176, 92, 69, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(176, 92, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(176, 92, 69, 0); }
}

/* Timeline Graphics */
.timeline-container { position: relative; padding-left: 20px; margin-top: 15px; margin-bottom: 15px; }
.timeline-container::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 6px; width: 2px; background-color: rgba(176, 92, 69, 0.3);
}
.transport-dot { position: absolute; left: -18px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: #b05c45; }
.node-dot { position: absolute; left: -21px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background-color: #3d5a42; border: 3px solid #f4ece4; }

.hero-gradient { background: linear-gradient(135deg, #3d5a42 0%, #2c4230 100%); }

/* Photo collages */
.photo-collage {
    display: grid;
    gap: 3px;
    border-radius: 14px;
    overflow: hidden;
    background: #e9e2d9;
    aspect-ratio: 16 / 9;
}
.photo-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background-color: #e9e2d9;
}

.collage-hyatt {
    aspect-ratio: 4 / 3;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.collage-hyatt .tile-a { grid-column: 1 / span 2; grid-row: 1; }
.collage-hyatt .tile-b { grid-column: 3; grid-row: 1; }
.collage-hyatt .tile-c { grid-column: 1; grid-row: 2; }
.collage-hyatt .tile-d { grid-column: 2 / span 2; grid-row: 2; }

.collage-vella { grid-template-columns: 1.4fr 0.9fr 0.7fr; grid-template-rows: 1.1fr 0.9fr 1fr; }
.collage-vella .tile-a { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.collage-vella .tile-b { grid-column: 3; grid-row: 1 / span 2; }

.collage-muro { grid-template-columns: 1.2fr 0.8fr 0.9fr; grid-template-rows: 1fr 1fr; }
.collage-muro .tile-a { grid-column: 1 / span 2; grid-row: 1 / span 2; }

.collage-granada {
    aspect-ratio: 1 / 1;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: 1.1fr 0.9fr;
}
.collage-granada .tile-a { grid-column: 1 / span 2; grid-row: 1; }
.collage-granada .tile-b { grid-column: 1; grid-row: 2; }
.collage-granada .tile-c { grid-column: 2; grid-row: 2; }

.collage-madrid { grid-template-columns: 0.9fr 1.1fr 0.8fr; grid-template-rows: 1fr 1fr; }
.collage-madrid .tile-a { grid-column: 1 / span 2; grid-row: 1 / span 2; }