/*
 * Página de links da Questão de Tempo, no design system "Dossiê & Mentor".
 * Os tokens vêm de src/app/globals.css do site (questaodetempo). Se um valor
 * mudar lá, mude aqui também. Nenhuma cor solta fora deste bloco de tokens.
 */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fontes/fraunces-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fontes/karla-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens (claro) ─────────────────────────────────────────────────────── */
:root {
  --font-sans: 'Karla', system-ui, sans-serif;
  --font-display: 'Fraunces', 'Karla', Georgia, serif;

  --background: #faf6ee;
  --foreground: #1a2332;
  --card: #fffdf8;
  --primary: #a8412a;
  --primary-foreground: #fffdf8;
  --muted-foreground: #6a5d52;
  --accent: #fdf1e0;
  --border: #e2d9c8;
  --ring: #a8412a;

  --radius: 0.75rem;
  --radius-xs: calc(var(--radius) * 0.5);
  --radius-xl: calc(var(--radius) * 1.4);

  --tinta-sombra: 62 44 24;
  --sombra-xs: 0 1px 2px 0 rgb(var(--tinta-sombra) / 0.06);
  --sombra-md: 0 6px 16px -4px rgb(var(--tinta-sombra) / 0.11), 0 2px 6px -2px rgb(var(--tinta-sombra) / 0.07);
  --sombra-folha-foco:
    0 1px 0 rgb(var(--tinta-sombra) / 0.04), 0 16px 32px -14px rgb(var(--tinta-sombra) / 0.24),
    0 4px 10px -6px rgb(var(--tinta-sombra) / 0.12);
  --borda-foco: color-mix(in oklab, var(--primary) 35%, transparent);
  --tracejado: color-mix(in oklab, var(--foreground) 28%, transparent);
  /* Fundo pontilhado e azulejos da constelação (dossie-mentor.css do site). */
  --pontos: color-mix(in oklab, var(--border) 70%, transparent);
  --azulejo: var(--card);
  --sombra-azulejo: 0 1px 1px rgb(var(--tinta-sombra) / 0.05), 0 10px 24px -10px rgb(var(--tinta-sombra) / 0.32);

  --dur-toque: 90ms;
  --dur-rapida: 160ms;
  --dur-carimbo: 280ms;
  --ease-papel: cubic-bezier(0.16, 1, 0.3, 1);
  --movimento: 1;
  --carimbo-rot: -4deg;

  color-scheme: light;
}

/* ── Tokens (escuro): os mesmos do .dark do site ────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #10151f;
    --foreground: #eae3d5;
    --card: #1a2332;
    --primary: #d97757;
    --primary-foreground: #26120a;
    --muted-foreground: #ab9e8d;
    --accent: #33241b;
    --border: #2d3849;
    --ring: #d97757;

    --tinta-sombra: 3 6 12;
    --sombra-xs: 0 1px 2px 0 rgb(var(--tinta-sombra) / 0.36);
    --sombra-md: 0 6px 16px -4px rgb(var(--tinta-sombra) / 0.5), 0 2px 6px -2px rgb(var(--tinta-sombra) / 0.36);
    --sombra-folha-foco:
      inset 0 1px 0 color-mix(in oklab, var(--foreground) 4%, transparent),
      0 18px 36px -14px rgb(var(--tinta-sombra) / 0.7), 0 4px 12px -6px rgb(var(--tinta-sombra) / 0.5);
    --borda-foco: color-mix(in oklab, var(--primary) 55%, transparent);
    /* Azulejo creme no escuro: papel sobre tinta. Num azulejo naval, os brasões
       escuros (TCU, OAB) sumiam. */
    --azulejo: var(--foreground);
    --sombra-azulejo: 0 1px 1px rgb(var(--tinta-sombra) / 0.4), 0 10px 24px -10px rgb(var(--tinta-sombra) / 0.8);

    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --movimento: 0;
  }
}

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

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

