/* dadiva-videos.css — só a página /videos ("O Mapa de Vídeos")
   ════════════════════════════════════════════════════════════════════════
   Carrega DEPOIS de dadiva-inner.css e mylo-companion.css (como o
   page-mylo.css na /mylo), por isso ganha os empates sem !important.
   O motor está em dadiva-videos.js; os dados no bloco SECCOES de videos.html.

   Peças desta página
     .vp-hero-cta / .vp-hero-stats .... botões e contagem por baixo do hero
     .palco ........................... "Começa por aqui": leitor grande + 3
     .mapa-wrap / .mapa-side .......... índice colado (PC) + mapa
     .zonas / .sec-chip ............... índice (PC) ou carril de pílulas
     .progresso ....................... "o teu percurso" (x de y vistos)
     .vsec / .vnivel .................. zona numerada / nível recolhível
     .vcard / .vseen .................. cartão de vídeo / botão "Já vi"
     .pcard / .mcard .................. cartão de playlist-podcast / mentor
     .vmodal / .vq__item .............. o leitor e a fila da zona
     .vp-fim .......................... a crescer + fecho
   ════════════════════════════════════════════════════════════════════════ */

.page-videos {
  --wrap: 1240px;
  /* Barra do site colada + carril das zonas (medido por medirSecNav()). */
  --secnav-h: 130px;
  --ok: #1d6b47;
  --ok-wash: #e6f3ea;
  --ok-line: #9cc9ad;
}
@media (min-width: 1140px) { .page-videos { --secnav-h: 72px; } }
@media (prefers-reduced-motion: no-preference) { html:has(body.page-videos) { scroll-behavior: smooth; } }
/* O foco (sobretudo a recuar com Shift+Tab) ficava tapado pela barra colada
   e, no telemóvel, também pelo carril das zonas. O scroll-padding-top do
   <html> resolve isso para o foco e para as âncoras; por isso os
   scroll-margin-top das âncoras abaixo passam a contar só a folga que falta
   (e o do palco desconta o carril, que ali ainda não está colado).
   --secnav-h é escrita no <html> e no <body> por medirSecNav(). */
html:has(> body.page-videos) { --secnav-h: 130px; scroll-padding-top: calc(var(--secnav-h) + 12px); }
@media (min-width: 1140px) { html:has(> body.page-videos) { --secnav-h: 72px; } }

.page-videos .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Base mínima dos botões (especificidade de um só elemento, como antes): não
   pisa os botões partilhados — barra, PT/EN, MYLO. */
:where(.page-videos) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.page-videos .kern-j { margin-left: 2px; }

/* ── Hero: o anfiteatro da ilha ───────────────────────────────────────────
   A cena antiga (lago espelhado em 3D) era a única da Dádiva fora do registo
   pintado das outras. Esta é o anfiteatro com o ecrã de pano — a mesma
   metáfora da landing ("é ali que ficam os vídeos") — em aguarela, como a
   /mylo, a /ferramentas e a /sobre. Ganha a --scene do dadiva-inner.css
   porque este ficheiro carrega depois (mesma especificidade). */
.page-videos {
  --scene: url("assets/scenes/videos-anfiteatro-desktop.webp");
  --scene-pos: 50% 58%;
  --scene-m: url("assets/scenes/videos-anfiteatro-mobile.webp");
  --scene-m-pos: 50% 62%;
}

/* ── Hero: véu de marfim em CSS em vez da nuvem recortada ─────────────────
   A nuvem pintada pousava com bordo recortado sobre a cena. O véu fica
   cheio onde estão as letras e desfaz-se até ao nada. */
.inner-page.page-videos .scenic-hero__inner::before {
  inset: var(--veu, -76% -16%);
  background:
    radial-gradient(ellipse 40% 46% at 48% 52%, rgba(255,253,245,.62) 0%, rgba(255,253,245,.46) 50%, rgba(255,253,245,.16) 78%, rgba(255,253,245,0) 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,253,245,.86) 0%, rgba(255,253,245,.84) 45%, rgba(255,253,245,.62) 65%, rgba(255,253,245,.28) 82%, rgba(255,253,245,0) 100%);
}
.page-videos .vp-hero-cta {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2);
  margin-top: var(--s4);
}
.page-videos .vp-hero-cta .button { background-clip: padding-box; }
/* A pílula de contorno sobre pintura precisa de papel opaco por baixo. */
.page-videos .vp-hero-cta .button:not(.primary) { background: var(--ivory); }
.page-videos .vp-hero-cta .button:not(.primary):hover { background: #e6f0ff; }
.inner-page.page-videos .vp-hero-cta .ico { width: 18px; height: 18px; color: currentColor; vertical-align: 0; }
.page-videos .vp-hero-cta .button.primary .ico { fill: currentColor; stroke: none; width: 15px; height: 15px; }
.page-videos .vp-hero-stats {
  position: relative; z-index: 1;
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 10px;
  margin: var(--s2) 0 0; padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 253, 245, .92); box-shadow: 0 1px 0 #10294f10, inset 0 0 0 1px #10294f12;
  font: 700 14px/1.35 var(--sans); color: var(--muted);
}
.page-videos .vp-hero-stats[hidden] { display: none; }
.page-videos .vp-dot { opacity: .6; }

/* ── Cabeçalho de secção (palco) ─────────────────────────────────────── */
.page-videos .vp-head { max-width: 62ch; margin: 0 0 var(--s4); }
.inner-page.page-videos .vp-head h2 { margin: 0 0 12px; }
.page-videos .vp-head__sub {
  margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--muted); text-wrap: pretty;
}

/* ══ PALCO — "Começa por aqui" ═════════════════════════════════════════ */
.page-videos .comeca {
  max-width: var(--wrap); margin: 0 auto var(--s6);
  scroll-margin-top: calc(var(--nav-h, 90px) - var(--secnav-h));
}
.page-videos .palco {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  gap: clamp(20px, 2.4vw, 32px); align-items: start;
  padding: clamp(14px, 1.8vw, 22px);
  border: 1px solid var(--line); border-radius: 26px;
  background:
    radial-gradient(90% 70% at 100% 0%, #fdf6d8 0%, rgba(253,246,216,0) 60%),
    radial-gradient(80% 90% at 0% 100%, #e3efe6 0%, rgba(227,239,230,0) 62%),
    #fffdf7;
  box-shadow: 0 1px 0 #10294f0a, 0 24px 60px -36px #10294f55;
}
.page-videos .palco__main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.page-videos .palco__screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 16px; background: #0b1a2e;
  box-shadow: 0 14px 34px -16px #0b1a2e8c;
}
.page-videos .palco__poster {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0;
  border-radius: inherit; overflow: hidden;
}
.page-videos .palco__poster img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.page-videos .palco__poster:hover img { transform: scale(1.018); }
/* O contorno de foco não pode ficar cortado pelo overflow do ecrã: vai
   para dentro, com um aro marfim a separá-lo da fotografia. */
.inner-page.page-videos .palco__poster:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 6px var(--ivory); }
.page-videos .palco__cta {
  position: absolute; left: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 7px 22px 7px 7px; border-radius: 999px;
  background: var(--ivory); color: var(--navy);
  font: 800 16px/1 var(--sans); letter-spacing: -.01em;
  box-shadow: 0 10px 26px #0b1a2e59, inset 0 0 0 1px #10294f14;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.page-videos .palco__cta-ico {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--yellow); box-shadow: inset 0 0 0 1.5px #10294f33;
}
.page-videos .palco__cta-ico svg { width: 15px; height: 15px; margin-left: 2px; fill: var(--navy); }
.page-videos .palco__poster:hover .palco__cta { transform: translateY(-2px); box-shadow: 0 14px 30px #0b1a2e66, inset 0 0 0 1px #10294f14; }
.page-videos .palco__screen.is-playing .palco__poster { display: none; }
.page-videos .palco__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.page-videos .palco__info { display: flex; flex-direction: column; gap: 4px; padding: 0 4px 4px; }
.inner-page.page-videos .palco__pos {
  margin: 0 0 6px; font: 800 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green);
}
.inner-page.page-videos .palco__title {
  margin: 0; font: 800 clamp(20px, 1.9vw, 26px)/1.25 var(--sans); letter-spacing: -.02em; color: var(--navy); text-wrap: balance;
}
.inner-page.page-videos .palco__author { margin: 2px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--muted); }
.inner-page.page-videos .palco__note { margin: 8px 0 0; max-width: 60ch; font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.6; color: var(--navy); }
.page-videos .palco__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; }

.page-videos .palco__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.page-videos .palco__pick {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 28px 124px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px 12px 10px 10px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255, 254, 249, .9); text-align: left;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.page-videos .palco__pick:hover { border-color: #9fc0e6; background: #f7fbff; }
.page-videos .palco__pick[aria-current="true"] {
  border-color: var(--blue); background: #eef4fd; box-shadow: inset 0 0 0 1px var(--blue);
}
.page-videos .palco__num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #fff; font: 800 13px/1 var(--sans);
}
.page-videos .palco__pick.is-seen .palco__num { font-size: 0; background: var(--ok); }
.page-videos .palco__pick.is-seen .palco__num::before {
  content: ""; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-videos .palco__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 10px; background: #eaf1ea; box-shadow: inset 0 0 0 1px #10294f14;
}
.page-videos .palco__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-videos .palco__pick.is-seen .palco__thumb img { filter: saturate(.6); opacity: .8; }
.page-videos .palco__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-videos .palco__ptitle {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font: 700 14.5px/1.35 var(--sans); letter-spacing: -.01em; color: var(--navy);
}
.page-videos .palco__pauthor { font-size: 13px; font-weight: 600; color: var(--muted); }

/* PC e tablet largo: o ecrã e a lista dos três têm a mesma altura (a lista
   estica-se em três faixas iguais) e a ficha do vídeo corre por baixo dos
   dois, com as ações à direita. */
@media (min-width: 900px) {
  .page-videos .palco {
    grid-template-areas: "screen list" "info info";
    align-items: stretch; row-gap: 20px;
  }
  .page-videos .palco__main { display: contents; }
  .page-videos .palco__screen { grid-area: screen; }
  .page-videos .palco__list { grid-area: list; }
  .page-videos .palco__list > li { flex: 1; display: flex; min-height: 0; }
  .page-videos .palco__pick { height: 100%; grid-template-columns: 28px minmax(110px, 44%) minmax(0, 1fr); }
  .page-videos .palco__info {
    grid-area: info; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px; align-items: start; padding: 2px 6px 6px;
  }
  .page-videos .palco__info > * { grid-column: 1; }
  .page-videos .palco__info > .palco__actions {
    grid-column: 2; grid-row: 1 / span 4; align-self: center;
    flex-direction: column; align-items: stretch; margin-top: 0;
  }
  .page-videos .palco__info > .palco__actions .vp-ext,
  .page-videos .palco__info > .palco__actions .vseen { justify-content: center; }
  .page-videos .palco__ptitle { -webkit-line-clamp: 4; line-clamp: 4; }
}

/* Ligação "abrir no YouTube" (palco e leitor) */
.page-videos .vp-ext {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--blue); font: 700 15px/1 var(--sans); text-decoration: none;
}
.page-videos .vp-ext:hover { text-decoration: underline; text-underline-offset: 4px; }
.inner-page.page-videos .vp-ext .ico { width: 17px; height: 17px; color: currentColor; vertical-align: 0; }

/* ══ "JÁ VI" ═══════════════════════════════════════════════════════════
   Um botão de alternar (aria-pressed). O rótulo não muda com o estado:
   quem muda é a caixa, que enche a verde com o visto. */
.page-videos .vseen {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 13px 0 6px; border-radius: 999px;
  border: 1px solid var(--line); background: #fffef9; color: var(--muted);
  font: 700 13.5px/1 var(--sans); white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
/* 44px de alvo sem engordar a pílula. */
.page-videos .vseen::before { content: ""; position: absolute; inset: -4px -2px; }
.page-videos .vseen__box {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid #9db3c9; background: #fff;
  transition: background .2s, border-color .2s;
}
.page-videos .vseen__box svg {
  width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.page-videos .vseen:hover { border-color: #9fc0e6; color: var(--navy); }
.page-videos .vseen:hover .vseen__box { border-color: var(--ok); }
.page-videos .vseen[aria-pressed="true"] { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok); }
.page-videos .vseen[aria-pressed="true"] .vseen__box { background: var(--ok); border-color: var(--ok); }
.page-videos .vseen[aria-pressed="true"] .vseen__box svg { opacity: 1; transform: none; }
.page-videos .palco__actions .vseen,
.page-videos .vmodal__actions .vseen { min-height: 44px; padding: 0 16px 0 9px; font-size: 14.5px; }
.page-videos .palco__actions .vseen::before,
.page-videos .vmodal__actions .vseen::before { inset: 0; }

/* Barra de progresso fina (zonas, índice, percurso) */
.page-videos .vbar { display: block; height: 6px; border-radius: 99px; background: #e2eaf1; overflow: hidden; }
.page-videos .vbar > span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #2f8a5f, var(--ok));
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

/* ══ MAPA: índice + zonas ══════════════════════════════════════════════ */
.page-videos .mapa-wrap { max-width: var(--wrap); margin: 0 auto var(--s6); }
.page-videos .mapa { min-width: 0; scroll-margin-top: 4px; }
/* O mapa nasce por JS: enquanto está vazio guarda um ecrã de altura, para
   o que vem a seguir não saltar (CLS). */
.page-videos .mapa:empty { min-height: 100svh; }
.page-videos .mapa-side[hidden] { display: none; }

.inner-page.page-videos .zonas__label {
  margin: 0 0 12px; padding-left: 4px;
  font: 800 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green);
}
.page-videos .sec-chip {
  color: var(--navy); text-decoration: none;
  font: 700 14px/1.25 var(--sans); letter-spacing: -.01em;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.page-videos .sec-chip__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ivory); box-shadow: inset 0 0 0 1.5px #c3d3e3;
  font: 800 11px/1 var(--sans); letter-spacing: .02em; color: var(--muted);
  transition: background .2s, box-shadow .2s, color .2s;
}
.page-videos .sec-chip[aria-current="true"] .sec-chip__n { background: var(--blue); box-shadow: none; color: #fff; }
.page-videos .sec-chip:has(.is-done) .sec-chip__n { background: var(--ok); box-shadow: none; color: #fff; }
.inner-page.page-videos .sec-chip .ico { width: 1.15em; height: 1.15em; flex: none; }
.page-videos .sec-chip__prog { display: none; }
.page-videos .sec-chip__prog.has-seen { display: flex; }
.page-videos .sec-chip__frac { font: 800 12px/1 var(--sans); color: var(--ok); white-space: nowrap; }

/* ── PC (≥1140): índice colado à esquerda ─────────────────────────────── */
@media (min-width: 1140px) {
  .page-videos .mapa-wrap {
    display: grid; grid-template-columns: 252px minmax(0, 1fr);
    gap: 0 clamp(36px, 3.6vw, 60px); align-items: start;
  }
  .page-videos .mapa-side {
    position: sticky; top: calc(var(--stuck-nav-h, 0px) + 20px);
    max-height: calc(100vh - var(--stuck-nav-h, 0px) - 36px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 2px 6px 16px 2px;
  }
  .page-videos .mapa-side.is-cortado {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
  }
  .inner-page.page-videos .zonas {
    position: static; margin: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .page-videos .sec-nav__rail {
    position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0;
  }
  /* O trilho: uma linha tracejada a ligar as paragens, como num mapa. */
  .page-videos .sec-nav__rail::before {
    content: ""; position: absolute; left: 23px; top: 22px; bottom: 22px; width: 0;
    border-left: 1.5px dashed #c3d3e3; pointer-events: none;
  }
  .page-videos .sec-chip {
    position: relative;
    display: grid; grid-template-columns: 28px 18px minmax(0, 1fr); align-items: center; gap: 3px 10px;
    min-height: 44px; padding: 5px 10px; border-radius: 14px;
  }
  .page-videos .sec-chip__t { grid-column: 3; }
  .page-videos .sec-chip__prog.has-seen {
    grid-column: 3; align-items: center; gap: 8px; margin-top: 2px;
  }
  .page-videos .sec-chip__prog .vbar { flex: 1; height: 4px; }
  .page-videos .sec-chip:hover { background: #f2f8ff; }
  .page-videos .sec-chip[aria-current="true"] { background: #eef4fd; }
  .inner-page.page-videos .sec-chip:focus-visible { outline-offset: -3px; }
  .inner-page.page-videos .sec-chip .ico { color: var(--green); }
}

/* ── Abaixo de 1140: carril de pílulas colado ao topo ──────────────────── */
@media (max-width: 1139px) {
  .page-videos .mapa-side { display: contents; }
  .inner-page.page-videos .zonas {
    position: sticky; top: var(--stuck-nav-h, 0px); z-index: 20;
    margin: 0 calc(-1 * var(--main-pad)) var(--s3);
    background: rgba(255, 253, 245, .94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 #10294f14;
  }
  .inner-page.page-videos .zonas__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .page-videos .sec-nav__rail {
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 10px var(--main-pad);
    scroll-padding-inline: 44px;
    --fade-esq: 0px; --fade-dir: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
  }
  .page-videos .sec-nav__rail::-webkit-scrollbar { display: none; }
  .page-videos .sec-nav__rail[data-mais~="esq"] { --fade-esq: 40px; }
  .page-videos .sec-nav__rail[data-mais~="dir"] { --fade-dir: 40px; }
  .page-videos .sec-nav__rail:has(.sec-chip:focus-visible) { --fade-esq: 0px; --fade-dir: 0px; }
  .page-videos .sec-nav__rail:empty::before { content: ""; flex: none; width: 0; min-height: 44px; }
  .page-videos .sec-chip {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 15px 0 7px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--ivory);
    white-space: nowrap;
  }
  .page-videos .sec-chip .ico { display: none; }
  .page-videos .sec-chip:hover { background: #f2f8ff; border-color: #9fc0e6; }
  .page-videos .sec-chip[aria-current="true"] {
    background: #eef4fd; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue);
  }
  .page-videos .sec-chip__prog .vbar { display: none; }
  .page-videos .sec-chip__prog.has-seen { margin-left: 2px; }
}

/* ── O teu percurso ────────────────────────────────────────────────────── */
.page-videos .progresso {
  display: grid; gap: 10px;
  margin: var(--s3) 0 0; padding: 16px 16px 12px;
  border: 1px solid var(--line); border-radius: 18px;
  background: #fffef9;
}
.page-videos .progresso[hidden] { display: none; }
.inner-page.page-videos .progresso__label {
  margin: 0; font: 800 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green);
}
.inner-page.page-videos .progresso__t { margin: 0; font: 700 15px/1.35 var(--sans); color: var(--navy); }
.page-videos .progresso__t strong { font-size: 22px; font-weight: 800; color: var(--ok); letter-spacing: -.02em; }
.page-videos .progresso__next {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 60px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid #cfe0f6; background: #eef4fd; text-align: left;
  transition: border-color .2s, background .2s;
}
.page-videos .progresso__next[hidden] { display: none; }
.page-videos .progresso__next:hover { border-color: var(--blue); background: #e6effc; }
.page-videos .progresso__play {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--yellow); box-shadow: inset 0 0 0 1.5px #10294f33;
}
.page-videos .progresso__play svg { width: 13px; height: 13px; margin-left: 2px; fill: var(--navy); }
.page-videos .progresso__nx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-videos .progresso__k { font: 800 11.5px/1.25 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.page-videos .progresso__v {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 700 14.5px/1.35 var(--sans); color: var(--navy);
}
.inner-page.page-videos .progresso__hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.page-videos .progresso__hint[hidden] { display: none; }
.page-videos .progresso__reset {
  justify-self: start; min-height: 36px; padding: 0 2px;
  font: 700 13px/1 var(--sans); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.page-videos .progresso__reset[hidden] { display: none; }
.page-videos .progresso__reset:hover { color: var(--navy); }
.page-videos .progresso__reset.is-armed { color: #9a3412; }
@media (max-width: 1139px) {
  .page-videos .progresso {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; column-gap: 20px;
    margin: 0 0 var(--s5);
  }
  .page-videos .progresso > :not(.progresso__next) { grid-column: 1; }
  .page-videos .progresso__next { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}
@media (max-width: 700px) {
  .page-videos .progresso { grid-template-columns: 1fr; margin-bottom: var(--s4); }
  .page-videos .progresso__next { grid-column: 1; grid-row: auto; }
}

/* ── PC baixo (1280x720, 1366x768): o índice e o percurso não cabem juntos
   na altura do ecrã (o percurso ficava cortado dentro de um scroll interno
   que ninguém via). Aqui o índice fica sozinho na coluna colada e o
   percurso passa para cima do mapa, deitado, como abaixo dos 1140px. */
@media (min-width: 1140px) and (max-height: 820px) {
  .page-videos .mapa-wrap { grid-template-rows: auto 1fr; }
  .page-videos .mapa-side { display: contents; }
  .inner-page.page-videos .zonas {
    grid-column: 1; grid-row: 1 / span 2; align-self: start;
    position: sticky; top: calc(var(--stuck-nav-h, 0px) + 20px);
    max-height: calc(100vh - var(--stuck-nav-h, 0px) - 36px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 2px 6px 16px 2px;
  }
  .page-videos .zonas.is-cortado {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
  }
  .page-videos .progresso {
    grid-column: 2; grid-row: 1; margin: 0 0 var(--s5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; column-gap: 20px;
  }
  .page-videos .progresso > :not(.progresso__next) { grid-column: 1; }
  .page-videos .progresso__next { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .page-videos .mapa { grid-column: 2; grid-row: 2; }
}

/* ── Zona ──────────────────────────────────────────────────────────────── */
.page-videos .vsec { margin: 0 0 clamp(64px, 8vw, 104px); scroll-margin-top: 6px; }
.page-videos .vsec:last-child { margin-bottom: 0; }
.page-videos .vsec__head { max-width: 66ch; margin: 0 0 var(--s4); }
.inner-page.page-videos .vsec__kicker {
  margin: 0 0 12px; font: 800 13px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green);
}
.page-videos .vsec__count { color: var(--muted); }
.inner-page.page-videos .vsec__head h2 { margin: 0 0 12px; display: flex; align-items: center; gap: 16px; }
.page-videos .vsec__ico {
  flex: none; width: 54px; height: 54px; border-radius: 17px;
  display: inline-grid; place-items: center; background: #e7f1ea;
}
.inner-page.page-videos .vsec__ico .ico { width: 27px; height: 27px; color: var(--green); vertical-align: 0; }
.inner-page.page-videos .vsec__sub {
  margin: 0; max-width: 60ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--muted); text-wrap: pretty;
}
.inner-page.page-videos .vsec__seen {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 0;
  font: 700 13.5px/1 var(--sans); color: var(--ok);
}
.page-videos .vsec__seen[hidden] { display: none; }
.page-videos .vsec__seen .vbar { width: 150px; }

/* ── Grelhas ───────────────────────────────────────────────────────────── */
.page-videos .vgrid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 701px) {
  .page-videos .vgrid--2, .page-videos .vgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-videos .vgrid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .page-videos .vgrid--mentor { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}
/* Três colunas quando o mapa tem largura para elas: sem índice (1000–1139)
   ou com índice a partir dos 1280. */
@media (min-width: 1000px) and (max-width: 1139px), (min-width: 1280px) {
  .page-videos .vgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Quatro fecham numa linha de quatro; dois ficam em faixas de três (como
     os níveis do Deutsch). Em duas colunas grandes as miniaturas de 480px
     iam a ~455px e ficavam moles em ecrãs de alta densidade, e a página
     crescia metade. */
  .page-videos .vgrid--2.vgrid--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-videos .vgrid--2.vgrid--n2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Cartão de vídeo ──────────────────────────────────────────────────────
   <article> com dois botões irmãos: o que abre o leitor (a capa, o título e
   a nota; um ::after estica-o ao cartão inteiro) e o "Já vi", por cima. */
.page-videos .vcard {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 0 #10294f0a;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
.page-videos .vcard:hover,
.page-videos .vcard:has(.vcard__open:focus-visible) {
  transform: translateY(-3px); border-color: #9fc0e6; box-shadow: 0 12px 26px #10294f1a;
}
.page-videos .vcard__open { display: flex; flex-direction: column; flex: 1; padding: 0; text-align: left; border-radius: inherit; }
.page-videos .vcard__open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.inner-page.page-videos .vcard__open:focus-visible { outline: none; }
.inner-page.page-videos .vcard__open:focus-visible::after { outline: 3px solid var(--blue); outline-offset: 4px; }
.page-videos .vthumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: #eaf1ea; border-bottom: 1px solid var(--line); border-radius: 17px 17px 0 0;
}
/* Miniaturas nossas (assets/yt-thumbs/<id>.webp, 480x270, já 16:9). */
.page-videos .vthumb img {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  transition: filter .3s, opacity .3s;
}
/* O selo de play mora a cavalo na aresta de baixo do quadro, encostado à
   direita: só 8px em cima da imagem. Medido nas capas da página, é o único
   sítio onde não tapa lettering nenhum. O alvo é o cartão inteiro. */
.page-videos .vplay {
  position: absolute; inset: auto 14px -28px auto; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: #10294f;
  box-shadow: 0 4px 14px #10294f30, inset 0 0 0 1.5px #10294f33;
  transition: transform .25s, background .25s;
}
.page-videos .vplay svg { width: 14px; height: 14px; margin-left: 1.5px; fill: currentColor; }
.page-videos .vcard:hover .vplay,
.page-videos .vcard:has(.vcard__open:focus-visible) .vplay { transform: scale(1.09); background: #ffeb9d; }
.page-videos .vcard__txt { display: flex; flex-direction: column; gap: 7px; padding: 28px 18px 12px; }
.page-videos .vcard__title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font: 700 16px/1.38 var(--sans); letter-spacing: -.01em; color: var(--navy);
}
.page-videos .vcard:has(.vcard__note) .vcard__title { -webkit-line-clamp: 4; line-clamp: 4; }
.page-videos .vcard__note { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.page-videos .vcard__foot {
  position: relative; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding: 6px 12px 12px 18px;
}
.page-videos .vcard__foot .vseen { pointer-events: auto; }
/* O "Já vi" vem primeiro, encostado à esquerda: a coluna da direita é a do
   MYLO flutuante, e com um "Já vi" por cartão ele acabava sempre poisado em
   cima de um (a 390 e a 768). À direita fica só o canal, que é texto.
   Um canal comprido desce para a linha de baixo em vez de se espremer ao
   lado do "Já vi" em quatro linhas (cartões estreitos do PC largo). */
.page-videos .vcard__foot { justify-content: flex-start; flex-wrap: wrap; row-gap: 4px; }
.page-videos .vcard__foot .vseen { order: -1; }
.page-videos .vcard__author { flex-basis: 100%; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.page-videos .vcard.is-seen { border-color: #cfe3d6; }
.page-videos .vcard.is-seen .vthumb img,
.page-videos .vcard.is-seen .vcapa { filter: saturate(.55); opacity: .78; }

/* ── Arte neutra: quando a imagem não existe ou falha ─────────────────── */
.page-videos .art-fallback {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(120% 90% at 22% 18%, #fdfbee 0%, rgba(253,251,238,0) 62%),
    linear-gradient(152deg, #e9f2e7 0%, #dcebe6 52%, #e7eef7 100%);
}
.inner-page.page-videos .art-fallback .ico { width: 34%; height: 34%; max-width: 46px; max-height: 46px; color: #54786a; stroke-width: 1.9; }
.page-videos .is-fallback > .art-fallback,
.page-videos .pcard.is-fallback .pcard__cover > .art-fallback { display: flex; }
.page-videos .is-fallback > img { display: none; }

/* ── Capa da casa ─────────────────────────────────────────────────────────
   Para os vídeos cujo canal só serve a chapa preta (semCapa:true): aguarela
   clara, o motivo em marca de água e o título curto em texto (aria-hidden:
   o título inteiro está escrito no cartão). A lavagem roda pela posição. */
.page-videos .vcapa {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  display: flex; align-items: center; justify-content: center; padding: 16px 18px;
  background:
    radial-gradient(120% 90% at 22% 18%, #fdfbee 0%, rgba(253,251,238,0) 62%),
    radial-gradient(86% 70% at 78% 88%, #dbeae4 0%, rgba(219,234,228,0) 70%),
    linear-gradient(152deg, #eaf3e8 0%, #dcebe6 54%, #e6edf6 100%);
  transition: filter .3s, opacity .3s;
}
.page-videos .vcard:nth-child(3n+2) .vcapa {
  background:
    radial-gradient(120% 90% at 76% 22%, #fdfbee 0%, rgba(253,251,238,0) 60%),
    radial-gradient(86% 70% at 18% 86%, #dceae9 0%, rgba(220,234,233,0) 70%),
    linear-gradient(206deg, #e8f2ea 0%, #dfeae4 52%, #e7eef7 100%);
}
.page-videos .vcard:nth-child(3n+3) .vcapa {
  background:
    radial-gradient(130% 95% at 44% 8%, #fdfbef 0%, rgba(253,251,239,0) 58%),
    radial-gradient(80% 76% at 88% 70%, #dde9e2 0%, rgba(221,233,226,0) 72%),
    linear-gradient(118deg, #e7f1e9 0%, #dbe9e7 50%, #e8edf4 100%);
}
.inner-page.page-videos .vcapa .ico {
  position: absolute; left: -7%; bottom: -18%;
  width: auto; height: 76%; max-width: none; max-height: none;
  color: #4d7568; opacity: .12; stroke-width: 1.5; pointer-events: none;
}
.inner-page.page-videos .vcard:nth-child(3n+2) .vcapa .ico { left: -8%; bottom: auto; top: -16%; height: 70%; }
.inner-page.page-videos .vcard:nth-child(3n+3) .vcapa .ico { left: auto; right: -9%; bottom: auto; top: -18%; height: 70%; }
.page-videos .vcapa__txt {
  position: relative; z-index: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font: 600 18px/1.32 var(--serif); letter-spacing: -.005em; color: var(--green);
  text-align: center; text-wrap: balance;
}
.page-videos .vcapa--mini { padding: 0; }
.inner-page.page-videos .vcapa--mini .ico { position: static; height: 64%; opacity: .32; }

/* ── Níveis (David Deutsch) ───────────────────────────────────────────────
   <details> nativo por nível. Título, contagem e linha de apoio ficam
   sempre à vista; fechado, o conteúdo nem é desenhado (as miniaturas de um
   nível fechado não são pedidas). */
.page-videos .vniveis { display: flex; flex-direction: column; gap: 14px; }
.page-videos .vnivel {
  border: 1px solid var(--line); border-radius: 20px; background: #fffef9;
  scroll-margin-top: 4px;
  transition: border-color .2s, box-shadow .2s;
}
.page-videos .vnivel[open] { background: var(--ivory); box-shadow: 0 1px 0 #10294f0a; }
.inner-page.page-videos .vnivel__sum {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 42px; align-items: center; gap: 4px 16px;
  min-height: 76px; padding: 16px 16px 16px 18px;
  list-style: none; cursor: pointer; border-radius: 20px;
}
.page-videos .vnivel__sum::-webkit-details-marker { display: none; }
.page-videos .vnivel__num {
  grid-column: 1; grid-row: 1 / span 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #fff; font: 800 15px/1 var(--sans);
}
.inner-page.page-videos .vnivel__title {
  grid-column: 2; grid-row: 1; align-self: end; min-width: 0;
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  font: 800 clamp(18px, 2vw, 21px)/1.25 var(--sans); letter-spacing: -.015em; color: var(--navy);
}
.page-videos .vnivel__count { color: var(--muted); font-size: 13.5px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.page-videos .vnivel__seen { color: var(--ok); font-size: 13.5px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.page-videos .vnivel__seen[hidden] { display: none; }
.page-videos .vnivel__sub { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 64ch; text-wrap: pretty; }
.page-videos .vnivel__chev {
  grid-column: 3; grid-row: 1 / span 2;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: #f4f8fd; box-shadow: inset 0 0 0 1px #d2dfec;
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s;
}
.inner-page.page-videos .vnivel__chev .ico { width: 1.1em; height: 1.1em; color: var(--navy); }
.page-videos .vnivel__sum:hover .vnivel__chev { background: #e6f0ff; }
.page-videos .vnivel[open] > .vnivel__sum .vnivel__chev { transform: rotate(180deg); }
.page-videos .vnivel__body { padding: 6px 18px 22px; }

/* ── Cartão de playlist / podcast ──────────────────────────────────────── */
.page-videos .pcard {
  display: flex; gap: 16px; align-items: center; height: 100%;
  padding: 14px; text-decoration: none;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 0 #10294f0a;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
.page-videos .pcard:hover,
.page-videos .pcard:focus-visible { transform: translateY(-3px); border-color: #9fc0e6; box-shadow: 0 12px 26px #10294f1a; }
.page-videos .pcard__cover {
  position: relative; flex: none; width: 88px; height: 88px; border-radius: 14px; overflow: hidden;
  background: #eaf1ea; box-shadow: inset 0 0 0 1px #10294f14;
}
.page-videos .pcard__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-videos .pcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-videos .pcard__show { font: 800 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.page-videos .pcard__title { font: 700 16px/1.35 var(--sans); letter-spacing: -.01em; color: var(--navy); }
.page-videos .pcard__ep { font-size: 13.5px; color: var(--muted); }
.page-videos .pcard__note { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.page-videos .pcard__plat { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; color: var(--blue); font: 700 13px/1 var(--sans); }
.inner-page.page-videos .pcard__plat .ico { width: 1.1em; height: 1.1em; color: var(--blue); }

/* ── Cartão de mentor ──────────────────────────────────────────────────── */
.page-videos .mcard {
  display: flex; gap: 18px; align-items: flex-start; height: 100%; padding: 20px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 0 #10294f0a;
}
.page-videos .mcard__portrait {
  position: relative; flex: none; width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: #eaf1ea; box-shadow: inset 0 0 0 1px #10294f1a;
}
.page-videos .mcard__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-videos .mcard__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inner-page.page-videos .mcard__name { margin: 0; font: 800 20px/1.25 var(--sans); letter-spacing: -.02em; color: var(--green); }
.inner-page.page-videos .mcard__line { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--navy); }
.page-videos .mcard__link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; color: var(--blue); font-weight: 700; text-decoration: none; }
.page-videos .mcard__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ══ LEITOR ════════════════════════════════════════════════════════════ */
.page-videos .vmodal {
  width: min(1200px, 94vw); max-width: 94vw; max-height: 92dvh;
  margin: auto; padding: 0; border: 0; border-radius: 22px; overflow: hidden;
  background: var(--ivory); color: var(--navy);
  box-shadow: 0 40px 90px #0b1a2e80;
}
.page-videos .vmodal::backdrop {
  background: rgba(9, 22, 42, .76);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Com o leitor aberto a página guarda a goteira da barra de scroll
   (scrollbar-gutter, mylo-companion.css) e o ::backdrop não chega lá: ficava
   uma faixa de marfim à direita. Pinta-se com o véu já composto sobre marfim. */
html.vmodal-open { background: #444d5b; }
.page-videos .vmodal[open] { display: flex; }
.page-videos .vmodal__inner { display: flex; flex-direction: column; width: 100%; max-height: 92dvh; min-height: 0; }
.page-videos .vmodal__bar {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 22px; border-bottom: 1px solid var(--line);
}
.inner-page.page-videos .vmodal__where {
  flex: 1; min-width: 0; margin: 0; display: flex;
  font: 800 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green);
  white-space: nowrap;
}
.page-videos .vmodal__g { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.page-videos .vmodal__n { flex: none; white-space: pre; }
.page-videos .vmodal__close {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f4f8fd; color: var(--navy); box-shadow: inset 0 0 0 1px #d2dfec;
}
.page-videos .vmodal__close:hover { background: #e6f0ff; box-shadow: inset 0 0 0 1px #9fc0e6; }
.inner-page.page-videos .vmodal__close .ico { color: var(--navy); width: 1.15em; height: 1.15em; }
.page-videos .vmodal__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.page-videos .vmodal__stage { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.page-videos .vmodal__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(92dvh - 230px);
  background: #0b1a2e;
}
.page-videos .vmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.page-videos .vmodal__meta { display: flex; flex-direction: column; gap: 4px; padding: 18px 24px 22px; }
.inner-page.page-videos .vmodal__title {
  margin: 0; font: 800 clamp(18px, 1.7vw, 22px)/1.3 var(--sans); letter-spacing: -.015em; color: var(--navy); text-wrap: balance;
}
.inner-page.page-videos .vmodal__author { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.inner-page.page-videos .vmodal__note { margin: 6px 0 0; max-width: 72ch; font-size: 15.5px; line-height: 1.55; color: var(--navy); }
.page-videos .vmodal__note[hidden] { display: none; }
.page-videos .vmodal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.page-videos .vmodal__step { display: flex; gap: 8px; }
.page-videos .vmodal__nav {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--blue); color: var(--blue); background: var(--ivory);
  font: 700 14.5px/1 var(--sans);
  transition: background .2s;
}
.page-videos .vmodal__nav:hover:not(:disabled) { background: #e6f0ff; }
.page-videos .vmodal__nav:disabled { opacity: .45; cursor: default; border-color: #9db3c9; color: #5b7088; }
.inner-page.page-videos .vmodal__nav .ico { width: 17px; height: 17px; color: currentColor; vertical-align: 0; }

.page-videos .vmodal__queue {
  min-height: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--line); background: #fbf8ee;
}
.inner-page.page-videos .vmodal__qlabel {
  flex: none; margin: 0; padding: 16px 18px 10px;
  font: 800 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
.page-videos .vmodal__list {
  flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0 10px 14px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.page-videos .vq__item {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 12px;
  width: 100%; padding: 8px; border-radius: 12px; text-align: left;
  transition: background .2s, box-shadow .2s;
}
.page-videos .vq__item:hover { background: #f0f5fb; }
.page-videos .vq__item[aria-current="true"] { background: #e6effc; box-shadow: inset 0 0 0 1.5px var(--blue); }
.inner-page.page-videos .vq__item:focus-visible { outline-offset: -3px; }
.page-videos .vq__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 8px; background: #eaf1ea; box-shadow: inset 0 0 0 1px #10294f14;
}
.page-videos .vq__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-videos .vq__check {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%;
  display: none; place-items: center; background: var(--ok); box-shadow: 0 2px 6px #0b1a2e40;
}
.page-videos .vq__check svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.page-videos .vq__item.is-seen .vq__check { display: grid; }
.page-videos .vq__item.is-seen .vq__thumb img { filter: saturate(.55); opacity: .8; }
.page-videos .vq__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-videos .vq__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 700 13.5px/1.35 var(--sans); color: var(--navy);
}
.page-videos .vq__meta { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); }

/* Tablet: sem espaço para a fila ao lado — passa para baixo e o corpo rola. */
@media (max-width: 1023px) {
  .page-videos .vmodal__body { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  .page-videos .vmodal__stage { overflow: visible; flex: none; }
  .page-videos .vmodal__queue { flex: none; }
  .page-videos .vmodal__frame { max-height: none; }
  .page-videos .vmodal__queue { border-left: 0; border-top: 1px solid var(--line); }
  .page-videos .vmodal__list { overflow: visible; }
}

/* ══ FIM: a crescer + fecho ════════════════════════════════════════════ */
.page-videos .vp-fim { max-width: 1120px; margin: 0 auto; }
.page-videos .growing {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px;
  margin: 0 0 var(--s5);
}
.inner-page.page-videos .growing__title {
  margin: 0; font: 800 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green);
}
.page-videos .grow-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.page-videos .soon-card {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 8px 6px 16px;
  border: 1px dashed #c6d5e4; border-radius: 999px; background: #fffef9;
}
.inner-page.page-videos .soon-card .ico { width: 20px; height: 20px; color: var(--green); vertical-align: 0; }
.page-videos .soon-card__name { font: 700 15px/1.2 var(--sans); color: var(--navy); }
.page-videos .soon-card__name { white-space: nowrap; }
.page-videos .soon-card__tag {
  padding: 7px 12px; border-radius: 999px; background: #f3f7ee; box-shadow: inset 0 0 0 1px #cbd9c5;
  font: 800 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #2c5a3e;
  white-space: nowrap;
}
.page-videos .closing-panel {
  padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 24px; text-align: center;
  background:
    radial-gradient(70% 90% at 0% 0%, #e3efe6 0%, rgba(227,239,230,0) 60%),
    radial-gradient(60% 80% at 100% 100%, #fdf3cf 0%, rgba(253,243,207,0) 62%),
    var(--ivory);
  box-shadow: 0 1px 0 #10294f0a;
}
.inner-page.page-videos .closing-panel h2 { margin: 0 auto 14px; max-width: 20ch; }
.inner-page.page-videos .closing-panel p { margin: 0 auto; max-width: 52ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--muted); }
.page-videos .closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: var(--s4); }
.inner-page.page-videos .closing-actions .ico { width: 18px; height: 18px; color: currentColor; vertical-align: 0; }
.inner-page.page-videos .living-note {
  margin: var(--s4) auto 0; text-align: center; font-size: 15px; font-style: italic; color: var(--muted);
}

/* ══ TABLET ════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .page-videos .palco { grid-template-columns: 1fr; }
  .page-videos .palco__list { display: grid; grid-template-columns: 1fr; gap: 8px; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .page-videos .palco__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-videos .palco__pick { grid-template-columns: 1fr; gap: 8px; padding: 8px 8px 12px; align-content: start; height: 100%; }
  .page-videos .palco__num { position: absolute; z-index: 1; top: 14px; left: 14px; }
  .page-videos .palco__txt { padding: 0 4px; }
}

/* ══ TELEMÓVEL ═════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .inner-page.page-videos .scenic-hero__inner::before { --veu: -42% -62%; }
  .page-videos .vp-hero-cta { margin-top: var(--s3); gap: 10px; }
  .page-videos .vp-hero-stats { font-size: 13px; padding: 6px 14px; }
  .page-videos .comeca { margin-bottom: var(--s5); }
  .page-videos .vp-head { margin-bottom: var(--s3); }
  /* A mesma goteira dos títulos e dos cartões (antes sangrava até 6px da
     borda do ecrã e desalinhava do título logo acima). */
  .page-videos .palco { margin: 0; padding: 10px; border-radius: 20px; gap: 16px; }
  .page-videos .palco__screen { border-radius: 12px; }
  .page-videos .palco__cta { min-height: 44px; padding: 5px 16px 5px 5px; font-size: 15px; gap: 8px; }
  .page-videos .palco__cta-ico { width: 34px; height: 34px; }
  .page-videos .palco__info { padding: 0 6px 2px; }
  .page-videos .palco__actions { gap: 6px 14px; margin-top: 10px; }
  .page-videos .palco__pick { grid-template-columns: 26px 104px minmax(0, 1fr); gap: 10px; padding: 8px 10px 8px 8px; }
  .page-videos .palco__num { width: 26px; height: 26px; font-size: 12px; }
  .page-videos .palco__ptitle { font-size: 14px; }

  .page-videos .vsec { margin-bottom: clamp(52px, 13vw, 72px); }
  .page-videos .vsec__head { margin-bottom: var(--s3); }
  .inner-page.page-videos .vsec__head h2 { gap: 12px; }
  .page-videos .vsec__ico { width: 44px; height: 44px; border-radius: 14px; }
  .inner-page.page-videos .vsec__ico .ico { width: 23px; height: 23px; }
  .page-videos .vgrid { gap: var(--s2); }

  /* Cartão deitado: miniatura 16:9 inteira à esquerda, título ao lado, a
     nota por baixo em largura toda e o rodapé (canal + "Já vi") no fim. */
  .page-videos .vcard { border-radius: 16px; }
  .page-videos .vcard__open {
    display: grid; grid-template-columns: min(40%, 168px) minmax(0, 1fr);
    grid-template-areas: "thumb title" "note note"; align-items: center; column-gap: 14px;
    padding: 12px 12px 0;
  }
  .page-videos .vthumb {
    grid-area: thumb; align-self: start; margin-bottom: 18px;
    border: 1px solid var(--line); border-radius: 11px;
  }
  .page-videos .vcard__txt { display: contents; }
  .page-videos .vcard__title { grid-area: title; align-self: center; margin-bottom: 18px; font-size: 15px; -webkit-line-clamp: 4; line-clamp: 4; }
  .page-videos .vcard__note { grid-area: note; margin: 0 0 4px; padding: 0 2px; font-size: 14px; }
  /* O selo desce quase todo para o papel: 7px em cima da imagem, 19 por baixo. */
  .page-videos .vplay { inset: auto 8px -19px auto; width: 26px; height: 26px; }
  .page-videos .vplay svg { width: 10px; height: 10px; }
  .page-videos .vcard__foot { padding: 6px 8px 10px 14px; }
  .page-videos .vcard__author { font-size: 13px; }
  .page-videos .vseen { min-height: 40px; }
  /* A capa da casa deitada é pequena: o título sai (está escrito ao lado) e
     fica a lavagem com o motivo ao centro. */
  .page-videos .vcapa { padding: 0; }
  .page-videos .vcapa__txt { display: none; }
  .inner-page.page-videos .vcapa .ico,
  .inner-page.page-videos .vcard:nth-child(3n+2) .vcapa .ico,
  .inner-page.page-videos .vcard:nth-child(3n+3) .vcapa .ico { position: static; height: 72%; opacity: .3; }

  .inner-page.page-videos .vnivel__sum { grid-template-columns: 32px minmax(0, 1fr) 38px; gap: 4px 12px; padding: 14px 12px 14px 14px; }
  .page-videos .vnivel__num { width: 32px; height: 32px; font-size: 14px; }
  .page-videos .vnivel__chev { width: 38px; height: 38px; }
  .page-videos .vnivel__body { padding: 4px 10px 14px; }
  .page-videos .vnivel { border-radius: 18px; }

  .page-videos .pcard__cover { width: 72px; height: 72px; }
  .page-videos .mcard { padding: 16px; gap: 14px; }
  .page-videos .mcard__portrait { width: 72px; height: 72px; }

  /* Leitor em ecrã inteiro: vídeo colado ao topo, fila por baixo. */
  .page-videos .vmodal {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0;
  }
  .page-videos .vmodal__inner { max-height: 100dvh; height: 100%; }
  .page-videos .vmodal__bar { padding: 6px 8px 6px 16px; }
  .page-videos .vmodal__frame { position: sticky; top: 0; z-index: 2; }
  .page-videos .vmodal__meta { padding: 14px 16px 18px; }
  .page-videos .vmodal__actions { gap: 8px 12px; }
  .page-videos .vmodal__step { order: 3; width: 100%; }
  .page-videos .vmodal__nav { flex: 1; justify-content: center; }
  .page-videos .vq__item { grid-template-columns: 112px minmax(0, 1fr); }

  .page-videos .growing { flex-direction: column; gap: 12px; }
  .page-videos .closing-actions .button { width: 100%; }
}
@media (max-width: 560px) {
  .page-videos .vp-hero-cta { width: 100%; max-width: 420px; }
  .page-videos .vp-hero-cta .button { width: 100%; }
}
@media (max-width: 380px) {
  /* Nome e etiqueta inteiros; se não couberem lado a lado, a etiqueta desce
     inteira (nunca "EM / BREVE" partido). */
  .page-videos .soon-card { display: grid; grid-template-columns: 20px minmax(0, 1fr); justify-items: center; row-gap: 6px; width: min(100%, 288px); padding: 7px 8px; border-radius: 24px; }
  .page-videos .soon-card__name { font-size: 14.5px; }
  .page-videos .soon-card__tag { grid-column: 1 / -1; padding: 6px 10px; letter-spacing: .1em; }
  .page-videos .palco__pick { grid-template-columns: 24px 88px minmax(0, 1fr); }
  .page-videos .pcard { gap: 12px; padding: 12px; }
  .page-videos .pcard__cover { width: 60px; height: 60px; border-radius: 12px; }
  .page-videos .pcard__title { font-size: 15px; }
  .page-videos .vcard__open { grid-template-columns: min(42%, 140px) minmax(0, 1fr); column-gap: 12px; }
  .page-videos .vcard__title { font-size: 14.5px; }
}

/* No tablet, os cartões da coluna direita deixam o ▶ do lado oposto ao MYLO. */
@media (min-width: 701px) and (max-width: 1139px) {
  .page-videos .vgrid > .vcard:nth-child(even) .vplay {
    right: auto;
    left: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-videos .vcard, .page-videos .pcard, .page-videos .vplay, .page-videos .vnivel__chev,
  .page-videos .palco__poster img, .page-videos .palco__cta, .page-videos .vbar > span,
  .page-videos .vseen, .page-videos .vseen__box svg { transition: none; }
  .page-videos .vcard:hover, .page-videos .vcard:has(.vcard__open:focus-visible),
  .page-videos .pcard:hover, .page-videos .palco__poster:hover img,
  .page-videos .palco__poster:hover .palco__cta { transform: none; }
}