body {
            font-family: 'Poppins', sans-serif;
        }
        .f-size-1 {
            font-size: 21px;
        }

        a {color: var(--azul-sies); text-decoration: none;}

        :root {
            --font-medium: 'Poppins', sans-serif;
            --font-bold: 'Poppins', sans-serif;
            --azul: #192e50;
            --azul-sies: #124e91;
            --azul-claro-1:#f4f7fa;            
            --gris: #4d4d4d;    
            --azul-2: #0e3b6d;
            --azul-3:#0f427b;
        }

        a.btn-fancy.outline {
          background: transparent;
          border: 2px solid white;
      }

        .ml-3 {
          margin-left: 20px!important;
      }
        

        .azul-claro-1 {
            color: var(--azul-claro-1);
        }
        .azul-sies {
            color: var(--azul-sies);
        }        

        .gris {
          color: var(--gris);
      } 

      .text-justify {
        text-align: justify;
    }
        
        .f-azul-claro-1 {
            background-color: var(--azul-claro-1);
        }
        .f-azul-sies {
          background-color: var(--azul-sies);
      }
        .p-34 {
            padding: 34px;      }

        .br-20 {            
            border-radius: 20px;
        }

        #navbarNav .nav-link:not(.btn-fancy) {
            color: var(--azul);
            font-size: 14px;            
            padding: 0 30px;
        }

        #navbarNav .prueba a.nav-link {
    background: #f8ad1f;
    color: white;
    border-radius: 50px;
    padding: 7px 30px;}

        html {
          scroll-behavior: smooth;
      }

      .text-right {
        text-align: right;}

        /* FANCY */
        #navbarNav .btn-fancy {          padding: 12px 54px 12px 26px;      }

        nav.navbar.navbar-expand-lg {
            padding: 39px 0 30px;
        }

        .ct-link {
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            text-decoration: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .btn-fancy {
            --bg-color: #0080FF;
            --ease: cubic-bezier(0.65, 0, 0.35, 1);
            --duration: 0.5s;
            display: inline-block;
            overflow: hidden;
            position: relative;
            padding: 12px 54px 12px 26px;           
            border-radius: 40px;
            font-family: var(--font-medium);
            font-size: 12px;
            line-height: normal;
            letter-spacing: .003rem;
            background: #124E91;
background: linear-gradient(10deg, rgba(18, 78, 145, 1) 0%, rgba(0, 191, 240, 1) 100%);
            transition: all var(--duration) var(--ease);
        }
        .btn-fancy span {
            display: inline-block;
            pointer-events: none;
        }
        .btn-fancy__emoji-container {
            --bg-color: #00bff0;
            --gap: 5px;
            --wrapper-size: 31px;
            position: absolute;
            top: 50%;
            right: var(--gap);
            transform: translateY(-50%) rotate(0);
            transform-origin: center;
            width: var(--wrapper-size);
            height: var(--wrapper-size);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #fff;
            transition: background-color var(--duration) var(--ease),right var(--duration) var(--ease),transform var(--duration) var(--ease);
            z-index: 1;
        }

        .btn-fancy__text-start { color: white;}
        .btn-fancy__text-start {         
            transform: translateX(0);
            opacity: 1;
            transition: transform calc(var(--duration) * 1.1) var(--ease),opacity calc(var(--duration) * 1.1) var(--ease);
        }
        .btn-fancy__text-end, #simplificacion .btn-fancy__text-end {--text-color: white;}
        .btn-fancy__text-end {            
            position: absolute;
            top: 50%;
            left: calc(3rem);
            color: var(--text-color);
            transform: translateY(-50%) translateX(-50%);
            opacity: 0;
            transition: transform calc(var(--duration) * 1.1) var(--ease),opacity calc(var(--duration) * 1.1) var(--ease);
        }

        .btn-fancy__emoji-wrapper {
            position: absolute;
            top: calc(50%);
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
        }
        .ct-div-block {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            align-items: flex-start;
        }
        .btn-fancy__emoji--end {
            font-size: 10px;
            opacity: 0;
            transform: rotate(180deg);
            transform-origin: center;
        }
        .btn-fancy__emoji {
            font-size: 10px;
            transition: opacity var(--duration) var(--ease);
        }
        .btn-fancy__emoji--start {
            font-size: 10px;
            opacity: 1;
        }

        .btn-fancy:hover {            
            background: #073a75;
background: linear-gradient(10deg, rgba(7, 58, 117, 1) 0%, rgba(4, 146, 181, 1) 100%);
        }
        #navbarNav .btn-fancy:hover .btn-fancy__emoji-container, .btn-fancy:hover .btn-fancy__emoji-container {
            background-color: var(--bg-color);
            right: calc(100% - var(--wrapper-size) - var(--gap));
            transform: translateY(-50%) rotate(180deg);
        }

        #navbarNav .btn-fancy:hover .btn-fancy__emoji--end, .btn-fancy:hover .btn-fancy__emoji--end {
            opacity: 1;
        }

        #navbarNav .btn-fancy:hover .btn-fancy__emoji--start, .btn-fancy:hover .btn-fancy__emoji--start {
            opacity: 0;
        }
        .btn-fancy:hover .btn-fancy__text-start {
            transform: translateX(100%);
            opacity: 0;
        }
        .btn-fancy:hover .btn-fancy__text-end {
            transform: translateY(-50%) translateX(0);
            opacity: 1;
        }


        /* Boton fancy 2 */

        #intro .btn-fancy__text-start, #intro .btn-fancy__text-end {color: #124e91;}
        
        
        #intro .btn-fancy {
            --bg-color: #124e91;
            --ease: cubic-bezier(0.65, 0, 0.35, 1);
            --duration: 0.5s;
            display: inline-block;
            overflow: hidden;
            position: relative;
            padding: 12px 54px 12px 26px;           
            border-radius: 40px;
            font-family: var(--font-medium);
            font-size: 12px;
            line-height: normal;
            letter-spacing: .003rem;
            background: #BBCCE0;
background: linear-gradient(10deg, rgba(187, 204, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
            transition: all var(--duration) var(--ease);
        }
        
        #intro .btn-fancy__emoji-container {
            --bg-color: white;
            --gap: 5px;
            --wrapper-size: 31px;
            position: absolute;
            top: 50%;
            right: var(--gap);
            transform: translateY(-50%) rotate(0);
            transform-origin: center;
            width: var(--wrapper-size);
            height: var(--wrapper-size);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #124e91;
            transition: background-color var(--duration) var(--ease),right var(--duration) var(--ease),transform var(--duration) var(--ease);
            z-index: 1;
        }

                        

        #intro .btn-fancy:hover {            
            background: #BBCCE0;
background: linear-gradient(10deg, rgba(187, 204, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
        }
        #intro .btn-fancy:hover .btn-fancy__emoji-container {
            background-color: var(--bg-color);
            right: calc(100% - var(--wrapper-size) - var(--gap));
            transform: translateY(-50%) rotate(180deg);
        }

        #intro .btn-fancy:hover .btn-fancy__emoji--end {
            opacity: 1;
        }

        #intro .btn-fancy:hover .btn-fancy__emoji--start {
            opacity: 0;
        }
        
  /* ANIMACIÓN HERO       */

        @keyframes bganimation
{
0%   {
           background-position: 
               -100% -100%,
               200% 200%,
               -100% 200%,
               200% -100%;
      }
      50% {
           background-position: 
               150% 100%,
               -200% 100%,
               100% 0%,
               0% 100%;
      }
      100% {
           background-position: 
               -100% -100%,
               200% 200%,
               -100% 200%,
               200% -100%;
      }
}


#intro .eslogan {padding: 100px 0;}
        #intro .hero {
                background: 
                    radial-gradient(ellipse at center, rgba(0,191,240,0.3) 0%, rgba(0,191,240,0) 70%), /* niebieski */
                    radial-gradient(ellipse at center, rgba(18,78,145,0.3) 0%, rgba(18,78,145,0) 70%), /*czerwony */
                    radial-gradient(ellipse at center, rgba(0,230,239,0.3) 0%, rgba(0,230,239,0) 70%) /*zielony */
                    #1a2e50;
                background-repeat: 
                    no-repeat, 
                    no-repeat, 
                    no-repeat;
                background-size: 
                    1200px 1200px,
                    1200px 1200px,
                    1200px 1200px;
                background-attachment: fixed;
                
                animation:bganimation 15s infinite;
                padding: 20px 56px;            
        }

        .app-1 {position: absolute; margin: auto;}

        .actions img {
            width: 44px;
            height: auto;
        }

        #agentes .c-pantalla {position: relative;}

        /* CARDS */
        #soluciones .slider .card__text {
          min-height: 170px;
      }
        #soluciones .card {border-radius: 18px; margin-bottom: 30px;}
        .card__foot .card__link img {width: 42px; margin-left: 10px;}
        .card__link a { text-decoration: none; color: var(--azul-sies); line-height: normal; letter-spacing: .003rem; padding: 16px 6px 16px 26px; border-radius: 40px; background: #BBCCE0;
                    padding: 16px 6px 16px 26px;           
            border-radius: 40px;
            font-family: var(--font-medium);
            font-size: 14px;
            line-height: normal;
            letter-spacing: .003rem;
            background: #BBCCE0;
background: linear-gradient(10deg, rgba(187, 204, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);}


                  .card__body img {width: 42px; transition: all ease .2s; margin: auto;}
                    .card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: white;
  color: currentColor;
  text-decoration: none;
  overflow: hidden;
  transition-property: color;
  transition-delay: 0.15s;
  box-shadow: 0 2px 20px rgba(0, 0, 0, .1);
}
.card.hover {
  color: white;
  transition-delay: 0;
}
.card, .card__image, .card__image::after, 
.card__author, .card__body, .card__foot, 
.card__border {
  transition-duration: 0.4s;
  transition-timing-function: 
    cubic-bezier(0.51, 0.92, 0.24, 1);
}
.card__head {
  position: relative;
  padding-top: 70%;
}
.card__author {
  position: absolute;
  padding: 2em;
  left: 0;
  bottom: 0;
  color: white;
  transition-property: transform;
  transition-delay: 0.15s;
  width: 100%;
}
.card.hover .card__author {
  transition-delay: 0;
}

.card.ventas .card__image {background-image: url('../img/ventas-card.webp');}
.card.servicio .card__image {background-image: url('../img/servicio-al-cliente-card.webp');}
.card.atencion .card__image {background-image: url('../img/atencion-siniestros-card.webp');}
.card.seguimiento .card__image {background-image: url('../img/seguimiento-card.webp');}
.card.calidad .card__image {background-image: url('../img/calidad-card.webp');}
.card.recursos .card__image {background-image: url('../img/recursos-humanos-card.webp');}
.card.finanzas .card__image {background-image: url('../img/finanzas-card.webp');}

.card__image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transform-origin: top center;
  transition-property: transform;
  transition-delay: 0.15s;
}
.card__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  background: linear-gradient(30deg, 
    rgba(18, 78, 145, 1), rgba(18, 78, 145, .6));
  transition-property: opacity;
  mix-blend-mode: multiply;
  transition-delay: 0.15s;
}
.card.hover .card__image {
  transition-delay: 0;
}
.card.hover .card__body img {opacity: 0;}
.card.hover .card__image::after {
  opacity: 1;
  transition-delay: 0;
}

.card__body {
  position: relative;
  transition-property: transform;
  transition-delay: 0.15s;
  font-weight: 500;
    color: var(--azul-sies);
}
.card.hover .card__body {
  transition-delay: 0;
}
.card__headline {
  font-weight: 400;
  margin: 0 0 0.8em;
}
.card__text {
  line-height: 1.7;
  margin: 0 0 20px;
  opacity: 0.8;
}

.card__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 1em 2em;
  opacity: 0;
  transition-property: opacity;
}
.card.hover .card__body {color:white;}
.card.hover .card__foot {
  opacity: 1;
  transition-delay: 0.15s;
}
.card.hover .card__border {
  transform: none;
  transition-delay: 0.15s;
}
.author {
  display: flex;
  align-items: center;
  justify-content: center;
}
.author__image {
  flex-shrink: 0;
  margin-right: 1em;
  width: 56px;
  height: 56px;
  border-radius: 100%;
  overflow: hidden;
}
.author__content {
  display: grid;
  grid-gap: 0.4em;
  font-size: 0.9em;  
}
.author__header {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
}
.author__subheader {
  line-height: 13px;
  margin: 0;
  opacity: 0.9;

}

.slider-container {
    display: flex;
    align-items: center;
  position: relative;
  }
  
  .slider {
    display: flex;
    overflow: hidden;
    width: 100%; /* Ajusta este ancho según tus necesidades */
  }
  .card__author {text-transform: uppercase;}
  
   .c-card-main {
    width: calc(100% / 2.5);
    margin-right: 0; /* Espaciado entre las tarjetas */
    box-sizing: border-box;
  }
  
  .prev-btn, .next-btn {
    cursor: pointer;
  display:inline-block;
  }
  
  .vermas {cursor: pointer;}
  .actions {  
      position: absolute;
      bottom: -55px;
  right:50px;
  }
  
  
  @media screen and (min-width:1080px){
  .c-card-main {min-width: calc(100% / 3.2);}
  }
  
  @media screen and (min-width:1400px){
  .c-card-main {min-width: calc(100% / 3.5);}
  .slider {transform: translate(10%); width:90%;}
  }

  @media screen and (min-width:1800px){
    .c-card-main {min-width: calc(100% / 4.3);}
    }

  @media screen and (max-width: 768px) {
    .c-card-main {
  width: calc(100% / 1.1);
  min-width: calc(100% / 1.1);
    }    
  }
            /* INTERFASE */
            #esquema {
              position:relative;
          }
          
          #esquema .cerrar {                            
              position: absolute;
              top: 0;
              left: calc(50% - 350px);
          }

            #simplificacion * {
                transition: all ease 0.5s;
               }
               #c-info .row {opacity: 0; position: absolute; height: 150px; overflow: hidden;}
             .hover  #c-esquema  {transform:translateX(-20%) scale(90%);}
         .hover.boton-1 #c-info .menos {opacity: 1;position: initial; height: auto;} 
         .hover.boton-2 #c-info .derivacion {opacity: 1;position: initial;height: auto;} 
         .hover.boton-3 #c-info .control {opacity: 1;position: initial; height: auto;} 
         .hover.boton-4 #c-info .operacion {opacity: 1;position: initial; height: auto;} 
         .hover.boton-5 #c-info .atencion {opacity: 1;position: initial; height: auto;} 
         .hover.boton-6 #c-info .implementacion {opacity: 1; position: initial; height: auto;} 
         .cerrar {cursor: pointer;}
         .boton:hover circle {
             opacity:.3    
         }
         .boton{cursor: pointer;}
         #simplificacion {overflow: hidden;}
         
         /* Animación de rotación */
         @keyframes orbit {
                     0% {
                         transform: rotate(0deg);
                     }
                     100% {
                         transform: rotate(360deg);
                     }
                 }
         
                 .orbit {
                     animation: orbit 25s linear infinite; /* Controla duración y velocidad */
                     transform-origin: center; /* Punto central de la rotación */
                 }

