/*----------------
Indice de Estilos
1) Estilos generales
2) BARRA SUPERIOR (Top Bar)
 2.1 Sección de Contacto en la Barra Superior(Estilos)
 2.2  Redes Sociales en la Barra Superior
3) MENÚ DE NAVEGACIÓN PRINCIPAL
4) ESTILOS SECCION INICIO
4.1) ESTILOS SECCION INICIO (BENEFICIOS)
4.2 ESTILOS SECCION INICIO (PREGUNTAS Y RESPUESTA)
4.3) ESTILOS SECCION INICIO (TESTIMONIOS)  
5) ESTILOS SECCION NOSOTROS*
6) ESTILOS SECCION BLOG*
7) ESTILOS DE SECCION SERVICIOS
8) ESTILOS DE CONTACTO*
9) ESTILOS DE FOOTER*


------------------*/




/*-------------------------------
1) Estilos generales
--------------------------------*/
*{
    margin:0;
    box-sizing: border-box;
}

/* Definir la fuente Gilroy Regular */
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Regular.otf') format('opentype'); /* Ruta al archivo .otf */
    font-weight: 400;
    font-style: normal;
}

/* Definir la fuente Gilroy Medium */
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Medium.otf') format('opentype'); /* Ruta al archivo .otf */
    font-weight: 500;
    font-style: normal;
}

/* Definir la fuente Gilroy Regular Italic */
@font-face {
    font-family: 'Gilroy'; /* Mantener el mismo nombre para que sea más consistente */
    src: url('../fonts/gilroy/Gilroy-RegularItalic.otf') format('opentype'); /* Ruta correcta */
    font-weight: 400;
    font-style: italic; /* Definir estilo cursivo */
}



body{
    margin: 0 auto;
    /* font-family: 'Poppins', sans-serif, "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    /* font-weight: 200;
    font-size: 1rem; */
    box-sizing: border-box;
    font-family: 'Gilroy';
    background-color: #D3D3D3; /* Color de fondo de la página */
}

html, body {
    width: 100%;
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
    margin: 0;
    padding: 0;
}

/* Ajuste profesional del texto */
.tareas {
    position: relative;
    z-index: 2;
    font-size: 1.8em;
    font-weight: 400;
    color: white;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8); /* Brillo sutil */
    text-align: center;
    margin: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInMove 1.5s ease-out forwards;
    font-style: medium;
}


/* Animación elegante */
@keyframes fadeInMove {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



  /* Estilo base para los titulos que aparecen sobre las imagenes de las secciones*/
.leyenda{
    
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    margin-top: 8rem;
    position:absolute;
    text-align: center;
    color:  #829DB5;
    animation: mover-izquierda-derecha 2s 1;
    animation-fill-mode: forwards ;
   
}


/* Definición de la animación mover-izquierda-derecha */
@keyframes mover-izquierda-derecha {
    from {
        opacity: 0;
        transform: translateX(-300px);
    }

    to{
        transform: translateX(0);
    }
}


/* Estilos para el botón de whatsapp */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1110;
    border-radius: 50%;
    background-color: #25D366;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.whatsapp-button i {
    color: white;
    font-size: 30px;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}



/* ===================================================================
🎯 2) BARRA SUPERIOR (Top Bar)
=======================================================================
   📝 **Descripción:**
   La barra superior (Top Bar) contiene información clave de contacto y
   enlaces a redes sociales de la empresa. Está ubicada en la parte superior
   de la página, proporcionando fácil acceso a los visitantes.

   🔧 **Funcionalidad:**
   - **Información de contacto:** Teléfonos y correo electrónico.
   - **Redes sociales:** Enlaces directos a Facebook, Twitter, Instagram y LinkedIn.
   - **Comportamiento al hacer scroll:** 
     - Cuando el usuario hace scroll hacia abajo, la barra se oculta para maximizar el espacio de contenido. 
     - Al hacer scroll hacia arriba, la barra se muestra nuevamente (ver su funcion en el archivo app7.js).

   🚀 **Interactividad:**
   - **Redes sociales:** Cada icono es un enlace a las redes sociales correspondientes.
   - **Responsividad:** Se adapta para dispositivos móviles, manteniendo la accesibilidad.

=======================================================================*/

   .top-bar {
    display: flex; /* Permite alinear los elementos en una fila */
    justify-content: space-between; /* Distribuye los elementos a los extremos */
    align-items: baseline; /* Alinea verticalmente los elementos */
    background-color:  #1A202C; /* Color de fondo corporativo */
    padding: 1rem 2rem; /* Espaciado interno para mejorar la legibilidad */
    font-size: 0.9rem; /* Tamaño de fuente reducido para mayor compactibilidad */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    flex-wrap: wrap;
    height: 3rem;
   
    
 }

    /* Ocultar la sección de contacto y redes sociales cuando
    se escrolea hacia abajo*/
    .top-bar.hidden {
        transform: translateY(-100%);    /* Mueve la barra completamente fuera de la pantalla */
        opacity: 0;                      /* Hace la barra completamente invisible */
        pointer-events: none;            /* Desactiva la interacción con la barra oculta */
    
    }


/* ----------------------------------------------------
 2.1 Sección de Contacto en la Barra Superior(Estilos)
------------------------------------------------------ */

.nav-contacto {
    display: flex; /* Alinea los elementos de contacto en una fila */
    flex-wrap: wrap;
    gap: 15px; /* Espaciado uniforme entre elementos */
    list-style: none; /* Elimina viñetas predeterminadas */
    padding: 0;
    margin-left: 2rem;
    
   
}

.nav-contacto a {
    color: #829DB5; /* Color distintivo para enlaces de contacto */
    text-decoration: none; /* Elimina subrayado de los enlaces */
   
}

/* Cambiar el color de las palabras Teléfonos y Email */
.nav-contacto i {
    color: #829DB5;
    margin-right: 0.5rem; /* Ajusta el valor según el espacio que quieras */
} 

.nav-contacto li {
    display: flex;
    align-items: center; /* Asegura que el ícono y el texto estén alineados */
    gap: 8px; /* Espacio entre el ícono y el texto */
    vertical-align: middle;
}

.top-bar {
    border-bottom: 1px solid #829DB5;
    padding-bottom: 0.1rem; /* Opcional, para separar un poco */
}

/* --------------------------------------------
 2.2  Redes Sociales en la Barra Superior
-----------------------------------------------*/

.social-links {
    display: flex; /* Alinea los iconos de redes sociales en una fila */
    gap: 20px; /* Espaciado uniforme entre iconos */
    margin-right: 2rem;
       
}

.social-links a {
    color: #1A202C;             /* Color del ícono */
    font-size: 0.8rem;            /* Tamaño del ícono */
    transition: all 0.3s ease;  /* Efecto suave */
    background-color: #829DB5;  /* Fondo gris */
    border-radius: 50%;         /* Completamente redondeado */
    padding: 10px;              /* Espaciado interno para hacerlo circular */
    display: inline-flex;       /* Para centrar el ícono */
    align-items: center;        /* Centra el contenido verticalmente */
    justify-content: center;    /* Centra el contenido horizontalmente */
    width: 0.2rem;                /* Tamaño del círculo */
    height: 0.2rem;               /* Tamaño del círculo */
    text-decoration: none;      /* Elimina el subrayado */
    
}


.social-links a:hover {
    background-color:#D3D3D3;  /* Color de fondo al pasar el mouse */
    color: #09111D;               /* Mantener el color blanco de los íconos */
    border-radius: 30%;         /* Mantener el borde redondeado */
   /* padding: 8px 12px;           Mantener un tamaño más pequeño incluso en hover */
    /*transform: scale(1.1);       Agranda ligeramente el área para un efecto sutil */
}


/* ===================================================================
🎯 3) MENÚ DE NAVEGACIÓN PRINCIPAL
=======================================================================
💼 **Propósito:**
- El menú de navegación principal incluye el logo de la empresa y las opciones de navegación para que los usuarios puedan acceder a las diferentes secciones del sitio web de manera sencilla.

🌟 **Comportamiento:**
- El menú está diseñado para ser responsive y accesible, adaptándose a diferentes tamaños de pantalla.
- Cuando se hace scroll, la barra de navegación se fija en la parte superior de la pantalla para garantizar que siempre esté accesible al usuario.

⚙️ **Estilo y Comportamiento:**
- **Logo:** El logo tiene un tamaño fijo para mantener la proporción en el diseño.
- **Lista de navegación:** Los elementos del menú están alineados horizontalmente y tienen un espaciado uniforme.
- **Interacción:** El color de los enlaces del menú cambia de fondo y texto cuando el usuario pasa el mouse por encima para ofrecer una experiencia interactiva.

🖋️ **Detalles Técnicos:**
```css

/* ================================================  
3) MENÚ DE NAVEGACIÓN PRINCIPAL
   Contiene el logo y las opciones de navegación.
================================================ */

.nav-bar {
    display: flex; /* Alinea los elementos en una fila */
    justify-content: space-between; /* Separa el logo y el menú */
    align-items: center; /* Alineación vertical centrada */
    background-color: #1A202C; /* Color de fondo neutro */
    padding: 5px 20px; /* Espaciado interno para mejor distribución */
    transition: top 0.5s ease-in-out, background-color 0.3s ease-in-out; /* Transiciones suaves */
    z-index: 1050 !important; /* Asegura que siempre esté por encima de Swiper */
    position: relative; /* Asegura que no sea afectado por cambios en Swiper */
    height: 5rem;
    
}

/* Fijar la barra de navegación cuando se oculta la top-bar */
.nav-bar.fixed {
    position: fixed;
    top: 0; /* Fija el menú en la parte superior */
    width: 100%; /* Asegura que el menú cubra todo el ancho */
    /* background-color: #829DB5;  */
    z-index: 1000; /* Mantiene la barra por encima del resto del contenido */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil al menú */
}

/* ------------------------------------ 
Logo de la Empresa
------------------------------------ */
.imagen-logo {
    width: 15rem; /* Ancho fijo para mantener la proporción */
    height: auto; /* Altura automática para mantener la relación de aspecto */
    margin-left: 3rem;
}

/* ------------------------------------
Lista de Navegación
------------------------------------ */
.nav-list {
    display: flex; /* Alinea los elementos del menú en una fila */
    gap: 15px; /* Espaciado uniforme entre elementos */
    list-style: none; /* Elimina las viñetas predeterminadas */
    padding: 0;
    margin-right: 2rem;
}

