/* =============================
   ESTILOS ESTRUCTURA EDUTIC.AR
   ============================= */


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

/* "sticky": hace que el header quede fijo
   "z-index: 1000": posiciona el header delante de todo */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-principal {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
	align-items: flex-end;
	padding: 0 0 1px 0;
    background-color: var(--gris-muy-claro); /* gris muy claro */
}

.header-principal img {
    height: 100px;
    width: auto;
	padding: 0px 20px;
}

/* ------------------------- */
/* --- DISEÑO RESPONSIVE --- */
/* ------------------------- */

@media (max-width: 768px) {

	.header-principal {
        flex-direction: column;
        align-items: center;
    }

    .header-principal nav ul {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

}

/* -------------------------------------------------- */


/* ===============================
   === CONTENEDOR DE CONTENIDO ===
   =============================== */

.container {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.contenido {
    flex: 3; /* más ancho que Widgets */
}

/* ------------------------- */
/* --- DISEÑO RESPONSIVE --- */
/* ------------------------- */

@media (max-width: 768px) {

    .container {
        flex-direction: column;
    }

}
/* -------------------------------------------------- */


/* ===============
   === WIDGETS ===
   =============== */

.widgets {
    flex: 1; /* menos ancho que Contenido */
    background-color: var(--gris-muy-claro);
    padding: 15px;
}

/* -------------------------------------------------- */


/* =====================
   === PIE DE PAGINA ===
   ===================== */

footer {
    background-color: var(--verde-claro); /* verde claro */
    color: var(--verde-oscuro); /* verde oscuro */
    text-align: center;
    padding: 15px;
    margin-top: 20px;
	font-size: var(--font0875rem14px);
}
footer a {
	color: var(--verde-oscuro); /* verde oscuro */
	text-decoration: underline;
}
footer a:hover {
	color: var(--verde-muy-oscuro); /* verde muy oscuro */
	text-decoration: underline;
}

/* -------------------------------------------------- */




/* -------------------------------------------------- */