/* Patos Pizzas Academy: tokens e componentes da identidade.
   Usado pelo projeto (PDF), pelas aplicações (artes) e pela página de vendas.
   Base: estética das artes da Patos (faixas amarelas de canto reto, uma palavra em vermelho, bloco verde + vermelho,
   selo redondo do pato, fatias de contorno com brilho) + a linguagem de tela de câmera (REC, visor, timecode). */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;0,700;0,800;0,900;1,800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --forno: #0B0C10;      /* Preto Forno: base */
  --grafite: #17191F;    /* Grafite: superfícies sobre o preto */
  --grafite2: #22252D;
  --amarelo: #FFD600;    /* Amarelo Patos: faixas, botões, destaque */
  --vermelho: #ED1C2E;   /* Vermelho REC: gravação, palavra-chave, curso 1 */
  --verde: #16A83A;      /* Verde Aula: ícone de aula, check */
  --massa: #F6F3EE;      /* Branco Massa: texto no escuro, páginas de leitura */
  --fumaca: #8E939D;     /* Cinza Fumaça: texto secundário */
  --salmao: #FF8A70;     /* salmão da fatia oficial: curso 4 */
  --linha: rgba(246, 243, 238, .14);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Montserrat', 'Segoe UI', sans-serif;
}

/* ---------- selo (anel de texto em volta do logo oficial) ---------- */
.selo { position: relative; display: inline-block; aspect-ratio: 1; }
.selo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.selo svg text { font-family: var(--sans); font-weight: 800; font-size: 31px; letter-spacing: 2px; fill: var(--amarelo); }
.selo.escuro svg text { fill: var(--forno); }
.selo.claro svg text { fill: var(--massa); }
.selo img { position: absolute; left: 17%; top: 18%; width: 66%; height: auto; }

/* ---------- chip ACADEMY (bloco verde + bloco vermelho, como nas artes da Patos) ---------- */
.chip { display: inline-flex; align-items: stretch; font-family: var(--sans); line-height: 1; }
.chip .ic { background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.chip .tx { background: var(--vermelho); color: var(--amarelo); font-weight: 800; text-transform: uppercase; display: flex; align-items: center; letter-spacing: .14em; white-space: nowrap; }

/* ---------- assinatura horizontal ---------- */
.assin { display: inline-flex; align-items: center; }
.assin .dv { background: currentColor; opacity: .7; align-self: stretch; }
.assin .wm { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- faixas de título ---------- */
.faixa { display: inline-block; background: var(--amarelo); color: var(--forno); font-family: var(--sans); font-weight: 900;
  text-transform: uppercase; line-height: 1; letter-spacing: -.015em; white-space: nowrap; }
.faixa em { font-style: normal; color: var(--vermelho); }
.faixa.preta { background: var(--forno); color: var(--massa); }
.faixa.preta em { color: var(--amarelo); }
.faixa.vermelha { background: var(--vermelho); color: var(--massa); }
.faixa.vermelha em { color: var(--amarelo); }
.faixas { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- marca do curso 1: RECEITA DO VIRAL (REC destacado com o ponto de gravação) ---------- */
.rdv { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: var(--sans); }
.rdv .l1, .rdv .l2 { background: var(--amarelo); color: var(--forno); font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -.02em; white-space: nowrap; display: flex; align-items: center; }
.rdv .rec { color: var(--vermelho); display: inline-flex; align-items: center; }
.rdv .rec::before { content: ""; display: inline-block; width: .42em; height: .42em; border-radius: 50%; background: var(--vermelho); margin-right: .16em; }
.rdv .tag { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--massa); }

/* ---------- visor de câmera (moldura para foto e vídeo) ---------- */
.visor { position: relative; overflow: hidden; }
.visor > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor .cantos { position: absolute; inset: 5%; pointer-events: none;
  background:
    linear-gradient(var(--amarelo), var(--amarelo)) left top / 9% 3px no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) left top / 3px 6% no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) right top / 9% 3px no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) right top / 3px 6% no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) left bottom / 9% 3px no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) left bottom / 3px 6% no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) right bottom / 9% 3px no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) right bottom / 3px 6% no-repeat; }
.visor .hud { position: absolute; font-family: var(--mono); font-weight: 700; color: var(--massa); text-shadow: 0 1px 6px rgba(0,0,0,.55); letter-spacing: .06em; white-space: nowrap; }
.visor .hud.rec { color: #fff; display: flex; align-items: center; gap: .5em; }
.visor .hud.rec::before { content: ""; width: .8em; height: .8em; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 10px rgba(237,28,46,.8); }

/* ---------- fatias de contorno oficiais com brilho (neon) ---------- */
.neon-a { filter: drop-shadow(0 0 6px rgba(255,214,0,.85)) drop-shadow(0 0 22px rgba(255,190,0,.5)); }
.neon-v { filter: drop-shadow(0 0 6px rgba(237,28,46,.9)) drop-shadow(0 0 22px rgba(237,28,46,.55)); }
.neon-g { filter: drop-shadow(0 0 6px rgba(22,168,58,.9)) drop-shadow(0 0 22px rgba(22,168,58,.5)); }

/* ---------- faixa rasgada (versão Academy da faixa "Incomparável - Deliciosa - Original - Sem igual") ---------- */
.rasgo { position: relative; background: #15171C; color: var(--massa); font-family: var(--sans); font-weight: 600; text-transform: uppercase; text-align: center; white-space: nowrap; }
.rasgo::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 18px; background: #E9E6E0;
  clip-path: polygon(0 60%, 3% 20%, 6% 70%, 9% 30%, 12% 80%, 15% 25%, 18% 65%, 21% 10%, 24% 70%, 27% 35%, 30% 85%, 33% 20%, 36% 60%, 39% 15%, 42% 75%, 45% 30%, 48% 70%, 51% 10%, 54% 65%, 57% 30%, 60% 80%, 63% 20%, 66% 60%, 69% 25%, 72% 85%, 75% 15%, 78% 60%, 81% 30%, 84% 75%, 87% 20%, 90% 65%, 93% 30%, 96% 70%, 100% 25%, 100% 100%, 0 100%); }
.rasgo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px); pointer-events: none; }