:root { --violet: #7c3aed; /* violeta para los checks */ --dash-gray: #cbd5e1; /* slate-300 */ --dash-gray-dark: #475569; /* slate-600 */ --table-bg-light: #f3f0ff; /* violeta muy claro más morado */ --table-border-light: #d4c5ff; /* borde violeta claro */ --row-hover-light: #ede9fe; /* hover violeta suave */ --table-bg-dark: #1e1b4b; /* violeta oscuro */ --table-border-dark: #312e81; --row-hover-dark: #241f62; } .recommended-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #874EE3 0%, #6B46C1 100%); color: white; padding: 6px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 15px rgba(135, 78, 227, 0.3); } .recommended-plan { border: 2px solid #874EE3 !important; box-shadow: 0 0 30px rgba(135, 78, 227, 0.2) !important; transform: scale(1.05); } .recommended-plan .btn { background: linear-gradient(135deg, #874EE3 0%, #6B46C1 100%) !important; color: white !important; border: none !important; } .billing-toggle { position: relative; display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; padding: 6px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .dark .billing-toggle { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); } .toggle-option { position: relative; padding: 12px 24px; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } .toggle-option.active { color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Base: negro en modo claro */ .toggle-slider { position: absolute; top: 6px; left: 6px; height: calc(100% - 12px); width: calc(50% - 6px); background: #000; /* <- antes era el degradado morado */ border-radius: 25px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* sombra neutra para negro */ } /* Modo oscuro: blanco */ .dark .toggle-slider, .tw-dark .toggle-slider { /* añade soporte si usas `tw-dark` en */ background: #fff; box-shadow: 0 4px 12px rgba(255, 255, 255, 0.35); } /* Mantén el movimiento del slider */ .toggle-slider.yearly { transform: translateX(100%); } /* En dark, el texto activo debe ser oscuro para contrastar con el slider blanco */ .dark .toggle-option.active, .tw-dark .toggle-option.active { color: #111827; /* casi negro */ text-shadow: none; /* evita halo sobre fondo blanco */ } .savings-badge { position: absolute; top: -8px; right: -8px; background: linear-gradient(135deg, #8b5cf6, #a855f7); /* verde menta */ color: white; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35); } /* ========= CONTENEDORES ========= */ .comparison-shell { background: transparent !important; border-radius: 1rem; overflow: hidden; border: 1px solid var(--table-border-light); } .dark .comparison-shell { background: transparent !important; border: 1px solid var(--table-border-dark); } .comparison-scroll { -webkit-overflow-scrolling: touch; border-radius: 1rem; overflow: hidden; } /* ========= BORDES REDONDEADOS ========= */ /* Esquinas superiores */ .comparison-shell thead th:first-child { border-top-left-radius: 1rem; } .comparison-shell thead th:last-child { border-top-right-radius: 1rem; } /* Esquinas inferiores - última fila */ .comparison-shell tbody:last-child tr:last-child td:first-child, .comparison-shell tr:last-child td:first-child { border-bottom-left-radius: 1rem; } .comparison-shell tbody:last-child tr:last-child td:last-child, .comparison-shell tr:last-child td:last-child { border-bottom-right-radius: 1rem; } /* ========= ENCABEZADO ========= */ .table-header { border-bottom: 2px solid var(--table-border-light); } .table-header th:first-child { border-right: 1px solid var(--table-border-light); } .table-header tr>th { /* background: var(--table-bg-light); <-- retirado */ } .dark .table-header { border-bottom: 2px solid var(--table-border-dark); } .dark .table-header th:first-child { border-right: 1px solid var(--table-border-dark); } .dark .table-header tr>th { /* background: var(--table-bg-dark); <-- retirado */ } .plan-col { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .plan-name { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: #111827; } .dark .plan-name { color: #e5e7eb; } /* Botones */ .plan-btn { display: inline-block; border-radius: 9999px; padding: .4rem 1rem; font-weight: 600; background: var(--violet); transition: all .15s; } .plan-btn:hover { filter: brightness(.95); } .plan-btn--outline { background: transparent; border: 1px solid #d1d5db; } .dark .plan-btn--outline { color: #e5e7eb; border-color: #374151; } .dark .plan-btn--outline:hover { background: #1f2937; } /* ========= CUERPO ========= */ .feature-row { border-bottom: 1px solid var(--table-border-light); transition: background-color .15s ease; } .feature-row:hover { /* background-color: var(--row-hover-light); <-- retirado */ } /* Quitar border-bottom de la última fila para que se vea el borde redondeado */ .feature-row:last-child { border-bottom: none; } .dark .feature-row { border-bottom: 1px solid var(--table-border-dark); } .dark .feature-row:last-child { border-bottom: none; } .dark .feature-row:hover { /* background-color: var(--row-hover-dark); <-- retirado */ } .category-header td { border-top: 2px solid var(--table-border-light); border-bottom: 2px solid var(--table-border-light); padding: 1.5rem 1rem; font-size: 1rem; font-weight: 700; background-color: var(--table-bg-light); } /* Quitar border-right de category-header */ .category-header td:first-child { /* Sin border-right */ } .dark .category-header td { border-top: 2px solid var(--table-border-dark); border-bottom: 2px solid var(--table-border-dark); background-color: var(--table-bg-dark); } .dark .category-header td:first-child { /* Sin border-right */ } /* espacio extra justo después de cada categoría */ .category-header+.feature-row td { padding-top: 1.1rem; } /* Celdas */ .cell-title { padding: 1rem; border-right: 1px solid var(--table-border-light); } .dark .cell-title { color: #e5e7eb; border-right: 1px solid var(--table-border-dark); } .cell-check, .cell-dash, .cell-value, .cell-note { padding: 1rem; text-align: center; } .dark .cell-check, .dark .cell-dash, .dark .cell-value, .dark .cell-note { color: #e5e7eb; } /* Checks morados por defecto */ .cell-check i { font-size: 1.25rem; color: var(--violet); } /* Guiones centrados */ .cell-dash { display: flex; justify-content: center; align-items: center; } .cell-dash i { font-size: 1.25rem; color: var(--dash-gray); } .dark .cell-dash i { color: var(--dash-gray-dark); } /* El contenedor debe scrollear en X */ .comparison-scroll { width: 100%; max-width: 100vw; overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* Haz que la tabla siempre sea más ancha que el viewport para obligar el scroll */ .comparison-scroll>table { width: max-content; /* ocupa lo que necesite */ min-width: 100%; /* sube este número si hace falta */ table-layout: auto; border-radius: 1rem; overflow: hidden; } /* Por si algún padre lo está bloqueando */ html, body, section, .comparison-shell { overflow-x: visible !important; max-width: 100vw; } /* Asegurar que el contenedor de la tabla tenga bordes redondeados */ .comparison-shell table { border-collapse: separate; border-spacing: 0; border-radius: 1rem; overflow: hidden; } /* ========= RESPONSIVE ========= */ @media (prefers-color-scheme: dark){ .comparison-shell{ background-color: transparent !important; border: 1px solid var(--table-border-dark); } } /* Animaciones CSS */ .fade-in-up { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .fade-in-up.animate { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .fade-in-left.animate { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .fade-in-right.animate { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.8); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .scale-in.animate { opacity: 1; transform: scale(1); } .timeline-item { opacity: 0; transform: translateX(-50px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .timeline-item.animate { opacity: 1; transform: translateX(0); } .logo-item { opacity: 0; transform: translateY(20px) scale(0.9); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .logo-item.animate { opacity: 1; transform: translateY(0) scale(1); } .logo-item:hover { transform: translateY(-5px) scale(1.05); } .stat-number { font-size: 3rem; font-weight: bold; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pulse-glow { animation: pulseGlow 2s ease-in-out infinite alternate; } @keyframes pulseGlow { from { box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); } to { box-shadow: 0 0 30px rgba(118, 75, 162, 0.5); } } .floating { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .bounce-in { opacity: 0; transform: scale(0.3); transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .bounce-in.animate { opacity: 1; transform: scale(1); } .stagger-delay-1 { transition-delay: 0.1s; } .stagger-delay-2 { transition-delay: 0.2s; } .stagger-delay-3 { transition-delay: 0.3s; } .stagger-delay-4 { transition-delay: 0.4s; } .stagger-delay-5 { transition-delay: 0.5s; } .stagger-delay-6 { transition-delay: 0.6s; } /* En móvil desactiva animaciones/transform en la imagen */ @media (max-width: 768px){ .team-image{ transform: none !important; } .floating{ animation: none !important; } /* flotante off en móvil */ }