/* =====================================================================
   Hagá · LP — seção "Como funciona" (primeira seção clara, logo após o hero)
   Adaptada das pranchas do Claude Design (handoff de 13/10/2026).

   Escopo: tudo sob .lpc, com prefixo "lpc-". O prefixo existe porque as classes
   das pranchas (.lp-phone, .lp-steps, .lp-step…) colidem com CSS antigo de
   landing.css que ainda está no ar.

   As pranchas usam .lp--d / .lp--m; aqui viram media queries:
     celular < 900px · intermediário 900–1199px · desktop ≥ 1200px (regra base).

   Tema CLARO: a seção usa os tokens claros de :root (a página é forçada ao
   claro). Só o hero e o cabeçalho sobre ele levam data-theme="dark".
   Carregar depois de lp-hero.css (reusa o botão .lph-btn).
   ===================================================================== */

/* ---------- 0. Moldura do celular (tokens COMPARTILHADOS) ----------
   O mockup .lpc-phone (seção 5) é um componente só: "Como funciona" (.lpc) e "Experiência"
   (.lpx, css/lp-experiencia.css) usam as mesmas regras e os mesmos tokens — a Experiência só
   troca tamanho, inclinação e sombra por celular. Mexeu na moldura aqui, mexeu nas duas. */
.lpc, .lpx{
  --lpc-device-metal: linear-gradient(150deg, var(--ink-600) 0%, var(--ink-850) 16%, var(--ink-950) 50%, var(--ink-800) 78%, var(--ink-950) 100%);
  --lpc-device-bezel: 11px;
  --lpc-device-radius: 48px;
  --lpc-device-strip: 22px;     /* faixa do furo da câmera, acima da captura */
  --lpc-device-chin: 14px;      /* faixa abaixo da captura: os cantos não cortam a barra do app */
  --lpc-device-cam: 9px;
  --lpc-device-btn: 3px;        /* quanto os botões saem do corpo */
  --lpc-device-tilt: 3deg;
  --lpc-device-shadow: rgba(58,52,120,.34);   /* matiz violeta das sombras do V4 */
}

/* ---------- 1. Tokens da seção ---------- */
.lpc{
  /* Tokens que as pranchas usam e o design-system/ real não tem. Valores do
     lp.css de referência / tokens do V4 (tema claro). */
  --lpc-primary-soft: rgba(123,127,232,.12);
  --lpc-h2-size: 44px;   --lpc-h2-lh: 1.08;      /* token h1 do V4 */
  --lpc-tracking: -0.02em;
  --lpc-label-tracking: .11em;

  /* O botão primário é o MESMO componente do hero (.lph-btn .lph-btn--primary).
     Ele lê estas variáveis, que lp-hero.css só define dentro de .lph — por isso
     são repetidas aqui, com os mesmos valores. */
  --lph-cta: var(--periwinkle-600);
  --lph-cta-hover: var(--periwinkle-700);
  --lph-cta-press: var(--periwinkle-800);
  --lph-dur-hover: var(--dur-fast);

  /* Destaque do título no fundo claro: periwinkle-600 → 500. (O degradê do hero,
     400 → 200, some no claro.) */
  --lpc-title-grad: linear-gradient(90deg, var(--periwinkle-600) 0%, var(--periwinkle-500) 100%);
  /* Manchas de luz (só radial-gradient — nada de filter:blur em elemento grande).
     Lavanda = periwinkle-200 (#C0C4FF); dourado = #FFC977, a luz quente do vídeo do hero. */
  --lpc-lavanda: 192,196,255;
  --lpc-ouro: 255,201,119;
  --lpc-ponto-lavanda: var(--periwinkle-400);   /* partículas: 70% */
  --lpc-ponto-ouro: #E6B450;                    /* partículas: 30% */
  --lpc-glow: radial-gradient(closest-side, rgba(var(--lpc-lavanda),.45) 0%, rgba(var(--lpc-lavanda),.2) 45%, rgba(var(--lpc-lavanda),.06) 75%, rgba(var(--lpc-lavanda),0) 100%);

  /* Ritmo e grade — os mesmos do hero */
  --lpc-section-y: 120px;
  --lpc-gutter: 80px;
  --lpc-max: 1280px;
  --lpc-curve-h: 48px;

  --lpc-in-dur: 600ms;
  --lpc-in-dist: 12px;
  --lpc-in-step: 80ms;

  position: relative;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  padding: var(--lpc-section-y) 0;
  /* O corte horizontal fica NA SEÇÃO (não no bloco visual): o brilho atrás do
     celular some na borda da janela, sem linha reta no meio da tela, e nada gera
     rolagem lateral. `clip` (e não `hidden`) para a curva, que sai por cima da
     seção, continuar visível. */
  overflow-x: clip;
}
.lpc__in{position:relative; z-index:1; max-width:var(--lpc-max); margin:0 auto; padding:0 var(--lpc-gutter)}
/* Navegadores sem overflow-x: clip: corta no miolo (a curva fica fora dele). */
@supports not (overflow-x: clip){
  .lpc__in{overflow:hidden}
}

/* Curva de transição do hero: SVG na cor do fundo, 1px sobreposto à seção para
   não sobrar fresta. */
.lpc-curve{position:absolute; left:0; top:calc(var(--lpc-curve-h) * -1 + 1px); width:100%; height:var(--lpc-curve-h); display:block; color:var(--bg); pointer-events:none}
.lpc-curve path{fill:currentColor}

/* ---------- 1b. Fundo: manchas de luz e partículas ----------
   .lpc__fundo fica ATRÁS de tudo (o conteúdo é .lpc__in, z-index 1) e não recebe
   toque. As manchas (a) e (c) moram dentro do bloco visual (seção 5), para
   acompanharem o celular e o mascote; a (b), do título, vive aqui. */
.lpc__fundo{position:absolute; inset:0; z-index:0; pointer-events:none}
.lpc-mancha{position:absolute; border-radius:50%; pointer-events:none}
.lpc-mancha--titulo{
  /* (b) lavanda mais fraca atrás do título, no canto superior esquerdo: 520px, ~25% */
  left:calc(50% - 760px); top:-20px; width:520px; height:520px;
  background:radial-gradient(closest-side, rgba(var(--lpc-lavanda),.25) 0%, rgba(var(--lpc-lavanda),.1) 50%, rgba(var(--lpc-lavanda),0) 100%);
}
.lpc__particulas{position:absolute; inset:0; overflow:hidden}
.lpc__particulas--m{display:none}
.lpc-p{position:absolute; display:block}
.lpc-p > i{display:block; width:100%; height:100%; border-radius:50%; background:var(--lpc-ponto-lavanda); box-shadow:0 0 7px 1px var(--lpc-ponto-lavanda); opacity:0}
.lpc-p.ouro > i{background:var(--lpc-ponto-ouro); box-shadow:0 0 7px 1px var(--lpc-ponto-ouro)}

/* ---------- 2. Texto ----------
   Rótulo: a prancha pede --primary-press; no DS real esse token é de PREENCHIMENTO
   (CD30) e não tem par de contraste declarado. O primário sobre superfície é
   --primary-text (#5157E1): 4,7:1 sobre a pílula, medido na rodada 14. */
