/* ---------------------------------------------
PALETA 2026 (només aquests tres colors)
   Rosa       #EF88B5
   Blau marí  #1A1E3A
   Blanc      #FFFFFF
Contrastos: blau marí sobre rosa 6,9:1 | rosa sobre blau marí 6,9:1 | blanc sobre blau marí 16:1 | blau marí sobre blanc 16:1
(Evitar: blanc o rosa sobre blanc, i blanc sobre rosa: contrast inferior a 2,5:1)
--------------------------------------------- */

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. headers
05. banner
06. graella
07. tickets
08. ubicació
08. credits
09. bingo
10. peu
11. responsive
12. qui som
13. heading page
14. espectacles

--------------------------------------------- */



/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");



/* 
---------------------------------------------
reset
--------------------------------------------- 
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: #EF88B5; /* enllaços per defecte: rosa (abans taronja 1) */
}

a:hover {
  color: #1A1E3A; /* enllaços per defecte en passar-hi: blau marí (abans taronja 2) */
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}



/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #EF88B5; /* fons del text seleccionat: rosa (abans taronja) */
  color: #1A1E3A; /* text seleccionat: blau marí (abans blanc, no tenia contrast sobre rosa) */
}

::-moz-selection {
  background: #EF88B5; /* fons del text seleccionat (Firefox): rosa */
  color: #1A1E3A; /* text seleccionat (Firefox): blau marí */
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button a {
  font-size: 13px;
  color: #1A1E3A; /* lletres del botó: blau marí (abans blanc) */
  background-color: #EF88B5; /* fons del botó "Comprar entrades": rosa (abans taronja) */
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  margin: 5px 5px;
}

.main-button a:hover {
  opacity: 0.9;
  background-color: #FFFFFF; /* fons del botó en passar-hi: blanc (abans taronja) */
  color: #1A1E3A; /* lletres del botó en passar-hi: blau marí */
}

.button-2 a {
  font-size: 13px;
  color: #1A1E3A; /* lletres dels botons de descàrregues: blau marí */
  background-color: #FFFFFF; /* fons dels botons de descàrregues: blanc (abans blanc trencat) */
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  margin: 5px 5px;
}

.button-2 a:hover {
  opacity: 0.9;
  background-color: #1A1E3A; /* fons dels botons de descàrregues en passar-hi: blau marí (abans taronja) */
  color: #FFFFFF; /* lletres dels botons de descàrregues en passar-hi: blanc */
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(26,30,58,0.30); /* línia sota el títol: blau marí translúcid (abans blanc translúcid) */
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #1A1E3A; /* títol "PROGRAMACIÓ": blau marí (abans blanc), va sobre fons rosa */
}

.section-heading .subtitols h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 0px; 
  padding-bottom: 0px;
  border-bottom: 0px solid rgba(26,30,58,0.30); /* línia (sense gruix) dels subtítols: blau marí */
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #1A1E3A; /* subtítols de secció: blau marí (abans blanc) */
}

.section-heading h3 {
  line-height: 30px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(26,30,58,0.30); /* línia sota els títols h3: blau marí translúcid */
  font-size: 16px;
  font-weight: 700;
  color: #1A1E3A; /* títols h3 de secció: blau marí (abans taronja) */
}

.section-capcalera h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(239,136,181,0.50); /* línia sota el títol "ENTRADES": rosa translúcid (va sobre fons blau marí) */
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: #EF88B5; /* títol "ENTRADES": rosa (abans blanc), va sobre fons blau marí */
}



/* 
---------------------------------------------
headers
--------------------------------------------- 
*/

.primera-barra {
  background-color: #1A1E3A; /* fons de la barra superior de xarxes: blau marí (abans gris fosc) */
  position: relative;
  z-index: 1111;
}

.primera-barra .left-content p {
  color: #fff;
  padding: 8px 0px;
  font-size: 13px;
}

.primera-barra .right-icons {
  text-align: right;
  padding: 8px 0px;
}

.primera-barra .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.primera-barra .right-icons ul li a {
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.primera-barra .right-icons ul li a:hover {
  color: #EF88B5; /* icones de xarxes en passar-hi: rosa (abans taronja) */
}

.primera-barra .left-content p em {
   font-style: normal;
  color: #EF88B5; /* text ressaltat de la barra superior: rosa (abans taronja-vermell) */
}

/* ------------------------------ */

.header-area {
  background-color: rgba(250,250,250,0.15);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #FFF;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  content: url("../images/logo-183x75.png"); /* logo Humor Figueres */
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: #FFF; /* color blanc de les lletres dels enllaços actius de la primera barra de menú */
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #EF88B5!important; /* enllaç actiu / hover del menú: rosa (abans taronja 1) */
}

.background-header .nav {
  margin-top: 20px !important;
}

.background-header {
  background-color: rgba(26, 30, 58, 0.95)!important; /* fons del menú fix en fer scroll: blau marí (abans blanc), perquè el logotip clar es vegi */
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff!important; /* lletres del menú fix: blanc (abans blau marí, que ara es fondria amb el fons) */
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #EF88B5!important; /* lletres del menú fix en actiu / hover: rosa (sobre blau marí sí que té prou contrast) */
  opacity: 1;
  box-shadow: inset 0 -3px 0 #EF88B5; /* subratllat rosa que marca l'enllaç actiu del menú fix */
}

/* ------------------------------ */

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff; /* icona d'hamburguesa blanca sobre el fons blau marí */
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #EF88B5; /* enllaç actiu del menú (no fix): rosa (abans taronja) */
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    content: url("../images/logo-169x65.png"); /* canvi de logo - antic color: #1e1e1e; */
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #EF88B5!important; /* mòbil: enllaç actiu / hover del menú: rosa (abans taronja) */
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: rgba(250,250,250,0.15);  /* canvi de color fons format mòbil */
    padding: 8px 15px;
    height: 65px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #1A1E3A !important; /* mòbil: fons del menú desplegat: blau marí (abans gris) */
    color: #fff !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #1A1E3A !important; /* mòbil: fons de l'enllaç en passar-hi: blau marí (abans gris) */
    color: #EF88B5!important; /* mòbil: lletres de l'enllaç en passar-hi: rosa (abans groc) */
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #EF88B5; /* mòbil: fletxeta dels submenús: rosa (abans blau grisós) */
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 768px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}



/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
  background-color: rgba(26,30,58,0.75); /* capa sobre el vídeo: blau marí translúcid (abans gris fosc) */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.main-banner .caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #EF88B5; /* paraula destacada del títol del banner: rosa (abans taronja) */
  font-weight: 900;
}

.main-banner .caption p {
  color: #fff;
  font-size: 14px;
  max-width: 570px;
}

.main-banner .caption .main-button {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {

  .main-banner .caption h6 {
    font-weight: 500;
  }

  .main-banner .caption h2 {
    font-size: 36px;
  }

}



/*
---------------------------------------------
graella
---------------------------------------------
*/

section.graella {
  background: linear-gradient(-45deg, rgba(231, 80, 146, 1), rgba(239, 136, 181, 1), rgba(244, 173, 204, 1)); /* degradat rosa: fosc (#E75092), rosa de marca #EF88B5 al centre, clar (#F4ADCC) */
  /* background-image: url(../images/background-section-graella.jpg); /* imatge-textura de fons */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px; /* En desactivar el carousel passa de 230px a 100px */
  padding-bottom: 100px;
}

section.graella .section-heading {
  text-align: center;
}

section.graella .filters {
  text-align: center;
  margin-bottom: 60px;
}

section.graella .filters li {
  font-size: 13px;
  color: #1A1E3A; /* lletres dels filtres: blau marí */
  background-color: #FFFFFF; /* fons dels filtres: blanc */
  padding: 11px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  margin: 5px 5px;
}

section.graella .filters ul li.active {
  background-color: #1A1E3A; /* filtre actiu: fons blau marí (abans taronja 1) */
  color: #FFFFFF; /* filtre actiu: lletres blanques */
}

section.graella .filters ul li:hover {
  background-color: #1A1E3A; /* filtre en passar-hi: fons blau marí (abans taronja 2) */
  color: #EF88B5; /* filtre en passar-hi: lletres roses */
}

.graella-item {
  position: relative;
  display: flex; /* la targeta s'estira fins a ocupar tota l'alçada de la seva cel·la */
  flex-direction: column;
  flex: 1 1 auto;
  margin-bottom: 0px; /* l'espai entre targetes el dóna el "gap" de la graella */
  border-radius: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* resposta en passar-hi, com al calendari */
}

.graella-item:hover {
  transform: translateY(-3px); /* la targeta s'aixeca una mica en passar-hi */
  box-shadow: 0 10px 24px rgba(26, 30, 58, 0.30);
}

.graella-item:focus-within {
  outline: 3px solid #1A1E3A; /* contorn visible per a qui navega amb teclat */
  outline-offset: 3px;
}

.graella-item .thumb {
  position: relative;
}

.graella-item .thumb a {
  display: block; /* evita l'espai en blanc que deixa una imatge en línia sota seu */
  line-height: 0;
}

.graella-item .thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2; /* totes les imatges amb la mateixa proporció (canvia aquest valor si les teves fotos en tenen una altra: 4 / 3, 16 / 9...) */
  object-fit: cover; /* la imatge s'ajusta a la proporció sense deformar-se */
  object-position: center 30%; /* retall una mica cap amunt, on solen ser els rostres */
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.graella-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.graella-item .thumb .price span {
  font-size: 16px;
  color: #1A1E3A; /* text de l'etiqueta de preu sobre la foto: blau marí */
  font-weight: 600;
  background-color: #EF88B5; /* fons de l'etiqueta de preu sobre la foto: rosa */
  padding: 7px 12px;
  border-radius: 10px;
}

/* Cos de la targeta */
.graella-item .down-content {
  position: relative; /* referència per a la càpsula de l'hora i l'enllaç estès */
  flex: 1 1 auto; /* el cos ocupa l'espai que queda sota la imatge */
  display: flex;
  flex-direction: column;
  padding: 20px 22px 20px 22px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.graella-item .fons-color1 {
  background-color: #1A1E3A; /* quadrícula BLAU MARÍ */
  color: #FFFFFF; /* text: blanc */
}

.graella-item .fons-color2 {
  background-color: #FFFFFF; /* quadrícula BLANCA */
  color: #1A1E3A; /* text: blau marí */
}

/* Data i hora: dues càpsules apilades a la cantonada superior dreta del cos.
   La data queda alineada amb el títol i l'hora amb el nom de la companyia. */
.graella-item .down-content .quan {
  position: absolute;
  top: 19px;
  right: 18px;
  display: flex;
  flex-direction: column; /* data a dalt, hora a sota */
  align-items: flex-end; /* alineades a la dreta */
  gap: 6px;
}

.graella-item .down-content .data,
.graella-item .down-content .hora {
  padding: 3px 11px;
  border-radius: 999px; /* forma de càpsula */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.graella-item .down-content .data {
  background-color: #EF88B5; /* càpsula de la data: rosa (a totes dues targetes) */
  color: #1A1E3A; /* lletres blau marí (contrast 6,9:1 sobre el rosa) */
}

.graella-item .fons-color1 .hora {
  background-color: #FFFFFF; /* càpsula de l'hora sobre blau marí: blanca */
  color: #1A1E3A;
}

.graella-item .fons-color2 .hora {
  background-color: #1A1E3A; /* càpsula de l'hora sobre blanc: blau marí */
  color: #FFFFFF;
}

/* Títol */
.graella-item .down-content > a {
  display: block;
}

.graella-item .down-content > a::after {
  content: ""; /* enllaç estès: tota la targeta és clicable */
  position: absolute;
  inset: 0;
}

.graella-item .down-content h4 {
  display: block;
  margin: 0px 0px 6px 0px;
  padding-right: 76px; /* deixa lliure la càpsula de l'hora */
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word; /* un mot molt llarg no se surt de la targeta */
  hyphens: auto;
  text-wrap: balance; /* si el títol té dues línies, les reparteix de forma equilibrada */
}

.graella-item .fons-color1 h4 {
  color: #EF88B5; /* títol sobre blau marí: rosa */
}

.graella-item .fons-color2 h4 {
  color: #1A1E3A; /* títol sobre blanc: blau marí */
}

/* Companyia o artista i lloc */
.graella-item .down-content .artista {
  margin: 0px;
  padding-right: 76px; /* deixa lliure la càpsula de l'hora */
  color: inherit;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.graella-item .down-content .lloc {
  margin: auto 0px 0px 0px; /* el lloc queda sempre a la part baixa de la targeta */
  padding-top: 14px; /* separació mínima respecte al text de dalt */
  color: inherit;
  font-size: 13px;
  line-height: 1.3;
}

.graella-item .down-content .lloc i {
  display: inline-block;
  width: 12px; /* amplada fixa de la icona perquè el text s'alineï */
  margin-right: 4px;
  text-align: center;
}

.graella-item .fons-color1 .lloc i {
  color: #EF88B5; /* icona sobre blau marí: rosa */
}

.graella-item .fons-color2 .lloc i {
  color: #1A1E3A; /* icona sobre blanc: blau marí */
}

/* Graella de targetes: totes de la mateixa mida (el contenidor .grid deixa de ser una fila de Bootstrap) */
section.graella .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ordinador: 3 targetes per fila */
  grid-auto-rows: 1fr; /* totes les files tenen l'alçada de la targeta més alta, així totes les targetes fan el mateix */
  gap: 30px; /* separació entre targetes (abans margin-bottom de cada targeta) */
  margin-left: 0px; /* anul·la els marges negatius de .row */
  margin-right: 0px;
}

section.graella .grid > .graella-item-col {
  display: flex; /* la targeta s'estira fins a l'alçada de la cel·la */
  width: auto; /* anul·la width: 31% i les amplades de col-lg-4 */
  max-width: none;
  flex: none;
  padding: 0px;
}

section.graella .grid > .graella-item-col.is-hidden {
  display: none; /* targeta amagada pel filtre */
}

/* Tauleta: 2 targetes per fila */
@media (max-width: 991.98px) {
  section.graella .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mòbil: 1 targeta per fila */
@media (max-width: 767.98px) {
  section.graella .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ordinador petit (contenidor de 960px): targetes una mica més compactes perquè el text no es parteixi */
@media (min-width: 992px) and (max-width: 1199.98px) {
  section.graella .grid {
    gap: 24px;
  }

  .graella-item .down-content {
    padding: 18px 20px 18px 20px;
  }

  .graella-item .down-content h4 {
    font-size: 17px;
  }
}



/*
---------------------------------------------
tickets
---------------------------------------------
*/

section.tickets {
  background-image: linear-gradient(rgba(26,30,58,0.30), rgba(26,30,58,0.30)), url(../images/bg-entrades.jpg); /* capa blau marí sobre la imatge de fons perquè hi hagi contrast amb el rosa i el blanc */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0px;
  background-color: #1A1E3A; /* fons de la secció Entrades: blau marí (base si no carrega la imatge) */
}

section.tickets .item {
  background-color: rgba(250,250,250,0.15);
  padding: 40px;
  margin-bottom: 30px;
  border-radius: 20px; /* cantonades arrodonides de les caixes d'entrades */
}

section.tickets .item h3 {
  color: #EF88B5; /* títols de les caixes d'entrades: rosa (abans blanc) */
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0px;
}

section.tickets .item h4 {
  color: #FFFFFF; /* detalls (horaris, atenció al client): blanc */
  font-size: 16px;
  margin-bottom: 0px;
}

section.tickets .item p {
  color: #FFFFFF; /* textos de les caixes d'entrades: blanc */
  margin-bottom: 20px;
}

section.tickets .item h4 a {
  color: #EF88B5; /* enllaç tickets@4tickets.pro: rosa */
  text-decoration: underline !important; /* subratllat perquè es vegi que és un enllaç */
}

section.tickets .item h4 a:hover {
  color: #FFFFFF; /* enllaç actiu: blanc (el blau marí no es veuria sobre el fons blau marí) */
}

/* ----------------------------- */

.accordions p {
	margin-top: 0px;
  color: #FFFFFF; /* textos de preus i abonament: blanc (abans gris fosc) */
}

@media screen and (max-width: 768px) {
  .accordions {
    margin-left: 0px !important;
    padding: 10px !important;
  }
}

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.15); /* caixa de Preus i Abonaments: blanc translúcid (abans blanc trencat), igual que les caixes de l'esquerra */
  margin-left: 45px;
}
.accordions .accordion {
  border-bottom: 2px solid #FFFFFF; /* línia separadora de Preus i Abonaments: blanca (abans taronja) */
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 20px;  
  font-size: 18px;
  font-weight: 700;
  color: #EF88B5; /* títols "PREUS" i "ABONAMENT 3x2": rosa (abans blau) */
  cursor: pointer;
  transition: color 200ms ease-in-out;
  /* border-bottom: 1px solid #F99303; */         /* separador taronja */
}

@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}

.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}

.accordion-head.is-open {
  color: #EF88B5; /* títol de l'apartat obert: rosa (abans blau) */
  border-bottom: none;
}

.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #FFFFFF; /* línia separadora sota el contingut: blanca (abans taronja) */
}
.accordion-body > .content {
  padding: 5px;
  padding-top: 0;
  padding-bottom: 50px;
}

