@import url(https://fonts.googleapis.com/css?family=Montserrat:500);

/* El artículo que contiene los acordeones */
.bloque-acordeon,
#comentarios_de_la_obra {
  display: block;         /* que se comporte como un bloque normal */
  width: 100%;            /* ocupa todo el ancho disponible */
  height: auto !important; /* altura automática según contenido */
  overflow: visible;      /* dejar que crezca (no recortar) */
  box-sizing: border-box; /* que padding/border no sumen raro */
}

.acordeon-container [data-accordion-element-content] {
	max-height: 0;              /* cerrado */
  	overflow: hidden;           /* oculta contenido mientras se anima */
  	transition: max-height 0.4s ease-in-out;
  	background: #F0EEEE;
  	box-sizing: border-box;
}

/* cuando está abriendo */
.acordeon-container .opening [data-accordion-element-content] {
  transition: max-height 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

.acordeon-container .selected [data-accordion-element-content] {
	/* height: auto !important; valor alto que permite crecer */
  	padding: 1rem 1.25rem;         /* padding normal */
  	overflow: hidden;
}

h1[data-accordion-element-trigger] {
  white-space: nowrap;       /* evita que haga salto de línea */
  overflow: hidden;          /* oculta el exceso si es más largo */
  text-overflow: ellipsis;   /* agrega "..." si se corta */
  font-size: clamp(1rem, 2.5vw, 1.5rem); /* ajusta el tamaño según el ancho */
}

/* suaviza transform y reserva el origen arriba */
.acordeon-container .card {
	margin: 0; /* elimina márgenes entre tarjetas */
  	transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
  	margin-bottom 0.8s cubic-bezier(0.25, 1, 0.5, 1);
	transform-origin: top center; /* crecerá hacia abajo */
}

.acordeon-container .card.active {
  animation: bounceOpen 0.8s ease-out;
}

.acordeon-container article {
	position: relative;
  	transition: all 0.3s;
  	background: #E8EAF6;
}

/* quitamos cualquier scale fijo desde CSS; lo Aplicaremos por JS dinámicamente */
article .selected {
  transform: none;
  position: relative; /* ayuda a controlar stacking */
  z-index: 2;
}

.acordeon-container h1 {  
	font-size: 1.1rem !important;
  	color: #fff;
  	letter-spacing: normal;
	text-transform: none;
  	font-weight: normal;
  	position: relative;
  	padding: 1.25rem 4.688rem 1.25rem 0.8rem;
  	line-height: 1.875rem;
  	background: #000;
  	overflow: hidden;
  	transition: background 0.3s;
}

.acordeon-container h1:hover,
.acordeon-container .selected h1 {
  color: #FFF;
  cursor: pointer;
  background: #D20000;
}

.acordeon-container h1:before,
.acordeon-container h1:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -0.063rem;
  margin-right: 1.875rem;
  width: 1.25rem;
  height: 0.125rem;
  background: #FFF;
  transition: transform 0.3s;
}

.acordeon-container h1:before {
  transform: rotate(0deg);
  animation: close-line-one-in 0.8s forwards;
}

.acordeon-container .selected h1:before {
  animation: close-line-one-out 0.8s forwards;
}

.acordeon-container h1:after {
  transform: rotate(90deg);
  animation: close-line-two-in 0.8s forwards;
}

.acordeon-container .selected h1:after {
  animation: close-line-two-out 0.8s forwards;
}

/* asegurar que el contenido no se desborde y que la animación de altura sea suave */
.acordeon-container .content {
	opacity: 0;
	transform: translateY(1.25rem);
  	transition: max-height 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.8s ease,
              transform 0.8s ease;
  	padding: 0 !important;
	margin: 0 !important;
  	overflow: hidden;
  	will-change: max-height, opacity, transform;
}

.acordeon-container .selected .content {
  transform: translateY(0) !important;
  opacity: 1;
}

/* padding del contenido cuando está seleccionado */
.acordeon-container .selected [data-accordion-element-content] {
  padding: 1rem 1.25rem;
  overflow: hidden;
}

	
	
	
.acordeon-container .contenido_acordeon {
  	font-family: "Montserrat", Arial, sans-serif;
  	font-size: 1rem;
  	color: #000;
  	text-align: justify;
  	text-transform: none;
	padding-bottom: 0.5rem;
  	padding: 1rem;
  	line-height: 1.5rem;
  	background: #F0EEEE;
}

.contenido_acordeon p {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 0.8rem;
    color: #000;
	font-weight: normal;
    text-align: justify;
    letter-spacing: 1px;
    text-transform: none;
    line-height: 1rem;
	margin: 0.625rem;
}

.contenido_acordeon h3 {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 0.9rem;
    color: #000;
    text-align: center;
    letter-spacing: 1px;
    text-transform: none;
    line-height: 1rem;
	margin-top: 0.2rem;
	padding: 0;
}

.contenido_acordeon h4 {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 0.9rem;
    color: #000;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2rem;
    margin-top: 0.2rem;
    padding: 0;
}
	
	

/* Animaciones */
@keyframes close-line-one-out {
  0%, 50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(50px);
  }
  76% {
    transform: translateX(50px) translateY(50px);
  }
  100% {
    transform: rotate(45deg);
  }
}

@keyframes close-line-one-in {
  0%, 20% {
    transform: rotate(45deg);
  }
  60% {
    transform: translateX(50px) translateY(50px) rotate(45deg);
  }
  61% {
    transform: translateX(50px);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes close-line-two-out {
  0%, 50% {
    transform: rotate(90deg);
  }
  75% {
    transform: translateY(-50px) rotate(90deg);
  }
  76% {
    transform: translateY(-50px) translateX(50px) rotate(90deg);
  }
  100% {
    transform: rotate(135deg);
  }
}

@keyframes close-line-two-in {
  0% {
    transform: rotate(135deg);
  }
  50% {
    transform: translateY(-50px) translateX(50px) rotate(135deg);
  }
  51% {
    transform: translateY(-50px) rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes bounceOpen {
  0%   { transform: scale(1); }
  70%  { transform: scale(1.1); }
  90%  { transform: scale(1.05); }
  100% { transform: scale(1.1); }
}



/**************************/
/* MEDIA QUERY */
/**************************/

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


}

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

}

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

}