/* A JORNADA DO CELULAR É UMA PILHA DE CENAS, E ROLA NATURAL (09/09/2026).

   ESTA FOLHA TINHA DOIS REGIMES ATÉ HOJE. O GUIADO era o desenho: cada cartão
   com min-height de uma viewport, uma cena por tela, e o dia-mobile.js
   travando a rolagem para encaixar um cartão por gesto. A LISTA LIVRE
   (.dia-mobile-lista) era o plano B — entrava quando a cena não coubesse na
   tela, quando a tela fosse baixa ou quando o visitante pedisse movimento
   reduzido. O scroll travado morreu por ordem do dono, porque estava bugado, e
   com ele morreu o regime guiado inteiro. O QUE SOBROU É A LISTA: ela deixou
   de ser plano B e virou O desenho, sem classe nenhuma para ligá-la e sem
   variante para reconciliar.

   O QUE ISSO APAGOU DAQUI, item por item, para ninguém procurar depois:
     - o min-height de viewport dos cartões e o --dia-mobile-viewport que o
       alimentava, junto com o @supports de 100dvh que existia só para ele;
     - o --dia-lado calculado contra a --dia-mobile-reserva que o JS media (a
       foto agora é min(100%, 420px) e ponto final, sem medição nenhuma);
     - as linhas de grade da copy cravadas em --dia-mobile-titulo-alt e
       --dia-mobile-sub-alt, que serviam para as cinco cenas terem exatamente a
       mesma abertura dentro do mesmo orçamento de tela;
     - a presença por cartão (--dia-mobile-presenca), o fade que acendia a cena
       encaixada e apagava as vizinhas;
     - o clip-path de --dia-mobile-clip, que escondia a cena anterior atrás da
       faixa do cabeçalho;
     - as três regras .dia-mobile-lista e o bloco de movimento reduzido que
       duplicava o layout delas. Com um regime só, o reduce não precisa de
       layout próprio: sobrou nele o que é de fato movimento.

   A ÚNICA COISA QUE ENTROU foi no trilho: a linha passou a se PREENCHER atrás
   da bolinha, e as estações já cruzadas escurecem com .is-passed, como no
   trilho vertical do desktop. Era o pedido do dono junto com a morte do scroll
   travado — "dar pra entender realmente esse horário passando". A conta inteira
   está na nota do .dia-trilho::before, lá embaixo.

   AS !important DOS CARTÕES NÃO SÃO SOBRA E NÃO PODEM SAIR. Duas folhas
   deixam .dia-cartao invisível por padrão, e as duas estão certas no desktop,
   onde os cinco dividem UMA célula de grade e só o ato no ar aparece: o
   style.css com opacity:0, translateY(14px) e pointer-events:none, e o
   dia-animacao.css repetindo a mesma coisa em (0,3,1) com a classe
   .dia-section.dia-animada. No celular os cinco existem ao mesmo tempo, um
   embaixo do outro, então esta folha tem de vencer as duas — e a única
   especificidade que vence (0,3,1) sem virar seletor barroco é o peso. */
