/*
 * Configuración de periodos de nómina — Nómina.
 * Concepto: el calendario de taco. Cada periodo es una hoja con su número grande; al cambiar de ejercicio
 * se desprende la última hoja de 2026 y queda el periodo 01 de 2027, ya configurado. El flujo es una
 * cuadrícula de calendario y el ejemplo una línea de tiempo que cruza la frontera 2026 | 2027.
 * Dorado = periodo actual; verde = configurado / proceso fiscal.
 * Display Sofia Sans Condensed; numerales en Sofia Sans Extra Condensed; cuerpo Inter.
 * Momento animado único: en el hero se desprende la hoja de 2026 y se marca el periodo 01.
 */
[data-function-layout="periodos-nomina"] {
    --pn-ink: #041f49;
    --pn-gold: #fac63f;
    --pn-gold-tint: #fdf3d3;
    --pn-gold-text: #7a5600;
    --pn-blue-tint: #e6edf7;
    --pn-green: #17734f;
    --pn-green-tint: #e3f2ea;
    --pn-paper: #f2f4f7;
    --pn-line: #dde3ea;
    --pn-muted: #46505e;
    --pn-text: #1f2a3d;
    --pn-display: "Sofia Sans Condensed", "Hanken Grotesk", ui-sans-serif, sans-serif;
    --pn-numeral: "Sofia Sans Extra Condensed", "Sofia Sans Condensed", ui-sans-serif, sans-serif;
}

[data-function-layout="periodos-nomina"] .cv-hero-title,
[data-function-layout="periodos-nomina"] .cv-section-title,
[data-function-layout="periodos-nomina"] .cv-form-title {
    font-family: var(--pn-display);
    font-weight: 800;
    letter-spacing: -.01em;
}
[data-function-layout="periodos-nomina"] .cv-section-title { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.06; }
[data-function-layout="periodos-nomina"] .pn-narrow { max-width: 46rem; }

/* ---------- Superficies ---------- */
[data-function-layout="periodos-nomina"] .pn-paper { background: var(--pn-paper); }
[data-function-layout="periodos-nomina"] .pn-navy { background: var(--pn-ink); color: #fff; }
[data-function-layout="periodos-nomina"] .pn-navy .cv-section-title { color: #fff; }
[data-function-layout="periodos-nomina"] .pn-split { display: grid; gap: 2.5rem 4rem; align-items: center; }
[data-function-layout="periodos-nomina"] .pn-split--top { align-items: start; }
[data-function-layout="periodos-nomina"] .pn-lead {
    max-width: 42rem;
    margin-top: 1.25rem;
    color: var(--pn-text);
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    line-height: 1.8;
}

/* ---------- Hero ---------- */
[data-function-layout="periodos-nomina"] #inicio {
    background: linear-gradient(155deg, #041f49 0%, #0a2c5c 70%, #0f3870 100%);
    color: #fff;
}
[data-function-layout="periodos-nomina"] #inicio .function-hero__media img { object-position: 65% 50%; }
[data-function-layout="periodos-nomina"] #inicio .function-hero__overlay {
    background:
        linear-gradient(180deg, transparent 65%, rgb(4 31 73 / .7) 100%),
        linear-gradient(90deg, rgb(4 31 73 / .97) 0%, rgb(4 31 73 / .9) 42%, rgb(10 44 92 / .72) 70%, rgb(15 56 112 / .55) 100%);
}
[data-function-layout="periodos-nomina"] .rh-hero-layout { position: relative; z-index: 1; align-items: center; }
[data-function-layout="periodos-nomina"] #inicio .cv-hero-title {
    max-width: 13ch;
    color: #fff;
    font-size: clamp(2.75rem, 5.4vw, 4.75rem);
    line-height: .98;
}
[data-function-layout="periodos-nomina"] #inicio .cv-hero-description { max-width: 34rem; margin-top: 1.5rem; color: rgb(255 255 255 / .86); }
[data-function-layout="periodos-nomina"] .pn-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
[data-function-layout="periodos-nomina"] #inicio .cv-primary-button { border-color: var(--pn-gold); background: var(--pn-gold); color: var(--pn-ink); box-shadow: 0 14px 30px rgb(0 0 0 / .3); }
[data-function-layout="periodos-nomina"] #inicio .cv-primary-button:hover,
[data-function-layout="periodos-nomina"] #inicio .cv-primary-button:focus-visible { background: #ffd666; }
[data-function-layout="periodos-nomina"] #inicio .cv-secondary-button { border-color: rgb(255 255 255 / .7); background: transparent; color: #fff; }
[data-function-layout="periodos-nomina"] #inicio .cv-secondary-button:hover,
[data-function-layout="periodos-nomina"] #inicio .cv-secondary-button:focus-visible { background: #fff; color: var(--pn-ink); }
[data-function-layout="periodos-nomina"] #inicio .cv-primary-button:focus-visible,
[data-function-layout="periodos-nomina"] #inicio .cv-secondary-button:focus-visible { outline: 3px solid var(--pn-gold); outline-offset: 3px; }

/* Calendario de taco: el estilo base es el estado final (hoja de 2026 ya desprendida). */
[data-function-layout="periodos-nomina"] .pn-pad { position: relative; justify-self: center; width: 100%; max-width: 24rem; margin: 0; }
[data-function-layout="periodos-nomina"] .pn-pad .cv-icon { width: 15px; height: 15px; flex-basis: 15px; }
[data-function-layout="periodos-nomina"] .pn-pad__binding {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 1.5rem;
    margin: 0 .75rem -.35rem;
    border-radius: .35rem .35rem .15rem .15rem;
    background: linear-gradient(180deg, #d7dce3, #aab2bd);
}
[data-function-layout="periodos-nomina"] .pn-pad__binding i { width: .65rem; height: .65rem; border-radius: 50%; background: #0a1d3d; box-shadow: inset 0 1px 2px rgb(0 0 0 / .6); }
[data-function-layout="periodos-nomina"] .pn-pad__stack { position: relative; display: grid; perspective: 1100px; }
[data-function-layout="periodos-nomina"] .pn-page {
    grid-area: 1 / 1;
    display: grid;
    justify-items: center;
    overflow: hidden;
    padding: 0 1.5rem 1.4rem;
    border-radius: 0 0 .35rem .35rem;
    background: #fff;
    color: var(--pn-ink);
    text-align: center;
    transform-origin: top center;
    backface-visibility: hidden;
}
/* Grosor del taco: las hojas siguientes asoman por debajo. */
[data-function-layout="periodos-nomina"] .pn-page.is-new { box-shadow: 0 4px 0 -1px #e4e8ee, 0 8px 0 -2px #cfd5de, 0 30px 60px rgb(0 0 0 / .38); }
[data-function-layout="periodos-nomina"] .pn-page__year {
    width: calc(100% + 3rem);
    margin: 0 0 .4rem;
    padding: .7rem .5rem .6rem;
    background: var(--pn-ink);
    color: #fff;
    font-family: var(--pn-display);
    font-size: 1.1rem;
    font-weight: 700;
}
[data-function-layout="periodos-nomina"] .pn-page.is-old .pn-page__year { background: #5d6673; }
[data-function-layout="periodos-nomina"] .pn-page__num {
    margin: 0;
    font-family: var(--pn-numeral);
    font-size: clamp(6.5rem, 12vw, 9rem);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: .88;
}
[data-function-layout="periodos-nomina"] .pn-page.is-old .pn-page__num { color: #5d6673; }
[data-function-layout="periodos-nomina"] .pn-page__label { margin: .1rem 0 0; color: var(--pn-muted); font-family: var(--pn-display); font-size: 1.15rem; font-weight: 700; }
[data-function-layout="periodos-nomina"] .pn-page__range { margin: .3rem 0 0; color: var(--pn-text); font-size: .95rem; font-weight: 600; }
[data-function-layout="periodos-nomina"] .pn-page__status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .9rem;
    padding: .35rem .7rem;
    border-radius: .3rem;
    background: var(--pn-green-tint);
    color: var(--pn-green);
    font-size: .8rem;
    font-weight: 700;
    animation: pn-pop .35s ease 1.55s both;
}
[data-function-layout="periodos-nomina"] .pn-page.is-old { z-index: 2; opacity: 0; transform: rotateX(-105deg); animation: pn-tear 1s cubic-bezier(.55, 0, .75, .2) .65s both; }

[data-function-layout="periodos-nomina"] .pn-strip { margin-top: 1.75rem; }
[data-function-layout="periodos-nomina"] .pn-strip__label { margin: 0 0 .55rem; color: rgb(255 255 255 / .8); font-size: .8rem; font-weight: 700; }
[data-function-layout="periodos-nomina"] .pn-strip ol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .25rem; margin: 0; padding: 0; list-style: none; }
[data-function-layout="periodos-nomina"] .pn-strip li {
    display: grid;
    place-items: center;
    height: 1.8rem;
    border-radius: .2rem;
    background: rgb(255 255 255 / .08);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
    color: rgb(255 255 255 / .75);
    font-family: var(--pn-numeral);
    font-size: .9rem;
    font-weight: 800;
}
[data-function-layout="periodos-nomina"] .pn-strip li.is-current { background: var(--pn-gold); box-shadow: none; color: var(--pn-ink); animation: pn-current .4s ease 1.45s both; }

/* ---------- Qué es: ruta de menú y tareas relacionadas ---------- */
/* En línea, no flex: así el punto que sigue a la ruta no puede quedar solo al inicio del renglón. */
[data-function-layout="periodos-nomina"] .pn-path__item { padding: .1rem .45rem; border-radius: .3rem; background: var(--pn-paper); box-shadow: inset 0 0 0 1px var(--pn-line); color: var(--pn-ink); font-weight: 600; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-function-layout="periodos-nomina"] .pn-path__sep { color: var(--pn-muted); font-weight: 700; }

[data-function-layout="periodos-nomina"] .pn-lanes { display: grid; gap: 1.5rem; padding: clamp(1.4rem, 3vw, 2rem); border: 2px solid var(--pn-ink); border-radius: .5rem; background: #fff; }
[data-function-layout="periodos-nomina"] .pn-lanes__text { margin: 0; color: var(--pn-text); font-size: 1.0625rem; line-height: 1.75; }
[data-function-layout="periodos-nomina"] .pn-lanes__fig { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr); gap: .5rem; align-items: stretch; margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--pn-line); }
[data-function-layout="periodos-nomina"] .pn-lane { display: grid; align-content: start; gap: .4rem; padding: 1rem; border-radius: .4rem; }
[data-function-layout="periodos-nomina"] .pn-lane.is-ops { background: var(--pn-gold-tint); }
[data-function-layout="periodos-nomina"] .pn-lane.is-tax { background: var(--pn-green-tint); }
[data-function-layout="periodos-nomina"] .pn-lane__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .4rem; background: #fff; color: var(--pn-ink); }
[data-function-layout="periodos-nomina"] .pn-lane.is-tax .pn-lane__icon { color: var(--pn-green); }
[data-function-layout="periodos-nomina"] .pn-lane__label { color: var(--pn-muted); font-size: .78rem; font-weight: 700; }
[data-function-layout="periodos-nomina"] .pn-lane strong { color: var(--pn-ink); font-family: var(--pn-display); font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
/* Enlace punteado entre las dos tareas. */
[data-function-layout="periodos-nomina"] .pn-lanes__link { position: relative; align-self: center; margin: 0; padding-top: 1.1rem; color: var(--pn-muted); font-size: .75rem; font-weight: 700; line-height: 1.3; text-align: center; }
[data-function-layout="periodos-nomina"] .pn-lanes__link::before { content: ""; position: absolute; top: .35rem; right: 0; left: 0; border-top: 2px dashed #9aa8b8; }

/* ---------- Tabla: qué revisar ---------- */
[data-function-layout="periodos-nomina"] .pn-table { width: 100%; margin-top: 2.5rem; border-collapse: collapse; }
[data-function-layout="periodos-nomina"] .pn-table thead th {
    padding: .9rem 1.1rem;
    border-bottom: 3px solid var(--pn-ink);
    color: var(--pn-ink);
    font-family: var(--pn-display);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: left;
}
[data-function-layout="periodos-nomina"] .pn-table tbody th,
[data-function-layout="periodos-nomina"] .pn-table td {
    padding: 1.15rem 1.1rem;
    border-bottom: 1px solid var(--pn-line);
    color: var(--pn-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    text-align: left;
    vertical-align: middle;
}
[data-function-layout="periodos-nomina"] .pn-table tbody th { width: 34%; color: var(--pn-ink); font-weight: 700; }
[data-function-layout="periodos-nomina"] .pn-row-icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: .75rem;
    border-radius: .35rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--pn-line);
    color: var(--pn-ink);
    vertical-align: middle;
}
[data-function-layout="periodos-nomina"] .pn-row-icon .cv-icon { width: 18px; height: 18px; flex-basis: 18px; }

/* ---------- Flujo: cuadrícula de calendario ---------- */
[data-function-layout="periodos-nomina"] .pn-steps {
    display: grid;
    gap: 1px;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgb(255 255 255 / .2);
    background: rgb(255 255 255 / .2);
}
[data-function-layout="periodos-nomina"] .pn-steps li { display: grid; align-content: start; gap: .7rem; padding: 1.4rem 1.5rem 1.6rem; background: var(--pn-ink); }
[data-function-layout="periodos-nomina"] .pn-steps__num { color: var(--pn-gold); font-family: var(--pn-numeral); font-size: 3.25rem; font-variant-numeric: tabular-nums; font-weight: 900; line-height: .9; }
[data-function-layout="periodos-nomina"] .pn-steps p { margin: 0; color: rgb(255 255 255 / .9); font-size: 1.0625rem; line-height: 1.6; }

/* ---------- Ejemplo: línea de tiempo que cruza el cambio de ejercicio ---------- */
[data-function-layout="periodos-nomina"] .pn-timeline { position: relative; display: grid; margin: 3.25rem 0 0; padding: 0; list-style: none; }
[data-function-layout="periodos-nomina"] .pn-timeline::before { content: ""; position: absolute; top: calc(1.35rem - 1px); right: 0; left: 0; height: 2px; background: var(--pn-line); }
[data-function-layout="periodos-nomina"] .pn-timeline li { position: relative; padding: 2.75rem 1.75rem 0 0; }
[data-function-layout="periodos-nomina"] .pn-timeline__dot { position: absolute; top: .8rem; left: 0; width: 1.1rem; height: 1.1rem; border: 3px solid #9aa8b8; border-radius: 50%; background: #fff; }
[data-function-layout="periodos-nomina"] .pn-timeline li.is-next-year .pn-timeline__dot { border-color: var(--pn-ink); background: var(--pn-gold); }
[data-function-layout="periodos-nomina"] .pn-timeline__year {
    position: absolute;
    top: -2.1rem;
    bottom: 0;
    left: -.9rem;
    padding-left: .5rem;
    border-left: 2px dashed var(--pn-ink);
    color: var(--pn-ink);
    font-family: var(--pn-numeral);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}
[data-function-layout="periodos-nomina"] .pn-timeline__moment { margin: 0; color: var(--pn-ink); font-family: var(--pn-display); font-size: 1.3rem; font-weight: 800; line-height: 1.15; }
[data-function-layout="periodos-nomina"] .pn-timeline li:first-child .pn-timeline__moment { color: var(--pn-muted); }
[data-function-layout="periodos-nomina"] .pn-timeline__check { margin: .5rem 0 0; color: var(--pn-text); font-size: 1rem; line-height: 1.6; }
[data-function-layout="periodos-nomina"] .pn-disclaimer { display: flex; gap: .6rem; max-width: 50rem; margin: 2.25rem 0 0; color: var(--pn-muted); font-size: .95rem; line-height: 1.6; }
[data-function-layout="periodos-nomina"] .pn-disclaimer .cv-icon { width: 20px; height: 20px; flex-basis: 20px; margin-top: .1rem; }

/* ---------- Contexto fiscal: qué se mantiene, qué se actualizó y qué no sustituye ---------- */
[data-function-layout="periodos-nomina"] .pn-changes { display: grid; gap: .9rem; margin: 0; }
[data-function-layout="periodos-nomina"] .pn-changes__group { padding: 1.1rem 1.25rem; border-radius: .4rem; background: #fff; box-shadow: inset 0 0 0 1px var(--pn-line); }
[data-function-layout="periodos-nomina"] .pn-changes__label { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; color: var(--pn-ink); font-family: var(--pn-display); font-size: 1.2rem; font-weight: 800; }
[data-function-layout="periodos-nomina"] .pn-changes__label .cv-icon { width: 20px; height: 20px; flex-basis: 20px; }
[data-function-layout="periodos-nomina"] .pn-changes ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
[data-function-layout="periodos-nomina"] .pn-changes li { position: relative; padding-left: 1rem; color: var(--pn-text); line-height: 1.55; }
[data-function-layout="periodos-nomina"] .pn-changes li::before { content: ""; position: absolute; top: .6em; left: 0; width: .4rem; height: .4rem; border-radius: .1rem; background: currentColor; opacity: .5; }
[data-function-layout="periodos-nomina"] .pn-changes__group.is-keeps .pn-changes__label .cv-icon { color: var(--pn-green); }
[data-function-layout="periodos-nomina"] .pn-changes__group.is-updated .pn-changes__label { color: var(--pn-gold-text); }
[data-function-layout="periodos-nomina"] .pn-changes__group.is-operation { background: var(--pn-ink); box-shadow: none; }
[data-function-layout="periodos-nomina"] .pn-changes__group.is-operation .pn-changes__label { color: var(--pn-gold); }
[data-function-layout="periodos-nomina"] .pn-changes__group.is-operation li { color: #fff; }

/* ---------- Periodo, prenómina y timbrado ---------- */
[data-function-layout="periodos-nomina"] .pn-moments { position: relative; display: grid; gap: 2rem; margin: 2.75rem 0 0; padding: 0; list-style: none; }
[data-function-layout="periodos-nomina"] .pn-moments li { position: relative; display: grid; align-content: start; gap: .6rem; }
[data-function-layout="periodos-nomina"] .pn-moments__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--pn-ink); color: #fff; box-shadow: 0 0 0 6px #fff; }
[data-function-layout="periodos-nomina"] .pn-moments li:nth-child(2) .pn-moments__icon { background: var(--pn-gold); color: var(--pn-ink); }
[data-function-layout="periodos-nomina"] .pn-moments li:nth-child(3) .pn-moments__icon { background: var(--pn-green); }
[data-function-layout="periodos-nomina"] .pn-moments__name { margin: .35rem 0 0; color: var(--pn-ink); font-family: var(--pn-display); font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
[data-function-layout="periodos-nomina"] .pn-moments__goal { max-width: 24rem; margin: 0; color: var(--pn-text); font-size: 1.0625rem; line-height: 1.6; }
[data-function-layout="periodos-nomina"] .pn-moments__goal-label { display: block; margin-bottom: .15rem; color: var(--pn-muted); font-size: .82rem; font-weight: 700; }

/* ---------- Checklist ---------- */
[data-function-layout="periodos-nomina"] .pn-checklist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--pn-ink); }
[data-function-layout="periodos-nomina"] .pn-checklist li {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--pn-line);
    color: var(--pn-text);
    font-size: 1.0625rem;
    line-height: 1.6;
}
[data-function-layout="periodos-nomina"] .pn-checklist__box { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: .05rem; border: 2px solid var(--pn-ink); border-radius: .3rem; background: #fff; color: var(--pn-ink); }
[data-function-layout="periodos-nomina"] .pn-checklist__box .cv-icon { width: 16px; height: 16px; flex-basis: 16px; stroke-width: 2.4; }

/* ---------- Contenido relacionado y fuentes ---------- */
[data-function-layout="periodos-nomina"] .pn-related { display: grid; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
[data-function-layout="periodos-nomina"] .pn-related__link {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.1rem 1.2rem;
    border-radius: .45rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--pn-line);
    color: var(--pn-text);
    text-decoration: none;
}
[data-function-layout="periodos-nomina"] .pn-related__link:hover { box-shadow: inset 0 0 0 2px var(--pn-ink); }
[data-function-layout="periodos-nomina"] .pn-related__link:focus-visible { outline: 3px solid var(--pn-ink); outline-offset: 3px; }
[data-function-layout="periodos-nomina"] .pn-related__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .4rem; background: var(--pn-paper); color: var(--pn-ink); }
[data-function-layout="periodos-nomina"] .pn-related__text strong { display: block; color: var(--pn-ink); font-family: var(--pn-display); font-size: 1.25rem; font-weight: 800; }
[data-function-layout="periodos-nomina"] .pn-related__text > span { display: block; margin-top: .25rem; color: var(--pn-muted); font-size: .95rem; line-height: 1.55; }

[data-function-layout="periodos-nomina"] .pn-sources { padding-top: 1.25rem; border-top: 3px solid var(--pn-ink); }
[data-function-layout="periodos-nomina"] .pn-sources__title { margin: 0; color: var(--pn-ink); font-family: var(--pn-display); font-size: 1.35rem; font-weight: 800; }
[data-function-layout="periodos-nomina"] .pn-sources ul { display: grid; gap: .9rem; margin: 1rem 0 0; padding: 0; list-style: none; }
[data-function-layout="periodos-nomina"] .pn-sources a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .6rem; color: var(--pn-ink); font-weight: 600; line-height: 1.5; text-decoration: underline; text-decoration-color: rgb(4 31 73 / .35); text-underline-offset: .2em; }
[data-function-layout="periodos-nomina"] .pn-sources a:hover { text-decoration-color: currentColor; }
[data-function-layout="periodos-nomina"] .pn-sources a:focus-visible { outline: 3px solid var(--pn-ink); outline-offset: 3px; }
[data-function-layout="periodos-nomina"] .pn-sources .cv-icon { width: 20px; height: 20px; flex-basis: 20px; margin-top: .1rem; }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
    [data-function-layout="periodos-nomina"] .pn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    [data-function-layout="periodos-nomina"] .rh-hero-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    [data-function-layout="periodos-nomina"] .pn-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-function-layout="periodos-nomina"] .pn-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [data-function-layout="periodos-nomina"] .pn-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    [data-function-layout="periodos-nomina"] .pn-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
    /* Línea que une los tres momentos a la altura de sus íconos. */
    [data-function-layout="periodos-nomina"] .pn-moments::before { content: ""; position: absolute; top: calc(1.625rem - 1px); right: 0; left: 0; height: 2px; background: var(--pn-line); }
}
@media (max-width: 1023px) {
    [data-function-layout="periodos-nomina"] #inicio .function-hero__overlay {
        background: linear-gradient(180deg, rgb(4 31 73 / .95) 0%, rgb(4 31 73 / .86) 50%, rgb(10 44 92 / .7) 100%);
    }
    [data-function-layout="periodos-nomina"] #inicio .cv-hero-title { max-width: none; }

    /* La línea de tiempo se vuelve vertical y el cambio de año, un separador horizontal. */
    [data-function-layout="periodos-nomina"] .pn-timeline { margin-top: 2.5rem; }
    [data-function-layout="periodos-nomina"] .pn-timeline::before { top: 0; bottom: 0; left: calc(.55rem - 1px); right: auto; width: 2px; height: auto; }
    [data-function-layout="periodos-nomina"] .pn-timeline li { padding: 0 0 1.75rem 2.25rem; }
    [data-function-layout="periodos-nomina"] .pn-timeline li:last-child { padding-bottom: 0; }
    [data-function-layout="periodos-nomina"] .pn-timeline__dot { top: .15rem; }
    [data-function-layout="periodos-nomina"] .pn-timeline__year { position: static; display: block; margin: 0 0 1rem -2.25rem; padding: .5rem 0 0 2.25rem; border-top: 2px dashed var(--pn-ink); border-left: 0; }
    /* El punto del primer momento de 2027 se alinea con su texto, debajo del separador de año. */
    [data-function-layout="periodos-nomina"] .pn-timeline__year + .pn-timeline__dot { top: 3.375rem; }
}
@media (max-width: 767px) {
    [data-function-layout="periodos-nomina"] .pn-hero__actions > * { width: 100%; }
    [data-function-layout="periodos-nomina"] .pn-strip ol { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    [data-function-layout="periodos-nomina"] .pn-lanes__fig { grid-template-columns: minmax(0, 1fr); }
    [data-function-layout="periodos-nomina"] .pn-lanes__link { padding: 0 0 0 1.2rem; text-align: left; }
    [data-function-layout="periodos-nomina"] .pn-lanes__link::before { top: -.25rem; bottom: -.25rem; right: auto; left: .4rem; border-top: 0; border-left: 2px dashed #9aa8b8; }

    [data-function-layout="periodos-nomina"] .pn-table thead { display: none; }
    [data-function-layout="periodos-nomina"] .pn-table,
    [data-function-layout="periodos-nomina"] .pn-table tbody,
    [data-function-layout="periodos-nomina"] .pn-table tr,
    [data-function-layout="periodos-nomina"] .pn-table tbody th,
    [data-function-layout="periodos-nomina"] .pn-table td { display: block; width: 100%; }
    [data-function-layout="periodos-nomina"] .pn-table tr { padding: .5rem 0; border-bottom: 1px solid var(--pn-line); }
    [data-function-layout="periodos-nomina"] .pn-table tbody th,
    [data-function-layout="periodos-nomina"] .pn-table td { padding: .6rem .85rem; border-bottom: 0; }
    [data-function-layout="periodos-nomina"] .pn-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .2rem;
        color: var(--pn-muted);
        font-size: .82rem;
        font-weight: 700;
    }
}

/* ---------- Keyframes ---------- */
/* La hoja de 2026 se levanta desde el engargolado y se desprende. */
@keyframes pn-tear {
    0% { opacity: 1; transform: rotateX(0); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: rotateX(-105deg); }
}
@keyframes pn-current {
    from { background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .75); }
}
@keyframes pn-pop {
    from { opacity: 0; transform: scale(.85); }
}

@media (prefers-reduced-motion: reduce) {
    [data-function-layout="periodos-nomina"] *,
    [data-function-layout="periodos-nomina"] *::before,
    [data-function-layout="periodos-nomina"] *::after {
        animation: none !important;
        transition: none !important;
    }
}