/* ========================================
   GLOBAL COLOR VARIABLES
   ======================================== */
:root {
  /* Primary */
  --color-red: #F92C4D;

  /* Blacks */
  --color-black: #14141A;

  /* Grays */
  --color-gray-text: #4F4F59;        /* Main text gray for copy (.text-gray) */
  --color-gray-light: #78787D;       /* Lighter gray for titles/subtitles */
  --color-gray-border: #CCCCD4;      /* Borders and light text (.border-gray-300, .text-gray-300/400) */
  --color-gray-bg: #F5F5F9;          /* Light background (.bg-gray) */

  /* White */
  --color-white: #ffffff;
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: normal;
  src:
    local("Satoshi Regular"),
    url("../fonts/Satoshi-Medium.woff") format("woff");
}
[data-aos] {
  overflow-anchor: none;
}

.aos-init:not(.aos-animate) {
  overflow: hidden;
}

/* Contener AOS sin romper sticky */
main {
  overflow-x: clip;
}
h1,
h2,
.title {
  font-family: "Barlow Condensed", sans-serif;
  font-style: normal;
}

label {
  font-family: "Barlow Condensed", sans-serif;
}

.condensed {
  letter-spacing: -4px;
}

p,
nav a,
a,
.satoshi {
  font-family:
    "Satoshi",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

.blured {
  background: rgba(20, 20, 26, 0.24);
  backdrop-filter: blur(10px);
}

.hero h1,
.hero h2 {
  font-size: 156px;
  line-height: 1;
}

.hero-title {
  font-size: 89px;
  line-height: 0.95;
}

.reviews-title {
  font-size: 15rem;
  line-height: 0.95;
}

/* btn */
.btn-cta {
  background-color: transparent;
}

.btn-cta:hover {
  background-color: var(--color-red);
}

.btn-cta svg path {
  fill: var(--color-red);
  transition: fill 0.3s ease;
}

.btn-cta:hover svg path {
  fill: var(--color-white);
}

/* ========================================
   COLOR UTILITY CLASSES
   ======================================== */

/* Red */
.text-red {
  color: var(--color-red);
}

.bg-red {
  background-color: var(--color-red);
}

/* Black */
.text-black {
  color: var(--color-black);
}

.bg-black {
  background-color: var(--color-black);
}

/* Gray - Main text */
.text-gray {
  color: var(--color-gray-text);
}

/* Gray - Background */
.bg-gray {
  background-color: var(--color-gray-bg);
}

/* Tailwind gray overrides */
.text-gray-500 {
  color: var(--color-gray-text) !important;
}

.text-gray-300,
.text-gray-400 {
  color: var(--color-gray-border) !important;
}

.bg-gray-300 {
  background-color: var(--color-gray-border) !important;
}

.border-gray-300,
.border-gray-400 {
  border-color: var(--color-gray-border) !important;
}

.hover\:text-gray-300:hover {
  color: var(--color-gray-border) !important;
}

/* ML11 soporte */
.ml11 .letter {
  display: inline-block;
  line-height: 1em;
}

.ml11 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

/* 👉 OCULTAMOS LA BARRA, PERO NO LA ELIMINAMOS */
.ml11 .line {
  opacity: 0;
  width: 0;
}

.pricing-bg {
  background-image: url("../img/pattern.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.stack-wrapper {
  position: relative;
}

/* cada sección */
.stack-section {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* visible */
.stack-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bg-pattern-top {
  background-image: url("../img/pattern.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* slide */

.slider-wrapper {
  width: 100vw;
  height: 707px;
  overflow: hidden;
}

.slider-track {
  display: flex;
  width: max-content;
  animation: slide-loop 60s linear infinite;
  /* animation: slide-loop 80s linear infinite; //finoli  */
}

.slide {
  width: 33.3333vw;
  height: 707px;
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes slide-loop {
  from {
    transform: translateX(0);
  }

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

/* responsive */
@media (max-width: 1024px) {
  .slide {
    width: 50vw;
  }
}

@media (max-width: 640px) {
  .slider-wrapper {
    height: 350px;
  }
  .slide {
    width: auto;
    height: 350px;
    object-fit: scale-down;
  }
}

.border-red {
  border-color: #F92C4D !important;
}