/* ============================================================
   Edeal & Buy — Design system de marca
   Paleta oficial: #51834d (primary) / #355734 (primary-dark)
                   #8aba92 (secondary) / #98bc7b (accent)
   ============================================================ */

:root {
    --brand-primary: #51834d;
    --brand-primary-dark: #355734;
    --brand-secondary: #8aba92;
    --brand-accent: #98bc7b;

    --brand-primary-rgb: 81, 131, 77;
    --brand-primary-dark-rgb: 53, 87, 52;
    --brand-secondary-rgb: 138, 186, 146;
    --brand-accent-rgb: 152, 188, 123;

    --brand-bg: #f7faf7;
    --brand-border: #e3ece3;
    --brand-text: #16241a;
    --brand-text-muted: #5b6b60;

    --brand-shadow-sm: 0 2px 8px rgba(53, 87, 52, 0.08);
    --brand-shadow-md: 0 8px 24px rgba(53, 87, 52, 0.12);
    --brand-shadow-lg: 0 16px 40px rgba(53, 87, 52, 0.16);

    --brand-radius-sm: 10px;
    --brand-radius-md: 14px;
    --brand-radius-lg: 20px;

    --brand-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --brand-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Animaciones reutilizables ===== */
@keyframes brandFadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes brandFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes brandScaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

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

.brand-animate-in {
    /* "backwards" (no "both"): mantiene el keyframe 0% durante animation-delay para evitar un parpadeo,
       pero no retiene el frame final como "vigente" para siempre — con "both" el navegador considera la
       animación activa de forma permanente incluso ya terminada, forzando un contexto de apilamiento propio
       que puede atrapar contenido anidado (ej. un modal) debajo de otros elementos con z-index explícito. */
    animation: brandFadeInUp 0.5s var(--brand-ease) backwards;
}

.brand-animate-in-delay-1 { animation-delay: .05s; }
.brand-animate-in-delay-2 { animation-delay: .1s; }
.brand-animate-in-delay-3 { animation-delay: .15s; }
.brand-animate-in-delay-4 { animation-delay: .2s; }
.brand-animate-in-delay-5 { animation-delay: .25s; }
.brand-animate-in-delay-6 { animation-delay: .3s; }

/* ===== Componentes premium reutilizables ===== */
.btn-brand {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--brand-radius-sm);
    padding: 0.7rem 1.5rem;
    transition: transform 0.25s var(--brand-ease), box-shadow 0.25s var(--brand-ease), filter 0.2s ease;
    box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.28);
}

    .btn-brand:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(var(--brand-primary-rgb), 0.38);
        color: #fff;
        filter: brightness(1.03);
    }

    .btn-brand:active {
        transform: translateY(-1px);
    }

.brand-card {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-md);
    box-shadow: var(--brand-shadow-sm);
    transition: transform 0.3s var(--brand-ease), box-shadow 0.3s var(--brand-ease), border-color 0.3s ease;
}

    .brand-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--brand-shadow-md);
        border-color: var(--brand-secondary);
    }

.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary-dark);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.25);
    padding: 0.3rem 0.85rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.8rem;
}

/* Focus visible más suave y en tono de marca */
a, button, .btn, .form-control, .form-select, .form-check-input {
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(var(--brand-secondary-rgb), 0.25);
}

/* ===== Logotipo de marca (texto + degradado, sin dependencia de imágenes) ===== */
.brand-logo {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.3;
    padding-top: 0.1em;
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

    .brand-logo .bl-edeal {
        color: var(--brand-primary-dark);
    }

    .brand-logo .bl-amp {
        color: var(--brand-primary);
    }

    .brand-logo .bl-buy {
        color: var(--brand-secondary);
    }

/* Scrollbar de marca (Webkit) */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: var(--brand-bg); }
::-webkit-scrollbar-thumb {
    background: var(--brand-secondary);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }