/* ============================================================
   Portfólio Gabriela Von Sydow Canavarro Yuan
   Direção "Sala Escura" — mobile-first
   ============================================================ */

/* ---- Paleta "Sala Escura" ----
   Convenção de cinema/streaming: o vídeo destaca-se contra o escuro.
   Fixada em 2026-08-18 após comparação lado a lado com uma alternativa clara. */
:root {
  --bg: #0B0B0D;
  --surface: #141317;
  --surface-2: #1A1A1E;
  --text: #EDEAE4;
  --muted: #8A8678;
  --accent: #E0A458;
  --nav-fade: rgba(11, 11, 13, 0.92);
  --tc-bg: rgba(11, 11, 13, 0.72);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --pad: 20px;
  --gap: 16px;
  --nav-h: 60px;
  --maxw: 1440px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --pad: 32px; --gap: 24px; --nav-h: 68px; }
}
@media (min-width: 1200px) {
  :root { --pad: 48px; --gap: 32px; }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

::selection { background: var(--accent); color: var(--bg); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--bg); padding: 12px 20px;
  font-family: var(--font-mono); font-size: 12px;
}
.skip-link:focus { left: 0; }

/* ---- Link com sublinhado animado ---- */
.link { position: relative; transition: color 300ms var(--ease); }
.link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--accent);
  transition: width 300ms var(--ease);
}
.link:hover::after, .link:focus-visible::after { width: 100%; }
.link:hover, .link:focus-visible { color: var(--accent); }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--nav-h); padding: 0 var(--pad);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: linear-gradient(to bottom, var(--nav-fade), transparent);
  backdrop-filter: blur(6px);
}
.nav__brand { font-weight: 500; letter-spacing: 0.2em; }

.nav__toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; margin-right: -10px;
}
.nav__toggle span {
  display: block; height: 1px; width: 22px; background: var(--text);
  transition: transform 300ms var(--ease), opacity 200ms;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.nav__links {
  position: fixed; inset: var(--nav-h) 0 auto 0;
  display: grid; gap: 4px;
  padding: 16px var(--pad) 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--surface-2);
  transform: translateY(-120%);
  transition: transform 400ms var(--ease);
}
.nav__links.is-open { transform: translateY(0); }
.nav__links a { padding: 14px 0; }

.lang-toggle {
  justify-self: start; margin-top: 8px;
  border: 1px solid var(--muted); color: var(--muted);
  padding: 10px 14px !important;
  transition: color 300ms, border-color 300ms;
}
.lang-toggle:hover { color: var(--accent); border-color: var(--accent); }

@media (min-width: 768px) {
  .nav__toggle { display: none; }
  .nav__links {
    position: static; transform: none; display: flex; align-items: center;
    gap: 28px; padding: 0; background: none; border: none;
  }
  .lang-toggle { margin-top: 0; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,13,0.95) 0%, rgba(11,11,13,0.35) 50%, rgba(11,11,13,0.55) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad) clamp(48px, 10vh, 96px);
}
.hero__name {
  font-size: clamp(32px, 8vw, 76px);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.02em;
  max-width: 14ch;
}
.hero__tag {
  margin-top: 16px;
  font-family: var(--font-mono); font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
}
.hero__avail {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
/* CTA do showreel — só é renderizado quando existe um reel real (com som). */
.btn-reel {
  display: inline-block; margin-top: 26px;
  border: 1px solid var(--accent); color: var(--accent);
  padding: 14px 22px;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.btn-reel:hover, .btn-reel:focus-visible { background: var(--accent); color: var(--bg); }

/* ============ SECÇÕES ============ */
.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(56px, 12vw, 120px) var(--pad);
}
.section--top { padding-top: calc(var(--nav-h) + 48px); }

.section__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.section__num { color: var(--accent); }
.section__title {
  font-size: clamp(24px, 5vw, 40px); font-weight: 700; letter-spacing: -0.01em;
}
.lead { max-width: 62ch; color: var(--muted); margin-bottom: 32px; font-size: clamp(15px, 2.2vw, 17px); }
.cta { display: inline-block; margin-top: 28px; }

/* ============ GRELHA / CARDS ============ */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card { display: block; }
.card__media {
  position: relative; overflow: hidden; background: var(--surface);
  aspect-ratio: 16 / 9;
}
/* Peças verticais ficam com a MESMA altura das outras na grelha: a moldura
   mantem-se 16:9 e o frame vertical e contido dentro dela. Antes ocupavam
   duas linhas e desequilibravam a pagina. */
.card--portrait .card__poster,
.card--portrait .card__loop { object-fit: contain; background: var(--bg); }

.card__poster, .card__loop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 500ms var(--ease), transform 700ms var(--ease);
}
.card__loop { opacity: 0; }
.card:hover .card__loop, .card:focus-visible .card__loop { opacity: 1; }
.card:hover .card__poster { transform: scale(1.03); }

