/*-----------------------------------*\
  #main.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  --iteazul: #072D70;
  --iteverde: #A4C639;
  --itefondo: #E1E1E1;
  --dark: #000;
  --violet-blue-crayola: hsla(234, 50%, 64%, 1);
  --dark-cornflower-blue_a7: hsla(214, 88%, 27%, 0.07);
  --white: hsla(0, 0%, 100%, 1);
  --white_a3: hsla(0, 0%, 100%, 0.03);
  --white_a8: hsla(0, 0%, 100%, 0.08);
  --white_a12: hsla(0, 0%, 100%, 0.12);
  --white_a70: hsla(0, 0%, 100%, 0.7);
  --cultured: hsla(220, 20%, 97%, 1);
  --lavender-web: hsla(233, 52%, 94%, 1);
  --cadet-blue-crayola: hsla(220, 12%, 70%, 1);
  --cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
  --charcoal: hsla(218, 22%, 26%, 1);
  --raisin-black: hsla(216, 14%, 14%, 1);
  --light-gray: hsla(0, 0%, 79%, 1);
  --blue-crayola: hsla(219, 72%, 56%, 1);
  --black-coral: hsla(220, 12%, 43%, 1);

  /**
   * typography
   */

  --ff-manrope: 'Poppins', sans-serif;

  --fs-1: calc(2.7rem + 1.38vw);
  --fs-2: calc(2.6rem + .66vw);
  --fs-3: 2.2rem;
  --fs-4: 1.9rem;
  --fs-5: 1.8rem;
  --fs-6: 1.7rem;
  --fs-7: 1.5rem;
  --fs-8: 1.4rem;
  
  --fw-700: 700;

  /** 
   * spacing
   */

  --section-padding: 90px;

  /**
   * box shadow
   */

  --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
  --shadow-2: 0 0 0 0.05rem hsla(214, 88%, 27%, 0.08), 0 0 1.25rem hsla(216, 14%, 14%, 0.06);
  --shadow-3: 0 0 1.25rem hsla(216, 14%, 14%, 0.04);

  /**
   * border radius
   */

  --radius-circle: 50%;
  --radius-pill: 100px;
  --radius-10: 10px;
  --radius-8: 8px;
  --radius-6: 6px;

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 0.3s ease-in-out;

}




/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a,
img,
span,
input,
button,
ion-icon { display: block; }

a {
  color: inherit;
  text-decoration: none;
}

img { height: auto; }

input,
button {
  background: none;
  border: none;
  font: inherit;
}

input { width: 100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

address { font-style: normal; }

html {
  font-family: var(--ff-manrope);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
  color: var(--black-coral);
  font-size: 1.6rem;
  line-height: 1.7;
}

body.nav-active { overflow: hidden; }

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }

::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }

::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/



#back-blue {
  background: radial-gradient(ellipse at center, var(--iteazul) 0%, rgba(0, 0, 0, 0) 70%);
  width: 1200px;
  height: 800px;
  margin: auto;
  position: relative;
  margin-top: 3em;
  margin-bottom: -3em;
}

#back-blue h2{
  background-color: white;
  width: 1000px; 
  height: 100px; 
  border: 4px solid var(--iteverde); 
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; 
  text-decoration: underline; 
}

#back-blue .images{
  display: flex;
  justify-content: center; 
  align-items: center;
}

#back-blue .carta{
  flex: 10;
  padding: center;
  margin: 80px 170px;
}

#back-blue .title-cartas{
  background-color: white; 
  width: 400px; 
  height: 130px; 
  margin: auto; 
}



 .h5.section-parrafo {
  font-size: 1.0em; 
  display: flex;

}

.h6.section-parrafo {
  font-size: 1.5em; 
  display: flex;

}

.h7.section-parrafo {
  font-size: 1em; 
  display: flex;
  color: #072D70;
}



.btn-cartas,
.btn-outline:is(:hover, :focus-visible) {
  background-color: var(--iteverde);
  color: #fff;
  width: 350px; /* Ajusta el ancho según tus necesidades */
  height: 50px;
  font-size: 1.2em; /* Ajusta el tamaño de la fuente según tus preferencias */
  text-align: center; /* Centra el texto horizontalmente */
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 20px;
}

.btn-cartas:hover {
  background-color: var(--iteazul); /* Cambia el color de fondo a azul */
  color: var(--iteverde); /* Cambia el color del texto a amarillo */
}

.container { padding-inline: 16px; }

.social-list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-link {
  font-size: 2rem;
  transition: var(--transition-1);
}

.social-link:is(:hover, :focus-visible) { transform: translateY(-3px); }

.section { padding-block: var(--section-padding); }

.has-bg-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#agrandar {
  font-size: 20px;
}


.h1,
.h2,
.h3,
.h4,
.h5 {
  color: var(--iteazul);
  font-weight: var(--fw-700);
  line-height: 1.5;
}


.p1 {
  color: white;
}

.h1 { font-size: var(--fs-1); }

.h2 { font-size: var(--fs-2); }

.h3 { font-size: var(--fs-3); }

.h4 { font-size: var(--fs-4); }

.h5 { font-size: var(--fs-6); }


.btn {
  color: var(--white);
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  border: 2px solid var(--white);
  max-width: max-content;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  transition: var(--transition-1);
  will-change: transform;
}

.btn:is(:hover, :focus-visible) { transform: translateY(-4px); }

/* BOTON - AGENDAR DEMO */
.mas-info{
  /* background-color: red; */
  margin-top: 15px;
}
.agendar-demo{
  margin-top: 25px;
}

.agendar-demoIns{
  margin-top: 25px;
}
.agendar-demoIns2{
  margin-top: 25px;
}
.btnfinal{
  margin-bottom: 20px;
}

.btn-primary,
.btn-outline:is(:hover, :focus-visible) {
  background-color: var(--iteverde);
  color: #fff;
  margin-top: 1px;
}
.btn-primary-index:is(:hover, :focus-visible) {
  background-color: var(--iteverde);
  color: #fff;
  margin-top: -120%;
}

.btn-open,
.btn-outline:is(:hover, :focus-visible) {
  background-color: var(--iteazul);
  color: #fff;
  margin-top: 1px;
}

.img-holder {
  aspect-ratio: var(--width) / var(--height);
  background-color: var(--light-gray);
  overflow: hidden;
}

.img-cover {
  width: 100%;
  height: 80%;
  object-fit: cover;
  align-items: center;
}

.section-subtitle {
  font-size: var(--fs-7);
  text-transform: uppercase;
  color: var(--violet-blue-crayola);
  font-weight: var(--fw-700);
  margin-block-end: 16px;
}

.grid-list {
  display: grid;
  gap: 25px;
}

.w-200 { 
  width: 100%; 
  border-radius: 10px;
}

.w-200-web { 
  width: 100%; 
  border-radius: 10px;
  
}

.w-200-index { 
  width: 50%; 
  border-radius: 10px;
}

.w-200-index-mobile{
  width: 328px; 
  height: 210px;
  border-radius: 10px;
}

.w-201 {
    width: 70%;
    border-radius: 10px;
    margin-bottom: -25%; /* Ajusta el valor según sea necesario */
 }


 .w-100 { width: 600; 
  border-radius: 10px;}




/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header .btn { display: none; }

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-block: 20px;
  box-shadow: var(--shadow-1);
  z-index: 4;
}

.header.active {
  background-color: var(--white);
  position: fixed;
  animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.header.active .logo-light,
.header .logo-dark { display: none; }

.header .logo-light,
.header.active .logo-dark { display: block; }

.nav-open-btn {
  font-size: 3.5rem;
  color: var(--charcoal);
}

.nav-open-btnIn {
  font-size: 3.5rem;
  color: var(--charcoal);
}

.header.active .nav-open-btn { color: var(--charcoal); }

.header.active .nav-open-btnIn { color: var(--charcoal); }

.navbar {
  position: fixed;
  top: 0;
  left: -300px;
  background-color: var(--itefondo);
  color: var(--dark);
  max-width: 300px;
  width: 100%;
  height: 100vh;
  padding: 30px;
  padding-block-end: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 2;
  visibility: hidden;
  transition: var(--transition-3);
}

.navbar.active {
  visibility: visible;
  transform: translateX(300px);
}

.navbar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-iteprevengo img,
.navbar-top .logo img {
  height: 60px;
  width: auto;
  border-radius: 8px;
}

@media (max-width: 768px){
  .logo-iteprevengo img,
  .navbar-top .logo img {
    height: 40px;
  }
}

.nav-close-btn {
  background-color: var(--charcoal);
  color: var(--white);
  font-size: 2rem;
  padding: 6px;
  border-radius: var(--radius-circle);
  transition: var(--transition-1);
}

.nav-close-btn ion-icon { --ionicon-stroke-width: 50px; }

.nav-close-btn:is(:hover, :focus-visible) { background-color: var(--iteverde); }

.navbar-list { margin-block-end: auto; }

.navbar-link-mobile {

  font-weight: var(--fw-700);
  font-size: 20px;
  padding-block: 6px;
}

.navbar-link-mobile-nosotros {
  font-weight: var(--fw-700);
  font-size: 25px;
  padding-block: 6px;
}

.navbar-link {
  font-weight: var(--fw-700);
  font-size: 25px;
  padding-block: 6px;
}

.contact-link { transition: var(--transition-1); }

.contact-link:is(:hover, :focus-visible) { color: var(--iteverde); }

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--raisin-black);
  pointer-events: none;
  opacity: 0;
  transition: var(--transition-1);
}


.overlay.active {
  pointer-events: all;
  opacity: 0.8;
}

.custom-select{
  margin-top: -35px;
  font-size: 18px;
}

@media (max-width: 991px){
  .navbar{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 100%;
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 18px 20px 24px;
    gap: 0;
    border-radius: 0;
    box-shadow: 0 12px 28px rgba(7, 45, 112, 0.18);
    transform: translateX(0);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .navbar.active{
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .navbar-top{
    justify-content: flex-end;
    margin-bottom: 6px;
  }

  .navbar-top .nav-close-btn{
    background-color: #fff;
    color: var(--iteazul);
    border: 2px solid var(--iteazul);
    border-radius: 8px;
    font-size: 1.6rem;
    padding: 4px;
  }

  .navbar-top .nav-close-btn:is(:hover, :focus-visible){
    background-color: var(--iteazul);
    color: #fff;
  }

  .navbar-list{ margin-block-end: 0; }

  .custom-select{
    margin-top: 0;
    font-size: inherit;
  }

  .navbar-link-mobile{
    display: block;
    padding: 16px 4px;
    color: var(--iteazul);
    font-weight: 700;
    border-bottom: 1px solid #e7ebf2;
  }

  .navbar-link-mobile:is(:hover, :focus-visible){
    color: #8CC63F;
  }

  .navbar-cta-mobile{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    background-color: var(--iteazul);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 20px;
    border-radius: 50px;
    text-decoration: none;
  }

  .navbar-cta-mobile:is(:hover, :focus-visible){
    background-color: #051f4d;
  }
}

.exito1{
  margin: 10px;
  color: #ffffff;
  font-size: 15px;
}
.exito2{
  margin: 10px;
  color: var(--iteazul);
  font-size: 15px;
}




/*-----------------------------------*\
  #SERVICE
\*-----------------------------------*/


.service { text-align: center; }

.service .section-title { margin-block-end: 50px; }
.service .section-title-index { margin-block-end: 50px; }
.service .section-title2 { margin-block-end: 50px; }

.titulo .section-title{
  text-align: center;
}

.titulo .section-title2{
  text-align: center;
}

.titulo .section-title-index{
  text-align: center;
}

.titulo p{
  font-size: 25px;
  text-align: center;
}

.titulo .section-title strong{
   /* text-align: center; */
    color: #f99400;
  }

  .titulo .section-title2 strong{
    /* text-align: center; */
     color: #f99400;
   }

  .titulo .section-title-index strong{
    /* text-align: center; */
     color: #f99400;
   }


   .titulo-inicial .section-title{
    text-align: center;
    margin-bottom: 3%; 
  }
  
  .titulo-inicial-mobile .section-title{
    text-align: center;
    font-size: 23px;

  }
  
  .titulo-inicial-mobile{
    margin-top: -18%;
    margin-bottom: -30%; 
  
  }
  
  .titulo-inicial .section-title strong{
      /* text-align: center; */
       color: #f99400;
     }
  
     .titulo-inicial-mobile .section-title strong{
      /* text-align: center; */
       color: #f99400;
     }
  
  
/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about .container {
  display: grid;
  gap: 50px;
  
  /* background-color: red; */
}

.about .section-title { margin-block-end: 35px; }


/*-----------------------------------*\
  #CTA
\*-----------------------------------*/

.cta { background-color: var(--charcoal); }

.cta .container {
  padding-block: 100px 60px;
  border-block-end: 1px solid var(--cadet-blue-crayola_a20);
}

.cta .section-title {
  color: var(--white);
  margin-block-end: 30px;
}

.cta .btn {
  background-color: var(--violet-blue-crayola);
  color: var(--white);
  border: none;
}



/*-----------------------------------*\
  #CLIENTES
\*-----------------------------------*/

.cliente-titulo{
  text-align: center;
}
.carrusel {
    height: 250px;
    display: flex;
    align-items: center;
    
  }
  
  .carrusel-items {
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 30px 0px;
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.5);
  }
  
  .carrusel-item {
    /* min-width: 300px;
    max-width: 300px;
    height: 150px;
    outline: 2px solid black; */
    cursor: pointer;
  }
  
  .carrusel-item img {
    width: 250px;
    height: 100px;
    
  }

  .carrusel-item:hover {
    transform: scale(1.2);
    transition: 1s;
  }



/* CLIENTES FIN */



/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  background-color: var(--itefondo);
  padding-block: 60px 100px;
  color: var(--charcoal);
}

