/*  
Theme Name: VIVE La Vall
Description: Un tema desarrollado para LaBase
Author: W. Wallace
Version: 5.51
*/

body {background-color: #f2f2f2; margin: 0; padding: 0;     -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always; text-rendering: optimizeLegibility; color: #3E5FFF; font-family: degular, sans-serif;
font-weight: 400;
font-style: normal;  }

.header {background-color: #f2f2f2; }
.header-blue { background-color: #3E5FFF;}
.header-content {width: 90%; margin: 0 auto; max-width: 1650px; display: grid; grid-template-columns: 1fr auto; column-gap: 50px; padding-top: 50px; padding-bottom: 50px; }

.footer { }
.footer img {max-width: 100%;}
.footer-content {width: 90%; margin: 0 auto; max-width: 1650px; display: grid; grid-template-columns: 1fr; column-gap: 50px; padding-top: 50px; padding-bottom: 75px;     }
.redes {margin-top: 200px; display: flex; column-gap: 35px; justify-content: center; justify-items: center;}

.hero { background-color: #3E5FFF;}
.hero img {max-width: 100%;}
.hero-content {width: 90%; margin: 0 auto; max-width: 1650px; display: grid; grid-template-columns: 1fr ; row-gap: 50px; padding-top: 25px; padding-bottom: 200px; }
.hero h1 {font-size: calc(48px + 4vw); line-height: 100%; font-weight: bold; text-transform: uppercase; color: #f2f2f2; margin: 0; padding: 0;}
.logo {max-width: 180px;}
.hamburguesa {max-width: 36px;}

.menu-movil {position: absolute; top: 0; left: 0; height: 100vh; height: 100svh; width: 100vw; width: 100svw; background-color: #3E5FFF; z-index: 9999; align-content: center; justify-content: center; justify-items: center;}
.menu-movil li a {font-size: calc(30px + 2vw); line-height: 150%; text-decoration: none; color: #f2f2f2; font-weight: bold; }
ul.menu {padding: 0; list-style: none; text-align: center;}

#enlaceSelected {
    cursor: pointer;


    }


.legal {background-color: #3E5FFF; }
.legal-content {width: 90%; margin: 0 auto; max-width: 1650px; min-height: 50vh; min-height: 50svh; display: grid; grid-template-columns: 1fr ; row-gap: 50px; padding-top: 50px; padding-bottom: 200px;}
.legal a {font-size: 20px; line-height: 28px; color: #f2f2f2;}
.legal h2 {font-size: calc(30px + 2vw); line-height: 100%; color: #f2f2f2; text-transform: uppercase; margin: 0; padding: 0;}
.legalis { padding-top: 25px;}
.legalis a {text-decoration: none; color: #f2f2f2;}

.vive {background-color: #3E5FFF;}
.vive-content {width: 90%; margin: 0 auto; max-width: 1650px; display: grid; grid-template-columns: 1fr ; row-gap: 50px; padding-top: 50px; padding-bottom: 200px;}
.vive p {font-size: 20px; line-height: 28px; color: #f2f2f2;}
.vive h2 {font-size: calc(30px + 2vw); line-height: 100%; color: #f2f2f2; text-transform: uppercase; margin: 0; padding: 0;}

.vive-content > div:first-of-type {display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px;}
.vive-content > div:last-of-type {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 50px; align-content: flex-end; justify-content: center; align-items: flex-end; justify-items: center; text-align: center; margin-top: 100px;}
.vive-content > div:last-of-type p {margin-top: 50px;}

.fons {background-color: #BAFDA8;}
.fons-content {width: 90%; margin: 0 auto; max-width: 1650px; display: grid; grid-template-columns: 1fr 1fr ; column-gap: 50px; padding-top: 100px; padding-bottom: 150px; }
.fons-content p {font-size: 20px; line-height: 28px; color: #3E5FFF;}
.fons-content > div > div {padding-top: 75px;}
.fons-content img {height: 75px; max-width: 100%;}

.contenido-content { display: grid; grid-template-columns: 1fr ;  padding-top: 50px; padding-bottom: 200px;}
.contenido {background-color: #3E5FFF; color: #f2f2f2;}
.contenido h2 {font-size: calc(30px + 2vw); line-height: 100%; color: #f2f2f2; text-transform: uppercase; margin: 0; padding: 0; }
.status {display: grid; grid-template-columns: max-content max-content; column-gap: 20px;}
.grafica {display: grid; grid-template-columns: max-content max-content max-content; column-gap: 5px;}
.graf1, .graf2, .graf3 {
  width: 50px;
  height: 10px;
  background-color: rgba(186,253,168,0.2);
  border-radius: 20px;
}

.graf1.activo, .graf2.activo, .graf3.activo {
  background-color: rgba(186,253,168,1);
}

.cn-close-icon:after, .cn-close-icon:before {

    background-color: #3E5FFF;
}

p.proceso {margin: 0; padding: 0; font-size: 20px;}
.status {display: grid; align-content: center; align-items: center; padding-top: 20px;}
.contingut {display: grid; grid-template-columns: repeat(12,1fr); width: 90%; margin: 0 auto; max-width: 1650px; padding-bottom: 75px; }
.contingut > div {grid-column: 1/11;}
.contingut p {font-size: 20px; line-height: 28px; color: #f2f2f2;}

.entradilla {width: 90%; margin: 0 auto; max-width: 1650px;}
.galera {padding-top: 75px; padding-bottom: 75px; width: 95%; box-sizing: content-box; padding-left: 5%;  }
.mi-galeria-front {    grid-auto-columns: max-content;

    display: grid
;
    column-gap: 32px;
    overflow-x: scroll;
    width: 95vw;
    box-sizing: content-box;
    grid-auto-flow: column; }
.mi-galeria-front img {     
    width: 100%;
    max-height: 80vh;
    min-height: 80vh;
 }

 .videoteca { width: 95%; box-sizing: content-box; padding-left: 5%;  }
.galeria-shorts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 32px;
  overflow-x: auto;
  width: 95vw;
  box-sizing: content-box;
}


.galeria-videos {width: 90vw; display: grid; grid-template-rows: 1fr; row-gap: 50px; padding-top: 100px; }
.video-wrapper {        position: relative; 
        padding-bottom: 56.25%;
        overflow: hidden;
        max-width: 100%;
        height: 0;
}
        .video-wrapper iframe,
    .video-wrapper object,
    .video-wrapper embed { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.mi-galeria-item {width: max-content;}
.entrades {background-color: #3E5FFF; color: #f2f2f2;}
.entrades h2 a { color: #f2f2f2;  text-decoration: none;}
.entrades h2 {    font-size: calc(30px + 2vw);
    line-height: 100%; margin: 0; padding: 0; color: #f2f2f2; text-transform: unset; margin: 0; padding: 0; }

.grid-entrades {
    width: 90%; margin: 0 auto; max-width: 1650px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 50px;
  row-gap: 150px;
}

.entrada {
  display: contents; /* así cada bloque se acomoda en la grid */
}


.entrada.impar .entrada-img {
  grid-column: span 5;
}
.entrada.impar .entrada-info {
  grid-column: span 3;
}

.entrada.par .entrada-info {
  grid-column: span 3;
}
.entrada.par .entrada-img {
  grid-column: span 5;
}

.entrada-img img {
  width: 100%;
  height: auto;
}

.status {
  margin: 10px 0;
}

.graf1, .graf2, .graf3 {
  width: 50px;
  height: 10px;
  background-color: rgba(186,253,168,0.2);
  border-radius: 20px;
}

.graf1.activo, .graf2.activo, .graf3.activo {
  background-color: rgba(186,253,168,1);
}

.veure {
  display: inline-block;
  margin-top: 10px;
  color: #f2f2f2;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px; line-height: 28px;
}

.paginacion {
  grid-column: 1 / -1; /* ocupa todo el ancho de la grid */
  text-align: center;
  padding-top: 100px;
  padding-bottom: 100px;
  width: 90%; margin: 0 auto; max-width: 1650px;
    font-size: 20px; line-height: 28px;
}

.paginacion .page-numbers {
  display: inline-block;

  margin: 8px 12px;
  text-decoration: none;
  color: #f2f2f2;
}

.paginacion .page-numbers.current {

  border-bottom: 1px solid rgba(255,255,255,0.75);
}

.tab, .mov {display: none;}

@media (max-width: 1024px) {
  .desk {
    display: none;
  }
  .mov {display:block;}
  .redes {

    justify-content: unset;
    justify-items: unset;
}
}

@media (max-width: 890px) {
  .logo {
    max-width: 150px;
}
.contingut > div {
    grid-column: span 12;
}
  .grid-entrades {grid-template-columns: 1fr; column-gap: unset; row-gap: 100px;}
  /* Mobile: forzar imagen arriba + info abajo */

  /* hacer que la entrada apile en columna */
  .entrada {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* asegurar que la imagen aparezca PRIMERO independientemente del DOM */
  .entrada .entrada-img {
    order: -1 !important;          /* imagen antes que la info */
    width: 100% !important;
    float: none !important;
    position: static !important;
    margin: 0 0 1rem 0 !important;
  }

  .entrada .entrada-info {
    order: 0 !important;
    width: 100% !important;
    float: none !important;
  }

  /* Hacer la imagen totalmente responsiva */
  .entrada .entrada-img img,
  .entrada .entrada-img picture,
  .entrada .entrada-img a img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Si usas grid en escritorio, forzar una sola columna aquí */
  .entrada {
    grid-template-columns: 1fr !important;
  }

  /* limpiar floats si existen */
  .entrada::after {
    content: "" ;
    display: table;
    clear: both;
  }


  .vive-content > div:first-of-type {
    grid-template-columns: 1fr;
    column-gap: unset
}
.vive-content > div:last-of-type {
    row-gap: 50px
;
    grid-template-columns: 1fr 1fr;
  justify-content: flex-start;
  justify-items: flex-start;
  }
  .vive-content > div.icons {
    row-gap: 50px
;
    grid-template-columns: 1fr 1fr;
  justify-content: center;
  justify-items: center;
  }
.fons-content {

    grid-template-columns: 1fr;
    column-gap: unset;
    row-gap: 50px;

}
.fons-content > div > div {
    padding-top: 25px;
}
}
@media (max-width: 680px) {
.vive-content > div:last-of-type {
    row-gap: 50px
;
column-gap: unset;
    grid-template-columns: 1fr;}
}