/* ====================================================================
 * Sprint 34 v2 - Google OAuth Social Login (rediseñado)
 * Brand DedicaQR: #C9184A (primary), #D4A24C (gold)
 * ==================================================================== */

.dq-gauth-card {
    position: relative;
    background: linear-gradient(145deg, #FFF7F9 0%, #FFFFFF 50%, #FDF6EC 100%);
    border: 1.5px solid rgba(201, 24, 74, 0.15);
    border-radius: 18px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 18px rgba(201, 24, 74, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: dqGauthFadeIn .5s ease-out;
}
.dq-gauth-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(212, 162, 76, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
@keyframes dqGauthFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.dq-gauth-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.15rem; position: relative; z-index: 1; }
.dq-gauth-sparkle { font-size: 1.75rem; line-height: 1; flex-shrink: 0; animation: dqGauthSparkle 2.5s ease-in-out infinite; }
@keyframes dqGauthSparkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.1) rotate(8deg); } }
.dq-gauth-header h3 { margin: 0 0 0.15rem 0; font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; color: #1F1F1F; line-height: 1.25; }
.dq-gauth-header p { margin: 0; font-size: 0.875rem; color: #6B7280; line-height: 1.35; }

.dq-gauth-btn {
    display: flex; align-items: center; gap: 0.875rem; width: 100%;
    padding: 1rem 1.25rem;
    background: #FFFFFF; color: #1F1F1F;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1.02rem; font-weight: 700;
    text-decoration: none;
    border: 1.5px solid #E5E7EB; border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all .22s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer; position: relative; z-index: 1;
}
.dq-gauth-btn:hover {
    background: #FFFFFF; border-color: #C9184A;
    box-shadow: 0 8px 24px rgba(201, 24, 74, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px); text-decoration: none;
}
.dq-gauth-btn:hover .dq-gauth-btn__arrow { transform: translateX(4px); color: #C9184A; }
.dq-gauth-btn:active { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201, 24, 74, 0.14); }
.dq-gauth-btn__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #F8F9FA; border-radius: 50%; flex-shrink: 0; }
.dq-gauth-btn__text { flex: 1; text-align: left; }
.dq-gauth-btn__arrow { font-size: 1.2rem; color: #9CA3AF; transition: transform .22s ease, color .22s ease; flex-shrink: 0; }

.dq-gauth-perks { list-style: none; margin: 1.25rem 0 0 0; padding: 0; display: grid; gap: 0.75rem; position: relative; z-index: 1; }
.dq-gauth-perks li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; }
.dq-gauth-perk-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, #FFE5EE 0%, #FDF6EC 100%); border-radius: 10px; font-size: 1.15rem; flex-shrink: 0; }
.dq-gauth-perks li > div { flex: 1; line-height: 1.35; }
.dq-gauth-perks li strong { display: block; color: #1F1F1F; font-size: 0.92rem; font-weight: 700; margin-bottom: 0.1rem; }
.dq-gauth-perks li small { display: block; color: #6B7280; font-size: 0.8rem; font-weight: 400; }

.dq-auth-divider { position: relative; text-align: center; margin: 1.75rem 0 1.5rem; color: #9CA3AF; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; }
.dq-auth-divider::before, .dq-auth-divider::after { content: ''; position: absolute; top: 50%; width: calc(50% - 110px); height: 1px; background: linear-gradient(to right, transparent, #E5E7EB 50%, transparent); }
.dq-auth-divider::before { left: 0; }
.dq-auth-divider::after { right: 0; transform: scaleX(-1); }
.dq-auth-divider span { padding: 0 1rem; background: transparent; text-transform: lowercase; }

@media (max-width: 520px) {
    .dq-gauth-card { padding: 1.25rem; border-radius: 14px; }
    .dq-gauth-header h3 { font-size: 1.1rem; }
    .dq-gauth-header p { font-size: 0.825rem; }
    .dq-gauth-btn { padding: 0.875rem 1rem; font-size: 0.95rem; gap: 0.75rem; }
    .dq-gauth-btn__icon { width: 32px; height: 32px; }
    .dq-gauth-perk-icon { width: 32px; height: 32px; font-size: 1rem; }
    .dq-gauth-perks li strong { font-size: 0.875rem; }
    .dq-gauth-perks li small { font-size: 0.75rem; }
    .dq-auth-divider::before, .dq-auth-divider::after { width: calc(50% - 95px); }
}