/* apertura */

@font-face {
  font-family: MajritBn;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://static-sandbox.elpais.com/dist/resources/fonts/majrit/majrit-banner/Majrit-Banner-Black.woff2") format("woff2"),
       url("https://static-sandbox.elpais.com/dist/resources/fonts/majrit/majrit-banner/Majrit-Banner-Black.woff") format("woff")
}

@font-face {
  font-family: MajritBn;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://static-sandbox.elpais.com/dist/resources/fonts/majrit/majrit-banner/Majrit-Banner-Bold.woff2") format("woff2"),
       url("https://static-sandbox.elpais.com/dist/resources/fonts/majrit/majrit-banner/Majrit-Banner-Bold.woff") format("woff")
}

@font-face {
  font-family: MajritBn;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("https://static-sandbox.elpais.com/dist/resources/fonts/majrit/majrit-banner/Majrit-Banner-Light.woff2") format("woff2"),
       url("https://static-sandbox.elpais.com/dist/resources/fonts/majrit/majrit-banner/Majrit-Banner-Light.woff") format("woff")
}


@font-face {
  font-family: MajritBn;
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("https://static-sandbox.elpais.com/dist/resources/fonts/majrit/majrit-banner/Majrit-Banner-Roman.woff2") format("woff2"),
       url("https://static-sandbox.elpais.com/dist/resources/fonts/majrit/majrit-banner/Majrit-Banner-Roman.woff") format("woff")
}


.a .a_k,
.a .a_t {
  display: none;
}


/* color fondo */

body .fusion-app,
body .a {
  background: #EFEFEF;
}

body .cg {
  background: #fff;
}

body .a_e {
  background: #C0BFAC;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  border-bottom: 0;
    box-sizing: border-box;
    padding: 30px 20px 0;
}

body .a_md {
  background: #C0BFAC;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-bottom: 100px;
}

body .w_rs ._btn {
  background-color: #abaa98;
}

body .a_c p a {
  color: #abaa98;
}


/* encabezados */
body .a_c>h2 {
  color: #C0BFAC;
  font-family: Majrit Bn;
  font-size: 60px;
  font-style: normal;
  font-weight: 300;
  line-height: 60px;
  text-transform: uppercase;
}
body .a_c>h2 b {
  display: block;
  font-weight: normal;
}

body .a_c>h2:after,
body .a_c>h3:after {
  display: none;
}

body .a_c>h3 {
  color: #000;
  font-family: Majrit Bn;
  font-size: 23px;
  font-style: normal;
  font-weight: 300;
  line-height: 26px;
  text-transform: uppercase;
  padding-top: 40px;
  padding-left: 20px;
  max-width: 400px;
  margin-top: 20px;
}

body .a_c>h3 b {
  color: #C0BFAC;
  display: block;
}

body .a_c>h3:before {
  position: absolute;
  left: 0;
  top: 0;
  height:  100%;
  width:  1px;
  z-index: 1;
  content:  "";
  background: #C0BFAC;

}


/* apertura */
body .apertura {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative;
  flex-direction:  column;
  overflow: hidden;
  background: #fff;
  max-width: 1440px;
  margin: 0 auto;
  height: auto;
}

@keyframes opacidad {
  100% {
    opacity: 1;
  }
}

@keyframes bajar {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0rem);
  }
  75% {
    transform: translateY(-0.25rem);
  } 
}


/* boton bajar */


.apertura .bajar {
    display: inline-block;
    text-align: left;
    margin: 8px;
    z-index: 1;
    opacity: 0;
    visibility: visible;
    animation: bajar 3s infinite 3s, opacidad 1s forwards 3s;
    clear: both;
    display: block;
    right: 52px;
    position: absolute;
}

.apertura .bajar span {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  width: 15px;
  height: 15px;
  border-top: 1px solid white;
  border-right: 1px solid white;
  transform: rotate(135deg);
}

