/* Overrides propios de STG sobre el template. Cargado después de style.css. */

/* Fuente de marca STG: Mont (demo → ExtraLight + Heavy). El "bold" de marca = Heavy. */
@font-face {
  font-family: "Mont";
  src: url("/fonts/Mont-HeavyDEMO.otf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("/fonts/Mont-ExtraLightDEMO.otf") format("opentype");
  font-weight: 200 300;
  font-style: normal;
  font-display: swap;
}

/* Wordmark de texto (reemplaza el logo del template) — en Mont Heavy. */
.stg-wordmark {
  display: inline-block;
  font-family: "Mont", sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: #fff;
}

/* Lockup del logo SOLO en el header: "stg" (Mont) + divisor vertical + nombre en 3 líneas
   (Helvetica light, mayúsculas pequeñas, tracking amplio), centrado verticalmente con el "stg". */
.header__logo .stg-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
  line-height: 1;
}
.header__logo .stg-lockup__mark {
  font-family: "Mont", sans-serif;
  /* Mont HEAVY real (el demo trae Heavy). Sin text-stroke: engrosar la ExtraLight la distorsionaba
     y dejaba de leerse como Mont. Heavy = Mont auténtico + bold de verdad. */
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: lowercase;
}
.header__logo .stg-lockup__rule {
  flex: 0 0 auto;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.3);
}
.header__logo .stg-lockup__name {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

/* Acciones del header (lang switch + CTA) alineadas a la derecha. */
.header__actions {
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.header__lang {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.header__lang:hover {
  opacity: 1;
}
.header__lang i {
  margin-right: 5px;
  font-size: 12px;
}

/* Nombres de cliente como texto dentro del swiper (los logos son texto por decisión de marca). */
.client-slider-active .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.client-name {
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: -0.03em;
  color: currentColor;
  opacity: 0.55;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.client-slider-active .swiper-slide:hover .client-name {
  opacity: 1;
}

/* Header CTA a RAS con el pill: sin espacio a la derecha; el botón tapa el extremo
   derecho del pill como si fueran un solo elemento (mismo alto, extremo redondeado, sin gap). */
.header-area__inner {
  padding-right: 0;
}
.header__actions {
  gap: 18px;
}
/* CTA "Contáctanos" = vidrio esmerilado BLANCO real (translúcido, NO blanco sólido). */
.header__actions .rr-btn {
  display: inline-flex;
  align-items: center;
  height: 75px;
  padding: 0 34px;
  border-radius: 0 70px 70px 0;
  margin-right: -1px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 0;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  color: #fff;
}
/* La "cortina" de hover del template (::before blanco sólido) → brillo sutil de vidrio. */
.header__actions .rr-btn::before {
  background: rgba(255, 255, 255, 0.16);
}
.header__actions .rr-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}
/* Texto SIEMPRE blanco legible sobre el vidrio (el template lo volvía negro en hover). */
.header__actions .rr-btn .btn-wrap .text-one,
.header__actions .rr-btn .btn-wrap .text-two,
.header__actions .rr-btn:hover .btn-wrap .text-two {
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Vidrio consistente también cuando el header va sticky. */
.header-sticky.sticky .header__actions .rr-btn,
.header-sticky.transformed .header__actions .rr-btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  border-left: 0;
  color: #fff;
}

/* Header sticky con glassmorphism sofisticado al hacer scroll: el pill queda fixed + centrado,
   fondo translúcido con blur en vez de la barra blanca del template. */
.header-sticky.sticky,
.header-sticky.transformed {
  background-color: transparent !important;
  padding-top: 12px;
}
.header-sticky.sticky .header-area__inner,
.header-sticky.transformed .header-area__inner {
  height: 75px;
  background: rgba(14, 16, 20, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.3);
}

/* Award title: el max-width del template (775px) parte el heading en 4 líneas. Se ensancha → 2 líneas. */
@media (min-width: 1200px) {
  .award-area .section-title {
    max-width: 1040px;
  }
}

/* Footer CTA: la columna es angosta y a 80px "Construyamos tu ventaja" cae en 3 líneas feas
   (con "tu" solo). Se reduce el tamaño para que quede en 2 líneas limpias. */
.footer-area .footer-widget-wrapper-box .content .title {
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -1.5px;
}
@media only screen and (max-width: 1399px) {
  .footer-area .footer-widget-wrapper-box .content .title {
    font-size: 44px;
  }
}

/* Copyright: pequeño y tenue, sin protagonismo. */
.copyright-area .copyright-text .text {
  font-size: 13px;
  opacity: 0.45;
}

/* Footer refinado: títulos de columna (Compañía/Redes/Oficina) como labels pequeños en mayúsculas
   + listas más pequeñas, para que se vea ordenado y jerárquico (no texto grande/pesado).
   El CTA grande (.content .title "Construyamos tu ventaja") se excluye con :not(.content). */
.footer-area .footer-widget-box:not(.content) .title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 22px;
}
.footer-area .footer-nav-list li a,
.footer-area .footer-nav-list li span {
  font-size: 15px;
  line-height: 1.55;
}
.footer-area .footer-nav-list li {
  margin-bottom: 6px;
}

/* Inner pages (no home): más aire entre el header fijo y la primera sección en desktop
   (el contenido quedaba muy pegado al nav). El home ya tiene su propio padding en el hero. */
@media (min-width: 992px) {
  .inner-main {
    padding-top: 60px;
  }
}

/* Timeline (award-area reutilizada): el AÑO prominente como ancla + micro-interacción (translate en
   hover) para darle vida sin perder el minimal. La fila ya se oscurece en hover (template). */
.stg-timeline .award-box .category {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.5;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.stg-timeline .award-box .award,
.stg-timeline .award-box .year {
  transition: transform 0.4s ease;
}
.stg-timeline .award-box:hover .category,
.stg-timeline .award-box:hover .award {
  transform: translateX(8px);
}
.stg-timeline .award-box:hover .category {
  opacity: 1;
}
/* Tag de fase (columna derecha): bold + mayúsculas, pequeño. */
.stg-timeline .award-box .year {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* Casos (work-area): las imágenes vienen en aspectos dispares (1600×870 vs 805×630) → alturas
   desalineadas. Se normalizan a un aspecto uniforme con object-fit cover para que queden a la misma altura. */
.work-area .work-box .thumb .image {
  aspect-ratio: 16 / 10;
}
.work-area .work-box .thumb .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contacto: el page-title (140px) desborda su columna izquierda. Se reduce + line-height ajustado
   (a 100px el interlineado del template quedaba demasiado separado). */
.contact-title .page-title {
  font-size: 100px;
  line-height: 0.98;
}
@media (max-width: 1599px) {
  .contact-title .page-title {
    font-size: 78px;
  }
}

/* Rejilla vertical sutil sobre el fondo oscuro: 1 línea al centro + 2 laterales que forman una
   columna de 1440px (las laterales solo en desktop). Apenas visibles, no interfieren (pointer-events:none). */
.bg-grid {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  max-width: 100vw;
  pointer-events: none;
  z-index: 490;
}
.bg-grid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.04);
}
@media (min-width: 1441px) {
  .bg-grid {
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
  }
}

/* Nav en sentence case — el template forzaba capitalize ("Casos De Éxito", "Trabaja Con Nosotros"),
   que en español es incorrecto. Los labels ya vienen bien escritos desde nav.js. */
/* Nav top-level en MAYÚSCULAS, 14px, con algo de opacidad (no tan blanco). */
.main-menu > ul > li > a {
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 0.05em;
  opacity: 0.82;
}
.main-menu > ul > li > a:hover {
  opacity: 1;
}
/* Dropdown/mega en sentence case (los labels ya vienen bien escritos). */
.main-menu ul.dp-menu li a,
.main-menu .mega-menu li a {
  text-transform: none;
}

/* Hero title: el max-width del template (740px) parte un título corto en 4 líneas
   (una palabra por línea). Lo ensancho y reduzco un poco → 2 líneas limpias. */
@media (min-width: 1200px) {
  .hero-area .section-content .section-title {
    font-size: 100px;
    max-width: 1000px;
  }
}
@media (min-width: 1920px) {
  .hero-area .section-content .section-title {
    font-size: 124px;
    max-width: 1260px;
  }
}

/* Loader: el template lo pinta naranja (--action: #FA814D). STG lo quiere negro.
   La "cortina" que sube (el círculo hacia arriba) es el #svg → lo dejo NEGRO, y el fondo
   del loader transparente para que al subirse revele el sitio (sin flash blanco ni naranja).
   El wordmark "stg" queda blanco sobre la cortina negra. */
.loader-wrap {
  background: transparent;
}
.loader-wrap svg {
  fill: #000000;
}
.loader-wrap .loader-wrap-heading .load-text {
  color: #ffffff;
  font-family: "Mont", sans-serif;
  font-weight: 900;
  text-transform: lowercase;
  font-size: 52px;
  opacity: 0.9;
  letter-spacing: -0.02em;
}

/* Mega-menú "Servicios": tarjeta glassmorphic sofisticada (translúcido oscuro + blur + borde/sombra
   + radio), NO el negro sólido plano del template. */
.main-menu .mega-menu {
  /* Emerge de la NADA: además del gradiente de fondo, una MÁSCARA desvanece el top del elemento
     completo (incluido el backdrop-blur) de transparente → opaco. Así el blur hace gradiente
     en vez de cortarse con un borde duro — se percibe etéreo, brotando del header. */
  background: linear-gradient(to bottom, rgba(14, 16, 20, 0) 0%, rgba(14, 16, 20, 0.78) 52px);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 34px 60px rgba(0, 0, 0, 0.35);
  padding: 46px 44px 34px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 42px);
}
/* Links: sin fondo sólido (el template les ponía background negro) → dejan ver el vidrio;
   más prominentes/blancos que los headings, con hover elegante. */
.main-menu .mega-menu li a {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease, background 0.25s ease;
}
.main-menu .mega-menu li a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
/* Headings de categoría: más pequeños, mayúsculas, opacidad reducida y tracking → jerarquía clara
   por debajo de los links. */
.main-menu .mega-menu .title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  opacity: 0.5;
  color: #fff;
  background: transparent;
  height: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 14px;
  margin-bottom: 14px;
}