:root {
  --color-one:            #07162d;
  --color-two:            #9e1428;
  --color-three:          #ffcc00;
  --color-background:     #f5f5f5;
  --color-success:        #4caf50;
}

body {
  font-family: 'Barlow', sans-serif;
  background-color: var(--color-background);
}

/* --- SCROLLBAR PERSONALIZADO --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--color-one);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-two);
}

/* --- BOTÓN VOLVER ARRIBA --- */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--color-one);
    color: var(--color-three);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 99;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    background: var(--color-two);
    transform: translateY(-3px);
}

/* --- ANIMACIONES PARA EL TOAST DE PRUEBA SOCIAL --- */
#social-proof-toast {
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translateX(-150%);
    opacity: 0;
}

#social-proof-toast.show {
    transform: translateX(0);
    opacity: 1;
}

@media (max-width: 640px) {
    #social-proof-toast.show {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* --- ESTILOS PARA EL POPUP DE SALIDA --- */
#exit-intent-popup.hidden {
    display: none;
}

#popup-overlay {
    background: rgba(7, 22, 45, 0.85);
}

/* --- ANIMACIÓN DE PULSO PARA PLAY --- */
@keyframes pulse-play {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}
.play-button-overlay {
    animation: pulse-play 2s infinite;
}

/* --- ANIMACIÓN BARRA DE PROGRESO --- */
.progress-animation {
    transition: width 1s linear;
}