/* ============================================================
   LAYER 1 — RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
input, textarea, select { font: inherit; }

/* ============================================================
   LAYER 2 — TOKENS
   ============================================================ */
:root {
  --color-black-out:        #272622;
  --color-black-out-900:    #1F1E1B;
  --color-black-out-700:    #494843;
  --color-black-out-500:    #747168;

  --color-spark-yellow:     #FDFFAB;
  --color-spark-yellow-900: #FDFF9A;
  --color-spark-yellow-700: #FEFFCE;
  --color-spark-yellow-500: #FBFCE8;

  --color-white-magic:      #FFFFFF;
  --color-candle-light:     #F8F7F5;
  /* cinza spotlar — superfícies neutras em fundos claros */
  --color-spot-gray:        #F7F4F0;
  /* banda alternativa p/ intercalar seções claras adjacentes (creme <-> areia) */
  --color-section-alt:      #EDE8E0;

  --color-cozy-brown:       #BFBAB0;
  --color-cozy-brown-900:   #D3CFC6;
  --color-cozy-brown-700:   #EAE8E5;

  --color-welcome-green:    #DDEDEA;
  --color-welcome-green-700:#EFFDFA;
  --color-welcome-green-500:#C8F0E4;
  --color-comfy-green:      #A6D2C9;

  --color-status-error:     #F28B82;
  --color-status-warning:   #F9A825;
  --color-status-success:   #A8D5BA;

  --font-display: 'Hepta Slab', Georgia, serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  --text-display-xl: clamp(3.75rem, 7vw, 8.125rem);
  --text-display-lg: clamp(3rem, 5vw, 6.25rem);
  --text-display-md: clamp(2.25rem, 3.5vw, 5rem);
  --text-display-sm: clamp(1.875rem, 2.5vw, 3.75rem);

  /* tamanho único para os títulos principais (h1) dos heros */
  --text-hero: clamp(2rem, 3.7vw, 3rem);

  --text-heading-xl: clamp(2.5rem, 4vw, 4.375rem);
  --text-heading-lg: clamp(1.875rem, 3vw, 3.125rem);
  --text-heading-md: clamp(1.25rem, 1.8vw, 1.875rem);
  --text-preamble:   clamp(1rem, 1.4vw, 1.4375rem);
  --text-body:       1rem;
  --text-caption:    0.8125rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm:   8px;
  --radius-md:   20px;
  --radius-lg:   50px;
  --radius-xl:   100px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* sombra/realce padrão dos cards sobre fundos claros */
  --shadow-card:       0 2px 14px rgba(39, 38, 34, 0.06);
  --shadow-card-hover: 0 18px 40px rgba(39, 38, 34, 0.14);
  --card-hairline:     1px solid rgba(39, 38, 34, 0.07);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   LAYER 3 — BASE
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-black-out);
  background: var(--color-candle-light);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
}
h4, h5, h6 { font-family: var(--font-body); font-weight: 600; }
h1 { font-size: var(--text-display-lg); }
h2 { font-size: var(--text-heading-xl); }
h3 { font-size: var(--text-heading-lg); }
h4 { font-size: var(--text-heading-md); }
p  { line-height: 1.7; }

.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;
}

/* ============================================================
   LAYER 4 — LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-12); }
}

.section { padding-block: var(--space-20); }
.section--cream { background: var(--color-candle-light); }
.section--white { background: var(--color-white-magic); }
.section--dark {
  background: var(--color-black-out);
  color: var(--color-white-magic);
}
.section__title { margin-bottom: var(--space-12); }
.text-center { text-align: center; }

/* ============================================================
   LAYER 5 — HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white-magic);
  border-bottom: 1px solid var(--color-cozy-brown-700);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: 76px;
}
.header__logo { display: inline-flex; color: var(--color-black-out); }
.header__logo svg,
.header__logo img { height: 38px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: var(--space-8); }

.nav__links {
  display: none;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 1024px) { .nav__links { display: flex; } }

.nav__links a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-black-out);
  white-space: nowrap;
  transition: opacity 0.2s;
}
.nav__links a:hover { opacity: 0.55; }

.nav__link--active { font-weight: 600; }
.nav__link--active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -28px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-comfy-green);
}

/* Dropdown submenu (e.g. Para incorporadoras). The category name is a
   plain link (always navigates); the chevron is a separate button that
   only expands/collapses the submenu — so tapping the text on mobile
   goes straight to the page instead of just opening the accordion.
   nav__menu-head only wraps the link+chevron (not the submenu itself),
   so the submenu still drops onto its own line below instead of
   getting pulled into that row. */
.nav__has-menu { position: relative; }
.nav__menu-head { display: inline-flex; align-items: center; gap: 6px; }
.nav__menu-toggle { display: inline-flex; align-items: center; background: none; border: none; padding: 4px; margin: 0; color: inherit; cursor: pointer; }
.nav__submenu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  padding-top: var(--space-4);
  z-index: 60;
}
.nav__has-menu:hover .nav__submenu,
.nav__has-menu:focus-within .nav__submenu { display: block; }
.nav__submenu-inner {
  display: block;
  background: var(--color-white-magic);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(39,38,34,0.12);
  padding: var(--space-2);
  min-width: 248px;
  width: max-content;
}
.nav__submenu-inner a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 9px;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background 0.15s;
}
.nav__submenu-inner a:hover { background: var(--color-candle-light); opacity: 1; }

.nav__cta {
  border: 1.5px solid var(--color-black-out);
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-black-out);
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, opacity 0.15s;
}
.nav__cta:hover {
  background: var(--color-spark-yellow);
  border-color: var(--color-spark-yellow);
  color: var(--color-black-out);
  opacity: 0.75;
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}
@media (min-width: 1024px) { .nav__toggle { display: none; } }

.nav__toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-black-out);
  transition: transform 0.3s, opacity 0.3s;
}
.nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile fullscreen overlay */
@media (max-width: 1023px) {
  .nav__links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-candle-light);
    z-index: 99;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-8);
    font-size: 1.25rem;
    overflow-y: auto;
  }
  /* every top-level entry (plain links and the "Para incorporadoras"
     dropdown wrapper) gets the same centred text + a divider, so the
     list reads as one consistent stack instead of free-floating items */
  .nav__links.open > a,
  .nav__links.open > .nav__has-menu {
    text-align: center;
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--color-cozy-brown-700);
  }
  .nav__links.open > a:last-child,
  .nav__links.open > .nav__has-menu:last-child { border-bottom: none; }
  /* chevron rotates open; JS toggles .is-open on tap instead of hover */
  .nav__links.open .nav__menu-toggle svg { transition: transform 0.2s; }
  .nav__links.open .nav__has-menu.is-open .nav__menu-toggle svg { transform: rotate(180deg); }
  .nav__links.open .nav__submenu {
    display: none;
    position: static;
    width: 100%;
    padding-top: 0;
  }
  .nav__links.open .nav__has-menu.is-open .nav__submenu { display: block; }
  .nav__links.open .nav__submenu-inner {
    display: flex;
    flex-direction: column;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    width: 100%;
    padding: 0;
    text-align: center;
  }
  .nav__links.open .nav__submenu-inner a {
    font-size: 0.9375rem;
    color: var(--color-black-out-500);
    padding: 0.625rem 0;
  }
  .nav__links.open .nav__submenu-inner a:not(:last-child) {
    border-bottom: 1px solid var(--color-cozy-brown-700);
  }
  .nav__links.open .nav__link--active::after { display: none; }
}

/* ============================================================
   LAYER 6 — BANNER / HERO
   ============================================================ */
.banner {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  overflow: hidden;
  background: var(--color-candle-light);
}
.banner__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) {
  .banner__inner {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-16);
  }
}

.banner__headline {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: var(--space-6);
}
.banner__sub {
  font-size: var(--text-preamble);
  max-width: 440px;
  color: var(--color-black-out-700);
}

.banner__visual { position: relative; }

.banner__blob {
  position: absolute;
  width: 70%;
  padding-bottom: 70%;
  background: var(--color-spark-yellow);
  border-radius: var(--radius-full);
  filter: blur(80px);
  opacity: 0.7;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

.banner__carousel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  touch-action: pan-y;
}
.banner__carousel-track {
  display: flex;
  transition: transform 0.7s var(--ease-out);
}
.banner__carousel-slide {
  min-width: 100%;
  position: relative;
}
.banner__img-main {
  width: 100%;
  max-width: 600px;
  border-radius: var(--radius-full);
  object-fit: cover;
  aspect-ratio: 1;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.banner__img-secondary {
  position: absolute;
  top: 5%;
  left: 0;
  width: 28%;
  border-radius: var(--radius-full);
  object-fit: cover;
  z-index: 3;
}
.banner__img-overlay {
  position: absolute;
  bottom: 5%;
  right: 0;
  width: 50%;
  z-index: 3;
  pointer-events: none;
}

.banner__carousel-dots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-6);
}
.banner__dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-cozy-brown);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
  border: none;
}
.banner__dot.active {
  background: var(--color-black-out);
  transform: scale(1.5);
}

.banner__scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   LAYER 7 — BEFORE / AFTER
   ============================================================ */
.antesdepois__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
}
.antesdepois__text { text-align: center; }
.antesdepois__text h2 { margin-bottom: var(--space-3); }
.antesdepois__text p { color: var(--color-black-out-500); }

.before-after__slider {
  position: relative;
  width: 100%;
  max-width: 900px;
  border-radius: 700px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  aspect-ratio: 3/2;
}
.before-after__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.before-after__img--after { clip-path: inset(0 50% 0 0); }

.before-after__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  z-index: 10;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.before-after__handle::before,
.before-after__handle::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: rgba(255,255,255,0.7);
  z-index: -1;
}
.before-after__handle::before { top: 100%; height: 200px; }
.before-after__handle::after  { bottom: 100%; height: 200px; }

.before-after__label {
  position: absolute;
  bottom: var(--space-4);
  background: rgba(255,255,255,0.85);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 5;
}
.before-after__label--left  { left:  var(--space-4); }
.before-after__label--right { right: var(--space-4); }

/* ============================================================
   LAYER 8 — ICON PILLS
   ============================================================ */
.icon-pills { background: var(--color-candle-light); }
.icon-pills__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) { .icon-pills__inner { flex-direction: row; } }

.icon-pill {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white-magic);
  border: 1px solid rgba(191,186,176,0.5);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
  flex: 1;
}
.icon-pill--dark {
  background: var(--color-black-out);
  color: var(--color-white-magic);
  border-color: var(--color-black-out);
}
.icon-pill--green {
  background: var(--color-welcome-green);
  border-color: var(--color-welcome-green);
}
.icon-pill__icon {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-pill__icon img { width: 44px; height: 44px; object-fit: contain; }
.icon-pill__text {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ============================================================
   LAYER 9 — PERSONALIZADO / SOLUTIONS TABS
   ============================================================ */
.personalizado { background: var(--color-white-magic); }

.solutions__tabs {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-12);
  background: var(--color-candle-light);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  width: fit-content;
  margin-inline: auto;
  margin-bottom: var(--space-12);
  overflow: hidden;
}
.solutions__tab {
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
}
.solutions__tab.active {
  background: var(--color-spark-yellow);
  color: var(--color-black-out);
}
.solutions__panel { display: none; }
.solutions__panel.active { display: block; }

.solutions__layout {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 768px) {
  .solutions__layout { grid-template-columns: 1fr 1fr; }
  .solutions__layout--reverse .solutions__image-col { order: 2; }
  .solutions__layout--reverse .solutions__text-col  { order: 1; }
}

.solutions__img-wrap {
  border-radius: var(--radius-full);
  overflow: hidden;
}
.solutions__img-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3/4;
  display: block;
}
.solutions__text-col h3 {
  font-size: var(--text-heading-md);
  margin-bottom: var(--space-6);
}
.solutions__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.solutions__list li {
  position: relative;
  padding-left: var(--space-8);
  font-size: var(--text-preamble);
  line-height: 1.5;
}
.solutions__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.4em;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-cozy-brown);
}

/* ============================================================
   LAYER 10 — UNIMOS (cards)
   ============================================================ */
.unimos { background: var(--color-candle-light); }

.unimos__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) { .unimos__grid { grid-template-columns: 1fr; } }

.unimos__card {
  background: var(--color-white-magic);
  border-radius: 200px 200px 0 0;
  overflow: hidden;
  padding: var(--space-12) var(--space-8) var(--space-8);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}
.unimos__number {
  width: 56px !important;
  height: auto !important;
  margin-bottom: var(--space-2);
}
.unimos__card h3 { font-family: var(--font-display); font-size: 1.75rem; }
.unimos__card h4 { font-size: 0.9rem; color: var(--color-black-out-500); font-weight: 500; }
.unimos__card p  { font-size: 0.875rem; color: var(--color-black-out-700); }
.unimos__card-img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  max-height: 240px;
}
.unimos__badge { max-width: 120px; margin-inline: auto; }

/* ============================================================
   LAYER 11 — TESTIMONIALS
   ============================================================ */
.testimonials { background: var(--color-white-magic); }

.testimonials__slider { position: relative; overflow: hidden; }
.testimonials__track {
  display: flex;
  transition: transform 0.6s var(--ease-out);
}
.testimonials__slide { min-width: 100%; }

.testimonials__layout {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 768px) {
  .testimonials__layout { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

.testimonials__photo {
  position: relative;
  padding-top: var(--space-8);
  padding-left: var(--space-8);
}
.testimonials__photo img {
  border-radius: var(--radius-md);
  width: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
}
.testimonials__photo::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: var(--space-4); bottom: var(--space-4);
  background: var(--color-cozy-brown-700);
  border-radius: var(--radius-md);
  z-index: 1;
}

.testimonials__quote { font-style: normal; }
.testimonials__quote p {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: var(--space-6);
}
.testimonials__quote footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.testimonials__quote strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
}
.testimonials__quote span {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-black-out-500);
}

.testimonials__nav {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-8);
}
.testimonials__arrow {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-white-magic);
  border: 1px solid var(--color-cozy-brown);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.testimonials__arrow:hover {
  background: var(--color-black-out);
  color: var(--color-white-magic);
  border-color: var(--color-black-out);
}

/* ============================================================
   LAYER 12 — MILESTONES
   ============================================================ */
.milestones { background: var(--color-candle-light); }
.milestones h2 { text-align: center; margin-bottom: var(--space-12); }

.milestones__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) { .milestones__grid { grid-template-columns: 1fr; } }

.milestone { padding: var(--space-3); }
.milestone__inner {
  border: 1px solid var(--color-cozy-brown);
  border-radius: var(--radius-full);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
  background: var(--color-white-magic);
  gap: var(--space-3);
}
.milestone--highlight .milestone__inner {
  box-shadow: 0 0 100px 30px var(--color-spark-yellow);
  position: relative;
  z-index: 1;
}
.milestone__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}
.milestone__symbol { font-size: 0.65em; }
.milestone__prefix { font-size: 0.65em; }
.milestone__label {
  font-size: 0.9rem;
  color: var(--color-black-out-700);
  line-height: 1.3;
  max-width: 140px;
}

/* ============================================================
   LAYER 13 — PARTNERS
   ============================================================ */
.partners { background: var(--color-white-magic); }
.partners__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 768px) { .partners__inner { grid-template-columns: 1fr 1fr; } }

.partners__image img {
  border-radius: 0 200px 0 200px;
  width: 100%;
  object-fit: cover;
  max-height: 600px;
}
.partners__content h2 { font-size: var(--text-heading-lg); margin-bottom: var(--space-6); }

.partners__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.partners__tag {
  border: 1px solid var(--color-black-out);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.partners__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: 420px;
}
.partners__logos img {
  width: 100%;
  object-fit: contain;
  height: 50px;
}

/* ============================================================
   LAYER 14 — SUPPLIERS / MARQUEE
   ============================================================ */
.suppliers { background: var(--color-candle-light); }
.suppliers__header { margin-bottom: var(--space-8); }
.suppliers__header h2 {
  font-size: var(--text-heading-md);
  max-width: 470px;
}
.suppliers__label {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  color: var(--color-black-out-500);
}

.partners-marquee { overflow: hidden; padding-block: var(--space-4); }
.partners-marquee__track {
  display: flex;
  gap: var(--space-12);
  width: max-content;
  animation: marquee 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .partners-marquee__track { animation: none; } }
.partners-marquee__track img {
  height: 60px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   LAYER 15 — GALLERY / ACREDITAMOS
   ============================================================ */
.gallery-section { background: var(--color-white-magic); }
.gallery-section__text {
  text-align: center;
  margin-bottom: var(--space-12);
}
.gallery-section__label {
  font-size: var(--text-preamble);
  color: var(--color-black-out-500);
  margin-bottom: var(--space-2);
}
.gallery-section__text h2 { margin-bottom: var(--space-4); }
.gallery-section__sub {
  font-size: var(--text-preamble);
  color: var(--color-black-out-700);
}

.gallery-carousel { overflow: hidden; padding-block: var(--space-4); }
.gallery-carousel__track {
  display: flex;
  gap: var(--space-4);
  animation: marquee 25s linear infinite;
  width: max-content;
}
@media (prefers-reduced-motion: reduce) { .gallery-carousel__track { animation: none; } }
.gallery-carousel__track img {
  height: 300px;
  width: auto;
  object-fit: cover;
  border-radius: var(--radius-xl);
  flex-shrink: 0;
}
@media (max-width: 768px) { .gallery-carousel__track img { height: 220px; } }

/* ============================================================
   LAYER 16 — CTA FORM
   ============================================================ */
.cta-form { background: var(--color-candle-light); }
.cta-form__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}
.cta-form__inner h2 { font-size: var(--text-heading-xl); }
.cta-form__form {
  display: grid;
  grid-template-columns: 1fr auto;
  max-width: 480px;
  width: 100%;
}
.cta-form__form input {
  border: 1px solid var(--color-black-out);
  border-right: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  height: 52px;
  background: var(--color-white-magic);
  outline: none;
  font-size: 1rem;
  transition: border-color 0.2s;
}
.cta-form__form input:focus { border-color: var(--color-black-out-700); }
.cta-form__form button {
  width: 52px; height: 52px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--color-black-out);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.cta-form__form button:hover { background: var(--color-black-out-700); }
.cta-form__form button img { width: 24px; height: 24px; filter: invert(1); }

/* ============================================================
   LAYER 17 — FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-white-magic);
  border-top: 1px solid var(--color-cozy-brown-700);
  color: var(--color-black-out);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-12);
  row-gap: var(--space-6);
  padding-top: var(--space-16);
}
@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}
.footer__main { min-width: 0; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.875rem;
  margin-bottom: var(--space-8);
}
.footer__nav a { font-size: 0.9375rem; transition: opacity 0.2s; }
.footer__nav a:hover { opacity: 0.55; }

.footer__contact-btn {
  border: 1.5px solid var(--color-black-out);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.footer__contact-btn:hover {
  background: var(--color-spark-yellow);
  border-color: var(--color-spark-yellow);
}

.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}
.footer__social a {
  width: 42px; height: 42px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(39,38,34,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black-out);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.footer__social a:hover {
  background: var(--color-black-out);
  border-color: var(--color-black-out);
  color: var(--color-white-magic);
}
.footer__social svg { width: 18px; height: 18px; }

.footer__brand { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .footer__brand { align-items: flex-end; text-align: right; }
}
.footer__brand-symbol { color: var(--color-black-out); }
.footer__brand-symbol svg { height: 92px; width: auto; }
.footer__tagline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.25;
  margin-top: var(--space-6);
  max-width: 260px;
}
/* phones: mirror the reference footer — symbol on top, nav stacked
   one link per line, socials, copyright. display:contents dissolves
   .footer__brand so its children can be reordered among the other
   footer blocks */
@media (max-width: 767px) {
  .footer__inner { display: flex; flex-direction: column; align-items: flex-start; }
  .footer__brand { display: contents; }
  .footer__brand-symbol { order: -2; }
  .footer__tagline { display: none; }
  .footer__main { order: 1; margin-top: 24px; }
  .footer__bottom { order: 3; width: 100%; }
  .footer__nav { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer__nav .footer__contact-btn { margin-top: 4px; }
}

.footer__bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-cozy-brown-700);
  padding-block: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-caption);
}

/* Back-to-top floating button */
.back-to-top {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 60;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-black-out-500);
  color: var(--color-candle-light);
  box-shadow: 0 8px 24px rgba(39,38,34,0.28);
  transition: filter 0.15s, transform 0.15s;
}
.back-to-top:hover { filter: brightness(0.95); transform: translateY(-2px); }

/* ============================================================
   LAYER 18 — PAGE HEADER (inner pages)
   ============================================================ */
.page-header {
  padding-top: 120px;
  padding-bottom: var(--space-16);
  background: var(--color-candle-light);
}
.page-header__breadcrumb {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-black-out-500);
  margin-bottom: var(--space-4);
}
.page-header__breadcrumb a:hover { text-decoration: underline; }
.page-header h1 { font-size: var(--text-display-sm); max-width: 680px; }
.page-header p {
  font-size: var(--text-preamble);
  max-width: 680px;
  margin-top: var(--space-4);
  color: var(--color-black-out-700);
}

/* ============================================================
   LAYER 19 — INNER PAGE COMPONENTS
   ============================================================ */

/* Buttons */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  text-align: center;
}
.btn--primary {
  background: var(--color-spark-yellow);
  color: var(--color-black-out);
}
.btn--primary:hover { background: var(--color-spark-yellow-900); }
.btn--outline-dark {
  border: 2px solid var(--color-black-out);
  color: var(--color-black-out);
}
.btn--outline-dark:hover { background: var(--color-black-out); color: var(--color-white-magic); }
.btn--outline-white {
  border: 2px solid var(--color-white-magic);
  color: var(--color-white-magic);
}
.btn--outline-white:hover { background: var(--color-white-magic); color: var(--color-black-out); }

/* Two-column layout */
.two-col {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } }

.two-col__img img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  max-height: 560px;
}
.two-col__img--round img { border-radius: var(--radius-full); }
.two-col__content { display: flex; flex-direction: column; gap: var(--space-6); }
.two-col__content h2 { font-size: var(--text-heading-lg); }

/* Benefits / stats grid */
.benefits-grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 640px) { .benefits-grid { grid-template-columns: repeat(3, 1fr); } }

.benefit-card {
  text-align: center;
  padding: var(--space-10, 2.5rem) var(--space-8);
  background: var(--color-white-magic);
  border: 1px solid var(--color-cozy-brown-700);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.benefit-card__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 300;
  color: var(--color-cozy-brown);
  line-height: 1;
}
.benefit-card h3 { font-size: 1.125rem; }
.benefit-card p { font-size: 0.9375rem; color: var(--color-black-out-700); }

/* Process steps */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10, 2.5rem);
}
.step {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 768px) { .step { grid-template-columns: 100px 1fr; align-items: start; } }
.step__number {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 300;
  line-height: 0.9;
  color: var(--color-cozy-brown);
}
.step__content h3 { font-family: var(--font-display); font-size: 1.375rem; margin-bottom: var(--space-2); }
.step__content p { color: var(--color-black-out-700); }

/* Values / pillars grid */
.values-grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 640px)  { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

.value-card {
  padding: var(--space-8);
  border: 1px solid var(--color-cozy-brown-700);
  border-radius: var(--radius-md);
  background: var(--color-white-magic);
}
.value-card h3 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.value-card p { font-size: 0.9375rem; color: var(--color-black-out-700); }

/* Challenges / desafios */
.challenges-list {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 768px) { .challenges-list { grid-template-columns: 1fr 1fr; } }

.challenge {
  padding: var(--space-8);
  background: var(--color-white-magic);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-spark-yellow);
}
.challenge__tag {
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-black-out-500);
  margin-bottom: var(--space-3);
}
.challenge h3 { font-size: 1.125rem; margin-bottom: var(--space-3); }
.challenge__solution {
  font-size: 0.9375rem;
  color: var(--color-black-out-700);
  border-top: 1px solid var(--color-cozy-brown-700);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

/* CTA band */
.cta-band {
  background: var(--color-black-out);
  color: var(--color-white-magic);
  text-align: center;
  padding-block: var(--space-24);
}
.cta-band h2 { font-size: var(--text-heading-xl); margin-bottom: var(--space-6); }

/* Location / regions */
.locations-intro {
  text-align: center;
  margin-bottom: var(--space-16);
}
.locations-intro .stat {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 300;
}

.regions-grid {
  display: grid;
  gap: var(--space-12);
}
@media (min-width: 768px)  { .regions-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .regions-grid { grid-template-columns: repeat(3, 1fr); } }

.region h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-cozy-brown-700);
}
.region ul { display: flex; flex-direction: column; gap: var(--space-4); }
.region li strong { display: block; font-weight: 600; }
.region li span { color: var(--color-black-out-500); font-size: var(--text-caption); }

/* ============================================================
   LAYER 21 — UTILITIES
   ============================================================ */
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-6  { margin-bottom: var(--space-6); }
.u-mb-8  { margin-bottom: var(--space-8); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-12 { margin-top: var(--space-12); }
.u-center { text-align: center; }

/* ============================================================
   LAYER 22 — ERROR PAGE (404)
   ============================================================ */
.error-page {
  display: flex;
  justify-content: center;
  padding: var(--space-4) var(--space-8) var(--space-24);
}
.error-page__inner {
  width: 100%;
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error-page__art {
  width: 100%;
  max-width: 460px;
  margin-bottom: var(--space-8);
}
.error-page__art img { width: 100%; height: auto; }
.error-page__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.125rem, 4vw, 3.5rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: 640px;
  margin-bottom: var(--space-4);
}
.error-page__text {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-black-out-500);
  max-width: 460px;
  margin-bottom: var(--space-8);
}
.error-page__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-black-out);
  color: var(--color-candle-light);
  border-radius: var(--radius-pill);
  padding: 1.1rem 2.1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: filter 0.15s;
}
.error-page__btn:hover { filter: brightness(1.15); }

/* ============================================================
   LAYER 23 — EYEBROW (section kicker, reusable)
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black-out);
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 13px;
  background: currentColor;
}
.eyebrow--light { color: var(--color-spark-yellow); }

/* ============================================================
   LAYER 24 — CONTACT
   ============================================================ */
.contact {
  background: var(--color-black-out);
  color: var(--color-candle-light);
  padding-block: var(--space-20);
}
/* Head */
.contact__head { text-align: center; }
.contact__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.125rem, 4vw, 3.5rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 22px 0 0;
}

/* Contact channels bar */
.contact__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 44px auto 0;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px;
  border-radius: var(--radius-lg);
}
.contact__channel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-candle-light);
  white-space: nowrap;
  border-radius: var(--radius-lg);
  transition: color 0.2s ease, background 0.2s ease;
}
.contact__channel svg { flex: none; color: var(--color-spark-yellow); }
.contact__channel:hover { color: var(--color-spark-yellow); background: rgba(255, 255, 255, 0.07); }
@media (max-width: 760px) {
  .contact__bar { flex-direction: column; align-items: stretch; width: 100%; }
  .contact__channel { justify-content: center; padding: 14px 20px; }
}
.contact__hours {
  text-align: center;
  font-size: 0.8125rem;
  opacity: 0.7;
  line-height: 1.5;
  margin-top: 14px;
}

/* Form card */
.contact__card {
  background: var(--color-candle-light);
  color: var(--color-black-out);
  border-radius: var(--radius-md);
  padding: 36px;
  max-width: 1040px;
  margin: 32px auto 0;
}
.contact__subtitle {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 18px;
  opacity: 0.85;
}

/* Reason tabs (outside the card, on the dark background) */
.contact__reason {
  max-width: 640px;
  margin: 28px auto 0;
}
.contact__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  background: var(--color-cozy-brown-700);
  padding: 6px;
  border-radius: var(--radius-lg);
  width: 100%;
}
.contact__tab {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-black-out);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  padding: 13px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* very small screens: let the tabs wrap instead of overflowing */
@media (max-width: 520px) {
  .contact__tabs { flex-wrap: wrap; }
  .contact__tab { flex: 1 1 auto; }
}
.contact__tab--active {
  background: var(--color-black-out);
  color: var(--color-candle-light);
}

/* Mobile dropdown alternative to the tab bar above (LAYER 26.13
   swaps which of the two is visible per breakpoint). Structure
   mirrors .nav__submenu: a trigger button plus an absolutely
   positioned menu card that drops onto the dark hero background. */
.contact__select { display: none; position: relative; }
.contact__select-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--color-cozy-brown-700);
  color: var(--color-black-out);
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-family: var(--font-body);
  cursor: pointer;
}
.contact__select-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}
.contact__select-value { flex: 1; text-align: left; font-size: 0.9375rem; font-weight: 600; }
.contact__select-chevron { flex: none; transition: transform 0.2s ease; }
.contact__select[data-open="true"] .contact__select-chevron { transform: rotate(180deg); }
.contact__select-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-white-magic);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(39,38,34,0.16);
  padding: var(--space-2);
  margin: 0;
}
.contact__select-menu[hidden] { display: none; }
.contact__select-menu li {
  padding: 0.75rem 1rem;
  border-radius: 9px;
  font-size: 0.9375rem;
  color: var(--color-black-out);
  cursor: pointer;
  transition: background 0.15s;
}
.contact__select-menu li:hover,
.contact__select-menu li[aria-selected="true"] { background: var(--color-candle-light); font-weight: 600; }

.contact__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Name field takes a full row; the other fields pair up below it. */
.contact__fields > div:first-child { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .contact__fields { grid-template-columns: 1fr; }
}

.field-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-black-out);
  background: #FBF9F6;
  border: 1px solid #DCD8D0;
  border-radius: 12px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.field-input::placeholder { color: var(--color-black-out-500); }
.field-input:focus {
  border-color: var(--color-black-out);
  background: var(--color-white-magic);
  box-shadow: 0 0 0 3px rgba(166,210,201,0.45);
}
textarea.field-input {
  resize: vertical;
  min-height: 96px;
  padding: 17px 18px;
  line-height: 1.5;
  margin-top: 12px;
}

.contact__note {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-black-out-500);
  max-width: 560px;
  margin-top: 20px;
}
.contact__note a { color: var(--color-black-out); text-decoration: underline; }

.contact__error {
  font-size: 0.85rem;
  color: #C0392B;
  margin-top: 16px;
}

.contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin-top: 20px;
  background: var(--color-comfy-green);
  color: var(--color-black-out);
  border: none;
  border-radius: var(--radius-lg);
  padding: 16px 30px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
}
.contact__submit:hover { filter: brightness(1.08); }
.contact__submit:active { transform: scale(0.97); }
.contact__submit svg { transition: transform 0.2s ease; }
.contact__submit:hover svg { transform: translateX(4px); }

/* Success state */
.contact__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.contact__success-ico {
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-black-out);
  color: var(--color-spark-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__success h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}
.contact__success p {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--color-black-out-500);
  max-width: 420px;
  margin: 0;
}
.contact__success .contact__submit { width: auto; margin-top: 8px; }

[hidden] { display: none !important; }

/* ============================================================
   LAYER 25 — BUTTONS (reusable)
   ============================================================ */
.btn-yellow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-spark-yellow);
  color: var(--color-black-out);
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 30px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: filter 0.15s;
}
.btn-yellow:hover { filter: brightness(0.96); }
.btn-gray {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-cozy-brown-900);
  color: var(--color-black-out);
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 30px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: filter 0.15s;
}
.btn-gray:hover { filter: brightness(0.96); }

/* ============================================================
   LAYER 26 — ABOUT (Sobre nós)
   ============================================================ */

/* Hero */
.about-hero { background: var(--color-candle-light); padding-block: var(--space-20); }
.about-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) {
  .about-hero__inner { grid-template-columns: 440px 1fr; gap: 48px; }
}
.about-hero__photo { position: relative; max-width: 440px; width: 100%; }
@media (min-width: 900px) {
  .about-hero__photo {
    justify-self: start;
    align-self: end;
    margin-bottom: -130px;
    z-index: 3;
  }
}
.about-hero__photo::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: radial-gradient(circle at 30% 20%, rgba(253,255,168,0.5), transparent 62%);
  border-radius: 36px;
}
.about-hero__photo img,
.about-hero__photo video {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
/* Mobile shows a static image instead of the video (see the mobile
   block below) — hidden here so desktop/tablet keep the video only.
   Needs the extra .about-hero__photo ancestor selector to out-rank
   the shared "img, video" rule above, which sets display: block. */
.about-hero__photo .about-hero__mobile-img { display: none; }
.about-hero__body { display: flex; align-items: center; gap: 40px; }
.about-hero__text { max-width: 600px; }
.about-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-top: 22px;
}
.about-hero__highlight {
  background: var(--color-comfy-green);
  border-radius: 999px;
  padding: 0 18px;
}
.about-hero__sub {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-black-out-500);
  max-width: 560px;
  margin-top: 26px;
}
.about-hero__symbol { flex: none; color: var(--color-black-out); }
.about-hero__symbol img { height: 128px; width: auto; display: block; }
@media (max-width: 1023px) { .about-hero__symbol { display: none; } }

/* Story / manifesto (dark) */
.about-story {
  background: var(--color-black-out);
  color: var(--color-candle-light);
  padding-block: var(--space-24);
}
.about-story__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .about-story__inner { grid-template-columns: 0.92fr 1.08fr; gap: 72px; }
}
.about-story h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5625rem, 2.6vw, 2.1875rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  margin-top: 22px;
  color: var(--color-candle-light);
}
.about-story__hl { color: var(--color-spark-yellow); }
.about-story__copy { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.about-story__copy p { font-size: 1.0625rem; line-height: 1.75; opacity: 0.82; }
.about-story__copy p strong { font-weight: 600; color: var(--color-candle-light); }
.about-story__copy p.is-lead { font-weight: 600; opacity: 1; color: var(--color-candle-light); }

/* Stats circles (dark, continues) */
.about-stats { background: var(--color-black-out); padding-block: 0 var(--space-20); }
.about-stats__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
/* phones: one big number per row, the circle capped so it doesn't
   balloon to the full container width */
@media (max-width: 639px) {
  .about-stats__inner, .inc-stats__grid { justify-items: center; }
  .about-stat { width: min(100%, 300px); }
}
/* home's 4-number variant: at 300px each, 4 stacked circles run to
   ~1270px — well past one scroll. A 2x2 grid of much smaller circles
   keeps the whole "quem confia" highlights on screen at once */
@media (max-width: 639px) {
  .about-stats__inner--4 { grid-template-columns: repeat(2, minmax(0, 146px)); justify-content: center; gap: 8px; }
  .about-stats__inner--4 .about-stat { width: 100%; padding: 10px; }
  .about-stats__inner--4 .about-stat__ico { height: 26px; margin-bottom: 3px; }
  .about-stats__inner--4 .about-stat__ico svg { width: 23px; height: 23px; }
  .about-stats__inner--4 .about-stat__ico--stars { font-size: 0.75rem; letter-spacing: 1.5px; }
  .about-stats__inner--4 .about-stat__value { font-size: 1.0625rem; }
  .about-stats__inner--4 .about-stat__label { font-size: 0.625rem; margin-top: 1px; }
}
@media (min-width: 640px)  { .about-stats__inner { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .about-stats__inner { grid-template-columns: repeat(5, 1fr); } }
/* 4-number variant (home): 2x2 on tablet, single row on desktop.
   The max-width caps each circle at the same diameter the 5-column
   sobre-nos row produces inside the full container */
@media (min-width: 640px)  { .about-stats__inner--4 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-inline: auto; } }
@media (min-width: 1000px) { .about-stats__inner--4 { grid-template-columns: repeat(4, 1fr); max-width: 1038px; } }
.about-stat {
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: #ECE8E1;
  color: var(--color-black-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.about-stat__ico { height: 52px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.about-stat__ico--stars { font-size: 1.3125rem; letter-spacing: 4px; text-indent: 4px; }
.about-stat__value { font-size: clamp(1.5rem, 2vw, 2.25rem); font-weight: 600; white-space: nowrap; }
.about-stat__label {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--color-black-out-700);
  margin-top: 6px;
  white-space: pre-line;
}

/* Partners (marquee) */
.about-partners { background: var(--color-section-alt); padding-block: var(--space-24); }
.about-partners__head { text-align: center; margin-bottom: 28px; }
.about-partners__head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-top: 14px;
}
.about-partners__tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  margin: 0 auto 40px;
  background: var(--color-candle-light);
  padding: 6px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(39,38,34,0.06);
}
.about-tab {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: transparent;
  color: var(--color-black-out);
  transition: background 0.15s, color 0.15s;
}
.about-tab--active { background: var(--color-black-out); color: var(--color-candle-light); }
/* icon markup is optional per instance; hidden by default so desktop
   pills read the same everywhere regardless of whether it's present */
.about-tab__ico { display: none; }
/* phones: the tabs stack — the 6px desktop padding leaves the active
   pill glued to the container's edges, so open it up */
@media (max-width: 560px) {
  .about-partners__tabs { padding: 16px 14px; gap: 12px; }
}
/* phones: swap the stacked pill list for a 3-column row of icon
   tiles, matching the site's other icon-choice tabs (e.g. "Escritório
   privado / Coworking / Salas de reunião") instead of wrapping long
   labels onto their own lines. Shared by every .about-partners
   instance (home, sobre-nós) so the mobile layout stays identical. */
@media (max-width: 560px) {
  .about-partners__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 8px;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 28px;
  }
  .about-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 6px;
    background: var(--color-white-magic);
    border: 1px solid var(--color-cozy-brown-700);
    border-radius: 14px;
    color: var(--color-black-out-500);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
  .about-tab--active {
    background: var(--color-spark-yellow-500);
    border-color: var(--color-spark-yellow-900);
    color: var(--color-black-out);
  }
  .about-tab__ico { display: flex; }
}
.about-partners__stage {
  border-radius: 28px;
  background: #FBF9F6;
  border: 1px solid #EFE7CF;
  overflow: hidden;
  padding: 18px 0;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Default (no JS): static centered logo wall */
.marquee__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 0;
}
.marquee__track span {
  flex: none;
  width: 168px;
  height: 58px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Uniform bounding box → wide wordmarks and compact marks read balanced */
.marquee__track img {
  max-width: 120px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* JS-enabled: seamless horizontal scroll (track cloned to 2x) */
.marquee.is-animated .marquee__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: about-marquee linear infinite;
}
.marquee.is-animated:hover .marquee__track { animation-play-state: paused; }
@keyframes about-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee.is-animated .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    animation: none;
  }
}

/* Florianópolis */
.about-floripa { background: var(--color-candle-light); padding-block: var(--space-24); }
.about-floripa__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .about-floripa__inner { grid-template-columns: 0.92fr 1.08fr; gap: 64px; }
}
.about-floripa h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3.1vw, 2.8125rem);
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin-top: 16px;
}
.about-floripa__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-black-out-500);
  max-width: 460px;
  margin: 24px 0 32px;
}
.about-floripa__addr { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.about-floripa__addr-ico {
  flex: none;
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-comfy-green);
  color: var(--color-black-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-floripa__addr-name { font-size: 1rem; font-weight: 600; }
.about-floripa__addr-detail { font-size: 0.875rem; color: #9A958C; line-height: 1.5; }
.about-floripa__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 18px;
}
.about-floripa__tile {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #E4DFD6;
}
.about-floripa__tile--tall { grid-column: 2; grid-row: 1 / span 2; }
.about-floripa__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.about-floripa__tile:hover img { transform: scale(1.05); }

/* Awards (dark) */
.about-awards { background: var(--color-black-out); padding-block: var(--space-24); }
.about-awards__title { text-align: center; max-width: 740px; margin: 0 auto 64px; }
.about-awards__title h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3.1vw, 2.8125rem);
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--color-candle-light);
}
.about-awards__row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 72px;
}
.about-award { display: flex; align-items: center; gap: 16px; }
.about-award__laurel {
  flex: none;
  width: 46px; height: 73px;
  background: var(--color-candle-light);
}
.about-award__laurel--left {
  -webkit-mask: url(/assets/img/laurel-left.svg) center / contain no-repeat;
  mask: url(/assets/img/laurel-left.svg) center / contain no-repeat;
}
.about-award__laurel--right {
  -webkit-mask: url(/assets/img/laurel-right.svg) center / contain no-repeat;
  mask: url(/assets/img/laurel-right.svg) center / contain no-repeat;
}
.about-award__body { text-align: center; min-width: 120px; }
.about-award__tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-spark-yellow);
  margin-bottom: 6px;
}
.about-award__name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-candle-light);
}

/* ============================================================
   LAYER 26.5 — NA MÍDIA (press mentions)
   ============================================================ */
.about-media { background: var(--color-candle-light); padding-block: var(--space-24); }
.about-media__title { text-align: center; max-width: 740px; margin: 0 auto 48px; }
.about-media__title .eyebrow { margin-bottom: 16px; }
.about-media__title h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3.1vw, 2.8125rem);
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--color-black-out);
}

.about-media__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .about-media__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .about-media__grid { grid-template-columns: 1fr; } }

/* Press card — reuses the home .hp-card format (image + Hepta title + Manrope body) */
.hp-card.hp-card--media {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white-magic);
  border: 1px solid var(--color-cozy-brown-700);
  transition: transform 0.25s ease;
}
/* Same hover as the home project cards (.hp-card): clean spring lift only. */
.hp-card.hp-card--media:hover { transform: translateY(-4px); }
.hp-card--media .hp-card__headline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-black-out-700);
  margin-bottom: 18px;
}
.hp-card--media .hp-card__foot { margin-top: auto; }

.hp-card--media .hp-card__badge {
  position: absolute;
  top: 30px;
  left: 30px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black-out);
  background: var(--color-spark-yellow);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ============================================================
   LAYER 26.6 — ABOUT (Sobre nós) — MOBILE
   Compresses the page into a single, shorter scroll: tighter
   section spacing, smaller type/media, denser grids.
   Scoped to body.page-sobre-nos because some classes here (e.g.
   about-stats) are shared with the home page and other pages that
   reuse the same components — unscoped rules leaked into them.
   ============================================================ */
@media (max-width: 767px) {

  /* Hero: title block ("Sobre nós" eyebrow + h1 + sub) comes before
     the video, and the video reads horizontal instead of portrait */
  body.page-sobre-nos .about-hero { padding-block: var(--space-12); }
  body.page-sobre-nos .about-hero__inner { gap: 24px; }
  body.page-sobre-nos .about-hero__body { order: 1; gap: 0; }
  body.page-sobre-nos .about-hero__photo { order: 2; margin-top: 24px; }
  /* static image instead of the autoplaying video on mobile */
  body.page-sobre-nos .about-hero__video { display: none; }
  body.page-sobre-nos .about-hero__photo .about-hero__mobile-img { display: block; aspect-ratio: 16 / 9; }
  body.page-sobre-nos .about-hero h1 { font-size: clamp(1.625rem, 7vw, 2rem); margin-top: 14px; }
  body.page-sobre-nos .about-hero__sub { font-size: 1rem; margin-top: 14px; }

  /* Story */
  /* margin-bottom: -1px kills a subpixel seam that can appear between
     this section and .about-stats below it — both share the same dark
     background, but fractional rounding of their heights on some
     viewport widths leaves a sliver of the page background showing through */
  body.page-sobre-nos .about-story { padding-block: var(--space-12); margin-bottom: -1px; }
  body.page-sobre-nos .about-story__inner { gap: 20px; }
  body.page-sobre-nos .about-story h2 { font-size: clamp(1.25rem, 5.5vw, 1.5rem); margin-top: 14px; }
  body.page-sobre-nos .about-story__copy { gap: 14px; padding-top: 4px; }
  body.page-sobre-nos .about-story__copy p { font-size: 0.9375rem; line-height: 1.55; }

  /* Stats: two per row instead of one, smaller circles/type */
  body.page-sobre-nos .about-stats { padding-block: 0 var(--space-12); }
  body.page-sobre-nos .about-stats__inner,
  body.page-sobre-nos .about-stats__inner--4 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  body.page-sobre-nos .about-stat { width: 100%; padding: 12px; }
  body.page-sobre-nos .about-stat__ico { height: 32px; margin-bottom: 4px; }
  body.page-sobre-nos .about-stat__ico svg { width: 30px; height: 30px; }
  body.page-sobre-nos .about-stat__ico--stars { font-size: 0.875rem; letter-spacing: 2px; }
  body.page-sobre-nos .about-stat__value { font-size: clamp(1.125rem, 5vw, 1.375rem); }
  body.page-sobre-nos .about-stat__label { font-size: 0.75rem; margin-top: 2px; }
  /* 5th stat (empreendimentos parceiros) is alone on the last row — center it */
  body.page-sobre-nos .about-stats__inner .about-stat:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }

  /* Partners: no page-specific overrides here — .about-partners' own
     shared rules (icon-tile tabs at <=560px, etc.) already give this
     section an identical mobile layout on every page that uses it. */

  /* Florianópolis */
  body.page-sobre-nos .about-floripa { padding-block: var(--space-12); }
  body.page-sobre-nos .about-floripa__inner { gap: 20px; }
  body.page-sobre-nos .about-floripa h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); margin-top: 10px; }
  body.page-sobre-nos .about-floripa__lead { font-size: 0.9375rem; margin: 14px 0 20px; }
  body.page-sobre-nos .about-floripa__addr { margin-bottom: 0; }
  body.page-sobre-nos .about-floripa__grid { display: none; }

  /* Awards */
  body.page-sobre-nos .about-awards { padding-block: var(--space-12); }
  body.page-sobre-nos .about-awards__title { margin: 0 auto 28px; }
  body.page-sobre-nos .about-awards__title h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
  body.page-sobre-nos .about-awards__row { gap: 32px; }
  body.page-sobre-nos .about-award__laurel { width: 34px; height: 54px; }
  body.page-sobre-nos .about-award__name { font-size: 1.0625rem; }

  /* Na mídia: was the one section blowing past the "one scroll"
     budget (~1600px, almost two full phone screens) — 4 press cards
     stacked in a single column, each with a full-size 150px image
     and an uncapped 2-3 line headline. A 2-up grid with smaller
     everything (image, badge, type) plus a line-clamp on the
     headline (so a long quote can't stretch the card taller than
     its neighbour) brings the section back under one scroll. */
  body.page-sobre-nos .about-media { padding-block: calc(var(--space-12) - 16px) var(--space-12); }
  body.page-sobre-nos .about-media__title { margin: 0 auto 16px; }
  body.page-sobre-nos .about-media__title h2 { font-size: clamp(1.25rem, 6vw, 1.625rem); }
  body.page-sobre-nos .about-media__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  body.page-sobre-nos .hp-card.hp-card--media { padding: 12px; border-radius: 14px; }
  body.page-sobre-nos .hp-card--media .hp-card__img { height: 84px; margin-bottom: 10px; border-radius: 10px; }
  body.page-sobre-nos .hp-card--media .hp-card__badge { top: 10px; left: 10px; font-size: 0.5625rem; padding: 3px 8px; }
  body.page-sobre-nos .hp-card--media h3 { font-size: 0.875rem; margin-bottom: 2px; }
  body.page-sobre-nos .hp-card--media .hp-card__headline {
    font-size: 0.6875rem; line-height: 1.4; margin-bottom: 8px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  body.page-sobre-nos .hp-card--media .hp-card__foot { font-size: 0.6875rem; }
  body.page-sobre-nos .hp-card--media .hp-card__foot svg { width: 14px; height: 14px; }
}

/* ============================================================
   LAYER 26.7 — PARA VOCÊ — MOBILE
   Same idea as the Sobre nós pass above: shrink every section
   (hero, problema, categorias, como funciona, por que, galeria,
   depoimentos, FAQ, CTA) enough that each lands in roughly one
   scroll instead of two or three. .pv-section-head is shared by
   problema/categorias/como funciona/por que/FAQ, so one rule there
   standardizes headings across all five. Gallery/reviews/CTA reuse
   home-page classes, so everything here is scoped to body.page-para-voce.
   ============================================================ */
@media (max-width: 767px) {

  /* Hero: title, then video, then copy/CTA/trust badges (DOM order —
     see the markup). Some breathing room above the title (but still
     tighter than the desktop 84px), and the video reads as a wide
     strip instead of a near-square block. */
  body.page-para-voce .tk-hero { padding-block: 44px 40px; }
  body.page-para-voce .tk-hero__grid { gap: 22px; }
  body.page-para-voce .pv-hero__title .eyebrow { font-size: 0.75rem; }
  body.page-para-voce .tk-hero h1 { font-size: clamp(1.625rem, 7.5vw, 2rem); margin-top: 12px; }
  /* matches the source file's own 960x960 square — anything shorter
     crops the top of the model's head at some point in the loop */
  body.page-para-voce .tk-hero__media video { aspect-ratio: 1 / 1; }
  body.page-para-voce .tk-hero__text p, body.page-para-voce .pv-hero__body p { font-size: 0.9375rem; line-height: 1.55; margin: 16px 0 20px; }
  body.page-para-voce .pv-hero__body .btn-dark { margin-bottom: 18px; }
  /* trust card: full width, two stats side by side, never stacked */
  body.page-para-voce .pv-trust { width: 100%; gap: 14px; padding: 14px 18px; }
  body.page-para-voce .pv-trust__value { font-size: 1.375rem; gap: 6px; }
  body.page-para-voce .pv-trust__value svg { width: 17px; height: 17px; flex: none; }
  body.page-para-voce .pv-trust__label { font-size: 0.6875rem; }
  body.page-para-voce .pv-trust__stars { letter-spacing: 0.5px; }
  body.page-para-voce .pv-trust__sep { height: 32px; }

  /* Heading block shared by problema / categorias / como funciona / por que / FAQ */
  body.page-para-voce .pv-section-head { margin-bottom: 32px; }
  body.page-para-voce .pv-section-head .eyebrow { font-size: 0.6875rem; }
  body.page-para-voce .pv-section-head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); margin-top: 12px; }
  body.page-para-voce .pv-section-head__sub { font-size: 0.9375rem; margin-top: 10px; }

  /* Problema */
  body.page-para-voce .pv-problem { padding-block: var(--space-12); }
  body.page-para-voce .pv-problem__grid { gap: 28px; }
  body.page-para-voce .pv-pain { padding: 10px 14px; gap: 10px; }
  body.page-para-voce .pv-pain h3 { font-size: 0.9375rem; }
  body.page-para-voce .pv-problem__punch { font-size: 1.0625rem; margin-top: 10px; }

  /* O que é a Spotlar (categorias) */
  body.page-para-voce .pv-cats { padding-block: var(--space-12); }
  body.page-para-voce .pv-cats__fallback { margin-top: 20px; gap: 8px; }
  body.page-para-voce .pv-cat { padding: 8px 14px; font-size: 0.8125rem; }

  /* Como funciona: 2 steps per row instead of 1, denser cards */
  body.page-para-voce .pv-how { padding-block: var(--space-12); }
  body.page-para-voce .pv-how__grid--5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.page-para-voce .pv-how__grid--5 .pv-step:last-child { grid-column: 1 / -1; }
  body.page-para-voce .pv-step { padding: 16px 14px; border-radius: 16px; }
  body.page-para-voce .pv-step__top { margin-bottom: 10px; }
  body.page-para-voce .pv-step__num { font-size: 1.75rem; }
  body.page-para-voce .pv-step__ico { width: 38px; height: 38px; }
  body.page-para-voce .pv-step__ico svg { width: 20px; height: 20px; }
  body.page-para-voce .pv-step h3 { font-size: 1rem; margin-bottom: 6px; }
  body.page-para-voce .pv-step p { font-size: 0.8125rem; line-height: 1.5; }

  /* Por que a Spotlar */
  body.page-para-voce .pv-why { padding-block: var(--space-12); }
  body.page-para-voce .pv-why__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.page-para-voce .pv-why__grid .pv-why-card:last-child { grid-column: 1 / -1; }
  body.page-para-voce .pv-why-card { padding: 16px 14px; border-radius: 16px; }
  body.page-para-voce .pv-why-card__top { margin-bottom: 10px; }
  body.page-para-voce .pv-why-card__num { font-size: 1.75rem; }
  body.page-para-voce .pv-why-card__ico { width: 38px; height: 38px; }
  body.page-para-voce .pv-why-card__ico svg { width: 20px; height: 20px; }
  body.page-para-voce .pv-why-card h3 { font-size: 1rem; margin-bottom: 6px; }
  body.page-para-voce .pv-why-card__list { font-size: 0.8125rem; line-height: 1.5; }

  /* Galeria (flush, keeps its own Villamare card) */
  body.page-para-voce .home-gallery--flush { padding-bottom: var(--space-12); }
  body.page-para-voce .home-gallery--flush .home-gallery__head .eyebrow { font-size: 0.6875rem; }
  body.page-para-voce .home-gallery--flush .home-gallery__head h2 { font-size: 1.5rem; margin-top: 10px; }
  body.page-para-voce .home-gallery--flush .home-gallery__head { margin-bottom: 24px; }
  body.page-para-voce .home-gallery--flush .home-gallery__grid { grid-auto-rows: 150px; gap: 12px; }
  body.page-para-voce .home-gallery__more { margin-top: 22px; }

  /* Depoimentos */
  body.page-para-voce .home-reviews { padding-block: 32px; }
  body.page-para-voce .home-reviews__head .eyebrow { font-size: 0.6875rem; }
  body.page-para-voce .home-reviews__title { font-size: 1.5rem; margin-bottom: 24px; }
  body.page-para-voce .home-reviews__stage { padding-bottom: 40px; }
  body.page-para-voce .review-card { padding: 16px; gap: 10px; }
  body.page-para-voce .review-card__who { gap: 10px; }
  body.page-para-voce .review-card__avatar { width: 34px; height: 34px; }
  body.page-para-voce .review-card__source { font-size: 0.6875rem; }
  body.page-para-voce .review-card__text { font-size: 0.8125rem; line-height: 1.45; }
  body.page-para-voce .review-card__rating-stars { font-size: 1.125rem; letter-spacing: 3px; }

  /* FAQ */
  body.page-para-voce .pv-faq { padding-block: var(--space-12); }
  body.page-para-voce .pv-faq .faq__groups { gap: 26px; }
  body.page-para-voce .pv-faq .faq__list { gap: 8px; }
  body.page-para-voce .faq__group-title { font-size: 1.125rem; margin-bottom: 10px; }
  body.page-para-voce .pv-faq .faq__head { padding: 14px 18px; }
  body.page-para-voce .pv-faq .faq__q { font-size: 0.9375rem; }
  body.page-para-voce .pv-faq .faq__a, body.page-para-voce .pv-faq .faq__a-list { font-size: 0.875rem; padding-left: 18px; padding-right: 18px; }

  /* CTA final */
  body.page-para-voce .inc-cta { padding-block: 0 var(--space-12); }
}

/* ============================================================
   LAYER 26.8 — PARA INCORPORADORAS — MOBILE
   Same compaction pass as Sobre nós / Para você: shrink every
   section (hero, intro/índices, soluções, ecossistema, parceiros,
   CTA) so each lands in roughly one scroll instead of two or three.
   Scoped to body.page-incorporadoras.
   ============================================================ */
@media (max-width: 767px) {

  /* Hero: title, then video (wide strip instead of a tall portrait
     block), then copy/CTA — DOM order, see the markup. Less
     breathing room above the title than the 88px desktop pad. */
  body.page-incorporadoras .inc-hero { padding-block: 40px 32px; }
  body.page-incorporadoras .inc-hero__grid { gap: 22px; }
  body.page-incorporadoras .inc-hero__title { margin-bottom: 20px; }
  body.page-incorporadoras .inc-hero__title .eyebrow { font-size: 0.75rem; }
  body.page-incorporadoras .inc-hero h1 { font-size: clamp(1.625rem, 7.5vw, 2rem); margin: 12px 0 0; }
  body.page-incorporadoras .inc-hero__media img,
  body.page-incorporadoras .inc-hero__media video { aspect-ratio: 16 / 9; }
  body.page-incorporadoras .inc-hero__body > p { font-size: 0.9375rem; line-height: 1.55; margin: 16px 0 20px; }

  /* Intro + índices: tighter lead-in; highlight cards in a 2x2 grid
     (2 up, 2 down) instead of 4 stacked rows, with enough clearance
     — and a toned-down glow — so the yellow NPS card underneath
     doesn't bleed into and blur the highlight cards' reading area.
     Stats grid down to 2 columns with smaller icons/type (same
     treatment used for the Sobre nós stats band). */
  body.page-incorporadoras .inc-intro { padding-block: 0 var(--space-12); }
  body.page-incorporadoras .inc-intro__inner { padding-top: 36px; }
  body.page-incorporadoras .inc-intro__grid { gap: 24px; margin-bottom: 44px; }
  body.page-incorporadoras .inc-intro__text { font-size: 1.125rem; }
  body.page-incorporadoras .inc-intro__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.page-incorporadoras .inc-hl-card { flex-direction: column; text-align: center; padding: 16px 10px; font-size: 0.8125rem; line-height: 1.3; gap: 8px; }
  body.page-incorporadoras .inc-hl-card__ico { width: 34px; height: 34px; }
  body.page-incorporadoras .inc-hl-card__ico svg { width: 17px; height: 17px; }
  body.page-incorporadoras .inc-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.page-incorporadoras .inc-intro .about-stat { width: 100%; padding: 12px; }
  body.page-incorporadoras .inc-intro .about-stat__ico { height: 32px; margin-bottom: 4px; }
  body.page-incorporadoras .inc-intro .about-stat__ico svg { width: 30px; height: 30px; }
  body.page-incorporadoras .inc-intro .about-stat__ico--stars { font-size: 0.875rem; letter-spacing: 2px; }
  body.page-incorporadoras .inc-intro .about-stat__value { font-size: clamp(1.125rem, 5vw, 1.375rem); }
  body.page-incorporadoras .inc-intro .about-stat__label { font-size: 0.75rem; margin-top: 2px; }
  body.page-incorporadoras .inc-intro .about-stat--glow { box-shadow: 0 0 50px 14px var(--color-spark-yellow); }

  /* Soluções */
  body.page-incorporadoras .inc-sol { padding-block: var(--space-12); }
  body.page-incorporadoras .inc-sol__head { margin: 0 auto 28px; }
  body.page-incorporadoras .inc-sol__head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
  body.page-incorporadoras .inc-sol__head p { font-size: 0.9375rem; margin-top: 10px; }
  body.page-incorporadoras .inc-sol__grid { gap: 20px; }
  body.page-incorporadoras .inc-sol-card__media { height: 170px; }
  body.page-incorporadoras .inc-sol-card__tag { top: 10px; right: 12px; padding: 4px 12px; font-size: 0.6875rem; }
  body.page-incorporadoras .inc-sol-card__body { padding: 22px; }
  body.page-incorporadoras .inc-sol-card__body h3 { font-size: 1.375rem; }
  body.page-incorporadoras .inc-sol-card__sub { font-size: 0.8125rem; margin-bottom: 10px; }
  body.page-incorporadoras .inc-sol-card__body p { font-size: 0.875rem; margin-bottom: 18px; }
  body.page-incorporadoras .inc-sol-card__link { padding: 11px 20px; font-size: 0.875rem; }

  /* Ecossistema: shrink the diagram itself — at the old node size
     (min 118px) three circles side by side no longer fit a phone's
     width and the labels get crushed/overlapping. Smaller nodes +
     a tighter diagram box give each label room to sit inside its
     own circle without touching its neighbors. */
  body.page-incorporadoras .inc-eco { padding-block: var(--space-12); }
  body.page-incorporadoras .inc-eco__grid { gap: 36px; }
  body.page-incorporadoras .inc-eco__head .eyebrow { font-size: 0.6875rem; }
  body.page-incorporadoras .inc-eco__head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); margin: 10px 0 16px; }
  body.page-incorporadoras .inc-eco__head p { font-size: 0.9375rem; line-height: 1.6; }
  body.page-incorporadoras .inc-eco__diagram { max-width: 300px; aspect-ratio: 1 / 1.15; }
  body.page-incorporadoras .inc-eco__node { width: clamp(78px, 23vw, 100px); padding: 8px; gap: 3px; }
  body.page-incorporadoras .inc-eco__node--hub { width: clamp(56px, 15vw, 76px); }
  body.page-incorporadoras .inc-eco__node h3 { font-size: 0.6875rem; line-height: 1.15; }
  body.page-incorporadoras .inc-eco__node p { font-size: 0.5625rem; line-height: 1.25; }

  /* Parceiros: logos in bordered cards, 3 per row, so every logo
     sits inside a same-sized box instead of floating at whatever
     size its own image happens to be. */
  body.page-incorporadoras .inc-partners { padding-block: var(--space-12); }
  body.page-incorporadoras .inc-partners__head { margin-bottom: 22px; }
  body.page-incorporadoras .inc-partners__head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
  body.page-incorporadoras .inc-partners__grid { grid-template-columns: repeat(3, 1fr); row-gap: 10px; column-gap: 10px; }
  body.page-incorporadoras .inc-partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    background: var(--color-white-magic);
    border: 1px solid var(--color-cozy-brown-700);
    border-radius: 14px;
    padding: 10px 8px;
  }
  body.page-incorporadoras .inc-partners__grid img { height: 26px; width: auto; max-width: 100%; object-fit: contain; }

  /* CTA final */
  body.page-incorporadoras .inc-cta { padding-block: 0 var(--space-12); }
  body.page-incorporadoras .inc-cta__inner { padding: 32px 24px; }
}

/* ============================================================
   LAYER 26.9 — INTERIORES TURN KEY — MOBILE
   Same compaction pass as the other inner pages: shrink every
   section (hero, soluções, parceiros, Spot3D, depoimentos, CTA)
   so each lands in roughly one scroll instead of two or three.
   Scoped to body.page-interiores-turn-key because tk-hero,
   tk-solutions, tk-spot, home-reviews and inc-cta are shared with
   para-voce, incorporadoras and the home page.
   ============================================================ */
@media (max-width: 767px) {

  /* Hero: title, then the featured image, then copy + CTA — DOM
     order, see the markup (ik-hero__grid). Less breathing room
     above the title than the 84px desktop pad. */
  body.page-interiores-turn-key .tk-hero { padding-block: 40px 32px; }
  body.page-interiores-turn-key .tk-hero__grid { gap: 20px; }
  body.page-interiores-turn-key .tk-hero__text .eyebrow { font-size: 0.75rem; }
  body.page-interiores-turn-key .tk-hero h1 { font-size: clamp(1.625rem, 7.5vw, 2rem); margin-top: 12px; }
  body.page-interiores-turn-key .tk-hero__media img { aspect-ratio: 4 / 3; }
  body.page-interiores-turn-key .tk-hero__body p { font-size: 0.9375rem; line-height: 1.55; margin: 16px 0 20px; }

  /* Nossas soluções: tabs wrap to a centered row; panel media and
     spacing shrink so a stacked content+image+benefits panel lands
     close to one scroll instead of two and a half. */
  body.page-interiores-turn-key .tk-solutions { padding-block: 40px; }
  body.page-interiores-turn-key .tk-solutions__head { margin-bottom: 20px; }
  body.page-interiores-turn-key .tk-solutions__head .eyebrow { font-size: 0.6875rem; }
  body.page-interiores-turn-key .tk-solutions__head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); margin-top: 10px; }
  body.page-interiores-turn-key .tk-solutions__tabs { gap: 8px; margin-bottom: 16px; }
  body.page-interiores-turn-key .tk-solutions__tab { width: clamp(90px, 27vw, 120px); padding: 12px 8px; font-size: 0.6875rem; gap: 6px; }
  body.page-interiores-turn-key .tk-solutions__panel { padding: 22px 18px; border-radius: 20px; }
  body.page-interiores-turn-key .tk-solutions__grid { gap: 18px; }
  body.page-interiores-turn-key .tk-solutions__content .eyebrow { font-size: 0.6875rem; }
  body.page-interiores-turn-key .tk-solutions__content h3 { font-size: clamp(1.125rem, 5.5vw, 1.375rem); margin-top: 10px; }
  body.page-interiores-turn-key .tk-solutions__body { font-size: 0.875rem; line-height: 1.55; margin-top: 10px; }
  body.page-interiores-turn-key .tk-solutions__media .img-placeholder,
  body.page-interiores-turn-key .tk-solutions__media img { min-height: 160px; border-radius: 16px; }
  body.page-interiores-turn-key .tk-solutions__group { font-size: 0.75rem; margin: 16px 0 8px; }
  body.page-interiores-turn-key .tk-solutions .tk-sfeatures { gap: 8px; margin-bottom: 0; }
  body.page-interiores-turn-key .tk-sfeatures li { font-size: 0.8125rem; gap: 10px; }
  body.page-interiores-turn-key .tk-sfeatures svg { width: 18px; height: 18px; }
  body.page-interiores-turn-key .tk-solutions__foot { margin-top: 16px; padding-top: 16px; }
  body.page-interiores-turn-key .tk-solutions__benefits { gap: 8px; }
  body.page-interiores-turn-key .tk-benefit { padding: 12px 14px; gap: 12px; }
  body.page-interiores-turn-key .tk-benefit svg { width: 28px; height: 28px; padding: 5px; }
  body.page-interiores-turn-key .tk-benefit strong { font-size: 0.8125rem; }
  body.page-interiores-turn-key .tk-benefit p { font-size: 0.75rem; }
  body.page-interiores-turn-key .tk-solutions__impact--band { font-size: 0.9375rem; padding: 14px 16px; gap: 12px; }
  body.page-interiores-turn-key .tk-solutions__impact--band svg { width: 30px; height: 30px; padding: 6px; }

  /* Parceiros (marquee) */
  body.page-interiores-turn-key .tk-logowall { padding-block: 0 var(--space-12); }
  body.page-interiores-turn-key .tk-logowall__label { font-size: 0.75rem; margin-bottom: 18px; }
  body.page-interiores-turn-key .tk-logowall .marquee__track img { height: 40px; }

  /* Spot3D */
  body.page-interiores-turn-key .tk-spot { padding-block: var(--space-12); }
  body.page-interiores-turn-key .tk-spot__grid { gap: 24px; }
  body.page-interiores-turn-key .tk-spot .eyebrow { font-size: 0.6875rem; }
  body.page-interiores-turn-key .tk-spot h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); margin-top: 10px; }
  body.page-interiores-turn-key .tk-spot p { font-size: 0.9375rem; margin: 14px 0 20px; }
  body.page-interiores-turn-key .tk-spot .tk-sfeatures { gap: 10px; margin-bottom: 0; }
  body.page-interiores-turn-key .tk-spot .tk-sfeatures li { font-size: 0.8125rem; }

  /* Depoimentos (shared with the home page, so scoped here too) */
  body.page-interiores-turn-key .home-reviews { padding-block: 32px; }
  body.page-interiores-turn-key .home-reviews__head .eyebrow { font-size: 0.6875rem; }
  body.page-interiores-turn-key .home-reviews__title { font-size: 1.5rem; margin-bottom: 24px; }
  body.page-interiores-turn-key .home-reviews__stage { padding-bottom: 40px; }
  body.page-interiores-turn-key .review-card { padding: 16px; gap: 10px; }
  body.page-interiores-turn-key .review-card__who { gap: 10px; }
  body.page-interiores-turn-key .review-card__avatar { width: 34px; height: 34px; }
  body.page-interiores-turn-key .review-card__source { font-size: 0.6875rem; }
  body.page-interiores-turn-key .review-card__text { font-size: 0.8125rem; line-height: 1.45; }
  body.page-interiores-turn-key .review-card__rating-stars { font-size: 1.125rem; letter-spacing: 3px; }

  /* CTA final */
  body.page-interiores-turn-key .inc-cta { padding-block: 0 var(--space-12); }
  body.page-interiores-turn-key .inc-cta__inner { padding: 32px 24px; }
}

/* ============================================================
   LAYER 26.10 — PLATAFORMA DE PERSONALIZAÇÃO — MOBILE
   Same compaction pass as the other inner pages: shrink every
   section (hero, como funciona, por que converte, personalize o
   que quiser, para a sua operação, case, parceiros, CTA) so the
   whole page lands in roughly one scroll and a half instead of
   four or five. Scoped to body.page-plataforma-personalizacao.
   ============================================================ */
