/* ========= VARIÁVEIS GERAIS (SÓ MEXER AQUI PRA AJUSTE FINO) ========= */

:root {
    /* largura máxima do conteúdo central */
    --largura-max-conteudo: 1600px;

    /* hero / cabeçalho */
    --hero-altura: 60vh;           /* altura do hero */
    --hero-padding-top: 80px;      /* distância do topo até o conteúdo */
    --hero-padding-bottom: 80px;   /* espaço embaixo antes de acabar o hero */
    --hero-padding-lados: 40px;    /* respiro lateral */

    /* colunas */
    --coluna-largura: 180px;       /* largura das colunas */
    --coluna-max-altura: 630px;    /* altura máxima (o PNG escala mantendo proporção) */
    --coluna-offset-y: 23px;       /* POSIÇÃO VERTICAL das colunas (negativo sobe, positivo desce) */

    /* título (imagem) */
    --titulo-largura: 900px;       /* largura da imagem do título */
    --titulo-offset-y: -10px;      /* POSIÇÃO VERTICAL do bloco título+selo+textos */

    /* selo */
    --selo-tamanho: 220px;         /* largura/altura do selo */
    --selo-offset-y: 30px;         /* ajuste fino só do selo, se quiser */

    /* textos */
    --cor-texto: #38270C;
    --slogan-font-size: 35px;
    --sub-slogan-font-size: 25px;
    --texto-offset-y: 25px;

    /* espaçamentos internos do bloco central */
    --titulo-margin-bottom: 30px;
    --selo-margin-bottom: 30px;
    --slogan-margin-bottom: 8px;

    /* faixa marrom */
    --faixa-altura: 160px;         /* altura da barra marrom */
    --faixa-gap: 56px;             /* distância entre os itens da faixa */
    --faixa-icon-size: 30px;       /* tamanho dos ícones */
    --faixa-font-size: 30px;       /* tamanho do texto da faixa */
}

/* ========= RESET BÁSICO ========= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Times New Roman", serif;
}

body {
    min-height: 100vh;
    background-color: #FFFCF0;                 /* cor de base, igual ao centro */
    background-image: url("../img/fundo.jpg"); /* usa a FAIXA, não a tripona */
    background-repeat: repeat-y;               /* repete só na vertical */
    background-position: center top;           /* centraliza o pergaminho */
    background-size: 100% auto;                /* ocupa a largura toda, altura automática */
}

/* ========= HERO (BACKGROUND HERO.JPG + COLUNAS + TÍTULO + TEXTO) ========= */

.hero {
    height: var(--hero-altura);
    width: 100%;

    background-image: url("../img/hero.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;  /* centraliza verticalmente o bloco interno */
    justify-content: center;
    position: relative;
    z-index: 1;
}

.hero-inner {
    max-width: var(--largura-max-conteudo);
    width: 100%;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: var(--hero-padding-top);
    padding-bottom: var(--hero-padding-bottom);
    padding-left: var(--hero-padding-lados);
    padding-right: var(--hero-padding-lados);
}

/* colunas */

.coluna {
    width: var(--coluna-largura);
    max-height: var(--coluna-max-altura);
    height: auto;
    object-fit: contain;
    transform: translateY(var(--coluna-offset-y));
}

/* título + selo + textos */

.titulo-area {
    flex: 1;
    text-align: center;
    color: var(--cor-texto);
    transform: translateY(var(--titulo-offset-y));
}

.titulo-img {
    width: var(--titulo-largura);
    height: auto;
    display: block;
    margin: 0 auto 24px auto;
}

.selo {
    width: var(--selo-tamanho);
    height: var(--selo-tamanho);
    display: block;
    margin: 0 auto 24px auto;
    transform: translateY(var(--selo-offset-y));
}

.slogan-principal {
    font-size: var(--slogan-font-size);
    font-weight: bold;
    color: var(--cor-texto);
    margin-bottom: 8px;
    transform: translateY(var(--texto-offset-y));
}

.sub-slogan {
    font-size: var(--sub-slogan-font-size);
    font-weight: normal;
    color: var(--cor-texto);
    white-space: nowrap;
    width: fit-content;
    margin: 0 auto;
    transform: translateY(var(--texto-offset-y));
}

/* ========= FAIXA MARROM (BARRA.PNG COMO FUNDO) ========= */

.faixa-caracteristicas {
    width: 100%;
    height: var(--faixa-altura);

    background-image: url("../img/barra.png");
    background-size: cover;          /* ajusta a imagem ao tamanho da faixa */
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.faixa-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--faixa-gap);
}

.carac-item {
    display: flex;
    align-items: center;
}

.carac-item img {
    width: var(--faixa-icon-size);
    height: var(--faixa-icon-size);
    margin-right: 8px;

    /* deixa os ícones claros sobre o fundo marrom */
    filter: brightness(0) invert(1);
}

.carac-label {
    font-size: var(--faixa-font-size);
    color: #fff9ef;
    white-space: nowrap;
}

.hero-mobile {
    display: none;
}