/* Variables */
:root {

    /* Colores */
    /* Color 1 */
    --c-1: rgb(4, 36, 68);
    --c-l-c-1: white;
    /* Transparencia */
    --t-c-1: rgba(4, 36, 68, .5);
    --c-l-t-c-1: white;

    /* Plantilla */
    --c-plantilla: var(--c-1);
    --c-l-plantilla: var(--c-l-c-1);
    /* Transparencia */
    --t-c-plantilla: var(--t-c-1);
    --c-l-t-c-plantilla: var(--c-l-t-c-1);
}

/* Plantilla */
html { scroll-behavior: smooth; }
.margen-elementos { gap: 25px; }

/* Body */
body {
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    min-height: 100vh;
    background: var(--c-plantilla);
}
/* Generales */
.btn-menu {
    display: none !important;
}

/* Alertas */
.cont-alerta {
    position: fixed;
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    justify-content: flex-end;
    top: 12.5%;
    left: 0px;
    width: 100%;
    padding: 0px 2.5%;
    z-index: 1;
}
.alerta {
    width: 100%;
    max-width: 500px;
    cursor: pointer;
    margin: 0px;
}
.alert i {
    margin-right: 7.5px;
}

/* Contenido izquierdo */
/* Menú */
.menu-i {
    position: -webkit-sticky; position: sticky;
    top: 0px;
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 15%;
    width: min-content;
    height: 100vh;
    background: white;
    z-index: 1;
    padding: 25px 0px;
}
.menu-i.visible { right: 0% !important; }

/* Contenedor de opciones */
.cont-opciones-menu-i {
    margin: 25px 0px;
}

/* Logotipo */
.logotipo-menu-i {
    margin: 0px auto;
    width: 50%;
}
/* Opciones */
.opcion-menu-i {
    display: block;
    color: black;
    padding: 5px 12.5px;
    background: rgba(0,0,0,.1);
    text-decoration: none;
}
.opcion-menu-i i { margin-right: 7.5px; }
.opcion-menu-i:not(:last-child){ border-bottom: solid rgba(0,0,0,0.2) 1px; }
.opcion-menu-i:hover {
    background: var(--c-plantilla);
    color: white;
}
.opcion-menu-i:hover .submenu-opcion-menu-i {
    display: initial;
}
.cont-subopciones-menu-i {
    padding: 7.5px;
    background: var(--c-2);
}
.submenu-opcion-menu-i {
    position: absolute;
    display: none;
    top: 0px;
    left: 100%;
    height: 100vh;
    width: 125%;
    background: var(--c-plantilla);
    overflow: auto;
}
.opcion-submenu-opcion-menu-i {
    display: block;
    color: var(--c-l-plantilla);
    padding: 5px 12.5px;
}
.opcion-submenu-opcion-menu-i:not(:last-of-type) {
    border-bottom: solid var(--c-l-plantilla) 1px;
}
.opcion-submenu-opcion-menu-i:hover {
    background: var(--c-l-plantilla);
    color: var(--c-plantilla);
}
.submenu-opcion-submenu-opcion-menu-i div {
    padding: 7.5px;
    background: grey;
    display: none;
    flex-direction: column;
    width: 100%;
}
.submenu-opcion-submenu-opcion-menu-i:hover div {
    display: flex;
}

/* Información de contacto */
.cont-enlaces-contacto {
    position: fixed;
    top: 45%;
    right: 0px;
    z-index: 10;
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    flex-direction: column;
    background-color: white;
    box-shadow: 0px 0px 2.5px black;
}
.cont-enlaces-contacto a, .cont-enlaces-contacto a:hover {
    text-decoration: none;
    margin: 5px;
    color: var(--c-plantilla);
}
.cont-enlaces-contacto a img {
    width: 25px;
}

/* Contenido derecho */
.contenido-derecho {
    margin: 0px 12.5px;
    box-shadow: 0px 0px 15px 7.5px black;
    width: 100%;
    background: white;
    overflow: hidden;
}

/* Menú */
.menu-s {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 5px black;
    background: var(--c-plantilla);
    padding: 12.5px 25px;
    color: var(--c-l-plantilla);
}
.menu-s a {
    color: var(--c-l-plantilla);
    text-decoration: none;
}
.menu-s > *:not(.titulo-menu-s){
    width: 12.5%;
    text-align: center;
    cursor: pointer;
}

/* Contenido dinamico de vista */
.contenido {
    padding: 2.5%;
    flex: 1;
}

/* Pie de pagina */
.pie-pagina {
    background: rgba(0,0,0,0.8);
    color: white;
    text-align: center;
    padding: 50px 0px 25px;
    width: 100%;
}
.pie-pagina > *:not(:last-child) { margin-bottom: 25px; }
.pie-pagina div div {
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    width: 100%;
    min-width: 250px;
    max-width: calc(100% /4.5);
    padding: 12.5px;
    border: solid white 1px;
}
.pie-pagina div div i {
    font-size: 25px;
    margin-bottom: 12.5px;
}

/* Mapa */
.mapa-vtn-direccion {
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* Responsive */
@media screen and (max-width: 850px) {

    .contenido-derecho { margin: 0px; }

    /* Botones de menú */
    .btn-menu { display: block !important; }

    /* Menu izquierdo */
    .menu-i {
        position: fixed;
        top: 0px;
        right: 100%;
        width: 100%;
        height: 100%;
        overflow: auto;
        transition: .5s;
        z-index: 5;
    }
    .logotipo-menu-i { width: 25%; }

    /* Menú superior */
    .titulo-menu-s { text-align: center; }
}