@font-face { font-family: GS; src: url(assets/GeneralSans-Light.otf); font-weight: 300; font-display: swap; }
@font-face { font-family: GS; src: url(assets/GeneralSans-Regular.otf); font-weight: 400; font-display: swap; }
@font-face { font-family: GS; src: url(assets/GeneralSans-Medium.otf); font-weight: 500; font-display: swap; }
@font-face { font-family: GS; src: url(assets/GeneralSans-Semibold.otf); font-weight: 600; font-display: swap; }
:root {
  --vinho: #3D0D25; --vinho2: #5A1A3F; --lilas: #E6CEE5; --lilas2: #F3E6F2; --lima: #D6FF66; --creme: #F7F2F5;
  --suave: #7D6372; --linha: #EADDE5; --agua: #8CCBEA; --raio: 32px;
  --serif: Newsreader, Georgia, serif; --sans: GS, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--creme); color: var(--vinho); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, li, summary { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
em { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
.logo { height: 26px; width: auto; color: var(--vinho); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.eyebrow.claro { color: rgba(255,255,255,.65); }
section { padding: 0 20px; }
.cabeca-secao { max-width: 1160px; margin: 0 auto 40px; }
.cabeca-secao h2, .problema h2, .ia h2, .privacidade h2, .planos h2, .final h2, .duvidas h2 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 500; margin-top: 12px; }
.apoio { font-size: clamp(17px, 1.6vw, 20px); color: var(--suave); max-width: 560px; text-wrap: balance; }
.hero .apoio { max-width: 500px; }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s; }
.botao:hover { transform: translateY(-2px); }
.botao.pequeno { height: 44px; padding: 0 20px; font-size: 14px; }
.botao-escuro { background: var(--vinho); color: #fff; }
.botao-lima { background: var(--lima); color: var(--vinho); width: 100%; }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; max-width: 1240px; margin: 0 auto; padding: 14px 20px; background: rgba(247,242,245,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topo .marca { margin-right: auto; display: flex; }
.menu { display: flex; gap: 6px; }
.menu a { font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 999px; transition: background .2s; }
.menu a:hover { background: #fff; }
@media (max-width: 860px) { .menu { display: none; } }

/* hero */
.hero > *, .ia > *, .privacidade > *, .cartoes-plano > *, .bento > * { min-width: 0; }
.hero { max-width: 1240px; margin: 0 auto; padding-top: clamp(24px, 4vw, 48px); padding-bottom: 10px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; } }
.selo-topo { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; font-weight: 500; background: #fff; padding: 8px 14px 8px 10px; border-radius: 999px; }
.selo-topo i { width: 10px; height: 10px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 4px rgba(214,255,102,.35); }
.hero h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: .98; letter-spacing: -0.045em; font-weight: 400; margin: 22px 0 22px; }
.hero h1 em { font-size: 1.05em; }
.glifo { display: inline-block; vertical-align: middle; }
.nw { white-space: nowrap; }
.glifo-pilula { width: .62em; height: .34em; border-radius: 999px; background: var(--lima); transform: rotate(-24deg) translateY(-.06em); margin: 0 .05em; }
.glifo-brilho { width: .42em; height: .42em; margin-left: .08em; background: var(--lilas); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: translateY(-.25em); }
.lojas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.lojas.centro { justify-content: center; }
.loja { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 18px; border-radius: 16px; background: var(--vinho); color: #fff; white-space: nowrap; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.loja:hover { transform: translateY(-2px); }
.loja svg { width: 24px; height: 24px; }
.loja span { display: flex; flex-direction: column; font-size: 18px; font-weight: 600; line-height: 1.1; }
.loja small { font-size: 11px; font-weight: 500; opacity: .75; }
.loja-breve { background: #fff; color: var(--vinho); border: 1px solid var(--linha); }
.loja-clara { background: var(--lima); color: var(--vinho); }
.nota-hero { font-size: 14px; color: var(--suave); margin-top: 16px; }

.hero-palco { position: relative; height: clamp(560px, 62vw, 720px); display: flex; justify-content: flex-end; align-items: center; padding-right: 13%; }
/* palco do hero: painel lilás, o celular e os cartões de contexto em volta */
.painel { position: absolute; inset: 3% 0 3% 0; border-radius: 44px; overflow: hidden; background: radial-gradient(circle at 30% 25%, #F6E9F5 0%, var(--lilas) 55%, #D7B3D4 100%); }
.selo-especialistas { position: absolute; z-index: 4; left: 4%; top: 6%; width: clamp(108px, 11vw, 140px); transform: rotate(-8deg); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.selo-especialistas:hover { transform: rotate(28deg); }
.selo-especialistas svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(61,13,37,.3)); }
.s-fundo { fill: var(--vinho); }
.selo-especialistas text { font: 600 10.6px var(--sans); letter-spacing: .16em; fill: #fff; }
.s-miolo { fill: var(--lima); }
.s-check { fill: none; stroke: var(--vinho); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hero-tres { list-style: none; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin-top: 28px; }
.hero-tres li { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-left: 1px solid var(--linha); }
.hero-tres li:first-child { padding-left: 0; border-left: 0; }
.hero-tres svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--lilas); fill: none; stroke: var(--vinho); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-tres span { font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.hero-tres .ic-corpo { position: relative; flex: none; display: block; width: 36px; height: 36px; border-radius: 12px; background: var(--lilas); overflow: hidden; }
.hero-tres .ic-corpo img { position: absolute; left: 50%; top: -18px; height: 104px; width: auto; max-width: none; transform: translateX(-50%); }
.hero-tres small { font-size: 13px; font-weight: 400; color: var(--suave); }
@media (max-width: 520px) { .hero-tres li { padding: 0 10px; gap: 8px; } .hero-tres svg, .hero-tres .ic-corpo { width: 30px; height: 30px; } .hero-tres svg { padding: 6px; } .hero-tres .ic-corpo img { height: 88px; top: -15px; } .hero-tres span { font-size: 13px; } .hero-tres small { font-size: 12px; } }
.celular { position: relative; width: clamp(250px, 24vw, 310px); aspect-ratio: 390/844; border-radius: 44px; padding: 9px; background: #1d0812; box-shadow: 0 50px 90px -30px rgba(61,13,37,.55), inset 0 0 0 2px #3a1a2b; }
.celular video { width: 100%; height: 100%; object-fit: cover; border-radius: 36px; background: var(--creme); }
.celular::before { content: ""; position: absolute; top: 18px; left: 50%; width: 80px; height: 22px; margin-left: -40px; border-radius: 12px; background: #1d0812; z-index: 2; }
.flutua { position: absolute; z-index: 3; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 22px; padding: 14px 18px; box-shadow: 0 24px 50px -20px rgba(61,13,37,.35); animation: boia 7s ease-in-out infinite; }
.flutua .rot { display: block; font-size: 12px; font-weight: 600; color: var(--suave); white-space: nowrap; }
.flutua strong { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.04em; white-space: nowrap; }
.f1 { right: 0; top: 10%; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; }
.mini-prato { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.flutua .sub { display: block; font-size: 13px; color: var(--suave); white-space: nowrap; }
.f1 strong { font-size: 26px; line-height: 1.1; }
.f2 { left: 3%; top: 38%; background: #fff; animation-delay: -2.3s; width: 214px; padding: 14px 16px 16px; }
.f2 .sub { white-space: normal; font-size: 12.5px; line-height: 1.35; }
.f2 strong { font-size: 28px; margin-top: 6px; }
.mini-corpos { display: flex; align-items: stretch; justify-content: space-around; background: radial-gradient(circle at 50% 40%, var(--vinho2), #2A0819 75%); border-radius: 16px; padding: 8px 8px 8px; height: 150px; overflow: hidden; }
.mini-corpos figure { position: relative; width: 70px; height: 100%; margin: 0; overflow: hidden; }
.mini-corpos img { position: absolute; left: 50%; top: -22px; height: 230px; width: auto; max-width: none; transform: translateX(-50%); }
.mini-corpos figcaption { position: absolute; left: 50%; top: 6px; z-index: 1; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); padding: 2px 7px; border-radius: 999px; }
.mini-corpos figure:last-child figcaption { background: var(--lima); color: var(--vinho); }
.mini-corpos .seta { color: rgba(255,255,255,.7); font-size: 16px; align-self: center; }
.f3 { right: 0; bottom: 12%; background: var(--vinho); color: #fff; animation-delay: -4.6s; }
.f3 strong { font-size: 22px; }
.f3 .claro { color: rgba(255,255,255,.65); }
@keyframes boia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 960px) { .hero-palco { justify-content: center; padding-right: 0; } }
@media (max-width: 480px) { .flutua strong { font-size: 22px; } .f1 { right: 0; top: 8%; } .mini-prato { width: 50px; height: 50px; } .f2 { left: 0; top: 34%; width: 170px; } .mini-corpos { height: 118px; } .mini-corpos img { height: 180px; top: -16px; } .mini-corpos figure { width: 56px; } .f3 { right: 0; } .selo-especialistas { left: 2%; top: -2%; } }

/* ciência */
.faixa-ciencia { max-width: 1160px; margin: 30px auto 0; padding: 26px 28px; background: #fff; border-radius: var(--raio); display: grid; grid-template-columns: 1fr; gap: 10px; }
.selo-ciencia svg { width: 112px; height: 112px; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.faixa-ciencia:hover .selo-ciencia svg { transform: rotate(40deg); }
.selo-ciencia text { font: 600 9.6px var(--sans); letter-spacing: .14em; fill: var(--vinho); }
.selo-ciencia circle { fill: var(--lima); }
.selo-ciencia path { stroke: var(--vinho); }
.faixa-ciencia > p { font-size: 17px; color: var(--suave); max-width: 640px; }
.faixa-ciencia > p strong { color: var(--vinho); font-weight: 600; }
.fatos { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.fatos li { background: var(--creme); border-radius: 20px; padding: 16px 18px; }
.fatos b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.fatos span { font-size: 14px; color: var(--suave); }
@media (max-width: 720px) { .fatos { grid-template-columns: 1fr; } .faixa-ciencia { margin-left: 20px; margin-right: 20px; } }

/* problema */
.problema { max-width: 980px; margin: clamp(90px, 12vw, 150px) auto; text-align: center; }
.problema .apoio { margin: 22px auto 0; }

/* como funciona: três cartões com uma peça do app que se mexe; a linha liga os passos */
.passos { max-width: 1200px; margin: 0 auto clamp(90px, 11vw, 140px); }
.passos-cabeca { text-align: center; }
.passos-lista { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.passo { position: relative; background: #fff; border-radius: var(--raio); padding: 18px 18px 26px; display: flex; flex-direction: column; min-width: 0; }
.p-arte { height: 240px; border-radius: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.p1 .p-arte { background: var(--lilas); } .p2 .p-arte { background: #FFF1E6; } .p3 .p-arte { background: #EAF5D9; }
.p-num { margin-top: 20px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; background: var(--vinho); color: #fff; }
.passo h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin-top: 12px; padding: 0 4px; }
.passo p { font-size: 15px; color: var(--suave); margin-top: 6px; padding: 0 4px; }
/* passo 1: a seleção desce pela lista, para no 5 mg e a meta aparece (ciclo de 6 s) */
.canetas { position: relative; display: grid; gap: 8px; width: 82%; max-width: 300px; }
.caneta-op { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 14px; font-weight: 500; padding: 10px 14px; border-radius: 14px; color: var(--vinho); background: rgba(255,255,255,.45); }
.caneta-op .ponto { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--vinho); flex: none; }
.sel { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 40px; border-radius: 14px; background: #fff; box-shadow: 0 12px 24px -14px rgba(61,13,37,.45); animation: desce 6s cubic-bezier(.65,0,.18,1) infinite; }
@keyframes desce { 0%, 8% { transform: translateY(0); } 22%, 100% { transform: translateY(47px); } }
.canetas .caneta-op:nth-child(3) .ponto { animation: marca 6s infinite; }
@keyframes marca { 0%, 20% { background: transparent; } 26%, 100% { background: radial-gradient(circle, var(--vinho) 0 40%, transparent 45%); } }
.meta-pronta { justify-self: center; margin-top: 4px; white-space: nowrap; font-size: 13px; font-weight: 500; background: var(--vinho); color: #fff; padding: 7px 12px; border-radius: 999px; animation: meta 6s cubic-bezier(.16,1,.3,1) infinite; }
.meta-pronta b { color: var(--lima); }
@keyframes meta { 0%, 30% { opacity: 0; transform: translateY(8px) scale(.95); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* passo 2: a mira fecha, a linha varre, os pinos acendem e o total sobe (ciclo de 6 s) */
.p2 .p-arte { flex-direction: column; gap: 0; justify-content: center; }
.p2 .total-mini { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
.mira-mini { position: relative; width: 160px; height: 160px; margin-top: -30px; }
.mira-mini img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mira-mini .c { position: absolute; width: 26px; height: 26px; border: 0 solid var(--vinho); animation: fecha 6s cubic-bezier(.16,1,.3,1) infinite; }
.mira-mini .c1 { left: -14px; top: -14px; border-left-width: 4px; border-top-width: 4px; border-top-left-radius: 12px; --dx: 8px; --dy: 8px; }
.mira-mini .c2 { right: -14px; top: -14px; border-right-width: 4px; border-top-width: 4px; border-top-right-radius: 12px; --dx: -8px; --dy: 8px; }
.mira-mini .c3 { left: -14px; bottom: -14px; border-left-width: 4px; border-bottom-width: 4px; border-bottom-left-radius: 12px; --dx: 8px; --dy: -8px; }
.mira-mini .c4 { right: -14px; bottom: -14px; border-right-width: 4px; border-bottom-width: 4px; border-bottom-right-radius: 12px; --dx: -8px; --dy: -8px; }
@keyframes fecha { 0% { transform: translate(calc(var(--dx) * -1.5), calc(var(--dy) * -1.5)); } 14%, 92% { transform: translate(var(--dx), var(--dy)); } 100% { transform: translate(calc(var(--dx) * -1.5), calc(var(--dy) * -1.5)); } }
.scan { position: absolute; left: 4px; right: 4px; height: 3px; border-radius: 2px; background: var(--lima); box-shadow: 0 0 0 3px rgba(214,255,102,.35); animation: scan 6s ease-in-out infinite; }
@keyframes scan { 0%, 14% { top: 6px; opacity: 0; } 16% { opacity: 1; } 34% { top: 152px; opacity: 1; } 36%, 100% { top: 152px; opacity: 0; } }
.pm { position: absolute; white-space: nowrap; font-size: 11px; font-weight: 600; background: #fff; padding: 4px 9px; border-radius: 10px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.5); opacity: 0; animation: pino 6s cubic-bezier(.16,1,.3,1) infinite; }
.pm1 { left: 6px; top: 58px; animation-delay: 0s; } .pm2 { right: 0; top: 24px; animation-delay: .35s; } .pm3 { left: 22px; bottom: 26px; animation-delay: .7s; }
@keyframes pino { 0%, 38% { opacity: 0; transform: translateY(6px) scale(.8); } 46%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.total-mini { white-space: nowrap; font-size: 13px; font-weight: 500; background: var(--vinho); color: #fff; padding: 6px 12px; border-radius: 999px; opacity: 0; animation: total 6s cubic-bezier(.16,1,.3,1) infinite; }
.total-mini b { color: var(--lima); }
@keyframes total { 0%, 52% { opacity: 0; transform: translate(-50%, 8px); } 62%, 92% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
.total-mini b { font-weight: 600; }
/* passo 3: corpo 3D antes e agora com a divisória, e o peso que cai */
.p3 .p-arte { background: radial-gradient(circle at 50% 40%, var(--vinho2), #2A0819 75%); }
.mini-3d { position: absolute; inset: 0; --x: 50%; animation: divisa 6s ease-in-out infinite; }
@property --x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@keyframes divisa { 0%, 100% { --x: 78%; } 50% { --x: 22%; } }
.mini-3d img { position: absolute; left: 50%; top: -2px; height: 252px; width: auto; max-width: none; transform: translateX(-50%); }
.m-agora { clip-path: inset(0 0 0 var(--x)); }
.m-antes { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.m-linha { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: rgba(255,255,255,.85); }
.m-linha b { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff; color: var(--vinho); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.m-a, .m-b { position: absolute; top: 12px; white-space: nowrap; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.m-a { left: 12px; background: rgba(255,255,255,.16); color: #fff; } .m-b { right: 12px; background: var(--lima); color: var(--vinho); }
.m-peso { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; align-items: baseline; gap: 3px; color: #fff; font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.m-peso small { font-size: 13px; color: rgba(255,255,255,.7); }
.m-peso span { display: inline-block; }
.kg1 { animation: kg1 6s ease-in-out infinite; } .kg2 { position: absolute; animation: kg2 6s ease-in-out infinite; }
@keyframes kg1 { 0%, 30%, 100% { opacity: 1; } 45%, 85% { opacity: 0; } }
@keyframes kg2 { 0%, 30%, 100% { opacity: 0; } 45%, 85% { opacity: 1; } }
@media (max-width: 900px) { .passos-lista { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sel, .canetas .ponto, .meta-pronta, .mira-mini .c, .scan, .pm, .total-mini, .mini-3d, .kg1, .kg2 { animation: none; } .sel { transform: translateY(47px); } .meta-pronta, .pm, .total-mini { opacity: 1; } .scan { display: none; } .kg1 { opacity: 0; } }

/* bento */
.recursos { max-width: 1200px; margin: 0 auto; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 310px; gap: 14px; }
.b { position: relative; overflow: hidden; border-radius: var(--raio); padding: 26px; background: #fff; }
.b h3 { font-size: 26px; line-height: 1.12; letter-spacing: -.03em; font-weight: 500; margin-top: 12px; }
.b p { font-size: 15px; color: var(--suave); margin-top: 8px; max-width: 300px; }
.tag { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--creme); }
.tag.claro { background: rgba(255,255,255,.14); color: #fff; }
.b-tela { position: absolute; width: 230px; aspect-ratio: 390/844; border-radius: 30px; padding: 7px; background: #1d0812; box-shadow: 0 30px 60px -24px rgba(61,13,37,.5); }
.b-tela video { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.b-prato { grid-column: span 2; grid-row: span 2; background: var(--lilas); }
.b-prato .b-texto { max-width: 440px; position: relative; z-index: 2; }
.b-prato h3 { font-size: clamp(34px, 3.6vw, 46px); }
.b-prato .b-tela { width: 270px; left: 50%; margin-left: -135px; top: 228px; bottom: auto; }
.b-dose { grid-column: span 2; background: #FFF5D6; }
.b-dose .b-tela { right: 26px; top: 26px; width: 200px; }
.b-dose .b-texto, .b-peso .b-texto { max-width: 52%; }
.b-peso { grid-column: span 2; background: #EAF5D9; }
.b-peso .b-tela { right: 26px; top: 26px; width: 200px; }
.b-corpo { grid-column: span 2; background: radial-gradient(circle at 75% 45%, var(--vinho2), #2A0819 70%); color: #fff; }
.b-corpo p { color: rgba(255,255,255,.7); max-width: 230px; }
.b-corpo .b-texto { position: relative; z-index: 2; max-width: 250px; }
/* antes e agora: os dois corpos no mesmo lugar, a divisória passa devagar */
.comparar { position: absolute; right: 0; top: 0; bottom: 0; width: 56%; overflow: hidden; --x: 50%; }
.comparar img { position: absolute; left: 50%; top: -6%; height: 118%; width: auto; max-width: none; transform: translateX(-50%); }
.comparar .c-agora { clip-path: inset(0 0 0 var(--x)); }
.comparar .c-antes { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.divisa { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: rgba(255,255,255,.85); }
.divisa b { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: #fff; color: var(--vinho); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; }
.rot-a, .rot-b { position: absolute; top: 22px; white-space: nowrap; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.rot-a { left: 14px; background: rgba(255,255,255,.14); color: #fff; }
.rot-b { right: 14px; background: var(--lima); color: var(--vinho); }
@media (max-width: 960px) { .b-corpo { min-height: 340px; } }
@media (max-width: 560px) { .comparar { position: relative; width: auto; height: 380px; margin: 18px -26px -26px; } }
.b-agua { background: #E3F1FB; }
/* código de barras: card largo, o feixe varre o código e o produto aparece ao lado */
.b-codigo { grid-column: span 4; background: #FFF1E6; display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: center; }
.b-codigo .b-texto { max-width: 420px; }
.codigo-palco { display: flex; align-items: center; justify-content: center; gap: 18px; }
.barras { position: relative; display: flex; gap: 4px; align-items: stretch; height: 150px; padding: 18px 20px 30px; background: #fff; border-radius: 20px; box-shadow: 0 20px 40px -24px rgba(61,13,37,.4); overflow: hidden; }
.barras i { width: 3px; background: var(--vinho); }
.barras i:nth-child(3n) { width: 6px; } .barras i:nth-child(4n+1) { width: 2px; } .barras i:nth-child(5n) { width: 5px; }
.barras small { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 11px; letter-spacing: .12em; color: var(--suave); }
.feixe { position: absolute; left: 10px; right: 10px; height: 3px; top: 20px; border-radius: 2px; background: var(--lima); box-shadow: 0 0 0 3px rgba(214,255,102,.35); animation: varre 2.8s ease-in-out infinite alternate; }
@keyframes varre { to { top: 112px; } }
.produto { background: #fff; border-radius: 22px; padding: 18px 20px; display: grid; gap: 10px; min-width: 0; box-shadow: 0 20px 40px -24px rgba(61,13,37,.4); }
.p-marca { font-size: 13px; color: var(--suave); }
.p-prot { font-size: 34px; font-weight: 500; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.p-prot span { font-size: 14px; font-weight: 500; color: var(--suave); letter-spacing: 0; }
.lupa-anvisa { display: inline-flex; align-items: center; gap: 6px; justify-self: start; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; background: #111; padding: 7px 10px; border-radius: 6px; border: 2px solid #111; outline: 1.5px solid #fff; outline-offset: -4px; }
.lupa-anvisa svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.alerg { justify-self: start; white-space: nowrap; font-size: 12px; font-weight: 600; background: var(--creme); padding: 5px 10px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .feixe { animation: none; top: 66px; } }
@media (max-width: 960px) { .b-codigo { grid-column: span 2; grid-template-columns: 1fr; } }
@media (max-width: 560px) { .b-codigo { grid-column: span 1; } .codigo-palco { flex-direction: column; align-items: stretch; } .barras { justify-content: center; } }
.agua-num { margin-top: 26px; font-size: 15px; color: var(--suave); }
.agua-num b { font-size: 46px; font-weight: 300; letter-spacing: -.04em; color: var(--vinho); margin-right: 4px; }
.agua-trilho { height: 14px; border-radius: 7px; background: #fff; overflow: hidden; margin-top: 10px; }
.agua-trilho i { display: block; height: 100%; width: 0; border-radius: 7px; background: var(--agua); transition: width 1.8s cubic-bezier(.16,1,.3,1) .2s; }
.b-agua.visto .agua-trilho i { width: 90%; }
.b-rel { background: #fff; }
.b-rel h3, .b-agua h3 { max-width: 200px; }
.pdf { position: absolute; right: 22px; bottom: -60px; width: 120px; height: 150px; border-radius: 16px; background: var(--creme); padding: 20px 16px; transform: rotate(6deg); }
.pdf i { display: block; height: 8px; border-radius: 4px; background: var(--linha); margin-bottom: 10px; }
.pdf i:nth-child(2) { width: 70%; } .pdf i:nth-child(3) { width: 85%; }
.pdf span { position: absolute; left: 16px; bottom: 26px; font-size: 12px; font-weight: 600; background: var(--vinho); color: #fff; padding: 4px 9px; border-radius: 8px; }
@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .b { min-height: 300px; }
  .b-prato { grid-column: span 2; min-height: 620px; }
  .b-dose, .b-peso, .b-corpo { grid-column: span 2; min-height: 340px; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .b-prato, .b-dose, .b-peso, .b-corpo { grid-column: span 1; }
  .b-dose .b-texto, .b-peso .b-texto { max-width: 100%; }
  .b-dose, .b-peso { min-height: 560px; }
  .b-dose .b-tela, .b-peso .b-tela { left: 50%; right: auto; margin-left: -110px; width: 220px; top: auto; bottom: -110px; }
  .b-corpo { min-height: 420px; }
}

/* ia: a única seção escura */
.ia { max-width: 1200px; margin: clamp(90px, 12vw, 140px) auto 0; padding: clamp(40px, 6vw, 72px); border-radius: 40px; background: radial-gradient(circle at 80% 30%, #5A1A3F, var(--vinho) 55%, #24070F); color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; overflow: hidden; }
.ia .apoio { color: rgba(255,255,255,.72); margin-top: 18px; }
.ia h2 em { color: var(--lilas); }
.ia-lista { list-style: none; margin-top: 26px; display: grid; gap: 10px; }
.ia-lista li { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.ia-lista li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lima); }
.ia-nota { font-size: 14px; color: rgba(255,255,255,.55); margin-top: 22px; }
.ia-palco { position: relative; display: flex; justify-content: center; }
/* a Silu viva: esfera de pérola com luzes que derivam devagar (como no app) */
.ia-palco { min-height: 560px; align-items: center; }
.orbe { position: absolute; left: -6%; top: 6%; width: clamp(220px, 26vw, 320px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; z-index: 0;
  background: radial-gradient(circle at 35% 30%, #FFF6FB 0%, #F4CDE4 30%, #D9A1C7 58%, #9E4E86 86%, #6A2650 100%);
  box-shadow: inset -18px -24px 50px rgba(61,13,37,.35), 0 40px 80px -30px rgba(0,0,0,.5);
  animation: respira 8s ease-in-out infinite; }
.orbe i { position: absolute; border-radius: 50%; filter: blur(28px); }
.orbe .o1 { width: 60%; height: 52%; left: 40%; top: 42%; background: rgba(232,120,180,.75); animation: deriva1 13s ease-in-out infinite alternate; }
.orbe .o2 { width: 54%; height: 46%; left: 6%; top: 46%; background: rgba(170,130,230,.6); animation: deriva2 17s ease-in-out infinite alternate; }
.orbe .o3 { width: 48%; height: 36%; left: 30%; top: 8%; background: rgba(255,255,255,.75); animation: deriva3 11s ease-in-out infinite alternate; }
.orbe .brilho { width: 26%; height: 16%; left: 20%; top: 16%; background: rgba(255,255,255,.95); filter: blur(10px); }
@keyframes respira { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.03); } }
@keyframes deriva1 { to { transform: translate(-38%, -30%); } }
@keyframes deriva2 { to { transform: translate(40%, -22%); } }
@keyframes deriva3 { to { transform: translate(-20%, 46%); } }
.fala { position: absolute; z-index: 3; white-space: nowrap; font-size: 15px; font-weight: 500; padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: #fff; color: var(--vinho); box-shadow: 0 20px 40px -18px rgba(0,0,0,.45); opacity: 0; animation: fala 12s cubic-bezier(.16,1,.3,1) infinite; }
.fa1 { left: 2%; top: 46%; background: var(--lima); }
.fa2 { right: 0; top: 18%; animation-delay: 4s; }
.fa3 { right: 4%; bottom: 14%; animation-delay: 8s; background: var(--lilas); }
@keyframes fala { 0% { opacity: 0; transform: translateY(12px) scale(.96); } 6%, 30% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-8px); } }
.ia-palco .celular { z-index: 2; }
@media (max-width: 900px) { .orbe { left: 0; top: 0; } .fa1 { left: 0; } }
@media (prefers-reduced-motion: reduce) { .orbe, .orbe i { animation: none; } .fala { animation: none; opacity: 1; } }
@media (max-width: 900px) { .ia { grid-template-columns: 1fr; } }

/* privacidade: quatro cartões, cada um com uma peça do app */
.privacidade { max-width: 1200px; margin: clamp(80px, 10vw, 130px) auto; }
.priv-cabeca .apoio { margin-top: 14px; }
.priv-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pc { border-radius: var(--raio); padding: 22px 22px 26px; background: #fff; display: flex; flex-direction: column; }
.pc h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin-top: 18px; }
.pc p { font-size: 15px; color: var(--suave); margin-top: 6px; }
.pc-arte { height: 150px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--creme); }
.pc-arte svg { width: 110px; height: 110px; }
.pc-arte .tr { fill: none; stroke: var(--vinho); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pc-arte .tr.lima { stroke: var(--lima); }
.pc-arte .pr { fill: var(--vinho); }
.pc-arte .cl { fill: var(--lima); }
.pc-foto .pc-arte { background: var(--lilas); }
.pc-face .pc-arte { background: var(--vinho); }
.pc-anuncio .pc-arte { background: #EAF5D9; }
.zero { flex-direction: column; gap: 0; }
.zero b { font-size: 84px; font-weight: 300; letter-spacing: -.05em; line-height: .9; }
.zero span { font-size: 14px; font-weight: 600; color: var(--suave); }
.pc-apagar .pc-arte { background: #FDECEA; }
.botao-apagar { white-space: nowrap; font-size: 15px; font-weight: 600; color: #B4372F; background: #fff; padding: 12px 18px; border-radius: 16px; box-shadow: 0 10px 24px -14px rgba(180,55,47,.6); }
@media (max-width: 980px) { .priv-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .priv-grade { grid-template-columns: 1fr; } }

/* planos: grátis estreito; PRO largo com os dois preços do mesmo tamanho */
.planos { max-width: 1100px; margin: 0 auto; }
.planos .cabeca-secao { text-align: center; }
.cartoes-plano { display: grid; grid-template-columns: 1fr 1.75fr; gap: 16px; align-items: stretch; }
.plano { position: relative; background: #fff; border-radius: var(--raio); padding: 32px; display: flex; flex-direction: column; }
.plano h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.plano-sub { font-size: 15px; color: var(--suave); margin-top: 4px; }
.plano-pro .plano-sub { color: rgba(255,255,255,.65); }
.preco { font-size: 44px; font-weight: 300; letter-spacing: -.04em; line-height: 1.1; margin-top: 18px; white-space: nowrap; }
.plano ul { list-style: none; margin: 22px 0 28px; display: grid; gap: 11px; }
.plano li { display: flex; gap: 10px; align-items: flex-start; }
.plano li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D0D25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat; }
.plano .botao { margin-top: auto; width: 100%; }
.botao-contorno { border: 1.5px solid var(--vinho); color: var(--vinho); }
.plano-pro { background: var(--vinho); color: #fff; }
.plano-pro li::before { background-color: var(--lima); }
.precos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.opcao { border-radius: 22px; padding: 18px 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; }
.opcao .preco { margin-top: 8px; font-size: 38px; }
.op-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.op-por { font-size: 14px; color: rgba(255,255,255,.65); }
.op-nota { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.opcao-anual { background: rgba(214,255,102,.1); border-color: rgba(214,255,102,.55); }
.opcao-anual .op-nota { color: var(--lima); }
.selo-anual { font-style: normal; white-space: nowrap; font-size: 11px; font-weight: 600; background: var(--lima); color: var(--vinho); padding: 3px 9px; border-radius: 999px; }
.ul-pro { grid-template-columns: 1fr 1fr; column-gap: 20px; }
@media (max-width: 860px) { .cartoes-plano { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .precos, .ul-pro { grid-template-columns: 1fr; } }

/* dúvidas */
.duvidas { max-width: 820px; margin: clamp(80px, 10vw, 120px) auto; }
.duvidas h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 22px; }
details { border-bottom: 1px solid var(--linha); padding: 20px 0; }
summary { cursor: pointer; list-style: none; font-size: 19px; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 300; font-size: 26px; line-height: 1; transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--suave); margin-top: 10px; max-width: 640px; }

/* final */
.final { max-width: 1200px; margin: 0 auto 60px; padding: clamp(56px, 8vw, 90px) 24px; border-radius: 40px; background: var(--lilas); text-align: center; }
.final h2 { margin: 0 auto; max-width: 760px; }
.icone-final { width: 96px; height: 96px; border-radius: 24px; margin: 0 auto 26px; box-shadow: 0 24px 50px -20px rgba(61,13,37,.5); }
@media (max-width: 1240px) { .ia, .final { margin-left: 20px; margin-right: 20px; } }

/* rodapé */
.rodape { max-width: 1200px; margin: 0 auto; padding: 30px 20px 50px; display: grid; gap: 16px; justify-items: center; text-align: center; color: var(--suave); font-size: 14px; }
.rodape nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.rodape nav a { color: var(--vinho); font-weight: 500; }

/* entrada ao rolar: sobe um pouco, uma vez, com freio */
.entra { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.entra.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .entra { opacity: 1; transform: none; transition: none; } .flutua { animation: none; } }

/* celular: o app é o protagonista. Sai o que repete a tela (dose e antes e agora),
   fica um cartão só, pequeno, encostado no canto, e o selo menor */
@media (max-width: 600px) {
  .hero-palco { height: auto; padding: 34px 0 30px; justify-content: center; }
  .painel { inset: 70px 6% 0 6%; border-radius: 34px; }
  .celular { width: 64vw; max-width: 270px; }
  .f2, .f3 { display: none; }
  .f1 { top: auto; bottom: 8%; right: 0; padding: 8px 14px 8px 8px; gap: 10px; }
  .mini-prato { width: 46px; height: 46px; border-radius: 12px; }
  .f1 strong { font-size: 22px; }
  .flutua .rot { font-size: 11px; }
  .flutua .sub { font-size: 12px; }
  .selo-especialistas { width: 92px; left: 0; top: 10px; }
}