/* =================================================================
   SITES SIMPLES CMS — tema.css v3.0
   CAMADA 3: Tema Visual — Doces RJ
   - Define cores, fontes, gradientes e decorações do tema
   - Aplica animações da animations-library.css
   - MUDA para cada cliente/projeto
   Alinhado 100% com as classes do _body.php v3.0 e main.css v3.0
   ================================================================= */

/* -----------------------------------------------------------------
   PALETA E VARIÁVEIS DO TEMA
   ----------------------------------------------------------------- */
:root {
    --primary:      #FF6B9D;
    --primary-dark: #e0558a;
    --secondary:    #FFD93D;
    --accent:       #6C5CE7;
    --dark:         #2C3E50;
    --light:        #FFF8FA;
    --gray:         #7f8c8d;
    --white:        #ffffff;

    /* Tipografia */
    --font-body:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: var(--font-body);
}

/* -----------------------------------------------------------------
   CORPO GERAL
   ----------------------------------------------------------------- */
body {
    background: var(--white);
    color: var(--dark);
    font-family: var(--font-body);
    padding-top: 100px;
}

/* -----------------------------------------------------------------
   NAVBAR
   ----------------------------------------------------------------- */
.ss-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.ss-navbar-menu li a {
    color: var(--dark);
    font-weight: 500;
}
.ss-navbar-menu li a:hover {
    background: var(--primary);
    color: var(--white);
}

.ss-navbar-toggle span { background: var(--dark); }

.ss-navbar-social a {
    background: rgba(108, 92, 231, 0.08);
    color: var(--accent);
}
.ss-navbar-social a:hover {
    background: var(--accent);
    color: var(--white);
}

/* Mobile: fundo branco no menu */
.ss-navbar-content { background: var(--white); }

/* -----------------------------------------------------------------
   HERO / CARROSSEL
   ----------------------------------------------------------------- */
.ss-slide-content h1 {
    color: var(--white);
    text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.35);
}

.ss-slide-subtitle {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}

.ss-btn-primary {
    background: var(--white);
    color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.ss-btn-primary:hover {
    background: var(--secondary);
    color: var(--dark);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.ss-carousel-btn {
    background: rgba(255, 255, 255, 0.28);
    color: var(--white);
    backdrop-filter: blur(4px);
}
.ss-carousel-btn:hover { background: rgba(255, 255, 255, 0.5); }

.ss-dot { background: rgba(255, 255, 255, 0.45); }
.ss-dot.active { background: var(--white); }

/* -----------------------------------------------------------------
   SEÇÃO: PRODUTOS
   ----------------------------------------------------------------- */
.ss-produtos { background: var(--light); }

.ss-produtos .ss-section-title { color: var(--dark); }

.ss-product-card {
    background: var(--white);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
}
.ss-product-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.ss-product-title { color: var(--dark); }
.ss-product-desc  { color: var(--gray); }

/* -----------------------------------------------------------------
   SEÇÃO: GALERIA
   ----------------------------------------------------------------- */
.ss-galeria { background: var(--white); }

.ss-galeria .ss-section-title { color: var(--dark); }

.ss-gallery-item {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* -----------------------------------------------------------------
   SEÇÃO: SOBRE
   ----------------------------------------------------------------- */
.ss-sobre { background: var(--light); }

.ss-sobre .ss-section-title { color: var(--dark); }
.ss-about-text { color: #555; }

.ss-feature-item {
    background: var(--white);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.ss-feature-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ss-feature-icon { color: var(--primary); }
.ss-feature-title { color: var(--dark); }

/* -----------------------------------------------------------------
   SEÇÃO: DEPOIMENTOS
   ----------------------------------------------------------------- */
.ss-depoimentos {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.ss-depoimentos .ss-section-title { color: var(--white); }

.ss-testimonial-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ss-testimonial-text  { color: var(--white); }
.ss-testimonial-name  { color: var(--white); }
.ss-testimonial-cargo { color: rgba(255, 255, 255, 0.75); }

/* -----------------------------------------------------------------
   SEÇÃO: CTA
   ----------------------------------------------------------------- */
.ss-cta {
    background: linear-gradient(135deg, var(--dark) 0%, #34495E 100%);
}

.ss-cta-title    { color: var(--white); }
.ss-cta-subtitle { color: rgba(255, 255, 255, 0.82); }

.ss-cta-btn {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.ss-cta-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* -----------------------------------------------------------------
   SEÇÃO: CONTATO
   ----------------------------------------------------------------- */
.ss-contato { background: var(--light); }

.ss-contato .ss-section-title { color: var(--dark); }

/* UNIDADE VISUAL: todos os cards têm o mesmo estilo */
.ss-contact-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.ss-contact-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
}

.ss-contact-icon { color: var(--primary); }
.ss-contact-card h4 { color: var(--dark); }
.ss-contact-card p  { color: var(--gray); }

/* -----------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------- */
.ss-footer {
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
    color: rgba(255, 255, 255, 0.85);
}

.ss-footer-heading { color: var(--white); }

.ss-footer-desc { color: rgba(255, 255, 255, 0.65); }

.ss-footer-links a { color: rgba(255, 255, 255, 0.72); }
.ss-footer-links a:hover { color: var(--white); }

.ss-footer-social a {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}
.ss-footer-social a:hover { background: rgba(255, 255, 255, 0.25); }

.ss-footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.55);
}
.ss-footer-bottom a { color: var(--primary); }

/* -----------------------------------------------------------------
   WHATSAPP FLUTUANTE
   ----------------------------------------------------------------- */
.ss-whatsapp-float {
    background: #25D366;
    color: var(--white);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
    animation: ss-pulse 2s ease-in-out infinite;
}
.ss-whatsapp-float:hover {
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}

/* -----------------------------------------------------------------
   ANIMAÇÕES DO TEMA
   (animações de entrada e decorativas exclusivas do Doces RJ)
   ----------------------------------------------------------------- */

/* Entrada dos elementos do slide */
.ss-carousel-slide.active .ss-slide-content h1 {
    animation: ss-fadeInUp 0.8s ease forwards;
}
.ss-carousel-slide.active .ss-slide-subtitle {
    animation: ss-fadeInUp 0.8s ease 0.18s forwards;
}
.ss-carousel-slide.active .ss-btn-primary {
    animation: ss-fadeInUp 0.8s ease 0.34s forwards;
}

@keyframes ss-fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pulso do WhatsApp (caso animations-library.css não esteja carregado) */
@keyframes ss-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}

/* Cards de produto flutuando suavemente */
.ss-product-card {
    animation: ss-floatCard 4s ease-in-out infinite;
}
.ss-product-card:nth-child(2) { animation-delay: 0.6s; }
.ss-product-card:nth-child(3) { animation-delay: 1.2s; }
.ss-product-card:nth-child(4) { animation-delay: 1.8s; }
.ss-product-card:nth-child(5) { animation-delay: 2.4s; }
.ss-product-card:nth-child(6) { animation-delay: 3.0s; }

@keyframes ss-floatCard {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}