/* ========================================
   service-detail.css - Estilos compartidos
   para páginas de detalle de servicios
   ======================================== */

.service-hero { padding: 160px 0 80px; position: relative; }
.service-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(138,43,226,0.15); border: 1px solid rgba(138,43,226,0.4); border-radius: 50px; padding: 6px 16px; font-size: 0.85rem; color: var(--color-primary); font-weight: 600; margin-bottom: 1.5rem; }
.service-icon-large { width: 80px; height: 80px; background: rgba(138,43,226,0.15); border: 1px solid rgba(138,43,226,0.4); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--color-primary); margin-bottom: 1.5rem; box-shadow: 0 0 30px rgba(138,43,226,0.2); }
.back-link { color: rgba(255,255,255,0.6); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; transition: color 0.3s; }
.back-link:hover { color: var(--color-primary); }

/* Info Card (Hero) */
.service-info-card { background: rgba(138,43,226,0.08); border: 1px solid rgba(138,43,226,0.2); border-radius: 24px; padding: 2rem; }
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* Sections */
.detail-section { padding: 80px 0; }
.detail-section.alt-bg { background: rgba(255,255,255,0.02); }

/* Included Cards */
.included-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; height: 100%; transition: var(--transition-normal); }
.included-card:hover { border-color: rgba(138,43,226,0.4); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(138,43,226,0.1); }
.included-icon { width: 48px; height: 48px; background: rgba(138,43,226,0.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--color-primary); margin-bottom: 1rem; }

/* Process Steps */
.process-step { display: flex; gap: 1.5rem; margin-bottom: 2.5rem; }
.step-num { width: 48px; height: 48px; min-width: 48px; background: rgba(138,43,226,0.15); border: 1px solid rgba(138,43,226,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--color-primary); font-family: 'Outfit', sans-serif; font-size: 0.95rem; }

/* FAQ */
.faq-item { border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; background: var(--bg-card); cursor: pointer; transition: var(--transition-normal); }
.faq-item:hover { border-color: rgba(138,43,226,0.4); }
.faq-item.active { border-color: rgba(138,43,226,0.5); background: rgba(138,43,226,0.05); }
.faq-answer { display: none; margin-top: 1rem; color: rgba(255,255,255,0.7); line-height: 1.7; font-size: 0.95rem; }
.faq-item.active .faq-answer { display: block; }

/* CTA Final */
.cta-service { background: linear-gradient(135deg, rgba(138,43,226,0.12) 0%, rgba(138,43,226,0.04) 100%); border: 1px solid rgba(138,43,226,0.25); border-radius: 24px; padding: 60px; text-align: center; }

@media (max-width: 768px) {
    .service-hero { padding: 120px 0 60px; }
    .cta-service { padding: 40px 20px; }
    .service-info-card { margin-top: 2rem; }
}