html, body{
    background-color: #fff;
    overflow-x: hidden;
  }

/* --- [ HERO BANNER ] --- */
@media (max-width: 768px) {
  .intro_section_layout_2{
    background-position: 75% center!important;
    position: relative;
  }
  .intro_section_layout_2 .dnd-column:first-of-type{
    background-color: rgba(255, 255, 255, .8)!important;
  }
}

/* --- [ Estilos hr ] --- */
hr {
border-radius: 30px;
}

.line-business-impact{
 margin-left: 0; 
width: 20px;  
border-radius: 30px;
border: solid 2px #5c51f2;  
}


/* --- [ CTAs ] --- */
/*cta 1 - ascending cards */
#explore-cta-1, #explore-cta-2 {
 border: 2px solid #5c51f2!important;
  background: none !important;
}

#explore-cta-1:hover, #explore-cta-2:hover {
  color: #fff !important;
  background: #5c51f2 !important;
}

#explore-cta-1 .explore-arrow {
  background: #5c51f2 !important;
}





/* --- [ Bordes redondeadoz ] --- */
.dnd_area-row-6-background-layers {
border-radius: 45px 45px 0 0;
}
.dnd_area-row-7-background-layers {
border-radius: 0 0 45px 45px;
}


/* --- [ Flow bolitas - How FRIDA enables controlled delegation to agents ] --- */
.flow {
  --step: 0.8s; /* tiempo entre un paso y el siguiente */
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
 
/* Riel (::before) y línea que se llena (::after) */
.flow::before,
.flow::after {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 2px;
  background: #e5e5f0;
}
.flow::after {
  background: #5c51f2;
  transform-origin: left;
  transition: transform calc(var(--step) * 6) linear;
}
 
.flow__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.flow__dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #5c51f2;
  border: 2px solid #5c51f2;
  border-radius: 50%;
  transition: background 0.6s, color 0.6s;
}
 
.flow__label {
  margin-top: 16px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #5c51f2;
  transition: opacity 0.6s;
}
 
/* Destello que viaja: cada paso brilla una vez cuando la línea llega a él */
.flow.is-visible .flow__dot {
  animation: flow-glow 1.6s ease-out calc(var(--i, 0) * var(--step));
}
@keyframes flow-glow {
  from { box-shadow: 0 0 0 0 rgba(156, 87, 255, 0.4); }
  to   { box-shadow: 0 0 0 18px rgba(156, 87, 255, 0); }
}
/* Al terminar el recorrido, todos destellan a la vez */
.flow.is-flash .flow__dot {
  animation: flow-flash 1.6s ease-out;
}
@keyframes flow-flash {
  from { box-shadow: 0 0 0 0 rgba(156, 87, 255, 0.5); }
  to   { box-shadow: 0 0 0 22px rgba(156, 87, 255, 0); }
}
 
/* Reinicio instantáneo (sin transiciones) antes de repetir */
.flow.is-reset *,
.flow.is-reset::after { transition: none !important; }
 
