/* Layout: mobile-first. Identidade do Realeza dos Cachos: verde-floresta dos posts, terracota da logo, creme dos cartões e ouro das ondas.
   Hero: "Cores, curvas e ancestralidade." + a árvore da logo crescendo das raízes + pilha de cartões de resultado no estilo dos posts. */
:root {
  --verde: #1c3a31;
  --verde-2: #24493d;
  --verde-3: #132820;
  --terra: #bf672b;
  --terra-hover: #a65520;
  --terra-esc: #87452a;
  --terra-claro: #e8955c;
  --ouro: #d9a441;
  --creme: #f4ede4;
  --cartao: #e8e6df;
  --tinta: #1b2a24;
  --tinta-2: #56625c;
  --linha: rgba(27, 42, 36, .14);
  --linha-clara: rgba(244, 237, 228, .22);
  --creme-70: rgba(244, 237, 228, .74);

  --f-display: "Yeseva One", "Abril Fatface", Georgia, serif;
  --f-texto: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --e-in: cubic-bezier(.2, .7, .1, 1);
  --e-troca: cubic-bezier(.6, 0, .4, 1);
  --topo-h: 66px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--f-texto); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--verde); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--terra); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.wrap, .hero__in, .topo__in { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) { .wrap, .hero__in, .topo__in { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

.sec { padding-block: clamp(72px, 12vw, 132px); position: relative; }
.rotulo { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }
.rotulo--terra { color: var(--terra); }
.rotulo--ouro { color: var(--ouro); }
.titulo { margin: 0; font-family: var(--f-display); font-weight: 400; font-synthesis: none; font-size: clamp(2.5rem, 10.5vw, 4.6rem); line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.titulo--m { font-size: clamp(1.7rem, 7vw, 3rem); overflow-wrap: anywhere; }
.cab { display: grid; gap: 14px; margin-bottom: clamp(30px, 5vw, 48px); max-width: 46rem; }
.cab__sub { margin: 0; font-size: 1.0625rem; color: var(--tinta-2); max-width: 36rem; text-wrap: pretty; }

/* ---------- botões ---------- */
.btn { --bg: transparent; --fg: var(--tinta); --bd: rgba(27,42,36,.3);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--bd);
  background: var(--bg); color: var(--fg); text-decoration: none; font-weight: 700; font-size: .98rem; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: background 180ms, border-color 180ms, color 180ms, transform 400ms var(--e-in); -webkit-tap-highlight-color: transparent; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms var(--e-in); }
.btn svg .cheio { fill: currentColor; stroke: none; }
.btn:hover svg { transform: translateX(3px); }
.btn--terra { --bg: var(--terra); --fg: #fff8f2; --bd: var(--terra); box-shadow: 0 16px 30px -18px rgba(135, 69, 42, .9); }
.btn--terra:hover { --bg: var(--terra-hover); --bd: var(--terra-hover); }
.btn--verde { --bg: var(--verde); --fg: var(--creme); --bd: var(--verde); }
.btn--verde:hover { --bg: var(--verde-2); --bd: var(--verde-2); }
.btn--linha:hover { --bd: var(--tinta); }
.btn--linha-clara { --fg: var(--creme); --bd: var(--linha-clara); }
.btn--linha-clara:hover { --bd: var(--creme); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 1.02rem; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .22; pointer-events: none; animation: ripple 600ms var(--e-in) forwards; z-index: -1; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- topo ---------- */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; color: var(--creme); transition: transform 380ms var(--e-troca), background 300ms, box-shadow 300ms; }
.topo.is-sujo { background: rgba(28, 58, 49, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linha-clara); }
.topo.is-oculto { transform: translateY(-110%); }
.topo__in { display: flex; align-items: center; gap: 10px; height: var(--topo-h); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
.marca__selo { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(244,237,228,.25); transition: transform 900ms var(--e-in); }
.marca:hover .marca__selo { transform: rotate(-12deg) scale(1.05); }
.marca__nome { font-family: var(--f-display); font-synthesis: none; font-size: 1.25rem; line-height: .95; display: grid; }
.marca__nome small { font-family: var(--f-texto); font-size: .6rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--ouro); margin-top: 3px; }
.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; gap: 26px; margin-right: 16px; }
  .nav a { text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .82; position: relative; padding-block: 8px; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ouro); transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--e-in); }
  .nav a:hover { opacity: 1; }
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .menu-btn { display: none !important; }
}
.menu-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linha-clara); background: transparent; display: grid; place-content: center; gap: 6px; cursor: pointer; position: relative; z-index: 70; }
.menu-btn__l { display: block; width: 18px; height: 2px; background: currentColor; transition: transform 400ms var(--e-in); }
.menu-btn[aria-expanded="true"] .menu-btn__l:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__l:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; background: var(--verde); color: var(--creme); display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto;
  padding: calc(var(--topo-h) + 24px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  clip-path: circle(0% at calc(100% - 40px) 33px); transition: clip-path 650ms var(--e-troca); }
.menu.is-aberto { clip-path: circle(150% at calc(100% - 40px) 33px); }
.menu__nav { display: grid; }
.menu__nav a { text-decoration: none; font-family: var(--f-display); font-synthesis: none; font-size: clamp(2.1rem, 10vw, 3rem); line-height: 1.2; padding-block: 4px; border-bottom: 1px solid var(--linha-clara); opacity: 0; transform: translateY(18px); transition: opacity 400ms, transform 500ms var(--e-in), color 180ms; }
.menu__nav a:hover { color: var(--terra-claro); }
.menu.is-aberto .menu__nav a { opacity: 1; transform: none; }
.menu.is-aberto .menu__nav a:nth-child(2) { transition-delay: 60ms; }
.menu.is-aberto .menu__nav a:nth-child(3) { transition-delay: 120ms; }
.menu.is-aberto .menu__nav a:nth-child(4) { transition-delay: 180ms; }
.menu.is-aberto .menu__nav a:nth-child(5) { transition-delay: 240ms; }
.menu.is-aberto .menu__nav a:nth-child(6) { transition-delay: 300ms; }
.menu__pe { margin: 24px 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ouro); }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: clip; color: var(--creme); margin-top: calc(-1 * var(--topo-h)); padding-top: var(--topo-h);
  background: radial-gradient(80% 50% at 80% 55%, rgba(191, 103, 43, .2), transparent 70%), radial-gradient(70% 60% at 0% 0%, var(--verde-2), transparent 70%), var(--verde); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__in { position: relative; z-index: 1; display: grid; gap: 8px; padding-block: 22px 70px; }
.hero__txt { display: grid; gap: 18px; align-content: start; position: relative; z-index: 3; }
.hero__rot { color: var(--ouro); font-size: .68rem; letter-spacing: .26em; }
.hero__t { margin: 0; font-family: var(--f-display); font-weight: 400; font-synthesis: none; line-height: .88; letter-spacing: -.015em; }
.ln { display: block; overflow: hidden; padding-top: .08em; margin-top: -.08em; }
.ln > span { display: inline-block; }
.ln--g { font-size: clamp(4.3rem, 23vw, 9.4rem); }
.ln--g:nth-child(2) { padding-left: .55em; }
.ln--p { font-size: clamp(2rem, 10.6vw, 4.2rem); line-height: 1.05; margin-top: .12em; }
.hero__t em { font-style: normal; color: var(--terra-claro); }
.hero__sub { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--creme-70); max-width: 26rem; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.hero__link { font-weight: 700; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--ouro); min-height: 44px; display: inline-flex; align-items: center; }

.hero__visual { position: relative; height: clamp(420px, 118vw, 560px); margin-top: 6px; }
.arvore { position: absolute; left: 40%; top: 0; width: min(88%, 470px); aspect-ratio: 1; transform: translateX(-50%); }
.arvore__forma { position: absolute; inset: 0; background: linear-gradient(180deg, var(--terra-claro), var(--terra) 55%, var(--terra-esc));
  -webkit-mask: url("img/logo-mask.png") center / contain no-repeat; mask: url("img/logo-mask.png") center / contain no-repeat;
  animation: cresce 1.9s var(--e-troca) both .2s, respira 7s ease-in-out infinite 2.2s; transform-origin: 50% 85%; }