/* CUSTOMIZED */
.logo-circulo {
  background-color: var(--azul-2);
  border-radius: 50%;
  border: solid 3px #bbcce0;
  width: 175px;
  height: 175px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(80px, 300px);
}


.logo-circulo img {
  width: 90px;
  height: auto;   
}
.info-card {
  border-radius: 20px;
  background: var(--azul-claro-1);
  padding: 40px 50px 40px 60px;}

  #customized {position: relative;}

  .f-circulo {
  background-image: url(../img/f-customized.webp);
  background-position: 100px bottom;
  background-repeat: no-repeat;
}

  #customized .c-logo-circuloNO {
    content: "";
    display: block;
    width:689px;
    height: 687px;
    background-image:url(../img/f-customized.webp);    
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: auto;
  position: absolute;
  bottom: 0;
  right: 40px;
  z-index: -1;
  }

.sies-card {
position: relative;
display: flex;
flex-direction: column;
width: 250px;
background: white;
color: currentColor;
text-decoration: none;    
transition-property: color;
transition-delay: 0.15s;
box-shadow: 0 2px 20px rgba(0, 0, 0, .1);
}

.c-cards {
display: flex;
flex-wrap: wrap;
gap: 60px;
}

.c-cards .sies-card:after{display: block;
content: "";
position: absolute;
width: 42px;
height: 42px;
top: 40%;
left: -10px;    
background:var(--azul-claro-1);
background-image: url(../img/icono-cards.svg);
background-repeat: no-repeat;
background-size: 60%;
background-position: center;  
border-radius: 8px;
}
.c-cards .sies-card { background-image:url(../img/f-card.webp);
border-radius: 14px; position: relative;}

.c-cards .sies-card.f-card-azul { background-image:url(../img/f-card.webp);}
.c-cards .sies-card.f-card-verde { background-image:url(../img/f-card-verde.webp);}
.c-cards .sies-card.f-card-naranja { background-image:url(../img/f-card-naranja.webp);}

.card-image {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
width: 100%;
overflow: hidden;
}
.card-body {
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
padding:42px 10px 20px;
color: white;
font-weight: bold;
}

.card-body a {font-weight: 500;}

/* Animación base */
@keyframes float1 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes float3 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* Estilos para las capas */
.sies-card:nth-child(1) {
    animation: float1 3s ease-in-out infinite;
}

.sies-card:nth-child(2) {
    animation: float2 4s ease-in-out infinite;
}

.sies-card:nth-child(3) {
    animation: float3 5s ease-in-out infinite;
}

/* LOGOS */
.logos {
    display: flex; /* Activa el modo flexbox */
    flex-wrap: wrap; /* Permite que las figuras se ajusten a la siguiente línea si no caben */
    justify-content: center; /* Centra las figuras horizontalmente */
    gap: 40px; /* Espaciado entre las figuras */
    align-items: center; /* Alinea las figuras verticalmente */
}

.logos figure {
    margin: 0; /* Elimina márgenes predeterminados */
    padding: 0; /* Elimina relleno predeterminado */
    flex: 0 1 auto; /* Permite que las figuras mantengan su tamaño natural */
}

.logos img {
    max-width: 210px; /* Ajusta el tamaño máximo de las imágenes */
    height: auto; /* Mantiene la proporción de las imágenes */
}

/* HUMANO VS AI */
.tabla-humano-vs-ai li {
  min-height: 70px;
  list-style: none;
  display: flex;
  align-items: center;
}

.tabla-humano-vs-ai .aspecto li {font-weight: bold;}