/* Estado inicial (solo si el JS está activo): todo apagado */
.flow.is-armed:not(.is-visible)::after { transform: scaleX(0); }
.flow.is-armed:not(.is-visible) .flow__dot { color: #1f3a5f; background: #fff; }
.flow.is-armed:not(.is-visible) .flow__label { opacity: 0.35; }
 
/* Cada paso se enciende cuando la línea llega a él */
.flow__dot,
.flow__label { transition-delay: calc(var(--i, 0) * var(--step)); }
 
/* Móvil: línea vertical */
@media (max-width: 899px) {
  .flow { flex-direction: column; }
 
  .flow::before,
  .flow::after {
    top: 22px;
    bottom: 22px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .flow::after { transform-origin: top; }
  .flow.is-armed:not(.is-visible)::after { transform: scaleY(0); }
 
  .flow__step {
    flex: none;
    flex-direction: row;
    gap: 16px;
    min-height: 44px;
    padding-bottom: 28px;
  }
  .flow__step:last-child { padding-bottom: 0; }
 
  .flow__dot { flex: none; }
  .flow__label {
    margin-top: 0;
    padding: 0;
    text-align: left;
    align-self: center;
  }
}
 
@media (prefers-reduced-motion: reduce) {
  .flow *,
  .flow::after { transition: none; animation: none; }
}


/* --- [ Pilas - Governance by design ] --- */
.pills {
   display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pills li {
 flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  color: #5c51f2;
  background: #fff;
  border: none;
  border-radius: 999px;
}
 
/* Móvil: dos por fila */
@media (max-width: 899px) {
  .pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .pills li {
    padding: 12px 16px;
    font-size: 14px;
    white-space: normal;
  }
}
@media (max-width: 899px) {
  .circles-wrapper {
  gap: 20px;
  }

  .circle-item {
    gap: 5px;
    padding: 0;
  }

}

/* listado */
  ul.espaciado-lista {
    margin: 8px;
  }
  ul.espaciado-lista li {
    font-size: 16px;
    font-weight: 300 !important;
    color: #1b1b1c;
    margin-bottom: 5px;
  }
  ul.espaciado-lista li::marker {
    color: #5c51f2;
  }



/* --- [ Cajas de texto - Where the work happens ] --- */
 .columnas {
    --ink: #e5e5f0;
    --ink-soft: #1b1b1c;
    --blue: #1948FF;
    --violet: #5C51F2;
    --teal: #00EFD2;
    --mist: #f5f5ff;
    --gap: 56px;
 
    display: grid;
    grid-template-columns: 1fr 1fr .9fr;
    column-gap: var(--gap);
    max-width: 1080px;
    margin: 0 auto;
  }
 
  .columnas .columna {
    display: flex;
    flex-direction: column;
  }
 
  .columnas h3 {
    margin: 0 0 14px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink-soft);
  }
 
  /* ---- Columnas 1 y 2: paneles ---- */
  .columnas .columna:nth-child(1),
  .columnas .columna:nth-child(2) {
    padding: 20px 20px 20px;
    border-radius: 25px;
  }
 
  /* Dentro de FRIDA */
  .columnas .columna:nth-child(1) {
    background: var(--ink);
  }
 
  /* Sistemas del cliente */
  .columnas .columna:nth-child(2) {
    position: relative;
    background: var(--mist);
    border: 2px dashed rgba(92, 81, 242, .7);
  }
 
  /* ---- Fichas ---- */
  .columnas .espaciado-lista2 {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: grid;
    grid-auto-rows: 1fr;
    gap: 8px;
  }
 
  .columnas .espaciado-lista2 li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 15px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    background: #fff;
    border: none;
    color: var(--ink-soft);
  }
 
  .columnas .espaciado-lista2 li::before {
    content: "";
    flex: none;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
 
  /* Punto lleno = vive en FRIDA */
  .columnas .columna:nth-child(1) .espaciado-lista2 li::before {
    background: var(--teal);
  }
 
  /* Punto hueco = sistema externo, conectado */
  .columnas .columna:nth-child(2) .espaciado-lista2 li::before {
    border: 2px solid var(--blue);
  }
 
  /* ---- Conector entre FRIDA y los sistemas ---- */
  .columnas .columna:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--gap) * -1);
    width: var(--gap);
    border-top: 2px dashed var(--violet);
    transform: translateY(-1px);
  }
  .columnas .columna:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--gap) / -2);
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--violet);
  }
 
  /* ---- Columna 3: texto libre ---- */
  .columnas .columna:nth-child(3) {
    padding: 20px 0 0;
  }
  .columnas .columna:nth-child(3) p {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ink-soft);
  }
 
  /* ---- Móvil: se apila y el conector pasa a vertical ---- */
  @media (max-width: 900px) {
    .columnas {
      --gap: 40px;
      grid-template-columns: 1fr;
      row-gap: var(--gap);
    }
    .columnas .columna:nth-child(2)::before {
      top: calc(var(--gap) * -1);
      left: 50%;
      width: 0;
      height: var(--gap);
      border-top: 0;
      border-left: 2px dashed var(--violet);
      transform: translateX(-1px);
    }
    .columnas .columna:nth-child(2)::after {
      top: calc(var(--gap) / -2);
      left: 50%;
    }
    .columnas .columna:nth-child(3) { 
      padding-top: 0; 
    }
  }

.ascending-cards-section#first-ascending-cards-section1 #gl-card-6 {
padding-top: 0;
  padding-bottom: 0;
}

  }

/* imagenes que se deslizan*/  
/* Imagen 1: izquierda → derecha */
#hs_cos_wrapper_widget_1792106768021 {
  opacity: 0;
  transform: translateX(-120px);
  transition: all 0.9s ease-out;
}

#hs_cos_wrapper_widget_1792106768021.is-visible {
  opacity: 1;
  transform: translateX(0);
}


  /* parallax imagen gusanito FRIDA */
  .dnd_area-row-9-background-layers, .dnd_area-row-10-background-layers, .dnd_area-row-11-background-layers {
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }