:root {
    --quadro-diario-offset-y: 0px;

    --secao-diario-title-font-size: 65px;   /* tamanho do título */
    --secao-diario-title-offset-y: -10px;   /* sobe/desce título */
    --secao-diario-title-color: #38270C;    /* cor do título */
    --secao-diario-top-margin: 120px;

    --texto-diario-max-width: 1000px;
    --texto-diario-font-size: 22px;
    --texto-diario-line-height: 1.6;
    --texto-diario-top-offset-y: -35px;    /* sobe texto de cima */
    --texto-diario-bottom-offset-y: -60px; /* sobe texto de baixo */

    --bloco-marrom-bg: #38270C;
    --bloco-marrom-max-width: 1000px;
    --bloco-marrom-padding-v: 20px;
    --bloco-marrom-padding-h: 60px;
    --bloco-marrom-radius: 0px;
    --bloco-marrom-offset-y: -50px;

    --logo-diario-width: 180px;
    --logo-diario-offset-y: 0px;

    --flipbook-max-width: 900px;
    --flipbook-offset-y: -10px;

    --botao-iniciar-width: 280px;
    --botao-iniciar-margin-top: 20px;
    --botao-iniciar-offset-y: -100px;

    /* bloco creme (quadro inteiro) */
    --quadro-diario-bg: #FFFDF5;
    --quadro-diario-max-width: 1200px;
    --quadro-diario-padding-v: 40px;
    --quadro-diario-padding-h: 80px;
    --quadro-diario-radius: 30px;
    --quadro-diario-offset-y: -90px; /* VOLTANDO PRO LUGAR CORRETO */
    --quadro-diario-shadow: 10px 0 32px rgba(0, 0, 0, 0.233);

    /* ===== LINHA DECORATIVA ABAIXO DO TÍTULO ===== */
    --linha-img: url("../img/linha.png");
    --linha-width: 100%;        /* largura da linha */
    --linha-max-width: 1100px;  /* limite opcional */
    --linha-height: 30px;       /* altura da imagem */
    --linha-margin-top: 20px;   /* distância do título */
    --linha-margin-bottom: 40px;/* distância do conteúdo abaixo */
    --linha-offset-y: -25px;      /* sobe/desce */
    --linha-opacity: 1;         /* transparência se precisar */

}

/* ========= CONTEÚDO PRINCIPAL (DEPOIS DO CABEÇALHO) ========= */
/* ===================== O que é o Diário ===================== */

.conteudo-principal {
    max-width: var(--largura-max-conteudo);
    
    /* ⬅️ ZERE A MARGEM INFERIOR AQUI */
    margin: 60px auto 0 auto; 
    
    /* ⬅️ ZERE O PADDING INFERIOR AQUI! */
    padding: 0 40px 0 40px; 
    
    position: relative;
    z-index: 1;
}

/* ====== SEÇÃO O QUE É O DIÁRIO ====== */

.secao-diario {
    margin-top: var(--secao-diario-top-margin);
    text-align: center;
    color: #38270C;
}

/* ====== TÍTULO DA SEÇÃO — SOMENTE DO DIÁRIO ====== */

.secao-diario .secao-titulo {
    font-size: var(--secao-diario-title-font-size);  /* tamanho do título */
    color: var(--secao-diario-title-color);          /* cor do título */
    font-weight: normal;
    font-family: "Times New Roman", serif;

    max-width: 100%;
    width: 100%;
    line-height: 1.2;

    margin-bottom: 40px;
    transform: translateY(var(--secao-diario-title-offset-y)); /* sobe/desce */
    text-align: center;
}

.linha-decorativa {
    display: block;
    width: var(--linha-width);
    max-width: var(--linha-max-width);
    height: var(--linha-height);
    margin: var(--linha-margin-top) auto var(--linha-margin-bottom) auto;

    transform: translateY(var(--linha-offset-y));
    opacity: var(--linha-opacity);

    object-fit: contain;
    pointer-events: none;
}

/* ====== BLOCO CREME (quadro inteiro) ====== */

.quadro-diario {
    background-color: var(--quadro-diario-bg);
    max-width: var(--quadro-diario-max-width);
    margin: 0 auto;
    padding: var(--quadro-diario-padding-v) var(--quadro-diario-padding-h);
    border-radius: var(--quadro-diario-radius);
    box-shadow: var(--quadro-diario-shadow);
    text-align: left;
    transform: translateY(var(--quadro-diario-offset-y)); /* sobe/desce quadro */
}

/* texto de cima */

.texto-diario-top {
    max-width: var(--texto-diario-max-width);
    margin: 0 auto 40px auto;
    font-size: var(--texto-diario-font-size);
    line-height: var(--texto-diario-line-height);
    text-align: left;
    transform: translateY(var(--texto-diario-top-offset-y)); /* sobe/desce só o texto de cima */
}

.texto-diario-top p {
    margin-bottom: 12px;
}

/* bloco marrom com flipbook */

.bloco-marrom {
    background-color: var(--bloco-marrom-bg);
    width: 100%;
    max-width: var(--bloco-marrom-max-width);
    margin: 0 auto 50px auto;
    padding: var(--bloco-marrom-padding-v) var(--bloco-marrom-padding-h);
    border-radius: var(--bloco-marrom-radius);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transform: translateY(var(--bloco-marrom-offset-y)); /* sobe/desce bloco marrom */
}

/* logo dentro do retângulo marrom */

.logo-diario {
    width: var(--logo-diario-width);
    display: block;
    margin: 0 auto 30px auto;
    transform: translateY(var(--logo-diario-offset-y));
}

/* flipbook dentro do retângulo marrom */

.video-flip {
    width: 100%;
    max-width: var(--flipbook-max-width);
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    transform: translateY(var(--flipbook-offset-y));
}

/* texto de baixo */

.texto-diario-bottom {
    max-width: var(--texto-diario-max-width);
    margin: 0 auto 40px auto;
    font-size: var(--texto-diario-font-size);
    line-height: var(--texto-diario-line-height);
    text-align: left;
    transform: translateY(var(--texto-diario-bottom-offset-y)); /* sobe/desce texto de baixo */
}

.texto-diario-bottom p {
    margin-bottom: 12px;
}

/* ===== BOTÃO INICIAR — SÓ NA SEÇÃO DO DIÁRIO ===== */

.secao-diario .bloco-botao {
    text-align: center;
    margin-top: var(--botao-iniciar-margin-top);
}

.secao-diario .botao-iniciar {
    width: var(--botao-iniciar-width);
    display: inline-block;
    cursor: pointer;
    filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.25));
    transform: translateY(var(--botao-iniciar-offset-y));
    transition: transform .2s ease;
    margin-top: calc(var(--botao-iniciar-margin-top) - 120px);
}

.secao-diario .botao-iniciar:hover {
    transform: translateY(var(--botao-iniciar-offset-y)) scale(1.04);
}

