/* Walk Productions · site v4 · versão 10 */

@font-face { font-family: "Archivo Black"; src: url("../fonts/archivo-black-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo Black"; src: url("../fonts/archivo-black-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --fundo: #08080a;
  --fundo-2: #101014;
  --linha: #1e1e22;
  --tinta: #fafafa;
  --tinta-2: #a1a1a6;
  --apagado: #6b6b70;      /* 3,78:1 sobre o fundo: linha inativa da lista, só em display */
  --bone: #f2efe6;
  --sinal: #EE3A0C;

  --grosso: "Archivo Black", "Arial Black", sans-serif;
  --sans: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --serifa: "Instrument Serif", Georgia, serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* escala medida a 1920 px, em vw; clamp para celular e telas grandes */
  --t-h1: clamp(2.5rem, 7.48vw, 11rem);       /* 143,6 px */
  --t-h3: clamp(1.6rem, 4.4vw, 6.5rem);       /* 84,5 px */
  --t-mx: clamp(1.35rem, 3.3vw, 5rem);        /* parágrafo pixelado de 114 px, pela medida de linha */
  --t-tit: clamp(1.75rem, 4.3vw, 6.25rem);    /* título pixelado de 114 px, pela altura da maiúscula */
  --t-large: clamp(1rem, 1.25vw, 1.9rem);     /* 33,8 px pixelado */
  --t-main: clamp(.75rem, .86vw, 1.3rem);     /* 25,3 px pixelado */
  --t-small: clamp(.625rem, .6vw, .95rem);

  --g: clamp(12px, .885vw, 22px);             /* 17 px */
  --r-tv: 7.04vw;                             /* 135 px */
  --r-tv-g: 11vw;                             /* 211 px */

  --curva: cubic-bezier(.9, 0, .1, 1);
  --entra: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--sans); font-weight: 500; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid var(--sinal); outline-offset: 3px; }
::selection { background: var(--sinal); color: var(--fundo); }
[hidden] { display: none !important; }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: var(--g); top: -60px; z-index: 100; background: var(--sinal); color: var(--fundo); font-family: var(--mono); font-size: 14px; text-transform: uppercase; padding: 10px 14px; transition: top .2s; }
.pular:focus { top: var(--g); }

/* a página inteira troca de tema; GSAP anima estas três propriedades com scrub */
.pagina { background-color: var(--fundo); color: var(--tinta); --tema: var(--tinta); min-height: 100vh; }
/* sem JS cada seção pinta o próprio tema; com JS (html.temas-js) quem pinta é a página, com scrub */
html:not(.temas-js) [data-tema="bone"] { background-color: var(--bone); color: var(--fundo); }
html:not(.temas-js) [data-tema="marca"] { --tema: var(--sinal); }