.footer-brand .footer-text { margin-block: 20px; }

.footer .social-list { color: var(--iteverde);}

.footer-list-title {
  color: var(--dark);
  margin-block-end: 16px;
}

.footer-link {
  padding-block: 4px;
  transition: var(--transition-1);
}

.footer-link:is(:hover, :focus-visible) { color: var(--iteverde); }





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/


@media (max-width:360px){
  .titulo .botoncell{
    /* background-color: red; */
    margin-top: 50%;
  }

}

@media (max-width:360px){
  .titulo .botoncell2{
    /* background-color: red; */
    margin-top: 10%;
  }

  .titulo .botoncellEpp{
    /* background-color: red; */
    margin-top: 40%;
  }

  .titulo .botoncell1{
    margin-top: 10%;
  }


  .titulo .botoncell10{
    margin-top: 2%;
    margin-bottom: 10%;
  }

  .botoncell11{
    margin-top: -50%;
     margin-bottom: 5%;
  }


  .titulo .botoncell3{
    margin-top: 60%;
  }

  .titulo .botoncellinvest{
    margin-top: 60%;
  }

  .titulo .botoncellInves{
    margin-top: 83%;
  }

  .titulo .botoncellInves2{
    margin-top: 800%;
  }

  .titulo .botoncellElecc{
    margin-top: 80%;
  }

  .titulo .botoncell4{
    margin-top: 40%;
  }


}

@media (max-width:415px){
  /* Titulo principal */
  .about .section-title { 
    font-size: 25px;
  }
  /* Descripcion del titulo. */
  .about p{
    /* background-color: red; */
    font-size: 18px;
    text-align: justify;
  }

  /* Titulos de las secciones */
  .respon .section-title{
    font-size: 30px;
  }
  /* Botones de agendar */
  .btn {
    /* background-color: red; */
    font-size: 15px;
  }
  /* Preguntas frecuentes */
  .accordion-item-header{
    /* background-color: red; */
    font-size: 15px;
    line-height: 150%;
    text-align: justify;
  }
  .accordion-item-body-content{
    font-size: 15px;
    text-align: start;
  }

  /* IMAGEN DEBAJO Y TEXTO ENCIMA = TEST*/

 



  .about-banner-index{
    margin-top: 120px;
  }

  .about-banner2{
    margin-top: 150px;
  }

  .about-banner2-index{
    margin-top: 40px;
  }

  .about-banner3{
    margin-top: 120px;
  }

  .cuerpo{
    margin-top: 120px;
  }

 
  .about-content{
    position: absolute;
    margin-top: 20px;
    margin-right: 20px;
  }

  .subtitulo-iteprevengo{
    margin-top: 120%;
    
  }

  .subtitulo-mobile{
    /* background-color: red; */
    margin-top: -120%;
    text-align: justify; /* Justifica el texto */
    font-size: 80%; /* Disminuye el tamaño de la letra al 80% del tamaño original */
    padding: 20px;
  }

  .subtitulo-mobileIns{
    /* background-color: red; */
    margin-top: -130%;
    text-align: justify; /* Justifica el texto */
    font-size: 80%; /* Disminuye el tamaño de la letra al 80% del tamaño original */
    padding: 20px;
  }

  .subtitulo-mobileInves{
    /* background-color: red; */
    margin-top: -80%;
    text-align: justify; /* Justifica el texto */
    font-size: 80%; /* Disminuye el tamaño de la letra al 80% del tamaño original */
    padding: 20px;
  }

  .subtitulo-mobileInves2{
    /* background-color: red; */
    margin-top: -115%;
    text-align: justify; /* Justifica el texto */
    font-size: 80%; /* Disminuye el tamaño de la letra al 80% del tamaño original */
    padding: 20px;
  }

  .subtitulo-mobileElecc{
    /* background-color: red; */
    margin-top: -125%;
    text-align: justify; /* Justifica el texto */
    font-size: 80%; /* Disminuye el tamaño de la letra al 80% del tamaño original */
    padding: 20px;
  }

  .subtitulo-mobileInspecc{
    /* background-color: red; */
    margin-top: -95%;
    text-align: justify; /* Justifica el texto */
    font-size: 80%; /* Disminuye el tamaño de la letra al 80% del tamaño original */
    padding: 20px;
  }

  .subtitulo-mobileLegal{
    /* background-color: red; */
    margin-top: -110%;
    text-align: justify; /* Justifica el texto */
    font-size: 80%; /* Disminuye el tamaño de la letra al 80% del tamaño original */
    padding: 20px;
  }

  .subtitulo-mobildeepp{
    /* background-color: red; */
    margin-top: -80%;
    text-align: justify; /* Justifica el texto */
    font-size: 80%; /* Disminuye el tamaño de la letra al 80% del tamaño original */
    padding: 20px;
  }

  
  .subtitulo-mobileepp{
    /* background-color: red; */
    margin-top: -100%;
    text-align: justify; /* Justifica el texto */
    font-size: 80%; /* Disminuye el tamaño de la letra al 80% del tamaño original */
    padding: 20px;
  }



  .subtitulo-web{
    /* background-color: red; */
    margin-top: 113%;
  }


  .text-iteprevengo{
    text-align: justify;
    color:#072D70;
    margin-left: 30px;
    margin-right: 30px; 
  }

  /* BOTON ABAJO */
  /* .mas-info{
    margin-top: 300px;
  } */
  .boton2{
    margin-top: 48%;
  }

  .boton3{
    margin-top: 48%;
  }

  .botonInv{
    margin-top: 60%;
  }

  .botonIns{
    margin-top: 60%;
  }

  .botonEpp{
    margin-top: 30%;
  }

  /* LOGO */
  /* .logo-iteprevengo{
    background-color: red;
    width: 80%;
  } */

  /* Footer */
  .footer-text{
    /* background-color: red; */
    font-size: 18px;
  }
  .footer-list-title{
    /* background-color: red; */
    font-size: 20px;
  }
  .footer-list{
    /* background-color: red; */
    font-size: 18px;
  }
}
@media (max-width:835px){
  /* Titulo principal */
  .about .section-title { 
    /* background-color: red; */
    font-size: 25px;
  }

  .about .section-title2{ 
    margin-top: -10%;
    font-size: 30px;
  }
  /* Descripcion del titulo. */
  .about p{
    /* background-color: red; */
    font-size: 18px;
    text-align: justify;
  }
}

@media (min-width:836px){
  /* Titulo principal */
  .about .section-title-index { 
    /* background-color: red; */
    font-size: 60px;
  }
}

/**
 * responsive for large than 575px screen
 */

@media (min-width: 575px) {

  /**
   * REUSED STYLE
   */

  .container {
    max-width: 540px;
    width: 100%;
    margin-inline: auto;
  }

}





/**
 * responsive for large than 768px screen
 */

@media (min-width: 768px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * spacing
     */

    --section-padding: 120px;

  }



  /**
   * REUSED STYLE
   */

  .container { max-width: 720px; }

  .grid-list { grid-template-columns: 1fr 1fr; }



  /**
   * HEADER
   */

  .header .btn {
    display: block;
    margin-inline-start: auto;
    padding: 8px 20px;
  }

  .header.active .btn {
    background-color: var(--violet-blue-crayola);
    border-color: var(--violet-blue-crayola);
    color: var(--white);
  }



  /**
   * SERVICE
   */

  .service .section-title {
    max-width: 20ch;
    margin-inline: auto;
  }



  /**
   * ABOUT
   */

  .about .container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

}





/**
 * responsive for large than 992px screen
 */

@media (min-width: 992px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 960px; }



  /**
   * HEADER
   */

  .nav-open-btn,.nav-open-btnIns,
  .navbar > *:not(.navbar-list),
  .overlay { display: none; }

  .navbar,
  .navbar.active {
    all: unset;
    display: block;
    margin-inline: auto 24px;
  }

  .navbar-list {
    display: flex;
    gap: 58px;
  }


  
  .select select {
    font-size: 27px;
    border: none;
    outline: none;
    display: flex;
    text-align: center;
  }
  
  .custom-select {
    position: relative;
    width: 200px; /* Ancho personalizable */
    border: 1px solid #ccc;
  }
  
  .select-header {
    padding: 10px;
    cursor: pointer;
  }
  
  .options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    position: absolute;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
  }
  
  .options li {
    padding: 10px;
    cursor: pointer;
  }
  
  .options li:hover {
    background-color: #f9f9f9;
  }
  

  .navbar-link-mobile {
    color: var(--iteazul);
    transition: var(--transition-1);
  }

  .navbar-link-mobile-nosotros {
    color: var(--iteazul);
    transition: var(--transition-1);
  }

  .navbar-link {
    color: var(--iteazul);
    transition: var(--transition-1);
  }

  .navbar-link:is(:hover, :focus-visible) { opacity: 0.7; }

  .header.active .navbar-link { color: var(--charcoal); }

  .header.active .navbar-link:is(:hover, :focus-visible) {
    opacity: 1;
    color: var(--iteverde);
  }



  .header .btn { margin-inline-start: 0; }

  /**
   * CTA
   */

  .cta .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cta .btn { min-width: max-content; }

  .cta .section-title {
    max-width: 30ch;
    margin-block-end: 0;
  }



  /**
   * FOOTER
   */

  .footer .grid-list { grid-template-columns: repeat(4, 1fr); }

}





/**
 * responsive for large than 1200px screen
 */

@media (min-width: 1200px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 1140px; }



  /**
   * SERVICE
   */

  .service .grid-list { grid-template-columns: repeat(3, 1fr); }

  /**
   * FOOTER
   */

  address.footer-text {
    padding-inline-end: 100px;
    margin-block-end: 16px;
  }

}





/**2web
 * responsive for large than 1400px screen
 */

@media (min-width: 1400px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 1320px; }



}

/**
 * WEB-PILARES /DESEMPEÑO /CASO DE EXITO
 */

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

@media (max-width: 768px) {
  .cuerpo img, .titulo-inicial {
    display: none;
  }
}

/**
 * WEB-PLANES Y TARIFAS
 */
 #back-blue {
  transition: all 0.5s; /* Añade una transición suave cuando cambia el tamaño */
  max-width: 100%; /* Asegura que la sección no exceda el 100% del ancho */
  box-sizing: border-box; /* Incluye el padding y el border en el ancho y alto */
}

#back-blue * {
  max-width: 100%; /* Los elementos no pueden exceder el 100% del ancho */
  box-sizing: border-box; /* Incluye el padding y el border en el ancho y alto */
}


@media (max-width: 1033px) {
  #back-blue {
    display: none; /* Oculta la sección cuando la pantalla es menor o igual a 768px */
  }
}


 /**
 * TEXTO-PILAR
 */
@media (min-width: 768px) {
  .text-iteprevengo, .titulo-inicial-mobile {
    display: none;
  }
}

@media (max-width: 768px) {
  .text-iteprevengo, .titulo-inicial-mobile {
    display: block; /* o el valor que desees, como 'inline' o 'inline-block' */
  }
}

 /**
 * PORQUE
 */

@media (max-width: 800px) {
  .circular img {
    width: 90%; /* Hace que la imagen ocupe el 100% del contenedor */
    height: auto; /* Mantiene la proporción de aspecto */
    max-width: 600px; /* Establece un límite máximo para el ancho de la imagen */
  }
}

/**
 * PILAR 
 */
@media (max-width: 768px) {
  .service.respon1 {
    display: none;
  }
}




/**
 * PLANES 
 */
@media (min-width: 768px) {
  .service.respon2 {
    display: none;
  }
}

@media (max-width: 768px) {
  .service.respon2 {
    margin-bottom: -50%;
    margin-top: -30%;
    display: block; 
  }
}


@media (min-width: 768px) {
  .service.respon5 {
    display: none;
  }
}

@media (max-width: 768px) {
  .service.respon5 {
    margin-bottom: -10%;
    display: block; 
  }
}


/**
 *BONUS 
 */

@media (min-width: 768px) {
  .service.respon3 {
    display: none;
  }
}

@media (max-width: 768px) {
  .service.respon3 {
    margin-bottom: -40%;
    display: block; 
  }
}

/**
 * DESEMPEÑO
 */

@media (min-width: 768px) {
  .service.respon4 {
    display: none;
  }
}

@media (max-width: 768px) {
  .service.respon4 {
    margin-bottom: -70%;
    display: block; 
  }
}


/**
 *  CASO_EXITO
 */


@media (min-width: 768px) {
  .service.respon5 {
    display: none;
  }
}

@media (max-width: 768px) {
  .service.respon5 {
    display: block; 
  }
}

.bonus{
  color: #072D70;
  font-size: 15px;
}

/**
 * GIF MOBILE
 */

/* Este estilo oculta la sección cuando la pantalla sea mayor a 1200px de ancho */
@media (min-width: 650px) {
  #gifmobile {
    display: none;
  }
}

/* Este estilo muestra la sección cuando la pantalla sea menor a 800px de ancho */
@media (max-width: 650px) {
  #gifmobile {
    display: block; /* O el valor que corresponda, como 'flex' o 'inline-block' */
  }
}

@media (max-width: 650px) {
  #videoFrame{
    max-width: 100%; /* La imagen y el video no pueden ser más grandes que el contenedor */
    height: auto; 
   
  } 
  }
#videoContainer img{
  max-width: 100%; /* La imagen y el video no pueden ser más grandes que el contenedor */
  height: auto; /* Mantener la proporción de aspecto */
}

#playButton {
  display: flex;
  justify-content: center; /* Centra en el eje horizontal */
  align-items: center; /* Centra en el eje vertical */
}

#playButton img {
  width: 60%; /* La imagen de reproducción debe ocupar el 100% del botón */
  max-width: 100%; /* Asegura que la imagen no supere el tamaño del contenedor */
}


#playButton-index img {
  width: 30%; /* La imagen de reproducción debe ocupar el 100% del botón */
}

/**
 * MODULOS-WEB
 */

@media screen and (max-width: 995px) {
  .select {
    display: none;
  }
}

/**
 * MODULOS-MOBILE
 */

 @media (max-width: 995px) {
  .custom-select {
    display: block; /* Mostrar el elemento cuando la pantalla sea de 995px o menos */
  }
}

@media (min-width: 996px) {
  .custom-select {
    display: none; /* Ocultar el elemento cuando la pantalla sea más grande que 995px */
  }
}




@media screen and (max-width: 460px) {
  .about-banner, .about-banner-index {
    display: none;
  }
}

.about-banner2 {
  position: relative;
}

.about-banner2-index {
  position: relative;
}

.about-banner2 img {
  display: block;
  margin: 0 auto; /* Esto centra la imagen horizontalmente */
}

.about-banner2-index img {
  display: block;
  margin: 0 auto; /* Esto centra la imagen horizontalmente */
}

.about-banner2 a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Asegura que la imagen esté por delante de itePrevengo.jpg */
}

.about-banner2-index a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Asegura que la imagen esté por delante de itePrevengo.jpg */
}

.about-banner3 {
  position: relative;
}

.about-banner3 img {
  display: block;
  margin: 0 auto; /* Esto centra la imagen horizontalmente */
}

@keyframes cambiarColor {
  0%, 100% {
    background-color: var(--iteverde);
  }
  50% {
    background-color: var(--iteazul);
  }
}

#mostrarOcultar {
  color: #fff;
  padding: 10px 20px;
  border: none; 
  border-radius: 20px;
  font-size: 30px;
  cursor: pointer;
  animation: cambiarColor 3s infinite; 
  margin-top: -100px;
}





@media screen and (max-width: 600px) {
  .about-banner2, .about-banner2-index {
    display: block;
  }
}

@media screen and (min-width: 601px) {
  .about-banner2, .about-banner2-index {
    display: none;
  }

}

@media screen and (max-width: 600px) {
  .btn-menu {
    display: block;
  }
}

@media screen and (min-width: 601px) {
  .btn-menu {
    display: none;
  }
}

.section2.about {
  margin-bottom: 13%; /* Puedes ajustar el valor según tus necesidades */
}

.section-mobile.about {
  margin-bottom: 15%; /* Puedes ajustar el valor según tus necesidades */
}


@media (max-width: 600px) {
  .section2.about.titulo {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .section-mobile {
    display: block;
  }
}

@media screen and (min-width: 601px) {
  .section-mobile {
    display: none;
  }
}


@media (max-width: 900px) {
  .subtitulo-iteprevengo {
    display: none;
  }
}

@media (min-width: 900px) {
  .subtitulo-iteprevengo {
    display: block; /* o el valor que desees, como 'inline' o 'inline-block' */
  }
}


@media (max-width: 768px) {
    .agendar-demo, .agendar-demo .btn-primary{
    display: none;
  }
}

@media (min-width: 768px) {
  .subtitulo-mobile, .subtitulo-mobileIns, .subtitulo-mobileLegal, 
  .subtitulo-mobileElecc, .subtitulo-mobileInspecciones, .subtitulo-mobildeepp, .subtitulo-mobileInves, .subtitulo-mobileInves2, .subtitulo-mobileepp{
    display: none;
  }
}

@media (max-width: 768px) {
  .subtitulo-mobile, .subtitulo-mobileIns, .subtitulo-mobileLegal, 
  .subtitulo-mobileElecc, .subtitulo-mobileInspecciones, .subtitulo-mobildeepp, .subtitulo-mobileInves, .subtitulo-mobileInves2, .subtitulo-mobileepp{
    display: block; /* o el valor que desees, como 'inline' o 'inline-block' */
  }
}

@media (max-width: 768px) {
  .agendar-demoIns {
    display: none;
  }

}

@media (min-width: 768px) {
  .nav-open-btnIn {
    display: none;
  }
  .agendar-demoIns2 {
    display: none;
  }
}


.btnfinal-inicio{
  margin-top: 70%;
}

.btnfinal-inicio-index{
  margin-top: -20%;
}

.agendar-demo1{
  margin-top: 60%;

}

@media (min-width: 668px) {
  .agendar-demo1 {
    display: none;
  }
}

@media (max-width: 668px) {
  .agendar-demo1 {
    display: block; 
  }
}
.agendar-demo1 {
  margin-bottom: 10px; /* Ajusta este valor según la separación que desees */
}



.agendar-demo2{
  margin-top: -40%;
}

@media (min-width: 668px) {
  .agendar-demo2, #BotonesFichas {
    display: none;
  }
}

@media (max-width: 668px) {
  .agendar-demo2{
    display: block; 
  }
}

.contenedor-modulos {
  display: none;
}

#BotonesFichas .btnFicha{
  display: flex;
  justify-content: center; 
  align-items: center;
  margin-top: -40%;
  margin-bottom: 20%  ;
}

.fichas-index{
  margin-top: -5%;
}

.fichas-index-medio{
  margin-top: 5%;
  margin-bottom: 5%;
}

#ubicanos {
  color: black;
  width: 100%;
  height: auto;
  margin: auto;
  margin-top: -3.2%;
  position: relative; 
}

#ubicanos .images {
  display: flex;
  justify-content: center;
  align-items: center;
}



#ubicanos .ubicaciones {
  flex: 10;
  padding: center;
  margin: 100px 50px;
  margin-top: 5%;
}


#ubicanos .img-MOBILE2{
  margin-top:-25%;
  margin-bottom: -25%;
}

#index{
  margin-top: -40%;
}

@media screen and (max-width: 768px) {
  #ubicanos .images {
    flex-direction: column;
    align-items: center;
  }

  #ubicanos .ubicaciones {
    margin: 50px 20px;

  }

  #ubicanos .ubicaciones img {
    max-width: 100%;
    height: auto;
  }
}

/* Media Query para ocultar las imágenes en pantallas muy pequeñas */
@media screen and (max-width: 480px) {
  #ubicanos .img-WEB {
    display: none;
  }
}
@media screen and (min-width: 480px) {
  #ubicanos .img-MOBILE1, #ubicanos .img-MOBILE2 {
    display: none;
  }
}

@media (max-width: 768px) {
  .navbar-link {
    display: none;
  }
}

@media screen and (max-width: 995px) {
  .navbar-link-mobile, .navbar-link-mobile-nosotros  {
    display: none;
  }
}

@media (min-width: 768px) {
  .navbar-link-mobile, .navbar-link-mobile-nosotros {
    display: none;
  }
}

@media (max-width: 768px) {
  .navbar-link-mobile , .navbar-link-mobile-nosotros{
    display: block; 
  }
}



@media (max-width: 768px) {


  #title-home{
    margin-bottom: 200px;
  }
  .banner-home{
    display: none;
  }
}

.boton-home {
  display: inline-block;
  padding: 20px;
  margin: 10px;
  background-color: var(--iteverde); /* Color inicial */
  color: #fff; /* Color del texto */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s; /* Agrega una transición suave al color de fondo */
  border-radius: 10px;
  font-weight: bold;
  font-size: 17px;
}

.boton-home:hover {
  background-color: var(--iteazul); /* Cambia el color al pasar el cursor */
}

@media (max-width: 768px) { /* MOBILE */

  .title-modulos {
    font-size: 30px;
    color: #54595f;
  }

  .logo-start{
    width: 70%;
  }  


  .btns-inicio{
    display: none;
  }
  .boton-home {
    display: inline-block;
    padding: 15px;
    margin: 10px;
    background-color: var(--iteverde); /* Color inicial */
    color: #fff; /* Color del texto */
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s; /* Agrega una transición suave al color de fondo */
    border-radius: 10px;
    font-weight: bold;
    font-size: 17px;
  }
  
}



.modulo-header {
  text-align: center;
}

.modulo-header img {
  display: block;
  margin: 0 auto; 
}

.modulos .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}




@media (min-width: 768px) { /*WEB*/
 
  .deslizar{
    display: none;
  }


  .title-modulos {
    font-size: 40px;
    color: #54595f;
  }

  .logo-start{
    width: 90%;
  }  

  .about-banner3, .style-mobile{
    display: none;
  }

}

@media (max-width:415px){
  .style-mobile{
      margin-top: 120px;
    }
  }
  
  .style-mobile {
    position: relative;
  }
  
  .style-mobile img {
    display: block;
    margin: 0 auto; /* Esto centra la imagen horizontalmente */
  }
  




@media (min-width: 768px) {/*WEB*/

  .cuadro {
    width: auto;
    margin: 15px;
    height: 350px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: column; /* Cambiado a disposición de columna */
  }
  
  .cuadro:hover {
    background-color: #61CE70;
  }

  .img-banner{
    width: 274.66px;
    height: 274.58px;  
    margin-top: -7em;
    border-radius: 10px;
  }

  .cuadro iframe{
    width: 274.66px;
    height: 274.58px;  
    margin-top: -7em;
    border-radius: 10px;
  }

.columna-imagen {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  
}


.columna-contenido {
  flex: 2; /* Cambiado a 20% del cuadro */
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}


.columna-contenido  button {
  background-color: var(--iteverde);
  border: 1px solid #000;
  padding: 5px;
  cursor: pointer;
  border-radius: 5px;
  width: 150px;
}
  

  .thought-cloud {

    position: relative;
    background-color: #E6E9EC;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    margin-top: 50px;
    width: 50%;
  }
  
  .cloud-body {
    position: relative;
    z-index: 1;
    color: #54595F;
    font-style: italic; /* Agrega esta línea para hacer el texto en cursiva */
  }
  
  
  .cloud-tail {
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #E6E9EC;
  }

  .cliente-container {
    display: flex;
    align-items: center;
    max-width: 600px; /* Ajusta según sea necesario */
    margin: 0 auto;
    padding: 20px;
  }
  
  .cliente-imagen {
    overflow: hidden;
  }
  
  .cliente-imagen img {
    width: 60%;
    height: auto;
    border-radius: 100px;
  }
  
  
  .cliente-contenido h5 {
    color: #000;
    font-size: 15px;
    text-align: left; /* Alinea el texto a la izquierda */
  }

  .cliente-contenido p {
    font-size: 13px;
    margin: 0;
    text-align: left; /* Alinea el texto a la izquierda */
  }
  
.desempeno-mobile{
  display: none;
}

/*VENTAJAS*/
.seccion-modulos .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.imagen-overlay {
  width: 353.33px; /* Ancho de cada imagen */
  margin: 10px; /* Separación entre las imágenes */
  height: 235.56px; /* Altura de cada imagen */
  overflow: hidden;
}

.imagen-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.img-overlay {
  width: 353.33px; /* Ancho de cada imagen */
  margin: 10px; /* Separación entre las imágenes */
  height: 235.56px; /* Altura de cada imagen */
  overflow: hidden;
}

.img-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}


.seccion-modulos {
  margin: 5em;
}

.titulo-modulos{
  color: var(--iteazul);
  font-size: 40px;
}

.titulo-soporte{
  color: var(--iteazul);
  font-size: 40px;
}
.modulos {
  margin-top: -4em;
}

