/* ===================================================
   Smart Fit Addons – Estilos da Landing Page
   Fonte: DM Sans | Sem header/footer
   =================================================== */

/* ---------- RESET E BASE ---------- */

/* Resetar css errado do header feito pela smart: */
@media (max-width: 576px) {
  .new-home-v4-header {
    margin-bottom: 0px !important;
  }
}

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

:root {
  /* Cores da marca */
  --brand-yellow: #FFB612;
  --brand-yellow-active: #FDC700;
  --brand-black: #000000;
  --brand-white: #FFFFFF;

  /* Escala de cinza */
  --gray-1: #F4F4F5;
  --gray-1-3: #F0F0F0;
  --gray-1-5: #E9E9E9;
  --gray-5: #3B3B40;
  --kettlebell: #1C1C1C;
  --dark-bg: #141414;
  --dark-footer: #141415;

  /* Cores de texto */
  --text-primary: rgba(1, 1, 20, 0.88);
  --text-secondary: rgba(1, 1, 20, 0.64);
  --text-body: #4A5565;
  --text-list: #364153;
  --text-invert: #FFFFFF;
  --text-invert-muted: #E5E7EB;
  --text-step: #0A0A0A;

  /* Tipografia */
  --font: 'DM Sans', sans-serif;

  /* Espaçamento */
  --section-py: 80px;
  --section-px: 24px;
  --card-radius: 24px;
  --faq-radius: 16px;
  --btn-radius: 200px;

  /* Layout */
  --max-w: 1280px;
  --max-w-inner: 1200px;
  --max-w-faq: 1272px;

  /* Transição */
  --ease: 0.3s ease;
  --ease-fast: 0.15s ease;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
  /* zoom: 0.75; */
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  background: var(--brand-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul,
ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 900;
  font-size: 16px;
  line-height: 24px;
  border-radius: var(--btn-radius);
  padding: 11px 32px;
  transition: background var(--ease), transform var(--ease-fast);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  text-align: center;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--brand-yellow);
  color: var(--text-primary);
}

.btn--primary:hover {
  background: #E5A310;
}

.btn--hero {
  width: 400px;
  max-width: 100%;
}

.btn--wide {
  width: 400px;
  max-width: 100%;
}

.btn--cta {
  min-width: 268px;
  height: 48px;
}

/* ========================================
   BREADCRUMB (posicionado sobre o hero)
   ======================================== */
.breadcrumb {
  position: absolute;
  top: 110px;
  left: 0;
  width: 100%;
  z-index: 900;
  background: transparent;
}

@media(max-width: 768px) {
  .breadcrumb {
    top: -20px;
  }
}

.breadcrumb__container {
  position: relative;
  z-index: 901;
  margin: 0 auto;
  padding: 48px 250px 0;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: var(--max-w);
  flex-wrap: nowrap;
  overflow: hidden;
}

.breadcrumb__item a,
.breadcrumb__item span {
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--brand-white);
}

.breadcrumb__item a:hover {
  text-decoration: underline;
}

.breadcrumb__separator {
  color: var(--brand-white);
  font-size: 16px;
}

.breadcrumb__item--active span {
  font-weight: 400;
}

/* ========================================
   HERO CAROUSEL
   Altura 600px, fundo preto, largura total
   ======================================== */
.hero {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: var(--brand-black);
}

.hero__carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.hero__slide--active {
  opacity: 1;
  visibility: visible;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg picture {
  display: contents;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Slide Body desktop: posição vertical ajustada para mostrar a área central */
@media (min-width: 769px) {
  .hero__slide[data-slide="1"] .hero__bg img {
    object-position: center 40%;
  }
}

/* Overlay escuro nos slides (mais leve no slide principal) */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.hero__slide:first-child .hero__bg::after {
  background: rgba(0, 0, 0, 0.3);
}

/* Conteúdo do hero: padding lateral 250px, largura máx. 730px */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  height: 100%;
  margin: 0 auto;
  padding: 48px 250px;
  padding-top: 120px;
}

.hero__content h1,
.hero__content .hero__title-alt {
  font-family: var(--font);
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  color: var(--brand-white);
  max-width: 730px;
}

.hero__content p {
  font-family: var(--font);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: var(--brand-white);
  max-width: 730px;
}

/* Controles do carrossel: centralizados na parte inferior */
.hero__controls {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 224px;
}

.hero__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--brand-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--ease);
}

.hero__arrow:hover {
  background: rgba(255, 255, 255, 0.35);
}

.hero__dots {
  display: flex;
  gap: 8px;
  flex: 1;
  align-items: center;
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  transition: background var(--ease), flex var(--ease);
  flex-shrink: 0;
}

.hero__dot--active {
  background: var(--brand-yellow-active);
  flex: 1;
  border-radius: 999px;
}

/* ========================================
   SEÇÃO ECOSSISTEMA
   Fundo branco, padding vertical 80px, max 1200px
   ======================================== */
.ecosystem {
  padding: var(--section-py) var(--section-px);
  background: var(--brand-white);
}

.ecosystem__container {
  max-width: var(--max-w-inner);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.ecosystem__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.ecosystem__title {
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  color: var(--text-primary);
}

.ecosystem__highlight {
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  color: var(--brand-yellow);
}

.ecosystem__description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  text-align: center;
}

/* ========================================
   SEÇÃO PRODUTOS E SERVIÇOS
   Grid 2×2, gap 32px, cards com borda 24px
   ======================================== */
.services {
  padding: var(--section-py) var(--section-px);
  background: var(--gray-1);
}

.services__container {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.services__header {
  text-align: center;
}

.services__title {
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  color: var(--brand-black);
  margin-bottom: 16px;
}

.services__subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-body);
  max-width: 715px;
  margin: 0 auto;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
}

/* Card de serviço: fundo branco, borda 24px, sombra */
.service-card {
  background: var(--brand-white);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.service-card__image {
  position: relative;
  width: 100%;
  height: 256px;
  overflow: hidden;
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Recorte das imagens por card */
.service-card:nth-child(1) .service-card__image img {
  /* Coach: mantém o rosto e o celular em destaque */
  object-position: center 34%;
}

.service-card:nth-child(2) .service-card__image img {
  /* Body: favorece o equipamento e a usuária à direita */
  object-position: 68% 42%;
}

.service-card:nth-child(3) .service-card__image img {
  /* Energy: imagem centralizada padrão */
  object-position: center 38%;
}

.service-card:nth-child(4) .service-card__image img {
  /* Nutri: mantém os dois profissionais centralizados */
  object-position: center 36%;
}

/* Corpo do card: padding 32px, altura flexível */
.service-card__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-card__title {
  font-weight: 900;
  font-size: 32px;
  line-height: 40px;
  color: var(--brand-black);
  margin-bottom: 16px;
}

.service-card__description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-body);
  margin-bottom: 24px;
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  flex: 1;
}

.service-card__list li {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-list);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.service-card__list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: var(--brand-black);
  margin-top: 9px;
}

/* Link CTA do card: negrito com ícone de seta */
.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 16px;
  line-height: 24px;
  color: var(--brand-black);
  transition: gap var(--ease);
}

.service-card__cta:hover {
  gap: 12px;
}

.service-card__cta svg {
  flex-shrink: 0;
  transition: transform var(--ease);
}

.service-card__cta:hover svg {
  transform: translateX(2px);
}

/* ========================================
   SEÇÃO COMO CONTRATAR
   Fundo escuro, grid 2 colunas
   Card claro (não-aluno) e card escuro (já aluno)
   ======================================== */
.how-to {
  padding: var(--section-py) var(--section-px);
  background: var(--dark-bg);
}

.how-to__container {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.how-to__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  max-width: 1140px;
  padding: 0 28px;
}

.how-to__title {
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  color: var(--brand-white);
}

.how-to__subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-invert);
}

.how-to__cards-wrapper {
  padding: 40px;
  border-radius: 16px;
  max-width: 1232px;
  width: 100%;
}

.how-to__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  width: 100%;
}

/* Card claro (não-aluno) */
.how-to__card {
  border-radius: var(--card-radius);
  padding: 32px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.1);
}

.how-to__card--light {
  background: var(--brand-white);
  color: var(--text-list);
}

.how-to__card--dark {
  background: var(--gray-5);
  color: var(--text-invert-muted);
}

.how-to__card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.how-to__card-icon {
  flex-shrink: 0;
}

.how-to__card-title {
  font-weight: 900;
  font-size: 24px;
  line-height: 32px;
}

.how-to__card--light .how-to__card-title {
  color: var(--text-step);
}

.how-to__card--dark .how-to__card-title {
  color: var(--brand-white);
}

.how-to__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.how-to__steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.how-to__steps li span:last-child {
  padding-top: 4px;
}

.how-to__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: var(--text-step);
  font-family: 'Inter', var(--font), sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

/* ========================================
   SEÇÃO FAQ
   Fundo branco, itens com borda e accordion
   ======================================== */
.faq {
  padding: var(--section-py) var(--section-px);
  background: var(--brand-white);
}

.faq__container {
  max-width: var(--max-w-faq);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.faq__title {
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  color: var(--text-primary);
  text-align: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: calc(var(--max-w-faq) - 160px);
  margin: 0 auto;
}

.faq__item {
  background: var(--brand-white);
  border: 1px solid var(--gray-1-5);
  border-radius: var(--faq-radius);
  padding: 24px;
  transition: border-color var(--ease);
}

.faq__item--open {
  border-color: var(--brand-yellow);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
}

.faq__icon {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-primary);
}

.faq__item--open .faq__icon {
  transform: rotate(180deg);
}

.faq__answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    padding-top 0.3s ease;
  padding-top: 0;
}

.faq__item--open .faq__answer {
  max-height: 500px;
  opacity: 1;
  padding-top: 24px;
}

.faq__answer p {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--text-secondary);
}

.faq__answer p+p {
  margin-top: 4px;
}

/* ========================================
   SEÇÃO CTA FINAL
   Fundo cinza claro, centralizado
   ======================================== */
.final-cta {
  padding: var(--section-py) var(--section-px);
  background: var(--gray-1-3);
}

.final-cta__container {
  max-width: 1112px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0;
}

.final-cta .btn--cta {
  margin-top: 16px;
}

.final-cta__title {
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  color: var(--text-primary);
}

.final-cta__subtitle {
  font-weight: 900;
  font-size: 20px;
  line-height: 32px;
  color: var(--text-primary);
}

/* ========================================
   RESPONSIVO
   ======================================== */

/* Tablet */
@media (max-width: 1024px) {
  .hero__content {
    padding: 48px 80px;
    padding-top: 100px;
  }

  .breadcrumb__container {
    padding: 48px 80px 0;
  }

  .hero__content h1,
  .hero__content .hero__title-alt {
    font-size: 36px;
    line-height: 44px;
  }

  .hero__content p {
    font-size: 18px;
    line-height: 28px;
  }

  .ecosystem__title,
  .ecosystem__highlight {
    font-size: 36px;
    line-height: 44px;
  }

  .services__title,
  .how-to__title,
  .faq__title,
  .final-cta__title {
    font-size: 36px;
    line-height: 44px;
  }

  .how-to__cards {
    gap: 32px;
  }

  .btn {


    .final-cta__container {
      padding: 0 40px;
    }
  }

  /* Mobile (até 768px) */
  @media (max-width: 768px) {

    html {
      zoom: 1;
    }

    /* --- HERO (altura 626px, conteúdo alinhado ao topo) --- */
    .hero {
      height: 626px;
    }

    .hero__content {
      padding: 5px 32px 56px 50px;
      padding-top: 49px;
      /* 56px breadcrumb-top + 24px breadcrumb + 16px gap */
      justify-content: flex-start;
      gap: 5px;
    }

    /* Botão: gap total de 32px do subtítulo (16px gap + 16px margin) */
    .hero__content .btn--hero {
      margin-top: 16px;
    }

    .breadcrumb__container {
      padding: 45px 32px 0 52px;
    }

    /* Breadcrumb: fonte menor no mobile */
    .breadcrumb__item a,
    .breadcrumb__item span,
    .breadcrumb__separator {
      font-size: 14px;
      line-height: 20px;
    }

    .breadcrumb__item {
      white-space: nowrap;
    }

    .breadcrumb__item--active span {
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      max-width: 140px;
    }

    .breadcrumb__separator {
      flex-shrink: 0;
    }

    .hero__content h1,
    .hero__content .hero__title-alt {
      font-size: 32px;
      line-height: 40px;
    }

    .hero__content p {
      font-weight: 900;
      font-size: 14px;
      line-height: 24px;
    }

    .btn--hero,
    .btn--wide {
      width: 100%;
    }

    /* Controles do carrossel: posicionados a 54px do fundo */
    .hero__controls {
      width: 224px;
      gap: 16px;
      bottom: 54px;
    }

    /* Overlay mobile: opacidade 30% (mais leve que o desktop) */
    .hero__bg::after {
      background: rgba(0, 0, 0, 0.3);
    }

    /* Imagens mobile: usam versões dedicadas (pré-recortadas para 414×626) via <picture> */
    .hero__bg img {
      object-position: center center;
    }

    /* Overlay dos slides 2-5: opacidade 47% */
    .hero__slide[data-slide="1"] .hero__bg::after,
    .hero__slide[data-slide="2"] .hero__bg::after,
    .hero__slide[data-slide="3"] .hero__bg::after,
    .hero__slide[data-slide="4"] .hero__bg::after {
      background: rgba(0, 0, 0, 0.47);
    }

    /* --- ECOSSISTEMA (padding 32px, gap 16px, botão com margin extra) --- */
    .ecosystem {
      padding: 80px 32px;
    }

    .ecosystem__container {
      gap: 16px;
    }

    .ecosystem .btn--wide {
      margin-top: 32px;
    }

    .ecosystem__heading {
      gap: 10px;
      padding: 10px;
    }

    .ecosystem__title,
    .ecosystem__highlight {
      font-size: 32px;
      line-height: 40px;
    }

    .ecosystem__description {
      font-size: 14px;
      line-height: 24px;
      text-align: center;
    }

    /* --- SERVIÇOS (padding 24px, py 64px, gap 50px) --- */
    .services {
      padding: 64px 24px;
    }

    .services__container {
      gap: 50px;
    }

    .services__header {
      gap: 24px;
      display: flex;
      flex-direction: column;
    }

    .services__title {
      font-size: 32px;
      line-height: 40px;
      margin-bottom: 0;
    }

    .services__subtitle {
      font-size: 14px;
      line-height: 24px;
    }

    .services__grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .service-card__image {
      height: 210px;
    }

    /* Coach mobile: recorte para destaque do profissional */
    .service-card:nth-child(1) .service-card__image img {
      object-position: center 30%;
    }

    /* Body mobile: recorte mostrando a porção direita da imagem */
    .service-card:nth-child(2) .service-card__image img {
      object-position: 65% 30%;
    }

    /* Energy mobile: foco na porção direita da imagem */
    .service-card:nth-child(3) .service-card__image img {
      object-position: 60% center;
    }

    /* Nutri mobile: foco na porção direita da imagem */
    .service-card:nth-child(4) .service-card__image img {
      object-position: 55% center;
    }

    .service-card__body {
      padding: 32px 24px;
      gap: 18px;
      display: flex;
      flex-direction: column;
    }

    .service-card__title {
      font-size: 24px;
      line-height: 32px;
      margin-bottom: 0;
    }

    .service-card__description {
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 0;
    }

    .service-card__list {
      margin-bottom: 0;
    }

    /* --- COMO CONTRATAR (py 80px, seção largura total, cards com padding 24px) --- */
    .how-to {
      padding: 80px 0;
    }

    .how-to__container {
      gap: 32px;
    }

    .how-to__header {
      padding: 0 28px;
    }

    .how-to__title {
      font-size: 32px;
      line-height: 40px;
    }

    .how-to__cards-wrapper {
      padding: 40px 24px;
    }

    .how-to__cards {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .how-to__card {
      padding: 32px;
    }

    .how-to__card-title {
      font-size: 24px;
      line-height: 32px;
    }

    /* --- FAQ (py 80px, lista com padding 32px, gap 16px) --- */
    .faq__title {
      font-size: 32px;
      line-height: 40px;
    }

    .faq__list {
      max-width: 100%;
      padding: 0;
    }

    .faq {
      padding: 80px 32px;
    }

    /* --- CTA FINAL (padding 32px, gap título→subtítulo 16px, subtítulo→botão 32px) --- */
    .final-cta {
      padding: 80px 32px;
    }

    .final-cta__title {
      font-size: 32px;
      line-height: 40px;
    }

    .final-cta__subtitle {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
    }

    .btn--cta {
      min-width: 268px;
      width: auto;
    }
  }
}