/* MPAIVA — landing page
   Recreated from the Claude Design handoff (GroundAI Landing.dc.html + README). */

/* ---------- Tokens ---------- */
:root {
  --pink: #FCDFDF;
  --pink-text: #F2C4C4;
  --pink-mid: #D9ADAD;
  --pink-light: #F7D4D4;
  --pink-dot: #EFC9C9;
  --grey-dark: #6E6E6E;
  --grey: #838383;
  --grey-mid: #8F8F8F;
  --ink: #4F4F4F;
  --ink-strong: #463B3B;
  --ink-warm: #4A3F3F;
  --wordmark: #5F5F5F;
  --near-black: #2A2424;
  --glass-ink: #F7F1F1;
  --chat-fill: #8A6A6A;

  --f-tight: 'Inter Tight', sans-serif;
  --f-serif: 'Playfair Display', serif;
  --f-round: 'SF Pro Rounded', system-ui, sans-serif;   /* not loaded: falls back to system font */
  --f-satoshi: 'Satoshi', system-ui, sans-serif;         /* not loaded: falls back to system font */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Glossy transparent pink glass sphere: main specular highlight, soft secondary glint, pink body that
     deepens toward the rim. No outer shadow. Shared by every button (see "glass buttons"). */
  --glass-sphere:
    radial-gradient(ellipse 40% 28% at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 30% 18% at 72% 84%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 42%, rgba(252,223,223,.5) 0%, rgba(240,196,196,.55) 60%, rgba(217,173,173,.75) 100%);
}

/* ---------- Base ---------- */
html, body { margin: 0; padding: 0; background: var(--pink); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p, blockquote { margin: 0; }
em { font-family: var(--f-serif); font-style: italic; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Signature wipe (1800ms). Up to the end of the "P" (~70% of the width, ~0.8s) it follows the original
   ease curve; after the P the wipe is stretched ~1.8x so "aiva" is drawn slightly calmer (70-90%: ~0.47s).
   Percentages are relative, so changing the duration below speeds up / slows down the whole wipe. */
@keyframes sign {
  0%     { clip-path: inset(0 100% 0 0); }
  16.73% { clip-path: inset(0 90% 0 0); }
  23.25% { clip-path: inset(0 80% 0 0); }
  28%    { clip-path: inset(0 70% 0 0); }
  32.09% { clip-path: inset(0 60% 0 0); }
  35.98% { clip-path: inset(0 50% 0 0); }
  40.1%  { clip-path: inset(0 40% 0 0); }
  44.81% { clip-path: inset(0 30% 0 0); }
  55.42% { clip-path: inset(0 20% 0 0); }
  70.93% { clip-path: inset(0 10% 0 0); animation-timing-function: cubic-bezier(0.25, 0.5, 0.4, 1); }
  100%   { clip-path: inset(0 0 0 0); }
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroDrop { from { opacity: 0; transform: translateY(45vh); } to { opacity: 1; transform: translateY(0); } }
@keyframes navGrow { from { max-width: 110px; } to { max-width: 1200px; } }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
/* The pink at the bottom of the hero rises from below instead of popping in when the intro ends. */
@keyframes veilRise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes photoFade { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }

/* While the intro plays, hold the page's entrance animations so they start after it. */
.intro-running .content,
.intro-running .content * { animation-play-state: paused !important; }

/* ---------- Intro ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: var(--pink);
}
.intro.is-hidden,
html:not(.js) .intro { display: none; }
.intro__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro__tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(131,131,131,.38), rgba(217,173,173,.38));
}
.intro__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  height: min(320px, 62vw);
  width: auto;
  filter: invert(1);
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1);   /* keep in sync with FLY_MS in js/main.js */
}
.intro__logo.is-drawing { animation: sign 1800ms linear both; }

/* ---------- Shared: glass buttons (pink glass sphere look) ---------- */
.glass-dark,
.glass-cta {
  border: 1px solid rgba(255,255,255,.7);
  background: var(--glass-sphere);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 2px 8px rgba(255,255,255,.75), inset 0 -10px 18px rgba(217,173,173,.4);
  color: var(--ink-strong);
}
.glass-dark:hover,
.glass-cta:hover { filter: brightness(1.05) saturate(1.15); }

.glass-dark {
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--f-round);
}

.glass-cta {
  position: relative;
  height: 60px;
  padding: 0 38px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  font-size: 20px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--f-round);
  transition: filter .25s ease, transform .25s ease;
  animation: fadeUp .5s ease-out 1s both;
}
.glass-cta:hover { transform: translateY(-1px); }
.glass-cta:active { transform: translateY(1px); }
.glass-cta__shine { display: none; } /* superseded by the sphere highlights on the button itself */
.glass-cta__label { position: relative; z-index: 1; }

/* Transparent variant (hero "Start free decoration"): see-through, thin white outline, white label. */
.glass-cta--clear {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.75);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: background .25s ease, transform .25s ease;
}
.glass-cta--clear:hover { background: rgba(255,255,255,.16); filter: none; }

/* ---------- 1. Hero ---------- */
.hero {
  --rise-t: 2.6s; --rise-ease: cubic-bezier(0.33, 0, 0.2, 1);   /* how the pink rises once the intro ends */
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* same height as the fixed intro cover on phones (the small viewport), so the photo does not seem to grow when the cover goes away */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 24px 150px;
  overflow: hidden;
  color: #fff;
}
.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  /* The mask is twice the photo's height: the top half is solid (whole photo visible) and the bottom half holds
     the fade to the pink page (lifted so the photo never fully fades out). It starts on the solid half and slides up to the fade, so the pink rises from the
     bottom, in step with the veil below (same duration and curve). */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 72.1%, rgba(0,0,0,0.997) 75.2%, rgba(0,0,0,0.992) 78.3%, rgba(0,0,0,0.984) 81.4%, rgba(0,0,0,0.975) 84.5%, rgba(0,0,0,0.966) 87.6%, rgba(0,0,0,0.958) 90.7%, rgba(0,0,0,0.953) 93.8%, rgba(0,0,0,0.95) 96.9%, rgba(0,0,0,0.95) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 72.1%, rgba(0,0,0,0.997) 75.2%, rgba(0,0,0,0.992) 78.3%, rgba(0,0,0,0.984) 81.4%, rgba(0,0,0,0.975) 84.5%, rgba(0,0,0,0.966) 87.6%, rgba(0,0,0,0.958) 90.7%, rgba(0,0,0,0.953) 93.8%, rgba(0,0,0,0.95) 96.9%, rgba(0,0,0,0.95) 100%);
  -webkit-mask-size: 100% 200%; mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  /* No animation here on purpose: sliding a mask over this full-screen photo repainted it on the CPU every frame and made the rise stutter on phones. */
}
.hero__tint {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(131,131,131,.38), rgba(217,173,173,.38));
}
.hero__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; pointer-events: none;
  opacity: .11;   /* lighter: this dark layer under the pink veil is what made the rose band look heavy */
  background: linear-gradient(to top, rgba(40,32,32,0.5) 0%, rgba(40,32,32,0.496) 10%, rgba(40,32,32,0.471) 20%, rgba(40,32,32,0.418) 30%, rgba(40,32,32,0.341) 40%, rgba(40,32,32,0.25) 50%, rgba(40,32,32,0.159) 60%, rgba(40,32,32,0.082) 70%, rgba(40,32,32,0.029) 80%, rgba(40,32,32,0.004) 90%, rgba(40,32,32,0) 100%);
  animation: veilRise var(--rise-t) var(--rise-ease) .15s both;
  will-change: transform; backface-visibility: hidden;
}
.hero__veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 47%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(252,223,223,1) 0%, rgba(252,223,223,0.933) 5%, rgba(252,223,223,0.905) 10%, rgba(252,223,223,0.817) 15%, rgba(252,223,223,0.759) 20%, rgba(252,223,223,0.668) 25%, rgba(252,223,223,0.596) 30%, rgba(252,223,223,0.51) 35%, rgba(252,223,223,0.437) 40%, rgba(252,223,223,0.361) 45%, rgba(252,223,223,0.293) 50%, rgba(252,223,223,0.231) 55%, rgba(252,223,223,0.174) 60%, rgba(252,223,223,0.128) 65%, rgba(252,223,223,0.085) 70%, rgba(252,223,223,0.057) 75%, rgba(252,223,223,0.029) 80%, rgba(252,223,223,0.017) 85%, rgba(252,223,223,0.005) 90%, rgba(252,223,223,0.002) 95%, rgba(252,223,223,0) 100%);
  animation: veilRise var(--rise-t) var(--rise-ease) .15s both;
  will-change: transform; backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .hero__scrim, .hero__veil, .hero__photo { animation: none; }
}

.hero__header {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 20;
  animation: heroDrop 1s var(--ease-out) both;
}
.brand { display: flex; align-items: center; gap: 20px; }
.brand__link {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: transform .45s var(--ease-out), filter .45s ease-out;
}
.brand__link:hover { transform: scale(1.07); filter: drop-shadow(0 0 18px rgba(252,223,223,.75)); }
/* Logo size follows the screen: --logo-h shrinks with the viewport (min..max) so it never crowds the icons on
   phones and gives the nav bar more room on small laptops. --logo-up raises it a little, as before. */
:root { --logo-h: clamp(72px, 28vw, 130px); --logo-up: calc(var(--logo-h) * -0.12); }
@media (min-width: 1024px) { :root { --logo-h: clamp(130px, 15vw, 170px); --logo-up: -16px; } }
.brand__logo { height: var(--logo-h); width: auto; filter: invert(1); position: relative; top: var(--logo-up); }
/* Home page: invisible placeholder with the logo's exact size/position. The signature drawn in the intro
   flies here and then becomes the header logo (see dockLogo in js/main.js). */
