/* Portfólio Matheus Cunha
   Leitura: portfólio pessoal de editor de vídeo, linguagem de cartaz de cinema.
   A identidade vem dos retratos: preto e o vermelho profundo do fundo das fotos.
   Tema único (escuro). Um destaque (vermelho). Raio único de 4px.
   Barlow Condensed nos títulos, Plus Jakarta Sans no texto. */

@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("fonts/BarlowCondensed-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("fonts/BarlowCondensed-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/BarlowCondensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("fonts/PlusJakartaSans-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("fonts/PlusJakartaSans-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("fonts/PlusJakartaSans-600-latin.woff2") format("woff2"); }

:root {
  --preto: #080405;
  --preto-2: #140a0b;
  --vinho: #48000b;
  --vinho-luz: #6b0210;
  --vermelho: #d81e33;
  --texto: #f6f0ee;
  --suave: #b8a9a7;
  --linha: rgba(246, 240, 238, 0.14);
  --raio: 4px;
  --margem: clamp(16px, 4vw, 64px);
  --largura: 1480px;
  --topo: 68px;
  --titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* camadas: 1 conteúdo do hero, 10 topo, 50 tela */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 12px); background: var(--preto); }
body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font: 400 17px/1.6 "Plus Jakarta Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 800; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 3px; border-radius: var(--raio); }
::selection { background: var(--vermelho); color: #fff; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  border-radius: var(--raio); border: 1px solid transparent;
  font: 600 15px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  white-space: nowrap; cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s, border-color 0.25s, color 0.25s;
}
.botao:active { transform: scale(0.98); }
.botao-cheio { background: var(--texto); color: var(--preto); }
.botao-cheio:hover { background: var(--vermelho); color: #fff; }
.botao-linha { background: rgba(8, 4, 5, 0.35); color: var(--texto); border-color: rgba(246, 240, 238, 0.38); }
.botao-linha:hover { border-color: var(--texto); background: rgba(8, 4, 5, 0.6); }
.botao-p { height: 40px; padding: 0 18px; font-size: 14px; }

/* Topo */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--topo);
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--margem);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s;
}
.topo.solido { background: rgba(8, 4, 5, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--linha); }
.marca { font: 800 24px/1 var(--titulo); text-transform: uppercase; letter-spacing: 0.01em; }
.topo-links { display: flex; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 500; }
.topo-links a { white-space: nowrap; opacity: 0.78; transition: opacity 0.2s; }
.topo-links a:hover { opacity: 1; }

/* Hero: o retrato é o cartaz.
   Base (telas estreitas): nome na frente, embaixo. Telas largas: nome atrás da pessoa (ver @media 1024). */
.hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--preto); }
.cartaz { display: contents; }
.hero-foto { position: absolute; inset: -7% 0 0 0; }
.hero-foto img, .hero-recorte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero-recorte, .hero-sombra, .luz { display: none; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--preto) 0%, rgba(8, 4, 5, 0.86) 16%, rgba(8, 4, 5, 0) 52%),
    linear-gradient(to bottom, rgba(8, 4, 5, 0.55) 0%, rgba(8, 4, 5, 0) 18%);
}
.hero h1 { position: relative; z-index: 1; padding: 0 var(--margem); font-size: clamp(4.5rem, 15.6vw, 18rem); line-height: 0.8; letter-spacing: -0.012em; white-space: nowrap; }
.hero-conteudo { position: relative; z-index: 1; width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 var(--margem) clamp(28px, 4.5vh, 48px); }
.hero-base { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: clamp(18px, 3vh, 30px); }
.hero-base p { max-width: 44ch; font-size: 1.1rem; line-height: 1.5; color: var(--texto); opacity: 0.86; }
.hero-acoes { display: flex; gap: 12px; flex-shrink: 0; }

/* Telas largas: o cartaz é uma caixa 16:9 presa à foto. O nome fica ENTRE a foto e o recorte da pessoa,
   então o S de Matheus e o C de Cunha passam por trás da cabeça. Tudo em cqw para não desencaixar. */
