.hero {
    /*position: ;*/
    background: url('./assets/images/hero-image.jpg') center / cover no-repeat;
    /* altura FLUIDA + margens sup/inf ESTÁVEIS */
    /*min-height: clamp(440px, 46vw, 600px);*/
    padding-block: 40px; /* mantém as margens iguais no topo e em baixo */
    display: flex;
    align-items: center; /* centro vertical do overlay */
    isolation: isolate; /* robusto com elementos fixos acima */
    overflow: hidden;
}

/* O retângulo azul: escala por font-size do próprio cartão */
.hero-overlay {
    /* base para ESCALA de tudo dentro (logo, textos, padding) */
    font-size: clamp(12px, 1.1vw + 0.2rem, 18px);
    /* largura do cartão também fluida */
    width: clamp(220px, 34vw, 320px);
    /* deslocamento desde a esquerda mantendo o cartão centrado verticalmente */
    margin-left: clamp(16px, 6vw, 7.25rem);
    /* padding com top = bottom (igualmente dimensionados) */
    padding: 0.6em 1.0em;
    background: rgba(11, 62, 166, 0.50); /* só transparência */
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    /* centra conteúdo dentro do cartão */
    display: grid;
    justify-items: center;
    row-gap: 0.9em;
}

/* Logo e texto usam unidades relativas ao cartão (em) → escalam juntos */
.hero-logo {
    display: block;
    width: min(8em, 90%); /* reduz com o cartão; máx. ~220px quando 1em≈18px */
    /*height: auto;*/
    /*margin: 0 auto;*/
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.hero-slogan {
    margin: 0;
    text-align: center;
    color: #fff;
    font-weight: 500;
    line-height: 1.3;
    font-size: 1.2em; /* herda da escala do cartão */
    text-shadow: 0 3px 8px rgba(0,0,0,.55);
    -webkit-text-stroke: .4px rgba(0,0,0,.35);
}

/* anel circular como no logo antigo */
.hero-icon-wrap {
    width: min(10em, 60%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 6px solid #fff;
    display: grid;
    place-items: center;
}

/* ícone Bootstrap em branco, dimensionado */
.hero-icon {
    font-size: clamp(38px, 8vw, 90px);
    line-height: 1;
    color: #fff;
}

/* texto maior e centrado */
.hero-slogan {
    margin: 0;
    text-align: center;
    color: #fff;
    font-weight: 400;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
    -webkit-text-stroke: .4px rgba(0,0,0,.35);
}

/* variação “big” para este card */
.hero-slogan--big {
    font-size: clamp(18px, 2.6vw, 28px);
    font-weight: 700;
    letter-spacing: .2px;
}

/* ===== Small tweaks ===== */
@media (max-width: 575.98px) {
    /* 1) hero com padding igual em todos os lados */
    .hero {
        --hero-pad: 16px; /* controla a margem externa */
        padding: var(--hero-pad);
    }

    /* 2) imagem alinhada à direita + overlay centrado */
    .hero-media {
        background-position: right center;
        display: flex;
        align-items: center;
        justify-content: center; /* centra horizontalmente o cartão */
    }
    /* se não usares .hero-media e a imagem está na .hero */
    .hero:not(.hero-media) {
        background-position: right center;
    }

    /* 3) cartão menor e perfeitamente centrado */
    .hero-overlay {
        /* centro exato: margens esquerda/direita ficam iguais ao padding do hero */
        margin: 0 auto; /* centra em conjunto com a largura abaixo */
        width: min(520px, calc(100% - (var(--hero-pad) * 2)));
        box-sizing: border-box;
        font-size: clamp(12px, 3.4vw, 15px);
        padding: 1.2em 1.6em;
        border-radius: 12px;
    }

    .hero-logo {
        width: min(60%, 160px);
    }
    .hero-icon-wrap {
        width: min(10.5em, 68%);
    }

    .hero-icon {
        font-size: clamp(44px, 12vw, 86px);
    }
}