/**
 * VIAGEM À CHINA (ANAHP) — MURICY CONSULTORIA
 *
 * Página em linguagem editorial de capa de revista impressa: display
 * condensada pesada em caixa alta, vermelho como única cor de destaque,
 * papel branco + tinta quase preta, estrutura por réguas finas e whitespace.
 * Sem border-radius e sem sombras em nenhum componente.
 *
 * Tudo com prefixo .vc- e escopado em .page-viagem-china para não colidir
 * com o vocabulário teal do resto do tema (.btn, .grid, .container etc.).
 */

/* ===================================
   TOKENS DA PÁGINA
   =================================== */
.page-viagem-china {
    --vc-ink: #14110f;
    --vc-paper: #ffffff;
    --vc-paper-2: #f2f0ee;
    --vc-red: #e8291c;
    --vc-red-dark: #b81b11;
    --vc-red-light: #ff6a5c;
    --vc-mute: #6b6560;
    --vc-body-2: #3a3531;
    --vc-body-3: #4a443f;
    --vc-rule: rgba(20, 17, 15, 0.16);
    --vc-rule-soft: rgba(20, 17, 15, 0.1);
    --vc-edge: clamp(20px, 5vw, 80px);
    --vc-gutter: clamp(28px, 4vw, 72px);
    --vc-display: 'Anton', 'Arial Narrow', sans-serif;
    --vc-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --vc-text: 'Barlow', system-ui, sans-serif;
}

/* ===================================
   BASE
   =================================== */
.page-viagem-china {
    background: var(--vc-paper);
    color: var(--vc-ink);
    font-family: var(--vc-text);
    font-size: 17px;
    line-height: 1.55;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
}

.page-viagem-china ::selection { background: var(--vc-red); color: #fff; }
.page-viagem-china :focus-visible { outline: 2px solid var(--vc-red); outline-offset: 3px; }

.page-viagem-china #missao,
.page-viagem-china #dias,
.page-viagem-china #galeria,
.page-viagem-china #videos,
.page-viagem-china #depoimento,
.page-viagem-china #contato-viagem { scroll-margin-top: var(--header-height); }

.vc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--vc-edge); }

.vc-section { padding: clamp(72px, 9vw, 132px) 0; }
/* Abre-alas dos capítulos: encosta na seção anterior e aproxima da grade de dias. */
.vc-section--tight { padding-top: 0; padding-bottom: 44px; }

/* Seção do manifesto: espaço normal em cima (separa da régua de dados) e
   quase nenhum embaixo — a seção seguinte ("A missão") já entra com o
   padding-top padrão de .vc-section, então um padding-bottom grande aqui
   dobraria o vão entre as duas. */
.vc-section--manifesto { padding-top: clamp(48px, 6vw, 80px); padding-bottom: 0; }

/* ===================================
   TIPOGRAFIA DE DISPLAY
   =================================== */
/* Entrelinha: o Anton em caixa alta com acentos do português (Ã, Ê, Í, Ó)
   projeta o diacrítico acima da altura de caixa, então os < 0.9 do design
   original fariam a linha de baixo encostar na de cima. 0.92–0.94 mantém a
   compressão editorial sem colisão. */
.vc-dsp {
    font-family: var(--vc-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.94;
    letter-spacing: -0.005em;
    font-size: clamp(40px, 6.4vw, 92px);
    margin: 0;
}

/* Tarja sólida: o destaque forte, um por componente. */
.vc-mark {
    background: var(--vc-red);
    color: #fff;
    padding: 0.04em 0.28em 0.08em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* A tarja é um fundo em elemento inline: sua caixa é a do glifo (ascendente +
   descendente do Anton, ~1.16em) mais o padding, sempre mais alta que a linha
   comprimida do display. Sem folga extra ela invade a linha de cima e o
   parágrafo de baixo — então o título que contém tarja abre a entrelinha. */
.vc-dsp:has(.vc-mark) { line-height: 1.2; }

/* Realce leve dentro de texto corrido. */
.vc-hl { color: var(--vc-red); font-weight: 600; }

.vc-label {
    display: block;
    font-family: var(--vc-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 14px;
    color: var(--vc-red);
    margin: 0 0 18px;
}
.vc-label--light { color: var(--vc-red-light); }
.vc-label--ink { color: var(--vc-mute); }

.vc-lede {
    font-size: 20px;
    line-height: 1.5;
    max-width: 62ch;
    color: var(--vc-body-2);
    margin: 24px 0 0;
}

.vc-fine {
    font-family: var(--vc-cond);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 14px;
    color: var(--vc-mute);
    max-width: 70ch;
    margin: 32px 0 0;
    padding-top: 20px;
    border-top: 2px solid var(--vc-ink);
}

/* ===================================
   HERO
   =================================== */
/* Duas alturas de propósito: com foto, o hero é alto porque a área livre sob o
   véu em gradiente é a própria imagem; no hero tipográfico essa mesma área
   viraria uma faixa de tinta vazia entre a data e os créditos, então a
   composição fecha mais justa. */
.vc-hero {
    position: relative;
    min-height: min(72vh, 600px);
    display: grid;
    overflow: hidden;
    background: var(--vc-ink);
}
.vc-hero--foto { min-height: min(86vh, 780px); }

.vc-hero-shot { position: absolute; inset: 0; }
.vc-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vc-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 8, 7, 0.52) 0%,
        rgba(10, 8, 7, 0.28) 42%,
        rgba(10, 8, 7, 0.62) 100%);
}