.title-clientes {
  font-size: 45px;
  margin: 20px;
  color: #072D70;
  font-weight: normal; /* Agrega esta línea para quitar la negrita */
  }
  
  .title-desempeño {
    font-size: 45px;
    margin: 20px;
    color: #072D70;
    font-weight: normal; /* Agrega esta línea para quitar la negrita */
  }

  }


  @media (max-width: 768px) {/*MOBILE*/

    .cuadro {
      width: auto;
      margin: 15px;
      height: 380px;
      background-color: #ffffff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      transition: background-color 0.3s ease;
      display: flex; /* Agregado para que las columnas se ajusten verticalmente */
    }
    
    .cuadro:hover {
      background-color: #61CE70;
    }


    
    .cuadro .img-banner-mobile{
      width: 274.66px;
      height: 274.58px;  
      margin-top: -8em;
      border-radius: 10px;
     
    }

    
    .columna-imagen {
      flex: 1;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
    
    
    
    .columna-contenido h3 {
      margin: 0;
      color: var(--iteazul);
      font-size: 18px;
    }
    
    .columna-contenido p {
      margin: 0;
      color: #54595F;
      font-size: 14.5px;
    }
    
    .cuadro .btn-modulos{
      background-color: var(--iteverde);
      border: 1px solid #000; /* Añade un borde de 1 píxel con color negro */
      padding: 5px;
      cursor: pointer;
      border-radius: 5px;
      font-size: 15px;

    }
    
    

    .thought-cloud {

      position: relative;
      background-color: #E6E9EC;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50%;
      margin-top: 50px;
      width: 90%;
    }
    
    .cloud-body {
      position: relative;
      z-index: 1;
      color: #54595F;
      font-style: italic; /* Agrega esta línea para hacer el texto en cursiva */
      font-size: 15px;
    }
    
    
    .cloud-tail {
      position: absolute;
      bottom: -10px;
      left: 50%;
      margin-left: -10px;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #E6E9EC;
    }
  
    .cliente-container {
      display: flex;
      align-items: center;
      max-width: 600px; /* Ajusta según sea necesario */
      margin: 0 auto;
      padding: 20px;
    }
    
    .cliente-imagen {
      overflow: hidden;
    }
    
    .cliente-imagen img {
      width: 60%;
      height: auto;
      border-radius: 100px;
    }
    
    
    .cliente-contenido h5 {
      color: #000;
      font-size: 15px;
      text-align: left; /* Alinea el texto a la izquierda */
    }
  
    .cliente-contenido p {
      font-size: 13px;
      margin: 0;
      text-align: left; /* Alinea el texto a la izquierda */
    }

    .desempeno-web{
      display: none;
    }

    .desempeno-mobile{
      width: 80%;
    }
    
    /*ventajas mobile*/

    .modulos {
      margin-top: -2em;
    }

    .seccion-modulos {
      margin-top: 2em;
    }
    
    .titulo-modulos {
      color: var(--iteazul);
      font-size: 30px;
      text-align: center;
    }

    .titulo-soporte {
      color: var(--iteazul);
      font-size: 30px;
      text-align: center;
    }
    
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; /* Cambiado de space-around a center para centrar en vista móvil */
    }
    
    
    
    
    .imagen-overlay {
      width: 330px; /* Ancho de cada imagen */
      margin: 10px; /* Separación entre las imágenes */
      height: 235.56px; /* Altura de cada imagen */
      overflow: hidden;
    }
    
    .imagen-overlay img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: filter 0.3s ease;
    }
    
    
    .img-overlay {
      width: 330px; /* Ancho de cada imagen */
      margin: 10px; /* Separación entre las imágenes */
      height: 235.56px; /* Altura de cada imagen */
      overflow: hidden;
    }
    
    .img-overlay img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: filter 0.3s ease;
    }

    .title-clientes {
      font-size: 35px;
      margin: 20px;
      color: #072D70;
      font-weight: normal; /* Agrega esta línea para quitar la negrita */
      }

      .title-desempeño {
        font-size: 35px;
        margin: 20px;
        color: #072D70;
        font-weight: normal; /* Agrega esta línea para quitar la negrita */
      }

    }

    .swiper-slide{
      margin-top: -20px;
    }

  

  .title-ventajas {
    font-size: 35px;
    margin: 20px;
    color: #072D70;
    font-weight: normal; /* Agrega esta línea para quitar la negrita */
    }


.title-desempeño {
  font-size: 45px;
  margin: 20px;
  color: #072D70;
  font-weight: normal; /* Agrega esta línea para quitar la negrita */
}

  
.boton-agents {
  display: inline-block;
  padding: 10px 30px;
  margin: 10px;
  background-color: var(--iteverde); /* Color inicial */
  color: var(--iteazul); /* Color del texto */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s; /* Agrega una transición suave al color de fondo y la sombra */
  border-radius: 30px;
  font-weight: bold;
  font-size: 20px;
  box-shadow: 0 0 10px rgba(26, 31, 47, 0); /* Sombras inicialmente transparentes del mismo color que el fondo */
}

.boton-agents:hover {
  background-color: #1A1F2F; /* Cambia el color al pasar el cursor */
  color: white;
  font-weight: bold;
  box-shadow: 10px 10px 10px rgba(26, 31, 47, 0.5); /* Añade una sombra al pasar el cursor del mismo color que el fondo */
}

.boton-style {
  display: inline-block;
  padding: 10px 30px;
  margin: 10px;
  background-color: var(--iteazul); /* Color inicial */
  color: white; /* Color del texto */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s; /* Agrega una transición suave al color de fondo y la sombra */
  border-radius: 30px;
  font-weight: bold;
  font-size: 20px;
  box-shadow: 0 0 10px rgba(26, 31, 47, 0); /* Sombras inicialmente transparentes del mismo color que el fondo */
}

.boton-style:hover {
  background-color: #1A1F2F; /* Cambia el color al pasar el cursor */
  color: white;
  font-weight: bold;
  box-shadow: 10px 10px 10px rgba(26, 31, 47, 0.5); /* Añade una sombra al pasar el cursor del mismo color que el fondo */
}

#cuestions{
  background-color: #F6F6F6;
}

.tecnologias{
  margin-bottom: 10em;
}


.title-banners{
  color: var(--iteazul);
  text-align: justify;
  margin-top:10em;
}


@media (min-width: 768px) {/*WEB*/

  .modulos-MOBILE{
    display: none;
  }
  .title-banners{
    color: var(--iteazul);
    text-align: justify;
    margin-top:2em;
    font-size: 23px;
    margin-left: 18em;
    margin-right: 18em;
    margin-bottom: -5em;
  }

  .ubi{
    margin-right: 400px;
    margin-left: 400px;
  }

  .title-servicios {
    font-size: 42px;
    margin: 20px;
    color: var(--iteverde);
    font-weight: bold; /* Agrega esta línea para quitar la negrita */
  }

  .title-servicios-SS {
    font-size: 42px;
    margin: 20px;
    color: var(--iteverde);
    font-weight: bold; /* Agrega esta línea para quitar la negrita */
  }

}

@media (max-width: 768px) {/*MOBILE*/

.slider-web{
  display: none;
}


/* Estilo base del botón */
#toggleModulesButton {
  background-color: var(--iteverde); /* Color inicial */
  color: white; /* Color del texto */
  border: none;
  padding: 10px 20px;
  border-radius: 15px;
  animation: changeColor 4s infinite; /* Animación de cambio de color */
}

/* Definición de la animación */
@keyframes changeColor {
  0%, 100% {
    background-color: var(--iteverde); /* Color inicial */
    color: white;
  }
  50% {
    background-color: var(--iteazul); /* Color secundario */
    color: var(--iteverde);
  }
}

.title-servicios {
  font-size: 35px;
  margin: 20px;
  color: var(--iteverde);
}

.title-servicios-SS {
  font-size: 28px;
  margin: 20px;
  color: var(--iteverde);
}



  .modulos-WEB{
    display: none;
  }

  .title-banners{
    color: var(--iteazul);
    text-align: justify;
    margin-top:2em;
    margin-bottom:-15em;
    font-size: 15px;
    margin-left: 2em ;
    margin-right: 2em ;
  } 

}



@media (max-width: 768px) {
  .overlayFondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
  }
  
  .overlayFondo img {
    max-width: 100%;
    max-height: 100%;
  }
  
  .overlayFondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
  }
  
  .overlayFondo img {
      width: 100%;
      height: auto;
  }

  .overlayFondo {
    /* ... (código existente) */
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
  }
  
  .overlayFondo img {
    /* ... (código existente) */
    z-index: 10000; /* Asegura que esté por encima de otros elementos */
  }
}



@media (min-width: 768px) {
  .overlayFondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
  }
  
  .overlayFondo img {
    max-width: 100%;
    max-height: 100%;
  }
  
  .overlayFondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
  }
  
  .overlayFondo img {
      width: 50%;
      height: auto;
  }

  .overlayFondo {
    /* ... (código existente) */
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
  }
  
  .overlayFondo img {
    /* ... (código existente) */
    z-index: 10000; /* Asegura que esté por encima de otros elementos */
  }
}

.tarifario{
  justify-content: center;
  align-items: center;
  font-size: 10px;
}




#servicos-brindados .container {
  display: flex; /* Utiliza flexbox para alinear los elementos hijos */
  justify-content: space-around; /* Distribuye los elementos con espacio alrededor */
  flex-wrap: wrap; /* Permite que los elementos hijos se envuelvan cuando no quepan en una sola fila */
  margin: 0 auto; /* Centra el contenedor horizontalmente en la página */
}

/* Estilos para cada bloque de servicio */
.service-block {
  flex: 1 0 30%; /* Permite que los bloques ocupen un tercio del espacio disponible */
  max-width: 400px; /* Establece un ancho máximo para cada bloque de servicio */
  text-align: center; /* Centra el contenido horizontalmente */
  padding: 20px;
  box-sizing: border-box; /* Incluye el padding en el ancho total */

  /* Estilos para las imágenes */
  img {
    max-width: 100%; /* Asegura que las imágenes no excedan el ancho del contenedor */
    height: auto; /* Mantiene la proporción de aspecto de las imágenes */
    display: block; /* Elimina espacios adicionales debajo de las imágenes */
    margin-bottom: 10px; /* Espacio entre las imágenes */
  }

  /* Estilos para el párrafo */
  p {
    text-align: justify; /* Justifica el texto dentro del párrafo */
    font-size: 16px; /* Tamaño de fuente */
    line-height: 1.5; /* Altura de línea */
    margin: 0; /* Elimina márgenes predeterminados */
  }

  /* Estilos para el botón */
  button {
    color: white;
    background-color: var(--iteverde);
    border-radius: 20px;
    padding: 4%;
    text-align: center;
    display: block; /* Convertir el botón en un bloque para centrarlo */
    margin: 0 auto; /* Centra el botón horizontalmente */
    transition: background-color 0.3s, box-shadow 0.3s;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(26, 31, 47, 0);
  }

  /* Estilos para el botón al pasar el cursor */
  button:hover {
    background-color: #1A1F2F;
    font-weight: bold;
    box-shadow: 10px 10px 10px rgba(26, 31, 47, 0.5);
  }
  .icono-services{
    width: 70%;
  }
  .icono-mype{
    width: 33%;
  }
}

/* Estilos adicionales para hacer el diseño responsive */
@media (max-width: 768px) {
  .service-block {
    flex-basis: 100%; /* Cada bloque ocupa el 100% del ancho en dispositivos móviles */
    margin-bottom: 20px; /* Añade espacio entre los bloques */
  }
}





.btn-certificado {
  color: white;
  background-color: var(--iteverde);
  border-radius: 20px;
  padding: 1%;
  text-align: center;
  display: block; /* Convertir el botón en un bloque para centrarlo */
  margin: 0 auto; /* Centra el botón horizontalmente */
  transition: background-color 0.3s, box-shadow 0.3s;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(26, 31, 47, 0);
}

/* Estilos para el botón al pasar el cursor */
.btn-certificado:hover {
  background-color: var(--iteazul);
  font-weight: bold;
  box-shadow: 10px 10px 10px rgba(26, 31, 47, 0.5);
}





/* Estilos para la sección */
#elegirnos {
  padding: 30px 0 60px;
  box-sizing: border-box;
}

#elegirnos .elegirnos-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

#elegirnos .elegirnos-text {
  flex: 1 1 280px;
  max-width: 320px;
}

#elegirnos .elegirnos-title {
  font-size: 42px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0;
}

#elegirnos .elegirnos-title span { display: block; }

#elegirnos .line-navy { color: var(--iteazul); }

#elegirnos .line-green { color: #8CC63F; }

#elegirnos .elegirnos-title-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 20px;
}

#elegirnos .elegirnos-title-divider i {
  display: block;
  background-color: #8CC63F;
  border-radius: 50%;
}

#elegirnos .elegirnos-title-divider i:first-child {
  width: 30px;
  height: 4px;
  border-radius: 4px;
}

#elegirnos .elegirnos-title-divider i:not(:first-child) {
  width: 7px;
  height: 7px;
}

#elegirnos .elegirnos-desc {
  color: #707070;
  font-size: 19px;
  line-height: 1.7;
  margin: 0;
}

#elegirnos .elegirnos-grid {
  flex: 2 1 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px;
}

#elegirnos .elegirnos-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background-color: #fff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 8px 20px rgba(7, 45, 112, 0.08);
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

#elegirnos .elegirnos-item:hover {
  background-color: var(--iteazul);
  transform: scale(1.05);
  box-shadow: 0 18px 34px rgba(7, 45, 112, 0.3);
}

#elegirnos .elegirnos-icon {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}

