/* Resenha — landing. Mundo: o orelhão (DESIGN.md). O r é a cabine; o laranja do corpo vira o capítulo de privacidade. */
/* Fontes servidas daqui (OFL, licenças em fontes/): nada de Google Fonts, coerente com "sem rastreio". */
@font-face { font-family: Gabarito; src: url(fontes/Gabarito.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Onest; src: url(fontes/Onest.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg0: #100f0e; --bg1: #171614; --bg2: #1d1c1a; --bg3: #262422; --bg4: #302e2b; --line: #2c2a27;
  --tx: #ecebe7; --tx2: #a9a69f; --tx3: #6f6d68;
  --ac: #f07e1b; --ac-ink: #1a0d02; --ac-text: #f58b30; --link: #6ea6ee;
  --ink2: rgba(26, 13, 2, .84); --ink-line: rgba(26, 13, 2, .22);
  --f-ui: Onest, system-ui, sans-serif; --f-brand: Gabarito, Onest, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --p: 0; --q: 0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg0); color: var(--tx); font: 17px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-brand); font-weight: 800; letter-spacing: -.025em; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 3px; }
::selection { background: rgba(240, 126, 27, .35); }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: transparent; }
html { background: var(--bg0); transition: background .2s; } html.laranja { background: var(--ac); }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 8px; border: 3px solid var(--bg0); }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- menu */
.nav { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); background: color-mix(in srgb, var(--bg0) 92%, transparent); transition: opacity .25s cubic-bezier(.16,1,.3,1); }
.nav-logo img { display: block; height: 32px; width: auto; }
.nav nav { display: flex; gap: 6px; }
.nav nav a { color: var(--tx2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.nav nav a:hover { color: var(--tx); background: rgba(255, 255, 255, .05); }
.nav .nav-breve { color: var(--ac-text); }
body.no-laranja .nav { opacity: 0; pointer-events: none; }

/* ---------- abertura: o r é a cabine */
.cabine-hero { height: 210vh; position: relative; }
.palco { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; align-items: center; background: color-mix(in srgb, var(--ac) calc(var(--q) * 100%), var(--bg0)); }
.intro { position: relative; z-index: 2; max-width: 36rem; padding: 0 var(--gutter); opacity: calc(1 - var(--p) * 2.4); transform: translateY(calc(var(--p) * -60px)); }
.intro h1 { font-size: clamp(2.6rem, 5.4vw, 5.25rem); }
.apoio { margin-top: 22px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--tx2); max-width: 30rem; }
.selos-titulo { margin-top: 34px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ac-text); }
.selos { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.selos li { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 18px; background: var(--bg2); color: var(--tx); font-size: 14px; font-weight: 600; }
.selos .ic { width: 17px; height: 17px; color: var(--tx2); }

.r { position: absolute; z-index: 1; top: 9vh; right: 6vw; height: 84vh; aspect-ratio: 502 / 612; transform-origin: 12% 74%;
  transform: translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px)) scale(var(--s, 1)); will-change: transform; }
.r-forma { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--ac); overflow: visible; }
.janela { position: absolute; inset: 0; background: #0f0e0d; -webkit-mask: url(marca/vao.svg) center / 100% 100% no-repeat; mask: url(marca/vao.svg) center / 100% 100% no-repeat; }
.app { position: absolute; left: 45.5%; top: 31%; width: 45%; height: 20.5%; display: grid; grid-template-rows: auto 1fr auto; gap: 4%; padding: 2% 3% 2% 6%; transform: rotate(-9deg); transform-origin: 50% 50%; font-size: clamp(7px, 1.05vh, 12px); }
.app-bar { display: flex; align-items: center; gap: .5em; font-weight: 700; color: var(--tx); font-size: 1.15em; }
.app-bar .ic { width: 1.2em; height: 1.2em; color: var(--tx2); }
.app-live { background: #c9353a; color: #fff; font: 800 .75em/1 var(--f-ui); padding: .35em .5em; border-radius: .35em; letter-spacing: .02em; }
.app-bar .app-live { margin-left: auto; }
.app-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; min-height: 0; }
.app-linha { display: flex; align-items: center; gap: .5em; color: var(--ac-text); font-weight: 700; background: color-mix(in srgb, var(--ac) 14%, var(--bg1)); border-radius: .5em; padding: .5em .7em; }
.app-linha em { font-style: normal; font-weight: 400; color: var(--tx2); margin-left: .3em; }
.mk { width: .85em; height: 1.05em; background: currentColor; -webkit-mask: url(marca/marca-mono.svg) center / contain no-repeat; mask: url(marca/marca-mono.svg) center / contain no-repeat; display: inline-block; }

.tile { position: relative; background: var(--bg3); border-radius: .7em; display: grid; place-items: center; min-height: 0; transition: box-shadow .15s; }
.tile span { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: var(--f-brand); }
.tile b { position: absolute; left: .5em; bottom: .45em; font-size: .8em; font-weight: 600; background: rgba(0, 0, 0, .55); padding: .15em .45em; border-radius: .35em; }
.tile.falando { box-shadow: 0 0 0 2px var(--ac); }

/* ---------- dentro da cabine (laranja) */
.cabine { position: relative; z-index: 3; margin-top: -25vh; background: var(--ac); color: var(--ac-ink); padding: 4vh 0 16vh; }
.cabine ::selection { background: var(--ac-ink); color: var(--ac); }
.cabine h2 { font-size: clamp(3.2rem, 9vw, 6rem); letter-spacing: -.035em; }
.cabine-lede { font-family: var(--f-brand); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin-top: 10px; color: var(--ink2); }
.promessas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(56px, 9vh, 96px); }
.promessa { border-top: 2px solid var(--ac-ink); padding-top: 20px; }
.promessa h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); letter-spacing: -.02em; }
.promessa p { margin-top: 14px; color: var(--ink2); max-width: 34ch; }
.quem { margin-top: clamp(64px, 11vh, 120px); overflow-x: auto; }
.quem-cab, .quem-linha { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr 1fr; gap: 20px; min-width: 760px; padding: 18px 0; border-bottom: 1px solid var(--ink-line); align-items: baseline; }
.quem-cab { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); border-bottom: 2px solid var(--ac-ink); }
.quem-cab span:first-child { font-family: var(--f-brand); font-size: 1.35rem; text-transform: none; letter-spacing: -.01em; color: var(--ac-ink); }
.quem-linha [role="rowheader"] { font-family: var(--f-brand); font-weight: 700; font-size: 1.2rem; }
.quem .sim { font-weight: 700; }
.quem .nao { color: var(--ink2); }
.quem .meio { font-weight: 600; }

