html {
  overflow-y: scroll !important; /* Asegura que el scrollbar siempre esté visible */
}

body, :root {
	
	--escala-4xs: 0.0625rem; /* 1px */
	--escala-3xs: 0.125rem: /* 2px */
	--escala-2xs: 0.25rem; /* 4px */
	--escala-1xs: 0.5rem; /* 8px */
	--escala-sm: 0.75rem; /* 12px */
	--escala-md: 1rem; /* 16px */
	--escala-lg: 1.25rem; /* 20px */
	--escala-1xl: 1.5rem; /* 24px */
	--escala-2xl: 1.75rem; /* 28px */
	--escala-3xl: 2rem; /* 32px */
	--escala-4xl: 2.25rem; /* 36px */
	
	--blanco: #ffffff;
	--negro: #000000;
	
	--gris-10: #F4F4F4;
	--gris-20: #E0E0E0;
	--gris-30: #C6C6C6;
	--gris-40: #A8A8A8;
	--gris-50: #8D8D8D;
	--gris-60: #6F6F6F;
	--gris-70: #525252;
	--gris-80: #393939;
	--gris-90: #262626;
	--gris-100: #161616;
	
	--azul-10: #EDF5FF;
	--azul-20: #D0E2FF;
	--azul-30: #A6C8FF;
	--azul-40: #78A9FF;
	--azul-50: #4589FF;
	--azul-60: #0F62FE;
	--azul-70: #0043CE;
	--azul-80: #002D9C;
	--azul-90: #001D6C;
	--azul-100: #001141;
	
	--verde-10: #6F6F6F;
	--verde-60: #6F6F6F;

	--amarillo-10: #6F6F6F;
	--amarillo-60: #6F6F6F;
	
	--naranja-10: #6F6F6F;
	--naranja-60: #6F6F6F;
	
	--rojo-10: #6F6F6F;
	--rojo-60: #6F6F6F;
	

    font-size: 16px;
	line-height: 1;
	color: var(--gris-60);
	
	
	
	--shiny-cta-bg: var(--negro);
  --shiny-cta-bg-subtle: var(--azul-80);
  --shiny-cta-fg: var(--blanco);
  --shiny-cta-highlight: var(--azul-40);
  --shiny-cta-highlight-subtle: var(--blanco);

	
}



h1 {
	font-size: var(--escala-4xl) !important;
	margin-top: var(--escala-4xl);
}
h2 {
	font-size: var(--escala-3xl) !important;
}
h3 {
	font-size: var(--escala-2xl) !important;
	margin-top: var(--escala-2xl);
}
h4 {
	font-size: var(--escala-1xl) !important;
	margin-top: var(--escala-1xl);
}
h5 { font-size: var(--escala-lg) !important; }
h6, p { font-size: var(--escala-md) !important; }

.espaciado div h1 { margin-top: var(--escala-4xl); }
.espaciado div h2 { margin-top: var(--escala-3xl); }
.espaciado div h3 { margin-top: var(--escala-2xl); }
.espaciado div h4 { margin-top: var(--escala-1xl); }
.espaciado div h5 { margin-top: var(--escala-lg); }
.espaciado div h6 { margin-top: var(--escala-md); }

.red{
	background: red !important;
}

span {
	font-size: var(--size-sm) !important;
	white-space: nowrap !important;
    display: inline !important;
}

b, strong {font-weight: 600 !important;}

p {
	margin: 0 !important;
	max-width: 64ch !important;
}

p + p {
  margin-top: 1rem !important; /* Añade margen solo entre párrafos consecutivos */
}

@media (max-width: 672px) {
    :root {
        /* font-size: 12px; */
    }
}

