:root {
  /* Colores */
  --color-morado: #1a052d; /* Morado oscuro */
  --color-verde: #6cf3ce; /* Verde */
  --color-fucsia: #ff4361; /* Fucsia*/
  --color-gris-claro: #f5f5f5; /* Gris claro */

  /* Tipografías */
  --fuente-montserrat: "Montserrat", sans-serif;
  --fuente-krona: "Krona One", sans-serif;
}

* {
  box-sizing: border-box;
  text-decoration: none;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-size: 1.6rem; /* 1.6rem = 16px */
  margin: 0;
  padding: 0;
}


/* fondo fijo */

@keyframes hero-gradient-animation {
  0% {
      --x-0: 98%;
      --c-0: hsla(92, 0%, 100%, 0.86);
      --y-0: 98%;
      --s-start-0: 2%;
      --s-end-0: 78.72573401919361%;
  }

  100% {
      --x-0: 2%;
      --c-0: hsla(321, 0%, 100%, 0.86);
      --y-0: 98%;
      --s-start-0: 2%;
      --s-end-0: 78.72573401919361%;
  }
}

@property --x-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 98%
}

@property --c-0 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(92, 0%, 100%, 0.86)
}

@property --y-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 98%
}

@property --s-start-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 2%
}

@property --s-end-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 78.72573401919361%
}

@property --y-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 91%
}

@property --s-start-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 2%
}

@property --s-end-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 78.72573401919361%
}

@property --c-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(321, 100%, 13%, 0.42)
}

@property --x-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 98%
}

@property --c-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(218, 41%, 29%, 0.42)
}

@property --s-start-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 2%
}

@property --s-end-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 61.288600779667334%
}

@property --x-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 16%
}

@property --y-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 87%
}

@property --y-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 79%
}

@property --s-start-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 2%
}

@property --s-end-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 61.288600779667334%
}

@property --x-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 52%
}

@property --c-3 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(289, 35%, 25%, 0.42)
}

.fondo-fijo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  background-size: cover; /* Asegura que el fondo cubra toda la pantalla */
  background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */

  --x-0: 98%;
  --c-0: hsla(92, 0%, 100%, 0.86);
  --y-0: 98%;
  --y-1: 91%;
  --c-1: hsla(321, 100%, 13%, 0.42);
  --x-1: 98%;
  --c-2: hsla(218, 41%, 29%, 0.42);
  --x-2: 16%;
  --y-2: 87%;
  --y-3: 79%;
  --x-3: 52%;
  --c-3: hsla(289, 35%, 25%, 0.42);
  ;
  background-color: hsla(271.50000000000006, 80%, 9%, 1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1922 1922' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
  animation: hero-gradient-animation 5s linear infinite alternate;
  background-blend-mode: overlay, overlay, normal, normal, normal;
}



@media screen and (min-width: 370px) and (max-width: 760px) {
  
  .fondo-fijo { 
    background-attachment: scroll;
  }
}

/* Fin fondo fijo */



/* Estilo para la barra de desplazamiento en todo el sitio */
::-webkit-scrollbar {
  width: 10px; /* Ancho de la barra de scroll vertical */
}

/* Estilo para la pista de la barra de desplazamiento */
::-webkit-scrollbar-track {
  background: #1a052d; /* Color de fondo de la pista */
}

/* Estilo para el "dedo" (thumb) de la barra de desplazamiento */
::-webkit-scrollbar-thumb {
  background-color: #ff4361; /* Color del thumb */
  border-radius: 10px; /* Bordes redondeados del thumb */
  border: 1px solid #ff4361; /* Borde alrededor del thumb */
}

/* Estilo para el thumb cuando se pasa el cursor por encima */
::-webkit-scrollbar-thumb:hover {
  background-color: #6cf3ce; /* Color del thumb al pasar el mouse */
  border: 1px solid #6cf3ce;
}


