@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap");
/* José Antonio Preti: estilos dos componentes. Todas as cores, espaços e raios vêm de tokens.css. Prefixo de classe: jp- */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-texto); font-size: 17px; line-height: 1.65; background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

.jp-container { width: 100%; max-width: calc(var(--largura-conteudo) + 2 * var(--espaco-5)); margin-inline: auto; padding-inline: max(var(--espaco-4), env(safe-area-inset-left, 0px)); }
@media (min-width: 768px) { .jp-container { padding-inline: var(--espaco-5); } }
.jp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jp-icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Botão */
.jp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); height: 44px; padding: 0 var(--espaco-5); border: 1px solid transparent; border-radius: var(--raio-2); font: 600 15px/1 var(--font-texto); letter-spacing: 0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao); }
.jp-btn .jp-icone { width: 18px; height: 18px; transition: transform var(--duracao-rapida) var(--curva-padrao); }
.jp-btn:hover .jp-icone-seta { transform: translateX(3px); }
.jp-btn-primario { background: var(--acao); color: var(--sobre-acao); }
.jp-btn-primario:hover { background: var(--acao-hover); }
.jp-btn-secundario { background: transparent; color: var(--texto); border-color: var(--linha-forte); }
.jp-btn-secundario:hover { border-color: var(--texto); }
.jp-btn-texto { background: transparent; color: var(--destaque-texto); padding: 0 var(--espaco-2); }
.jp-btn-texto:hover { text-decoration: underline; text-underline-offset: 4px; }
.jp-btn-pequeno { height: 36px; padding: 0 var(--espaco-4); font-size: 14px; }
.jp-btn:disabled, .jp-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Tag de editoria */
.jp-tag { display: inline-flex; align-items: center; gap: var(--espaco-1); padding: 5px var(--espaco-2) 4px; border-radius: var(--raio-1); font: 600 11px/1 var(--font-marca); letter-spacing: 0.12em; text-transform: uppercase; background: var(--destaque-suave); color: var(--destaque-texto); text-decoration: none; white-space: nowrap; }
.jp-tag-contorno { background: transparent; box-shadow: inset 0 0 0 1px var(--linha-forte); color: var(--texto); }
a.jp-tag:hover { background: var(--destaque-texto); color: var(--fundo); }

/* Logo e pattern */
.jp-logo { display: block; width: auto; flex: none; }
.jp-pattern { display: block; width: 100%; height: 100%; }

/* Sobretítulo e título de seção */
.jp-sobretitulo { margin: 0; font: 600 13px/16px var(--font-marca); letter-spacing: 0.14em; text-transform: uppercase; color: var(--destaque-texto); }
.jp-secao-titulo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--espaco-3) var(--espaco-5); padding-bottom: var(--espaco-4); border-bottom: 1px solid var(--linha); }
.jp-secao-titulo > div { display: grid; gap: var(--espaco-2); min-width: 0; }
.jp-secao-titulo h2 { margin: 0; font: 600 30px/38px var(--font-marca); letter-spacing: 0.02em; text-transform: uppercase; color: var(--texto); text-wrap: balance; }
@media (max-width: 767px) { .jp-secao-titulo h2 { font-size: 24px; line-height: 30px; } }

/* Cabeçalho */
.jp-cabecalho { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-cabecalho); background: var(--fundo); border-bottom: 1px solid var(--linha); }
.jp-cabecalho-in { display: flex; align-items: center; gap: var(--espaco-5); height: 72px; }
.jp-cabecalho-marca { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin-right: auto; color: inherit; }
.jp-cabecalho-marca .jp-logo { width: 100%; max-width: 351px; min-width: 0; height: auto !important; }
.jp-nav { display: flex; align-items: center; gap: var(--espaco-1); }
.jp-nav a { position: relative; padding: var(--espaco-2) var(--espaco-3); font: 500 15px/24px var(--font-texto); color: var(--texto); text-decoration: none; border-radius: var(--raio-2); }
.jp-nav a:hover { color: var(--destaque-texto); }
.jp-nav a[aria-current="page"]::after { content: ""; position: absolute; left: var(--espaco-3); right: var(--espaco-3); bottom: 2px; height: 2px; background: var(--destaque); }
.jp-icone-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--raio-2); background: transparent; color: var(--texto); cursor: pointer; }
.jp-icone-btn:hover { background: var(--fundo-alt); }
.jp-menu-btn { display: none; }
@media (max-width: 1023px) {
  .jp-cabecalho-in { height: 64px; gap: var(--espaco-1); }
  .jp-cabecalho-marca .jp-logo { max-width: 260px; }
  .jp-menu-btn { display: inline-grid; }
  .jp-cabecalho .jp-nav, .jp-cabecalho .jp-cabecalho-cta { display: none; }
  .jp-cabecalho[data-aberto="true"] .jp-nav { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-menu); padding: var(--espaco-3) var(--espaco-4) var(--espaco-5); background: var(--fundo); border-bottom: 1px solid var(--linha); box-shadow: var(--sombra-3); }
  .jp-cabecalho[data-aberto="true"] .jp-nav a { padding: var(--espaco-3); font-size: 17px; }
}

/* Capa (hero) */
.jp-capa { position: relative; overflow: hidden; background: var(--fundo); color: var(--texto); }
.jp-capa-in { position: relative; display: grid; gap: var(--espaco-5); padding-block: var(--espaco-8); max-width: calc(var(--largura-conteudo) + 2 * var(--espaco-5)); }
.jp-capa-texto { display: grid; gap: var(--espaco-5); max-width: 620px; min-width: 0; }
.jp-capa h1 { margin: 0; font: 600 40px/44px var(--font-marca); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
.jp-capa h1 em { font-style: normal; color: var(--destaque); }
.jp-capa-linha-fina { margin: 0; font: 400 19px/32px var(--font-texto); color: var(--texto-suave); }
.jp-capa-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); }
.jp-capa-arte { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; color: var(--destaque); opacity: 0.9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); pointer-events: none; }
@media (max-width: 767px) { .jp-capa-arte { width: 100%; height: 96px; top: auto; opacity: 0.35; } .jp-capa-in { padding-bottom: calc(96px + var(--espaco-6)); } }
@media (min-width: 1024px) { .jp-capa-in { padding-block: var(--espaco-10); } .jp-capa h1 { font-size: 64px; line-height: 68px; } }

/* Cartão de artigo */
.jp-cartao { position: relative; display: grid; gap: var(--espaco-3); align-content: start; min-width: 0; color: var(--texto); }
.jp-cartao-midia { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: var(--raio-3); background: var(--jp-azul-escuro); color: var(--jp-verde-agua); }
.jp-cartao-midia img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duracao-base) var(--curva-padrao); }
.jp-cartao:hover .jp-cartao-midia img { transform: scale(1.03); }
.jp-cartao-meta-topo { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; margin-top: var(--espaco-1); }
.jp-cartao h3 { margin: 0; font: 650 20px/28px var(--font-texto); letter-spacing: -0.005em; text-wrap: balance; }
.jp-cartao h3 a { color: inherit; text-decoration: none; }
.jp-cartao h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio-3); }
.jp-cartao:hover h3 a { color: var(--destaque-texto); }
.jp-cartao-resumo { margin: 0; font: 400 15px/24px var(--font-texto); color: var(--texto-suave); }
.jp-cartao-meta { margin: 0; font: 500 13px/20px var(--font-texto); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.jp-cartao-destaque { gap: var(--espaco-4); }
.jp-cartao-destaque h3 { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 768px) { .jp-cartao-destaque { grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--espaco-6); } .jp-cartao-destaque .jp-cartao-midia { grid-row: span 4; } }
.jp-grade { display: grid; gap: var(--espaco-6) var(--espaco-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Texto de artigo */
.jp-prosa { max-width: var(--largura-texto); font: 400 17px/28px var(--font-texto); color: var(--texto); }
.jp-prosa > * + * { margin-top: var(--espaco-5); }
.jp-prosa > :first-child { margin-top: 0; }
.jp-prosa .jp-prosa-abertura { font-size: 19px; line-height: 32px; }
.jp-prosa h2 { margin: var(--espaco-7) 0 0; font: 700 24px/32px var(--font-texto); letter-spacing: -0.01em; text-wrap: balance; }
.jp-prosa h3 { margin: var(--espaco-6) 0 0; font: 650 20px/28px var(--font-texto); }
.jp-prosa p, .jp-prosa ul, .jp-prosa ol { margin-bottom: 0; }
.jp-prosa a { color: var(--destaque-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jp-prosa a:hover { text-decoration-thickness: 2px; }
.jp-prosa ul, .jp-prosa ol { padding-left: var(--espaco-5); }
.jp-prosa li + li { margin-top: var(--espaco-2); }
.jp-prosa li::marker { color: var(--destaque); }
.jp-prosa strong { font-weight: 650; }
.jp-prosa code { font: 400 0.88em/1 var(--font-mono); padding: 2px 6px; border-radius: var(--raio-1); background: var(--fundo-alt); }
.jp-prosa pre { overflow-x: auto; padding: var(--espaco-4) var(--espaco-5); border-radius: var(--raio-2); background: var(--jp-azul-escuro); color: var(--jp-branco); font: 400 14px/22px var(--font-mono); }
.jp-prosa pre code { padding: 0; background: none; font-size: inherit; }
.jp-prosa figure { margin-inline: 0; }
.jp-prosa figure img { display: block; width: 100%; border-radius: var(--raio-3); }
.jp-prosa figcaption { margin-top: var(--espaco-2); font: 500 13px/20px var(--font-texto); color: var(--texto-suave); }
.jp-prosa hr { border: 0; height: 1px; background: var(--linha); margin-block: var(--espaco-7); }

/* Citação */
.jp-citacao { position: relative; margin: 0; padding: var(--espaco-6) var(--espaco-5) var(--espaco-5); border-radius: var(--raio-3); background: var(--fundo-alt); }
.jp-citacao::before { content: "\201C"; position: absolute; top: -6px; left: var(--espaco-5); font: 600 72px/1 var(--font-marca); color: var(--destaque); }
.jp-citacao p { margin: 0; font: 500 21px/32px var(--font-texto); letter-spacing: -0.005em; color: var(--texto); text-wrap: pretty; }
.jp-citacao footer { margin-top: var(--espaco-3); font: 500 13px/20px var(--font-texto); color: var(--texto-suave); }
.jp-citacao cite { font-style: normal; font-weight: 650; color: var(--texto); }

/* Aviso */
.jp-aviso { display: flex; gap: var(--espaco-3); align-items: flex-start; padding: var(--espaco-4); border-radius: var(--raio-2); font: 400 15px/24px var(--font-texto); color: var(--texto); }
.jp-aviso .jp-icone { margin-top: 2px; }
.jp-aviso strong { font-weight: 650; }
.jp-aviso-info { background: var(--destaque-suave); } .jp-aviso-info .jp-icone, .jp-aviso-info strong { color: var(--destaque-texto); }
.jp-aviso-sucesso { background: var(--sucesso-suave); } .jp-aviso-sucesso .jp-icone, .jp-aviso-sucesso strong { color: var(--sucesso); }
.jp-aviso-alerta { background: var(--alerta-suave); } .jp-aviso-alerta .jp-icone, .jp-aviso-alerta strong { color: var(--alerta); }
.jp-aviso-erro { background: var(--erro-suave); } .jp-aviso-erro .jp-icone, .jp-aviso-erro strong { color: var(--erro); }

/* Campo de texto */
.jp-campo { display: grid; gap: 6px; min-width: 0; }
.jp-campo label { font: 600 14px/20px var(--font-texto); color: var(--texto); }
.jp-campo input, .jp-campo textarea { width: 100%; min-height: 44px; padding: 10px var(--espaco-3); border: 1px solid var(--linha-forte); border-radius: var(--raio-2); background: var(--superficie); color: var(--texto); font: 400 16px/22px var(--font-texto); transition: border-color var(--duracao-rapida) var(--curva-padrao); }
.jp-campo input::placeholder, .jp-campo textarea::placeholder { color: var(--texto-suave); opacity: 1; }
.jp-campo input:hover, .jp-campo textarea:hover { border-color: var(--texto); }
.jp-campo input:focus-visible, .jp-campo textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); }
.jp-campo-ajuda { margin: 0; font: 500 13px/20px var(--font-texto); color: var(--texto-suave); }
.jp-campo[data-erro] input, .jp-campo[data-erro] textarea { border-color: var(--erro); }
.jp-campo[data-erro] .jp-campo-ajuda { color: var(--erro); }

/* Newsletter */
.jp-newsletter { position: relative; overflow: hidden; border-radius: var(--raio-3); background: var(--fundo); color: var(--texto); }
.jp-newsletter-in { position: relative; display: grid; gap: var(--espaco-4); padding: var(--espaco-7) var(--espaco-5); max-width: 640px; }
.jp-newsletter h2 { margin: 0; font: 600 30px/38px var(--font-marca); letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; }
.jp-newsletter p:not(.jp-sobretitulo) { margin: 0; color: var(--texto-suave); font: 400 17px/28px var(--font-texto); }
.jp-newsletter form { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: flex-end; }
.jp-newsletter .jp-campo { flex: 1 1 260px; }
.jp-newsletter-arte { position: absolute; top: 0; right: 0; bottom: 0; width: 34%; color: var(--destaque); opacity: 0.85; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
@media (max-width: 767px) { .jp-newsletter-arte { display: none; } }
@media (min-width: 768px) { .jp-newsletter-in { padding: var(--espaco-8) var(--espaco-7); } }

/* Rodapé */
.jp-rodape { background: var(--fundo); color: var(--texto); padding-block: var(--espaco-8) var(--espaco-6); }
.jp-rodape-topo { display: grid; gap: var(--espaco-7); grid-template-columns: 1fr; }
@media (min-width: 768px) { .jp-rodape-topo { grid-template-columns: 1.4fr 1fr 1fr; } }
.jp-rodape-bio { display: grid; gap: var(--espaco-4); align-content: start; max-width: 380px; }
.jp-rodape-bio .jp-logo { width: 351px; max-width: 100%; height: auto !important; }
.jp-rodape-bio p { margin: 0; font: 400 15px/24px var(--font-texto); color: var(--texto-suave); }
.jp-rodape h2 { margin: 0 0 var(--espaco-3); font: 600 12px/16px var(--font-marca); letter-spacing: 0.14em; text-transform: uppercase; color: var(--destaque-texto); }
.jp-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); }
.jp-rodape ul a { font: 500 15px/24px var(--font-texto); color: var(--texto); text-decoration: none; }
.jp-rodape ul a:hover { color: var(--destaque-texto); }
.jp-rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espaco-3); margin-top: var(--espaco-7); padding-top: var(--espaco-5); border-top: 1px solid var(--linha); font: 500 13px/20px var(--font-texto); color: var(--texto-suave); }

/* Usado só nas prévias */
.jp-previa { padding: var(--espaco-5); display: flex; flex-wrap: wrap; gap: var(--espaco-4); align-items: center; }
.jp-previa-col { padding: var(--espaco-5); display: grid; gap: var(--espaco-4); }