/* =========================================================
   1. Variáveis e Reset (Paleta Azul UpCrédito)
   ========================================================= */
:root {
    --bg-color: #1b192d;
    --text-color: #ffffff;
    --blue-accent: #2e5a99;
    --blue-gradient: linear-gradient(90deg, #1f3e78, #3667ab);
    --card-bg: #19203d;
    --border-color: #1c325c;
    --white: #ffffff;
    --gray-light: #f8f8f8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito Sans', sans-serif;
    /* É ESTA LINHA QUE APLICA A FONTE */
}

/* Bloqueio absoluto contra a barra branca lateral */
html,
body {
    max-width: 100vw;
    overflow-x: hidden !important;
}

body {
    background-color: var(--white);
    color: #333;
    line-height: 1.6;
    width: 100%;
    position: relative;
    /* Mantém as animações presas dentro do ecrã */
}

h2,
h3 {
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/* =========================================================
   2. NAVBAR (ESTRUTURA JB PARTNERS)
   ========================================================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    height: 70px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    background: transparent;
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.navbar.scrolled {
    background: rgba(245, 245, 245, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.menu-checkbox {
    display: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    width: 32px;
    cursor: pointer;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
}

.hamburger span {
    background: var(--white);
    border-radius: 10px;
    height: 3px;
    margin: 4px 0;
    transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.hamburger span:nth-of-type(1) {
    width: 50%;
}

.hamburger span:nth-of-type(2) {
    width: 100%;
}

.hamburger span:nth-of-type(3) {
    width: 75%;
}

.menu-checkbox:checked~.hamburger span:nth-of-type(1) {
    transform-origin: bottom;
    transform: rotatez(45deg) translate(5px, 0px);
}

.menu-checkbox:checked~.hamburger span:nth-of-type(2) {
    transform-origin: top;
    transform: rotatez(-45deg);
}

.menu-checkbox:checked~.hamburger span:nth-of-type(3) {
    transform-origin: bottom;
    width: 50%;
    transform: translate(14px, -6px) rotatez(45deg);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 5rem;
    flex: 1;
    margin-top: 0;
    align-items: center;
}

.left-links {
    justify-content: flex-end;
    margin-right: 10rem;
}

.right-links {
    justify-content: flex-start;
    margin-left: 10rem;
}

.nav-links a {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-links a.active,
.nav-links a:hover {
    color: var(--blue-accent);
}



.logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5px;
    z-index: 1000;
}

.logo-container .logo {
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.5));
    transform: scale(1);
}

/* Cor dos links quando a barra está em modo scroll */
.navbar.scrolled .nav-links a {
    color: #1b192d;
    /* Aqui podes mudar a cor normal do texto quando fazes scroll */
}

/* Cor do HOVER (ao passar o rato) quando a barra está em modo scroll */
.navbar.scrolled .nav-links a:hover,
.navbar.scrolled .nav-links a.active {
    color: #2e5a99;
    /* Substitui pelo código da cor que queres que apareça no hover */
}

/* =========================================================
   3. BOTÕES (Animação JB Partners / UpCrédito)
   ========================================================= */
.btn-blue {
    display: inline-block;
    padding: 15px 45px;
    background: var(--blue-gradient);
    color: var(--white);
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    text-align: center;
    /* Tirámos o 'background 0.3s' e colocámos 'filter 0.3s' para evitar o piscar */
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
    backface-visibility: hidden;
}

.btn-blue:hover {
    transform: scale(1.1) !important;
    color: var(--white);
    opacity: 1;
    /* Em vez de mudar a cor, aumenta o brilho do degradê suavemente */
    filter: brightness(1.15);
}

/* =========================================================
   4. HERO E MARQUEE
   ========================================================= */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.hero-content-upcredito {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    color: var(--white);
    text-align: center;
}

.text-box-hero {
    max-width: 850px;
    margin: 0 auto;
    /* MUDANÇA AQUI: Adiciona esta linha mágica! */
    animation: floatHero 6s ease-in-out infinite;
}

/* Letras Grandes e Formatação do Hero (Igual à página de Crédito) */
.text-box-hero h1 {
    font-size: 4rem;
    /* Aumentado para igualar os 4rem da outra página */
    font-weight: 800;
    /* Mais grosso e imponente */
    margin-bottom: 25px;
    /* Mais espaço para respirar */
    line-height: 1.2;
    letter-spacing: -1px;
    /* Junta ligeiramente as letras para um ar mais moderno */
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Sombra de fundo para destacar do vídeo/imagem */
}

.text-box-hero p {
    font-size: 1.3rem;
    /* Aumentado */
    margin: 20px 0 35px;
    font-weight: 500;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* O texto com o gradiente super legível */
.blue-gradient-text {
    /* O mesmo gradiente claro e luminoso que criámos há pouco */
    background: linear-gradient(110deg, #3c65b2, #2a8eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline;
    /* Garante que não quebra a linha de forma estranha */

    /* A "aura" escura que faz as letras saltarem do fundo */

    text-shadow: none !important;
    /* Impede que a sombra do h1 se misture aqui */
}

/* Animação de Entrada Premium (Igual à página de Crédito) */
.hero-title-anim {
    opacity: 0;
    /* Usamos a curva de velocidade super elegante (cubic-bezier) que aplicámos há pouco */
    animation: cinematicReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cinematicReveal {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.96);
        /* Começa mais abaixo e ligeiramente mais pequeno */
        filter: blur(0);
        /* Garante que entra limpo, sem desfoque */
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        /* Posição final perfeita */
        filter: blur(0);
    }
}

.hero-btn-anim {
    opacity: 0;
    animation: fadeInHero 1.2s ease-out forwards;
}



@keyframes fadeInHero {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Etiqueta Legal no canto do Hero */
.legal-hero-tag {
    position: absolute;
    bottom: 85px;
    /* Fica encostado logo acima da faixa dos bancos */
    right: 30px;
    /* Encostado à direita */
    z-index: 20;
    color: rgba(255, 255, 255, 0.5);
    /* Meio transparente para não roubar a atenção */
    font-size: 0.65rem;
    /* Letra bem pequena */
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.legal-hero-tag:hover {
    color: var(--white);
    /* Fica totalmente branco ao passar o rato */
}

/* Ajuste para não colar à borda nos telemóveis */
@media (max-width: 900px) {
    .legal-hero-tag {
        bottom: 80px;
        right: 15px;
        font-size: 0.6rem;
    }
}

/* Marquee (Logos) */
.marquee {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 10;
    padding: 20px 0;
    background: linear-gradient(to top, rgba(27, 25, 45, 0.8), transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee-left 30s linear infinite;
}

.marquee-track img {
    height: 35px;
    margin-right: 60px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

@keyframes marquee-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =========================================================
   5. SECÇÕES EMPILHADAS (CARTÕES)
   ========================================================= */
.fullscreen-stack {
    width: 100%;
    margin: 0;
    padding: 0;
}

.c-hotels__list {
    display: block;
    list-style: none;
}

.c-hotels__item {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 50vh;
    background-color: var(--white);
    overflow: hidden;
    border-radius: 40px 40px 0 0;
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.15);
}

.c-hotels__item.gray-bg .c-hotels__item-info {
    background-color: var(--gray-light);
}

@media (min-width: 900px) {
    .c-hotels__item {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 100vh;
    }
}

/* Tamanho do título VAMOS AVANÇAR no telemóvel */
.c-hotels__item.dark-card h2 {
    font-size: 2.5rem;
    /* Ajusta este valor para os telemóveis (ex: 2.2rem, 2.8rem) */
}



.c-hotels__item-figure {
    width: 100%;
    height: 100%;
}

.c-hotels__item-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-hotels__item-info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10%;
    background-color: var(--white);
}

.c-hotels__item-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--bg-color);
    line-height: 1.1;
}

.c-hotels__item-subtitle {
    margin-bottom: 30px;
    text-transform: uppercase;
    color: var(--blue-accent);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.c-hotels__item-excerpt {
    margin-bottom: 40px;
    font-size: 1.2rem;
    color: #555;
    line-height: 1.8;
}

.c-hotels__item.dark-card {
    background-color: var(--bg-color);
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 100vh;
    padding: 100px 0;
}

/* Tamanho do título VAMOS AVANÇAR no computador */
.c-hotels__item.dark-card h2 {
    font-size: 2.5rem;
    /* Aumenta este valor (ex: 4rem, 4.5rem) até ficar ao teu gosto */
    margin-bottom: 15px;
}

@media (min-width: 900px) {
    .c-hotels__item.dark-card {
        grid-template-columns: 1fr;
    }
}

.cards-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.card {
    background: var(--white);
    color: #000;
    padding: 40px;
    border-radius: 15px;
    flex: 1;
    text-align: left;
    min-width: 300px;
    max-width: 350px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid #eee;
}

.card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #000;
}

.card-icon-inline {
    font-size: 1.8rem;
    color: var(--blue-accent);
}

.card ul {
    list-style-type: none;
    padding-left: 0;
    text-align: left;
}

.card ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #333;
}

.card ul li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--blue-accent);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
}

/* =========================================================
   6. SECÇÃO SIMULADOR CRM
   ========================================================= */
.form-section-new {
    padding: 100px 0 20px 0;
    background-color: var(--white);
    color: #333;
    overflow-x: hidden;
}

.main-title-centered {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 70px;
    color: #000;
    text-transform: uppercase;
}

.container {
    max-width: 1450px;
    /* MUDANÇA: Era 1100px. Isto vai esticar TODAS as secções do site! */
    margin: 0 auto;
    padding: 0 40px;
    /* MUDANÇA: Um pouco mais de margem lateral para não colar no ecrã */
}

.simulador-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    /* Controla a largura das duas metades */
    gap: 130px;
    /* AUMENTADO: Era 80px. É isto que cria mais espaço em branco entre o lado esquerdo e o direito */
    align-items: stretch;
    /* MUDANÇA: Antes estava 'start'. Com 'stretch', a caixa da direita estica-se automaticamente para baixo */
}

.simulador-form-side {
    display: flex;
    flex-direction: column;
    min-height: 600px;
    /* AUMENTADO: Força a caixa a ter um comprimento maior. Podes aumentar para 700px ou 800px se quiseres ainda mais comprida */
    /* Se a tua caixa tiver uma cor de fundo ou borda, podes também adicionar um padding maior aqui, por exemplo: padding: 50px; */
}

