/* Studio Donna Pestana · a partir do template 08 Salão lúdico (ref. Fauna Robotics)
   creme pêssego, cards bege, cantos muito redondos, formas chapadas; acento no laranja da marca */
:root { --r: 32px; --r-lg: 56px; --g: 16px; --pad: 20px; --sp: 120px; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-size: 15px; letter-spacing: -.005em; }

/* sections viram altura automática com respiro */
.sec { height: auto; min-height: 0; overflow: clip; background: var(--bg); padding: var(--sp) 0; }
.box-in { max-width: 1440px; margin: 0 auto; padding: 0 15px; }

/* tipografia */
.t-xl, .t-lg, .t-md, .t-sm { font-family: var(--f-titulo); font-weight: 500; color: var(--fg); letter-spacing: -.035em; }
.t-xl { font-size: 66px; line-height: 1.04; }
.t-lg { font-size: 52px; line-height: 1.06; }
.t-md { font-size: 40px; line-height: 1.08; letter-spacing: -.03em; }
.t-sm { font-size: 23px; line-height: 1.2; letter-spacing: -.02em; }
.txt { color: var(--muted); font-size: 15px; line-height: 1.6; }
.c { text-align: center; }
em { font-style: normal; color: var(--acc); }
h1, h2, h3 { text-wrap: balance; }

/* ===== NAV fixo ===== */
.topo { position: fixed; z-index: 50; top: 24px; left: 0; right: 0; padding: 0 30px; pointer-events: none; transition: top .5s var(--ease); }
.topo-bar { pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1380px; margin: 0 auto; padding: 0 0 0 8px; border-radius: 26px; transition: max-width .6s var(--ease), padding .5s var(--ease), background-color .4s, box-shadow .4s; }
.marca { display: inline-flex; align-items: center; gap: 12px; }
.marca img { width: 42px; height: 42px; object-fit: contain; }
.marca span { display: flex; flex-direction: column; font-weight: 600; font-size: 18px; line-height: 1.05; letter-spacing: -.03em; white-space: nowrap; }
.marca small { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.topo-dir { display: flex; gap: 4px; align-items: center; }
.pills { display: flex; align-items: center; gap: 2px; height: 58px; padding: 0 12px; background: var(--card2); border-radius: 20px; transition: background-color .4s; }
.pills a { padding: 8px 14px; font-size: 15px; font-weight: 500; border-radius: 12px; transition: color .2s; }
.pills a.on { color: var(--acc); }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 26px; border-radius: 20px; background: var(--acc); color: var(--acc-fg); font-size: 15px; font-weight: 500; white-space: nowrap; transition: transform .25s var(--ease), background-color .2s; }
.cta:active { transform: scale(.97); }
.cta .zap { width: 20px; height: 20px; }
.menu-bt { display: none; }
.menu-painel { display: none; }
/* rolou: encolhe até a largura do conteúdo e vira vidro */
.topo.rolou { top: 12px; }
.topo.rolou .topo-bar { max-width: 1180px; padding: 8px 8px 8px 16px; background: rgba(251,239,226,.82); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -18px rgba(36,20,12,.35); }
.topo.rolou .pills { height: 50px; background: transparent; }
.topo.rolou .cta { min-height: 50px; border-radius: 18px; }

