@charset "UTF-8";
/* ============================================================
   TOKENS — DESIGN.md
   ============================================================ */
:root {
  --coral-600: #E85A4A;
  --coral-500: #FF7262;
  --coral-400: #FF8674; /* light coral usado no H1 do hero */
  --coral-100: #FFD9D2;
  --ink: #101010;
  --ink-soft: #2A2522;
  --stone-500: #BFB4AE;
  --stone-300: #D9D0CA;
  --stone-200: #E8DFD9;
  --cream-200: #F5E7DF;
  --cream-100: #FFF6F2;
  --white: #FFFFFF;
  --focus-ring:#FF7262;
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Nunito", system-ui, -apple-system, sans-serif;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 9999px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --shadow-md: 0 4px 12px rgba(255,114,98,.08), 0 2px 4px rgba(16,16,16,.04);
  --shadow-lg: 0 12px 28px rgba(255,114,98,.10), 0 4px 10px rgba(16,16,16,.05);
  --shadow-floating: 0 8px 28px rgba(16,16,16,.10), 0 2px 4px rgba(16,16,16,.06);
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream-100);
  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='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.063  0 0 0 0 0.063  0 0 0 0 0.063  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
}

p {
  margin: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--white);
  z-index: 9999;
}

.skip-link:focus {
  top: 0;
}

/* ============================================================
   COUNTDOWN BANNER
   ============================================================ */
.banner {
  background: var(--ink);
  color: var(--cream-100);
  padding: 10px var(--s-5);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-4);
  font-size: 13px;
  position: relative;
  z-index: 70;
}

.banner__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}

.banner__dot {
  width: 8px;
  height: 8px;
  background: var(--coral-500);
  border-radius: var(--r-full);
  box-shadow: 0 0 0 4px rgba(255, 114, 98, 0.25);
  animation: dot-pulse 2.4s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(255, 114, 98, 0.25);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 114, 98, 0);
  }
}
.banner__count {
  display: inline-flex;
  gap: var(--s-3);
  font-variant-numeric: tabular-nums;
}

.banner__count span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  opacity: 0.85;
}

.banner__count b {
  font-weight: 700;
  font-size: 14px;
  opacity: 1;
}

.banner__sep {
  opacity: 0.6;
}

.banner__link {
  color: var(--coral-500);
  font-weight: 500;
}

.banner__link:hover {
  text-decoration: underline;
}

/* ============================================================
   SITE HEADER — 2 states
   default (top of page): full-width, no rounded, hairline bottom
   .is-floating (scrolled past banner): floating pill, margin from edges
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0;
  transition: padding var(--dur-slow) var(--ease-out);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-4);
  /* Cream BG runs edge-to-edge but content is constrained to 1200px
     by side padding that grows on wide viewports. */
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  background: rgba(255, 246, 242, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stone-200);
  border-radius: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: padding-inline var(--dur-slow) var(--ease-out), border-radius var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}

.site-header.is-floating {
  padding: var(--s-4);
  /* Outer centers the pill itself to a 1200px max-width. */
  padding-inline: max(var(--s-4), (100% - 1200px) / 2);
}

.site-header.is-floating .site-header__inner {
  /* Once the outer constrains the pill, the inner only needs
     regular 24px content padding (no max-width math). */
  padding-inline: var(--s-6);
  border-radius: var(--r-xl);
  border-bottom-color: transparent;
  box-shadow: var(--shadow-floating);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo {
  height: 53px;
  width: auto;
  display: block;
}

.site-header__nav {
  display: none;
  gap: var(--s-6);
  align-items: center;
}

.site-header__nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
  transition: color var(--dur-base) var(--ease-out);
}

.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--coral-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-header__nav a:hover {
  color: var(--coral-500);
}

.site-header__nav a:hover::after,
.site-header__nav a.is-active::after,
.site-header__nav a[aria-current=page]::after {
  transform: scaleX(1);
}

.site-header__nav a.is-active,
.site-header__nav a[aria-current=page] {
  color: var(--coral-500);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-shrink: 0;
}

.login-link {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--dur-base) var(--ease-out);
}

.login-link i {
  font-size: 18px;
}

.login-link:hover {
  color: var(--coral-500);
}

.login-link[aria-current=page] {
  color: var(--coral-500);
}

.menu-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background-color var(--dur-base) var(--ease-out);
}

.menu-toggle i {
  font-size: 20px;
}

.menu-toggle:hover {
  background: var(--cream-200);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 8px 18px;
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.btn i {
  font-size: 18px;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--coral-500);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--coral-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--lg {
  font-size: 17px;
  padding: 18px 28px;
}

/* Header WhatsApp button uses a softer cream label */
.site-header__cta {
  color: var(--cream-100);
}

.site-header__cta i {
  font-size: 20px;
}

@media (max-width: 1023px) {
  /* On mobile/tablet: only logo + hamburger.
     Nav, login link, and WhatsApp CTA all live in the drawer. */
  .site-header__cta {
    display: none;
  }
}
@media (min-width: 1024px) {
  .site-header__nav {
    display: flex;
  }
  .login-link {
    display: inline-flex;
  }
  .menu-toggle {
    display: none;
  }
}
/* ============================================================
   HERO — full-bleed video
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 44px);
  min-height: calc(100svh - 44px);
  /* The header sits above and is sticky/floating, so we offset hero
     to start below the header's first state. The fixed header overlays
     the hero only when floating; in the default state, the hero starts
     directly under the header. We therefore reduce min-height by both
     banner+header heights (~44px banner + ~85px header). */
  margin-top: -85px; /* pull up so header overlays the top of video */
  overflow: hidden;
  background: var(--ink);
  color: var(--cream-100);
  isolation: isolate;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0.55) 0%, rgba(16, 16, 16, 0.25) 35%, rgba(16, 16, 16, 0.65) 100%), radial-gradient(120% 80% at 25% 75%, rgba(16, 16, 16, 0.45) 0%, transparent 60%);
  z-index: 1;
}

.hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  min-height: calc(100vh - 44px);
  min-height: calc(100svh - 44px);
  padding: var(--s-24) 156px;
  display: flex;
  align-items: flex-end;
}

.hero__copy {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

/* Badge */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  background: rgba(255, 246, 242, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--cream-200);
  align-self: flex-start;
}

.hero__badge i {
  font-size: 22px;
  color: var(--coral-500);
}

/* Title */
.hero__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--cream-100);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.hero__title em {
  font-style: italic;
  color: var(--coral-400);
}

.hero__title p {
  margin: 0;
}

.hero__sub p {
  margin: 0;
}

.hero__sub p + p {
  margin-top: 0.4em;
}

/* Hero slide é o novo container relativo das mídias absolutas */
.hero__slide {
  position: relative;
  width: 100%;
}

/* Hero em modo carrossel — Splide */
.hero--carousel {
  padding: 0;
}

.hero--carousel .splide,
.hero--carousel .splide__track,
.hero--carousel .splide__list {
  width: 100%;
}

.hero--carousel .splide__slide {
  position: relative;
  overflow: hidden;
}

.hero--carousel .splide__pagination {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 4;
  padding: 0;
}

.hero--carousel .splide__pagination__page {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
}

.hero--carousel .splide__pagination__page.is-active {
  background: var(--coral-500);
  transform: scale(1.2);
}

.hero__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cream-200);
}

/* CTA group */
.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn--lg-hero {
  padding: 18px 28px;
  font-size: 17px;
  font-weight: 700;
}

.btn--ghost-light {
  background: transparent;
  color: var(--cream-200);
  border: 1.5px solid var(--cream-200);
  font-weight: 500;
}

.btn--ghost-light:hover {
  background: rgba(255, 246, 242, 0.1);
}

/* Feature strip */
.hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(217, 208, 202, 0.16);
}

.hero__feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream-200);
}

.hero__feature i {
  font-size: 20px;
  color: var(--coral-500);
}

.hero__feature-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.amenity-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 6px;
}

@media (max-width: 1024px) {
  .hero__content {
    padding: var(--s-20) var(--s-8);
  }
  .hero__title {
    font-size: clamp(40px, 8vw, 60px);
  }
}
@media (max-width: 640px) {
  .hero__content {
    padding: var(--s-16) var(--s-5);
  }
  .hero__title {
    font-size: 40px;
  }
  .hero__sub {
    font-size: 16px;
  }
}
/* ============================================================
   IMPACT BAND — 3 stats on dark ink
   ============================================================ */
.impact {
  background: var(--ink);
  padding-block: var(--s-16);
  padding-inline: max(var(--s-24), (100% - 1440px) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.impact__stat {
  flex: 1 0 0;
  min-width: 0;
  padding: 0 var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

.impact__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.02em; /* ≈ -1.52px on 76px */
  color: var(--cream-100);
  white-space: nowrap;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.impact__num em {
  font-style: normal;
  color: var(--coral-500);
}

.impact__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--stone-300);
  text-align: center;
  max-width: 28ch;
}

@media (max-width: 900px) {
  .impact {
    flex-direction: column;
    gap: var(--s-12);
    padding: var(--s-12) var(--s-6);
  }
  .impact__stat {
    padding: 0;
  }
  .impact__num {
    font-size: clamp(48px, 12vw, 76px);
  }
}
/* ============================================================
   PROBLEM — 3 cards on cream
   ============================================================ */
.problem {
  background: var(--cream-100);
  padding-block: var(--s-24);
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.problem__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}

.problem__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em; /* 1.2px @ 12px */
  color: var(--coral-500);
  text-transform: uppercase;
}

.problem__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em; /* -0.88px @ 44px */
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.problem__title em {
  font-style: normal;
  color: var(--coral-500);
}

.problem__grid {
  display: flex;
  gap: var(--s-6);
  align-items: stretch;
}

.problem-card {
  flex: 1 0 0;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-6) 28px;
}

.problem-card__illustration {
  position: relative;
  width: 100%;
  height: 211px;
}

.problem-card__glow,
.problem-card__scene {
  position: absolute;
  display: block;
  pointer-events: none;
}

.problem-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em; /* -0.26px @ 26px */
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.problem-card__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Per-card illustration positioning, exact from Figma */
.problem-card--home-office .problem-card__glow {
  left: 68px;
  top: 96px;
  width: 217px;
  height: 82px;
}

.problem-card--home-office .problem-card__scene {
  left: 10px;
  top: 11px;
  width: 333px;
  height: 189px;
}

.problem-card--cafeteria .problem-card__glow {
  left: 87px;
  top: 85px;
  width: 179px;
  height: 90px;
}

.problem-card--cafeteria .problem-card__scene {
  left: 6.26px;
  top: 19.07px;
  width: 347.744px;
  height: 180.933px;
}

.problem-card--sala .problem-card__glow {
  left: 87px;
  top: 78px;
  width: 179px;
  height: 90px;
}

.problem-card--sala .problem-card__scene {
  left: 5.06px;
  top: 8px;
  width: 341px;
  height: 195px;
}

@media (max-width: 1024px) {
  .problem__grid {
    flex-direction: column;
  }
  .problem__title {
    font-size: clamp(28px, 5vw, 44px);
  }
}
/* ============================================================
   SOLUTION + SOCIAL PROOF
   ============================================================ */
.solution-block {
  background: var(--cream-100);
  padding-bottom: 124px;
  display: flex;
  flex-direction: column;
}

/* Solution */
.solution {
  padding-top: 124px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  text-align: center;
}

.solution__badge {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--coral-500);
}

.solution__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 900px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.solution__title em {
  font-style: normal;
  color: var(--coral-500);
}

/* Brands marquee */
.brands {
  padding-block: 64px;
  padding-inline: 0; /* marquee runs full-width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
}

.brands__top {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-soft);
  text-align: center;
}

.brands__bottom {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

.brands__bottom a {
  color: var(--coral-600);
  text-decoration: underline;
}

.brands__bottom a:hover {
  color: var(--coral-500);
}

/* Carrossel Splide das marcas (logos) */
.brands__splide {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.brands__splide .splide__list {
  align-items: center;
}

.brand-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.brand-logo {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.25s, opacity 0.25s;
}

.brand-slide:hover .brand-logo,
.brand-slide a:hover .brand-logo {
  filter: grayscale(0%);
  opacity: 1;
}

/* Marquee viewport — capped at 1200px, centered, masked at edges */
.brands__marquee {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}

.brands__track {
  display: flex;
  gap: 48px;
  align-items: center;
  width: max-content;
  animation: marquee 36s linear infinite;
}

.brands__marquee:hover .brands__track {
  animation-play-state: paused;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(16, 16, 16, 0.55);
  white-space: nowrap;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  flex-shrink: 0;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 1024px) {
  .solution {
    padding-top: 80px;
  }
  .solution-block {
    padding-bottom: 80px;
  }
  .solution__title {
    font-size: clamp(28px, 6vw, 48px);
  }
  .brands {
    padding-block: 48px;
    gap: var(--s-6);
  }
}
/* ============================================================
   SPACES — interactive tabs
   ============================================================ */
.spaces {
  background: var(--cream-200);
  padding-block: 124px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.spaces__head {
  display: flex;
  gap: var(--s-4);
  align-items: end;
  width: 100%;
}

.spaces__head-text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.spaces__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--coral-500);
  text-transform: uppercase;
}

.spaces__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.spaces__title em {
  font-style: normal;
  color: var(--coral-600);
}

.spaces__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.32;
  color: var(--ink-soft);
  width: 331px;
  flex-shrink: 0;
}

.spaces__layout {
  display: flex;
  gap: var(--s-8);
  align-items: start;
  width: 100%;
}

/* Tab list */
.spaces__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 360px;
  flex-shrink: 0;
}

.space-tab {
  background: var(--cream-100);
  color: var(--ink-soft);
  border: 0;
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  text-align: left;
  width: 100%;
}

.space-tab:hover {
  background: var(--white);
}

.space-tab__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.space-tab__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--coral-500);
}

.space-tab__icon i {
  font-size: 24px;
}

.space-tab.is-active {
  background: var(--ink);
  color: var(--cream-100);
}

.space-tab.is-active .space-tab__icon {
  color: var(--cream-100);
}

/* Preview card */
.space-preview {
  flex: 1 0 0;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-xl);
  padding: 8px;
  height: 558px;
  display: flex;
  flex-direction: column;
}

.space-preview__image {
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}

.space-preview__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.space-preview__badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: var(--white);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-xl);
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
}

.space-preview__details {
  display: flex;
  gap: var(--s-4);
  align-items: end;
  padding: 28px 32px 32px;
}

.space-preview__info {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.space-preview__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.space-preview__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.space-preview__amenities {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--stone-300);
  flex-wrap: wrap;
}

.space-preview__amenity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
}

.space-preview__amenity i {
  font-size: 16px;
  color: var(--coral-500);
}

.space-preview__cta {
  display: inline-flex;
  align-items: center;
  background: var(--coral-500);
  color: var(--cream-100);
  border-radius: var(--r-md);
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  transition: background-color var(--dur-base) var(--ease-out);
}

.space-preview__cta:hover {
  background: var(--coral-600);
}

@media (max-width: 1024px) {
  .spaces {
    padding-block: 72px;
  }
  .spaces__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
  }
  .spaces__lede {
    width: 100%;
  }
  .spaces__title {
    font-size: clamp(28px, 5vw, 44px);
  }
  .spaces__layout {
    flex-direction: column;
  }
  .spaces__list {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .space-tab {
    flex: 1 1 calc(50% - 4px);
    min-width: 200px;
  }
  .space-preview {
    height: auto;
  }
  .space-preview__image {
    aspect-ratio: 16/10;
    flex: 0 0 auto;
  }
  .space-preview__details {
    padding: 20px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
  }
  .space-preview__cta {
    align-self: flex-start;
  }
}
/* ============================================================
   DIFFERENTIALS — 4 alternating pillar rows
   ============================================================ */
.differentials {
  background: var(--cream-100);
  padding-block: 124px;
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  align-items: center;
}

.differentials__head {
  width: 100%;
  max-width: 1248px;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: center;
  text-align: center;
  padding-inline: var(--s-6);
}

.differentials__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--coral-500);
  text-transform: uppercase;
}

.differentials__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.differentials__title em {
  font-style: normal;
  color: var(--coral-600);
}

.differentials__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 720px;
}

/* Pillars — relative for absolutely-positioned dots */
.pillars {
  position: relative;
  width: 100%;
  max-width: 1440px;
  padding-inline: 158px;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.pillar-row {
  display: flex;
  gap: 64px;
  align-items: center;
  width: 100%;
}

.pillar-text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.pillar-text__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--coral-500);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.pillar-text__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.pillar-text__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.pillar-image {
  flex: 1 0 0;
  min-width: 0;
  height: 360px;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}

.pillar-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Decorative dots — coral circles scattered behind/around pillars */
.pillar-dot {
  position: absolute;
  width: 44px;
  height: 44px;
  pointer-events: none;
}

.pillar-dot--l1 {
  left: 219px;
  top: 370px;
}

.pillar-dot--l2 {
  left: 219px;
  top: 1154px;
}

.pillar-dot--r1 {
  right: 219px;
  top: 768px;
} /* mirrored from left:1177 */
.pillar-dot--r2 {
  right: 219px;
  top: -22px;
}

@media (max-width: 1280px) {
  .pillars {
    padding-inline: var(--s-10);
  }
  .pillar-dot--l1, .pillar-dot--l2 {
    left: var(--s-4);
  }
  .pillar-dot--r1, .pillar-dot--r2 {
    right: var(--s-4);
  }
}
@media (max-width: 900px) {
  .differentials {
    padding-block: 80px;
    gap: var(--s-12);
  }
  .differentials__title {
    font-size: clamp(28px, 5vw, 44px);
  }
  .pillars {
    gap: var(--s-12);
  }
  .pillar-row,
  .pillar-row--alt {
    flex-direction: column;
    gap: var(--s-6);
  }
  /* Force consistent order on every pilar regardless of --alt:
     PILAR 0X → title → body → photo */
  .pillar-text {
    order: 1;
  }
  .pillar-image {
    order: 2;
    width: 100%;
    height: 240px;
  }
  .pillar-dot {
    display: none;
  }
}
/* ============================================================
   COMO FUNCIONA — 3 step cards on blueprint grid
   ============================================================ */
.steps {
  background-color: var(--cream-100);
  /* DESIGN.md §12.1B "blueprint" grid — only one section per page (this one) */
  background-image: linear-gradient(to right, rgba(16, 16, 16, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 16, 16, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  padding-block: 96px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.steps__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: center;
  text-align: center;
}

.steps__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--coral-500);
  text-transform: uppercase;
}

.steps__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 720px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.steps__title em {
  font-style: normal;
  color: var(--coral-600);
}

.steps__grid {
  display: flex;
  gap: var(--s-6);
  align-items: stretch;
  width: 100%;
}

.step-card {
  flex: 1 0 0;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-4);
}

.step-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.step-card__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--coral-500);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.step-card__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.step-card__icon i {
  font-size: 32px;
}

.step-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.step-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.step-card__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .steps {
    padding-block: 72px;
    gap: var(--s-8);
  }
  .steps__title {
    font-size: clamp(28px, 5vw, 44px);
  }
  .steps__grid {
    flex-direction: column;
  }
}
/* ============================================================
   PLANS
   ============================================================ */
.plans {
  background: var(--cream-100);
  padding-block: 124px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.plans__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 100%;
}

.plans__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.plans__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.plans__title em {
  font-style: normal;
  color: var(--coral-600);
}

.plans__lede {
  font: 400 17px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 980px;
}

.plans__grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  width: 100%;
}

.plans__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

/* Rotulo do espaco acima da fileira de planos principais: deixa explicito que
   todos os planos da fileira dao acesso ao espaco em destaque (estacao compartilhada). */
.plans__row-space {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-bottom: calc(var(--s-8) * -1 + 12px);
  padding: 7px 14px;
  border-radius: var(--r-full);
  font: 500 14px/1 var(--font-sans);
  background: var(--coral-100);
  color: var(--coral-600);
}

.plans__row-space strong {
  font-weight: 700;
}

.plans__row-space i {
  font-size: 16px;
}

/* Plan card — default */
.plan-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  min-width: 0;
}

.plan-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.22px;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.plan-card__sub {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.plan-card__currency {
  font: 500 18px/1 var(--font-sans);
  color: var(--ink-soft);
}

.plan-card__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.88px;
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.plan-card__period {
  font: 500 14px/1 var(--font-sans);
  color: var(--ink-soft);
}

.plan-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.plan-card__feature {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink);
}

.plan-card__feature i {
  color: var(--coral-500);
  font-size: 16px;
  flex-shrink: 0;
}

.plan-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font: 500 15px/1 var(--font-sans);
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.plan-card__cta:hover {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-1px);
}

.plan-card__fineprint {
  margin: 10px 0 0;
  font: 400 10px/1.35 var(--font-sans);
  color: var(--ink-soft);
  text-align: center;
}

/* Plan card — annual (dark) */
.plan-card--annual {
  background: #101010;
  border: none;
  border-radius: var(--r-xl);
  filter: drop-shadow(0 12px 14px rgba(255, 114, 98, 0.1));
  justify-content: center;
}

.plan-card--annual .plan-card__name {
  color: var(--white);
}

.plan-card--annual .plan-card__sub {
  color: rgba(255, 246, 242, 0.7);
}

.plan-card--annual .plan-card__currency {
  color: rgba(255, 246, 242, 0.7);
}

.plan-card--annual .plan-card__amount {
  color: var(--white);
}

.plan-card--annual .plan-card__period {
  color: rgba(255, 246, 242, 0.7);
}

.plan-card--annual .plan-card__feature {
  color: var(--cream-100);
}

.plan-card--annual .plan-card__cta {
  background: var(--coral-500);
  color: var(--white);
  box-shadow: none;
}

.plan-card--annual .plan-card__cta:hover {
  background: var(--coral-600);
}

.plan-card--annual .plan-card__fineprint {
  color: rgba(255, 246, 242, 0.6);
}

.plan-card__badge {
  position: absolute;
  top: -13px;
  left: 24px;
  background: var(--coral-500);
  color: var(--white);
  border-radius: var(--r-full);
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.48px;
}

.plan-card__badge i {
  font-size: 16px;
}

/* Chip do espaco no card em destaque — sinaliza a qual ambiente o plano da acesso */
.plan-card__space {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
  background: var(--coral-100);
  color: var(--coral-600);
}

.plan-card__space i {
  font-size: 14px;
}

.plan-card--annual .plan-card__space {
  background: rgba(255, 246, 242, 0.12);
  color: var(--cream-100);
}

/* Inauguration banner */
.inaug {
  background: #101010;
  border-radius: var(--r-xl);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  width: 100%;
}

.inaug__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.inaug__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.inaug__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.26px;
  color: var(--white);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.inaug__title em {
  font-style: normal;
  font-size: 32px;
  color: var(--coral-500);
}

.inaug__sub {
  font: 400 14px/1.4 var(--font-sans);
  color: rgba(255, 246, 242, 0.7);
  margin: 0;
}

.inaug__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--coral-500);
  color: var(--white);
  padding: 18px 28px;
  border-radius: var(--r-md);
  font: 500 17px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.inaug__cta:hover {
  background: var(--coral-600);
  transform: translateY(-1px);
}

.inaug__cta i {
  font-size: 24px;
}

/* Variante harmonica (banner de inauguracao antes dos planos): coral suave, sem o preto pesado. */
.inaug--promo {
  background: var(--coral-100);
  justify-content: center;
  gap: var(--s-3);
  padding: 20px 32px;
  text-align: center;
}

.inaug--promo .inaug__title {
  color: var(--coral-600);
  font-size: 21px;
}

.inaug__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--coral-500);
  font-size: 26px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .plans__row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .plans__row {
    grid-template-columns: 1fr;
  }
  .inaug {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
  .inaug__title {
    font-size: 22px;
  }
  .inaug__title em {
    font-size: 26px;
  }
  .inaug__cta {
    width: 100%;
    justify-content: center;
  }
}
/* ============================================================
   AUDIENCE
   ============================================================ */
.audience {
  background: var(--cream-100);
  padding-block: 124px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.audience__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.audience__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.audience__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.audience__title em {
  font-style: normal;
  color: var(--coral-600);
}

.audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  width: 100%;
}

.audience-card {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 0;
}

.audience-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-200);
  border-radius: var(--r-md);
  padding: var(--s-3);
  color: var(--coral-500);
  font-size: 24px;
  align-self: flex-start;
}

.audience-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.audience-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.audience-card__lede {
  font: 400 15px/1.65 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.audience-card__features {
  list-style: none;
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--stone-200);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.audience-card__feature {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 400 14px/1.4 var(--font-sans);
  color: var(--ink);
}

.audience-card__feature i {
  color: var(--coral-500);
  font-size: 16px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .audience__grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   COMMUNITY
   ============================================================ */
.community {
  background: var(--cream-100);
  padding-block: 124px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.community__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.community__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.community__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  white-space: nowrap;
}

.community__title em {
  font-style: normal;
  color: var(--coral-600);
}

.community__title p {
  display: inline;
  margin: 0;
}

.community__title p + p::before {
  content: " ";
}

.community__title br {
  display: none;
}

@media (max-width: 900px) {
  .community__title {
    white-space: normal;
    font-size: clamp(28px, 6vw, 36px);
  }
}
.community__grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.community__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  height: 480px;
}

/* Card icon containers (coral-bg, white icon) */
.comm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--coral-500);
  border-radius: var(--r-xl);
  color: var(--white);
  align-self: flex-start;
}

.comm-card__icon i {
  line-height: 1;
}

/* Large photo card */
.comm-photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-4);
  padding: 40px;
  background: #101010;
  color: var(--white);
  min-width: 0;
  height: 100%;
}

.comm-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.comm-photo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.64) 100%);
  pointer-events: none;
}

.comm-photo > :not(.comm-photo__img):not(.comm-photo__overlay) {
  position: relative;
  z-index: 1;
}

.comm-photo .comm-card__icon {
  padding: 14px;
  font-size: 32px;
}

.comm-photo__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  color: var(--white);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.comm-photo__sub {
  font: 400 16px/1.65 var(--font-sans);
  color: rgba(255, 246, 242, 0.78);
  margin: 0;
}

/* Right column with two stacked white cards */
.community__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: 100%;
  min-width: 0;
}

.comm-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-3);
  flex: 1 0 0;
  min-height: 0;
}

.comm-card .comm-card__icon {
  padding: var(--s-3);
  font-size: 32px;
}