.lpc-eyebrow{display:inline-flex; align-items:center; height:28px; padding:0 14px; border-radius:var(--radius-pill); background:var(--lpc-primary-soft); color:var(--primary-text); font-size:11px; font-weight:700; letter-spacing:var(--lpc-label-tracking); text-transform:uppercase}
.lpc-h2{margin:16px 0 0; font-family:var(--font-display); font-weight:700; font-size:var(--lpc-h2-size); line-height:var(--lpc-h2-lh); letter-spacing:var(--lpc-tracking); color:var(--fg); text-wrap:balance}
.lpc-h2__accent{background:var(--lpc-title-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lpc-lead{margin:20px 0 0; font-size:18px; line-height:1.6; color:var(--fg-2); max-width:520px}

/* ---------- 3. Grade ----------
   Marcação única: texto+passos (.lpc-how__copy), bloco visual e botão. No
   desktop o botão fica logo abaixo dos passos, na coluna da esquerda; no celular
   vai para depois do bloco visual (ver seção 6). */
/* A coluna visual nunca fica com menos de 520px (a largura do desenho em 1440):
   entre 1200 e 1279px quem cede é a coluna de texto. Com menos que isso o mascote,
   que sai 65px para a esquerda do bloco, avançaria sobre o card do plano. */
.lpc-how{display:grid; grid-template-columns:minmax(0,520px) minmax(520px,1fr); grid-template-areas:"copy visual" "cta visual"; column-gap:80px}
.lpc-how__copy{grid-area:copy; align-self:end; min-width:0; position:relative; z-index:1}
.lpc-how__cta{grid-area:cta; align-self:start; margin-top:40px; position:relative; z-index:1}
.lpc-how__visual{grid-area:visual; position:relative; z-index:0; height:710px; margin:0}

/* ---------- 4. Passos ---------- */
.lpc-steps{list-style:none; margin:40px 0 0; padding:0; display:flex; flex-direction:column; gap:28px}
.lpc-step{position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:20px}
/* linha de 2px centrada no círculo: de 8px abaixo dele até 8px antes do próximo */
.lpc-step::after{content:""; position:absolute; left:21px; top:52px; bottom:-20px; width:2px; border-radius:2px; background:var(--periwinkle-200)}
.lpc-step:last-child::after{display:none}
.lpc-step__n{width:44px; height:44px; border-radius:50%; background:var(--lph-cta); color:var(--fg-on-primary); display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-size:17px; font-weight:700; box-shadow:var(--shadow-glow-soft)}
.lpc-step__t{margin:9px 0 0; font-family:var(--font-ui); font-size:18px; line-height:1.4; font-weight:600; letter-spacing:0; color:var(--fg)}
.lpc-step__d{margin:4px 0 0; font-size:15px; line-height:1.55; color:var(--fg-2)}

/* ---------- 5. Bloco visual: brilho, celular e mascote ---------- */
/* (a) lavanda grande atrás do celular e do mascote: 760px, ~45% no centro */
.lpc-how__glow{position:absolute; left:54%; top:50%; width:760px; height:760px; transform:translate(-50%,-50%); background:var(--lpc-glow); pointer-events:none}
/* (c) dourada pequena perto do pé do mascote: 360px, ~18% */
.lpc-how__ouro{position:absolute; left:-115px; bottom:-160px; width:360px; height:360px; background:radial-gradient(closest-side, rgba(var(--lpc-ouro),.18) 0%, rgba(var(--lpc-ouro),.07) 55%, rgba(var(--lpc-ouro),0) 100%); pointer-events:none}

/* Mockup de celular, todo em CSS.
   Camadas: .lpc-phone (posição) > __float (flutuação) > __tilt (inclinação) > __shadow + __body.
   A sombra está dentro do __float: celular e sombra se movem juntos. */
.lpc-phone{position:absolute; right:24px; top:20px; width:320px; z-index:1}
.lpc-phone__float{position:relative}
.lpc-phone__tilt{position:relative; transform:rotate(var(--lpc-device-tilt))}
.lpc-phone__shadow{position:absolute; left:8%; right:-2%; top:8%; bottom:-3%; z-index:0; border-radius:var(--lpc-device-radius); background:var(--lpc-device-shadow); filter:blur(30px); transform:translate(22px,24px)}
.lpc-phone__body{position:relative; z-index:1; padding:var(--lpc-device-bezel); border-radius:var(--lpc-device-radius); background:var(--lpc-device-metal);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1.5px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.4), 0 2px 4px rgba(6,8,15,.30), 0 14px 28px rgba(58,52,120,.16)}
.lpc-phone__btn{position:absolute; width:calc(var(--lpc-device-btn) + 2px); background:linear-gradient(90deg, var(--ink-500), var(--ink-800)); z-index:0}
.lpc-phone__btn--vol-up{left:calc(var(--lpc-device-btn) * -1); top:18%; height:7%; border-radius:3px 0 0 3px}
.lpc-phone__btn--vol-down{left:calc(var(--lpc-device-btn) * -1); top:27%; height:7%; border-radius:3px 0 0 3px}
.lpc-phone__btn--power{right:calc(var(--lpc-device-btn) * -1); top:23%; height:11%; border-radius:0 3px 3px 0; background:linear-gradient(270deg, var(--ink-500), var(--ink-800))}
.lpc-phone__glass{position:relative; overflow:hidden; border-radius:calc(var(--lpc-device-radius) - var(--lpc-device-bezel)); background:var(--ink-900); box-shadow:0 0 0 1px rgba(192,196,255,.20)}
.lpc-phone__strip{height:var(--lpc-device-strip); display:flex; align-items:center; justify-content:center; background:var(--ink-900)}
.lpc-phone__cam{width:var(--lpc-device-cam); height:var(--lpc-device-cam); border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--ink-500) 0 16%, var(--ink-950) 46%); box-shadow:0 0 0 1.5px rgba(192,196,255,.07)}
/* A captura entra INTEIRA: a caixa tem a proporção do arquivo (720×1454) e a
   altura da moldura sai dela. Reservar a proporção aqui também evita salto de
   layout enquanto a imagem (lazy) não chega. */
.lpc-phone__screen{display:block; width:100%; aspect-ratio:720 / 1454; background:var(--ink-900)}
.lpc-phone__screen picture{display:block; width:100%; height:100%}
.lpc-phone__screen img{display:block; width:100%; height:100%; object-fit:cover}
.lpc-phone__chin{height:var(--lpc-device-chin); background:var(--ink-850)}
.lpc-phone__glare{position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(118deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 26%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 74%, rgba(255,255,255,.03) 100%)}

/* Larguras calculadas para o mascote manter a MESMA altura visual de quando era a imagem
   970×1143 (260px → 306px de altura): a imagem nova é 540×620, então 306 ÷ 620 × 540 ≈ 267px.
   O centro horizontal também fica onde estava. */
.lpc-mascot{position:absolute; left:-68px; bottom:20px; width:267px; z-index:2; pointer-events:none}
.lpc-mascot picture{display:block}
.lpc-mascot img, .lpc-mascot video{display:block; width:100%; height:auto; transform-origin:50% 100%; filter:drop-shadow(0 18px 22px rgba(58,52,120,.18))}
/* O vídeo (criado por js/lp-como-funciona.js) nasce por cima do poster, no mesmo tamanho e
   posição, invisível. Quando começa a tocar, os dois trocam de opacidade em 200ms. */
.lpc-mascot video{position:absolute; inset:0; height:100%; opacity:0; transition:opacity 200ms linear}
.lpc-mascot img{transition:opacity 200ms linear}
.lpc-mascot.lpc-mascot--video video{opacity:1}
.lpc-mascot.lpc-mascot--video img{opacity:0}

/* Janela baixa (hero com menos de 800px de altura): lá a faixa de confiança do hero
   continua a 32px da base, e a curva de 48px encostaria nela nas larguras menores.
   A curva usa a altura do celular (28px), que passa com folga. */
@media (min-width: 900px) and (max-height: 799.98px){
  .lpc{--lpc-curve-h: 28px}
}

/* ---------- 6. Intermediário (900–1199px): colunas iguais, celular e mascote menores ---------- */
@media (min-width: 900px) and (max-width: 1199.98px){
  .lpc-how{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:40px}
  .lpc-how__visual{height:610px}
  .lpc-phone{width:270px; right:8px}
  .lpc-mascot{width:195px; left:-40px}
}

/* ---------- 7. Celular (< 900px) ----------
   Ordem: textos → passos → bloco visual → botão em largura total. */
@media (max-width: 899.98px){
  .lpc{
    --lpc-section-y: 72px;
    --lpc-gutter: 16px;
    --lpc-curve-h: 28px;
    --lpc-h2-size: 32px;  --lpc-h2-lh: 1.1;
    --lpc-device-bezel: 8px; --lpc-device-radius: 36px; --lpc-device-strip: 16px;
    --lpc-device-chin: 10px; --lpc-device-cam: 7px; --lpc-device-btn: 2px; --lpc-device-tilt: 2deg;
  }
  .lpc-lead{font-size:16px; margin-top:14px}

  .lpc-how{display:flex; flex-direction:column; column-gap:0}
  .lpc-how__copy{order:1; align-self:stretch}
  .lpc-how__visual{order:2}
  .lpc-how__cta{order:3; align-self:stretch; margin-top:32px}
  .lpc-how__cta .lph-btn{display:flex; width:100%}

  .lpc-steps{margin-top:28px; gap:20px}
  .lpc-step{grid-template-columns:40px minmax(0,1fr); column-gap:16px}
  .lpc-step::after{left:19px; top:48px; bottom:-12px}
  .lpc-step__n{width:40px; height:40px; font-size:16px}
  .lpc-step__t{margin-top:8px; font-size:17px}

  /* Bloco visual: o celular fica no fluxo (altura automática) e o mascote é
     absoluto. Larguras em % do bloco: celular 66% (≈ 61% da janela), mascote
     47,5% (≈ 43,5% da janela). SEM overflow aqui — o corte é da seção. */
  .lpc-how__visual{height:auto; margin-top:36px; display:flex; justify-content:flex-end; padding:16px 4px 22px 0}
  .lpc-how__glow{width:460px; height:460px; left:62%;   /* (a) ~460px, ~50% */
    background:radial-gradient(closest-side, rgba(var(--lpc-lavanda),.5) 0%, rgba(var(--lpc-lavanda),.22) 45%, rgba(var(--lpc-lavanda),.07) 75%, rgba(var(--lpc-lavanda),0) 100%)}
  .lpc-how__ouro{width:240px; height:240px; left:-35px; bottom:-112px; background:radial-gradient(closest-side, rgba(var(--lpc-ouro),.2) 0%, rgba(var(--lpc-ouro),.08) 55%, rgba(var(--lpc-ouro),0) 100%)}
  .lpc-mancha--titulo{left:-90px; top:-70px; width:360px; height:360px}   /* (b) ~360px, ~25% */
  .lpc__particulas--d{display:none}
  .lpc__particulas--m{display:block}
  .lpc-phone{position:relative; right:auto; top:auto; width:66%}
  .lpc-phone__shadow{filter:blur(20px); transform:translate(12px,16px)}
  .lpc-mascot{left:-.6%; bottom:8px; width:48.8%}   /* 47,5% × (1143/970) × (540/620) ≈ 48,8%: mesma altura visual de quando era a imagem 970×1143 */
}