.brand__slot { display: block; height: var(--logo-h); aspect-ratio: 1754 / 1240; position: relative; top: var(--logo-up); }
/* Desktop nav */
.nav {
  display: none;
  align-items: center;
  flex-direction: row-reverse;
  overflow: hidden;
  height: 64px;
  max-width: 1200px; /* the normal width is the FULL one: the animation only grows it from 110px; if it is ever cancelled/restarted the menu text no longer disappears */
  flex: 1 1 auto;
  margin-left: 40px;
  border-radius: 24px;
  background: rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: navGrow 2.2s cubic-bezier(0.45, 0.05, 0.25, 1) .6s backwards;
}
.nav__links {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-evenly;
  gap: 32px;
  padding: 0 32px;
  white-space: nowrap;
  animation: fadeIn .8s ease-out 1.7s backwards;
}
.nav__links a,
.nav-mobile__menu a {
  color: #fff;
  font-size: 20px;
  font-family: var(--f-tight);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nav__links a:hover { color: var(--pink-text); }
/* Hover: a fine, delicate 1px line draws in under the word, left to right. */
.nav__links a { position: relative; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }
/* narrow desktops: keep the larger labels inside the bar */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav__links { gap: 20px; padding: 0 20px; }
  .nav__links a { font-size: 18px; }
}
/* Account + cart icons: clean thin line icons, white like the links. They sit at the end of the bar
   (the bar grows from the right, so they are the first thing in it), separated by a hairline. */
.nav__icons {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  margin-left: 4px;
  padding: 0 14px 0 12px;
  border-left: 1px solid rgba(255,255,255,.22);
}
.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: rgba(255,255,255,.16); }
.icon-btn:active { transform: scale(.94); }
/* mobile: the two icons sit to the left of the menu button, no divider */
.nav__icons--mobile { height: auto; margin: 0 4px 0 0; padding: 0; border-left: 0; }
.nav__icons--mobile .icon-btn svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
/* Mobile nav */
.nav-mobile { position: relative; display: flex; align-items: center; }
/* Menu button: white thin-line icon like the cart (also has .icon-btn), no bubble. Shows an X while open. */
.nav-mobile__toggle .ico-close { display: none; }
.nav-mobile__toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-mobile__toggle[aria-expanded="true"] .ico-close { display: block; }
.nav-mobile__toggle svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.nav-mobile__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  width: 240px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: menuOpen .5s var(--ease-out) both;
}
.nav-mobile__menu[hidden] { display: none; }

/* Opening the mobile menu plays like a presentation: the panel unrolls from the top and the five links
   drop in one after another, top to bottom. It replays every time the menu is opened. */
@keyframes menuOpen {
  from { clip-path: inset(0 0 100% 0 round 16px); opacity: 0; }
  to   { clip-path: inset(0 0 0 0 round 16px); opacity: 1; }
}
@keyframes menuItem {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-mobile__menu a { animation: menuItem .5s var(--ease-out) backwards; }
.nav-mobile__menu a:nth-child(1) { animation-delay: .15s; }
.nav-mobile__menu a:nth-child(2) { animation-delay: .3s; }
.nav-mobile__menu a:nth-child(3) { animation-delay: .45s; }
.nav-mobile__menu a:nth-child(4) { animation-delay: .6s; }
.nav-mobile__menu a:nth-child(5) { animation-delay: .75s; }

@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav-mobile { display: none; }
}

/* Hero center */
.hero__center {
  width: 100%;
  max-width: 800px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  text-align: center;
  position: relative;
  z-index: 10;
  padding: 0 16px;
}
.hero__title {
  color: #fff;
  font-family: var(--f-tight);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 400;
  line-height: 1.06;
  text-wrap: pretty;
}
.hero__line { display: block; animation: fadeUp .6s ease-out var(--d, 0s) both; }

/* ---------- Procedimentos (procedimentos.html) ---------- */
/* Shorter banner variant of the hero used at the top of inner pages. */
.hero--sub { min-height: 460px; padding-bottom: 96px; }
.hero--sub .hero__photo { object-position: center 35%; }
.proc { background: var(--pink); }
.proc__inner { max-width: 1360px; margin: 0 auto; padding: 72px 24px 80px; }
.proc__title {
  margin-bottom: 64px;
  text-align: center;
  color: var(--ink);
  font-family: var(--f-tight);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: pretty;
}
.proc__row {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 560px);
  justify-content: center;
  align-items: center;
  column-gap: 72px;
  row-gap: 32px;
}
.proc__row + .proc__row { margin-top: 72px; }
.proc__row--flip { grid-template-columns: minmax(0, 560px) minmax(0, 520px); }
.proc__row--flip .proc__block { order: 2; }
.proc__row--flip .proc__text { order: 1; }
.proc__text { display: flex; flex-direction: column; gap: 20px; }
.proc__eyebrow { color: var(--grey); font-family: var(--f-round); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; }
.proc__name {
  color: var(--ink);
  font-family: var(--f-tight);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  text-wrap: pretty;
}
.proc__desc { max-width: 520px; color: var(--ink-strong); font-family: var(--f-round); font-size: 20px; line-height: 1.45; text-wrap: pretty; }
/* The chat card's first line fades in when the block scrolls into view, like the original. */
.js .proc .chat__ghost { animation: none; opacity: 0; }
.js .proc .card-wrap.seen .chat__ghost { animation: fadeUp .6s ease-out .2s both; }
@media (max-width: 899px) {
  .proc__row, .proc__row--flip { grid-template-columns: minmax(0, 520px); }
  .proc__row--flip .proc__block, .proc__row--flip .proc__text { order: 0; }
  .proc__row + .proc__row { margin-top: 56px; }
}

/* ---------- Inner pages: Portfólio, Studio, Avaliações, Localização ---------- */
.page { background: var(--pink); }
.page__inner { max-width: 1360px; margin: 0 auto; padding: 72px 24px 96px; }
.page__intro {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  color: var(--ink-strong);
  font-family: var(--f-round);
  font-size: 20px;
  line-height: 1.45;
  text-wrap: pretty;
}
.card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Portfólio: photo grid (each tile is a placeholder until a photo is dropped in) */
.port__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.port__tile { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, var(--pink-mid), var(--pink-light)); }
.port__tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.port__tile:hover > img { transform: scale(1.05); }
.port__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink-warm); font-family: var(--f-round); font-size: 16px; opacity: .55;
  transition: transform .8s var(--ease-out);
}
.port__ph svg { width: 34px; height: 34px; }
.port__tile:hover .port__ph { transform: scale(1.06); }
.port__cap {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(252,223,223,.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink-warm); font-family: var(--f-round); font-size: 16px;
  transition: transform .5s var(--ease-out);
}
.port__tile:hover .port__cap { transform: translateY(-4px); }

/* Studio: three highlight cards under the photo + text row */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.feat { padding: 32px; border-radius: 24px; background: rgba(217,173,173,.38); }
.feat__n { color: var(--grey); font-family: var(--f-round); font-size: 13px; letter-spacing: .15em; }
.feat__t { margin: 12px 0 10px; color: var(--ink); font-family: var(--f-tight); font-size: 28px; font-weight: 400; line-height: 1.15; }
.feat__p { color: var(--ink-strong); font-family: var(--f-round); font-size: 18px; line-height: 1.45; text-wrap: pretty; }

/* Avaliações: reviews rise through the carousel card (same block as the Procedimentos carousel) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pills.pills--reviews { height: 184px; } /* .pills (later in the file) sets 80px; doubled class wins */
.pills--reviews .pill { border-radius: 28px; }
.pills--reviews .pill.is-active { height: 184px; padding: 16px; align-items: flex-start; border-radius: 28px; }
.pills--reviews .pill.is-active .pill__circle { width: 48px; height: 48px; }
.pills--reviews .pill__body { height: 100%; margin-left: 4px; }
.pills--reviews .pill__on { justify-content: flex-start; gap: 4px; padding-top: 2px; }
.pills--reviews .pill__off { justify-content: center; gap: 2px; }
.rpill__initial { color: #fff; font-family: var(--f-round); font-size: 18px; font-weight: 500; }
.rpill__name { color: #fff; font-family: var(--f-round); font-size: 16px; font-weight: 500; }
.pills--reviews .pill__off .rpill__name { font-size: 15px; color: rgba(255,255,255,.85); }
.rpill__stars { color: var(--pink-text); font-size: 13px; letter-spacing: 3px; }
.rpill__text {
  margin: 4px 0 0;
  color: rgba(255,255,255,.92);
  font-family: var(--f-round);
  font-size: 15px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Localização: info + map */
.loc { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 660px); gap: 56px; justify-content: center; align-items: stretch; }
.loc__info { display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.loc__item { display: flex; flex-direction: column; gap: 8px; }
.loc__value { color: var(--ink); font-family: var(--f-tight); font-size: 28px; font-weight: 400; line-height: 1.2; text-wrap: pretty; }
.loc__info .glass-cta { align-self: flex-start; }
.loc__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.loc__btn { gap: 10px; width: 100%; max-width: 360px; justify-content: center; font-size: 18px; }
.loc__btn svg { position: relative; z-index: 1; width: 22px; height: 22px; flex: none; }
.loc__btn.is-done { filter: brightness(1.04) saturate(1.2); }
.map {
  position: relative; min-height: 440px; overflow: hidden; border-radius: 24px;
  background: linear-gradient(160deg, var(--pink-mid), var(--pink-light));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink-warm); font-family: var(--f-round); font-size: 16px; text-align: center;
}
.map svg { width: 38px; height: 38px; opacity: .55; }
.map span { opacity: .55; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 3D look for the map: a thin light edge on top, a soft grey shadow stack underneath (close and tight, then wide and diffuse) and a faint inner edge. */
.map {
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(90,90,95,.14),
    0 2px 4px rgba(70,70,76,.16),
    0 8px 16px rgba(70,70,76,.16),
    0 20px 32px -4px rgba(70,70,76,.20),
    0 40px 64px -12px rgba(70,70,76,.26);
  transform: translateZ(0);
}
.map::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -10px 24px -12px rgba(60,60,66,.22); }

@media (max-width: 899px) {
  .port__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .feat-grid { margin-top: 56px; }
  .loc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .map { min-height: 320px; }
}
@media (max-width: 559px) {
  .port__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 2. Trusted by ---------- */
.trusted { background: var(--pink); padding: 64px 40px 56px; }
.trusted__title {
  margin-bottom: 48px;
  text-align: center;
  color: var(--ink);
  font-family: var(--f-tight);
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 500;
}
.marquee { position: relative; overflow: hidden; }
.marquee__fade { position: absolute; top: 0; bottom: 0; width: 64px; z-index: 10; pointer-events: none; }
.marquee__fade--l { left: 0; background: linear-gradient(to right, #FCDFDF, rgba(252,223,223,0)); }
.marquee__fade--r { right: 0; background: linear-gradient(to left, #FCDFDF, rgba(252,223,223,0)); }
.marquee__track { display: flex; width: max-content; gap: 64px; animation: marquee 35s linear infinite; }
.brandmark { display: flex; align-items: center; gap: 12px; flex-shrink: 0; opacity: .4; }
.brandmark img { height: 32px; }
.brandmark span {
  color: var(--grey);
  font-family: var(--f-satoshi);
  font-size: 30px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- 3. Craft experiences ---------- */
.craft { background: var(--pink); }
.craft__inner { max-width: 1360px; margin: 0 auto; padding: 64px 24px 80px; }
.craft__title {
  margin-bottom: 48px;
  text-align: center;
  color: var(--ink);
  font-family: var(--f-tight);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: pretty;
}
.craft__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 24px; }
.card-wrap { display: flex; flex: 1 1 320px; }
.card { position: relative; flex: 1; height: 585px; border-radius: 24px; overflow: hidden; }
/* Desktop: the three blocks fill exactly one visible screen, and the site ends there — flush with the
   WhatsApp button, no leftover pink space below it. Title, gaps and the row's floor all shrink with the
   window height so this still holds on short/unmaximized browser windows. Below 900px the cards stack,
   so they keep their natural height instead. */
@media (min-width: 900px) {
  .craft { min-height: 100vh; min-height: 100svh; display: flex; }
  .craft__inner { width: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(10px, 3vh, 40px); padding-bottom: clamp(10px, 3vh, 40px); }
  .craft__title { margin-bottom: clamp(10px, 2.6vh, 32px); font-size: clamp(26px, min(5vw, 5.6vh), 60px); }
  .craft__row { flex: 1; flex-wrap: nowrap; min-height: 360px; max-height: 680px; }
  .card { height: auto; }
}

/* Dark grey bar closing the page, right after the three blocks */
.footbar { height: 150px; background: var(--grey-dark); }

/* Card 1 — style carousel */
.card--carousel { background: var(--grey); }
.card__bg {
  position: absolute; inset: 0;
  background-image: url('https://qclay.design/lovable/groundai/backgroundCard.png');
  background-size: cover;
  background-position: center;
}
.card__dim { position: absolute; inset: 0; background: rgba(0,0,0,.1); }
.card__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.card__edge { position: absolute; left: 0; right: 0; height: 96px; pointer-events: none; }
.card__edge--top { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0)); }
.card__edge--bottom { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.3), rgba(0,0,0,0)); }

.pills { position: relative; width: 100%; height: 80px; }
.pill-wrap {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: center;
  pointer-events: none;
  transition: transform .65s var(--ease-out), opacity .4s ease-in-out;
}
.pill {
  width: 261px;
  height: 56px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8.5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: all .5s var(--ease-out);
}
.pill.is-active {
  width: calc(100% - 60px);
  margin: 0 30px;
  height: 80px;
  padding: 8.5px;
  background: rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}
.pill__circle {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.3);
  transition: all .5s var(--ease-out);
}
.pill.is-active .pill__circle { width: 63px; height: 63px; }
.pill__logo { display: none; width: 26px; height: 26px; }
.pill__dot { width: 100%; height: 100%; border-radius: 999px; background: rgba(255,255,255,.1); }
.pill.is-active .pill__logo { display: block; }
.pill.is-active .pill__dot { display: none; }
.pill__body { position: relative; flex: 1; height: 44px; margin-left: 4px; text-align: left; }
.pill__on, .pill__off {
  position: absolute; inset: 0;
  flex-direction: column; justify-content: center;
  animation: fadeIn .4s ease-in-out both;
}
.pill__on { display: none; gap: 4px; }
.pill__off { display: flex; gap: 6px; }
.pill.is-active .pill__on { display: flex; }
.pill.is-active .pill__off { display: none; }
.pill__label { color: #fff; font-family: var(--f-round); font-size: 18px; font-weight: 500; }
.pill__caption { color: rgba(255,255,255,.7); font-family: var(--f-round); font-size: 11px; letter-spacing: .15em; }
.pill__bar { height: 8px; border-radius: 999px; }
.pill__bar--1 { width: 140px; background: rgba(255,255,255,.5); }
.pill__bar--2 { width: 70px; background: rgba(255,255,255,.35); }

/* Card 2 — chat */
.card--chat {
  background: var(--grey-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 0;
}
.chat__top { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-bottom: 24px; }
.chat__ghost {
  position: relative;
  margin: 0 58px;
  height: 108px;
  padding: 22px 22px 0;
  display: flex;
  align-items: flex-start;
  border-radius: 16px;
  background: #FAFAFA14;
  animation: fadeUp .6s ease-out .2s both;
}
.skel-avatar { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #FFFFFF54; }
.skel-lines { margin-left: 12px; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.skel-bar { height: 6px; border-radius: 999px; background: #FFFFFF3D; }

.bubble {
  position: relative;
  margin: 0 45px;
  height: 135px;
  padding: 22px;
  overflow: hidden;
  border-radius: 24px;
  background-color: #FAFAFA14;
  transition: background-color .7s ease-out;
}
.bubble.is-filled { background-color: var(--chat-fill); }
.bubble__empty { display: flex; align-items: flex-start; animation: fadeIn .3s ease-out both; }
.bubble__filled { display: none; animation: fadeIn .5s ease-out .15s both; }
.bubble.is-filled .bubble__empty { display: none; }
.bubble.is-filled .bubble__filled { display: block; }
.bubble__who { display: flex; align-items: center; gap: 12px; height: 44px; }
.bubble__who img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.bubble__who span { color: #fff; font-family: var(--f-round); font-size: 16px; line-height: 1; }
.bubble__filled p { margin: -9px 0 0 56px; color: #fff; font-family: var(--f-round); font-size: 15px; line-height: 1.375; }

.chat__bottom { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 32px; }
.chat__headline { width: 256px; color: #fff; font-family: var(--f-round); font-size: 36px; line-height: 40px; }
.word { display: inline-block; margin-right: .25em; }
.chat__steps { display: flex; align-items: center; }
.step {
  position: relative;
  z-index: 10;
  width: 40px; height: 40px;
  margin-left: -12px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--grey-dark);
  border-radius: 999px;
  background: var(--grey-mid);
  color: rgba(255,255,255,.75);
  font-family: var(--f-round);
  font-size: 20px;
}
.step:nth-child(2) { z-index: 20; }
.step--on { z-index: 30; margin-left: 0; background: var(--grey); color: #fff; }
/* Phones: the chat card's bottom row (256px headline + steps + padding) needs 416px, more than the screen has.
   The card could not shrink below that, so the whole page became wider than the screen and everything that
   centers on the viewport (the intro signature first of all) sat off to the right. Here the card follows the
   screen width and its contents shrink with it. */
@media (max-width: 479px) {
  .card-wrap { min-width: 0; }
  .chat__ghost { margin: 0 36px; }
  .bubble { margin: 0 24px; height: auto; min-height: 135px; }
  .chat__bottom { padding: 0 24px; gap: 12px; }
  .chat__headline { width: auto; flex: 1 1 0; min-width: 0; font-size: clamp(24px, 7.6vw, 36px); line-height: 1.12; }
  .chat__steps { flex: none; }
}

/* Card 3 — adaptable list */
.card--list { display: flex; flex-direction: column; padding: 44px 33px 40px; background: var(--grey); }
.list__top { display: flex; flex-direction: column; gap: 26px; }
.list__title {
  color: var(--ink);
  font-family: var(--f-tight);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;
}
.list__text {
  max-width: 340px;
  color: var(--ink-strong);
  font-family: var(--f-round);
  font-size: 18px;
  line-height: 1.375;
  text-wrap: pretty;
}
.list__rows { position: relative; z-index: 10; margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.list__row {
  width: 100%;
  padding: 15px 27px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 16px;
  background: #fff;
}
.list__row span { color: var(--grey); font-family: var(--f-round); font-size: 18px; }
.list__row svg { width: 22px; height: 22px; color: #a3a3a3; }
.list__feather {
  position: absolute; left: -16px; right: -16px; bottom: -40px; height: 140px; z-index: 20; pointer-events: none;
  background: linear-gradient(to top, rgba(217,173,173,1) 0%, rgba(217,173,173,1) 35%, rgba(217,173,173,.7) 65%, rgba(217,173,173,0) 80%);
}

/* ---------- WhatsApp button ---------- */
.whatsapp {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(252,223,223,.35);
  background: var(--near-black);
  box-shadow: 0 12px 32px rgba(42,36,36,.35);
  transition: transform .35s var(--ease-out), box-shadow .35s ease-out;
}
.whatsapp:hover { transform: scale(1.08); box-shadow: 0 16px 40px rgba(42,36,36,.45); }
.whatsapp svg { width: 46px; height: 46px; }

/* ---------- Scroll reveal (only when JS runs; content is visible otherwise) ---------- */
.js [data-reveal],
.js [data-stagger] .word {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease-out var(--d, 0s), transform .7s ease-out var(--d, 0s);
}
.js [data-reveal].seen,
.js [data-stagger].seen .word {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .marquee__track { animation: none; }
}

/* ---------- Footer: grey bar, same grey as the nav bar ---------- */
.footer { background: #4F4F4F; color: #fff; font-family: var(--f-tight); }
.footer__inner { max-width: 1200px; margin: 0 auto; padding: 56px 32px 40px; display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 40px; }
.footer__logo { height: 84px; width: auto; filter: invert(1); display: block; margin: -8px 0 12px -6px; }
.footer__brand p { margin: 0; max-width: 240px; font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.72); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__col h3 { margin: 0 0 6px; font-size: 13px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.footer__col a { font-size: 17px; line-height: 1.35; color: #fff; opacity: .92; transition: opacity .25s ease, color .25s ease; }
.footer__col a:hover { opacity: 1; color: var(--pink-text); }
.footer__social { display: flex; flex-direction: column; gap: 12px; }
.footer__social a { display: inline-flex; align-items: center; gap: 12px; }
.footer__social svg { width: 22px; height: 22px; flex: none; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding: 20px 32px 24px; text-align: center; font-size: 14px; color: rgba(255,255,255,.55); }
@media (max-width: 899px) { .footer__inner { grid-template-columns: 1fr 1fr; padding: 44px 24px 32px; gap: 36px 24px; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 559px) { .footer__inner { grid-template-columns: 1fr; } }
.footer__go { margin-top: 6px; }
/* Avaliações / Procedimentos: the rotating-reviews card is made of absolutely positioned pills, so on desktop (where .card height is auto) it collapsed to zero height. Give it a real height inside these page blocks. */
.proc__row .card--carousel { min-height: 585px; }
@media (max-width: 899px) { .proc__row .card--carousel { min-height: 460px; } }
/* Avaliações: the reviews block (card + Depoimentos text) sits higher, closer to the page banner. */
.page__inner:has(> .proc__row) { padding-top: 24px; }
/* Reviews card can be moved by hand (finger swipe, mouse wheel, mouse drag): the card itself takes the gesture, the rest of the page still scrolls normally. */
.card.is-swipeable { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.card.is-swipeable:active { cursor: grabbing; }
/* Reviews: "ler completa +" hint on long reviews, and the bigger panel that opens when the highlighted review is tapped. */
.rpill__more { margin-top: 6px; font-family: var(--f-round); font-size: 12px; letter-spacing: .02em; color: var(--pink-text); }
.rev-open {
  position: absolute; left: 50%; top: 50%; z-index: 6; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto; box-sizing: border-box;
  padding: 20px 22px 24px; border-radius: 28px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(58,50,50,.74); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 18px 40px rgba(0,0,0,.28); color: #fff; touch-action: pan-y; cursor: auto; -webkit-user-select: text; user-select: text;
  opacity: 0; pointer-events: none; transform: translate(-50%, -46%) scale(.92);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent;
}
.rev-open.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.rev-open__close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.rev-open__close:hover { background: rgba(255,255,255,.26); }
.rev-open__head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.rev-open__initial { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.28); font-family: var(--f-round); font-size: 18px; font-weight: 500; }
.rev-open__name { display: block; font-family: var(--f-round); font-size: 17px; font-weight: 500; }
.rev-open__stars { display: block; margin-top: 2px; color: var(--pink-text); font-size: 14px; letter-spacing: 3px; }
.rev-open__text { margin: 14px 0 0; font-family: var(--f-round); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.95); white-space: pre-line; overflow-wrap: anywhere; }
/* Avaliações: the studio photo as the card background, darkened so the Google reviews on top stay easy to read. */
.card--reviews .card__bg { background-image: url("../assets/fundo-avaliacoes.jpg"); background-position: 42% 40%; }
.card--reviews .card__dim { background: rgba(38,30,32,.62); }
/* Avaliações: "Google" + 5 stars above the reviews (centre star biggest, the sides smaller), in the site grey. */
.card-wrap--head { flex-direction: column; gap: 16px; }
.gbadge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--grey); }
.gbadge__name { font-family: var(--f-tight); font-size: 32px; font-weight: 500; letter-spacing: -.01em; line-height: 1; }
.gbadge__stars { display: inline-flex; align-items: center; gap: 5px; }
.gbadge__stars svg { fill: currentColor; display: block; width: 18px; height: 18px; }
.gbadge__stars svg:nth-child(2), .gbadge__stars svg:nth-child(4) { width: 26px; height: 26px; }
.gbadge__stars svg:nth-child(3) { width: 38px; height: 38px; }
/* Long reviews show 3 full lines + "ler completa +" (a half-cut 4th line used to peek out above the hint). */
.pill__on:has(.rpill__more) .rpill__text { -webkit-line-clamp: 3; }
/* Avaliações: soft grey shadow stack (close and tight, then wide and diffuse) plus a thin light edge, so the reviews card lifts off the page like the map. */
.card--reviews {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35),
    0 2px 4px rgba(70,70,76,.16),
    0 10px 18px rgba(70,70,76,.18),
    0 24px 36px -4px rgba(70,70,76,.22),
    0 46px 70px -14px rgba(70,70,76,.30);
}
/* Avaliações: thin rose-white scroll indicator on the right edge of the card (the thumb moves down as the reviews pass). */
.rev-bar { position: absolute; z-index: 2; top: 64px; bottom: 64px; right: 7px; width: 4px; border-radius: 4px; background: rgba(255,255,255,.14); pointer-events: none; }
.rev-bar__thumb { position: absolute; left: 0; width: 100%; height: 44px; border-radius: 4px; background: linear-gradient(to bottom, #fff, var(--pink-text)); opacity: .85; transition: top .9s var(--ease-out); }
@media (max-width: 899px) { .rev-bar { right: 4px; width: 3px; top: 52px; bottom: 52px; } }
/* Avaliações: "swipe for more" hint. A white-rose hand presses, slides up (like a swipe) and fades, 3 times, then disappears. */
.rev-hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: 34px; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.rev-hint.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.rev-hint__trail { position: absolute; bottom: 100px; width: 3px; height: 100px; border-radius: 3px; background: linear-gradient(to top, rgba(247,212,212,0), rgba(247,212,212,.9)); transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; }
.rev-hint__hand { width: 64px; height: 64px; margin-bottom: 10px; overflow: visible; fill: #fff; filter: drop-shadow(0 3px 10px rgba(30,20,22,.55)); }
.rev-hint__ring { fill: var(--pink-text); opacity: .9; }
.rev-hint__label { color: #fff; font-family: var(--f-round); font-size: 13px; letter-spacing: .02em; text-shadow: 0 1px 8px rgba(30,20,22,.7); }
.rev-hint.is-on .rev-hint__hand { animation: rev-hand 2.8s var(--ease-out) infinite; }
.rev-hint.is-on .rev-hint__trail { animation: rev-trail 2.8s var(--ease-out) infinite; }
@keyframes rev-hand {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  14%  { transform: translateY(0) scale(.92); opacity: 1; }
  24%  { transform: translateY(0) scale(.92); opacity: 1; }
  72%  { transform: translateY(-92px) scale(.92); opacity: 1; }
  86%  { transform: translateY(-100px) scale(1); opacity: 0; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}
@keyframes rev-trail {
  0%, 22% { transform: scaleY(0); opacity: 0; }
  30%     { opacity: 1; }
  72%     { transform: scaleY(1); opacity: 1; }
  86%, 100% { transform: scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rev-hint.is-on .rev-hint__hand { animation: none; } .rev-hint.is-on .rev-hint__trail { animation: none; } }
@media (max-width: 899px) { .rev-hint { bottom: 22px; } }
/* Phone adjustments for the footer and the home page ending. */
/* The fixed WhatsApp bubble sits in the bottom-right corner: leave room below the footer so it never covers the copyright. */
@media (max-width: 899px) { .footer { padding-bottom: 56px; } }
/* Social links stay hidden until a real profile address replaces the "#" placeholder (then the column appears by itself). */
.footer__col:has(a[href="#"]) { display: none; }
/* The home page had an empty grey slab before the footer; the footer now closes the page. */
.footbar { display: none; }
/* Intro cover fades out (instead of vanishing in one frame) so phones do not stutter when the page appears. */
.intro { transition: opacity .5s ease; }
.intro.is-leaving { opacity: 0; pointer-events: none; will-change: opacity; }
/* The WhatsApp bubble gets its own layer from the start, so it is not repainted when the cover goes away. */
.whatsapp { will-change: transform; transform: translateZ(0); }
/* Inner pages (Procedimentos, Portfólio, Studio, Avaliações, Localização) have no intro: the pink at the bottom of the banner is already there when the page opens, with no rise animation. Only the home page animates it. */
.hero--sub .hero__veil, .hero--sub .hero__scrim { animation: none; will-change: auto; }

/* Localização: darker gradient on the map block (shows while the map loads) and a deeper shadow/edge around it. */
.map { background: linear-gradient(160deg, #a4797f, #cda0a6 60%, #d9b0b3); }
.map {
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 1px rgba(60,54,58,.22),
    0 3px 6px rgba(50,44,48,.22),
    0 12px 22px rgba(50,44,48,.24),
    0 26px 40px -4px rgba(50,44,48,.30),
    0 50px 80px -14px rgba(50,44,48,.40);
}
.map::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -26px 44px -20px rgba(36,30,34,.50), inset 0 14px 30px -18px rgba(36,30,34,.28); }
/* Localização: the banner shows the building photo (Torre Way) instead of the studio photo. The soft pink fade at the bottom is back (a hard cut looked wrong), but shorter than on the other pages so more of the photo shows; a light grey tint keeps the white title and menu readable. */
/* Localização: the street photo goes edge to edge, like the photo that opens the site (cover). */
.hero--predio { min-height: clamp(540px, 64vw, 880px); }
.hero--predio .hero__photo { object-fit: cover; object-position: center 45%; }
/* The signature gets a soft shadow so it stays readable over the bright sky of the photo. */
.hero--predio .brand__logo { filter: invert(1) drop-shadow(0 1px 7px rgba(70,44,54,.6)); }
/* Pink veil of this banner: diffuse and see-through, covering only the lower 19% so more of the photo is revealed, so the pink and the building blend instead of the building being cut by a pink band. */
.hero--predio .hero__veil { height: 19%; background: linear-gradient(to top, rgba(252,223,223,1) 0%, rgba(252,223,223,.93) 16%, rgba(252,223,223,.72) 34%, rgba(252,223,223,.44) 52%, rgba(252,223,223,.2) 70%, rgba(252,223,223,.07) 86%, rgba(252,223,223,0) 100%); }
.hero--predio .hero__tint { background: linear-gradient(180deg, rgba(40,44,52,.28), rgba(40,44,52,.07) 55%, rgba(40,44,52,.03)); }
.hero--predio .hero__title { text-shadow: 0 2px 18px rgba(20,24,32,.45); }
/* Localização: the address, the three buttons and the map now start right below the banner (they used to overlap its soft pink part), so the building photo shows more (the banner got taller with the full building photo, which pushed them far down). */
.hero--predio + .page { background: transparent; margin-top: 0; position: relative; z-index: 2; }
.hero--predio + .page .page__inner { padding-top: 24px; }
@media (max-width: 899px) { .hero--predio + .page { margin-top: 0; } }
/* Localização (computer / tablet): the top of the map lines up with the "ENDEREÇO" line: both columns start at the top of the row (before, the address block was centred next to the taller map). */
@media (min-width: 900px) { .hero--predio + .page .loc { align-items: start; } .hero--predio + .page .loc__info { justify-content: flex-start; } }
/* Localização buttons: a new look, soft pink cards (not pills): round icon on the left, label, small arrow on the right. */
.loc__btn {
  height: 64px; max-width: 380px; padding: 0 20px 0 12px; gap: 14px; justify-content: flex-start; text-align: left;
  border-radius: 20px; font-size: 18px; font-weight: 500; color: var(--ink-strong);
  background: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(252,223,223,.62) 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px rgba(217,173,173,.42), 0 2px 6px rgba(217,173,173,.30);
  transition: transform .3s var(--ease-out), box-shadow .3s ease, background .3s ease;
}
.loc__btn svg { flex: none; box-sizing: border-box; width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: rgba(217,173,173,.38); color: var(--ink-strong); }
.loc__btn::after { content: ""; flex: none; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .5; transition: transform .3s var(--ease-out), opacity .3s ease; }
.loc__btn:hover { filter: none; transform: translateY(-2px); background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(252,223,223,.78) 100%); box-shadow: inset 0 1px 0 #fff, 0 14px 30px rgba(217,173,173,.5), 0 3px 8px rgba(217,173,173,.35); }
.loc__btn:hover::after { transform: translateX(3px) rotate(45deg); opacity: .85; }
.loc__btn:active { transform: translateY(1px); }
/* Localização: the address + buttons block goes 1 cm (about 38px) lower; the map stays where it is. */
.hero--predio + .page .loc__info { margin-top: 38px; }
/* Mapa interativo (Leaflet + OpenStreetMap): zoom com a roda do mouse e com os dedos. Tiles suavizados para combinar com o rosa e o cinza do site. */
.map__canvas { position: absolute; inset: 0; z-index: 1; background: transparent; font-family: var(--f-round); }
.map__canvas .leaflet-tile-pane { filter: grayscale(.7) sepia(.22) hue-rotate(-18deg) saturate(1.15) contrast(.96) brightness(1.03); }
.map__canvas .leaflet-control-zoom { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px rgba(70,70,76,.25); margin: 14px; }
.map__canvas .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; font-size: 20px; color: var(--ink-strong); background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(70,59,59,.12); }
.map__canvas .leaflet-control-zoom a:hover { background: #fff; color: #c47790; }
.map__canvas .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.7); }
.map__canvas .leaflet-popup-content-wrapper { border-radius: 16px; color: var(--ink-strong); box-shadow: 0 8px 24px rgba(70,70,76,.3); }
.map__canvas .leaflet-popup-content { margin: 12px 16px; font-size: 14px; line-height: 1.4; }
.mapa-pino { background: transparent; border: 0; filter: drop-shadow(0 6px 6px rgba(70,44,54,.35)); }
/* Footer: a thin white line from edge to edge, just above the Menu / Contato headings. */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: rgba(255,255,255,.26); pointer-events: none; }
@media (max-width: 899px) { .footer::before { top: 26px; } }
/* The menu entrance animation (grows from 110px, links fade in) must run ONCE. Once it has finished the class nav-pronto (set by js/main.js) switches it off, so resizing / rotating the device across 1024px no longer makes the menu collapse and the text vanish for 3 seconds. */
.nav-pronto .nav, .nav-pronto .nav__links { animation: none; }
/* Localização, phones only: the street photo is shifted to the LEFT (the visible window of the wide photo moves to the right), so the building sits further left. */
@media (max-width: 899px) { .hero--predio .hero__photo { object-position: 68% 45%; } }
/* Avaliações: with the "Depoimentos / Quem passou por aqui recomenda" text gone from the screen, the reviews block is the only item: a single centred column. */
.page:has(.pills--reviews) .proc__row { grid-template-columns: minmax(0, 520px); }
/* The opening show (intro with the signature, header dropping in, menu growing and its text fading in, pink rising) happens only the FIRST time the site is opened in a visit.
   Afterwards the class ja-abriu (set at the very top of every page from sessionStorage) shows everything already in place, so changing page no longer replays the menu. */
.ja-abriu .hero__header, .ja-abriu .nav, .ja-abriu .nav__links, .ja-abriu .hero__veil, .ja-abriu .hero__scrim { animation: none !important; }
.ja-abriu .intro { display: none !important; }
.hero--ampla + .page .gbadge { color: #fff; filter: drop-shadow(0 1px 6px rgba(120,64,84,.4)); }
/* Avaliações: the banner is the SAME as on Studio / Portfólio / Procedimentos (same height, same pink mist), only with the pink-wall studio photo. The Google badge (white) and the reviews block rise over the lower part of the photo. */
.hero--ampla .hero__photo { object-position: 50% 55%; }
.hero--ampla + .page { background: transparent; position: relative; z-index: 2; margin-top: -230px; }
.hero--ampla + .page .page__inner { padding-top: 24px; }
@media (max-width: 899px) { .hero--ampla + .page { margin-top: -200px; } }
/* Localização, phones / tablets in portrait only: the whole tab moves up. The banner is a bit shorter and the address, the buttons and the map start higher, over the soft pink mist (a shorter-than-before mist is a bit taller so the dark text stays on pink). Computer is not affected. */
@media (max-width: 899px) {
  .hero--predio { min-height: 440px; }
  .hero--predio .hero__veil { height: 30%; }
  .hero--predio + .page { margin-top: -60px; }
}
/* Avaliações: the banner is 4 cm (about 151px) taller than the other pages, so the photo shows 4 cm more below; the reviews block keeps exactly the same place (the negative margin grows by the same amount). */
.hero--ampla { min-height: 611px; }
.hero--ampla .hero__veil { height: 42%; background: linear-gradient(to top, rgba(252,223,223,1) 0%, rgba(252,223,223,.9) 14%, rgba(252,223,223,.72) 32%, rgba(252,223,223,.5) 50%, rgba(252,223,223,.28) 68%, rgba(252,223,223,.1) 84%, rgba(252,223,223,0) 100%); }
.hero--ampla .hero__scrim { opacity: 0; }
.hero--ampla + .page { margin-top: var(--av-mt, -470px); }
@media (max-width: 899px) { .hero--ampla + .page { margin-top: var(--av-mt-cel, -351px); } }
/* Phone / tablet menu (below 1024px): only the person icon and the three-bar menu button, each 3px larger (button 44 -> 47px, icon 24 -> 27px). */
.nav-mobile .icon-btn { width: 56px; height: 56px; }
.nav-mobile .icon-btn svg { width: 34px; height: 34px; }

/* Início: foto panorâmica do studio. No celular (tela alta) só cabe uma faixa dela: centraliza na maca/janela. */
.hero--home .hero__photo { object-position: 50% 50%; }
/* Celular: a foto (Monique e a cliente) ocupa a parte de cima, ocupa a parte de cima e some suavemente no rosa; o título desce para não cobrir os rostos.
   A tela de abertura usa EXATAMENTE a mesma foto (mesma altura, enquadramento e máscara), senão a imagem dava um pulo quando a abertura sumia. */
@media (max-width: 899px) {
  .hero--home .hero__photo, .hero--home .hero__tint, .intro__photo, .intro__tint {
    top: 0; bottom: auto; height: 90%; height: 90svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: 0 0; mask-position: 0 0;
  }
  /* Celular: a MESMA panoramica do computador, sem alterar. A tela estreita mostra uma faixa dela; 34% centraliza a maca e a profissional (que estao a ~37% da largura da foto). */
  .hero--home .hero__photo, .intro__photo { object-position: 34% 50%; }
  .hero--home .hero__center { margin-top: auto; margin-bottom: 78px; }
  .hero--home .hero__veil { height: 30%; }
}
/* o mesmo escurecimento na abertura e na página, para a cor não mudar na troca */
.intro__tint { background: linear-gradient(180deg, rgba(48,38,42,.34), rgba(48,38,42,.2) 60%, rgba(217,173,173,.3)); }
/* Início: a foto é clara no meio (janelas); escurece de leve e dá sombra no texto para a frase do título continuar legível. */
.hero--home .hero__tint { background: linear-gradient(180deg, rgba(48,38,42,.34), rgba(48,38,42,.2) 60%, rgba(217,173,173,.3)); }
.hero--home .hero__title, .hero--home .hero__cta { text-shadow: 0 2px 18px rgba(20,14,18,.5); }
/* Início: a frase nova é longa; letra menor que a dos outros títulos, quebra equilibrada em 2 blocos. */
.hero--home .hero__title { font-size: clamp(25px, 3.4vw, 44px); line-height: 1.22; max-width: 760px; text-wrap: balance; }
.hero--home .hero__line + .hero__line { margin-top: 6px; }

/* Celular, todas as páginas: o Safari do iPhone pinta a faixa da hora/ilha dinâmica com a cor de fundo do html/body (não dá para desenhar a foto ali).
   Então o fundo do html/body fica, enquanto a página está no topo, com a cor média do topo da foto de cada página (sem degradê), e a foto parece continuar até o topo.
   Depois de rolar um pouco, o JS põe a classe fora-do-topo e a faixa volta ao rosa claro do site. */
@media (max-width: 899px) {
  html:has(.hero--home), html:has(.hero--home) body { background-color: #A08081; }
  html:has(.hero--proc), html:has(.hero--proc) body { background-color: #544B4E; }
  html:has(.hero--sub:not(.hero--proc):not(.hero--ampla):not(.hero--predio)), html:has(.hero--sub:not(.hero--proc):not(.hero--ampla):not(.hero--predio)) body { background-color: #817C74; }
  html:has(.hero--ampla), html:has(.hero--ampla) body { background-color: #A0918D; }
  html:has(.hero--predio), html:has(.hero--predio) body { background-color: #5C7187; }
  html:has(.hero) .content { background: var(--pink); }
  html.fora-do-topo:has(.hero), html.fora-do-topo:has(.hero) body { background-color: var(--pink); }
}

/* Procedimentos: o banner usa a foto vertical da Monique atendendo; como o banner é uma faixa baixa e larga, o enquadramento mostra só a faixa com ela e a cliente. */
.hero--proc .hero__photo { object-position: 50% 60%; }
.hero--proc .hero__tint { background: linear-gradient(180deg, rgba(48,38,42,.42), rgba(48,38,42,.3) 60%, rgba(217,173,173,.3)); }
.hero--proc .hero__title { text-shadow: 0 2px 18px rgba(20,14,18,.55); }
@media (max-width: 899px) { .hero--proc .hero__photo { object-position: 55% 50%; } }

/* Revelação (data-revela): o texto entra esmaecido e desfocado e vai ficando nítido, sem se mover. */
.hero__line[data-revela] { animation: none; }
.rv-in { display: block; opacity: 0; filter: blur(14px); animation: rvNitido .75s cubic-bezier(0.33, 0, 0.2, 1) .1s forwards; }
@keyframes rvNitido {
  0%   { opacity: 0; filter: blur(14px); }
  45%  { opacity: .55; filter: blur(7px); }
  100% { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .rv-in { opacity: 1; filter: none; animation: none; } }

/* Procedimentos, bloco do Microblading: a foto do procedimento no lugar da imagem padrão do cartão. */
.card--microblading .card__bg { background-image: url("../assets/procedimento-microblading.jpg"); background-position: 22% 50%; }

/* Procedimentos, bloco do Tattoo: foto da tatuagem no lugar da imagem padrão. */
.card--tattoo .card__bg { background-image: url("../assets/procedimento-tattoo.jpg"); background-position: 50% 40%; }

/* Procedimentos: os quadrantes ganham profundidade. Sombras em camadas, rosadas (de perto, média e ampla e difusa), uma borda clara bem fina e um brilho interno no topo; no computador eles "levantam" de leve ao passar o mouse. */
.proc .card {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 4px rgba(120,64,84,.14),
    0 10px 18px rgba(120,64,84,.16),
    0 26px 40px -6px rgba(120,64,84,.2),
    0 52px 80px -16px rgba(120,64,84,.28);
  transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
@media (hover: hover) and (min-width: 900px) {
  .proc .card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.6),
      inset 0 1px 0 rgba(255,255,255,.4),
      0 4px 8px rgba(120,64,84,.16),
      0 16px 26px rgba(120,64,84,.18),
      0 36px 54px -6px rgba(120,64,84,.24),
      0 70px 100px -18px rgba(120,64,84,.34);
  }
}

/* Procedimentos: o texto de cada procedimento ganha uma estrutura (painel de vidro claro com borda e sombra suave, filete rosa antes do título, linha fina depois dele e um número grande bem clarinho ao fundo), para a escrita não ficar solta no vazio. */
.proc .proc__row { align-items: stretch; counter-increment: procnum; }
.proc__inner { counter-reset: procnum 1; }
.proc .proc__text {
  position: relative; overflow: hidden; justify-content: center;
  padding: 48px 48px 52px; border-radius: 24px;
  background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.26));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.7),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(120,64,84,.07),
    0 12px 24px -4px rgba(120,64,84,.1),
    0 30px 50px -14px rgba(120,64,84,.16);
}
.proc .proc__text::after {
  content: "0" counter(procnum); position: absolute; right: 30px; top: 6px; z-index: 0; pointer-events: none;
  color: rgba(217,173,173,.3); font-family: var(--f-tight); font-size: 132px; font-weight: 300; line-height: 1; letter-spacing: -.02em;
}
.proc .proc__text > * { position: relative; z-index: 1; }
.proc .proc__name::before { content: ""; display: block; width: 52px; height: 3px; margin-bottom: 22px; border-radius: 3px; background: linear-gradient(90deg, var(--pink-mid), var(--pink-text)); }
.proc .proc__name::after { content: ""; display: block; width: 100%; max-width: 480px; height: 1px; margin-top: 24px; background: linear-gradient(90deg, rgba(217,173,173,.85), rgba(217,173,173,0)); }
@media (max-width: 899px) {
  .proc .proc__text { padding: 34px 28px 38px; }
  .proc .proc__text::after { font-size: 78px; right: 18px; top: -4px; }
}
/* Procedimentos: a janela e o prédio da foto estouravam na luz; baixa o brilho, aumenta um pouco o contraste e escurece mais o topo (onde ficam o logo e o menu). */
.hero--proc .hero__photo { filter: brightness(.78) contrast(1.12) saturate(1.05); }
.hero--proc .hero__tint { background: linear-gradient(180deg, rgba(40,32,36,.5), rgba(40,32,36,.32) 55%, rgba(217,173,173,.3)); }

/* Início: sem o botão "agendar agora" o título fica no mesmo lugar de antes (no computador, sobe metade da altura que o botão ocupava). */
@media (min-width: 900px) { .hero--home .hero__center { padding-bottom: 84px; } }

/* ===== Procedimentos: peça única do Microblading =====
   Foto grande com o título por cima, sombras em camadas, textura de grão, brilho que atravessa a foto e movimento ao aparecer na tela. */
.pfeat {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1160px; margin: 0 auto 80px; aspect-ratio: 4 / 3; border-radius: 32px;
  background: #1b1416; color: #fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.45),
    0 2px 4px rgba(120,64,84,.16),
    0 14px 24px rgba(120,64,84,.18),
    0 40px 60px -8px rgba(120,64,84,.26),
    0 80px 120px -24px rgba(120,64,84,.38);
}
.pfeat__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pfeat__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; transform: scale(1); transition: transform 3.2s var(--ease-out); }
.pfeat:hover .pfeat__img { transform: scale(1.045); }
/* luz e sombra: topo e base escuros para o texto, vinheta leve nas laterais */
.pfeat__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18,12,14,.78) 0%, rgba(18,12,14,.28) 22%, rgba(18,12,14,0) 42%, rgba(18,12,14,0) 62%, rgba(18,12,14,.62) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}
/* textura: grão fino por cima da foto */
.pfeat__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
/* brilho diagonal que atravessa a foto */
.pfeat__shine { position: absolute; inset: -30% -10%; z-index: 3; pointer-events: none; transform: translateX(-130%); background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 58%); }
.pfeat__tag {
  position: absolute; z-index: 5; top: 34px; right: 36px; padding: 8px 16px; border-radius: 999px;
  font-family: var(--f-round); font-size: 14px; letter-spacing: .2em; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.pfeat__title {
  position: absolute; z-index: 5; left: 44px; top: 30px; margin: 0; max-width: calc(100% - 140px);
  font-family: var(--f-tight); font-weight: 300; font-size: clamp(40px, 9.6vw, 120px); line-height: 1; letter-spacing: -.025em; color: #F7EBEC;
  text-shadow: 0 6px 36px rgba(0,0,0,.5);
}
.pfeat__t { position: relative; display: inline-block; }
/* eco em contorno atrás do título, dá profundidade e "ação" quando entra */
.pfeat__title::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; white-space: nowrap;
  transform: translate(11px, 11px); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.45); text-shadow: none; pointer-events: none;
}
.pfeat__panel {
  position: absolute; z-index: 5; right: 34px; bottom: 34px; width: min(430px, 46%); padding: 26px 30px 30px; border-radius: 24px;
  background: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 22px 50px rgba(0,0,0,.4);
}
.pfeat__panel p { margin: 0; font-family: var(--f-round); font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.96); text-wrap: pretty; }
.pfeat__line { display: block; width: 46px; height: 3px; margin-bottom: 16px; border-radius: 3px; background: linear-gradient(90deg, var(--pink-mid), var(--pink-text)); transform-origin: 0 50%; }

/* movimento: só começa quando o bloco aparece na tela (o site marca com .seen) */
.js .pfeat:not(.seen) .pfeat__img { transform: scale(1.18); }
.js .pfeat:not(.seen) .pfeat__t { opacity: 0; filter: blur(16px); transform: translateY(22px); }
.js .pfeat:not(.seen) .pfeat__title::after { opacity: 0; transform: translate(-26px, -12px); }
.js .pfeat:not(.seen) .pfeat__panel { opacity: 0; transform: translateY(34px); }
.js .pfeat:not(.seen) .pfeat__tag { opacity: 0; transform: translateY(-14px); }
.js .pfeat:not(.seen) .pfeat__line { transform: scaleX(0); }
.pfeat__img { transition: transform 3.6s var(--ease-out); }
.pfeat__t { transition: opacity 1.2s ease-out .3s, filter 1.2s ease-out .3s, transform 1.2s var(--ease-out) .3s; }
.pfeat__title::after { transition: opacity 1.4s ease-out .7s, transform 1.4s var(--ease-out) .7s; }
.pfeat__panel { transition: opacity 1s ease-out .9s, transform 1s var(--ease-out) .9s; }
.pfeat__tag { transition: opacity .8s ease-out .5s, transform .8s var(--ease-out) .5s; }
.pfeat__line { transition: transform .9s var(--ease-out) 1.4s; }
.pfeat.seen .pfeat__shine { animation: pfSweep 2.2s ease-in-out 1.1s 1 both; }
.pfeat:hover .pfeat__shine { animation: pfSweep 1.6s ease-in-out 0s 1 both; }
@keyframes pfSweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

@media (max-width: 899px) {
  .pfeat { aspect-ratio: 3 / 4.4; border-radius: 0; margin: 0 -24px 56px; max-width: none; box-shadow: none; }
  .pfeat__img { object-position: 28% 50%; }
  .pfeat__tag { top: 22px; right: 20px; padding: 6px 12px; font-size: 12px; }
  .pfeat__title { left: 22px; top: 22px; max-width: calc(100% - 90px); font-size: clamp(28px, 8.6vw, 42px); }
  .pfeat__title::after { transform: translate(6px, 6px); }
  .pfeat__panel { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 20px 22px 24px; border-radius: 20px; }
  .pfeat__panel p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pfeat:not(.seen) .pfeat__img, .js .pfeat:not(.seen) .pfeat__t, .js .pfeat:not(.seen) .pfeat__title::after,
  .js .pfeat:not(.seen) .pfeat__panel, .js .pfeat:not(.seen) .pfeat__tag, .js .pfeat:not(.seen) .pfeat__line { opacity: 1; filter: none; transform: none; }
  .pfeat.seen .pfeat__shine, .pfeat:hover .pfeat__shine { animation: none; }
}

/* Procedimentos: o banner aceita ajuste manual (procedimentos.html?ajuste): opacidade do rosa, altura da imagem e altura do degradê. Sem o modo de ajuste valem os valores padrão. */
.hero--proc { min-height: var(--pk-alt, 460px); }
.hero--proc .hero__veil { opacity: var(--pk-op, 1); height: var(--pk-h, 47%); }
/* Valores escolhidos pela dona no painel de ajuste (computador): imagem 780 px, rosa 100%, degradê 20%. O celular continua com 460 px / 100% / 47%. */
@media (min-width: 900px) {
  .hero--proc { min-height: var(--pk-alt, 780px); }
  .hero--proc .hero__veil { height: var(--pk-h, 20%); }
}

/* ===== Microblading ajustável (procedimentos.html?ajuste, aba "Microblading") =====
   Foto subir/descer e zoom, título subir/descer, altura do bloco e degradês nas bordas (para tirar o "risco seco" entre a foto e o rosa).
   Sem o modo de ajuste valem os valores padrão abaixo (iguais ao visual anterior). */
.pfeat {
  background: transparent; overflow: visible;
  aspect-ratio: 100 / var(--pm-h, 75);
  box-shadow: var(--pm-sombra,
    0 0 0 1px rgba(255,255,255,.45),
    0 2px 4px rgba(120,64,84,.16),
    0 14px 24px rgba(120,64,84,.18),
    0 40px 60px -8px rgba(120,64,84,.26),
    0 80px 120px -24px rgba(120,64,84,.38));
}
.pfeat__media {
  background: #1b1416; border-radius: inherit;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--pm-fl, 0%), #000 calc(100% - var(--pm-fl, 0%)), transparent 100%), linear-gradient(to bottom, transparent 0%, #000 var(--pm-ft, 0%), #000 calc(100% - var(--pm-fb, 0%)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--pm-fl, 0%), #000 calc(100% - var(--pm-fl, 0%)), transparent 100%), linear-gradient(to bottom, transparent 0%, #000 var(--pm-ft, 0%), #000 calc(100% - var(--pm-fb, 0%)), transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.pfeat__img { scale: var(--pm-z, 1); }
/* a foto inteira (bloco todo, com o título) sobe e desce; valor negativo sobe e pode passar por cima do banner */
.pfeat { margin-top: var(--pm-my, 0px); z-index: 11; }
.pfeat__title { top: var(--pm-tt, 30px); }
@media (max-width: 899px) {
  .pfeat { aspect-ratio: 100 / var(--pm-h, 147); }
  .pfeat__title { top: var(--pm-tt, 22px); }
}

/* ===== Procedimentos: foto 2, logo abaixo da imagem do Microblading (mesmo acabamento: cantos redondos e sombra rosada em camadas) ===== */
.pphoto { margin: 0 auto 80px; max-width: 620px; aspect-ratio: 3 / 4; border-radius: 32px; overflow: visible; background: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.45), 0 2px 4px rgba(120,64,84,.16), 0 14px 24px rgba(120,64,84,.18), 0 40px 60px -8px rgba(120,64,84,.26), 0 80px 120px -24px rgba(120,64,84,.38); }
.pphoto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 899px) { .pphoto { max-width: none; margin: 0 -24px 56px; border-radius: 0; box-shadow: none; } }
/* A foto 2 fica colada embaixo da imagem do Microblading (sem faixa rosa no meio). */
.pfeat:has(+ .pphoto) { margin-bottom: 0; }
.pphoto { position: relative; z-index: var(--tt-z, 10); }   /* 10 = atras da foto do Microblading; 12 = por cima dela (chave "Por cima da foto de cima" do editor) */   /* abaixo do bloco do Microblading (z 11), para a palavra MICROBLADING na linha de divisao ficar por cima das duas fotos */
@media (min-width: 900px) { .pphoto { margin-bottom: 34px; } }   /* compensa os 46 px que a foto sobe para colar no bloco de cima, mantendo ~80 px ate o proximo quadro */

/* Foto da tattoo: zoom-in ligado a rolagem (o JS muda --pp-s). O padrao 1 vale sem JS / com "reduzir movimento". */
.pphoto img { scale: var(--pp-s, 1); transform-origin: 50% 35%; will-change: scale; }

/* Palavra TATTOO sobre a foto: a opacidade e a "transformação" dependem de quanto da foto aparece (--pp-e, de 0 a 1, calculado no js/main.js).
   Foto 100% visível = letra 100% nítida, opaca e no lugar. Foto só em parte = letra transparente, borrada, menor, mais baixa e com as letras afastadas.
   Sem JS ou com "reduzir movimento", --pp-e fica em 1 (letra completa). */
/* a foto fica num recorte proprio (cantos redondos); a palavra TATTOO fica fora dele e pode passar das bordas da imagem */
.pphoto__m { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #1b1416; }
.pphoto__m::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(18,12,14,.6) 0%, rgba(18,12,14,.25) 28%, rgba(18,12,14,0) 52%); }
.pphoto__txt { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 3; margin: 0; text-align: center; pointer-events: none;
  font-family: var(--f-tight); font-weight: 300; font-size: clamp(52px, 17.5vw, 118px); line-height: 1; color: #fff; text-transform: uppercase; }
body.ed-on .pphoto__txt { pointer-events: auto; }
.pphoto__t { display: inline-block; text-shadow: 0 4px 30px rgba(0,0,0,.45);
  opacity: calc(.1 + .9 * var(--pp-e, 1));
  transform: translateY(calc((1 - var(--pp-e, 1)) * 44px)) scale(calc(.88 + .12 * var(--pp-e, 1)));
  letter-spacing: calc(.03em + (1 - var(--pp-e, 1)) * .22em);
  padding-left: calc(.03em + (1 - var(--pp-e, 1)) * .22em);          /* compensa o espaco que o afastamento das letras deixa no fim, mantendo a palavra centralizada */
  filter: blur(calc((1 - var(--pp-e, 1)) * 6px)); }
@media (max-width: 899px) { .pphoto__txt { bottom: 6%; } }

/* TATTOO: letra bem grossa (peso 900), grande e colada no fim da imagem. Tamanho em cqw (largura da foto), então acompanha a foto no PC e no celular.
   Tudo ajustável na aba TATTOO do editor (?ajuste) pelas variáveis --tt-*. */
.pphoto { container-type: inline-size; }
.pphoto__txt { bottom: var(--tt-y, 2%); font-size: clamp(52px, 17.5vw, 118px); font-size: calc(var(--tt-sz, 23) * 1cqw); font-weight: clamp(100, var(--tt-wt, 900), 900); transform: translateX(var(--tt-x, 0px)); }
/* Espessura acima de 900: a fonte nao tem peso maior, entao engorda a letra com um contorno branco proporcional (1500 = contorno de 0,09em). */
.pphoto__t { -webkit-text-stroke: calc(max(var(--tt-wt, 900) - 900, 0) * .00015em) #fff; scale: var(--tt-w, 1) 1; letter-spacing: calc(var(--tt-ls, 0) * .01em + (1 - var(--pp-e, 1)) * .22em); padding-left: calc(var(--tt-ls, 0) * .01em + (1 - var(--pp-e, 1)) * .22em); }
@media (max-width: 899px) { .pphoto__txt { bottom: var(--tt-y, 2%); } }

/* Microblading: foto sobe/desce dentro da moldura (--pm-fy) e escrita MICROBLADING em branco, peso 900, ajustavel na aba "Letra MICRO" do editor (--mt-*). */
.pfeat { container-type: inline-size; }
.pfeat__img { translate: 0 var(--pm-fy, 0%); }
/* Padrao: palavra PEQUENA, centrada exatamente na linha de divisao entre a foto do Microblading e a foto de baixo (bottom: -.5em = metade da altura da letra para fora). --mt-y sobe a partir dai. */
.pfeat__txt { position: absolute; left: 0; right: 0; bottom: calc(var(--mt-y, 0%) - .5em); z-index: 5; margin: 0; text-align: center; pointer-events: none; white-space: nowrap;
  font-family: var(--f-tight); font-weight: clamp(100, var(--mt-wt, 900), 900); font-size: calc(var(--mt-sz, 5) * 1cqw); line-height: 1; color: #fff; text-transform: uppercase;
  transform: translateX(var(--mt-x, 0px)); }
.pfeat__txt .pfeat__t { -webkit-text-stroke: calc(max(var(--mt-wt, 900) - 900, 0) * .00015em) #fff; text-shadow: 0 4px 30px rgba(0,0,0,.5); scale: var(--mt-w, 1) 1; letter-spacing: calc(var(--mt-ls, 0) * .01em); padding-left: calc(var(--mt-ls, 0) * .01em); }
body.ed-on .pfeat__txt { pointer-events: auto; }
/* MICROBLADING: mesmo efeito do TATTOO. Aparece e some conforme a foto aparece na tela (--pp-e, 0 a 1, calculado no js/main.js):
   foto 100% visivel = letra 100% nitida; foto so em parte = letra transparente, borrada, menor, mais baixa e com as letras afastadas. */
.pfeat__txt .pfeat__t { transition: none;
  opacity: calc(.1 + .9 * var(--pp-e, 1));
  transform: translateY(calc((1 - var(--pp-e, 1)) * 44px)) scale(calc(.88 + .12 * var(--pp-e, 1)));
  letter-spacing: calc(var(--mt-ls, 3) * .01em + (1 - var(--pp-e, 1)) * .22em);
  padding-left: calc(var(--mt-ls, 3) * .01em + (1 - var(--pp-e, 1)) * .22em);
  filter: blur(calc((1 - var(--pp-e, 1)) * 6px)); }

/* Inicio, celular: tour pela panoramica. A tela arrasta a foto de lado; a rolagem vertical da pagina continua normal (touch-action: pan-y). */
@media (max-width: 899px) {
  .hero--home.tour-on { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
  .tour-dica { position: absolute; left: 50%; bottom: 178px; z-index: 12; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; white-space: nowrap;
    font-family: var(--f-round); font-size: 14px; color: #fff; background: rgba(40,30,34,.45); border: 1px solid rgba(255,255,255,.4);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); pointer-events: none; transition: opacity .6s ease; animation: tourDica 2.2s ease-in-out infinite; }
  .tour-dica.is-off { opacity: 0; animation: none; }
  .tour-dica__seta { font-size: 24px; line-height: 1; opacity: .9; }
  @keyframes tourDica { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(calc(-50% + 8px)); } }
  .tour-barra { position: absolute; left: 50%; bottom: 66px; z-index: 12; transform: translateX(-50%); width: 56px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.22); pointer-events: none; }
  .tour-barra__ponto { position: absolute; top: 50%; width: 11px; height: 3px; margin: -1.5px 0 0 -5.5px; border-radius: 3px; background: rgba(255,255,255,.8); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
}
@media (max-width: 899px) {
  .tour-gyro { position: absolute; left: 50%; bottom: 128px; z-index: 13; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55); cursor: pointer; white-space: nowrap;
    font-family: var(--f-round); font-size: 13px; color: #fff; background: rgba(40,30,34,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .tour-gyro__ic { font-size: 18px; line-height: 1; }
  .tour-gyro.is-on { background: rgba(217,173,173,.75); border-color: #fff; }
}
@media (min-width: 900px) { .tour-dica, .tour-barra, .tour-gyro { display: none; } }
@media (prefers-reduced-motion: reduce) { .tour-dica { animation: none; } }

/* Localizacao: banner mais baixo (o resto da pagina sobe junto) e foto enquadrada mais para baixo, cortando o ceu. */
.hero--predio { min-height: clamp(420px, 46vw, 660px); }
.hero--predio .hero__photo { object-position: center 74%; }
@media (max-width: 899px) {
  .hero--predio { min-height: 380px; }
  .hero--predio .hero__photo { object-position: 68% 78%; }
}

/* Rodape: a faixa do copyright e rosa, para quebrar o cinza. */
.footer__bottom { background: var(--pink); color: var(--ink-strong); border-top: 0; }

/* Rodape, contato: telefone do WhatsApp com icone, no mesmo estilo do Waze e do Google Maps. */
.footer__col a.footer__wa { display: inline-flex; align-items: center; gap: 12px; }
.footer__wa svg { width: 22px; height: 22px; flex: none; }

.footer__wa svg { width: 28px; height: 28px; margin-left: -3px; margin-right: -1px; }

/* Localizacao: endereco e mapa sobem 1 cm (~38px). */
@media (min-width: 900px) { .hero--predio + .page { margin-top: -38px; } }
@media (max-width: 899px) { .hero--predio + .page { margin-top: -98px; } }

/* Celular: botao flutuante do WhatsApp menor (92px -> 74px). */
@media (max-width: 899px) { .whatsapp { width: 74px; height: 74px; right: 18px; } .whatsapp svg { width: 38px; height: 38px; } }

/* Rodape: assinatura MPaiva maior (84 -> 124px) e mais para baixo. */
.footer__logo { height: 124px; margin: 14px 0 12px -10px; }
@media (max-width: 899px) { .footer__logo { height: 104px; margin: 4px 0 8px -8px; } }

/* Avaliacoes: nova foto no fundo do quadro das avaliacoes. */
.card--reviews .card__bg { background-image: url("../assets/fundo-avaliacoes-2.jpg"); background-position: 50% 50%; }

/* Avaliacoes, computador: o quadro das avaliacoes e tudo dentro dele ficam 30% maiores (zoom). O celular nao muda. */
@media (min-width: 900px) {
  .page:has(.pills--reviews) .proc__row { grid-template-columns: minmax(0, 676px); }
  .card--reviews { zoom: 1.3; }
}

/* Avaliacoes: icone de maximizar (setas na diagonal) no canto da avaliacao em destaque, indicando que ela abre ampliada ao tocar. */
.pills--reviews .pill.is-active { position: relative; }
.pills--reviews .pill.is-active::after { content: ""; position: absolute; top: 14px; right: 16px; width: 20px; height: 20px; opacity: .75; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6'/><path d='M20 4l-7 7'/><path d='M10 20H4v-6'/><path d='M4 20l7-7'/></svg>") center / contain no-repeat; }

/* Avaliacoes: a avaliacao aberta (maximizada) usa o mesmo vidro claro da avaliacao em destaque, em vez do painel escuro. */
.rev-open { background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 20px 40px rgba(0,0,0,.18); }
.rev-open__close { background: rgba(255,255,255,.18); }

/* Avaliacoes: contorno rosa (um pouco mais escuro que o fundo do site) em volta do quadro das avaliacoes. */
.card--reviews {
  box-shadow:
    0 0 0 4px #E8B7B9,
    0 2px 4px rgba(70,70,76,.16),
    0 10px 18px rgba(70,70,76,.18),
    0 24px 36px -4px rgba(70,70,76,.22),
    0 46px 70px -14px rgba(70,70,76,.30);
}

/* Avaliacoes: contorno do quadro no rosa Rose #D45A7A (referencia da dona). */
.card--reviews { box-shadow: 0 0 0 4px #D45A7A, 0 2px 4px rgba(70,70,76,.16), 0 10px 18px rgba(70,70,76,.18), 0 24px 36px -4px rgba(70,70,76,.22), 0 46px 70px -14px rgba(70,70,76,.30); }

/* Fundo discreto de folhas (mesmo da pagina Procedimentos) nas areas rosa das outras paginas: foto sob um veu rosa a 88%, bem suave; no computador ela fica parada enquanto a pagina rola. */
.craft, .page {
  background-color: var(--pink);
  background-image: linear-gradient(rgba(252,223,223,.88), rgba(252,223,223,.88)), url("../assets/fundo-folhas.jpg");
  background-size: cover;
  background-position: center;
}
@media (min-width: 900px) { .craft, .page { background-attachment: fixed; } }

/* Studio, Avaliacoes e Localizacao: a area rosa e curta; com o fundo fixo na tela as folhas quase nao apareciam. Aqui o fundo acompanha a propria area (as folhas do centro da imagem aparecem). */
@media (min-width: 900px) { .page { background-attachment: scroll; background-position: center 42%; } }

/* Avaliacoes e Localizacao: a area abaixo do banner e transparente (sobe sobre a foto), entao o fundo de folhas vai no fundo da pagina toda. */
html:has(.hero--ampla) .content, html:has(.hero--predio) .content {
  background-color: var(--pink);
  background-image: linear-gradient(rgba(252,223,223,.88), rgba(252,223,223,.88)), url("../assets/fundo-folhas.jpg");
  background-size: cover; background-position: center;
}
@media (min-width: 900px) { html:has(.hero--ampla) .content, html:has(.hero--predio) .content { background-attachment: fixed; } }

/* Avaliacoes e Localizacao: a base do banner se dissolve no fundo de folhas (mascara), sem a linha reta que aparecia onde a foto terminava. */
.hero--ampla, .hero--predio { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%); }

/* Studio: mesmo tratamento das outras abas: um fundo de folhas por tras da pagina e a base do banner se dissolvendo nele. */
html:has(.hero--sub) .content {
  background-color: var(--pink);
  background-image: linear-gradient(rgba(252,223,223,.88), rgba(252,223,223,.88)), url("../assets/fundo-folhas.jpg");
  background-size: cover; background-position: center;
}
@media (min-width: 900px) { html:has(.hero--sub) .content { background-attachment: fixed; } }
.hero--sub { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%); }
.hero--sub + .page { background: none; }

/* Banners das abas: a foto se dissolve bem devagar no fundo de folhas (so a foto e o escurecimento; o titulo e o menu ficam intactos). Substitui a mascara que estava no banner inteiro. */
.hero--ampla, .hero--predio, .hero--sub { -webkit-mask-image: none; mask-image: none; }
.hero--sub .hero__photo, .hero--sub .hero__tint, .hero--sub .hero__scrim, .hero--sub .hero__veil {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 28%, rgba(0,0,0,.7) 48%, rgba(0,0,0,.32) 68%, rgba(0,0,0,.1) 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 28%, rgba(0,0,0,.7) 48%, rgba(0,0,0,.32) 68%, rgba(0,0,0,.1) 85%, transparent 100%);
}

/* Localizacao e Avaliacoes: a foto do banner e mais alta, entao a dissolucao comeca mais embaixo (senao a foto inteira ficava lavada). */
.hero--predio .hero__photo, .hero--predio .hero__tint, .hero--predio .hero__scrim, .hero--predio .hero__veil,
.hero--ampla .hero__photo, .hero--ampla .hero__tint, .hero--ampla .hero__scrim, .hero--ampla .hero__veil {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, rgba(0,0,0,.6) 68%, rgba(0,0,0,.28) 80%, rgba(0,0,0,.08) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 55%, rgba(0,0,0,.6) 68%, rgba(0,0,0,.28) 80%, rgba(0,0,0,.08) 92%, transparent 100%);
}

/* Localizacao e Avaliacoes: volta a dissolucao curta (so o ultimo quinto do banner), que deixava a foto nitida. */
.hero--predio .hero__photo, .hero--predio .hero__tint, .hero--predio .hero__scrim, .hero--predio .hero__veil,
.hero--ampla .hero__photo, .hero--ampla .hero__tint, .hero--ampla .hero__scrim, .hero--ampla .hero__veil { -webkit-mask-image: none; mask-image: none; }
.hero--predio, .hero--ampla { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); }

/* Todos os banners das abas (Procedimentos, Studio...): dissolucao curta, so no ultimo quinto, foto nitida. */
.hero--sub .hero__photo, .hero--sub .hero__tint, .hero--sub .hero__scrim, .hero--sub .hero__veil { -webkit-mask-image: none; mask-image: none; }
.hero--sub { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); }