/* Papel pontilhado, o mesmo fundo da abertura do site. */
body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--background);
  background-image: radial-gradient(var(--pontos) 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grão de papel só em ponteiro fino (desktop): em GPUs de Android o filtro vira
   ruído forte. Mesma regra do site. */
@media (pointer: fine) {
  body {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
      radial-gradient(var(--pontos) 1px, transparent 1px);
    background-size: 160px 160px, 18px 18px;
  }
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.icone {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Página ─────────────────────────────────────────────────────────────── */
.pagina {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
}

@media (min-width: 40rem) {
  .pagina {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ── Cabeçalho: selo QT, nome e frase ───────────────────────────────────── */
.cabeca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  /* Os pontos somem atrás do nome e da frase, como no centro da abertura do site. */
  background: radial-gradient(ellipse 60% 32% at 50% 78%, var(--background) 40%, transparent 100%);
}

/* Constelação: brasões em azulejos ligados ao selo QT, como na abertura do site.
   É uma faixa baixa, para a oferta aparecer logo ao abrir a página.
   As posições usam porcentagem do viewBox (400 × 110) e o SVG estica sem
   preservar proporção, então os traços encontram cada azulejo em qualquer
   largura. As linhas partem do centro do azulejo e passam por baixo dele. */
.constelacao {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 110;
  margin-bottom: 0.5rem;
  container-type: inline-size;
  --tile: clamp(2.125rem, 9.5cqw, 2.75rem);
  --centro: clamp(3.75rem, 17cqw, 4.75rem);
}

.constelacao-linhas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.constelacao-linhas * {
  vector-effect: non-scaling-stroke;
}

.no,
.brasao,
.selo {
  position: absolute;
  transform: translate(-50%, -50%);
}

.no {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--background);
}

.no-1 { left: 32%; top: 18.18%; }
.no-2 { left: 35%; top: 81.82%; }
.no-3 { left: 68%; top: 18.18%; }
.no-4 { left: 65%; top: 81.82%; }

.brasao-1 { left: 7.5%; top: 50%; }
.brasao-2 { left: 23%; top: 18.18%; }
.brasao-3 { left: 26%; top: 81.82%; }
.brasao-4 { left: 92.5%; top: 50%; }
.brasao-5 { left: 77%; top: 18.18%; }
.brasao-6 { left: 74%; top: 81.82%; }

/* O azulejo gira e flutua; o .brasao em volta só centraliza. */
.azulejo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile);
  height: var(--tile);
  border: 1px solid var(--border);
  border-radius: calc(var(--tile) * 0.3);
  background: var(--azulejo);
  box-shadow: var(--sombra-azulejo);
  animation: flutua 7s ease-in-out infinite;
}

.brasao-grande .azulejo {
  width: calc(var(--tile) * 1.18);
  height: calc(var(--tile) * 1.18);
}

.azulejo img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

.brasao-1 .azulejo { rotate: -3deg; }
.brasao-2 .azulejo { rotate: 6deg; animation-delay: -2.3s; animation-duration: 8s; }
.brasao-3 .azulejo { rotate: -6deg; animation-delay: -4.6s; animation-duration: 9s; }
.brasao-4 .azulejo { rotate: 3deg; animation-delay: -1.2s; }
.brasao-5 .azulejo { rotate: -3deg; animation-delay: -3.4s; animation-duration: 8s; }
.brasao-6 .azulejo { rotate: 6deg; animation-delay: -5.7s; animation-duration: 9s; }

@keyframes flutua {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 calc(-6px * var(--movimento));
  }
}

@media (prefers-reduced-motion: reduce) {
  .azulejo {
    animation: none;
  }
}

/* O selo QT no centro da constelação. */
.selo {
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--centro);
  height: var(--centro);
  padding: 4px;
  border: 1px solid color-mix(in oklab, var(--foreground) 30%, transparent);
  border-radius: 50%;
  background: var(--background);
  box-shadow: var(--sombra-md);
}

.selo-disco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-display);
  font-size: calc(var(--centro) * 0.34);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cabeca h1 {
  font-size: 1.75rem;
}

.cabeca .kicker {
  color: var(--muted-foreground);
}

.cabeca-texto {
  max-width: 22rem;
  margin-top: 0.25rem;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* ── Folha em foco: a oferta ────────────────────────────────────────────── */
.folha-foco {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.5rem;
  border: 1px solid var(--borda-foco);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--sombra-folha-foco);
}

@media (max-width: 22.5rem) {
  .folha-foco {
    padding: 1.25rem;
  }
}

.oferta-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
}

.oferta-kicker .icone {
  width: 1rem;
  height: 1rem;
}

.oferta h2 {
  font-size: 1.5rem;
}

.oferta-nota {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-wrap: pretty;
}

/* O cupom: papel tracejado, o código em Fraunces e o botão de copiar. */
.cupom {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1.5px dashed var(--tracejado);
  border-radius: var(--radius);
}

.cupom-codigo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  user-select: all;
  -webkit-user-select: all;
}

.cupom-copiar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-rapida) var(--ease-papel),
    transform var(--dur-toque) var(--ease-papel);
}

.cupom-copiar:hover {
  background: var(--accent);
}

.cupom-copiar:active {
  transform: scale(calc(1 - 0.04 * var(--movimento)));
}

.cupom-copiar .icone {
  width: 1rem;
  height: 1rem;
}

.icone-copiado,
.copiado .icone-copiar {
  display: none;
}

.copiado .icone-copiado {
  display: block;
  color: var(--primary);
}

/* Carimbo "Copiado": só repete o rótulo do botão (aria-hidden) e bate uma vez,
   em resposta ao toque. */
.estampa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3em 0.65em 0.25em;
  border: 3px double currentColor;
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: var(--carimbo-rot);
  user-select: none;
  pointer-events: none;
}

.cupom-carimbo {
  position: absolute;
  top: -0.95rem;
  right: 0.75rem;
  border-width: 2px;
  background: var(--card);
  color: var(--primary);
  font-size: 0.625rem;
  visibility: hidden;
}

.copiado .cupom-carimbo {
  visibility: visible;
  animation: carimbar var(--dur-carimbo) var(--ease-papel) both;
}

@keyframes carimbar {
  0% {
    opacity: 0;
    transform: scale(calc(1 + 0.35 * var(--movimento))) rotate(calc(-6deg * var(--movimento)));
    filter: blur(calc(1.5px * var(--movimento)));
  }
  55% {
    opacity: 1;
    transform: scale(calc(1 - 0.03 * var(--movimento))) rotate(0deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* O botão da ação: o lacre. */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--sombra-md);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-rapida) var(--ease-papel);
}

.botao:hover {
  transform: translateY(calc(-1px * var(--movimento)));
}

.botao:active {
  transform: scale(calc(1 - 0.02 * var(--movimento)));
}

/* ── Folha de mesa: o índice de links ───────────────────────────────────── */
.folha-mesa {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--sombra-xs);
}

.indice {
  display: flex;
  flex-direction: column;
}

/* Cada link é uma linha entre filetes. No hover e no foco, o filete lacre
   aparece na margem e o título ganha o sublinhado vivo. */
.linha {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  transition: background-color var(--dur-rapida) var(--ease-papel);
}

.linha + .linha {
  border-top: 1px solid var(--border);
}

.linha:first-child {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.linha:last-child {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.linha::before {
  content: '';
  position: absolute;
  top: 0.875rem;
  bottom: 0.875rem;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
  opacity: 0;
  transition: opacity var(--dur-rapida) var(--ease-papel);
}

.linha:hover,
.linha:focus-visible {
  background: var(--accent);
}

.linha:hover::before,
.linha:focus-visible::before {
  opacity: 1;
}

.linha:focus-visible {
  outline-offset: -2px;
}

.linha .icone {
  margin-top: 0.125rem;
  color: var(--muted-foreground);
  transition: color var(--dur-rapida) var(--ease-papel);
}

.linha:hover .icone,
.linha:focus-visible .icone {
  color: var(--primary);
}

.linha-texto {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.linha-titulo {
  align-self: flex-start;
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-rapida) var(--ease-papel);
}

.linha:hover .linha-titulo,
.linha:focus-visible .linha-titulo {
  background-size: 100% 1px;
}

.linha-nota {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-wrap: pretty;
}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.rodape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  text-align: center;
}

.rodape a {
  text-decoration: none;
  text-underline-offset: 3px;
}

.rodape a:hover,
.rodape a:focus-visible {
  text-decoration: underline;
}

.rodape span {
  margin: 0 0.375rem;
}