/* Bloque 1 */
.bloque-1 {
    background-color: #fff;
    padding: 50px 5%;
    text-align: center;
    padding-bottom: 150px; /* Espacio adicional para el objeto intermedio */
    
}

.logo-bloque-1 {
    margin: 0 auto;
    width: 200px;
}

.btn-verde {
    background-color: #06535A;
    color: #fff;
    text-decoration: none;
    padding: 5px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between; /* Agrega esto para posicionar el ícono a la derecha */
    margin-right: 15px;
}

.btn-verde a {
    color: #fff !important; /* Agrega esto para cambiar el color del texto del enlace */
    text-decoration: none;
    font-family: 'Area Normal';
    font-size: 18px;
    font-style: 'Semi Bold'
}

.btn-verde i {
    margin-left: 10px;
    color: #fff !important;
    font-size: 18px;
}

.btn-verde:hover {
    background-color: #B8BABC;
    color: #06535A;
}

.btn-blanco {
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 5px 20px;
    text-decoration: none;
    font-family: 'Area';
    font-size: 18px;
}

.btn-blanco:hover {
    background-color: #B8BABC;
    color: #fff;
}

.contenido-bloque-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.texto-bloque-1 {
    width: 50%;
    text-align: left;
}

.texto-bloque-1 h2{
    font-size: 40px;
    /*font-family: 'Area Inktrap';*/
    /*font-weight: 'Black';*/
}

.texto-bloque-1 p{
    font-size: 18px;
    color: #000;
    width: 95%;
}

.texto-bloque-1 button {
    margin-left: 0;
}

.imagen-bloque-1 {
    width: 50%;
}

.imagen-bloque-1 img {
    width: 100%;
    height: auto;
    margin-left: 5%;
}

/* Contenedor combinado para Bloque 1 y Bloque 2 */
.bloque-1-2 {
    position: relative;
}

/* Objeto intermedio */
.objeto-intermedio {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    border-radius: 10px;
    z-index: 5; /* Asegura que esté sobre los bloques */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    background-color: transparent;
}

/* Columna azul */
.columna-azul {
    display: flex;
    width: 50%;
    height: 200px;
    padding: 2% 2%;
    align-items: left;
    color: #fff;
    background-color: #172D77;
    margin-right: 50px;
    line-height: 1.2;
}

