/* ============================================================
   BASE — tokens, reset, botões autorizados, grade, tipografia, botões, degradê em movimento, reveal
   Convertido de gloda-home.html. Escopo .lp-root.
   ============================================================ */
.lp-root{
  /* --- Gloda · Cor --- */
  --navy-900:#011630;
  --navy-800:#04294f;
  --navy-palavra:#16265e;   /* palavra ativa do hero. MEDIDA no layout. */
  --footer-bg:#1e3d59;
  --blue:#015aff;
  --blue-600:#0047cc;
  --ink:#121212;
  --ink-2:#3d434b;
  --muted:#71767e;
  --paper:#ffffff;
  --paper-2:#f8f8f8;
  --paper-3:#ececea;
  --line:#e4e4df;
  --accent:#0bd48f;
  /* gradiente sunset do hero */
  --sun-1:#141f4b; --sun-9:#fe915a;

  /* --- Gloda · Layout · espaçamento base 4 --- */
  --space-4:4px;   --space-8:8px;   --space-12:12px; --space-16:16px;
  --space-20:20px; --space-24:24px; --space-32:32px; --space-40:40px;
  --space-48:48px; --space-56:56px; --space-64:64px; --space-88:88px;
  --space-section:var(--space-88);

  /* --- raios --- */
  --radius-sm:8px;
  --radius:16px;
  --radius-lg:24px;
  --radius-full:999px;

  /* --- grade --- */
  --content:1200px;
  --gutter:clamp(16px,3.3vw,48px);

  /* --- rampa tipográfica: 8 tamanhos, nenhum a mais --- */
  --fs-display:clamp(30px,3.6vw,44px);   /* Gloda/Display        44 / 500 */
  --fs-mega:clamp(52px,7.4vw,96px);      /* Gloda/Mega           96 / 600 — SÓ páginas de produto (referência Apple, 23/09/2026). PENDENTE: aval do Daniel para o 9º tamanho. */
  --fs-h2:clamp(25px,3vw,36px);          /* Gloda/Titulo/Secao   36 / 500 */
  --fs-h3:clamp(20px,2.2vw,26px);        /* Gloda/Titulo/Card    26 / 600 */
  --fs-h4:clamp(18px,1.8vw,20px);        /* Gloda/Titulo/Sub     20 / 600 */
  --fs-base:17px;                        /* Gloda/Corpo/Padrao   17 / 400 */
  --fs-btn:16px;                         /* Gloda/Botao          16 / 600 */
  --fs-sm:15px;                          /* Gloda/Corpo/Pequeno  15 / 400 */
  --fs-xs:13px;                          /* Gloda/Legenda        13 / 500 */

  /* --- tracking: só dois valores --- */
  --ls-titulo:-.01em;
  --ls-apoio:-.02em;

  /* regra 4: largura 100%, quem controla é o tema */
  width:100%;


  font-size:var(--fs-base);
  font-family:'Rethink Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  position:relative;
  z-index:1;
  padding-top:var(--space-24);
  padding-bottom:var(--space-24);
  /* Respiro entre seções por GAP, não por margin.
     Margem em filho de bloco de conteúdo é território disputado: o tema
     tinha regra vencendo e os 88px viravam 18~56px no site real. Gap é do
     container, não do filho — nenhuma regra externa mirando o filho alcança,
     e não existe colapso de margem. Espelha o auto-layout do Figma. */
  display:flex;
  flex-direction:column;
  gap:var(--space-section);
  -webkit-tap-highlight-color:rgba(1,90,255,.16);
}
/* ============================================================
   TRAVA DE COR — nenhum estado interativo herda cor do SO
   ============================================================ */
.lp-root ::selection{background:var(--blue)!important;color:var(--paper)!important;}
.lp-root ::-moz-selection{background:var(--blue)!important;color:var(--paper)!important;}
.lp-root ::target-text{background:var(--blue)!important;color:var(--paper)!important;}
.lp-root mark{background:rgba(1,90,255,.16)!important;color:inherit!important;}
.lp-root :autofill,.lp-root :-webkit-autofill{-webkit-text-fill-color:var(--ink);}
@media (forced-colors:active){
  .lp-root .cat.is-on,.lp-root .pill.is-on{background:var(--navy-900)!important;color:var(--paper)!important;forced-color-adjust:none;}
  .lp-root .btn-blue{background:var(--blue)!important;color:var(--paper)!important;forced-color-adjust:none;}
}
/* overflow-x no html — NUNCA no body: o modal do formulário trava a
   rolagem pelo body, e overflow-x aqui mataria essa trava */
html{overflow-x:hidden;}
/* documento do tema: sem margem padrão do navegador (antes quem zerava era o tema do Elementor) */
body{margin:0;}
.lp-root *,.lp-root *::before,.lp-root *::after{box-sizing:border-box;}
.lp-root p,.lp-root h1,.lp-root h2,.lp-root h3,.lp-root h4,.lp-root ul,.lp-root li,.lp-root figure{margin:0;padding:0;}
.lp-root ul{list-style:none;}
.lp-root img{display:block;max-width:100%;}
.lp-root input[type="hidden"]{display:none!important;}   /* nunca vira item flex */
/* botão nasce SEM fundo; cada cor é autorizada abaixo */
.lp-root button{
  border:0;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;
  background:none;background-color:transparent!important;background-image:none!important;
  -webkit-tap-highlight-color:rgba(1,90,255,.16);
  -webkit-appearance:none;appearance:none;
}
.lp-root button:hover,.lp-root button:focus,.lp-root button:active,.lp-root button:visited{
  background-color:transparent!important;
}
/* ---- fundos AUTORIZADOS ---- */
.lp-root .btn-light,.lp-root .btn-light:hover{background-color:var(--paper)!important;}
.lp-root .btn-dark{background-color:var(--navy-900)!important;}
.lp-root .btn-dark:hover{background-color:var(--navy-800)!important;}
.lp-root .btn-blue{background-color:var(--blue)!important;}
.lp-root .btn-blue:hover{background-color:var(--blue-600)!important;}
.lp-root .btn-ghost{background-color:rgba(255,255,255,.13)!important;}
.lp-root .btn-ghost:hover{background-color:rgba(255,255,255,.22)!important;}
.lp-root .btn-round,.lp-root .btn-round:hover{background-color:var(--paper)!important;}
.lp-root .car-btn{background-color:var(--paper)!important;}
.lp-root .lp-dq-btn{background-color:var(--paper-3)!important;}
.lp-root .lp-dq-btn:hover:not([disabled]){background-color:#dcdcd8!important;}
.lp-root .car-btn:hover:not([disabled]){background-color:var(--navy-900)!important;}
.lp-root .story-go,.lp-root .story-go:hover{background-color:var(--navy-900)!important;}
.lp-root .pill.is-on{background-color:var(--navy-900)!important;}
.lp-root .cat.is-on{background-color:rgba(1,90,255,.07)!important;}
.lp-root .cat:hover:not(.is-on){background-color:rgba(1,90,255,.05)!important;}
.lp-root .pill:not(.is-on),.lp-root .pill:not(.is-on):hover,
.lp-root .dot-btn,.lp-root .dot-btn:hover{background-color:transparent!important;}
.lp-root :focus{outline-color:var(--blue);}
.lp-root :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--radius-sm);}
.lp-root .track,.lp-root .cats,.lp-root .marquee,.lp-root .wheel{user-select:none;-webkit-user-select:none;}
/* container central: conteúdo trava em 1200, página fica 100% */
/* NUNCA usar .container aqui: e o nome de classe mais disputado que existe
   (tema, Bootstrap, frameworks de grade). Prefixo lp- em tudo. */
.lp-root .lp-wrap{
  width:100%;
  max-width:calc(var(--content) + 2 * var(--gutter));
  margin:0 auto;
  padding:0 var(--gutter);
}
/* .sec continua como marcador semântico; o respiro agora vem do gap da raiz */
.lp-root .sec{margin-top:0;}
.lp-root .below-fold{content-visibility:auto;contain-intrinsic-size:auto 620px;}
/* ============================================================
   2 · TIPOGRAFIA — só a rampa. Nenhum tamanho fora dela.
   ============================================================ */
.lp-root .h-sec{
  font-size:var(--fs-h2);
  font-weight:500;                 /* Medium, como no layout. NÃO 600. */
  line-height:1.15;
  letter-spacing:var(--ls-titulo);
  max-width:22ch;
}
.lp-root .eyebrow{
  font-size:var(--fs-xs);font-weight:600;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
/* ---- movimento do degradê: só rotação, nunca alternate ---- */
.lp-root .gmove{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;}
.lp-root .gmove i{
  position:absolute;left:50%;top:50%;
  width:170%;aspect-ratio:1;
  border-radius:50%;transform-origin:50% 50%;
  translate:-50% -50%;
  will-change:transform;
  filter:blur(26px);
  animation:lpOrbit 37s linear infinite;
}
.lp-root .gmove i:nth-child(1){background:radial-gradient(circle at 34% 40%, var(--gm) 0%, transparent 52%);animation-duration:37s;}
.lp-root .gmove i:nth-child(2){background:radial-gradient(circle at 66% 36%, var(--gm) 0%, transparent 48%);animation-duration:53s;animation-direction:reverse;}
.lp-root .gmove i:nth-child(3){background:radial-gradient(circle at 50% 70%, var(--gm) 0%, transparent 46%);animation-duration:71s;}
@keyframes lpOrbit{from{rotate:0deg}to{rotate:360deg}}
.lp-root .hero .gmove{--gm:rgba(255,214,186,.13);}
.lp-root .hero--manha .gmove{--gm:rgba(255,236,214,.16);}
.lp-root .strip-store .gmove{--gm:rgba(160,200,255,.11);}
.lp-root .seed .gmove{--gm:rgba(120,245,195,.13);}

/* ---- degradê infinito: as cores sobem devagar até trocarem de lugar e o ciclo recomeça ----
   Camada 4x a altura da seção com o degradê em ida e volta (topo→base, base→topo, …).
   Sobe 50% em loop linear: na metade do ciclo as cores estão invertidas e no fim voltam
   ao início, sem salto. Só transform anima (GPU). Paleta = degradê original da seção. */
.lp-root .gloop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;}
.lp-root .gloop::before{
  content:"";position:absolute;left:0;right:0;top:0;height:400%;
  background:var(--gloop-bg);
  animation:lpDegradeSobe var(--gloop-dur,16s) linear infinite;
  will-change:transform;
}
@keyframes lpDegradeSobe{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,-50%,0);}}
.lp-root .hero .gloop{--gloop-bg:linear-gradient(180deg,#141f4b 0.00%,#1f2c67 2.50%,#2b377c 5.00%,#3d4690 7.50%,#5657a6 10.00%,#7164b1 12.50%,#9b79bb 15.00%,#c18ebf 17.50%,#dda4be 20.00%,#e99fa4 22.50%,#fe915a 25.00%,#e99fa4 27.50%,#dda4be 30.00%,#c18ebf 32.50%,#9b79bb 35.00%,#7164b1 37.50%,#5657a6 40.00%,#3d4690 42.50%,#2b377c 45.00%,#1f2c67 47.50%,#141f4b 50.00%,#1f2c67 52.50%,#2b377c 55.00%,#3d4690 57.50%,#5657a6 60.00%,#7164b1 62.50%,#9b79bb 65.00%,#c18ebf 67.50%,#dda4be 70.00%,#e99fa4 72.50%,#fe915a 75.00%,#e99fa4 77.50%,#dda4be 80.00%,#c18ebf 82.50%,#9b79bb 85.00%,#7164b1 87.50%,#5657a6 90.00%,#3d4690 92.50%,#2b377c 95.00%,#1f2c67 97.50%,#141f4b 100.00%);}
/* hero variante manha (/franquias): lilás → pêssego → amarelo, medido no Figma 249:285 em 23/09/2026 */
.lp-root .hero--manha .gloop{--gloop-bg:linear-gradient(180deg,#ab8fc7 0.00%,#c197c5 3.12%,#dba4bb 6.25%,#efadab 9.38%,#fbb296 12.50%,#feb57e 15.62%,#ffb95f 18.75%,#ffbd33 21.88%,#ffc300 25.00%,#ffbd33 28.12%,#ffb95f 31.25%,#feb57e 34.38%,#fbb296 37.50%,#efadab 40.62%,#dba4bb 43.75%,#c197c5 46.88%,#ab8fc7 50.00%,#c197c5 53.12%,#dba4bb 56.25%,#efadab 59.38%,#fbb296 62.50%,#feb57e 65.62%,#ffb95f 68.75%,#ffbd33 71.88%,#ffc300 75.00%,#ffbd33 78.12%,#ffb95f 81.25%,#feb57e 84.38%,#fbb296 87.50%,#efadab 90.62%,#dba4bb 93.75%,#c197c5 96.88%,#ab8fc7 100.00%);}
.lp-root .seed .gloop{--gloop-bg:linear-gradient(180deg,#0c2a6e 0.00%,#0b216a 3.57%,#0b4a7e 7.14%,#138f9c 10.71%,#3cdfb2 14.29%,#0e6f84 17.86%,#09153b 21.43%,#070c22 25.00%,#09153b 28.57%,#0e6f84 32.14%,#3cdfb2 35.71%,#138f9c 39.29%,#0b4a7e 42.86%,#0b216a 46.43%,#0c2a6e 50.00%,#0b216a 53.57%,#0b4a7e 57.14%,#138f9c 60.71%,#3cdfb2 64.29%,#0e6f84 67.86%,#09153b 71.43%,#070c22 75.00%,#09153b 78.57%,#0e6f84 82.14%,#3cdfb2 85.71%,#138f9c 89.29%,#0b4a7e 92.86%,#0b216a 96.43%,#0c2a6e 100.00%);}

/* ============================================================
   4 · BOTÕES
   ============================================================ */
.lp-root .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  min-height:52px;padding:0 var(--space-24);border-radius:var(--radius-full);
  font-size:var(--fs-btn);font-weight:600;line-height:1;letter-spacing:var(--ls-titulo);
  transition:transform .18s ease,background .2s ease,box-shadow .2s ease;
}
.lp-root .btn:hover{transform:translateY(-1px);}
.lp-root .btn:active{transform:scale(.972);}
.lp-root .btn-light{background:var(--paper);color:var(--navy-900);box-shadow:0 10px 30px rgba(1,22,48,.24);}
.lp-root .btn-dark{background:var(--navy-900);color:var(--paper);}
.lp-root .btn-blue{background:var(--blue);color:var(--paper);}
.lp-root .btn-blue:hover{box-shadow:0 8px 22px rgba(1,90,255,.32);}
.lp-root .btn-ghost{background:rgba(255,255,255,.13);color:var(--paper);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.lp-root .btn-sm{min-height:44px;padding:0 var(--space-20);}
/* CTA: nada em repouso. Só hover e clique. */
.lp-root .btn-aura{position:relative;isolation:isolate;transition:box-shadow .28s ease,transform .18s ease;}
.lp-root .btn-aura::before{
  content:"";position:absolute;left:50%;top:50%;
  width:100%;height:100%;
  border-radius:var(--radius-full);z-index:-1;pointer-events:none;
  border:1px solid var(--aura,rgba(1,90,255,.55));
  opacity:0;transform:translate(-50%,-50%) scale(1);
}
.lp-root .btn-aura:hover::before{animation:lpRing .85s cubic-bezier(.16,.8,.3,1) 1 forwards;}
.lp-root .btn-aura:active::before{animation:lpRing .5s cubic-bezier(.16,.8,.3,1) 1 forwards;}
@keyframes lpRing{
  0%  {transform:translate(-50%,-50%) scale(1);    opacity:.55}
  100%{transform:translate(-50%,-50%) scale(1.22); opacity:0}
}
.lp-root .btn-aura > .sweep{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1;}
.lp-root .btn-aura > .sweep::before{
  content:"";position:absolute;inset:-40% -12%;
  background:linear-gradient(105deg,transparent 40%,var(--sweep,rgba(255,255,255,.3)) 50%,transparent 60%);
  transform:translateX(-135%);
}
.lp-root .btn-aura:hover > .sweep::before{animation:lpSweep .8s cubic-bezier(.4,0,.2,1) 1 forwards;}
@keyframes lpSweep{from{transform:translateX(-135%)}to{transform:translateX(135%)}}
.lp-root .btn-aura:hover{box-shadow:0 0 0 3px rgba(1,90,255,.12),0 8px 22px rgba(1,90,255,.24);}
.lp-root .btn-light.btn-aura{--aura:rgba(255,255,255,.8);--sweep:rgba(1,90,255,.16);}
.lp-root .btn-light.btn-aura:hover{box-shadow:0 0 0 3px rgba(255,255,255,.22),0 10px 26px rgba(1,22,48,.28);}
/* botão redondo das faixas: 64 medido */
.lp-root .btn-round{
  width:64px;height:64px;min-width:64px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;background:var(--paper);color:var(--navy-900);
  transition:transform .2s ease;
}
.lp-root .btn-round:hover{transform:scale(1.08);}
.lp-root .btn-round:active{transform:scale(.972);}
/* ============================================================
   10 · REVEAL
   ============================================================ */
.lp-root .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.lp-root .rv.on{opacity:1;transform:none;}
/* CTA vira <a>: sem sublinhado herdado do navegador */
.lp-root a.btn,.lp-root a.btn-round,.lp-root a.story-go{text-decoration:none;}
@media (max-width:1024px){
  .lp-root{--space-section:68px;}
}
@media (max-width:768px){
  .lp-root{--space-section:56px;--radius-lg:18px;--radius:14px;}
}
/* PDF e impressao nao disparam IntersectionObserver: sem isto, blocos abaixo
   da dobra saem em branco. Foi o que sumiu com o titulo das historias. */
@media print{
  .lp-root .rv{opacity:1!important;transform:none!important;}
  .lp-root .below-fold{content-visibility:visible!important;}
}
@media (prefers-reduced-motion:reduce){
  .lp-root *,.lp-root *::before,.lp-root *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .lp-root .rv{opacity:1;transform:none;}
}

/* ============================================================
   11 · KIT DE PRODUTO — peças comuns a vitrine, manifesto, destaques,
   numeros, motivos e ficha (referência Apple, 23/09/2026)
   ============================================================ */
.lp-root .lp-sec-tit{
  font-size:var(--fs-display);font-weight:600;line-height:1.1;
  letter-spacing:var(--ls-apoio);max-width:20ch;
}
.lp-root .lp-eyebrow{
  font-size:var(--fs-xs);font-weight:600;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin-bottom:var(--space-16);
}
.lp-root .lp-link{
  display:inline-flex;align-items:center;gap:var(--space-4);
  font-size:var(--fs-base);font-weight:500;color:var(--blue);text-decoration:none;
}
.lp-root .lp-link:hover{text-decoration:underline;text-underline-offset:3px;}
.lp-root .lp-link svg{transition:transform .2s ease;}
.lp-root .lp-link:hover svg{transform:translateX(3px);}
/* entrada em cascata: 1ª, 2ª e 3ª linha */
.lp-root .rv.lp-d1{transition-delay:.05s;}
.lp-root .rv.lp-d2{transition-delay:.18s;}
.lp-root .rv.lp-d3{transition-delay:.32s;}
.lp-root .rv{transition-timing-function:cubic-bezier(.2,.7,.2,1);}

/* ritmo compacto (Home V2, 24/09/2026) — pedido do Daniel, com a regra de agrupamento:
   · entre seções (separação): o respiro cheio, 2× — 64 / 56 / 48
   · a faixa de domínio (CTA) gruda na seção que vem depois dela: metade — 32 / 28 / 24
   Ou seja, antes da faixa o espaço é o dobro do espaço depois dela.
   A margem negativa depois da faixa é a única exceção à regra 19, só neste ritmo. Escala base 4. */
.lp-root.lp-root--compacto{--space-section:var(--space-64);}
.lp-root.lp-root--compacto > .sec:has(> .strip) + *{margin-top:calc(var(--space-section) / -2);}
@media (max-width:1024px){ .lp-root.lp-root--compacto{--space-section:var(--space-56);} }
@media (max-width:768px){ .lp-root.lp-root--compacto{--space-section:var(--space-48);} }

/* títulos que acendem (24/09/2026): a palavra nasce apagada e acende com a rolagem.
   Por opacidade, para servir em fundo claro e escuro. Só com JS (.lp-ac). */
.lp-root .lp-ac .lp-ac-w{opacity:.22;transition:opacity .45s ease;}
.lp-root .lp-ac .lp-ac-w.on{opacity:1;}
@media print{ .lp-root .lp-ac .lp-ac-w{opacity:1!important;} }

/* 24/10/2026 (Daniel): a 1ª dobra nunca depende do JS de rolagem para aparecer.
   Título, texto e botões do 1º bloco de toda página entram sozinhos ao carregar (animação CSS,
   mesma curva e mesmos atrasos), em vez de esperar o IntersectionObserver ligar .on. */
main.lp-root > :first-child .rv,
main.lp-root > .rv:first-child{opacity:1;transform:none;transition:none;animation:lpDobra .7s cubic-bezier(.2,.7,.2,1) both;}
main.lp-root > :first-child .rv.lp-d1{animation-delay:.05s;}
main.lp-root > :first-child .rv.lp-d2{animation-delay:.18s;}
main.lp-root > :first-child .rv.lp-d3{animation-delay:.32s;}
@keyframes lpDobra{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ main.lp-root > :first-child .rv{animation:none;} }