/* =========================================================
CENTRO DE DOCUMENTACIÓN EN CONTROL FISCAL - CDCF
Contraloría Distrital de Medellín
CSS completo para Power Pages
========================================================= */

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

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

    --cdcf-white: #ffffff;
    --cdcf-paper: #f5f1e8;
    --cdcf-soft: #f1f6f2;
    --cdcf-text: #243d35;
    --cdcf-muted: #68766f;

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

    --cdcf-container: 1400px;
    overflow-x: hidden;

    color: var(--cdcf-text);

    background: var(--cdcf-white);

    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

a{
    text-decoration: none !important;
}

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

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

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

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

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

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

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


/* =========================================================
NAVEGACIÓN INTERNA DEBAJO DEL BANNER
========================================================= */

.cdcf-nav {
    position: sticky;
    top: 0;
    z-index: 990;
    width: 100%;
    background: transparent;
}

.cdcf-nav--below-hero {
    position: sticky;
    top: 0;
    z-index: 990;
    padding: 16px 0;
    border-top: 1px solid rgba(0, 63, 47, 0.05);
    border-bottom: 1px solid rgba(0, 63, 47, 0.08);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.985),
            rgba(247, 250, 247, 0.98)
        );
    box-shadow:
        0 12px 34px rgba(0, 45, 34, 0.07);
    backdrop-filter: blur(18px);
}

.cdcf-nav--below-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--cdcf-green-950) 0%,
            var(--cdcf-green-700) 50%,
            var(--cdcf-lime) 100%
        );
}

.cdcf-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.94);
    box-shadow:
        0 10px 26px rgba(0, 45, 34, 0.07);
}

.cdcf-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: max-content;
    color: var(--cdcf-green-950);
}

.cdcf-nav__brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    color: var(--cdcf-green-950);
    background: var(--cdcf-lime);
    box-shadow:
        0 10px 22px rgba(139, 217, 54, 0.20);
    font-size: 0.72rem;
    font-weight: 950;
}

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

.cdcf-nav__brand-copy strong {
    font-size: 0.82rem;
    line-height: 1.1;
}

.cdcf-nav__brand-copy small {
    margin-top: 2px;
    color: var(--cdcf-muted);
    font-size: 0.68rem;
}

.cdcf-nav__menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

.cdcf-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(--cdcf-green-900);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.cdcf-nav__menu a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--cdcf-lime);
    transform: translateX(-50%);
    transition: width 180ms ease;
}

.cdcf-nav__menu a:hover {
    color: var(--cdcf-green-950);
    background: var(--cdcf-soft);
    transform: translateY(-1px);
}

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

.cdcf-nav__menu a.is-active {
    color: var(--cdcf-green-950);
    background:
        linear-gradient(
            180deg,
            #f5faef,
            #edf7e5
        );
}

.cdcf-nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: var(--cdcf-green-950);
    cursor: pointer;
}

.cdcf-nav__toggle span {
    width: 100%;
    height: 2px;
    display: block;
    margin: 4px 0;
    background: var(--cdcf-white);
}

#quienesSomos,
#catalogo,
#colecciones,
#recursos,
#documentos,
#redes,
#visitanos {
    scroll-margin-top: 120px;
}


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

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

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

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

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

    width: 30px;
    height: 3px;

    border-radius: 999px;

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

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

.cdcf-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;
}

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

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

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

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

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

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

    color: var(--cdcf-white);

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

    backdrop-filter: blur(14px);
}

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

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

.cdcf-btn--dark {
    color: var(--cdcf-white);

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

.cdcf-btn--dark:hover {
    color: var(--cdcf-white);

    background: var(--cdcf-green-700);
}


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

.cdcf-hero {
    position: relative;

    min-height: 900px;

    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(--cdcf-green-950),
            var(--cdcf-green-900) 55%,
            #004a38
        );
}

.cdcf-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(--cdcf-white);
}

.cdcf-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;
}

.cdcf-hero__halo {
    position: absolute;

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

    pointer-events: none;
}

.cdcf-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);
}

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

    left: -90px;
    bottom: 150px;

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

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

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

    align-items: center;
}

.cdcf-hero__copy {
    padding-bottom: 165px;
}

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

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

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

    margin-bottom: 28px;

    color: var(--cdcf-white);

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

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