.card__tc {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: var(--tc-bg); color: var(--accent);
  padding: 4px 8px; font-size: 10px; letter-spacing: 0.12em;
}
.card__meta { padding: 12px 2px 0; }
.card__title {
  font-size: clamp(16px, 2.4vw, 19px); font-weight: 700; line-height: 1.25;
  transition: color 300ms var(--ease);
}
.card:hover .card__title { color: var(--accent); }
.card__meta p { margin-top: 4px; font-size: 11px; }

/* ============ CHIPS (filtros) ============ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 9px 14px; border: 1px solid var(--surface-2); color: var(--muted);
  transition: color 250ms, border-color 250ms, background-color 250ms;
}
.chip:hover { color: var(--text); border-color: var(--muted); }
.chip.is-active { color: var(--bg); background: var(--accent); border-color: var(--accent); }

.card.is-hidden { display: none; }

/* ============ PROJETO ============ */
.project { max-width: 1100px; margin: 0 auto; padding: calc(var(--nav-h) + 32px) var(--pad) 96px; }
.player { background: #000; margin-bottom: 32px; }
.player video { width: 100%; height: auto; }
.player--portrait { max-width: 420px; margin-inline: auto; }

.project__title { font-size: clamp(26px, 6vw, 46px); font-weight: 700; letter-spacing: -0.02em; }
.project__meta {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin: 28px 0; padding: 22px 0; border-top: 1px solid var(--surface-2); border-bottom: 1px solid var(--surface-2);
}
@media (min-width: 640px) { .project__meta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .project__meta { grid-template-columns: repeat(4, 1fr); } }
.project__meta dt { color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.project__meta dd { color: var(--text); font-size: 12px; text-transform: none; letter-spacing: 0.02em; }
.project__body { max-width: 62ch; font-size: clamp(15px, 2.2vw, 17px); color: var(--muted); }
.project__body p { margin-bottom: 16px; }
/* Versão alternativa da mesma peça (ex.: corte vertical para Reels) */
.project__alt {
  margin-top: 44px; padding-top: 28px;
  border-top: 1px solid var(--surface-2);
}
.project__alt-note {
  max-width: 52ch; margin-bottom: 20px;
  color: var(--muted); font-size: clamp(14px, 2vw, 16px);
}

/* Peça por lançar — informação de estado, não de conteúdo. */
.project__release {
  margin-top: 18px; color: var(--accent);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}

.project__nav {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--surface-2);
}

/* ============ FOTOGRAFIA ============ */
.masonry { columns: 1; column-gap: var(--gap); }
@media (min-width: 560px) { .masonry { columns: 2; } }
@media (min-width: 1000px) { .masonry { columns: 3; } }
@media (min-width: 1400px) { .masonry { columns: 4; } }

.shot {
  display: block; width: 100%; margin-bottom: var(--gap);
  break-inside: avoid; overflow: hidden; background: var(--surface);
}
.shot img { width: 100%; transition: transform 600ms var(--ease), opacity 300ms; }
.shot:hover img { transform: scale(1.04); opacity: 0.9; }

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 4vmin;
  background: rgba(11,11,13,0.97);
  opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 92vh; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px; color: var(--text); font-size: 20px;
}
.lightbox__close:hover { color: var(--accent); }

/* ============ CV ============
   Duas colunas: barra lateral tramada + coluna principal. O desenho segue o
   curriculo original (A4 com lateral tramada e barras pretas em cima/baixo);
   as barras so existem em papel — ver @media print.
   No ecra a mesma marcacao renderiza no tema escuro e empilha no telemovel. */
.cv__toolbar { display: flex; justify-content: flex-end; margin-bottom: 24px; }

.btn-download {
  white-space: nowrap;
  border: 1px solid var(--accent); color: var(--accent);
  padding: 13px 20px; transition: background-color 300ms, color 300ms;
}
.btn-download:hover { background: var(--accent); color: var(--bg); }

