/* ==========================================================================
   Instituto Papo Reto — base
   Tokens, tipografia e elementos de marca compartilhados por todas as páginas.
   ========================================================================== */

/* --- Fontes da marca ---------------------------------------------------- */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fontes/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("../fontes/BebasNeue-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nevo";
  src: url("../fontes/Nevo-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Nevo";
  src: url("../fontes/Nevo-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nevo";
  src: url("../fontes/Nevo-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Nevo";
  src: url("../fontes/Nevo-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Nevo";
  src: url("../fontes/Nevo-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  --amarelo: #efc30c;
  --amarelo-escuro: #c9a400;
  --amarelo-fundo: #f0b900;
  --grafite: #2a2a2a;
  --preto-fundo: #191919;
  --preto: #0b0b0a;
  --branco: #ffffff;
  --cinza-claro: #e7e7e7;

  --fonte-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --fonte-corpo: "Nevo", "Inter", -apple-system, "Segoe UI", sans-serif;

  --t-display: clamp(3.4rem, 9.5vw, 9.5rem);
  --t-h1: clamp(2.6rem, 6.6vw, 6.2rem);
  --t-h2: clamp(2rem, 4.6vw, 4.2rem);
  --t-h3: clamp(1.35rem, 2.1vw, 2rem);
  --t-corpo: clamp(1rem, 1.1vw, 1.15rem);
  --t-peq: 0.9rem;
  --t-micro: 0.72rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --largura: 1320px;
  --ritmo: clamp(5rem, 11vh, 9rem);

  /* Tinta: reescrita por [data-tema] em cada seção */
  --tinta: var(--preto);
  --tinta-suave: rgba(11, 11, 10, 0.66);
  --fio: rgba(11, 11, 10, 0.18);
  --realce: var(--preto);
  --realce-tinta: var(--amarelo);
}

[data-tema="amarelo"],
[data-tema="branco"] {
  --tinta: var(--preto);
  --tinta-suave: rgba(11, 11, 10, 0.66);
  --fio: rgba(11, 11, 10, 0.18);
  --realce: var(--preto);
  --realce-tinta: var(--amarelo);
}

[data-tema="preto"] {
  --tinta: var(--branco);
  --tinta-suave: rgba(255, 255, 255, 0.62);
  --fio: rgba(255, 255, 255, 0.16);
  --realce: var(--amarelo);
  --realce-tinta: var(--preto);
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--amarelo-fundo);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.65;
  /* clip, não hidden: hidden cria um contêiner de rolagem e quebra o pin
     da seção de projetos. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--realce);
  outline-offset: 3px;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--preto);
  color: var(--amarelo);
  padding: 0.85rem 1.4rem;
}
.pular-para-conteudo:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Fundos texturizados por seção --------------------------------------
   Cada seção carrega a própria textura, como cada página do deck. A troca
   entre uma cor e outra é marcada pelo recorte rasgado da marca, não por
   um corte seco.                                                          */

/* A cor precisa ser reaplicada em cada bloco temático: `color` é herdado já
   computado, então redefinir --tinta lá dentro não repinta nada por si só. */
[data-tema] { color: var(--tinta); }

[data-fundo] {
  background-size: cover;
  background-position: center;
}

[data-fundo="amarelo"] {
  background-color: var(--amarelo-fundo);
  background-image: url("../img/bg-amarelo.jpg");
}
[data-fundo="branco"] {
  background-color: #f5f5f5;
  background-image: url("../img/bg-branco.jpg");
}
[data-fundo="preto"] {
  background-color: #191919;
  background-image: url("../img/bg-preto.jpg");
}

/* --- Tipografia --------------------------------------------------------- */

.display,
.titulo,
.subtitulo {
  font-family: var(--fonte-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 0.88;
}

.display { font-size: var(--t-display); }
.titulo  { font-size: var(--t-h2); }
.subtitulo { font-size: var(--t-h3); line-height: 0.95; }

.rotulo {
  font-family: var(--fonte-corpo);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.texto {
  font-size: var(--t-corpo);
  color: var(--tinta-suave);
  max-width: 62ch;
}

.grifo {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.05em 0.24em;
  background: var(--realce);
  color: var(--realce-tinta);
}

/* --- Layout ------------------------------------------------------------- */

.secao {
  position: relative;
  padding-block: var(--ritmo);
}

.envelope {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Elementos gráficos da marca ---------------------------------------- */

/* Fileira de 5 estrelas + fio, usada acima dos títulos de destaque */
.estrelas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--tinta);
}
.estrelas__linha { display: flex; gap: 0.34rem; }
.estrelas svg { width: 13px; height: 13px; fill: currentColor; }
.estrelas__fio { width: 132px; height: 2px; background: currentColor; }

.estrelas--esquerda { align-items: flex-start; }

/* Listras diagonais do canto superior esquerdo dos blocos amarelos */
.listras {
  position: absolute;
  top: -6vh;
  left: -6vw;
  width: min(46vw, 620px);
  height: min(42vh, 460px);
  pointer-events: none;
  background: repeating-linear-gradient(
    122deg,
    rgba(176, 132, 0, 0.42) 0 6px,
    transparent 6px 26px
  );
  -webkit-mask-image: linear-gradient(142deg, #000 0%, transparent 66%);
  mask-image: linear-gradient(142deg, #000 0%, transparent 66%);
}

/* Rodapé/faixa recortada — silhueta irregular com contorno amarelo */
.rasgo {
  display: block;
  width: 100%;
  height: clamp(48px, 6vw, 84px);
}
.rasgo__contorno { fill: var(--amarelo); }
.rasgo__massa { fill: var(--preto-fundo); }

/* --- Botões ------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--fonte-display);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem 0.78rem;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.35s, color 0.35s, border-color 0.35s;
}

.botao svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; }

.botao--cheio {
  background: var(--realce);
  color: var(--realce-tinta);
}
.botao--vazado {
  border-color: var(--tinta);
  color: var(--tinta);
}

.botao:hover { transform: translateY(-3px); }
.botao--vazado:hover { background: var(--tinta); color: var(--amarelo-fundo); }
[data-tema="preto"] .botao--vazado:hover { background: var(--branco); color: var(--preto); }

/* --- Faixa rolante ------------------------------------------------------ */

.faixa {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.faixa__trilho {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  flex-shrink: 0;
  will-change: transform;
}
.faixa__item {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  font-family: var(--fonte-display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.faixa__estrela { width: 9px; height: 9px; fill: var(--amarelo); flex: none; }

/* --- Cursor personalizado ----------------------------------------------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--preto);
  color: var(--amarelo);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.32s;
}
.cursor__texto {
  font-family: var(--fonte-display);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
}
.cursor--grande { width: 84px; height: 84px; }
.cursor--grande .cursor__texto { opacity: 1; }
[data-tema-cursor="preto"] .cursor { background: var(--amarelo); color: var(--preto); }

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* --- Preloader ---------------------------------------------------------- */

.abertura {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  background: var(--amarelo-fundo);
}
.abertura__marca { width: min(58vw, 380px); opacity: 0; }
.abertura__contador {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) - 0.5rem);
  font-family: var(--fonte-display);
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 1;
  color: var(--preto);
}

/* --- Movimento reduzido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cursor { display: none; }
  .abertura { display: none; }
}