/* ===== VARIABLES Y RESET ===== */
:root {
    /* Colores inspirados en Japón */
    --color-primary: #8B9556;
    /* Verde oliva japonés */
    --color-secondary: #A0522D;
    /* Marrón tierra */
    --color-accent: #D4AF37;
    /* Dorado */
    --color-dark: #2C3E2E;
    --color-light: #F5F5DC;
    /* Beige claro */
    --color-white: #FFFFFF;
    --color-gray: #6B7280;
    --color-gray-light: #E5E7EB;

    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #8B9556 0%, #6B7744 100%);
    --gradient-hero: linear-gradient(135deg, rgba(139, 149, 86, 0.4) 0%, rgba(44, 62, 46, 0.45) 100%);
    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 220, 0.9) 100%);

    /* Tipografía */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    color: var(--color-dark);
    background-color: #fdfdf5;
    /* Soft cream base */
    background-image: none;
    background-size: 800px;
    /* Increased size to make the kanji look less repetitive */
    background-repeat: repeat;
    line-height: 1.7;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

ul {
    list-style: none;
}

/* ===== UTILIDADES ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
    text-align: center;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--gradient-primary);
    margin: var(--spacing-sm) auto 0;
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    font-size: 1.125rem;
    color: var(--color-gray);
    margin-bottom: var(--spacing-lg);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== NAVEGACIÓN ===== */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    transition: var(--transition-base);
}

#navbar.scrolled {
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.nav-logo-img {
    height: 110px;
    width: auto;
    object-fit: contain;
    border-radius: 50%;
}

.nav-logo .logo-text {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-menu a {
    font-weight: 500;
    color: var(--color-dark);
    position: relative;
    padding: 0.5rem 0;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: var(--transition-base);
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: var(--color-dark);
    border-radius: 2px;
    transition: var(--transition-base);
}

/* ===== HERO SECTION ===== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/images/hero_japan_shadows.png') center/cover no-repeat;
    animation: kenburns 20s ease-in-out infinite alternate;
}

@keyframes kenburns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-hero);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color-white);
    padding: var(--spacing-md);
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    margin-bottom: var(--spacing-xs);
    font-weight: 300;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: var(--spacing-lg);
    font-style: italic;
    opacity: 0.95;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.125rem;
    border-radius: 50px;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    background: var(--color-accent);
    color: var(--color-white);
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scroll-indicator span {
    display: block;
    width: 24px;
    height: 40px;
    border: 2px solid var(--color-white);
    border-radius: 20px;
    position: relative;
}

.scroll-indicator span::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--color-white);
    border-radius: 2px;
    animation: scroll 2s infinite;
}

@keyframes scroll {

    0%,
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(8px);
    }
}

/* ===== INTRODUCCIÓN MINIMALISTA ZEN CON TARJETAS ===== */
.intro-section-zen {
    padding: var(--spacing-xl) 0;
    line-height: 1.8;
    position: relative;
}

.container-zen {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.zen-main-title {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xl);
    text-align: center;
    font-weight: 300;
    letter-spacing: -0.5px;
}

.zen-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.zen-card {
    background: rgba(253, 253, 245, 0.7);
    /* Match cream base with transparency */
    backdrop-filter: blur(5px);
    padding: var(--spacing-lg);
    border-radius: 12px;
    border: 1px solid rgba(139, 149, 86, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: var(--transition-base);
}

.zen-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--color-primary);
}

/* Featured card with image */
.zen-card.featured {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

/* Specific Highlight for "Mi Compromiso" */
#card-commitment {
    background: rgba(255, 255, 255, 0.95);
    /* Slightly lighter/solid than others */
    border-color: rgba(139, 149, 86, 0.4);
    /* Stronger border */
    box-shadow: 0 15px 35px rgba(139, 149, 86, 0.1);
    /* Greenish soft shadow */
}

#card-commitment h3 {
    color: var(--color-dark);
    /* Darker title for contrast */
}

.zen-card-image {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.zen-card-image img {
    width: 100%;
    height: auto;
    display: block;
    filter: sepia(10%) contrast(98%);
}

.zen-text-lead {
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--color-dark);
    font-style: italic;
    font-family: var(--font-display);
}

.zen-subtitle {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    font-weight: 500;
    position: relative;
    padding-bottom: 0.5rem;
}

.zen-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 1px;
    background: var(--color-accent);
}

.zen-text {
    font-size: 1.1rem;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
}

