/* Hero doc animation 1a — Flujo al archivo (homepage preview)
   Light-hero tuned. Controlled by .is-ready / .is-playing / .is-paused (pw-hero-anim.js). */

.hero-anim--1a {
    --dur: 8s;
    --ha-ease: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic ≈ power3.out */
    --ha-accent: var(--color-accent);
    --ha-stroke: var(--color-border-alt, var(--color-border));
    --ha-lane: color-mix(in srgb, var(--color-border-alt, var(--color-border)) 70%, transparent);
    --ha-slot-fill: var(--color-card-bg-alt);
    --ha-slot-stroke: var(--color-border-alt, var(--color-border));
    --ha-doc-fill: var(--color-bg-alt);
    --ha-doc-stroke: var(--color-border-alt, var(--color-border));
    --ha-line: color-mix(in srgb, var(--color-text-alt) 30%, transparent);
    --ha-idle-opacity: 0.42;
    --ha-travel: 568px;

    width: 100%;
    max-width: none;
    margin-inline: 0;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.25s var(--ha-ease);
}

.hero-anim--1a.is-ready,
.hero-anim--1a.is-reduced {
    opacity: 1;
}

.hero-anim--1a:not(.is-playing) .hero-anim__animated,
.hero-anim--1a.is-paused .hero-anim__animated {
    animation-play-state: paused;
}

.hero-anim--1a.is-playing .hero-anim__animated {
    animation-play-state: running;
}

.hero-anim__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Lanes */
.hero-anim__lane {
    stroke: var(--ha-lane);
    stroke-width: 1.5;
    stroke-dasharray: 6 14;
    fill: none;
    animation: heroAnimDashMove 1.6s linear infinite;
}

.hero-anim__lane--mid {
    animation-duration: 2.3s;
}

.hero-anim__lane--low {
    animation-duration: 1.9s;
}

.hero-anim__lane--rev {
    animation-direction: reverse;
}