@media (max-width: 767px) {

  /* Hero: title, then the featured video, then copy + CTA — DOM
     order, see pp-hero__grid--split in the markup. Generous room
     above and below the title; the video runs the full column width
     (bigger scroll is fine — the video is the main event here). */
  body.page-plataforma-personalizacao .pp-hero { padding-block: 48px 28px; }
  body.page-plataforma-personalizacao .pp-hero__grid { gap: 30px; }
  body.page-plataforma-personalizacao .pp-hero__text .eyebrow { font-size: 0.75rem; }
  body.page-plataforma-personalizacao .pp-hero h1 { font-size: clamp(1.625rem, 7.5vw, 2rem); margin-top: 12px; }
  body.page-plataforma-personalizacao .pp-hero__body p { font-size: 0.9375rem; line-height: 1.55; margin: 14px 0 18px; }

  /* Heading block shared by como funciona / por que converte /
     personalize / para a sua operação / case */
  body.page-plataforma-personalizacao .pp-section-head { margin-bottom: 14px; }
  body.page-plataforma-personalizacao .pp-section-head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); margin-top: 10px; }

  /* Como funciona — the videos keep their native ~16:9 ratio (only
     resized, never cropped/stretched): width runs almost the full
     card, aspect-ratio derives the height. */
  body.page-plataforma-personalizacao .pp-how { padding-block: 20px; }
  body.page-plataforma-personalizacao .pp-how__grid { gap: 6px; }
  body.page-plataforma-personalizacao .pp-how-card { padding: 10px; border-radius: 16px; }
  body.page-plataforma-personalizacao .pp-how-card__num { font-size: 1.375rem; margin-bottom: 4px; }
  body.page-plataforma-personalizacao .pp-how-card h3 { font-size: 1rem; margin-bottom: 2px; }
  body.page-plataforma-personalizacao .pp-how-card p { font-size: 0.75rem; line-height: 1.35; margin-bottom: 0; }
  body.page-plataforma-personalizacao .pp-how-card__img { width: 82%; height: auto; aspect-ratio: 16 / 9; margin: 8px auto 0; border-width: 3px; }

  /* Por que converte mais — title + icon only (the long copy is
     dropped on mobile), laid out as 4 compact tiles in a 2x2 grid
     instead of 4 full-width text cards */
  body.page-plataforma-personalizacao .pp-convert { padding-block: var(--space-12); }
  body.page-plataforma-personalizacao .pp-convert__head { margin-bottom: 22px; }
  body.page-plataforma-personalizacao .pp-convert__head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
  body.page-plataforma-personalizacao .pp-convert__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.page-plataforma-personalizacao .pp-pillar { flex-direction: column; align-items: center; text-align: center; padding: 18px 12px; gap: 10px; border-radius: 16px; }
  body.page-plataforma-personalizacao .pp-pillar__ico { width: 42px; height: 42px; border-radius: 12px; }
  body.page-plataforma-personalizacao .pp-pillar__ico svg { width: 20px; height: 20px; }
  body.page-plataforma-personalizacao .pp-pillar h3 { font-size: 0.875rem; line-height: 1.3; margin-bottom: 0; }
  body.page-plataforma-personalizacao .pp-pillar p { display: none; }

  /* Personalize o que quiser */
  body.page-plataforma-personalizacao .pp-custom { padding-block: var(--space-12); }
  body.page-plataforma-personalizacao .pp-custom__head { margin: 0 auto 24px; }
  body.page-plataforma-personalizacao .pp-custom__head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
  /* 3 per row instead of the default 2-column mobile grid — narrower
     columns, so the icon/label shrink a step further to match */
  body.page-plataforma-personalizacao .pp-cats-band { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  body.page-plataforma-personalizacao .pp-cat { gap: 6px; }
  body.page-plataforma-personalizacao .pp-cat__ico { width: 46px; height: 46px; }
  body.page-plataforma-personalizacao .pp-cat__ico svg { width: 18px; height: 18px; }
  body.page-plataforma-personalizacao .pp-cat__label { font-size: 0.6875rem; line-height: 1.25; }
  /* 10 items over 3 columns leaves "Pintura" alone on the last row —
     put it in the middle column instead of stranded on the left */
  body.page-plataforma-personalizacao .pp-cat:last-child { grid-column: 2; }

  /* Para a sua operação */
  body.page-plataforma-personalizacao .pp-oper { padding-block: var(--space-12); }
  body.page-plataforma-personalizacao .pp-oper__head { margin: 0 auto 26px; }
  body.page-plataforma-personalizacao .pp-oper__head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
  body.page-plataforma-personalizacao .pp-oper__grid { gap: 14px; }
  body.page-plataforma-personalizacao .pp-oper-card { padding: 22px; border-radius: 16px; }
  body.page-plataforma-personalizacao .pp-oper-card__ico { width: 44px; height: 44px; margin-bottom: 14px; }
  body.page-plataforma-personalizacao .pp-oper-card__ico svg { width: 22px; height: 22px; }
  body.page-plataforma-personalizacao .pp-oper-card h3 { font-size: 1.1875rem; margin-bottom: 8px; }
  body.page-plataforma-personalizacao .pp-oper-card p { font-size: 0.8125rem; line-height: 1.5; }

  /* Impacto comprovado (case) */
  body.page-plataforma-personalizacao .pp-case { padding-block: var(--space-12); }
  body.page-plataforma-personalizacao .pp-case__head { margin: 0 auto 26px; }
  body.page-plataforma-personalizacao .pp-case__head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
  body.page-plataforma-personalizacao .pp-case__card { border-radius: 20px; }
  body.page-plataforma-personalizacao .pp-case__left,
  body.page-plataforma-personalizacao .pp-case__right { padding: 28px 24px; }
  body.page-plataforma-personalizacao .pp-case__logo { height: 36px; margin-bottom: 18px; }
  body.page-plataforma-personalizacao .pp-case__intro { font-size: 0.9375rem; line-height: 1.6; margin-bottom: 26px; }
  body.page-plataforma-personalizacao .pp-case__results { gap: 10px; }
  body.page-plataforma-personalizacao .pp-case__result svg { width: 22px; height: 22px; }
  body.page-plataforma-personalizacao .pp-case__result span { font-size: 0.875rem; }
  body.page-plataforma-personalizacao .pp-case__quote { font-size: 1.0625rem; margin-bottom: 16px; }
  body.page-plataforma-personalizacao .pp-case__name { font-size: 0.875rem; }
  body.page-plataforma-personalizacao .pp-case__role { font-size: 0.8125rem; margin-bottom: 24px; }
  body.page-plataforma-personalizacao .pp-case__badge { gap: 12px; padding: 14px 16px; }
  body.page-plataforma-personalizacao .pp-case__badge img { height: 38px; }
  body.page-plataforma-personalizacao .pp-case__badge-tag { font-size: 0.6875rem; }
  body.page-plataforma-personalizacao .pp-case__badge-title { font-size: 0.9375rem; }

  /* Parceiros que já usam — bordered logo cards, 3 per row, same
     treatment as the "Incorporadoras parceiras" grid on /incorporadoras/ */
  body.page-plataforma-personalizacao .pp-logos { padding-block: var(--space-12); }
  body.page-plataforma-personalizacao .pp-logos__head { margin-bottom: 20px; }
  body.page-plataforma-personalizacao .pp-logos__row { display: grid; grid-template-columns: repeat(3, 1fr); flex-wrap: nowrap; row-gap: 10px; column-gap: 10px; }
  body.page-plataforma-personalizacao .pp-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    background: var(--color-white-magic);
    border: 1px solid var(--color-cozy-brown-700);
    border-radius: 14px;
    padding: 10px 8px;
  }
  body.page-plataforma-personalizacao .pp-logos__row img { height: 24px; width: auto; max-width: 100%; object-fit: contain; }
  body.page-plataforma-personalizacao .pp-logos__row img.is-square { height: 30px; }
  /* lone card on the final row (10 logos ÷ 3 per row) — align it
     under the middle column instead of default-flowing to the left */
  body.page-plataforma-personalizacao .pp-logos__row .pp-logo-card:last-child { grid-column: 2; }

  /* CTA final */
  body.page-plataforma-personalizacao .pp-cta { padding-block: 0 var(--space-12); }
  body.page-plataforma-personalizacao .pp-cta__left img { height: 52px; }
  body.page-plataforma-personalizacao .pp-cta__left h2 { font-size: clamp(1.0625rem, 4.5vw, 1.25rem); }
}

/* ============================================================
   LAYER 26.11 — ONDE ESTAMOS — MOBILE
   The city carousels already avoid vertical stacking (cards
   scroll horizontally), so the fix here is just to shrink every
   dimension that adds up per city — section padding, head, card
   image and body copy — so all four cities plus the intro land
   in about one scroll and a half instead of four or five.
   ============================================================ */
@media (max-width: 767px) {
  body.page-onde-estamos .oe-intro { padding-block: 28px 4px; }
  body.page-onde-estamos .oe-intro .eyebrow { font-size: 0.75rem; }
  body.page-onde-estamos .oe-intro h1 { font-size: clamp(1.25rem, 6vw, 1.5rem); margin-top: 8px; }
  body.page-onde-estamos .oe-intro p { font-size: 0.8125rem; line-height: 1.5; margin-top: 8px; }

  body.page-onde-estamos .oe-city { padding-block: 12px; }
  body.page-onde-estamos .oe-city--last { padding-bottom: 24px; }
  body.page-onde-estamos .oe-city__head { margin-bottom: 8px; gap: 16px; }
  body.page-onde-estamos .oe-city__head h2 { font-size: 1.125rem; }
  body.page-onde-estamos .oe-arrows { gap: 6px; }
  body.page-onde-estamos .oe-arrow { width: 30px; height: 30px; }
  body.page-onde-estamos .oe-arrow svg { width: 13px; height: 13px; }

  body.page-onde-estamos .oe-track { gap: 8px; }
  body.page-onde-estamos .oe-card { flex-basis: 46%; }
  body.page-onde-estamos .oe-shot { aspect-ratio: 3 / 2; border-radius: 10px; }
  body.page-onde-estamos .oe-go { width: 28px; height: 28px; bottom: 6px; right: 6px; }
  body.page-onde-estamos .oe-go svg { width: 12px; height: 12px; }
  body.page-onde-estamos .oe-card__body { margin-top: 5px; }
  body.page-onde-estamos .oe-inc { display: block; font-size: 0.625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.page-onde-estamos .oe-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font-size: 0.875rem; margin-top: 3px; line-height: 1.15;
  }
  body.page-onde-estamos .oe-name svg { width: 10px; height: 10px; }
  body.page-onde-estamos .oe-link { font-size: 0.6875rem; margin-top: 5px; gap: 5px; }
  body.page-onde-estamos .oe-link svg { width: 12px; height: 12px; }
  body.page-onde-estamos .oe-closed { padding: 6px 8px; font-size: 0.625rem; letter-spacing: 0.1em; }
}

/* ============================================================
   LAYER 26.12 — FAÇA PARTE DO TIME — MOBILE
   Same compaction pass as the other inner pages: shrink hero,
   valores, depoimentos, benefícios, time e carreira so each
   section lands in roughly one scroll (one and a half at most)
   instead of two or three. Benefícios and carreira move from a
   single stacked column to a 2-up grid so 9 and 6 items each
   land in a handful of short rows. Scoped to
   body.page-faca-parte-do-time.
   ============================================================ */
@media (max-width: 767px) {

  /* Hero: text block, then the reconhecimento card with the two
     badge circles shrunk enough to sit side by side in one row
     instead of wrapping and stacking. */
  body.page-faca-parte-do-time .fp-hero { padding-block: 40px 32px; }
  body.page-faca-parte-do-time .fp-hero__grid { gap: 24px; }
  body.page-faca-parte-do-time .fp-hero__text .eyebrow { font-size: 0.75rem; }
  body.page-faca-parte-do-time .fp-hero h1 { font-size: clamp(1.75rem, 8vw, 2.125rem); margin-top: 12px; }
  body.page-faca-parte-do-time .fp-hero__text p { font-size: 0.9375rem; line-height: 1.55; margin-top: 14px; }
  body.page-faca-parte-do-time .fp-hero__cta { margin-top: 20px; }
  body.page-faca-parte-do-time .fp-hero__card { border-radius: 22px; padding: 22px 20px; }
  body.page-faca-parte-do-time .fp-hero__card-inner .eyebrow { margin-bottom: 14px !important; font-size: 0.75rem; }
  body.page-faca-parte-do-time .fp-badges { gap: 14px; }
  body.page-faca-parte-do-time .fp-badge { width: 118px; height: 118px; padding: 10px; }
  body.page-faca-parte-do-time .fp-badge__ico { margin-bottom: 6px; }
  body.page-faca-parte-do-time .fp-badge__ico svg { width: 26px; height: 26px; }
  body.page-faca-parte-do-time .fp-badge__val { font-size: 1.625rem; }
  body.page-faca-parte-do-time .fp-badge__label { font-size: 0.625rem; margin-top: 4px; }

  /* Valores: smaller cards so the carousel takes less vertical
     room, plus prev/next arrows restacked below the track (instead
     of the absolute-positioned overlay used on larger screens) to
     signal it's swipeable. Shared .fp-slider-arrows/.fp-slider-btn
     rules below also apply to the time carousel further down. */
  body.page-faca-parte-do-time .fp-values { padding-block: var(--space-12); }
  body.page-faca-parte-do-time .fp-section-head { margin-bottom: 24px; }
  body.page-faca-parte-do-time .fp-section-head .eyebrow { font-size: 0.75rem; }
  body.page-faca-parte-do-time .fp-section-head h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); margin-top: 10px; }
  body.page-faca-parte-do-time .fp-value-card { width: 68%; min-width: 210px; padding: 16px 14px; border-radius: 14px; }
  body.page-faca-parte-do-time .fp-value-card__num { font-size: 1.875rem; margin-bottom: 8px; }
  body.page-faca-parte-do-time .fp-value-card h3 { font-size: 1rem; margin-bottom: 5px; }
  body.page-faca-parte-do-time .fp-value-card p { font-size: 0.75rem; line-height: 1.5; margin-bottom: 10px; }
  body.page-faca-parte-do-time .fp-value-card__img { height: 90px; border-radius: 8px; }
  body.page-faca-parte-do-time .fp-slider-arrows { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
  body.page-faca-parte-do-time .fp-slider-btn { position: static; transform: none; }

  /* Depoimentos: lead copy, then depoimentos, then the CTA button
     (moved to its own grid item after fp-testi__list in the markup,
     so it naturally lands last in this single-column stack). */
  body.page-faca-parte-do-time .fp-testi { padding-block: var(--space-12); }
  body.page-faca-parte-do-time .fp-testi__grid { gap: 18px; }
  body.page-faca-parte-do-time .fp-testi__lead .eyebrow { font-size: 0.75rem; }
  body.page-faca-parte-do-time .fp-testi__lead h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); margin: 10px 0 12px; }
  body.page-faca-parte-do-time .fp-testi__lead p { font-size: 0.875rem; margin-bottom: 18px; }
  body.page-faca-parte-do-time .fp-testi__rule { width: 100px; margin-bottom: 0; }
  body.page-faca-parte-do-time .fp-testi__list { gap: 10px; }
  body.page-faca-parte-do-time .fp-testi__review { padding-bottom: 10px; }
  body.page-faca-parte-do-time .fp-testi__quote {
    font-size: 0.75rem; line-height: 1.4; margin-bottom: 8px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  }
  body.page-faca-parte-do-time .fp-testi__who { gap: 8px; }
  body.page-faca-parte-do-time .fp-testi__avatar { width: 30px; height: 30px; }
  body.page-faca-parte-do-time .fp-testi__name { font-size: 0.75rem; }
  body.page-faca-parte-do-time .fp-testi__role { font-size: 0.625rem; }
  body.page-faca-parte-do-time .fp-testi__cta { margin-top: 4px; }

  /* Benefícios: 2-up grid instead of a single stacked column, so
     the 9 cards land in five short rows rather than nine tall
     ones. The 9th card is alone in the last row — center it at the
     same width as one column instead of leaving it stuck to the
     left. */
  body.page-faca-parte-do-time .fp-benefits { padding-block: var(--space-12); }
  body.page-faca-parte-do-time .fp-benefits__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  body.page-faca-parte-do-time .fp-benefit-card { padding: 14px 12px; gap: 10px; border-radius: 12px; }
  body.page-faca-parte-do-time .fp-benefit__ico { width: 38px; height: 38px; }
  body.page-faca-parte-do-time .fp-benefit__ico img { width: 20px; height: 20px; }
  body.page-faca-parte-do-time .fp-benefit__label { font-size: 0.75rem; line-height: 1.25; }
  body.page-faca-parte-do-time .fp-benefits__grid .fp-benefit-card:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }

  /* Time: smaller image cards, same restacked-below arrows as
     valores. */
  body.page-faca-parte-do-time .fp-team { padding-block: var(--space-12); }
  body.page-faca-parte-do-time .fp-team .fp-section-head { margin-bottom: 20px; }
  body.page-faca-parte-do-time .fp-team-card { width: 62%; min-width: 170px; }
  body.page-faca-parte-do-time .fp-team-card__img { height: 110px; border-radius: 10px; }
  body.page-faca-parte-do-time .fp-team .fp-slider-arrows { margin-top: 14px; }
  body.page-faca-parte-do-time .fp-team .fp-slider-btn {
    width: 30px; height: 30px;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
    color: var(--color-candle-light);
    box-shadow: none;
  }
  body.page-faca-parte-do-time .fp-team .fp-slider-btn svg { width: 13px; height: 13px; }

  /* Carreira: with the support text gone, cards shrink to an
     icon + title row (matching the fp-benefit-card treatment)
     instead of a stacked, centered block — so 6 items land in
     three compact rows. */
  body.page-faca-parte-do-time .fp-career { padding-block: var(--space-12); }
  body.page-faca-parte-do-time .fp-career__head { margin: 0 auto 16px; }
  body.page-faca-parte-do-time .fp-career__head h2 { font-size: clamp(1.25rem, 6vw, 1.625rem); margin-top: 8px; }
  body.page-faca-parte-do-time .fp-career__head p { font-size: 0.8125rem; line-height: 1.5; margin-top: 8px; }
  /* minmax(0, 1fr), not plain 1fr — without the 0 floor a grid track
     still grows to fit its item's content when that content can't
     shrink (see min-width: 0 below), so the right column was pushing
     ~40px past the container's own edge padding and off the screen. */
  body.page-faca-parte-do-time .fp-career__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  body.page-faca-parte-do-time .fp-career-card { flex-direction: row; align-items: center; text-align: left; padding: 10px 8px; gap: 8px; border-radius: 12px; min-width: 0; }
  /* the title's wrapping div is a flex sibling of the icon; flex
     items default to min-width: auto (their content's min-content
     size), which is what was forcing the card wider than its grid
     column instead of letting the title wrap inside it */
  body.page-faca-parte-do-time .fp-career-card > div { min-width: 0; }
  body.page-faca-parte-do-time .fp-career__ico { width: 28px; height: 28px; }
  body.page-faca-parte-do-time .fp-career__ico img { width: 13px; height: 13px; }
  /* overflow-wrap: long single words ("Acompanhamento", "Individual")
     were still spilling a few px past the title's own box even with
     the column-width fix above, since a single unbreakable word can
     exceed the available width on its own */
  body.page-faca-parte-do-time .fp-career-card h3 { font-size: 0.75rem; line-height: 1.25; margin-bottom: 0; overflow-wrap: break-word; }
  body.page-faca-parte-do-time .fp-career-card p { display: none; }

  /* CTA final */
  body.page-faca-parte-do-time .fp-cta { padding-block: 0 var(--space-12); }
  body.page-faca-parte-do-time .fp-cta__inner { padding: 28px 22px; }
  body.page-faca-parte-do-time .fp-cta__row { gap: 16px; }
  body.page-faca-parte-do-time .fp-cta__left { gap: 14px; }
  body.page-faca-parte-do-time .fp-cta__left img { height: 40px; }
  body.page-faca-parte-do-time .fp-cta__left h2 { font-size: clamp(1.0625rem, 5vw, 1.25rem); }
}

/* ============================================================
   LAYER 26.13 — CONTATO — MOBILE
   Same compaction pass as the other inner pages: shrink the
   heading, reason picker, form card and channels bar so the whole
   page lands in about one scroll (one and a half at most) instead
   of two. The tab bar is swapped for a dropdown (menu suspenso) —
   see .contact__select in LAYER 24 and contato.js — since two rows
   of wrapped tabs cost more vertical space than a single compact
   trigger row. Scoped to body.page-contato.
   ============================================================ */
@media (max-width: 767px) {
  body.page-contato .contact { padding-block: 36px 32px; }
  body.page-contato .contact__title { font-size: clamp(1.75rem, 8vw, 2.125rem); margin-top: 14px; }
  body.page-contato .contact__subtitle { font-size: 0.9375rem; line-height: 1.55; margin-top: 12px; }

  /* Reason picker: hide the tab bar, show the dropdown trigger. */
  body.page-contato .contact__reason { margin: 20px auto 0; }
  body.page-contato .contact__tabs { display: none; }
  body.page-contato .contact__select { display: block; }

  /* Form card */
  body.page-contato .contact__card { padding: 24px 20px; margin-top: 20px; border-radius: 20px; }
  body.page-contato .contact__fields { gap: 10px; }
  body.page-contato .field-input { padding: 11px 14px; font-size: 0.875rem; }
  body.page-contato textarea.field-input { min-height: 80px; margin-top: 10px; }
  body.page-contato .contact__note { font-size: 0.75rem; margin-top: 16px; }
  body.page-contato .contact__error { font-size: 0.8rem; margin-top: 12px; }
  body.page-contato .contact__submit { padding: 14px 24px; margin-top: 16px; }
  body.page-contato .contact__success-ico { width: 46px; height: 46px; }
  body.page-contato .contact__success h2 { font-size: 1.375rem; }
  body.page-contato .contact__success p { font-size: 0.875rem; }

  /* Channels bar + hours */
  body.page-contato .contact__bar { margin-top: 28px; }
  body.page-contato .contact__channel { padding: 12px 18px; font-size: 0.75rem; }
  body.page-contato .contact__hours { margin-top: 12px; font-size: 0.75rem; }
}

/* ============================================================
   LAYER 27 — PAGE BANNER (inner-page pill banner)
   ============================================================ */
.page-banner {
  display: flex;
  justify-content: center;
  padding: 24px 32px 0;
}
.page-banner__inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1320px;
  background: var(--color-black-out);
  color: var(--color-candle-light);
  border-radius: 300px;
  padding: 37px 56px;
  text-align: center;
}
.page-banner__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 22%, rgba(253,255,168,0.14), transparent 55%);
}
.page-banner h1 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  letter-spacing: -0.02em;
  margin: 0;
}
.page-banner__crumb {
  position: relative;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  font-size: 0.875rem;
  opacity: 0.7;
}
.page-banner__crumb a { color: var(--color-candle-light); opacity: 0.85; }
.page-banner__crumb a:hover { opacity: 1; }
@media (max-width: 600px) {
  .page-banner__inner { padding: 30px 28px; border-radius: 44px; }
}

/* ============================================================
   LAYER 28 — LEGAL / PROSE (privacy, terms)
   ============================================================ */
.legal {
  display: flex;
  justify-content: center;
  padding: 56px 32px 100px;
}
.legal__inner { width: 100%; max-width: 820px; }
.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.625rem;
  letter-spacing: -0.01em;
  color: var(--color-black-out);
  margin: 52px 0 16px;
  scroll-margin-top: 92px;
}
.legal h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-black-out);
  margin: 30px 0 10px;
}
.legal p {
  font-size: 0.96875rem;
  line-height: 1.75;
  color: var(--color-black-out-700);
  margin: 0 0 16px;
}
.legal strong { color: var(--color-black-out); font-weight: 700; }
.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal ul li { font-size: 0.96875rem; line-height: 1.7; color: var(--color-black-out-700); }
.legal a { color: #167d77; text-decoration: underline; }
.legal a:hover { opacity: 0.75; }
.legal__callout {
  background: var(--color-welcome-green);
  border-radius: 16px;
  padding: 22px 26px;
  margin: 22px 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #1e332e;
}
.legal__note { font-size: 0.8125rem; color: var(--color-black-out-500); }
.legal__table-wrap {
  overflow-x: auto;
  margin: 8px 0 24px;
  border-radius: 14px;
  border: 1px solid #E4E1D9;
}
.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 560px;
}
.legal__table th {
  background: #F1EEE6;
  text-align: left;
  font-weight: 700;
  color: var(--color-black-out);
  padding: 13px 16px;
  border-bottom: 1px solid #E4E1D9;
}
.legal__table td {
  padding: 13px 16px;
  border-bottom: 1px solid #EDEBE4;
  color: var(--color-black-out-700);
  line-height: 1.6;
  vertical-align: top;
}
.legal__table tbody tr:last-child td,
.legal__table tr:last-child td { border-bottom: none; }

/* ============================================================
   LAYER 29 — GALLERY (Galeria)
   ============================================================ */
.gallery-intro { text-align: center; padding: var(--space-16) var(--space-8) 36px; }
.gallery-intro__inner { max-width: 900px; margin: 0 auto; }
.gallery-intro h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-hero);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 16px 0 30px;
  /* keeps the negative-z-index pill inside the h1, above the page bg */
  isolation: isolate;
}
/* same yellow-pill highlight as .tk-hero__hl; clone keeps the pill
   shape on each line when the phrase wraps on small screens, and
   z-index: -1 paints it BEHIND the text so the tight line-height
   never lets it cover descenders (the "g" leg) of the line above */
.gallery-intro__hl { position: relative; z-index: -1; background: var(--color-spark-yellow); border-radius: 999px; padding: 0 20px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Images/Videos toggle */
.gl-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--color-black-out);
  border-radius: var(--radius-pill);
}
.gl-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-candle-light);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.gl-tab svg { width: 18px; height: 18px; }
.gl-tab.gl-on { background: var(--color-spark-yellow); color: var(--color-black-out); }

/* Gallery section */
.gallery { padding: 8px var(--space-8) var(--space-24); }
.gallery__inner { width: 100%; max-width: 1320px; margin: 0 auto; }

/* Cards */
.gl-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  color: var(--color-candle-light);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.gl-card__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-cozy-brown-900) 0%, var(--color-cozy-brown) 55%, var(--color-black-out-500) 120%);
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease-out);
}
/* reference gallery effect: image zooms in on hover */
.gl-card:hover .gl-card__media { transform: scale(1.08); }
.gl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(39,38,34,0.62), rgba(39,38,34,0) 46%);
  pointer-events: none;
}
.gl-card__caption {
  position: absolute;
  left: 22px; right: 22px; bottom: 20px;
  pointer-events: none;
}
.gl-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4375rem;
  line-height: 1.1;
}
.gl-card__meta { display: block; font-size: 0.8125rem; opacity: 0.85; margin-top: 5px; }
.gl-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: rgba(247,244,240,0.92);
  color: var(--color-black-out);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(39,38,34,0.22);
}

