/* Responsive additions. Original desktop styles remain active above 1100px. */ .ti4h-menu-toggle { display: none; } @media (max-width: 1100px) { #root section[id] { scroll-margin-top: 88px; } #root section, #root footer, #root header nav { min-width: 0; } #root section:not(#inicio):not(#insights), #root footer { padding: 56px 24px; } #root section p, #root section span, #root footer { overflow-wrap: anywhere; } #root section .whitespace-nowrap, #root footer .whitespace-nowrap { white-space: normal; } #root section img { flex-shrink: 0; } #root section a { min-height: 44px; max-width: 100%; } #root section a img { flex-shrink: 0; } #root section [class*="text-[46px]"], #root section [class*="text-[48px]"] { font-size: clamp(30px, 4.5vw, 46px); line-height: 1.12; } #root section [class*="text-[68px]"] { font-size: clamp(38px, 6vw, 60px); line-height: 1.08; } #root section [class*="w-[730px]"], #root section [class*="w-[700px]"], #root section [class*="w-[480px]"], #root section [class*="w-[520px]"], #root section [class*="w-[380px]"], #root section [class*="w-[390px]"] { width: 100%; } #root section > div > .justify-between { align-items: flex-start; gap: 24px; flex-direction: column; } #inicio > div:first-child { flex-direction: column; padding: 40px 24px; gap: 32px; min-height: 0; align-items: stretch; } #inicio > div:first-child > div:first-child { width: 100%; } #inicio > div:first-child > div:first-child > div:last-child { flex-wrap: wrap; } #inicio > div:last-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding: 28px 24px; } #servicos > div > div:last-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; } #servicos > div > div:last-child > div { min-height: 0; } #servicos > div > div:last-child > div > div:nth-child(3) { flex-wrap: wrap; } #nuvem > div, #metodo > div { flex-direction: column; gap: 36px; min-height: 0; } #nuvem > div > div, #metodo > div > div { width: 100%; flex: auto; } #nuvem > div > div:first-child > div:last-child { flex-wrap: wrap; gap: 16px; } #nuvem > div > div:last-child > div > div { height: auto; min-height: 190px; gap: 24px; } #metodo + section > div > div:last-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; } #metodo + section > div > div:last-child > div { min-height: 0; } #insights { flex-direction: column; min-height: 0; } #insights > div:last-child { padding: 40px 24px 56px; width: 100%; flex: auto; } #insights + section > div { flex-direction: column; align-items: stretch; padding: 32px 24px; gap: 32px; min-height: 0; } #insights + section > div > div:last-child { width: 100%; } #insights + section > div > div:last-child > a:first-child { max-width: 320px; } #root footer > div > div:first-child { flex-direction: column; gap: 32px; } #root footer [class*="w-[430px]"] { width: 100%; max-width: 540px; } #root footer [class*="gap-[78px]"] { flex-wrap: wrap; gap: 32px 56px; } #root footer > div > div:last-child { flex-wrap: wrap; gap: 20px; } #root footer a { min-height: 44px; display: inline-flex; align-items: center; } /* Keep all illustration elements visible without scaling down labels. */ #inicio > div:first-child > div:last-child { width: 100%; max-width: 580px; height: 440px; align-self: center; } #inicio > div:first-child > div:last-child > div:nth-child(1) { width: 78%; height: auto; aspect-ratio: 1; left: 11%; top: 50%; transform: translateY(-50%); } #inicio > div:first-child > div:last-child > div:nth-child(2) { width: 54%; height: auto; aspect-ratio: 1; left: 23%; top: 50%; transform: translateY(-50%); } #inicio > div:first-child > div:last-child > div:nth-child(3) { left: 50%; top: 10%; height: 80%; } #inicio > div:first-child > div:last-child > div:nth-child(4) { left: 10%; top: 50%; width: 80%; } #inicio > div:first-child > div:last-child > div:nth-child(5) { left: 50%; top: 50%; width: 112px; height: 112px; transform: translate(-50%,-50%); } #inicio > div:first-child > div:last-child > div:nth-child(6), #inicio > div:first-child > div:last-child > div:nth-child(7), #inicio > div:first-child > div:last-child > div:nth-child(8), #inicio > div:first-child > div:last-child > div:nth-child(9) { width: 100px; } #inicio > div:first-child > div:last-child > div:nth-child(6) { left: 16px !important; top: 24px !important; } #inicio > div:first-child > div:last-child > div:nth-child(7) { left: auto !important; right: 16px; top: 24px !important; } #inicio > div:first-child > div:last-child > div:nth-child(8) { left: 16px !important; top: auto !important; bottom: 78px; } #inicio > div:first-child > div:last-child > div:nth-child(9) { left: auto !important; right: 16px; top: auto !important; bottom: 78px; } #inicio > div:first-child > div:last-child > div:nth-child(10) { left: 16px; top: auto; bottom: 16px; width: 120px; height: 52px; padding: 6px 10px; } #inicio > div:first-child > div:last-child > p { left: auto; right: 16px; top: auto; bottom: 20px; width: 120px; font-size: 10px; } #metodo > div > div:first-child > div:last-child { width: 100%; max-width: 520px; } #metodo > div > div:first-child > div:last-child > div:nth-child(2) { left: 5%; width: 90%; } #metodo > div > div:first-child > div:last-child > div:nth-child(3) { left: 10%; width: 11%; } #metodo > div > div:first-child > div:last-child > div:nth-child(4) { left: 30%; width: 11%; } #metodo > div > div:first-child > div:last-child > div:nth-child(5) { left: 50%; width: 11%; } #metodo > div > div:first-child > div:last-child > div:nth-child(6) { left: 70%; width: 11%; } #metodo > div > div:first-child > div:last-child > div:last-child { left: auto; right: 5%; top: 205px; } #insights > div:first-child { width: 100%; height: 540px; } #insights > div:first-child > div:nth-child(-n+3) { left: 50%; top: 45%; transform: translate(-50%,-50%); max-width: 80%; height: auto; aspect-ratio: 1; } #insights > div:first-child > div:nth-child(4) { left: 50%; top: 12%; height: 70%; } #insights > div:first-child > div:nth-child(5) { left: 5%; top: 45%; width: 90%; } #insights > div:first-child > div:nth-child(6) { left: 18%; top: 28%; } #insights > div:first-child > div:nth-child(7) { left: 80%; top: 45%; } #insights > div:first-child > div:nth-child(8) { left: 30%; top: 65%; } #insights > div:first-child > div:nth-child(9) { left: 65%; top: 20%; } #insights > div:first-child > p { left: 24px; top: 24px; right: 24px; } #insights > div:first-child > div:last-child { left: 24px; right: 24px; width: auto; top: auto; bottom: 24px; } /* Without JavaScript, navigation stays visible and wraps. */ #root header nav { height: auto; min-height: 72px; padding: 14px 24px; gap: 16px; flex-wrap: wrap; } #root header nav > div { flex-wrap: wrap; gap: 12px 24px; white-space: normal; } #root header nav a { min-height: 44px; display: inline-flex; align-items: center; } #root header nav.ti4h-menu-ready > div { display: none; width: 100%; flex-direction: column; align-items: stretch; } #root header nav.ti4h-menu-open > div { display: flex; } #root header nav.ti4h-menu-ready { max-height: 100dvh; overflow-y: auto; } .ti4h-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 96px; min-height: 44px; padding: 8px 12px; border: 1px solid #d9e1e7; border-radius: 8px; color: #0c1524; cursor: pointer; margin-left: auto; } .ti4h-menu-toggle:focus-visible, #root header a:focus-visible { outline: 3px solid #4f7cff; outline-offset: 3px; } } @media (max-width: 600px) { #root section:not(#inicio):not(#insights), #root footer { padding: 44px 20px; } #inicio > div:first-child { padding: 32px 20px; } #inicio > div:first-child > div:first-child > div:last-child { flex-direction: column; align-items: stretch; width: 100%; } #inicio > div:first-child > div:first-child > div:first-child { max-width: 100%; } #inicio > div:first-child > div:last-child { height: 380px; } #inicio > div:last-child { padding-inline: 20px; } #servicos > div > div:last-child, #metodo + section > div > div:last-child { grid-template-columns: minmax(0,1fr); } #nuvem > div > div:last-child > div { flex-direction: column; } #nuvem > div > div:last-child > div > div { width: 100%; min-height: 170px; } #insights > div:first-child { height: 440px; } #insights > div:last-child { padding-inline: 20px; } #insights > div:last-child > div:nth-last-child(2) { flex-direction: column; } #insights > div:last-child > div:nth-last-child(2) > div { width: 100%; min-height: 0; } #insights + section > div { padding: 28px 20px; } #metodo > div > div:last-child > div { gap: 14px; } #root header nav { padding-inline: 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }