/* Backoffice: the site's identity (manual de identidade v1.1) — palette "Betão", Archivo and
   JetBrains Mono (the site's own files, at /brand/…), uppercase mono labels, pill buttons,
   square cards and the REC dot. Tokens as in css/style.css. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/brand/archivo-latin-400-900.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(/brand/jetbrains-mono-latin-400-500.woff2) format("woff2");
}

:root {
  --bg: #d9d6cf;
  --fg: #141414;
  --accent: #ff4a1c;
  /* small accent words, deepened to read at 4.5:1 on the paper; shapes keep the pure accent */
  --accent-ink: #a1341a;
  /* ink on the accent: dark reads at 5.6:1, white only at 3.4:1 */
  --on-accent: var(--fg);
  --muted: #53524f;
  --line: rgba(20, 20, 20, .14);
  --line-strong: rgba(20, 20, 20, .5);
  --panel: #e1ded8;
  --field: #ebe9e4;
  --chip: #c5c3bc;
  --font: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.muted { color: var(--muted); }
.error { color: var(--accent-ink); font-size: 14px; font-weight: 600; }

/* the REC dot: what is being recorded (here, what is not on the site yet) */
.rec-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* logo: WE ARE over VISUAL printed in the trama, as on the site */
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 900; color: var(--fg); text-decoration: none; }
.logo__top { font-size: 13px; letter-spacing: .04em; }
.logo__box { display: block; margin-top: 2px; line-height: 0; }
.logo__box svg { display: block; }
.logo__trama { fill: var(--bg); }

/* buttons: pills, as on the site */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 11px 20px; font-weight: 700; font-size: 14px; border: 1px solid transparent; background: none; white-space: nowrap; text-decoration: none; transition: background .3s, color .3s, border-color .3s, opacity .2s; }
.btn:disabled { opacity: .45; cursor: default; }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:not(:disabled):hover { background: var(--accent); color: var(--on-accent); }
.btn--ghost { border-color: var(--line-strong); }
.btn--ghost:not(:disabled):hover { border-color: var(--fg); }
.btn--text { padding: 8px 12px; font-size: 18px; line-height: 1; }
.btn--small { padding: 7px 14px; font-size: 13px; font-weight: 600; }
.btn--danger:not(:disabled):hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; display: inline-grid; place-items: center; font-size: 15px; transition: background .3s, color .3s, border-color .3s; }
.icon-btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.icon-btn:disabled { opacity: .3; cursor: default; }

/* login: the viewfinder corners, the REC dot and a big title */
.login { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 16px; }
.login__box { position: relative; width: min(400px, 100%); display: flex; flex-direction: column; gap: 18px; align-items: stretch; padding: 44px 36px 40px; }
.login__box .logo { align-self: flex-start; }
.login__rec { display: flex; align-items: center; gap: 8px; color: var(--accent-ink); margin-top: 18px; }
.login__title { font-size: clamp(48px, 14vw, 72px); font-weight: 900; line-height: .9; letter-spacing: -.045em; text-transform: uppercase; margin-bottom: 8px; }
.hud { position: absolute; width: 24px; height: 24px; border: 0 solid var(--line-strong); pointer-events: none; }
.hud.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hud.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hud.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.btn--google { gap: 12px; }
.btn--google svg { background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; }
.login__or { text-align: center; margin: -6px 0; color: var(--muted); }
.login__password { display: flex; flex-direction: column; gap: 12px; }

/* top bar: the site's nav, with the sections as underlined links */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding: 16px clamp(16px, 3vw, 40px); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: clamp(14px, 2.2vw, 32px); flex: 1; overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; background: none; border: 0; padding: 4px 0; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--muted); transition: color .3s; }
.tabs button::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.tabs button.on { color: var(--fg); font-weight: 700; }
.tabs button.on::after, .tabs button:hover::after { transform: scaleX(1); transform-origin: left; }
.tabs button:hover { color: var(--fg); }
.top__actions { position: relative; display: flex; align-items: center; gap: 10px; }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); margin-right: 6px; white-space: nowrap; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.status.is-dirty { color: var(--accent-ink); }
.status.is-dirty::before { background: var(--accent); animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: .25; } }
.menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; display: flex; flex-direction: column; padding: 6px; background: var(--bg); border: 1px solid var(--line-strong); box-shadow: 0 14px 32px rgba(20,20,20,.14); }
.menu button, .menu a { text-align: left; background: none; border: 0; padding: 10px 12px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; }
.menu button:hover, .menu a:hover { background: var(--fg); color: var(--bg); }

/* warnings from the server (values that will not appear on the site) */
.warnings { max-width: 1040px; margin: 24px auto 0; padding: 14px 18px 14px 36px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--accent-ink); font-size: 14px; font-weight: 500; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 1104px) { .warnings { margin-left: 16px; margin-right: 16px; } }

/* content: numbered sections with the site's heavy uppercase titles */
.content { max-width: 1040px; margin: 0 auto; padding: 40px clamp(16px, 3vw, 32px) 120px; display: flex; flex-direction: column; gap: 32px; counter-reset: section; }
.section { counter-increment: section; background: var(--panel); border: 1px solid var(--line); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.section__head { display: flex; flex-direction: column; gap: 10px; }
/* "(01) — Portfolio": the section label the site puts over each section */
.section__head::before { content: "(" counter(section, decimal-leading-zero) ")"; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--muted); }
.section h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.section__hint { color: var(--muted); font-size: 15px; max-width: 72ch; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* fields: square, on a lighter paper; the label is a mono caption */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { color: var(--muted); display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.field__count { font-variant-numeric: tabular-nums; }
.field__count.over { color: var(--accent-ink); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="password"], .field input[type="number"], .field input[type="date"], .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--field); outline: none; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.field input[readonly] { background: transparent; border-style: dashed; color: var(--muted); }
.field select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 16px center, right 11px center; background-size: 5px 5px; background-repeat: no-repeat; }
.field__help { color: var(--muted); font-size: 13px; }
.colors { display: flex; gap: 8px; }
.colors input { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--line-strong); background: none; }

/* repeatable rows */
.rows { display: flex; flex-direction: column; gap: 12px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); background: var(--bg); }
.row__fields { display: grid; gap: 12px; }
.row__tools { display: flex; gap: 6px; }

