/* ==========================================================
           HEADER
           ========================================================== */

        #header {
            background: #DCC8A8;
            border-bottom: none;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
        }


        #header .inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 12px 30px 10px;

            min-height: 76px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            position: relative;
        }


        /* ==========================================================
           CONTENEDOR DEL LOGO IZQUIERDO
           ========================================================== */

        .header-logo-izquierdo {
            flex: 0 0 220px;

            display: flex;
            align-items: center;
            justify-content: flex-start;
        }


        .header-logo-izquierdo img {
            display: block;

            width: auto;
            height: 62px;

            max-width: 210px;

            object-fit: contain;
        }


        /* ==========================================================
           INFORMACIÓN CENTRAL
           ========================================================== */

        .header-centro {
            flex: 1;

            text-align: center;

            padding: 0 25px;

            line-height: 1.2;
        }


        .header-titulo {
            margin: 0;

            color: #7A0019;

            font-size: 24px;
            font-weight: 700;

            letter-spacing: 0.5px;

            text-transform: uppercase;
        }


        .header-subtitulo {
            margin: 5px 0 0;

            color: #5c5c5c;

            font-size: 13px;
            font-weight: 600;

            letter-spacing: 0.3px;
        }


        /* ==========================================================
           LOGO DERECHO
           ========================================================== */

        .header-logo-derecho {
            flex: 0 0 220px;

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


        .header-logo-derecho img {
            display: block;

            width: auto;
            height: 58px;

            max-width: 200px;

            object-fit: contain;
        }


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

			#header nav {
			position: absolute;

			top: 50%;
			right: 20px;

			transform: translateY(-50%);

			margin-top: 0;

			z-index: 10;
		}


		/* Evita que el menú se encime con el logo SEIEM */

		.header-logo-derecho {
			padding-right: 70px;
		}


        #header nav ul {
            margin: 0;
            padding: 0;

            list-style: none;
        }


        #header nav ul li {
            margin: 0;
        }


        #header nav a {
            color: #7A0019;

            font-weight: 600;

            text-decoration: none;

            transition: all 0.3s ease;
        }


        #header nav a:hover {
            color: #BC955B;
        }


       /* ==========================================================
   LÍNEA INSTITUCIONAL ANIMADA
   ========================================================== */

#header::after {
    content: "";

    display: block;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        #7A0019 0%,
        #9F2241 25%,
        #BC955B 50%,
        #9F2241 75%,
        #7A0019 100%
    );

    background-size: 200% 100%;

    animation: lineaInstitucional 6s ease-in-out infinite;
}


/* ==========================================================
   ANIMACIÓN DE LA LÍNEA
   ========================================================== */

@keyframes lineaInstitucional {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


        /* ==========================================================
           AJUSTE DEL CONTENIDO
           ========================================================== */

        #main {
            padding-top: 20px;
        }


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

        @media screen and (max-width: 980px) {

            #header .inner {
                min-height: 82px;

                padding: 10px 20px;
            }


            .header-logo-izquierdo {
                flex: 0 0 160px;
            }


            .header-logo-izquierdo img {
                height: 52px;

                max-width: 160px;
            }


            .header-logo-derecho {
                flex: 0 0 160px;
            }


            .header-logo-derecho img {
                height: 48px;

                max-width: 160px;
            }


            .header-centro {
                padding: 0 15px;
            }


            .header-titulo {
                font-size: 20px;
            }


            .header-subtitulo {
                font-size: 11px;
            }


            #header nav {
                right: 20px;
            }

        }


/* ==========================================================
   AJUSTE FINAL - HEADER MÁS COMPACTO
   ========================================================== */

#header {
    min-height: 0;
    padding: 0;
}

#header .inner {
    min-height: 78px;
    height: 78px;
    padding: 5px 30px;
}


/* LOGO IZQUIERDO */

.header-logo-izquierdo {
    flex: 0 0 200px;
}

.header-logo-izquierdo img {
    height: 48px;
    max-width: 190px;
}


/* INFORMACIÓN CENTRAL */

.header-centro {
    padding: 0 20px;
}

.header-titulo {
    font-size: 21px;
}

.header-subtitulo {
    font-size: 18px;
    margin-top: 3px;
}


/* LOGO DERECHO */

.header-logo-derecho {
    flex: 0 0 200px;
}

.header-logo-derecho img {
    height: 46px;
    max-width: 180px;
}


/* LÍNEA */

#header::after {
    height: 3px;
}


/* ==========================================================
   HEADER PARA CELULAR
   ========================================================== */

@media screen and (max-width: 736px) {

    /* ------------------------------------------------------
       HEADER
       ------------------------------------------------------ */

    #header {
        position: relative !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        padding: 0 !important;

        margin: 0 !important;
    }


    /* ------------------------------------------------------
       CONTENEDOR
       ------------------------------------------------------ */

    #header > .inner {

        width: 100% !important;

        max-width: none !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 10px 12px 12px !important;

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        grid-template-rows: auto auto auto auto !important;

        align-items: center !important;

        justify-items: stretch !important;

        gap: 0 !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       LOGO CAOE
       ====================================================== */

    #header .header-logo-izquierdo {

        display: flex !important;

        position: static !important;

        width: auto !important;

        height: auto !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        justify-content: flex-start !important;

        align-items: center !important;

        grid-column: 1 !important;

        grid-row: 1 !important;
    }


    #header .header-logo-izquierdo img {

        display: block !important;

        width: auto !important;

        height: 38px !important;

        max-width: 130px !important;

        object-fit: contain !important;
    }


    /* ======================================================
       LOGO SEIEM
       ====================================================== */

    #header .header-logo-derecho {

        display: flex !important;

        position: static !important;

        width: auto !important;

        height: auto !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        justify-content: flex-end !important;

        align-items: center !important;

        grid-column: 2 !important;

        grid-row: 1 !important;
    }


    #header .header-logo-derecho img {

        display: block !important;

        width: auto !important;

        height: 36px !important;

        max-width: 125px !important;

        object-fit: contain !important;
    }


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

    #header > .inner > nav {

        position: static !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;

        margin: 8px 0 0 !important;

        padding: 0 !important;

        transform: none !important;

        grid-column: 1 / 3 !important;

        grid-row: 4 !important;

        text-align: center !important;
		
		border-top: 1px solid rgba(122, 0, 25, 0.15); 
		
		padding-top: 6px !important;
    }


    #header > .inner > nav ul {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: center !important;
    }


    #header > .inner > nav li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    #header > .inner > nav a {

        display: inline-block !important;

        width: auto !important;

        height: auto !important;

        margin: 0 !important;

        padding: 5px 18px !important;
		
		background: #7A0019 !important;
		
		color: #ffffff !important;
		
		border-radius: 4px;

        font-size: 12px !important;
		
		font-weight: 600;

        line-height: 1.2 !important;
		
		text-decoration: none !important; transition: all 0.3s ease;
    }


		#header > .inner > nav a:hover { 
			background: #9F2241 !important; 
			
			color: #ffffff !important; 
	}
	
    /* ======================================================
       INFORMACIÓN CENTRAL
       ====================================================== */

    #header .header-centro {

        display: block !important;

        position: static !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 8px 5px 0 !important;

        box-sizing: border-box !important;

        grid-column: 1 / 3 !important;

        grid-row: 3 !important;

        text-align: center !important;

        line-height: 1.2 !important;
    }


    /* ======================================================
       TÍTULO
       ====================================================== */

    #header .header-titulo {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 16px !important;

        line-height: 1.2 !important;

        letter-spacing: 0 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    /* ======================================================
       SUBTÍTULO
       ====================================================== */

    #header .header-subtitulo {

        display: block !important;

        width: 100% !important;

        margin: 4px 0 0 !important;

        padding: 0 !important;

        font-size: 10px !important;

        line-height: 1.3 !important;

        font-weight: 600 !important;

        text-align: center !important;

        white-space: normal !important;
    }


    /* ======================================================
       LÍNEA INSTITUCIONAL
       ====================================================== */

    #header::after {

        display: block !important;

        width: 100% !important;

        height: 3px !important;

        margin: 0 !important;
    }

}