#elegirnos .elegirnos-item-text h3 {
  color: var(--iteazul);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px;
  transition: color 0.3s ease;
}

#elegirnos .elegirnos-item-text p {
  color: #707070;
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
  transition: color 0.3s ease;
}

#elegirnos .elegirnos-item:hover .elegirnos-item-text h3,
#elegirnos .elegirnos-item:hover .elegirnos-item-text p {
  color: #8CC63F;
}

/* Estilos adicionales para hacer el diseño responsive */
@media (max-width: 768px) {
  #elegirnos {
    padding: 15px 0 40px;
  }

  #elegirnos .elegirnos-content {
    flex-direction: column;
    gap: 40px;
  }

  #elegirnos .elegirnos-text {
    max-width: 100%;
    text-align: center;
  }

  #elegirnos .elegirnos-title-divider {
    justify-content: center;
  }

  #elegirnos .elegirnos-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}





/* IMPACTO + CTA */

#impact-cta{
  position: relative;
}

#impact-cta .impact-banner{
  position: relative;
  background-image: linear-gradient(100deg, rgba(7,45,112,0.92) 25%, rgba(20,120,90,0.75) 100%), url('../img/DesingIndex/Fondo-Banner.webp');
  background-size: cover;
  background-position: center;
  padding: 60px 0 110px;
}

#impact-cta .impact-banner-content{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

#impact-cta .impact-title{
  flex: 1 1 260px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
}

#impact-cta .impact-title span{ display: block; }

#impact-cta .impact-title .line-white{ color: #fff; }

#impact-cta .impact-title .line-green{ color: #8CC63F; }

#impact-cta .impact-stats{
  flex: 2 1 560px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

#impact-cta .impact-stat{
  flex: 1 1 120px;
  text-align: center;
}

#impact-cta .impact-icon{
  display: inline-block;
  color: #8CC63F;
  font-size: 46px;
  margin-bottom: 10px;
}

#impact-cta .impact-number{
  color: #8CC63F;
  font-size: 44px;
  font-weight: 700;
  margin: 0 0 6px;
}

#impact-cta .impact-label{
  color: #fff;
  font-size: 16px;
  margin: 0;
}

#impact-cta .cta-card{
  position: relative;
  z-index: 2;
  margin-top: -80px;
  margin-bottom: 70px;
  background-color: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 45px rgba(7, 45, 112, 0.18);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
  padding: 26px 32px;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

#impact-cta .cta-card-image{
  flex: 0 0 auto;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #eef7de;
}

#impact-cta .cta-card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

#impact-cta .cta-card-icon{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid #cfe9b8;
  color: #6ba52e;
}

#impact-cta .cta-card-icon ion-icon{
  font-size: 24px;
}

#impact-cta .cta-card-text{
  flex: 1 1 300px;
}

#impact-cta .cta-card-text h3{
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 8px;
}

#impact-cta .cta-card-text h3 span{ display: block; }

#impact-cta .cta-card-text .line-navy{ color: var(--iteazul); }

#impact-cta .cta-card-text .line-green{ color: #8CC63F; }

#impact-cta .cta-card-text p{
  color: #707070;
  font-size: 16.5px;
  margin: 0;
}

#impact-cta .cta-card-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--iteazul);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

#impact-cta .cta-card-btn:hover{
  background-color: #051f4d;
}

#impact-cta .cta-card-arrow{
  font-size: 17px;
  line-height: 1;
}

@media (max-width: 900px){
  #impact-cta .cta-card{
    justify-content: center;
    text-align: center;
    padding: 30px 24px;
  }
  #impact-cta .cta-card-text{
    text-align: center;
  }
}

@media (max-width: 768px) {
  #impact-cta .impact-banner{
    padding: 40px 0 150px;
  }
  #impact-cta .impact-banner-content{
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }
  #impact-cta .impact-title{
    flex: none;
    width: 100%;
    font-size: 32px;
  }
  #impact-cta .impact-stats{
    flex: none;
    width: 100%;
    justify-content: center;
  }
  #impact-cta .impact-stat{
    flex: 1 1 45%;
  }
  #impact-cta .cta-card{
    margin-top: -120px;
    flex-direction: column;
    border-radius: 18px;
    gap: 10px;
    padding: 24px 22px;
  }
  #impact-cta .cta-card-image{
    width: 170px;
    height: 170px;
  }
  #impact-cta .cta-card-icon{
    margin-top: -4px;
  }
  #impact-cta .cta-card-text{
    flex: none;
    width: 100%;
  }
  #impact-cta .cta-card-text h3{
    margin-bottom: 4px;
  }
}



/*Consultoria*/


.consultoria{
  margin-top: 8em;
}

.consultoria .container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.colum-one {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
}

.colum-two {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
}

.titulo-colum-two{
  color: var(--iteazul);
  font-size: 27px;
}

.titulo-colum-two strong{
  color: var(--iteverde);
}

.points-colum-two {
  text-align: justify;
  font-size: 17px;
  color: #000;
}


/* Estilos para pantallas grandes */
@media only screen and (min-width: 768px) {
  .img-colum-one {
    width: 100%;
    height: auto; /* Ajusta automáticamente la altura en función del ancho */
    align-self: center; /* Alinea verticalmente la imagen al centro */
  }

  .colum-one {
    order: 1;
    padding: 25px; /* Añade un espacio interno de 20px */
    margin-right: 50px; /* Añade un margen derecho de 10px entre las columnas */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
  }

  .colum-two {
    order: 2;
    padding: 25px; /* Añade un espacio interno de 20px */
    margin-left: 50px; /* Añade un margen izquierdo de 10px entre las columnas */
  }
}

/* Estilos para pantallas pequeñas */
@media only screen and (max-width: 767px) {
  .consultoria{
    margin-top: 5em;
  }

  .img-colum-one {
    width: 100%;
    height: auto;
    align-self: center;
  }

  .titulo-colum-two {
    color: var(--iteazul);
    font-size: 27px;
    text-align: center;
  }

  .colum-one,
  .colum-two {
    flex: 1 0 100%; /* Ocupar todo el ancho en pantallas pequeñas */
    padding: 20px;
    box-sizing: border-box;
    margin: 0; /* Eliminar márgenes entre columnas en pantallas pequeñas */
  }
}


/*Anuncio*/

  .anuncio {
    margin-top: 2em;
  }
  .anuncio .title-anuncio{
    text-align: center;
    color: var(--iteazul);
    font-size: 28px;
  }


  /*Supervisión*/
     .cotent-columns{
      margin-top: 4em;
      background-color: #f1f1f1;
      
     }

     .titulo-colum-left{
      color: var(--iteazul);
     }

     .points-colum-left {
      color: #000;
     }




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

      .titulo-colum-left {
        color: var(--iteazul);
        font-size: 27px;
        text-align: center;
      }

      .points-colum-left{
        margin: 17px;
      }

      .cotent-columns{
        margin-bottom: 10em;
       }
       .colum-rigth
       {
        width: 100%;
       }
    }


    /*MYPE*/

    .mype {
      margin-top: 2em;
      background-color: #E1E1E1;
      padding: 20px;
    }

    
    .mype .container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }
    
    .two-left {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
    }
    
    .one-rigth {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
    }
  

    .titulo-colum-two-left {
      color: var(--iteazul);
      font-size: 35px;
    }
    
    .titulo-colum-two-left strong {
      color: var(--iteverde);
    }
    
    .points-colum-two-left {
      text-align: justify;
      font-size: 20px;
      color: #000;
    }
    
    /* Estilos para pantallas grandes */
    @media only screen and (min-width: 768px) {
      .img-colum-one-rigth {
        width: 100%;
        height: auto; /* Ajusta automáticamente la altura en función del ancho */
        align-self: center; /* Alinea verticalmente la imagen al centro */
      }
    
      .two-left {
        order: 1;
        padding: 25px; /* Añade un espacio interno de 20px */
        margin-right: 50px; /* Añade un margen derecho de 10px entre las columnas */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centra el contenido verticalmente */
      }
    
      .one-rigth {
        order: 2;
        padding: 25px; /* Añade un espacio interno de 20px */
        margin-left: 50px; /* Añade un margen izquierdo de 10px entre las columnas */
      }
    }
    
    /* Estilos para pantallas pequeñas */
    @media only screen and (max-width: 767px) {
      .mype {
        margin-top: 5em;
      }
    
      .img-colum-one-rigth {
        width: 100%;
        height: auto;
        align-self: center;
      }
    
      .titulo-colum-two {
        color: var(--iteazul);
        font-size: 27px;
        text-align: center;
      }
    
      .two-left,
      .one-rigth {
        flex: 1 0 100%; /* Ocupar todo el ancho en pantallas pequeñas */
        padding: 10px;
        box-sizing: border-box;
        margin: 0; /* Eliminar márgenes entre columnas en pantallas pequeñas */
      }
    }

    .boton-blue-efect {
      display: inline-block;
      padding: 10px 30px;
      margin: 10px;
      background-color: var(--iteazul); /* Color inicial */
      color: white; /* Color del texto */
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.3s, box-shadow 0.3s; /* Agrega una transición suave al color de fondo y la sombra */
      border-radius: 30px;
      font-weight: bold;
      font-size: 20px;
      box-shadow: 0 0 10px rgba(26, 31, 47, 0); /* Sombras inicialmente transparentes del mismo color que el fondo */
    }
    
    .boton-blue-efect:hover {
      background-color: #1A1F2F; /* Cambia el color al pasar el cursor */
      color: white;
      font-weight: bold;
      box-shadow: 10px 10px 10px rgba(26, 31, 47, 0.5); /* Añade una sombra al pasar el cursor del mismo color que el fondo */
    }
    

    @media only screen and (max-width: 767px) {
      .boton-blue-efect {
        display: inline-block;
        padding: 10px 30px;
        margin: 10px;
        background-color: var(--iteazul); /* Color inicial */
        color: white; /* Color del texto */
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s, box-shadow 0.3s; /* Agrega una transición suave al color de fondo y la sombra */
        border-radius: 30px;
        font-weight: bold;
        font-size: 15px;
        box-shadow: 0 0 10px rgba(26, 31, 47, 0); /* Sombras inicialmente transparentes del mismo color que el fondo */
      }
    }


  /*Frase*/


  .frase .title-frase{
    text-align: center;
    color: white;
    font-size:30px;
  }
  @media (min-width: 768px) {/*WEB*/
    .frase {
      padding: 7em;
      margin-top: 2em;
      background-color: #1A1F2F;
    }
  }
  
  @media (max-width: 768px) {
    .frase {
      margin-top: 2em; 
      background-color: #1A1F2F;   
    }

    .frase .title-frase{
      text-align: center;
      color: white;
      font-size:25px;
    }
  }



  .titulo-fake {
    color: #54595f;
    font-size: 23px;
  }
  
  @media (min-width: 768px) {
  .consultoria{
    margin-right: 0;
  }
  }
  
  .certificado-ite {
    background-color: var(--iteazul); /* Color de fondo azul */
    padding: 25px; /* Espaciado interno para separar del borde */
    margin-top: 2em;
  }
  
  .certificado-ite .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  
  .block-certificado {
    flex: 1 0 20%; /* Ocupa el 20% del ancho en pantallas grandes */
    padding: 10px; /* Espaciado interno para separar los elementos */
    box-sizing: border-box; /* Incluir el padding en el ancho total */
  }
  
  .block-certificado img {
    width: 50%; /* Imagen ocupa el 100% del ancho del contenedor */
    height: auto; /* Altura automática proporcional al ancho */
    display: block; /* Para centrar la imagen correctamente */
    margin: 0 auto; /* Para centrar la imagen horizontalmente */
  }
  
  .h-certi {
    text-align: center; /* Centrar el texto */
    color: white; /* Color de texto blanco */
  }
  
  /* Estilos para pantallas medianas */
  @media only screen and (max-width: 768px) {
    .block-certificado {
      flex: 1 0 50%; /* Ocupa el 50% del ancho en pantallas medianas */
    }
  }
  
  /* Estilos para pantallas pequeñas */
  @media only screen and (max-width: 480px) {
    .block-certificado {
      flex: 1 0 100%; /* Ocupa el 100% del ancho en pantallas pequeñas */
    }
  }
  
  
  .resultados-ite {
    margin-top: 3em;
  }
  
  .resultados-ite .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around; /* Distribuir elementos uniformemente */
    flex-wrap: wrap;
  }
  
  .block-resultados {
    flex: 1 0 30%; /* Ocupa el 30% del ancho en pantallas grandes */
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
  }
  .title-resultado{
    color: var(--iteazul);
    text-align: center;
    font-size: 40px;
  }
  
  .block-resultados img {
    width: 60%; /* Imagen ocupa el 80% del contenedor */
    height: auto; /* Altura automática */
    border-radius: 50%; /* Borde redondeado para imagen circular */
    display: block; /* Para centrar la imagen correctamente */
    margin: 0 auto; /* Para centrar la imagen horizontalmente */
  }
  
  .h-resul {
    font-size: 18px;
    margin-top: 15px;
    font-weight: normal;
    color: #272727;
  }
  
  /* Estilos para pantallas medianas */
  @media only screen and (max-width: 768px) {
    .block-resultados {
        flex: 1 0 45%; /* Ocupa el 45% del ancho en pantallas medianas */
    }
  }
  
  /* Estilos para pantallas pequeñas */
  @media only screen and (max-width: 480px) {
    .block-resultados {
        flex: 1 0 100%; /* Ocupa el 100% del ancho en pantallas pequeñas */
    }
  }





      .dropdown {
        position: relative;
        display: inline-block;
      }
      
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }
      
      .dropdown-content a {
        font-size: 15px;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        /* Establecer estilos para el dropbtn */
        background-color: transparent; /* Fondo transparente */
        border: none; /* Sin borde */
        cursor: pointer; /* Cambiar cursor a pointer */
        outline: none; /* Quitar el contorno al enfocar */
      }
      
      .dropdown-content a:hover {
        background-color: #f1f1f1;
        color: var(--iteverde);
      }           
      
      .dropbtn{
        background: none;
        border: none;
      }

      .sub-select{
        text-align: center;
        margin-left: 15px;
        color: var(--iteazul);
        font-weight: bold;
      }

      .sele-style{
        color: var(--iteazul);
        font-weight: bold;
      }

      .sele-etiquet{
        color: black;
      }


      /**** 

      Términos

      ****/

      @media (min-width: 768px) {
        .terminos-condiciones{
          margin-top: 8em;
        }
        }

        @media (max-width: 768px) {
          .terminos-condiciones{
            margin-top: 5em;
          }
          }
       @media (max-width: 768px) {
        .seccion-termino p {
          font-size: 15px;
          text-align: justify;
        }
        .seccion-termino h3{
          font-size: 20px;
        }
          }

      .h1-terminos {
        color: #000;
        font-size: 30px;
      }

      .seccion-termino{
        margin-top: 1em;
        color: #444444;
      }

      .seccion-termino h3{
        font-size: 25px;
      }

      .seccion-termino p {
        text-align: justify;
      }
    
      /****

      Certificados

      *****/

