/* =============================================================================
   layout.css — container, header, footer, grid, seções
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--esp-4);
}

.conteudo { min-height: 60vh; }

/* O layout "limpo" (login e telas de erro) não carrega este arquivo —
   .corpo-limpo e .conteudo-limpo ficam em components.css. */

/* --- Cabeçalho ------------------------------------------------------------ */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(23, 16, 13, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borda);
}

.cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    min-height: 68px;
}

.marca {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}

.marca__logo {
    width: 46px;
    height: 46px;
    border-radius: var(--raio-full);
    border: 2px solid var(--vermelho);
    object-fit: cover;
}

.marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.marca__texto strong {
    font-family: var(--fonte-titulo);
    font-size: var(--fs-lg);
}

.marca__texto small {
    font-size: var(--fs-xs);
    color: var(--dourado);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --- Menu ----------------------------------------------------------------- */

.menu-alternar {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.menu-alternar span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--creme);
    border-radius: 2px;
    transition: var(--transicao);
}

.menu-alternar[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-alternar[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-alternar[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
    position: fixed;
    inset: 68px 0 auto 0;
    max-height: 0;
    overflow: hidden;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    transition: max-height var(--transicao);
}

.menu.aberto { max-height: 400px; }

.menu__lista {
    display: flex;
    flex-direction: column;
    padding: var(--esp-2) var(--esp-4) var(--esp-4);
}

.menu__link {
    display: block;
    padding: var(--esp-3) 0;
    font-weight: 500;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--borda);
    transition: color var(--transicao);
}

.menu__link:hover,
.menu__link.ativo { color: var(--dourado); }

@media (min-width: 768px) {
    .menu-alternar { display: none; }

    .menu {
        position: static;
        max-height: none;
        overflow: visible;
        background: none;
        border: 0;
    }

    .menu__lista {
        flex-direction: row;
        gap: var(--esp-5);
        padding: 0;
    }

    .menu__link {
        position: relative;
        padding: var(--esp-2) 0;
        border: 0;
    }

    .menu__link.ativo::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 2px;
        background: var(--vermelho);
        border-radius: 2px;
    }
}

/* --- Seções --------------------------------------------------------------- */

.secao { padding-block: var(--esp-8); }

.secao--destaque {
    background:
        linear-gradient(rgba(23, 16, 13, .88), rgba(23, 16, 13, .88)),
        radial-gradient(circle at 50% 0%, var(--vermelho-escuro), transparent 60%);
    border-block: 1px solid var(--borda);
}

.secao__titulo {
    margin-bottom: var(--esp-5);
    text-align: center;
}

.secao__texto {
    max-width: 620px;
    margin: 0 auto var(--esp-5);
    color: var(--texto-suave);
    text-align: center;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
    padding-block: var(--esp-8) var(--esp-10);
    background:
        linear-gradient(180deg, rgba(23, 16, 13, .55), var(--preto) 92%),
        radial-gradient(circle at 50% 18%, rgba(206, 43, 55, .38), transparent 58%);
}

.hero__interno {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-5);
    text-align: center;
}

.hero__logo {
    width: 140px;
    height: 140px;
    border-radius: var(--raio-full);
    border: 3px solid var(--vermelho);
    box-shadow: var(--sombra-lg);
    object-fit: cover;
}

.hero__titulo { max-width: 18ch; }

.hero__texto {
    max-width: 58ch;
    color: var(--texto-suave);
    font-size: var(--fs-lg);
}

.hero__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--esp-3);
}

@media (min-width: 768px) {
    .hero__logo { width: 180px; height: 180px; }
}

/* --- Grades --------------------------------------------------------------- */

.grade {
    display: grid;
    gap: var(--esp-4);
}

.grade--2 { grid-template-columns: 1fr; }
.grade--3 { grid-template-columns: 1fr; }
.grade--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
    .grade--2 { grid-template-columns: repeat(2, 1fr); }
    .grade--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grade--3 { grid-template-columns: repeat(3, 1fr); }
    .grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Rodapé --------------------------------------------------------------- */

.rodape {
    margin-top: var(--esp-10);
    background: var(--superficie);
    border-top: 1px solid var(--borda);
}

.rodape__interno {
    display: grid;
    gap: var(--esp-6);
    padding-block: var(--esp-8);
}

.rodape__logo {
    width: 64px;
    height: 64px;
    border-radius: var(--raio-full);
    border: 2px solid var(--vermelho);
    object-fit: cover;
    margin-bottom: var(--esp-3);
}

.rodape__slogan {
    max-width: 32ch;
    color: var(--texto-suave);
    font-size: var(--fs-sm);
}

.rodape__titulo {
    margin-bottom: var(--esp-3);
    font-size: var(--fs-base);
    color: var(--dourado);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rodape__lista {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    color: var(--texto-suave);
    font-size: var(--fs-sm);
}

.rodape__lista a { transition: color var(--transicao); }
.rodape__lista a:hover { color: var(--dourado); }

.rodape__base {
    padding-block: var(--esp-4);
    border-top: 1px solid var(--borda);
    color: var(--cinza);
    font-size: var(--fs-xs);
    text-align: center;
}

@media (min-width: 768px) {
    .rodape__interno { grid-template-columns: 2fr 1fr 1fr; }
}

.rodape__admin {
    margin-left: var(--esp-3);
    color: var(--cinza);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rodape__admin:hover { color: var(--dourado); }