/* Os tipos do curriculo aplicam-se no ecra E em papel. Declara-los apenas
   dentro de @media print faz com que o browser nunca os descarregue — a
   impressao acontece antes de chegarem e o PDF sai no tipo do sistema. */
.cv__sheet {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 300;
}
.cv__name { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-weight: 400; }
.cv__name-line { display: block; }
.cv__label {
  font-family: 'Ruda', system-ui, sans-serif; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0;
}
.cv__item-title, .cv__job-label, .cv__job-org {
  font-family: 'Ruda', system-ui, sans-serif; font-weight: 400;
}
.cv__bio, .cv__plain, .cv__tags, .cv__bullets, .cv__item-meta, .cv__job-role {
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 300;
}
.cv__tags { font-weight: 400; }

.cv__sheet { display: grid; grid-template-columns: 1fr; }
/* Largura travada: com a coluna principal a toda a largura do ecra a linha de
   texto fica longa demais para ler com conforto. */
@media (min-width: 900px) {
  .cv__sheet { grid-template-columns: 300px minmax(0, 720px); }
}

/* Barras pretas: dispositivo de impressao, invisiveis no ecra escuro. */
.cv__bar { display: none; }

/* Retrato: mesma proporcao do curriculo impresso (55.9 x 48.6mm), recortado
   do peito para cima. Sem isto herdava max-width:100% com os atributos
   width/height do HTML — a largura encolhia, a altura nao, e a foto esticava.
   O recorte vertical em papel e outro (ver @media print) e nao deve mudar. */
.cv__portrait {
  width: 100%;
  /* height:auto e obrigatorio: o atributo height="400" do HTML conta como
     hint de apresentacao e venceria a aspect-ratio. */
  height: auto;
  aspect-ratio: 55.9 / 48.6;
  object-fit: cover;
  object-position: 50% 24%;
  background: var(--surface);
}

.cv__aside {
  background: var(--surface); padding: 32px 26px;
  display: grid; gap: 30px; align-content: start;
}
.cv__main { padding: 32px 0; display: grid; gap: 34px; align-content: start; }
@media (min-width: 900px) { .cv__main { padding: 32px 0 32px 44px; } }

.cv__name {
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.05; letter-spacing: -0.01em;
}

.cv__sec { display: grid; align-content: start; }
.cv__label { color: var(--accent); margin-bottom: 16px; }
.cv__sub { color: var(--muted); margin: 26px 0 14px; }
.cv__sec--work .cv__sub:first-of-type { margin-top: 0; }

