/* ============================================================
   JUST BALL CAMP 2026 · /camp
   Página de uma ação só. Tudo aqui leva o prefixo cp- e soma ao
   style.css do site (tokens, nav, botões, rodapé vêm de lá).
   Movimento: só transform e opacity. Hover só com mouse de verdade;
   no toque, a rolagem faz o papel do hover (.is-hot).
   ============================================================ */

html,body{ overflow-x:hidden }
@supports (overflow-x:clip){ html,body{ overflow-x:clip } }

.cp-page .grain{ display:none }
.cp-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* grão do Jordan (neutro), fixo por cima de tudo */
.cp-grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:url('/images/camp/grain.webp') repeat; background-size:256px 256px;
  opacity:.12;
}

/* ---------- reveal ---------- */
.js .cp-rv{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--e), transform .8s var(--e); transition-delay:calc(var(--i, 0) * 70ms) }
.js .cp-rv.is-in{ opacity:1; transform:none }

/* ---------- HERO (altura orçada pelo formulário) ---------- */
.cp-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(88px, 11vw, 150px) clamp(20px, 3vw, 44px);
  min-height:min(78svh, 760px);
  display:flex; align-items:flex-end;
}
.cp-hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden }
.cp-hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:100% 50%;
}
.cp-hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.88) 0, rgba(5,5,5,0) 150px),
    linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.8) 40%, rgba(5,5,5,.1) 66%),
    linear-gradient(0deg, var(--ink) 0%, rgba(5,5,5,0) 32%);
}
.cp-hero__in{ position:relative; z-index:1 }
.cp-hero__top{ display:flex; flex-direction:column; gap:clamp(10px,1.4vw,18px) }
.cp-hero__h1{ font-size:inherit; letter-spacing:0; line-height:1; margin:0; display:flex; flex-direction:column; gap:14px }
.cp-hero__lock{ width:clamp(200px, 34vw, 470px); height:auto; filter:drop-shadow(0 12px 40px rgba(0,0,0,.5)) }
.cp-hero__k{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(.78rem,1vw,.9rem); letter-spacing:.24em; color:var(--lime);
}
.cp-hero__meta{ display:flex; flex-direction:column; gap:2px; margin:0 }
.cp-hero__data{
  font-family:var(--disp); font-weight:900; text-transform:uppercase; color:var(--paper);
  font-size:clamp(1.5rem,2.8vw,2.5rem); line-height:1.02; letter-spacing:-.01em;
}
.cp-hero__lugar{ font-size:clamp(.88rem,1.1vw,1rem); color:#cfcfcf; line-height:1.4 }
.cp-hero__dw{
  max-width:560px; margin-top:clamp(14px,2vw,24px);
  font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.5; color:var(--paper);
}
.cp-hero__cta{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); margin-top:clamp(16px,2.2vw,28px); flex-wrap:wrap }
.cp-preco{ display:flex; flex-direction:column; line-height:1.1; margin:0 }
.cp-preco__l{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--mute); text-transform:uppercase }
.cp-preco__v{ font-family:var(--disp); font-weight:900; font-size:clamp(1.9rem,3vw,2.6rem); color:var(--lime); letter-spacing:-.01em }
.cp-preco.is-fechado .cp-preco__v{ font-size:1.2rem; color:var(--paper); text-transform:uppercase; line-height:1.1 }

@media (max-width:900px){
  /* No celular: lockup e data lado a lado, frase, preço e botão numa linha.
     Medido: card do formulário começa a ~48% de 844px. */
  .cp-hero{ min-height:0; padding-top:84px; padding-bottom:18px }
  .cp-hero__bg img{ object-position:60% 30%; opacity:.55 }
  .cp-hero__bg::after{ background:linear-gradient(0deg, var(--ink) 4%, rgba(5,5,5,.78) 55%, rgba(5,5,5,.55) 100%) }
  .cp-hero__top{ display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr); align-items:end; gap:14px }
  .cp-hero__h1{ gap:8px }
  .cp-hero__lock{ width:100%; max-width:220px }
  .cp-hero__k{ font-size:.66rem; letter-spacing:.16em; line-height:1.3 }
  .cp-hero__data{ font-size:1.42rem }
  .cp-hero__lugar{ font-size:.84rem }
  .cp-hero__dw{ font-size:1rem; margin-top:12px }
  .cp-hero__cta{ margin-top:14px; flex-wrap:nowrap; justify-content:space-between }
  .cp-preco__v{ font-size:1.8rem }
  .cp-hero__btn{ padding-inline:20px }
}

/* entrada do hero no carregamento (fora do reveal: é o LCP) */
.cp-hero__top, .cp-hero__dw, .cp-hero__cta{ animation:cpUp .9s var(--e) both }
.cp-hero__dw{ animation-delay:.08s }
.cp-hero__cta{ animation-delay:.16s }
@keyframes cpUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

/* ---------- INSCRIÇÃO ---------- */
.cp-insc{ padding-block:0 clamp(70px,8vw,120px); scroll-margin-top:72px }
.cp-insc__g{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:clamp(32px,5vw,80px); align-items:start }
.cp-insc__side{ order:-1; padding-top:clamp(10px,2vw,30px) }
.cp-insc__side h2{ margin:16px 0 14px }
.cp-insc__side p{ max-width:440px }
.cp-mini{ list-style:none; margin-top:22px; display:grid; gap:10px; border-top:1px solid var(--line); padding-top:18px }
.cp-mini li{ color:#c8c8c8; font-size:.95rem }
.cp-mini b{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--paper); margin-right:6px }
@media (max-width:900px){
  .cp-insc__g{ grid-template-columns:minmax(0,1fr) }
  .cp-insc__side{ display:none }
}

.cp-card{
  position:relative; z-index:3; scroll-margin-top:84px;
  background:linear-gradient(180deg, rgba(20,20,20,.96), rgba(11,11,11,.97));
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(18px,2.4vw,30px);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(197,255,26,.05) inset;
}
.cp-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px }
.cp-card__k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0 }
.cp-dots{ list-style:none; display:flex; gap:8px }
.cp-dots li{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14); transition:background .3s var(--e), transform .3s var(--e) }
.cp-dots li.is-feito{ background:var(--green) }
.cp-dots li[aria-current="step"]{ background:var(--lime); transform:scale(1.25) }
.cp-dots[hidden]{ display:none !important }

.cp-fechado{
  font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.3rem;
  color:var(--paper); margin-bottom:10px;
}
.cp-fechado[hidden]{ display:none !important }

.cp-form{ display:block }
.cp-form[hidden]{ display:none !important }
.cp-step{ border:0; min-width:0; display:grid; gap:14px }
.cp-step[hidden]{ display:none !important }
.cp-step:not([hidden]){ animation:cpStep .45s var(--e) both }
@keyframes cpStep{ from{ opacity:0; transform:translateX(14px) } to{ opacity:1; transform:none } }
.cp-step__t{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.45rem,2.2vw,1.8rem); line-height:1.05; color:var(--paper);
  padding:0; margin-bottom:2px; outline:none;
}
.cp-step__n{ display:block; font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.1em; color:var(--lime); margin-bottom:4px }

.cp-hp{ display:none }

.cp-f{ display:grid; gap:6px; min-width:0 }
.cp-f label, .cp-f__l{ font-size:.86rem; font-weight:600; color:#d9d9d9; letter-spacing:.01em }
.cp-opc{ font-weight:400; color:var(--mute) }
.cp-f2{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:12px }
.cp-f input[type="text"], .cp-f input[type="tel"], .cp-f input[type="email"], .cp-nasc select, .cp-link input{
  width:100%; min-height:50px; padding:12px 14px;
  font:500 max(16px,1rem)/1.3 var(--body); color:var(--paper);
  background:#080808; border:1px solid rgba(255,255,255,.16); border-radius:10px;
  transition:border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none; appearance:none;
}
.cp-f input::placeholder{ color:#6a6a6a }
.cp-nasc{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1fr); gap:8px }
.cp-nasc select{
  padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5ff1a' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
}
.cp-f input:focus, .cp-nasc select:focus, .cp-link input:focus{
  outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(197,255,26,.18);
}
.cp-f input[aria-invalid="true"], .cp-nasc select[aria-invalid="true"]{ border-color:#ff6b5e; box-shadow:0 0 0 3px rgba(255,107,94,.16) }
.cp-f__e{ font-size:.84rem; color:#ff8a7f; line-height:1.4; margin:0 }
.cp-f__e[hidden]{ display:none !important }
.cp-f__n{ font-size:.82rem; color:var(--mute); margin:0 }
.cp-nota{ font-size:.86rem; color:var(--mute); line-height:1.5; margin:0 }
.cp-nota a, .cp-a{ color:var(--lime); border-bottom:1px solid rgba(197,255,26,.35); padding-block:4px }
.cp-nota--top{ margin-top:-4px }

/* pílulas de tamanho */
.cp-pills{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px }
.cp-pill{ position:relative; display:block; cursor:pointer }
.cp-pill input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer }
.cp-pill span{
  display:flex; align-items:center; justify-content:center; min-height:48px;
  font-family:var(--disp); font-weight:800; font-size:1.15rem; letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#080808; color:#d0d0d0;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.cp-pill input:checked + span{ background:var(--lime); color:#050505; border-color:var(--lime) }
.cp-pill input:focus-visible + span{ outline:2px solid var(--lime); outline-offset:2px }
.cp-pill:active span{ transform:scale(.96) }
#cp_tamanho[aria-invalid="true"] .cp-pill span{ border-color:#ff6b5e }

/* caixas de autorização */
.cp-chks{ display:grid; gap:10px }
.cp-chk{ position:relative; display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start; cursor:pointer; padding:8px 0; min-height:44px }
.cp-chk input{ position:absolute; left:0; top:8px; width:26px; height:26px; opacity:0; margin:0; cursor:pointer }
.cp-chk__b{
  width:26px; height:26px; border-radius:7px; border:1px solid rgba(255,255,255,.28); background:#080808;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease;
}
.cp-chk__b svg{ width:16px; height:16px; fill:none; stroke:#050505; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.8); transition:opacity .2s ease, transform .2s var(--e) }
.cp-chk input:checked + .cp-chk__b{ background:var(--lime); border-color:var(--lime) }
.cp-chk input:checked + .cp-chk__b svg{ opacity:1; transform:none }
.cp-chk input:focus-visible + .cp-chk__b{ outline:2px solid var(--lime); outline-offset:2px }
.cp-chk input[aria-invalid="true"] + .cp-chk__b{ border-color:#ff6b5e }
.cp-chk__t{ font-size:.88rem; line-height:1.5; color:#cfcfcf }

/* ações */
.cp-acts{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px }
.cp-acts .cp-go{ flex:1 1 auto; max-width:300px; margin-left:auto }
.cp-step[data-step="1"] .cp-acts .cp-go{ max-width:none }
.cp-back{
  min-height:44px; padding:10px 6px; font-size:.9rem; color:var(--mute);
  border-bottom:1px solid transparent; transition:color .2s ease;
}
.cp-back:active, .cp-copy:active, .cp-zap:active{ transform:scale(.97) }
.cp-page .btn:active{ transform:scale(.97) }
.cp-page .btn.is-busy{ opacity:.6; cursor:progress }
.cp-acts--pay{ flex-direction:column; align-items:stretch }
.cp-pay{ display:block; width:100%; white-space:normal; text-align:center; font-size:1.05rem; line-height:1.25; min-height:56px; padding:16px 20px }

.cp-retorno{
  background:rgba(197,255,26,.08); border:1px solid rgba(197,255,26,.32); border-radius:12px;
  padding:12px 14px; font-size:.92rem; color:var(--paper); line-height:1.5; margin:0;
}
.cp-retorno[hidden]{ display:none !important }

.cp-resumo{ display:grid; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden }
.cp-resumo > div{ display:flex; justify-content:space-between; gap:14px; padding:11px 14px; border-top:1px solid var(--line-2) }
.cp-resumo > div:first-child{ border-top:0 }
.cp-resumo dt{ font-size:.84rem; color:var(--mute) }
.cp-resumo dd{ font-size:.95rem; color:var(--paper); font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere }
.cp-resumo__v{ background:rgba(197,255,26,.06) }
.cp-resumo__v dd{ font-family:var(--disp); font-weight:900; font-size:1.5rem; color:var(--lime); line-height:1 }

.cp-depois{ border-top:1px solid var(--line); padding-top:16px; display:grid; gap:10px }
.cp-depois__t{ font-size:.9rem; color:#cfcfcf; margin:0 }
.cp-link{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px }
.cp-link input{ font-family:var(--mono); font-size:max(16px,.85rem); color:#bdbdbd; text-overflow:ellipsis }
.cp-copy{
  min-height:50px; padding:0 16px; border:1px solid var(--line); border-radius:10px;
  font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.88rem;
  transition:border-color .2s ease, color .2s ease, transform .15s ease;
}
.cp-copy.is-ok{ border-color:var(--lime); color:var(--lime) }
.cp-zap{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; justify-self:start;
  font-weight:600; color:var(--paper); border-bottom:1px solid rgba(197,255,26,.35); transition:color .2s ease, transform .15s ease;
}
.cp-zap svg, .cp-c svg, .cp-bar__zap svg{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round }
.cp-zap svg{ color:var(--lime) }

.cp-fim{ display:grid; gap:12px; justify-items:start; padding:6px 0 4px }
.cp-fim[hidden]{ display:none !important }
.cp-fim__t{ font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.05; color:var(--lime); margin:0 }

/* respiro entre seções: um pouco menor que o padrão do site, a página é longa */
.cp-dias, .cp-pxb, .cp-inclui, .cp-lotes, .cp-comb, .cp-faq, .cp-org{ padding-block:clamp(56px,7vw,104px) }

/* ---------- OS TRÊS DIAS ---------- */
.cp-tl{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); counter-reset:d }
.cp-tl__i{
  position:relative; padding:clamp(20px,2.2vw,30px); border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  transition:border-color .3s var(--e), box-shadow .3s var(--e), opacity .7s var(--e), transform .8s var(--e);
}
.cp-tl__i h3{ margin:12px 0 8px; font-size:clamp(1.6rem,2.4vw,2.1rem) }
.cp-tl__i p{ font-size:.98rem }
.cp-tl__d{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--lime) }
.cp-tl__p{ color:var(--mute) }
.cp-tag{
  display:inline-block; margin-top:14px; padding:6px 12px; border-radius:var(--rp);
  border:1px dashed rgba(255,255,255,.28); font-family:var(--mono); font-size:.72rem !important; color:#cfcfcf;
}
.cp-tardes{ margin-top:clamp(18px,2vw,26px); padding:clamp(20px,2.2vw,30px); border-radius:var(--r); background:rgba(197,255,26,.05); border:1px solid rgba(197,255,26,.18) }
.cp-tardes__t{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--lime); margin-bottom:10px }
.cp-tardes ul{ list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 24px }
.cp-tardes li{ position:relative; padding-left:20px; color:#d6d6d6; font-size:.98rem; line-height:1.5 }
.cp-tardes li::before{ content:''; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--lime) }
@media (max-width:820px){
  .cp-tl{ grid-template-columns:minmax(0,1fr) }
  .cp-tardes ul{ grid-template-columns:minmax(0,1fr) }
}

/* ---------- PARAGUAI X BRASIL ---------- */
.cp-pxb__g{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,5vw,80px); align-items:center }
.cp-pxb__n{
  font-family:var(--disp); font-weight:900; line-height:.8; letter-spacing:-.04em;
  font-size:clamp(9rem,26vw,22rem); color:transparent; -webkit-text-stroke:2px var(--lime);
  text-shadow:0 0 60px rgba(197,255,26,.18); margin:0;
}
.cp-pxb h2{ margin:16px 0 18px }
.cp-pxb p + p{ margin-top:14px }
@media (max-width:820px){
  .cp-pxb__g{ grid-template-columns:minmax(0,1fr); gap:6px }
  .cp-pxb__n{ font-size:clamp(7rem,40vw,11rem) }
}

/* ---------- A VAGA INCLUI ---------- */
.cp-inclui__g{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(28px,5vw,80px); align-items:center }
.cp-inclui h2{ margin:16px 0 22px }
.cp-lista{ list-style:none; display:grid; gap:12px; margin-bottom:16px }
.cp-lista li{
  display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line-2);
  font-size:clamp(1.02rem,1.3vw,1.16rem); color:var(--paper);
}
.cp-lista li::before{
  content:''; flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat;
}
.cp-tee{
  margin:0; padding:clamp(24px,3vw,40px); border-radius:20px; border:1px solid var(--line);
  background:radial-gradient(80% 70% at 50% 35%, rgba(197,255,26,.10), transparent 70%), #0a0a0a;
  display:grid; gap:18px; justify-items:center; text-align:center;
  transition:border-color .3s var(--e), box-shadow .3s var(--e), opacity .7s var(--e), transform .8s var(--e);
}
.cp-tee svg{ width:min(240px, 70%); height:auto }
.cp-tee__s{ fill:#030303; stroke:rgba(255,255,255,.22); stroke-width:1.4; stroke-linejoin:round }
.cp-tee__c{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.4 }
.cp-tee figcaption{ display:grid; gap:4px }
.cp-tee b{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:1.2rem; color:var(--paper) }
.cp-tee span{ font-family:var(--mono); font-size:.76rem; color:var(--mute) }
@media (max-width:820px){ .cp-inclui__g{ grid-template-columns:minmax(0,1fr) } }

/* ---------- LOTES ---------- */
.cp-esc{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); max-width:980px; margin-inline:auto }
.cp-esc__i{
  position:relative; display:grid; gap:4px; padding:clamp(18px,2vw,28px); border-radius:var(--r);
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  transition:opacity .7s var(--e), transform .8s var(--e);
}
.cp-esc__n{ font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute) }
.cp-esc__v{ font-family:var(--disp); font-weight:900; font-size:clamp(2.2rem,3.6vw,3rem); line-height:1; color:var(--paper) }
.cp-esc__d{ font-size:.92rem; color:#bdbdbd }
.cp-esc__b{
  position:absolute; top:14px; right:14px; padding:4px 10px; border-radius:var(--rp);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  background:var(--lime); color:#050505; opacity:0; transform:scale(.95); transition:opacity .3s var(--e), transform .3s var(--e);
}
.cp-esc__i.is-atual{ border-color:var(--lime); background:rgba(197,255,26,.07); box-shadow:0 0 0 1px rgba(197,255,26,.25), 0 18px 50px rgba(197,255,26,.08) }
.cp-esc__i.is-atual .cp-esc__v{ color:var(--lime) }
.cp-esc__i.is-atual .cp-esc__b{ opacity:1; transform:none }
.cp-esc__i.is-passado{ opacity:.5 }
.js .cp-esc__i.is-passado.cp-rv.is-in{ opacity:.5 }
.cp-esc__i.is-passado .cp-esc__v, .cp-esc__i.is-passado .cp-esc__d{ text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:rgba(255,255,255,.5) }
.cp-esc__nota{ text-align:center; margin-top:22px; color:#bdbdbd }
@media (max-width:640px){
  .cp-esc{ grid-template-columns:minmax(0,1fr) }
  .cp-esc__i{ grid-template-columns:auto minmax(0,1fr); align-items:baseline; column-gap:16px }
  .cp-esc__n{ grid-column:1 / -1 }
  .cp-esc__v{ font-size:2.2rem }
}

/* ---------- COMBINE ---------- */
.cp-comb__in{
  max-width:860px; margin-inline:auto; padding:clamp(24px,3.4vw,48px);
  border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.02);
}
.cp-comb h2{ margin:14px 0 16px; font-size:clamp(1.9rem,4vw,3rem) }
.cp-comb p + p{ margin-top:12px }

/* ---------- PERGUNTAS ---------- */
.cp-faq__in{ max-width:900px }
.cp-qs{ display:grid; gap:0; border-top:1px solid var(--line) }
.cp-q{ border-bottom:1px solid var(--line) }
.cp-q summary{
  list-style:none; cursor:pointer; position:relative; padding:20px 44px 20px 0; min-height:44px;
  font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.15rem,1.8vw,1.4rem); color:var(--paper); transition:color .2s ease;
}
.cp-q summary::-webkit-details-marker{ display:none }
.cp-q summary::after{
  content:''; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-9px;
  border-right:2px solid var(--lime); border-bottom:2px solid var(--lime); transform:rotate(45deg);
  transition:transform .3s var(--e);
}
.cp-q[open] summary::after{ transform:rotate(225deg) translate(-4px,-4px) }
.cp-q p{ padding:0 0 20px; max-width:720px }

/* ---------- ORGANIZAÇÃO ---------- */
.cp-contato{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; max-width:1100px; margin-inline:auto }
.cp-c{
  display:flex; align-items:center; gap:12px; min-height:64px; padding:14px 16px; border-radius:var(--r);
  border:1px solid var(--line); background:rgba(255,255,255,.02); min-width:0;
  transition:transform .15s ease;
}
.cp-c svg{ color:var(--lime); width:26px; height:26px }
.cp-c span{ display:grid; min-width:0; font-size:.88rem; color:#cfcfcf; overflow-wrap:anywhere; line-height:1.35 }
.cp-c b{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--paper); font-size:.92rem }
.cp-c--zap{ background:var(--lime); border-color:var(--lime) }
.cp-c--zap svg, .cp-c--zap span, .cp-c--zap b{ color:#050505 }
.cp-c:active{ transform:scale(.97) }
@media (max-width:1000px){ .cp-contato{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:520px){ .cp-contato{ grid-template-columns:minmax(0,1fr) } }

/* ---------- hover só com mouse; rolagem acende no toque ---------- */
@media (hover:hover) and (pointer:fine){
  .cp-tl__i:hover, .cp-tee:hover{ border-color:rgba(197,255,26,.55); box-shadow:0 0 0 1px rgba(197,255,26,.18), 0 16px 50px rgba(197,255,26,.07) }
  .cp-back:hover{ color:var(--paper); border-bottom-color:var(--line) }
  .cp-copy:hover{ border-color:var(--lime); color:var(--lime) }
  .cp-zap:hover{ color:var(--lime) }
  .cp-q summary:hover{ color:var(--lime) }
  .cp-pill:hover span{ border-color:rgba(197,255,26,.6) }
  .cp-a:hover, .cp-nota a:hover{ border-bottom-color:var(--lime) }
}
.cp-tl__i.is-hot, .cp-tee.is-hot{ border-color:rgba(197,255,26,.55); box-shadow:0 0 0 1px rgba(197,255,26,.18), 0 16px 50px rgba(197,255,26,.07) }

/* ---------- barra fixa do celular ---------- */
.cp-bar{ display:none }
@media (max-width:900px){
  .cp-page{ padding-bottom:calc(76px + env(safe-area-inset-bottom)) }
  .cp-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    display:flex; gap:10px; align-items:center;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:rgba(5,5,5,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    transition:transform .3s var(--e), opacity .3s var(--e);
  }
  .cp-bar.is-off{ transform:translateY(110%); opacity:0; pointer-events:none }
  .cp-bar__go{ flex:1 1 auto; min-height:50px }
  .cp-bar__zap{
    flex:none; width:50px; height:50px; border-radius:50%; border:1px solid rgba(197,255,26,.5);
    display:flex; align-items:center; justify-content:center; color:var(--lime);
  }
  .cp-bar__zap:active{ transform:scale(.95) }
}

/* ---------- aviso (fica no topo: o teclado do celular não cobre) ---------- */
.cp-toast{
  position:fixed; left:50%; top:calc(12px + env(safe-area-inset-top)); z-index:80;
  width:min(520px, calc(100vw - 24px)); transform:translate(-50%, 0);
  padding:14px 16px; border-radius:12px; background:#1a0c0b; border:1px solid #ff6b5e;
  color:var(--paper); font-size:.94rem; line-height:1.45; box-shadow:0 18px 50px rgba(0,0,0,.6);
  animation:cpToast .3s var(--e) both;
}
.cp-toast.is-ok{ background:#0f1404; border-color:var(--lime) }
.cp-toast[hidden]{ display:none !important }
@keyframes cpToast{ from{ opacity:0; transform:translate(-50%,-10px) } to{ opacity:1; transform:translate(-50%,0) } }

/* ---------- movimento reduzido: só fades curtos ---------- */
@media (prefers-reduced-motion:reduce){
  .js .cp-rv{ transform:none; transition:opacity .25s linear; transition-delay:0s }
  .cp-hero__top, .cp-hero__dw, .cp-hero__cta{ animation:cpFade .25s linear both }
  .cp-step:not([hidden]){ animation:cpFade .2s linear both }
  .cp-toast{ animation:cpFade .2s linear both }
  .cp-hero__bg img{ transform:none !important; will-change:auto }
  .cp-tl__i.is-hot, .cp-tee.is-hot{ box-shadow:none }
  .cp-bar{ transition:opacity .2s linear }
  .cp-bar.is-off{ transform:none }
}
@keyframes cpFade{ from{ opacity:0 } to{ opacity:1 } }

/* =====================================================================
   v2 (06/11/2026, pedido do Jordan): lockup igual ao do Instagram,
   foto maior embaixo do título, dias em cartaz, sem texto explicando.
   ===================================================================== */

/* ---------- HERO v2 ---------- */
.cp-hero{ min-height:min(94svh, 900px); align-items:flex-end }
.cp-hero__in{ display:flex; flex-direction:column; align-items:flex-start; animation:cpUp .9s var(--e) both }

.cp-lk{ --fs:clamp(118px, 13.5vw, 210px); margin:0 0 0 calc(var(--fs) * .06); display:flex; flex-direction:column; align-items:center; letter-spacing:0; line-height:1; font-size:inherit }
.cp-lk__box{ position:relative; display:inline-block; margin-top:calc(var(--fs) * .52) }
.cp-lk__camp, .cp-lk__echo{
  display:block; font-family:var(--disp); font-weight:900; font-size:var(--fs); line-height:.84;
  color:var(--lime); letter-spacing:-.005em; text-transform:uppercase;
}
.cp-lk__camp{ position:relative; z-index:2; text-shadow:0 0 calc(var(--fs) * .2) rgba(197,255,26,.24) }
.cp-lk__echo{ position:absolute; left:0; top:0; z-index:1; pointer-events:none }
.cp-lk__echo.e1{ transform:translateX(calc(var(--fs) * .055)); filter:blur(calc(var(--fs) * .007)); opacity:.34 }
.cp-lk__echo.e2{ transform:translateX(calc(var(--fs) * .124)); filter:blur(calc(var(--fs) * .017)); opacity:.18 }
.cp-lk__echo.e3{ transform:translateX(calc(var(--fs) * .22));  filter:blur(calc(var(--fs) * .031)); opacity:.08 }
.cp-lk__script{
  position:absolute; z-index:3; left:50%; top:calc(var(--fs) * -.586); width:calc(var(--fs) * 2.14); height:auto; max-width:none;
  transform:translateX(-50%) rotate(-5deg);
  filter:drop-shadow(0 calc(var(--fs) * .038) calc(var(--fs) * .017) rgba(0,28,10,.95)) drop-shadow(0 calc(var(--fs) * .097) calc(var(--fs) * .11) rgba(0,0,0,.6));
}
.cp-lk__star{ position:absolute; z-index:3; width:calc(var(--fs) * .62); height:auto; left:86.75%; top:97.2%; transform:translate(-50%,-50%); pointer-events:none; mix-blend-mode:screen }
.cp-lk__ano{
  font-family:var(--disp); font-weight:900; font-size:calc(var(--fs) * .328); letter-spacing:.42em; margin-right:-.42em;
  margin-top:calc(var(--fs) * .075); color:var(--paper);
}
/* 09/11: o tracking sobra à direita; o recuo igual à esquerda deixa caixa e tinta no mesmo eixo */
.cp-lk__ano{ margin-right:0; padding-left:.42em }

.cp-hero__data{
  display:flex; align-items:center; gap:14px; margin:clamp(18px,2.2vw,26px) 0 0;
  font-family:var(--mono); font-weight:700; font-size:clamp(1rem,1.5vw,1.3rem); letter-spacing:.2em; color:var(--paper); white-space:nowrap;
}
.cp-hero__data i{ display:block; width:clamp(28px,4vw,64px); height:1px; background:rgba(250,250,250,.45) }
.cp-hero__lugar{ margin:8px 0 0; font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:#bdbdbd }
.cp-hero__cta{ margin-top:clamp(22px,3vw,36px) }

/* MOVE LIKE US na borda, correndo devagar e sumindo */
.cp-mlu{
  position:absolute; z-index:2; top:0; bottom:0; right:clamp(6px,1.4vw,22px); width:1.6em; margin:0; overflow:hidden; pointer-events:none;
  font-family:var(--mono); font-weight:700; font-size:clamp(.66rem,.9vw,.8rem); letter-spacing:.2em; color:var(--lime);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 52%, transparent 92%);
          mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 52%, transparent 92%);
}
.cp-mlu span{ display:block; writing-mode:vertical-rl; white-space:nowrap; animation:cpMlu 38s linear infinite }
@keyframes cpMlu{ from{ transform:translateY(0) } to{ transform:translateY(-50%) } }

@media (max-width:900px){
  /* foto ocupa a tela: título em cima, a cena no meio, preço e botão embaixo */
  .cp-hero{ min-height:calc(100svh - 64px); padding-top:96px; padding-bottom:22px }
  .cp-hero__bg img{ object-position:64% 50%; opacity:.9 }
  .cp-hero__bg::after{ background:
      linear-gradient(180deg, rgba(5,5,5,.9) 0, rgba(5,5,5,.35) 42%, rgba(5,5,5,.15) 58%, rgba(5,5,5,.85) 82%, var(--ink) 100%) }
  .cp-hero__in{ flex:1; align-self:stretch }
  .cp-hero__data{ margin-top:auto }
  .cp-lk{ --fs:clamp(92px, 30vw, 150px) }
  .cp-hero__cta{ width:100% }
}

/* ---------- INSCRIÇÃO: camiseta no lugar do texto ---------- */
.cp-insc__side{ margin:0; position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); padding:0 }
.cp-insc__side img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover }
.cp-insc__side figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,2vw,26px); display:grid; gap:4px;
  background:linear-gradient(0deg, rgba(5,5,5,.92), rgba(5,5,5,0));
}
.cp-insc__side b{ font-family:var(--disp); font-weight:900; font-size:clamp(1.8rem,2.6vw,2.4rem); line-height:.95; text-transform:uppercase; color:var(--lime) }
.cp-insc__side span{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#cfcfcf }

/* ---------- LOTES v2 ---------- */
.cp-lotes{ padding-block:clamp(24px,4vw,64px) clamp(56px,7vw,104px) }
.cp-esc__nota{ margin-top:clamp(22px,3vw,34px) }

@media (prefers-reduced-motion:reduce){
  .cp-hero__in{ animation:cpFade .25s linear both }
  .cp-mlu span{ animation:none }
}
.cp-insc__side{ max-width:440px; justify-self:end; width:100% }
.cp-insc__side img{ aspect-ratio:1/1; object-position:50% 30% }

/* =====================================================================
   v3 (09/11/2026, correções do Jordan): capa da campanha no hero (janela
   do 7, Joel enterrando), foto que desce por baixo da inscrição e vai
   escurecendo, hero centralizado no celular, lotes em selo, contatos.
   ===================================================================== */

/* ---------- HERO v3 ---------- */
.cp-hero{ --cp-ext:clamp(180px, 30vh, 340px); overflow:visible }
.cp-hero__bg{
  inset:0 0 auto 0; height:calc(100% + var(--cp-ext));
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - var(--cp-ext) - 140px), transparent 100%);
          mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - var(--cp-ext) - 140px), transparent 100%);
}
.cp-hero__bg img{ object-position:100% 0; opacity:1 }
/* véu só onde o texto senta: faixa da esquerda (lockup) e o topo (menu) */
.cp-hero__bg::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,.72) 0, rgba(5,5,5,0) 150px),
    linear-gradient(90deg, rgba(5,5,5,.86) 0%, rgba(5,5,5,.6) 30%, rgba(5,5,5,0) 54%);
}
.cp-insc{ position:relative; z-index:1 }

@media (max-width:900px){
  .cp-hero{ --cp-ext:26svh }
  .cp-hero__bg img{ object-position:50% 0; opacity:1 }
  .cp-hero__bg::after{
    background:
      linear-gradient(180deg, rgba(5,5,5,.7) 0, rgba(5,5,5,0) 110px),
      linear-gradient(180deg, rgba(5,5,5,0) 34%, rgba(5,5,5,.62) 50%, rgba(5,5,5,.78) 70%, rgba(5,5,5,.82) 100%);
  }
  /* tudo do hero no eixo da tela */
  .cp-hero__in{ align-items:center; text-align:center }
  .cp-lk{ margin:auto 0 0 }
  .cp-hero__data{ margin-top:clamp(14px,4vw,20px); justify-content:center }
  .cp-hero__lugar{ text-align:center }
  .cp-hero__cta{ flex-direction:column; align-items:center; justify-content:center; gap:14px; flex-wrap:nowrap }
  .cp-preco{ align-items:center; text-align:center }
  .cp-hero__btn{ min-width:min(100%, 300px); justify-content:center }
}

/* ---------- LOTES v3: selos de nível ---------- */
.cp-esc__i{
  grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:18px; row-gap:0;
  padding:clamp(20px,2.2vw,28px); border-radius:22px; overflow:visible; isolation:isolate;
  background:radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.04), transparent 60%), #070907;
  border:1px solid rgba(255,255,255,.08);
}
/* ponto de costura por dentro da borda, como os patches do app */
.cp-esc__i::before{
  content:''; position:absolute; inset:7px; border-radius:16px; pointer-events:none;
  border:1.5px dashed rgba(255,255,255,.14);
}
/* grão do Jordan no campo */
.cp-esc__i::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:url('/images/camp/grain.webp') repeat; background-size:200px 200px; opacity:.16;
}
.cp-esc__tx{ display:grid; gap:3px; min-width:0 }
.cp-esc__m{
  position:relative; width:clamp(56px,5.4vw,68px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background:#0c100a; border:2px dashed rgba(255,255,255,.22);
  transition:background .3s var(--e), border-color .3s var(--e), box-shadow .3s var(--e);
}
.cp-esc__m b{ font-family:var(--disp); font-weight:900; font-size:clamp(1.7rem,2.4vw,2.1rem); line-height:1; color:#8c8c8c }
.cp-esc__m::after{ content:''; position:absolute; inset:5px; border-radius:50%; border:1px dashed transparent }

.cp-esc__b{
  display:none; position:absolute; top:auto; bottom:clamp(18px,2vw,24px); right:clamp(16px,1.8vw,22px); opacity:1; transform:none;
  padding:4px 10px; border-radius:var(--rp); font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
}
.cp-esc__b--hoje{ background:var(--lime); color:#050505 }
.cp-esc__b--abre{ background:transparent; color:#cfcfcf; border:1px dashed rgba(255,255,255,.3) }
.cp-esc__b--fim{ background:rgba(255,255,255,.08); color:var(--mute) }
.cp-esc__i.is-atual .cp-esc__b--hoje, .cp-esc__i.is-travado .cp-esc__b--abre, .cp-esc__i.is-passado .cp-esc__b--fim{ display:inline-block }

/* desbloqueado: o lote de hoje acende inteiro */
.cp-esc__i.is-atual{
  border-color:rgba(197,255,26,.75);
  background:radial-gradient(120% 100% at 0% 0%, rgba(197,255,26,.16), transparent 62%), #070907;
  box-shadow:0 0 0 1px rgba(197,255,26,.25), 0 18px 50px rgba(197,255,26,.10);
}
.cp-esc__i.is-atual::before{ border-color:rgba(197,255,26,.55) }
.cp-esc__i.is-atual .cp-esc__m{ background:var(--lime); border:2px solid var(--lime); box-shadow:0 0 0 4px rgba(197,255,26,.14), 0 0 26px rgba(197,255,26,.4) }
.cp-esc__i.is-atual .cp-esc__m::after{ border-color:rgba(5,5,5,.42) }
.cp-esc__i.is-atual .cp-esc__m b{ color:#050505 }
.cp-esc__i.is-atual .cp-esc__n{ color:var(--lime) }

/* próximos níveis: pré-bordados, só a costura */
.cp-esc__i.is-travado .cp-esc__v{ color:#9a9a9a }
.cp-esc__i.is-travado .cp-esc__d{ color:var(--mute) }
.cp-esc__i.is-travado::after{ opacity:.1 }

/* já passou: costura apagada */
.cp-esc__i.is-passado .cp-esc__m{ border-style:solid; border-color:rgba(255,255,255,.12) }

@media (max-width:640px){
  .cp-esc__i{ align-items:center }
  .cp-esc__b{ right:16px }
}
@media (hover:hover) and (pointer:fine){
}

/* ---------- QUEM FAZ: contatos com cara de botão ---------- */
.cp-contato{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.cp-c{ border-color:rgba(197,255,26,.32); background:rgba(197,255,26,.035); cursor:pointer }
/* WhatsApp na frente, faixa inteira; os quatro Instagram embaixo */
.cp-c--zap{ grid-column:1 / -1; justify-content:center; background:var(--lime); border-color:var(--lime) }
.cp-c--zap span{ flex:0 1 auto }
.cp-c span{ overflow-wrap:normal; word-break:normal }
.cp-c span{ flex:1 1 auto }
.cp-c b{ letter-spacing:.06em }
.cp-c__ar{
  flex:none; margin-left:auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  font-style:normal; font-size:.95rem; line-height:1; color:var(--lime); border:1px solid rgba(197,255,26,.45);
  transition:transform .25s var(--e);
}
.cp-c--zap .cp-c__ar{ color:#050505; border-color:rgba(5,5,5,.45) }
@media (hover:hover) and (pointer:fine){
  .cp-c:hover .cp-c__ar{ background:var(--lime); color:#050505; transform:translate(2px,-2px) }
  .cp-c--zap:hover .cp-c__ar{ background:#050505; color:var(--lime) }
}
.cp-c.is-hot .cp-c__ar{ background:var(--lime); color:#050505 }
.cp-c--zap.is-hot .cp-c__ar{ background:#050505; color:var(--lime) }
@media (max-width:1000px){ .cp-contato{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:520px){ .cp-contato{ grid-template-columns:minmax(0,1fr) } .cp-c--zap{ justify-content:flex-start } }

/* =====================================================================
   v4 (09/11/2026, rodada 2 do Jordan): datas grandes que contam com o
   scroll, mural de fotos igual ao da home, logos da organização,
   camiseta sobre as ondas com o título no meio, parallax leve.
   ===================================================================== */

/* ---------- OS TRÊS DIAS ---------- */
.cp-dias{ padding-block:clamp(56px,7vw,110px) clamp(28px,4vw,56px) }
.cp-dd{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px,3vw,48px) }
.cp-d{ position:relative; padding-top:clamp(18px,2vw,26px); border-top:1px solid rgba(197,255,26,.28) }
.cp-d__n{ display:flex; align-items:flex-start; gap:clamp(8px,1vw,14px); margin:0 }
.cp-d__n b{
  display:inline-block; min-width:2ch; font-family:var(--disp); font-weight:900; font-variant-numeric:tabular-nums;
  font-size:clamp(6.6rem,12.5vw,11.5rem); line-height:.8; letter-spacing:-.02em; color:var(--lime);
  text-shadow:0 0 clamp(20px,3vw,44px) rgba(197,255,26,.22);
}
.cp-d__n span{
  margin-top:.5em; font-family:var(--mono); font-weight:700; font-size:clamp(.8rem,1vw,.95rem); letter-spacing:.24em; color:var(--paper);
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.cp-d__tx{ margin-top:clamp(18px,2vw,28px) }
.cp-d__q{ margin:0; font-family:var(--mono); font-weight:700; font-size:.76rem; letter-spacing:.2em; color:var(--lime) }
.cp-d__t{ margin:8px 0 6px; font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:clamp(1.9rem,2.8vw,2.6rem); line-height:.95; color:var(--paper) }
.cp-d__t i{ font-style:normal; color:var(--lime) }
.cp-d__s{ margin:0; font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.45; color:#cfcfcf }
@media (max-width:760px){
  .cp-dd{ grid-template-columns:minmax(0,1fr); gap:0 }
  .cp-d{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:18px; padding:20px 0 22px }
  .cp-d:last-child{ border-bottom:1px solid rgba(197,255,26,.28) }
  .cp-d__n b{ font-size:clamp(5.6rem,27vw,7rem) }
  .cp-d__tx{ margin-top:0 }
  .cp-d__t{ font-size:clamp(1.7rem,8vw,2.1rem) }
}

/* ---------- FOTOS (a parede e o drift vêm do style.css e do drift.js da home) ---------- */
.cp-fotos{ padding-block:clamp(20px,3vw,40px) clamp(40px,6vw,90px) }
.cp-fotos .kicker{ justify-content:center; text-align:center; margin:0 auto clamp(16px,1.8vw,22px); display:flex }

/* ---------- CAMISETA: ondas atrás, título no meio ---------- */
.cp-insc__side img{ object-position:50% 0 }
.cp-insc__side::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('/images/camp/grain.webp') repeat; background-size:220px 220px; opacity:.12;
}
.cp-insc__side figcaption{ z-index:1; justify-items:center; text-align:center; padding-bottom:clamp(20px,2.4vw,30px) }

@media (prefers-reduced-motion:reduce){
  .cp-dd{ transform:none !important }
}

/* =====================================================================
   v5 (09/11/2026, rodada 3 do Jordan): dias no eixo no desktop, brilho de
   contorno do site nos lotes e nos contatos, faixa de logos no celular.
   ===================================================================== */

/* ---------- DIAS: tudo no meio no desktop (o celular não muda) ---------- */
@media (min-width:761px){
  .cp-dd{ max-width:1080px; margin-inline:auto }
  .cp-d{ text-align:center }
  .cp-d__n{ justify-content:center }
  /* o "DEZ" de pé fica à direita do número; um gêmeo invisível à esquerda
     deixa os dígitos no centro da coluna */
  .cp-d__n::before{
    content:'DEZ'; visibility:hidden; margin-top:.5em; font-family:var(--mono); font-weight:700;
    font-size:clamp(.8rem,1vw,.95rem); letter-spacing:.24em; writing-mode:vertical-rl;
  }
}

/* ---------- BRILHO DE CONTORNO (o .is-hot e o anel de borda do justball.com.br) ----------
   .cp-fx é uma camada só: o ::before é o anel na borda (máscara, igual ao .plan
   da home, com o ponto de luz em --gx/--gy) e o ::after é a luz em volta.
   Acende quando o card entra na tela, apaga quando sai, acende de novo na volta.
   Com mouse, o anel segue o ponteiro e o relevo vem de sombra e brilho, nunca
   de o card subir. Só opacity anima. */
.cp-esc__i, .cp-c{ position:relative }
.cp-fx{ position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:2 }
.cp-fx::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:
    radial-gradient(180px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.9), rgba(197,255,26,.9) 26%, transparent 62%),
    linear-gradient(135deg, rgba(197,255,26,.95), rgba(3,199,63,.5) 40%, rgba(197,255,26,.12) 64%, rgba(197,255,26,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:0; transition:opacity .6s var(--e);
}
.cp-fx::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 1px rgba(197,255,26,.2), 0 0 34px rgba(197,255,26,.16), 0 22px 54px rgba(0,0,0,.5);
  opacity:0; transition:opacity .6s var(--e);
}
.is-hot > .cp-fx::before{ opacity:.9 }
.is-hot > .cp-fx::after{ opacity:.7 }
@media (hover:hover) and (pointer:fine){
  .cp-esc__i:hover > .cp-fx::before, .cp-c:hover > .cp-fx::before{ opacity:1 }
  .cp-esc__i:hover > .cp-fx::after, .cp-c:hover > .cp-fx::after{ opacity:1 }
}
/* lote travado acende mais baixo: é o próximo nível, não o de hoje */
.cp-esc__i.is-travado.is-hot > .cp-fx::before{ opacity:.45 }
.cp-esc__i.is-travado.is-hot > .cp-fx::after{ opacity:.35 }
@media (hover:hover) and (pointer:fine){
  .cp-esc__i.is-travado:hover > .cp-fx::before, .cp-esc__i.is-travado:hover > .cp-fx::after{ opacity:1 }
}
.cp-esc__i.is-passado > .cp-fx{ display:none }
/* no WhatsApp (fundo lima) o anel é escuro e a luz em volta é lima */
.cp-c--zap > .cp-fx::before{
  background:
    radial-gradient(180px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.85), transparent 60%),
    linear-gradient(135deg, rgba(5,5,5,.55), rgba(5,5,5,.15) 50%, rgba(5,5,5,.5));
}
.cp-c--zap > .cp-fx::after{ box-shadow:0 0 44px rgba(197,255,26,.38), 0 18px 44px rgba(0,0,0,.45) }

/* ---------- LOTES: mais textura no selo ---------- */
.cp-esc__i{
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.035) 46%, transparent 54%),
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.05), transparent 60%),
    #070907;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.6);
}
.cp-esc__i::after{ opacity:.22 }
.cp-esc__i.is-atual{
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.05) 45%, transparent 54%),
    radial-gradient(120% 100% at 0% 0%, rgba(197,255,26,.17), transparent 62%),
    #070907;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(197,255,26,.25), 0 18px 50px rgba(197,255,26,.10);
}
.cp-esc__i.is-travado::after{ opacity:.14 }

/* ---------- QUEM FAZ: logos ---------- */
.cp-lgs{ --lh:clamp(40px,3.8vw,52px); margin:0 auto clamp(30px,3.4vw,46px) }
.cp-lgs__track{ display:flex; justify-content:center }
.cp-logos{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(22px,3vw,40px) clamp(30px,5vw,72px);
}
.cp-logos li{ display:flex; align-items:center; flex:none }
.cp-logos img{ display:block; height:calc(var(--lh) * var(--s, 1)); width:auto; max-width:none; opacity:.92; transition:opacity .3s var(--e) }
@media (hover:hover) and (pointer:fine){ .cp-logos img:hover{ opacity:1 } }
.cp-logos--dup{ display:none }

/* celular: faixa infinita como a de clientes da Hypearts. Dentro do .wrap,
   pontas em degradê, conteúdo duplicado uma vez (a cópia é aria-hidden), e a
   emenda fecha porque cada logo leva o mesmo espaço à direita, sem gap. */
@media (max-width:620px){
  .cp-lgs{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  .cp-lgs__track{ justify-content:flex-start; width:max-content; animation:cpLogos 18s linear infinite; will-change:transform; backface-visibility:hidden }
  .cp-logos, .cp-logos--dup{ display:flex; flex-wrap:nowrap; gap:0 }
  .cp-logos li{ margin-right:44px }
}
@keyframes cpLogos{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

@media (prefers-reduced-motion:reduce){
  .cp-fx::before, .cp-fx::after{ transition:none }
  .cp-lgs{ -webkit-mask-image:none; mask-image:none }
  .cp-lgs__track{ animation:none; width:auto; justify-content:center }
  .cp-logos--dup{ display:none !important }
  .cp-logos{ display:grid; grid-template-columns:repeat(2, auto); justify-content:center; justify-items:center; gap:26px 44px }
  .cp-logos li{ margin-right:0 }
}

/* sem palavra órfã no apoio dos dias (celular quebra em duas linhas) */
.cp-d__s, .cp-d__t{ text-wrap:balance }

/* ===== Quem abre o camp (12/11) ===== */
.cp-quem{ position:relative; padding-block:clamp(48px,7vw,96px) }
.cp-quem__fig{ margin:0 0 clamp(28px,4vw,48px) }
.cp-quem__depth{ position:relative; aspect-ratio:1920/800; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%) }
/* mesmo motor da home (js/depth.js): cada plano desce numa velocidade; o fundo tem folga por scale */
.cp-quem__pl{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block; will-change:transform; transform:translate3d(0,0,0) }
.cp-quem__pl--bg{ transform-origin:center center; scale:1.1 }
@media (max-width:760px){ .cp-quem__depth{ aspect-ratio:1.4 } .cp-quem__pl{ object-position:50% top } }
@media (prefers-reduced-motion:reduce){ .cp-quem__pl{ transform:none !important } }
.cp-quem__lead{ max-width:46ch; margin:12px auto 0; text-align:center; color:rgba(250,250,250,.78); font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.5 }
.cp-quem__l{ list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,28px) }
.cp-quem__l li{ display:flex; align-items:flex-start; gap:16px; padding-top:18px; border-top:1px solid rgba(197,255,26,.35) }
.cp-quem__av{ flex:none; width:88px; height:88px; border-radius:50%; box-shadow:0 0 0 2px var(--lime), 0 0 0 5px #050505, 0 0 0 6px rgba(197,255,26,.35) }
.cp-quem__tx{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.cp-quem__l b{ font-family:var(--disp); font-weight:900; font-size:clamp(1.3rem,2vw,1.7rem); text-transform:uppercase; letter-spacing:.01em; line-height:1 }
.cp-quem__l span{ color:rgba(250,250,250,.78); line-height:1.5 }
.cp-quem__l a{ font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--lime); padding-block:6px; width:max-content }
.cp-quem__cta{ margin-top:clamp(24px,3vw,40px); text-align:center }
@media (max-width:760px){
  .cp-quem__l{ grid-template-columns:1fr }
}