* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #EEEEEE;
}

:root {
  --stb-white: #ffffff;
  --stb-black: #000000;
  --stb-gray: #858585;
  --stb-border-gray: #C1C1C1;

  --stb-purple: rgb(172, 64, 191);
  --stb-sky-blue: rgb(3, 244, 252);
  --stb-blue: #6197D9;
  --stb-dark-gray: #262727;
  --stb-orange: rgb(225, 75, 0);
  --stb-yellow-orange: rgb(253, 189, 75);
  --stb-pink: rgb(245, 87, 126);
  --stb-space: 32px;
}

/* Gradients */
.gradient-purple-to-sky-blue {
  background-image: linear-gradient(90deg, rgb(67.451% 25.098% 74.902%) 0%, rgb(63.309% 29.51% 76.397%) 6.25%, rgb(59.167% 33.922% 77.892%) 12.5%, rgb(55.025% 38.333% 79.387%) 18.75%, rgb(50.882% 42.745% 80.882%) 25%, rgb(46.74% 47.157% 82.377%) 31.25%, rgb(42.598% 51.569% 83.873%) 37.5%, rgb(38.456% 55.98% 85.368%) 43.75%, rgb(34.314% 60.392% 86.863%) 50%, rgb(30.172% 64.804% 88.358%) 56.25%, rgb(26.029% 69.216% 89.853%) 62.5%, rgb(21.887% 73.627% 91.348%) 68.75%, rgb(17.745% 78.039% 92.843%) 75%, rgb(13.603% 82.451% 94.338%) 81.25%, rgb(9.461% 86.863% 95.833%) 87.5%, rgb(5.319% 91.275% 97.328%) 93.75%, rgb(1.176% 95.686% 98.824%) 100%);
}

.gradient-yellow-orange-to-pink {
  background-image: linear-gradient(90deg, rgb(99.216% 74.118% 29.412%) 0%, rgb(99.02% 71.618% 30.662%) 6.25%, rgb(98.824% 69.118% 31.912%) 12.5%, rgb(98.627% 66.618% 33.162%) 18.75%, rgb(98.431% 64.118% 34.412%) 25%, rgb(98.235% 61.618% 35.662%) 31.25%, rgb(98.039% 59.118% 36.912%) 37.5%, rgb(97.843% 56.618% 38.162%) 43.75%, rgb(97.647% 54.118% 39.412%) 50%, rgb(97.451% 51.618% 40.662%) 56.25%, rgb(97.255% 49.118% 41.912%) 62.5%, rgb(97.059% 46.618% 43.162%) 68.75%, rgb(96.863% 44.118% 44.412%) 75%, rgb(96.667% 41.618% 45.662%) 81.25%, rgb(96.471% 39.118% 46.912%) 87.5%, rgb(96.275% 36.618% 48.162%) 93.75%, rgb(96.078% 34.118% 49.412%) 100%);
}

.gradient-pink-to-yellow-orange {
  background-image: linear-gradient(90deg, rgb(92.941% 11.765% 47.451%) 0%, rgb(93.284% 15.343% 45.931%) 6.25%, rgb(93.627% 18.922% 44.412%) 12.5%, rgb(93.971% 22.5% 42.892%) 18.75%, rgb(94.314% 26.078% 41.373%) 25%, rgb(94.657% 29.657% 39.853%) 31.25%, rgb(95% 33.235% 38.333%) 37.5%, rgb(95.343% 36.814% 36.814%) 43.75%, rgb(95.686% 40.392% 35.294%) 50%, rgb(96.029% 43.971% 33.775%) 56.25%, rgb(96.373% 47.549% 32.255%) 62.5%, rgb(96.716% 51.127% 30.735%) 68.75%, rgb(97.059% 54.706% 29.216%) 75%, rgb(97.402% 58.284% 27.696%) 81.25%, rgb(97.745% 61.863% 26.176%) 87.5%, rgb(98.088% 65.441% 24.657%) 93.75%, rgb(98.431% 69.02% 23.137%) 100%);
}

.gradient-orange-black {
  background: radial-gradient(ellipse 80% 80% at center 5%,
      #E14B00 0%,
      #000000 75%);
}

.text-white {
  color: var(--stb-white) !important;
}

.text-black {
  color: var(--stb-black) !important;
}

.text-gray {
  color: var(--stb-gray) !important;
}

.block {
  display: block;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 600;
}

.font-black {
  font-weight: 900;
}

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

/* Font sizes */
.text-xs {
  font-size: 0.75rem;
  /* 12px */
  line-height: 1rem;
  /* 16px */
}

.text-sm {
  font-size: 0.875rem;
  /* 14px */
  line-height: 1.25rem;
  /* 20px */
}

.text-base {
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
  line-height: clamp(1.4rem, 1.2rem + 0.3vw, 1.5rem);
}

.text-lg {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.125rem);
  line-height: clamp(1.6rem, 1.3rem + 0.4vw, 1.75rem);
}

.text-xl {
  font-size: clamp(1.15rem, 1.1rem + 0.4vw, 1.25rem);
  line-height: clamp(1.6rem, 1.4rem + 0.4vw, 1.75rem);
}

.text-2xl {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.5rem);
  line-height: clamp(1.8rem, 1.6rem + 0.5vw, 2rem);
}

.text-3xl {
  font-size: clamp(1.7rem, 1.5rem + 0.8vw, 1.875rem);
  line-height: clamp(2rem, 1.8rem + 0.6vw, 2.25rem);
}

.text-4xl {
  font-size: clamp(2rem, 1.8rem + 1vw, 2.25rem);
  line-height: clamp(2.2rem, 2rem + 0.8vw, 2.5rem);
}

.text-5xl {
  font-size: clamp(2.4rem, 2rem + 1.5vw, 3rem);
  line-height: 1;
}

.text-6xl {
  font-size: clamp(3rem, 2.5rem + 1.5vw, 3.75rem);
  line-height: 1;
}

.text-7xl {
  font-size: clamp(3.4rem, 2.8rem + 1.8vw, 4.5rem);
  line-height: 1;
}

.text-8xl {
  font-size: clamp(4.2rem, 3.2rem + 2vw, 6rem);
  line-height: 1;
}

.text-9xl {
  font-size: clamp(5rem, 3.8rem + 3vw, 8rem);
  line-height: 1;
}

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

header.page-header h1 {
  color: #858585;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.6em;
  text-align: center;
}

header.page-header h1,
header.page-header p {
  text-wrap: pretty;
}

header.page-header {
  padding: 80px var(--stb-space);
}

.w-full {
  width: 100%;
}

.spacer {
  height: clamp(10vh, 140px, 20vh);
}

.relative {
  position: relative;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media screen and (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media screen and (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media screen and (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media screen and (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.flex-lg {
  display: flex;
  gap: 80px;
  flex-direction: column;
}

.flex-lg.reverse {
  flex-direction: column-reverse;
}

.flex-lg>div {
  flex: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

@media screen and (min-width: 1024px) {

  .flex-lg.reverse,
  .flex-lg {
    flex-direction: row;
  }
}


.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 640px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.section-spacing {
  padding-top: 60px;
  padding-bottom: 140px;
}

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

.center-content {
  display: grid;
  place-content: center;
}

.spaced-text {
  text-transform: uppercase;
  font-size: 26px;
  color: var(--stb-gray);
  letter-spacing: 12px;
}

.heading-bold {
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: clamp(52px, 6vw, 97px);
  color: var(--stb-dark-gray);
}

.heading-black {
  font-weight: 900;
  font-size: clamp(46px, 12vw, 92px);
  line-height: clamp(64px, 12vw, 112px);
  text-transform: capitalize;
  color: var(--stb-dark-gray);
}

.heading-white {
  font-weight: 900;
  font-size: clamp(46px, 12vw, 92px);
  line-height: clamp(64px, 12vw, 112px);
  text-transform: capitalize;
  color: var(--stb-white);
}

/* BUTTONS */
.btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0px 20px;
  height: 40px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  text-align: center;
  text-decoration: none !important;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-pill {
  border-radius: 60px;
}

.btn-pill-white {
  border-radius: 60px;
  border: 1px solid var(--stb-white) !important;
  color: var(--stb-white) !important;
}

.btn-white {
  background-color: var(--stb-white);
  color: #000 !important;
  border: 1px solid var(--stb-gray);
}

.btn-white:hover {
  background-color: var(--stb-gray-light);
  color: #000 !important;
}

.btn-white:disabled,
.btn-white.disabled {
  background-color: var(--stb-gray);
  color: var(--stb-gray-dark) !important;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-white:hover {
  background-color: #f2f2f2;
}

.btn-circle {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 1px solid;
  overflow: hidden;
  color: var(--stb-black);
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  overflow: hidden;
}

.btn-circle.white-aspect {
  border-color: var(--stb-white);
  transition: border-color ease 200ms;
}

.btn-circle.white-aspect:hover {
  border-color: var(--stb-black);
}

/* Fondo degradado */
.btn-circle .background {
  position: absolute;
  border-radius: 50%;
  inset: 0;
  z-index: 0;
  /* detrás del contenido */
  opacity: 0;
  transition: opacity 300ms ease;
  /* ahora sí animamos opacidad */
}

/* Hover: se muestra */
.btn-circle:hover .background {
  opacity: 1;
}

/* Contenido por encima del fondo */
.btn-circle svg,
.btn-circle .btn-text {
  position: relative;
  z-index: 1;
}

.btn-circle.white-aspect svg path {
  stroke: var(--stb-white);
  transition: stroke ease 200ms;
}

.btn-circle.white-aspect:hover svg path {
  stroke: var(--stb-black);
}

.btn-circle.white-aspect .btn-text {
  color: var(--stb-white);
  transition: color ease 200ms;
}

.btn-circle.white-aspect:hover .btn-text {
  color: var(--stb-black);
}

.btn-circle:visited {
  color: var(--stb-black);
}

.btn--light {
  color: white;
}

.btn--light svg path {
  stroke: white;
}


/* Pattern placeholder */
.placeholder {
  background-color: #ffffff;
  opacity: 0.8;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg, #cecece 0, #cecece 1px, #ffffff 0, #ffffff 50%);
}

.skip-text-decoration {
  text-decoration: none !important;
}

/* GSAP initial style for animated elements */
.gsap-fade-reveal {
  opacity: 0;
}