cat header.css
#qrModal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.7);
align-items: center;
justify-content: center;
z-index: 1000;
}
#qrModal .modal-content {
background: #fff;
padding: 20px;
border-radius: 10px;
max-width: 300px;
margin: auto;
position: relative;
border: 5px solid;
border-image-source: linear-gradient(rgb(52, 23, 170), rgb(156, 134, 249));
border-image-slice: 1;
background-position: center -80px;
}


.new-badge {
background: linear-gradient(135deg, #00d4aa, #00b894);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3);
animation: wiggle 2s ease-in-out infinite;
color: white;
font-size: 11px;
letter-spacing: 0.5px;
font-weight: 600;
overflow: hidden;
}

.new-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shine 3s infinite;
}

.new-badge-pulse {
background: linear-gradient(45deg, #ff3b39, #ff1717);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
animation: pulse 1.5s ease-in-out infinite;
font-weight: 700;
letter-spacing: 0.8px;
font-size: 11px;
color: white;
height: fit-content;
padding: 0 10px;
}

/* Play button tooltip */
.play-button-with-badge .qr-tooltip {
display: none;
position: absolute;
background: #fff;
border-radius: 10px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
top: 110%;
left: 50%;
transform: translateX(-50%);
width: 280px;
z-index: 50;
}

.play-button-with-badge:hover .qr-tooltip,
.play-button-with-badge .qr-tooltip:hover {
display: block;
}

/* Animations */
@keyframes pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
}
}

@keyframes wiggle {
0%, 100% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(-3deg) scale(1.02); }
75% { transform: rotate(3deg) scale(1.02); }
}

@keyframes shine {
0% { left: -100%; }
100% { left: 100%; }
}

/* Botón con Animación de Pulso */
.play-button-pulse {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #422241, #ff542a);
color: white;
text-decoration: none;
padding: 12px 24px;
border-radius: 30px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
animation: pulse-button 2s infinite;
text-transform: uppercase;
letter-spacing: 0.5px;
}

@keyframes pulse-button {
0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}

.play-button-pulse:hover {
transform: translateY(-2px);
}

.play-button-with-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #4040ff, #ffc107);
color: white !important;
text-decoration: none;
padding: 12px 20px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
height: 29px;
margin-left: 1rem;
}

.play-button-with-badge:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

.badge {
position: absolute;
top: -8px;
right: -8px;
background: #00d4aa;
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
font-weight: bold;
animation: wiggle-badge 1s infinite;
}

@keyframes wiggle-badge {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}

/* Icono de Play Store personalizado */
.custom-play-icon {
width: 20px;
height: 20px;
margin-right: 10px;
fill: currentColor;
}

.qr-tooltip {
display: none;
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 16px 12px 12px 12px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 9999;
text-align: center;
width: max-content;
max-width: 200px;
pointer-events: auto;
clip-path: polygon(
50% 0,
100% 8px,
100% 100%,
0 100%,
0 8px
);
}

/* Línea gradiente animada debajo del texto (color por defecto verde) */
a.unete-whatsapp {
position: relative;
display: inline-block;
font-weight: 600;
border-radius: 7px;
overflow: hidden;
}

a.unete-whatsapp::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, #25D366, #128C7E, #25D366);
background-size: 200% 100%;
animation: gradient-move 2s linear infinite;
transform-origin: right;
transform: scaleX(0);
transition: transform 0.3s ease;
pointer-events: none;
}

a.unete-whatsapp:hover::after,
a.unete-whatsapp:focus::after {
transform-origin: left;
transform: scaleX(1);
}

/* Variante especial: Youtube */
a.unete-whatsapp.youtube::after {
background: linear-gradient(90deg, #cc2e2e, #ff4d4d, #cc2e2e);
}

@keyframes gradient-move {
0% { background-position: 0 0; }
100% { background-position: 200% 0; }
}