/* Brilho Dente · Protocolo · v2 "Sorriso Solar" */

:root {
  --creme: #FBF6EE;
  --branco: #FFFFFF;
  --champ: #EDE2CC;
  --pessego: #F2C4A8;
  --ouro: #856F3D;
  --ouro-esc: #6E5B30;
  --cafe: #2B2118;
  --cafe2: #5E4E40;
  --cinza-champ: #E7E0D5;

  --display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --sombra: 0 18px 40px -18px rgba(120, 72, 30, .35), 0 4px 12px -4px rgba(120, 72, 30, .12);
  --sombra-q: 0 28px 60px -22px rgba(150, 82, 30, .45);
  --r: clamp(24px, 3vw, 40px);
  --margem: clamp(16px, 5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html.rm { scroll-behavior: auto; }
body {
  margin: 0; background: var(--creme); color: var(--cafe);
  font-family: var(--texto); font-size: 18px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure, blockquote { margin: 0; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address, cite { font-style: normal; }
button { font: inherit; color: inherit; }
::selection { background: var(--pessego); color: var(--cafe); }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 4px; border-radius: 12px; }
.ausente { display: none !important; }
.pular { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--cafe); color: var(--creme); padding: 10px 16px; border-radius: 999px; text-decoration: none; transition: top .3s; }
.pular:focus { top: 16px; }

.bg-creme { background: var(--creme); } .bg-branco { background: var(--branco); }
.bg-champ { background: var(--champ); } .bg-pessego { background: var(--pessego); }

/* ---------- divisórias em curva de sorriso ---------- */
main > section, .rodape { position: relative; }
.curva { position: absolute; left: 0; top: -1px; width: 100%; height: clamp(34px, 6vw, 90px); pointer-events: none; z-index: 1; }
.curva path { fill: var(--ant); }
.curva--dia path { fill: var(--secao-dia, var(--cinza-champ)); }

/* ---------- tipografia ---------- */
.titulo { font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.titulo--m { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.sub { margin-top: 18px; font-size: clamp(18px, 1.4vw, 21px); color: var(--cafe2); }
.cabeca { padding: 0 var(--margem); max-width: 1200px; margin: 0 auto clamp(40px, 5vw, 70px); }
.cabeca--centro { text-align: center; }
.cabeca--centro .titulo { margin: 0 auto; max-width: 16ch; }

/* ---------- pílulas e stickers ---------- */
.pill, .stories__seta, .chave, .video { transition-property: transform, background, color, box-shadow, border-radius, scale; }
.pill:active, .stories__seta:active, .chave:active { scale: .96; transition: scale .08s; }
.pill, .stories__seta, .chave { scale: 1; transition: transform .5s var(--mola), background .4s, color .4s, box-shadow .4s, border-radius .5s var(--mola), scale .55s var(--mola); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 1.5em; border-radius: 999px; border: 0;
  font-family: var(--texto); font-weight: 600; font-size: 17px; text-decoration: none; cursor: pointer;
  transition: transform .5s var(--mola), background .4s, color .4s, box-shadow .4s, border-radius .5s var(--mola);
  will-change: transform;
}
.pill--ouro { background: var(--ouro); color: #fff; box-shadow: 0 10px 24px -10px rgba(133, 111, 61, .7); }
.pill--ouro:hover { background: var(--ouro-esc); transform: translateY(-3px); }
.pill--g { min-height: 60px; padding: 0 2em; font-size: 18px; }
.pill--p { min-height: 44px; padding: 0 1.25em; font-size: 15px; }
.pill--claro { background: rgba(255, 255, 255, .92); color: var(--cafe); box-shadow: var(--sombra); }
.pill--borda { background: transparent; color: var(--cafe); box-shadow: inset 0 0 0 1.5px rgba(43, 33, 24, .25); }
.pill--borda:hover, .pill--borda:focus-visible { background: var(--ouro); color: #fff; box-shadow: none; transform: scale(1.06); }
/* sorriso: a borda inferior se curva no hover */
.pill--sorri:hover { border-radius: 40px 40px 50% 50% / 40px 40px 100% 100%; transform: translateY(-3px); }
.link-seta { font-weight: 600; text-decoration: none; padding: 14px 4px; background: linear-gradient(var(--pessego), var(--pessego)) 0 85% / 100% 8px no-repeat; transition: background-size .5s var(--mola); }
.link-seta:hover { background-size: 100% 60%; }

.sticker {
  display: inline-block; padding: .55em 1.05em; border-radius: 999px;
  background: var(--branco); color: var(--cafe); font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  box-shadow: var(--sombra); white-space: nowrap;
}
.sticker--pessego { background: var(--pessego); }
.sticker--champ { background: var(--champ); }
.sticker--titulo { background: var(--pessego); transform: rotate(-3deg); margin-bottom: 26px; white-space: normal; font-size: 15px; }
.sticker--flut { position: absolute; z-index: 5; transform: rotate(var(--rot, -4deg)); cursor: default; }
.sticker--flut:hover { animation: balanca .8s var(--mola); }
@keyframes balanca { 0%, 100% { rotate: 0deg; } 25% { rotate: 6deg; } 60% { rotate: -5deg; } }

.pill-tag { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(43, 33, 24, .62); color: #fff; font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pill-tag--claro { background: rgba(255, 255, 255, .9); color: var(--cafe); }

.selo { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0f0c09; overflow: hidden; flex: none; }
.selo img { width: 82%; height: 82%; }
.selo--p { width: 34px; height: 34px; }

/* ---------- progresso ---------- */
.progresso { position: fixed; left: 0; top: 0; z-index: 130; width: 100%; height: 22px; pointer-events: none; overflow: visible; }
.progresso { clip-path: inset(0 100% 0 0); }
.progresso path { fill: none; stroke: var(--ouro); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; }

/* ---------- header ---------- */
.topo { position: fixed; z-index: 120; top: 14px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.topo__pilula {
  pointer-events: auto; display: flex; align-items: center; gap: clamp(10px, 2vw, 28px);
  padding: 7px 7px 7px 8px; border-radius: 999px;
  background: rgba(251, 246, 238, .78); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 30px -12px rgba(120, 72, 30, .3), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca__nome { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.topo__links { display: flex; gap: 4px; }
.topo__links a { display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; transition: background .3s; }
.topo__links a:hover { background: var(--champ); }

/* ---------- hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; padding: 130px var(--margem) 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 80px); align-items: center; overflow: hidden; }
.hero__titulo { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 7.4vw, 7rem); line-height: .94; letter-spacing: -.045em; }
.slot { position: relative; display: inline-block; vertical-align: bottom; color: var(--ouro); }
.slot__janela { position: relative; display: block; overflow: hidden; height: 1.06em; }
.slot__palavra { display: inline-block; white-space: nowrap; will-change: transform; }
.slot__curva { position: absolute; left: 0; bottom: -.1em; width: 100%; height: .22em; overflow: visible; }
.slot__curva path { fill: none; stroke: var(--pessego); stroke-width: 8px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero__sub { margin-top: 26px; max-width: 540px; font-size: clamp(18px, 1.35vw, 21px); color: var(--cafe2); }
.hero__acoes { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

.mosaico { position: relative; width: 100%; aspect-ratio: 1 / 1.02; max-width: 660px; justify-self: center; }
.tile { position: absolute; margin: 0; will-change: transform; }
.tile__in { width: 100%; height: 100%; overflow: hidden; border-radius: var(--r); box-shadow: var(--sombra); background: var(--champ); will-change: transform; }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.t-arco { left: 25%; top: 9%; width: 46%; height: 62%; }
.t-arco .tile__in { border-radius: 999px 999px var(--r) var(--r); }
.t-arco img { object-position: 50% 18%; }
.t-c1 { left: 1%; top: 6%; width: 21%; aspect-ratio: 1; }
.t-c1 .tile__in, .t-c2 .tile__in, .t-c3 .tile__in, .t-c4 .tile__in { border-radius: 50%; }
.t-p1 { left: 74%; top: 0%; width: 22%; height: 33%; }
.t-p1 .tile__in, .t-p2 .tile__in { border-radius: 999px; }
.t-r1 { left: 74%; top: 37%; width: 26%; height: 28%; }
.t-c2 { left: 3%; top: 38%; width: 19%; aspect-ratio: 1; }
.t-p2 { left: 27%; top: 74%; width: 35%; height: 20%; }
.t-p2 img { object-position: 50% 28%; }
.t-c3 { left: 64%; top: 69%; width: 25%; aspect-ratio: 1; }
.t-c3 img { object-position: 50% 30%; }
.t-c4 { left: 8%; top: 66%; width: 15%; aspect-ratio: 1; }
.s1 { left: -4%; top: 30%; --rot: -5deg; }
.s2 { left: 64%; top: 64%; --rot: 4deg; }
.s3 { left: 60%; top: 4%; --rot: -3deg; }

/* ---------- transformações (stories) ---------- */
.transf { padding: clamp(110px, 12vw, 170px) 0 clamp(80px, 9vw, 120px); overflow: hidden; }
.stories { position: relative; width: min(400px, 82vw); aspect-ratio: 9 / 16; max-height: 78vh; margin: 0 auto; }
@supports (height: 1svh) { .stories { max-height: 78svh; } }
.stories { width: min(400px, 82vw, calc(78svh * 9 / 16)); }
.stories__palco { position: absolute; inset: 0; perspective: 1400px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; }
.story { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; background: var(--cafe); box-shadow: var(--sombra-q); will-change: transform, filter, opacity; }
.story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; pointer-events: none; -webkit-user-drag: none; }
.story__depois { clip-path: var(--clip, inset(100% 0 0 0)); }
.story--close img { object-fit: contain; object-position: 50% 50%; }
.story--close .story__fundo { object-fit: cover; filter: blur(30px) brightness(.55); transform: scale(1.3); }
.stories__ui { position: absolute; inset: 0; z-index: 20; pointer-events: none; padding: 14px; }
.stories__barras { display: flex; gap: 5px; }
.stories__barras i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.stories__barras b { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.stories__topo { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.stories__seta { position: absolute; top: 50%; z-index: 25; width: 58px; height: 58px; margin-top: -29px; border-radius: 50%; border: 0; background: var(--branco); box-shadow: var(--sombra); font-size: 22px; cursor: pointer; transition: transform .5s var(--mola); }
.stories__seta:hover { transform: scale(1.08); }
.stories__seta--ant { left: -96px; } .stories__seta--prox { right: -96px; }
.stories__ver { position: absolute; z-index: 25; left: 50%; bottom: 18px; transform: translateX(-50%); }
.stories__ver:hover { transform: translateX(-50%) scale(1.04); }
.legenda-aut { margin: 26px auto 0; padding: 0 var(--margem); max-width: 560px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--cafe2); }
.legenda-aut--esq { text-align: left; max-width: 1200px; margin: 18px auto 0; }

/* ---------- qual dia ---------- */
.dia { background: var(--secao); padding: clamp(110px, 12vw, 170px) var(--margem) clamp(90px, 10vw, 140px); transition: background .6s var(--suave); }
.chave-wrap { display: flex; justify-content: center; }
.chave { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: min(560px, 100%); min-height: 72px; padding: 6px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 2px 6px rgba(43, 33, 24, .08), var(--sombra); cursor: pointer; }
.chave__bola { position: absolute; left: 6px; top: 6px; bottom: 6px; width: calc(50% - 6px); border-radius: 999px; background: var(--cafe); box-shadow: 0 8px 20px -8px rgba(43, 33, 24, .6); }
.chave__op { position: relative; z-index: 1; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(16px, 2vw, 20px); transition: color .4s; }
.chave[aria-checked="false"] .chave__op--a, .chave[aria-checked="true"] .chave__op--b { color: var(--creme); }
.dia__lista { max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; perspective: 1000px; }
.flip { height: clamp(110px, 12vw, 140px); }
.flip__in { position: relative; display: block; height: 100%; transform-style: preserve-3d; }
.flip__face { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 clamp(22px, 3vw, 36px); border-radius: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; }
.flip__face--a { background: rgba(255, 255, 255, .55); color: var(--cafe2); }
.flip__face--b { background: var(--branco); color: var(--cafe); transform: rotateX(180deg); box-shadow: var(--sombra); }

/* ---------- bento ---------- */
.bento-sec { padding: clamp(110px, 12vw, 170px) var(--margem) clamp(90px, 10vw, 140px); }
.bento { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.bloco { position: relative; border-radius: var(--r); padding: clamp(28px, 3.4vw, 48px); overflow: hidden; background: var(--champ); min-height: 260px; }
.bloco h3 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -.035em; max-width: 12ch; }
.bloco p { margin-top: 16px; max-width: 34ch; color: var(--cafe2); }
.bloco--grande { grid-row: span 2; display: flex; flex-direction: column; min-height: 560px; }
.bloco--pessego { background: var(--pessego); }
.bloco--pessego p { color: var(--cafe); }
.bloco--branco { background: var(--branco); box-shadow: var(--sombra); }
.bloco__foto { margin-top: auto; align-self: flex-end; width: min(78%, 360px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--sombra-q); transform: translate(12%, 18%); }
.bloco__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform-origin: 50% 58%; animation: zoom-lento 14s ease-in-out infinite alternate; }
@keyframes zoom-lento { from { transform: scale(1.35); } to { transform: scale(1.7); } }

/* ---------- é para você se ---------- */
.praquem { padding: clamp(110px, 12vw, 170px) var(--margem) clamp(90px, 10vw, 130px); overflow: hidden; }
.dica-toque { display: none; }
.quadro { position: relative; max-width: 1100px; height: clamp(440px, 52vw, 560px); margin: 0 auto; border-radius: 40px; background: rgba(255, 255, 255, .38); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.frase {
  position: absolute; left: var(--x); top: var(--y); rotate: var(--r);
  padding: .8em 1.3em; border: 0; border-radius: 999px; background: var(--branco); box-shadow: var(--sombra);
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.02em; line-height: 1.15; color: var(--cafe);
  cursor: grab; touch-action: none; max-width: 92%; text-align: left;
  transition: background .35s, box-shadow .35s;
}
.frase:active { cursor: grabbing; }
.frase--longa { max-width: min(520px, 92%); }
.frase--pessego, .frase[aria-pressed="true"] { background: var(--pessego); }
.frase[aria-pressed="true"]::after { content: " ✓"; }
.praquem__cta { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- como funciona ---------- */
.passos { padding: clamp(110px, 12vw, 170px) var(--margem) clamp(90px, 10vw, 140px); }
.trilha { position: relative; max-width: 1200px; margin: 0 auto; aspect-ratio: 1200 / 500; }
.trilha__curva { position: absolute; left: 0; top: 0; width: 100%; height: 70%; overflow: visible; }
.trilha__curva--v { display: none; }
.trilha__base { fill: none; stroke: var(--champ); stroke-width: 6px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trilha__linha { fill: none; stroke: var(--ouro); stroke-width: 6px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trilha__passos { position: absolute; inset: 0; }
.passo { position: absolute; width: 22%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.passo > div { padding-top: 18px; }
.passo__n { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ouro); color: #fff; font-family: var(--display); font-weight: 800; font-size: 26px; box-shadow: 0 0 0 8px var(--creme), 0 12px 24px -10px rgba(133, 111, 61, .7); margin-top: -32px; }
.passo h3 { margin-top: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.05; letter-spacing: -.025em; }
.passo p { margin-top: 8px; font-size: 16px; color: var(--cafe2); }


/* ---------- Dra. Thamara ---------- */
.dra { padding: clamp(110px, 12vw, 170px) var(--margem) clamp(100px, 11vw, 150px); overflow: hidden; }
.dra__grade { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(50px, 7vw, 110px); align-items: center; }
.dra__arte { position: relative; width: min(100%, 460px); justify-self: center; }
.dra__foto { aspect-ratio: 1000 / 1249; overflow: hidden; border-radius: 999px 999px var(--r) var(--r); box-shadow: var(--sombra-q); background: var(--champ); }
.dra__foto img { width: 100%; height: 100%; object-fit: cover; }
.orbita { position: absolute; inset: 0; pointer-events: none; }
.orbita__item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.orbita__item .sticker { display: block; translate: -50% -50%; pointer-events: auto; }
.dra__p { margin-top: 24px; color: var(--cafe2); max-width: 560px; }
.citacao { margin-top: 36px; }
.citacao__texto { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 2.7vw, 2.5rem); line-height: 1.14; letter-spacing: -.025em; color: var(--cafe); }
.citacao__texto .w { display: inline-block; }
.citacao cite { display: inline-block; margin-top: 20px; padding: 8px 16px; border-radius: 999px; background: var(--pessego); font-weight: 600; font-size: 15px; }

/* ---------- mural ---------- */
.mural-sec { padding: clamp(110px, 12vw, 170px) var(--margem) clamp(90px, 10vw, 140px); overflow: hidden; }
.mural { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.mural li { padding: 7px; background: var(--branco); border-radius: 26px; box-shadow: var(--sombra); transition: box-shadow .5s, scale .5s var(--mola); will-change: transform; }
.mural li:hover { scale: 1.07; z-index: 3; box-shadow: var(--sombra-q); }
.mural img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; }

/* ---------- vídeos ---------- */
.videos { padding: clamp(110px, 12vw, 170px) var(--margem) clamp(90px, 10vw, 140px); }
.videos__grade { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.video { position: relative; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; background: var(--pessego); cursor: pointer; box-shadow: var(--sombra); transition: transform .5s var(--mola); }
.video:hover { transform: translateY(-6px) rotate(-1deg); }
.video img { width: 100%; height: 100%; object-fit: cover; }
.video__play { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--branco); color: var(--cafe); font-weight: 600; font-size: 16px; box-shadow: var(--sombra); animation: pulso 2.4s ease-in-out infinite; }
.video__play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--ouro); }
@keyframes pulso { 0%, 100% { box-shadow: var(--sombra), 0 0 0 0 rgba(242, 196, 168, .9); } 50% { box-shadow: var(--sombra), 0 0 0 10px rgba(242, 196, 168, 0); } }
.video.sem-capa { background: var(--pessego); }

.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__fundo { position: absolute; inset: 0; background: rgba(251, 246, 238, .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.modal__caixa { position: relative; width: min(1000px, 100%); }
.modal__video { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--cafe); box-shadow: var(--sombra-q); }
.modal__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal__fechar { display: flex; margin: 0 0 12px auto; }

/* ---------- dúvidas ---------- */
.duvidas { padding: clamp(110px, 12vw, 170px) var(--margem) clamp(80px, 9vw, 120px); }
.conversa { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.par { display: flex; flex-direction: column; gap: 10px; }
.balao { max-width: 82%; padding: 16px 22px; border-radius: 28px; font-size: 18px; line-height: 1.5; box-shadow: var(--sombra); }
.balao--q { align-self: flex-end; background: var(--pessego); border-bottom-right-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; cursor: pointer; }
.balao--r { align-self: flex-start; display: flex; gap: 14px; align-items: flex-start; background: var(--branco); border-bottom-left-radius: 8px; transition: box-shadow .4s, transform .5s var(--mola); }
.balao--r.destaque { box-shadow: 0 0 0 4px var(--pessego), var(--sombra-q); transform: scale(1.02); }
.digitando { align-self: flex-start; display: none; gap: 5px; padding: 16px 20px; border-radius: 24px; background: var(--branco); box-shadow: var(--sombra); }
.digitando i { width: 8px; height: 8px; border-radius: 50%; background: var(--cafe2); animation: ponto 1s ease-in-out infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes ponto { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.conversa__fim { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.conversa__fim p { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; }
.outros { max-width: 1000px; margin: clamp(70px, 8vw, 110px) auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.outros__rot { font-weight: 600; color: var(--cafe2); margin-right: 6px; }

/* ---------- local ---------- */
.local { padding: clamp(110px, 12vw, 170px) var(--margem) clamp(90px, 10vw, 140px); }
.local__card { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 0; border-radius: var(--r); overflow: hidden; background: var(--branco); box-shadow: var(--sombra-q); }
.local__texto { padding: clamp(32px, 4.5vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.local address { margin: 22px 0 30px; font-size: 20px; line-height: 1.5; color: var(--cafe2); }
.mapa { position: relative; min-height: 360px; }
.mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__quadra { fill: #EDE2CC; }
.mapa__verde { fill: #E2DCC2; }
.mapa__ruas path { fill: none; stroke: #FFFFFF; stroke-width: 14; stroke-linecap: round; }
.mapa__gota path { fill: var(--ouro); }
.mapa__gota { animation: quica 1.8s var(--mola) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.mapa__sombra { fill: rgba(43, 33, 24, .18); animation: sombra 1.8s var(--mola) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes quica { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
@keyframes sombra { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(.6); opacity: .5; } }

/* ---------- CTA final ---------- */
.final { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 160px var(--margem) 140px; overflow: hidden; }
.rostos { position: absolute; inset: 0; pointer-events: none; }
.rosto { position: absolute; width: var(--t, 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid rgba(255, 255, 255, .85); box-shadow: var(--sombra-q); will-change: transform; }
.rosto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.r1 { left: 6%; top: 16%; --t: clamp(110px, 13vw, 190px); }
.r1 img { object-position: 50% 30%; }
.r2 { left: 80%; top: 12%; --t: clamp(90px, 10vw, 150px); }
.r3 { left: 12%; top: 66%; --t: clamp(84px, 9vw, 140px); }
.r4 { left: 84%; top: 58%; --t: clamp(100px, 12vw, 170px); }
.r5 { left: 32%; top: 8%; --t: clamp(70px, 7vw, 100px); }
.r6 { left: 62%; top: 80%; --t: clamp(80px, 8vw, 120px); }
.r7 { left: 30%; top: 82%; --t: clamp(64px, 6vw, 92px); }
.final__conteudo { position: relative; z-index: 2; max-width: 900px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.final__titulo { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 8vw, 7.6rem); line-height: .94; letter-spacing: -.045em; text-wrap: balance; }
.final__sub { font-size: clamp(18px, 1.5vw, 22px); max-width: 520px; margin-bottom: 8px; }

/* ---------- rodapé ---------- */
.rodape { padding: clamp(100px, 10vw, 140px) var(--margem) 40px; font-size: 16px; color: var(--cafe2); }
.rodape__grade { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 30px; align-items: start; }
.rodape__marca { display: flex; gap: 12px; align-items: center; }
.rodape__marca strong { display: block; font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--cafe); letter-spacing: -.02em; }
.rodape__marca span:not(.selo) { font-size: 14px; }
.rodape a { text-decoration: underline; text-decoration-color: rgba(133, 111, 61, .5); text-underline-offset: 3px; }
.rodape__copy { max-width: 1200px; margin: 50px auto 0; padding-top: 22px; border-top: 1px solid rgba(43, 33, 24, .12); font-size: 14px; }

/* ---------- barra fixa mobile ---------- */
.barra-cta { position: fixed; z-index: 125; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); min-height: 58px; font-size: 18px; transform: translateY(160%); transition: transform .6s var(--mola); }
.barra-cta.on { transform: none; }

/* ---------- responsivo ---------- */
@media (min-width: 900px) { .barra-cta { display: none; } }
@media (max-width: 899px) {
  body { font-size: 18px; }
  .topo { top: 10px; }
  .topo__links { display: none; }
  .topo__pilula { width: 100%; justify-content: space-between; }
  .hero { grid-template-columns: 1fr; padding-top: 108px; gap: 40px; }
  .hero__titulo { font-size: clamp(2.9rem, 13.5vw, 4.4rem); }
  .hero__acoes .pill { width: 100%; }
  .mosaico { max-width: 520px; }
  .sticker--flut { font-size: 13px; }
  .s1 { left: -2%; top: 28%; }

  .stories__seta { display: none; }
  .stories__ver { bottom: 16px; }

  .dia__lista { grid-template-columns: 1fr; }
  .flip { height: 92px; }

  .bento { grid-template-columns: 1fr; }
  .bloco--grande { grid-row: auto; min-height: 460px; }

  .dica-arraste { display: none; } .dica-toque { display: block; }
  .quadro { height: auto; padding: 22px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: transparent; box-shadow: none; }
  .frase { position: static; rotate: var(--r); max-width: 100%; font-size: 19px; cursor: pointer; touch-action: manipulation; }
  .frase:nth-child(even) { align-self: flex-end; }

  .trilha { aspect-ratio: auto; }
  .trilha__curva--h { display: none; }
  .trilha__curva--v { display: block; left: 2px; width: 60px; height: 100%; }
  .trilha__passos { position: relative; display: flex; flex-direction: column; gap: 46px; padding: 10px 0 10px 0; }
  .passo { position: static; width: auto; transform: none; flex-direction: row; align-items: flex-start; text-align: left; gap: 20px; }
  .passo__n { flex: none; margin-top: 0; }
  .passo h3 { margin-top: 10px; }

  .dra__grade { grid-template-columns: 1fr; }
  .dra__arte { width: min(76vw, 380px); margin: 30px auto 50px; }
  .orbita__item .sticker { font-size: 13px; }

  .mural { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .videos__grade { grid-template-columns: 1fr 1fr; }
  .local__card { grid-template-columns: 1fr; }
  .mapa { min-height: 260px; order: -1; }
  .rosto { --t: 74px !important; }
  .r1 { left: 4%; top: 7%; } .r2 { left: 74%; top: 6%; } .r5 { left: 40%; top: 3%; }
  .r3 { left: 3%; top: 84%; } .r4 { left: 76%; top: 82%; } .r6 { left: 56%; top: 90%; } .r7 { left: 26%; top: 90%; }
  .rodape__grade { grid-template-columns: 1fr; }
  .rodape { padding-bottom: 110px; }
}

/* ---------- movimento reduzido ---------- */
html.rm .bloco__foto img, html.rm .mapa__gota, html.rm .mapa__sombra, html.rm .video__play, html.rm .digitando i { animation: none; }
html.rm .story__depois { transition: clip-path .3s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .2s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}