@import url(./variables.css
);

/* Variables para facilitar el mantenimiento */
:root {
    --bg-color: #1a1a1a;
    --color-primario-blanco: #f5f5f5;
    --green-color: #4CAF50;
    /* Un verde vibrante similar */
    --input-bg: #2b2b2b;
    --input-border: #444;
}

body main .content-mapa-secons {
    display: none !important;
}

/* Contenedor Principal de la Sección */
.investment-section {
    margin-top: 60px;
    background-color: var(--color-primario-negro);

}

/* Ajuste del contenedor de Bootstrap para centrar el contenido y dar margen */
.custom-container {
    max-width: 1200px;
}

/* --- Encabezado y Títulos --- */

.header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* margin-bottom: 40px;
    padding-left: 15px; */
    /* Pequeño ajuste para móviles */
}

.header-text {
    font-size: 3rem;
    /* Tamaño grande para desktop */
    font-weight: 200;
    line-height: 0.8;
    margin: 0;
    color: var(--color-primario-blanco);
    letter-spacing: 1px;
}

.header-text-primario {
    font-weight: 600;
    margin-bottom: 20px;
}

.green-text-segundario {
    color: var(--color-secundario-verde-claro);
}

.header-text-segundario {
    font-weight: 200 !important;
    font-size: 1.4rem;
    margin-top: 15px;
}

.green-text {
    color: var(--color-secundario-verde-claro);
    padding: 0px !important;
    font-size: 3rem;
}

/* Barra degradada */
.gradient-bar-container {
    /* width: 100%; */
    /* Ocupa el ancho para el layout */
    display: flex;
    justify-content: flex-start;
    /* Alinea la barra con el texto */
    margin-top: 10px;
}

.gradient-bar-container {
    padding: 0px !important;
}

