@font-face {
    font-family:Montserrat-Bold;
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
    font-family:Montserrat-Regular;
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}
*
{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
:root
{
    
    /*colores principales de el negocio*/
    --color_plusvalia_azul:#108c7d;
    --color_aenidades_rosa: #dc107f;
    --color_comercial_morado: #97257f;
    --color_ubicacion_azul_fuerte: #3c5393;
    --color_inversion_naranja: #f09130;
    --color_textos:rgb(50,50,50);
    
}
body
{
    font-family:"Montserrat-Regular";
    /* overflow: hidden !important; */
    
}




/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*contenedor primera parte*/
/* .contenedor_primera_parte {
    width: 100%;
    aspect-ratio: 1920 / 1080;
    min-height: 600px;
    background-image: url(../img/img1-2.png); 
    background-position: center; 
    background-size: cover; 
    background-color: #8d7b73; 
    background-repeat: no-repeat;
    position: relative; 
    display: flex;
    align-items: center; 
    justify-content: center;
} */
 /*contenedor primera parte*/
.contenedor_primera_parte {
    width: 100%;
    
    /* 1. Quitamos la altura forzada de la pantalla */
    /* height: 100vh; */
    
    /* 2. Le damos la proporción EXACTA de tu foto. 
       ¡IMPORTANTE! Cambia "1920 / 1080" por el ancho y alto real en pixeles de img1-2.png */
    aspect-ratio: 1920 / 1080; 
    
    /* 3. Para proteger el diseño por si la pantalla se hace muy pequeña, aseguramos una altura mínima */
    min-height: 600px; 
    
    background-image: url(../img/img1-2.png); 
    background-position: center; 
    
    /* 4. Ahora usamos cover. Como la caja tiene la misma proporción que la foto, 
       encajará como anillo al dedo sin recortar NADA. */
    background-size: cover; 
    
    background-color: #8d7b73; 
    background-repeat: no-repeat;
    position: relative; 
    display: flex;
    align-items: center; 
    justify-content: center;
}


.contenedor_primera_parte img
{
    width: 200px;
    margin-top: 80px;
    margin-bottom: 20px;
}
.cont_cuadro_colores
{
    width: 100%;
    height: 400px;
    /*border: 1px solid red;*/
    display: flex;
    align-items: center;
    justify-content:center;
}
.cuadro_interno
{
    width: 750px;
    height: 300px;
    /*border: 1px solid green;*/
    background-image: url(../img/cuadro_colores.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items:flex-start;
    justify-content: center;
    flex-direction: column;
}
.cont_h1
{
    width: 100%;
    height: 60%;
    /*border: 1px solid red;*/
    padding-left: 40px;
    display: flex;
    align-items: center;
    justify-content:flex-start;
}
.cont_h2
{
    width: 100%;
    height: 40%;
    /*border: 1px solid green;*/
    padding-left: 40px;
    display: flex;
    align-items: center;
    justify-content:flex-start;
}
.cuadro_interno h1
{
    font-size: 75px;
    color: white;
    line-height: 1;
    font-family:"Montserrat-Bold";
}
.cuadro_interno span
{
    font-size: 60px;
}
.cuadro_interno h2
{
    font-size: 80px;
    color: white;
    font-family:"Montserrat-Bold";
}
.cuadro_interno small
{
    font-size: 30px;
}
.cnt_espacio_vacio
{
    width: 60%;
    /*border: 1px solid red;*/
    display: flex;
    align-items: center;
    justify-content:flex-end;
}
.cont_boton_play_video
{
    width: 40%;
    height: 300px;
    /*border: 1px solid red;*/
    display: flex;
    align-items: center;
    justify-content:center;
}
.circulo_boton_pt1
{
    width: 300px;
    height: 300px;
    border: 20px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content:center;
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.3s;
}
.circulo_boton_pt1:hover
{
    opacity: 1;
}
.circulo_boton_pt1 i
{
    font-size: 120px;
    color: white;
    padding-left: 10px;
}


.top-bar-index {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 0;
    z-index: 10;
}

.logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
}

.logo-center img {
    width: 250px; 
    height: auto;
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*contenedor segunda parte*/
.conenedor_segunda_parte
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 50px;
}
.cont_izq_pt2
{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 1px solid red;*/
}
.cont_izq_pt2 img
{
    width: 80%;
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
}
.cont_der_pt2
{
    width: 60%;
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    /*border: 1px solid green;*/
    padding: 40px;
}
.cont_der_pt2 h2
{
    font-size: 40px;
    color: var(--color_comercial_morado);
    font-weight: 500;
    padding-bottom: 30px;
    font-family:"Montserrat-Bold";
}
.cont_der_pt2 p
{
    font-size: 15px;
    color: var(--color_textos);
    font-weight: 400;
    padding-bottom: 20px;
    text-align: justify;
    padding-bottom: 30px;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*contenedor segunda parte B*/
.contenedor_segunda_parte_b
{
    width: 100%;
    padding: 40px 0;
    background-color: rgb(240,240,240);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont_izq_pt2_b
{
    width: 60%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 1px solid red;*/
    background-size: 100% 100%;
}
.cont_izq_pt2_b img
{
    width: 100%;
}
.cont_der_pt2_b
{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 1px solid green;*/
    padding: 20px;
}
.cont_der_pt2_b p
{
    font-size: 15px;
    color: var(--color_textos);
    font-weight: 400;
    text-align: justify;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*contenedor tercera parte*/
.contenedor_tercera_parte
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 50px;
    background-image: url('../img/logo-puro.png');
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: left 50px bottom 250px;
}
.contenedor_tercera_parte h2
{
    font-size: 50px;
    font-weight: 700;
    color: var(--color_ubicacion_azul_fuerte);
    padding-bottom: 20px;
    font-family:"Montserrat-Bold";
}
.cont_letras_pie_pagina
{
    width: 100%;
    height:auto;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.cont_letras_centrado
{
    width: 63%;
    display: flex;
    align-items: center;
    justify-content:flex-start;
    /*border: 1px solid red;*/
    padding-right: 100px;
}
.cont_letras_pie_pagina p
{
    font-size: 17px;
    color: var(--color_textos);
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*contenedor cuarta parte*/
.cntenedor_cuarta_parte
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 50px;
    background-color: rgb(240,240,240);
}
.cont_izq_modelo
{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 1px solid green;*/
}
.cont_izq_modelo img
{
    width: 100%;
}
.cont_der_modelo
{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*border: 1px solid red;*/
}
.cont_pantalla_video
{
    width: 70%;
    height: 400px;
    /*border: 1px solid red;*/
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/inicio_video_recorrido.jpg);
    background-position: center;
    background-size: cover;
    margin-bottom: 20px;
}
.cont_recorrido_ptmodelo
{
    width: 60%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color_inversion_naranja);
    border-radius: 10px;
}
.cont_recorrido_ptmodelo p
{
    font-size: 17px;
    color: white;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*contenedor quinta parte*/
/* =========================================
   CONTENEDOR QUINTA PARTE
   ========================================= */

.contenedor_quinta_parte {
    width: 100%;
    height: 100vh;
    padding-top: 80px;
    padding-bottom: 50px;
    /* ELIMINÉ el background-image y background-size de aquí */
    background-color: #009688;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
    
}

/* TUS ESTILOS ORIGINALES INTACTOS */
.cont_info_mapa {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}
.cont_int_titulo {
    width: 100%;
    height: 150px;
    background-color: var(--color_comercial_morado);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 10px 10px 0;
    margin-bottom: 20px;
}
.cont_izq_mapa {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont_izq_mapa i {
    font-size: 80px;
    color: white;
}
.cont_der_mapa {
    width: 80%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
.cont_der_mapa h2 {
    font-size: 50px;
    color: white;
}
.cont_der_mapa h3 {
    font-size: 30px;
    font-weight: 300;
    color: white;
}
.fila_mapa {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 30px;
}
.circulo_mapa {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color_comercial_morado);
    margin-right: 10px;
}
.fila_mapa h4 {
    font-size: 20px;
    /* color: var(--color_textos); */
    color: white;
    font-weight: 300;
}

/* =========================================
   NUEVO: CUADRO BLANCO PARA EL MAPA
   ========================================= */
.cont_imagen_mapa {
    width: 45%; /* Toma el 45% del ancho de la pantalla (el otro 50% lo tiene el texto) */
    background-color: #ffffff; /* Cuadro blanco */
    padding: 15px; /* Crea el marco blanco alrededor de la imagen */
    margin-left: 2%; /* Separa un poquito el cuadro de la lista de textos */
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); /* Sombra para que flote */
    border-radius: 6px;
}

.cont_imagen_mapa img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive para que en celular pase el mapa para abajo
@media screen and (max-width: 900px) {
    .contenedor_quinta_parte {
        flex-direction: column; 
        height: auto;
    }
    .cont_info_mapa {
        width: 100%;
        margin-bottom: 40px;
    }
    .cont_imagen_mapa {
        width: 90%;
        margin-left: 0;
    }
} */

/* Mapa responsivo */
@media screen and (max-width: 900px) {
    
    /* 1. Contenedor General */
    .contenedor_quinta_parte {
        flex-direction: column;
        height: auto;
        padding: 50px 20px !important;
        background-image: none !important; 
    }
    
    /* 2. Columna de Textos */
    .cont_info_mapa {
        width: 100% !important;
        margin-bottom: 40px; 
    }
    
    /* 3. Tarjeta Blanca del Mapa */
    .cont_imagen_mapa {
        width: 100% !important;
        margin: 0 !important; 
        padding: 15px !important; 
        box-sizing: border-box !important; 
    }
    
    /* 4. La imagen dentro de la tarjeta */
    .cont_imagen_mapa img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important; 
   
    }
}



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*contenedor sexta parte*/
.contenedor_sexta_parte
{
    width: 100%;
    height: 110vh;
    display: flex;
    align-items:flex-end;
    justify-content: flex-start;
    flex-direction: column;
    background-image: url(../img/creditos.png);
    background-size: cover;
    background-position: top;
    background-color: rgb(240,240,240);
}
.cont_logo_pt6
{
    width: 60%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 1px solid red;*/
}
.cont_info_bancos
{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    /*border: 1px solid red;*/
}
.cont_info_bancos h2
{
    font-size: 50px;
    color: var(--color_ubicacion_azul_fuerte);
    padding-bottom: 10px;
    font-family:"Montserrat-Bold";
}
.cont_info_bancos h3
{
    font-size: 20px;
    color: var(--color_textos);
    font-weight: 700;
    padding-bottom: 10px;
    text-align: center;
}
.cont_info_bancos img
{
    width: 80%;
}
.cont_info_bancos p
{
    font-size: 20px;
    color: var(--color_textos);
    padding-bottom: 20px;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*contenedor septima parte*/
.contenedor_septima_parte
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: rgb(240,240,240); */
    background-color: #3c5393;
    background-image: url(../img/img_contacto.png);
    background-position: center;
    background-size: cover;
    padding-top: 25px;
    padding-bottom: 25px;   
}
.cont_izq_pt7
{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont_izq_pt7 img
{
    width: 100%;
}
.cont_der_pt7
{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.cont_der_pt7 h2
{
    font-size: 80px;
    color: white;
    padding-bottom: 20px;
    font-family:"Montserrat-Bold";
}

/*--------------------------------------------------*/
/*formulario*/
.label_form
{
    font-size: 17px;
    color: var(--color_ubicacion_azul_fuerte);
}
.iput_form
{
    width: 100%;
    height: 25px;
}
.boton_form
{
    width: 200px;
    height: 30px;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*contenedor videos*/
.contenedor_videos
{
    z-index: 3;
    position: fixed;
    top:0px;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.349);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.contenedor_videos video
{
    width: 70%;
}
.boton_cerrar
{
    position: fixed;
    right: 20px;
    top: 20px;
    font-size: 40px;
    color: var(--color_inversion_naranja);
    cursor: pointer;
    transition: all 0.3s ease;
}
.boton_cerrar:hover
{
    color: var(--color_aenidades_rosa);
}





/* Seccion de pop up de mantenimiento */

#overlay-mantenimiento {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Oscurecí un poco el fondo para que el logo resalte más */
    background-color: rgba(48, 48, 54, 0.6); 
    backdrop-filter: blur(15px); /* Un blur un poco más fuerte */
    -webkit-backdrop-filter: blur(15px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-mantenimiento {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 20px;
    text-align: center;
    max-width: 600px; 
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. Este es el contenedor mágico que permite encimar el texto */
.contenedor-superpuesto {
    position: relative;
    width: 100%;
    max-width: 450px; /* Controla qué tan grande es la imagen/área */
    display: flex;
    justify-content: center;
    margin-bottom: 25px; /* Separación con el botón de WhatsApp */
}

/* 2. Tu imagen normal */
.img-fondo {
    width:150%;
    height: auto;
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.15));
}

/* 3. Posicionamos el texto absolutamente al fondo (bottom: 0) */
.texto-encima {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    padding: 15px; /* Para que el texto no pegue directo a los bordes de la imagen */
    /* Opcional: si la imagen choca mucho con las letras, descomenta la siguiente línea para darle un degradado sutil de fondo */
    /* background: linear-gradient(to top, rgba(255,255,255,0.8), transparent); */
}

.texto-encima h2 {
    color: #222222;
    margin-bottom: 10px;
    font-size: 26px;
    text-shadow: 0px 2px 10px rgba(255,255,255,0.9);
}

.texto-encima p {
    color: #444444;
    margin-bottom: 0; 
    line-height: 1.4;
    font-size: 16px;
    font-weight: 500;
    text-shadow: 0px 2px 10px rgba(255,255,255,0.9);
}

.btn-whats-mantenimiento {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366;
    color: white;
    padding: 15px 32px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 17px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 8px 15px rgba(37, 211, 102, 0.3);
    z-index: 2; /* Para asegurar que sea clickeable siempre */
}

.btn-whats-mantenimiento i {
    margin-right: 10px;
    font-size: 22px;
}

.btn-whats-mantenimiento:hover {
    background-color: #128C7E;
    color: white;
    transform: scale(1.05);
}



/* --- Contenido Central --- */
.center-content-index {
    width: 100%; /* Atraviesa toda la pantalla de lado a lado */
    height: auto; /* Solo toma la altura de los textos y el botón */
    padding: 40px 20px; /* Le da aire arriba y abajo a las letras dentro de la franja */
    
    /* Esta es tu franja oscura y pareja */
    background-color: rgba(0, 0, 0, 0.4); 
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.letras-h1 {
    color: #ffffff;
    font-weight: 500;
    font-size: 42px; /* Letras un poco más grandes */
    text-align: center;
    line-height: 1.2;
    margin-bottom: 25px;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.3); /* Sombra extra de seguridad */
}

/* --- Botón WhatsApp --- */
.btn-whats-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #009688; /* Color verde azulado similar al de la imagen */
    color: white;
    border-radius: 30px;
    padding: 14px 40px; /* Reducimos el padding de 100px a 40px para que quede como pastilla */
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 4px 15px rgba(0, 150, 136, 0.4);
    z-index: 2; 
}

.btn-whats-index:hover {
    background-color: #00796b;
    color: white;
    transform: scale(1.05);
}