/* ── Tokens: ajuste pela identidade visual do cliente ───────────────────── */
:root {
  --fundo: #f5f2fa;          /* MESMA cor usada nos prompts das imagens */
  --fundo-2: #ebe4f5;
  --texto: #1c1530;
  --texto-suave: #514866;
  --acento: #6b2bd9;         /* cor principal da marca */
  --acento-texto: #ffffff;   /* texto sobre o acento */
  --linha: rgb(28 21 48 / 0.12);
  --painel: rgb(255 255 255 / 0.74);
  --mistura: multiply;        /* tema escuro: lighten | tema claro: multiply */

  --fonte-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --fonte-texto: "Figtree", system-ui, sans-serif;

  --raio: 18px;
  --gutter: clamp(16px, 4vw, 56px);
  --largura: 1240px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
/* Tema claro (marcas de luz, saúde, casamento etc.): troque os tokens assim
:root {
  --fundo: #f4efe7; --fundo-2: #ebe4d8; --texto: #1d1a16; --texto-suave: #5d564c;
  --linha: rgb(29 26 22 / .12); --painel: rgb(244 239 231 / .7); --mistura: multiply;
}
*/

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 clamp(16px, 1.05vw, 18px)/1.65 var(--fonte-texto);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Grão de filme: tira o aspecto "liso de IA" */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grao 1s steps(4) infinite;
}
@keyframes grao { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.2vw, 96px); }
h2 { font-size: clamp(32px, 4.2vw, 64px); }
h3 { font-size: clamp(21px, 1.8vw, 27px); font-weight: 500; }
p { margin: 0 0 1em; color: var(--texto-suave); text-wrap: pretty; }

/* ── Topo ──────────────────────────────────────────────────────────────── */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
  transition: background .4s var(--ease), backdrop-filter .4s;
}
.topo.rolou { background: rgb(245 242 250 / .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.marca { text-decoration: none; display: flex; align-items: center; }
.marca-logo { height: 34px; width: auto; }
.marca-texto { font-family: var(--fonte-titulo); font-size: 22px; letter-spacing: .02em; }
.menu { display: flex; gap: 28px; align-items: center; font-size: 14px; letter-spacing: .04em; }
.menu a { text-decoration: none; opacity: .8; transition: opacity .3s; }
.menu a:hover { opacity: 1; }
.menu-cta { border: 1px solid var(--linha); padding: 9px 16px; border-radius: 999px; opacity: 1 !important; }
@media (max-width: 760px) { .menu a:not(.menu-cta) { display: none; } }

/* ── Abertura cinematográfica ──────────────────────────────────────────── */
.cine { position: relative; height: var(--altura, 400vh); }
.cine-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine-vinheta {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(0 0 0 / .45) 100%),
    linear-gradient(to bottom, transparent 70%, var(--fundo) 100%);
}
.momento {
  position: absolute; inset: auto var(--gutter) 12vh; max-width: 640px;
  opacity: 0; transform: translateY(24px); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
  pointer-events: none;
}
.momento.ativo { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.momento--direita { left: auto; right: var(--gutter); }
.momento--centro { left: 50%; right: auto; transform: translate(-50%, 24px); text-align: center; width: min(640px, calc(100% - 2 * var(--gutter))); }
.momento--centro.ativo { transform: translate(-50%, 0); }
.titulo-abertura { margin-bottom: .3em; }
.apoio { font-size: clamp(16px, 1.3vw, 20px); margin: 0; }
.destaque { font-family: var(--fonte-titulo); font-size: clamp(24px, 2.8vw, 42px); line-height: 1.2; color: var(--texto); margin: 0 0 .6em; }
.destaque:last-child { margin: 0; }
.cine-dica {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .6;
  transition: opacity .5s;
}
.cine-dica span { width: 1px; height: 38px; background: linear-gradient(var(--texto), transparent); animation: dica 2s var(--ease) infinite; }
@keyframes dica { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.cine.andou .cine-dica { opacity: 0; }

/* ── Painéis (todo texto mora num painel) ──────────────────────────────── */
.painel {
  position: relative;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(24px, 3.2vw, 48px);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
.painel--vidro { background: rgb(255 255 255 / .72); }
.painel > :last-child { margin-bottom: 0; }
.rotulo { display: block; font-size: 12px; letter-spacing: .3em; color: var(--acento); margin-bottom: 18px; }

/* ── Seções ────────────────────────────────────────────────────────────── */
.secao {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; padding: 18vh var(--gutter);
  display: grid; align-content: center;
}
.secao-grade { width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 560px) 1fr; }
.secao-grade--direita { grid-template-columns: 1fr minmax(0, 560px); }
.secao-grade--direita > .painel { grid-column: 2; }
.secao--larga { gap: 28px; justify-items: center; }
.painel--cabecalho { width: 100%; max-width: var(--largura); }
.cartoes { width: 100%; max-width: var(--largura); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cartao h3 { margin-bottom: .4em; }
.cartao { transition: transform .5s var(--ease), border-color .5s; }
.cartao:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
.passos { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: p; display: grid; gap: 22px; }
.passos li { counter-increment: p; display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; }
.passos li::before { content: counter(p, decimal-leading-zero); grid-row: span 2; font-family: var(--fonte-titulo); color: var(--acento); font-size: 22px; }
.passos strong { font-weight: 600; }
.passos span { color: var(--texto-suave); }

/* ── Botões ────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 15px/1 var(--fonte-texto); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  color: var(--acento-texto); background: var(--acento); border: 0; border-radius: 999px;
  padding: 17px 30px; transition: transform .4s var(--ease), filter .3s;
}
.botao:hover { transform: translateY(-2px); filter: brightness(1.08); }
.botao[disabled] { opacity: .6; cursor: progress; }

/* ── Rodapé ────────────────────────────────────────────────────────────── */
.rodape { padding: 0 var(--gutter) 40px; }
.rodape-painel { max-width: var(--largura); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--texto-suave); padding: 24px 32px; }

/* ── Revelar ao rolar ──────────────────────────────────────────────────── */
.revelar { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.revelar.visto { opacity: 1; transform: none; }

/* ── Celular ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .secao { padding: 14vh var(--gutter); min-height: auto; }
  .secao-grade, .secao-grade--direita { grid-template-columns: 1fr; }
  .secao-grade--direita > .painel { grid-column: 1; }
  .arte--direita, .arte--esquerda { left: 0; right: 0; width: 100%; height: 70%; opacity: .55;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent); }
  .momento, .momento--direita { left: var(--gutter); right: var(--gutter); bottom: 10vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar, .momento:first-of-type { opacity: 1; transform: none; filter: none; }
  .cine { height: 100svh; }
  .momento:not(:first-of-type), .cine-dica { display: none; }
}

/* ── Fuugu ─────────────────────────────────────────────────────────────── */
:root { --amarelo: #ffc629; --amarelo-texto: #1c1530; --sombra: 0 30px 80px -30px rgb(80 30 160 / .45); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; }
h1 { font-size: clamp(40px, 5.4vw, 84px); letter-spacing: -.03em; }
h2 { font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -.025em; }
h3 { font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--acento); }
.marca-texto { font-weight: 800; font-size: 24px; letter-spacing: -.03em; }
.ponto { color: var(--acento); }
.selo { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); margin-bottom: 14px; }
.destaque { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.02em; }
.nota { font-size: 13px; margin: 14px 0 0; color: var(--texto-suave); }
.rotulo { font-weight: 700; }
.botao { background: var(--amarelo); color: var(--amarelo-texto); font-weight: 700; box-shadow: 0 10px 30px -10px rgb(255 170 0 / .7); }
.botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.botao--grande { font-size: 17px; padding: 20px 34px; }
.menu-cta { background: var(--acento); color: #fff; border-color: var(--acento); }

/* Abertura: no desktop o vídeo real fica como um vídeo de celular ao lado do texto */
.cine-palco { background: radial-gradient(70% 80% at 72% 50%, #e3d6fb 0%, var(--fundo) 70%); }
.cine-vinheta { background: linear-gradient(to bottom, transparent 78%, var(--fundo) 100%); }
.selo-video { position: absolute; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgb(28 21 48 / .78); color: #fff; padding: 7px 12px; border-radius: 999px; }
@media (min-width: 761px) {
  .cine-canvas { inset: auto; top: 50%; right: max(var(--gutter), 7vw); transform: translateY(-46%); height: min(80vh, 820px); width: auto; aspect-ratio: 832 / 1000; border-radius: 28px; box-shadow: var(--sombra); background: #ddd; }
  .selo-video { right: calc(max(var(--gutter), 7vw) + 18px); top: calc(50% - min(40vh, 410px) + 4vh + 18px); }
  .momento { inset: auto auto 50% var(--gutter); max-width: min(560px, 44vw); translate: 0 50%; }
}
@media (max-width: 760px) {
  .selo-video { top: 76px; left: var(--gutter); }
  .momento { bottom: 5vh; }
  .momento .painel { padding: 20px 22px; }
  .titulo-abertura { font-size: 38px; }
  .destaque { font-size: 23px; }
}

/* Seções */
.secao { grid-template-columns: minmax(0, 1fr); }
.duas-colunas { width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.secao-grade--centro { grid-template-columns: minmax(0, 820px); justify-content: center; }
.lista { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.lista li { position: relative; padding-left: 30px; color: var(--texto-suave); }
.lista li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9a8ff, var(--acento)); }
.midia { margin: 0; border-radius: 26px; overflow: hidden; box-shadow: var(--sombra); background: var(--fundo-2); }
.midia video { display: block; width: 100%; height: 100%; object-fit: cover; }
.midia--retrato { aspect-ratio: 4 / 5; max-height: 76vh; justify-self: center; width: min(100%, 520px); }
.midia--paisagem { aspect-ratio: 946 / 720; }
.midia--larga { width: 100%; max-width: var(--largura); aspect-ratio: 1920 / 1176; position: relative; }
.midia--larga figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; font-size: 13px; color: #fff; background: rgb(28 21 48 / .7); padding: 10px 14px; border-radius: 12px; max-width: 640px; }
.produto-recorte { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgb(80 30 160 / .25)); }
.espuma-deco { position: absolute; z-index: -1; width: min(46vw, 560px); right: -8vw; top: 6vh; opacity: .55; pointer-events: none; }
.cartao--aviso { border-color: rgb(255 198 41 / .9); background: rgb(255 246 214 / .85); }
.faq { border-top: 1px solid var(--linha); padding: 16px 0; }
.faq:last-child { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--acento); font-size: 24px; line-height: 1; transition: transform .3s var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 10px 0 0; }
.secao--fecho { background: radial-gradient(60% 70% at 30% 50%, #e3d6fb, transparent 70%); }
.fecho { width: 100%; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.fecho-produto { width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgb(80 30 160 / .35)); transform: rotate(-4deg); }
.rodape-painel > span:nth-child(2) { flex: 1 1 360px; }
@media (max-width: 860px) {
  .duas-colunas, .fecho { grid-template-columns: minmax(0, 1fr); }
  .duas-colunas--invertida .produto-recorte { order: 2; }
  .fecho-produto { width: min(60vw, 260px); justify-self: center; }
  .painel--fecho { text-align: center; }
  .espuma-deco { opacity: .3; }
}

/* ── Cores da embalagem em blocos inteiros ─────────────────────────────── */
.secao--roxa {
  --texto: #ffffff; --texto-suave: rgb(255 255 255 / .84); --linha: rgb(255 255 255 / .22);
  --painel: rgb(255 255 255 / .1); --acento: #ffc629;
  background: radial-gradient(80% 60% at 80% 10%, #8f4dff 0%, transparent 60%), linear-gradient(160deg, #4a14b0 0%, #6b2bd9 55%, #3b0f8f 100%);
  color: var(--texto);
}
.secao--roxa .cartao--aviso { --texto: #1c1530; --texto-suave: #4a3d10; background: #ffc629; border-color: #ffc629; color: #1c1530; }
.secao--roxa .espuma-deco { opacity: .9; mix-blend-mode: screen; }
.secao--amarela {
  --acento: #5a1fc4; --painel: rgb(255 255 255 / .6); --linha: rgb(28 21 48 / .14); --texto-suave: #3d3358;
  background: radial-gradient(60% 70% at 25% 50%, #fff3c4 0%, transparent 70%), linear-gradient(170deg, #ffd54d, #ffc629 60%, #f5b400);
}
.secao--amarela .botao { background: #5a1fc4; color: #fff; box-shadow: 0 16px 40px -14px rgb(90 31 196 / .8); }
.topo { --texto: #1c1530; }

/* ── 3D: inclinação seguindo o mouse ───────────────────────────────────── */
[data-tilt] { transform-style: preserve-3d; transition: transform .45s var(--ease), box-shadow .45s var(--ease); will-change: transform; }
[data-tilt].inclinando { transition: transform .08s linear; }
.cartoes, .duas-colunas, .fecho, .secao--larga { perspective: 1200px; }
.cartao { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); }
.cartao.visto { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.cartao h3, .cartao p { transform: translateZ(30px); }
.produto-recorte, .midia--larga { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.fecho-produto { transform: rotate(-4deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); animation: flutuar 6s ease-in-out infinite; }
@keyframes flutuar { 50% { translate: 0 -14px; } }

/* ── 3D: o vídeo da abertura gira em perspectiva com a rolagem ─────────── */
@media (min-width: 761px) {
  .cine-palco { perspective: 1600px; }
  .cine-canvas { transform: translateY(-46%) rotateY(var(--giro, -14deg)) rotateX(var(--incl, 4deg)); transform-origin: 50% 50%; transition: transform .2s linear; }
}

/* ── 3D: bolhas de espuma em profundidade ──────────────────────────────── */
.bolhas { position: absolute; inset: 0; pointer-events: none; perspective: 900px; transform-style: preserve-3d; z-index: 1; }
.bolhas i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 8%, rgb(255 255 255 / .55) 14%, rgb(196 160 255 / .45) 45%, rgb(107 43 217 / .55) 78%, rgb(107 43 217 / .2) 100%);
  box-shadow: inset -6px -8px 18px rgb(74 20 176 / .35), 0 10px 30px -10px rgb(107 43 217 / .5);
  transform: translate3d(0, 0, var(--z));
  animation: bolha var(--t) ease-in-out var(--d) infinite alternate;
  opacity: .85;
}
@keyframes bolha {
  from { transform: translate3d(0, 0, var(--z)) rotate(0deg); }
  to { transform: translate3d(18px, -46px, calc(var(--z) + 120px)) rotate(25deg); }
}
.cine .momento { z-index: 3; }
@media (max-width: 760px) { .bolhas i:nth-child(n+6) { display: none; } }
@media (prefers-reduced-motion: reduce) { .bolhas, .fecho-produto { animation: none; } [data-tilt] { transform: none !important; } }

/* ── English version tweaks ────────────────────────────────────────────── */
.h1-sub { display: block; margin-top: .45em; font-family: var(--fonte-texto); font-size: clamp(15px, 1.15vw, 18px); font-weight: 600; letter-spacing: 0; color: var(--texto-suave); }
.midia--imagem { aspect-ratio: 831 / 540; }
.midia--imagem img { width: 100%; height: 100%; object-fit: cover; }
.cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cartoes { grid-template-columns: minmax(0, 1fr); } }