:root {
  --navy: #14213D;
  --orange: #FCA311;
  --blue: #1B1BA0;
  --black: #000000;
  --white: #ffffff;
  --max-width: clamp(1024px, 72vw, 1320px);
  --service-strip-height: 56px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--white);
  color: var(--black);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* =========================================================
   Navegación
   La cabecera permanece disponible al hacer scroll y cambia
   automáticamente a la versión clara sobre la sección oscura.
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 42px 24px 18px;
  color: var(--black);
  background: transparent;
  transition: color .28s ease, background-color .28s ease, padding .28s ease, box-shadow .28s ease;
}

.site-header.is-scrolled {
  padding-top: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 1px 0 rgba(20, 33, 61, .08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header.is-dark {
  color: var(--white);
}

.site-header.is-dark.is-scrolled {
  background: var(--navy);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.nav-shell {
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 36px;
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 158px;
  height: 66px;
}

.brand-logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 158px;
  height: 66px;
  object-fit: contain;
  transition: opacity .24s ease;
}

.brand-logo-light {
  opacity: 1;
}

.brand-logo-dark {
  opacity: 0;
}

.site-header.is-dark .brand-logo-light {
  opacity: 0;
}

.site-header.is-dark .brand-logo-dark {
  opacity: 1;
}

.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 50px;
  font-size: 15px;
  font-weight: 700;
}

.main-nav > a:not(.contact-btn) {
  position: relative;
  padding: 10px 0;
}

.main-nav > a:not(.contact-btn)::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transition: left .2s ease, right .2s ease;
}

.main-nav > a:not(.contact-btn):hover::after {
  left: 0;
  right: 0;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 18px;
  border: 2px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  font-weight: 700;
  transition: color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}

.contact-btn:hover {
  color: var(--white);
  background: var(--blue);
  transform: translateY(-1px);
}

.whatsapp-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
}

.site-header.is-dark .contact-btn {
  color: var(--white);
  border-color: var(--white);
}

.site-header.is-dark .contact-btn:hover {
  color: var(--navy);
  background: var(--white);
}

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  border-radius: 999px;
}

/* =========================================================
   Inicio completo
   El Hero y la cinta de servicios forman exactamente la primera
   pantalla en escritorio. La cinta queda anclada al borde inferior
   del Inicio y el fondo oscuro comienza hasta la siguiente sección.
   ========================================================= */
.home-section {
  /* Usa el alto visible real del navegador. No imponemos un mínimo
     fijo: barras de favoritos/herramientas reducen el viewport y
     antes provocaban que la franja inferior quedara fuera de vista. */
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--service-strip-height);
  overflow: hidden;
  background: var(--white);
}

.home-section .hero {
  min-height: 0;
  height: 100%;
}

.home-section .service-strip {
  height: var(--service-strip-height);
  min-height: var(--service-strip-height);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 655px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 165px 24px 52px;
  background: var(--white);
}

.hero-wave-background {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -92px;
  width: clamp(1180px, 100vw, 1800px);
  aspect-ratio: 1440 / 900;
  transform: translateX(-50%);
  background-image: url("assets/fondo-difuminado.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  opacity: 0;
  animation: heroWaveFadeIn 2.5s ease-out .25s forwards;
}

@keyframes heroWaveFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-content {
  position: relative;
  z-index: 3;
  width: min(900px, 100%);
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(58px, 6.8vw, 88px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 800;
}

.hero h1 span {
  color: var(--orange);
}

.hero-break-mobile {
  display: none;
}

.hero-break-desktop {
  display: inline;
}

.hero p {
  margin: 48px auto 0;
  max-width: 800px;
  font-size: 18px;
  line-height: 1.48;
  letter-spacing: -0.015em;
  font-weight: 500;
}

.accent-line {
  width: 266px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 50%, var(--orange) 82%, var(--orange) 100%);
}

.service-strip {
  position: relative;
  z-index: 5;
  height: var(--service-strip-height);
  min-height: var(--service-strip-height);
  background: var(--navy);
  color: var(--white);
}

.service-strip-inner {
  width: min(980px, calc(100% - 40px));
  height: 100%;
  min-height: var(--service-strip-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(44px, 4.2vw, 72px);
  font-size: 14px;
  font-weight: 800;
}

.service-strip-inner i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
}

/* Separador entre el Hero (con su franja de servicios) y "Por qué HYPER":
   ambos usan fondo navy, así que esta franja blanca marca visualmente
   que son secciones distintas. */
.section-divider {
  height: clamp(40px, 4vw, 56px);
  background: var(--white);
}
/* =========================================================
   POR QUÉ HYPER — "Así trabajamos"
   La ilustración de la carretera (assets/carretera.svg,
   exportada de Canva) se usa como fondo a pantalla completa en todos
   los tamaños de pantalla: la columna de texto queda encima, en un
   ancho más angosto en celular para dejar ver el camino a la derecha.
   La entrada se revela una sola vez, activada por IntersectionObserver
   desde el HTML.
   ========================================================= */
.why-hyper {
  position: relative;
  overflow: hidden;
  padding: clamp(132px, 11vw, 158px) 0 clamp(100px, 9vw, 136px);
  background: var(--navy);
  color: var(--white);
}

.why-road-background {
  display: block;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(480px, 130vw, 640px);
  background-color: var(--navy);
  background-image: url('assets/carretera.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

.why-hyper-shell {
  position: relative;
  z-index: 2;
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
}

.why-hyper-intro {
  max-width: clamp(640px, 46vw, 760px);
}

.why-eyebrow {
  margin: 0 0 24px;
  color: var(--orange);
  font-size: 21px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .4em;
}

.why-hyper h2 {
  margin: 0 0 28px;
  font-size: clamp(80px, 4.2vw, 98px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.why-lead {
  margin: 0 0 36px;
  max-width: 620px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(20px, 1.05vw, 23px);
  line-height: 1.55;
  letter-spacing: -0.015em;
  font-weight: 500;
}

.why-list {
  list-style: none;
  margin: 0 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.why-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.why-item-icon {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}

.why-item-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-item-copy h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 1.15vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.why-item-copy p {
  margin: 0;
  color: rgba(255, 255, 255, .64);
  font-size: clamp(18px, .95vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Entrada: la sección revela su contenido una sola vez al hacer scroll */
.why-eyebrow,
.why-hyper h2,
.why-lead,
.why-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}

.why-hyper h2 { transition-delay: .08s; }
.why-lead { transition-delay: .16s; }
.why-item:nth-child(1) { transition-delay: .26s; }
.why-item:nth-child(2) { transition-delay: .34s; }
.why-item:nth-child(3) { transition-delay: .42s; }
.why-item:nth-child(4) { transition-delay: .5s; }

.why-hyper.is-visible .why-eyebrow,
.why-hyper.is-visible .why-hyper-intro h2,
.why-hyper.is-visible .why-lead,
.why-hyper.is-visible .why-item {
  opacity: 1;
  transform: none;
}

.why-road-background {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1) .2s;
}

.why-hyper.is-visible .why-road-background {
  opacity: 1;
}

@media (min-width: 1081px) {
  .why-hyper {
    display: flex;
    align-items: center;
    padding: clamp(32px, 3.5vw, 64px) 0;
    /* La sección puede ocupar una pantalla, pero nunca obliga a
       medir 680 px si la ventana visible es más baja. */
    min-height: calc(var(--vh, 1vh) * 100);
  }

  .why-road-background {
    top: 102px;
    bottom: 0;
    height: auto;
    background-position: right 85%;
  }

  .why-list {
    margin-left: 120px;
  }
}

@media (max-width: 620px) {
  .why-hyper {
    padding: clamp(104px, 16vw, 124px) 0 clamp(72px, 10vw, 92px);
    min-height: calc(clamp(480px, 130vw, 640px) + 200px);
  }

  .why-eyebrow {
    font-size: 13px;
    letter-spacing: .32em;
  }

  .why-hyper h2 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .why-lead {
    font-size: 15px;
  }

  .why-lead {
    margin-bottom: 28px;
  }

  .why-list {
    gap: 20px;
    margin: 0;
  }

  .why-hyper-intro {
    max-width: 78%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-eyebrow,
  .why-hyper h2,
  .why-lead,
  .why-item,
  .why-road-background {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   SOLUCIONES — composición editorial en tres columnas
   ========================================================= */
.solutions-section {
  position: relative;
  scroll-margin-top: 92px;
  overflow: hidden;
  background: #f7f7f5;
  color: var(--navy);
}

.solutions-shell {
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(112px, 9vw, 154px) 0 clamp(108px, 8vw, 144px);
}

.solutions-heading {
  margin-bottom: clamp(66px, 6vw, 92px);
}

.solutions-eyebrow {
  margin: 0 0 28px;
  color: var(--orange);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .40em;
}

.solutions-heading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(60px, 7vw, 120px);
  align-items: end;
}

.solutions-heading h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(48px, 5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.052em;
  font-weight: 800;
}

.solutions-intro {
  margin: 0 0 6px;
  max-width: 460px;
  color: rgba(20, 33, 61, .72);
  font-size: clamp(16px, 1.18vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.018em;
  font-weight: 500;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(20, 33, 61, .20);
  border-bottom: 1px solid rgba(20, 33, 61, .20);
}

.solution-item {
  position: relative;
  min-width: 0;
  min-height: 400px;
  padding: 38px clamp(30px, 3.2vw, 50px) 40px;
  display: flex;
  flex-direction: column;
  transition: background-color .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}

.solution-item + .solution-item {
  border-left: 1px solid rgba(20, 33, 61, .20);
}

.solution-topline {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--orange);
  transition: width .42s cubic-bezier(.22, 1, .36, 1);
}

.solution-number {
  display: block;
  margin-bottom: clamp(54px, 5vw, 78px);
  color: var(--orange);
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .14em;
}

.solution-item h3 {
  margin: 0;
  max-width: 330px;
  font-size: clamp(25px, 2.15vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.solution-item p {
  margin: 22px 0 0;
  max-width: 335px;
  color: rgba(20, 33, 61, .70);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  letter-spacing: -0.012em;
  font-weight: 500;
}

.solution-mark {
  display: block;
  width: 38px;
  height: 3px;
  margin-top: auto;
  background: var(--orange);
  border-radius: 999px;
  transform-origin: left center;
  transition: width .34s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .solution-item:hover {
    background: rgba(255, 255, 255, .72);
  }

  .solution-item:hover .solution-topline {
    width: 100%;
  }

  .solution-item:hover .solution-mark {
    width: 72px;
  }
}

.continuation-placeholder {
  min-height: 1px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 1440px) {
  .site-header {
    padding-top: clamp(42px, 3.1vw, 58px);
  }

  .hero {
    min-height: clamp(655px, 38vw, 700px);
    padding-top: clamp(150px, 10vw, 185px);
  }

  .hero-content {
    width: min(1040px, 100%);
  }

  .hero h1 {
    font-size: clamp(88px, 6.11vw, 110px);
  }

  .hero p {
    max-width: 900px;
    font-size: clamp(18px, 1.25vw, 21px);
  }

  .service-strip-inner {
    width: min(1040px, calc(100% - 40px));
    font-size: clamp(14px, .92vw, 16px);
  }
}


/* =========================================================
   Responsive por ALTURA (desktop / laptop)
   Algunos navegadores dejan menos alto útil por barras de favoritos,
   pestañas o UI propia. Estas reglas compactan el Hero y la sección
   "Por qué HYPER" sin cambiar su composición ni depender del navegador.
   ========================================================= */
@media (min-width: 861px) and (max-height: 780px) {
  :root {
    --service-strip-height: 52px;
  }

  .site-header {
    padding-top: 24px;
    padding-bottom: 12px;
  }

  .site-header.is-scrolled {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .brand,
  .brand-logo {
    width: 142px;
    height: 58px;
  }

  .hero {
    padding: clamp(104px, calc(var(--vh, 1vh) * 17), 128px) 24px 22px;
  }

  .hero h1 {
    font-size: clamp(56px, calc(var(--vh, 1vh) * 10.2), 78px);
    line-height: 1.02;
  }

  .hero p {
    margin-top: clamp(24px, calc(var(--vh, 1vh) * 4.2), 32px);
    font-size: 16px;
    line-height: 1.42;
  }

  .accent-line {
    margin-top: 12px;
  }

  .hero-wave-background {
    top: -72px;
    width: clamp(1080px, 94vw, 1580px);
  }

  .service-strip-inner {
    min-height: var(--service-strip-height);
    font-size: 13px;
  }
}

@media (min-width: 1081px) and (max-height: 780px) {
  .why-hyper {
    min-height: calc(var(--vh, 1vh) * 100);
    padding: 94px 0 28px;
  }

  .why-road-background {
    top: 82px;
  }

  .why-eyebrow {
    margin-bottom: 14px;
    font-size: 15px;
  }

  .why-hyper h2 {
    margin-bottom: 18px;
    font-size: clamp(52px, calc(var(--vh, 1vh) * 8.3), 68px);
    line-height: 1.02;
  }

  .why-lead {
    margin: 0 0 24px;
    max-width: 610px;
    font-size: 16px;
    line-height: 1.45;
  }

  .why-list {
    margin: 0 0 0 76px;
    gap: 14px;
  }

  .why-item {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
  }

  .why-item-icon {
    width: 20px;
    height: 20px;
  }

  .why-item-copy h3 {
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.22;
  }

  .why-item-copy p {
    font-size: 14px;
    line-height: 1.35;
  }
}

@media (min-width: 861px) and (max-height: 680px) {
  :root {
    --service-strip-height: 48px;
  }

  .site-header {
    padding-top: 16px;
    padding-bottom: 8px;
  }

  .brand,
  .brand-logo {
    width: 132px;
    height: 52px;
  }

  .main-nav {
    font-size: 13px;
  }

  .hero {
    padding-top: 88px;
    padding-bottom: 14px;
  }

  .hero h1 {
    font-size: clamp(50px, calc(var(--vh, 1vh) * 9.4), 64px);
  }

  .hero p {
    margin-top: 20px;
    font-size: 15px;
  }

  .accent-line {
    height: 3px;
    margin-top: 10px;
  }

  .service-strip-inner {
    font-size: 12px;
  }

  .why-hyper {
    padding-top: 76px;
    padding-bottom: 20px;
  }
}

@media (max-width: 1180px) {
  .main-nav {
    gap: 31px;
    font-size: 14px;
  }

  .brand,
  .brand-logo {
    width: 144px;
  }

}

@media (max-width: 1080px) {
  :root {
    --max-width: 940px;
  }

  .site-header {
    padding-top: 30px;
  }

  .hero {
    padding-top: 190px;
  }

}

@media (max-width: 860px) {
  .home-section {
    height: auto;
    min-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .home-section .hero {
    height: auto;
    min-height: 650px;
    flex: 1 1 auto;
  }

  .home-section .service-strip {
    height: auto;
    min-height: 56px;
    flex: 0 0 auto;
  }

  .site-header,
  .site-header.is-scrolled {
    padding: 16px 20px 12px;
  }

  .nav-shell {
    width: 100%;
  }

  .brand,
  .brand-logo {
    width: 132px;
    height: 56px;
  }

  .menu-toggle {
    display: block;
    position: relative;
    z-index: 30;
  }

  .main-nav {
    position: absolute;
    top: 76px;
    left: 20px;
    right: 20px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px;
    color: var(--black);
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(20, 33, 61, .10);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(20, 33, 61, .16);
    backdrop-filter: blur(12px);
  }

  .site-header.is-dark .main-nav {
    color: var(--white);
    background: rgba(20, 33, 61, .98);
    border-color: rgba(255, 255, 255, .12);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav > a:not(.contact-btn) {
    padding: 14px 12px;
  }

  .contact-btn {
    margin-top: 8px;
  }

  .hero {
    min-height: 650px;
    padding-top: 185px;
  }

  .hero-wave-background {
    top: -40px;
    width: 1080px;
  }

  .hero h1 {
    font-size: clamp(50px, 9.3vw, 72px);
  }

  .hero p {
    margin-top: 38px;
    font-size: 16px;
  }

  .desktop-break {
    display: none;
  }

  .service-strip-inner {
    gap: 22px;
    justify-content: center;
    font-size: 12px;
  }

}

@media (max-width: 620px) {
  .hero {
    min-height: 690px;
    padding: 275px 22px 88px;
  }

  .hero-wave-background {
    top: 120px;
    width: 900px;
  }

  .hero h1 {
    font-size: clamp(34px, 10vw, 61px);
    line-height: 1.02;
  }

  .hero-break-desktop {
    display: none;
  }

  .hero-break-mobile {
    display: inline;
  }

  .hero p {
    margin-top: 34px;
    font-size: 15px;
    line-height: 1.55;
  }

  .accent-line {
    width: 190px;
    height: 3px;
    margin-top: 18px;
  }

  .service-strip {
    padding: 14px 20px;
  }

  .service-strip-inner {
    width: 100%;
    height: auto;
    min-height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    text-align: center;
    font-size: 11px;
  }

  .service-strip-inner i {
    width: 6px;
    height: 6px;
  }

}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition: none !important;
  }

  .hero-wave-background {
    animation: none;
    opacity: 1;
  }

}

/* SOLUCIONES — responsive */
@media (max-width: 980px) {
  .solutions-heading-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .solutions-intro {
    max-width: 620px;
  }

  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .solution-item {
    min-height: 0;
    padding: 32px 4px 38px;
  }

  .solution-item + .solution-item {
    border-left: 0;
    border-top: 1px solid rgba(20, 33, 61, .20);
  }

  .solution-number {
    margin-bottom: 30px;
  }

  .solution-item h3,
  .solution-item p {
    max-width: 620px;
  }

}

@media (max-width: 620px) {
  .solutions-shell {
    width: min(100% - 36px, 560px);
    padding-top: 90px;
    padding-bottom: 92px;
  }

  .solutions-heading {
    margin-bottom: 52px;
  }

  .solutions-eyebrow {
    margin-bottom: 22px;
    font-size: 13px;
    letter-spacing: .32em;
  }

  .solutions-heading h2 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .solutions-intro {
    font-size: 16px;
  }

  .solution-item {
    padding-block: 30px 34px;
  }
}

/* =========================================================
   INICIO — AJUSTE MOBILE (V24)
   El Hero + la franja de servicios ocupan exactamente el alto
   visible del navegador. La franja siempre queda dentro del
   primer viewport y sus tres textos se mantienen en una sola línea.
   ========================================================= */
@media (max-width: 860px) {
  .home-section {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 48px;
    overflow: hidden;
    background: var(--white);
  }

  .home-section .hero {
    height: 100%;
    min-height: 0;
    flex: initial;
    align-items: center;
    padding: 82px 22px 22px;
  }

  .home-section .service-strip,
  .service-strip {
    height: 48px;
    min-height: 48px;
    padding: 0;
    overflow: hidden;
  }

  .service-strip-inner {
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 9px;
    text-align: center;
    font-size: clamp(8px, 2.15vw, 10px);
    line-height: 1;
  }

  .service-strip-inner span {
    white-space: nowrap;
    flex: 0 1 auto;
  }

  .service-strip-inner i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
  }
}

@media (max-width: 620px) {
  .home-section .hero {
    min-height: 0;
    padding: 82px 22px 20px;
  }

  .service-strip,
  .home-section .service-strip {
    padding: 0;
  }

  .service-strip-inner {
    width: 100%;
    height: 48px;
    min-height: 48px;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 0 8px;
    font-size: clamp(7.4px, 2.05vw, 8.8px);
  }

  .service-strip-inner i {
    width: 4px;
    height: 4px;
    flex-basis: 4px;
  }
}

/* =========================================================
   POR QUÉ HYPER — AJUSTE MOBILE (V25)
   Reduce la densidad tipográfica y reserva el lado derecho
   para la carretera, evitando que el texto se superponga.
   ========================================================= */
@media (max-width: 620px) {
  .why-hyper {
    min-height: calc(var(--vh, 1vh) * 100);
    padding: 92px 0 54px;
    overflow: hidden;
  }

  .why-hyper-shell {
    width: calc(100% - 40px);
    margin: 0 auto;
  }

  .why-hyper-intro {
    max-width: 100%;
  }

  .why-eyebrow {
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .30em;
  }

  .why-hyper h2 {
    margin-bottom: 18px;
    font-size: clamp(38px, 10.8vw, 46px);
    line-height: 1.02;
  }

  .why-lead {
    max-width: 92%;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.45;
  }

  /* La lista ocupa solamente el lado izquierdo. */
  .why-list {
    position: relative;
    z-index: 3;
    width: 58%;
    max-width: 230px;
    margin: 0;
    gap: 14px;
    text-align: left;
  }

  .why-item {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  .why-item-icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }

  .why-item-copy h3 {
    margin: 0 0 3px;
    font-size: 15px;
    line-height: 1.18;
    letter-spacing: -.01em;
  }

  .why-item-copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.34;
  }

  /*
   * La carretera queda confinada al lado derecho y ligeramente
   * desplazada hacia abajo. Así conserva presencia visual sin
   * invadir los textos de los cuatro pasos.
   */
  .why-road-background {
    top: 322px;
    right: -26%;
    bottom: -18px;
    left: 54%;
    height: auto;
    background-position: right bottom;
    background-size: auto 100%;
  }
}

@media (max-width: 420px) {
  .why-hyper {
    padding-top: 86px;
    padding-bottom: 46px;
  }

  .why-hyper-shell {
    width: calc(100% - 34px);
  }

  .why-hyper h2 {
    font-size: clamp(36px, 10.2vw, 42px);
  }

  .why-lead {
    max-width: 94%;
    font-size: 13px;
    line-height: 1.42;
  }

  .why-list {
    width: 59%;
    max-width: 220px;
    gap: 13px;
  }

  .why-item-copy h3 {
    font-size: 14px;
  }

  .why-item-copy p {
    font-size: 11.5px;
    line-height: 1.32;
  }

  .why-road-background {
    top: 310px;
    left: 55%;
    right: -31%;
  }
}

/* =========================================================
   POR QUÉ HYPER — MOBILE V26
   Mantiene la carretera completa y visible a la derecha,
   mientras compacta y carga los 4 pasos hacia la izquierda.
   ========================================================= */
@media (max-width: 620px) {
  .why-hyper {
    min-height: calc(var(--vh, 1vh) * 100);
    padding: 86px 0 34px;
    overflow: hidden;
  }

  .why-hyper-shell {
    width: calc(100% - 34px);
    margin: 0 auto;
  }

  .why-hyper-intro {
    max-width: 100%;
  }

  .why-eyebrow {
    margin-bottom: 15px;
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: .30em;
  }

  .why-hyper h2 {
    margin-bottom: 16px;
    font-size: clamp(34px, 9.7vw, 42px);
    line-height: 1.02;
  }

  .why-lead {
    max-width: 88%;
    margin-bottom: 20px;
    font-size: 12.5px;
    line-height: 1.42;
  }

  /*
   * Los pasos se mantienen deliberadamente angostos y pegados
   * al margen izquierdo. El camino ocupa visualmente la mitad
   * derecha sin pasar por encima del copy.
   */
  .why-list {
    position: relative;
    z-index: 3;
    width: 48%;
    max-width: 205px;
    margin: 0;
    gap: 11px;
    text-align: left;
  }

  .why-item {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
  }

  .why-item-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
  }

  .why-item-copy h3 {
    margin: 0 0 2px;
    font-size: 13px;
    line-height: 1.16;
    letter-spacing: -.012em;
  }

  .why-item-copy p {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.28;
  }

  /*
   * Volvemos a usar TODO el ancho de la sección para el SVG.
   * El SVG se muestra completo en vertical (contain por altura),
   * desplazado hacia la izquierda para que la trayectoria completa
   * sea visible sin invadir la columna principal de lectura.
   */
  .why-road-background {
    top: 190px;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    background-size: auto 72%;
    background-position: calc(100% - 18px) bottom;
  }
}

@media (max-width: 420px) {
  .why-hyper {
    padding-top: 82px;
    padding-bottom: 30px;
  }

  .why-hyper-shell {
    width: calc(100% - 30px);
  }

  .why-hyper h2 {
    font-size: clamp(32px, 9.4vw, 38px);
  }

  .why-lead {
    max-width: 90%;
    margin-bottom: 18px;
    font-size: 11.8px;
    line-height: 1.4;
  }

  .why-list {
    width: 47%;
    max-width: 185px;
    gap: 10px;
  }

  .why-item {
    grid-template-columns: 15px minmax(0, 1fr);
    gap: 6px;
  }

  .why-item-icon {
    width: 15px;
    height: 15px;
  }

  .why-item-copy h3 {
    font-size: 12px;
    line-height: 1.15;
  }

  .why-item-copy p {
    font-size: 9.7px;
    line-height: 1.25;
  }

  .why-road-background {
    top: 190px;
    background-size: auto 70%;
    background-position: calc(100% - 22px) bottom;
  }
}

/* =========================================================
   POR QUÉ HYPER — MOBILE V28
   Carretera más amplia hacia la esquina superior izquierda.
   El borde derecho del SVG queda fuera del viewport para evitar
   que se vea la línea vertical del archivo de fondo.
   ========================================================= */
@media (max-width: 620px) {
  .why-road-background {
    /* Al aumentar la escala por altura, la curva superior se extiende
       naturalmente más hacia arriba y hacia la izquierda. */
    background-size: auto 88%;

    /* Dejamos el borde derecho del SVG unos píxeles fuera del viewport.
       Así desaparece la línea vertical que se alcanzaba a ver y, gracias
       al mayor tamaño, la carretera conserva más presencia hacia la izquierda. */
    background-position: calc(100% + 16px) bottom;
  }
}

@media (max-width: 420px) {
  .why-road-background {
    background-size: auto 86%;
    background-position: calc(100% + 14px) bottom;
  }
}


/* =========================================================
   POR QUÉ HYPER — MOBILE V29
   Ajustes solicitados:
   - Carretera ligeramente más grande.
   - Texto con mayor margen interno (más abajo y a la derecha).
   - Lead con mejor ancho para evitar cortes incómodos como "que".
   ========================================================= */
@media (max-width: 620px) {
  .why-hyper {
    padding: 96px 0 36px;
  }

  .why-hyper-shell {
    width: calc(100% - 40px);
    padding-left: 8px;
  }

  .why-eyebrow {
    margin-bottom: 18px;
  }

  .why-hyper h2 {
    margin-bottom: 22px;
  }

  .why-lead {
    max-width: 96%;
    margin-bottom: 24px;
    font-size: 12.2px;
    line-height: 1.46;
    text-wrap: pretty;
  }

  .why-list {
    margin-top: 30px;
    margin-left: 4px;
    width: 49%;
    max-width: 208px;
    gap: 12px;
  }

  .why-road-background {
    background-size: auto 92%;
    background-position: calc(100% + 10px) bottom;
  }
}

@media (max-width: 420px) {
  .why-hyper {
    padding-top: 92px;
  }

  .why-hyper-shell {
    width: calc(100% - 36px);
    padding-left: 6px;
  }

  .why-lead {
    max-width: 97%;
    font-size: 11.8px;
    line-height: 1.44;
  }

  .why-list {
    margin-top: 28px;
    margin-left: 2px;
    width: 50%;
    max-width: 194px;
  }

  .why-road-background {
    background-size: auto 90%;
    background-position: calc(100% + 8px) bottom;
  }
}


/* =========================================================
   SOLUCIONES — BOCETO VISUAL V31
   Tres grandes capacidades con ejemplos concretos.
   Esta capa sobrescribe la versión editorial anterior sin afectar
   Inicio ni "Por qué HYPER".
   ========================================================= */
.solutions-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 92px;
  background: #ffffff;
  color: var(--navy);
}

.solutions-section::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  left: 50%;
  top: 120px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 92, 150, .08) 0%, rgba(252, 163, 17, .035) 38%, transparent 72%);
  pointer-events: none;
}

.solutions-shell {
  position: relative;
  z-index: 1;
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(104px, 8vw, 140px) 0 clamp(112px, 8vw, 148px);
}

.solutions-heading-centered {
  max-width: 980px;
  margin: 0 auto clamp(58px, 5vw, 78px);
  text-align: center;
}

.solutions-heading-centered .solutions-eyebrow {
  margin: 0 0 18px;
  color: var(--orange);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .42em;
}

.solutions-heading-centered h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(48px, 5.25vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.052em;
  font-weight: 800;
}

.solutions-intro-centered {
  margin: 26px auto 0;
  max-width: 690px;
  color: rgba(20, 33, 61, .66);
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.012em;
  font-weight: 500;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 26px);
  align-items: stretch;
}

.capability-card {
  position: relative;
  min-width: 0;
  min-height: 610px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(20, 33, 61, .09);
  border-radius: 34px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(20, 33, 61, .08);
  transform: translateY(30px);
  opacity: 0;
  transition:
    transform .8s cubic-bezier(.22, 1, .36, 1),
    opacity .7s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.solutions-section.is-visible .capability-card {
  transform: translateY(0);
  opacity: 1;
}

.solutions-section.is-visible .capability-card:nth-child(2) { transition-delay: .10s; }
.solutions-section.is-visible .capability-card:nth-child(3) { transition-delay: .20s; }

.capability-visual {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border-bottom: 1px solid rgba(20, 33, 61, .08);
  background:
    radial-gradient(circle at 74% 20%, rgba(255, 210, 150, .74), transparent 31%),
    radial-gradient(circle at 32% 68%, rgba(74, 92, 150, .32), transparent 40%),
    #f8f9fc;
}

.capability-card-automation .capability-visual {
  background:
    radial-gradient(circle at 22% 18%, rgba(252, 163, 17, .16), transparent 30%),
    linear-gradient(145deg, #f9fafc 0%, #f3f5fb 100%);
}

.capability-card-ai .capability-visual {
  background:
    radial-gradient(circle at 50% 50%, rgba(27, 27, 160, .16), transparent 32%),
    radial-gradient(circle at 75% 20%, rgba(252, 163, 17, .18), transparent 26%),
    #f8f9fc;
}

.capability-copy {
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.capability-number {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 28px;
  color: var(--orange);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .18em;
}

.capability-copy h3 {
  margin: 0;
  font-size: clamp(25px, 2vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.capability-copy > p {
  margin: 18px 0 0;
  color: rgba(20, 33, 61, .68);
  font-size: 15px;
  line-height: 1.58;
  letter-spacing: -0.01em;
}

.capability-tags {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.capability-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(20, 33, 61, .12);
  border-radius: 999px;
  color: rgba(20, 33, 61, .78);
  background: rgba(255, 255, 255, .78);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

/* Visual 01 — mini interfaz de software */
.software-window {
  position: absolute;
  width: 82%;
  height: 72%;
  left: 9%;
  top: 17%;
  overflow: hidden;
  border: 1px solid rgba(20, 33, 61, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 45px rgba(20, 33, 61, .13);
  transform: rotate(-2.5deg);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.software-window-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(20, 33, 61, .08);
}

.software-window-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(20, 33, 61, .18);
}

.software-window-bar span:nth-child(2) { background: rgba(252, 163, 17, .70); }
.software-window-bar span:nth-child(3) { background: rgba(27, 27, 160, .55); }

.software-window-body {
  height: calc(100% - 34px);
  display: grid;
  grid-template-columns: 24% 1fr;
}

.software-sidebar { background: rgba(20, 33, 61, .94); }

.software-content { padding: 18px; }

.software-title-line {
  width: 46%;
  height: 9px;
  border-radius: 999px;
  background: rgba(20, 33, 61, .16);
}

.software-stats {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.software-stats i {
  height: 42px;
  border-radius: 9px;
  background: rgba(74, 92, 150, .10);
}

.software-stats i:nth-child(2) { background: rgba(252, 163, 17, .14); }

.software-chart {
  height: 72px;
  margin-top: 16px;
  padding: 10px 12px 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-radius: 10px;
  background: rgba(20, 33, 61, .035);
}

.software-chart span {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: rgba(27, 27, 160, .55);
}

.software-chart span:nth-child(1) { height: 32%; }
.software-chart span:nth-child(2) { height: 58%; background: rgba(252, 163, 17, .72); }
.software-chart span:nth-child(3) { height: 46%; }
.software-chart span:nth-child(4) { height: 78%; background: rgba(252, 163, 17, .72); }
.software-chart span:nth-child(5) { height: 66%; }

/* Visual 02 — flujo de automatización */
.automation-flow {
  position: absolute;
  inset: 0;
}

.automation-node {
  position: absolute;
  z-index: 2;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 33, 61, .11);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 38px rgba(20, 33, 61, .11);
}

.automation-node svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.node-a { left: 13%; top: 21%; }
.node-b { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.node-c { right: 13%; bottom: 18%; }

.node-b { background: var(--navy); }
.node-b svg { stroke: var(--white); }
.node-c { border-color: rgba(252, 163, 17, .36); }
.node-c svg { stroke: var(--orange); }

.automation-line {
  position: absolute;
  z-index: 1;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(20, 33, 61, .15), rgba(252, 163, 17, .75));
}

.line-a { width: 42%; left: 26%; top: 39%; transform: rotate(21deg); }
.line-b { width: 39%; left: 53%; top: 62%; transform: rotate(18deg); }

/* Visual 03 — núcleo IA */
.ai-orbit {
  position: absolute;
  width: 210px;
  height: 210px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ai-core {
  position: absolute;
  z-index: 3;
  width: 92px;
  height: 92px;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  border-radius: 30px;
  background: var(--navy);
  box-shadow: 0 22px 55px rgba(20, 33, 61, .24);
  transform: translate(-50%, -50%) rotate(6deg);
}

.ai-core svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(20, 33, 61, .13);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-one { width: 156px; height: 156px; }
.orbit-two { width: 206px; height: 120px; transform: translate(-50%, -50%) rotate(-24deg); }

.ai-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(252, 163, 17, .10);
}

.dot-one { left: 17px; top: 89px; }
.dot-two { right: 26px; top: 42px; background: var(--blue); box-shadow: 0 0 0 6px rgba(27, 27, 160, .08); }
.dot-three { right: 41px; bottom: 25px; }

@media (hover: hover) and (pointer: fine) {
  .capability-card:hover {
    transform: translateY(-7px);
    border-color: rgba(20, 33, 61, .14);
    box-shadow: 0 36px 85px rgba(20, 33, 61, .12);
  }

  .capability-card:hover .software-window { transform: rotate(0deg) scale(1.025); }

  .capability-card:hover .automation-node {
    box-shadow: 0 22px 45px rgba(20, 33, 61, .15);
  }

  .capability-card:hover .ai-core {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.04);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  }
}

@media (max-width: 980px) {
  .capabilities-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
  }

  .capability-card {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
  }

  .capability-visual {
    min-height: 320px;
    border-right: 1px solid rgba(20, 33, 61, .08);
    border-bottom: 0;
  }

  .capability-copy { padding: 34px; }
}

@media (max-width: 620px) {
  .solutions-shell {
    width: calc(100% - 34px);
    padding: 86px 0 92px;
  }

  .solutions-heading-centered {
    margin-bottom: 42px;
  }

  .solutions-heading-centered .solutions-eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: .34em;
  }

  .solutions-heading-centered h2 {
    font-size: clamp(38px, 10.5vw, 48px);
  }

  .solutions-intro-centered {
    margin-top: 18px;
    max-width: 94%;
    font-size: 13px;
    line-height: 1.52;
  }

  .capabilities-grid { gap: 16px; }

  .capability-card {
    display: flex;
    min-height: 0;
    border-radius: 26px;
  }

  .capability-visual {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid rgba(20, 33, 61, .08);
  }

  .capability-copy { padding: 24px 24px 26px; }
  .capability-number { margin-bottom: 18px; font-size: 11px; }
  .capability-copy h3 { font-size: 25px; }
  .capability-copy > p { margin-top: 12px; font-size: 13px; line-height: 1.5; }
  .capability-tags { padding-top: 22px; }
  .capability-tags span { min-height: 28px; font-size: 10px; }

  .software-window { height: 74%; top: 14%; }
  .ai-orbit { transform: translate(-50%, -50%) scale(.86); }
  .automation-node { transform: scale(.86); }
  .node-b { transform: translate(-50%, -50%) scale(.86); }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   SOLUCIONES — CARRUSEL V32
   Tarjetas claras, copy alineado a la izquierda y movimiento
   continuo hacia la izquierda. Sustituye visualmente el grid V31.
   ========================================================= */
.solutions-section {
  background: #ffffff;
}

.solutions-section::before {
  display: none;
}

.solutions-shell {
  width: min(var(--max-width), calc(100% - 48px));
  padding-top: clamp(108px, 8vw, 138px);
  padding-bottom: clamp(104px, 8vw, 140px);
}

.solutions-heading-centered {
  max-width: 900px;
  margin: 0 0 clamp(52px, 5vw, 72px);
  text-align: left;
}

.solutions-heading-centered .solutions-eyebrow,
.solutions-heading-centered h2,
.solutions-intro-centered {
  text-align: left;
}

.solutions-heading-centered h2 {
  max-width: 850px;
}

.solutions-intro-centered {
  margin: 24px 0 0;
  max-width: 660px;
}

.capabilities-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 8px 0 18px;
}

/* Desvanecimiento sutil en los bordes: las tarjetas parecen entrar y salir
   del escenario, no cortarse bruscamente. */
.capabilities-carousel::before,
.capabilities-carousel::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: clamp(18px, 4vw, 54px);
  pointer-events: none;
}

.capabilities-carousel::before {
  left: 0;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.capabilities-carousel::after {
  right: 0;
  background: linear-gradient(270deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.capabilities-track {
  --carousel-gap: clamp(18px, 1.8vw, 28px);
  display: flex;
  align-items: stretch;
  gap: var(--carousel-gap);
  width: max-content;
  will-change: transform;
  animation: hyperSolutionsCarousel 30s linear infinite;
  animation-play-state: paused;
}

.solutions-section.is-visible .capabilities-track {
  animation-play-state: running;
}

.capabilities-carousel:hover .capabilities-track,
.capabilities-carousel:focus-within .capabilities-track {
  animation-play-state: paused;
}

.capabilities-set {
  display: flex;
  align-items: stretch;
  gap: var(--carousel-gap);
  flex: 0 0 auto;
}

@keyframes hyperSolutionsCarousel {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - (var(--carousel-gap) / 2)), 0, 0); }
}

.capability-card {
  flex: 0 0 clamp(330px, 27vw, 410px);
  width: clamp(330px, 27vw, 410px);
  min-height: 540px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  transform: none;
  border: 1px solid rgba(20, 33, 61, .08);
  /* Forma editorial/asimétrica: el gran radio inferior derecho le da
     una silueta menos genérica que una tarjeta rectangular común. */
  border-radius: 34px 34px 116px 34px;
  box-shadow: 0 18px 48px rgba(20, 33, 61, .07);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}

.capability-card-software {
  background: #f5f8fc;
}

.capability-card-automation {
  background: #fff8ec;
}

.capability-card-ai {
  background: #f5f4fc;
}

.capability-visual {
  min-height: 230px;
  border: 0;
  border-bottom: 1px solid rgba(20, 33, 61, .07);
}

.capability-copy {
  padding: 28px 30px 38px;
  text-align: left;
}

.capability-number {
  margin-bottom: 20px;
  font-size: 12px;
}

.capability-copy h3 {
  max-width: 310px;
  font-size: clamp(26px, 2vw, 32px);
}

.capability-copy > p {
  max-width: 320px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
}

.capability-tags {
  justify-content: flex-start;
  padding-top: 26px;
}

.capability-tags span {
  background: rgba(255,255,255,.64);
}

@media (hover: hover) and (pointer: fine) {
  .capability-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 58px rgba(20, 33, 61, .11);
  }
}

@media (max-width: 980px) {
  .solutions-heading-centered {
    max-width: 760px;
  }

  .capability-card {
    flex: 0 0 clamp(310px, 54vw, 390px);
    width: clamp(310px, 54vw, 390px);
    min-height: 520px;
    display: flex;
  }

  .capability-visual {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid rgba(20, 33, 61, .07);
  }
}

@media (max-width: 620px) {
  .solutions-shell {
    width: calc(100% - 34px);
    padding-top: 82px;
    padding-bottom: 86px;
  }

  .solutions-heading-centered {
    margin-bottom: 36px;
  }

  .solutions-heading-centered h2 {
    font-size: clamp(36px, 10vw, 46px);
  }

  .solutions-intro-centered {
    max-width: 100%;
    margin-top: 16px;
  }

  .capabilities-carousel {
    /* Dejamos respirar el carrusel hasta casi los bordes del teléfono. */
    width: calc(100vw - 17px);
    margin-right: calc((100vw - 100%) * -1);
  }

  .capabilities-carousel::before,
  .capabilities-carousel::after {
    width: 16px;
  }

  .capabilities-track {
    --carousel-gap: 14px;
    animation-duration: 25s;
  }

  .capability-card {
    flex-basis: min(82vw, 330px);
    width: min(82vw, 330px);
    min-height: 478px;
    border-radius: 26px 26px 88px 26px;
  }

  .capability-visual {
    min-height: 195px;
  }

  .capability-copy {
    padding: 22px 22px 30px;
  }

  .capability-copy h3 {
    font-size: 24px;
  }

  .capability-copy > p {
    font-size: 12.5px;
  }

  .capability-tags {
    padding-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capabilities-track {
    animation: none !important;
    transform: none !important;
  }
}


/* =========================================================
   SOLUCIONES — AJUSTES V33
   1) Header completamente blanco al navegar a una sección clara.
   2) El ancla de Soluciones arranca detrás del header fijo para que
      no quede visible una franja de la sección azul anterior.
   3) Encabezado y contenido de Soluciones explícitamente alineados
      a la izquierda.
   ========================================================= */

/* En secciones claras el header compacto deja de ser translúcido. */
.site-header.is-scrolled:not(.is-dark) {
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Al hacer clic en "Soluciones", el fondo blanco de la propia sección
   comienza desde la parte superior del viewport y queda detrás del
   header fijo. Así no asoma el navy de "Por qué HYPER". */
.solutions-section {
  scroll-margin-top: 0;
}

/* Alineación editorial a la izquierda del encabezado. */
.solutions-heading-centered {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: right;
}

.solutions-heading-centered .solutions-eyebrow,
.solutions-heading-centered h2,
.solutions-intro-centered {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

.solutions-heading-centered h2 {
  max-width: 1100px;
}

.solutions-intro-centered {
  max-width: 700px;
}

/* También fijamos a la izquierda el copy de cada tarjeta para evitar
   que cualquier regla anterior del boceto lo vuelva a centrar. */
.capability-copy,
.capability-copy h3,
.capability-copy > p,
.capability-tags {
  text-align: left;
}

.capability-tags {
  justify-content: flex-start;
}

/* =========================================================
   SOLUCIONES — TÍTULO V34
   Igualamos "Qué podemos construir contigo" al tamaño visual de
   "Así trabajamos" en escritorio y lo mantenemos en un solo renglón.
   En tablet/móvil vuelve a permitir saltos para evitar desbordamiento.
   ========================================================= */
@media (min-width: 1200px) {
  .solutions-shell {
    width: min(1480px, calc(100% - 72px));
  }

  .solutions-heading-centered h2 {
    width: 100%;
    max-width: none;
    font-size: clamp(80px, 4.2vw, 98px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }
}

@media (max-width: 1199px) {
  .solutions-heading-centered h2 {
    white-space: normal;
  }
}


/* =========================================================
   SOLUCIONES — TARJETAS ESCALONADAS V35
   Tres tarjetas estáticas: la izquierda es la más alta, la central
   reduce altura y la derecha es la más baja. Se elimina por ahora
   cualquier movimiento automático del carrusel.
   ========================================================= */
.capabilities-carousel {
  overflow: visible;
  padding: 8px 0 20px;
}

.capabilities-carousel::before,
.capabilities-carousel::after {
  display: none;
}

.capabilities-track {
  display: block;
  width: 100%;
  transform: none;
  animation: none;
  will-change: auto;
}

.capabilities-set {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 36px);
  align-items: start;
}

.capability-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
  opacity: 1;
  transform: none;
  transition: box-shadow .28s ease, border-color .28s ease;
}

/* Escalera visual: 01 > 02 > 03 */
.capability-card-software {
  min-height: 620px;
}

.capability-card-automation {
  min-height: 560px;
}

.capability-card-ai {
  min-height: 500px;
}

/* La parte visual acompaña la reducción progresiva de la tarjeta. */
.capability-card-software .capability-visual {
  min-height: 255px;
}

.capability-card-automation .capability-visual {
  min-height: 225px;
}

.capability-card-ai .capability-visual {
  min-height: 195px;
}

.capability-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.capability-tags {
  margin-top: auto;
}

@media (hover: hover) and (pointer: fine) {
  .capability-card:hover {
    transform: none;
    box-shadow: 0 24px 58px rgba(20, 33, 61, .11);
  }
}

/* En tablet las alturas siguen descendiendo, pero se compactan. */
@media (max-width: 980px) and (min-width: 621px) {
  .capabilities-set {
    gap: 18px;
  }

  .capability-card-software { min-height: 560px; }
  .capability-card-automation { min-height: 515px; }
  .capability-card-ai { min-height: 470px; }

  .capability-card-software .capability-visual { min-height: 225px; }
  .capability-card-automation .capability-visual { min-height: 205px; }
  .capability-card-ai .capability-visual { min-height: 185px; }
}

/* Móvil: no hay carrusel ni animación; se apilan para conservar lectura. */
@media (max-width: 620px) {
  .capabilities-carousel {
    width: 100%;
    margin-right: 0;
    overflow: visible;
  }

  .capabilities-set {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .capability-card-software,
  .capability-card-automation,
  .capability-card-ai {
    min-height: 0;
  }

  .capability-card-software .capability-visual,
  .capability-card-automation .capability-visual,
  .capability-card-ai .capability-visual {
    min-height: 190px;
  }
}


/* =========================================================
   SOLUCIONES — ESCALONADO SUPERIOR V36
   Las tres tarjetas comparten la misma línea base. La diferencia
   de altura se expresa únicamente hacia arriba: 01 es la más alta,
   02 intermedia y 03 la más baja. Por ahora no hay imágenes/iconos.
   ========================================================= */
.capabilities-set {
  align-items: end;
  min-height: 620px;
}

.capability-card {
  min-height: 0;
  border-radius: 28px;
}

.capability-card-software {
  height: 620px;
}

.capability-card-automation {
  height: 550px;
}

.capability-card-ai {
  height: 480px;
}

/* El contenido ocupa toda la tarjeta: número/título arriba y etiquetas
   hacia la base, de modo que el escalonado se lea claramente en el borde superior. */
.capability-copy {
  height: 100%;
  padding: 34px 32px 34px;
}

.capability-number {
  margin-bottom: 26px;
}

.capability-tags {
  margin-top: auto;
}

/* Cualquier resto de los recursos visuales de versiones anteriores queda
   desactivado por seguridad, aunque ya fueron retirados del HTML. */
.capability-visual {
  display: none !important;
}

@media (max-width: 980px) and (min-width: 621px) {
  .capabilities-set {
    min-height: 540px;
    align-items: end;
  }

  .capability-card-software { height: 540px; }
  .capability-card-automation { height: 490px; }
  .capability-card-ai { height: 440px; }

  .capability-copy {
    padding: 28px 24px 28px;
  }
}

/* En móvil dejamos de forzar el escalonado: las tarjetas se apilan y
   recuperan altura automática para priorizar legibilidad. */
@media (max-width: 620px) {
  .capabilities-set {
    min-height: 0;
    align-items: stretch;
  }

  .capability-card-software,
  .capability-card-automation,
  .capability-card-ai {
    height: auto;
    min-height: 330px;
  }

  .capability-copy {
    height: auto;
    min-height: 330px;
  }
}


/* =========================================================
   SOLUCIONES — AJUSTE V37
   Título más contenido y tarjetas más cerca del encabezado.
   ========================================================= */
@media (min-width: 1200px) {
  .solutions-heading-centered {
    margin-bottom:  0%;
  }

  .solutions-heading-centered h2 {
    font-size: clamp(68px, 3.8vw, 84px);
    line-height: 1.04;
  }

  .capabilities-carousel {
    padding-top: 0;
  }
}

@media (max-width: 1199px) and (min-width: 621px) {
  .solutions-heading-centered {
    margin-bottom: 28px;
  }

  .solutions-heading-centered h2 {
    font-size: clamp(54px, 6vw, 72px);
    line-height: 1.05;
  }
}


/* =========================================================
   SOLUCIONES — AJUSTE V38
   Compactamos las tarjetas en escritorio para que las tres se vean
   completas dentro del viewport, conservando el escalonado superior.
   ========================================================= */
@media (min-width: 1200px) {
  .solutions-shell {
    padding-bottom: 48px;
  }

  .capabilities-carousel {
    padding-bottom: 0;
  }

  .capabilities-set {
    min-height: 360px;
    align-items: end;
  }

  .capability-card-software {
    height: 360px;
  }

  .capability-card-automation {
    height: 320px;
  }

  .capability-card-ai {
    height: 280px;
  }

  .capability-copy {
    padding: 24px 28px 24px;
  }

  .capability-number {
    margin-bottom: 16px;
  }

  .capability-copy h3 {
    font-size: clamp(22px, 1.55vw, 28px);
    line-height: 1.08;
  }

  .capability-copy > p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
  }

  .capability-tags {
    padding-top: 14px;
    gap: 7px;
  }

  .capability-tags span {
    min-height: 26px;
    padding: 5px 9px;
    font-size: 10px;
  }
}

/* En laptops/tablets horizontales también evitamos tarjetas excesivamente altas. */
@media (max-width: 1199px) and (min-width: 621px) {
  .capabilities-set {
    min-height: 430px;
    align-items: end;
  }

  .capability-card-software {
    height: 430px;
  }

  .capability-card-automation {
    height: 390px;
  }

  .capability-card-ai {
    height: 350px;
  }
}

/* =========================================================
   SOLUCIONES — CARRUSEL CONTINUO V40
   Corrige el bloqueo de transform de la versión estática y hace que
   cada grupo de 3 tarjetas ocupe exactamente el ancho visible del
   carrusel. Así el grupo duplicado no aparece cortado al cargar.
   ========================================================= */
@media (min-width: 981px) {
  .capabilities-carousel {
    --carousel-gap: clamp(22px, 2.4vw, 36px);
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 0 2px;
  }

  .capabilities-carousel::before,
  .capabilities-carousel::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 8;
    top: 0;
    bottom: 0;
    width: clamp(12px, 1.4vw, 22px);
    pointer-events: none;
  }

  .capabilities-carousel::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
  }

  .capabilities-carousel::after {
    right: 0;
    background: linear-gradient(270deg, #ffffff 0%, rgba(255,255,255,0) 100%);
  }

  /* 2 grupos completos + el gap que existe entre ambos. */
  .capabilities-track {
    display: flex;
    align-items: flex-end;
    gap: var(--carousel-gap);
    width: calc(200% + var(--carousel-gap));
    transform: translate3d(0, 0, 0);
    will-change: transform;
    animation: hyperSolutionsLoopV40 18s linear infinite !important;
    animation-play-state: paused !important;
  }

  .solutions-section.is-visible .capabilities-track {
    animation-play-state: running !important;
  }

  /* Cada set mide exactamente un viewport del carrusel. El clon, por
     tanto, comienza fuera de la ventana y no se ve cortado al inicio. */
  .capabilities-set {
    flex: 0 0 calc((100% - var(--carousel-gap)) / 2);
    width: calc((100% - var(--carousel-gap)) / 2);
    min-height: 360px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: var(--carousel-gap);
  }

  .capability-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
  }

  .capability-card-software { height: 360px; }
  .capability-card-automation { height: 320px; }
  .capability-card-ai { height: 280px; }

  @keyframes hyperSolutionsLoopV40 {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      /* Un set completo + el gap entre sets. */
      transform: translate3d(calc(-50% - (var(--carousel-gap) / 2)), 0, 0);
    }
  }
}

/* En tablet y móvil conservamos de momento el layout sin autoplay. */
@media (max-width: 980px) {
  .capabilities-track {
    animation: none !important;
    transform: none !important;
    width: 100%;
  }

  .capabilities-set-clone {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capabilities-track {
    animation: none !important;
    transform: none !important;
  }

  .capabilities-set-clone {
    display: none !important;
  }
}


/* =========================================================
   SOLUCIONES — CARRUSEL POR POSICIONES V41
   Cada tarjeta rota entre tres "slots" fijos. El slot 01 es el más
   alto, el 02 intermedio y el 03 el más bajo. La base permanece alineada.
   ========================================================= */
@media (min-width: 981px) {
  .capabilities-carousel {
    --slot-gap: clamp(22px, 2.4vw, 36px);
    position: relative;
    width: 100%;
    height: 360px;
    overflow: visible;
    padding: 0;
  }

  .capabilities-carousel::before,
  .capabilities-carousel::after {
    display: none !important;
  }

  .capabilities-track,
  .solutions-section.is-visible .capabilities-track {
    position: relative;
    display: block;
    width: 100% !important;
    height: 100%;
    transform: none !important;
    animation: none !important;
    will-change: auto;
  }

  .capabilities-set {
    position: relative;
    display: block;
    width: 100% !important;
    height: 100%;
    min-height: 0;
  }

  .capabilities-set-clone {
    display: none !important;
  }

  .capability-card {
    position: absolute;
    bottom: 0;
    width: calc((100% - var(--slot-gap) - var(--slot-gap)) / 3);
    min-width: 0;
    max-width: none;
    margin: 0;
    transition:
      left .82s cubic-bezier(.22, 1, .36, 1),
      height .82s cubic-bezier(.22, 1, .36, 1),
      background-color .45s ease,
      box-shadow .45s ease;
    will-change: left, height;
  }

  /* Posición 01 — izquierda y mayor altura */
  .capability-card[data-slot="0"] {
    left: 0;
    height: 360px;
  }

  /* Posición 02 — centro y altura intermedia */
  .capability-card[data-slot="1"] {
    left: calc((100% - var(--slot-gap) - var(--slot-gap)) / 3 + var(--slot-gap));
    height: 320px;
  }

  /* Posición 03 — derecha y menor altura */
  .capability-card[data-slot="2"] {
    left: calc((((100% - var(--slot-gap) - var(--slot-gap)) / 3) * 2) + (var(--slot-gap) * 2));
    height: 280px;
  }

  /* Por si el navegador no soporta multiplicación dentro de calc(),
     esta regla equivalente usa una posición porcentual estable. */
  @supports not (left: calc(1px * 2)) {
    .capability-card[data-slot="2"] {
      left: calc(66.6667% + (var(--slot-gap) / 3));
    }
  }

  .capability-copy {
    height: 100%;
  }
}

/* Tablet y móvil: conservamos el layout responsive estático. */
@media (max-width: 980px) {
  .capability-card {
    position: relative;
    left: auto !important;
    bottom: auto;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card {
    transition: none !important;
  }
}


/* =========================================================
   SOLUCIONES — HOVER REVEAL V42
   Inspirado en el comportamiento visual observado en la tarjeta Radian
   de Squarespace: la imagen se desplaza hacia arriba y el texto aparece
   desde la parte inferior de la misma tarjeta.
   ========================================================= */
@media (min-width: 981px) {
  .capabilities-carousel {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .capabilities-carousel::before,
  .capabilities-carousel::after {
    display: none !important;
  }

  .capabilities-track,
  .solutions-section.is-visible .capabilities-track {
    position: relative;
    display: block;
    width: 100% !important;
    height: auto;
    transform: none !important;
    animation: none !important;
  }

  .capabilities-set {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: clamp(22px, 2.4vw, 36px);
    width: 100% !important;
    min-height: 390px;
  }

  .capabilities-set-clone {
    display: none !important;
  }

  .capability-card,
  .capability-card[data-slot="0"],
  .capability-card[data-slot="1"],
  .capability-card[data-slot="2"] {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(20, 33, 61, .10);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(20, 33, 61, .06);
    transition: box-shadow .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  /* Conservamos el escalonado visual que ya habíamos definido. */
  .capability-card-software { height: 390px !important; }
  .capability-card-automation { height: 355px !important; }
  .capability-card-ai { height: 320px !important; }

  .capability-hover-window {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
  }

  .capability-media {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    transition: transform .72s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .capability-media-software {
    background: #fff;
  }

  .capability-media-software img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .capability-media-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none;
  }

  .capability-media-overlay-software {
    padding: clamp(26px, 2.4vw, 42px);
  }

  .capability-media-heading {
    margin: 0;
    max-width: min(46%, 320px);
    color: var(--navy);
    font-size: clamp(34px, 3.2vw, 66px);
    line-height: 0.92;
    letter-spacing: -.055em;
    font-weight: 800;
    text-wrap: balance;
    text-shadow: 0 6px 18px rgba(255, 255, 255, .45);
  }

  /* Superficies temporales para las otras dos capacidades hasta que
     incorporemos sus imágenes definitivas. */
  .capability-media-automation {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 34px;
    background:
      radial-gradient(circle at 78% 22%, rgba(252, 163, 17, .20), transparent 34%),
      linear-gradient(145deg, #fff9ee 0%, #f6f0e4 100%);
  }

  .capability-media-ai {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 34px;
    background:
      radial-gradient(circle at 78% 22%, rgba(27, 27, 160, .14), transparent 34%),
      linear-gradient(145deg, #f9f8ff 0%, #efedf9 100%);
  }

  .capability-media-title {
    max-width: 82%;
    color: var(--navy);
    font-size: clamp(26px, 2vw, 34px);
    line-height: 1.04;
    letter-spacing: -.04em;
    font-weight: 800;
  }

  .capability-media-title span {
    display: block;
    margin-bottom: 18px;
    color: var(--orange);
    font-size: 12px;
    letter-spacing: .18em;
  }

  .capability-details {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 58%;
    padding: 28px 30px 26px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid rgba(20, 33, 61, .08);
    transform: translate3d(0, 101%, 0);
    transition: transform .72s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .capability-card-automation .capability-details {
    background: rgba(255, 249, 238, .985);
  }

  .capability-card-ai .capability-details {
    background: rgba(249, 248, 255, .985);
  }

  .capability-details .capability-number {
    margin: 0 0 13px;
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
  }

  .capability-details h3 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(23px, 1.8vw, 30px);
    line-height: 1.06;
    letter-spacing: -.035em;
    font-weight: 800;
  }

  .capability-details > p {
    margin: 14px 0 0;
    color: rgba(20, 33, 61, .70);
    font-size: 13px;
    line-height: 1.5;
  }

  .capability-details .capability-tags {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .capability-details .capability-tags span {
    min-height: 27px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(20, 33, 61, .12);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: rgba(20,33,61,.78);
    font-size: 10px;
    font-weight: 700;
  }

  /* El gesto central: la imagen sube mientras el texto emerge desde abajo. */
  .capability-hover-card:hover,
  .capability-hover-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 24px 56px rgba(20, 33, 61, .12);
  }

  .capability-hover-card:hover .capability-media,
  .capability-hover-card:focus-within .capability-media {
    transform: translate3d(0, -46%, 0);
  }

  .capability-hover-card:hover .capability-details,
  .capability-hover-card:focus-within .capability-details {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1180px) {
  .capability-media-heading {
    max-width: 50%;
    font-size: clamp(28px, 3vw, 52px);
  }
}

@media (max-width: 860px) {
  .capability-media-overlay-software {
    padding: 22px;
  }

  .capability-media-heading {
    max-width: 56%;
    font-size: clamp(26px, 5vw, 42px);
    line-height: .94;
  }
}

/* En pantallas táctiles no dependemos del hover: la información queda visible
   debajo de la imagen para conservar accesibilidad y lectura. */
@media (max-width: 980px) {
  .capabilities-track,
  .solutions-section.is-visible .capabilities-track {
    transform: none !important;
    animation: none !important;
  }

  .capabilities-set {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    min-height: 0 !important;
  }

  .capability-card,
  .capability-card[data-slot="0"],
  .capability-card[data-slot="1"],
  .capability-card[data-slot="2"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .capability-hover-window {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .capability-media,
  .capability-details {
    position: relative;
    inset: auto;
    transform: none !important;
  }

  .capability-media {
    height: 250px;
  }

  .capability-media-software img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .capability-details {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card,
  .capability-media,
  .capability-details {
    transition: none !important;
  }
}


/* =========================================================
   SOLUCIONES — AJUSTE V43
   Encabezado centrado, sin texto introductorio ni numeración.
   Las tres tarjetas comparten exactamente el mismo tamaño y altura,
   tomando una proporción más cercana a la tarjeta de referencia.
   ========================================================= */
@media (min-width: 981px) {
  .solutions-heading-centered {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 42px !important;
    text-align: center !important;
  }

  .solutions-heading-centered .solutions-eyebrow,
  .solutions-heading-centered h2 {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .solutions-heading-centered .solutions-eyebrow {
    margin-bottom: 18px !important;
  }

  .solutions-heading-centered h2 {
    font-size: clamp(62px, 3.6vw, 78px) !important;
    line-height: 1.03 !important;
    white-space: nowrap;
  }

  .capabilities-set {
    align-items: stretch !important;
    min-height: 0 !important;
  }

  .capability-card,
  .capability-card[data-slot="0"],
  .capability-card[data-slot="1"],
  .capability-card[data-slot="2"],
  .capability-card-software,
  .capability-card-automation,
  .capability-card-ai {
    height: 410px !important;
    min-height: 410px !important;
    max-height: 410px !important;
    flex: 1 1 0 !important;
  }

  .capability-hover-window {
    height: 100% !important;
  }

  .capability-details {
    min-height: 56% !important;
  }

  .capability-media-title span,
  .capability-number {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .solutions-heading-centered,
  .solutions-heading-centered .solutions-eyebrow,
  .solutions-heading-centered h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .solutions-heading-centered h2 {
    white-space: normal !important;
  }

  .capability-number,
  .capability-media-title span {
    display: none !important;
  }
}


/* =========================================================
   SOLUCIONES — CARRUSEL PROTAGONISTA V44
   La tarjeta activa ocupa ~56% del viewport y se muestra completa
   en el centro. Las tarjetas anterior y siguiente quedan parcialmente
   visibles en los bordes, como anticipo del siguiente movimiento.
   El cambio de posición lo controla JS aproximadamente cada 4 segundos.
   ========================================================= */
@media (min-width: 981px) {
  .capabilities-carousel {
    position: relative !important;
    width: 100vw !important;
    height: 430px;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
  }

  .capabilities-carousel::before,
  .capabilities-carousel::after {
    display: none !important;
  }

  .capabilities-track {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 410px !important;
    transform: none !important;
    animation: none !important;
    overflow: visible !important;
  }

  .capabilities-set {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 410px !important;
    min-height: 410px !important;
  }

  .capability-card,
  .capability-card[data-slot="0"],
  .capability-card[data-slot="1"],
  .capability-card[data-slot="2"],
  .capability-card-software,
  .capability-card-automation,
  .capability-card-ai {
    position: absolute !important;
    top: 0 !important;
    left: 50%;
    width: min(56vw, 900px) !important;
    min-width: min(56vw, 900px) !important;
    max-width: min(56vw, 900px) !important;
    height: 410px !important;
    min-height: 410px !important;
    max-height: 410px !important;
    margin: 0 !important;
    flex: none !important;
    transform: translateX(-50%) !important;
    opacity: 1;
    z-index: 2;
    cursor: pointer;
    transition:
      left .88s cubic-bezier(.22, 1, .36, 1),
      opacity .55s ease,
      box-shadow .55s ease !important;
    will-change: left;
  }

  /* Tarjeta central: completamente visible y protagonista. */
  .capability-card[data-carousel-position="center"] {
    left: 50% !important;
    z-index: 4;
    opacity: 1;
    cursor: default;
    box-shadow: 0 20px 54px rgba(20, 33, 61, .10);
  }

  /* Las laterales comparten el mismo tamaño, pero sus centros se colocan
     fuera del viewport para que solo se vea una fracción de cada tarjeta. */
  .capability-card[data-carousel-position="left"] {
    left: -7% !important;
    z-index: 2;
    opacity: .88;
  }

  .capability-card[data-carousel-position="right"] {
    left: 107% !important;
    z-index: 2;
    opacity: .88;
  }

  /* Solo la tarjeta central ejecuta el reveal de imagen/texto. */
  .capability-card:not([data-carousel-position="center"]) .capability-hover-window {
    pointer-events: none;
  }

  .capability-card:not([data-carousel-position="center"]):hover,
  .capability-card:not([data-carousel-position="center"]):focus-within {
    box-shadow: 0 14px 38px rgba(20, 33, 61, .06) !important;
  }

  /* El hover anterior movía la tarjeta completa 3px y chocaba con el
     posicionamiento del carrusel. Dejamos fija la tarjeta y conservamos
     únicamente el desplazamiento interno de la imagen/copy. */
  .capability-hover-card:hover,
  .capability-hover-card:focus-within {
    transform: translateX(-50%) !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .capability-card,
  .capability-card[data-slot="0"],
  .capability-card[data-slot="1"],
  .capability-card[data-slot="2"] {
    width: min(62vw, 760px) !important;
    min-width: min(62vw, 760px) !important;
    max-width: min(62vw, 760px) !important;
  }

  .capability-card[data-carousel-position="left"] { left: -11% !important; }
  .capability-card[data-carousel-position="right"] { left: 111% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card {
    transition: none !important;
  }
}


/* =========================================================
   SOLUCIONES — IMÁGENES AUTOMATIZACIÓN / IA V46
   Sustituimos los placeholders por imágenes reales con el mismo
   tratamiento visual de la tarjeta de software.
   ========================================================= */
@media (min-width: 981px) {
  .capability-media-automation,
  .capability-media-ai {
    background: #fff;
    padding: 0;
  }

  .capability-media-automation img,
  .capability-media-ai img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .capability-media-overlay-automation,
  .capability-media-overlay-ai {
    padding: clamp(26px, 2.4vw, 42px);
  }

  .capability-media-heading-medium {
    max-width: min(50%, 360px);
    font-size: clamp(30px, 2.6vw, 52px);
    line-height: .96;
  }
}

@media (max-width: 980px) {
  .capability-media-automation,
  .capability-media-ai {
    background: #fff;
    padding: 0;
  }

  .capability-media-automation img,
  .capability-media-ai img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}


/* =========================================================
   SOLUCIONES — FONDO AZUL DE TARJETAS V47
   Unificamos el panel de información de las tres tarjetas con el
   azul vibrante de HYPER (#1B1BA0), ajustando contraste de textos
   y etiquetas para conservar legibilidad.
   ========================================================= */
.capability-card,
.capability-hover-window {
  background: #1B1BA0 !important;
}

.capability-details,
.capability-card-automation .capability-details,
.capability-card-ai .capability-details {
  background: #1B1BA0 !important;
  border-top-color: rgba(255, 255, 255, .16) !important;
}

.capability-details h3,
.capability-details > p {
  color: #ffffff !important;
}

.capability-details > p {
  opacity: .86;
}

.capability-details .capability-tags span {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}


/* =========================================================
   SOLUCIONES — COPY Y ETIQUETAS V49
   Textos más descriptivos y etiquetas con mayor presencia visual.
   ========================================================= */
.capability-details .capability-tags {
  gap: 9px !important;
  padding-top: 20px !important;
}

.capability-details .capability-tags span {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  background: rgba(255, 255, 255, .15) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 3px 10px rgba(0, 0, 0, .08);
  transition: background-color .22s ease, transform .22s ease, border-color .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .capability-details .capability-tags span:hover {
    background: rgba(255, 255, 255, .24) !important;
    border-color: rgba(255, 255, 255, .82) !important;
    transform: translateY(-1px);
  }
}

/* El nuevo copy ocupa un poco más de espacio; compactamos sutilmente
   la separación para conservar aire sin desplazar las etiquetas. */
.capability-details > p {
  margin-top: 12px !important;
  line-height: 1.48 !important;
}

@media (max-width: 620px) {
  .capability-details .capability-tags span {
    min-height: 31px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   SOLUCIONES — TABLET V50 (621px–980px)
   Mantiene la lógica de tarjeta protagonista de escritorio: ~58% del
   viewport, tarjetas laterales parcialmente visibles y reveal automático
   de imagen → contenido para compensar la ausencia de hover.
   ========================================================= */
@media (min-width: 621px) and (max-width: 980px) {
  .solutions-shell {
    width: min(100%, 980px) !important;
    padding-left: 28px;
    padding-right: 28px;
  }

  .capabilities-carousel {
    position: relative !important;
    width: 100vw !important;
    height: 430px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
  }

  .capabilities-carousel::before,
  .capabilities-carousel::after {
    display: none !important;
  }

  .capabilities-track,
  .solutions-section.is-visible .capabilities-track {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 410px !important;
    transform: none !important;
    animation: none !important;
    overflow: visible !important;
  }

  .capabilities-set {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 410px !important;
    min-height: 410px !important;
  }

  .capability-card,
  .capability-card[data-slot="0"],
  .capability-card[data-slot="1"],
  .capability-card[data-slot="2"],
  .capability-card-software,
  .capability-card-automation,
  .capability-card-ai {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 50%;
    width: 58vw !important;
    min-width: 58vw !important;
    max-width: 58vw !important;
    height: 410px !important;
    min-height: 410px !important;
    max-height: 410px !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
    opacity: 1;
    z-index: 2;
    border-radius: 22px !important;
    cursor: pointer;
    transition:
      left .82s cubic-bezier(.22, 1, .36, 1),
      opacity .5s ease,
      box-shadow .5s ease !important;
  }

  .capability-card[data-carousel-position="center"] {
    left: 50% !important;
    z-index: 4;
    opacity: 1;
    box-shadow: 0 18px 46px rgba(20, 33, 61, .11);
  }

  .capability-card[data-carousel-position="left"] {
    left: -10% !important;
    z-index: 2;
    opacity: .86;
  }

  .capability-card[data-carousel-position="right"] {
    left: 110% !important;
    z-index: 2;
    opacity: .86;
  }

  .capability-hover-window {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* En tablet recuperamos la misma estructura superpuesta de escritorio.
     La regla antigua <=980 hacía imagen + texto consecutivos y por eso
     ambos aparecían de entrada. */
  .capability-media {
    position: absolute !important;
    z-index: 2;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform .68s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
  }

  .capability-media img,
  .capability-media-software img,
  .capability-media-automation img,
  .capability-media-ai img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .capability-details,
  .capability-card-automation .capability-details,
  .capability-card-ai .capability-details {
    position: absolute !important;
    z-index: 3;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 60% !important;
    padding: 28px 30px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #1B1BA0 !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    transform: translate3d(0, 101%, 0) !important;
    transition: transform .68s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
  }

  .capability-details h3 {
    margin: 0 !important;
    font-size: clamp(22px, 3vw, 28px) !important;
    line-height: 1.08 !important;
  }

  .capability-details > p {
    margin-top: 12px !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
  }

  .capability-details .capability-tags {
    margin-top: auto !important;
    padding-top: 16px !important;
    gap: 8px !important;
  }

  .capability-details .capability-tags span {
    min-height: 31px !important;
    padding: 6px 11px !important;
    font-size: 11px !important;
  }

  .capability-media-overlay-software,
  .capability-media-overlay-automation,
  .capability-media-overlay-ai {
    padding: 24px !important;
  }

  .capability-media-heading,
  .capability-media-heading-medium {
    max-width: 54% !important;
    font-size: clamp(27px, 4.2vw, 42px) !important;
    line-height: .94 !important;
  }

  /* Equivalente táctil al hover: JS aplica la clase a la tarjeta central
     unos milisegundos después de entrar en posición. */
  .capability-card.is-touch-revealed .capability-media {
    transform: translate3d(0, -46%, 0) !important;
  }

  .capability-card.is-touch-revealed .capability-details {
    transform: translate3d(0, 0, 0) !important;
  }

  .capability-card:not([data-carousel-position="center"]) .capability-hover-window {
    pointer-events: none;
  }
}

@media (min-width: 621px) and (max-width: 760px) {
  .capability-card,
  .capability-card[data-slot="0"],
  .capability-card[data-slot="1"],
  .capability-card[data-slot="2"],
  .capability-card-software,
  .capability-card-automation,
  .capability-card-ai {
    width: 62vw !important;
    min-width: 62vw !important;
    max-width: 62vw !important;
  }

  .capability-card[data-carousel-position="left"] { left: -13% !important; }
  .capability-card[data-carousel-position="right"] { left: 113% !important; }

  .capability-details {
    padding: 24px 26px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 621px) and (max-width: 980px) {
  .capability-card,
  .capability-media,
  .capability-details {
    transition: none !important;
  }
}


/* =========================================================
   SOLUCIONES — CELULAR V53 (hasta 620px)
   Mayor separación respecto al header, tarjeta protagonista centrada,
   padding real para el copy y reveal automático imagen → descripción.
   ========================================================= */
@media (max-width: 620px) {
  /* Separa SOLUCIONES de la navegación fija. */
  .solutions-shell {
    width: 100% !important;
    padding: 112px 0 76px !important;
  }

  .solutions-heading-centered {
    width: calc(100% - 34px) !important;
    margin: 0 auto 34px !important;
    padding: 0 !important;
  }

  .solutions-heading-centered .solutions-eyebrow {
    margin-bottom: 18px !important;
  }

  .solutions-heading-centered h2 {
    font-size: clamp(38px, 10.8vw, 52px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
  }

  /* El carrusel conserva una tarjeta protagonista y deja apenas una pista
     de las tarjetas vecinas, sin convertirlas en un grid vertical. */
  .capabilities-carousel {
    position: relative !important;
    width: 100vw !important;
    height: 440px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
  }

  .capabilities-carousel::before,
  .capabilities-carousel::after {
    display: none !important;
  }

  .capabilities-track,
  .solutions-section.is-visible .capabilities-track {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 420px !important;
    transform: none !important;
    animation: none !important;
    overflow: visible !important;
  }

  .capabilities-set {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    gap: 0 !important;
  }

  .capability-card,
  .capability-card[data-slot="0"],
  .capability-card[data-slot="1"],
  .capability-card[data-slot="2"],
  .capability-card-software,
  .capability-card-automation,
  .capability-card-ai {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 50%;
    width: 86vw !important;
    min-width: 86vw !important;
    max-width: 86vw !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
    opacity: 1;
    z-index: 2;
    border-radius: 22px !important;
    cursor: pointer;
    transition:
      left .82s cubic-bezier(.22, 1, .36, 1),
      opacity .5s ease,
      box-shadow .5s ease !important;
  }

  .capability-card[data-carousel-position="center"] {
    left: 50% !important;
    z-index: 4;
    opacity: 1;
    box-shadow: 0 18px 46px rgba(20, 33, 61, .11);
  }

  .capability-card[data-carousel-position="left"] {
    left: -38% !important;
    z-index: 2;
    opacity: .84;
  }

  .capability-card[data-carousel-position="right"] {
    left: 138% !important;
    z-index: 2;
    opacity: .84;
  }

  .capability-hover-window {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Imagen y copy vuelven a superponerse para reproducir el reveal táctil. */
  .capability-media {
    position: absolute !important;
    z-index: 2;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform .68s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
  }

  .capability-media img,
  .capability-media-software img,
  .capability-media-automation img,
  .capability-media-ai img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .capability-details,
  .capability-card-automation .capability-details,
  .capability-card-ai .capability-details {
    position: absolute !important;
    z-index: 3;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 62% !important;
    padding: 24px 24px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #1B1BA0 !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    transform: translate3d(0, 101%, 0) !important;
    transition: transform .68s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
  }

  .capability-details h3 {
    margin: 0 !important;
    font-size: clamp(21px, 5.7vw, 26px) !important;
    line-height: 1.08 !important;
  }

  .capability-details > p {
    margin: 13px 0 0 !important;
    font-size: clamp(12.5px, 3.4vw, 14px) !important;
    line-height: 1.5 !important;
  }

  .capability-details .capability-tags {
    margin-top: auto !important;
    padding-top: 14px !important;
    gap: 7px !important;
  }

  .capability-details .capability-tags span {
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 10.5px !important;
  }

  /* Igual que en tablet: primero imagen y casi inmediatamente aparece copy. */
  .capability-card.is-touch-revealed .capability-media {
    transform: translate3d(0, -46%, 0) !important;
  }

  .capability-card.is-touch-revealed .capability-details {
    transform: translate3d(0, 0, 0) !important;
  }

  .capability-card:not([data-carousel-position="center"]) .capability-hover-window {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 620px) {
  .capability-card,
  .capability-media,
  .capability-details {
    transition: none !important;
  }
}


/* =========================================================
   SOLUCIONES — CELULAR V56
   Partimos de V53. Único ajuste: acercar las tarjetas al título
   para aprovechar mejor la altura visible del teléfono.
   ========================================================= */
@media (max-width: 620px) {
  .solutions-heading-centered {
    margin-bottom: 8px !important;
  }

  .capabilities-carousel {
    padding-top: 0 !important;
  }
}


/* =========================================================
   NAVBAR — PRODUCTOS DROPDOWN V57
   Menú preparado para EVA, Gastro y Agenda.
   ========================================================= */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transition: left .2s ease, right .2s ease;
}

.nav-dropdown-trigger:hover::after,
.nav-dropdown.is-open .nav-dropdown-trigger::after {
  left: 0;
  right: 0;
}

.nav-dropdown-chevron {
  width: 11px;
  height: 8px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.nav-dropdown.is-open .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 14px);
  left: 50%;
  width: 188px;
  padding: 8px;
  display: grid;
  gap: 4px;
  color: var(--navy);
  background: rgba(255, 255, 255, .985);
  border: 1px solid rgba(20, 33, 61, .10);
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(20, 33, 61, .15);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -7px);
  pointer-events: none;
  transition:
    opacity .2s ease,
    transform .24s cubic-bezier(.22, 1, .36, 1),
    visibility .2s ease;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.product-menu-item {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  color: var(--navy);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: default;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.product-menu-item:hover,
.product-menu-item:focus-visible {
  color: var(--navy);
  background: rgba(252, 163, 17, .14);
  outline: none;
  transform: translateX(2px);
}

/* En la sección oscura, el trigger sigue el color del navbar,
   pero el desplegable conserva fondo blanco para máxima legibilidad. */
.site-header.is-dark .nav-dropdown-menu {
  color: var(--navy);
  background: rgba(255, 255, 255, .99);
}

/* Tablet/celular: Productos se despliega dentro del menú hamburguesa. */
@media (max-width: 860px) {
  .nav-dropdown {
    width: 100%;
    display: block;
  }

  .nav-dropdown-trigger {
    width: 100%;
    min-height: 48px;
    padding: 14px 12px;
    justify-content: space-between;
    text-align: left;
  }

  .nav-dropdown-trigger::after {
    display: none;
  }

  .nav-dropdown-menu {
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0 8px;
    gap: 2px;
    overflow: hidden;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: none;
    transition: max-height .28s cubic-bezier(.22, 1, .36, 1), padding .28s ease;
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 180px;
    padding: 4px 8px 10px 20px;
    transform: none;
    pointer-events: auto;
  }

  .product-menu-item {
    min-height: 42px;
    padding: 10px 12px;
    color: inherit;
    font-size: 13px;
  }

  .product-menu-item:hover,
  .product-menu-item:focus-visible {
    color: inherit;
    background: rgba(252, 163, 17, .12);
  }

  .site-header.is-dark .nav-dropdown-menu {
    color: inherit;
    background: transparent;
  }
}


/* =========================================================
   CLIENTES — V58
   Logos de organizaciones con las que HYPER ha trabajado.
   ========================================================= */
.clients-section {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  scroll-margin-top: 0;
}

.clients-shell {
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(96px, 7.5vw, 138px) 0 clamp(104px, 8vw, 148px);
}

.clients-heading {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.clients-eyebrow {
  margin: 0 0 18px;
  color: var(--orange);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .36em;
}

.clients-heading h2 {
  max-width: 980px;
  margin: 0 auto;
  color: var(--navy);
  font-size: clamp(46px, 4.4vw, 74px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 800;
  text-wrap: balance;
}

.clients-grid {
  margin-top: clamp(48px, 5vw, 70px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.client-logo-card {
  min-width: 0;
  height: clamp(170px, 14vw, 205px);
  margin: 0;
  padding: clamp(24px, 2vw, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(20, 33, 61, .10);
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(20, 33, 61, .055);
  transition:
    transform .32s cubic-bezier(.22, 1, .36, 1),
    box-shadow .32s ease,
    border-color .32s ease;
}

.client-logo-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 118px;
  object-fit: contain;
}

.client-logo-card-isradogs img {
  max-width: 70%;
  max-height: 136px;
}

.client-logo-card-finlabor img {
  max-width: 84%;
  max-height: 72px;
}

@media (hover: hover) and (pointer: fine) {
  .client-logo-card:hover {
    transform: translateY(-5px);
    border-color: rgba(27, 27, 160, .22);
    box-shadow: 0 20px 46px rgba(20, 33, 61, .09);
  }
}

@media (max-width: 980px) {
  .clients-shell {
    width: min(760px, calc(100% - 42px));
    padding-top: 92px;
    padding-bottom: 106px;
  }

  .clients-heading h2 {
    max-width: 700px;
    font-size: clamp(42px, 7vw, 62px);
  }

  .clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .client-logo-card {
    height: 180px;
  }
}

@media (max-width: 620px) {
  .clients-shell {
    width: calc(100% - 34px);
    padding-top: 82px;
    padding-bottom: 88px;
  }

  .clients-eyebrow {
    margin-bottom: 16px;
    font-size: 12px;
    letter-spacing: .3em;
  }

  .clients-heading h2 {
    font-size: clamp(36px, 10vw, 48px);
    line-height: 1.06;
  }

  .clients-grid {
    margin-top: 36px;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .client-logo-card {
    height: 132px;
    padding: 18px;
    border-radius: 18px;
  }

  .client-logo-card img {
    max-width: 88%;
    max-height: 82px;
  }

  .client-logo-card-isradogs img {
    max-width: 80%;
    max-height: 92px;
  }

  .client-logo-card-finlabor img {
    max-width: 90%;
    max-height: 52px;
  }
}


/* =========================================================
   PRODUCTOS — ESTADOS V59
   Gastro y Agenda se muestran como productos en desarrollo.
   ========================================================= */
.product-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-menu-item small {
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .04em;
}

.product-menu-item.is-coming-soon,
.product-menu-item.is-coming-soon:disabled {
  color: rgba(20, 33, 61, .42);
  background: rgba(20, 33, 61, .035);
  cursor: not-allowed;
  transform: none;
}

.product-menu-item.is-coming-soon small {
  padding: 0;
  margin-left: 2px;
  color: #1B1BA0;
  background: transparent;
  border-radius: 0;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  position: relative;
  top: -.45em;
}

.product-menu-item.is-coming-soon:hover,
.product-menu-item.is-coming-soon:focus-visible {
  color: rgba(20, 33, 61, .42);
  background: rgba(20, 33, 61, .035);
  transform: none;
}

@media (max-width: 860px) {
  .product-menu-item.is-coming-soon,
  .product-menu-item.is-coming-soon:disabled {
    color: currentColor;
    opacity: .42;
    background: rgba(20, 33, 61, .04);
  }

  .product-menu-item.is-coming-soon small {
    color: #1B1BA0;
    background: transparent;
    top: -.42em;
  }
}


/* =========================================================
   CLIENTES — COMPOSICIÓN V59
   Inspirada en la referencia: logos flotantes en la parte superior
   y el título centrado ligeramente más abajo.
   ========================================================= */
.clients-section {
  padding: 0;
  background: #ffffff;
}

.clients-shell {
  width: min(1460px, calc(100% - 42px));
  margin: 0 auto;
  padding: clamp(78px, 6vw, 108px) 0 clamp(84px, 7vw, 118px);
}

.clients-showcase {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 14%, rgba(252, 163, 17, .055), transparent 28%),
    linear-gradient(180deg, #fbfbfc 0%, #ffffff 74%);
  border: 1px solid rgba(20, 33, 61, .075);
  border-radius: 38px;
  box-shadow:
    0 22px 60px rgba(20, 33, 61, .075),
    0 2px 8px rgba(20, 33, 61, .04);
}

.clients-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background:
    linear-gradient(90deg,
      transparent 12%,
      rgba(20, 33, 61, .045) 12.05%,
      transparent 12.1%,
      transparent 35%,
      rgba(252, 163, 17, .055) 35.05%,
      transparent 35.1%,
      transparent 65%,
      rgba(20, 33, 61, .045) 65.05%,
      transparent 65.1%,
      transparent 88%,
      rgba(252, 163, 17, .055) 88.05%,
      transparent 88.1%);
}

.clients-heading {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 61%;
  width: min(820px, 78%);
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
}

.clients-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin: 0 0 18px;
  padding: 7px 13px;
  color: var(--navy);
  background: rgba(20, 33, 61, .055);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .14em;
}

.clients-heading h2 {
  max-width: 820px;
  margin: 0 auto;
  color: var(--navy);
  font-size: clamp(46px, 4.1vw, 70px);
  line-height: 1.04;
  letter-spacing: -.047em;
  font-weight: 800;
  text-wrap: balance;
}

/* Sobrescribimos la antigua cuadrícula: ahora cada logo vive en una
   posición editorial dentro del escenario. */
.client-logo-card {
  position: absolute;
  z-index: 3;
  width: clamp(170px, 14.5vw, 220px);
  height: clamp(112px, 9.3vw, 142px);
  margin: 0;
  padding: clamp(18px, 1.6vw, 25px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(20, 33, 61, .095);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(20, 33, 61, .09);
  transform: none;
}

.client-logo-card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 140px;
  background: linear-gradient(
    180deg,
    rgba(20, 33, 61, .10),
    rgba(20, 33, 61, 0)
  );
  pointer-events: none;
}

.client-logo-card img {
  width: auto;
  height: auto;
  max-width: 86%;
  max-height: 94px;
  object-fit: contain;
}

/* Distribución arqueada: los extremos quedan algo más abajo y las
   tarjetas centrales suben, como en la referencia. */
.client-position-1 {
  left: 8%;
  top: 155px;
}

.client-position-2 {
  left: 29%;
  top: 68px;
}

.client-position-3 {
  right: 29%;
  top: 68px;
}

.client-position-4 {
  right: 8%;
  top: 155px;
}

.client-logo-card-isradogs {
  background: #050505;
  border-color: rgba(255, 255, 255, .08);
}

.client-logo-card-isradogs img {
  max-width: 76%;
  max-height: 104px;
}

.client-logo-card-finlabor img {
  max-width: 88%;
  max-height: 62px;
}

@media (hover: hover) and (pointer: fine) {
  .client-logo-card:hover {
    transform: translateY(-6px);
    border-color: rgba(27, 27, 160, .24);
    box-shadow: 0 20px 42px rgba(20, 33, 61, .13);
  }
}

/* Tablet: se conserva la composición flotante, pero más compacta. */
@media (max-width: 980px) {
  .clients-shell {
    width: min(820px, calc(100% - 34px));
    padding-top: 74px;
    padding-bottom: 90px;
  }

  .clients-showcase {
    min-height: 570px;
    border-radius: 30px;
  }

  .clients-heading {
    top: 64%;
    width: 78%;
  }

  .clients-heading h2 {
    font-size: clamp(40px, 6.3vw, 58px);
  }

  .client-logo-card {
    width: clamp(142px, 20vw, 180px);
    height: clamp(98px, 13vw, 122px);
    padding: 18px;
  }

  .client-position-1 {
    left: 5%;
    top: 160px;
  }

  .client-position-2 {
    left: 27%;
    top: 66px;
  }

  .client-position-3 {
    right: 27%;
    top: 66px;
  }

  .client-position-4 {
    right: 5%;
    top: 160px;
  }

  .client-logo-card::after {
    height: 125px;
  }
}

/* Celular: los logos siguen primero, el título permanece centrado debajo. */
@media (max-width: 620px) {
  .clients-shell {
    width: calc(100% - 22px);
    padding-top: 62px;
    padding-bottom: 74px;
  }

  .clients-showcase {
    min-height: 570px;
    border-radius: 24px;
  }

  .clients-guides {
    opacity: .35;
  }

  .clients-heading {
    top: 70%;
    width: calc(100% - 34px);
  }

  .clients-eyebrow {
    margin-bottom: 14px;
    font-size: 9.5px;
  }

  .clients-heading h2 {
    font-size: clamp(34px, 9.3vw, 44px);
    line-height: 1.06;
  }

  .client-logo-card {
    width: calc(50% - 28px);
    height: 105px;
    padding: 15px;
    border-radius: 16px;
  }

  .client-position-1 {
    left: 16px;
    top: 150px;
  }

  .client-position-2 {
    left: 16px;
    top: 28px;
  }

  .client-position-3 {
    right: 16px;
    top: 28px;
  }

  .client-position-4 {
    right: 16px;
    top: 150px;
  }

  .client-logo-card::after {
    display: none;
  }

  .client-logo-card img {
    max-width: 86%;
    max-height: 70px;
  }

  .client-logo-card-isradogs img {
    max-width: 72%;
    max-height: 76px;
  }

  .client-logo-card-finlabor img {
    max-width: 90%;
    max-height: 44px;
  }
}


/* =========================================================
   CLIENTES — V60
   Regresamos a la composición limpia: título centrado arriba,
   logos debajo y sin tarjetas/cajas contenedoras.
   ========================================================= */
.clients-section {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.clients-shell {
  width: min(1260px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: clamp(96px, 7vw, 130px) 0 clamp(110px, 8vw, 150px) !important;
}

.clients-heading {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  transform: none !important;
  text-align: center !important;
}

.clients-eyebrow {
  display: block !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: var(--orange) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .36em !important;
}

.clients-heading h2 {
  max-width: 980px !important;
  margin: 0 auto !important;
  color: var(--navy) !important;
  font-size: clamp(46px, 4.4vw, 74px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  font-weight: 800 !important;
  text-wrap: balance;
}

.clients-logos {
  width: 100%;
  margin-top: clamp(58px, 6vw, 82px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(34px, 4vw, 70px);
}

.client-logo {
  position: static !important;
  width: 100% !important;
  height: 150px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.client-logo::after {
  display: none !important;
}

.client-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 118px;
  object-fit: contain;
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    opacity .3s ease;
}

.client-logo-isradogs {
  background: transparent !important;
}

.client-logo-isradogs img {
  max-width: 78%;
  max-height: 132px;
}

.client-logo-finlabor img {
  max-width: 90%;
  max-height: 70px;
}

@media (hover: hover) and (pointer: fine) {
  .client-logo:hover {
    transform: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .client-logo:hover img {
    transform: translateY(-5px) scale(1.025);
  }
}

@media (max-width: 980px) {
  .clients-shell {
    width: min(780px, calc(100% - 42px)) !important;
    padding-top: 90px !important;
    padding-bottom: 108px !important;
  }

  .clients-heading h2 {
    max-width: 720px !important;
    font-size: clamp(42px, 7vw, 60px) !important;
  }

  .clients-logos {
    margin-top: 54px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 50px;
  }

  .client-logo {
    height: 135px !important;
  }

  .client-logo img {
    max-width: 82%;
    max-height: 102px;
  }

  .client-logo-isradogs img {
    max-width: 72%;
    max-height: 118px;
  }

  .client-logo-finlabor img {
    max-width: 84%;
    max-height: 62px;
  }
}

@media (max-width: 620px) {
  .clients-shell {
    width: calc(100% - 34px) !important;
    padding-top: 82px !important;
    padding-bottom: 90px !important;
  }

  .clients-eyebrow {
    margin-bottom: 15px !important;
    font-size: 12px !important;
    letter-spacing: .3em !important;
  }

  .clients-heading h2 {
    font-size: clamp(35px, 9.8vw, 46px) !important;
    line-height: 1.06 !important;
  }

  .clients-logos {
    margin-top: 42px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }

  .client-logo {
    height: 105px !important;
  }

  .client-logo img {
    max-width: 88%;
    max-height: 78px;
  }

  .client-logo-isradogs img {
    max-width: 78%;
    max-height: 88px;
  }

  .client-logo-finlabor img {
    max-width: 92%;
    max-height: 48px;
  }
}


/* =========================================================
   PRODUCTOS — AJUSTE V62
   "Próximamente" usa el naranja HYPER y se acerca al nombre
   del producto para leerse como un superíndice.
   ========================================================= */
.product-menu-item.is-coming-soon {
  justify-content: flex-start !important;
  gap: 5px !important;
}

.product-menu-item.is-coming-soon small {
  margin-left: 0 !important;
  color: #FCA311 !important;
  top: -.42em !important;
  font-size: 9.5px !important;
}

@media (max-width: 860px) {
  .product-menu-item.is-coming-soon {
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  .product-menu-item.is-coming-soon small {
    color: #FCA311 !important;
    margin-left: 0 !important;
  }
}


/* =========================================================
   PRODUCTOS — AJUSTE V63
   Gastro y Agenda quedan sin fondo en reposo.
   El sombreado gris aparece únicamente al pasar el cursor.
   ========================================================= */
.product-menu-item.is-coming-soon,
.product-menu-item.is-coming-soon:disabled {
  background: transparent !important;
}

.product-menu-item.is-coming-soon:hover,
.product-menu-item.is-coming-soon:disabled:hover {
  background: rgba(20, 33, 61, .055) !important;
}

/* En dispositivos táctiles no dejamos un sombreado permanente. */
@media (max-width: 860px) {
  .product-menu-item.is-coming-soon,
  .product-menu-item.is-coming-soon:disabled {
    background: transparent !important;
  }

  .product-menu-item.is-coming-soon:hover,
  .product-menu-item.is-coming-soon:disabled:hover {
    background: rgba(20, 33, 61, .055) !important;
  }
}


/* =========================================================
   CLIENTES — MOTION GALLERY V64
   Composición inspirada en Gallery Showcase de Motion.dev.
   Se mantiene la identidad clara de HYPER y los logos sin cajas.
   ========================================================= */
.clients-motion-section {
  background:
    radial-gradient(circle at 50% 66%, rgba(27, 27, 160, .055), transparent 34%),
    #ffffff !important;
}

.clients-motion-section .clients-shell {
  width: min(1420px, calc(100% - 48px)) !important;
  padding-bottom: clamp(80px, 6vw, 112px) !important;
}

.clients-motion-section .clients-heading {
  position: relative;
  z-index: 5;
}

.clients-motion-stage {
  position: relative;
  width: 100%;
  height: clamp(390px, 31vw, 480px);
  margin-top: clamp(28px, 3vw, 46px);
  overflow: hidden;
  isolation: isolate;
}

.client-motion-item {
  position: absolute !important;
  width: clamp(190px, 16vw, 245px) !important;
  height: clamp(120px, 10.8vw, 165px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.client-motion-item::after {
  display: none !important;
}

.client-motion-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(20, 33, 61, .12));
  transition: filter .28s ease;
}

.client-motion-isradogs {
  left: 6%;
  top: 42%;
}

.client-motion-go {
  left: 29%;
  top: 14%;
}

.client-motion-immi {
  left: 53%;
  top: 10%;
}

.client-motion-finlabor {
  left: 72%;
  top: 43%;
  width: clamp(220px, 18vw, 285px) !important;
}

.client-motion-isradogs img {
  max-width: 84% !important;
  max-height: 94% !important;
}

.client-motion-finlabor img {
  max-height: 72% !important;
}

@media (hover: hover) and (pointer: fine) {
  .client-motion-item:hover img {
    filter: drop-shadow(0 18px 28px rgba(20, 33, 61, .18));
  }
}

/* Tablet: mismo abanico, más compacto. */
@media (max-width: 980px) {
  .clients-motion-section .clients-shell {
    width: min(820px, calc(100% - 34px)) !important;
  }

  .clients-motion-stage {
    height: 390px;
    margin-top: 26px;
  }

  .client-motion-item {
    width: clamp(150px, 22vw, 190px) !important;
    height: clamp(102px, 15vw, 132px) !important;
  }

  .client-motion-isradogs {
    left: 2%;
    top: 48%;
  }

  .client-motion-go {
    left: 27%;
    top: 15%;
  }

  .client-motion-immi {
    left: 54%;
    top: 12%;
  }

  .client-motion-finlabor {
    left: 72%;
    top: 49%;
    width: clamp(175px, 25vw, 220px) !important;
  }
}

/* Celular: una composición en arco todavía visible y sin solaparse
   con el título. */
@media (max-width: 620px) {
  .clients-motion-section .clients-shell {
    width: calc(100% - 22px) !important;
  }

  .clients-motion-stage {
    height: 340px;
    margin-top: 22px;
  }

  .client-motion-item {
    width: 132px !important;
    height: 92px !important;
  }

  .client-motion-isradogs {
    left: -4%;
    top: 54%;
  }

  .client-motion-go {
    left: 17%;
    top: 14%;
  }

  .client-motion-immi {
    left: 51%;
    top: 12%;
  }

  .client-motion-finlabor {
    left: 67%;
    top: 56%;
    width: 148px !important;
  }

  .client-motion-item img {
    filter: drop-shadow(0 9px 14px rgba(20, 33, 61, .10));
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-motion-item {
    opacity: 1 !important;
  }
}


/* =========================================================
   CLIENTES — AJUSTE V65
   Recursos transparentes + movimiento Motion corregido.
   ========================================================= */
.client-motion-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.client-motion-item img {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 18px rgba(20, 33, 61, .10)) !important;
}

.client-motion-isradogs img {
  max-width: 92% !important;
  max-height: 100% !important;
}

.client-motion-go img,
.client-motion-immi img {
  max-width: 96% !important;
  max-height: 96% !important;
}

.client-motion-finlabor img {
  max-width: 100% !important;
  max-height: 76% !important;
}


/* =========================================================
   SOLUCIONES — AJUSTE V67
   Eliminamos únicamente los marcos azules exteriores de las
   tarjetas. El panel azul #1B1BA0 del contenido se conserva.
   ========================================================= */
.capability-card,
.capability-card[data-slot="0"],
.capability-card[data-slot="1"],
.capability-card[data-slot="2"],
.capability-card-software,
.capability-card-automation,
.capability-card-ai {
  border: none !important;
  outline: none !important;
}

/* Evita que el borde reaparezca por estados de hover/focus. */
.capability-card:hover,
.capability-card:focus,
.capability-card:focus-within {
  border: none !important;
  outline: none !important;
}

/* Conservamos explícitamente el fondo azul de la descripción. */
.capability-details,
.capability-card-automation .capability-details,
.capability-card-ai .capability-details {
  background: #1B1BA0 !important;
}


/* =========================================================
   SOLUCIONES — AJUSTE V68
   Eliminamos cualquier línea/borde residual visible en TODOS
   los lados de las tarjetas de la sección Soluciones.
   El fondo azul del bloque de texto se conserva.
   ========================================================= */

/* Contenedores principales de cada tarjeta */
.capability-card,
.capability-card[data-slot="0"],
.capability-card[data-slot="1"],
.capability-card[data-slot="2"],
.capability-card-software,
.capability-card-automation,
.capability-card-ai {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* También removemos líneas residuales en wrappers internos */
.capability-hover-window,
.capability-visual,
.capability-media,
.capability-media img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Si algún borde aparece por hover/focus, lo anulamos */
.capability-card:hover,
.capability-card:focus,
.capability-card:focus-within,
.capability-hover-window:hover,
.capability-hover-window:focus,
.capability-hover-window:focus-within {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Anula pseudo-elementos que pudieran dibujar líneas */
.capability-card::before,
.capability-card::after,
.capability-hover-window::before,
.capability-hover-window::after,
.capability-visual::before,
.capability-visual::after,
.capability-media::before,
.capability-media::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Mantener el panel azul del contenido desplegado */
.capability-details,
.capability-card-software .capability-details,
.capability-card-automation .capability-details,
.capability-card-ai .capability-details {
  background: #1B1BA0 !important;
}

/* Mantener la línea superior interna del panel azul si existe */
.capability-card-automation .capability-details,
.capability-card-ai .capability-details,
.capability-card-software .capability-details {
  border-top-color: rgba(255, 255, 255, .16) !important;
}


/* =========================================================
   SOLUCIONES — AJUSTE V69
   La línea azul vertical residual no era un borde: provenía del
   fondo azul heredado en el contenedor/wrapper de la tarjeta.
   Dejamos el contenedor en blanco y conservamos el panel azul
   SOLO en la descripción desplegable.
   ========================================================= */
.capability-card,
.capability-hover-window,
.capability-card-software,
.capability-card-automation,
.capability-card-ai {
  background: #ffffff !important;
}

.capability-media,
.capability-media-software,
.capability-media-automation,
.capability-media-ai,
.capability-media img {
  background: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.capability-details,
.capability-card-software .capability-details,
.capability-card-automation .capability-details,
.capability-card-ai .capability-details {
  background: #1B1BA0 !important;
}

/* Seguridad extra: eliminar cualquier halo lateral por subpíxel */
.capability-hover-window {
  overflow: hidden !important;
  isolation: isolate !important;
}


/* =========================================================
   CLIENTES — V71
   Alineación horizontal recta, sin movimiento.
   ========================================================= */
.clients-motion-stage {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  margin-top: clamp(48px, 5vw, 72px) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(32px, 4vw, 68px) !important;
  overflow: visible !important;
}

.client-motion-item,
.client-motion-isradogs,
.client-motion-go,
.client-motion-immi,
.client-motion-finlabor {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 150px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  z-index: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.client-motion-item img {
  width: auto !important;
  height: auto !important;
  max-width: 88% !important;
  max-height: 112px !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.client-motion-isradogs img {
  max-width: 76% !important;
  max-height: 130px !important;
}

.client-motion-finlabor img {
  max-width: 92% !important;
  max-height: 70px !important;
}

@media (hover: hover) and (pointer: fine) {
  .client-motion-item:hover,
  .client-motion-item:hover img {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 980px) {
  .clients-motion-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px 48px !important;
  }

  .client-motion-item,
  .client-motion-isradogs,
  .client-motion-go,
  .client-motion-immi,
  .client-motion-finlabor {
    width: 100% !important;
    height: 130px !important;
  }

  .client-motion-item img {
    max-width: 82% !important;
    max-height: 98px !important;
  }

  .client-motion-isradogs img {
    max-height: 116px !important;
  }

  .client-motion-finlabor img {
    max-height: 60px !important;
  }
}

@media (max-width: 620px) {
  .clients-motion-stage {
    margin-top: 38px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 20px !important;
  }

  .client-motion-item,
  .client-motion-isradogs,
  .client-motion-go,
  .client-motion-immi,
  .client-motion-finlabor {
    width: 100% !important;
    height: 105px !important;
  }

  .client-motion-item img {
    max-width: 88% !important;
    max-height: 76px !important;
  }

  .client-motion-isradogs img {
    max-width: 80% !important;
    max-height: 88px !important;
  }

  .client-motion-finlabor img {
    max-width: 92% !important;
    max-height: 48px !important;
  }
}


/* =========================================================
   TRANSICIÓN SOLUCIONES → CLIENTES — V72
   Evita que el carrusel de Soluciones se asome cuando se navega
   directamente a #clientes desde la barra superior.
   ========================================================= */
.solutions-section {
  overflow: clip !important;
  isolation: isolate;
  z-index: 1;
}

.clients-section {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate;
  background: #ffffff !important;
  scroll-margin-top: 88px !important;
}

/* Chrome/Opera antiguos pueden tratar overflow: clip distinto. */
@supports not (overflow: clip) {
  .solutions-section {
    overflow: hidden !important;
  }
}

/* =========================================================
   FOOTER — V72
   ========================================================= */
.site-footer {
  position: relative;
  z-index: 3;
  background: #14213D;
  color: #ffffff;
}

.footer-shell {
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 24px;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) minmax(260px, .95fr) minmax(250px, .8fr);
  align-items: start;
  gap: clamp(38px, 6vw, 88px);
}

.footer-brand-block {
  max-width: 370px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
}

.footer-brand img {
  display: block;
  width: 146px;
  height: auto;
}

.footer-brand-block p {
  max-width: 330px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.6;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 18px 38px;
  padding-top: 6px;
}

.footer-nav a {
  position: relative;
  width: fit-content;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: #FCA311;
  transition: width .24s ease;
}

.footer-nav a:hover {
  color: #ffffff;
}

.footer-nav a:hover::after {
  width: 100%;
}

.footer-contact {
  justify-self: end;
  text-align: right;
}

.footer-contact p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.footer-contact-btn:hover {
  color: #14213D;
  background: #ffffff;
  transform: translateY(-2px);
}

.footer-contact-btn .whatsapp-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer-bottom {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .48);
  font-size: 12px;
}

@media (max-width: 980px) {
  .footer-shell {
    width: min(760px, calc(100% - 42px));
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
  }

  .footer-contact {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 620px) {
  .clients-section {
    scroll-margin-top: 72px !important;
  }

  .footer-shell {
    width: calc(100% - 34px);
    padding-top: 48px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
  }

  .footer-contact {
    grid-column: auto;
  }

  .footer-bottom {
    margin-top: 38px;
    line-height: 1.5;
  }
}


/* =========================================================
   FOOTER — V73
   Estructura editorial con secciones: Sobre nosotros,
   En este sitio, Productos y Redes sociales.
   ========================================================= */
.site-footer {
  position: relative;
  z-index: 3;
  background: #14213D;
  color: #ffffff;
}

.footer-shell {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 68px 0 24px;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(230px, .9fr) minmax(0, 2.1fr);
  align-items: start;
  gap: clamp(54px, 7vw, 110px);
}

.footer-brand-block {
  max-width: 330px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
}

.footer-brand img {
  display: block;
  width: 150px;
  height: auto;
}

.footer-brand-block p {
  max-width: 300px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.6;
}

.footer-columns {
  display: grid;
  grid-template-columns:
    minmax(120px, .8fr)
    minmax(150px, 1fr)
    minmax(180px, 1.1fr)
    minmax(130px, .8fr);
  gap: clamp(30px, 4vw, 58px);
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.footer-column h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
}

.footer-column a,
.footer-product {
  width: fit-content;
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  text-decoration: none;
}

.footer-column a {
  position: relative;
  transition: color .2s ease;
}

.footer-column a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1.5px;
  background: #FCA311;
  transition: width .22s ease;
}

.footer-column a:hover {
  color: #ffffff;
}

.footer-column a:hover::after {
  width: 100%;
}

.footer-products-column {
  gap: 11px;
}

.footer-product {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.footer-product.is-coming {
  color: rgba(255, 255, 255, .46);
}

.footer-product small {
  position: relative;
  top: -.38em;
  color: #FCA311;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.footer-social-link {
  color: rgba(255, 255, 255, .72) !important;
}

.footer-bottom {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .11);
  color: rgba(255, 255, 255, .42);
  font-size: 11.5px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .footer-brand-block {
    max-width: 420px;
  }

  .footer-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .footer-shell {
    width: min(680px, calc(100% - 38px));
    padding-top: 56px;
  }

  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 36px;
  }
}

@media (max-width: 480px) {
  .footer-shell {
    width: calc(100% - 32px);
    padding-top: 48px;
  }

  .footer-brand img {
    width: 138px;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 34px 22px;
  }

  .footer-column h3 {
    font-size: 14px;
  }

  .footer-column a,
  .footer-product {
    font-size: 12.5px;
  }

  .footer-product {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .footer-product small {
    font-size: 8px;
  }

  .footer-bottom {
    margin-top: 42px;
  }
}


/* =========================================================
   FOOTER — V74
   Recuperamos CTA de contacto y usamos ícono de Instagram.
   ========================================================= */
.footer-cta {
  margin-top: 30px;
}

.footer-cta p {
  margin: 0 0 13px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 43px;
  padding: 9px 17px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  color: #ffffff;
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease,
    border-color .2s ease;
}

.footer-contact-btn:hover {
  color: #14213D;
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
}

.footer-contact-btn .whatsapp-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
}

.footer-instagram-link {
  width: 42px !important;
  height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .82) !important;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    transform .2s ease !important;
}

.footer-instagram-link::after {
  display: none !important;
}

.footer-instagram-link:hover {
  color: #ffffff !important;
  border-color: rgba(252, 163, 17, .72);
  background: rgba(252, 163, 17, .10);
  transform: translateY(-2px);
}

.footer-instagram-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.footer-instagram-icon .instagram-dot {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 780px) {
  .footer-cta {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .footer-contact-btn {
    min-height: 41px;
    padding: 8px 15px;
    font-size: 13px;
  }

  .footer-instagram-link {
    width: 40px !important;
    height: 40px;
  }
}


/* =========================================================
   FOOTER — V75
   CTA separado y alineado al extremo derecho.
   ========================================================= */
.footer-action-row {
  margin-top: 46px;
  padding: 30px 0 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.footer-action-copy {
  max-width: 430px;
  text-align: right;
}

.footer-action-copy p {
  margin: 0;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
}

.footer-action-copy span {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, .56);
  font-size: 12.5px;
  line-height: 1.5;
}

.footer-contact-btn-large {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 10px 20px;
}

.footer-bottom {
  margin-top: 28px !important;
}

@media (max-width: 780px) {
  .footer-action-row {
    margin-top: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .footer-action-copy {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .footer-action-copy p {
    font-size: 18px;
  }

  .footer-action-copy span {
    font-size: 12px;
  }
}


/* =========================================================
   FOOTER — V76
   Instagram + LinkedIn.
   ========================================================= */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-social-icon-link {
  width: 42px !important;
  height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .82) !important;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    transform .2s ease !important;
}

.footer-social-icon-link::after {
  display: none !important;
}

.footer-social-icon-link:hover {
  color: #ffffff !important;
  border-color: rgba(252, 163, 17, .72);
  background: rgba(252, 163, 17, .10);
  transform: translateY(-2px);
}

.footer-social-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-instagram-icon .instagram-dot {
  fill: currentColor;
  stroke: none;
}

/* Anula el estilo específico anterior para mantener ambos iconos iguales. */
.footer-instagram-link {
  display: none !important;
}

@media (max-width: 480px) {
  .footer-social-icon-link {
    width: 40px !important;
    height: 40px;
  }
}


/* =========================================================
   INTRO DE MARCA — HYPER V78
   Pantalla completa + transición del logo hacia la navbar.
   ========================================================= */
.brand-intro {
  display: none;
}

html.hyper-intro-pending,
html.hyper-intro-pending body {
  overflow: hidden !important;
}

html.hyper-intro-pending .site-header,
html.hyper-intro-pending main,
html.hyper-intro-pending .site-footer {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.hyper-intro-pending .brand-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block !important;
  overflow: hidden;
  background: #ffffff;
}

.brand-intro-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #ffffff;
  opacity: 1;
}

.brand-intro-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  opacity: 1;
}

.brand-intro-flight-logo {
  position: fixed;
  z-index: 4;
  display: block;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  will-change: left, top, width, height, opacity;
}

.brand-intro-flight-logo.is-visible {
  opacity: 1;
}

html.hyper-intro-revealing .site-header,
html.hyper-intro-revealing main,
html.hyper-intro-revealing .site-footer {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity .55s ease .06s !important;
}

html.hyper-intro-flying .site-header .brand {
  opacity: 0 !important;
}

.brand-intro.is-transitioning .brand-intro-video {
  opacity: 0;
  transform: scale(1.012);
  transition: opacity .26s ease, transform .7s ease;
}

.brand-intro.is-transitioning .brand-intro-backdrop {
  opacity: 0;
  transition: opacity .72s ease .08s;
}

.brand-intro-flight-logo.is-arrived {
  opacity: 0;
  transition: opacity .12s ease;
}

.brand-intro.is-finished {
  display: none !important;
}

@media (max-width: 980px) {
  html.hyper-intro-revealing .site-header,
  html.hyper-intro-revealing main,
  html.hyper-intro-revealing .site-footer {
    transition-duration: .48s !important;
  }
}

@media (max-width: 620px) {
  html.hyper-intro-revealing .site-header,
  html.hyper-intro-revealing main,
  html.hyper-intro-revealing .site-footer {
    transition-duration: .42s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-intro {
    display: none !important;
  }
}


/* =========================================================
   INTRO DE MARCA — V79
   Crossfade de doble capa para eliminar el glitch perceptible.
   ========================================================= */
.brand-intro-flight-logo {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.brand-intro.is-transitioning .brand-intro-video {
  /* El PNG ya fue pintado dos frames antes de iniciar este fade. */
  opacity: 0;
  transform: scale(1.006);
  transition:
    opacity .34s ease .05s,
    transform .72s cubic-bezier(.22, 1, .36, 1);
}

.brand-intro.is-transitioning .brand-intro-backdrop {
  opacity: 0;
  transition: opacity .76s ease .10s;
}

/* Al llegar a navbar, el logo real aparece primero y luego sale el PNG. */
.brand-intro-flight-logo.is-arrived {
  opacity: 0;
  transition: opacity .18s ease !important;
}


/* =========================================================
   SOLUCIONES — V81
   En escritorio, la sección ocupa al menos todo el alto visible
   bajo la navbar para evitar que "CLIENTES" se asome al entrar.
   ========================================================= */
@media (min-width: 981px) {
  .solutions-section {
    min-height: calc((var(--vh, 1vh) * 100) - 90px) !important;
  }
}


/* =========================================================
   SOLUCIONES — V82
   En pantallas grandes y altas centramos verticalmente TODO el
   bloque (SOLUCIONES + título + carrusel) dentro del alto visible.
   Las pantallas de escritorio normales conservan la vista previa.
   ========================================================= */
@media (min-width: 1400px) and (min-height: 820px) {
  .solutions-section {
    min-height: calc((var(--vh, 1vh) * 100) - 90px) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .solutions-shell {
    width: min(1480px, calc(100% - 72px)) !important;
    margin: 0 auto !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}


/* =========================================================
   SOLUCIONES — V83
   En pantallas grandes/altas desplazamos de forma perceptible
   TODO el bloque (eyebrow + título + carrusel) hacia abajo.
   Escritorio normal permanece intacto.
   ========================================================= */
@media (min-width: 1400px) and (min-height: 820px) {
  .solutions-shell {
    position: relative !important;
    transform: translateY(clamp(70px, 8vh, 105px)) !important;
  }
}

/* En monitores especialmente altos damos un poco más de descenso. */
@media (min-width: 1400px) and (min-height: 980px) {
  .solutions-shell {
    transform: translateY(clamp(95px, 10vh, 135px)) !important;
  }
}


/* =========================================================
   SOLUCIONES — V84
   Refinamiento final:
   - títulos sobre imagen con menos peso visual;
   - tamaños/proporciones del carrusel intactos.
   ========================================================= */
@media (min-width: 981px) {
  .capability-media-heading {
    font-size: clamp(30px, 2.75vw, 56px) !important;
    line-height: .95 !important;
  }

  .capability-media-heading-medium {
    font-size: clamp(28px, 2.25vw, 46px) !important;
    line-height: .98 !important;
  }
}

@media (min-width: 621px) and (max-width: 980px) {
  .capability-media-heading,
  .capability-media-heading-medium {
    font-size: clamp(24px, 3.7vw, 36px) !important;
    line-height: .98 !important;
  }
}


/* =========================================================
   FOOTER — V85
   Ajustes finales de distribución:
   - logo + slogan más compactos;
   - columnas informativas desplazadas hacia la derecha;
   - responsive en escritorio, tablet y móvil.
   ========================================================= */

/* 1) Reducimos el espacio entre logo y slogan */
.footer-brand-block p {
  margin-top: 6px !important;
}

/* 2) Empujamos el bloque de columnas hacia la derecha */
.footer-columns {
  margin-left: clamp(28px, 4.5vw, 78px) !important;
}

/* Si el footer usa la composición footer-top de las últimas versiones,
   damos un poco más de peso al espacio de marca para separar visualmente
   ambos bloques sin alterar el ancho global. */
.footer-top {
  grid-template-columns: minmax(230px, .82fr) minmax(0, 2.18fr) !important;
}

/* Tablet: mantenemos el movimiento hacia la derecha pero sin forzar
   desbordamientos cuando las columnas bajan de línea. */
@media (max-width: 1100px) {
  .footer-columns {
    margin-left: clamp(18px, 3vw, 34px) !important;
  }
}

/* En layouts de dos columnas seguimos desplazando el contenido,
   pero de forma contenida. */
@media (max-width: 780px) {
  .footer-columns {
    margin-left: 18px !important;
  }

  .footer-brand-block p {
    margin-top: 4px !important;
  }
}

/* Celular: también aplicamos el ajuste solicitado, aunque de manera
   moderada para no sacrificar ancho útil. */
@media (max-width: 480px) {
  .footer-columns {
    margin-left: 12px !important;
  }

  .footer-brand-block p {
    margin-top: 2px !important;
  }
}


/* =========================================================
   FOOTER — V86
   - logo + slogan visualmente unidos;
   - las tres columnas visibles quedan realmente al extremo derecho;
   - se elimina la cuarta columna fantasma que correspondía a Productos.
   ========================================================= */

.footer-brand-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.footer-brand {
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-brand img {
  display: block !important;
  width: 150px !important;
  height: auto !important;
  margin: 0 !important;
}

.footer-brand-block p {
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-2px);
}

.footer-top {
  grid-template-columns: minmax(230px, .72fr) minmax(0, 2.28fr) !important;
  gap: clamp(40px, 5vw, 78px) !important;
}

.footer-columns {
  width: 100% !important;
  margin-left: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, max-content) !important;
  justify-content: end !important;
  justify-self: end !important;
  column-gap: clamp(54px, 6vw, 100px) !important;
  row-gap: 24px !important;
}

.footer-column {
  min-width: 0 !important;
}

/* Tablet: seguimos pegando el conjunto al lado derecho. */
@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: minmax(210px, .7fr) minmax(0, 2.3fr) !important;
    gap: 32px !important;
  }

  .footer-columns {
    grid-template-columns: repeat(3, max-content) !important;
    justify-content: end !important;
    column-gap: clamp(30px, 4vw, 52px) !important;
    margin-left: 0 !important;
  }
}

/* Pantallas angostas: dos columnas, siempre ancladas a la derecha.
   Redes sociales ocupa la segunda columna de la segunda fila. */
@media (max-width: 780px) {
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .footer-columns {
    grid-template-columns: repeat(2, max-content) !important;
    justify-content: end !important;
    column-gap: 40px !important;
    row-gap: 30px !important;
    margin-left: 0 !important;
  }

  .footer-columns > .footer-column:last-child {
    grid-column: 2 !important;
  }

  .footer-brand img {
    width: 142px !important;
  }
}

/* Celular: todo el bloque informativo queda visualmente a la derecha. */
@media (max-width: 480px) {
  .footer-brand-block p {
    transform: translateY(-1px);
  }

  .footer-columns {
    grid-template-columns: 1fr !important;
    justify-items: end !important;
    row-gap: 26px !important;
  }

  .footer-columns > .footer-column,
  .footer-columns > .footer-column:last-child {
    grid-column: 1 !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
}


/* =========================================================
   HERO — V88
   El difuminado azul/naranja espera a que termine el video de
   introducción. Si la intro no se reproduce, conserva el
   comportamiento normal de entrada al cargar la página.
   ========================================================= */
html:not(.hyper-hero-wave-ready) .hero-wave-background {
  animation: none !important;
  opacity: 0;
}

html.hyper-hero-wave-ready .hero-wave-background {
  animation: heroWaveFadeIn 2.5s ease-out .10s forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  html.hyper-hero-wave-ready .hero-wave-background {
    animation: none !important;
    opacity: 1;
  }
}


/* =========================================================
   HERO — V89
   Sincronización simple y estable:
   si se reproduce la intro de HYPER, el difuminado azul/naranja
   empieza 4 segundos después de cargar la página.
   La clase permanece durante toda la transición para evitar reinicios.
   ========================================================= */
html.hyper-hero-wave-ready.hyper-hero-wave-delayed .hero-wave-background {
  animation: heroWaveFadeIn 2.5s ease-out 4s forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  html.hyper-hero-wave-ready.hyper-hero-wave-delayed .hero-wave-background {
    animation: none !important;
    opacity: 1 !important;
  }
}