/* ------------------------------------
Estilos de los Ítems del Menú
------------------------------------ */


.menu-item a {
    position: relative; /* Necesario para posicionar el subrayado de manera absoluta */
    text-decoration: none; /* Eliminar subrayado por defecto */
    color: white; /* Color del texto normal (puedes cambiarlo según tu diseño) */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
    padding: 8px 12px;
}
/* Cambio de color y fondo al pasar el mouse */
.menu-item a:hover {
    
    color:#829DB5; /* Cambio de color de texto para mayor contraste */
    
    
}



/* Subrayado animado */
.menu-item a::after {
    content: ''; /* Crea un pseudo-elemento vacío */
    position: absolute; /* Posición absoluta para el subrayado */
    bottom: 0; /* Coloca el subrayado en la parte inferior del enlace */
    left: 0;
    width: 0; /* El subrayado comienza con un ancho de 0 */
    height: 2px; /* Altura del subrayado */
    background-color: #829DB5; /* Color del subrayado */
    transition: width 0.3s ease; /* Transición suave para el ancho del subrayado */
}


.menu-item a:hover::after {
    width: 100%; /* Al hacer hover, el subrayado se extiende a todo el ancho del enlace */
}









/*************************************** 
 * 4) ESTILOS SECCION INICIO 

 4.1) ESTILOS SECCION INICIO (BENEFICIOS) *
 **************************************/
/* Contenedor principal (padre del track) */

.beneficios-carrusel {
  position: relative;
  overflow: hidden;
  max-width: 100%;
   padding-left: 3rem;
  padding-right: 3rem;
}

.beneficios-container {
  overflow: hidden;
   
}


/* Track que contiene los slides */
.beneficios-track {
   display: flex;
  gap: 2rem; /* espacio entre slides */
  transition: transform 0.5s ease-in-out;
  will-change: transform;
  flex-wrap: nowrap; /* no bajar a la siguiente fila */
  padding: 0 1rem; /* espacio para que flechas no tapen */
  
}


.beneficios {
  padding: 50px 3rem;
  background-color: #D3D3D3;
  text-align: center;
  position: relative;
  overflow: hidden; /* Para ocultar lo que se salga */
}




/* Cada slide (.beneficio es el contenido) */
.beneficios-slide {
   flex: 0 0 calc((100% - 4rem) / 3); /* ancho exacto para que no se corten */
   min-height: 200px;
  scroll-snap-align: start;
  box-sizing: border-box;
}

/* Tarjeta beneficio */
.beneficio {
  background-color: #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 10px;
  text-align: center;
  transition: box-shadow 0.3s ease, transform 0.3s ease-in-out;
  height: 100%; /* para que ocupe todo el alto del slide */
}

.beneficio:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.beneficio i {
  font-size: 40px;
  color:#829DB5;
  margin-bottom: 10px;
  transition: transform 0.3s ease-in-out;
}

.beneficio i:hover {
  transform: scale(1.1);
}

.beneficio h3 {
  font-weight:600;
  font-size: 18px;
  color: #829DB5;
  margin-bottom: 10px;
}

.beneficio p {
  color: #666;
  font-weight: 400;
  font-size: 14px;
  font-family: 'Gilroy', sans-serif;
}

/* Botones navegación fuera */
.beneficios-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #829DB5;
  color: white;
  border: none;
  border-radius: 50%;
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background-color 0.3s ease;
  user-select: none;
}

.beneficios-nav:hover {
  background-color: #6c86b0;
}

.beneficios-nav.prev {
  left: 10px;
  transform: translate(-10%, -50%);
}

.beneficios-nav.next {
  right: 10px;
  transform: translate(10%, -50%);
}

/* Título beneficios */
.titulo-beneficios {
  font-size: 2rem;
  font-family:'Gilroy', sans-serif;
  font-weight: 400;
  color: #09111D;
  margin-bottom: 20px;
  letter-spacing: 1.2px;
  line-height: 1.4;
  text-align: center;
  width: 100%;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInMove 1.2s ease-in-out forwards;
  margin-top: 2rem;
}

@keyframes fadeInMove {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}





/************************************************ 
 *4.2 ESTILOS SECCION INICIO (PREGUNTAS Y RESPUESTA)

 ************************************************/
/* Estilos Generales de Preguntas Frecuentes */

.faq-container{
    /* display: block; */
    width: 80%;
    margin: 0 auto; /* Centra horizontalmente */
    
}

.faq {
    width: 100%;
    margin: 0 auto;
    padding: 30px 0;
    background-color:  #09111D;
    border-radius: 8px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
}

.faq-title {
    text-align: center;
    font-size: 2rem;
    font-weight: lighter;
    color: white;
    font-family: 'Gilroy';
    background-color:  #09111D;
    margin: 0 auto; /* Asegura que se mantenga centrado */
    margin-top: 4rem;
    margin-bottom: 2rem;
    padding: 1rem 0; /* Espaciado para que se vea mejor */
}



.faq-item {
    margin-bottom: 15px;
}

.faq-question {
    background-color:  #2c3443;   
    color: white;
    border: none;
    width: 100%;
    padding: 15px;
    text-align: left;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative; /* Para posicionar la flecha correctamente */
    font-family: 'Gilroy';
    font-style: normal;
    
}

.faq-question:hover {
    /* background-color: #2980b9; */
    background-color:#829DB5;
}