.blue-subtitle {
    color: var(--blue-accent);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.simulador-text-side {
    margin-left: 0;
}

.benefit-item {
    margin-bottom: 25px;
}

.benefit-item strong {
    display: block;
    font-size: 1.1rem;
    color: #000;
    margin-bottom: 5px;
}

.benefit-item p {
    font-size: 1rem;
    color: #444;
    line-height: 1.5;
}

/* =========================================================
   7. SECÇÃO CONSULTORES IMOBILIÁRIOS
   ========================================================= */
.partners-callout {
    padding: 20px 0 80px 0;
    background-color: var(--white);
    border-top: 1px solid #f0f0f0;
    overflow-x: hidden;
}

.partners-title {
    text-align: center;
    color: var(--bg-color);
    font-size: 2.5rem;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 50px;
}

.partners-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 100%;
    /* Força a respeitar o ecrã */
    margin: 0 auto;
}

.partners-text {
    flex: 1;
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
    font-weight: 500;
    margin-left: 0;
    /* Margem negativa limpa! */
}

.partners-action {
    flex-shrink: 0;
    margin-right: 0;
    /* Margem negativa limpa! */
}

/* =========================================================
   8. FOOTER (ESTRUTURA JB PARTNERS)
   ========================================================= */
.footer {
    padding: 60px 5% 20px;
    background: var(--bg-color);
    overflow-x: hidden;
}

