/* /apoyar/ — extraCSS. Ko-fi iframe + playlists. JS: apoyar-kofi.js. */
.color-primario { color: var(--color-primario); }
.color-secundario { color: var(--color-secundario); }
.color-acento { color: var(--color-acento); }

.apoyar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32px 80px;
}

.apoyar__cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.apoyar__textos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-medio);
  width: 100%;
}

.apoyar__titulo {
  color: var(--color-secundario);
  text-align: center;
}

.apoyar__descripcion,
.apoyar__texto {
  color: var(--color-principal);
  text-align: center;
}

.apoyar__kofi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-medio);
  width: 100%;
}

.apoyar__kofi-invito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-corto);
  width: 100%;
}

.apoyar__flecha {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: var(--color-alto-contraste-claro);
  -webkit-mask: url('/img/flecha-abajo.svg') center / contain no-repeat;
  mask: url('/img/flecha-abajo.svg') center / contain no-repeat;
}

.apoyar__kofi-marco {
  display: block;
  width: 100%;
  height: 511px;
  margin-inline: auto;
  overflow: auto;
  background: var(--color-fondo);
  border: none;
  border-radius: var(--radio-mediano);
  transition: height 0.4s ease;
}

.apoyar__kofi-marco.es-activo {
  height: 712px;
}

.apoyar__musica {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.apoyar__cierre {
  color: var(--color-acento);
  text-align: center;
}