/* Estilos base */

.busqueda-certi .container{
 max-width: 80%;
}

.busqueda-certi{
  color: black;
}
.busqueda-certi h2 {
  color: var(--iteazul);
  font-size: 25px;
}

.busqueda-certi h3 {
  color: #444444;
}

.busqueda-certi input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%; /* Ancho completo por defecto */
  max-width: 300px; /* Máximo ancho para mantener el diseño */
  box-sizing: border-box; /* Incluir padding y borde en el ancho total */
}

.btn-consultar {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #ccc;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-consultar:hover {
  background-color: var(--iteverde);
  color: white;
}

/* Media query para pantallas más grandes (mínimo 768px) */
@media (min-width: 768px) {
  .busqueda-certi {
    margin-top: 12em;
    margin-bottom: 10em;
    
  }

  .busqueda-certi h2 {
    font-size: 45px;
  }

  .busqueda-certi h3 {
    font-size: 27px;
  }

  .busqueda-certi h4 {
    font-size: 25px;
}


.busqueda-certi p{
  font-size: 21px;
  color: #ffffff;
  font-weight: 800;
}

.busqueda-certi p strong{
  color: #000000;
  font-size: 25px;
}

.busqueda-certi strong{
  font-size: 19px;
  color: var(--iteazul);
  font-weight: 600;
}



.busqueda-certi h4 strong{
  font-size: 25px;
}

/* Estilos para estado 'APROBADO' */
/* .busqueda-certi .label_gray.aprobado {
  display: inline-block;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
  color: white;
} */

/* Estilos para estado 'DESAPROBADO' */
/* .busqueda-certi .label_gray.desaprobado {
  display: inline-block;
  background-color: red;
  border-radius: 10px;
  padding: 5px;
  color: white;
} */



  /* Ajuste del ancho del input */
  .busqueda-certi input[type="text"] {
    width: 30%; /* Cambiar el ancho según tus necesidades */
    max-width: 100%; /* Ancho máximo */
  }

  .btn-consultar {
    margin-top: 0; /* Eliminar el margen superior adicional */
  }
}

/* Media query para pantallas más pequeñas (máximo 768px) */
@media (max-width: 768px) {
  .busqueda-certi {
    margin-top: 5em;
  }

  .busqueda-certi p{
    color: #ffffff;

  }

  .busqueda-certi p strong{
    color: #000000;

  }

  /* Estilos para estado 'APROBADO' */
/* .busqueda-certi .label_gray.aprobado {
  display: inline-block;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
  color: white;
} */

/* Estilos para estado 'DESAPROBADO' */
/* .busqueda-certi .label_gray.desaprobado {
  display: inline-block;
  background-color: red;
  border-radius: 10px;
  padding: 5px;
  color: white;
} */

  /* Ajustes adicionales si es necesario para pantallas pequeñas */
}

@media (max-width: 768px) {
  .busqueda-certi h2 {
    font-size: 30px;

  }

  .busqueda-certi h3 {
    font-size: 17px;
  }

  .busqueda-certi h4 {
    font-size: 20px; 
}



.busqueda-certi p{
  font-size: 17px;
  color: #ffffff;
  font-weight: 800;
}

.busqueda-certi strong{
  font-size: 17px;
  color: var(--iteazul);
  font-weight: 600;
}

.busqueda-certi span {
  font-size: 17px;
  display: inline-block; /* Hace que el span se comporte como un bloque en línea */
  background-color: var(--iteverde); /* Establece el color de fondo del contenedor */
  border-radius: 10px;
  padding: 5px; /* Ajusta el relleno alrededor del contenido */
  color: white; /* Establece el color del texto dentro del span */
}


}

/* Estilo para ocultar el ícono de carga por defecto */
.hide {
  display: none;
}


.section-course-complete{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


 .table-sections {
  margin-bottom: 20px;
  width: 33%;
  position: relative;
  padding: 20px;
  height: auto;
  justify-content: center;
} 


/* Estilo solo para la tabla con la clase .course-table */
.course-table {
  border-collapse: separate; /* Usar borde separado para aplicar border-radius */
  border: 2px solid var(--iteazul); /* Grosor del borde de la tabla */
  width: 100%; /* Ancho completo de su contenedor */
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px; /* Radio de borde para hacerlo redondeado */
  margin: 0 auto; /* Centrar la tabla horizontalmente */
}




.course-table td {
  padding: 10px; 
  vertical-align: top; 
}


.wrapper_course_search {
  padding: 10px; 
}

.section_course_search {
  margin-bottom: 10px; 
}

.title_course_search, .title_certificate_search {
  font-weight: bold; 
}


.title_course_search {
  background-color: #072D70; 
  color: white;
  border: 2px solid #000; 
  padding: 10px; 
  margin-bottom: 10px;
  width: 100%; 
  box-sizing: border-box; 
}


@media (max-width: 1508px) {


  .table-sections {
    margin-bottom: 20px;
    width: 50%;
    position: relative;
    padding: 1px;
    height: auto;
    justify-content: center;
  } 



  /* Estilos para la tabla */
  .course-table {
    border-collapse: separate; /* Usar borde separado para aplicar border-radius */
    border: 2px solid var(--iteazul); /* Grosor del borde de la tabla */
    width: 100%; /* Ancho completo de su contenedor */
    height: 100%;
    background-color: #ffffff;
    border-radius: 10px; /* Radio de borde para hacerlo redondeado */
    margin: 0 auto; /* Centrar la tabla horizontalmente */
  }
  
  
  .course-table p{
    text-align: center; /* Alinear contenido de la tabla al centro */
     }

  .course-table td {
    padding: 1px; 
    vertical-align: top; 
  }
  
  
  .wrapper_course_search {
    padding: 10px; 
  }
  
  .section_course_search {
    margin-bottom: 10px; 
  }
  
  .title_course_search, .title_certificate_search {
    font-weight: bold; 
  }
  
  
  .title_course_search {
    background-color: #072D70; 
    color: white;
    border: 2px solid #000; 
    padding: 10px; 
    margin-bottom: 10px;
    width: 100%; 
    box-sizing: border-box; 
  }

}



@media (max-width: 968px) {

  .busqueda-certi .container{
    max-width: 100%;
   }

  .table-sections {
    margin-bottom: 10px;
    width: 100%;
  } 

  /* Estilos para la tabla */
  .course-table {
    border-collapse: separate; /* Usar borde separado para aplicar border-radius */
    border: 2px solid var(--iteazul); /* Grosor del borde de la tabla */
    width: 100%; /* Ancho de la tabla (ajustar según tus necesidades) */
    background-color: #ffffff;
    border-radius: 10px; /* Radio de borde para hacerlo redondeado */
    font-size: 17px;
  }


}


      /****

      ANIMACIONES

      *****/



      
/*banners*/



#banners .card-image-desempeno{
  width: 103%;
  height: auto;
  margin-top: 4em;
}

#hero-banner{
  width: 100%;
  margin-left: 0;
  margin-top: 40px;
  padding: 0;
  overflow: hidden;
}

#hero-banner .card-image-desempeno{
  width: 100%;
  height: auto;
}

#hero-banner .card-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: cover;
}

@media (max-width: 768px){
  #hero-banner{
    margin-top: 15px;
  }
}


/* HERO PRINCIPAL */

#hero-main{
  width: 100%;
  margin-top: 90px;
  padding: 40px 0 20px;
  overflow: hidden;
  box-sizing: border-box;
}

#hero-main .hero-main-content{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 4vw;
  gap: 60px;
  box-sizing: border-box;
}

#hero-main .hero-text{
  flex: 1 1 460px;
  min-width: 0;
  max-width: 560px;
}

#hero-main .hero-text h1{
  font-size: 50px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 20px;
}

#hero-main .hero-text h1 span{
  display: block;
}

#hero-main .line-navy{ color: var(--iteazul); }

#hero-main .line-green{ color: #8CC63F; }

#hero-main .hero-text p{
  color: #707070;
  font-size: 19px;
  line-height: 1.6;
  text-align: justify;
  max-width: 520px;
  margin: 0 0 30px;
}

#hero-main .hero-text p strong{
  color: #3a3a3a;
}

#hero-main .hero-btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--iteazul);
  color: #fff;
  font-weight: 700;
  padding: 16px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: var(--transition-1, background-color 0.3s ease);
}

#hero-main .hero-btn:hover{
  background-color: #051f4d;
}

#hero-main .hero-btn-arrow{
  font-size: 20px;
  line-height: 1;
}

#hero-main .hero-image{
  position: relative;
  flex: 1 1 460px;
  max-width: 620px;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 90px;
}

#hero-main .hero-dots{
  position: absolute;
  top: 4%;
  left: 0;
  width: 8%;
  aspect-ratio: 1;
  background-image: radial-gradient(#8CC63F 2.5px, transparent 2.5px);
  background-size: 14px 14px;
  opacity: 0.6;
  z-index: 1;
}

#hero-main .hero-blob{
  position: absolute;
  top: -4%;
  right: 2%;
  width: 65%;
  height: 78%;
  background-color: #eef7de;
  border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  z-index: 0;
}

#hero-main .hero-photo{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 12px;
}

#hero-main .hero-features{
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
  max-width: 500px;
  background-color: var(--iteazul);
  border-radius: 24px 24px 24px 60px;
  display: flex;
  padding: 20px 12px;
  box-shadow: 0 15px 30px rgba(7, 45, 112, 0.25);
}

#hero-main .hero-feature{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 8px;
  position: relative;
}

#hero-main .hero-feature + .hero-feature::before{
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.25);
}

#hero-main .hero-feature img{
  width: 48px;
  height: 48px;
}

#hero-main .hero-feature span{
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 992px){
  #hero-main .hero-text h1{ font-size: 34px; }
  #hero-main .hero-image{ flex: 1 1 420px; }
}

@media (max-width: 768px){
  #hero-main{ margin-top: 90px; padding: 30px 0 30px; }
  #hero-main .hero-main-content{ padding: 0 20px; gap: 60px; }
  #hero-main .hero-text{ text-align: center; }
  #hero-main .hero-text h1{ font-size: 40px; }
  #hero-main .hero-text p{ margin-inline: auto; }
  #hero-main .hero-btn{ margin: 0 auto; padding: 14px 22px; font-size: 15px; gap: 8px; white-space: nowrap; }
  #hero-main .hero-image{ padding-bottom: 90px; }
  #hero-main .hero-features{ border-radius: 24px; padding: 16px 6px; }
  #hero-main .hero-feature span{ font-size: 11.5px; }
  #hero-main .hero-feature img{ width: 38px; height: 38px; }
}

@media (max-width: 480px){
  #hero-main .hero-text h1{ font-size: 32px; }
  #hero-main .hero-features{ flex-wrap: wrap; row-gap: 14px; }
  #hero-main .hero-feature{ flex: 1 1 33%; }
  #hero-main .hero-btn{ padding: 13px 18px; font-size: 14px; }
}




@media (min-width: 768px) { 
.banners {
  display: flex;
  flex-wrap: wrap;
}

.banners a {
  position: relative;
  overflow: hidden;
  margin: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.banners a:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Cambiar a tu preferencia de sombra */
}

.banners img {
  max-width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

}




#house {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#house:hover {
  transform: scale(1.05) translateY(-10px); /* Ajusta los valores según tus preferencias */
  
}


