/*
Theme Name: Travessia
Theme URI: https://lucasmilanez.com.br
Author: Lucas Milanez
Author URI: https://lucasmilanez.com
Description: Tema editorial para as landing pages da serie Transmutacao das Densidades. Pagina inteira em nevoa, sem fundo escuro. Cormorant Garamond + Literata + JetBrains Mono, simbolos alquimicos e acento por elemento. Cada pagina e um bloco de HTML editavel.
Version: 5.5.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: travessia
*/

/* ══════════════════════════════════════════
   1. TOKENS
══════════════════════════════════════════ */

:root {
  /* PAPEL DA CASA — v5.5. O creme e o mesmo de lucasmilanez.com.
     Os tres tons guardam entre si exatamente a mesma distancia de
     claro/escuro da nevoa antiga (#F2F1EE / #FAFAF8 / #EDECE8),
     so que na temperatura do creme. Se um dia quiser voltar,
     e so recolocar aqueles tres valores. */
  --mist:     #F4F0E8;   /* fundo da pagina */
  --mist-2:   #FCF9F2;   /* paineis claros: painel do trecho, card da oferta */
  --mist-3:   #EFEBE2;   /* faixa levemente mais funda: virada e fecho */
  --cloud:    #E3E3E0;   /* fios */
  --ink:      #2A2D2E;   /* texto */
  --ink-soft: #4A4E50;   /* texto secundario */
  --ink-dim:  #7A7E80;   /* rotulos */
  --silver:   #A9AEB2;

  /* Acento por livro — PALETA v2, as cores exatas de lucasmilanez.com.
     Estas cores foram desenhadas para fundo escuro. Sobre nevoa elas
     ficam claras de proposito: sao marca, nao texto.
     Se alguma ficar apagada demais na tela, NAO troque a cor:
     aumente a espessura no bloco "ESPESSURA DAS MARCAS" logo abaixo. */
  --ar:    #A8C5BC;   /* Matrix           */
  --fogo:  #D4724A;   /* Arquitetura      */
  --terra: #00B894;   /* Corpo Pos-Humano */
  --agua:  #00CFEE;   /* O Fim do Real    */
  --eter:  #C4A470;   /* Depois do Fim    */

  --display: 'Cormorant Garamond', Georgia, serif;
  --leitura: Athelas, 'Literata', Georgia, serif;

  /* Rotulos e botoes. JetBrains Mono e a fonte usada em
     lucasmilanez.com. Para voltar ao da LP antiga da Matrix:
       --rotulo: 'Montserrat', Helvetica, Arial, sans-serif;
     (e ajuste a linha das fontes em functions.php) */
  --rotulo: 'JetBrains Mono', Consolas, 'Courier New', monospace;

  --el: var(--silver);   /* padrao; sobrescrito por data-el */
}

[data-el="ar"],    body.el-ar    { --el: var(--ar); }
[data-el="fogo"],  body.el-fogo  { --el: var(--fogo); }
[data-el="terra"], body.el-terra { --el: var(--terra); }
[data-el="agua"],  body.el-agua  { --el: var(--agua); }
[data-el="eter"],  body.el-eter  { --el: var(--eter); }
[data-el="serie"], body.el-serie { --el: var(--eter); }

/* ══════════════════════════════════════════
   2. BASE
══════════════════════════════════════════ */

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

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

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--leitura);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* grao — textura de lucasmilanez.com */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--ink-dim); outline-offset: 3px; }

.tv-secao { position: relative; z-index: 1; }
.tv-interno { max-width: 720px; margin: 0 auto; padding: 56px 28px; position: relative; z-index: 1; }
.tv-interno--justo { padding-top: 20px; }
.tv-interno--curto { padding-bottom: 24px; }

/* ══════════════════════════════════════════
   3. BARRA DE TOPO  (paginas comuns; a LP nao usa)
══════════════════════════════════════════ */

.tv-topo {
  position: relative; z-index: 2;
  height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--cloud);
}

.tv-marca {
  font-family: var(--rotulo);
  font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-soft);
  text-decoration: none;
}

/* ══════════════════════════════════════════
   4. SIMBOLO ALQUIMICO
══════════════════════════════════════════ */

.tv-simbolo { color: var(--el); display: block; margin: 0 auto; }

/* marca do volume no topo: simbolo + numeral */
.tv-selo-vol {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  margin-bottom: 30px;
}

.tv-vol-num {
  font-family: var(--rotulo);
  font-size: 9px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-dim);
}

/* ══════════════════════════════════════════
   5. HERO  —  pagina de rosto, nao anuncio
══════════════════════════════════════════ */

.tv-hero {
  text-align: center;
  padding: 62px 28px 52px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 30% 20%, rgba(255,255,255,.9) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 65%, rgba(255,255,255,.7) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 50% 100%, rgba(210,212,210,.5) 0%, transparent 60%),
    var(--mist);
}

.tv-hero__interno { position: relative; z-index: 2; max-width: 660px; margin: 0 auto; }

.tv-autor {
  font-family: var(--rotulo);
  font-size: 11px; letter-spacing: .4em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 30px;
}

.tv-hero__titulo {
  font-family: var(--display);
  font-size: clamp(38px, 7vw, 64px);
  font-weight: 500; line-height: 1.08;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
}

.tv-hero__arco {
  font-family: var(--rotulo);
  font-size: 10px; letter-spacing: .42em;
  text-transform: uppercase; color: var(--ink-dim);
  display: inline-block;
  margin: 0 0 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cloud);
}

.tv-hero__citacao {
  max-width: 460px; margin: 0 auto 36px;
  font-family: var(--display);
  font-style: italic; font-size: 20px; line-height: 1.6;
  color: var(--ink-soft);
}

.tv-hero__selo {
  font-family: var(--rotulo);
  font-size: 9px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-dim);
  margin: 0 0 14px;
}

.tv-hero__serie {
  font-family: var(--rotulo);
  font-size: 9px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ink-dim);
  margin: 0;
}

/* pilula com a transicao do volume */
.tv-pilula {
  display: inline-block;
  font-family: var(--rotulo);
  font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid var(--cloud);
  padding: 6px 14px;
  margin: 32px 0 0;
}

.tv-seta { color: var(--el); }

/* ══════════════════════════════════════════
   6. PONTE
══════════════════════════════════════════ */

.tv-ponte .tv-interno { padding: 20px 28px 40px; }

.tv-ponte p {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 auto 14px;
  max-width: 560px;
  text-align: center;
}

.tv-ponte p.tv-destaque { color: var(--ink); }

/* ══════════════════════════════════════════
   7. LEITURA
══════════════════════════════════════════ */

.tv-leitura { padding: 0 20px 8px; position: relative; z-index: 1; }

.tv-leitura__painel {
  max-width: 680px; margin: 0 auto;
  background: var(--mist-2);
  border: 1px solid var(--cloud);
  padding: 44px clamp(22px, 6vw, 64px) 34px;
}

.tv-leitura__cabecalho { text-align: center; margin-bottom: 34px; }

.tv-cap-num {
  font-family: var(--rotulo);
  font-size: 9px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-dim);
  margin: 0 0 12px;
}

.tv-cap-titulo {
  font-family: var(--display);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 500; letter-spacing: .04em;
  color: var(--ink);
  margin: 0;
}

.tv-cap-linha {
  width: 42px; height: 1px;
  background: var(--el);
  border: 0;
  margin: 20px auto 0;
}

.tv-texto-livro { font-family: var(--leitura); font-size: 16px; line-height: 1.78; color: var(--ink); }
.tv-texto-livro p { margin: 0 0 18px; }
.tv-texto-livro p:last-child { margin-bottom: 0; }
.tv-texto-livro em { font-style: italic; }

.tv-texto-livro p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 400; font-size: 50px;
  line-height: .85; float: left;
  padding: 7px 10px 0 0;
  color: var(--ink);
}

.tv-fim {
  text-align: center;
  color: var(--el);
  letter-spacing: 14px;
  font-size: 13px;
  padding: 24px 0 4px;
}

/* ══════════════════════════════════════════
   8. A VIRADA
   Sem escurecer: o simbolo grande e a faixa mais funda marcam o corte.
══════════════════════════════════════════ */

.tv-virada {
  background: var(--mist-3);
  border-top: 1px solid var(--cloud);
  border-bottom: 1px solid var(--cloud);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tv-virada .tv-interno { padding: 64px 28px 58px; }

/* simbolo grande e apagado atras do hook */
.tv-virada__fundo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--el);
  opacity: .10;
  z-index: 0;
  pointer-events: none;
}

.tv-virada h2 {
  font-family: var(--display);
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 500; letter-spacing: .03em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 22px;
}

.tv-virada h2 em { font-style: italic; color: var(--ink-soft); }

.tv-virada p {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto 14px;
}

/* ══════════════════════════════════════════
   9. OFERTA
══════════════════════════════════════════ */

.tv-oferta .tv-interno { padding: 56px 28px; }

.tv-oferta__card {
  max-width: 560px; margin: 0 auto;
  background: var(--mist-2);
  border: 1px solid var(--cloud);
  padding: 44px 38px;
  text-align: center;
  position: relative;
}

/* fio do elemento no topo do card */
.tv-oferta__card::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 2px;
  background: var(--el);
}

.tv-oferta__card h3 {
  font-family: var(--display);
  font-size: 25px; font-weight: 500;
  letter-spacing: .05em;
  color: var(--ink);
  margin: 0 0 12px;
}

.tv-oferta__card > p { color: var(--ink-soft); font-size: 16px; margin: 0 0 26px; }

.tv-oferta__capa {
  width: 158px;
  margin: 0 auto 26px;
  border: 1px solid var(--cloud);
  box-shadow: 0 14px 34px rgba(42,45,46,.16);
}

.tv-oferta__preco {
  font-family: var(--display);
  font-size: 36px; font-weight: 500;
  color: var(--ink);
  line-height: 1;
  margin: 0 0 6px;
}

.tv-oferta__parcela {
  font-family: var(--rotulo);
  font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim);
  margin: 0 0 28px;
}

.tv-oferta__itens {
  list-style: none;
  text-align: left;
  max-width: 400px;
  margin: 0 auto 30px;
  padding: 0;
}

.tv-oferta__itens li {
  padding: 10px 0;
  border-bottom: 1px solid var(--cloud);
  color: var(--ink-soft);
  font-size: 15px;
  display: flex; gap: 12px; align-items: flex-start;
}

.tv-oferta__itens li::before { content: '\2014'; color: var(--el); flex-shrink: 0; }
.tv-oferta__itens li:last-child { border-bottom: 0; }

.tv-oferta__nota {
  margin: 16px 0 0;
  font-family: var(--rotulo);
  font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim);
}

/* ══════════════════════════════════════════
   10. BOTAO
══════════════════════════════════════════ */

.tv-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--mist-2);
  font-family: var(--rotulo);
  font-size: 11px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 17px 40px;
  border: 1px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.tv-btn:hover { background: transparent; color: var(--ink); }

/* ══════════════════════════════════════════
   11. PERGUNTAS
══════════════════════════════════════════ */

.tv-perguntas { max-width: 560px; margin: 0 auto; border-top: 1px solid var(--cloud); }

.tv-pergunta { border-bottom: 1px solid var(--cloud); }

.tv-pergunta summary {
  cursor: pointer; list-style: none;
  padding: 19px 30px 19px 0;
  font-family: var(--display);
  font-size: 20px; font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink);
  position: relative;
  text-align: left;
}

.tv-pergunta summary::-webkit-details-marker { display: none; }

.tv-pergunta summary::after {
  content: '+';
  position: absolute; right: 2px; top: 18px;
  font-family: var(--rotulo);
  font-size: 13px; color: var(--el);
}

.tv-pergunta[open] summary::after { content: '\2013'; }

.tv-pergunta__corpo { padding: 0 0 20px; text-align: left; }
.tv-pergunta__corpo p { font-size: 15px; color: var(--ink-soft); margin: 0 0 .7em; }
.tv-pergunta__corpo p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════
   12. FECHO
══════════════════════════════════════════ */

.tv-fecho {
  background: var(--mist-3);
  border-top: 1px solid var(--cloud);
  text-align: center;
}

.tv-fecho .tv-interno { padding: 60px 28px 64px; }

.tv-fecho h2 {
  font-family: var(--display);
  font-size: clamp(23px, 3.8vw, 34px);
  font-weight: 500; letter-spacing: .03em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 30px;
}

.tv-fecho h2 em { font-style: italic; color: var(--ink-soft); }

.tv-garantias {
  display: flex; gap: 30px;
  justify-content: center; flex-wrap: wrap;
  margin-top: 36px;
}

.tv-garantia {
  font-family: var(--rotulo);
  font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim);
}

/* ══════════════════════════════════════════
   12b. QUEM ESCREVEU  —  foto e voz do autor
══════════════════════════════════════════ */

.tv-autor-bloco { border-top: 1px solid var(--cloud); }

.tv-autor-bloco .tv-interno { padding: 52px 28px; }

.tv-autor-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  justify-items: center;
  text-align: center;
}

@media (min-width: 46rem) {
  .tv-autor-grade {
    grid-template-columns: 180px 1fr;
    gap: 44px;
    justify-items: start;
    text-align: left;
  }
}

.tv-autor-foto {
  width: 180px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.04);
  border: 1px solid var(--cloud);
}

.tv-autor-nome {
  font-family: var(--rotulo);
  font-size: 9px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-dim);
  margin: 0 0 14px;
}

.tv-autor-texto { font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 1em; }
.tv-autor-texto:last-child { margin-bottom: 0; }
.tv-autor-texto em { font-style: italic; color: var(--ink); }

.tv-autor-fio {
  width: 42px; height: 1px;
  background: var(--el);
  border: 0;
  margin: 18px 0 0;
}

@media (max-width: 46rem) {
  .tv-autor-fio { margin-inline: auto; }
}


/* faixa larga de foto — usada na pagina de obrigado */
.tv-faixa-foto {
  position: relative; z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
}

.tv-faixa-foto img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.04);
  border: 1px solid var(--cloud);
}

@media (max-width: 720px) {
  .tv-faixa-foto img { aspect-ratio: 4 / 3; }
}

/* ══════════════════════════════════════════
   13. ARCO DOS CINCO VOLUMES  (opcional, no fim da pagina)
══════════════════════════════════════════ */

.tv-arco {
  display: flex; align-items: flex-start; justify-content: center;
  flex-wrap: wrap; gap: 0;
  margin: 8px auto 0;
}

.tv-arco__passo {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  text-decoration: none;
}

.tv-arco__rotulo {
  font-family: var(--rotulo);
  font-size: 8px; letter-spacing: .12em;
  text-transform: uppercase; text-align: center;
  line-height: 1.5; color: var(--ink-dim);
}

.tv-arco__fio {
  width: 34px; height: 1px;
  background: var(--cloud);
  margin-top: 22px;
  flex-shrink: 0;
}

.tv-arco .ar    { color: var(--ar); }
.tv-arco .fogo  { color: var(--fogo); }
.tv-arco .terra { color: var(--terra); }
.tv-arco .agua  { color: var(--agua); }
.tv-arco .eter  { color: var(--eter); }

/* ══════════════════════════════════════════
   14. RODAPE
══════════════════════════════════════════ */

.tv-rodape {
  position: relative; z-index: 1;
  border-top: 1px solid var(--cloud);
  padding: 34px 20px 40px;
  text-align: center;
}

.tv-rodape__autor {
  font-family: var(--rotulo);
  font-size: 10px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ink-dim);
  display: block; margin-bottom: 8px;
}

.tv-rodape__serie {
  font-family: var(--rotulo);
  font-size: 8px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--silver);
}

/* ══════════════════════════════════════════
   15. REVELACAO SUAVE  (so com JS)
══════════════════════════════════════════ */

.js .tv-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .tv-reveal.tv-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .tv-reveal { opacity: 1; transform: none; transition: none; }
  .tv-btn { transition: none; }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════
   16. TELAS PEQUENAS
══════════════════════════════════════════ */

@media (max-width: 720px) {
  .tv-hero { padding: 48px 22px 42px; }
  .tv-leitura__painel { padding-left: 20px; padding-right: 20px; }
  .tv-texto-livro { font-size: 15.5px; }
  .tv-oferta__card { padding: 34px 22px; }
  .tv-garantias { gap: 18px; }
  .tv-arco__fio { width: 18px; }
}


/* ══════════════════════════════════════════
   ESPESSURA DAS MARCAS
   As cores do .com sao claras. Estes ajustes dao corpo as marcas
   finas sem alterar nenhuma cor. Para deixar mais forte, suba os
   valores de height, font-weight e -webkit-text-stroke.
══════════════════════════════════════════ */

.tv-cap-linha      { height: 2px; }
.tv-oferta__card::before { height: 3px; }
.tv-autor-fio      { height: 2px; }
.tv-fim            { font-weight: 700; font-size: 15px; }
.tv-pergunta summary::after { font-weight: 700; }
.tv-oferta__itens li::before { font-weight: 700; }
.tv-seta           { font-weight: 700; }
.tv-virada__fundo  { opacity: .16; }


/* ══════════════════════════════════════════
   PRESENCA DA COR — nivel B+
   A cor do livro entra em elementos GRAFICOS e em letra grande.
   Nao entra em rotulo pequeno: as cores do .com sao claras demais
   para carregar texto sobre nevoa (contraste 1,6 a 2,9).
   Para tirar qualquer item, apague a linha correspondente.
══════════════════════════════════════════ */

/* hero — o fio abaixo do arco e a moldura da pilula */
.tv-hero__arco { border-bottom: 2px solid var(--el); }
.tv-pilula     { border-color: var(--el); }

/* leitura — fio no topo do painel e capitular na cor do livro */
.tv-leitura__painel { border-top: 2px solid var(--el); }
.tv-texto-livro p:first-of-type::first-letter { color: var(--el); }
.tv-cap-linha { width: 56px; height: 2px; }

/* virada — fio acima do hook, no lugar de tingir o fundo */
.tv-virada::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 3px;
  background: var(--el);
  z-index: 1;
}

/* oferta — fio do topo do card e moldura da capa */
.tv-oferta__card::before { width: 88px; height: 3px; }
.tv-oferta__capa { border-color: var(--el); border-width: 2px; }

/* autor — fio no topo do bloco */
.tv-autor-bloco { border-top: 2px solid var(--el); }
.tv-autor-fio   { width: 56px; }

/* perguntas — o sinal de abrir */
.tv-pergunta summary::after { font-size: 15px; }

/* fecho — fio no topo da faixa e o fio central do arco */
.tv-fecho { border-top: 2px solid var(--el); }
.tv-arco__fio { background: var(--el); height: 2px; margin-top: 21px; }

/* ══════════════════════════════════════════
   17. UTILITARIOS
══════════════════════════════════════════ */

.tv-centro { text-align: center; }
.tv-espaco { height: 28px; }

.tv-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}