.zen-text:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 850px) {
    .zen-card.featured {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .zen-card-image {
        max-width: 250px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {

    .container,
    .container-zen,
    .container-full {
        padding-left: var(--spacing-sm) !important;
        /* 1rem en vez de 2rem */
        padding-right: var(--spacing-sm) !important;
    }

    .zen-card {
        padding: 1.25rem !important;
        /* Reducido de 2rem a 1.25rem */
    }

    .tematica-content {
        padding: 1.5rem !important;
    }

    .zen-main-title {
        font-size: 2rem;
    }
}

/* ===== TEMÁTICAS ===== */
/* ===== BACKGROUND TEXTURE ===== */
.tematicas-section {
    padding: var(--spacing-xl) 0;
    background-color: #fdfdf5;
    background-image: radial-gradient(#e5e5d8 1px, transparent 1px);
    background-size: 20px 20px;
}

.tematicas-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.tematica-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    background: var(--gradient-card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.tematica-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-5px);
}

.tematica-card.reverse {
    grid-template-columns: 1fr 1fr;
}

/* Forzar que el texto (título) aparezca SIEMPRE antes de la imagen */
.tematica-content {
    order: -1;
    padding: var(--spacing-lg);
}

.tematica-image {
    height: 100%;
    overflow: hidden;
}

/* ===== STRUCTURED GRID LAYOUTS (2x2) ===== */
.literature-grid,
.gastronomy-grid,
.nature-grid,
.vibrante-grid,
.onsen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    min-height: 450px;
    gap: 15px;
    padding: 10px;
}

.literature-grid img,
.gastronomy-grid img,
.nature-grid img,
.vibrante-grid img,
.onsen-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

/* Hover Effect */
.literature-grid img:hover,
.gastronomy-grid img:hover,
.nature-grid img:hover,
.vibrante-grid img:hover,
.onsen-grid img:hover {
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}



.tematica-content {
    padding: var(--spacing-lg);
    order: -1;
}

.tematica-content h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.tematica-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
}

.tematica-content blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--color-primary);
    border-left: 4px solid var(--color-accent);
    padding-left: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.tematica-list {
    list-style: none;
    margin-top: var(--spacing-md);
}

.tematica-list li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: var(--spacing-sm);
    font-size: 1.05rem;
    line-height: 1.7;
}

.tematica-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: 1.5rem;
    line-height: 1;
}

/* Generic Full Width Card */
.full-width-card {
    grid-template-columns: 1fr !important;
}

/* --- NEW LAYOUT: BENTO GRID (Vibrante / Nature) --- */
.bento-grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.bento-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.bento-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.bento-item:hover img {
    transform: scale(1.05);
}

.bento-item-text {
    grid-column: span 12;
    background: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-md);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(139, 149, 86, 0.2);
}

.bento-item.large {
    grid-column: span 8;
    grid-row: span 2;
}

.bento-item.medium {
    grid-column: span 4;
}

.bento-item.tall {
    grid-column: span 4;
    grid-row: span 2;
}


/* --- NEW LAYOUT: GASTRONOMY (Sticky Side + Masonry) --- */
.gastronomy-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.gastronomy-text-side {
    position: sticky;
    top: 100px;
    background: rgba(255, 255, 255, 0.85);
    padding: var(--spacing-lg);
    border-radius: 16px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(139, 149, 86, 0.1);
}

.gastronomy-grid-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.gastronomy-item {
    position: relative;
    /* Ensure relative positioning for caption */
    border-radius: 12px;
    overflow: hidden;
    height: 250px;
    box-shadow: var(--shadow-sm);
}

.gastronomy-item:hover .image-caption {
    opacity: 1;
    transform: translateY(0);
}

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    padding: 15px;
    font-family: var(--font-display);
    font-size: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Show caption always on mobile */
@media (max-width: 768px) {
    .image-caption {
        opacity: 1;
        transform: translateY(0);
        background: rgba(0, 0, 0, 0.6);
    }
}

.gastronomy-item.wide {
    grid-column: span 2;
    height: 300px;
}

.gastronomy-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- RESPONSIVE FOR NEW LAYOUTS --- */
@media (max-width: 900px) {

    .bento-item.large,
    .bento-item.medium,
    .bento-item.tall {
        grid-column: span 12;
        /* Stack all on mobile */
        grid-row: span 1;
        height: 300px;
        /* Fixed height for consistency */
    }

    .bento-item-text {
        order: -1;
        /* Text always first on mobile */
        margin-bottom: var(--spacing-md);
    }

    .gastronomy-layout {
        grid-template-columns: 1fr;
    }

    .gastronomy-text-side {
        position: static;
        margin-bottom: var(--spacing-md);
    }

    /* Reset for Reverse Layout on Mobile (Naturaleza) */
    .gastronomy-layout.reverse .gastronomy-text-side {
        order: -1 !important;
        /* Forces text to be first */
    }

    .gastronomy-layout.reverse .gastronomy-grid-side {
        order: 1 !important;
    }

    /* Enhancements for Mobile Images (Nature/Gastronomy) */
    .gastronomy-grid-side {
        grid-template-columns: 1fr;
    }

    .gastronomy-item,
    .gastronomy-item.wide {
        width: 100%;
        grid-column: span 1;
        height: 320px;
        /* Taller images for better visibility */
    }

    .gastronomy-item img {
        object-position: center;
    }
}

.gastronomy-layout.reverse {
    grid-template-columns: 1.2fr 1fr;
    /* Swap columns */
}

.gastronomy-layout.reverse .gastronomy-text-side {
    order: 2;
    /* Put text on right */
}

.gastronomy-layout.reverse .gastronomy-grid-side {
    order: 1;
    /* Put grid on left */
}


