:root {
  /* --- Neutral Primitives --- */
  --color-neutral-1: #0D0F11;
  --color-neutral-2: #16191B;
  --color-neutral-3: #1F2326;
  --color-neutral-4: #252A2E;
  --color-neutral-5: #2B3136;
  --color-neutral-6: #343A3F;
  --color-neutral-7: #41484D;
  --color-neutral-8: #5A6167;
  --color-neutral-9: #686F74;
  --color-neutral-10: #757C82;
  --color-neutral-11: #ADB5BB;
  --color-neutral-12: #FFFFFF;

  /* --- Accent Primitives --- */
  --color-accent-1: #130E0B;
  --color-accent-2: #1F1511;
  --color-accent-3: #341C11;
  --color-accent-4: #491D07;
  --color-accent-5: #58260E;
  --color-accent-6: #67341C;
  --color-accent-7: #7E442A;
  --color-accent-8: #A25836;
  --color-accent-9: #F97532;
  --color-accent-10: #EC6922;
  --color-accent-11: #FF9C6A;
  --color-accent-12: #FFDDCC;
  --color-accent-gradient: linear-gradient(to bottom right, #F97532, #F5590A);

  /* --- Status Primitives --- */
  --color-status-error: #F54F4E;
  --color-status-warning: #FE9E00;
  --color-status-success: #24BF5F;
  --color-status-info: #2E8CE2;

  /* --- Status Light --- */
  --color-status-error-light: rgba(245, 79, 78, 0.1);
  --color-status-warning-light: rgba(254, 158, 0, 0.1);
  --color-status-success-light: rgba(36, 191, 95, 0.1);
  --color-status-info-light: rgba(46, 140, 226, 0.1);

  /* --- Neutral Tokens --- */
  --color-bg-base: var(--color-neutral-1);
  --color-bg-subtle: var(--color-neutral-2);
  --color-bg-inverted: var(--color-neutral-12);
  --color-surface-base: var(--color-neutral-3);
  --color-surface-hover: var(--color-neutral-4);
  --color-surface-active: var(--color-neutral-5);
  --color-border-base: var(--color-neutral-6);
  --color-border-subtle: var(--color-neutral-3);
  --color-border-hover: var(--color-neutral-8);
  --color-border-solid: var(--color-neutral-9);
  --color-solid-base: var(--color-neutral-9);
  --color-solid-hover: var(--color-neutral-10);
  --color-solid-pressed: var(--color-neutral-11);
  --color-text-default: var(--color-neutral-12);
  --color-text-subtle: var(--color-neutral-11);
  --color-text-inverted: var(--color-neutral-1);
  --color-icon-default: var(--color-neutral-12);
  --color-icon-subtle: var(--color-neutral-11);
  --color-icon-inverted: var(--color-neutral-1);

  /* --- Accent Tokens --- */
  --color-accent-bg-base: var(--color-accent-1);
  --color-accent-bg-subtle: var(--color-accent-2);
  --color-accent-bg-inverted: var(--color-accent-12);
  --color-accent-surface-base: var(--color-accent-3);
  --color-accent-surface-hover: var(--color-accent-4);
  --color-accent-surface-active: var(--color-accent-5);
  --color-accent-border-base: var(--color-accent-6);
  --color-accent-border-subtle: var(--color-accent-7);
  --color-accent-border-hover: var(--color-accent-8);
  --color-accent-border-solid: var(--color-accent-9);
  --color-accent-solid-base: var(--color-accent-9);
  --color-accent-solid-hover: var(--color-accent-10);
  --color-accent-solid-pressed: var(--color-accent-11);
  --color-accent-text-default: var(--color-accent-9);
  --color-accent-text-subtle: var(--color-accent-8);
  --color-accent-text-inverted: var(--color-accent-1);
  --color-accent-icon-default: var(--color-accent-9);
  --color-accent-icon-subtle: var(--color-accent-8);
  --color-accent-icon-inverted: var(--color-accent-1);

  /* --- Typography Family --- */
  --font-family-headline: 'Geist', sans-serif;
  --font-family-body: 'Inter', sans-serif;

  /* --- Typography Tokens ---*/
  --font-size-headline-xxl: 96px;
  --font-size-hero: 72px;
  --line-height-hero: .86;
  --font-weight-headline: 700;
  --font-size-headline-xl: 60px;
  --line-height-headline-xl: 86px;
  --font-size-headline-lg: 48px;
  --line-height-headline-lg: 100px;
  --font-size-headline-md: 34px;
  --line-height-headline-md: 100px;
  --font-size-headline-sm: 24px;
  --line-height-headline-sm: 100px;
  --font-size-subtitle-l: 20px;
  --line-height-subtitle-l: 1;
  --font-size-subtitle-m: 16px;
  --line-height-subtitle-m: 1;
  --font-size-subtitle-s: 14px;
  --line-height-subtitle-s: 1;
  --font-size-body-l: 18px;
  --line-height-body-l: 20px;
  --font-size-body-m: 16px;
  --line-height-body-m: 18px;
  --font-size-body-s: 14px;
  --line-height-body-s: 16px;
  --font-size-caption: 12px;
  --line-height-caption: 1;
  --font-size-overline: 10px;
  --line-height-overline: 1;
}

html {
  /* 🔑 Propiedad Clave: Fuerza un desplazamiento animado */
  scroll-behavior: smooth;
}
* {
  box-sizing:border-box;
}
body {
  padding: 0 3rem 5rem 3rem;
  margin:0;
  font-family: var(--font-family-body), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  color: var(--color-text-default);
  background-color: var(--color-bg-base);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8.75rem;
  transition: all ease-in-out 300ms;
}
a {
  text-decoration: none;
  color: var(--color-text-default);
}
p {
  margin: 0;
}

/* Animate */
.badge.animate__animated {
  --animate-delay: 9s;
}

/* Navbar */
.navbar {
  width: 100%;
  max-width: 900px;
  margin: 2.5rem 1.5rem 0 1.5rem;
  padding: 12px 12px 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 990;
  border: 1px solid var(--color-border-base);
  border-radius: 999px;
  background-color: #0f0f0f10;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0px 4px 4px #00000025;
}
.navbar-menu {
  display: flex;
  align-items: center;
  gap: 24px;
}
.navbar-menu-item {
  color: var(--color-text-default);
  font-size: var(--font-size-body-l);
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  white-space: nowrap;
  display: inline-block;
  position: relative;
}
.navbar-menu-item.active {
  font-weight: 800;
}
.navbar-menu-item:hover {
  color: var(--color-accent-text-default);
}
.navbar-menu-item::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--color-accent-text-default);
  transition: transform 0.25s ease-out;
}
.navbar-menu-item:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


