/* Estilos personalizados y animaciones */
       body {
           font-family: 'Inter', sans-serif;
           background-color: #0F172A;
           /* slate-900 */
           color: #E2E8F0;
           /* slate-200 */
           overflow-x: hidden;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
               transform: translateY(20px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .fade-in {
           animation: fadeIn 0.8s ease-out forwards;
           opacity: 0;
           /* Start hidden */
       }

       .delay-1 {
           animation-delay: 0.2s;
       }

       .delay-2 {
           animation-delay: 0.4s;
       }

       .delay-3 {
           animation-delay: 0.6s;
       }

       .delay-4 {
           animation-delay: 0.8s;
       }

       .delay-5 {
           animation-delay: 1.0s;
       }

       .delay-6 {
           animation-delay: 1.2s;
       }

       .sticky-header {
           position: sticky;
           top: 0;
           z-index: 50;
           background-color: rgba(15, 23, 42, 0.8);
           /* slate-900 semi-transparente */
           backdrop-filter: blur(10px);
           transition: background-color 0.3s ease;
           border-bottom: 1px solid rgba(51, 65, 85, 0.5);
           /* slate-700 con opacidad */
       }

       .hero-gradient-bg {
           background-image: radial-gradient(circle at top left, rgba(59, 130, 246, 0.3), transparent 40%),
               radial-gradient(circle at top right, rgba(168, 85, 247, 0.3), transparent 40%),
               radial-gradient(circle at bottom left, rgba(39, 7, 7, 0.2), transparent 50%);
           background-color: #0F172A;
           /* slate-900 */
       }

       .cta-button-gradient {
           background-image: linear-gradient(to right, #3B82F6, #8B5CF6);
           transition: all 0.3s ease;
           box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
       }

       .cta-button-gradient:hover {
           transform: translateY(-2px);
           box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
       }

       .secondary-cta-button {
           background-color: rgba(255, 255, 255, 0.1);
           border: 1px solid rgba(255, 255, 255, 0.2);
           transition: all 0.3s ease;
       }

       .secondary-cta-button:hover {
           background-color: rgba(255, 255, 255, 0.15);
           transform: translateY(-2px);
       }

       .feature-card {
           background-color: rgba(30, 41, 59, 0.5);
           /* slate-800 con opacidad */
           border: 1px solid rgba(51, 65, 85, 0.7);
           /* slate-700 con opacidad */
           transition: all 0.3s ease;
           backdrop-filter: blur(5px);
       }

       .feature-card:hover {
           border-color: rgba(79, 70, 229, 0.7);
           /* indigo-600 */
           transform: translateY(-4px);
           box-shadow: 0 10px 25px rgba(15, 23, 42, 0.3);
       }

       /* Contact Form Styles */
       .contact-form-input {
           /* Using Tailwind classes directly for consistency */
           /* @apply applied inline now */
           width: 100%;
           padding-left: 1rem;
           /* px-4 */
           padding-right: 1rem;
           /* px-4 */
           padding-top: 0.75rem;
           /* py-3 */
           padding-bottom: 0.75rem;
           /* py-3 */
           border-radius: 0.375rem;
           /* rounded-md */
           background-color: #1E293B;
           /* bg-slate-800 */
           border: 1px solid #334155;
           /* border-slate-700 */
           color: #E2E8F0;
           /* text-slate-200 */
           transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
           /* Added transition */
       }

       .contact-form-input::placeholder {
           /* Styling placeholder */
           color: #64748B;
           /* placeholder-slate-500 */
           opacity: 1;
           /* Ensure placeholder is visible */
       }

       .contact-form-input:focus {
           outline: none;
           /* focus:outline-none */
           border-color: transparent;
           /* focus:border-transparent */
           box-shadow: 0 0 0 2px #3B82F6;
           /* focus:ring-2 focus:ring-blue-500 */
       }

       .contact-form-label {
           /* @apply applied inline now */
           display: block;
           /* block */
           font-size: 0.875rem;
           /* text-sm */
           line-height: 1.25rem;
           font-weight: 500;
           /* font-medium */
           color: #94A3B8;
           /* text-slate-400 */
           margin-bottom: 0.25rem;
           /* mb-1 */
       }

       .contact-submit-button {
           /* Red button like in the image */
           /* @apply applied inline now */
           width: 100%;
           padding-left: 1.5rem;
           /* px-6 */
           padding-right: 1.5rem;
           /* px-6 */
           padding-top: 0.75rem;
           /* py-3 */
           padding-bottom: 0.75rem;
           /* py-3 */
           border-radius: 0.375rem;
           /* rounded-md */
           background-color: #DC2626;
           /* bg-red-600 */
           color: #FFFFFF;
           /* text-white */
           font-weight: 600;
           /* font-semibold */
           font-size: 1.125rem;
           /* text-lg */
           line-height: 1.75rem;
           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
           /* shadow-md */
           transition: background-color 0.3s ease, transform 0.3s ease;
           /* transition */
       }

       .contact-submit-button:hover {
           background-color: #B91C1C;
           /* hover:bg-red-700 */
           transform: translateY(-2px);
           /* hover:-translate-y-1 */
       }

       .contact-submit-button:focus {
           outline: none;
           /* focus:outline-none */
           box-shadow: 0 0 0 2px #1E293B, 0 0 0 4px #EF4444;
           /* focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-red-500 */
       }

       /* Privacy Checkbox Styles */
       .privacy-container {
           display: flex;
           align-items: flex-start;
           gap: 0.75rem;
           margin-top: 1.5rem;
           margin-bottom: 1.5rem;
       }

       .privacy-checkbox {
           appearance: none;
           -webkit-appearance: none;
           width: 1.25rem;
           height: 1.25rem;
           background-color: #1E293B;
           border: 1px solid #334155;
           border-radius: 0.25rem;
           cursor: pointer;
           position: relative;
           flex-shrink: 0;
           margin-top: 0.125rem;
           transition: all 0.2s ease;
       }

       .privacy-checkbox:checked {
           background-color: #3B82F6;
           border-color: #3B82F6;
       }

       .privacy-checkbox:checked::after {
           content: "\f00c";
           font-family: "Font Awesome 6 Free";
           font-weight: 900;
           color: white;
           font-size: 0.75rem;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
       }

       .privacy-label {
           font-size: 0.875rem;
           color: #94A3B8;
           line-height: 1.4;
           cursor: pointer;
       }

       .privacy-link {
           color: #3B82F6;
           text-decoration: underline;
           transition: color 0.2s ease;
       }

       .privacy-link:hover {
           color: #60A5FA;
       }

       img,
       svg {
           max-width: 100%;
           height: auto;
       }

       .footer-link {
           /* @apply applied inline now */
           color: #94A3B8;
           /* text-slate-400 */
           transition: color 0.2s ease-in-out;
           /* transition-colors duration-200 */
           font-size: 0.875rem;
           /* text-sm */
           line-height: 1.25rem;
       }

       .footer-link:hover {
           color: #FFFFFF;
           /* hover:text-white */
       }

       @media (max-width: 768px) {
           .hero-text-center {
               text-align: center;
           }

           .hero-buttons-center {
               justify-content: center;
           }

           .footer-grid {
               grid-template-columns: 1fr;
               text-align: center;
           }

           .footer-logo-area {
               align-items: center;
               margin-bottom: 2rem;
           }

           .footer-social-icons {
               justify-content: center;
           }

           .footer-bottom {
               flex-direction: column;
               align-items: center;
               text-align: center;
           }

           .footer-legal-links {
               margin-top: 0.5rem;
           }

           /* Contact section responsive */
           .contact-grid {
               grid-template-columns: 1fr;
           }

           /* Stack columns on mobile */
           .contact-reasons {
               margin-top: 2.5rem;
           }

           /* Add space between form and reasons on mobile */
       }

       /* Dropdown Styles */
       .dropdown {
           position: relative;
           display: inline-block;
       }

       .dropdown-content {
           display: none;
           position: absolute;
           top: 100%;
           /* Empieza justo debajo del padre */
           left: 0;
           padding-top: 0.5rem;
           /* Puente invisible */
           z-index: 100;
       }

       .dropdown-content-inner {
           background-color: #1E293B;
           /* slate-800 */
           min-width: 200px;
           box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
           border-radius: 0.5rem;
           border: 1px solid rgba(51, 65, 85, 0.5);
           overflow: hidden;
           backdrop-filter: blur(10px);
       }

       .dropdown:hover .dropdown-content {
           display: block;
           animation: fadeIn 0.3s ease-out forwards;
       }

       .dropdown-item {
           color: #94A3B8;
           padding: 12px 16px;
           text-decoration: none;
           display: block;
           font-size: 0.875rem;
           transition: all 0.2s ease;
           border-left: 3px solid transparent;
       }

       .dropdown-item:hover {
           background-color: rgba(59, 130, 246, 0.1);
           color: #FFFFFF;
           border-left-color: #3B82F6;
       }

       .dropdown-arrow {
           margin-left: 0.25rem;
           font-size: 0.75rem;
           transition: transform 0.3s ease;
       }

       .dropdown:hover .dropdown-arrow {
           transform: rotate(180deg);
       }