.spirituality-container {
    padding: var(--spacing-md);
    max-width: 1100px;
    margin: 0 auto;
}

.spirituality-container h3 {
    text-align: center;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

/* Rows as Cards */
.spirituality-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-sm);

    /* Card Styling */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    padding: var(--spacing-md);
    border-radius: 16px;
    border: 1px solid rgba(139, 149, 86, 0.15);
    /* Subtle green border */
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spirituality-row:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    background: rgba(255, 255, 255, 0.9);
}

.spirituality-row.reverse {
    direction: rtl;
    /* Flip visual order */
}

.spirituality-row.reverse .spirituality-text {
    direction: ltr;
    /* Reset text direction */
}

.spirituality-text {
    padding: var(--spacing-xs);
}

.spirituality-text p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--color-dark);
}

.spirituality-text blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--color-primary);
    border-left: 4px solid var(--color-accent);
    padding-left: var(--spacing-md);
    margin: var(--spacing-md) 0;
    background: rgba(139, 149, 86, 0.05);
    /* Light highlight for quote */
    padding: var(--spacing-md);
    border-radius: 0 8px 8px 0;
}

.spirituality-img {
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    width: 100%;
}

.spirituality-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.spirituality-img:hover img {
    transform: scale(1.05);
}

@media (max-width: 800px) {
    .spirituality-container {
        padding: var(--spacing-md) var(--spacing-sm);
        /* Less padding on mobile container */
    }

    .spirituality-row,
    .spirituality-row.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        /* Reduce internal padding */
    }

    /* Fix "Cut off" by using aspect ratio and auto height */
    .spirituality-img {
        height: auto;
        aspect-ratio: 16/9;
        order: -1;
        width: 100%;
    }

    /* Ensure text is readable and not cramped */
    .spirituality-text p {
        font-size: 1rem;
    }
}



.tematica-content-full p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.tematica-content-full blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--color-primary);
    border-left: 4px solid var(--color-accent);
    padding-left: var(--spacing-md);
    margin: var(--spacing-lg) auto;
    max-width: 800px;
    text-align: center;
}

/* Spiritual Gallery - Organic Masonry Layout */
.spiritual-gallery {
    display: block;
    column-count: 3;
    column-gap: 15px;
    margin-top: var(--spacing-lg);
    height: auto;
}

.gallery-main,
.gallery-grid,
.gallery-grid .gallery-item {
    /* Reset previous styles */
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
    height: auto;
    break-inside: avoid;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.gallery-grid {
    /* Remove grid container prop from previous layout since we flatten items ideally, 
       but here we are wrapping existing HTML structure. 
       To make true masonry with nested divs is tricky. 
       Let's style the containers to flow. */
    display: contents;
    /* This unwraps the grid div visually so its children become part of the masonry flow if supported, 
       OR we treat the grid div as just another block. 
       Given the HTML structure: main + grid(4 items), masonry on parent works best if 'gallery-grid' is ignored or flattened.
       
       Better approach given HTML structure <div main><div grid><item><item>...</div></div>:
       We keep "Spiritual Gallery" as container.
       But standard CSS Grid is better for control than columns for mixed aspect ratios if structure is rigid.
       
       Let's try an asymmetrical Grid that feels less structured.
    */
}

/* --- RE-ATTEMPT: Asymmetrical Grid (Mosaic) --- */
.spiritual-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 250px 250px;
    gap: 12px;
    height: auto;
    column-count: auto;
    /* Reset masonry */
}

/* 
   HTML is:
   .spiritual-gallery
      .gallery-main (Img 1)
      .gallery-grid (Container of 4 imgs)
         .gallery-item (Img 2)
         ...
   
   We need to make .gallery-grid display:contents so its children participate in .spiritual-gallery's grid.
*/
.gallery-grid {
    display: contents;
}

/* Item 1 (Main): Large, takes 2x2 on left */
.gallery-main {
    grid-column: span 2;
    grid-row: span 2;
    height: 100%;
    margin-bottom: 0;
}

