*{ box-sizing:border-box; margin:0; padding:0; }
    html{ scroll-behavior:smooth; }
    body{ background:#061229; }
    a{ color:#E4C173; text-decoration:none; }
    a:hover{ color:#E4C173; }
    img{ display:block; }
    ::selection{ background:#E4C173; color:#061229; }

    @keyframes vp2-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
    @keyframes vp2-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

    .vp2-up{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
    .vp2-in .vp2-up{ opacity:1; transform:none; }
    .vp2-nojs .vp2-up{ opacity:1; transform:none; }

    .vp2-scale{ overflow:hidden; }
    .vp2-scale img{ transform:scale(1.14); transition:transform 1.6s cubic-bezier(.2,.7,.2,1); }
    .vp2-in .vp2-scale img, .vp2-scale.vp2-in img{ transform:scale(1); }
    .vp2-nojs .vp2-scale img{ transform:none; }

    .vp2-link{ position:relative; }
    .vp2-link::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:#E4C173; transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
    .vp2-link:hover::after{ transform:scaleX(1); }

    .vp2-gold{ transition:transform .22s ease, box-shadow .22s ease; }
    .vp2-gold:hover{ transform:translateY(-3px); box-shadow:0 26px 60px -22px #E4C17370; }

    /* O DEDO PRECISA SENTIR QUE APERTOU.
       Todo o retorno visual dos botoes estava no :hover — e :hover nao existe
       em tela de toque. No celular, o botao ficava mudo entre o toque e a acao,
       e quem nao ve resposta acha que nao pegou e toca de novo.
       O :active dura o tempo do dedo encostado e nao muda nada no computador. */
    .vp2-gold:active{
      transform:translateY(1px) scale(.985);
      box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
      transition:transform .06s ease, box-shadow .06s ease;
    }
    #vp2-root a:active, #vp2-root button:active{ -webkit-tap-highlight-color:transparent; }
    /* Aparelho que pede menos movimento nao ganha o afundamento — so o escurecer. */
    @media (prefers-reduced-motion: reduce){
      .vp2-gold:active{ transform:none; filter:brightness(.9); }
    }

    .vp2-foto{ transition:filter .5s ease; }
    .vp2-foto img{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
    .vp2-foto:hover img{ transform:scale(1.05); }

    /* ⛔ ORDEM DELE, 03/08: o preto e branco que vira colorido FICA — "acho otimo
       esta ideia". Eu tinha tirado por achar que hover nao servia no celular; o que
       faltava era o TOQUE. Agora sao dois toques: o 1o colore, o 2o oferece
       compartilhar. Nunca mais desce para a galeria sozinho. */
    .vp2-rosto img{ filter:grayscale(1) contrast(1.05);
                    transition:filter .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
    .vp2-rosto:hover img,
    .vp2-rosto.vp2-colorido img{ filter:none; transform:translateY(-5px); }
    .vp2-rosto:hover span,
    .vp2-rosto.vp2-colorido span{ color:#E4C173 !important; }
    /* o 2o toque tem aviso: a foto ganha o fio de ouro */
    .vp2-rosto.vp2-colorido img{ box-shadow:0 0 0 1px #C9A24B99, 0 10px 24px rgba(0,0,0,.3); }
    .vp2-track:hover{ animation-play-state:paused; }
    .vp2-sem-motion .vp2-track{ animation:none !important; }

    /* Quando o aparelho pede menos movimento, a faixa PARA — e assim ela ficava
       morta e cortada, parecendo defeito. Aqui ela vira uma tira que se arrasta
       com o dedo: respeita a escolha da pessoa e continua viva. */
    @media (prefers-reduced-motion: reduce){
      #vp2-root section:has(> .vp2-marquee),
      #vp2-root section:has(> .vp2-track){
        overflow-x:auto !important;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
      }
      #vp2-root section:has(> .vp2-marquee)::-webkit-scrollbar,
      #vp2-root section:has(> .vp2-track)::-webkit-scrollbar{ display:none; }
      #vp2-root .vp2-marquee > div:nth-child(2),
      #vp2-root .vp2-track > div:nth-child(2){ display:none !important; }
      #vp2-root .vp2-marquee{ padding-left:22px; padding-right:22px; }
      #vp2-root .vp2-track{ padding-left:22px; padding-right:22px; }
    }

    #vp2-nome::placeholder{ color:#8FA0C4; font-family:'Playfair Display', serif; font-style:italic; font-weight:400; }
    #vp2-busca::placeholder{ color:#8FA0C4; }
    #vp2-chat-log::-webkit-scrollbar{ width:6px; }
    #vp2-chat-log::-webkit-scrollbar-thumb{ background:#C9A24B55; border-radius:99px; }
    @keyframes vp2-dot{ 0%,80%,100%{ opacity:.2; } 40%{ opacity:1; } }
    .vp2-dot{ animation:vp2-dot 1.2s infinite; }
    .vp2-dot:nth-child(2){ animation-delay:.16s; }
    .vp2-dot:nth-child(3){ animation-delay:.32s; }
    #vp2-nome:focus{ border-color:#E4C173; }

    /* v1 03/08 — alvo de toque 48px (regua do projeto para 45+) */
    .vp2-filtro{ min-height:48px; }
    #vp2-chat-x{ min-width:48px; min-height:48px; }
    #vp2-chat-go{ width:44px !important; height:44px !important; }
    /* v1 03/08 — anel de foco visivel em tudo que recebe teclado */
    #vp2-root a:focus-visible, #vp2-root button:focus-visible, #vp2-root input:focus-visible,
    #vp2-root label:focus-visible{ outline:2px solid #E4C173; outline-offset:3px; }
    /* v1 03/08 — movimento reduzido tambem sem JS */
    @media (prefers-reduced-motion: reduce){
      #vp2-root *, #vp2-root *::before, #vp2-root *::after{ animation:none !important; transition:none !important; }
      .vp2-up{ opacity:1 !important; transform:none !important; }
      .vp2-scale img{ transform:none !important; }
    }
    .vp2-sem-motion *, .vp2-sem-motion *::before, .vp2-sem-motion *::after{ animation:none !important; transition:none !important; }
    .vp2-sem-motion .vp2-up{ opacity:1 !important; transform:none !important; }
    .vp2-sem-motion .vp2-scale img{ transform:none !important; }

    /* ======== v1 03/08 — HERO: a foto do trofeu ate o meio da pagina ======== */
    .vp2-hero-palco{ position:relative; width:100%; height:clamp(940px,112vh,1160px); overflow:hidden; }
    .vp2-hero-bg{ position:absolute; inset:0; overflow:hidden; background:#061229; }
    .vp2-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:58% 30%; opacity:.30; filter:blur(26px) saturate(.7); transform:scale(1.12); }
    /* v1 03/08 — ORDEM DELE: a foto de entrada aparece INTEIRA. Ela comecava em
       top:0 e os primeiros 92px ficavam atras do cabecalho fixo, cortando as cabecas.
       E a mascara comia 22% da esquerda. Agora ela desce para baixo do cabecalho,
       cabe por inteiro, e ganha contorno e sombra: copia montada, como o resto. */
    .vp2-hero-img{ position:absolute; top:92px; right:4%; width:min(52%, 760px); height:auto; max-height:calc(100% - 130px);
                   object-fit:contain; z-index:2;
                   border:1px solid #ffffff2b; box-shadow:0 22px 50px rgba(0,0,0,.55);
                   -webkit-mask-image:none; mask-image:none; }
    .vp2-hero-veu{ position:absolute; inset:0; background:linear-gradient(to top,#061229 0%, #061229e8 20%, #061229a8 40%, #0612295c 58%, #06122900 80%), linear-gradient(to right,#061229b0 0%, #06122960 26%, #06122900 52%); }
    .vp2-hero-veu::after{ display:none; }
    /* o tipo sobe e vaza por cima da foto */
    .vp2-hero-txt{ position:relative; z-index:3; margin-top:clamp(-460px,-42vh,-320px); }
    .vp2-hero-row{ max-width:min(100%,52vw) !important; }


    /* ======== v1 03/08 — moldura da imprensa segue a orientacao da pagina ========
       A moldura era 3/4 para tudo. Pagina deitada ficava boiando: a "Feijoada e Samba"
       ocupava 39% da altura da moldura, com 61% de vazio. Agora cada uma tem a sua. */

    /* ======== v1 03/08 — o veu da foto de 1 ano acompanha a legenda ========
       O corpo do texto pequeno subiu de 13px para 1rem em todo o site, para o publico
       +45. A legenda desta foto cresceu junto (177px -> 324px no celular) e escalou
       para a parte clara da imagem, onde nao se lia. ⛔ O texto fica em cima da foto,
       como ele aprovou. Quem se ajusta e o veu, que agora sobe ate onde o texto vai. */
    .vp2-foto-legenda .vp2-veu-foto{
      background:linear-gradient(to top, #061229f2 0%, #061229d9 38%, #06122973 60%, #06122900 78%) !important; }
    /* Esta legenda vive DENTRO da foto, em posicao absoluta — o respiro de 120px que
       existe para o texto nao ficar debaixo do botao de WhatsApp nao vale aqui, e era
       ele que empurrava a legenda 120px para cima, para a parte clara da imagem. */
    .vp2-foto-legenda .vp2-zona-botao{ padding-bottom:0 !important; }

    /* ======== v1 03/08 — parede de museu da IMPRENSA ======== */
    /* ======== v1 03/08 — a IMPRENSA sem moldura forcada ========
       A moldura 3/4 igual para todas obrigava uma pagina deitada a boiar no meio de
       uma caixa em pe, com faixa escura em cima e embaixo. Ficou horrivel, e com
       razao. Agora nao ha moldura: a pagina ocupa a largura inteira do cartao e a
       altura que ela tem. Coluna tipo jornal, cada recorte no tamanho dele. */
    .vp2-acervo{ columns:3; column-gap:28px; }
    .vp2-pagina{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
                 display:block; margin:0 0 28px; background:#08172F; border:1px solid #ffffff1a;
                 box-shadow:0 10px 24px rgba(0,0,0,.22); overflow:hidden;
                 transition:border-color .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
    .vp2-pagina:hover{ border-color:#C9A24B66; transform:translateY(-4px); }
    /* O trato: passe-partout ESTREITO e igual, e a copia montada sobre ele com fio
       e sombra. O que estragava antes nao era a moldura — era a moldura FORCADA,
       que abria vazio de 60%. Com a altura livre, o passe-partout so emoldura. */
    .vp2-pagina-moldura{ display:block; aspect-ratio:auto; padding:26px;
                         background:#03091A; border-bottom:1px solid #ffffff14; overflow:hidden; }
    .vp2-pagina-moldura img{ width:100% !important; height:auto !important;
                             max-width:100% !important; max-height:none !important;
                             object-fit:contain !important; display:block;
                             border:1px solid #ffffff26 !important;
                             box-shadow:0 10px 26px rgba(0,0,0,.5) !important; }
    .vp2-pagina:hover .vp2-pagina-moldura img{ border-color:#C9A24B7a !important; }
    .vp2-pagina-txt{ background:#08172F; }
    .vp2-pagina-txt{ font-family:'Jost',sans-serif; font-weight:300; font-size:1rem; line-height:1.8; color:#8FA0C4;
                     padding:20px 22px 26px; flex:1 1 auto; }

    /* ======== v1 03/08 — as quatro honras na mesma moldura, como a parede de imprensa ======== */
    #honras .vp2-foto{ display:flex; flex-direction:column; background:#08172F; border:1px solid #ffffff1a;
                       box-shadow:0 10px 24px rgba(0,0,0,.18); }
    #honras .vp2-foto img{ aspect-ratio:4/3; height:auto; object-fit:contain; padding:16px;
                           background:#050F22 !important; border-bottom:1px solid #ffffff14; }
    #honras .vp2-foto > div{ padding:20px 22px 24px !important; flex:1 1 auto; }





    /* v1 03/08 — o FALE CONOSCO tinha 130px de vazio embaixo dos dois links pequenos.
       Ele fotografou a faixa vazia e perguntou o que era. Fecha. */
    #contato{ padding-bottom:64px !important; }
    #contato > div > div:last-child{ margin-top:26px !important; }


    /* ======== v1 03/08 — ORDEM DELE: tocar na foto abre a foto, e SO DEPOIS
       aparece a opcao de compartilhar. Antes, o toque no rosto pulava direto
       para a galeria e o Android oferecia compartilhar por cima. ======== */
    #vp2-lupa{ position:fixed; inset:0; z-index:200; display:none;
      background:#03091Aef; backdrop-filter:blur(6px);
      align-items:center; justify-content:center; padding:20px; }
    #vp2-lupa[data-aberta]{ display:flex; }
    #vp2-lupa-caixa{ max-width:min(94vw,860px); width:100%; display:flex; flex-direction:column;
      align-items:center; gap:16px; }
    #vp2-lupa img{ max-width:100%; max-height:66vh; width:auto; height:auto; display:block;
      border:1px solid #ffffff2b; box-shadow:0 22px 50px rgba(0,0,0,.55); background:#03091A; }
    #vp2-lupa-txt{ font-family:'Jost',sans-serif; font-weight:300; font-size:1.0625rem;
      line-height:1.6; color:#C9D3E9; text-align:center; max-width:640px; }
    #vp2-lupa-acoes{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
    #vp2-lupa-acoes button{ appearance:none; cursor:pointer; font-family:'Jost',sans-serif;
      font-weight:500; font-size:1rem; letter-spacing:.12em; text-transform:uppercase;
      border-radius:999px; padding:15px 30px; min-height:48px; transition:transform .2s ease; }
    #vp2-lupa-share{ background:#E4C173; color:#061229; border:1px solid #E4C173; }
    #vp2-lupa-fechar{ background:transparent; color:#C9D3E9; border:1px solid #1E3057; }
    #vp2-lupa-acoes button:hover{ transform:translateY(-2px); }
    #vp2-lupa-acoes button:focus-visible{ outline:2px solid #E4C173; outline-offset:3px; }

    /* ⛔ ORDEM DELE, 03/08: o Assistente Vip e o WhatsApp ficam VISIVEIS o site
       inteiro, no PC e no celular. Eu tinha feito os dois recuarem durante a
       rolagem para nao pousarem em cima das fotos — decisao minha, que ele nao
       pediu e nao quer. Nao voltar a fazer isso. */

    /* ======== v1 03/08 — foto quadrada em moldura quadrada ========
       A foto de O PROGRAMA e 938x939 — quadrada. Estava numa caixa deitada com
       "contain": 36% de vazio no celular. Moldura quadrada + "cover" da corte zero
       e vazio zero. */
    .vp2-retrato-quadro{ aspect-ratio:1/1; max-height:720px; overflow:hidden; }

    /* ======== v1 03/08 — a foto de 1 ano vira PRANCHA montada ========
       Ela tambem e quase quadrada (1050x1005). Esticada na largura toda do PC,
       sobravam 46% de faixa preta dos dois lados. Agora e uma copia montada e
       centrada, com contorno e sombra, e a legenda acompanha a largura dela. */
    @media (min-width:901px){
      .vp2-foto-legenda{ padding:0 44px; }
      .vp2-foto-legenda > img{
        width:auto !important; max-width:min(100%, 880px) !important; max-height:74vh !important;
        margin:0 auto !important; display:block;
        border:1px solid #ffffff2b; box-shadow:0 20px 46px rgba(0,0,0,.5); }
      .vp2-foto-legenda .vp2-pad{ max-width:880px !important; padding:0 0 34px !important; }
      .vp2-foto-legenda .vp2-veu-foto{ left:50% !important; transform:translateX(-50%);
        width:min(100%, 880px) !important; }
    }

    /* ======== v1 03/08 — o passe-partout ========
       O vazio ao redor de uma pagina deitada numa moldura em pe lia como buraco,
       porque o fundo da moldura era quase a mesma cor do cartao. Album de luxo faz
       o contrario: a moldura e IGUAL para todas, e o que varia e a copia montada
       sobre o passe-partout. Entao o passe-partout ganha cor propria, um debrum
       interno e a copia ganha contorno e sombra — ela flutua, nao sobra. */
    #honras .vp2-foto img{
      background:#03091A !important;
      border:1px solid #ffffff2b !important;
      box-shadow:0 14px 30px rgba(0,0,0,.45) !important; }

    /* ======== v1 03/08 — a galeria em DOIS tamanhos, e nada fora deles ======== */
    /* ======== v1 03/08 — a GALERIA nao corta mais nenhuma foto ========
       A grade forcava 3/4 em tudo, com "cover": cortava 13% da foto em media e
       ATE 34% nas piores — rosto decepado. Album nao corta o retrato para caber na
       pagina. Agora e coluna, como a parede da imprensa: cada foto ocupa a largura
       inteira do cartao e a altura que ela tem. Corte: zero. */
    .vp2-masonry{ columns:3; column-gap:26px; }
    .vp2-item{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
               display:block; margin:0 0 26px; padding:14px 14px 0; background:#061229;
               border:1px solid #ffffff14; box-shadow:0 10px 24px rgba(0,0,0,.18); overflow:hidden; }
    .vp2-item > img{ width:100% !important; height:auto !important;
                     aspect-ratio:1/1 !important; object-fit:contain !important;
                     background:#03091A !important; display:block;
                     border:1px solid #ffffff2b !important;
                     box-shadow:0 10px 26px rgba(0,0,0,.5) !important; }
    .vp2-item:hover > img{ border-color:#C9A24B7a !important; }
    .vp2-item-largo{ grid-column:auto; }
    .vp2-item-txt{ padding:15px 16px 19px; }


    /* ======== v1 03/08 — o bloco de legenda da galeria tem altura minima ========
       Antes: card com quatro linhas de legenda ao lado de card com uma, e dois cards
       sem legenda nenhuma. A grade estica todos a mesma altura e o vazio sobrava
       embaixo dos curtos. Album nao tem buraco: o bloco tem piso e o texto se apoia
       nele. */
    .vp2-item-txt{ display:block; padding:16px 4px 20px; min-height:104px; }


    /* ======== v1 03/08 — correcoes do laudo de design ======== */
    /* a ficha tecnica da imprensa vira ficha: faixa propria entre dois filetes */
    .vp2-pagina-txt > span:nth-of-type(2){
      padding:12px 0 !important; margin:14px 0 !important;
      border-top:1px solid #C9A24B7a; border-bottom:1px solid #ffffff14; display:block; }

    /* o botao do WhatsApp cobria o fim do paragrafo na primeira tela do celular */
    @media (max-width:900px){ .vp2-hero-txt{ padding-bottom:104px !important; } }

    /* verde de sistema fora: os dois flutuantes com a mesma cara */
    /* o WhatsApp flutuante chama atencao, mas dentro da paleta: ouro cheio,
       icone navy. O Assistente fica em segundo plano, so com o fio. */
    a[data-vpz="1"]{ background:#E4C173 !important; border:1px solid #E4C173 !important;
                     box-shadow:0 14px 32px rgba(0,0,0,.42) !important; }
    a[data-vpz="1"] svg path{ fill:#061229 !important; }
    #vp2-chat-open{ background:#0A1B3A !important; border:1px solid #C9A24B99 !important;
                    box-shadow:0 12px 28px rgba(0,0,0,.34) !important; }

    /* o menu pousava com o titulo colado na barra */
    #vp2-root section[id]{ scroll-margin-top:104px; }

    /* brilho dourado fora */
    .vp2-gold:hover{ box-shadow:0 10px 24px rgba(0,0,0,.18) !important; }
    #vp2-gerar{ box-shadow:none !important; }

    /* o kicker alinhava pelo rodape do paragrafo e boiava 380px abaixo do titulo */
    @media (min-width:901px){
      #coberturas > div > .vp2-2col:first-child,
      #honras     > div > .vp2-2col:first-child,
      #assistir   > div > .vp2-2col:first-child,
      #galeria    > div > .vp2-2col:first-child{ align-items:start !important; }
    }

    /* viuva de titulo: "Cidadao do Rio de / Janeiro" */
    #vp2-root h1, #vp2-root h2, #vp2-root h3{ text-wrap:balance; }

    /* os dois LPs e a foto de O PROGRAMA paravam de caber e eram cortados */
    #discos .vp2-foto img{ aspect-ratio:1/1 !important; object-fit:contain !important;
      background:#03091A !important; padding:16px;
      border:1px solid #ffffff2b !important; box-shadow:0 14px 30px rgba(0,0,0,.45) !important; }
    .vp2-retrato-quadro{ background:#03091A; padding:16px;
      border:1px solid #ffffff2b; box-shadow:0 14px 30px rgba(0,0,0,.45); }
    .vp2-retrato-quadro img{ object-fit:contain !important; }

    /* ritmo vertical numa escala so */
    #vp2-root section{ padding-top:120px; padding-bottom:120px; }
    @media (max-width:900px){ #vp2-root section{ padding-top:88px; padding-bottom:88px; } }


    /* ======== v1 03/08 — pedidos dele para o PC ========
       1) corpo de texto um pouco maior: o publico e +45
       2) os dois botoes do FALE CONOSCO chamando atencao
       3) a foto do microfone do tamanho da foto do trofeu           */
    @media (min-width:901px){
      /* corpo de texto grande de verdade — o publico e +45 e ele reclamou duas vezes */
      #vp2-root section p,
      #vp2-root section li{ font-size:1.4375rem !important; line-height:1.8 !important; }
      #vp2-root .vp2-pagina-txt,
      #vp2-root .vp2-item-txt,
      #vp2-root .vp2-pagina-txt *,
      #vp2-root .vp2-item-txt *{ font-size:1.25rem !important; line-height:1.7 !important; }
      #vp2-root .vp2-item-txt > div:first-child,
      #vp2-root .vp2-pagina-txt > div:first-child{ font-size:1.5rem !important; }
      /* ⛔ NAO usar seletor largo em span: o "um so palco" do titulo e um <span>
         dentro do <h2>, e a regra larga o encolheu para corpo de texto. */
      #vp2-root .vp2-zona-botao{ font-size:1.25rem !important; }
      /* ⛔ eu tinha ENCOLHIDO a foto do microfone para igualar. Era o contrario:
         e a foto do trofeu que cresce ate o tamanho desta. */
    }

    /* o WhatsApp e o e-mail do FALE CONOSCO deixam de ser discretos */
    #contato a[data-vpz="1"]{
      background:#E4C173 !important; border:1px solid #E4C173 !important;
      box-shadow:0 16px 38px rgba(0,0,0,.4) !important; }
    #contato a[data-vpz="1"] *{ color:#061229 !important; }
    #contato a[data-vpz="1"] svg path{ fill:#061229 !important; stroke:#061229 !important; }
    #contato a.vp2-gold:not([data-vpz]){
      background:#0A1B3A !important; border:2px solid #E4C173 !important;
      box-shadow:0 12px 30px rgba(0,0,0,.32) !important; }
    #contato a.vp2-gold:hover{ transform:translateY(-2px); }

    /* ======== v1 03/08 — no computador a historia tem coluna que acompanha a rolagem ======== */
    @media (min-width:901px){ .vp2-sticky{ position:sticky; top:104px; align-self:start; } }

    @media (max-width:1180px){
      .vp2-acervo{ columns:2; }
      .vp2-masonry{ columns:2; }
    }
    @media (max-width:820px){ .vp2-masonry{ columns:2; } }
    @media (max-width:620px){ .vp2-masonry{ columns:1; } .vp2-item-txt{ min-height:92px; } }
    @media (max-width:620px){
      .vp2-casas > span{ font-size:0.6875rem !important; letter-spacing:0.16em !important; padding:9px 13px !important; }
      .vp2-casas{ gap:8px !important; }
    }
    @media (max-width:900px){
      /* v1 03/08 — alvo de toque de 44px+ nos links de texto do rodape e do contato */
      footer a, #contato .vp2-link{ display:inline-block; padding:11px 0; }
    }
    @media (max-width:620px){
      .vp2-masonry{ columns:1; }
      .vp2-item-largo{ grid-column:span 1; }
    }

    @media (max-width: 1200px){
      .vp2-navlinks{ display:none !important; }
      .vp2-burger{ display:flex !important; }
      .vp2-cb:checked ~ .vp2-menu{ display:flex !important; }
    }
    @media (max-width: 900px){
      /* v1 03/08 — no celular a foto do trofeu ocupa a largura toda, nitida e sem
         opacidade, e o tipo vaza por cima da base dela. */
      /* v1 03/08 — o troféu tem que aparecer no celular, que e onde estao 80% do
         publico. Ele fica na METADE DE BAIXO da foto, e era justamente ali que o veu
         estava mais fechado. Palco mais alto, veu que so fecha no rodape, e o tipo
         desce um pouco: a estatueta e a placa "CONFERIDO A EDILASIO JR." aparecem. */
      /* v1 03/08 — ORDEM DELE: a foto de entrada aparece INTEIRA, com ele recebendo
         o trofeu. Nao ha corte e nao ha veu: a foto e a foto. O tipo desce para
         fundo solido logo abaixo dela. Era a unica forma de ter a foto toda E o
         texto legivel numa tela de 390px — as duas coisas disputavam o mesmo espaco. */
      /* v1 03/08 — ORDEM DELE: "a foto tem que ser maior para enxergar a premiacao,
         o trofeu na minha mao escrito meu nome". Em 390px de largura a foto inteira
         deixa o trofeu com 3 milimetros. Entao a moldura fica ALTA e a foto se
         aproxima pela direita, onde estao ele e o trofeu — a estatueta cresce 60%
         e a placa "CONFERIDO A EDILASIO JR." passa a se ler. */
      .vp2-hero-palco{ height:min(78vh, 700px) !important; overflow:hidden !important; }
      .vp2-hero-bg{ position:absolute !important; inset:0 !important;
                    filter:none !important; transform:none !important; overflow:hidden !important; }
      .vp2-hero-bg img{ position:absolute !important; inset:0 !important;
                        width:100% !important; height:100% !important;
                        object-fit:cover !important; object-position:76% 46% !important;
                        opacity:1 !important; filter:none !important; transform:none !important;
                        display:block !important; }
      .vp2-hero-img{ display:none !important; }
      .vp2-hero-veu{ display:none !important; }
      .vp2-hero-txt{ margin-top:0 !important; padding-top:30px !important; }
      .vp2-hero-veu{ display:none !important; }
      .vp2-tagline{ letter-spacing:0.14em !important; }
      .vp2-hero-row{ max-width:100% !important; }
      .vp2-2col{ grid-template-columns:1fr !important; gap:40px !important; }
      .vp2-acervo{ columns:1 !important; }
      .vp2-pad{ padding-left:22px !important; padding-right:22px !important; }
      .vp2-tall{ height:auto !important; min-height:74vh !important; }
      .vp2-bleed{ margin-left:0 !important; margin-right:0 !important; }
    }
    /* v1 03/08 — no tablet a parede de imprensa fica em duas colunas, nao numa so gigante */
    @media (min-width:601px) and (max-width:900px){
      .vp2-acervo{ columns:2 !important; column-gap:24px !important; }
    }