/* Acabamento dos cinco horários. Medidas do palco, reservas de altura,
   posicionamento dos avisos e estados de animação seguem nas folhas originais. */
.dia-section {
    --dia-raio: 16px;
    --dia-tinta-2: #626268;
    --dia-fio: #e3e3e6;
}

.dia-section .dia-intro .dia-headline {
    color: #73737a;
}

.dia-section .dia-foto {
    background: #ededee;
}

.dia-section .dia-arte {
    filter: none;
}

/* Um acabamento de notificação, com contraste e sem reflexos ornamentais. */
.dia-section .dia-cartao .dia-noti {
    border-radius: 16px;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(25, 25, 28, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.dia-section .dia-noti-icone {
    border-radius: 30%;
}

.dia-section .dia-noti-titulo {
    color: #fff;
}

.dia-section .dia-noti-sub {
    color: #e8e8eb;
    font-weight: 400;
}

.dia-section .dia-noti-hora {
    color: #c4c4ca;
}

.dia-section .dia-zap,
.dia-section .zap4-fio {
    --zap-sombra: 0 2px 4px rgba(11, 20, 26, 0.1), 0 6px 16px rgba(11, 20, 26, 0.15);
    --zap4-sombra: var(--zap-sombra);
}

@media (min-width: 961px) {
    /* A narrativa fica sobre o papel branco, alinhada à fotografia. */
    .dia-section .dia-texto-card {
        border-color: transparent;
        border-radius: 0;
        background: transparent;
    }

    .dia-section .dia-texto-card::before {
        border-color: transparent;
        border-radius: 0;
        background: transparent;
    }

    .dia-section .dia-texto-card > .dia-hora {
        color: #515158;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
    }

    .dia-section .dia-texto-card > .dia-titulo {
        font-weight: 500;
        text-wrap: pretty;
    }

    .dia-section .dia-texto-card > .dia-corpo {
        color: var(--dia-tinta-2);
    }

    .dia-section .dia-trilho > .dia-marco {
        color: #707077;
    }

    .dia-section[data-ato="1"] .dia-marco[data-ato="1"],
    .dia-section[data-ato="2"] .dia-marco[data-ato="2"],
    .dia-section[data-ato="3"] .dia-marco[data-ato="3"],
    .dia-section[data-ato="4"] .dia-marco[data-ato="4"],
    .dia-section[data-ato="5"] .dia-marco[data-ato="5"] {
        color: var(--dia-tinta);
        font-weight: 500;
    }

    .dia-section .dia-trilho::after {
        box-shadow: 0 0 0 3px #fff;
    }

    /* O botão do último cartão é peça só do celular, e o esconderijo mora
       aqui: o dia-mobile.css nem carrega acima de 960px. */
    .dia-section .dia-btn {
        display: none;
    }
}

@media (max-width: 960px) {
    .dia-section .dia-topo.dia-intro {
        border-bottom-color: transparent;
    }

    .dia-section .dia-topo.dia-intro::after {
        background: transparent;
    }

    /* Mantém a altura do antigo horário e todos os intervalos medidos pelo JS. */
    .dia-section .dia-cartao > .dia-hora {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        padding-inline: 0;
        border-color: transparent;
        border-radius: 0;
        background: transparent;
        color: #515158;
        font-weight: 500;
        text-align: left;
    }

    .dia-section .dia-cartao > .dia-hora::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--dia-fio);
    }

    .dia-section .dia-mobile-copy[hidden] {
        text-align: left;
    }

    .dia-section .dia-mobile-copy > h3 {
        justify-self: start;
        font-weight: 500;
        text-wrap: pretty;
    }

    .dia-section .dia-mobile-copy > p {
        justify-self: start;
        color: #626268;
        font-weight: 400;
    }

    /* O TRILHO VOLTA À LINHA COM BOLINHAS (09/09/2026). Aqui morava uma régua
       de tempo — pontilhado de 6px, ponteiro em barra de 2x16px e um tique de
       1x12px por estação —, e ela saiu por ordem do dono, com a captura do
       desenho antigo como referência. Sem estas regras reaparece o traçado
       BASE do dia-mobile.css: linha de 1px a 16px do topo, bolinhas de 3px nas
       cinco estações, bola cheia de 7px correndo por --dia-mobile-progresso e
       rótulos de 0.75rem ABAIXO da linha — a mesma linguagem do trilho
       vertical do desktop, que é o "(igual no desktop)" do pedido. Desta folha
       sobra só o realce do horário atual, que a captura confirma. */
    .dia-section .dia-trilho > .dia-marco.is-mobile-current {
        color: var(--dia-tinta);
        font-weight: 500;
    }

    /* O BOTÃO QUE FECHA O ÚLTIMO CARTÃO (09/09/2026, pedido do dono sobre a
       captura do 22h00). No HTML o anchor vem logo depois da .dia-foto porque
       o dia-mobile.js APENDA o trilho como último filho de cada cartão: parado
       ali, o botão cairia entre a fotografia e a linha do tempo. O cartão é
       flex-column no celular, então order:1 o devolve ao fim sem tocar no JS.
       A pílula vem da .cta-forte da casa, que o style.css só desenha até
       615px — de 616 a 960 ela é o link minimalista, igual aos CTAs da
       of-section e da ag-section. O gradiente é o mesmo sobre papel branco ou
       preto, então o dia-escuro.css não precisa de regra nenhuma aqui.
       MARGEM 32->48 (09/09/2026, ainda o dono: "mova o botão um pouco mais
       para baixo"). O que ele quer é ar ENTRE O TRILHO E O BOTÃO, e por isso a
       conta mexe aqui em cima e não no pé: com order:1 o botão é o último
       filho do cartão, então esta margem é exatamente a distância até a linha
       do tempo que o dia-mobile.js apenda logo antes dele. Empurrar por baixo
       (padding do cartão, pé da seção) moveria a seção inteira e não o botão.
       Os 48 são o degrau seguinte da escada de respiros da casa e continuam
       menores que os 56px de padding-bottom do cartão, então o botão ganha
       distância do trilho sem chegar perto do fecho da jornada. */
    .dia-section .dia-btn {
        order: 1;
        margin-top: 48px;
    }
}