/* Portfólio (#produto): cada card mostra o site real numa moldura de navegador.
   A imagem é um print do site (hero + segunda dobra); no hover ela rola do topo até a segunda dobra.
   Prints em /portfolio/sites/. Enquanto o print não existir, aparece a imagem de capa antiga.
   Só CSS: a marcação do React continua a mesma. */
.cortex-landing #produto .cl-feature-crm{--wbp-shot:url("/portfolio/sites/aizen.webp");--wbp-url:"empreendimentosaizen.com.br"}
.cortex-landing #produto .cl-feature-campaigns{--wbp-shot:url("/portfolio/sites/bodyrit.webp");--wbp-url:"bodyrit.com.br"}
.cortex-landing #produto .cl-feature-agents{--wbp-shot:url("/portfolio/sites/patio-contorno.webp");--wbp-url:"patiocontorno.com.br"}
.cortex-landing #produto .cl-feature-templates{--wbp-shot:url("/portfolio/sites/academia-irresistivel.webp");--wbp-url:"academiairresistivel.com.br"}

.cortex-landing #produto .cl-feature-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;counter-reset:wbp}
.cortex-landing #produto .cl-feature{--wbp-bar:34px;--wbp-top:68px;--wbp-text:clamp(128px,11vw,150px);grid-column:span 6;counter-increment:wbp;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(440px,40vw,540px);padding:0;border-radius:26px;border:1px solid #ffffff14;background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--cl-accent) 16%,transparent),transparent 70%),linear-gradient(180deg,#0d0f16,#07080b);box-shadow:0 30px 60px -40px #000;transition:border-color .4s,box-shadow .5s,translate .5s cubic-bezier(.2,.8,.2,1)}
.cortex-landing #produto .cl-feature:nth-child(4n+1),.cortex-landing #produto .cl-feature:nth-child(4n+4){grid-column:span 7}
.cortex-landing #produto .cl-feature:nth-child(4n+2),.cortex-landing #produto .cl-feature:nth-child(4n+3){grid-column:span 5}
.cortex-landing #produto .cl-feature:hover{border-color:color-mix(in srgb,var(--cl-accent) 60%,transparent);box-shadow:0 40px 70px -40px color-mix(in srgb,var(--cl-accent) 55%,transparent);translate:0 -4px}

/* Moldura de navegador. */
.cortex-landing #produto .cl-feature-media{position:absolute;top:var(--wbp-top);left:clamp(16px,1.8vw,26px);right:clamp(16px,1.8vw,26px);bottom:var(--wbp-text);z-index:1;height:auto;margin:0;border:1px solid #ffffff1f;border-radius:14px;overflow:hidden;background:#07080b;box-shadow:0 30px 50px -24px #000000e6,0 0 0 1px #00000080;animation:none!important;transform:none!important;translate:none!important;transition:box-shadow .5s}
.cortex-landing #produto .cl-feature:hover .cl-feature-media{box-shadow:0 36px 60px -24px #000,0 0 0 1px color-mix(in srgb,var(--cl-accent) 40%,transparent)}
.cortex-landing #produto .cl-feature-media picture{display:none}
/* Barra do navegador: três pontos + endereço do site. */
.cortex-landing #produto .cl-feature-media::before{content:var(--wbp-url);position:absolute;inset:0 0 auto;z-index:2;height:var(--wbp-bar);display:flex;align-items:center;justify-content:center;padding:0 70px;border-radius:0;box-shadow:inset 0 -1px 0 #ffffff12;background:radial-gradient(circle at 18px 50%,#ff5f57 0 4.5px,transparent 5px),radial-gradient(circle at 34px 50%,#febc2e 0 4.5px,transparent 5px),radial-gradient(circle at 50px 50%,#28c840 0 4.5px,transparent 5px),#14161a;color:#ffffff8c;font:500 11px/1 var(--cl-font);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:none}
/* Tela: o print rola do topo até a segunda dobra. */
.cortex-landing #produto .cl-feature-media::after{content:"";position:absolute;inset:var(--wbp-bar) 0 0;z-index:1;height:auto;border-radius:0;background-image:var(--wbp-shot),var(--cl-shot-blur-source);background-size:100% auto,cover;background-position:50% 0%,50% 30%;background-repeat:no-repeat;filter:none;opacity:1;-webkit-mask-image:none;mask-image:none;transition:background-position 5s cubic-bezier(.45,0,.25,1)}
.cortex-landing #produto .cl-feature:is(:hover,:focus-within) .cl-feature-media::after{background-position:50% 100%,50% 30%}