.accordion-body h4 { 
	font-size: 14px;
  color: #FFFFFF; /* noms dels espais (Teatre El Jardí, Sala La Cate...): blanc (abans blau) */
}

.accordion-body span {
  font-size: 14px;
  font-weight: 600;
  color: #EF88B5; /* imports dels preus i marques ">>>": rosa (abans negre) */
  margin-left: 5px;
}

.accordions .last-accordion .accordion-body {
  border-bottom: none; /* sense línia sota l'últim apartat */
}

/* ----------------------------- */

/* Caixa informativa del 3x2 (sota la caixa d'acordions de Preus i Abonament) */
.promo-3x2 {
  margin-top: 10px; /* separació respecte l'últim punt de l'abonament (s'hi suma el marge de 20px del paràgraf) */
  padding-top: 30px; /* separació entre la línia i el títol de la informació 3x2 */
  border-top: 1px solid #FFFFFF; /* línia blanca que separa l'abonament de la informació 3x2 dins de la mateixa caixa */
}

section.tickets .item-abonament .promo-3x2 h3 {
  color: #EF88B5; /* títol de la caixa 3x2: rosa (nivell 1, el més gran: 14 pt al PDF) */
  font-size: 18px; /* mida del títol */
  font-weight: 700;
  margin-bottom: 15px;
}

section.tickets .item-abonament .promo-3x2 h4 {
  color: #FFFFFF; /* subtítols en majúscules: blanc (nivell 2: 12 pt al PDF) */
  font-size: 15px; /* mateixa mida que el text, com al PDF (proporció 14 : 12) */
  font-weight: 600;
  margin-bottom: 5px;
}

section.tickets .item-abonament .promo-3x2 p {
  color: #FFFFFF; /* text de la caixa 3x2: blanc (nivell 3: 12 pt al PDF) */
  font-size: 15px; /* mateixa mida que els subtítols */
  margin-top: 15px; /* separació entre paràgrafs */
  margin-bottom: 0px;
}

/* Llista d'abonaments: cada abonament és una fila (nom + preu a la mateixa línia, detalls a sota) */
section.tickets .item-abonament .abonament-fila {
  display: flex; /* nom i preu a la mateixa línia */
  flex-wrap: wrap; /* els detalls passen a la línia de sota */
  justify-content: space-between; /* nom a l'esquerra, preu a la dreta */
  align-items: baseline;
  padding: 12px 0px; /* aire entre files */
  border-bottom: 1px solid rgba(255, 255, 255, 0.30); /* línia blanca translúcida entre abonaments */
}

section.tickets .item-abonament .abonament-fila:last-child {
  border-bottom: none; /* sense línia sota l'últim abonament */
  padding-bottom: 0px;
}

section.tickets .item-abonament .promo-3x2 .abonament-fila h4 {
  color: #FFFFFF; /* nom de l'abonament: blanc */
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0px;
}

section.tickets .item-abonament .promo-3x2 .abonament-fila .abonament-preu {
  color: #EF88B5; /* preu de l'abonament: rosa */
  font-size: 15px;
  font-weight: 700;
  margin-top: 0px;
  margin-bottom: 0px;
}

section.tickets .item-abonament .promo-3x2 .abonament-fila .abonament-detalls {
  flex: 0 0 100%; /* els detalls ocupen tota l'amplada, sota el nom i el preu */
  color: #FFFFFF; /* detalls de l'abonament: blanc */
  font-size: 13px; /* una mica més petits que el nom i el preu */
  font-style: italic; /* detalls en cursiva */
  margin-top: 4px;
  margin-bottom: 0px;
}

section.tickets .item-abonament .main-button {
  margin-top: 45px; /* separació entre l'última fila d'abonaments i el botó "Comprar abonaments" (abans 25px) */
}

/* Instruccions "Com fer la compra": bloc desplegable dins de la caixa d'abonaments (tancat per defecte, perquè la caixa no s'allargui) */
section.tickets .item-abonament .com-comprar {
  margin-top: 30px; /* separació respecte la llista d'abonaments */
  padding-top: 24px;
  border-top: 1px solid #FFFFFF; /* línia blanca, igual que la que separa l'abonament de la llista de preus */
}

section.tickets .item-abonament .com-comprar summary {
  display: flex; /* títol a l'esquerra i fletxeta a la dreta */
  justify-content: space-between;
  align-items: center;
  list-style: none; /* treu el triangle per defecte del navegador */
  cursor: pointer;
  color: #EF88B5; /* títol: rosa */
  font-size: 18px;
  line-height: 1.25;
}

section.tickets .item-abonament .com-comprar summary::-webkit-details-marker {
  display: none; /* treu el triangle per defecte (Safari i Chrome antics) */
}

section.tickets .item-abonament .com-comprar summary::after {
  content: ""; /* fletxeta que indica que el bloc es pot obrir */
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0px 4px 4px 16px;
  border-right: 2px solid #EF88B5;
  border-bottom: 2px solid #EF88B5;
  transform: rotate(45deg); /* fletxeta cap avall quan està tancat */
  transition: transform 0.2s ease;
}

section.tickets .item-abonament .com-comprar[open] summary::after {
  margin-bottom: 0px;
  transform: rotate(225deg); /* fletxeta cap amunt quan està obert */
}

section.tickets .item-abonament .com-comprar summary:focus-visible {
  outline: 3px solid #EF88B5; /* contorn visible per a qui navega amb teclat */
  outline-offset: 6px;
  border-radius: 8px;
}

section.tickets .item-abonament .com-comprar ol {
  margin: 20px 0px 0px 0px;
  padding: 0px;
  list-style: none; /* la numeració la dibuixen els ::before */
  counter-reset: pas;
}

section.tickets .item-abonament .com-comprar li {
  position: relative;
  margin: 0px 0px 14px 0px;
  padding-left: 36px; /* lloc per al número del pas */
  counter-increment: pas;
  color: #FFFFFF; /* text dels passos: blanc */
  font-size: 14px;
  line-height: 1.5;
}

section.tickets .item-abonament .com-comprar li:last-child {
  margin-bottom: 0px;
}

section.tickets .item-abonament .com-comprar li::before {
  content: counter(pas); /* número del pas dins d'un cercle rosa */
  position: absolute;
  left: 0px;
  top: 0px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #EF88B5; /* cercle rosa */
  color: #1A1E3A; /* número blau marí */
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

section.tickets .item-abonament .com-comprar li strong {
  color: #FFFFFF; /* negreta (COMPRAR ENTRADES, Afegir esdeveniment, Continuar) */
  font-weight: 700;
}

/* ----------------------------- */

/* Disposició de les caixes d'entrades: 2 columnes a l'ordinador (esquerra: compra, taquilla i preus; dreta: abonaments), apilades en mòbil.
   L'ordre del codi HTML és l'ordre de lectura, així que en mòbil no es parteix la informació. */
section.tickets .caixa-col {
  display: flex; /* permet que l'última caixa de cada columna s'estiri fins a l'alçada de la columna */
  flex-direction: column;
  margin-bottom: 30px; /* separació vertical sota cada columna */
}

section.tickets .caixa-col > .item {
  flex: 0 0 auto; /* cada caixa només fa l'alçada del seu contingut */
  margin-bottom: 30px; /* separació entre caixes apilades de la mateixa columna */
}

section.tickets .caixa-col > .item:last-child {
  flex: 1 1 auto; /* l'última caixa de la columna s'estira perquè les dues columnes acabin a la mateixa alçada */
  margin-bottom: 0px; /* la separació ja la dóna la columna */
}


@media screen and (max-width: 575px) {
  section.tickets .item {
    padding: 30px 25px; /* mòbil: farciment més petit perquè el text tingui més ample */
  }
}

/* ----------------------------- */

/* Caixa PREUS (columna esquerra) */
section.tickets .item-preus h4 {
  font-size: 14px; /* noms dels espais (Teatre El Jardí, Sala La Cate...) */
  margin-top: 25px; /* separació entre espais (abans amb <br>) */
}

section.tickets .item-preus h3 + h4 {
  margin-top: 15px; /* primer espai: més a prop del títol */
}

section.tickets .item-preus p {
  font-size: 14px; /* espectacle i preu */
  margin-bottom: 0px; /* línies de preus compactes, sense l'espai de 20px de .item p */
}

section.tickets .item-preus span {
  font-size: 14px;
  font-weight: 600;
  color: #EF88B5; /* imports dels preus: rosa */
  margin-left: 5px;
}

/* Caixa ABONAMENT 3x2 (columna dreta): conté els punts de l'abonament i, separada per una línia blanca, la informació 3x2 (.promo-3x2) */
section.tickets .item-abonament h3 {
  margin-bottom: 15px; /* separació entre títol i primer punt */
}

section.tickets .item-abonament p {
  font-size: 14px; /* punts de l'abonament */
}

section.tickets .item-abonament p:last-child {
  margin-bottom: 0px; /* sense espai extra sota l'últim punt */
}

section.tickets .item-abonament span {
  font-weight: 600;
  color: #EF88B5; /* marques ">>>": rosa */
}




/* 
---------------------------------------------
descàrregues
--------------------------------------------- 
*/

section.downloads {
  background: linear-gradient(-45deg, rgba(231, 80, 146, 1), rgba(239, 136, 181, 1), rgba(244, 173, 204, 1)); /* degradat rosa: fosc (#E75092), rosa de marca #EF88B5 al centre, clar (#F4ADCC) */
  /* background-image: url(../images/bg-section-downloads.jpg); */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

section.downloads .section-capcalera h2 {
  color: #1A1E3A; /* títol "DESCÀRREGUES": blau marí perquè va sobre fons rosa */
  border-bottom: 1px solid rgba(26,30,58,0.50); /* línia sota el títol: blau marí translúcid */
}


/* Descàrregues item column */
.downloads-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.downloads-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.downloads-item-col {
		width: 100%;
	}
}



/*
---------------------------------------------
bingo
---------------------------------------------
*/

section.bingo {
  background-image: url(../images/bg-credits.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 50px 0px 50px 0px;
  text-align: center;
}

section.bingo img {
  max-width: 100%;
  height: auto;
}

section.bingo table { 
  width: 80%; 
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 auto;
}

section.bingo table td { 
  padding: 6px; 
  border: 0px solid #ccc; 
  text-align: left; 
}

section.bingo table td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 90%;
}




/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	section.bingo table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	section.bingo table tr { border: 0px solid #ccc; }
	
	section.bingo table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #eee; 
		position: relative;
		padding-left: 25%;
		padding-right: 25%;
	}
	
	section.bingo table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		padding-right: 10px; 
		white-space: nowrap;
	}
}