/* Header */
.hero-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
header {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 75rem;
  height: 43.75rem;
  background-image: url("https://creehaz.com/assets/Images/bg-grid.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
}
.hero-text {
  font-size: var(--font-size-hero);
  font-family: var(--font-family-headline);
  line-height: var(--line-height-hero);
  font-weight: 800;
  text-align: center;
  margin: 0;
}

.accent-text-color {
  color: var(--color-accent-text-default);
}

.badge {
  font-family: var(--font-size-body-l);
  line-height: 1;
  color: var(--color-text-subtle);
  background-color: var(--color-surface-base);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border-base);
  box-shadow: 0px 4px 4px #00000025;
  transition: all ease-in 200ms;
}
.badge:hover {
  /* transform: rotate(-2deg); */
}

.hero-description {
  max-width: 600px;
  font-size: var(--font-size-subtitle-l);
  color: var(--color-text-subtle);
  text-align: center;
}

.btn-actions {
  display: flex;
  gap: 24px;
}

.button-solid-l {
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-accent-gradient);
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: 0px -2px 1px #00000010 inset, 0px 2px 1px #ffffff20 inset, 0px 0px 32px #F9753225;
  /* font style */
  font-size: var(--font-size-subtitle-l);
  font-weight: 800;
  color: var(--color-text-default);
  transition: all ease-in-out 280ms;
}
.button-solid-l i {
  color: var(--color-icon-default);
  font-size: 1.25rem;
  transition: all ease-in 200ms;
}
.button-solid-m:hover, .button-solid-l:hover {
  box-shadow: 0px -2px 1px #00000010 inset, 0px 2px 1px #ffffff20 inset, 0px 0px 32px rgba(249, 117, 50, 0.5);
}
.button-outline-l:hover i, .button-outline-m:hover i, .button-solid-l:hover i, .button-solid-m:hover i, .button-outline-l:hover img {
  transform: translateX(-2px) translateY(-2px) rotate(-6deg) scale(1.1);
}

.button-outline-l {
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--color-bg-base);
  padding: 12px 24px;
  border: 1px solid var(--color-border-solid);
  border-radius: 999px;
  /* font style */
  font-size: var(--font-size-subtitle-l);
  font-weight: 800;
  color: var(--color-text-default);
  transition: all ease-in-out 280ms;
}
.button-outline-l i {
  color: var(--color-icon-default);
  font-size: 1.25rem;
  transition: all ease-in 200ms;
}
.button-outline-l img {
  transition: all ease-in 200ms;
}
.button-outline-l:hover {
  background-color: var(--color-bg-subtle);
}

.button-solid-m {
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-accent-gradient);
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: 0px -2px 1px #00000010 inset, 0px 2px 1px #ffffff20 inset, 0px 0px 32px rgba(249, 117, 50, 0.25);
  /* font style */
  font-size: var(--font-size-subtitle-m);
  font-weight: 800;
  color: var(--color-text-default);
  transition: all ease-in-out 280ms;
}
.button-solid-m i {
  color: var(--color-icon-default);
  font-size: 1rem;
  transition: all ease-in 200ms;
}

.divider {
  max-width: 800px;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    var(--color-border-base) 25%,
    var(--color-border-base) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}
.divider.solid {
  max-width: 1200px;
  background-color: var(--color-border-base);
}


/* Brand slider */
.brands {
  max-width: 75rem;
  width: 100%;
  overflow: hidden;
  -ms-overflow-style: none;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}
.brands::-webkit-scrollbar { 
  display: none;
}
.brands ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: max-content;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  animation: scroll-left 30s linear infinite;
  pointer-events: none;
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); 
  }
}
.brand {
  padding: 0;
  margin: 0 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.brand-img {
  width: 2.5rem;
  height: 2.5rem;
}
.brand-text {
  font-size: var(--font-size-headline-sm);
  font-weight: 800;
  color: var(--color-text-subtle);
}


/* Inner section */
.section {
  max-width: 1200px;
  width: 100%;
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}
.section-title {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.section-title__title {
  font-size: var(--font-size-headline-xl);
  font-family: var(--font-family-headline);
  line-height: var(--line-height-hero);
  font-weight: 800;
  text-align: center;
}
.section-description {
  max-width: 43.75rem;
  font-size: var(--font-size-subtitle-l);
  color: var(--color-text-subtle);
  text-align: center;
}
.carvy-logo {
  height: 3.75rem;
}

/* Feature Card */
.carvy-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  position: relative;
  padding-top: 2.5rem;
}

.cards-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.feature-card {
  width: 21.25rem;
  height: 15.5rem;
  padding: 4.5rem 1.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border: solid var(--color-border-subtle) 1px;
  border-radius: 24px;
  background-color: var(--color-bg-base);
  background-image: linear-gradient(
    to bottom left,
    rgba(249, 117, 50, 0.2) 0%,
    transparent 50%
  );
  position: relative;
  z-index: 20;
  overflow: hidden;
}
.feature-card__title {
  font-size: var(--font-size-headline-sm);
  font-weight: 800;
  line-height: 1;
}
.feature-card__description {
  margin: 0;
  font-size: var(--font-size-subtitle-l);
  letter-spacing: -0.15px;
  color: var(--color-text-subtle);
  line-height: 1;
}
.feature-card__icon {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  pointer-events: none;
}
.feature-card__bg-text {
  width: 200px;
  opacity: 5%;
  font-size: var(--font-size-headline-xxl);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -1.5px;
  text-align: right;
  color: var(--color-accent-text-default);
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}

.container-mockup {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
}
.carvy-mockup-container {
  width: 27.5rem;
  height: 600px;
  padding: 2.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mockup-bg {
  width: 27.5rem;
  height: 100%;
  position: absolute;
  border-radius: 2rem;
  border: solid var(--color-border-base) 1px;
  mask-image: linear-gradient(
    to bottom,
    transparent 25%,
    var(--color-border-base) 100%
  );
}
.carvy-mockup {
  width: 360px;
  height: 600px;
  pointer-events: none;
}

.sub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding-left: 1.5rem;
  border-radius: 999px;
  background-color: var(--color-bg-subtle);
}
.sub-btn__text {
  font-size: var(--font-size-body-m);
  color: var(--color-text-subtle);
  pointer-events: none;
}


/* About Us */
.team-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}
.avatar-xl {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 1.5rem;
  width: 15rem;
  height: 20rem;
  border: 1px var(--color-border-base) solid;
  border-radius: 4rem;
  transition: all ease-in 280ms;
}
.avatar-xl:hover {
  transform: scale(.98);
}
.avatar-xl:hover .avatar-xl__info {
  transform: scale(1.04);
}
.avatar-xl.avatar-des {
  background-image: url("https://creehaz.com/assets/Images/photo-des.png");
  background-size: cover;
}
.avatar-xl.avatar-dev {
  background-image: url("https://creehaz.com/assets/Images/photo-dev.png");
  background-size: cover;
}
.avatar-xl__info {
  width: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding-bottom: .75rem;
  transition: all ease-in 280ms;
}
.avatar-xl__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.avatar-name {
  font-size: var(--font-size-headline-sm);
  font-weight: 800;
  white-space: nowrap;
}
.avatar-sign {
  font-family: 'Oooh Baby';
  font-size: 24px;
  font-weight: 800;
  color: var(--color-accent-text-default);
}
.social-media-container {
  display: flex;
  gap: 1.5rem;
}
.blur-fade {
  width: 100%;
  height: 120px;
  position: absolute;
  margin-bottom: 0;
  border-radius: 0 0 4rem 4rem;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask: linear-gradient(to bottom, transparent 0%,rgba(0,0,0, 1) 25%);
}

.sub-page-section {
  margin-top: 10rem;
  max-width: 800px;
  padding: 0 3rem;
  color: var(--color-text-default);
}
.sub-page-section p, .sub-page-section li {
  color: var(--color-text-subtle);
}

/* Footer */
footer {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-direction: column;
  padding: 2.5rem;
  background-color: var(--color-bg-base);
  border: solid 1px var(--color-border-base);
  border-radius: 2.5rem;
}
.footer-row {
  width: 100%;
  display: flex;
  gap: 5rem;
}
.footer-cl {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  gap: 2.5rem;
}
.full-w {
  width: 100%;
}
.cl-carvy-headline {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  gap: .75rem;
}

.footer-cl__title {
  font-size: var(--font-size-headline-sm);
  font-weight: 800;
}
.footer-cl__text {
  font-size: var(--font-size-body-l);
  white-space: nowrap;
}
.footer-cl__menu-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  gap: .75rem;
}
.ico-social {
  transition: all ease-in 200ms;
}
.ico-social:hover {
  transform: translateX(-2px) translateY(-2px) rotate(-6deg) scale(1.1);
}

.bottom-fade {
  width: 100%;
  height: 7.5rem;
  background-image: linear-gradient(
    to top,
    var(--color-bg-base) 0%,
    transparent 100%
  );
  position: fixed;
  bottom: 0;
  z-index: 900;
}