/* Texto embaixo da moldura. */
.cortex-landing #produto .cl-feature-title{position:static;z-index:auto;min-height:var(--wbp-text);display:flex;align-items:center;gap:20px;padding:0 clamp(20px,2.2vw,32px)}
.cortex-landing #produto .cl-feature h3{font-size:clamp(21px,1.9vw,27px);font-weight:500;letter-spacing:-.035em;line-height:1.15;color:#fff;max-width:none}
.cortex-landing #produto .cl-feature h3 a{color:inherit;text-decoration:none}
/* O card inteiro vira o link do projeto. */
.cortex-landing #produto .cl-feature h3 a::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit}
.cortex-landing #produto .cl-feature h3 a:focus-visible{outline:none}
.cortex-landing #produto .cl-feature:has(h3 a:focus-visible){outline:2px solid var(--cl-accent);outline-offset:3px}
.cortex-landing #produto .cl-feature p{color:#ffffffa6;font-size:13.5px;line-height:1.55;max-width:440px;margin-top:8px}
.cortex-landing #produto .cl-feature-title .cl-icon-box{width:46px;height:46px;border-radius:50%;color:#fff;border:1px solid #ffffff2e;background:#ffffff0f;box-shadow:none;transition:background .4s,border-color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.cortex-landing #produto .cl-feature:hover .cl-icon-box{background:var(--cl-accent);border-color:transparent;transform:rotate(-8deg) scale(1.06)}
.cortex-landing #produto .cl-feature-title .cl-icon-box::before{display:none}

/* Número do projeto e chamada "Ver projeto". */
.cortex-landing #produto .cl-feature::before{content:counter(wbp,decimal-leading-zero);position:absolute;top:22px;left:clamp(16px,1.8vw,26px);right:auto;bottom:auto;z-index:2;width:auto;height:auto;padding:6px 12px;border-radius:999px;background:#ffffff0d;border:1px solid #ffffff26;color:#fff;font:600 11px/1.2 var(--cl-font);letter-spacing:.14em;opacity:1;-webkit-mask-image:none;mask-image:none;animation:none}
.cortex-landing #produto .cl-feature::after{content:"Ver projeto  ↗";position:absolute;top:20px;right:clamp(16px,1.8vw,26px);left:auto;bottom:auto;z-index:2;width:auto;height:auto;padding:8px 15px;border-radius:999px;background:var(--cl-accent);color:var(--cl-on-accent);font:700 12px/1.2 var(--cl-font);white-space:pre;-webkit-mask-image:none;mask-image:none;-webkit-mask-composite:initial;mask-composite:initial;opacity:0;translate:0 -6px;transition:opacity .4s,translate .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 10px 24px -10px var(--cl-accent)}
.cortex-landing #produto .cl-feature:is(:hover,:focus-within)::after{opacity:1;translate:0 0}

