@font-face {
    font-family:infinity_PUL;
    src: url(fonts/MADEINFINITYPersonalUse-Light.otf);
}
@font-face {
    font-family:infinity_PUB;
    src: url(fonts/MADEINFINITYPersonalUse-Black.otf);
}
@font-face {
    font-family:infinity_OutPUR;
    src: url(fonts/MADEINFINITYOutlinePersonalUse-Regular.otf);
}
@font-face {
    font-family:Renita_B;
    src: url(fonts/RENITA-Bold.otf);    
}
@font-face {
    font-family:Outfil_Sb;
    src: url(fonts/Outfit-SemiBold.ttf);    
}
/*CONTAINER*/
.container-fluid{
height: 100vh;
display: flex;          /* Activa flexbox */
flex-direction: column; /* Apila los hijos verticalmente */
overflow: hidden;       /* Evita el desbordamiento */
}
.container{
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    display: block;
}
/*FIN CONTAINER*/
/*HEADER*/
.title-span-00001{
    font-family:Outfil_Sb; 
    font-size: 1.5rem; 
    display:flex; 
    align-items:center; 
    padding-left:.5rem; 
    color:rgb(156, 166, 146);
    text-align: center;
    transition:.4s;
}
.title-span:hover{
    color:rgb(84, 89, 78);
    transition:.4s;
}
.logo-img-0001{
    width: 2.3rem;
    height: 2.3rem;
    }
.btn-primary{
    background-color:#58A673;
}
.btn:first-child:active,:not(.btn-check) + .btn:active,.btn:focus-visible{
    background-color: #36594F;
    border-color: #58A673;
}
.span-menu-hidde{font-size:1.7rem;}
.btn{
    border-color:#58A673;
    margin-top:.25rem;  
    margin-bottom:.25rem;
}
.btn:hover{
    background-color:rgb(69, 134, 91);
    border-color:#58A673;
    color:#fff;        
}
.btn-hidde{
    width: fit-content !important;
    border:solid #e3e3e3 !important;
    border-radius:.5rem !important;
    margin-bottom: 0 !important;
  }
.btn-login{color:#58A673;}
.btn-sing-up{margin-right:.9rem;}
.btn-close:hover{
    border-radius:50%;
  border:solid;
  background-color: #dbffd1;
  color: #296c40;
  transition:.4s;
}
.btn-close{
    border:solid transparent;
    border-radius:50%;
    background-color: transparent;
    color:transparent;
    transition:.4s;
}
.ff-ts{font-family: Outfil_Sb;}
.nav-link{
    color: #58A673;
}
.nav-link:hover{
    color:#36594F;
}
.nav-link:focus{
    color:rgb(108, 117, 125);
    font-weight:bold;
    transition:.4s;
}

/*modal-login*/
/*----------------------------------------------------------------------------------------cabecera del modal-registro*/
.mods-m-header{
  padding-top: 1rem !important;
  padding-bottom: 0rem !important;
  padding-right: 1rem !important;
  display: flex;
}
/*----------------------------------------------------------------------------------------cambio de cuenta*/
.box-select-account{
  padding-top: 1rem;
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 1rem;
}

.type-personal{
  font-weight: bold;
  margin-right: .25rem;
  margin-left: .25rem;
  border: solid 1px #ccc;
  padding: .2rem;
  border-radius: 1rem;
  width: 9rem;
  text-align: center;
  order:1;
  transition: background-color 0.4s, color 0.3s, border-color 0.4s;
}
.type-pyme{
  font-weight: bold;
  margin-left: .25rem;
  margin-right: .25rem;
  border: solid 1px #ccc;
  padding: .2rem;
  border-radius: 1rem;
  width: 9rem;
  text-align: center;
  order:3;
  transition: background-color 0.4s, color 0.3s, border-color 0.4s;
}
.type-personal:hover,.type-pyme:hover{cursor: pointer;}
/* === ESTILO ACTIVO POR DEFECTO PARA .type-personal === */
  input[type="checkbox"] ~ .mods-m-header .box-select-account .type-personal {
    background-color: #d6ddbd;
    color: #2c6a30;
    border-color: transparent;
  }
  /* === CUANDO EL CHECKBOX ESTÁ MARCADO, SE REMUEVEN LOS ESTILOS === */
  input[type="checkbox"]:checked ~ .mods-m-header .box-select-account .type-personal, input[type="checkbox"]:checked ~ .mods-m-header .box-select-account .type-pyme {
    background-color: transparent;
    color: black;
    border-color: #ccc;
  }
  /* === ESTILO ACTIVO PARA .type-pyme === */
  input[type="checkbox"]:checked ~ .mods-m-header .box-select-account .type-pyme {
  background-color: hsl(96, 85%, 34%);
  color: #fff;
  border-color: transparent;
  }

/*----------------------------------------------------------------------------------------botón animado*/
.order-toggle{
  order:2;
}
.toggle {
  --bg-toggle: hsl(73.1, 32%, 80.4%);
  --bg-circle: hsl(123.9, 41.3%, 29.4%);
  width: 3rem;
  height: 1.5rem;
  background-color: var(--bg-toggle);
  box-shadow: 0 .3rem 5rem 0 rgba(125, 125, 125, 0.25);
  border-radius: 4rem;
  display: flex;
  align-items: center;
  padding: 0 .3rem;
  transition: background-color 400ms;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: .3rem;
}

.toggle__circle {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  background-color: var(--bg-circle);
  border-radius: 50%;
  position: relative;
  transition: margin 400ms ease-in-out, background-color 1000ms;
}

.toggle__circle::after,
.toggle__circle::before {
  content: '';
  position: absolute;
  background-color: hsl(73.2, 57.3%, 40.4%); /*var(--bg-toggle);*/
  bottom: 131%;
  transform-origin: bottom left;
}
.toggle__circle::after{
 background-color: hsl(142.9, 44.7%, 18.4%);
}

.toggle__circle::before {
  width: 0.4rem;
  height: 1rem;
  left: 30%;
  border-radius: 0% 100% 0% 100% / 0% 27% 73% 100%;
  transform: translateX(-70%) rotate(-2deg);
}

.toggle__circle::after {
  width: 1rem;
  height: 1.3rem;
  left: 55%;
  border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%;
  transform: rotate(-20deg);
}

#checkbox:checked + .mods-m-header .box-select-account .toggle > .toggle__circle {
  margin-left: calc(120px - (.3rem * 2) - 88px);
}

