/* =================================================================
   SITES SIMPLES CMS - tema.css
   CAMADA 3: Tema Visual do Cliente (Doces RJ)
   - Define a identidade visual (cores, fontes, etc.).
   - APLICA as animações da animations-library.css.
   - Contém animações decorativas exclusivas do tema.
   - Este arquivo MUDA para cada projeto.
   ================================================================= */

/* --- PALETA DE CORES E FONTES DO TEMA --- */
:root {
    --primary: #FF6B9D;
    --secondary: #FFD93D;
    --accent: #6C5CE7;
    --dark: #2C3E50;
    --light: #ECF0F1;
}

/* --- ESTILOS GERAIS DO TEMA --- */
body {
    color: var(--dark); /* Cor de texto padrão */
}

/* --- NAVBAR --- */
.ss-navbar {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease; /* Efeito de sombra no scroll */
}

.ss-menu li a {
    color: var(--dark);
    transition: all 0.3s;
}

.ss-menu li a:hover {
    background: var(--primary);
    color: white;
}

.ss-menu-toggle span {
    background: var(--dark);
    transition: all 0.3s;
}
.ss-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
.ss-menu-toggle.active span:nth-child(2) { opacity: 0; }
.ss-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); }


/* --- CARROSSEL / HERO --- */
.ss-slide-content {
    color: white;
}

.ss-slide-content h1 {
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease;
}

.ss-slide-content p {
    text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease 0.2s backwards;
}

.ss-btn-primary {
    background: white;
    color: var(--accent);
    transition: all 0.3s;
    animation: fadeInUp 1s ease 0.4s backwards;
}

.ss-btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.ss-carousel-arrow {
    background: rgba(255,255,255,0.3);
    color: white;
    font-size: 1.5rem;
    transition: all 0.3s;
}
.ss-carousel-arrow:hover { background: rgba(255,255,255,0.5); }

.ss-carousel-dot {
    background: rgba(255,255,255,0.5);
    transition: all 0.3s;
}
.ss-carousel-dot.active {
    background: white;
}

/* --- SEÇÕES E PRODUTOS --- */
.ss-section-title {
    color: var(--dark);
}

.ss-product-card {
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.ss-product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

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

.ss-product-description {
    color: #7f8c8d;
}

/* --- SOBRE --- */
.ss-about {
    background: var(--light);
}

.ss-about-text {
    color: #555;
}

.ss-feature-item {
    background: white;
    transition: all 0.3s;
}

.ss-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.ss-feature-item i {
    color: var(--primary);
}

/* --- GALERIA E LIGHTBOX --- */
.ss-gallery-item {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s;
}
.ss-gallery-item:hover { transform: scale(1.05); }

.ss-lightbox { background: rgba(0,0,0,0.95); }
.ss-lightbox-image { transition: all 0.3s ease; }
.ss-lightbox-close { background: rgba(0,0,0,0.7); border: 2px solid rgba(255,255,255,0.3); color: white; transition: all 0.3s; }
.ss-lightbox-close:hover { background: rgba(0,0,0,0.9); transform: rotate(90deg); }
.ss-lightbox-nav { background: rgba(0,0,0,0.7); border: 2px solid rgba(255,255,255,0.3); color: white; transition: all 0.3s; }
.ss-lightbox-nav:hover { background: rgba(0,0,0,0.9); }
.ss-lightbox-caption { color: white; }

/* --- DEPOIMENTOS --- */
.ss-testimonials {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
}
.ss-testimonials .ss-section-title { color: white; }
.ss-testimonial-card { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); }
.ss-testimonial-quote { color: rgba(255,255,255,0.3); }
.ss-testimonial-role { opacity: 0.8; }

/* --- CTA --- */
.ss-cta {
    background: linear-gradient(135deg, var(--dark) 0%, #34495E 100%);
    color: white;
}
.ss-cta-button {
    background: var(--primary);
    color: white;
    transition: all 0.3s;
}
.ss-cta-button:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

/* --- CONTATO --- */
.ss-contact { background: var(--light); }
.ss-contact-item { background: white; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.ss-contact-item i { color: var(--primary); }
.ss-contact-item h3 { color: var(--dark); }
.ss-contact-item p { color: #7f8c8d; }

/* --- WHATSAPP --- */
.ss-whatsapp-float {
    background: #25D366;
    color: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
    animation: pulse 2s infinite; /* APLICAÇÃO da animação */
}
.ss-whatsapp-float:hover { transform: scale(1.15); }

/* --- RODAPÉ --- */
.ss-footer {
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
    color: white;
}
.ss-footer-links a { color: rgba(255,255,255,0.8); transition: all 0.3s; }
.ss-footer-links a:hover { color: white; }
.ss-social-item { background: rgba(255,255,255,0.1); color: white; transition: all 0.3s; }
.ss-social-item:hover { background: rgba(255,255,255,0.3); transform: translateY(-3px); }
.ss-newsletter-form button { background: var(--primary); color: white; transition: all 0.3s; }
.ss-newsletter-form button:hover { background: #E74C3C; }
.ss-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.ss-footer-bottom a { color: var(--primary); }

/* --- ANIMAÇÕES --- */
/* NOTA: Estas animações estavam no template.html.
   Animações universais como 'pulse' deveriam viver na 'animations-library.css',
   mas para garantir 100% de fidelidade ao arquivo original, elas foram mantidas aqui.
   A 'fadeInUp' é uma animação de entrada de tema, por isso está correta aqui. */

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

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}