/*
 * Base: Cori Corinne (Refero) — papel creme, tinta preta, serifa de revista, cantos retos,
 * sem sombra, sem gradiente, sem linhas divisórias.
 * Cores de capa de reel da Ju (medidas no feed em 12/10/2026):
 *   amarelo bold  -> chamadas, botão principal, tags
 *   rosa          -> estrelas, barras, detalhes
 *   branco serifado grande -> títulos sobre foto
 * Fora isso, nenhuma cor nova: o resto do colorido vem das fotos.
 */
:root {
  --paper: #f6f5f0;
  --white: #ffffff;
  --ink: #000000;
  --text: #292a2c;
  --muted: #4a4b45;
  --plate: #e6e4dc;
  --amarelo: #f2a58e;   /* destaque: coral/pêssego, do degradê do fundo (nome histórico: era amarelo) */
  --rosa: #e0708f;
  --cor-nome: #8e253a;                     /* cor do nome na capa (bordô) */
  --gutter: 20px;
  --section: 88px;
  --serif: "Bodoni Moda", "Playfair Display", "DM Serif Display", Georgia, serif;
  --nome: "Anton", "Impact", "Arial Narrow", "Arial Rounded MT Bold", system-ui, sans-serif;   /* fonte do nome na capa */
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;   /* letras menores: links, menu, rótulos */
  --sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --estrela: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.9 7.5.6-5.7 4.9 1.8 7.3L12 17.8 5.5 21.7l1.8-7.3L1.6 9.5l7.5-.6z'/></svg>");
}
@media (min-width: 800px) {
  :root { --gutter: 30px; --section: 120px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.67;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* Fundo da página: degradê rosa/laranja para creme (foto fixa atrás de tudo) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(rgba(246, 245, 240, .12), rgba(246, 245, 240, .12)), url("fotos/fundo.jpg") center / cover no-repeat;
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 5px; }
a.off { color: var(--muted); cursor: default; pointer-events: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Estrelinha (a das capas de vlog) */
.estrela::before {
  content: ""; display: inline-block;
  width: .85em; height: .85em; margin-right: .5em;
  background: var(--cor-estrela, var(--rosa));
  -webkit-mask: var(--estrela) center / contain no-repeat;
  mask: var(--estrela) center / contain no-repeat;
  vertical-align: -.06em;
}

/* Barra do topo */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: flex-end; align-items: center;
  padding: 16px var(--gutter);
  background: rgba(246, 245, 240, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 15px; line-height: 1.2;
}
.barra nav { display: flex; gap: 18px; }
.barra .mono { letter-spacing: .02em; }
@media (min-width: 800px) { .barra { font-size: 18px; } .barra nav { gap: 36px; } }

/* Capa */
.capa h1 {
  font-family: var(--nome);
  font-weight: 400;
  font-size: clamp(40px, 22vw, 280px);     /* Anton é estreita: cabe maior */
  white-space: nowrap;                     /* nunca quebra em duas linhas */
  line-height: 1;
  letter-spacing: 0;
  filter: url(#rugoso);                    /* borda rugosa, estilo carimbo */
  color: var(--cor-nome);                  /* cor do nome da capa */
  padding: 28px var(--gutter) calc(.16em + 20px) calc(var(--gutter) + .05em);
}
/* Fotos da capa: 3 colunas × 2 linhas, ocupando o mesmo retângulo (3:2) que as duas fotos 3:4 ocupavam */
/* Cupons logo abaixo do nome; fotos em tela cheia perto do fim da página */
#cupons { padding-top: 8px; }
#galeria { padding-inline: 0; }
.capa h1 .espaco { display: inline-block; width: .2em; }
.fotos {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 3 / 2;
}
.fotos .placa { aspect-ratio: auto; min-height: 0; }

/* Espaços de foto: cinza até a foto existir */
.placa { position: relative; background: var(--plate); overflow: hidden; }
.placa::after {
  content: "foto"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--muted); font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
}
.placa img { position: absolute; inset: 0; z-index: 1; }
/* Placas com texto branco por cima: escurecem um pouco pra manter a leitura */
.escura { background: #8c887e; }
.escura::after { color: rgba(255, 255, 255, .7); }
.escura::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .2); }
.r34 { aspect-ratio: 3 / 4; }
.r45 { aspect-ratio: 4 / 5; }

/* Opções logo abaixo do nome, em linha */
.links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 32px; padding: 0 var(--gutter) 32px;
}
.links a {
  display: inline-flex; gap: 8px; font-size: 18px; line-height: 1.5;
  padding: 2px 8px; margin: 0 -8px;   /* folga pro marca-texto do hover, sem mexer no alinhamento */
}

