@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*-------------Barra-de-control-de-variables-----------------------*/

:root{
  --opacidad-pg-ico: 0.8;

  --tipografia-principal: "Inter", sans-serif;


  --titulos-grosro-texto: 800;

  --parrafos: 10.5px;

    /*Estilos-de-texto-principal*/
    --color-principal: #003feb;
    --color-principal-variable1: #000000;
    --color-principal-variable2: #0023be;
    --color-principal-variable3: #0077ff;
    --color-principal-variable4: #0084ff;

    /*Estilos-de-texto-secundario*/
    --color-secundario: #ffffff;
    --color-secundario-variable1: #070707;
    --color-secundario-variable2: #c4c4c4;
    --color-secundario-variable3: #2c2c2c;
    --color-secundario-variable4: #c4c4c4;
    --color-secundario-variable5: #f0f0f0;
    --color-secundario-variable6: #ffffff;

    --fondo-portada-pagina: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), url(/Aspectos-Visuales-Entorno-Digital/Aspectos-Visuales-PG/fondo-especial-1.jpg);
    
    --fondo-pagina: linear-gradient(rgba(12, 12, 12, 0.932),rgba(8, 8, 8, 0.856)), url(/Aspectos-Visuales-Entorno-Digital/Aspectos-Visuales-PG/fondo-1.jpg);

    --fondo-secciones-especiales: linear-gradient(rgba(0, 0, 0, 0.925), rgba(0, 0, 0, 0.788)), url(/Aspectos-Visuales-Entorno-Digital/Aspectos-Visuales-PG/fondo-especial-1.jpg);
}


/*Estilos-basicos*/
body{
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  padding: 0;
  font-family: var(--tipografia-principal);
  background: var(--color-secundario-variable1);
}
/*------------------------------------------*/


/*Estilos-Barra-de-scroll*/
::-webkit-scrollbar { 
  width: 3px; 
  height: 100%; 
  transition: 0.3s;
}

::-webkit-scrollbar-track { 
  background: var(--color-secundario-variable3); 
}

::-webkit-scrollbar-thumb { 
     border-radius: 20px;
      background: var(--color-secundario-variable4);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secundario);
}
/*------------------------------------------*/


/*-----------Cabezera-Pg-Seccionada-----------*/
.cabezera {
  margin: 0vh 0vw 0vh 0vw;
}

.cabezera img{
  height: 30vh;
  width: 100%;
  object-fit: cover;
}

.cabezera video{
  height: 30vh;
  width: 100%;
  object-fit: cover;
}
/*------------------------------------------*/



.cont-inf{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0vw 1rem 0vw;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido{
  display: flex;
  align-items: center;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido img{
  width: 2.3rem;
  min-width: 2.5vw;
  max-width: 2.3rem;
  height: 2.3rem;
  min-height: 2.5vw;
  max-height: 2.3rem;
  margin: 0px 0.5vw 0px 0px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-secundario-variable3);
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido h6{
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 1.1vw;
  margin: 0px 0vw -0.2rem 0.5vw;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido small{
color: var(--color-secundario-variable2);
  font-size: 1vw;
  margin: 0px 0vw 0px 0.5vw;
}

.cont-botones-enlace{
  display: flex;
  gap: 1vw;
  align-items: center;
}

.cont-botones-enlace img{
  width: 1rem;
  min-width: 1.5vw;
  max-width: 1rem;
  height: 1rem;
  min-height: 1.5vw;
  max-height: 1rem;
}

.cont-botones-enlace svg{
fill: var(--color-secundario);
  width: 1rem;
  min-width: 1.5vw;
  max-width: 1rem;
  height: 1rem;
  min-height: 1.5vw;
  max-height: 1rem;
}

.cont-botones-enlace h6{
  font-size: 1.05vw;
    font-weight: var(--titulos-grosro-texto);
  color: var(--color-secundario);
  margin: 0.5vh 0.5vw 0px 0px;
}

.social-button {
  padding: 0.5rem 0.5rem;
  border-radius: 10vw;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: var(--color-secundario-variable3);
  border: none;
  border-radius: 50%;
}

.social-button img {
  width: 1rem;
  height: 1rem;
}

.social-button svg {
fill: var(--color-secundario);
  width: 1rem;
  height: 1rem;
}

.social-button:hover{
  opacity: 80%;
}




/*-----------------Cont-portafolio--------------------------*/
.cont-Sec-blog{
  margin: 0rem 10vw 0vh 10vw;
}

.cont-Sec-blog h1{
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 4.5vw;
  margin: 0rem 0vw 0.5rem 0vw;
}

.cont-Sec-blog p{
  font-size: var(--parrafos);
  color: var(--color-secundario-variable2);
  margin: 0vh 10vw 1.8rem 0vw;
}

.cont-Sec-blog hr{
  opacity: 20%;
  margin: 0.5rem 0vw -1.5rem 0vw;
}
/*------------------------------------------*/


/*---------------Cont-Blog-Controles-Mando-----------------*/
.cont-indice{
  display: flex;
  gap: 1vw;
}

.cont-indice a{
  text-decoration: none;
}

.boton {
  background-color: var(--color-secundario-variable3); /* Color original */
  color: var(--color-secundario);
  border: none;
  border-radius: 2vw;
  font-size: var(--parrafos);
  cursor: pointer;
  margin: 0rem 0vw 1rem 0vw;
  padding: 1.5vh 1.8vw 1.5vh 1.8vw;
  transition: 0.3s;
}

.boton:hover{
  color: var(--color-secundario-variable5);
  background:  var(--color-principal); /* Color original */
  transition: 0.3s;
}

.clicked {
  color: var(--color-secundario-variable5);
  background:  var(--color-principal-variable2); /* Nuevo color al hacer clic */
}

.indice-categorias{
  background: var(--color-secundario);
  border-radius: 3vw;
  margin: 0vh 0vw 0vh 0vw;
  padding: 1.8vh 2vw 1.8vh 2vw;
}
/*------------------------------------------*/



/*-----------Descripcion-Pg-Seccionada-----------*/
  .descrip-Pg-Seccionada{
    margin: 0vh 12vw 0vh 12vw;
  }

  .descrip-Pg-Seccionada h2{
    color: var(--color-secundario);
    font-weight: var(--titulos-grosro-texto);
    font-size: 3.5vw;
    margin: 1.5rem 0vw 1.5rem 0vw;
  }

  .descrip-Pg-Seccionada p{
    font-size: var(--parrafos);
    color: var(--color-secundario-variable2);
    margin: 1.5rem 0vw 2rem 0vw;
  }

  .descrip-Pg-Seccionada hr{
    opacity: 20%;
    margin: 1rem 0vw 1.5rem 0vw;
  }


  /*------------------------------------------*/
  .cont-estruc-fichas-elementos{
    margin: 3rem 0vw 4rem 0vw;
  }

  .cont-estruc-fichas-elementos h3{
    color: var(--color-secundario);
    font-weight: var(--titulos-grosro-texto);
    font-size: 3.5vw;
    margin: 0vh 0vw 1.5rem 0vw;
  }

        /* Estilo para tarjetas con diseño flexible (Reemplaza flex flex-col md:flex-row items-start space-y-4 md:space-x-6) */
        .flex-card {
          display: flex;
          align-items: flex-start;
          gap: 1rem; /* space-y-4 */
          flex-direction: row;
      }

      .flex-card > *:first-child {
          flex-shrink: 0; /* flex-shrink-0 */
      }

      /* Contenedor de las 4 tarjetas de Servicios (Reemplaza grid grid-cols-1 md:grid-cols-2 gap-6 mb-20) */
      .grid-cards {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1rem; /* gap-6 */
          margin-top: 2rem; /* mb-20 */
      }
      .grid-cards a {
          text-decoration: none;
      }


      /* Contenedor de los 3 pasos (Reemplaza grid grid-cols-1 md:grid-cols-3 gap-6) */
      .grid-steps {
          display: grid;
          grid-template-columns: 1fr;
          gap: 1.5rem;
      }

      /* ============================================== */
      /* ESTILOS DE COMPONENTES (Reemplazando clases combinadas) */
      /* ============================================== */

      /* Estilo para las tarjetas de Servicios Oscuras (card-dark) */
      .card-dark {
          background-color: var(--color-principal);
          color: white;
          border-radius: 0.5vw; /* rounded-2xl */
          padding: 1.8rem; /* p-6 */
          transition: transform 0.3s ease;
      }

      .card-dark:hover {
          transform: translateY(-4px);
          box-shadow: 0 15px 25px -5px rgba(255, 255, 255, 0.13);
      }

      /* Estilo para las tarjetas de Servicios Claras (card-light) */
      .card-light {
          background-color: var(--color-secundario-variable3); /* Lila claro */
          color: var(--color-secundario);
          border-radius: 0.5vw; /* rounded-2xl */
          padding: 1.8rem; /* p-6 */
          transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .card-light:hover {
          transform: translateY(-4px);
          box-shadow: 0 15px 25px -5px rgba(255, 255, 255, 0.13);
      }

      .text-elemen-container h6{
        font-size: 1.5vw;
        margin: 0vh 0vw 0.5rem 0vw;
        padding: 0vh 0vw 0vh 0vw;
      }

      .text-elemen-container p{
        font-size: var(--parrafos);
        margin: 0vh 0vw 0vh 0vw;
        padding: 0vh 0vw 0vh 0vw;
        color: var(--color-secundario-variable2);
      }

      .icon-container svg{
        width: 2vw;
        margin: 0px 0.1vw 0px 0px;
        fill: var(--color-secundario);
    }




      /* Contenedor de las Estadísticas (Reemplaza grid grid-cols-2 md:grid-cols-4 gap-8 text-center text-white) */
      .grid-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem; /* gap-8 */
        text-align: center; /* text-center */
        color: white; /* text-white */
    }

      /* Bloque de Estadísticas (stats-block - Reemplaza rounded-2xl p-12 mt-12) */
      .stats-block { 
          background-color: var(--color-principal);
          border-radius: 0.5vw; /* rounded-2xl */
          padding: 2.5rem; /* p-12 */
          margin-top: 2rem; /* mt-12 */
      }

      /* Estilos de fuente para los números de estadísticas */
      .stats-block span:first-child { font-size: 2.5vw; font-weight: 800; }

      /* Estilos de fuente para el texto de las estadísticas */
      .stats-block span:last-child { font-size: 1.3vw;  margin-top: 0.8rem;   color: var(--color-secundario-variable2); } 

      .stats-block > div > div { display: flex; flex-direction: column; align-items: center; } 



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



/*------------------------------------------*/
.Descrp-Pbl-tp-2{
  width: 50vw;
}

.Descrp-Pbl-tp-2 h3{
  width: 100%;
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 3vw;
  margin: 0vh 0vw 1.5rem 0vw;
}

.Descrp-Pbl-tp-2 h4{
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 2.5vw;
  margin: 1.3rem 0vw 0rem 0vw;
}

.Descrp-Pbl-tp-2 p{
margin: 1.5rem 0vw 0rem 0vw;
font-size: var(--parrafos);
color: var(--color-secundario-variable2);
}

.separador{
  margin: 2rem 0vw 0vh 0vw;
}


.Descrp-Pbl-tp-2 a{
  text-decoration: none;
}

.Descrp-Pbl-tp-2 a {
  margin: 2vh 0vw 1vh 0vw;
  padding: 2vh 3vw;
  font-size: 1.3vw;
  background-color: var(--color-principal);
  color: var(--color-secundario-variable5);
  text-decoration: none;
  border-radius: 3.5vw;
  transition: 0.3s;
}

.Descrp-Pbl-tp-2 a:hover {
  background-color: var(--color-principal-variable2);
}
/*------------------------------------------*/

/*------------------------------------------*/
  .puntos-clave{
    background: var(--color-secundario-variable3);
    border-left: 3px solid #0042bd;
    border-radius: 3px;
    margin: 1.2rem 0vw 0vh 0vw;
    padding: 1.5vh 2vw 3vh 3vw;
  }

  .puntos-clave h5{
    font-size: 1.2vw;
    color: var(--color-secundario);
    margin: 0.5rem 0vw 0.8rem -1vw;
  }

  .puntos-clave li{
    font-size: var(--parrafos);
    color: var(--color-secundario-variable4);
    margin: 1.3vh 0vw 0vh 1vw;
  }

  .limpio{
    background: none;
    border-left: none;
    padding: 0vh 0vw 0vh 0vw;
    margin: 1rem 0vw 2rem 3vw;
  }

  .puntos-clave strong{
    margin: 0vh 0vw 0vh 0vw;
  }

  .puntos-clave img{
    width: 95%;
    height: 20vh;
    object-fit: cover;
    border-radius: 1vw;
    margin: 2vh 0vw 2vh 0vw;
  }
/*------------------------------------------*/


/*-----------------Equipo-y-Contacto-------------------*/
.Cuerpo-Bloque{
  margin: -3vh 0vw -2vh 0vw;
}

.Estructura-Seccion{
  display: flex;
  gap: 0.8vw;
  align-items: center;
  margin: 8vh 0vw 1vh 0vw;
}

.Estructura-Seccion img{
  height: 1.5rem;
  min-height: 1.5vw;
  max-height: 1.5rem;
background: none;
}

.Estructura-Seccion h3{
  font-size: 1.5vw;
  font-weight: 800;
  color: var(--color-secundario-variable5);
  margin: 0vh 0vw 0vh 0vw;
}
/*------------------------------------------*/


/*------------------Noticias--------------------*/

.texto { 
  text-align: start;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25vh 4vw 3vh 1.5vw ;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.829));
  color: var(--color-secundario-variable5);
}

.texto h4{
  font-size: 1.6vw;
  margin: 0vh 2vw 1.5vh 0vw;
  color: var(--color-secundario-variable5);
}

.texto h3{
  font-size: 1.2vw;
  margin: 0vh 2vw 0vh 0vw;
  color: var(--color-secundario-variable5);
}

.texto p{
  font-size: var(--parrafos);
  color: var(--color-secundario-variable2);
  margin: 0vh 2vw 0vh 0vw;
}

.cont-img-noticia{
  display: flex;
  align-items: center;
  margin: 0vh 0vw 1.5vh 0vw;
}

.cont-img-noticia img{
  width: 2rem;
  min-width: 2.5vw;
  max-width: 2rem;
  height: 2rem;
  min-height: 2.5vw;
  max-height: 2rem;
  border-radius: 50%;
  margin: 0vh 1vw 0vh 0vw;
}


/*------------------Contenido-Recurso-------------------*/
.contenedor-Recurso{ 
  border-radius: 0.5vw;
  position: relative;
  overflow: hidden;
  width: 24vw;
  height: 28vh;
  transition: 0.3s;
}

.contenedor-Recurso{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-Recurso a{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-Recurso:hover{ 
  opacity: 90%;
}

.contenedor-Recurso img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contenedor-Recurso video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cont-img-Recurso{
  display: flex;
  align-items: center;
  margin: 0vh 0vw 1.5vh 0vw;
}

.cont-img-Recurso img{
  width: 2rem;
  min-width: 2.5vw;
  max-width: 2rem;
  height: 2rem;
  min-height: 2.5vw;
  max-height: 2rem;
  border-radius: 50%;
  margin: 0vh 1vw 0vh 0vw;
}
/*------------------------------------------*/



/*------------------------------------------*/
.separador-Pbl{
  margin: 2rem 0vw 1rem 0vw;
}

  .separador-Pbl2{
    margin: 1rem 0vw 0rem 0vw;
}
/*------------------------------------------*/



/*------------------------------------------*/
.cont-Imagenes-videos-acopladas{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
  margin: 8vh 0vw 2vh 0vw;
}

.list-acoplada{
  margin: 0vh 0vw 0vh 0vw;
}

.cont-Imagenes-videos-acopladas img{
  flex: 1 1 20vw;
  max-width: 100%;
  max-height: 12.5rem;
  width: 100%;
  object-fit: cover;
  border-radius: 0.5vw;
  background: var(--color-secundario-variable3);
  padding: 0vh 0vw 0vh 0vw;
}

.cont-Imagenes-videos-acopladas video{
  width: 100%;
  height: 40vh;
  object-fit: cover;
  border-radius: 1vw;
  background: var(--color-secundario-variable3);
  padding: 0vh 0vw 0vh 0vw;
}
/*------------------------------------------*/


/*------------------------------------------*/
.cont-Pbl-tp-2{
display: flex;
align-items: center;
gap: 2.5vw;
margin: 3rem 0vw -0.5rem 0vw;
border-radius: 1vw;
}

.reverse{
text-align: start;
}

.cont-Imagenes-videos-acopladas2{
display: flex;
flex-wrap: wrap-reverse;
width: 40vw;
gap: 0.3vw;
overflow: hidden;
border-radius: 0.5vw;
margin: 0vh 0vw 0vh 0vw;
}

.cont-Imagenes-videos-acopladas2 img{
flex: 1 1 15vw;
max-width: 100%;
max-height: 10rem;
width: 15vw;
object-fit: cover;
background: var(--color-secundario-variable3);
padding: 0vh 0vw 0vh 0vw;
}
/*------------------------------------------*/


/*------------------------------------------*/
.unitario2{
  margin: 0vh 0vw 0vh 0vw;
}

.unitario2 img{
  min-width: 25vw;
  min-height: 23rem;
}
/*------------------------------------------*/


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

.scroll-wrapper {
  position: relative;
  margin-bottom: 0vw; /* Espacio entre las secciones */
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  border-radius: 1vw;
  gap: 0.5vw;
  margin: 3vh 0vw 0vh 0vw;
  padding: 1vh 0vw 3vh 0vw;
}
  
  .scroll-container::-webkit-scrollbar {
      display: none; /* Ocultar scrollbar por defecto */
  }

  .scroll-item {
      flex: 0 0 auto; /* Evita que los elementos se redimensionen */
      margin-right: 1vw; /* Espacio entre elementos */
      text-align: center;
  }

  .scroll-button {
      position: absolute;
      cursor: pointer;
      border: none;
      font-size: 2.5vw;
      border-radius: 50%;
      width: 2rem;
      min-width: 3.5vw;
      max-width: 2rem;
      height: 2rem;
      min-height: 3.5vw;
      max-height: 2rem;
      margin: 0vh -2vw 0vh -2vw;
      top: 50%;
      z-index: 1;
      color: var(--color-secundario-variable5);
      background-color: var(--color-principal);
      transform: translateY(-50%);
  }

  .scroll-button.left {
      left: 0;
  }

  .scroll-button.right {
      right: 0;
  }



  /*------------------Cont-Complementos------------------*/
.cont-complementos{
  margin: 3.5rem 12vw 4vh 12vw;
}

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

        /* Estilos generales y variables para un look minimalista y moderno */
        :root {
          --carousel-speed: 30s; /* Velocidad de la animación */
          --card-width: 340px; /* Ancho ligeramente mayor */
          --gap-spacing: 32px; /* Espacio entre tarjetas aumentado */
          --total-cards: 5; /* Este valor es sobreescrito por JS */
      }

      .carousel-container h5 {
        font-size: 2vw; /* Título más grande y enfocado */
        color: var(--color-secundario);
        margin: 0rem 0vw 0.5rem 0vw;
        text-align: start;
        font-weight: 800;
      }

      .carousel-container p {
        font-size: var(--parrafos);
        color: var(--color-secundario-variable2);
        margin: 0vh 0vw 2rem 0vw;
      }



/* Contenedor principal que oculta el overflow */
.carousel-container {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  margin: 3rem 0vw 0rem 0vw;
}

/* Pista que contiene todas las tarjetas */
.carousel-track {
  display: flex;
  gap: 1.5vw;
  /* Animación de movimiento infinito */
  animation: scroll 80s linear infinite;
}

/* Definición de la animación de scroll */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { 
      /* Fórmula para el desplazamiento infinito */
      transform: translateX(calc(-1 * (340px + 32px) * 5)); 
  }
}

/* Clase para pausar la animación */
.carousel-track.paused {
  animation-play-state: paused;
}

/* Diseño de cada tarjeta de testimonio - Minimalista */
.testimonial-card {
  flex-shrink: 0;
  width: var(--card-width);
  background: var(--color-secundario-variable3);
  padding: 2.5vh 2.5vw 2.5vh 2.5vw;; /* Aumento de padding interno */
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none; /* Eliminamos el borde duro */
  cursor: pointer;
}

.testimonial-card:hover {
  transform: translateY(-8px); /* Elevación más notable */
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.137); /* Sombra inicial muy sutil */
}

/* Contenido del testimonio */
.testimonial-text {
  font-size: var(--parrafos); /* Fuente más grande para el texto */
  color: var(--color-secundario-variable2);
  line-height: 1.7;
  font-style: normal;
  position: relative;
  padding-top: 20px; /* Espacio para la comilla */
  margin: 0vh 0vw 0rem 0vw;
}

.testimonial-card p{
  font-size: var(--parrafos);
  font-style: italic;
  color: var(--color-secundario-variable2);
  margin: 0vh 0vw 1rem 0vw;
}


/* Estilo para la comilla de apertura (detalle moderno) */
.testimonial-text::before {
  content: '“';
  font-size: 2rem;
  color: var(--color-secundario);
  position: absolute;
  top: 0px;
  left: -10px;
  opacity: 0.8;
  line-height: 1;
  font-weight: 700;
}

/* Info del cliente */
.client-info {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #5a5a5a; /* Separador sutil */
}

.client-photo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  border: 3px solid var(--color-principal); /* Borde con color de acento */
}

