/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;   /* Asegura que las secciones se apilen de arriba hacia abajo */
  justify-content: flex-start; /* Alineación de las secciones */
  font-family: 'Poppins', sans-serif;
  color: #fff;
}

/* Hero Section */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Alinea el contenido a la derecha */
  position: relative;
  overflow: hidden;
  background: url('../images/background-prime.png') no-repeat center center/cover;
}

.content {
  z-index: 2;
  text-align: left; /* Alinea el texto dentro del div a la derecha */
  margin-right: 50px; /* Espacio desde el borde derecho de la página */
}

.content h1 {
  font-size: 3.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(70deg, #1ac6cf, #117a65);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content h2 {
  font-size: 3.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(70deg, #1ac6cf, #117a65);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content h3 {
  font-size: 3.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(70deg, #1ac6cf, #117a65);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content h4 {
  font-size: 3.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(70deg, #1ac6cf, #117a65);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.content h5 {
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  /*background: linear-gradient(70deg, #1ac6cf, #117a65);*/
  background: #148f77;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content h6 {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 1px; /* Reduce el espaciado entre letras */
  /*background: linear-gradient(70deg, rgba(26, 198, 207, 0.7), rgba(17, 122, 101, 0.7));*/ /* Colores más suaves */
  background: #148f77;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85; /* Reduce ligeramente la opacidad del texto */
}



.content p {
  margin: 10px 0;
  /*font-size: 0.5rem;*/
  color: #34495e;
}


/* Botones */
.btn {
  display: inline-block;
  background: linear-gradient(45deg, #714b67, #117a65);
  color: #fff;
  border: none;
  height: 60px;
  font-size: 1.6em;
  padding: 15px 30px;
  cursor: pointer;
  transition: 0.4s ease all;
  outline: none;
  box-shadow: 0 0 10px rgba(113, 75, 103, 0.6), 0 0 15px rgba(17, 122, 101, 0.6);
}

/*degrado de botones*/
/*.btn-explore {
  display: inline-block;
  background: linear-gradient(45deg, #714b67, #117a65);
  color: #fff;
  border: none;
  height: 60px;
  font-size: 1.6em;
  padding: 15px 30px;
  cursor: pointer;
  transition: 0.4s ease all;
  outline: none;
  box-shadow: 0 0 10px rgba(113, 75, 103, 0.6), 0 0 15px rgba(17, 122, 101, 0.6);
  animation: zoom-infinite 2.5s infinite ease-in-out, glow-effect 2.5s infinite ease-in-out;
}*/

.btn-explore {
  display: inline-block;
  font-size: 1.6em; /* Tamaño del texto */
  color: #117a65; /* Color principal */
  text-decoration: none; /* Sin subrayado */
  padding: 10px 20px; /* Espaciado interno más generoso */
  /*border: 2px solid #117a65;*/ /* Borde elegante */
  border-radius: 30px; /* Bordes redondeados para un toque refinado */
  background: transparent; /* Fondo transparente */
  cursor: pointer;
  transition: all 0.4s ease; /* Transiciones suaves en todos los cambios */
}

.btn-explore:hover {
  color: #fff; /* Texto blanco en hover */
  background: linear-gradient(45deg, #714b67, #117a65); /* Fondo degradado */
  border-color: transparent; /* Elimina el borde en hover */
  box-shadow: 0 4px 15px rgba(113, 75, 103, 0.4), 0 4px 15px rgba(17, 122, 101, 0.4); /* Sombra elegante */
  transform: translateY(-3px); /* Efecto de elevación */
}

.btn-explore:active {
  transform: translateY(0); /* Sin elevación al hacer clic */
  box-shadow: 0 2px 10px rgba(113, 75, 103, 0.3), 0 2px 10px rgba(17, 122, 101, 0.3); /* Sombra más tenue */
}
/*.btn-exploreservices {
  display: inline-block;
  font-size: 1.2em; 
  color: #117a65;
  text-decoration: none; 
  padding: 10px 20px; 
  border-radius: 30px; 
  background: transparent; 
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(113, 75, 103, 0.4), 0 4px 15px rgba(17, 122, 101, 0.4); 
  transition: all 0.4s ease; 
}

.btn-exploreservices:hover {
  color: #fff; 
  background: linear-gradient(45deg, #714b67, #117a65); 
  border-color: transparent; 
  box-shadow: 0 4px 15px rgba(113, 75, 103, 0.4), 0 4px 15px rgba(17, 122, 101, 0.4);
  transform: translateY(-3px);
}*/
.btn-exploreservices {
  display: inline-block;
  font-size: 1.2em; /* Tamaño del texto */
  color: #117a65; /* Color principal */
  text-decoration: none; /* Sin subrayado */
  padding: 12px 24px; /* Espaciado interno */
  background: transparent; /* Fondo transparente */
  cursor: pointer;

  /* Borde estilo dibujo */
  /*border: 1px solid #117a65; */
  border-radius: 3px; /* Sin bordes redondeados */
  position: relative;
  transition: all 0.4s ease;

  /* Sombras estilo boceto */
  box-shadow: 
    2px 2px 0px #333, 
    4px 4px 0px #117a65,
    -2px -2px 0px #555;

  /* Añade un efecto de líneas dibujadas */
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(0, 0, 0, 0.1) 4px,
    rgba(0, 0, 0, 0.1) 5px
  );
}

/* Efecto hover para mejorar la interactividad */
.btn-exploreservices:hover {
  background: linear-gradient(45deg, #714b67, #117a65);
  color: #fff; /* Texto blanco */
  box-shadow: 
    -2px -2px 0px #333, 
    -4px -4px 0px #555; /* Sombra inversa */
  transform: scale(1.05); /* Ligero aumento */
}

.btn-exploreservices:active {
  transform: translateY(0); /* Sin elevación al hacer clic */
  box-shadow: 0 2px 10px rgba(113, 75, 103, 0.3), 0 2px 10px rgba(17, 122, 101, 0.3); /* Sombra más tenue */
}

@keyframes zoom-infinite {
  0% {
    transform: scale(1); /* Tamaño inicial */
  }
  50% {
    transform: scale(1.1); /* Zoom hacia afuera */
  }
  100% {
    transform: scale(1); /* Vuelve al tamaño inicial */
  }
}
/* Animación de brillo pulsante */
@keyframes glow-effect {
  0% {
    box-shadow: 0 0 10px rgba(113, 75, 103, 0.6), 0 0 15px rgba(17, 122, 101, 0.6);
  }
  50% {
    box-shadow: 0 0 20px rgba(113, 75, 103, 0.8), 0 0 30px rgba(17, 122, 101, 0.8);
  }
  100% {
    box-shadow: 0 0 10px rgba(113, 75, 103, 0.6), 0 0 15px rgba(17, 122, 101, 0.6);
  }
}
.btn:hover {
  background: #fff;
  color: #1aab8a;
}

.btn:before,
.btn:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 0;
  background: #1aab8a;
  transition: 0.4s ease all;
}

.btn:before {
  top: 0;
  right: 0;
}

.btn:after {
  bottom: 0;
  left: 0;
}

.btn:hover:before,
.btn:hover:after {
  width: 100%;
}
/* Header */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
 /* box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);**// /* Sombra más suave */
 padding: 10px 0; /* Añade relleno interno */
}

/* Navbar */
.navbar {
  max-width: 1200px;
  margin: 10px auto;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px; /* Espaciado entre el logo y el texto */
  font-size: 1.4rem;
  font-weight: bold;
  color: rgba(17, 122, 101, 0.8); /* Verde translúcido */
  text-transform: uppercase;
  cursor: pointer;
}

.logo img {
  width: 60px;
  height: 60px;
}

/* Menu */
.menu {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0; /* Elimina márgenes */
  padding: 0; /* Elimina relleno */
  margin-left: auto; /* Empuja el menú completamente a la derecha */
}

.menu li {
  margin: 0; /* Elimina márgenes alrededor de los elementos del menú */
  padding: 0; /* Elimina relleno extra */
}

.menu a {
  text-decoration: none;
  font-size: 1rem;
  /*color: rgba(255, 255, 255, 0.9); *//* Blanco con opacidad */
  /*color: rgba(0, 0, 0, 0.9);*/ /* Negro con opacidad */
  color: rgba(30, 30, 30, 0.9); /* Negro cenizo con opacidad */
  font-weight: bold;
  text-transform: uppercase;
  padding: 3px 5px;
  transition: all 0.3s ease-in-out;
  border: none; /* Sin bordes */
  outline: none; /* Elimina contornos de enfoque */
  background: transparent; /* Fondo transparente */
  box-shadow: none; /* Asegura que no haya sombras visibles */
}

.menu a:hover {
  background: rgba(17, 122, 101, 0.8); /* Fondo más opaco en hover */
  color: rgba(255, 255, 255, 1); /* Blanco completo en hover */
  transform: translateY(-3px); /* Efecto de elevación */
  text-decoration: underline; /* Subrayado solo al pasar el ratón */
  border-radius: 15px;
}

/* Efecto cuando el header está scrolleado */
header.scrolled {
  background-color: #292a2d; /* Fondo negro translúcido */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra suave */
}
/* Cuando el header tiene la clase "scrolled" */
header.scrolled .menu a {
  color: rgba(255, 255, 255, 1); /* Blanco al hacer scroll */
}
header.scrolled .menu a:hover {
  background: rgba(17, 122, 101, 0.9); /* Fondo más oscuro al pasar el ratón */
  color: rgba(255, 255, 255, 1); /* Blanco completo en hover */
}
/* Transición para los enlaces del menú */
.menu a {
  transition: color 0.3s ease, background 0.3s ease, transform 0.2s ease;
}

/* Agregar el separador | */
/*.menu a::after {
  content: '';
  margin: 0 3px; 
  color: rgba(0, 0, 0, 0.5);
}*/

/* Eliminar el separador en el último enlace */
/*.menu a:last-child::after {
  content: '|'; 
}*/

/* Technology Section */
.technology-section {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.technology-section h2 {
  font-size: 30px;
  color:  #148f77;
  margin-bottom: 20px;
}

.technology-section p {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
}

.tech-list {
  max-width: 100%;
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0; /* Gris suave */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para un toque elegante */
  padding: 20px; /* Espaciado interno */
}


.tech-item {
  justify-content: center;
  align-items: center;
  /*background-color: #f9f9f9;*/
  background-color: #f0f0f0;;
  padding: 0px;
  /*border-radius: 8px;*/
  width: 850px;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
  transition: all 0.3s ease;
}

/*.tech-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}*/

.tech-item i {
  font-size: 50px;
  color: #0073e6;
  margin-bottom: 20px;
}

.tech-item h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.tech-item p {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
  text-align: justify;
  word-spacing: 2px; /* Espaciado entre palabras */
  line-height: 1.6; /* Altura de línea */
}

.tech-item ul {
  list-style-type: none;
  padding: 0;
  font-size: 14px;
  color: #777;
}

.tech-item ul li {
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.tech-item ul li::before {
  content: "\2022";
  /*color: #0073e6;*/
  margin-right: 5px;
  font-size: 20px;
}

/* Lista de botones */
.button-list {
  list-style: none;          /* Elimina los puntos de la lista */
  padding: 0;                /* Elimina el relleno */
  margin: 0;                 /* Elimina márgenes */
  display: flex;             /* Muestra los elementos en una fila (horizontal) */
  flex-wrap: nowrap;         /* Impide que los elementos se envuelvan a la siguiente línea */
  gap: 15px;                 /* Espacio entre los ítems */
  align-items: center;       /* Centra los ítems verticalmente */
}

/* Estilo de cada ítem */
.button-list li {
  display: flex;             /* Organiza el contenido de cada ítem en línea */
  flex-direction: column;    /* Organiza el contenido dentro de cada ítem en columna (icono arriba, texto abajo) */
  align-items: center;       /* Centra el contenido dentro de cada ítem */
  justify-content: center;   /* Centra el contenido dentro de cada ítem */
  padding: 10px;             /* Espaciado dentro del ítem */
  cursor: pointer;          /* Cambia el cursor a mano al pasar sobre el ítem */
  transition: all 0.3s ease-in-out;
  font-size: 0.9rem;
  width: 120px;              /* Ancho fijo para cada ítem */
  height: 120px;             /* Altura fija para cada ítem */
  /*background-color: white;*/   /* Fondo blanco */
  color: #111827 !important; /* Color de texto */
}


/* Estilo para el botón "Ver más" */
.view-more {
  text-align: center;        /* Centra el texto de "Ver más" */
  padding: 10px 0;
  font-size: 1rem;
  cursor: pointer;
}


.button-list li::before {
  content: none !important;  /* Asegura que no haya viñetas generadas */
}
.button-list li i {
  font-size: 20px;
  margin-bottom: 5px;

}

.button-list li:hover {
  /*background-color: #ebedef;*/
  transform: scale(1.05);
}

.button-list li:active {
  transform: scale(1);
}

.button-list li img {
  height: auto;
  margin-bottom: 5px;
}

.button-list li span {
  text-align: center;
}

/* Scroll elegante para la lista */
.scroll-container {
  max-height: 230px; /* Ajusta la altura máxima del contenedor */
  overflow-y: auto; /* Habilita el scroll vertical */
  padding-right: 10px; /* Espacio adicional para el scroll */
}

/* Personalización del scroll */
.scroll-container::-webkit-scrollbar {
  width: 13px; /* Ancho del scroll */
}

.scroll-container::-webkit-scrollbar-thumb {
  /*background: linear-gradient(45deg, #714b67, #117a65);*/ /* Color degradado */
  background-color: rgba(0, 115, 230, 0.1);
  border-radius: 5px; /* Bordes redondeados */
  border: none; /* Asegura que no haya borde adicional */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #aab7b8; /* Color al pasar el cursor */
}

.scroll-container::-webkit-scrollbar-track {
  background: #d6dbdf; /* Fondo del track */
  border-radius: 5px; /* Bordes redondeados */
  border: none; /* Elimina el borde del track */
  box-shadow: none; /* Elimina sombras */
}


.view-more:focus {
  outline: 2px dashed #0073e6; /* Borde visible al enfocarse */
  outline-offset: 4px; /* Espacio entre el borde y el elemento */
}
.view-more img {
  width: 30px;  /* Tamaño de la imagen (ajusta según necesidad) */
  height: auto;
  margin-left: 10px;  /* Espacio entre el texto y la imagen */
}

.view-more:hover {
  color: #3a7569; /* Cambia a un color más oscuro */
  /*text-decoration: underline;*/ /* Añade subrayado */
  transform: scale(1.05); /* Un ligero aumento de tamaño */
}

.view-more:hover img {
  transform: translateX(5px);  /* Mueve la flecha hacia la derecha al pasar el ratón */
}
.view-more::after {
  content: "➔"; /* Flecha decorativa */
  margin-left: 8px; /* Espacio entre el texto y la flecha */
  font-size: 20px; /* Tamaño de la flecha */
  color: #3a7569;
  opacity: 0; /* Inicialmente invisible */
  transform: translateX(-5px); /* Posiciona la flecha ligeramente a la izquierda */
  transition: all 0.3s ease-in-out; /* Transición para suavizar el movimiento */
}
.view-more:hover::after {
  color: #3a7569; /* Cambia el color de la flecha */
  opacity: 1; /* Haz la flecha visible */
  transform: translateX(0); /* Mueve la flecha a su posición final */
}
.icon-size {
  font-size: 24px; /* Ajusta este valor al tamaño deseado */
  width: 300px;     /* Asegura que el ícono mantenga proporción */
  height: 110px;    /* Asegura que el ícono mantenga proporción */
  line-height: 1;  /* Opcional: ajusta el espaciado interno */
}

.icon-size-ai {
  font-size: 20px; /* Ajusta este valor al tamaño deseado */
  width: 230px;     /* Asegura que el ícono mantenga proporción */
  height: 100px;    /* Asegura que el ícono mantenga proporción */
  line-height: 1;  /* Opcional: ajusta el espaciado interno */
}

.about-us-section {
  padding: 60px 20px;
  background-color: #85c1e9; /* Fondo suave */
  text-align: center;
}

.about-us-section h2 {
  font-size: 1.20em;
  color: # #117a65; /* Color principal */
  margin-bottom: 20px;
  letter-spacing: -0.5px; /* Reduce el espacio entre letras */
  word-spacing: -2px; /* Reduce el espacio entre palabras */
}

.about-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: leff;
  gap: 30px;
}

.about-text {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
  text-align: justify;
  font-size: 1.2em;
  line-height: 1.6;
  color: black;
}

.about-text strong {
  color:  #f8f9f9;
}

.about-text em {
  color: #555;
  font-style: italic;
  font-weight: bold;
}

.about-image {
  flex: 1;
  min-width: 400px;
  max-width: 700px;
}

.about-image img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
  background: #000;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Alinea los elementos hacia arriba */
  gap: 20px;
}

.footer-left {
  display: flex;
  flex-direction: column; /* Apila los elementos (logo y copyright) verticalmente */
  align-items: flex-start; /* Alinea el contenido hacia la izquierda */
}


.footer-logo {
  margin-bottom: 10px; /* Espacio entre el texto y las redes sociales */
  font-size: 1.4rem; /* Tamaño de la fuente para "Encuentranos en" */
  font-weight: bold; /* Puedes hacer el texto más destacado si lo deseas */
  display: flex;
  align-items: center;
  gap: 10px; /* Espaciado entre el logo y el texto */
  font-size: 1.4rem;
  font-weight: bold;
  color: rgba(17, 122, 101, 0.8); /* Verde translúcido */
  text-transform: uppercase;
  cursor: pointer;
}
.footer-logo img {
  width: 80px;
  height: 80px;
}
.footer-copy {
  font-size: 0.9rem;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.footer-copy:hover {
  color: #fff;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-links a {
  text-decoration: none;
  font-size: 1rem;
  color: #fff;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #00ffcc;
}

.footer-socials {
  display: flex;
  flex-direction: column; /* Organiza los elementos en columna */
  align-items: center; /* Centra los elementos horizontalmente */
  gap: 10px; /* Añade un pequeño espacio entre "Encuentranos en" y los iconos */
  margin-bottom: 20px;
}

.footer-socials-header {
  font-size: 1.2rem;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px; /* Añade espacio debajo del texto */
}

.footer-social-icons {
  display: flex; /* Los iconos se mantienen en fila */
  gap: 20px;
}

.footer-socials .social-icon {
  font-size: 1.5rem;
  color: #fff;
  transition: color 0.3s ease;
}

.footer-socials .social-icon:hover {
  color: #00ffcc;
}

.footer-socials a {
  font-size: 2rem; /* Ajusta el tamaño de los iconos */
  color: #fff; /* Asegura que los iconos sean visibles */
  transition: color 0.3s ease;
}

.footer-socials a:hover {
  color: #00ffcc; /* Cambio de color al pasar el cursor */
}

.footer-socials .social-icon {
  font-size: 1.5rem;
  color: #fff;
  transition: color 0.3s ease;
}

.footer-socials .social-icon:hover {
  color: #00ffcc;
}

.footer-line {
  width: 100%; /* Asegura que la línea cubra todo el ancho */
  height: 3px; /* Altura de la línea */
  background-color: #117a65; /* Color de la línea (puedes elegir otro color si prefieres) */
  margin-bottom: 20px; /* Espacio debajo de la línea */
}

/* General del contenedor */
.chat-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

/* Botón del ícono de chat */
.chat-icon {
  background: linear-gradient(145deg, #117a65, #0d5a4a);
  color: #fff;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -2px 6px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-icon:hover {
  transform: scale(1.1);
  background: linear-gradient(145deg, #0d5a4a, #117a65);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Ventana del chat */
.chat-box {
  display: none;
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 350px;
  height: 450px;
  background: #0f3328;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid #145e4d;
  font-family: 'Arial', sans-serif;
}

/* Cabecera del chat */
.chat-header {
  background: linear-gradient(145deg, #117a65, #0d5a4a);
  color: #fff;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.chat-header button:hover {
  color: #ff6666;
}

/* Cuerpo del chat (mensajes) */
.chat-messages {
  height: calc(100% - 120px);
  padding: 10px;
  background: #0f2b24;
  overflow-y: auto;
}

/* Estilo del mensaje */
.message {
  display: flex;
  flex-direction: column; /* Coloca los elementos en una columna */
  align-items: flex-start; /* Alinea el texto a la izquierda */
  background: #117a65; /* Fondo del mensaje */
  color: white;
  padding: 10px;
  border-radius: 8px;
  margin: 5px 0;
  max-width: 80%; /* Para que los mensajes no ocupen toda la pantalla */
  position: relative; /* Para posicionar la hora debajo */
  padding-bottom: 20px; /* Agrega espacio extra en la parte inferior para la hora */
}

/* Estilo de la hora */
.message .time {
  font-size: 12px;
  color: #e0e0e0; /* Color tenue para la hora */
  position: absolute;
  bottom: 5px; /* Coloca la hora cerca de la parte inferior */
  right: 10px; /* Alinea la hora a la derecha */
}


.message.received {
  background: #145e4d;
  color: #fff;
  align-self: flex-start;
}

.message.sent {
  background: #117a65;
  color: #fff;
  align-self: flex-end;
  text-align: right;
}

/* Entrada de texto */
.chat-input {
  display: flex;
  padding: 10px;
  background: #0d5a4a;
  border-top: 1px solid #145e4d;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  border: none;
  border-radius: 10px;
  outline: none;
  margin-right: 10px;
}

.chat-input button {
  background: #117a65;
  border: none;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chat-input button:hover {
  background: #0f3328;
}

.whatsapp-button img {
    width: 40px; /* Cambia el tamaño según tus necesidades */
    height: 40px; /* Asegúrate de mantener proporción */
    border-radius: 50%; /* Hace que el botón sea redondo */
}

.whatsapp-button {
    position: fixed; /* Para que esté siempre visible */
    bottom: 20px; /* Ajusta la posición desde abajo */
    right: 20px; /* Ajusta la posición desde la derecha */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    position: fixed;
    padding-right: 160px;
}

/*Nuestros servicios*/

/* Contenedor principal */
.div-container {
  display: flex;
  align-items: center; /* Centra verticalmente el contenido */
  justify-content: space-between; /* Asegura que los divs estén separados */
  width: 100%;
  height: 250px; /* Ajusta la altura según tus necesidades */
  background-color: #fff; /* Fondo blanco */
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); *//* Sombra elegante */
  padding: 10px; /* Espaciado alrededor del contenedor */
}

/* División izquierda y derecha */
.div-left, .div-right {
  flex: 1; /* Ambos divs ocupan el mismo ancho */
  padding: 5px; /* Espaciado interno */
}

.div-left {
  display: flex;
  justify-content: flex-end; /* Acerca la imagen hacia la línea divisoria */
  align-items: center; /* Centra la imagen verticalmente */
  color: #117a65; /* Verde oscuro */
  max-width: 45%; /* Reduce ligeramente el ancho del contenedor izquierdo */
  margin-right: 20px; /* Incrementa la separación de la imagen respecto a la línea divisoria */
}
.div-left img {
  max-width: 70%; /* Ajusta el tamaño de la imagen */
  height: auto; /* Mantiene la proporción */
  margin-left: 5%; /* Añade un pequeño margen desde el borde izquierdo */
}

/* Línea divisoria */
.div-divider {
  width: 3px; /* Incrementa el ancho de la línea */
  height: 80%; /* Largo de la línea */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)); /* Gradiente elegante */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Contenido de la derecha */
.div-right {
  text-align: justify; /* Texto alineado a la izquierda */
  color: #714b67; /* Morado oscuro */
  max-width: 50%; /* Limita el ancho del texto */
  margin-left: 20px; /* Incrementa la separación del texto respecto a la línea divisoria */
  margin-right: 20px;
  line-height: 1.5; /* Mejora la legibilidad */
  word-wrap: break-word; /* Ajusta el texto si es muy largo */

}

/*lu horizontales*/
.more-button {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.more-button button {
  background-color: #6c757d; /* Gris elegante */
  color: white;
  border: none;
  padding: 16px; /* Asegura que el botón sea completamente redondo */
  border-radius: 50%; /* Forma completamente redonda */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px; /* Tamaño de la flecha */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  width: 50px; /* Tamaño del botón */
  height: 50px; /* Asegura que el botón sea circular */
}

.more-button button:hover {
  background-color: #5a6268; /* Gris más oscuro cuando se pasa el cursor */
  transform: translateY(-2px); /* Efecto de elevación */
}

.more-button .arrow {
  border: solid white;
  border-width: 0 2px 2px 0; /* Flecha con bordes ajustados */
  display: inline-block;
  padding: 3px;
  transform: rotate(2deg); /* Flecha apuntando hacia la derecha */
  width: 10px; /* Ajuste del tamaño de la flecha */
  height: 10px; /* Ajuste del tamaño de la flecha */
}

/*Botones de footer* Contenedor de los botones */
.button-footer {
  display: flex; /* Flexbox para organizar los botones en fila */
  gap: 20px; /* Espacio entre los botones */
  margin-top: 50px;
  justify-content: flex-start; /* Alinea los botones a la izquierda */
  padding-left: 20px; /* Espacio adicional desde el borde izquierdo */
}

/* Estilos generales de los botones */
.btnfooter {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 30px; /* Tamaño del botón */
  border-radius: 30px; /* Bordes redondeados */
  border: none;
  text-align: center; /* Centra el texto dentro del botón */
  cursor: pointer;
  transition: all 0.3s ease; /* Transiciones suaves */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Sombra elegante */
}

/* Botón principal */
.btnfooter-primary {
  display: inline-block;
  font-size: 1.0em; /* Tamaño del texto */
  color: #117a65; /* Color principal */
  text-decoration: none; /* Sin subrayado */
  padding: 10px 20px; /* Espaciado interno más generoso */
  /*border: 2px solid #117a65;*/ /* Borde elegante */
  border-radius: 30px; /* Bordes redondeados para un toque refinado */
  background: transparent; /* Fondo transparente */
  cursor: pointer;
  transition: all 0.4s ease; /* Transiciones suaves en todos los cambios */
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
}
.btnfooter-primary:hover {
   color: #fff; /* Texto blanco en hover */
  background: linear-gradient(45deg, #714b67, #117a65); /* Fondo degradado */
  border-color: transparent; /* Elimina el borde en hover */
  box-shadow: 0 4px 15px rgba(113, 75, 103, 0.4), 0 4px 15px rgba(17, 122, 101, 0.4); /* Sombra elegante */
  transform: translateY(-3px); /* Efecto de elevación */
}

/* Botón secundario */
.btnfooter-secondary {
  background-color: #ffffff; /* Fondo blanco */
  color: rgba(17, 122, 101, 0.8); /* Texto verde */
  border: 2px solid rgba(17, 122, 101, 0.8); /* Borde elegante */
}

.btnfooter-secondary:hover {
  background-color: #f9f9f9; /* Fondo gris claro */
  color: #388E3C; /* Verde más oscuro */
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
  transform: translateY(-5px); /* Efecto de elevación más fuerte */
}


/*boton de ver mas*/

/* Estilos comunes para los botones */
.btn-round {
  font-size: 30px; /* Tamaño del icono */
  font-weight: bold;
  width: 60px; /* Tamaño fijo */
  height: 60px; /* Tamaño fijo */
  color: white;
  background-color: #999999; /* Fondo gris más oscuro */
  border: none;
  border-radius: 50%; /* Redondeo completo */
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4), 0px 2px 10px rgba(0, 0, 0, 0.3); /* Sombra 3D más profunda */
}

/* Efecto de hover (Elevación 3D) */
.btn-round:hover {
  background-color: #666666; /* Fondo gris aún más oscuro */
  transform: translateY(-5px); /* Eleva el botón hacia arriba */
  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.6), 0px 5px 20px rgba(0, 0, 0, 0.5); /* Sombra más profunda */
}

/* Ícono de más */
.icon {
  font-size: 30px; /* Asegura que el icono sea grande */
}
a {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Mantiene el color del texto original */
}

a:hover {
    text-decoration: none; /* También quita el subrayado al pasar el cursor */
}