.arrow {
    font-size: 1.3rem;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: #ffffff;
    letter-spacing: -0.5px; /* Ajusta el espaciado entre caracteres */
    font-weight: lighter;     /* Asegura que la flecha sea más delgada */
}





/* Estilos de las respuestas */
.faq-answer {
    display: none;
    padding: 15px;
    background-color:  #09111D;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 1rem;
    font-family: 'Gilroy';
    font-weight: lighter;
    color: #ffffff;
    width: 100%; /* Para que las respuestas también ocupen todo el ancho del contenedor */
    
}

/* Mostrar respuesta cuando se activa */
.faq-answer.show {
    display: block;
}

/* Estilos para la rotación de la flecha */
.faq-question.active .arrow {
    transform: translateY(-50%) rotate(180deg);
}

.faq-item .faq-answer p {
    margin: 0;
}





/**************************************** 
 * 4.3) ESTILOS SECCIÓN INICIO (TESTIMONIOS)
 ****************************************/

/* Contenedor general de testimonios */
.testimonios {
    padding: 50px 0;
    background-color: #f6f6f6;
    text-align: center;
  }
  
  /* Título principal */
  .testimonios-title {
    font-size: 1.6rem;
    font-family: 'Gilroy';
    font-weight: 400;
    color: #09111D;
    margin-bottom: 1rem;
  }
  
  /* Subtítulo / frase de presentación */
  .clientes-frase {
    font-size: 1.2rem;
    color: #829DB5;
    margin-bottom: 30px;
  }
  
  /* Card individual de testimonio */
  .testimonio-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 24px;
    max-width: 400px;
    margin: auto;
    height: 20rem;
    text-align: center;
    position: relative;
  }
  
  /* Imagen del cliente o sus iniciales */
  .testimonio-card img,
  .foto-iniciales {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: block;
  }
  
  /* Estilo para cuando no hay imagen (iniciales) */
  .foto-iniciales {
    display: none;
    background-color: #829DB5;
    color: white;
    font-size: 24px;
    justify-content: center;
    align-items: center;
  }
  
  /* Nombre del cliente */
  .testimonio-card h3 {
    margin: 10px 0 5px;
    font-size: 1.3rem;
    color: #829DB5;
    font-family: 'Gilroy';
    font-weight: 500;
  }
  
  /* Cargo del cliente */
  .cargo {
    color: #829DB5;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 10px;
  }
  
  /* Comentario del cliente */
  .comentario {
    font-family: 'Gilroy';
    color:  #666;;
    font-weight: 400;
    font-size: 1rem;
  }
  
  /* ----------------------------
     CARRUSEL PERSONALIZADO
  -----------------------------*/
  
  /* Contenedor externo (incluye flechas) */
  .carrusel-externo {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
  }
  
  /* Contenedor que oculta el overflow del track */
  .custom-carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  /* Pista del carrusel que se mueve horizontalmente */
  .custom-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Slide individual del carrusel (33.3% = 3 visibles) */
  .custom-slide {
    flex: 0 0 33.3333%;
    box-sizing: border-box;
    padding: 20px;
    transition: all 0.3s ease;
  }
  /* ----------------------------
   FLECHAS DE NAVEGACIÓN (sin fondo)
-----------------------------*/

.custom-nav {
    all: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 2rem;
    color: #829DB5;
    z-index: 10;
    /* Se elimina fondo, borde redondeado y sombra */
    width: auto;
    height: auto;
    text-align: center;
    line-height: normal;
    transition: color 0.3s ease;
  }
  
  .custom-nav:hover {
    color: #09111D; /* Cambia de color al pasar el mouse */
  }
  
  /* Flecha izquierda */
  .custom-nav.prev {
    left: -30px;
  }
  
  /* Flecha derecha */
  .custom-nav.next {
    right: -30px;
  }
  
  
  /* ----------------------------
     PUNTOS DE PAGINACIÓN
  -----------------------------*/
  
  .custom-pagination {
    text-align: center;
    margin-top: 10px;
  }
  
  .custom-pagination span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #829DB5;
    opacity: 0.5;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  /* Punto activo (slide actual) */
  .custom-pagination .active {
    background-color: #09111D;
    opacity: 1;
    transform: scale(1.2);
  }
  
  
 
  





/*********************************
 * 5) ESTILOS SECCION NOSOTROS
 *********************************/

/* Estilos de la introducción */
.intro-section {
    text-align: center;
    background-color: #829DB5;
    padding: 20px 15px;
    margin-bottom: 30px;
    font-size: 1.2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
}

.intro-section p {
    font-family: 'Gilroy', sans-serif; /* Aplica la fuente Gilroy */
    font-weight: 500; /* Ajusta según lo que necesites (400 es normal, 500 es intermedio) */
    color: #D3D3D3;
}

/* Contenedor de la sección Nosotros */
.containerNosotros {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
    
}

/* Estilos de las tarjetas dentro de la sección Nosotros */
.card {
    background-color:#e5e5e5;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 280px;
    text-align: justify;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.card h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #829DB5;
    display: inline-block;
    font-family: 'Gilroy', sans-serif; /* Aplica la fuente Gilroy */
    font-weight: 500; /* Ajusta según lo que necesites (400 es normal, 500 es intermedio) */
    font-size: 1.3rem; /* Puedes reducir el tamaño si es necesario */
    color: #829DB5;
    
}

.card p {
    font-family: 'Gilroy', sans-serif; /* Aplica la fuente Gilroy */
    font-weight: 400; /* Ajusta según lo que necesites (400 es normal, 500 es intermedio) */
    color:#09111D;
    margin-bottom: 10px;
}

.card i {
    color: #829DB5;
     font-size: 2rem;
    margin-right: 2rem;
}


/* Estilos para la sección Nosotros */
.nosotros {
    display: flex;
    justify-content: space-between;
    margin-left: 2.5rem;
}

.nosotros .acerca-de-nosotros {
    font-size: 2rem;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1.2rem;
    color: #000;
}

/* Estilos para la imagen titular */
.foto-titular {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    justify-self: center;
}

/* Estilos para el contenedor titular de estudio */
.titular-estudio {
   background-color: #829DB5;
    padding: 40px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    max-width:73rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

/* Estilos de la sección titular con diseño de cuadrícula */
.titular-estudio .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: center;
    text-align: center;
}

/* Estilos del contenido textual en la sección titular */
.titular-estudio .text-content {
    text-align: justify;
}

/* Estilos de los párrafos en la sección titular */

.titular-estudio .intro-text,
.titular-estudio .details-text {
    color: #09111D;
    line-height: 1.8;
    margin-bottom: 15px;
    font-family: 'Gilroy', sans-serif; /* Aplica la fuente Gilroy */
    font-weight: 400; /* Asegura que se use la versión Medium */
}

.titular-estudio .intro-text{
    font-family: 'Gilroy', sans-serif; /* Aplica la fuente Gilroy */
    font-weight: 500; /* Asegura que se use la versión Medium */
}




/******************************
 * 6) ESTILOS SECCION BLOG*
 ******************************/

/* Contenedor principal del blog */
.blog-container {
   
    max-width: 80%;
    margin: 0 auto;
    background-color: #D3D3D3;
    min-height: 100vh; /* Hace que el blog tenga al menos el alto de la pantalla */
}

/* Estilos generales para las tarjetas del blog */
.blog-card {
    /* font-family: 'Poppins', sans-serif;  */
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    font-style: normal;
    
    
}

/* Títulos dentro de las tarjetas */
.blog-card h2 {
    margin: 0 0 10px;
    color: #09111D;
}

/* Resumen del artículo dentro de la tarjeta */
.blog-card .summary {
    /* font-family: 'Poppins', sans-serif; */
    font-weight: bold;
    font-style: italic;
}

/* Contenido completo del artículo (oculto inicialmente) */
.full-content {
    display: none;
}

.blog-card ul {
    font-weight: 200;
    letter-spacing: 1.5px;
    /* font-family: 'Poppins', sans-serif; */
    margin-left: 20px; /* Espacio entre las listas */
}

.blog-card li {
    margin-left: 10px; /* Espacio entre los ítems */
}

/* Estilo específico para las sublistas */
.blog-card ul ul {
    list-style-type: lower-alpha; /* Letras a, b, c, etc. para sublistas */
    margin-left: 30px; /* Aumentar el margen para diferenciar la sublista */
}

/* Si quieres un ícono diferente para la lista principal (como el check) */
.blog-card li::before {
    content: '✔';  /* Carácter Unicode para check */
    margin-right: 10px; /* Espacio entre el check y el texto */
    font-size: 1.2em; /* Tamaño del check */
    color: #829DB5; /* Color del check */
}

/* Estilo para los elementos de la sublista */
.blog-card .sublista li::before {
    content: '';  /* Sin contenido por defecto en la sublista */
}

/* Opcional: Si quieres que el texto de la sublista tenga un estilo diferente */
.blog-card .sublista li {
    font-style: italic;
}
  

/* Botón de "Leer más" */
button.read-more {
    background: #829DB5;
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 5px;
}

/* Estilo para el hover del botón */
button.read-more:hover {
    background: #09111D;
}

/* Estilos para la fecha del artículo */
.date {
    font-size: 0.9em;
    color: gray;
    margin-top: 10px;
}


/****************************************
 * 7) ESTILOS DE SECCION SERVICIOS
 ***************************************/
  
 .servicios1,.servicios2 {
    width: 15rem;
    height: 15rem;
 }

 /* Servicios: mejor manejo de espacio */
.servicios {
    display: flex;
    gap: 2.5rem; /* Espacio entre imágenes */
    justify-content: center;
    background-color: #D3D3D3;
}

 .servicios2 {
    display: flex;
    gap: 2.5rem; /* Espacio entre imágenes */
    justify-content: center;
}




li {
    margin-bottom: 10px;
    /* color: gray; */
}


.container-section{
    max-width: 992px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 3rem;
    
}

.main-col{
    max-width :33%;
    padding: 0 10px;
    margin-bottom: 3rem;
}


.main-col ul li {
    list-style: none;
    margin-left: 0;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    color: gray;
    font-family: 'Gilroy',sans-serif;
    font-weight: normal;
}

/*Estilos a las viñetas de cada elemento citado en el texto*/
.main-col ul li::before{
    content: "\2713";
    margin-right: 10px;
    font-size: 14px;
    color:#829DB5;
}


/* Estilos generales de texto */
p {
    font-weight: 200;
    letter-spacing: 1.5px;
    color: gray;
    
}

p strong {
    font-weight: 500;
    color: #32dbc6;
   
}

/****************************************
 * ESTILOS DE IMÁGENES FONDO (Secciones)
 ***************************************/

/* Contenedor que ocupa todo el ancho y se adapta a la altura de la pantalla */
.contenedoraInicio {
    height: 80vh; /* Asegura que no ocupe más del 80% de la pantalla */
    overflow: hidden; /* Evita que desborde */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    color: white;
    background: url('../img/fondo.jpg') center/cover no-repeat;
    
}




/* Capa de opacidad */
.contenedoraInicio::before {
    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Capa oscura semitransparente */
}


.fondoNosotros {
    background: url('../img/nosotros.jpg') no-repeat;
    background-size: 100% auto; /* Asegura que ocupe todo el ancho sin deformarse */
    height: 40vh; /* Reduce la altura para hacerla más angosta */
    width: 100vw; /* Asegura que ocupe todo el ancho de la ventana */
    background-position:center 54%;/* Ajusta la imagen hacia arriba */
}

.fondoContacto {
    background: url('../img/contacto.jpg') no-repeat;
    background-size: 100% auto;/* Asegura que ocupe todo el ancho sin deformarse */
    height: 40vh; /* Reduce la altura para hacerla más angosta */
    width: 100vw; /* Asegura que ocupe todo el ancho de la ventana */
    background-position:center 62%;/* Ajusta la imagen hacia arriba */
    margin-bottom: 2rem;/*para que no este tan pegado de la siguiente seccion*/
}

.fondoServicios {
    background: url('../img/servicios.jpg') center no-repeat;
    background-size: 100% auto; /* Asegura que ocupe todo el ancho sin deformarse */
    height: 40vh; /* Reduce la altura para hacerla más angosta */
    width: 100vw; /* Asegura que ocupe todo el ancho de la ventana */
}

.fondoBlog {
    background: url('../img/blog.jpg') center bottom no-repeat;
    background-size: 100% auto; /* Asegura que ocupe todo el ancho sin deformarse */
    height: 40vh; /* Reduce la altura para hacerla más angosta */
    width: 100vw; /* Asegura que ocupe todo el ancho de la ventana */
    margin-bottom: 2rem;
}




  
 
 








/******************************
 * 8) ESTILOS DE CONTACTO
 ******************************/
 .contactos {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 3rem;
    font-weight: 400;
}

.ubicacion {
    display: flex;
    justify-content: space-between;
    max-width: 100vw;
}

.map {
    margin-bottom: 2rem;
    border: solid 1px #000;
    flex: 1; /* El mapa ocupa todo el espacio disponible en el contenedor */
    max-width: 60%;
}

.datos {
    width: 35%; /* Ajusta según sea necesario */
    box-sizing: border-box;
}

h3 {
    font-size: medium;
}

.datos p {
    margin-bottom: 1rem;
}

.datos a {
    text-decoration: none; /* Quita el subrayado de los enlaces dentro de .datos */
    color: #007bff; /* Cambia el color del texto del enlace */
}








/******************************
 * 9) ESTILOS DE FOOTER*
 ******************************/

/* Footer principal */
.footer {
    /*background-color: #00387a;  Fondo azul del footer */
    background-color:#829DB5;
    padding: 70px 0; /* Relleno superior e inferior */
}

.footer-container {
    max-width: 1170px; /* Ancho máximo del contenedor */
    margin-bottom: 5rem; /* Separación inferior del contenedor */
}

.row {
    display: flex; /* Usa Flexbox para organizar elementos */
    flex-wrap: wrap; /* Permite que los elementos pasen a una nueva línea si es necesario */
}

/* Listas en el footer */
ul {
    list-style: none; /* Elimina las viñetas predeterminadas */
    margin: 0; /* Elimina cualquier margen exterior */
    padding-left: 0; /* Elimina cualquier padding izquierdo */
}

.footer-col ul li:not(:last-child) {
    margin-bottom: 10px; /* Espaciado entre los elementos de la lista excepto el último */
}

.footer-col ul li a {
    position: relative; /* Necesario para el pseudo-elemento */
    font-size: 16px; /* Tamaño de fuente para los enlaces */
    text-transform: capitalize; /* Primera letra en mayúscula */
    text-decoration: none; /* Elimina el subrayado */
    font-weight: 300; /* Peso ligero para el texto */
    color: #ffffff;
    /*color: #bbbbbb;  Color gris claro */
    display: inline-block; /* Esto evita que el subrayado ocupe todo el ancho del contenedor */
    /*display: block;  Cada enlace ocupa toda la línea */
    transition: all 0.3s ease; /* Transición suave en los cambios de estilo */
}

.footer-col ul li a::after {
    content: ''; /* Pseudo-elemento para la línea */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #D3D3D3; /* Color del subrayado */
    transition: width 0.3s ease; /* Efecto de animación */
}



.footer-col ul li a:hover::after {
    width: 100%;  /*Expande el subrayado al ancho completo cuando hace hover */
}


/* Títulos en el footer */
.footer-col h4 {
    font-size: 18px; /* Tamaño de fuente del título */
    color: #ffffff; /* Color blanco */
    text-transform: capitalize; /* Primera letra en mayúscula */
    margin-bottom: 35px; /* Espacio debajo del título */
    font-weight: 500; /* Peso medio del texto */
    position: relative; /* Posición relativa para incluir estilos decorativos */
}

.footer-col h4::before {
    content: ''; /* Crea un elemento visual decorativo */
    position: absolute; /* Posiciona el elemento relativo al título */
    left: 0; /* Alineado a la izquierda */
    bottom: -10px; /* Debajo del texto */
    /* background-color: #e91e63; */
    border-bottom: 1px solid #87b8e2;
    height: 2px; /* Altura de la línea */
    box-sizing: border-box; /* Incluye el borde en las dimensiones */
    width: 14rem; /* Longitud de la línea */
}

/* Estilos de las columnas */
.footer-col {
    width: 25%; /* Cada columna ocupa un 25% del ancho total */
    padding: 0 15px; /* Espaciado interno en los laterales */
}

/* Redes sociales */

.footer-col .social-links a {
    display: inline-block; /* Cada enlace se comporta como un bloque en línea */
    height: 2rem; /* Altura del enlace */
    width: 2rem; /* Ancho del enlace */
    margin: 0 10px 10px 0; /* Espaciado entre enlaces */
    display: flex; /* Usa flexbox */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    /*line-height: 40px;  Centra verticalmente el contenido */
    border-radius: 50%; /* Bordes redondeados (círculo) */
    color:#829DB5;
    background-color: #ffffff;
    font-size: 1.2rem;
}

.footer-col .social-links a:hover {
    color: #24262b; /* Cambia el color del icono a gris oscuro */
    background-color: #ffffff; /* Cambia el fondo a blanco */
}

/* Derechos reservados */
.derechos {
    padding: 20px 0; /* Relleno superior e inferior */
    text-align: center; /* Centra el texto */
    font-size: 14px; /* Tamaño de fuente pequeño */
    color: #ffffff;
}

/* Separador */
hr {
    border: 1px solid rgb(141, 141, 141); /* Color gris para la línea */
    margin-bottom: 20px 0; /* Espacio alrededor de la línea */
}


/* =================================================================*/



/* 🔹 Botón de hamburguesa */
.abrir-menu {
    display: none; /* Oculto en escritorio */
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}


/* 🔹 Botón de cerrar menú */
.cerrar-menu {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}





/* ========== HASTA 991px ========== */
@media (max-width: 991px) {
  .footer-col {
    width: 50%;
    margin-bottom: 30px;
    text-align: center;
  }

  .footer-col h4::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-col .social-links {
    justify-content: center;
  }
}




@media (max-width: 768px) {

  /* HEADER Y MENU */
  .abrir-menu {
    display: block;
  }

  .top-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }

  .nav-contacto {
    flex-direction: column;
    gap: 5px;
  }

  .social-links {
    margin-top: 0.1rem;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    height: 100vh;
    background-color: #00387a;
    padding-top: 4rem;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    overflow-y: auto;
  }

  .nav-menu.visible {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
  }

  .cerrar-menu {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
  }

  .nav-list a {
    font-size: 1.2rem;
    padding: 0.5rem;
  }

  .imagen-logo {
    width: 120px;
  }


  .beneficios,
  .beneficios-carrusel,
  .beneficios-slide,
  .custom-slide {
    flex: 0 0 100%;
    padding: 1rem 0.5rem;
    max-width: 100%;
    overflow: hidden;
    position: relative;
  }

  .beneficios-nav,
  .beneficios-nav:focus,
  .beneficios-nav:active,
  .beneficios-nav:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    z-index: 10;
  }

  .beneficios-nav.next { right: -8px; }
  .beneficios-nav.prev { left: -8px; }





  
  /* Contacto */
  .imagenContenedora {
    padding: 1rem;
  }

  .ubicacion {
    flex-direction: column;
    align-items: center;
  }

  .map {
    max-width: 95%;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }

  .datos {
    width: 100%;
    padding: 0 1rem;
    text-align: center;
  }

  .datos h3 {
    font-size: 1.1rem;
  }

  .datos p {
    font-size: 0.95rem;
  }

  
  .fondoServicios {
    background: url('../img/servicios.jpg') center no-repeat;
    background-size: 100% auto; /* Asegura que ocupe todo el ancho sin deformarse */
    height: 35vh; /* Reduce la altura para hacerla más angosta */
    width: 100vw; /* Asegura que ocupe todo el ancho de la ventana */
}





}