#checkbox:checked + .mods-m-header .box-select-account .toggle {
  --bg-toggle: hsl(96, 85%, 34%);
  --bg-circle: hsl(0, 0%, 96%);
  /*--bg-toggle:#58a673;
  --bg-circle: #cbff8a;*/
}
/*----------------------------------------------------------------------------------------formularios dinámicos*/
/* switch card */
.card-switch{perspective: 1000px; /* Necesario para 3D */}

/* card */ 
.flip-card__inner {
  width: 100%;
  height: 62vh;
  position: relative;  
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in-out;
}

#checkbox:checked ~ .wrapper .card-switch .flip-card__inner {
  transform: rotateY(180deg);
}

#checkbox:checked ~ .wrapper .card-switch .flip-card__inner .flip-card__front {
  box-shadow: none;
}

.flip-card__front, .flip-card__back {
  padding: 20px;
  position: absolute;  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;  
  top:0;
  left:0;
  border: 1px solid #cecece;
  padding-top: .2rem;
  backface-visibility: hidden; /* <- MUY IMPORTANTE */
  -webkit-backface-visibility: hidden;
}
.flip-card__front {
  z-index: 2;
  transform: rotateY(0deg);
  border-radius: .5rem;
}
.flip-card__back {
  width: 100%;
  transform: rotateY(180deg);
  border-radius: .5rem;
  height: inherit;
  margin-top: 2rem;
}
#checkbox:checked ~ .wrapper .card-switch .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: space-between;
  padding-bottom: 8rem;
}

.flip-card__input {
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color);
  padding: 5px 10px;
  outline: none;
}

.flip-card__input::placeholder {
  color: var(--font-color-sub);
  opacity: 0.8;
}

.flip-card__input:focus {
  border: 2px solid var(--input-focus);
}

.flip-card__btn:active, .button-confirm:active {
  box-shadow: 0px 0px var(--main-color);
  transform: translate(3px, 3px);
}

/*----------------------------------------------------------------------------------------inputs dinámicos*/
.inputbox {
  position: relative;
  width: 100%;
  margin-top: 1.5rem;
}

.inputbox input {
  position: relative;
  width: 100%;
  /*padding: 20px 10px 10px;*/
  padding-bottom: .3rem;
  padding-left: .5rem;
  background: transparent;
  outline: none;
  box-shadow: none;
  border: none;
  color: #298649;
  font-size: 1em;
  letter-spacing: 0.05em;
  transition: 0.5s;
  z-index: 10;
}

.inputbox span {
  position: absolute;
  left: 0;
  top: .25rem;
  /*padding: 20px 10px 10px;*/
  font-size: 1em;
  color: #8f8f8f;
  letter-spacing: 00.05em;
  transition: 0.5s;
  pointer-events: none;
  font-weight: 600;
}

.inputbox input:valid ~span,
.inputbox input:focus ~span {
  color: #58a673;
  transform: translateX(0px) translateY(-34px);
  font-weight: 600;
}

.inputbox i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background:#58a67370;  
  border-radius: 4px;
  transition: 0.5s;
  pointer-events: none;
  z-index: 9;
}

.inputbox input:valid ~i,
.inputbox input:focus ~i {
  height: 2rem;
}
/*----------------------------------------------------------------------------------------botón registro*/
.button-reg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 58%;
  border-radius: 36px;
  font-weight: 700;
  height: 3rem;
  font-size: 16px;
  padding-inline: 20px;
  background-color: transparent;
  text-transform: uppercase;
  overflow: hidden;
  text-align: center;
  transition: all .25s ease-in-out;
  z-index: 1;
  box-sizing: border-box;
  margin-bottom: .5rem;
  border:none;
  margin-top: 1rem;
}
.button-reg:focus-visible{
  outline: 2px solid rgb(110, 221, 47);
}
.button-reg:is(:hover, :focus)::before {
  transform: translateX(0%);
}
.button-reg .text {
  color: gray;
}
.button-reg:is(:hover, :focus) .text {
  color: white;
}
.text {
  white-space: nowrap;
  padding-inline-end: 1.7rem;
  z-index: 2;
}

/* change the width and height to 100% when you use it in your layout */
.button-reg::after {
  content: '';
  position: absolute;
  height: calc(100% - 0px);
  width: calc(100% - 0px);
  z-index: 2;
  border: solid 2px #58a673;
  border-radius: 2rem;
}

.button-reg::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #58A673;
  z-index: 1;
  left: 0rem;
  transform: translateX(90%);
  transition: all .3s ease-out;
  border-radius: 2rem;
}

.icon {
  display: inherit;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0rem;
  width: 2.8rem;
  height: 2.8rem;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background-color: #58A673;
  z-index: 2;
  box-sizing: border-box;
  color: #fff;
  overflow: hidden;
}
/*----------------------------------------------------------------------------------------validación de formulario con pops*/
/*@keyframes fadeInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}*/
@keyframes fadeInBottom {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}
#popupFeedbackContinueBtn {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(-10px);
}

#popupFeedbackContinueBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fade-out {
    animation: fadeOut 0.6s ease-out forwards;
}

.fade-in-bottom {
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeInBottom 0.4s ease-out forwards;
}
/*.popup {
  opacity: 0;
  animation: fadeInFromTop 0.3s ease-out forwards;
}*/

.popup {
  margin: 10px;
  box-shadow: 4px 4px 10px -10px rgba(0, 0, 0, 1);
  width: 20rem;
  justify-content:start;
  align-items: center;
  display: flex;
  border-radius: 4px;
  padding: 5px 0;
    padding-right: 0px;
  font-weight: 500;
  padding-right: .5rem;
}
.popup svg {
  width: 2rem;
  height: 2rem;
}
.popup-icon svg {
  margin: 5px;
  display: flex;
  align-items: center;
  position: relative;
  top: .2rem;
}
.close-icon {
  margin-left: auto;
}
.close-svg {
  cursor: pointer;
}
.close-path {
  fill: grey;
}

/*SEPERATE STYLES*/

/* SUCCESS */
.success-popup {
  background-color: #edfbd8;
  border: solid 1px #84d65a;
}
.success-icon path {
  fill: #84d65a;
}
.success-message {
  color: #2b641e;
}

/* ALERT */
.alert-popup {
  background-color: #fefce8;
  border: solid 1px #facc15;
}
.alert-icon path {
  fill: #facc15;
}
.alert-message {
  color: #ca8a04;
}

/* ERROR */

.error-popup {
  background-color: #fef2f2;
  border: solid 1px #f87171;
}
.error-icon path {
  fill: #f87171;
}
.error-message {
  color: #991b1b;
}

/* INFO */