/* project and work cards */
.project { border: 1px solid var(--line); background: var(--bg); transition: border-color .3s; }
.project:hover, .project[open] { border-color: var(--line-strong); }
.project > summary { list-style: none; display: grid; grid-template-columns: 112px 1fr auto; gap: 18px; align-items: center; padding: 12px 14px; cursor: pointer; }
.project > summary::-webkit-details-marker { display: none; }
.project[open] > summary { border-bottom: 1px solid var(--line); }
.project__thumb { width: 112px; aspect-ratio: 16/10; background: var(--fg) center / cover no-repeat; display: grid; place-items: center; color: var(--bg); font: 900 13px var(--font); letter-spacing: -.02em; text-transform: uppercase; overflow: hidden; }
.project__thumb video { width: 100%; height: 100%; object-fit: cover; }
.project__title { font-weight: 900; font-size: 18px; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; }
.project__meta { color: var(--muted); font-size: 13px; }
.project__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* badges: the site's mono captions (the card badge, "Filme · 2:49") */
.badge { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border: 1px solid var(--line-strong); color: var(--muted); }
.badge.ok { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.project__body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
/* a group of fields inside a card (the area's own page) */
.group { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.group__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.group__head > .field { flex: 1; }
.group__title { font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: -.01em; }

/* media upload */
.media { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.media__preview { position: relative; width: 100%; max-width: 360px; aspect-ratio: 16/9; background: color-mix(in srgb, var(--fg) 6%, var(--bg)); border: 1px dashed var(--line-strong); display: grid; place-items: center; overflow: hidden; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 8px; }
.media__preview.has { padding: 0; border-style: solid; border-color: var(--fg); background: #000; }
.media__preview img, .media__preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media__note { position: absolute; left: 6px; bottom: 6px; background: var(--fg); color: var(--bg); padding: 3px 6px; font-size: 10px; }
.media__body { display: flex; flex-direction: column; gap: 10px; }
.media__title { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.media__buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.media__trim { display: flex; gap: 12px; flex-wrap: wrap; }
.media__trim .field { width: 130px; }

/* cover framing: the cover with its point, and the crops the site makes of it */
.focus__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.focus__stage { position: relative; cursor: crosshair; touch-action: none; user-select: none; overflow: hidden; background: #000; line-height: 0; }
.focus__stage img { width: 100%; height: auto; display: block; max-height: 420px; object-fit: contain; }
.focus__dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(0,0,0,.5); pointer-events: none; }
.focus__crops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.focus__crops figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.focus__crops figcaption { font-size: 10px; color: var(--muted); }
.focus__crop { width: 100%; max-height: 180px; background: #000 center / cover no-repeat; }
.focus__tools { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.focus__value { color: var(--muted); }

/* a frame of the film */
.frame video { width: 100%; max-width: 560px; max-height: 360px; background: #000; display: block; }

/* the work's photos: a grid to reorder by dragging */
.photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.photos__item { position: relative; margin: 0; border: 1px solid var(--line); background: var(--panel); cursor: grab; transition: border-color .3s; }
.photos__item:hover { border-color: var(--line-strong); }
.photos__item.is-over, .photos__add.is-over { outline: 2px solid var(--accent); outline-offset: 2px; }
.photos__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #000; pointer-events: none; }
.photos__cover { position: absolute; left: 6px; top: 6px; background: var(--accent); color: var(--on-accent); padding: 3px 7px; font-size: 10px; }
.photos__tools { display: flex; align-items: center; gap: 4px; padding: 6px; }
.photos__tools .mono { margin-right: auto; color: var(--muted); }
.photos__tools .icon-btn { width: 28px; height: 28px; font-size: 13px; }
.photos__add { min-height: 150px; border: 1px dashed var(--fg); background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; padding: 12px; text-align: center; transition: background .3s, color .3s; }
.photos__add:hover { background: var(--fg); color: var(--bg); }
.photos__add .mono { color: inherit; opacity: .7; font-size: 10px; font-weight: 500; letter-spacing: .06em; }

/* history */
.version { border: 1px solid var(--line); background: var(--bg); padding: 16px; }
.version__head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.version__head strong { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.version__head .badge { margin-left: 8px; vertical-align: middle; }
.version__diff { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.version__diff ul { margin: 6px 0 0; padding-left: 18px; }

/* progress of an upload or a conversion */
.progress { height: 4px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.progress-label { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.add { align-self: flex-start; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--fg); color: var(--bg); padding: 13px 20px; border-radius: 999px; z-index: 50; max-width: calc(100vw - 32px); }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.toast.is-error { background: var(--accent); color: var(--on-accent); }
.toast.is-error::before { background: var(--fg); }

@media (max-width: 860px) {
  .top { flex-wrap: wrap; gap: 12px; }
  .tabs { order: 3; flex-basis: 100%; }
  .top__actions { margin-left: auto; }
  .status { display: none; }
  .grid-2, .grid-3, .media, .focus__grid { grid-template-columns: 1fr; }
  /* phones: thumbnail and title side by side, the arrows on their own line under them */
  .project > summary { grid-template-columns: 76px 1fr; gap: 10px 12px; }
  .project > summary > .row__tools { grid-column: 1 / -1; justify-content: flex-end; }
  .project__thumb { width: 76px; }
  .project__title { font-size: 15px; }
  .logo__top { font-size: 11px; }
  .logo__box svg { width: 70px; height: auto; }
  .top .btn { padding: 8px 13px; font-size: 13px; }
  .top .btn--text { padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}