:root { --rojo: #e63946; --amarillo: #ffbe0b; --blanco: #f1faee; --azul-claro: #a8dadc; --azul: #457b9d; --azul-oscuro: #1d3557; } /* Tema oscuro: aplica cuando `data-theme="dark"` en */ [data-theme="dark"] { --rojo: #ff7b7b; --amarillo: #ffd166; --blanco: #0b1220; /* fondo principal oscuro */ --azul-claro: #0f1724; --azul: #7aa2c7; --azul-oscuro: #e6eef6; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { background-color: var(--blanco); color: #333; line-height: 1.6; } /* Transición suave al cambiar tema */ html { transition: background-color 250ms ease, color 250ms ease; } header { background: linear-gradient(135deg, var(--rojo), #FF7B25, var(--amarillo)); color: white; text-align: center; padding: 2rem 1rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .logo-bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 0; } .logo-dif { opacity: 0.15; max-width: 60%; height: auto; filter: brightness(1.2); mix-blend-mode: screen; } header h1, header p { position: relative; z-index: 1; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } /* Botón alternador de tema */ .theme-toggle { position: absolute; top: 1rem; right: 1rem; z-index: 2; background: rgba(255,255,255,0.15); border: none; color: white; padding: 0.5rem 0.65rem; border-radius: 8px; cursor: pointer; font-size: 1.1rem; backdrop-filter: blur(4px); } [data-theme="dark"] .theme-toggle { background: rgba(0,0,0,0.35); color: #fff; } h1 { font-size: 3rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } h2 { color: var(--rojo); margin: 1.5rem 0; font-size: 2rem; border-bottom: 2px solid var(--amarillo); padding-bottom: 0.5rem; } h3 { color: var(--azul-oscuro); margin: 1rem 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .hero { text-align: center; padding: 2rem 0; } .hero p { font-size: 1.2rem; max-width: 800px; margin: 0 auto 2rem; } .cta-button { display: inline-block; background-color: var(--rojo); color: white; padding: 0.8rem 2rem; border-radius: 50px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; margin: 1rem 0; } .cta-button:hover { background-color: var(--amarillo); transform: scale(1.05); } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 3rem 0; } .feature-card { background-color: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; border-top: 5px solid var(--amarillo); opacity: 0; transform: translateY(20px); } .feature-card:hover { transform: translateY(-12px); box-shadow: 0 18px 40px rgba(10,20,40,0.15); } .feature-card h3 { color: var(--rojo); } .number { display: inline-block; background-color: var(--amarillo); color: var(--rojo); width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; font-weight: bold; margin-right: 0.5rem; } .testimonials { background-color: var(--azul-claro); padding: 3rem 1rem; margin: 3rem 0; } /* Estilos para el contenedor de video de bienvenida */ .video-wrapper { display: flex; justify-content: center; align-items: center; padding: 1rem; background: transparent; } .video-container { width: 100%; max-width: 1000px; background: rgba(255,255,255,0.0); /* totalmente transparente */ border-radius: 10px; overflow: hidden; box-shadow: none; display: flex; flex-direction: column; align-items: center; } .video-container video { width: 100%; height: auto; display: block; background: transparent; } .video-note { margin-top: 0.5rem; font-size: 0.9rem; color: #666; } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .testimonial { background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } .testimonial:hover { transform: translateY(-10px); box-shadow: 0 18px 40px rgba(10,20,40,0.12); } /* Sidebar styles */ .sidebar { position: fixed; left: 0; top: 0; height: 100%; width: 250px; background: rgba(255,255,255,0.97); box-shadow: 2px 0 12px rgba(0,0,0,0.08); transform: translateX(-110%); transition: transform 300ms ease; z-index: 999; padding-top: 4rem; } .sidebar.active { transform: translateX(0); } .sidebar .menu { list-style: none; padding: 0 1rem; } .sidebar .menu-item { padding: 0.75rem 1rem; cursor: pointer; border-radius: 8px; color: var(--azul-oscuro); margin-bottom: 0.35rem; } .sidebar .menu-item.active, .sidebar .menu-item:hover { background: var(--amarillo); color: var(--rojo); } .toggle-btn { position: absolute; top: 1rem; left: 1rem; z-index: 1001; background: rgba(255,255,255,0.15); border: none; padding: 0.5rem 0.8rem; border-radius: 8px; cursor: pointer; font-size: 1.1rem; color: white; } /* Botón cerrar dentro del sidebar */ .close-sidebar { position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: none; font-size: 1.25rem; padding: 0.35rem 0.45rem; cursor: pointer; color: var(--azul-oscuro); } [data-theme="dark"] .close-sidebar { color: var(--azul-oscuro); } /* Cuando el sidebar está activo, empuja el contenido (desktop) */ .sidebar + #mainContent.sidebar-active, .sidebar.active + #mainContent.sidebar-active { transform: translateX(250px); } /* Mobile: overlay style */ @media (max-width: 768px) { .sidebar { width: 80%; max-width: 320px; background: rgba(255,255,255,0.98); } .sidebar + #mainContent.sidebar-active, .sidebar.active + #mainContent.sidebar-active { transform: none; } } footer { background-color: var(--azul-oscuro); color: white; text-align: center; padding: 2rem 1rem; margin-top: 2rem; } .social-links { margin: 1rem 0; } .social-links a { color: white; margin: 0 0.5rem; font-size: 1.5rem; } @media (max-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } } .center-cta { text-align: center; }