/* Items 2-5: Flow around */
.gallery-item {
    height: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.gallery-item img,
.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Individual Tweaks for "Organic" feel */
/* Item 2: Top Right 1 - landscape */
.gallery-item:nth-child(1) {
    grid-column: span 2;
}

/* Item 3: Bottom Right 1 - portrait */
.gallery-item:nth-child(2) {
    grid-column: span 1;
}

/* Item 4: Bottom Right 2 - portrait */
.gallery-item:nth-child(3) {
    grid-column: span 1;
}

/* Item 5: Hidden or extra? If we have 5 items total (1 main + 4 in grid) */
.gallery-item:nth-child(4) {
    display: none;
    /* Hide 5th if it breaks layout, or make it span */
}


/* Hover Effects */
.gallery-main:hover img,
.gallery-item:hover img {
    transform: scale(1.05);
}


/* Responsive */
@media (max-width: 768px) {
    .spiritual-gallery {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .gallery-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Recover hidden item on mobile */
    .gallery-item:nth-child(4) {
        display: block;
    }

    .gallery-main,
    .gallery-item {
        height: 250px;
        width: 100%;
    }
}


/* ===== ITINERARIO SPLIT VIEW ===== */
.itinerario-section-split {
    padding: var(--spacing-xl) 0;
    position: relative;
    background: #fdfdf5;
    /* Consistent with Washi background */
}

.container-full {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.itinerary-wrapper {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    align-items: flex-start;
    position: relative;
}

/* Sidebar: Timeline Accordion */
.itinerary-sidebar {
    max-height: 800px;
    overflow-y: auto;
    padding-right: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.itinerary-sidebar::-webkit-scrollbar {
    width: 6px;
}

.itinerary-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px;
}

.timeline-accordion-item {
    background: #ffffff;
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    margin-bottom: 1.25rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.timeline-accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.timeline-accordion-item.active {
    box-shadow: 0 8px 30px rgba(139, 149, 86, 0.15);
    background: #fff;
    transform: scale(1.02);
    z-index: 10;
}

.timeline-accordion-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
}

.accordion-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    cursor: pointer;
    width: 100%;
}

.day-number {
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(139, 149, 86, 0.3);
}

.header-info h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-primary);
    margin: 0;
    letter-spacing: 0.5px;
}

.header-info p {
    font-size: 0.9rem;
    color: var(--color-gray);
    margin: 2px 0 0 0;
}

.accordion-icon {
    margin-left: auto;
    font-size: 1.5rem;
    color: var(--color-accent);
    transition: transform 0.4s ease;
}

.timeline-accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 0 2rem 2rem 80px;
    display: none;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.timeline-accordion-item.active .accordion-content {
    display: block;
    animation: fadeInSlideUp 0.5s ease forwards;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accordion-content ul {
    list-style: none;
    padding: 1.5rem 0 0 0;
}

.accordion-content ul li {
    font-size: 1rem;
    color: var(--color-dark);
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.6;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    border-radius: 4px;
    padding-right: 8px;
    /* For hover background balance */
}

.accordion-content ul li:hover {
    color: var(--color-primary);
    background: rgba(139, 149, 86, 0.08);
    transform: translateX(4px);
}

.accordion-content ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: 1.5rem;
    line-height: 1;
}

/* Map View */
.itinerary-map-view {
    position: sticky;
    top: 100px;
    height: calc(100vh - 120px);
    z-index: 50;
}

.sticky-map-container {
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border: none;
    background: #fff;
    position: relative;
}

#map {
    height: 100%;
    width: 100%;
    z-index: 1;
}

/* Zen Marker & Popup */
.zen-marker .marker-disk {
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    animation: zenPulse 2s infinite;
    transition: transform 0.3s ease;
}

.zen-marker .marker-disk svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Custom Colors per Type */
.zen-marker .marker-disk.tokio,
.zen-marker .marker-disk.osaka {
    background: #4B5563;
    /* Slate for modern cities */
}

.zen-marker .marker-disk.kioto,
.zen-marker .marker-disk.nara,
.zen-marker .marker-disk.kamakura {
    background: #C2410C;
    /* Burnt Orange for temples */
}

.zen-marker .marker-disk.fuji,
.zen-marker .marker-disk.nature {
    background: #059669;
    /* Emerald Green for nature */
}

.zen-marker .marker-disk.food {
    background: #EAB308;
    /* Golden Yellow for food */
}

.zen-marker .marker-disk.culture {
    background: #7C3AED;
    /* Violet for culture */
}

@keyframes zenPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
        transform: scale(1.1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }
}

.zen-popup .leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.zen-popup .popup-day {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 4px;
}

.zen-popup h4 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

/* ===== INCLUSIONES ZEN ===== */
.inclusiones-section {
    padding: var(--spacing-xl) 0;
    background: #fff;
    position: relative;
}

.inclusiones-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.incluye-card,
.no-incluye-card {
    background: #fdfdf5;
    padding: 3rem;
    border-radius: 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.4s ease;
}

.incluye-card:hover,
.no-incluye-card:hover {
    transform: translateY(-10px);
}

.incluye-card::before {
    content: '✓';
    position: absolute;
    top: -25px;
    left: 40px;
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    color: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 10px 20px rgba(139, 149, 86, 0.3);
}

.no-incluye-card::before {
    content: '✕';
    position: absolute;
    top: -25px;
    left: 40px;
    width: 60px;
    height: 60px;
    background: #bbb;
    color: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.incluye-card h3,
.no-incluye-card h3 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--color-dark);
}

.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
}

.check-list li:last-child {
    border-bottom: none;
}

.check-list strong {
    color: var(--color-primary);
    font-weight: 600;
}

.check-list ul {
    margin: 1rem 0 0 1.5rem;
    list-style: none;
}

.check-list ul li {
    padding: 0.5rem 0;
    font-size: 1rem;
    border: none;
}

.check-list ul li::before {
    content: '→';
    margin-right: 10px;
    color: var(--color-accent);
}

