/* --- SECCIÓN EXPERIENCIA (#experiencia) --- */
:root {

        --color-azul: #5283A8;

        --color-magenta: #C34670;

        --font-t: 'Lilita One', cursive;

        --font-b: 'Oxygen', sans-serif;

    }



    .experience-section {

        max-width: 1000px;

        margin: 80px auto;

        padding: 0 20px;

        font-family: var(--font-b);

    }



    .exp-header {

        text-align: center;

        margin-bottom: 50px;

    }



    .exp-title {

        font-family: var(--font-t);

        color: var(--color-azul);

        font-size: 42px;

        margin-bottom: 15px;

    }



    .exp-subtitle {

        color: #666;

        font-size: 18px;

        max-width: 700px;

        margin: 0 auto;

    }



    /* --- ESTILOS DE GALERÍA SWIPE --- */

    .gallery-swipe-wrapper {

        position: relative;

        width: 100%;

        height: 100%;

        overflow: hidden;

    }



    .gallery-swipe {

        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        scroll-behavior: smooth;

        height: 100%;

        scrollbar-width: none;

    }

    .gallery-swipe::-webkit-scrollbar { display: none; }



    .gallery-item {

        flex: 0 0 100%;

        scroll-snap-align: center;

        width: 100%;

        height: 100%;

    }



    .gallery-item img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    .nav-arrow {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        background: rgba(255, 255, 255, 0.8);

        color: var(--color-azul);

        border: none;

        width: 32px;

        height: 32px;

        border-radius: 50%;

        font-size: 18px;

        cursor: pointer;

        z-index: 10;

        display: flex;

        align-items: center;

        justify-content: center;

        box-shadow: 0 2px 5px rgba(0,0,0,0.2);

        opacity: 0.7;

        transition: opacity 0.2s;

    }

    .nav-arrow:hover { opacity: 1; color: var(--color-magenta); }

    .nav-prev { left: 10px; }

    .nav-next { right: 10px; }



    /* --- GRILLA 2x2 --- */

    .spaces-grid {

        display: grid;

        grid-template-columns: 1fr 1fr; 

        gap: 30px; 

        margin-bottom: 60px;

    }



    .space-card {

        background: #fff;

        border-radius: 15px;

        overflow: hidden;

        box-shadow: 0 10px 20px rgba(0,0,0,0.05);

        transition: transform 0.3s;

        border: 1px solid #eee;

    }



    .space-card:hover {

        transform: translateY(-5px);

    }



    .space-img-wrapper {

        height: 220px;

        position: relative;

    }



    .space-info {

        padding: 25px;

        text-align: center;

    }



    .space-name {

        font-family: var(--font-t);

        color: var(--color-magenta);

        font-size: 22px;

        margin-bottom: 10px;

    }



    .space-desc {

        font-size: 15px;

        color: #555;

        line-height: 1.5;

    }



    /* --- BLOQUE DESAYUNO --- */

    .breakfast-box {

        background-color: #f9fcff;

        border: 2px solid #e0efff;

        border-radius: 20px;

        overflow: hidden;

        display: grid;

        grid-template-columns: 1.2fr 1fr; 

        align-items: stretch;

    }



    .breakfast-gallery-col {

        height: 100%;

        min-height: 400px;

        position: relative;

    }



    .breakfast-info-col {

        padding: 40px;

        display: flex;

        flex-direction: column;

        justify-content: center;

    }



    .bf-badge {

        background: var(--color-azul);

        color: white;

        padding: 5px 15px;

        border-radius: 50px;

        font-size: 12px;

        font-weight: bold;

        text-transform: uppercase;

        display: inline-block;

        margin-bottom: 15px;

        align-self: flex-start;

    }



    .bf-title {

        font-family: var(--font-t);

        color: var(--color-azul);

        font-size: 32px;

        margin-bottom: 20px;

    }



    .bf-details {

        list-style: none;

        padding: 0;

        margin: 0;

    }



    .bf-item {

        margin-bottom: 15px;

        display: flex;

        align-items: center;

        gap: 15px;

        font-size: 15px;

        color: #444;

    }



    .bf-icon-img {

        width: 60px;

        height: 60px;

        object-fit: contain;

        flex-shrink: 0;

    }

    

    .bf-note {

        margin-top: 20px;

        font-size: 13px;

        color: #777;

        font-style: italic;

        border-top: 1px solid #eee;

        padding-top: 15px;

    }



    /* RESPONSIVE */

    @media (max-width: 768px) {

        .spaces-grid {

            grid-template-columns: 1fr;

        }

        .breakfast-box { grid-template-columns: 1fr; }

        .breakfast-gallery-col { height: 300px; min-height: auto; }

        .breakfast-info-col { padding: 25px; }

    }