/* Convite do Criativos S/A. A mesma língua das peças do brand guide: Manrope, uma família de cor por episódio
   (as variáveis --a a --e vêm de site/guia/paleta.js pelo convite.js), painel de cor em faixas, a foto recortada
   sobre um palco claro na família (degradê suave e um círculo atrás da cabeça), nome em caixa alta e as barras /// em DotGothic16. Feita primeiro para o celular. */

:root {
  --fundo: #F5F4F7; --papel: #FFFFFF; --tinta: #17161C; --suave: #5E5B68; --apagado: #8E8A98; --linha: #E4E2EA;
  --certo: #2E9E6E; --raio: 18px;
  --a: #FA3D85; --b: #FF9CC2; --c: #FF8A2E; --d: #B08BFF; --e: #DE1A68;
  --k: color-mix(in srgb, var(--e) 68%, var(--tinta));
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: Manrope, system-ui, sans-serif; font-size: 17px; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.barras { font-family: DotGothic16, monospace; font-style: normal; letter-spacing: 0.02em; margin-right: 0.45em; }

/* ---------- painel de cor: faixas, círculo, coluna, bloco, luz e grão ---------- */
.faixas { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(165deg, var(--a), var(--e) 125%); }
.faixas span { position: absolute; }
.fx1, .fx2, .fx3, .fx4 { top: 0; bottom: 0; width: 25%; }
.fx1 { left: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--b) 55%, var(--a)), var(--a) 55%); }
.fx2 { left: 25%; background: linear-gradient(0deg, var(--e), var(--a) 75%); opacity: 0.9; }
.fx3 { left: 50%; background: linear-gradient(180deg, var(--a), color-mix(in srgb, var(--e) 70%, var(--a))); }
.fx4 { left: 75%; background: linear-gradient(0deg, color-mix(in srgb, var(--d) 45%, var(--a)), var(--a) 80%); }
.circulo { right: -18%; top: -46%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(200deg, var(--b), var(--a) 72%); opacity: 0.85; }
.coluna { left: 50%; top: 0; height: 46%; width: 25%; background: linear-gradient(180deg, var(--d), transparent); opacity: 0.45; }
.bloco { left: 25%; top: 0; width: 25%; height: 22%; background: linear-gradient(180deg, var(--b), transparent); opacity: 0.4; }
.luz { left: -30%; bottom: -55%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: var(--d); filter: blur(70px); opacity: 0.5; }
.grao { position: absolute; inset: 0; opacity: 0.2; mix-blend-mode: overlay; pointer-events: none; }

/* ---------- palco: o fundo das fotos recortadas ----------
   No lugar do cinza (Mano, 03/11/2026: "muito artificial"), a linguagem das peças da Lenóra: a pessoa recortada
   sobre a cor da família, com um círculo grande em degradê atrás da cabeça e uma luz desfocada embaixo.
   --pa a --pe são os tons da família (principal, clara, destaque, lilás e funda); por padrão, os da página. */
.palco { --pa: var(--a); --pb: var(--b); --pc: var(--c); --pd: var(--d); --pe: var(--e); isolation: isolate;
  background: linear-gradient(165deg, var(--pa), var(--pe) 125%); }
.palco::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 12%; width: min(84%, 560px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: linear-gradient(205deg, var(--pc) 0%, var(--pb) 48%, var(--pd) 100%); }
.palco::after { content: ""; position: absolute; z-index: -1; left: -22%; bottom: -38%; width: 75%; aspect-ratio: 1; border-radius: 50%;
  background: var(--pd); filter: blur(60px); opacity: 0.55; }
.palco img { filter: drop-shadow(0 16px 28px rgba(23, 22, 28, 0.22)); }

/* ---------- capa: foto no palco em cima, painel de cor embaixo (no celular) ---------- */
.capa { display: grid; }
.capa-foto { position: relative; overflow: hidden; height: min(62svh, 560px); min-height: 360px;
   }
.capa-topo { position: absolute; z-index: 2; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; }
/* logo que entra escrevendo: o vídeo da Lenóra recortado na faixa do logo (quadro de 1920 x 1080; o logo
   assentado ocupa de x 476 a 1453 e de y 460 a 612; a janela vai de x 440 a 1490 e de y 400 a 660) */
.logo-anim { position: relative; display: inline-block; aspect-ratio: 1050 / 260; overflow: hidden; }
.logo-anim .logo-fixo { position: absolute; left: 3.4%; top: 23%; width: 93.1%; height: auto; }
.logo-anim video { position: absolute; width: 182.857%; left: -41.905%; top: -153.85%; max-width: none; pointer-events: none; }
.logo-anim.branco video { filter: brightness(0) invert(1); }
.logo-anim video { opacity: 0; }
.logo-anim.com-video video { opacity: 1; }
.logo-anim .logo-fixo { animation: escreve 1.3s 0.2s steps(14, end) both; }
.logo-anim.esperando .logo-fixo, .logo-anim.com-video .logo-fixo { opacity: 0; animation: none; }
@keyframes escreve { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.logo-mob { width: 152px; }
.capa-topo .rotulo { margin: 0; color: #FFFFFF; opacity: 0.9; }
.recorte { position: absolute; bottom: 0; left: 50%; translate: -50% 0; height: 90%; width: auto; max-width: none; }
/* convite para dois: a montagem é horizontal, então vale a largura, não a altura */
.recorte.dupla { height: auto; width: 116%; }
.redonda { position: absolute; left: 50%; top: 54%; translate: -50% -50%; width: min(62%, 280px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.balao { position: absolute; z-index: 2; right: 16px; bottom: 18px; background: var(--papel); color: var(--tinta); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px -12px rgba(23, 22, 28, 0.45); }
.balao::before { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; background: var(--papel); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }

/* convite para dois: os balões empilhados no canto da foto */
.baloes { position: absolute; z-index: 2; right: 16px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.baloes .balao { position: relative; right: auto; bottom: auto; }
.baloes .balao::before { display: none; }

.capa-cor { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; padding: 40px 24px 32px; }
.logo-desk { display: none !important; }
.nome { margin: 0; font-size: clamp(60px, 17vw, 132px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.9; text-transform: uppercase; }
/* Texto pequeno sobre a cor: branco, em negrito e a partir de 20 px, para valer também no teal e no verde. */
.capa-cor p, .og-cor p { color: #FFFFFF; }
.tema { margin: 20px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.linha-data { display: flex; align-items: center; gap: 16px; margin-top: 28px; font-size: clamp(38px, 10vw, 72px); letter-spacing: -0.045em; line-height: 1; }
.linha-data b { font-weight: 400; }
.traco { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.9); border-radius: 2px; transform-origin: left; animation: risca 1.1s 0.85s cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes risca { from { transform: scaleX(0); } }

/* ---------- corpo ---------- */
.corpo { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.rotulo { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apagado); }
h2 { margin: 0 0 16px; font-size: clamp(30px, 6vw, 50px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
p { margin: 0 0 16px; color: var(--suave); }
.carta { padding: 56px 0 64px; max-width: 760px; }
.lead { font-size: clamp(20px, 3vw, 24px); line-height: 1.45; font-weight: 500; color: var(--tinta); letter-spacing: -0.01em; }
.texto { max-width: 760px; }
.bloco-sec { padding: 56px 0; border-top: 1px solid var(--linha); }
.carta + .bloco-sec { padding-top: 56px; }
.nota { font-size: 15px; color: var(--apagado); margin: 20px 0 0; }

.cartoes { display: grid; gap: 14px; margin-top: 28px; }
.cartao { background: var(--papel); border-radius: var(--raio); padding: 24px; }
.cartao p { font-size: 16px; margin: 0; }
.k { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k); }

/* quem vem: um cartão por pessoa, com a foto, o que faz e o Instagram */
.quem { display: grid; gap: 14px; margin-top: 28px; }
.pessoa { display: flex; align-items: center; gap: 18px; }
.pessoa-foto { width: 88px; height: 88px; flex: none; border-radius: 50%; overflow: hidden;
   }
.pessoa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

/* retratos: os hosts (com bio) e o lineup da temporada, foto recortada sobre o palco claro */
.retratos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.retrato { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.retrato-foto { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.retrato-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.retrato-texto { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.retrato h3 { font-size: 17px; margin-bottom: 4px; }
.retrato .papel { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--k); line-height: 1.35; }
.retrato p { font-size: 15px; margin: 0 0 12px; }
.igs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; }
.igs .ig { font-size: 13px; overflow-wrap: anywhere; }
.retratos.dois .retrato h3 { font-size: 20px; }
.pessoa h3 { margin-bottom: 2px; }
.pessoa p { margin: 0 0 8px; }
.ig { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--k); text-decoration: none; }
.ig svg { width: 17px; height: 17px; }

/* a pergunta, de ponta a ponta, sobre o painel de cor */
.pergunta { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; padding: 72px 20px 80px; }
.pergunta .circulo { right: -30%; top: -80%; width: 70%; }
.pergunta-texto { max-width: 1040px; margin: 0 auto; }
.pergunta .rotulo { display: inline-block; background: var(--papel); color: var(--tinta); padding: 7px 14px; border-radius: 999px; margin-bottom: 24px; }
.frase { margin: 0; max-width: 920px; color: #FFFFFF; font-size: clamp(32px, 6.6vw, 64px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }

.blocos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.blocos li { background: var(--papel); border-radius: var(--raio); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.blocos span { font-family: DotGothic16, monospace; color: var(--k); font-size: 15px; }
.blocos b { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.blocos small { font-size: 14px; color: var(--suave); line-height: 1.4; }

/* ---------- quando e onde ---------- */
.agenda { display: grid; gap: 14px; margin-top: 28px; }
.quando { display: flex; flex-direction: column; align-items: flex-start; }
.quando .dia { margin: 0; font-size: 22px; font-weight: 600; color: var(--tinta); letter-spacing: -0.02em; line-height: 1.3; }
.quando .hora { margin: 6px 0 20px; font-size: clamp(76px, 18vw, 112px); font-weight: 500; letter-spacing: -0.055em; line-height: 0.95; color: var(--tinta); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.ok { background: color-mix(in srgb, var(--certo) 14%, #FFFFFF); color: #1F7A53; }
.chip.espera { background: color-mix(in srgb, var(--a) 16%, #FFFFFF); color: var(--k); }
.chip.espera::before { animation: pisca 1.6s ease-in-out infinite; }
.quando .aviso { margin: 14px 0 24px; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.botao { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--linha);
  background: var(--papel); color: var(--tinta); font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1.2; transition: transform 0.15s ease, background 0.15s ease; }
.botao:hover { transform: translateY(-1px); }
.botao.forte { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }
.botao svg { width: 18px; height: 18px; flex: none; }
.carta .botao { margin-top: 8px; }

.lugar { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* a foto do estúdio inteira, sem corte, para o vídeo cair certinho na tela da TV */
.estudio-foto { position: relative; aspect-ratio: 1600 / 982; overflow: hidden; }
.estudio { width: 100%; height: 100%; object-fit: cover; }
.estudio-tv { position: absolute; object-fit: cover; }
.lugar-texto { padding: 24px; display: flex; flex-direction: column; flex: 1; }
address { font-style: normal; color: var(--tinta); font-size: 16px; line-height: 1.55; margin: 6px 0 14px; }
.lugar .sobre { font-size: 15px; margin-bottom: 24px; }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta); color: #FFFFFF; text-align: center; padding: 56px 20px 64px; margin-top: 24px; }
.fecho { margin: 0 0 28px; color: #FFFFFF; font-size: clamp(20px, 3.4vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.assinatura { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.assinatura span { font-size: 14px; color: #B9B6C2; }
.logo-pe { height: 22px; width: auto; }
.so-desk { display: none; }

.vazio { padding: 120px 20px; text-align: center; }

/* ---------- entrada ---------- */
.entra { animation: sobe 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.recorte.entra { animation-duration: 1.1s; }
.capa-texto .tema, .capa-texto .linha-data b, .balao { animation: sobe 0.9s 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.capa-texto .linha-data b:last-child { animation-delay: 1.05s; }
.baloes .balao:nth-child(2) { animation-delay: 0.75s; }
.letreiro .linha { display: block; overflow: hidden; padding-top: 0.04em; }
.letreiro .linha > span { display: inline-block; animation: sobe-linha 0.95s cubic-bezier(0.2, 0.75, 0.2, 1) both; animation-delay: calc(0.15s + var(--i) * 0.13s); }
@keyframes sobe-linha { from { transform: translateY(105%); } }
.barras b { font-weight: inherit; }
.capa-texto .barras b, .og .barras b { animation: aparece 0.01s both; }
.capa-texto .barras b:nth-child(1) { animation-delay: 0.7s; }
.capa-texto .barras b:nth-child(2) { animation-delay: 0.82s; }
.capa-texto .barras b:nth-child(3) { animation-delay: 0.94s; }
@keyframes aparece { from { opacity: 0; } }
.og .barras b { animation: none; }

/* as formas do painel de cor respiram devagar, como no loop da TV */
.capa-cor .circulo, .pergunta .circulo { animation: flutua 16s ease-in-out infinite alternate; }
.capa-cor .luz, .pergunta .luz { animation: deriva 21s ease-in-out infinite alternate; }
.capa-cor .coluna, .pergunta .coluna { animation: respira 9s ease-in-out infinite alternate; }
@keyframes flutua { to { transform: translate(-5%, 6%) scale(1.06); } }
@keyframes deriva { to { transform: translate(22%, -12%); } }
@keyframes respira { to { opacity: 0.2; height: 64%; } }

/* entra quando aparece na rolagem (o convite.js marca com data-revela e põe .visto) */
[data-revela] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
[data-revela].visto { opacity: 1; transform: none; }
/* títulos e a frase da pergunta: palavra por palavra */
.letrado .pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.letrado .pal > span { display: inline-block; transform: translateY(110%); transition: transform 0.85s cubic-bezier(0.2, 0.75, 0.2, 1); transition-delay: calc(var(--i) * 55ms + 80ms); }
.letrado.visto .pal > span { transform: none; }
.retrato-foto img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.retrato:hover .retrato-foto img { transform: scale(1.04); }
@keyframes sobe { from { opacity: 0; transform: translateY(22px); } }
@keyframes pisca { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before { animation: none !important; transition: none !important; }
}

/* ---------- telas maiores: painel de cor à esquerda, foto à direita (a capa B) ---------- */
@media (min-width: 760px) {
  .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .retratos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .retratos.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .retrato-texto { padding: 20px 20px 22px; }
  .igs .ig { font-size: 14px; }
  .blocos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .agenda { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (min-width: 960px) {
  .capa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(88vh, 780px); }
  .capa-cor { order: 1; padding: 0 56px 56px; display: flex; flex-direction: column; justify-content: flex-end; }
  .capa-foto { order: 2; height: auto; min-height: 0; }
  .logo-desk { display: inline-block !important; position: absolute; top: 32px; left: 49px; width: 217px; }
  .logo-mob { visibility: hidden; }
  .so-desk { display: inline; }
  .capa-topo { padding: 40px 40px 0; }
  .recorte { height: 86%; }
  .recorte.dupla { width: auto; height: 68%; }
  .balao { right: auto; left: 40px; bottom: 40px; font-size: 16px; }
  .balao::before { display: none; }
  .baloes { right: auto; left: 40px; bottom: 40px; align-items: flex-start; }
  .baloes .balao { left: auto; bottom: auto; }
  .tema { font-size: 24px; }
  .carta { padding: 88px 0 80px; }
  .bloco-sec { padding: 80px 0; }
  .pergunta { padding: 112px 20px 120px; }
}

/* ---------- cartão da prévia (?og=1): 1200 x 630 ---------- */
body.modo-og { background: #000; }
.og { width: 1200px; height: 630px; display: grid; grid-template-columns: 640px 560px; overflow: hidden; }
.og-cor { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; }
.og-logo { position: absolute; top: 52px; left: 56px; height: 34px; width: auto; }
.og-texto { position: absolute; left: 56px; right: 40px; bottom: 54px; }
.og-rotulo { margin: 0 0 14px; color: #FFFFFF; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.og .nome { font-size: 118px; }
.og .tema { font-size: 30px; margin-top: 22px; }
.og-foto { position: relative; overflow: hidden; }
.og .recorte { height: 94%; }
.og-dupla { grid-template-columns: 520px 680px; }
.og-dupla .recorte.dupla { width: 100%; height: auto; }