@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;800;900&family=Sigmar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --font-montserrat: 'Montserrat', sans-serif;
    --font-quicksand: "Quicksand";
    --font-livvic: "Livvic";
    --secondary-color: #ffc107;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --color-dark-charcoal: #121318;
    --border-color: #dee2e6;
    --sidebar-width: 250px;
    --header-height: 70px;
    --font-poppins: 'Poppins', sans-serif;
    --nav-bg: #ffffff;
    --nav-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --nav-border: 1px solid var(--border-color);
    --nav-padding: 0 2rem;

    --primary-color: #3933af;
    --primary-color-l1: #8d89db;
    --primary-color-l2: #6f6acfef;

    --primary-color-2: #3933af30;
    --primary-color-3: #dff8ff;
    --primary-color-4: #453fb9;

    --primary-color-light: var(--primary-color-4)20;
    --secondary-color: #333;
    --text-color: #333;
    --background-color: #f5f5f5;
    --border-color: #e1e1e1;
    --success-color: #28a745;
    --danger-color: #de404f;
    --info-color: #17a2b8;
    --light-gray: #f5f6fa;
    --sidebar-width: 250px;
    --header-height: 70px;
    --color-dark-charcoal: #121318;

    --color-fondo: #121212;
    --color-card-primary: #343434;
    --color-card-secondary: #454545;

    --color-black-100: #f5f5f5;
    --color-black-200: #e0e0e0;
    --color-black-300: #c2c2c2;
    --color-black-400: #a3a3a3;
    --color-black-500: #858585;
    --color-black-600: #666666;
    --color-black-700: #474747;
    --color-black-800: #292929;
    --color-black-900: #3f4752;
    --color-black-1000: #000000;

    --color-blue-100: #e3f2fd; 
    --color-blue-200: #b6e0fb;
    --color-blue-300: #86c8f7;
    --color-blue-400: #4db0f3;
    --color-blue-500: #0d9dee; 
    --color-blue-600: #0a89d1;
    --color-blue-700: #0873b2;
    --color-blue-800: #065d93;
    --color-blue-900: #054775;

    --color-green-100: #e3fbf3;
    --color-green-200: #ccf4e7;
    --color-green-300: #99e9d0;
    --color-green-400: #66deba;
    --color-green-500: #33d3a3;
    --color-green-600: #07c085; 
    --color-green-700: #05996a;
    --color-green-800: #047b57;
    --color-green-900: #035e44;

    --color-red-100: #f8d7da;
    --color-red-200: #f1b0b7;
    --color-red-300: #ea898f;
    --color-red-400: #e26367;
    --color-red-500: #dc3545; 
    --color-red-600: #b82c3b;
    --color-red-700: #941f2c;
    --color-red-800: #6f1621;
    --color-red-900: #4a0e16;

    --color-orange-100: #fff4d6;
    --color-orange-200: #ffdf9f;
    --color-orange-300: #ffcb69;
    --color-orange-400: #fbb937;
    --color-orange-500: #f39c12; 
    --color-orange-600: #ca7f0f;
    --color-orange-700: #a5630b;
    --color-orange-800: #7c4708;
    --color-orange-900: #532d05;

    --color-purple-100: #f3e6fa;
    --color-purple-200: #d9bff4;
    --color-purple-300: #bf99ee;
    --color-purple-400: #a872e8;
    --color-purple-500: #9b59b6; 
    --color-purple-600: #7b3e91;
    --color-purple-700: #5c2a6d;
    --color-purple-800: #3e1950;
    --color-purple-900: #220e31;

    --color-yellow-100: #fff9d6;
    --color-yellow-200: #fff399;
    --color-yellow-300: #ffed5d;
    --color-yellow-400: #ffe729;
    --color-yellow-500: #f1c40f; 
    --color-yellow-600: #c19c0c;
    --color-yellow-700: #937408;
    --color-yellow-800: #635005;
    --color-yellow-900: #322802;
}

