/* =========================================================
   EUROTEXTIL — GLOBAL.CSS
   BASE DE CRIAÇÂO - EURO DS
   Regras compartilhadas por todas as páginas.

   Breakpoints:
   - Mobile: até 767px
   - Tablet: 768px até 1279px
   - Desktop: a partir de 1280px

   Ordem de importação:
   1. global.css
   2. CSS específico da página
   ========================================================= */
   
   
   /* =========================================================
   Variáveis globais
   ========================================================= */
   
   :root {
       
    --largura-maxima-ampla: 1920px;
    --largura-maxima-conteudo: 1440px;
    
    /* Brand Colors */
    --dark-red-euro: #AD073B;
    --dark-blue-euro: #26213F;

    /*Texto*/
    --text-darker-blue: #444155;
    --text-dark-blue: #65627E;
    --text-medium-blue: #959595;
    --text-disable-blue: #B2B0BE;
    --text-full-white: #ffffff;

    /*Background*/
    --bg-medium: #FDF0E8;
    --bg-light-institucional: #FCF7F4;
    --bg-full-white: #ffffff;

    /* Buttons */
    --primary: #AD073B;
    --secondary: #4D437F;
    --secondary-disabled: #C1BBDB;
    --link: #26213F;
    --disabled-link: #9E95C7;
    --hover-dark: #670423;
    --hover-light: #EFEEF6;
    --bg-disabled: #C1BBDB;

    /* Border/Outline */
    --active-line: #714E58;
    --default-line: #BA98A2;
    --disabled-line: #DCCBD0;

    /* Estrutura */
    --container-width: 1528px;
    --content-width: 1528px;
    --header-height: 104px;

    /* Componentes */
    --border-radius: 8px;
    --transition: 250ms ease;

    /* Tipografia */
        /* Tipografia */
    /* TITLE */
 
    --font-family: 'Titillium web', sans-serif;
    --line-height: 1.6;

        /* --h1-light: 32px 200 32px/32px; */
        --h1-light-size: 32px;
        --h1-light-weight: 200;
        --h1-light-height: 24px;

        /* --h2-light: h2 200 32px/32px; */
        --h2-light-size: 24px;
        --h2-light-weight: 200;
        --h2-light-height: 32px;

        /* --h2-regular: h2 400 32px/32px; */
        --h2-regular-size: 24px;
        --h2-regular-weight: 400;
        --h2-regular-height: 32px;

        /* --h3-regular: h2 400 20px/24px; */
        --h3-regular-size: 20px;
        --h3-regular-weight: 400;
        --h3-regular-height: 26px;

        /* --h3-semibold: h2 600 20px/24px; */
        --h3-semibold-size: 20px;
        --h3-semibold-weight: 600;
        --h3-semibold-height: 24px;
 
    /*Label*/
 
        /* --label-semibold-12: 12px 0.75rem 600 12px/20px; */
        --label-semibold-12-size: 12px;
        --label-semibold-12-weight: 600;
        --label-semibold-12-height: 20px;

        /* --label-semibold-16: 16px 1rem 600 16px/24px; */
        --label-semibold-16-size: 16px;
        --label-semibold-16-weight: 600;
        --label-semibold-16-height: 24px;

        /* --label-semibold-14: 14px 0.875rem 600 14px/16px; */
        --label-semibold-14-size: 14px;
        --label-semibold-14-weight: 600;
        --label-semibold-14-height: 16px;

        /* --label-bold-14: 14px 0.875rem 700 14px/16px; */
        --label-bold-14-size: 14px;
        --label-bold-14-weight: 600;
        --label-bold-14-height: 20px;

 
    /* Body */
 
        /* --descritive-semibold-14: 14px 0.875rem 600 14px/16px; */
        --descritive-semibold-14-size: 14px;
        --descritive-semibold-14-weight: 600;
        --descritive-semibold-14-height: 16px;

        /* --descritive-semibold-16: 16px 1rem 600 16px/20px; */
        --descritive-semibold-16-size: 16px;
        --descritive-semibold-16-weight: 600;
        --descritive-semibold-16-height: 20px;

        /* --descritive-regular-14: 14px 0.875rem 400 14px/20px; */
        --descritive-regular-14-size: 14px;
        --descritive-regular-14-weight: 400;
        --descritive-regular-14-height: 20px;

        /* --descritive-regular-16: 16px 1rem 400 16px/20px; */
        --descritive-regular-16-size: 16px;
        --descritive-regular-16-weight: 400;
        --descritive-regular-16-height: 20px;

        /* --details-regular-12: 12px 0.75rem 400 12px/20px; */
        --details-regular-12-size: 12px;
        --details-regular-12-weight: 400;
        --details-regular-12-height: 20px;

        /* --details-bold-12: 12px 0.75rem 600 12px/20px; */
        --details-bold-12-size: 12px;
        --details-bold-12-weight: 600;
        --details-bold-12-height: 20px;

 
    /* LINK */
   
        /* --link-semibold-12: 12px 0.75rem 600 12px/20px; */
        --link-semibold-12-size: 12px;
        --link-semibold-12-weight: 600;
        --link-semibold-12-height: 20px;

        /* --link-semibold-14: 14px 0.875rem 600 14px/16px; */
        --link-semibold-14-size: 14px;
        --link-semibold-14-weight: 600;
        --link-semibold-14-height: 16px;

        /* --link-semibold-16: 16px 1rem 700 16px/16px; */
        --link-semibold-16-size: 16px;
        --link-semibold-16-weight: 700;
        --link-semibold-16-height: 16px;

}

/* ================== RESET = */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 0;

    background-color: var(--bg-light-institucional);
    color: var(--text-darker-blue);
    font-family: var(--font-family);
    line-height: var(--line-height);

    font-family: "Titillium Web", sans-serif;
    line-height: 1.6;
    text-rendering: optimizeLegibility; /* É uma orientação para o navegador priorizar a legibilidade do texto.
                                        Ele pode melhorar detalhes tipográficos como: espaçamento entre pares de letras (kerning);
                                        ligaduras tipográficas; posicionamento e desenho dos caracteres.*/
}


button,
input,
textfield,
select {
    font: inherit;
}

.texto-institucional {
    font-size: var(--h1-light-size);
    font-weight: var(--h1-light-weight);
    line-height: var(--h1-light-height);
}


/* === HEADER ===== */

.site-header {
    position: sticky;
    top: 0; /* Obriga o header a ficar colado no topo */
    z-index: 1000; /* Coloca o item a cima de todos. */

    box-sizing: border-box;
    margin-inline: auto;
    height: var(--header-height);

    background-color: var(--bg-light-institucional);
    border-bottom: 1px solid var(--dark-red-euro);
    padding: 48px 80px;
    

}

.header-container {
    width: 100%;
    max-width: var(--largura-maxima-ampla);
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.logo-container{
    display: block;
    width: 180px;
    flex-shrink: 0; /* define se um elemento dentro de um container Flexbox pode diminuir de tamanho quando falta espaço. */
}

#logotipo{
    width: 100%;
    height: auto;
}

.main-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

/* Estes elementos aparecem somente dentro do menu mobile. */

.menu-separador {
    display: none;
}

/*.menu-contatos-links,
.menu-separador {
    display: none;
}*/

.menu-contatos {
    position: relative;
    display: flex;
}

.menu-contatos-titulo {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 16px;

    color: #444155;
    background-color: transparent;
    border: 0;
    border-radius: 4px;

    font: inherit;
    cursor: pointer;
}

/* Seta do dropdown */

.menu-contatos-titulo::after {
    content: "▾";
    font-size: 20px;
}

/* Estado do botão aberto */

.menu-contatos-titulo:hover,
.menu-contatos-titulo[aria-expanded="true"] {
    color: #ffffff;
    background-color: var(--dark-red-euro);
}

/* Dropdown inicialmente escondido */