@media (min-width: 1024px) {
  .hero { display: block; min-height: 0; height: min(100dvh, 63.56vw); }
  .cartaz {
    display: block; position: absolute; left: 0; width: 113vw; aspect-ratio: 16 / 9;
    top: min(0px, calc((100dvh - 63.56vw) * 0.4));
    container-type: inline-size;
  }
  .hero-foto, .hero-recorte, .hero-sombra { display: block; position: absolute; inset: 0; }
  .hero-sombra img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

  /* Cena em três camadas reais. O mouse é a luz do estúdio: --mx e --my vão de -1 a 1.
     Parede (sem a pessoa) quase parada, nome no meio, pessoa na frente e um pouco maior. */
  .hero-foto { inset: -16px; }
  .hero-foto img { translate: calc(var(--mx, 0) * -7px) calc(var(--my, 0) * -4px); }
  .luz {   /* a luz batendo na parede */
    display: block; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(circle at calc(49.6% + var(--mx, 0) * 34%) calc(38% + var(--my, 0) * 24%),
      rgba(255, 64, 86, 0.42) 0%, rgba(255, 52, 74, 0.16) 20%, rgba(255, 52, 74, 0) 46%);
  }
  .hero h1 {
    position: absolute; z-index: auto; left: 0; top: 41.5%; width: 100%; height: 1em; padding: 0;
    font-size: 11.66cqw; line-height: 1; letter-spacing: -0.005em; transform: translateY(-50%);
    translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -8px);
  }
  .hero h1 span {
    position: absolute; top: 0;
    /* a mesma luz clareia as letras mais próximas e deixa as distantes um pouco mais apagadas */
    background: radial-gradient(circle at var(--lx, 50%) var(--ly, 40%), #fffaf8 0%, #f6f0ee 9em, #b9aaa8 22em);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(calc(var(--mx, 0) * -0.035em) calc(0.02em + var(--my, 0) * -0.02em) 0.05em rgba(20, 0, 4, 0.55));
  }
  .hero h1 .n1 { right: 56.98%; }
  .hero h1 .n2 { left: 56.49%; }
  /* a sombra da pessoa cai sobre o nome, do lado oposto ao da luz */
  .hero-sombra { opacity: 0.55; mix-blend-mode: multiply; translate: calc(var(--mx, 0) * -50px) calc(4px + var(--my, 0) * -24px); scale: 1.02; transform-origin: 49.6% 30%; }
  .hero-recorte { scale: 1.045; transform-origin: 49.6% 0; translate: calc(var(--mx, 0) * 15px) calc(var(--my, 0) * 5px); }
  .hero::after {
    background:
      linear-gradient(to top, var(--preto) 0%, rgba(8, 4, 5, 0.8) 14%, rgba(8, 4, 5, 0) 40%),
      linear-gradient(to bottom, rgba(8, 4, 5, 0.5) 0%, rgba(8, 4, 5, 0) 16%);
  }
  .hero-conteudo { position: absolute; left: 0; right: 0; bottom: 0; }
  .hero-base { margin-top: 0; }
}

/* Showreel (aparece quando houver) */
.reel-secao { max-width: var(--largura); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--margem) 0; }
.reel { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--preto-2); border-radius: var(--raio); overflow: hidden; cursor: pointer; color: inherit; }
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.reel:hover img { transform: scale(1.02); }
.reel .tocar { opacity: 1; transform: none; left: 50%; top: 50%; bottom: auto; margin: -42px 0 0 -42px; width: 84px; height: 84px; }
.reel .tocar::before { border-width: 14px 0 14px 23px; margin-left: 6px; }

/* Faixa de trabalhos em movimento (única da página) */
.faixa { overflow: hidden; padding: clamp(28px, 4vw, 56px) 0 0; }
.faixa-trilho { display: flex; gap: 14px; width: max-content; }
.faixa-item { flex: none; height: clamp(190px, 24vw, 330px); padding: 0; border: 0; border-radius: var(--raio); overflow: hidden; background: var(--preto-2); cursor: pointer; }
.faixa-item video, .faixa-item img { height: 100%; width: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .faixa-trilho { animation: correr 70s linear infinite; }
  .faixa:hover .faixa-trilho { animation-play-state: paused; }
  @keyframes correr { to { transform: translateX(calc(-50% - 7px)); } }
}

/* Seções */
.secao { max-width: var(--largura); margin: 0 auto; padding: clamp(64px, 9vw, 136px) var(--margem) 0; }
.cabeca { max-width: 60ch; margin-bottom: clamp(24px, 3.2vw, 44px); }
.secao h2 { font-size: clamp(2.9rem, 6.4vw, 6rem); }
.cabeca p { margin-top: 14px; color: var(--suave); }

