:root {
    --ona-green-dark: #00745d;
    --ona-green-mid: #71a20c;
    --ona-green-light: #96be1e;
    --ona-green-deep: #063b34;
    --bg: #0b0f0e;
    --surface: #ffffff;
    --text: #0f2722;
    --muted: #5b6b67;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .06);
    --shadow-hover: 0 16px 40px rgba(0, 0, 0, .16), 0 6px 14px rgba(0, 0, 0, .10);
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(151, 190, 30, .06), transparent 60%),
        radial-gradient(1000px 600px at 0% 110%, rgba(0, 116, 93, .08), transparent 60%),
        #f6f8f7;
    color: var(--text);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    left: 0;
    width: 100%;
    z-index: -3;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

body::after {
    content: none !important;
}

body::before {
    top: 45px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300745d' fill-opacity='0.15' d='M0,64L80,58.7C160,53,320,43,480,58.7C640,75,800,117,960,122.7C1120,128,1280,96,1360,80L1440,64L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z'/%3E%3C/svg%3E");
}

body::after {
    bottom: 0;
    height: 220px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2396be1e' fill-opacity='0.14' d='M0,288L80,272C160,256,320,224,480,213.3C640,203,800,213,960,213.3C1120,213,1280,203,1360,197.3L1440,192L1440,320L0,320Z'/%3E%3C/svg%3E");
}

main {
    position: relative;
    padding-bottom: 180px;
    margin-bottom: 0;
}

main::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 180px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2396be1e' fill-opacity='0.16' d='M0,288L80,272C160,256,320,224,480,213.3C640,203,800,213,960,213.3C1120,213,1280,203,1360,197.3L1440,192L1440,320L0,320Z'/%3E%3C/svg%3E");
}


.navbar {
    background: var(--ona-green-light);
}

.navbar-brand,
.navbar-brand:hover {
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
}

.section-title {
    color: var(--ona-green-dark);
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: .2px;
    text-align: center;
}

.lead {
    color: var(--muted);
    max-width: 70ch;
    margin-inline: auto;
}

.grid {
    --gap: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center;
}

.grid .card-link {
    display: block;
    flex: 0 1 calc((100% - 3*var(--gap)) / 4);
    min-width: 250px;
}

.card-modern {
    height: 100%;
}

@media (max-width: 991.98px) {
    .grid .card-link {
        flex-basis: calc((100% - var(--gap)) / 2);
    }
}

@media (max-width: 575.98px) {
    .grid .card-link {
        flex-basis: 100%;
    }
}


.breadcrumb a {
    text-decoration: none;
    color: var(--ona-green-deep);
}

.breadcrumb a:hover {
    text-decoration: underline;
    color: var(--ona-green-mid);
}

.content-section {
    display: none;
}

.btn-ona {
    background-color: var(--ona-green-mid);
    color: #fff;
}

.btn-ona:hover {
    background-color: var(--ona-green-light);
    color: #000;
}

.download-list {
    display: grid;
    gap: 12px;
}

.download-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.download-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    background: rgba(255, 255, 255, .92);
}

.download-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 22px;
    background: #eef5f2;
    color: var(--ona-green-deep);
}

.download-title {
    margin: 0;
    font-weight: 600;
    color: var(--ona-green-deep);
}

.download-meta {
    margin: 2px 0 0;
    font-size: .92rem;
    color: var(--muted);
}

a.download-item[href$=".pdf"] .download-icon {
    background: #fdeced;
    color: #b3261e;
}

a.download-item[href$=".ppt"] .download-icon,
a.download-item[href$=".pptx"] .download-icon {
    background: #fff4e6;
    color: #b55300;
}

a.download-item[href$=".m4a"] .download-icon,
a.download-item[href$=".mp3"] .download-icon,
a.download-item[href*="/m4a"] .download-icon {
    background: #e8f1ff;
    color: #0b5ed7;
}

a.download-item[href$=".pdf"] .download-icon i {
    content: "";
}

a.download-item[href$=".ppt"] .download-icon i,
a.download-item[href$=".pptx"] .download-icon i {
    content: "";
}

a.download-item[href$=".m4a"] .download-icon i,
a.download-item[href$=".mp3"] .download-icon i {
    content: "";
}

.download-actions .btn-ona {
    white-space: nowrap;
}

.video-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.video-box h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--ona-green-dark);
}

.video-box .ratio {
    border-radius: 8px;
    overflow: hidden;
}

.card-modern {
    position: relative;
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    height: 100%;
}

.card-modern:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    background: rgba(255, 255, 255, .9);
}

.card-modern:focus-within {
    outline: 2px solid color-mix(in oklab, var(--ona-green-mid) 50%, #fff);
    outline-offset: 3px;
}

.color-box {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    color: #063b34;
    font-weight: 700;
    letter-spacing: .3px;
    font-size: clamp(.9rem, .6rem + .8vw, 1.05rem);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.color-intro {
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(255, 255, 255, .55) 0%, transparent 55%),
        linear-gradient(135deg, var(--ona-green-mid), var(--ona-green-light));
}

.color-etapas {
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, .55) 0%, transparent 55%),
        linear-gradient(135deg, #d2e46a, #b6d232);
}

.color-docs {
    background:
        radial-gradient(120% 100% at 100% 100%, rgba(255, 255, 255, .55) 0%, transparent 55%),
        linear-gradient(135deg, #8ad6bf, #49a18b);
}

.color-alertas {
    background:
        radial-gradient(120% 100% at 0% 100%, rgba(255, 255, 255, .55) 0%, transparent 55%),
        linear-gradient(135deg, #4caf50, #2e7d32);
}

.color-consultores {
    background:
        radial-gradient(120% 100% at 50% 50%, rgba(255, 255, 255, .45) 0%, transparent 55%),
        linear-gradient(135deg, #a8e063, #56ab2f);
}

.card-body {
    padding: 18px 18px 22px;
    background: transparent;
}

.card-title {
    margin: 0;
    text-align: center;
    font-weight: 700;
    color: var(--ona-green-deep);
    font-size: clamp(1rem, .85rem + .6vw, 1.15rem);
}

.card-sub {
    text-align: center;
    margin-top: 8px;
    color: var(--muted);
    font-size: .95rem;
}

.card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.card-link:focus-visible {
    outline: none;
}

footer {
    position: relative;
    background: var(--ona-green-mid);
    color: #fff;
    padding: 20px 0;
    text-align: center;
    overflow: visible;
    margin-top: 0 !important;
    border-top: 0;
    position: relative;
    z-index: 1;
}

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

    .card-modern,
    .card-modern:hover {
        transition: none;
    }
}