.lista-iconos {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.lista-iconos li {
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    margin-bottom: 20px;
}

.lista-iconos i {
    margin-right: 10px;
    font-size: 18px;
}

/* Columna negra */
.columna-negra {
    width: 50%;
    background-color: #000;
    padding: 20px;
    /*border-radius: 10px;*/
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.stats {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 30px;
}

/* Ajuste para alinear números y texto en la columna negra */
.stat {
    display: flex; /* Cambia a un diseño flexible */
    align-items: center; /* Asegura la alineación vertical */
    justify-content: flex-start; /* Alínea los elementos hacia la izquierda */
    gap: 5px; /* Espaciado entre el número y el texto */
    text-align: left; /* Alinea el texto a la izquierda */
}

.stat h3 {
    font-size: 30px;
    margin: 0;
    color: #fff;
    flex-shrink: 0; /* Evita que el número cambie de tamaño */
}

.stat p {
    font-size: 12px;
    margin: 0;
    color: #fff;
    line-height: 1.2; /* Ajusta la altura de línea para mejor visualización */
}


/*----------------------------------------------*/
/* Bloque 2 */
/*----------------------------------------------*/
.bloque-2 {
    background-color: #06535A;
    padding: 150px 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%; /* Asegura que el contenido no se desborde */
    margin: 0 auto; /* Centra el bloque dentro de la pantalla */
}

.texto-bloque-2 {
    width: 100%;
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
}

.texto-bloque-2 h2 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
    padding-left: 5%;
}

/* Diseño de las fichas */
.fichas {
    display: flex;
    justify-content: center; /* centrado horizontal */
    flex-wrap: wrap; /* por si en mobile se necesita */
    gap: 20px; /* espacio entre fichas */
    margin-bottom: 50px;
}


.ficha {
    position: relative;
    background-color: #fff;
    padding: 0;
    margin: 10px;
    width: 240px; /* ancho fijo y coherente para centrar */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px;
}



.ficha-icono {
    position: absolute; /* Posiciona el botón dentro de la ficha */
    bottom: 5px;
    right: 5px;
}

.icono-ficha {
    font-size: 18px;
    color: #EC9706; /* flecha amarilla */
    text-decoration: none;
    background-color: transparent; /* ❌ quita el fondo blanco */
    padding: 0; /* ❌ sin relleno */
    border-radius: 0; /* ❌ sin forma circular */
    box-shadow: none; /* ❌ sin sombra */
    transition: color 0.3s;
}

.icono-ficha:hover {
    color: #06535A; /* cambia a verde oscuro al hacer hover */
}



.imagen-ficha {
    height:40%;
    overflow: hidden;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-radius: 5px;
}

.imagen-ficha img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.texto-ficha {
    margin-left: 0; /* Alinear todo el contenido de la ficha con el título */
}

.texto-ficha p {
    padding: 100px;
    height: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*border-bottom-left-radius: 10px;*/
    /*border-bottom-right-radius: 10px;*/
    font-size: 10px;
}


.texto-ficha h3 {
    padding-top: 10px;
    padding-left: 5%;
    font-size: 16px;
}

.texto-ficha li {
    position: relative;
    padding-left: 5%; /* Igual al margen del contenedor para alinear con el título */
    font-size: 12px;
    line-height: 25px;
}

.texto-ficha li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0; /* Comienza justo al inicio del padding del bullet */
    width: 7px;
    height: 7px;
    background-color: #EE9934; /* Color amarillo */
    border-radius: 50%;
}

.texto-ficha ul {
    list-style: none; /* Elimina los bullets por defecto */
    padding-left: 10%; 
    /*margin: 10%;*/
}


/* Sección de columnas */

/* Contenedor de los títulos */
.titulos-mercado-contenedor {
    padding-top: 50px;
    text-align: left;
    /*padding-left: 5%;*/
    margin-bottom: 10px;
    width: 85%; /* Abarca toda la sección */
    background: none; /* Sin fondo */
}

.titulo-anios {
    font-size: 36px;
    font-weight: bold;
    color: #AFBCCF;
    margin: 0; /* Sin márgenes superiores o inferiores */
}

.subtitulo-mercado {
    font-size: 36px;
    color: #fff;
    margin: 5px 0 0; /* Separación ligera del título principal */
    font-weight: bold;
}


.seccion-inferior {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    width: 90%;
}

