/* =========================================================
NORMATIVA APLICABLE - CONTRALORÍA DISTRITAL DE MEDELLÍN
CSS COMPLETO
========================================================= */

.norm-page {
    --norm-green-950: #001f18;
    --norm-green-900: #002d22;
    --norm-green-850: #00372a;
    --norm-green-800: #003f2f;
    --norm-green-700: #075d46;
    --norm-green-500: #0b7a35;

    --norm-lime: #8bd936;
    --norm-lime-bright: #a8f247;

    --norm-white: #ffffff;
    --norm-paper: #f5f1e8;
    --norm-soft: #f1f6f2;
    --norm-text: #213d34;
    --norm-muted: #66766f;

    --norm-border: rgba(0, 63, 47, 0.12);
    --norm-shadow: 0 22px 60px rgba(0, 45, 34, 0.12);
    --norm-shadow-lg: 0 34px 90px rgba(0, 45, 34, 0.18);

    --norm-container: 1400px;

    color: var(--norm-text);

    background: var(--norm-white);

}

.norm-page *,
.norm-page *::before,
.norm-page *::after {
    box-sizing: border-box;
}

.norm-page h1,
.norm-page h2,
.norm-page h3,
.norm-page p {
    margin-top: 0;
}

.norm-page a {
    text-decoration: none;
}

.norm-page button,
.norm-page input,
.norm-page select {
    font: inherit;
}

.norm-shell {
    width: min(calc(100% - 40px),
            var(--norm-container));

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
COMUNES
========================================================= */

.norm-eyebrow,
.norm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--norm-green-500);

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.norm-kicker::before {
    content: "";

    width: 30px;
    height: 3px;

    border-radius: 999px;

    background: var(--norm-lime);
}

.norm-kicker--lime {
    color: var(--norm-lime);
}

.norm-btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 22px;

    border-radius: 12px;

    font-size: 0.82rem;
    font-weight: 900;

    transition:
        transform 180ms ease,
        background 180ms ease;
}

.norm-btn:hover {
    transform: translateY(-3px);
}

.norm-btn--lime {
    color: var(--norm-green-950);

    background: var(--norm-lime);
}

.norm-btn--lime:hover {
    color: var(--norm-green-950);

    background: var(--norm-lime-bright);
}

.norm-btn--glass {
    border: 1px solid rgba(255, 255, 255, 0.22);

    color: var(--norm-white);

    background: rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(14px);
}

.norm-btn--glass:hover {
    color: var(--norm-white);

    background: rgba(255, 255, 255, 0.10);
}


/* =========================================================
HERO
========================================================= */

.norm-hero {
    position: relative;

    min-height: 820px;

    padding: 96px 0 0;

    overflow: hidden;

    background:
        radial-gradient(circle at 78% 25%,
            rgba(139, 217, 54, 0.16),
            transparent 27%),
        linear-gradient(135deg,
            var(--norm-green-950),
            var(--norm-green-900) 55%,
            #004a38);
}

.norm-hero::after {
    content: "";

    position: absolute;

    left: -8%;
    right: -8%;
    bottom: -108px;

    height: 180px;

    border-radius:
        50% 50% 0 0 / 42% 42% 0 0;

    background: var(--norm-white);
}

.norm-hero__grid {
    position: absolute;
    inset: 0;

    opacity: 0.15;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px);

    background-size: 54px 54px;
}

.norm-hero__halo {
    position: absolute;

    border: 1px solid rgba(139, 217, 54, 0.12);
    border-radius: 50%;

    pointer-events: none;
}

.norm-hero__halo--one {
    width: 520px;
    height: 520px;

    right: -180px;
    top: 40px;

    box-shadow:
        0 0 0 75px rgba(139, 217, 54, 0.013),
        0 0 0 150px rgba(139, 217, 54, 0.007);
}

.norm-hero__halo--two {
    width: 220px;
    height: 220px;

    left: -90px;
    bottom: 150px;

    border-color: rgba(255, 255, 255, 0.07);
}

.norm-hero__layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 70px;

    align-items: center;
}

.norm-hero__copy {
    padding-bottom: 145px;
}

.norm-hero .norm-eyebrow {
    margin-bottom: 25px;

    color: var(--norm-lime);
}

