body {
    font-family: 'Inter', sans-serif;
    background-color: #111827; 
    color: #E5E7EB; 
}
.hero-bg {
    background-image: url('https://totalyoda.com/Images/2025_posters__1st_edition_by_thekingblader995_dixqlt0-pre.jpg'); 
    background-size: cover;
    background-position: center;
}
.cta-button {
    background-color: #3B82F6; 
    transition: background-color 0.3s ease, transform 0.2s ease-in-out; 
}
.cta-button:hover {
    background-color: #2563EB; 
}
.cta-button-secondary {
    background-color: #10B981; 
    transition: background-color 0.3s ease, transform 0.2s ease-in-out; 
}
.cta-button-secondary:hover {
    background-color: #059669; 
}
.section-title {
    font-weight: 900; 
    font-size: 2.5rem; 
    line-height: 1.2;
}
.card {
    background-color: #1F2937; 
    border: 1px solid #374151; 
}
.highlight-text {
    color: #3B82F6 !important; 
}
.accent-text {
    color: #10B981 !important; 
}
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-pulse-badge {
    animation: pulseBadgeAnimation 2s infinite ease-in-out;
}
@keyframes pulseBadgeAnimation {
    0%, 100% { transform: scale(1) translateX(-50%) translateY(-50%); } 
    50% { transform: scale(1.1) translateX(-50%) translateY(-50%); }
}
.benefit-icon {
    transition: transform 0.3s ease-in-out;
}
.card:hover .benefit-icon {
    transform: rotate(10deg) scale(1.15);
}
.slick-slide { 
    margin: 0 10px;
}
.slick-dots li button:before {
    color: #3B82F6 !important; 
}

/* Estilos para el selector de idioma */
.lang-btn {
    color: #E5E7EB; 
    background-color: transparent;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.lang-btn:hover {
    color: #3B82F6; 
}
.lang-btn.active {
    color: #ffffff; 
    background-color: #3B82F6; 
    font-weight: 600; 
}

/* Estilos para la sección de sugerencias de Gemini IA */
#gemini-suggestion-result {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem; 
}

/* Nueva animación para la aparición de las tarjetas de sugerencia */
@keyframes appearEffect {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Estilos para cada item de sugerencia individual */
.gemini-suggestion-item {
    background-color: #374151; 
    padding: 1rem; 
    border-radius: 0.375rem; 
    text-align: left;
    display: flex; 
    flex-direction: column; 
    animation: appearEffect 0.5s ease-out forwards; /* Aplicar la nueva animación */
    /* Para que la animación se vea bien si aparecen varias, podemos añadir un pequeño retraso escalonado
       Esto se haría mejor con JavaScript al añadir los elementos, pero para CSS puro,
       se puede simular si sabes que siempre serán 3 o un número fijo.
       Si no, la animación se ejecutará simultáneamente para todas. */
}

.gemini-suggestion-item h3 { 
    font-size: 1.25rem; 
    font-weight: 700; 
    color: #3B82F6; 
    margin-bottom: 0.5rem; 
}
.gemini-suggestion-item p { 
    font-size: 0.875rem; 
    color: #D1D5DB; 
    line-height: 1.5;
    flex-grow: 1; 
}
#gemini-suggestion-result .loading-spinner {
    grid-column: 1 / -1; 
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-left-color: #3B82F6;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 2rem auto; 
}
#gemini-suggestion-result > p.text-gray-500, 
#gemini-suggestion-result > p.text-red-400,  
#gemini-suggestion-result > p.text-yellow-400 { 
    grid-column: 1 / -1; 
    text-align: center;
    padding: 2rem 0;
}


@keyframes spin {
    to { transform: rotate(360deg); }
}