/* Estilos para la página en construcción */
.en-construccion-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-image: url('/images/fondo-contruccion.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 176px 2rem 2rem 2rem;
}

/* Capa degradada para fondo-construccion2.png encima del fondo base */
.en-construccion-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/fondo-construccion2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15; /* Muy degradado, casi transparente */
    z-index: 1;
}

.en-construccion-text {
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.2;
    color: #FF4E00;
    text-align: center;
    margin: 0 0 16px 0;
}

.en-construccion-subtext {
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    color: #151515;
    text-align: center;
    margin: 0 0 16px 0;
    max-width: 712px;
}

.en-construccion-subtext strong {
    font-weight: 700; /* Bold */
}

.en-construccion-btn {
    position: relative;
    z-index: 2;
    background-color: #FF4E00 !important;
    border: none !important;
    color: #FFFFFF !important;
    padding: 16px 32px !important;
    border-radius: 100px !important;
    box-shadow: 0px 126px 35px 0px rgba(0, 0, 0, 0),
        0px 81px 32px 0px rgba(0, 0, 0, 0.01),
        0px 45px 27px 0px rgba(0, 0, 0, 0.05),
        0px 20px 20px 0px rgba(0, 0, 0, 0.09),
        0px 5px 11px 0px rgba(0, 0, 0, 0.1),
        0px 0px 0px 0px rgba(0, 0, 0, 0.1) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
    margin: 0 0 32px 0;
}

.en-construccion-btn:hover,
.en-construccion-btn:focus {
    background-color: var(--light-orange-color) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.en-construccion-btn:active {
    background-color: var(--light-orange-color) !important;
    box-shadow: 0px 126px 35px 0px rgba(0, 0, 0, 0),
        0px 81px 32px 0px rgba(0, 0, 0, 0),
        0px 45px 27px 0px rgba(0, 0, 0, 0),
        0px 20px 20px 0px rgba(0, 0, 0, 0),
        0px 5px 11px 0px rgba(0, 0, 0, 0.1),
        0px 0px 0px 0px rgba(0, 0, 0, 0.1) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.en-construccion-image {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* La sección de construcción (navbar + hero) ocupa el viewport completo en
   desktop, sin necesidad de scroll para verla entera. El footer queda debajo
   y se sigue viendo haciendo scroll normalmente. */
@media (min-width: 992px) {
    .en-construccion-section {
        min-height: 100vh;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .en-construccion-text {
        font-size: 24px;
    }
    
    .en-construccion-subtext {
        font-size: 18px;
    }
    
    .en-construccion-text {
        margin-bottom: 0.15rem;
    }
    
    .en-construccion-subtext {
        margin-bottom: 1rem;
    }
    
    .en-construccion-btn {
        margin-bottom: 1rem;
    }
}