/* Cristore · estilos do site
   Cores, fontes e velocidades vêm de config/tema.css.
   Layout: faixas largas alternando branco, rosa e lilás, com polaroides
   e adesivos do manual soltos por cima, como uma mesa de scrapbook. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-m);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
h1, h2, h3 { font-family: var(--fonte-marca); line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lilas); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--grafite); color: var(--branco); padding: 10px 16px; border-radius: var(--raio-s); }
.pular:focus { top: 12px; }

.mao { font-family: var(--fonte-mao); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--cor-destaque-2); }

.faixa { padding-block: clamp(64px, 9vw, 120px); }
.faixa__in, .topo__in, .hero__in {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.titulo { font-size: var(--titulo-m); font-weight: 800; letter-spacing: -0.02em; color: var(--cor-texto); }
.titulo--claro { color: var(--branco); }

.cabeca { display: grid; gap: 10px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 640px; }
.cabeca--linha { max-width: none; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 20px; }
.cabeca__olho { transform: rotate(-3deg); transform-origin: left; }
.cabeca__olho--claro { color: var(--rosa-claro); }
.cabeca__sub { color: var(--cor-texto-suave); }

/* ---------- Botões ---------- */
.btn {
  --btn-bg: var(--cor-botao); --btn-fg: var(--cor-botao-texto);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border: 2px solid var(--btn-bg); border-radius: var(--raio-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--fonte-marca); font-weight: 700; font-size: 1.0625rem;
  text-decoration: none; cursor: pointer;
  transition: transform var(--vel-media) var(--mola), box-shadow var(--vel-media) var(--suave), background var(--vel-rapida);
  box-shadow: 0 6px 0 -1px var(--grafite);
}
.btn:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 9px 0 -1px var(--grafite); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 -1px var(--grafite); }
.btn--linha { --btn-bg: transparent; --btn-fg: var(--grafite); border-color: var(--grafite); }
.btn--linha:hover { --btn-bg: var(--lilas-claro); }
.btn--branco { --btn-bg: var(--branco); --btn-fg: var(--cor-rosa-texto); border-color: var(--branco); }
.btn--cheio { width: 100%; }

/* ---------- Avisos ---------- */
.avisos { background: var(--grafite); color: var(--branco); overflow: hidden; font-size: var(--texto-xs); font-weight: 500; letter-spacing: .04em; }
.avisos__trilho { display: flex; width: max-content; gap: 48px; padding-block: 8px; animation: correr 38s linear infinite; }
.avisos__trilho span { display: inline-flex; align-items: center; gap: 48px; white-space: nowrap; }
.avisos__trilho span::after { content: "✦"; color: var(--rosa-choque); }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: box-shadow var(--vel-media);
}
.topo.rolou { box-shadow: 0 8px 24px -18px rgba(43,43,43,.5); }
.topo__in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.topo__logo img { width: 150px; transition: transform var(--vel-media) var(--mola); }
.topo__logo:hover img { transform: rotate(-3deg) scale(1.04); }
.topo__nav { display: flex; gap: 6px; margin-left: auto; }
.topo__nav a {
  position: relative; text-decoration: none; font-family: var(--fonte-marca); font-weight: 600; font-size: var(--texto-s);
  padding: 8px 12px; border-radius: var(--raio-pill); transition: background var(--vel-rapida), color var(--vel-rapida);
}
.topo__nav a:hover { background: var(--rosa-claro); color: var(--grafite); }
.sacola {
  display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--grafite); background: var(--branco);
  border-radius: var(--raio-pill); padding: 8px 10px 8px 14px; cursor: pointer; font-family: var(--fonte-marca); font-weight: 600;
}
.sacola__qtd {
  display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--raio-pill);
  background: var(--rosa-choque); color: var(--branco); font-size: var(--texto-xs); font-variant-numeric: tabular-nums;
}
.sacola.pulou { animation: pulo 600ms var(--mola); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--cor-fundo-suave); padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); }
.hero__rabiscos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rab { fill: none; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: 0; animation: desenhar 2.4s var(--suave) both; }
.rab--1 { stroke: var(--rosa-claro); }
.rab--2 { stroke: var(--lilas-claro); animation-delay: .3s; }
.rab--3 { stroke: var(--rosa-claro); stroke-width: 12; animation-delay: .6s; }
.hero__in { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero__texto { display: grid; gap: 22px; min-width: 0; }
.hero__olho { font-size: 1.9rem; color: var(--cor-rosa-texto); transform: rotate(-4deg); transform-origin: left; }
.hero__titulo { font-size: var(--titulo-xl); font-weight: 800; letter-spacing: -0.035em; line-height: .98; }
.hero__titulo .linha { display: block; animation: subir 900ms var(--suave) both; }
.hero__titulo .linha:nth-child(2) { animation-delay: 90ms; }
.hero__titulo .linha:nth-child(3) { animation-delay: 180ms; }
.hero__titulo .linha:nth-child(4) { animation-delay: 270ms; }
.hero__titulo em {
  font-style: normal; color: var(--branco); background: var(--rosa-choque); padding: 0 .18em; border-radius: .18em;
  display: inline-block; transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--lilas);
}
.hero__sub { max-width: 48ch; color: var(--cor-texto-suave); font-size: var(--texto-l); line-height: 1.5; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__provas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--texto-s); color: var(--cor-texto-suave); }
.hero__provas b { color: var(--grafite); font-family: var(--fonte-marca); }

.hero__palco { position: relative; aspect-ratio: 1 / 1; max-width: 100%; min-height: 0; }
.palco__caixa { position: absolute; left: 50%; bottom: 6%; width: 62%; transform: translateX(-50%); animation: cair 1s var(--mola) .2s both; }

/* Caixa desenhada em CSS (usada no hero, vitrine e montador) */
.caixa { --cor-caixa: var(--rosa-choque); position: relative; width: 100%; aspect-ratio: 1.25 / 1; }
.caixa__corpo {
  position: absolute; left: 4%; right: 4%; bottom: 0; top: 22%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 18%),
    var(--cor-caixa);
  border-radius: 6px 6px var(--raio-m) var(--raio-m);
  box-shadow: inset 0 -14px 0 rgba(0,0,0,.08), var(--sombra-polaroid);
  display: grid; place-items: center;
}
.caixa__tampa {
  position: absolute; left: 0; right: 0; top: 4%; height: 24%; z-index: 3;
  background: var(--cor-caixa); border-radius: var(--raio-s);
  box-shadow: 0 6px 0 rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center;
  transform-origin: 10% 100%;
  transition: transform var(--vel-lenta) var(--mola);
}
.caixa__tampa img { height: 66%; width: auto; max-width: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.12)); }
.caixa__marca { width: 56%; margin-top: 14%; }
.caixa--grande .caixa__tampa { animation: tampa-abre 1.1s var(--mola) 1s both; }

/* Polaroide */
.pola {
  margin: 0; background: var(--branco); padding: 7% 7% 0; border-radius: 4px;
  box-shadow: var(--sombra-polaroid);
  transition: transform var(--vel-media) var(--mola);
}
.pola__foto { aspect-ratio: 1 / 1.08; border-radius: 2px; overflow: hidden; background-size: cover; background-position: center; }
.pola figcaption { font-family: var(--fonte-mao); font-weight: 700; font-size: clamp(1rem, .7rem + 1vw, 1.45rem); text-align: center; padding: 6% 0 8%; color: var(--grafite); line-height: 1.1; }
/* "fotos" ilustradas até entrarem as reais */
.pola__foto--a { background:
  radial-gradient(circle at 50% 58%, #FFD7A8 0 16%, transparent 17%),
  linear-gradient(180deg, var(--rosa-claro) 0 55%, var(--rosa-choque) 55% 70%, var(--laranja) 70%); }
.pola__foto--b { background:
  radial-gradient(circle at 36% 46%, var(--branco) 0 9%, transparent 10%),
  radial-gradient(circle at 62% 46%, var(--branco) 0 9%, transparent 10%),
  linear-gradient(160deg, var(--lilas-medio), var(--lilas)); }
.pola__foto--c { background:
  radial-gradient(ellipse at 50% 120%, var(--lilas-claro) 0 45%, transparent 46%),
  radial-gradient(circle at 74% 26%, #FFE9A8 0 10%, transparent 11%),
  linear-gradient(180deg, #8FD3FF, #CDEBFF); }
.pola__foto--d { background: url("../img/padrao-rosa.webp") center / 220%; }
.pola__foto--e { background: url("../img/padrao-lilas.webp") center / 220%; }

.hero__palco .pola { position: absolute; width: 36%; }
.pola--h1 { left: 6%;  top: 8%;  --rot: -12deg; animation: voar 1.1s var(--mola) 1.25s both; }
.pola--h2 { left: 34%; top: 0%;  --rot: 4deg;   animation: voar 1.1s var(--mola) 1.4s both; }
.pola--h3 { right: 2%; top: 14%; --rot: 14deg;  animation: voar 1.1s var(--mola) 1.55s both; }
.hero__palco [data-prof] { translate: var(--px, 0px) var(--py, 0px); transition: translate 600ms var(--suave), transform var(--vel-media) var(--mola); }
.hero__palco .pola { transform: rotate(var(--rot)); }
.hero__palco .pola:hover { transform: rotate(0deg) scale(1.06) translateY(-10px); z-index: 5; }
.hero__selo { position: absolute; width: 27%; right: -2%; bottom: 2%; z-index: 4; animation: girar 22s linear infinite; }
.hero__sticker { position: absolute; z-index: 4; }
.hero__sticker--salvo { width: 20%; left: -2%; bottom: 10%; animation: balancar 4s ease-in-out infinite; }
.hero__sticker--gd { width: 22%; right: 6%; top: -4%; animation: balancar 5s ease-in-out .6s infinite; }

/* ---------- Letreiro ---------- */
.letreiro { background: var(--rosa-choque); color: var(--branco); overflow: hidden; transform: rotate(-1.6deg); margin-block: -14px; position: relative; z-index: 2; border-block: 3px solid var(--grafite); }
.letreiro__trilho { display: flex; align-items: center; gap: 36px; width: max-content; padding-block: 14px; animation: correr 30s linear infinite; }
.letreiro span { font-family: var(--fonte-letreiro); font-weight: 900; font-variation-settings: "SOFT" 100; font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem); white-space: nowrap; letter-spacing: -0.01em; }
.letreiro img { width: 30px; height: auto; animation: girar 6s linear infinite; }

/* ---------- Passos ---------- */
.passos { background: var(--cor-fundo); }
.passos .titulo { margin-bottom: clamp(32px, 5vw, 56px); max-width: 14ch; }
.passos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: passo; }
.passo { counter-increment: passo; position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 24px 28px; border: 2px solid var(--grafite); border-radius: var(--raio-m); background: var(--branco); transition: transform var(--vel-media) var(--mola), box-shadow var(--vel-media); }
.passo:nth-child(1) { background: var(--cor-fundo-suave); }
.passo:nth-child(2) { background: #F6F3FF; }
.passo:nth-child(3) { background: var(--off-white); }
.passo:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 6px 6px 0 var(--grafite); }
.passo::before { content: counter(passo); position: absolute; top: -18px; left: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grafite); color: var(--branco); font-family: var(--fonte-marca); font-weight: 800; }
.passo img { height: 96px; width: auto; object-fit: contain; justify-self: start; margin-bottom: 6px; transition: transform var(--vel-media) var(--mola); }
.passo:hover img { transform: rotate(-8deg) scale(1.08); }
.passo h3 { font-size: var(--texto-l); font-weight: 700; }
.passo p { color: var(--cor-texto-suave); font-size: var(--texto-s); }

/* ---------- Vitrine de boxes ---------- */
#boxes { background: var(--cor-fundo-suave); }
.vitrine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.produto { display: flex; flex-direction: column; gap: 14px; min-width: 0; background: var(--branco); border-radius: var(--raio-m); padding: 14px 14px 18px; box-shadow: var(--sombra); transition: transform var(--vel-media) var(--mola); }
.produto:hover { transform: translateY(-6px); }
.produto__arte { position: relative; aspect-ratio: 1 / 1; border-radius: var(--raio-s); background: var(--off-white); overflow: hidden; display: grid; place-items: end center; padding: 16% 14% 10%; }
.produto__arte > img.foto-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.produto__arte .caixa { width: 100%; z-index: 2; }
.produto__arte .pola { position: absolute; width: 34%; padding: 5% 5% 14%; bottom: 44%; transition: transform var(--vel-media) var(--mola); z-index: 1; }
.produto__arte .pola:nth-of-type(1) { left: 22%; transform: rotate(-10deg) translateY(30%); }
.produto__arte .pola:nth-of-type(2) { left: 44%; transform: rotate(8deg) translateY(36%); }
.produto:hover .produto__arte .pola:nth-of-type(1) { transform: rotate(-16deg) translateY(-12%); }
.produto:hover .produto__arte .pola:nth-of-type(2) { transform: rotate(12deg) translateY(-22%); }
.produto:hover .caixa__tampa { transform: rotate(-22deg) translate(-6%, -30%); }
.produto__selo { position: absolute; top: 10px; left: 10px; z-index: 4; background: var(--grafite); color: var(--branco); font-family: var(--fonte-marca); font-weight: 600; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--raio-pill); }
.produto h3 { font-size: 1.125rem; font-weight: 700; }
.produto__desc { font-size: var(--texto-s); color: var(--cor-texto-suave); flex: 1; }
.produto__fim { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.preco { font-family: var(--fonte-marca); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.preco small { display: block; font-family: var(--fonte-texto); font-weight: 500; font-size: .75rem; color: var(--cor-texto-suave); }
.btn-add {
  border: 2px solid var(--grafite); background: var(--rosa-choque); color: var(--branco);
  border-radius: var(--raio-pill); padding: 10px 16px; font-family: var(--fonte-marca); font-weight: 700; font-size: var(--texto-s); cursor: pointer;
  transition: transform var(--vel-media) var(--mola), background var(--vel-rapida);
}
.btn-add:hover { transform: rotate(-4deg) scale(1.06); }
.btn-add.ok { background: var(--lilas); }

/* ---------- Monte sua box ---------- */
.monte { background: var(--cor-fundo); }
.monte__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.monte__palco { display: grid; gap: 14px; min-width: 0; }
.monte__mesa {
  position: relative; aspect-ratio: 1 / 0.92; border-radius: var(--raio-l); overflow: hidden;
  background: var(--lilas-claro) url("../img/padrao-lilas.webp") center / 70%;
  display: grid; place-items: end center; padding: 0 16% 8%;
  transition: outline-color var(--vel-rapida); outline: 4px dashed transparent; outline-offset: -14px;
}
.monte__mesa.arrastando { outline-color: var(--branco); }
.monte__mesa::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(216,210,254,.35), rgba(216,210,254,.9)); }
.monte__mesa .caixa { z-index: 2; transition: transform var(--vel-media) var(--mola); }
.monte__mesa .caixa__corpo, .monte__mesa .caixa__tampa { transition: background var(--vel-media), transform var(--vel-lenta) var(--mola); }
.monte__mesa.aberta .caixa__tampa { transform: rotate(-24deg) translate(-8%, -60%); }
.caixa.mola { animation: pulo 600ms var(--mola); }
.caixa__contador { margin-top: 18%; font-family: var(--fonte-mao); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); color: var(--branco); text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.monte__fotos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.monte__fotos .pola { position: absolute; width: 26%; padding: 5% 5% 16%; animation: soltar 800ms var(--mola) both; }
.monte__fotos .pola__foto { aspect-ratio: 1 / 1; }
.monte__dica { text-align: center; font-size: 1.35rem; color: var(--cor-texto-suave); }

.monte__form { display: grid; gap: 22px; min-width: 0; }
.monte__form .titulo { margin-top: -6px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
legend { font-family: var(--fonte-marca); font-weight: 700; padding: 0; margin-bottom: 10px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--raio-pill);
  border: 2px solid var(--cinza-claro); background: var(--branco); font-weight: 500; font-size: var(--texto-s);
  transition: border-color var(--vel-rapida), background var(--vel-rapida), transform var(--vel-media) var(--mola);
}
.chip span small { color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.chip input:checked + span { border-color: var(--grafite); background: var(--cor-fundo-suave); transform: translateY(-2px); box-shadow: 0 3px 0 var(--grafite); }
.chip input:focus-visible + span { outline: 3px solid var(--lilas); outline-offset: 2px; }
.chip:hover span { border-color: var(--lilas-medio); }
.bolinha { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.campo { display: grid; gap: 8px; font-family: var(--fonte-marca); font-weight: 700; }
.campo small { font-family: var(--fonte-texto); font-weight: 400; color: var(--cor-texto-suave); }
.campo textarea { font-family: var(--fonte-mao); font-size: 1.4rem; line-height: 1.3; border: 2px solid var(--cinza-claro); border-radius: var(--raio-m); padding: 12px 16px; resize: vertical; background: var(--branco); }
.campo textarea:focus { border-color: var(--lilas); outline: none; }
.arquivo { position: relative; display: grid; gap: 2px; padding: 16px 20px; border: 2px dashed var(--lilas-medio); border-radius: var(--raio-m); cursor: pointer; background: #FAF8FF; transition: background var(--vel-rapida); }
.arquivo:hover { background: var(--lilas-claro); }
.arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.arquivo span { font-family: var(--fonte-marca); font-weight: 700; }
.arquivo small { color: var(--cor-texto-suave); font-size: var(--texto-xs); }
.arquivo:focus-within { outline: 3px solid var(--lilas); outline-offset: 3px; }
.monte__total { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 2px solid var(--cinza-claro); }
.monte__total small { display: block; color: var(--cor-texto-suave); }
.monte__total b { font-family: var(--fonte-marca); font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Área digital ---------- */
.digital { position: relative; background: var(--cor-area-digital); color: var(--branco); padding-block: clamp(72px, 9vw, 128px); overflow: hidden; }
.digital::before { content: ""; position: absolute; inset: 0; background: url("../img/padrao-lilas.webp") center / 540px; opacity: .22; pointer-events: none; }
.digital .faixa__in { position: relative; }
.digital__cabeca { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.digital__sub { margin-top: 12px; max-width: 52ch; color: #F7F4FF; }
.digital__sticker { width: 150px; transform: rotate(10deg); animation: balancar 4.5s ease-in-out infinite; flex-shrink: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filtro { border: 2px solid var(--branco); background: transparent; color: var(--branco); border-radius: var(--raio-pill); padding: 8px 18px; font-family: var(--fonte-marca); font-weight: 600; font-size: var(--texto-s); cursor: pointer; transition: background var(--vel-rapida), color var(--vel-rapida), transform var(--vel-media) var(--mola); }
.filtro:hover { transform: translateY(-2px); }
.filtro[aria-pressed="true"] { background: var(--branco); color: var(--lilas); }
.templates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tpl { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--branco); color: var(--grafite); border-radius: var(--raio-m); padding: 12px 12px 16px; transition: transform var(--vel-media) var(--mola), opacity var(--vel-media); }
.tpl:hover { transform: translateY(-6px) rotate(-.8deg); }
.tpl.saindo { opacity: 0; transform: scale(.94); }
.tpl__vitrine { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--raio-s); background: var(--off-white); overflow: hidden; }
.mock {
  --c0: #fff; --c1: #FA3E9C; --c2: #2B2B2B;
  position: relative; width: 62%; background: var(--c0); color: var(--c2);
  border-radius: 6px; box-shadow: 0 10px 22px -12px rgba(43,43,43,.5);
  display: grid; place-items: center; text-align: center; padding: 10%;
  overflow: hidden; transition: transform var(--vel-media) var(--mola); z-index: 2;
}
.mock--feed { aspect-ratio: 4 / 5; }
.mock--stories { aspect-ratio: 9 / 16; width: 46%; }
.mock--convite { aspect-ratio: 148 / 210; width: 54%; }
.mock--planner { aspect-ratio: 210 / 297; width: 54%; }
.mock::before { content: ""; position: absolute; width: 120%; aspect-ratio: 1; border-radius: 42% 58% 60% 40%; background: var(--c1); left: -40%; bottom: -70%; transition: transform var(--vel-lenta) var(--suave); }
.mock b { position: relative; font-family: var(--fonte-letreiro); font-weight: 900; font-variation-settings: "SOFT" 100; font-size: clamp(.9rem, .6rem + .9vw, 1.35rem); line-height: 1; }
.mock i { position: absolute; top: 8%; left: 50%; translate: -50% 0; width: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--c1); }
.mock--planner { place-items: start stretch; text-align: left; }
.mock--planner::before { display: none; }
.mock--planner b { font-size: .95rem; color: var(--c1); }
.mock--planner u { display: block; height: 4px; border-radius: 2px; background: var(--c2); opacity: .15; margin-top: 8%; }
.tpl__vitrine .folha { position: absolute; width: 50%; aspect-ratio: 4 / 5; border-radius: 6px; background: var(--c); opacity: .9; transition: transform var(--vel-media) var(--mola); z-index: 1; }
.tpl__vitrine .folha--1 { transform: rotate(-6deg); }
.tpl__vitrine .folha--2 { transform: rotate(6deg); }
.tpl:hover .folha--1 { transform: rotate(-18deg) translateX(-34%); }
.tpl:hover .folha--2 { transform: rotate(18deg) translateX(34%); }
.tpl:hover .mock { transform: scale(1.06); }
.tpl:hover .mock::before { transform: rotate(40deg) translateY(-12%); }
.tpl__canva { position: absolute; top: 8px; right: 8px; z-index: 3; background: var(--grafite); color: var(--branco); font-size: .7rem; font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--raio-pill); }
.tpl__info { display: flex; gap: 6px; flex-wrap: wrap; font-size: .75rem; color: var(--cor-texto-suave); }
.tpl__info span { background: var(--off-white); padding: 2px 8px; border-radius: var(--raio-pill); }
.tpl h3 { font-size: 1.0625rem; font-weight: 700; }
.tpl .produto__fim { margin-top: auto; }
.digital__como { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--branco); }
.digital__como li { display: flex; align-items: baseline; gap: 6px; }
.digital__como li + li::before { content: "→"; color: var(--rosa-claro); margin-right: 12px; }
.digital__como b { font-family: var(--fonte-marca); }

/* ---------- Mural ---------- */
.mural { background: var(--off-white); }
.mural__quadro {
  position: relative; height: 520px; border-radius: var(--raio-l); overflow: hidden; touch-action: none;
  background: #F7EDE3 radial-gradient(circle at 1px 1px, rgba(43,43,43,.12) 1.2px, transparent 1.6px) 0 0 / 22px 22px;
  border: 2px solid var(--grafite);
}
.mural__dica { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; color: var(--cor-texto-suave); font-size: 1.35rem; pointer-events: none; }
.mural .pola { position: absolute; width: 190px; padding: 12px 12px 0; cursor: grab; user-select: none; touch-action: none; }
.mural .pola.pegou { cursor: grabbing; box-shadow: 0 30px 40px -20px rgba(43,43,43,.55); transition: none; }
.mural .pola__foto { display: grid; place-items: center; padding: 12%; }
.mural .pola__foto p { font-family: var(--fonte-mao); font-weight: 700; font-size: 1.6rem; line-height: 1.05; text-align: center; color: var(--grafite); }
.mural .pola figcaption { font-size: 1.1rem; color: var(--cor-texto-suave); }
.mural .pola::before { content: ""; position: absolute; top: -10px; left: 50%; translate: -50% 0; width: 70px; height: 22px; background: rgba(216,210,254,.85); transform: rotate(-3deg); }

/* ---------- Dúvidas ---------- */
.duvidas { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.duvidas__sticker { width: 200px; margin-top: 28px; transform: rotate(-6deg); }
.duvidas__lista { display: grid; gap: 12px; min-width: 0; }
.duvida { border: 2px solid var(--grafite); border-radius: var(--raio-m); background: var(--branco); overflow: hidden; }
.duvida summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-family: var(--fonte-marca); font-weight: 600; }
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after { content: "+"; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rosa-claro); font-size: 1.3rem; transition: transform var(--vel-media) var(--mola), background var(--vel-rapida); }
.duvida[open] summary::after { transform: rotate(135deg); background: var(--rosa-choque); color: var(--branco); }
.duvida p { padding: 0 22px 20px; color: var(--cor-texto-suave); max-width: 62ch; }
.duvida[open] p { animation: subir 420ms var(--suave); }

/* ---------- Newsletter ---------- */
.news { position: relative; background: var(--rosa-choque); color: var(--branco); padding-block: clamp(64px, 8vw, 104px); overflow: hidden; }
.news::before { content: ""; position: absolute; inset: 0; background: url("../img/padrao-rosa.webp") center / 540px; opacity: .18; }
.news__in { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.news__selo { width: 180px; animation: girar 24s linear infinite; }
.news__texto { display: grid; gap: 14px; min-width: 0; }
.news__titulo { font-family: var(--fonte-letreiro); font-weight: 900; font-variation-settings: "SOFT" 100; font-size: var(--titulo-m); letter-spacing: -0.01em; }
.news__form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.news__form input { flex: 1 1 240px; min-width: 0; min-height: 52px; padding: 0 22px; border-radius: var(--raio-pill); border: 2px solid var(--grafite); background: var(--branco); color: var(--grafite); }
.news__ok { font-family: var(--fonte-mao); font-size: 1.6rem; font-weight: 700; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--grafite); color: #D9D3E3; padding-block: 56px 32px; }
.rodape__in { display: grid; grid-template-columns: 1fr auto; gap: 32px; }
.rodape__in > div { display: grid; gap: 12px; }
.rodape__contato { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--texto-s); }
.rodape__contato b { color: var(--branco); font-weight: 600; margin-right: 6px; }
.rodape__contato a { color: var(--rosa-claro); }
.rodape__fim { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid #45404A; font-size: var(--texto-xs); }

/* ---------- Sacola ---------- */
.sacola-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(43,43,43,.4); animation: aparecer 300ms both; }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(420px, 100%);
  background: var(--branco); display: flex; flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
  transform: translateX(105%); transition: transform var(--vel-media) var(--suave);
  box-shadow: -20px 0 40px -20px rgba(43,43,43,.4);
}
.gaveta.aberta { transform: none; }
.gaveta__topo { display: flex; justify-content: space-between; align-items: center; }
.gaveta__topo h2 { font-size: 1.5rem; }
.gaveta__fechar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--grafite); background: var(--branco); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.gaveta__frete { margin-top: 16px; font-size: var(--texto-s); }
.gaveta__frete .barra { height: 10px; border-radius: 5px; background: var(--cinza-claro); margin-top: 8px; overflow: hidden; }
.gaveta__frete .barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--lilas), var(--rosa-choque)); border-radius: 5px; transition: width var(--vel-lenta) var(--suave); }
.gaveta__itens { list-style: none; margin: 16px 0; padding: 0; flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 12px; }
.item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: var(--raio-s); background: var(--off-white); animation: subir 400ms var(--suave); }
.item__cor { width: 56px; height: 56px; border-radius: 8px; background: var(--c); display: grid; place-items: center; }
.item__cor img { width: 50%; }
.item__nome { font-weight: 600; font-size: var(--texto-s); line-height: 1.3; min-width: 0; }
.item__nome small { display: block; color: var(--cor-texto-suave); font-weight: 400; }
.item__lado { display: grid; justify-items: end; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--texto-s); }
.item__remover { border: 0; background: none; color: var(--cor-rosa-texto); text-decoration: underline; cursor: pointer; font-size: var(--texto-xs); padding: 0; }
.gaveta__vazia { text-align: center; color: var(--cor-texto-suave); padding: 40px 10px; display: grid; justify-items: center; gap: 12px; }
.gaveta__vazia img { width: 120px; }
.gaveta__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.gaveta__total b { font-family: var(--fonte-marca); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.gaveta__nota { font-size: var(--texto-xs); color: var(--cor-texto-suave); margin-top: 10px; text-align: center; }

.aviso-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 50; translate: -50% 0; background: var(--grafite); color: var(--branco); padding: 12px 20px; border-radius: var(--raio-pill); font-weight: 500; font-size: var(--texto-s); max-width: calc(100% - 32px); text-align: center; opacity: 0; transform: translateY(20px); transition: opacity var(--vel-media), transform var(--vel-media) var(--mola); pointer-events: none; }
.aviso-toast.ver { opacity: 1; transform: none; }

/* ---------- Revelar ao rolar (só para o que começa fora da tela) ---------- */
.rev.escondido { opacity: 0; transform: translateY(32px); }
.rev.entrou { animation: subir 800ms var(--suave) both; }
.passo.rev.entrou:nth-child(2) { animation-delay: 120ms; }
.passo.rev.entrou:nth-child(3) { animation-delay: 240ms; }

/* ---------- Animações ---------- */
@keyframes correr { to { transform: translateX(-50%); } }
@keyframes desenhar { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes cair { from { opacity: 0; transform: translate(-50%, -40px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tampa-abre { from { transform: none; } to { transform: rotate(-16deg) translate(-4%, -40%); } }
@keyframes voar { from { opacity: 0; transform: translateY(160%) rotate(0deg) scale(.6); } }
@keyframes soltar { from { opacity: 0; transform: translateY(-120%) rotate(0deg) scale(1.3); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes balancar { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes pulo { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes aparecer { from { opacity: 0; } }

/* ---------- Responsivo ---------- */
@media (max-width: 1020px) {
  .vitrine, .templates { grid-template-columns: repeat(2, 1fr); }
  .topo__nav { display: none; }
  .sacola { margin-left: auto; }
}
@media (max-width: 820px) {
  .hero__in, .monte__in, .duvidas { grid-template-columns: 1fr; }
  .hero__palco { width: min(480px, 100%); margin-inline: auto; }
  .passos__lista { grid-template-columns: 1fr; gap: 32px; }
  .digital__sticker { display: none; }
  .news__in { grid-template-columns: 1fr; }
  .news__selo { width: 130px; }
  .duvidas__sticker { display: none; }
  .rodape__in { grid-template-columns: 1fr; }
  .mural__quadro { height: 640px; }
  .mural .pola { width: 150px; }
}
@media (max-width: 480px) {
  .vitrine, .templates { grid-template-columns: 1fr; }
  .sacola span:not(.sacola__qtd) { display: none; }
  .topo__logo img { width: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .avisos__trilho, .letreiro__trilho { animation: none !important; }
}

/* =========================================================
   BLACK FRIDAY · oferta + pedido, etapas e curso
   ========================================================= */
.topo__cta { background: var(--rosa-choque); color: var(--branco) !important; margin-left: 6px; }
.topo__cta:hover { background: var(--grafite) !important; color: var(--branco) !important; }
.btn--grafite { --btn-bg: var(--grafite); --btn-fg: var(--branco); box-shadow: 0 6px 0 -1px var(--lilas); }
.btn--grafite:hover { box-shadow: 0 9px 0 -1px var(--lilas); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn svg, .pedido__enviar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.bf { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 80px); }
.bf__in {
  position: relative; width: 100%; max-width: var(--largura-max); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 56px); align-items: start;
}
.bf__oferta { display: grid; gap: 20px; min-width: 0; align-content: start; }
.bf__selo {
  justify-self: start; display: inline-flex; gap: .3em; align-items: center;
  background: var(--grafite); color: var(--branco); border-radius: var(--raio-pill);
  padding: 8px 20px; font-family: var(--fonte-marca); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: var(--texto-s);
  transform: rotate(-3deg); box-shadow: 4px 4px 0 var(--rosa-choque); animation: subir 700ms var(--suave) both;
}
.bf__selo span { color: var(--rosa-choque); }
.bf__titulo { display: grid; gap: 2px; animation: subir 900ms var(--suave) 80ms both; }
.bf__qtd { font-size: clamp(3rem, 1.6rem + 6vw, 6.2rem); font-weight: 800; letter-spacing: -0.045em; line-height: .9; text-transform: uppercase; }
.bf__tipo { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); font-weight: 700; letter-spacing: -0.01em; }
.bf__preco {
  justify-self: start; margin-top: 6px; font-size: clamp(3rem, 1.8rem + 5.2vw, 5.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--branco); background: var(--rosa-choque); padding: .06em .22em .1em; border-radius: .16em;
  transform: rotate(-2deg); box-shadow: 6px 6px 0 var(--grafite); font-variant-numeric: tabular-nums;
}
.bf__sub { max-width: 46ch; font-size: var(--texto-l); line-height: 1.5; color: var(--cor-texto-suave); }
.bf__sub b { color: var(--grafite); }
.bf__beneficios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bf__beneficios li { display: flex; align-items: center; gap: 10px; font-size: var(--texto-s); line-height: 1.3; min-width: 0; }
.bf__beneficios svg, .etapa__icone svg, .curso__lista svg, .pagto svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.bf__beneficios svg { flex-shrink: 0; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--branco); color: var(--rosa-choque); box-shadow: 0 0 0 2px var(--rosa-claro); }
.bf__beneficios b { font-family: var(--fonte-marca); display: block; }
.bf__atalho { display: none; justify-self: start; }

.bf__vitrine { aspect-ratio: 16 / 10; width: 100%; margin-top: 8px; }
.bf__vitrine .palco__caixa { width: 40%; bottom: 2%; }
.bf__vitrine .pola { width: 26%; }
.bf__vitrine .pola--h1 { left: 4%; top: 6%; }
.bf__vitrine .pola--h2 { left: 37%; top: -2%; }
.bf__vitrine .pola--h3 { right: 4%; top: 8%; }
.bf__vitrine .hero__sticker--gd { width: 16%; right: 0; top: auto; bottom: 0; }
.bf__pilha {
  position: absolute; left: 2%; bottom: 6%; z-index: 4; display: grid; place-items: center; text-align: center;
  width: 19%; aspect-ratio: 1; border-radius: 50%; background: var(--lilas); color: var(--branco);
  font-family: var(--fonte-marca); font-weight: 600; font-size: clamp(.7rem, .5rem + .6vw, 1rem); line-height: 1;
  transform: rotate(-10deg); box-shadow: 0 0 0 4px var(--branco), var(--sombra);
  animation: balancar 5s ease-in-out infinite;
}
.bf__pilha b { display: block; font-size: 2.2em; font-weight: 800; }

/* Formulário */
.pedido {
  position: sticky; top: calc(84px + env(safe-area-inset-top, 0px));
  display: grid; gap: 18px; min-width: 0;
  background: var(--branco); border: 2px solid var(--grafite); border-radius: var(--raio-l);
  padding: clamp(20px, 2.4vw, 28px); box-shadow: 10px 10px 0 var(--rosa-choque);
  animation: subir 900ms var(--suave) 200ms both;
}
.pedido__topo { display: flex; gap: 14px; align-items: center; }
.pedido__topo img { width: 34px; height: auto; flex-shrink: 0; }
.pedido__topo h2 { font-size: 1.5rem; font-weight: 800; }
.pedido__topo p { font-size: var(--texto-s); color: var(--cor-texto-suave); }
.pedido__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; }
.cp { display: grid; gap: 5px; align-content: start; min-width: 0; }
.cp--cheio { grid-column: 1 / -1; }
.cp label, .cp legend { font-family: var(--fonte-marca); font-weight: 600; font-size: var(--texto-s); margin: 0; }
.cp small small, .cp label small, .cp legend small { font-family: var(--fonte-texto); font-weight: 400; color: var(--cor-texto-suave); }
.cp input, .cp select, .cp textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--cinza-claro); border-radius: var(--raio-s);
  background: var(--branco); color: var(--grafite); font-size: 1rem; transition: border-color var(--vel-rapida), box-shadow var(--vel-rapida);
}
.cp textarea { resize: vertical; min-height: 64px; }
.cp select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2B2B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; }
.cp input:focus, .cp select:focus, .cp textarea:focus { outline: none; border-color: var(--lilas); box-shadow: 0 0 0 3px var(--lilas-claro); }
.cp [aria-invalid="true"] { border-color: var(--rosa-choque); background-color: var(--cor-fundo-suave); }
.cp__erro { color: var(--cor-rosa-texto); font-size: var(--texto-xs); font-weight: 600; min-height: 0; }
.cp__erro:empty, .cp__ajuda:empty { display: none; }
.cp__ajuda { color: var(--cor-texto-suave); font-size: var(--texto-xs); }
.pedido fieldset legend { margin-bottom: 6px; }
.pedido__adicionais { display: flex; flex-wrap: wrap; gap: 8px; }
.pedido__pagto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pagto { position: relative; cursor: pointer; }
.pagto input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pagto span {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--raio-s);
  border: 2px solid var(--cinza-claro); font-family: var(--fonte-marca); font-weight: 600;
  transition: border-color var(--vel-rapida), background var(--vel-rapida), transform var(--vel-media) var(--mola);
}
.pagto svg { width: 20px; height: 20px; }
.pagto:hover span { border-color: var(--lilas-medio); }
.pagto input:checked + span { border-color: var(--rosa-choque); background: var(--cor-fundo-suave); color: var(--cor-rosa-texto); transform: translateY(-2px); }
.pagto input:focus-visible + span { outline: 3px solid var(--lilas); outline-offset: 2px; }
.pedido__resumo { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-radius: var(--raio-m); background: var(--off-white); font-size: var(--texto-s); }
.pedido__resumo b { text-align: right; font-family: var(--fonte-marca); font-variant-numeric: tabular-nums; }
.pedido__frete { font-weight: 600; color: var(--cor-texto-suave); }
.pedido__enviar { min-height: 60px; font-size: 1.125rem; text-transform: uppercase; letter-spacing: .02em; }
.pedido__nota { font-size: var(--texto-xs); color: var(--cor-texto-suave); text-align: center; line-height: 1.5; }
.pedido__nota b { color: var(--grafite); font-weight: 600; }
.pedido__pronto { display: grid; gap: 10px; padding: 16px; border-radius: var(--raio-m); background: var(--rosa-claro); animation: subir 500ms var(--suave); outline: none; }
.pedido__pronto .mao { color: var(--cor-rosa-texto); }
.pedido__pronto summary { cursor: pointer; font-weight: 600; font-size: var(--texto-s); }
.pedido__pronto pre { white-space: pre-wrap; word-break: break-word; font-family: var(--fonte-texto); font-size: var(--texto-xs); background: var(--branco); padding: 12px; border-radius: var(--raio-s); margin: 10px 0; max-height: 260px; overflow-y: auto; }

/* Etapas */
.etapas { background: var(--rosa-claro); padding-block: clamp(48px, 6vw, 72px); }
.etapas__titulo { font-size: var(--titulo-s); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 28px; }
.etapas__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: etapa; }
.etapa { counter-increment: etapa; display: flex; gap: 14px; align-items: flex-start; background: var(--branco); border-radius: var(--raio-m); padding: 18px; min-width: 0; transition: transform var(--vel-media) var(--mola); }
.etapa:hover { transform: translateY(-4px) rotate(-1deg); }
.etapa__icone { position: relative; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-fundo-suave); color: var(--rosa-choque); }
.etapa__icone svg { width: 26px; height: 26px; }
.etapa__icone::after { content: counter(etapa); position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grafite); color: var(--branco); font-family: var(--fonte-marca); font-weight: 700; font-size: .75rem; }
.etapa h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.etapa p { font-size: var(--texto-xs); color: var(--cor-texto-suave); line-height: 1.45; }

/* Curso */
.curso { background: var(--cor-fundo-suave); }
.curso__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.curso__visual { position: relative; padding: 6% 6% 10%; min-width: 0; }
.curso__tela { background: var(--branco); border-radius: var(--raio-m); box-shadow: var(--sombra); overflow: hidden; border: 2px solid var(--grafite); }
.curso__barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--grafite); color: #CFC8DA; font-size: .75rem; }
.curso__barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--rosa-choque); }
.curso__barra i:nth-child(2) { background: var(--rosa-claro); }
.curso__barra i:nth-child(3) { background: var(--rosa-claro); }
.curso__barra span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.curso__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; background: var(--off-white); }
.curso__grade .pola { padding: 6% 6% 18%; box-shadow: 0 6px 12px -8px rgba(43,43,43,.4); }
.curso__solta { position: absolute; width: 26%; padding: 4% 4% 12%; }
.curso__solta--1 { right: 0; bottom: 0; transform: rotate(10deg); animation: balancar 6s ease-in-out infinite; }
.curso__solta--2 { left: 0; bottom: 6%; transform: rotate(-8deg); }
.curso__nota { position: absolute; left: 30%; bottom: -4%; font-size: 1.5rem; color: var(--rosa-choque); transform: rotate(-4deg); line-height: 1.05; }
.curso__texto { display: grid; gap: 18px; min-width: 0; justify-items: start; }
.curso__tag { background: var(--rosa-choque); color: var(--branco); font-family: var(--fonte-marca); font-weight: 700; font-size: var(--texto-xs); letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--raio-pill); }
.curso__titulo { font-size: var(--titulo-s); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.curso__titulo em { font-style: normal; color: var(--rosa-choque); }
.curso__sub { color: var(--cor-texto-suave); max-width: 58ch; }
.curso__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.curso__lista li { display: flex; align-items: center; gap: 10px; font-size: var(--texto-s); font-weight: 500; line-height: 1.3; }
.curso__lista svg { flex-shrink: 0; width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--branco); color: var(--rosa-choque); box-shadow: 0 0 0 2px var(--rosa-claro); }
.curso__pendente { font-size: var(--texto-xs); color: var(--cor-rosa-texto); background: var(--branco); padding: 6px 10px; border-radius: var(--raio-s); border: 1px dashed var(--rosa-choque); }
.curso .btn--grafite { box-shadow: 0 6px 0 -1px var(--rosa-choque); }
.curso .btn--grafite:hover { box-shadow: 0 9px 0 -1px var(--rosa-choque); }

@media (max-width: 1020px) {
  .topo__nav { display: flex; }
  .topo__nav a:not(.topo__cta) { display: none; }
  .etapas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bf__in { grid-template-columns: minmax(0, 1fr); }
  .pedido { position: relative; top: 0; }
  .bf__atalho { display: inline-flex; }
  .curso__in { grid-template-columns: minmax(0, 1fr); }
  .curso__visual { max-width: 520px; width: 100%; justify-self: center; }
}
@media (max-width: 560px) {
  .bf__beneficios { grid-template-columns: minmax(0, 1fr); }
  .etapas__lista, .curso__lista { grid-template-columns: minmax(0, 1fr); }
  .pedido { box-shadow: 6px 6px 0 var(--rosa-choque); }
  .bf__vitrine { aspect-ratio: 4 / 3; }
  .bf__vitrine .pola { width: 32%; }
  .bf__vitrine .palco__caixa { width: 50%; }
}
@media (max-width: 380px) {
  .pedido__campos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Compra das 100 fotos: ficha, envio das fotos e resumo ---------- */
.bf__ilustrativa { font-size: var(--texto-xs); color: var(--cor-texto-suave); text-align: right; margin-top: -10px; }
.bf__ficha { background: var(--branco); border-radius: var(--raio-m); padding: 18px 20px; box-shadow: 0 0 0 2px var(--rosa-claro); }
.bf__ficha-titulo { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.bf__ficha dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 20px; }
.bf__ficha dt { font-size: var(--texto-xs); color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .06em; }
.bf__ficha dd { margin: 0; font-family: var(--fonte-marca); font-weight: 600; }

.pedido__topo p b { color: var(--cor-rosa-texto); font-family: var(--fonte-marca); }
.pedido__grupo { font-family: var(--fonte-marca); font-weight: 700; font-size: var(--texto-s); padding-top: 8px; border-top: 2px dashed var(--cinza-claro); margin-top: 4px; }

.envio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.envio__op { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; text-align: center; padding: 6px 2px; }
.envio__op input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 2; }
.envio__bola {
  position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--cinza-claro); background: var(--branco); color: var(--cor-texto-suave);
  transition: border-color var(--vel-rapida), background var(--vel-rapida), color var(--vel-rapida), transform var(--vel-media) var(--mola);
}
.envio__bola svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.envio__bola::after { content: ""; position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--rosa-choque); border: 3px solid var(--branco); transform: scale(0); transition: transform var(--vel-media) var(--mola); }
.envio__nome { font-family: var(--fonte-marca); font-weight: 600; font-size: var(--texto-xs); line-height: 1.2; }
.envio__op:hover .envio__bola { border-color: var(--lilas-medio); }
.envio__op input:checked ~ .envio__bola { border-color: var(--rosa-choque); background: var(--cor-fundo-suave); color: var(--rosa-choque); transform: scale(1.06); }
.envio__op input:checked ~ .envio__bola::after { transform: scale(1); }
.envio__op input:checked ~ .envio__nome { color: var(--cor-rosa-texto); }
.envio__op input:focus-visible ~ .envio__bola { outline: 3px solid var(--lilas); outline-offset: 3px; }
.envio__dica { display: grid; gap: 8px; margin-top: 8px; padding: 12px 14px; border-radius: var(--raio-s); background: var(--off-white); font-size: var(--texto-s); line-height: 1.5; animation: subir 400ms var(--suave); }
.envio__dica label { font-family: var(--fonte-marca); font-weight: 600; font-size: var(--texto-s); }
.envio__dica label small { font-family: var(--fonte-texto); font-weight: 400; color: var(--cor-texto-suave); }
.envio__dica input { width: 100%; min-height: 46px; padding: 10px 14px; border: 2px solid var(--cinza-claro); border-radius: var(--raio-s); background: var(--branco); font-size: 1rem; }
.envio__dica input:focus { outline: none; border-color: var(--lilas); box-shadow: 0 0 0 3px var(--lilas-claro); }
.envio__dica [aria-invalid="true"] { border-color: var(--rosa-choque); }

.resumo { border-radius: var(--raio-m); background: var(--off-white); padding: 14px 16px; }
.resumo__titulo { font-family: var(--fonte-marca); font-weight: 700; margin-bottom: 8px; }
.resumo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--texto-s); }
.resumo dt { color: var(--cor-texto-suave); }
.resumo dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.resumo .resumo__total { padding-top: 8px; margin-top: 4px; border-top: 2px solid var(--cinza-claro); font-family: var(--fonte-marca); font-weight: 800; font-size: 1.25rem; color: var(--grafite); }
.resumo dd.resumo__total { color: var(--cor-rosa-texto); }
.resumo__aviso { margin-top: 10px; font-size: var(--texto-xs); font-weight: 600; color: var(--cor-rosa-texto); }

/* ---------- Ajustes finais: prazo, diferenciais, imagem do curso ---------- */
.prazo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--raio-m); background: var(--cor-fundo-suave); border: 2px dashed var(--rosa-claro); font-size: var(--texto-xs); line-height: 1.5; color: var(--cor-texto-suave); }
.prazo svg { flex-shrink: 0; width: 26px; height: 26px; fill: none; stroke: var(--rosa-choque); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.prazo b { display: block; color: var(--grafite); font-size: var(--texto-s); font-family: var(--fonte-marca); font-weight: 600; margin-bottom: 2px; }
.diferenciais { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cinza-claro); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.diferenciais li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.diferenciais__icone { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-fundo-suave); color: var(--rosa-choque); }
.diferenciais__icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.diferenciais h3 { font-size: var(--texto-s); font-weight: 700; margin-bottom: 2px; }
.diferenciais p { font-size: var(--texto-xs); color: var(--cor-texto-suave); line-height: 1.45; }
.ficha__prazo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cinza-claro); font-size: var(--texto-xs); color: var(--cor-texto-suave); line-height: 1.5; }
.ficha__prazo b { color: var(--grafite); }
.curso__visual:has(.curso__imagem) { padding: 0; }
.curso__imagem { width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); }
@media (max-width: 560px) {
  .diferenciais { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Vitrine da oferta: caixa Cristore com fotos 7 × 10 cm ---------- */
.bf__vitrine .cena { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 4 / 3; max-width: 100%; transform: translateX(-50%); }
.cena__camada { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; animation: cena-entra .9s var(--suave) .1s both; }
.cena__dentro { position: absolute; inset: 0; clip-path: inset(-80% -40% 11.2% -40%); }
.f7 { position: absolute; margin: 0; width: 22%; }
.f7__papel {
  position: relative; padding: 6% 6% 29.5%; border-radius: 2px;
  background: linear-gradient(160deg, #fffefc, #f6f3ef);
  box-shadow: 0 1px 1px rgba(43, 43, 43, .18), 0 10px 18px -8px rgba(90, 35, 64, .45);
  transform: rotate(var(--r, 0deg));
}
.f7__foto { position: relative; aspect-ratio: 440 / 498; background: #eadfe6 center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.f7__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%); }
/* fotos saindo da caixa */
.f7--r0 { left: 57%;   top: 21%; z-index: 1; --r: 15deg;  animation: f7-sai 1.3s var(--suave) .7s both; }
.f7--r1 { left: 33%;   top: 31%; z-index: 2; --r: -13deg; animation: f7-sai 1.3s var(--suave) .85s both; }
.f7--r3 { left: 54.5%; top: 28%; z-index: 3; --r: 6deg;   animation: f7-sai 1.3s var(--suave) 1s both; }
.f7--r2 { left: 43.5%; top: 25%; z-index: 4; --r: -2deg;  animation: f7-sai 1.3s var(--suave) 1.15s both; }
.cena__dentro .f7__papel { animation: f7-flutua 7s ease-in-out 2.6s infinite; }
.f7--r1 .f7__papel { animation-delay: 3.4s; animation-duration: 8s; }
.f7--r3 .f7__papel { animation-delay: 3s; animation-duration: 7.5s; }
.f7--r0 .f7__papel { animation-delay: 4s; }
/* fotos apoiadas na mesa */
.f7--t1 { left: 4%;  top: 60%; z-index: 5; --r: -12deg; animation: f7-pousa 1s var(--suave) 1.4s both; }
.f7--t2 { left: 73%; top: 54%; z-index: 5; --r: 10deg;  animation: f7-pousa 1s var(--suave) 1.55s both; }
@keyframes cena-entra { from { opacity: 0; transform: translateY(4%); } }
@keyframes f7-sai { from { transform: translateY(78%); } }
@keyframes f7-pousa { from { opacity: 0; transform: translate(0, 10%); } }
@keyframes f7-flutua { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(calc(var(--r) + 1.5deg)) translateY(-3%); } }
.bf__vitrine .cena { top: -14%; height: 114%; }
@media (max-width: 560px) { .bf__vitrine .cena { top: -12%; height: 112%; } }
@media (prefers-reduced-motion: reduce) {
  .bf__vitrine .cena__camada, .bf__vitrine .f7, .bf__vitrine .f7__papel { animation: none !important; }
}

/* Foto da oferta 100 fotos (substitui a cena montada) */
.bf__foto { margin-top: 8px; }
.bf__foto img { width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); }
.bf__foto + .bf__ilustrativa { margin-top: 8px; }