:root {
    --color-brand-primary: #4a8f8a;
    --color-brand-dark: #264d4a; 
    --color-brand-light: #ccfbf1;
    
    --color-action-primary: #eb921f;
    --color-action-hover: #FBB14F;  

    --color-accent-emotion: #be185d;
    
    --color-text-base: #1e293b;
    --color-text-muted: #475569;
    
    --color-bg-canvas: #f8fafc;
    --color-bg-subtle: #FBF8F4;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-bg-canvas);
    color: var(--color-text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Estilos para la animación del chat */
.animated-chat-bubble { 
    opacity: 0; 
    transform: translateY(20px); 
    animation: fadeIn 0.5s forwards; 
}
.chat-bubble[data-key="hero.chat.user1"] {
    background-color: #A4C2BF;
}
@keyframes fadeIn { 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* Estilos para el acordeón de FAQ */
.faq-answer { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s ease-in-out; 
}
.faq-question.active + .faq-answer { 
    max-height: 300px; 
}
.faq-question .arrow { 
    transition: transform 0.3s ease; 
}
.faq-question.active .arrow { 
    transform: rotate(180deg); 
}

/* Animación de aparición al hacer scroll */
.scroll-fade { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}
.scroll-fade.visible { 
    opacity: 1; 
    transform: translateY(0); 
}