.comm-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.comm-card__body {
  font: 400 15px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

/* Quote banner */
.community__quote {
  background: #101010;
  border-radius: var(--r-xl);
  padding: var(--s-8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.community__quote-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cream-100);
  text-align: center;
  max-width: 820px;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.community__quote-text em {
  font-style: normal;
  color: var(--coral-500);
}

@media (max-width: 1024px) {
  .community__row {
    grid-template-columns: 1fr;
    height: auto;
  }
  .comm-photo {
    min-height: 360px;
  }
}
/* ============================================================
   BASTIDORES
   ============================================================ */
.bastidores {
  background: var(--cream-100);
  padding-block: 124px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.bastidores__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
}

.bastidores__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.bastidores__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.bastidores__title em {
  font-style: normal;
  color: var(--coral-500);
}

.bastidores__lede {
  font: 400 17px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 640px;
}

.bastidores__grid {
  display: flex;
  gap: var(--s-8);
  align-items: center;
  justify-content: center;
}

.video-card {
  position: relative;
  background: #101010;
  width: 360px;
  height: 640px;
  border-radius: var(--r-xl);
  overflow: hidden;
  flex-shrink: 0;
}

.video-card video,
.video-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.video-card--offset {
  margin-top: 48px;
}

.video-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(16, 16, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: var(--r-full);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 1.1px;
  z-index: 2;
}

.video-card__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral-500);
  flex-shrink: 0;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 32px;
  z-index: 2;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.video-card__play:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: translate(-50%, -50%) scale(1.04);
}

.video-card__caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.video-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.22px;
  color: var(--white);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.video-card__meta {
  font: 600 11px/1 var(--font-sans);
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 1.1px;
}

@media (max-width: 768px) {
  .bastidores__grid {
    flex-direction: column;
  }
  .video-card--offset {
    margin-top: 0;
  }
}
/* ============================================================
   FAQ
   ============================================================ */
.faq {
  background: var(--cream-100);
  padding-block: 124px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
}

.faq__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.faq__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.faq__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.faq__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.faq__title em {
  font-style: normal;
  color: var(--coral-600);
}

.faq__lede {
  font: 400 16px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.faq__lede a {
  color: var(--coral-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}

.faq__lede a:hover {
  border-bottom-color: var(--coral-500);
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 1px solid var(--stone-200);
  padding-block: 18px;
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::marker {
  content: "";
}

.faq__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.faq__toggle {
  font: 700 22px/1 var(--font-sans);
  color: var(--ink);
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  transition: color var(--dur-base) var(--ease-out);
}

.faq__toggle::before {
  content: "+";
  display: inline-block;
}

.faq__item[open] .faq__toggle {
  color: var(--coral-500);
}

.faq__a {
  font: 400 15px/1.7 var(--font-sans);
  color: var(--ink-soft);
  margin: 12px 0 0;
}

@media (max-width: 1024px) {
  .faq__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  background-color: var(--coral-600);
  background-image: linear-gradient(180deg, rgba(201, 87, 74, 0.64) 64%, rgba(201, 87, 74, 0) 100%), url("/img/momment/cta-pattern.svg");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 240px 240px;
  padding-block: 124px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-6);
}

.final-cta__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--cream-100);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.final-cta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 0.95;
  letter-spacing: -1.6px;
  color: var(--white);
  margin: 0;
  max-width: 14ch;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.final-cta__lede {
  font: 400 17px/1.55 var(--font-sans);
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 56ch;
}

.final-cta__urgency {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: rgba(255, 255, 255, 0.15);
  padding: 12px 20px;
  border-radius: var(--r-full);
  color: var(--white);
  font: 500 14px/1 var(--font-sans);
}

.final-cta__urgency i {
  font-size: 20px;
  flex-shrink: 0;
}

.final-cta__urgency b {
  font-weight: 700;
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.final-cta__primary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--cream-100);
  color: var(--ink);
  padding: 22px 36px;
  border-radius: var(--r-md);
  font: 500 18px/1 var(--font-sans);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.final-cta__primary:hover {
  background: var(--white);
  transform: translateY(-2px);
}

.final-cta__primary i {
  font-size: 22px;
  color: var(--coral-500);
}

.final-cta__secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  color: var(--white);
  padding: 22px 28px;
  border-radius: var(--r-md);
  font: 500 16px/1 var(--font-sans);
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.final-cta__secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #101010;
  color: var(--cream-100);
  padding-block: 96px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.site-footer a {
  color: var(--stone-200);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.site-footer a:hover {
  color: var(--coral-500);
}

.site-footer__main {
  display: grid;
  grid-template-columns: 554px 1fr;
  gap: 78px;
  align-items: stretch;
}

/* Brand column */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
}

.site-footer__brand-desc {
  font: 400 14px/1.55 var(--font-sans);
  color: var(--cream-100);
  margin: 0;
  max-width: 320px;
}

.site-footer__logo {
  width: 465px;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Right column wrapper */
.site-footer__right {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}

.site-footer__cols {
  display: grid;
  /* Coluna do meio (CONTATO) com largura automatica pra acomodar o e-mail sem invadir a coluna seguinte. */
  grid-template-columns: 1fr auto 1fr;
  gap: 56px;
  align-items: start;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.site-footer__col a,
.site-footer__col p,
.site-footer__col span {
  overflow-wrap: anywhere;
}

.site-footer__col-title {
  font: 700 11px/1 var(--font-sans);
  color: var(--cream-100);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin: 0;
}

.site-footer__col a,
.site-footer__col p {
  font: 400 14px/1.25 var(--font-sans);
  color: var(--stone-200);
  margin: 0;
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

.site-footer__contact-item i {
  color: var(--stone-200);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.site-footer__contact-item span {
  flex: 1;
  font: 400 14px/1.25 var(--font-sans);
  color: var(--stone-200);
}

/* Divider + social row */
.site-footer__divider {
  height: 1px;
  background: rgba(232, 223, 217, 0.18);
  width: 100%;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 27px;
  flex-wrap: wrap;
}

.site-footer__social-label {
  font: 400 16px/1.55 var(--font-sans);
  color: var(--cream-100);
  margin: 0;
}

.site-footer__social-icons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.site-footer__social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--stone-200);
  color: #101010;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  font-size: 24px;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.site-footer__social-icons a:hover {
  background: var(--coral-500);
  color: var(--white);
  transform: translateY(-2px);
}

/* Back-to-top — same square as socials, coral arrow, separated from social cluster */
.site-footer__top {
  position: relative;
  margin-left: var(--s-10);
  background: transparent !important;
  color: var(--coral-500) !important;
  box-shadow: inset 0 0 0 1.5px var(--stone-200);
}

.site-footer__top:hover {
  background: var(--coral-500) !important;
  color: var(--white) !important;
  box-shadow: inset 0 0 0 1.5px var(--coral-500);
}

.site-footer__top i {
  transition: transform var(--dur-base) var(--ease-out);
}

.site-footer__top:hover i {
  transform: translateY(-3px);
}

/* Tooltip on the back-to-top button */
.site-footer__top::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  white-space: nowrap;
  background: var(--cream-100);
  color: var(--ink);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
  padding: 7px 11px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.site-footer__top::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--cream-100);
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.site-footer__top:hover::after,
.site-footer__top:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.site-footer__top:hover::before,
.site-footer__top:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Bottom bar */
.site-footer__bottom {
  border-top: 1px solid #4a4340;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.site-footer__copy {
  font: 400 14px/1.4 var(--font-sans);
  color: var(--stone-200);
  margin: 0;
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-footer__legal-nav {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__legal-nav a {
  font: 400 14px/1.4 var(--font-sans);
  color: var(--stone-200);
}

.site-footer__legal-mark {
  height: 22px;
  width: auto;
  display: block;
}

@media (max-width: 1024px) {
  .site-footer__main {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .site-footer__brand {
    gap: var(--s-6);
  }
  .site-footer__logo {
    width: 100%;
    max-width: 360px;
  }
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .site-footer__cols {
    grid-template-columns: 1fr;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }
  .site-footer__legal {
    flex-wrap: wrap;
    gap: var(--s-4);
  }
}
/* ============================================================
   MOTION SYSTEM — reveals, hero title, count-up, hovers
   ============================================================ */
/* Anchor scroll offset for sticky header */
html {
  scroll-padding-top: 100px;
}

/* ---------- Scroll reveal ----------
   Transition is defined on the END state only, so adding `.reveal` at runtime
   snaps instantly to the hidden state (no stuck mid-transition). The
   transition only kicks in when `.is-visible` is added. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---------- Hero word-by-word ---------- */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: word-up 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(60ms * var(--word-index, 0));
}

@keyframes word-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---------- Card hover lifts ---------- */
.plan-card,
.audience-card,
.comm-card,
.step-card,
.problem-card,
.video-card {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.plan-card:not(.plan-card--annual):hover,
.audience-card:hover,
.comm-card:hover,
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--stone-300);
}

.plan-card--annual:hover {
  transform: translateY(-4px);
}

.problem-card:hover {
  transform: translateY(-2px);
}

.video-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Audience card icon — gentle squeeze on parent hover */
.audience-card .audience-card__icon {
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.audience-card:hover .audience-card__icon {
  transform: scale(1.06);
  background: var(--coral-100);
}

/* Step card icon — coral pop on hover */
.step-card .step-card__icon {
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.step-card:hover .step-card__icon {
  color: var(--coral-500);
  transform: rotate(-4deg) scale(1.05);
}

/* ---------- Community photo zoom ---------- */
.comm-photo {
  overflow: hidden;
}

.comm-photo__img {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity var(--dur-base) var(--ease-out);
}

.comm-photo:hover .comm-photo__img {
  transform: scale(1.05);
  opacity: 1;
}

/* ---------- Video card pulse on active play button ---------- */
.video-card:not(.video-card--offset) .video-card__play::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: play-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}

@keyframes play-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
/* ---------- FAQ animations ---------- */
.faq__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.faq__item[open] .faq__toggle {
  transform: rotate(45deg);
}

.faq__item[open] .faq__a {
  animation: faq-fade 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes faq-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---------- Spaces preview cross-fade ---------- */
.space-preview {
  transition: opacity 200ms var(--ease-out);
}

.space-preview.is-fading {
  opacity: 0;
}

/* ---------- Plan card CTA arrow micro-motion ---------- */
.plan-card__cta::after,
.inaug__cta i {
  transition: transform var(--dur-base) var(--ease-out);
}

.inaug__cta:hover i {
  transform: translateX(4px);
}

.final-cta__primary i {
  transition: transform var(--dur-base) var(--ease-out);
}

.final-cta__primary:hover i {
  transform: scale(1.1);
}

/* ---------- Brands marquee — pause on hover ---------- */
.brands__marquee:hover .brands__track {
  animation-play-state: paused;
}

/* ---------- Banner countdown dot — already pulses, keep it ---------- */
/* ---------- Differentials decorative dots — gentle drift ---------- */
.diff-dot {
  transition: transform 800ms ease-in-out;
}

.differentials:hover .diff-dot {
  transform: translate(2px, -2px);
}

/* ============================================================
   SOBRE — page-specific sections
   ============================================================ */
/* ---------- About hero ---------- */
.page-hero {
  background: var(--cream-100);
  padding-block: 140px 96px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.page-hero__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 28ch;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.page-hero__title em {
  font-style: normal;
  color: var(--coral-600);
}

.page-hero__lede {
  font: 400 19px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ---------- Story / História ---------- */
.about-story {
  background: var(--white);
  padding-block: 120px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
}

.about-story__row {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: center;
}

.about-story__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--cream-200);
}

.about-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-story__caption {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-5);
  right: var(--s-5);
  background: rgba(16, 16, 16, 0.78);
  color: var(--cream-100);
  padding: 12px 16px;
  border-radius: var(--r-md);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}

.about-story__caption-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.about-story__caption-role {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--coral-500);
}

.about-story__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.about-story__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

.about-story__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.about-story__title em {
  font-style: normal;
  color: var(--coral-600);
}

.about-story__copy p {
  font: 400 17px/1.7 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.about-story__copy p strong {
  color: var(--ink);
  font-weight: 600;
}

.about-story__pullquote {
  margin: var(--s-3) 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 2px solid var(--coral-500);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* ---------- Values ---------- */
.about-values {
  background: var(--cream-100);
  padding-block: 120px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.about-values__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 720px;
}

.about-values__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

.about-values__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.about-values__title em {
  font-style: normal;
  color: var(--coral-600);
}

.about-values__lede {
  font: 400 17px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.value-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--stone-300);
}

.value-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.value-card__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--coral-500);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  margin: 0;
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-200);
  border-radius: var(--r-md);
  padding: var(--s-3);
  color: var(--ink);
  font-size: 24px;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.value-card:hover .value-card__icon {
  background: var(--coral-500);
  color: var(--white);
  transform: rotate(-4deg) scale(1.05);
}

.value-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.value-card__body {
  font: 400 15px/1.65 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- About closing CTA ---------- */
.page-cta {
  background-color: var(--ink);
  background-image: linear-gradient(180deg, rgba(255, 114, 98, 0) 60%, rgba(255, 114, 98, 0.08) 100%);
  color: var(--cream-100);
  padding-block: 120px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.page-cta__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

.page-cta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  max-width: 18ch;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.page-cta__title em {
  font-style: normal;
  color: var(--coral-500);
}

.page-cta__lede {
  font: 400 17px/1.6 var(--font-sans);
  color: rgba(255, 246, 242, 0.78);
  margin: 0;
  max-width: 56ch;
}

.page-cta__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s-4);
}

.page-cta__primary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--coral-500);
  color: var(--white);
  padding: 18px 30px;
  border-radius: var(--r-md);
  font: 500 17px/1 var(--font-sans);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.page-cta__primary:hover {
  background: var(--coral-600);
  transform: translateY(-2px);
}

.page-cta__primary i {
  font-size: 22px;
}

.page-cta__secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  color: var(--white);
  padding: 18px 28px;
  border-radius: var(--r-md);
  font: 500 16px/1 var(--font-sans);
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.page-cta__secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.page-cta__secondary i {
  font-size: 18px;
  transition: transform var(--dur-base) var(--ease-out);
}

.page-cta__secondary:hover i {
  transform: translateX(3px);
}

/* ---------- About responsive ---------- */
@media (max-width: 1024px) {
  .about-story__row {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-values__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .page-hero {
    padding-block: 96px 64px;
  }
  .about-story {
    padding-block: 80px;
  }
  .about-values {
    padding-block: 80px;
    gap: 40px;
  }
  .page-cta {
    padding-block: 80px;
  }
}
/* ============================================================
   ESPAÇOS & PLANOS — page-specific sections
   ============================================================ */
/* ---------- Spaces detail (alternating rows) ---------- */
.spaces-detail {
  background: var(--white);
  padding-block: 120px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.spaces-detail__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 720px;
}

.spaces-detail__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

.spaces-detail__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.spaces-detail__title em {
  font-style: normal;
  color: var(--coral-600);
}

.space-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.space-row--reverse .space-row__media {
  order: 2;
}

.space-row__media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--cream-200);
}

