/* =========================================================================
   Central Player — front-page cinematográfica
   Carregado apenas em is_front_page().
   ========================================================================= */

/* --- Hero --------------------------------------------------------------- */

#cp-page .cp-hero { min-height: 820px; display: grid; align-items: center; position: relative; }
#cp-page .cp-hero-media { position: absolute; inset: 0 0 0 34%; z-index: -2; will-change: transform; }
#cp-page .cp-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% center;
  transform-origin: 65% center;
  transform: translate3d(0, var(--hero-y, 0px), 0) scale(1.04);
  transition: filter .8s var(--ease); will-change: transform;
}
#cp-page .cp-hero-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(5, 5, 10, .94) 14%, rgba(5, 5, 10, .38) 58%, rgba(5, 5, 10, .12)), linear-gradient(0deg, var(--bg), transparent 32%); }
#cp-page .cp-hero:before { content: ""; position: absolute; width: 520px; height: 520px; left: -260px; top: 40px; border-radius: 50%; background: rgba(124, 60, 255, .15); filter: blur(90px); z-index: -1; }
#cp-page .cp-hero:after { content: ""; position: absolute; left: 50%; bottom: 2.2rem; width: 1px; height: 78px; background: linear-gradient(var(--violet), transparent); animation: cp-scroll-pulse 2.4s var(--ease) infinite; }
@keyframes cp-scroll-pulse {
  0% { transform: scaleY(.2); transform-origin: top; opacity: .2; }
  55% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: translateY(35px) scaleY(.3); opacity: 0; }
}
#cp-page .cp-hero-copy { max-width: 700px; padding: 7.2rem 0 8.5rem; }
/* Duas linhas exatas: o span vira bloco, então a quebra não depende da largura
   do container. Mantém o hero inteiro (título, botões e prova) na primeira tela. */
#cp-page .cp-hero h1 { font-size: clamp(2.5rem, 4.4vw, 3.9rem); max-width: 920px; margin-bottom: 1.55rem; }
#cp-page .cp-hero h1 span { display: block; background: linear-gradient(100deg, #fff 20%, #b6c9ff 55%, #9d6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#cp-page .cp-proof { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: 2rem; color: #aeb1c4; font-size: .79rem; }
#cp-page .cp-proof span { display: inline-flex; align-items: center; gap: .45rem; }
#cp-page .cp-proof i { width: 7px; height: 7px; background: var(--ok); border-radius: 50%; box-shadow: 0 0 12px var(--ok); }

/* --- Faixa de destaques em loop ----------------------------------------- */

#cp-page .cp-marquee {
  border-block: 1px solid var(--line);
  background: rgba(10, 11, 19, .72);
  overflow: hidden;
  /* Esmaece as pontas para o texto não "nascer" e "morrer" cortado na borda. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
#cp-page .cp-marquee-track {
  display: flex;
  width: max-content;
  animation: cp-marquee 46s linear infinite;
}
#cp-page .cp-marquee:hover .cp-marquee-track { animation-play-state: paused; }
#cp-page .cp-marquee-group { display: flex; align-items: center; flex-shrink: 0; }
#cp-page .cp-marquee-item {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: Sora, sans-serif; font-size: .82rem; font-weight: 600;
  color: #c9cbdd; padding: .95rem 0;
}
#cp-page .cp-marquee-item:after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--violet); box-shadow: 0 0 10px var(--violet);
  margin-inline: 2.1rem; flex-shrink: 0;
}
/* Deslocar exatamente metade da trilha alinha a cópia sobre o original. */
@keyframes cp-marquee { to { transform: translateX(-50%); } }

/* --- Jornada cinematográfica -------------------------------------------- */

