/* Estilos generales */
body {
    margin: 0;
    font-family: 'Area';
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Area Black';
    font-weight: bold;
    color: #000;
    line-height: 1;
}

p {
    font-size: 18px;
    line-height: 1.5;
    color: #666;
}

/*a {*/
/*    text-decoration: none;*/
/*    color: #337ab7;*/
/*}*/


/*---------------------------------------------*/
/* Bloque 1 */
/*---------------------------------------------*/
.bloque-1 {
    position: relative;
    display: flex;
    flex-direction: column;
}

.bloque-1 .top-section {
    background: #F4D85C; /* Fondo amarillo */
    height: 300px; /* Altura fija para el bloque amarillo */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.bloque-1 .side-image-left,
.bloque-1 .side-image-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px; /* Duplicamos el tamaño */
    height: auto;
    object-fit: contain;
}

.bloque-1 .side-image-left {
    left: 0; /* Pegado al borde izquierdo */
}

.bloque-1 .side-image-right {
    right: 0; /* Pegado al borde derecho */
}

.bloque-1 .content-center {
    text-align: center;
    z-index: 1;
    max-width: 500px; /* Limita el ancho del texto */
    margin: 0 auto; /* Centra el texto horizontalmente */
    word-wrap: break-word; /* Permite dividir texto largo en varias líneas */
} 

.bloque-1 .content-center h1 {
    font-size: 40px;
    color: #000;
    margin-bottom: 10px;
    font-family: 'Area Black';
}

.bloque-1 .content-center h2 {
    font-size: 20px;
    color: #000;
    font-family: 'Area';
}

.bloque-1 .bottom-section {
    width: 100%;
}

.bloque-1 .bottom-section img {
    width: 100%;
    height: 300px; /* Altura igual al bloque amarillo */
    object-fit: cover;
    display: block;
}


/*---------------------------------------------*/
/* Bloque 2 */
/*---------------------------------------------*/
.bloque-2 {
    background: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.bloque-2 h2 {
    text-align: center;
    color: black;
    margin-bottom: 20px;
}

.bloque-2 .text-paragraphs {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
    gap: 20px;
}

.bloque-2 .text-paragraphs p {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    flex: 1;
}

.bloque-2 .fichas {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    gap: 20px;
    margin-top: 20px;
    position: relative;
    z-index: 2;
}

.bloque-2 .ficha {
    width: 18%;
    text-align: center;
}

.bloque-2 .ficha img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.bloque-2 .ficha p {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
}



/* Título adicional */
.bloque-2 .secondary-title {
    margin-top: 40px;
    font-size: 24px;
    color: black;
    text-align: center;
}

/* Fichas independientes encima de las paralelas */
.bloque-2 .title-fichas-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    gap: 20px;
    margin-top: 20px;
}

.bloque-2 .title-ficha {
    background: #2C3F92; /* Fondo azul para la ficha izquierda */
    color: white;
    width: 48%;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    border-color: 'black';
}

.bloque-2 .title-ficha.right {
    background: #ECECEC; /* Fondo gris para la ficha derecha */
    color: #333;
}

/* Fichas paralelas debajo del título adicional */
.bloque-2 .parallel-fichas {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    gap: 20px;
    margin-top: 20px;
}

.bloque-2 .parallel-ficha {
    background: white;
    width: 48%;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: relative;
}

.bloque-2 .parallel-ficha ul {
    list-style: disc;
    margin-left: 20px;
    color: #333;
}

.bloque-2 .parallel-ficha ul li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
}


/* Imagen decorativa */
.decorative-image {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0; /* Detrás de las fichas */
    width: 300px;
    height: auto;
    opacity: 0.5; /* Efecto decorativo sutil */
}

.decorative-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ─── Ajuste de bordes en el bloque “¿Por qué elegirnos?” ────────────────── */
.bloque-2 .title-ficha:not(.right),
.bloque-2 .parallel-ficha:first-child {
    border: 2px solid #000;          /* Borde negro para la columna izquierda */
}

.bloque-2 .title-ficha.right,
.bloque-2 .parallel-ficha:nth-child(2) {
    border: none;                    /* Sin borde en la columna derecha */
}

/*---------------------------------------------*/
/* Bloque 3 */
/*---------------------------------------------*/
.bloque-3 {
    background: #FFE679;
    padding: 40px 40px;
    text-align: center;
    position: relative; /* Asegura que el título se mantenga al principio */
}