.space-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.space-row__media:hover img {
  transform: scale(1.04);
}

.space-row__badge {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  background: var(--cream-100);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--r-full);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-md);
}

.space-row__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.space-row__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

.space-row__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.space-row__title em {
  font-style: normal;
  color: var(--coral-600);
}

.space-row__body {
  font: 400 16px/1.7 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.space-row__features {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--stone-200);
}

.space-row__feature {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font: 400 15px/1.4 var(--font-sans);
  color: var(--ink);
}

.space-row__feature i {
  color: var(--coral-500);
  font-size: 18px;
  flex-shrink: 0;
}

.space-row__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  margin-top: var(--s-3);
  padding: 14px 22px;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font: 500 15px/1 var(--font-sans);
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.space-row__cta:hover {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-2px);
}

.space-row__cta i {
  font-size: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}

.space-row__cta:hover i {
  transform: translateX(3px);
}

/* ---------- Plans block (wraps cards + avulsos + inaug) ---------- */
.plans-block {
  background: var(--cream-100);
  padding-block: 120px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.plans-block__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 720px;
}

.plans-block__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

.plans-block__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.plans-block__title em {
  font-style: normal;
  color: var(--coral-600);
}

.plans-block__lede {
  font: 400 17px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ---------- Avulsos table ---------- */
.avulsos {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.avulsos__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.avulsos__table {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.avulsos__row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr minmax(140px, auto) minmax(150px, auto);
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--stone-200);
  transition: background-color var(--dur-base) var(--ease-out);
}

.avulsos__row:last-child {
  border-bottom: 0;
}

.avulsos__row:hover {
  background: var(--cream-100);
}

.avulsos__row--head {
  background: var(--cream-200);
  font: 700 11px/1 var(--font-sans);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding-block: var(--s-4);
}

.avulsos__row--head:hover {
  background: var(--cream-200);
}

.avulsos__cell-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.avulsos__cell-desc {
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink-soft);
}

.avulsos__cell-price {
  font: 600 17px/1 var(--font-sans);
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.avulsos__cell-price small {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: 2px;
}

.avulsos__cell-action {
  display: flex;
  justify-content: flex-end;
}

/* Gatilho "Ver detalhes" — botao discreto que ganha enfase no hover da linha */
.plan-detail-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px 16px;
  border: 1px solid var(--stone-300);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--ink);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.plan-detail-trigger i {
  font-size: 15px;
  transition: transform var(--dur-base) var(--ease-out);
}

.plan-detail-trigger:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
  transform: translateY(-1px);
}

.plan-detail-trigger:hover i {
  transform: translate(2px, -2px);
}

.avulsos__row:hover .plan-detail-trigger {
  border-color: var(--coral-500);
}

.avulsos__row:hover .plan-detail-trigger:hover {
  border-color: var(--ink);
}

.plan-detail-trigger:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

/* ---------- Plan detail modal ---------- */
.plan-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}

.plan-modal[hidden] {
  display: none;
}

.plan-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.plan-modal.is-open .plan-modal__backdrop {
  opacity: 1;
}

.plan-modal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.plan-modal.is-open .plan-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.plan-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--r-full);
  background: var(--cream-200);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.plan-modal__close i {
  font-size: 20px;
}

.plan-modal__close:hover {
  background: var(--stone-200);
  transform: rotate(90deg);
}

.plan-modal__close:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

.plan-modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.plan-modal__doc {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.plan-modal__space {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--coral-100);
  color: var(--coral-600);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
}

.plan-modal__space i {
  font-size: 14px;
}

.plan-modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.plan-modal__sub {
  font: 400 15px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.plan-modal__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--stone-200);
}

.plan-modal__currency {
  font: 500 18px/1 var(--font-sans);
  color: var(--ink-soft);
}

.plan-modal__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.plan-modal__period {
  font: 500 14px/1 var(--font-sans);
  color: var(--ink-soft);
}

.plan-modal__desc {
  font: 400 15px/1.7 var(--font-sans);
  color: var(--ink-soft);
}

.plan-modal__desc p {
  margin: 0 0 0.5em;
}

.plan-modal__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.plan-modal__meta li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.plan-modal__meta i {
  font-size: 20px;
  color: var(--coral-500);
  flex-shrink: 0;
}

.plan-modal__meta div {
  display: flex;
  flex-direction: column;
}

.plan-modal__meta span {
  font: 500 11px/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.plan-modal__meta strong {
  font: 600 15px/1.3 var(--font-sans);
  color: var(--ink);
}

.plan-modal__features {
  list-style: none;
  margin: 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--stone-200);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.plan-modal__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink);
}

.plan-modal__features i {
  color: var(--coral-500);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.plan-modal__footer {
  margin-top: var(--s-2);
}

.plan-modal__fineprint {
  margin: var(--s-3) 0 0;
  font: 400 11px/1.4 var(--font-sans);
  color: var(--ink-soft);
  text-align: center;
}

.plan-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: 16px 22px;
  border-radius: var(--r-md);
  background: var(--coral-500);
  color: var(--white);
  font: 600 16px/1 var(--font-sans);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.plan-modal__cta i {
  font-size: 20px;
}

.plan-modal__cta:hover {
  background: var(--coral-600);
  transform: translateY(-1px);
}

.plan-modal__cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Trava o scroll do body enquanto o modal esta aberto */
body.is-plan-modal-open {
  overflow: hidden;
}

/* ---------- Plans page responsive ---------- */
@media (max-width: 1024px) {
  .space-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .space-row--reverse .space-row__media {
    order: 0;
  }
  .avulsos__row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .avulsos__cell-price {
    text-align: left;
  }
  .avulsos__cell-action {
    justify-content: flex-start;
    padding-top: var(--s-2);
  }
}
@media (max-width: 640px) {
  .plan-modal {
    padding: 0;
    align-items: flex-end;
  }
  .plan-modal__panel {
    width: 100%;
    max-height: 92vh;
    padding: 32px 24px;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(100%);
  }
  .plan-modal.is-open .plan-modal__panel {
    transform: translateY(0);
  }
}
@media (max-width: 640px) {
  .spaces-detail {
    padding-block: 80px;
    gap: 64px;
  }
  .plans-block {
    padding-block: 80px;
    gap: 40px;
  }
}
/* ============================================================
   CONTATO — Option A: visit-led, editorial
   ============================================================ */
/* ---------- Visit block: photo + overlapping coral card ---------- */
.visit-block {
  background: var(--white);
  padding-block: 96px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
}

.visit-block__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}

.visit-block__photo {
  grid-column: 1/span 7;
  grid-row: 1;
  aspect-ratio: 4/3;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin: 0;
  position: relative;
}

.visit-block__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.visit-block__photo:hover img {
  transform: scale(1.04);
}

.visit-block__card {
  grid-column: 7/span 6;
  grid-row: 1;
  z-index: 2;
  background: var(--coral-500);
  color: var(--white);
  padding: 48px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  box-shadow: 0 28px 56px rgba(255, 114, 98, 0.28), 0 10px 22px rgba(16, 16, 16, 0.1);
}

.visit-block__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--cream-100);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.8;
}

.visit-block__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.visit-block__title em {
  font-style: normal;
  color: var(--cream-100);
  opacity: 0.85;
}

.visit-block__sub {
  font: 400 16px/1.6 var(--font-sans);
  color: var(--cream-100);
  margin: 0;
  opacity: 0.92;
}

.visit-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.visit-block__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--cream-100);
  color: var(--ink);
  padding: 16px 26px;
  border-radius: var(--r-md);
  font: 500 16px/1 var(--font-sans);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.visit-block__cta:hover {
  background: var(--white);
  transform: translateY(-2px);
}

.visit-block__cta i {
  font-size: 20px;
  color: var(--coral-500);
}

.visit-block__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  color: var(--white);
  padding: 16px 22px;
  border-radius: var(--r-md);
  font: 500 16px/1 var(--font-sans);
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.visit-block__cta-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.visit-block__cta-secondary i {
  font-size: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}

.visit-block__cta-secondary:hover i {
  transform: translateX(3px);
}

/* ---------- Form section (2-col: form left + info right) ---------- */
.contact-form-section {
  background: var(--cream-100);
  padding-block: 96px var(--s-12);
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* Form card */
.contact-form {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-xl);
  padding: var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  box-shadow: var(--shadow-md);
}

.contact-form__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.contact-form__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.contact-form__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.contact-form__title em {
  font-style: normal;
  color: var(--coral-600);
}

.contact-form__sub {
  font: 400 15px/1.55 var(--font-sans);
  color: var(--ink-soft);
  margin-top: var(--s-2);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form-label {
  font: 600 12px/1 var(--font-sans);
  color: var(--ink);
  letter-spacing: 0.96px;
  text-transform: uppercase;
}

.form-input,
.form-select,
.form-textarea {
  background: var(--white);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font: 400 16px/1.4 var(--font-sans);
  color: var(--ink);
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--stone-500);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--stone-500);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--coral-500);
  box-shadow: 0 0 0 3px var(--coral-100);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-sans);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23101010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.form-helper {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--ink-soft);
}

.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--coral-500);
  color: var(--white);
  padding: 18px 28px;
  border-radius: var(--r-md);
  font: 500 17px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  align-self: stretch;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.form-submit:hover {
  background: var(--coral-600);
  transform: translateY(-2px);
}

.form-submit:active {
  transform: translateY(0);
}

.form-submit i {
  font-size: 18px;
  transition: transform var(--dur-base) var(--ease-out);
}

.form-submit:hover i {
  transform: translateX(3px);
}

.form-fineprint {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.form-fineprint a {
  color: var(--coral-500);
}

.form-fineprint a:hover {
  text-decoration: underline;
}

/* ---------- Contact info aside (4 blocks + social) ---------- */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: sticky;
  top: 110px;
}

.contact-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-info__block {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.contact-info__block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--stone-300);
}

.contact-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--cream-200);
  color: var(--ink);
  font-size: 22px;
  flex-shrink: 0;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.contact-info__block:hover .contact-info__icon {
  background: var(--coral-500);
  color: var(--white);
}

.contact-info__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-info__label {
  font: 600 11px/1.2 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.contact-info__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  word-break: break-word;
}

.contact-info__meta {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--ink-soft);
}

/* Social block */
.contact-info__social {
  background: var(--ink);
  color: var(--cream-100);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.contact-info__social-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  margin: 0;
}

.contact-info__social-icons {
  display: flex;
  gap: var(--s-3);
}

.contact-info__social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--cream-100);
  color: var(--ink);
  font-size: 22px;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.contact-info__social-icons a:hover {
  background: var(--coral-500);
  color: var(--white);
  transform: translateY(-2px);
}

/* ---------- Channels: 3 quick contact cards (compact horizontal strip) ---------- */
.contact-channels {
  background: var(--cream-100);
  padding-block: 0 96px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.contact-channel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--stone-300);
}

.contact-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--cream-200);
  color: var(--ink);
  font-size: 20px;
  flex-shrink: 0;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.contact-channel:hover .contact-channel__icon {
  background: var(--coral-500);
  color: var(--white);
}

