.cuadro { width: 100%; overflow: hidden; margin-top:-30px; }
.cuadro-header { display: flex; background-color: #333; color: white; padding: 3px 15px 0px 15px; text-align: left; cursor: pointer;  align-items: center; position: relative; }
.cuadro-header::after { content: ""; border: solid white; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; margin-left: 10px; transform: rotate(45deg); transition: transform 0.3s ease; }
input[type="checkbox"]:checked + label.cuadro-header::after { transform: rotate(-135deg); }
input[id^="toggle"] { display: none; }
input[id^="toggle"]:checked ~ .cuadro-content { max-height: 600px; padding-bottom: 30px; }
.cuadro-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 15px; background-color: #fff; display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex-direction: column; }
video { height: 100% !important; max-width: 800px; width: auto !important; }
.share-buttons { display: flex; flex-direction: row; justify-content: center; gap: 10px; margin-top: 30px; }
.share-buttons button { font-size: 32px; color: #555; }
.share-text { text-align: center; margin-bottom: 10px; }

.cuadro-header::after { content:""; border: solid white; border-width: 0 3px 3px 0; display:inline-block; padding:3px; margin-left:10px; transform:rotate(45deg); transition:transform 0.3s ease; }

/* Seleccionamos checkbox checked y buscamos su label FOR correspondiente */
input[id^="toggle"]:checked ~ .cuadro-header::after,
input[id^="toggle"]:checked + .cuadro-header::after {
  transform: rotate(-135deg);
}