/* Flow component: infographic diagram – thin arrow ring, numbered steps, pill CTA. Scoped .flow- */

.flow-section {
  width: 100%;
  padding: clamp(4.5rem, 11vw, 7rem) 1.5rem clamp(2.5rem, 6vw, 4rem);
  background: #fff;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-align: start;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.flow-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Desktop: fixed layout so circle section always looks the same at any desktop size */
@media (min-width: 1280px) {
  .flow-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14rem;
    min-height: 520px;
    min-width: 1280px;
    max-width: 1400px;
  }
}

/* Diagram container: fixed 620×620 on desktop */
.flow-diagram {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
}

@media (min-width: 1280px) {
  .flow-diagram {
    width: 620px;
    max-width: 620px;
  }
}

.flow-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.flow-ring path {
  fill: none;
  stroke: #3E6EDB;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.flow-ring path.flow-ring-segment--active {
  stroke: #3E6EDB;
  stroke-width: 2.5;
  opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(62, 110, 219, 0.2));
}

.flow-ring .flow-ring-arrow {
  fill: #3E6EDB;
  opacity: 0.95;
  stroke: #3E6EDB;
  stroke-width: 0.5;
  stroke-linejoin: round;
}

/* Steps list – above ring so hover/click always hit steps */
.flow-steps {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 1;
}

.flow-steps > * {
  pointer-events: auto;
}

.flow-step {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  transform: translate(-50%, -50%);
  width: 380px;
  height: 380px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.flow-step:focus {
  outline: none;
}

.flow-step:focus-visible .flow-num {
  box-shadow: 0 0 0 2px #1a1a2e;
}

.flow-step:hover .flow-num,
.flow-step.is-active .flow-num {
  background: linear-gradient(180deg, #5a8af5 0%, #4a7ae8 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  filter: drop-shadow(0 12px 24px rgba(62, 110, 219, 0.35));
}

.flow-step.is-active {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .flow-step:hover .flow-num,
  .flow-step:hover .flow-icon,
  .flow-step.is-active .flow-num,
  .flow-step.is-active .flow-icon {
    transform: translate(-50%, -50%);
  }
  .flow-step:hover .flow-num,
  .flow-step.is-active .flow-num {
    filter: none;
  }
  .flow-num,
  .flow-icon {
    transition: none;
  }
  .flow-cta {
    transition: none;
  }
}

/* Number: on ring at 240px, 28px dot, centered on polar (no drift) */
.flow-num {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #4a7ae8 0%, #3E6EDB 100%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: background 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.35s ease-out, transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), filter 0.35s ease-out;
}

.flow-step:hover .flow-num,
.flow-step.is-active .flow-num {
  transform: translate(-50%, -50%) scale(1.08);
}

/* GENERAR click: dilatación uno por uno (circle animation per step) */
.flow-section.flow-section--generar-run .flow-step.is-active .flow-num {
  animation: flow-dilate 0.85s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes flow-dilate {
  0% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.32);
    box-shadow: 0 10px 28px rgba(62, 110, 219, 0.35);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.32);
    box-shadow: 0 10px 28px rgba(62, 110, 219, 0.35);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-section.flow-section--generar-run .flow-step.is-active .flow-num {
    animation: none;
  }
}

/* During GENERAR animation: no hover or click on steps until sequence finishes */
.flow-section.flow-section--generar-run .flow-steps .flow-step {
  pointer-events: none;
}

/* Icon: at radius 285px via --icon-dx/dy (polar), 56px, centered */
.flow-icon {
  position: absolute;
  left: calc(50% + var(--icon-dx, 0));
  top: calc(50% + var(--icon-dy, 0));
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  color: #1a1a2e;
  transition: color 0.35s ease-out, transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.flow-step:hover .flow-icon,
.flow-step.is-active .flow-icon {
  color: #3E6EDB;
  transform: translate(-50%, -50%) scale(1.30);
}

.flow-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Label: offset from number by --label-dx/dy; alignment via data-label-align */
.flow-label {
  position: absolute;
  left: calc(50% + var(--label-dx, 0));
  top: calc(50% + var(--label-dy, 0));
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a2e;
  max-width: 160px;
  width: max-content;
  transition: color 0.2s ease;
}

.flow-step[data-label-align="left"] .flow-label {
  transform: translate(0, -50%);
  text-align: left;
}
.flow-step[data-label-align="right"] .flow-label {
  transform: translate(-100%, -50%);
  text-align: right;
}
.flow-step[data-label-align="center"] .flow-label {
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Mobile: hide labels around circle (they get truncated); full text shows in panel on tap */
@media (max-width: 767px) {
  .flow-section {
    overflow-x: hidden;
  }

  .flow-section .flow-label {
    display: none;
  }

  .flow-diagram {
    max-width: min(100%, 280px);
    margin: 0 auto;
  }

  .flow-num {
    width: 22px;
    height: 22px;
    font-size: 0.6875rem;
  }

  .flow-icon {
    width: 34px;
    height: 34px;
  }

  .flow-icon img {
    width: 34px;
    height: 34px;
  }

  .flow-step {
    width: 72px;
    height: 72px;
  }

  .flow-cta {
    padding: 0.45rem 1rem;
    font-size: 0.75rem;
  }

  .flow-cta-sub {
    font-size: 0.625rem;
  }
}

/* Center CTA: wide pill + subtitle */
.flow-cta-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  z-index: 3;
}

.flow-cta {
  padding: 0.6rem 1.75rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #4a7ae8 0%, #3E6EDB 50%, #3560c9 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(62, 110, 219, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.flow-cta:hover {
  box-shadow: 0 18px 40px rgba(62, 110, 219, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.flow-cta:focus-visible {
  outline: 2px solid #3E6EDB;
  outline-offset: 3px;
}

.flow-cta-sub {
  font-size: 0.75rem;
  color: #5f6368;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .flow-cta {
    transition: none;
  }
}

/* Description panel – text container; height adapts to content */
.flow-panel {
  width: 100%;
  min-width: 320px;
  max-width: 520px;
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
  padding: 1.5rem 1.75rem;
  background: #fafbfc;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  border: 1px solid #e8ecf0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow-y: auto;
}

.flow-panel[aria-hidden="true"] {
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
}

.flow-panel[aria-hidden="false"] {
  opacity: 1;
  transform: translateX(0);
}

.flow-panel-title {
  margin: 0 0 0.65rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.flow-panel-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4a4f5a;
}

@media (prefers-reduced-motion: reduce) {
  .flow-panel,
  .flow-panel[aria-hidden="false"] {
    transition: none;
  }
  .flow-panel[aria-hidden="true"] {
    transform: none;
  }
}