.bloque-3 h2 {
    margin-bottom: 100px; /* Separa el título de las fichas */
    font-size: 28px;
    position: relative;
    z-index: 5; /* Asegura que el título siempre esté por encima de las fichas */
    font-family: 'Area';
}

.bloque-3 .columnas {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: flex-start;
    margin-top: 20px; /* Añade espacio debajo del título */
    z-index: 2; /* Las fichas están en una capa inferior al título */
}

.bloque-3 .tarjeta {
    position: relative;
    width: 22%;
    padding: 2px;
    background: transparent;
    border-radius: 10px;
    height: 250px;   
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);*/
    transform: translateY(var(--offset, 0)); /* Escalera ascendente */
    z-index: calc(10 - var(--indice, 0)); /* Asegura que las fichas superiores estén por encima visualmente */
}

.bloque-3 .tarjeta:nth-child(1) {
    --offset: 0px;
}

.bloque-3 .tarjeta:nth-child(2) {
    --offset: -20px;
}

.bloque-3 .tarjeta:nth-child(3) {
    --offset: -40px;
}

.bloque-3 .tarjeta:nth-child(4) {
    --offset: -60px;
}

.bloque-3 .contenido-tarjeta {
    text-align: left;
    position: relative;
}

.bloque-3 .boton-popup {
    right: 0;                              /* Pegado al borde derecho   */
    top: 50%;                              /* Centrado verticalmente    */
    transform: translateY(-50%);           /* Ajuste fino               */
}

.bloque-3 .contenido-tarjeta h3 {
    font-size: 50px;
    margin-bottom: 15px;
    color: black;
    font-family: 'Area';
    margin: 0 0 15px 0;
}

.bloque-3 .contenido-tarjeta h4 {
    font-size: 25px;
    margin-bottom: 5px;
    color: #666;
}

.bloque-3 .contenido-tarjeta p {
    font-size: 14px;
    color: #333;
}

/* Botón de popup dentro de la tarjeta */
.bloque-3 .boton-popup {
    position: absolute;
    top: 10px;
    right: 80px; /* Mueve el botón a la esquina superior derecha */
    background: #D8C15A;
    color: white;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    z-index: 2;
    /*opacity: 0.6;*/
}

/* Popup */
.bloque-3 .popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95); /* Fondo con transparencia */
    border-radius: 10px;
    display: none;
    z-index: 999;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.bloque-3 .popup.mostrar {
    display: block;
    transform: scale(1);
    opacity: 1;
}

.bloque-3 .popup-content {
    padding: 10px;
    font-size: 12px;
    line-height: 1; /* Menor espaciado entre renglones */
    text-align: left;
}

.bloque-3 .popup-content p {
    padding: 5px;
    font-size: 14px;
    line-height: 1.5; /* Menor espaciado entre renglones */
    text-align: left;
}

.bloque-3 .popup .cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    color: red;
    cursor: pointer;
}


/*---------------------------------------------*/
/* Bloque 4 */
/*---------------------------------------------*/
/* Bloque 4 */
.bloque-4 {
    background-color: #F5F5F5;
    padding: 50px 20px;
    text-align: left;
    margin-top: 0; 
    /*margin-bottom: 40px; */
}

.faq-container {
    max-width: 80%;
    margin: 0 auto;
    border-bottom: 1px solid #fff;
}

.faq-item {
    display: block; /* Cambiado de flex a block para colocar contenido debajo del título */
    border-bottom:1px solid #6E6E6E;   /* gris oscuro */
    padding: 15px 0;
    cursor: pointer;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:14px 0 6px;               /* antes: ~20-25 px abajo */
    font-size:20px; 
    color: #000;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta cualquier desbordamiento del texto */
    text-overflow: ellipsis; /* Añade "..." si el texto es demasiado largo */
    width: 100%; /* Asegura que se ajuste al espacio disponible */
}

.faq-question .circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background:#6E6E6E;
    flex-shrink: 0;
}

.faq-question i {
    font-size: 16px;
    color: #fff;
    transition: transform 0.3s ease; /* Rotación suave */
    margin-left: auto; /* Coloca el ícono al extremo derecho */
}

.bloque-4 .faq-question span{
    margin-left:12px;                 /* mantiene respiro respecto al círculo */
}

.faq-answer {
    background-color: #F5F5F5;
    color: #000;
    padding: 15px 20px;
    font-size: 14px;
    border-top:1px solid #D9D9D9;
    max-height: 0; /* Altura inicial de la respuesta */
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.6s ease; /* Animación más fluida */
    opacity: 0; /* Completamente oculto inicialmente */
    position: relative;
}