@media (max-width: 600px){



  /* Servicios */
  .container-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5rem 0; /* Elimina paddings si hay */
    gap: 1rem;
  }

  .main-col {
    width: 100%; /* 2 columnas con pequeño espacio */
    margin: 0 auto; /* Centrado */
  }

    /* Para que las imágenes no se desborden */
  .main-col img {
    max-width: 100%;
    height: auto;
  }

  .main-col h2 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .main-col ul li {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Asegurar que imagen final quede centrada */
  .container-section > div:last-child {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .servicios1,
  .servicios2 {
    height: auto;
    margin: 1rem auto;
    display: block;
    border-radius: 10px;
  }


  /* Acerca de Nosotros */
  .titular-estudio {
    height: auto;
    padding: 2rem 1rem;
  }

  .titular-estudio .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .foto-titular {
    margin: 0 auto 1rem;
    max-width: 150px;
  }

  .titular-estudio .text-content {
    width: 100%;
    text-align: justify;
  }

  .titular-estudio .intro-text,
  .titular-estudio .details-text {
    font-size: 1rem;
    line-height: 1.6;
  }


  

  .fondoServicios {
    background: url('../img/servicios.jpg') center no-repeat;
    background-size: 100% auto; /* Asegura que ocupe todo el ancho sin deformarse */
    height: 35vh; /* Reduce la altura para hacerla más angosta */
    width: 100vw; /* Asegura que ocupe todo el ancho de la ventana */
}


  .fondoBlog {
    background: url('../img/blog.jpg') center bottom no-repeat;
    background-size: 100% auto; /* Asegura que ocupe todo el ancho sin deformarse */
    height: 40vh; /* Reduce la altura para hacerla más angosta */
    width: 100vw; /* Asegura que ocupe todo el ancho de la ventana */
    margin-bottom: 2rem;
}

}



@media(max-width: 500px){

 /* Servicios */
  .container-section {
    flex-direction: column;
    padding: 1rem;
  }

  .main-col {
    max-width: 100% !important;
    width: 100%;
    padding: 0;
    margin-bottom: 1.5rem;
  }

  .main-col h2 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .main-col ul li {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .servicios1,
  .servicios2 {
    height: auto;
    margin: 1rem auto;
    display: block;
    border-radius: 10px;
  }




}



/* ========== MÓVILES ========== */
@media (max-width: 400px) {
  /* Header y Menú */
  .abrir-menu,
  .cerrar-menu {
    display: block;
  }

  .top-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }

  .nav-contacto {
    flex-direction: column;
    gap: 5px;
  }

  .social-links {
    margin-top: 0.1rem;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    height: 100vh;
    background-color: #00387a;
    padding-top: 4rem;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    overflow-y: auto;
  }

  .nav-menu.visible {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
  }

  .cerrar-menu {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
  }

  .nav-list a {
    font-size: 1.2rem;
    padding: 0.5rem;
  }

  .imagen-logo {
    width: 120px;
  }

  .imagen0,
  .servicios1,
  .servicios2,
  .imagen3 {
    width: 100%;
    margin-top: 2rem;
  }

  .leyenda {
    color: #fefefe;
  }

  /* Acerca de Nosotros */
  .titular-estudio {
    height: auto;
    padding: 2rem 1rem;
  }

  .titular-estudio .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .foto-titular {
    margin: 0 auto 1rem;
    max-width: 150px;
  }

  .titular-estudio .text-content {
    width: 100%;
    text-align: justify;
  }

  .titular-estudio .intro-text,
  .titular-estudio .details-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Servicios */
  .container-section {
    flex-direction: column;
    padding: 1rem;
  }

  .main-col {
    max-width: 100% !important;
    width: 100%;
    padding: 0;
    margin-bottom: 1.5rem;
  }

  .main-col h2 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .main-col ul li {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .servicios1,
  .servicios2 {
    height: auto;
    margin: 1rem auto;
    display: block;
    border-radius: 10px;
  }

  /* Contacto */
  .imagenContenedora {
    padding: 1rem;
  }

  .ubicacion {
    flex-direction: column;
    align-items: center;
  }

  .map {
    max-width: 95%;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }

  .datos {
    width: 100%;
    padding: 0 1rem;
    text-align: center;
  }

  .datos h3 {
    font-size: 1.1rem;
  }

  .datos p {
    font-size: 0.95rem;
  }




}




/* ========== MÓVILES PEQUEÑOS ========== */
@media (max-width: 390px) {
  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background-color: #1A202C;
    padding: 1rem;
    font-size: 0.9rem;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    flex-wrap: wrap;
    height: 3rem;
  }

  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1A202C;
    padding: 5px;
    transition: top 0.5s ease-in-out, background-color 0.3s ease-in-out;
    z-index: 1050 !important;
    position: relative;
    height: 5rem;
  }

  .social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .social-links a {
    margin-left: 1.8rem;
    font-size: 1rem;
  }

  .beneficios, .beneficios-carrusel, .beneficios-slide, .beneficios-nav {
    padding: 1rem 0.5rem;
    max-width: 100%;
    flex: 0 0 100%;
    position: relative;
    overflow: hidden;
    color: white;
  }

  .beneficios-nav,
  .beneficios-nav:focus,
  .beneficios-nav:active,
  .beneficios-nav:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
  }

 .container-section {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 1rem;
}
 


.main-col{
  max-width: 100% !important;
   width: 100%;
}
 
  .footer-col {
    width: 100%;
    text-align: center;
  }

  .footer-col .social-links {
    justify-content: center;
  }

  .footer-col ul li {
    margin-left: 0;
    text-align: center;
  }

  .footer-col h4::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 5rem;
    height: 3px;
    background-color: #87b8e2;
    border-radius: 2px;
  }

  .custom-nav, li.email-item {
    display: none;
  }


  .beneficios-carrusel {
  position: relative; /* Asegura que las flechas se posicionen respecto a este contenedor */
}

.beneficios-nav.prev,
.beneficios-nav.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

.beneficios-nav.prev {
  left: 0; /* o ajustá a -5px si querés que sobresalga un poco */
}

.beneficios-nav.next {
  right: 0; /* igual que el anterior */
}



}