@media (max-width: 1024px) {
    .itinerary-wrapper {
        grid-template-columns: 1fr;
    }

    .itinerary-map-view {
        position: relative;
        top: 0;
        height: 450px;
        order: -1;
    }

    .itinerary-sidebar {
        max-height: none;
        overflow: visible;
    }

    .inclusiones-container {
        grid-template-columns: 1fr;
        gap: 80px;
    }
}


.nota-importante {
    margin-top: var(--spacing-lg);
    padding: 2.5rem;
    background: #fff;
    border: 1px solid rgba(139, 149, 86, 0.15);
    border-top: 4px solid var(--color-accent);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.nota-importante p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1rem;
    text-align: justify;
}

.nota-importante p:last-child {
    margin-bottom: 0;
}

.nota-importante strong {
    color: var(--color-secondary);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

/* ===== CONTACTO ===== */
.contacto-section {
    padding: var(--spacing-xl) 0;
    background: var(--gradient-primary);
    color: var(--color-white);
}

.contacto-content {
    text-align: center;
}

.contacto-text h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--spacing-md);
}

.contacto-text p {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.95;
}

.contacto-info {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.contacto-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    font-size: 1.125rem;
    font-weight: 500;
    transition: var(--transition-base);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.contacto-item:hover {
    background: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.contacto-icon {
    font-size: 1.5rem;
}

/* ===== NEWSLETTER FORM (Footer) ===== */
.footer-form-container {
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.footer-form-title {
    font-size: 1.5rem;
    font-family: var(--font-display);
    margin-bottom: var(--spacing-sm);
    color: var(--color-light);
}

.footer-form {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 600px;
    margin: 0 auto;
}

.footer-input {
    padding: 0.75rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    flex: 1;
    min-width: 200px;
}

.footer-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.footer-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-white);
}

.footer-btn {
    padding: 0.75rem 2rem;
    background: var(--color-accent);
    color: var(--color-dark);
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition-base);
}

.footer-btn:hover {
    background: var(--color-white);
    transform: translateY(-2px);
}

/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    background: #20BA56;
}

.whatsapp-icon svg {
    width: 35px;
    height: 35px;
    fill: currentColor;
}

/* ===== FOOTER ===== */
.footer {
    padding: var(--spacing-md) 0;
    background: var(--color-dark);
    color: var(--color-white);
    text-align: center;
}

.footer p {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {

    .intro-grid,
    .tematica-card,
    .tematica-card.reverse {
        grid-template-columns: 1fr;
    }

    .tematica-card.reverse .tematica-image,
    .tematica-card.reverse .tematica-content {
        order: initial;
    }

    .inclusiones-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--color-white);
        flex-direction: column;
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-lg);
        transition: var(--transition-base);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .timeline-item {
        grid-template-columns: 60px 1fr;
    }

    .timeline-marker {
        width: 60px;
        height: 60px;
        font-size: 1.25rem;
    }

    .timeline-item::before {
        left: 30px;
    }

    .contacto-info {
        flex-direction: column;
        align-items: center;
    }

    .map-legend {
        position: static;
        margin-top: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-lg: 3rem;
        --spacing-xl: 4rem;
    }

    .hero {
        min-height: 500px;
    }

    .timeline-content {
        padding: var(--spacing-sm);
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-main {
        height: 250px;
    }

    .gallery-item {
        height: 180px;
    }

    /* FIX: Prevent Horizontal Scroll on Small Devices (e.g., Samsung S25) */
    .incluye-card,
    .no-incluye-card {
        padding: 1.5rem !important;
        /* Reduce 3rem padding */
    }

    .incluye-card::before,
    .no-incluye-card::before {
        left: 20px;
        /* Adjust icon position */
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        top: -20px;
    }

    .contact-item,
    .contacto-item {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        /* Reduce massive horizontal padding */
        width: 100%;
        /* Ensure it fits */
        justify-content: center;
    }

    /* Force single column for internal grids on mobile */
    .literature-grid,
    .gastronomy-grid,
    .gastronomy-grid-side,
    .nature-grid,
    .vibrante-grid,
    .onsen-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto !important;
        min-height: auto !important;
    }

    .literature-grid img,
    .gastronomy-grid img,
    .gastronomy-grid-side img,
    .nature-grid img,
    .vibrante-grid img,
    .onsen-grid img {
        height: 250px;
        /* Fixed height for stacked images */
        width: 100%;
        object-fit: cover;
    }

    /* Reset spans for mobile */
    .gastronomy-item.wide,
    .bento-item.large,
    .bento-item.medium,
    .bento-item.tall {
        grid-column: span 1 !important;
        width: 100% !important;
    }

    /* Fix Map Overflow */
    .itinerary-map-view,
    .sticky-map-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden;
    }

    #map {
        max-width: 100%;
    }
}