.info-popup {
  background-color: #eff6ff;
  border: solid 1px #1d4ed8;
}
.info-icon path {
  fill: #1d4ed8;
}
.info-message {
  color: #1d4ed8;
}


/*--------------------------------------------------------------------------------------------------------------*/
#modalSignUp.show{
    display: flex !important;
    overflow-y: hidden;
}
#modalSignUp .modal-dialog{
    display: flex;
  justify-content: center;
  flex-direction: column;
}
/*FIN HEADER*/

/*COMPONENTS*/
/*modales principales*/

#services-container {
  overflow: hidden; /* Por defecto */
  transition: height 0.3s ease; /* Para cambios suaves de altura */
}
.btn-select-service{width:6rem;}
.dc-modal-header-p-modal{background-color: rgb(244, 244, 244);}
.dc-img-h1-p-modal{display: flex;}
.img-logo-p-modal{margin-right:.7rem;}
.h1-p-modal{
    font-family: Outfil_Sb;
    color: #fff;
    color:rgb(156, 166, 146);
    font-size:1.5rem;
}
.fade-in {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.btn-close-p-modal{margin-right: 1rem !important;}

.carousel{
    background-image:url("../img/portada.1-pr.png");
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    flex: 1;               /* Ocupa todo el espacio disponible */
    overflow-y: auto;
}
.carousel-indicators [data-bs-target]{
    width: 1rem;
    height: 1rem;
    border-radius:50%;
}
.carousel-inner{
    overflow:hidden;
    height: 100%;
}
.carousel-item{
    height: 100%;
}
.carousel-caption{
    bottom:11rem;
}
.scaled-icon-00001{
    font-size: 2rem;    
}
.redes-sociales-00001{
    margin:.25rem; 
    margin-left:.5rem;
    margin-right:.5rem;
    text-decoration: none; 
    color: #fff;
    display: flex;
    width: fit-content;
    height: fit-content;

}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link.active{
    background-color: #58a673;    
}
.ul-list-00002{
    list-style:none;
  padding-left: 1rem;
  padding-top: 1.7rem;
}
.content-sign-up-other{
    width: 13rem;    
    display: flex;
    margin-left: 2rem;
}
.btn-sing-up-o{
    display: flex;
    justify-content: space-around;
    transition:.4s;
}
.btn-sing-up-o:hover{
    background-color: rgb(23, 32, 24);
    border-color:#4FC678;
    color: #fff;
    transition:.4s;
}
.icon-sign-up-o{margin-right:.5rem;}
.scaled-icon-00002{
    font-size:1rem;
    margin-right: .5rem;
}
.ul-list-00002 .nav-link.active .scaled-icon-00002,
.ul-list-00002 .nav-link.active .li-context {
  color: #fff !important;
  align-items: center !important;
  display: flex !important;
}
.a-content-index{
    background-color: #e5eae6;
}
.icon-index{
    display: flex;
    background-color: #58a673;
    color: #fff;
    padding:.5rem;
    border-radius:50%;
}
.span-index{
    font-weight: bold;
    color: #6c6c6c;
    display: flex;
    align-items: center;
}
.a-content{
    display: flex;
    justify-content: flex-start; 
}
.bi::before .bi-facebook{
    font-size: 10rem;
}
/*#modal_body_servicios{
    padding: 0 !important;
    background-image: url("https://resources.technologicalseed.com.mx/T9s1_Xe4g-h31c9_Vq8-LRzQ3l/pub8_cT9/r3s9rX_y2-img_5Fq/5968949.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover;
}*/
    #modal_body_nosotros{
    padding: 0 !important;
    background-image: url("https://resources.technologicalseed.com.mx/pub8_cT9/r3s9rX_y2-img_5Fq/5968949.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover;
  }
  
#section_nosotros {
  background-image: url("https://resources.technologicalseed.com.mx/pub8_cT9/r3s9rX_y2-img_5Fq/background-p-reg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.pt-7 {
  padding-top: 8rem !important;
}
.pb-7 {
  padding-bottom: 8rem !important;
}
/* Capa oscura solo al fondo */
#section_nosotros::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5); /* ajusta el nivel de oscuridad aquí */
  z-index: 1;
}

