/* ==========================================================================
   Typography & Font Faces
   ========================================================================== */

/* Helvetica Neue Roman Local Fallback Definition */
@font-face {
  font-family: 'Helvetica Neue';
  src: local('Helvetica Neue Roman'),
       local('Helvetica Neue'),
       local('HelveticaNeue-Roman'),
       local('HelveticaNeue');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Global Reset & Base Fonts */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --bg-color: #000000;
  --bg-cream: #FAF7F2;
  --text-main: #000000;
  --text-muted: #2d2d34;
  --text-subtle: #4c4c54;
  --accent-red: #763536;
  --accent-red-hover: #5A2829;
  --card-bg: rgba(255, 255, 255, 0.45);
  --card-border: rgba(0, 0, 0, 0.12);
  --card-border-hover: rgba(0, 0, 0, 0.28);
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Helvetica Neue', 'Inter', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* Só o html recebe overflow-x, para que a janela continue sendo o scroller do ScrollTrigger. */
html {
  overflow-x: hidden;
}

/* Anything wider than the screen lets mobile browsers pan sideways and expose a strip on the right */
@media (max-width: 767px) {
  body {
    max-width: 100%;
    overflow-x: clip;
  }
}

html, body {
  background-color: var(--bg-cream);
  color: var(--text-main);
  width: 100%;
  min-height: 100%;
  user-select: none;
}

/* ==========================================================================
   Hero (moove.)
   ========================================================================== */
/* Sticky so the sections below slide up over it on scroll */
.moove-hero {
  --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hero-edge: clamp(1.25rem, 4vw, 4rem);
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 var(--hero-edge);
  background-color: var(--bg-cream);
  overflow: hidden;
}

.moove-hero,
.moove-hero * {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ---------------- Header ---------------- */
.hero-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: clamp(1.25rem, 3vh, 2.25rem);
}

.hero-logo {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: #000000;
}

.hero-nav {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.hero-nav a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
  transition: color 0.3s ease;
}

.hero-nav a:hover {
  color: var(--accent-red);
}

.hero-hamburger {
  display: none;
  justify-self: end;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hero-hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background-color: #000000;
  transition: transform 0.3s var(--hero-ease), opacity 0.3s ease;
}

.hero-header.is-open .hero-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hero-header.is-open .hero-hamburger span:nth-child(2) {
  opacity: 0;
}

.hero-header.is-open .hero-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------- Main (3 columns) ---------------- */
.hero-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.hero-text-left {
  position: relative;
  z-index: 3;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.hero-text-left p {
  max-width: 250px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  color: #4a4a4a;
}

.hero-link {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color 0.3s ease;
}

.hero-link:hover {
  color: var(--accent-red);
}

/* Negative margin = .hero-footer height (38px social icons + its padding-bottom), so the box reaches the screen bottom */
.hero-center-visual {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: end;
  margin-bottom: calc(-38px - clamp(1.25rem, 3vh, 2.25rem));
}

.hero-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(300px, 35vw, 500px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: #763536;
  z-index: 1 !important;
  animation: scaleUp 1s var(--hero-ease) forwards;
}

.hero-model {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(calc(-50% + var(--hero-model-shift, 0%)));
  z-index: 10 !important;
  max-height: 90vh;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  animation: fadeInUpCentered 1s var(--hero-ease) 0.4s forwards;
}

.hero-text-right {
  position: relative;
  z-index: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: right;
}

.hero-title {
  position: relative;
  z-index: 5;
  text-align: left;
  font-size: clamp(4rem, 7.5vw, 7rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: #000000;
}

/* ---------------- Footer ---------------- */
.hero-footer {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

.hero-social {
  display: flex;
  gap: 0.75rem;
}

.hero-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  color: #000000;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.hero-social a:hover {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
}

.hero-social svg {
  width: 16px;
  height: 16px;
}

.hero-location {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000000;
}

/* ---------------- Staggered entrance ---------------- */
.hero-logo,
.hero-nav,
.hero-hamburger,
.hero-title,
.hero-text-left p,
.hero-link,
.hero-footer {
  opacity: 0;
  animation: fadeInUp 1s var(--hero-ease) forwards;
}

.hero-logo {
  animation-delay: 0.1s;
}

.hero-nav,
.hero-hamburger {
  animation-delay: 0.2s;
}

.hero-title {
  animation-delay: 0.6s;
}

.hero-text-left p {
  animation-delay: 0.8s;
}

.hero-link {
  animation-delay: 0.95s;
}

.hero-footer {
  animation-delay: 1.1s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --hero-model-shift optically recenters the subject, which sits left of center inside the photo */
@keyframes fadeInUpCentered {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--hero-model-shift, 0%)), 40px);
  }
  to {
    opacity: 1;
    transform: translateX(calc(-50% + var(--hero-model-shift, 0%)));
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero-nav,
  .hero-hamburger,
  .hero-title,
  .hero-text-left p,
  .hero-link,
  .hero-footer,
  .hero-circle,
  .hero-model {
    opacity: 1;
    animation: none;
  }
}

/* ---------------- Responsive ---------------- */
@media (min-width: 1024px) {
  .hero-model {
    --hero-model-shift: 1.5%;
  }

  /* Title is right-aligned and ~4.05x its font-size wide, so size it to the space between
     the circle (clamp below mirrors .hero-circle width) and the page edge, minus a ~2rem buffer */
  .hero-title {
    font-size: min(7rem, calc((50vw - var(--hero-edge) - clamp(300px, 35vw, 500px) / 2 - 2.5rem) / 4.05));
  }
}

@media (max-width: 1024px) {
  .hero-nav {
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .hero-header {
    grid-template-columns: 1fr auto;
  }

  .hero-hamburger {
    display: flex;
  }

  .hero-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .hero-header.is-open .hero-nav {
    display: flex;
  }

  .hero-nav a {
    padding: 1rem 1.5rem;
    font-size: 0.8rem;
  }

  .hero-logo {
    font-size: 2.2rem;
  }

  .hero-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0 1.75rem;
  }

  /* Takes whatever height the text leaves, since the sticky hero is locked to 100vh */
  .hero-center-visual {
    --hero-circle-size: min(85vw, 360px, 100cqh);
    order: 1;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    margin-bottom: 0;
    container-type: size;
  }

  .hero-text-right {
    order: 2;
    align-items: center;
    text-align: center;
  }

  .hero-text-left {
    order: 3;
    align-items: center;
    gap: 1.1rem;
    text-align: center;
  }

  .hero-text-left p {
    max-width: 300px;
  }

  /* Bottom-anchored so its lower edge meets the model's base, right above the title */
  .hero-circle {
    top: calc(100% - var(--hero-circle-size) / 2);
    width: var(--hero-circle-size);
  }

  .hero-model {
    --hero-model-shift: 2%;
    height: 100%;
  }

  .hero-title {
    text-align: center;
    font-size: clamp(3.5rem, 17vw, 5.5rem);
  }
}

/* ==========================================================================
   Especialistas (Lanyard Badges)
   ========================================================================== */
/* First panel to slide over the sticky hero */
.especialistas-section {
  position: relative;
  z-index: 5;
  padding: clamp(4rem, 9vh, 6rem) 24px clamp(2.5rem, 6vh, 4rem);
  background-color: var(--bg-cream);
  box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.18);
}

.especialistas-container {
  max-width: 1100px;
  margin: 0 auto;
}

.especialistas-header {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.especialistas-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red);
}

.especialistas-title {
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: #111;
}

.especialistas-subtitle {
  max-width: 560px;
  margin: 18px auto 0;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: #444;
}

.lanyard-duo {
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: center;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}

/*
 * Stage for one badge. The height must be a definite length: the physics hangs the card from it.
 * No overflow clipping: the canvas already bounds the strap, and the card may swing past the stage.
 */
.lanyard {
  --lyd-cw: 260px;
  --lyd-ch: 390px;
  --lyd-ring: 9px;
  --lyd-clip: 26px;
  --lyd-s: 1.0833;
  --lyd-card: #F3ECE1;
  --lyd-ink: #763536;
  --lyd-ink-soft: rgba(118, 53, 54, 0.72);
  position: relative;
  flex: 0 1 460px;
  width: 100%;
  max-width: 460px;
  height: 700px;
  user-select: none;
  -webkit-user-select: none;
}

.lanyard,
.lanyard * {
  font-family: var(--font-body);
}

/* Strands fade in from the top edge instead of being cut off */
.lanyard__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
}

.lanyard__card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--lyd-cw);
  height: calc(var(--lyd-ch) + var(--lyd-ring) + var(--lyd-clip));
  transform-origin: 50% 0;
  cursor: grab;
  touch-action: none;
  will-change: transform;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.lanyard__card:focus-visible .lanyard__face {
  outline: 2px solid var(--accent-red);
  outline-offset: 4px;
}

/* Badge clip: hooks the ring, bites the card */
.lanyard__clip {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: calc(var(--lyd-cw) * 0.075);
  height: calc(var(--lyd-clip) + var(--lyd-cw) * 0.05);
  transform: translateX(-50%);
  border-radius: calc(var(--lyd-cw) * 0.02);
  background: linear-gradient(90deg, #f4efe4, #a8a090 50%, #ece6da);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.lanyard__inner {
  position: absolute;
  top: calc(var(--lyd-ring) + var(--lyd-clip) * 0.6);
  left: 0;
  right: 0;
  height: var(--lyd-ch);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.lanyard__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--lyd-cw) * 0.06);
  background-color: var(--lyd-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.lanyard__face--back {
  transform: rotateY(180deg);
}

.lanyard__slot {
  position: absolute;
  top: calc(var(--lyd-cw) * 0.05);
  left: 50%;
  width: calc(var(--lyd-cw) * 0.2);
  height: calc(var(--lyd-cw) * 0.035);
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --lyd-shine / --lyd-dim are written every frame by the physics loop */
.lanyard__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%) var(--lyd-shine, 50%) 0 / 250% 100% no-repeat,
    rgba(0, 0, 0, var(--lyd-dim, 0));
}

/* Softer glare on the back so the professional's details stay legible */
.lanyard__face--back .lanyard__shade {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.1) 50%, transparent 62%) var(--lyd-shine, 50%) 0 / 250% 100% no-repeat,
    rgba(0, 0, 0, var(--lyd-dim, 0));
}

.lanyard img,
.lanyard svg {
  -webkit-user-drag: none;
}

/* ---------------- Front face (laid out at 240px, scaled by --lyd-s) ---------------- */
.badge-front {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--lyd-ink);
}

.badge-front__orn,
.badge-front__arrow {
  position: absolute;
  max-width: none;
}

.badge-front__orn--a {
  top: calc(var(--lyd-s) * 100px);
  right: calc(var(--lyd-s) * -130px);
  width: calc(var(--lyd-s) * 300px);
  opacity: 0.5;
}

.badge-front__orn--b {
  bottom: calc(var(--lyd-s) * -70px);
  left: calc(var(--lyd-s) * -40px);
  width: calc(var(--lyd-s) * 210px);
  opacity: 0.3;
}

.badge-front__arrow {
  top: calc(var(--lyd-s) * 150px);
  left: calc(var(--lyd-s) * 26px);
  width: calc(var(--lyd-s) * 14px);
  height: calc(var(--lyd-s) * 200px);
  transform: rotate(-14deg);
  opacity: 0.8;
}

.badge-front__text {
  position: absolute;
  top: calc(var(--lyd-s) * 40px);
  left: calc(var(--lyd-s) * 22px);
  right: calc(var(--lyd-s) * 22px);
}

.badge-front__title {
  font-size: calc(var(--lyd-s) * 26px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #111;
}

.lanyard .badge-front__title em {
  display: block;
  font-family: var(--font-serif);
  font-size: calc(var(--lyd-s) * 36px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lyd-ink);
}

.badge-front__hint {
  display: flex;
  align-items: center;
  gap: calc(var(--lyd-s) * 5px);
  margin-top: calc(var(--lyd-s) * 10px);
  font-size: calc(var(--lyd-s) * 6.5px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lyd-ink-soft);
}

.badge-front__hint svg {
  flex-shrink: 0;
  width: calc(var(--lyd-s) * 10px);
  height: calc(var(--lyd-s) * 10px);
}

.badge-front__brand {
  position: absolute;
  right: calc(var(--lyd-s) * 20px);
  bottom: calc(var(--lyd-s) * 20px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.badge-front__logo {
  font-size: calc(var(--lyd-s) * 22px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #111;
}

.badge-front__place {
  margin-top: calc(var(--lyd-s) * 3px);
  font-size: calc(var(--lyd-s) * 6px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lyd-ink-soft);
}

/* ---------------- Back face ---------------- */
.badge-back {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #1a100e;
}

/* Initials sit behind the photo and show through if the image is missing */
.badge-back__photo {
  position: relative;
  flex-shrink: 0;
  height: calc(var(--lyd-s) * 138px);
  margin: calc(var(--lyd-s) * 28px) calc(var(--lyd-s) * 14px) 0;
  overflow: hidden;
  border-radius: calc(var(--lyd-s) * 14px);
  background: linear-gradient(145deg, #8a4344, var(--lyd-ink) 60%, #5A2829);
}

.badge-back__photo::before {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: calc(var(--lyd-s) * 56px);
  font-style: italic;
  color: rgba(243, 236, 225, 0.85);
}

.badge-back__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  pointer-events: none;
}

.badge-back__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(var(--lyd-s) * 12px) calc(var(--lyd-s) * 16px) 0;
  overflow: hidden;
}

.badge-back__name {
  font-size: calc(var(--lyd-s) * 17px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.badge-back__role {
  margin-top: calc(var(--lyd-s) * 3px);
  font-size: calc(var(--lyd-s) * 7.5px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a100e;
}

.badge-back__meta {
  display: grid;
  gap: calc(var(--lyd-s) * 4px);
  margin-top: calc(var(--lyd-s) * 9px);
  padding-top: calc(var(--lyd-s) * 8px);
  border-top: 1px solid rgba(118, 53, 54, 0.18);
  list-style: none;
}

.badge-back__meta li {
  display: flex;
  align-items: center;
  gap: calc(var(--lyd-s) * 5px);
  font-size: calc(var(--lyd-s) * 7.5px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a100e;
}

.badge-back__meta svg {
  flex-shrink: 0;
  width: calc(var(--lyd-s) * 10px);
  height: calc(var(--lyd-s) * 10px);
  color: var(--lyd-ink);
}

.badge-back__label {
  margin-top: calc(var(--lyd-s) * 9px);
  font-size: calc(var(--lyd-s) * 6px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3b2624;
}

.badge-back__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--lyd-s) * 3px);
  margin-top: calc(var(--lyd-s) * 5px);
  list-style: none;
}

.badge-back__tags li {
  padding: calc(var(--lyd-s) * 3px) calc(var(--lyd-s) * 7px);
  border: 1px solid rgba(118, 53, 54, 0.45);
  border-radius: 999px;
  background: rgba(118, 53, 54, 0.08);
  font-size: calc(var(--lyd-s) * 7px);
  font-weight: 700;
  line-height: 1.2;
  color: #1a100e;
}

.badge-back__band {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--lyd-s) * 40px);
  margin-top: auto;
  padding: 0 calc(var(--lyd-s) * 16px);
  border-top-left-radius: calc(var(--lyd-s) * 28px);
  background: var(--lyd-ink);
  color: var(--lyd-card);
}

.badge-back__logo {
  font-size: calc(var(--lyd-s) * 16px);
  font-weight: 800;
  letter-spacing: -0.05em;
}

.badge-back__place {
  font-size: calc(var(--lyd-s) * 6px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------------- Flip button ---------------- */
.lanyard__flip {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(118, 53, 54, 0.22);
  border-radius: 999px;
  background: rgba(250, 247, 242, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-red);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.lanyard__flip:hover {
  border-color: var(--accent-red);
  background-color: var(--accent-red);
  color: var(--bg-cream);
}

.lanyard__flip:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
}

.lanyard__flip svg {
  width: 16px;
  height: 16px;
  transition: transform 0.5s ease;
}

.lanyard.is-back .lanyard__flip svg {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
  .lanyard__flip svg {
    transition: none;
  }
}

@media (max-width: 1023px) {
  .lanyard-duo {
    flex-direction: column;
    gap: 3rem;
  }

  .lanyard {
    flex: none;
    height: 640px;
  }
}

@media (max-width: 480px) {
  .especialistas-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .lanyard {
    height: 600px;
  }
}

/* ==========================================================================
   Ecossistema de Especialidades (Pinned Scroll Stack)
   ========================================================================== */
.method-block {
  --method-bg: var(--bg-cream);
  --method-ink: #000000;
  --method-ink-muted: rgba(0, 0, 0, 0.68);
  --method-rule: rgba(0, 0, 0, 0.14);
  --method-edge: clamp(1.25rem, 3.5vw, 4rem);
  position: relative;
  z-index: 5;
  background-color: var(--method-bg);
  color: var(--method-ink);
  box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.18);
}

/* Section title: first panel to slide over the sticky hero */
.curiosity-reel {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 6vw;
  text-align: center;
  background-color: var(--method-bg);
}

/* Plus Jakarta Sans runs much wider than the old serif, so the size is scaled down to keep "de Especialidades" on screen */
.curiosity-reel-title {
  font-family: var(--font-body);
  font-size: clamp(2.8rem, 7.5vw, 8rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #000000;
}

@media (max-width: 768px) {
  .curiosity-reel {
    padding: 2rem 1.25rem;
  }

  .curiosity-reel-title {
    font-size: clamp(2.2rem, 10vw, 4rem);
  }
}

/* Film grain tuned for a white background: black specks multiplied at low opacity */
.method-block::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
  opacity: 0.05;
}

/* Pinned stage */
.team-scroll {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-color: var(--method-bg);
}

/* Stage: card stack centered; label, counter and description pinned to their corners */
.team-scroll-inner {
  position: relative;
  height: 100%;
  max-width: 1720px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

/* Small top section label */
.team-index {
  position: absolute;
  top: clamp(1.5rem, 4vh, 3rem);
  left: var(--method-edge);
  right: var(--method-edge);
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--method-ink);
}

.team-index span {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
}

.team-index .team-index-number {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.8;
}

.team-index::after {
  content: '';
  flex: 1;
  height: 1px;
  margin-top: 0.5rem;
  margin-left: 0.75rem;
  background: var(--method-rule);
}

/* Oversized step counter: bottom-left, one line visible, track slides per step */
.team-counter {
  position: absolute;
  left: var(--method-edge);
  bottom: clamp(1.25rem, 5vh, 4rem);
  z-index: 3;
  height: 1em;
  overflow: hidden;
  font-size: clamp(6rem, 15vw, 15rem);
  line-height: 1;
  color: var(--method-ink);
}

.team-counter-track {
  display: block;
  will-change: transform;
}

.team-counter-track span {
  display: block;
  height: 1em;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

/* Centered stack: every card shares the same grid cell */
.team-stack {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(clamp(220px, 24vw, 380px), calc((100vh - 12rem) * 3 / 4));
  aspect-ratio: 3 / 4;
}

.team-card {
  grid-area: 1 / 1;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background-color: #f1f1f1;
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.06);
  will-change: transform, opacity;
}

.team-card:not(:first-child) {
  opacity: 0;
}

.team-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Active descriptions: top-right, stacked in one cell, cross-faded by GSAP */
.team-info {
  position: absolute;
  top: clamp(10rem, 15vh, 15rem);
  right: var(--method-edge);
  z-index: 3;
  display: grid;
  width: clamp(240px, 24vw, 360px);
}

.team-description {
  grid-area: 1 / 1;
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--method-ink);
}

.team-description:not(:first-child) {
  opacity: 0;
  visibility: hidden;
}

.team-desc-title {
  font-size: 1.25em;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #763536;
}

/* Breakpoints only scale sizes; counter stays bottom-left and description top-right */
@media (max-width: 1024px) {
  .team-counter {
    font-size: clamp(5rem, 13vw, 9rem);
  }

  .team-description {
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  .team-counter {
    font-size: clamp(4.5rem, 20vw, 7rem);
  }

  /* Description flows above the card; label and counter stay absolutely positioned */
  .team-scroll-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5rem 0 7rem 0;
  }

  /* Auto margins split the leftover height equally above and below the card.
     33rem = vertical padding + tallest description (~18rem) + ~3rem reserved for those two gaps */
  .team-stack {
    flex: none;
    margin-block: auto;
    width: min(58vw, calc((100vh - 33rem) * 3 / 4));
  }

  .team-info {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    width: 100%;
    padding: 0 calc(var(--method-edge) + 1rem);
  }

  /* Bottom-aligned in the shared cell so the gap above the card is the same for every description */
  .team-description {
    align-self: end;
    text-align: center;
    line-height: 1.55;
  }

  .team-desc-title {
    font-size: 2.2rem;
    line-height: 1.1;
    margin-bottom: 0.75rem;
  }

  .team-description p {
    font-size: 1.1rem;
  }
}

@media (min-width: 1024px) {
  /* Must match the .team-stack width so the text can be anchored to the image's right edge */
  .team-scroll-inner {
    --team-stack-w: min(clamp(220px, 24vw, 380px), calc((100vh - 12rem) * 3 / 4));
    --team-info-gap: 3.5rem;
    --team-stack-shift: 2rem;
  }

  /* .team-info is anchored to the unshifted stack, so this shift widens the image-to-text gap */
  .team-stack {
    transform: translateX(calc(-1 * var(--team-stack-shift)));
  }

  /* Stack is grid-centered in the stage, so 50% of the stage is the image's vertical center */
  .team-counter {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .team-info {
    left: calc(50% + var(--team-stack-w) / 2 + var(--team-info-gap));
    right: auto;
    width: min(
      clamp(300px, 28vw, 460px),
      calc(50% - var(--team-stack-w) / 2 - var(--team-info-gap) - var(--method-edge))
    );
  }

  .team-desc-title {
    font-size: clamp(2.25rem, 3.2vw, 3.2rem);
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .team-description p {
    font-size: 1.25rem;
    line-height: 1.7;
  }
}

/* ==========================================================================
   Dinâmica da Aula de Pilates (Solutions Grid)
   ========================================================================== */
.pilates-steps-section {
  position: relative;
  z-index: 5;
  padding: 80px 24px;
  background-color: var(--bg-cream);
}

.pilates-steps-container {
  max-width: 1020px;
  margin: 0 auto;
}

.pilates-section-header {
  margin-bottom: 56px;
  text-align: center;
}

.section-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.title-line {
  flex-shrink: 0;
  width: 40px;
  height: 1px;
  border: 0;
  background-color: #763536;
  opacity: 0.3;
}

.text-wine {
  color: #763536;
}

.pilates-section-title {
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-align: center;
  color: #111;
}

/* The global * reset would otherwise switch the span back to Inter */
.pilates-section-title .text-wine {
  font-family: inherit;
}

.pilates-section-subtitle {
  max-width: 720px;
  margin: 18px auto 0;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  text-align: center;
  color: #444;
}

.pilates-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 285px);
  gap: 18px;
  justify-content: center;
}

/* Below 1024px the wrapper disappears from layout so the cards stay direct items of .pilates-steps-grid */
.pilates-cards {
  display: contents;
}

.card-step-01 {
  grid-column: 1;
  grid-row: 1;
}

.card-step-02 {
  grid-column: 2;
  grid-row: 1;
}

.card-step-03 {
  grid-column: 1 / span 2;
  grid-row: 2;
}

/* No overflow: hidden here, so the blob can spill past the photo's edges.
   isolation keeps the blob's negative z-index behind the photo but above the section background. */
.pilates-photo-wrapper {
  position: relative;
  isolation: isolate;
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 100%;
  height: 100%;
  min-height: 578px;
}

.pilates-photo-wrapper::before {
  content: '';
  position: absolute;
  top: -5%;
  right: -5%;
  width: 100%;
  height: 100%;
  background-color: #763536;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  z-index: -1;
  transform: rotate(5deg);
}

.pilates-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 24px 50px -20px rgba(40, 20, 15, 0.35);
}

.pilates-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background-color: #ffffff;
  border: 1px solid rgba(118, 53, 54, 0.06);
  border-radius: 14px;
  padding: 26px 24px 24px;
  box-shadow: 0 12px 32px -14px rgba(60, 30, 20, 0.14), 0 2px 6px rgba(60, 30, 20, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.card-step-03 .pilates-card-description {
  max-width: 420px;
}

.pilates-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -16px rgba(60, 30, 20, 0.2), 0 4px 10px rgba(60, 30, 20, 0.05);
}

.pilates-card-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pilates-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  margin-bottom: 16px;
}

.pilates-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 3px;
  background: #763536;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.pilates-card-title {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #111;
}

.pilates-card-description {
  font-family: var(--font-sans);
  font-size: 0.93rem;
  line-height: 1.6;
  color: #444;
}

.pilates-brand {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #763536;
}

@media (max-width: 940px) {
  .pilates-steps-grid {
    grid-template-columns: 1fr 1fr;
  }

  .card-step-03.pilates-card {
    grid-column: 1 / span 2;
  }

  .pilates-photo-wrapper {
    grid-column: 1 / span 2;
    grid-row: 3;
    height: 420px;
    min-height: 0;
    margin-top: 12px;
  }

  /* Wide photo: smaller offsets keep the blob from running past the viewport edge */
  .pilates-photo-wrapper::before {
    top: -4%;
    right: -2.5%;
    transform: rotate(2deg);
  }
}

@media (max-width: 640px) {
  .pilates-steps-section {
    padding: 64px 20px;
  }

  .pilates-steps-grid {
    grid-template-columns: 1fr;
  }

  .card-step-01,
  .card-step-02,
  .card-step-03.pilates-card,
  .pilates-photo-wrapper {
    grid-column: 1;
    grid-row: auto;
  }

  .pilates-photo-wrapper {
    order: -1;
    height: 360px;
    margin-top: 12px;
    margin-bottom: 24px;
  }

  .title-line {
    width: 24px;
  }
}

@media (min-width: 1024px) {
  .pilates-steps-section {
    padding: 3rem 24px;
  }

  .pilates-section-header {
    margin-bottom: 2.5rem;
  }

  .pilates-steps-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: stretch;
  }

  .pilates-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-content: space-between;
    height: 100%;
    grid-column: 1;
    grid-row: 1;
  }

  .card-step-01,
  .card-step-02,
  .card-step-03 {
    grid-column: auto;
    grid-row: auto;
  }

  .card-step-03 {
    grid-column: span 2;
  }

  .pilates-card {
    padding: 1.5rem;
  }

  .pilates-photo-wrapper {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  /* Absolute so the photo's natural height can't grow the row: the cards alone set the height */
  .pilates-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px 150px 20px 150px;
  }
}

/* ==========================================================================
   Aula Experimental Gratuita (Hero Collage)
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 100px;
  background: var(--accent-red);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(118, 53, 54, 0.35);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover {
  background: var(--accent-red-hover);
  box-shadow: 0 10px 26px rgba(90, 40, 41, 0.45);
  transform: translateY(-2px);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 3px;
}

.experimental-class {
  --exp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --exp-muted: rgba(118, 53, 54, 0.08);
  position: relative;
  z-index: 5;
  padding: 80px 24px;
  background-color: var(--bg-cream);
  overflow: hidden;
}

.experimental-class,
.experimental-class * {
  font-family: var(--font-body);
}

.experimental-container {
  max-width: 1020px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* ---------------- Text column ---------------- */