.gradient-bar {
    height: 15px;
    width: 400px;
    /* Ancho de la barra */
    /* Degradado de verde a negro/transparente */
    background: linear-gradient(to right, var(--color-secundario-verde-claro) 0%, #1a1a1a 90%, transparent 100%);
}

.content-icons a img {
    width: 32px;
    height: 30px;
}

.conten-map {
    height: 43% !important;
    position: relative;
    width: 405px;
    /* compensar navbar fija */
    background-image: url('../svg/cont_box map.svg');
    background-size: contain;
    background-position: 115px;
    background-repeat: no-repeat;
    /* background-size: 13px; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px 0px 0px 0px;
    /* Quita border-image y border-color aquí */
}

.conten-map .map-header {
    width: 23rem;
    height: 28rem;
    padding-top: 4.3rem;
}

/* 
.conten-map::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 5px; 
    border-radius: 0px 80px 20px 0px;
  
    background: linear-gradient(
        to right,
        #131313  50%,
        var(--color-secundario-verde-claro) 50% 100%
    );
    z-index: -1;
    box-sizing: border-box;
} */
/* .map-header{
     
} */


/* --- Formulario --- */

.form-column {
    background-color: hsl(0, 0%, 20%);
    /* Fondo del formulario ligeramente más claro que el body */
    padding: 15px 20px 15px 20px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    /* Sombra sutil */
}

.form-group-custom {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.form-label-custom {
    width: 100px;
    color: var(--color-primario-blanco);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
    /* Como en la imagen, aunque sin separación de la caja */
}

.form-control-custom,
.form-select-custom,
.textarea-custom {
    background-color: #242323;
    color: var(--color-primario-blanco);
    border: none;
    padding: 12px 15px;
    border-radius: 15px;
    /* Bordes rectos */
    transition: border-color 0.3s;
    box-shadow: none;
    /* Eliminar el enfoque por defecto de Bootstrap */
    width: 100%;
    appearance: none;
    /* Para select en algunos navegadores */
}

.form-control-custom::placeholder {
    color: #888;
    font-style: italic;
    font-size: 0.9rem;
}


.form-select-custom {
    /* Estilo para la flecha del select */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f5f5f5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.65em 0.65em;
    padding-right: 2.5rem;
}

.form-select-custom option[disabled] {
    color: #888;
}


/* Botón de Envío */
.btn-send-message {
    display: block;
    width: 55%;
    /* Ajuste a la imagen */
    max-width: 300px;
    /* Limitar el ancho como en la imagen */
    margin-top: 20px;
    background-color: transparent;
    padding: 5px 10px 5px 10px;
    color: var(--color-primario-blanco);
    border: 2px solid var(--color-primario-blanco);
    border-radius: 10px;
    /* Bordes redondeados */
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s, border-color 0.3s;
}

.btn-send-message:hover {
    box-shadow: 0 0 20px var(--color-secundario-verde-claro);
    background-color: var(--color-secundario-verde-claro);
    border-color: var(--color-secundario-verde-claro);
    color: #fff;
}

/* --- Columna del Mapa y Dirección --- */

.map-container {
    height: 286px;
    /* Altura del mapa */
    width: 100%;
    /* border: 5px solid var(--green-color);  Borde verde como en la imagen */
    box-sizing: border-box;
    /* Simulación de Google Maps */
    background-color: #f0f0f0;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    /* Bordes rectos */
}

/* Estilo para el placeholder del mapa (reemplazar con iframe real) */
.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
}

.map-placeholder iframe {
    width: 100% !important;
    height: 100%;
}

.map-text {
    color: #333;
    font-size: 1.5rem;
    text-align: center;
    position: absolute;
    /* Para que no se vea el texto en un mapa real */
    opacity: 0;
}


.address-text {
    font-size: 1.2rem;
    color: var(--color-primario-blanco);
    line-height: 1.6;
    margin-top: 15px;
}

/* --- Iconos Sociales --- */

.social-icons {
    /* Mover a la esquina inferior derecha en desktop */
    margin-top: 30px;
    gap: 15px;
}

.content-icons {
    display: flex;
    gap: 20px;
    background-color: var(--input-bg);
    padding: 5px;
    border-radius: 12px;
    position: relative;
    left: 23px;
}

.social-icon-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: var(--color-primario-blanco);
    font-size: 1.2rem;
    text-decoration: none;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.social-icon-link i {
    font-size: 2.5rem;
}

.contenedor-tenefono h4 {
    color: var(--color-primario-blanco);
}

.hipervinculo-numero svg {
    width: 30px;
    height: 30px;
    position: relative;
    top: -7px;
}

.hipervinculo-numero {
    height: 100%;
    align-items: end;
    display: flex;
}

.numero {
    background-color: #242323;
    padding: 5px 20px 5px 20px;
    color: var(--color-primario-blanco);
    font-size: 1.5rem;
    border-radius: 10px;
}

body main .social2 {
    display: none !important;
}

/* .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: var(--green-color);
}

.select2-container{
    width: 354px !important;
  

}

.select2-container--default .select2-selection--single {
         background-color: #242323;
    color: var(--color-primario-blanco);
    border: none;
    padding: 12px 15px;
    border-radius: 15px;
    transition: border-color 0.3s;
    box-shadow: none;
height: 49px;
    appearance: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    left: 0%; 
    top: 90%;
} */

/* Puedes probar también a cambiar el color del select cuando está en foco (al hacer clic) */
/* .custom-select-hover:focus {
    border-color: #dc3545;
} */



/* Estilos básicos para ocultar la lista */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%; /* O el ancho que desees */
}