/* Responsive */
@media (max-width: 1024px) {
  body {
    padding: 0 1.5rem 5rem 1.5rem;
  }
  .navbar {
    width: 90%;
  }
  .carvy-container {
    justify-content: center;
    gap: 1.5rem;
  }
  .cards-container {
    padding-top: 30rem;
  }
  .footer-row.mobile-cl {
    flex-direction: column;
  }
  .footer-row {
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  :root {
    /* HEADLINE XXL (96px) -> pasa a HERO (72px) */
    --font-size-headline-xxl: 72px;
    
    /* HERO (72px) -> pasa a HEADLINE XL (60px) */
    --font-size-hero: 60px;

    /* HEADLINE XL (60px) -> pasa a HEADLINE LG (48px) */
    --font-size-headline-xl: 48px;

    /* HEADLINE LG (48px) -> pasa a HEADLINE MD (34px) */
    --font-size-headline-lg: 34px;

    /* HEADLINE MD (34px) -> pasa a HEADLINE SM (24px) */
    --font-size-headline-md: 24px;

    /* HEADLINE SM (24px) -> pasa a SUBTITLE L (20px) */
    --font-size-headline-sm: 20px;
    
    /* SUBTITLE L (20px) -> pasa a SUBTITLE M (16px) */
    --font-size-subtitle-l: 16px;

    /* SUBTITLE M (16px) -> pasa a SUBTITLE S (14px) */
    --font-size-subtitle-m: 14px;

    /* SUBTITLE S (14px) -> pasa a BODY S (14px) - Sin cambio real, pero se mantiene la relación */
    --font-size-subtitle-s: 14px;
    
    /* BODY L (18px) -> pasa a BODY M (16px) */
    --font-size-body-l: 16px;

    /* BODY M (16px) -> pasa a BODY S (14px) */
    --font-size-body-m: 14px;
    
    /* BODY S (14px) -> pasa a CAPTION (12px) */
    --font-size-body-s: 12px;
    
    /* CAPTION (12px) -> pasa a OVERLINE (10px) */
    --font-size-caption: 10px;
    
    /* OVERLINE (10px) se mantiene, no se redefine. */
  }
  
  body {
    padding: 0 1rem 5rem 1rem;
  }
  header {
    height: 50rem;
    padding-top: 5rem;
  }
  .navbar-menu {
    display: none;
  }
  .btn-actions {
    width: 100%;
    max-width: 18.75rem;
    flex-direction: column;
    gap: 1.5rem;
  }
  .carvy-container {
    flex-direction: column;
  }
  .container-mockup {
    position: relative;
  }
  .carvy-mockup-container {
    width: 100%;
    max-width: 27.5rem;
    height: auto;
    padding: 0;
  }
  .carvy-mockup {
    width: 100%;
    max-width: 22.5rem;
    height: auto;
    padding: 0 1.5rem;
  }
  .mockup-bg {
    width: 100%;
    max-width: 27.5rem;
  }
  .cards-container {
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
  }
  .feature-card {
    width: 100%;
    max-width: 27.5rem;
    height: auto;
  }
  .footer-row {
    flex-direction: column;
  }
  .team-container {
    width: 100%;
    gap: 1.5rem;
  }
  .avatar-xl {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: 100%;
    min-width: 140px;
    border-radius: 2rem;
  }
  .avatar-name, .avatar-sign {
    font-size: var(--font-size-subtitle-l);
  }
  .mockup-bg {
    width: 100%;
    max-width: 27.5rem;
  }
  .cards-container {
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
  }
  .feature-card {
    width: 100%;
    max-width: 27.5rem;
    height: auto;
  }
  .footer-row {
    flex-direction: column;
  }
  .team-container {
    width: 100%;
    gap: 1.5rem;
  }
  .avatar-xl {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: 100%;
    min-width: 140px;
    border-radius: 2rem;
  }
  .avatar-name, .avatar-sign {
    font-size: var(--font-size-subtitle-l);
  }
}