@charset "UTF-8";

.backdrop-glass-before:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: -1;
}

.backdrop-glass{
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.z-n1 {
  z-index: -1;
}

.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.viewport-fullscreen {
  width: 100%;
  height: 100dvh;
  min-height: var(--viewport-fullscreen-height-min, 100vh);
}

.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-10 {
  padding: 6rem !important;
}

.p-15 {
  padding: 9rem !important;
}

.px-10 {
  padding-right: 6rem !important;
  padding-left: 6rem !important;
}

.px-15 {
  padding-right: 9rem !important;
  padding-left: 9rem !important;
}

.py-10 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.py-15 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}

.pt-10 {
  padding-top: 6rem !important;
}

.pt-15 {
  padding-top: 9rem !important;
}

.pe-10 {
  padding-right: 6rem !important;
}

.pe-15 {
  padding-right: 9rem !important;
}

.pb-10 {
  padding-bottom: 6rem !important;
}

.pb-15 {
  padding-bottom: 9rem !important;
}

.ps-10 {
  padding-left: 6rem !important;
}

.ps-15 {
  padding-left: 9rem !important;
}

.top-spacing-1 {
  top: 0.25rem !important;
}
.top-spacing-2 {
  top: 0.5rem !important;
}
.top-spacing-3 {
  top: 1rem !important;
}
.top-spacing-4 {
  top: 1.5rem !important;
}
.top-spacing-5 {
  top: 3rem !important;
}
.top-spacing-10{
  top: 6rem !important;;
}
.top-spacing-15{
  top: 9rem !important;;
}

.bottom-spacing-1 {
  bottom: 0.25rem !important;
}
.bottom-spacing-2 {
  bottom: 0.5rem !important;
}
.bottom-spacing-3 {
  bottom: 1rem !important;
}
.bottom-spacing-4 {
  bottom: 1.5rem !important;
}
.bottom-spacing-5 {
  bottom: 3rem !important;
}
.bottom-spacing-10{
  bottom: 6rem !important;;
}
.bottom-spacing-15{
  bottom: 9rem !important;;
}

.start-spacing-1,
.left-spacing-1 {
  left: 0.25rem !important;
}
.start-spacing-2,
.left-spacing-2 {
  left: 0.5rem !important;
}
.start-spacing-3,
.left-spacing-3 {
  left: 1rem !important;
}
.start-spacing-4,
.left-spacing-4 {
  left: 1.5rem !important;
}
.start-spacing-5,
.left-spacing-5 {
  left: 3rem !important;
}
.start-spacing-10,
.left-spacing-10{
  left: 6rem !important;;
}
.start-spacing-15,
.left-spacing-15{
  left: 9rem !important;;
}

.end-spacing-1,
.right-spacing-1 {
  right: 0.25rem !important;
}
.end-spacing-2,
.right-spacing-2 {
  right: 0.5rem !important;
}
.end-spacing-3,
.right-spacing-3 {
  right: 1rem !important;
}
.end-spacing-4,
.right-spacing-4 {
  right: 1.5rem !important;
}
.end-spacing-5,
.right-spacing-5 {
  right: 3rem !important;
}
.end-spacing-10,
.right-spacing-10{
  right: 6rem !important;;
}
.end-spacing-15,
.right-spacing-15{
  right: 9rem !important;;
}


.before-none:before,
.after-none:after {
  display: none;
}

.overlay-grid:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));
  background-image: url(../assets/img/backgrounds/grid.webp);
  background-repeat: repeat;

}

.bg-gradient-primary-to-secondary {
  background-color: rgba(var(--bg-primary-rgb, var(--bs-primary-rgb)), 1) !important;
  background-image: linear-gradient(
    135deg,
    rgba(var(--bg-primary-rgb, var(--bs-primary-rgb)), 1) 0%, 
    rgba(var(--bg-secondary-rgb, var(--bs-secondary-rgb)), 0.8) 100%
  ) !important;
}

.img-prosiga-shape {
    float: left;
    max-width: 100%;
    height: auto;
    shape-outside: url(../assets/img/imago-prosiga-padding.png);
    shape-image-threshold: 0.2;
    shape-margin: 16px;
}

.border-blob-animation{
    border-radius: var(--radius-blob-4);
    animation: blob-animation 15s linear infinite;
}
@keyframes blob-animation{
    0%, 100% {
        border-radius: var(--radius-blob-5);
    }
    20% {
        border-radius: var(--radius-blob-4);
    }
    40% {
        border-radius: var(--radius-blob-3);
    }
    60% {
        border-radius: var(--radius-blob-2);
    }
    80% {
        border-radius: var(--radius-blob-1);
    }
    /*34% {
        border-radius: var(--radius-blob-3);
    }
    67% {
        border-radius: var(--radius-blob-2);
    }*/
}
.preloader span{
    background-color: var(--bs-white, #ffffff);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../assets/img/bg/bg-wavy-lines.svg?v2);
    background-attachment: fixed;
}

/* Justify text on all viewport sizes */
.text-justify {
  text-align: justify !important;
}
/* Responsive justify alignment */
@media (min-width: 576px) {
  .text-sm-justify {
    text-align: justify !important;
  }
}
@media (min-width: 768px) {
  .text-md-justify {
    text-align: justify !important;
  }
}
@media (min-width: 992px) {
  .text-lg-justify {
    text-align: justify !important;
  }
}
@media (min-width: 1200px) {
  .text-xl-justify {
    text-align: justify !important;
  }
}
@media (min-width: 1400px) {
  .text-xxl-justify {
    text-align: justify !important;
  }
}

.text-column-2 {
  -moz-column-count: 2;
       column-count: 2;
}
@media (min-width: 576px) {
  .text-column-sm-2 {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media (min-width: 768px) {
  .text-column-md-2 {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media (min-width: 992px) {
  .text-column-lg-2 {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media (min-width: 1200px) {
  .text-column-xl-2 {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media (min-width: 1400px) {
  .text-column-xxl-2 {
    -moz-column-count: 2;
         column-count: 2;
  }
}
[class*=text-column-] {
  -moz-column-rule: dashed 1px rgba(128, 128, 128, 0.16);
       column-rule: dashed 1px rgba(128, 128, 128, 0.16);
  -moz-column-gap: 5rem;
       column-gap: 5rem;
}
[class*=text-column-] li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.bg-gradient-primary-to-secondary {
  background-color: var(--bs-primary) !important;
  background-image: linear-gradient(135deg, var(--bs-primary) 0%, rgba(var(--bs-secondary-rgb), 0.8) 100%) !important;
}
.text-gradient-primary-to-secondary {
  /*background-image: linear-gradient(135deg, var(--bs-body-color), var(--bs-primary), var(--bs-secondary)) !important;*/
  /*background-image: linear-gradient(135deg, var(--bs-body-color), var(--bs-primary)) !important;*/
  background-image: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.text-gradient-primary-to-secondary-2 {
  background-image: linear-gradient(135deg, var(--bs-body-color), var(--bs-primary)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.text-gradient-primary-to-secondary-3 {
  background-image: linear-gradient(135deg, var(--bs-body-color), var(--bs-primary), var(--bs-secondary)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.border-dashed {
    border-style: dashed !important;
}

.overlay-mix-blend-mode:after{
  background-image: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
}


/*.btn-hover-gradient-primary-to-secondary:hover{
  background-image: linear-gradient(135deg, var(--bs-primary) 0%, rgba(var(--bs-secondary-rgb), 0.8) 100%) !important;
}*/

.btn-hover-gradient-primary-to-secondary {
  position: relative;
  background-image: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
  z-index: 0;
}
.btn-hover-gradient-primary-to-secondary:is(:hover, :active, .active, .show){
  color: var(--bs-white) !important;
}
.btn-hover-gradient-primary-to-secondary::before {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left 0 */
  background-image: linear-gradient(135deg, var(--bs-primary) 0%, rgba(var(--bs-secondary-rgb), 0.8) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
  border-radius: var(--bs-btn-border-radius);
}
.btn-hover-gradient-primary-to-secondary:is(:hover, :active, .active, .show)::before {
  opacity: 1;
}

.clients ul li{
  box-shadow: 1px 1px 1px #eee;
}


.flip-card-col {
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Efecto de giro en dispositivos que soportan hover */
@media (hover: hover) and (pointer: fine) {
  .flip-card-col:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
}
/* Efecto de giro cuando se toca en dispositivos táctiles (agregar script) */
.flip-card-col.touch .flip-card-inner {
  transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
  position: relative;
  pointer-events: none;
}
/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}

.overlay:before {
  border-radius: inherit;
  pointer-events: none;
}

.scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/* Fondo de la pista del scrollbar */
.scrollbar::-webkit-scrollbar-track {
  background: var(--bs-gray-100); /* #f1f1f1 */
  border-radius: inherit; /* bordes redondos */
}
/* Pulgar o thumb del scrollbar (la parte que se desliza) */
.scrollbar::-webkit-scrollbar-thumb {
  background: var(--bs-gray-500) ; /* #888 */
  border-radius: inherit; /* bordes redondos */
  border: 2px solid var(--bs-gray-100);
}
/* Cambia color al pasar el mouse */
.scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--bs-gray-600) ; /* #555 */
}


 .icon-stack.icon-stack-moon {
  position: relative;
}
.icon-stack-moon:before {
  content: '';
  --moon-size: 0.5rem;
  position: absolute;
  top: calc(0rem - var(--moon-size) / 2);
  left: 50%;
  width: 0;
  height: 0;
  background-color: #a0aec0;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
  animation: orbit 4s linear infinite;
  transition: width 0.3s ease, height 0.3s ease;
  z-index: 1;
}
.icon-stack-moon:hover:before {
  width: var(--moon-size);
  height: var(--moon-size);
}
/*
  Definimos el punto de rotación (transform-origin) para CADA TAMAÑO.
*/
/* Por defecto (2.5rem) */
.icon-stack.icon-stack-moon:before {
    transform-origin: 50% calc(2.5rem / 2 + 0.25rem);
}
/* Para el tamaño 'sm' (2rem) */
.icon-stack-sm.icon-stack-moon:before {
    transform-origin: 50% calc(2rem / 2 + 0.25rem);
}
/* Para el tamaño 'lg' (4rem) */
.icon-stack-lg.icon-stack-moon:before {
    transform-origin: 50% calc(4rem / 2 + 0.25rem);
}
/* Para el tamaño 'xl' (5rem) */
.icon-stack-xl.icon-stack-moon:before {
    transform-origin: 50% calc(5rem / 2 + 0.25rem);
}
/*
  Definimos la animación de órbita con @keyframes.
*/
@keyframes orbit {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

/* Animación para el círculo (path) */
.aos-animate > .feather-check-circle path {
  stroke-dasharray: 63; /* Longitud del trazo del círculo, calculada manualmente */
  stroke-dashoffset: 63; /* Ocultamos el trazo del círculo */
  animation: draw-circle 0.8s forwards ease-in-out .5s; /* Animación de 0.8s, con 1s de retraso */
}

/* Animación para el check (polyline) */
.aos-animate > .feather-check-circle polyline {
    stroke-dasharray: 45; /* Longitud del trazo del check */
    stroke-dashoffset: -45; /* Ocultamos el trazo del check */
    animation: draw-check 0.8s forwards ease-in-out .75s; /* Animación de 0.8s */
}

/* Keyframes para dibujar el check */
@keyframes draw-check {
    to {
        stroke-dashoffset: 0; /* Al final de la animación, el check es visible */
    }
}

/* Keyframes para dibujar el círculo */
@keyframes draw-circle {
  to {
    stroke-dashoffset: 0; /* Al final de la animación, el círculo es visible */
  }
}

.reveal-effect.masker:after{
  border-radius: inherit;
}

.text-unselectable {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Estándar */
}


.fancybox__container{
    --fancybox-bg: rgba(0, 0, 0, .5);
    /*margin: 1rem;*/
}