/* Cartão de vídeo */
.cartao { display: block; min-width: 0; text-align: left; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cartao .midia { display: block; position: relative; overflow: hidden; width: 100%; border-radius: var(--raio); background: var(--preto-2); }
.cartao .midia img, .cartao .midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cartao .midia img { transition: transform 0.8s var(--ease), filter 0.4s; }
.cartao:hover .midia img { transform: scale(1.035); }
.cartao .midia video { opacity: 0; transition: opacity 0.3s; }
.cartao .midia video.tocando { opacity: 1; }
.cartao .legenda { display: block; padding: 12px 0 0; }
.cartao .titulo { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.cartao .meta { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--suave); }

.tocar {
  position: absolute; left: 12px; bottom: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(8, 4, 5, 0.7);
  display: grid; place-items: center;
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.25s, transform 0.25s var(--ease), background-color 0.25s;
}
.tocar::before { content: ""; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.cartao:hover .tocar, .cartao:focus-visible .tocar { opacity: 1; transform: scale(1); background: var(--vermelho); }
.reel:hover .tocar { background: var(--vermelho); }
@media (hover: none) { .tocar { opacity: 1; transform: none; } }

/* Explainers: trilho horizontal */
.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 20vw, 300px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0 calc(var(--margem) * -1); padding: 0 var(--margem) 18px; scroll-padding-left: var(--margem);
  scrollbar-width: thin; scrollbar-color: rgba(246, 240, 238, 0.25) transparent;
}
.trilho .cartao { scroll-snap-align: start; }

/* Motion: fileiras justificadas (cada item cresce na proporção do vídeo) */
.mosaico { display: grid; gap: 30px; }
.mosaico .linha { display: flex; gap: 16px; align-items: flex-start; }
.mosaico .cartao { flex: var(--r) 1 0; }

/* Edição: destaque + lateral */
.destaque { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.destaque .lado { display: grid; gap: 32px; }
.destaque .lado .cartao { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.destaque .lado .legenda { padding: 0; }
.destaque .lado .titulo { font: 800 clamp(1.6rem, 2.4vw, 2.3rem)/0.95 var(--titulo); text-transform: uppercase; }
.destaque .lado .meta { margin-top: 8px; }
.destaque .lado .descricao { display: block; margin-top: 12px; font-size: 15px; color: var(--suave); }

/* Talking head */
.dupla { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.fileira { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }

/* Cor: fotos de antes e depois ao lado dos vídeos */
figure.cartao { margin: 0; cursor: default; }
figure.cartao:hover .midia img { transform: none; }

/* Sobre */
.sobre { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.sobre-foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 46% 50%; border-radius: var(--raio); }
.sobre-texto { margin-top: 26px; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.45; }
.sobre-lista { margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; padding-top: 30px; border-top: 1px solid var(--linha); }
.sobre-lista dt { font-size: 13.5px; color: var(--suave); }
.sobre-lista dd { margin: 4px 0 0; font-size: 15.5px; }

/* Fecho: a luz vermelha do estúdio */
.fecho { margin-top: clamp(80px, 10vw, 150px); background: radial-gradient(120% 150% at 22% 40%, var(--vinho-luz) 0%, var(--vinho) 34%, #1c0206 68%, var(--preto) 100%); }
.fecho-dentro { max-width: var(--largura); margin: 0 auto; padding: clamp(64px, 9vw, 136px) var(--margem); }
.fecho h2 { font-size: clamp(3.4rem, 10vw, 10.5rem); line-height: 0.84; max-width: 12ch; }
.fecho p { margin-top: 22px; font-size: 1.15rem; opacity: 0.86; }
.fecho-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 38px; }
.fecho-links { display: inline-flex; gap: 26px; font-weight: 500; }
.fecho-links a, .rodape a { border-bottom: 1px solid rgba(246, 240, 238, 0.4); padding-bottom: 2px; transition: border-color 0.2s; }
.fecho-links a:hover, .rodape a:hover { border-color: var(--texto); }

.rodape { max-width: var(--largura); margin: 0 auto; padding: 26px var(--margem) 40px; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--suave); }

/* Tela (player) */
.tela { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 2, 3, 0.96); color: var(--texto); }
.tela::backdrop { background: rgba(5, 2, 3, 0.6); }
.tela-caixa { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.tela-midia { min-height: 0; display: grid; place-items: center; padding: 20px var(--margem) 0; }
.tela-midia video, .tela-midia iframe { max-width: 100%; max-height: 100%; border: 0; border-radius: var(--raio); background: #000; }
.tela-midia video { width: auto; height: 100%; }
.tela-midia iframe { width: min(100%, calc((100dvh - 190px) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; }
.tela-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 18px var(--margem) 22px; }
.tela-info h3 { font-size: 30px; line-height: 0.95; }
.tela-meta { margin-top: 6px; font-size: 14px; color: var(--suave); }
.tela-desc { margin-top: 8px; max-width: 64ch; font-size: 15px; color: var(--suave); }
.tela-botoes { display: flex; gap: 8px; flex-shrink: 0; }

/* Movimento */
@media (prefers-reduced-motion: no-preference) {
  .revela { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  .revela.visivel { opacity: 1; transform: none; }
  .hero-foto img, .hero-recorte img { animation: aproxima 2.4s var(--ease) both; }
  .hero h1 { animation: sobe 1.1s var(--ease) 0.15s both; }
  @media (min-width: 1024px) {   /* a luz acende, a pessoa sai do escuro e as duas palavras saem de trás da cabeça */
    .hero-foto img { animation: acende 1.8s var(--ease) both; }
    .hero-recorte img { animation: revela 2.2s var(--ease) 0.15s both; }
    .hero-sombra { animation: some-entra 1.6s ease 1.2s both; }
    .luz { animation: some-entra 1.8s ease 0.5s both; }
    .hero h1 { animation: none; }
    .hero h1 .n1 { animation: sai-esq 1.6s var(--ease) 0.25s both; }
    .hero h1 .n2 { animation: sai-dir 1.6s var(--ease) 0.25s both; }
  }
  @keyframes acende { from { opacity: 0; scale: 1.05; } }
  @keyframes revela { from { opacity: 0; filter: brightness(0.25); } 40% { opacity: 1; } }
  @keyframes some-entra { from { opacity: 0; } }
  /* ao rolar: as palavras se afastam e a câmera avança (só onde o navegador suporta animação por rolagem) */
  @supports (animation-timeline: scroll()) {
    @media (min-width: 1024px) {
      .hero h1 .n1 { animation: sai-esq 1.6s var(--ease) 0.25s both, abre-esq linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 85vh; }
      .hero h1 .n2 { animation: sai-dir 1.6s var(--ease) 0.25s both, abre-dir linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 85vh; }
      .cartaz { animation: avanca linear both; animation-timeline: scroll(root); animation-range: 0 85vh; transform-origin: 44% 40%; }
      .hero-conteudo { animation: some-rola linear both; animation-timeline: scroll(root); animation-range: 0 40vh; }
    }
  }
  @keyframes abre-esq { to { translate: -22% 0; } }
  @keyframes abre-dir { to { translate: 22% 0; } }
  @keyframes avanca { to { scale: 1.12; } }
  @keyframes some-rola { to { opacity: 0; translate: 0 30px; } }
  @keyframes sai-esq { from { transform: translateX(16%); opacity: 0; } }
  @keyframes sai-dir { from { transform: translateX(-16%); opacity: 0; } }
  .hero-base { animation: sobe 1.1s var(--ease) 0.3s both; }
  @keyframes aproxima { from { transform: scale(1.06); opacity: 0.4; } }
  @keyframes sobe { from { opacity: 0; transform: translateY(34px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cartao .midia img { transition: none; }
  .faixa { overflow-x: auto; }
}

/* Telas médias */
@media (max-width: 1023px) {
  .topo-links { display: none; }
  .topo .botao { margin-left: auto; }
  .destaque { grid-template-columns: 1fr; }
  .destaque > .cartao { max-width: 420px; }
  .sobre { grid-template-columns: 1fr; }
  .sobre-foto { max-width: 520px; aspect-ratio: 5 / 4; }
}

/* Celular */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero-foto { inset: 0 0 auto 0; height: 56%; }
  .hero-foto img { object-position: 50% 0; }
  .hero::after { background: linear-gradient(to top, var(--preto) 0%, var(--preto) 44%, rgba(8, 4, 5, 0) 66%), linear-gradient(to bottom, rgba(8, 4, 5, 0.5) 0%, rgba(8, 4, 5, 0) 16%); }
  .hero h1 { font-size: 25.5vw; white-space: normal; line-height: 0.82; }
  .hero h1 span { display: block; }
  .hero-base { flex-direction: column; align-items: stretch; gap: 22px; }
  .hero-acoes { flex-wrap: wrap; }
  .hero-acoes .botao { flex: 1; }
  .trilho { grid-auto-columns: 58vw; gap: 12px; }
  .mosaico { gap: 22px; }
  .mosaico .linha { flex-wrap: wrap; gap: 22px 12px; }
  .mosaico .cartao { flex: 0 0 calc(50% - 6px); }
  .mosaico .cartao.largo { flex-basis: 100%; }
  .destaque .lado .cartao { grid-template-columns: 1fr; gap: 0; }
  .destaque .lado .legenda { padding: 12px 0 0; }
  .destaque .lado .titulo { font: 600 15px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; text-transform: none; }
  .destaque .lado .meta { margin-top: 2px; }
  .destaque .lado .descricao { display: none; }
  .dupla { grid-template-columns: 1fr; gap: 22px; }
  .fileira {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46vw; gap: 12px;
    overflow-x: auto; scroll-snap-type: x proximity;
    margin: 28px calc(var(--margem) * -1) 0; padding: 0 var(--margem) 14px; scroll-padding-left: var(--margem);
  }
  .fileira .cartao { scroll-snap-align: start; }
  .sobre-lista { grid-template-columns: 1fr; }
  .tela-info { flex-direction: column; align-items: stretch; gap: 14px; }
  .tela-desc { display: none; }
  .tela-botoes .botao { flex: 1; }
  .tela-midia iframe { width: 100%; }
  .rodape { flex-direction: column; }
}