/* ============================================
   R&M - Requena & Mueller - Custom CSS
   ============================================ */

/* ---- Base ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---- Selection ---- */
::selection {
  background: #E31623;
  color: #fff;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #E31623;
  border-radius: 3px;
}


/* ============================================
   HEADER
   ============================================ */

/* Default header state (transparent over hero) */
#header {
  background: transparent;
}

#header .header-text {
  color: #0E0E0E;
}

#header .header-logo {
  filter: none;
}

/* Scrolled state */
#header.is-scrolled {
  background: #FFFFFF;
  box-shadow: 0 1px 10px rgba(0,0,0,0.06);
}

/* Menu open state */
#header.menu-open .header-text {
  color: #0E0E0E;
}

/* Burger lines */
.menu-burger .burger-line {
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.3s ease;
}

.menu-burger.is-active .burger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.menu-burger.is-active .burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-burger.is-active .burger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Language dropdown */
.language-dropdown:hover .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown-menu {
  transform: translateY(-5px);
}


/* ============================================
   FULLSCREEN NAVIGATION
   ============================================ */

#nav-fullscreen {
  transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  overflow-y: auto;
}

#nav-fullscreen.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-link-text {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

#nav-fullscreen.is-open .nav-link-text {
  transform: translateY(0);
}

.nav-sidebar-content {
  transition: opacity 0.6s ease 0.4s;
}

#nav-fullscreen.is-open .nav-sidebar-content {
  opacity: 1;
}

/* Staggered animation for menu items */
.nav-menu-item:nth-child(1) .nav-link-text { transition-delay: 0.1s; }
.nav-menu-item:nth-child(2) .nav-link-text { transition-delay: 0.15s; }
.nav-menu-item:nth-child(3) .nav-link-text { transition-delay: 0.2s; }
.nav-menu-item:nth-child(4) .nav-link-text { transition-delay: 0.25s; }
.nav-menu-item:nth-child(5) .nav-link-text { transition-delay: 0.3s; }


/* ============================================
   HERO
   ============================================ */

.hero-title,
.hero-subtitle,
.hero-scroll-btn {
  opacity: 0;
  transform: translateY(30px);
}

.hero-title.is-visible,
.hero-subtitle.is-visible,
.hero-scroll-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero image mask reveal */
.hero-image-section {
  overflow: hidden;
}

.hero-image-section img {
  transform: scale(1.08);
  transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-image-section.is-revealed img {
  transform: scale(1);
}


/* ============================================
   SECTION SUBTITLES
   ============================================ */

.section-subtitle {
  letter-spacing: 0.15em;
  font-weight: 500;
}


/* ============================================
   RED SEPARATORS
   ============================================ */

.red-separator {
  transform: scaleX(0);
  transform-origin: left center;
}

.red-separator.is-visible {
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}


/* ============================================
   BUTTONS
   ============================================ */

.btn-ball {
  position: relative;
  overflow: hidden;
}

.btn-ball::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.btn-ball:hover::before {
  width: 300px;
  height: 300px;
}


/* ============================================
   SERVICES SWIPER
   ============================================ */

.services-swiper {
  overflow: visible;
}

.services-swiper .swiper-slide {
  height: auto;
  width: auto;
}

.service-card {
  border-right: 1px solid rgba(14, 14, 14, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.service-detail .service-card{
  border-right: initial;
}

.service-card p {
  flex: 1;
}

/* Custom scrollbar for slider */
.swiper-scrollbar-custom {
  position: relative;
}

.swiper-scrollbar-drag-custom {
  position: absolute;
  top: 0;
  left: 0;
}


/* ============================================
   STATS COUNTERS
   ============================================ */

.counter-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}


/* ============================================
   QUOTE
   ============================================ */

#quote h3 {
  letter-spacing: 0.08em;
}


/* ============================================
   CLIENT LOGOS
   ============================================ */

.client-logo img {
  filter: grayscale(100%);
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.client-logo:hover img {
  filter: grayscale(0%);
}


/* ============================================
   CTA SECTION
   ============================================ */

.cta-title {
  letter-spacing: -0.02em;
}


/* ============================================
   FOOTER
   ============================================ */

.footer-logo-wrap img {
  mix-blend-mode: multiply;
}


/* ============================================
   SCROLL ANIMATIONS (data-animate)
   ============================================ */

[data-animate="fadeIn"] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-animate="fadeIn"].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================
   TOOLTIP (Trabajemos Juntos hover)
   ============================================ */

.cta-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 40;
  width: 230px;
  height: 260px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  border-radius: 4px;
}

.cta-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

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


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
  .services-swiper .swiper-slide {
    width: 85vw;
  }

  .service-card {
    border-right: none;
    border-bottom: 1px solid rgba(14, 14, 14, 0.1);
    padding-bottom: 2rem;
    padding-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .services-swiper .swiper-slide {
    width: 45vw;
  }
}

@media (min-width: 1024px) {
  .services-swiper .swiper-slide {
    width: calc(33.333% - 0px);
  }
}

/* Print styles */
@media print {
  #header,
  #nav-fullscreen,
  .site-overlay {
    display: none !important;
  }
}