/* titulos*/

.title-clientes, .title-desempeño, .plains, .plains1, .title-banners, .titulo-modulos, .title-ventajas, .titulo-soporte {
  opacity: 0;
}

.title-clientes.visible, .title-desempeño.visible, .plains.visible, .plains1.visible, .title-banners.visible, .titulo-modulos.visible, .title-ventajas.visible, .titulo-soporte.visible{
  animation: fadeIn 1.5s ease-in-out forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



/*imgs*/

.efect {
  opacity: 0; /* Inicialmente establece la opacidad a cero para que la imagen sea invisible */
  transform: scale(0.5); /* Inicialmente establece el tamaño a la mitad */
}

.efect.visible{ 
  animation: aparecer 1s ease-out forwards; /* Nombre de la animación, duración, función de tiempo y retención del estado final */
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


.efect2 {
  opacity: 0; /* Inicialmente establece la opacidad a cero para que la imagen sea invisible */
  transform: translateY(50px); /* Inicialmente establece la posición vertical 50px hacia abajo */
}

.efect2.visible{ 
  animation: salirDesdeAbajo 0.5s ease-out forwards; /* Nombre de la animación, duración, función de tiempo y retención del estado final */
}

@keyframes salirDesdeAbajo {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}






/*botones*/


.button-left, .button-right, .btn-left, .btn-right, .BOT-right, .BOT-left, .BT-right, .BT-left {
  opacity: 0;
  transform: translateX(0);
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.button-left.visible, .btn-left.visible, .BOT-left.visible, .BT-left.visible {
  animation-name: fadeInLeft;
}

.button-right.visible, .btn-right.visible, .BOT-right.visible, .BT-right.visible {
  animation-name: fadeInRight;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.cart-reu.visible , .cart-coti.visible{
  animation: bounce 2s ease 1;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

.cart-reu:active {
  transform: scale(0.95);
}


.cart-coti:active {
  transform: scale(0.95);
}


/* SERVICIOS - Consultorías / Capacitaciones */

#servicos-brindados{
  padding: 30px 0 30px;
}

#servicos-brindados .services-title{
  font-size: 46px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
}

#servicos-brindados .services-title span{
  display: block;
}

#servicos-brindados .services-title .line-navy{ color: var(--iteazul); }

#servicos-brindados .services-title .line-green{ color: #8CC63F; }

#servicos-brindados .services-title-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 45px;
}

#servicos-brindados .services-title-divider i{
  display: block;
  background-color: #8CC63F;
  border-radius: 50%;
}

#servicos-brindados .services-title-divider i:first-child{
  width: 34px;
  height: 4px;
  border-radius: 4px;
}

#servicos-brindados .services-title-divider i:not(:first-child){
  width: 8px;
  height: 8px;
}

#servicos-brindados .services-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 130px;
  max-width: 1100px;
  margin: 0 auto;
}

#servicos-brindados .service-card{
  flex: 1 1 340px;
  max-width: 380px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(7, 45, 112, 0.06);
  overflow: hidden;
  text-align: left;
}

#servicos-brindados .service-card-image{
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

#servicos-brindados .service-card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#servicos-brindados .service-card-body{
  padding: 20px 24px 28px;
}

#servicos-brindados .service-icon-badge{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #8CC63F;
  margin-top: -72px;
  margin-bottom: 14px;
  box-shadow: 0 6px 14px rgba(140, 198, 63, 0.4);
}

#servicos-brindados .service-icon-badge ion-icon{
  color: #fff;
  font-size: 28px;
}

#servicos-brindados .service-card-title{
  color: var(--iteazul);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
}

#servicos-brindados .service-card-text{
  color: #707070;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 18px;
}

#servicos-brindados .service-card-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--iteazul);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #d8dee8;
  border-radius: 50px;
  padding: 10px 20px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#servicos-brindados .service-card-link:hover{
  background-color: var(--iteazul);
  color: #fff;
  border-color: var(--iteazul);
}

#servicos-brindados .service-card-link:hover .service-card-arrow{
  color: #fff;
}

#servicos-brindados .service-card-arrow{
  color: #8CC63F;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
}

#servicos-brindados .service-card-link:hover .service-card-arrow{
  transform: translateX(4px);
}

#servicos-brindados .services-carousel-mobile{
  display: none;
}

@media (max-width: 768px){
  #servicos-brindados{
    padding: 15px 0 40px;
  }
  #servicos-brindados .services-title{
    font-size: 32px;
  }
  #servicos-brindados .services-grid{
    display: none;
  }
  #servicos-brindados .services-carousel-mobile{
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 36px 10px;
    box-sizing: border-box;
  }
  #servicos-brindados .services-carousel-mobile .swiper-wrapper{
    align-items: stretch;
  }
  #servicos-brindados .services-carousel-mobile .service-card{
    max-width: none;
    width: 100%;
  }
  #servicos-brindados .services-carousel-next,
  #servicos-brindados .services-carousel-prev{
    top: 40%;
    width: 32px;
    height: 32px;
    margin-top: 0;
    background-color: #8CC63F;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(7, 45, 112, 0.25);
    color: #fff;
  }
  #servicos-brindados .services-carousel-next:after,
  #servicos-brindados .services-carousel-prev:after{
    font-size: 13px;
    font-weight: 700;
  }
  #servicos-brindados .services-carousel-prev{
    left: 0;
  }
  #servicos-brindados .services-carousel-next{
    right: 0;
  }
}


/* CONSULTORIAS - HERO */

#consultoria-hero{
  margin-top: 90px;
}

#consultoria-hero .consultoria-hero-banner{
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(100deg, rgba(7,45,112,0.97) 0%, rgba(7,45,112,0.93) 32%, rgba(7,45,112,0.35) 68%, rgba(7,45,112,0.05) 100%), url('../img/DesingConsultoria/consultas.png');
  background-size: cover;
  background-position: center;
  padding: 70px 0 90px;
}

#consultoria-hero .consultoria-hero-banner::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 46px;
  background: linear-gradient(90deg, #8CC63F, #6fae2c);
  clip-path: polygon(0 45%, 100% 0%, 100% 100%, 0% 100%);
}

#consultoria-hero .consultoria-hero-content > *{
  max-width: 620px;
}

#consultoria-hero .consultoria-hero-label{
  color: #8CC63F;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

#consultoria-hero .consultoria-hero-title{
  font-size: 46px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 18px;
}

#consultoria-hero .consultoria-hero-title span{ display: block; }

#consultoria-hero .line-white{ color: #fff; }

#consultoria-hero .line-green{ color: #8CC63F; }

#consultoria-hero .consultoria-hero-desc{
  color: #dbe3f0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 0 30px;
}

#consultoria-hero .consultoria-hero-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#consultoria-hero .consultoria-btn-primary,
#consultoria-hero .consultoria-btn-secondary{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#consultoria-hero .consultoria-btn-primary{
  background-color: #8CC63F;
  color: #072D70;
}

#consultoria-hero .consultoria-btn-primary:hover{
  background-color: #79b32f;
}

#consultoria-hero .consultoria-btn-secondary{
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
}

#consultoria-hero .consultoria-btn-secondary:hover{
  background-color: rgba(255,255,255,0.12);
  border-color: #fff;
}

#consultoria-hero .consultoria-features-card{
  position: relative;
  z-index: 2;
  margin-top: -60px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 40px 24px 24px 24px;
  box-shadow: 0 20px 45px rgba(7, 45, 112, 0.15);
  display: flex;
  flex-wrap: wrap;
  padding: 40px 30px;
}

#consultoria-hero .consultoria-feature{
  flex: 1 1 200px;
  text-align: center;
  padding: 0 14px;
}

#consultoria-hero .consultoria-feature-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: #eef7de;
  color: #6ba52e;
  font-size: 24px;
  margin-bottom: 14px;
}

#consultoria-hero .consultoria-feature h3{
  color: var(--iteazul);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}

#consultoria-hero .consultoria-feature p{
  color: #707070;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 992px){
  #consultoria-hero .consultoria-hero-banner{
    background-image: linear-gradient(180deg, rgba(7,45,112,0.55) 0%, rgba(7,45,112,0.9) 55%, rgba(7,45,112,0.97) 100%), url('../img/DesingConsultoria/consultas.png');
    background-position: top center;
    padding: 50px 0 100px;
  }
  #consultoria-hero .consultoria-hero-content{
    text-align: center;
  }
  #consultoria-hero .consultoria-hero-title{
    font-size: 34px;
  }
  #consultoria-hero .consultoria-hero-desc{
    margin-left: auto;
    margin-right: auto;
  }
  #consultoria-hero .consultoria-hero-buttons{
    justify-content: center;
  }
  #consultoria-hero .consultoria-features-card{
    flex-direction: column;
    border-radius: 24px;
    padding: 30px 24px;
    gap: 10px;
  }
}

@media (max-width: 480px){
  #consultoria-hero .consultoria-hero-title{
    font-size: 28px;
  }
  #consultoria-hero .consultoria-btn-primary,
  #consultoria-hero .consultoria-btn-secondary{
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* CONSULTORIAS - SERVICIOS */

#consultoria-servicios{
  padding: 20px 0 30px;
}

#consultoria-servicios .consultoria-servicios-header{
  margin-bottom: 50px;
}

#consultoria-servicios .consultoria-servicios-label{
  color: #8CC63F;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

#consultoria-servicios .consultoria-servicios-title{
  color: var(--iteazul);
  font-size: 42px;
  font-weight: 700;
  margin: 0 0 16px;
}

#consultoria-servicios .consultoria-servicios-divider{
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background-color: #8CC63F;
}

#consultoria-servicios .consultoria-servicios-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

#consultoria-servicios .consultoria-servicio-card{
  flex: 1 1 300px;
  max-width: 400px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(7, 45, 112, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#consultoria-servicios .consultoria-servicio-card:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 40px rgba(7, 45, 112, 0.16);
}

#consultoria-servicios .consultoria-servicio-image-wrap{
  position: relative;
}

#consultoria-servicios .consultoria-servicio-image{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

#consultoria-servicios .consultoria-servicio-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#consultoria-servicios .consultoria-servicio-icon{
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: -27px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  color: #8CC63F;
  font-size: 24px;
  box-shadow: 0 10px 22px rgba(7, 45, 112, 0.45);
}

#consultoria-servicios .consultoria-servicio-body{
  padding: 34px 22px 26px;
}

#consultoria-servicios .consultoria-servicio-body h3{
  color: var(--iteazul);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 14px;
  min-height: 46px;
}

#consultoria-servicios .consultoria-servicio-body p{
  color: #555;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 12px;
}

#consultoria-servicios .consultoria-servicio-body ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

#consultoria-servicios .consultoria-servicio-body li{
  position: relative;
  color: #555;
  font-size: 13px;
  line-height: 1.6;
  padding-left: 16px;
  margin-bottom: 6px;
}

#consultoria-servicios .consultoria-servicio-body li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background-color: var(--iteazul);
}

@media (max-width: 992px){
  #consultoria-servicios .consultoria-servicios-grid{
    justify-content: center;
  }
}

@media (max-width: 768px){
  #consultoria-servicios{
    padding: 50px 0;
  }
  #consultoria-servicios .consultoria-servicios-title{
    font-size: 30px;
  }
  #consultoria-servicios .consultoria-servicios-grid{
    flex-direction: column;
    align-items: center;
  }
  #consultoria-servicios .consultoria-servicio-card{
    max-width: 420px;
    width: 100%;
  }
}


/* MYPE SEGURA */

#mype-segura{
  padding: 30px 0 70px;
}

#mype-segura .mype-segura-card{
  display: flex;
  align-items: center;
  gap: 50px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(7, 45, 112, 0.08);
  padding: 26px;
  max-width: 1100px;
  margin: 0 auto;
}

#mype-segura .mype-segura-photo{
  position: relative;
  flex: 1 1 380px;
  max-width: 420px;
}

#mype-segura .mype-segura-photo img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

#mype-segura .mype-segura-badge{
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #8CC63F;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 24px rgba(140, 198, 63, 0.5);
}

#mype-segura .mype-segura-text{
  flex: 1 1 380px;
}

#mype-segura .mype-segura-label{
  color: #8CC63F;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

#mype-segura .mype-segura-title{
  color: var(--iteazul);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 14px;
}

#mype-segura .mype-segura-desc{
  color: #707070;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 24px;
}

#mype-segura .mype-segura-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #8CC63F;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

#mype-segura .mype-segura-btn:hover{
  background-color: #79b32f;
}

@media (max-width: 992px){
  #mype-segura .mype-segura-card{
    gap: 60px;
  }
  #mype-segura .mype-segura-badge{
    right: -20px;
    width: 110px;
    height: 110px;
    font-size: 19px;
  }
}