.cdcf-hero__copy h1 span {
    display: block;

    color: var(--cdcf-lime);

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

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

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

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

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

    margin-top: 34px;
}

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

    margin-top: 42px;
}

.cdcf-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 BIBLIOTECA
========================================================= */

.cdcf-hero__visual {
    position: relative;

    min-height: 590px;

    padding-bottom: 145px;
}

.cdcf-library-visual {
    position: absolute;

    left: 50%;
    top: 45%;

    width: min(520px, 100%);
    height: 455px;

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

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.24);

    backdrop-filter: blur(16px);
}

.cdcf-library-visual__shelf {
    position: absolute;

    left: 10%;
    right: 10%;

    height: 2px;

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

.cdcf-library-visual__shelf--1 {
    top: 31%;
}

.cdcf-library-visual__shelf--2 {
    top: 61%;
}

.cdcf-library-visual__shelf--3 {
    top: 86%;
}

.cdcf-book {
    position: absolute;

    bottom: 40%;

    width: 52px;

    border-radius: 6px 6px 2px 2px;

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

    padding-bottom: 13px;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.16);
}

.cdcf-book span {
    writing-mode: vertical-rl;

    color: var(--cdcf-white);

    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.cdcf-book--1 {
    left: 12%;
    height: 165px;

    background: var(--cdcf-green-700);
}

.cdcf-book--2 {
    left: 24%;
    height: 205px;

    background: #1b725a;
}

.cdcf-book--3 {
    left: 36%;
    height: 145px;

    background: #416e3b;
}

.cdcf-book--4 {
    right: 22%;
    height: 185px;

    background: #3b7a62;
}

.cdcf-book--5 {
    right: 10%;
    height: 220px;

    background: #27604f;
}

.cdcf-library-visual__core {
    position: absolute;

    left: 50%;
    top: 20%;

    width: 154px;
    height: 154px;

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

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

    border-radius: 50%;

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

    background: var(--cdcf-lime);

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

.cdcf-library-visual__core small {
    font-size: 0.55rem;
    font-weight: 850;
    text-transform: uppercase;
}

.cdcf-library-visual__core strong {
    margin-top: 3px;

    font-size: 1.85rem;
}

.cdcf-library-visual__core span {
    font-size: 0.6rem;
    font-weight: 750;
}

.cdcf-library-visual__scan {
    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    height: 2px;

    background: var(--cdcf-lime);

    box-shadow:
        0 0 20px var(--cdcf-lime);

    animation:
        cdcfScan 5.5s linear infinite;
}


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

.cdcf-hero__command {
    position: relative;
    z-index: 6;

    min-height: 105px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;

    align-items: center;

    margin-top: -116px;

    padding: 20px 24px;

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

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

    box-shadow:
        0 30px 80px rgba(0, 45, 34, 0.18);

    backdrop-filter: blur(18px);
}

.cdcf-command__icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: var(--cdcf-lime);

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

    font-size: 1.45rem;
}

.cdcf-command__copy small,
.cdcf-command__copy strong {
    display: block;
}

.cdcf-command__copy small {
    color: #839089;

    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.cdcf-command__copy strong {
    margin-top: 4px;

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

    font-size: 0.93rem;
}

.cdcf-command__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

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

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


/* =========================================================
TICKER
========================================================= */

.cdcf-ticker {
    padding: 34px 0 30px;

    overflow: hidden;

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

.cdcf-ticker__track {
    width: max-content;

    display: flex;
    align-items: center;
    gap: 30px;

    animation:
        cdcfTicker 32s linear infinite;
}

.cdcf-ticker span {
    color: var(--cdcf-green-950);

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.24em;
}

.cdcf-ticker i {
    color: var(--cdcf-lime);
}


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

.cdcf-section {
    padding: 120px 0;
}

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

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

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

    align-items: end;

    margin-bottom: 55px;
}

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

    margin: 12px 0 0;

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

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

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

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

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

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

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

    color: var(--cdcf-muted);

    line-height: 1.74;
}

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

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

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


/* =========================================================
BENTO
========================================================= */

.cdcf-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 190px;
    gap: 18px;
}

