/* scrollBar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--white-400);
  border-radius: var(--br);
  border: 2px solid transparent;
  background-clip: content-box;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--white-500);
}

/* buttons */
.buttonLogo {
  width: 2rem;
  height: 2rem;
  color: var(--black);
  transition: all 200ms ease;
  cursor: pointer;
}

.buttonLogo:hover {
  color: var(--primary-200);
}

.buttonLink {
  display: inline-flex;
  width: auto;
  max-width: max-content;
}

.buttonLink p {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.buttonLink:hover p {
  color: var(--primary-300);
}

.buttonLinkSectionHeader {
  position: absolute;
  top: 0.5rem;
  right: 0;
}

.otherProjectButton {
  position: relative;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  width: fit-content;
  border-radius: var(--br);
  background: var(--white);
  border: 1.5px solid var(--white-500);
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.otherProjectButton:hover {
  background: var(--white-300);
}

.buttonBackToTop {
  position: fixed;
  bottom: -10rem;
  right: 2rem;
  z-index: 1000;
}

.buttonBackToTop.visible {
  bottom: 0.6rem;
}

@media screen and (max-width: 1200px) {
  .buttonBackToTop.visible {
    right: 1rem;
  }
}

/* header */
.navContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 1rem;
  box-sizing: border-box;
  border-bottom: 1.5px solid var(--white-500);
  background: var(--white);
  transition: box-shadow 200ms ease, top 0.5s ease;
  transition: top 200ms ease-in-out;
}

.navContainer .regularBold {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* main */
.mainContainerSections {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12rem;
  padding-left: calc((100% - var(--contentMaxWidth)) / 2);
  padding-right: calc((100% - var(--contentMaxWidth)) / 2);
  box-sizing: border-box;
  padding-bottom: 12rem;
}

.sectionHeader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  width: 100%;
}

.subSection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5rem;
  width: 100%;
}

.sectionHeaderRow {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  .mainContainerSections {
    gap: 7.5rem;
    padding: 1rem;
  }

  .subSection {
    gap: 2.5rem;
  }

  .sectionHeaderRow {
    flex-direction: column;
  }
}

.sectionHeaderFrame {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}

.sectionHeaderTwo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  position: relative;
  width: 100%;
}

.sectionHeaderFrameFrame {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.sectionHeaderThree {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2rem;
}

.designDecisionFrame {
  display: flex;
  flex-direction: row;
  gap: 8rem;
  width: 100%;
  align-items: center;
}

.sectionHeader h2,
.sectionHeaderTwo h2 {
  transition: color 400ms ease-in-out;
}

.sectionHeader h2.highlight,
.sectionHeaderTwo h2.highlight {
  color: var(--primary-300);
}

.otherProjectsSection {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: calc((100% - var(--contentMaxWidth)) / 2);
  padding-right: calc((100% - var(--contentMaxWidth)) / 2);
  box-sizing: border-box;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media screen and (max-width: 1200px) {
  .otherProjectsSection {
    padding: 1.5rem 1rem;
    padding-bottom: 2rem;
  }
}

@media screen and (max-width: 1200px) {
  .designDecisionFrame {
    flex-direction: column;
    gap: 1rem;
  }

  .designDecisionFrame:nth-of-type(odd) {
    flex-direction: column-reverse;
  }
}

.analysisFrameContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 2rem;
}

@media screen and (max-width: 1200px) {
  .analysisFrameContainer {
    flex-direction: column;
  }
}

.analysisFrame {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 1rem;
  align-items: center;
}

.analysisFrameInfo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.analysisImage {
  width: 192px;
  height: auto;
}

@media screen and (max-width: 1200px) {
  .analysisImage {
    width: 128px;
  }
}

.imageLeyendFrame {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.25rem;
  text-align: center;
}

.cardTeam {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.cardTeamText {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.imageLeyendFrame img {
  border-radius: var(--br);
}

.gridFour {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
}

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

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

.gridSix {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
  width: 100%;
}

.gridThree {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 1rem;
  justify-items: center;
  align-items: center;
}

.gridTypeTwo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
}

.gridTypeThree {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 1rem;
}

@media screen and (max-width: 1200px) {
  .gridFour {
    grid-template-columns: repeat(2, 1fr);
  }

  .gridTwo {
    grid-template-columns: 1fr;
  }

  .gridTwoTwo {
    grid-template-columns: repeat(2, 1fr);
  }

  .gridSix {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .gridThree {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }

  .gridTypeTwo {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .gridTypeThree {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}

.heroSection {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  box-sizing: border-box;
}

@media screen and (max-width: 1200px) {
  .heroSection {
    height: 95dvh;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
  }
}

.heroSection img {
  width: 18rem;
  height: 18rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1200px) {
  .heroSection img {
    width: 100%;
    max-width: 22rem;
    height: auto;
  }
}

.heroSectionText {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* cardProjects */
.cardProject,
.cardFreelance {
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: var(--white-100);
  border: 1.5px solid var(--white-500);
  border-radius: var(--br);
  padding: 1rem;
  box-sizing: border-box;
  gap: 1rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  position: relative;
  align-items: center;
}

.cardProject:hover,
.cardFreelance:hover,
.buttonExternal:hover {
  background-color: var(--white-300);
}

.cardProject figure {
  flex: 0 0 25%;
  position: relative;
  height: 10rem;
}

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

.cardProjectFrame {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
}

.cardProjectFrameText {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

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

.cardProject i,
.buttonExternal i {
  font-size: 1rem;
  transform: rotate(-45deg);
}

/* cardFreelance */
.cardFreelanceFrame {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cardFreelance > .cardFreelanceFrame,
.cardFreelance > img {
  flex: 1 1 50%;
  max-width: 50%;
}

.cardFreelance img {
  top: -32px;
  right: -16px;
  position: absolute;
  width: auto;
  height: auto;
  transform: rotate(5deg) scale(0.9);
  opacity: 40%;
  transition: opacity 200ms ease-in-out;
}

.cardFreelance:hover img {
  opacity: 80%;
}

.cardFreelanceFrameText {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cardFreelanceFrameTitle {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

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

.cardFreelance i {
  font-size: 1rem;
  transform: rotate(-45deg);
}

@media screen and (max-width: 1200px) {
  .cardFreelance {
    flex-direction: row;
  }
  .cardFreelanceFrame > p {
    display: none;
  }
  .cardFreelance img {
    top: -16px;
    right: -16px;
    transform: rotate(5deg) scale(1.1);
    opacity: 100%;
  }
}

/* footer */
footer {
  display: flex;
  flex-direction: row;
  width: 100%;
  border-top: 1.5px solid var(--white-500);
  justify-content: space-between;
  padding: 1rem;
}

@media screen and (max-width: 1200px) {
  footer {
    flex-direction: column;
    gap: 1rem;
  }
}

/* table of content */
.table-of-contents {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  border-radius: var(--br);
  border: 1.5px solid var(--white-500);
  background-color: var(--gray-200);
  position: fixed;
  top: var(--nav-height, 96px);
  right: 1rem;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 400;
  letter-spacing: 0.05rem;
  z-index: 1;
  opacity: 0;
  transform: translateY(5%);
  visibility: hidden;
  transition-property: opacity, transform, visibility;
  transition-duration: 400ms;
  transition-timing-function: ease-in-out;
}

.table-of-contents.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.table-of-contents::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--white-100);
  z-index: -1;
  border-radius: var(--br);
}

@media screen and (max-width: 1200px) {
  .table-of-contents {
    display: none;
  }
}

.table-of-contents ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.table-of-contents .toc-title {
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  font-size: 10px;
  line-height: var(--lh-small);
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: var(--black);
  text-transform: uppercase;
}

.table-of-contents a {
  display: flex;
  padding: 0.2rem 0.4rem;
  border-radius: var(--br);
  text-decoration: none;
  transition: 200ms ease-in-out;
  width: fit-content;
  color: var(--black-400);
}

.table-of-contents a.active {
  color: var(--black);
}

.table-of-contents a:hover {
  background-color: var(--white-300);
}

/* cardarticle */
.cardArticle {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--white-100);
  border-radius: var(--br);
  border: 1.5px solid var(--white-500);
  box-sizing: border-box;
  gap: 1rem;
  padding: 1rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  position: relative;
}

.cardArticleFrame {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

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

.cardArticle:hover {
  background-color: var(--white-300);
}

.cardArticle i {
  font-size: 1rem;
  transform: rotate(-45deg);
}

.cardArticle svg {
  color: var(--black);
}

/* cardExperience */
.cardExperience {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
  border: 1.5px solid var(--white-500);
  background-color: var(--white-100);
  border-radius: var(--br);
  flex: 1;
  position: relative;
}

.cardExperienceTitle {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* cardEducation */
.educationSectionContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 1rem;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  .educationSectionContainer {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(12, auto);
  }
}

.cardEducation {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  gap: 0.25rem;
  border-bottom: .5px solid var(--white-500);
}

.cardReading p.regular {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* regularImage */
.regularImage {
  width: 48px;
  height: 48px;
  border-radius: var(--br);
}

/* tools */
.scroller {
  max-width: 880px;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* testimonies */
.cardTestimony {
  display: flex;
  flex-direction: row;
  padding: 1rem;
  gap: 1rem;
  background-color: var(--white-100);
  border: 1.5px solid var(--white-500);
  border-radius: var(--br);
  width: 100%;
  transition: opacity 0.75s ease-in-out;
}

.cardTestimony img {
  width: 132px;
  height: 132px;
  border-radius: var(--br);
}

@media screen and (max-width: 1200px) {
  .cardTestimony img,
  .userResearchCardTitle img {
    width: 48px;
    height: 48px;
  }
}

.userResearchCardTitle img {
  width: 80px;
  height: 80px;
  border-radius: var(--br);
}

@media screen and (max-width: 1200px) {
  .userResearchCardTitle img {
    width: 72px;
    height: 72px;
  }
}

.cardTestimonyFrame {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cardTestimonyJobTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

.cardTestimony.hiddenUntilActive {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.75s ease-in-out;
}

.cardTestimony.showing {
  opacity: 1;
  pointer-events: auto;
}

.sliderButtonFrame {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.testimonyFrame {
  overflow: hidden;
  position: relative;
}

.sliderWrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.sliderTrack {
  display: flex;
  flex-direction: row;
  transition: transform 0.75s ease-in-out;
  width: 100%;
}

.sliderTrack {
  display: flex;
  flex-direction: row;
  transition: transform 0.75s ease-in-out;
  width: 100%;
}

.sliderIndicators {
  display: flex;
  gap: 0.5rem;
  position: absolute;
  bottom: -2rem;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.sliderDot {
  width: 10px;
  height: 10px;
  background-color: var(--white-300);
  border-radius: 50%;
  transition: background-color 0.75s ease-in-out, transform 0.75s ease-in-out;
}

.sliderDot.active {
  width: 12px;
  height: 12px;
  background-color: var(--white-500);
}

.sliderButton.disabled {
  border: 1.5px solid var(--white-300);
}

.sliderButton.disabled:hover {
  background: var(--white-100);
  cursor: not-allowed;
}

.sliderButton.disabled i {
  color: var(--white-400);
}

/* readings */
.cardReading {
  display: flex;
  flex-direction: row;
  padding: 1rem;
  gap: 1rem;
  background-color: var(--white-100);
  border: 1.5px solid var(--white-500);
  border-radius: var(--br);
  width: 100%;
}

.cardReading img {
  max-width: 22.5%;
  height: auto;
  object-fit: cover;
  border-radius: var(--br);
}

.cardReadingFrame {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 70%;
}

.cardReadingFrameTitle {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cardReadingFrameTitle .regularBold {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardReading p.regular {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* projectsPage */
.heroProjectSection {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding-top: 2rem;
}

.heroProjectSectionTitle {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--white-500);
  width: 100%;
}

.heroProjectSectionTitleInfo {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.heroProjectSectionInfo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.heroProjectSectionInfoFrame {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.heroProjectSectionInfo .frameRight {
  grid-column: 2;
  grid-row: 1 / span 5;
  gap: 0.25rem;
}

.heroProjectSectionInfoFrameTwo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (max-width: 1200px) {
  .heroProjectSection {
    gap: 1rem;
    height: auto;
    padding-top: 4rem;
  }
  .heroProjectSectionInfo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .heroProjectSectionInfo .frameRight {
    grid-column: auto;
    grid-row: auto;
  }
}

.overviewImage,
.overviewVideo,
.imageLeyendFrameSpecial {
  width: 272px;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  .overviewImage,
  .overviewVideo,
  .imageLeyendFrameSpecial {
    width: 75%;
  }
}

.overviewImageTablet {
  width: 100%;
  margin: 0 auto;
}

.cardObjectives {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 16px 0;
  position: relative;
  overflow: hidden;
}

.cardObjectives::after {
  position: absolute;
  top: -1rem;
  left: 0.5rem;
  font-size: 6rem;
  font-weight: 800;
  color: var(--primary-400);
  line-height: 1;
  pointer-events: none;
  z-index: -1000;
}

/* Asigna el número según su posición */
.cardObjectives:nth-of-type(1)::after {
  content: "1";
}

.cardObjectives:nth-of-type(2)::after {
  content: "2";
}

.cardObjectives:nth-of-type(3)::after {
  content: "3";
}

.indexSubSection {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Tabla básica */
.responsiveTable {
  width: 100%;
  border-collapse: collapse;
}

.responsiveTable th,
.responsiveTable td {
  border: 1.5px solid var(--white-500);
  padding: 1rem;
  text-align: left;
}

@media screen and (max-width: 1200px) {
  .responsiveTable thead {
    display: none;
  }

  .responsiveTable,
  .responsiveTable tbody,
  .responsiveTable tr,
  .responsiveTable td {
    display: block;
    width: 100%;
  }

  .responsiveTable tr {
    margin-bottom: 1rem;
    padding: 0.5rem;
  }

  .responsiveTable td {
    position: relative;
  }
}

.gridOne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* geomites tipography */
.geomitesCardTypography {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--br);
  background-color: var(--white-200);
  border: 1.5px solid var(--white-500);
  width: 100%;
  height: flex;
}

.geomitesCardOneTypographyOne {
  font-family: "Grenze", serif;
  font-size: 96px;
  font-weight: bold;
}

.geomitesCardOneTypographyTwo {
  font-family: "Grenze", serif;
  font-size: 48px;
  font-weight: bold;
}

.geomitesCardOneTypographyThree {
  font-family: "Grenze", serif;
  font-size: 36px;
  font-weight: 400;
}

.geomitesCardOneTypographyFour {
  font-family: "Grenze", serif;
  font-size: 32px;
  font-weight: bold;
}

.geomitesCardOneTypographyFive {
  font-family: "Grenze", serif;
  font-size: 28px;
  font-weight: bold;
}

.geomitesCardOneTypographySix {
  font-family: "Grenze", serif;
  font-size: 24px;
  font-weight: bold;
}

.geomitesCardOneTypographySeven {
  font-family: "Grenze", serif;
  font-size: 20px;
  font-weight: bold;
}

.geomitesCardOneTypographyEight {
  font-family: "Grenze", serif;
  font-size: 16px;
  font-weight: 400;
}

.geomitesCardOneTypographyNine {
  font-family: "Grenze", serif;
  font-size: 12px;
  font-weight: 400;
}

.geomitesCardOneTypographyTen {
  font-family: "Grenze", serif;
  font-size: 10px;
  font-weight: 400;
}

/* vivagym tipograhpy */

.vivagymCardOneTypographyOne {
  font-family: "Montserrat", sans-serif;
  font-size: 96px;
  font-weight: bold;
}

.vivagymCardOneTypographyTwo {
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-weight: bold;
}

.vivagymCardOneTypographyThree {
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 400;
}

.vivagymCardOneTypographyFour {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: bold;
}

.vivagymCardOneTypographyFive {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: bold;
}

.vivagymCardOneTypographySix {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: bold;
}

.vivagymCardOneTypographySeven {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: bold;
}

.vivagymCardOneTypographyEight {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.vivagymCardOneTypographyNine {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.vivagymCardOneTypographyTen {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 400;
}

@media (max-width: 1200px) {
  .geomitesCardOneTypographyOne,
  .vivagymCardOneTypographyOne {
    font-size: 48px;
  }

  .geomitesCardOneTypographyTwo,
  .vivagymCardOneTypographyTwo {
    font-size: 24px;
  }

  .geomitesCardOneTypographyThree,
  .vivagymCardOneTypographyThree {
    font-size: 18px;
  }

  .geomitesCardOneTypographyFour,
  .vivagymCardOneTypographyFour {
    font-size: 16px;
  }

  .geomitesCardOneTypographyFive,
  .vivagymCardOneTypographyFive {
    font-size: 14px;
  }

  .geomitesCardOneTypographySix,
  .vivagymCardOneTypographySix {
    font-size: 12px;
  }

  .geomitesCardOneTypographySeven,
  .vivagymCardOneTypographySeven {
    font-size: 10px;
  }

  .geomitesCardOneTypographyEight,
  .vivagymCardOneTypographyEight {
    font-size: 8px;
  }

  .geomitesCardOneTypographyNine,
  .vivagymCardOneTypographyNine {
    font-size: 6px;
  }

  .geomitesCardOneTypographyTen,
  .vivagymCardOneTypographyTen {
    font-size: 5px;
  }
}

.geomitesCardColor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  align-items: center;
  justify-content: end;
  height: 168px;
}

.geomitesCardColorOne {
  background-color: #f5f0eb;
}

.geomitesCardColorTwo {
  background-color: #d6c1a6;
}

.geomitesCardColorThree {
  background-color: #b89474;
}

.geomitesCardColorOne p,
.geomitesCardColorTwo p,
.geomitesCardColorThree p {
  color: #2e1c0f;
}

.geomitesCardColorFour {
  background-color: #8c5e3c;
}

.geomitesCardColorFive {
  background-color: #5a3a1e;
}

.geomitesCardColorSix {
  background-color: #2e1c0f;
}

.geomitesCardColorFour p,
.geomitesCardColorFive p,
.geomitesCardColorSix p {
  color: #f5f0eb;
}

.geomitesIcon,
.artisteoIcon {
  height: 36px;
  width: 36px;
}

.vivagymCardColorOne {
  background-color: #ffe1cc;
}

.vivagymCardColorTwo {
  background-color: #ff9c66;
}

.vivagymCardColorThree {
  background-color: #fd5000;
}

.vivagymCardColorOne p,
.vivagymCardColorTwo p,
.vivagymCardColorThree p {
  color: #661f00;
}

.vivagymCardColorFour {
  background-color: #cc4000;
}

.vivagymCardColorFive {
  background-color: #992f00;
}

.vivagymCardColorSix {
  background-color: #661f00;
}

.vivagymCardColorFour p,
.vivagymCardColorFive p,
.vivagymCardColorSix p {
  color: #ffe1cc;
}

.artisteoIcon {
  color: var(--black);
}

.artisteoIcon path {
  stroke-width: 1px;
  stroke: var(--black);
}

.subSectionOneRowSpecialFrameFrame {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: flex-start;
}

.subSectionOneRowSpecialFrameFrameP i {
  font-size: 24px;
  color: var(--green);
  line-height: var(--lh-regular);
}

.subSectionOneRowSpecialFrameFrameN i {
  font-size: 24px;
  color: var(--red);
  line-height: var(--lh-regular);
}

.subSectionOneRowSpecialFrameFrameNSmall i {
  font-size: 16px;
  color: var(--red);
  line-height: var(--lh-small);
}

.improveFrameRegular {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.improveFrameRegular i {
  font-size: 20px;
  color: var(--primary-300);
  line-height: var(--lh-regular);
}

.improveFrameSmall {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}

.improveFrameSmall i {
  font-size: 16px;
  color: var(--primary-300);
  line-height: var(--lh-small);
}

.learningFrame {
  display: flex;
  padding: 1rem;
  border-radius: var(--br);
  border: 1.5px solid var(--white-500);
  background: var(--white-200);
  position: relative;
  flex: 1;
  overflow: hidden;
  height: 5.25rem;
}

.learningFrame::after {
  content: "\f091";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  font-size: 8rem;
  right: -1rem;
  bottom: -5rem;
  color: var(--primary-400);
  z-index: -1;
  pointer-events: none;
}

.teamFrame {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.teamFrame img {
  border-radius: var(--br);
}

.cardExperienceFrame {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.cardExperienceFrame svg {
  position: absolute;
  width: 6rem;
  height: 6rem;
  top: 1rem;
  right: 1rem;
  color: var(--primary-400);
}

.userResearchCard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--white-100);
  border: 1.5px solid var(--white-500);
  border-radius: var(--br);
}

.userResearchCardTitle {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.gridBrandCreation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto;
  gap: 1rem;
}

.gridBrandCreation img:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.gridBrandCreation img:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.gridBrandCreation img:nth-child(3) {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.artisteoCardTypography {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--br);
  background-color: var(--white-200);
  border: 1.5px solid var(--white-500);
  width: 100%;
  height: flex;
}

.artisteoCardOneTypographyFrame {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.artisteoCardOneTypographyOne {
  font-family: "Montserrat", sans-serif;
  font-size: 96px;
  font-weight: bold;
}

.artisteoCardOneTypographyTwo {
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-weight: bold;
}

.artisteoCardOneTypographyThree {
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 400;
}

.artisteoCardOneTypographyFour {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: bold;
}

.artisteoCardOneTypographyFive {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: bold;
}

.artisteoCardOneTypographySix {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: bold;
}

.artisteoCardOneTypographySeven {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: bold;
}

.artisteoCardOneTypographyEight {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.artisteoCardOneTypographyNine {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.artisteoCardOneTypographyTen {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 400;
}

@media (max-width: 1200px) {
  .artisteoCardOneTypographyOne {
    font-size: 48px;
  }

  .artisteoCardOneTypographyTwo {
    font-size: 24px;
  }

  .artisteoCardOneTypographyThree {
    font-size: 18px;
  }

  .artisteoCardOneTypographyFour {
    font-size: 16px;
  }

  .artisteoCardOneTypographyFive {
    font-size: 14px;
  }

  .artisteoCardOneTypographySix {
    font-size: 12px;
  }

  .artisteoCardOneTypographySeven {
    font-size: 10px;
  }

  .artisteoCardOneTypographyEight {
    font-size: 8px;
  }

  .artisteoCardOneTypographyNine {
    font-size: 6px;
  }

  .artisteoCardOneTypographyTen {
    font-size: 5px;
  }
}

.artisteoCardColor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  align-items: center;
  justify-content: end;
  height: 168px;
}

.artisteoCardColorOne {
  background-color: #ebfdfd;
}

.artisteoCardColorTwo {
  background-color: #92eded;
}

.artisteoCardColorThree {
  background-color: #4dcece;
}

.artisteoCardColorOne p,
.artisteoCardColorTwo p,
.artisteoCardColorThree p {
  color: #001010;
}

.artisteoCardColorFour {
  background-color: #1f9f9f;
}

.artisteoCardColorFive {
  background-color: #076161;
}

.artisteoCardColorSix {
  background-color: #001010;
}

.artisteoCardColorFour p,
.artisteoCardColorFive p,
.artisteoCardColorSix p {
  color: #ebfdfd;
}

.gridResponsiveSix {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
}

@media (min-width: 1201px) {
  .gridResponsiveSix {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
  }
}

.gridFive {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  width: 100%;
}

@media (max-width: 768px) {
  .gridFive {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cardDesignDecision {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--br);
  border: 1.5px solid var(--white-500);
  background-color: var(--white-100);
  position: relative;
}

.cardDesignDecisionFirstFrame {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--white-500);
}

.cardDesignDecisionFirstFrame > :first-child {
  padding-right: 3rem;
}

.cardDesignDecisionSecondFrame {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cardDesignDecisionSecondFrameOne {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  align-items: center;
}

.cardDesignDecisionSecondFrameOne i {
  font-size: 12px;
  color: var(--primary-300);
}

.cardDesignDecisionSecondFrameOne p {
  color: var(--primary-300);
}

.cardDesignDecisionThirdFrame {
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1.5px solid var(--white-500);
  border-bottom: 1.5px solid var(--white-500);
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  padding: 0.25rem 0.5rem;
}

.cardDesignDecisionThirdFrame h4 {
  color: var(--primary-300);
}

.cardInsightVivagym {
  display: flex;
  flex-direction: column;
}

.cardInsightVivagymFrameOne {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background-color: var(--white-100);
  border-radius: 1rem 1rem 0 0;
  border-left: 1.5px solid var(--white-500);
  border-top: 1.5px solid var(--white-500);
  border-right: 1.5px solid var(--white-500);
}

.cardInsightVivagymFrameTwo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background-color: var(--primary);
  border-radius: 0 0 1rem 1rem;
  border: 1.5px solid var(--primary-200);
}

.cardInsightVivagymFrameOneTitle,
.cardInsightVivagymFrameTwoTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.cardInsightVivagymFrameTwo p {
  color: var(--primary-500);
}

.cardInsightVivagymFrameTwo i {
  font-size: 1.25rem;
  color: #eedf04;
}

.impactCard {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.25rem;
  background-color: var(--white-100);
  border-radius: var(--br);
  border: 1.5px solid var(--white-500);
}

.impactCardTitle {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.cardPricesInfoSection {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.cardPricesInfoSectionFrame {
  flex: 2.5;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--white-200);
  gap: 0.25rem;
}

.cardPriceImage {
  flex: 1.5;
  object-fit: cover;
  width: 2rem;
  height: auto;
}

.cardOne .cardPricesInfoSectionFrame,
.cardThree .cardPricesInfoSectionFrame {
  border-radius: 0 1rem 1rem 0;
  text-align: left;
}

.cardOne .cardPriceImage,
.cardThree .cardPriceImage {
  border-radius: 1rem 0 0 1rem;
}

.cardTwo .cardPricesInfoSectionFrame,
.cardFour .cardPricesInfoSectionFrame {
  border-radius: 1rem 0 0 1rem;
  text-align: right;
}

.cardTwo .cardPriceImage,
.cardFour .cardPriceImage {
  border-radius: 0 1rem 1rem 0;
}

.cardPrices {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  border-radius: var(--br);
  border: 1.5px solid var(--white-500);
  flex: 1;
  padding-top: 3rem;
  position: relative;
}

@media (max-width: 1200px) {
  .cardPrices {
    padding: 1rem;
    padding-top: 3rem;
  }
}

.cardPricesFrameOne {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--white-500);
  align-items: center;
}

.cardPricesPrice {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.5rem;
}

.cardPricesFrameTwo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cardPricesFrameTwoSecondFrame,
.cardPricesFrameTwoFirst {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
}

.cardPricesFrameTwoSecondFrame p,
.cardPricesFrameTwoFirst p {
  text-align: left;
}

.cardPricesFrameTwoSecondFrame i {
  line-height: var(--lh-regular);
  color: var(--primary-300);
}

.cardPricesFrameTwoFirst i {
  line-height: var(--lh-regular);
}

span.cardPricesRecommended {
  display: block;
  position: absolute;
  top: 1rem;
  right: 0;
  text-align: center;
  width: 100%;
  color: var(--primary-300);
}

.sectionHeaderRow .cardPrices:nth-child(2) {
  border: 1px solid var(--primary-300);
}

.cardFAQs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--br);
  border-bottom: 1.5px solid var(--white-500);
  cursor: pointer;
  width: 100%;
}

.cardFAQs:hover {
  background: var(--white-200);
}

.cardFAQsFrame {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: flex-start;
}

.cardFAQs p.regularBold {
  text-align: left;
}

.cardFAQs p.regular {
  text-align: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.cardFAQs.active p.regular {
  max-height: 500px;
  opacity: 1;
}

.cardFAQsFrame i {
  line-height: var(--lh-regular);
  transition: transform 0.3s ease;
}

.cardFAQs.active .cardFAQsFrame i {
  transform: rotate(180deg);
}

/* buttonPannel */
.buttonPannel {
  display: flex;
  position: fixed;
  gap: 0.5rem;
  bottom: 6rem;
  right: 1rem;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1000;
  align-items: center;
}

.buttonPannelVariable {
  opacity: 0;
  transform: translateY(5%);
  visibility: hidden;
  transition: all 300ms ease-in-out;
}

.buttonPannelVariable.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.buttonPannelFixed,
.buttonPannelVariable {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media screen and (max-width: 1200px) {
  .buttonPannel {
    bottom: 1rem;
    right: 1rem;
  }
}

.graphContainer {
  display: flex;
  flex-direction: row;
  gap: 4rem;
  align-items: center;
}

.graphContainer img {
  width: 156px;
  height: 156px;
}

@media screen and (max-width: 1200px) {
  .graphContainer {
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
  }
  .graphContainer img {
    width: 128px;
    height: 128px;
  }
}

.graphContainerLeyend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.graphContainerLeyendFrame {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.graphContainerLeyendFrameElipse {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--white-500);
  border-radius: 50%;
}

.graphContainerLeyendFrameElipse.red {
  background-color: #fd5000;
}

.graphContainerLeyendFrameElipse.green {
  background-color: #ff9c66;
}

.graphContainerLeyendFrameElipse.yellow {
  background-color: #ffe1cc;
}

.graphContainerLeyendFrameElipse.neutral {
  background-color: var(--white-300);
}

.userFlowImage {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Progress bar container */
#scrollProgressBar {
  position: fixed;
  top: var(--nav-height, 73px);
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--primary-300);
  z-index: 9999;
}

.flowImage {
  border: 0.5px solid var(--black);
}

.surveyQuestion {
  display: flex;
  flex-direction: row;
  padding-left: 1rem;
  border-left: 1px solid var(--primary-300);
}

.surveyQuestion p {
  font-style: italic;
}

/* Copy container */
.copyContainer {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Chat container */
.chatContainer {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.chatContainer span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--green);
  opacity: 1;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}

.chatButton {
  transition: all 0.2s ease-in-out;
}

.chatButton:hover {
  text-decoration: underline;
}

/* Buttons */

.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  color: var(--primary-400);
  font-weight: 800;
  background-color: var(--primary-200);
  width: fit-content;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button-primary:hover {
  background-color: var(--primary-300);
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  background-color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button-secondary:hover {
  background-color: var(--white-300);
}

.button-secondary i {
  color: var(--black-300);
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--white-400);
  border: 0.5px solid var(--white-400);
}

.link {
  display: inline-flex;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
  width: auto;
  align-items: center;
  max-width: max-content;
}

.link:hover {
  color: var(--primary-300);
}

section ul {
  margin: 0;
  padding-left: 1.5rem;
  list-style: disc;
}

section ul li {
  padding: 0.5rem 1rem;
  color: var(--black);
}

section ul li::marker {
  color: var(--black);
}

.scroller ul {
  list-style: none;
}

/* cardSkill */

.sectionHeaderContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}

.cardSkill {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: .5px solid var(--white-500);  
  position: relative;
  overflow: hidden;
}

.cardSkillFrame {
  display: flex;
  flex-direction: column;
  gap: .25rem;  
}

.cardSkill i {
  position: absolute;
  font-size: 4rem;
  bottom: 1rem;
  right: 1rem;
  color: var(--primary-400);
  z-index: -1000;
}