.footer.border-top {
    border-top: 1px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.footer-col h4 {
    font-size: 0.8rem;
    color: var(--text-color);
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-weight: 600;
}

.footer-col p,
.footer-col a {
    color: #888;
    font-size: 0.85rem;
    line-height: 2;
}

.footer-col a:hover {
    color: var(--blue-accent);
}

.footer-col ul {
    list-style: none;
}

/* Redes Sociais IGUAIS à JB Partners */
.social-col {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.social-icon {
    width: 40px;
    height: 40px;
    opacity: 0.6;
    transition: 0.3s;
}

.social-icon:hover {
    opacity: 1;
    transform: scale(1.0);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    font-size: 0.75rem;
    color: #666;
}

/* =========================================================
   9. ANIMAÇÕES DE SCROLL
   ========================================================= */
.anima-slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anima-slide-left {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anima-slide-right {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mostrar {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* =========================================================
   10. RESPONSIVO GLOBAL (MOBILE / TABLET)
   ========================================================= */
@media (max-width: 1440px) {
    .nav-links {
        gap: 2rem;
    }

    .left-links {
        margin-right: 7rem;
    }

    .right-links {
        margin-left: 7rem;
    }

    .logo-container .logo {
        height: 120px;
    }

    /* MUDANÇA: Cancela as margens negativas nos portáteis e adiciona uma margem de segurança */
    .partners-content {
        gap: 40px;
        padding: 0 40px;
    }

    .partners-text {
        margin-left: 0;
    }

    .partners-action {
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .hamburger {
        display: flex;
    }

    .logo-container .logo {
        height: 90px;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(27, 25, 45, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 0 !important;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 998;
    }

    .menu-checkbox:checked~.nav-menu {
        transform: translateX(0);
    }

    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        flex: none !important;
    }

    .left-links {
        margin-bottom: 2.5rem !important;
    }

    .right-links {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    .nav-links li {
        list-style: none;
        width: 100%;
    }

    .nav-links a {
        font-size: 1.8rem !important;
        font-weight: 600;
        letter-spacing: 2px;
        display: block;
        color: var(--white);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 900px) {
    .hero-content-upcredito {
        padding: 0 20px;
    }

    /* Tamanhos do Texto ajustados para Mobile */
    .text-box-hero h1 {
        font-size: 2.8rem;
    }

    .text-box-hero p {
        font-size: 1.2rem;
    }

    .c-hotels__item {
        grid-template-rows: 40vh 60vh;
    }

    .c-hotels__item.gray-bg {
        grid-template-rows: 60vh 40vh;
    }

    .c-hotels__item-info {
        padding: 5% 20px;
        overflow-y: auto;
        min-height: 0;
        height: 100%;
    }

    .c-hotels__item-title {
        font-size: 1.6rem;
    }

    .c-hotels__item-subtitle {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .c-hotels__item-excerpt {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .c-hotels__item.dark-card {
        padding: 60px 20px;
    }

    .cards-grid {
        flex-direction: column;
        align-items: center;
    }

    .card {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .form-section-new {
        padding: 60px 0 0 0;
    }

    .simulador-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .main-title-centered {
        font-size: 1.8rem;
        padding: 0 15px;
        margin-bottom: 40px;
    }

    .simulador-text-side {
        /* MUDANÇA: Altera de -100px para 0 ou remove a linha */
        margin-left: 0;
    }

    .partners-callout {
        padding: 0 0 60px 0;
        border-top: none;
    }

    .partners-title {
        font-size: 1.8rem;
        padding: 0 15px;
        margin-bottom: 30px;
    }



}




/* =========================================================
   11. POPUP DE SUCESSO (MODAL) E FORMULÁRIOS
   ========================================================= */

/* Mensagens de Erro do Formulário */
.error-text {
    color: #d9534f;
    font-size: 0.75rem;
    margin-top: 5px;
    display: block;
    animation: fadeIn 0.3s ease;
}

.input-error {
    border-color: #d9534f !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal de Sucesso */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.modal-overlay.mostrar {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--blue-accent);
    /* Atualizado para Azul UpCrédito */
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.modal-overlay.mostrar .modal-content {
    transform: translateY(0) scale(1);
}

.modal-icon {
    font-size: 3.5rem;
    color: var(--blue-accent);
    /* Atualizado para Azul UpCrédito */
    margin-bottom: 10px;
    line-height: 1;
}

.modal-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-color);
}

.modal-content p {
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.modal-content .btn-blue {
    /* Atualizado para o botão azul */
    width: 100%;
}


/* =========================================================
   12. CORREÇÕES DE PÁGINAS LEGAIS E CONTACTOS
   ========================================================= */

/* --- CORREÇÃO DE CORTE DE TEXTO (PÁGINAS LEGAIS) --- */
.legal-container,
.legal-container * {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
}

.legal-container {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
}

.legal-container table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}



/* Forçar os elementos da página de contactos a respeitarem o limite */
.contact-page,
.contact-container,
.contact-info-section,
.map-container iframe {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Proteção do Google Maps e Ajuste de Altura */
.map-container iframe {
    width: 100% !important;
    height: 380px !important;
    /* AUMENTA A ALTURA AQUI (o original era só 250px) */
}

/* =========================================================
   13. PÁGINA CRÉDITO & TRANSFERÊNCIA (DESIGN PREMIUM)
   ========================================================= */

/* Hero Moderno */
.cp-hero {
    position: relative;
    height: 100vh;
    /* Para ocupar o ecrã todo como querias */
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* A forma separada e que nunca falha: */
    background-image: url('credito.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(27, 25, 45, 0.95) 0%, rgba(46, 90, 153, 0.8) 100%);
    z-index: 1;
}

.cp-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 850px;
    color: var(--white);
    padding: 0 20px;
    margin-top: 50px;
}

.cp-hero-title {
    font-size: 3.8rem;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.cp-hero-content p {
    font-size: 1.25rem;
    color: #e0e0e0;
    line-height: 1.6;
}

.cp-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 25px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Layout de Sobreposição (Glassmorphism) */
.cp-showcase {
    padding: 120px 0;
    background: var(--white);
    position: relative;
    overflow-x: hidden;
}

.cp-showcase.alt-bg {
    background: linear-gradient(180deg, var(--white) 0%, #f4f7fa 100%);
}

.cp-wrapper {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.cp-wrapper.reverse {
    flex-direction: row-reverse;
}

.cp-image-box {
    width: 60%;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.cp-image-box img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cp-image-box:hover img {
    transform: scale(1.05);
}

/* Cartão Efeito Vidro */
.cp-glass-card {
    width: 48%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    padding: 60px 50px;
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 1);
    z-index: 2;
    margin-left: -8%;
    /* Cria a sobreposição da esquerda para a direita */
}

.cp-wrapper.reverse .cp-glass-card {
    margin-left: 0;
    margin-right: -8%;
    /* Cria a sobreposição da direita para a esquerda */
}

/* Lista com Ícones do Cartão */
.cp-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 40px;
}

.cp-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.cp-icon-wrap {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--blue-accent);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.3rem;
    box-shadow: 0 8px 20px rgba(46, 90, 153, 0.3);
}

/* CTA Footer Alternativo */
.cp-cta-section {
    padding: 60px 20px 100px;
    background: #f4f7fa;
}

.cp-cta-box {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--bg-color);
    border-radius: 40px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(27, 25, 45, 0.3);
}

.cp-cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: var(--blue-accent);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.6;
    z-index: 1;
}

.cp-cta-box::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: #1f3e78;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    z-index: 1;
}

/* Responsivo para os novos elementos */
@media (max-width: 1024px) {

    .cp-wrapper,
    .cp-wrapper.reverse {
        flex-direction: column;
    }

    .cp-image-box {
        width: 100%;
        height: 450px;
    }

    .cp-image-box img {
        height: 450px;
    }

    .cp-glass-card {
        width: 95%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: -100px;
        /* Sobrepõe para cima do telemóvel/tablet */
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .cp-hero-title {
        font-size: 2.5rem;
    }

    .cp-hero-content p {
        font-size: 1.05rem;
    }

    .cp-image-box {
        height: 350px;
    }

    .cp-image-box img {
        height: 350px;
    }

    .cp-glass-card h2 {
        font-size: 1.8rem !important;
    }

    .cp-cta-box h2 {
        font-size: 2rem !important;
    }
}

/* =========================================================
   14. DESIGN TIPOGRÁFICO E SEM IMAGENS (credito.html)
   ========================================================= */

/* Logotipo em Texto Substituto */
.text-logo {
    font-size: 1.8rem;
    color: var(--white);
    letter-spacing: 2px;
}

.text-logo strong {
    font-weight: 800;
    color: var(--blue-accent);
}

/* Hero Section (Apenas Tipografia e Cores) */
.typo-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at top right, #1c325c, #2a8eff);
    padding: 150px 20px 80px;
    color: var(--white);
}

.typo-hero h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.typo-hero .highlight {
    background: linear-gradient(90deg, #1c325c, #2a8eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.typo-hero p {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto 40px;
    color: #cbd5e1;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-outline {
    display: inline-block;
    padding: 15px 45px;
    background: transparent;
    color: var(--white);
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: 2px solid var(--white);
    cursor: pointer;
    transition: 0.3s;
}

.btn-outline:hover {
    background: var(--white);
    color: var(--bg-color);
    transform: scale(1.05);
}

/* Estrutura Limpa (Clean Layout) */
.clean-section {
    padding: 100px 20px;
    background: var(--white);
    color: #333;
}

.clean-section.bg-gray {
    background: #ffffff;
}

.max-width-900 {
    max-width: 900px;
    margin: 0 auto;
}

.mt-60 {
    margin-top: 60px;
}

.text-center {
    text-align: center;
}

/* Ícone de Cabeçalho da Secção */
.icon-header {
    font-size: 3rem;
    color: var(--bg-color);
    margin-bottom: 20px;
}

.icon-header.blue-icon {
    color: var(--blue-accent);
}

.clean-section h2 {
    font-size: 2.5rem;
    color: var(--bg-color);
    margin-bottom: 25px;
    line-height: 1.3;
}

.lead-text {
    font-size: 1.25rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 40px;
}

.section-subtitle {
    font-size: 1.8rem;
    color: var(--bg-color);
    margin-bottom: 40px;
}

/* Caixa de Citação (Quote Box) */
.quote-box {
    background: #f1f5f9;
    padding: 40px;
    border-radius: 20px;
    border-left: 5px solid var(--blue-accent);
    text-align: left;
    position: relative;
}

.quote-box.light-box {
    background: #f1f5f9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-left: none;
    border-top: 5px solid var(--blue-accent);
}

.quote-box i {
    font-size: 2rem;
    color: var(--blue-accent);
    opacity: 0.3;
    margin-bottom: 15px;
    display: block;
}

.quote-box p {
    font-size: 1.1rem;
    color: #475569;
    font-style: italic;
    line-height: 1.8;
}

/* Grids e Cartões Informativos */
.grid-4-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.grid-2-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.info-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s;
}

.bg-gray .info-card {
    background: #ffffff;
}

.info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(46, 90, 153, 0.1);
}

.info-card i {
    font-size: 2.5rem;
    color: var(--blue-accent);
    margin-bottom: 20px;
    display: block;
}

.info-card h4 {
    font-size: 1.3rem;
    color: var(--bg-color);
    margin-bottom: 15px;
}

.info-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

/* Cartões Horizontais */
.horizontal-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
    padding: 30px;
}

.horizontal-card .card-icon {
    background: #f1f5f9;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.horizontal-card .card-icon i {
    font-size: 1.5rem;
    margin: 0;
}

/* Tags de Categorias (Tipos de Crédito) */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.tag {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    max-width: 100%;
}

.tag i {
    color: var(--blue-accent);
    font-size: 1.2rem;
}

/* Ícones de Estatística / Benefícios */
.minimal-stat {
    padding: 20px;
}

.minimal-stat i {
    font-size: 3rem;
    color: var(--blue-accent);
    margin-bottom: 15px;
    display: block;
}

.minimal-stat strong {
    display: block;
    font-size: 1.2rem;
    color: var(--bg-color);
    margin-bottom: 10px;
}

.minimal-stat span {
    font-size: 0.95rem;
    color: #64748b;
}

.btn-large {
    font-size: 1.1rem !important;
    padding: 20px 60px !important;
}

/* Ajustes Mobile para o Novo Design */
@media (max-width: 768px) {
    .typo-hero h1 {
        font-size: 2.8rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .grid-2-cols {
        grid-template-columns: 1fr;
    }

    .horizontal-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* Grelha de 4 colunas perfeitamente alinhadas na horizontal */
.grid-4-horizontal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Responsividade: para que os cartões não fiquem esmagados em ecrãs mais pequenos */
@media (max-width: 1024px) {
    .grid-4-horizontal {
        grid-template-columns: repeat(2, 1fr);
        /* Passa a 2 em tablets */
    }
}

@media (max-width: 768px) {
    .grid-4-horizontal {
        grid-template-columns: 1fr;
        /* Passa a 1 coluna nos telemóveis */
    }
}

/* Layout Lado a Lado para o Cabeçalho das Secções */
.split-header-grid {
    display: grid;
    /* MUDANÇA: Dá muito mais espaço ao texto (1.5) do que à caixa (0.9) */
    grid-template-columns: 1.5fr 0.9fr;
    gap: 60px;
    /* MUDANÇA: Reduzimos o fosso no meio de 120px para 60px */
    align-items: start;
    max-width: 100%;
    margin: 0 auto;
}

.split-header-grid-reverse {
    display: grid;

    /* MUDANÇA AQUI:
       Antes estava 1.3fr (caixa muito larga) e 0.8fr (texto estreito).
       Ao mudares para 1fr 1fr, ficam exatamente com o mesmo tamanho (50/50).
       Se quiseres a caixa ainda mais pequena, tenta 0.8fr 1.2fr */
    grid-template-columns: 1fr 1.5fr;

    gap: 120px;
    align-items: start;
    max-width: 100%;
    margin: 0 auto;
}

/* Responsividade para a grelha invertida */
@media (max-width: 900px) {
    .split-header-grid-reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Responsividade: Passa para 1 coluna em ecrãs mais pequenos */
@media (max-width: 900px) {
    .split-header-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* =========================================================
   14. HERO SECTION COM IMAGEM FULLSCREEN (credito.html)
   ========================================================= */

.image-hero {
    position: relative;
    /* Necessário para posicionar o overlay escuro */
    height: 100vh;
    /* Ocupa 100% da altura do ecrã */
    width: 100%;
    display: flex;
    align-items: center;
    /* Centra o conteúdo verticalmente */
    justify-content: center;
    text-align: center;

    /* Configuração da Imagem de Fundo */
    background-image: url('credito.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Padding para afastar da navbar */
    padding: 100px 20px 0;
    overflow: hidden;
}

/* Camada Escura (Overlay) de 0.5 de opacidade */
.image-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Preto com 50% de transparência */
    z-index: 1;
    /* Fica acima da imagem, abaixo do texto */
}

/* Garante que o conteúdo fica acima da camada escura */
.hero-content {
    position: relative;
    z-index: 2;
    /* Fica acima do overlay */
    color: var(--white);
}

/* Ajustes Tipográficos para legibilidade sobre imagem escura */
.image-hero h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -1px;
    color: var(--white);
    /* Texto principal branco */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Sombra para destacar */
}

.image-hero .highlight {
    /* 1. Gradiente muito mais claro e luminoso (Azul celeste para Branco) */
    background: linear-gradient(90deg, #3e6fc9, #2a8eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* 2. O truque mágico: cria uma "aura" preta à volta das letras recortadas */
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.9));

    /* 3. Mantemos isto para evitar que o text-shadow normal estrague o efeito */
    text-shadow: none !important;
}

.image-hero p {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto 40px;
    color: #e2e8f0;
    /* Cinzento muito claro para suavizar */
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

/* Botões do Hero */
.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    z-index: 2;
}

/* Ajustes para Mobile */
@media (max-width: 768px) {
    .image-hero h1 {
        font-size: 2.8rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   CARTÕES: TIPOS DE CRÉDITO HABITAÇÃO (Exato como a Imagem)
   ========================================================= */

.types-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    max-width: 98%;

    /* MUDANÇA: Aumenta o primeiro valor (que era 70px) para 130px ou 150px */
    margin: 140px auto 0;
}

.type-card {
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;

    /* MUDANÇA: Aumentámos o último valor de 30px para 50px (dá mais espaço em baixo) */
    padding: 85px 20px 50px;

    /* MUDANÇA: Aumentámos de 280px para 310px para as caixas ficarem menos "apertadas" */
    min-height: 310px;
    border-radius: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(0, 0, 0, 0.636);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.type-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 45px rgba(46, 90, 153, 0.1);
}

/* --- A MAGIA DO ÍCONE SOBREPOSTO --- */
.type-icon {
    /* MUDANÇA: Posicionamento absoluto centralizado na linha do topo */
    position: absolute;
    top: -45px;
    /* Puxa exatamente metade da altura para cima (90/2=45) */
    left: 50%;
    transform: translateX(-50%);
    /* Centra matematicamente */

    /* MUDANÇA: Círculo maior e mais imponente (estilo imagem) */
    width: 90px;
    height: 90px;
    font-size: 2.1rem;

    background: #f1f5f9;
    color: var(--blue-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* MUDANÇA: Borda branca grossa (8px) para o efeito de "recorte" */
    border-color: #1c325c;
    border: 2px solid #1c325c;

    /* MUDANÇA: Sombra própria para o ícone (estilo imagem) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

    z-index: 2;
    /* Garante que fica por cima de tudo */
    transition: background 0.4s, color 0.4s;
}

/* Efeito Hover do Ícone */
.type-card:hover .type-icon {
    background: var(--blue-accent);
    color: var(--white);
}

.type-card h4 {
    font-size: 1.1rem;
    /* Mais sutil (estilo imagem) */
    color: var(--bg-color);
    margin-bottom: 12px;
    font-weight: 800;
}

.type-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* --- RESPONSIVIDADE JÁ INCLUÍDA --- */
@media (max-width: 1400px) {
    .types-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 95%;
        gap: 60px 25px;
        /* Mais espaço vertical para o overlap */
    }
}

@media (max-width: 850px) {
    .types-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 70px 0;
        /* No mobile precisam de muito espaço vertical */
    }
}

/* Efeito de Gradiente para textos em fundos claros */
.highlight-blue {
    background: linear-gradient(45deg, #2e5a99, #2a8eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline;
    /* Garante que o texto acompanha a frase naturalmente */
    font-weight: 800;
    /* Dá um pouco mais de "força" às palavras */
}



/* =========================================================
   15. ANIMAÇÕES PREMIUM (Sem alterar layout)
   ========================================================= */


/* 2. FLUTUAÇÃO SUAVE (Hero Content a "respirar") */
.hero-content {
    animation: floatHero 6s ease-in-out infinite;
}

@keyframes floatHero {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* 3. HOVER MAGNÉTICO (Caixas de Citação / Quote Boxes) */
.quote-box {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-box:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
}

.quote-box i {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}


/* 4. CARTÕES DE TIPOS DE CRÉDITO (Interação 3D e Pulso) */
.type-card {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.type-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 45px rgba(46, 90, 153, 0.15);
}

.type-card:hover .type-icon i {
    animation: pulseIcon 1.2s infinite;
    /* Ícone pulsa suavemente */
}

@keyframes pulseIcon {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* 5. VANTAGENS DE TRANSFERIR (Cartões Horizontais com Slide) */
.horizontal-card {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease;
}

.horizontal-card:hover {
    transform: translateX(12px);
    /* Desliza elegantemente para a direita */
    border-color: var(--blue-accent);
}

.horizontal-card .card-icon {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s ease;
}

.horizontal-card:hover .card-icon {
    transform: scale(1.1) rotate(10deg);
    background-color: var(--blue-accent);
}

.horizontal-card:hover .card-icon i {
    color: var(--white) !important;
}

/* 6. UPGRADE NAS ANIMAÇÕES DE SCROLL (Curva Apple-like) */
/* Isto torna as animações de entrada muito mais lentas e suaves no final do movimento */
.anima-slide-up,
.anima-slide-left,
.anima-slide-right {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    transition-duration: 1.2s !important;
}

/* =========================================================
   SECÇÃO COM IMAGEM REAL E CARTÕES FLUTUANTES
   ========================================================= */

#tipos-credito-imagem-real {
    position: relative;
    width: 100%;
    /* MUDANÇA: Reduzimos de 100px para 0 para encostar mais a secção acima. 
       Se quiseres subir AINDA MAIS, podes usar um valor negativo como -40px */
    margin-top: 0;
    min-height: 1200px;
}

.imagem-fundo-real {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* MUDANÇA: Mudámos de 'center bottom' para '80% bottom'. 
       Isto empurra a fotografia mais para a direita. Se quiseres puxar tudo ao máximo, escreve 'right bottom' */
    object-position: 38% bottom;
}

/* O teu overlay azul-petróleo */
.overlay-imagem-real {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 42, 63, );
    /* Podes aumentar o 0.4 se quiseres mais escuro */
    z-index: 1;
}

/* A grelha que levanta os cartões para cima da imagem */
.conteudo-flutuante {
    position: relative;
    z-index: 2;
    padding-top: 100px;
    /* MUDANÇA (A MAGIA): Cria uma enorme área vazia abaixo dos cartões para a imagem brilhar */
    padding-bottom: 400px;
}

/* =========================================================
   SECÇÃO: LISTA DE VANTAGENS (Texto Esq / Imagem Dir)
   ========================================================= */

/* A lista de textos */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
    /* Espaço entre cada um dos 4 pontos */
}

/* Cada item individual (Ícone + Texto) */
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* O bolinha do ícone */
.feature-icon {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    background: #f1f5f9;
    /* Fundo cinza clarinho */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--blue-accent);
    transition: transform 0.4s ease, background 0.4s ease;
}

/* Efeito ao passar o rato no texto (o ícone ganha vida) */
.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    background: var(--blue-accent);
    color: var(--white);
}

/* Formatação do texto */
.feature-text h4 {
    font-size: 1.3rem;
    color: var(--bg-color);
    margin-bottom: 8px;
    font-weight: 800;
    text-transform: none;
    /* Deixa as letras normais */
}

.feature-text p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* A moldura respeita as proporções da imagem sem cortar as laterais */
.image-wrapper-premium {
    position: relative;
    width: 100%;
    height: auto;
    min-height: auto;
    /* Removemos a altura forçada que causava o corte */

    overflow: hidden;
}

.image-wrapper-premium img {
    position: relative;
    /* A imagem passa a ditar a altura da caixa naturalmente */
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    /* Mostra a imagem inteira sem fazer "zoom" */
    display: block;
}

/* --- Responsividade (Ajustes para Telemóveis) --- */
@media (max-width: 900px) {

    /* MUDANÇA: Aumentamos a altura mínima no telemóvel para a imagem não ficar demasiado pequena */
    .image-wrapper-premium {
        min-height: 600px;
        /* Aumentado de 400px para 600px */
        margin-top: 20px;
    }
}

/* =========================================================
   HUB DE SIMULADORES (Grelha 8 Cartões Clicáveis)
   ========================================================= */

.mb-50 {
    margin-bottom: 50px;
}



/* Grelha de 4 Colunas */
.simuladores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1400px;

    /* A MAGIA AQUI: Em vez de '0 auto', colocamos 150px para afastar em cima e em baixo! */
    margin: 80px auto;

    padding: 0 20px;
}

/* Estilo do Cartão do Simulador (Agora é um Link gigante) */
.simulador-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid #b9b9b9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Para funcionar como um link limpo (sem texto azul nem sublinhados): */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    /* Sombra subtil e elegante (tipo "vidro") */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.simulador-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(46, 90, 153, 0.1);
    border-color: var(--blue-accent);
}

/* Ícones dos cartões */
.sim-icon {
    width: 70px;
    height: 70px;
    background: #f1f5f9;
    color: var(--blue-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.simulador-card:hover .sim-icon {
    background: var(--blue-accent);
    color: var(--white);
    transform: scale(1.1);
}

/* Textos */
.simulador-card h4 {
    font-size: 1.25rem;
    color: var(--bg-color);
    margin-bottom: 15px;
    font-weight: 800;
    text-transform: none;
}

.simulador-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* A nova setinha elegante no fundo do cartão */
.card-arrow {
    margin-top: auto;
    /* Empurra a seta sempre para o fundo da caixa */
    color: var(--blue-accent);
    font-size: 1.3rem;

    /* Estado inicial: Escondida e ligeiramente recuada para a esquerda */
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Quando passas o rato no cartão, a seta aparece e desliza para a direita */
.simulador-card:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- Responsividade --- */
@media (max-width: 1200px) {
    .simuladores-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 colunas em ecrãs médios */
    }
}

@media (max-width: 900px) {
    .simuladores-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas em tablets */
    }
}

@media (max-width: 600px) {
    .simuladores-grid {
        grid-template-columns: 1fr;
        /* 1 coluna no telemóvel */
    }
}

/* Imagem Exclusiva para o Hero da página de Simuladores */
.hero-simuladores {
    background-image: url('hero_simuladores.jpg') !important;

    /* AS REGRAS MÁGICAS PARA O ECRÃ INTEIRO: */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
    /* Obriga a ocupar 100% do ecrã de alto a baixo */
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
}

/* =========================================================
   AJUSTE DE TEXTO DO HERO (APENAS PARA TELEMÓVEL)
   ========================================================= */
@media (max-width: 768px) {
    .text-box-hero p {
        /* O valor normal era 1.2rem ou 1.3rem. Aqui podes reduzir à vontade! */
        font-size: 0.95rem !important;

        /* Opcional: Adiciona um bocadinho de margem lateral para o texto não colar aos limites do ecrã */
        padding: 0 15px;
        line-height: 1.5;
        /* Mantém as linhas com uma boa distância para leitura */
    }
}

/* =========================================================
   HERO DOS SIMULADORES (Alinhado à esquerda e sem overlay escuro)
   ========================================================= */

/* 1. Alinhar o bloco inteiro e o texto à esquerda */
.hero-simuladores {
    justify-content: flex-start !important;
    /* Puxa o conteúdo para a esquerda */
    text-align: left !important;
    /* Alinha as frases à esquerda */
}

/* 2. Garantir que os botões também encostam à esquerda (caso os coloques lá) */
.hero-simuladores .hero-buttons {
    justify-content: flex-start !important;
}

/* 3. Remover a camada escura (overlay) apenas nesta página */
.hero-simuladores::after {
    display: none !important;
    /* "Desliga" o filtro preto */
}

/* 4. Limitar a largura e empurrar o texto para a mesma posição do Sobre Nós */
.hero-simuladores .hero-content {
    max-width: 800px;

    /* MUDANÇA: Coloca os mesmos valores que usaste no Sobre Nós */
    margin-left: 80px;
    /* Antes estava 0 */
    margin-top: -30px;
    /* Antes estava -100px */
}

/* =========================================================
   CORES E SOMBRAS DO TÍTULO DOS SIMULADORES
   ========================================================= */

/* 1. Mudar a cor de "SIMULE O SEU CRÉDITO" e retirar a sombra */
.hero-simuladores h1 {
    /* Altera o código #1b192d para a cor exata que queres (ex: #000000 para preto) */
    color: #1b192d !important;

    /* Remove a sombra do texto normal */
    text-shadow: none !important;
}

/* 2. Mudar o degradê de "NUM INSTANTE" e retirar a aura escura */
.hero-simuladores .highlight {
    /* Altera as duas cores do degradê (Cor Inicial, Cor Final) */
    /* Exemplo atual: de Azul UpCrédito (#2e5a99) para Azul Claro (#4797ff) */
    background: linear-gradient(90deg, #1c325c, #2a8eff) !important;

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    /* Remove a sombra (o efeito glow escuro que criámos antes) */
    filter: none !important;
    text-shadow: none !important;
}

/* 3. Opcional: Se quiseres tirar a sombra também do texto pequeno ("Ferramentas práticas...") e mudar a cor dele */
.hero-simuladores p {
    color: #000000 !important;
    /* Cor do texto (ex: cinza escuro) */
    text-shadow: none !important;
    /* Remove a sombra */
}

/* =========================================================
   REMOVER TODAS AS SOMBRAS DO HERO PRINCIPAL (INDEX)
   ========================================================= */

/* 1. Remove a sombra das letras brancas (h1 e p) */
.text-box-hero h1,
.text-box-hero p {
    text-shadow: none !important;
}

/* 2. Remove o 'drop-shadow' escuro das palavras com degradê (POUPANÇA / FUTURO) */
.text-box-hero .blue-gradient-text {
    filter: none !important;
    text-shadow: none !important;
}

/* =========================================================
   PÁGINA DE CONTACTOS (Tema UpCrédito - Claro e Limpo)
   ========================================================= */

.contact-page {
    padding-top: 150px;
    padding-bottom: 80px;
}

.contact-header {
    margin-bottom: 60px;
}

.contact-container {
    display: flex;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
    /* Impede que uma caixa estique a outra no desktop */
}

/* Lado do Formulário (Transformado num Card Branco Premium) */
.contact-form-section {
    flex: 1;
    background: var(--white);
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

/* Lado da Informação */
.contact-info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-logo {
    width: 100%;
    max-width: 280px;
    align-self: flex-start;

    /* A MAGIA AQUI: Empurra o logo para a direita */
    margin-left: 150px;

    margin-bottom: 10px;
}

.info-details {
    text-align: left;
}

.info-details h3 {
    font-size: 1.1rem;
    color: var(--bg-color);
    /* Letra escura */
    margin-bottom: 5px;
    font-weight: 800;
}

.info-details p {
    font-size: 0.95rem;
    color: #555;
}

.info-item.central {
    margin-bottom: 25px;
}

.info-row {
    display: flex;
    justify-content: flex-start;
    gap: 60px;
}

/* Campos do Formulário no Tema Claro */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--bg-color);
    font-weight: 700;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: #f8fafc;
    /* Fundo cinza super clarinho */
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    padding: 14px 20px;
    color: #333;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232e5a99"><path d="M7 10l5 5 5-5z"/></svg>');
    /* Seta azul UpCrédito */
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px;
    padding-right: 45px;
}

.form-group select option {
    background-color: var(--white);
    color: #333;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--blue-accent);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(46, 90, 153, 0.1);
}

/* =========================================================
   CHECKBOXES PREMIUM E ANIMADAS
   ========================================================= */

/* Devolve a organização original da caixa */
.checkbox-group {
    margin-bottom: 25px;
}

/* Mantém o texto e a caixa alinhados, mas respeitando o teu layout original */
.checkbox-group label {
    display: inline-flex;
    /* Permite que fiquem lado a lado ou como estavam antes */
    align-items: center;
    gap: 12px;
    color: #64748b;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-right: 20px;
    /* Dá um espacinho se elas ficarem lado a lado */
    margin-bottom: 10px;
    font-weight: normal;
}

.checkbox-group label:hover {
    color: var(--bg-color);
    /* Escurece o texto ao passar o rato */
}

/* Esconder a caixa padrão do navegador e criar a nossa */
.checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    /* Cantos levemente redondos */
    background-color: var(--white);
    margin: 0;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-shrink: 0;
    /* Impede que a caixa fique esmagada se o texto for longo */
}

/* Brilho azul ao passar o rato */
.checkbox-group input[type="checkbox"]:hover {
    border-color: var(--blue-accent);
    box-shadow: 0 0 0 4px rgba(46, 90, 153, 0.15);
}

/* O "V" (check) desenhado com CSS puro (sem precisar de imagens) */
.checkbox-group input[type="checkbox"]::before {
    content: "";
    width: 13px;
    height: 13px;
    transform: scale(0);
    /* Começa invisível (encolhido) */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Efeito de mola */
    background-color: var(--white);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* Quando o utilizador clica (Checked) */
.checkbox-group input[type="checkbox"]:checked {
    background-color: var(--blue-accent);
    border-color: var(--blue-accent);
}

/* O "V" branco salta com animação */
.checkbox-group input[type="checkbox"]:checked::before {
    transform: scale(1.1);
}

/* --- Ajuste do Modal de Sucesso --- */
.modal-content {
    background: var(--white);
    border: none;
}

.modal-icon {
    color: var(--blue-accent);
}

.modal-content h3 {
    color: var(--bg-color);
}

.modal-content p {
    color: #555;
}

/* --- Responsividade da Página de Contactos --- */
@media (max-width: 900px) {
    .contact-container {
        flex-direction: column;
        gap: 50px;
    }

    .contact-form-section {
        padding: 30px 20px;
    }

    .info-row {
        flex-direction: column;
        gap: 20px;
    }

    .contact-logo {
        align-self: center;
        /* Centra o logo no telemóvel */
    }

    .info-details {
        text-align: center;
        /* Centra o texto no telemóvel */
    }

    .info-row {
        justify-content: center;
        align-items: center;
    }
}



/* =========================================================
   SOMBRA DE PROTEÇÃO DA NAVBAR (Para Vídeos e Imagens)
   ========================================================= */

/* Cria uma cortina de sombra que "nasce" da própria Navbar */
.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    /* Altura da sombra (desce um pouco além da navbar) */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: -1;
    /* Garante que fica atrás do logótipo e dos links */
    pointer-events: none;
    /* Deixa os cliques passarem pelos links sem problemas */
    transition: opacity 0.3s ease;
}

/* Quando dás scroll, a sombra desaparece suavemente */
.navbar.scrolled::before {
    opacity: 0;
}

/* =========================================================
   COR DO LINK SELECIONADO NA NAVBAR (ACTIVE)
   ========================================================= */

/* Muda a cor do link da página onde o utilizador está */
.nav-links a.active {
    color: #4797ff !important;
    /* Azul claro (podes mudar para a tua cor preferida) */
}

/* Já agora, se quiseres mudar a cor quando se passa o rato por cima (Hover) */
.nav-links a:hover {
    color: #2e5a99 !important;
    /* Azul UpCrédito */
}

/* =========================================================
   IMAGEM E ESTRUTURA DO HERO - PÁGINA SOBRE NÓS
   ========================================================= */
.hero-sobre {
    background-image: url('hero_sobre.jpg') !important;

    /* Preenche os lados todos */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    /* A CORREÇÃO ESTÁ AQUI: 100vh obriga a ocupar 100% do ecrã de alto a baixo! */
    min-height: 100vh !important;

    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

/* =========================================================
   TEXTO DO HERO - PÁGINA SOBRE NÓS (Estilo Simuladores)
   ========================================================= */

/* 1. Alinha o bloco à esquerda e tira a película escura */
.hero-sobre {
    justify-content: flex-start !important;
    text-align: left !important;
}

.hero-sobre::after {
    display: none !important;
}

/* 2. Limita a largura e empurra o texto para a posição correta */
.hero-sobre .hero-content {
    max-width: 800px;

    /* EMPURRAR PARA A DIREITA: Antes estava 0. Aumenta para 50px, 80px ou 100px */
    margin-left: 80px;

    /* EMPURRAR PARA BAIXO: Antes estava -100px (puxava muito para cima). 
       Tenta -30px, 0, ou até 50px se quiseres descer muito. */
    margin-top: -30px;
}

/* 3. Título Escuro e sem sombra */
.hero-sobre h1 {
    color: #1b192d !important;
    text-shadow: none !important;
    font-size: 5rem;
}

/* 4. Degradê mágico na palavra em destaque */
.hero-sobre .highlight {
    background: linear-gradient(90deg, #1c325c, #2a8eff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: none !important;
    text-shadow: none !important;
}

/* 5. Texto pequeno Escuro e sem sombra */
.hero-sobre p {
    color: #000000 !important;
    text-shadow: none !important;
}

/* =========================================================
   MENSAGENS DE ERRO DO FORMULÁRIO (Estilo JB Partners)
   ========================================================= */
.error-text {
    color: #e63946;
    /* Vermelho alerta suave */
    font-size: 0.8rem;
    margin-top: 5px;
    display: block;
    animation: fadeInError 0.3s ease;
    font-weight: 600;
}

/* Pinta a borda do campo de vermelho quando há erro */
.input-error {
    border-color: #e63946 !important;
}

@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   MODAL (POPUP) DE SUCESSO - TEMA UPCRÉDITO
   ========================================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(27, 25, 45, 0.85);
    /* Fundo escuro azulado */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.modal-overlay.mostrar {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--white);
    border: 1px solid var(--blue-accent);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.modal-overlay.mostrar .modal-content {
    transform: translateY(0) scale(1);
}

.modal-icon {
    font-size: 4rem;
    color: var(--blue-accent);
    margin-bottom: 15px;
    line-height: 1;
}

.modal-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--bg-color);
}

.modal-content p {
    color: #555;
    font-size: 1rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Quando passas o rato no cartão, o ícone lá dentro fica branco */
.simulador-card:hover .sim-icon i,
.simulador-card:hover .sim-icon {
    color: #ffffff !important;
    transition: color 0.3s ease;
    /* Torna a mudança de cor suave */
}

/* Força as letras a ficarem pretas quando passas o rato no botão outline */
.btn-outline:hover {
    color: #000000 !important;
    background-color: #ffffff !important;
    /* Garante que o fundo fica branco para contrastar */
}

/* --- AJUSTE RESPONSIVO PARA SECÇÕES DE TEXTO/IMAGEM --- */
@media (max-width: 768px) {

    /* Ajusta o título para não transbordar */
    #transferir h2,
    section h2 {
        font-size: 1.8rem !important;
        /* Diminui de 3rem para 1.8rem no mobile */
        line-height: 1.2 !important;
    }

    /* Ajusta o espaçamento interno (padding) */
    #transferir div[style*="padding: 10%"],
    section div[style*="padding: 10%"] {
        padding: 40px 20px !important;
        /* Em vez de 10%, usamos um espaço fixo e seguro */
    }

    /* Garante que o grid se porta bem */
    section[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        /* Força uma coluna única no mobile */
    }
}

/* --- OTIMIZAÇÃO PARA MOBILE (INDEX) --- */
@media (max-width: 768px) {

    /* 1. Força a secção de Início a ser uma coluna (Texto em cima, Imagem em baixo) */
    #inicio {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. REVERTE A ORDEM DA SECÇÃO TRANSFERIR: 
       No HTML a imagem vem primeiro, mas aqui forçamos o texto a ir para cima! */
    #transferir {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* 3. Ajusta o tamanho das fontes para não saírem do ecrã */
    #inicio h1 {
        font-size: 2.2rem !important;
    }

    #transferir h2 {
        font-size: 1.8rem !important;
    }

    /* 4. Corrige o Padding de 10% que esmaga o texto no telemóvel */
    #inicio div[style*="padding: 10%"],
    #transferir div[style*="padding: 10%"] {
        padding: 50px 20px !important;
    }

    /* 5. Ajusta a altura das imagens no mobile para não ocuparem o ecrã todo */
    #inicio div[style*="height: 100vh"],
    #transferir div[style*="height: 600px"] {
        height: 350px !important;
        min-height: 350px !important;
    }
}

/* --- OTIMIZAÇÃO DA SECÇÃO CONSULTORES --- */

/* 1. Título maior no Computador */
.partners-title {
    font-size: 3rem !important;
    /* Aumenta o tamanho para ficar mais destacado */
}

/* 2. Ajustes Exclusivos para Mobile */
@media (max-width: 768px) {

    .partners-title {
        font-size: 2.2rem !important;
        /* Fica grande mas cabe no ecrã */
        line-height: 1.2 !important;
        margin-bottom: 25px !important;
    }

    /* Muda o layout: em vez de lado a lado, fica um por baixo do outro */
    .partners-content {
        flex-direction: column !important;
        text-align: center;
        gap: 30px !important;
        padding: 0 15px !important;
        /* Garante que nada toca nas bordas do telemóvel */
    }

    .partners-text {
        font-size: 1.1rem !important;
    }

    /* Organiza o botão para não sair do ecrã */
    .partners-action {
        width: 100%;
    }

    .partners-action .btn-blue {
        display: inline-block;
        width: 100%;
        max-width: 280px;
        /* Largura perfeita para clicar com o dedo */
        margin: 0 auto;
    }
}

/* =========================================================
   ESTILO PREMIUM PARA O SLIDER DO SIMULADOR
   ========================================================= */
.slider-premium {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 10px;
    background: #e2e8f0;
    /* Cor da barra de fundo (cinza claro) */
    outline: none;
    margin: 20px 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Profundidade na barra */
}

/* A "bolinha" (Thumb) para Google Chrome, Safari e Edge */
.slider-premium::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--blue-accent);
    cursor: pointer;
    border: 4px solid var(--white);
    /* Borda branca grossa */
    box-shadow: 0 4px 12px rgba(46, 90, 153, 0.4);
    /* Sombra azulada elegante */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efeito ao passar o rato (Cresce) */
.slider-premium::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* A "bolinha" (Thumb) para o Firefox */
.slider-premium::-moz-range-thumb {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--blue-accent);
    cursor: pointer;
    border: 4px solid var(--white);
    box-shadow: 0 4px 12px rgba(46, 90, 153, 0.4);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider-premium::-moz-range-thumb:hover {
    transform: scale(1.15);
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: left !important;
    }

    .social-col {
        flex-direction: row;
        justify-content: center !important;
        /* Agora sim, os ícones vão para o centro! */
        margin-top: 40px;
        width: 100%;
        gap: 30px;
    }
}

/* --- ALINHAMENTO À ESQUERDA NO MOBILE (Secção Crédito) --- */
@media (max-width: 768px) {

    /* Reduz o excesso de margens laterais que estavam a empurrar o texto */
    .container {
        padding: 0 15px !important;
    }

    .clean-section {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Garante que todos os títulos e textos dentro dessa grelha colam à esquerda */
    .header-text-side h2,
    .header-text-side h3,
    .header-text-side p {
        text-align: left !important;
    }
}

/* --- CARTÕES MAIS COMPACTOS NO MOBILE (Tipos de Crédito) --- */
@media (max-width: 768px) {

    /* Encolhe a caixa principal */
    .type-card {
        min-height: 200px !important;
        /* Reduz bastante a altura */
        padding: 55px 15px 25px !important;
        /* Tira os excessos de espaço em cima e em baixo */
    }

    /* Encolhe a bolinha do ícone para não parecer desproporcional */
    .type-icon {
        width: 70px !important;
        height: 70px !important;
        top: -35px !important;
        /* Puxa para baixo para compensar o novo tamanho */
        font-size: 1.5rem !important;
        /* Reduz o tamanho do ícone */
    }

    /* Ajusta os textos para caberem de forma elegante */
    .type-card h4 {
        font-size: 1.05rem !important;
        margin-bottom: 8px !important;
    }

    .type-card p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
}

/* --- CARTÕES MAIS COMPACTOS E CORREÇÃO DA MARGEM NO MOBILE --- */
@media (max-width: 768px) {

    /* 1. Remove a altura gigante de 1200px do fundo */
    #tipos-credito-imagem-real {
        min-height: auto !important;
    }

    /* 2. Corta o espaço vazio de 400px debaixo dos cartões para apenas 100px */
    .conteudo-flutuante {
        padding-bottom: 100px !important;
    }

    /* (Mantém aqui o resto do código dos cartões que já tinhas colado) */
    .type-card {
        min-height: 200px !important;
        padding: 55px 15px 25px !important;
    }

    .type-icon {
        width: 70px !important;
        height: 70px !important;
        top: -35px !important;
        font-size: 1.5rem !important;
    }

    .type-card h4 {
        font-size: 1.05rem !important;
        margin-bottom: 8px !important;
    }

    .type-card p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
}

.conteudo-flutuante {
    padding-top: 80px !important;
    /* Ajusta este valor para o título descer no telemóvel */
    padding-bottom: 100px !important;
}









/* --- NOVA ORDEM MOBILE: TRANSFERÊNCIA DE CRÉDITO --- */
@media (max-width: 768px) {

    /* 1. Transforma a secção inteira num flexbox e FORÇA a ordem normal */
    #transferir {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Secção 1: "Reduza a sua prestação" (Fica no topo) */
    #transferir>.container {
        order: 1 !important;
        margin-bottom: 20px;
    }

    /* Garante que o TEXTO fica acima da CAIXA */
    .split-header-grid-reverse {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* 3. MAGIA CSS: Desfaz as caixas invisíveis para podermos misturar o simulador e os textos */
    #vantagens-transferir,
    #vantagens-transferir>.container,
    #vantagens-transferir .split-header-grid {
        display: contents !important;
    }

    /* 4. PROTEÇÃO DO SIMULADOR: Força a visibilidade e impede que desapareça */
    #simulasite-transfer {
        order: 2 !important;
        display: block !important;
        /* Obriga a mostrar o iframe */
        width: 100% !important;
        min-height: 600px !important;
        /* Impede que o Flexbox o esmague a 0px */
        margin-top: 10px !important;
        margin-bottom: 50px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* 5. O Texto das Vantagens vem depois do Simulador */
    #vantagens-transferir .text-side {
        order: 3 !important;
        margin-top: 0px;
        width: 100%;
    }

    /* 6. A Imagem continua no fundo */
    #vantagens-transferir .image-side {
        order: 4 !important;
        width: 100%;
    }

    /* 7. Desbloqueia a imagem para que mostre TUDO sem cortes */
    .image-wrapper-premium {
        min-height: auto !important;
        height: auto !important;
        position: relative !important;
        margin-top: 0 !important;
    }

    .image-wrapper-premium img {
        position: relative !important;
        height: auto !important;
        border-radius: 20px !important;
        display: block;
    }
}

