/* 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; } }
/* Celular: a foto do Microblading aparece INTEIRA (sem cortar), na proporcao original 4:3, ocupando a largura do quadrante. */
@media (max-width: 899px) {
  /* nova foto (3:4, em pe): no celular vai de ponta a ponta da tela, inteira, sem margens nem cantos */
  .proc__row .card-wrap:has(.card--microblading) { margin-left: -24px; margin-right: -24px; margin-top: -88px; }   /* -88px: sobe a foto, encostando no banner */
  .proc__row .card--microblading { min-height: 0; height: auto; aspect-ratio: 3 / 4; border-radius: 0; box-shadow: none; }
  .card--microblading .card__bg { background-size: cover; background-position: center; }
}
/* 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;
  }
  .hero--home .hero__photo, .intro__photo { object-position: 70% 15%; }
  .hero--home .hero__center { margin-top: auto; margin-bottom: -6px; }
  .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: #4C4229; }
  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% 28%; }
.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: 50% 55%; } }

/* 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-2.jpg"); background-position: 50% 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, computador: mostra mais a foto do banner (um pouco mais alto) e tira rosa: degrade rosa mais curto e tom rosado menos presente. O celular nao muda. */
@media (min-width: 900px) {
  .hero--proc { min-height: 540px; }
  .hero--proc .hero__veil { height: 26%; }
  .hero--proc .hero__tint { background: linear-gradient(180deg, rgba(48,38,42,.42), rgba(48,38,42,.28) 60%, rgba(217,173,173,.1)); }
}