/* Columna 1: Objeto por defecto */
.default-message {
    position: absolute; /* Permite superposición */
    width: 500px; /* Tamaño igual a las imágenes */
    height: 500px; /* Tamaño igual a las imágenes */
    background: rgba(255, 255, 255, 0.5); /* Fondo blanco con transparencia */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    color: #333;
    text-align: center;
    font-weight: bold;
    visibility: hidden; /* Oculto por defecto */
    opacity: 0; /* Oculto visualmente */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.default-message.active {
    visibility: visible; /* Mostrar mensaje */
    opacity: 1; /* Mostrar visualmente */
}

.default-message p {
    font-size: 16px;
    width: 80%;
}

.columna-1 {
    width: 50%;
    position: relative; /* Para que los elementos dentro puedan posicionarse */
    display: flex; /* Activa el modelo flexbox */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    height: 300px; /* Ajusta el contenedor al tamaño deseado */
    overflow: hidden; /* Asegura que los elementos fuera del contenedor no sean visibles */
}

.columna-1 img {
    position: absolute; /* Superpone sobre el objeto vacío */
    width: 500px; /* Mismo tamaño que el objeto vacío */
    height: 500px; /* Mismo tamaño que el objeto vacío */
    object-fit: cover; /* Asegura que la imagen se ajuste al contenedor */
    border-radius: 10px;
    opacity: 0; /* Oculto inicialmente */
    transition: opacity 0.5s ease;
}

.columna-1 img.active {
    opacity: 1; /* Mostrar imagen seleccionada */
}

.columna-2 {
    width: 60%;
    padding: 20px;
}

/* Polígono de bandera */
.bullet-flag {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #EE9934;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    margin-right: 10px;
}

.faq-container-2 {
    width: 100%;
    margin:;
}

.faq-item-2 {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    justify-content: space-between; /* Distribuye espacio entre texto e ícono */
    align-items: center; /* Asegura la alineación vertical */
    transition: background-color 0.3s ease;
    background-color: transparent; /* Sin fondo */
    width: 100%; /* Asegura que ocupe el ancho completo */
}

.faq-item-2:hover {
    background-color: #C4C4C4; /* Efecto hover */
}

.faq-question-2 {
    display: flex; /* Habilita flexbox */
    justify-content: space-between; /* Espacia automáticamente el texto y el ícono */
    align-items: center; /* Alinea verticalmente texto e ícono */
    width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
    padding: 0 10px; /* Espaciado interno opcional */
    color: #fff;
}

.faq-question-2 i {
    font-size: 16px; /* Tamaño del ícono */
    color: #fff;
    transition: transform 0.3s ease;
    margin-left: auto; /* Asegura que el ícono se alinee al extremo derecho */
}


.faq-item-2.open .faq-question-2 i {
    transform: rotate(180deg); /* Rotación del ícono */
}

.faq-answer-2 {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 14px;
    color: #fff;
    margin-top: 10px; /* Espaciado entre el texto desplegable */
}

.faq-item-2.open .faq-answer-2 {
    max-height: 200px; /* Ajusta el tamaño máximo según el contenido */
}


/*----------------------------------------------*/
/* Bloque 3 */
/*----------------------------------------------*/
.bloque-3 {
    background-color: #EDF0F4;
    padding: 50px 5%;
    text-align: center;
    padding-bottom: 1%;
}

.texto-bloque-3 h2 {
    margin-bottom: 30px;
    text-align: left;
    padding-left: 5%;
    font-size: 40px;
}

.texto-bloque-3 p {
    margin-bottom: 30px;
    text-align: left;
    padding-left: 5%;
    font-size: 15px;
    font-family: 'Area'
    color: #fff;
    width: 600px;
}

/* Línea de tiempo horizontal */
.linea-tiempo-horizontal {
    position: relative;
    display: flex;
    justify-content: space-between; /* Distribuye los hitos uniformemente */
    align-items: center; /* Asegura la alineación vertical */
    width: 90%; /* Reduce el ancho total del contenedor */
    max-width: 800px; /* Máximo ancho para la línea */
    margin: 0 auto; /* Centra horizontalmente */
    padding: 0; /* Elimina cualquier padding adicional */
}

.linea-tiempo-horizontal::before {
    content: "";
    position: absolute;
    top: 50%; /* Posiciona la línea en el centro del contenedor */
    left: 0;
    right: 0;
    height: 2px; /* Grosor de la línea */
    background-color: #172D77;
    z-index: 1; /* Coloca la línea detrás de los círculos */
    transform: translateY(35px); /* Ajuste fino para centrar exactamente */
}

.hito-tiempo {
    position: relative;
    text-align: center; /* Centra texto y círculos */
    z-index: 2; /* Asegura que los círculos estén por encima de la línea */
    width: 100px; /* Ancho fijo para cada hito */
    display: flex;
    flex-direction: column;
    align-items: center; /* Asegura la alineación central de todos los elementos */
}

.texto-hito {
    margin-bottom: 10px; /* Espaciado entre texto y círculo */
    width: 200px; /* Incrementa el ancho del texto */
    word-wrap: break-word; /* Permite que las palabras largas se dividan */
    text-align: center; /* Centra el texto dentro del contenedor */
}

.texto-hito h3 {
    font-size: 36px;
    color: #172D77;
    margin: 0;
}

.texto-hito p {
    font-size: 14px;
    color: #333;
    margin: 0 0 10px;
}

.circulo {
    width: 30px;
    height: 30px;
    background-color: #172D77;
    border-radius: 50%;
    border: 2px solid #fff;
    position: relative;
    z-index: 2; /* Asegura que el círculo esté encima de la línea */
    transform: translateY(-50%); /* Asegura que la línea atraviese el círculo */
    transition: background-color 0.2s ease;
}

.circulo:hover {
    background-color: #F7DC6F;
}

/*Galeria de proyectos */

.galeria-proyectos {
    margin: 50px 5%; /* Espaciado a los lados */
    font-family: 'Area', sans-serif;
}

.encabezado-galeria {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.encabezado-galeria h2 {
    font-size: 24px;
    color: #172D77;
    margin-bottom: 100px;
}

.categorias {
    display: flex;
    gap: 5px; /* Reduce el espacio entre los botones */
    justify-content: flex-end; /* Alinea los botones a la derecha */
}

.categoria {
    background: none;
    border: none;
    font-size: 12px; /* Reduce el tamaño de la fuente */
    font-family: 'Area Black', sans-serif;
    color: #172D77;
    cursor: pointer;
    padding: 0 15px; /* Reduce el tamaño general del botón */
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

.categoria:hover {
    color: #06535A;
    border-bottom: 2px solid #06535A;
    background-color: transparent;
}

.categoria.activa {
    color: #06535A;
    border-bottom: 2px solid #06535A;
}

.contenedor-galeria {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.galeria {
    display: flex;
    gap: 20px; /* Espaciado entre fotos */
    width: 100%;
    justify-content: space-around;
}

.proyecto {
    text-align: center;
    flex: 0 0 calc(33.33% - 20px); /* Tres fotos por fila */
    max-width: 400px;
}

.proyecto img {
    width: 100%; /* Doble de tamaño */
    height: 300px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.proyecto img:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el cursor */
}

.proyecto p {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

/* Contenedor para centrar el botón */
.ver-galeria {
    text-align: center;
    margin-top: 0px;
}

/* Botón de galería */
.btn-galeria {
    background: none;
    color: #06535A;
    font-weight: bold;
    gap: 10px;
}

.btn-galeria i {
    font-size: 18px;
    background-color: #06535A;
    color: #fff;
    border-radius: 50%;
    padding: 5px;
}

/* Icono circular */
.icono-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #06535A; /* Fondo verde */
    color: transparent; /* Texto invisible */
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0;
}

.icono-flecha i {
    color: #fff; /* Flecha blanca */
    font-size: 12px;
    position: absolute;
    margin-bottom: 0px;
    padding-bottom: 0;
}

/*----------------------------------------------*/
/* Bloque 4 - 'Lo más preguntado'*/ 
/*----------------------------------------------*/
.bloque-4 {
    background-color: #2C3F92;
    padding: 50px 20px;
    text-align: center;
}

.bloque-4 h2 {
    color: #fff;
    font-size: 36px;
    margin-bottom: 20px;
    text-align: center;
    /*padding-left: 10%;*/
}

.bloque-4 p {
    color: #fff;
    font-size: 10px;
    margin-bottom: 50px;
    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
}

.faq-container {
    max-width: 80%;
    margin: 0 auto;
}

.faq-item {
    background-color: #2C3F92;
    border: 1px solid #fff;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    transition: max-height 0.3s ease; /* Transición de altura */
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    font-size: 16px;
    color: #fff;
}

.faq-question i {
    transition: transform 0.3s ease;
}

.faq-answer {
    background-color: #fff;
    color: #2C3F92;
    padding: 15px 20px;
    font-size: 14px;
    max-height: 0; /* Altura inicial de la respuesta */
    overflow: hidden;
    transition: max-height 0.6s ease;
    display: none; /* Esconde completamente el contenido inicialmente */
}

.faq-item.open .faq-answer {
    display: block; /* Muestra el contenido cuando está abierto */
    max-height: 300px; /* Altura máxima ajustada */
}

.faq-item.open .faq-question i {
    transform: rotate(180deg);
}