/* Quem criou o método: JR Ortiz e Rejane Nunes, com os lançamentos do método (JR, 02/11).
   Usado na página Vender e na página inicial. Texto à esquerda, solto, no desenho do site;
   fotos à direita: ela de branco na frente, por cima do braço dele; ele de escuro atrás. */
.cri{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.5fr);gap:clamp(20px,4vw,56px);align-items:center;margin-top:clamp(40px,7svh,90px)}
.cri-txt{position:relative;z-index:2;display:grid;gap:clamp(16px,2.4svh,26px)}
.cri-rot{margin:0;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--vivo)}
.cri-rot::before{content:"";width:34px;height:1px;background:var(--vivo);opacity:.7}
.cri-t{margin:0;font-family:var(--disp);font-weight:800;font-stretch:70%;font-size:clamp(2.6rem,5.2vw,5.2rem);line-height:.9;letter-spacing:-.018em;color:var(--papel);text-wrap:balance}
.cri-t em{display:block;font-style:normal;color:var(--vivo)}
.cri-p{margin:0;max-width:48ch;font-size:1.0625rem;line-height:1.6;color:var(--dim)}
.cri-p b{color:var(--papel);font-weight:600}
.cri-nums{list-style:none;margin:clamp(6px,1.4svh,14px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.cri-nums li{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid rgba(79,191,127,.45)}
.cri-nums b{font-family:var(--disp);font-weight:900;font-stretch:62%;font-size:clamp(3.4rem,5.8vw,5.6rem);line-height:.86;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--vivo);text-shadow:0 0 34px rgba(79,191,127,.28)}
.cri-nums span{font-size:.9375rem;line-height:1.35;color:var(--dim)}
.cri-nota{margin:0;font-size:.9375rem;color:var(--faint)}

/* fotos: luz verde e a esfera parada atrás (a de 6 nós, sem nomes), chão de luz */
.cri-fotos{position:relative;margin:0;display:grid;align-items:end;min-height:clamp(420px,64svh,680px);isolation:isolate}
.cri-fotos::before{content:"";position:absolute;z-index:-1;left:52%;top:44%;width:96%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:url("img/esfera-estatica.svg") center/contain no-repeat,radial-gradient(closest-side,rgba(62,154,103,.28),rgba(62,154,103,.07) 62%,transparent 100%)}
.cri-fotos::after{content:"";position:absolute;z-index:3;left:4%;right:0;bottom:0;height:22%;background:linear-gradient(180deg,transparent,var(--pedra) 92%);pointer-events:none}
.cri-fotos img{grid-area:1/1;display:block;height:auto;object-fit:contain;object-position:50% 100%}
.cri-fotos .jr{width:54%;justify-self:end;z-index:1}
.cri-fotos .rj{width:47%;justify-self:start;margin:0 0 2% 15%;z-index:2;filter:drop-shadow(14px 0 22px rgba(0,0,0,.55))}

/* entrada: o mesmo surgir do site; ele vem de lado, ela sobe depois */
.js:not(.estatico) .cri .surge{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js:not(.estatico) .cri .surge.vis{opacity:1;transform:none}
.js:not(.estatico) .cri .d1{transition-delay:.08s}.js:not(.estatico) .cri .d2{transition-delay:.16s}.js:not(.estatico) .cri .d3{transition-delay:.24s}.js:not(.estatico) .cri .d4{transition-delay:.32s}
.js:not(.estatico) .cri-fotos.surge{transform:none}
.js:not(.estatico) .cri-fotos.surge img{transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.js:not(.estatico) .cri-fotos.surge .jr{opacity:0;transform:translateX(40px)}
.js:not(.estatico) .cri-fotos.surge .rj{opacity:0;transform:translateY(36px);transition-delay:.35s}
.js:not(.estatico) .cri-fotos.surge.vis img{opacity:1;transform:none}

@media (max-width:860px){
  .cri{grid-template-columns:minmax(0,1fr)}
  .cri-fotos{order:-1;min-height:0;width:min(460px,100%);justify-self:center}
  .js:not(.estatico) .cri .surge,.js:not(.estatico) .cri-fotos.surge img{opacity:1;transform:none;transition:none}
}
@media (max-width:520px){.cri-nums{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.cri .surge,.cri-fotos img{opacity:1!important;transform:none!important;transition:none!important}}

/* capa do Vender: a Rejane ao lado do JR, na frente do braço dele (JR, 02/11).
   Mora dentro da caixa da foto dele, então anda junto no computador e no celular. */
.pt-capa-foto img.rj{position:absolute;z-index:1;left:-58%;bottom:1.5%;width:auto;height:78%;object-fit:contain;animation-delay:.45s}
.pt-capa h1{text-shadow:0 1px 3px rgba(10,16,13,.45),0 6px 34px rgba(10,16,13,.75)}
/* capa: a esfera parada atrás dos dois, com luz verde */
.pt-capa-foto::before{content:"";position:absolute;z-index:-1;left:24%;top:47%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;background:url("img/esfera-estatica.svg") center/contain no-repeat,radial-gradient(closest-side,rgba(62,154,103,.24),rgba(62,154,103,.06) 62%,transparent 100%);animation:pt-surge 2s var(--ease) .3s both}
@media (min-width:861px){.pt-capa-foto{right:calc(var(--g) - 1vw)}}
@media (max-width:860px){.pt-capa-foto{transform:translateX(78%)}}