/* mapa */

.mapa {
    height: 170px;
    width: 360px;
    position: relative;
}

.mapa svg {
 /*   width: 100%;
    height: 120%;*/
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}


.mapa svg #linea {
  stroke-dasharray: 1101;
  stroke-dashoffset: 1101;
  animation: dash 6s 2s forwards;
}

@keyframes dash {
  to {
      stroke-dashoffset: 0;
  }
}


.apertura_textos {
    z-index: 1;
    position: absolute;
    top: -60px;
    left: 20px;
    padding: 20px;
    text-align: left;
    box-sizing: border-box;
    padding: 0;
    max-width: 210px;
}

.apertura_textos p {
    font-family: 'MajritBn';
    font-weight: normal;
    font-style: normal;
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px;
    color: #C0BFAC;
}

.apertura_titulo {
    font-family: 'MajritBn';
    font-weight: normal;
    font-style: normal;
    font-size: 38px;
    line-height: 36px;
    text-align: left;
    color: white;
    position: relative;
    z-index: 1;
    display: block;
    text-transform: uppercase;
    margin: 0;
    color: #C0BFAC;
}

.apertura_titulo span { 
    display: block;
}

.apertura_fondo {
  height: 70vh;
  position: relative;
  width: 100%;
}
/*
.apertura_fondo:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    opacity: 0;
    z-index: 1;
}*/