/* ---------- 8. Movimento ----------
   Só transform e opacity. Tudo dentro de "no-preference": com "reduzir
   movimento" nada se move e nada fica escondido.
   Os passos só começam escondidos quando o JS está ativo (.lpc--js, posta por
   js/lp-como-funciona.js); sem JS a seção inteira já nasce visível. */
@media (prefers-reduced-motion: no-preference){
  .lpc-phone__float{animation:lpc-phone-float 7s ease-in-out infinite}
  /* "Respiração" só no poster. Quando o vídeo assume, ela se desliga (o vídeo já se move). */
  .lpc-mascot:not(.lpc-mascot--video) img{animation:lpc-breathe 4.5s ease-in-out infinite}

  /* Partículas: sobem devagar com deriva lateral e somem em fade. Só transform e opacity. */
  .lpc-p > i{animation-name:lpc-sobe-1; animation-timing-function:linear; animation-iteration-count:infinite}
  .lpc-p.r2 > i{animation-name:lpc-sobe-2}
  .lpc-p.r3 > i{animation-name:lpc-sobe-3}
  /* Fora da tela, pausadas (classe posta por js/lp-como-funciona.js). */
  .lpc--fora .lpc-p > i, .lpc--fora .lpc-phone__float, .lpc--fora .lpc-mascot img{animation-play-state:paused}

  .lpc--js .lpc-step{opacity:0; transform:translate3d(0,var(--lpc-in-dist),0)}
  .lpc--js.is-in .lpc-step{animation:lpc-up var(--lpc-in-dur) var(--ease-out) both}
  .lpc--js.is-in .lpc-step:nth-child(2){animation-delay:var(--lpc-in-step)}
  .lpc--js.is-in .lpc-step:nth-child(3){animation-delay:calc(2 * var(--lpc-in-step))}
}
@keyframes lpc-sobe-1{0%{opacity:0; transform:translate3d(0,0,0)} 18%{opacity:1} 82%{opacity:1} 100%{opacity:0; transform:translate3d(12px,-180px,0)}}
@keyframes lpc-sobe-2{0%{opacity:0; transform:translate3d(0,0,0)} 18%{opacity:1} 82%{opacity:1} 100%{opacity:0; transform:translate3d(-12px,-260px,0)}}
@keyframes lpc-sobe-3{0%{opacity:0; transform:translate3d(0,0,0)} 18%{opacity:1} 82%{opacity:1} 100%{opacity:0; transform:translate3d(8px,-340px,0)}}
/* Com "reduzir movimento": sem partículas (as manchas de luz ficam, são estáticas). */
@media (prefers-reduced-motion: reduce){
  .lpc__particulas{display:none !important}
}
@keyframes lpc-phone-float{0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-6px,0)}}
@keyframes lpc-breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.01)}}
@keyframes lpc-up{from{opacity:0; transform:translate3d(0,var(--lpc-in-dist),0)} to{opacity:1; transform:none}}