/* Buscador · Mediacraft. Valores medidos no Figma (Buscador Mediacraft, página Telas), grade de 8. Só modo claro. */
:root {
  color-scheme: light;
  --area: #E9E8E4;
  --cartao: #F4F3F0;
  --controle: #DDDCD7;
  --tinta: #0F0F10;
  --tinta-2: #55554F;
  --acao: #000000;
  --acao-hover: #2A2A2C;
  --acao-tinta: #FFFFFF;
  --projeto: #E9E8E4;
  --projeto-tinta: #0F0F10;
  --serifa: 'Newsreader', Georgia, serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --pixel: 'Doto', 'Geist Mono', monospace;
  --suave: cubic-bezier(.2, .7, .2, 1);
  --rapido: 160ms;
  --medio: 280ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--area); }
body {
  font: 400 16px/24px var(--sans);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  min-height: 100vh;
}
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
[hidden] { display: none !important; }
img { display: block; }

/* ===== Tipografia ===== */
.rotulo { font: 400 12px/16px var(--mono); letter-spacing: .72px; text-transform: uppercase; }
.secundario { color: var(--tinta-2); }
.pixel { font-family: var(--pixel); font-weight: 700; font-variation-settings: 'ROND' 0; }

/* ===== Ícones e marca (máscara: herdam a cor do texto) ===== */
.icone { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.i-chevron { --m: url(img/chevron.svg); width: 12px; height: 12px; }
.i-seta { --m: url(img/seta.svg); width: 40px; height: 40px; }
.i-descartar { --m: url(img/descartar.svg); width: 16px; height: 16px; }
.i-aprovar { --m: url(img/aprovar.svg); width: 16px; height: 16px; }
.i-fechar { --m: url(img/fechar.svg); width: 16px; height: 16px; }
.i-remover { --m: url(img/remover.svg); width: 12px; height: 12px; }
.logo { --m: url(img/logo-mediacraft.svg); width: 97px; height: 22px; }

/* ===== Régua (a do site da Mediacraft): risca a cada 8 px, risca longa a cada 40 ===== */
.regua {
  height: 8px; width: 100%; flex: none;
  background: currentColor;
  -webkit-mask: url(img/regua-modulo.svg) 0 0 / 40px 8px repeat-x;
  mask: url(img/regua-modulo.svg) 0 0 / 40px 8px repeat-x;
  animation: regua 720ms steps(40) both;
}
@keyframes regua { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ===== Telas ===== */
.tela { min-height: 100vh; display: flex; flex-direction: column; }
.tela.entrando { animation: entra var(--medio) var(--suave) both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* Cortina na cor do projeto, entre a senha e o cliente */
#cortina { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: var(--c, var(--projeto)); transform: translateY(100%); }
#cortina.sobe { transition: transform 420ms cubic-bezier(.7, 0, .2, 1); transform: translateY(0); }
#cortina.sai { transition: transform 420ms cubic-bezier(.7, 0, .2, 1); transform: translateY(-100%); }

/* ===== Topo ===== */
.topo { display: flex; align-items: center; justify-content: space-between; position: relative; flex: none; }
.marca { display: flex; align-items: center; gap: 16px; }
button.marca { padding: 0; }
.conta { display: flex; gap: 32px; align-items: center; }
.link { position: relative; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--medio) var(--suave); }
.link:hover::after { transform: scaleX(1); transform-origin: left; }
.abas { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 32px; }
.aba { display: flex; gap: 8px; align-items: baseline; color: var(--tinta-2); }
.aba .rotulo { letter-spacing: 0; }
.aba[aria-current='true'] span:last-child { color: var(--tinta); font-weight: 500; }
.aba:hover span:last-child { color: var(--tinta); }

/* ===== Botões ===== */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 16px; border-radius: 2px;
  background: var(--acao); color: var(--acao-tinta); font-weight: 500;
  transition: background var(--rapido), opacity var(--rapido), transform var(--rapido);
  white-space: nowrap;
}
.botao:hover:not(:disabled) { background: var(--acao-hover); }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled { opacity: .32; }
.botao.p { height: 40px; font-size: 14px; line-height: 20px; }
.botao.contorno { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.botao.contorno:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }

/* ===== 00 Entrada ===== */
#tela-entrada { padding: 24px 56px 56px; gap: 16px; }
#tela-entrada .conteudo { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.manchete { font: 400 104px/112px var(--serifa); letter-spacing: -3.12px; white-space: nowrap; }
.manchete em { font-style: italic; }
.manchete > span { display: block; }
#palavra { height: 136px; display: flex; align-items: center; white-space: pre; }
#palavra .cursor { display: inline-block; width: .06em; min-width: 3px; height: .78em; margin-left: .04em; background: currentColor; vertical-align: middle; }
#palavra.parada .cursor { animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.v-serifa { font: italic 400 134px/136px var(--serifa); letter-spacing: -4.02px; color: #5856D6; }
.v-grotesca { font: 500 120px/136px var(--sans); letter-spacing: -7.2px; color: #FF5A1F; }
.v-pontilhada { font: 800 112px/136px var(--pixel); font-variation-settings: 'ROND' 0; letter-spacing: -7.84px; color: #000; }
.v-oferta { font: 400 134px/136px 'Oferta do Dia', var(--serifa); letter-spacing: -4.02px; color: #559D1F; }
.v-pincel { font: 400 96px/136px 'Sukajan Brush', var(--sans); letter-spacing: -5.76px; color: #D50000; }
.v-japones { font: 500 96px/136px 'Sukajan Brush', 'Noto Sans JP', 'Hiragino Sans', sans-serif; letter-spacing: -5.76px; color: #0086E6; }

.senha { width: 400px; display: flex; flex-direction: column; gap: 16px; }
.senha p { color: var(--tinta-2); }
.campo {
  height: 48px; width: 100%; padding: 0 16px; border: 0; border-radius: 2px; background: var(--cartao);
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--rapido);
}
.campo::placeholder { color: var(--tinta-2); }
.campo:focus { outline: none; box-shadow: inset 0 0 0 1px var(--tinta); }
.senha .botao { width: 100%; }
.senha .rotulo { color: var(--tinta-2); }
.senha .erro { color: var(--tinta); }
.treme { animation: treme 320ms var(--suave); }
@keyframes treme { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ===== 01 Cliente ===== */
#tela-cliente { background: var(--projeto); color: var(--projeto-tinta); padding: 24px 56px 56px; gap: 24px; }
#tela-cliente .conteudo { flex: 1; display: flex; gap: 24px; padding-top: 40px; min-height: 600px; }
.projeto { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.projeto .titulo { display: flex; flex-direction: column; gap: 32px; }
.nome-cliente { font: 400 128px/120px var(--serifa); letter-spacing: -3.84px; }
.nome-cliente span { display: block; white-space: nowrap; }
.nome-cliente em { font-style: italic; }
.projeto .rodape { display: flex; flex-direction: column; gap: 24px; }
.chamada { font-size: 24px; line-height: 32px; white-space: pre-line; }
.ficha { display: flex; gap: 24px; }

.setor {
  width: 360px; flex: none; display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px 32px 32px; border-radius: 2px; background: var(--cartao); color: var(--tinta); text-align: left;
  transition: background var(--medio) var(--suave), transform var(--medio) var(--suave);
  animation: entra 420ms var(--suave) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.setor:hover { background: #FFFFFF; }
.setor .cabeca { display: flex; justify-content: space-between; align-items: flex-start; }
.glifo { width: 48px; height: 48px; border-radius: 50%; background: var(--c); transition: transform var(--medio) var(--suave); }
.setor:hover .glifo { transform: scale(1.12); }
.setor .texto { display: flex; flex-direction: column; gap: 16px; }
.setor h3 { font: 400 56px/56px var(--serifa); letter-spacing: -1.12px; }
.setor .resumo { color: var(--tinta-2); white-space: pre-line; }
.acao { margin-top: 16px; height: 48px; padding: 0 4px 0 16px; border-radius: 2px; background: var(--acao); color: var(--acao-tinta); font-weight: 500; display: flex; align-items: center; justify-content: space-between; transition: background var(--rapido); }
.setor:hover .acao { background: var(--acao-hover); }
.acao .i-seta { transition: transform var(--medio) var(--suave); }
.setor:hover .acao .i-seta { transform: translateX(4px); }
/* 3 setores ou mais: o título e os cartões encolhem para caber (não existe no Figma; validar com o Rafa) */
.muitos .nome-cliente { font-size: 88px; line-height: 88px; letter-spacing: -2.64px; }
.muitos .setor { width: 296px; padding: 24px; }
.muitos .setor h3 { font-size: 40px; line-height: 44px; letter-spacing: -.8px; }

/* ===== 02 a 06 Curadoria ===== */
#tela-curadoria { min-height: 100vh; }
.faixa { background: var(--projeto); color: var(--projeto-tinta); padding: 24px 56px; display: flex; flex-direction: column; gap: 16px; flex: none; }
.faixa .titulo { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 8px; }
.faixa .nome { display: flex; flex-direction: column; gap: 12px; }
.faixa h2 { font: 400 88px/88px var(--serifa); letter-spacing: -2.64px; white-space: nowrap; }
#btn-criterios { min-width: 120px; box-shadow: inset 0 0 0 1px var(--projeto-tinta); color: var(--projeto-tinta); background: transparent; }
#btn-criterios:hover { background: color-mix(in srgb, var(--projeto-tinta) 10%, transparent); }
#btn-criterios[aria-pressed='true'] { background: var(--projeto-tinta); color: var(--projeto); }
.variacoes { display: flex; gap: 8px; flex-wrap: wrap; }
.variacao { height: 40px; padding: 0 16px; border-radius: 2px; font-size: 14px; line-height: 20px; box-shadow: inset 0 0 0 1px var(--projeto-tinta); transition: background var(--rapido), color var(--rapido); }
.variacao:hover { background: color-mix(in srgb, var(--projeto-tinta) 10%, transparent); }
.variacao[aria-pressed="true"] { background: var(--projeto-tinta); color: var(--projeto-inverso); font-weight: 500; }

.trabalho { flex: 1; display: flex; gap: 32px; padding: 24px 56px 32px; align-items: stretch; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
[data-modo='gerar'] .principal { gap: 16px; }
.filtros, .linha-gerar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linha-gerar { gap: 16px; flex-wrap: nowrap; }
.filtro {
  appearance: none; -webkit-appearance: none; height: 40px; padding: 0 32px 0 16px; border: 0; border-radius: 2px;
  background: var(--controle) url(img/chevron.svg) right 12px center / 12px no-repeat; cursor: pointer;
  transition: background-color var(--rapido);
}
.filtro:hover { background-color: #D3D2CC; }
.contexto { flex: 1; min-width: 160px; height: 40px; padding: 0 16px; border: 0; border-radius: 2px; background: var(--cartao); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--rapido); }
.contexto::placeholder { color: var(--tinta-2); }
.contexto:focus { outline: none; box-shadow: inset 0 0 0 1px var(--tinta); }
.modo { display: flex; padding: 4px; border-radius: 2px; background: var(--controle); }
.modo button { height: 32px; padding: 0 12px; border-radius: 2px; font-size: 14px; line-height: 20px; transition: background var(--rapido); }
.modo button[aria-pressed='true'] { background: var(--cartao); font-weight: 500; }

.estado { display: flex; gap: 16px; align-items: center; min-height: 16px; }
.progresso { display: flex; gap: 2px; flex: none; }
.progresso i { width: 6px; height: 12px; background: var(--tinta); opacity: .16; transition: opacity 120ms; }
.progresso i.feito { opacity: 1; }

.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.carta { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--controle); animation: entra 360ms var(--suave) both; animation-delay: calc(var(--i, 0) * 50ms); transition: opacity 240ms var(--suave), transform 240ms var(--suave); }
[data-orientacao='portrait'] .carta { aspect-ratio: 3 / 4; }
[data-orientacao='square'] .carta { aspect-ratio: 1; }
.carta img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 320ms var(--suave), transform 600ms var(--suave); }
.carta img.carregada { opacity: 1; }
.carta:hover img { transform: scale(1.02); }
.carta.esperando { background: linear-gradient(100deg, var(--controle) 40%, #E4E3DF 50%, var(--controle) 60%) 0 0 / 300% 100%; animation: brilho 1.6s linear infinite; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.carta .acoes { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.carta .acoes button { width: 40px; height: 40px; border-radius: 2px; display: grid; place-items: center; transition: transform var(--rapido) var(--suave); }
.carta .acoes button:hover { transform: scale(1.08); }
.carta .acoes button:active { transform: scale(.94); }
.carta .nao { background: #FFFFFF; color: var(--tinta); }
.carta .sim { background: var(--tinta); color: #FFFFFF; }
.carta .credito { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); padding: 4px 8px; background: rgba(15, 15, 16, .72); color: #FFFFFF; border-radius: 2px; opacity: 0; transform: translateY(-4px); transition: opacity var(--rapido), transform var(--rapido); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.carta:hover .credito { opacity: 1; transform: none; }
.carta.aprovada { opacity: 0; transform: translateX(16px) scale(.96); }
.carta.descartada { opacity: 0; transform: translateX(-16px) scale(.96); }

.vazio { height: 472px; background: var(--cartao); border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; padding: 0 24px; }
.vazio h3 { font: 400 40px/48px var(--serifa); letter-spacing: -.4px; }

.geradas { display: flex; flex-direction: column; gap: 12px; }
.geradas .deck { display: flex; flex-wrap: wrap; gap: 16px; }
.geradas .carta { height: 256px; width: auto; }
.gerando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.gerando .pixel { font-size: 32px; line-height: 32px; }

/* Painel da direita: selecionadas, com os critérios deslizando por cima */
.lateral { width: 352px; flex: none; position: relative; overflow: hidden; border-radius: 2px; background: var(--cartao); min-height: 480px; }
.selecionadas, .criterios { position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; }
.selecionadas { justify-content: space-between; }
.selecionadas .topo-lista { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: auto; }
.titulo-painel { display: flex; justify-content: space-between; align-items: center; font-size: 32px; line-height: 40px; }
.titulo-painel h3 { font: 400 32px/40px var(--serifa); letter-spacing: -.32px; }
.miniaturas { display: grid; grid-template-columns: repeat(2, 148px); gap: 8px; }
.miniatura { position: relative; height: 112px; overflow: hidden; animation: aparece 320ms var(--suave) both; }
@keyframes aparece { from { opacity: 0; transform: scale(.9); } }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura button { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 2px; background: #FFFFFF; display: grid; place-items: center; opacity: .92; transition: transform var(--rapido); }
.miniatura button:hover { transform: scale(1.1); }
.miniatura.saindo { animation: some 200ms var(--suave) both; }
@keyframes some { to { opacity: 0; transform: scale(.9); } }
.selecionadas .rodape { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.selecionadas .rodape .botao { width: 100%; }
.texto-p { font-size: 14px; line-height: 20px; }

.criterios { gap: 16px; background: var(--cartao); transform: translateX(100%); transition: transform 360ms var(--suave); overflow: auto; }
.criterios.aberto { transform: translateX(0); }
.criterios .fechar { width: 40px; height: 40px; border-radius: 2px; background: var(--controle); display: grid; place-items: center; transition: background var(--rapido); }
.criterios .fechar:hover { background: #D3D2CC; }
.criterios ol { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.criterios li { display: flex; gap: 16px; font-size: 14px; line-height: 20px; }
.criterios li span { font: 400 12px/20px var(--mono); letter-spacing: .72px; color: var(--tinta-2); flex: none; }
.criterios.aberto li { animation: entra 320ms var(--suave) both; animation-delay: calc(var(--i) * 30ms + 120ms); }

/* ===== Visão Mediacraft ===== */
.admin { padding: 24px 56px 48px; gap: 16px; }
.orbita { flex: 1; display: flex; align-items: center; justify-content: center; gap: 48px; min-height: 480px; }
.lista-orbita { width: 400px; height: 256px; position: relative; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.lista-orbita .trilho { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 24px; transition: transform 480ms var(--suave); }
.lista-orbita p { font: 400 32px/40px var(--serifa); letter-spacing: -.32px; opacity: .28; white-space: nowrap; transition: opacity 480ms var(--suave); cursor: pointer; }
.lista-orbita p.ativo { opacity: 1; }
#orbita-nomes { text-align: right; }
#orbita-nomes p.ativo { font-style: italic; }
.nucleo { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.nucleo i { width: 16px; height: 16px; transition: background 480ms var(--suave); }
.nucleo .quadrado { width: 256px; height: 256px; display: grid; place-items: center; transition: background 480ms var(--suave); cursor: pointer; }
.nucleo .quadrado .pixel { font-size: 72px; line-height: 72px; color: var(--q-tinta, var(--tinta)); transition: color 480ms; }
.rodape-admin { display: flex; justify-content: space-between; align-items: flex-end; }
.numero { display: flex; gap: 8px; align-items: baseline; }
.numero strong { font: 400 56px/56px var(--serifa); letter-spacing: -1.12px; }
.ficha-admin { display: flex; gap: 48px; }
.ficha-admin div { display: flex; flex-direction: column; gap: 8px; }
.ficha-admin p:last-child { font-size: 14px; line-height: 20px; }
.rodape-admin .botao { width: 200px; }

.conteudo-admin { display: flex; flex-direction: column; gap: 40px; padding-top: 32px; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; }
.cabecalho h1 { font: 400 88px/88px var(--serifa); letter-spacing: -2.64px; }
.filtro.p { font-size: 14px; line-height: 20px; }
.numeros { display: flex; }
.numeros div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.numeros .pixel { font-size: 64px; line-height: 64px; }
.tabela { display: flex; flex-direction: column; }
.tabela .linha { display: flex; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--controle); animation: entra 320ms var(--suave) both; animation-delay: calc(var(--i, 0) * 40ms); }
.tabela .linha.cabeca { padding: 12px 0; align-items: center; animation: none; }
.tabela .c { flex: none; }
.tabela .c1 { flex: 1; min-width: 0; }
.tabela .d { text-align: right; }
.tabela .acoes-linha { display: flex; justify-content: flex-end; gap: 24px; font-size: 14px; line-height: 20px; font-weight: 500; }
.descricao-admin { color: var(--tinta-2); }

/* Aviso rápido (toast) */
#aviso { position: fixed; left: 50%; bottom: 32px; z-index: 60; transform: translate(-50%, 16px); opacity: 0; padding: 12px 16px; border-radius: 2px; background: var(--tinta); color: #FFFFFF; pointer-events: none; transition: opacity var(--medio) var(--suave), transform var(--medio) var(--suave); max-width: calc(100vw - 32px); }
#aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* Modo da curadoria: buscar em bancos ou gerar com IA */
[data-modo='buscar'] .so-gerar, [data-modo='gerar'] .so-buscar { display: none !important; }
.link:disabled { opacity: .32; }
.link:disabled::after { display: none; }