.ing-estrella1.empty { color: var(--mainColor-50); }
.ing-estrella1.half { background: linear-gradient(90deg, var(--yellow) 50%, var(--mainColor-50) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.ing-estrella1.full { color: var(--yellow); }
.ing-insignia3.empty { color: var(--mainColor-50); }
.ing-insignia3.half { background: linear-gradient(90deg, var(--gold) 50%, var(--mainColor-50) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.ing-insignia3.full { color: var(--gold); }

.tarjeta { min-height: 220px; height: 220px; max-height: 220px; min-width: 220px; width: 220px; max-width: 220px; background: var(--mainColor-25); border-radius: 1rem; margin-bottom: 1rem; }
.tarjeta label { font-family: 'indivisa-text-italic'; }

.timeline-item { padding: 1em; margin: 0 0.5em 0 1em; position: relative; border-left: 2px solid var(--mainColor); width: 90%; }
.timeline-item:last-child { border-image: linear-gradient(to bottom, var(--mainColor) 60%, rgba(var(--mainColor), 0)) 1 100%; }
.timeline-item > .bullet { width: 28px; height: 28px; top: 1em; left: -13px; background: var(--white); display: flex; justify-content: center; align-items: center; }
.timeline-item > .bullet > .figura { width: 25px; height: 25px; background: var(--mainColor); clip-path: polygon(70% 0%, 100% 50%, 70% 100%, 0% 100%, 25% 50%, 0% 0%); }
.timeline-item > div > .fecha { height: 25px; background: var(--mainColor-75); color: var(--white); clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 5% 50%, 0% 0%); padding: 0 1.5em 0 1em; }