:root{
    --black-color: #292929; /*negro*/
    --white-color: #ffffff; /*blanco*/
    --main-color: #ff2828; /*rojo*/
    /*--second-color: #0033a0; */ /*azul*/
    --second-color: rgba(0,100,200,1);
    --light-color-1: #e0e0e0;

    --jcenteno-color: #FF2E24;
    --auditorio-color: #cfa66a;

    --dark-color-1: #000000; /*negro puro*/ 
    --dark-color-2: #464646;

    /* https://codepen.io/sosuke/pen/Pjoqqp */
    --hex-black-color: invert(16%) sepia(15%) saturate(0%) hue-rotate(216deg) brightness(94%) contrast(100%);
    --hex-white-color: invert(97%) sepia(49%) saturate(2%) hue-rotate(26deg) brightness(114%) contrast(100%);
    --hex-main-color: invert(33%) sepia(77%) saturate(4736%) hue-rotate(340deg) brightness(96%) contrast(89%);
    --hex-second-color: invert(48%) sepia(83%) saturate(988%) hue-rotate(173deg) brightness(87%) contrast(86%);
}

body{ background-color: var(--white-color); padding: 0px; margin: 0px; min-height: 100vh; }

    @media(max-width: 991px){
      body.blocked { height: 100vh; overflow: hidden;  }
    }

a:link, a:visited { color: var(--main-color); text-decoration: none; }
a:hover, a:active { color: var(--second-color); }

.container { max-width: 1280px; }

    @media (max-width: 768px) {
      .container, .container-md, .container-sm {
        max-width: 1280px;
      }
    }

.gradient-bottom {
    background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 0.5228292000393908) 0%, rgba(0, 0, 0, 0.44439782749037116) 45%, rgba(255, 255, 255, 0) 100%); width: 100%; height: 80%; position: absolute; bottom: 0px; left: 0px; z-index: 1;
}

#head { width: 100vw; height: 100px; background-color: var(--main-color); color: var(--white-color); transition: all .3s ease; display: block; z-index: 999; position: fixed; }

  #head_logo { text-align: left;  }

  #head_logo img { height: 60px; margin-top: 20px; filter: var(--hex-white-color); transition: all .3s ease; }


  #head.sticky { height: 60px;  }

    #head.sticky #head_logo img { height: 40px; margin-top: 0px; }

    @media(max-width: 768px){
      #head.sticky #head_logo img { margin-top: 10px; }
    }

#top-space{ height: 100px; }
  @media(max-width: 768px){
    #top-space{ display: none; }
  }

#head_menu { padding-top: 20px; text-align: left; }

#head_menu a { color: var(--white-color); }

#head_menu .content { width: 100%; overflow-x: scroll; }



#head_menu ul { overflow-x: hidden; white-space: nowrap; width: 100%; }

#head_menu  li { display: inline; margin: 5px 20px; font-size: 1.2rem; text-decoration: none; }


#head_menu li a { color: var(--white-color); }


#head_menu li a:hover { color: var(--black-color); }

#head li a { color: var(--white-color); }

#head .submenu { position: absolute; background: var(--light-color-1); width: 100vw; min-height: 10vh; z-index: 998; display: none; opacity: 0; transition: all .3s ease; padding-top: 20px; padding-bottom: 20px; top: 100px;  border-width: 0px; /*border-bottom-width: 8px; border-style: solid; border-color: var(--main-color);*/ }

#head.sticky .submenu { top: 60px; }

#head .submenu li { list-style: none; line-height: 120%; margin-bottom: 10px; } 

#head .submenu li li { margin-bottom: 5px; }

#head .submenu a { color: var(--black-color); }

#head .submenu a:hover { color: var(--main-color); }

#head .submenu .title { font-size: 120%; font-weight: bold; margin-bottom: 20px; } 

#head .submenu.active { display: inline; opacity: 1; }

#head_search { text-align: right; }

#head-toogle-mobile-menu { display: none; text-align: right; cursor: pointer; }

#head-toogle-mobile-menu.opened #mobile-menu-icon-closed { display: none; opacity: 0; }
#mobile-menu-icon-opened { display: none; opacity: 0; }
#head-toogle-mobile-menu.opened #mobile-menu-icon-opened { display: inline; opacity: 1; }

.icon-toogle-mobile-menu { transition: all .3s ease; }
.icon-toogle-mobile-menu img { width: 50px; filter: var(--hex-white-color); }

#submenu-mi-ayuntamiento .content { columns: 2 auto; }

#submenu-areas .content { columns: 4 auto; }

#submenu-a-z .content { columns: 3 auto; }

#submenu-areas .content ul{ 
page-break-inside: avoid;
break-inside: avoid-column;
display: table;
}   

#head_search { position: relative; }

#head_search input { background: none; color: var(--white-color); width: calc(100% - 10px); padding: 5px; border-width: 0px; border-bottom-width: 1px; border-style: solid; border-color: var(--white-color); margin: 0;}

#head_search input:focus { background: none;  color: var(--white-color); outline: none; }

#head_search input::placeholder{ opacity: .8; color: var(--white-color); }

#head_search img { width: 20px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); filter: var(--hex-white-color); }

@media(max-width: 991px){
  #head_search { display: none; }
}

@media(max-width: 768px){
  /*#head { position: fixed; }*/
  #head_menu{ display: none; }
  #head-toogle-mobile-menu { display: inline; }
}


#mobile-menu { right: -100vw; position: fixed; width: 100vw; height: calc(100vh - 100px); top: 100px; background-color: var(--main-color); z-index: 998; display: inline; transition: right .3s ease; text-align: right; padding: 20px; overflow: hidden; overflow-y: scroll;}

#mobile-menu.sticky { top: 60px; height: calc(100vh - 60px); }

#mobile-menu.opened { right: -100vw; }

@media(max-width: 768px){
  #mobile-menu.opened { right: 0px; }
}

#mobile-menu a { color: var(--white-color); }

#mobile-menu a:hover { color: var(--black-color); }

#mobile-menu ul { list-style: none; margin: 0px; padding: 0px; }

#mobile-menu li { border-width: 0px; border-bottom-width: 1px; border-style: solid; border-color: var(--white-color); padding-top: 10px; padding-bottom: 10px; font-size: 1.2rem; position: relative; }

.mobile-submenu { position: absolute; top: 0px; background-color: var(--main-color); width: calc(100% - 40px); right: -100vw; transition: all .4s ease; }

.mobile-submenu.opened { right: 20px; }


.mobile-submenu span { position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}

/*.mobile-submenu a:last-of-type li { border-bottom-width: 0px; } */

.featured-col { margin: 24px 0px 0px 0px; padding: 0px; }
.featured-col-2 { margin: 0px; }

.featured-box, .featured-link-box {  aspect-ratio: 1/1; margin-bottom: 24px; overflow: hidden; cursor: pointer; position: relative;}

.featured-box { background-color: var(--light-color-1); }

.featured-link-box { background-color: var(--main-color); }

    @media(max-width: 991px){
        .featured-col { margin: 0px; }
        .featured-links { margin: 24px 0px 0px 0px; }
    }

.featured-box .title { position: absolute; bottom: 0px; width: 100%; padding: 20px; line-height: 110%; background: rgba(255,255,255, .8); font-size: 1.2rem; text-align: center; }

a .featured-box { color: var(--black-color); }  

.featured-box img { width: 100%; height: 100%; object-fit: cover; transition: all .3s ease; }

.featured-box:hover img { transform: scale(1.05); }

.featured-link-box { position:relative; cursor: pointer;}
.featured-link-box img { position: absolute; top: 20px; left: 50%; top: 50%; height: 30%; object-fit: contain; transform: translate(-50%,-65%); transition: all .3s ease;}
.featured-link-box .title { position: absolute; top: 65%; left: 20px; width: calc(100% - 40px); padding: 10px; color: var(--white-color); text-align: center; line-height: 110%; }