.estilo-degradado {
  font-family: var(--fuente-krona);
  font-weight: 700;
  font-size: 5rem;
  background: linear-gradient(
    to right,
    #6cf3ce,
    #6cf3ce,
    #6cf3ce,
    #6cf3ce,
    #ff4361,
    #ff4361,
    #ff4361,
    #ff4361
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.diseño-tarjetas {
  /* Estilos de posición y tamaño */
  position: relative;
  border-radius: 2rem;
  overflow: hidden;

  /* Fondo con efecto de vidrio */
  background: rgba(255, 255, 255, 0.1);
}

.diseño-tarjetas::before {
  content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2rem;
    padding: 1.3px; /* Ancho del borde degradado */
    background: linear-gradient(
        to right,
        #6cf3ce,
        #6cf3ce,
        #6cf3ce,
        #ff4361,
        #ff4361,
        #ff4361
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Propiedad estándar */
    mask-composite: exclude; /* Versión estándar de la propiedad */
    z-index: -1;
}

.diseño-tarjetas > * {
  position: relative;
  z-index: 1;
}


/* Botón CTA servicios accion */
.btn-diseño {
  display: inline-block;
  padding: 0.6rem 1.3rem;
  font-family: var(--fuente-montserrat);
  font-size: 1.6rem;
  font-weight: 500;
  color: #1a052d;
  background: linear-gradient(
    to right,
    #6cf3ce,
    #6cf3ce,
    #6cf3ce,
    #ff4361,
    #ff4361,
    #ff4361
  );
  border-radius: 2rem;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-diseño:hover {
  background: linear-gradient(45deg, #ff4361, #ff4361, #6cf3ce, #6cf3ce);
}


/* Responsive monitor 27pulg menu header */
@media screen and (min-width: 1920px) {
  .header {
    padding: 3rem 14rem;
  }
  
}

/* Fin del header y menú */



/* Inicio Seccion 1*/

.contenedor-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

main h2 {
  font-family: var(--fuente-montserrat);
  font-weight: 400;
  font-size: 4.5rem;
  color: var(--color-gris-claro);
  text-align: center;
}

h2 span {
  font-family: var(--fuente-krona);
  font-weight: 700;
  font-size: 8.5rem;
  background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361,
      #ff4361
  );
  background-clip: text; /* Versión estándar */
  -webkit-background-clip: text; /* Prefijo para compatibilidad */
  color: transparent; /* Hace el texto transparente */
  -webkit-text-fill-color: transparent; /* Necesario para navegadores WebKit */
  display: inline-block; /* Requerido para transformaciones */
  transform: scale(0.5); /* Efecto inicial de transformación */
  opacity: 0; /* Ocultar inicialmente */
  animation: zoomIn 1s ease-out forwards; /* Animación */
}

@keyframes zoomIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* CARRUSEL DE TEXTOS */
.modulo-carrusel {
  overflow: hidden;
  white-space: nowrap;
  width: 100%; /* Ajusta el ancho según tus necesidades */
  height: auto;
  background-color: #f5f5f529; /* Color de fondo opcional */
  padding: 1rem 0; /* Espacio opcional alrededor del carrusel */
}

.carrusel-textos {
  display: inline-flex;
  gap: 2rem; /* Espacio entre cada palabra */
  animation: scroll 190s linear infinite; /* Ajusta el tiempo para cambiar la velocidad */
}

.carrusel-textos span {
  font-family: var(--fuente-krona);
  font-weight: 400;
  font-size: 5.5rem; /* Tamaño del texto */
  color: var(--color-gris-claro); /* Color del texto */
}

/* Animación para hacer el carrusel infinito */
@keyframes scroll {
  from {
    transform: translateX(0); /* Inicio de la animación */
  }
  to {
    transform: translateX(
      -50%
    ); /* Fin de la animación desplazando todo el ancho */
  }
}


/* Modulo izquierdo Tripulacion Creativa */

.contenedor-tripulacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  padding: 1rem 6rem;
  color: #f5f5f5;
  width: 100%;
  height: auto;
  margin: 5rem 0 5rem 0;
}

.tripulacion-contenido {
  display: flex;
  flex-direction: column;
  gap: 1rem;

}

/* Contenedor para las imágenes y el título */
.trip-modulo-arriba {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 1rem;
}

.trip-fotos {
  display: flex;
  position: relative;
  gap: 0;
}

.trip-foto {
  position: relative;
}

.trip-foto img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: relative;
  margin-left: -10px !important;
  z-index: 1;
  transition: transform 0.3s ease-in-out;
}

.trip-foto img:hover {
  transform: scale(1.2);
}

.trip-foto img:first-child {
  margin-left: 0;
}

.trip-nombre {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-morado);
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 10px;
  font-family: var(--fuente-montserrat);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}


.trip-foto:hover .trip-nombre {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}


.trip-modulo-arriba h2 {
  font-size: 1.7rem;
  font-weight: 600;
  font-family: var(--fuente-montserrat);
}

.trip-descripcion h1 {
  font-family: var(--fuente-montserrat);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0;
}

/* Fin Contenedor para las imágenes y el título */

/* Fin Modulo izquierdo Tripulacion Creativa */


/* Modulo derecho rrss y boton de trabajemos juntos */

.contenedor-rrss-btn {
  display: flex;
  justify-content: flex-end;
}

.modulo-rrss-btn {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem 1.1rem;
  border-radius: 3rem;
  position: relative;

  /* Fondo con efecto de vidrio */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modulo-rrss-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3rem;
  padding: 2px; /* Ancho del borde degradado */
  background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Prefijo para navegadores antiguos */
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Propiedad estándar */
  mask-composite: exclude; /* Propiedad estándar */
  z-index: -1;
}

.modulo-rrss-btn > * {
  position: relative;
  z-index: 1;
}

.iconos-sociales {
  display: flex;
  gap: 2.5rem;
  font-family: var(--fuente-montserrat);
  margin: 0;
  padding: 0;
}

.iconos-sociales .icon {
  position: relative;
  z-index: 0;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.iconos-sociales .icon i {
  font-size: 2rem;
  color: inherit;
}

.iconos-sociales .icon::after {
  content: "";
  position: absolute;
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: transparent;
  z-index: -1;
  border-radius: 50%;
  top: 100%;
}

.iconos-sociales .icon:hover::after {
  animation: bg-pos 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1 both;
  animation-timing-function: ease-in-out;
}

.iconos-sociales .icon:hover {
  color: #fff;
  overflow: unset;
  transition: color 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation: overflow-toggle 0.7s;
}

.iconos-sociales .icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Asegura que cubra el ícono */
  height: 100%;
  color: inherit; /* Hereda el color del contenedor */
  text-decoration: none; /* Quita el subrayado */
}

.iconos-sociales .icon a:hover {
  color: inherit; /* Mantiene el color actual al hacer hover */
}



.iconos-sociales .tooltip {
  position: absolute;
  top: 0;
  font-family: var(--fuente-montserrat);
  font-weight: 500;
  font-size: 15px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.iconos-sociales .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.iconos-sociales .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.iconos-sociales .icon:hover span,
.iconos-sociales .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.iconos-sociales .facebook::after {
  background-color: #1877f2;
}

.iconos-sociales .tiktok::after {
  background-color: #000000; /* Color negro típico de TikTok */
}

.iconos-sociales .instagram::after {
  background-color: #e4405f;
}

.iconos-sociales .facebook:hover .tooltip,
.iconos-sociales .facebook:hover .tooltip::before {
  background: #1877f2;
  color: #fff;
}

.iconos-sociales .tiktok:hover .tooltip,
.iconos-sociales .tiktok:hover .tooltip::before {
  background: #000000;
  color: #fff;
}

.iconos-sociales .instagram:hover .tooltip,
.iconos-sociales .instagram:hover .tooltip::before {
  background: #e4405f;
  color: #fff;
}

@keyframes bg-pos {
  0% {
      top: 100%;
  }
  100% {
      top: 0;
  }
}

@keyframes overflow-toggle {
  0% {
      overflow: hidden;
  }
  100% {
      overflow: visible;
  }
}


.btn-accion {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.3rem;
  font-family: var(--fuente-montserrat);
  font-size: 1.6rem;
  font-weight: 500;
  color: #1a052d;
  background: linear-gradient(
    to right,
    #6cf3ce,
    #6cf3ce,
    #ff4361,
    #ff4361
  );
  border-radius: 2rem;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-accion:hover {
  background: linear-gradient(45deg, #ff4361, #ff4361, #6cf3ce, #6cf3ce);
}



/* Responsive de celular */
@media (max-width: 445px) {
  .contenedor-main {
    height: auto;
    margin-top: 12rem;
  }
  main h2 {
    font-weight: 400;
    font-size: 2.5rem;
    text-align: center;
  }

  h2 span {
    font-size: 5rem;
  }

  .modulo-carrusel {
    padding: 1.8rem 0;
  }
  
  .carrusel-textos span {
    font-weight: 400;
    font-size: 2rem;
  }
  
  .contenedor-tripulacion {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2rem;
    padding: 1rem 2rem ;
    margin-bottom: 5rem;
  }

  .trip-foto img {
    width: 60px;
    height: 60px;
    border: 3px solid #fff;
    position: relative;
    margin-left: -7px !important;
    z-index: 1;
    transition: transform 0.3s ease-in-out;
  }

  .trip-modulo-arriba h2 {
    font-size: 2rem;
    font-weight: 600;
  }
  
  .trip-descripcion h1 {
    font-weight: 400;
    font-size: 1.8rem;
    margin-top: 1rem;
    margin-bottom: 1.7rem;
    line-height: 1.6;
  }

  .trip-descripcion br {
    display: none;
  }
  
  .modulo-rrss-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.8rem;
    padding: 3rem 1.1rem;
    border-radius: 3rem;
    flex-wrap: wrap;
  
  }

  .iconos-sociales .icon {
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  


  .iconos-sociales .icon i {
    font-size: 3rem;
    color: inherit;
  }
  

  .btn-accion {
    padding: 1rem 2rem;
    font-size: 1.8rem;
    font-weight: 500;
    border-radius: 2rem;
  }
  
  .iconos-sociales .tooltip {
    font-family: var(--fuente-montserrat);
    font-weight: 500;
    font-size: 15px;
    background: #fff;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
  }
  
  
  
}


/* Responsive monitor 27p menu Seccion1 */
@media screen and (min-width: 1920px) {
  main h2 {
    font-family: var(--fuente-montserrat);
    font-weight: 400;
    font-size: 4.5rem;
    color: var(--color-gris-claro);
    text-align: center;
    margin-top: 10rem;
  }
  

  .contenedor-tripulacion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    padding: 1rem 14rem;
    color: #f5f5f5;
    width: 100%;
    height: auto;
    margin: 5rem 0 13rem 0;
  }
  
}

/* FIN DE SECCIÓN 1 */


/* Inicio de Seccion 2 */


.modulo-tit-nos {
  display: flex;
}

.modulo-tit-nos h2 {
  font-family: var(--fuente-krona);
  font-weight: 700;
  font-size: 5rem;
  padding: 3rem 6rem 1rem 6rem;
  background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361,
      #ff4361
  );
  background-clip: text; /* Versión estándar */
  -webkit-background-clip: text; /* Versión prefijada para navegadores antiguos */
  color: transparent; /* Hace que el texto sea transparente y muestre el gradiente */
  -webkit-text-fill-color: transparent; /* Requerido en navegadores WebKit */
}


.animated-title {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.animated-title.zoom-in {
  transform: scale(1);
  opacity: 1;
}




.contenedor-nosotros {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 6rem;
  margin-left: 6rem;
  margin-right: 16rem;

  position: relative;
  border-radius: 2rem;

  /* Fondo con efecto de vidrio */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contenedor-nosotros::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2rem;
  padding: 1.3px; /* Ancho del borde degradado */
  background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Propiedad estándar */
  mask-composite: exclude; /* Versión estándar de la propiedad */
  z-index: -1;
}

.contenedor-nosotros > * {
  position: relative;
  z-index: 1;
}

.nosotros-texto {
  position: relative;
  z-index: 1;
  text-align: left;
}

.nosotros-texto p {
  font-family: var(--fuente-krona);
  font-weight: 500;
  font-size: 3rem;
  color: var(--color-gris-claro);
  margin: 0;
}

.btn-nosotros {
  display: inline-block;
  margin-top: 2rem;
}


.imagen-nosotros {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(20%, 2%);
  z-index: 2;
}

.imagen-nosotros img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Responsive de nosotros */

/* Media queries para pantallas pequeñas */
@media (max-width: 768px) {
  .container-nosotros {
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .imagen-nosotros {
    position: relative;
    bottom: auto;
    right: auto;
    transform: translate(0, 0);
    margin-top: -20%; /* Ajusta este valor según sea necesario */
  }

  .nosotros {
    text-align: center;
  }

  .nosotros p {
    font-size: 2.5rem;
  }

  .btn-contacto-nosotros {
    font-size: 1.4rem;
  }

  .imagen-nosotros img {
    max-width: 300px;
  }
}

/* Responsive Celular Seccion2 */
@media (max-width: 445px) {

  .modulo-tit-nos h2 {
    font-family: var(--fuente-krona);
    font-weight: 700;
    font-size: 3rem;
    padding: 1rem 2rem 1rem 2rem;
    line-height: 1.5;
  }
  
  .animated-title br {
    display: none; /* Oculta el salto de línea */
  }

  .contenedor-nosotros {
    display: flex;
    flex-direction: column;
    margin-left: 2rem;
    margin-right: 2rem;
    padding: 2rem;
  }

  .nosotros-texto {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  
  .nosotros-texto p {
    font-family: var(--fuente-krona);
    font-weight: 500;
    font-size: 2rem;
    color: var(--color-gris-claro);
    margin: 0;
    padding: 2rem 0 2rem 0;
  }

  .nosotros-texto br {
    display: none;
  }
  
  .btn-nosotros {
    display: inline-block;
    margin: 0;
    margin-bottom: 35rem;
    
  }
  
  
  .imagen-nosotros {
    position: absolute;
    bottom: 0;
    right: 25px;
    transform: translate(0%, 2%);
    z-index: 2;
  }
  
  .imagen-nosotros img {
    width: 1000px;
    height: auto;
  }
  

}



/* Responsive monitor 27p menu Seccion2 */
@media screen and (min-width: 1920px) {

  .titulo-nosotros h2 {
    padding: 3rem 14rem 1rem 14rem;/* arriba, derecha, abajo, izquierda */
  }

  .container-nosotros {
    padding: 8rem;

    margin-left: 14rem;
    margin-right: 24rem;
  }

  
}

/* Fin de Seccion 2 */

/* Inicio de Seccion 3 Portafolio de proyectos */
.contenedor-portafolio {
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
}

.contenedor-portafolio h2 {
  text-align: center;
  margin-top: 10rem;
  margin-bottom: 1rem;
}

.contenedor-portafolio p {
  font-family: var(--fuente-montserrat);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  text-align: center;
}

/* Modulo de estilos del carrusel de portafolio */
.contenedor-carrusel-portafolio {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.carrusel {
  display: flex;
  white-space: nowrap;
}

.carrusel img {
  width: 420px; /* Ajusta el tamaño de las imágenes */
  height: auto;
  margin-right: 10px;
  transition: transform 0.2s ease;
  border-radius: 10px;
}

.carrusel-arriba {
  margin-bottom: 10px;
  animation: scrollIzquierda 130s linear infinite;
}

.carrusel-abajo {
  animation: scrollDerecha 130s linear infinite;
}

@keyframes scrollIzquierda {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollDerecha {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Fin de Seccion 3 Portafolio de proyectos */

@media (max-width: 445px) {


  .contenedor-portafolio {
    padding: 0 2rem 0 2rem;
    margin-bottom: 5rem;
  }
  .contenedor-portafolio h2 {
    font-size: 3rem;
    text-align: center;
    margin-top: 8rem;
    margin-bottom: 1rem;
  }  

  .contenedor-portafolio br {
    display: none;
  }

  .contenedor-portafolio p {
    font-size: 1.8rem;
    text-align: center;
  }

  .carrusel img {
    width: 250px; /* Ajusta el tamaño de las imágenes */
    height: auto;
    margin-right: 10px;
    transition: transform 0.2s ease;
    border-radius: 10px;
  }
  


}


/* Inicio Seccion 4 Servicios */

.modulo-servicios {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 5rem;
}

.modulo-servicios h2 {
  font-family: var(--fuente-montserrat);
  font-weight: 400;
  font-size: 4rem;
  color: var(--color-gris-claro);
  text-align: center;
  padding-top: 8rem;
  margin: 0;
}

.modulo-servicios span {
  font-size: 5rem;
}

.modulo-servicios p {
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  text-align: center;
}


@media (max-width: 445px) {

  .modulo-servicios h2 {
    font-size: 2.2rem;
    color: var(--color-gris-claro);
    text-align: center;
    padding-top: 8rem;
    margin: 0;
  }
  
  .modulo-servicios span {
    font-size: 3rem;
  }
  
  .modulo-servicios p {
    font-weight: 300;
    font-size: 1.8rem;
    text-align: center;
  }

  .modulo-servicios br {
    display: none;
  }
  

}


/* Inicio tarjetas 1 y 2 */
.grupo-tarjetas-1-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3rem;
  padding-left: 6rem;
  padding-right: 6rem;
  margin-bottom: 3rem;
  height: 50rem;
}

.tarjeta-1 {
  /* Configuración del grid */
  grid-column: span 2 / span 2;
  grid-row: span 4 / span 4;
  justify-content: center;
  align-content: center;
}

.tarjeta-1 img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-left: 3rem;
}

.tarjeta-1 h2 {
  font-family: var(--fuente-krona);
  font-weight: 500;
  font-size: 3rem;
  color: var(--color-gris-claro);
  margin-left: 3rem;
}

.tarjeta-1 p {
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  margin-left: 3rem;
}

.tarjeta-2 {
  /* Configuración del grid */
  grid-row: span 4 / span 4;
  grid-column-start: 3;
  justify-content: center;
  align-content: center;
}

.tarjeta-2 img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-left: 3rem;
}

.tarjeta-2 h2 {
  font-family: var(--fuente-krona);
  font-weight: 500;
  font-size: 3rem;
  color: var(--color-gris-claro);
  margin-left: 3rem;
}

.tarjeta-2 p {
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  margin-left: 3rem;
  margin-right: 3rem;
}


@media (max-width: 445px) {

  .grupo-tarjetas-1-2 {
    grid-template-columns: 1fr; /* Una sola columna */
    grid-template-rows: auto; /* Ajusta la altura de las filas automáticamente */
    gap: 5rem; /* Espaciado entre las tarjetas */
    padding-left: 2rem;
    padding-right: 2rem;
    height: auto;
    margin-bottom: 5rem;
  }

  .tarjeta-1, .tarjeta-2 {
    grid-column: span 1; /* Cada tarjeta ocupa toda la fila */
    grid-row: auto; /* Orden natural */
    margin: 0 auto; /* Centra las tarjetas horizontalmente */
  }

  .tarjeta-1 img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-left: 0;
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
  }


  .tarjeta-1 h2 {
    margin-left: 0;
    text-align: center;
    margin: 1rem;
  }


  .tarjeta-1 p {
    font-size: 1.8rem;
    margin-left: 0;
    text-align: center;
    padding: 0 1.5rem;
  }

  .tarjeta-1 br, .tarjeta-2 br {
    display: none;
  }

  .tarjeta-2 img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-left: 0;
    display: block;
    margin: 0 auto;
    margin-top: 2rem; 
  }

  .tarjeta-2 h2 {
    margin-left: 0;
    text-align: center;
    margin: 1rem;
  }

  .tarjeta-2 p {
    font-size: 1.8rem;
    margin-left: 0;
    text-align: center;
    padding: 0 1.5rem;
  }
}

/* Fin tarjetas 1 y 2 */


/* Inicio tarjetas 3 y 4 */

.grupo-tarjetas-3-4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3rem;
  padding-left: 6rem;
  padding-right: 6rem;
  margin-bottom: 3rem;
  height: 50rem;
}

.tarjeta-3 {
  grid-row: span 4 / span 4;
  justify-content: center;
  align-content: center;
}

.tarjeta-3 img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-left: 3rem;
}


.tarjeta-3 h2 {
  font-family: var(--fuente-krona);
  font-weight: 500;
  font-size: 3rem;
  color: var(--color-gris-claro);
  margin-left: 3rem;
}

.tarjeta-3 p {
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  margin-left: 3rem;
  margin-right: 3rem;
}

.tarjeta-4 {
  grid-column: span 2 / span 2;
  grid-row: span 4 / span 4;
  justify-content: center; /* Centra horizontalmente el contenido */
  align-content: center; /* Centra verticalmente el contenido */
}

.tarjeta-4 img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-left: 3rem;
}

.tarjeta-4 h2 {
  font-family: var(--fuente-krona);
  font-weight: 500;
  font-size: 3rem;
  color: var(--color-gris-claro);
  margin-left: 3rem;
}

.tarjeta-4 p {
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  margin-left: 3rem;
  margin-right: 3rem;
}


@media (max-width: 445px) {

  .grupo-tarjetas-3-4 {
    grid-template-columns: 1fr; /* Una sola columna */
    grid-template-rows: auto; /* Ajusta la altura de las filas automáticamente */
    gap: 5rem; /* Espaciado entre las tarjetas */
    padding-left: 2rem;
    padding-right: 2rem;
    height: auto;
    margin-bottom: 5rem;
  }

  .tarjeta-3, .tarjeta-4 {
    grid-column: span 1; /* Cada tarjeta ocupa toda la fila */
    grid-row: auto; /* Orden natural */
    margin: 0 auto; /* Centra las tarjetas horizontalmente */
  }

  .tarjeta-3 img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-left: 0;
    display: block;
    margin: 0 auto;
    margin-top: 2rem; 
  }


  .tarjeta-3 h2 {
    margin-left: 0;
    text-align: center;
    margin: 1rem;
  }


  .tarjeta-3 p {
    font-size: 1.8rem;
    text-align: center;
    margin: 0;
    padding: 0 2rem 4rem 2rem;
  }

  .tarjeta-3 br, .tarjeta-4 br {
    display: none;
  }

  .tarjeta-4 img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-left: 0;
    display: block;
    margin: 0 auto;
    margin-top: 2rem; 
  }

  .tarjeta-4 h2 {
    margin-left: 0;
    text-align: center;
    margin: 1rem;
  }

}