.client-name {
  font-weight: 700;
  color: var(--color-secundario);
  font-size: 1.0rem;
}


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



  /*------------------Contenido-Preguntas-Frecuentes------------------*/
.faq-container {
  width: 100%;
  border-radius: 8px;
  text-align: start;
  margin: 0vh 0vw 0vh 0vw;
  }
  
  .faq-container  h5 {
  font-size: 2vw;
  color: var(--color-secundario);
  margin: 0vh 0vw 0.8rem 0vw;
  }
  
  .faq-container  p {
    font-size: var(--parrafos);
    color: var(--color-secundario-variable2);
  margin: 0vh 0vw 2rem 0vw;
  }
  
  .faq-container  button {
    font-weight: 600;
    font-size: var(--parrafos);
    color: var(--color-secundario-variable5);
  }
  
  .faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.123);
  margin-bottom: 15px;
  }
  
  .faq-question {
  width: 100%;
  text-align: left;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  padding: 1vw;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s;
  }
  
  .faq-question .arrow {
  float: right;
  transition: transform 0.3s;
  transform: rotate(270deg);
  font-weight: 600;
  color: var(--color-secundario-variable4);
  }
  
  .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.0s ease-out, padding 0.1s ease-out;
  }
  
  .faq-item.open .faq-answer {
  max-height: 500px; /* Ajustar según el contenido */
  padding: 1vw;
  }
  
  .faq-item.open .faq-question .arrow {
  transform: rotate(90deg);
  }
  


  
  /*------------------Contenido-Publicidad-------------------*/
  .publicidad{
  text-align: start;
  margin: 4rem 0vw 0rem 0vw;
  padding: 0vh 0vw 0vh 0vw;
  z-index: 0;
  }
  
  .publicidad h6{
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 1vw;
  margin: 0vh 0vw 1rem 0vw;
  }
  
  .publicidad1 { 
  border-radius: 0.5vw;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  }
  
  .publicidad1:hover{ 
    filter: brightness(120%);
  }
  
  .publicidad1 img{
  width: 100%;
  max-height: 12rem;
  object-fit: cover;
  }
  
  .publicidad1 video {
  width: 100%;
  max-height: 12rem;
  object-fit: cover;
  }
  
  .publicidad .texto { 
  text-align: start;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25vh 4vw 1.2rem 1.5vw ;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.534));
  color: var(--color-secundario-variable5);
  }
  
  .publicidad .texto h4{
  font-size: 1.8vw;
  width: 40vw;
  margin: 0vh 4vw 0.5rem 0vw;
  color: var(--color-secundario-variable5);
  }
  
  .publicidad .texto p{
    font-size: var(--parrafos);
    color: var(--color-secundario-variable4);
  margin: 0vh 2vw 2vh 0vw;
  }
  
  
  /*---------------------------------------------------------------------*/
  
  footer { 
  text-align: center;
  margin: 8vh 0vw 5vh 0vw;
  opacity: 50%;
  }
  
  footer h6{ 
    color: var(--color-secundario);
  margin: 0vh 0vw 0vh 0vw;
  }

  .enlaces-princiáles{
    display: flex;
    justify-content: center;
    gap: 3vw;
    margin: 3vh 0vw 5vh 0vw;
  }
  
  .enlaces-princiáles a{
    font-size: 1.1vw;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-secundario);
  }
  
  .enlaces-princiáles a:hover{
    text-decoration: underline;
  }

/* Estilos del botón */
.boton-fijo {
  position: fixed;
  left: 0px;
  top: 20px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  opacity: 70%;
  background-color: var(--color-principal-variable2);
  color: var(--color-secundario-variable5);
  border: none;
  border-bottom-right-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.boton-fijo:hover {
  opacity: 100%;
    background-color: var(--color-principal);
}



    /* ======================================================= */
    /* 2. CORE: Estilos de la Animación Scroll Reveal */
    /* ======================================================= */

    /* 2.1. Estado Inicial: Oculto y Ligeramente Desplazado */
    .scroll-animate {
      opacity: 0;
      transform: translateY(10px); 
      /* Configura aquí la duración y suavidad de la animación */
      transition: opacity 1.0s ease-out, transform 1.0s ease-out; 
      /* Para que la animación comience más tarde */
      transition-delay: 0.1s; 
      will-change: opacity, transform;
  }

  /* 2.2. Estado Final: Visible y en su Posición Original */
  .scroll-animate.show {
      opacity: 1;
      transform: translateY(0);
  }



/*---------------------------------------------------------------------*/
@media(width <= 1024px){
  /*-----------Cabezera-Pg-Seccionada-----------*/
.cabezera {
  margin: 0vh 0vw 0vh 0vw;
}

.cabezera img{
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.cabezera video{
  width: 100%;
  height: 12rem;
  object-fit: cover;
}
/*------------------------------------------*/



.cont-inf{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0vw 0.5rem 0vw;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido{
  display: flex;
  align-items: center;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido img{
  width: 2.3rem;
  min-width: 2.5vw;
  max-width: 2.3rem;
  height: 2.3rem;
  min-height: 2.5vw;
  max-height: 2.3rem;
  margin: 0px 0.5vw 0px 0px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-secundario-variable3);
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido h6{
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 1.1vw;
  margin: 0px 0vw -0.2rem 0.5vw;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido small{
color: var(--color-secundario-variable2);
  font-size: 1vw;
  margin: 0px 0vw 0px 0.5vw;
}

.cont-botones-enlace{
  display: flex;
  gap: 1vw;
  align-items: center;
}

.cont-botones-enlace img{
  width: 1rem;
  min-width: 1.5vw;
  max-width: 1rem;
  height: 1rem;
  min-height: 1.5vw;
  max-height: 1rem;
}

.cont-botones-enlace svg{
fill: var(--color-secundario);
  width: 1rem;
  min-width: 1.5vw;
  max-width: 1rem;
  height: 1rem;
  min-height: 1.5vw;
  max-height: 1rem;
}

.cont-botones-enlace h6{
  font-size: 1.05vw;
    font-weight: var(--titulos-grosro-texto);
  color: var(--color-secundario);
  margin: 0.5vh 0.5vw 0px 0px;
}

.social-button {
  padding: 0.5rem 0.5rem;
  border-radius: 10vw;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: var(--color-secundario-variable3);
  border: none;
  border-radius: 50%;
}

.social-button img {
  width: 1rem;
  height: 1rem;
}

.social-button svg {
fill: var(--color-secundario);
  width: 1rem;
  height: 1rem;
}

.social-button:hover{
  opacity: 80%;
}



/*-----------------Cont-portafolio--------------------------*/
.cont-Sec-blog{
  margin: 0rem 10vw 0vh 10vw;
}

.cont-Sec-blog h1{
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 4.5vw;
  margin: 1rem 0vw 0.5rem 0vw;
}

.cont-Sec-blog p{
  font-size: var(--parrafos);
  color: var(--color-secundario-variable2);
  margin: 0vh 10vw 1.5rem 0vw;
}

.cont-Sec-blog hr{
  opacity: 20%;
  margin: 1rem 0vw -1rem 0vw;
}
/*------------------------------------------*/


/*---------------Cont-Blog-Controles-Mando-----------------*/
.cont-indice{
  display: flex;
  gap: 1vw;
}

.cont-indice a{
  text-decoration: none;
}

.boton {
  background-color: var(--color-secundario-variable3); /* Color original */
  color: var(--color-secundario);
  border: none;
  border-radius: 2vw;
  font-size: 1.1vw;
  cursor: pointer;
  margin: 0vh 0vw 0.5rem 0vw;
  padding: 1.5vh 1.8vw 1.5vh 1.8vw;
  transition: 0.3s;
}

.boton:hover{
  color: var(--color-secundario-variable5);
  background:  var(--color-principal); /* Color original */
  transition: 0.3s;
}

.clicked {
  color: var(--color-secundario-variable5);
  background:  var(--color-principal-variable2); /* Nuevo color al hacer clic */
}

.indice-categorias{
  background: var(--color-secundario);
  border-radius: 3vw;
  margin: 4vh 0vw 1.5vh 0vw;
  padding: 1.8vh 2vw 1.8vh 2vw;
}
/*------------------------------------------*/



/*-----------Descripcion-Pg-Seccionada-----------*/
  .descrip-Pg-Seccionada{
    margin: 0vh 12vw 0vh 12vw;
  }

  .descrip-Pg-Seccionada h2{
    color: var(--color-secundario);
    font-weight: var(--titulos-grosro-texto);
    font-size: 3.5vw;
    margin: 0vh 0vw 0.5rem 0vw;
  }

  .descrip-Pg-Seccionada p{
    font-size: var(--parrafos);
    color: var(--color-secundario-variable2);
    margin: 1rem 0vw 0vh 0vw;
  }

  .descrip-Pg-Seccionada hr{
    opacity: 20%;
    margin: 1rem 0vw 0vh 0vw;
  }



  /*------------------------------------------*/
  .cont-estruc-fichas-elementos{
    margin: 1.8rem 0vw 1.8rem 0vw;
  }

  .cont-estruc-fichas-elementos h3{
    color: var(--color-secundario);
    font-weight: var(--titulos-grosro-texto);
    font-size: 3.5vw;
    margin: 0rem 0vw 0.5rem 0vw;
  }



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

/*------------------------------------------*/
.Descrp-Pbl-tp-2{
  width: 50vw;
}

.Descrp-Pbl-tp-2 h3{
  width: 100%;
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 3vw;
  margin: 0vh 0vw 0.5rem 0vw;
}

.Descrp-Pbl-tp-2 h4{
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 2.5vw;
  margin: 1.5rem 0vw -1vh 0vw;
}

.Descrp-Pbl-tp-2 p{
margin: 1rem 0vw 0vh 0vw;
font-size: var(--parrafos);
color: var(--color-secundario-variable2);
}

.Descrp-Pbl-tp-2 a{
  text-decoration: none;
}

.Descrp-Pbl-tp-2 a {
  margin: 2vh 0vw 1vh 0vw;
  padding: 2vh 3vw;
  font-size: 1.3vw;
  background-color: var(--color-principal);
  color: var(--color-secundario-variable5);
  text-decoration: none;
  border-radius: 3.5vw;
  transition: 0.3s;
}

.Descrp-Pbl-tp-2 a:hover {
  background-color: var(--color-principal-variable2);
}




  /* Estilo para tarjetas con diseño flexible */

  /* Estilo para tarjetas con diseño flexible (Reemplaza flex flex-col md:flex-row items-start space-y-4 md:space-x-6) */
      .flex-card {
        display: flex;
        align-items: flex-start;
        gap: 1rem; /* space-y-4 */
        flex-direction: row;
    }

    .flex-card > *:first-child {
        flex-shrink: 0; /* flex-shrink-0 */
    }

    /* Contenedor de las 4 tarjetas de Servicios (Reemplaza grid grid-cols-1 md:grid-cols-2 gap-6 mb-20) */
    .grid-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem; /* gap-6 */
        margin-top: 2rem; /* mb-20 */
    }


    /* Contenedor de los 3 pasos (Reemplaza grid grid-cols-1 md:grid-cols-3 gap-6) */
    .grid-steps {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* ============================================== */
    /* ESTILOS DE COMPONENTES (Reemplazando clases combinadas) */
    /* ============================================== */

    /* Estilo para las tarjetas de Servicios Oscuras (card-dark) */
    .card-dark {
        background-color: var(--color-principal);
        color: white;
        border-radius: 0.5vw; /* rounded-2xl */
        padding: 1.5rem; /* p-6 */
        transition: transform 0.3s ease;
    }

    .card-dark:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 25px -5px rgba(255, 255, 255, 0.13);
    }

    /* Estilo para las tarjetas de Servicios Claras (card-light) */
    .card-light {
        background-color: var(--color-secundario-variable3); /* Lila claro */
        color: var(--color-secundario);
        border-radius: 0.5vw; /* rounded-2xl */
        padding: 1.5rem; /* p-6 */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-light:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 25px -5px rgba(255, 255, 255, 0.13);
    }

    .text-elemen-container h6{
      font-size: 1.5vw;
      margin: 0vh 0vw 0.5rem 0vw;
      padding: 0vh 0vw 0vh 0vw;
    }

    .text-elemen-container p{
      font-size: 1.1vw;
      margin: 0vh 0vw 0vh 0vw;
      padding: 0vh 0vw 0vh 0vw;
    }

    .icon-container svg{
      width: 2vw;
      margin: 0px 0.1vw 0px 0px;
      fill: var(--color-secundario);
  }






      /* Contenedor de las Estadísticas (Reemplaza grid grid-cols-2 md:grid-cols-4 gap-8 text-center text-white) */
      .grid-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem; /* gap-8 */
        text-align: center; /* text-center */
        color: white; /* text-white */
    }

      /* Bloque de Estadísticas (stats-block - Reemplaza rounded-2xl p-12 mt-12) */
      .stats-block { 
          background-color: var(--color-principal);
          border-radius: 0.5vw; /* rounded-2xl */
          padding: 2rem; /* p-12 */
          margin-top: 2rem; /* mt-12 */
      }

      /* Estilos de fuente para los números de estadísticas */
      .stats-block span:first-child { font-size: 2.5vw; font-weight: 800; }

      /* Estilos de fuente para el texto de las estadísticas */
      .stats-block span:last-child { font-size: 1.2vw; margin-top: 0.5rem; color: var(--color-secundario-variable2); } 

      .stats-block > div > div { display: flex; flex-direction: column; align-items: center; }


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

/*------------------------------------------*/
  .puntos-clave{
    font-style: italic;
    background: var(--color-secundario-variable3);
    border-left: 3px solid #0042bd;
    margin: 1rem 0vw 0vh 0vw;
    padding: 1.5vh 2vw 3vh 3vw;
  }

  .puntos-clave h5{
    font-size: 1.2vw;
    color: var(--color-secundario);
    margin: 0.5rem 0vw 0.8rem -1vw;
  }

  .puntos-clave li{
    font-size: var(--parrafos);
    color: var(--color-secundario-variable4);
    margin: 1.3vh 0vw 0vh 1vw;
  }

  .limpio{
    background: none;
    border-left: none;
    padding: 0vh 0vw 0vh 0vw;
    margin: 1rem 0vw 1.5rem 3vw;
  }

  .separador{
    margin: 8vh 0vw 0vh 0vw;
  }

  .puntos-clave strong{
    margin: 0vh 0vw 0vh 0vw;
  }

  .puntos-clave img{
    width: 95%;
    height: 20vh;
    object-fit: cover;
    border-radius: 1vw;
    margin: 2vh 0vw 2vh 0vw;
  }
/*------------------------------------------*/


/*-----------------Equipo-y-Contacto-------------------*/
.Cuerpo-Bloque{
  margin: -3vh 0vw -2vh 0vw;
}

.Estructura-Seccion{
  display: flex;
  gap: 0.8vw;
  align-items: center;
  margin: 8vh 0vw 1vh 0vw;
}

.Estructura-Seccion img{
  height: 1.5rem;
  min-height: 1.5vw;
  max-height: 1.5rem;
background: none;
}

.Estructura-Seccion h3{
  font-size: 1.3vw;
  font-weight: 800;
  color: var(--color-secundario-variable5);
  margin: 0vh 0vw 0vh 0vw;
}
/*------------------------------------------*/

/*------------------Noticias--------------------*/
.contenedor-noticia{ 
  border-radius: 0.5vw;
  position: relative;
  overflow: hidden;
  width: 25vw;
  height: 35vh;
  transition: 0.3s;
}

.contenedor-noticia{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-noticia a{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-noticia:hover{ 
  filter: brightness(120%);
}

.contenedor-noticia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contenedor-noticia video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.texto { 
  text-align: start;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25vh 4vw 3vh 1.5vw ;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.829));
  color: var(--color-secundario-variable5);
}

.texto h4{
  font-size: 1.6vw;
  margin: 0vh 2vw 1.5vh 0vw;
  color: var(--color-secundario-variable5);
}

.texto h3{
  font-size: 1.2vw;
  margin: 0vh 2vw 0vh 0vw;
  color: var(--color-secundario-variable5);
}

.texto p{
  font-size: var(--parrafos);
  color: var(--color-secundario-variable2);
  margin: 0vh 2vw 0vh 0vw;
}

.cont-img-noticia{
  display: flex;
  align-items: center;
  margin: 0vh 0vw 1.5vh 0vw;
}

.cont-img-noticia img{
  width: 2rem;
  min-width: 2.5vw;
  max-width: 2rem;
  height: 2rem;
  min-height: 2.5vw;
  max-height: 2rem;
  border-radius: 50%;
  margin: 0vh 0.5vw 0vh 0vw;
}


/*------------------Contenido-Recurso-------------------*/
.contenedor-Recurso{ 
  border-radius: 0.5vw;
  position: relative;
  overflow: hidden;
  width: 24vw;
  height: 30vh;
  transition: 0.3s;
}

.contenedor-Recurso{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-Recurso a{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-Recurso:hover{ 
  filter: brightness(120%);
}

.contenedor-Recurso img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contenedor-Recurso video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cont-img-Recurso{
  display: flex;
  align-items: center;
  margin: 0vh 0vw 1.5vh 0vw;
}

.cont-img-Recurso img{
  width: 2rem;
  min-width: 2.5vw;
  max-width: 2rem;
  height: 2rem;
  min-height: 2.5vw;
  max-height: 2rem;
  border-radius: 50%;
  margin: 0vh 0.5vw 0vh 0vw;
}
/*------------------------------------------*/



/*------------------------------------------*/
.separador-Pbl{
  margin: 2vh 0vw 1vh 0vw;
}

  .separador-Pbl2{
  margin: 5vh 0vw 1vh 0vw;
}
/*------------------------------------------*/



/*------------------------------------------*/
.cont-Imagenes-videos-acopladas{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
  margin: 3rem 0vw 0.8rem 0vw;
}

.list-acoplada{
  margin: 0vh 0vw 0vh 0vw;
}

.cont-Imagenes-videos-acopladas img{
  flex: 1 1 20vw;
  max-width: 100%;
  max-height: 30vh;
  width: 100%;
  object-fit: cover;
  border-radius: 0.5vw;
  background: var(--color-secundario-variable3);
  padding: 0vh 0vw 0vh 0vw;
}

.cont-Imagenes-videos-acopladas video{
  width: 100%;
  height: 40vh;
  object-fit: cover;
  border-radius: 1vw;
  background: var(--color-secundario-variable3);
  padding: 0vh 0vw 0vh 0vw;
}
/*------------------------------------------*/


/*------------------------------------------*/
.cont-Pbl-tp-2{
display: flex;
align-items: center;
gap: 2.5vw;
margin: 1.5rem 0vw 0rem 0vw;
border-radius: 1vw;
}

.reverse{
text-align: start;
}

.cont-Imagenes-videos-acopladas2{
display: flex;
flex-wrap: wrap-reverse;
width: 40vw;
gap: 0.3vw;
overflow: hidden;
border-radius: 0.5vw;
margin: 0vh 0vw 0vh 0vw;
}

.cont-Imagenes-videos-acopladas2 img{
flex: 1 1 15vw;
max-width: 100%;
max-height: 28vh;
width: 15vw;
object-fit: cover;
background: var(--color-secundario-variable3);
padding: 0vh 0vw 0vh 0vw;
}
/*------------------------------------------*/


/*------------------------------------------*/
.unitario2{
  margin: 0vh 0vw 0vh 0vw;
}

.unitario2 img{
  min-width: 25vw;
  min-height: 21rem;
}
/*------------------------------------------*/


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

.scroll-wrapper {
  position: relative;
  margin-bottom: 0vw; /* Espacio entre las secciones */
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  border-radius: 1vw;
  gap: 0.5vw;
  margin: 3vh 0vw 0vh 0vw;
  padding: 1vh 0vw 3vh 0vw;
}
  
  .scroll-container::-webkit-scrollbar {
      display: none; /* Ocultar scrollbar por defecto */
  }

  .scroll-item {
      flex: 0 0 auto; /* Evita que los elementos se redimensionen */
      margin-right: 1vw; /* Espacio entre elementos */
      text-align: center;
  }

  .scroll-button {
      position: absolute;
      cursor: pointer;
      border: none;
      font-size: 2.5vw;
      border-radius: 50%;
      width: 2rem;
      min-width: 3.5vw;
      max-width: 2rem;
      height: 2rem;
      min-height: 3.5vw;
      max-height: 2rem;
      margin: 0vh -2vw 0vh -2vw;
      top: 50%;
      z-index: 1;
      color: var(--color-secundario-variable5);
      background-color: var(--color-principal);
      transform: translateY(-50%);
  }

  .scroll-button.left {
      left: 0;
  }

  .scroll-button.right {
      right: 0;
  }



/*------------------Cont-Complementos------------------*/
.cont-complementos{
  margin: 3rem 12vw 4vh 12vw;
}

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

        /* Estilos generales y variables para un look minimalista y moderno */
        :root {
          --primary-color: #4338ca; /* Indigo moderno como color de acento */
          --light-bg: #f8fafc; /* Fondo general muy claro */
          --text-dark: #1e293b;
          --text-medium: #475569;

          --carousel-speed: 30s; /* Velocidad de la animación */
          --card-width: 340px; /* Ancho ligeramente mayor */
          --gap-spacing: 32px; /* Espacio entre tarjetas aumentado */
          --total-cards: 5; /* Este valor es sobreescrito por JS */
      }

      .carousel-container h5 {
        font-size: 2vw; /* Título más grande y enfocado */
        color: var(--color-secundario);
        margin: 0rem 0vw 0.5rem 0vw;
        text-align: start;
        font-weight: 800;
      }

      .carousel-container p {
        font-size: var(--parrafos);
        color: var(--color-secundario-variable2);
        margin: 0vh 0vw 2rem 0vw;
      }


/* Contenedor principal que oculta el overflow */
.carousel-container {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  margin: 3rem 0vw 0rem 0vw;
}

/* Pista que contiene todas las tarjetas */
.carousel-track {
  display: flex;
  gap: 1.5vw;
  /* Animación de movimiento infinito */
  animation: scroll 80s linear infinite;
}


/* Definición de la animación de scroll */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { 
      /* Fórmula para el desplazamiento infinito */
      transform: translateX(calc(-1 * (340px + 32px) * 5)); 
  }
}

/* Clase para pausar la animación */
.carousel-track.paused {
  animation-play-state: paused;
}

/* Diseño de cada tarjeta de testimonio - Minimalista */
.testimonial-card {
  flex-shrink: 0;
  width: var(--card-width);
  background: var(--color-secundario-variable3);
  padding: 2.5vh 2.5vw 2.5vh 2.5vw;; /* Aumento de padding interno */
  border-radius: 1vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none; /* Eliminamos el borde duro */
  cursor: pointer;
}

.testimonial-card:hover {
  transform: translateY(-8px); /* Elevación más notable */
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.137); /* Sombra inicial muy sutil */
}

/* Contenido del testimonio */
.testimonial-text {
  font-size: var(--parrafos); /* Fuente más grande para el texto */
  color: var(--color-secundario-variable2);
  line-height: 1.7;
  font-style: normal;
  position: relative;
  padding-top: 20px; /* Espacio para la comilla */
  margin: 0vh 0vw 0rem 0vw;
}

.testimonial-card p{
  font-size: var(--parrafos);
  color: var(--color-secundario-variable2);
  margin: 0vh 0vw 1rem 0vw;
}


/* Estilo para la comilla de apertura (detalle moderno) */
.testimonial-text::before {
  content: '“';
  font-size: 2rem;
  color: var(--color-secundario);
  position: absolute;
  top: 0px;
  left: -10px;
  opacity: 0.8;
  line-height: 1;
  font-weight: 700;
}

/* Info del cliente */
.client-info {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #5a5a5a; /* Separador sutil */
}

.client-photo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  border: 3px solid var(--color-principal); /* Borde con color de acento */
}

.client-name {
  font-weight: 700;
  color: var(--color-secundario);
  font-size: 1.0rem;
}

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

  /*------------------Contenido-Preguntas-Frecuentes------------------*/
.faq-container {
  width: 100%;
  border-radius: 8px;
  text-align: start;
  margin: 0vh 0vw 0vh 0vw;
  }
  
  .faq-container  h5 {
  font-size: 2vw;
  color: var(--color-secundario);
  margin: 0vh 0vw 0.5rem 0vw;
  }
  
  .faq-container  p {
    font-size: var(--parrafos);
    color: var(--color-secundario-variable2);
  margin: 0vh 0vw 1.5rem 0vw;
  }
  
  .faq-container  button {
    font-weight: 600;
    font-size: var(--parrafos);
    color: var(--color-secundario-variable5);
  }
  
  .faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.123);
  margin-bottom: 15px;
  }
  
  .faq-question {
  width: 100%;
  text-align: left;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  padding: 1.3vw;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s;
  }
  
  .faq-question .arrow {
  float: right;
  transition: transform 0.3s;
  transform: rotate(270deg);
  font-weight: 600;
  color: var(--color-secundario-variable4);
  }
  
  .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.0s ease-out, padding 0.1s ease-out;
  }
  
  .faq-item.open .faq-answer {
  max-height: 500px; /* Ajustar según el contenido */
  padding: 1vw;
  }
  
  .faq-item.open .faq-question .arrow {
  transform: rotate(90deg);
  }
  
  
  /*------------------Contenido-Publicidad-------------------*/
  .publicidad{
  text-align: start;
  margin: 4rem 0vw 0rem 0vw;
  padding: 0vh 0vw 0vh 0vw;
  z-index: 0;
  }
  
  .publicidad h6{
  color: var(--color-secundario);
  font-weight: var(--titulos-grosro-texto);
  font-size: 1.2vw;
  margin: 0vh 0vw 1rem 0vw;
  }
  
  .publicidad1 { 
  border-radius: 0.5vw;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  }
  
  .publicidad1:hover{ 
  opacity: 90%;
  }
  
  .publicidad1 img{
  width: 100%;
  height: 25vh;
  object-fit: cover;
  }
  
  .publicidad1 video {
  width: 100%;
  height: 25vh;
  object-fit: cover;
  }
  
  .publicidad .texto { 
  text-align: start;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25vh 4vw 3vh 1.5vw ;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.534));
  color: var(--color-secundario-variable5);
  }
  
  .publicidad .texto h4{
  font-size: 1.8vw;
  width: 40vw;
  margin: 0vh 4vw 0.3rem 0vw;
  color: var(--color-secundario-variable5);
  }
  
  .publicidad .texto p{
    font-size: var(--parrafos);
    color: var(--color-secundario-variable4);
  margin: 0vh 2vw 2vh 0vw;
  }
  
  
  /*---------------------------------------------------------------------*/
  
  footer { 
  text-align: center;
  margin: 8vh 0vw 5vh 0vw;
  opacity: 50%;
  }
  
  footer h6{ 
    color: var(--color-secundario);
  margin: 0vh 0vw 0vh 0vw;
  }

  .enlaces-princiáles{
    display: flex;
    justify-content: center;
    gap: 3vw;
    margin: 3vh 0vw 5vh 0vw;
  }
  
  .enlaces-princiáles a{
    font-size: 1.1vw;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-secundario);
  }
  
  .enlaces-princiáles a:hover{
    text-decoration: underline;
  }

/* Estilos del botón */
.boton-fijo {
  position: fixed;
  left: 0px;
  top: 15px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  opacity: 70%;
  background-color: var(--color-principal-variable2);
  color: var(--color-secundario-variable5);
  border: none;
  border-bottom-right-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.boton-fijo:hover {
  opacity: 100%;
    background-color: var(--color-principal);
}
}

/*---------------------------------------------------------------------*/
@media(Width <= 912px){


    :root{
      --titulos: 8vw;
      --parrafos: 3vw; 
  
      --fondo-portada-pagina: linear-gradient(rgb(0, 0, 0), rgb(0, 11, 109)), url(/Aspectos-Visuales-Entorno-Digital/Aspectos-Visuales-PG/fondo-especial-1.jpg);
    
      --fondo-pagina: linear-gradient(rgba(12, 12, 12, 0.801),rgba(8, 8, 8, 0.678)), url(/Aspectos-Visuales-Entorno-Digital/Aspectos-Visuales-PG/fondo-1.jpg);
  
      --fondo-secciones-especiales: linear-gradient(rgba(0, 0, 0, 0.842), rgba(0, 0, 0, 0.397)), url(/Aspectos-Visuales-Entorno-Digital/Aspectos-Visuales-PG/fondo-especial-1.jpg);
  }


  /*-----------Cabezera-Pg-Seccionada-----------*/
  .cabezera img{
    height: 25vh;
    width: 100%;
    object-fit: cover;
  }

  .cabezera video{
    height: 25vh;
    width: 100%;
    object-fit: cover;
  }
  /*---------------------------------------------------------------------*/




  .cont-inf{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -1vh 0vw 2.5vh 0vw;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido{
    display: flex;
    align-items: center;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido img{
    width: 2rem;
    height: 2rem;
    margin: 0px 1vw 0px 0px;
    border-radius: 50%;
    object-fit: cover;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido h6{
    font-size: 2.8vw;
    margin: 0px 0vw -0.5rem 0.5vw;
}

.cont-inf-enlaces-articulo-Documentación-Noticia-Contenido small{
    font-size: 1.8vw;
    margin: 0px 0vw 0px 0.5vw;
}

.cont-botones-enlace{
    display: flex;
    gap: 1vw;
    align-items: center;
}

.cont-botones-enlace img{
    width: 0.5rem;
    height: 0.5rem;
}

.cont-botones-enlace h6{
    font-size: 2vw;
    margin: 0vh 2vw 0px 0px;
    display: none;
}

.social-button {
    padding: 0.5rem 0.5rem;
    border-radius: 10vw;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 50%;
}

.social-button img {
    width: 1rem;
    height: 1rem;
}

.social-button:hover{
    opacity: 80%;
}




  /*---------------------------cont-Sec-blog-----------------------------*/
.cont-Sec-blog{
  margin: 1.5rem 5vw 0vh 5vw;
}

.cont-Sec-blog h1{
  font-size: var(--titulos);
  font-weight: var(--titulos-grosro-texto);
  margin: 0vh 0vw 0.8rem 0vw;
}

.cont-Sec-blog p{
  font-size: var(--parrafos);
  margin: 0vh 0vw 1.5rem 0vw;
}

.cont-Sec-blog hr{
  opacity: 20%;
  margin: 1rem 0vw 1rem 0vw;
}

/*---------------Cont-Blog-Controles-Mando-----------------*/

.cont{
  overflow: scroll;
}

.cont-indice{
  display: flex;
  gap: 0vw;
}

.cont-indice a{
  text-decoration: none;
}

.cont-botones-mando{
  display: flex;
  gap: 2vw;
  width: 280vw;
  overflow: hidden;

}

.cont::-webkit-scrollbar{
  display: none;
}

.boton {
  border: none;
  border-radius: 6vw;
  font-size: 3.5vw;
  cursor: pointer;
  margin: 0vh 0vw 1.1vh 0vw;
  padding: 1.5vh 6vw 1.5vh 6vw;
  transition: 0.3s;
}

.boton:hover{
  color: var(--color-secundario);
  background:  var(--color-principal); /* Color original */
  transition: 0.3s;
}

.clicked {
  color: var(--color-secundario);
  background:  var(--color-principal-variable2); /* Nuevo color al hacer clic */
}

.indice-categorias{
  border-radius: 3vw;
  margin: 4vh 0vw 1.5vh 0vw;
  padding: 1.8vh 2vw 1.8vh 2vw;
}




  /*-----------Descripcion-Pg-Seccionada-----------*/

  .descrip-Pg-Seccionada{
    margin: 0vh 5vw 0vh 5vw;
  }

  .descrip-Pg-Seccionada h2{
    font-weight: var(--titulos-grosro-texto);
    font-size: 6.5vw;
    margin: 0.8rem 0vw 0vh 0vw;
  }

  .descrip-Pg-Seccionada p{
    font-size: var(--parrafos);
    margin: 1rem 0vw 2rem 0vw;
  }

  .descrip-Pg-Seccionada strong{
    font-weight: 800;
    margin: 0vh 0vw 0vh 0vw;
  }

  .descrip-Pg-Seccionada hr{
    margin: 1rem 0vw 0vh 0vw;
  }


    /*------------------------------------------*/
    .cont-estruc-fichas-elementos{
      margin: 1.5rem 0vw 2.5rem 0vw;
    }
    
    .cont-estruc-fichas-elementos h3{
      color: var(--color-secundario);
      font-weight: var(--titulos-grosro-texto);
      font-size: 6.5vw;
      margin: 0vh 0vw 0.5rem 0vw;
    }
    
    .cont-estruc-fichas-elementos p{
      margin: 1rem 0vw 1rem 0vw;
      font-size: var(--parrafos);
    }


    /*------------------------------------------*/
  
  .cont-Pbl-tp-2{
  display: block;
  align-items: center;
  text-align: start;
  gap: 2vw;
  margin: 1.5rem 0vw 0rem 0vw;
  border-radius: 1vw;
  }

  .Descrp-Pbl-tp-2{
    width: 100%;
  }
  
  .Descrp-Pbl-tp-2 h3{
    width: 100%;
    font-weight: var(--titulos-grosro-texto);
    font-size: 6vw;
    margin: 0.8rem 0vw 1vh 0vw;
  }

  .Descrp-Pbl-tp-2 h4{
    width: 100%;
    font-weight: var(--titulos-grosro-texto);
    font-size: 5.5vw;
    margin: 1.5rem 0vw -0.3rem 0vw;
  }
  
  .Descrp-Pbl-tp-2 p{
  margin: 1rem 0vw 1rem 0vw;
  font-size: var(--parrafos);
  }
  
  .Descrp-Pbl-tp-2 hr{
  opacity: 20%;
  margin: 1.5vh 0vw 1.5vh 0vw;
  }
  
  .Descrp-Pbl-tp-2 a {
    margin: 2vh 0vw 1vh 0vw;
    padding: 2vh 36vw;
    font-size: 3.5vw;
    text-decoration: none;
    border-radius: 6.5vw;
    transition: 0.3s;
  }

  .separador-serccio{
    margin: 0rem 0vw 0rem 0vw;
  }

  .separador{
    margin: 0rem 0vw 0rem 0vw;
  }




    /* Estilo para tarjetas con diseño flexible */

  /* Estilo para tarjetas con diseño flexible (Reemplaza flex flex-col md:flex-row items-start space-y-4 md:space-x-6) */
  .flex-card {
    display: block;
    align-items: flex-start;
    gap: 1rem; /* space-y-4 */
    flex-direction: row;
}

.flex-card > *:first-child {
    flex-shrink: 0; /* flex-shrink-0 */
}

/* Contenedor de las 4 tarjetas de Servicios (Reemplaza grid grid-cols-1 md:grid-cols-2 gap-6 mb-20) */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; /* gap-6 */
    margin-top: 1.8rem; /* mb-20 */
    margin-bottom: 1.8rem; /* mb-20 */
}


/* Contenedor de los 3 pasos (Reemplaza grid grid-cols-1 md:grid-cols-3 gap-6) */
.grid-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ============================================== */
/* ESTILOS DE COMPONENTES (Reemplazando clases combinadas) */
/* ============================================== */

/* Estilo para las tarjetas de Servicios Oscuras (card-dark) */
.card-dark {
    background-color: var(--color-principal);
    color: white;
    border-radius: 2vw; /* rounded-2xl */
    padding: 1rem; /* p-6 */
    transition: transform 0.3s ease;
}

.card-dark:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px -5px rgba(255, 255, 255, 0.13);
}

/* Estilo para las tarjetas de Servicios Claras (card-light) */
.card-light {
    background-color: var(--color-secundario-variable3); /* Lila claro */
    color: var(--color-secundario);
    border-radius: 2vw; /* rounded-2xl */
    padding: 1rem; /* p-6 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-light:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px -5px rgba(255, 255, 255, 0.13);
}

.text-elemen-container h6{
  font-size: 4.5vw;
  margin: 0.5rem 0vw 0.5rem 0vw;
  padding: 0vh 0vw 0vh 0vw;
}

.text-elemen-container p{
  font-size: var(--parrafos);
  margin: 0vh 0vw 0vh 0vw;
  padding: 0vh 0vw 0vh 0vw;
}

.icon-container svg{
  width: 7.5vw;
  margin: 0px 0.1vw 0px 0px;
  fill: var(--color-secundario);
}





      /* Contenedor de las Estadísticas (Reemplaza grid grid-cols-2 md:grid-cols-4 gap-8 text-center text-white) */
      .grid-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem; /* gap-8 */
        text-align: center; /* text-center */
        color: white; /* text-white */
    }

      /* Bloque de Estadísticas (stats-block - Reemplaza rounded-2xl p-12 mt-12) */
      .stats-block { 
          background-color: var(--color-principal);
          border-radius: 3vw; /* rounded-2xl */
          padding: 1.5rem; /* p-12 */
          margin-top: 1.5rem; /* mt-12 */
      }

      /* Estilos de fuente para los números de estadísticas */
      .stats-block span:first-child { font-size: 5.5vw; font-weight: 800; }

      /* Estilos de fuente para el texto de las estadísticas */
      .stats-block span:last-child { font-size: 3.2vw; margin-top: 0.3rem; color: var(--color-secundario-variable2); } 

      .stats-block > div > div { display: flex; flex-direction: column; align-items: center; }






  .puntos-clave{
    border-left: 5px solid #0062be;
    border-radius: 5px;
    margin: 1.5rem 0vw 1rem 0vw;
    padding: 1vh 4vw 2.5vh 5.5vw;
  }

  .puntos-clave h5{
    font-size: 3.5vw;
    color: var(--color-secundario);
    margin: 0.5rem 0vw 0.8rem -1vw;
  }

  .puntos-clave li{
    font-size: var(--parrafos);
    margin: 1.3vh 0vw 0vh 4vw;
  }


  .puntos-clave strong{
    font-weight: 800;
    margin: 0vh 0vw 0vh 0vw;
  }

  .puntos-clave img{
    width: 95%;
    height: 10vh;
    object-fit: cover;
    border-radius: 2vw;
    margin: 2vh 0vw 1vh 0vw;
  }

  .limpio{
    border-left: none;
    padding: 0vh 0vw 0vh 0vw;
    margin: 1rem 1vw 1rem 5vw;
  }



  .cont-Recursos{
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    margin: 0vh 0vw 3vh 0vw;
  }

  .cont-Recursos a{
    text-decoration: none;
  }

  .recurso{
    flex: 1 1 20vw;
    max-width: 40vw;
    width: 100%;
    height: 100%;
    border-radius: 3vw;
    text-align: start;
    padding: 0vh 2vw 0vh 2vw;
    transition: 0.3s;
  }

  .recurso:hover{
    opacity: 80%;
  }

  .recurso img{
    height: 10vh;
    width: 100%;
    object-fit: cover;
    border-radius: 2vw;
    margin: 1.5vh 0vw 0vh 0vw;
  }

  .recurso small{
    font-size: 3.5vw;
    font-weight: 800;
    margin: 0vh 3.5vw 0vh 3.5vw;
  }

  .recurso h5{
    width: 35vw;
    font-size: 4vw;
    margin: 0vh 2.8vw 0.5vh 2.8vw;
  }

  .recurso p{
    font-size: 3vw;
    margin: 0vh 3.5vw 2vh 3.5vw;
  }

  .recurso::-webkit-scrollbar { 
    width: 2px;
  }

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

  .cont-Imagenes-videos-acopladas{
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    margin: 2rem 0vw 0vh 0vw;
  }

  .cont-Imagenes-videos-acopladas img{
    flex: 1 1 20vw;
    max-width: 100%;
    max-height: 23vh;
    min-height: 50%;
    min-width: 40%;
    object-fit: cover;
    border-radius: 2vw;
    padding: 0vh 0vw 0vh 0vw;
  }

  .cont-Imagenes-videos-acopladas video{
    width: 100%;
    height: 30vh;
    object-fit: cover;
    border-radius: 2vw;
    padding: 0vh 0vw 0vh 0vw;
  }

  .unitario img{
    min-height: 30vh;
  }



  .cont-Usuarios {
    display: block;
    align-items: center;
    gap: 2vw;
    overflow: hidden;
    margin: 2vh 0vw 1.5vh 0vw;
    padding: 0vh 0vw 2vh 0vw;
    border-radius: 2vw;
  }

  .cont-Usuarios img{
    width: 100%;
    height: 40vw;
  }

  .cont-descripcion-usuario h4{
    font-size: 5.5vw;
    margin: 2vh 4vw 1vh 4vw;
  }

  .cont-descripcion-usuario h5{
    font-size: 4vw;
    margin: 1vh 4vw 1vh 4vw;
  }

  .cont-descripcion-usuario p{
    margin: 0vh 4vw 0vh 4vw;
  }

  .cont-descripcion-usuario strong{
    font-weight: 800;
    margin: 0vh 0vw 0vh 0vw;
  }



/*-----------------Cuerpo-Bloque-------------------*/

.Cuerpo-Bloque{
  margin: -0.5rem 0vw 0rem 0vw;
}

.Estructura-Seccion{
  display: flex;
  gap: 0vw;
  align-items: center;
  margin: 0vh 0vw 0.8rem 0vw;
}

.Estructura-Seccion img{
  min-height: 2rem;
}

.Estructura-Seccion h3{
  font-size: 4vw;
  font-weight: 800;
  margin: 0vh 0vw 0px 2vw;
}

/*------------------noticia--------------------*/

.contenedor-noticia{ 
  border-radius: 3vw;
  position: relative;
  overflow: hidden;
  width: 60vw;
  height: 35vh;
  transition: 0.3s;
}

.contenedor-noticia{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-noticia a{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-noticia:hover{ 
  opacity: 90%;
}

.contenedor-noticia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.texto { 
  text-align: start;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25vh 4vw 2.5vh 3vw ;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.829));
}

.texto h4{
  font-size: 3.5vw;
  margin: 0vh 8vw 0.5vh 0vw;
}

.texto h3{
  font-size: 2.5vw;
  margin: 0vh 8vw 0vh 0vw;
}

.texto p{
  font-size: var(--parrafos);
  margin: 0vh 8vw 0vh 0vw;
}

.cont-img-noticia{
  display: flex;
  align-items: center;
  margin: 0vh 0vw 1vh 0vw;
}

.cont-img-noticia img{
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  margin: 0vh 1vw 0vh 0vw;
}


/*------------------Contenido-Recurso-------------------*/

.contenedor-Recurso{ 
  border-radius: 1vw;
  position: relative;
  overflow: hidden;
  width: 60vw;
  height: 17rem;
  transition: 0.3s;
}

.contenedor-Recurso{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-Recurso a{ 
  margin: 0vh 0vw 0vh 0vw;
}

.contenedor-Recurso:hover{ 
  opacity: 90%;
}

.contenedor-Recurso img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contenedor-Recurso video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cont-img-Recurso{
  display: flex;
  align-items: center;
  margin: 0vh 0vw 1vh 0vw;
}

.cont-img-Recurso img{
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  margin: 0vh 1vw 0vh 0vw;
}





.Unit3{
  margin: 3vh 0vw 3vh 0vw;
  }

.reverse{
text-align: start;
display: flex;
flex-wrap: wrap-reverse;
margin: 2.5rem 0vw 0rem 0vw;
}

.reverse h3{
text-align: start;
display: flex;
flex-wrap: wrap-reverse;
margin: 0.5rem 0vw 0rem 0vw;
}

.cont-Imagenes-videos-acopladas2{
display: flex;
flex-wrap: wrap-reverse;
width: 100%;
gap: 1vw;
overflow: hidden;
border-radius: 2vw;
margin: 0rem 0vw 0vh 0vw;
}

.cont-Imagenes-videos-acopladas2 img{
flex: 1 1 30vw;
max-width: 100%;
max-height: 18vh;
width: 40vw;
object-fit: cover;
padding: 0vh 0vw 0vh 0vw;
}

.cont-Imagenes-videos-acopladas2 video{
flex: 1 1 20vw;
max-width: 100%;
max-height: 30vh;
width: 100%;
object-fit: cover;
border-radius: 1vw;
padding: 0vh 0vw 0vh 0vw;
}

.unitario1{
min-height: 23vh;
margin: 0.5vh 0vw 0vh 0vw;
}

.unitario1 img{
min-height: 23vh;
}

.unitario2 img{
min-height: 23vh;
}

.unitario3 img{
  min-height: 23vh;
  }



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

.scroll-wrapper {
  position: relative;
  margin-bottom: 0px; /* Espacio entre las secciones */
  margin: 0vh 0vw -2vh -1vw;
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  border-radius: 3vw;
  margin: 0vh 0vw 0vh 0vw;
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Ocultar scrollbar por defecto */
}

.scroll-item {
  flex: 0 0 auto; /* Evita que los elementos se redimensionen */
  margin-right: 3vw; /* Espacio entre elementos */
  text-align: center;
}

.scroll-button {
  position: absolute;
  cursor: pointer;
  border: none;
  font-size: 4vw;
  border-radius: 50%;
  width: 0rem;
  height: 0rem;
  margin: 0vh -2.8vw 0vh -2.8vw;
  bottom: 0%;
  z-index: 1;
  background: #0084ff00;
  color: rgba(0, 0, 0, 0);
  transform: translateY(-50%);
}

.scroll-button.left {
  left: 0;
}

.scroll-button.right {
  right: 0;
}



  /*------------------Cont-Complementos------------------*/
  .cont-complementos{
    margin: 2rem 5vw 2rem 5vw;
  }


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

:root {
  --card-width: 65vw; /* Ocupa casi todo el ancho disponible */
  --gap-spacing: 20px;
  --carousel-speed: 40s;
}

.carousel-container h5 {
  font-size: 7vw; /* Título más grande y enfocado */
  color: var(--color-secundario);
  margin: 0rem 0vw 0.5rem 0vw;
  text-align: start;
  font-weight: 800;
}

.carousel-container p {
  font-size: 2.5vw;
  color: var(--color-secundario-variable2);
  margin: 0vh 0vw 1.5rem 0vw;
}

/* Contenedor principal que oculta el overflow */
.carousel-container {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  margin: 2rem 0vw 0rem 0vw;
}

/* Pista que contiene todas las tarjetas */
.carousel-track {
  display: flex;
  gap: 5vw;
  /* Animación de movimiento infinito */
  animation: scroll 120s linear infinite;
}

/* Definición de la animación de scroll */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { 
      /* Fórmula para el desplazamiento infinito */
      transform: translateX(calc(-1 * (340px + 32px) * 5)); 
  }
}

/* Clase para pausar la animación */
.carousel-track.paused {
  animation-play-state: paused;
}

/* Diseño de cada tarjeta de testimonio - Minimalista */
.testimonial-card {
  flex-shrink: 0;
  width: var(--card-width);
  background: var(--color-secundario-variable3);
  padding: 2.5vh 8.5vw 2.5vh 8.5vw;; /* Aumento de padding interno */
  border-radius: 3vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none; /* Eliminamos el borde duro */
  cursor: pointer;
}

.testimonial-card:hover {
  transform: translateY(-8px); /* Elevación más notable */
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.137); /* Sombra inicial muy sutil */
}

/* Contenido del testimonio */
.testimonial-text {
  font-size: var(--parrafos); /* Fuente más grande para el texto */
  color: var(--color-secundario-variable2);
  line-height: 1.7;
  font-style: normal;
  position: relative;
  padding-top: 20px; /* Espacio para la comilla */
  margin: 0vh 0vw 0rem 0vw;
}

/* Estilo para la comilla de apertura (detalle moderno) */
.testimonial-text::before {
  content: '“';
  font-size: 2rem;
  color: var(--color-secundario);
  position: absolute;
  top: 0px;
  left: -10px;
  opacity: 0.8;
  line-height: 1;
  font-weight: 700;
}

/* Info del cliente */
.client-info {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #5a5a5a; /* Separador sutil */
}

.client-photo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  border: 3px solid var(--color-principal); /* Borde con color de acento */
}