.faq-answer .galeria-fichas {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: space-between;
}

.faq-answer .galeria-fichas .ficha {
    width: 30%;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.faq-answer .galeria-fichas .ficha h4 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: 14px;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.faq-item.open .faq-answer {
    max-height: 600px; /* Altura ajustada para incluir fichas */
    opacity: 1; /* Aparece con la animación */
}

.faq-item.open .faq-question i {
    transform: rotate(180deg); /* Animación de rotación */
}

.bloque-4 .faq-item.open{
    border-bottom:none;
}
.bloque-4 .faq-item.open .faq-answer{
    border-top:none;
}

/* Grid interno de la descripción “¿En qué consiste? / Nuestro diferencial / Ejemplos” */
.bloque-4 .info-grid{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    font-size:14px;
}
.bloque-4 .info-grid>div{flex:1 1 30%;}

/* Sub-título antes de la galería */
.bloque-4 .subtitulo-galeria{
    margin:30px 0 15px;
    font-weight:bold;
}

/* Botón “Ver toda la galería” */
.bloque-4 .ver-galeria{text-align:center;margin-top:20px;}
.bloque-4 .btn-galeria{
    background:none;border:none;cursor:pointer;
    font-size:14px;display:inline-flex;align-items:center;gap:6px;
    color:#333;
}

/*---------------------------------------------*/
/* Bloque 5 */
/*---------------------------------------------*/
.bloque-5 {
  /* Ajusta el fondo y el color de texto a tu diseño */
  background: #fff;
  color: #000;
  padding: 40px;
  text-align: center;
  position: relative;
}

.bloque-5 h2 {
  margin-bottom: 10px;
  font-size: 28px;
}

.bloque-5 h3 {
  margin-bottom: 30px;
  font-weight: normal;
  color: #666;
  font-size: 18px;
}

/* Contenedor general del carrusel */
.bloque-5 .testimonial-carousel {
  position: relative;
  max-width: 1000px; /* Ajusta según tu diseño */
  margin: 0 auto;
  overflow: hidden;  /* Para "cortar" las fichas laterales */
}

/* Flechas de navegación */
.bloque-5 .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #333;
  background: rgba(255, 255, 255, 0.6);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3; /* Por encima de las tarjetas */
  transition: background 0.3s;
}

.bloque-5 .arrow:hover {
  background: rgba(255, 255, 255, 0.9);
}

.bloque-5 .arrow-left {
  left: 10px;
}

.bloque-5 .arrow-right {
  right: 10px;
}

/* Galería que contiene las tarjetas */
.bloque-5 .galeria {
  display: flex;            /* Pone las fichas en fila */
  transition: transform 0.5s ease;  /* Suaviza el movimiento al cambiar */
}

.bloque-5 .testimonial-card {
  display: flex;
  flex-direction: column;
  /* Mantén el resto de estilos que ya tienes */
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 5px; /* Asegúrate de usar márgenes positivos */
  background: #003366;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transform: scale(0.8);
  transition: transform 0.3s ease;
  min-height: 300px;
}

.bloque-5 .testimonial-card .client-bottom-row {
  margin-top: auto; /* Esto empuja este bloque al fondo */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bloque-5 .testimonial-card.active {
  transform: scale(1);
  z-index: 2;
}



/* Tarjeta adyacente (inmediata a la activa) se muestra intermedia */
.bloque-5 .testimonial-card.adjacent {
  transform: scale(0.9);
}


/* Estilo para el símbolo de apertura de comillas */
.bloque-5 .testimonial-card .quote-symbol {
  font-size: 28px;
  margin-bottom: 5px;
  text-align: left;
}

/* Texto de testimonio en letra más pequeña */
.bloque-5 .testimonial-card .testimonial-text {
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 15px;
}

/* Fila inferior con foto, nombre y botón */
.bloque-5 .testimonial-card .client-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

/* Contenedor de foto y nombre */
.bloque-5 .testimonial-card .client-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Foto del cliente: pequeña y circular */
.bloque-5 .testimonial-card .client-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Nombre del cliente */
.bloque-5 .testimonial-card .client-name {
  font-size: 14px;
  font-weight: bold;
}

/* Botón en forma de flecha (cabeza de flecha) */
.bloque-5 .testimonial-card .arrow-button {
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: color 0.3s;
}

.bloque-5 .testimonial-card .arrow-button:hover {
  color: #cccccc;
}


/* La tarjeta central (activa) se ve por encima y sin corte */
.bloque-5 .testimonial-card.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}