.experimental-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.experimental-title {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #111;
}

.experimental-subtitle {
  max-width: 460px;
  margin-top: 1.5rem;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  color: #444;
}

.experimental-actions {
  margin-top: 2rem;
}

.experimental-note {
  max-width: 400px;
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #777;
}

.experimental-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.experimental-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.experimental-stat-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--exp-muted);
  color: var(--accent-red);
}

.experimental-stat-icon svg {
  width: 18px;
  height: 18px;
}

.experimental-stat-text {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111;
}

/* ---------------- Image collage ---------------- */
.experimental-collage {
  position: relative;
  height: 500px;
  width: 100%;
}

/* The white border reads as a photo frame; the image content is clipped to the inner radius */
.collage-img {
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0.5rem solid #ffffff;
  border-radius: 1rem;
  background-color: #f3eeeb;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.06);
  -webkit-user-drag: none;
  animation: expFloat 6s ease-in-out var(--float-delay, 0s) infinite;
}

.img-1 {
  --in-delay: 0.15s;
  --float-delay: 0s;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  width: 16.5rem;
  margin: 0 auto;
}

.img-2 {
  --in-delay: 0.35s;
  --float-delay: -2s;
  top: 33%;
  right: 0;
  z-index: 2;
  width: 14rem;
}

.img-3 {
  --in-delay: 0.55s;
  --float-delay: -4s;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 12rem;
}

.collage-shape {
  position: absolute;
  z-index: 0;
  animation: expFloat 3s ease-in-out var(--float-delay, 0s) infinite;
}

.shape-1 {
  top: -1rem;
  left: 22%;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(118, 53, 54, 0.12);
}

.shape-2 {
  --float-delay: -1s;
  bottom: 0.5rem;
  right: 22%;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: #efe6de;
}

.shape-3 {
  --float-delay: -2s;
  bottom: 30%;
  left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(118, 53, 54, 0.22);
}

/* ---------------- Entrance (armed by script.js when the section enters the viewport) ---------------- */
.experimental-class.is-pending .experimental-content > *,
.experimental-class.is-pending .collage-img {
  opacity: 0;
}

.experimental-class.is-visible .experimental-content > * {
  animation: expFadeInUp 0.8s var(--exp-ease) both;
}

.experimental-class.is-visible .experimental-content > :nth-child(2) { animation-delay: 0.12s; }
.experimental-class.is-visible .experimental-content > :nth-child(3) { animation-delay: 0.24s; }
.experimental-class.is-visible .experimental-content > :nth-child(4) { animation-delay: 0.34s; }
.experimental-class.is-visible .experimental-content > :nth-child(5) { animation-delay: 0.44s; }

/* Entrance animates opacity/scale and the float animates translate, so both run on the same element */
.experimental-class.is-visible .collage-img {
  animation:
    expImageIn 0.8s var(--exp-ease) var(--in-delay, 0s) both,
    expFloat 6s ease-in-out var(--float-delay, 0s) infinite;
}

@keyframes expFadeInUp {
  from {
    opacity: 0;
    translate: 0 24px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes expImageIn {
  from {
    opacity: 0;
    scale: 0.85;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes expFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collage-img,
  .collage-shape,
  .experimental-class.is-visible .collage-img,
  .experimental-class.is-visible .experimental-content > * {
    animation: none;
  }

  .experimental-class.is-pending .experimental-content > *,
  .experimental-class.is-pending .collage-img {
    opacity: 1;
  }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .experimental-container {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .experimental-content {
    align-items: center;
    text-align: center;
  }

  .experimental-subtitle,
  .experimental-note {
    margin-left: auto;
    margin-right: auto;
  }

  .experimental-stats {
    justify-content: center;
    width: 100%;
  }

  .experimental-collage {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .experimental-container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .experimental-collage {
    order: 1;
    margin-bottom: 2rem;
  }

  .experimental-content {
    order: 2;
  }
}

@media (max-width: 640px) {
  .experimental-class {
    padding: 64px 20px;
  }

  .experimental-collage {
    height: 400px;
  }

  .img-1 {
    width: 12rem;
  }

  .img-2 {
    width: 10rem;
  }

  .img-3 {
    width: 8.5rem;
  }

  .shape-1 {
    width: 3rem;
    height: 3rem;
  }

  .shape-2 {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ==========================================================================
   Planos de Pilates (Pricing)
   ========================================================================== */
.pricing-section {
  position: relative;
  z-index: 5;
  padding: 80px 24px 110px;
  background-color: var(--bg-cream);
}

.pricing-container {
  max-width: 1020px;
  margin: 0 auto;
}

.pricing-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 64px;
  text-align: center;
}

.pricing-title {
  font-family: var(--font-body);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #111;
}

.pricing-subtitle {
  max-width: 640px;
  margin: 18px auto 0;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: #444;
}

/* Period toggle */
.pricing-toggle {
  display: inline-flex;
  gap: 4px;
  margin-top: 32px;
  padding: 5px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.pricing-toggle-btn {
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: #111;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, box-shadow 0.3s ease;
}

.pricing-toggle-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.06);
}

.pricing-toggle-btn:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
}

.pricing-toggle-btn.active {
  background: var(--accent-red);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(118, 53, 54, 0.35);
}

/* Cards grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 30px 30px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pricing-card--featured {
  z-index: 1;
  border: 2px solid var(--accent-red);
  background: rgba(255, 255, 255, 0.92);
  transform: scale(1.05);
  box-shadow: 0 24px 50px -18px rgba(118, 53, 54, 0.35), 0 4px 14px rgba(0, 0, 0, 0.05);
}

.pricing-card--featured:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 30px 60px -18px rgba(118, 53, 54, 0.42), 0 6px 16px rgba(0, 0, 0, 0.06);
}

.pricing-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 16px;
  border-radius: 100px;
  background: var(--accent-red);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(118, 53, 54, 0.35);
}

.pricing-card-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 18px 0 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.price-value {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #111;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Toggled by script.js while the value is swapped */
.price-value.is-changing {
  opacity: 0;
  transform: translateY(-6px);
}

.price-suffix {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: #666;
}

.pricing-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.pricing-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  color: #333;
}

.pricing-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(118, 53, 54, 0.1);
  color: var(--accent-red);
}

.pricing-cta {
  display: block;
  margin-top: auto;
  padding: 0.9rem 1.25rem;
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: transparent;
  color: #111;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-cta:hover {
  border-color: #111;
  background: #111;
  color: #ffffff;
}

.pricing-card--featured .pricing-cta {
  border-color: var(--accent-red);
  background: var(--accent-red);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(118, 53, 54, 0.35);
}

.pricing-card--featured .pricing-cta:hover {
  border-color: var(--accent-red-hover);
  background: var(--accent-red-hover);
  box-shadow: 0 10px 26px rgba(90, 40, 41, 0.45);
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
    gap: 32px;
  }

  .pricing-card--featured,
  .pricing-card--featured:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .pricing-section {
    padding: 64px 20px 80px;
  }

  .pricing-header {
    margin-bottom: 48px;
  }
}

@media (max-width: 480px) {
  .pricing-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }

  .pricing-toggle-btn {
    padding: 0.6rem 0.25rem;
    font-size: 0.76rem;
  }

  .pricing-card {
    padding: 34px 22px 24px;
  }
}

/* ==========================================================================
   Unidades — Scroll Reveal + Cinematic Footer (curtain reveal)
   ========================================================================== */
/* Sits above the curtain so its rounded bottom edge falls over the footer being uncovered */
.footer-reveal-intro {
  position: relative;
  z-index: 6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 4rem 1.5rem;
  background-color: var(--bg-cream);
  border-radius: 0 0 2.5rem 2.5rem;
  overflow: hidden;
}

.scroll-reveal-text {
  position: relative;
  font-family: var(--font-body);
  font-size: clamp(2.6rem, 7vw, 7rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-align: center;
  text-wrap: balance;
  color: #000000;
}

.scroll-reveal-line {
  position: relative;
  width: 1px;
  height: 8rem;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--accent-red), transparent);
}

/* Glint travelling down the line; 433% = (line height + glint height) / glint height */
.scroll-reveal-line::after {
  content: '';
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, transparent, #000000, transparent);
  animation: scrollRevealCue 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollRevealCue {
  from { transform: translateY(0); }
  to { transform: translateY(433%); }
}

/* clip-path makes the fixed footer paint only inside this box, so scrolling "uncovers" it.
   The negative margin tucks it under the intro's rounded corners, which would otherwise expose the sticky hero;
   the extra height gives that overlap back so the intro fully clears the footer at the end of the page. */
.cinematic-curtain {
  --curtain-overlap: 2.5rem;
  position: relative;
  z-index: 5;
  height: calc(100vh + var(--curtain-overlap));
  margin-top: calc(-1 * var(--curtain-overlap));
  background-color: var(--bg-cream);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.cinematic-footer {
  --pill-bg-1: rgba(255, 255, 255, 0.72);
  --pill-bg-2: rgba(255, 255, 255, 0.35);
  --pill-shadow: rgba(60, 30, 20, 0.14);
  --pill-highlight: rgba(255, 255, 255, 0.95);
  --pill-inset-shadow: rgba(118, 53, 54, 0.06);
  --pill-border: rgba(0, 0, 0, 0.08);

  --pill-bg-1-hover: rgba(255, 255, 255, 0.95);
  --pill-bg-2-hover: rgba(255, 255, 255, 0.6);
  --pill-border-hover: rgba(118, 53, 54, 0.35);
  --pill-shadow-hover: rgba(118, 53, 54, 0.22);

  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-cream);
  color: #111111;
}

.cinematic-footer,
.cinematic-footer * {
  font-family: var(--font-body);
}

/* ---------------- Ambient layers ---------------- */
.footer-aurora {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 80vw;
  height: 60vh;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(118, 53, 54, 0.14) 0%,
    rgba(214, 190, 170, 0.3) 40%,
    transparent 70%
  );
  filter: blur(80px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: footer-breathe 8s ease-in-out infinite alternate;
}

.footer-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}

.footer-giant-bg-text {
  position: absolute;
  bottom: -5vh;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  font-size: 26vw;
  font-weight: 800;
  line-height: 0.75;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(118, 53, 54, 0.12);
  background: linear-gradient(180deg, rgba(118, 53, 54, 0.14) 0%, transparent 60%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------------- Diagonal marquee ---------------- */
.footer-marquee {
  position: absolute;
  top: 3rem;
  left: 0;
  z-index: 10;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
  border-block: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(250, 247, 242, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -20px rgba(60, 30, 20, 0.18);
  transform: rotate(-2deg) scale(1.1);
}

.footer-marquee-track {
  display: flex;
  width: max-content;
  animation: footer-scroll-marquee 40s linear infinite;
}

/* Side padding = half the gap, so the seam between the two groups matches the spacing inside them */
.footer-marquee-group {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 0 1.5rem;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.footer-marquee-star {
  color: var(--accent-red);
}

.footer-marquee-star--soft {
  color: rgba(118, 53, 54, 0.45);
}

/* ---------------- Main content ---------------- */
.footer-main {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 7.5rem 1.5rem 1.5rem;
}

.footer-intro {
  text-align: center;
}

.footer-heading {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.footer-text-glow {
  background: linear-gradient(180deg, #111111 0%, #111111 35%, var(--accent-red) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 30px rgba(118, 53, 54, 0.12));
}

/* ---------------- Glass surfaces ---------------- */
/* Transform is deliberately left out of the transitions: GSAP drives it on magnetic elements */
.footer-glass-pill {
  background: linear-gradient(145deg, var(--pill-bg-1) 0%, var(--pill-bg-2) 100%);
  border: 1px solid var(--pill-border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition:
    background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 10px 30px -10px var(--pill-shadow),
    inset 0 1px 1px var(--pill-highlight),
    inset 0 -1px 2px var(--pill-inset-shadow);
}

.footer-glass-pill:hover {
  background: linear-gradient(145deg, var(--pill-bg-1-hover) 0%, var(--pill-bg-2-hover) 100%);
  border-color: var(--pill-border-hover);
  color: #111111;
  box-shadow:
    0 20px 40px -10px var(--pill-shadow-hover),
    inset 0 1px 1px var(--pill-highlight);
}

/* ---------------- Location cards ---------------- */
/* Layout, sizing, radius, padding, background and shadow come from Tailwind classes in the markup */
.footer-location-card {
  border: 1px solid rgba(0, 0, 0, 0.04);
  text-align: left;
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The screenshots are much taller than the preview box, so --map-focus picks the vertical crop
   that keeps each Google Maps marker in view; the hover zoom is anchored on the same point */
.card-map-preview {
  --map-focus: 50% 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background-color: #EEF0F3;
}

.card-map-preview--cuiaba {
  --map-focus: 50% 60%;
}

.card-map-preview--centro {
  --map-focus: 50% 25%;
}

.card-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--map-focus);
  transform-origin: var(--map-focus);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-location-card:hover .card-map-img {
  transform: scale(1.06);
}

.footer-location-title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111111;
}

.footer-location-address {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555555;
}

.footer-location-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 0.5rem;
}

.footer-location-btn,
.footer-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
}

.footer-location-btn {
  color: #111111;
}

.footer-location-btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.footer-location-btn svg {
  color: var(--accent-red);
}

.footer-location-btn .footer-btn-arrow {
  width: 15px;
  height: 15px;
  color: #777777;
  transition: color 0.3s ease;
}

.footer-location-btn:hover .footer-btn-arrow {
  color: var(--accent-red);
}

/* Colors and shadow come from Tailwind classes in the markup; the transparent border keeps
   the height identical to the bordered Google Maps pill above it */
.footer-whatsapp-btn {
  border: 1px solid transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.footer-location-btn:focus-visible,
.footer-whatsapp-btn:focus-visible,
.footer-top-btn:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 3px;
}

/* ---------------- Bottom bar ---------------- */
.footer-bottom {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 0 3rem 2rem;
}

.footer-copyright {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666666;
}

.footer-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
  cursor: default;
}

.footer-badge-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666666;
}

.footer-heart {
  width: 15px;
  height: 15px;
  color: var(--accent-red);
  animation: footer-heartbeat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.footer-badge-brand {
  margin-left: 0.15rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111111;
}

.footer-top-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #555555;
  cursor: pointer;
}

.footer-top-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.footer-top-btn:hover svg {
  transform: translateY(-4px);
}

/* ---------------- Keyframes ---------------- */
@keyframes footer-breathe {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

@keyframes footer-scroll-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes footer-heartbeat {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(118, 53, 54, 0.35)); }
  15%, 45% { transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(118, 53, 54, 0.6)); }
  30% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-line::after,
  .footer-aurora,
  .footer-marquee-track,
  .footer-heart {
    animation: none;
  }
}

/* ---------------- Responsive ---------------- */
/* Keep in sync with the "curtain" query in script.js. On narrow or short viewports the content
   can outgrow 100vh, so the footer drops the fixed curtain and scrolls in normal flow. */
@media (max-width: 768px), (max-height: 840px) {
  .cinematic-curtain {
    height: auto;
    clip-path: none;
  }

  .cinematic-footer {
    position: relative;
    height: auto;
    min-height: 100vh;
  }

  .footer-main {
    padding-top: 8.5rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 768px) {
  .footer-reveal-intro {
    border-radius: 0 0 1.75rem 1.75rem;
  }

  .scroll-reveal-text {
    font-size: clamp(2.4rem, 11vw, 4rem);
  }

  .scroll-reveal-line {
    height: 6rem;
  }

  .footer-marquee {
    top: 2rem;
    padding: 0.8rem 0;
  }

  .footer-marquee-group {
    gap: 2rem;
    padding: 0 1rem;
    font-size: 0.7rem;
  }

  .footer-bottom {
    flex-direction: column;
    padding: 0 1.5rem 2rem;
  }

  .footer-badge {
    order: 1;
  }

  .footer-copyright {
    order: 2;
    text-align: center;
  }

  .footer-top-btn {
    order: 3;
  }
}

@media (max-width: 380px) {
  .footer-badge {
    padding: 0.65rem 1rem;
  }

  .footer-badge-label {
    letter-spacing: 0.1em;
  }
}