/* ============================================ STRATUM — mobile.css Ajustes responsivos para móvil y tablet Agregar en DESPUÉS de style.css y blog.css ============================================ */ /* ── BASE TOUCH TARGETS ── */ @media (max-width: 768px) { a, button { min-height: 44px; } } /* ════════════════════════════════════════════ NAVBAR ════════════════════════════════════════════ */ @media (max-width: 860px) { #navbar { padding: 0.9rem 0; } #navbar.scrolled { padding: 0.75rem 0; } .nav-inner { position: relative; } /* Hide desktop nav links and social */ nav#mainNav, nav:not(.open) { display: none !important; } .nav-social { display: none !important; } .nav-cta { display: none !important; } /* hide nav-cta link inside nav */ /* Show hamburger */ .hamburger { display: flex !important; } /* Full-screen mobile menu */ nav.open { display: flex !important; flex-direction: column; position: fixed; inset: 0; background: var(--white); z-index: 200; padding: 5rem 2rem 2.5rem; gap: 0; overflow-y: auto; } nav.open a { font-size: 1.3rem !important; letter-spacing: 0.06em !important; color: var(--ink) !important; padding: 1rem 0; border-bottom: 1px solid var(--rule); text-transform: none !important; min-height: 56px; display: flex; align-items: center; } nav.open a::after { display: none !important; } nav.open a:last-child { border-bottom: none; } /* nav-cta inside open nav */ nav.open .nav-cta { display: flex !important; margin-top: 1.5rem; background: var(--ink); color: var(--white) !important; justify-content: center; border: none; padding: 1rem !important; font-size: 0.85rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; } /* Hamburger X animation */ .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); } .hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(-8px); } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); } /* Close button in top-right of open menu */ nav.open::before { content: '✕'; position: fixed; top: 1.1rem; right: 1.5rem; font-size: 1.1rem; color: var(--ink); cursor: pointer; z-index: 201; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } /* nav-right: only hamburger */ .nav-right { gap: 0; } } /* Blog page nav (no nav-right wrapper) */ @media (max-width: 860px) { .nav-inner > nav:not(#mainNav) { display: none !important; } .nav-inner > nav.open { display: flex !important; } .nav-inner > .hamburger { display: flex !important; } } /* ════════════════════════════════════════════ HERO ════════════════════════════════════════════ */ @media (max-width: 860px) { #hero { grid-template-columns: 1fr !important; min-height: auto !important; } .hero-right { display: none !important; } .hero-left { padding: 7rem 1.25rem 3rem !important; } .hero-title { font-size: clamp(2.4rem, 10vw, 3.5rem) !important; } .hero-sub { font-size: 0.95rem !important; max-width: 100% !important; } .hero-actions { flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; } .hero-actions .btn-primary, .hero-actions .btn-ghost { justify-content: center; width: 100%; padding: 1rem !important; } .hero-stats { gap: 1.25rem !important; flex-wrap: wrap !important; margin-top: 2.5rem !important; } .hero-stats > div { flex: 1; min-width: 80px; } .stat-num { font-size: 1.8rem !important; } .stat-label { font-size: 0.65rem !important; } } /* ════════════════════════════════════════════ ABOUT ════════════════════════════════════════════ */ @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; } .about-image-wrap { max-width: 360px; margin: 0 auto; } .about-image-placeholder { aspect-ratio: 4/3 !important; } .about-badge { width: 90px !important; height: 90px !important; bottom: -1rem !important; right: 0 !important; font-size: 0.6rem; } .about-badge .badge-num { font-size: 1.6rem !important; } .values-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 480px) { .values-grid { grid-template-columns: 1fr !important; } } /* ════════════════════════════════════════════ SERVICES ════════════════════════════════════════════ */ @media (max-width: 860px) { .services-header { grid-template-columns: 1fr !important; gap: 1rem !important; margin-bottom: 2rem !important; } .services-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5px !important; } } @media (max-width: 560px) { .services-grid { grid-template-columns: 1fr !important; } .service-card { padding: 1.5rem !important; } } /* ════════════════════════════════════════════ SECTORS ════════════════════════════════════════════ */ @media (max-width: 860px) { .sectors-grid { grid-template-columns: 1fr 1fr !important; } .sectors-header { margin-bottom: 2rem !important; } .sectors-header h2 { font-size: clamp(1.8rem, 6vw, 2.5rem) !important; } } @media (max-width: 560px) { .sectors-grid { grid-template-columns: 1fr !important; } .sector-card { padding: 1.25rem !important; } .sector-tags { gap: 0.3rem !important; } .sector-tags span { font-size: 0.6rem !important; } } /* ════════════════════════════════════════════ BLOG / PERSPECTIVAS (homepage) ════════════════════════════════════════════ */ @media (max-width: 860px) { .blog-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; } /* Override JS-rendered blog grid */ .blog-grid { grid-template-columns: 1fr !important; gap: 1.5px !important; } /* Featured card: reset full-width column span */ .blog-grid .blog-card[style*="grid-column"] { grid-column: 1 !important; } .blog-footer-cta { flex-direction: column !important; align-items: flex-start !important; gap: 1.25rem !important; } .social-strip { flex-wrap: wrap !important; gap: 0.5rem !important; } } /* ════════════════════════════════════════════ CONTACT ════════════════════════════════════════════ */ @media (max-width: 860px) { #contact { padding: 3rem 0 !important; } .contact-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; } .contact-social { flex-wrap: wrap !important; gap: 0.5rem !important; } .contact-social-link { font-size: 0.68rem !important; } } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr !important; gap: 0.75rem !important; } .btn-submit { width: 100% !important; } } /* ════════════════════════════════════════════ FOOTER ════════════════════════════════════════════ */ @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; } .footer-brand { grid-column: 1 / -1 !important; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr !important; } .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; } } /* ════════════════════════════════════════════ BLOG PAGE (blog.html) ════════════════════════════════════════════ */ @media (max-width: 860px) { .blog-hero { padding: 6rem 0 2rem !important; } .blog-hero h1 { font-size: clamp(2rem, 8vw, 3rem) !important; } /* Category bar: scrollable row */ .blog-categories { top: 56px !important; } .cat-bar { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 0.4rem !important; padding-bottom: 4px !important; scrollbar-width: none !important; } .cat-bar::-webkit-scrollbar { display: none !important; } .cat-btn { flex-shrink: 0 !important; white-space: nowrap !important; } /* Articles grid */ .articles-grid { grid-template-columns: 1fr !important; gap: 1.5px !important; } /* Featured card: remove side-by-side layout */ .article-card.featured { grid-column: auto !important; grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; } .article-card.featured .article-img { min-height: 200px !important; aspect-ratio: 16/9 !important; } /* Article body padding */ .article-body { padding: 1.25rem !important; } /* Article footer: stack on very small */ .article-footer { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; } /* LinkedIn CTA */ .li-cta-inner { flex-direction: column !important; gap: 1rem !important; } .li-cta-inner .btn-primary { width: 100% !important; justify-content: center !important; } } @media (max-width: 480px) { .article-meta { flex-wrap: wrap !important; gap: 0.4rem !important; } } /* ════════════════════════════════════════════ TICKER — reduce speed on mobile ════════════════════════════════════════════ */ @media (max-width: 560px) { .ticker-track { animation-duration: 20s !important; } .ticker-item { font-size: 0.65rem !important; padding: 0 1rem !important; } } /* ════════════════════════════════════════════ GENERAL SECTION SPACING ════════════════════════════════════════════ */ @media (max-width: 560px) { #about, #services, #sectors, #blog, #team { padding: 3rem 0 !important; } h2 { font-size: clamp(1.7rem, 7vw, 2.5rem) !important; } .container { padding: 0 1.1rem !important; } } /* ════════════════════════════════════════════ LOGO TEXT — truncate on tiny screens ════════════════════════════════════════════ */ @media (max-width: 380px) { .logo-text { font-size: 1rem !important; } .logo-img { width: 28px !important; height: 28px !important; } }