/*@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,700;0,800;1,300;1,400;1,700;1,800&display=swap');


:root {
    --primary-color: #e52a1b;
    --dark-color: #000000;
    --light-color: #ffffff;

    --gray-light-color: #e9e9e9;
    --gray-dark-color: #9e9e9e;

    --hex-primary-color: brightness(0) saturate(100%) invert(16%) sepia(61%) saturate(5336%) hue-rotate(356deg) brightness(108%) contrast(87%);
    --hex-dark-color: invert(0%) sepia(8%) saturate(7476%) hue-rotate(163deg) brightness(97%) contrast(98%);
    --hex-light-color: invert(100%) sepia(0%) saturate(7414%) hue-rotate(93deg) brightness(118%) contrast(118%);

    --primary-font: "Poppins", sans-serif;;

}

body { margin: 0px; padding: 0px; font-family: var(--primary-font); background-color: var(--light-color); }
body.disabled{ overflow: hidden; color: var(--white-color); }

a { text-decoration: none; color: var(--primary-color); }

a:hover { color: var(--dark-color); }

a:focus { color: var(--primary-color); }


/* bootstrap mod */
@media(max-width: 1199px){
 .container, .container-sm {
    max-width: calc(100% - 40px);
  }
}
/* ... bootstrap mod */



/* Espaciados */
.pb-sm { padding-bottom: 24px; }

/* HEADER */
#header{ position: relative; z-index: 10; width: 100vw; height: 120px; transition: all .4s ease; background-color: var(--light-color); padding-top: 20px; }

#logo { height: 80px; text-align: left; }
#logo img { height: 100%; object-fit: contain; }
.showsticky { display: none; }

#header #menu { text-align: right; overflow-x: scroll; }
#header #menu ul { overflow-x: hidden; white-space: nowrap; width: 100%; margin: 0px; padding: 0px; }
#header #menu li { display: inline; margin: 5px 20px; font-size: 1.2rem; text-transform: uppercase; }

#ico-mobmenu { display: none; text-align: right; }
#ico-mobmenu img { height: 100%; max-height: 60px; filter: var(--hex-primary-color); cursor: pointer; }

/*#ico-mobmenu img:hover { filter: var(--hex-dark-color); }*/

#header.sticky { position: fixed; height: 70px; background-color: var(--primary-color); padding-top: 10px; }
#header.sticky #logo { height: 50px; }
#header.sticky #logo .hidesticky { display: none; }
#header.sticky #logo .showsticky { display: inherit; }
#header.sticky a { color: var(--light-color); }
#header.sticky #menu li { font-size: 1rem;}
#header.sticky #ico-mobmenu img { filter: var(--hex-light-color); max-height: 50px; }


@media (max-width: 1199px){
    #header #menu ul { display: none; }
    #ico-mobmenu { display: inherit; }
}
/* ... HEADER */

/* CONTENT */

#content{ min-height: 100vh; }

/* ... CONTENT */


/* MENÚ MÓVIL */
#mobmenu { position: fixed; right: -100vw; top: 0px; background-color: var(--primary-color); width: 500px; height: 100vh; padding: 20px; z-index: 20; opacity: 0; transition: all .4s ease; overflow: hidden; overflow-y: scroll; }

#mobmenu a { color: var(--light-color); }
#mobmenu a:hover { color: var(--dark-color); }

#logo-mobmenu { margin-bottom: 40px; }

#logo-mobmenu img { height: 80px; display: none; }

#mobmenu ul { padding-top: 60px; padding-left: 40px; list-style: none; }

#mobmenu li { font-size: 1.2rem; margin-bottom: 3px; }

#mobmenu li.main-menu { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; text-transform: uppercase; }

#mobmenu.opened { right: 0px; opacity: 1; }

#close-mobmenu { position: absolute; right: 30px; top: 30px; cursor: pointer; }
#close-mobmenu img { width: 60px; filter: var(--hex-light-color); }
/*#close-mobmenu:hover img { width: 60px; filter: var(--hex-dark-color); }*/

@media(max-width: 767px){
    #mobmenu{ width: 100vw; }

    #close-mobmenu { right: 20px; top: 20px; }

    #logo-mobmenu img { display: inherit; }

    #mobmenu ul { padding-top: 0px; }
}
/* ... MENÚ MÓVIL */




/* FOOTER */
#footer { background-color: var(--light-color); border-width: 0px; border-top-width: 8px; border-style: solid; border-color: var(--primary-color); padding-top: 20px; padding-bottom: 40px; }

#footer a { color: var(--dark-color); }
#footer a:hover { color: var(--primary-color); }

#footerlogo { margin-bottom: 20px; }
#footerlogo img { width: 100%; max-width: 100px; filter: var(--hex-primary-color); }

#footer-info { text-align: center; }
#footer-info a { text-transform: uppercase;}
a.footer-menu { text-wrap: nowrap; }
#footer-info p { margin-top: 5px; margin-bottom: 5px; }

@media(max-width: 1199px){
    #footer { text-align: center; }
}
/* ... FOOTER */





/* MÓDULOS */

.section-mod-1 { margin-top: 40px; margin-bottom: 40px; font-size: 1.3rem; }



.section-mod-2 { padding-top: 20px; padding-bottom: 20px; }


.featured.featured-1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr; 
    grid-column-gap: 25px;
    grid-row-gap: 25px;     
}

.featured.featured-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr; 
    grid-column-gap: 25px;
    grid-row-gap: 25px; 
}

.featured.featured-3{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr); 
    grid-column-gap: 25px;
    grid-row-gap: 25px;     
}

.featured .item{ background-color: var(--gray-light-color); position: relative; cursor: pointer; overflow: hidden; }

.featured .item .image { width: 100%; height: 100%; overflow: hidden; }

.featured .item .image { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; }

.gradient {  
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0) 100%); 
position: absolute; height: 60%; width: 100%; bottom: 0px; z-index: 1; opacity: .7;
}

@media(max-width: 991px){
.gradient { height: 100%; opacity: .8; }
}

.featured .item .image .text{
    position: absolute; bottom: 20px; z-index: 2;
}

.featured .text { width: calc(100% - 60px); padding-left: 40px; }

.featured h2 { 
font-optical-sizing: auto;
font-style: normal;
font-weight: 800;
font-size: 1.6rem;
}

.featured-1 .item-1 .text .title h2 { font-size: 2.6rem; }
.featured-3 .item-1 .text .title h2 { font-size: 2.4rem; }

.featured .text .title h2 { color: var(--light-color); 

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}

/*.featured .item-1 .text .title h2 { color: var(--light-color); font-size: 2.6rem; margin-bottom: 80px; 
    -webkit-line-clamp: 4;
}

.featured .item-2 .text .title h2 {
    -webkit-line-clamp: 4;
}
*/



/* Pendiente mirar el subrayado */
/* https://codepen.io/Ash/pen/WBMxpp */


.featured .text .date { text-transform: uppercase; font-size: 1.1rem; color: var(--light-color); display: none;}

.featured .text .date span { padding: 5px; background-color: var(--primary-color); }

.featured-1 .item-1 { grid-area: 1 / 1 / 2 / 2; } 

.featured-2 .item-1 { grid-area: 1 / 1 / 2 / 2; }
.featured-2 .item-2 { grid-area: 1 / 2 / 2 / 3; } 

.featured-3 .item-1 { grid-area: 1 / 1 / 3 / 3; }
.featured-3 .item-2 { grid-area: 3 / 1 / 4 / 2; }
.featured-3 .item-3 { grid-area: 3 / 2 / 4 / 3; } 


.featured-1 .item-1 { aspect-ratio: 16/9; }
.featured-2 .item-1 { aspect-ratio: 5/4; }
.featured-3 .item-1 { aspect-ratio: 3/1.5; }

@media(max-width: 1600px){
    /*.featured .text .title h2 { font-size: 1.2rem; }
    .featured .item-1 .text .title h2 { font-size: 2rem; }
    .featured .item .image .text { bottom: 20px; }*/
}

@media(max-width: 991px){
    .featured .text { width: calc(100% - 40px); padding-left: 20px; }
    
    .featured .text .title h2 { font-size: 1.2rem; }
    .featured .item-1 .text .title h2,  .featured .item-2 .text .title h2, .featured .item-3 .text .title h2{ font-size: 1.5rem; }
    .featured .text .date { font-size: 1rem; }

    .featured.featured-1,.featured.featured-2,.featured.featured-3, .featured.featured-4 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr); 
    }

    .featured-1 .item-1 { grid-area: 1 / 1 / 2 / 2; } 

    .featured-2 .item-1 { grid-area: 1 / 1 / 2 / 2; }
    .featured-2 .item-2 { grid-area: 2 / 1 / 3 / 2; } 

    .featured-3 .item-1 { grid-area: 1 / 1 / 2 / 2; }
    .featured-3 .item-2 { grid-area: 2 / 1 / 3 / 2; }
    .featured-3 .item-3 { grid-area: 3 / 1 / 4 / 2; } 

    
    .featured-1 .item-1 { aspect-ratio: 16/9; }
    .featured-2 .item-1 { aspect-ratio: 16/9; }
    .featured-3 .item-1, .featured-4 .item-1 { aspect-ratio: 3/2; }

}

