body {
     font-family: 'Inter', sans-serif;
     background: #f8fafc;
 }

 p {
     padding-bottom: 0px;
 }

 .gradient-bg {
     background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
     position: relative;
     overflow: hidden;
 }

 .gradient-bg::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
 }

 .faq-item {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid #e2e8f0;
     margin-bottom: 1rem;
     background: white;
 }

 .faq-item:hover {
     transform: translateY(-1px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
     border-color: #cbd5e1;
 }

 /* Design professionale uniforme */
 .purchase-faq {
     background: white;
     color: #1e293b;
     border-left: 4px solid #3b82f6;
 }

 .passengers-faq {
     background: white;
     color: #1e293b;
     border-left: 4px solid #6366f1;
 }

 .transport-faq {
     background: white;
     color: #1e293b;
     border-left: 4px solid #8b5cf6;
 }

 .behavior-faq {
     background: white;
     color: #1e293b;
     border-left: 4px solid #a855f7;
 }

 .account-faq {
     background: white;
     color: #1e293b;
     border-left: 4px solid #d946ef;
 }

 .subscription-faq {
     background: white;
     color: #1e293b;
     border-left: 4px solid #06b6d4;
 }

 .faq-summary {
     cursor: pointer;
     padding: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-weight: 600;
     font-size: 1.1rem;
     transition: all 0.3s ease;
 }

 .faq-summary:hover {
     background: #f8fafc;
 }

 .faq-content {
     padding: 0 1.5rem 1.5rem;
     line-height: 1.6;
     color: #475569;
 }

 .faq-icon {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
     background: #f1f5f9;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     margin-right: 1rem;
     flex-shrink: 0;
     color: #64748b;
 }

 .expand-icon {
     transition: transform 0.3s ease;
     font-size: 1.5rem;
     color: #64748b;
 }

 details[open] .expand-icon {
     transform: rotate(45deg);
 }

 .highlight-box {
     background: #f8fafc;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     padding: 1rem;
     margin: 1rem 0;
 }

 .price-tag {
     background: #3b82f6;
     color: white;
     padding: 0.25rem 0.75rem;
     border-radius: 20px;
     font-weight: 600;
     display: inline-block;
     margin: 0.25rem;
     font-size: 0.875rem;
 }

 .contact-link {
     background: #3b82f6;
     color: white;
     padding: 0.5rem 1rem;
     border-radius: 6px;
     font-weight: 500;
     text-decoration: none;
     display: inline-block;
     margin: 0.25rem;
     transition: all 0.3s ease;
     font-size: 0.875rem;
 }

 .contact-link:hover {
     background: #2563eb;
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }

 .section-header {
     background: white;
     border-radius: 12px;
     padding: 1rem;
     margin: 2rem 0 1rem 0;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 /* Breadcrumb Styles */
 .breadcrumb {
     background: transparent;
     border-radius: 12px;
     padding: 1rem 1.5rem;
     margin: 1rem 0;
 }

 .breadcrumb ol {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin: 0;
     padding: 0;
     list-style: none;
 }

 .breadcrumb li {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .breadcrumb a {
     color: white !important;
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
 }

 .breadcrumb a:hover {
     color: #3b82f6 !important;
 }

 .breadcrumb .current {
     color: #3b82f6;
     font-weight: 600;
 }

 /* Breadcrumb sticky */
 #breadcrumb-nav {
     position: sticky;
     top: 80px;
     z-index: 9998;
     width: 100%;
     margin-top: 0;
 }

 #breadcrumb-nav.hidden {
     opacity: 0;
     transform: translateY(-100%);
     pointer-events: none;
 }

 @media (max-width: 768px) {
     #breadcrumb-nav {
         padding: 0.5rem 0;
         top: 80px;
     }

     #breadcrumb-nav ol {
         font-size: 0.85rem;
         padding: 0 1rem;
     }
 }

 @media (max-width: 768px) {
     .faq-summary {
         font-size: 1rem;
         padding: 1rem;
     }

     .faq-content {
         padding: 0 1rem 1rem;
     }

     .faq-icon {
         width: 2rem;
         height: 2rem;
         font-size: 1rem;
     }

     .breadcrumb {
         padding: 0.75rem 1rem;
     }

     .breadcrumb ol {
         flex-wrap: wrap;
     }
 }