/* =========================================================
           VARIABLES
        ========================================================= */

        :root {

            --verde-oscuro: #581509;
            --verde: #006b50;
            --verde-claro: #39a852;

            --verde-suave: #eef7f2;

            --verde-borde: #d7e5dd;

            --blanco: #ffffff;

            --gris-fondo: #f7f9f8;
            --gris-claro: #e7ece9;
            --gris-texto: #68746f;

            --texto: #17332a;

            --sombra:
                0 5px 20px rgba(0, 60, 45, 0.08);

            --radio: 12px;

        }


        /* =========================================================
           RESET
        ========================================================= */

        * {

            margin: 0;
            padding: 0;

            box-sizing: border-box;

        }


        html {

            scroll-behavior: smooth;

        }


        body {

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

            background: var(--gris-fondo);

            color: var(--texto);

            line-height: 1.5;

        }


        button,
        a {

            font-family: inherit;

        }


        img {

            max-width: 100%;

        }


        /* =========================================================
           CONTENEDOR GENERAL
        ========================================================= */

        .container {

            width:
                min(
                    1400px,
                    calc(100% - 40px)
                );

            margin: 0 auto;

        }


        /* =========================================================
           BANNER
        ========================================================= */

        .hero {

            position: relative;

            min-height: 340px;

            display: flex;

            align-items: center;

            overflow: hidden;

            background:

                linear-gradient(
                    90deg,
                    rgba(56, 3, 3, 0.98) 0%,
                    rgba(53, 2, 2, 0.94) 42%,
                    rgba(66, 5, 5, 0.541) 68%,
                    rgba(77, 0, 0, 0.15) 100%
                ),

                url("assets/banner-comite.jpg")
                center / cover no-repeat;

        }


        .hero-content {

            width:
                min(
                    1400px,
                    calc(100% - 40px)
                );

            margin: auto;

            display: flex;

            align-items: center;

            gap: 45px;

            padding: 45px 0;

        }


        /* LOGO */

        .hero-logo {

            width: 190px;

            height: 190px;

            flex: 0 0 190px;

            border-radius: 50%;

            object-fit: contain;

            background: white;

            padding: 4px;

            box-shadow:
                0 5px 25px rgba(0, 0, 0, .20);

        }


        /* TEXTO DEL BANNER */

        .hero-text {

            max-width: 720px;

            color: white;

        }


        .hero-title {

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

            line-height: 1.08;

            font-weight: 800;

            margin-bottom: 18px;

            color: #d2e1d9;

        }


        .hero-line {

            width: 65px;

            height: 4px;

            background:
                var(--verde-claro);

            margin-bottom: 15px;

            border-radius: 10px;

        }


        .hero-description {

            font-size:
                clamp(
                    1rem,
                    1.5vw,
                    1.2rem
                );

            line-height: 1.55;

            max-width: 700px;

        }


        /* =========================================================
           MENÚ PRINCIPAL
        ========================================================= */

        /*
            IMPORTANTE:

            El menú está DEBAJO del banner.
            Ya no está sobrepuesto.
        */

        .main-navigation {

            background: white;

            border-bottom:
                1px solid var(--gris-claro);

            box-shadow:
                var(--sombra);

        }