.norm-hero__copy h1 {
    max-width: 830px;

    margin-bottom: 28px;

    color: var(--norm-white);

    font-size:
        clamp(4rem,
            6.6vw,
            7rem);

    font-weight: 830;
    line-height: 0.87;
    letter-spacing: -0.058em;
}

.norm-hero__copy h1 span {
    display: block;

    color: var(--norm-lime);

    font-weight: 350;
    font-style: italic;
}

.norm-hero__copy>p {
    max-width: 700px;

    color: rgba(255, 255, 255, 0.69);

    font-size: 1.04rem;
    line-height: 1.76;
}

.norm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 34px;
}

.norm-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 42px;
}

.norm-hero__chips span {
    padding: 8px 11px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;

    color: rgba(255, 255, 255, 0.50);

    background: rgba(255, 255, 255, 0.035);

    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* =========================================================
VISUAL
========================================================= */

.norm-hero__visual {
    position: relative;

    min-height: 540px;
}

.norm-visual {
    position: absolute;

    left: 50%;
    top: 46%;

    width: min(500px, 100%);
    aspect-ratio: 1;

    transform: translate(-50%, -50%);
}

.norm-visual__ring {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
}

.norm-visual__ring--1 {
    width: 100%;
    height: 100%;
}

.norm-visual__ring--2 {
    width: 72%;
    height: 72%;

    border-color: rgba(139, 217, 54, 0.22);
}

.norm-visual__ring--3 {
    width: 43%;
    height: 43%;
}

.norm-visual__core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 160px;
    height: 160px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    color: var(--norm-green-950);

    background: var(--norm-lime);

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.28);
}

.norm-visual__core small {
    font-size: 0.58rem;
    font-weight: 850;
    text-transform: uppercase;
}

.norm-visual__core strong {
    margin-top: 3px;

    font-size: 2rem;
}

.norm-visual__core span {
    font-size: 0.62rem;
    font-weight: 750;
}

.norm-visual__node {
    position: absolute;

    min-width: 130px;

    padding: 13px 14px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 13px;

    color: rgba(255, 255, 255, 0.82);

    background: rgba(255, 255, 255, 0.055);

    backdrop-filter: blur(12px);

    font-size: 0.68rem;
    font-weight: 780;
}

.norm-visual__node span {
    display: block;

    margin-bottom: 4px;

    color: var(--norm-lime);

    font-size: 0.58rem;
    font-weight: 900;
}

.norm-visual__node--1 {
    left: 4%;
    top: 8%;
}

.norm-visual__node--2 {
    right: 0;
    top: 22%;
}

.norm-visual__node--3 {
    right: 4%;
    bottom: 10%;
}

.norm-visual__node--4 {
    left: 4%;
    bottom: 14%;
}


/* =========================================================
MENÚ BAJO EL BANNER
========================================================= */

.norm-nav {
    position: sticky;
    top: 0;

    z-index: 1 !important;

    width: 100%;

    padding: 18px 0;

    border-bottom: 1px solid rgba(0, 63, 47, 0.08);

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 250, 247, 0.98));

    box-shadow:
        0 14px 34px rgba(0, 45, 34, 0.08);

    backdrop-filter: blur(18px);
}

.norm-nav::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 4px;

    background:
        linear-gradient(90deg,
            var(--norm-green-950),
            var(--norm-green-700),
            var(--norm-lime));
}

.norm-nav__inner {
    min-height: 68px;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 26px;

    align-items: center;

    padding: 0 18px;

    border: 1px solid rgba(0, 63, 47, 0.08);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow:
        0 10px 24px rgba(0, 45, 34, 0.07);
}

.norm-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: var(--norm-green-950);
}

.norm-nav__brand-mark {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    color: var(--norm-green-950);

    background: var(--norm-lime);

    font-size: 0.76rem;
    font-weight: 950;
}

.norm-nav__brand-copy strong,
.norm-nav__brand-copy small {
    display: block;
}

.norm-nav__brand-copy strong {
    font-size: 0.82rem;
}

.norm-nav__brand-copy small {
    margin-top: 2px;

    color: var(--norm-muted);

    font-size: 0.68rem;
}

.norm-nav__menu {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.norm-nav__menu a {
    position: relative;

    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 11px;

    border-radius: 11px;

    color: var(--norm-green-900);

    font-size: 0.68rem;
    font-weight: 800;

    transition:
        background 160ms ease,
        color 160ms ease;
}

.norm-nav__menu a:hover,
.norm-nav__menu a.is-active {
    color: var(--norm-green-950);

    background: var(--norm-soft);
}

.norm-nav__menu a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 6px;

    width: 0;
    height: 3px;

    border-radius: 999px;

    background: var(--norm-lime);

    transform: translateX(-50%);

    transition:
        width 180ms ease;
}

.norm-nav__menu a:hover::after,
.norm-nav__menu a.is-active::after {
    width: 38px;
}

.norm-nav__toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 10px;

    border: 0;
    border-radius: 12px;

    background: var(--norm-green-950);

    cursor: pointer;
}

.norm-nav__toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 4px 0;

    background: var(--norm-white);
}

#normRequisitos,
#normConsulta,
#leyes,
#decretos,
#normativa,
#gacetas,
#fuentes {
    scroll-margin-top: 122px;
}


/* =========================================================
SECCIONES
========================================================= */

.norm-section {
    padding: 115px 0;
}

.norm-section--white {
    background: var(--norm-white);
}

.norm-section--paper {
    background: var(--norm-paper);
}

.norm-section-head {
    display: grid;
    grid-template-columns: 1fr 0.58fr;
    gap: 75px;

    align-items: end;

    margin-bottom: 50px;
}

.norm-section-head h2 {
    max-width: 820px;

    margin: 12px 0 0;

    color: var(--norm-green-950);

    font-size:
        clamp(2.8rem,
            5vw,
            5rem);

    line-height: 0.95;
    letter-spacing: -0.045em;
}

.norm-section-head h2 span {
    display: block;

    color: var(--norm-green-500);

    font-weight: 350;
    font-style: italic;
}

.norm-section-head>p {
    margin: 0;

    color: var(--norm-muted);

    line-height: 1.74;
}

.norm-section-head--light h2 {
    color: var(--norm-white);
}

.norm-section-head--light h2 span {
    color: var(--norm-lime);
}

.norm-section-head--light>p {
    color: rgba(255, 255, 255, 0.60);
}


/* =========================================================
REQUISITOS
========================================================= */

.norm-requirements-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.norm-requirement-card {
    position: relative;

    min-height: 330px;

    display: flex;
    flex-direction: column;

    padding: 24px;

    overflow: hidden;

    border: 1px solid var(--norm-border);
    border-radius: 22px;

    background: var(--norm-soft);

    transition:
        transform 200ms ease,
        box-shadow 200ms ease;
}

.norm-requirement-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--norm-shadow);
}

.norm-requirement-card--accent {
    color: var(--norm-white);

    background: var(--norm-green-950);
}

.norm-requirement-card__number {
    color: var(--norm-lime);

    font-size: 2rem;
    font-weight: 900;
}

.norm-requirement-card small {
    margin-top: 28px;

    color: var(--norm-green-500);

    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.norm-requirement-card--accent small {
    color: var(--norm-lime);
}

.norm-requirement-card h3 {
    margin: 9px 0 0;

    color: inherit;

    font-size: 1.25rem;
    line-height: 1.17;
}

.norm-requirement-card p {
    color: var(--norm-muted);

    font-size: 0.82rem;
    line-height: 1.58;
}

.norm-requirement-card--accent p {
    color: rgba(255, 255, 255, 0.60);
}

.norm-requirement-card a {
    margin-top: auto;

    color: var(--norm-green-700);

    font-size: 0.72rem;
    font-weight: 900;
}

.norm-requirement-card--accent a {
    color: var(--norm-lime);
}


/* =========================================================
BUSCADOR
========================================================= */

.norm-search-section {
    padding: 95px 0;

    background: var(--norm-lime);
}

.norm-search-panel {
    padding: 32px;

    border-radius: 28px;

    background: var(--norm-green-950);

    box-shadow:
        0 30px 75px rgba(0, 45, 34, 0.24);
}

.norm-search-panel__copy h2 {
    margin: 12px 0 0;

    color: var(--norm-white);

    font-size:
        clamp(2.5rem,
            4vw,
            4rem);

    line-height: 0.98;
    letter-spacing: -0.04em;
}

.norm-search-panel__copy h2 span {
    display: block;

    color: var(--norm-lime);

    font-weight: 350;
    font-style: italic;
}

.norm-search-panel__controls {
    display: grid;
    grid-template-columns: 1fr 280px auto;
    gap: 12px;

    align-items: end;

    margin-top: 32px;
}

.norm-search-field,
.norm-select-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.norm-search-field span,
.norm-select-field span {
    color: rgba(255, 255, 255, 0.72);

    font-size: 0.7rem;
    font-weight: 850;
}

.norm-search-field input,
.norm-select-field select {
    min-height: 50px;

    padding: 0 14px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;

    color: var(--norm-green-950);

    background: var(--norm-white);

    outline: none;
}

.norm-clear-btn {
    min-height: 50px;

    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;

    color: var(--norm-white);

    background: rgba(255, 255, 255, 0.07);

    font-weight: 850;

    cursor: pointer;
}

.norm-search-panel__meta {
    display: flex;
    justify-content: space-between;
    gap: 18px;

    margin: 22px 0 16px;

    color: rgba(255, 255, 255, 0.52);

    font-size: 0.75rem;
}

.norm-search-panel__meta strong {
    color: var(--norm-lime);
}

.norm-search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.norm-search-card {
    min-height: 190px;

    display: flex;
    flex-direction: column;

    padding: 18px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.045);
}