/* Seções */
section { padding: var(--section) var(--gutter) 0; }
.rotulo {
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 36px; line-height: 1.6;
}
.rotulo span {
  display: inline-block; margin-left: 12px; padding: 0 10px;
  background: var(--amarelo); color: var(--ink); font-weight: 700;
  letter-spacing: .02em; text-transform: none; font-size: 14px;
}

/* Insights */
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 20px; }
.numeros strong {
  display: block; font-weight: 400; color: var(--ink);
  font-size: clamp(36px, 9vw, 72px); line-height: 1; letter-spacing: -.02em;
}
.numeros span { display: block; margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.3; }
.audiencia { display: grid; gap: 10px; margin-top: 64px; }
.bloco { background: var(--white); padding: 24px; }
.bloco h3 { font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
.linha { margin-bottom: 18px; font-size: 16px; line-height: 1.3; }
.linha:last-child { margin-bottom: 0; }
.linha div { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--ink); }
.barra-v { height: 6px; background: var(--plate); }
.barra-v i { display: block; height: 100%; background: var(--rosa); }
@media (min-width: 800px) {
  .numeros { grid-template-columns: repeat(3, 1fr); }
  .audiencia { grid-template-columns: repeat(3, 1fr); }
}

/* Cupons: cartão de foto com logo branco e oferta em itálico (referência enviada pelo Lucas).
   Único lugar com cantos arredondados; duas por linha em qualquer largura. */
.cupons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; max-width: 1040px; }
.cupom {
  position: relative; display: block;
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: #4a4843; color: var(--white);
  container-type: inline-size;
}
.cupom:hover { text-decoration: none; }
a.cupom:hover .conteudo { opacity: .9; }
.cupom::after {
  content: "foto"; position: absolute; right: 10px; bottom: 8px;
  color: rgba(255, 255, 255, .45); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.cupom .fundo { position: absolute; inset: 0; z-index: 1; }
.cupom::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .22); }
.cupom .conteudo {
  position: absolute; z-index: 3; left: 6cqw; top: 50%; transform: translateY(-50%);
  max-width: 56%; display: flex; flex-direction: column; gap: .4em;
}
.cupom .nome { font-size: 14px; font-size: clamp(14px, 9cqw, 40px); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cupom .logo { width: auto; height: auto; max-width: 54cqw; max-height: 22cqw; object-fit: contain; object-position: left center; }
.cupom.topo .conteudo { top: 8%; transform: none; gap: 2px; }
.cupom .produtos {
  position: absolute; z-index: 3; left: 4%; bottom: 6%;
  width: 40%; height: auto; pointer-events: none;
  filter: drop-shadow(0 1cqw 1.6cqw rgba(0, 0, 0, .4));
}
.cupom .oferta {
  font-size: 11px; font-size: clamp(11px, 6.2cqw, 24px);
  font-weight: 800; font-style: italic; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase;
}

/* Carrossel de vídeos (Publis): cartões verticais 9:16 que andam sozinhos, devagar, e podem ser
   arrastados com o mouse ou o dedo. A posição é controlada por JS (rolagem), sem barra de rolagem. */
.carrossel {
  margin-inline: calc(-1 * var(--gutter)); overflow: hidden;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.carrossel.arrastando { cursor: grabbing; }
.carrossel:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.trilho { display: flex; width: max-content; }
.video img { -webkit-user-drag: none; }

/* Janela do player (vídeo dentro da página) */
.player {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, .85);
}
.player[hidden] { display: none; }
.player-caixa { position: relative; width: min(420px, 100%); }
.player-caixa iframe {
  display: block; width: 100%; height: min(76vh, 740px);
  border: 0; background: #fff;
}
.player-fechar {
  position: absolute; top: -46px; right: 0; width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer;
  color: var(--white); font: 400 34px/1 var(--sans);
}
.player-fechar:hover { color: var(--amarelo); }
.player-rodape { margin-top: 12px; color: var(--white); font-size: 15px; line-height: 1.4; display: flex; justify-content: space-between; gap: 16px; }
.player-rodape a { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

.video {
  position: relative; display: block; flex: 0 0 auto;
  width: clamp(150px, 42vw, 230px); aspect-ratio: 9 / 16;
  margin-right: 14px;                 /* margem (e não gap) pra o -50% fechar exato */
  background: #8c887e; color: var(--white); overflow: hidden;
}
.video:hover { text-decoration: none; }
.video .capa { position: absolute; inset: 0; z-index: 1; }
.video .capa.contida { object-fit: contain; }
.video .capa-fundo {
  position: absolute; inset: -10%; width: 120%; height: 120%; z-index: 1;
  object-fit: cover; filter: blur(14px) brightness(.8) saturate(1.1);
}
.video::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .2); }
.video .tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--amarelo); color: var(--ink);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; line-height: 1.4;
}
.video .play {
  position: absolute; z-index: 3; top: 50%; left: 50%; width: 54px; height: 54px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .9); border-radius: 50%;
}
.video .play::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-35%, -50%);
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--ink);
}
.video .titulo-foto {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 3;
  font-family: var(--serif); font-size: clamp(22px, 5.4vw, 30px); line-height: 1;
  text-transform: uppercase; color: var(--white);
}
.video.com-capa .play { display: none; }
a.video:hover .play { background: var(--amarelo); }


