/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/
html, html a {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
.current-menu-item a span.menu-text{
  color: #00ffc8!important;
}
#menu-footer a, #menu-legal a{
	padding-bottom: 0;
}
.seq-login a span{
  text-transform: uppercase;
  color: #00ffc8;
  font-size: 12px;
}

.awb-off-canvas .wpml-ls-item a.wpml-ls-link{
  padding-left: 0;
  pading-right: 0;
  font-size: 20px;
  font-weight: light;
}
.awb-off-canvas .seq-login a span{
  text-transform: uppercase;
  color: #212934;
  font-size: 20px;
  font-weight: light;
}
.fusion-button[data-hover*=bg_slide]:before{
	background: #ededed!important;
}
.seq-luz{
	position: absolute!important;
	top: 50px;
	right: -100px;
}
ul.seq-guion{
	padding-left: 0;
}
.seq-guion li{
	list-style-type: none;
}
.seq-guion li::before {
	content: "·";
	margin-right: 8px;
	display: inline-block;
}
/* Estilos base para la animación */
.seq-icon-animation {
  opacity: 0 !important;
  transform: scaleX(0.2) scaleY(1.5) !important;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  display: inline-block !important;
}

.seq-icon-animation.seq-visible {
  opacity: 1 !important;
  transform: scaleX(1) scaleY(1) !important;
}
/* Efecto acordeón */
/* Contenedor principal */
.accordion-sections {
  display: flex;
  width: 100%;
  height: 500px; /* Ajusta según necesites */
  position: relative;
  overflow: hidden;
}

/* Estilos base de cada sección */
.section {
  flex: 1;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
}

/* Fondos de ejemplo para cada sección */
.section-1 {
  background-image: url('https://wearesequence.ai/wp-content/uploads/2026/03/seq-acordeon-os.jpg');
}

.section-2 {
  background-image: url('https://wearesequence.ai/wp-content/uploads/2026/03/seq-acordeon-integration.jpg');
}

.section-3 {
  background-image: url('https://wearesequence.ai/wp-content/uploads/2026/03/seq-acordeon-accounting.jpg');
}

/* Overlay negro con 85% de opacidad */
.section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,   /* #000 al 10% arriba */
    rgba(0, 0, 0, 0.9) 100%  /* #000 al 90% abajo */
);
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* Contenido de cada sección */
.section-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px;
  color: #fff;
  text-align: center;
  transition: all 0.3s ease;
}
.hover-active .section-content{
	flex-direction: column;
	align-items:center;

}
/* Parallax */
.seq-parallax {
    position: relative;
    overflow: hidden;
}

/* Asegurar que el contenido quede por encima */
.seq-parallax .fusion-column-wrapper {
    position: relative;
    z-index: 1;
}

.seq-parallax-bg {
    transition: transform 0.1s linear;
}
/* Contenido por defecto */
.default-content {
  transition: all 0.3s ease;
  margin-top: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hover-active .default-content{
	margin-top: 0;
	flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}
/* Versión más dinámica con rebote */
.default-content img {
  width: 60%;
  transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center center;
  filter: brightness(0.85);
  opacity: 0.95;
  margin-bottom: 150px;
}

.hover-active .default-content img {
  width: 100%;
  transform: scale(1.05) rotate(1deg);
  filter: brightness(1);
  opacity: 1;
  margin-bottom: 0;
}

/* Efecto de "rebote" en la imagen al hacer hover */
@keyframes imagePop {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.hover-active .default-content img {
  animation: imagePop 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.default-content h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

.default-content p {
  font-size: 16px;
  line-height: 1.6;
}

/* Contenido que aparece solo en hover */
.hover-content {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  margin-top: 20px;
  display: none;
}

.hover-content h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.hover-content button {
  margin-top: 15px;
  padding: 10px 20px;
  background: #fff;
  color: #000;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hover-content button:hover {
  background: #ff6b6b;
  color: #fff;
  transform: translateY(-2px);
}

/* Estado HOVER de la sección activa */
.section.hover-active {
  flex: 1.5; /* Ocupa 1/2 del total (1.5 de 3 partes) */
}

.section.hover-active .section-overlay {
  opacity: 1;
}

.section.hover-active .default-content {
  transform: translateY(20px);
}

.section.hover-active .hover-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  text-align: left;
  display: block;
}

/* Efecto para las secciones vecinas cuando una está en hover */
.accordion-sections:has(.section.hover-active) .section:not(.hover-active) {
  flex: 0.75;
}

/* Transiciones suaves */
.section,
.section-overlay,
.default-content,
.hover-content {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-content h3{
	color: #fff!important;
	font-size: 20px!important;
	margin-bottom: 20px;
	font-family: Sora;
}
.hover-content p{
	color: #fff;
	font-family: Sora;
	font-size: 14px;
	margin-bottom: 14px;
}
.seq-col-black .fusion-column-wrapper{
  border-radius: 50px!important;
}
.hover-active .hover-content{
	width: 100%;
}
a.seq-cta:hover .fusion-button-text {
  color: #000000!important;
}
.seq-col-deg .fusion-column-wrapper {
    position: relative;
    border-radius: 25px!important;
    background: transparent !important;
    z-index: 1;
}
/* .seq-glow .seq-col-deg .fusion-column-wrapper{
    box-shadow: 0 0 20px var(--awb-color6)!important;
} */
.seq-col-deg .fusion-column-wrapper .fusion-column-wrapper{
  box-shadow: none!important;
}
/* Capa de borde degradado (fondo) */
.seq-col-deg .fusion-column-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        -70deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );
    border-radius: 27px;
    z-index: 0;
    pointer-events: none;
}
.seq-col-deg .fusion-column-wrapper .fusion-column-wrapper::before{
  content: none;
  background:transparent!important;
}
/* Capa negra interior (encima del degradado) */
.seq-col-deg .fusion-column-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .85) !important;
    border-radius: 25px;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
}


.seq-col-deg .fusion-column-wrapper .fusion-column-wrapper::after{
  content: none;
  background:transparent!important;
}
.seq-col-deg.seq-col-1 .fusion-column-wrapper::after{
  background-image: url('https://wearesequence.ai/wp-content/uploads/2026/03/seq-luz-04.png');
  background-position: 100% -60%;
}
.seq-col-deg.seq-col-2 .fusion-column-wrapper::after{
  background-image: url('https://wearesequence.ai/wp-content/uploads/2026/03/seq-luz-05.png');
  background-position: 70% -40%;
}
.seq-col-deg.seq-col-3 .fusion-column-wrapper::after{
  background-image: url('https://wearesequence.ai/wp-content/uploads/2026/03/seq-luz-06.png');
  background-position: 70% -40%;
}
.seq-col-deg.col-seq-glow .fusion-column-wrapper::after{
  background-image: url('https://wearesequence.ai/wp-content/uploads/2026/04/seq-luz-07.png');
  background-position: 125% 40%;
}
/* Asegurar que el contenido quede por encima */
.seq-col-deg .fusion-column-wrapper > * {
    position: relative;
    z-index: 2;
}
.seq-col-black .fusion-column-wrapper .fusion-builder-row{
  align-items: stretch;
}

/* Animación rebote */
/* Contenedor base para mantener el layout estable */
.seq-anim {
    display: inline-block;
    overflow: visible!important;
}

/* La imagen dentro del span con seq-anim */
.seq-anim img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    will-change: transform;
}

/* Al hacer hover: primero crece */
.seq-anim:hover img {
    transform: scale(1.08);
}

/* Keyframes que combinan el crecimiento con el rebote elástico */
@keyframes seqBounceEffect {
    /* Fase 1: Crecimiento suave (0% - 40%) */
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.15);
    }
    
    /* Fase 2: Primer rebote - encoger horizontal y estirar vertical (40% - 55%) */
    55% {
        transform: scaleX(0.85) scaleY(1.25);
    }
    65% {
        transform: scaleX(1.1) scaleY(0.9);
    }
    
    /* Fase 3: Segundo rebote más sutil (65% - 80%) */
    75% {
        transform: scaleX(0.95) scaleY(1.05);
    }
    85% {
        transform: scaleX(1.02) scaleY(0.98);
    }
    
    /* Fase 4: Estado final estable (85% - 100%) */
    100% {
        transform: scale(1.15);
    }
}
.seq-logo-offcanvas img{
  width: 250px;
}
/* Al quitar el hover: vuelta suave al estado original */
.seq-anim:not(:hover) img {
    transform: scale(1);
}

@keyframes seqReset {
    from {
        transform: scale(1.15);
    }
    to {
        transform: scale(1);
    }
}

.seq-flotar {
    display: inline-block;
}

.seq-flotar img {
    animation: flotar 4s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

@keyframes flotar {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}
@media (max-width: 1200px) {
  .fusion-title h1{
    font-size: 48px!important;
    line-height: 50px!important;
  }
  .fusion-text p{
    font-size: 20px;
    line-height: 22px;
  }
  .fusion-title h2{
    font-size: 35px!important;
    line-height: 36px!important;
  }
}
@media (max-width: 576px) {
  .fusion-title h1{
    font-size: 38px!important;
    line-height: 40px!important;
  }
  .fusion-text p{
    font-size: 18px;
    line-height: 20px;
  }

  .fusion-title h2{
    font-size: 28px!important;
    line-height: 30px!important;
  }
  .seq-guion li::before {
    content: none;
  }
}
@media (max-width: 420px){
  .fusion-title h1{
    font-size: 35px!important;
    line-height: 37px!important;
  }
  .fusion-text.seq-14 p{
    font-size: 16px;
    line-height: 18px;
  }
}