.tabla-humano-vs-ai ul {padding: 8px 28px 8px 20px;}
.tabla-humano-vs-ai .agente-virtual .titulo {margin-left: 25px;}

.vineta-ai {
  list-style: none; /* Elimina las viñetas predeterminadas */
  padding-left: 0; /* Elimina el margen izquierdo */
}

.vineta-ai li {
  position: relative; /* Necesario para posicionar la imagen */
  padding-left: 60px; /* Espacio para la imagen */  
  margin-left: -40px;
}

.vineta-ai li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* Centra la imagen verticalmente */
  width: 50px;
  height: 50px;
  background-image: url('../img/vineta-ai.webp'); /* Ruta de la imagen */
  background-size: cover; /* Asegura que la imagen se ajuste al tamaño */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.vineta-ai {
  margin-left: 30px;
}

.tabla-humano-vs-ai .aspecto li {position:relative;}
.tabla-humano-vs-ai .aspecto li:not(:last-child):after {
    content: "";
    display: block;
    width: 400%;
    height: 1px;
    background-image:url('../img/line-vineta-ai.webp');
    position: absolute;
    bottom: 0px;
    left: 0;
}

/* AGENDA */

#habla-con-un-experto {
  padding: 0 100px;
}

#habla-con-un-experto {
  position: relative;
  margin-top: 200px;
}
#habla-con-un-experto::after {width: 310px; height: 310px;
content: "";
display: block;
position: absolute;
top: -140px;
left: 50px;
background-image: url('../img/agenda-hero.webp');
border-radius: 20px;
}

/* NOTICIAS */
#noticias .entradas {
  gap:100px;
}

/* FOOTER */
footer {
  background: var(--azul-3);
  background-image: url(../img/fondo-footer.webp);
  color: var(--azul-claro-1);
  background-position: top right;
  background-repeat: no-repeat;
}

footer.main-footer {
  padding-top: 100px;
}

.mt-80 {margin-top: 80px !important;}

#c-customized #imagen {
  max-width: 230px;
}

/* HUMANO VS AI MOBILE */

#accordionHumanoVsAi .accordion-body {    text-align: center; padding: 5px 0;}
#accordionHumanoVsAi .accordion-body > .container {padding-top:30px}
#accordionHumanoVsAi .col-6 > p {padding:10px 10px 10px 10px; border-radius:10px; font-size: small;}
#accordionHumanoVsAi .col-6:nth-child(1) p {background:var(--azul-claro-1); color:var(--azul-sies);}
#accordionHumanoVsAi .col-6:nth-child(2) p {background:var(--azul-sies); color:white;}
#accordionHumanoVsAi .col-6 p:before {content:""; display:block; width:50px; height:50px; margin:-30px auto 10px;}
#accordionHumanoVsAi .col-6:nth-child(2) p:before {background-image:url(../img/vineta-ai.webp);}
#accordionHumanoVsAi .col-6:nth-child(1) p:before {background-image:url(../img/cara-humana.webp);}
#accordionHumanoVsAi .accordion-button:not(.collapsed) {background: var(--azul-sies); color: white;}
#accordionHumanoVsAi .accordion-button {background: #F4F7FA; color: var(--azul-sies);}
#accordionHumanoVsAi .accordion-item .accordion-button {padding-right:40px;  border-radius:5px; border-radius:5px; font-weight:bold;}

#soluciones .hover .nuevo-boton {
    opacity: 0!important;
}

.desarrollado a {    color: var(--azul-claro-1);}

.article h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--azul-sies);
}

.lista-vinetas {
  list-style: none; /* Elimina las viñetas predeterminadas */
  padding-left: 0; /* Elimina el margen izquierdo */
}

.lista-vinetas li {
  position: relative; /* Necesario para posicionar la imagen */
  padding-left: 25px; /* Espacio para la imagen */
  margin-bottom: 10px; /* Espaciado entre elementos */
}

.lista-vinetas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  transform: translateY(-50%); /* Centra la imagen verticalmente */
  width: 15px;
  height: 15px;
  background-image: url('../img/vineta-normal.webp'); /* Ruta de la imagen */
  background-size: cover; /* Asegura que la imagen se ajuste al tamaño */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
}
.destacado-azul strong {color: var(--azul-sies);}

