/* Vitrine IMT Academy — a página de "/" (23/09/2026; identidade nova em 12/10/2026, v7)
 * Vem DEPOIS de /assets/loja/identidade.css (tokens, palco/papel, Bricolage + Bodoni, faixa, estrela, anéis,
 * rasgado, pílula, botão, topo fixo, @israelmeira, rodapé e o revelar à prova de falha). Aqui só o que é da home:
 *
 *   .vitrine-hero           o hero (palco): esp + h1 "Escolha por onde / começar." à esquerda; o lead e os
 *                           atalhos à direita (≥ 900 px); espaço embaixo para os cards entrarem no palco
 *   .atalhos > ul > a.atalho   um atalho por produto: pílula de contorno com o quadradinho na cor dele (#slug)
 *   .entrar                 "Já comprei · Entrar" com 2+ áreas (<details>, abre sem JS); com uma, link direto
 *   ul.cards > li.cards__item > a.card   um card por produto (cores em #slug, do registro)
 *     .card__midia (.card__img + .card__video + .card__previa)  anéis atrás da foto onde ela é transparente
 *     .card__corpo (.card__fato = faixa reta, .card__nome com a .serif, .card__chamada, .card__preco, .card__botao)
 *     .card--escuro  (cor escura: texto claro; selo, preço e botão em --cor-dest)
 *     .card--foto    (sem vídeo: zoom lento na foto quando ativo)
 *     .ativo / .tocando  postos pelo vitrine.js; html.previas = vai ter prévia (JS ligado e sem "menos movimento")
 *   .duvida                 cartão de palco "Não sabe por onde começar?" (WhatsApp + @israelmeira)
 *   .estudio                bilhete de papel rasgado "Prefere contratar?"
 *   .rodape__area           a faixa "Já comprou? Seu acesso fica na Minha área."
 *
 * Tudo que esconde vive em html.anima (o lp.js só põe quando dá para animar). Nenhum style="" no HTML: as cores
 * dos cards vêm do <style> gerado pelo vitrine.php e os atrasos são classes (.dN) e --cd por nth-child aqui.
 */

:root { --cd: 0ms; }
html { scroll-padding-top: calc(var(--topo-h) + 12px); }
.pg-vitrine { background: var(--palco-base); }

/* ═══ TOPO (o resto vem da identidade) ═════════════════════════════════════ */
.entrar { position: relative; flex: none; }
.entrar summary { list-style: none; cursor: pointer; }
.entrar summary::-webkit-details-marker { display: none; }
.entrar[open] summary { background: var(--branco); color: #000; border-color: var(--branco); }
.entrar[open] summary b { color: #000; }
.entrar__painel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: min(330px, calc(100vw - 32px)); padding: 8px;
  border-radius: 22px; background: #151515; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); }
.entrar__titulo { padding: 10px 12px 6px; font-size: .625rem; }
.entrar__painel a { display: grid; gap: 4px; min-height: 52px; align-content: center; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--branco); }
.entrar__painel a b { font: 600 .95rem/1.2 var(--f); }
.entrar__painel a small { font: 400 .8125rem/1.35 var(--f); color: var(--apoio-palco); }
@media (hover: hover) { .entrar__painel a:hover { background: rgba(255,255,255,.07); } }
/* o @israelmeira ESCRITO no topo já a partir de 360 px (a identidade só escreve a partir de 430): é a regra dele
   (sempre em evidência), e no celular é onde está quase todo o tráfego. Abaixo de 360 fica só o ícone. */
@media (min-width: 360px) {
  .pg-vitrine .ig--topo { width: auto; padding: 0 12px 0 10px; gap: 7px; }
  .pg-vitrine .ig--topo .ig__tx { display: inline; font-size: .8125rem; }
  .pg-vitrine .topo__esq { gap: 8px; }
}
@media (min-width: 360px) and (max-width: 429px) { .pg-vitrine .topo .logo img { height: 22px; } }

/* ═══ HERO (palco) ═══════════════════════════════════════════════════════ */
.vitrine-hero { position: relative; overflow: hidden; overflow: clip; padding: calc(var(--topo-h) + 32px) 0 112px; }
.hero__grade { display: grid; }
.hero__h1 { margin-top: 14px; font: 250 2.25rem/1.02 var(--f); font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  font-variation-settings: 'opsz' 96; letter-spacing: -.045em; color: var(--branco); }
@media (max-width: 599px) { .hero__h1 { font-weight: 300; } }
.hero__h1-fina { display: block; }
.hero__h1-serif { display: block; }
.hero__h1 .serif { font-size: clamp(3.25rem, 1.4rem + 7vw, 8rem); line-height: .95; letter-spacing: -.04em; }
.hero__h1 .estrela--hero { width: clamp(30px, 2vw + 18px, 52px); margin: .3em 0 0 .06em; }
.pg-vitrine .lead { text-wrap: pretty; }   /* sem palavra sozinha na última linha ("passo.", "cria.") */
.vitrine-hero .lead { margin-top: 16px; max-width: 36ch; }
.vitrine-hero .lead b { color: var(--branco); }

/* atalhos: os produtos, cada um com o quadradinho na cor dele (achar o produto sem rolar a página) */
.atalhos { margin-top: 20px; }
.atalhos ul { display: flex; flex-wrap: wrap; gap: 0 6px; }
.atalho { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px 0 11px; text-decoration: none;
  font: 500 .875rem/1 var(--f); color: var(--branco); isolation: isolate; transition: color .2s var(--ease-out); }
.atalho::before { content: ""; position: absolute; z-index: -1; inset: 5px 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.04); transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out); }
.atalho i { flex: none; width: 9px; height: 9px; background: var(--cor); }
/* cor que quase some no palco (< 2,0:1 contra #101010: o #1C1C1C da mentoria e o jade do Motion; posto pelo
   vitrine.php): o quadradinho e o hover ganham o contorno no destaque do card (o lime) */
.atalho--contorno i { box-shadow: 0 0 0 1.5px var(--cor-dest); }
.atalho:focus-visible { outline: 2px solid var(--lime); outline-offset: 0; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .atalho:hover { color: var(--cor-tx); }
  .atalho:hover::before { background: var(--cor); border-color: var(--cor); }
  .atalho--contorno:hover::before { border-color: var(--cor-dest); }
}

/* anéis atrás de "começar.", cortados pela borda do hero */
.aneis--hero { --ax: 30%; --ay: 66%; }

@media (min-width: 900px) {
  .vitrine-hero { padding: calc(var(--topo-h) + 72px) 0 152px; }
  .hero__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; }
  .hero__lado { padding-bottom: .4em; }
  .vitrine-hero .lead { margin-top: 0; }
  .aneis--hero { --ax: 24%; --ay: 72%; }
}

/* ═══ CARDS (papel) ══════════════════════════════════════════════════════ */
.vitrine-cards { position: relative; display: flow-root; padding-bottom: var(--dobra-y); }   /* flow-root: a margem negativa dos cards não vaza */
/* 1 coluna (< 600) · 2 (600–999) · 3 (≥ 1000); a última fileira incompleta fica centrada; nenhuma regra por número */
.cards { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: -72px; }
.cards__item { display: flex; flex: 0 0 100%; max-width: 440px; min-width: 0; }
@media (min-width: 600px)  { .cards { gap: 20px; } .cards__item { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1000px) { .cards { gap: 24px; margin-top: -96px; } .cards__item { flex-basis: calc((100% - 48px) / 3); max-width: none; } }

.card { position: relative; display: flex; flex-direction: column; width: 100%; padding: 8px; border-radius: var(--raio-cartao);
  background: var(--cor, #D8FF00); background: var(--cor-fundo, var(--cor, #D8FF00)); color: var(--cor-tx, #000); text-decoration: none;
  container-type: inline-size;
  /* o contorno de 1 px é o que segura a borda do card lime no papel (lime × #F2F1EC dá 1,02:1) */
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 48px -28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.06);
  --midia-bg: var(--cor); --chapeu: rgba(0,0,0,.14);
  transition: transform .55s var(--mola), box-shadow .45s var(--ease-out); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .card { --midia-bg: color-mix(in srgb, var(--cor) 86%, #000); --tx-2: color-mix(in srgb, var(--cor-tx) 76%, var(--cor)); }
}
.card:focus-visible { outline: 3px solid #000; outline-offset: 3px; border-radius: var(--raio-cartao); }

/* mídia: foto em repouso, prévia por cima; os anéis atrás (só aparecem onde a foto é transparente) */
.card__midia { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; isolation: isolate; background: var(--midia-bg); }
.card__midia::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: repeating-radial-gradient(circle at 50% 40%, transparent 0 54px, var(--chapeu) 54px 55.5px); }
.card__img, .card__video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%;
  transition: transform .6s var(--ease-out); }
.card__video { z-index: 2; opacity: 0; transition: opacity .35s var(--ease-out); background: transparent; }
.card.tocando .card__video { opacity: 1; }
.card--foto .card__img { transform-origin: 50% 38%; animation: ken-burns 14s var(--ease-seno) infinite alternate paused; }
.card--foto.ativo .card__img { animation-play-state: running; }
@keyframes ken-burns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.16) translate(-2.5%, 2%); } }

/* o selo ▶ da prévia: a pílula de vidro escuro da /agencia/ (.flutua figcaption) */
.card__previa { position: absolute; z-index: 3; left: 14px; bottom: 14px; display: none; align-items: center; gap: 7px; min-height: 28px; padding: 0 12px 0 10px;
  border-radius: 999px; background: rgba(10,10,10,.72); color: #E6E6E6; font: 600 .625rem/1 var(--f-esp); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .25s var(--ease-out); }
.card__previa::before { content: ""; width: 0; height: 0; border-block: 4.5px solid transparent; border-left: 7px solid currentColor; }
.card.tocando .card__previa { opacity: 0; }
/* o selo ▶ só promete o que vai acontecer: JS ligado e sem "menos movimento" (html.previas, do vitrine.js) */
html.previas .card__previa { display: inline-flex; }
.so-toque { display: none; }
@media (hover: none), (pointer: coarse) { .so-mouse { display: none; } .so-toque { display: inline; } }

/* corpo */
.card__corpo { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 10px; padding: 18px 12px 12px; }
/* o selo: uma FAIXA reta, inclinada, legível e numa linha só ("AO VIVO · 30/10 · 19H" mede ~213 px) */
.card__fato { display: inline-flex; align-items: center; min-height: 28px; margin: 0 0 2px 1px; padding: 0 10px 0 12px; rotate: -2deg;
  background: #000; color: var(--cor); font: 600 .6875rem/1 var(--f-esp); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.card__nome { margin-top: 2px; font: 300 1.625rem/1.04 var(--f); font-size: clamp(1.5rem, 8.2cqi, 2rem);
  font-variation-settings: 'opsz' 32; letter-spacing: -.035em; text-wrap: balance; }
.card__nome .serif { font-size: 1.12em; letter-spacing: -.03em; color: var(--cor-tx); }
/* em linha (2 ou 3 colunas) o nome reserva duas linhas: as chamadas começam na mesma altura */
@media (min-width: 600px) { .card__nome { min-height: 2.08em; } }
.card__chamada { font: 400 1rem/1.42 var(--f); color: var(--tx-2, var(--cor-tx)); text-wrap: pretty; }
.card__preco { display: grid; gap: 4px; margin-top: auto; padding-top: 10px; }
.card__preco small { font: 600 .6875rem/1.2 var(--f-esp); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-2, var(--cor-tx)); }
.card__preco b { font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 6;
  font-size: 2.25rem; font-size: clamp(2rem, 11cqi, 2.75rem); line-height: .95; letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--cor-dest); white-space: nowrap; }
.card__preco span { font: 400 .8125rem/1.35 var(--f); color: var(--tx-2, var(--cor-tx)); }
.card__preco--nota { align-self: stretch; display: block; margin-top: auto; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); font: 500 .9375rem/1.4 var(--f); color: var(--cor-tx); }
.card__botao { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; margin-top: 12px; padding: 0 6px 0 20px;
  border-radius: 999px; background: #000; color: var(--cor); font: 600 1rem/1.15 var(--f); letter-spacing: -.01em; }
.card__botao-tx { white-space: nowrap; }
.card__seta { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--cor); }
.card__seta--whats { display: grid; place-items: center; color: #000; }
.card__seta--whats svg { width: 24px; height: 24px; }
.card__seta--whats::after { content: none; }
.card__seta::after { content: ""; position: absolute; inset: 11px; background: #000; transition: transform .45s var(--mola-estalo);
  -webkit-mask: url(/assets/loja/img/seta.png) center / contain no-repeat; mask: url(/assets/loja/img/seta.png) center / contain no-repeat; }
/* cor escura (o jade do Motion, o palco da mentoria): texto claro; selo, serifada, preço e botão no destaque */
.card--escuro { --chapeu: rgba(216,255,0,.16); }
.card--escuro .card__fato { background: var(--cor-dest); color: #000; }
.card--escuro .card__nome .serif { color: var(--cor-dest); }
.card--escuro .card__botao { background: var(--cor-dest); color: #000; }
.card--escuro .card__seta { background: #000; }
.card--escuro .card__seta::after { background: var(--cor-dest); }
.card--escuro .card__seta--whats { color: var(--cor-dest); }
.card--escuro .card__preco--nota { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); }
.card--em-breve { opacity: .92; }

@media (hover: hover) and (pointer: fine) {
  .card:hover, .card.ativo { transform: translateY(-8px); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 34px 60px -30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.06); }
  .card:hover .card__seta::after, .card.ativo .card__seta::after { transform: translate(2px, -2px); }
  .card:not(.card--foto):hover .card__img { transform: scale(1.03); }
}

/* ═══ DÚVIDA: cartão de palco (WhatsApp + @israelmeira) ═══════════════════
 * Fecha a grade com peso. "começar?" repete a palavra do h1 de propósito: a página fecha o laço que abriu. */
.duvida { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; flex-direction: column; align-items: stretch; gap: 22px;
  margin-top: 40px; padding: 28px 22px 24px; border-radius: var(--raio-cartao); }
.aneis--duvida { --ax: 88%; --ay: 50%; --k: .5; }
.duvida__texto, .duvida__acoes { position: relative; z-index: 1; }
.duvida__texto { flex: 1 1 auto; min-width: 0; }
.duvida__titulo { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); max-width: 24ch; }
.duvida__titulo .estrela--p { margin: -.05em 0 0 .08em; }
.duvida .lead { margin-top: 12px; max-width: 40ch; }
.duvida__acoes { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.duvida__cta { gap: 10px; min-height: 56px; padding: 0 24px; }
.duvida__icone { display: inline-grid; }
.duvida__icone svg { width: 22px; height: 22px; }
.ig--duvida { justify-content: center; min-height: 48px; border: 1.5px solid rgba(255,255,255,.55); color: var(--branco); font-size: .9375rem; }
.ig--duvida .ig__pre { color: var(--apoio-palco); }
@media (hover: hover) { .ig--duvida:hover { background: var(--branco); color: #000; } .ig--duvida:hover .ig__pre { color: #2B2B2B; } }
@media (min-width: 760px) {
  .duvida { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 40px 44px; }
  .duvida__acoes { flex: none; }
}
@media (min-width: 1000px) { .duvida { margin-top: 56px; } }

/* ═══ ESTÚDIO: bilhete de papel rasgado (o único da página) ═══════════════
 * Para quem quer contratar, não aprender. Discreto de propósito: não disputa com os cards nem com o WhatsApp. */
.estudio { --sombra-rasgo: rgba(0,0,0,.22); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; margin: 28px auto 0;
  padding: 22px 26px; text-decoration: none; color: var(--apoio-papel); font: 400 1rem/1.45 var(--f); }
.estudio b { color: #000; font-weight: 650; }
.estudio__texto { text-wrap: pretty; }   /* sem o "lá." sozinho no celular */
.estudio__botao { flex: none; --tx: #000; --contorno: rgba(0,0,0,.45); }
.estudio__botao::after { content: '\2197'; font-size: 1rem; line-height: 1; }
.estudio:focus-visible { outline: 3px solid #000; outline-offset: 6px; }
@media (hover: hover) { .estudio:hover .estudio__botao { background: #000; color: var(--lime); border-color: #000; } }
/* no celular o botão ocupa a largura e fica numa linha ("Conhecer a IMT Creative Studio ↗"); em 320 pode quebrar, equilibrado */
@media (max-width: 759px) { .estudio__botao { text-wrap: balance; text-align: center; } }
@media (min-width: 360px) and (max-width: 759px) { .estudio { padding: 22px 18px; } .estudio__botao { align-self: stretch; justify-content: center; padding: 0 16px; white-space: nowrap; } }
@media (min-width: 600px) { .estudio { rotate: -1.2deg; } }
@media (min-width: 760px) { .estudio { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; } }

/* ═══ RODAPÉ: a faixa da Minha área + a grade da identidade ════════════════ */
.pg-vitrine .rodape { padding: 56px 0 64px; }
.rodape__area { display: grid; gap: 22px; align-items: center; padding-bottom: 40px; }
/* o fio fica dentro da coluna (no .dentro a borda pegaria o gutter e passaria 40 px para fora do logo e do botão) */
.rodape__area::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; border-top: 1px solid rgba(255,255,255,.12); }
.rodape__area-texto { display: grid; gap: 10px; }
.rodape__area-tx { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.5rem); max-width: 24ch; }
.rodape__area .nota b { color: var(--branco); font-weight: 600; }
.rodape__area-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-vitrine .rodape__grade { margin-top: 40px; }
.pg-vitrine .rodape nav a:first-child { color: var(--apoio-palco); }   /* a identidade pinta o 1º de lime (o "voltar" da /agencia/); aqui não */
@media (hover: hover) { .pg-vitrine .rodape nav a:hover { color: var(--branco); } }
@media (min-width: 900px) { .rodape__area { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } }

/* ═══ ENTRADA ═════════════════════════════════════════════════════════════
 * O li é observado pelo lp.js (.anim) mas não some: quem entra é o card, de baixo para cima por clip-path em
 * @keyframes (sem preenchimento no fim — a sombra do hover volta inteira). Tirar html.anima mostra tudo.  */
html.anima .cards__item.anim, html.anima .cards__item.anim:not(.ok) { opacity: 1; transform: none; transition: none; }
html.anima .cards__item:not(.ok) .card { clip-path: inset(100% 0 0 0 round 28px); }
html.anima .cards__item.ok .card { animation: card-enche .78s var(--ease-out) var(--cd) backwards; }
@keyframes card-enche { from { clip-path: inset(100% 0 0 0 round 28px); } to { clip-path: inset(0 0 0 0 round 28px); } }
html.anima .cards__item .card__corpo > * { transition: opacity .3s var(--ease-out) calc(var(--cd) + 380ms), transform .5s var(--mola) calc(var(--cd) + 380ms); }
html.anima .cards__item:not(.ok) .card__corpo > * { opacity: 0; transform: translateY(12px); }
/* a serifada do nome pousa depois do nome (com o atraso padrão ela pularia dentro do nome ainda invisível) */
html.anima .cards__item .card__nome .serif { transition: transform .52s var(--mola-viva) calc(var(--cd) + 520ms), opacity .2s var(--ease-out) calc(var(--cd) + 520ms); }
@media (min-width: 600px) and (max-width: 999px) { .cards__item:nth-child(2n) { --cd: 90ms; } }
@media (min-width: 1000px) { .cards__item:nth-child(3n+2) { --cd: 90ms; } .cards__item:nth-child(3n) { --cd: 180ms; } }

@media (prefers-reduced-motion: reduce) {
  .card--foto .card__img { animation: none; }
  .card:hover, .card.ativo { transform: none; }
  .card:not(.card--foto):hover .card__img { transform: none; }
}