.menu-contatos-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1100;

    display: none;
    flex-direction: column;
    gap: 4px;

    min-width: 240px;
    padding: 8px;

    background-color: var(--bg-light-institucional);
    border: 1px solid #DCCBD0;
    border-radius: 4px;

    box-shadow: 0 8px 24px rgb(38 33 63 / 12%);
}

/* Mostra o dropdown */

.menu-contatos.is-open .menu-contatos-links {
    display: flex;
}

.menu-contatos-links a {
    width: 100%;
    padding: 10px 12px;

    color: #444155;
    text-decoration: none;
    white-space: nowrap;
}

.menu-contatos-links a:hover {
    color: #ffffff;
    background-color: var(--dark-red-euro);
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 8px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;

    background-color: transparent;
    border: 1px solid #BA98A2;
    border-radius: 4px;
    cursor: pointer;
}

.menu-toggle-line {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #444155;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-open .menu-toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle-line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open .menu-toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


.main-navigation a {
    color: #444155;
    text-decoration: none;
    align-content: center;
    padding: 8px 16px;
    border-radius: 4px;
}

.main-navigation a:hover {
    background-color: var(--dark-red-euro);
    color: #ffffff;
    transition: 0.1s;
}


.client-button {
    background-color: var(--bg-light-institucional);
    padding: 8px 16px 8px 16px;
    border: 1px solid #BA98A2;
    border-radius: 4px;
}



/* =========================================================
   ESTADO ATIVO E HOVER DO MENU — DESKTOP
========================================================= */

@media (min-width: 768px) {

    /*
       Cria uma pequena ponte invisível entre o botão "Contatos"
       e o dropdown. Assim, o menu não fecha durante o movimento
       do mouse entre os dois elementos.
    */
    .menu-contatos::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;
        height: 8px;
    }

    /*
       O dropdown abre ao passar o mouse, ao navegar com teclado
       ou quando o JavaScript adiciona a classe is-open.
    */
    .menu-contatos:hover .menu-contatos-links,
    .menu-contatos:focus-within .menu-contatos-links,
    .menu-contatos.is-open .menu-contatos-links {
        display: flex;
    }

    /*
       Mantém o mesmo visual do hover na página selecionada.
       O JavaScript adiciona is-active automaticamente.
    */
    .main-navigation > a.is-active:not(.client-button),
    .menu-contatos-titulo.is-active {
        color: #ffffff;
        background-color: var(--dark-red-euro);
    }

    .menu-contatos-links a.is-active {
        color: #ffffff;
        background-color: var(--dark-red-euro);
    }
}

/* ==== Footer ==== */

.footer-container {
    width: 100%;
    max-width: var(--largura-maxima-ampla);
    margin-inline: auto;

    border-top: 1px solid var(--dark-red-euro);
    padding: 80px 80px 24px;
}

.footer-bottom {
    display: flex;

    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 48px;
}

.footer-logo {
    display: flex;
    justify-content: center;
    flex-direction: row;
    max-width: 400px;
    gap: 32px;
}

.footer-endereco h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-red-euro);
}

.footer-endereco p {
    font-size: 14px;
    font-weight: 400;
}

.rede-social {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    gap: 16px;
}

/* ------- */

.footer-copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;

    border-top: 1px solid #DCCBD0;

    /* Faz a linha chegar até as laterais */
    margin-inline: -80px;

    /* Mantém os textos alinhados aos outros elementos */
    padding: 24px 80px 0;
}

.footer-copyright > p {
    margin: 0;
    line-height: 1.4;
    font-size: 14px;
}

.footer-links {
    display: flex;
    font-size: 14px;
    align-items: center;
    text-decoration: none;
    gap: 32px;
}

.footer-links a {
    display: flex;
    align-items: center;
    color: #444155;
    text-decoration: none;
    line-height: 1.4;
}

.footer-links .highlight {
    align-items: center;
    font-size: 14px;
    color: var(--dark-red-euro);
    text-decoration: none;
}

