/*
 * style.ds.css — Overrides do Design System "Luxury Dark"
 * Carrega DEPOIS de style.css para sobrescrever seletores específicos.
 *
 * Para REVERTER: remover este <link> do HTML.
 */

/* === BODY BASE === */
body {
    background: var(--bg);
    color: var(--text);
}

/* === NAV — glassmorphism adaptável ao tema === */
.nav {
    background: var(--nav-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
}

/* === HERO === */
.hero::before {
    /* Remove o ruído do original, substitui por gradiente sutil */
    background-image: radial-gradient(ellipse at 60% 40%, rgba(197, 164, 126, 0.06) 0%, transparent 60%);
    opacity: 1;
}

/* === BUTTONS === */
.btn-primary {
    background: var(--accent);
    color: #050505;
    border-color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    box-shadow: var(--glow-accent);
}

/* CTA pulse animation */
@keyframes cta-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(197, 164, 126, 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(197, 164, 126, 0);
    }
}

.btn-primary.btn-lg {
    animation: cta-pulse 3s ease-in-out infinite;
}

.btn-outline {
    border-color: var(--glass-border);
    color: var(--text-muted);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* === GLASS CARD (depoimentos) === */
.testimonial-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(197, 164, 126, 0.3);
    /* #1 — Autoridade editorial: radius sharp nos cards */
    border-radius: 0.5rem;
}

/* === SERVICE CARDS — tratamento editorial sólido === */
.service-card {
    border-radius: 0.5rem;
    border: none;
    border-left: 2px solid var(--accent);
    background: var(--surface);
    /* adapta ao tema */
    transition: background var(--dur) var(--ease), border-left-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.service-card:hover {
    background: var(--bg-alt);
    /* hover: levemente mais claro/escuro conforme tema */
    border-left-color: var(--accent-dark);
    box-shadow: var(--glow-accent);
}

/* === FOOTER === */
.footer {
    background: var(--bg);
    border-top: 1px solid var(--glass-border);
}

/* === SECTION TAGS === */
.section-tag {
    color: var(--accent);
    letter-spacing: 0.25em;
}

/* === BLOG CARDS === */
.blog-card {
    border-color: var(--glass-border);
    background: transparent;
}

.blog-card:hover {
    background: var(--glass-bg);
}

/* === FOTO REAL (substituiu photo-placeholder) === */
.about-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 520px;
    object-fit: cover;
    object-position: top center;
    border-radius: 0.5rem;
    display: block;
}

/* === TRUST BAR === */
.trust-bar {
    background: var(--bg-alt);
    border-color: var(--glass-border);
}

/* === CTA FINAL === */
.cta-final {
    background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg) 100%);
    position: relative;
}

.cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(197, 164, 126, 0.06) 0%, transparent 65%);
    pointer-events: none;
}

/* === HERO CORNER DECORATION === */
.hero-corner {
    color: rgba(197, 164, 126, 0.06);
}

/* === FORM INPUTS === */
.form-input,
.form-textarea,
.form-select {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text);
    border-radius: 0.5rem;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(197, 164, 126, 0.15);
}

/* === FAQ === */
.faq-item {
    border-color: var(--glass-border);
}

.faq-list {
    border-color: var(--glass-border);
}

/* === MARQUEE (Faixa em Movimento) === */
.marquee-section {
    padding: var(--s-16) 0;
    background-color: var(--bg-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.marquee-container {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 4rem;
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: 4rem;
    min-width: 100%;
    animation: scroll-marquee 30s linear infinite;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    /* #8 — texto dourado em vez de branco semi-transparente */
    color: var(--accent);
    opacity: 0.35;
    white-space: nowrap;
}

@keyframes scroll-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 4rem));
    }
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .marquee-content {
        animation-play-state: paused;
    }
}

/* #10 — letter-spacing da section-tag reduzido em mobile para evitar overflow */
@media (max-width: 480px) {
    .section-tag {
        letter-spacing: 0.12em;
    }
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    opacity: 0.4;
}