@media(max-width: 991px){
.featured .item-1 .text .title h2,  .featured .item-2 .text .title h2, .featured .item-3 .text .title h2{ font-size: 1.8rem; }
}

@media(max-width: 767px){
.featured .item-1 .text .title h2,  .featured .item-2 .text .title h2, .featured .item-3 .text .title h2{ font-size: 1.2rem; }
}

/* ... MÓDULOS */

/* POST */
.post{ padding-top: 60px;  }
.post .header-image{ /*background-color: var(--primary-color); */margin-top: 20px; margin-bottom: 40px; }
.post h1 { font-size: 3rem; font-weight: 800; margin-bottom: 10px;}
.post .date { text-transform: uppercase; font-size: 1.1rem; color: var(--primary-color);  }
.post .share-buttons { text-align: right; }
.image-head{ width: 100%; aspect-ratio: 16/7; border-width: 0px; border-bottom-width: 0px; border-color: var(--primary-color); border-style: solid; max-width: 1920px; margin: 0 auto; } 
.image-head img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.post .article-content { font-size: 1.3rem; margin-top: 40px; text-align: justify; }

.text-list-news ul { list-style: none; padding: 10px; } 
.text-list-news ul li { font-size: 1.2rem; margin-top: 12px; margin-bottom: 12px; }
a .list-date  { color: var(--gray-dark-color); font-size: 1.1rem; text-transform: uppercase; }
.post-sidebar { padding-left: 60px; }

.post-tags {
  margin-bottom: 20px;
  text-align: center;
}
.post-tag {
  background-color: var(--primary-color);
  color: var(--light-color);
  padding: 5px 15px;
  margin: 5px;
  text-wrap: nowrap;
  display: inline-block;
}

a.post-tag {
  color: var(--light-color);
}

.post-tag:hover{
  background-color: var(--gray-dark-color);
  color: var(--light-color);
}

@media(max-width: 1200px){
    .post .share-buttons { text-align: left; margin-top: 20px; }
    .post-sidebar { padding-left: 10px; margin-top: 40px; }
    .image-head{ aspect-ratio: 4/3; }
    .post h1 { font-size: 2.5rem; }
}

@media(max-width: 991px){
    .post h1 { font-size: 2rem; }
}
/* ... POST */

.card-title { color: var(--primary-color); }
.card-main{ border-width: 0px; }
.card-body a { color: var(--dark-color); }

.share-title{ text-transform: uppercase; font-weight: bold; margin-bottom: 5px; color: var(--primary-color); }
a.share-button { background-color: var(--gray-light-color); border-radius: 50%; width: 50px; aspect-ratio: 1/1; display: inline-block; position: relative; margin-left: 2px; margin: 2px; }
a.share-button img { position: absolute; left: 50%; top: 50%; width: 25px; transform: translate(-50%,-50%);}

a.share-button:hover { background-color: var(--primary-color); }
a.share-button:hover img { filter: var(--hex-light-color); }

