/* ============================================= */
/* CSS ÚNICO PARA A PÁGINA "PADRÕES RECONHECIDOS" */
/* ============================================= */

/* 1. ESTILOS GLOBAIS ESSENCIAIS */
/* ================================ */

/* Reset de Estilos */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Variáveis CSS (A base para todos os estilos) */
:root {
    --branco: #FFF;
    --vermelho: #B22222;
    --vermelho-escuro: #901111;
    --laranja: #D79900;
    --primary-color: #000;
    --accent-color: #D79900;
    --card-bg: #FEF5F5;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --font-title: 'Montserrat Alternates', sans-serif;
    --font-text: 'Averia Serif Libre', serif;
}

/* Estilos Gerais do Corpo da Página */
html {
    overflow-y: auto;
    scrollbar-width: none;
}
html::-webkit-scrollbar {
    display: none;
}
body {
    font-family: var(--font-title);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background: var(--branco); /* Fundo padrão, embora a seção o cubra */
}


/* 2. ESTILOS ESPECÍFICOS DA SEÇÃO */
/* ================================ */

/* Elementos de espaçamento e fundo */
.fundo-laranja {
    width: 100%;
    height: 1rem;
    background: var(--laranja);
}
.espacador-branco {
    width: 100%;
    height: 3px;
    background: var(--branco);
}
.fundo-vermelho {
    background: var(--vermelho);
}
.fundo-vermelho-escuro {
    background: var(--vermelho-escuro);
}

/* Título principal da seção */
.section-title-container {
    width: 100%;
    text-align: center;
    padding: clamp(1rem, 2vw, 1.5rem);
    margin: 0;
}
.section-title {
    font: 600 clamp(2rem, 3vw, 2.5rem) var(--font-title);
    color: var(--branco);
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
}

/* Container principal dos cartões */
.certification-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(2rem, 5vw, 4rem);
}

/* Títulos das sub-seções (Halal, Segurança Alimentar) */
.certification-title {
    font: 600 clamp(1.8rem, 2.5vw, 2rem) var(--font-title);
    color: var(--branco);
    margin: 2rem 0 1.5rem;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
}

/* Alinhamento dos cartões */
.certification-rectangles {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    max-width: 1570px;
}
.certification-rectangles.single-rectangle {
    justify-content: center;
}

/* Estilo do cartão de certificação individual */
.certification-rectangle {
    width: 100%;
    max-width: 365px;
    height: 590px;
    display: flex;
    flex-direction: column;
    transition: transform .2s;
    cursor: pointer;
}
.certification-rectangle:hover, .certification-rectangle:focus {
    transform: scale(1.02);
}

/* Parte principal do cartão (branca) */
.rectangle-main {
    width: 100%;
    height: 571.27px;
    background: var(--card-bg);
    border-radius: 12px 12px 0 0;
    box-shadow: 40px 60px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 25px;
}

/* Borda inferior do cartão (laranja) */
.rectangle-bottom {
    width: 100%;
    height: 18.73px;
    background: var(--accent-color);
    border-radius: 0 0 12px 12px;
    box-shadow: 40px 60px 50px rgba(0, 0, 0, 0.25);
}

/* Título dentro do cartão */
.rectangle-title {
    font: 600 clamp(1.4rem, 1.8vw, 1.6rem)/36px var(--font-title);
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 31px;
}

/* Imagem do logo no cartão */
.rectangle-image {
    width: 259px;
    height: 259px;
    margin-bottom: 17px;
    object-fit: contain;
}

/* Texto descritivo no cartão */
.rectangle-text {
    font: clamp(1rem, 1.4vw, 1.2rem)/1.5 var(--font-text);
    color: var(--primary-color);
    text-align: center;
    max-width: 90%;
    height: 180px;
    margin-bottom: 59px;
}


/* 3. ESTILOS RESPONSIVOS */
/* ======================== */

@media (max-width: 768px) {
    .certification-container {
        padding: 2rem 10px;
    }
    .certification-rectangles {
        gap: 1rem;
    }
    .certification-title {
        margin: 1rem 0 .75rem;
    }
}

@media (max-width: 480px) {
    .fundo-laranja {
        height: .625rem;
    }
    .certification-container {
        padding: 1.5rem 5px;
    }
    .certification-rectangles {
        gap: .5rem;
        margin-bottom: 1.5rem;
    }
    .certification-title {
        font-size: clamp(1.4rem, 1.8vw, 1.6rem);
    }
    .certification-rectangle {
        max-width: 260px;
        height: 420px;
    }
    .rectangle-main {
        height: 405px;
        border-radius: 8px 8px 0 0;
        box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.15);
        padding-top: 17px;
    }
    .rectangle-bottom {
        height: 15px;
        border-radius: 0 0 8px 8px;
        box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.15);
    }
    .rectangle-title {
        font-size: clamp(1.1rem, 1.5vw, 1.3rem);
        height: 24px;
        margin-bottom: 22px;
    }
    .rectangle-image {
        width: 184px;
        height: 184px;
        margin-bottom: 12px;
    }
    .rectangle-text {
        font-size: clamp(0.8rem, 1.2vw, 1rem);
        height: 117px;
        margin-bottom: 41px;
    }
}

@media (min-width: 1920px) {
    .certification-rectangles {
        max-width: 1800px;
        padding: 4rem 5%;
    }
    .certification-title, .rectangle-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 2560px) {
    .certification-rectangles {
        gap: 3rem;
    }
}