/*
---------------------------------------------
credits
---------------------------------------------
*/

section.credits {
  background-image: url(../images/bg-credits.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 50px 0px 50px 0px;  
}

section.credits img {
  max-width: 100%;
  height: auto;
}

section.credits table { 
  width: 80%; 
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 auto;
}

section.credits table td { 
  padding: 6px; 
  border: 0px solid #ccc; 
  text-align: left; 
}

section.credits table td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
}

section.credits > div.container > div.row > img[src="assets/images/logos/480x160-citroen_interfren.png"] {
  display: block;
  margin: 0 auto; /* Centra la imatge horitzontalment */
  width: 480px !important; /* Amplada exacta */
  height: 160px !important; /* Alçada exacta */
  object-fit: contain; /* Assegura que les proporcions es mantinguin (opcional) */
}




/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	section.credits table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	section.credits table tr { border: 0px solid #ccc; }
	
	section.credits table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #eee; 
		position: relative;
		padding-left: 25%;
		padding-right: 25%;
	}
	
	section.credits table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}







/* 
---------------------------------------------
peu
--------------------------------------------- 
*/

section.peu {
  background: linear-gradient(-45deg, rgba(231, 80, 146, 1), rgba(239, 136, 181, 1), rgba(244, 173, 204, 1)); /* degradat rosa: fosc (#E75092), rosa de marca #EF88B5 al centre, clar (#F4ADCC) */
  /* background-image: url(../images/bg-section-peu.jpg); */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px 10px 50px 10px;
}

.footer {
  text-align: center;
  margin-top: 140px;
  border-top: 1px solid rgba(26,30,58,0.25); /* línia sobre el peu: blau marí translúcid (abans blanc) */
  padding: 50px 0px;
}
.footer p {
  text-transform: uppercase;
  font-size: 14px;
  color: #1A1E3A; /* text del peu: blau marí (abans blanc, sobre rosa no es llegia) */
}

.footer p a {
  color: #1A1E3A; /* enllaços del peu: blau marí (abans taronja) */
  text-decoration: underline !important; /* enllaços del peu subratllats per distingir-los del text */
}

.footer p a:hover {
  color: #1A1E3A; /* enllaços del peu en passar-hi: blau marí (abans vermell) */
  opacity: 0.7; /* enllaços del peu en passar-hi: lleugerament més clars */
}




/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 992px) {

  .main-banner .caption {
    top: 60%;
  }

  .main-banner .caption h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 22px;
  }

  .main-banner .caption .main-button {
    margin-top: 15px;
  }

  section.graella {
    padding-top: 80px; /* En desactivar el carousel passa de 400px a 80px */
  }

  section.graella .categories {
    margin-right: 0px;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {

  .primera-barra .left-content p {
    display: none;
  }

  .primera-barra .right-icons {
    text-align: center;
  }

  .main-nav .nav .sub-menu {
    display: none;
  }

  .header-area .main-nav .nav li ul.sub-menu li a {
    color: #1A1E3A; /* mòbil: submenús: blau marí (abans gris fosc) */
  }
  
  .espectacle-single-item .down-content .share {
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding: 10px 2px !important;
  }

}




/* 
---------------------------------------------
qui som
--------------------------------------------- 
*/

section.qui_som {
  background: linear-gradient(-45deg, rgba(231, 80, 146, 1), rgba(239, 136, 181, 1), rgba(244, 173, 204, 1)); /* degradat rosa: fosc (#E75092), rosa de marca #EF88B5 al centre, clar (#F4ADCC) */
  /* background-image: url(../images/bg-gotes.jpg); */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px 0px 0px;
}

section.qui_som #contact {
  background-color: #FFFFFF; /* caixa de contacte: blanca (abans blanc trencat) */
  border-radius: 20px;
  padding: 40px;
  position: static;
}

section.qui_som #contact h2 {
  text-transform: uppercase;
  color: #1A1E3A; /* títol de la caixa de contacte: blau marí */
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.qui_som p {
  text-transform: uppercase;
  color: #1A1E3A; /* textos de Qui som: blau marí */
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.qui_som .right-info {
  background-color: #1A1E3A; /* caixa lateral d'informació: blau marí (abans taronja) */
  border-radius: 20px;
  padding: 20px 40px 20px 50px;  
  vertical-align: top;
}

section.qui_som .right-info ul li {
  display: inline-block;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  margin-bottom: 20px;
  padding-bottom: 10px;
}

section.qui_som .right-info ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

section.qui_som .right-info ul li h6 {
  color: #FFFFFF; /* etiquetes de la caixa lateral: blanc */
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 10px;
}

section.qui_som .right-info ul li span {
  display: block;
  font-size: 18px;
  color: #EF88B5; /* dades de la caixa lateral: rosa (abans blanc trencat) */
  font-weight: 700;
}




/*
---------------------------------------------
heading page
---------------------------------------------
*/

section.heading-page {
  background-image: linear-gradient(rgba(26,30,58,0.60), rgba(26,30,58,0.60)), url(../images/bg-capcalera.jpg); /* capa blau marí sobre la imatge de capçalera perquè el títol blanc tingui contrast */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 50px;
  text-align: center;
}

section.heading-page h6 {
  margin-top: 0px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

section.heading-page h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #FFFFFF; /* nom de l'artista a la capçalera: blanc (abans blanc trencat) */
  letter-spacing: 1px;
}



/*
---------------------------------------------
espectacles
---------------------------------------------
*/

section.espectacles {
  background: linear-gradient(-45deg, rgba(231, 80, 146, 1), rgba(239, 136, 181, 1), rgba(244, 173, 204, 1)); /* degradat rosa: fosc (#E75092), rosa de marca #EF88B5 al centre, clar (#F4ADCC) */
  /* background-image: url(../images/background-section-espectacles.jpg); */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 0px;
}

section.espectacles .main-button {
  text-align: center;
  margin-bottom: 80px;
}

section.espectacles .main-button a {
  padding: 12px 60px;
  text-align: center;
  margin-top: 30px;
  background-color: #1A1E3A; /* botó "Tornar a l'inici": blau marí (el rosa no es veuria sobre el fons rosa) */
  color: #FFFFFF; /* lletres del botó "Tornar a l'inici": blanc */
}

section.espectacles .main-button a:hover {
  background-color: #FFFFFF; /* botó "Tornar a l'inici" en passar-hi: blanc */
  color: #1A1E3A; /* lletres en passar-hi: blau marí */
}

.espectacle-single-item .thumb {
  position: relative;
}

.espectacle-single-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.espectacle-single-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.espectacle-single-item .thumb .price span {
  font-size: 16px;
  color: #FFFFFF; /* etiqueta de preu sobre la foto: lletres blanques */
  font-weight: 600;
  background-color: #1A1E3A; /* etiqueta de preu / gratuït sobre la foto: blau marí (el rosa es fonia amb les imatges rosa de la capçalera) */
  padding: 7px 12px;
  border-radius: 10px;
}

.espectacle-single-item .thumb .estrena {
  position: absolute;
  left: 20px;
  top: 20px;
}

.espectacle-single-item .thumb .estrena span {
  font-size: 16px;
  color: #FFFFFF; /* etiqueta "estrena": lletres blanques */
  font-weight: 600;
  background-color: #1A1E3A; /* etiqueta "estrena": blau marí (abans taronja clar) */
  padding: 7px 12px;
  border-radius: 10px;
}

.espectacle-single-item .thumb .price2 {
  position: absolute;
  left: 20px;
  top: 80px;
}

.espectacle-single-item .thumb .price2 span {
  font-size: 16px;
  color: #FFFFFF; /* etiqueta de preu sobre la foto: lletres blanques */
  font-weight: 600;
  background-color: #1A1E3A; /* etiqueta de preu / gratuït sobre la foto: blau marí (el rosa es fonia amb les imatges rosa de la capçalera) */
  padding: 7px 12px;
  border-radius: 10px;
}

.espectacle-single-item .thumb .date {
  position: absolute;
  background-color: #FFFFFF; /* caixeta de la data sobre la foto: blanca (abans blau cel) */
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 15px 0px;
  border-radius: 10px;
  right: 20px;
  top: 20px;
}

.espectacle-single-item .thumb .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #1A1E3A; /* mes a la caixeta de la data: blau marí (abans blau complementari) */
}