* {
    font-family: var(--font-poppins);
    color: var(--color-text);
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Altura del header fijo */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Styles */
.dark body {
    background-color: #1a1a1a;
    color: #ffffff;
}

.dark {
    color-scheme: dark;
}

.dark * {
    color: inherit;
}

.dark .bg-white {
    background-color: #2d2d2d;
}

.dark .bg-gray-50 {
    background-color: #1f1f1f;
}

.dark .bg-gray-100 {
    background-color: #2a2a2a;
}

.dark .text-gray-600 {
    color: #d1d5db;
}

.dark .text-gray-700 {
    color: #e5e7eb;
}

.dark .text-gray-800 {
    color: #f3f4f6;
}

.dark .text-gray-900 {
    color: #ffffff;
}

.dark .border-gray-300 {
    border-color: #4b5563;
}

.dark .card {
    background-color: #2d2d2d;
    border: 1px solid #404040;
}

.dark .card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.dark .bg-gray-900 {
    background-color: #111827;
}

.dark .text-gray-400 {
    color: #9ca3af;
}

.dark .hover\:text-white:hover {
    color: #ffffff;
}

.dark .hover\:bg-gray-50:hover {
    background-color: #2a2a2a;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #374151;
}

.dark .bg-gray-50 {
    background-color: #1f1f1f;
}

.dark .border-gray-300 {
    border-color: #4b5563;
}

.dark .focus\:border-primary:focus {
    border-color: var(--primary-color-4);
}

.dark .focus\:ring-primary:focus {
    --tw-ring-color: var(--primary-color-4);
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Dark mode para el modal */
.dark #contactModal .modal-content {
    background-color: #2d2d2d;
    color: #ffffff;
}

.dark #contactModal .bg-white {
    background-color: #2d2d2d;
}

.dark #contactModal .bg-gray-50 {
    background-color: #1f1f1f;
}

.dark #contactModal .text-gray-600 {
    color: #d1d5db;
}

.dark #contactModal .text-gray-700 {
    color: #e5e7eb;
}

.dark #contactModal .border-gray-300 {
    border-color: #4b5563;
}

.dark #contactModal .focus\:border-primary:focus {
    border-color: var(--primary-color-4);
}

.dark #contactModal .focus\:ring-primary:focus {
    --tw-ring-color: var(--primary-color-4);
}

/* Dark mode para el botón de dark mode */
.dark #darkModeToggle {
    background-color: #ffffff;
    color: #1a1a1a;
}

.dark #darkModeToggle:hover {
    background-color: #f3f4f6;
}

/* Dark mode para el header */
.dark header {
    background-color: #2d2d2d;
    border-bottom: 1px solid #404040;
}

.dark header a {
    color: #ffffff;
}

.dark header a:hover {
    color: var(--primary-color-4);
}

/* Dark mode para secciones */
.dark .bg-white {
    background-color: #2d2d2d;
}

.dark .bg-gray-50 {
    background-color: #1f1f1f;
}

.dark .bg-gradient-to-b.from-white.to-gray-50 {
    background: linear-gradient(to bottom, #2d2d2d, #1f1f1f);
}

/* Dark mode para textos */
.dark .text-gray-600 {
    color: #d1d5db;
}

.dark .text-gray-700 {
    color: #e5e7eb;
}

.dark .text-gray-800 {
    color: #f3f4f6;
}

.dark .text-gray-900 {
    color: #ffffff;
}

/* Dark mode para inputs */
.dark input, .dark textarea, .dark select {
    background-color: #374151;
    border-color: #4b5563;
    color: #ffffff;
}

.dark input:focus, .dark textarea:focus, .dark select:focus {
    border-color: var(--primary-color-4);
    box-shadow: 0 0 0 3px rgba(255, 172, 28, 0.1);
}

/* Dark mode para el footer */
.dark footer {
    background-color: #3933af;
}

.dark footer .text-gray-400 {
    color: #9ca3af;
}

.dark footer .hover\:text-white:hover {
    color: #ffffff;
}

/* Dark mode para el modal móvil */
.dark #mobile-menu {
    background-color: #2d2d2d;
}

.dark #mobile-menu a {
    color: #ffffff;
}

.dark #mobile-menu a:hover {
    color: var(--primary-color-4);
}

/* Dark mode para elementos específicos */
.dark .bg-primary-light {
    background-color: var(--primary-color-2);
}

.dark .text-primary {
    color: var(--primary-color-3);
}

.dark .border-gray-800 {
    border-color: #374151;
}

.dark .bg-gray-900 {
    background-color: #111827;
}

.dark .text-white {
    color: #ffffff;
}

/* Dark mode para el icono del botón */
.dark #darkModeToggle svg {
    color: #1a1a1a;
}

/* FAQ Category Filter Styles */
.faq-category-btn {
    color: #6b7280;
    transition: all 0.3s ease;
}

.faq-category-btn:hover {
    color: var(--primary-color);
}

