/* Editorial doc animation 2e — Checklist de cumplimiento
   Light-section tuned. Controlled by .is-ready / .is-playing / .is-paused (pw-hero-anim.js). */

.editorial-anim--2e {
    --dur: 8s;
    --ea-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ea-accent: var(--color-accent);
    --ea-doc-fill: #ffffff;
    --ea-doc-stroke: var(--color-border-alt, var(--color-border));
    --ea-doc-fold: var(--color-card-bg-alt);
    --ea-line: color-mix(in srgb, var(--color-text-alt) 30%, transparent);
    --ea-check-base: var(--color-card-bg-alt);

    width: 100%;
    max-width: min(100%, 18rem);
    margin-inline: auto;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.25s var(--ea-ease);
}

.editorial-anim--2e.is-ready,
.editorial-anim--2e.is-reduced {
    opacity: 1;
}

.editorial-anim--2e:not(.is-playing) .editorial-anim__animated,
.editorial-anim--2e.is-paused .editorial-anim__animated {
    animation-play-state: paused;
}

.editorial-anim--2e.is-playing .editorial-anim__animated {
    animation-play-state: running;
}

.editorial-anim--2e .editorial-anim__svg {
    display: block;
    width: 100%;
    height: auto;
}

.editorial-anim--2e .editorial-anim__checklist-doc {
    fill: var(--ea-doc-fill);
    stroke: var(--ea-doc-stroke);
    stroke-width: 1.5;
    stroke-linejoin: miter;
    stroke-miterlimit: 5;
}

.editorial-anim--2e .editorial-anim__checklist-fold {
    fill: var(--ea-doc-fold);
}

.editorial-anim--2e .editorial-anim__check-base {
    fill: var(--ea-check-base);
}

.editorial-anim--2e .editorial-anim__check {
    fill: var(--ea-accent);
    transform-box: fill-box;
    transform-origin: center;
}

.editorial-anim--2e .editorial-anim__check-line {
    stroke: var(--ea-line);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
}

@keyframes editorialAnimRowOn0 {
    0%, 8% { transform: scale(0.6); opacity: 0; }
    14% { transform: scale(1); opacity: 1; }
    84% { transform: scale(1); opacity: 1; }
    92%, 100% { transform: scale(0.6); opacity: 0; }
}

@keyframes editorialAnimRowOn1 {
    0%, 20% { transform: scale(0.6); opacity: 0; }
    26% { transform: scale(1); opacity: 1; }
    84% { transform: scale(1); opacity: 1; }
    92%, 100% { transform: scale(0.6); opacity: 0; }
}

@keyframes editorialAnimRowOn2 {
    0%, 32% { transform: scale(0.6); opacity: 0; }
    38% { transform: scale(1); opacity: 1; }
    84% { transform: scale(1); opacity: 1; }
    92%, 100% { transform: scale(0.6); opacity: 0; }
}

@keyframes editorialAnimRowOn3 {
    0%, 44% { transform: scale(0.6); opacity: 0; }
    50% { transform: scale(1); opacity: 1; }
    84% { transform: scale(1); opacity: 1; }
    92%, 100% { transform: scale(0.6); opacity: 0; }
}

@keyframes editorialAnimRowOn4 {
    0%, 56% { transform: scale(0.6); opacity: 0; }
    62% { transform: scale(1); opacity: 1; }
    84% { transform: scale(1); opacity: 1; }
    92%, 100% { transform: scale(0.6); opacity: 0; }
}

/* ── Brow mark — ~75px checklist replaces green rail-stop ───────────────── */
.anim-brow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Solid field under the SVG so spine cannot leak through viewBox padding */
.anim-brow .editorial-anim--2e {
    width: 7.5rem;
    max-width: 7.5rem;
    margin: 0;
    flex-shrink: 0;
    background-color: var(--color-bg-alt);
}

.sec--soft .anim-brow .editorial-anim--2e {
    background-color: var(--color-card-bg-alt);
}

.sec.sec--editorial:not(.sec--light) .anim-brow .editorial-anim--2e {
    background-color: var(--color-bg);
}

.anim-brow > .editorial-block__eyebrow,
.anim-brow > .editorial-block__title,
.anim-brow > .eyebrow {
    position: relative;
    width: 100%;
}

/* If rail-stop class is left on the child, kill the green square */
.anim-brow .rail-stop::before,
.anim-brow .rail-stop::after {
    content: none;
}