/* Outros projetos: chips. */
.cortex-landing #produto .cl-source-label{display:none}
.cortex-landing #produto .wb-project-links{gap:10px;margin-top:40px;max-width:980px}
.cortex-landing #produto .wb-project-links::before{content:"Outros projetos";flex-basis:100%;text-align:center;margin-bottom:6px;color:var(--cl-subtle);font:600 10px/1.5 var(--cl-font);letter-spacing:.16em;text-transform:uppercase}
.cortex-landing #produto .wb-project-links a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--cl-border);border-radius:999px;background:var(--cl-surface);color:var(--cl-text);font-size:13px;line-height:1.2;transition:border-color .3s,color .3s,background .3s,translate .3s}
.cortex-landing #produto .wb-project-links a::after{content:"↗";color:var(--cl-accent);transition:translate .3s}
.cortex-landing #produto .wb-project-links a:is(:hover,:focus-visible){border-color:var(--cl-accent);background:var(--cl-accent-tint);color:var(--cl-text);translate:0 -2px}
.cortex-landing #produto .wb-project-links a:is(:hover,:focus-visible)::after{translate:2px -2px}
/* A prévia flutuante continua nos chips, mas some nos cards (o site já aparece na moldura). */
body:has(#produto .cl-feature:hover) .wb-bits-preview{display:none!important}

/* Toque (sem hover): o print rola sozinho, devagar, do hero até a segunda dobra e volta. */
@media (hover:none){
  .cortex-landing #produto .cl-feature-media::after{transition:none;animation:wbp-scroll 14s ease-in-out infinite alternate}
  .cortex-landing #produto .cl-feature:nth-child(2) .cl-feature-media::after{animation-delay:-3.5s}
  .cortex-landing #produto .cl-feature:nth-child(3) .cl-feature-media::after{animation-delay:-7s}
  .cortex-landing #produto .cl-feature:nth-child(4) .cl-feature-media::after{animation-delay:-10.5s}
}
@keyframes wbp-scroll{0%,18%{background-position:50% 0%,50% 30%}82%,100%{background-position:50% 100%,50% 30%}}

@media (max-width:860px){
  .cortex-landing #produto .cl-feature-grid{gap:16px}
  .cortex-landing #produto .cl-feature:nth-child(n){grid-column:span 12;min-height:clamp(420px,95vw,560px)}
}
@media (max-width:560px){
  .cortex-landing #produto .cl-feature{--wbp-bar:28px;--wbp-top:62px;--wbp-text:138px;border-radius:20px}
  .cortex-landing #produto .cl-feature-media{border-radius:11px}
  .cortex-landing #produto .cl-feature-media::before{font-size:10px;padding:0 56px;background:radial-gradient(circle at 14px 50%,#ff5f57 0 3.5px,transparent 4px),radial-gradient(circle at 26px 50%,#febc2e 0 3.5px,transparent 4px),radial-gradient(circle at 38px 50%,#28c840 0 3.5px,transparent 4px),#14161a}
  .cortex-landing #produto .cl-feature p{font-size:12.5px}
  .cortex-landing #produto .cl-feature-title .cl-icon-box{width:40px;height:40px}
  .cortex-landing #produto .cl-feature::after{opacity:1;translate:0 0;content:"↗";padding:7px 11px}
  .cortex-landing #produto .wb-project-links a{font-size:12px;padding:8px 13px}
}
@media (prefers-reduced-motion:reduce){
  .cortex-landing #produto .cl-feature,.cortex-landing #produto .cl-feature-media::after{transition:none;animation:none}
}
/* Vitrine do topo com print do site: mostra a hero e desce devagar até a segunda dobra. */
.cortex-landing .cl-tour-slide img.wb-shot{object-position:50% 0%}
.cortex-landing .cl-tour-slide.is-active img.wb-shot{animation:wbp-tour-pan 16s cubic-bezier(.45,0,.55,1) 1.2s infinite alternate}
@keyframes wbp-tour-pan{0%,12%{object-position:50% 0%}88%,100%{object-position:50% 100%}}
html.wb-lite .cortex-landing .cl-tour-slide.is-active img.wb-shot{animation:none}
@media (prefers-reduced-motion:reduce){.cortex-landing .cl-tour-slide.is-active img.wb-shot{animation:none}}