:root {
    --tipografia-pri: "Barlow", sans-serif;
    --tipografia-sec: Georgia, "Times New Roman", Times, serif;
    --ancho-main: 80%;
    font-size: 16px;

    /* Gama de colores */
    --azul-esic: hsl(222, 100%, 46%);
    --azul-claro: hsla(222, 100%, 46%, 0.1);
    --azul-escur: hsla(222, 100%, 46%, 0.5);
    --gris-claro: hsl(0, 0%, 80%);
    --gris-escur: hsl(0, 0%, 50%);
    --font-size: 16px;
    --vermello-urjc: hsl(353, 100%, 40%);
    --gris-claro: hsl(220, 24%, 88%);
}

/*  
*   ----------------------------------
*   Estructura base
*   ----------------------------------
*/
body {
    font-size: 16px;
    font-family: var(--tipografia-pri);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    background-color: hsl(0, 0%, 97%);
}

/* 1. Cabeceira */

header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gris-claro);
    min-height: 150px;
    box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.9);
    z-index: 100;
    border-bottom: 10px solid var(--vermello-urjc);
}

header .logotipo img {
    max-width: 200px;
}

/* 2. Main */
main {
    display: grid;
    gap: 0.5rem;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    place-content: center;
    margin: 0 auto;
    flex: 1;
    padding: 0 2rem;
}

main h1{
    text-align: center;
}

.menu ul,
.menu ol,
.derradeiro ul {
    display: inline-flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}
/* 
FOOTER
------------------------------------------------- */
footer {
    background: var(--gris-claro);
    
}

footer > div:first-of-type a {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: black;
}
footer a {
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

footer > div:first-of-type {
    max-width: var(--ancho-main);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: auto;
    min-height: 3rem;
    place-content: center;
    place-items: center;
    padding: 1rem 0;
}
.terciario {
    display: flex;
    align-content: center;
    flex-direction: column; 
    width: 200px;
}

.terciario ul:first-of-type{
    //display: flex;
    //flex-direction: column; 
    //height: auto;
    //gap:0 !important;
    //margin: 0;
    //text-align: right;
}

.rrss{
    display: flex;
    justify-content: space-around;
    margin: 0 !important;
    //padding: 0 !important;
    //gap: 0 !important;
}

.rrss li, rrss a{
    width: 20px;
}

.derradeiro {
    background: var(--vermello-urjc);
    color: white;
    font-size: 0.9rem;
}

.derradeiro > div {
    max-width: var(--ancho-main);
    display: flex;
    place-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: auto;
    min-height: 2rem;
    text-align: center;
}
.derradeiro p {
    margin: 0;
    flex: 1;
}
.derradeiro ul {
    color: white;
}
.derradeiro a {
    color: white;
}

footer [src$=".svg"] {
    width: 150px;
    height: auto;
}

footer .logo {
    min-width: 70px;
}

.terciario img {
    min-width: 1rem;
    max-height: 1rem;
}

footer .otros_logos img:last-of-type {
    max-width: 100px;
    margin-left: 1rem;
}

/* 
Ferraganchos 
*/

.oculto {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

/*  
*   ----------------------------------
*   Main: Contido
*   ----------------------------------
*/

.intro {
    min-height: 120px;
    font-size: 1.2rem;
    min-height: 120px;
    padding: 2rem;
}

/* 2. Balda de revistas */

.balda {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    place-content: center;
    margin: 0 auto;
    padding: 3rem 0;
}
/* contentor de revistas */

.item {
    position: relative;
    width: 100%;
    min-width: 300px;
    min-height: 450px;
    z-index: 1;
}

/* Portada de revista */
.portada {
    margin: 0 auto;
    display: block;
    border: solid 1px white;
    box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.25);
    transform-origin: left bottom;
    max-width: 220px;
    transition: 600ms ease-in-out;
}

.portada:hover {
    box-shadow: -5px 20px 20px hsla(0, 0%, 0%, 0.4);
    transform: rotate(-15deg);
    transition: 180ms ease-in-out;
    cursor: pointer;
}

/* contentor de faixa */
.item > div {
    clip-path: inset(-800px 0px -30px 0px);
    display: block;
    width: 100%;
    min-height: 270px;
    position: absolute;
    z-index: 100;
    bottom: 0px;
}

/* faixa de textos */
.plano {
    width: 400px;
    height: 200px;
    transform: rotate(-30deg);
    padding: 1rem 1.5rem 0 0;
    position: absolute;
    z-index: 90;
    left: -38px;
    top: 0px;
    background: linear-gradient(
        205deg,
        hsla(0, 0%, 97%, 1) 0%,
        hsla(0, 0%, 97%, 1) 60%,
        hsla(0, 0%, 97%, 0) 100%
    );
}

/* cousos para moldear a caixa de textos */
.forma {
    width: 100px;
    height: 100%;
}

.esquerda {
    shape-outside: polygon(0 0, 100% 0, 0 100%);
    float: left;
}

.dereita {
    shape-outside: polygon(100% 200px, 100% 0, 0 200px);
    float: right;
}

/* ctextos */
.textos {
    width: 340px;
}
.textos * {
    margin: 0;
}
.textos h3 {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05rem;
    color: var(--vermello-urjc);
}

@media screen and (max-width: 720px) {
    .balda{
        flex-direction: column;
    }
    
    .portada:hover {
        transform: none;
    }
    
    .derradeiro{
        font-size: 0.75rem;
    }
}