/* ===== MOBILE S25 FIXES (360px) ===== */
@media (max-width: 420px) {

    /* Title sizing */
    .section-title {
        font-size: 2rem !important;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    /* Footer Form Stacking */
    .footer-form {
        flex-direction: column;
        width: 100%;
    }

    .footer-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Grids & Cards */
    .zen-cards-grid,
    .tematica-grid,
    .inclusiones-container,
    .literature-grid,
    .gastronomy-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    /* Card Padding Reduction */
    .incluye-card,
    .no-incluye-card {
        padding: 1.25rem 1rem !important;
        width: 100% !important;
        /* Force width */
        min-width: 0 !important;
        /* Remove any min-width */
    }

    .zen-card {
        padding: 1.25rem !important;
    }

    /* Contact Items */
    .contacto-item {
        flex-direction: column;
        text-align: center;
        padding: 1rem !important;
    }

    /* General Container Safety */
    .container,
    .container-zen,
    .container-full {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }
}

/* ===== MOBILE FIXED FOR NATURE SECTION ===== */
@media (max-width: 950px) {

    /* Force Nature Section (Reverse Layout) to Stack vertically */
    .gastronomy-layout.reverse {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .gastronomy-layout.reverse .gastronomy-text-side {
        width: 100% !important;
        order: -1 !important;
        /* Title first */
        margin-bottom: 2rem !important;
        position: static !important;
    }

    .gastronomy-layout.reverse .gastronomy-grid-side {
        width: 100% !important;
        order: 1 !important;
        /* Images second */
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin: 0 !important;
    }

    /* Force Images Visibility and Size */
    .gastronomy-item,
    .gastronomy-item.wide {
        width: 100% !important;
        height: 350px !important;
        min-height: 350px !important;
        grid-column: 1 / -1 !important;
        display: block !important;
        opacity: 1 !important;
        /* Override any animation hiding */
        visibility: visible !important;
        transform: none !important;
        overflow: hidden !important;
        margin-bottom: 10px !important;
        position: relative !important;
        z-index: 5 !important;
        background: #f0f0f0;
        /* Fallback color */
    }

    .gastronomy-item img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ===== INTERLEAVED LAYOUT FOR NATURE SECTION (MOBILE) ===== */
@media (max-width: 950px) {

    /* Target ONLY Nature Section */
    #sec-naturaleza .gastronomy-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Unwrap the containers to mix children */
    #sec-naturaleza .gastronomy-text-side,
    #sec-naturaleza .gastronomy-grid-side {
        display: contents !important;
    }

    /* === ORDERING === */

    /* 1. Title */
    #sec-naturaleza .gastronomy-text-side h3 {
        order: 1;
        width: 100%;
        margin-bottom: 1.5rem;
        margin-top: 1rem;
    }

    /* 2. Intro Paragraph ("Creo que los japoneses...") */
    #sec-naturaleza .gastronomy-text-side p:nth-of-type(1) {
        order: 2;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* 3. Image 1 (Fuji) */
    #sec-naturaleza .gastronomy-grid-side .gastronomy-item:nth-child(1) {
        order: 3;
        margin-bottom: 1.5rem !important;
    }

    /* 4. List (Cerezos, Momiji, Fuji...) */
    #sec-naturaleza .gastronomy-text-side ul {
        order: 4;
        width: 100%;
        margin-bottom: 2rem;
    }

    /* 5. Image 4 (Cerezos) */
    #sec-naturaleza .gastronomy-grid-side .gastronomy-item:nth-child(4) {
        order: 5;
        margin-bottom: 1.5rem !important;
    }

    /* 6. Image 6 (Momiji) */
    #sec-naturaleza .gastronomy-grid-side .gastronomy-item:nth-child(6) {
        order: 6;
        margin-bottom: 1.5rem !important;
    }

    /* 7. Paragraph 2 ("En las cercanías...") */
    #sec-naturaleza .gastronomy-text-side p:nth-of-type(2) {
        order: 7;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* 8. Image 2 (Bambú) */
    #sec-naturaleza .gastronomy-grid-side .gastronomy-item:nth-child(2) {
        order: 8;
        margin-bottom: 1.5rem !important;
    }

    /* 9. Image 3 (Jardín) */
    #sec-naturaleza .gastronomy-grid-side .gastronomy-item:nth-child(3) {
        order: 9;
        margin-bottom: 1.5rem !important;
    }

    /* 10. Paragraph 3 (Conclusion) */
    #sec-naturaleza .gastronomy-text-side p:nth-of-type(3) {
        order: 10;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* 11. Remaining Images (Ríos / OTHERS) */
    #sec-naturaleza .gastronomy-grid-side .gastronomy-item:nth-child(5) {
        order: 11;
        margin-bottom: 1.5rem !important;
    }

    /* Ensure other items fall to the end just in case */
    #sec-naturaleza .gastronomy-grid-side .gastronomy-item {
        order: 12;
    }
}

