/* FONTE */

@font-face {
    font-family: "Montserrat";

    src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");

    font-style: normal;

    font-weight: 100 900;

    font-display: swap;
}


/* RESET */

* {
    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


html {
    width: 100%;

    font-size: 16px;

    scroll-behavior: smooth;
}


body {
    width: 100%;

    min-height: 100%;

    margin: 0;

    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}


img {
    display: block;

    max-width: 100%;
}


a {
    color: inherit;
}


button,
input {
    font-family: inherit;
}


button {
    cursor: pointer;
}


/* ACESSIBILIDADE */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* CONFIGURAÇÃO GERAL */

.page {
    width: 100%;

    min-height: 100vh;

    overflow-x: hidden;

    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}


.page-pt {
    background-color: #FFFFFF;
}


.page-en {
    background-color: #085E82;

    color: #FFFFFF;
}


/* SECÇÃO 1 HERO */

.hero-section {
    width: 100%;

    background-color: #FFFFFF;
}


/* CABEÇALHO DO HERO */

.hero-header {
    width: 100%;

    height: 76px;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    padding-left: 4%;
    padding-right: 4%;

    background-color: #FFFFFF;
}


.hero-header-spacer {
    width: 100%;
}


.hero-symbol {
    display: block;

    width: 42px;
}


.hero-symbol img {
    width: 100%;

    height: auto;
}


/* IDIOMA */

.hero-language {
    justify-self: end;

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    line-height: 1;

    font-weight: 400;

    color: #085E82;
}


.hero-language a {
    color: #085E82;

    text-decoration: none;
}


.hero-language a.active {
    text-decoration: underline;

    text-underline-offset: 3px;
}


.hero-language a:hover,
.hero-language a:focus {
    opacity: 0.7;
}


/* IMAGEM PRINCIPAL */

.hero-image {
    position: relative;

    width: 100%;

    height: calc(100vh - 76px);

    min-height: 550px;

    overflow: hidden;
}


.hero-image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background-color: #000000;
}


.hero-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    background-color: #000000;
}


.hero-image-text {
    position: absolute;

    left: 50%;
    top: 52%;

    transform: translate(-50%, -50%);

    width: 100%;

    padding-left: 4%;
    padding-right: 4%;

    text-align: center;

    font-size: clamp(70px, 9vw, 122px);

    line-height: 0.95;

    font-weight: 400;

    letter-spacing: -0.045em;

    color: #FFFFFF;

    white-space: nowrap;
}


/* SECÇÃO 2 APRESENTAÇÃO */

.about-section {
    width: 100%;

    min-height: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(380px, 0.92fr);

    align-items: center;

    gap: clamp(60px, 7vw, 120px);

    padding:
        70px clamp(60px, 9vw, 125px);

    background-color: #FFFFFF;

    color: #575757;
}


/* CONTEÚDO DA SECÇÃO 2 */

.about-content {
    width: 100%;

    max-width: 570px;

    justify-self: end;
}


.about-logo {
    width: min(100%, 265px);

    margin-bottom: 50px;
}


.about-title {
    margin-bottom: 20px;

    font-size: clamp(17px, 1.45vw, 21px);

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: 0.025em;

    color: #555555;
}


.about-text {
    font-size: clamp(13px, 1.05vw, 15px);

    line-height: 1.45;

    font-weight: 400;

    letter-spacing: 0.02em;

    color: #606060;
}


.about-text p {
    margin-bottom: 22px;
}


.about-text strong {
    font-weight: 500;
}


.about-final {
    margin-top: 8px;

    font-size: clamp(17px, 1.45vw, 21px);

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.025em;

    color: #555555;
}


/* IMAGEM SECÇÃO 2 */

.about-image {
    width: 100%;

    display: flex;

    justify-content: flex-start;

    align-items: center;
}


.about-image img {
    width: min(100%, 475px);

    height: min(72vh, 540px);

    object-fit: cover;

    object-position: center;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}


/* SECÇÃO 3 CONTACTOS */

.contact-section {
    width: 100%;
}


/* BLOCO AMARELO */

.contact-heading {
    width: 100%;

    min-height: 238px;

    display: flex;

    align-items: center;

    background-color: #F3AD2E;

    color: #FFFFFF;
}


.contact-heading-inner {
    width: min(100%, 1100px);

    margin: 0 auto;

    padding-left: 20px;

    padding-right: 20px;
}


.contact-heading h2 {
    font-size: clamp(28px, 2.5vw, 32px);

    line-height: 1.07;

    font-weight: 700;

    letter-spacing: 0.02em;
}


/* BLOCO VERMELHO */

.contact-body {
    width: 100%;

    background-color: #D95454;

    color: #FFFFFF;
}


.contact-grid {
    width: min(100%, 1100px);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: clamp(80px, 12vw, 180px);

    padding:
        52px 20px 64px;
}


.contact-column {
    min-width: 0;
}


.contact-eyebrow {
    margin-bottom: 14px;

    font-size: clamp(13px, 1.05vw, 15px);

    line-height: 1.45;

    font-weight: 400;

    letter-spacing: 0.02em;
}


.contact-column h3 {
    margin-bottom: 18px;

    font-size: clamp(26px, 2.35vw, 31px);

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: 0.01em;
}


.contact-description {
    margin-bottom: 18px;

    font-size: clamp(13px, 1.05vw, 15px);

    line-height: 1.45;

    font-weight: 400;

    letter-spacing: 0.02em;
}


/* FORMULÁRIO */

.interest-form {
    width: 100%;

    max-width: 425px;

    margin-top: 22px;
}


.interest-form>input,
.email-field {
    width: 100%;

    height: 35px;

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 20px;

    background-color: transparent;
}


.interest-form>input {
    display: block;

    margin-bottom: 14px;

    padding-left: 17px;

    padding-right: 17px;

    color: #FFFFFF;

    outline: none;
}


.interest-form input::placeholder {
    color: rgba(255, 255, 255, 0.95);

    opacity: 1;

    font-size: 12px;

    font-weight: 400;
}


.email-field {
    display: flex;

    align-items: stretch;

    overflow: hidden;
}


.email-field input {
    min-width: 0;

    flex: 1;

    border: 0;

    background: transparent;

    padding-left: 17px;

    color: #FFFFFF;

    outline: none;
}


.interest-submit {
    flex: 0 0 125px;

    border: 0;

    background-color: #FFFFFF;

    color: #D95454;

    font-size: 12px;

    font-weight: 600;
}


.interest-submit:hover,
.interest-submit:focus {
    background-color: rgba(255, 255, 255, 0.88);
}


.interest-message {
    min-height: 18px;

    margin-top: 12px;

    color: #FFFFFF;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 400;
}


.interest-submit:disabled {
    cursor: default;

    opacity: 0.7;
}

.interest-consent {
    margin-top: 15px;

    max-width: 425px;

    font-size: 10px;

    line-height: 1.45;

    color: rgba(255, 255, 255, 0.9);
}


.interest-consent label {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    cursor: pointer;
}


.interest-consent input {
    flex: 0 0 auto;

    margin-top: 2px;
}


.interest-consent a {
    color: #FFFFFF;

    text-decoration: underline;
}


/* EMAIL COMERCIAL */

.commercial-email {
    display: inline-block;

    margin-top: 2px;

    color: #FFFFFF;

    font-size: clamp(13px, 1.05vw, 15px);

    line-height: 1.4;

    font-weight: 600;

    letter-spacing: 0.02em;

    text-decoration: none;

    text-transform: uppercase;
}


.commercial-email:hover,
.commercial-email:focus {
    text-decoration: underline;
}


/* SECÇÃO 4 FOOTER */

.site-footer {
    width: 100%;

    background-color: #085E82;

    color: #FFFFFF;
}


.site-footer-inner {
    width: min(100%, 1100px);

    margin: 0 auto;

    padding:
        62px 20px 24px;
}


/* LINHAS */

.site-footer-line {
    width: 100%;

    height: 1px;

    background-color: rgba(255, 255, 255, 0.65);
}


/* LOGÓTIPOS DO FOOTER */

.site-footer-logos {
    width: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 34px;

    padding-top: 20px;
    padding-bottom: 20px;
}


/* Cada metade */

.site-footer-logo-group {
    display: flex;

    align-items: center;

    min-width: 0;
}


/* Grupo esquerdo */

.site-footer-logo-group-left {
    width: 50%;

    max-width: 520px;

    justify-content: flex-end;
}


/* Grupo direito */

.site-footer-logo-group-right {
    width: 50%;

    max-width: 520px;

    justify-content: flex-start;
}


/* Imagens */

.site-footer-logo-group img {
    display: block;

    width: 100%;

    height: auto;
}


/* Separador vertical */

.site-footer-logo-separator {
    flex: 0 0 1px;

    width: 1px;

    height: 68px;

    background-color: rgba(255, 255, 255, 0.70);
}


/* TEXTO DO FOOTER */

.site-footer-text {
    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px 9px;

    padding-top: 20px;

    text-align: center;

    font-size: 11px;

    line-height: 1.45;

    font-weight: 300;

    letter-spacing: 0.01em;

    color: rgba(255, 255, 255, 0.78);
}


.site-footer-text a {
    color: inherit;

    text-decoration: none;
}


.site-footer-text a:hover,
.site-footer-text a:focus {
    color: #FFFFFF;

    text-decoration: underline;
}


.site-footer-text a:nth-of-type(n + 2) {
    text-decoration: underline;
}


/* BOTÃO DEFINIÇÕES DE COOKIES NO FOOTER */

.cookie-settings-button {
    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    text-decoration: underline;

    cursor: pointer;
}


.cookie-settings-button:hover,
.cookie-settings-button:focus {
    color: #FFFFFF;
}


/* BANNER DE COOKIES */