.norm-search-card small {
    color: var(--norm-lime);

    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.norm-search-card h3 {
    margin: 8px 0 0;

    color: var(--norm-white);

    font-size: 1rem;
    line-height: 1.18;
}

.norm-search-card a {
    margin-top: auto;

    color: var(--norm-lime);

    font-size: 0.7rem;
    font-weight: 900;
}

.norm-search-empty {
    grid-column: 1 / -1;

    padding: 30px;

    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 16px;

    color: rgba(255, 255, 255, 0.60);

    text-align: center;
}


/* =========================================================
TARJETAS DE LEYES
========================================================= */

.norm-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.norm-law-card {
    min-height: 295px;

    display: flex;
    flex-direction: column;

    padding: 23px;

    border: 1px solid var(--norm-border);
    border-radius: 20px;

    background: var(--norm-white);

    box-shadow:
        0 8px 25px rgba(0, 63, 47, 0.05);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.norm-law-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--norm-shadow);
}

.norm-law-card__top {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    align-items: center;
}

.norm-law-card__top span {
    color: var(--norm-green-500);

    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.norm-law-card__top small {
    padding: 6px 9px;

    border-radius: 999px;

    color: var(--norm-green-950);

    background: var(--norm-soft);

    font-size: 0.58rem;
    font-weight: 800;
}

.norm-law-card h3 {
    margin: 19px 0 0;

    color: var(--norm-green-950);

    font-size: 1.2rem;
    line-height: 1.15;
}

.norm-law-card p {
    margin: 12px 0 0;

    color: var(--norm-muted);

    font-size: 0.82rem;
    line-height: 1.56;
}

.norm-law-card a {
    margin-top: auto;
    padding-top: 18px;

    color: var(--norm-green-700);

    font-size: 0.72rem;
    font-weight: 900;
}


/* =========================================================
DECRETOS
========================================================= */

.norm-decrees {
    padding: 115px 0;

    background:
        radial-gradient(circle at 88% 16%,
            rgba(139, 217, 54, 0.10),
            transparent 25%),
        var(--norm-green-950);
}

.norm-decree-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.norm-decree-card {
    min-height: 290px;

    display: flex;
    flex-direction: column;

    padding: 23px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.045);

    transition:
        transform 180ms ease,
        background 180ms ease;
}

.norm-decree-card:hover {
    transform: translateY(-5px);

    background: rgba(255, 255, 255, 0.075);
}

.norm-decree-card small {
    color: var(--norm-lime);

    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.norm-decree-card h3 {
    margin: 11px 0 0;

    color: var(--norm-white);

    font-size: 1.18rem;
    line-height: 1.16;
}

.norm-decree-card p {
    margin: 12px 0 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.81rem;
    line-height: 1.55;
}

.norm-decree-card a {
    margin-top: auto;
    padding-top: 18px;

    color: var(--norm-lime);

    font-size: 0.72rem;
    font-weight: 900;
}


/* =========================================================
NORMATIVA APLICABLE
========================================================= */

.norm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 22px;
}

.norm-tab {
    min-height: 44px;

    padding: 0 17px;

    border: 1px solid var(--norm-border);
    border-radius: 999px;

    color: var(--norm-green-950);

    background: var(--norm-white);

    font-weight: 850;

    cursor: pointer;
}

.norm-tab.is-active {
    color: var(--norm-white);

    background: var(--norm-green-950);
}

.norm-applicable-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.norm-applicable-card {
    min-height: 235px;

    display: flex;
    flex-direction: column;

    padding: 21px;

    border: 1px solid var(--norm-border);
    border-radius: 18px;

    background: var(--norm-soft);
}

.norm-applicable-card small {
    color: var(--norm-green-500);

    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
}

.norm-applicable-card h3 {
    margin: 10px 0 0;

    color: var(--norm-green-950);

    font-size: 1.08rem;
    line-height: 1.16;
}

.norm-applicable-card p {
    color: var(--norm-muted);

    font-size: 0.81rem;
    line-height: 1.54;
}

.norm-applicable-card a {
    margin-top: auto;

    color: var(--norm-green-700);

    font-size: 0.71rem;
    font-weight: 900;
}


/* =========================================================
DIARIO Y GACETA
========================================================= */

.norm-gazette {
    padding: 115px 0;

    background:
        linear-gradient(135deg,
            #003526,
            #001f18);
}

.norm-gazette-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.norm-gazette-card {
    position: relative;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    color: var(--norm-white);
    background: rgba(255, 255, 255, 0.05);
    transition:
        transform 200ms ease,
        box-shadow 200ms ease;
}



.norm-gazette-card--lime {
    color: var(--norm-green-950);

    background: var(--norm-lime);
}

.norm-gazette-card__tag {
    width: fit-content;

    padding: 7px 10px;

    border-radius: 999px;

    color: var(--norm-lime);

    background: rgba(255, 255, 255, 0.08);

    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
}

.norm-gazette-card--lime .norm-gazette-card__tag {
    color: var(--norm-white);

    background: var(--norm-green-950);
}

.norm-gazette-card__icon {
    width: 76px;
    height: 76px;

    display: grid;
    place-items: center;

    margin-top: 35px;

    border-radius: 20px;

    color: var(--norm-green-950);

    background: var(--norm-lime);

    font-size: 1rem;
    font-weight: 950;
}

.norm-gazette-card--lime .norm-gazette-card__icon {
    color: var(--norm-lime);

    background: var(--norm-green-950);
}

.norm-gazette-card h3 {
    margin: 25px 0 0;

    color: inherit;

    font-size: 2rem;
}

.norm-gazette-card p {
    max-width: 560px;

    color: rgba(255, 255, 255, 0.60);

    line-height: 1.6;
}

.norm-gazette-card--lime p {
    color: rgba(0, 45, 34, 0.68);
}

.norm-gazette-card strong {
    margin-top: auto;

    color: var(--norm-lime);

    font-size: 0.75rem;
}

.norm-gazette-card--lime strong {
    color: var(--norm-green-950);
}


/* =========================================================
FUENTES
========================================================= */

.norm-source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.norm-source-card {
    min-height: 245px;

    display: flex;
    flex-direction: column;

    padding: 22px;

    border: 1px solid var(--norm-border);
    border-radius: 20px;

    color: var(--norm-green-950);

    background: var(--norm-white);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.norm-source-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--norm-shadow);
}

.norm-source-card>span {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    color: var(--norm-green-950);

    background: var(--norm-lime);

    font-size: 0.65rem;
    font-weight: 900;
}

.norm-source-card h3 {
    margin: 20px 0 0;

    color: var(--norm-green-950);

    font-size: 1.2rem;
}

.norm-source-card p {
    color: var(--norm-muted);

    font-size: 0.81rem;
    line-height: 1.55;
}

.norm-source-card strong {
    margin-top: auto;

    color: var(--norm-green-700);

    font-size: 0.72rem;
}


/* =========================================================
ACTUALIZACIÓN
========================================================= */

.norm-update {
    padding: 95px 0;

    background: var(--norm-lime);
}

.norm-update__layout {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 70px;

    align-items: center;
}

.norm-update h2 {
    margin: 12px 0 0;

    color: var(--norm-green-950);

    font-size:
        clamp(2.7rem,
            4.7vw,
            4.7rem);

    line-height: 0.95;
    letter-spacing: -0.045em;
}

.norm-update h2 span {
    display: block;

    color: var(--norm-green-500);

    font-weight: 350;
    font-style: italic;
}

.norm-update p {
    margin: 0;

    color: rgba(0, 45, 34, 0.70);

    line-height: 1.72;
}


/* =========================================================
VOLVER ARRIBA
========================================================= */

.norm-backtop {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 995;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    color: var(--norm-white);

    background: var(--norm-green-950);

    box-shadow: var(--norm-shadow);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease;
}

.norm-backtop.is-visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
ANIMACIONES SEGURAS
========================================================= */

[data-norm-reveal] {
    opacity: 1;
    visibility: visible;
    transform: none;
}

[data-norm-reveal].norm-animate-in {
    animation:
        normRevealIn 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.norm-page a:hover {
    text-decoration: none !important;
}

@keyframes normRevealIn {

    from {
        transform:
            translateY(18px) scale(0.995);
    }

    to {
        transform:
            translateY(0) scale(1);
    }

}

@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
    .norm-requirements-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1150px) {

    .norm-hero {
        min-height: auto;
    }

    .norm-hero__layout {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .norm-hero__copy {
        padding-bottom: 20px;
    }

    .norm-hero__visual {
        min-height: 510px;
    }

    .norm-nav__inner {
        grid-template-columns: 1fr auto !important;

        position: relative;
    }

    .norm-nav__menu {
        display: none !important;

        position: absolute;

        left: 0;
        right: 0;
        top: calc(100% + 10px);

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px;

        padding: 14px;

        border: 1px solid var(--norm-border);
        border-radius: 16px;

        background: rgba(255, 255, 255, 0.98);

        box-shadow: var(--norm-shadow);
    }

    .norm-nav__menu.is-open {
        display: grid;
    }

    .norm-nav__menu a {
        justify-content: flex-start;
    }

    .norm-nav__menu a::after {
        display: none;
    }

    .norm-nav__toggle {
        display: block;
    }

    .norm-section-head,
    .norm-update__layout {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }

    .norm-requirements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .norm-search-panel__controls {
        grid-template-columns: 1fr 1fr !important;
    }

    .norm-clear-btn {
        grid-column: 1 / -1;
    }

    .norm-card-grid,
    .norm-decree-grid,
    .norm-applicable-grid,
    .norm-search-grid,
    .norm-source-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}

@media (max-width: 760px) {

    .norm-hero {
        padding-top: 65px;
    }

    .norm-hero__copy h1 {
        font-size: 3.55rem;
        letter-spacing: -0.05em;
    }

    .norm-hero__copy>p {
        font-size: 0.93rem;
    }

    .norm-hero__visual {
        min-height: 430px;
    }

    .norm-visual {
        width: 390px;
        max-width: 100%;
    }

    .norm-visual__core {
        width: 125px;
        height: 125px;
    }

    .norm-visual__node {
        min-width: 108px;

        font-size: 0.61rem;
    }

    .norm-nav {
        padding: 12px 0;
    }

    .norm-nav__inner {
        min-height: 62px;

        padding: 0 12px;

        border-radius: 15px;
    }

    .norm-nav__brand-copy {
        display: none;
    }

    .norm-nav__menu.is-open {
        grid-template-columns: 1fr !important;
    }

    .norm-section,
    .norm-decrees,
    .norm-gazette,
    .norm-update {
        padding: 82px 0;
    }

    .norm-section-head h2,
    .norm-update h2 {
        font-size: 2.8rem;
    }

    .norm-requirements-grid,
    .norm-card-grid,
    .norm-decree-grid,
    .norm-applicable-grid,
    .norm-search-grid,
    .norm-source-grid,
    .norm-gazette-grid {
        grid-template-columns: 1fr !important;
    }

    .norm-search-panel {
        padding: 22px;
    }

    .norm-search-panel__controls {
        grid-template-columns: 1fr !important;
    }

    .norm-clear-btn {
        grid-column: auto;
    }

    .norm-search-panel__meta {
        flex-direction: column;
        gap: 4px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .norm-page *,
    .norm-page *::before,
    .norm-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    [data-norm-reveal] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

}