/* Photos grid — one card per project, all the same size/format */
.gl-grid--photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 340px;
  gap: 24px;
}
@media (max-width: 900px) {
  .gl-grid--photos { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
}
@media (max-width: 560px) {
  .gl-grid--photos { grid-template-columns: 1fr; grid-auto-rows: 240px; }
}

/* PHOTO LIGHTBOX — per-project slider opened from the cards.
   margin:auto restores the native dialog centring that the global
   reset (* { margin: 0 }) strips away. */
.photo-lightbox { margin: auto; border: none; padding: 0; background: transparent; overflow: visible; user-select: none; }
.photo-lightbox img { -webkit-user-drag: none; }
.photo-lightbox::backdrop { background: rgba(31, 30, 27, 0.92); }
.photo-lightbox__frame { position: relative; }
.photo-lightbox img { display: block; max-width: min(1100px, 90vw); max-height: 80vh; width: auto; height: auto; border-radius: 14px; }
.photo-lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid #DCD8D0;
  background: var(--color-white-magic);
  color: var(--color-black-out);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(39, 38, 34, 0.2);
}
.photo-lightbox__btn--prev { left: -23px; }
.photo-lightbox__btn--next { right: -23px; }
.photo-lightbox__close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-black-out);
  color: var(--color-candle-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.photo-lightbox__count {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(39, 38, 34, 0.72);
  color: var(--color-candle-light);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 50px;
  pointer-events: none;
}
@media (max-width: 720px) {
  .photo-lightbox__btn--prev { left: 8px; }
  .photo-lightbox__btn--next { right: 8px; }
  .photo-lightbox__close { top: 8px; right: 8px; }
}

/* ============================================================
   LAYER 30 — PAGE BANNER soft variant + image placeholder
   ============================================================ */
.page-banner--soft .page-banner__inner { border-radius: 28px; }
.page-banner--soft h1 { font-weight: 300; }

.img-placeholder {
  position: relative;
  background: linear-gradient(135deg, var(--color-cozy-brown-900) 0%, var(--color-cozy-brown) 60%, var(--color-black-out-500) 135%);
}
.img-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23F7F4F0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/></svg>") center / 40px no-repeat;
}
/* When a real image is set inline, cover the box and hide the placeholder icon */
.img-placeholder[style*="background-image"] { background-size: cover; background-position: center; background-repeat: no-repeat; }
.img-placeholder[style*="background-image"]::after { display: none; }

/* ============================================================
   LAYER 31 — PROJECT DETAIL (Detalhe do Projeto)
   ============================================================ */
.pd { padding-block: 56px 96px; }
.pd__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 960px) { .pd__grid { grid-template-columns: 1.55fr 1fr; } }

.pd__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.pd__gallery {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 560px;
}
.pd__gallery > :first-child { grid-row: 1 / 3; }
.pd__slot { border-radius: 20px; width: 100%; height: 100%; }
@media (max-width: 560px) {
  .pd__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 150px; height: auto; }
  .pd__gallery > :first-child { grid-row: auto; grid-column: 1 / 3; height: 200px; }
}

.pd-card {
  background: var(--color-white-magic);
  border-radius: 22px;
  padding: 36px 40px;
  box-shadow: 0 1px 3px rgba(39,38,34,0.06);
}
.pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pd-title { font-family: var(--font-display); font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 400; margin-bottom: 4px; }
.pd-inc { font-size: 0.875rem; color: #9A958C; font-weight: 600; }
.pd-btn-dark {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-black-out); color: var(--color-candle-light);
  border: none; border-radius: var(--radius-pill);
  padding: 14px 26px; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  transition: filter 0.15s;
}
.pd-btn-dark:hover { filter: brightness(1.15); }
.pd-loc { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--color-black-out-500); font-size: 0.9rem; }
.pd-divider { height: 1px; background: #EFE7DF; margin: 26px 0; }
.pd-meta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 720px) { .pd-meta { grid-template-columns: repeat(2, 1fr); } }
.pd-meta__k { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #9A958C; margin-bottom: 6px; }
.pd-meta__v { font-size: 0.9375rem; font-weight: 600; }

.pd-h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; }
.pd-highlight { width: 100%; height: 420px; border-radius: 16px; display: block; }
.pd-about { font-size: 0.9375rem; line-height: 1.75; color: var(--color-black-out-500); }
.pd-why { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 720px) { .pd-why { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .pd-why { grid-template-columns: repeat(2, 1fr); } }
.pd-why__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.pd-why__ico { flex: none; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-candle-light); color: var(--color-black-out); display: flex; align-items: center; justify-content: center; }
.pd-why__label { font-size: 0.875rem; line-height: 1.4; font-weight: 500; }
.pd-inc-logo { display: flex; align-items: center; justify-content: center; }
.pd-inc-logo img { height: 56px; width: auto; }

.pd__aside { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 960px) { .pd__aside { position: sticky; top: 96px; } }
.pd-aside-dark { background: var(--color-black-out); border-radius: 22px; padding: 36px; text-align: center; }
.pd-aside-dark h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; color: var(--color-candle-light); margin-bottom: 20px; }
.pd-btn-mint {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-comfy-green); color: var(--color-black-out);
  border: none; border-radius: var(--radius-pill);
  padding: 15px 28px; font-weight: 600; font-size: 0.9375rem; cursor: pointer;
  transition: filter 0.15s;
}
.pd-btn-mint:hover { filter: brightness(0.96); }
.pd-aside-form { background: var(--color-comfy-green); border-radius: 22px; padding: 36px; }
.pd-aside-form h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; color: var(--color-black-out); margin-bottom: 22px; }
.pd-form-fields { display: flex; flex-direction: column; gap: 12px; }
.pd-input {
  width: 100%;
  font-family: var(--font-body); font-size: 0.9rem; color: var(--color-black-out);
  background: var(--color-white-magic); border: none; border-radius: 12px;
  padding: 15px 16px; outline: none;
}
.pd-input::placeholder { color: rgba(39,38,34,0.55); }
.pd-input:focus-visible { box-shadow: 0 0 0 3px rgba(39,38,34,0.15); }
.pd-success { font-size: 0.875rem; color: #1f4d44; margin-top: 16px; }
.pd-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; margin-top: 18px;
  background: var(--color-black-out); color: var(--color-candle-light);
  border: none; border-radius: var(--radius-pill);
  padding: 15px 26px; font-weight: 600; font-size: 0.9375rem; cursor: pointer;
  transition: filter 0.15s;
}
.pd-submit:hover { filter: brightness(1.15); }

/* ============================================================
   LAYER 32 — ONDE ESTAMOS (city carousels)
   ============================================================ */
.oe-intro { padding-block: 60px 18px; text-align: center; }
.oe-intro__inner { max-width: 900px; margin: 0 auto; }
.oe-intro h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-hero);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 16px auto 0;
  max-width: 720px;
  text-wrap: balance;
}
.oe-intro p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-black-out-500);
  max-width: 680px;
  margin: 18px auto 0;
}

.oe-city { padding-block: 40px; }
.oe-city--bordered { border-top: 1px solid rgba(39,38,34,0.12); }
.oe-city--last { padding-bottom: 96px; }
.oe-city__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}
.oe-city__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 760px;
}
.oe-arrows { display: flex; gap: 12px; flex: none; }
.oe-arrow {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  border: 1.5px solid #DCD8D0;
  background: var(--color-candle-light);
  color: var(--color-black-out);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.oe-arrow:hover { background: var(--color-black-out); border-color: var(--color-black-out); color: var(--color-candle-light); }

.oe-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.oe-track::-webkit-scrollbar { display: none; }
.oe-card { flex: 0 0 calc((100% - 72px) / 4); min-width: 248px; scroll-snap-align: start; }
@media (max-width: 1000px) { .oe-card { flex-basis: calc((100% - 48px) / 3); } }
@media (max-width: 720px)  { .oe-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 520px)  { .oe-card { flex-basis: 82%; min-width: 0; } }

.oe-shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.04;
  border-radius: 18px;
  overflow: hidden;
  background: #ECE8E1;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.oe-card:hover .oe-shot { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.oe-shot__img, .oe-shot__ph { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.6s var(--ease-out); }
.oe-shot__img { object-fit: cover; }
.oe-card:hover .oe-shot__img, .oe-card:hover .oe-shot__ph { transform: scale(1.08); }
.oe-go {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-black-out);
  color: var(--color-spark-yellow);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  box-shadow: 0 8px 20px rgba(39,38,34,0.22);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.oe-card:hover .oe-go { opacity: 1; transform: translateY(0); }
.oe-card__body { margin-top: 18px; }
.oe-inc { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9A958C; }
.oe-name { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 300; letter-spacing: -0.02em; margin-top: 8px; line-height: 1.2; }
.oe-name a { display: inline-flex; align-items: center; gap: 7px; }
.oe-name a:hover { text-decoration: underline; }
.oe-name svg { flex: none; opacity: 0.55; }
.oe-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--color-black-out); margin-top: 12px; transition: gap 0.18s ease; }
.oe-card:hover .oe-link { gap: 12px; }
.oe-link--disabled { color: var(--color-cozy-brown); cursor: default; }
.oe-card--closed .oe-shot__img { filter: grayscale(1); }
.oe-closed {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 12px 14px;
  background: rgba(31, 30, 27, 0.92);
  color: var(--color-candle-light);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   LAYER 33 — EYEBROW variants + outline button + FAQ (reusable)
   ============================================================ */
.eyebrow--wide { font-size: 0.8125rem; letter-spacing: 0.08em; }
.eyebrow--wide::before, .eyebrow--wide::after { width: 14px; height: 1px; }
.eyebrow--cream { color: var(--color-candle-light); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: var(--color-black-out);
  border: 1.5px solid var(--color-black-out); border-radius: var(--radius-pill);
  padding: 13px 26px; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.btn-outline:hover { background: var(--color-black-out); color: var(--color-candle-light); }

/* FAQ accordion */
.faq__groups { display: flex; flex-direction: column; gap: 48px; }
.faq__group-title { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.01em; margin-bottom: 16px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--color-white-magic); border: 1px solid rgba(39,38,34,0.16); border-radius: 12px; overflow: hidden; transition: background 0.22s ease, border-color 0.22s ease; }
.faq__item.open { background: var(--color-black-out); border-color: var(--color-black-out); }
.faq__head { width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 24px; background: transparent; border: none; }
.faq__q { font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--color-black-out); transition: color 0.2s; }
.faq__item.open .faq__q { color: var(--color-candle-light); }
.faq__chev { flex: none; width: 30px; height: 30px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-black-out); border: 1.5px solid rgba(39,38,34,0.28); transition: transform 0.25s ease, color 0.2s, border-color 0.2s; }
.faq__item.open .faq__chev { transform: rotate(180deg); color: var(--color-spark-yellow); border-color: rgba(253,255,168,0.5); }
.faq__body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__item.open .faq__body { max-height: 560px; }
.faq__a { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.65; color: rgba(247,244,240,0.78); margin: 0; padding: 0 24px 22px; }
.faq__a:not(:last-child) { padding-bottom: 12px; }
.faq__a-list { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0 24px 22px; font-size: 0.9rem; line-height: 1.55; color: rgba(247,244,240,0.78); }
.faq__a-list li { display: flex; gap: 10px; }
.faq__a-list li::before { content: "—"; color: var(--color-spark-yellow); flex: none; }

/* ============================================================
   LAYER 34 — PARA VOCE
   ============================================================ */
/* Hero reuses the tk-hero block (see LAYER 38); pv-trust is the trust anchor
   card — boxed and elevated so the rating/delivery numbers read as proof
   points, not fine print. */
.pv-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 34px;
  width: fit-content;
  background: var(--color-white-magic);
  border-radius: 18px;
  padding: 18px 30px;
  box-shadow: 0 1px 3px rgba(39,38,34,0.06);
  transition: box-shadow 0.15s;
}
.pv-trust:hover { box-shadow: 0 6px 20px rgba(39,38,34,0.10); }
/* equal-width halves so each stat sits centered in its own side,
   equidistant from the divider and from its own edge of the card
   regardless of how much longer one stat's text is than the other's */
.pv-trust__stat { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pv-trust__value { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: -0.02em; color: var(--color-black-out); white-space: nowrap; }
.pv-trust__label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--color-black-out-500); white-space: nowrap; }
.pv-trust__stars { color: #FDC436; letter-spacing: 1px; }
.pv-trust__sep { width: 1px; height: 40px; flex: none; background: var(--color-cozy-brown-900); }

.pv-problem { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 90px; }
.pv-problem__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .pv-problem__grid { grid-template-columns: 1.08fr 0.92fr; gap: 64px; } }
.pv-problem .pv-section-head h2 { max-width: 1000px; text-wrap: balance; }
.pv-problem__list { display: flex; flex-direction: column; gap: 12px; }
.pv-pain { display: flex; align-items: center; gap: 14px; background: #322F29; border-radius: 14px; padding: 12px 18px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pv-pain:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,0.35); }
.pv-pain h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.0625rem; letter-spacing: -0.01em; }
/* quiet closer under the pain list */
.pv-problem__punch { margin-top: 14px; padding-left: 4px; font-size: 1.25rem; line-height: 1.55; color: rgba(248, 247, 245, 0.8); }
.pv-problem__punch strong { font-weight: 600; color: var(--color-spark-yellow); }

.pv-cats { background: var(--color-section-alt); padding-block: 90px; }
/* Stage/pins reuse pp-custom__stage + pp-chip (see LAYER 36); chips hide ≤720px,
   so the plain category list below takes over on mobile. */
.pv-cats__fallback { display: none; }
.pv-cat { display: inline-flex; align-items: center; background: var(--color-white-magic); border: 1px solid rgba(191,186,176,0.5); border-radius: var(--radius-pill); padding: 10px 18px; font-size: 0.875rem; font-weight: 500; }
@media (max-width: 720px) { .pv-cats__fallback { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; } }

.pv-section-head { text-align: center; margin-bottom: 56px; }
.pv-section-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 3.2vw, 2.625rem); letter-spacing: -0.02em; margin: 16px auto 0; max-width: 680px; }
.pv-section-head__sub { font-size: 1rem; line-height: 1.6; color: var(--color-black-out-500); max-width: 560px; margin: 14px auto 0; }

.pv-how { background: var(--color-white-magic); padding-block: 96px; }
.pv-how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 900px) { .pv-how__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pv-how__grid { grid-template-columns: 1fr; } }
/* Numbered step cards; the last one (delivery) is highlighted dark. */
.pv-step { background: var(--color-spark-yellow); border-radius: 20px; padding: 26px 22px; box-shadow: 0 1px 3px rgba(39,38,34,0.05); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pv-step:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(39,38,34,0.14); }
.pv-step--active { background: var(--color-black-out); color: var(--color-candle-light); }
.pv-step__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pv-step__num { font-family: var(--font-display); font-size: 2.75rem; font-weight: 300; line-height: 1; color: rgba(39,38,34,0.4); }
.pv-step--active .pv-step__num { color: var(--color-spark-yellow); }
.pv-step__ico { flex: none; width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-black-out); color: var(--color-spark-yellow); display: flex; align-items: center; justify-content: center; }
.pv-step--active .pv-step__ico { background: var(--color-spark-yellow); color: var(--color-black-out); }
.pv-step h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin-bottom: 12px; letter-spacing: -0.01em; }
.pv-step p { font-size: 0.875rem; line-height: 1.65; color: var(--color-black-out-700); }
.pv-step--active p { color: var(--color-white-magic); }
.pv-how__grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .pv-how__grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pv-how__grid--5 { grid-template-columns: 1fr; } }

/* Pillars as quiet support pills under the journey — outlined chips
   with a yellow icon badge; the step cards keep the stage. */
/* Por que a Spotlar — 3 pillar cards on a dark band */
.pv-why { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 90px; }
.pv-why .eyebrow { color: var(--color-comfy-green); }
.pv-why .pv-section-head h2 { color: var(--color-candle-light); }
/* Distribution mirrors .pv-how__grid--5: full row on wide screens,
   2-up with the odd one spanning the full width once space gets tight. */
.pv-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 820px) {
  .pv-why__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .pv-why__grid .pv-why-card:last-child { grid-column: 1 / -1; }
}
.pv-why-card { background: #36352f; border: 1px solid rgba(247,244,240,0.1); border-radius: 20px; padding: 30px 30px 34px; text-align: left; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pv-why-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.3); }
/* top row: index number + icon badge, same rhythm as .pv-step__top */
.pv-why-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pv-why-card__num { font-family: var(--font-display); font-size: 2.75rem; font-weight: 300; line-height: 1; color: rgba(247,244,240,0.25); }
.pv-why-card__ico { flex: none; width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-comfy-green); color: var(--color-black-out); display: flex; align-items: center; justify-content: center; }
.pv-why-card h3 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
.pv-why-card__list { list-style: disc; padding-left: 1.2em; font-size: 0.9375rem; line-height: 1.9; color: rgba(247,244,240,0.65); }
.pv-why-card__list li::marker { color: var(--color-comfy-green); }

.pv-faq { background: var(--color-section-alt); padding-block: 90px; }
.pv-faq .faq__groups { max-width: 860px; margin: 0 auto; }
.pv-faq .faq__head { padding: 16px 20px; }
.pv-faq .faq__a, .pv-faq .faq__a-list { padding-left: 20px; padding-right: 20px; }

/* ============================================================
   LAYER 35 — logo-invert utility + FACA PARTE DO TIME
   ============================================================ */
.logo-invert { filter: brightness(0) invert(1); }


.fp-hero { background: var(--color-candle-light); padding-block: 72px 70px; }
.fp-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
@media (min-width: 900px) { .fp-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } }
.fp-hero__text { display: flex; flex-direction: column; justify-content: center; }
.fp-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); line-height: 1.05; letter-spacing: -0.02em; margin-top: 20px; }
.fp-hero__text p { font-size: 1.03rem; line-height: 1.72; color: var(--color-black-out-500); margin-top: 26px; max-width: 520px; }
.fp-hero__cta { margin-top: 38px; display: flex; gap: 20px; flex-wrap: wrap; }
.fp-hero__card { position: relative; overflow: hidden; border-radius: 28px; background: var(--color-white-magic); border: 1px solid #EFE7DA; box-shadow: var(--shadow-card); padding: 38px 40px; display: flex; flex-direction: column; justify-content: center; }
.fp-hero__card::before { content: ""; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(253,255,168,0.55), transparent 68%); }
.fp-hero__card-inner { position: relative; text-align: center; }
.fp-badges { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.fp-badge { width: 200px; height: 200px; border-radius: 50%; background: var(--color-welcome-green); box-shadow: 0 8px 24px rgba(39,38,34,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--color-black-out); }
.fp-badge__ico { margin-bottom: 12px; display: flex; }
.fp-badge__val { font-family: var(--font-body); font-size: 2.75rem; font-weight: 500; line-height: 1; }
.fp-badge__label { font-size: 0.8125rem; margin-top: 8px; line-height: 1.4; }

.fp-section-head { text-align: center; margin-bottom: 50px; }
.fp-section-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; margin-top: 14px; }

.fp-values { background: var(--color-section-alt); padding-block: 90px; }
.fp-slider-wrap { position: relative; }
/* Arrows live in their own wrapper (after the track) so they can be
   restacked below it on mobile; display:contents keeps them acting
   as direct children of fp-slider-wrap everywhere else, preserving
   the absolute-positioned overlay look on tablet/desktop. */
.fp-slider-arrows { display: contents; }
.fp-slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--color-candle-light); border: 1.5px solid #DCD8D0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-black-out); box-shadow: 0 2px 8px rgba(39,38,34,0.10); transition: box-shadow 0.15s; }
.fp-slider-btn:hover { box-shadow: 0 4px 16px rgba(39,38,34,0.16); }
.fp-slider-btn--prev { left: -20px; }
.fp-slider-btn--next { right: -20px; }
.fp-slider { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; }
.fp-slider::-webkit-scrollbar { display: none; }
.fp-value-card { flex: none; width: calc(30% - 18px); min-width: 320px; scroll-snap-align: start; border-radius: 20px; padding: 34px 30px; background: var(--color-white-magic); color: var(--color-black-out); border: 1px solid #ECE5DA; box-shadow: var(--shadow-card); transition: transform 0.25s ease; }
.fp-value-card:hover { transform: translateY(-4px); }
.fp-value-card__num { font-family: var(--font-display); font-size: 3.375rem; font-weight: 300; display: block; margin-bottom: 18px; color: var(--color-cozy-brown); }
.fp-value-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin-bottom: 10px; }
.fp-value-card p { font-size: 0.875rem; line-height: 1.6; opacity: 0.7; margin-bottom: 22px; }
.fp-value-card__img { border-radius: 12px; height: 180px; background-size: cover; background-position: center; background-color: #EFE7DB; }

.fp-testi { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 84px; }
/* lead, list and the CTA are three separate grid items (DOM order:
   lead → list → cta) so mobile's single column stacks the CTA below
   the depoimentos with no extra rules needed. Desktop places the
   CTA back under the lead column via explicit grid placement. */
.fp-testi__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .fp-testi__grid { grid-template-columns: 1fr 1.1fr; column-gap: 80px; row-gap: 18px; }
  .fp-testi__lead { grid-column: 1; grid-row: 1; }
  .fp-testi__cta { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; }
  .fp-testi__list { grid-column: 2; grid-row: 1 / 3; }
}
.fp-testi__lead h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; margin: 16px 0 22px; }
.fp-testi__lead p { font-size: 0.9375rem; line-height: 1.7; opacity: 0.75; max-width: 380px; margin-bottom: 32px; }
.fp-testi__rule { width: 170px; height: 1px; background: var(--color-candle-light); margin-bottom: 30px; }
.fp-testi__list { display: flex; flex-direction: column; gap: 30px; }
.fp-testi__cta { justify-self: start; }
.fp-testi__review { border-bottom: 1px solid rgba(247,244,240,0.18); padding-bottom: 28px; }
.fp-testi__quote { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 300; line-height: 1.45; margin-bottom: 20px; }
.fp-testi__who { display: flex; align-items: center; gap: 14px; }
.fp-testi__avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; background-size: cover; background-position: center; background-color: #4a483f; }
.fp-testi__name { font-size: 0.9375rem; font-weight: 600; }
.fp-testi__role { font-size: 0.8125rem; opacity: 0.6; }

.fp-benefits { background: var(--color-candle-light); padding-block: 90px; }
.fp-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .fp-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fp-benefits__grid { grid-template-columns: 1fr; } }
.fp-benefit-card { background: var(--color-white-magic); border: 1px solid #ECE5DA; border-radius: 16px; padding: 24px 26px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.fp-benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.fp-benefit__ico { width: 52px; height: 52px; border-radius: 50%; background: var(--color-spark-yellow); display: flex; align-items: center; justify-content: center; flex: none; }
.fp-benefit__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }

.fp-team { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 90px; }
.fp-team .fp-section-head h2 { color: var(--color-candle-light); max-width: 760px; margin-left: auto; margin-right: auto; }
.fp-team .fp-slider-btn { background: var(--color-white-magic); width: 46px; height: 46px; }
.fp-team-card { flex: none; width: calc(40% - 14px); min-width: 380px; scroll-snap-align: start; }
@media (max-width: 560px) { .fp-team-card { min-width: 280px; width: 82%; } }
.fp-team-card__img { position: relative; border-radius: 16px; height: 280px; overflow: hidden; background-color: #3a3833; background-size: cover; background-position: center; transition: transform 0.25s ease, box-shadow 0.25s ease; }
/* reference gallery effect: a ::before layer inherits the inline
   background image so it can zoom inside the clipped box. */
.fp-team-card__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: inherit;
  transition: transform 0.6s var(--ease-out);
}
.fp-team-card:hover .fp-team-card__img { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.fp-team-card:hover .fp-team-card__img::before { transform: scale(1.08); }

.fp-career { background: var(--color-candle-light); padding-block: 90px; }
.fp-career__head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.fp-career__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.16; margin-top: 16px; }
.fp-career__head p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-black-out-500); margin-top: 22px; }
.fp-career__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .fp-career__grid { grid-template-columns: 1fr; } }
.fp-career-card { background: var(--color-white-magic); border: 1px solid #ECE5DA; border-radius: 18px; padding: 24px 28px; display: flex; align-items: flex-start; gap: 20px; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.fp-career-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.fp-career__ico { width: 48px; height: 48px; border-radius: 50%; background: var(--color-black-out); display: flex; align-items: center; justify-content: center; flex: none; }
.fp-career-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; margin-bottom: 5px; }
.fp-career-card p { font-size: 0.9rem; line-height: 1.6; color: var(--color-black-out-500); }

.fp-cta { padding-block: 0 90px; }
.fp-cta__inner { position: relative; overflow: hidden; background: var(--color-black-out); color: var(--color-candle-light); border-radius: 300px; padding: 54px 80px; }
@media (max-width: 720px) { .fp-cta__inner { border-radius: 44px; padding: 44px 40px; } }
.fp-cta__inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 20%, rgba(253,255,168,0.16), transparent 55%); }
.fp-cta__row { position: relative; max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fp-cta__left { display: flex; align-items: center; gap: 28px; }
.fp-cta__left img { height: 72px; width: auto; flex: none; }
.fp-cta__left h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.25; letter-spacing: -0.02em; max-width: 560px; }
.fp-cta .btn-yellow { flex: none; white-space: nowrap; }

/* ============================================================
   LAYER 36 — eyebrow nobars + PLATAFORMA DE PERSONALIZACAO
   ============================================================ */
.eyebrow--nobars::before, .eyebrow--nobars::after { content: none; }

.pp-hero { background: var(--color-candle-light); padding-block: 84px 90px; }
.pp-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .pp-hero__grid { grid-template-columns: 1.06fr 0.94fr; gap: 64px; } }
/* --split: title/media/body are three separate grid items (DOM order
   title → media → body), so mobile stacks them in that reading order
   with no extra CSS. From 900px up, media moves into its own column
   on the right (title+body stack in the other), matching the
   section's original two-column look. */
@media (min-width: 900px) {
  .pp-hero__grid--split { grid-template-rows: auto 1fr; row-gap: 0; column-gap: 64px; }
  .pp-hero__grid--split .pp-hero__video { grid-column: 2; grid-row: 1 / 3; }
  .pp-hero__grid--split .pp-hero__text { grid-column: 1; grid-row: 1; align-self: end; }
  .pp-hero__grid--split .pp-hero__body { grid-column: 1; grid-row: 2; align-self: start; }
}
.pp-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); letter-spacing: -0.025em; line-height: 1.08; margin-top: 22px; isolation: isolate; }
.pp-hero__hl { position: relative; z-index: -1; background: var(--color-comfy-green); border-radius: 999px; padding: 0 20px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pp-hero__text p, .pp-hero__body p { font-size: 1.125rem; line-height: 1.7; color: var(--color-black-out-500); margin: 26px 0 34px; max-width: 600px; }
/* width: 100% — as a lone grid item sharing its column with two other
   rows (title, body), this item's auto width doesn't reliably stretch
   to the track on its own (its only in-flow descendant is an
   aspect-ratio box with absolutely-positioned children), collapsing
   to a sliver; forcing the width removes the ambiguity. */
.pp-hero__video { position: relative; width: 100%; }
.pp-hero__video::before { content: ""; position: absolute; inset: -20px; background: radial-gradient(circle at 70% 25%, rgba(253,255,168,0.42), transparent 62%); border-radius: 30px; }
.pp-hero__video-box { position: relative; border-radius: 22px; overflow: hidden; background: #1f1e1a; aspect-ratio: 2010 / 1080; /* native ratio of the hero capture — no side cropping */ }
/* --screen: dark bezel around the video, like a device display */
.pp-hero__video-box--screen { border: 7px solid var(--color-black-out); border-radius: 24px; }
.pp-hero__video-box .pp-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-hero__video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pp-hero__video-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pp-play span { width: 72px; height: 72px; border-radius: 50%; background: var(--color-spark-yellow); color: var(--color-black-out); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.28); }

.pp-section-head { text-align: center; margin-bottom: 50px; }
.pp-section-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 3vw, 2.375rem); letter-spacing: -0.02em; line-height: 1.16; margin: 14px auto 0; max-width: 640px; }

.pp-how { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 90px; }
.pp-how .pp-section-head h2 { color: var(--color-candle-light); }
.pp-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) { .pp-how__grid { grid-template-columns: 1fr; } }
.pp-how-card { display: flex; flex-direction: column; border-radius: 20px; padding: 34px 30px; background: var(--color-candle-light); color: var(--color-black-out); }
.pp-how-card__num { font-family: var(--font-display); font-size: 3.375rem; font-weight: 300; display: block; margin-bottom: 18px; color: var(--color-cozy-brown); }
.pp-how-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin-bottom: 10px; }
.pp-how-card p { font-size: 0.875rem; line-height: 1.6; color: var(--color-black-out-500); margin-bottom: 22px; }
.pp-how-card__img { margin-top: auto; border: 5px solid var(--color-black-out); border-radius: 14px; height: 180px; overflow: hidden; background: #E4DFD6; }
.pp-how-card__img video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-how-card__img.is-zoomable, .pp-hero__video-box.is-zoomable { cursor: zoom-in; }
.pp-how-card__img.is-zoomable:focus-visible, .pp-hero__video-box.is-zoomable:focus-visible { outline: 3px solid var(--color-spark-yellow); outline-offset: 3px; }

/* video lightbox (see assets/js/plataforma.js) */
.video-lightbox { position: fixed; inset: 0; margin: auto; height: fit-content; border: none; padding: 0; background: transparent; width: min(1080px, 92vw); overflow: visible; }
.video-lightbox::backdrop { background: rgba(31, 30, 27, 0.85); }
.video-lightbox video { display: block; width: 100%; border-radius: 16px; background: #1f1e1a; }
.video-lightbox__close { position: absolute; top: -16px; right: -16px; z-index: 1; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--color-candle-light); color: var(--color-black-out); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,0.35); }

/* Personalize o que quiser — category icon band (reference: dark
   strip with round pale-yellow icons + labels) */
.pp-cats-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px 18px; max-width: 1120px; margin: 0 auto; }
@media (max-width: 900px) { .pp-cats-band { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .pp-cats-band { grid-template-columns: repeat(2, 1fr); } }
.pp-cat { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pp-cat__ico { position: relative; z-index: 0; width: 74px; height: 74px; border-radius: 50%; background: var(--color-black-out); color: var(--color-spark-yellow); display: flex; align-items: center; justify-content: center; }
/* radiating pulse ring — same language as .pp-chip__plus, softened
   for the bigger dark circle; staggered so they don't beat in sync */
.pp-cat__ico::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--color-black-out); pointer-events: none; animation: cat-pulse 3s cubic-bezier(0.2, 1, 0.2, 1) infinite; }
.pp-cat:nth-child(2n) .pp-cat__ico::before { animation-delay: 0.7s; }
.pp-cat:nth-child(3n) .pp-cat__ico::before { animation-delay: 1.4s; }
@keyframes cat-pulse {
  from { opacity: 0.35; transform: scale(1); }
  to { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) { .pp-cat__ico::before { animation: none; opacity: 0; } }
.pp-cat__label { font-size: 1.0625rem; font-weight: 600; color: var(--color-black-out); line-height: 1.3; }

.pp-convert { background: var(--color-candle-light); padding-block: 90px; }
.pp-convert__head { max-width: 760px; margin-bottom: 48px; }
.pp-convert__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 3vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.16; margin-top: 16px; }
.pp-convert__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 720px) { .pp-convert__grid { grid-template-columns: 1fr; } }
.pp-pillar { background: var(--color-white-magic); border: var(--card-hairline); border-radius: 20px; padding: 38px; box-shadow: var(--shadow-card); display: flex; gap: 24px; align-items: flex-start; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pp-pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.pp-pillar__ico { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--color-black-out); }
.pp-pillar h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; margin-bottom: 10px; }
.pp-pillar p { font-size: 0.9375rem; line-height: 1.65; color: var(--color-black-out-500); }

.pp-custom { background: var(--color-section-alt); padding-block: 90px; }
.pp-custom__head { text-align: center; max-width: 820px; margin: 0 auto 44px; }
.pp-custom__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 3vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.16; margin-top: 16px; }
.pp-custom__stage { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; }
.pp-custom__stage::before { content: ""; position: absolute; inset: -24px; border-radius: 52px; background: radial-gradient(circle at 15% 25%, rgba(253,255,168,0.8), rgba(253,255,168,0.16) 52%, transparent 74%); filter: blur(28px); pointer-events: none; }
.pp-custom__img { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 2.15/1; background: #E4DFD6; box-shadow: 0 18px 50px rgba(39,38,34,0.12); }
.pp-custom__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-chip { position: absolute; display: inline-flex; align-items: center; gap: 11px; background: var(--color-white-magic); border-radius: 50px; padding: 7px 20px 7px 7px; box-shadow: 0 6px 20px rgba(39,38,34,0.16); font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--color-black-out); white-space: nowrap; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pp-chip:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(39,38,34,0.26); }
.pp-chip__plus { position: relative; z-index: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--color-spark-yellow); display: flex; align-items: center; justify-content: center; flex: none; font-size: 1.25rem; font-weight: 300; line-height: 1; }
/* Radiating pulse ring, mirroring the hotspot effect of the reference site. */
.pp-chip__plus::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--color-spark-yellow); pointer-events: none; animation: chip-pulse 3s cubic-bezier(0.2, 1, 0.2, 1) infinite; }
@keyframes chip-pulse {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(2.1); }
}
@media (prefers-reduced-motion: reduce) { .pp-chip__plus::before { animation: none; opacity: 0; } }
@media (max-width: 720px) { .pp-chip { display: none; } }

.pp-oper { background: var(--color-welcome-green); padding-block: 90px; }
.pp-oper__head { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.pp-oper__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 3vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.16; color: #1f4d44; }
.pp-oper__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) { .pp-oper__grid { grid-template-columns: 1fr; } }
.pp-oper-card { background: var(--color-candle-light); border-radius: 20px; padding: 36px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pp-oper-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.pp-oper-card__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--color-white-magic); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; color: #1f6b5e; }
.pp-oper-card h3 { font-family: var(--font-display); font-size: 1.4375rem; font-weight: 300; margin-bottom: 12px; color: #1f4d44; }
.pp-oper-card p { font-size: 0.9375rem; line-height: 1.65; color: #3f5550; }

.pp-case { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 92px; }
.pp-case__head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.pp-case__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 3.2vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.16; color: var(--color-candle-light); }
.pp-case__card { background: #36352f; border: 1px solid rgba(247,244,240,0.08); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pp-case__card { grid-template-columns: 1.04fr 0.96fr; } }
.pp-case__left { padding: 52px; display: flex; flex-direction: column; }
.pp-case__logo { height: 48px; width: auto; align-self: flex-start; margin-bottom: 26px; filter: brightness(0) invert(1); opacity: 0.92; }
.pp-case__intro { font-size: 1.0625rem; line-height: 1.7; color: rgba(247,244,240,0.8); margin-bottom: 44px; max-width: 520px; }
.pp-case__results { display: flex; flex-direction: column; gap: 12px; }
.pp-case__result { display: flex; align-items: flex-start; gap: 16px; }
.pp-case__result svg { flex: none; margin-top: 1px; color: var(--color-comfy-green); }
.pp-case__result span { font-size: 1rem; line-height: 1.5; }
.pp-case__right { background: #2f2e29; padding: 52px; display: flex; flex-direction: column; justify-content: center; }
.pp-case__quote { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 22px; }
.pp-case__name { font-size: 0.9375rem; font-weight: 600; color: var(--color-spark-yellow); }
.pp-case__role { font-size: 0.875rem; color: rgba(247,244,240,0.6); margin-bottom: 44px; }
.pp-case__badge { display: flex; align-items: center; justify-content: center; gap: 18px; background: rgba(253,255,168,0.08); border: 1px solid rgba(253,255,168,0.22); border-radius: 18px; padding: 20px 24px; }
.pp-case__badge img { height: 52px; opacity: 0.9; }
.pp-case__badge-tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-spark-yellow); }
.pp-case__badge-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 300; margin-top: 2px; }


.pp-logos { background: var(--color-candle-light); padding-block: 90px; }
.pp-logos__head { text-align: center; margin-bottom: 40px; }
.pp-logos__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 36px 50px; }
.pp-logos__row img { height: 55px; width: auto; }
.pp-logos__row img.is-square { height: 65px; }

.pp-cta { background: var(--color-candle-light); padding-block: 0 90px; }
.pp-cta__inner { position: relative; overflow: hidden; background: var(--color-spark-yellow); color: var(--color-black-out); border-radius: 300px; padding: 48px 80px; }
@media (max-width: 720px) { .pp-cta__inner { border-radius: 44px; padding: 44px 36px; } }
.pp-cta__row { position: relative; max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.pp-cta__left { display: flex; align-items: center; gap: 28px; }
.pp-cta__left img { height: 72px; width: auto; flex: none; }
.pp-cta__left h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.1875rem, 2vw, 1.625rem); line-height: 1.25; letter-spacing: -0.02em; max-width: 680px; }

/* ============================================================
   LAYER 37 — PARA INCORPORADORAS
   ============================================================ */
.inc-hero { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 88px 64px; }
/* title / media / body are three separate grid items in DOM order
   (title → media → body), so mobile stacks them in that reading
   order with no extra CSS. From 900px up, media fills its own
   column while title+body stack in the other, matching the old
   two-column layout. */
.inc-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  /* row-gap: 0 — same fix as pv-hero__grid/ik-hero__grid: the base
     64px gap is meant as the horizontal gap between the text and
     media columns; once title/body become two rows of the same
     column that same value would also land between them, on top of
     the paragraph's own margin-top, opening a huge vertical gap
     under the title. */
  .inc-hero__grid { grid-template-columns: 1.18fr 0.82fr; grid-template-rows: auto 1fr; row-gap: 0; column-gap: 64px; }
  .inc-hero__title { grid-column: 1; grid-row: 1; align-self: end; }
  .inc-hero__body { grid-column: 1; grid-row: 2; align-self: start; }
  .inc-hero__media { grid-column: 2; grid-row: 1 / 3; }
}
.inc-hero__media { position: relative; }
@media (min-width: 900px) { .inc-hero__media { align-self: end; margin-bottom: -130px; z-index: 3; } }
.inc-hero__media::before { content: ""; position: absolute; inset: -20px; background: radial-gradient(circle at 30% 25%, rgba(253,255,168,0.28), transparent 62%); border-radius: 30px; }
.inc-hero__media img,
.inc-hero__media video { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 5/6; object-fit: cover; border-radius: 22px; }
.inc-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); letter-spacing: -0.02em; line-height: 1.16; margin: 20px 0 22px; max-width: 430px; isolation: isolate; }
.inc-hero__title-row { display: flex; align-items: center; gap: 28px; }
.inc-hero__symbol { display: none; }
@media (min-width: 900px) { .inc-hero__symbol { display: block; flex: none; width: 116px; height: auto; opacity: 0.92; } }
.inc-hero__hl { position: relative; z-index: -1; background: var(--color-comfy-green); color: var(--color-black-out); border-radius: 999px; padding: 0 18px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.inc-hero__body > p { font-size: 1.0625rem; line-height: 1.7; color: rgba(247,244,240,0.75); margin-bottom: 34px; max-width: 560px; }

/* Light statement panel under the dark hero: claim + proof cards + big numbers. */
.inc-intro { background: var(--color-candle-light); padding-block: 0 84px; }
.inc-intro__inner { padding-top: 76px; }
@media (min-width: 900px) { .inc-intro__inner { padding-top: 165px; } }
.inc-intro__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; margin-bottom: 76px; }
@media (min-width: 900px) { .inc-intro__grid { grid-template-columns: 1fr 1.05fr; gap: 72px; } }
.inc-intro__text { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.45; letter-spacing: -0.01em; }
.inc-intro__text strong { font-weight: 500; color: var(--color-black-out); }
.inc-intro__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .inc-intro__cards { grid-template-columns: 1fr; } }
.inc-hl-card { display: flex; align-items: center; gap: 14px; background: var(--color-white-magic); border: 1px solid var(--color-cozy-brown-700); border-radius: 16px; padding: 18px 20px; font-size: 0.9375rem; font-weight: 500; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.inc-hl-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(39,38,34,0.12); }
.inc-hl-card__ico { flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-welcome-green); color: var(--color-black-out); display: flex; align-items: center; justify-content: center; }
/* Big numbers as circles, reusing the about-stat component (see LAYER 26). */
.inc-stats__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .inc-stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .inc-stats__grid { grid-template-columns: repeat(4, 1fr); max-width: 1020px; margin-inline: auto; } }
.inc-intro .about-stat { position: relative; z-index: 2; background: var(--color-white-magic); border: 1px solid var(--color-cozy-brown-900); box-shadow: 0 4px 16px rgba(39,38,34,0.08); }
/* Smoky spark-yellow halo behind highlighted circles (mirrors .milestone--highlight);
   lower z-index keeps the halo underneath the neighbouring circles. */
.inc-intro .about-stat--glow { box-shadow: 0 0 100px 30px var(--color-spark-yellow); z-index: 1; }

.inc-sol { background: var(--color-candle-light); padding-block: 36px 90px; }
.inc-sol__head { text-align: center; margin: 0 auto 56px; max-width: 820px; }
.inc-sol__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; line-height: 1.2; }
.inc-sol__head p { font-size: 1.0625rem; line-height: 1.6; color: var(--color-black-out-500); margin-top: 16px; }
.inc-sol__grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 820px) { .inc-sol__grid { grid-template-columns: 1fr 1fr; } }
.inc-sol-card { background: var(--color-white-magic); border: var(--card-hairline); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.inc-sol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.inc-sol-card__media { position: relative; height: 230px; background: #E4DFD6; overflow: hidden; }
.inc-sol-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.inc-sol-card:hover .inc-sol-card__media img { transform: scale(1.08); }
.inc-sol-card__tag { position: absolute; top: 14px; right: 16px; color: var(--color-black-out); font-size: 0.75rem; font-weight: 600; border-radius: 50px; padding: 5px 14px; }
.inc-sol-card__body { padding: 36px; flex: 1; display: flex; flex-direction: column; }
.inc-sol-card__body h3 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 300; margin-bottom: 6px; }
.inc-sol-card__sub { font-size: 0.875rem; font-weight: 600; color: #9A958C; margin-bottom: 16px; }
.inc-sol-card__body p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-black-out-500); margin-bottom: 28px; flex: 1; }
.inc-sol-card__link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; align-self: flex-start; background: var(--color-black-out); color: var(--color-candle-light); border-radius: 50px; padding: 13px 26px; font-size: 0.9375rem; transition: filter 0.15s; }
.inc-sol-card__link:hover { filter: brightness(1.15); }

.inc-eco { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 96px; }
.inc-eco__grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 900px) { .inc-eco__grid { grid-template-columns: 0.82fr 1.18fr; gap: 64px; } }
.inc-eco__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; line-height: 1.16; margin: 14px 0 24px; color: var(--color-candle-light); }
.inc-eco__head p { font-size: 1.0625rem; line-height: 1.75; opacity: 0.82; max-width: 520px; }
.inc-eco__head p + p { margin-top: 16px; }
.inc-eco__head p.is-lead { font-weight: 600; opacity: 1; }
/* Connection diagram: Spotlar hub linked to the three market players. */
.inc-eco__diagram { position: relative; width: 100%; max-width: 700px; aspect-ratio: 5/4.4; margin-inline: auto; }
.inc-eco__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.inc-eco__lines line { stroke: rgba(247,244,240,0.28); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.inc-eco__node { position: absolute; transform: translate(-50%, -50%); width: clamp(118px, 26vw, 190px); aspect-ratio: 1; border-radius: var(--radius-full); background: #322F29; border: 1px solid rgba(247,244,240,0.14); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; padding: 18px; }
.inc-eco__node h3 { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; color: var(--color-comfy-green); }
.inc-eco__node p { font-size: 0.8125rem; line-height: 1.4; opacity: 0.85; }
@media (min-width: 900px) {
  .inc-eco__node h3 { font-size: 1.125rem; }
  .inc-eco__node p { font-size: 0.9375rem; }
}
.inc-eco__node--hub { width: clamp(96px, 18vw, 142px); background: var(--color-spark-yellow); border: none; box-shadow: 0 0 70px 18px rgba(253,255,171,0.28); }
/* sized off the circle itself (not the img's fixed 44x44 attrs) so it
   keeps breathing room around it at every clamp step, including the
   smaller mobile hub where 44px read as cramped */
.inc-eco__node--hub img { width: 42%; height: 42%; }

.inc-partners { background: var(--color-candle-light); padding-block: 90px; }
.inc-partners__head { text-align: center; margin-bottom: 40px; }
.inc-partners__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 3.2vw, 2.5rem); letter-spacing: -0.02em; margin-top: 14px; }
.inc-partners__grid { display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; align-items: center; row-gap: 32px; column-gap: 24px; }
@media (max-width: 900px) { .inc-partners__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .inc-partners__grid { grid-template-columns: repeat(2, 1fr); } }
.inc-partners__grid img { height: 52px; width: auto; }

.inc-cta { background: var(--color-candle-light); padding-block: 0 90px; }
/* --spaced: top padding for pages where the CTA follows a section
   with a different background (turn-key: black testimonials block) */
.inc-cta__inner { position: relative; overflow: hidden; background: var(--color-spark-yellow); color: var(--color-black-out); border-radius: 300px; padding: 30px 72px; }
@media (max-width: 720px) { .inc-cta__inner { border-radius: 44px; padding: 44px 36px; } }
.inc-cta__row { position: relative; max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.inc-cta__left { display: flex; align-items: center; gap: 28px; }
.inc-cta__left img { height: 72px; width: auto; flex: none; }
.inc-cta__left h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.1875rem, 1.8vw, 1.5rem); line-height: 1.25; letter-spacing: -0.02em; }
@media (min-width: 900px) { .inc-cta__left h2 { white-space: nowrap; } }
/* --wrap: long headings (para-voce) wrap instead of overflowing the pill */
.inc-cta--wrap .inc-cta__left h2 { white-space: normal; }
.inc-cta--wrap { background: var(--color-section-alt); } /* para-voce: matches the pv-cats sand band */

/* ============================================================
   LAYER 38 — btn-dark + INTERIORES TURN KEY
   ============================================================ */
.btn-dark { display: inline-flex; align-items: center; gap: 12px; background: var(--color-black-out); color: var(--color-candle-light); border: none; border-radius: var(--radius-pill); padding: 16px 32px; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: filter 0.15s, transform 0.12s; }
.btn-dark:hover { filter: brightness(1.12); }
.btn-dark:active { transform: scale(0.97); }

.tk-hero { background: var(--color-candle-light); padding-block: 84px 90px; }
.tk-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .tk-hero__grid { grid-template-columns: 1.04fr 0.96fr; gap: 64px; } }
/* --flip: media on the left, text on the right (desktop only; text stays first on mobile) */
@media (min-width: 900px) {
  .tk-hero__grid--flip { grid-template-columns: 0.96fr 1.04fr; }
  .tk-hero__grid--flip .tk-hero__media { order: 1; }
  .tk-hero__grid--flip .tk-hero__text { order: 2; }
}
/* pv-hero__grid (para-voce): title/media/body are three separate grid
   items (DOM order title → media → body, so mobile stacks them in
   that reading order with no extra CSS). From 900px up, place them
   back into the usual two-column hero: media fills its own column,
   title+body stack in the other. */
@media (min-width: 900px) {
  /* row-gap: 0 — same fix as ik-hero__grid/pp-hero__grid--split below:
     the base .tk-hero__grid gap (64px) is meant as the horizontal gap
     between the text and media columns; once title/body become two
     rows of the same column that same value would also land between
     them, on top of the paragraph's own margin-top, opening a huge
     vertical gap under the title. */
  .pv-hero__grid { grid-template-rows: auto 1fr; row-gap: 0; column-gap: 64px; }
  .pv-hero__grid .tk-hero__media { grid-column: 1; grid-row: 1 / 3; order: initial; }
  .pv-hero__grid .pv-hero__title { grid-column: 2; grid-row: 1; align-self: end; }
  .pv-hero__grid .pv-hero__body { grid-column: 2; grid-row: 2; align-self: start; }
}
/* ik-hero__grid (Interiores Turn Key): same three-item pattern as
   pv-hero__grid above — text/media/body are separate grid items in
   DOM order text → media → body, so mobile stacks title, then the
   featured image, then copy/CTA with no extra CSS. From 900px up,
   media moves into its own column on the right (title+body stack
   in the other), matching the section's original two-column look. */
@media (min-width: 900px) {
  /* row-gap: 0 — the base .tk-hero__grid gap (64px) is meant as the
     horizontal gap between the text and media columns; once text/body
     become two rows of the same column that same value would also
     land between them, on top of the paragraph's own margin-top,
     opening a huge vertical gap under the title. */
  .ik-hero__grid { grid-template-rows: auto 1fr; row-gap: 0; column-gap: 64px; }
  .ik-hero__grid .tk-hero__media { grid-column: 2; grid-row: 1 / 3; order: initial; }
  .ik-hero__grid .tk-hero__text { grid-column: 1; grid-row: 1; align-self: end; }
  .ik-hero__grid .tk-hero__body { grid-column: 1; grid-row: 2; align-self: start; }
}
.tk-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); letter-spacing: -0.025em; line-height: 1.08; margin-top: 22px; isolation: isolate; }
/* z-index: -1 paints the pill BEHIND the text so the tight line-height
   never lets it cover descenders of the line above */
.tk-hero__hl { position: relative; z-index: -1; background: var(--color-spark-yellow); border-radius: 999px; padding: 0 20px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tk-hero__text p, .pv-hero__body p, .tk-hero__body p { font-size: 1.125rem; line-height: 1.7; color: var(--color-black-out-500); margin: 26px 0 34px; max-width: 560px; }
.tk-hero__media { position: relative; }
.tk-hero__media::before { content: ""; position: absolute; inset: -22px; background: radial-gradient(circle at 72% 22%, rgba(253,255,168,0.5), transparent 60%); border-radius: 34px; }
.tk-hero__media img,
.tk-hero__media video { position: relative; display: block; width: 100%; aspect-ratio: 4/3.2; object-fit: cover; border-radius: 24px; }

.tk-logowall { background: var(--color-section-alt); padding-block: 0 90px; }
.tk-logowall__label { text-align: center; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-black-out); margin-bottom: 30px; }
.tk-logowall .marquee__track img { height: 58px; }

/* Nossas soluções — tabbed solution cards (tab bar hidden without
   JS; the three panels then render stacked, see turnkey.js) */
.tk-solutions { background: var(--color-section-alt); padding-block: 84px 90px; }
.tk-solutions__head { text-align: center; max-width: 900px; margin: 0 auto 34px; }
.tk-solutions__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; line-height: 1.14; margin-top: 14px; }
.tk-solutions__tabs { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.tk-solutions__tabs[hidden] { display: none; }
/* icon-tile cards — same pattern as the "quem confia" partner tabs on
   home/sobre-nos: icon above label, active tab tinted Spark Yellow */
.tk-solutions__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: clamp(120px, 22vw, 190px);
  padding: 18px 12px;
  background: var(--color-white-magic);
  border: 1px solid var(--color-cozy-brown-700);
  border-radius: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-black-out-500);
  text-align: center;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tk-solutions__tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.tk-solutions__tab--active { background: var(--color-spark-yellow-500); border-color: var(--color-spark-yellow-900); color: var(--color-black-out); }
.tk-solutions__tab-ico { display: flex; }
.tk-solutions__panel { background: var(--color-white-magic); border: var(--card-hairline); border-radius: 26px; box-shadow: var(--shadow-card); padding: clamp(28px, 4.5vw, 56px); }
.tk-solutions__panel[hidden] { display: none; }
.tk-solutions__panel + .tk-solutions__panel { margin-top: 28px; } /* no-JS stacked fallback */
.tk-solutions__grid { display: grid; grid-template-columns: 1fr; gap: 36px; } /* items stretch: text always starts at the top, media fills the row */
@media (min-width: 900px) { .tk-solutions__grid { grid-template-columns: 1.06fr 0.94fr; gap: 56px; } }
.tk-solutions__content h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.5vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.18; margin-top: 16px; text-wrap: balance; }
.tk-solutions__body { font-size: 1rem; line-height: 1.7; color: var(--color-black-out-500); margin-top: 18px; max-width: 540px; }
/* impact callout — single sentence, emphasis on the payoff */
.tk-solutions__impact { font-size: 0.9375rem; line-height: 1.65; color: var(--color-black-out-500); margin-top: 26px; max-width: 540px; background: var(--color-spark-yellow-500); border-left: 4px solid var(--color-spark-yellow); border-radius: 0 14px 14px 0; padding: 16px 22px; }
.tk-solutions__impact strong { font-weight: 700; color: var(--color-black-out); }
/* --band: full-width bottom strip, mirrors the benefit-chip cards */
.tk-solutions__impact--band { display: flex; align-items: center; gap: 14px; max-width: none; margin-top: 0; text-align: left; border-left: none; border-radius: 16px; padding: 20px 24px; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 400; background: var(--color-spark-yellow); color: var(--color-black-out); }
.tk-solutions__impact--band svg { flex: none; box-sizing: border-box; width: 38px; height: 38px; padding: 8px; background: var(--color-black-out); color: var(--color-spark-yellow); border-radius: 50%; }
.tk-solutions__group { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 26px 0 14px; }
.tk-solutions .tk-sfeatures { margin: 26px 0 0; gap: 16px; }
.tk-solutions__group + .tk-sfeatures { margin-top: 0; } /* label already spaces it */
.tk-solutions__media .img-placeholder,
.tk-solutions__media img { display: block; width: 100%; height: 100%; min-height: 340px; border-radius: 20px; overflow: hidden; }
.tk-solutions__media img { object-fit: cover; }
@media (min-width: 900px) { .tk-solutions__media .img-placeholder, .tk-solutions__media img { min-height: 420px; } }
.tk-solutions__foot { margin-top: clamp(28px, 4vw, 44px); padding-top: 30px; border-top: 1px solid #ECE8E1; }
.tk-solutions__foot .tk-solutions__group { margin-top: 0; }
.tk-solutions__benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .tk-solutions__benefits { grid-template-columns: 1fr; } }
/* highlight chips — Welcome Green cards, same treatment the old
   "O que seus clientes ganham" section used for these points */
.tk-benefit { display: flex; gap: 14px; align-items: flex-start; background: var(--color-welcome-green); border-radius: 16px; padding: 20px 22px; }
.tk-benefit svg { flex: none; box-sizing: border-box; width: 38px; height: 38px; padding: 8px; background: var(--color-white-magic); border-radius: 50%; color: #1f6b5e; }
.tk-benefit strong { display: block; font-size: 0.9375rem; font-weight: 700; color: #1f4d44; margin-top: 1px; }
.tk-benefit p { font-size: 0.84rem; line-height: 1.55; color: #3f5550; margin-top: 4px; }

.tk-services { background: var(--color-section-alt); padding-block: 72px; }
.tk-services__head { text-align: center; margin-bottom: 52px; }
.tk-services__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; margin-top: 14px; }
.tk-srow { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; margin-bottom: 40px; }
@media (min-width: 860px) { .tk-srow--ti { grid-template-columns: 1fr 1.25fr; } .tk-srow--it { grid-template-columns: 1.25fr 1fr; } }
.tk-srow h3 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 300; margin-bottom: 12px; }
.tk-srow p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-black-out-500); margin-bottom: 22px; max-width: 440px; }
.tk-sfeatures { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.tk-sfeatures li { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; }
.tk-sfeatures svg { flex: none; color: #167d77; }
.tk-simg { position: relative; border-radius: 18px; background: #EBE7DF; min-height: 380px; }
.tk-srow--it .tk-simg { order: -1; }
@media (min-width: 860px) { .tk-srow--it .tk-simg { order: 0; } }

.tk-spot { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 84px 90px; }
.tk-spot__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .tk-spot__grid { grid-template-columns: 0.72fr 1.28fr; gap: 64px; } }
.tk-spot h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.16; margin-top: 18px; }
.tk-spot p { font-size: 1.0625rem; line-height: 1.7; color: rgba(248, 247, 245, 0.78); margin: 22px 0 30px; max-width: 480px; }
.tk-spot .tk-sfeatures svg { color: var(--color-spark-yellow); }
.tk-mediacard { position: relative; border-radius: 22px; overflow: hidden; background: #E4DFD6; box-shadow: 0 14px 36px rgba(39,38,34,0.10); }
.tk-mediacard .tk-media { position: absolute; inset: 0; width: 100%; height: 100%; }
/* video flows at its intrinsic ratio — the card hugs it, nothing crops */
.tk-mediacard video { display: block; width: 100%; height: auto; }
/* --screen: dark bezel around the video, like a device display */
.tk-mediacard--screen { border: 10px solid var(--color-cozy-brown-900); border-radius: 24px; }
.tk-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; }
.tk-play__btn { width: 74px; height: 74px; border-radius: 50%; background: rgba(247,244,240,0.92); color: var(--color-black-out); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(39,38,34,0.28); }

.tk-testi { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 84px 44px; }
.tk-testi__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
.tk-testi__grid--center { align-items: center; }
@media (min-width: 900px) { .tk-testi__grid { grid-template-columns: 1fr 1.1fr; gap: 80px; } }
.tk-testi__lead h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; margin: 16px 0 28px; color: var(--color-candle-light); }
.tk-testi__video { position: relative; border-radius: 22px; overflow: hidden; background: #1f1e1a; aspect-ratio: 4/3; }
.tk-testi__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tk-testi__credit { margin-top: 14px; }
.tk-testi__credit .tk-testi__video-kicker { font-size: 0.6875rem; margin-bottom: 2px; }
.tk-testi__credit .tk-testi__video-name { font-size: 1rem; }
/* YouTube click-to-play facade (see assets/js/video-embed.js) */
.yt-facade { position: absolute; inset: 0; display: block; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; }
.tk-play__btn, .pp-play span { transition: transform 0.2s ease; }
.yt-facade:hover .tk-play__btn, .yt-facade:hover .pp-play span { transform: scale(1.08); }
.tk-testi__video-label { position: absolute; left: 22px; bottom: 20px; z-index: 4; }
.tk-testi__video-kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-spark-yellow); margin-bottom: 4px; }
.tk-testi__video-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 300; }
.tk-testi__list { display: flex; flex-direction: column; gap: 30px; }
.tk-quote { border-bottom: 1px solid rgba(247,244,240,0.18); padding-bottom: 28px; }
.tk-quote__tag { display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-spark-yellow); margin-bottom: 12px; }
.tk-quote__text { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 300; line-height: 1.45; margin-bottom: 20px; }
.tk-quote__who { display: flex; align-items: center; gap: 14px; }
.tk-quote__avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; background-size: cover; background-position: center; }
.tk-quote__name { font-size: 0.9375rem; font-weight: 600; }
.tk-quote__role { font-size: 0.8125rem; opacity: 0.6; }
/* compact variant (turn-key): long partner quotes at reading size */
.tk-testi--compact .tk-testi__lead h2 { text-wrap: balance; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.tk-testi--compact .tk-testi__list { gap: 22px; }
.tk-testi--compact .tk-quote { padding-bottom: 22px; }
.tk-testi--compact .tk-quote__text { font-size: 0.9375rem; line-height: 1.6; margin-bottom: 14px; }

.tk-google { background: var(--color-black-out); padding-block: 0 90px; }
.tk-google__card { background: var(--color-white-magic); border-radius: 20px; box-shadow: 0 1px 3px rgba(39,38,34,0.06); padding: 16px 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; color: var(--color-black-out); transition: box-shadow 0.15s; }
.tk-google__card:hover { box-shadow: 0 6px 20px rgba(39,38,34,0.10); }
.tk-google__score { display: flex; align-items: center; gap: 14px; }
.tk-google__num { font-family: var(--font-display); font-size: 2.125rem; font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.tk-google__stars { color: #FDC436; font-size: 1.25rem; letter-spacing: 2px; }
.tk-google__avatars { display: flex; align-items: center; flex: none; }
.tk-google__avatars img { width: 44px; height: 44px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: #EDE8E0; }
.tk-google__avatars img + img { margin-left: -14px; }
.tk-google__sep { width: 1px; height: 40px; background: #ECE5DA; }
.tk-google__text { font-size: 1rem; line-height: 1.5; color: var(--color-black-out-500); flex: 1; min-width: 240px; }
.tk-google__text strong { color: var(--color-black-out); font-weight: 600; }
.tk-google__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }

/* CTA banners — keep the action button beside the text, never
   stacked below it. The heading shrinks and wraps (up to ~3 lines)
   instead of pushing the button onto a new line, so the pill
   height stays compact. Reverts to a stack only on small screens. */
.fp-cta__row, .pp-cta__row, .inc-cta__row { flex-wrap: nowrap; }
.fp-cta__left, .pp-cta__left, .inc-cta__left { flex: 1 1 auto; min-width: 0; }
.fp-cta__left h2, .pp-cta__left h2, .inc-cta__left h2 { min-width: 0; }
.fp-cta__row > a, .pp-cta__row > a, .inc-cta__row > a { flex: none; }
@media (max-width: 720px) {
  .fp-cta__row, .pp-cta__row, .inc-cta__row { flex-wrap: wrap; }
  /* stack the symbol above the heading — side by side the title gets
     squeezed into a skinny column on phones */
  .fp-cta__left, .pp-cta__left, .inc-cta__left { flex-direction: column; align-items: flex-start; gap: 18px; }
  .fp-cta__left img, .pp-cta__left img, .inc-cta__left img { height: 56px; }
}

/* ============================================================
   LAYER 39 — INICIO (home)
   ============================================================ */
/* HOME HERO — full-bleed media slider, editorial layout: the type
   sits bottom-left over a soft gradient scrim (benchmark: modern
   architecture/interior studios), so the video/photo stays the
   protagonist. Fills the viewport below the sticky 76px header. */
.home-hero {
  position: relative;
  width: 100%;
  min-height: calc(100svh - 76px);
  overflow: hidden;
  /* white wall with the brand bg effect (designer's efeito.svg):
     a gaussian-blurred Spark Yellow circle (r ~985px, blur ~206px
     on a 1920 canvas) anchored at the bottom-right corner; the
     gradient stops replicate the blur falloff */
  background:
    radial-gradient(circle 73vw at 95% 104%,
      var(--color-spark-yellow) 0%,
      rgba(253, 255, 171, 0.98) 41%,
      rgba(253, 255, 171, 0.84) 56%,
      rgba(253, 255, 171, 0.5) 70%,
      rgba(253, 255, 171, 0.16) 85%,
      rgba(253, 255, 171, 0) 100%),
    var(--color-white-magic);
  isolation: isolate;
}

/* media inside the brandbook organic mask — the designer "Mask
   group" shape rebuilt as SVG. `cover` + left anchoring scales the
   mask uniformly (never stretched), so the curve looks identical on
   every viewport: only the flat right-hand run is cropped/extended */
.home-hero__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(47vw, 1100px);
  -webkit-mask-image: url('/assets/img/home-hero-mask.svg');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-image: url('/assets/img/home-hero-mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: left center;
  overflow: hidden;
  z-index: 0;
}
.home-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.home-hero__img.is-active { opacity: 1; }

/* vertically centred stage */
.home-hero__panel {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: flex;
  align-items: center;
}
/* sizing/padding come from .container, so the copy column aligns
   with the header logo and the other pages' heroes */
.home-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 24px 120px; /* asymmetric: lifts the copy block above the visual centre */
}

/* stacked slides — the copy column sits on the flat yellow wash,
   left of the media circle */
.home-hero__slides {
  display: grid;
  position: relative;
  width: min(36vw, 540px);
  margin-right: auto;
  padding-top: 40px; /* nudges the copy block slightly below the vertical centre */
}
/* Spotlar symbol on a Spark Yellow circle, nested into the media's
   curved edge (legacy hero "encaixe"), straddling image and bg */
.home-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: min(47vw, 1100px); /* keep in sync with .home-hero__bg width */
  width: clamp(75px, 7vw, 125px);
  aspect-ratio: 1;
  transform: translate(60%, -50%);
  border-radius: 50%;
  background: var(--color-spark-yellow-900) url('/assets/img/logo-spotlar-symbol.svg') center / 50% no-repeat;
  z-index: 1;
  pointer-events: none;
}
.hero-copy {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-black-out);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
/* every slide's CTA sits on the same baseline: the stacked cells share
   the tallest slide's height and the button anchors to its bottom */
.hero-copy a[class^="btn-"] { margin-top: auto; }
/* slide 1 (no eyebrow/sub): big statement type */
.hero-copy.hero-copy--lead h1 { font-size: clamp(2.75rem, 5vw, 4.25rem); line-height: 1.14; }
/* key phrases sit one weight above the Light 300 base */
.hero-copy h1 strong, .hero-copy h2 strong { font-weight: 400; }
.hero-copy.is-active { opacity: 1; visibility: visible; transform: none; position: relative; }
/* the accent lives on the eyebrow — a Spark Yellow 900 pill above
   the title (one shade up from the bg glow so it doesn't melt in) */
.hero-copy .eyebrow { font-size: 0.9375rem; letter-spacing: 0.1em; background: var(--color-spark-yellow-900); border-radius: 999px; padding: 8px 18px; }
.hero-copy .eyebrow::before, .hero-copy .eyebrow::after { content: none; }
.hero-copy h1, .hero-copy h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 4.3vw, 3.75rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 18px 0 16px;
  color: var(--color-black-out);
  text-wrap: balance;
}
.hero-copy p { font-size: 1.25rem; line-height: 1.6; color: var(--color-black-out); margin-bottom: 28px; }
/* mobile-only line break for slides 2/3 (desktop keeps its natural wrap) */
.hero-copy__break { display: none; }

/* pagination dots — below the CTA, aligned to the copy column */
.home-hero__nav {
  grid-row: 2;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  padding-left: 6px;
}
/* slim slide-progress bar along the hero's top edge; the JS drives
   the fill with a linear transform over the autoplay delay */
.home-hero__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: rgba(39, 38, 34, 0.08);
}
.home-hero__progress span {
  display: block;
  height: 100%;
  background: var(--color-spark-yellow-900);
  transform: scaleX(0);
  transform-origin: left;
}

/* discreet chevron paddles */
.home-hero__arrow {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(39, 38, 34, 0.25);
  border-radius: 50%;
  background: transparent;
  color: var(--color-black-out);
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.home-hero__arrow:hover { opacity: 1; border-color: rgba(39, 38, 34, 0.5); }

/* mobile-only CTA band under the media — hidden on desktop, where the
   button already lives inside .hero-copy */
.home-hero__cta-mobile { display: none; }

@media (max-width: 860px) {
  /* small screens: stacked layout instead of the desktop's card
     floating over a full-bleed background — copy card first (text,
     CTA, nav arrows), video/images as their own block below it.
     DOM order stays bg-then-panel (unchanged from desktop); flex
     `order` is what flips which one reads first. Shorter than the
     desktop full-viewport hero so it reads as one section, not the
     whole first scroll — the next section stays visible below the
     fold. */
  .home-hero { background: var(--color-black-out); min-height: 0; display: flex; flex-direction: column; }
  /* pulled out of absolute positioning (desktop keeps it pinned
     behind the copy) and given its own height so it stacks below
     the card instead of filling the section as a backdrop */
  .home-hero__bg { order: 2; position: relative; inset: auto; width: 100%; height: 42svh; -webkit-mask-image: none; mask-image: none; }
  /* order: 1 keeps the copy card first even though .home-hero__bg
     comes first in the DOM; block display drops the desktop
     vertical-centring flex now that height is intrinsic, not fixed */
  .home-hero__panel { order: 1; display: block; min-height: 0; }
  /* full-bleed: no inline/bottom padding, so the text bar runs edge
     to edge at the top of the section */
  .home-hero__inner { padding-inline: 0; padding-block: 0; max-width: none; }
  .home-hero::after { content: none; }
  /* flat card, full width — no floating/overlap left to round a
     corner against */
  /* extra top padding — the title was sitting almost flush against
     the card's top edge, right under the slide-progress bar; the
     bottom keeps its tighter value since the CTA already has its
     own margin-top below */
  .home-hero__slides { position: relative; width: 100%; margin: 0; background: rgba(255, 255, 255, 0.9); border-radius: 0; padding: 32px 24px 16px; }
  .home-hero__slides::before { display: none; }
  /* centred, balanced rhythm — a wide full-width bar reads lopsided
     left-aligned, so eyebrow/heading/CTA/nav all sit on the same axis */
  .hero-copy { align-items: center; text-align: center; }
  /* full width so the manual <br> splits give exactly the two
     intended lines instead of a narrower fit-content box (from
     align-items: center) wrapping each segment again. Side padding
     keeps the text clear of the side-mounted nav arrows. */
  /* font-weight: 540 — Hepta Slab's Light 300 base reads too thin at
     this size on a phone. Hepta Slab is a variable font (wght 300-600
     range, requested as such in the <head> <link> instead of fixed
     instances) so any value in that range renders exactly, not just
     the static 300/400/600 steps. strong overridden too so the whole
     line reads as one consistent weight instead of the highlighted
     word now looking lighter than its surroundings. */
  .hero-copy h1, .hero-copy h2 { width: 100%; padding-inline: 18px; font-size: clamp(0.9375rem, 3.4vw, 1.0625rem); font-weight: 540; line-height: 1.2; margin: 0 0 16px; }
  .hero-copy h1 strong, .hero-copy h2 strong { font-weight: 540; }
  /* slides 2/3: force the 2-line split ("Receba seu apartamento" /
     "100% mobiliado", "Diferencie seu empreendimento e" / "venda mais") */
  .hero-copy__break { display: inline; }
  /* lead slide: keep the first break (2 lines — "O novo conceito" /
     "de pronto para morar"), drop only the second one; the HTML has
     a literal space before it so the words don't run together */
  .hero-copy.hero-copy--lead h1 br:nth-of-type(2) { display: none; }
  .hero-copy.hero-copy--lead h1 { font-size: clamp(1.0625rem, 4.6vw, 1.3125rem); line-height: 1.25; margin: 0 0 24px; }
  /* dropped at this height — h2 + CTA already carry the message,
     the grid stretches every slide to the tallest one so the
     paragraph was the main thing keeping the bar tall */
  .hero-copy p { display: none; }
  .hero-copy .eyebrow { font-size: 0.6875rem; padding: 3px 10px; margin-bottom: 14px; }
  /* the CTA moves to .home-hero__cta-mobile below the media — the
     copy card keeps only eyebrow + heading */
  .hero-copy a[class^="btn-"] { display: none; }
  /* band sits right after the media block (flex order 3, after
     panel/order 1 and bg/order 2), same translucent card treatment
     as the copy panel so it reads as a matching pair */
  .home-hero__cta-mobile {
    order: 3;
    display: grid;
    justify-items: center;
    padding: 18px 24px 26px;
    background: rgba(255, 255, 255, 0.9);
  }
  /* stacked like .hero-copy: all three in the same cell, only the
     active slide's button visible — driven by the same JS index */
  .home-hero__cta-mobile .hero-cta {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease-out);
  }
  .home-hero__cta-mobile .hero-cta.is-active { opacity: 1; visibility: visible; }
  .home-hero__cta-mobile a[class^="btn-"] { padding: 10px 22px; font-size: 0.8125rem; gap: 8px; margin-top: 0; }
  .home-hero__cta-mobile a[class^="btn-"] svg { width: 14px; height: 14px; }
  /* arrows move off the flow entirely — one at each edge of the
     card, vertically centred, so the card's own height ends right
     after the CTA instead of carrying an extra row for the nav */
  .home-hero__nav {
    position: absolute;
    /* reset the grid placement (base rule sets grid-row: 2) — an
       abs-positioned grid item with an explicit row/column still uses
       that cell as its containing block, which is why top:50% landed
       near the old row-2 area instead of the card's full height */
    grid-row: auto;
    grid-column: auto;
    top: 50%;
    left: 28px;
    right: 28px;
    transform: translateY(-50%);
    justify-self: unset;
    margin-top: 0;
    justify-content: space-between;
    gap: 0;
    pointer-events: none;
  }
  .home-hero__nav .home-hero__arrow { pointer-events: auto; }
  .home-hero__arrow { width: 22px; height: 22px; background: rgba(255, 255, 255, 0.9); }
  .home-hero__arrow svg { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__img,
  .hero-copy { transition: none; }
}

.why { background: var(--color-white-magic); color: var(--color-black-out); padding-block: 84px; }
.why__head { text-align: center; margin-bottom: 54px; }
.why__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; margin-top: 14px; color: var(--color-black-out); }
/* categories band under the before/after — single compact row */
.why__cats { display: flex; flex-wrap: nowrap; justify-content: center; gap: 20px; margin: 64px auto 0; }
.why__cats .pp-cat { flex: 1 1 0; min-width: 0; gap: 12px; }
.why__cats .pp-cat__ico { width: 56px; height: 56px; background: var(--color-comfy-green); color: var(--color-black-out); }
.why__cats .pp-cat__ico::before { background: var(--color-comfy-green); }
.why__cats .pp-cat__ico svg { width: 24px; height: 24px; }
.why__cats .pp-cat__label { font-size: 0.875rem; }
@media (max-width: 900px) { .why__cats { flex-wrap: wrap; } .why__cats .pp-cat { flex: 0 0 150px; } }
/* phones: compact 2-column grid (icon beside label) instead of one
   tall single-column list — keeps the whole "why" section short
   enough to land within the second scroll */
