/*FONTS */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.eot');
  src: url('../fonts/Poppins-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-Light.woff2') format('woff2'),
      url('../fonts/Poppins-Light.woff') format('woff'),
      url('../fonts/Poppins-Light.ttf') format('truetype'),
      url('../fonts/Poppins-Light.svg#Poppins-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.eot');
  src: url('../fonts/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
      url('../fonts/Poppins-SemiBold.woff') format('woff'),
      url('../fonts/Poppins-SemiBold.ttf') format('truetype'),
      url('../fonts/Poppins-SemiBold.svg#Poppins-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.eot');
  src: url('../fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-Regular.woff2') format('woff2'),
      url('../fonts/Poppins-Regular.woff') format('woff'),
      url('../fonts/Poppins-Regular.ttf') format('truetype'),
      url('../fonts/Poppins-Regular.svg#Poppins-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KoHo';
  src: url('../fonts/KoHo-Bold.eot');
  src: url('../fonts/KoHo-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/KoHo-Bold.woff2') format('woff2'),
      url('../fonts/KoHo-Bold.woff') format('woff'),
      url('../fonts/KoHo-Bold.ttf') format('truetype'),
      url('../fonts/KoHo-Bold.svg#KoHo-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KoHo';
  src: url('../fonts/KoHo-SemiBold.eot');
  src: url('../fonts/KoHo-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/KoHo-SemiBold.woff2') format('woff2'),
      url('../fonts/KoHo-SemiBold.woff') format('woff'),
      url('../fonts/KoHo-SemiBold.ttf') format('truetype'),
      url('../fonts/KoHo-SemiBold.svg#KoHo-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}



.f-ksb{
  font-family: 'KoHo', sans-serif;
  font-weight: 600;
}
.f-pl{
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}
.f-psb{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.f-kb{
  font-family: 'KoHo', sans-serif;
  font-weight: bold;
}
.f-pr{
  font-family: 'Poppins', sans-serif;
  font-weight: normal;
}
.f-gris{
  color: #535050;
}
/* f i n FONTS */



/* M E N U*/
.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .bg-verde{
    background-image: linear-gradient(to top, #a1d700, #fff);
  }

  :root {
    --bs-link-hover-color: #afd034;
    /* Rojo, puedes cambiarlo al color que prefieras */
    --bs-success: #a1d700;
    --bs-success-rgb: 161, 215, 0; /* Valores RGB del color */
  }
  .accordion-button{
    font-size: 1.5rem !important;
    font-family: koho !important;
    font-weight: 600 !important;
  }
  .btn-success {
    background-color: #a1d700 !important;
    border-color: #a1d700 !important;
}

.btn-success:hover {
    background-color: #8cbf00 !important; /* Un tono más oscuro para el hover */
    border-color: #8cbf00 !important;
}
  .nav-link {
    --bs-nav-link-color: #231f20 !important;
  }

  .link-success {
    color: rgb(187, 215, 93) !important;
  }

  .semicircle {
    position: absolute;


    /* Debe ser igual al width para que sea un círculo */

    /* Color del semicírculo */
    border-radius: 0 0 100px 100px;
    /* Ajustado para que la curvatura vaya hacia abajo */
  }

  .semicircle.left {
    right: 0;
    width: 150px;
    top: -60px;
    /* Ajusta el tamaño */
    height: 100px;
    background-color: #a1d700;
  }

  .semicircle.right {
    right: 60px;
    background-color: rgba(0, 0, 0, 0.05);
    /* Color semitransparente */
    top: -50px;
    width: 200px;
    /* Ajusta el tamaño */
    height: 100px;
  }
  @media screen and (min-width: 768px) {
    .desktop {
        display: none;
      }
      .bg-ajuste{
        margin-top: -50px !important;
      }
    
  }
  @media screen and (max-width: 768px) {
    .desktop {
        display: block;
      }
      
    
  }
  
  /* f i n   m e n u*/

  /* f o o t e r*/
  .footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #231f20;
    color: white;
    text-align: center;
    padding-top: 20px;
    
 }
 .fooleft {
    position: absolute;
    border-radius: 100px 100px 0 0 ;
    right: 0;
    width: 150px;
    bottom: 0px;
    /* Ajusta el tamaño */
    height: 300px;
    background-color: #a1d700;
  }

  .fooright {
    position: absolute;
    border-radius: 100px 100px 0 0;
    right: 60px;
    background-color: rgba(0, 0, 0, 0.05);
    /* Color semitransparente */
    bottom: 0px;
    width: 200px;
    /* Ajusta el tamaño */
    height: 400px;
  }
 @media screen and (min-width: 768px) {
    .fooleft {
       
        height: 300px;
        
      }
    
      .fooright {
       
        height: 350px;
      }
  }
  
  
  @media screen and (max-width: 768px) {
    .fooleft {
        height: 100px !important;
    }
    .fooright {
        height: 150px !important;
    }
    
  }
  /* f i n  f o o t e r*/

  /*F O N D O S */
  .bg-bbanern{
    background-image: url('../images/banner-negro.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
  }
  .bg-verde{
    background-color: #a1d700 !important; /* Color verde */
  }
  .bg-beneficios {
    background-image: url('../images/bg-beneficios.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-height: 600px;
    min-height: 500px;
  }
  

  .bg-patron {
    background-image: url('../images/fondo-patron.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
  }
  .bg-patron2 {
    background-image: url('../images/bg-patron2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
  }
  .bg-patron3 {
    background-image: url('../images/bg-patron3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
  }
  .bg-video{
    background-image: url('../images/bg-video.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-height: 600px;
    min-height: 600px;
  }
@media screen and (min-width: 768px) {    
      .bg-home {
        background-image: url('../images/slide1.jpg');
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        max-height: 600px;
        min-height: 600px;
      }
      .bg-basico {
        background-image: url('../images/bg-basico.jpg');
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        max-height: 600px;
        min-height: 600px;
      }
      .bg-pro {
        background-image: url('../images/bg-planpro1.jpg');
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        max-height: 600px;
        min-height: 600px;
      }
      .bg-realpro {
        background-image: url('../images/bg-planpro.jpg');
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        max-height: 600px;
        min-height: 600px;
      }
      .bg-pro2 {
        background-image: url('../images/bg-planpro2.jpg');
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        max-height: 600px;
        min-height: 600px;
        
      }
      .bg-pro4 {
        background-image: url('../images/bg-ava2.jpg');
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        max-height: 600px;
        min-height: 600px;
        
      }
      .bg-soporte {
        background-image: url('../images/slide-soporte.jpg');
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        max-height: 800px;
        min-height: 800px;
      }
    
      .bg-patron {
        max-height: 400px;
        min-height: 400px;
      }
      .patron{
         max-height: 500px;
        min-height: 500px;
      }
      .patron2{
        min-height: 600px !important;
      }
      .patron3{
        min-height: 800px !important;
      }
      .patron4{
        min-height: 1200px !important;
      }
  }
  
  
  @media screen and (max-width: 768px) {
    .bg-home {
      background-image: url('../images/responsive/bg-home.jpg');
      background-size: cover;
      background-position:center;
      background-repeat: no-repeat;
      max-height: 600px;
      min-height: 600px;
    }
    .bg-basico {
      background-image: url('../images/responsive/bg-basico.jpg');
      background-size: cover;
      background-position:center;
      background-repeat: no-repeat;
      max-height: 600px;
      min-height: 600px;
    }
    .bg-soporte {
      background-image: url('../images/responsive/bg-soporte.jpg');
      background-size: cover;
      background-position:center;
      background-repeat: no-repeat;
      max-height: 600px;
      min-height: 600px;
    }
    
    .bg-patron {
        max-height: 1000px;
       height: auto;
    }
    .patron{
         max-height: 500px;
        min-height: 500px;
      }
    
  }
  /* f i n  f o n d o s*/

  /* T I T U L O S */
  .titulo {
    font-size: 3.5rem;
    font-weight: bold;
    color: #231f20;
  }

  .subtitulo {
    font-size: 1.5rem;
    color: #231f20;
  }

  .titulo-seccion {
    font-size: 2rem;
    font-weight: bold;
  }

  .gear-icon {
    font-size: 2rem;
    color: #000;
  }

  .social-icons {
    font-size: 1.5rem;
    margin-top: 15px;
  }

  .social-icons i {
    margin-right: 15px;
    cursor: pointer;
  }

  /* Elementos gráficos */
  .figura-gris {
    position: absolute;
    bottom: 0;
    right: 50px;
    width: 180px;
    height: 180px;
    background-color: #D8D8D8;
    border-radius: 100px 100px 0 0;
    z-index: -1;
  }

 
  /* H O ME */
  @media screen and (min-width: 768px) {
    .cuadro-blanco {
      width: 70%;


    }
  }


  @media screen and (max-width: 768px) {
    .cuadro-blanco {
      width: 95%;


    }

  }
  
  /* f i n H O ME */
  
  /* I C O N O S */
  

.iconoFAQ {
    width: 100px; /* Ajusta el tamaño según necesites */
    height: 100px;
  
    border-radius: 0 100% 100% 100%; 
    
    background: #D8D8D8;
  
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: #fff;
    position: absolute;
    top: 10px;
    left: -20px;
    transform: translateX(-50%);
  }
  .half-image {
    width: auto; /* Mantiene la proporción */
    height: auto;
    clip-path: inset(0 0 40% 0); /* Corta la mitad derecha */
}
.verdemitad{
 height: 500px;
 max-height: 500px;
}
  /* b e n e f i c i o s*/

  

  .htitulo {

    font-size: 6.8rem;
  }


  .circulo-verde-izq {
    position: absolute;
  top: 10px;
  left: -110px;
  width: 150px;
  height: 150px;
  background-color: #A0D034;
  border-radius:
50%;
  z-index: -1;
  }

  .figura-gris {
    position: absolute;
    bottom: 0;
    right: 10%;
    width: 180px;
    height: 180px;
    background-color: #D8D8D8;
    /* Gris */
    border-radius: 100px 100px 0 0;
    /* Bordes superiores redondeados */
    z-index: -1;
  }

 

  /* Texto */
  h2 {
    font-size: 1.5rem;
    font-weight: bold;
  }

  p {
    font-size: 1rem;
    color: #231f20;
  }

  /* Botón */
  .btn-prueba {
    display: inline-block;
    background-color: #A0D034;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    margin-top: 20px;
  }

  .btn-prueba:hover {
    background-color: #8cb828;
  }

  /* Sección de Tarjetas */
  .tarjeta {
    background: #fffdf9;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .icono {
    width: 80px; /* Ajusta el tamaño según necesites */
    height: 80px;
  
    border-radius: 0 100% 100% 100%; 
    
    background: #D8D8D8;
  
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .tarjeta h3 {
    margin-top: 30px;
    font-size: 1.2rem;
    font-weight: bold;
  }

  .tarjeta p {
    font-size: 1rem;
    color: #231f20;
  }

  /* Sección SCAE Web */
  .bg-seccion {
    background: #e5e5e5;
    color: #231f20;
    position: relative;
  }

  .imagen-redonda {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    overflow: hidden;
  }

  .imagen-redonda img {
   
    display: block;
   
  }

  .titulo-seccion {
    font-size: 2rem;
    font-weight: bold;
  }

  .gear-icon {
    font-size: 2rem;
    color: #000;
  }

  .social-icons {
    font-size: 1.5rem;
    margin-top: 15px;
  }

  .social-icons i {
    margin-right: 15px;
    cursor: pointer;
  }

  /* Elementos gráficos */
  .figura-gris2 {
    position: absolute;
    bottom: 0;
    right: 50px;
    width: 180px;
    height: 180px;
    background-color: #D8D8D8;
    border-radius: 100px 100px 0 0;
    z-index: -1;
  }

  .circulo-verde-der {
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 120px;
    height: 50px;
    background-color: #A0D034;
    border-radius: 60px 60px 0 0;
  
    z-index: -1;
  }
    /* f i n  b e n e f i c i o s*/
    .accordion-button:not(.collapsed) {

      background-color: #afd034 !important;

    }

    .accordion {
      --bs-accordion-active-color: white !important;
    }
    .group-hover {
      cursor: pointer;
  }

  .img-zoom {
      transition: transform 0.5s ease;
  }

  .opacity-layer {
      transition: opacity 0.5s ease;
      opacity: 0;
      z-index: 1;
  }

  .group-hover:hover .img-zoom {
      transform: scale(1.05);
  }

  .group-hover:hover .opacity-layer {
      opacity: 0.4;
  }

  .rounded-end-pill {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 50rem;
      border-bottom-right-radius: 50rem;
  }


  /*PRECIOS */

  .plan {
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    height: 640px;
    width: 270px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
}

.basico {

    background-image: url('../images/plan1.png');
}

.medio {
    background-image: url('../images/plan2.png');
}

.avanzado {
    background-image: url('../images/plan3.png');

}

.subt {
    line-height: 1;
    font-size: .8rem;
    text-align: center;
}

.customlist {
    text-align: center;
    list-style: none;
    font-size: .8rem;


}

.customlist li {
    border-bottom: solid 1px rgba(88, 89, 89, 0.31);
    margin-bottom: 10px;
}


/* MODAL LOGIN*/
.modal-content.custom-login {
        width: 100%;
        max-width: 620px;
        min-height: 400px;
        margin: 0 auto;
        border-radius: 20px;
        padding: 2rem;
        background: linear-gradient(to top, #c1df66, #ffffff); /* opcional */
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
.logo-scae {
        max-width: 160px;
        margin-bottom: 0.5rem;
    }
    .icono-modal {
        max-width: 120px;
        margin: 1rem auto;
    }
    .titulo-principal {
      font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem;
        font-weight: regular;
        text-transform: uppercase;
        margin-bottom: 1.5rem;
        color: #333;
    }
    .btn-login {
        background-color: #ffffff;
        color: #000;
        font-weight: bold;
        padding: 10px 25px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }
    .texto-claim {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
    }


/* MODAL LOGIN FIN*/
/* B O T O N WHATSAPP*/
        #whatsapp-icon {
            position: fixed;
            bottom: 20px;
            right: 20px;
           
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
        }
        #whatsapp-icon img {
            width: 45px;
            height: 45px;
        }
        #whatsapp-popup {
            display: none;
            position: fixed;
            bottom: 90px;
            right: 20px;
            width: 300px;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            border-radius: 10px;
            overflow: hidden;
            z-index: 1001;
        }
        #whatsapp-popup-header {
            background-color: #128c7e;
            color: white;
            padding: 10px;
            text-align: center;
        }
        #whatsapp-popup-body {
            padding: 20px;
            text-align: center;
        }
        #whatsapp-popup-body button {
            background-color: #128c7e;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        #whatsapp-popup-body button:hover {
            background-color: #25d366;
        }
        #whatsapp-popup-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: transparent;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }