/* ============================================================
   Fire Sport Academia — Home (desktop, canvas de referência 1920px)
   Escala: 1rem = 10px em 1920px de viewport (100vw / 192).
   Todos os valores do Figma em px foram convertidos: px ÷ 10 = rem.
   ============================================================ */

:root {
  /* Cores */
  --laranja: #FF6325;
  --laranja-solido: #FF6315;
  --laranja-hl: #FF7500;
  --laranja-nome-aula: #FF7600;
  --laranja-cta-emagrece: #FF7C16;
  --selo: #F35F23;
  --grad-cta: linear-gradient(135deg, #FF6325 0%, #FF8B25 100%);
  --grad-emagrece: linear-gradient(93.6deg, #FE8925 0.9%, #F26915 95.5%);
  --grad-app-bar: linear-gradient(90deg, #FF6325 0%, #FE8A24 100%);
  --preto: #000000;
  --preto-0f: #0F0F0F;
  --preto-15: #151515;
  --btn-ghost: rgba(77, 77, 77, 0.38);
  --card-plano: rgba(0, 0, 0, 0.2);
  --caixa-preco: #F5F5F5;
  --branco: #FFFFFF;

  /* Tipografia */
  --font-poppins: 'Poppins', sans-serif;
  --font-montserrat: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: clamp(5px, calc(100vw / 192), 10px);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-poppins);
  color: var(--preto-0f);
  background: var(--branco);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; }

.container {
  width: 152rem;              /* 1520px: canvas 1920 - 2 × 200px de margem */
  margin-inline: auto;
  position: relative;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  border: 0;
  border-radius: 0.8rem;
  font-family: var(--font-montserrat);
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--branco);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover {
  transform: translateY(-0.4rem);
  filter: brightness(1.06);
  box-shadow: 0 1.4rem 3rem rgba(255, 97, 20, 0.35);
}
.btn:active {
  transform: translateY(-0.1rem) scale(0.98);
  box-shadow: 0 0.6rem 1.6rem rgba(255, 97, 20, 0.3);
}

.btn-primary {
  background: var(--grad-cta);
  filter: drop-shadow(0 0.4rem 0.2rem rgba(0, 0, 0, 0.25));
}
.btn-ghost { background: var(--btn-ghost); }
.btn-ghost:hover {
  background: rgba(77, 77, 77, 0.55);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.55); /* sombra escura (o glow laranja fica só no primário) */
}
.btn-ghost:active { box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.06rem;
  text-transform: uppercase;
  color: var(--laranja);
}

/* ============================================================
   Header
   ============================================================ */
/* Elementos exclusivos do layout mobile (ligados no @media do fim do arquivo) */
.menu-toggle,
.mobile-menu,
.app-mini-list,
.app-mockup {
  display: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 17.4rem;
  z-index: 100;
  transition: background 0.3s ease, height 0.3s ease;
}
.site-header .logo {
  position: absolute;
  left: 20.3rem;
  top: 6.2rem;
  transition: top 0.3s ease;
}
.site-header .logo img { width: 7.9rem; height: auto; }
.header-contact {
  position: absolute;
  right: 20rem;
  top: 8.7rem;
  font-size: 1.8rem;
  color: var(--branco);
  text-decoration: none;
  transition: top 0.3s ease, color 0.15s ease, transform 0.2s ease;
}
.header-contact:hover { color: var(--laranja); transform: translateY(-0.2rem); }

.site-header.scrolled {
  height: 11rem;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(8px);
}
.site-header.scrolled .logo { top: 3.2rem; }
.site-header.scrolled .header-contact { top: 5.4rem; }

/* ============================================================
   Dobra 01 — Home (Hero)
   ============================================================ */
.hero {
  height: 101.8rem;
  background: url('../img/dobra01-fundo-hero.webp') center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-inner {
  width: 78.2rem;
  text-align: center;
  padding-top: 8rem; /* compensa o header sobreposto */
}
.hero-title {
  margin-top: 2rem;
  font-size: 6.4rem;
  letter-spacing: -0.384rem;
  line-height: 0.85;
}
.hero-title span { display: block; padding: 0.5rem 0; }
.hero-title-line1 { font-weight: 400; color: var(--branco); }
.hero-title-line2 { font-weight: 800; color: var(--laranja); }
.hero-text {
  margin-top: 2.6rem;
  width: 78.2rem;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.04rem;
  color: var(--branco);
}
.hero-text strong { font-weight: 800; }
.hero-text .hl-laranja { color: var(--laranja-hl); }
.hero-actions {
  margin-top: 4.6rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}
.btn-hero-planos { width: 27.8rem; }
.btn-hero-wpp { width: 27.1rem; }
.btn-hero-app { width: 20.8rem; }

/* ============================================================
   Dobra 02 — Diferenciais
   ============================================================ */
.diferenciais {
  position: relative;
  width: 100%;
  min-height: 142rem;
  padding: 16.8rem 0 11.2rem;
  overflow: hidden;
  background: linear-gradient(110deg, #FF5B21 0%, #FF651F 48%, #FF8129 100%);
}
/* Tipografia decorativa laranja-escura ao fundo (fragmentos cortados nas bordas) */
.dif-bg-typo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.dif-bg-word {
  position: absolute;
  color: rgba(210, 59, 23, 0.28);
  font-size: 22.4rem;
  line-height: 0.76;
  font-weight: 800;
  letter-spacing: -1.6rem;
}
.dif-bg-esq-topo { top: -2.4rem; left: -3.6rem; }
.dif-bg-esq-meio { top: 15.2rem; left: 13.6rem; }
.dif-bg-esq-baixo { top: 31.6rem; left: -3.6rem; }
.dif-bg-dir-topo { top: 30rem; right: -16rem; font-size: 36rem; letter-spacing: -2.6rem; }
.dif-bg-dir-baixo { top: 62rem; right: -10rem; font-size: 36rem; letter-spacing: -2.6rem; }
.dif-content { z-index: 2; }
.dif-title {
  margin: 0 0 4rem;
  padding-right: 0.4rem;
  color: var(--branco);
  font-size: 3.2rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.1rem;
  text-align: right;
  white-space: nowrap;
}
.dif-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.dif-card {
  min-height: 15.2rem;
  padding: 3.4rem 3.2rem 2.8rem;
  background: #FBFBFB;
  border: 0;
  border-radius: 1rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.dif-card img {
  width: 4.4rem;
  height: 4.4rem;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 1.2rem;
}
.dif-card p {
  margin: 0;
  color: #111111;
  font-size: 2.2rem;
  line-height: 1.35;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}
.dif-card p span { font-weight: 400; }
.dif-card p b { font-weight: 700; }
.dif-foto-wrap {
  width: 100%;
  height: 72.5rem;
  overflow: hidden;
  border-radius: 1rem;
}
.dif-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 47%;
}
/* Fita métrica desfocada flutuando entre as dobras 02 e 03
   (≈40% sobre o laranja, 60% sobre o preto; vive na dobra 03, que não corta) */
.fita-transicao {
  position: absolute;
  z-index: 0;
  left: -2rem; /* colada na borda esquerda (o halo desfocado do PNG evita corte aparente) */
  top: -24rem;
  width: 80rem;
  transform: rotate(6deg); /* o JS reaplica esse giro base ao animar na rolagem */
  will-change: transform;
  pointer-events: none;
}

/* ============================================================
   Dobra 03 — Fire Emagrece
   ============================================================ */
.fire-section {
  position: relative;
  z-index: 2; /* a faixa e o card atravessam a divisa e pintam sobre a dobra seguinte */
  width: 100%;
  height: 103.4rem;
  background: radial-gradient(ellipse at 42% 48%, #292929 0%, #151515 38%, #050505 76%, #000000 100%);
}
/* Iluminação radial discreta no centro */
.fire-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 42% 48%, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.035) 28%, rgba(0, 0, 0, 0) 63%);
}
/* Divisor laranja exportado do Figma: cunha larga à esquerda afinando à direita,
   atravessa a divisa entre as dobras 03 e 04 */
.fire-strip {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 94.8rem;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.fire-container { height: 100%; }
.fire-panel {
  position: absolute;
  top: 19.6rem;
  left: 0;
  width: 100%;
  height: 54.4rem;
  padding: 6.2rem 6.4rem;
  z-index: 1;
  background: linear-gradient(110deg, rgba(5, 5, 5, 0.98) 0%, rgba(29, 29, 29, 0.98) 48%, rgba(7, 7, 7, 0.98) 100%);
  border: 0.1rem solid rgba(255, 105, 14, 0.75);
  border-radius: 1.7rem;
}
.fire-eyebrow {
  margin: 0 0 0.6rem;
  color: var(--branco);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.8rem;
  text-transform: uppercase;
}
.fire-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 8rem;
  line-height: 0.83;
  font-weight: 800;
  letter-spacing: -0.5rem;
  text-transform: uppercase;
}
.fire-title-orange { color: #FF5B13; }
.fire-title-white { color: var(--branco); }
.fire-description {
  width: 98rem;
  max-width: 65%;
  margin: 5.4rem 0 0;
  color: var(--branco);
  font-size: 2.2rem;
  line-height: 1.35;
  font-weight: 400;
}
.fire-description strong { font-weight: 700; }
.orange-highlight { color: #FF651C; }
.apple-asset {
  position: absolute;
  left: -12rem;
  top: 55.6rem; /* base da fruta assentada sobre o divisor; a faixa passa por trás (z 2 < 3) */
  width: 80rem;
  height: auto;
  z-index: 3;
  object-fit: contain;
  pointer-events: none;
}
.fire-offer-card {
  position: absolute;
  top: 60.8rem;
  right: 7.2rem;
  width: 79.8rem;
  min-height: 49rem;
  padding: 5.2rem 5.8rem 4.8rem;
  z-index: 4;
  background: linear-gradient(120deg, #FF8325 0%, #FF6A18 55%, #FF5A0D 100%);
  border-radius: 1.5rem;
  box-shadow: 0 2.2rem 4.6rem rgba(0, 0, 0, 0.42);
}
.offer-title {
  width: 60rem;
  margin: 0 0 2.6rem;
  color: var(--branco);
  font-size: 3.4rem;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.08rem;
}
.offer-list {
  margin: 0 0 3.4rem;
  padding-left: 2.8rem;
  list-style: disc;
  color: var(--branco);
  font-size: 1.8rem;
  line-height: 1.75;
}
.offer-list strong { font-weight: 700; }
.offer-button {
  width: 100%;
  height: 10.6rem;
  border: 0;
  border-radius: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--branco);
  color: #FF6718;
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.offer-button:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 1.4rem 2.8rem rgba(0, 0, 0, 0.22);
}
.offer-button:active { transform: translateY(-0.1rem) scale(0.98); }
.button-check {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #12BF45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.button-check svg { width: 1.1rem; height: auto; }

/* ============================================================
   Dobra 04 — Spinning
   ============================================================ */
.spinning-section {
  position: relative;
  width: 100%;
  min-height: 193.4rem;
  overflow: hidden;
  background: radial-gradient(ellipse at 48% 42%, #1C1C1C 0%, #101010 42%, #060606 75%, #030303 100%);
}
/* Palavras gigantes "spinning" em cinza escuro ao fundo */
.spinning-bg-word {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  color: rgba(255, 255, 255, 0.06);
  font-size: 50rem;
  line-height: 0.8;
  font-weight: 800;
  letter-spacing: -3.6rem;
  white-space: nowrap;
}
.spinning-bg-word-top { top: -2rem; left: -10.8rem; transform: rotate(-6deg); }
.spinning-bg-word-bottom { left: 66rem; bottom: -22.4rem; font-size: 46rem; opacity: 0.8; }
.spinning-container {
  z-index: 3;
  padding-top: 25rem; /* respiro entre o divisor e o título */
}
.spinning-title {
  position: relative;
  z-index: 4;
  width: max-content;
  margin: 0 auto 18.8rem; /* respiro entre o título e a fotografia */
  color: var(--branco);
  font-size: 8rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.4rem;
  text-align: center;
}
.spinning-title-mark {
  position: absolute;
  left: 50%;
  bottom: -3rem;
  width: 35.2rem;
  transform: translateX(-40%);
}
.spinning-gallery { width: 100%; }
.spinning-main-image {
  width: 100%;
  height: 62.4rem;
  overflow: hidden;
  border: 0.1rem solid #FF6512;
  border-radius: 1.2rem;
}
.spinning-main-image img,
.spinning-secondary-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spinning-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  margin-top: 1.6rem;
}
.spinning-secondary-image {
  height: 34.4rem;
  overflow: hidden;
  border: 0.1rem solid #FF6512;
  border-radius: 1.2rem;
}
.spinning-schedule {
  display: grid;
  grid-template-columns: 30rem repeat(4, 1fr);
  align-items: center;
  width: 100%;
  min-height: 19.2rem;
  margin-top: 1.8rem;
  background: linear-gradient(100deg, #151515 0%, #0D0D0D 52%, #151515 100%);
  border: 0.1rem solid #FF650F;
  border-radius: 1.8rem;
  overflow: hidden;
}
.schedule-heading {
  padding-left: 5.6rem;
  color: var(--branco);
  font-size: 3.4rem;
  line-height: 0.95;
  font-weight: 800;
}
.schedule-heading span { display: block; }
.schedule-heading strong { display: block; color: #FF650F; font-weight: 800; }
.schedule-item {
  position: relative;
  min-height: 12.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}
.schedule-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2.2rem;
  width: max(0.1rem, 1px); /* nunca some por arredondamento subpixel em zoom menor */
  height: 8.4rem;
  background: linear-gradient(to bottom, transparent, #FF650F 20%, #FF650F 80%, transparent);
}
.schedule-days {
  color: var(--branco);
  font-size: 1.4rem;
  line-height: 1.35;
  font-weight: 700;
  text-align: right;
}
/* Dias empilhados no desktop; no mobile viram linha única separada por vírgulas */
.schedule-days i,
.class-days i {
  display: block;
  font-style: normal;
}
.schedule-time {
  color: #FF650F;
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
}
.spinning-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  margin-top: 1.6rem;
}
.spinning-plan-status {
  height: 7rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: linear-gradient(90deg, rgba(44, 44, 44, 0.92), rgba(67, 67, 67, 0.72));
  border: 0.1rem solid rgba(255, 255, 255, 0.09);
  border-radius: 0.8rem;
  color: var(--branco);
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
}
.plan-status-icon { width: 1.8rem; height: 1.8rem; }
.spinning-plans-button {
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.8rem;
  background: linear-gradient(90deg, #FF5D19 0%, #FF8422 100%);
  color: var(--branco);
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.spinning-plans-button:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 1.4rem 3rem rgba(255, 97, 20, 0.35);
}
.spinning-plans-button:active { transform: translateY(-0.1rem) scale(0.98); }

/* ============================================================
   Dobra 05 — Aulas Coletivas
   ============================================================ */
.collective-classes-section {
  position: relative;
  width: 100%;
  height: 85.8rem;
  overflow: hidden;
  background: linear-gradient(110deg, #FF5B1D 0%, #FF6C20 48%, #FF8628 100%);
}
/* Palavra gigante em laranja mais escuro ao fundo */
.collective-bg-word {
  position: absolute;
  z-index: 0;
  top: 4.6rem;
  left: 18.6rem;
  color: rgba(198, 68, 15, 0.32);
  font-size: 15.6rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1rem;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.collective-classes-container {
  position: relative;
  z-index: 2;
  width: 162rem;
  margin: 0 auto;
  padding-top: 11.6rem;
}
.collective-title {
  position: relative;
  z-index: 3;
  margin: 0 0 2rem 5.4rem;
  color: var(--branco);
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.1rem;
}
.collective-title strong { font-weight: 800; }
.collective-title span { font-weight: 400; }
.collective-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 58.8rem;
  padding: 3.4rem 4rem;
  background: linear-gradient(110deg, #121212 0%, #1B1B1B 50%, #292929 100%);
  border-radius: 4rem;
}
.collective-row {
  display: grid;
  gap: 2rem;
}
.collective-row-top {
  grid-template-columns: 1fr 1fr 1.1fr 1.03fr;
}
.collective-row-bottom {
  grid-template-columns: 1fr 1fr 1.12fr;
  margin-top: 2rem;
}
.collective-row-top .class-card { height: 26.4rem; }
.collective-row-bottom .class-card { height: 23rem; }
.class-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  overflow: hidden;
  background: linear-gradient(100deg, #090909 0%, #151515 58%, #242424 100%);
  border: 0.1rem solid rgba(255, 101, 15, 0.72);
  border-radius: 2rem;
}
.class-card-image {
  width: 18rem;
  height: 100%;
  overflow: hidden;
  border-radius: 1.8rem;
  flex-shrink: 0;
}
.collective-row-bottom .class-card-image { width: 18.4rem; }
.class-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.class-card-content {
  position: relative;
  padding: 1.8rem 1.6rem 1.4rem;
  min-width: 0;
}
.class-card-title {
  margin: 0 0 1.8rem;
  color: var(--branco);
  font-size: 2rem;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04rem;
}
.class-card-title strong {
  color: #FF650F;
  font-weight: 800;
}
.class-time-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.class-time-row {
  display: flex;
  align-items: flex-end;
  gap: 1.4rem;
}
.class-days {
  min-width: 2.6rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.05;
  font-weight: 400;
  text-transform: capitalize;
}
.class-hour {
  color: var(--branco);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 800;
}

/* ============================================================
   Dobra 06 — Planos
   ============================================================ */
.plans-section {
  position: relative;
  width: 100%;
  height: 112rem; /* +5.2rem sobre o Figma pra acomodar os botões de contratar */
  min-height: 112rem;
  overflow: hidden;
  background-image: url('../img/dobra06-fundo-planos.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* O asset já vem escurecido do Figma — camadas extras suaves, só para vinheta/contraste */
.plans-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.24) 35%, rgba(0, 0, 0, 0.20) 65%, rgba(0, 0, 0, 0.42) 100%);
}
.plans-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.035) 0%, rgba(0, 0, 0, 0.10) 45%, rgba(0, 0, 0, 0.30) 100%);
}
.plans-container {
  position: relative;
  z-index: 2;
  width: 162rem;
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 38rem 56rem 56rem;
}
.plans-question-column {
  display: flex;
  align-items: center;
}
.plans-question {
  margin-top: 2.4rem;
  color: var(--branco);
  font-size: 3.2rem;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.08rem;
}
.plans-question span,
.plans-question strong,
.plans-question em {
  display: block;
}
.plans-question strong { font-weight: 800; }
.plans-question em {
  color: #FF5F18;
  font-style: normal;
  font-weight: 800;
}
.plan-column {
  position: relative;
  height: 100%;
  padding: 16.8rem 7.2rem 0;
  display: flex; /* coluna: permite fixar o botão de contratar na base das duas colunas */
  flex-direction: column;
  border-left: 0.1rem solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.40) 0%, rgba(8, 8, 8, 0.33) 100%);
  backdrop-filter: blur(2px);
}
.plan-contract-button {
  margin-top: auto; /* alinha os botões das duas colunas na mesma linha */
  /* 6.4rem centraliza o botão no vão da coluna Premium (19.1rem livres − 7rem
     de botão, descontando a faixa laranja que invade ~1rem da base) */
  margin-bottom: 6.4rem;
  width: 100%;
  flex-shrink: 0;
}
.plan-column:last-child {
  border-right: 0.1rem solid rgba(255, 255, 255, 0.08);
}
.plan-eyebrow {
  margin: 0 0 0.6rem;
  color: var(--branco);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1rem;
  text-transform: uppercase;
}
.plan-name {
  margin: 0;
  color: #FF5B19;
  font-size: 8.6rem;
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.2rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-name--premium { letter-spacing: -0.35rem; }
.plan-feature-main {
  position: relative;
  margin: 5rem 0 4rem;
  padding-left: 2.6rem;
  color: #FF5D19;
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 700;
}
.plan-feature-main::before,
.plan-feature-secondary::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}
.plan-feature-secondary {
  position: relative;
  margin: 0 0 5.4rem;
  padding-left: 2.6rem;
  color: var(--branco);
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 400;
}
.plan-feature-secondary strong { font-weight: 800; }
.plan-price-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.plan-price-card {
  width: 100%;
  height: 11rem;
  display: grid;
  grid-template-columns: 16.4rem 1fr;
  align-items: center;
  padding: 0 2.6rem;
  background: #F7F7F7;
  border-radius: 1rem;
}
.price-label {
  width: max-content;
  min-width: 11.6rem;
  padding: 1rem 1.6rem;
  background: #FF5B1B;
  color: var(--branco);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  border-radius: 0.4rem;
  transform: rotate(-2deg);
}
.price-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  color: #111111;
  white-space: nowrap;
  font-family: var(--font-montserrat);
}
.price-currency {
  margin-right: 0.4rem;
  font-size: 3rem;
  font-weight: 400;
}
.price-main {
  font-size: 6.8rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.4rem;
}
.price-cents {
  font-size: 3rem;
  font-weight: 400;
}
.plan-note {
  margin-top: 2.6rem;
  color: var(--branco);
  text-align: center;
}
.plan-note strong {
  display: block;
  font-size: 1.4rem;
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
}
.plan-note span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
}
.plan-note-premium {
  height: 7.6rem;
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 0.8rem;
  color: var(--branco);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
}
/* Faixa laranja fina e inclinada na base */
.plans-bottom-strip {
  position: absolute;
  z-index: 5;
  left: -2%;
  bottom: -2.6rem;
  width: 104%;
  height: 3.6rem;
  background: linear-gradient(90deg, #FF5A16 0%, #FF731D 55%, #FF5B15 100%);
  transform: rotate(0.6deg);
  transform-origin: center;
}

/* ============================================================
   Dobra 07 — Estrutura
   ============================================================ */
.structure-section {
  position: relative;
  width: 100%;
  height: 122.8rem;
  min-height: 122.8rem;
  overflow: hidden;
  background: radial-gradient(ellipse at 48% 42%, #252525 0%, #181818 38%, #0D0D0D 72%, #080808 100%);
}
/* Palavra "estrutura" gigante, mais escura que o fundo */
.structure-bg-word {
  position: absolute;
  z-index: 0;
  top: 8.6rem;
  left: 35.2rem;
  color: rgba(0, 0, 0, 0.48);
  font-size: 17.6rem;
  line-height: 0.8;
  font-weight: 800;
  letter-spacing: -1.2rem;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.structure-container {
  position: relative;
  z-index: 2;
  width: min(190.6rem, 100%);
  margin: 0 auto;
  padding-top: 15.6rem;
}
.structure-title {
  position: relative;
  z-index: 3;
  margin: 0 0 6.2rem 19.4rem;
  color: var(--branco);
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.06rem;
}
.structure-title strong { font-weight: 800; }
.structure-title span { font-weight: 400; }
/* Carrosséis em loop infinito, 2 linhas de 3 fotos (autoplay + arraste; trilha duplicada via JS) */
.structure-carousel {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.structure-carousel.is-dragging { cursor: grabbing; }
.structure-carousel + .structure-carousel { margin-top: 1.6rem; }
.structure-track {
  display: flex;
  gap: 1.6rem;
  width: max-content;
  will-change: transform;
}
.structure-slide {
  flex: 0 0 auto;
  width: 62.4rem; /* 3 fotos visíveis por linha: 3×62.4 + 2 vãos de 1.6 = 190.4rem */
  height: 38.8rem;
  margin: 0;
  overflow: hidden;
  border-radius: 1.4rem;
  background: #111111;
}
.structure-carousel--baixo .structure-slide { height: 42.2rem; }
.structure-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}


/* ============================================================
   Dobra 08 — App
   ============================================================ */
.app-section { position: relative; }
/* Região clara: o asset já traz os mockups dos celulares à esquerda */
.app-light {
  position: relative;
  height: 116rem;
  background: url('../img/dobra08-fundo-app.webp') top center / cover no-repeat;
  overflow: hidden;
}
.app-inner { height: 100%; }
.app-heading {
  position: absolute;
  top: 22.4rem;
  right: 0;
  width: 66rem;
  text-align: right;
}
.app-heading h2 {
  color: #FF6417;
  font-size: 5.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.16rem;
}
.app-heading p {
  margin-top: 2.4rem;
  color: var(--preto-15);
  font-size: 2.2rem;
  line-height: 1.5;
}
.app-heading p b { font-weight: 800; }
/* Barra de funcionalidades sobreposta à área dos celulares */
.app-features {
  position: absolute;
  top: 49.4rem;
  right: 0;
  width: 97.4rem;
  height: 22rem;
  padding: 0 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--grad-app-bar);
  border-radius: 4rem;
  box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.10);
}
.app-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  color: var(--branco);
  text-align: center;
}
.app-feature img { height: 4rem; width: auto; }
.app-feature p { font-size: 2rem; line-height: 1.3; font-weight: 400; }
.app-feature p b { font-weight: 800; }
.app-social {
  /* Filho direto da .app-section: alinhado à borda direita do container central */
  position: absolute;
  top: 77.6rem;
  right: calc((100% - 152rem) / 2);
  text-align: right;
}
.app-social-kicker {
  font-size: 2.2rem;
  color: var(--preto-0f);
}
.app-social-kicker b { font-weight: 800; }
.app-social-title {
  margin-top: 0.4rem;
  font-size: 4.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.14rem;
  color: #FF6417;
}
.app-social-icons {
  margin-top: 2.4rem;
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}
.app-social-icons a { transition: transform 0.15s ease; }
.app-social-icons a:hover { transform: translateY(-0.3rem); }
.app-social-icons img {
  width: 3.8rem;
  height: 3.8rem;
}
/* Faixa escura inferior, atrás da base do card laranja */
.app-dark {
  height: 50.2rem;
  background: #0A0A0A;
}
/* Card "Completa para você!" sobre a transição claro/escuro */
.complete-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 104.6rem;
  width: 151.4rem;
  min-height: 55.4rem;
  padding: 4.4rem 7.4rem 4.4rem 6rem;
  display: grid;
  grid-template-columns: 62rem 1fr;
  gap: 14rem;
  align-items: center;
  background: #FF6114;
  border-radius: 4rem;
  overflow: hidden;
  z-index: 5;
}
/* Tipografia decorativa em laranja mais escuro, cortada na base do card */
.complete-card-bg {
  position: absolute;
  left: 4rem;
  bottom: -13rem;
  color: rgba(217, 71, 8, 0.35);
  font-size: 30rem;
  line-height: 0.8;
  font-weight: 800;
  letter-spacing: -2rem;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.complete-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.complete-pill {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  height: 4.2rem;
  padding: 0 1.8rem;
  background: var(--branco);
  border-radius: 3.9rem;
}
.complete-pill img { width: 2.2rem; height: 2.2rem; }
.complete-pill p {
  font-size: 2rem;
  font-weight: 400;
  color: var(--preto-0f);
  white-space: nowrap;
}
.complete-pill p b { font-weight: 700; }
.complete-right {
  position: relative;
  color: var(--branco);
}
.complete-right h3 {
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1.05;
}
.complete-right p {
  margin-top: 2rem;
  font-size: 2.2rem;
  line-height: 1.45;
}
.complete-right p b { font-weight: 800; }

/* ============================================================
   Modal — "baixe o app"
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal.open { visibility: visible; opacity: 1; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
.modal-card {
  position: relative;
  width: 56rem;
  background: var(--branco);
  border-radius: 2rem;
  padding: 5rem 5.6rem;
  text-align: center;
  transform: translateY(1rem);
  transition: transform 0.2s ease;
}
.modal.open .modal-card { transform: translateY(0); }
.modal-close {
  position: absolute;
  top: 1.6rem;
  right: 2.2rem;
  border: 0;
  background: none;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--preto-0f);
  cursor: pointer;
}
.modal-close:hover { color: var(--laranja); }
.modal-card h3 {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.08rem;
  color: var(--preto-0f);
}
.modal-card > p {
  margin-top: 1rem;
  font-size: 1.7rem;
  color: #555555;
}
.modal-actions {
  margin-top: 3.2rem;
  display: flex;
  gap: 1.2rem;
}
.store-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 6.4rem;
  background: var(--preto-0f);
  color: var(--branco);
  border-radius: 1.2rem;
  font-family: var(--font-montserrat);
  font-size: 1.7rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.store-btn:hover {
  background: var(--laranja-solido);
  transform: translateY(-0.3rem);
  box-shadow: 0 1rem 2.2rem rgba(255, 97, 20, 0.35);
}

/* Trava o scroll do body com o modal aberto */
body.modal-open { overflow: hidden; }

/* Âncora dos planos considerando o header fixo */
#planos { scroll-margin-top: 0; }

/* ============================================================
   Raios desfocados sobre as transições entre dobras
   (wrappers de altura zero entre as seções; z 3 pinta por cima)
   ============================================================ */
.raio-transicao {
  position: relative;
  z-index: 3;
  height: 0;
  pointer-events: none;
}
.raio-transicao img {
  position: absolute;
  width: auto;
  user-select: none;
  will-change: transform; /* o parallax da rolagem move via transform (main.js) */
}
.raio-spinning-coletivas img { left: -10rem; top: -56rem; height: 84rem; }
.raio-coletivas-planos img { right: -6rem; top: -36rem; height: 110rem; }
.raio-planos-estrutura img { left: -12rem; top: -72rem; height: 100rem; }
.raio-estrutura-app img { right: -5rem; top: -40rem; height: 108rem; }

/* ============================================================
   Animações: entradas suaves, hovers e flutuações
   ============================================================ */
/* Entrada ao rolar: as classes são aplicadas via JS (sem JS nada fica oculto) */
.anima-entrada {
  opacity: 0;
  transform: translateY(3.2rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--atraso-entrada, 0s);
}
.anima-entrada.visivel {
  opacity: 1;
  transform: translateY(0);
}
/* Cards respondem ao mouse */
.dif-card,
.class-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dif-card:hover {
  transform: translateY(-0.6rem);
  box-shadow: 0 1.8rem 3.6rem rgba(0, 0, 0, 0.45);
}
.class-card:hover {
  transform: translateY(-0.6rem);
  /* o painel de fundo é quase preto — a sombra precisa ser bem densa pra aparecer */
  box-shadow: 0 2.4rem 4.2rem rgba(0, 0, 0, 0.92);
}
/* Zoom suave nas fotos dos carrosséis da estrutura */
.structure-slide img { transition: transform 0.6s ease; }
.structure-slide:hover img { transform: scale(1.05); }
/* Maçã da dobra 03 flutua devagar */
@keyframes flutuar-maca {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.4rem); }
}
.apple-asset { animation: flutuar-maca 6s ease-in-out infinite; }
/* Quem prefere menos movimento não recebe nada disso */
@media (prefers-reduced-motion: reduce) {
  .anima-entrada { opacity: 1; transform: none; transition: none; }
  .apple-asset { animation: none; }
  .structure-slide img { transition: none; }
  .structure-slide:hover img { transform: none; }
}

/* ============================================================
   Layout MOBILE (Figma "Fire sport site - mobile", canvas 390px)
   1rem = 10px no canvas de 390 → medidas do Figma ÷10 = rem
   ============================================================ */
@media (max-width: 767px) {
  html { font-size: clamp(6.5px, calc(100vw / 39), 11px); }

  .container { width: 31.2rem; }

  /* ---------- Header + menu hambúrguer ---------- */
  .site-header,
  .site-header.scrolled {
    height: 7.2rem;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(8px);
  }
  .site-header .logo,
  .site-header.scrolled .logo { left: 2rem; top: 2rem; }
  .site-header .logo img { width: 5rem; }
  .header-contact { display: none; }
  .menu-toggle {
    display: flex;
    position: absolute;
    right: 2rem;
    top: 2.4rem;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: 100%;
    height: 0.25rem;
    border-radius: 0.25rem;
    background: var(--branco);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .menu-toggle.open span:nth-child(1) { transform: translateY(0.75rem) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-0.75rem) rotate(-45deg); }
  .mobile-menu {
    display: block;
    position: fixed;
    top: 7.2rem;
    left: 0;
    right: 0;
    z-index: 99;
    padding: 0.6rem 2rem 1.6rem;
    background: rgba(8, 8, 8, 0.97);
    transform: translateY(-110%);
    transition: transform 0.3s ease;
  }
  .mobile-menu.open { transform: translateY(0); }
  .mobile-menu a {
    display: block;
    padding: 1.3rem 0;
    color: var(--branco);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
  }
  .mobile-menu a:last-child { border-bottom: 0; }

  /* ---------- Dobra 01 — Hero ---------- */
  .hero {
    height: auto;
    min-height: 61.2rem;
    padding: 11rem 0 5rem;
    background-position: 62% center;
  }
  .hero-inner { width: 31.2rem; padding-top: 0; }
  .eyebrow { font-size: 1.3rem; letter-spacing: 0; }
  .hero-title {
    margin-top: 1.4rem;
    font-size: 2.9rem;
    line-height: 1.1;
    letter-spacing: -0.08rem;
  }
  .hero-title span { display: inline; padding: 0; }
  .hero-title-line1 { font-weight: 800; }
  .hero-text {
    width: 100%;
    margin-top: 2rem;
    font-size: 1.2rem;
    line-height: 1.55;
    letter-spacing: 0;
  }
  .hero-actions { margin-top: 3.2rem; flex-direction: column; gap: 0.9rem; }
  .hero-actions .btn {
    width: 100%;
    height: 4.6rem;
    font-size: 1.2rem;
    border-radius: 1rem;
  }

  /* ---------- Dobra 02 — Diferenciais ---------- */
  .diferenciais { min-height: 0; padding: 3.6rem 0; }
  .dif-bg-typo { display: none; }
  .dif-title {
    width: 24rem;
    margin: 0 auto 3.4rem;
    padding: 0;
    font-size: 1.7rem;
    text-align: center;
    white-space: normal;
  }
  .dif-grid { grid-template-columns: 1fr; gap: 0.6rem; margin-bottom: 1rem; }
  .dif-card {
    min-height: 10rem;
    padding: 1.8rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
  }
  .dif-card img { width: 3rem; height: 3rem; margin: 0; object-position: center; }
  .dif-card p { font-size: 1.4rem; text-align: center; }
  .dif-foto-wrap { height: 19rem; }

  /* ---------- Dobra 03 — Fire Emagrece ---------- */
  .fire-section { height: auto; padding: 3.4rem 0; background: #000; }
  .fire-section::before { display: none; }
  .fita-transicao,
  .fire-strip,
  .apple-asset { display: none; }
  .fire-container {
    height: auto;
    padding: 3rem 3.2rem 3.2rem;
    background: linear-gradient(160deg, #FF7C22 0%, #FF6317 55%, #FF5A0D 100%);
    border-radius: 2rem;
  }
  .fire-panel {
    position: static;
    width: 100%;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .fire-eyebrow { font-size: 1.1rem; letter-spacing: 0.55rem; }
  .fire-title { font-size: 3.2rem; line-height: 0.95; letter-spacing: -0.05rem; }
  .fire-title-orange { color: var(--branco); }
  .fire-description {
    width: 100%;
    max-width: none;
    margin: 2.6rem 0 0;
    font-size: 1.15rem;
    line-height: 1.6;
    text-transform: uppercase;
    font-weight: 400;
  }
  .fire-description .orange-highlight { color: var(--branco); }
  .fire-offer-card {
    position: static;
    width: 100%;
    min-height: 0;
    margin-top: 2.4rem;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .offer-title { display: none; }
  .offer-list { margin: 0 0 2.8rem; padding-left: 1.8rem; font-size: 1.2rem; line-height: 1.75; }
  .offer-button { height: 4.6rem; border-radius: 2.6rem; font-size: 1.1rem; gap: 1.2rem; }
  .button-check { width: 1.8rem; height: 1.8rem; }

  /* ---------- Dobra 04 — Spinning ---------- */
  /* Fundo chapado mais claro que o preto do Fire Emagrece (contraste entre as dobras, como no Figma) */
  .spinning-section { min-height: 0; padding: 3.4rem 0 4rem; background: #1E1E1E; }
  .spinning-bg-word { display: none; }
  .spinning-container { padding-top: 0; min-height: 0; }
  .spinning-title { margin: 0 auto 2.8rem; font-size: 1.7rem; letter-spacing: -0.05rem; }
  .spinning-title-mark { display: none; }
  .spinning-main-image { height: 16rem; border-radius: 1rem; }
  .spinning-secondary-grid { grid-template-columns: 1fr; gap: 0.9rem; margin-top: 0.9rem; }
  .spinning-secondary-image { height: 16rem; border-radius: 1rem; }
  .spinning-schedule {
    display: block;
    min-height: 0;
    margin-top: 0.9rem;
    padding: 2rem;
    border-radius: 1rem;
  }
  .schedule-heading { padding: 0 0 1.4rem; font-size: 1.6rem; }
  .schedule-heading span,
  .schedule-heading strong { display: inline; color: #FF650F; }
  .schedule-heading span::after { content: " "; } /* espaço entre "Horários de" e "Spinning" quando inline */
  .schedule-item {
    min-height: 0;
    padding: 0.45rem 0;
    justify-content: space-between;
    gap: 1rem;
  }
  .schedule-item:not(:last-child)::after { display: none; }
  .schedule-days { font-size: 1.2rem; font-weight: 400; text-align: left; }
  .schedule-days i { display: inline; }
  .schedule-days i + i::before { content: ", "; }
  .schedule-time { font-size: 1.2rem; }
  .spinning-actions { grid-template-columns: 1fr; gap: 0.9rem; margin-top: 1.8rem; }
  .spinning-plan-status { height: 4.6rem; gap: 1rem; font-size: 1.1rem; border-radius: 1rem; }
  .plan-status-icon { display: none; }
  .spinning-plans-button { height: 4.6rem; font-size: 1.2rem; border-radius: 1rem; }

  /* ---------- Dobra 05 — Aulas Coletivas ---------- */
  .collective-classes-section { height: auto; padding: 3.4rem 0 4.4rem; }
  .collective-bg-word { display: none; }
  .collective-classes-container { width: 31.2rem; padding-top: 0; }
  .collective-title { margin: 0 0 2.8rem; font-size: 1.6rem; text-align: center; }
  .collective-panel { height: auto; padding: 1.5rem 1.6rem; border-radius: 2rem; }
  .collective-row,
  .collective-row-top,
  .collective-row-bottom { display: block; margin-top: 0; }
  .collective-row-top .class-card,
  .collective-row-bottom .class-card { height: 16.6rem; }
  .class-card { margin-bottom: 1.1rem; border-radius: 1.6rem; }
  .collective-row-bottom .class-card:last-child { margin-bottom: 0; }
  .class-card-image,
  .collective-row-bottom .class-card-image { width: 11.6rem; }
  .class-card-content { padding: 1.8rem 1.8rem 1.4rem; }
  .class-card-title { margin-bottom: 1.6rem; font-size: 1.5rem; }
  .class-time-list { gap: 0.9rem; }
  .class-time-row { align-items: baseline; gap: 1rem; }
  .class-days { flex: 1 1 auto; min-width: 0; font-size: 1rem; }
  .class-days i { display: inline; }
  .class-days i + i::before { content: ", "; }
  .class-hour { min-width: 4.6rem; font-size: 1.2rem; }

  /* ---------- Dobra 06 — Planos ---------- */
  .plans-section {
    height: auto;
    min-height: 0;
    padding: 4rem 0 4.6rem;
    background-image: none;
    background-color: #0A0A0A;
  }
  .plans-section::before { display: none; }
  .plans-section::after { display: none; }
  .plans-container { width: 31.2rem; height: auto; display: block; }
  .plans-question-column { display: block; }
  .plans-question {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    text-align: center;
    font-weight: 800;
  }
  .plans-question span,
  .plans-question strong { display: inline; font-weight: 800; }
  .plans-question em { display: block; }
  .plan-column {
    height: auto;
    margin-top: 3rem;
    padding: 3rem 3.2rem 3.2rem;
    display: block;
    background: #0D0D0D;
    border: 0.1rem solid #FF6512;
    border-radius: 2rem;
    backdrop-filter: none;
  }
  .plan-column:last-child { border-right: 0.1rem solid #FF6512; }
  .plan-eyebrow { margin-bottom: 0.4rem; font-size: 1.1rem; letter-spacing: 0.55rem; }
  .plan-name { font-size: 2.6rem; letter-spacing: 0; }
  .plan-name--premium { font-size: 3.4rem; letter-spacing: -0.05rem; }
  .plan-feature-main { margin: 1.8rem 0 1.2rem; padding-left: 1.4rem; font-size: 1.2rem; line-height: 1.4; }
  .plan-feature-main br { display: none; }
  .plan-feature-secondary { margin-bottom: 2rem; padding-left: 1.4rem; font-size: 1.2rem; }
  .plan-price-list { gap: 0.5rem; }
  .plan-price-card {
    height: 5.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0;
    border-radius: 0.8rem;
  }
  .price-label {
    min-width: 0;
    padding: 0;
    background: none;
    color: #FF5B1B;
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    transform: none;
  }
  .price-value { justify-content: center; }
  .price-currency { font-size: 1.3rem; letter-spacing: 0; }
  .price-main { font-size: 1.9rem; letter-spacing: 0; }
  .price-cents { font-size: 1.3rem; letter-spacing: 0; }
  .plan-note { margin-top: 1.4rem; }
  .plan-note strong { font-size: 1.1rem; }
  .plan-note span { font-size: 0.8rem; margin-top: 0.3rem; }
  .plan-note-premium { height: 4.6rem; margin-top: 0.5rem; font-size: 1.1rem; border-radius: 0.8rem; }
  .plan-contract-button { margin: 2rem 0 0; height: 4.6rem; font-size: 1.2rem; border-radius: 1rem; }
  .plans-bottom-strip { display: none; }

  /* ---------- Raios entre dobras: fora do mobile ---------- */
  .raio-transicao { display: none; }

  /* ---------- Dobra 07 — Estrutura (fotos empilhadas) ---------- */
  .structure-section { height: auto; min-height: 0; padding: 3.8rem 0 0; }
  .structure-bg-word { display: none; }
  .structure-container { width: 31.2rem; padding-top: 0; }
  .structure-title { margin: 0 0 2.2rem; font-size: 1.6rem; text-align: center; }
  .structure-carousel { overflow: visible; cursor: default; touch-action: auto; }
  .structure-carousel + .structure-carousel { margin-top: 0.6rem; }
  .structure-track {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    transform: none !important;
  }
  .structure-slide,
  .structure-carousel--baixo .structure-slide { width: 100%; height: 17rem; border-radius: 1rem; }
  .structure-container::after {
    content: "";
    display: block;
    height: 0.1rem;
    margin-top: 2.4rem;
    background: rgba(255, 255, 255, 0.16);
  }

  /* ---------- Dobra 08 — App + Completa ---------- */
  .app-section { background: #0A0A0A; }
  .app-light { height: auto; padding: 2.4rem 0 3.6rem; background: #0A0A0A; overflow: visible; }
  .app-inner { height: auto; }
  .app-heading {
    position: static;
    width: 100%;
    padding: 2.4rem;
    text-align: left;
    background: linear-gradient(150deg, #FF7C22 0%, #FF5F12 100%);
    border-radius: 2rem;
  }
  .app-heading h2 { color: var(--branco); font-size: 1.6rem; letter-spacing: 0; }
  .app-heading p { margin-top: 1.6rem; color: var(--branco); font-size: 1.2rem; line-height: 1.5; }
  .app-mini-list { display: block; margin: 1.8rem 0 0; padding: 0; list-style: none; }
  .app-mini-list li {
    position: relative;
    padding-left: 1.7rem;
    color: var(--branco);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.8;
  }
  .app-mini-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--branco);
  }
  .app-mockup {
    display: block;
    width: 100%;
    height: auto;
    margin: 1.9rem 0;
    border-radius: 1.6rem;
  }
  .app-features {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    padding: 1.8rem 2.6rem;
    background: linear-gradient(150deg, #FF7C22 0%, #FF5F12 100%);
    border-radius: 2rem;
  }
  .app-feature {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.4rem;
    padding: 0.9rem 0;
    text-align: left;
  }
  .app-feature img { width: 1.6rem; height: 1.6rem; filter: brightness(0) invert(1); }
  .app-feature p { font-size: 1.2rem; }
  .app-feature p br { display: none; }
  .app-dark { display: none; }
  .complete-card {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    min-height: 0;
    padding: 3.8rem 3.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #FFFFFF;
    border-radius: 0;
  }
  .complete-card-bg { display: none; }
  .complete-right { order: -1; margin-bottom: 2.4rem; color: var(--preto-0f); }
  .complete-right h3 { font-size: 1.9rem; line-height: 1.25; }
  .complete-right h3 br { display: none; }
  .complete-right h3 .hl-completa { color: #FF6417; }
  .complete-right p { margin-top: 1.4rem; font-size: 1.2rem; line-height: 1.65; }
  .complete-list { gap: 0.9rem; }
  .complete-pill {
    height: 3.4rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #FF8A4D;
  }
  .complete-pill img { width: 1.5rem; height: 1.5rem; }
  .complete-pill p { font-size: 1.15rem; }
  .app-social {
    position: static;
    margin: 0;
    padding: 2.2rem 3.9rem 4.6rem;
    background: #FFFFFF;
    text-align: left;
  }
  .app-social-kicker { font-size: 1.3rem; }
  .app-social-title { margin-top: 0.3rem; font-size: 2.2rem; }
  .app-social-icons { margin-top: 1.6rem; justify-content: flex-start; gap: 1rem; }
  .app-social-icons img { width: 2.5rem; height: 2.5rem; }

  /* ---------- Modal "baixe o app" ---------- */
  .modal-card { width: 32rem; padding: 3rem 2.6rem; }
  .modal-actions { display: flex; flex-direction: column; gap: 1rem; }
  .store-btn { justify-content: center; }
}