/* ==========================================================================
   ESTILOS DEL HERO HOME - ASIMÉTRICO, RESPONSIVE Y MULTI-SLIDER (COMPLETO)
   ========================================================================== */

.hero-madrid {
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Franja blanca de la izquierda */
.hero-left-spacer {
    width: 90px;
    min-width: 90px;
    background-color: #ffffff;
    height: 100%;
    z-index: 5;
}

/* Contenedor del banner principal */
.hero-main-banner {
    flex-grow: 1;
    height: 100%;
    position: relative;
    background-color: #2c2825; 
}

/* CONTENEDOR DE TODOS LOS SLIDES */
.hero-slides-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* SLIDE INDIVIDUAL */
.hero-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
    box-sizing: border-box;
}

/* Slide en estado activo */
.hero-slide-item.active {
    opacity: 1;
    visibility: visible;
}

/* Textos Centrales del Hero */
.hero-central-text {
    margin-top: auto; 
    margin-bottom: 60px;
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 110px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-title {
    font-family: 'Exo', sans-serif;
    font-weight: 300;
    font-size: 3.8rem;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 15px 0;
    text-transform: none;
}

.hero-subtitle {
    font-family: 'Exo', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #ffffff;
    margin: 0 0 25px 0;
}

/* Botón Conoce más */
.hero-action-conoce {
    margin-bottom: 25px;
    display: block;
    z-index: 10;
}

.hero-btn-conoce-mas {
    display: inline-block;
    border: 1px solid #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Exo', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 12px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.hero-btn-conoce-mas:hover {
    background-color: #ffffff;
    color: #2C2825;
    transform: translateY(-2px);
}

/* Flechas de navegación */
.hero-nav-arrows {
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 10;
}

.arrow-item {
    width: 16px; 
    height: 16px;
    background-image: url('../images/arrow-normal.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    transition: background-image 0.2s ease, transform 0.2s ease;
}

.arrow-item.active {
    background-image: url('../images/arrow-active.png');
}

.arrow-item:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   BARRA DE INFORMACIÓN INFERIOR (DESKTOP)
   ========================================================================== */
.hero-data-bar {
    width: 100%;
    display: grid;
    grid-template-columns: 300px 1fr;
    height: 110px;
    background-color: transparent;
    z-index: 3;
}

.data-box {
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Caja Proyecto */
.box-project {
    justify-content: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 10px 20px;
}

.project-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.project-logo-wrapper img {
    max-height: 55px !important;
    width: auto !important;
    display: block !important;
}

/* Caja de Especificaciones Técnicas (Desktop) */
.box-specs {
    background-color: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 0 140px 0 60px; /* 140px libres a la derecha para el botón flotante en desktop */
    display: flex;
    justify-content: space-between; 
    align-items: center;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* Distribución equitativa (50% / 50%) */
.spec-location,
.spec-details-stack {
    flex: 1; 
    display: flex;
    align-items: center;
}

/* Bloque 1: Ubicación */
.spec-location {
    justify-content: flex-start;
    gap: 18px;
}

.location-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.address-line {
    font-family: 'Exo', sans-serif;
    font-weight: 400;
    font-size: 1.15rem;
    color: #2C2825;
    margin: 0;
}

.status-building {
    color: #8C1527;
    font-family: 'Exo', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    margin-top: 4px;
    text-transform: uppercase;
}

/* Bloque 2: Dormitorios y Metraje */
.spec-details-stack {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px; 
}

.sub-detail-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.spec-text {
    font-family: 'Exo', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #2C2825;
    margin: 0;
    white-space: nowrap;
}

/* Control de iconos */
.hero-png-icon {
    width: 32px;
    height: auto;
    display: block;
}

.hero-png-icon-small {
    width: 26px;
    height: auto;
    display: block;
}

/* ==========================================================================
   AJUSTES FINOS MÓVIL RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 768px) {
    .hero-madrid {
        height: 100dvh !important;
        min-height: 100dvh !important;
        flex-direction: column;
    }

    .hero-left-spacer {
        display: none;
    }

    .hero-main-banner {
        width: 100%;
        /* El banner toma la pantalla completa menos la caja del logo (80px) y la de datos (110px) */
        height: calc(100% - 190px);
        min-height: auto;
    }

    .hero-slide-item {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100% !important;
        /* Permitimos centrar el contenedor de textos verticalmente dentro del slide */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* 1. TEXTO CENTRAL: CENTRADO VERTICAL ABSOLUTO, MÁS GAP Y PADDING AJUSTADO */
    .hero-central-text {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important; /* Baja el contenido de forma fluida */
        align-items: flex-start !important;
        padding-top: 40px !important; 
        padding-bottom: 35px !important; /* Espacio de respiración con la barra inferior */
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        gap: 16px !important; /* Mantiene el espaciado cómodo entre elementos */
    }

    /* 2. TEXTOS UN POCO MÁS GRANDES */
    .hero-title {
        font-size: 2.2rem !important; /* Aumentado de 1.85rem a 2.2rem */
        line-height: 1.18 !important;
        margin: 0 !important;
    }

    .hero-subtitle {
        font-size: 1.25rem !important; /* Aumentado de 1.1rem a 1.25rem */
        line-height: 1.3 !important;
        margin: 0 !important;
    }
    
    .hero-action-conoce {
        margin: 0 !important; /* El gap de .hero-central-text se encarga de la distancia */
    }

    .hero-btn-conoce-mas {
        font-size: 0.88rem !important;
        padding: 9px 24px !important; 
    }

    .hero-nav-arrows {
        margin-top: 4px !important;
    }

    /* Barra de datos fluida en móvil */
    .hero-data-bar {
        grid-template-columns: 1fr;
        height: auto;
        position: relative;
        z-index: 12;
    }

    /* CAJA PROYECTO: LOGO CENTRADO ABSOLUTO */
    .box-project {
        width: 100%;
        height: 80px; 
        padding: 10px 20px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
    }

    .project-logo-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    .project-logo-wrapper img {
        max-height: 50px !important;
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* CAJA ESPECIFICACIONES (ALTO FIJO 110PX Y 110PX A LA DERECHA PARA BOTÓN) */
    .box-specs {
        width: 100% !important;
        height: 110px !important; 
        min-height: 110px !important;
        max-height: 110px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 20px !important;
        padding-right: 110px !important; 
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    .spec-location, 
    .spec-details-stack {
        width: 100% !important;
        flex: none !important; 
        padding-left: 0 !important;
    }

    /* BLOQUE 1: UBICACIÓN */
    .spec-location {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .location-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .address-line {
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        margin: 0;
        word-break: break-word;
    }

    .status-building {
        font-size: 0.68rem !important; 
        margin-top: 1px;
        letter-spacing: 0.6px;
    }

    /* BLOQUE 2: DORMITORIOS Y METRAJE APILADOS */
    .spec-details-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        align-items: flex-start !important;
    }

    .sub-detail-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .spec-text {
        font-size: 0.75rem !important;
        line-height: 1;
        white-space: nowrap;
    }

    /* ICONOS COMPACTOS */
    .hero-png-icon {
        width: 16px !important;
    }

    .hero-png-icon-small {
        width: 14px !important;
    }
}