/* ===== INTERLEAVED LAYOUT FOR GASTRONOMIY (MOBILE) ===== */
@media (max-width: 950px) {

    /* Target Gastronomy Section */
    #sec-gastronomia .gastronomy-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    #sec-gastronomia .gastronomy-text-side,
    #sec-gastronomia .gastronomy-grid-side {
        display: contents !important;
    }

    /* === ORDERING GASTRONOMY === */

    /* 1. Title */
    #sec-gastronomia .gastronomy-text-side h3 {
        order: 1;
        width: 100%;
        margin-bottom: 1.5rem;
        margin-top: 1rem;
    }

    /* 2. Intro Paragraph ("La gastronomía japonesa...") */
    #sec-gastronomia .gastronomy-text-side p:nth-of-type(1) {
        order: 2;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* 3. Image 1 (Platos tradicionales) */
    #sec-gastronomia .gastronomy-grid-side .gastronomy-item:nth-child(1) {
        order: 3;
        margin-bottom: 1.5rem !important;
    }

    /* 4. Image 5 (Gyozas y Ramen - synced with text!) */
    /* Note: nth-child index counts all children. Img 5 is 5th div */
    #sec-gastronomia .gastronomy-grid-side .gastronomy-item:nth-child(5) {
        order: 4;
        margin-bottom: 1.5rem !important;
    }

    /* 5. Paragraph 2 ("Comeremos en locales...") */
    #sec-gastronomia .gastronomy-text-side p:nth-of-type(2) {
        order: 5;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* 6. Image 2 (Sushi) */
    #sec-gastronomia .gastronomy-grid-side .gastronomy-item:nth-child(2) {
        order: 6;
        margin-bottom: 1.5rem !important;
    }

    /* 7. Image 3 (Callejera) */
    #sec-gastronomia .gastronomy-grid-side .gastronomy-item:nth-child(3) {
        order: 7;
        margin-bottom: 1.5rem !important;
    }

    /* 8. Rest of images */
    #sec-gastronomia .gastronomy-grid-side .gastronomy-item {
        order: 10;
        margin-bottom: 1.5rem !important;
    }

    /* Fix Global Styles for Gastronomy Items on Mobile (ensuring visibility from previous fix applies here too if needed) */
    #sec-gastronomia .gastronomy-item {
        width: 100% !important;
        height: 300px !important;
        /* Consistent height */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #f0f0f0;
    }

    #sec-gastronomia .gastronomy-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* ===== FIX ONSEN SECTION ORDER (MOBILE) ===== */
    /* Ensure Text -> Image order for all rows */
    #sec-onsen .spirituality-row,
    #sec-onsen .spirituality-row.reverse {
        display: flex !important;
        flex-direction: column !important;
    }

    #sec-onsen .spirituality-img {
        order: 1 !important;
        /* Image AFTER text */
        width: 100% !important;
        height: 300px !important;
        /* Good height */
        max-width: 100% !important;
    }

    #sec-onsen .spirituality-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #sec-onsen .spirituality-text {
        order: 0 !important;
        /* Text FIRST */
        padding: 0 !important;
        margin-bottom: 1.5rem !important;
    }
}

/* ===== INTERLEAVED LAYOUT FOR VIBRANTE & STYLE RESET FOR OTHERS (MOBILE) ===== */
@media (max-width: 950px) {

    /* --- JAPÓN VIBRANTE --- */
    #sec-vibrante .gastronomy-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    #sec-vibrante .gastronomy-text-side,
    #sec-vibrante .gastronomy-grid-side {
        display: contents !important;
    }

    /* Ordering Vibrante */
    /* 1. Title */
    #sec-vibrante .gastronomy-text-side h3 {
        order: 1;
        width: 100%;
        margin-bottom: 1.5rem;
        margin-top: 1rem;
    }

    /* 2. Intro Paragraph */
    #sec-vibrante .gastronomy-text-side p:nth-of-type(1) {
        order: 2;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* 3. Image 1 (Noches de Neón - Wide) */
    #sec-vibrante .gastronomy-grid-side .gastronomy-item:nth-child(1) {
        order: 3;
        margin-bottom: 1.5rem !important;
    }

    /* 4. List */
    #sec-vibrante .gastronomy-text-side ul {
        order: 4;
        width: 100%;
        margin-bottom: 2rem;
    }

    /* 5. Image 2 (Shinjuku) */
    #sec-vibrante .gastronomy-grid-side .gastronomy-item:nth-child(2) {
        order: 5;
        margin-bottom: 1.5rem !important;
    }

    /* 6. Image 3 (Cultura Pop) */
    #sec-vibrante .gastronomy-grid-side .gastronomy-item:nth-child(3) {
        order: 6;
        margin-bottom: 1.5rem !important;
        height: 300px !important;
    }

    /* 7. Image 4 (Energía Urbana - Wide) */
    #sec-vibrante .gastronomy-grid-side .gastronomy-item:nth-child(4) {
        order: 7;
        margin-bottom: 1.5rem !important;
    }

    /* 8. Rest */
    #sec-vibrante .gastronomy-grid-side .gastronomy-item {
        order: 10;
        margin-bottom: 1.5rem !important;
    }

    /* Ensure Vibrante Images Visibility */
    #sec-vibrante .gastronomy-item {
        width: 100% !important;
        height: 300px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #f0f0f0;
    }

    #sec-vibrante .gastronomy-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* --- ESTILO LIMPIO PARA LITERATURA Y ESPIRITUALIDAD --- */
    /* Remove "card" styling (borders, background, shadow) on mobile */
    .spirituality-row,
    .spirituality-row.reverse {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        margin-bottom: 3rem !important;
        /* Increase spacing between sections since padding is gone */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Improve Typography since container is gone */
    .spirituality-text p {
        padding: 0 0.5rem;
        /* Small padding (gutters) */
        text-align: left;
    }

    /* Ensure Images stack correctly */
    .spirituality-img {
        width: 100% !important;
        height: 300px !important;
        margin-top: 1.5rem !important;
        order: 10 !important;
        /* Always after text on mobile */
    }

    .spirituality-text {
        order: 1 !important;
        /* Always first */
    }

    .spirituality-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px;
    }
}