.cv__plain { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.cv__plain--accent { color: var(--accent); }

.cv__bio { color: var(--muted); font-size: clamp(15px, 2.2vw, 17px); max-width: 62ch; }
.cv__bio p + p { margin-top: 14px; }

.cv__list { display: grid; gap: 22px; }
.cv__year { color: var(--accent); }
.cv__item-title { font-size: 16px; font-weight: 700; margin: 5px 0 3px; }
.cv__item-meta { font-size: 13px; color: var(--muted); line-height: 1.55; }
.cv__role { display: block; color: var(--text); margin-bottom: 2px; }

/* Experiencia: "Freelancer" como cabecalho, depois cada cliente com bullets. */
.cv__job-label { font-size: 18px; margin-bottom: 18px; }
.cv__jobs { display: grid; gap: 22px; }
.cv__job-org { font-size: 15px; font-weight: 700; }
.cv__job-role { font-size: 14px; color: var(--muted); margin-top: 2px; }
.cv__bullets { margin-top: 8px; display: grid; gap: 5px; }
.cv__bullets li {
  position: relative; padding-left: 16px;
  font-size: 13px; color: var(--muted); line-height: 1.5;
}
.cv__bullets li::before {
  content: "•"; position: absolute; left: 0; color: var(--accent);
}

/* Idiomas + Portfolio a fechar a coluna principal, lado a lado. */
.cv__footcols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.cv__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cv__tags li { padding: 7px 11px; background: var(--surface-2); color: var(--text); font-size: 12px; }
.cv__aside .cv__tags li { background: var(--bg); }


/* ============ CONTACTO ============ */
.section--contact { text-align: center; }
.mailto {
  display: inline-block; margin: 14px 0 20px;
  font-size: clamp(20px, 5vw, 36px); font-weight: 700; letter-spacing: -0.01em;
  word-break: break-word;
}
.contact__social { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 24px; }

/* ============ FOOTER ============ */
.footer {
  display: flex; flex-direction: column; gap: 18px;
  max-width: var(--maxw); margin: 0 auto;
  padding: 40px var(--pad) 56px;
  border-top: 1px solid var(--surface-2);
}
@media (min-width: 768px) { .footer { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.footer__col { display: grid; gap: 6px; }
.footer__name { font-weight: 700; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.footer .mono, .footer .link { font-size: 11px; }

/* ============ IMPRESSÃO / PDF ============
   O site é escuro (cinema). O CV impresso não pode ser: gasta tinta e
   lê-se pior em papel. Aqui o tema inverte-se — fundo branco, texto preto,
   âmbar escurecido só nos títulos. É esta folha que produz o PDF do CV
   (ver scripts/gen_cv_pdf.py). */
@media print {
  /* ------------------------------------------------------------------
     Medidas retiradas do curriculo de referencia da Gabriela (PDF de
     2026-08-24) com pymupdf — nao sao estimativas:
       lateral 80.6mm | coluna principal x=93.5mm | texto ate x=189mm
       barras pretas 4.3mm de altura, recuadas 21mm de cada lado
       retrato 55.9 x 48.6mm em x=11.9mm y=20.3mm
       nome 33.7pt Atkinson | rotulos 12pt Ruda-Black | corpo 11.6pt Nunito
     O site e escuro; em papel o tema inverte.
     ------------------------------------------------------------------ */
  @page { size: A4; margin: 0; }

  html, body { background: #FFFFFF !important; color: #000000 !important; }

  .nav, .footer, .skip-link, .btn-download, .btn-reel, .cv__toolbar,
  .hero, .lightbox, .chips { display: none !important; }

  .section, .section--top {
    padding: 0 !important; margin: 0 !important; max-width: none !important;
  }

  /* ---- A folha ---- */
  .cv__sheet {
    display: grid !important;
    grid-template-columns: 80.6mm 1fr !important;
    grid-template-rows: 4.3mm 1fr 4.3mm !important;
    /* 296mm e nao 297: a folha exata arredonda para cima no Chrome e
       gera uma segunda pagina em branco. */
    min-height: 296mm;
    font-weight: 300 !important;
  }
  /* As barras nao vao de bordo a bordo: comecam a 21mm e acabam a 189mm.
     Feito com margem e nao com gradiente — o Chrome nao pinta gradientes de
     fundo na impressao. */
  .cv__bar {
    display: block !important;
    grid-column: 1 / -1;
    background: #000000 !important;
    margin: 0 21mm !important;
  }

  .cv__aside {
    background: #D9D9D9 !important;
    /* Recuo esquerdo 11.6mm = o do original. A direita leva menos: nada la
       esta alinhado e em EN "Advertising and Communication" partia em duas
       linhas, empurrando a lateral para uma 2.a folha. */
    padding: 16mm 5mm 6mm 11.6mm !important;
    gap: 0 !important;
    display: block !important;
  }
  /* x=93.5mm a partir do bordo: 93.5 - 80.6 = 12.9mm de recuo.
     Texto ate 189mm: 210 - 189 = 21mm a direita. */
  .cv__main {
    padding: 18mm 21mm 6mm 12.9mm !important;
    gap: 0 !important; display: block !important;
  }

  /* ---- Retrato: 55.9 x 48.6mm, recorte largo ---- */
  .cv__portrait {
    width: 55.9mm !important; height: 48.6mm !important;
    aspect-ratio: auto !important;
    object-fit: cover !important; object-position: 50% 20% !important;
    margin-bottom: 7mm !important;
  }

  /* ---- Nome ---- */
  .cv__id { margin-bottom: 15mm !important; }
  .cv__name {
    font-size: 32pt !important; font-weight: 400 !important;
    line-height: 1.06 !important; letter-spacing: 0 !important;
    max-width: none !important; color: #000000 !important;
  }

  /* ---- Rotulos de seccao ---- */
  .cv__sec { margin-bottom: 8mm !important; }
  .cv__sec:last-child { margin-bottom: 0 !important; }
  .cv__label {
    font-size: 12pt !important; font-weight: 900 !important;
    letter-spacing: 0 !important; text-transform: uppercase !important;
    color: #000000 !important; margin-bottom: 2.6mm !important;
  }

  /* ---- Corpo ---- */
  .cv__plain, .cv__tags, .cv__bio, .cv__bullets, .cv__item-meta {
    font-size: 11.6pt !important; font-weight: 300 !important;
    color: #000000 !important;
  }
  .cv__plain { display: grid !important; gap: 0 !important; }
  .cv__plain li { line-height: 1.88 !important; }
  .cv__bio { line-height: 1.37 !important; }
  .cv__bio p + p { margin-top: 2.4mm !important; }

  /* Competencias tecnicas e ferramentas: Nunito Regular, uma linha cada. */
  .cv__tags {
    display: grid !important; grid-template-columns: 1fr !important;
    gap: 0 !important; font-weight: 400 !important;
  }
  .cv__tags li {
    background: none !important; border: 0 !important; padding: 0 !important;
    font-size: 11.6pt !important; line-height: 1.49 !important;
    color: #000000 !important;
  }

  /* ---- Formacao ---- */
  .cv__list { display: grid !important; gap: 3mm !important; }
  .cv__item-title {
    font-size: 13.5pt !important; font-weight: 400 !important;
    color: #000000 !important; margin: 0 0 0.8mm !important;
  }
  .cv__item-meta { font-size: 12.5pt !important; line-height: 1.28 !important; }

  /* ---- Experiencia ---- */
  .cv__job-label {
    font-size: 13.5pt !important; font-weight: 400 !important;
    color: #000000 !important; margin-bottom: 2.6mm !important;
  }
  .cv__jobs { display: grid !important; gap: 5mm !important; }
  .cv__job-org {
    font-size: 11.5pt !important; font-weight: 400 !important;
    color: #000000 !important;
  }
  .cv__job-role {
    font-size: 12.5pt !important; font-weight: 300 !important;
    color: #000000 !important; margin-top: 0.6mm !important;
  }
  .cv__bullets { margin-top: 1.8mm !important; display: grid !important; gap: 0.6mm !important; }
  .cv__bullets li {
    padding-left: 7mm !important; line-height: 1.25 !important;
    font-size: 11.6pt !important; font-weight: 300 !important;
    color: #000000 !important;
  }
  .cv__bullets li::before { content: "•" !important; left: 3mm !important; color: #000000 !important; }

  /* ---- Idiomas + Portfolio: segunda coluna comeca a x=145.7mm ---- */
  .cv__footcols {
    display: grid !important;
    grid-template-columns: 52.2mm 1fr !important;
    gap: 0 !important;
  }
  .cv__footcols .cv__sec { margin-bottom: 0 !important; }

  /* Nada se parte a meio */
  .cv__job, .cv__item { break-inside: avoid; page-break-inside: avoid; }

  a, .link { color: inherit !important; text-decoration: none !important; }
  .link::after { display: none !important; }
  .muted, .accent { color: #000000 !important; }

  /* Forca as cores a imprimir (Chrome ignora backgrounds por omissao) */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ============ MOVIMENTO REDUZIDO ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__video, .card__loop { display: none; }
}

/* ============ EDITORIAL (spreads de livro) ============
   Spreads são A4 paisagem — largos. Em vez de colunas de alvenaria como na
   fotografia, empilham a toda a largura: folheia-se o livro em vez de o
   espreitar. */
.card__media--book { aspect-ratio: 297 / 210; }

.spreads { display: grid; gap: var(--gap); }
.spread {
  display: block; width: 100%;
  overflow: hidden; background: var(--surface);
}
.spread img { width: 100%; transition: transform 600ms var(--ease), opacity 300ms; }
.spread:hover img { transform: scale(1.02); opacity: 0.92; }

@media print {
  .spreads { display: none; }
}

/* ============ CORTES PARA REDES SOCIAIS ============
   Excertos verticais da mesma peca. Lado a lado a partir de tablet — vem-se
   como um par, que e o que sao: duas escolhas editoriais do mesmo episodio. */
.cuts { display: grid; grid-template-columns: 1fr; gap: var(--gap); max-width: 420px; }
@media (min-width: 640px) {
  /* Dois cortes lado a lado, cada um com a largura do player vertical (420px). */
  .cuts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(420px * 2 + var(--gap)); }
}

.cut { margin: 0; }
.cut video { width: 100%; background: #000; aspect-ratio: 9 / 16; object-fit: contain; }
.cut figcaption { margin-top: 10px; font-size: 11px; text-transform: none; letter-spacing: 0.04em; }