@media (hover:hover) and (pointer:fine) {
  .pills a:hover { color: var(--acc); }
  .cta:hover { background: #c94b09; }
  .btn-azul:hover { background: #276d91; }
  .btn-o:hover { background: rgba(36,20,12,.05); }
  .lnk:hover svg { transform: translateX(4px); }
  .thumbs button:hover { transform: translateY(-2px); }
}

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 0 30px; border-radius: 999px; font-size: 16px; font-weight: 500; text-align: center; transition: transform .25s var(--ease), background-color .2s; }
.btn:active { transform: scale(.97); }
.btn-azul { background: var(--azul); color: #fff; }
.btn-o { box-shadow: inset 0 0 0 1.5px rgba(36,20,12,.22); }
.lnk { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.lnk svg, .btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }

/* tags coloridas */
.tag { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; line-height: 1.2; color: #fff; background: var(--verde); }
.tag.mostarda { background: var(--mostarda); color: var(--fg); }
.tag.rosa { background: var(--rosa); color: var(--fg); }
.tag.azul { background: var(--azul); }
.tag.coral { background: var(--acc); }
.card { background: var(--card); border-radius: var(--r); }

/* formas geométricas (cor via --c) */
.sh { --c: var(--bege); display: block; background: var(--c); }
.sh-arch { border-radius: 999px 999px 0 0; }
.sh-bowl { border-radius: 0 0 999px 999px; }
.sh-dot { border-radius: 50%; }
.sh-q { border-radius: 100% 0 0 0; }
.ic { display: block; width: 26px; height: 26px; margin: 0 auto; }

/* chip aberto/fechado */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(46,158,110,.14); color: #1f7a53; font-size: 13px; font-weight: 600; }
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulso 1.8s ease-in-out infinite; }
.chip.is-fechado { background: rgba(226,86,12,.12); color: #b8440a; }
@keyframes pulso { 50% { opacity: .3; } }

/* ===== 01 HERO ===== */
.hero { padding: 152px 0 0; }
.hero h1 { max-width: 980px; margin: 0 auto; }
.hero-sub { max-width: 560px; margin: 22px auto 0; font-size: 18px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.hero-acoes { display: none; }
.palco { position: relative; margin-top: 64px; }
.stage { position: relative; height: clamp(440px, calc(100vh - 400px), 640px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: translateY(60px); opacity: 0; transition: transform 1.1s var(--ease) .25s, opacity .8s var(--ease) .25s; }
.sec.in .stage { transform: none; opacity: 1; }
.pn { position: relative; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--card2); }
.pn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--ease), transform 7s linear; }
.pn img.on { opacity: 1; transform: scale(1); }
.selo { position: absolute; left: 30px; bottom: 34px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 12px; background: var(--bg); border-radius: 22px; }
.selo b { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--mostarda); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.selo p { font-size: 14px; line-height: 1.3; color: var(--muted); }
.selo p strong { display: block; color: var(--fg); font-weight: 500; font-size: 15px; }
.chip-hero { position: absolute; right: 30px; bottom: 34px; z-index: 3; height: 40px; padding: 0 16px; background: var(--bg); }
.chip-hero.is-fechado { background: var(--bg); }
.toys { position: absolute; z-index: 4; top: -40px; left: 0; right: 0; height: 90px; pointer-events: none; }
.toys .sh { position: absolute; }
.t1 { --c: var(--acc); left: 104px; top: 0; width: 84px; height: 42px; animation: bob 5s var(--ease) infinite alternate; }
.t2 { --c: var(--rosa); left: 200px; top: 14px; width: 28px; height: 28px; animation: bob 4s var(--ease) infinite alternate-reverse; }
.t3 { --c: var(--mostarda); right: 118px; top: -14px; width: 76px; height: 76px; animation: spin 14s linear infinite; }
.t4 { --c: var(--azul); right: 206px; top: 6px; width: 44px; height: 44px; animation: bob 4.6s var(--ease) infinite alternate; }
@keyframes bob { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.toys .wrapS { position: absolute; inset: 0; opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease) .7s, transform 1s var(--ease) .7s; }
.sec.in .toys .wrapS { opacity: 1; transform: none; }

/* ===== 02 SERVIÇOS ===== */
.serv h2 { margin-bottom: 72px; }
.serv .row { height: 492px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.serv .card { position: relative; overflow: hidden; padding: 44px 24px 0; text-align: center; }
.serv .card .ic { margin-bottom: 18px; }
.serv .card h3 { margin-bottom: 6px; }
.serv .card .tag { margin-top: 16px; }
.pal { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 54px); gap: 26px 34px; }
.pal .sh { width: 54px; height: 54px; transition: background-color .7s var(--ease), transform .7s var(--ease); }
.pal .sh.lit { transform: rotate(-90deg) scale(1.04); }
.pal .sh.sq { border-radius: 10px; }
.arcf { position: absolute; left: 50%; bottom: -2px; width: 300px; height: 272px; transform: translateX(-50%); border-radius: 999px 999px 0 0; overflow: hidden; }
.arcf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.08); animation: kb 12s var(--ease) infinite alternate; }
@keyframes kb { to { transform: scale(1.18) translateX(-10px); } }
.m1 { --c: var(--lima); position: absolute; left: calc(50% - 205px); bottom: 40px; width: 54px; height: 54px; border-radius: 0 999px 999px 0; }
.m2 { --c: var(--mostarda); position: absolute; right: calc(50% - 205px); bottom: 150px; width: 36px; height: 36px; border-radius: 50%; }
.card.c3 { padding-top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bowl { position: relative; width: 150px; height: 118px; margin: 38px 0 50px; }
.bowl .b { position: absolute; left: 0; top: 0; width: 150px; height: 78px; --c: var(--acc); border-radius: 6px 6px 999px 999px; }
.bowl .d { position: absolute; left: 53px; top: 82px; width: 44px; height: 44px; --c: var(--rosa); animation: hop 2.4s var(--ease) infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(16px); } 60% { transform: translateY(10px); } }
.c3 .t-md { max-width: 360px; }
.c3 .txt { margin-top: 14px; }