#modal_body_contacto{
    padding: 0 !important;
    background-image: url("https://resources.technologicalseed.com.mx/pub8_cT9/r3s9rX_y2-img_5Fq/5134336.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover;  
}
#background_contact{
    background-image: url("https://resources.technologicalseed.com.mx/pub8_cT9/r3s9rX_y2-img_5Fq/educacion-estilos-de-vida-relajacion-madera-teclado-del-ordenador.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover;  
}
#background_contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7); /* ajusta el nivel de oscuridad aquí */
  z-index: 1;
}
#btn-subscripcion{
  width: 100%;
  align-self: center;
  margin-top: .5rem;
  border-radius: 5rem !important;
}
#logo_v{
  margin-left:.5rem;
  width:2rem;
  height: fit-content;
}
.a-politycs:hover{
  transition:.4s;
  color:aquamarine !important;
}
.box-1-footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.box-2-footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/*medidas*/
@media (max-width: 767.98px) {
    .container{
        overflow-y:auto;
    }
    .sidebar-container {
      position: fixed;
      z-index: 1000;
      min-height: 100vh;
      transition: all 0.3s ease;
      
    }
    #sidebarContent{
      padding-left: .5rem !important;
    }
    #sidebarToggleBtn{
      margin-left:.6rem !important;
      background-color: #fff;
    }
    .sidebar-container.mobile-collapsed {
        width: 54px !important;
        /*background-color: #f8f9fa !important;*/
        background-color:#394d45 !important;
        padding:0 !important;
        overflow:hidden;
    }
    .sidebarToggleBtn{
      margin-left: .6rem !important;
    }

    .sidebar-container.mobile-collapsed .logo-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    .sidebar-container.mobile-collapsed .logo-img-0001 {
      width: 40px;
      margin-bottom: 10px;
      margin-left: 0;
    }
    
    .sidebar-container.mobile-collapsed .title-span-00001 {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      white-space: nowrap;
      margin-top: 20px;
      font-size: 1rem !important;
    }

    
    .sidebar-container.mobile-expanded {
      width: 280px !important;
      background-color: #f8f9fa !important;
      box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    .ul-list-00002{padding-left: 0;}
    .main-content {
      margin-left: 60px;
    }
    .sidebar-container.mobile-collapsed .title-span-00001 {
        display: none;
        }
    .a-content-index{
        padding-left: .35rem !important;
    }
    .a-content{
        padding-left: .3rem !important;
    }
    .scaled-icon-00002{
        font-size: 1.1em;
        margin-right: 1rem;
        display: flex;
        background-color: #58a673;
        color: #fff;
        padding:.5rem;
        border-radius:50%;
    }
  }
  
  @media (min-width: 768px) {
    .sidebar-container {
      width: 280px !important;
      position: relative;
    }
    
    .btn-hidde {
      display: none !important;
    }
    
    .main-content {
      margin-left: 0;
    }

    .mb-md-0 {
        margin-bottom: 1rem !important;
    }
  }
  
  /* Mejoras generales */
  .scaled-icon-00002 {
    font-size: 1.1em;
    margin-right: .5rem;
  }
  .h5-title-and-icon{display:flex; align-items:center;}
  .icon-size{font-size:1rem; margin-left:.5rem;}
  .li-context {
    white-space: nowrap;
    align-items: center !important;
    display: flex !important;
  }

  .nav-link {
    padding: 0.5rem 1rem;
  }
  
  .sidebar-container {
    transition: all 0.3s ease;
  }
  
  .btn-hidde {
    border: none;
    background: transparent;
    font-size: 1.5rem;
  }
/* Estilos para hacer el contenido principal responsive */
  .main-content {
    overflow-x: hidden;
  }
  
  .main-content h2 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 1rem;
    background-color: #58a673;
    padding:.3rem;        
    padding-left: .5rem;
    padding-right: .5rem;
    border-radius:5rem;        
    color: #fff;
    text-align: center;        
  }
  
  .main-content h5, .main-content h6 {
    font-size: calc(1rem + 0.5vw);
    margin-top: 1.5rem;
  }
  
  .main-content p, .main-content ul {
    font-size: calc(0.9rem + 0.1vw);
    line-height: 1.6;
  }
  
  .main-content ul {
    padding-left: 1.5rem;
  }
  
  .main-content li {
    margin-bottom: 0.5rem;
  }
  
  @media (max-width: 768px) {
    #h1_1_text_caption{
      text-align: start;
    }
    .derechos-ARCO{width:19rem !important; padding-right: 3rem !important;}
    #p_box_botton{
      display: flex !important;
      width:100%;
      justify-content: center !important;
      padding: 0 !important;
    }
    .main-content {
      padding: 1rem !important;
      padding-left: .3rem !important;
    }
    .main-content h2 {
    font-size: calc(.8rem + 1vw);
    font-weight: bold;
    margin-top: 1rem;
    background-color: #58a673;
    padding:.3rem;        
    border-radius:5rem;
    padding-left: 1rem;
    color: #fff;
    text-align: start;
    margin-right: 1rem;
  }

    p{
        width:fit-content;
        text-align: justify;
        padding-right: 3.7rem;
    }        
    .main-content .container {
      padding-left: 0;
      padding-right: 0;
    }
    .main-content p{
      text-align: start;
    }
  }


