:root { --azul-escuro: #0A3D62; --azul-medio: #1E6091; --azul-claro: #A9D6E5; --branco-porcelana: #F8F9FA; --azul-vibrante: #1565C0; } /* Reset e configurações base */ html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; margin: 0; padding-top: calc(40px + 1vh); overflow-x: hidden; scroll-behavior: smooth; background-color: var(--branco-porcelana); } /* Texto e containers */ .user-info { max-width: 200px; word-wrap: break-word; } /* SEÇÃO INICIAL */ .inicio { background: url('../img/fundo.png') center/cover no-repeat; min-height: 100vh; color: white; display: flex; align-items: center; padding: 4rem 0; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); } .inicio h1, .inicio h3 { text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); } @media (max-width: 768px) { .inicio { text-align: center; padding: 2rem 0; } } /* NAVBAR */ .navbar { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); } /* TIPOGRAFIA */ h1, h2, h2.display-5 { font-family: "Kaushan Script", cursive; font-size: 2.5rem; font-weight: bold; letter-spacing: -0.5px; color: var(--azul-vibrante); } h5 { font-weight: 500; } .texto-destaque h3 { font-family: "Kaushan Script", cursive; } /* SEÇÕES */ .sectione { padding: 5em 0 7em; } /* IMAGENS */ img { -webkit-user-drag: none; user-select: none; } /* QUADRO COM IMAGEM */ .square-frame { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); background: #f7f7f7; display: flex; margin: 0 auto; /* Centraliza horizontalmente */ } .square-frame img { width: 100%; height: 100%; object-fit: cover; } .square-frame--grid .grid-overlay { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(transparent 90%, rgba(255,255,255,0.07) 90%), linear-gradient(90deg, transparent 90%, rgba(255,255,255,0.07) 90%); background-size: 40px 40px; mix-blend-mode: overlay; opacity: 0.8; border-radius: inherit; justify-content: center; align-items: center; } /* CARROSSEL DE IMAGENS SOBREPOSTAS */ .imagens-sobrepostas { position: relative; width: 90vw; max-width: 600px; aspect-ratio: 1 / 1; z-index: 1; /* garantir que fica por baixo do texto */ } .img-fundo, .img-frente { position: absolute; object-fit: cover; width: 100%; height: 100%; } .img-fundo { top: 0; left: 0; z-index: 1; } .img-frente { top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; border: 1em solid #092e50; border-radius: 10em; box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.8); } @media (min-width: 768px) { .imagens-sobrepostas { width: 50vw; max-width: 500px; } } @media (min-width: 1024px) { .imagens-sobrepostas { width: 40vw; max-width: 600px; } } /* Ajustes para telas entre 768px e 1024px */ @media (min-width: 768px) and (max-width: 1024px) { .imagens-sobrepostas { position: relative !important; /* Remove position absolute */ width: 60vw !important; max-width: 400px !important; margin-top: 2rem; z-index: 1 !important; /* Certifica que está por baixo do texto */ } .texto-destaque { position: relative !important; z-index: 10 !important; /* Texto fica sempre em cima */ } } /* Ajuste para telas pequenas */ @media (max-width: 767.98px) { .imagens-sobrepostas { position: relative; /* evitar sobreposição absoluta */ width: 70vw; max-width: 300px; margin: 0 auto 2rem auto; z-index: 1; } .texto-destaque { position: relative; z-index: 10; /* texto acima das imagens */ } .ult{ margin-top: 1em; } } /* ÍCONES */ .arrow { font-size: 3.5rem; cursor: pointer; transition: transform 0.3s ease; color: var(--azul-medio); } .arrow:hover { transform: translateX(5px); } /* BOTÕES */ /* BOTÕES MELHORADOS */ /* Botão principal com efeito gradiente, sombra e transição suave */ .btn-primary { background: linear-gradient(45deg, var(--azul-vibrante), var(--azul-medio)); color: white; border: none; padding: 0.6rem 1.8rem; font-weight: 600; font-size: 1rem; border-radius: 0.5rem; box-shadow: 0 4px 15px rgba(21, 101, 192, 0.4); cursor: pointer; transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; user-select: none; position: relative; overflow: hidden; } .btn-primary:hover { background: linear-gradient(45deg, var(--azul-medio), var(--azul-escuro)); box-shadow: 0 6px 20px rgba(10, 61, 98, 0.7); transform: scale(1.07); } /* Efeito "wave" simples no clique */ .btn-primary:active::after { content: ""; position: absolute; width: 120%; height: 120%; top: -10%; left: -10%; background: rgba(255, 255, 255, 0.15); border-radius: 50%; animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { from { transform: scale(0); opacity: 0.6; } to { transform: scale(2.5); opacity: 0; } } /* Botão outline com transição de cor e preenchimento suave */ .btn-outline-primary { border: 2.5px solid var(--azul-vibrante); color: var(--azul-vibrante); background: transparent; padding: 0.55rem 1.6rem; font-weight: 600; font-size: 1rem; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; user-select: none; position: relative; overflow: hidden; } .btn-outline-primary:hover { background-color: var(--azul-vibrante); color: white; box-shadow: 0 6px 18px rgba(21, 101, 192, 0.6); transform: scale(1.07); } .btn-outline-primary:active::after { content: ""; position: absolute; width: 120%; height: 120%; top: -10%; left: -10%; background: rgba(255, 255, 255, 0.15); border-radius: 50%; animation: ripple 0.6s linear; pointer-events: none; } /* RODAPÉ */ .footer-gradient { background: linear-gradient(135deg, var(--azul-medio), var(--branco-porcelana)); color: var(--azul-escuro); } .footer-gradient a { color: var(--azul-escuro); transition: color 0.3s ease; } .footer-gradient a:hover { color: var(--azul-vibrante); } .contacto-gradient { background: linear-gradient(135deg, var(--azul-escuro), var(--azul-medio), var(--azul-claro)); color: white; } .contacto-gradient a { color: white; text-decoration: none; transition: color 0.3s ease; } .contacto-gradient a:hover { color: var(--azul-claro); text-decoration: underline; } /* LOGO HERO */ .logo-hero { max-width: 350px; height: auto; filter: drop-shadow(2px 2px 6px rgba(255, 255, 255)); } /* SEÇÃO "O QUE FAZEMOS" */ #oquefazemos .card { transition: transform 0.3s ease, box-shadow 0.3s ease; } #oquefazemos .card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } /* SEÇÃO "QUEM É A CILINHA" */ #quemecilinha p { line-height: 1.7; } /* TRABALHOS - IMAGENS */ #trabalhos img { width: 100%; height: 250px; object-fit: cover; border-radius: 0.25rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .carousel-container { display: flex; justify-content: center; /* centra horizontalmente */ flex-wrap: nowrap; /* evita quebra de linha */ gap: 1px; /* espaço entre os itens */ overflow-x: auto; /* permite scroll se não couberem */ padding: 10px; /* opcional, para dar espaço */ } .subalbum-link { cursor: pointer; display: block; position: relative; overflow: hidden; border-radius: 0.375rem; /* arredondado do Bootstrap */ height: 250px; /* altura fixa */ width: 100%; /* largura conforme coluna */ } .subalbum-link img { display: block; width: 100%; height: 100%; /* ocupa todo o bloco */ object-fit: cover; /* corta e preenche mantendo proporção */ transition: filter 0.3s ease; border-radius: 0.375rem; /* arredondar bordas da imagem */ } .subalbum-link .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease-in-out; display: flex; justify-content: center; align-items: center; padding: 0 1rem; border-radius: 0.375rem; } .subalbum-link:hover img { filter: blur(4px); } .subalbum-link:hover .overlay { opacity: 1; } .overlay-text { color: #fff; font-weight: 700; font-size: 1.25rem; text-align: center; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); } .bodylogin{ padding: 20em; } .carousel-item img { -webkit-user-drag: auto; user-select: auto; pointer-events: auto; } #imageModal img { max-height: 100vh; /* ocupa até 80% da altura do ecrã */ height: auto;´/* mantém proporção */ } .trabalhose { background: linear-gradient(135deg, var(--azul-claro), var(--azul-medio)); } .modal { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); } .upload-area { position: relative; cursor: pointer; } /* o input cobre toda a área, mas fica invisível — assim o clique SEMPRE abre o seletor */ .file-input-overlay { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; pointer-events: none; } .upload-area.bg-highlight { background: #f8f9fa; } .img-thumb { width: 120px; height: 120px; object-fit: cover; border-radius: .5rem; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.08); } h2, h3, h5, p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

h2.display-3, h2.display-5 {
  font-size: clamp(1.8rem, 5vw, 2.5rem); /* ajusta dinamicamente no mobile */
  line-height: 1.2;
}