/* =========================================================
   OTIMIZAÇÃO EXCLUSIVA MOBILE (PÁGINA INDEX)
   ========================================================= */
@media (max-width: 768px) {

    /* 1. Inverte a ordem na secção "REDUZA A SUA PRESTAÇÃO" 
       (Coloca o Texto em cima e a Imagem em baixo) */
    section[style*="background: white"] {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* 2. Alinha o título do simulador à esquerda */
    .form-section-new .main-title-centered {
        text-align: left !important;
        padding: 0 20px !important;
        font-size: 1.8rem !important;
    }

    /* 3. Alinha a secção de Consultores/Parceiros à esquerda */
    .partners-title {
        text-align: left !important;
        padding: 0 20px !important;
    }

    .partners-content {
        flex-direction: column !important;
        text-align: left !important;
        align-items: flex-start !important;
        padding: 0 20px !important;
        gap: 20px !important;
    }

    .partners-text {
        text-align: left !important;
        margin: 0 !important;
    }

    .partners-action {
        text-align: left !important;
        width: 100% !important;
    }

    .partners-action .btn-blue {
        margin: 0 !important;
        display: inline-block !important;
    }
}

/* =========================================================
   CONTROLO TOTAL DE CORES NO MOBILE (LINKS E HAMBÚRGUER)
   ========================================================= */
@media (max-width: 1024px) {

    /* 1. FORÇAR LETRAS SEMPRE BRANCAS: Anula a cor escura do desktop no scroll */
    .navbar.scrolled .nav-links a,
    .navbar .nav-links a,
    .nav-links a {
        color: #ffffff !important;
    }

    /* 2. DESTAQUE AZUL: Mantém a cor de destaque apenas quando o link está ativo */
    .navbar.scrolled .nav-links a.active,
    .navbar.scrolled .nav-links a:hover,
    .nav-links a.active {
        color: var(--blue-accent) !important;
    }

    /* 3. BARRAS NO SCROLL: Ficam escuras para se verem sobre a barra clara */
    .navbar.scrolled .hamburger span {
        background-color: var(--bg-color) !important;
    }

    /* 4. BARRAS NO MENU ABERTO: Voltam a ser brancas (o "X") */
    .navbar .menu-checkbox:checked~.hamburger span,
    .navbar.scrolled .menu-checkbox:checked~.hamburger span {
        background-color: #ffffff !important;
    }
}

/* =========================================================
   AJUSTES FINAIS MOBILE (PÁGINA SIMULADORES)
   ========================================================= */
@media (max-width: 768px) {

    /* 1. HERO: Ocupa o ecrã inteiro e configuração da imagem */
    .hero-simuladores {
        min-height: 100vh !important;
        /* Força a ocupar toda a altura do telemóvel */
        min-height: 100dvh !important;
        /* Melhor suporte para barras de navegação de telemóvel */
        display: flex !important;
        align-items: center !important;
        /* Centra o bloco de texto verticalmente no ecrã */
        justify-content: flex-start !important;
        padding: 0 !important;

        /* --- AJUSTE DE POSIÇÃO DA IMAGEM NO MOBILE --- 
           Para mover a imagem para a esquerda ou direita:
           Substitui o primeiro 'center' por 'left', 'right' ou uma percentagem (ex: 30%).
           O segundo valor controla o topo/baixo (ex: 'bottom').
        */
        background-position: 73% center !important;
    }

    /* 2. ALINHAMENTO DOS TEXTOS: Alinhados à esquerda com a mesma margem */
    .hero-simuladores .hero-content {
        margin-left: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
        text-align: left !important;

        /* Esta é a "distância" idêntica para os dois textos à esquerda */
        padding-left: 30px !important;
        padding-right: 20px !important;
    }

    /* 3. TÍTULO: Ajuste de tamanho para mobile */
    .hero-simuladores h1 {
        font-size: 2.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        /* Espaço entre o título e o parágrafo */
    }

    /* 4. PARÁGRAFO: Alinhado exatamente por baixo do título */
    .hero-simuladores p {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        /* MUDANÇA: Isto anula os 15px extra e alinha tudo na perfeição! */
    }
}

/* =========================================================
   ADICIONAR PELÍCULA BRANCA NO HERO (MOBILE)
   ========================================================= */
@media (max-width: 768px) {

    /* 1. Criar a película branca sobre a imagem */
    .hero-simuladores::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Branco com 40% de opacidade. 
           Podes aumentar para 0.6 se quiseres a película mais "grossa" */
        background-color: rgba(255, 255, 255, 0.4) !important;
        display: block !important;
        /* Reativa o overlay */
        z-index: 1;
    }

    /* 2. Garante que o texto salta para a frente da película */
    .hero-simuladores .hero-content {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Mantém os teus ajustes de alinhamento anteriores aqui dentro... */
    .hero-simuladores {
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background-position: 73% center !important;
        /* Ajusta aqui a posição da imagem */
    }
}

/* =========================================================
   AJUSTE DE TAMANHO: MANTER FORMATAÇÃO ORIGINAL (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Ataca o H1 e o SPAN (texto azul) mantendo o centro */
    .simulador-section h1,
    .simulador-section h1 span,
    header h1,
    header h1 span {
        font-size: 3rem !important;
        /* O tamanho que escolheste */
        line-height: 1.2 !important;
        /* Removido o text-align left para manter o centro original */
    }

    /* 2. Garante que o cabeçalho mantém a estrutura de centro do teu HTML */
    header[style*="text-align: center"],
    .simulador-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Mantém tudo centrado */
        justify-content: center !important;
        text-align: center !important;
        padding-top: 140px !important;
        /* Espaço para a navbar não tapar o texto */
    }

    /* 3. Ajusta o parágrafo para não ficar colado às bordas mas continuar centrado */
    .simulador-section p,
    header p {
        font-size: 1rem !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        text-align: center !important;
    }
}

/* =========================================================
   REMOVER PELÍCULA BRANCA DA PÁGINA PARCEIROS (MOBILE)
   ========================================================= */
@media (max-width: 768px) {

    /* Como a página parceiros partilha a classe hero-simuladores, 
       temos de forçar a película a desligar usando a classe hero-parceiros */
    .hero-parceiros::after {
        display: none !important;
        content: none !important;
        background: transparent !important;
    }
}

/* =========================================================
   PÁGINA PARCEIROS: VÍDEO FULLSCREEN E TEXTO CENTRADO
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. VÍDEO: Força o vídeo/overlay a parar no fim do ecrã (não vai para baixo) */
    .hero-parceiros .video-wrapper,
    .hero-parceiros .video-overlay {
        height: 100vh !important;
        height: 100dvh !important;
        /* Melhor suporte para browsers mobile */
    }

    /* 2. TEXTO DO TOPO: Ocupa o ecrã todo e centra o conteúdo no meio do vídeo */
    .hero-parceiros .text-box-hero {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* Centra verticalmente */
        align-items: center !important;
        /* Centra horizontalmente */
        text-align: center !important;
        padding: 80px 20px 0 !important;
        /* Espaço para a navbar */
        margin: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
    }



    /* 3. BOTÕES: Alinhados ao centro */
    .hero-parceiros .hero-btn-anim {
        justify-content: center !important;
        width: 100% !important;
        gap: 15px !important;
    }

    /* 4. BLOCO 45%: Aparece "fora" do vídeo com fundo escuro sólido */
    .hero-parceiros .hero-content-upcredito>div:last-child {
        background-color: var(--bg-color) !important;
        /* Azul escuro do site */
        width: 100% !important;
        margin: 0 !important;
        padding: 60px 20px !important;
        position: relative !important;
        z-index: 20 !important;
        text-align: center !important;
    }

    /* 5. RESET DO HERO: Garante que a secção cresce para acomodar o bloco de baixo */
    #parceria-hero {
        height: auto !important;
        min-height: 100vh !important;
    }
}

/* =========================================================
   REMOVER IMAGEM DE FUNDO NA PÁGINA PARCEIROS (MOBILE)
   ========================================================= */
@media (max-width: 768px) {
    .hero-parceiros {
        /* Remove a imagem de simuladores que estava a ser herdada */
        background-image: none !important;

        /* Garante que o fundo é a cor escura do teu site ou transparente */
        background-color: var(--bg-color) !important;
    }
}

/* =========================================================
   AJUSTES FINAIS: CENTRALIZAÇÃO E ESPAÇAMENTOS (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. HERO: Impede o texto de sair pelo lado direito e centra-o */
    .hero-parceiros .text-box-hero h1 {

        white-space: normal !important;
        /* OBRIGATÓRIO: Permite que o texto quebre linhas */
        word-wrap: break-word !important;
        font-size: 2.2rem !important;
        /* Tamanho ajustado para não transbordar */
        text-align: center !important;
        width: 100% !important;
        padding: 0 10px !important;
    }

    .hero-parceiros .text-box-hero {
        text-align: center !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 2. ESPAÇAMENTO: Reduz o buraco entre "Como Funciona" e o botão seguinte */
    /* Atacamos a secção que tem os 100px de margem no teu HTML */
    main section[style*="margin-bottom: 100px"] {
        margin-bottom: 30px !important;
        /* Reduz o espaço de 100px para apenas 30px */
    }

    /* 3. Ajuste extra para o botão "Falar com o gestor" subir mais um pouco */
    #comissao-explicacao {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }

    /* Garante que o texto da comissão (45%) continua centrado e organizado */
    .hero-parceiros .hero-content-upcredito>div:last-child {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* AJUSTE ESPECÍFICO DA SEGUNDA LINHA DO TÍTULO (MOBILE) */
@media screen and (max-width: 768px) {
    .hero-parceiros .text-box-hero h1 span.blue-gradient-text {
        /* Muda o 2.5rem para o tamanho que desejares. 
           Podes aumentar ou diminuir independentemente da primeira linha */
        font-size: 2.4rem !important;
        line-height: 1.1 !important;
        display: block !important;
        /* Garante que o gradiente ocupa a largura certa */
        white-space: normal !important;
    }
}

/* =========================================================
   AJUSTES DE ESPAÇAMENTO E ALINHAMENTO: PARCEIROS (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Aumentar espaço entre o texto descritivo e os botões do Hero */
    .hero-parceiros .text-box-hero p:last-of-type {
        margin-bottom: 60px !important;
        /* Aumentado de 40px para 60px */
    }

    /* 2. Centrar as caixas de Consultores/Imobiliárias e aumentar espaço para o botão */
    #comissao-explicacao>div:nth-of-type(1) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Centra as caixas horizontalmente */
        gap: 40px !important;
        /* Espaço entre as duas caixas */
        margin-bottom: 90px !important;
        /* Aumenta o espaço entre as caixas e o botão "Falar com o gestor" */
    }

    /* Garante que as caixas não ficam demasiado largas e mantêm a proporção ao centro */
    #comissao-explicacao>div:nth-of-type(1)>div {
        width: 100% !important;
        max-width: 360px !important;
        /* Largura ideal para centrar no telemóvel */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   ALINHAMENTO E ESPAÇAMENTO: DETALHES FINAIS PARCEIROS
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Alinhar à esquerda a secção "O que é a Parceria Intermediária?" */
    .hero-parceiros+main .container section:first-of-type {
        text-align: left !important;
    }

    .hero-parceiros+main .container section:first-of-type h2,
    .hero-parceiros+main .container section:first-of-type p {
        text-align: left !important;
        margin-left: 0 !important;
    }

    /* 2. Alinhar à esquerda o título e o texto "Potencialize os seus ganhos..." */
    #comissao-explicacao {
        text-align: left !important;
    }

    #comissao-explicacao h2,
    #comissao-explicacao p {
        text-align: left !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }

    /* 3. Corrigir o "colado": Espaçamento das caixas em relação ao topo e fundo */
    #comissao-explicacao>div:nth-of-type(1) {
        margin-top: 50px !important;
        /* Afasta a primeira caixa do texto acima */
        margin-bottom: 80px !important;
        /* Afasta a última caixa do botão abaixo */

        /* Mantém as caixas centradas entre si na coluna */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
    }
}

/* =========================================================
   AJUSTES DE DESTAQUE E PROXIMIDADE: PARCEIROS (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Aumentar o tamanho do título da secção de comissões */
    #comissao-explicacao h2 {

        line-height: 1.1 !important;
        margin-bottom: 15px !important;
    }

    /* 2. Diminuir o espaço entre esta secção e o Simulador de Ganhos */
    /* Reduzimos a margem inferior da secção de texto e a superior do simulador */
    #comissao-explicacao {
        margin-bottom: 20px !important;
        /* Reduzido drasticamente para aproximar */
        padding-bottom: 0 !important;
    }

    #simulador-ganhos {
        margin-top: 10px !important;
        /* Cola quase na secção anterior */
        padding-top: 40px !important;
    }

    /* 3. Ajuste fino do parágrafo intermédio */
    #comissao-explicacao p {
        margin-bottom: 30px !important;
        /* Menos espaço para o conteúdo subir */
    }
}

/* =========================================================
   ALINHAMENTO LATERAL PERFEITO: PARCEIROS (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Remove o padding lateral da secção para alinhar com o container global */
    #comissao-explicacao {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    /* 2. Garante que o título e o parágrafo encostam totalmente à esquerda */
    #comissao-explicacao h2,
    #comissao-explicacao p {
        text-align: left !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }

    /* 3. Ajuste do título para garantir que não há folgas */
    #comissao-explicacao h2 {
        text-transform: uppercase !important;
        font-size: 2.3rem !important;
        /* Mantém o tamanho grande que pediste */
        line-height: 1.1 !important;
    }
}

/* =========================================================
   ESPAÇAMENTO SIMÉTRICO NO BLOCO DOS 45% (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Define o padding exato e igual em cima e em baixo */
    .hero-parceiros .hero-content-upcredito>div:last-child {
        padding-top: 20px !important;
        /* Espaço do topo até ao título */
        padding-bottom: 40px !important;
        /* Espaço do botão até ao fundo da caixa */
    }

    /* 2. Ajusta a distância entre o texto "DE COMISSÃO" e o botão */
    .hero-parceiros .hero-content-upcredito>div:last-child p {
        margin-bottom: 30px !important;
    }

    /* 3. Remove margens do botão para que não some espaço extra no fundo */
    .hero-parceiros .hero-content-upcredito>div:last-child a.btn-outline {
        margin-bottom: 0 !important;
        display: inline-block !important;
    }
}

/* =========================================================
   REORGANIZAÇÃO: TÍTULO LOGO ACIMA DAS CAIXAS (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Transforma a secção num Flexbox para controlar a ordem */
    #comissao-explicacao {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. O parágrafo introdutório sobe para a primeira posição */
    #comissao-explicacao p {
        order: 1 !important;
        text-align: left !important;
        margin-bottom: 30px !important;
        padding-left: 0 !important;
    }

    /* 3. O Título principal desce para a segunda posição (logo acima das caixas) */
    #comissao-explicacao h2 {
        order: 2 !important;
        text-align: left !important;
        /* Centramos para alinhar com as caixas que estão centradas */
        margin-bottom: 20px !important;
        /* Espaço reduzido para ficar "em cima" das caixas */
        text-transform: uppercase !important;
        font-size: 2.2rem !important;
        /* Ajustado para não ser excessivo logo acima das caixas */
        width: 100% !important;
    }

    /* 4. O contentor das caixas (Consultores e Imobiliárias) */
    #comissao-explicacao>div:nth-of-type(1) {
        order: 3 !important;
        margin-top: 0 !important;
        /* Removemos a margem antiga para evitar buracos */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 5. O botão "Falar com o gestor" no final */
    #comissao-explicacao>div:nth-of-type(2) {
        order: 4 !important;
        margin-top: 40px !important;
    }
}