.cdcf-bento__card {
    position: relative;

    grid-column: span 4;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    overflow: hidden;

    padding: 25px;

    border: 1px solid var(--cdcf-border);
    border-radius: 24px;

    background: var(--cdcf-soft);

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

.cdcf-bento__card:hover {
    transform: translateY(-6px);

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

.cdcf-bento__card--hero {
    grid-column: span 7;
    grid-row: span 2;

    color: var(--cdcf-white);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(139, 217, 54, 0.18),
            transparent 30%
        ),
        var(--cdcf-green-950);
}

.cdcf-bento__card--lime {
    grid-column: span 5;

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

.cdcf-bento__card--green {
    grid-column: span 5;

    color: var(--cdcf-white);

    background: var(--cdcf-green-800);
}

.cdcf-bento__card--outline {
    background: var(--cdcf-white);
}

.cdcf-bento__index {
    position: absolute;

    right: 20px;
    top: 18px;

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

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

.cdcf-bento__card--hero .cdcf-bento__index,
.cdcf-bento__card--green .cdcf-bento__index {
    color: rgba(255, 255, 255, 0.45);
}

.cdcf-bento__card small {
    color: var(--cdcf-green-500);

    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cdcf-bento__card--hero small,
.cdcf-bento__card--green small {
    color: var(--cdcf-lime);
}

.cdcf-bento__card strong {
    margin-top: 7px;

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

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

.cdcf-bento__card h3 {
    margin: 9px 0 0;

    color: inherit;

    font-size: 1.4rem;
    line-height: 1.1;
}

.cdcf-bento__card--hero h3 {
    max-width: 580px;

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

    letter-spacing: -0.04em;
}

.cdcf-bento__card p {
    margin: 10px 0 0;

    color: var(--cdcf-muted);

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

.cdcf-bento__card--hero p,
.cdcf-bento__card--green p {
    color: rgba(255, 255, 255, 0.64);
}


/* =========================================================
CATÁLOGO
========================================================= */

.cdcf-catalog {
    padding: 125px 0;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(139, 217, 54, 0.08),
            transparent 28%
        ),
        var(--cdcf-green-950);
}

.cdcf-catalog__layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;

    align-items: center;
}

.cdcf-catalog__copy h2 {
    margin: 13px 0 0;

    color: var(--cdcf-white);

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

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

.cdcf-catalog__copy h2 span {
    display: block;

    color: var(--cdcf-lime);

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

.cdcf-catalog__copy p {
    margin: 24px 0 28px;

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

    line-height: 1.75;
}

.cdcf-catalog__steps {
    display: grid;
    gap: 12px;
}

.cdcf-catalog__steps article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 17px;

    align-items: center;

    padding: 20px;

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

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

    backdrop-filter: blur(10px);
}

.cdcf-catalog__steps article > span {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 13px;

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

    background: var(--cdcf-lime);

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

.cdcf-catalog__steps small,
.cdcf-catalog__steps strong {
    display: block;
}

.cdcf-catalog__steps small {
    color: rgba(255, 255, 255, 0.42);

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

.cdcf-catalog__steps strong {
    margin-top: 4px;

    color: var(--cdcf-white);
}


/* =========================================================
SERVICIOS
========================================================= */

.cdcf-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cdcf-service-card {
    position: relative;

    min-height: 355px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 26px;

    border: 1px solid var(--cdcf-border);
    border-radius: 24px;

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

    background: var(--cdcf-white);

    box-shadow:
        0 10px 30px rgba(0, 63, 47, 0.06);

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

.cdcf-service-card:hover {
    transform: translateY(-7px);

    box-shadow: var(--cdcf-shadow-lg);
}

.cdcf-service-card--lime {
    background: var(--cdcf-lime);
}

.cdcf-service-card--green {
    color: var(--cdcf-white);

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

.cdcf-service-card__number {
    position: absolute;

    right: 22px;
    top: 20px;

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

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

.cdcf-service-card--green .cdcf-service-card__number {
    color: rgba(255, 255, 255, 0.42);
}

.cdcf-service-card__icon {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    color: var(--cdcf-lime);

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

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

.cdcf-service-card--lime .cdcf-service-card__icon {
    color: var(--cdcf-white);
}

.cdcf-service-card--green .cdcf-service-card__icon {
    color: var(--cdcf-green-950);

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

.cdcf-service-card small {
    margin-top: 30px;

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

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

.cdcf-service-card--green small {
    color: var(--cdcf-lime);
}

.cdcf-service-card h3 {
    margin: 9px 0 0;

    color: inherit;

    font-size: 1.55rem;
}

.cdcf-service-card p {
    color: var(--cdcf-muted);

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

.cdcf-service-card--green p {
    color: rgba(255, 255, 255, 0.60);
}

.cdcf-service-card strong {
    margin-top: auto;

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

    font-size: 0.73rem;
}

.cdcf-service-card--green strong {
    color: var(--cdcf-lime);
}


/* =========================================================
RED FISCAL
========================================================= */

.cdcf-audit-network {
    padding: 125px 0;

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

.cdcf-audit-network__layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;

    align-items: center;
}

.cdcf-audit-network h2 {
    margin: 13px 0 0;

    color: var(--cdcf-white);

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

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

.cdcf-audit-network h2 span {
    display: block;

    color: var(--cdcf-lime);

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

.cdcf-audit-network p {
    max-width: 650px;

    margin-top: 24px;

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

    line-height: 1.74;
}

.cdcf-audit-network__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 28px;
}

.cdcf-audit-network__visual {
    position: relative;

    min-height: 500px;
}

.cdcf-network-ring {
    position: absolute;

    left: 50%;
    top: 50%;

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

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

.cdcf-network-ring--1 {
    width: 76%;
    aspect-ratio: 1;
}

.cdcf-network-ring--2 {
    width: 48%;
    aspect-ratio: 1;

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

.cdcf-network-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 155px;
    height: 155px;

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

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

    border-radius: 50%;

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

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

.cdcf-network-core small {
    font-size: 0.6rem;
    text-transform: uppercase;
}

.cdcf-network-core strong {
    margin-top: 3px;

    font-size: 1.6rem;
}

.cdcf-network-node {
    position: absolute;

    min-width: 130px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;

    color: var(--cdcf-white);

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

    font-size: 0.75rem;
    font-weight: 850;

    text-align: center;
}

.cdcf-network-node--1 {
    left: 5%;
    top: 18%;
}

.cdcf-network-node--2 {
    right: 5%;
    top: 18%;
}

.cdcf-network-node--3 {
    left: 50%;
    bottom: 5%;

    transform: translateX(-50%);
}


/* =========================================================
RECURSOS
========================================================= */

.cdcf-resource-filter {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;

    align-items: end;

    margin-bottom: 16px;

    padding: 20px;

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

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

.cdcf-resource-filter label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cdcf-resource-filter label span {
    color: var(--cdcf-green-900);

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

.cdcf-resource-filter input {
    min-height: 48px;

    padding: 0 14px;

    border: 1px solid var(--cdcf-border);
    border-radius: 12px;

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

    background: var(--cdcf-white);

    outline: none;
}

.cdcf-resource-filter input:focus {
    border-color: var(--cdcf-lime);

    box-shadow:
        0 0 0 4px rgba(139, 217, 54, 0.14);
}

.cdcf-resource-filter button {
    min-height: 48px;

    padding: 0 18px;

    border: 0;
    border-radius: 12px;

    color: var(--cdcf-white);

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

    font-weight: 850;

    cursor: pointer;
}

.cdcf-resource-meta {
    margin-bottom: 17px;

    color: var(--cdcf-muted);

    font-size: 0.78rem;
}

.cdcf-resource-meta strong {
    color: var(--cdcf-green-950);
}

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

.cdcf-resource-card {
    min-height: 260px;

    display: flex;
    flex-direction: column;

    padding: 22px;

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

    background: var(--cdcf-white);

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

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

.cdcf-resource-card:hover {
    transform: translateY(-5px);

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

.cdcf-resource-card small {
    color: var(--cdcf-green-500);

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

.cdcf-resource-card h3 {
    margin: 10px 0 0;

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

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

.cdcf-resource-card p {
    margin: 12px 0 0;

    color: var(--cdcf-muted);

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

.cdcf-resource-card a {
    margin-top: auto;
    padding-top: 18px;

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

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

.cdcf-resource-empty {
    grid-column: 1 / -1;

    padding: 42px;

    border: 1px dashed var(--cdcf-border);
    border-radius: 18px;

    color: var(--cdcf-muted);

    background: var(--cdcf-soft);

    text-align: center;
}


/* =========================================================
COMFENALCO
========================================================= */

.cdcf-benefit {
    padding: 110px 0;

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

.cdcf-benefit__layout {
    display: grid;
    grid-template-columns: 0.55fr 1.45fr;
    gap: 70px;

    align-items: center;
}

.cdcf-benefit__metric {
    min-height: 300px;

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

    border-radius: 32px;

    color: var(--cdcf-white);

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

    box-shadow:
        0 28px 65px rgba(0, 45, 34, 0.20);
}

.cdcf-benefit__metric span {
    color: var(--cdcf-lime);

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

.cdcf-benefit__metric strong {
    margin-top: 8px;

    font-size: 1.5rem;
}

.cdcf-benefit__metric small {
    margin-top: 5px;

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

.cdcf-benefit h2 {
    margin: 13px 0 0;

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

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

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

.cdcf-benefit h2 span {
    display: block;

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

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

.cdcf-benefit p {
    max-width: 800px;

    margin: 23px 0 27px;

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

    line-height: 1.7;
}


/* =========================================================
DOCUMENTOS
========================================================= */

.cdcf-documents {
    padding: 125px 0;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(139, 217, 54, 0.10),
            transparent 25%
        ),
        var(--cdcf-green-950);
}

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

.cdcf-doc-card {
    min-height: 310px;

    display: flex;
    flex-direction: column;

    padding: 24px;

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

    color: var(--cdcf-white);

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

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

.cdcf-doc-card:hover {
    transform: translateY(-6px);

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

.cdcf-doc-card small {
    color: var(--cdcf-lime);

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

.cdcf-doc-card h3 {
    margin: 12px 0 0;

    color: var(--cdcf-white);

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

.cdcf-doc-card p {
    margin: 13px 0 0;

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

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

.cdcf-doc-card a {
    margin-top: auto;
    padding-top: 20px;

    color: var(--cdcf-lime);

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


/* =========================================================
REDES
========================================================= */

.cdcf-network-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cdcf-network-grid article {
    min-height: 220px;

    padding: 22px;

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

    background: var(--cdcf-white);

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

.cdcf-network-grid article > span {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;

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

    background: var(--cdcf-lime);

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

.cdcf-network-grid h3 {
    margin: 21px 0 0;

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

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

.cdcf-network-grid p {
    color: var(--cdcf-muted);

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


/* =========================================================
UBICACIÓN
========================================================= */

.cdcf-location {
    padding: 125px 0;

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

.cdcf-location__layout {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 70px;

    align-items: stretch;
}

.cdcf-location__copy h2 {
    margin: 13px 0 0;

    color: var(--cdcf-white);

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

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

.cdcf-location__copy h2 span {
    display: block;

    color: var(--cdcf-lime);

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

.cdcf-location__data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    margin-top: 32px;
}

.cdcf-location__data article {
    padding: 18px;

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

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

.cdcf-location__data small,
.cdcf-location__data strong {
    display: block;
}

.cdcf-location__data small {
    color: var(--cdcf-lime);

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

.cdcf-location__data strong {
    margin-top: 7px;

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

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

.cdcf-location__data a {
    color: var(--cdcf-white);
}

.cdcf-location__map {
    position: relative;

    min-height: 475px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.03)
        );
}

.cdcf-location__map-grid {
    position: absolute;
    inset: 0;

    opacity: 0.35;

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

    background-size: 36px 36px;

    transform: rotate(14deg) scale(1.3);
}

.cdcf-location__pin {
    position: absolute;

    left: 50%;
    top: 42%;

    width: 62px;
    height: 62px;

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

    border: 12px solid var(--cdcf-lime);
    border-radius: 50% 50% 50% 0;

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

    rotate: -45deg;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.30);
}

.cdcf-location__map-copy {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 22px;

    padding: 17px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;

    background: rgba(0, 31, 24, 0.72);

    backdrop-filter: blur(10px);
}

.cdcf-location__map-copy small,
.cdcf-location__map-copy strong,
.cdcf-location__map-copy span {
    display: block;
}

.cdcf-location__map-copy small {
    color: var(--cdcf-lime);

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

.cdcf-location__map-copy strong {
    margin-top: 4px;

    color: var(--cdcf-white);
}

.cdcf-location__map-copy span {
    margin-top: 5px;

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

    font-size: 0.72rem;
}


/* =========================================================
CIERRE
========================================================= */

.cdcf-closing {
    padding: 105px 0 115px;

    text-align: center;

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

.cdcf-closing__seal {
    width: 70px;
    height: 70px;

    display: grid;
    place-items: center;

    margin: 0 auto 25px;

    border-radius: 50%;

    color: var(--cdcf-lime);

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

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

.cdcf-closing h2 {
    margin: 0;

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

    font-size:
        clamp(
            3rem,
            5.7vw,
            5.8rem
        );

    line-height: 0.92;
    letter-spacing: -0.05em;
}

.cdcf-closing h2 span {
    display: block;

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

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

.cdcf-closing p {
    margin-top: 23px;

    color: var(--cdcf-muted);

    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


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

.cdcf-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(--cdcf-white);

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

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

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

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

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

    transform: translateY(0);
}


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

@keyframes cdcfTicker {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

@keyframes cdcfScan {

    0% {
        top: 2%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 98%;
        opacity: 0;
    }

}

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

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

@keyframes cdcfRevealIn {

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

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

}


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

@media (max-width: 1150px) {

    .cdcf-nav__inner {
        position: relative;
        grid-template-columns: 1fr auto !important;
    }

    .cdcf-nav__menu {
        display: none;
        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(--cdcf-border);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.985);
        box-shadow: var(--cdcf-shadow);
        backdrop-filter: blur(18px);
    }

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

    .cdcf-nav__menu a {
        justify-content: flex-start;
        min-height: 44px;
        padding: 0 13px;
    }

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

    .cdcf-nav__toggle {
        display: block;
    }

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

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

    .cdcf-hero__copy {
        padding-bottom: 20px !important;
    }

    .cdcf-hero__visual {
        min-height: 590px;
    }

    .cdcf-hero__command {
        margin-top: -70px;
    }

    .cdcf-section-head,
    .cdcf-catalog__layout,
    .cdcf-audit-network__layout,
    .cdcf-benefit__layout,
    .cdcf-location__layout {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }

    .cdcf-bento__card--hero {
        grid-column: span 12 !important;
    }

    .cdcf-bento__card--lime,
    .cdcf-bento__card--green,
    .cdcf-bento__card {
        grid-column: span 6 !important;
    }

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

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

}

@media (max-width: 760px) {

    .cdcf-nav--below-hero {
        padding: 12px 0;
    }

    .cdcf-nav__inner {
        min-height: 62px;
        padding: 0 12px;
        border-radius: 15px;
    }

    .cdcf-nav__brand-mark {
        width: 44px;
        height: 44px;
    }


    .cdcf-shell {
        width: min(
            calc(100% - 28px),
            var(--cdcf-container)
        );
    }

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

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

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

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

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

    .cdcf-hero__visual {
        min-height: 480px;
    }

    .cdcf-library-visual {
        width: 390px;
        max-width: 100%;
        height: 400px;
    }

    .cdcf-book {
        width: 44px;
    }

    .cdcf-library-visual__core {
        width: 125px;
        height: 125px;
    }

    .cdcf-hero__command {
        grid-template-columns: auto 1fr !important;

        margin-top: -50px;

        padding: 18px;
    }

    .cdcf-command__link {
        grid-column: 1 / -1;
    }

    .cdcf-section,
    .cdcf-catalog,
    .cdcf-audit-network,
    .cdcf-benefit,
    .cdcf-documents,
    .cdcf-location {
        padding: 85px 0;
    }

    .cdcf-section-head h2,
    .cdcf-catalog__copy h2,
    .cdcf-audit-network h2,
    .cdcf-benefit h2,
    .cdcf-location__copy h2 {
        font-size: 2.8rem;
    }

    .cdcf-bento {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }

    .cdcf-bento__card,
    .cdcf-bento__card--hero,
    .cdcf-bento__card--lime,
    .cdcf-bento__card--green {
        grid-column: auto !important;
        grid-row: auto !important;

        min-height: 260px;
    }

    .cdcf-service-grid,
    .cdcf-resource-grid,
    .cdcf-doc-grid,
    .cdcf-network-grid {
        grid-template-columns: 1fr !important;
    }

    .cdcf-audit-network__visual {
        min-height: 390px;
    }

    .cdcf-resource-filter {
        grid-template-columns: 1fr !important;
    }

    .cdcf-location__data {
        grid-template-columns: 1fr !important;
    }

    .cdcf-location__map {
        min-height: 390px;
    }

    .cdcf-closing h2 {
        font-size: 3rem;
    }

}

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

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

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

}