/*FIN COMPONENTS*/
/*FOOTER*/
/*FIN FOOTER*/


.small-legend{display: flex; flex-wrap: wrap; font-size:.85rem;}
#flip_card_front_content{height: inherit;
  margin-top: 1rem;}

/* Scope del modal de QyS */
.modal-qys {
  max-width: 780px;                 /* un poco más ancho que modal-md */
}

.modal-qys .modal-content {
  max-height: 82vh;                 /* que no ocupe toda la pantalla */
  max-height: 82dvh;                /* soporte móvil moderno */
}

.modal-qys .modal-body {
  overflow-y: auto;                 /* scroll interno cuando haga falta */
  padding-right: 1rem;              /* evita overlay del scrollbar */
}

/* Hero image acotada */
.modal-qys .qys-hero {
  max-width: 420px;
  max-height: 220px;
  object-fit: contain;
}

/* Textarea fijo (sin resize) */
.modal-qys .qys-textarea {
  height: 160px;
  min-height: 160px;
  max-height: 160px;
  resize: none;
}

.h5-p-modal{
  font-family: Outfil_Sb;
  color: rgb(156, 166, 146);
  font-size: 1.2rem;
}

.img-modal-icon{
  max-width: 35px;
  margin-right: .5rem;
}

/* Textarea fijo solo dentro del modal de Contacto */
#modalContacto .contact-textarea{
  height: 160px;
  min-height: 160px;
  max-height: 160px;
  resize: none;        /* bloquea el “arrastre” de esquina */
  overflow: auto;      /* scroll interno si se excede */
}

@media (max-width: 575.98px){
  #modalContacto .contact-textarea{
    height: 140px;
    min-height: 140px;
    max-height: 140px;
  }
}

/* Scope para el Helpdesk */
.modal-helpdesk { 
  max-width: 900px;                 /* más ancho que el md */
}

/* El contenido no ocupa toda la pantalla */
.modal-helpdesk .modal-content{
  max-height: 82vh;                 /* altura máxima visible */
  max-height: 82dvh;                /* soporte móviles modernos */
}

/* Scroll interno del cuerpo del modal */
.modal-helpdesk .modal-body{
  overflow-y: auto;
  padding-right: 1rem;              /* evita tapar contenido con el scrollbar */
  width: 100%;
}

/* Imagen controlada */
/*.modal-helpdesk .helpdesk-hero*/
.helpdesk-hero,.qys-hero,.myc-hero,.img-modal-pyme,.img-modal-public{
  max-width: 420px;
  max-height: 220px;
  object-fit: contain;
}

/* (Opcional) en pantallas pequeñas reduce un poco */
@media (max-width: 575.98px){
  .modal-helpdesk { max-width: 95vw; }
  .helpdesk-hero,.qys-hero,.myc-hero,.img-modal-pyme,.img-modal-public{ max-width: 340px; max-height: 180px; }
}

.p-not-padding{padding:0;}

/* ===== Modal SignUp: responsive + scroll ===== */

/* ancho cómodo en desktop */
#modalSignUp .modal-dialog { max-width: 720px; }

/* el contenido no ocupa toda la pantalla y permite scroll interno */
#modalSignUp .modal-content { 
  max-height: 90vh;                   /* tope */
}
#modalSignUp .modal-body { 
  overflow-y: auto;                    /* scroll interno */
}

/* ---- Header compacto en móvil ---- */
#modalSignUp .mods-m-header{
  padding: 1rem !important; 
  gap: .5rem;
}
#modalSignUp .box-select-account{
  padding-top: .25rem;
  margin-bottom: .5rem;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  left: 1.5rem;
}