/* =========================================================
   TABLET (768px a 1279px)
========================================================= */

@media (min-width: 768px) and (max-width: 1279px) {

    .site-header {
        padding: 24px 32px;
    }

    .client-button {
    align-content: center;
}

    /* --- Hero --- */
    .hero-container {
        height: auto;
    }

    .hero-content {
        flex-direction: column;
        padding: 48px 32px;
        gap: 32px;
    }

    .hero-title p {
        font-size: 48px;
    }

    .hero-image {
        width: 100%;
        min-height: 320px;
        max-height: 420px;
        
    }

    /* --- Texto institucional --- */
    .texto-institucional {
        margin-left: 32%;
        margin-right: 32px;
        padding-block: 48px;
    }

    .texto-institucional p,
    .texto-institucional span {
        font-size: 24px;
    }

    /* --- Carrossel --- */
    .splide {
        padding: 0 32px;
    }

    .slide-overlay1,
    .slide-overlay2 {
        padding: 32px;
    }

    .slide-info h3 {
        font-size: 48px;
    }

    /* --- Institucional (pessoas / criacao) --- */
    .institucional {
        padding: 48px 32px;
    }

    .img-pessoas-content img {
        width: 320px;
        height: 320px;
    }

    .pessoas {
        padding-bottom: 100px;
    }

    .grafismo-eurotextil {
        width: 680px;
        left: -160px;
        bottom: -140px;
        opacity: 0.35;
    }

    .criacao-tecnologia,
    .title-criacao {
        width: 100%;
    }

    .img-criacao-content img {
        width: 320px;
        height: 320px;
    }

    .criacao-content {
        width: 100%;
        max-width: 320px;
    }

    /* --- Contatos --- */
    .linha-contato {
        height: auto;
        flex-direction: column;
        background-color: var(--bg-light-institucional);
    }

    .linha-contato:nth-child(2) {
        flex-direction: column;
    }

    .linha-contato img,
    .linha-info {
        flex: none;
        width: 100%;
    }

    .linha-contato img {
        height: 240px;
    }

    .linha-info,
    .linha-contato:nth-child(2) .linha-info {
        align-items: flex-start;
        text-align: left;
        padding: 40px 32px;
    }

    .linha-info h2 {
        font-size: 32px;
        line-height: 1.3;
    }

    .linha-info button {
        min-height: 56px;
        font-size: 16px;
    }

    /* --- Footer --- */
    .footer-container {
        padding: 48px 32px;
    }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 32px;
    }

    .footer-copyright {
    flex-wrap: wrap;
    gap: 16px;
    margin-inline: -32px;
    padding: 24px 32px 0;
    }
}

/* =========================================================
   MOBILE (até 767px)
========================================================= */