#cp-page .cp-cinema { height: 420vh; position: relative; background: #030308; }
#cp-page .cp-cinema-stage { position: sticky; top: 0; height: 100vh; min-height: 650px; overflow: hidden; isolation: isolate; }
#cp-page .cp-cinema-bg { position: absolute; inset: -6%; z-index: -3; will-change: transform; transform: scale(var(--journey-scale, 1.13)) translate3d(var(--journey-x, 2.5%), 0, 0); }
#cp-page .cp-cinema-bg img { width: 100%; height: 100%; object-fit: cover; }
#cp-page .cp-cinema-stage:before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3, 3, 8, .94), rgba(3, 3, 8, .58) 42%, rgba(3, 3, 8, .12) 72%), linear-gradient(0deg, rgba(3, 3, 8, .92), transparent 34%, rgba(3, 3, 8, .4)); }
#cp-page .cp-cinema-stage:after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at var(--journey-glow-x, 68%) 48%, rgba(74, 77, 255, .18), transparent 32%); pointer-events: none; }
#cp-page .cp-cinema-ui { height: 100%; display: grid; grid-template-columns: 1fr 100px; align-items: center; gap: 3rem; }
#cp-page .cp-scenes { position: relative; height: 390px; max-width: 620px; }
#cp-page .cp-scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translate3d(0, 46px, 0); filter: blur(10px); pointer-events: none; transition: opacity .8s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
#cp-page .cp-scene.cp-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
#cp-page .cp-scene-num { font-family: Sora, sans-serif; font-size: .72rem; letter-spacing: .18em; color: #a78bfa; margin-bottom: 1.2rem; }
#cp-page .cp-scene h2 { font-size: clamp(1.85rem, 3.1vw, 2.8rem); max-width: 730px; margin-bottom: 1.2rem; }
#cp-page .cp-scene p { max-width: 560px; color: #c0c2d2; font-size: clamp(.98rem, 1.4vw, 1.14rem); margin: 0; }
#cp-page .cp-journey-rail { height: 360px; display: flex; align-items: center; justify-content: center; position: relative; }
#cp-page .cp-journey-line { position: absolute; width: 1px; height: 100%; background: rgba(255, 255, 255, .12); }
#cp-page .cp-journey-fill { position: absolute; top: 0; width: 2px; height: 100%; background: linear-gradient(var(--violet), var(--cyan)); transform: scaleY(var(--journey-p, 0)); transform-origin: top; box-shadow: 0 0 16px rgba(37, 200, 255, .45); }
#cp-page .cp-journey-dots { height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; }
#cp-page .cp-journey-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: #080910; transition: background .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease); }
#cp-page .cp-journey-dots i.cp-active { background: var(--cyan); box-shadow: 0 0 20px var(--cyan); transform: scale(1.35); }
#cp-page .cp-glass-planes { position: absolute; right: 8%; top: 50%; width: 380px; height: 480px; transform: translateY(-50%); perspective: 1200px; pointer-events: none; }
#cp-page .cp-glass-planes i { position: absolute; inset: 0; border: 1px solid rgba(151, 162, 255, .2); border-radius: 26px; background: linear-gradient(145deg, rgba(124, 60, 255, .08), rgba(37, 200, 255, .025)); backdrop-filter: blur(2px); transform: rotateY(-18deg) translate3d(var(--x, 0), var(--y, 0), var(--z, 0)); opacity: var(--o, .55); box-shadow: inset 0 0 40px rgba(124, 60, 255, .04); }
#cp-page .cp-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#cp-page .cp-particles span { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); opacity: .4; animation: cp-particle 5s ease-in-out infinite alternate; }
@keyframes cp-particle { to { transform: translate3d(15px, -35px, 0); opacity: .08; } }
#cp-page .cp-after-cinema { position: relative; }
#cp-page .cp-after-cinema:before { content: ""; position: absolute; left: 50%; top: -130px; width: min(900px, 80vw); height: 260px; translate: -50% 0; background: radial-gradient(ellipse, rgba(124, 60, 255, .14), transparent 65%); filter: blur(30px); pointer-events: none; }

/* --- Definição ---------------------------------------------------------- */

#cp-page .cp-definition { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 30px; overflow: hidden; background: linear-gradient(145deg, #12131f, #0b0c14); box-shadow: 0 30px 80px rgba(0, 0, 0, .28); transition: transform .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease); }
#cp-page .cp-definition:hover { transform: translateY(-4px); border-color: rgba(124, 60, 255, .3); box-shadow: 0 40px 100px rgba(0, 0, 0, .38), 0 0 60px rgba(124, 60, 255, .06); }
#cp-page .cp-definition-main { padding: 3.2rem; }
#cp-page .cp-definition-main h2 { font-size: clamp(1.8rem, 2.9vw, 2.5rem); margin-bottom: 1.4rem; }
#cp-page .cp-definition-main p { color: #c0c2d2; font-size: 1.03rem; margin-bottom: 1.5rem; }
#cp-page .cp-answer { border-left: 2px solid var(--violet); padding: .1rem 0 .1rem 1.1rem; color: #f4f0ff !important; font-weight: 600; }
#cp-page .cp-definition-list { padding: 2.2rem; background: rgba(255, 255, 255, .018); display: grid; gap: .75rem; }

/* --- Destaque editorial ------------------------------------------------- */

#cp-page .cp-featured { display: grid; grid-template-columns: 1.15fr .85fr; border: 1px solid var(--line); border-radius: 30px; overflow: hidden; background: var(--surface); margin-bottom: 1.2rem; }
#cp-page .cp-featured-art { min-height: 440px; position: relative; background: radial-gradient(circle at 70% 35%, rgba(38, 124, 255, .35), transparent 27%), radial-gradient(circle at 30% 70%, rgba(124, 60, 255, .35), transparent 30%), #090a12; overflow: hidden; }
#cp-page .cp-featured-art:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(16, 17, 27, .5)), linear-gradient(0deg, rgba(5, 5, 10, .55), transparent 55%); }
#cp-page .cp-featured-art img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform 1.1s var(--ease), filter 1.1s var(--ease); }
#cp-page .cp-featured:hover .cp-featured-art img { transform: scale(1.055); filter: saturate(1.08); }
#cp-page .cp-image-chip { position: absolute; z-index: 2; left: 1.4rem; bottom: 1.4rem; padding: .48rem .8rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(5, 5, 10, .52); backdrop-filter: blur(14px); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#cp-page .cp-featured-copy { padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
#cp-page .cp-featured h3 { font-size: clamp(1.45rem, 2.2vw, 1.95rem); margin-bottom: 1rem; }
#cp-page .cp-featured p { color: var(--muted); margin: 0 0 1.6rem; }

/* --- Clusters ----------------------------------------------------------- */

#cp-page .cp-clusters { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
#cp-page .cp-cluster { grid-column: span 4; min-height: 370px; padding: 2rem; border: 1px solid var(--line); border-radius: 24px; position: relative; overflow: hidden; background: #0e0f18; transition: transform .65s var(--ease), border-color .65s var(--ease), box-shadow .65s var(--ease); }
#cp-page .cp-cluster:before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 60, 255, .14), transparent 42%); opacity: 0; transition: opacity .65s var(--ease); }
#cp-page .cp-cluster > * { position: relative; z-index: 1; }
#cp-page .cp-cluster:hover { transform: translateY(-6px); border-color: rgba(73, 116, 255, .38); box-shadow: 0 28px 70px rgba(0, 0, 0, .3); }
#cp-page .cp-cluster:hover:before { opacity: 1; }
#cp-page .cp-cluster:first-child { grid-column: span 7; background: linear-gradient(135deg, rgba(124, 60, 255, .24), rgba(14, 15, 24, .92) 55%); }
#cp-page .cp-cluster:nth-child(2) { grid-column: span 5; background: linear-gradient(145deg, rgba(38, 124, 255, .18), rgba(14, 15, 24, .92) 60%); }
#cp-page .cp-cluster h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); max-width: 380px; margin-bottom: .85rem; }
#cp-page .cp-cluster p { color: var(--muted); max-width: 430px; margin: 0 0 1.5rem; }
#cp-page .cp-cluster ul { list-style: none; padding: 0; margin: 2.2rem 0 0; border-top: 1px solid var(--line); }
#cp-page .cp-cluster li { padding: .72rem 0; border-bottom: 1px solid var(--line); font-size: .82rem; color: #c3c5d5; display: flex; justify-content: space-between; gap: 1rem; }
#cp-page .cp-cluster li:after { content: "\2197"; color: #747894; }
#cp-page .cp-orbit { position: absolute; width: 180px; height: 180px; border: 1px solid rgba(124, 60, 255, .28); border-radius: 50%; right: -45px; top: -50px; box-shadow: 0 0 0 30px rgba(124, 60, 255, .035), 0 0 0 60px rgba(38, 124, 255, .02); }

/* --- Stories ------------------------------------------------------------ */

#cp-page .cp-stories { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.1rem; }
#cp-page .cp-story { min-height: 480px; border: 1px solid var(--line); border-radius: 26px; position: relative; overflow: hidden; background: #0d0e17; transition: transform .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease); }
#cp-page .cp-story:before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 60, 255, .14), transparent 42%); opacity: 0; transition: opacity .65s var(--ease); }
#cp-page .cp-story:hover { transform: translateY(-6px); border-color: rgba(124, 60, 255, .36); box-shadow: 0 32px 78px rgba(0, 0, 0, .34); }
#cp-page .cp-story:hover:before { opacity: 1; }
#cp-page .cp-story-media { position: absolute; inset: 0; z-index: 0; }
#cp-page .cp-story-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 7, 13, .98) 5%, rgba(7, 7, 13, .72) 34%, transparent 72%); }
#cp-page .cp-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
#cp-page .cp-story:hover .cp-story-media img { transform: scale(1.06); filter: saturate(1.1); }
#cp-page .cp-story-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2rem; }
#cp-page .cp-story-copy h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); margin-bottom: .6rem; }
#cp-page .cp-story-copy p { color: #b8bacb; max-width: 520px; margin: 0 0 1rem; font-size: .88rem; }

/* --- Método ------------------------------------------------------------- */

#cp-page .cp-method { display: grid; grid-template-columns: .75fr 1.25fr; gap: 5rem; align-items: start; }
#cp-page .cp-method h2 { font-size: clamp(1.85rem, 3vw, 2.7rem); position: sticky; top: 110px; }
#cp-page .cp-steps { counter-reset: step; }
#cp-page .cp-step { counter-increment: step; display: grid; grid-template-columns: 68px 1fr; gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--line); }
#cp-page .cp-step:last-child { border-bottom: 1px solid var(--line); }
#cp-page .cp-step:before { content: "0" counter(step); font-family: Sora, sans-serif; color: #8488a7; font-size: .8rem; padding-top: .15rem; }
#cp-page .cp-step h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
#cp-page .cp-step p { color: var(--muted); font-size: .88rem; margin: 0; }

/* --- FAQ ---------------------------------------------------------------- */

#cp-page .cp-faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 5rem; }
#cp-page .cp-faq h2 { font-size: clamp(1.85rem, 3vw, 2.7rem); margin-bottom: 1rem; }
#cp-page .cp-faq-intro p { color: var(--muted); }
#cp-page details { border-top: 1px solid var(--line); }
#cp-page details:last-child { border-bottom: 1px solid var(--line); }
#cp-page summary { list-style: none; cursor: pointer; padding: 1.35rem 2.5rem 1.35rem 0; font-family: Sora, sans-serif; font-weight: 700; font-size: 1rem; position: relative; }
#cp-page summary::-webkit-details-marker { display: none; }
#cp-page summary:after { content: "+"; position: absolute; right: .2rem; top: 1.16rem; font-size: 1.35rem; color: #a58bff; }
#cp-page details[open] summary:after { content: "\2212"; }
#cp-page details p { color: var(--muted); font-size: .9rem; margin: 0; padding: 0 2rem 1.4rem 0; }

/* --- CTA final ---------------------------------------------------------- */

#cp-page .cp-cta { padding: 3.5rem; border-radius: 32px; border: 1px solid rgba(124, 60, 255, .3); background: radial-gradient(circle at 85% 15%, rgba(38, 124, 255, .28), transparent 27%), linear-gradient(135deg, rgba(124, 60, 255, .18), rgba(13, 14, 24, .95)); background-size: 120% 120%; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; animation: cp-cta-glow 9s var(--ease) infinite alternate; transition: border-color .6s var(--ease), box-shadow .6s var(--ease); }
#cp-page .cp-cta:hover { border-color: rgba(124, 60, 255, .55); box-shadow: 0 35px 90px rgba(49, 37, 170, .16); }
@keyframes cp-cta-glow { to { background-position: 20% 80%; } }
#cp-page .cp-cta h2 { font-size: clamp(1.7rem, 2.7vw, 2.35rem); margin-bottom: .75rem; }
#cp-page .cp-cta p { color: var(--muted); margin: 0; max-width: 650px; }

/* =========================================================================
   Responsivo
   ========================================================================= */

