/* =========================================================
   WKP · HERO "CHIQUE" (10/09/2026)

   Carrega DEPOIS do styles.css e só vale em body.wkp, então mv, ccm,
   wkp-b e as páginas de pós-venda não enxergam nada daqui. Só a hero
   mudou; o resto da página é o de antes.

   Referência pedida pelo Pablo: lorenz-ftc.vercel.app. O que faz ela
   parecer cara, e o que foi trazido pra nossa identidade:
   - fundo é um AMBIENTE fotografado (estúdio escuro e quente, gerado
     no Magnific), com véu forte à esquerda pra tipografia;
   - a expert recortada, colorida, com luz quente e sombra projetada;
   - selo circular girando por cima da foto, com a prova de autoridade;
   - headline em sans pesada e apertada, uma linha no acento;
   - botão em pílula com seta num círculo;
   - faixa do topo fina e escura; as esteiras fazem a divisa com o bloco
     claro (o fio com seta chegou a entrar e o Pablo pediu pra tirar).

   Cor: tinta quente quase preta + terracota/pêssego (no lugar do
   dourado da referência). O botão continua verde, que é a decisão de
   "CTA em cor de compra" registrada no LEIA-ME.
   ========================================================= */

body.wkp{
  --hc-tinta: #0A0705;
  --hc-creme: #F6EFE6;
  --hc-acento: #F2A27C;
  --hc-terra: #DA7756;
  --ast-marca: url("assets/asterisco.svg");
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ─────────  FAIXA DO TOPO: fina, escura, espaçada  ───────── */
body.wkp .alertbar{
  background:var(--hc-tinta); color:rgba(246,239,230,.72);
  font-size:10.5px; font-weight:600; letter-spacing:.16em;
  padding:12px 18px;
  box-shadow:inset 0 -1px 0 rgba(246,239,230,.07);
}

/* ─────────  PALCO  ───────── */
body.wkp .alertbar ~ .hero,
body.wkp .hero--chique{ padding:0; background:var(--hc-tinta); }
body.wkp .hc-palco{ position:relative; overflow:hidden; }
body.wkp .hc-bg{ position:absolute; inset:0; margin:0; z-index:0; }
body.wkp .hc-bg img{
  width:100%; height:100%; object-fit:cover; object-position:60% 50%;
  animation:hcZoom 2.6s var(--ease) both;
}
/* véu: esquerda quase opaca pra leitura, direita deixando o ambiente */
body.wkp .hc-veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(92deg, rgba(10,7,5,.97) 0%, rgba(10,7,5,.93) 32%, rgba(10,7,5,.55) 60%, rgba(10,7,5,.28) 100%),
    radial-gradient(70% 60% at 78% 40%, rgba(218,119,86,.14), transparent 70%),
    linear-gradient(180deg, rgba(10,7,5,.35) 0%, rgba(10,7,5,0) 22%, rgba(10,7,5,0) 78%, var(--hc-tinta) 100%);
}
body.wkp .hero--chique .bg-grid--hero{ z-index:1; opacity:.6; }

body.wkp .hc-grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,640px) 1fr; align-items:center;
  min-height:clamp(620px, 78vh, 760px);
  padding-top:54px; padding-bottom:40px;
}

/* ─────────  A EXPERT  ───────── */
body.wkp .hc-figura{
  position:absolute; z-index:2; margin:0; pointer-events:none;
  right:max(0px, calc((100vw - var(--maxw)) / 2 - 10px)); bottom:0;
  height:calc(100% - 36px); aspect-ratio:1100/1247;
  animation:hcSobe 1.4s .25s var(--ease) both;
}
body.wkp .hc-figura img{
  width:100%; height:100%; object-fit:contain; object-position:bottom right;
  filter:drop-shadow(-30px 24px 60px rgba(0,0,0,.7));
}
/* selo com a prova de autoridade, girando devagar sobre a foto */
body.wkp .hc-selo{
  position:absolute; left:-58px; top:46%; width:150px; aspect-ratio:1;
  border-radius:50%; background:#130D09; pointer-events:auto;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.9), 0 0 0 6px rgba(10,7,5,.55);
  animation:hcSelo 1s 1.1s var(--ease) both;
}
body.wkp .hc-selo svg{ width:100%; height:100%; display:block; }
/* em SVG a origem conta a partir do viewBox: o centro do selo é 75,75 */
body.wkp .hc-selo .hc-selo__giro{ transform-box:view-box; transform-origin:75px 75px; animation:hcGira 32s linear infinite; }
body.wkp .hc-selo text{ font-family:var(--sans); font-weight:700; font-size:10.4px; letter-spacing:2.3px; fill:var(--hc-acento); }
body.wkp .hc-selo__miolo{
  position:absolute; inset:50% auto auto 50%; width:40px; height:40px; transform:translate(-50%,-50%);
  background:var(--hc-terra);
  -webkit-mask:var(--ast-marca) center/contain no-repeat; mask:var(--ast-marca) center/contain no-repeat;
}

/* ─────────  TEXTO  ───────── */
body.wkp .hero--chique .hero__copy{ position:relative; max-width:620px; }
body.wkp .hero--chique .h1--logo{ display:block; margin:0 0 30px; }
body.wkp .hero--chique .h1--logo img{ width:100%; max-width:228px; }

/* a pílula vira sobrelinha: sem caixa, só tipografia espaçada */
body.wkp .hero--chique .pill{
  background:none; box-shadow:none; padding:0; margin:0 0 18px;
  font-size:11px; letter-spacing:.16em; color:rgba(246,239,230,.62);
}
body.wkp .hero--chique .pill strong{ color:var(--hc-creme); }
body.wkp .hero--chique .pill__sep{ color:rgba(246,239,230,.3); }
body.wkp .hero--chique .pill__dot{ background:var(--hc-terra); box-shadow:0 0 0 3px rgba(218,119,86,.22); }

body.wkp .hero--chique .hero__gancho{
  font-size:15px; font-weight:600; color:var(--hc-terra); margin:0 0 12px; max-width:none;
}

body.wkp .hero--chique .hero__headline{
  font-family:var(--sans); font-weight:800; letter-spacing:-.032em;
  font-size:clamp(30px, 2.65vw, 40px); line-height:1.16;
  color:#FFFFFF; max-width:none; margin:0 0 20px;
}
body.wkp .hc-ln{ display:block; }
body.wkp .hc-ln--acento{ color:var(--hc-acento); }
body.wkp .hc-ln--leve{
  font-weight:700; font-size:.82em; letter-spacing:-.028em; color:rgba(255,255,255,.88); margin-top:4px;
}

body.wkp .hero--chique .hero__sub{
  font-size:15.5px; line-height:1.7; color:rgba(246,239,230,.7);
  margin:0 0 30px; max-width:54ch;
}

/* botão em pílula, seta num círculo e um brilho que passa */
body.wkp .hero--chique .hero__cta{ display:block; margin:0; }
body.wkp .btn--pilula{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:18px;
  border-radius:100px; padding:10px 10px 10px 30px; min-height:64px;
  font-size:15.5px; font-weight:700; letter-spacing:.005em;
}
body.wkp .btn--pilula .btn__seta{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#FFF8F0; color:#125630;
  transition:transform .35s var(--ease);
}
body.wkp .btn--pilula:hover .btn__seta{ transform:rotate(45deg); }
body.wkp .btn--pilula::after{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:28%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
  transform:skewX(-18deg); animation:hcBrilho 4.4s 2s ease-in-out infinite;
}

/* ingressos como microcopy sob o botão */
body.wkp .hero--chique .tickets{ max-width:340px; margin:16px 0 0; }
body.wkp .hero--chique .tickets__bar{ height:4px; background:rgba(246,239,230,.1); }
body.wkp .hero--chique .tickets__label{
  text-align:left; margin-top:9px; font-size:11px; letter-spacing:.06em; color:rgba(246,239,230,.55);
}
body.wkp .hero--chique .tickets__label strong{ color:var(--hc-creme); }

/* entregas em duas colunas com check redondo */
body.wkp .hero--chique .chips{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin:34px 0 0; max-width:600px;
}
body.wkp .hero--chique .chips li{
  display:flex; align-items:flex-start; gap:11px; padding:0; background:none; box-shadow:none;
  font-size:14px; font-weight:600; letter-spacing:0; line-height:1.4; color:var(--hc-creme);
}
body.wkp .hero--chique .chips li::before{
  content:""; flex:0 0 22px; height:22px; border-radius:50%; margin-top:-1px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23F2A27C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat,
    #2A1A12;
}

/* ─────────  DIVISÓRIA  ─────────
   As esteiras sobem por cima do fim da hero (margem negativa do
   styles.css) e fazem a divisa com o bloco claro. A hero reserva esse
   espaço embaixo pra faixa não encostar nas entregas. */
body.wkp .hc-grid{ padding-bottom:108px; }

/* ─────────  ENTRADA  ───────── */
@keyframes hcZoom{ from{ transform:scale(1.08); opacity:.2; } to{ transform:none; opacity:1; } }
@keyframes hcSobe{ from{ transform:translateY(34px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes hcSelo{ from{ transform:scale(.6) rotate(-40deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes hcGira{ to{ transform:rotate(360deg); } }
@keyframes hcBrilho{ 0%,62%{ left:-40%; } 100%{ left:130%; } }
@keyframes hcTexto{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
body.wkp .hero--chique .hero__copy > *{ animation:hcTexto .9s var(--ease) both; }
body.wkp .hero--chique .hero__copy > :nth-child(1){ animation-delay:.05s; }
body.wkp .hero--chique .hero__copy > :nth-child(2){ animation-delay:.14s; }
body.wkp .hero--chique .hero__copy > :nth-child(3){ animation-delay:.22s; }
body.wkp .hero--chique .hero__copy > :nth-child(5){ animation-delay:.52s; }
body.wkp .hero--chique .hero__copy > :nth-child(6){ animation-delay:.62s; }
body.wkp .hero--chique .hero__copy > :nth-child(7){ animation-delay:.72s; }
body.wkp .hero--chique .hero__copy > :nth-child(8){ animation-delay:.8s; }
/* a headline entra linha por linha */
body.wkp .hero--chique .hero__headline{ animation:none; }
body.wkp .hc-ln{ animation:hcTexto .9s var(--ease) both; }
body.wkp .hc-ln:nth-child(1){ animation-delay:.28s; }
body.wkp .hc-ln:nth-child(2){ animation-delay:.36s; }
body.wkp .hc-ln:nth-child(3){ animation-delay:.44s; }

/* ─────────  AJUSTES DA REVISÃO POR PRINT  ───────── */

/* com a Tezza-2407 o selo encostava no fim da frase de apoio: vai pro ombro */
body.wkp .hc-selo{ left:72px; top:56%; }
body.wkp .hero--chique .hero__sub{ max-width:47ch; }

/* a borda direita do recorte é o limite da foto original: em tela larga
   ela aparecia como um corte reto na jaqueta contra o brilho do fundo */
body.wkp .hc-figura img{
  -webkit-mask-image:linear-gradient(270deg, transparent 0%, #000 10%);
          mask-image:linear-gradient(270deg, transparent 0%, #000 10%);
}

/* o rótulo dos ingressos quebrava deixando "R$" sozinho no fim da linha */
body.wkp .hero--chique .tickets{ max-width:420px; }
body.wkp .hero--chique .tickets__label{ letter-spacing:.02em; }
body.wkp .hero--chique .tickets__label s,
body.wkp .hero--chique .tickets__label strong{ white-space:nowrap; }

/* ═══════════════════  MULTIPLICADOR: colagem vertical  ═══════════════════
   As três polaroides lado a lado ficavam pequenas e largas ao lado de uma
   coluna de cards alta. Viraram uma colagem em pé: a do bastidor grande no
   centro e as outras duas sobrepondo os cantos. Vale pra /wkp e /wkp-b. */
body.wkp #multiplicador .multi{ align-items:center; }
body.wkp #multiplicador .fan{
  display:block; position:relative;
  width:100%; max-width:460px; margin:0 auto; aspect-ratio:460/660;
}
body.wkp #multiplicador .fan .polaroid{ position:absolute; max-width:none !important; margin:0; }
body.wkp #multiplicador .fan__2{ width:64%; left:18%; top:10%; z-index:2; transform:rotate(1.5deg); }
body.wkp #multiplicador .fan__1{ width:44%; left:0; top:0; z-index:1; transform:rotate(-7deg); }
body.wkp #multiplicador .fan__3{ width:44%; right:0; bottom:0; z-index:3; transform:rotate(6deg); }
body.wkp #multiplicador .fan .polaroid:hover{ transform:rotate(0) scale(1.04); z-index:4; }

/* ═══════════════════  MOBILE  ═══════════════════
   Pedido do Pablo (10/09): no mobile o conteúdo vem primeiro, alinhado à
   esquerda como no desktop, e a Annie entra grande logo abaixo, sobre o
   estúdio com a luminária, fechando a hero antes das esteiras. O botão
   fica bem dentro da primeira dobra. Este bloco vem depois dos ajustes
   gerais de propósito: senão a posição do selo do desktop venceria. */
@media (max-width:900px){
  body.wkp .alertbar{ font-size:9.5px; letter-spacing:.12em; padding:10px 14px; }
  body.wkp .hc-palco{ display:flex; flex-direction:column; }

  /* o estúdio fica só na parte de baixo, atrás da foto, e nasce da tinta */
  body.wkp .hc-bg{ top:auto; height:660px; }
  body.wkp .hc-bg img{ object-position:66% 40%; }
  body.wkp .hc-veu{
    top:auto; height:660px;
    background:
      linear-gradient(180deg, var(--hc-tinta) 0%, rgba(10,7,5,.6) 20%, rgba(10,7,5,.12) 44%, rgba(10,7,5,.18) 78%, var(--hc-tinta) 100%),
      radial-gradient(60% 40% at 62% 52%, rgba(218,119,86,.18), transparent 70%);
  }

  /* texto: mesma leitura do desktop, à esquerda */
  body.wkp .hc-grid{ grid-template-columns:1fr; min-height:0; padding-top:34px; padding-bottom:0; }
  body.wkp .hero--chique .hero__copy{ max-width:none; }
  body.wkp .hero--chique .h1--logo{ margin-bottom:22px; }
  body.wkp .hero--chique .h1--logo img{ max-width:176px; }
  body.wkp .hero--chique .pill{ font-size:10px; letter-spacing:.1em; margin-bottom:14px; }
  body.wkp .hero--chique .hero__gancho{ font-size:14.5px; margin-bottom:10px; }
  body.wkp .hero--chique .hero__headline{ font-size:clamp(27px, 7.6vw, 32px); margin-bottom:16px; }
  body.wkp .hero--chique .hero__sub{ font-size:15px; margin-bottom:24px; }
  body.wkp .btn--pilula{ width:100%; justify-content:space-between; padding-left:26px; }
  body.wkp .hero--chique .tickets{ max-width:none; width:100%; }
  body.wkp .hero--chique .chips{ grid-template-columns:1fr; gap:12px; margin-top:24px; }

  /* a foto: grande e centralizada, dissolvendo no fim; a esteira sobe por cima */
  /* no HTML a foto vem antes do texto (é assim que o desktop sobrepõe);
     aqui a ordem da coluna manda ela pra baixo do conteúdo */
  body.wkp .hc-figura{
    order:2;
    position:relative; right:auto; bottom:auto; align-self:center;
    /* 32px: com menos, o topo do cabelo encostava na última entrega */
    height:auto; width:min(100%, 460px); aspect-ratio:1100/1247; margin-top:32px;
    -webkit-mask-image:linear-gradient(180deg, #000 74%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 74%, transparent 100%);
  }
  /* pedido do Pablo: no mobile a foto corta no peito. A caixa mostra só
     os 60% de cima do recorte e o degradê fecha em cima do peito */
  /* só aspect-ratio não basta: a imagem dava a altura mínima da caixa.
     Ela fica presa na caixa (absolute) e o que passa é cortado */
  body.wkp .hc-figura{ aspect-ratio:1100/750; overflow:hidden; }
  /* as esteiras sobem 92px por cima do fim da hero (44px abaixo de 640px,
     no styles.css): a foto deixa essa margem, senão a faixa cobre o peito */
  body.wkp .hc-figura{ margin-bottom:92px; }
  body.wkp .hc-figura img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
  body.wkp .hc-selo{ width:92px; left:3%; top:48%; }
  body.wkp .hc-selo__miolo{ width:26px; height:26px; }

  /* multiplicador: no mobile a colagem deita (pedido do Pablo). As três
     lado a lado, a do centro por cima, e o bloco fica bem mais curto */
  body.wkp #multiplicador .fan{ aspect-ratio:16/11; max-width:560px; }
  body.wkp #multiplicador .fan__1{ width:36%; left:0; top:12%; bottom:auto; transform:rotate(-6deg); }
  body.wkp #multiplicador .fan__2{ width:40%; left:30%; top:0; transform:rotate(1.5deg); }
  body.wkp #multiplicador .fan__3{ width:36%; left:auto; right:0; top:14%; bottom:auto; transform:rotate(6deg); }
}

/* abaixo de 640px a esteira sobe só 44px: a margem da foto acompanha */
@media (max-width:640px){
  body.wkp .hc-figura{ margin-bottom:40px; }
}

@media (prefers-reduced-motion: reduce){
  body.wkp .hc-bg img, body.wkp .hc-figura, body.wkp .hc-selo, body.wkp .hc-selo__giro,
  body.wkp .hero--chique .hero__copy > *, body.wkp .hc-ln, body.wkp .btn--pilula::after{ animation:none !important; }
}