@media (max-width: 768px){
  #mype-segura{
    padding: 15px 0 50px;
  }
  #mype-segura .mype-segura-card{
    flex-direction: column;
    text-align: center;
    padding: 20px 20px 28px;
    gap: 60px;
  }
  #mype-segura .mype-segura-photo{
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  #mype-segura .mype-segura-photo img{
    height: 200px;
  }
  #mype-segura .mype-segura-text{
    flex: none;
    width: 100%;
  }
  #mype-segura .mype-segura-badge{
    top: 100%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    font-size: 16px;
  }
  #mype-segura .mype-segura-title{
    font-size: 24px;
  }
  #mype-segura .mype-segura-btn{
    margin: 0 auto;
  }
}


/* CTA FINAL CONSULTORIAS */

#consultoria-cta{
  background-color: #8CC63F;
  padding: 22px 0;
}

#consultoria-cta .consultoria-cta-content{
  display: flex;
  align-items: center;
  gap: 22px;
}

#consultoria-cta .consultoria-cta-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
}

#consultoria-cta .consultoria-cta-text{
  flex: 1 1 auto;
}

#consultoria-cta .consultoria-cta-text h2{
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 4px;
}

#consultoria-cta .consultoria-cta-text p{
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  margin: 0;
}

#consultoria-cta .consultoria-cta-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--iteazul);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

#consultoria-cta .consultoria-cta-btn:hover{
  background-color: #051f4d;
}

@media (max-width: 768px){
  #consultoria-cta .consultoria-cta-content{
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  #consultoria-cta .consultoria-cta-text h2{
    font-size: 17px;
  }
}


/* CONSULTORIAS - SERVICIOS: CARRUSEL MOBILE */

#consultoria-servicios .consultoria-servicios-carousel-mobile{
  display: none;
}

@media (max-width: 768px){
  #consultoria-servicios .consultoria-servicios-grid{
    display: none;
  }
  #consultoria-servicios .consultoria-servicios-carousel-mobile{
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 36px 10px;
    box-sizing: border-box;
  }
  #consultoria-servicios .consultoria-servicios-carousel-mobile .swiper-wrapper{
    align-items: stretch;
  }
  #consultoria-servicios .consultoria-servicios-carousel-mobile .consultoria-servicio-card{
    max-width: none;
    width: 100%;
  }
  #consultoria-servicios .consultoria-servicios-carousel-next,
  #consultoria-servicios .consultoria-servicios-carousel-prev{
    top: 40%;
    width: 32px;
    height: 32px;
    margin-top: 0;
    background-color: #8CC63F;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(7, 45, 112, 0.25);
    color: #fff;
  }
  #consultoria-servicios .consultoria-servicios-carousel-next:after,
  #consultoria-servicios .consultoria-servicios-carousel-prev:after{
    font-size: 13px;
    font-weight: 700;
  }
  #consultoria-servicios .consultoria-servicios-carousel-prev{
    left: 0;
  }
  #consultoria-servicios .consultoria-servicios-carousel-next{
    right: 0;
  }
}


/* CAPACITACION - HERO */

#training-hero{
  margin-top: 90px;
  padding: 50px 0 20px;
  overflow: hidden;
}

#training-hero .training-hero-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 60px;
  max-width: 1320px;
  margin: 0 auto;
}

#training-hero .training-hero-text{
  flex: 1 1 460px;
  max-width: 560px;
}

#training-hero .training-hero-label{
  color: #8CC63F;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

#training-hero .training-hero-title{
  font-size: 48px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 18px;
}

#training-hero .training-hero-title span{ display: block; }

#training-hero .line-navy{ color: var(--iteazul); }

#training-hero .line-green{ color: #8CC63F; }

#training-hero .training-hero-desc{
  color: #707070;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 30px;
}

#training-hero .training-hero-btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #8CC63F;
  color: #072D70;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

#training-hero .training-hero-btn:hover{
  background-color: #79b32f;
}

#training-hero .training-hero-btn-arrow{
  font-size: 18px;
  line-height: 1;
}

#training-hero .training-hero-image{
  position: relative;
  flex: 1 1 460px;
  max-width: 580px;
  display: flex;
  justify-content: center;
}

#training-hero .training-hero-ring{
  position: absolute;
  top: -30px;
  left: -30px;
  width: 60%;
  height: 55%;
  border: 3px solid #cfe9b8;
  border-radius: 50%;
  z-index: 0;
}

#training-hero .training-hero-dots{
  position: absolute;
  width: 90px;
  height: 90px;
  background-image: radial-gradient(#8CC63F 2.5px, transparent 2.5px);
  background-size: 14px 14px;
  opacity: 0.6;
  z-index: 1;
}

#training-hero .training-hero-dots-top{
  top: -10px;
  right: 10%;
}

#training-hero .training-hero-dots-bottom{
  bottom: 6%;
  right: -20px;
}

#training-hero .training-hero-photo{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 200px 24px 200px 24px;
  box-shadow: 0 20px 45px rgba(7, 45, 112, 0.2);
}

@media (max-width: 992px){
  #training-hero .training-hero-title{
    font-size: 38px;
  }
}

@media (max-width: 768px){
  #training-hero{
    margin-top: 90px;
    padding: 30px 0 20px;
  }
  #training-hero .training-hero-content{
    gap: 40px;
    text-align: center;
  }
  #training-hero .training-hero-text{
    max-width: 100%;
  }
  #training-hero .training-hero-desc{
    margin-left: auto;
    margin-right: auto;
  }
  #training-hero .training-hero-title{
    font-size: 28px;
  }
  #training-hero .training-hero-image{
    max-width: 340px;
  }
  #training-hero .training-hero-photo{
    max-width: 340px;
    border-radius: 140px 20px 140px 20px;
  }
}

@media (max-width: 480px){
  #training-hero .training-hero-title{
    font-size: 24px;
  }
  #training-hero .training-hero-btn{
    width: 100%;
    justify-content: center;
  }
}


/* CAPACITACION - FORMACION FLEXIBLE */

#formacion-flexible{
  padding: 15px 0 70px;
}

#formacion-flexible .formacion-flexible-title{
  font-size: 44px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
}

#formacion-flexible .formacion-flexible-title span{ display: block; }

#formacion-flexible .line-navy{ color: var(--iteazul); }

#formacion-flexible .line-green{ color: #8CC63F; }

#formacion-flexible .formacion-flexible-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 45px;
}

#formacion-flexible .formacion-flexible-divider i{
  display: block;
  background-color: #8CC63F;
  border-radius: 50%;
}

#formacion-flexible .formacion-flexible-divider i:first-child{
  width: 34px;
  height: 4px;
  border-radius: 4px;
}

#formacion-flexible .formacion-flexible-divider i:not(:first-child){
  width: 8px;
  height: 8px;
}

#formacion-flexible .formacion-flexible-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 80px;
  max-width: 1250px;
  margin: 0 auto;
}

#formacion-flexible .formacion-flexible-card{
  flex: 1 1 300px;
  max-width: 340px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(7, 45, 112, 0.06);
  text-align: left;
}

#formacion-flexible .formacion-flexible-image-wrap{
  position: relative;
}

#formacion-flexible .formacion-flexible-image{
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

#formacion-flexible .formacion-flexible-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#formacion-flexible .formacion-flexible-icon{
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: -27px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #8CC63F;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 10px 22px rgba(7, 45, 112, 0.3);
}

#formacion-flexible .formacion-flexible-body{
  padding: 40px 22px 26px;
}

#formacion-flexible .formacion-flexible-body h3{
  color: var(--iteazul);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
}

#formacion-flexible .formacion-flexible-body p{
  color: #707070;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 16px;
}

#formacion-flexible .formacion-flexible-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8CC63F;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

#formacion-flexible .formacion-flexible-link span{
  transition: transform 0.2s ease;
}

#formacion-flexible .formacion-flexible-link:hover span{
  transform: translateX(4px);
}

@media (max-width: 768px){
  #formacion-flexible{
    padding: 10px 0 50px;
  }
  #formacion-flexible .formacion-flexible-title{
    font-size: 26px;
  }
  #formacion-flexible .formacion-flexible-grid{
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  #formacion-flexible .formacion-flexible-card{
    max-width: 420px;
    width: 100%;
  }
}


/* CAPACITACION - CERTIFICADO BANNER */

#certificado-banner{
  padding: 10px 0 60px;
}

#certificado-banner .certificado-banner-card{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #eef1f6 100%);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(7, 45, 112, 0.1);
  padding: 24px 34px;
  max-width: 1250px;
  margin: 0 auto;
}

#certificado-banner .certificado-banner-card::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 140px;
  height: 90px;
  background-color: #8CC63F;
  border-radius: 100% 0 0 0;
  z-index: 0;
}

#certificado-banner .certificado-banner-icon{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
}

#certificado-banner .certificado-banner-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#certificado-banner .certificado-banner-text{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
}

#certificado-banner .certificado-banner-question{
  color: #55606e;
  font-size: 17px;
  margin: 0 0 6px;
}

#certificado-banner .certificado-banner-title{
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

#certificado-banner .certificado-banner-title span{
  display: inline;
}

#certificado-banner .line-navy{ color: var(--iteazul); }

#certificado-banner .line-green{ color: #8CC63F; }

#certificado-banner .certificado-banner-btn{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--iteazul);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  padding: 15px 24px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

#certificado-banner .certificado-banner-btn:hover{
  background-color: #051f4d;
}

@media (max-width: 768px){
  #certificado-banner{
    padding: 0 0 40px;
  }
  #certificado-banner .certificado-banner-card{
    flex-direction: column;
    text-align: center;
    padding: 30px 24px;
    gap: 14px;
  }
  #certificado-banner .certificado-banner-title{
    font-size: 22px;
  }
  #certificado-banner .certificado-banner-title span{
    display: block;
  }
  #certificado-banner .certificado-banner-btn{
    width: 100%;
    justify-content: center;
  }
  #certificado-banner .certificado-banner-card::after{
    width: 100px;
    height: 60px;
  }
}


/* CAPACITACION - RESULTADOS QUE NOS RESPALDAN */

#resultados-respaldan{
  position: relative;
  overflow: hidden;
  padding: 20px 0 70px;
}

#resultados-respaldan::after{
  content: '';
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  background-color: #eef7de;
  border-radius: 50%;
  z-index: 0;
}

#resultados-respaldan .resultados-respaldan-dots{
  position: absolute;
  top: 10px;
  left: 4%;
  width: 90px;
  height: 60px;
  background-image: radial-gradient(#8CC63F 2.5px, transparent 2.5px);
  background-size: 14px 14px;
  opacity: 0.6;
  z-index: 0;
}

#resultados-respaldan .container{
  position: relative;
  z-index: 1;
}

#resultados-respaldan .resultados-respaldan-title{
  font-size: 40px;
  font-weight: 700;
  margin: 0;
}

#resultados-respaldan .line-navy{ color: var(--iteazul); }

#resultados-respaldan .line-green{ color: #8CC63F; }

#resultados-respaldan .resultados-respaldan-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 45px;
}

#resultados-respaldan .resultados-respaldan-divider i{
  display: block;
  background-color: #8CC63F;
  border-radius: 50%;
}

#resultados-respaldan .resultados-respaldan-divider i:first-child{
  width: 26px;
  height: 4px;
  border-radius: 4px;
}

#resultados-respaldan .resultados-respaldan-divider i:last-child{
  width: 8px;
  height: 8px;
}

#resultados-respaldan .resultados-respaldan-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 70px;
  max-width: 1150px;
  margin: 0 auto;
}

#resultados-respaldan .resultados-respaldan-item{
  flex: 1 1 280px;
  max-width: 340px;
  text-align: center;
}

#resultados-respaldan .resultados-respaldan-visual{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 26px;
}

#resultados-respaldan .resultados-respaldan-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: #eef7de;
  color: #8CC63F;
  font-size: 38px;
  flex: 0 0 auto;
}

#resultados-respaldan .resultados-respaldan-ring{
  --percent: 70;
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(#8CC63F calc(var(--percent) * 1%), #e3efd2 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px));
}

#resultados-respaldan .resultados-respaldan-number{
  color: var(--iteazul);
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 8px;
}

#resultados-respaldan .resultados-respaldan-label{
  color: #707070;
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px){
  #resultados-respaldan{
    padding: 10px 0 50px;
  }
  #resultados-respaldan .resultados-respaldan-title{
    font-size: 30px;
  }
  #resultados-respaldan .resultados-respaldan-grid{
    flex-direction: column;
    align-items: center;
    gap: 34px;
  }
}


/* SCROLL REVEAL — efectos de aparición al hacer scroll */

[data-reveal]{
  opacity: 0;
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(32px); }
[data-reveal="down"]  { transform: translateY(-32px); }
[data-reveal="left"]  { transform: translateX(-42px); }
[data-reveal="right"] { transform: translateX(42px); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible{
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.header{
  transition: background-color 0.35s ease, box-shadow 0.35s ease, padding-block 0.35s ease;
  animation: headerDrop 0.9s cubic-bezier(.25,.7,.35,1) both;
}

@keyframes headerDrop{
  0%   { opacity: 0; transform: translateY(-18px); }
  100% { opacity: 1; transform: translateY(0); }
}

.header.active{
  padding-block: 12px;
  box-shadow: 0 8px 24px rgba(7, 45, 112, 0.12);
}

@media (prefers-reduced-motion: reduce){
  .header{ animation: none; }
}