/* Kit Pertise sobre a lp-base (23/09/2026). Componentes comuns a Villa Garden, Havilah e Genesis.
   Regras: nada esconde conteúdo sem o kit.js ter carregado (.motion-ok), reduced-motion desliga tudo,
   sem lib, sem pin de página. Método: CLAUDE/skills/marcio/_altra-labs/ */

/* Movimento. <head> marca .motion-ok (evita piscar); kit.js confirma com .motion-live.
   Sem confirmação em 3 s (JS falhou ou atrasou), a trava revela tudo: página nunca fica vazia. */
.motion-ok .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.motion-ok .reveal.is-in{opacity:1;transform:none}
.motion-ok .img-reveal img{clip-path:inset(8% 0 0 0);transform:scale(1.06);transition:clip-path .9s var(--ease),transform 1.2s var(--ease)}
.motion-ok .img-reveal.is-in img{clip-path:inset(0);transform:none}
@keyframes kit-trava{to{opacity:1;transform:none;clip-path:inset(0)}}
.motion-ok:not(.motion-live) .reveal,.motion-ok:not(.motion-live) .img-reveal img{animation:kit-trava .01s 3s forwards}

/* Escalonamento: itens iguais entram um depois do outro (80 ms) */
.stagger>:nth-child(2){--i:1}.stagger>:nth-child(3){--i:2}.stagger>:nth-child(4){--i:3}
.stagger>:nth-child(5){--i:4}.stagger>:nth-child(6){--i:5}.stagger>:nth-child(7){--i:6}.stagger>:nth-child(n+8){--i:7}
.motion-ok .stagger>.reveal,.motion-ok .stagger>*>.reveal{transition-delay:calc(var(--i,0)*80ms)}

/* Entrada do hero em sequência: só transform, nunca opacidade (não atrasa o LCP) */
@keyframes kit-sobe{from{transform:translateY(12px)}}
.hero-seq>*{animation:kit-sobe .45s var(--ease) both}
.hero-seq>:nth-child(2){animation-delay:70ms}.hero-seq>:nth-child(3){animation-delay:140ms}
.hero-seq>:nth-child(4){animation-delay:210ms}.hero-seq>:nth-child(n+5){animation-delay:280ms}