@media (max-width: 960px) {
    .dia-section {
        /* Pé 24->64 (09/09/2026, auditoria de respiros). Com 24 o fecho visual
           dava 56 (os 24 mais os 32 internos do último cartão) contra os 96 do
           sistema de celular, e 64 + 32 = 96 devolvia a jornada à família.
           O PÉ DA SEÇÃO CONTINUA 64 e o número não se mexeu; o que mudou é o
           que vem antes dele. No regime guiado os cartões tinham 32px de
           padding vertical; agora todos têm os 56px que separam uma cena da
           seguinte, inclusive o último — que é exatamente o que o modo lista
           já fazia. Então o fecho visual mede 56 + 64 = 120, não 96. Fica
           assim de propósito nesta rodada: o último cartão é o único que
           termina em BOTÃO (a .dia-btn do dia-visual.css, com 48px de margem
           por cima — eram 32 até hoje, quando o dono pediu o botão mais para
           baixo), e um CTA quer mais ar embaixo que uma fotografia. Quem
           quiser os 96 de volta dá ao cartão 5 um padding-bottom de 32px — é
           uma regra, e é aqui que ela mora. */
        padding: 48px 0 64px;
        scroll-margin-top: var(--dia-teto);
        --dia-teto: 88px;
        --dia-larg: min(92%, 480px);

        /* AS DUAS TINTAS DO TRILHO DO CELULAR (09/09/2026). O fio é o cinza de
           sempre da linha, #e0e0e5, 1,31:1 sobre branco. O cheio é o trecho do
           dia que já passou, e ele é MAIS FORTE de propósito: #707077, 4,91:1,
           que é o mesmo cinza que o dia-visual.css dá ao rótulo do trilho no
           desktop. Foi o degrau escolhido porque o pedido era "dar pra
           entender realmente esse horário passando" — a #a2a2aa das bolinhas
           passadas (2,53:1) some num fio de 1px à distância de um braço, e o
           --dia-tinta-2 do preenchimento do desktop (6,06:1) num traço
           horizontal lê como sublinhado, não como tempo.
           SÃO VARIÁVEIS PARA O ESCURO TER ALVO: o dia-escuro.css troca só
           estas duas no bloco de celular dele e não reescreve gradiente
           nenhum, então os dois temas não podem divergir de desenho. */
        --dia-trilho-fio: #e0e0e5;
        --dia-trilho-cheio: #707077;
    }

    .dia-topo.dia-intro {
        position: relative;
        flex: none;
        width: var(--dia-larg);
        padding: 0 0 24px;
        /* MARGEM FIXA (09/09/2026). Aqui havia uma compensação,
           calc(32px - var(--dia-mobile-intro-inset, 32px)), e ela existia
           porque a abertura entrava no orçamento de altura da primeira tela do
           regime guiado: o recuo devolvia à cena o que a intro tomava. Sem
           encaixe de viewport não há orçamento a devolver, e a margem volta a
           ser um número. (A variável era outra que a --dia-intro-inset do
           dia-intro.js, que continua viva e não tem nada com isto.) */
        margin: 0 auto 32px;
        border: 0;
        border-bottom: 1px solid var(--dia-fio);
        text-align: left;
    }

    .dia-topo.dia-intro::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 36px;
        height: 1px;
        background: var(--dia-tinta);
    }

    .dia-intro-chamada {
        display: flex;
        justify-content: flex-start;
    }

    .dia-intro .dia-headline {
        display: block;
        max-width: 100%;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--dia-tinta);
        font-size: clamp(1.75rem, 7vw, 2.3rem);
        font-weight: 400;
        line-height: 1.16;
        letter-spacing: -0.035em;
        text-align: left;
        text-wrap: balance;
    }

    .dia-section .dia-trilha {
        display: block;
        width: 100%;
        margin-top: 0;
    }

    .dia-section .dia-passos { display: none; }

    .dia-section .dia-palco {
        position: relative;
        top: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: auto;
        padding: 0;
        gap: 0;
    }

    .dia-section .dia-quadro {
        display: block;
        flex: none;
        width: var(--dia-larg);
        min-height: 0;
    }

    /* OS CINCO ARTIGOS SÃO UMA PILHA COMUM. Altura natural, um embaixo do
       outro, e 56px entre uma cena e a seguinte. O grid-area:auto desfaz a
       célula única do desktop (é cinto e suspensório: o .dia-quadro já é
       display:block aqui) e as cinco !important desfazem as duas folhas que
       escondem o cartão fora do ar — ver a nota do topo. */
    .dia-section .dia-cartao[data-ato] {
        position: relative;
        grid-area: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 0 0 56px;
        margin: 0;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        z-index: auto !important;
        pointer-events: auto !important;
        scroll-margin-top: var(--dia-teto);
    }

    /* A abertura, reparentada pelo dia-mobile.js para dentro do cartão 1. Ela
       mora aqui uma vez só: os cartões 2 a 5 não recebem mais cópia nenhuma. */
    .dia-section .dia-cartao > .dia-topo.dia-intro {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0 0 24px;
        border: 0;
    }

    .dia-section .dia-cartao > .dia-cena { display: none; }

    /* O horário abre a cena; a linha completa continua abaixo da fotografia.
       Esta é a pílula base — o dia-visual.css a transforma em linha com fio
       no bloco de celular dele, e é aquele desenho que se vê. */
    .dia-section .dia-cartao > .dia-hora {
        position: static;
        display: block;
        flex: none;
        width: auto;
        height: auto;
        min-width: 76px;
        min-height: 0;
        padding: 5px 14px;
        margin: 0 0 12px;
        border: 1px solid #e7e7eb;
        border-radius: 999px;
        background: #f5f5f7;
        box-shadow: none;
        color: #64646d;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0;
        text-align: center;
        overflow: visible;
        clip-path: none;
        white-space: nowrap;
    }

    /* As duas linhas seguem em grade, mas com as alturas que o conteúdo pedir:
       as reservas medidas pelo JS existiam para as cinco cenas abrirem no
       mesmo lugar dentro da mesma tela, e não há mais tela a dividir. */
    .dia-mobile-copy[hidden] {
        display: grid;
        grid-template-rows: auto auto;
        gap: 10px;
        width: 100%;
        margin: 0 0 20px;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        visibility: visible !important;
    }

    .dia-mobile-copy > h3 {
        align-self: center;
        justify-self: center;
        margin: 0;
        max-width: 28ch;
        color: var(--dia-tinta);
        font-size: clamp(1.25rem, 5.64vw, 1.5rem);
        font-weight: 400;
        line-height: 1.25;
        letter-spacing: -0.025em;
        text-wrap: balance;
    }

    .dia-cartao[data-ato="3"] .dia-mobile-copy > h3 { max-width: 20ch; }

    .dia-mobile-copy > p {
        align-self: start;
        justify-self: center;
        max-width: 40ch;
        margin: 0;
        color: #73737a;
        font-size: 13px;
        font-weight: 300;
        line-height: 1.5;
        letter-spacing: -0.005em;
        text-wrap: pretty;
    }

    /* O trilho embaixo de cada foto: o <ol> original no cartão 1 e um clone
       (.dia-mobile-marcos) nos outros quatro. Mesma largura da fotografia,
       para a linha do tempo nascer e morrer nas bordas dela. */
    .dia-section .dia-cartao > .dia-trilho {
        position: relative;
        display: grid;
        flex: none;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        width: min(100%, 420px);
        height: auto;
        padding: 12px 0 8px;
        margin: 20px 0 0;
        background: var(--dia-branco);
        box-shadow: none;
    }

    /* A LINHA AGORA SE PREENCHE ATRÁS DA BOLINHA (09/09/2026, pedido do dono:
       "dar pra entender realmente esse horário passando"). Até aqui o fio era
       um cinza chapado de ponta a ponta e só a bolinha de 7px dizia onde o dia
       estava — o trecho já vivido e o que ainda vem tinham exatamente a mesma
       aparência, e a linha não contava nada sozinha. Agora o mesmo
       --dia-mobile-progresso que move a bolinha corta a linha em dois: para
       trás vem em --dia-trilho-cheio, para a frente em --dia-trilho-fio.
       O CORTE É DURO DE PROPÓSITO, e o truque é o `0` do segundo ponto de
       parada: uma posição menor que a anterior não volta atrás, o CSS a eleva
       à posição anterior e as duas cores se encontram sem um pixel sequer de
       degradê. Um gradiente macio aqui leria como sombra, não como marca de
       tempo.
       A CONTA BATE COM A DA BOLINHA PORQUE AS DUAS CORREM NA MESMA RÉGUA: o
       ::before vai de 10% a 10% da caixa, então os 100% do gradiente são
       exatamente os 80% que a bolinha percorre no calc do ::after logo abaixo.
       O 0 de um é o 0 do outro, e o 1 também — quem mexer num mexe no outro.
       O fundo do <ol> é o papel da seção, então nada disso precisa saber se o
       tema é claro ou escuro: só as duas variáveis mudam. */
    .dia-trilho::before {
        content: '';
        position: absolute;
        left: 10%;
        right: 10%;
        top: 16px;
        bottom: auto;
        height: 1px;
        width: auto;
        transform: none;
        background: linear-gradient(90deg, var(--dia-trilho-cheio) calc(var(--dia-mobile-progresso, 0) * 100%), var(--dia-trilho-fio) 0);
    }

    /* A bolinha viajante. Sem transição: ela é a posição da rolagem, e
       qualquer suavização a faria chegar depois do dedo. */
    .dia-trilho::after {
        content: '';
        position: absolute;
        z-index: 1;
        left: calc(10% + var(--dia-mobile-progresso, 0) * 80%);
        top: 16px;
        right: auto;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--dia-tinta);
        box-shadow: none;
        transform: translate(-50%, -50%);
        transition: none;
    }

    .dia-section .dia-trilho > .dia-marco {
        display: block;
        height: auto;
        padding: 16px 0 0;
        color: #73737a;
        font-size: 0.75rem;
        line-height: 1.5;
        text-align: center;
        white-space: nowrap;
    }

    .dia-section .dia-trilho > .dia-marco.is-mobile-current {
        color: var(--dia-tinta);
    }

    /* As bolinhas das estações, sobre a linha. */
    .dia-trilho > .dia-marco::after {
        left: 50%;
        right: auto;
        top: 4px;
        bottom: auto;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        opacity: 1;
        transform: translate(-50%, -50%);
        background: #cfcfd4;
        /* A regra base do style.css transiciona opacity, que aqui é sempre 1;
           quem muda é a tinta, quando a bolinha cruza a estação. */
        transition: background-color 0.35s var(--dia-calmo);
    }

    /* A ESTAÇÃO JÁ CRUZADA ESCURECE (09/09/2026), espelhando o trilho vertical
       do desktop, que faz exatamente isto no dia-trilho.css com o mesmo par de
       cinzas. Quem escreve a classe é o dia-mobile.js, nos cinco trilhos de uma
       vez. O tom fica um degrau ABAIXO do preenchimento da linha de propósito:
       assim a estação continua sendo um ponto sobre a linha em vez de sumir
       dentro dela. */
    .dia-trilho > .dia-marco.is-passed::after {
        background: #a2a2aa;
    }

    /* O !important DESTA OPACIDADE CAIU EM 09/09/2026, e é a única exceção à
       nota do topo desta folha — que trata das !important dos CARTÕES, essas
       sim indispensáveis e intocadas.
       ELE ERA SOBRA. Nenhuma folha carregada pelo index.html escreve opacity na
       .dia-foto: o style.css só lhe dá caixa, fundo e raio, o dia-visual.css e o
       dia-escuro.css só trocam o fundo. As duas regras que escondem cena fora do
       ar miram o .dia-cartao, não a fotografia. O important veio do desenho
       antigo do celular, quando o fade de presença por cartão (a variável
       --dia-mobile-presenca, morta na rodada da manhã de hoje) acendia e
       apagava ESTA caixa, e era preciso vencê-lo aqui.
       E ELE ATRAPALHAVA, porque important do autor ganha até de animação da Web
       Animations API: era por causa dele que a entrada da manhã tinha de fazer o
       fade na .dia-arte em vez de na placa inteira — e foi esse fade separado
       que deixou a marca d'água do horário aparecer sozinha por uns 300ms, o
       "fundo tipo de celular com horários" que o dono reprovou. Com o peso fora,
       o dia-animacao.css apaga a .dia-foto INTEIRA enquanto ela espera (com 5
       classes de especificidade, que vencem as 2 daqui de sobra) e a fotografia
       entra composta, de uma peça só.
       O `opacity: 1` FICA. Ele é o estado de repouso para o qual a placa volta
       quando a animação de entrada é cancelada, e não custa nada. */
    .dia-cartao .dia-foto {
        width: min(100%, 420px);
        container-type: inline-size;
        flex-shrink: 0;
        opacity: 1;
    }

    .dia-section .dia-cartao :is(.dia-noti, .dia-zap-audio, .dia-zap-resp, .zap4-bolha) {
        opacity: 1;
    }

    .dia-cartao .dia-noti {
        width: min(86%, 392px);
        --dia-noti-icone: clamp(30px, 10cqw, 44px);
        gap: clamp(8px, 2.5cqw, 13px);
        padding: clamp(10px, 3cqw, 15px);
        border-radius: clamp(16px, 5cqw, 25px);
    }

    .dia-cartao .dia-noti-linha { gap: 7px; }
    .dia-cartao .dia-noti-titulo { font-size: clamp(11px, 3.8cqw, 17px); }
    .dia-cartao .dia-noti-hora { font-size: clamp(9px, 2.8cqw, 13px); }
    .dia-cartao .dia-noti-sub { font-size: clamp(10px, 3.1cqw, 13.76px); }
    .dia-cartao .dia-noti-icone > img { max-width: 62%; max-height: 62%; }

    .dia-cartao[data-ato="2"] .dia-zap,
    .dia-cartao[data-ato="4"] .zap4-fio {
        width: min(84%, 400px);
    }

    .dia-cartao[data-ato="4"] .zap4-envio-desktop { display: none; }

    .dia-cartao[data-ato="2"] .dia-zap-audio,
    .dia-cartao[data-ato="2"] .dia-zap-resp,
    .dia-cartao[data-ato="4"] .zap4-bolha {
        width: min(70cqw, 352px);
        max-width: min(70cqw, 352px);
    }

    @container (max-width: 300px) {
        .dia-cartao[data-ato="4"] .zap4-fio {
            top: 3%;
            bottom: auto;
        }
    }
}

/* O teto continua sendo o respiro sob o cabeçalho de vidro, e ele é lido pelo
   dia-mobile.js como linha de referência das âncoras — os dois têm de dizer o
   mesmo número. (Aqui também morava um h3 menor, e ele saiu junto com o
   orçamento de tela: sem cena por viewport, nada obriga a manchete a encolher
   num celular deitado.) */
@media (max-width: 960px) and (max-height: 640px) {
    .dia-section { --dia-teto: 86px; }
}

/* Com um regime só, o movimento reduzido não precisa de layout próprio: o que
   ele desliga é a transição de tinta dos marcos e das estações, que é a única
   coisa que ainda se move nesta folha. A bolinha e o preenchimento da linha
   NÃO entram aqui — os dois são a posição da rolagem desenhada, e quem rolou
   já pediu esse movimento. */
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
    .dia-section .dia-trilho > .dia-marco,
    .dia-trilho > .dia-marco::after {
        transition: none;
    }
}