@keyframes cresce { from { clip-path: inset(100% 0 0 0); transform: scale(.94); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes respira { 50% { transform: scale(1.025) rotate(-.6deg); } }
.hero__tag { position: absolute; right: 0; top: 8px; margin: 0; font-weight: 800; font-size: .72rem; letter-spacing: .3em; color: var(--ouro); writing-mode: vertical-rl; transform: rotate(180deg); }

.deck { position: absolute; left: 73%; bottom: 0; width: min(40%, 230px); aspect-ratio: 3 / 4.5; transform: translateX(-50%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cartao { position: absolute; inset: 0; margin: 0; background: var(--cartao); border-radius: 18px; padding: 8px 8px 10px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
  box-shadow: 0 30px 50px -24px rgba(0,0,0,.75); transition: transform 900ms var(--e-in), opacity 600ms, filter 600ms; will-change: transform; }
.cartao__rot { margin: 0; text-align: center; font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #2a2a26; line-height: 1.35; min-height: 2.7em; display: grid; place-items: center; padding-top: 4px; }
.cartao__foto { border-radius: 12px; overflow: hidden; background: #cfc9bf; min-height: 0; }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; }
.cartao__pe { font-size: .9rem; letter-spacing: 2px; color: #6f6e66; line-height: 1; padding-left: 4px; }
.cartao[data-pos="0"] { transform: rotate(-3deg); z-index: 4; }
.cartao[data-pos="1"] { transform: translate(22%, -8%) rotate(8deg) scale(.92); z-index: 3; filter: brightness(.86); }
.cartao[data-pos="2"] { transform: translate(-28%, -12%) rotate(-12deg) scale(.86); z-index: 2; filter: brightness(.72); }
.cartao[data-pos="3"] { transform: translate(0, -4%) rotate(2deg) scale(.8); z-index: 1; opacity: 0; }
.cartao.sai { transform: translate(-130%, 10%) rotate(-28deg) !important; opacity: 0; z-index: 5; }
.js .deck { animation: deck-entra 1.1s var(--e-in) both 1s; }
@keyframes deck-entra { from { transform: translate(-50%, 30px); opacity: 0; } }

.js .ln > span { animation: sobe 1s var(--e-in) both; }
.js .ln:nth-child(1) > span { animation-delay: 150ms; }
.js .ln:nth-child(2) > span { animation-delay: 280ms; }
.js .ln:nth-child(3) > span { animation-delay: 430ms; }
.js .hero__rot, .js .hero__sub, .js .hero__ctas { animation: aparece 800ms var(--e-in) both; }
.js .hero__sub { animation-delay: 700ms; }
.js .hero__ctas { animation-delay: 820ms; }
@keyframes sobe { from { transform: translateY(105%); } }
@keyframes aparece { from { opacity: .001; transform: translateY(14px); } }

.ondas { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 56px; z-index: 2; }
.onda { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: desenha 2.4s var(--e-troca) forwards 1.2s; }
.onda--ouro { stroke: var(--ouro); }
.onda--terra { stroke: var(--terra); animation-delay: 1.5s; }
@keyframes desenha { to { stroke-dashoffset: 0; } }

@media (min-width: 960px) {
  .hero__in { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; padding-block: 48px 110px; min-height: min(860px, 100svh); }
  .ln--g { font-size: clamp(6rem, 10.5vw, 9.6rem); }
  .ln--p { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
  .hero__rot { font-size: .76rem; }
  .hero__visual { height: 600px; margin-top: 0; }
  .arvore { width: 540px; max-width: 92%; top: 10px; left: 44%; }
  .deck { width: 240px; bottom: 0; left: 74%; }
  .ondas { height: 80px; }
}

/* ---------- faixa ---------- */
.faixa-wrap { position: relative; z-index: 6; overflow-x: clip; background: var(--creme); }
.faixa { background: var(--terra); color: #fff6ee; overflow: hidden; padding-block: 13px; transform: rotate(-1.3deg) scale(1.04); margin-block: 6px; }
.faixa__trilho { display: flex; width: max-content; animation: corre 42s linear infinite; }
.faixa__item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--f-display); font-synthesis: none; text-transform: uppercase; font-size: 1.3rem; white-space: nowrap; }
.faixa__item i { width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: url("img/logo-mask.png") center / contain no-repeat; mask: url("img/logo-mask.png") center / contain no-repeat; }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- manifesto ---------- */
.manifesto__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .manifesto__grid { grid-template-columns: 5fr 7fr; gap: 72px; } }
.manifesto__foto { position: relative; margin: 0 auto; width: min(100%, 440px); padding-bottom: 34px; }
.manifesto__foto > img:first-child { width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; object-position: 30% 50%; border-radius: 18px 18px 50% 50% / 18px 18px 34% 34%; box-shadow: 0 30px 50px -30px rgba(27, 42, 36, .6); }
.manifesto__selo { position: absolute; left: 50%; bottom: 0; width: 84px; height: 84px; margin-left: -42px; border-radius: 50%; border: 5px solid var(--terra); background: var(--terra); }
.manifesto__txt { display: grid; gap: 18px; }
.manifesto__t { margin: 0; font-family: var(--f-display); font-weight: 400; font-synthesis: none; font-size: clamp(1.9rem, 7.4vw, 3.3rem); line-height: 1.12; color: var(--verde); text-wrap: balance; }
.manifesto__sub { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--terra); }

/* ---------- antes e depois ---------- */
.ad { background: var(--verde); color: var(--creme); overflow: clip; }
.ad__grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .ad__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.ad__cab { display: grid; gap: 14px; }
.ad__sub { margin: 0; color: var(--creme-70); font-size: 1.0625rem; max-width: 30rem; }
.ad__nota { margin: 0; font-size: .82rem; color: var(--ouro); }
.comp { --p: 50%; position: relative; width: min(84%, 360px); aspect-ratio: 323 / 627; margin-inline: auto; border-radius: 22px; overflow: hidden; background: var(--verde-3); box-shadow: 0 0 0 8px var(--cartao), 0 40px 70px -30px #000; touch-action: pan-y; user-select: none; }
.comp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comp__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.comp__tag { position: absolute; top: 14px; z-index: 2; font-size: .66rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; pointer-events: none; }
.comp__tag--a { left: 14px; background: var(--cartao); color: var(--tinta); }
.comp__tag--d { right: 14px; background: var(--terra); color: #fff; }
.comp__linha { position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px; margin-left: -1.5px; background: var(--cartao); z-index: 3; pointer-events: none; }
.comp__puxador { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--cartao); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.comp__puxador svg { width: 24px; height: 24px; fill: none; stroke: var(--verde); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.comp__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; }
.comp__range:focus-visible + * , .comp:has(.comp__range:focus-visible) { outline: 3px solid var(--ouro); outline-offset: 10px; }

/* ---------- serviços ---------- */
.servs { display: grid; gap: 18px; }
@media (min-width: 700px) { .servs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .servs { grid-template-columns: repeat(4, 1fr); } }
.serv { display: grid; grid-template-rows: auto 1fr; background: #fffaf4; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 var(--linha); }
.serv__foto { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--cartao); max-width: 100%; }
@media (min-width: 1100px) { .serv__foto { aspect-ratio: 4 / 5; } }
.serv__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-in); }
.serv:hover .serv__foto img { transform: scale(1.06); }
.serv__corpo { padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; }
.serv__t { margin: 0; font-family: var(--f-display); font-weight: 400; font-synthesis: none; font-size: 1.55rem; line-height: 1.05; color: var(--verde); }
.serv__d { margin: 0; color: var(--tinta-2); font-size: .95rem; }
.serv__pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--linha); }
.serv__val { font-size: .8rem; font-weight: 700; color: var(--terra); }
.serv__pe .btn { min-height: 40px; padding: 8px 16px; font-size: .88rem; }

/* ---------- inspirações ---------- */
.insp { background: var(--verde-3); color: var(--creme); overflow: clip; background-image: radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.06), transparent 70%); }
.insp__cab { text-align: center; display: grid; justify-items: center; gap: 6px; margin-bottom: 40px; }
.rotulo--largo { letter-spacing: .6em; font-size: .9rem; margin-right: -.6em; }
.insp__t { margin: 0; font-family: var(--f-display); font-weight: 400; font-synthesis: none; text-transform: uppercase; font-size: clamp(3.6rem, 19vw, 9rem); line-height: .9; letter-spacing: .02em; }
.insp__sub { margin: 10px 0 0; color: var(--creme-70); max-width: 30rem; }
.cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: max(18px, env(safe-area-inset-left, 0px));
  margin-inline: calc(-1 * max(18px, env(safe-area-inset-left, 0px))); padding: 6px max(18px, env(safe-area-inset-left, 0px)) 14px; }
.cards::-webkit-scrollbar { display: none; }
.icard { flex: 0 0 66%; max-width: 280px; scroll-snap-align: start; border: 1.5px solid var(--linha-clara); border-radius: 22px; padding: 0; background: transparent; cursor: zoom-in; display: grid; text-align: left; overflow: hidden; transition: transform 500ms var(--e-in); }
.icard:hover { transform: translateY(-6px); }
.icard__rot { background: var(--cartao); color: #2a2a26; text-align: center; font-size: .66rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; line-height: 1.4; padding: 10px 10px 8px; min-height: 3.7em; display: grid; place-items: center; }
.icard__foto { aspect-ratio: 3 / 4; overflow: hidden; background: var(--cartao); }
.icard__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--e-in); }
.icard:hover .icard__foto img { transform: scale(1.05); }
.icard__pe { padding: 10px 14px 12px; font-size: 1rem; letter-spacing: 3px; color: var(--creme-70); line-height: 1; }
.icard:nth-child(even) { flex-direction: column; }
.icard:nth-child(even) .icard__rot { order: 2; }
.icard:nth-child(even) .icard__pe { order: -1; text-align: right; }
@media (min-width: 900px) { .cards { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; gap: 20px; } .icard { max-width: none; } .icard:nth-child(3n+2) { transform: translateY(28px); } .icard:nth-child(3n+2):hover { transform: translateY(22px); } }

/* ---------- studio ---------- */
.studio__grid { display: grid; gap: 34px; }
@media (min-width: 960px) { .studio__grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; } }
.studio__txt { display: grid; gap: 16px; }
.selos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.selos li { display: grid; grid-template-columns: 5.4rem 1fr; gap: 12px; align-items: baseline; padding-block: 12px; border-top: 1px solid var(--linha); }
.selos li:last-child { border-bottom: 1px solid var(--linha); }
.selos b { font-family: var(--f-display); font-weight: 400; font-synthesis: none; font-size: 1.4rem; color: var(--terra); }
.selos span { color: var(--tinta-2); }
.studio__foto { margin: 0; display: grid; gap: 10px; }
.studio__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 50px -30px rgba(27,42,36,.6); }
.studio__foto figcaption { font-size: .8rem; color: var(--tinta-2); }

/* ---------- agendar ---------- */
.agendar { background: var(--terra-esc); color: var(--creme); }
.agendar .cab__sub { color: var(--creme-70); }
.agendar__grid { display: grid; gap: 8px; }
@media (min-width: 1000px) { .agendar__grid { grid-template-columns: 4fr 6fr; gap: 64px; align-items: start; } .agendar .cab { position: sticky; top: calc(var(--topo-h) + 30px); } }
.agendar__fone { font-family: var(--f-display); font-size: clamp(1.8rem, 8vw, 2.6rem); text-decoration: none; color: var(--creme); width: fit-content; border-bottom: 3px solid var(--ouro); line-height: 1.2; }
.agenda { background: var(--creme); color: var(--tinta); border-radius: 24px; padding: clamp(18px, 4vw, 30px); display: grid; gap: 20px; min-width: 0; box-shadow: 0 40px 60px -40px rgba(0,0,0,.7); }
.agenda__prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.agenda__prog li { display: grid; gap: 6px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); font-weight: 700; min-width: 0; }
.agenda__prog li::before { content: ""; height: 3px; border-radius: 3px; background: var(--linha); }
.agenda__prog li.feito::before, .agenda__prog li.atual::before { background: var(--terra); }
.agenda__prog li.atual { color: var(--tinta); }
.agenda__prog li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) { .agenda__prog li span { display: none; } }
.agenda__corpo { min-height: 260px; min-width: 0; }
.passo { display: grid; gap: 12px; animation: passo 450ms var(--e-in) both; min-width: 0; }
.passo.volta { animation-name: passo-v; }
@keyframes passo { from { opacity: .001; transform: translateX(24px); } }
@keyframes passo-v { from { opacity: .001; transform: translateX(-24px); } }
.passo__t { margin: 0 0 4px; font-family: var(--f-display); font-synthesis: none; font-size: 1.7rem; line-height: 1.1; color: var(--verde); }
.opc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: 14px; cursor: pointer; min-height: 56px; transition: border-color 180ms, background 180ms; }
.opc:hover { border-color: rgba(27,42,36,.35); }
.opc input { position: absolute; opacity: 0; pointer-events: none; }
.opc__marca { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(27,42,36,.35); flex: none; display: grid; place-items: center; }
.opc__marca svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; transform: scale(.4); transition: opacity 200ms, transform 300ms var(--e-in); }
.opc:has(input:checked) { border-color: var(--terra); background: #f7e3d4; }
.opc:has(input:checked) .opc__marca { background: var(--terra); border-color: var(--terra); }
.opc:has(input:checked) .opc__marca svg { opacity: 1; transform: none; }
.opc:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; }
.opc__txt { flex: 1; min-width: 0; display: grid; }
.opc__txt b { font-weight: 700; }
.opc__txt small { color: var(--tinta-2); font-size: .85rem; }
.dias { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.dias::-webkit-scrollbar { display: none; }
.dia { flex: none; width: 64px; padding: 10px 4px; border-radius: 14px; border: 1.5px solid var(--linha); background: transparent; cursor: pointer; display: grid; gap: 2px; justify-items: center; }
.dia small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .75; }
.dia b { font-family: var(--f-display); font-weight: 400; font-size: 1.55rem; line-height: 1.1; }
.dia:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.dia[aria-pressed="true"], .hora[aria-pressed="true"] { background: var(--verde); color: var(--creme); border-color: var(--verde); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.hora { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--linha); background: transparent; cursor: pointer; font-weight: 700; font-variant-numeric: tabular-nums; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 700; font-size: .95rem; }
.campo input, .campo textarea, .avaliar textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(27,42,36,.25); background: #fffaf4; color: var(--tinta); font: inherit; font-size: 16px; }
.campo input:focus, .campo textarea:focus, .avaliar textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px #f2d6c2; }
.resumo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.resumo li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; padding-block: 11px; border-bottom: 1px solid var(--linha); font-size: .95rem; }
.resumo li b { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); padding-top: 3px; }
.resumo li span { min-width: 0; overflow-wrap: anywhere; }
.privado { margin: 0; font-size: .85rem; color: var(--tinta-2); }
.btn--zap { --bg: #1f8f57; --fg: #fff; --bd: #1f8f57; width: 100%; }
.btn--zap svg { fill: currentColor; stroke: none; width: 20px; height: 20px; }
.agenda__nav { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--linha); padding-top: 16px; }
.agenda__dica { margin: 0; font-size: .85rem; color: var(--tinta-2); flex: 1; min-width: 0; }

/* ---------- instagram + avaliar ---------- */
.insta__cab { display: grid; gap: 18px; margin-bottom: 26px; }
@media (min-width: 768px) { .insta__cab { grid-template-columns: 1fr auto; align-items: end; } }
.insta__cab .titulo a { text-decoration: none; color: var(--verde); }
.insta__cab .rotulo { margin-bottom: 10px; }
.insta__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 900px) { .insta__grade { grid-template-columns: repeat(6, 1fr); gap: 10px; } }
.post { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; display: block; max-width: 100%; }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--e-in); }
.post::after { content: ""; position: absolute; inset: 0; background: rgba(191, 103, 43, .45); opacity: 0; transition: opacity 300ms; }
.post:hover img { transform: scale(1.08); }
.post:hover::after { opacity: 1; }
.avaliar { margin-top: 56px; display: grid; gap: 18px; padding: clamp(22px, 5vw, 40px); border-radius: 24px; background: var(--verde); color: var(--creme); }
@media (min-width: 900px) { .avaliar { grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; } }
.avaliar h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 400; font-synthesis: none; font-size: 2rem; line-height: 1.05; }
.avaliar p { margin: 0; color: var(--creme-70); }
.avaliar__form { display: grid; gap: 12px; }
.avaliar__estrelas { display: flex; gap: 2px; }
.estrela { width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; padding: 6px; }
.estrela svg { width: 100%; height: 100%; fill: none; stroke: var(--ouro); stroke-width: 1.5; }
.estrela.on svg { fill: var(--ouro); animation: pop 400ms var(--e-in) both; animation-delay: calc(var(--i) * 50ms); }
@keyframes pop { 40% { transform: scale(1.25) rotate(-8deg); } }
.avaliar__info { font-size: .85rem; }