.faq-category-btn.active {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.faq-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Dark mode styles for FAQ */
.dark .faq-category-btn {
    color: #9ca3af;
}

.dark .faq-category-btn:hover {
    color: var(--primary-color);
}

.dark .faq-category-btn.active {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Transiciones suaves para todos los elementos */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Estilos para validaciones del formulario */
.border-red-500 {
    border-color: #ef4444 !important;
}

.focus\:border-red-500:focus {
    border-color: #ef4444 !important;
}

.focus\:ring-red-500:focus {
    --tw-ring-color: #ef4444 !important;
}

.text-red-500 {
    color: #ef4444;
}

/* Estilos para notificaciones */
.notification-enter {
    transform: translateX(100%);
    opacity: 0;
}

.notification-enter-active {
    transform: translateX(0);
    opacity: 1;
    transition: all 0.3s ease;
}

.notification-exit {
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.shei-chat-pulse-ring { animation: sheiPulse 2.4s ease-in-out infinite; background: radial-gradient(closest-side, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%); }
.shei-chat-pulse { animation: sheiPulseScale 2.4s ease-in-out infinite; }
@keyframes sheiPulse { 0%,100% { transform: scale(1); opacity: .6 } 50% { transform: scale(1.15); opacity: .9 } }
@keyframes sheiPulseScale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
#shei-chat-send{ background-color:#453fb9 !important; color:#ffffff !important; border:0; }
#shei-chat-send:hover{ background-color:#3c36a6 !important; }
.dark #shei-chat-send{ background-color:#453fb9 !important; }
.shei-typing{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; }
.shei-typing-dot{ width:6px; height:6px; border-radius:9999px; background-color:#9ca3af; animation:sheiTyping 1s infinite ease-in-out; }
.shei-typing-dot:nth-child(2){ animation-delay:.2s; }
.shei-typing-dot:nth-child(3){ animation-delay:.4s; }
.dark .shei-typing-dot{ background-color:#e5e7eb; }
@keyframes sheiTyping{ 0%,100%{ opacity:.4; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-2px);} }
.shei-bot-avatar { width: 2.25rem; height: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; border-radius: 9999px; display:flex; align-items:center; justify-content:center; background-image: linear-gradient(135deg,#6d5dfc,#453fb9); box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }
.dark .shei-bot-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
/* Estilos para botón deshabilitado */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Estilos para campos de formulario en dark mode */
.dark .border-red-500 {
    border-color: #f87171 !important;
}

.dark .focus\:border-red-500:focus {
    border-color: #f87171 !important;
}

.dark .focus\:ring-red-500:focus {
    --tw-ring-color: #f87171 !important;
}

.dark .text-red-500 {
    color: #f87171;
}

/* Estilos para Toastify */
.toast-success {
    background: linear-gradient(to right, #4ade80, #22c55e) !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}

.toast-error {
    background: linear-gradient(to right, #f87171, #ef4444) !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

.toast-info {
    background: linear-gradient(to right, #60a5fa, #3b82f6) !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Modo oscuro para toasts */
.dark .toast-success {
    background: linear-gradient(to right, #059669, #047857) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4) !important;
}

.dark .toast-error {
    background: linear-gradient(to right, #dc2626, #b91c1c) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

.dark .toast-info {
    background: linear-gradient(to right, #2563eb, #1d4ed8) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

/* Estilos generales */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header y Navegación */
.header {
    background: var(--nav-bg);
    box-shadow: var(--nav-shadow);
    transition: all 0.3s ease;
}

.nav-link {
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-color);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--color-orange-600);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 25px rgba(255, 172, 28, 0.3);
}

/* Estilos mejorados para botones de acción */
.action-button {
    transition: all 0.3s ease;
    font-weight: 600;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Estilos para el modal de contacto */
#contactModal {
    scroll-behavior: smooth;
}

#contactModal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color-4) #f3f4f6;
}

#contactModal .modal-content::-webkit-scrollbar {
    width: 6px;
}

#contactModal .modal-content::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

#contactModal .modal-content::-webkit-scrollbar-thumb {
    background: var(--primary-color-4);
    border-radius: 3px;
}

#contactModal .modal-content::-webkit-scrollbar-thumb:hover {
    background: #e69500;
}

.action-button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.action-button.primary {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
    color: white;
}

.action-button.primary:hover {
    background-color: var(--primary-color-4);
    color: white;
}

.action-button.secondary {
    background-color: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.action-button.secondary:hover {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
    color: white;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--color-black-100) 0%, white 100%);
    padding: 8rem 0 4rem;
}

.hero-title {
    font-family: var(--font-montserrat);
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

/* Animación de disolución por carácter para el título del hero */
.hero-dissolve [data-char] {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(10px);
    animation: dissolveIn 600ms ease forwards;
    animation-delay: calc(var(--char-index) * 40ms);
}

@keyframes dissolveIn {
    0% { opacity: 0; filter: blur(6px); transform: translateY(10px); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.hero-subtitle {
    color: var(--color-black-600);
    font-family: var(--font-quicksand);
    margin: 1.5rem 0;
}

/* Tarjetas y Secciones */
.card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.section {
    padding: 5rem 0;
}

.section-title {
    font-family: var(--font-montserrat);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 2rem;
    text-align: center;
}

/* Formulario de contacto */
.form-control {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

/* Footer */
.footer {
    color: white;
    padding: 4rem 0;
}

.footer-link {
    color: var(--color-black-300);
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--primary-color);
}

/* Animaciones */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        padding: 6rem 0 3rem;
    }

    .section {
        padding: 3rem 0;
    }

    .card {
        margin-bottom: 1.5rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .btn-primary {
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Modal responsive para móvil */
    #contactModal .modal-content {
        max-height: 95vh;
        margin: 1rem;
        width: calc(100% - 2rem);
    }

    #contactModal .min-h-screen {
        padding: 0.5rem;
    }
}

/* Estilos para el modal de testimonios */
#testimonialModal .modal-content {
    max-width: 600px;
    width: 90%;
}

#testimonialModal .bg-gradient-to-r {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}

.dark .custom-card-primary, 
.dark\:custom-card-primary {
    background: linear-gradient(135deg, var(--primary-color-l1) 0%, var(--primary-color-l2) 100%);
}

.custom-card-primary {
    background: none;
}

/* Estilos para el carrusel de testimonios */
.testimonialSwiper {
    width: 100%;
    height: auto;
    min-height: 450px;
    margin: 40px 0 60px 0;
    overflow: visible;
    position: relative;
    display: block !important;
    z-index: 1;
    visibility: visible !important;
    padding: 30px 20px 40px 20px;
}

.testimonialSwiper .swiper-slide {
    height: auto;
    padding: 15px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex !important;
    visibility: visible !important;
    transform: scale(0.95);
}

.testimonialSwiper .swiper-slide-active {
    transform: scale(1);
}

.testimonialSwiper .swiper-wrapper {
    display: flex !important;
    visibility: visible !important;
    min-height: 350px;
    opacity: 1 !important;
    align-items: stretch;
}

.testimonialSwiper .swiper-pagination {
    bottom: -20px;
    position: relative;
    margin-top: 30px;
}

.testimonialSwiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    opacity: 0.3;
    transition: all 0.3s ease;
}

.testimonialSwiper .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}

.testimonialSwiper .swiper-button-next,
.testimonialSwiper .swiper-button-prev {
    color: var(--primary-color);
    background: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.testimonialSwiper .swiper-button-next:hover,
.testimonialSwiper .swiper-button-prev:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.testimonialSwiper .swiper-button-next::after,
.testimonialSwiper .swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

/* Nuevos estilos para tarjetas modernas de testimonios */
.testimonial-card-modern {
    height: 100%;
    width: 100%;
    min-height: 320px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    margin-top: -5rem !important;
}

.testimonial-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), #6366f1, #8b5cf6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.testimonial-card-modern:hover::before {
    opacity: 1;
}

.testimonial-card-modern:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.testimonial-card-content {
    padding: 32px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.testimonial-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    margin-right: 16px;
    flex-shrink: 0;
}

.testimonial-avatar-text {
    color: white;
    font-weight: 700;
    font-size: 24px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.testimonial-avatar-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Gradiente de avatar más oscuro para mayor contraste */
.shei-avatar-gradient { background: linear-gradient(135deg, #3933af 0%, #2f2aa5 60%, #1e1b7a 100%); }
.dark .shei-avatar-gradient { background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); }

.testimonial-info {
    flex: 1;
}

.testimonial-name {
    font-weight: 700;
    font-size: 18px;
    color: #1f2937;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.testimonial-type {
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.testimonial-rating {
    color: #fbbf24;
    font-size: 16px;
    letter-spacing: 2px;
}

.testimonial-quote-icon {
    color: var(--primary-color);
    opacity: 0.3;
    margin-bottom: 16px;
    text-align: center;
}

.testimonial-text {
    flex: 1;
    margin-bottom: 24px;
}

.testimonial-text p {
    color: #374151;
    font-size: 16px;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
    text-align: center;
}

.testimonial-footer {
    border-top: 1px solid #f3f4f6;
    padding-top: 16px;
    margin-top: auto;
}

.testimonial-verified {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.testimonial-verified svg {
    margin-right: 6px;
    opacity: 0.8;
}

/* Estilos para modo oscuro */
.dark .testimonial-card-modern {
    background: #2d2d2d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.dark .testimonial-card-modern:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.dark .testimonial-name {
    color: #f9fafb;
}

.dark .testimonial-type {
    color: #9ca3af;
}

.dark .testimonial-text p {
    color: #d1d5db;
}

.dark .testimonial-footer {
    border-top-color: #374151;
}

.dark .testimonial-verified {
    color: #22c55e;
}

.dark .testimonial-quote-icon {
    color: #8b5cf6;
}

.dark .testimonialSwiper .swiper-button-next,
.dark .testimonialSwiper .swiper-button-prev {
    background: #374151;
    color: #f9fafb;
}

.dark .testimonialSwiper .swiper-button-next:hover,
.dark .testimonialSwiper .swiper-button-prev:hover {
    background: var(--primary-color);
    color: white;
}

.dark .testimonialSwiper .swiper-pagination-bullet {
    background: #6b7280;
}

.dark .testimonialSwiper .swiper-pagination-bullet-active {
    background: var(--primary-color);
}

.shei-gradient-bg { background: linear-gradient(180deg, rgba(69,63,185,0.08) 0%, rgba(233,236,255,0.5) 40%, #ffffff 100%); }
.dark .shei-gradient-bg { background: linear-gradient(180deg, #1f1f1f 0%, #111827 100%); }
/* Responsive Design */
@media (max-width: 768px) {
    .testimonial-card-content {
        padding: 24px 20px;
    }
    
    .testimonial-avatar {
        width: 56px;
        height: 56px;
        margin-right: 12px;
    }
    
    .testimonial-avatar-text {
        font-size: 20px;
    }
    
    .testimonial-avatar-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    .testimonial-name {
        font-size: 16px;
    }
    
    .testimonial-text p {
        font-size: 15px;
    }
    
    .testimonialSwiper {
        min-height: 400px;
        margin: 30px 0 50px 0;
        padding: 25px 15px 35px 15px;
    }
    
    .testimonial-card-modern {
        min-height: 320px;
    }
    
    #testimonials-container {
        min-height: 450px;
        padding: 15px 0;
    }
    
    .testimonials {
        padding: 40px 0 60px 0;
    }
}

@media (max-width: 480px) {
    .testimonial-card-content {
        padding: 20px 16px;
    }
    
    .testimonial-header {
        margin-bottom: 20px;
    }
    
    .testimonial-text {
        margin-bottom: 20px;
    }
    
    .testimonialSwiper {
        min-height: 380px;
        margin: 25px 0 45px 0;
        padding: 20px 10px 30px 10px;
    }
    
    .testimonial-card-modern {
        min-height: 300px;
    }
    
    #testimonials-container {
        min-height: 420px;
        padding: 10px 0;
    }
    
    .testimonials {
        padding: 30px 0 50px 0;
    }
    
    .testimonialSwiper .swiper-button-next,
    .testimonialSwiper .swiper-button-prev {
        width: 36px;
        height: 36px;
    }
    
    .testimonialSwiper .swiper-button-next::after,
    .testimonialSwiper .swiper-button-prev::after {
        font-size: 14px;
    }
}

/* Asegurarse de que el contenedor tenga altura */
#testimonials-container {
    min-height: 500px;
    padding: 20px 0;
    overflow: visible;
}

/* Contenedor padre de testimonios */
.testimonials {
    overflow: visible;
    padding: 60px 0;
}



/* Estilos para modo oscuro */
[data-theme="dark"] .testimonial-card-modern {
    background: #2d2d2d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .testimonial-card-modern:hover {
    background: #2d2d2d;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
}

[data-theme="dark"] .testimonial-card-content {
    background: #2d2d2d;
}

[data-theme="dark"] .testimonial-name {
    color: #ffffff;
}

[data-theme="dark"] .testimonial-type {
    color: #9ca3af;
}

[data-theme="dark"] .testimonial-text p {
    color: #d1d5db;
}

/* Estilos para el placeholder de testimonios */
.testimonial-placeholder {
    height: 100%;
    width: 100%;
    min-height: 400px;
    background: linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 2px dashed #e5e7eb;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.testimonial-placeholder:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color);
}

.testimonial-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.testimonial-placeholder:hover::before {
    left: 100%;
}

.testimonial-placeholder-content {
    padding: 40px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.testimonial-placeholder-icon {
    color: var(--primary-color);
    margin-bottom: 20px;
    opacity: 0.8;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.testimonial-placeholder-stars {
    color: #fbbf24;
    font-size: 24px;
    letter-spacing: 4px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.testimonial-placeholder-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 16px 0;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.testimonial-placeholder-text {
    color: #6b7280;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 32px 0;
    max-width: 400px;
}

.testimonial-placeholder-features {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    justify-content: center;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    min-width: 80px;
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.feature-item span:last-child {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.testimonial-placeholder-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color), #6366f1);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(69, 63, 185, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.testimonial-placeholder-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(69, 63, 185, 0.4);
    background: linear-gradient(135deg, #3730a3, #4f46e5);
}

.testimonial-placeholder-button:active {
    transform: translateY(0) scale(1.02);
}

/* Modo oscuro para placeholder */
.dark .testimonial-placeholder {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
}

.dark .testimonial-placeholder:hover {
    border-color: var(--primary-color);
}

.dark .testimonial-placeholder-title {
    color: #f9fafb;
}

.dark .testimonial-placeholder-text {
    color: #9ca3af;
}

.dark .feature-item {
    background: rgba(55, 65, 81, 0.8);
}

.dark .feature-item span:last-child {
    color: #d1d5db;
}

/* Responsive para placeholder */
@media (max-width: 768px) {
    .testimonial-placeholder {
        min-height: 350px;
    }
    
    .testimonial-placeholder-content {
        padding: 32px 24px;
    }
    
    .testimonial-placeholder-title {
        font-size: 20px;
    }
    
    .testimonial-placeholder-text {
        font-size: 15px;
    }
    
    .testimonial-placeholder-features {
        gap: 16px;
    }
    
    .feature-item {
        padding: 12px;
        min-width: 70px;
    }
    
    .testimonial-placeholder-button {
        padding: 14px 28px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .testimonial-placeholder-features {
        gap: 12px;
    }
    
    .feature-item {
        padding: 10px;
        min-width: 60px;
    }
    
    .feature-icon {
        font-size: 20px;
    }
    
    .testimonial-placeholder-button {
        padding: 12px 24px;
        font-size: 13px;
    }
}

.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animaciones personalizadas */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    33% { transform: translateY(-20px) rotate(2deg) scale(1.05); }
    66% { transform: translateY(-10px) rotate(-1deg) scale(0.98); }
    100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

@keyframes float-medium {
    0%, 100% { transform: translateY(0px) rotate(12deg) scale(1); }
    25% { transform: translateY(-15px) rotate(15deg) scale(1.02); }
    50% { transform: translateY(-25px) rotate(8deg) scale(0.95); }
    75% { transform: translateY(-5px) rotate(18deg) scale(1.08); }
    100% { transform: translateY(0px) rotate(12deg) scale(1); }
}

@keyframes float-fast {
    0%, 100% { transform: translateY(0px) rotate(-12deg) scale(1); }
    50% { transform: translateY(-18px) rotate(-8deg) scale(1.1); }
}

@keyframes float-reverse {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(25px) rotate(-5deg) scale(1.05); }
}

@keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0px); }
    25% { transform: translateY(-8px); }
    50% { transform: translateY(-15px); }
    75% { transform: translateY(-5px); }
}

@keyframes draw-line {
    0% { stroke-dasharray: 0, 1000; }
    50% { stroke-dasharray: 500, 500; }
    100% { stroke-dasharray: 1000, 0; }
}

@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-reverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes float-particle-delayed {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(90deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
    75% { transform: translateY(-15px) rotate(270deg); }
}

@keyframes float-particle-slow {
    0%, 100% { transform: translateY(0px) scale(1); }
    33% { transform: translateY(-20px) scale(1.1); }
    66% { transform: translateY(-10px) scale(0.9); }
}

@keyframes morph-orb {
    0% { transform: scale(1) rotate(0deg); border-radius: 50%; }
    25% { transform: scale(1.2) rotate(90deg); border-radius: 30% 70% 70% 30%; }
    50% { transform: scale(0.8) rotate(180deg); border-radius: 70% 30% 30% 70%; }
    75% { transform: scale(1.1) rotate(270deg); border-radius: 40% 60% 60% 40%; }
    100% { transform: scale(1) rotate(360deg); border-radius: 50%; }
}

@keyframes morph-orb-reverse {
    0% { transform: scale(1) rotate(360deg); border-radius: 50%; }
    25% { transform: scale(0.9) rotate(270deg); border-radius: 60% 40% 40% 60%; }
    50% { transform: scale(1.3) rotate(180deg); border-radius: 30% 70% 70% 30%; }
    75% { transform: scale(0.7) rotate(90deg); border-radius: 80% 20% 20% 80%; }
    100% { transform: scale(1) rotate(0deg); border-radius: 50%; }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.8; transform: scale(1); box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); }
    50% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 40px rgba(99, 102, 241, 0.8); }
}

@keyframes matrix-rain {
    0% { transform: translateY(-100vh); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes energy-ripple {
    0% { transform: scale(0.5); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(2.5); opacity: 0; }
}

@keyframes draw-line-reverse {
    0% { stroke-dasharray: 1000, 0; }
    50% { stroke-dasharray: 500, 500; }
    100% { stroke-dasharray: 0, 1000; }
}

@keyframes orbit-slow {
    0% { transform: rotate(0deg) translateX(20px) rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) translateX(25px) rotate(-90deg) scale(1.1); }
    50% { transform: rotate(180deg) translateX(20px) rotate(-180deg) scale(0.9); }
    75% { transform: rotate(270deg) translateX(25px) rotate(-270deg) scale(1.05); }
    100% { transform: rotate(360deg) translateX(20px) rotate(-360deg) scale(1); }
}

@keyframes spiral-medium {
    0% { transform: rotate(45deg) scale(1) translateY(0px); }
    25% { transform: rotate(135deg) scale(1.15) translateY(-10px); }
    50% { transform: rotate(225deg) scale(0.85) translateY(-20px); }
    75% { transform: rotate(315deg) scale(1.2) translateY(-5px); }
    100% { transform: rotate(405deg) scale(1) translateY(0px); }
}

@keyframes wiggle-fast {
    0%, 100% { transform: rotate(-12deg) translateX(0px) translateY(0px) scale(1); }
    10% { transform: rotate(-8deg) translateX(2px) translateY(-2px) scale(1.05); }
    20% { transform: rotate(-15deg) translateX(-1px) translateY(1px) scale(0.95); }
    30% { transform: rotate(-10deg) translateX(3px) translateY(-1px) scale(1.1); }
    40% { transform: rotate(-18deg) translateX(-2px) translateY(2px) scale(0.9); }
    50% { transform: rotate(-6deg) translateX(1px) translateY(-3px) scale(1.08); }
    60% { transform: rotate(-14deg) translateX(-3px) translateY(1px) scale(0.92); }
    70% { transform: rotate(-9deg) translateX(2px) translateY(-1px) scale(1.12); }
    80% { transform: rotate(-16deg) translateX(-1px) translateY(3px) scale(0.88); }
    90% { transform: rotate(-11deg) translateX(1px) translateY(-2px) scale(1.06); }
}

@keyframes float-particle {
    0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.6; }
    25% { transform: translateY(-15px) translateX(5px) scale(1.2); opacity: 0.9; }
    50% { transform: translateY(-25px) translateX(-3px) scale(0.8); opacity: 0.4; }
    75% { transform: translateY(-10px) translateX(8px) scale(1.1); opacity: 0.7; }
}

@keyframes float-particle-delayed {
    0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.7; }
    33% { transform: translateY(-20px) translateX(-6px) scale(1.3); opacity: 0.3; }
    66% { transform: translateY(-12px) translateX(4px) scale(0.9); opacity: 0.8; }
}

@keyframes float-particle-slow {
    0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.5; }
    50% { transform: translateY(-18px) translateX(2px) scale(1.15); opacity: 0.9; }
}

@keyframes connection-flow {
    0% { stroke-dasharray: 0, 2000; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 1000, 1000; stroke-dashoffset: -500; }
    100% { stroke-dasharray: 2000, 0; stroke-dashoffset: -2000; }
}

@keyframes connection-flow-reverse {
    0% { stroke-dasharray: 2000, 0; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 1000, 1000; stroke-dashoffset: 500; }
    100% { stroke-dasharray: 0, 2000; stroke-dashoffset: 2000; }
}

/* Clases de animación */
.animate-float-slow {
    animation: float-slow 8s ease-in-out infinite;
}

.animate-float-medium {
    animation: float-medium 6s ease-in-out infinite;
}

.animate-float-fast {
    animation: float-fast 4s ease-in-out infinite;
}

.animate-float-reverse {
    animation: float-reverse 7s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}

.animate-draw-line {
    animation: draw-line 8s linear infinite;
}

.animate-morph-orb {
    animation: morph-orb 6s ease-in-out infinite;
}

.animate-morph-orb-reverse {
    animation: morph-orb-reverse 8s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

.animate-matrix-rain {
    animation: matrix-rain 4s linear infinite;
}

.animate-energy-ripple {
    animation: energy-ripple 3s ease-out infinite;
}

.animate-shei-float {
    animation: shei-float 6s ease-in-out infinite;
}

.animate-shei-spin {
    animation: shei-spin 8s linear infinite;
}

.animate-shei-bounce {
    animation: shei-bounce 4s ease-in-out infinite;
}

.animate-shei-orbit {
    animation: shei-orbit 12s linear infinite;
}

.animate-shei-wiggle {
    animation: shei-wiggle 3s ease-in-out infinite;
}

.animate-shei-glow {
    animation: shei-glow 2s ease-in-out infinite;
}

.animate-shei-pulse {
    animation: shei-pulse 2.5s ease-in-out infinite;
}

.animate-shei-ripple {
    animation: shei-ripple 4s ease-out infinite;
}

.animate-shei-orbit-large {
    animation: shei-orbit-large 15s linear infinite;
}

.animate-shei-glow-intense {
    animation: shei-glow-intense 3s ease-in-out infinite;
}

.animate-shei-spiral-bounce {
    animation: shei-spiral-bounce 7s ease-in-out infinite;
}

.animate-shei-ripple-fast {
    animation: shei-ripple-fast 2s ease-out infinite;
}

.animate-shei-wiggle-rotate {
    animation: shei-wiggle-rotate 4s ease-in-out infinite;
}

.animate-shei-pulse-slow {
    animation: shei-pulse-slow 5s ease-in-out infinite;
}

.animate-draw-line-reverse {
    animation: draw-line-reverse 10s linear infinite;
}

.animate-orbit-slow {
    animation: orbit-slow 12s ease-in-out infinite;
}

.animate-spiral-medium {
    animation: spiral-medium 8s ease-in-out infinite;
}

.animate-wiggle-fast {
    animation: wiggle-fast 2s ease-in-out infinite;
}

.animate-float-particle {
    animation: float-particle 6s ease-in-out infinite;
}

.animate-float-particle-delayed {
    animation: float-particle-delayed 7s ease-in-out infinite 2s;
}

.animate-float-particle-slow {
    animation: float-particle-slow 9s ease-in-out infinite 1s;
}

.animate-connection-flow {
    animation: connection-flow 12s linear infinite;
}

.animate-connection-flow-reverse {
    animation: connection-flow-reverse 15s linear infinite;
}

/* Efectos de hover mejorados */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

/* Sombras personalizadas */
.shadow-3xl {
    box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Filtros mejorados para el logo SHEI */
.filter.brightness-200 {
    filter: brightness(2) contrast(1.2);
}

.filter.brightness-150 {
    filter: brightness(1.5) contrast(1.1);
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}

.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}

.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}











.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}











.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}











.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}











.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}











.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}











.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}











.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}
/* Añadir al final del archivo */

/* Efectos de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradientes animados */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-l1), var(--primary-color-4));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botones modernos */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-modern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-modern:hover:before {
  width: 100%;
}

/* Efectos de hover para tarjetas */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
 

.inicio, .footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-4) 100%);
}











.testimonial-container {
    overflow: hidden;
    white-space: nowrap;   
    width: 100%;
    position: relative;
}

/* Estilos del carrusel */
.testimonial-slider {
    display: inline-flex;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    gap: 1rem;            /* espacio real entre cards */
}

.testimonial-slide {
    flex: 0 0 85%;        /* 85 % del ancho visible en móvil */
    scroll-snap-align: start;
}

/* Asegura que las tarjetas tengan el mismo alto */
.testimonial-slide > div {
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slide > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ocultar barra de scroll en navegadores WebKit */
.testimonial-container::-webkit-scrollbar { display: none; }

/* Responsive */
@media (min-width: 640px) {
    .testimonial-slide {
        flex: 0 0 45%;
    }
}
@media (min-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 30%;
    }
}

@media (max-width: 639px) {
    .testimonial-slider {
        justify-content: center;
    }

    .mobile-icon, .logo-footer {
        height: 50px;
    }
}