/* Fin tarjetas 3 y 4 */


/* TASK SERVICIOS */

.servicios-task {
  display: flex;
  flex-wrap: wrap;
  margin-left: 3rem;
  gap: 1.5rem;
  margin-bottom: 3rem;
  margin-right: 3rem;
}

.btn-tarjetas {
  display: flex; /* Activa Flexbox */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  padding: 1rem 2rem;
  font-family: var(--fuente-montserrat);
  font-size: 1.3rem;
  font-weight: 400;
  border-radius: 2rem;
  text-decoration: none;
  text-align: center;

  /* Fondo con efecto de vidrio */
  background: rgba(215, 7, 7, 0.1); /* Fondo ligeramente translúcido */
  backdrop-filter: blur(5px); /* Menor intensidad de desenfoque */
  -webkit-backdrop-filter: blur(5px);
  color: var(--color-gris-claro);
  position: relative; /* Necesario para usar ::before */
}

.btn-tarjetas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2rem;
  padding: 1.3px; /* Ancho del borde degradado */
  background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Propiedad estándar */
  mask-composite: exclude; /* Versión estándar de la propiedad */
  z-index: -1;
}

.btn-tarjetas > * {
  position: relative;
  z-index: 1;
}

/* Fin Seccion 4 Servicios */




/* Inicio Seccion 5 Beneficios */

.contenedor-beneficios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  padding: 0 6rem 0 6rem;
  margin: 10rem 0 0 0;
}

.beneficio1 {
  grid-column: 1;
  grid-row: 1 / span 2; /* Ocupa las dos primeras filas */

  text-align: left; /* Alineación del texto */
  position: sticky; /* Se mantiene "pegajoso" */
  top: 10rem; /* Espacio desde la parte superior del viewport */
  transform: translateY(0); /* Elimina el centrado absoluto */
}

.beneficio1 h2 {
  font-family: var(--fuente-krona);
  font-weight: 700;
  font-size: 5rem;
  text-align: left;
  background: linear-gradient(
    to right,
    #6cf3ce,
    #6cf3ce,
    #6cf3ce,
    #6cf3ce,
    #ff4361,
    #ff4361,
    #ff4361,
    #ff4361
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 2rem 0;
}

.beneficio1 p {
  font-family: var(--fuente-montserrat);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  text-align: left;
}


.beneficio2 {
  grid-column: 2; /* Segunda columna */
  grid-row: 1; /* Primera fila */
  border-radius: 2rem;
  padding: 4rem;

  /* Fondo con efecto de vidrio */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.beneficio2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2rem;
  padding: 1.3px; /* Ancho del borde degradado */
  background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Propiedad estándar */
  mask-composite: exclude; /* Versión estándar de la propiedad */
  z-index: -1;
}

.beneficio2 > * {
  position: relative;
  z-index: 1;
}

.beneficio2 img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  padding: 0;
  margin: 2rem 0 0 0;
}

.beneficio2 h2 {
  font-family: var(--fuente-krona);
  font-weight: 500;
  font-size: 3rem;
  color: var(--color-gris-claro);
  padding: 0;
  margin: 2rem 0 1rem 0; /* arriba, derecha, abajo, izquierda */
}

.beneficio2 p {
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  padding: 0;
  margin: 0 0 2rem 0;
}


.otros-beneficios {
  grid-column: 2;
  grid-row: 2 / auto; /* Comienza en la segunda fila y sigue automáticamente */
  display: flex;
  flex-direction: column; /* Las tarjetas se apilan verticalmente */
  gap: 5rem; /* Espaciado entre tarjetas */
}


.beneficio3,
.beneficio4,
.beneficio5 {
  border-radius: 2rem;
  padding: 4rem;

  /* Fondo con efecto de vidrio */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0; /* Totalmente invisible */
  transform: translateY(20px); /* Mueve ligeramente hacia abajo */
  transition: opacity 0.8s ease, transform 0.8s ease; /* Duración y efecto suave */
}

.beneficio3::before,
.beneficio4::before,
.beneficio5::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2rem;
  padding: 1.3px; /* Ancho del borde degradado */
  background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Propiedad estándar */
  mask-composite: exclude; /* Versión estándar de la propiedad */
  z-index: -1;
}

.beneficio3 > *,
.beneficio4 > *,
.beneficio5 > * {
  position: relative;
  z-index: 1;
}

.beneficio3 img,
.beneficio4 img,
.beneficio5 img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  padding: 0;
  margin: 2rem 0 0 0;
}

.beneficio3 h2,
.beneficio4 h2,
.beneficio5 h2 {
  font-family: var(--fuente-krona);
  font-weight: 500;
  font-size: 3rem;
  color: var(--color-gris-claro);
  padding: 0;
  margin: 2rem 0 1rem 0; /* arriba, derecha, abajo, izquierda */
}

.beneficio3 p,
.beneficio4 p,
.beneficio5 p {
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  padding: 0;
  margin: 0 0 2rem 0;
}


.accion-visible {
  opacity: 1;
  transform: translateY(0); /* Vuelve a su posición original */
}


@media (max-width: 445px) {
  .contenedor-beneficios {
    display: flex;
    flex-direction: column; /* Elementos en columna */
    gap: 5rem; /* Espaciado entre elementos */
    padding: 2rem; /* Espaciado interno */
    max-width: 100%; /* Evita que el contenedor se salga del viewport */
    margin: 0 auto; /* Centra el contenedor */
    box-sizing: border-box; /* Incluye márgenes y padding en el ancho */
  }

  .beneficio1,
  .beneficio2,
  .otros-beneficios .beneficio3,
  .otros-beneficios .beneficio4,
  .otros-beneficios .beneficio5 {
    width: 100%; /* Ancho total del contenedor */
    max-width: 400px; /* Ancho máximo para tarjetas */
    margin: 0 auto; /* Centra cada tarjeta */
    position: relative; /* Resetea posición sticky */
    top: auto; /* Quita cualquier valor superior */

    display: flex; /* Flexbox para centrar */
    flex-direction: column; /* Coloca los elementos en columna */
    align-items: center; /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente */
    text-align: center; /* Centra el texto */
    box-sizing: border-box; /* Ajusta el tamaño para incluir padding y bordes */
    padding: 3rem 2rem; /* Agrega espacio interno */
  }

  .beneficio1 {
    padding: 0;
  }

  .beneficio1 h2 {
    font-size: 3rem;
  }


  .otros-beneficios {
    display: flex;
    flex-direction: column; /* Tarjetas en columna */
    gap: 5rem; /* Espaciado entre tarjetas */
  }

  .beneficio2 img,
  .otros-beneficios .beneficio3 img,
  .otros-beneficios .beneficio4 img,
  .otros-beneficios .beneficio5 img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto; /* Centra los íconos */
  }

  .beneficio2 h2,
  .otros-beneficios .beneficio3 h2,
  .otros-beneficios .beneficio4 h2,
  .otros-beneficios .beneficio5 h2 {
    text-align: center; /* Centra los títulos */
    font-size: 2.5rem; /* Ajuste de tamaño */
  }

  .beneficio2 p,
  .otros-beneficios .beneficio3 p,
  .otros-beneficios .beneficio4 p,
  .otros-beneficios .beneficio5 p {
    text-align: center; /* Centra el texto descriptivo */
    font-size: 1.8rem; /* Ajusta el tamaño del texto */
    word-wrap: break-word; /* Evita desbordamientos por texto largo */
  }

  .beneficio1 p {
    font-size: 1.8rem; /* Ajusta el tamaño del texto */
  }

  /* Ajuste adicional para los botones */
  .btn-beneficios {
    font-size: 1.8rem; /* Tamaño de fuente para el botón */
    padding: 1rem 2rem; /* Espaciado interno */
    width: fit-content; /* Ajusta el tamaño del botón al contenido */
    margin: 1rem 0 0 0; /* Elimina el centrado y lo posiciona a la izquierda */
    align-self: flex-start; /* Asegura que el botón esté alineado a la izquierda dentro del contenedor flex */
  }
}




/* Responsive monitor 27p menu Seccion1 */
@media screen and (min-width: 1920px) {


  .accion-servicios {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    gap: 5rem; /* Espaciado entre los elementos */
    align-items: start;
    padding: 0 14rem 0 14rem;/* arriba, derecha, abajo, izquierda */
    margin: 10rem 0 0 0;
  }

  
}

/* Fin Seccion 5 Beneficios */