.vc-hero-inner {
    position: relative;
    align-self: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(72px, 10vw, 132px) var(--vc-edge);
}
/* Sem foto, esse padding inferior é o que abre a faixa de tinta vazia entre a
   data e os créditos — a altura mínima nem chega a ser o gargalo. */
.vc-hero:not(.vc-hero--foto) .vc-hero-inner { padding-bottom: clamp(36px, 4.5vw, 64px); }

.vc-hero-title {
    font-family: var(--vc-display);
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    font-size: clamp(52px, 11vw, 148px);
    line-height: 0.96;
    letter-spacing: -0.01em;
    margin: 0;
}
/* A sombra existe para segurar o título sobre a foto; no hero tipográfico
   (fundo tinta chapado) ela só criaria um halo cinza ao redor das letras. */
.vc-hero--foto .vc-hero-title { text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35); }

.vc-tagline {
    display: inline-block;
    background: var(--vc-red);
    color: #fff;
    font-family: var(--vc-display);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: clamp(18px, 2.6vw, 34px);
    line-height: 1.1;
    padding: 8px 16px 10px;
    margin-top: clamp(10px, 1.4vw, 18px);
}

.vc-hero-dates {
    font-family: var(--vc-cond);
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: clamp(20px, 2.8vw, 40px);
    margin: clamp(14px, 2vw, 26px) 0 0;
}

.vc-hero-credits {
    position: relative;
    align-self: end;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--vc-edge) clamp(24px, 4vw, 44px);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-family: var(--vc-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
}
.vc-credit { display: inline-flex; align-items: baseline; gap: 8px; }
.vc-hero-credits b { color: #fff; letter-spacing: 0.06em; font-size: 15px; }

/* Crédito da foto de abertura: encostado à direita da mesma linha dos créditos
   institucionais, e mais apagado — informa a procedência sem competir com
   "Coordenação: Anahp". Em telas estreitas a linha quebra e ele desce. */
.vc-foto-credito {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: 0.08em;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: none;
}

/* ===================================
   RÉGUA DE DADOS
   =================================== */
.vc-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 2px solid var(--vc-ink);
    border-bottom: 2px solid var(--vc-ink);
}

/* Calha própria, menor que a --vc-gutter das seções: com quatro colunas em
   1280px a calha larga deixava ~169px úteis por célula e valores de duas
   palavras ("Pequim · Xangai") quebravam no meio. */
.vc-rail-item { padding: 22px clamp(18px, 2.2vw, 40px) 24px 0; }
.vc-rail-item + .vc-rail-item {
    padding-left: clamp(18px, 2.2vw, 40px);
    border-left: 1px solid var(--vc-rule);
}

.vc-rail dt {
    font-family: var(--vc-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    color: var(--vc-mute);
}

.vc-rail dd {
    font-family: var(--vc-display);
    text-transform: uppercase;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.02;
    margin: 10px 0 0;
}
.vc-spot { color: var(--vc-red); }

/* ===================================
   A MISSÃO (frase-manifesto + contexto)
   =================================== */
.vc-statement {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px var(--vc-gutter);
    align-items: start;
}

.vc-statement-big { font-size: clamp(28px, 3.4vw, 50px); line-height: 1.02; }

.vc-statement-aside .vc-body {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--vc-body-2);
}
.vc-statement-aside .vc-body + .vc-body { margin-top: 18px; }

.vc-founder {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: var(--vc-gutter);
    align-items: start;
}

.vc-founder-photo { margin: 0; }
.vc-founder-photo-crop {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: var(--vc-paper-2);
    aspect-ratio: 4 / 5;
}
.vc-founder-photo-crop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.vc-founder-photo figcaption {
    font-family: var(--vc-cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
    color: var(--vc-ink);
    text-align: center;
    padding: 14px 10px;
}

.vc-founder-text { padding-top: 6px; }
.vc-founder-text .vc-body { margin: 0 0 20px; }
.vc-founder-text .vc-body:last-of-type { margin-bottom: 0; }

.vc-founder-signature {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--vc-rule);
    font-family: var(--vc-cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 14px;
    color: var(--vc-ink);
}

@media (max-width: 720px) {
    .vc-founder {
        grid-template-columns: 1fr;
    }
    .vc-founder-photo {
        max-width: 200px;
        margin: 0 auto;
    }
}

.vc-partner { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--vc-rule); }
.vc-partner-img { max-width: 128px; height: auto; display: block; }
.vc-partner figcaption {
    font-family: var(--vc-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    color: var(--vc-mute);
    margin-top: 12px;
}

/* ===================================
   CAPÍTULOS DOS DIAS
   =================================== */
.vc-chapters { border-top: 2px solid var(--vc-ink); }

.vc-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    border-bottom: 2px solid var(--vc-ink);
}

/* Alinha o texto do painel (full-bleed) com a margem interna do .vc-wrap.
   A porcentagem resolve contra a coluna da grade, que é metade da largura
   útil — daí o 640px (1280 / 2): em 1440px de tela dá 720 - 640 + 72 = 152px,
   exatamente onde começa o conteúdo das seções acima. */
.vc-panel-story {
    align-self: center;
    padding: clamp(44px, 6vw, 92px) var(--vc-edge) clamp(44px, 6vw, 92px)
             max(var(--vc-edge), calc(100% - 640px + var(--vc-edge)));
}

/* Alterna o lado da imagem a cada capítulo. */
.vc-panel:nth-child(even) .vc-panel-story {
    order: 2;
    padding-left: var(--vc-edge);
    padding-right: max(var(--vc-edge), calc(100% - 640px + var(--vc-edge)));
}
.vc-panel:nth-child(even) .vc-panel-shot { order: 1; }

.vc-panel-shot {
    position: relative;
    /* Altura do painel de imagem — o texto do capítulo é centrado nela. Menor
       que os 620px do protótipo porque os dias sem narrativa longa ficariam
       com meio painel vazio; ainda generosa para as fotos reais. */
    min-height: clamp(300px, 40vw, 540px);
    background: var(--vc-paper-2);
    overflow: hidden;
}
/* Foto em paisagem: sangra o painel inteiro. */
.vc-panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vídeo (ou foto em retrato): placa centrada sobre fundo tinta, com o numeral
   do dia atrás. O elemento recebe aspect-ratio inline a partir do metadata do
   anexo, então a caixa é exatamente o quadro do vídeo — os controles nativos
   ficam alinhados com a imagem, e não há salto de layout antes de o navegador
   ler os metadados. */
.vc-panel-shot--placa { background: var(--vc-ink); }
.vc-panel-shot--placa .vc-numeral { color: rgba(255, 255, 255, 0.08); }

.vc-panel-video,
.vc-panel-shot--placa .vc-panel-img {
    position: absolute;
    /* inset antes de top/left: o shorthand zera os quatro lados, então
       invertido ele apagaria a centralização. */
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    background: #000;
    object-fit: contain;
}
.vc-panel-media--vert {
    height: calc(100% - clamp(32px, 5vw, 76px));
    width: auto;
    max-width: calc(100% - clamp(20px, 3vw, 48px));
}
.vc-panel-media--horiz {
    width: calc(100% - clamp(24px, 4vw, 68px));
    height: auto;
    max-height: calc(100% - clamp(24px, 4vw, 56px));
}

