/* ================================================================ DIGITALFY — RESPONSIVE STYLES Usa classes .layout-desktop / .layout-mobile no Desktop: scroll horizontal JS intocado. Mobile: scroll vertical nativo, painéis empilhados. ================================================================ */ /* ── 1280px — desktop compacto ──────────────────────────────── */ @media (max-width: 1280px) { .layout-desktop .p-inner { padding-left: 3rem; padding-right: 3rem; } .layout-desktop .hero-title { font-size: 3.4rem; } .layout-desktop .hero-inner { gap: 2.5rem; } .layout-desktop .hero-visual { height: 400px; } .layout-desktop .services-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } .layout-desktop .svc-card { padding: 1.4rem; } .layout-desktop .results-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } /* ── 1024px — tablet landscape desktop ──────────────────────── */ @media (max-width: 1024px) { .layout-desktop .navbar { padding: 0 2rem; } .layout-desktop .p-inner { padding: calc(var(--nav-h) + 1.5rem) 2.5rem 1.5rem; } .layout-desktop .hero-inner { grid-template-columns: 1fr; gap: 1.5rem; } .layout-desktop .hero-visual { height: 300px; width: 100%; } .layout-desktop .hero-desc { max-width: 100%; } .layout-desktop .about-inner { grid-template-columns: 1fr; gap: 2rem; } .layout-desktop .about-visual { display: none; } .layout-desktop .services-grid { grid-template-columns: repeat(2, 1fr); } .layout-desktop .diff-inner { grid-template-columns: 1fr; gap: 2rem; } .layout-desktop .diff-visual { display: none; } .layout-desktop .results-grid { grid-template-columns: repeat(2, 1fr); } } /* ================================================================ LAYOUT MOBILE — scroll VERTICAL nativo Ativado pela classe .layout-mobile no ================================================================ */ /* ── Elementos exclusivos do mobile ───────────────────────── */ .hero-mobile-logo { display: none; } /* ── Scroll horizontal no mobile: bloqueia a vertical ─────── */ html.layout-mobile { overflow: hidden !important; height: 100% !important; overscroll-behavior: none; } html.layout-mobile body { overflow: hidden !important; height: 100% !important; overscroll-behavior: none; } /* ── Container: horizontal e com largura suficiente para os painéis ─ */ .layout-mobile .h-container { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: row !important; width: auto !important; height: 100svh !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; transform: none !important; will-change: auto !important; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; } .layout-mobile .h-container::-webkit-scrollbar { display: none; } /* ── Painéis: cada um ocupa 100vw e entra em uma faixa lateral ─ */ .layout-mobile .panel { width: 100vw !important; min-width: 100vw !important; height: 100svh !important; min-height: 100svh !important; flex-shrink: 0 !important; scroll-snap-align: start !important; overflow-x: hidden; overflow-y: hidden; position: relative; } /* Hero: ocupa a viewport inteira */ .layout-mobile .panel-hero { min-height: 100svh !important; } /* ── p-bg: CRÍTICO — sobrescreve width:200% do base (causa de overflow) */ .layout-mobile .p-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 0; transform: none !important; will-change: auto !important; } /* Parallax desabilitado no mobile */ .layout-mobile .parallax-el { transform: none !important; } /* p-inner sempre visível */ .layout-mobile .p-inner { opacity: 1 !important; } /* ── Navbar ─────────────────────────────────────────────────────── */ .layout-mobile .navbar { padding: 0 1.25rem; } .layout-mobile .nav-links { display: none; } .layout-mobile .hamburger { display: flex; } /* Elementos só desktop */ .layout-mobile .progress-wrap { display: none; } .layout-mobile .scroll-hint { display: none; } /* ── Section dots: fixos na lateral direita ──────────────────── */ .layout-mobile .section-dots { position: fixed !important; display: flex !important; flex-direction: column; right: 0.6rem; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); gap: 0.55rem; z-index: 200; } /* ── p-inner: padding e dimensões seguras ────────────────────── */ .layout-mobile .p-inner { padding: calc(var(--nav-h) + 2rem) 1.25rem 3rem; height: auto !important; min-height: 0 !important; width: 100%; max-width: 100%; box-sizing: border-box; align-items: flex-start; } /* Hero inner: centraliza verticalmente e preenche tela */ .layout-mobile .panel-hero .p-inner { min-height: 100svh !important; display: flex !important; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 3rem; } /* ================================================================ HERO ================================================================ */ .layout-mobile .hero-mobile-logo { display: none; } .layout-mobile .hero-visual { display: none; } .layout-mobile .hero-inner { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; width: 100%; text-align: center; } .layout-mobile .hero-text { display: flex; flex-direction: column; align-items: center; text-align: center; } .layout-mobile .hero-title { font-size: 2rem; line-height: 1.15; } .layout-mobile .hero-desc { font-size: 0.9rem; max-width: 100%; margin-bottom: 1rem; } .layout-mobile .hero-promo { width: 100%; max-width: 100%; padding: 0.85rem 0.95rem; margin-bottom: 1.25rem; } .layout-mobile .hero-promo strong { font-size: 0.92rem; } .layout-mobile .hero-promo span { font-size: 0.82rem; } .layout-mobile .hero-btns { display: flex; flex-wrap: wrap; gap: 0.65rem; } .layout-mobile .hero-btns .btn { flex: 1 1 140px; justify-content: center; } /* ================================================================ SOBRE ================================================================ */ .layout-mobile .about-inner { grid-template-columns: 1fr; gap: 1.5rem; } .layout-mobile .about-visual { display: none; } .layout-mobile .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-top: 1.5rem; width: 100%; flex-wrap: unset; } .layout-mobile .stat { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 0.4rem; } .layout-mobile .stat-num, .layout-mobile .stat-suf { font-size: 1.6rem; } .layout-mobile .stat-lbl { font-size: 0.72rem; } /* ================================================================ CONTEÚDO MOBILE DOS CARDS ================================================================ */ .layout-mobile .svc-text-desktop, .layout-mobile .diff-text-desktop, .layout-mobile .res-text-desktop { display: none !important; } .layout-mobile .svc-text-mobile, .layout-mobile .diff-text-mobile { display: none !important; } .layout-mobile .svc-card p, .layout-mobile .diff-body p, .layout-mobile .testimonial { display: none !important; } .layout-mobile .svc-card h3, .layout-mobile .diff-body h3 { margin-bottom: 0 !important; } .layout-mobile .res-card .res-val { margin-bottom: 0.35rem !important; } /* ================================================================ SERVIÇOS — grade compacta no mobile ================================================================ */ .layout-mobile .panel-services { overflow: hidden; height: auto !important; min-height: 100svh !important; } .layout-mobile .panel-services .p-inner { padding-top: calc(var(--nav-h) + 0.9rem); padding-bottom: 1rem; } .layout-mobile .services-inner { flex-direction: column; gap: 0.7rem; justify-content: flex-start; padding-bottom: 0.8rem; width: 100%; } .layout-mobile .services-hd { width: 100%; } .layout-mobile .services-carousel-wrap { width: 100%; display: flex; flex-direction: column; gap: 0.55rem; } .layout-mobile .services-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; overflow: visible; scroll-snap-type: none; width: 100%; padding: 0.1rem 0; } .layout-mobile .services-grid .svc-card { width: 100%; max-width: 100%; min-width: 0; padding: 0.8rem 0.7rem; transform: none !important; box-sizing: border-box; } .layout-mobile .services-grid .svc-icon { width: 2rem; height: 2rem; font-size: 0.95rem; margin-bottom: 0.45rem; } .layout-mobile .services-grid .svc-card h3 { font-size: 0.84rem; margin-bottom: 0.2rem; } .layout-mobile .services-grid .svc-card p { font-size: 0.72rem; line-height: 1.35; } /* Dots do carrossel */ .svc-carousel-dots { display: none; justify-content: center; gap: 0.4rem; margin-top: 0.25rem; } .layout-mobile .svc-carousel-dots { display: none; } .svc-cdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; cursor: pointer; padding: 0; transition: all 0.3s ease; } .svc-cdot.active { background: var(--accent1); transform: scale(1.5); box-shadow: 0 0 6px rgba(13,172,217,0.6); } .svc-cdot:hover:not(.active) { background: rgba(255,255,255,0.45); } @media (max-width: 380px) { .layout-mobile .services-grid { grid-template-columns: 1fr; } } @media (max-width: 375px) { .layout-mobile .p-inner { padding-left: 0.75rem !important; padding-right: 0.75rem !important; padding-top: calc(var(--nav-h) + 0.7rem) !important; padding-bottom: 0.8rem !important; } .layout-mobile .panel-services, .layout-mobile .panel-diff, .layout-mobile .panel-results { min-height: 100svh !important; } .layout-mobile .services-grid { grid-template-columns: 1fr; gap: 0.45rem; } .layout-mobile .services-grid .svc-card { padding: 0.7rem 0.65rem; } .layout-mobile .services-grid .svc-card h3 { font-size: 0.78rem; } .layout-mobile .services-grid .svc-card p { font-size: 0.68rem; line-height: 1.3; } .layout-mobile .diff-list { gap: 0.45rem; margin-top: 0.45rem; } .layout-mobile .diff-item { padding: 0.7rem; gap: 0.6rem; } .layout-mobile .diff-body h3 { font-size: 0.82rem; } .layout-mobile .diff-body p { font-size: 0.72rem; line-height: 1.35; } .layout-mobile .results-grid { grid-template-columns: 1fr; gap: 0.45rem; } .layout-mobile .res-card { padding: 0.75rem 0.7rem; } .layout-mobile .res-val { font-size: 1.15rem; } .layout-mobile .res-lbl { font-size: 0.68rem; } .layout-mobile .testimonial { padding: 0.8rem 0.8rem 0.9rem; } .layout-mobile .testimonial blockquote { font-size: 0.72rem; } } /* ================================================================ DIFERENCIAIS ================================================================ */ .layout-mobile .panel-diff { height: auto !important; min-height: 100svh !important; } .layout-mobile .panel-diff .p-inner { padding-top: calc(var(--nav-h) + 0.9rem); padding-bottom: 1rem; } .layout-mobile .diff-inner { grid-template-columns: 1fr; gap: 0.8rem; } .layout-mobile .diff-visual { display: none; } .layout-mobile .diff-list { gap: 0.55rem; margin-top: 0.6rem; } .layout-mobile .diff-item { padding: 0.8rem; gap: 0.7rem; align-items: flex-start; } .layout-mobile .diff-num { font-size: 1.2rem; min-width: 1.8rem; } .layout-mobile .diff-body h3 { font-size: 0.9rem; margin-bottom: 0.2rem; } .layout-mobile .diff-body p { font-size: 0.78rem; line-height: 1.42; } /* ================================================================ RESULTADOS ================================================================ */ .layout-mobile .panel-results { height: auto !important; min-height: 100svh !important; } .layout-mobile .panel-results .p-inner { padding-top: calc(var(--nav-h) + 0.9rem); padding-bottom: 1rem; } .layout-mobile .results-inner { flex-direction: column; gap: 0.9rem; align-items: stretch; width: 100%; } .layout-mobile .results-hd { width: 100%; } .layout-mobile .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; width: 100%; } .layout-mobile .res-card { padding: 0.85rem 0.75rem; } .layout-mobile .res-val { font-size: 1.35rem; } .layout-mobile .res-lbl { font-size: 0.72rem; line-height: 1.4; } .layout-mobile .testimonial { padding: 0.9rem 0.95rem; width: 100%; } .layout-mobile .testimonial blockquote { font-size: 0.78rem; line-height: 1.5; } /* ================================================================ CONTATO ================================================================ */ .layout-mobile .contact-inner { gap: 1.25rem; width: 100%; } .layout-mobile .contact-header { text-align: center; width: 100%; } .layout-mobile .contact-info { width: 100%; max-width: 100%; } .layout-mobile .ci-card { padding: 1.1rem; width: 100%; box-sizing: border-box; } .layout-mobile .footer-copy { text-align: center; } /* ================================================================ TIPOGRAFIA GERAL ================================================================ */ .layout-mobile .section-title { font-size: 1.5rem; margin-bottom: 0.7rem; } .layout-mobile .section-desc { max-width: 100%; font-size: 0.84rem; line-height: 1.55; margin-bottom: 0.7rem; } .layout-mobile .badge { font-size: 0.72rem; } /* ── 480px — smartphones pequenos ───────────────────────────── */ @media (max-width: 480px) { .layout-mobile .hero-title { font-size: 1.65rem; } .layout-mobile .section-title { font-size: 1.35rem; } .layout-mobile .res-val { font-size: 1.2rem; } .layout-mobile .diff-num { font-size: 1.15rem; } .layout-mobile .btn { padding: 0.65rem 1.3rem; font-size: 0.84rem; } .layout-mobile .stat-num, .layout-mobile .stat-suf { font-size: 1.35rem; } .layout-mobile .p-inner { padding-left: 1rem; padding-right: 1rem; } .layout-mobile .results-grid { grid-template-columns: 1fr; } .layout-mobile .services-grid { grid-template-columns: 1fr; } } /* ================================================================ TELAS COM POUCA ALTURA (iPhone SE e similares, ~568–700px) Cada painel ocupa 100svh de altura fixa e corta o excedente (arquitetura de swipe horizontal). Nesses aparelhos a largura pequena força 1 coluna nos grids acima, o que deixa o conteúdo mais alto que a tela e os cards ficam cortados/desenquadrados. Aqui compactamos e voltamos para 2 colunas só quando a ALTURA é curta, para o conteúdo caber inteiro sem cortar. ================================================================ */ @media (max-height: 700px) { .layout-mobile .p-inner { padding-top: calc(var(--nav-h) + 0.5rem) !important; padding-bottom: 0.5rem !important; } .layout-mobile .section-title { font-size: 1.1rem !important; margin-bottom: 0.4rem !important; } /* Serviços: força 2 colunas (3 linhas em vez de 6) e encolhe os cards */ .layout-mobile .services-inner { gap: 0.4rem; } .layout-mobile .services-carousel-wrap { gap: 0.35rem; } .layout-mobile .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.4rem !important; } .layout-mobile .services-grid .svc-card { padding: 0.5rem 0.45rem; } .layout-mobile .services-grid .svc-icon { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; margin-bottom: 0.3rem; } .layout-mobile .services-grid .svc-card h3 { font-size: 0.68rem; line-height: 1.2; } /* Diferenciais: grade 2×2 em vez de 4 linhas empilhadas */ .layout-mobile .diff-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.35rem; } .layout-mobile .diff-item { padding: 0.5rem 0.55rem; gap: 0.4rem; } .layout-mobile .diff-num { font-size: 0.95rem; min-width: 1.3rem; } .layout-mobile .diff-body h3 { font-size: 0.7rem; margin-bottom: 0.1rem; line-height: 1.2; } .layout-mobile .diff-body p { font-size: 0.62rem; line-height: 1.25; } /* Resultados: força 2 colunas (2 linhas em vez de 4) e depoimento compacto */ .layout-mobile .results-inner { gap: 0.5rem; } .layout-mobile .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.4rem !important; } .layout-mobile .res-card { padding: 0.5rem 0.45rem; } .layout-mobile .res-val { font-size: 1rem !important; margin-bottom: 0.15rem; } .layout-mobile .res-lbl { font-size: 0.6rem; line-height: 1.2; } .layout-mobile .testimonial { padding: 0.5rem 0.6rem; } .layout-mobile .testimonial blockquote { font-size: 0.64rem; line-height: 1.3; margin-bottom: 0.25rem; } .layout-mobile .testimonial cite { font-size: 0.58rem; } }