.espectacle-single-item .thumb .date span {
  display: block;
  color: #1A1E3A; /* dia a la caixeta de la data: blau marí */
  font-size: 22px;
  margin-top: 7px;
}

/* Mòbil: etiquetes de preu / estrena i caixeta de la data més petites perquè no tapin la imatge de la capçalera */
@media (max-width: 767px) {
  .espectacle-single-item .thumb .price,
  .espectacle-single-item .thumb .estrena {
    left: 10px; /* mòbil: etiqueta de preu / estrena més a prop de la vora (abans 20px) */
    top: 10px; /* mòbil: etiqueta de preu / estrena més amunt (abans 20px) */
  }

  .espectacle-single-item .thumb .price span,
  .espectacle-single-item .thumb .estrena span,
  .espectacle-single-item .thumb .price2 span {
    font-size: 12px; /* mòbil: lletra de l'etiqueta de preu / estrena (abans 16px) */
    padding: 5px 9px; /* mòbil: farciment de l'etiqueta (abans 7px 12px) */
    border-radius: 8px; /* mòbil: cantonades de l'etiqueta (abans 10px) */
  }

  .espectacle-single-item .thumb .price2 {
    left: 10px; /* mòbil: segona etiqueta de preu alineada amb la primera (abans 20px) */
    top: 44px; /* mòbil: segona etiqueta just sota la primera, que ara és més petita (abans 80px) */
  }

  .espectacle-single-item .thumb .date {
    width: 64px; /* mòbil: amplada de la caixeta de la data (abans 80px) */
    height: 56px; /* mòbil: alçada de la caixeta de la data (abans 80px) */
    padding: 9px 0px; /* mòbil: farciment de la caixeta de la data (abans 15px 0px) */
    border-radius: 8px; /* mòbil: cantonades de la caixeta de la data (abans 10px) */
    right: 10px; /* mòbil: caixeta de la data més a prop de la vora (abans 20px) */
    top: 10px; /* mòbil: caixeta de la data més amunt (abans 20px) */
  }

  .espectacle-single-item .thumb .date h6 {
    font-size: 10px; /* mòbil: mes a la caixeta de la data (abans 13px) */
  }

  .espectacle-single-item .thumb .date span {
    font-size: 17px; /* mòbil: dia a la caixeta de la data (abans 22px) */
    margin-top: 3px; /* mòbil: separació entre mes i dia (abans 7px) */
  }
}

.espectacle-single-item .down-content {
  background-color: #1A1E3A; /* caixa d'informació de l'espectacle: blau marí (abans taronja) */
  padding: 20px 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.espectacle-single-item .down-content .icons {
  /* background-color: #E5542F; */
  text-align: center;
}

.espectacle-single-item .down-content .icons ul li {
  color: #EF88B5; /* icones (calendari, lloc, entrada...): rosa */
  font-size: 32px;
}

.espectacle-single-item .down-content h3 {
  display: block!important;
  text-align: center;
  font-size: 22px;
  color: #EF88B5; /* títol de l'espectacle: rosa (abans blanc trencat) */
  font-weight: 700;
  display: inline-block;
  margin-bottom: 10px;
}

.espectacle-single-item .down-content h4.mb10 {
  display: block!important;
  text-align: center;
  font-size: 19px;
  color: #FFFFFF; /* nom de la companyia o artista: blanc */
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px !important;
}

.espectacle-single-item .down-content h4 {
  display: block!important;
  text-align: center;
  font-size: 19px;
  color: #FFFFFF; /* nom de la companyia o artista: blanc */
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.espectacle-single-item .down-content h5 {
  display: block!important;
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

.espectacle-single-item .down-content h6{
  display: block!important;
  text-align: center;
  font-size: 17px;
  color: #FFFFFF; /* subtítol de l'espectacle: blanc */
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.espectacle-single-item .down-content p {
  color: #FFFFFF; /* descripció i dades (horari, lloc, preu): blanc (abans blau) */
  font-size: 16px;
  text-align: center; /* Centrat*/
  margin-bottom: 20px;
}

.espectacle-single-item .down-content a {
  color: #EF88B5; /* enllaços ("Com arribar-hi"): rosa (abans blau) */
  font-weight: 500;
  text-decoration: underline !important;
}

.espectacle-single-item .down-content a:hover {
  color: #FFFFFF; /* enllaços en passar-hi: blanc */
  font-weight: 500;
}

.espectacle-single-item .down-content p.description {
  text-align: justify;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(239,136,181,0.50); /* línia sobre la descripció: rosa translúcid (abans gris clar) */
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(239,136,181,0.50); /* línia sota la descripció: rosa translúcid (abans gris clar) */
}

.espectacle-single-item .down-content .espaiat {
  margin-top: 40px;
  padding: 20px;
  border-top: 1px solid rgba(239,136,181,0.50); /* línia separadora entre blocs: rosa translúcid (abans gris clar) */
}

.espectacle-single-item .down-content .share {
  background-color: #FFFFFF; /* caixetins interiors (bio, què cal dur, formulari): blanc (abans blanc trencat) */
  /* background: linear-gradient(0deg, rgba(229,84,47,1) 0%, rgba(237,134,36,1) 50%, rgba(243,150,30,1) 100%);  */
  padding: 40px 40px;
  border-top: 0px solid #eee;
}

.espectacle-single-item .down-content .share h5 {
  color: #1A1E3A; /* títols dels caixetins: blau marí (abans blau) */
  font-size: 1em;
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

.espectacle-single-item .down-content .share ul li {
  color: #1A1E3A; /* textos dels caixetins: blau marí (abans taronja) */
  list-style-type: none;
  margin-left: 10px;
  margin-bottom: 20px;
}

.espectacle-single-item .down-content .share p {
  color: #1A1E3A; /* paràgrafs dins dels caixetins blancs: blau marí (heretaven el blanc de .down-content p i no es veien) */
}

/* Mòbil: text de les fitxes d'espectacle una mica més petit */
@media (max-width: 767px) {
  .espectacle-single-item .down-content p {
    font-size: 15px; /* mòbil: descripció i dades (horari, lloc, preu, crèdits) (abans 16px) */
  }

  .espectacle-single-item .down-content .share ul li {
    font-size: 15px; /* mòbil: textos de llista dins dels caixetins (abans 16px, heretat) */
  }
}

.espectacle-single-item .down-content .share a {
  color: #1A1E3A; /* enllaços dins dels caixetins: blau marí (abans blau) */
}

.espectacle-single-item .down-content .share a:hover {
  color: #1A1E3A; /* enllaços dins dels caixetins en passar-hi: blau marí */
  background-color: #EF88B5; /* enllaços dins dels caixetins en passar-hi: ressaltat en rosa */
}

/* Formulari d'inscripció (Bootstrap): treiem els blaus per defecte */
.espectacle-single-item .down-content .share label {
  color: #1A1E3A; /* etiquetes del formulari: blau marí */
  font-weight: 600;
}

.espectacle-single-item .down-content .share .form-control:focus {
  border-color: #EF88B5; /* camp actiu: vora rosa (abans blau Bootstrap) */
  box-shadow: 0 0 0 0.2rem rgba(239,136,181,0.35); /* camp actiu: resplendor rosa */
}

.espectacle-single-item .down-content .share .btn-primary {
  background-color: #1A1E3A; /* botó "Enviar": blau marí (abans blau Bootstrap) */
  border-color: #1A1E3A;
  color: #FFFFFF; /* lletres del botó "Enviar": blanc */
}

.espectacle-single-item .down-content .share .btn-primary:hover,
.espectacle-single-item .down-content .share .btn-primary:focus {
  background-color: #EF88B5; /* botó "Enviar" en passar-hi: rosa */
  border-color: #EF88B5;
  color: #1A1E3A; /* lletres en passar-hi: blau marí */
}

@media only screen and (max-width: 768px) {
  .share {
    margin-left: 2px;
    margin-right: 2px;
    padding: 2px;
  }
}  /* tancament que faltava del @media (max-width: 768px) */

	

/* Espectacle item column */
.espectacle-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.espetacle-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.espectacle-col {
		width: 100%;	
}
}  /* tancament que faltava del @media (max-width: 767px) */









/*

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #f5a425!important;
  padding-left: 25px;
}

*/  /* tancament que faltava del comentari de dalt (codi antic desactivat) */

/* ==========================================================
   PÀGINA calendari.html (calendari de programació per dies i hores)
   ========================================================== */

section.programa-graella {
  background: linear-gradient(-45deg, rgba(231, 80, 146, 1), rgba(239, 136, 181, 1), rgba(244, 173, 204, 1)); /* degradat rosa de la web: fosc (#E75092), rosa de marca #EF88B5 al centre, clar (#F4ADCC) */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 60px; /* aire sota la capçalera de pàgina */
  padding-bottom: 80px;
}

/* Quadrícula (mòbil primer: una sola columna, agrupada per dies) */
.gr {
  display: grid;
  grid-template-columns: 1fr; /* mòbil: una columna */
  gap: 14px; /* separació entre caselles */
  margin-top: 0px; /* sense marge propi: l'aire superior el dona la secció */
}

.gr-dia {
  order: calc(var(--d) * 10); /* mòbil: la capçalera del dia va abans de les seves caselles */
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0px 0px 0px;
  padding: 14px 20px;
  background-color: #1A1E3A; /* capçalera del dia: blau marí */
  border-radius: 20px; /* cantonades arrodonides, igual que la resta de caixes */
  color: #FFFFFF;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0px;
}

.gr-dia-nom {
  color: #FFFFFF; /* nom del dia: blanc */
  font-size: 20px;
  font-weight: 700;
}

.gr-dia-data {
  color: #EF88B5; /* data del dia: rosa */
  font-size: 15px;
  font-weight: 500;
}

.gr-cel {
  order: calc(var(--d) * 10 + var(--s)); /* mòbil: caselles ordenades per dia i per hora */
  display: flex;
  flex-direction: column; /* si una casella té dues propostes, s'apilen */
  gap: 14px;
}

.gr-buit {
  display: none; /* mòbil i tauleta: no té sentit mostrar espais buits en una llista */
}

/* Casella (enllaç a la fitxa de l'espectacle) */
.gr-card {
  position: relative; /* referència per a la càpsula de l'hora */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* la casella ocupa tota l'alçada de la fila */
  padding: 16px 18px 16px 18px;
  border-radius: 20px; /* cantonades arrodonides */
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* resposta en passar-hi */
}

.gr-card:hover,
.gr-card:focus-visible {
  transform: translateY(-3px); /* la casella s'aixeca una mica en passar-hi */
  box-shadow: 0 10px 24px rgba(26, 30, 58, 0.30);
}

.gr-card:focus-visible {
  outline: 3px solid #1A1E3A; /* contorn visible per a qui navega amb teclat */
  outline-offset: 3px;
}

.gr-card h4 {
  margin: 0px 0px 4px 0px;
  padding-right: 76px; /* deixa lliure la cantonada de la càpsula de l'hora */
  font-size: 17px; /* títol de l'espectacle */
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0px;
}

.gr-card p {
  margin: 0px;
  color: inherit; /* el color del text depèn del tipus de casella */
}

.gr-card .gr-artista {
  font-size: 14px; /* companyia o artista */
  line-height: 1.35;
}

/* Hora: càpsula a la cantonada superior dreta de cada casella */
.gr-h {
  position: absolute;
  top: 14px; /* cantonada superior */
  right: 14px; /* cantonada dreta */
  padding: 3px 11px;
  border-radius: 999px; /* forma de càpsula */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.gr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 12px 0px 14px 0px;
  font-size: 13px;
}

.gr-preu {
  padding: 3px 12px;
  border-radius: 999px; /* etiqueta de preu amb forma de píndola */
  background-color: #EF88B5; /* preu: fons rosa */
  color: #1A1E3A; /* preu: lletres blau marí */
  font-weight: 700;
}

.gr-edat {
  padding: 2px 9px;
  border: 1px solid currentColor; /* edat recomanada amb vora del color del text */
  border-radius: 999px;
  font-weight: 600;
}

.gr-lloc {
  margin-top: auto; /* el lloc queda sempre a la part baixa de la casella */
  font-size: 13px;
  line-height: 1.3;
}

.gr-lloc i {
  display: inline-block;
  width: 12px; /* amplada fixa de la icona perquè el text s'alineï */
  text-align: center;
  margin-right: 3px;
}

/* Casella d'activitat paral·lela o format no teatral: blau marí */
.gr-activitat,
.gr-activitat:hover {
  background-color: #1A1E3A; /* activitats i formats no teatrals: fons blau marí */
  color: #FFFFFF; /* text: blanc */
}

.gr-activitat h4,
.gr-activitat .gr-lloc i {
  color: #EF88B5; /* títol i icona: rosa sobre blau marí */
}

.gr-activitat .gr-h {
  background-color: #FFFFFF; /* càpsula de l'hora sobre blau marí: blanca */
  color: #1A1E3A;
}

/* Casella d'espectacle teatral: blanca */
.gr-teatre,
.gr-teatre:hover {
  background-color: #FFFFFF; /* espectacles teatrals: fons blanc */
  color: #1A1E3A; /* text: blau marí */
}

.gr-teatre h4,
.gr-teatre .gr-lloc i {
  color: #1A1E3A; /* títol i icona: blau marí sobre blanc */
}

.gr-teatre .gr-h {
  background-color: #1A1E3A; /* càpsula de l'hora sobre blanc: blau marí */
  color: #FFFFFF;
}

/* Prèvia del festival (dimarts 1 i dijous 3): una sola càpsula */
.gr-previa {
  display: flex;
  margin-top: 50px; /* mòbil: separació respecte al calendari */
}

.gr-previa .gr-card {
  width: 100%;
}

.gr-previa-titol {
  margin: 0px;
  padding-right: 76px; /* deixa lliure la càpsula de l'hora */
  color: #FFFFFF; /* "Prèvia": blanc */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0px;
}

.gr-previa-data {
  margin: 2px 0px 14px 0px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.30); /* línia que separa les dates de la proposta */
  color: #EF88B5; /* dates de la prèvia: rosa */
  font-size: 14px;
  font-weight: 500;
}

.gr-previa .gr-previa-data {
  color: #EF88B5; /* evita que color: inherit de .gr-card p ho canviï */
}

/* Botons del final */
.gr-botons {
  margin-top: 50px;
  text-align: center;
}

section.programa-graella .main-button a {
  margin: 6px; /* separació entre botons */
  background-color: #1A1E3A; /* botó principal: blau marí (el rosa no es veuria sobre el fons rosa) */
  color: #FFFFFF;
}

section.programa-graella .main-button a:hover {
  background-color: #FFFFFF; /* botó en passar-hi: blanc */
  color: #1A1E3A;
}

section.programa-graella .main-button a + a {
  background-color: #FFFFFF; /* botó secundari "Comprar entrades": blanc */
  color: #1A1E3A;
}

section.programa-graella .main-button a + a:hover {
  background-color: #1A1E3A; /* botó secundari en passar-hi: blau marí */
  color: #FFFFFF;
}

/* Tauleta: dues columnes, capçaleres de dia a tota l'amplada */
@media (min-width: 576px) and (max-width: 991.98px) {
  .gr {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* tauleta: dues columnes */
  }

  .gr-dia {
    grid-column: 1 / -1; /* la capçalera del dia ocupa les dues columnes */
  }

  .gr-previa {
    max-width: calc((100% - 14px) / 2); /* tauleta: la prèvia fa l'amplada d'una columna */
  }
}

/* Ordinador: calendari amb un dia per columna i les hores dins de cada casella */
@media (min-width: 992px) {
  .gr {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 dies */
    column-gap: 14px;
    row-gap: 14px;
  }

  .gr-dia {
    order: 0;
    grid-column: var(--d); /* cada dia en la seva columna */
    grid-row: 1; /* capçaleres a la primera fila */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 0px;
  }

  .gr-cel {
    order: 0;
    grid-column: var(--d); /* columna segons el dia */
    grid-row: calc(var(--s) + 1); /* fila segons l'hora: les propostes a la mateixa hora queden alineades */
  }

  .gr-buit {
    display: block; /* ordinador: mostra l'espai buit del dia i de la franja horària */
    grid-column: var(--d); /* mateixa columna que el seu dia */
    grid-row: calc(var(--s) + 1); /* mateixa fila que la seva franja horària */
    border: 1px solid rgba(26, 30, 58, 0.30); /* vora fineta de blau marí translúcid */
    border-radius: 20px; /* mateixes cantonades arrodonides que les caselles */
    background-color: transparent; /* sense fons */
  }

  .gr-previa {
    margin-top: 90px; /* més separació respecte al bloc regular del calendari */
    max-width: calc((100% - 42px) / 4); /* la prèvia fa l'amplada d'una columna de dia */
  }
}

@media (prefers-reduced-motion: reduce) {
  .gr-card {
    transition: none; /* sense animació si l'usuari ho ha desactivat al sistema */
  }

  .gr-card:hover,
  .gr-card:focus-visible {
    transform: none;
  }
}

/* Pop-up abonaments 3x2 (s'obre en fer clic a COMPRAR ENTRADES) */
.hf-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999; /* per sobre de la capçalera fixa */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.6);
}

.hf-popup[hidden] {
  display: none;
}

.hf-popup-caixa {
  position: relative;
  line-height: 0;
  max-width: 100%;
}

.hf-popup-caixa img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); /* cap a mòbil, la imatge sempre hi cap sencera */
  max-height: calc(100dvh - 32px);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.hf-popup-tanca {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  color: #1c2347;
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hf-popup-tanca:hover,
.hf-popup-tanca:focus-visible {
  background-color: #e6e6e6;
}

/* Àncora #abonaments: deixa espai perquè la capçalera no tapi el títol en saltar-hi */
.ancora-abonaments {
  display: block;
  scroll-margin-top: 110px;
}

/* Enllaços al calendari (calendari.html) */
section.graella .enllac-calendari {
  margin-top: 50px; /* separació respecte a l'última fila d'espectacles */
  margin-bottom: 0px;
  text-align: center;
  font-size: 15px;
  color: #1A1E3A; /* blau marí sobre el fons rosa */
}

section.graella .enllac-calendari .icona-calendari {
  width: 1.3em; /* icona de calendari al començament de la frase, hereta el color del text */
  height: 1.3em;
  margin-right: 4px;
  vertical-align: -0.28em;
}

section.graella .enllac-calendari a {
  font-weight: 700;
  color: #1A1E3A;
  text-decoration: underline;
}

section.graella .enllac-calendari a:hover {
  color: #FFFFFF;
}

section.tickets .item-abonament p a {
  font-weight: 600;
  color: #EF88B5; /* rosa, com les marques ">>>" */
  text-decoration: underline;
}

section.tickets .item-abonament p a:hover {
  color: #FFFFFF;
}