.contact-channel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.contact-channel__label {
  font: 600 10px/1.2 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.contact-channel__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-channel__arrow {
  font-size: 18px;
  color: var(--ink);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.contact-channel:hover .contact-channel__arrow {
  color: var(--coral-500);
  transform: translateX(3px);
}

/* WhatsApp dark variant */
.contact-channel--wa {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream-100);
}

.contact-channel--wa:hover {
  background: #1f1f1f;
  border-color: #1f1f1f;
}

.contact-channel--wa .contact-channel__icon {
  background: var(--coral-500);
  color: var(--white);
}

.contact-channel--wa .contact-channel__label {
  color: var(--coral-500);
}

.contact-channel--wa .contact-channel__value {
  color: var(--cream-100);
}

.contact-channel--wa .contact-channel__arrow {
  color: var(--cream-100);
}

.contact-channel--wa:hover .contact-channel__icon {
  background: var(--coral-600);
  color: var(--white);
}

/* ---------- Location: full-width map with address overlay ---------- */
.contact-location {
  background: var(--white);
  padding-block: 96px;
  padding-inline: max(var(--s-6), (100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.contact-location__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 640px;
}

.contact-location__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

.contact-location__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.contact-location__title em {
  font-style: normal;
  color: var(--coral-600);
}

.contact-location__lede {
  font: 400 17px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.contact-location__map {
  position: relative;
  aspect-ratio: 16/8;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--cream-200);
  border: 1px solid var(--stone-200);
  box-shadow: var(--shadow-lg);
  margin: 0;
}

.contact-location__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.85);
  transition: filter var(--dur-base) var(--ease-out);
}

.contact-location__map:hover iframe {
  filter: saturate(1);
}

.contact-location__overlay {
  position: absolute;
  bottom: var(--s-6);
  left: var(--s-6);
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 320px;
  max-width: calc(100% - var(--s-12));
  box-shadow: 0 12px 32px rgba(16, 16, 16, 0.18);
  border: 1px solid var(--stone-200);
}

.contact-location__overlay-eyebrow {
  font: 600 11px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin: 0;
}

.contact-location__overlay-address {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.contact-location__overlay-meta {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.contact-location__overlay-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--white);
  font: 500 14px/1 var(--font-sans);
  text-decoration: none;
  align-self: flex-start;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.contact-location__overlay-cta:hover {
  background: #1f1f1f;
  transform: translateY(-2px);
}

.contact-location__overlay-cta i {
  font-size: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}

.contact-location__overlay-cta:hover i {
  transform: translateX(3px);
}

/* ---------- Contato responsive ---------- */
@media (max-width: 1024px) {
  .visit-block__inner {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .visit-block__photo {
    grid-column: 1;
    aspect-ratio: 16/10;
  }
  .visit-block__card {
    grid-column: 1;
    padding: var(--s-8);
  }
  .contact-form-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-info {
    position: static;
  }
  .contact-channels {
    grid-template-columns: 1fr;
  }
  .contact-location__map {
    aspect-ratio: 16/11;
  }
}
@media (max-width: 640px) {
  .visit-block {
    padding-block: 64px;
  }
  .contact-form {
    padding: var(--s-6);
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-form-section {
    padding-block: 64px var(--s-12);
  }
  .contact-channels {
    padding-block: 0 64px;
  }
  .contact-location {
    padding-block: 64px;
  }
  .contact-location__overlay {
    width: auto;
    left: var(--s-4);
    right: var(--s-4);
    padding: var(--s-4);
  }
}
/* ============================================================
   LOGIN — área do cliente
   ============================================================ */
.login-page {
  background: var(--cream-100);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 220px);
  align-items: stretch;
}

.login-page__media {
  position: relative;
  overflow: hidden;
  background: var(--cream-200);
  margin: 0;
}

.login-page__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.login-page__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0) 35%, rgba(16, 16, 16, 0.55) 75%, rgba(16, 16, 16, 0.88) 100%);
  pointer-events: none;
}

.login-page__welcome {
  position: absolute;
  left: var(--s-10);
  right: var(--s-10);
  bottom: var(--s-10);
  z-index: 2;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.login-page__welcome-eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.login-page__welcome-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral-500);
  box-shadow: 0 0 0 4px rgba(255, 114, 98, 0.25);
  animation: dot-pulse 2.4s ease-in-out infinite;
}

.login-page__welcome-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  max-width: 24ch;
}

.login-page__welcome-sub {
  font: 400 16px/1.55 var(--font-sans);
  color: rgba(255, 246, 242, 0.88);
  margin: 0;
  max-width: 36ch;
}

.login-page__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-12) max(var(--s-8), (100% - 480px) / 2);
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-xl);
  padding: var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  box-shadow: var(--shadow-md);
}

.login-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.login-card__eyebrow {
  font: 500 12px/1 var(--font-sans);
  color: var(--coral-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

.login-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.login-card__sub {
  font: 400 15px/1.55 var(--font-sans);
  color: var(--ink-soft);
  margin-top: var(--s-2);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.login-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.login-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: 500 14px/1 var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.login-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--stone-300);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}

.login-checkbox input:hover {
  border-color: var(--stone-500);
}

.login-checkbox input:checked {
  background: var(--coral-500);
  border-color: var(--coral-500);
}

.login-checkbox input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 11px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.login-forgot {
  font: 500 14px/1 var(--font-sans);
  color: var(--coral-500);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.login-forgot:hover {
  color: var(--coral-600);
  text-decoration: underline;
}

.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--coral-500);
  color: var(--white);
  padding: 16px 24px;
  border-radius: var(--r-md);
  font: 500 16px/1 var(--font-sans);
  cursor: pointer;
  width: 100%;
  margin-top: var(--s-2);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.login-submit:hover {
  background: var(--coral-600);
  transform: translateY(-2px);
}

.login-submit i {
  font-size: 18px;
  transition: transform var(--dur-base) var(--ease-out);
}

.login-submit:hover i {
  transform: translateX(3px);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block: var(--s-2);
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stone-200);
}

.login-divider span {
  font: 500 11px/1 var(--font-sans);
  color: var(--stone-500);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.login-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: center;
}

.login-secondary p {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.login-secondary a {
  color: var(--coral-500);
  font-weight: 600;
  text-decoration: none;
}

.login-secondary a:hover {
  text-decoration: underline;
}

/* In-development notice (shown when user submits during preview) */
.login-notice {
  display: none;
  background: var(--cream-200);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font: 400 14px/1.55 var(--font-sans);
  color: var(--ink-soft);
}

.login-notice.is-visible {
  display: block;
}

.login-notice strong {
  color: var(--ink);
  font-weight: 600;
}

.login-notice a {
  color: var(--coral-500);
  font-weight: 600;
  text-decoration: none;
}

.login-notice a:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .login-page {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .login-page__media {
    aspect-ratio: 16/9;
    max-height: 380px;
  }
  .login-page__welcome {
    left: var(--s-6);
    right: var(--s-6);
    bottom: var(--s-6);
  }
  .login-page__content {
    padding: var(--s-10) var(--s-6);
  }
}
@media (max-width: 640px) {
  .login-page__media {
    max-height: 280px;
  }
  .login-page__welcome {
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-4);
    gap: var(--s-2);
  }
  .login-page__welcome-title {
    font-size: 22px;
  }
  .login-page__welcome-sub {
    font-size: 14px;
  }
  .login-page__content {
    padding: var(--s-8) var(--s-4);
  }
  .login-card {
    padding: var(--s-6);
  }
  .login-card__title {
    font-size: 26px;
  }
}
/* ============================================================
   AREA DO CLIENTE — autenticacao + portal (S5)
   Reaproveita .login-page / .login-card / .form-* do site. Aqui ficam apenas
   os complementos: mensagens (auth-alert), input OTP, telas do portal e tiles.
   ============================================================ */
.form-error {
  display: block;
  font: 500 13px/1.4 var(--font-sans);
  color: var(--coral-600);
  min-height: 0;
}

.form-error:empty {
  display: none;
}

/* Campo obrigatorio: aplique .form-label--req no <label> -> adiciona um asterisco vermelho (cor de erro da marca). */
.form-label--req::after {
  content: " *";
  color: var(--coral-600);
  font-weight: 700;
}

/* Toggle de senha (olho): o momment.js embrulha o input em .password-field e injeta o botão. */
.password-field {
  position: relative;
  display: block;
}

.password-field .has-password-toggle {
  padding-right: 46px;
}

.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--stone-500);
  font-size: 18px;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}

.password-toggle:hover {
  color: var(--coral-600);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 14px 16px;
  border-radius: var(--r-md);
  font: 500 14px/1.5 var(--font-sans);
  margin-bottom: var(--s-5);
}

.auth-alert i {
  font-size: 20px;
  flex-shrink: 0;
}

.auth-alert p {
  margin: 0;
}

.auth-alert--success {
  background: #ECFDF3;
  color: #18794E;
  border: 1px solid #ABEFC6;
}

.auth-alert--error {
  background: var(--cream-100);
  color: var(--coral-600);
  border: 1px solid var(--coral-100);
}

.otp-input {
  letter-spacing: 0.5em;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.login-submit--inline {
  display: inline-flex;
  width: auto;
  text-decoration: none;
}

/* Botão de SSO (Google) na tela de login. Secundário: borda neutra, ícone + rótulo centralizados.
   Vitor: refine hover/foco e, se quiser, troque o ícone Phosphor pelo "G" colorido oficial do Google. */
.login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--stone-300);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.login-google:hover {
  border-color: var(--coral-500);
  background: var(--cream-100);
}

.login-google:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

.login-google i {
  font-size: 20px;
  color: var(--coral-600);
}

/* Portal autenticado (painel, alterar senha, 2FA) */
.portal-page {
  padding: var(--s-10) var(--s-6) var(--s-16);
  background: var(--cream-100);
  min-height: 60vh;
}

/* Largura total: o portal já é delimitado pela área de conteúdo ao lado da sidebar.
   Os modificadores --narrow/--form não limitam mais a largura (decisão: forms full-width). */
.portal-container {
  width: 100%;
  margin: 0 auto;
}

.portal-container--narrow,
.portal-container--form {
  width: 100%;
  max-width: none;
}

.portal-breadcrumb {
  font: 500 13px/1 var(--font-sans);
  color: var(--stone-500);
  margin-bottom: var(--s-4);
}

.portal-breadcrumb a {
  color: var(--coral-500);
  text-decoration: none;
}

.portal-breadcrumb a:hover {
  text-decoration: underline;
}

.portal-breadcrumb span {
  margin: 0 var(--s-2);
}

.portal-head {
  margin-bottom: var(--s-6);
}

.portal-head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.portal-head__eyebrow {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--coral-500);
  margin: 0 0 var(--s-2);
}

.portal-head__title {
  font: 700 30px/1.15 var(--font-display, var(--font-sans));
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

.portal-head__sub {
  font: 400 15px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.portal-card {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg, 16px);
  padding: var(--s-8);
  box-shadow: var(--shadow-md);
}

.portal-card--center {
  text-align: center;
}

.portal-card--muted {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
  color: var(--ink-soft);
}

.portal-empty-icon {
  font-size: 40px;
  color: var(--coral-500);
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}

.portal-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg, 16px);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.portal-tile:hover {
  border-color: var(--coral-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.portal-tile i {
  font-size: 26px;
  color: var(--coral-500);
}

.portal-tile strong {
  font: 700 16px/1.3 var(--font-sans);
  color: var(--ink);
}

.portal-tile span {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink-soft);
}

/* Setup 2FA */
.twofa-steps {
  margin: 0 0 var(--s-6);
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  color: var(--ink-soft);
  font: 400 14px/1.6 var(--font-sans);
}

.twofa-setup {
  display: flex;
  gap: var(--s-6);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}

/* Layout do setup: QR + chave à esquerda, formulário (código + Ativar) à direita. Empilha no mobile. */
.twofa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

.twofa-grid__qr {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}

.twofa-grid .twofa-form {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.twofa-grid .twofa-hint {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
}

.twofa-grid .twofa-hint i {
  color: var(--coral-500);
  font-size: 16px;
  flex-shrink: 0;
}

/* Campo de código com mais presença (é a ação principal da direita). */
.twofa-grid__form .otp-input {
  font-size: 22px;
  letter-spacing: 0.4em;
  padding-block: var(--s-4);
}

@media (min-width: 720px) {
  /* Colunas alinhadas pelo topo: o campo de código encosta no topo do QR (sem ficar flutuando no meio). */
  .twofa-grid {
    grid-template-columns: minmax(200px, auto) 1fr;
    align-items: start;
    gap: var(--s-8);
  }
}
.twofa-qr {
  background: var(--white);
  padding: var(--s-3);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-md);
}

.twofa-manual {
  flex: 1;
  min-width: 200px;
}

.twofa-hint {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: 0 0 var(--s-2);
}

.twofa-secret {
  display: inline-block;
  font-family: monospace;
  font-size: 15px;
  letter-spacing: 0.1em;
  background: var(--cream-100);
  border: 1px solid var(--coral-100);
  border-radius: var(--r-md);
  padding: 8px 12px;
  word-break: break-all;
  color: var(--ink);
}

.twofa-form {
  margin-top: var(--s-2);
}

.twofa-status {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.twofa-status i {
  font-size: 32px;
  color: #18794E;
}

.twofa-status strong {
  display: block;
  color: var(--ink);
}

.twofa-status p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.btn--danger {
  background: var(--coral-600);
  color: var(--white);
}

.btn--danger:hover {
  background: var(--coral-500);
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--stone-300);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--coral-500);
  color: var(--coral-600);
}

/* Botão compacto (ações secundárias em cabeçalhos de card, repeater de reserva). */
.btn--sm {
  padding: 7px 12px;
  font-size: 13px;
}

.btn--sm i {
  font-size: 15px;
}

/* Link auxiliar abaixo do CEP ("Não sei meu CEP" -> busca dos Correios em nova aba). */
.form-cep-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font: 500 13px/1.2 var(--font-sans);
  color: var(--coral-500);
  text-decoration: none;
}

.form-cep-help:hover {
  text-decoration: underline;
}

.form-cep-help i {
  font-size: 15px;
}

/* ------------------------------------------------------------
   Meu perfil (S5) — baseline. Vitor: refine espaçamentos/responsivo
   à vontade; mantenha as variáveis (--ink, --stone-*, --coral-*, --s-*).
   ------------------------------------------------------------ */
.portal-card + .portal-card {
  margin-top: var(--s-6);
}

.portal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.portal-card__head h2 {
  font: 700 18px/1.2 var(--font-sans);
  color: var(--ink);
  margin: 0;
}

.portal-card__head > i {
  font-size: 22px;
  color: var(--coral-500);
}

.portal-card__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-soft);
}

.portal-card__note i {
  color: var(--coral-500);
  flex-shrink: 0;
}

/* Lista de definições (rótulo + valor) usada nos blocos de identidade e contato */
.portal-defs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin: 0;
}

.portal-defs > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-defs dt {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--stone-500);
}

.portal-defs dd {
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink);
  margin: 0;
}

@media (min-width: 640px) {
  .portal-defs {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Selo "Bloqueado" */
.portal-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: 600 12px/1 var(--font-sans);
  color: var(--stone-500);
  background: var(--cream-100);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-md);
  padding: 6px 10px;
}

.portal-tag i {
  font-size: 14px;
}

/* Lista de direitos do titular (LGPD) */
.portal-list {
  margin: 0;
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.portal-list li {
  font: 400 14px/1.6 var(--font-sans);
  color: var(--ink-soft);
}

.portal-list strong {
  color: var(--ink);
}

.portal-list a {
  color: var(--coral-500);
  text-decoration: none;
}

.portal-list a:hover {
  text-decoration: underline;
}

/* Zona de perigo (ex.: excluir conta): destaca o card com a borda de alerta da marca */
.portal-card--danger {
  border-color: var(--coral-500);
}

.portal-card--danger .portal-card__head > i {
  color: var(--coral-600);
}

/* Ações de formulário lado a lado (cancelar à esquerda, ação primária/destrutiva à direita) */
.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}

.form-actions .btn--ghost {
  margin-right: auto;
}

/* Agrupamento de campos no formulário de edição */
.form-group {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-6);
}

.form-legend {
  font: 700 14px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--coral-500);
  margin-bottom: var(--s-4);
  padding: 0;
}

/* ------------------------------------------------------------
   Cadastro self-service (S5) — form básico. Largura controlada por .portal-container (full-width).
   ------------------------------------------------------------ */
/* Separador sutil entre seções do cadastro */
.form-group--auth + .form-group--auth {
  border-top: 1px solid var(--stone-200);
  padding-top: var(--s-6);
}

/* Grids responsivos de campos: 2 colunas (default), 3 colunas e cidade+UF */
.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

.auth-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.auth-grid--city {
  grid-template-columns: 1fr 96px;
}

@media (max-width: 640px) {
  .auth-grid, .auth-grid--3, .auth-grid--city {
    grid-template-columns: 1fr;
  }
}
/* Toggle segmentado Pessoa Física / Jurídica */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--cream-100);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}

.segmented__option {
  position: relative;
  cursor: pointer;
}

.segmented__option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.segmented__option span {
  display: block;
  padding: 8px 18px;
  border-radius: calc(var(--r-md) - 4px);
  font: 600 14px/1 var(--font-sans);
  color: var(--ink-soft);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.segmented__option input:checked + span {
  background: var(--coral-500);
  color: var(--white);
}

.segmented__option input:focus-visible + span {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

/* Aceite de termos (LGPD) */
.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-2) 0 var(--s-5);
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink-soft);
  cursor: pointer;
}

.auth-consent input {
  margin-top: 3px;
  flex-shrink: 0;
}

.auth-consent a {
  color: var(--coral-500);
  text-decoration: none;
}

.auth-consent a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Avatar (foto de perfil) — usado no card de foto e na pré-visualização do upload
   ------------------------------------------------------------ */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--cream-100);
}

.avatar--lg {
  width: 96px;
  height: 96px;
}

.avatar--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--stone-300);
  color: var(--stone-500);
}

.avatar--empty i {
  font-size: 40px;
}

/* Card "Foto de perfil": avatar + dica lado a lado */
.profile-photo {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.profile-photo__hint {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: var(--s-2) 0 0;
}

/* Hub "Meu perfil" (Index): hero com avatar + resumo em cards (read-only) que levam à edição. */
.profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
}

.profile-hero__id {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-width: 0;
}

.profile-hero__name {
  font: 700 22px/1.2 var(--font-display, var(--font-sans));
  color: var(--ink);
  margin: var(--s-2) 0 4px;
  word-break: break-word;
}

.profile-hero__meta {
  font: 400 14px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
  word-break: break-word;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--coral-600);
  background: var(--cream-100);
  border: 1px solid var(--coral-100);
  border-radius: var(--r-md);
  padding: 5px 9px;
}

/* Rótulo de seção do hub (separa "Dados cadastrais" de "Segurança e privacidade") */
.profile-section-title {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--stone-500);
  margin: 0 0 var(--s-4);
}

/* Grade dos cards-resumo: 1 col (mobile) -> 2 -> 3. Zera o margin-top herdado de .portal-card + .portal-card. */
.profile-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}

.profile-summary > .portal-card {
  margin-top: 0;
}

/* Nos cards estreitos do resumo, os pares rótulo/valor ficam empilhados (não viram 2 colunas). */
.profile-summary .portal-defs {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .profile-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .profile-summary {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Layout 2 colunas da edição de perfil: Identidade (aside) à esquerda, Foto/Contato/Endereço à direita.
   Mobile-first empilha; a partir de 880px vira grid. O espaçamento entre os cards da direita vem da regra
   .portal-card + .portal-card já existente. align-items:start para as colunas alinharem pelo topo. */
.profile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
}

.profile-layout__aside, .profile-layout__main {
  min-width: 0;
}

@media (min-width: 880px) {
  .profile-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}
/* Bloco de upload dentro do modal de foto: preview acima do seletor de arquivo */
.profile-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.profile-upload .form-field {
  width: 100%;
}

/* ------------------------------------------------------------
   Modal do portal (editar seções do perfil em diálogo). Acessível: overlay clicável,
   focus trap + ESC (momment.js), scroll-lock no body, bottom-sheet no mobile.
   ------------------------------------------------------------ */
.portal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}

.portal-modal[hidden] {
  display: none;
}

.portal-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 14, 0.5);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.portal-modal.is-open .portal-modal__overlay {
  opacity: 1;
}

.portal-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - var(--s-8));
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.portal-modal.is-open .portal-modal__panel {
  opacity: 1;
  transform: none;
}

.portal-modal__panel:focus {
  outline: none;
}

.portal-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-6) var(--s-4);
}

.portal-modal__head h2 {
  font: 700 18px/1.2 var(--font-sans);
  color: var(--ink);
  margin: 0;
}

.portal-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--stone-500);
  font-size: 22px;
  line-height: 1;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.portal-modal__close:hover {
  background: var(--cream-100);
  color: var(--ink);
}

.portal-modal__close:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

/* O corpo é o próprio <form>; herda o espaçamento entre campos do .login-form */
.portal-modal__body {
  padding: 0 var(--s-6) var(--s-6);
  margin: 0;
}

.portal-modal__body .form-actions {
  margin-top: var(--s-6);
}

body.is-portal-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .portal-modal__overlay, .portal-modal__panel {
    transition: none;
  }
}
/* Mobile: vira bottom-sheet ancorado embaixo, deslizando de baixo pra cima */
@media (max-width: 640px) {
  .portal-modal {
    align-items: flex-end;
    padding: 0;
  }
  .portal-modal__panel {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
  }
  .portal-modal.is-open .portal-modal__panel {
    transform: none;
  }
}
/* ============================================================
   SPACES CAROUSEL — mobile only
   Replaces the tab-list + single preview with a horizontal scroll-snap
   carousel of 5 self-contained cards. Native swipe, pagination dots.
   ============================================================ */
.spaces__carousel {
  display: none; /* hidden on desktop, shown on mobile via media query */
  flex-direction: column;
  gap: var(--s-5);
  width: 100%;
}

.spaces__carousel-track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Bleed slightly past the section padding so swiping feels edge-to-edge */
  margin-inline: calc(var(--s-6) * -1);
  padding-inline: var(--s-6);
  scroll-padding-inline: var(--s-6);
}

.spaces__carousel-track::-webkit-scrollbar {
  display: none;
}

.space-card {
  flex: 0 0 calc(100% - var(--s-8));
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-xl);
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow: hidden;
}

.space-card__media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-200);
  margin: 0;
  width: 100%;
}

.space-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.space-card__badge {
  position: absolute;
  bottom: var(--s-3);
  right: var(--s-3);
  background: var(--cream-100);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--r-full);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-md);
}

.space-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-5);
  text-align: center;
  align-items: center;
}

.space-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.space-card__desc {
  font: 400 15px/1.55 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.space-card__amenities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--stone-200);
  width: 100%;
}

.space-card__amenity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1.2 var(--font-sans);
  color: var(--ink);
}

.space-card__amenity i {
  font-size: 16px;
  color: var(--coral-500);
}

.space-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--coral-500);
  color: var(--white);
  padding: 14px 22px;
  border-radius: var(--r-md);
  font: 500 15px/1 var(--font-sans);
  text-decoration: none;
  margin-top: var(--s-2);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.space-card__cta:hover {
  background: var(--coral-600);
  transform: translateY(-2px);
}

.space-card__cta i {
  font-size: 16px;
}

/* Pagination dots */
.spaces__carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
}

.spaces__carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stone-300);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.spaces__carousel-dots button:hover {
  background: var(--stone-500);
}

.spaces__carousel-dots button.is-active {
  background: var(--coral-500);
  transform: scale(1.4);
}

/* Visibility swap: tabs+preview on desktop, carousel on mobile */
@media (max-width: 1023px) {
  .spaces__list,
  .space-preview {
    display: none;
  }
  .spaces__carousel {
    display: flex;
  }
  .spaces__layout {
    gap: 0;
  }
}
/* ============================================================
   MOBILE NAV DRAWER
   Injected into body by JS on every page. Hamburger toggles it.
   ============================================================ */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}

.mobile-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.6);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.mobile-drawer.is-open .mobile-drawer__backdrop {
  opacity: 1;
}

.mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  background: var(--cream-100);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-6);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  box-shadow: -8px 0 32px rgba(16, 16, 16, 0.18);
  overflow-y: auto;
}

.mobile-drawer.is-open .mobile-drawer__panel {
  transform: translateX(0);
}

.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--stone-200);
}

.mobile-drawer__logo {
  height: 38px;
  width: auto;
  display: block;
}

.mobile-drawer__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1px var(--stone-300);
  color: var(--ink);
  font-size: 22px;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.mobile-drawer__close:hover {
  background: var(--ink);
  color: var(--white);
}

.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.mobile-drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.mobile-drawer__nav a:hover,
.mobile-drawer__nav a[aria-current=page] {
  background: var(--cream-200);
  color: var(--coral-500);
}

.mobile-drawer__nav a i {
  font-size: 18px;
  color: var(--stone-500);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.mobile-drawer__nav a:hover i,
.mobile-drawer__nav a[aria-current=page] i {
  color: var(--coral-500);
  transform: translateX(3px);
}

.mobile-drawer__divider {
  height: 1px;
  background: var(--stone-200);
  margin-block: var(--s-2);
}

.mobile-drawer__login {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-soft);
  font: 500 15px/1 var(--font-sans);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--stone-300);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.mobile-drawer__login:hover {
  background: var(--ink);
  color: var(--white);
}

.mobile-drawer__login i {
  font-size: 18px;
}

.mobile-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--coral-500);
  color: var(--white);
  padding: 18px 24px;
  border-radius: var(--r-md);
  font: 500 17px/1 var(--font-sans);
  text-decoration: none;
  margin-top: auto;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.mobile-drawer__cta:hover {
  background: var(--coral-600);
  transform: translateY(-2px);
}

.mobile-drawer__cta i {
  font-size: 22px;
}

.mobile-drawer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-soft);
  text-align: center;
  padding-top: var(--s-3);
  border-top: 1px solid var(--stone-200);
}

.mobile-drawer__contact a {
  color: var(--coral-500);
  font-weight: 600;
}

/* Lock body scroll when drawer is open */
body.is-drawer-open {
  overflow: hidden;
}

/* Hamburger active state */
.menu-toggle.is-active {
  background: var(--ink);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* ============================================================
   MOBILE — flex column collapse fix (≤ 1024px)
   When parents flip to flex-direction:column, children that had
   flex: 1 0 0 collapse to height 0 (flex-basis: 0 wins over height).
   Override to flex:none so each child uses its content/explicit height.
   ============================================================ */
@media (max-width: 1024px) {
  .impact__stat,
  .problem-card,
  .pillar-text,
  .pillar-image,
  .step-card,
  .comm-photo,
  .comm-card,
  .space-preview,
  .space-preview__image,
  .space-preview__details {
    flex: 0 0 auto;
  }
  .pillar-image {
    width: 100%;
    height: 240px;
  }
  .impact__stat {
    padding: var(--s-3) 0;
  }
}
/* ============================================================
   MOBILE — center alignment + layout fixes (≤ 768px)
   Comprehensive pass: every section header centers, card internals
   center where it reads better, broken hardcoded layouts get fixed.
   ============================================================ */
@media (max-width: 768px) {
  /* ---------- Section heads — universal center ---------- */
  .problem__head,
  .solution__head,
  .spaces__head,
  .differentials__head,
  .steps__head,
  .plans__head,
  .audience__head,
  .community__head,
  .bastidores__head,
  .faq__head,
  .spaces-detail__head,
  .plans-block__head,
  .contact-location__head,
  .about-values__head {
    text-align: center;
    align-items: center;
  }
  .problem__head > *,
  .solution__head > *,
  .spaces__head-text > *,
  .differentials__head > *,
  .steps__head > *,
  .plans__head > *,
  .audience__head > *,
  .community__head > *,
  .bastidores__head > *,
  .faq__head > *,
  .spaces-detail__head > *,
  .plans-block__head > *,
  .contact-location__head > *,
  .about-values__head > * {
    margin-inline: auto;
  }
  /* Spaces head was a 2-col header on desktop — stack and center on mobile */
  .spaces__head {
    flex-direction: column;
    gap: var(--s-4);
  }
  .spaces__head-text {
    text-align: center;
    align-items: center;
  }
  .spaces__lede {
    text-align: center;
    max-width: 60ch;
    margin-inline: auto;
  }
  /* Solution intro block (eyebrow + h2 + body) — center */
  .solution {
    text-align: center;
    align-items: center;
  }
  .solution__head, .solution__body {
    align-items: center;
    text-align: center;
  }
  .solution__body {
    max-width: 60ch;
    margin-inline: auto;
  }
  /* ---------- Hero — center copy, CTAs, features ---------- */
  .hero__copy {
    align-items: center;
    text-align: center;
  }
  .hero__title-group {
    align-items: center;
    text-align: center;
  }
  .hero__title em, .hero__title {
    max-width: none;
  }
  .hero__sub {
    max-width: 50ch;
    margin-inline: auto;
  }
  .hero__ctas {
    justify-content: center;
  }
  .hero__features {
    justify-content: center;
  }
  .hero__badge {
    align-self: center;
  }
  /* ---------- Page hero (Sobre, Planos, Contato) ---------- */
  .page-hero {
    text-align: center;
    align-items: center;
  }
  .page-hero > * {
    margin-inline: auto;
  }
  /* ---------- Impact ---------- */
  .impact__stat {
    text-align: center;
  }
  /* ---------- Problem cards — scale the hardcoded-pixel illustrations so
     they fit narrow cards instead of overflowing/clipping. Center text. ---------- */
  .problem-card {
    text-align: center;
    align-items: center;
    padding: var(--s-6) var(--s-4);
  }
  .problem-card__illustration {
    transform: scale(0.78);
    transform-origin: top center;
    height: 165px; /* 211 * 0.78 ≈ 165 */
    margin-bottom: -8px;
  }
  /* ---------- Solution + brands marquee — keep marquee animated;
     just center the surrounding labels ---------- */
  .brands__top, .brands__bottom {
    text-align: center;
  }
  /* ---------- Spaces preview (Home interactive tabs) ---------- */
  .space-preview__details {
    text-align: center;
    align-items: center;
  }
  .space-preview__amenities {
    justify-content: center;
  }
  .space-preview__cta {
    align-self: center;
  }
  /* ---------- Differentials pillar rows — already stack; center text ---------- */
  .pillar-text {
    text-align: center;
    align-items: center;
  }
  .pillar-text__title, .pillar-text__body {
    max-width: 50ch;
    margin-inline: auto;
  }
  /* ---------- Steps cards — center number + body, icon to top-right corner ---------- */
  .step-card {
    text-align: center;
    align-items: center;
    position: relative;
    padding-top: 56px; /* room for the corner icon */
  }
  .step-card__top {
    justify-content: center;
  }
  .step-card__icon {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .step-card__body {
    align-items: center;
    text-align: center;
  }
  /* ---------- Plan cards — center every line, including features ---------- */
  .plan-card {
    text-align: center;
    align-items: center;
  }
  .plan-card__price {
    justify-content: center;
  }
  .plan-card__features {
    align-self: center;
    align-items: center;
    width: 100%;
  }
  .plan-card__feature {
    justify-content: center;
    text-align: center;
  }
  .plan-card__cta {
    align-self: stretch;
  }
  .plan-card__badge {
    left: 50%;
    transform: translateX(-50%);
  }
  /* Inauguração callout: stack and center */
  .inaug {
    text-align: center;
    align-items: center;
  }
  .inaug__text {
    align-items: center;
  }
  /* ---------- Audience cards — every line centered, including icon + features ---------- */
  .audience-card {
    text-align: center;
    align-items: center;
  }
  .audience-card .audience-card__icon {
    align-self: center;
  }
  .audience-card__features {
    align-self: center;
    align-items: center;
    width: 100%;
  }
  .audience-card__feature {
    justify-content: center;
    text-align: center;
  }
  /* ---------- Community — center the two text-only cards (Marcas / Eventos)
     including their icons. The photo card (Networking) keeps its own layout. ---------- */
  .comm-photo__title, .comm-photo__sub {
    max-width: 38ch;
  }
  .comm-card {
    text-align: center;
    align-items: center;
  }
  .comm-card .comm-card__icon {
    align-self: center;
  }
  .community__quote {
    text-align: center;
  }
  /* ---------- Bastidores video cards ---------- */
  .video-card {
    margin-inline: auto;
  }
  /* ---------- FAQ — center the head, keep accordion items left-aligned for legibility ---------- */
  .faq__layout > .faq__head {
    align-items: center;
    text-align: center;
  }
  .faq__list {
    text-align: left;
  }
  .faq__a {
    text-align: left;
  }
  /* ---------- About story — center copy ---------- */
  .about-story__copy {
    text-align: center;
    align-items: center;
  }
  .about-story__copy > * {
    margin-inline: auto;
  }
  .about-story__pullquote {
    border-left: none;
    border-top: 2px solid var(--coral-500);
    padding: var(--s-4) var(--s-3) 0;
    text-align: center;
    max-width: 38ch;
  }
  /* ---------- About values cards ---------- */
  .value-card {
    text-align: center;
    align-items: center;
  }
  .value-card__top {
    justify-content: center;
    gap: var(--s-3);
  }
  /* ---------- About CTA + Page CTA — already centered, keep ---------- */
  .page-cta {
    text-align: center;
    align-items: center;
  }
  .page-cta > * {
    margin-inline: auto;
  }
  /* ---------- Final CTA (home) — already centered ---------- */
  .final-cta__title em, .final-cta__lede {
    margin-inline: auto;
  }
  /* ---------- Spaces detail (Planos page) ---------- */
  .space-row__copy {
    text-align: center;
    align-items: center;
  }
  .space-row__features {
    align-self: stretch;
  }
  .space-row__feature {
    justify-content: flex-start;
    text-align: left;
  }
  .space-row__cta {
    align-self: center;
  }
  /* ---------- Plans block + avulsos table ---------- */
  .plans-block__lede {
    margin-inline: auto;
  }
  .avulsos__title {
    text-align: center;
  }
  .avulsos__row {
    text-align: center;
  }
  .avulsos__cell-name, .avulsos__cell-desc, .avulsos__cell-price {
    text-align: center;
  }
  /* ---------- Contato form section: form stays as-is, info aside centers ---------- */
  .contact-form__head {
    text-align: center;
    align-items: center;
  }
  .contact-info {
    align-items: stretch;
  }
  .contact-info__block {
    text-align: left;
  } /* keep info left for scannability */
  /* ---------- Visit block coral card centers ---------- */
  .visit-block__card {
    text-align: center;
    align-items: center;
  }
  .visit-block__actions {
    justify-content: center;
  }
  /* ---------- Login welcome overlay — already left-pinned, that's fine ---------- */
  /* ---------- Footer brand description center on mobile ---------- */
  .site-footer__brand {
    align-items: center;
    text-align: center;
  }
  .site-footer__brand-desc {
    max-width: none;
  }
  .site-footer__cols {
    text-align: center;
  }
  .site-footer__col {
    align-items: center;
  }
  .site-footer__contact-item {
    text-align: left;
    max-width: 280px;
    margin-inline: auto;
  }
  /* Conecte-se: stack label above icons, both centered as a column */
  .site-footer__social {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-4);
    width: 100%;
  }
  .site-footer__social-icons {
    justify-content: center;
    flex-wrap: wrap;
  }
  /* Drop the wide left margin on back-to-top so it sits in the same cluster */
  .site-footer__top {
    margin-left: 0;
  }
  .site-footer__bottom {
    text-align: center;
  }
  .site-footer__copy {
    text-align: center;
  }
  .site-footer__legal {
    justify-content: center;
  }
}
/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* QUILL-CONTENT NORMALIZE
   Os campos do CMS são editados no Quill, que envolve cada parágrafo em <p>.
   Quando esse <p> entra dentro de um container que também é um título/heading
   (h1, h2, etc.), o browser quebra a hierarquia. Como agora todos os títulos
   foram migrados pra <div role="heading">, normalizamos o <p> aninhado: nos
   títulos vira inline (mesma linha), nos ledes/corpos mantém bloco mas sem
   margem acumulada de Quill. */
.page-hero__title p,
.about-story__title p,
.about-values__title p,
.about-values__title h2, .about-values__title h3,
.page-cta__title p,
.spaces-detail__title p,
.space-row__title p,
.plans-block__title p,
.plan-card__name p,
.value-card__title p,
.avulsos__title p,
.inaug__title p,
.contact-location__title p,
.contact-form__title p,
.visit-block__title p {
  display: inline;
  margin: 0;
}

.page-hero__title br,
.about-story__title br,
.about-values__title br,
.page-cta__title br,
.spaces-detail__title br,
.plans-block__title br {
  /* mantém <br> do Quill como ele é (intencional) */
  display: inline;
}

.page-hero__lede,
.about-values__lede,
.page-cta__lede,
.plans-block__lede,
.space-row__body,
.about-story__para,
.about-story__pullquote,
.inaug__sub,
.value-card__body {
  display: block;
}

.page-hero__lede p,
.about-values__lede p,
.page-cta__lede p,
.plans-block__lede p,
.space-row__body p,
.about-story__para p,
.about-story__pullquote p,
.inaug__sub p,
.value-card__body p {
  margin: 0;
  display: block;
}

.page-hero__lede p + p,
.about-values__lede p + p,
.page-cta__lede p + p,
.plans-block__lede p + p,
.space-row__body p + p,
.about-story__para p + p,
.about-story__pullquote p + p,
.inaug__sub p + p,
.value-card__body p + p {
  margin-top: 0.5em;
}

/* Quando um <div> com role="heading" substitui um <h1>/<h2>/<h3>, garante
   que ele se comporte exatamente como o heading original */
[role=heading] {
  display: block;
}

/* ============================================================
   PORTAL SHELL — sidebar da area autenticada do cliente (_PortalLayout)
   Esqueleto basico/funcional. Vitor: refine hover/ativo/foco e a gaveta
   mobile. Use SO as variaveis (--coral-*, --ink, --stone-*, --s-*...).
   ============================================================ */
.portal-shell {
  display: flex;
  min-height: 100vh;
  background: var(--cream-100);
}

/* ---- Sidebar ---- */
.portal-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 260px;
  background: var(--white);
  border-right: 1px solid var(--stone-200);
  position: sticky;
  top: 0;
  height: 100vh;
}

.portal-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--stone-200);
}

.portal-sidebar__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  font: 700 18px/1 var(--font-display, var(--font-sans));
  color: var(--ink);
}

.portal-sidebar__close {
  display: none; /* so no mobile */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 22px;
}

.portal-sidebar__close:hover {
  background: var(--cream-100);
  color: var(--ink);
}

/* ---- Navegacao ---- */
.portal-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-nav__section {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--stone-500);
  padding: 0 var(--s-3);
  margin: var(--s-4) 0 var(--s-2);
}

.portal-nav__section:first-child {
  margin-top: 0;
}

.portal-nav__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink-soft);
  font: 600 14px/1.2 var(--font-sans);
  /* acento lateral do item ativo, transparente por padrao */
  border-left: 3px solid transparent;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.portal-nav__link i {
  font-size: 20px;
  flex-shrink: 0;
}

.portal-nav__link:hover {
  background: var(--cream-100);
  color: var(--ink);
}

.portal-nav__link:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

.portal-nav__link.is-active {
  background: var(--cream-100);
  color: var(--coral-600);
  border-left-color: var(--coral-500);
}

/* ---- Rodape (identidade + sair) ---- */
.portal-sidebar__foot {
  padding: var(--s-4);
  border-top: 1px solid var(--stone-200);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.portal-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.portal-sidebar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--coral-500);
  color: var(--white);
  font: 700 15px/1 var(--font-sans);
}

.portal-sidebar__name {
  font: 600 14px/1.3 var(--font-sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-sidebar__logout {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--stone-300);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.portal-sidebar__logout:hover {
  border-color: var(--coral-500);
  color: var(--coral-600);
}

/* ---- Area principal ---- */
.portal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.portal-content {
  flex: 1;
}

/* Topbar so aparece no mobile (hambúrguer) */
.portal-topbar {
  display: none;
}

/* Backdrop da gaveta (oculto via atributo [hidden] quando fechado) */
.portal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 26, 23, 0.45);
  z-index: 40;
}

/* ---- Mobile: sidebar vira gaveta ---- */
@media (max-width: 1023px) {
  .portal-topbar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--white);
    border-bottom: 1px solid var(--stone-200);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .portal-topbar__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--stone-200);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 22px;
  }
  .portal-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    text-decoration: none;
    font: 700 16px/1 var(--font-display, var(--font-sans));
    color: var(--ink);
  }
  .portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .portal-shell.is-open .portal-sidebar {
    transform: translateX(0);
  }
  .portal-sidebar__close {
    display: inline-flex;
  }
}
/* Desktop: sem topbar, sem backdrop */
@media (min-width: 1024px) {
  .portal-topbar {
    display: none;
  }
  .portal-backdrop {
    display: none;
  }
}
/* =========================================================================
   Reservas do cliente (S5) — listagem / form / detalhe (Area Cliente)
   Reusa as variaveis do tema; mobile-first. Vitor pode refinar cores/spacing.
   ========================================================================= */