.apertura_fondo ul {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.apertura_fondo ul li {
  height: 100%;
  background-size: cover;
  background-position: center;
  width: 100%;
  float: left;
  margin-right: -100%;
  position: relative;
}

.apertura_fondo ul li:nth-child(2) {
    background-position:  center top;
}

.apertura_fotos li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.apertura_fotos li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apertura_fondo ul li span {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 9px;
    text-transform: uppercase;
    z-index: 1;
    padding: 5px 10px;
}

/* fotos apertura en movil 
@media (max-width: 767px){
    .apertura_fondo ul li:nth-child(1){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/10.jpg)!important;
    }

    .apertura_fondo ul li:nth-child(2){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/09.jpg)!important;
    }

    .apertura_fondo ul li:nth-child(3){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/01.jpg)!important;
    }

    .apertura_fondo ul li:nth-child(4){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/02.jpg)!important;
    }

    .apertura_fondo ul li:nth-child(5){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/03.jpg)!important;
    }

    .apertura_fondo ul li:nth-child(6){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/05.jpg)!important;
    }

    .apertura_fondo ul li:nth-child(7){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/07.jpg)!important;
    }

    .apertura_fondo ul li:nth-child(8){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/04.jpg)!important;
    }

    .apertura_fondo ul li:nth-child(9){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/08.jpg)!important;
    }

    .apertura_fondo ul li:nth-child(10){
      background-image: url(//ep01.epimg.net/estaticos/arc/2023/08/okupas/img/movil/06.jpg)!important;
    }

}
*/



/* galeria */

body .a_gl .a_m_p {
  color: #1A1A1A;
  text-align: center;
  font-family: MajritTxRoman,serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 14px;
  text-align: center;
  margin-bottom: 20px;
  padding: 20px 20px;
  background: #EFEFEF;
  text-align: center;
  justify-content: center;
}

body .a_gl .a_gl_nav {
  height:  100%;
}

body .a_gl_n span.active {
    background-color: #C0BFAC;
    width: 10px;
    height: 10px;
}

body .a_gl_n span {
    width: 10px;
    height: 10px;
    background-color:  #D9D9D9;
}


/* fotos */

body .a_m_p {
    display: flex;
    width: auto;
    padding: 30px;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    background: #C0BFAC;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4rem;
    flex-direction: column;
}


body .a_m_i-a,
body .a_gl_pl {
  display: none!important;
}


@media (min-width: 768px){


    /* apertura */

    .mapa {
      height: 220px;
      width: 520px;
      position: relative;
    }

    .mapa svg {
        max-width: 520px;
    }

    .apertura_textos {
      left: 40px;
      max-width: 300px;
      top: -79px;
    }

    .apertura_textos p {

    }

    .apertura_titulo {
        font-size: 60px;
        line-height: 60px;
    }



    .apertura .bajar span {
        width: 22px;
        height: 22px;
    }

  .apertura_fondo ul li span {
    font-size: 12px;
  }


    body .footer-img { 
        top: calc(50vh + 40px);
        z-index: 1;
    }

    /* fotos */

    body .a_c>.a_m .a_m_p {
      border-bottom: none;
    }

    body .a_m_p { 
    }

}



@media (min-width: 1001px) {
  


  /* apertura */

  body .apertura {
    min-height: 1340px;
    height: calc(100vh - 53px);
  }

  .apertura_fondo {
    height: 70%;
    margin-top: 100vh;
    animation:  fondo 2s 0s forwards;
  }


  .mapa {
    height: 30%;
    width: 100%;
    position: relative;
  }
  

  .mapa svg {
    height: 100%;
    transform: scale(0);
    transform-origin: center;
     animation:  mapa 3s 1s forwards;
     max-width:  100%;
  }



  .apertura_textos {
    max-width: 630px;
    top: -142px;
    left:  40px;
  }

  .apertura_textos p {
    font-size: 30px;
    line-height: 1.2;  
    opacity: 0;
    animation:  opacidad 1.5s 3.5s forwards;
  }

  .apertura_titulo {
    font-size: 120px;
    line-height: 0.9;
    letter-spacing: -2px;
  }

  .apertura_titulo span {
 /*   margin-bottom: 100vh;
    animation: textosSpan 1s 2.5s forwards;*/
  }

  .apertura_fondo ul {
    width: 100%;
    height: 100%;
    left: 0;
    transform: none;
  }

  .apertura .bajar {
    bottom: -50px;
    right: 160px;
  }

  .apertura .bajar span {
      width: 22px;
      height: 22px;
  }

  /* animacion apertura */

  @keyframes fondo {
    100% {
     margin-top: 0;
    }
  }

  @keyframes mapa {
    100% {
     transform: scale(1);
    }
  }

  @keyframes textos {
    100% {
     left: 40px;
    }
  }

  @keyframes textosSpan {
    100% {
     margin-bottom: 0;
    }
  }

  /* galeria */

  body .a_gl .a_m_p {
    font-size: 18px;
    line-height: 28px;
  }


body .a_gl_n span.active {
  
    width: 15px;
    height: 15px;
}

body .a_gl_n span {
    width: 15px;
    height: 15px;
   
}

  /* encabezados */
  body .a_c>h2 {
    font-size: 90px;
    line-height: 80px;
  }


  body .a_c>h3 {
    font-size: 28px;
    line-height: 32px;
    padding-top: 70px;
    padding-left: 40px;
    max-width: 400px;
    margin-top: 20px;
  }

  /* fotos */

  body .a_m_p {
    margin-left: 0;
    margin-right:  0;
  }
  




}





/* animaciones */

@keyframes fade {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes bajar {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0rem);
  }
  75% {
    transform: translateY(-0.25rem);
  } 
}

@keyframes opacidad {
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes width {
  100% {
    width: 100%;
  }
}

@keyframes width12 {
  100% {
    width: 12%;
  }
}

@keyframes width25 {
  100% {
    width: 25%;
  }
}

@keyframes width30 {
  100% {
    width: 30%;
  }
}


@media (min-width: 1400px) {


  body .apertura {
    min-height: 1340px;

  }

  body .a_e,
  body .a_md {
    margin-left: -143px;
    margin-right: -143px;  
    max-width: 1440px;
    grid-column: 1/13;
  }

  body .gallery-summary-container,
  body .a_c>.a_m {
    margin-left: -240px;
    margin-right: -240px;
  }

}