/* Scroll bar */
*::-webkit-scrollbar { height: 12px; width: 12px; }
*::-webkit-scrollbar-track { border-radius: 0px; background-color: #F4F4F4; }
*::-webkit-scrollbar-track:hover { background-color: #F4F4F4; }
*::-webkit-scrollbar-track:active { background-color: #F4F4F4; }
*::-webkit-scrollbar-thumb { border-radius: 0px; background-color: #e0e0e0; }
*::-webkit-scrollbar-thumb:hover { background-color: #e0e0e0; }
*::-webkit-scrollbar-thumb:active { background-color: #0F62FE; }

/* Elementor */


/* Crocoblock */
.jet-button__state .jet-button__label {
	font-size: var(--escala-md) !important;
}
.jet-animated-text__animated-text{
	border-radius: .25rem;
}




.si-copy {
	display: ruby;
}
.si-copy .si-copy-button{
	position: relative;
	top: 0;
	display: block;
	margin-left: 8px;
	cursor: pointer;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--azul-10);
	transition: background 0.3s ease;
	padding: 0.25rem;
	border-radius: 0.125rem;
}
.si-copy .si-copy-button:hover{
	background: var(--azul-60);
}

.si-copy .si-copy-button svg {
    fill: var(--azul-60); 
    transition: fill 0.3s ease;
}

.si-copy .si-copy-button:hover svg {
    fill: var(--azul-10);
}

si-copy{
	display: none;
}


.si-no-hover,
.si-no-hover .elementor-widget-container .elementor-wrapper video.elementor-video{
	pointer-events: none !important;
}



.jet-sticky-section--stuck .jet-nav-wrap span.jet-nav-link-text {
	color: var(--azul-90);
}

.jet-sticky-section--stuck .jet-nav-wrap span.jet-nav-link-text:hover {
	color: var(--azul-60);
}

.jet-sticky-section--stuck div#si-logo figcaption {
	color: var(--azul-90);
}

.jet-sticky-section--stuck div#si-search svg {
	fill: var(--azul-90);
}
.jet-sticky-section--stuck div#si-search a:hover {
	background-color: var(--azul-10);
}
.jet-sticky-section--stuck div#si-search svg:hover {
	fill: var(--azul-60);
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.shiny-cta {
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 15px 30px;
	font-family: var(--e-global-typography-fccbc4e-font-family);
    font-weight: var(--e-global-typography-fccbc4e-font-weight);
    font-style: var(--e-global-typography-fccbc4e-font-style);
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--shiny-cta-fg);
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
      padding-box,
    conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-cta-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
      )
      border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);

  &::before,
  &::after,
  span::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
  }

  &:active {
    translate: 0 1px;
  }
}

.jet-sticky-section--stuck .shiny-cta {
  background: linear-gradient(var(--azul-60), var(--azul-60))
      padding-box,
    conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-cta-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
      )
      border-box;
}

/* Dots pattern */
.shiny-cta::before {
  --size: calc(250% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
      circle at var(--position) var(--position),
      white calc(var(--position) / 4),
      transparent 0
    )
    padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.6;
  z-index: -1;
}

/* Inner shimmer */
.shiny-cta::after {
  --animation: shimmer linear infinite;
  width: 125%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-cta-highlight),
    transparent
  );
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}

.shiny-cta span {
  z-index: 1;

  &::before {
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
    opacity: 0;
  }
}

/* Animate */
.shiny-cta {
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent,
    --gradient-shine;

  &,
  &::before,
  &::after {
    animation: var(--animation) var(--duration),
      var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
  }

  span::before {
    transition: opacity var(--transition);
    animation: calc(var(--duration) * 1.5) breathe linear infinite;
  }
}

.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);

  &,
  &::before,
  &::after {
    animation-play-state: running;
  }

  span::before {
    opacity: 1;
  }
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
}

@keyframes shimmer {
  to {
    rotate: 360deg;
  }
}

@keyframes breathe {
  from,
  to {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
}



@keyframes floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Ajusta el valor para cambiar la amplitud del movimiento */
  }
  100% {
    transform: translateY(0);
  }
}

.si-floating {
  animation: floating 2s ease-in-out infinite; /* Ajusta los valores para modificar la velocidad y suavidad */
}