.mic {
    background-color: #cfdae7;
    width: 60px;
    height: 60px;
    z-index: 9;
    border-radius: 40px;
    padding: 10px;
    left: 0;
}
      .chat-bubble, .mic {position: absolute;}
      .chat-bubble.left {align-self: baseline; 
        -webkit-border-radius: 20px;
  -webkit-border-bottom-left-radius: 2px;
  -moz-border-radius: 20px;
  -moz-border-radius-bottomleft: 2px;
  border-radius: 20px;
  border-bottom-left-radius: 2px;
      }
      .chat-bubble.right {align-self:self-end; transform: translateY(65px);
        -webkit-border-radius: 20px;
  -webkit-border-bottomright-radius: 2px;
  -moz-border-radius: 20px;
  -moz-border-radius-bottomright: 2px;
  border-radius: 20px;
  border-bottom-right-radius: 2px;
      }

      .chat-bubble {
  background-color:#cfdae7;
  padding:16px 28px;
  display:inline-block;
  z-index: 9;
}
.typing {
  align-items: center;
  display: flex;
  height: 17px;
}
.typing .dot {
  animation: mercuryTypingAnimation 1.8s infinite ease-in-out;
  background-color: #124e91;
  border-radius: 50%;
  height: 7px;
  margin-right: 4px;
  vertical-align: middle;
  width: 7px;
  display: inline-block;
}
.typing .dot:nth-child(1) {
  animation-delay: 200ms;
}
.typing .dot:nth-child(2) {
  animation-delay: 300ms;
}
.typing .dot:nth-child(3) {
  animation-delay: 400ms;
}
.typing .dot:last-child {
  margin-right: 0;
}

@keyframes mercuryTypingAnimation {
  0% {
    transform: translateY(0px);
    background-color:#6E93BC;
  }
  28% {
    transform: translateY(-7px);
    background-color:#B7C9DD;
  }
  44% {
    transform: translateY(0px);
    background-color: #DBE4EE;
  }
}

      .beneficios .mensaje {font-weight: 500; width: 60%; padding: 15px; border-radius: 50px;}
    .f-amarillo {background-color: #F8AD1F; border:solid 4px#F88D1F;}
    .f-azul {background-color: #124E91; border:solid 4px#295F9B;}
    .f-verde {background-color: #B2C635; border:solid 4px#A0B230;}
    .blanco {color: white;}
    .beneficios .mensaje-4 {margin-top: 60px; margin-left: 5px;}
    .beneficios .mensaje-5 {margin-top: 40px; margin-left: -35px;}
    .beneficios .mensaje-6 {margin-top: 30px; margin-left: 50px;}

    .frente, .espalda {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}  
      .animacion {
  perspective: 1000px;
  position: relative;
  width: 300px;
  height: 200px;
}
.pantalla, .beneficios {
  position: absolute;
  width: 310px;
  height: 492px;
  backface-visibility: hidden;
  transform-style: preserve-3d;  
}
.pantalla {  
  display: flex;
  flex-direction: column;
  align-items: center;
}
#intro .pantalla {
  justify-content: center;
}
#agentes .pantalla {
  justify-content: start;
}
.mensaje {
  opacity: 0;
}

@keyframes rotarPantalla {
  0%, 50% { transform: rotateY(0deg); opacity: 1; } /* La capa permanece de frente */
  55%, 90% { transform: rotateY(180deg); opacity: 0;} /* Gira y se mantiene de espaldas */
  100% { transform: rotateY(0deg); opacity: 1;} /* Termina el giro para quedar de frente nuevamente */
}

@keyframes rotarPantalla2 {
  0%, 50% { transform: rotateY(180deg); opacity: 0;} /* La capa permanece de frente */
  55%, 90% { transform: rotateY(0deg); opacity: 1;} /* Gira y se mantiene de espaldas */
  100% { transform: rotateY(180deg); opacity: 0;} /* Termina el giro para quedar de frente nuevamente */
}

@keyframes mostrarMensajes {
  0%, 15% { opacity: 0; }
  20%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes puntos {
  0% { opacity: 0; }
  4%, 14% { opacity: 1; }
  15%, 100% { opacity: 0; }
}

@keyframes puntos2 {
  0%, 19% {opacity: 0;}
  20%, 25% { opacity: 1;}
  26%, 100% { opacity: 0;}   
}

@keyframes puntos3 {
  0%, 38% {opacity: 0;}
  39%, 42% { opacity: 1;}
  43%, 100% { opacity: 0;}    
}

@keyframes mic {
  0%, 30% {opacity: 0;}
  31%, 35% { opacity: 1;}
  36%, 100% { opacity: 0;}   
}

.pantalla {
  animation: rotarPantalla 20s infinite;
  /* animation: opacidad 20s infinite; */
}

.beneficios {        
  animation: rotarPantalla2 20s infinite;
  
}

@keyframes opacidad {
  0%, 50% {opacity: 1;}
  55%, 90% {opacity: 0;}
}

.mensaje-1 {
  animation: mostrarMensajes 20s infinite;  
}

#intro .mensaje-1 {  
  margin-left: -100px;
  margin-top: 20px;
}

#agentes .mensaje-1 {  
  margin-left: -100px;
  margin-top: 110px;
}