/* ---------- seções grafite */
.leve, .ja-sabe, .voz, .breve { padding: clamp(96px, 16vh, 168px) 0; }
.leve { background: var(--bg1); }
.leve h2, .ja-sabe h2, .voz h2 { font-size: clamp(2.4rem, 5vw, 4.25rem); }
.leve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.lista li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--tx2); }
.lista li:first-child { padding-top: 6px; }
.lista b { color: var(--tx); font-weight: 600; }
.lista .ic { color: var(--ac); margin-top: 3px; }

.ja-sabe { background: var(--bg0); }
.sabe-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.ja-sabe p { margin-top: 22px; color: var(--tx2); max-width: 46ch; font-size: 1.1rem; }
.importa { display: flex; gap: 14px; padding: 18px 0 0; border-top: 1px solid var(--line); margin-top: 32px !important; }
.importa .ic { color: var(--ac); margin-top: 3px; }
.importa b { color: var(--tx); }
.atalhos { margin: 0; display: grid; gap: 10px; }
.atalhos > div { display: grid; grid-template-columns: 12rem 1fr; align-items: center; gap: 18px; padding: 14px 18px; background: var(--bg1); border-radius: 12px; }
.atalhos dt { display: flex; gap: 6px; }
.atalhos dd { margin: 0; color: var(--tx2); }
kbd { font: 600 14px/1 var(--f-ui); min-width: 36px; height: 36px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--bg3); color: var(--tx); box-shadow: inset 0 -3px 0 var(--bg0); }

.voz { background: var(--bg1); }
.voz-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(40px, 7vh, 72px); align-items: start; }
.chamada { background: #0b0c0d; border-radius: 18px; padding: 16px; display: grid; gap: 12px; font-size: 14px; }
.tela-comp { aspect-ratio: 16 / 9; border-radius: 12px; background: #141312; border: 1px solid #23211f; display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 14px; }
.tc-img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 8px; display: block; }
.tc-meta { display: flex; align-items: center; gap: 10px; }
.tela-comp em { font-style: normal; color: var(--tx2); font-size: 13px; }
.chamada-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chamada-tiles .tile { aspect-ratio: 4 / 3; font-size: 14px; }

.breve { background: var(--bg0); }
.breve h2 { font-size: clamp(3.2rem, 9vw, 6rem); color: var(--tx); }
.breve-lede { margin-top: 12px; color: var(--tx2); font-size: 1.2rem; }
.plataformas { list-style: none; padding: 0; margin: clamp(48px, 8vh, 80px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--tx); }
.plataformas li { display: grid; gap: 10px; padding: 26px 20px 26px 0; border-bottom: 1px solid var(--line); }
.plataformas li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.plataformas .ic { width: 30px; height: 30px; color: var(--ac); }
.plataformas b { font-family: var(--f-brand); font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.02em; }
.plataformas span { justify-self: start; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 12px; background: var(--bg3); color: var(--tx2); }
.plataformas li:nth-child(-n+2) span { background: color-mix(in srgb, var(--ac) 18%, var(--bg1)); color: var(--ac-text); }
.dominio { margin-top: clamp(72px, 12vh, 128px); font-family: var(--f-brand); font-weight: 800; letter-spacing: -.04em; font-size: clamp(3rem, 11vw, 6rem); line-height: 1; }
.dominio span { color: var(--ac); }

.rodape { border-top: 1px solid var(--line); padding: 36px 0 48px; }
.rodape-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--tx2); font-size: 14px; }
.rodape img { display: block; height: 28px; width: auto; }

/* ---------- telas menores */
@media (max-width: 900px) {
  .nav nav a:not(.nav-breve) { display: none; }
  .palco { align-items: start; }
  .intro { padding-top: 104px; }
  .r { top: auto; bottom: -6vh; right: -8vw; height: 56vh; }
  .promessas, .leve-grid, .sabe-grid, .voz-grid { grid-template-columns: 1fr; }
  .plataformas { grid-template-columns: 1fr 1fr; }
  .quem-cab { display: none; }
  .quem-linha { grid-template-columns: 1fr; min-width: 0; gap: 10px; padding: 22px 0; }
  .quem-linha [role="cell"] { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; }
  .quem-linha [role="cell"]::before { content: attr(data-label); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); padding-top: 3px; }
  .plataformas li:nth-child(3) { padding-left: 0; border-left: 0; }
  .rodape-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .r { height: 44vh; right: 3vw; bottom: -4vh; }
  .chamada-tiles { grid-template-columns: 1fr 1fr; }
  .atalhos > div { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- sem movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cabine-hero { height: 100vh; }
  .cabine { margin-top: 0; }
  .r, .intro { transform: none !important; opacity: 1 !important; }
  .palco { background: var(--bg0); }
  .tile { transition: none; }
}