/* ============================================================ SPECTRA INSTRUMENTS — RESPONSIVE MOBILE CSS Adjuntar al FINAL de style.css ============================================================ */ /* ── VIEWPORT FIX GLOBAL ─────────────────────────────────── */ /* El viewport actual está fijado en 1200px — esto lo corrige */ /* IMPORTANTE: Cambia también en cada de los HTML: DE: A: */ /* ── HAMBURGER MENU ──────────────────────────────────────── */ .hamburger-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; z-index: 10001; } .hamburger-btn span { display: block; width: 24px; height: 2px; background: var(--spectra-title); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: center; } .hamburger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── MOBILE DRAWER NAV ───────────────────────────────────── */ .mobile-nav-drawer { display: none; position: fixed; top: 80px; left: 0; width: 100%; height: calc(100vh - 80px); background: #0c0c0c; border-top: 1px solid var(--spectra-border); z-index: 9998; padding: 40px 24px; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); } .mobile-nav-drawer.open { transform: translateX(0); } .mobile-nav-drawer a { display: block; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: var(--spectra-text); padding: 18px 0; border-bottom: 1px solid var(--spectra-border); transition: color 0.2s ease; } .mobile-nav-drawer a:hover, .mobile-nav-drawer a.active-link { color: var(--spectra-accent); } .mobile-nav-section-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #444; text-transform: uppercase; letter-spacing: 3px; padding: 30px 0 10px 0; display: block; } .mobile-nav-cta { margin-top: 30px; display: block; border: 1px solid var(--spectra-accent) !important; color: var(--spectra-accent) !important; padding: 16px 24px !important; text-align: center; border-bottom: none !important; } /* ── BREAKPOINT: TABLET (< 900px) ───────────────────────── */ @media (max-width: 900px) { /* Header */ .header__inline-menu { display: none; } .hamburger-btn { display: flex; } /* Mega menu deshabilitado en móvil */ .mega-menu { display: none !important; } .mobile-nav-drawer { display: block; } /* Hero principal */ .main-title h1 { font-size: clamp(2.5rem, 8vw, 5rem); letter-spacing: -2px; } /* Grillas genéricas */ .objex-grid, .footer-container { grid-template-columns: 1fr; } .info-col { padding: 40px 0; border-right: none; } .image-col { min-height: 300px; border-left: none; border-top: 1px solid #1a1a1a; } } /* ── BREAKPOINT: MÓVIL (< 768px) ────────────────────────── */ @media (max-width: 768px) { /* Espaciados */ main { padding-top: 80px; } .grid-container { padding: 0 16px; } /* Catálogo */ .cat-hero { padding: 40px 0 30px; } .cat-hero h1 { font-size: clamp(2rem, 9vw, 3.5rem); } .cat-grid { grid-template-columns: 1fr; } .cat-nav-inner { flex-direction: column; gap: 8px; } .cat-nav-inner a { padding: 10px 0; border-bottom: 1px solid var(--spectra-border); font-size: 11px; } /* Catálogo — cards */ .cat-item { flex-direction: column; } .cat-img-wrapper { width: 100%; height: 200px; } .cat-img-wrapper img { width: 100%; height: 100%; object-fit: cover; } /* Contact */ .contact-grid { grid-template-columns: 1fr; } .contact-title { font-size: clamp(2rem, 8vw, 3rem); } .contact-info-panel { padding: 24px; } /* Soporte */ .support-title { font-size: clamp(2rem, 8vw, 3rem); } .support-grid { grid-template-columns: 1fr; } .ticket-box { flex-direction: column; gap: 24px; } .ticket-action { width: 100%; } .ticket-action .btn-main { width: 100%; text-align: center; } /* Dashboard */ .dashboard-layout { grid-template-columns: 1fr; } .dashboard-sidebar { position: fixed; bottom: 0; left: 0; width: 100%; height: auto; flex-direction: row; z-index: 100; border-top: 1px solid var(--spectra-border); border-right: none; padding: 8px 0; overflow-x: auto; background: #0c0c0c; } .sidebar-brand { display: none; } .sidebar-nav { flex-direction: row; gap: 0; width: 100%; justify-content: space-around; } .nav-item { flex-direction: column; gap: 4px; font-size: 9px; padding: 6px 12px; text-align: center; } .nav-item svg { width: 20px; height: 20px; } .sidebar-bottom { display: none; /* Ocultar sesión en bottom bar */ } .dashboard-main { margin-bottom: 70px; /* Espacio para el bottom nav */ padding: 16px; } .nodes-grid { grid-template-columns: 1fr; } .dash-actions { display: none; } /* Footer */ .footer-container { grid-template-columns: 1fr; gap: 30px; } .bottom-inner { flex-direction: column; gap: 10px; text-align: center; } .footer-socials-brand { justify-content: center; } .footer-desc { max-width: 100%; } /* FAQ */ .faq-grid { grid-template-columns: 1fr; } /* spectracloud page */ .cloud-features-grid, .cloud-pricing-grid { grid-template-columns: 1fr; } .cloud-hero h1 { font-size: clamp(2rem, 8vw, 3.5rem); } .pricing-card.featured { transform: none; } /* spectralog blackbox */ .bb-hero-inner { flex-direction: column; } .bb-spec-grid { grid-template-columns: 1fr 1fr; } .bb-tabs-content { padding: 20px; } /* Forms */ .form-row { flex-direction: column; gap: 0; } .spectra-form { padding: 0; } /* Kits */ .cat-grid.kits-grid { grid-template-columns: 1fr; } } /* ── BREAKPOINT: MÓVIL PEQUEÑO (< 480px) ────────────────── */ @media (max-width: 480px) { .header__heading-link span { font-size: 18px; } .header__logo-img { height: 32px; } .cat-hero h1 { font-size: 2rem; } .bb-spec-grid { grid-template-columns: 1fr; } .cat-spec-list { flex-wrap: wrap; gap: 6px; } .contact-title { font-size: 1.8rem; } } /* ── TOUCH IMPROVEMENTS ──────────────────────────────────── */ @media (hover: none) and (pointer: coarse) { .cat-btn-main, .cat-btn-outline, .btn-main, .btn-submit, .nav-item { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .mega-col:hover { transform: none; } .header__menu-item::after { display: none; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE COMPLETO — REVISIÓN 2026 ════════════════════════════════════════════════════════════ */ /* ── INDEX — HERO ─────────────────────────────────────────── */ @media (max-width: 768px) { /* Hero fullscreen */ .objex-hero-section { min-height: auto !important; } .hero-content-wrap { padding: 44px 0 32px !important; } .hero-text { max-width: 100% !important; } .hero-eyebrow { font-size: 8px !important; margin-bottom: 14px !important; letter-spacing: .2em !important; } .hero-desc { font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 24px !important; max-width: 100% !important; } .hero-tags { font-size: 8px !important; line-height: 2 !important; } .hero-ctas { flex-direction: column; gap: 10px !important; } .hero-ctas a, .hero-ctas .objex-btn, .hero-ctas .btn-ghost-hero { width: 100%; text-align: center; padding: 14px !important; box-sizing: border-box; display: block; } /* Stats bar del hero */ .hero-stats { padding: 14px 0 !important; } .stats-bar-inner { grid-template-columns: 1fr 1fr !important; } .stat-bar-item { padding: 12px 10px !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; } .stat-bar-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.06) !important; } .stat-bar-item:last-child, .stat-bar-item:nth-last-child(2) { border-bottom: none !important; } .stat-bar-val { font-size: .95rem !important; } .stat-bar-lbl { font-size: 7px !important; letter-spacing: .1em !important; } /* Ticker */ .spectra-ticker { padding: 8px 0; } /* Bento */ .spectra-bento-wrapper { padding: 40px 0; } .spectra-bento-row-top { grid-template-columns: 1fr !important; gap: 10px !important; } .spectra-bento-row-bottom { grid-template-columns: 1fr !important; gap: 10px !important; } .spectra-bento-main-image { min-height: 240px !important; } .spectra-bento-col-right { gap: 10px !important; } /* Capacidades */ .capabilities-section { padding: 48px 0 !important; } .cap-grid { grid-template-columns: 1fr !important; } .cap-card { padding: 24px 20px !important; } /* Featured products */ .featured-section { padding: 48px 0 !important; } .featured-header { flex-direction: column; align-items: flex-start !important; gap: 12px; } #home-products { grid-template-columns: 1fr 1fr !important; } /* CTA banner */ .cta-banner { flex-direction: column; text-align: left; padding: 28px 20px !important; } .cta-banner a { width: 100%; text-align: center; } } @media (max-width: 480px) { #home-products { grid-template-columns: 1fr !important; } .stats-bar-inner { grid-template-columns: 1fr 1fr !important; } } /* ── CATÁLOGO ─────────────────────────────────────────────── */ @media (max-width: 768px) { /* Filtros: scroll horizontal */ .cat-filter-bar { top: 80px; } .cat-filter-inner { padding-bottom: 2px; } .cat-filter-btn { padding: 12px 14px; font-size: 10px; } /* Grid de productos: 2 columnas */ #catalog-content .product-grid, [class*="product-grid"] { grid-template-columns: 1fr 1fr !important; } /* Sección label */ .cat-section-label { font-size: 9px; } } @media (max-width: 420px) { #catalog-content .product-grid, [class*="product-grid"] { grid-template-columns: 1fr !important; } } /* ── CARRITO ─────────────────────────────────────────────── */ @media (max-width: 768px) { .carrito-layout { grid-template-columns: 1fr !important; } .cart-summary { position: static !important; margin-top: 20px; } .cart-item { gap: 10px; } .cart-item-img, .cart-item-img-ph { width: 56px !important; height: 56px !important; } /* Modales */ .modal-box { padding: 24px 18px !important; } .modal-box h2 { font-size: 1.4rem !important; } /* Chilexpress section */ .cx-commune-select { height: 100px; } } /* ── CUENTA / AUTH ───────────────────────────────────────── */ @media (max-width: 768px) { /* Auth panel */ .cuenta-auth-wrap, [class*="auth-panel"] { padding: 28px 20px !important; max-width: 100% !important; } /* Tabs perfil */ .cuenta-tabs, [class*="cuenta-tab"] { overflow-x: auto; scrollbar-width: none; white-space: nowrap; } /* Perfil grid */ .perfil-grid, [class*="perfil-grid"] { grid-template-columns: 1fr !important; } /* Pedidos */ .ped-subtotals, [class*="ped-subtotal"] { overflow-x: auto; } } /* ── CONTACTO ────────────────────────────────────────────── */ @media (max-width: 768px) { .contact-section { padding: 40px 0 60px !important; } .contact-grid { grid-template-columns: 1fr !important; gap: 30px !important; } .contact-title { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; } .contact-info-panel { padding: 24px 20px !important; } .form-row { grid-template-columns: 1fr !important; } .faq-grid, [class*="faq-grid"] { grid-template-columns: 1fr !important; } /* Mapa de contacto */ #contact-map { height: 220px !important; } } /* ── PRODUCTO INDIVIDUAL ─────────────────────────────────── */ @media (max-width: 768px) { /* Layout producto */ .product-detail-grid, [class*="product-layout"] { grid-template-columns: 1fr !important; } .product-gallery { margin-bottom: 24px; } .quick-specs-grid { grid-template-columns: 1fr 1fr !important; } .product-ctas { flex-direction: column !important; gap: 10px !important; } .product-ctas a, .product-ctas button { width: 100% !important; text-align: center !important; } } /* ── HEADER USER MENU ────────────────────────────────────── */ @media (max-width: 768px) { .user-dd { right: 0 !important; min-width: 160px !important; } .user-nm { max-width: 60px !important; } .btn-ingresar { font-size: 9px !important; padding: 6px 10px !important; } .cart-icon-btn { width: 36px !important; height: 36px !important; } } /* ── FOOTER ──────────────────────────────────────────────── */ @media (max-width: 768px) { .footer-container { grid-template-columns: 1fr !important; gap: 32px !important; } .footer-col.branding { text-align: left; } .footer-socials-brand { justify-content: flex-start !important; } .bottom-inner { flex-direction: column; gap: 8px; text-align: center; } .bottom-links { flex-wrap: wrap; justify-content: center; gap: 12px; } } /* ── SPECTRACLOUD LANDING ────────────────────────────────── */ @media (max-width: 768px) { .sc-hero { padding: 60px 0 50px !important; min-height: auto !important; } .sc-title { font-size: clamp(3rem, 11vw, 6rem) !important; } .sc-hero-ctas { flex-direction: column !important; gap: 10px !important; } .sc-hero-ctas a { width: 100%; text-align: center; } .feat-grid { grid-template-columns: 1fr !important; } .includes-grid { grid-template-columns: 1fr !important; } .prod-cards { grid-template-columns: 1fr !important; } .request-box { padding: 28px 20px !important; } div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } /* Screens scroll: más pequeñas */ .screen-card { width: 260px; } } /* ── SPECTRACLOUD APP ────────────────────────────────────── */ @media (max-width: 780px) { .sc-main { padding: 14px !important; } .sc-section-title { font-size: 1.6rem !important; } .var-tiles { grid-template-columns: 1fr 1fr !important; } .dev-grid { grid-template-columns: 1fr !important; } .act-grid { grid-template-columns: 1fr 1fr !important; } } /* ── ESPECTRACLOUD PÚBLICO ───────────────────────────────── */ @media (max-width: 768px) { .pub-main { padding: 16px 14px 50px !important; } .pub-banner-wrap { height: 130px !important; } .pub-banner-title { font-size: 1.6rem !important; } .tiles-grid { grid-template-columns: 1fr 1fr !important; } .dev-head { flex-direction: column; align-items: flex-start !important; gap: 10px; } .dl-bar { flex-wrap: wrap; } .dl-bar .btn { flex: 1; text-align: center; min-width: 60px; } .datos-row { grid-template-columns: 1fr 1fr !important; } } /* ── GLOBAL: mejoras de legibilidad en móvil ─────────────── */ @media (max-width: 768px) { /* Tipografía base */ body { font-size: 14px; } /* Grid container padding */ .grid-container { padding: 0 16px !important; } /* Paneles */ .panel-hd h1, [class*="panel-hd"] h1 { font-size: 1.5rem !important; } /* Botones: mínimo 44px para tacto fácil */ .objex-btn, .btn-ghost-hero, .btn-acc, .btn-cot, input[type="submit"], button[type="submit"] { min-height: 44px; } /* Inputs: 16px para evitar zoom automático en iOS */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], select, textarea { font-size: 16px !important; } /* Imágenes */ img { max-width: 100%; height: auto; } } /* Solo el body tiene overflow-x hidden — NO sections ni main (bloquean scroll) */ body { overflow-x: hidden; } /* ── SAFE AREA (iPhone notch / Dynamic Island) ───────────── */ @supports (padding-top: env(safe-area-inset-top)) { .header { padding-top: env(safe-area-inset-top); height: calc(80px + env(safe-area-inset-top)); } main { padding-top: calc(80px + env(safe-area-inset-top)); } .dashboard-sidebar { padding-bottom: env(safe-area-inset-bottom); } .mobile-nav-drawer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } }