body {
    background-color: #F5f3f2;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-weight: 400;
}

body,
html,
table,
tr,
td {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

.pie {
    font-size: 12px !important;
    font-style: italic;
    margin: 0 0 32px
}

h1,
h2,
h3 {
    font-style: normal;
    font-weight: 900;
}

h1 {
    font-size: 36px;
    line-height: 48px
}

h2 {
    margin-top: 12px
}


.c-amarillo {
    color: #fab500 !important
}

.b-amarillo {
    background-color: #fab500 !important
}

.c-marron {
    color: #91511f !important
}

.b-marron {
    background-color: #91511f !important
}

.c-azul {
    color: #00184e !important
}

.b-azul {
    background-color: #00184e !important
}

.c-white,
.c-white a,
.c-white h1,
.c-white h2 {
    color: #FFF
}

.c-black,
.c-black a,
.c-black h1,
.c-black h2 {
    color: #000
}

.b-white {
    background-color: #FFF
}

.btn {
    padding: 8px 24px;
    min-width: 120px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none
}

.btn:hover {
    background-color: #FFF !important;
    color: #000 !important;
    outline: 1px solid #000
}

.float {
    width: 200px;
    float: left;
    margin: 0 28px 28px 0
}

.m-0 {
    margin: 0 !important
}

.p-0 {
    padding: 0 !important
}

.categoria {
    text-transform: uppercase;
    font-size: 16px;
    line-height: 24px
}




header {
    width: 100%;
    margin: 0 auto;
    background-color: #fab500;
    position: absolute;
    padding-bottom: 72px;
    top: 0;
}

.archivo header { position: initial; padding-bottom: 0}

header .container {
    display: flex;
}

header .logo,
header .meta {
    width: 50%;
    background-color: #FFF;
    padding: 32px
}

header .meta {
    text-align: right;
    display: flex;
    align-items: flex-end;
    justify-content: end
}

header .meta .logos {
    display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
}

footer {
    width: 100%;
    background-color: #000;
}

footer .container {
    display: flex;
    background-color: #000;
    padding: 24px;
}

footer .logo,
footer .menu {
    width: 50%;
    padding: 24px;
    display: flex;
    align-items: center;

}

footer .menu {
        justify-content: end;
}

footer ul {
    margin: 0;
    padding: 0
}

footer li {
    margin: 0;
    padding: 0;
    list-style: none
}

footer ul li a {
    text-align: right;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px
}

footer ul li a:hover {
    color: #fab500
}

.container {
    background-color: #FFF;
    width: 1140px;
    margin: 0 auto
}

.wrap {
    margin: 0;
    padding: 0;
    background-color: #F5F3F2;
    top: 180px
}

.cover {
    background-size: cover;
    background-position: center bottom;
    width: 1140px;
    height: 440px;
    margin: 180px auto 0;
    z-index: 1;
    position: relative;
}

.main {
    padding: 48px
}

.antetitulo {
    text-transform: uppercase;
    color: #fab500
}

.reducido {
    width: 768px;
    margin: 0 auto;
    text-align: justify;
}

.reducido p,
.reducido li,
details summary {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 32px
}

details {
    margin: 0
}

summary {
    text-decoration: underline;
    padding: 12px;
    cursor: pointer;
    margin-bottom: 12px !important
}

summary:hover {
    background-color: #fab500
}

.reducido a {
    color: #91511f
}

.reducido li {
    margin-bottom: initial;
    font-size: 16px
}

.reducido img {
    width: 100%
}

.destacado {
    font-size: 32px;
    line-height: 40px;
    color: #000;
    padding: 32px 0
}

.quote {
    float: right;
    background-color: #91511f;
    padding: 32px;
    color: #fff;
    margin: 0 0 32px 32px;
    width: 240px;
    border-radius: 8px
}

.quote p {
    font-size: 16px;
    line-height: 24px;
}

.quote p strong {
    font-size: 20px
}

.columnas {
    display: flex;
}

.columna {
    background-color: #fff;
    width: 25%;
    padding: 0 12px 12px 0
}

.columna .foto {
    height: 300px;
    overflow: hidden;
}

.columna .foto img {
    width: 100%
}

.columna p {
    text-align: center;
    font-size: 20px
}

.columna a {
    text-decoration: none;
    color: #91511f;
}

.columna a:hover .foto {
    outline: 1px solid #000
}

video { aspect-ratio: 16/9; width: 100%}

main li { font-size: 20px !important}

@media screen and (max-width: 768px)
{
    header { position: relative; padding: 0}
    header .logo, header .meta { width: calc(100% - 64px); text-align: center; padding-bottom: 0}
    header .container {
        flex-direction: column;
        width: 100%
    }
    .container { width: calc(100%)}
    header .meta .logos {
        padding: 0;
        text-align: center;
        justify-content: center;
    }
    header .meta .logos img {
        padding: 0 20px; margin: 20px 0 !important;
        width: 40% !important
    }

    footer .container {
        display: flex; flex-direction: column; justify-content: center;
        width: calc(100% - 48px);
    }
    footer .logo, footer .menu { width: 100%; text-align: center; padding: 24px 0; display: block;}
    .cover { width: 100%; margin: 0}

    .container .main { padding: 24px; margin: 0}

    .reducido { width: 100%}

    .reducido .destacado { font-size: 28px; line-height: 32px;}

    .columna { width: 50%}

    .columna .foto { height: auto}
}