.list_posts .row{ margin-top: 20px; margin-bottom: 20px;}
.list_posts .title h2 { font-size: 1.5rem; color: var(--dark-color); }
.chronology-section .post-image { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.chronology-section .post-image img { width: 100%; height: 100%; object-fit: cover; object-position: center;  }

.video-short iframe { width: 100%; aspect-ratio: 9/16; margin-bottom: 20px; }
.video-responsive iframe { width: 100%; aspect-ratio: 16/9; margin-bottom: 20px; }


.head-content { width: 100%; overflow: hidden; margin-bottom: 20px; background-color: var(--primary-color); color: var(--light-color); background-size: cover; }
.head-content.head-pred { padding: 10px 20px; }
.head-content.head-pred h1 { font-size: 3rem; padding: 0px; margin: 0px; }

.head-content.head-pred{  }
.head-content.head-min { }
.head-content.head-med {  }
.head-content.head-big {  }

.head-image { position: relative; }
.head-image h1 { position: absolute; bottom: 20px; left: 20px; 
font-weight: 800; font-size: 3rem; z-index: 2; }
.head-image .gradient { width: calc(100% + 40px); left: -20px; }
.head-image.head-pred{ aspect-ratio: 16/9; }
.head-image.head-min { aspect-ratio: 4/1; }
.head-image.head-med { aspect-ratio: 4/2; }
.head-image.head-big { aspect-ratio: 3/2; }
@media(max-width: 991px){
    .head-content.head-pred h1 { font-size: 1.8rem; }
}

.btn { border-radius: 0px;}
.btn-primary { background-color: var(--primary-color); color: var(--light-color); padding: 10px 20px; border: none; cursor: pointer; font-size: 1.4rem; }
.btn-primary:hover { background-color: var(--dark-color); color: var(--light-color); }

@media(max-width: 991px){
    .content-side { margin-bottom: 40px; }
}


/* Galería de fotos */
.post-gallery-section{ margin-top: 40px; margin-bottom: 40px; }
.post-gallery-section .image-gallery { width: 100%; aspect-ratio: 1/1; overflow: hidden; margin-top: 10px;margin-bottom: 10px; cursor: pointer; }
.post-gallery-section .image-gallery img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.post-gallery-section .container { padding: 0px; margin: 0px; }
/* ... galería de fotos */


/* overlay */
#overlay{
  position: fixed; background-color: var(--dark-color); z-index: 1000;
  width: 100vw; height: 100vh; top: 0px; left: 0px; display: none;
}

#overlay-content{
  position: absolute; width: 100vw; height: 100vh;
  background-color: var(--dark-color); top: 0px; left: 0px; z-index: 110;
}

#overlay-content img{ width: calc(100% - 40px); height: calc(100% - 80px); object-fit: contain; margin: 40px; }

#overlay-caption { position: absolute; z-index: 111; bottom: 20px; left: 20px; width: auto; max-width: calc(100% - 40px); background: rgba(0,0,0, .5); padding: 10px; color: #fff; font-weight: normal; }

.overlay-nav{ position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,.1); width: 4vw; aspect-ratio: 1 / 1; max-width: 100px; z-index: 120; cursor: pointer; font-size: 2rem; color: var(--second-color); }
#overlay-prev{ left: 44px; }
#overlay-next{ right: 44px; }

.overlay-nav-ico{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.overlay-nav-ico img{ filter: var(--hex-light-color); width: 50px;}

#overlay-close{ position: absolute; top: 44px; right: 44px; z-index: 120; cursor: pointer; background-color: rgba(0,0,0, .1); color: var(--light-color); width: 4vw; max-width: 100px; aspect-ratio: 1 / 1; transition: background-color .5s; }

#overlay-close:hover{ background-color: rgba(0,0,0, 1); }

#overlay-close img{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: var(--hex-light-color); width: 50px;
}
/* ... overlay */

/* Footer */
#footer {  }
#footer-links { text-align: right; }
#footer-links a { display: inline-block; width: 45px; height: 45px; background-color: var(--primary-color); overflow:hidden; position: relative; margin: 2px; border-radius: 50%; }

#footer-links a img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); filter: var(--hex-light-color); width: 25px; }

#footer-links a:hover { background-color: var(--dark-color); }

@media(max-width: 1281px){
#footer-links { text-align: center; padding-top: 10px; padding-bottom: 10px;}
}
/* ... footer */


/* Formulario de contacto */
.sec6 h2 { margin-bottom: 40px; }
.section-6-fields{ width: 100%; max-width: 600px; font-size: 1.4rem; padding: 5px 10px; }
textarea.section-6-fields { width: 100%; max-width: 600px; height: 200px; }
.section-6-fields.sm { max-width: 200px; }
@media(max-width: 568px){
.section-6-fields.sm { max-width: none; }
}
/* ... formulario de contacto */

/* Sección 7: últimos vídeos canal youtube */
#sec7 { margin-top: 40px; margin-bottom: 40px; }
.sec7-item { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; margin-bottom: 20px; background-color: var(--dark-color); }
.sec7-item img { object-fit: cover; width: 100%; height: 100%; margin-bottom: 20px; opacity: .6;}
#sec7 h2 { margin: 0px; padding: 0px; color: var(--primary-color); margin-bottom: 20px; font-size: 2rem;}

.play-icon { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%,-50%); width: calc(100% - 40px); text-align: center;  }
.play-icon .title{ width: 100%; overflow: hidden; width: 100%; color: var(--light-color); font-weight: bold; text-transform: uppercase; text-wrap: nowrap; text-overflow: ellipsis; font-size: 1.1rem; }
.play-icon img { width: 80px; filter: var(--hex-light-color); opacity: 1; }