/* Black PSI Global Infinity 2026 · página interna (alunas)
   Conceito: "de dentro", à noite. Vinho quase preto, tinta marfim, ouro no ∞ e nos detalhes. */

:root {
  --papel: #120509;
  --superficie: #1E080E;
  --tinta: #F3EADF;
  --tinta-suave: #B9A7A1;
  --vinho: #7A0E24;
  --vinho-vivo: #A8193A;
  --vinho-fundo: #3E0914;
  --vinho-claro: #8A1A2E;
  --breu: #070204;
  --ouro: #C9AE74;
  --ouro-vivo: #E2C98E;
  --caneta: #EE6A82;
  --erro: #FF8A9A;
  --linha: rgba(243, 234, 223, 0.14);

  --display: "Libre Caslon Display", "Times New Roman", serif;
  --mao: "Libre Caslon Text", Georgia, serif;
  --texto: "Hanken Grotesk", system-ui, sans-serif;

  /* escala: 13 / 16 / 19 / 24 / 34 / 52 / 84 */
  --t-rotulo: 0.8125rem;
  --t-corpo: 1rem;
  --t-lead: 1.1875rem;
  --t-m: 1.5rem;
  --t-l: clamp(1.75rem, 3.2vw, 2.125rem);
  --t-xl: clamp(2.25rem, 4.6vw, 3.25rem);
  --t-xxl: clamp(2.5rem, 6vw, 5.25rem);

  /* espaço: 8 / 16 / 24 / 40 / 64 / 104 / 168 */
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 104px; --e7: 168px;
  --gutter: clamp(16px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: -0.01em; }
p { margin: 0; }
strong { font-weight: 600; }
::selection { background: var(--vinho-vivo); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--ouro-vivo); outline-offset: 3px; }

.rotulo, .selo {
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rotulo { color: var(--ouro-vivo); }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  color: currentColor;
  transition: background .4s ease, box-shadow .4s ease;
}
.topo.rolou { background: color-mix(in srgb, var(--fx-fundo, var(--papel)) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--linha); }
.topo__marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.topo__marca img { width: 22px; height: auto; }
.topo__data { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; border: 1px solid currentColor; border-radius: 99px; padding: 4px 12px; opacity: .8; }

/* ---------- CENA 1 · a carta ---------- */
.carta { padding: 190px var(--gutter) var(--e6); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.carta__grade {
  width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}

.folha {
  position: relative;
  background: var(--superficie);
  padding: clamp(64px, 7vw, 96px) clamp(24px, 4.5vw, 64px) clamp(32px, 4vw, 56px);
  border: 1px solid rgba(226, 201, 142, .16);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
  perspective: 1400px;
}
/* a aba do envelope: fechada ao carregar, abre para trás */
.folha__aba {
  position: absolute; left: 0; right: 0; top: 0; height: 104px;
  transform-origin: top center;
  transform-style: preserve-3d;
  z-index: 3;
  pointer-events: none;
  animation: abrir-aba 1.3s cubic-bezier(.65,0,.35,1) .35s both;
}
.folha__aba::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--vinho-claro), var(--vinho));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
}
.folha__aba::after { /* o lado de dentro da aba, visto aberto */
  content: ""; position: absolute; inset: 0;
  background: var(--vinho-fundo);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: rotateX(180deg);
  backface-visibility: hidden;
}
.folha__lacre {
  position: absolute; left: 50%; top: 100%;
  width: 54px; height: 54px; margin: -40px 0 0 -27px;
  border-radius: 50%; background: var(--vinho-claro);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 3px rgba(226, 201, 142, .35), 0 4px 10px rgba(0,0,0,.25);
  backface-visibility: hidden;
  z-index: 2;
}
.folha__lacre img { width: 24px; }
@keyframes abrir-aba {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(-178deg); }
}
.folha__foto {
  position: absolute; right: clamp(-28px, -2vw, -12px); top: -36px; width: clamp(150px, 17vw, 220px);
  padding: 8px 8px 26px; background: #fff;
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .7);
  transform: rotate(4deg);
  z-index: 4;
  animation: foto-pousa 1s cubic-bezier(.22,1,.36,1) 1.3s both;
}
@keyframes foto-pousa { from { opacity: 0; transform: translateY(-24px) rotate(10deg); } }

.selo { color: var(--ouro-vivo); display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--e3); }
.selo::before { content: "∞"; font-family: var(--display); font-size: 1.4em; letter-spacing: 0; line-height: 1; color: var(--ouro); }
.selo--claro { color: var(--ouro-vivo); }

.folha__titulo { font-size: var(--t-xl); max-width: 17ch; margin-bottom: var(--e4); }
.folha__texto { font-size: var(--t-lead); color: var(--tinta-suave); max-width: 52ch; }
.folha__texto + .folha__texto { margin-top: var(--e2); }
.folha__texto strong { color: var(--ouro-vivo); }

/* reserva: cartão + formulário */
.reserva { display: flex; flex-direction: column; gap: var(--e4); }

/* ---------- movimento-assinatura · cartão de aluna ---------- */
.cartao {
  --gx: 0deg; --gy: 0deg;
  width: 100%; max-width: 420px; aspect-ratio: 85.6 / 54;
  perspective: 900px;
  margin: 0 auto;
}
.cartao__face {
  position: relative; height: 100%;
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 24px);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(226, 201, 142, .16), transparent 60%),
    linear-gradient(150deg, var(--vinho-claro), var(--vinho) 45%, var(--vinho-fundo));
  color: var(--tinta);
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 0 0 1px rgba(226, 201, 142, .22), 0 30px 50px -18px rgba(0, 0, 0, .8);
  transform: rotateX(var(--gx)) rotateY(var(--gy));
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.cartao__face::after { /* fio dourado na borda */
  content: ""; position: absolute; inset: 8px; border-radius: 10px;
  border: 1px solid rgba(226, 201, 142, .35); pointer-events: none;
}
.cartao__topo { display: flex; align-items: center; justify-content: space-between; }
.cartao__topo img { width: 26px; }
.cartao__topo span, .cartao__evento, .cartao__base small {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.cartao__topo span { color: var(--ouro-vivo); }
.cartao__evento { margin-top: auto; opacity: .7; }
.cartao__nome {
  font-family: var(--display); font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.15;
  margin: 4px 0 var(--e2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 1.15em;
}
.cartao__nome.vazio { opacity: .35; }
.cartao__nome .letra { display: inline-block; animation: letra-grava .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes letra-grava { from { opacity: 0; transform: translateY(.35em); filter: blur(3px); } }
.cartao__base { display: flex; gap: var(--e4); }
.cartao__base span { display: flex; flex-direction: column; gap: 2px; }
.cartao__base small { opacity: .65; }
.cartao__base b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cartao__infinito { font-family: var(--display); font-weight: 400 !important; color: var(--ouro-vivo); font-size: 1.5rem; line-height: 1; }
.cartao__carimbo {
  position: absolute; right: 18px; top: 42%;
  font-family: var(--texto); font-weight: 700; font-size: .875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ouro-vivo);
  border: 2px solid var(--ouro-vivo); border-radius: 6px; padding: 6px 12px;
  transform: rotate(-12deg) scale(2.4); opacity: 0;
  pointer-events: none;
}
.cartao.carimbado .cartao__carimbo { animation: carimbar .45s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes carimbar {
  0% { opacity: 0; transform: rotate(-12deg) scale(2.4); }
  70% { opacity: 1; transform: rotate(-12deg) scale(.94); }
  100% { opacity: .95; transform: rotate(-12deg) scale(1); }
}
.cartao.carimbado .cartao__face { animation: tranco .45s ease-out .3s; }
@keyframes tranco { 40% { transform: translateY(3px) scale(.985); } }

/* formulário */
.inscricao { background: transparent; }
.inscricao__pergunta { font-family: var(--display); font-size: var(--t-m); line-height: 1.2; }
.inscricao__apoio { color: var(--tinta-suave); margin: var(--e1) 0 var(--e3); }
.campo { position: relative; display: block; margin-bottom: var(--e3); }
.campo__rotulo { display: block; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 4px; }
.campo input {
  width: 100%; border: 0; border-bottom: 1px solid var(--linha); background: transparent;
  font: inherit; font-size: var(--t-lead); color: var(--tinta); padding: 10px 0; border-radius: 0;
}
.campo input:focus { outline: none; }
.campo__linha { position: absolute; left: 0; right: 0; top: calc(100% - 22px); height: 2px; background: var(--ouro-vivo); transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.campo:focus-within .campo__linha { transform: scaleX(1); }
.campo__erro { display: block; min-height: 22px; font-size: .875rem; color: var(--erro); padding-top: 4px; }
.campo.invalido input { border-bottom-color: var(--erro); }

.botao {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 16px 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--vinho-vivo); color: var(--tinta);
  box-shadow: 0 0 0 1px rgba(226, 201, 142, .25) inset, 0 14px 30px -12px rgba(168, 25, 58, .6);
  font: 600 .9375rem/1.2 var(--texto); letter-spacing: .1em; text-transform: uppercase; text-align: center; text-decoration: none;
  transition: background .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.botao:hover { background: #BE2246; transform: translateY(-2px); }
.botao:active { transform: translateY(0); }
.pontos { display: none; gap: 5px; }
.pontos i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; animation: ponto .8s ease-in-out infinite alternate; }
.pontos i:nth-child(2) { animation-delay: .15s; } .pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ponto { to { transform: translateY(-5px); opacity: .5; } }
.botao.enviando .botao__texto { opacity: .5; }
.botao.enviando .pontos { display: inline-flex; }
.inscricao__falha { display: none; margin-top: var(--e2); color: var(--erro); font-size: .9375rem; }
.inscricao__falha.ativa { display: block; }
.inscricao.destaque { animation: destaque 1.2s ease; }
@keyframes destaque { 30% { box-shadow: 0 0 0 10px rgba(226, 201, 142, .14); border-radius: 12px; } }

/* ---------- CENA 2 · de dentro ---------- */
.dentro {
  max-width: 1240px; margin: 0 auto; padding: var(--e6) var(--gutter) var(--e7);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center;
}
.dentro__fotos { position: relative; }
.dentro__principal img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.dentro__detalhe { position: absolute; right: -12%; bottom: -10%; width: 46%; border: 8px solid var(--papel); }
.dentro__detalhe img { aspect-ratio: 1; object-fit: cover; }
.dentro__texto .rotulo { margin-bottom: var(--e3); }
.dentro__frase { font-family: var(--display); font-size: var(--t-l); line-height: 1.3; max-width: 22ch; }
.dentro__frase em { font-style: normal; color: var(--ouro-vivo); box-shadow: inset 0 -0.14em 0 rgba(201, 174, 116, .3); }
.dentro__risos { margin-top: var(--e5); width: 86%; margin-left: auto; }

/* ---------- CENA 3 · PICO ---------- */
.infinito { color: var(--tinta); }
.infinito .fx-palco { flex-direction: column; justify-content: center; }
.infinito__titulo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: 14vh var(--gutter) 12vh;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: var(--t-xl);
}
.infinito__comeco, .infinito__sempre { display: block; width: 100%; max-width: 1240px; margin: 0 auto; }
.infinito__sempre {
  text-align: center; max-width: 20ch;
  opacity: 0; transform: translateY(24px);
}
.anos { width: 100%; overflow: visible; }
.anos__trilho {
  display: flex; align-items: baseline; gap: clamp(40px, 7vw, 120px);
  white-space: nowrap; will-change: transform;
  font-family: var(--display); font-size: clamp(5.5rem, 19vw, 17rem); line-height: 1;
  font-variant-numeric: lining-nums;
}
.ano { display: inline-flex; color: rgba(243, 234, 223, .92); }
.ano--formacao { font-size: .42em; color: var(--ouro-vivo); align-self: center; }
.ano__resto { display: inline-block; }
.ano__oito { display: inline-block; transform-origin: 50% 54%; }
.laco {
  position: absolute; left: 50%; top: 50%; width: min(78vw, 760px); height: auto;
  transform: translate(-50%, -50%) scale(.5); opacity: 0;
  overflow: visible;
}
.laco path { fill: none; }
.laco__base { stroke: rgba(201, 174, 116, .25); stroke-width: 2; }
.laco__traco { stroke: var(--ouro-vivo); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.laco__luz { fill: #FFF3D6; filter: drop-shadow(0 0 6px rgba(255, 230, 170, .9)); opacity: 0; }

/* ---------- CENA 4 · agenda ---------- */
.agenda { padding: var(--e6) var(--gutter); }
.agenda__intro { max-width: 760px; margin: 0 auto var(--e6); text-align: center; }
.agenda__texto { font-size: var(--t-lead); color: var(--tinta-suave); line-height: 1.65; }
.agenda__revelacao { margin-top: var(--e3); font-family: var(--display); font-size: var(--t-l); line-height: 1.25; color: var(--ouro-vivo); }
.agenda__revelacao strong { font-weight: 400; }

.caderno {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  background: var(--superficie);
  border: 1px solid rgba(226, 201, 142, .14);
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .7);
}
.caderno__mes { padding: var(--e4); border-right: 1px dashed var(--linha); }
.caderno__mes .rotulo { margin-bottom: var(--e2); }
.mes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 0; text-align: center; font-variant-numeric: tabular-nums; font-size: .9375rem; color: var(--tinta-suave); }
.mes li { position: relative; padding: 6px 0; }
.mes__dia--nome { font-size: var(--t-rotulo); font-weight: 600; color: var(--tinta); letter-spacing: .06em; }
.mes__marcado { color: var(--caneta); font-weight: 700; }
.mes__circulo { position: absolute; left: 50%; top: 50%; width: 44px; height: 40px; transform: translate(-50%, -50%); overflow: visible; }
.mes__circulo path { fill: none; stroke: var(--caneta); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .6s; }
.caderno.fx-em-cena .mes__circulo path, .fx-reduzido .mes__circulo path { stroke-dashoffset: 0; }

.caderno__pagina {
  padding: var(--e4) clamp(24px, 4vw, 56px);
  background-image: repeating-linear-gradient(to bottom, transparent 0 47px, rgba(243, 234, 223, .07) 47px 48px);
  background-position: 0 30px;
  display: flex; flex-direction: column; justify-content: center;
}
.caderno__titulo { font-size: var(--t-xl); margin-bottom: var(--e3); }
.caderno__anotacao { font-family: var(--mao); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.35; color: var(--caneta); min-height: 1.35em; }
.caderno__anotacao strong { font-weight: 400; }
.caderno__nota { margin-top: var(--e2); color: var(--tinta-suave); font-size: var(--t-lead); }

/* ---------- CENA 5 · fechamento ---------- */
.fecho {
  min-height: 100vh; min-height: 100svh;
  padding: var(--e6) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px);
  align-items: center; max-width: 1240px; margin: 0 auto;
  color: var(--tinta);
}
.fecho__cartao .cartao { max-width: 480px; transform: rotate(-4deg); }
.fecho__texto .selo { margin-bottom: var(--e3); }
.fecho__data { font-family: var(--display); font-size: var(--t-xxl); line-height: 1.02; margin-bottom: var(--e5); }
.fecho__data span { color: var(--ouro); }
.fecho__data small { display: block; font-family: var(--texto); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-top: var(--e2); }
.botao--ouro { background: var(--ouro-vivo); color: var(--breu); max-width: 460px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); }
.botao--ouro:hover { background: #EED9A6; }
.cartao--claro .cartao__face { box-shadow: 0 0 0 1px rgba(226, 201, 142, .25), 0 40px 70px -30px rgba(0,0,0,.6); }

/* ---------- rodapé ---------- */
.rodape { display: flex; flex-direction: column; align-items: center; gap: var(--e2); padding: var(--e6) var(--gutter) var(--e5); text-align: center; color: var(--tinta-suave); font-size: .875rem; background: var(--papel); }
.rodape img { width: 40px; }
.rodape__marca { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); }

/* ---------- movimento reduzido ---------- */
.fx-reduzido .folha__aba { display: none; }
.fx-reduzido .folha__foto { animation: none; }
.fx-reduzido .infinito .fx-palco { padding: var(--e6) var(--gutter); gap: var(--e5); }
.fx-reduzido .infinito__titulo, .fx-reduzido .infinito__sempre { position: static; opacity: 1; transform: none; text-align: center; }
.fx-reduzido .infinito__sempre { margin-top: var(--e3); }
.fx-reduzido .anos { display: none; }
.fx-reduzido .laco { position: static; transform: none; opacity: 1; width: min(80vw, 520px); }
.fx-reduzido .laco__traco { stroke-dashoffset: 0; }
.fx-reduzido .infinito { background: var(--breu); }
.fx-reduzido .fecho { background: var(--vinho-fundo); max-width: none; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .carta { padding-top: 168px; }
  .carta__grade { grid-template-columns: 1fr; }
  .folha__foto { width: 128px; top: -24px; right: -6px; }
  .folha__titulo { max-width: none; }
  .dentro { grid-template-columns: 1fr; padding-bottom: var(--e6); }
  .dentro__detalhe { right: -4%; width: 40%; }
  .dentro__texto { margin-top: var(--e5); }
  .dentro__risos { width: 100%; }
  .caderno { grid-template-columns: 1fr; }
  .caderno__mes { border-right: 0; border-bottom: 1px dashed var(--linha); }
  .fecho { grid-template-columns: 1fr; text-align: left; }
  .fecho__cartao { order: 2; }
  .infinito__titulo { top: 14vh; }
}
@media (max-width: 520px) {
  .topo__marca span { display: none; }
  .folha { padding-top: 88px; }
  .folha__aba { height: 80px; }
  .cartao__base { gap: var(--e3); }
}