@media (max-width: 767px) {

    body {
        overflow-x: hidden;
    }

    body.menu-open {
        overflow: hidden;
    }

    /* --- Header e menu mobile --- */

    .site-header {
        height: 88px;
        padding: 14px 24px;
    }

    .header-container {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .logo-container {
        width: 120px;
    }

    .menu-toggle {
        display: flex;
        width: 32px;
        height: 32px;
        padding: 4px;
        margin-left: auto;
        border: 0;
    }

    /* Painel aberto abaixo do header. */
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1001;

        width: 100%;
        height: calc(100dvh - 88px);
        padding: 48px 24px 56px;

        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 32px;

        overflow-y: auto;
        overscroll-behavior: contain;

        background-color: var(--bg-light-institucional);
        border-bottom: 1px solid var(--dark-red-euro);
        box-shadow: none;
    }

    .main-navigation.is-open {
        display: flex;
    }

    /* Todos os itens usam a mesma largura central da referência. */
    .main-navigation > a,
    .main-navigation > .menu-contatos,
    .main-navigation > .menu-separador {
        width: min(100%, 412px);
        flex-shrink: 0;
    }

    .main-navigation > a,
    .menu-contatos-titulo {
        padding: 0 0 0 24px;

        color: #444155;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
    }

    .menu-home {
        display: none;
    }

    /* No mobile, Contatos deixa de ser dropdown e fica sempre expandido. */
    .menu-contatos {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .menu-contatos-titulo {
        width: 100%;
        background: transparent;
        border: 0;
        border-radius: 0;
        cursor: default;
        pointer-events: none;
    }

    .menu-contatos-titulo::after {
        display: none;
        content: none;
    }

    .menu-contatos-titulo:hover,
    .menu-contatos-titulo[aria-expanded="true"] {
        color: #444155;
        background-color: transparent;
    }

    /* Reseta completamente as regras do dropdown desktop. */
    .menu-contatos-links,
    .menu-contatos.is-open .menu-contatos-links {
        position: static;
        inset: auto;
        z-index: auto;

        display: flex;
        width: 100%;
        min-width: 0;
        padding: 0 0 0 60px;

        flex-direction: column;
        gap: 38px;

        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .menu-contatos-links a {
        width: 100%;
        padding: 0;

        color: #444155;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.25;
        text-decoration: none;
        white-space: normal;
    }

    .menu-separador {
        display: block;
        height: 1px;
        background-color: #DCCBD0;
    }

    .main-navigation .client-button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: min(100%, 412px);
        min-height: 56px;
        padding: 12px 16px;

        color: var(--dark-red-euro);
        background-color: transparent;
        border: 1px solid var(--dark-red-euro);
        border-radius: 8px;

        font-size: 16px;
        font-weight: 400;
        line-height: 1.2;
        text-align: center;
    }

    .main-navigation a:hover,
    .menu-contatos-links a:hover {
        font-size: 16px;
        font-weight: 600;
        color: var(--darker-blue-euro);
        background-color: transparent;
    }

    .main-navigation .client-button:hover {
        color: #ffffff;
        background-color: var(--dark-red-euro);
    }

    /* --- Hero --- */

    .hero-container {
        height: auto;
    }

    .hero-content {
        height: auto;
        padding: 0;
        flex-direction: column;
        gap: 0;
    }

    .hero-title {
        order: 2;
        flex: none;
        width: 100%;
        min-height: 144px;
        padding: 24px 24px;
        align-items: center;
    }

    .hero-title p {
        font-size: 24px;
        line-height: 1.15;
    }

    .desktop-title-break {
        display: none;
    }

    .hero-image {
        order: 1;
        flex: none;
        width: 100%;
        height: clamp(480px, 144vw, 620px);
        min-height: 0;
        max-height: none;
    }

    /* --- Texto institucional --- */

    .texto-institucional {
        margin-left: 32%;
        margin-right: 24px;
        padding-block: 48px;
    }

    .texto-institucional p,
    .texto-institucional span {
        margin: 0;
        font-size: 20px;
        font-weight: 300;
        line-height: 1.45;
    }

    /* --- Carrossel --- */

    .splide {
        padding-inline: 24px;
    }

    #carrossel-moda {
        padding-top: 20px;
        padding-bottom: 0;
    }

    .splide__slide img {
        width: 100%;
        height: clamp(220px, 62vw, 260px);
        max-height: none;
        border-radius: 8px;
        object-fit: cover;
    }

    .splide__arrow {
        display: none;
    }

    .slide-overlay1,
    .slide-overlay2 {
        width: 100%;
        margin-inline: 0;
        padding: 24px 32px;
    }

    .slide-overlay1 h3,
    .slide-overlay2 h3 {
        font-size: 24px;
        line-height: 1.1;
    }

    .slide-overlay1 a,
    .slide-overlay2 a {
        font-size: 12px;
    }

    .slide-categoria,
    .slide-categoria-home {
        font-size: 10px;
        padding: 4px 12px;
    }

    .splide__pagination {
        position: static;
        padding: 16px 0 24px;
        gap: 8px;
    }

    .splide__pagination__page {
        width: 8px;
        height: 8px;
        margin: 0;
        background-color: #E4BCC7;
        opacity: 1;
    }

    .splide__pagination__page.is-active {
        background-color: var(--dark-red-euro);
        transform: none;
    }

    /* --- Institucional --- */

    .institucional {
        padding: 32px 24px 72px;
    }

    .title-pessoas,
    .img-pessoas-content {
        position: relative;
        z-index: 1;
        width: 72%;
        margin-left: auto;
        margin-right: 0;
    }

    .pessoas {
        padding-bottom: 0;
    }

    .grafismo-eurotextil {
        left: 0;
        bottom: 196px;

        width: 100%;
        max-width: 240px;

        opacity: 1;
    }

    .img-pessoas-content {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 0;
    }

    .img-pessoas-content img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        border-radius: 8px;
    }

    .pessoas p {
        width: 100%;
        max-width: none;
        font-size: 14px;
        line-height: 1.35;
    }

    .title-pessoas {
        margin-bottom: 12px;
    }

    .title-pessoas h2,
    .title-criacao h2 {
        font-size: 20px;
        line-height: 1.2;
    }

    .criacao-tecnologia {
        width: 72%;
        margin: 64px auto 0 0;
    }

    .title-criacao,
    .img-criacao-content {
        width: 100%;
    }

    .img-criacao-content {
        flex-direction: column;
        gap: 14px;
    }

    .img-criacao-content img {
        order: 1;
        width: 100%;
        height: auto;
        aspect-ratio: 1.12;
        border-radius: 8px;
    }

    .criacao-content {
        order: 2;
        width: 100%;
        max-width: none;
    }

    .criacao-content p {
        font-size: 14px;
        line-height: 1.35;
    }

    /* --- Contatos --- */

    .contatos {
        border-top: 1px solid var(--dark-red-euro);
    }

    .linha-contato,
    .linha-contato:nth-child(2) {
        width: 100%;
        height: 180px;
    }

    .linha-contato {
        flex-direction: row;
    }

    .linha-contato:nth-child(2) {
        flex-direction: row-reverse;
    }

    .linha-contato img {
        flex: 0 0 50%;
        width: 50%;
        height: 100%;
    }

    .linha-info,
    .linha-contato:nth-child(2) .linha-info {
        flex: 0 0 50%;
        width: 50%;
        padding: 16px;
    }

    .linha-info {
        align-items: flex-start;
        text-align: left;
    }

    .linha-contato:nth-child(2) .linha-info {
        align-items: flex-end;
        text-align: right;
    }

    .linha-info h2 {
        margin-bottom: 12px;
        font-size: 20px;
        line-height: 1.15;
    }

    .linha-info button {
        min-height: 32px;
        padding: 8px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* --- Footer --- */

    .footer-container {
        padding: 32px 24px 20px;
    }

    .footer-bottom {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 24px 16px;
        margin-bottom: 24px;
    }

    .footer-logo {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-logo img {
        width: 40px;
        height: auto;
        flex-shrink: 0;
    }

    .footer-logo p {
        margin: 0;
        font-size: 12px;
        line-height: 1.4;
    }

    .footer-endereco {
        flex: 0 0 calc(50% - 8px);
        min-width: 0;
    }

    .footer-endereco h4 {
        margin: 0 0 6px;
        color: var(--dark-red-euro);
        font-size: 12px;
    }

    .footer-endereco p {
        margin: 0;
        font-size: 12px;
        line-height: 1.45;
    }

    .rede-social {
        width: 100%;
        padding-top: 0;
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }

    .rede-social img {
        width: 24px;
        height: 24px;
    }

    .footer-copyright {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-inline: -24px;
        padding: 20px 24px 0;
        text-align: center;
    }

    .footer-copyright > p {
        font-size: 12px;
    }

    .footer-links {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
        font-size: 12px;
    }

    .footer-links .highlight {
        color: var(--dark-red-euro);
        justify-content: center;
        font-size: 12px;
    }

    .footer-links a:first-child {
        flex-basis: 100%;
        font-size: 12px;
    }
}