/* Flow dots — direction via modifier class */
.hero-anim__dot {
    fill: var(--ha-accent);
    transform-box: fill-box;
    transform-origin: center;
    animation: heroAnimFlowDotX var(--dur) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.hero-anim__dot--from-right {
    animation-name: heroAnimFlowDotXNeg;
}

.hero-anim__dot--from-top {
    animation-name: heroAnimFlowDotY;
}

.hero-anim__dot--from-bottom {
    animation-name: heroAnimFlowDotYNeg;
}

/* Archive slots */
.hero-anim__slot {
    fill: var(--ha-slot-fill);
    stroke: var(--ha-slot-stroke);
    stroke-width: 1.5;
    stroke-linejoin: miter;
    stroke-miterlimit: 5;
}

.hero-anim__slot--active {
    animation: heroAnimSlotGlow var(--dur) linear infinite;
    animation-delay: var(--delay, 0s);
}

/* Flying docs — fill-box + center origin so scale/rotate stay on lane midline */
.hero-anim__flyer {
    transform-box: fill-box;
    transform-origin: center;
    animation: heroAnimFlyIn var(--dur) var(--ha-ease) infinite;
    animation-delay: var(--delay, 0s);
}

.hero-anim__doc-shape {
    fill: var(--ha-doc-fill);
    stroke: var(--ha-doc-stroke);
    stroke-width: 1.5;
    stroke-linejoin: miter;
    stroke-miterlimit: 5;
}

.hero-anim__doc-line {
    stroke: var(--ha-line);
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
}

.hero-anim__doc-line--accent {
    stroke: var(--ha-accent);
}

.hero-anim__doc--idle {
    opacity: var(--ha-idle-opacity);
}

/* Translate-X only — origin-independent; keeps doc center on the lane */
@keyframes heroAnimFlyIn {
    0% {
        transform: translate(var(--sx, -800px), 0);
        opacity: 0;
    }
    8% { opacity: 1; }
    36% {
        transform: translate(0, 0);
        opacity: 1;
    }
    78% {
        transform: translate(0, 0);
        opacity: 1;
    }
    84% {
        transform: translate(0, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 0;
    }
}

@keyframes heroAnimSlotGlow {
    0%, 30% { stroke: var(--ha-slot-stroke); }
    34%, 48% { stroke: var(--ha-accent); }
    56%, 100% { stroke: var(--ha-slot-stroke); }
}

@keyframes heroAnimDashMove {
    to { stroke-dashoffset: -40; }
}

/* Travel during approach; arrive at grid edge (~36%). --ha-travel set per-dot. */
@keyframes heroAnimFlowDotX {
    0%, 4% { opacity: 0; transform: translateX(0); }
    8% { opacity: 1; transform: translateX(0); }
    36% { opacity: 1; transform: translateX(var(--ha-travel, 588px)); }
    42% { opacity: 0; transform: translateX(var(--ha-travel, 588px)); }
    100% { opacity: 0; transform: translateX(var(--ha-travel, 588px)); }
}

@keyframes heroAnimFlowDotXNeg {
    0%, 4% { opacity: 0; transform: translateX(0); }
    8% { opacity: 1; transform: translateX(0); }
    36% { opacity: 1; transform: translateX(calc(-1 * var(--ha-travel, 90px))); }
    42% { opacity: 0; transform: translateX(calc(-1 * var(--ha-travel, 90px))); }
    100% { opacity: 0; transform: translateX(calc(-1 * var(--ha-travel, 90px))); }
}

@keyframes heroAnimFlowDotY {
    0%, 4% { opacity: 0; transform: translateY(0); }
    8% { opacity: 1; transform: translateY(0); }
    36% { opacity: 1; transform: translateY(var(--ha-travel, 100px)); }
    42% { opacity: 0; transform: translateY(var(--ha-travel, 100px)); }
    100% { opacity: 0; transform: translateY(var(--ha-travel, 100px)); }
}

@keyframes heroAnimFlowDotYNeg {
    0%, 4% { opacity: 0; transform: translateY(0); }
    8% { opacity: 1; transform: translateY(0); }
    36% { opacity: 1; transform: translateY(calc(-1 * var(--ha-travel, 100px))); }
    42% { opacity: 0; transform: translateY(calc(-1 * var(--ha-travel, 100px))); }
    100% { opacity: 0; transform: translateY(calc(-1 * var(--ha-travel, 100px))); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-anim--1a {
        opacity: 1;
        transition: none;
    }

    .hero-anim--1a .hero-anim__animated {
        animation: none !important;
    }

    .hero-anim--1a .hero-anim__flyer {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-anim--1a .hero-anim__lane,
    .hero-anim--1a .hero-anim__dot {
        visibility: hidden;
    }

    .hero-anim--1a .hero-anim__slot--active {
        stroke: var(--ha-accent);
    }

    .hero-anim--1a .hero-anim__doc--idle {
        opacity: 0.55;
    }
}

/* Cropped 2×2 cluster for Nuestras Soluciones intro */
.hero-anim--1a-excerpt {
    max-width: min(100%, 34rem);
    margin-inline: auto;
    overflow: visible;
}

/* Left-pin in the visual column so lanes meet the copy/grid rail (hero pattern) */
.soluciones__intro-visual .hero-anim--1a-excerpt {
    width: 100%;
    margin-inline: 0;
}

/* Responsive wrapper sizing — containers only; SVG scales via viewBox */
@media (max-width: 1024px) {
    .hero-anim--1a {
        max-width: min(100%, 48rem);
        min-height: clamp(14rem, 26vw, 22rem);
    }

    .hero-anim--1a-excerpt {
        max-width: min(100%, 28rem);
        min-height: clamp(10rem, 20vw, 16rem);
    }
}

@media (max-width: 768px) {
    .hero-anim--1a {
        max-width: min(100%, 36rem);
        min-height: clamp(12rem, 34vw, 18rem);
    }

    .hero-anim--1a-excerpt {
        max-width: min(100%, 24rem);
        min-height: clamp(9rem, 28vw, 14rem);
    }
}

@media (max-width: 480px) {
    .hero-anim--1a {
        max-width: 100%;
        min-height: clamp(10rem, 46vw, 14rem);
    }

    .hero-anim--1a-excerpt {
        max-width: 100%;
        min-height: clamp(8rem, 42vw, 12rem);
    }
}