/* ============================================================
   SEÇÃO · vitrine — abertura da página de produto (referência Apple)
   Bloco claro, texto centralizado, produto grande embaixo.
   A mídia cresce levemente com a rolagem (--vit-p, 0→1, só transform).
   ============================================================ */
.lp-root .lp-vit{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#f5f5f7 0%,#fbfbfd 60%,#f5f5f7 100%);
  padding:var(--space-88) var(--space-40) 0;text-align:center;
}
.lp-root .lp-vit-txt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.lp-root .lp-vit-selo{
  display:inline-block;margin-bottom:var(--space-16);padding:var(--space-4) var(--space-12);
  border-radius:var(--radius-full);border:1px solid var(--line);
  font-size:var(--fs-xs);font-weight:500;color:var(--muted);
}
.lp-root .lp-vit-marca{
  font-size:var(--fs-h3);font-weight:600;line-height:1.2;letter-spacing:var(--ls-apoio);color:var(--ink);
}
.lp-root .lp-vit-titulo{
  margin-top:var(--space-8);
  font-size:var(--fs-mega);font-weight:600;line-height:1.02;letter-spacing:var(--ls-apoio);
  background:linear-gradient(90deg,#16265e 0%,#015aff 55%,#8414dc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em;max-width:14ch;
}
.lp-root .lp-vit-sub{
  margin-top:var(--space-20);max-width:560px;
  font-size:var(--fs-h4);font-weight:400;line-height:1.45;color:var(--ink-2);
}
.lp-root .lp-vit-ctas{margin-top:var(--space-32);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-24);}
.lp-root .lp-vit-btn{min-height:48px;padding:0 var(--space-24);border-radius:var(--radius-full);}
.lp-root .lp-vit-midia{
  --vit-p:0;
  position:relative;z-index:1;margin:var(--space-48) auto 0;max-width:880px;
  transform:translate3d(0,calc((1 - var(--vit-p)) * 40px),0) scale(calc(.9 + var(--vit-p) * .1));
  transform-origin:50% 100%;will-change:transform;mix-blend-mode:multiply;
}
.lp-root .lp-vit-midia img{width:100%;height:auto;border-radius:var(--radius);}
/* sem foto: ondas de leitura (estáticas; só crescem com a rolagem) */
.lp-root .lp-vit-ondas{position:relative;aspect-ratio:1356/700;display:grid;place-items:center;}
.lp-root .lp-vit-ondas i{
  position:absolute;left:50%;top:100%;border-radius:50%;
  transform:translate(-50%,-50%);border:1.5px solid rgba(1,90,255,.18);
}
.lp-root .lp-vit-ondas i:nth-child(1){width:34%;aspect-ratio:1;border-color:rgba(1,90,255,.55);background:radial-gradient(circle,rgba(1,90,255,.14),rgba(1,90,255,0) 70%);}
.lp-root .lp-vit-ondas i:nth-child(2){width:58%;aspect-ratio:1;border-color:rgba(1,90,255,.35);}
.lp-root .lp-vit-ondas i:nth-child(3){width:82%;aspect-ratio:1;border-color:rgba(132,20,220,.22);}
.lp-root .lp-vit-ondas i:nth-child(4){width:106%;aspect-ratio:1;border-color:rgba(132,20,220,.12);}
.lp-root .lp-vit-ondas span{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  font-size:var(--fs-mega);font-weight:600;letter-spacing:var(--ls-apoio);line-height:1;color:var(--navy-900);
}
@media (max-width:768px){
  .lp-root .lp-vit{padding:var(--space-56) var(--space-20) 0;}
  .lp-root .lp-vit-midia{margin-top:var(--space-32);}
  .lp-root .lp-vit-ctas{flex-direction:column;gap:var(--space-16);}
}

/* ── roda de palavras (Home, 23/09/2026): "Seu [palavra] / do futuro." no estilo Apple.
   Partes fixas em tinta; só a palavra que troca leva o degradê. A palavra sobe e some,
   a próxima sobe de baixo; a largura do vão acompanha a palavra (medida pelo JS). */
.lp-root .lp-vit-titulo--roda{background:none;color:var(--ink);max-width:none;font-size:min(var(--fs-mega),9vw);}
.lp-root .lp-vit-linha{display:block;}
.lp-root .lp-vit-slot{
  --vit-w:auto;
  position:relative;display:inline-block;vertical-align:bottom;overflow:hidden;
  width:var(--vit-w);height:1.26em;margin-bottom:-.12em;text-align:left;
  transition:width .6s cubic-bezier(.2,.7,.2,1);
}
.lp-root .lp-vit-pal{
  position:absolute;left:0;top:.12em;white-space:nowrap;padding-bottom:.08em;
  background:linear-gradient(90deg,#16265e 0%,#015aff 55%,#8414dc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translate3d(0,100%,0);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s ease;
}
.lp-root .lp-vit-pal.is-on{position:relative;display:inline-block;opacity:1;transform:none;}
.lp-root .lp-vit-pal.is-out{opacity:0;transform:translate3d(0,-100%,0);}
.lp-root .lp-vit-fotos{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);}
.lp-root .lp-vit-fotos img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;
  opacity:0;transition:opacity .9s ease;
}
.lp-root .lp-vit-fotos img.is-on{opacity:1;}
@media (prefers-reduced-motion:reduce){ .lp-root .lp-vit-midia{transform:none!important;} }

/* Home V2 (24/09/2026): menos respiro acima da frase da abertura */
.lp-root.lp-root--compacto .lp-vit{padding-top:var(--space-56);}
@media (max-width:768px){ .lp-root.lp-root--compacto .lp-vit{padding-top:var(--space-40);} }
@media (max-width:768px){
  /* celular (24/09/2026): mais ar entre "Seu [palavra]" e "do futuro", e a palavra um pouco mais alta */
  .lp-root .lp-vit-titulo--roda{line-height:1.12;}
  .lp-root .lp-vit-titulo--roda .lp-vit-linha + .lp-vit-linha{margin-top:.14em;}
  .lp-root .lp-vit-titulo--roda .lp-vit-pal{top:.02em;}
}

/* 24/09/2026: o hero chegou a ficar no tamanho do "O problema" (44px) e o Daniel pediu de volta o tamanho grande (--fs-mega). Não reduzir. */

/* quebra fixa (24/09/2026, pedido do Daniel): "Sua operação" em cima e a palavra que troca SEMPRE embaixo,
   com palavra curta ou longa. A linha da palavra não quebra; o título não passa da largura da tela. */
.lp-root .lp-vit-titulo--roda .lp-vit-linha--roda{white-space:nowrap;}
/* frase em linhas fixas (prop "linhas", sem roda) — mesmo tamanho da roda, com o degradê na frase inteira */
.lp-root .lp-vit-titulo--linhas{font-size:min(var(--fs-mega),9vw);max-width:none;}
.lp-root .lp-vit-titulo--linhas .lp-vit-linha{display:block;}

/* modo "junto" (Home V2, 24/09/2026): no computador "Seu [palavra]" numa linha e "do futuro." embaixo.
   No celular (exceção pedida pelo Daniel) "Seu" vai para a linha de cima: Seu / [palavra] / do futuro. */
@media (max-width:768px){ .lp-root .lp-vit-titulo--roda .lp-vit-antes{display:block;} }

/* prop "acima" (Movimento V2, 24/09/2026): "Honrar o tempo para" / "viver com [palavra]" — no celular
   o "viver com" continua na linha da palavra (não vale a exceção do "Seu" da Home). */
.lp-root .lp-vit-titulo--acima .lp-vit-antes{display:inline;}

/* ============================================================
   variante "home" (19/10/2026, doc "Ajustes gloda.tech 18/10", item 01)
   Fundo branco puro, sem contêiner cinza; palavra da roda com o degradê cromático da marca
   deslizando dentro das letras (8 s, loop sem salto); link secundário preto; faixa curva de cartões
   (Tilted Grid Hero) de ponta a ponta da tela, logo abaixo dos botões.
   ============================================================ */
.lp-root .lp-vit-home{position:relative;}
.lp-root .lp-vit--home{background:#fff;border-radius:0;overflow:visible;padding:var(--space-48) 0 0;}
.lp-root.lp-root--compacto .lp-vit--home{padding-top:var(--space-48);}
.lp-root .lp-vit--home .lp-vit-sub{margin-top:var(--space-24);color:#6e6e73;}
.lp-root .lp-vit--home .lp-vit-ctas{margin-top:var(--space-40);gap:var(--space-32);}
.lp-root .lp-vit--home .lp-vit-btn{min-height:52px;padding:0 var(--space-32);}
.lp-root .lp-link--preto{color:#1d1d1f;font-weight:500;}
.lp-root .lp-link--preto:hover{color:#1d1d1f;}
/* degradê cromático: vermelho → laranja → amarelo → creme → ciano → azul, e volta ao vermelho
   no fim da faixa para o ciclo fechar sem salto. A faixa tem 2× a largura da palavra e anda
   exatamente uma faixa por ciclo. Cada palavra roda desde o carregamento, então a troca de
   palavra não reinicia o movimento. Com movimento reduzido, fica parado (regra global do base.css). */
.lp-root .lp-vit--home .lp-vit-pal{
  background-image:linear-gradient(90deg,#ff4a3d 0%,#ff7a1a 16.6%,#ffd84a 33.3%,#f8f6de 50%,#88efff 66.6%,#2f6bff 83.3%,#ff4a3d 100%);
  background-size:200% 100%;background-repeat:repeat-x;background-position:0% 50%;
  animation:lpPalCor 8s linear infinite;
}
@keyframes lpPalCor{from{background-position:0% 50%}to{background-position:-200% 50%}}

/* faixa curva de cartões — geometria do componente original (curva 80°, eixo 56%, cartão 26% da altura) */
.lp-root .lp-tgh{position:relative;width:100%;height:clamp(260px,30vw,460px);margin-top:var(--space-32);overflow:hidden;container-type:size;}
.lp-root .lp-tgh-fb{display:flex;gap:16px;justify-content:center;align-items:center;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.lp-root .lp-tgh-fb img{flex:0 0 auto;height:40%;width:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;}
.lp-root .lp-tgh.is-3d .lp-tgh-fb{display:none;}
.lp-root .lp-tgh-cena{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.lp-root .lp-tgh.is-3d .lp-tgh-cena{opacity:1;}
.lp-root .lp-tgh-col{position:absolute;transform-style:preserve-3d;will-change:transform;}
.lp-root .lp-tgh-fat{position:absolute;top:0;overflow:hidden;background:#f5f5f7;backface-visibility:hidden;}
.lp-root .lp-tgh-fat img{position:absolute;top:0;max-width:none;object-fit:cover;user-select:none;}
.lp-root .lp-tgh-fat.is-ini{border-radius:14px 0 0 14px;}
.lp-root .lp-tgh-fat.is-fim{border-radius:0 14px 14px 0;}
.lp-root .lp-tgh.lp-pausa .lp-tgh-col{animation-play-state:paused!important;}
@media (max-width:768px){
  .lp-root .lp-vit--home{padding:var(--space-56) 0 0;}
  .lp-root.lp-root--compacto .lp-vit--home{padding-top:var(--space-56);}
  .lp-root .lp-vit--home .lp-vit-ctas{flex-direction:row;flex-wrap:wrap;gap:var(--space-16) var(--space-24);margin-top:var(--space-32);}
  .lp-root .lp-tgh{height:clamp(220px,64vw,300px);margin-top:var(--space-24);}
}
@media (prefers-reduced-motion:reduce){ .lp-root .lp-vit--home .lp-vit-pal{animation:none;} }

/* ============================================================
   PADRÃO ÚNICO DE HERO (22/10/2026, doc "Ajustes 22/10", item 02)
   Toda vitrine segue o hero da Home: fundo branco sem contêiner, título em tinta no tamanho da Home
   em cada largura, só o destaque com o degradê cromático animado (8 s), subtítulo cinza, botão azul
   institucional #2F6BFF e link secundário preto, com os mesmos respiros. A mídia de cada página fica.
   ============================================================ */
.lp-root .lp-vit--padrao{background:#fff;border-radius:0;overflow:visible;padding:var(--space-48) 0 0;}
.lp-root.lp-root--compacto .lp-vit--padrao{padding-top:var(--space-48);}
.lp-root .lp-vit--padrao .lp-vit-titulo{background:none;color:var(--ink);-webkit-text-fill-color:currentColor;max-width:none;font-size:min(var(--fs-mega),9vw);text-wrap:balance;}
.lp-root .lp-vit--padrao .lp-vit-sub{margin-top:var(--space-24);color:#6e6e73;}
.lp-root .lp-vit--padrao .lp-vit-ctas{margin-top:var(--space-40);gap:var(--space-32);}
.lp-root .lp-vit--padrao .lp-vit-btn{min-height:52px;padding:0 var(--space-32);background-color:#2f6bff!important;}
.lp-root .lp-vit--padrao .lp-vit-btn:hover{background-color:#1f57e6!important;box-shadow:0 8px 22px rgba(47,107,255,.32);}
.lp-root .lp-vit--padrao .lp-vit-pal,
.lp-root .lp-vit--padrao .lp-vit-dest{
  background-image:linear-gradient(90deg,#ff4a3d 0%,#ff7a1a 16.6%,#ffd84a 33.3%,#f8f6de 50%,#88efff 66.6%,#2f6bff 83.3%,#ff4a3d 100%);
  background-size:200% 100%;background-repeat:repeat-x;background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:lpPalCor 8s linear infinite;
}
.lp-root .lp-vit--padrao .lp-vit-dest{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.08em;}
.lp-root .lp-vit--padrao .lp-vit-midia{mix-blend-mode:normal;}
@media (max-width:768px){
  .lp-root .lp-vit--padrao{padding:var(--space-56) 0 0;}
  .lp-root.lp-root--compacto .lp-vit--padrao{padding-top:var(--space-56);}
  .lp-root .lp-vit--padrao .lp-vit-ctas{flex-direction:row;flex-wrap:wrap;gap:var(--space-16) var(--space-24);margin-top:var(--space-32);}
}
@media (prefers-reduced-motion:reduce){ .lp-root .lp-vit--padrao .lp-vit-pal,.lp-root .lp-vit--padrao .lp-vit-dest{animation:none;} }

/* ============================================================
   LEQUE DE CARTÕES (22/10/2026, doc "Ajustes 22/10", item 12) — Hero With Cards (ScrollX UI, 21st.dev, MIT)
   em CSS puro. Cada cartão sabe a própria posição (--p: -2…2): aberto, desloca --p × passo e gira --p × ângulo,
   a partir da base. Antes de entrar na tela fica empilhado no centro, baixo e transparente; o JS liga .is-aberto.
   ============================================================ */
.lp-root .lp-leque{
  --passo:120px;--ang:11deg;--cw:224px;--ch:320px;
  position:relative;height:calc(var(--ch) + 60px);margin:var(--space-56) auto 0;max-width:100%;
  overflow:hidden;overflow:clip;overflow-clip-margin:40px;
}
.lp-root .lp-leque-c{
  position:absolute;left:50%;bottom:0;width:var(--cw);height:var(--ch);margin:0 0 0 calc(var(--cw) / -2);
  border-radius:18px;overflow:hidden;background:#f5f5f7;
  box-shadow:0 1px 2px rgba(18,18,18,.06),0 18px 40px rgba(1,22,48,.12);
  transform-origin:50% 100%;z-index:var(--z);
  transform:translate3d(calc(var(--p) * var(--passo)),0,0) rotate(calc(var(--p) * var(--ang)));
  transition:transform .65s cubic-bezier(.22,1,.36,1) var(--d),opacity .5s ease var(--d),box-shadow .3s ease;
}
.lp-root .lp-leque-c img{width:100%;height:100%;object-fit:cover;display:block;}
.lp-root .lp-leque--contain .lp-leque-c img{object-fit:contain;padding:12%;}
/* estado inicial (só quando o JS está ativo): pilha baixa no centro */
.lp-root .lp-leque.is-js:not(.is-aberto) .lp-leque-c{opacity:0;transform:translate3d(0,60px,0) rotate(0deg);transition-delay:0s;}
/* 23/10/2026: o leque abre acompanhando a rolagem (--t de 0 a 1, vitrine.js). Empilhado e visível no topo da página;
   a regra antiga acima fica sem efeito porque esta vem depois e vale para todo leque com JS. */
.lp-root .lp-leque.is-js .lp-leque-c{opacity:1;
  transform:translate3d(calc(var(--p) * var(--passo) * var(--t,0)),calc((1 - var(--t,0)) * 24px),0) rotate(calc(var(--p) * var(--ang) * var(--t,0)));
  transition:transform .18s linear,box-shadow .3s ease;transition-delay:0s;}
.lp-root .lp-leque.is-js.is-aberto .lp-leque-c:hover{transform:translate3d(calc(var(--p) * var(--passo)),-14px,0) rotate(calc(var(--p) * var(--ang)));transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;}
.lp-root .lp-leque.is-aberto .lp-leque-c:hover{transform:translate3d(calc(var(--p) * var(--passo)),-14px,0) rotate(calc(var(--p) * var(--ang)));box-shadow:0 1px 2px rgba(18,18,18,.06),0 24px 50px rgba(1,22,48,.18);transition-delay:0s;}
@media (max-width:1024px){ .lp-root .lp-leque{--passo:92px;--cw:190px;--ch:272px;overflow-clip-margin:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} }   /* sem margem de corte: os cartões das pontas não podem empurrar a página para o lado */
@media (max-width:640px){ .lp-root .lp-leque{--passo:min(15vw,58px);--ang:9deg;--cw:min(38vw,150px);--ch:min(54vw,214px);margin-top:var(--space-40);} }
@media (prefers-reduced-motion:reduce){ .lp-root .lp-leque-c{transition:none;} }

/* 24/10/2026 (Daniel): tela baixa no computador (notebook, zoom alto) — título, respiros e botões
   encolhem pela altura da tela para os botões caberem sempre na 1ª dobra. */
@media (min-width:769px) and (max-height:820px){
  .lp-root .lp-vit--home,.lp-root .lp-vit--padrao,.lp-root.lp-root--compacto .lp-vit--home,.lp-root.lp-root--compacto .lp-vit--padrao{padding-top:var(--space-32);}
  .lp-root .lp-vit--home .lp-vit-titulo,.lp-root .lp-vit--padrao .lp-vit-titulo{font-size:min(var(--fs-mega),9vw,12.5vh);}
  .lp-root .lp-vit--home .lp-vit-sub,.lp-root .lp-vit--padrao .lp-vit-sub{margin-top:var(--space-16);}
  .lp-root .lp-vit--home .lp-vit-ctas,.lp-root .lp-vit--padrao .lp-vit-ctas{margin-top:var(--space-24);}
}
.lp-root .lp-vit-home:not(:has(.lp-tgh)) .lp-vit--home{padding-bottom:var(--space-56);}   /* 26/10: capa sem faixa de cartões (Movimento) ganha respiro antes da próxima seção */