/* O que eu uso */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filtros button {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 16px; color: var(--muted); padding: 4px 14px;
}
.filtros button:hover { color: var(--ink); }
.filtros button[aria-pressed="true"] { background: var(--amarelo); color: var(--ink); font-weight: 700; }
.uso { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 10px; }
.item .marca-n { color: var(--muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding-top: 12px; line-height: 1.3; }
.item .nome { color: var(--ink); line-height: 1.35; margin: 2px 0 6px; font-size: 17px; }
.item a { font-size: 16px; }
@media (min-width: 800px) { .uso { grid-template-columns: repeat(4, 1fr); } }

/* Contato */
.contato a {
  display: inline-block; font-size: clamp(26px, 6vw, 44px); line-height: 1.3; letter-spacing: -.01em;
  padding: 0 10px; margin: 0 -10px;
}
/* Hover: marca-texto amarelo em volta do link (vale também pros links ainda sem endereço) */
.links a:hover, .contato a:hover { background: var(--amarelo); color: var(--ink); text-decoration: none; }
.links a.off, .contato a.off { pointer-events: auto; cursor: default; }
.contato #lista-contato { display: grid; justify-items: start; }
footer { padding: 120px var(--gutter) 40px; font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Letras menores em fonte monoespaçada, maiúsculas (estilo da referência "building brands") */
.barra nav a, .links a, .contato a, .rotulo, .numeros span, .bloco h3, .linha, .filtros button, .player-rodape {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em;
}
.barra nav a { font-size: 13px; }
.links a { font-size: 15px; line-height: 1.6; }
.contato a { font-size: clamp(16px, 4.4vw, 26px); letter-spacing: .02em; }
.numeros span { font-size: 13px; }
.linha { font-size: 13px; }
.rotulo span { text-transform: none; }
@media (min-width: 800px) { .barra nav a { font-size: 15px; } .links a { font-size: 17px; } }

/* Marcas trabalhadas: faixa de placas brancas que passa sozinha, devagar, da esquerda para a direita.
   Todas as placas têm o mesmo tamanho e cada logo fica numa caixa igual (mesmo enquadramento). */
.faixa-marcas { margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
.trilho-marcas {
  --n: 15; --seg: 3s;
  display: flex; width: max-content;
  animation: passa-marcas calc(var(--n) * var(--seg)) linear infinite;
}
.faixa-marcas:hover .trilho-marcas, .faixa-marcas:focus-within .trilho-marcas { animation-play-state: paused; }
@keyframes passa-marcas { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.marca {
  flex: 0 0 auto; width: clamp(150px, 40vw, 220px); margin-right: 10px;
  background: var(--white); aspect-ratio: 5 / 3; display: grid; place-items: center;
  position: relative; overflow: hidden; padding: 0 12px; text-align: center; color: var(--ink);
  font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
.marca img { position: absolute; left: 18%; top: 24%; width: 64%; height: 52%; object-fit: contain; }   /* mesma caixa para todos os logos */
a.marca:hover { text-decoration: none; background: var(--amarelo); }
@media (prefers-reduced-motion: reduce) {
  .trilho-marcas { animation: none; }
  .faixa-marcas { overflow-x: auto; }
  .trilho-marcas .marca[aria-hidden="true"] { display: none; }
}