/* * Camada final de responsividade. * Mantida por ultimo no para impedir que estilos antigos em cache * reabram colunas ou ultrapassem a largura da tela em celulares. */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } body, main, header, footer, section, nav, aside, div, article, figure, form, fieldset { min-width: 0; } img, svg, video, canvas, iframe { max-width: 100%; } img, video, canvas { height: auto; } p, h1, h2, h3, a, button, label, span, strong { overflow-wrap: anywhere; } .hero, .credentials-banner, .services, .about, .portfolio, .shop, .pmoc, .contact, .company-profile, .installation-details, .shop-product-detail, .pmoc-tabs-section, .section-pad { width: 100%; max-width: 100%; } .hero-copy, .hero-art, .credentials-banner-inner, .credentials-banner figure, .section-heading, .service-grid, .product-grid, .project-grid, .about-layout, .about-tabs-shell, .about-tablist, .pmoc-showcase, .pmoc-tablist, .pmoc-flow, .contact-grid { min-width: 0; max-width: 100%; } .drawer { width: min(410px, 100vw); max-width: 100vw; } @media (max-width: 850px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .topbar, .header, .hero, .credentials-banner, .section-pad, .pmoc, footer { padding-inline: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .header { width: 100%; } .hero, .about, .contact, .pmoc, .company-profile, .installation-details, .shop-product-detail, .pmoc-showcase { grid-template-columns: minmax(0, 1fr) !important; } .hero { min-height: auto; padding-top: 54px; padding-bottom: 64px; } .hero-copy, .hero-art { width: 100%; max-width: 100%; } .hero .eyebrow { white-space: normal; } .hero-art { overflow: hidden; } .credentials-banner-inner, .credentials-banner figure, .credentials-banner figure img { display: block; width: 100%; max-width: 100%; } .services .section-heading, .services .service-grid, .shop .section-heading, .shop .product-grid, .portfolio .section-heading, .portfolio .project-grid { width: 100%; max-width: 100%; } .services .service-grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-grid, .about-layout, .dashboard-grid, .contact-grid { grid-template-columns: minmax(0, 1fr) !important; } .about-tablist, .pmoc-tablist, .pmoc-flow, .shop-tabs, .shop-subtabs { width: 100%; max-width: 100%; overscroll-behavior-inline: contain; } } @media (max-width: 620px) { .section-pad, .pmoc { padding-top: 62px; padding-bottom: 62px; } .hero h1 { font-size: clamp(2.55rem, 13vw, 3.75rem); line-height: 1.03; } .hero .lead { font-size: 1rem; line-height: 1.65; } .services .service-grid, .product-grid, .pmoc-benefits-grid, .pmoc-showcase-grid { grid-template-columns: minmax(0, 1fr) !important; } .services .service-grid .service-card, .product, .project { width: 100%; max-width: 100%; } .service-card-top, .services .service-grid .service-card button { min-width: 0; } .trust-row { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .trust-row div { min-width: 0; text-align: center; } .credentials-banner figure { border-radius: 12px; } .credentials-banner figure img { object-fit: contain; } } @media (max-width: 430px) { .button-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .button-row .button { width: 100%; min-width: 0; } .hero-art { height: 280px; } .service-tag { max-width: calc(100% - 24px); } .verified-badge { max-width: 100%; } }