/* Botones “Personal / PYME” más fluidos */
#modalSignUp .type-personal,
#modalSignUp .type-pyme{
  width: auto;               /* evita ancho fijo */
  min-width: 7.5rem;
  padding: .35rem .75rem;
}

/* Toggle más pequeño en móvil */
#modalSignUp .toggle{ margin: .25rem .5rem; }
#modalSignUp .toggle__circle{ width: .9rem; height: .9rem; }

/* ---- Área de tarjetas (flip) ---- */
#modalSignUp .flip-card__inner{
  height: 64vh;              /* altura controlada para que quepa y haga scroll el modal */
}
@media (max-width: 480px){
  #modalSignUp .flip-card__inner{ height: 66vh; }  /* un poco más alta en móviles “altos” */
}

/* Ajustes de inputs/labels en móvil para que no se vean gigantes */
@media (max-width: 480px){
  #modalSignUp .modal-body{ padding: 1rem !important; }
  #modalSignUp .inputbox{ margin-top: 1rem; }
  #modalSignUp .inputbox span{ font-size: .95rem; }
  #modalSignUp .inputbox input{ font-size: .95rem; }
  /* la “barra” que sube al enfocar más baja para no invadir */
  #modalSignUp .inputbox input:valid ~ i,
  #modalSignUp .inputbox input:focus ~ i{ height: 1.4rem; }
}

/* Botón de registro ocupa todo el ancho en móvil */
@media (max-width: 480px){
  #modalSignUp .button-reg{ width: 100%; height: 2.75rem; }
  #modalSignUp .button-reg .icon{ width: 2.5rem; height: 2.5rem; }
}

/* Leyenda pequeña y legible en móvil */
#modalSignUp .small-legend{
  display: block;
  line-height: 1.35;
  margin-top: .25rem;
  text-align: center;
  font-size: .9rem;
}

/* Dialog responsivo en móviles: ocupa casi todo el ancho y baja los márgenes */
@media (max-width: 480px){
  #modalSignUp .modal-dialog{ max-width: 96vw; margin: .75rem auto; }
}

/* IMPORTANTE: regla específica para modalSignUp, no global */
#modalSignUp.modal.show{ display:block !important; overflow-y:auto; }


/* ===== SignUp: fixes desktop ===== */

/* 1) Evita que se recorte la hojita/bolita del switch en el header */
#modalSignUp .modal-content{
  overflow: visible;               /* permite que sobresalga dentro del modal */
}
#modalSignUp .modal-header{
  overflow: visible;               /* por si algún ancestro recorta */
  padding-top: 2rem !important;    /* da “aire” arriba para la hojita */
  padding-bottom: 0 !important;
}

/* Si en mobile hiciste más pequeño el toggle, restáuralo en desktop */
@media (min-width: 768px){
  #modalSignUp .toggle{ width: 3rem; height: 1.5rem; }
  #modalSignUp .toggle__circle{ width: 1rem; height: 1rem; }
}

/* 2) “Formulario flaco” en la cara FRONT (Personal) — estaba sin width */
#modalSignUp .flip-card__front{
  width: 100%;                     /* que ocupe todo el ancho disponible */
  box-sizing: border-box;
}

/* (Opcional) homogeneiza ambas caras */
#modalSignUp .flip-card__back{
  width: 100%;
  box-sizing: border-box;
}

/* 3) Que el contenedor del formulario no se vea angosto en desktop */
@media (min-width: 992px){
  /* reduce un poco el padding externo del modal para ganar ancho útil */
  #modalSignUp .modal-body{ padding-left: 2rem !important; padding-right: 2rem !important; }

  /* si quieres que el “marco” del form no se pegue a los bordes */
  #modalSignUp .flip-card__front,
  #modalSignUp .flip-card__back{
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Mantén la altura razonable del cuerpo para que no se corte nada */
#modalSignUp .modal-content{ max-height: 90vh; }
#modalSignUp .modal-body{ overflow-y: auto; }

/* (por si existe) regla específica para modalSignUp, no global */
#modalSignUp.modal.show{ display:block !important; overflow-y:auto; }


/* Icono oculto por defecto; texto visible */
#modalSignUp .type-personal .pill-icon,
#modalSignUp .type-pyme .pill-icon{
  display:none;
  font-size:1.15rem;
  line-height:1;
  vertical-align:middle;
}
#modalSignUp .type-personal .pill-text,
#modalSignUp .type-pyme .pill-text{
  display:inline;
}