.cookie-banner {
    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 9999;

    width: 100%;

    padding: 20px 5%;

    background-color: #FFFFFF;

    color: #222222;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}


.cookie-banner[hidden] {
    display: none !important;
}


/* CONTEÚDO DO BANNER */

.cookie-content {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;
}


/* TEXTO DO BANNER */

.cookie-text {
    flex: 1;

    min-width: 0;
}


.cookie-title {
    margin: 0 0 7px 0;

    color: #222222;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;
}


.cookie-text p:not(.cookie-title) {
    margin: 0;

    color: #222222;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 400;
}


/* BOTÕES DO BANNER */

.cookie-buttons {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


.cookie-button {
    display: inline-flex;

    justify-content: center;

    align-items: center;

    min-height: 38px;

    padding: 10px 17px;

    border: 1px solid #222222;

    font-family: "Montserrat", Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;

    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}


.cookie-button-accept {
    background-color: #222222;

    color: #FFFFFF;
}


.cookie-button-reject {
    background-color: #FFFFFF;

    color: #222222;
}


.cookie-button-settings {
    background-color: #FFFFFF;

    color: #222222;
}


.cookie-button:hover,
.cookie-button:focus {
    opacity: 0.8;
}


/* TABLET */

@media (max-width: 900px) {


    /* HERO */

    .hero-header {
        height: 65px;

        padding-left: 5%;

        padding-right: 5%;
    }


    .hero-symbol {
        width: 37px;
    }


    .hero-image {
        width: 100%;
        aspect-ratio: 16 / 9;
    }


    .hero-image-text {
        font-size: clamp(55px, 10vw, 90px);
    }


    /* SECÇÃO 2 */

    .about-section {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 50px;

        padding:
            70px 9%;
    }


    .about-content {
        max-width: 650px;

        justify-self: center;
    }


    .about-logo {
        width: min(60%, 260px);

        margin-bottom: 40px;
    }


    .about-image {
        justify-content: center;
    }


    .about-image img {
        width: min(100%, 600px);

        height: auto;

        aspect-ratio: 0.88 / 1;

        object-fit: cover;
    }


    /* SECÇÃO 3 */

    .contact-heading-inner,
    .contact-grid {
        width: 82%;
    }


    .contact-grid {
        grid-template-columns: 1fr;

        gap: 55px;

        padding-left: 0;

        padding-right: 0;
    }


    .interest-form {
        max-width: 520px;
    }


    /* FOOTER */

    .site-footer-inner {
        width: 90%;

        padding-left: 0;

        padding-right: 0;
    }

    .site-footer-logos {
        gap: 24px;
    }


    .site-footer-logo-group-left,
    .site-footer-logo-group-right {
        width: 48%;
    }


    .site-footer-logo-separator {
        height: 55px;
    }


    /* COOKIES */

    .cookie-banner {
        padding: 18px 5%;
    }


    .cookie-content {
        gap: 20px;
    }


    .cookie-title {
        font-size: 15px;
    }


    .cookie-text p:not(.cookie-title) {
        font-size: 12px;
    }


    .cookie-button {
        min-height: 36px;

        padding: 9px 14px;

        font-size: 11px;
    }

}


/* MOBILE */

@media (max-width: 600px) {


    /* HERO HEADER */

    .hero-header {
        height: 58px;

        padding-left: 6%;

        padding-right: 6%;
    }


    .hero-symbol {
        width: 33px;
    }


    .hero-language {
        gap: 6px;

        font-size: 10px;
    }


    /* HERO */


    .hero-image {
        width: 100%;

        height: auto;
        min-height: 0;

        aspect-ratio: 16 / 9;

        overflow: hidden;

        background-color: #000000;
    }


    .hero-video {
        display: block;

        width: 100%;
        height: auto;

        aspect-ratio: 16 / 9;

        object-fit: contain;
        object-position: center;

        background-color: #000000;
    }


    .hero-image-text {
        top: 52%;

        font-size: clamp(40px, 13vw, 64px);

        line-height: 1;

        white-space: normal;
    }


    /* SECÇÃO 2 */

    .about-section {
        padding:
            55px 8%;
    }


    .about-logo {
        width: min(75%, 235px);

        margin-bottom: 35px;
    }


    .about-title {
        margin-bottom: 20px;

        font-size: 17px;

        line-height: 1.2;
    }


    .about-text {
        font-size: 13px;

        line-height: 1.5;
    }


    .about-text br {
        display: none;
    }


    .about-text p {
        margin-bottom: 18px;
    }


    .about-final {
        margin-top: 10px;

        font-size: 17px;
    }


    .about-image img {
        width: 100%;

        height: auto;

        aspect-ratio: 0.88 / 1;
    }


    /* SECÇÃO 4 - AMARELO */

    .contact-heading {
        min-height: 190px;
    }


    .contact-heading-inner {
        width: 84%;

        padding-left: 0;

        padding-right: 0;
    }


    .contact-heading h2 {
        font-size: 26px;
    }


    /* SECÇÃO 4 - VERMELHO */

    .contact-grid {
        width: 84%;

        gap: 50px;

        padding-top: 45px;

        padding-bottom: 55px;
    }


    .contact-column h3 {
        font-size: 25px;
    }

    .contact-eyebrow,
    .contact-description {
        font-size: 13px;
        line-height: 1.65;
    }


    .contact-eyebrow,
    .contact-description,
    .commercial-email {
        font-size: 13px;
    }


    .contact-description br {
        display: none;
    }


    /* FORM */

    .interest-form {
        max-width: 100%;
    }


    .email-field {
        height: auto;

        min-height: 38px;
    }


    .interest-submit {
        flex-basis: 115px;

        font-size: 10px;
    }


    /* FOOTER */

    .site-footer-inner {
        width: 88%;

        padding-top: 42px;

        padding-bottom: 24px;
    }




    .site-footer-text {
        gap: 5px 7px;

        padding-top: 18px;

        font-size: 9px;

        line-height: 1.55;
    }

    .site-footer-logos {
        flex-direction: column;

        gap: 22px;

        padding-top: 24px;
        padding-bottom: 24px;
    }


    .site-footer-logo-group-left,
    .site-footer-logo-group-right {
        width: 100%;

        max-width: 500px;

        justify-content: center;
    }


    .site-footer-logo-group-left img,
    .site-footer-logo-group-right img {
        width: 100%;

        height: auto;
    }


    /* No mobile o separador deixa de ser vertical e passa a horizontal. */

    .site-footer-logo-separator {
        width: 70%;

        height: 1px;

        flex: 0 0 1px;

        background-color: rgba(255, 255, 255, 0.45);
    }


    /* COOKIE BANNER */

    .cookie-banner {
        padding: 16px 6%;
    }


    .cookie-content {
        flex-direction: column;

        align-items: stretch;

        gap: 15px;
    }


    .cookie-title {
        font-size: 14px;
    }


    .cookie-text p:not(.cookie-title) {
        font-size: 12px;

        line-height: 1.45;
    }


    .cookie-buttons {
        width: 100%;

        justify-content: flex-start;

        gap: 8px;

        flex-wrap: wrap;
    }


    .cookie-button {
        min-height: 35px;

        padding: 9px 13px;

        font-size: 11px;
    }

}


/* MOBILE PEQUENO */

@media (max-width: 360px) {


    .hero-header {
        height: 54px;
    }


    .hero-symbol {
        width: 30px;
    }


    .hero-image-text {
        font-size: 38px;
    }


    .about-section {
        padding-left: 7%;

        padding-right: 7%;
    }


    .about-title {
        font-size: 16px;
    }


    .about-text {
        font-size: 12px;
    }


    .about-final {
        font-size: 16px;
    }


    .contact-heading-inner,
    .contact-grid {
        width: 86%;
    }


    .contact-heading h2 {
        font-size: 23px;
    }


    .contact-column h3 {
        font-size: 22px;
    }


    .site-footer-inner {
        width: 90%;
    }


    .site-footer-text {
        font-size: 8px;
    }


    .cookie-banner {
        padding: 14px 5%;
    }


    .cookie-title {
        font-size: 13px;
    }


    .cookie-text p:not(.cookie-title) {
        font-size: 11px;
    }


    .cookie-buttons {
        gap: 6px;
    }


    .cookie-button {
        padding: 8px 10px;

        font-size: 10px;
    }

}


/* ECRÃS MUITO GRANDES */

@media (min-width: 2200px) {


    .hero-header {
        height: 90px;
    }


    .hero-symbol {
        width: 48px;
    }


    .hero-image {
        height: calc(100vh - 90px);
    }


    .about-section {
        padding-left: 14%;

        padding-right: 14%;
    }


    .about-content {
        max-width: 620px;
    }


    .about-image img {
        width: 540px;

        height: 610px;
    }


    .contact-heading-inner,
    .contact-grid,
    .site-footer-inner {
        max-width: 1300px;
    }


    .site-footer-text {
        font-size: 12px;
    }

}






/* FAIXA DEBAIXO DO HERO */

.hero-links-bar {
    width: 100%;

    min-height: 112px;

    display: flex;

    align-items: center;

    background-color: #F7F7F7;

    border-bottom:
        1px solid rgba(0, 0, 0, 0.08);

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08);

    color: #555555;
}


.hero-links-inner {
    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;

    padding:
        27px 4.2%;
}


/* LADO ESQUERDO*/

.hero-links-content {
    min-width: 0;

    flex: 1;
}


.hero-links-title {
    margin:
        0 0 4px;

    color: #555555;

    font-size: 14px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: 0.01em;
}


.hero-links-discover {
    display: inline;

    color: #555555;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 400;

    letter-spacing: 0.01em;

    text-decoration: none;
}


/* HOVER 1 */

.hero-links-discover:hover,
.hero-links-discover:focus-visible {
    color: #555555;

    text-decoration: underline;

    text-underline-offset: 2px;
}


.hero-links-arrow {
    display: inline-block;

    margin-left: 3px;

    font-size: 18px;

    line-height: 1;

    vertical-align: -1px;
}


/* YOUTUBE */

.hero-links-youtube {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 14px;
}


/* TEXTO YOUTUBE */

.hero-youtube-text {
    color: #555555;

    font-size: 11px;

    line-height: 1.35;

    font-weight: 400;

    letter-spacing: 0.025em;

    text-align: right;

    text-decoration: none;
}


/* HOVER 2 - IGUAL AO HOVER 1 */

.hero-youtube-text:hover,
.hero-youtube-text:focus-visible {
    color: #555555;

    text-decoration: underline;

    text-underline-offset: 2px;
}


/* BOTÃO YOUTUBE */

.hero-youtube-button {
    flex: 0 0 auto;

    display: block;

    width: 33px;

    height: 23px;

    color: #D95454;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


.hero-youtube-button svg {
    display: block;

    width: 100%;

    height: 100%;
}


/* HOVER 3 */

.hero-youtube-button:hover,
.hero-youtube-button:focus-visible {
    color: #5C5C5C;
}


.hero-youtube-button:focus-visible,
.hero-links-discover:focus-visible,
.hero-youtube-text:focus-visible {
    outline:
        2px solid #085E82;

    outline-offset: 3px;
}


/* TABLET */

@media (max-width: 900px) {

    .hero-links-inner {
        gap: 35px;

        padding:
            24px 5%;
    }


    .hero-links-title {
        font-size: 12px;
    }


    .hero-links-discover {
        font-size: 12px;
    }


    .hero-youtube-text {
        font-size: 10px;
    }


    .hero-youtube-button {
        width: 31px;

        height: 22px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .hero-links-bar {
        min-height: 0;
    }


    .hero-links-inner {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        padding:
            25px 6%;
    }


    .hero-links-title {
        margin-bottom: 7px;

        font-size: 12px;

        line-height: 1.35;
    }


    .hero-links-discover {
        font-size: 12px;

        line-height: 1.45;
    }


    .hero-links-youtube {
        width: 100%;

        justify-content: flex-start;
    }


    .hero-youtube-text {
        text-align: left;
    }

}








/* SECÇÃO MARCAS / PRODUTORES */

.brands-section {
    width: 100%;

    padding:
        88px 0 90px;

    background-color: #F7F7F7;

    color: #085E82;
}


.brands-inner {
    width: calc(100% - 60px);

    max-width: 1060px;

    margin: 0 auto;
}


/* INTRODUÇÃO */

.brands-intro {
    width: 100%;

    display: grid;

    grid-template-columns:
        350px minmax(0, 1fr);

    column-gap: 40px;

    align-items: start;
}


.brands-intro h2 {
    width: 100%;

    margin: 0;

    font-size: 29px;

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -0.01em;

    color: #085E82;
}


.brands-intro-text {
    width: 100%;

    padding-top: 1px;

    font-size: 13px;

    line-height: 1.42;

    font-weight: 400;

    letter-spacing: 0;

    color: #085E82;
}


.brands-intro-text p {
    margin:
        0 0 18px;
}


.brands-intro-text p:last-child {
    margin-bottom: 0;
}


/* SEPARADORES */

.brands-separator {
    width: 100%;

    height: 1px;

    margin:
        64px 0 58px;

    background-color:
        rgba(8, 94, 130, 0.72);
}


/* CATEGORIAS */

.brand-category {
    width: 100%;
}


.brand-category-title {
    margin:
        0 0 20px;

    color: #085E82;

    font-size: 29px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.brand-category-description {
    width: 100%;

    max-width: 1020px;

    margin:
        0 0 24px;

    color: #085E82;

    font-size: 13px;

    line-height: 1.42;

    font-weight: 400;

    letter-spacing: 0;
}


/* GRELHA DE MARCAS */

.brand-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 58px;

    row-gap: 36px;
}


/* CARTÃO */

.brand-card {
    width: 100%;

    min-width: 0;
}


/* IMAGEM / THUMBNAIL */

.brand-card-media {
    position: relative;

    display: block;

    width: 100%;

    padding: 0;

    border: 0;

    aspect-ratio: 1.55 / 1;

    overflow: hidden;

    background-color: #111111;

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.18);

    cursor: pointer;
}


.brand-card-media img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.35s ease;
}


/* CAMADA ESCURA SOBRE A IMAGEM */

.brand-card-media::after {
    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    background-color:
        rgba(0, 0, 0, 0.18);

    pointer-events: none;

    transition:
        background-color 0.3s ease;
}


/* HOVER - ZOOM 10% */

.brand-card-media:hover img,
.brand-card-media:focus-visible img {
    transform:
        scale(1.10);
}


.brand-card-media:hover::after,
.brand-card-media:focus-visible::after {
    background-color:
        rgba(0, 0, 0, 0.10);
}


/* ACESSIBILIDADE TECLADO */

.brand-card-media:focus-visible {
    outline:
        2px solid #D95454;

    outline-offset: 3px;
}


/* NOME SOBRE A IMAGEM */

.brand-card-name {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 50%;

    width: 92%;

    transform:
        translate(-50%, -50%);

    color: #FFFFFF;

    text-align: center;

    font-size:
        clamp(21px, 2.15vw, 30px);

    line-height: 1.02;

    font-weight: 400;

    letter-spacing: -0.025em;

    pointer-events: none;
}


/* LINK EXTERNO */

.brand-card-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 13px;

    color: #085E82;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 600;

    text-decoration: underline;

    text-underline-offset: 2px;

    transition:
        color 0.2s ease;
}


