/**
 * Home Page (index) — Estilos específicos da home
 */


/* =========================================
   Hero
   ========================================= */

.hero {
  position: relative;
  min-height: calc(100vh - 88px);
  background-color: var(--grey-10);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 124px;
  overflow: hidden;
}

.hero__banner {
  position: absolute;
  top: 0;
  right: 0;
  width: 81.9vw;
  /* 1573 / 1920 */
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

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

.hero__banner-img {
  position: absolute;
  inset: 0;
  z-index: 1;
}

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

.hero__banner-img--dark {
  z-index: 2;
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* Gradiente overlay sobre tudo */
.hero__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* Container de conteúdo — fica acima do banner */
.hero__container {
  position: relative;
  z-index: 1;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 732px;
  align-items: start;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero__subtitle {
  color: var(--grey-90);
  margin: 0;
}

.hero__title {
  color: var(--white);
  max-width: 19ch;
}


/* =========================================
   Carrossel Text
   ========================================= */

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.carousel-text {
  position: relative;
  background-color: var(--grey-10);
  border-bottom: 1px solid var(--grey-40);
  padding: 32px 0;
  overflow: hidden;
}

/* Gradient fade — left and right edges */
.carousel-text::before,
.carousel-text::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  z-index: 1;
  pointer-events: none;
}

.carousel-text::before {
  left: 0;
  background: linear-gradient(to right, var(--grey-10), transparent);
}

.carousel-text::after {
  right: 0;
  background: linear-gradient(to left, var(--grey-10), transparent);
}

.carousel-text__track {
  overflow: hidden;
}

.carousel-text__inner {
  display: flex;
  align-items: center;
  gap: 58px;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.carousel-text__item {
  color: var(--white);
  letter-spacing: 0.1px;
  white-space: nowrap;
}


/* =========================================
   Números
   ========================================= */

.numeros {
  background-color: var(--grey-10);
  padding: 140px 0;
}

.numeros__content {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 32px;
}

.numeros__left {
  flex: 0 0 416px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 56px;
  gap: 32px;
}

.numeros__description {
  color: var(--white);
  margin-bottom: 0;
  max-width: 17ch;
}

.numeros__stats {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.numeros__stats-header {
  border-top: 1px solid var(--grey-40);
  padding-top: 16px;
}

.numeros__stats-label {
  color: var(--grey-90);
  margin-bottom: 0;
}

.numeros__stat-value {
  color: var(--white);
  letter-spacing: -0.32px;
  white-space: nowrap;
  margin-bottom: 0;
}

.numeros__stat-desc {
  color: var(--grey-130);
  margin-bottom: 0;
}

.numeros__image {
  flex: 1;
  aspect-ratio: 1312 / 808;
  background-color: var(--grey-30);
  position: relative;
  overflow: hidden;
}

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

.numeros__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.24);
  pointer-events: none;
}


/* =========================================
   Cursos — Feature list container
   ========================================= */

.cursos {
  background-color: var(--white);
}

.cursos__features {
  padding: 80px 0;
  border-bottom: 2px dashed var(--grey-100);
}

.cursos__features-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.cursos__features-title {
  color: var(--grey-10);
  margin-bottom: 0;
  max-width: 21ch;
}

.cursos__features-title u {
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 6px;
}

.cursos__features-list {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-shrink: 0;
}

.cursos__feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 12vw;
}

.cursos__feature-icon {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 32px;
  width: 73px;
  background-image: linear-gradient(-90deg, rgba(181, 242, 199, 0) 0%, rgb(181, 242, 199) 100%);
}

.cursos__feature-icon img {
  width: 18px;
  height: 18px;
}

.cursos__feature-value {
  color: var(--grey-10);
  white-space: nowrap;
  margin-bottom: 0;
}

.cursos__feature-desc {
  color: var(--grey-90);
  margin-bottom: 0;
}


/* =========================================
   Cursos — Courses container
   ========================================= */

.cursos__courses {
  padding: 80px 0 140px;
}

.cursos__courses-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 80px;
}

.cursos__courses-title {
  color: var(--grey-10);
  letter-spacing: -2.04px;
  margin-bottom: 0;
}

.cursos__courses-tags {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cursos__courses-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--grey-10);
}

.cursos__courses-tag span {
  white-space: nowrap;
}

.cursos__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px 32px;
}


/* =========================================
   Professor
   ========================================= */

.professor {
  background-color: var(--grey-10);
  border-top: 1px solid var(--grey-40);
  padding: 140px 0;
}

.professor__content {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.professor__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 72ch;
}

.professor__tag {
  margin-bottom: 0;
  width: fit-content;
}

.professor__heading {
  color: var(--white);
  margin-bottom: 0;
  max-width: 25ch;
}

/* Main Content — padrão responsivo: aspect-ratio + align-items stretch */
.professor__main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
}

.professor__image {
  flex: 1;
  aspect-ratio: 1312 / 931;
  background-color: var(--grey-30);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px 40px;
  container-type: inline-size;
}

.professor__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.professor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.professor__image:hover .professor__photo img {
  transform: scale(1.05);
}

.professor__caption {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* font-size via cqi: 180px / 1312px = 13.72% da largura do container */
.professor__caption-name {
  font-size: clamp(60px, 13.72cqi, 180px);
  color: var(--white);
  margin: 0;
  white-space: nowrap;
}

.professor__caption-badge {
  width: 2.1vw;
  height: 2.1vw;
  flex-shrink: 0;
  margin-top: 0.08em;
}

.professor__bio {
  flex: 0 0 416px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.professor__bio-text {
  color: var(--white);
  margin-bottom: 0;
}

.professor__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.professor__logo {
  width: auto;
  display: block;
}

.professor__logo[alt="ConsulFarma"] {
  height: 23px;
}

.professor__logo[alt="Arnold Sports"] {
  height: 57px;
}

.professor__logo[alt="HI Nutrition"] {
  height: 25px;
}

.professor__logo[alt="UFG"] {
  height: 37px;
}


/* =========================================
   Depoimentos
   ========================================= */

.depoimentos {
  background-color: var(--grey-10);
  display: flex;
  flex-direction: column;
  gap: 140px;
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: clamp(1rem, 4.17vw, 5rem);
  overflow: hidden;
}

.depoimentos__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: clamp(1rem, 4.17vw, 5rem);
  gap: 32px;
}

.depoimentos__title {
  color: var(--white);
  letter-spacing: -2.04px;
  white-space: nowrap;
  margin-bottom: 0;
}

.depoimentos__subtitle {
  max-width: 31ch;
  margin-bottom: 0;
}

/* ── Content container (nav + track) ────── */

.depoimentos__content {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 100%;
}

/* ── Nav ─────────────────────────────────── */

.depoimentos__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-right: clamp(1rem, 4.17vw, 5rem);
}

.dep-nav__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grey-50);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--white);
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.dep-nav__btn:hover:not(:disabled) {
  border-color: var(--white);
}

.dep-nav__btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.dep-nav__icon {
  width: 20px;
  height: 20px;
  display: block;
}

.dep-nav__icon--prev {
  transform: scaleX(-1);
}

/* ── Carousel track ──────────────────────── */

.depoimentos__track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.depoimentos__track::-webkit-scrollbar {
  display: none;
}

/* ── Item ────────────────────────────────── */

/* 2.5 itens visíveis: (100vw − padding_esquerdo − 2×gap) / 2.5
   padding_esquerdo = clamp(1rem, 4.17vw, 5rem) — igual ao container */
.dep-item {
  flex: 0 0 calc((100vw - clamp(1rem, 4.17vw, 5rem) - 64px) / 2.5);
  display: flex;
  gap: 32px;
  align-items: flex-start;
  scroll-snap-align: start;
}

/* Imagem */
.dep-item__image {
  flex: 1;
  aspect-ratio: 373 / 687;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 24px 32px;
}

.dep-item__photo {
  position: absolute;
  inset: 0;
  background-color: var(--grey-30);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dep-item__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.dep-item__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.dep-item:hover .dep-item__photo {
  transform: scale(1.06) translateY(-1.5%);
}

.dep-item__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

.dep-item__person {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dep-item__name {
  color: var(--white);
  letter-spacing: 0.17px;
  margin-bottom: 0;
}

.dep-item__role {
  color: var(--white);
  opacity: 0.7;
  letter-spacing: 0.07px;
  margin-bottom: 0;
}

/* Testimonial */
.dep-item__testimonial {
  width: 43.3%;
  /* 309 / 714 — proporcional ao item */
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}

.dep-item__testimonial p {
  color: var(--grey-100);
  letter-spacing: 0.11px;
  margin-bottom: 0;
  transition: color 0.35s ease;
}

.dep-item:hover .dep-item__testimonial p {
  color: var(--white);
}


/* =========================================
   Sobre
   ========================================= */

.sobre {
  background-color: var(--white);
  border-bottom: 1px solid var(--grey-110);
  padding: 140px 0;
}

.sobre__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
}

.sobre__text {
  flex: 1;
  max-width: 715px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.sobre__text-top {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sobre__title {
  color: var(--grey-10);
  margin-bottom: 0;
}

.sobre__description {
  color: var(--grey-10);
  margin-bottom: 0;
  max-width: 32ch;
}

.sobre__secondary {
  color: var(--grey-70);
  max-width: 57ch;
  margin-bottom: 0;
}

.sobre__image {
  flex: 1;
  max-width: 715px;
  aspect-ratio: 715 / 911;
  background-color: var(--grey-30);
  overflow: hidden;
}

.sobre__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

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


/* =========================================
   Comece agora
   ========================================= */

.comece {
  background-color: var(--grey-10);
  padding: 80px 0;
}

/* font-size base: 156px @ 1920px viewport = 8.125vw. min() trava em 156px acima de 1920px */
.comece__row {
  font-size: min(8.125vw, 156px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.comece__text {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-size: 1em;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--white);
  white-space: nowrap;
  margin: 0;
  position: relative;
  z-index: 0;
}

/* sobreposição: texto avança sobre o botão pela esquerda */
.comece__text--before {
  margin-right: -0.308em;
  /* -48 / 156 */
}

/* ── Botão decorativo ── */

@keyframes comece-breathe-outer {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes comece-breathe-mid {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes comece-breathe-inner {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(181, 242, 199, 0);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0.32em 0.12em rgba(181, 242, 199, 0.25);
  }
}

.comece__btn {
  display: grid;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-right: -0.308em;
  /* -48 / 156 — "agora" avança sobre o botão pela direita */
}

/* todas as camadas na mesma célula */
.comece__btn>* {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
}

.comece__btn-outer {
  width: 1.577em;
  /* 246 / 156 */
  height: 1.340em;
  /* 209 / 156 */
  border-radius: 0.513em;
  background: linear-gradient(to bottom, rgba(191, 191, 191, 0.32), rgba(126, 126, 126, 0.32));
  animation: comece-breathe-outer 3s ease-in-out infinite;
  transform-origin: center center;
}

.comece__btn-mid {
  width: 1.449em;
  /* 226 / 156 */
  height: 1.224em;
  /* 191 / 156 */
  border-radius: 0.513em;
  background: linear-gradient(to bottom, rgba(181, 242, 199, 0.32), rgba(105, 140, 115, 0.32));
  margin-left: 0.064em;
  /* 10 / 156 */
  margin-top: 0.061em;
  /* 9.44 / 156 */
  animation: comece-breathe-mid 3s ease-in-out infinite;
  animation-delay: 0.15s;
  transform-origin: center center;
}

.comece__btn-inner {
  width: 1.179em;
  /* 184 / 156 */
  height: 1.033em;
  /* 161 / 156 */
  border-radius: 0.385em;
  background-color: rgba(181, 242, 199, 0.6);
  margin-left: 0.199em;
  /* 30.99 / 156 */
  margin-top: 0.155em;
  /* 24.13 / 156 */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: comece-breathe-inner 3s ease-in-out infinite;
  animation-delay: 0.30s;
  transform-origin: center center;
}

.comece__btn-play {
  width: 0.660em;
  /* 103 / 156 */
  height: 0.308em;
  /* 48 / 156 */
  border-radius: 0.205em;
  background-color: var(--grey-10);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.comece__btn-play svg {
  width: 0.045em;
  /* 7 / 156 */
  height: auto;
}


/* =========================================
   FAQ
   ========================================= */



/* =========================================
   Artigos
   ========================================= */

.artigos {
  background-color: var(--grey-10);
  padding: 140px 0;
}

.artigos__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.artigos__header {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 715px;
}

.artigos__title {
  color: var(--white);
  margin-bottom: 0;
}

.artigos__subtitle {
  max-width: 25ch;
  margin-bottom: 0;
}

.artigos__articles {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.artigos__article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.artigos__article--main {
  flex: 2;
}

.artigos__article--secondary {
  flex: 1;
}

/* Link invisível que cobre o artigo todo */
.artigos__article-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.artigos__article-image {
  width: 100%;
  aspect-ratio: 1312 / 656;
  overflow: hidden;
}

.artigos__article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.artigos__article:hover .artigos__article-image img {
  transform: scale(1.04);
}

.artigos__article-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.artigos__article-title {
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s ease;
}

.artigos__article-title a {
  color: inherit;
  text-decoration: inherit;
  text-decoration-color: inherit;
  text-underline-offset: inherit;
}

.artigos__article-title a:hover {
  color: inherit;
}

.artigos__article:hover .artigos__article-title {
  text-decoration-color: var(--white);
}

.artigos__article-date {
  color: var(--grey-80);
  margin-bottom: 0;
}

.artigos__article-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 3px solid var(--grey-50);
  color: var(--white);
  letter-spacing: 0.07px;
  text-transform: uppercase;
}

.artigos__footer {
  display: flex;
  justify-content: flex-end;
}


/* =========================================
   Responsivo
   ========================================= */

@media (max-width: 1024px) {
  .cursos__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }

  .professor__main {
    flex-direction: column;
  }

  .professor__bio {
    flex: 0 0 80px;
    gap: 80px;
  }


}

@media (max-width: 768px) {
  .dep-item {
    flex: 0 0 80vw;
  }

  .dep-item__image {
    aspect-ratio: unset;
    height: 480px;
    flex: 1;
  }
}

@media (max-width: 600px) {
  .cursos__cards {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero__banner {
    width: 100%;
    height: 70%;
  }

  .hero__banner-img {
    width: calc(100% + 30vw);
    transform: translateX(-30vw);
  }

  .hero__banner::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  }


  .numeros__content,
  .cursos__features-inner,
  .artigos__articles {
    gap: 80px;
    flex-direction: column;
    align-items: flex-start;
  }

  .cursos__courses-header,
  .depoimentos__header,
  .sobre__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 32px;
  }

  .hero {
    min-height: calc(100vh - 51px);
    padding-bottom: 56px;
  }

  .carousel-text {
    padding: 16px 0;
  }

  .carousel-text__item {
    font-size: 14px;
  }

  .numeros {
    padding: 140px 0 0 0;
  }

  .numeros__left {
    flex: 1 1 100%;
    display: flex;
    padding: 0;
  }

  .numeros__image {
    flex: none;
    width: calc(100% + 2 * clamp(1rem, 4.17vw, 5rem));
    margin-left: calc(-1 * clamp(1rem, 4.17vw, 5rem));
    margin-right: calc(-1 * clamp(1rem, 4.17vw, 5rem));
    aspect-ratio: 1312 / 2008;
  }

  .numeros__description {
    max-width: 100%;
  }

  .depoimentos {
    gap: 80px;
  }

  .cursos__courses-tag span {
    font-size: 11px;
  }

  .cursos__courses-header {
    margin-bottom: 32px;
  }

  .cursos__feature {
    max-width: 100%;
  }

  .cursos__features-list {
    gap: 40px;
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }

  .cursos__courses-tags {
    gap: 4px;
    flex-wrap: wrap;
  }

  .professor__image {
    padding: 16px;
  }

  .professor__logo[alt="ConsulFarma"] {
    height: 17px;
  }

  .professor__logo[alt="Arnold Sports"] {
    height: 43px;
  }

  .professor__logo[alt="HI Nutrition"] {
    height: 19px;
  }

  .professor__logo[alt="UFG"] {
    height: 28px;
  }

  .cursos__features {
    border-bottom: 1px dashed var(--grey-100);
  }

  .professor__image {
    aspect-ratio: 1312 / 1631;
  }

  .cursos__courses-tag {
    gap: 0;
  }
}