/* ---------- contato ---------- */
.contato { background: var(--verde); color: var(--creme); }
.contato__grid { display: grid; gap: 34px; }
@media (min-width: 960px) { .contato__grid { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; } }
.contato .titulo { font-size: clamp(2.1rem, 8.4vw, 3.8rem); margin-top: 14px; }
.contato__end { margin: 16px 0 22px; color: var(--creme-70); }
.contato__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.canais { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha-clara); }
.canal { display: flex; align-items: center; gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--linha-clara); min-width: 0; }
.canal__txt { flex: 1; min-width: 0; display: grid; }
.canal__txt small { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); font-weight: 700; }
.canal__txt a { text-decoration: none; font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.copiar { min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 1.5px solid var(--linha-clara); background: transparent; cursor: pointer; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.copiar.ok { background: var(--creme); color: var(--verde); }

/* ---------- rodapé ---------- */
.rodape { background: var(--verde-3); color: var(--creme); padding-block: 56px calc(110px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
@media (min-width: 900px) { .rodape { padding-bottom: 48px; } }
.rodape__marca { display: flex; align-items: flex-end; gap: clamp(10px, 3vw, 28px); margin-bottom: 28px; }
.rodape__arvore { flex: none; width: clamp(64px, 20vw, 180px); aspect-ratio: 1; background: var(--terra); -webkit-mask: url("img/logo-mask.png") center / contain no-repeat; mask: url("img/logo-mask.png") center / contain no-repeat; }
.rodape__marca p { margin: 0; font-family: var(--f-display); font-synthesis: none; text-transform: uppercase; font-size: clamp(3rem, 15vw, 12rem); line-height: .8; color: var(--creme); }
.rodape__grid { display: grid; gap: 18px; border-top: 1px solid var(--linha-clara); padding-top: 22px; font-size: .95rem; }
@media (min-width: 900px) { .rodape__grid { grid-template-columns: 1fr auto 1fr; align-items: center; } .rodape__dev { text-align: right; } }
.rodape__grid p { margin: 0; color: var(--creme-70); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rodape nav a { text-decoration: none; }
.rodape__dev b { color: var(--ouro); }

/* ---------- barra fixa ---------- */
.barra { position: fixed; z-index: 44; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; align-items: center;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(244, 237, 228, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--linha); transform: translateY(110%); transition: transform 450ms var(--e-in); }
.barra.is-visivel { transform: none; }
.barra__ag { flex: 1; }
.barra__zap { width: 50px; height: 50px; flex: none; border-radius: 50%; background: #1f8f57; color: #fff; display: grid; place-items: center; }
.barra__zap svg { width: 26px; height: 26px; fill: currentColor; }
@media (min-width: 900px) { .barra { left: auto; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .barra__ag { display: none; } .barra__zap { width: 58px; height: 58px; box-shadow: 0 14px 30px -10px rgba(31,143,87,.7); } }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 95; background: rgba(10, 22, 18, .95); display: grid; place-items: center; padding: calc(56px + env(safe-area-inset-top, 0px)) 12px calc(70px + env(safe-area-inset-bottom, 0px)); animation: aparece 300ms both; touch-action: none; }
.lb__fig { margin: 0; display: grid; gap: 12px; justify-items: center; }
.lb__fig img { max-height: 72vh; max-width: min(92vw, 640px); border-radius: 16px; object-fit: contain; }
.lb__fig figcaption { color: var(--creme); font-size: .75rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.lb__x, .lb__seta { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lb__x { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
.lb__seta--a { left: 12px; }
.lb__seta--p { right: 12px; }
@media (max-width: 599px) { .lb__seta { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }

.rv.in { animation: rv 900ms var(--e-in) both; }
@keyframes rv { from { opacity: .35; transform: translateY(24px); } }

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