:root {
    /* === Seção Vídeo === */
    --secao-video-top-margin: 120px;

    /* título */
    --secao-video-title-font-size: 55px;
    --secao-video-title-offset-y: -10px;
    --secao-video-title-color: #38270C;

    /* quadro creme (bloco inteiro) */
    --quadro-video-bg: #FFFDF5;
    --quadro-video-max-width: 1200px;
    --quadro-video-padding-v: 40px;   /* altura interna */
    --quadro-video-padding-h: 80px;   /* respiro lateral */
    --quadro-video-radius: 30px;
    --quadro-video-offset-y: -170px;  /* sobe/desce o quadro */
    --quadro-video-shadow: 10px 0 32px rgba(0, 0, 0, 0.23);

    /* ===== LINHA DECORATIVA — VARIÁVEIS EXCLUSIVAS DO VÍDEO ===== */
    --linha-video-width: 100%;
    --linha-video-max-width: 1100px;
    --linha-video-height: 30px;
    --linha-video-margin-top: -35px;
    --linha-video-margin-bottom: 40px;
    --linha-video-offset-y: 20px;
    --linha-video-opacity: 1;

    /* moldura + vídeo */
    --video-moldura-max-width: 980px;
    --video-moldura-margin-top: 20px;
    --video-moldura-margin-bottom: 40px;

    --video-frame-width: 100%;      /* tamanho da PNG da moldura */
    --video-landpage-width: 98%;    /* largura do vídeo dentro da moldura */
    --video-landpage-top: 6.5%;     /* distância do topo da moldura */
    --video-landpage-offset-y: 0px; /* ajuste fino vertical do vídeo */

    /* botão */
    --botao-iniciar-width: 280px;
    --botao-iniciar-margin-top: 32px;
    --botao-iniciar-offset-y: -10px;
}

/* ====== SEÇÃO VÍDEO ====== */

.secao-video {
    margin-top: var(--secao-video-top-margin);
    text-align: center;
    color: #38270C;
}

/* quadro creme */

.quadro-video {
    background-color: var(--quadro-video-bg);
    max-width: var(--quadro-video-max-width);
    margin: 0 auto;
    padding: var(--quadro-video-padding-v) var(--quadro-video-padding-h);
    border-radius: var(--quadro-video-radius);
    box-shadow: var(--quadro-video-shadow);
    transform: translateY(var(--quadro-video-offset-y));
}

/* título (só o da seção vídeo) */

.secao-video .secao-titulo {
    font-size: var(--secao-video-title-font-size);
    color: var(--secao-video-title-color);
    font-weight: normal;
    font-family: "Times New Roman", serif;
    line-height: 1.2;
    margin-bottom: 20px;
    transform: translateY(var(--secao-video-title-offset-y));
}

/* linha abaixo do título (padrão global) */

.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;
}

/* ===== BOTÃO PLAY/PAUSE DOURADO ===== */

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95px;
    height: 95px;
    border-radius: 50%;
    border: 3px solid #d4a042;
    box-shadow: 0 0 18px rgba(212,160,66,0.6);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    cursor: pointer;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease-in-out;
    opacity: 1;
}

/* Quando o vídeo está tocando, o botão some */
.play-btn.playing {
    opacity: 0;
}

/* Mas reaparece ao passar o mouse na moldura */
.video-moldura:hover .play-btn.playing {
    opacity: 1;
}

/* Hover – brilha */
.play-btn:hover {
    box-shadow: 0 0 28px rgba(255,198,92,0.9);
    transform: translate(-50%, -50%) scale(1.06);
}

/* Ícone PLAY (triângulo) */
.play-btn::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 32px solid #ffd788;         /* dourado-claro do ícone */
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    margin-left: 6px;
}

/* Ícone PAUSE (duas barras) */
.playing.play-btn::before {
    content: "";
    width: 15px;
    height: 35px;
    border-left: 7px solid #ffd788;
    border-right: 7px solid #ffd788;
    border-top: none;
    border-bottom: none;
    margin-left: 0;
}

/* ====== MOLDURA + VÍDEO ====== */

.video-moldura {
    position: relative;
    max-width: var(--video-moldura-max-width);
    margin: var(--video-moldura-margin-top) auto var(--video-moldura-margin-bottom) auto;
}

/* VÍDEO (FICA NO FUNDO) */
.video-landpage {
    position: absolute;
    top: var(--video-landpage-top);
    left: 50%;
    transform: translate(-50%, var(--video-landpage-offset-y));
    width: var(--video-landpage-width);
    height: auto;
    border-radius: 4px;
    z-index: 1;
}

/* MOLDURA (FICA POR CIMA SEMPRE) */
.video-frame {
    display: block;
    width: var(--video-frame-width);
    height: auto;
    position: relative;
    z-index: 2;
    pointer-events: none; /* evita clicar na moldura sem querer */
}

/* ====== BOTÃO “INICIAR A DISCIPLINA” (embaixo do vídeo) ====== */

.bloco-botao {
    text-align: center;
    margin-top: var(--botao-iniciar-margin-top);
}

.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;
}

.botao-iniciar:hover {
    transform: translateY(var(--botao-iniciar-offset-y)) scale(1.04);
}

/* ===== LINHA DECORATIVA — SOMENTE NA SEÇÃO VÍDEO ===== */

.secao-video .linha-decorativa {
    width: var(--linha-video-width);
    max-width: var(--linha-video-max-width);
    height: var(--linha-video-height);
    margin-top: var(--linha-video-margin-top);
    margin-bottom: var(--linha-video-margin-bottom);
    transform: translateY(var(--linha-video-offset-y));
    opacity: var(--linha-video-opacity);
}