/*Configuracion Standar del body y container general*/

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          text-decoration: none;
          list-style: none;
          font-family: 'Orbitron', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode';
          max-width: 100%;

        }

        body {
          background: #141E30;
          background: -webkit-linear-gradient(to right, #141E30, #141E30);
          background: linear-gradient(to right, #141E30, #141E30);
          align-items: center;
          justify-content: center;

        }

        main {
          overflow: hidden;
          flex-wrap: wrap;

        }

        .container-1 {
          background-color: #fefefe;
          /* display: flex; */
        }

        /*Configuracion de logo y redes sociales*/

        .elementos-principales {
          justify-content: space-between;
          max-width: 1400px;
          display: flex;
          align-items: center;
          margin: auto;
        }


        .logo {
          margin: auto;
          min-height: 100px;
          min-width: 150px;
        }

        .whatsapp-grande {
          position: fixed;
          right: 70px;
          bottom: 70px;
          z-index: 1;
          opacity: 0.8;

        }

        .whatsapp-grande:hover {
          scale: 1.2;
          opacity: 1;
        }

        .whatsapp-grande img {
          width: 80px;
          height: 80px;
        }




        .nav-1 {
          max-width: 900px;
          margin: auto;
          background-color: #fff;
          font-size: 20px;
          z-index: 2;
          -webkit-box-shadow: 1px 5px 13px 2px rgba(0, 0, 0, 0.14);
          -moz-box-shadow: 1px 5px 13px 2px rgba(0, 0, 0, 0.14);
          box-shadow: 1px 5px 13px 2px rgba(0, 0, 0, 0.14);
          border-radius: 10px;

        }

        .menu-horizontal {
          list-style: none;
          display: flex;
          justify-content: space-around;

        }

        .menu-horizontal>li>a {
          display: block;
          padding: 15px 20px;
          color: #111;
          text-decoration: none;
          font-size: 22px;


        }

        .menu-horizontal>li:hover {
          background-color: #4CB9FF;
        }

        .menu-vertical {
          position: absolute;
          display: none;
          list-style: none;
          width: 350px;
          background-color: rgba(0, 0, 0, .3);
          border-radius: 5px;

        }

        .menu-horizontal li:hover>.menu-vertical {
          display: block;
        }

        .menu-vertical li:hover>.menu-vertical {
          display: block;
        }

        .submenu:hover>.sub-menu {
          display: block;
          left: 100%;
          /* Ensures the submenu appears to the right */
          top: 0;
          /* Align the submenu with the parent item */
          position: absolute;
        }

        .menu-vertical li:hover {
          background-color: black;
          background-color: rgba(0, 0, 0, .5);

        }

        .menu-vertical li a {
          display: block;
          color: white;
          text-decoration: none;
          padding: 15px 15px 15px 20px;
        }

        #html {
          margin: auto;
          padding: 20px;
          max-width: 900px;
          background: white;
        }








        /*Personalizacion de redes sociales uiverse.io*/

        .redes {
          display: flex;
          /* flex-direction: column; */
          /* gap: 0.5em; */
          margin: auto;
        }

        /* .up {
          display: flex;
          flex-direction: row;
          gap: 0.5em;
        }
         */

        .down {
          display: flex;
          flex-direction: row;
          gap: 0.5em;
          /* Distancia entre los elementos (parecido al padding , wsp y gmail) */
        }

        .card3 {
          width: 60px;
          height: 60px;
          outline: none;
          border: none;
          background: white;
          border-radius: 300px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
          transition: .2s ease-in-out;
          border: solid 1px lightgrey;
        }

        .whatsapp {
          margin-top: -.1.3em;
          margin-left: 0.3em;
          fill: #00ff00;
        }

        .card4 {
          width: 60px;
          height: 60px;
          outline: none;
          border: none;
          background: white;
          border-radius: 300px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
          transition: .2s ease-in-out;
          border: solid 1px lightgrey;
        }

        .gmail {
          margin-top: 0.2em;
          margin-left: -0.1em;
          fill: #f14336;
        }

        .card3:hover {
          cursor: pointer;
          scale: 1.1;
          background-color: #00ff00;
        }

        .card3:hover .whatsapp {
          fill: white;
        }

        .card4:hover {
          cursor: pointer;
          scale: 1.1;
          background-color: red;
        }

        .card4:hover .gmail {
          fill: white;
        }



        /*Configuracion de slider principal*/

        .margen {
          max-width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .item {
          /* width: 200px; 
          height: 300px;*/
          list-style-type: none;
          position: absolute;
          top: 40%;
          transform: translateY(-50%);
          z-index: 1;
          background-position: center;
          background-size: cover;
          border-radius: 20px;
          box-shadow: 0 20px 30px rgba(255, 255, 255, 0.3) inset;
          /* transition: transform 1.3s, left 0.75s, top 0.75s, width 0.75s, height 0.75s; */

          &:nth-child(1),
          &:nth-child(2) {
            left: 0;
            top: 100px;
            width: 100%;
            height: 90%;
            transform: none;
            border-radius: 0;
            box-shadow: none;
            opacity: 1;

          }

          &:nth-child(3) {
            left: 50%;
          }

          &:nth-child(4) {
            left: calc(50% + 220px);
          }

          &:nth-child(5) {
            left: calc(50% + 440px);
          }

          &:nth-child(6) {
            left: calc(50% + 660px);
            opacity: 0;
          }
        }

        .content {

          max-width: 600px;
          position: absolute;
          top: 25%;
          left: 3rem;
          transform: translateY(-50%);
          font: 400 0.85rem sans-serif;
          color: white;
          text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
          opacity: 0;
          display: none;
          background: rgba(36, 36, 36, 0.3);
          padding: 25px 35px;
          border-radius: 15px;

          & .title {
            text-transform: uppercase;
            font-size: 35px;
          }

          & .description {
            line-height: 1.7;
            margin: 1rem 0 1.5rem;
            font-size: 0.9rem;
          }

          & button {
            width: fit-content;
            background-color: rgba(0, 0, 0, 0.1);
            color: white;
            border: 2px solid white;
            border-radius: 0.25rem;
            padding: 0.75rem;
            cursor: pointer;
            transition: 0.7s;
          }

          & button:hover {
            background-color: white;
            color: black;
            transform: translateY(2px);
          }
        }


        .item:nth-of-type(2) .content {
          display: block;
          animation: show 0.75s ease-in-out 0.3s forwards;
        }

        @keyframes show {
          0% {
            filter: blur(5px);
            transform: translateY(calc(-50% + 75px));
          }

          100% {
            opacity: 1;
            filter: blur(0);
          }
        }

        .nav {
          position: absolute;
          bottom: 2rem;
          left: 50%;
          transform: translateX(-50%);
          z-index: 5;
          user-select: none;

          & .btn {
            background-color: rgba(0, 0, 0, 0.5);
            color: rgba(255, 255, 255, 0.7);
            border: 2px solid rgba(0, 0, 0, 0.6);
            margin: 0 0.25rem;
            padding: 0.75rem;
            border-radius: 50%;
            cursor: pointer;
            transition: 0.7s;

            &:hover {
              background-color: rgba(255, 255, 255, 0.3);
              transform: scale(1.18);
              color: black;
            }
          }
        }

        @media (width > 650px) and (width < 900px) {
          .content {
            & .title {
              font-size: 1rem;
            }

            & .description {
              font-size: 0.7rem;
            }

            & button {
              font-size: 0.7rem;
            }
          }

          .item {
            width: 160px;
            height: 270px;

            &:nth-child(3) {
              left: 50%;
            }

            &:nth-child(4) {
              left: calc(50% + 170px);
            }

            &:nth-child(5) {
              left: calc(50% + 340px);
            }

            &:nth-child(6) {
              left: calc(50% + 510px);
              opacity: 0;
            }
          }
        }

        @media (width < 650px) {
          .content {
            & .title {
              font-size: 0.9rem;
            }

            & .description {
              font-size: 0.65rem;
            }

            & button {
              font-size: 0.7rem;
            }
          }

          .item {
            width: 130px;
            height: 220px;

            &:nth-child(3) {
              left: 50%;
            }

            &:nth-child(4) {
              left: calc(50% + 140px);
            }

            &:nth-child(5) {
              left: calc(50% + 280px);
            }

            &:nth-child(6) {
              left: calc(50% + 420px);
              opacity: 0;
            }
          }
        }



        /*Configuracion de titulo e introduccion*/

        .introduccion {
          background-image: url(imagenes/presentacion.jpg);
          max-width: 70%;
          height: 1300px;
          padding: 10px;
          border-radius: 50px;
          background-size: cover;
          color: #fff;
          margin-bottom: 70px;
          background-image: linear-gradient(to top, #001, transparent), ;
          margin: auto;
          margin-top: 650px;
          text-align: center;
          align-items: center;
          filter: brightness(0.9); /* Ajusta el valor para oscurecer la imagen */

        }

        .texto-intro {
          text-align: center;
          align-items: center;
          margin-top: 20px;
        }


        /*Configuracion de texto en imagen */

        .intro-title {
          color: #4EA3E2;
          font-size: 50px;
          text-align: center;
          margin: 0%;
        }

        .intro-title2 {
          font-size: 25px;
          margin-top: 10px;
          text-align: center;
          color: #fff;

        }

        .intro-parrafo {
          margin-top: 60px;
          font-size: 25px;
          text-align: center;
          margin-bottom: 20px;

        }



        .ultimo-parrafo {
          text-align: center;
          font-size: 25px;
          margin-top: 35px;
        }

        .ultimo-parrafo h3 {
          color: #4EA3E2;
        }

        .ultimo-parrafo h4 {
          margin-top: 20px;

        }
       
        



        /* Configuracion de botones para volver a inicio y a los servicios */

        .container123 {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f2f2f2;
          height: 200px;


        }

        .fixed-element {
          display: flex;
          flex-direction: column;
          border-radius: 10px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
          overflow: hidden;
          position: fixed;
          bottom: 20px;
          z-index: 10;
          left: 30px;
          background-color: white;
          opacity : 0.6 ; /* Ajusta este valor según la transparencia deseada */

       

        }
       


        .fixed-element.hide2 {
          display: none;
          transition: 2s;
        }


        .radio-label:hover {
          background-color: #4CB9FF;
          opacity: 1;

        }

        .fixed-element:hover {
          opacity: 1;
          scale: 1.1;
          transition: 2s;

        }


        .fixed-element input[type="radio"] {
          display: none;
        }

        .radio-label {
          display: flex;
          align-items: center;
          padding: 10px 20px;
          cursor: pointer;
          transition:  0.3s ease-in-out;
          border: 0.3px solid #eee;


        }

        .radio-label a {
          text-align: center;
          color: #001;
          transition: 2s;
          text-align: center;


        }

        /*Configuracion de  container 3 , texto en imagen efecto de scroll */



        .imagen-fondo {
          background-image: url(imagenes/principal.jpeg);

          background-repeat: no-repeat;
          background-attachment: fixed;
          background-size: cover;
          height: 40em;
          margin-top: 45px;
          border: solid black 3px;

        }

        .titulo-servicios {

          align-content: center;
          height: 150px;
          background: -webkit-linear-gradient(to right, #243B55, #141E30);
          background: linear-gradient(to right, #243B55, #141E30);
          /* color: #fefefe; */
          color: #4EA3E2
        }



        .zoom-title {
          text-align: center;
          font-size: 40px;
          transition: transform 0.3s ease;
        }

        .zoomed {
          transform: scale(1.3);
          /* Ajusta el valor según la cantidad de zoom deseada */
          transition: 1s;
          color: #fff;
        }


        .content-servicios {
          margin-top: 20px;
          border-radius: 50px;
        }

        /*Configuracion de  sec-01  */

        .content-servicios h3 {
          color: #003d8e;
          font-size: 20px;
        }


        /* Configuracion de imagenes opcion 2 */

        /* Efectos imagenes de los  primera opcion*/


        .carrusel {
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          width: 100%;
          height: 100vh;
          background: -webkit-linear-gradient(to right, #243B55, #141E30);
          background: linear-gradient(to right, #243B55, #141E30);
        }

        /* Slider  1*/

        .sec-01 {
          margin-top: 100px;
          background: -webkit-linear-gradient(to right, #243B55, #141E30);
          background: linear-gradient(to right, #243B55, #141E30);
          height: 1000px;
          border-radius: 30px;

        }

        .sec {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0.5px 100px;
          color: #fefefe;
        }

        .container {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }

        .main-title {
          font-size: 3em;
          margin-bottom: 50px;
          margin-top: 0;
          color: #fefefe;
          width: 1200px;
          text-align: center;
        }

        .content-1 {
          position: relative;
          width: 100%;
          display: flex;
          align-items: center;
          height: 100%;
          text-align: center;


        }

        .content-1 .image {
          position: relative;
          width: 100%;
          height: 550px;
          overflow: hidden;
          box-shadow: 0px 0px 45px 0px #000f;
          border-radius: 20px;


        }

        .content-1 .image img {
          z-index: 111;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 20px;
          position: absolute;

        }
        .content-1 .image .img3-1 img {
          z-index: 111;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 20px;
          position: absolute;
          object-position: top;

        }

        .content-1 .text-box {
          z-index: 222;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(20px);
          padding: 20px;
          max-width: 600px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 10px;
          transform: translate(-80px, 50px);
          font-size: 19px;



        }

        .content-1 .text-box h3 {
          font-size: 2em;
          margin-bottom: 10px;
          color: #4CB9FF;


        }

       

        .slide-automatico {
          position: relative;
          width: 100%;
          margin: 0 auto;
          overflow: hidden;
        }

        /* Servicio 1 */
        .slides-img {
          display: flex;
        }

        .slide-img {
          flex: 0 0 100%;
          opacity: 0;
          transition: opacity 2s ease-in-out;
        }

        .slide-img img {
          width: 100%;
          height: auto;
        }

        .active {
          opacity: 1;
        }

        /* Servicio 2 */

        .slides-img2 {
          display: flex;
        }

        .slide-img2 {
          flex: 0 0 100%;
          opacity: 0;
          transition: opacity 2s ;
        }

        .slide-img2 img {
          width: 100%;
          height: auto;
        }

        .active2 {
          opacity: 1;
        }


        /* Servicio 3 */

        .slides-img3 {
          display: flex;
        }

        .slide-img3 {
          flex: 0 0 100%;
          opacity: 0;
          transition: opacity 2s;
        }

        .slide-img3 img {
          width: 100%;
          height: auto;
        }

        .active3 {
          opacity: 1;
        }


        
        /* Servicio 4 */

        .slides-img4 {
          display: flex;
        }

        .slide-img4 {
          flex: 0 0 100%;
          opacity: 0;
          transition: opacity 2s;
        }

        .slide-img4 img {
          width: 400px;
          height: 300px;
        }

        .active4 {
          opacity: 1;
        }

        .content-2 .image-2 {
          position: relative;
          width: 600px;
          height: 380px;
          overflow: hidden;
          border-radius: 20px;
          margin: auto;
          margin-top: 50px;

        }

        .content-2 .image-2 img {
          position: absolute;
          top: 50%;
          left: 50%;
          width: auto; /* Ajusta el ancho automáticamente */
          height: auto; /* Ajusta la altura automáticamente */
          transform: translate(-50%, -50%) scale(0.6); /* Ajusta el valor de scale para cambiar el tamaño */
          filter: brightness(0.6); /* Ajusta el valor para oscurecer la imagen */
          border-radius: 20px; /* el valor para oscurecer la imagen */
        }
        



        @keyframes fade {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }


        /* Configuracion de container 4*/

        /* Configuracion de foto final efecto scroll*/


        .foto-final {
          background-image: linear-gradient(to bottom, #010, transparent 80%),
            url(imagenes/uva2.jpg);
          background-repeat: no-repeat;
          background-attachment: fixed;
          background-size: cover;
          height: 20em;
          margin-top: 50px;
          margin-bottom: 0;
        }

        .foto-final h2 {
          text-align: center;
          font-size: 35px;
          color: #fff;
          margin: 0;

        }

        .contactos {
        max-width: 350px;
        top: 33%;
        left: 6rem;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
        background: rgba(36, 36, 36, 0.6);
        padding: 10px 35px;
        border-radius: 15px;
        position: relative;
        text-align: justify;
        font-size: 16px;
        align-items: center;

        }
     

      
  
      .emilio h3 {
        color: #4CB9FF;
        font-weight: bold;
        font-size: 25px;
        
      }
      .emilio h4 {
        color: #fff;
        padding: 5px;
      }
        .Darcy h3 {
          color: #4CB9FF;
        }
        .Darcy:hover h4 {
          color: red;
          scale: 1.1;
          transition: 1s;
  

        }
         
      
      .kianzo h4 {
        font-size: 20px;
        color: white;
      }
      .kianzo:hover h4 {
        scale: 1.1;
        color: #3973be;
        transition: 1s;
        cursor: pointer;

      }

      .wspp:hover  h4 {
        color: #00ff00;
        scale: 1.1;
        transition: 1s;

      }
      
      .correo:hover  h4 {
        color: red;
        scale: 1.1;
        transition: 1s;


      }

        .fondo-empresas {
          background-color: #ddd;
          height: 60px;
          margin-top: 0px;
        }

        .container-4 h2 {
          text-align: center;
          font-size: 30px;
          align-items: center;
        }

        .fondo-empresas h2 {
          color: #111;
          margin: 0;
          padding-top: 15px;
        }

        /* Configuracion slider de imagenes*/

        .empresas {
          background-size: cover;
        }

        /*configuracion de carrusel de imagenes*/

        .slider {
          width: 100%;
          height: 130px;
          overflow: hidden;
          background-color: #fff;
          align-items: center;
          align-content: center;
        }

        .slider .slide-track {
          display: flex;
          animation: scroll 40s linear infinite;
          -webkit-animation: scroll 40s linear infinite;
          width: calc(200px * 12);

        }

        .slider .slide img {
          width: 145px;
          height: 80px;
          margin-left: 230px;

        }

        @keyframes scroll {
          0% {
            -webkit-animation: translateX(0);
            transform: translateX(0);
          }

          100% {
            -webkit-animation: translateX(calc(-200px * 6));
            transform: translateX(calc(-200px * 6));
          }
        }

        /* Configuracion de container 5 */

        .container-5 {
          display: flex;
          justify-content: space-evenly;
          color: white;
          border-radius: 5px;
          padding: 20px;
          background-color: #111;
          overflow: hidden;

        }

        .copyright {
          margin-right: 200px;
          overflow: hidden;

        }

        .acentoceleste {
          color: lightblue;
        }

        .soporte-tel {
          overflow: hidden;

        }

        .soporte-tel h3 {
          margin-bottom: 10px;
          margin-left: 20px;
          color: lightblue;
          overflow: hidden;

        }

        .soporte-tel .down {
          padding-right: 150px;
          overflow: hidden;

        }

        .down {
          overflow: hidden;
        }

        /* Configuracion de tarjetas cant = 4 */

        .targets {
          display: flex;
          overflow: hidden;
          background-color: #2B2E4B;
          margin-bottom: 100px;
          cursor: pointer;
          background: -webkit-linear-gradient(to right, #243B55, #141E30);
          background: linear-gradient(to right, #243B55, #141E30);
          margin: auto;
        }

        .tittle-services {
          height: 100px;
          text-align: center;
          color: #efefef;
          overflow: hidden;
          background: -webkit-linear-gradient(to right, #243B55, #141E30);
          background: linear-gradient(to right, #243B55, #141E30);
          animation: anim 2.5s linear forwards;
        }

        .tittle-services h3 {
          max-width: 100%;
          font-size: 35px;
          padding-top: 40px;
        }

        .card2 {
          width: 430px;
          height: 320px;
          perspective: 1000px;
          justify-content: center;
          margin: auto;
          align-items: center;
          margin-top: 120px;
          margin-bottom: 100px;
          padding: auto;
        }

        .card-inner {
          width: 100%;
          height: 100%;
          position: relative;
          transform-style: preserve-3d;
          transition: transform 0.999s;
        }

        .card2:hover .card-inner {
          transform: rotateY(180deg);
        }

        .card-front,
        .card-back {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          margin: 0;
          text-align: center;
        }

        .card-back {

          padding-top: 70px;
          padding-bottom: 150px;
          border-radius: 50px;
          color: #ddd;
          align-items: center;
          border: 1px solid #fefefe;
          border-radius: 20px;
          justify-content: center;
          font-size: 20px;
          transform: rotateY(180deg);
          background-color: #082A42;
        }

        .card-front {
          color: #FFF;
          align-items: center;
          border: 0.5px solid #ccc;
          border-radius: 10px;
          justify-content: center;
          font-size: 24px;
          transform: rotateY(0deg);
          background-image: url(imagenes/elec.jpeg);
          background-size: cover;

        }

        .card-front p {
          background: rgba(36, 36, 36, 0.4);
          border-radius: 15px;

        }

        /* tarjeta 2 */


        .card-front-2,
        .card-back-2 {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          margin: 0;
          text-align: center;
        }

        .card-back-2 {

          padding-top: 70px;
          padding-bottom: 150px;
          border-radius: 50px;
          color: #ddd;
          align-items: center;
          border: 1px solid #fefefe;
          border-radius: 20px;
          justify-content: center;
          font-size: 20px;
          transform: rotateY(180deg);
          background-color: #082A42;
        }

        .card-front-2 {
          color: #FFF;
          align-items: center;
          border: 0.5px solid #ccc;
          border-radius: 10px;
          justify-content: center;
          font-size: 24px;
          transform: rotateY(0deg);
          background-image: url(imagenes/capacitacion112.jpg);
          background-size: cover;
        
        }

        .card-front-2 p {
          background: rgba(36, 36, 36, 0.4);
          border-radius: 15px;

        }

        /* tarjeta 3 */

        .card-front-3,
        .card-back-3 {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          margin: 0;
          text-align: center;
        }

        .card-back-3 {

          
          border-radius: 50px;
          color: #ddd;
          align-items: center;
          border: 1px solid #fefefe;
          border-radius: 20px;
          justify-content: center;
          font-size: 19px;
          transform: rotateY(180deg);
          background-color: #082A42;
          padding-top: 25px;

        }

        .card-front-3 {
          color: #fff;
          align-items: center;
          border: 0.5px solid #ccc;
          border-radius: 10px;
          justify-content: center;
          font-size: 24px;
          transform: rotateY(0deg);
          background-image: url(imagenes/repuestos11.jpg);
          background-size: cover;
        }

        .card-front-3 p {
          background: rgba(36, 36, 36, 0.4);
          border-radius: 15px;

        }

        /* tarjeta 4 */


        .card-front-4,
        .card-back-4 {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          margin: 0;
          text-align: center;
        }

        .card-back-4 {

          padding-top: 70px;
          padding-bottom: 150px;
          border-radius: 50px;
          color: #ddd;
          align-items: center;
          border: 1px solid #fefefe;
          border-radius: 20px;
          justify-content: center;
          font-size: 20px;
          transform: rotateY(180deg);
          background-color: #082A42;
        }

        .card-front-4 {
          color: #fff;
          align-items: center;
          border: 0.5px solid #ccc;
          border-radius: 10px;
          justify-content: center;
          font-size: 24px;
          transform: rotateY(0deg);
          background-image: url(imagenes/uva2.jpg);
          background-size: cover;
        }

        .card-front-4 p {
          background: rgba(36, 36, 36, 0.4);
          border-radius: 15px;

        }

        /* Configuracion del Responsive design */
        /* Para celulares */




        /* Para Tablets */


        @media screen and (max-width: 1200px) {
          /* Presentacion de imagenes */

          .whatsapp-grande {
            margin: auto;
            height: auto;
            width: auto;
          }

          .nav-1 {
            width: auto;
            height: auto;
          }

          .menu-horizontal>li>a {
            font-size: 12px;
          }


          .content {
            margin-right: 50PX;
            height: auto;
            width: auto;

          }

          .item {
            width: 0;
            height: 0;
            overflow: hidden;


          }


          /* Configuracion de imagen uva principal */

          .introduccion {
            height: auto;
            margin: 565px 0 30px 5px;
            border-radius: 0px;
            max-width: 100%;

          }

          .texto-intro {
            margin-top: 30px;
          }

          .intro-title {
            font-size: 25px;

          }

          .intro-title2 {
            font-size: 20px;

          }

          .intro-parrafo {
            font-size: 20px;

          }

          .ultimo-parrafo {
            font-size: 20px;


          }

          /* Configuracion de imagen fija */

          .imagen-fondo {
            height: 30em;

          }

          .image {
            min-width: 500px;
            margin: auto;

          }






          .content-1 .text-box {

            font-size: 15px;
            padding: 00px;
            min-width: 300px;
            height: 350px;

          }

        


        .zoom-title {
          font-size: 30px;
        }

        .main-title {
          font-size: 15px;
        }

        .titulo-servicios {
          font-size: 20px;
          height: 80px;
        }


        .card2 {
          width: 300px;
          height: 220px;
          padding: 5px;
        }

        .tittle-services h3 {
          font-size: 35px;

        }


        
        .card-front p {

          font-size: 17px;
        }

        .card-front-2 p {

          font-size: 17px;
        }

        .card-front-3 p {

          font-size: 17px;
        }


        .card-back {
          font-size: 13px;
          margin: 0;
          padding-top: 30px;
        }
        .card-back-2 {
          font-size: 13px;
          margin: 0;
          padding-top: 30px;
        }
        .card-back-3 {
          font-size: 13px;
          margin: 0;
          padding-top: 30px;
        }


      }



        /* Estilos específicos para el slider de imágenes */





        @media screen and (max-width: 700px) {


          .logo {
            background-size: auto;
          }

          .redes {
            height: auto;
            width: auto;
            display: none;
          }

          .whatsapp-grande img {
            margin: auto;
            width: 45px;
            height: 45px;
            margin-left: 300px;

          }


          .menu-vertical{
            width: 150px;
            font-size: 15px;
          }

          .fixed-element {
            display: none;
          }

          .nav-1 {
            width: auto;
            height: auto;
          }

          .menu-horizontal>li>a {
            font-size: 8px;
          }

          .container {
            padding: 10px;
          }

          .main-title {
            font-size: 1.5em;
          }

          .text-box p {
            font-size: 0.9em;
          }


          .sec {
            padding: 0;
            margin: 40px;
            width: 100%;
            height: 400px;
            margin: 20px;
          }

          .carrusel {
            height: 500px;

          }



          .content-1 .image {
            height: 300px;
          }


          .image {
            min-width: 270px;
            margin: auto;
            height: 95%;

          }


          .content-1 .text-box {

            font-size: 9.5px;
            padding: 5px;
            min-width: 200px;
            height: 145px;
            transform: translate(-80px, 30px);



          }

          .content-1 .text-box h3 {


            font-size: 1.5em;
            


          }

          .zoom-title {
            font-size: 30px;
          }

          .main-title {
            font-size: 15px;
          }

          .titulo-servicios {
            font-size: 20px;
            height: 80px;
          }


          .card2 {
            width: 300px;
            height: 220px;
            padding: 5px;
          }

          .tittle-services h3 {
            font-size: 20px;

          }


          
          .card-front p {

            font-size: 10px;
          }

          .card-front-2 p {

            font-size: 10px;
          }

          .card-front-3 p {

            font-size: 10px;
          }

          
        .card-back {
          font-size: 10px;
          margin: 0;
        }
        .card-back-2 {
          font-size: 10px;
          margin: 0;
        }
        .card-back-3 {
          font-size: 8.5px;
          margin: 0;
        }
        .foto-final {
          height: 15em;
          background-position: center;
          width: auto;
        }

        .fondo-empresas h2{
          font-size: 18px;

        }


        .copyrigt {
          font-size: 12px;
        }

        .soporte-tel h3{
          font-size: 12px;
          display: none;


        }
        .down {
          display: none;
        }

        }





        /* Para TV */

        @media screen and (max-width: 1700px) {}