/* ============================================================
   VISTARE — camada de refinamento tátil
   Textura de papel/linho, grade quente nas fotos, relevo sutil,
   capitular e numerais editoriais. Carregada após styles.css.
   ============================================================ */

/* — Atmosfera: vinheta suave + trama de linho discreta —
   Controlada por html[data-texture] (Tweak). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(135% 115% at 50% 42%, transparent 52%, rgba(58,40,26,.085) 100%),
    radial-gradient(80% 60% at 50% -5%, rgba(255,250,242,.5), transparent 60%);
}
/* Trama de linho — cruzado fino e quente */
html[data-texture="linho"] body::after {
  background:
    repeating-linear-gradient(135deg, rgba(120,88,58,.020) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg,  rgba(120,88,58,.015) 0 1px, transparent 1px 5px),
    radial-gradient(135% 115% at 50% 42%, transparent 50%, rgba(58,40,26,.10) 100%),
    radial-gradient(80% 60% at 50% -5%, rgba(255,250,242,.5), transparent 60%);
}
html[data-texture="suave"] body::after {
  background:
    radial-gradient(140% 120% at 50% 45%, transparent 62%, rgba(58,40,26,.05) 100%);
}

/* — Grão de papel em camadas (fino + médio) para profundidade real — */
.grain {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 160px 160px, 320px 320px;
}

/* — Fotos: grade quente editorial + granulação + vinheta interna —
   Faz imagens diversas conviverem num mesmo tom. */
.hero-photo, .cred-photo, .how-photo { isolation: isolate; }
.hero-photo img, .cred-photo img, .how-photo img {
  filter: saturate(.9) contrast(1.05) brightness(1.02) sepia(.05);
}
.hero-photo::before,
.cred-photo::before,
.how-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .72;
  background:
    radial-gradient(120% 100% at 50% 36%, transparent 58%, rgba(40,26,15,.3) 100%),
    linear-gradient(180deg, rgba(120,72,40,.1), rgba(52,34,20,.16)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: cover, cover, 200px 200px;
}
/* mantém o tag/frame/card acima da grade */
.photo-tag, .photo-frame, .sign-card { z-index: 5; }

/* — Relevo letterpress nos rótulos em maiúsculas — */
.eyebrow, .sc-label, .cmp-tag, .photo-tag, .scarcity {
  text-shadow: 0 1px 0 rgba(255,253,248,.55);
}
.cmp-card.strong .cmp-tag, .photo-tag, .scarcity { text-shadow: none; }

/* Filete do eyebrow com um pequeno losango terminal */
.eyebrow::before { box-shadow: 3px 0 0 -.5px var(--accent); }

/* — Numerais romanos de seção (kicker editorial) — */
.kicker {
  display: inline-flex;
  align-items: baseline;
  gap: .85em;
  white-space: nowrap;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: .01em;
  margin-bottom: 6px;
}
.kicker .rn {
  font-size: 1.35rem;
  font-weight: 600;
  font-style: normal;
  font-variant-numeric: oldstyle-nums;
}
.kicker .kline {
  width: 34px; height: 1px;
  background: var(--accent);
  opacity: .5;
  align-self: center;
}

/* — Capitular de revista — (definida inline no HTML por confiabilidade do ::first-letter) */
.hero-sub.dropcap { text-indent: 0; }

/* — Cartões com textura de papel + filete interno (relevo) — */
.cmp-card { isolation: isolate; }
.cmp-card.weak::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: .5;
  mix-blend-mode: multiply;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='cw'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cw)' opacity='0.4'/%3E%3C/svg%3E");
}
.cmp-card.weak {
  box-shadow: inset 0 0 0 1px rgba(255,253,248,.5), 0 1px 2px rgba(42,36,30,.04);
}
.cmp-card.strong {
  box-shadow: inset 0 1px 0 rgba(255,240,225,.08), 0 40px 70px -44px rgba(20,12,8,.8);
}
/* segundo filete interno — moldura dupla editorial */
.cmp-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid currentColor;
  opacity: .1;
  border-radius: 9px;
  pointer-events: none;
}
.cmp-card.strong::after { opacity: .14; }

/* — Botão: brilho interno + textura sutil para toque “impresso” — */
.btn-primary {
  background-image:
    linear-gradient(180deg, rgba(255,225,205,.22), rgba(0,0,0,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,235,220,.35),
    inset 0 -1px 0 rgba(60,20,8,.25),
    0 12px 26px -12px rgba(126,58,32,.75);
}
.btn-primary:hover { box-shadow:
    inset 0 1px 0 rgba(255,235,220,.4),
    inset 0 -1px 0 rgba(60,20,8,.3),
    0 16px 30px -12px rgba(126,58,32,.8); }

/* — Filete fino com tique no rodapé das seções — */
.num-rule { position: relative; overflow: visible; }
.num-rule::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 1px;
  background: var(--accent);
}

/* — Card flutuante de assinaturas: relevo de papel — */
.sign-card { box-shadow:
  inset 0 1px 0 rgba(255,255,255,.7),
  0 30px 60px -34px rgba(42,36,30,.78); }

/* — Avatares com leve relevo — */
.avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px -2px rgba(42,36,30,.5); }

/* — Vinheta de leitura no rodapé escuro — */
.footer { position: relative; isolation: isolate; }
.footer::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='fn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fn)' opacity='0.4'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  /* texturas são estáticas — nada a desativar */
}