

.vista-versos {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.vista-versos .cabecera-secciones {
  background-image: linear-gradient(
    to bottom,
    var(--color-fondo) 44%,
    rgb(var(--versos-fondo-cabecera)) 100%
  );
  background-color: transparent;
}

.versos {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cabecera-acto-detalle {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: rgb(var(--versos-fondo-cabecera));
}

.cabecera-acto-detalle__titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-regular) 0;
  gap: var(--espacio-medio);
  width: 100%;
  height: 242.5px; 
}

.cabecera-acto-detalle__textos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; 
  text-align: center;
}

.cabecera-acto-detalle__logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.cabecera-acto-detalle__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--espacio-extra-largo) 0 var(--espacio-largo); 
  gap: var(--espacio-largo);
  width: 100%;
}

.cabecera-acto-detalle__subtitulo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: visible;
}

.cabecera-acto-detalle__ondulado {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.cabecera-acto-detalle--versos .cabecera-acto-detalle__ondulado path {
  stroke: var(--color-secundario);
}

.cabecera-acto-detalle--pliegues .cabecera-acto-detalle__ondulado path {
  stroke: var(--color-primario);
}

.cabecera-acto-detalle__pill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: var(--espacio-extra-corto) var(--espacio-regular) var(--espacio-corto) var(--espacio-regular);
  background-color: rgb(var(--versos-fondo-cabecera));
  border: solid var(--color-secundario) var(--stroke-medio);
  border-radius: var(--espacio-largo);
}

.cabecera-acto-detalle--versos .cabecera-acto-detalle__pill .texto-cuerpo-electro {
  color: var(--color-secundario);
}

.cabecera-acto-detalle--pliegues .cabecera-acto-detalle__pill .texto-cuerpo-electro {
  color: var(--color-primario);
}

.cabecera-acto-detalle__link {
  text-align: center;
}

.cabecera-acto-detalle--versos .cabecera-acto-detalle__link,
.cabecera-acto-detalle--versos .cabecera-acto-detalle__link:hover,
.cabecera-acto-detalle--versos .cabecera-acto-detalle__link:focus-visible {
  color: var(--color-primario);
}

.cabecera-acto-detalle--pliegues .cabecera-acto-detalle__link,
.cabecera-acto-detalle--pliegues .cabecera-acto-detalle__link:hover,
.cabecera-acto-detalle--pliegues .cabecera-acto-detalle__link:focus-visible {
  color: var(--color-secundario);
}

.cabecera-acto-detalle .cabecera-acto-detalle__link:hover,
.cabecera-acto-detalle .cabecera-acto-detalle__link:focus-visible {
  text-decoration: underline;
  border-bottom-color: transparent;
}

.versos-poema {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-regular);
  padding: var(--espacio-regular) var(--espacio-largo) var(--espacio-gigante);
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgb(var(--versos-fondo-cabecera)) 50%,
    var(--color-fondo) 100%
  );
  user-select: none;
  -webkit-user-select: none;
}

.versos-poema__titulo {
  display: flex;
  width: 100%;
}

.versos-poema__titulo .texto-titulo-secundario-electro {
  width: fit-content;
  max-width: 100%;
  padding-bottom: var(--espacio-extra-corto);
  border-bottom: var(--stroke-decorados) solid rgb(var(--versos-poema-titulo-linea));
  color: rgb(var(--versos-poema-titulo));
}

.versos-poema__scroll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-regular);
  width: 100%;
}

.versos-poema__cuerpo {
  white-space: pre-wrap;
  color: var(--color-principal);
  width: 100%;
}

.versos-poema__credito {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: var(--espacio-medio);
}

.mini-pill--versos {
  display: inline-flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding: var(--espacio-extra-corto) var(--espacio-regular); 
  border: var(--stroke-delgado) solid var(--color-ornamentos);
  border-radius: var(--espacio-largo);
  color: var(--color-alto-contraste-claro);
}
