/* ============================================ CSS VARIABLES — EGARA KARTS DESIGN SYSTEM ============================================ */ :root { --primary: #0C0C0E; --secondary: #E63312; --accent: #FF4D2A; --accent-glow: rgba(230, 51, 18, 0.25); --cta: #D92D0D; --cta-hover: #B8240B; --surface: #141416; --surface-elevated: #1C1C1F; --surface-hover: #252528; --background: #0C0C0E; --text: #F5F5F0; --text-muted: #9A9A95; --text-dim: #8A8A85; --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.16); --border-accent: rgba(230, 51, 18, 0.35); --success: #22C55E; --font-hero: 'Bebas Neue', 'Arial Narrow', sans-serif; --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================ LIGHT MODE ============================================ */ [data-theme="light"] { --primary: #FFFFFF; --secondary: #C62810; --accent: #D42B0F; --accent-glow: rgba(198, 40, 16, 0.12); --surface: #F7F7F5; --surface-elevated: #EEEEEB; --surface-hover: #E5E5E2; --background: #FAFAF8; --text: #1A1A18; --text-muted: #4A4A46; --text-dim: #6E6E6A; --border: rgba(0, 0, 0, 0.1); --border-strong: rgba(0, 0, 0, 0.13); --border-accent: rgba(198, 40, 16, 0.2); --success: #15803D; } /* Nav — hero: white text on dark image. Scrolled: dark text on light bg */ [data-theme="light"] .nav.scrolled { background: rgba(250, 250, 248, 0.94); border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .nav.scrolled .nav-links a { color: var(--text-muted); } [data-theme="light"] .nav.scrolled .nav-links a:hover { color: var(--text); } [data-theme="light"] .nav.scrolled .nav-logo img { filter: brightness(0); } [data-theme="light"] .nav.scrolled .nav-toggle span { background: var(--text); } /* nav-lang-current removed — uses nav-dropdown system */ /* nav-lang-dropdown old light mode removed — uses nav-dropdown system */ [data-theme="light"] .nav.scrolled .nav-logo { color: var(--text); } [data-theme="light"] .nav.scrolled .nav-logo-text { color: var(--text); } [data-theme="light"] .nav.scrolled .nav-logo-text span { color: var(--secondary); } [data-theme="light"] .nav.scrolled .nav-cta { color: var(--secondary); border-color: var(--secondary); } [data-theme="light"] .nav.scrolled .nav-cta:hover { color: white; background: var(--secondary); } [data-theme="light"] .nav.scrolled .nav-dropdown-trigger { color: var(--text-muted); } [data-theme="light"] .nav.scrolled .nav-dropdown-trigger:hover { color: var(--text); } [data-theme="light"] .nav.scrolled .nav-dropdown-trigger svg { stroke: var(--text-muted); } [data-theme="light"] .nav.scrolled .theme-toggle { color: var(--text-muted); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .nav.scrolled .theme-toggle:hover { color: var(--text); } [data-theme="light"] .nav-links.active { background: rgba(250, 250, 248, 0.98); } [data-theme="light"] .nav-links.active a { color: var(--text-muted); } [data-theme="light"] .nav-links.active a:hover { color: var(--text); } [data-theme="light"] .nav-links.active .nav-cta { color: var(--secondary); } /* Hero — dark overlay for readability on light mode */ [data-theme="light"] .hero-bg::before { background: linear-gradient(135deg, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0.65) 40%, rgba(15,15,15,0.3) 100%), url('img/ek16-hero.webp') 68% center/cover no-repeat; } [data-theme="light"] .hero h1, [data-theme="light"] .hero-desc, [data-theme="light"] .hero-badge, [data-theme="light"] .hero-stat-value, [data-theme="light"] .hero-stat-label, [data-theme="light"] .hero h1 .line-thin { color: #F5F5F0; } [data-theme="light"] .hero-badge { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); } [data-theme="light"] .hero-badge-dot { background: #22C55E; } [data-theme="light"] .hero h1 .highlight { color: #FF4D2A; } [data-theme="light"] .hero-stats { border-top-color: rgba(255,255,255,0.15); } [data-theme="light"] .hero-stat-label { color: rgba(255,255,255,0.6); } [data-theme="light"] .hero .btn-secondary { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #F5F5F0; } [data-theme="light"] .hero .btn-secondary:hover { background: rgba(255,255,255,0.2); } /* Grid pattern */ [data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); } /* Cards & surfaces */ [data-theme="light"] .product-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); } [data-theme="light"] .product-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.08); } [data-theme="light"] .product-img { border-color: rgba(0,0,0,0.08); } [data-theme="light"] .feature-cell { background: var(--background); } [data-theme="light"] .feature-cell:hover { background: var(--surface); } [data-theme="light"] .features-grid { background: var(--border); } /* Heritage */ [data-theme="light"] .heritage-year span { background: linear-gradient(180deg, #C0C0B8 0%, #E8E8E3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } [data-theme="light"] .heritage-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); } /* Electric section */ [data-theme="light"] .electric { background: var(--surface); } [data-theme="light"] .electric-graphic { border-color: rgba(21,128,61,0.15); background: radial-gradient(circle, rgba(21,128,61,0.06) 0%, transparent 70%); } /* Testimonials */ [data-theme="light"] .testimonial-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); } [data-theme="light"] .testimonial-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); } /* Form */ [data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .form-group textarea { background: #fff; border-color: rgba(0,0,0,0.12); } [data-theme="light"] .model-option { background: #fff; border-color: rgba(0,0,0,0.1); } [data-theme="light"] .model-option.selected { background: rgba(198,40,16,0.04); } [data-theme="light"] .model-config { background: #fff; } [data-theme="light"] .qty-stepper button { background: var(--surface); } [data-theme="light"] .qty-stepper input { background: #fff; } [data-theme="light"] .radio-pill { background: #fff; } [data-theme="light"] .form-card { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } /* Comparator */ [data-theme="light"] .comparator-table th { background: var(--surface); } [data-theme="light"] .comparator-table td:first-child { background: var(--surface); } /* FAQ */ [data-theme="light"] .faq-item { background: #fff; } [data-theme="light"] .faq-question:hover { background: var(--surface); } /* Sticky */ [data-theme="light"] .sticky-cta { background: rgba(250,250,248,0.95); border-top-color: rgba(0,0,0,0.08); } [data-theme="light"] .back-to-top { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.1); } /* WhatsApp */ [data-theme="light"] .whatsapp-float { box-shadow: 0 4px 16px rgba(37,211,102,0.3); } /* Toasts */ [data-theme="light"] .toast-error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; } [data-theme="light"] .toast-warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; } [data-theme="light"] .toast-success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; } [data-theme="light"] .toast-info { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; } /* Trusted */ [data-theme="light"] .trusted-logo { color: var(--text-muted); } /* Footer */ [data-theme="light"] .footer { background: #1A1A18; color: #F5F5F0; } [data-theme="light"] .footer .footer-brand p, [data-theme="light"] .footer .footer-col a, [data-theme="light"] .footer .footer-col h4, [data-theme="light"] .footer .footer-bottom p { color: rgba(245,245,240,0.6); } [data-theme="light"] .footer .footer-col h4 { color: rgba(245,245,240,0.9); } [data-theme="light"] .footer .footer-col a:hover { color: #FF4D2A; } [data-theme="light"] .footer .footer-social a { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); } [data-theme="light"] .footer .footer-lang button { color: rgba(245,245,240,0.5); border-color: rgba(255,255,255,0.1); } [data-theme="light"] .footer .footer-lang button.active { color: #F5F5F0; border-color: #C62810; } /* Cookie notice (light theme) */ [data-theme="light"] .cookie-notice { background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.08); color: #1A1A18; } [data-theme="light"] .cookie-notice a { color: #C62810; } /* Light mode — new visual redesign elements */ [data-theme="light"] .hero-particle { background: rgba(198, 40, 16, 0.2); } [data-theme="light"] .hero-bottom-fade { background: linear-gradient(to top, var(--background) 0%, transparent 100%); } [data-theme="light"] .hero-stat { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .hero-stat:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(198, 40, 16, 0.2); } [data-theme="light"] .scroll-indicator span { color: rgba(26, 26, 24, 0.3); } [data-theme="light"] .scroll-indicator-line { background: linear-gradient(to bottom, rgba(198, 40, 16, 0.5), transparent); } [data-theme="light"] .product-card { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter:blur(12px);backdrop-filter: blur(12px); } [data-theme="light"] .product-card .product-tag { background: rgba(198, 40, 16, 0.06); border-color: rgba(198, 40, 16, 0.12); } [data-theme="light"] .product-img-wrap { border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .feature-icon { color: var(--secondary); } [data-theme="light"] .heritage-card { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter:blur(12px);backdrop-filter: blur(12px); } [data-theme="light"] .electric-pulse { border-color: rgba(21, 128, 61, 0.12); } [data-theme="light"] .testimonial-card { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter:blur(12px);backdrop-filter: blur(12px); } [data-theme="light"] .testimonial-card::before { color: var(--secondary); opacity: 0.04; } [data-theme="light"] .form-group input:focus, [data-theme="light"] .form-group select:focus, [data-theme="light"] .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(198, 40, 16, 0.08); } [data-theme="light"] .trusted { border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent) 1; } [data-theme="light"] .trusted-logo { color: var(--text-muted); } [data-theme="light"] .trusted-logo:hover { color: var(--text); } /* Light mode — comprehensive text contrast fixes */ [data-theme="light"] .product-card h3 { color: var(--text); } [data-theme="light"] .product-card p { color: var(--text-muted); } [data-theme="light"] .product-specs li { color: var(--text-muted); } [data-theme="light"] .product-card .product-tag { color: var(--secondary); } [data-theme="light"] .product-detail-link { color: var(--secondary); } [data-theme="light"] .product-quote-btn { color: var(--text); border-color: rgba(0,0,0,0.12); } [data-theme="light"] .compare-toggle { color: var(--text-muted); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .feature-cell h3 { color: var(--text); } [data-theme="light"] .feature-cell p { color: var(--text-muted); } [data-theme="light"] .feature-number { color: var(--text-dim); } [data-theme="light"] .feature-cell:hover .feature-number { color: var(--secondary); } [data-theme="light"] .heritage-card-text { color: var(--text-muted); } [data-theme="light"] .heritage-card-stat { color: var(--text); } [data-theme="light"] .heritage-card-stat-sub { color: var(--text-dim); } [data-theme="light"] .timeline-content strong { color: var(--text); } [data-theme="light"] .timeline-content p { color: var(--text-muted); } [data-theme="light"] .timeline-dot { border-color: rgba(0,0,0,0.15); background: var(--background); } [data-theme="light"] .electric-feat h5 { color: var(--text); } [data-theme="light"] .electric-feat p { color: var(--text-muted); } [data-theme="light"] .electric-stat-value { color: var(--text); } [data-theme="light"] .electric-stat-label { color: var(--text-muted); } [data-theme="light"] .testimonial-stars { color: #D97706; } [data-theme="light"] .testimonial-card blockquote { color: var(--text-muted); } [data-theme="light"] .testimonial-name { color: var(--text); } [data-theme="light"] .testimonial-role { color: var(--text-dim); } [data-theme="light"] .process-step h3 { color: var(--text); } [data-theme="light"] .process-step p { color: var(--text-muted); } [data-theme="light"] .step-number { color: var(--secondary); border-color: rgba(0,0,0,0.1); background: var(--background); } [data-theme="light"] .intl-stat { background: var(--surface); border-color: rgba(0,0,0,0.06); } [data-theme="light"] .intl-stat-value { color: var(--text); } [data-theme="light"] .intl-stat-label { color: var(--text-muted); } [data-theme="light"] .intl-stat-icon { color: var(--text-dim); } [data-theme="light"] .faq-question span { color: var(--text); } [data-theme="light"] .faq-answer-inner { color: var(--text-muted); } [data-theme="light"] .faq-arrow { color: var(--text-dim); } [data-theme="light"] .section-label { color: var(--secondary); } [data-theme="light"] .section-title { color: var(--text); } [data-theme="light"] .section-desc { color: var(--text-muted); } [data-theme="light"] .cta-inner .section-label { color: var(--secondary); } [data-theme="light"] .cta-inner .section-title { color: var(--text); } [data-theme="light"] .cta-inner .section-desc { color: var(--text-muted); } [data-theme="light"] .form-step-title { color: var(--text); } [data-theme="light"] .form-step-sub { color: var(--text-muted); } [data-theme="light"] .form-group label { color: var(--text-muted); } [data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .form-group textarea { color: var(--text); } [data-theme="light"] .model-option-name { color: var(--text); } [data-theme="light"] .model-option-tag { color: var(--text-dim); } [data-theme="light"] .model-config-label { color: var(--text); } [data-theme="light"] .qty-stepper button { color: var(--text); } [data-theme="light"] .qty-stepper input { color: var(--text); } [data-theme="light"] .engine-toggle button { color: var(--text-muted); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .engine-toggle button.active { color: white; } [data-theme="light"] .nav-dropdown-label { color: var(--text-dim); } [data-theme="light"] .nav-dd-sub { color: var(--text-dim); } [data-theme="light"] .comparator-table { color: var(--text); } [data-theme="light"] .comparator-bar { color: var(--text); background: var(--surface); } [data-theme="light"] .nav-lang-opt { color: var(--text-muted) !important; } [data-theme="light"] .nav-lang-opt:hover { color: var(--text) !important; } [data-theme="light"] .nav-lang-opt.active { color: var(--secondary) !important; } /* Theme toggle button. Oculto a propósito: el tema claro solo existe en esta página (las otras 23 son solo oscuras) y cambiarlo aquí dejaba al visitante con un sitio incoherente al navegar. Todo el CSS del tema claro se conserva para portarlo al sitio completo cuando toque. */ .theme-toggle { display: none !important; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: none; color: rgba(255, 255, 255, 0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: all 0.4s; margin-left: 4px; flex-shrink: 0; } .theme-toggle:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); } .nav.scrolled .theme-toggle { color: var(--text-muted); border-color: var(--border); } .nav.scrolled .theme-toggle:hover { color: var(--text); border-color: var(--text-dim); } /* Scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--secondary); z-index: 10001; width: 0%; transition: width 0.1s linear; pointer-events: none; } /* Back to top */ .back-to-top { position: fixed; bottom: 28px; left: 28px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-hover); border: 1px solid var(--border-strong, var(--border)); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; opacity: 0; pointer-events: none; transition: all 0.3s var(--ease-out); box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .back-to-top.visible { opacity: 1; pointer-events: auto; } .back-to-top:hover { background: var(--cta); color: white; border-color: var(--cta); transform: translateY(-2px); } /* Product category filter */ .product-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; } .filter-btn { padding: 10px 20px; border-radius: 100px; border: 1px solid var(--border); background: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.3s var(--ease-out); letter-spacing: 0.03em; min-height: 44px; } .filter-btn:hover { border-color: var(--text-dim); color: var(--text); } .filter-btn.active { background: var(--cta); border-color: var(--cta); color: white; } .product-card[data-category] { transition: all 0.4s var(--ease-out); } .product-card.filtered-out { display: none; } /* FAQ */ .faq { padding: 120px 0; } .faq-header { text-align: center; margin-bottom: 64px; } .faq-header .section-label { justify-content: center; } .faq-header .section-desc { margin: 0 auto; } .faq-grid { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.3s; } .faq-item:hover { border-color: var(--border-accent); } .faq-question { width: 100%; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; background: none; border: none; cursor: pointer; color: var(--text); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; text-align: left; gap: 16px; transition: background 0.3s; letter-spacing: 0; text-transform: none; } .faq-question:hover { background: var(--surface-elevated); } .faq-arrow { display: inline-flex; align-items: center; color: var(--text-muted); transition: transform 0.3s var(--ease-out); flex-shrink: 0; } .faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--secondary); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); } .faq-item.open .faq-answer { max-height: 400px; } .faq-answer-inner { padding: 0 24px 20px; font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; } /* Product image lightbox */ .lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.92); display: none; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lightbox.visible { display: flex; } .lightbox-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; z-index: 2; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.3s; } .lightbox-close:hover { opacity: 1; } .lightbox-main { position: relative; max-width: 85vw; max-height: 70vh; display: flex; align-items: center; justify-content: center; } .lightbox-img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; transition: opacity 0.3s; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: white; width: 48px; height: 48px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; -webkit-backdrop-filter:blur(8px);backdrop-filter: blur(8px); } .lightbox-nav:hover { background: rgba(255,255,255,0.2); } .lightbox-prev { left: -60px; } .lightbox-next { right: -60px; } .lightbox-counter { font-family: var(--font-mono); font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 16px; } .lightbox-thumbs { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; max-width: 85vw; padding: 4px 0; } .lightbox-thumb { width: 60px; height: 44px; border-radius: 6px; object-fit: cover; cursor: pointer; border: 2px solid transparent; opacity: 0.5; transition: all 0.3s; flex-shrink: 0; } .lightbox-thumb.active { border-color: var(--secondary); opacity: 1; } .lightbox-thumb:hover { opacity: 0.8; } .product-img { cursor: pointer; } @media (max-width: 768px) { .lightbox-main { max-width: 95vw; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .lightbox-nav { width: 40px; height: 40px; font-size: 1rem; } .lightbox-thumb { width: 48px; height: 36px; } } /* Cookie notice — minimal, non-blocking corner toast (LSSI/RGPD compliant for tech-only storage) */ .cookie-notice { position: fixed; bottom: 16px; left: 16px; z-index: 9999; max-width: 360px; padding: 14px 16px; background: rgba(17,17,17,0.96); color: var(--text-muted); border: 1px solid var(--border); border-radius: 12px; font-size: 0.8rem; line-height: 1.5; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(20px); opacity: 0; transition: transform 0.4s var(--ease-out), opacity 0.4s ease; /* Oculto = inerte: sin esto, el aviso invisible (visitas con el aviso ya descartado en localStorage no lo eliminan del DOM) se queda encima del botón de subir (mismo rincón, z-index 9999) y se traga sus clicks. */ pointer-events: none; } .cookie-notice.visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .cookie-notice a { color: var(--secondary); text-decoration: underline; } .cookie-notice-close { background: none; border: none; color: var(--text-dim); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; line-height: 1; border-radius: 4px; flex-shrink: 0; } .cookie-notice-close:hover { color: var(--text); background: rgba(255,255,255,0.05); } @media (max-width: 768px) { .cookie-notice { left: 12px; right: 12px; bottom: 80px; max-width: none; } } /* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); background: var(--background); background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 255, 255, 0.015) 0%, transparent 50%); background-attachment: fixed; color: var(--text); line-height: 1.6; overflow-x: hidden; } /* Page transition */ body { animation: pageIn 0.5s ease-out; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } /* Touch feedback for interactive elements */ @media (hover: none) and (pointer: coarse) { .product-card:active, .feature-cell:active, .testimonial-card:active, .filter-btn:active, .faq-question:active, .model-option:active { transform: scale(0.97); transition-duration: 0.1s; } .btn-primary:active, .btn-secondary:active { transform: scale(0.95); transition-duration: 0.1s; } } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; padding: 12px 24px; background: var(--cta); color: white; font-size: 0.9rem; font-weight: 600; border-radius: 0 0 8px 0; text-decoration: none; } .skip-link:focus { position: fixed; left: 0; top: 0; width: auto; height: auto; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } strong, b { font-weight: 700; color: var(--text); } /* SVG Icon system */ .icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; } .icon svg { width: 100%; height: 100%; fill: currentColor; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: 4px; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ============================================ UTILITY ============================================ */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .section-label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: #ED3C1B; /* AA fix: brand red brightened for 4.5:1 on --surface (dark theme); light theme keeps var(--secondary) below */ margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 24px; text-transform: uppercase; } .section-desc { font-size: 1.05rem; color: var(--text-muted); max-width: 640px; line-height: 1.75; font-weight: 400; } /* Reveal animations */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ============================================ NAVIGATION ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 0; transition: all 0.4s var(--ease-out); } .nav.scrolled { padding: 12px 0; background: rgba(10, 10, 10, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .nav-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; overflow: visible; gap: 8px; } .nav-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #FFFFFF; flex-shrink: 0; } .nav-logo img { height: 28px; width: auto; transition: filter 0.4s var(--ease-out); filter: brightness(0) invert(1); } .nav.scrolled .nav-logo img { /* Silueta siempre: el PNG original (cromado con bisel) se ve sucio a 28px; en claro el override la pone negra */ filter: brightness(0) invert(1); } .nav-logo-text { /* El logo.png ya es el wordmark: el texto duplicaba "EGARAKARTS" al lado */ display: none; font-family: var(--font-hero); font-size: 1.3rem; letter-spacing: 2px; white-space: nowrap; } .nav-logo-text span { color: var(--secondary); } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-links a { font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); transition: color 0.4s, opacity 0.4s; position: relative; } .nav.scrolled .nav-links a { color: var(--text-muted); } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--secondary); transition: width 0.3s var(--ease-out); } .nav-links a:hover { color: #FFFFFF; } .nav.scrolled .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { width: 100%; } .nav-cta { background: transparent; color: white; padding: 8px 20px; border-radius: 6px; border: 1.5px solid var(--secondary); white-space: nowrap; font-size: 0.8rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0.02em; transition: all 0.3s var(--ease-out); } .nav-cta:hover { background: var(--cta); color: white; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(230, 51, 18, 0.25); } .nav.scrolled .nav-cta { color: var(--text); } .nav.scrolled .nav-cta:hover { color: white; } .nav-cta::after { display: none !important; } /* Nav dropdowns */ .nav-links li { position: relative; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .nav-dropdown-trigger svg { width: 10px; height: 10px; transition: transform 0.3s var(--ease-out); } .nav-links li:hover > .nav-dropdown-trigger svg { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-8px); min-width: 240px; background: rgba(15, 15, 15, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 8px; opacity: 0; visibility: hidden; transition: all 0.3s var(--ease-out); z-index: 100; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } .nav-links li:hover > .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown-label { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding: 10px 12px 4px; display: block; } .nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; color: var(--text-muted) !important; transition: all 0.2s; white-space: nowrap; } .nav-dropdown a::after { display: none !important; } .nav-dropdown a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text) !important; } .nav-dropdown a .nav-dd-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(230, 51, 18, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-dropdown a .nav-dd-icon svg { width: 14px; height: 14px; color: var(--secondary); } .nav-dropdown a .nav-dd-text { display: flex; flex-direction: column; } .nav-dropdown a .nav-dd-sub { font-size: 0.7rem; color: var(--text-dim); margin-top: 1px; } .nav-dropdown-divider { height: 1px; background: var(--border); margin: 6px 12px; } /* Light mode dropdown */ [data-theme="light"] .nav-dropdown { background: rgba(255, 255, 255, 0.96); border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); } [data-theme="light"] .nav-dropdown a { color: var(--text-muted) !important; } [data-theme="light"] .nav-dropdown a:hover { background: rgba(0, 0, 0, 0.04); color: var(--text) !important; } [data-theme="light"] .nav-dropdown a .nav-dd-icon { background: rgba(198, 40, 16, 0.06); } /* Language dropdown — uses nav-dropdown system */ .nav-lang-opt { display: flex; align-items: center; padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; color: var(--text-muted) !important; text-decoration: none !important; transition: all 0.2s; } .nav-lang-opt:hover { background: rgba(255, 255, 255, 0.06); color: var(--text) !important; } .nav-lang-opt.active { background: rgba(230, 51, 18, 0.08) !important; color: var(--secondary) !important; } /* Mobile menu */ /* >>> menu.css: inicio (botón hamburguesa) — lo extrae scripts/build-shared-assets.py */ .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 10; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .nav-toggle span { width: 26px; height: 2.5px; background: #FFFFFF; border-radius: 2px; /* fallback: productos/*.html no define --ease-out (sí --font-*) */ transition: all 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); transform-origin: center; } .nav.scrolled .nav-toggle span { background: var(--text); } @media (max-width: 1280px) { .nav-toggle { display: flex; } } .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* <<< menu.css: fin (botón hamburguesa) */ /* ============================================ FONDO VÍDEO SCROLL-SCRUBBING ============================================ El wrap está SIEMPRE en el DOM pero display:none hasta que el JS active html.bg-video (dark + no reduced-motion + no saveData + metadata OK). Todos los overrides van scoped bajo html.bg-video: si el vídeo no procede o falla, el diseño actual queda intacto sin tocar nada. */ .bg-video-wrap { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; } html.bg-video .bg-video-wrap { display: block; } .bg-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* El vídeo es 100% intra (cada frame keyframe): sin transición de opacidad brusca al aparecer, un fundido corto suaviza el primer paint. */ opacity: 0; transition: opacity 0.6s ease; } html.bg-video.bg-video-ready .bg-video-wrap video { opacity: 1; } .bg-video-overlay { position: absolute; inset: 0; /* Oscurece el vídeo lo justo: la legibilidad vive en las fichas (cards, formulario, tablas), no en el fondo. Debe verse claramente hasta el final de la página. */ background: linear-gradient(180deg, rgba(12,12,14,0.35) 0%, rgba(12,12,14,0.45) 50%, rgba(12,12,14,0.55) 100%); } /* --- Overrides scoped: solo cuando el fondo vídeo está activo --- */ /* Body transparente para que el vídeo fijo se vea a través de él. */ html.bg-video body { background: transparent; background-image: none; } /* El contenido debe pintarse por encima del wrap (z-index:0). Las secciones son static por defecto; les damos contexto propio para asegurarlo. */ html.bg-video main, html.bg-video .trusted, html.bg-video .products, html.bg-video .features, html.bg-video .process, html.bg-video .international, html.bg-video .cta, html.bg-video .faq, html.bg-video footer { position: relative; z-index: 1; } /* Fondo CONTINUO: se neutraliza todo fondo/degradado opaco a nivel de sección para que el vídeo se lea como un único fondo de arriba a abajo, sin bandas. Las fichas (cards, formulario, tablas, celdas) mantienen sus fondos. */ html.bg-video .features, html.bg-video .shop-home, html.bg-video .cta { background: transparent; } /* La banda de fundido a var(--background) al final del hero crearía una costura oscura sobre el vídeo continuo. */ html.bg-video .hero-bottom-fade { background: none; } /* La imagen hero del ::before desaparece: el vídeo ES el fondo del hero al abrir. Grid, glow y partículas del hero se conservan. */ html.bg-video .hero-bg::before { opacity: 0; } /* Texto suelto fuera de fichas (títulos/labels/descripciones de sección): sombra suave para asegurar contraste sobre las zonas claras del vídeo. */ html.bg-video .section-label, html.bg-video .section-title, html.bg-video .section-desc { text-shadow: 0 1px 12px rgba(12, 12, 14, 0.65), 0 1px 3px rgba(12, 12, 14, 0.5); } /* ============================================ HERO ============================================ */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 80px; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.7) 50%, rgba(5,5,5,0.4) 100%), /* 68%: oculta el rótulo verde incrustado en el borde izquierdo del JPG */ url('img/ek16-hero.webp') 68% center/cover no-repeat; } /* Grid pattern */ .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%); } .hero-content { position: relative; z-index: 2; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 100px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 32px; animation: fadeSlideUp 0.8s var(--ease-out) 0.2s both; } .hero-badge-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hero h1 { font-family: var(--font-hero); font-size: clamp(3.5rem, 9vw, 8rem); font-weight: 400; line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 32px; animation: fadeSlideUp 0.8s var(--ease-out) 0.4s both; } .hero h1 .highlight { color: var(--secondary); position: relative; display: inline-block; } .hero h1 .line-thin { font-weight: 400; color: var(--text); } .hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); } .hero-desc { font-size: 1.25rem; color: rgba(235, 235, 230, 0.92); max-width: 560px; line-height: 1.7; margin-bottom: 48px; animation: fadeSlideUp 0.8s var(--ease-out) 0.6s both; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5); } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeSlideUp 0.8s var(--ease-out) 0.8s both; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: var(--cta); color: white; border-radius: 12px; font-size: 0.95rem; font-weight: 700; font-family: var(--font-body); letter-spacing: 0.02em; text-transform: uppercase; transition: all 0.3s var(--ease-out); min-height: 56px; } .btn-primary:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 12px 32px var(--accent-glow); } .btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: var(--surface-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 12px; font-size: 0.95rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0.02em; text-transform: uppercase; transition: all 0.3s var(--ease-out); min-height: 56px; } .btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-accent); transform: translateY(-2px); } .hero-stats { display: flex; gap: 48px; margin-top: 80px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.15); animation: fadeSlideUp 0.8s var(--ease-out) 1s both; } .hero-stat-value { font-family: var(--font-hero); font-size: 3rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; margin-bottom: 6px; } .hero-stat-value .accent { color: var(--secondary); } .hero-stat-label { font-size: 0.85rem; color: var(--text-dim); } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Hero — Cinematic Enhancements */ .hero-particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .hero-particle { position: absolute; width: 2px; height: 2px; background: rgba(230, 51, 18, 0.4); border-radius: 50%; animation: hero-float 8s linear infinite; } .hero-particle:nth-child(1) { left: 12%; animation-delay: 0s; animation-duration: 7s; } .hero-particle:nth-child(2) { left: 28%; animation-delay: 2.5s; animation-duration: 9s; } .hero-particle:nth-child(3) { left: 48%; animation-delay: 1s; animation-duration: 6.5s; } .hero-particle:nth-child(4) { left: 68%; animation-delay: 3.5s; animation-duration: 8.5s; } .hero-particle:nth-child(5) { left: 85%; animation-delay: 0.5s; animation-duration: 10s; } .hero-particle:nth-child(6) { left: 95%; animation-delay: 4s; animation-duration: 7.5s; } @keyframes hero-float { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateY(-10vh) scale(1.5); opacity: 0; } } .hero-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 50% at 75% 50%, rgba(230, 51, 18, 0.07) 0%, transparent 60%); pointer-events: none; } .hero-bottom-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; z-index: 2; background: linear-gradient(to top, var(--background) 0%, transparent 100%); pointer-events: none; } .hero-badge { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.04); animation: fadeSlideUp 0.8s var(--ease-out) 0.2s both, badge-glow 3s ease-in-out 1.5s infinite alternate; } @keyframes badge-glow { 0% { border-color: var(--border); box-shadow: 0 0 0 rgba(230, 51, 18, 0); } 100% { border-color: rgba(230, 51, 18, 0.3); box-shadow: 0 0 24px rgba(230, 51, 18, 0.06); } } .hero h1 .highlight { text-shadow: 0 0 40px rgba(230, 51, 18, 0.25); } .btn-primary { box-shadow: 0 8px 32px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn-primary:hover { box-shadow: 0 16px 48px rgba(230, 51, 18, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); transform: translateY(-3px); } .btn-secondary { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.05); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); } .hero-stats { gap: 20px; } .hero-stat { padding: 20px 24px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex: 1; transition: all 0.4s var(--ease-out); } .hero-stat:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(230, 51, 18, 0.2); transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; } .scroll-indicator span { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245, 245, 240, 0.3); } .scroll-indicator-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(230, 51, 18, 0.6), transparent); animation: scroll-pulse 2s ease-in-out infinite; } @keyframes scroll-pulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.5); } 50% { opacity: 1; transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .hero-particle { animation: none !important; display: none; } .hero-badge { animation: fadeSlideUp 0.01ms both !important; } .scroll-indicator-line { animation: none !important; opacity: 0.5; } } /* ============================================ TRUSTED BY (Social Proof strip) ============================================ */ .trusted { padding: 48px 0; border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent) 1; overflow: hidden; } .trusted-label { text-align: center; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 24px; } .trusted-track { display: flex; animation: marquee 30s linear infinite; width: max-content; } .trusted-track-reverse { animation-direction: reverse; margin-top: 16px; } .trusted-logo { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--text-dim); opacity: 0.4; transition: all 0.3s; white-space: nowrap; padding: 0 32px; flex-shrink: 0; } .trusted-logo:hover { opacity: 1; color: var(--text); transform: scale(1.05); } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .trusted-track { animation: none !important; flex-wrap: wrap; justify-content: center; width: auto; } } /* ============================================ PRODUCTS ============================================ */ .products { padding: 120px 0; } .products-header { margin-bottom: 64px; } .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .product-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 20px; padding: 40px 32px; transition: all 0.5s var(--ease-out); position: relative; overflow: hidden; } .product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--secondary), var(--accent)); opacity: 0.3; transition: opacity 0.4s; } .product-card:hover { border-color: var(--border-accent); transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-accent), inset 0 0 60px rgba(230, 51, 18, 0.02); } .product-card:hover::before { opacity: 1; } .product-img-wrap { border-radius: 12px; overflow: hidden; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.1); } .product-img { width: 100%; height: 200px; /* Los originales son recortes sobre blanco con encuadres dispares: contain + fondo blanco uniforme evita cortes distintos por modelo */ object-fit: contain; background: #fff; padding: 10px; border-radius: 0; margin-bottom: 0; border: none; transition: transform 0.6s var(--ease-out); cursor: pointer; } .product-card:hover .product-img { transform: scale(1.05); } .product-card h3 { font-family: var(--font-hero); font-size: 1.8rem; font-weight: 400; letter-spacing: 0.05em; margin-bottom: 4px; text-transform: uppercase; } .product-card .product-tag { font-family: var(--font-mono); font-size: 0.75rem; color: var(--secondary); margin-bottom: 16px; display: inline-block; padding: 3px 10px; background: rgba(230, 51, 18, 0.08); border-radius: 100px; border: 1px solid rgba(230, 51, 18, 0.15); } .product-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 24px; } .product-specs { list-style: none; display: flex; flex-direction: column; gap: 10px; } .product-specs li { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 10px; } .product-specs li::before { content: ''; width: 6px; height: 6px; background: var(--secondary); border-radius: 50%; flex-shrink: 0; } .product-card.featured { grid-column: span 1; background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(230, 51, 18, 0.04) 100%); border-color: var(--border-accent); } /* ============================================ FEATURES / WHY EGARA ============================================ */ .features { padding: 120px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .features::before { content: ''; position: absolute; top: -20%; right: -10%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(230, 51, 18, 0.04) 0%, transparent 60%); pointer-events: none; } .features-header { text-align: center; margin-bottom: 80px; position: relative; } .features-header .section-desc { margin: 0 auto; } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: linear-gradient(135deg, rgba(230, 51, 18, 0.08), rgba(255, 255, 255, 0.08)); border-radius: 20px; overflow: hidden; border: 1px solid var(--border); position: relative; } .feature-cell { background: var(--background); padding: 48px 32px; transition: all 0.4s var(--ease-out); position: relative; } .feature-cell::before { content: ''; position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; background: var(--secondary); opacity: 0; border-radius: 0 3px 3px 0; transition: opacity 0.4s var(--ease-out); } .feature-cell:hover { background: var(--surface-elevated); } .feature-cell:hover::before { opacity: 1; } .feature-icon { width: 40px; height: 40px; color: var(--secondary); margin-bottom: 16px; opacity: 0.7; transition: opacity 0.4s; } .feature-icon svg { width: 100%; height: 100%; } .feature-cell:hover .feature-icon { opacity: 1; } .feature-number { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); margin-bottom: 20px; display: block; transition: color 0.4s; } .feature-cell:hover .feature-number { color: var(--secondary); } .feature-cell h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0; margin-bottom: 12px; text-transform: uppercase; } .feature-cell p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } /* ============================================ HERITAGE / ABOUT ============================================ */ .heritage { padding: 120px 0; } .heritage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .heritage-visual { position: relative; } .heritage-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 48px; position: relative; overflow: hidden; } .heritage-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(230, 51, 18, 0.03) 0%, transparent 50%); pointer-events: none; } .heritage-card-text { font-size: 1.1rem; color: var(--text-muted); line-height: 1.7; position: relative; z-index: 1; } .heritage-card-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; gap: 32px; position: relative; z-index: 1; } .heritage-card-stat { font-family: var(--font-hero); font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; } .heritage-card-stat-sub { font-size: 0.85rem; color: var(--text-dim); } .heritage-year { font-family: var(--font-hero); font-size: 9rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--surface-elevated); margin-bottom: 24px; position: relative; } .heritage-year span { position: relative; background: linear-gradient(180deg, var(--text-dim) 0%, var(--surface-hover) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .heritage-timeline { display: flex; flex-direction: column; gap: 24px; position: relative; } .heritage-timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: var(--border); } .timeline-item { display: flex; gap: 20px; align-items: flex-start; } .timeline-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); background: var(--background); flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .timeline-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); } .timeline-content strong { font-family: var(--font-display); font-size: 0.95rem; display: block; margin-bottom: 4px; } .timeline-content p { font-size: 0.85rem; color: var(--text-muted); } /* Heritage glassmorphism card */ .heritage-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Sequential timeline dots */ .timeline-dot { transition: all 0.6s var(--ease-out); } .timeline-dot.active { border-color: var(--secondary); box-shadow: 0 0 12px rgba(230, 51, 18, 0.3); } .timeline-dot.active::after { background: var(--secondary); box-shadow: 0 0 8px rgba(230, 51, 18, 0.4); } .heritage-year { transition: transform 0.1s linear; } /* ============================================ ELECTRIC SECTION ============================================ */ .electric { padding: 120px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .electric::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 80% 50%, rgba(34, 197, 94, 0.04) 0%, transparent 70%); pointer-events: none; } .electric-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; } .electric-label-green { color: var(--success); } .electric-label-green::before { background: var(--success); } .electric-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 100px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--success); margin-bottom: 24px; } .electric-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; } .electric-feat { padding: 24px; background: var(--background); border: 1px solid var(--border); border-radius: 12px; } .electric-feat h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 6px; } .electric-feat p { font-size: 0.85rem; color: var(--text-muted); } .electric-visual { display: flex; align-items: center; justify-content: center; } .electric-graphic { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; position: relative; padding: 24px; background: linear-gradient(180deg, rgba(34,197,94,0.06) 0%, rgba(34,197,94,0.02) 100%); border: 1px solid rgba(34, 197, 94, 0.18); border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,0.18), 0 0 80px rgba(34,197,94,0.05); } .electric-graphic img { width: 100% !important; border-radius: 12px !important; border: none !important; display: block; } .electric-label { font-family: var(--font-hero); font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; text-align: center; margin-top: 16px !important; } .electric-sublabel { font-size: 0.8rem; color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: 0.1em; } .electric-spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(34,197,94,0.18); } .electric-spec { text-align: center; } .electric-spec-value { font-family: var(--font-hero); font-size: 1.5rem; color: var(--success); line-height: 1; margin-bottom: 4px; } .electric-spec-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } /* Electric section enhancements */ .electric-pulse { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(34, 197, 94, 0.15); animation: electric-ring 3s ease-out infinite; } .electric-pulse:nth-child(2) { animation-delay: 1s; } .electric-pulse:nth-child(3) { animation-delay: 2s; } @keyframes electric-ring { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } } .electric-bolt { stroke-dasharray: 100; stroke-dashoffset: 100; animation: bolt-draw 1.5s ease-out forwards; } @keyframes bolt-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .electric-pulse { animation: none !important; opacity: 0.3; transform: scale(1.5); } .electric-bolt { animation: none !important; stroke-dashoffset: 0; } } /* ============================================ SHOP / TIENDA EN LA HOME Reutiliza features-grid/feature-cell; aquí solo lo específico de la sección. ============================================ */ .shop-home { background: var(--background); } a.feature-cell { text-decoration: none; color: inherit; display: block; } a.feature-cell:hover h3 { color: var(--secondary); } .shop-home-foot { text-align: center; margin-top: 56px; } .shop-home-foot .btn-primary { display: inline-flex; align-items: center; gap: 8px; } .shop-home-note { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.5px; margin-top: 18px; } [data-theme="light"] .shop-home { background: var(--background); } [data-theme="light"] .shop-home-note { color: var(--text-dim); } /* ============================================ PROCESS / HOW WE WORK ============================================ */ .process { padding: 120px 0; } .process-header { margin-bottom: 80px; } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; } .process-steps::before { content: ''; position: absolute; top: 40px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--border), var(--border), transparent); } .process-step { text-align: center; } .step-number { width: 80px; height: 80px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-family: var(--font-hero); font-size: 2rem; font-weight: 400; color: var(--secondary); position: relative; z-index: 1; transition: all 0.4s var(--ease-out); } .process-step:hover .step-number { border-color: var(--secondary); box-shadow: 0 0 30px var(--accent-glow); } .step-time { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--secondary); background: rgba(230,51,18,0.08); border: 1px solid rgba(230,51,18,0.2); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; letter-spacing: 0.04em; } [data-theme="light"] .step-time { background: rgba(198,40,16,0.08); border-color: rgba(198,40,16,0.2); color: #C62810; } .process-step h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.01em; } .process-step p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } /* --- Scroll stack del proceso (solo desktop >=1024px) --- El PINEADO lo hace `position: sticky` en CSS puro, NO ScrollTrigger.pin: así no hay pin-spacer inyectado a posteriori y el layout definitivo está reservado desde el primer paint => CLS 0 aunque GSAP entre tarde (lazy). GSAP solo añade el escalado progresivo encima. La clase `js-stack` la pone un inline script del (antes del primer paint): sin JS => rejilla de siempre; con JS pero sin GSAP => stack sin escala, perfectamente legible. */ @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { html.js-stack .process-steps { display: block; gap: 0; } html.js-stack .process-steps::before { display: none; } /* Colchón final: es la distancia que la pila aguanta pineada antes de soltarse. TIENE que ser una caja EN FLUJO, no padding del contenedor: el rectángulo que limita a un elemento sticky es la CAJA DE CONTENIDO del bloque contenedor (menos los márgenes del propio elemento), así que un padding-bottom no da ni un píxel de recorrido — verificado midiendo el clamp real en Firefox. Con ::after el contenido crece de verdad. */ html.js-stack .process-steps::after { content: ''; display: block; height: 180px; } html.js-stack .process-step { position: sticky; min-height: 200px; max-width: 860px; margin: 0 auto 70px; padding: 18px 44px 26px; /* Cabecera ANCLADA ARRIBA: el número y el título comparten la primera fila y son lo que queda legible en la franja de una tarjeta apilada. Se hace COLOCANDO los hijos que ya existen en áreas de grid: NO se toca el DOM, así que ninguna clave data-i18n se mueve ni se recrea. La columna "sp" deja el resto del texto indentado bajo el título. */ display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num title" "sp time" "sp desc"; column-gap: 18px; align-content: start; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32); transform-origin: center top; /* El sistema .reveal escribe transform/opacity sobre ESTE mismo nodo. En modo stack manda el stack: el JS le quita las clases .reveal y esto cubre la ventana previa a que GSAP cargue. */ opacity: 1; transform: none; transition: none; } html.js-stack .process-step:last-child { margin-bottom: 0; } /* Offset de 64px por tarjeta: es lo que mide la cabecera (18px de padding + 44px del círculo), así que la franja visible de una tarjeta apilada enseña el "1 + Consultoría" entero y no una barra vacía. */ html.js-stack .process-step:nth-child(1) { top: 20vh; } html.js-stack .process-step:nth-child(2) { top: calc(20vh + 64px); } html.js-stack .process-step:nth-child(3) { top: calc(20vh + 128px); } html.js-stack .process-step:nth-child(4) { top: calc(20vh + 192px); } html.js-stack .process-step .step-number { grid-area: num; width: 44px; height: 44px; margin: 0; font-size: 1.4rem; align-self: center; } html.js-stack .process-step h3 { grid-area: title; align-self: center; margin: 0; font-size: 1.2rem; /* Seguro anti-desbordes: si algún idioma trajera un título mucho más largo, la cabecera NO puede crecer a dos líneas y salirse de la franja apilada. Hoy el más largo es "Livraison et Support" y le sobra sitio de sobra, así que esto nunca llega a recortar. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.js-stack .process-step .step-time { grid-area: time; justify-self: start; margin: 14px 0 0; } html.js-stack .process-step p { grid-area: desc; margin: 8px 0 0; max-width: 64ch; } html.js-stack[data-theme="light"] .process-step { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10); } } /* ============================================ TESTIMONIALS ============================================ */ .testimonials { padding: 120px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .testimonials-header { text-align: center; margin-bottom: 64px; } .testimonials-header .section-label { justify-content: center; } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .testimonial-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 16px; padding: 36px; transition: all 0.4s var(--ease-out); position: relative; overflow: hidden; } .testimonial-card::before { content: '"'; position: absolute; top: -10px; right: 20px; font-family: var(--font-hero); font-size: 8rem; color: var(--secondary); opacity: 0.05; line-height: 1; pointer-events: none; } .testimonial-card:hover { border-color: var(--border-accent); transform: translateY(-4px) perspective(800px) rotateX(1deg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); } .testimonial-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--secondary), transparent); opacity: 0; transition: opacity 0.4s; } .testimonial-card:hover::after { opacity: 1; } .testimonial-stars { color: #FBBF24; font-size: 0.9rem; margin-bottom: 16px; letter-spacing: 2px; } .testimonial-card blockquote { font-size: 1rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 24px; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary), var(--accent)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: white; } .testimonial-name { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; } .testimonial-role { font-size: 0.8rem; color: var(--text-dim); } /* ============================================ INTERNATIONAL ============================================ */ .international { padding: 120px 0; } .international-header { text-align: center; margin-bottom: 64px; } .international-header .section-label { justify-content: center; } .international-header .section-desc { margin: 0 auto; } .international-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .intl-stat { text-align: center; padding: 48px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: all 0.4s var(--ease-out); } .intl-stat:hover { border-color: var(--border-accent); transform: translateY(-4px); } .intl-stat-icon { font-size: 2.5rem; margin-bottom: 16px; } .intl-stat-value { font-family: var(--font-hero); font-size: 2.8rem; font-weight: 400; letter-spacing: 0.02em; margin-bottom: 4px; } .intl-stat-label { font-size: 0.9rem; color: var(--text-muted); } /* ============================================ CTA ============================================ */ .cta { padding: 120px 0; background: var(--surface); border-top: 1px solid var(--border); } .cta-inner { text-align: center; max-width: 880px; margin: 0 auto; } .cta-inner .section-label { justify-content: center; } .cta-inner .section-title { font-size: clamp(2.5rem, 5vw, 4rem); } .cta-inner .section-desc { margin: 0 auto 48px; } .form-why { max-width: 560px; margin: -28px auto 40px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--secondary); border-radius: 10px; font-size: 0.88rem; line-height: 1.55; color: var(--text-muted); text-align: left; } .cta-info { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; } .cta-info-item { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: var(--text-muted); } .cta-info-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } /* Form section mesh gradient */ .cta { position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; bottom: -20%; right: -10%; width: 50%; height: 50%; background: radial-gradient(circle, rgba(230, 51, 18, 0.04) 0%, transparent 60%); pointer-events: none; } .cta::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 20%, transparent 70%); pointer-events: none; } .cta-inner { position: relative; z-index: 1; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(230, 51, 18, 0.1); outline: none; } .form-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .form-nav .btn-primary { background: linear-gradient(90deg, var(--cta) 0%, var(--cta-hover) 50%, var(--cta) 100%); background-size: 200% auto; } .form-nav .btn-primary:hover { animation: shimmer 2s linear infinite; } .model-option { transition: all 0.3s var(--ease-out); } .model-option:hover { border-color: rgba(230, 51, 18, 0.3); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .model-option.selected { box-shadow: 0 0 0 2px var(--secondary), 0 4px 16px rgba(230, 51, 18, 0.15); } /* ============================================ PRODUCT COMPARATOR ============================================ */ .compare-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 18px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--text); cursor: pointer; background: var(--surface-hover); transition: all 0.25s; font-family: var(--font-body); min-height: 40px; letter-spacing: 0.01em; } .compare-toggle::before { content: ''; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='m16 21 4-4-4-4'/%3E%3Cpath d='M20 17H4'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; transition: all 0.2s; } .compare-toggle:hover { border-color: var(--secondary); color: var(--secondary); background: rgba(230,51,18,0.06); transform: translateY(-1px); } .compare-toggle:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E63312' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='m16 21 4-4-4-4'/%3E%3Cpath d='M20 17H4'/%3E%3C/svg%3E"); } .compare-toggle.active { border-color: var(--cta); color: white; background: var(--cta); box-shadow: 0 4px 12px rgba(230,51,18,0.25); } .compare-toggle.active::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } .compare-toggle-check { display: none; } /* Comparator panel */ .comparator { margin-top: 48px; display: none; animation: fadeSlideUp 0.5s var(--ease-out); } .comparator.visible { display: block; } .comparator-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .comparator-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; } .comparator-close { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); background: none; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; font-family: var(--font-body); } .comparator-close:hover { color: var(--text); border-color: var(--text-dim); } .comparator-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-strong, var(--border)); border-radius: 12px; overflow: hidden; } .comparator-table th, .comparator-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border-strong, var(--border)); font-size: 0.9rem; } .comparator-table th { background: var(--surface-hover); font-family: var(--font-hero); font-weight: 400; font-size: 1.1rem; letter-spacing: 0.03em; color: var(--text); vertical-align: bottom; } /* Alineada a la izquierda, como el nombre del modelo que va debajo: centrada quedaba desacoplada del texto, y en movil la columna es mas ancha que la pantalla, asi que la foto centrada se salia del area visible. */ .comparator-table th .comp-model-icon { display: flex; justify-content: flex-start; margin-bottom: 6px; color: var(--secondary); } .comparator-table th .comp-model-icon picture { display: block; width: 72px; aspect-ratio: 5 / 3; border-radius: 8px; overflow: hidden; } .comparator-table th .comp-model-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 600px) { .comparator-table th .comp-model-icon picture { width: 56px; } } .comparator-table td:first-child { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; background: var(--surface); white-space: nowrap; width: 180px; } .comparator-table tr:last-child td, .comparator-table tr:last-child th { border-bottom: none; } .comparator-table .val-yes { color: var(--success); font-weight: 700; } .comparator-table .val-no { color: var(--text-dim); opacity: 0.6; } /* ============================================ TOAST NOTIFICATIONS ============================================ */ .toast-container { position: fixed; top: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 12px; pointer-events: none; } .toast { pointer-events: auto; max-width: 420px; min-width: 300px; padding: 18px 48px 18px 20px; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; font-weight: 500; box-shadow: 0 12px 40px rgba(0,0,0,0.5); display: flex; align-items: flex-start; gap: 12px; animation: toastIn 0.4s var(--ease-out) forwards; position: relative; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .toast.toast-out { animation: toastOut 0.3s var(--ease-out) forwards; } .toast-error { background: rgba(220, 38, 38, 0.15); border: 1px solid rgba(220, 38, 38, 0.3); color: #FCA5A5; } .toast-warning { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); color: #FDE68A; } .toast-success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: #86EFAC; } .toast-info { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); color: #93C5FD; } .toast-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; } .toast-body { flex: 1; } .toast-title { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; } .toast-msg { font-size: 0.85rem; opacity: 0.9; } .toast-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: inherit; opacity: 0.5; cursor: pointer; font-size: 1.1rem; padding: 4px; line-height: 1; transition: opacity 0.2s; } .toast-close:hover { opacity: 1; } .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 12px 12px; animation: toastProgress linear forwards; } .toast-error .toast-progress { background: rgba(220, 38, 38, 0.5); } .toast-warning .toast-progress { background: rgba(245, 158, 11, 0.5); } .toast-success .toast-progress { background: rgba(34, 197, 94, 0.5); } .toast-info .toast-progress { background: rgba(59, 130, 246, 0.5); } @keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(40px) scale(0.95); } } @keyframes toastProgress { from { width: 100%; } to { width: 0%; } } /* ============================================ QUOTE FORM ============================================ */ /* --- Stepper de progreso (numerado, conector animado, clicable atrás) --- */ .form-stepper { display: flex; align-items: flex-start; justify-content: center; /* Compacto a propósito: el stepper viejo (3 puntitos de 10px) ocupaba 50px con su margen. Este ocupa ~52px, así que el formulario de selección de karts se queda prácticamente donde estaba antes. */ margin-bottom: 30px; } .form-stepper-step { flex: 0 0 auto; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .form-stepper-btn { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-elevated); border: 2px solid var(--text-dim); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; line-height: 1; padding: 0; cursor: default; transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .form-stepper-btn:not(:disabled) { cursor: pointer; } .form-stepper-btn:not(:disabled):hover { border-color: var(--accent); } .form-stepper-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .form-stepper-num, .form-stepper-check { display: block; } .form-stepper-check { display: none; } .form-stepper-step.active .form-stepper-btn { background: var(--secondary); border-color: var(--secondary); color: var(--primary); transform: scale(1.08); box-shadow: 0 0 12px rgba(230, 51, 18, 0.4); } .form-stepper-step.done .form-stepper-btn { background: var(--success); border-color: var(--success); color: var(--primary); } .form-stepper-step.done .form-stepper-num { display: none; } .form-stepper-step.done .form-stepper-check { display: block; } .form-stepper-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-align: center; line-height: 1.25; transition: color 0.3s var(--ease-out); } .form-stepper-step.active .form-stepper-label { color: var(--text); } /* Conector: se rellena de izquierda a derecha al completar el paso */ .form-stepper-conn { flex: 1 1 auto; max-width: 72px; min-width: 20px; height: 3px; margin-top: 15px; border-radius: 2px; background: var(--surface-hover); overflow: hidden; } .form-stepper-conn-fill { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--success); transition: width 0.5s var(--ease-out); } .form-stepper-conn.filled .form-stepper-conn-fill { width: 100%; } /* Texto solo para lectores de pantalla ("Paso 2 de 3: Tu Circuito") */ .form-stepper-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Móvil: solo la etiqueta del paso activo, centrada bajo la fila */ @media (max-width: 639px) { .form-stepper { position: relative; padding-bottom: 24px; } .form-stepper-step { width: 58px; } .form-stepper-conn { max-width: 64px; } .form-stepper-label { display: none; } .form-stepper-step.active .form-stepper-label { display: block; position: absolute; left: 0; right: 0; bottom: 0; } } /* --- Transición deslizante entre pasos --- */ .form-steps { position: relative; overflow-x: clip; } .form-step { display: none; } .form-step.active { display: block; /* SIN animation-fill-mode: con `both` el último fotograma (transform:none) se queda aplicado y el transform COMPUTADO pasa a ser matrix(1,0,0,1,0,0), que no es `none`. Cualquier transform distinto de `none` convierte al elemento en bloque contenedor de sus descendientes position:fixed, y el #fleetBar (barra de flota móvil, fixed abajo) se descolgaba al final del #step1 en vez de quedarse pegado al viewport. */ animation: formStepEnter 0.42s var(--ease-out); } .form-steps[data-dir="back"] .form-step.active { animation-name: formStepEnterBack; } .form-step.is-exiting { display: block; position: absolute; top: 0; left: 0; right: 0; pointer-events: none; animation: formStepExit 0.3s var(--ease-out) both; } .form-steps[data-dir="back"] .form-step.is-exiting { animation-name: formStepExitBack; } /* La barra fija de flota vive dentro de #step1: durante la animación su bloque contenedor pasa a ser el paso (transform) y se descolocaría. La ocultamos. */ .form-steps.is-animating .fleet-bar { display: none; } @keyframes formStepEnter { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } } @keyframes formStepEnterBack { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: none; } } @keyframes formStepExit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-50%); } } @keyframes formStepExitBack { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(50%); } } @media (prefers-reduced-motion: reduce) { .form-step.active, .form-step.is-exiting { animation: none !important; } .form-step.is-exiting { display: none !important; } .form-stepper-conn-fill, .form-stepper-btn { transition: none !important; } } .form-card { background: var(--background); border: 1px solid var(--border); border-radius: 16px; padding: 40px; text-align: left; margin-bottom: 32px; } .form-step-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.01em; } .form-step-sub { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 32px; text-align: center; } /* Model selector cards */ .model-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } .model-option { position: relative; background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: 10px 10px 14px; cursor: pointer; transition: all 0.3s var(--ease-out); text-align: center; display: flex; flex-direction: column; } .model-option:hover { border-color: var(--text-dim); } .model-option.selected { border-color: var(--secondary); background: rgba(230,51,18,0.05); } .model-option:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; } .model-option-photo { position: relative; border-radius: 8px; overflow: hidden; background: var(--background); margin-bottom: 10px; aspect-ratio: 5 / 3; } .model-option-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease-out); } .model-option:hover .model-option-photo img { transform: scale(1.04); } .model-option-check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--secondary); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: all 0.2s var(--ease-out); } .model-option-check::after { content: ''; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translateY(-1px); } .model-option.selected .model-option-check { opacity: 1; transform: scale(1); } .model-option-name { font-family: var(--font-hero); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.05em; margin-bottom: 2px; } .model-option-tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); } .model-option-cta { margin-top: 10px; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-muted); transition: all 0.2s; } .model-option:hover .model-option-cta { border-color: var(--text-dim); color: var(--text); } .model-option .moc-on { display: none; } .model-option.selected .model-option-cta { background: var(--cta); border-color: var(--cta); color: #fff; } .model-option.selected .moc-idle { display: none; } .model-option.selected .moc-on { display: inline; } /* Botón "+ Añadir también eléctrico" (solo modelos con versión eléctrica) */ .model-electric-add { margin-top: 8px; width: 100%; font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 7px 6px; border-radius: 6px; border: 1px dashed var(--border); background: none; color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .model-electric-add:hover { border-color: var(--success); color: var(--success); } .model-electric-add.added { border-style: solid; border-color: rgba(34,197,94,0.4); color: var(--success); cursor: default; } /* Panel "Tu flota" (constructor de flota) */ .fleet-panel { margin-top: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-elevated); overflow: hidden; } .fleet-panel-head { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--secondary); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .fleet-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); } .fleet-row:last-child { border-bottom: none; } .fleet-row-name { flex: 1; min-width: 0; font-family: var(--font-hero); font-size: 1.05rem; letter-spacing: 0.04em; } .fleet-row-eng { font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 4px; margin-left: 6px; white-space: nowrap; } .fleet-row-eng.combustion { background: rgba(154,154,149,0.16); color: var(--text-muted); } .fleet-row-eng.electric { background: rgba(34,197,94,0.16); color: var(--success); } .fleet-row .qty-stepper { display: inline-flex; align-items: center; gap: 0; grid-template-columns: none; margin: 0; } .fleet-qty button { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .fleet-qty button:first-child { border-radius: 6px 0 0 6px; } .fleet-qty button:last-child { border-radius: 0 6px 6px 0; } .fleet-qty-val { min-width: 36px; text-align: center; font-family: var(--font-mono); font-size: 0.85rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 0; } .fleet-row-remove { width: 30px; height: 30px; border: none; background: none; color: var(--text-dim); font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 6px; transition: all 0.2s; } .fleet-row-remove:hover { color: var(--secondary); background: rgba(230,51,18,0.08); } /* Barra fija de flota — solo en móvil */ .fleet-bar { display: none; } @media (max-width: 768px) { .fleet-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; background: var(--surface-elevated); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(0,0,0,0.3); } .fleet-bar[hidden] { display: none; } } .fleet-bar-text { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); } .fleet-bar-btn { background: var(--cta); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; } /* Custom karts from configurator */ .custom-kart-card { display:flex; gap:14px; padding:14px; background:var(--surface-elevated); border:1.5px solid var(--secondary); border-radius:12px; margin-bottom:12px; align-items:center; position:relative; } .custom-kart-img { width:80px; height:60px; object-fit:cover; border-radius:8px; background:var(--background); flex-shrink:0; } .custom-kart-info { flex:1; min-width:0; } .custom-kart-title { font-family:var(--font-hero); font-size:1rem; letter-spacing:1px; margin-bottom:2px; } .custom-kart-specs { font-family:var(--font-mono); font-size:0.65rem; color:var(--text-muted); line-height:1.6; } .custom-kart-badge { font-family:var(--font-mono); font-size:0.55rem; background:rgba(230,51,18,0.12); color:var(--secondary); padding:3px 8px; border-radius:4px; white-space:nowrap; } .custom-kart-qty { display:flex; align-items:center; gap:6px; } .custom-kart-qty button { width:28px; height:28px; border-radius:6px; border:1px solid var(--border); background:none; color:var(--text); cursor:pointer; font-size:0.9rem; display:flex; align-items:center; justify-content:center; } .custom-kart-qty input { width:40px; text-align:center; border:1px solid var(--border); background:var(--background); color:var(--text); border-radius:6px; padding:4px; font-family:var(--font-mono); font-size:0.8rem; } .custom-kart-remove { position:absolute; top:8px; right:10px; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:1.1rem; line-height:1; } .custom-kart-remove:hover { color:var(--secondary); } .custom-karts-header { font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--secondary); margin:16px 0 8px; } /* Quantity + engine config (appears when model selected) */ .model-config { display: none; gap: 16px; padding: 20px; background: var(--surface-elevated); border: 1px solid var(--border-strong, var(--border)); border-radius: 12px; margin-bottom: 16px; align-items: center; } .model-config.visible { display: grid; grid-template-columns: 1fr auto auto; } .model-config-label { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; } .model-config-label small { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; color: var(--secondary); } /* Form inputs */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .form-row.full { grid-template-columns: 1fr; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; } .form-group input, .form-group select, .form-group textarea { background: var(--background); border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; padding: 12px 16px; color: var(--text); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.3s; min-height: 48px; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--secondary); outline-offset: -2px; border-color: var(--secondary); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-dim); } .form-group textarea { resize: vertical; min-height: 80px; } /* Extras / variants selector */ .extras-section { margin-top: 8px; } .extras-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px dashed var(--border-strong); border-radius: 8px; background: none; color: var(--secondary); cursor: pointer; font-size: 0.8rem; font-weight: 600; font-family: var(--font-body); transition: all 0.3s; margin-bottom: 12px; } .extras-add-btn:hover { border-color: var(--secondary); background: rgba(230,51,18,0.04); } .extras-dropdown { display: none; background: var(--surface-elevated); border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px; margin-bottom: 12px; max-height: 250px; overflow-y: auto; } .extras-dropdown.visible { display: block; } .extras-dropdown-cat { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--secondary); padding: 8px 8px 4px; margin-top: 4px; } .extras-dropdown-cat:first-child { margin-top: 0; } .extras-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background 0.2s; font-size: 0.85rem; } .extras-opt:hover { background: var(--surface-hover); } .extras-opt.added { opacity: 0.4; pointer-events: none; } .extras-opt-icon { color: var(--text-dim); flex-shrink: 0; } .extras-opt-name { flex: 1; } .extras-opt-add { color: var(--secondary); font-weight: 700; font-size: 0.9rem; } .extras-selected { display: flex; flex-direction: column; gap: 6px; } .extras-tag { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 8px; font-size: 0.8rem; } .extras-tag-name { font-weight: 500; } .extras-tag-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; padding: 0 4px; transition: color 0.2s; } .extras-tag-remove:hover { color: var(--secondary); } /* Inline field errors */ .field-error { font-size: 0.78rem; color: #EF4444; margin-top: 4px; font-weight: 500; display: none; align-items: center; gap: 4px; } .field-error.visible { display: flex; } .field-error::before { content: '!'; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; background: #DC2626; color: white; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: #EF4444; } .form-group.has-error label { color: #EF4444; } /* Model selector error */ .model-error { text-align: center; font-size: 0.85rem; color: #EF4444; font-weight: 500; display: none; margin-top: 12px; } .model-error.visible { display: block; } .form-group select { cursor: pointer; } .form-group select option { background: var(--surface); color: var(--text); } /* Qty stepper */ .qty-stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; overflow: hidden; } .qty-stepper button { width: 44px; height: 44px; background: var(--surface); color: var(--text); font-size: 1.2rem; font-weight: 600; border: none; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; } .qty-stepper button:hover { background: var(--surface-hover); } .qty-stepper input { width: 48px; text-align: center; border: none; background: var(--surface-elevated); color: var(--text); font-family: var(--font-display); font-size: 1rem; font-weight: 700; height: 44px; padding: 0; -moz-appearance: textfield; } .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; } /* Engine toggle */ .engine-toggle { display: flex; border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; overflow: hidden; } .engine-toggle button { padding: 10px 16px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); background: var(--surface); border: none; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .engine-toggle button.active { background: var(--cta); color: white; } /* Radio group inline */ .radio-group { display: flex; gap: 12px; flex-wrap: wrap; } .radio-pill { padding: 10px 18px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; background: var(--surface); color: var(--text-muted); min-height: 44px; display: flex; align-items: center; } .radio-pill:hover { border-color: var(--text-dim); } .radio-pill.active, .radio-pill:has(input:checked) { border-color: var(--secondary); color: var(--text); background: rgba(230,51,18,0.05); } /* Radio nativo oculto visualmente pero operable por teclado/lector */ .radio-pill input[type="radio"] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .radio-pill:focus-within { outline: 2px solid var(--secondary); outline-offset: 2px; } /* Fieldset/legend del grupo de pills, sin estilos por defecto del navegador */ .pill-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .pill-legend { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 0; margin-bottom: 6px; } /* Form nav */ .form-nav { display: flex; justify-content: space-between; gap: 16px; } .form-nav .btn-back { padding: 14px 28px; border-radius: 12px; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); background: var(--surface-elevated); border: 1px solid var(--border); cursor: pointer; transition: all 0.3s; min-height: 52px; } .form-nav .btn-back:hover { color: var(--text); border-color: var(--text-dim); } /* Success state */ .form-success { display: none; text-align: center; padding: 60px 20px; } .form-success.visible { display: block; } .form-success-icon { font-size: 4rem; margin-bottom: 20px; } .form-success h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; margin-bottom: 12px; } .form-success p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; } /* ============================================ FOOTER ============================================ */ .footer { padding: 64px 0 32px; border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .footer-brand { max-width: 320px; } .footer-logo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .footer-brand p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; } .footer-social { display: flex; gap: 12px; } .footer-social a { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease-out); font-size: 1.1rem; } .footer-social a:hover { border-color: var(--secondary); background: rgba(230, 51, 18, 0.1); } .footer-col h4 { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; color: var(--text); } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer-col a { font-size: 0.9rem; color: var(--text-muted); transition: color 0.3s; } .footer-col a:hover { color: var(--secondary); } .footer-bottom { padding-top: 32px; border-top: 1px solid var(--border-strong, var(--border)); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-bottom p { font-size: 0.8rem; color: var(--text-dim); } .footer-lang { display: flex; gap: 16px; } .footer-lang button { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; transition: all 0.3s; background: none; cursor: pointer; } .footer-lang button:hover, .footer-lang button.active { color: var(--text); border-color: var(--secondary); } /* ============================================ WHATSAPP FLOATING BUTTON ============================================ */ .whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 900; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: all 0.3s var(--ease-out); text-decoration: none; } .whatsapp-float:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5); } .whatsapp-float svg { width: 32px; height: 32px; fill: white; } /* Pulse on load */ .whatsapp-float { animation: waPulse 2s ease-in-out 2s 3; } @keyframes waPulse { 0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); } 50% { box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 0 0 12px rgba(37,211,102,0.1); } } /* ============================================ STICKY MOBILE CTA BAR ============================================ */ .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); padding: 12px 20px; display: none; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(100%); transition: transform 0.4s var(--ease-out); } .sticky-cta.visible { transform: translateY(0); } .sticky-cta-phone { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .sticky-cta .btn-primary { padding: 12px 20px; font-size: 0.85rem; min-height: 48px; white-space: nowrap; } /* Product card quote button */ .product-quote-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; padding: 10px 20px; background: var(--cta); color: white; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s var(--ease-out); font-family: var(--font-body); min-height: 44px; } .product-quote-btn:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 6px 16px var(--accent-glow); } .product-detail-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; margin-right: 8px; padding: 8px 16px; background: var(--surface-elevated); color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; font-size: 0.8rem; font-weight: 500; text-decoration: none; transition: all 0.3s; font-family: var(--font-body); } .product-detail-link:hover { border-color: var(--secondary); color: var(--text); text-decoration: none; } /* ============================================ RESPONSIVE ============================================ */ /* ============================================ TABLET LANDSCAPE (max 1024px) ============================================ */ @media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(2, 1fr); } .product-card.featured { grid-column: span 2; } .features-grid { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: repeat(2, 1fr); gap: 48px; } .process-steps::before { display: none; } .testimonials-grid { grid-template-columns: repeat(2, 1fr); } .international-stats { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 2fr 1fr 1fr; } .heritage-grid { gap: 48px; } .electric-inner { gap: 48px; } .section-title { font-size: clamp(1.8rem, 4vw, 3rem); } .hero-stats { gap: 16px; flex-wrap: wrap; } .hero-stat { min-width: calc(50% - 8px); padding: 16px 20px; } .scroll-indicator { bottom: 24px; } } /* ============================================ TABLET / MOBILE (max 1024px) ============================================ */ @media (max-width: 1280px) { /* Navigation — hamburger menu */ .nav-links { display: none; } .nav-links.active { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(13, 13, 13, 0.97); -webkit-backdrop-filter:blur(20px);backdrop-filter: blur(20px); padding: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); gap: 16px; } .nav-links.active a { font-size: 1rem; } .nav-links.active .nav-cta { display: inline-block; text-align: center; margin-top: 8px; } .nav-toggle { display: flex !important; flex-shrink: 0; } .nav-logo-text { display: none; } .nav-logo img { height: 24px; } .theme-toggle { flex-shrink: 0; } /* Sections - reduce padding */ .products, .features, .heritage, .electric, .process, .testimonials, .international, .cta, .faq { padding: 80px 0; } .hero { padding-top: 72px; min-height: auto; padding-bottom: 60px; } /* Hero */ .hero h1 { font-size: clamp(2.2rem, 9vw, 3.5rem); } .hero-desc { font-size: 1.05rem; } .hero-stats { flex-wrap: wrap; gap: 10px; margin-top: 56px; padding: 20px 16px; background: rgba(10,10,10,0.55); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-stat { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 12px 10px; text-align: center; } .hero-stat-value { font-size: 1.8rem; } .hero-stat-label { font-size: 0.75rem; } [data-theme="light"] .hero-stats { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.08); } .scroll-indicator { display: none; } .hero-bottom-fade { height: 80px; } .hero-actions { flex-direction: column; } .hero-actions .btn-primary, .hero-actions .btn-secondary { width: 100%; justify-content: center; } /* Products — carousel horizontal con scroll-snap (reduce scroll 9× cards) */ .products-grid { display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 16px 20px; margin: 0 -16px; scroll-padding: 0 16px; } .products-grid::-webkit-scrollbar { display: none; } .product-card { flex: 0 0 84%; min-width: 84%; max-width: 84%; scroll-snap-align: start; padding: 28px 24px; } .product-card.featured { grid-column: auto; } /* Hint visual: pista pequeña debajo del carousel para indicar swipe */ .products-grid + .products-swipe-hint { text-align: center; font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px; opacity: 0.7; } /* Features */ .features-grid { grid-template-columns: 1fr; } .feature-cell { padding: 32px 24px; } /* Heritage */ .heritage-grid { grid-template-columns: 1fr; gap: 40px; } .heritage-card { padding: 32px 24px; } .heritage-year { font-size: 5rem; } .heritage-card-footer { flex-direction: column; gap: 20px; } /* Electric */ .electric-inner { grid-template-columns: 1fr; gap: 40px; } .electric-features { grid-template-columns: 1fr; } .electric-graphic { max-width: 280px; } /* Process */ .process-steps { grid-template-columns: 1fr; gap: 32px; } /* Testimonials */ .testimonials-grid { grid-template-columns: 1fr; } .testimonial-card { padding: 28px 24px; } /* International */ .international-stats { grid-template-columns: 1fr 1fr; gap: 16px; } .intl-stat { padding: 32px 16px; } /* CTA / Form */ .cta-info { flex-direction: column; align-items: center; gap: 24px; } .cta-info-item { text-align: center; flex-direction: column; } .form-card { padding: 28px 20px; } .form-row { grid-template-columns: 1fr; } .form-nav { flex-direction: column-reverse; gap: 12px; } .form-nav .btn-primary, .form-nav .btn-back { width: 100%; justify-content: center; text-align: center; } .model-selector { grid-template-columns: 1fr; } .model-config.visible { grid-template-columns: 1fr; gap: 12px; } /* Comparator */ .comparator-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .comparator-table th, .comparator-table td { padding: 10px 14px; white-space: nowrap; } .comparator-bar { flex-direction: column; gap: 12px; align-items: flex-start; } /* Footer */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: span 2; } .footer-bottom { flex-direction: column; text-align: center; gap: 12px; } .footer-lang { justify-content: center; } /* Sticky CTA + WhatsApp */ .sticky-cta { display: flex; } .whatsapp-float { bottom: 80px; right: 16px; width: 52px; height: 52px; } .whatsapp-float svg { width: 28px; height: 28px; } /* New visual elements — mobile */ .feature-icon { width: 32px; height: 32px; margin-bottom: 12px; } .feature-cell::before { top: auto; bottom: auto; left: 0; width: 3px; top: 12px; bottom: 12px; } .electric-pulse { width: 150px; height: 150px; } .testimonial-card::before { font-size: 5rem; top: -5px; right: 12px; } .trusted { padding: 32px 0; } .trusted-logo { font-size: 0.9rem; padding: 0 20px; } .trusted-track { animation-duration: 20s; } .hero-particles { opacity: 0.6; } /* Toast */ .toast-container { top: auto; bottom: 80px; right: 12px; left: 12px; } .toast { max-width: 100%; min-width: unset; } /* Comparator */ .comparator-table td:first-child { width: 120px; min-width: 120px; } /* FAQ, filters, cookie, back-to-top */ .back-to-top { bottom: 80px; left: 16px; width: 44px; height: 44px; } .product-filters { gap: 6px; } .filter-btn { padding: 8px 14px; font-size: 0.7rem; } .faq-question { padding: 16px 20px; font-size: 0.9rem; } } /* ============================================ MOBILE SMALL (max 480px) ============================================ */ @media (max-width: 480px) { .container { padding: 0 16px; } /* Sections - reduce padding more */ .products, .features, .heritage, .electric, .process, .testimonials, .international, .cta, .faq { padding: 60px 0; } /* Nav */ .nav-logo { font-size: 1.2rem; } .nav-logo-text { font-size: 1rem; } /* Hero */ .hero h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); margin-bottom: 20px; } .hero-desc { font-size: 0.95rem; margin-bottom: 32px; } .hero-badge { font-size: 0.7rem; padding: 6px 12px; } .btn-primary, .btn-secondary { padding: 14px 24px; font-size: 0.9rem; min-height: 50px; } /* Section titles */ .section-title { font-size: clamp(1.5rem, 6vw, 2.2rem); } .section-desc { font-size: 1rem; } /* Products */ .product-card { padding: 24px 20px; } .product-card h3 { font-size: 1.3rem; } .product-quote-btn { width: 100%; justify-content: center; } .compare-toggle { width: 100%; justify-content: center; } /* Features */ .feature-cell { padding: 24px 20px; } .features-header { margin-bottom: 48px; } /* Heritage */ .heritage-year { font-size: 4rem; } .heritage-card { padding: 24px 20px; } .heritage-card-stat { font-size: 1.2rem; } /* Electric */ .electric-feat { padding: 16px; } .electric-graphic { max-width: 220px; } .electric-pulse { width: 120px; height: 120px; } /* New visual elements — small mobile */ .hero-stat { flex: 1 1 100%; padding: 14px 16px; } .hero-stat-value { font-size: 1.8rem; } .hero-particles { opacity: 0.4; } .feature-icon { width: 28px; height: 28px; } .testimonial-card::before { font-size: 4rem; } .trusted-track { animation-duration: 15s; } .trusted-label { font-size: 0.65rem; margin-bottom: 16px; } .product-card .product-tag { font-size: 0.65rem; padding: 2px 8px; } /* Process */ .step-number { width: 64px; height: 64px; font-size: 1.2rem; } /* International */ .international-stats { grid-template-columns: 1fr; } .intl-stat { padding: 28px 16px; } .intl-stat-value { font-size: 2rem; } .intl-stat-icon { font-size: 2rem; } /* Form */ .form-card { padding: 20px 16px; } .form-step-title { font-size: 1.1rem; } .model-option { padding: 16px 12px; } .model-option-name { font-size: 1rem; } .radio-pill { padding: 8px 14px; font-size: 0.8rem; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-brand { grid-column: span 1; } .footer-col h4 { margin-bottom: 12px; } .footer-col ul { gap: 8px; } /* Testimonials */ .testimonial-card { padding: 24px 20px; } .testimonial-card blockquote { font-size: 0.9rem; } /* Toast on small mobile */ .toast { min-width: unset; padding: 14px 40px 14px 16px; font-size: 0.85rem; } } /* Intro opening: splash de marca (~2s, solo primera visita de la sesión). Logo entrando en dos mitades + línea roja de velocidad; funde a la web. */ #introOverlay { position: fixed; inset: 0; z-index: 10000; background: #0C0C0E; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.65s ease; } #introOverlay.intro-out { opacity: 0; pointer-events: none; } #introBrand { position: relative; display: flex; font-family: var(--font-hero); font-size: clamp(3.5rem, 13vw, 10rem); letter-spacing: 0.05em; line-height: 1; } #introBrand .brand-l { color: var(--text); animation: introSlideL 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } #introBrand .brand-r { color: var(--secondary); animation: introSlideR 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; } #introBrand .brand-line { position: absolute; left: 0; right: 0; bottom: -0.14em; height: 0.05em; background: linear-gradient(90deg, var(--secondary), var(--accent)); border-radius: 999px; transform: scaleX(0); transform-origin: left; animation: introLine 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.75s forwards; box-shadow: 0 0 28px rgba(230, 51, 18, 0.55); } @keyframes introSlideL { from { opacity: 0; transform: translateX(-0.35em); } to { opacity: 1; transform: translateX(0); } } @keyframes introSlideR { from { opacity: 0; transform: translateX(0.35em); } to { opacity: 1; transform: translateX(0); } } @keyframes introLine { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { #introOverlay { display: none; } } /* >>> menu.css: inicio (panel) — lo extrae scripts/build-shared-assets.py */ /* ============================================ STAGGERED MENU — menú móvil/tablet (< 1281px) Panel lateral con 2 prelayers escalonados. Sustituye al panel .nav-links.active; el nav de escritorio (>=1281px) NO se toca. El markup lo genera assets/staggered-menu.js. IMPORTANTE: los estilos por defecto de items/números son el estado FINAL (visible). GSAP fija el estado inicial con gsap.set(); así, si GSAP no ha cargado todavía, el menú abre igual (fallback CSS). ============================================ */ .sm-root { position: fixed; inset: 0; z-index: 900; visibility: hidden; pointer-events: none; } .sm-root.is-open { visibility: visible; pointer-events: auto; } @media (min-width: 1281px) { .sm-root { display: none !important; } } .sm-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.4s var(--ease-out); } .sm-root.is-open .sm-scrim { opacity: 1; } .sm-wrap { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 400px); } .sm-prelayer, .sm-panel { position: absolute; inset: 0; transform: translateX(100%); will-change: transform; } /* Colores fijos a propósito en este bloque (prelayers, fondo del panel, texto de labels/números/idiomas, botón de tema): NO se tokenizan a var(--secondary/--primary/--accent/--text/--text-muted) porque esos tokens CAMBIAN en [data-theme="light"] (ver :root vs [data-theme="light"] arriba) y el panel debe seguir oscuro con texto/acento claros siempre, o pierde legibilidad al alternar tema (el accent en claro sobre este fondo mide 3.86:1, por debajo de AA). Mismos valores que antes de investigar la tokenización: el panel es una superficie de marca fija, no sigue el tema claro/oscuro. */ .sm-prelayer-1 { background: #E63312; z-index: 1; } .sm-prelayer-2 { background: #0C0C0E; z-index: 2; } .sm-panel { z-index: 3; background: #0C0C0E; border-left: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 96px 26px 28px; overflow-y: auto; overscroll-behavior: contain; } /* Fallback sin GSAP: transiciones CSS con el mismo escalonado */ .sm-root:not(.sm-gsap) .sm-prelayer, .sm-root:not(.sm-gsap) .sm-panel { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .sm-root:not(.sm-gsap) .sm-prelayer-2 { transition-delay: 0.07s; } .sm-root:not(.sm-gsap) .sm-panel { transition-delay: 0.14s; } .sm-root:not(.sm-gsap).is-open .sm-prelayer, .sm-root:not(.sm-gsap).is-open .sm-panel { transform: translateX(0); } .sm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sm-link { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; text-decoration: none; color: var(--text); } .sm-label-wrap { display: block; overflow: hidden; } .sm-label { display: block; font-family: var(--font-hero); font-size: clamp(1.75rem, 7.5vw, 2.4rem); line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; color: #F5F5F0; transition: color 0.3s var(--ease-out); } .sm-link:hover .sm-label, .sm-link:focus-visible .sm-label { color: #FF4D2A; } .sm-num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: #FF4D2A; flex-shrink: 0; } .sm-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .sm-langs { display: flex; gap: 6px; flex-wrap: wrap; } .sm-lang { background: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: #9A9A95; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; padding: 8px 9px; min-height: 36px; cursor: pointer; transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out); } .sm-lang:hover { color: #F5F5F0; } .sm-lang.active { color: #FF4D2A; border-color: rgba(255, 77, 42, 0.5); } .sm-theme { background: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: #F5F5F0; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; } .sm-theme:hover { color: #FF4D2A; } /* Icono hamburguesa: rotación a 225º del original (solo <1281px, donde se ve) */ .nav-toggle { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .nav-toggle.sm-active { transform: rotate(225deg); } /* Bloqueo de scroll sin salto: --sm-sbw lo calcula el JS */ body.sm-open { overflow: hidden; padding-right: var(--sm-sbw, 0px); } body.sm-open .nav { padding-right: var(--sm-sbw, 0px); } @media (prefers-reduced-motion: reduce) { .sm-root .sm-prelayer, .sm-root .sm-panel, .sm-scrim, .nav-toggle { transition: none !important; } } /* <<< menu.css: fin (panel) */