@media (max-width: 900px) {
  #cp-page .cp-hero { min-height: 650px; }
  #cp-page .cp-hero-media { inset: 0; opacity: .62; }
  #cp-page .cp-hero-media:after { background: linear-gradient(90deg, rgba(5, 5, 10, .95), rgba(5, 5, 10, .25)), linear-gradient(0deg, var(--bg), transparent 42%); }
  #cp-page .cp-method, #cp-page .cp-faq { grid-template-columns: 1fr; gap: 2rem; }
  #cp-page .cp-method h2 { position: static; }
  #cp-page .cp-definition, #cp-page .cp-featured { grid-template-columns: 1fr; }
  #cp-page .cp-featured-art { min-height: 300px; }
  #cp-page .cp-cluster, #cp-page .cp-cluster:first-child, #cp-page .cp-cluster:nth-child(2) { grid-column: span 6; }
  #cp-page .cp-stories { grid-template-columns: 1fr; }
  #cp-page .cp-cinema { height: 360vh; }
  #cp-page .cp-cinema-ui { grid-template-columns: 1fr 54px; }
  #cp-page .cp-glass-planes { opacity: .28; right: -12%; width: 300px; height: 400px; }
  #cp-page .cp-cinema-stage:before { background: linear-gradient(90deg, rgba(3, 3, 8, .96), rgba(3, 3, 8, .58) 72%, rgba(3, 3, 8, .25)), linear-gradient(0deg, rgba(3, 3, 8, .9), transparent 38%); }
  #cp-page .cp-scenes { height: 430px; }
}

@media (max-width: 620px) {
  #cp-page .cp-hero { min-height: 760px; }
  #cp-page .cp-hero-media { inset: 0; opacity: .7; }
  #cp-page .cp-hero-copy { padding: 6rem 0 6.5rem; }
  #cp-page .cp-hero h1 { font-size: clamp(2rem, 8.6vw, 2.9rem); }
  #cp-page .cp-proof { gap: .65rem 1rem; }
  #cp-page .cp-definition-main, #cp-page .cp-featured-copy { padding: 1.6rem; }
  #cp-page .cp-definition-list { padding: 1rem; }
  #cp-page .cp-cluster, #cp-page .cp-cluster:first-child, #cp-page .cp-cluster:nth-child(2) { grid-column: 1 / -1; min-height: auto; padding: 1.5rem; }
  #cp-page .cp-story { min-height: 420px; }
  #cp-page .cp-story-copy { padding: 1.4rem; }
  #cp-page .cp-step { grid-template-columns: 42px 1fr; }
  #cp-page .cp-faq { gap: 1.2rem; }
  #cp-page .cp-cta { padding: 2rem 1.4rem; grid-template-columns: 1fr; }
  #cp-page .cp-cinema { height: 330vh; }
  #cp-page .cp-cinema-stage { min-height: 580px; }
  #cp-page .cp-cinema-ui { grid-template-columns: 1fr 28px; gap: 1rem; }
  #cp-page .cp-scene h2 { font-size: clamp(1.75rem, 7.4vw, 2.5rem); }
  #cp-page .cp-journey-rail { height: 300px; }
  #cp-page .cp-glass-planes { display: none; }
  #cp-page .cp-cinema-bg { inset: -3% -55% -3% -18%; }
  #cp-page .cp-cinema-stage:before { background: linear-gradient(90deg, rgba(3, 3, 8, .96), rgba(3, 3, 8, .65)), linear-gradient(0deg, rgba(3, 3, 8, .94), transparent 42%, rgba(3, 3, 8, .55)); }
}

@supports not (overflow: clip) {
  #cp-page .cp-hero { overflow: hidden; }
}

/* Fallback linear: sem sticky, sem parallax, sem partículas. */
@media (prefers-reduced-motion: reduce) {
  /* Sem animação a trilha congela no início e esconde metade dos itens.
     Vira uma faixa rolável na mão, sem a cópia duplicada. */
  #cp-page .cp-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  #cp-page .cp-marquee-group[aria-hidden="true"] { display: none; }
  #cp-page .cp-marquee-item:last-child:after { display: none; }
  #cp-page .cp-cinema { height: auto; }
  #cp-page .cp-cinema-stage { position: relative; height: auto; padding: 6rem 0; }
  #cp-page .cp-scenes { height: auto; }
  #cp-page .cp-scene { position: relative; opacity: 1; transform: none; filter: none; padding: 2rem 0; }
  #cp-page .cp-journey-rail, #cp-page .cp-glass-planes, #cp-page .cp-particles { display: none; }
  #cp-page .cp-hero-media img { transform: none; }
}