/* CSS Variables - PALETA MAESTRA UNIFICADA */
:root {
/* ===== COLORES BASE ===== */
--color-primary: #3b82f6;
--color-primary-dark: #2563eb;
--color-primary-light: #60a5fa;
--color-secondary: #64748b;
--color-accent: #f59e0b;
--color-accent-dark: #d97706;
--color-success: #10b981;
--color-success-dark: #059669;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-error-dark: #dc2626;
--color-gold: #ffd700;
/* ===== FONDOS PRINCIPALES ===== */
--color-bg-primary: #0f172a; /* Fondo principal oscuro */
--color-bg-secondary: #1e293b; /* Fondo secundario */
--color-bg-light: #ffffff; /* Fondo claro (modo claro) */
--color-bg-light-secondary: #f8fafc; /* Fondo secundario claro */
--color-bg-overlay: rgba(15, 23, 42, 0.8);
--color-bg-overlay-strong: rgba(15, 23, 42, 0.95);
--color-bg-overlay-modal: rgba(15, 23, 42, 0.98);
--color-bg-special: #dcfce7; /* Fondo verde claro especial */
/* ===== FONDOS DE TARJETAS ===== */
--color-bg-card: #1e293b;
--color-bg-card-hover: #334155;
--color-bg-card-light: #ffffff;
--color-bg-card-transparent: rgba(255, 255, 255, 0.05);
--color-bg-card-transparent-hover: rgba(255, 255, 255, 0.08);
--color-bg-card-transparent-strong: rgba(255, 255, 255, 0.12);
--color-bg-card-semi: rgba(255, 255, 255, 0.95);
--color-bg-card-accent: rgba(59, 130, 246, 0.1);
/* ===== TEXTO PRINCIPAL ===== */
--color-text-primary: #f8fafc; /* Texto principal (modo oscuro) */
--color-text-primary-light: #1e293b; /* Texto principal (modo claro) */
--color-text-white: #ffffff;
--color-text-white-alt: #fff;
--color-text-gold: #ffd700;
/* ===== TEXTO SECUNDARIO ===== */
--color-text-secondary: #cbd5e1;
--color-text-secondary-light: #64748b;
--color-text-muted: #94a3b8;
--color-text-white-90: rgba(255, 255, 255, 0.9);
--color-text-white-80: rgba(255, 255, 255, 0.8);
--color-text-white-70: rgba(255, 255, 255, 0.7);
--color-text-white-50: rgba(255, 255, 255, 0.5);
--color-text-white-10: rgba(255, 255, 255, 0.1);
--color-text-card-title: rgba(248, 250, 252, 0.95);
--color-text-card-desc: rgba(148, 163, 184, 0.9);
/* ===== BORDES ===== */
--color-border: rgba(255, 255, 255, 0.1);
--color-border-light: #e2e8f0;
--color-border-strong: rgba(255, 255, 255, 0.2);
--color-border-accent: rgba(59, 130, 246, 0.2);
--color-border-accent-hover: rgba(59, 130, 246, 0.3);
--color-border-accent-strong: rgba(59, 130, 246, 0.4);
--color-border-hover: rgba(255, 255, 255, 0.5);
/* ===== GRADIENTES PRINCIPALES ===== */
--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
--gradient-secondary: linear-gradient(135deg, #64748b 0%, #475569 100%);
--gradient-accent: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
--gradient-error: linear-gradient(135deg, #ef4444, #dc2626);
--gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
--gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
/* ===== GRADIENTES REDES SOCIALES ===== */
--gradient-whatsapp: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
--gradient-telegram: linear-gradient(135deg, #0088cc 0%, #005577 100%);
--gradient-facebook: linear-gradient(135deg, #1877F2 0%, #0d47a1 100%);
--gradient-instagram: linear-gradient(135deg, #E4405F 0%, #833AB4 50%, #F77737 100%);
--gradient-youtube: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
/* ===== GRADIENTES DECORATIVOS ===== */
--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-cyan: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--gradient-green: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
--gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
--gradient-pastel: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
--gradient-bg-accent: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(245, 158, 11, 0.1));
--gradient-bg-radial: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%);
--gradient-card-hover: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
--gradient-card-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
--gradient-card-glass-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
--gradient-card-glass-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
--gradient-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
/* ===== SOMBRAS ===== */
--shadow-black-05: rgba(0, 0, 0, 0.05);
--shadow-black-1: rgba(0, 0, 0, 0.1);
--shadow-black-15: rgba(0, 0, 0, 0.15);
--shadow-black-2: rgba(0, 0, 0, 0.2);
--shadow-black-3: rgba(0, 0, 0, 0.3);
--shadow-black-4: rgba(0, 0, 0, 0.4);
--shadow-black-5: rgba(0, 0, 0, 0.5);
--shadow-accent: rgba(59, 130, 246, 0.3);
--shadow-accent-hover: rgba(59, 130, 246, 0.4);
/* ===== COLORES REDES SOCIALES ===== */
--color-whatsapp: #25D366;
--color-whatsapp-dark: #128C7E;
--color-telegram: #0088cc;
--color-telegram-dark: #005577;
--color-facebook: #1877F2;
--color-facebook-dark: #0d47a1;
--color-instagram: #E4405F;
--color-youtube: #FF0000;
--color-youtube-dark: #CC0000;
/* ===== COMPATIBILIDAD (Variables Existentes) ===== */
--primary: var(--color-primary);
--primary-dark: var(--color-primary-dark);
--primary-light: var(--color-primary-light);
--secondary: var(--color-secondary);
--accent: var(--color-accent);
--success: var(--color-success);
--warning: var(--color-warning);
--error: var(--color-error);
--bg-primary: var(--color-bg-light);
--bg-secondary: var(--color-bg-light-secondary);
--bg-card: var(--color-bg-card-light);
--bg-card-dark: var(--color-bg-card);
--bg-card-dark-hover: var(--color-bg-card-hover);
--bg-dark: var(--color-bg-primary);
--bg-overlay: var(--color-bg-overlay);
--text-primary: var(--color-text-primary-light);
--text-secondary: var(--color-text-secondary-light);
--text-muted: var(--color-text-muted);
--text-white: var(--color-text-white);
--text-white-90: var(--color-text-white-90);
--text-white-70: var(--color-text-white-70);
--text-white-50: var(--color-text-white-50);
--text-white-10: var(--color-text-white-10);
--text-dark-primary: var(--color-text-primary);
--text-dark-secondary: var(--color-text-secondary);
--border-color: var(--color-border-light);
--border-color-dark: var(--color-border);
/* ===== SISTEMA DE DISEÑO ===== */
--border-radius-main: 12px;
--border-radius-sm: 8px;
--border-radius-lg: 16px;
--border-radius: var(--border-radius-main);
/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
--spacing-3xl: 64px;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 30px;
--font-size-4xl: 36px;
--font-size-5xl: 48px;
--font-size-6xl: 60px;
/* Gradients */
--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
--gradient-secondary: linear-gradient(135deg, #64748b 0%, #475569 100%);
--gradient-accent: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-dark-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
--shadow-dark-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
/* Transitions */
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===== ESTILOS ESPECÍFICOS PARA MODAL DE DEMO ===== */
/* Usando selectores muy específicos para evitar conflictos */
/* Header del modal de demo mejorado */
#modal-crear-demo .modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 25px;
border-radius: 12px 12px 0 0;
position: relative;
overflow: hidden;
}
#modal-crear-demo .modal-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
#modal-crear-demo .modal-title {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
position: relative;
z-index: 1;
}
/* Paso de verificación OTP mejorado */
#modal-crear-demo .demo-otp-step .otp-header {
text-align: center;
margin-bottom: 25px;
padding: 20px;
background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
border-radius: 12px;
color: #4338ca;
position: relative;
overflow: hidden;
border: 1px solid #c7d2fe;
}
#modal-crear-demo .demo-otp-step .otp-header::before {
content: '📱';
position: absolute;
top: -10px;
right: -10px;
font-size: 3rem;
opacity: 0.2;
}
#modal-crear-demo .demo-otp-step .otp-header h3 {
margin: 0 0 8px 0;
font-size: 1.3rem;
font-weight: 600;
}
#modal-crear-demo .demo-otp-step .otp-header p {
margin: 0;
opacity: 0.9;
font-size: 0.95rem;
}
/* Campos de entrada mejorados específicos del modal */
#modal-crear-demo .form-group {
margin-bottom: 20px;
}
#modal-crear-demo .form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #374151 !important;
font-size: 0.95rem;
}
#modal-crear-demo .form-input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
background: #fafafa;
color: #374151 !important;
}
#modal-crear-demo .form-input::placeholder {
color: #9ca3af !important;
opacity: 1;
}
#modal-crear-demo .form-input:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
transform: translateY(-1px);
}
/* Selector de país específico */
#modal-crear-demo #demo-country-select {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
appearance: none;
}
/* Contenedor de teléfono mejorado */
#modal-crear-demo .phone-input-container {
display: flex;
align-items: center;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: #fafafa;
transition: all 0.3s ease;
overflow: hidden;
}
#modal-crear-demo .phone-input-container:focus-within {
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
transform: translateY(-1px);
}
#modal-crear-demo .country-code {
padding: 12px 16px;
background: #f3f4f6;
border-right: 1px solid #e5e7eb;
font-weight: 500;
color: #6b7280 !important;
min-width: 60px;
text-align: center;
}
#modal-crear-demo .phone-input {
border: none !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
flex: 1;
margin: 0;
}
/* Botones mejorados específicos del modal */
#modal-crear-demo .demo-submit-btn,
#modal-crear-demo .demo-otp-submit-btn {
width: 100%;
padding: 14px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}
#modal-crear-demo .demo-submit-btn:hover,
#modal-crear-demo .demo-otp-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
/* Campo OTP específico */
#modal-crear-demo .otp-input {
text-align: center;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.1em;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
/* Información de verificación */
#modal-crear-demo .otp-verification-header {
text-align: center;
margin-bottom: 20px;
padding: 15px;
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
border-radius: 8px;
color: #1e40af;
border: 1px solid #bfdbfe;
}
#modal-crear-demo .otp-verification-header h4 {
margin: 0 0 8px 0;
font-size: 1.1rem;
}
#modal-crear-demo .otp-verification-header p {
margin: 4px 0;
opacity: 0.9;
font-size: 0.9rem;
}
#modal-crear-demo .phone-display {
font-weight: 500;
background: rgba(255, 255, 255, 0.2);
padding: 8px 12px;
border-radius: 6px;
margin-top: 8px;
}
/* Información de validez del demo */
#modal-crear-demo .demo-validity-info {
text-align: center;
margin-top: 15px;
padding: 10px;
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
border-radius: 6px;
color: #8b4513;
font-size: 0.9rem;
font-weight: 500;
}
/* Animaciones suaves */
#modal-crear-demo .demo-otp-step {
animation: slideInUp 0.4s ease-out;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Asegurar que todos los textos sean visibles */
#modal-crear-demo .modal-body {
color: #374151 !important;
}
#modal-crear-demo .modal-body * {
color: inherit;
}
#modal-crear-demo .modal-body label,
#modal-crear-demo .modal-body p,
#modal-crear-demo .modal-body span:not(.country-code) {
color: #374151 !important;
}
#modal-crear-demo select option {
color: #374151 !important;
background: white !important;
}
/* Responsive para el modal */
@media (max-width: 768px) {
#modal-crear-demo .modal-header {
padding: 15px 20px;
}
#modal-crear-demo .modal-title {
font-size: 1.3rem;
}
#modal-crear-demo .otp-header h3 {
font-size: 1.1rem;
}
#modal-crear-demo .form-input {
padding: 10px 14px;
}
}
/* ========================================
PALETA CLARA (LIGHT MODE)
======================================== */
body.light-mode {
/* ===== CONTRASTE VISUAL CORRECTO ===== */
/* 1. FONDO DE PÁGINA (Gris Sutil) */
--color-bg-primary: #f8fafc; /* Era: #0f172a - Fondo principal */
--color-bg-secondary: #f1f5f9; /* Era: #1e293b - Fondo secundario */
--bg-primary: #f8fafc; /* Era: #0f172a */
--bg-secondary: #f1f5f9; /* Era: #1e293b */
--bg-tertiary: #e2e8f0; /* Era: #334155 */
--bg-quaternary: #cbd5e1; /* Era: #475569 */
--bg-dark: #f8fafc; /* Era: #0f172a */
/* 2. FONDO DE TARJETAS (Blanco Puro para CONTRASTE) */
--color-bg-card: #ffffff; /* Era: #1e293b - ¡VARIABLE CLAVE! */
--color-bg-card-hover: #f8fafc; /* Era: #334155 */
--color-bg-card-light: #ffffff; /* Ya era #ffffff */
--color-bg-card-transparent: rgba(255, 255, 255, 0.95);
--color-bg-card-transparent-hover: rgba(255, 255, 255, 0.98);
--color-bg-card-transparent-strong: rgba(255, 255, 255, 1);
--color-bg-card-semi: rgba(255, 255, 255, 0.98);
--bg-card: #ffffff; /* Era: #1e293b - ¡VARIABLE CLAVE! */
--bg-card-dark: #ffffff; /* Era: #1e293b - ¡VARIABLE CLAVE! */
--bg-card-dark-hover: #f8fafc; /* Era: #334155 */
/* 3. TEXTO (Invertido para Contraste) */
--color-text-primary: #0f172a; /* Era: #f8fafc */
--color-text-secondary: #334155; /* Era: #cbd5e1 */
--color-text-tertiary: #475569; /* Era: #94a3b8 */
--color-text-muted: #64748b; /* Era: #64748b */
--color-text-disabled: #94a3b8; /* Era: #475569 */
--text-primary: #0f172a; /* Era: #f8fafc */
--text-secondary: #334155; /* Era: #cbd5e1 */
--text-tertiary: #475569; /* Era: #94a3b8 */
--text-muted: #64748b; /* Era: #64748b */
--text-disabled: #94a3b8; /* Era: #475569 */
/* 4. BORDES (Para Separar Elementos) */
--color-border: #e2e8f0; /* Era: rgba(255,255,255,0.1) */
--color-border-light: #f1f5f9; /* Era: rgba(255,255,255,0.05) */
--color-border-dark: #cbd5e1; /* Era: rgba(255,255,255,0.02) */
--border-primary: #e2e8f0; /* Era: rgba(255,255,255,0.1) */
--border-secondary: #cbd5e1; /* Era: rgba(255,255,255,0.05) */
--border-tertiary: #94a3b8; /* Era: rgba(255,255,255,0.02) */
--border-color: #e2e8f0; /* Variable genérica */
/* 5. OVERLAYS (Adaptados) */
--color-bg-overlay: rgba(0, 0, 0, 0.1);
--color-bg-overlay-strong: rgba(0, 0, 0, 0.3);
--color-bg-overlay-modal: rgba(0, 0, 0, 0.5);
--bg-overlay: rgba(0, 0, 0, 0.1);
--overlay-light: rgba(0, 0, 0, 0.1);
--overlay-medium: rgba(0, 0, 0, 0.3);
--overlay-strong: rgba(0, 0, 0, 0.5);
--overlay-modal: rgba(0, 0, 0, 0.6);
/* 6. SOMBRAS (Más Visibles en Modo Claro) */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
/* 7. GRADIENTES (Invertidos) */
--gradient-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
--gradient-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
--gradient-hero: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
/* 8. COLORES QUE SE MANTIENEN */
--color-primary: #3b82f6;
--color-secondary: #64748b;
--color-accent: #8b5cf6;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--primary: #3b82f6;
--primary-dark: #1d4ed8;
/* 9. VARIABLES ESPECÍFICAS ADICIONALES */
--color-bg-hover: #f1f5f9;
--color-bg-light: #ffffff;
--color-bg-light-secondary: #f8fafc;
--color-bg-special: #dcfce7;
/* Variables de fondo adicionales para tarjetas */
--color-bg-secondary: #ffffff;
--color-bg-card-hover: #f8fafc;
--color-border-dark: #cbd5e1;
/* Variables específicas de componentes */
--bg-card: var(--color-bg-card);
--bg-card-transparent: rgba(255, 255, 255, 0.9);
--bg-overlay: rgba(0, 0, 0, 0.1);
--bg-modal: var(--color-bg-card);
--bg-dropdown: var(--color-bg-card);
--bg-tooltip: var(--color-bg-card);
--bg-header: rgba(255, 255, 255, 0.95);
--bg-footer: var(--color-bg-card);
--bg-section: transparent;
/* Variables de texto para navegación y hero */
--color-nav-link: var(--color-text-primary);
--color-nav-link-hover: var(--color-primary);
--color-hero-title: var(--color-text-primary);
--color-hero-title-accent: var(--color-primary);
--color-hero-description: var(--color-text-secondary);
--color-hero-stats-number: var(--color-text-primary);
--color-hero-stats-label: var(--color-text-secondary);
}
/* ===== ESTILOS ESPECÍFICOS PARA MODO CLARO ===== */
body.light-mode .faq-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
body.light-mode .faq-card:hover {
background: var(--color-bg-card-hover);
border-color: var(--color-border-dark);
box-shadow: var(--shadow-lg);
}
body.light-mode .faq-card.active {
background: var(--color-bg-card);
border-color: var(--color-primary);
box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary);
}
body.light-mode .faq-content {
background: var(--color-bg-card);
border-top: 1px solid var(--color-border);
}
body.light-mode .contact-item {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
body.light-mode .contact-item:hover {
background: var(--color-bg-card-hover);
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
body.light-mode .contact-info-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
body.light-mode .social-media-wrapper {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
/* Tarjetas de Precios en Modo Claro */
body.light-mode .pricing-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
body.light-mode .pricing-card:hover {
background: var(--color-bg-card);
border-color: var(--color-border-dark);
box-shadow: var(--shadow-xl);
}
body.light-mode .pricing-card.featured {
background: var(--color-bg-card);
border: 2px solid var(--color-primary);
box-shadow: var(--shadow-lg);
}
/* Tarjetas de Descarga en Modo Claro */
body.light-mode .download-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
body.light-mode .download-card:hover {
background: var(--color-bg-card);
border-color: var(--color-primary);
box-shadow: var(--shadow-xl);
}
/* Tarjetas de Características en Modo Claro */
body.light-mode .feature-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
body.light-mode .feature-card:hover {
background: var(--color-bg-card-hover);
border-color: var(--color-border-dark);
box-shadow: var(--shadow-md);
}
/* Tarjetas de Apps en Modo Claro */
body.light-mode .app-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
body.light-mode .app-card:hover {
background: var(--color-bg-card-hover);
border-color: var(--color-primary);
box-shadow: var(--shadow-lg);
}
/* ===== SECCIONES ESTRUCTURALES EN MODO CLARO ===== */
/* ========================================
FIX: Opacidad del Overlay del Hero (Modo Claro/Oscuro)
========================================
*/
body.light-mode .hero-overlay {
/* Optimizado: Reducido de 0.45 a 0.2 para mejor visibilidad del video
manteniendo legibilidad del texto
*/
background: rgba(255, 255, 255, 0.2);
}
/* 2. FOOTER - Diseño mejorado para modo claro */
body.light-mode .footer {
background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
color: var(--color-text-primary);
border-top: 1px solid var(--color-border);
}
body.light-mode .footer-title {
color: var(--color-text-primary);
font-weight: 600;
}
body.light-mode .footer-link {
color: var(--color-text-secondary);
transition: all 0.3s ease;
}
body.light-mode .footer-link:hover {
color: var(--color-primary);
transform: translateX(4px);
}
body.light-mode .footer-description {
color: var(--color-text-muted);
line-height: 1.6;
}
body.light-mode .footer-copyright,
body.light-mode .footer-love {
color: var(--color-text-muted);
}
body.light-mode .footer-bottom {
border-top: 1px solid var(--color-border);
}
/* Información de contacto mejorada - Solo colores, sin cambiar estructura */
body.light-mode .contact-info-card {
background: white;
border-color: #e5e7eb;
}
body.light-mode .contact-info-card:hover {
border-color: #3b82f6;
}
body.light-mode .contact-icon svg {
stroke: #3b82f6;
}
body.light-mode .contact-details h4 {
color: var(--color-text-primary);
font-weight: 600;
}
body.light-mode .contact-details p {
color: var(--color-text-secondary);
}
/* 3. BANNER CTA - Diseño mejorado para ambos modos */
.cta-premium-section {
padding: var(--spacing-2xl);
border-radius: var(--border-radius-lg);
margin: var(--spacing-2xl) 0;
text-align: center;
box-shadow: var(--shadow-lg);
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}
.cta-premium-section h3 {
font-size: var(--font-size-2xl);
font-weight: 700;
margin-bottom: var(--spacing-lg);
line-height: 1.2;
color: white;
}
.cta-premium-section p {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: rgba(255, 255, 255, 0.95);
}
.cta-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
.cta-premium-section .btn {
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-size-md);
font-weight: 600;
border-radius: var(--border-radius-md);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
min-width: 180px;
justify-content: center;
text-decoration: none;
}
.cta-premium-section .btn svg {
margin-right: 8px;
}
.cta-premium-section .btn-primary {
background: white;
color: #1e40af;
border: 2px solid white;
}
.cta-premium-section .btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-premium-section .btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.cta-premium-section .btn-primary:hover {
background: rgba(255, 255, 255, 0.95);
color: #1e40af;
}
.cta-premium-section .btn-secondary:hover {
background: white;
color: #1e40af;
}
/* Modo claro - Banner CTA (mantiene los mismos estilos) */
body.light-mode .cta-premium-section {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
border: 1px solid rgba(59, 130, 246, 0.2);
}
body.light-mode .cta-premium-section h3 {
color: white;
}
body.light-mode .cta-premium-section p {
color: rgba(255, 255, 255, 0.95);
}
body.light-mode .cta-premium-section .btn-primary {
background: white;
color: #1e40af;
border: 2px solid white;
}
body.light-mode .cta-premium-section .btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
body.light-mode .cta-premium-section .btn-primary:hover {
background: rgba(255, 255, 255, 0.95);
color: #1e40af;
}
body.light-mode .cta-premium-section .btn-secondary:hover {
background: white;
color: #1e40af;
}
/* ===== TEXTO DE NAVEGACIÓN Y HERO EN MODO CLARO ===== */
/* 1. NAVEGACIÓN - Texto oscuro */
body.light-mode .nav-link {
color: var(--color-nav-link);
}
body.light-mode .nav-link:hover {
color: var(--color-nav-link-hover);
background: rgba(59, 130, 246, 0.1);
}
/* 2. HERO TÍTULO - Texto oscuro */
body.light-mode .hero-title {
color: var(--color-hero-title);
}
body.light-mode .hero-title .accent {
color: var(--color-hero-title-accent);
}
/* 3. HERO DESCRIPCIÓN - Texto oscuro */
body.light-mode .hero-description {
color: var(--color-hero-description);
}
/* 4. HERO ESTADÍSTICAS - Texto oscuro */
body.light-mode .hero-stat-number {
color: var(--color-hero-stats-number);
}
body.light-mode .hero-stat-label {
color: var(--color-hero-stats-label);
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
overflow-x: hidden;
}
/* Utility Classes */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.text-center {
text-align: center;
}
/* Utility Classes - Flexbox and Layout */
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.justify-center {
justify-content: center;
}
.gap-xs {
gap: var(--spacing-xs);
}
.gap-sm {
gap: var(--spacing-sm);
}
.gap-md {
gap: var(--spacing-md);
}
.gap-xl {
gap: var(--spacing-xl);
}
.mb-xs {
margin-bottom: var(--spacing-xs);
}
.mb-sm {
margin-bottom: var(--spacing-sm);
}
.mb-md {
margin-bottom: var(--spacing-md);
}
.mb-lg {
margin-bottom: 12px;
}
.mb-xl {
margin-bottom: var(--spacing-xl);
}
.mt-lg {
margin-top: var(--spacing-lg);
}
.mt-xl {
margin-top: var(--spacing-xl);
}
/* Grid System */
.grid {
display: grid;
gap: var(--spacing-lg);
}
.grid-cols-1 {
grid-template-columns: 1fr;
}
/* Grid Column Classes */
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
/* Responsive Grid Classes */
@media (min-width: 768px) {
.grid-md-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-md-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-md-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Large Screen Grid Classes */
@media (min-width: 1024px) {
.grid-lg-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-lg-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-lg-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Extra Large Screen Grid Classes */
@media (min-width: 1400px) {
.grid-xl-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Mobile-first responsive adjustments */
@media (max-width: 767px) {
.grid-md-2,
.grid-md-3,
.grid-md-4 {
grid-template-columns: 1fr;
}
}
/* Typography */
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.accent {
color: var(--accent);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: 12px 24px;
font-size: var(--font-size-base);
font-weight: 600;
text-decoration: none;
border: none;
border-radius: var(--border-radius-main);
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.btn-primary {
background: var(--gradient-primary);
color: var(--text-white);
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--bg-card);
color: var(--text-primary);
border: 2px solid var(--border-color);
border-radius: var(--border-radius-main);
}
.btn-secondary:hover {
border-color: var(--primary);
color: var(--primary);
}
.btn-lg {
padding: 16px 32px;
font-size: var(--font-size-lg);
border-radius: var(--border-radius-main);
}
/* Cards */
.card {
background: var(--bg-card);
border-radius: var(--border-radius-main);
padding: var(--spacing-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
transition: var(--transition);
}
.card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.card-icon {
width: 48px;
height: 48px;
background: var(--gradient-primary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
color: var(--text-white);
}
.card-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.card-description {
color: var(--text-secondary);
line-height: 1.7;
}
/* Features Section - Dark Theme Cards */
#features .card {
background: var(--bg-card-dark);
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow: var(--shadow-dark-md);
transition: all var(--transition);
padding: 24px;
margin-bottom: var(--spacing-lg);
width: 100%;
box-sizing: border-box;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: auto;
min-height: 250px;
justify-content: flex-start;
}
#features .card:hover {
background: var(--bg-card-dark-hover);
border-color: rgba(59, 130, 246, 0.4);
box-shadow: var(--shadow-dark-lg);
transform: translateY(-4px);
}
#features .card-title {
color: rgba(248, 250, 252, 0.95);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 10px;
line-height: 1.3;
letter-spacing: -0.01em;
text-rendering: optimizeLegibility;
width: 100%;
}
#features .card-description {
color: rgba(148, 163, 184, 0.9);
font-size: 0.775rem;
line-height: 1.6;
margin: 0;
font-weight: 400;
letter-spacing: 0.01em;
text-rendering: optimizeLegibility;
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
height: auto;
overflow: visible;
min-height: 60px;
padding: 0 8px;
}
#features .card-icon {
width: 48px;
height: 48px;
border-radius: 20px;
background: var(--gradient-primary);
color: var(--text-white);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px auto;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
transition: all var(--transition);
flex-shrink: 0;
}
#features .card:hover .card-icon {
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
transform: scale(1.05);
}
/* Features Section - Mobile Responsiveness */
@media (max-width: 767px) {
#features .grid {
gap: 20px;
}
#features .card {
padding: 20px;
margin-bottom: 20px;
text-align: center;
height: auto;
min-height: 240px;
overflow: visible;
}
#features .card-title {
font-size: 1.05rem;
margin-bottom: 8px;
line-height: 1.3;
}
#features .card-description {
font-size: 0.75rem;
line-height: 1.5;
width: 100%;
margin: 0 auto;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 0 4px;
height: auto;
overflow: visible;
min-height: 50px;
}
#features .card-icon {
width: 42px;
height: 42px;
border-radius: 18px;
margin: 0 auto 10px auto;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
#features .grid {
gap: 21px;
}
#features .card {
padding: 22px;
}
#features .card-title {
font-size: 1.05rem;
line-height: 1.3;
margin-bottom: 8px;
}
#features .card-description {
font-size: 0.75rem;
line-height: 1.5;
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
height: auto;
overflow: visible;
min-height: 50px;
}
}
@media (min-width: 1024px) {
#features .grid {
gap: 22px;
}
#features .card {
text-align: center;
}
}
/* Pricing Cards - Specific styling for pricing section */
.pricing-card {
background: var(--bg-card);
border-radius: var(--border-radius-lg);
padding: var(--spacing-2xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.pricing-card:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-8px);
}
.pricing-card.featured {
border: 2px solid var(--primary);
transform: scale(1.05);
z-index: 2;
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-8px);
}
.pricing-badge {
position: absolute;
top: -6px;
right: -6px;
padding: 8px 20px;
border-radius: 20px;
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
z-index: 10;
}
.pricing-badge.demo {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
}
.pricing-badge.popular {
background: var(--gradient-primary);
color: white;
}
.pricing-badge.best-value {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
}
.pricing-header {
text-align: center;
margin-bottom: var(--spacing-2xl);
}
.pricing-title {
font-size: var(--font-size-2xl);
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.pricing-subtitle {
color: var(--text-secondary);
margin-bottom: var(--spacing-lg);
font-size: var(--font-size-base);
}
.pricing-price {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.pricing-amount {
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--text-primary);
}
.pricing-period {
color: var(--text-secondary);
font-size: var(--font-size-base);
}
.pricing-features {
list-style: none;
margin-bottom: var(--spacing-2xl);
}
.pricing-feature {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.pricing-feature-icon {
width: 20px;
height: 20px;
background: #dcfce7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
flex-shrink: 0;
}
.pricing-feature-text {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.pricing-button {
width: 100%;
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
z-index: 1000;
transition: var(--transition);
}
/* Header en modo claro - casi blanco y no semi transparente */
body.light-mode .header {
background: #fafafa;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.header.scrolled {
box-shadow: var(--shadow-md);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md) 0;
min-height: 70px;
}
.logo {
display: flex;
align-items: center;
gap: var(--spacing-sm);
text-decoration: none;
color: var(--text-primary);
font-size: var(--font-size-xl);
font-weight: 700;
flex-shrink: 0;
}
.logo img {
width: 56px;
height: 56px;
}
.nav {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.nav-link {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
white-space: nowrap;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-sm);
}
.nav-link:hover {
color: var(--primary);
background: rgba(59, 130, 246, 0.1);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--spacing-md);
flex-shrink: 0;
}
/* Theme Toggle Button */
.theme-toggle {
background: transparent;
border: none;
cursor: pointer;
padding: var(--spacing-sm);
border-radius: var(--border-radius-sm);
transition: var(--transition);
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.theme-toggle:hover {
background: var(--color-bg-hover);
transform: scale(1.1);
}
/* Por defecto (oscuro) se ve el sol - Intercambiado para mostrar el modo al que se va a cambiar */
.theme-toggle .icon-sun {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.theme-toggle .icon-moon {
opacity: 0;
visibility: hidden;
position: absolute;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* En modo claro, se ve la luna - Intercambiado para mostrar el modo al que se va a cambiar */
.light-mode .theme-toggle .icon-sun {
opacity: 0;
visibility: hidden;
}
.light-mode .theme-toggle .icon-moon {
opacity: 1;
visibility: visible;
}
/* Mejora de contraste para hero-badge en modo claro */
body.light-mode .hero-badge {
background: rgba(0, 0, 0, 0.8);
color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: var(--spacing-sm);
border-radius: var(--border-radius-sm);
transition: var(--transition);
}
.mobile-menu-toggle:hover {
background: rgba(59, 130, 246, 0.1);
}
.mobile-menu-toggle span {
width: 24px;
height: 2px;
background: var(--text-primary);
transition: var(--transition);
border-radius: 1px;
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Hero Section */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 90px; /* Espacio para el header fijo (70px min-height + 20px extra) */
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
/* Optimizaciones para carga rápida */
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
/* Aspect ratio para evitar layout shifts */
aspect-ratio: 16/9;
/* Optimización de memoria */
image-rendering: optimizeSpeed;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Optimizado: Reducido de 0.5 a 0.25 para mejor visibilidad del video
manteniendo legibilidad del texto
*/
background: rgba(0, 0, 0, 0.25);
z-index: -1;
}
.hero-decorations {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.hero-decoration {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(245, 158, 11, 0.1));
animation: float 6s ease-in-out infinite;
}
.hero-decoration:nth-child(1) {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.hero-decoration:nth-child(2) {
top: 20%;
right: 10%;
animation-delay: 2s;
}
.hero-decoration:nth-child(3) {
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
.hero-decoration:nth-child(4) {
bottom: 10%;
right: 20%;
animation-delay: 1s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
color: var(--text-white);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--color-border);
backdrop-filter: blur(10px);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 50px;
font-size: var(--font-size-sm);
font-weight: 500;
margin-bottom: var(--spacing-xl);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-title {
font-size: var(--font-size-6xl);
font-weight: 900;
line-height: 1.1;
margin-bottom: var(--spacing-xl);
}
.hero-title .accent {
color: var(--color-primary);
/* Stroke solo para "Streaming Premium" */
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.8),
1px -1px 0 rgba(0, 0, 0, 0.8),
-1px 1px 0 rgba(0, 0, 0, 0.8),
1px 1px 0 rgba(0, 0, 0, 0.8);
}
.hero-description {
font-size: var(--font-size-xl);
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--spacing-2xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
/* Stroke para mejor legibilidad */
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.8),
1px -1px 0 rgba(0, 0, 0, 0.8),
-1px 1px 0 rgba(0, 0, 0, 0.8),
1px 1px 0 rgba(0, 0, 0, 0.8);
}
/* Color blanco para descripción en modo claro */
body.light-mode .hero-description {
color: rgba(255, 255, 255, 1);
}
.hero-actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-3xl);
flex-wrap: wrap;
}
.hero-stats {
display: flex;
justify-content: center;
gap: var(--spacing-3xl);
flex-wrap: wrap;
}
.hero-stat {
text-align: center;
}
.hero-stat-number {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
font-size: var(--font-size-3xl);
font-weight: 700;
margin-bottom: var(--spacing-sm);
}
.hero-stat-label {
color: rgba(255, 255, 255, 0.8);
font-size: var(--font-size-sm);
}
/* Estadísticas del hero en blanco con stroke para modo claro */
body.light-mode .hero-stat-number {
color: rgba(255, 255, 255, 1);
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.8),
1px -1px 0 rgba(0, 0, 0, 0.8),
-1px 1px 0 rgba(0, 0, 0, 0.8),
1px 1px 0 rgba(0, 0, 0, 0.8);
}
body.light-mode .hero-stat-label {
color: rgba(255, 255, 255, 0.9);
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.8),
1px -1px 0 rgba(0, 0, 0, 0.8),
-1px 1px 0 rgba(0, 0, 0, 0.8),
1px 1px 0 rgba(0, 0, 0, 0.8);
}
.scroll-indicator {
position: absolute;
bottom: var(--spacing-xl);
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.scroll-indicator-inner {
width: 24px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
position: relative;
}
.scroll-indicator-dot {
width: 4px;
height: 8px;
background: rgba(255, 255, 255, 0.8);
border-radius: 2px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: scroll 2s infinite;
}
@keyframes scroll {
0% {
opacity: 0;
transform: translateX(-50%) translateY(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(16px);
}
}
/* Sections */
.section {
padding: var(--spacing-3xl) 0;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.section-title {
font-size: var(--font-size-5xl);
font-weight: 800;
margin-bottom: var(--spacing-lg);
line-height: 1.2;
}
.section-description {
font-size: var(--font-size-xl);
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* Grid System */
.grid {
display: grid;
gap: var(--spacing-md);
}
.grid-cols-1 {
grid-template-columns: 1fr;
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-md-2 {
grid-template-columns: 1fr;
}
.grid-md-3 {
grid-template-columns: 1fr;
}
.grid-lg-4 {
grid-template-columns: repeat(2, 1fr);
}
.gap-lg {
gap: var(--spacing-lg);
}
/* Cards */
.card {
background: var(--bg-card);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
box-shadow: 0 2px 8px var(--shadow-black-1);
height: auto;
min-height: 140px;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px var(--shadow-black-15);
border-color: rgba(59, 130, 246, 0.2);
}
.card:hover::before {
opacity: 1;
}
.card-icon {
width: 48px;
height: 48px;
background: var(--gradient-primary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-lg);
color: var(--text-white);
transition: all 0.3s ease;
flex-shrink: 0;
}
.card:hover .card-icon {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.card-title {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
line-height: 1.3;
}
.card-description {
color: var(--text-secondary);
line-height: 1.5;
font-size: var(--font-size-sm);
}
/* Utility Classes */
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
/* FAQ Section - Refactored */
.faq-wrapper {
max-width: 800px;
margin: 0 auto;
padding: 2rem 0;
}
.faq-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
margin-bottom: 1.5rem;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px var(--shadow-black-1);
}
.faq-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px var(--shadow-black-2);
border-color: rgba(255, 255, 255, 0.2);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
}
.faq-card.active {
border-color: var(--primary-color);
background: var(--gradient-card-glass-strong);
box-shadow: 0 12px 40px var(--shadow-black-15), 0 0 0 1px var(--primary-color);
}
.faq-header {
padding: 1.75rem 2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
position: relative;
}
.faq-header:hover {
background: var(--color-bg-card-transparent);
}
.faq-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.4;
flex: 1;
padding-right: 1.5rem;
transition: color 0.3s ease;
}
.faq-card:hover .faq-title {
color: var(--primary-color);
}
.faq-toggle {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
flex-shrink: 0;
position: relative;
}
.faq-toggle::before,
.faq-toggle::after {
content: '';
position: absolute;
background: white;
transition: all 0.3s ease;
}
.faq-toggle::before {
width: 12px;
height: 2px;
}
.faq-toggle::after {
width: 2px;
height: 12px;
}
.faq-card.active .faq-toggle {
transform: rotate(45deg);
background: var(--accent-color);
}
.faq-card.active .faq-toggle::after {
opacity: 0;
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-card.active .faq-content {
max-height: 500px;
}
.faq-text {
padding: 2rem;
color: var(--text-secondary);
font-size: 1.05rem;
line-height: 1.7;
margin: 0;
opacity: 0;
transform: translateY(-10px);
transition: all 0.4s ease 0.1s;
}
.faq-card.active .faq-text {
opacity: 1;
transform: translateY(0);
}
/* Animations */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Responsive Design */
@media (min-width: 1200px) {
.grid-lg-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-md-3 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.nav {
gap: var(--spacing-md);
}
.nav-link {
font-size: var(--font-size-sm);
padding: var(--spacing-xs) var(--spacing-sm);
}
/* Grid responsive para tablets */
.grid-md-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-md-3 {
grid-template-columns: repeat(2, 1fr);
}
.grid-lg-4 {
grid-template-columns: repeat(2, 1fr);
}
/* FAQ responsive para tablets */
.faq-container {
gap: 1.25rem;
padding: 0.75rem 0;
}
.faq-question {
padding: 1.25rem 1.25rem;
font-size: 1.05rem;
min-height: 50px;
}
.faq-question span {
margin-right: 1rem;
}
.faq-item.active .faq-answer {
padding: 1.5rem 1.25rem 2rem 1.25rem;
max-height: 1000px;
}
.faq-answer p {
font-size: 0.95rem;
line-height: 1.6;
}
}
@media (max-width: 768px) {
.container {
padding: 0 var(--spacing-md);
}
.header-content {
padding: var(--spacing-sm) 0;
}
.logo {
font-size: var(--font-size-lg);
}
.logo img {
width: 32px;
height: 32px;
}
.nav {
position: fixed;
top: 70px;
left: 0;
right: 0;
background: var(--color-bg-overlay-modal);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
flex-direction: column;
gap: 0;
padding: var(--spacing-lg) 0;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-lg);
}
.nav.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.nav-link {
width: 100%;
text-align: center;
}
/* Ocultar opciones específicas en menú móvil */
.nav-link[href="#caracteristicas"],
.nav-link[href="#preguntas"] {
display: none;
}
/* Grid responsive */
.grid-md-2 {
grid-template-columns: 1fr;
}
.grid-md-3 {
grid-template-columns: 1fr;
}
.grid-lg-4 {
grid-template-columns: 1fr;
}
/* Cards responsive */
.card {
padding: 16px;
min-height: 120px;
}
.card-icon {
width: 32px;
height: 32px;
}
.nav-link:last-child {
border-bottom: none;
}
.mobile-menu-toggle {
display: flex;
}
.header-actions .btn {
padding: 10px 16px;
font-size: var(--font-size-sm);
}
.hero-title {
font-size: var(--font-size-4xl);
}
.hero-actions {
flex-direction: column;
gap: var(--spacing-md);
}
.hero-stats {
gap: var(--spacing-lg);
}
.section-title {
font-size: var(--font-size-3xl);
}
/* FAQ Responsive - Tablets */
.faq-wrapper {
padding: 1.5rem 0;
}
.faq-card {
border-radius: 16px;
margin-bottom: 1.25rem;
}
.faq-header {
padding: 1.5rem 1.75rem;
}
.faq-title {
font-size: 1.1rem;
padding-right: 1.25rem;
}
.faq-toggle {
width: 22px;
height: 22px;
}
.faq-text {
padding: 1.75rem;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--spacing-sm);
}
.header-content {
padding: var(--spacing-xs) 0;
min-height: 60px;
}
.logo {
font-size: var(--font-size-base);
}
.logo img {
width: 58px;
height: 58px;
}
.nav {
top: 60px;
padding: var(--spacing-md) 0;
}
.nav-link {
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-base);
}
/* Ocultar opciones específicas en menú móvil */
.nav-link[href="#caracteristicas"],
.nav-link[href="#preguntas"] {
display: none;
}
.header-actions .btn {
padding: 8px 12px;
font-size: var(--font-size-xs);
min-width: auto;
}
.mobile-menu-toggle {
padding: var(--spacing-xs);
}
.mobile-menu-toggle span {
width: 20px;
height: 2px;
}
.hero {
padding-top: 80px; /* Ajuste para móvil (60px min-height + 20px extra) */
}
.hero-title {
font-size: var(--font-size-3xl);
}
.hero-description {
font-size: var(--font-size-base);
}
.section-title {
font-size: var(--font-size-2xl);
}
.btn {
padding: 10px 16px;
font-size: var(--font-size-sm);
min-width: 120px;
text-align: center;
}
.btn-lg {
padding: 12px 20px;
font-size: var(--font-size-base);
min-width: 140px;
}
/* FAQ Responsive - Mobile */
#preguntas {
display: none;
}
/* Ocultar CTA Premium en móvil */
.cta-premium-section {
display: none;
}
.faq-wrapper {
padding: 1rem 0;
}
.faq-card {
border-radius: 12px;
margin-bottom: 1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.faq-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.faq-header {
padding: 1.25rem 1.5rem;
}
.faq-title {
font-size: 1rem;
padding-right: 1rem;
line-height: 1.3;
}
.faq-toggle {
width: 20px;
height: 20px;
}
.faq-toggle::before {
width: 10px;
height: 1.5px;
}
.faq-toggle::after {
width: 1.5px;
height: 10px;
}
.faq-content {
max-height: 0;
}
.faq-card.active .faq-content {
max-height: 400px;
}
.faq-text {
padding: 1.5rem;
font-size: 0.95rem;
line-height: 1.6;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-card: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--border-color: #334155;
}
.header {
background: var(--color-bg-overlay-strong);
}
}
/* Contact Section Styles */
.contact-section {
padding: var(--spacing-3xl) 0;
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
position: relative;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.contact-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3xl);
align-items: start;
position: relative;
z-index: 1;
}
.contact-info {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--color-bg-card-transparent);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
backdrop-filter: blur(10px);
transition: all var(--transition-smooth);
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(59, 130, 246, 0.3);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.contact-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--gradient-primary));
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
flex-shrink: 0;
box-shadow: var(--shadow-md);
}
.contact-details {
flex: 1;
}
.contact-label {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: var(--spacing-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.contact-value {
font-size: 1rem;
color: var(--text-primary);
font-weight: 500;
line-height: 1.5;
}
.social-media-wrapper {
background: var(--color-bg-card-transparent);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-xl);
padding: var(--spacing-2xl);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-xl);
}
.social-media-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--spacing-sm);
text-align: center;
background: linear-gradient(135deg, var(--gradient-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.social-media-description {
font-size: 1rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: var(--spacing-xl);
line-height: 1.6;
}
.social-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.social-button {
display: flex;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--color-bg-card-transparent);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
text-decoration: none;
color: var(--text-primary);
transition: all var(--transition-smooth);
backdrop-filter: blur(5px);
position: relative;
overflow: hidden;
}
.social-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--gradient-shimmer);
transition: left 0.5s ease;
}
.social-button:hover::before {
left: 100%;
}
.social-button:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.social-icon {
width: 48px;
height: 48px;
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
flex-shrink: 0;
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
}
.social-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.social-name {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
}
.social-description {
font-size: 0.875rem;
color: var(--text-secondary);
}
/* Specific social media colors */
.social-button.whatsapp .social-icon {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}
.social-button.whatsapp:hover {
border-color: rgba(37, 211, 102, 0.3);
}
.social-button.telegram .social-icon {
background: linear-gradient(135deg, #0088cc 0%, #005577 100%);
}
.social-button.telegram:hover {
border-color: rgba(0, 136, 204, 0.3);
}
.social-button.facebook .social-icon {
background: linear-gradient(135deg, #1877F2 0%, #0d47a1 100%);
}
.social-button.facebook:hover {
border-color: rgba(24, 119, 242, 0.3);
}
.social-button.instagram .social-icon {
background: linear-gradient(135deg, #E4405F 0%, #833AB4 50%, #F77737 100%);
}
.social-button.instagram:hover {
border-color: rgba(228, 64, 95, 0.3);
}
.social-button.youtube .social-icon {
background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
}
.social-button.youtube:hover {
border-color: rgba(255, 0, 0, 0.3);
}
/* Responsive Design */
@media (max-width: 768px) {
.contact-wrapper {
grid-template-columns: 1fr;
gap: var(--spacing-2xl);
}
.contact-item {
padding: var(--spacing-md);
gap: var(--spacing-md);
}
.contact-icon {
width: 40px;
height: 40px;
font-size: 1.125rem;
}
.social-media-wrapper {
padding: var(--spacing-xl);
}
.social-media-title {
font-size: 1.25rem;
}
.social-button {
padding: var(--spacing-md);
gap: var(--spacing-md);
}
.social-icon {
width: 40px;
height: 40px;
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.contact-section {
padding: var(--spacing-2xl) 0;
}
.contact-item {
flex-direction: column;
text-align: center;
gap: var(--spacing-sm);
}
.social-media-wrapper {
padding: var(--spacing-lg);
}
.social-button {
padding: var(--spacing-sm);
gap: var(--spacing-sm);
flex-direction: column;
text-align: center;
}
.social-icon {
width: 36px;
height: 36px;
font-size: 1rem;
}
.social-name {
font-size: 1rem;
}
.social-description {
font-size: 0.8rem;
}
}
/* ===== FOOTER STYLES - SISTEMA ARMONIZADO ===== */
.footer {
background: var(--bg-dark);
color: var(--text-white);
padding: var(--spacing-3xl) 0 var(--spacing-xl);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.footer-brand {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.footer-brand img {
width: 56px;
height: 56px;
}
.footer-brand span {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-white);
}
.footer-description {
color: var(--text-white-70);
margin-bottom: var(--spacing-md);
line-height: 1.6;
}
.footer-social {
display: flex;
gap: var(--spacing-md);
}
.footer-social-link {
width: 40px;
height: 40px;
background: var(--text-white-10);
border-radius: var(--border-radius-main);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white);
text-decoration: none;
transition: var(--transition);
}
.footer-social-link:hover {
background: var(--text-white-50);
transform: translateY(-2px);
}
.footer-title {
font-weight: 600;
margin-bottom: var(--spacing-md);
color: var(--text-white);
font-size: var(--font-size-lg);
}
.footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-list li {
margin-bottom: var(--spacing-sm);
}
.footer-link {
color: var(--text-white-70);
text-decoration: none;
transition: var(--transition);
font-size: var(--font-size-base);
}
.footer-link:hover {
color: var(--text-white);
transform: translateX(4px);
}
.footer-bottom {
border-top: 1px solid var(--border-color-dark);
padding-top: var(--spacing-lg);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.footer-copyright {
color: var(--text-white-70);
font-size: var(--font-size-sm);
margin: 0;
}
.footer-love {
color: var(--text-white-70);
font-size: var(--font-size-sm);
margin: 0;
font-weight: 500;
}
/* Footer Responsive */
@media (max-width: 768px) {
.footer {
padding: var(--spacing-2xl) 0 var(--spacing-lg);
}
.footer-content {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
text-align: left;
}
.footer-section {
padding: var(--spacing-md) 0;
border-bottom: 1px solid var(--color-border);
}
.footer-section:last-child {
border-bottom: none;
}
.footer-brand {
justify-content: flex-start;
margin-bottom: var(--spacing-md);
}
.footer-title {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-sm);
color: var(--primary);
}
.footer-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xs);
}
.footer-link {
padding: var(--spacing-xs) 0;
font-size: var(--font-size-sm);
display: block;
}
.footer-social {
justify-content: flex-start;
margin-top: var(--spacing-sm);
}
.footer-bottom {
flex-direction: column;
text-align: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
}
@media (max-width: 480px) {
/* Ocultar sección de características en móvil */
#caracteristicas {
display: none;
}
.footer {
padding: var(--spacing-xl) 0 var(--spacing-md);
}
.footer-content {
gap: var(--spacing-md);
}
.footer-section {
padding: var(--spacing-sm) 0;
}
.footer-brand {
flex-direction: column;
text-align: center;
gap: var(--spacing-xs);
}
.footer-brand img {
width: 77px;
height: 77px;
}
.footer-brand span {
font-size: var(--font-size-lg);
}
.footer-description {
font-size: var(--font-size-sm);
text-align: center;
margin-bottom: var(--spacing-sm);
}
.footer-description-mobile-hidden {
display: none;
}
/* Ocultar secciones del footer en móvil */
.footer-section:nth-child(2),
.footer-section:nth-child(3),
.footer-section:nth-child(4) {
display: none;
}
.footer-title {
text-align: center;
font-size: var(--font-size-base);
}
.footer-list {
text-align: center;
}
.footer-link {
font-size: var(--font-size-xs);
padding: var(--spacing-xs) var(--spacing-sm);
}
.footer-social {
justify-content: center;
gap: var(--spacing-sm);
}
.footer-social-link {
width: 36px;
height: 36px;
}
.footer-bottom {
padding-top: var(--spacing-md);
}
.footer-copyright,
.footer-love {
font-size: var(--font-size-xs);
}
}
/* --- CLASES FALTANTES (Agregadas por IA) --- */
/* Estilos para clases creadas dinámicamente por JavaScript */
/* Hero Video Fallback - Mostrado cuando el video no puede cargar */
.hero-video-fallback {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--bg-dark) 0%, var(--primary-dark) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white);
font-size: var(--font-size-lg);
text-align: center;
z-index: 1;
}
.hero-video-fallback::before {
content: "🎬";
font-size: var(--font-size-6xl);
margin-bottom: var(--spacing-md);
display: block;
}
/* Sistema de Notificaciones */
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius-main);
color: var(--text-white);
font-weight: 600;
box-shadow: var(--shadow-lg);
z-index: 9999;
transform: translateX(100%);
transition: var(--transition);
max-width: 400px;
border-left: 4px solid transparent;
}
.notification.show {
transform: translateX(0);
}
.notification-success {
background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
border-left-color: #10b981;
}
.notification-error {
background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%);
border-left-color: #ef4444;
}
.notification-warning {
background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
border-left-color: #f59e0b;
}
.notification-info {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-left-color: var(--primary);
}
/* Responsive para notificaciones */
@media (max-width: 768px) {
.notification {
top: 10px;
right: 10px;
left: 10px;
max-width: none;
transform: translateY(-100%);
}
.notification.show {
transform: translateY(0);
}
}
/* --- FIN DE CLASES FALTANTES --- */
/* Print styles */
@media print {
.header,
.hero-video,
.hero-decorations,
.scroll-indicator,
.footer {
display: none;
}
.hero {
min-height: auto;
padding: var(--spacing-xl) 0;
}
.hero-overlay {
display: none;
}
.hero-content {
color: var(--text-primary);
}
}
/* ===== CONTACT SECTION REDESIGN - AI ADDED ===== */
/* Unified contact section with balanced card layout */
/* Main container grid for contact section */
.contact-container-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 3rem;
}
/* Shared card styling for both contact info and social links */
.contact-info-card,
.social-links-card {
background: var(--color-bg-card-transparent);
backdrop-filter: blur(10px);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-info-card:hover,
.social-links-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
/* Contact info card specific styling */
.contact-info-card .contact-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.contact-info-card .contact-item:hover {
background: var(--color-bg-card-transparent);
}
.contact-info-card .contact-item:last-child {
margin-bottom: 0;
}
.contact-info-card .contact-icon {
width: 24px;
height: 24px;
margin-right: 1rem;
color: var(--accent-color);
flex-shrink: 0;
}
.contact-info-card .contact-details h4 {
margin: 0 0 0.25rem 0;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.contact-info-card .contact-details p {
margin: 0;
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.4;
}
/* Social links card - 2x2 grid layout */
.social-grid-2-col {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1rem;
height: auto;
}
.social-grid-2-col .social-link {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 1rem;
background: var(--color-bg-card-transparent);
border: 1px solid var(--color-border);
border-radius: 12px;
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
transition: all 0.3s ease;
height: 70px;
min-height: 70px;
max-height: 70px;
box-sizing: border-box;
}
.social-grid-2-col .social-link:hover {
background: var(--accent-color);
color: var(--bg-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.3);
}
.social-grid-2-col .social-link svg {
width: 20px;
height: 20px;
margin-right: 0.75rem;
flex-shrink: 0;
}
/* Responsive design for contact section */
@media (max-width: 768px) {
.contact-container-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.contact-info-card,
.social-links-card {
padding: 1.5rem;
}
.social-grid-2-col {
gap: 0.75rem;
}
.social-grid-2-col .social-link {
padding: 0.875rem;
font-size: 0.9rem;
height: 60px;
min-height: 60px;
max-height: 60px;
}
.social-grid-2-col .social-link svg {
width: 18px;
height: 18px;
margin-right: 0.5rem;
}
}
@media (max-width: 480px) {
.contact-info-card,
.social-links-card {
padding: 1.25rem;
}
.contact-info-card .contact-item {
padding: 0.5rem;
margin-bottom: 1.25rem;
}
.social-grid-2-col {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 0.75rem;
}
.social-grid-2-col .social-link {
justify-content: flex-start;
padding: 1rem;
height: 60px;
min-height: 60px;
max-height: 60px;
}
}
/* ===== END CONTACT SECTION REDESIGN ===== */
/* ===== DOWNLOADS SECTION ===== */
.downloads-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.download-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 2rem;
text-align: center;
transition: var(--transition);
cursor: pointer;
position: relative;
overflow: hidden;
}
.download-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: var(--transition);
}
.download-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-light);
}
.download-card:hover::before {
transform: scaleX(1);
}
.download-card-header {
margin-bottom: 1.5rem;
}
.download-icon {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: var(--transition);
}
.download-card:hover .download-icon {
transform: scale(1.1);
}
.download-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.download-subtitle {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: 0;
}
.download-card-content p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
font-size: var(--font-size-sm);
}
.download-btn {
width: 100%;
padding: 0.875rem 1.5rem;
font-weight: 600;
border-radius: var(--border-radius);
transition: var(--transition);
}
/* ===== END DOWNLOADS SECTION ===== */
/* ===== DEVICES SECTION ===== */
.devices-section {
padding: 6rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
.devices-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.devices-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.devices-text {
color: white;
}
.devices-title {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.devices-description {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
}
.devices-highlight {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.devices-highlight-text {
font-size: 1.8rem;
font-weight: 600;
color: #ffd700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.devices-highlight-subtitle {
font-size: 1.2rem;
font-weight: 500;
color: #fff;
opacity: 0.9;
}
.devices-visual {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.tv-container {
max-width: 500px;
width: 100%;
}
.tv-image {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}
.channels-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
width: 100%;
max-width: 400px;
}
.channel-item {
padding: 12px 16px;
border-radius: 8px;
color: white;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.channel-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
text-decoration: none;
}
.channel-item.movie-channel {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.channel-item.mtv {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.channel-item.nick {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.channel-item.comedy {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.channel-item.drama {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.channel-item.sports {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
/* Responsive Design */
@media (max-width: 768px) {
.devices-content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.devices-title {
font-size: 2rem;
}
.devices-highlight-text {
font-size: 1.5rem;
}
.tv-container {
max-width: 400px;
}
.channels-list {
max-width: 350px;
gap: 0.8rem;
}
.channel-item {
font-size: 0.8rem;
padding: 10px 12px;
}
}
@media (max-width: 480px) {
.devices-section {
padding: 4rem 0;
}
.devices-title {
font-size: 1.8rem;
}
.devices-description {
font-size: 1rem;
}
.tv-container {
max-width: 300px;
}
.channels-list {
max-width: 280px;
gap: 0.6rem;
}
.channel-item {
font-size: 0.7rem;
padding: 8px 10px;
}
}
/* ===== END DEVICES SECTION ===== */
/* ===== FEATURES CTA BUTTONS ===== */
.features-cta-buttons {
margin-top: var(--spacing-lg);
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
flex-wrap: wrap;
}
/* Responsive para botones de características */
@media (max-width: 768px) {
.features-cta-buttons {
flex-direction: column;
gap: var(--spacing-sm);
width: 100%;
}
.features-cta-buttons .btn {
width: 100%;
max-width: 280px;
justify-content: center;
}
}
@media (max-width: 480px) {
.features-cta-buttons {
gap: var(--spacing-xs);
}
.features-cta-buttons .btn {
max-width: 100%;
padding: 14px 20px;
font-size: var(--font-size-sm);
}
.features-cta-buttons .btn svg {
width: 16px;
height: 16px;
}
}
/* ===== END FEATURES CTA BUTTONS ===== */
/* ===== DOWNLOAD MODAL RESPONSIVE ===== */
@media (max-width: 768px) {
.download-modal-content {
margin: 5% auto;
width: 95%;
max-width: 400px;
animation: slideInMobile 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.download-modal-header {
padding: 1rem 1rem 0.5rem;
}
.download-modal-body {
padding: 1rem;
}
.download-btn {
padding: 1rem 1.25rem;
font-size: var(--font-size-sm);
width: 100%;
min-height: 48px; /* Mejor accesibilidad táctil */
}
.dns-container {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: nowrap;
}
.dns-text {
flex: 1;
min-width: 0;
word-break: break-all;
font-size: var(--font-size-sm);
}
.copy-btn {
padding: 0.5rem 0.75rem;
font-size: var(--font-size-xs);
width: auto;
min-width: 60px;
min-height: 36px;
flex-shrink: 0;
white-space: nowrap;
}
}
@media (max-width: 480px) {
.download-modal-content {
margin: 2% auto;
width: 98%;
border-radius: var(--border-radius);
animation: slideInMobile 0.3s ease-out;
}
.download-modal-header {
padding: 0.75rem;
}
.download-modal-header h3 {
font-size: var(--font-size-md);
}
.download-modal-body {
padding: 0.75rem;
}
.download-step {
padding: 0.5rem 0.75rem;
margin-bottom: 0.5rem;
}
.download-step h4 {
font-size: var(--font-size-xs);
}
.download-step p {
font-size: var(--font-size-xs);
line-height: 1.3;
}
.download-btn {
padding: 0.875rem 1rem;
font-size: var(--font-size-xs);
font-weight: 600;
}
.download-code {
padding: 0.375rem 0.5rem;
font-size: var(--font-size-xs);
word-break: break-all;
}
.download-dns {
padding: 0.5rem;
font-size: var(--font-size-xs);
}
}
/* ===== END DOWNLOAD MODAL RESPONSIVE ===== */
/* ===== DOWNLOAD MODAL STYLES UNIFICADOS ===== */
.download-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
z-index: 10000;
animation: fadeIn 0.3s ease-out;
}
.download-modal.show {
display: flex;
justify-content: center;
align-items: center;
}
.download-modal .modal-content {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 2rem;
max-width: 500px;
width: 90%;
max-height: 85vh;
overflow-y: auto;
position: relative;
box-shadow: var(--shadow-xl);
animation: slideInScale 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.download-modal .close-modal {
position: absolute;
top: 1rem;
right: 1rem;
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.download-modal .close-modal:hover {
background: var(--bg-secondary);
color: var(--text-primary);
transform: scale(1.1);
}
.download-modal .modal-header {
text-align: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
}
.download-modal .modal-title {
margin: 0;
color: var(--text-primary);
font-size: 1.5rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.download-modal .modal-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.download-modal .modal-section {
padding: 1.25rem;
background: var(--bg-secondary);
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.download-modal .modal-section:hover {
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
.download-modal .modal-section h4 {
margin: 0 0 0.75rem 0;
color: var(--text-primary);
font-size: 1.125rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.download-modal .modal-section p {
margin: 0 0 1rem 0;
color: var(--text-secondary);
line-height: 1.6;
font-size: 0.9rem;
}
.download-modal .modal-section p:last-child {
margin-bottom: 0;
}
/* Estilos para enlaces de descarga (iOS apps) */
.download-modal .download-link {
color: var(--color-text-white) !important;
text-decoration: underline;
text-decoration-color: var(--color-text-white);
transition: all 0.3s ease;
}
.download-modal .download-link:hover {
color: var(--color-text-white) !important;
text-decoration-color: var(--color-primary-light);
opacity: 0.9;
}
/* Estilos para opciones de descarga */
.download-modal .download-option {
margin: 0 0 0.5rem 0;
color: var(--text-secondary);
line-height: 1.6;
font-size: 0.9rem;
}
.download-modal .download-option:last-child {
margin-bottom: 0;
}
/* Estilos para listas de instrucciones compactas */
.download-modal .instructions-list {
margin: 0 0 1rem 0;
}
.download-modal .instruction-item {
margin: 0 0 0.5rem 0;
color: var(--text-secondary);
line-height: 1.6;
font-size: 0.9rem;
}
.download-modal .instruction-item:last-child {
margin-bottom: 0;
}
/* Estilo especial para códigos con énfasis centrado */
.download-modal .download-code {
display: block;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
font-family: 'Courier New', monospace;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
padding: 1.5rem 2rem;
margin: 1.5rem auto;
border-radius: 12px;
border: 3px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
letter-spacing: 0.1em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
max-width: 300px;
transition: all 0.3s ease;
}
.download-modal .download-code::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.download-modal .download-code:hover {
transform: translateY(-2px);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.download-modal .download-code:hover::before {
left: 100%;
}
.download-modal .download-primary-btn {
display: inline-block;
background: var(--gradient-primary);
color: white;
padding: 0.875rem 1.5rem;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
border: none;
cursor: pointer;
width: 100%;
text-align: center;
}
.download-modal .download-primary-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
background: var(--primary-dark);
}
.download-modal .dns-info {
display: flex;
align-items: center;
gap: 0.75rem;
background: var(--bg-primary);
padding: 1rem;
border-radius: var(--border-radius-sm);
border: 1px solid var(--border-color);
}
.download-modal .dns-info code {
background: transparent;
color: var(--primary);
padding: 0;
border-radius: 0;
font-family: 'Courier New', monospace;
font-size: 0.875rem;
font-weight: 600;
border: none;
flex: 1;
word-break: break-all;
}
.download-modal .copy-btn {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 0.5rem 1rem;
border-radius: var(--border-radius-sm);
cursor: pointer;
font-size: 0.8rem;
font-weight: 500;
transition: all 0.3s ease;
flex-shrink: 0;
white-space: nowrap;
}
.download-modal .copy-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: scale(1.05);
}
.download-modal .copy-btn:active {
transform: scale(0.95);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInScale {
from {
opacity: 0;
transform: scale(0.9) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Light mode adjustments */
body.light-mode .download-modal .modal-content {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Responsive Design */
@media (max-width: 768px) {
.download-modal .modal-content {
padding: 1.5rem;
max-width: 95%;
margin: 1rem;
}
.download-modal .modal-title {
font-size: 1.25rem;
}
.download-modal .modal-section {
padding: 1rem;
}
.download-modal .dns-info {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.download-modal .dns-info code {
text-align: center;
padding: 0.5rem;
background: var(--bg-secondary);
border-radius: var(--border-radius-sm);
}
.download-modal .copy-btn {
width: 100%;
text-align: center;
}
}
@media (max-width: 480px) {
.download-modal .modal-content {
padding: 1.25rem;
max-width: 98%;
max-height: 90vh;
}
.download-modal .modal-title {
font-size: 1.125rem;
}
.download-modal .modal-section {
padding: 0.875rem;
}
.download-modal .modal-section h4 {
font-size: 1rem;
}
.download-modal .modal-section p {
font-size: 0.85rem;
}
.download-modal .download-primary-btn {
padding: 1rem;
font-size: 0.9rem;
}
}
/* ===== END DOWNLOAD MODAL STYLES UNIFICADOS ===== */
/*
========================================
FIX: CORRECCIÓN PARA HEADER PEGATINA
========================================
Esto añade un "colchón" invisible en la parte
superior de todas las secciones que tengan un ID,
para que el header no tape el título al saltar.
*/
section[id] {
scroll-margin-top: 80px;
}
/* ===== MODAL CREAR DEMO STYLES REFACTORIZADO ===== */
/* Base del Modal */
#modal-crear-demo {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
#modal-crear-demo .modal-content {
background: #ffffff;
border-radius: 16px;
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
border: 1px solid #e5e7eb;
}
#modal-crear-demo .modal-header {
padding: 1.5rem 1.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 1.5rem;
}
#modal-crear-demo .modal-title {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin: 0;
}
#modal-crear-demo .modal-close {
font-size: 1.5rem;
color: #6b7280;
cursor: pointer;
padding: 0.25rem;
line-height: 1;
transition: color 0.2s ease;
background: none;
border: none;
}
#modal-crear-demo .modal-close:hover {
color: #374151;
}
#modal-crear-demo .modal-body {
padding: 0 1.5rem 1.5rem;
}
/* Contenedores del Modal */
.demo-form-container {
width: 100%;
}
.demo-form-header {
text-align: center;
margin-bottom: 1.5rem;
}
.demo-security-badge {
display: inline-block;
background: var(--color-bg-special);
color: var(--color-success-dark);
padding: 0.5rem 1rem;
border-radius: var(--border-radius-full);
font-size: 0.875rem;
font-weight: 600;
border: 1px solid var(--color-success);
}
/* Formularios Unificados */
#modal-crear-demo .form-group {
margin-bottom: 1rem;
}
#modal-crear-demo .form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #374151;
font-size: 0.875rem;
}
#modal-crear-demo .form-input {
width: 100%;
padding: 0.75rem;
border: 2px solid #d1d5db;
border-radius: 8px;
background: #f9fafb;
color: #1f2937;
font-size: 1rem;
transition: all 0.2s ease;
}
#modal-crear-demo .form-input:focus {
outline: none;
border-color: #3b82f6;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
#modal-crear-demo .form-input::placeholder {
color: #9ca3af;
}
/* Botones Unificados */
#modal-crear-demo .btn {
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
text-align: center;
text-decoration: none;
display: inline-block;
}
#modal-crear-demo .btn-primary {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #ffffff;
padding: 0.875rem 1.5rem;
font-size: 1rem;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
#modal-crear-demo .btn-primary:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
transform: translateY(-2px);
}
#modal-crear-demo .btn-secondary {
background: #6b7280;
color: #ffffff;
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}
#modal-crear-demo .btn-secondary:hover {
background: #4b5563;
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);
transform: translateY(-1px);
}
/* Botones específicos del demo */
.demo-submit-btn,
.demo-otp-submit-btn,
.demo-verify-btn {
width: 100%;
margin-bottom: 1rem;
}
.demo-resend-btn,
.demo-back-btn {
width: 100%;
margin-bottom: 0.5rem;
}
/* Credenciales y Estados del Modal */
.demo-result {
text-align: center;
}
.demo-success-header h3 {
color: #059669;
margin-bottom: 1rem;
font-size: 1.25rem;
}
.demo-credentials {
background: #f8fafc;
border-radius: 12px;
padding: 1rem;
margin-bottom: 1.5rem;
border: 1px solid #e5e7eb;
}
.credential-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
gap: 0.5rem;
}
.credential-item:last-child {
margin-bottom: 0;
}
.credential-item label {
font-weight: 600;
color: #6b7280;
font-size: 0.875rem;
min-width: 80px;
}
.credential-item > div {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
}
.credential-value {
font-family: 'Courier New', monospace;
background: #ffffff;
padding: 0.25rem 0.5rem;
border-radius: 6px;
color: #1f2937;
font-weight: 600;
border: 1px solid #d1d5db;
flex: 1;
}
.btn-copy {
background: var(--color-primary);
border: none;
border-radius: var(--border-radius-sm);
padding: 0.25rem 0.5rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
transition: all 0.2s ease;
min-width: 35px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-copy:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
}
.demo-actions {
margin: 1.5rem 0;
text-align: center;
}
.demo-validity-info {
text-align: center;
color: var(--color-text-secondary);
font-size: 0.875rem;
}
/* Sistema OTP del Modal */
.demo-otp-step {
width: 100%;
}
.otp-header {
text-align: center;
margin-bottom: 1.5rem;
}
.otp-header h3 {
color: #3b82f6;
margin-bottom: 0.5rem;
font-size: 1.25rem;
}
.otp-header p {
color: #6b7280;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.phone-input-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
.country-code {
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 0.75rem;
color: #1f2937;
font-weight: 600;
min-width: 60px;
text-align: center;
}
.phone-input {
flex: 1;
}
.demo-otp-verification {
margin-top: 1.5rem;
}
.otp-verification-header {
text-align: center;
margin-bottom: 1.5rem;
}
.otp-verification-header h4 {
color: #059669;
margin-bottom: 0.5rem;
font-size: 1.125rem;
}
.otp-verification-header p {
color: #6b7280;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.phone-display {
background: #f3f4f6;
border-radius: 8px;
padding: 0.5rem 1rem;
margin: 0.5rem auto;
display: inline-block;
color: #1f2937;
font-weight: 600;
border: 1px solid #d1d5db;
}
.otp-input {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #ffffff;
color: #1f2937;
font-size: 1.25rem;
text-align: center;
letter-spacing: 0.5rem;
font-weight: 600;
transition: all 0.2s ease;
}
.otp-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.demo-verify-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.demo-resend-btn {
width: 100%;
padding: 0.75rem;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}
.demo-back-btn {
width: 100%;
padding: 0.75rem;
font-size: 0.875rem;
font-weight: 600;
}
.demo-actions .btn {
min-width: 200px;
font-weight: 600;
}
.demo-download-section {
margin-top: 1.5rem;
}
.demo-download-section h4 {
color: #374151;
margin-bottom: 1rem;
font-size: 1rem;
}
.demo-download-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.demo-download-buttons .btn {
padding: 0.75rem;
font-size: 0.875rem;
}
/* Loading state */
.demo-loading {
text-align: center;
padding: 2rem;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #e5e7eb;
border-left: 4px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.demo-loading p {
color: #6b7280;
font-size: 0.875rem;
}
/* Error state */
.demo-error {
text-align: center;
padding: 1rem;
}
.error-message h3 {
color: #dc2626;
margin-bottom: 0.5rem;
font-size: 1.125rem;
}
.error-message p {
color: #6b7280;
margin-bottom: 1rem;
font-size: 0.875rem;
}
/* Responsive para modal crear demo */
@media (max-width: 768px) {
#modal-crear-demo .modal-content {
max-width: 95%;
margin: 0.5rem;
}
#modal-crear-demo .modal-header {
padding: 1rem 1rem 0;
margin-bottom: 1rem;
}
#modal-crear-demo .modal-body {
padding: 0 1rem 1rem;
}
#modal-crear-demo .modal-title {
font-size: 1.25rem;
}
.demo-download-buttons {
gap: 0.75rem;
}
}
@media (max-width: 480px) {
#modal-crear-demo {
padding: 0.5rem;
}
#modal-crear-demo .modal-content {
max-width: 100%;
max-height: 95vh;
}
.credential-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.credential-item label {
font-size: 0.8rem;
min-width: auto;
margin-bottom: 0.25rem;
}
.credential-value {
font-size: 0.75rem;
padding: 0.375rem 0.5rem;
word-break: break-all;
flex: 1;
min-width: 0;
}
.btn-copy {
font-size: 0.75rem;
padding: 0.375rem 0.5rem;
min-width: 40px;
height: 32px;
flex-shrink: 0;
}
/* Contenedor para valor + botón en móvil */
.credential-item > div {
display: flex;
width: 100%;
gap: 0.5rem;
align-items: center;
}
}
/* ===== END MODAL CREAR DEMO STYLES ===== */