/* Pausa: mídia de ponta a ponta entre capítulos */
.pausa{position:relative;margin:0;background:var(--dark)}
.pausa picture,.pausa img{display:block;width:100%}
.pausa img{height:clamp(420px,68vh,760px);object-fit:cover}
.pausa figcaption{padding:14px clamp(20px,4vw,40px) 0;font-size:13px;color:var(--muted);background:var(--paper)}
.pausa-frase{position:absolute;inset:auto 0 0;padding:clamp(72px,10vw,140px) clamp(20px,4vw,40px) clamp(28px,5vw,64px);background:linear-gradient(transparent,#000000b8 75%);color:#fff}
.pausa-frase p{max-width:24ch;font:400 clamp(28px,3.2vw,46px)/1.1 var(--font-display);letter-spacing:-.015em;text-shadow:0 2px 18px #0008}
@media(max-width:600px){.pausa img{height:auto;aspect-ratio:4/5}}

/* Processo com foto por etapa (linha do tempo, sem pin) */
.processo{list-style:none;margin:0;padding:0;counter-reset:etapa;position:relative}
.processo::before{content:'';position:absolute;left:21px;top:8px;bottom:8px;width:1px;background:var(--line-strong,var(--line))}
.processo-etapa{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding:0 0 clamp(48px,6vw,88px) 72px}
.processo-etapa:last-child{padding-bottom:0}
.processo-etapa::before{counter-increment:etapa;content:counter(etapa,decimal-leading-zero);position:absolute;left:0;top:0;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--surface);color:var(--accent-strong,var(--accent));font-size:14px;font-weight:600}
.processo-etapa:nth-child(even) .processo-foto{order:2}
.processo-foto{margin:0}
.processo-foto .organic{aspect-ratio:4/3;--organic:24px 24px 72px 24px}
.processo-foto figcaption{margin-top:12px;font-size:13px;color:var(--muted)}
.processo-texto h3{font-size:clamp(26px,2.4vw,34px)}
.processo-texto p{margin-top:14px;color:var(--muted);max-width:44ch}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .processo::after{content:'';position:absolute;left:21px;top:8px;bottom:8px;width:1px;background:var(--accent);transform-origin:top;animation:kit-trilho linear both;animation-timeline:view();animation-range:entry 40% exit 60%}
    @keyframes kit-trilho{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  }
}
@media(max-width:860px){
  .processo-etapa{grid-template-columns:1fr;gap:18px;padding-left:60px}
  .processo-etapa:nth-child(even) .processo-foto{order:0}
  .processo-etapa::before{width:40px;height:40px;font-size:13px}
  .processo::before,.processo::after{left:19px}
}

/* Antes e depois: controle nativo (teclado e leitor de tela), só o controle captura o toque */
.antes-depois{position:relative;margin:0}
.ad-palco{position:relative;overflow:hidden;border-radius:var(--organic-ad,24px);aspect-ratio:var(--ad-ratio,4/3);background:var(--surface)}
.ad-palco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad-depois{clip-path:inset(0 0 0 var(--pos,50%))}
.ad-rotulo{position:absolute;top:14px;padding:4px 12px;border-radius:999px;background:#1f241cb8;color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.ad-rotulo.antes{left:14px}.ad-rotulo.depois{right:14px}
.ad-linha{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px #0006;pointer-events:none}
.ad-linha::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 14px #0004}
.ad-controle{position:absolute;inset:auto 0 0;width:100%;height:56px;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ad-controle:focus-visible+.ad-foco{outline:2px solid var(--accent);outline-offset:4px}
.ad-foco{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.antes-depois figcaption{margin-top:12px;font-size:13px;color:var(--muted)}
.antes-depois:not(.ad-ativo) .ad-palco{display:grid;grid-template-columns:1fr 1fr;gap:8px;aspect-ratio:auto;background:none}
.antes-depois:not(.ad-ativo) .ad-palco img{position:static;aspect-ratio:var(--ad-ratio,4/3);border-radius:16px}
.antes-depois:not(.ad-ativo) .ad-depois{clip-path:none}
.antes-depois:not(.ad-ativo) .ad-linha,.antes-depois:not(.ad-ativo) .ad-controle{display:none}
.antes-depois:not(.ad-ativo) .ad-rotulo{top:10px}
.antes-depois:not(.ad-ativo) .ad-rotulo.depois{right:auto;left:calc(50% + 14px)}

/* Hierarquia de botões: conversão = .btn cheio; ação secundária = link, nunca botão cheio */
.link-sec{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.link-sec:hover{text-decoration-thickness:2px}

/* Título utilitário (FAQ, veja também, etapas) pesa menos que capítulo */
.heading--util h2,.faq-grid.util h2{font-size:clamp(28px,2.4vw,34px)}

/* Grade editorial: primeiro card maior, dá hierarquia sem alongar a página */
@media(min-width:861px){
  .cards--editorial{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto auto}
  .cards--editorial>:first-child{grid-row:1/3}
  .cards--editorial>:first-child .organic{aspect-ratio:4/5.2}
  .cards--editorial>:not(:first-child) .organic{aspect-ratio:16/10}
}

/* Hero do celular com a imagem primeiro */
@media(max-width:600px){
  .hero[data-mobile="midia"]{padding-top:96px}
  .hero[data-mobile="midia"] .hero-grid{gap:24px}
  .hero[data-mobile="midia"] .hero-figure{order:-1;width:100%;padding-bottom:0}
  .hero[data-mobile="midia"] .hero-image{aspect-ratio:4/3;max-height:38vh;width:100%}
  .hero[data-mobile="midia"] .hero-backing,.hero[data-mobile="midia"] .photo-note{display:none}
}

@media(prefers-reduced-motion:reduce){
  .motion-ok .reveal,.motion-ok .img-reveal img{opacity:1;transform:none;clip-path:none;transition:none}
  .hero-seq>*{animation:none}
}