/* ---------- vozes ---------- */
.t-h1 { font-family: var(--grosso); font-weight: 400; font-size: var(--t-h1); line-height: .75; letter-spacing: -.02em; text-transform: uppercase; }
.t-h3 { font-family: var(--sans); font-weight: 500; font-size: var(--t-h3); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.t-mx { font-family: var(--mono); font-weight: 400; font-size: var(--t-mx); line-height: .96; letter-spacing: -.045em; text-transform: uppercase; }
.t-large { font-family: var(--mono); font-weight: 400; font-size: var(--t-large); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; }
.t-main { font-family: var(--mono); font-weight: 400; font-size: var(--t-main); line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; }
.t-small { font-family: var(--mono); font-weight: 400; font-size: var(--t-small); line-height: 1.2; text-transform: uppercase; }
.t-tv { font-family: var(--mono); font-weight: 500; font-size: clamp(1.1rem, 2.4vw, 3.4rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }

/* o trecho de sistema dentro de um título: DM Mono */
.voz-mono { font-family: var(--mono); font-weight: 400; letter-spacing: -.06em; word-spacing: -.3em; }
/* palavra-emoção: uma por tela */
.emocao { font-family: var(--serifa); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; color: var(--sinal); }

.estrelas { display: flex; justify-content: center; gap: .3em; color: currentColor; }
.estrelas svg { width: clamp(14px, 1.16vw, 26px); height: auto; aspect-ratio: 1; fill: currentColor; }

.botao { display: inline-block; transition: opacity .2s; }
.botao:hover, .nav a:hover, .s10-botoes a:hover, .rodape-links a:hover { opacity: .4; }

/* ---------- TV (o vídeo com cantos de televisão) ---------- */
.tv { position: relative; overflow: hidden; background: var(--fundo-2); border-radius: var(--r-tv); isolation: isolate; }
.tv-g { border-radius: var(--r-tv-g); }
.tv > img, .tv > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.tv-hud { position: absolute; z-index: 3; color: var(--bone); pointer-events: none; }
.tv-hud-a { left: 7%; top: 11%; }
.tv-hud-b { right: 7%; bottom: 11%; }
.rec { color: var(--sinal); }
.tv-bloco { display: grid; place-items: center; background: var(--fundo-2); color: var(--tinta-2); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--g); color: inherit; }
.nav-marca { justify-self: start; }
.nav-links { display: flex; gap: 1.7vw; }
.nav-cta { justify-self: end; }
.nav-abrir { display: none; justify-self: end; }
html.motion .nav { opacity: 0; }

.menu-cheio { position: fixed; inset: 0; z-index: 45; background: var(--fundo); color: var(--tinta); display: flex; flex-direction: column; justify-content: center; gap: 6vh; padding: 20vw var(--g) 30vw; }
.menu-cheio nav { display: flex; flex-direction: column; gap: 1.2vh; }
.menu-cheio nav a { font-family: var(--grosso); font-size: clamp(2.6rem, 13vw, 5rem); line-height: .85; text-transform: uppercase; letter-spacing: -.02em; }
.menu-cheio p { color: var(--tinta-2); }
.cta-fixo { display: none; }

/* ---------- 02 · hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; }
.hero-mosaico { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; flex-direction: column; gap: var(--g); transform: translate(-50%, -50%); pointer-events: none; }
.hero-linha { display: flex; gap: var(--g); }
.tv-p { width: 29.92vw; height: 19.45vw; flex: none; }
.tv-vaga { background: transparent; }
.hero-central { position: absolute; inset: var(--g); z-index: 3; overflow: hidden; border-radius: var(--r-tv-g); background: var(--fundo-2); pointer-events: none; }
.hero-central video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-texto { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vw; text-align: center; padding: 0 var(--g); }
.hero-texto h1 { max-width: 13.5em; }
/* sem coreografia: o hero fica no estado final, só o título */
html:not(.motion):not(.intro) .hero-mosaico, html:not(.motion):not(.intro) .hero-central { display: none; }
html.intro-feita .hero-mosaico, html.intro-feita .hero-central { display: none; }

/* ---------- seções centradas (03, 05, 09) ---------- */
.sec-centro { position: relative; display: flex; justify-content: center; text-align: center; padding: 0 var(--g); }
.centro { display: flex; flex-direction: column; align-items: center; }
.sec-03 { min-height: 42.76vw; padding-top: 11.5vw; padding-bottom: 9vw; }
.sec-03 h2 { max-width: 14.5em; }
.sec-03 .estrelas { margin: 4.4vw 0 4.4vw; }
.sec-03 .t-large { max-width: 22em; }

/* ---------- 04 · o campo ASCII e o e-mail ---------- */
.sec-04 { position: relative; padding: 3.54vw var(--g) 2.2vw; }
.s04-topo { display: grid; grid-template-columns: 41.3vw 1fr; align-items: center; }
.s04-texto { display: flex; flex-direction: column; align-items: center; gap: 4.2vw; text-align: center; padding: 0 3vw; }
.s04-texto .t-large { max-width: 19em; text-wrap: balance; }
.s04-tv { height: 39.84vw; }
.s04-tv canvas, .s04-tv .ascii-reserva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s04-tv .ascii-reserva { filter: grayscale(1) contrast(1.1) brightness(.7); }
.s04-tv.tem-ascii .ascii-reserva { visibility: hidden; }
.ascii-fonte { display: none; }

.emails { margin-top: 1.15vw; }
/* sinal até 10% da tela: com as três linhas em sinal o rodapé chegava a 13%; só a do meio troca com o tema */
.emails .email:nth-child(2) { color: var(--tema); }
.email { display: block; width: 100%; font-family: var(--grosso); font-weight: 400; text-transform: uppercase; white-space: nowrap; text-align: center; line-height: .84; letter-spacing: -.01em; font-size: 7.1vw; }


/* ---------- 05 · manifesto ---------- */
.sec-05 { padding-top: 11.25vw; padding-bottom: 11vw; }
.sec-05 h2 { margin-top: 3.9vw; max-width: 16em; }
.s05-par { max-width: 31em; margin-top: 3.2vw; }
.tv-reel { width: 48.44vw; height: 30.21vw; margin: 3.65vw 0 4.2vw; }
.tv-reel .tv-hud-a { top: 11.5%; }
.reel-botao { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; background: var(--fundo); opacity: 0; transition: opacity .2s; }
.reel-botao:hover { opacity: .3; }

/* ---------- 06 · o jogo ---------- */
.sec-jogo { padding: 3.54vw var(--g) 3.6vw; }
.jogo { position: relative; height: 53.4vw; border-radius: var(--r-tv-g); overflow: hidden; background: var(--bone); color: var(--fundo); user-select: none; -webkit-user-select: none; }
.xadrez { --q: clamp(5px, .5vw, 10px); position: absolute; left: 0; right: 0; height: calc(var(--q) * 2); background: conic-gradient(var(--fundo) 90deg, transparent 0 180deg, var(--fundo) 0 270deg, transparent 0) 0 0 / calc(var(--q) * 2) calc(var(--q) * 2); }
.xadrez-topo { top: 3.4%; }
.faixas { position: absolute; inset: 0; }
.faixa { position: absolute; left: 0; right: 0; height: .37vw; overflow: hidden; }
.faixa:nth-child(1) { top: 10.7%; } .faixa:nth-child(2) { top: 36.8%; } .faixa:nth-child(3) { top: 63.1%; } .faixa:nth-child(4) { top: 89.4%; }
.faixa span { display: block; height: 100%; width: calc(200% + 7.87vw); background: repeating-linear-gradient(90deg, var(--fundo) 0 4.84vw, transparent 4.84vw 7.87vw); animation: faixa 15s linear infinite; }
@keyframes faixa { to { transform: translateX(-50%); } }
.jogo[data-estado="jogando"] .faixa span { animation-duration: 5s; }
.jogo-tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.jogo:focus { outline: none; }
.jogo-hud { position: absolute; left: 0; right: 0; top: 5.6%; display: flex; justify-content: space-between; padding: 0 12vw; opacity: 0; transition: opacity .3s; }
.jogo[data-estado="jogando"] .jogo-hud { opacity: 1; }
.jogo-toque { display: none; }

.cartao { position: absolute; left: 50%; top: 50%; z-index: 4; width: 43.3vw; transform: translate(-50%, -50%); background: var(--bone); border: .42vw solid var(--fundo); padding: 2.6vw 3vw 4.6vw; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.15vw; }
.jogo[data-estado="jogando"] .cartao { display: none; }
.cartao-titulo { font-family: var(--mono); font-weight: 400; font-size: clamp(1.5rem, 3.1vw, 4.6rem); line-height: .9; letter-spacing: -.07em; word-spacing: -.3em; text-transform: uppercase; }
.cartao-titulo .quebra { display: block; }
.cartao-texto { font-family: var(--sans); font-weight: 400; font-size: clamp(.875rem, .9vw, 1.3rem); line-height: 1.32; max-width: 33em; }
.cartao-fatos { display: flex; flex-wrap: wrap; justify-content: center; gap: .2em 1.6em; }
.cartao-w { width: 3.2vw; height: auto; aspect-ratio: 1; fill: var(--fundo); margin-top: .4vw; }
.cartao-botao { font-family: var(--sans); font-weight: 500; font-size: clamp(.95rem, 1.15vw, 1.6rem); border: .21vw solid var(--fundo); padding: .45em 1.3em; background: var(--bone); transition: background .2s, color .2s; }
.cartao-botao:hover { background: var(--fundo); color: var(--bone); }
.xadrez-cartao { --q: clamp(7px, .95vw, 18px); bottom: 0; }
.cartao-fim .t-large { margin-top: .5vw; }

/* ---------- 07 · o que a Walk faz ---------- */
.sec-07 { position: relative; min-height: 56.25vw; padding: 8.3vw var(--g) 8vw; display: flex; flex-direction: column; }
.sec-07 .t-h1 { max-width: 10em; }
.verbo-painel { position: absolute; right: var(--g); top: 8.6vw; width: 30vw; min-height: 12vw; opacity: 0; transition: opacity .5s; pointer-events: none; }
.verbo-painel.is-active { opacity: 1; pointer-events: auto; }
.painel { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; gap: .9vw; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.painel.is-active { opacity: 1; visibility: visible; transition: opacity .2s; }
.painel-linha { font-family: var(--sans); font-weight: 500; font-size: clamp(1rem, 1.35vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
.s07-baixo { margin-top: auto; padding-top: 12vw; }
.s07-par { max-width: 26.5em; }
.verbo { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em; transition: opacity .2s; }
.verbo.is-active { text-decoration-color: var(--sinal); }
.verbo:hover { opacity: .55; }
.s07-par .emocao { letter-spacing: -.02em; }
.s07-baixo .botao { margin-top: 1.7vw; }
.s07-w { position: absolute; right: 1.9vw; bottom: 6.6vw; width: 7.04vw; height: auto; aspect-ratio: 1; fill: var(--fundo); }

/* ---------- 08 · trabalho ---------- */
.sec-08 { position: relative; padding: 17.5vw var(--g) 4.5vw; }
.rotulo { margin-bottom: 2.2vw; }
.projetos-tvs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.projetos-pino { position: sticky; top: calc(50vh - 9.72vw); width: 29.92vw; height: 19.45vw; margin: 0 var(--g) 0 auto; }
.projeto-tv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s; }
.projeto-tv.is-active { opacity: 1; }
.projetos { position: relative; z-index: 2; }
.projeto { padding: 1.76vw 0; }
.projeto-link { display: flex; gap: 1.76vw; align-items: flex-start; color: var(--apagado); transition: color .2s; max-width: 66vw; }
.seta { font-family: var(--mono); font-size: var(--t-tit); line-height: .8; flex: none; }
.projeto-titulo { font-family: var(--mono); font-weight: 400; font-size: var(--t-tit); line-height: .82; letter-spacing: -.06em; word-spacing: -.3em; text-transform: uppercase; }
.projeto-info { display: flex; flex-wrap: wrap; gap: .4em 3.4vw; margin-top: 1.1vw; color: var(--tinta-2); max-width: 66vw; transition: color .2s; }
.projeto-info li:nth-child(2) { max-width: 36em; }
.projeto-info .ver { opacity: 0; transition: opacity .2s; }
.projeto.is-active .projeto-link, .projeto.is-active .projeto-info { color: var(--tinta); }
.projeto.is-active .ver { opacity: 1; }
.tv-celular { display: none; }

/* ---------- 09 ---------- */
.sec-09 { padding-top: 11.25vw; padding-bottom: 11.4vw; }
.sec-09 h2 { margin-top: 3.9vw; max-width: 9em; }
.sec-09 .botao { margin: 2.9vw 0 3.6vw; }

/* ---------- 10 · rodapé ---------- */
.sec-10 { position: relative; padding: 3.54vw var(--g) var(--g); }
.s10-topo { display: grid; grid-template-columns: 56.9vw 1fr; align-items: center; }
.s10-tv { height: 39.84vw; display: flex; align-items: center; justify-content: center; gap: 2.6vw; padding: 0 4.5vw; }
.s10-w { width: 12.5vw; flex: none; }
.s10-palavra { font-family: var(--grosso); font-size: 4.3vw; line-height: .82; letter-spacing: -.02em; text-transform: uppercase; color: var(--bone); max-width: 5.6em; }
.s10-texto { display: flex; flex-direction: column; align-items: center; gap: 3.6vw; text-align: center; padding: 0 3vw; }
.s10-texto .t-large { max-width: 18em; }
.s10-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 1.6em; margin-top: -1.6vw; }
.sec-10 .emails { margin-top: 1.15vw; }
.rodape-base { display: flex; justify-content: space-between; gap: 1em; margin-top: 1.4vw; color: inherit; }
.rodape-links { display: flex; gap: 2.2em; }


/* ---------- celular ---------- */
@media (max-width: 899px), (orientation: portrait) and (max-width: 1100px) {
  :root { --r-tv: 13vw; --r-tv-g: 13vw; }
  .nav { grid-template-columns: 1fr auto; padding: 14px 16px; }
  .nav-links, .nav-cta { display: none; }
  .nav-abrir { display: block; }
  .cta-fixo { display: block; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 48; background: var(--sinal); color: var(--fundo); text-align: center; padding: 15px; font-weight: 500; }
  body { padding-bottom: 72px; }

  .tv-p { width: 62vw; height: 40.3vw; }
  .hero-central { inset: 12px; }
  .hero-texto { gap: 28px; }
  .hero-texto h1 { font-size: clamp(2rem, 9.4vw, 3.2rem); }

  .sec-03 { min-height: 100svh; padding: 26vw 16px 22vw; align-items: center; }
  .sec-03 h2, .sec-05 h2, .sec-09 h2 { font-size: clamp(1.75rem, 8.4vw, 3rem); }
  .sec-03 .estrelas { margin: 9vw 0; }

  .sec-04 { padding: 12vw 16px 8vw; }
  .s04-topo { grid-template-columns: 1fr; gap: 12vw; }
  .s04-texto { gap: 7vw; padding: 0; }
  .s04-tv { height: 70vw; }
  .email { font-size: 8.4vw; }

  .sec-05 { padding: 24vw 16px; }
  .sec-05 h2 { margin-top: 8vw; }
  .s05-par { margin-top: 6vw; }
  .tv-reel { width: 100%; height: 62vw; margin: 9vw 0; }

  .sec-jogo { padding: 8vw 12px; }
  .jogo { height: auto; min-height: 150vw; border-radius: 9vw; }
  .faixa { height: 1.2vw; }
  .faixa span { background: repeating-linear-gradient(90deg, var(--fundo) 0 9vw, transparent 9vw 15vw); }
  .cartao { width: calc(100% - 24px); top: 50%; padding: 7vw 5vw 12vw; gap: 4vw; border-width: 3px; }
  .cartao-w { width: 10vw; }
  .cartao-botao { border-width: 2px; }
  .xadrez-cartao { --q: 2.5vw; }
  .jogo-hud { padding: 0 8vw; top: 5.4%; }
  .jogo[data-estado="jogando"] .jogo-toque { display: flex; position: absolute; right: 4vw; bottom: 5%; z-index: 5; flex-direction: column; gap: 3vw; }
  .jogo-toque button { width: 14vw; height: 14vw; border: 2px solid var(--fundo); background: var(--bone); font-size: 5vw; }

  .sec-07 { min-height: 0; padding: 24vw 16px 30vw; }
  .sec-07 .t-h1 { font-size: 13.4vw; }
  .verbo-painel { position: relative; right: auto; top: auto; width: auto; min-height: 44vw; margin-top: 10vw; }
  .painel { gap: 3vw; }
  .s07-baixo { padding-top: 6vw; }
  .s07-par { font-size: 6.6vw; }
  .s07-baixo .botao { margin-top: 6vw; }
  .s07-w { width: 16vw; right: 16px; bottom: 8vw; }

  .sec-08 { padding: 26vw 16px 14vw; }
  .rotulo { margin-bottom: 6vw; }
  .projetos-tvs { display: none; }
  .projeto { padding: 5vw 0 7vw; }
  .projeto-link, .projeto-info { max-width: none; }
  .projeto-titulo, .seta { font-size: 8.6vw; }
  .tv-celular { display: grid; width: 100%; height: 58vw; margin-top: 4vw; }
  .tv-celular > img { position: absolute; }
  .projeto-info { margin-top: 4vw; gap: .5em 1.4em; }
  .projeto-link, .projeto-info { color: var(--tinta-2); }

  .sec-09 { padding: 24vw 16px; }
  .sec-09 h2 { margin-top: 8vw; }
  .sec-09 .botao { margin: 8vw 0; }

  .sec-10 { padding: 12vw 16px 16px; }
  .s10-topo { grid-template-columns: 1fr; gap: 12vw; }
  .s10-tv { height: 70vw; gap: 5vw; padding: 0 7vw; }
  .s10-w { width: 20vw; }
  .s10-palavra { font-size: 7vw; }
  .s10-texto { gap: 7vw; padding: 0; }
  .s10-botoes { margin-top: -3vw; }
  .rodape-base { flex-direction: column; margin-top: 6vw; }
  .rodape-links { flex-direction: column; gap: .6em; }
}

/* sinal sobre bone só passa em display de 48 px ou mais: abaixo disso a palavra-emoção fica em tinta, sublinhada em sinal */
@media (max-width: 1460px) { .sec-07 .emocao { color: var(--fundo); text-decoration: underline; text-decoration-color: var(--sinal); text-decoration-thickness: .08em; text-underline-offset: .1em; } }
@media (max-width: 1550px) {
  .cartao-titulo .emocao { color: var(--fundo); text-decoration: underline; text-decoration-color: var(--sinal); text-decoration-thickness: .08em; text-underline-offset: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-mosaico, .hero-central { display: none; }
}