html, body{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.hero-contact{
    position: relative;
    width: 100%;
    flex: 1;              /* era: height: clamp(420px, 58vh, 620px); */
    min-height: 0;         /* necessário para o flex não ignorar o overflow interno */
    overflow: hidden;
    background: linear-gradient(160deg, #1B4EA0 0%, #0A2E5C 100%);
}

.hero-contact__img{
    position: absolute;
    top: 0;
    right: 0;              /* a foto fica encostada à direita */
    height: 100%;
    width: 48%;             /* NÃO ocupa mais a largura toda — bem menos zoom necessário */
    min-width: 380px;       /* evita ficar espremida demais em ecrãs médios */
    object-fit: cover;
    object-position: 50% top;  /* "top" = mostra a partir do capacete, sem cortar */
}

/* Funde a borda esquerda da foto com o azul de fundo, em vez de um corte seco */
.hero-contact__img{
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 18%);
    mask-image: linear-gradient(90deg, transparent 0%, black 18%);
}

.hero-contact__scrim{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(10,46,92,0.55) 0%,
        rgba(10,46,92,0.15) 45%,
        rgba(10,46,92,0) 55%);
    pointer-events: none;
}

.hero-contact__content{
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 6%;
    max-width: 480px;   /* era 560px */
    color: #fff;
}

.hero-contact__content h1{
    font-size: 2.3rem;
    line-height: 1.25;
    margin: 0 0 1.5rem;
    color: #fff;
}

.hero-text h2{
    margin: 0 0 1rem;
    font-size: 1.4rem;
    color: #fff;
}

.hero-text p{
    font-size: 1.15rem;
    margin: 0.5rem 0;
    color: #f0f0f0;
}

/* Links legíveis sobre a foto (substitui a regra antiga que usava #333) */
.hero-text a{
    color: #fff;
    text-decoration: none;
    font-weight: 400;
}

.hero-text a:hover {
  color: #000;
}

.hero-text h2, .hero-text h3 {
  margin: 1rem 0;
  color: #111;
  font-size: 1.4rem;  /* mantém proporção dos subtítulos */
}

.hero-text p {
  font-size: 1.2rem;  /* mantém tamanho dos parágrafos */
}

@media (max-width: 768px) {
    .hero-contact{
        flex: none;         /* NOVO — volta a ter altura própria, não preenche a tela toda */
        height: 42vh;
        min-height: 280px;
    }
    .hero-contact__scrim{
        background: linear-gradient(180deg, rgba(10,46,92,0) 0%, rgba(10,46,92,0.75) 100%);
    }
    .hero-contact__content{
        justify-content: flex-end;
        max-width: 100%;
        padding: 0 5% 1.5rem;
        text-align: center;
    }
    .hero-contact__content h1{
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }
    .hero-text{
        display: none; /* texto de contacto sai da imagem no mobile */
    }
}

/* Bloco de contactos separado, só visível no mobile, abaixo da imagem */
.hero-contact-mobile{
    display: none;
}
@media (max-width: 768px) {
    .hero-contact-mobile{
        display: block;
        background: #fff;
        padding: 2rem 6%;
        text-align: center;
    }
    .hero-contact-mobile h2{ color:#111; margin-bottom: 1rem; }
    .hero-contact-mobile p{ color:#333; font-size: 1.05rem; margin: 0.5rem 0; }
    .hero-contact-mobile a{ color:#333; text-decoration:none; font-weight:600; }
}