/* Inicio Seccion 6 Clientes */

/* Contenedor general */
.contenedor-clientes {
  display: grid;
  grid-template-columns: 30% 70%; /* Primera columna 40%, segunda columna 60% */
  gap: 4rem; /* Espacio entre las columnas */
  padding-left: 6rem;
  padding-top: 25rem;
  margin-bottom: 20rem;
  overflow-x: hidden; /* Oculta el scroll horizontal */
  height: auto;
  align-items: end;
}

.columna1 {
  display: flex;
  flex-direction: column;
}

.contenido-columna1 {
  position: relative;
  z-index: 1;
}

.contenido-columna1 .imagen-cliente {
  position: absolute; 
  bottom: -50px;
  left: 45%;
  transform: translateX(-50%);
  width: 430px;
  height: auto;
  z-index: -1;
}



.contenido-columna1 p {
  font-family: var(--fuente-krona);
  font-weight: 600;
  font-size: 4rem;
  color: var(--color-gris-claro);
  margin: 0;
  margin-top: 1rem;
}

.contenido-columna1 h2 {
  font-family: var(--fuente-krona);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  text-align: left;
  background: linear-gradient(
    to right,
    #6cf3ce,
    #6cf3ce,
    #6cf3ce,
    #6cf3ce,
    #ff4361,
    #ff4361,
    #ff4361,
    #ff4361
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  margin-bottom: 1rem;
}

.swiper-navigation {
  display: flex;
  justify-content: start;
  gap: 5px; /* Espacio entre los botones */
  margin-top: 30px; /* Espacio entre el párrafo y los botones */
}

.button-prev,
.button-next {
  position: static !important; /* Anula el posicionamiento absoluto de Swiper */
  font-size: 40px;
  border: none;
  background-color: transparent;
  color: var(--color-gris-claro);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button-prev:hover,
.button-next:hover {
  color: var(--color-fucsia);
}



/* Swiper */
.swiper {
  width: 100%; /* Ocupa todo el ancho disponible */
  max-width: 1200px; /* Limita el ancho máximo */
  margin-left: auto; /* Desplaza el slider hacia la izquierda */
  margin-right: 0; /* Asegura que no haya margen a la derecha */
  padding-right: 0; /* Quita cualquier relleno adicional */
  overflow-x: hidden; /* Oculta cualquier desbordamiento horizontal */
}

.swiper-wrapper {
  width: 100%;
  height: 455px !important;
}

/* TARJETAS */

.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3rem;
  padding-top: 5rem;
  cursor: grab;

  position: relative;
  border-radius: 2rem 10rem 2rem 2rem;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2rem 10rem 2rem 2rem;
  padding: 1.3px; /* Ancho del borde degradado */
  background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Propiedad estándar */
  mask-composite: exclude; /* Versión estándar de la propiedad */
  z-index: -1;
}

.swiper-slide > * {
  position: relative;
  z-index: 1;
}

.estrellas {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.estrellas p {
  color: var(--color-gris-claro);
  font-family: var(--fuente-krona);
  font-size: 2rem;
  margin-right: 1rem;
}

.estrellas i {
  color: #fdca3f;
}

.divider {
  border: none;
  border-top: 1px solid #fff;
  width: 100%;
  opacity: 0.4;
}

.comentario {
  margin: 2.5rem 0;
  flex: 1; /* Toma el espacio disponible */
  min-height: 150px; /* Asegura que el área de comentarios sea uniforme */
  text-align: left;
}

.comentario p {
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--color-gris-claro);
}

.info-cliente {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto; /* Empuja hacia la parte inferior */
}

.img-cliente img {
  width: 50px;
  height: 50px; /* Altura fija para imágenes */
  border-radius: 50%;
}

.nombre-cliente {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nombre-cliente p {
  color: var(--color-gris-claro);
  font-family: var(--fuente-krona);
  font-weight: 500;
  font-size: 1rem;
  margin: 0;
}

.nombre-cliente span {
  color: var(--color-gris-claro);
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1rem;
}








@media (max-width: 445px) {

  .contenedor-clientes {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding: 2rem;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    padding-top: 37rem;
  }

.button-prev,
.button-next {
  font-size: 50px;
}

.swiper {
  width: 100%;
  overflow: hidden; /* Oculta cualquier desbordamiento */
}

.swiper-slide {
  width: 100%; /* Asegura que cada slide ocupe todo el ancho */
}

}

/* Estilos para tablets en orientación vertical (768px a 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .contenedor-clientes {
      display: flex;
      flex-direction: column; /* Cambia a diseño vertical si es necesario */
      padding: 2rem 3rem; /* Ajusta el relleno */
      gap: 3rem; /* Espacio moderado entre elementos */
  }

  .swiper {
      width: 100%; /* Ocupa todo el ancho disponible */
      padding: 0; /* Elimina cualquier espacio interno */
  }

  .swiper-slide {
      width: calc(50% - 10px); /* Asegura que cada slide ocupe 50% del contenedor */
      margin: 0 auto; /* Centra los slides */
  }

  .button-prev,
  .button-next {
      font-size: 30px; /* Ajusta el tamaño de los botones de navegación */
  }
}



@media screen and (min-width: 1920px) {

}


/* Preguntas frecuentes */

.contenedor-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 6rem 0 6rem;
  margin: 10rem 0 0 0;
}

.texto-faq h2 {
  font-family: var(--fuente-krona);
  font-weight: 700;
  font-size: 4rem;
  text-align: left;
  background: linear-gradient(
    to right,
    #6cf3ce,
    #6cf3ce,
    #ff4361,
    #ff4361,
    #ff4361,
    #ff4361
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 2rem 0;
}

.texto-faq p {
  font-family: var(--fuente-montserrat);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--color-gris-claro);
  padding: 0;
  margin: 0 0 2rem 0;
}


/* ESTILOS DE PREGUNTAS FRECUENTES */