.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}


        .menu-item {

            flex: 0 1 250px;

            position: relative;

            min-height: 125px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            gap: 10px;

            padding: 18px 12px;

            border: none;

            border-right:
                1px solid var(--gris-claro);

            background: transparent;

            color: var(--verde-oscuro);

            cursor: pointer;

        }


        .menu-item:first-child {

            border-left:
                1px solid var(--gris-claro);

        }


        .menu-item::after {

            content: "";

            position: absolute;

            bottom: 0;

            left: 15%;

            right: 15%;

            height: 4px;

            background: transparent;

            border-radius:
                10px 10px 0 0;

            transition: .25s ease;

        }


        .menu-item:hover {

            background:
                var(--verde-suave);

        }


        .menu-item.active {

            background: #fbfdfc;

        }


        .menu-item.active::after {

            background:
                var(--verde-claro);

        }


        .menu-icon {

            width: 43px;

            height: 43px;

            stroke: currentColor;

            stroke-width: 1.8;

            fill: none;

        }


        .menu-label {

            font-size: 14px;

            line-height: 1.25;

            text-align: center;

            font-weight: 700;

            max-width: 190px;

        }


        /* =========================================================
           CONTENIDO
        ========================================================= */

        .page-content {

            padding:
                35px 0 25px;

        }


        .content-layout {

            display: grid;

            grid-template-columns:
                minmax(0, 1.8fr)
                minmax(340px, .9fr);

            gap: 30px;

            align-items: start;

        }


        .main-panel {

            min-width: 0;

        }


        /* =========================================================
           TÍTULOS
        ========================================================= */

        .section-title {

            display: flex;

            align-items: center;

            gap: 13px;

            color:
                var(--verde-oscuro);

            font-size:
                clamp(
                    1.35rem,
                    2vw,
                    1.7rem
                );

            margin-bottom: 25px;

        }


        .section-title svg {

            width: 38px;

            height: 38px;

            stroke:
                var(--verde-oscuro);

            stroke-width: 1.7;

            fill: none;

        }


        .section-title span {

            position: relative;

        }


        .section-title span::after {

            content: "";

            position: absolute;

            left: 0;

            bottom: -8px;

            width: 45px;

            height: 3px;

            background:
                var(--verde-claro);

            border-radius: 5px;

        }


        /* =========================================================
           TARJETAS DE INFORMACIÓN
        ========================================================= */

        .info-card {

            background: white;

            border:
                1px solid var(--verde-borde);

            border-radius:
                var(--radio);

            padding: 25px;

            box-shadow:
                0 2px 10px rgba(0,0,0,.025);

        }


        .info-card + .info-card {

            margin-top: 18px;

        }


        .info-card h3 {

            color:
                var(--verde-oscuro);

            margin-bottom: 10px;

        }


        .info-card p {

            color: #43534c;

            margin-bottom: 10px;

        }


        .info-card a {

            color:
                var(--verde);

            font-weight: 700;

            text-decoration: none;

        }


        .info-card a:hover {

            text-decoration: underline;

        }


        /* =========================================================
           ORGANIGRAMA
        ========================================================= */

        .organigrama-container {

            width: 100%;

            background: white;

            border:
                1px solid var(--verde-borde);

            border-radius:
                var(--radio);

            overflow: hidden;

            box-shadow:
                0 3px 15px
                rgba(0, 60, 45, 0.06);

        }


        .organigrama-img {

            display: block;

            width: 100%;

            height: auto;

        }


        /*
            Botón para ampliar el organigrama
        */

        .organigrama-action {

            display: flex;

            justify-content: center;

            padding: 14px;

            background: #f8fbf9;

            border-top:
                1px solid var(--gris-claro);

        }


        .organigrama-button {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            border: none;

            background: transparent;

            color:
                var(--verde-oscuro);

            font-weight: 700;

            cursor: pointer;

        }


        .organigrama-button:hover {

            color:
                var(--verde);

        }


        /* =========================================================
           SIDEBAR
        ========================================================= */

        .sidebar {

            min-width: 0;

        }


        .sidebar-card {

            background: white;

            border:
                1px solid var(--verde-borde);

            border-radius:
                var(--radio);

            padding: 17px;

            box-shadow:
                0 2px 12px
                rgba(0,0,0,.035);

        }


        .sidebar-card + .sidebar-card {

            margin-top: 15px;

        }


        .sidebar-heading {

            display: flex;

            align-items: center;

            gap: 10px;

            color:
                var(--verde-oscuro);

            font-size: 1.25rem;

            margin-bottom: 13px;

        }


        .sidebar-heading svg {

            width: 32px;

            height: 32px;

            stroke:
                var(--verde-oscuro);

            stroke-width: 1.7;

            fill: none;

        }


        .sidebar-heading span {

            position: relative;

        }


        .sidebar-heading span::after {

            content: "";

            position: absolute;

            left: 0;

            bottom: -6px;

            width: 38px;

            height: 3px;

            border-radius: 5px;

            background:
                var(--verde-claro);

        }


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

        .documents {

            border:
                1px solid var(--gris-claro);

            border-radius: 8px;

            overflow: hidden;

        }


        .document-link {

            display: grid;

            grid-template-columns:
                30px minmax(0, 1fr) 25px;

            align-items: center;

            gap: 10px;

            padding: 12px 13px;

            text-decoration: none;

            color: var(--texto);

            border-bottom:
                1px solid var(--gris-claro);

            transition:
                background .2s ease;

        }


        .document-link:last-child {

            border-bottom: none;

        }


        .document-link:hover {

            background:
                var(--verde-suave);

        }


        .document-icon {

            width: 23px;

            height: 23px;

            stroke:
                var(--verde);

            stroke-width: 1.7;

            fill: none;

        }


        .document-name {

            font-size: 12.5px;

            line-height: 1.3;

        }


        .download-icon {

            width: 20px;

            height: 20px;

            stroke:
                var(--verde-claro);

            stroke-width: 2;

            fill: none;

        }


        /* =========================================================
           BOTÓN NORMATIVIDAD
        ========================================================= */

        .full-documents {

            display: flex;

            justify-content: center;

            align-items: center;

            gap: 12px;

            width: 100%;

            margin-top: 10px;

            padding: 12px;

            border: none;

            border-radius: 6px;

            background:
                var(--verde-oscuro);

            color: white;

            font-weight: 700;

            font-size: 12px;

            cursor: pointer;

            transition: .25s ease;

        }


        .full-documents:hover {

            background:
                var(--verde);

        }


        /* =========================================================
           INFORMES
        ========================================================= */

        .report-link {

            display: grid;

            grid-template-columns:
                35px 1fr 20px;

            gap: 10px;

            align-items: center;

            padding: 12px;

            border:
                1px solid var(--gris-claro);

            text-decoration: none;

            color: var(--texto);

            transition: .2s ease;

        }


        .report-link:first-child {

            border-radius:
                7px 7px 0 0;

        }


        .report-link:last-child {

            border-radius:
                0 0 7px 7px;

            border-top: none;

        }


        .report-link:hover {

            background:
                var(--verde-suave);

        }


        .report-link svg {

            width: 25px;

            height: 25px;

            stroke:
                var(--verde);

            fill: none;

        }


        .report-title {

            font-size: 13px;

            font-weight: 800;

        }


        .report-description {

            display: block;

            font-size: 11px;

            color:
                var(--gris-texto);

        }


        /* =========================================================
           PARTICIPACIÓN Y COMPROMISO
        ========================================================= */

        .commitment {

            margin:
                0 0 40px;

        }


        .commitment-inner {

            display: grid;

            grid-template-columns:
                75px
                minmax(0, 1fr)
                auto;

            align-items: center;

            gap: 25px;

            background:
                linear-gradient(
                    135deg,
                    #f7fbf9,
                    #ffffff
                );

            border:
                1px solid #d2e1d9;

            border-radius: 9px;

            padding: 20px 25px;

        }


        .commitment-icon {

            width: 58px;

            height: 58px;

            stroke:
                var(--verde-oscuro);

            stroke-width: 1.5;

            fill: none;

        }


        .commitment h2 {

            color:
                var(--verde-oscuro);

            font-size: 1.25rem;

            margin-bottom: 4px;

        }


        .commitment p {

            max-width: 800px;

            color: #43534c;

            font-size: 13px;

        }


        .denuncia-button {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 15px;

            min-width: 235px;

            padding: 15px 20px;

            border: none;

            border-radius: 7px;

            background:
                var(--verde-oscuro);

            color: white;

            font-weight: 700;

            text-decoration: none;

            transition: .25s ease;

        }


        .denuncia-button:hover {

            background:
                var(--verde);

            transform:
                translateY(-2px);

        }


        .denuncia-button svg {

            width: 20px;

            height: 20px;

            fill: none;

            stroke: currentColor;

        }


        /* =========================================================
           MODAL ORGANIGRAMA
        ========================================================= */

        .modal {

            position: fixed;

            inset: 0;

            z-index: 9999;

            display: none;

            align-items: center;

            justify-content: center;

            padding: 25px;

            background:
                rgba(0, 40, 30, .88);

        }


        .modal.active {

            display: flex;

        }


        .modal-content {

            position: relative;

            width: min(1400px, 96vw);

            max-height: 94vh;

            overflow: auto;

            background: white;

            border-radius: 10px;

            padding: 10px;

        }


        .modal-content img {

            display: block;

            width: 100%;

            height: auto;

        }


        .modal-close {

            position: absolute;

            top: 15px;

            right: 15px;

            z-index: 2;

            width: 42px;

            height: 42px;

            border: none;

            border-radius: 50%;

            background:
                var(--verde-oscuro);

            color: white;

            font-size: 24px;

            line-height: 1;

            cursor: pointer;

        }


        /* =========================================================
           ANIMACIÓN
        ========================================================= */

        .fade-in {

            animation:
                fadeIn .3s ease;

        }


        @keyframes fadeIn {

            from {

                opacity: 0;

                transform:
                    translateY(8px);

            }

            to {

                opacity: 1;

                transform:
                    translateY(0);

            }

        }


        /* =========================================================
           TABLET
        ========================================================= */

        @media (max-width: 1100px) {


            .hero-logo {

                width: 160px;

                height: 160px;

                flex-basis: 160px;

            }


            .hero-content {

                gap: 30px;

            }


            .menu {

                grid-template-columns:
                    repeat(3, 1fr);

            }


            .menu-item {

                border-bottom:
                    1px solid var(--gris-claro);

            }


            .content-layout {

                grid-template-columns: 1fr;

            }


            .sidebar {

                display: grid;

                grid-template-columns:
                    1fr 1fr;

                gap: 20px;

            }


            .sidebar-card + .sidebar-card {

                margin-top: 0;

            }

        }


        /* =========================================================
           CELULAR
        ========================================================= */

        @media (max-width: 700px) {


            .container {

                width:
                    calc(100% - 24px);

            }


            /* -----------------------------------------------------
               BANNER
            ----------------------------------------------------- */

            .hero {

                min-height: auto;

                background:

                    linear-gradient(
                        180deg,
                        rgba(0, 66, 49, .94),
                        rgba(0, 77, 59, .98)
                    ),

                    url("assets/banner-comite.jpg")
                    center / cover no-repeat;

            }


            .hero-content {

                width:
                    calc(100% - 30px);

                flex-direction: column;

                text-align: center;

                padding: 35px 0;

                gap: 20px;

            }


            .hero-logo {

                width: 135px;

                height: 135px;

                flex-basis: 135px;

            }


            .hero-title {

                font-size: 2rem;

            }


            .hero-line {

                margin:
                    0 auto 15px;

            }


            /* -----------------------------------------------------
               MENÚ
            ----------------------------------------------------- */

            .menu {

                width: 100%;

                grid-template-columns:
                    repeat(2, 1fr);

            }


            .menu-item {

                min-height: 115px;

                border-right:
                    1px solid var(--gris-claro)
                    !important;

                border-left: none
                    !important;

            }


            .menu-item:nth-child(even) {

                border-right: none
                    !important;

            }


            .menu-icon {

                width: 37px;

                height: 37px;

            }


            .menu-label {

                font-size: 12px;

            }


            /* -----------------------------------------------------
               CONTENIDO
            ----------------------------------------------------- */

            .page-content {

                padding-top: 25px;

            }


            .content-layout {

                display: flex;

                flex-direction: column;

            }


            /* -----------------------------------------------------
               SIDEBAR
            ----------------------------------------------------- */

            .sidebar {

                display: flex;

                flex-direction: column;

                width: 100%;

            }


            .sidebar-card + .sidebar-card {

                margin-top: 15px;

            }


            /* -----------------------------------------------------
               ORGANIGRAMA
            ----------------------------------------------------- */

            .organigrama-container {

                border-radius: 8px;

            }


            /* -----------------------------------------------------
               PARTICIPACIÓN
            ----------------------------------------------------- */

            .commitment-inner {

                grid-template-columns: 1fr;

                text-align: center;

                padding:
                    25px 18px;

                gap: 12px;

            }


            .commitment-icon {

                margin: auto;

            }


            .commitment p {

                font-size: 12px;

            }


            .denuncia-button {

                width: 100%;

                min-width: 0;

                margin-top: 8px;

            }


            /* -----------------------------------------------------
               MODAL
            ----------------------------------------------------- */

            .modal {

                padding: 10px;

            }


            .modal-content {

                width: 100%;

                max-height: 96vh;

                padding: 5px;

            }

        }


        /* =========================================================
           CELULAR MUY PEQUEÑO
        ========================================================= */

        @media (max-width: 400px) {


            .menu-label {

                font-size: 11px;

            }


            .hero-title {

                font-size: 1.7rem;

            }


            .hero-description {

                font-size: .9rem;

            }


            .document-name {

                font-size: 11.5px;

            }

        }


        /* =========================================================
           ACCESIBILIDAD
        ========================================================= */

        .menu-item:focus-visible,
        .document-link:focus-visible,
        .report-link:focus-visible,
        .denuncia-button:focus-visible,
        .organigrama-button:focus-visible,
        .modal-close:focus-visible {

            outline:
                3px solid #7bd48b;

            outline-offset: 3px;

        }

        /* =========================================================
   VISOR PDF
========================================================= */

.pdf-container {

    width: 100%;

    background: #ffffff;

    border: 1px solid var(--verde-borde);

    border-radius: var(--radio);

    overflow: hidden;

    box-shadow:
        0 3px 15px rgba(0, 60, 45, 0.06);

}


/* El PDF ocupa todo el ancho */

.pdf-container iframe {

    display: block;

    width: 100%;

    min-height: 750px;

    border: none;

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    .pdf-container iframe {

        min-height: 650px;

    }

}


/* =========================================================
   RESPONSIVE - CELULAR
========================================================= */

@media (max-width: 700px) {

    .pdf-container iframe {

        min-height: 600px;

    }

}

.dos-opciones {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 30px auto;
    flex-wrap: wrap;
}

.sub-opcion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    min-height: 80px;
    padding: 20px;
    background: #ffffff;
    border-radius: 15px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sub-opcion:hover {
    transform: translateY(-4px);
    box-shadow: 0 7px 18px rgba(0,0,0,0.18);
}

.video-container {
    width: 90%;
    max-width: 900px;
    margin: 35px auto;
    aspect-ratio: 16 / 9;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 15px;
}