/* =========================================================
   REORGANIZAÇÃO FINAL: TÍTULO > TEXTO > CAIXAS (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Configura a secção para permitir a reordenação */
    #comissao-explicacao {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    /* 2. TÍTULO: Fica em 1.º lugar (Topo) */
    #comissao-explicacao h2 {
        order: 1 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        /* Mantém em maiúsculas */
        font-size: 2.2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 15px !important;
        /* Espaço curto para o parágrafo vir logo abaixo */
        padding-left: 0 !important;
        width: 100% !important;
    }

    /* 3. PARÁGRAFO: Fica em 2.º lugar (Por baixo do título) */
    #comissao-explicacao p {
        order: 2 !important;
        text-align: left !important;
        margin-bottom: 45px !important;
        /* Espaço maior para separar das caixas */
        padding-left: 0 !important;
        width: 100% !important;
        font-size: 1.1rem !important;
    }

    /* 4. CAIXAS DE COMISSÃO: Ficam em 3.º lugar */
    #comissao-explicacao>div:nth-of-type(1) {
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Mantém as caixas centradas no ecrã */
        margin-top: 0 !important;
    }

    /* 5. BOTÃO "FALAR COM O GESTOR": Fica em 4.º lugar (Fundo) */
    #comissao-explicacao>div:nth-of-type(2) {
        order: 4 !important;
        margin-top: 40px !important;
        text-align: center !important;
    }
}

/* =========================================================
   CORREÇÃO DO SIMULADOR DE GANHOS (BARRAS E TEXTOS)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Reduz o espaço vazio entre as 5 colunas para dar mais margem aos números */
    #simulador-ganhos>div:nth-of-type(2) {
        gap: 2px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* 2. Força todas as colunas a terem EXATAMENTE o mesmo tamanho */
    #simulador-ganhos>div:nth-of-type(2)>div {
        flex: 1 1 0 !important;
        /* A "mágica" que ignora a largura do texto */
        width: 0 !important;
    }

    /* 3. Ajusta o tamanho dos valores em euros para que os 5 dígitos caibam */
    #simulador-ganhos span[id^="ganho-"] {
        font-size: 0.75rem !important;
        letter-spacing: -0.5px !important;
        /* Junta ligeiramente os números */
        white-space: nowrap !important;
        /* Impede que o "€" caia para a linha de baixo */
    }

    /* 4. O valor dos 45% era muito grande no HTML, reduzimos um pouco aqui */
    #ganho-45 {
        font-size: 0.85rem !important;
    }
}

/* =========================================================
   PÁGINA SOBRE NÓS: ALINHAMENTO E POSIÇÃO DA IMAGEM (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. CONTROLO DA IMAGEM DE FUNDO E ALINHAMENTO GERAL */
    .hero-sobre {
        background-position: 68% center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
    }

    /* 2. ALINHAR O TEXTO E SUBIR O BLOCO (RESOLVIDO) */
    .hero-sobre .hero-content,
    .hero-sobre .text-box-hero {
        text-align: left !important;
        margin-left: 0 !important;

        /* A NOVA MAGIA PARA SUBIR O TEXTO: */
        position: relative !important;
        top: -80px !important;
        /* Muda para -100px ou -120px se quiseres ainda mais alto! */

        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 3. Forçar as letras a obedecerem à margem esquerda */
    .hero-sobre h1,
    .hero-sobre p,
    .hero-sobre .hero-title-anim {
        text-align: left !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* =========================================================
   REORDENAR IMAGEM UPCRÉDITO PARA O TOPO (APENAS MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Transformamos a secção principal num contentor flexível vertical */
    .sobre-section {
        display: flex !important;
        flex-direction: column !important;
        /* Empilha os elementos */
        align-items: flex-start !important;
        gap: 30px !important;
    }

    /* 2. A imagem (UPcrédito.png) passa para a primeira posição (Topo) */
    .sobre-imagem {
        order: 1 !important;
        width: 100% !important;
        text-align: left !important;
        justify-content: flex-start !important;
        margin-bottom: 20px !important;
    }

    /* Ajuste do tamanho da imagem no mobile para não ficar gigante */
    .sobre-imagem img {
        max-width: 200px !important;
        /* Ajuste este valor conforme preferir */
        height: auto !important;
    }

    /* 3. O bloco de texto passa para a segunda posição (Baixo) */
    .sobre-texto {
        order: 2 !important;
        text-align: left !important;
        width: 100% !important;
        padding-left: 20px !important;
        /* Mantém o alinhamento que definimos */
    }
}

/* =========================================================
   AJUSTE DE TAMANHO E ALINHAMENTO DA IMAGEM (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Garante que o contentor da imagem encosta à esquerda */
    .sobre-imagem {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        /* Alinha o conteúdo à esquerda */
        padding-left: 20px !important;
        /* MESMA DISTÂNCIA DO TEXTO */
        margin-bottom: 25px !important;
        text-align: left !important;
    }

    /* 2. Aumenta a imagem em 50% (de 200px para 300px) */
    .sobre-imagem img {
        width: 300px !important;
        /* Aumento de 50% aplicado */
        max-width: 100% !important;
        /* Segurança para não sair do ecrã */
        height: auto !important;
        margin-left: 0 !important;
        /* Garante que não há margens herdadas */
    }

    /* 3. Mantém o texto alinhado logo abaixo */
    .sobre-texto {
        order: 2 !important;
        padding-left: 20px !important;
        text-align: left !important;
    }
}

/* =========================================================
   PÁGINA CONTACTOS: DESCER TEXTO (SOLUÇÃO DEFINITIVA MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Ataca o cabeçalho específico da página de contactos */
    .contact-page .contact-header {
        position: relative !important;
        /* Aumenta este valor se quiseres que o "FALE CONNOSCO" desça ainda mais */
        margin-top: 100px !important;

        text-align: center !important;
        padding: 0 15px !important;
    }

    /* 2. Ajuste do título para não bater na Navbar */
    .contact-page h1 {
        font-size: 2.8rem !important;
        /* Ajuste para caber bem no ecrã */
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }

    /* 3. Ajuste do parágrafo logo abaixo */
    .contact-page .lead-text {
        font-size: 1rem !important;
        margin-bottom: 40px !important;
    }

    /* 4. Garante que o container principal não "esmaga" o topo */
    main.contact-page {
        padding-top: 60px !important;
        /* Respiro extra para a navbar */
    }
}

/* =========================================================
   PÁGINA CONTACTOS: CENTRAR LOGO (RESOLUÇÃO FINAL MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Atacamos o contentor que guarda a imagem e as informações */
    .contact-info-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* CENTRA TUDO: Logo, Morada, Email e Telefone */
        text-align: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        margin-top: 50px !important;
        /* Dá espaço após o formulário */
    }

    /* 2. Atacamos a imagem do logótipo diretamente */
    img.contact-logo {
        display: block !important;
        margin: 0 auto 30px auto !important;
        /* Centra e dá espaço para o texto de baixo */
        width: 200px !important;
        /* Tamanho ajustado */
        max-width: 80% !important;
        height: auto !important;
        /* Removemos o margin-left de 150px que tinhas no desktop */
        margin-left: auto !important;
    }

    /* 3. Garante que os blocos de morada e contactos também centram */
    .info-details,
    .info-row {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* =========================================================
   PÁGINA SOBRE NÓS: HERO FULL SCREEN (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {

    .hero-sobre {
        /* Força a secção a ter a altura total do ecrã do telemóvel */
        height: 100vh !important;
        min-height: 100vh !important;

        /* Garante que a imagem cobre tudo sem distorcer */
        background-size: cover !important;
        background-attachment: scroll !important;
        /* Melhor performance no mobile */
    }
}

/* Ajuste para o campo de telemóvel internacional */
.iti {
    width: 100% !important;
    /* Garante que ocupa a largura toda */
    margin-bottom: 0;
}

.iti__country-list {
    background-color: var(--white) !important;
    color: #333 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
}

/* Ajuste Mobile */
@media screen and (max-width: 768px) {
    .iti {
        margin-top: 5px;
    }
}

/* Força o campo internacional a aparecer e ocupar a largura toda */
.iti {
    display: block !important;
    width: 100% !important;
    margin-bottom: 25px !important;
}

.iti input {
    width: 100% !important;
    padding-left: 90px !important;
    /* Espaço para a bandeira e o prefixo */
}

/* Ajuste das cores da lista de países para o teu tema claro */
.iti__country-list {
    background-color: #ffffff !important;
    color: #333333 !important;
    z-index: 1000 !important;
}

/* =========================================================
   INDEX MOBILE: ALINHAMENTO TÍTULO E TEXTO
   ========================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. O título e a caixa principal recebem 20px para não baterem no ecrã */
    .partners-title, 
    .partners-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        text-align: left !important;
        margin-left: 0 !important;
    }

    /* 2. A MAGIA: Removemos qualquer margem extra do texto e do parágrafo 
       para não somar espaço e alinhar rigorosamente com o título */
    .partners-text,
    .partners-text p {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    /* Ajuste para não ficar um buraco muito grande entre o título e o texto */
    .partners-title {
        margin-bottom: 10px !important;
    }

    /* 3. Garante que a secção não tem margens que empurrem o texto */
    .partners-callout {
        padding: 40px 0 !important;
        margin-top: -180px !important; /* Mantém a subida que pediste */
    }
}

/* =========================================================
   PÁGINAS LEGAIS: AJUSTE DO TÍTULO E ESPAÇO (MOBILE)
   ========================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. Reduz o tamanho do texto "POLÍTICA DE PRIVACIDADE" */
    .legal-container .contact-header h1 {
        font-size: 2.9rem !important; /* Diminui de 4rem para 2.2rem */
        line-height: 1.2 !important;
        letter-spacing: 1px !important;
    }

    
}

/* =========================================================
   INDEX MOBILE: ALINHAMENTO DA SECÇÃO "TRANQUILIDADE FINANCEIRA"
   ========================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. Remove o espaço (padding) extra do título que o empurrava para a direita */
    .form-section-new .main-title-centered {
        text-align: left !important;
        padding-left: 0 !important; /* MATA O DEGRAU DO TÍTULO */
        padding-right: 0 !important;
        margin-left: 0 !important;
    }

    /* 2. Garante que os parágrafos e benefícios não têm margens residuais */
    .simulador-text-side,
    .simulador-text-side p,
    .simulador-text-side .blue-subtitle,
    .benefit-item {
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}