#intro .chat-bubble.uno {   top:136px;}
#intro .chat-bubble.dos {  top:156px;}

#agentes .chat-bubble.uno {   top:126px;}
#agentes .chat-bubble.dos {  top:146px;}
#agentes .chat-bubble.tres {  top:316px;}

.chat-bubble.uno {  animation: puntos 20s infinite;}
.chat-bubble.dos {  animation: puntos2 20s infinite;}
.chat-bubble.tres {  animation: puntos3 20s infinite;}

.mic {animation: mic 20s infinite;}
#intro .mic {  top: 310px;}
#agentes .mic {  top: 290px;}

.mensaje-2 {animation: mostrarMensajes 20s infinite 2s;  margin-right: -100px;}

.mensaje-3 {  animation: mostrarMensajes 20s infinite 4s;  margin-left: -100px;}

.mensaje-4 {  animation: mostrarMensajes 20s infinite 8s;}

.mensaje-5 {  animation: mostrarMensajes 20s infinite 9.5s;}

.mensaje-6 {  animation: mostrarMensajes 20s infinite 11s;}

.mensaje-7 {  animation: mostrarMensajes 20s infinite 5.5s; margin-left: 100px; }

/* MOBILE */
@media only screen and (max-width: 1650px) {
    .hero__content--right .btn-fancy {
        font-size: 14px;
        line-height: 18px;
        padding-top: 15.5px;
        padding-bottom: 14.5px;
        padding-left: 24px;
        padding-right: calc(45px + 10px);
    }
    .hero__content--right .btn-fancy__emoji-container {
        --wrapper-size: 40px;
    }
    .hero__content--right .btn-fancy__text-end {
        left: 52px;
    }
    .hero__content--right .btn-fancy__emoji-container svg {
        width: 10.2px;
    }
}

@media (min-width: 1441px) {
  .container.hero {
      max-width: 1600px;
  }
  .container-xl {
    max-width: 1450px;
}
}

@media (min-width: 1080px) {
  #agentes .c-pantalla img {}
}

@media screen and (min-width: 768px) {
  .mt-md-50 {    margin-top: 50px !important;}
  .mt-md-80 {margin-top: 80px !important;
  }
  .mt-md-100 {
      margin-top: 100px !important;
  }
  .mt-md-120 {
      margin-top: 120px !important;
  }
  .mb-md-30 {
      margin-bottom: 30px !important;
  }
  .mb-md-50 {
    margin-bottom: 50px !important;
}
.c-card-main {padding: 0 35px;}

/* CIFRAS */
           
.cifra .numero {
  display: inline-block;
  font-size: 80px;            
  font-weight:800;
}          
.prefijo, .sufijo {
  font-size: 80px;
  font-weight:800 ;
}
.c-cifra .text {
  font-size: 20px;
  font-weight:500;            
}
.c-cifras .c-cifra:not(:last-child) {
 border-right: 2px solid var(--azul-sies);
  
}
  .c-cifras {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      margin-top: 50px;
  }
  #esquema svg {
    width: 700px;
    height: 700px;
} 

.hover #esquema {transform: translateX(63%) scale(.8);}
.hover #c-info {transform:translateY(-650px); opacity: 1;}
.cerrar .comodin {height: 400px;}
.hover #esquema .cerrar {width: 700px; height: 700px;}
#simplificacion {max-height: 960px;}
#agentes .animacion {  margin-top: 80px;  margin-left: 50px;}
.card__body {
  padding: 2em;
}
}

#agentes .beneficios .mensaje img {
    width: 200px;
    height: auto;
}

@media screen and (max-width: 768px) {
  #navbarNav li.nav-item {
    padding: 11px 0px;
}
#agentes {
  margin-top: 280px;
  margin-bottom: 50px;
}

.animacion {
  margin-left: -30px;
}

.mt-50 {
  margin-top: 50px;
}
.mt-80 {
    margin-top: 80px;
}
.mt-100 {
    margin-top: 100px;
}
.mt-120 {
    margin-top: 120px;
}
.mb-30 {
    margin-bottom: 30px;
}

.mb-50 {
  margin-bottom: 50px;
}

.c-card-main {padding: 0 14px;}

/* CIFRAS */
           
.cifra .numero {
  display: inline-block;
  font-size: 30px;            
  font-weight:800;
}          
.prefijo, .sufijo {
  font-size: 30px;
  font-weight:800 ;
}
.c-cifra .text {
  font-size: 13px;
  font-weight:500;            
}
.c-cifras .c-cifra:not(:last-child) {
 border-right: 2px solid var(--azul-sies);
  
}

  .c-cifras {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      margin-top: 50px;
  }

  #cifras .row {
    align-items: flex-start;
}