.featured-link-box:hover { background-color: var(--black-color); }

.featured-link-box:hover img { height: 35%;Â }

.featured-info {  }
.info-box { aspect-ratio: 1/1.3; background-color: var(--second-color); padding: 20px; color: var(--white-color); margin-bottom: 24px; overflow: hidden; overflow-y: scroll; }

.info-box a { color: var(--white-color); }

.info-box li:hover a { color: var(--black-color); }

.info-box .info-list { padding: 10px 20px 10px 10px; }

.info-box li { margin: 10px 0px; font-size: 1.1rem; }




@media(max-width: 991px){
.info-box{ aspect-ratio: initial; height: auto; }
}

@media(max-width: 768px){
  .featured { padding-top: 100px; }
}



.jcenteno-box { background-color: var(--jcenteno-color); padding: 20px; margin-bottom: 24px; color: var(--white-color); }

.last-posts-box { background-color: var(--light-color-1); padding: 20px; margin-bottom: 24px; color: var(--black-color); }

.auditorio-box { background-color: var(--auditorio-color); padding: 20px; margin-bottom: 24px; color: var(--black-color); }

.last-videos-box { background-color: var(--light-color-1); padding: 20px; margin-bottom: 24px; color: var(--black-color); }

.featured-buttons-item{ aspect-ratio: 5/2; background-color: var(--light-color-1); margin-bottom: 24px; position:relative; cursor: pointer; }

.featured-buttons-item img { position: absolute; height: 60%; object-fit: contain; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .3s ease; }

.featured-buttons-item:hover img { height: 65%; }

.section-title { font-weight: 800; font-size: 1.2rem; }

.box-scroll-horizontal { position: relative; } 

.info-list-scroll { width: 100%; max-width: 1280px; aspect-ratio: 4 / 1; white-space: nowrap; margin: 0px; padding: 0px; margin: 0 auto; overflow-x: scroll; aspect-ratio: 4/1; position: relative; transition: all .5s ease; }

.info-list-scroll .item-box { background-color: var(--black-color); width: calc(25% - 15px); margin: 10px; aspect-ratio: 1 / 1; position:relative; cursor: pointer; }
.info-list-scroll .item-box:first-child{ margin-left: 0px; }
.info-list-scroll .item-box:last-child{ margin-right: 0px; }

.info-list-scroll .item-box .title { position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px); font-size: 1.3rem; font-weight: bold; color: var(--white-color); text-wrap:initial; line-height: 110%; z-index: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-shadow: 1px 1px 0px rgba(0,0,0,1); }

.flex { display: flex;/* flex-wrap: nowrap;  overflow: auto; */}
.flex-item { flex: 0 0 auto; overflow: hidden;  }

.flex-item img { width: 100%; height: 100%; object-fit: cover; }

@media(max-width: 1280px){
 .info-list-scroll { aspect-ratio: 3/1; }
 .info-list-scroll .item-box { width: calc(33.333333333% - 15px); aspect-ratio: 1/1; } 
 .info-list-scroll .item-box .title { /*font-size: 1.1rem;*/ }
}

@media(max-width: 768px){
    .info-list-scroll { aspect-ratio: 1/1; }
    .info-list-scroll .item-box { width: calc(94% - 20px); margin: 15px; } 
    .info-list-scroll .item-box .title { /*font-size: 1rem;*/ }
}

.last-videos-box .info-list-scroll { aspect-ratio: 40/9; }
.last-videos-box .info-list-scroll .item-box { width: calc(33.333333333%); aspect-ratio: 16/9; }
.last-videos-box .info-list-scroll .title { font-size: 1.2rem; left: 50%; top: 50%; transform: translate(-50%,-50%); bottom: initial; text-align: center; width: calc(100% - 80px); }

@media(max-width: 1280px){
 .last-videos-box .info-list-scroll { aspect-ratio: 32/9; }
 .last-videos-box .info-list-scroll .item-box { width: calc(33.50% - 30px); } 
 .last-videos-box .info-list-scroll .item-box .title { /*font-size: 1.1rem;*/ }
}