@media (max-width: 560px) {
  .why { padding-block: 40px; }
  .why__head { margin-bottom: 24px; }
  .why__head .eyebrow { font-size: 0.6875rem; gap: 8px; }
  .why__head h2 { font-size: 1.5rem; }
  .why__cats { display: grid; grid-template-columns: repeat(2, 1fr); flex-wrap: nowrap; justify-content: normal; gap: 14px 16px; margin: 28px auto 0; width: 100%; }
  .why__cats .pp-cat { flex: none; flex-direction: row; align-items: center; gap: 10px; text-align: left; }
  /* flex-shrink: 0 — without it the icon is a flex sibling of the
     label text in a row and gets squeezed narrower than its own
     height whenever the label is long, turning the circle into an
     oval. Fixed width/height together keep it a perfect circle. */
  .why__cats .pp-cat__ico { width: 38px; height: 38px; flex-shrink: 0; }
  .why__cats .pp-cat__ico svg { width: 17px; height: 17px; }
  .why__cats .pp-cat__label { font-size: 0.75rem; line-height: 1.25; }
  .why__cats .pp-cat__label br { display: none; }
}
/* the partners band keeps the shared section-alt sand (both home and
   sobre-nos); only the tab menu and logo wall go white — shared by
   every .about-partners instance so the two pages render identically */
.about-partners .about-partners__tabs { background: var(--color-white-magic); }
.about-partners .about-partners__stage { background: var(--color-white-magic); }
/* mobile tile redesign (declared earlier in the file) needs this to
   win back over the white-background rule above it in source order —
   the gaps between tiles should show the section's own background,
   not a solid white panel behind them */
@media (max-width: 560px) {
  /* half the top padding — brings the eyebrow/heading/tabs up closer
     to the section's top edge instead of floating in a tall gap */
  .about-partners { padding-top: calc(var(--space-24) / 2); padding-bottom: 30px; }
  .about-partners .about-partners__tabs { background: transparent; }
  /* eyebrow + heading sized to match the "Por que a Spotlar" section above */
  .about-partners .about-partners__head .eyebrow { font-size: 0.6875rem; }
  .about-partners .about-partners__head h2 { font-size: 1.5rem; }
  /* smaller mobile logo wall — less padding/min-height, smaller logo
     boxes — and closer to the stat circles below (padding-bottom above) */
  .about-partners .about-partners__stage { padding: 10px 0; min-height: 72px; position: relative; z-index: 2; }
  .about-partners .marquee__track { gap: 10px 0; }
  .about-partners .marquee__track span { width: 120px; height: 40px; }
  .about-partners .marquee__track img { max-width: 88px; max-height: 28px; }
  /* the circles (and their yellow glow) tuck up under the logo card —
     stage sits above (z-index 2) so the glow reads as bleeding out
     from behind it rather than covering the logos. The gap itself is
     built entirely from the padding-bottom above (not a margin here)
     so it stays covered by .about-partners' own background — a margin
     would leave a sliver of the page's candle-light bg showing through,
     a visible seam between the two same-colored sections. */
  .about-partners + .about-stats { position: relative; z-index: 1; margin-top: 0; }
}
/* ...and the stats band below the logos sits on white with the
   incorporadoras treatment: bordered circles and a smoky halo behind
   the two highlighted ones (sobre-nos keeps the shared black version) */
.about-partners + .about-stats { background: var(--color-section-alt); }
.about-partners + .about-stats .about-stat { position: relative; z-index: 2; background: var(--color-white-magic); box-shadow: 0 4px 16px rgba(39,38,34,0.08); }
.about-partners + .about-stats .about-stat--glow { box-shadow: 0 0 100px 30px var(--color-spark-yellow); z-index: 1; }

.ba { background: #ECE8E1; padding-block: 80px; }
.ba__head { text-align: center; margin-bottom: 40px; }
.ba__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 3.2vw, 2.5rem); letter-spacing: -0.02em; margin-top: 14px; }
.ba__row { display: flex; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto; }
.ba__arrow { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(39,38,34,0.2); background: transparent; color: var(--color-black-out); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ba__arrow--prev { transform: scaleX(-1); }
.ba__stage { position: relative; flex: 1; aspect-ratio: 16/9; border-radius: 48px; overflow: hidden; background: #ECE8E1; user-select: none; }
.ba__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__img--mirror { transform: scaleX(-1); }
.ba__top { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 50% 0 0); }
.ba__tag { position: absolute; bottom: 16px; background: rgba(39,38,34,0.72); color: var(--color-candle-light); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 50px; }
.ba__tag--before { left: 28px; }
.ba__tag--after { right: 28px; }
.ba__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; background: var(--color-candle-light); transform: translateX(-50%); pointer-events: none; }
.ba__handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 122px; height: 122px; border-radius: 50%; background: var(--color-spark-yellow); box-shadow: 0 6px 20px rgba(39,38,34,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; cursor: ew-resize; }
.ba__handle img { position: static; width: 26px; height: 26px; }
.ba__handle-text { font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-black-out); text-align: center; line-height: 1.2; }
/* drag-affordance chevrons (same style as the hero's prev/next arrows) —
   hidden by default, swapped in for the text label on small screens */
.ba__handle-chevron { display: none; color: var(--color-black-out); }
@media (max-width: 720px) {
  .ba__handle { width: 86px; height: 86px; border-radius: 50%; padding: 10px; gap: 5px; flex-direction: row; justify-content: space-between; }
  .ba__handle img { width: 20px; height: 20px; }
  .ba__handle-text { display: none; }
  .ba__handle-chevron { display: block; opacity: 0.6; }
  .ba__line { width: 4px; }
  .ba__tag { font-size: 0.5625rem; padding: 4px 10px; }
  .ba__tag--before { left: 16px; }
  .ba__tag--after { right: 16px; }
}
.ba__dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.ba-dot { border: none; cursor: pointer; padding: 0; border-radius: 50px; height: 8px; width: 8px; background: rgba(39,38,34,0.25); transition: all 0.25s ease; }
.ba-dot.is-on { width: 26px; background: var(--color-black-out); }
.ba__features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 54px; max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .ba__features { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .ba__features { grid-template-columns: repeat(2, 1fr); } }
.ba-feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ba-feat__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--color-comfy-green); box-shadow: 0 6px 18px rgba(39,38,34,0.08); display: flex; align-items: center; justify-content: center; color: var(--color-black-out); }
.ba-feat__label { font-size: 0.8125rem; line-height: 1.4; max-width: 120px; }

.home-gallery { background: var(--color-black-out); color: var(--color-candle-light); padding-block: 84px; }
.home-gallery--flush { padding-top: 0; } /* para-voce: merges with the dark section above */
.home-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; flex-wrap: wrap; }
.home-gallery__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; margin-top: 14px; line-height: 1.1; }
/* para-voce: no CTA beside the heading — it moves below the grid instead */
.home-gallery__head--stack { display: block; }
.home-gallery__more { display: inline-flex; margin-top: 32px; }
/* home only: heading/CTA/grid as named grid areas so the CTA can be
   reflowed to after the photos on phones without duplicating markup */
.home-gallery__layout {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "headtext cta" "grid grid";
  align-items: end;
  column-gap: 32px;
  row-gap: 36px;
}
.home-gallery__layout .home-gallery__head { grid-area: headtext; display: block; margin-bottom: 0; }
.home-gallery__layout .home-gallery__cta { grid-area: cta; }
.home-gallery__layout .home-gallery__grid { grid-area: grid; }
@media (max-width: 560px) {
  .home-gallery__layout {
    grid-template-columns: 1fr;
    grid-template-areas: "headtext" "grid" "cta";
    row-gap: 20px;
  }
  .home-gallery__layout .home-gallery__cta { justify-self: start; }
}
.home-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 220px); gap: 20px; }
@media (max-width: 760px) {
  .home-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; grid-template-rows: none; }
  .home-gallery__grid > * { grid-column: auto !important; grid-row: auto !important; }
  /* featured project alone on the first row, the rest in pairs */
  .home-gallery__grid > *:first-child { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
}
/* phones: drop the big featured Villamare card — just the 4 smaller
   projects, in a clean 2x2 (home only; para-voce's gallery keeps its
   own Villamare card since it isn't the featured/first slot there) */
@media (max-width: 560px) {
  .home-gallery:not(.home-gallery--flush) .home-gallery__grid > *:first-child { display: none; }
  /* eyebrow + heading sized to match the other sections' opening text */
  .home-gallery:not(.home-gallery--flush) .home-gallery__head .eyebrow { font-size: 0.6875rem; }
  .home-gallery:not(.home-gallery--flush) .home-gallery__head h2 { font-size: 1.5rem; }
  /* smaller top/bottom margins — less dead space around the section */
  .home-gallery:not(.home-gallery--flush) { padding-block: 40px; }
}

/* para-voce: only the 4 smaller cards (Living Ipiranga hidden), so
   none of them should take the old "featured" 2x2 slot. */
@media (min-width: 761px) { .pv-gallery__grid { grid-template-rows: 260px; } }
@media (max-width: 760px) { .pv-gallery__grid > *:first-child { grid-column: auto !important; grid-row: auto !important; } }
.hg-card { position: relative; border-radius: 18px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
/* reference gallery effect: the (inline background-image) zooms in on hover.
   A ::before layer inherits the card's image so it can scale under the scrim. */
.hg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease-out);
}
.hg-card:hover::before { transform: scale(1.08); }
.hg-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(39,38,34,0.55), rgba(39,38,34,0) 50%); pointer-events: none; }
.hg-card__caption { position: absolute; left: 20px; bottom: 16px; color: var(--color-candle-light); pointer-events: none; }
.hg-card__title { display: block; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 400; line-height: 1.1; }
.hg-card__meta { display: block; font-size: 0.75rem; opacity: 0.85; margin-top: 4px; }

.home-projects { background: var(--color-candle-light); padding-block: 80px; }
.home-projects__head { text-align: center; margin-bottom: 50px; }
.home-projects__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; margin-top: 14px; }
.home-projects__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .home-projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .home-projects__grid { grid-template-columns: 1fr; } }
.hp-card { border-radius: 20px; padding: 18px; background: var(--color-candle-light); box-shadow: 0 1px 3px rgba(39,38,34,0.06); transition: transform 0.25s ease; }
.hp-card:hover { transform: translateY(-4px); }
.hp-card--featured { background: var(--color-black-out); color: var(--color-candle-light); box-shadow: none; }
.hp-card__img { border-radius: 14px; height: 150px; margin-bottom: 16px; }
.hp-card h3 { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 400; margin-bottom: 4px; }
.hp-card__tag { font-size: 0.75rem; color: #9b968c; margin-bottom: 14px; }
.hp-card--featured .hp-card__tag { color: rgba(247,244,240,0.6); }
.hp-card__specs { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-black-out-500); border-top: 1px solid #E6E1D8; padding-top: 12px; margin-bottom: 14px; }
.hp-card--featured .hp-card__specs { color: rgba(247,244,240,0.7); border-top-color: rgba(247,244,240,0.16); }
.hp-card__price { font-weight: 600; color: #167d77; background: var(--color-welcome-green); border-radius: 50px; padding: 3px 10px; }
.hp-card__foot { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; font-weight: 600; }

.collections { padding-block: 80px; }
.collections__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.collections__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 3.2vw, 2.5rem); letter-spacing: -0.02em; margin-top: 14px; max-width: 420px; line-height: 1.12; }
.collections__intro { max-width: 430px; }
.collections__intro p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-black-out-500); margin-bottom: 20px; }
.collections__row { display: flex; gap: 14px; height: 380px; }
@media (max-width: 760px) { .collections__row { flex-direction: column; height: auto; } }
.collection { flex: 1; background: #3A3A2C; border-radius: 18px; overflow: hidden; cursor: pointer; transition: flex 0.35s ease; min-width: 0; position: relative; }
.collection.is-open { flex: 3.2; }
@media (max-width: 760px) { .collection { min-height: 120px; } .collection.is-open { min-height: 320px; } }
.collection__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.collection__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39,38,34,0.1) 0%, rgba(39,38,34,0.78) 100%); }
.collection__full { display: none; position: relative; z-index: 2; padding: 34px; flex-direction: column; justify-content: flex-end; height: 100%; }
.collection.is-open .collection__full { display: flex; }
.collection__full h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; color: var(--color-candle-light); margin-bottom: 12px; }
.collection__full p { font-size: 0.875rem; line-height: 1.6; color: rgba(247,244,240,0.85); margin-bottom: 22px; max-width: 360px; }
.collection__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(247,244,240,0.4); display: flex; align-items: center; justify-content: center; color: var(--color-candle-light); flex: none; }
.collection__mini { display: flex; position: relative; z-index: 2; height: 100%; align-items: center; justify-content: center; padding: 24px 0; }
.collection.is-open .collection__mini { display: none; }
.collection__mini span { font-family: var(--font-display); writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.3125rem; color: var(--color-candle-light); white-space: nowrap; }

.process { background: var(--color-candle-light); padding-block: 40px 90px; }
.process__head { text-align: center; margin-bottom: 50px; }
.process__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; margin-top: 14px; }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 44px; }
@media (max-width: 900px) { .process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .process__grid { grid-template-columns: 1fr; } }
.proc-step { border-radius: 20px; padding: 34px 26px; background: var(--color-candle-light); color: var(--color-black-out); box-shadow: 0 1px 3px rgba(39,38,34,0.05); }
.proc-step--active { background: var(--color-black-out); color: var(--color-candle-light); box-shadow: none; }
.proc-step__num { font-family: var(--font-display); font-size: 3.375rem; font-weight: 300; display: block; margin-bottom: 18px; color: var(--color-cozy-brown); }
.proc-step--active .proc-step__num { color: var(--color-spark-yellow); }
.proc-step h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin-bottom: 10px; }
.proc-step p { font-size: 0.875rem; line-height: 1.6; opacity: 0.7; margin-bottom: 22px; }
.proc-step__img { border-radius: 12px; height: 120px; background: #EFE7DB; }
.proc-step--active .proc-step__img { background: #36352f; }
.process__cta { display: flex; justify-content: center; }

/* REVIEWS — Google cards in an edge-bleed horizontal carousel
   (pure CSS scroll + snap; no JS needed) */
.home-reviews { background: var(--color-candle-light); padding-block: 84px; overflow: hidden; }
.home-reviews__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; text-align: center; margin-bottom: 54px; color: var(--color-black-out); }
.home-reviews__head { text-align: center; }
.home-reviews__head .home-reviews__title { margin-top: 14px; }
.home-reviews__stage { position: relative; }
.home-reviews__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* no-JS fallback: plain strip aligned to the container edge */
  padding-inline: max(var(--space-6), calc((100vw - 1184px) / 2));
  padding-bottom: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* JS centre-mode: side padding lets any card sit mid-screen (the
   cloned sets guarantee neighbours, so the padding never shows) */
.home-reviews__track.is-enhanced { padding-inline: calc(50% - min(240px, 43vw)); }
.home-reviews__track::-webkit-scrollbar { display: none; }
.review-card {
  position: relative;
  flex: 0 0 min(480px, 86vw);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--color-white-magic);
  border: 1px solid var(--color-cozy-brown-700);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 2px 10px rgba(39, 38, 34, 0.05);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
/* JS-enhanced centre focus: side cards recede, the centred one leads.
   Without JS the class never lands and every card stays full strength. */
.home-reviews__track.is-enhanced .review-card { opacity: 0.55; transform: scale(0.97); }
.home-reviews__track.is-enhanced .review-card.is-focused { opacity: 1; transform: scale(1); }
/* round paddles, same recipe as the team slider buttons */
.home-reviews__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-white-magic);
  border: 1.5px solid #DCD8D0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black-out);
  box-shadow: 0 2px 8px rgba(39, 38, 34, 0.10);
  transition: box-shadow 0.15s;
}
.home-reviews__btn:hover { box-shadow: 0 4px 16px rgba(39, 38, 34, 0.16); }
.home-reviews__btn--prev { left: max(var(--space-6), calc((100% - 1184px) / 2)); }
.home-reviews__btn--next { right: max(var(--space-6), calc((100% - 1184px) / 2)); }
/* phones: the side-mounted arrows would sit on top of the cards at
   this width, so drop them to a small centred pair below the stage —
   same affordance as the hero's prev/next chevrons */
@media (max-width: 720px) {
  .home-reviews__stage { padding-bottom: 56px; }
  .home-reviews__btn {
    top: auto;
    bottom: 0;
    transform: none;
    width: 36px;
    height: 36px;
  }
  .home-reviews__btn--prev { left: calc(50% - 46px); right: auto; }
  .home-reviews__btn--next { right: calc(50% - 46px); left: auto; }
  .home-reviews__btn svg { width: 14px; height: 14px; }
}
/* home only: eyebrow + heading matched to the other sections, and
   the whole band shrunk enough to land in a single scroll */
@media (max-width: 560px) {
  .home-gallery:not(.home-gallery--flush) + .home-reviews { padding-block: 32px; }
  .home-gallery:not(.home-gallery--flush) + .home-reviews .home-reviews__head .eyebrow { font-size: 0.6875rem; }
  .home-gallery:not(.home-gallery--flush) + .home-reviews .home-reviews__title { font-size: 1.5rem; margin-bottom: 24px; }
  .home-gallery:not(.home-gallery--flush) + .home-reviews .home-reviews__stage { padding-bottom: 40px; }
  .home-gallery:not(.home-gallery--flush) + .home-reviews .review-card { padding: 16px; gap: 10px; }
  .home-gallery:not(.home-gallery--flush) + .home-reviews .review-card__who { gap: 10px; }
  .home-gallery:not(.home-gallery--flush) + .home-reviews .review-card__avatar { width: 34px; height: 34px; }
  .home-gallery:not(.home-gallery--flush) + .home-reviews .review-card__source { font-size: 0.6875rem; }
  .home-gallery:not(.home-gallery--flush) + .home-reviews .review-card__text { font-size: 0.8125rem; line-height: 1.45; }
  .home-gallery:not(.home-gallery--flush) + .home-reviews .review-card__rating-stars { font-size: 1.125rem; letter-spacing: 3px; }
}
.review-card__who { display: flex; align-items: center; gap: 14px; }
.review-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-black-out);
  background: var(--color-welcome-green) center / cover no-repeat;
}
.review-card__name { font-weight: 600; }
.review-card__source { font-size: 0.8125rem; color: var(--color-black-out-500); }
.review-card__text { font-size: 1.0625rem; line-height: 1.7; color: var(--color-black-out); }
/* Google rating badge: G logo + gold stars */
.review-card__rating { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.review-card__rating-stars { color: var(--color-status-warning); font-size: 1.625rem; letter-spacing: 5px; line-height: 1; }
/* video testimonial card: the click-to-play facade replaces the quote */
.review-card__video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-block: auto; }
.review-card__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.home-comp { background: var(--color-candle-light); padding-block: 84px; }
.home-comp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 30px; flex-wrap: wrap; }
.home-comp__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.8125rem); letter-spacing: -0.02em; margin-top: 14px; line-height: 1.1; }
.home-comp__tools { display: flex; gap: 24px; align-items: center; flex: none; }

/* ============================================================
   SCROLL REVEAL — entrance animations (see assets/js/reveal.js).
   Initial hidden state (.reveal-init) is applied by JS only, and
   only to below-the-fold elements, so there is no FOUC and the
   LCP element is never hidden. Elements animate to .is-visible
   when they scroll into view.
   ============================================================ */
[data-reveal].reveal-init {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="slide-up"].reveal-init    { transform: translateY(48px); }
[data-reveal="slide-left"].reveal-init  { transform: translateX(-48px); }
[data-reveal="slide-right"].reveal-init { transform: translateX(48px); }
[data-reveal="fade-right"].reveal-init  { transform: translateX(-24px); }
[data-reveal="roll-in"].reveal-init     { transform: translateX(-48px) rotate(-6deg); }

/* Scoped to .reveal-init so this rule stops matching after the
   JS cleanup removes it — otherwise its `transform: none` (same
   specificity, later in the file) would permanently override the
   cards' own :hover lift transforms. */
[data-reveal].reveal-init.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   SITE LOADER — lightweight brand preloader.
   Safe by construction: a CSS-only failsafe animation removes
   the overlay after 2s even if JS never runs, so content is
   never trapped behind it (progressive enhancement). JS
   (site.js) dismisses it earlier, on DOMContentLoaded.
   ============================================================ */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--color-candle-light);
  animation: loader-failsafe 0.4s ease 2s forwards;
}
.site-loader__mark {
  width: 52px;
  height: 52px;
  animation: loader-pulse 1.1s var(--ease-in-out) infinite;
}
.site-loader.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1); }
}
@keyframes loader-failsafe {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader__mark { animation: none; }
  .site-loader.is-done { transition: none; }
}

/* ============================================================
   FX — MOTION ENHANCEMENTS (see assets/js/effects.js).
   html.has-fx is added by JS only when the Motion bundle loaded
   and prefers-reduced-motion is off. It hands the hover lift
   transforms over to spring animations (box-shadow keeps its
   CSS transition). Without it — no JS, reduced motion or vendor
   failure — the pure-CSS hovers above stay in charge.
   ============================================================ */
.has-fx .hp-card:hover,
.has-fx .hp-card.hp-card--media:hover,
.has-fx .hg-card:hover,
.has-fx .gl-card:hover,
.has-fx .inc-sol-card:hover,
.has-fx .pp-pillar:hover,
.has-fx .pp-oper-card:hover,
.has-fx .fp-value-card:hover,
.has-fx .fp-benefit-card:hover,
.has-fx .fp-career-card:hover,
.has-fx .pv-pain:hover,
.has-fx .pp-chip:hover,
.has-fx .pv-step:hover,
.has-fx .pv-why-card:hover,
.has-fx .oe-card:hover .oe-shot,
.has-fx .fp-team-card:hover .fp-team-card__img { transform: none; }

/* FAQ chevron: rotation is spring-animated by faq.js + effects.js. */
.has-fx .faq__chev { transition: color 0.2s, border-color 0.2s; }
.has-fx .faq__item.open .faq__chev { transform: none; }