/* En pantallas pequeñas: mostrar icono y ocultar texto */
@media (max-width: 480px){
  #modalSignUp .type-personal .pill-text,
  #modalSignUp .type-pyme .pill-text{ display:none; }
  .box-select-account{position: relative; left: 1.5rem;}

  #modalSignUp .type-personal .pill-icon,
  #modalSignUp .type-pyme .pill-icon{
    display:inline-flex;
    font-size:1.35rem;   /* ajusta si quieres más grande */
  }

  /* Pastillas más compactas en móvil */
  #modalSignUp .type-personal,
  #modalSignUp .type-pyme{
    min-width:auto;
    padding:.5rem .75rem;
  }
}


/* Evita que el botón se encoja en flex column y fija una altura mínima */
#modalSignUp .button-reg{
  flex: 0 0 auto;          /* no shrink */
  min-height: 44px;        /* altura mínima estable */
  height: 3rem;            /* mantiene tu altura normal */
  z-index: 20;             /* por encima de la línea animada del input */
  margin-top: 1rem;        /* separa del último input */
}

/* Si la pantalla es baja, conserva un botón usable */
@media (max-height: 720px){
  #modalSignUp .button-reg{
    min-height: 44px;
    height: 44px;
  }
}

/* El último input no “invade” el espacio del botón con su barra animada */
#modalSignUp .flip-card__form .inputbox:last-of-type input:focus ~ i,
#modalSignUp .flip-card__form .inputbox:last-of-type input:valid ~ i{
  height: 0.9rem;          /* en el último campo la barra crece menos */
}

/* Un poquito más de respiro debajo del último input en ambas caras */
#modalSignUp .flip-card__form .inputbox:last-of-type{
  margin-bottom: .5rem;
}

/* === Evitar desbordes dentro de la caja gris del SignUp === */

#modalSignUp .flip-card__front,
#modalSignUp .flip-card__back{
  /* el marco gris no deja pintar nada fuera */
  overflow: hidden;
  padding-inline: 28px;      /* un poco más de “gutter” a los lados */
  box-sizing: border-box;
}

#modalSignUp .flip-card__form{
  /* el form ocupa el ancho útil del marco gris */
  width: 100%;
  min-width: 0;              /* permite encoger en flex */
  box-sizing: border-box;
}

#modalSignUp .inputbox{
  width: 100%;
  min-width: 0;              /* evita desborde por contenido largo */
}

#modalSignUp .inputbox input{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;     /* padding no aumenta el ancho total */
}

/* La barra animada del input se ajusta al ancho disponible */
#modalSignUp .inputbox i{
  width: 100%;
  max-width: 100%;
}

/* (Opcional) en pantallas pequeñas reduce un poco el gutter lateral */
@media (max-width: 480px){
  #modalSignUp .flip-card__front,
  #modalSignUp .flip-card__back{
    padding-inline: 20px;
  }
}

.div-msg-newsletter{
  text-align: center !important;
  background-color: greenyellow !important;
  width: fit-content !important;
  align-self: center !important;
  padding: .25rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  border-radius: 1rem !important;
}

.newsletter-form{
  display: flex !important;
  flex-direction: column !important;
}

/* ==============================
   Modal Signup Floating Alert
   ============================== */
.signup-floating-alert {
  /*position: fixed !important;
  top: 100px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;*/
  margin: 0 !important;
  border-radius: 0.5rem !important;
  padding: .75rem 1rem !important;
  background-color: #d1e7dd !important;
  border: 1px solid #badbcc !important;
  z-index: 10000 !important;
  max-width: 600px !important;
  /*width: 90% !important;*/
}

.signup-floating-alert .alert-content {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.signup-floating-alert .alert-message {
  flex: 1;
  font-size: .8rem !important;
  line-height: 1.3 !important;
}

.signup-floating-alert .alert-close-btn {
  padding: 0 !important;
  font-size: 1rem !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s !important;
  flex-shrink: 0 !important;
  margin-left: 0.5rem !important;
}

.signup-floating-alert .alert-close-btn:hover {
  opacity: 1 !important;
}

.signup-floating-alert .example-link {
  font-size: 0.75rem !important;
  color: #0d6efd !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
}

.signup-floating-alert .example-link:hover {
  color: #0a58ca !important;
  text-decoration: underline !important;
}

.signup-floating-alert .example-link i {
  margin-right: 0.25rem;
}