/* Abas de recorte (Proximas / Anteriores / Todas) */
.booking-tabs {
  display: flex;
  gap: var(--s-4);
  border-bottom: 1px solid var(--stone-200);
  margin: var(--s-6) 0 var(--s-5);
}

.booking-tab {
  padding: var(--s-3) var(--s-1);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font: 600 14px/1 var(--font-sans);
  color: var(--stone-500);
  text-decoration: none;
}

.booking-tab:hover {
  color: var(--ink-soft);
}

.booking-tab--active {
  color: var(--coral-600);
  border-bottom-color: var(--coral-500);
}

/* Lista de reservas em cards */
.booking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.booking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-md);
}

.booking-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.booking-item__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font: 700 15px/1.3 var(--font-sans);
  color: var(--ink);
}

.booking-item__title i {
  color: var(--coral-500);
}

.booking-item__meta {
  margin: 0;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--ink-soft);
}

.booking-item__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Selo de status (mesma escala em listagem e detalhe). Tom mais suave + bolinha na cor do estado,
   para não competir com o selo de tempo (que é o destaque). */
.booking-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  font: 600 12px/1.2 var(--font-sans);
  white-space: nowrap;
}

.booking-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.booking-status--confirmed {
  background: var(--cream-100);
  color: var(--coral-600);
  border: 1px solid var(--coral-100);
}

.booking-status--active {
  background: var(--ink-soft);
  color: var(--white);
}

.booking-status--done {
  background: var(--stone-200);
  color: var(--ink-soft);
}

.booking-status--canceled {
  background: transparent;
  border: 1px solid var(--stone-300);
  color: var(--stone-500);
}

/* Paginacao simples */
.booking-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.booking-pagination__info {
  font: 500 13px/1 var(--font-sans);
  color: var(--ink-soft);
}

/* Formulario de nova reserva */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Horário de funcionamento em destaque (rosa) abaixo dos campos de data. */
.booking-hours {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--cream-100);
  border: 1px solid var(--coral-100);
  border-radius: var(--r-md);
  color: var(--coral-600);
}

.booking-hours i {
  color: var(--coral-600);
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 1px;
}

.booking-hours strong {
  color: var(--coral-600);
}

.booking-people {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: var(--s-3) 0;
}

.booking-person {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.booking-person .form-input {
  flex: 1;
  min-width: 0;
}

/* Detalhe (o grid de info usa .portal-defs do tema) */
.booking-detail__subtitle {
  margin: var(--s-6) 0 var(--s-3);
  font: 700 15px/1.3 var(--font-sans);
  color: var(--ink);
}

.booking-detail__people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.booking-detail__people li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 400 14px/1.4 var(--font-sans);
  color: var(--ink);
}

.booking-detail__people i {
  color: var(--stone-500);
}

.booking-detail__phone {
  margin-left: auto;
  color: var(--stone-500);
  font-size: 13px;
}

@media (max-width: 640px) {
  .booking-item {
    align-items: flex-start;
  }
  .booking-item__actions {
    width: 100%;
  }
  .booking-item__actions .btn {
    flex: 1;
    justify-content: center;
  }
  .booking-person {
    flex-wrap: wrap;
  }
}
/* =========================================================================
   Minhas reservas — filtro de período, selos de tempo e cabeçalho do detalhe
   ========================================================================= */
/* Esconde visualmente mantendo para leitores de tela (rótulos dos selects de filtro). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Toolbar: abas + filtro de período na mesma faixa, com a borda inferior unificada. */
.booking-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin: var(--s-6) 0 var(--s-5);
  border-bottom: 1px solid var(--stone-200);
}

.booking-toolbar .booking-tabs {
  border-bottom: 0;
  margin: 0;
}

.booking-filter {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
}

.booking-filter .form-select {
  padding: 11px 16px;
  font-size: 15px;
  min-width: 170px;
  width: auto;
}

.booking-filter__clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 13px/1 var(--font-sans);
  color: var(--stone-500);
  text-decoration: none;
  white-space: nowrap;
}

.booking-filter__clear:hover {
  color: var(--coral-600);
}

/* Selo de tempo relativo (HOJE / AMANHÃ / EM X MIN / EM USO / AGORA) — o destaque do item: ícone + cor viva. */
.booking-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  font: 700 11px/1.2 var(--font-sans);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.booking-badge i {
  font-size: 13px;
}

.booking-badge--live,
.booking-badge--now {
  background: var(--coral-500);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(255, 114, 98, 0.35);
}

.booking-badge--soon {
  background: var(--coral-100);
  color: var(--coral-600);
}

.booking-badge--upcoming {
  background: var(--cream-100);
  color: var(--ink-soft);
  border: 1px solid var(--stone-200);
}

/* "Em uso" pisca de leve para chamar atenção (respeitando prefers-reduced-motion). */
.booking-badge--live i {
  animation: mm-badge-pulse 1.6s ease-in-out infinite;
}

@keyframes mm-badge-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .booking-badge--live i {
    animation: none;
  }
}
/* Chip de data à esquerda do item da lista. */
.booking-item__info {
  flex: 1 1 220px;
}

.booking-item__date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--cream-100);
  border: 1px solid var(--stone-200);
}

.booking-item__day {
  font: 700 20px/1 var(--font-sans);
  color: var(--coral-600);
}

.booking-item__month {
  font: 600 11px/1 var(--font-sans);
  text-transform: uppercase;
  color: var(--stone-500);
  margin-top: 2px;
}

.booking-item__time {
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: var(--s-2);
}

.booking-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.booking-item__meta i {
  color: var(--coral-500);
}

.booking-item__sep {
  color: var(--stone-300);
}

.booking-item__badges {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* Cabeçalho do detalhe. */
.booking-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

.booking-detail__title {
  font: 700 26px/1.1 var(--font-display, var(--font-sans));
  color: var(--ink);
  margin: 0;
}

.booking-detail__when {
  font: 500 14px/1.4 var(--font-sans);
  color: var(--ink-soft);
  margin: 4px 0 0;
}

.booking-detail__badges {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.booking-detail__cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  background: var(--cream-100);
  border: 1px solid var(--coral-100);
  border-radius: var(--r-md);
}

.booking-detail__cta i {
  font-size: 22px;
  color: var(--coral-600);
}

.booking-detail__cta p {
  flex: 1;
  min-width: 160px;
  margin: 0;
  font: 500 14px/1.4 var(--font-sans);
  color: var(--ink);
}

@media (max-width: 640px) {
  .booking-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .booking-filter {
    padding-bottom: var(--s-4);
  }
  .booking-filter .form-select {
    flex: 1;
  }
  .booking-item__date {
    display: none;
  }
  .booking-detail__head {
    flex-direction: column;
  }
}
/* ============================================================
   CHECK-IN self-service + alerta de PRÓXIMA RESERVA
   Esqueleto funcional. Vitor: refine espaçamentos/responsivo; mantenha as variáveis
   (--coral-*, --ink, --stone-*, --cream-*, --s-*, --r-md/lg).
   ============================================================ */
/* ---- Alerta de próxima reserva (ViewComponent NextBooking) ---- */
.next-booking {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  border: 1px solid var(--stone-200);
  border-left: 4px solid var(--stone-300);
  border-radius: var(--r-lg, 16px);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.next-booking__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream-100);
  color: var(--stone-500);
  font-size: 24px;
}

.next-booking__body {
  flex: 1;
  min-width: 0;
}

.next-booking__eyebrow {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--stone-500);
  margin: 0 0 var(--s-2);
}

.next-booking__title {
  font: 700 17px/1.25 var(--font-sans);
  color: var(--ink);
  margin: 0 0 4px;
}

.next-booking__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font: 500 14px/1.4 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.next-booking__sep {
  color: var(--stone-300);
}

.next-booking__rel {
  font-weight: 600;
}

.next-booking__cta {
  flex-shrink: 0;
}

/* Em uso agora: presença chama atenção (coral cheio). */
.next-booking--live {
  border-left-color: var(--coral-500);
  background: var(--cream-100);
}

.next-booking--live .next-booking__icon {
  background: var(--coral-500);
  color: var(--white);
}

.next-booking--live .next-booking__rel {
  color: var(--coral-600);
}

/* Janela de check-in aberta / começa logo: destaque morno. */
.next-booking--soon {
  border-left-color: var(--coral-500);
}

.next-booking--soon .next-booking__icon {
  background: var(--coral-100, #ffe3da);
  color: var(--coral-600);
}

.next-booking--soon .next-booking__rel {
  color: var(--coral-600);
}

/* Reserva distante: tom calmo (padrão). */
.next-booking--upcoming {
  border-left-color: var(--stone-300);
}

@media (max-width: 640px) {
  .next-booking {
    flex-wrap: wrap;
  }
  .next-booking__cta {
    width: 100%;
  }
  .next-booking__cta .btn {
    width: 100%;
    justify-content: center;
  }
}
/* ---- Card de check-in ---- */
.checkin-card {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg, 16px);
  padding: var(--s-8);
  box-shadow: var(--shadow-md);
}

.checkin-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.checkin-input {
  text-align: center;
  font: 700 26px/1 var(--font-sans);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  padding-block: var(--s-4);
}

.checkin-input::placeholder {
  letter-spacing: 0.1em;
  font-weight: 500;
}

.checkin-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-soft);
}

.checkin-hint i {
  color: var(--coral-500);
  flex-shrink: 0;
  font-size: 16px;
}

.checkout {
  padding: var(--s-12) var(--s-4) var(--s-16);
  background: var(--cream-100);
}

.checkout__container {
  max-width: 1040px;
  margin: 0 auto;
}

.checkout__container--narrow {
  max-width: 560px;
}

.checkout__head {
  margin-bottom: var(--s-8);
}

.checkout__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: 600 14px/1 var(--font-sans);
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: var(--s-4);
}

.checkout__back:hover {
  color: var(--coral-600);
}

.checkout__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

.checkout__lede {
  font: 400 16px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.checkout__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: start;
}

@media (min-width: 880px) {
  .checkout__layout {
    grid-template-columns: 7fr 5fr;
  }
}
.checkout__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-6);
  border-radius: var(--r-md);
  background: var(--coral-100);
  color: var(--ink);
  font: 500 14px/1.5 var(--font-sans);
}

.checkout__notice i {
  font-size: 20px;
  color: var(--coral-600);
  flex-shrink: 0;
}

.checkout__form .form-group {
  margin-bottom: var(--s-6);
}

.checkout__form .form-group:last-of-type {
  margin-bottom: var(--s-4);
}

.checkout__pay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

@media (max-width: 560px) {
  .checkout__pay {
    grid-template-columns: 1fr;
  }
}
.checkout__pay-option {
  display: block;
  cursor: pointer;
}

.checkout__pay-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkout__pay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: var(--s-4) var(--s-3);
  border: 1.5px solid var(--stone-200);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout__pay-card i {
  font-size: 24px;
  color: var(--coral-500);
  margin-bottom: var(--s-1);
}

.checkout__pay-card strong {
  font: 600 15px/1.2 var(--font-sans);
  color: var(--ink);
}

.checkout__pay-card small {
  font: 400 12px/1.3 var(--font-sans);
  color: var(--ink-soft);
}

.checkout__pay-option input:checked + .checkout__pay-card {
  border-color: var(--coral-500);
  box-shadow: 0 0 0 1px var(--coral-500);
}

.checkout__pay-option input:focus-visible + .checkout__pay-card {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

.checkout__fineprint {
  font: 400 12px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: var(--s-3) 0 0;
}

.checkout__summary-card {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-md);
}

@media (min-width: 880px) {
  .checkout__summary {
    position: sticky;
    top: var(--s-8);
  }
}
.checkout__summary-eyebrow {
  font: 600 11px/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 var(--s-2);
}

.checkout__summary-space {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 12px/1 var(--font-sans);
  color: var(--coral-600);
  margin-bottom: var(--s-2);
}

.checkout__summary-space i {
  font-size: 14px;
}

.checkout__summary-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}

.checkout__summary-sub {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: var(--s-1) 0 0;
}

.checkout__summary-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: var(--s-4) 0;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--stone-200);
}

.checkout__summary-currency {
  font: 500 18px/1 var(--font-sans);
  color: var(--ink-soft);
}

.checkout__summary-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.checkout__summary-period {
  font: 500 14px/1 var(--font-sans);
  color: var(--ink-soft);
}

.checkout__summary-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.checkout__summary-meta li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.checkout__summary-meta i {
  font-size: 20px;
  color: var(--coral-500);
  flex-shrink: 0;
}

.checkout__summary-meta div {
  display: flex;
  flex-direction: column;
}

.checkout__summary-meta span {
  font: 500 11px/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.checkout__summary-meta strong {
  font: 600 15px/1.3 var(--font-sans);
  color: var(--ink);
}

.checkout__summary-features {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--stone-200);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.checkout__summary-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink);
}

.checkout__summary-features i {
  color: var(--coral-500);
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.checkout__done {
  text-align: center;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: var(--s-12) var(--s-8);
  box-shadow: var(--shadow-md);
}

.checkout__done-icon i {
  font-size: 56px;
  color: var(--coral-500);
}

.checkout__done-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-2);
}

.checkout__done-lede {
  font: 400 16px/1.6 var(--font-sans);
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 42ch;
}

.checkout__done-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
}