[html]<style>    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap');

    .fallen-c {
        width: 380px;
        margin: 10px auto;
        display: flex;
        position: relative;
        flex-direction: column;
        gap: 10px;
        font-size: 12px;
        font-family: 'Quicksand', sans-serif;
        color: var(--accent);
        line-height: 15px;
        --wht: #fff;
        --corners: 20px;
        --corners2: 50%;
        --shdw: 0 1px 2px hsla(0, 0%, 0%, .4);
        --grdnt: linear-gradient(to right, var(--bckgrnd2) 50%, var(--bckgrnd) 50%);
    }

    .fallen-c[data-mode="light"] {
        --bckgrnd: #fff;
        --bckgrnd2: #e2e2e2;
    }

    .fallen-c[data-mode="dark"] {
        --bckgrnd: #e2e2e2;
        --bckgrnd2: #fff;
    }

    .fallen-c br {
        display: none;
    }

    .fallen-c > a {
        position: absolute;
        top: calc(25% - 28.92px);
        right: -44px;
        text-align: center;
        color: var(--accent2);
        text-decoration: none;
        text-transform: uppercase;
        transform: rotate(90deg);
        transition: 1s;
    }

    .fallen-c input[type="checkbox"]:checked ~ a {
        transition: 1s;
        top: calc(50% - 28.92px);
    }

    .fallen-c > span {
        font-size: 14px;
        font-weight: bold;
        color: var(--accent2);
    }

    .fallen-crp {
        padding: 15px 25px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        align-items: center;
        gap: 15px;
        color: var(--wht);
        z-index: 1;
    }

    .fallen-crp::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--corners);
        z-index: -1;
        background-image: var(--grdnt);
        background-size: 200% 100%;
        backdrop-filter: blur(5px);
        animation: timestop;
        box-shadow: var(--shdw);
    }

    .fallen-c input[type="checkbox"]:checked ~ .fallen-crp::before {
        animation: movin 30s linear forwards 1;
    }

    @keyframes timestop {
        to { background-position: 0 0; }
    }

    @keyframes movin {
        0% { background-position: 0 0; }
        100% { background-position: -100% 0;}
    }

    .fallen-crp img {
        --size: 50px;
        width: var(--size);
        height: var(--size);
        border-radius: var(--corners2);
        object-fit: cover;
        box-shadow: var(--shdw);
    }

    .fallen-crp label {
        flex-grow: 1;
        cursor: pointer;
        color: currentColor !important;
    }

    .fallen-crp label i{
        --size: 35px;
        width: var(--size);
        height: var(--size);
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--accent2);
        border-radius: var(--corners2);
        font-size: 14px;
        box-shadow: var(--shdw);
    }

    .fallen-c input[type="checkbox"]:checked ~ .fallen-crp label i::before {
        content:'\f04c';
    }

    /* TEMPORIZADOR */
    .fallen-t {
        padding: 0 5px;
        background-color: var(--accent2);
        border-radius: var(--corners);
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        box-shadow: var(--shdw);
    }

    .fallen-t .c {
        --size: 30px;
        width: var(--size);
        height: var(--size);
        display: inline-block;
        line-height: 30px;
        overflow: hidden;
        text-align: center;
    }

    .fallen-t .c::after {
        display: block;
    }

    .fallen-t .seg::after {
        content: '00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59';
        animation: timestop;
    }

    .fallen-t .min::after {
        content: '00 01';
        animation: timestop;
    }

    @keyframes timestop {to { transform: translateY(0);}}
    @keyframes time {to { transform: translateY(-100%);}}

    .fallen-c input[type="checkbox"]:checked ~ .fallen-crp .fallen-t .seg::after {
        animation: time  60s steps(60) backwards 2;
    }

    .fallen-c input[type="checkbox"]:checked ~ .fallen-crp .fallen-t .min::after {
        animation: time  120s steps(2) backwards 1;
    }

    /* FIN DEL TEMPORIZADOR */
    .fallen-in {
        background-color: var(--accent2);
        border-radius: var(--corners);
        padding: 15px 10px;
        box-sizing: border-box;
        text-align: center;
        opacity: 0;
        transition: 1s;
        line-height: 1.5;
        box-shadow: var(--shdw);
    }

    .fallen-in span {
        font-style: italic;
        text-decoration: underline;
        opacity: .8;
    }

    .fallen-c input[type="checkbox"]:checked ~ .fallen-in {
        opacity: 1;
        transition: 1s;
    }</style>

<div class="fallen-c" data-mode="light" style="--accent:#fff;--accent2:#9A93E0;">
<input type="checkbox" id="check" hidden>
<span n>Nombre_Persona</span>
<div class="fallen-crp">
<img src="https://i.imgur.com/ejd6HFH.jpg">
<label for="check"><i class="fa-solid fa-play"></i></label>
<div class="fallen-t"><div class="c min"></div>:<div class="c seg"></div></div></div>
<div class="fallen-in">Lorem <span>(sonidos inaudibles)</span> ipsum dolor sit amet, consectetur adipisicing elit. Quos sed, pariatur. Molestiae possimus nihil <span>(sonidos inaudibles)</span> quam animi reprehenderit.</div></div>

[/html]

[html]<style>

.sample-html-details[open] .sample-html-summary:before {
  content: "🙀";
  -webkit-animation: cat 0.2s cubic-bezier(0.01, 0.29, 0.38, 2.37);
          animation: cat 0.2s cubic-bezier(0.01, 0.29, 0.38, 2.37);
}
.sample-html-summary {
  list-style-image: none;
  cursor: pointer;
  padding-left: 60px;
  position: relative;
}
.sample-html-summary:before {
  content: "😼";
  position: absolute;
  top: calc(50% - 18px);
  left: 0;
  font-size: 2rem;
}
.sample-html-summary:focus {
  outline: none;
}
.sample-html-summary::-webkit-details-marker {
  display: none;
}

.code, .sample-title {
  font-family: "Fira Mono", monospace;
}
.code-details {
  color: #783F8E;
}
.code-summary {
  color: #E36588;
}

.speech {
  display: inline-block;
  margin: 20px 0 0 7px;
  padding: 20px;
  background: #FFF;
  border-radius: 0 10px 10px 10px;
  position: relative;
  -webkit-animation: speech 0.3s cubic-bezier(0.01, 0.29, 0.38, 2.37);
          animation: speech 0.3s cubic-bezier(0.01, 0.29, 0.38, 2.37);
  transform-origin: top left;
}
.speech:before {
  content: "";
  position: absolute;
  border: 8px solid transparent;
  top: -16px;
  left: 0;
  border-bottom-color: #FFF;
}

:root {
  font-size: 16px;
}

@-webkit-keyframes speech {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes speech {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes cat {
  50% {
    transform: scale(1.1);
  }
}
@keyframes cat {
  50% {
    transform: scale(1.1);
  }
}</style>
   
    <div class="sample-html">
      <details class="sample-html-details">
        <summary class="sample-html-summary">What did the cat says when the mouse got away?</summary>
        <div class="speech">You have got to be kitten me!</div>
      </details>

<details>
  <summary>
    What did the cat says when the mouse got away?
  </summary>
  You have got to be kitten me!
</details>

  </div>[/html]