.custom-accordion {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
}

.custom-accordion .tab {
  position: relative;
  margin-bottom: 5rem;
  color: var(--color-gris-claro);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.custom-accordion .tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.custom-accordion .tab label {
  position: relative;
  display: block;
  font-family: var(--fuente-krona);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.5;
  cursor: pointer;
  background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361)
    no-repeat; /* Degradado */
  background-position: bottom; /* Coloca el degradado en la parte inferior */
  background-size: 100% 2px; /* Define que sea del ancho total y de 2px de alto */
  padding: 0 1rem 2rem 0;
}

.custom-accordion .tab-content {
  max-height: 0;
  overflow: hidden;
  border-radius: 0 0 1rem 1rem;
}

.custom-accordion .tab-content p {
  font-family: var(--fuente-montserrat);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-gris-claro);
}

.custom-accordion .tab input:checked ~ .tab-content {
  max-height: 100vh;
}

.custom-accordion .tab label::after {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-100%) rotate(0deg);
  display: block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 2rem;
  transition: transform 0.35s;
  content: "+";
  border: none;
  color: var(--color-verde);
}

.custom-accordion .tab input[type="checkbox"]:checked + label::after {
  transform: translateY(-100%) rotate(315deg);
}

/* FIN ESTILOS DE PREGUNTAS FRECUENTES */

/* RESPONSIVE PREGUNTAS FRECUENTES*/

@media (max-width: 445px) {

  .contenedor-faq {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 2rem 0 2rem;
    margin: 5rem 0 0 0;
  }

  .texto-faq p {
    font-size: 1.8rem;
    margin: 0 0 3rem 0;
  }

  .btn-faq {
    font-size: 1.8rem;
    padding: 1rem 2rem;
  }
  
  .custom-accordion {
    margin-top: 6rem;
  }

  .custom-accordion .tab label::after {
    top: 37%;
  }

  .custom-accordion .tab label {
    font-family: var(--fuente-krona);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.5;
    padding: 0 3rem 2rem 0;
  }
  
  .custom-accordion .tab-content p {
    font-size: 1.8rem;
  }
}

/* Responsive monitor 27p menu Seccion1 */
@media screen and (min-width: 1920px) {


  .contenedor-faq {

    padding: 0 14rem 0 14rem;/* arriba, derecha, abajo, izquierda */
  }

  
}



/* FINAL RESPONSIVE PREGUNTAS FRECUENTES*/

.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20rem 0 0 0;
  height: auto;
  text-align: center;
}

.contenedor-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* Espacio entre las líneas */
}

.texto-footer {
  font-family: var(--fuente-krona);
  font-size: 5rem;
  color: var(--color-gris-claro);
}

.texto-footer-descripcion {
  font-family: var(--fuente-krona);
  font-size: 5rem;
  color: var(--color-gris-claro);
}

.palabra-dinamica {
  display: inline-block;
  font-family: var(--fuente-krona);
  font-weight: 700;
  font-size: 5.5rem;
  background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  border-right: 4px solid #ff4361;
  animation: cursor 0.7s steps(1) infinite;
}

@keyframes cursor {
  50% {
      border-color: transparent;
  }
}

/* .parrafo-footer { 
  font-family: var(--fuente-montserrat);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--color-gris-claro);
  margin-top: 2rem;
  margin-bottom: 3rem;
}*/


/* Ajustes específicos para el botón en el footer */
.footer-btn {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 20rem;
}

.divider-footer {
    border: none;
    height: 1px; /* Grosor de la línea */
    width: calc(100% - 12rem); /* Resta 6rem de cada lado */
    margin: 0 auto; /* Centra la línea horizontalmente */
    background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361); /* Degradado */
    opacity: 1; /* Mantén el degradado visible */
}


.politicas {
    display: flex; /* Usa flexbox para distribuir los elementos */
    justify-content: space-between; /* Coloca los elementos en extremos opuestos */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Asegúrate de ocupar todo el ancho */
    padding: 0 6rem; /* Espaciado interno en los bordes */
    color: var(--color-gris-claro);
    font-family: var(--fuente-montserrat);
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gris-claro);
  
}

.politicas-izquierda {
    text-align: left;
    margin: 2rem 0;
}


.politicas-derecha {
    text-align: right;
    margin: 2rem 0;
}


@media (max-width: 445px) {

  .footer {
    margin-top: 15rem;
    overflow-x: hidden;
  }

  .texto-footer {
    font-family: var(--fuente-krona);
    font-size: 2.1rem;
    color: var(--color-gris-claro);
  }

  .palabra-dinamica {
    font-size: 2.1rem ;
  }

  .texto-footer-descripcion {
    font-family: var(--fuente-krona);
    font-size: 2.1rem;
    color: var(--color-gris-claro);
  }

  .divider-footer {
    width: calc(100% - 4rem)
  }

  .politicas {
    display: flex;
    flex-direction: column;
    padding: 0 2rem;
  }

  .politicas-izquierda {
    text-align: center;
    margin: 0;
    order: 2;
    padding-bottom: 2rem;
  }
  
  .politicas-derecha {
    text-align: center;
    margin: 0;
    order: 1;
    padding-top: 2rem;
    padding-bottom: 1rem;
  }
  
  
  
}

/* Responsive monitor 27p menu Seccion1 */
@media screen and (min-width: 1920px) {

  .footer-btn {
    font-size: 2rem;
    margin-bottom: 25rem;
    padding: 1rem 2rem;
}

  .divider-footer {
    border: none;
    height: 1px; /* Grosor de la línea */
    width: calc(100% - 28rem); /* Resta 6rem de cada lado */
    margin: 0 auto; /* Centra la línea horizontalmente */
    background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361); /* Degradado */
    opacity: 1; /* Mantén el degradado visible */
}

.politicas {
  padding: 0 14rem 0 14rem;/* arriba, derecha, abajo, izquierda */
}

  
}