/* Estilo del botón/trigger (simula el input de Bootstrap) */
.custom-select-trigger {
    height: 54px;
    background-color: #242323;
    border: none; /* Color de borde de Bootstrap */
    padding: 0.375rem 2.25rem 0.375rem 0.75rem; /* Padding de Bootstrap form-select */
    border-radius: 15px; /* Radio de borde de Bootstrap */
    cursor: pointer;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilo del menú desplegable (lista de opciones) */
.custom-options {
    position: absolute;
    display: none; /* Inicialmente oculto */
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0.125rem 0 0 0;
    padding: 0;
    list-style: none;
    background-color: #242323;
    color: var(--color-primario-blanco);
    border: none;
    border-radius: 0.375rem;
}

/* Estilo de cada opción */
.custom-options .option {
    padding: 0.375rem 1.5rem;
    cursor: pointer;
}

.custom-options .option:nth-child(1){
    border-radius: 0.375rem 0.375rem 0 0;
}


/* 🎯 ¡ESTE ES EL ESTILO QUE NECESITAS CAMBIAR! 🎯 */
.custom-options .option:hover {
    background-color: var(--color-secundario-verde-claro); /* 🟢 ¡Tu Color Deseado, ej: un verde! */
    color: #fff;
}

.custom-options .option.selected {
    background-color: var(--color-secundario-verde-claro); /* 🟢 ¡Tu Color Deseado, ej: un verde! */
    color: #fff;
}

@media (min-width: 1400px) {
    .map-column {
        padding-left: 70px;
        /* Espacio entre el formulario y el mapa */
    }

}

/* Ajuste Responsivo para la columna del mapa */
@media (min-width: 992px) {
    .conten-map {
        background-position: right;
        width: 100%;
    }
}

@media (max-width: 992px) {
        .header-text {
        font-size: 1.7rem;
        /* Reducir en móvil */
    }

    .content-icons{
        gap: 35px;
    }

    .gradient-bar {
        display: none;
    }

    .columna-datos{
        margin: 0px !important;
    }
    .form-label-custom {
        font-size: 0.9rem !important;
    }

    .btn-send-message {
        font-size: 1.3rem !important;
        width: 80%;
    }

    .conten-text-ubicacion h4 {
        color: var(--color-primario-blanco);
        font-size: 2.5rem;
        font-weight: 600;
    }

    .social-text-content h2 {
        font-size: 1.13rem;
        font-weight: 600;
        color: var(--color-primario-blanco);
    }

    .social2 .row div {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content-icons {
        gap: 50px;
    }

    .social2 .row {
        padding: 10px;
        padding-right: 0px;
    }

    .social-icon-link {
        width: 18px !important;
        height: 18px !important;
    }

    body main .social1 {
        display: none !important;
    }

    body main .social2 {
        display: flex !important;
    }

    body main .content-mapa-primary {
        display: none !important;
    }

    body main .content-mapa-secons {
        display: flex !important;
    }

    .form-group-custom {
        /* flex-direction: column; */
        align-items: flex-start;
    }

    .form-label-custom {
        margin-bottom: 0px;
    }

    .form-column {
        width: 100%;
    }

    .conten-from {
        width: 100%;
    }


    .conten-from {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .comten-contacto {
        flex-direction: column;
        align-items: flex-start;
    }

    .content-map {
        width: 100%;
    }

    .content-mapa-secons {
        background-color: var(--input-bg);
        border-radius: 40px 40px 0px 0px;
        margin-top: 20px;
    }

    .content-icons a img {
        width: 40px;
        height: 40px;
    }

    .investment-section {
        margin-top: 20px;
    }

    .conten-map .map-header{
        width: auto;
    }

     .conten-map {
        background-position: center;
        width: 100%;
    }

    .conten-map .map-header{
        height: auto;
        padding-top: 0% ;
    }

    .address-text{
        font-size: 0.8rem;
    }

    .header-content{
        margin-bottom: 22px !important;
    }
    .header-text-segundario {
        text-align: center;
        font-size: 1.1rem;
        padding: 0px 1px 0px 1px;
    }

    
    .header-text {
        font-size: 1.4rem;
        margin-top: 100px;
        text-align: center;
        /* Reducir en móvil */
    }

    .green-text {
        color: var(--color-primario-blanco);
        font-size: 2.5rem;
        font-weight: 700;
    }
}

@media (max-width:490px) {
    

    
    .map-container {
        width: 135%;
    }


    .conten-map {
        background-position: 70px;
    }

    .map-container {
        height: 259px;
        width: 90%;
    }

    .content-icons{
        gap: 40px;
    }

    .content-icons a img {
        width: 39px;
        height: 39px;
    }
    .social2 .row {
        padding-right: 30px;
    }

     .conten-map .map-header{
        width: 20rem;
    }


}

@media (max-width: 390px) {

    .social-icon-link {
        width: 10px !important;
        height: 10px !important;
    }

    .conten-map {
        background-position: 47px;
    }

    .map-container {
        height: 259px;
        width: 87%;
    }
}