.client-name {
  font-weight: 700;
  color: var(--color-secundario);
  font-size: 1.0rem;
}



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


    
    /*------------------Contenido-Preguntas-Frecuentes------------------*/
    .faq-container {
      width: 100%;
      border-radius: 8px;
      text-align: start;
      margin: 0vh 0vw 0vh 0vw;
      }
      
      .faq-container  h5 {
      font-size: 7vw;
      margin: 0vh 0vw 0.5rem 0vw;
      }
      
      .faq-container  p {
        font-size: var(--parrafos);
      margin: 0vh 0vw 1rem 0vw;
      }
      
      .faq-container  button {
        font-size: var(--parrafos);
      }
      
      .faq-item {
      border-bottom: 1px solid rgba(230, 230, 230, 0.171);
      margin-bottom: 15px;
      }
      
      .faq-question {
      width: 100%;
      text-align: left;
      background-color: rgba(255, 255, 255, 0);
      border: none;
      outline: none;
      padding: 12px;
      font-size: 25px;
      cursor: pointer;
      transition: background-color 0.3s;
      }
      
      .faq-question .arrow {
      float: right;
      transition: transform 0.3s;
      transform: rotate(270deg);
      font-weight: 600;
      }
      
      .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.0s ease-out, padding 0.1s ease-out;
      }
      
      .faq-item.open .faq-answer {
      max-height: 500px; /* Ajustar según el contenido */
      padding: 10px;
      }
      
      .faq-item.open .faq-question .arrow {
      transform: rotate(90deg);
      }
  
    
      /*------------------Contenido-Publicidad-------------------*/
      .publicidad{
      text-align: start;
      margin: 3.5rem 0vw 2vh 0vw;
      padding: 0vh 0vw 0vh 0vw;
      z-index: 0;
      }
      
      .publicidad h6{
      font-size: 3.5vw;
      margin: 0vh 0vw 2vh 0vw;
      }
      
      .publicidad p{
      font-size: var(--parrafos);
      margin: 0vh 4vw 3vh 0vw;
      }
      
      .publicidad1 { 
      border-radius: 1vw;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
      transition: 0.3s;
      }
      
      .publicidad1:hover{ 
      opacity: 90%;
      }
      
      .publicidad1 img{
      width: 100%;
      height: 15vh;
      object-fit: cover;
      }
      
      .publicidad1 video {
      width: 100%;
      height: 15vh;
      object-fit: cover;
      }
      
      .publicidad .texto { 
      text-align: start;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 25vh 4vw 3vh 3vw ;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.534));
      }
      
      .publicidad .texto h4{
        font-size: 4vw;
        width: 50vw;
      margin: 0vh 4vw 1vh 0vw;
      }
      
      .publicidad .texto p{
        font-size: var(--parrafos);
      margin: 0vh 2vw 0vh 0vw;
      }
  
  
    /*---------------------------------------------------------------------*/
  
    footer { 
    text-align: center;
    margin: 0vh 0vw 3vh 0vw;
  }
  
  footer h6{
    font-size: 2.5vw;
    margin: 0vh 0vw 0vh 0vw;
  }

  .enlaces-princiáles{
    display: flex;
    justify-content: center;
    gap: 2vw;
    margin: 1.5vh 2vw 3vh 2vw;
  }
  
  .enlaces-princiáles a{
    font-size: 2.3vw;
    font-weight: 600;
    text-decoration: none;
  }
  
  .enlaces-princiáles a:hover{
    text-decoration: underline;
  }

  /* Estilos del botón */
  .boton-fijo {
    left: 0px;
    top: 3%;
  }
  
  /*---------------------------------------------------------------------*/
}