@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
/*euskera*/
article.atrevete {
    font-family: "Source Serif 4", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size:18px;
}
article.atrevete a {transition: all 0.3s ease-in-out;}

article.atrevete h1, article.atrevete h2, article.atrevete h3 {
    font-family: "Source Serif 4", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
article.atrevete h1 {font-size:50px;color:#fff;background-color: rgba(0, 0, 0, 0.3);padding:10px;}
article.atrevete h1 span {display:block;font-size: 70%; font-weight: 400;}
article.atrevete .destacar {font-size:120%;font-weight: 700;}

article.atrevete section:not(.siguenos) {margin-top:20px;margin-bottom:20px;}

@media (min-width:1200px) {
    article.atrevete h1 {font-size:90px;text-shadow: 3px 3px 8px #000;}
    article.atrevete h3 {font-size:28px;}
    article.atrevete p.intro {font-size:26px;}
    article.atrevete section:not(.siguenos) {margin-top:40px;margin-bottom:40px;}
}
@media (min-width:1600px) {
    article.atrevete h1 {font-size:110px;text-shadow: 3px 3px 8px #000;}
}

/*siguenos*/
.siguenos {background:#000;}
.siguenos p {color:#fff;}
.siguenos .hashtag {letter-spacing:5px;font-weight: 400;font-size: 1.8rem;line-height: 1;}
.siguenos .hashtag a, .siguenos .hashtag a:hover {color:#006FF0;}

/*** main ***/
#main {
    background: url('../images/portada.webp') no-repeat center center;
    background-size:cover;
    height:calc(100vh - 52px);
    overflow:hidden;
}
@media (min-width:1200px) {
    #main {height:calc(100vh - 125px);}
}
ul.row {list-style:none;padding-left:0;}
/*PALABRAS*/
ul.palabras {padding-left: 0;list-style: none;}
.palabras li {margin-bottom:15px;}
.palabras li div.fondo {
    background-size: cover;
    position: relative; /* Necesario para posicionar el seudoelemento */
    height: 100%; 
    width: 100%;
    min-height:300px;
    -ms-flex-align: center !important;
    align-items: center !important;
    display:grid;
}
.palabras li div.fondo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Negro con 50% de opacidad */
    z-index: 1; /* Para que esté encima de la imagen pero debajo del contenido */
}
.palabras li div.fondo.bihotz {background-image: url('../images/palabras-bihotz.webp');}
.palabras li div.fondo.musutruk {background-image: url('../images/palabras-musutruk.webp');}
.palabras li div.fondo.ortzadar {background-image: url('../images/palabras-ortzadar.webp');}
.palabras li div.fondo.ilargi {background-image: url('../images/palabras-ilargi.webp');}
.palabras li div.fondo.erditu {background-image: url('../images/palabras-erditu.webp');}
.palabras li div.fondo.sorgin {background-image: url('../images/palabras-sorgin.webp');}
.palabras li div.fondo.ongi {background-image: url('../images/palabras-ongietorri.webp');}
.palabras li div.fondo.hamaiketako {background-image: url('../images/palabras-hamaiketako.webp');}
.palabras li div.fondo.zirimiri {background-image: url('../images/palabras-zirimiri.webp');}
.palabras li div.contenido {
    position: relative;
    z-index: 2;
    color: white;
    padding: 20px;
    text-align: center;
}
@media (min-width: 768px) {
    .col5 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .palabras li {margin-bottom:30px;}
}
/*Listados*/
article.atrevete ul.listado {list-style: none;}
article.atrevete ul.listado li {margin-bottom: 10px;}
article.atrevete ul.listado li span {padding: 5px 15px;}
article.atrevete ul.listado li:nth-child(2n) span {background-color:#F2F9FF;border-radius:6px;}
/*destacados*/
article.atrevete .destacado img {max-width: 100%;}
article.atrevete .destacado p {text-align:right;}
article.atrevete .destacado a {color:#000;font-weight:bold;}
article.atrevete .destacado a:hover {text-decoration:underline;}
/*agenda*/
body article.atrevete .card h3.titulo { font-size: 1.2em; font-weight: 600; }
body article.atrevete .card p.subtitulo {text-transform:inherit;font-size:16px;letter-spacing:0}
/*video*/
article.atrevete .video h3 {font-size:1.3rem;margin-bottom:0;margin-top:6px;}