/* ===== FIX PADDING/CUT-OFF FOR LITERATURE & SPIRITUALITY (MOBILE) ===== */
@media (max-width: 950px) {

    /* Standardize container padding to match other sections */
    .spirituality-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
        /* Prevent horiz scroll */
    }

    /* Reset Text Block padding since Container handles edge spacing */
    .spirituality-text {
        padding: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .spirituality-text p,
    .spirituality-text h3,
    .spirituality-text blockquote {
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ensure Images fit within the padded container (inset look) */
    .spirituality-img {
        width: 100% !important;
        margin: 1.5rem 0 !important;
        padding: 0 !important;
        height: 300px !important;
    }

    .spirituality-img img {
        border-radius: 12px !important;
        /* Match rounded look */
    }

    /* Titles should center or left align? */
    .spirituality-container h3 {
        text-align: left !important;
        /* Match other sections */
        margin-bottom: 1.5rem !important;
    }
}

/* ===== JUSTIFY TEXT ON MOBILE ===== */
@media (max-width: 950px) {

    /* Target main content text blocks */
    .gastronomy-text-side p,
    .gastronomy-text-side li,
    .spirituality-text p,
    .spirituality-text blockquote,
    .container p,
    .section-subtitle {
        text-align: justify !important;
        hyphens: auto !important;
        /* Prevents large rivers of white space */
    }

    /* Exclude specific elements that look bad justified */
    .hero-title,
    .hero-subtitle,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .nav-link,
    .footer-text,
    .footer p,
    .image-caption,
    .btn {
        text-align: center !important;
        /* Keep titles/UI centered */
    }

    .gastronomy-text-side h3,
    .spirituality-container h3 {
        text-align: left !important;
        /* Keep section titles left aligned as agreed */
    }
}

/* ===== JUSTIFY TEXT FOR INTRO SECTION (MOBILE) ===== */
@media (max-width: 950px) {

    /* Add Zen/Intro cards text to justification */
    .zen-card p,
    .zen-text-lead,
    .zen-card-content p,
    .intro-paragraph,
    /* In case used in JS */
    .container-zen p {
        text-align: justify !important;
        hyphens: auto !important;
    }
}

/* ===== ITINERARY ACTIVITY ICONS & BADGES ===== */
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon-wrapper {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 149, 86, 0.1);
    color: var(--color-primary);
}

.activity-icon-wrapper svg {
    width: 20px;
    height: 20px;
}

/* Specific icon colors if needed */
.activity-icon-wrapper.transport {
    color: #3b82f6;
    background: #eff6ff;
}

.activity-icon-wrapper.food {
    color: #eab308;
    background: #fef9c3;
}

.activity-icon-wrapper.temple {
    color: #ef4444;
    background: #fee2e2;
}

.activity-icon-wrapper.walking {
    color: #10b981;
    background: #d1fae5;
}

.activity-icon-wrapper.hotel {
    color: #6366f1;
    background: #e0e7ff;
}

.activity-text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

.badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.included {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.badge.free {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

/* Ensure list reset */
.accordion-content ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ===== MODERN INCLUDES SECTION ===== */
.inclusiones-section.modern-layout {
    background: #fdfdfd;
    padding: 5rem 0;
}

.inclusiones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 3rem;
}

@media (max-width: 850px) {
    .inclusiones-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.inclusion-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.inclusion-card:hover {
    transform: translateY(-5px);
}

/* Header Styles */
.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.inclusion-card.includes .card-header {
    border-bottom-color: var(--color-primary);
}

.inclusion-card.excludes .card-header {
    border-bottom-color: #ef4444;
}

.inclusion-card h3 {
    font-size: 1.8rem;
    margin: 0;
    font-family: var(--font-display);
}

.inclusion-card.includes h3 {
    color: var(--color-primary);
}

.inclusion-card.excludes h3 {
    color: var(--color-accent);
    /* Or red-ish */
}

/* Icons in Header */
.icon-check,
.icon-cross {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
}

.icon-check {
    background: var(--color-primary);
}

.icon-cross {
    background: var(--color-accent);
}

/* Lists */
.modern-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modern-list>li {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-dark);
    position: relative;
    padding-left: 0;
}

.modern-list li strong {
    color: #333;
    font-weight: 700;
}

/* Sub-lists */
.sub-list {
    list-style: none;
    padding-left: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-left: 2px solid #eee;
}

.sub-list li {
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
    color: #555;
}

.sub-list li::before {
    content: "•";
    color: var(--color-primary);
    margin-right: 0.5rem;
}

/* Notes */
.note {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}