/* ÍCONE EXTERNO */

.brand-card-link::before {
    content: "↗";

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 15px;

    height: 15px;

    color: currentColor;

    font-size: 19px;

    line-height: 1;

    font-weight: 500;

    text-decoration: none;
}


/* HOVER DOS LINKS = VERMELHO */

.brand-card-link:hover,
.brand-card-link:focus-visible {
    color: #D95454;
}


/* TABLET */

@media (max-width: 900px) {

    .brands-section {
        padding:
            70px 0 75px;
    }


    .brands-inner {
        width: 82%;

        max-width: none;
    }


    /* INTRODUÇÃO PASSA A UMA COLUNA */

    .brands-intro {
        grid-template-columns: 1fr;

        row-gap: 28px;
    }


    .brands-intro h2 {
        width: 100%;

        max-width: 390px;

        font-size: 28px;
    }


    .brands-intro-text {
        max-width: 700px;
    }


    .brands-separator {
        margin:
            52px 0 48px;
    }


    /* DUAS COLUNAS */

    .brand-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 36px;

        row-gap: 38px;
    }


    .brand-category-title {
        font-size: 28px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .brands-section {
        padding:
            55px 0 65px;
    }


    .brands-inner {
        width: 84%;
    }


    .brands-intro {
        row-gap: 24px;
    }


    .brands-intro h2 {
        max-width: 330px;

        font-size: 25px;

        line-height: 1.15;
    }


    .brands-intro-text {
        font-size: 13px;

        line-height: 1.55;
    }


    .brands-intro-text p {
        margin-bottom: 18px;
    }


    .brands-separator {
        margin:
            45px 0 40px;
    }


    .brand-category-title {
        margin-bottom: 16px;

        font-size: 25px;

        line-height: 1.15;
    }


    .brand-category-description {
        margin-bottom: 24px;

        font-size: 13px;

        line-height: 1.55;
    }


    /* UMA COLUNA */

    .brand-grid {
        grid-template-columns: 1fr;

        row-gap: 34px;
    }


    .brand-card-media {
        aspect-ratio: 1.55 / 1;
    }


    .brand-card-name {
        font-size:
            clamp(22px, 7vw, 28px);
    }


    .brand-card-link {
        margin-top: 12px;

        font-size: 12px;
    }

}


/* MOBILE PEQUENO */

@media (max-width: 360px) {

    .brands-inner {
        width: 86%;
    }


    .brands-intro h2 {
        font-size: 22px;
    }


    .brand-category-title {
        font-size: 22px;
    }


    .brands-intro-text,
    .brand-category-description {
        font-size: 12px;
    }


    .brand-card-link {
        font-size: 11px;
    }

}


/* ECRÃS GRANDES Mantém a largura visual semelhante ao design original */

@media (min-width: 1600px) {

    .brands-inner {
        max-width: 1060px;
    }

}