/* ===== 03 DIFERENCIAIS (bento) ===== */
.bento { padding-top: 0; }
.bento .grid { height: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.bento .col { display: flex; flex-direction: column; gap: 15px; min-height: 0; }
.bento .card { position: relative; overflow: hidden; padding: 46px 44px 0; text-align: center; }
.bento .card .ic { margin-bottom: 18px; }
.bento .card h3 { margin-bottom: 14px; }
.bento .card .txt { max-width: 340px; margin: 0 auto; }
.k1, .k3 { flex: 1; }
/* o diferencial de verdade ganha o laranja da marca */
.k1 { background: var(--acc); }
.k1 .t-md { color: #fff; font-size: 38px; max-width: 360px; margin: 0 auto; }
.k1 .txt { color: rgba(255,255,255,.88); font-size: 16px; }
.tag.dif { background: var(--bg); color: var(--acc); margin-bottom: 20px; }
.big { position: absolute; left: 36px; right: 36px; bottom: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.big > * { aspect-ratio: 1; transition: transform 1s var(--ease); }
.big svg { width: 100%; height: 100%; display: block; }
.k2 { flex: 0 0 auto; padding-bottom: 26px !important; }
.chat { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; height: 150px; justify-content: flex-end; overflow: hidden; padding: 16px 18px; border-radius: 22px; background: var(--card2); text-align: left; -webkit-mask: linear-gradient(to bottom, transparent 0, #000 34px); mask: linear-gradient(to bottom, transparent 0, #000 34px); }
.msg { flex: none; max-width: 80%; padding: 8px 13px; border-radius: 16px; font-size: 14px; line-height: 1.35; background: var(--bg); align-self: flex-start; transform-origin: left bottom; animation: pop .5s var(--ease) both; }
.msg.eu { align-self: flex-end; background: var(--verde); color: #fff; transform-origin: right bottom; }
.msg.dig { color: var(--muted); letter-spacing: .2em; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.94); } }
.ph { position: relative; flex: 1; border-radius: var(--r); overflow: hidden; min-height: 0; }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.ph .pill { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 10px 20px; border-radius: 999px; background: rgba(36,20,12,.55); color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.arch { position: absolute; left: 0; right: 0; bottom: 0; height: 420px; border-radius: 999px 999px 0 0; overflow: hidden; }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }

/* ===== 04 COMO É CADA SERVIÇO ===== */
.abas { padding-top: 0; }
.abas .box { position: relative; height: 760px; border-radius: var(--r); overflow: hidden; background: var(--card2); }
.abas .bgs { position: absolute; top: 0; bottom: 0; left: 470px; right: 0; overflow: hidden; }
.abas .bgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .9s var(--ease), transform 6s linear; }
.abas .bgs img.on { opacity: 1; transform: scale(1); }
.abas .bgs img:nth-child(1) { object-position: 50% 30%; }
.abas .bgs img:nth-child(2) { object-position: 50% 55%; }
.abas .bgs img:nth-child(3) { object-position: 50% 45%; }
.abas .bgs img:nth-child(4) { object-position: 50% 55%; }
.painel { position: absolute; left: 20px; top: 20px; bottom: 20px; width: 430px; padding: 28px 22px 22px; border-radius: 26px; background: var(--card); display: flex; flex-direction: column; }
.painel .mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 18px; }
.painel .eyebrow { font-size: 14px; color: var(--muted); font-weight: 500; margin-bottom: 26px; }
.icone { position: relative; width: 78px; height: 78px; margin: 0 0 30px; }
.icone .q { position: absolute; inset: 0; border-radius: 0 999px 0 0; background: var(--tc, var(--acc)); transition: background-color .6s var(--ease); }
.icone .p { position: absolute; left: 34px; top: 46px; width: 22px; height: 22px; border-radius: 50%; background: var(--rosa); transition: transform .6s var(--ease); }
.troca { transition: opacity .35s var(--ease), transform .5s var(--ease); }
.troca.out { opacity: 0; transform: translateY(8px); }
.painel h2 { margin-bottom: 16px; }
.painel .txt { max-width: 330px; margin: 0 auto; }
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tabs button { min-height: 54px; border-radius: 999px; background: var(--card2); color: var(--muted); font-size: 16px; font-weight: 500; transition: background-color .4s var(--ease), color .3s, transform .2s var(--ease); }
.tabs button.on { background: var(--tc); color: #fff; }
.tabs button:active { transform: scale(.98); }
.prog { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; padding: 16px 10px; border-radius: 99px; background: rgba(251,239,226,.86); }
.prog i { position: relative; width: 4px; height: 34px; border-radius: 4px; background: rgba(36,20,12,.18); overflow: hidden; }
.prog i b { position: absolute; inset: 0; background: var(--fg); transform: scaleY(0); transform-origin: top; }
.prog i.done b { transform: scaleY(1); }
.prog i.on b { animation: fill var(--t, 5s) linear forwards; }
@keyframes fill { to { transform: scaleY(1); } }

/* ===== 05 FICHA ===== */
.ficha-grid { display: grid; grid-template-columns: 700px 1fr; gap: 15px; min-height: 700px; }
.ficha .esq { padding: 40px 34px 22px; display: flex; flex-direction: column; }
.ficha h2 { margin-bottom: 24px; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cats button { min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--card2); font-size: 16px; font-weight: 500; transition: background-color .3s, color .3s; }
.cats button.on { background: var(--fg); color: var(--bg); }
.tab { flex: 1; min-height: 0; transition: opacity .3s var(--ease), transform .45s var(--ease); }
.tab.out { opacity: 0; transform: translateY(8px); }
.grp { display: grid; grid-template-columns: 190px 1fr; border-top: 1px solid var(--line); }
.grp:first-child { border-top: 0; }
.grp h4 { font-size: 16px; font-weight: 500; padding-top: 12px; }
.grp ul li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; font-size: 16px; color: var(--muted); border-bottom: 1px solid var(--line); }
.grp ul li:last-child { border-bottom: 0; }
.grp ul li span:first-child { flex: none; }
.grp ul li span:last-child { color: var(--fg); text-align: right; }
.grp ul li.preco span:last-child { color: var(--acc); font-weight: 600; }
.acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px -12px 0; }
.acoes .btn { min-height: 72px; }
.ficha-grid > * { min-width: 0; }
.ficha-dir { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.dir { position: relative; flex: 1; min-height: 480px; overflow: hidden; }
.dir .fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease), transform 1.2s var(--ease); transform: scale(1.04); }
.dir .fotos img.on { opacity: 1; transform: none; }
.cores { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 12px; padding: 13px 18px; border-radius: 999px; background: rgba(241,229,214,.92); }
.cores button { width: 28px; height: 28px; border-radius: 50%; background: var(--sw); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.cores button.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--fg); }
.cores button:active { transform: scale(.92); }
.selo2 { position: absolute; right: 20px; top: 20px; padding: 9px 16px; border-radius: 999px; background: rgba(241,229,214,.92); font-size: 14px; font-weight: 500; }
.thumbs { height: 110px; padding: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.thumbs button { position: relative; border-radius: 18px; overflow: hidden; background: var(--card2); transition: transform .3s var(--ease); }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button::after { content: ''; position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 0 var(--fg); transition: box-shadow .3s var(--ease); }
.thumbs button.on::after { box-shadow: inset 0 0 0 3px var(--fg); }
.thumbs button:active { transform: scale(.96); }
.thumbs .vazio { border-radius: 18px; background: var(--card2); }
.thumbs .vazio:nth-child(odd) { background: var(--bege); }

/* ===== 06 GALERIA ===== */
.gal h2 { font-size: 104px; letter-spacing: -.045em; line-height: 1; }
.gal .sub { margin: 22px 0 48px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 16px; color: var(--muted); padding: 0 20px; }
.gal .sub a { color: var(--fg); font-weight: 500; box-shadow: inset 0 -1.5px 0 currentColor; }
.lane { height: 296px; overflow: hidden; }
.l2 { margin-top: 18px; }
.trk { display: flex; gap: 14px; width: max-content; will-change: transform; }
.l1 .trk { animation: esq 60s linear infinite; }
.l2 .trk { animation: dir 70s linear infinite; }
@keyframes esq { to { transform: translateX(-50%); } }
@keyframes dir { from { transform: translateX(-50%); } to { transform: none; } }
.tile { flex: 0 0 auto; width: 232px; height: 296px; border-radius: 30px; overflow: hidden; position: relative; background: var(--card); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile.w { width: 296px; }
.tile .sh { position: absolute; }
.fx1 { background: var(--acc); }
.fx1 .a { --c: var(--bg); left: 46px; right: 46px; bottom: 0; height: 160px; border-radius: 999px 999px 0 0; }
.fx1 .b { --c: var(--mostarda); left: 50%; top: 52px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; }
.fx2 { background: var(--rosa); }
.fx2 .a { --c: var(--acc); inset: 48px 48px auto auto; width: 136px; height: 136px; border-radius: 0 0 0 100%; }
.fx2 .b { --c: var(--bg); left: 40px; bottom: 40px; width: 70px; height: 70px; border-radius: 16px; }
.fx3 { background: var(--mostarda); }
.fx3 .a { left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px; border-radius: 50%; background: radial-gradient(circle, var(--mostarda) 0 30%, var(--fg) 30.5%); }
.fx4 { background: var(--azul); }
.fx4 .a { --c: var(--lima); left: 0; top: 60px; width: 130px; height: 176px; border-radius: 0 999px 999px 0; }
.fx4 .b { --c: var(--bg); right: 44px; bottom: 44px; width: 44px; height: 44px; border-radius: 50%; }
.fx .rot { animation: gira 9s var(--ease) infinite; }
@keyframes gira { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }

/* ===== 07 AVALIAÇÕES ===== */
.av h2 { max-width: 900px; margin: 0 auto; }
.nota { margin: 30px 0 56px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 16px; }
.nota b { display: grid; place-items: center; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--mostarda); color: var(--fg); font-weight: 600; font-size: 17px; }
.nota .st { display: flex; gap: 3px; }
.nota .st svg { width: 18px; height: 18px; fill: var(--acc); stroke: var(--acc); stroke-width: 2; stroke-linejoin: round; }
.par { max-width: 1170px; margin: 0 auto; min-height: 430px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.av .card { position: relative; padding: 50px 54px 46px; border-radius: 64px; display: flex; flex-direction: column; overflow: hidden; }
.av .card .top { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; padding-right: 60px; }
.av .card .top > span:not(.tag) { color: var(--muted); }
.av .card q { quotes: none; font-size: 30px; line-height: 1.22; letter-spacing: -.025em; font-weight: 500; max-width: 500px; margin-bottom: 36px; }
.av .card q.longo { font-size: 21px; line-height: 1.38; letter-spacing: -.015em; }
.av .card .quem { margin-top: auto; }
.av .card .quem p { font-weight: 500; font-size: 17px; }
.av .card .quem p small { display: block; font-weight: 400; color: var(--muted); font-size: 15px; }
.av .card .av-ic { position: absolute; right: 50px; top: 44px; width: 46px; height: 46px; }
.troca2 > * { transition: opacity .45s var(--ease), transform .6s var(--ease); }
.troca2.out > * { opacity: 0; transform: translateY(12px); }
.troca2.out > *:nth-child(2) { transition-delay: 60ms; }
.pg { margin-top: 42px; display: flex; justify-content: center; align-items: center; gap: 28px; }
.pg .dt { display: flex; gap: 6px; }
.pg .dt i { width: 8px; height: 8px; border-radius: 99px; background: rgba(36,20,12,.2); transition: width .5s var(--ease), background-color .3s; }
.pg .dt i.on { width: 28px; background: var(--fg); }

/* ===== 08 CONTATO E RODAPÉ ===== */
.ft { padding: 0 0 30px; }
.ft .box { border-radius: var(--r-lg); background: linear-gradient(to bottom, var(--card) 0%, var(--card) 45%, #F7EADC 100%); padding: 74px 80px 34px; }
.ft .top { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 40px; }
.ft-logo { width: 56px; height: 56px; object-fit: contain; margin-bottom: 22px; }
.ft .frase { font-size: 38px; max-width: 480px; }
.ft .sub { margin-top: 26px; }
.ft h5 { font-size: 15px; font-weight: 500; color: var(--muted); margin: 6px 0 24px; }
.ft ul li { font-size: 16px; font-weight: 500; margin-bottom: 15px; line-height: 1.35; }
.ft ul li small { display: block; font-weight: 400; color: var(--muted); font-size: 15px; }
.ft .chip { margin-bottom: 18px; }
.ft .chegar { margin-top: 26px; }
.ul { box-shadow: inset 0 -1.5px 0 currentColor; padding-bottom: 2px; }
.ft-baixo { margin-top: 110px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.word { display: flex; gap: 40px; }
.letra { display: grid; grid-template-columns: repeat(3, var(--u)); grid-template-rows: repeat(5, var(--u)); --u: 44px; }
.cel { background: var(--c); box-shadow: 0 0 0 .6px var(--c); opacity: 0; transform: translateY(26px) rotate(-30deg) scale(.9); transition: opacity .5s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--k) * 22ms + 300ms); }
.sec.in .cel { opacity: 1; transform: none; }
.cel.flip { animation: pula .9s var(--ease); }
@keyframes pula { 40% { transform: translateY(-14px) scale(.92); } 70% { transform: translateY(2px); } }
.dir2 { text-align: right; flex: none; }
.dir2 p { font-size: 15px; color: var(--muted); margin-bottom: 18px; max-width: 320px; margin-left: auto; }
.base { margin-top: 64px; display: flex; justify-content: space-between; gap: 20px; font-size: 15px; color: var(--muted); }
.base .r { display: flex; gap: 60px; }

/* WhatsApp flutuante: só no celular (mobile.css) */
.zap-flut { display: none; }

/* entrada das sections: .in vem do site.js ao entrar na tela */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 70ms + 80ms); }
.sec.in .rv, .topo .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stage, .toys .wrapS, .cel { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}