/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
    --font-title: 'Michroma', sans-serif;       
    --font-body: 'Cormorant Garamond', serif;   
    
    --warm-overlay: rgba(255,220,150,0.3);
    --bg-green-deep: #011f17;
    --text-mint-neon: #4fffa8; 
    --text-sage: #efede7;      
}

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

html, body { 
    height: 100%; 
    background-color: #000; 
    overflow-x: hidden; 
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
}

/* =========================================
   SECCIÓN 1: HERO
   ========================================= */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #000; 
}

.hero__video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 150%; 
    min-height: 150%; 
    transform: translate(-50%, -50%) scale(1.18) rotate(4deg);
    object-fit: cover;
    filter: brightness(1.15) saturate(1.4) sepia(.2);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--warm-overlay);
    mix-blend-mode: soft-light;
    z-index: 1;
}

.hero__content {
    position: absolute;
    top: 2%; 
    right: 2%;
    width: min(100%, 1200px);
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    z-index: 2;
}

.hero__title-img {
    width: clamp(350px, 62vw, 950px); 
    height: auto;
    z-index: 10;
    max-width: 100%; 
}

/* =========================================
   SECCIÓN 2: BIENVENIDA
   ========================================= */
.welcome {
    display: flex;
    width: 100%;
    position: relative;
    background-color: var(--bg-green-deep);
    align-items: stretch; 
}

.welcome__left {
    width: 50%;
    background-color: var(--bg-green-deep);
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    padding: 2rem 2rem 1.5rem 2rem; 
    position: relative;
    z-index: 20; 
}

.welcome__content {
    text-align: center; 
    max-width: 90%; 
}

.welcome__title {
    font-family: var(--font-title); 
    font-weight: 400; 
    font-size: clamp(2rem, 3.8vw, 4.5rem); 
    color: var(--text-mint-neon);
    line-height: 1.1;
    margin-bottom: 2rem; 
    white-space: nowrap;
    width: 160%; 
    display: block;
    text-align: left; 
    position: relative;
    z-index: 30; 
}

.welcome__content p {
    font-family: var(--font-body);
    color: var(--text-mint-neon); 
    font-size: 1.5rem; 
    font-weight: 400; 
    margin-bottom: 1rem; 
    line-height: 1.4;
    max-width: 600px; 
    margin: 0 auto 1rem auto; 
}

.welcome__right {
    width: 50%;
    position: relative; 
    overflow: hidden;   
    z-index: 10;
}

.welcome__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transform: scale(1.3); 
    display: block;
}

/* =========================================
   SECCIÓN 3: GALERÍA Y DETALLES
   ========================================= */
.gallery-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(90deg, #ccfcdb 0%, #bce0fd 100%);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    padding: 4rem 2rem;
    color: #02251c;
}

.gallery__title {
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 3vw, 3.5rem);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 3rem;
    line-height: 1.3;
}

.gallery__container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; 
}

/* --- FILA SUPERIOR --- */
.gallery__top-row {
    display: flex;
    justify-content: flex-start; 
    gap: 0.5rem;
    height: 700px; 
    align-items: stretch;
}

/* Col 1: Fotos Izquierda */
.col-photos-left {
    width: 28%; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    gap: 1.5rem;
}
.photo-wrapper {
    width: 100%;
    height: 300px; 
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.photo-wrapper img:hover { transform: scale(1.05); }

/* Col 2: Imagen Central (ESTE ES EL CAMBIO) */
.col-center-content {
    width: 37%;
    margin-left: 1.75rem;
    
    /* Aumentamos el margen superior para bajarla */
    margin-top: 8rem; 
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    gap: 2rem;
}
.center-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    max-height: 350px; 
}
.center-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.center-text-info {
    text-align: center;
    font-family: var(--font-body);
}
.capacity {
    font-family: var(--font-title);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.beds-info h3 {
    font-size: 1.8rem;
    font-style: italic;
    margin-bottom: 0.2rem;
}
.beds-info p {
    font-size: 1.4rem;
    margin: 0;
}

/* Col 3: Iconos Derecha */
.col-icons-right {
    width: 30%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 1rem 0;
    margin-left: auto;
}
.social-btn {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.social-btn:hover { transform: scale(1.1); }

/* Colores */
.whatsapp { background-color: #25D366; }
.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.airbnb { background-color: #FF5A5F; }
.homeexchange { background-color: #FA9E1C; }


/* --- FILA INFERIOR --- */
.gallery__bottom-row {
    display: flex;
    width: 100%;
    height: 500px; 
    gap: 2rem;
    align-items: center;
    justify-content: space-between; 
    margin-top: 0; 
}

/* Texto Izquierda */
.bottom-text-left {
    width: 60%; 
    font-family: var(--font-title);
    font-size: 1.3rem; 
    line-height: 1.8;
    text-align: left; 
    padding-left: 8rem;
    padding-right: 2rem;
}

/* Video Derecha */
.bottom-video-vertical {
    width: 30%; 
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-left: auto; 
    transform: translateX(-4rem); 
}

.bottom-video-vertical video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* RESPONSIVE */
@media (max-width: 900px) {
    /* Welcome */
    .welcome { flex-direction: column; }
    .welcome__left, .welcome__right { width: 100%; }
    .welcome__title { white-space: normal; width: 100%; font-size: 2.2rem; text-align: center; }
    .welcome__right { height: 50vh; }
    
    /* Gallery Top */
    .gallery__top-row { flex-direction: column; height: auto; align-items: center; gap: 2rem; justify-content: flex-start; } 
    .col-photos-left { width: 100%; flex-direction: row; gap: 1rem; }
    .photo-wrapper { max-height: 250px; }
    .col-center-content { width: 100%; margin-left: 0; margin-top: 0; } 
    .center-img-wrapper { aspect-ratio: auto; max-height: 300px; }
    .col-icons-right { width: 100%; flex-direction: row; justify-content: center; gap: 1rem; margin-top: 1rem; margin-left: 0; }
    .social-btn { width: 70px; height: 70px; font-size: 2.5rem; }
    
    /* Gallery Bottom */
    .gallery__bottom-row { flex-direction: column; height: auto; margin-top: 0; }
    .bottom-text-left { 
        width: 100%; 
        text-align: center; 
        padding: 0 1rem; 
        font-size: 1.1rem; 
        margin-bottom: 2rem; 
    }
    .bottom-video-vertical { 
        width: 100%; 
        height: 500px; 
        transform: none; 
    }
}

/* Ajuste general */
.icon-img {
    width: 140%;
    height: 140%;
    object-fit: contain;
    display: block;
    margin-left: -10%;  /* empuja la imagen a la izquierda */
}

/* Ajustes individuales */
.airbnb img.icon-img {
    width: 163%;
    height: 163%;
    margin-left: -10%;  /* centro perfecto en Airbnb */
}

.homeexchange img.icon-img {
    width: 160%;
    height: 160%;
    margin-left: -13%;  /* centro perfecto en HomeExchange */
}