/* 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; }

/* 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; } }

/* Procedimentos (parallax): em todas as linhas o titulo e grande, em serifa fina, e cruza a borda do bloco; ao rolar, titulo, texto e foto andam em velocidades diferentes (js/proc-parallax.js escreve --p, de -1 a 1, na linha). */
.proc__row--px .proc__text { position: relative; z-index: 3; }
.proc__row--px .proc__name {
  font-family: "Playfair Display", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(44px, 5vw, 76px);
  line-height: .98;
  letter-spacing: .01em;
  color: #B84565;
  text-shadow: 0 0 22px rgba(252,223,223,.55);
  translate: calc(var(--p, 0) * 110px + 20px) 0;
  will-change: translate;
}
.proc__row--px .proc__eyebrow, .proc__row--px .proc__desc { translate: 0 calc(var(--p, 0) * -26px); will-change: translate; }
.proc__row--px .card--carousel .card__bg {
  inset: -9% 0;
  transform: translateY(calc(var(--p, 0) * 5%));
  will-change: transform;
}
/* Linha do Tattoo: bloco a direita, titulo gigante vindo da esquerda para cima da foto. */
.proc__row--tattoo .proc__name {
  font-size: clamp(48px, 6vw, 92px);
  line-height: .95;
  white-space: nowrap;
  translate: calc(var(--p, 0) * -110px + 70px) 0;
}
@media (min-width: 900px) {
  .proc__row--tattoo .proc__name { margin-right: -190px; }
}
@media (max-width: 899px) {
  .proc__row--px .proc__name { translate: calc(var(--p, 0) * 28px) 0; }
  .proc__row--tattoo .proc__text { order: 0; }
  .proc__row--tattoo .proc__block { order: 1; margin-top: -.55em; }
  .proc__row--tattoo .proc__name { font-size: clamp(44px, 13vw, 68px); translate: calc(var(--p, 0) * -28px) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .proc__row--px .proc__name, .proc__row--px .proc__eyebrow, .proc__row--px .proc__desc { translate: none; }
  .proc__row--px .card--carousel .card__bg { transform: none; }
}

/* Procedimentos: descricao sobe de baixo para cima (mascara) e termina em "Leia mais", que abre o texto todo. */
.js .proc__desc-mask { overflow: hidden; }
.js .proc__desc-in { transform: translateY(110%); opacity: 0; transition: transform .9s cubic-bezier(.22,.8,.2,1) .35s, opacity .7s ease .35s; }
.js .proc__desc--rm.is-in .proc__desc-in { transform: none; opacity: 1; }
.proc__more { display: grid; grid-template-rows: 1fr; }
.proc__more-in { overflow: hidden; min-height: 0; }
.proc__more-in p { padding-top: 12px; }
.js .proc__more { grid-template-rows: 0fr; transition: grid-template-rows 1.4s cubic-bezier(.4,0,.2,1); }
.js .proc__more-in { opacity: 0; transition: opacity 1s ease; }
.js .proc__desc--rm.is-open .proc__more { grid-template-rows: 1fr; }
.js .proc__desc--rm.is-open .proc__more-in { opacity: 1; transition-delay: .3s; }
.proc__leia { display: none; margin-top: 14px; padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor; background: none; color: #B84565; font-family: var(--f-round); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.js .proc__leia { display: inline-block; align-self: flex-start; }
.proc__leia:hover { color: var(--ink-strong); }
@media (prefers-reduced-motion: reduce) {
  .js .proc__desc-in { transform: none; opacity: 1; transition: none; }
  .js .proc__more, .js .proc__more-in { transition: none; }
}

/* Procedimentos: contorno rosa (#D45A7A, o mesmo das Avaliações) em volta das fotos. No celular a foto do Microblading vai de ponta a ponta da tela, sem contorno. */
.proc .card--tattoo, .proc .card--microblading { outline: 3px solid #D45A7A; }
@media (max-width: 899px) { .proc .card--microblading { outline: 0; } }

/* Procedimentos: um brilho percorre o contorno da foto em volta sem fim (conic-gradient girando; so o anel aparece, via mask). */
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.proc .card-wrap:has(.card--tattoo, .card--microblading) { position: relative; }
.proc .card-wrap:has(.card--tattoo, .card--microblading)::after {
  content: ""; position: absolute; inset: -3px; padding: 3px; border-radius: 27px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--giro), rgba(255,214,224,0) 0deg, rgba(255,214,224,0) 250deg, rgba(255,214,224,.95) 335deg, #fff 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: giroBorda 7s linear infinite;
}
@keyframes giroBorda { to { --giro: 360deg; } }
@media (max-width: 899px) { .proc .card-wrap:has(.card--microblading)::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .proc .card-wrap:has(.card--tattoo, .card--microblading)::after { animation: none; display: none; } }

/* Celular: titulos do Microblading nao podem passar da tela (antes ficavam cortados). */
@media (max-width: 899px) {
  .proc__row--px:not(.proc__row--tattoo) .proc__name { font-size: clamp(30px, 9.5vw, 46px); translate: calc(var(--p, 0) * 16px) 0; overflow-wrap: anywhere; }
  .proc__inner { overflow-x: clip; }
}

/* Procedimentos: fundo discreto de folhas. A foto fica sob um veu rosa (quanto maior o 0.88, mais discreta); no computador ela fica parada enquanto a pagina rola. */
.proc {
  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) { .proc { background-attachment: fixed; } }

/* Celular: a foto do Tattoo tambem vai de ponta a ponta da tela, inteira (3:4), sem margens, cantos, contorno nem brilho, como a do Microblading. */
@media (max-width: 899px) {
  .proc__row .card-wrap:has(.card--tattoo) { margin-left: -24px; margin-right: -24px; }
  .proc__row .card--tattoo { min-height: 0; height: auto; aspect-ratio: 3 / 4; border-radius: 0; box-shadow: none; outline: 0; }
  .card--tattoo .card__bg { background-size: cover; background-position: center; }
  .proc .card-wrap:has(.card--tattoo)::after { display: none; }
}

/* Celular: a foto do Microblading nao sobe mais sobre o banner (antes -88px) e aparece inteira (sem o zoom do parallax, que cortava labios e queixo no topo). */
@media (max-width: 899px) {
  .proc__row .card-wrap:has(.card--microblading) { margin-top: 0; }
  .proc__row--px .card--microblading .card__bg, .proc__row--px .card--tattoo .card__bg { inset: 0; transform: none; }
}

/* Celular: so a faixa entre o banner "Nossos procedimentos" e a foto do Microblading fica lisa (sem folhas); o resto segue com o fundo de folhas. */
@media (max-width: 899px) {
  .proc { background-image: linear-gradient(var(--pink), var(--pink)), linear-gradient(rgba(252,223,223,.88), rgba(252,223,223,.88)), url("../assets/fundo-folhas.jpg"); background-size: 100% 72px, cover, cover; background-position: top, center, center; background-repeat: no-repeat; }
}

/* Procedimentos, computador: o bloco inteiro da foto (com contorno e brilho) flutua, andando mais rapido que a pagina enquanto o texto anda mais devagar; a foto ainda se mexe por dentro do quadro. Celular: parado, porque as fotos vao de ponta a ponta. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .proc__row--px .proc__block { translate: 0 calc(var(--p, 0) * 56px); will-change: translate; }
}

/* Procedimentos, versao editorial: abertura, numeros, fios, informacoes e chamada para agendar. */
.proc__intro { background: var(--pink); text-align: center; padding: 64px 24px 0; }
.proc__intro-t { margin: 0; color: var(--ink); font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.1; }
.proc__intro-t em { color: #B84565; font-style: italic; }
.proc__intro-s { margin: 18px auto 0; max-width: 520px; color: var(--ink-strong); font-family: var(--f-round); font-size: 18px; line-height: 1.5; }
.proc__intro-s::after { content: ""; display: block; width: 64px; height: 1px; background: #D45A7A; margin: 32px auto 0; }
.proc__intro + .proc { margin-top: -1px; }
.proc__intro + .proc .proc__inner { padding-top: 56px; }
.proc__num { color: #D45A7A; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 20px; letter-spacing: .08em; }
.proc__num::after { content: ""; display: inline-block; width: 44px; height: 1px; background: #D45A7A; vertical-align: middle; margin-left: 14px; }
.proc__row + .proc__row { position: relative; margin-top: 112px; }
.proc__row + .proc__row::before { content: ""; position: absolute; left: 12%; right: 12%; top: -56px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,90,122,.55), transparent); }
.proc__info { list-style: none; margin: 8px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(212,90,122,.35); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 32px; row-gap: 8px; max-width: 520px; }
.proc__info li { display: flex; flex-direction: column; gap: 4px; }
.proc__info b { color: #B84565; font-family: var(--f-round); font-weight: 400; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.proc__info span { color: var(--ink-strong); font-family: var(--f-round); font-size: 15px; }
.proc__cta { align-self: flex-start; margin-top: 10px; padding: 14px 28px; border-radius: 999px; background: #B84565; color: #fff; font-family: var(--f-round); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .3s ease, transform .3s ease; }
.proc__cta:hover { background: #9E3553; transform: translateY(-2px); }
.proc .card--list { outline: 3px solid #D45A7A; }
@media (max-width: 899px) {
  .proc__intro { padding-top: 48px; }
  .proc__info { grid-template-columns: 1fr 1fr 1fr; column-gap: 16px; }
  .proc__row + .proc__row { margin-top: 88px; }
  .proc__row + .proc__row::before { left: 24px; right: 24px; top: -44px; }
  .proc .card--list { outline: 0; }
}

/* A abertura usa o mesmo fundo de folhas da area abaixo, para nao aparecer emenda. */
.proc__intro {
  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) { .proc__intro { background-attachment: fixed; } }

/* Procedimentos: um unico fundo de folhas por tras da pagina toda; a base do banner se dissolve nele (sem a linha reta) e a abertura e a area dos blocos ficam transparentes. */
.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) { .content { background-attachment: fixed; } }
.hero--proc { -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%); }
.proc__intro, .proc { background: none; }
@media (max-width: 899px) { .proc { background: linear-gradient(var(--pink), var(--pink)) top / 100% 72px no-repeat; } }

/* Banner dissolvido bem devagar (so a foto e o escurecimento; titulo e menu intactos). */
.hero--proc { -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%);
}

/* Banner de Procedimentos: 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--proc { -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%); }