/* ============================================================ Octopus Lux - capa final de identidad visual Se carga al final del para neutralizar estilos heredados. ============================================================ */ :root { --brand-text: #192e40; --brand-tagline: #7a8fa3; --ol-ink: #2563EB; --ol-ink-2: #4F46E5; --ol-ink-3: #DBEAFE; --ol-cyan: #06B6D4; --ol-teal: #14B8A6; --ol-green: #16A34A; --ol-amber: #D97706; --ol-purple: #7C3AED; --ol-red: #EF4444; --ol-bg: #FAF9F7; --ol-bg-2: #F8FAFC; --ol-surface: #FFFFFF; --ol-text: #111827; --ol-muted: #4B5563; --ol-soft: #6B7280; --ol-border: rgba(37,99,235,0.12); --ol-border-2: rgba(37,99,235,0.20); --ol-shadow-sm: 0 4px 14px rgba(37,99,235,0.08); --ol-shadow: 0 12px 32px rgba(37,99,235,0.12); --ol-shadow-lg: 0 24px 64px rgba(79,70,229,0.16); --ol-r-xl: 20px; --ol-r-lg: 14px; --ol-r-md: 10px; --font-body: 'DM Sans', sans-serif; --font-display: 'DM Sans', sans-serif; --primary: var(--ol-ink); --primary-2: var(--ol-ink-2); --accent: var(--ol-cyan); --accent-2: var(--ol-teal); --success: var(--ol-green); --bg: var(--ol-bg); --bg-2: var(--ol-bg-2); --surface: var(--ol-surface); --text: var(--ol-text); --muted: var(--ol-muted); --soft: var(--ol-soft); --border: var(--ol-border); --border-2: var(--ol-border-2); --shadow: var(--ol-shadow); --shadow-lg: var(--ol-shadow-lg); --texto: var(--ol-text); --texto-suave: var(--ol-muted); --amarillo: var(--ol-ink); --teal: var(--ol-teal); --verde: var(--ol-green); --cyan: var(--ol-cyan); --card-bg: var(--ol-surface); --card-border: var(--ol-border); --card-hover: var(--ol-bg-2); --c-primary: var(--ol-ink); --c-primary-dark: var(--ol-ink-2); --c-primary-light: var(--ol-ink-3); --c-secondary: var(--ol-cyan); --c-accent: var(--ol-teal); --c-success: var(--ol-green); --c-error: var(--ol-red); --c-bg: var(--ol-bg); --c-card: var(--ol-surface); --c-text: var(--ol-text); --c-muted: var(--ol-muted); --c-border: var(--ol-border); } html { background: var(--ol-bg) !important; } body { font-family: var(--font-body) !important; background: var(--ol-bg) !important; /* fondo global de página, ancho completo */ color: var(--ol-text) !important; line-height: 1.6; width: 100% !important; min-height: 100vh !important; /* el fondo cubre todo el viewport aunque el contenido sea corto */ } body::before { content: '' !important; position: fixed !important; inset: 0 !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E") !important; pointer-events: none !important; z-index: 0 !important; opacity: 0.18 !important; } a { color: inherit; } p, li, small, .hero p, .hero-sub, .page-hero-sub, .home-title p, .app-hero p, .card p, .card li, .legal-section p, .legal-section li, .footer-brand p, .footer-bottom span, .footer-col a, .footer-legal a, .cta-nota, .form-help { color: var(--ol-muted) !important; } h1, h2, h3, h4, .home-title h2, .app-hero h2, .card h2, .card h3, .legal-section h2, .legal-section h3, .sec-title, .brand-name { font-family: var(--font-display) !important; color: var(--ol-text) !important; text-shadow: none !important; -webkit-text-fill-color: currentColor !important; } h1 span, h2 span, h3 span, .hero-badge, .page-badge, .grado-badge, .sec-label, .demo-label, .card-title { color: var(--ol-ink) !important; } strong, em { color: var(--ol-text) !important; } header { position: sticky !important; top: 0 !important; z-index: 100 !important; height: auto !important; padding: 0 !important; display: block !important; background: rgba(255,255,255,0.90) !important; border-bottom: 1px solid var(--ol-border) !important; box-shadow: 0 2px 12px rgba(37,99,235,0.07) !important; backdrop-filter: blur(20px) saturate(1.4) !important; } .nav { width: min(1120px, calc(100% - 40px)) !important; height: 68px !important; margin: 0 auto !important; padding: 0 !important; gap: 20px !important; } .brand, .logo { color: var(--ol-text) !important; text-decoration: none !important; } .brand img, .brand-icon, .logo-icon img { width: 38px !important; height: 38px !important; object-fit: contain !important; border-radius: 10px !important; background: #FFFFFF !important; box-shadow: 0 3px 10px rgba(37,99,235,0.12) !important; } .brand-name, .logo h1 { font-size: 0.95rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1 !important; color: var(--brand-text) !important; background: none !important; -webkit-text-fill-color: var(--brand-text) !important; } .brand-tagline, .brand-sub, .logo-slogan, .logo p { color: var(--brand-tagline) !important; font-size: 0.62rem !important; font-weight: 500 !important; letter-spacing: 0.04em !important; opacity: 0.8 !important; } .brand-copy { display: flex !important; flex-direction: column !important; gap: 2px !important; } .nav-center { display: flex !important; align-items: center !important; gap: 4px !important; } .nav-right { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; } .nav-link { padding: 7px 14px !important; border-radius: 8px !important; font-size: 0.875rem !important; font-weight: 500 !important; text-decoration: none !important; transition: color .2s, background .2s !important; color: var(--ol-muted) !important; background: transparent !important; } .nav-link:hover, .nav-link.active { color: var(--ol-text) !important; background: rgba(37,99,235,0.06) !important; } .btn-ghost { padding: 8px 16px !important; border-radius: 12px !important; font-size: 0.875rem !important; font-weight: 600 !important; border: 1.5px solid var(--ol-border-2) !important; text-decoration: none !important; white-space: nowrap !important; transition: color .2s !important; cursor: pointer !important; color: var(--ol-muted) !important; background: transparent !important; } .btn-ghost:hover { color: var(--ol-text) !important; } @media (max-width: 1024px) { .nav-center { display: none !important; } } @media (max-width: 600px) { .nav-right .btn-ghost, .nav-right .btn-primary { display: none !important; } } .hamburger, .close-btn { color: var(--ol-ink) !important; background: transparent !important; border: none !important; box-shadow: none !important; } .mobile-menu, .mobile-nav, .nav-links { background: rgba(255,255,255,0.97) !important; border-color: var(--ol-border) !important; color: var(--ol-text) !important; box-shadow: 0 18px 48px rgba(37,99,235,0.14) !important; } .mobile-menu-header { background: rgba(37,99,235,0.06) !important; border-bottom-color: var(--ol-border) !important; } .mobile-menu-header h2 { color: var(--ol-ink) !important; } .mobile-menu-list a { color: var(--ol-muted) !important; border-bottom-color: rgba(37,99,235,0.08) !important; } .mobile-menu-list a:hover { color: var(--ol-text) !important; background: var(--ol-bg-2) !important; } .hero, .page-hero, .app-hero, .cta-box, .demo-card, .hero-panel, .soft-band { background: radial-gradient(circle at top right, rgba(37,99,235,0.12), transparent 42%), radial-gradient(circle at top left, rgba(6,182,212,0.10), transparent 38%), linear-gradient(180deg, #FFFFFF 0%, var(--ol-bg) 100%) !important; color: var(--ol-text) !important; border-color: var(--ol-border) !important; } .screen, main, .container, .wrap, .content-wrap, .legal-wrap, .grid-wrap { color: var(--ol-text) !important; } .card, .app-card, .visual-card, .include-item, .shell, .coming-soon-banner, .legal-section, .legal-intro, .legal-highlight, .quick-nav-link, .decision-card, .comparison-table-wrapper, .filtro-btn, details, input, select, textarea, .question-card, .result-card, .stat-card, .division-box, .feynman-paso, .fraccion-item, .tip-item, .paso-item, .causa-item, .ciencia-item, .tema-card, .estrategia-item, .no-item, .estado-card, .tabla-card, .operacion-box, .division-card, .sumas-card, .restas-card, .reloj-card, .instructions-box, .instrucciones-box, .feedback-box, .steps-box, .score-display, .problem-display, .vocal-card, .tabs, #categorias, #frase-bar, #tablero { background: var(--ol-surface) !important; color: var(--ol-text) !important; border: 1px solid var(--ol-border) !important; border-radius: var(--ol-r-lg) !important; box-shadow: var(--ol-shadow-sm) !important; } .card:hover, .app-card:hover, .quick-nav-link:hover, .decision-card:hover, details:hover { border-color: var(--ol-border-2) !important; box-shadow: var(--ol-shadow) !important; } .card-rosa, .card-azul, .card-morado, .card-verde, .card-naranja, .card-cyan { background: var(--ol-surface) !important; } .card-emoji-wrap, .icon-box, .visual-icon, .step-num, .hero-badge, .page-badge, .grado-badge, .octo-chip, .card-badge, .card-grado, .filtro-btn.active, .badge-mat, .badge-esp, .badge-cien, .badge-grado, .badge-dolor, .badge-prox, .demo-pregunta, .ciencia-item, .etapa-item, .paso-num, .resta-col, .frac-big, .stat-item { background: rgba(37,99,235,0.08) !important; border-color: rgba(37,99,235,0.16) !important; color: var(--ol-ink) !important; box-shadow: none !important; } .legal-num, .cs-icon, .ico { background: rgba(37,99,235,0.10) !important; color: var(--ol-ink) !important; } .legal-section:hover, .legal-highlight:hover, .legal-intro:hover { border-color: var(--ol-border-2) !important; box-shadow: var(--ol-shadow) !important; } .cookie-table th { background: rgba(37,99,235,0.06) !important; color: var(--ol-text) !important; } .cookie-table td { color: var(--ol-muted) !important; border-color: var(--ol-border) !important; } .tag-tech, .tag-analytics, .tag-pwa { background: rgba(37,99,235,0.08) !important; color: var(--ol-ink) !important; border: 1px solid rgba(37,99,235,0.16) !important; } .headline, .quota-number { color: var(--ol-text) !important; } .headline .accent, .headline .accent-cyan, .coming-soon-banner strong, .footer-min a, .accent, .card-arrow, .seccion-label, .demo-respuesta strong, .etapa-num, .paso-num, .fraccion-item strong, .tip-item strong, .ciencia-item strong, .estado-card strong, .tema-card strong, .estrategia-item strong, .no-item strong { color: var(--ol-ink) !important; } .pill, .counter-badge { background: rgba(37,99,235,0.08) !important; border: 1px solid rgba(37,99,235,0.16) !important; color: var(--ol-ink) !important; } .pill-dot, .status-dot { background: var(--ol-cyan) !important; } .features li, .feature-card, .trust-item, .transicion, .demo-respuesta, .related-links a, .cta-box li, .paso-texto { background: rgba(37,99,235,0.04) !important; border-color: var(--ol-border) !important; color: var(--ol-muted) !important; } .cta-box h2, .demo-card h2, .demo-card h3, .card h2, .card h3 { color: var(--ol-text) !important; } .btn-primary, .btn-hero, .btn-cta, .nav-cta, .btn, .back-btn, .play-btn, .num-play, .tab-btn.active, .tab.active, button[type="submit"], .btn-accion, .btn-hablar, .btn-limpiar, .btn-check, .btn-secondary, .btn-control, .btn-secondary-div, .video-btn { font-family: var(--font-body) !important; background: linear-gradient(135deg, var(--ol-ink), var(--ol-cyan)) !important; color: #FFFFFF !important; border: none !important; border-radius: var(--ol-r-lg) !important; box-shadow: 0 14px 34px rgba(37,99,235,0.22) !important; text-decoration: none !important; } .btn-primary:hover, .btn-hero:hover, .btn-cta:hover, .nav-cta:hover, .btn:hover, .back-btn:hover, .play-btn:hover, .num-play:hover, .btn-check:hover, .btn-secondary:hover, .btn-control:hover, .btn-secondary-div:hover, .video-btn:hover, button[type="submit"]:hover { background: linear-gradient(135deg, var(--ol-ink-2), #0891B2) !important; transform: translateY(-1px); } input, select, textarea, .answer-input, .tabla-input, .tabla-select, .slider-input, .time-input-blue, .time-input-red { font-family: var(--font-body) !important; background: #FFFFFF !important; color: var(--ol-text) !important; border: 1px solid var(--ol-border-2) !important; border-radius: var(--ol-r-md) !important; } .tab-btn, .tab { background: #FFFFFF !important; color: var(--ol-muted) !important; border: 1px solid var(--ol-border) !important; border-radius: var(--ol-r-lg) !important; } .tab-btn.active-tab, .tab-btn.active, .tab.active { background: linear-gradient(135deg, var(--ol-ink), var(--ol-cyan)) !important; color: #FFFFFF !important; border-color: transparent !important; } .abc-grid, .num-grid, .vocales-wrap, .visual-grid, .controls-grid, .stats-grid { color: var(--ol-text) !important; } .lt-up, .lt-low, .num-big, .num-word, .vocal-ltr, .vocal-mini, .operacion-display, .stat-number { color: var(--ol-text) !important; text-shadow: none !important; } .vocal-emoji, .vocal-ej { color: var(--ol-muted) !important; } .toast { background: var(--ol-text) !important; color: #FFFFFF !important; box-shadow: var(--ol-shadow-lg) !important; } footer { position: relative !important; /* por encima de .bg-bubbles (z-index:0) */ z-index: 2 !important; border-top: 1px solid var(--ol-border) !important; background: #FFFFFF !important; /* opaco: el fondo/burbujas no se ven detrás */ padding: 40px 0 48px !important; margin: 0 !important; /* full-width, sin caja centrada */ max-width: none !important; width: auto !important; text-align: left !important; color: var(--ol-text) !important; box-shadow: none !important; border-radius: 0 !important; } .wrap { width: min(1120px, calc(100% - 40px)) !important; margin: 0 auto !important; position: relative !important; z-index: 2 !important; } .footer-inner { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 40px !important; flex-wrap: wrap !important; } /* Logo wordmark del footer a tamaño completo: la regla .brand img de 38px es para el header; el footer usa Octo_logo_color.svg (120x50). Se targetea por src para NO afectar a los footers con isotipo cuadrado. */ .footer-brand .brand img[src*="Octo_logo"] { width: 120px !important; height: auto !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; object-fit: contain !important; } .footer-brand p { font-size: 0.84rem !important; color: var(--ol-soft) !important; margin-top: 8px !important; max-width: 220px !important; line-height: 1.6 !important; } .footer-col h4 { font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--ol-soft) !important; margin-bottom: 14px !important; } .footer-col a { display: block !important; font-size: 0.875rem !important; color: var(--ol-ink) !important; /* azul, igual que el home */ margin-bottom: 10px !important; transition: color 0.15s !important; text-decoration: none !important; /* sin subrayado permanente */ } .footer-col a:hover { color: var(--ol-ink-2) !important; } .footer-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 40px !important; padding-top: 24px !important; border-top: 1px solid var(--ol-border) !important; } .footer-bottom span { font-size: 0.8rem !important; color: var(--ol-soft) !important; } .footer-legal { display: flex !important; gap: 20px !important; flex-wrap: wrap !important; } .footer-legal a { font-size: 0.8rem !important; color: var(--ol-ink) !important; /* azul, igual que el home */ transition: color 0.15s !important; text-decoration: none !important; /* sin subrayado permanente */ } .footer-legal a:hover { color: var(--ol-ink-2) !important; } .bg-bubbles li, .bubble { background: rgba(37,99,235,0.06) !important; opacity: 0.35 !important; } /* Guardia de layout para páginas del Lote 1: evita que capas decorativas o márgenes heredados creen espacio antes del header. */ body > .bg-bubbles, body > .bubbles { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; z-index: 0 !important; } body > header:first-of-type { margin-top: 0 !important; } body > header:first-of-type + .page-hero, body > header:first-of-type + main, body > header:first-of-type + main.page, body > header:first-of-type + main > .hero:first-child { margin-top: 0 !important; } @media (max-width: 768px) { .nav { width: min(100% - 28px, 1120px) !important; } .footer-inner { flex-direction: column !important; } .footer-bottom { flex-direction: column !important; align-items: flex-start !important; } }