:root {
     --color-principal: #0080c3;
     --color-secundario: #e84a90;
     --color-cta: #ffffff;
     --color-soft-bg: #e6f0fa;
     --color-soft-text: #0080c3;
 }

 /* SECCION 1 - INTRODUCCION */
 /* Contenedor principal para la intro */
 .positioned {
     margin: 0 auto;
 }

 .section.background-white>.line>.margin2x {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     column-gap: 3rem;
 }

 /* Cada bloque 50% en escritorio */
 .m-12.l-6 {
     flex: 1 1 45%;
     box-sizing: border-box;
     min-width: 300px;
 }

 /* flotado siempre al 100% ancho del bloque padre */
 .float-left {
     width: 100%;
     float: none;
 }

 /* Título azul a centro y centrado vertical en contenedor */
 .text-strong.text-size-20.text-line-height-1.margin-bottom-20 {
     color: #0080c3;
     text-align: center;
     margin: 1.5rem 0 2rem 0;
     font-weight: 900;
 }
.background-primary2 {
    background-color: var(--color-secundario);
}
.rosa {
color: var(--color-secundario)!important;
}
 /* En móviles vuelve a 100% apilados */
 @media (max-width: 768px) {
     .section.background-white>.line>.margin2x {
         flex-direction: column;
     }

     .m-12.l-6 {
         flex-basis: 100%;
     }

     .text-strong.text-size-20.text-line-height-1.margin-bottom-20 {
         text-align: left;
     }
 }

 /* SECCION 2- SERVICIOS CARDS */
 .servicios-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 2.2rem;
     margin: 0 auto;
     padding: 2rem 1rem;
 }

 .servicio-card {
     background: #fff;
     border-radius: 160px;
     box-shadow: 0 2px 12px #0080c320;
     padding: 2rem 1.5rem 1.5rem 1.5rem;
     transition: box-shadow 0.22s;
     text-align: left;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     min-height: 270px;
 }

 .servicio-card:hover {
     box-shadow: 0 10px 28px #e84a9020;
 }

 .gradient-card {
     border-left: 8px solid #0080c3;
     background: linear-gradient(90deg, #e6f0fa 80%, #e84a90 100%);
 }

 .servicio-title {
     margin-bottom: 0.6rem;
 }

 **************************************** .servicios-cards-section {
     max-width: 960px;
     margin: 2rem auto;
     text-align: center;
     font-family: 'Poppins', sans-serif;
 }

 .section-title {
     font-weight: 700;
     font-size: 2.8rem;
     margin-bottom: 1.5rem;
     color: #444;
 }

 /* Contenedor cards */
 .servicios-cards-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 2.4rem;
 }

 /* Card contenedor */
 .card-flip {
     background-color: transparent;
     width: 280px;
     height: 320px;
     perspective: 1200px;
     cursor: pointer;
     outline: none;
     position: relative;
     border-radius: 20px;
     box-shadow: 0 6px 28px rgba(232, 74, 144, 0.15);
     transition: box-shadow 0.3s ease;
 }

 .card-flip:focus,
 .card-flip:hover {
     box-shadow: 0 12px 40px rgba(232, 74, 144, 0.55);
 }

 /* Card interna, para girar */
 .card-inner {
     width: 100%;
     height: 100%;
     position: relative;
     text-align: center;
     transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
     transform-style: preserve-3d;
     border-radius: 20px;
     box-sizing: border-box;
     padding: 2rem 1rem;
 }

 /* Flip activo */
 .card-flip.flipped .card-inner {
     transform: rotateY(180deg);
 }

 /* Cara frontal */
 .card-front,
 .card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     border-radius: 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     padding: 1rem 1.5rem;
     background: white;
 }

 /* Frontal con iconos grandes */
 .card-front {
     border: 2px solid #0080c3;
     color: #0080c3;
     gap: 1.5rem;
     box-shadow: 0 0 12px #0080c344;
 }

 .card-front svg.icono {
     width: 70px;
     height: 70px;
     fill: currentColor;
 }

 /* Botón ver más estilo */
 .btn-detalle {
     margin-top: auto;
     padding: 0.6rem 1.5rem;
     font-weight: 700;
     background: linear-gradient(90deg, #0080c3, #e84a90);
     border: none;
     color: white;
     border-radius: 100px;
     cursor: pointer;
     transition: box-shadow 0.3s ease, transform 0.3s ease;
 }

 .btn-detalle:hover,
 .btn-detalle:focus {
     box-shadow: 0 8px 20px #e84a9088;
     transform: scale(1.1);
     outline: none;
 }

 /* Cara trasera */
 .card-back {
     border: 2px solid #e84a90;
     color: #333;
     transform: rotateY(180deg);
     background: #fff;
     box-shadow: 0 0 16px #e84a9011;
     padding-top: 2.5rem;
     font-size: 1rem;
     line-height: 1.45;
 }

 /* Texto detallado */
 .card-back p {
     margin: 0;
 }

 /* Responsive */
 @media (max-width: 700px) {
     .servicios-cards-container {
         flex-direction: column;
         align-items: center;
     }
 }

 **************************************************** .servicios-cards-advanced {
     max-width: 700px;
     margin: 2rem auto 3rem;
     padding: 0 1rem;
     font-family: 'Poppins', sans-serif;
     text-align: center;
 }

 .section-heading {
     font-weight: 700;
     font-size: 2.9rem;
     margin-bottom: 2rem;
     color: #222;
 }

 .cards-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 2.8rem;
     justify-content: center;
 }

 /* Card giro + ampliación */
 .card-flip-advanced {
     width: 230px;
     height: 250px;
     perspective: 800px;
     cursor: pointer;
     border-radius: 1rem;
     box-shadow: 0 8px 25px rgba(232, 74, 144, 0.17);
     transition: box-shadow 0.3s ease;
     position: relative;
     background: white;
     outline-offset: 4px;
 }

 .card-flip-advanced:hover,
 .card-flip-advanced:focus {
     box-shadow: 0 38px 70px rgba(232, 74, 144, 0.6);
     outline: none;
 }

 /* Inner contenedor que gira */
 .card-inner-advanced {
     position: relative;
     width: 100%;
     height: 100%;
     border-radius: inherit;
     text-align: center;
     transition: transform 0.75s cubic-bezier(.4, 0, .2, 1);
     transform-style: preserve-3d;
     padding: 2rem 1.5rem;
 }

 /* Control de flip y scale en JS: añade clase flipped */
 .card-flip-advanced.flipped .card-inner-advanced {
     transform: rotateY(180deg) scale(1.0);
 }

 /* CARA FRONTAL */
 .card-front-advanced {
     color: #0080c3;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     backface-visibility: hidden;
     border: 2px solid #0080c3;
     border-radius: inherit;
     padding: 1rem 1.5rem;
     height: 100%;
     gap: 1.5rem;
     font-weight: 700;
     font-size: 1.32rem;
     background: white;
     box-shadow: inset 0 0 5px #0080c318;
     user-select: none;
 }

 .icon-svg {
     width: 70px;
     height: 70px;
     fill: currentColor;
 }

 /* CARA POSTERIOR */
 .card-back-advanced {
     background: #fff;
     color: #333;
     padding-top: 1.2rem;
     border: 2px solid #e84a90;
     box-shadow: inset 0 0 8px #e84a9044;
     border-radius: inherit;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transform: rotateY(180deg);
     backface-visibility: hidden;
     font-size: 1rem;
     line-height: 1.48;
     padding: 2rem 1.5rem 2rem 1.5rem;
     text-align: left;
     overflow-y: auto;
     user-select: text;
 }

 .card-back-advanced h3 {
     margin-bottom: 1rem;
     color: #e84a90;
     font-weight: 700;
     font-size: 1.2rem;
 }

 /* Responsive */
 @media (max-width: 960px) {
     .cards-wrapper {
         justify-content: center;
     }

     .card-flip-advanced {
         width: 90vw;
         max-width: 350px;
         margin: auto;
     }
 }

 ********************************************************* .servicios-cards-container {
     max-width: 800px;
     margin: 2rem auto;
     padding: 0 1rem;
     font-family: 'Poppins', sans-serif;
     text-align: center;
 }

 .section-title {
     font-size: 2.8rem;
     font-weight: 700;
     margin-bottom: 2rem;
     color: #222;
 }

 .cards-flexbox {
     display: flex;
     flex-wrap: wrap;
     gap: 2.5rem;
     justify-content: center;
 }

 .icon-wrapper i {
     color: #0080c3;
 }

 .icon-pulse,
 .icon-pulse2 {
     display: none;
 }

 /* Distribución 3 columnas x 2 filas */
 .cards-flexbox>article {
     flex: 0 0 calc(28% - 2rem);
     max-width: calc(28% - 2rem);
     height: 350px;
     perspective: 1200px;
     cursor: pointer;
     position: relative;
     border-radius: 1rem;
     box-shadow: 0 8px 30px rgba(232, 74, 144, 0.15);
     background: white;
     transition: box-shadow 0.3s ease;
     outline-offset: 4px;
     overflow: visible;
 }

 .cards-flexbox>article:hover,
 .cards-flexbox>article:focus {
     box-shadow: 0 16px 48px rgba(232, 74, 144, 0.55);
     outline: none;
     z-index: 10;
 }

 /* Carta interna que gira y escala */
 .card-inner {
     width: 100%;
     height: 100%;
     border-radius: inherit;
     position: relative;
     text-align: center;
     transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
     transform-style: preserve-3d;
     padding: 2rem 1.5rem;
     box-sizing: border-box;
     text-align: justify;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: white;
 }

 /* Activar flip y scale */
 .cards-flexbox>article.flipped .card-inner {
     transform: rotateY(180deg) scale(1.15);
     z-index: 20;
     /* encima de otras cards */
 }

 /* Cara frontal */
 .card-front {
     border: 2px solid #0080c3;
     border-radius: 25PX;
     box-shadow: inset 0 0 8px #0080c320;
     color: #0080c3;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 1.5rem;
     font-weight: 700;
     font-size: 1.3rem;
     height: 100%;
     backface-visibility: hidden;
     user-select: none;
 }

 /* SVG icono */
 .icon-svg {
     width: 70px;
     height: 70px;
     fill: currentColor;
 }

 /* Cara trasera */
 .card-back {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 3rem;
     background: white;
     border: 4px inset #e84a90;
     box-shadow: inset 0 0 16px #e84a9011;
     color: #444;
     font-size: 0.5rem;
     padding: 2rem;
     backface-visibility: hidden;
     transform: rotateY(180deg);
     /* text-align: justify; */
     display: flex;
     align-items: center;
     justify-content: center;
     user-select: text;
     overflow-y: auto;
 }

 .card-back h3 {
     color: #e84a90;
     font-weight: 700;
     margin-bottom: 1rem;
 }

 /* Scrollbar colores */
 .card-back::-webkit-scrollbar {
     width: 6px;
 }

 .card-back::-webkit-scrollbar-thumb {
     background-color: #e84a90;
     border-radius: 6px;
 }

 .card-back::-webkit-scrollbar-track {
     background: #f9f9f9;
 }

 /* Ajuste para que todo CUADRE BIEN */
 .cards-flexbox {
     position: relative;
     transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
     transform-style: preserve-3d;
     width: 100%;
     height: 100%;
 }

 .card-front,
 .card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     border-radius: 3rem;
     left: 0;
     top: 0;
 }

 .card-back {
     transform: rotateY(180deg);
 }

 .card-flip {
     /* ... tu estilo ... */
     outline: none;
 }

 /* Responsive: columnas verticales para pantallas pequeñas */
 @media (max-width: 900px) {
     .cards-flexbox>article {
         flex: 0 0 85%;
         max-width: 85%;
         margin: 0 auto 2rem;
     }
 }

 /* **************************************** */
 .icon-wrapper {
     position: relative;
     width: 75px;
     height: auto;
     margin: 0 auto;
     text-align: center;
 }

 .icon-pulse {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 75px;
     height: 75px;
     background: linear-gradient(90deg, #0080c3, #e84a90);
     border-radius: 50%;
     animation: pulseAnim 2.2s infinite;
     transform: translate(-50%, -50%);
     z-index: 1;

     &:hover {
         filter: drop-shadow(0 0 12px #e84a90);
     }
 }

 /* Título frontal mejorado */
 .card-title {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     font-size: 1.7rem;
     color: #0080c3;
     text-transform: uppercase;
     letter-spacing: 2px;
     position: relative;
     margin-bottom: 0.8rem;
     text-shadow: 0 0 6px rgba(0, 128, 195, 0.6);
 }

 .card-title::after {
     content: '';
     position: absolute;
     left: 100%;
     right: 100%;
     bottom: -12px;
     height: 4px;
     background: linear-gradient(to right, #0080c3, #e84a90);
     border-radius: 20px;
     opacity: 0.6;
     transition: all 0.3s ease;
 }

 .card-flip:hover .card-title::after,
 .card-flip:focus .card-title::after {
     opacity: 1;
     left: 20%;
     right: 20%;
 }

 /* Botón CTA en frontal */
 .btn-cta {
     background: linear-gradient(90deg, #0080c3, #e84a90);
     padding: 0.6rem 2.2rem;
     border: none;
     border-radius: 30px;
     color: white;
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     font-size: 1rem;
     cursor: pointer;
     /* box-shadow: 0 4px 14px rgba(232, 74, 144, 0.6); */
     transition: box-shadow 0.3s ease, transform 0.3s ease;
     outline-offset: 3px;
     user-select: none;
 }

 .btn-cta:hover,
 .btn-cta:focus {
     box-shadow: 0 10px 32px rgba(232, 74, 144, 0.9);
     transform: scale(1.1);
     outline: none;
 }

 /* SECCION 3 - CARUSEL DE LOGOS */
 .section.background-dark {
     padding: 2rem;
     background-image: url(../img/mio/fondos/happyclients8.png) !important;
     background-size: cover;
     /* Ajusta la imagen para cubrir todo el área */
     /*background-position: center;       /Centra la imagen vertical y horizontalmente */
     background-repeat: no-repeat;
     /* Evita que se repita la imagen */
 }

 .background-dark2 {
     background-color: #454545;
 }

 .clientes-title {
     font-size: 50px;
     font-weight: bold;
     color: #fff;
     text-shadow: 0 0 10px #e84a90;
     margin-top: 0.3rem;
     margin-bottom: 1.5rem;
 }
.icon-sli-like {
    text-shadow:0 0 4px #e84a90; ;
}
 .carousel-container {
     overflow: hidden;
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
 }

 .carousel-track {
     display: flex;
     gap: 2rem;
     animation: scroll-left 20s linear infinite;
 }

 .carousel-track img {
     height: 120px;
     vertical-align: middle;
     object-fit: contain;
     transition: filter 0.25s;
     filter: brightness(1);
 }

 .carousel-track img:hover {
     filter: brightness(1.15) drop-shadow(0 2px 12px #e84a9030);
 }

 /* Animación de scroll horizontal infinito */
 @keyframes scroll-left {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* Pausa la animación si pones el mouse encima */
 .carousel-container:hover .carousel-track {
     animation-play-state: paused;
 }

 .line.text-center {
     text-align: center;
     margin-bottom: 1.5rem;
 }

 .icon-sli-like {
     font-size: 40px;
     color: #0080c3;
 }

 /* ***************************** */
 .servicios-cards-container {
     max-width: 960px;
     margin: 0rem auto 3rem auto;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 3.5rem;
     font-family: 'Poppins', sans-serif;
 }

 .card-flip {
     background: transparent;
     cursor: pointer;
     border-radius: 18px;
     perspective: 1200px;
     outline-offset: 3px;
     transition: box-shadow 0.3s ease;
     box-shadow: 0 2px 15px rgb(0 0 0 / 0.1);
 }

 .card-flip:focus,
 .card-flip:hover {
     box-shadow: 0 8px 28px rgb(232 74 144 / 0.3);
 }

 .cards-flexbox {
     position: relative;
     width: 100%;
     height: 100%;
     border-radius: 18px;
     transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
     transform-style: preserve-3d;
     background: #fff;
     box-sizing: border-box;
     min-height: 350px;
 }

 .card-flip.flipped .cards-flexbox {
     transform: rotateY(180deg);
 }

 .card-front,
 .card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 18px;
     backface-visibility: hidden;
     box-shadow: inset 0 0 8px rgb(0 128 195 / 0.2);
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 2rem 2rem 1.5rem 2rem;
     box-sizing: border-box;
     color: #0080c3;
     font-weight: 700;
     font-size: 1.3rem;
     background: #fff;
     user-select: none;
 }

 .card-front {
     justify-content: flex-start;
     gap: 2rem;
 }

 .card-back {
     color: #444;
     font-weight: 500;
     font-size: 1rem;
     padding: 2.5rem;
     text-align: justify;
     justify-content: center;
     transform: rotateY(180deg);
     box-shadow: 0 12px 40px rgb(232 74 144 / 0.2);
     user-select: text;
 }

 .icon-wrapper {
     position: relative;
     width: 80px;
     height: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     background: #f8faff;
     box-shadow: 0 0 15px rgb(0 128 195 / 1);
 }

 .icon-pulse,
 .icon-pulse2 {
     position: absolute;
     border-radius: 50%;
     width: 100%;
     height: 100%;
     background: #e84a90;
     animation: pulse-animation 2.7s infinite ease-in-out;
     box-shadow: 0 0 15px #e84a90;
     opacity: 0.6;
     z-index: -1;
 }

 .icon-pulse2 {
     animation-delay: 0.8s;
     background: #0080c3;
     box-shadow: 0 0 20px #0080c3;
 }

 @keyframes pulse-animation {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.4;
     }

     50% {
         transform: scale(1.3);
         opacity: 0;
     }
 }

 .card-title {
     margin: 0 0 0.8rem 0;
     color: #0080c3;
     font-weight: 700;
     font-size: 1.45rem;
     text-align: center;
 }


 .btn-cta {
     margin-top: auto;
     padding: 0.6rem 1.8rem;
     background: linear-gradient(90deg, #0080c3, #e84a90);
     border: none;
     border-radius: 100px;
     font-weight: 700;
     color: white;
     cursor: pointer;
     transition: background 0.3s ease, box-shadow 0.3s ease;
 }

 .btn-cta:hover,
 .btn-cta:focus {
     background: linear-gradient(90deg, #e84a90, #0080c3);
     box-shadow: 0 6px 15px rgb(232 74 144 / 0.6);
     outline: none;
 }

 @media (max-width: 600px) {
     .card-title {
         font-size: 1.2rem;
     }

     .btn-cta {
         font-size: 1rem;
         padding: 0.5rem 1.4rem;
     }
 }

 /* VERSION 3 */
/* Contenedor del carrusel */
.logo-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1.5rem;
  padding: 1rem 0;
  justify-content: center;
  align-items: center;
  background-image: url('../img/mio/fondos/happyclients.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Logo individual */
.logo-carousel .logo-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 150px;
  height: 80px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Zoom sutil en hover */
.logo-carousel .logo-item:hover {
  transform: scale(1.08);
}

/* Responsive para tablet */
@media (max-width: 1023px) {
  .logo-carousel {
    gap: 1rem;
  }
  .logo-carousel .logo-item {
    width: 130px;
    height: 70px;
  }
}

/* Responsive para móvil: imagen fondo invertida verticalmente */
@media (max-width: 767px) {
  .logo-carousel {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scaleY(-1);  /* Voltea la imagen del fondo 180º vertical */
  }
  .logo-carousel .logo-item {
    width: 100px;
    height: 60px;
    transform: scaleY(-1); /* Voltear logos para que no salgan invertidos */
  }
  .visually-hidden {
         display: none;
     }
}
 /******************************* */

 /* Responsive  */
 @media (max-width: 1024px) {
     .servicios-cards-container {
         display: flex;
     }
     nav.main-menu {
         display: none !important;
     }

     .hamburger-menu {
         display: flex !important;
     }
     .margin2x {
        display: flex;
        flex-direction: row;
        column-gap: 1rem;
     }
 }
 /* Ocultar menú desktop en tablets/móviles */
@media (max-width: 1024px) {
  /* .top-nav.left-menu,
  .top-nav.right-menu,
  .logo-menu {
    display: none;
  } */
  .hamburger-menu {
    display: none;
  }
}