:root{
--grupo1-color: #9c3261;

--colorGrupo01-color: #73203f;
--colorGrupo02-color: #1f5654;
--colorGrupo03-color: #43325c;
--colorGrupo04-color: #573038;
}

/*FUENTES PARA TEXTO CARROUSEL */
@font-face {
/* Aqui el nombre identificador (entre comillas dobles) */
font-family: "FuenteDatosGruposTeatro";
src: url('fuentesPequesFestGrupos/Gambarino-Regular.woff2') format("woff2"); 
src: url('fuentesPequesFestGrupos/Gambarino-Regular.woff') format("woff"); 
font-display: swap;
font-style: normal;
font-weight: bold;
font-weight: 400;
color: var(--colorPF-07);
}

.contenedorObra01{margin-top: 3rem;}

.nombreObraElegida01{
font-family: FuenteDatosGruposTeatro,serif;
font-size: 3rem;
color: var(--grupo1-color);
}

.nombreGrupo01, .fechasPresentacionobra01{
font-family: FuenteDatosGruposTeatro,serif;
font-size: 1.3rem;
color: var(--colorPF-07);
}

/* Eliminar margenes */
.palabraObra01, .nombreObraElegida01, .palabraGrupo01, .nombreGrupo01, .textoSinopsis01, .sinopsisObra01{margin:0px;}
.fechasPresentacionobra01{display: flex;gap: 10px;color: var(--colorPF-07);}

/* Fuentes SERIF WEB SAFE */
.palabraObra01, .palabraGrupo01, .sinopsisObra01, .textoSinopsis01{
  font-family: Georgia, serif;font-size: 1rem;color: var(--colorPF-07);}

.textoSinopsis01{line-height: 1.7rem;}

/* +++ */

.botonCompra01{
  background-color: var(--grupo1-color);
  border: unset;
  padding: 0.8rem;
  font-family: arial;
  font-size: 1.15rem;
  text-decoration: unset;
  color: white;
  display: block;
  border-radius: 8px;
  margin-top: 0.5rem;
}

.barra00x{
  width: 100%;
  height: 0.35rem;
  background-color: black;
  margin: 4px;
}

.botonCompra01:hover{
  filter: saturate(10%);
}

/* GRUPOS DE TEATRO */
.tituloGruposElegidos2025{
font-family: arial;
font-size: 1.5rem;
color: var(--colorPF-07);
}

.conjuntoGrupos00{
display: flex;
gap: 5px;
/* flex-direction: row; */
flex-flow: wrap;
justify-content: center;
}

.conjuntoGrupos00 a[href]{
font-family: Arial;
    font-size: 1.30rem;
color: black;
padding: 20px 13px 26px 14px;
border-radius: 10px;
text-decoration: none;
line-height: 1.4rem;
width: 97%;
}

@media (min-width: 640px){

.conjuntoGrupos00 a[href]{
justify-content: flex-start;
align-items: stretch;
width: 23%;}

}

.Irgrupo01{background-color: #e3bfd1;}
.Irgrupo02{background-color: #a0dca2;}
.Irgrupo03{background-color: #b5a5ca;}
.Irgrupo04{background-color: #e0de82;}

.Irgrupo01:hover, 
.Irgrupo02:hover, 
.Irgrupo03:hover, 
.Irgrupo04:hover{
  filter: saturate(200%);
}


.irAnombreGrupo01, .irAnombreGrupo02, .irAnombreGrupo03, .irAnombreGrupo04{
font-family: Arial;
font-size: 0.91rem;
}

 * {box-sizing: border-box;}
  /* Ocultar scrollbars */
  *::-webkit-scrollbar,
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-thumb {
    width: 0;
    background: transparent;
  }

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

/* Contenedor de cada carrousel
- Ajustarse a todo el ancho de ventana */
  .carouselgrupo1, .carouselgrupo2 {
    width: 100%;
/* Para que no se monten secciones. Sino que estan uno encima del otro  */
/*    position: relative;*/
    overflow: hidden;
  }

  .carousel__viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    position: relative;
  }

  .carousel__slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
  }

  .carousel__navigation-list {
    display: flex;
    justify-content: center;
    gap: 2rem;
/*    margin-top: 1rem;*/
    padding: 0;
  }

  .carousel__navigation-button {
  width: 1.5em;
  height: 1.5em;
  background-color: var(--grupo1-color);
  /*  border: 2px solid #ccc;*/
  border-radius: 50%;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  }