#esquema {
  padding: 14px;
  margin: 0;
}
#esquema svg {
  width: 100%;
  height: auto;
}
.hover #esquema {transform: translateX(120%) scale(.8);}
.hover #c-info {transform:translateY(-330px); opacity: 1;}
.cerrar .comodin {height: 80px;}
.hover #esquema .cerrar {width: 700px; height: 400px;}
#simplificacion {max-height: 600px; max-width: 100%; overflow: hidden;}
.card-image {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  width: 30%;
  overflow: hidden;
}
.sies-card {
  flex-direction: row;
  width: 100%;  
  max-width: 100%;
}
.card-body {height: 100px;}

.col-md-3.c-logo-circulo {
    margin-top: -230px;
}

.info-card p {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;
}

.card-title {
    font-size: 14px;
}
.logo-circulo {transform: translate(190px, 3px);}
.c-cards .sies-card {overflow: hidden;}
.card-image {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  max-width: 84px;
  max-height: 100px;
  }
  .card-body {
    padding:12px 10px 12px;
    }
    .c-cards {
      gap: 20px;
      margin-bottom: 60px;
      }
      .info-card {
        padding: 20px;
        margin-top: -30px;
    }

    .logos {
      gap: 30px;      
  }
  
  .logos figure {
      width: 27%;
  }
  
  .logos img {
      max-width: 100%;      
  }

  .lead {
    font-size: .8rem;
}
.tabla-humano-vs-ai .aspecto li {
 
  font-size: smaller;
}
.tabla-humano-vs-ai li {
  font-size: smaller;
}
#humanovsai .container-fluid {
  padding: 0;
}

#humanovsai .col-3, #humanovsai .col-4 {
  padding: 0 4px;
}
.tabla-humano-vs-ai ul {
  padding: 2px 8px 2px 4px;
}
.tabla-humano-vs-ai li {
  font-size: smaller;
  padding: 0 5px;
  line-height: 1.4;
}
.tabla-humano-vs-ai .agente-virtual .titulo {
  margin-left: 0px;
}
.vineta-ai {
  margin-left: 20px;
}
.vineta-ai li {
  position: relative;
  padding-left: 40px;
  margin-left: -30px;
}

.vineta-ai li::before {  
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}

#habla-con-un-experto::after {
  width: 80%;
  height: 120px;
  top: -90px;
  left: 10%;
  background-image: url('../img/agenda-hero-mobile.webp');
  background-size: cover;
  background-repeat: no-repeat;
}
#habla-con-un-experto {
  padding: 0 12px;
}
#habla-con-un-experto {
  margin-top: 120px;
}
#googleCalendar {height: 1350px;}

#noticias figure {
  text-align: center;
}

#noticias .entradas .col-md-3 {
  padding: 0 30px;
}
#noticias .entradas {
  gap: 30px;
}
footer.main-footer {
  padding-top: 40px;
}
.main-footer figure {
  text-align: center;
}
footer .list-unstyled {
  display: flex;
  justify-content: center;
}

footer li a {
  font-size: small;
}
footer a.btn-fancy.outline {
  margin-bottom: 20px;
}

#agentes .animacion {margin-top: 0; margin-left: 20px;}
#soluciones {
  margin-bottom: 90px;
}
.card__body {
  padding: 2em 1em;
}
.card__link a {font-size: 12px;}

#customized .accordion-item button.accordion-button {color:white; padding-right:40px; border-radius:5px; border-radius:5px}
  
#customized .accordion-item:nth-child(1) button.accordion-button.collapsed {
      animation: float1 3s ease-in-out infinite;
  }
  
#customized .accordion-item, #accordionHumanoVsAi .accordion-item  {margin-bottom:14px;}
  
 #customized  .accordion-item:nth-child(1) button.accordion-button {
      background-image: url("../img/f-card.webp");
  }
  
#customized .accordion-item:nth-child(2) button.accordion-button {
      background-image: url(../img/f-card-verde.webp);
  }
  
#customized .accordion-item:nth-child(3) button.accordion-button {
      background-image: url(../img/f-card-naranja.webp);
  }
  
#customized .accordion-item:nth-child(2) button.accordion-button.collapsed {
      animation: float2 3s ease-in-out infinite;
  }
  
#customized .accordion-item:nth-child(3) button.accordion-button.collapsed {
      animation: float3 3s ease-in-out infinite;
  }
  
#customized button.accordion-button.collapsed, #accordionHumanoVsAi button.accordion-button.collapsed {
      border: none;
  }
  
#customized .accordion-item, #accordionHumanoVsAi .accordion-item {
      border: none;
  }
  
#customized .accordion-button::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");    
  }
  
#customized .accordion-button:not(.collapsed)::after, #accordionHumanoVsAi .accordion-button:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }
  #intro .eslogan {
    padding: 30px 0;
}
}