@media(max-width: 768px){
    .last-videos-box .info-list-scroll { aspect-ratio: 16/9; }
    .last-videos-box .info-list-scroll .item-box { width: calc(90% - 25px); margin: 15px; } 
    .last-videos-box .info-list-scroll .item-box .title { /*font-size: 1rem;*/ }
}

/* setting up mandatory scroll-snap on parent */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

/* defining scroll-snap alignment on children */
div > div {
  scroll-snap-align: center;
}

/* defining scroll-snap stop on children */
.always-stop > div {
  scroll-snap-stop: always;
}

.always-stop-odd > div:nth-of-type(odd) {
  scroll-snap-stop: always;
}

.always-stop-even > div:nth-of-type(even) {
  scroll-snap-stop: always;
}

.normal-stop > div {
  scroll-snap-stop: normal;
}

#footer{ background-color: var(--black-color); border-style: solid; border-width: 0px; border-top-width: 15px; border-style: solid; border-color: var(--dark-color-2); color: var(--light-color-1); padding-top: 20px; padding-bottom: 20px; }
#footer-bottom{ background-color: var(--dark-color-1); color: var(--light-color-1); padding-top: 20px; padding-bottom: 20px; }

#footer a, #footer-bottom a { color: var(--white-color); }

#footer a:hover, #footer-bottom a:hover { color: var(--main-color); }

#footer .social { text-align: center; padding-bottom: 20px; border-width: 0px; border-bottom-width: 1px; border-style: solid; border-color: var(--light-color-1); }
#footer .social img { width: 50px; margin: 12px; filter: var(--hex-white-color); transition: transform .3s ease; }
#footer .social img:hover { transform: scale(1.1); filter: var(--hex-main-color); }

#footer #links { padding-top: 20px; padding-bottom: 20px; }

#footer #links-footer { columns: 2 auto; }

#links-footer ul ul{ 
page-break-inside: avoid;
break-inside: avoid-column;
display: table;
}   




#footer-bottom .logo { text-align: left; border-width: 0px; border-right-width: 1px; border-style: solid; border-color: var(--white-color); }
#footer-bottom .logo img { width: 100%; max-width: 150px; filter: var(--hex-white-color); }

#footer-bottom .contact{ text-align: left; line-height: 105%; font-size: 1rem;}

#footer-bottom .contact span { font-size: 110%; font-weight: bold; }

#footer-legal{ font-size: .8rem ; text-align: right; }

@media(max-width: 991px){
  #footer .social img { width: 40px; margin: 5px; }
  #footer #links { display: none; }
  #footer .social { border-bottom-width: 0px; padding-bottom: 0px; }
  #footer-bottom .logo { border-right-width: 0px; text-align: center; }
  #footer-bottom .contact{ text-align: center; }
  #footer-legal{ font-size: 1rem; text-align: center; padding-top: 20px; }
  #footer-bottom .contact{ font-size: 1.5rem; }
  .footer-info{ padding-bottom: 20px; }
}






.navigate-scroll { position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--light-color-1); padding: 5px; z-index: 998; transition: all .4s ease; cursor: pointer; }

  .navigate-scroll.white-color { background-color: var(--white-color); }
  .navigate-scroll.white-color img { filter: var(--hex-black-color); }

  .navigate-scroll.jcenteno-color { background-color: var(--jcenteno-color); }
  .navigate-scroll.jcenteno-color img { filter: var(--hex-white-color); }

  .navigate-scroll.auditorio-color { background-color: var(--auditorio-color); }
  .navigate-scroll.auditorio-color img { filter: var(--hex-black-color); }

.navigate-scroll img { width: 25px; }

.navigate-scroll.left:hover img { transform: translateX(-5px); }
.navigate-scroll.right:hover img { transform: translateX(5px); }

.navigate-scroll.left{ left: 5px; }
.navigate-scroll.right{ right: 5px; }

@media(hover: none) and (pointer: coarse){
  .navigate-scroll{ display: none; }
}