.vc-panel-legenda {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 100%;
    padding: 8px 14px 9px;
    background: rgba(20, 17, 15, 0.82);
    color: #fff;
    font-family: var(--vc-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
}

/* Sem foto cadastrada: numeral gigante do dia como marca d'água, sangrando
   pelo canto do painel. Substituído automaticamente quando a foto entra. */
.vc-numeral {
    position: absolute;
    right: -0.06em;
    bottom: -0.26em;
    font-family: var(--vc-display);
    font-size: clamp(150px, 26vw, 340px);
    line-height: 0.8;
    color: rgba(20, 17, 15, 0.09);
    user-select: none;
}
/* Painel invertido: o numeral sangra pela borda EXTERNA, não pela calha
   central entre a foto e o texto. */
.vc-panel:nth-child(even) .vc-numeral { right: auto; left: -0.06em; }

.vc-dayno {
    display: block;
    font-family: var(--vc-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 14px;
    color: var(--vc-mute);
    margin-bottom: 10px;
}

.vc-city {
    display: block;
    font-family: var(--vc-cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 15px;
    color: var(--vc-red);
}
.vc-city::before { content: "[ "; }
.vc-city::after { content: " ]"; }

.vc-panel-title {
    font-family: var(--vc-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(34px, 4.2vw, 68px);
    line-height: 0.94;
    margin: 10px 0 0;
}

.vc-panel-story p:not(.vc-panel-reel) {
    font-size: 17px;
    line-height: 1.55;
    color: var(--vc-body-2);
    max-width: 46ch;
    margin: 22px 0 0;
}

.vc-stops {
    list-style: none;
    max-width: 46ch;
    margin: 28px 0 0;
    padding: 0;
    border-top: 1px solid var(--vc-rule);
}
.vc-stops li {
    padding: 11px 0;
    border-bottom: 1px solid var(--vc-rule-soft);
    font-size: 16.5px;
    font-weight: 500;
}
.vc-stops li.vc-soft { font-weight: 400; font-style: italic; color: var(--vc-mute); }

.vc-panel-reel { margin: 26px 0 0; }
.vc-panel-reel a {
    position: relative;
    font-family: var(--vc-cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 14px;
    color: var(--vc-red-dark);
    border-bottom: 2px solid var(--vc-red);
    padding-bottom: 2px;
}
/* Área de toque de 44px sem mexer no traço sob o texto: um pseudo-elemento
   invisível estende o alvo para cima e para baixo. Padding vertical afastaria
   a régua vermelha do texto e quebraria o desenho. */
.vc-panel-reel a::before {
    content: "";
    position: absolute;
    inset: -12px -10px;
}
.vc-panel-reel a::after { content: " \2192"; }
.vc-panel-reel a:hover { color: var(--vc-red); border-bottom-color: var(--vc-ink); }

/* ===================================
   GALERIA
   =================================== */
.vc-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: var(--vc-rule);
    margin-top: 44px;
}
.vc-gallery-item { margin: 0; aspect-ratio: 3 / 2; background: var(--vc-paper-2); overflow: hidden; }
.vc-gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===================================
   REGISTROS EM VÍDEO
   =================================== */
.vc-reels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    background: var(--vc-rule);
    margin-top: 44px;
}

.vc-reel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--vc-paper);
    padding: 24px 20px 26px;
    margin: 0;
}

/* Player local: largura da célula, altura pela proporção real do arquivo
   (aspect-ratio inline vindo do metadata do anexo), então não há salto de
   layout antes de o navegador ler os metadados. */
.vc-reel-video {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 4px;
    background: #000;
}

/* Os vídeos guardam a proporção real do arquivo, então um registro horizontal
   fica mais baixo que os verticais da mesma linha. margin-top:auto encosta a
   legenda no rodapé da célula e os links da linha voltam a se alinhar. */
.vc-reel figcaption { margin-top: auto; padding-top: 14px; }

.vc-reel-n {
    font-family: var(--vc-display);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--vc-red);
}
.vc-reel-rotulo {
    font-family: var(--vc-display);
    text-transform: uppercase;
    font-size: 28px;
    line-height: 0.94;
    color: var(--vc-ink);
}
.vc-reel-acao {
    position: relative;
    display: inline-block;
    font-family: var(--vc-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    color: var(--vc-mute);
    border-bottom: 1px solid var(--vc-rule);
    padding-bottom: 2px;
}
.vc-reel-acao::before { content: ""; position: absolute; inset: -12px -10px; }
.vc-reel-acao:hover,
.vc-reel-acao:focus-visible { color: var(--vc-red-dark); border-bottom-color: var(--vc-red); }

/* ===================================
   DEPOIMENTO — único bloco invertido
   =================================== */
.vc-quote-block {
    background: var(--vc-ink);
    color: #fff;
    padding: clamp(64px, 8vw, 112px) 0;
}

.vc-quote { margin: 0; padding: 0; border: 0; }
/* Barlow, não Anton: o glifo de abre-aspas do Anton é um par de blocos
   sólidos e nesse tamanho lê como dois retângulos, não como aspas. */
.vc-quote::before {
    content: "\201C";
    display: block;
    font-family: var(--vc-text);
    font-weight: 600;
    font-size: clamp(64px, 9vw, 130px);
    line-height: 0.8;
    color: var(--vc-red);
    margin-bottom: clamp(4px, 0.8vw, 12px);
}

.vc-quote-lead {
    font-size: clamp(24px, 3.2vw, 44px);
    line-height: 1.16;
    font-weight: 500;
    letter-spacing: -0.01em;
    max-width: 34ch;
    margin: 0;
}
.vc-quote p + p {
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.76);
    max-width: 52ch;
    margin: 28px 0 0;
}

.vc-quote-autor {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 2px solid var(--vc-red);
}
.vc-quote-autor cite {
    font-family: var(--vc-display);
    font-style: normal;
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 0.02em;
}
.vc-quote-autor span {
    font-family: var(--vc-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* ===================================
   FECHO
   =================================== */
.vc-close { padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 84px); }
.vc-close-cta { margin: 36px 0 0; }

.vc-btn {
    display: inline-block;
    background: var(--vc-red);
    color: #fff;
    font-family: var(--vc-cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 15px;
    line-height: 1;
    padding: 17px 30px 18px;
    border-radius: 0;
    transition: background-color var(--transition-fast);
}
.vc-btn:hover { background: var(--vc-ink); color: #fff; }

/* ===================================
   RESPONSIVO
   =================================== */
@media (max-width: 1080px) {
    .vc-reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .vc-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-rail-item:nth-child(odd) { padding-left: 0; border-left: 0; }
    .vc-rail-item:nth-child(n+3) { border-top: 1px solid var(--vc-rule); }

    .vc-statement { grid-template-columns: 1fr; }

    .vc-panel { grid-template-columns: 1fr; }
    .vc-panel-story,
    .vc-panel:nth-child(even) .vc-panel-story {
        order: 2;
        padding: 36px var(--vc-edge) 52px;
    }
    .vc-panel:nth-child(even) .vc-panel-shot { order: 1; }

    /* Em coluna única a placa passa a ser dimensionada pela LARGURA e cresce
       em altura conforme a mídia. Mantida a regra antiga (altura fixa de 58vw
       + mídia vertical calculada a partir dela), um vídeo 9:16 saía com 145px
       de largura — um selo. */
    .vc-panel-shot {
        order: 1;
        min-height: 0;
        padding: clamp(18px, 5vw, 34px) 0;
    }
    .vc-panel-shot--placa .vc-panel-img,
    .vc-panel-video {
        position: relative;
        inset: auto;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
    }
    .vc-panel-media--vert {
        width: min(74%, 320px);
        height: auto;
        max-width: none;
        /* Teto em vh para o vídeo não empurrar o texto para fora da tela em
           aparelhos baixos; object-fit:contain segura a proporção. */
        max-height: 62vh;
    }
    .vc-panel-media--horiz {
        width: calc(100% - 2 * var(--vc-edge));
        height: auto;
        max-height: none;
    }
    /* Sem foto, a placa volta a ter altura própria para o numeral aparecer. */
    .vc-panel-shot:not(:has(img, video)) { min-height: 46vw; padding: 0; }
}

@media (max-width: 600px) {
    .vc-hero { min-height: min(72vh, 620px); }
    .vc-hero--foto { min-height: min(78vh, 660px); }
    .vc-hero-inner { padding-top: clamp(44px, 11vw, 96px); }
    .vc-hero-credits { padding-bottom: 26px; }
    .vc-foto-credito { margin-left: 0; }

    .vc-section { padding: 56px 0; }
    .vc-section--tight { padding-top: 0; padding-bottom: 32px; }
    .vc-close { padding: 56px 0 44px; }

    /* Duas colunas para os registros: em coluna única os sete vídeos verticais
       somavam ~700px cada e a seção passava de 6.800px, quase metade da
       página. Aqui o arquivo de vídeos vira uma grade de miniaturas. */
    /* Grade dos registros sangra até as bordas, como os painéis dos dias: em
       375px isso devolve ~20px de largura para cada player (141px -> 160px),
       que é a diferença entre miniatura e player utilizável. */
    .vc-reels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: calc(-1 * var(--vc-edge));
    }
    /* Registro horizontal ocupa a linha toda: ao lado de um 9:16 ele deixaria
       metade da célula vazia e a fila desalinhada. */
    .vc-reel--horiz { grid-column: 1 / -1; }
    .vc-reel { padding: 16px 13px 18px; gap: 7px; }
    .vc-reel-rotulo { font-size: 22px; }
    .vc-reel-acao { font-size: 12px; letter-spacing: 0.08em; }

    .vc-gallery { grid-template-columns: 1fr; }
}